🧙♀️ 20 second tip 🧙♀️
Min width hack — to encode minimum width behavior in a button component, add a rectangle/frame with desired min width and .001 height. Figma will round the ".001" down to "0" and honor the width property. Longer labels will expand the container as expected.
✨ New opportunity ✨ We're looking for a brand designer to join the Medium design team. Are you excited about the power of writing? Have ideas on where to take our brand? Apply here:
+100. These actions are hard to get to. Current solution works for the lowest common denominator but perhaps the toolbar could adapt to wider viewports:
🧙♀️ 16 second tip 🧙♀️
One of my favorite details in Figma — you can have your component variants present as a toggle if you enter a boolean pair: yes/no, on/off, or true/false.
Thanks everyone for the warm reception!! It's been so fun seeing it in the wild already.
Pushed an update to address a few wonky areas, keep the feedback coming!
What should I tackle next... programming ligatures?
Changelog here:
Thought I'd drop a quick tip on hump days, just in case ya didn't know...
🧙♀️ 10 second tips 🧙♀️
In Figma, did you know you can double-click the bounding box around text to wrap it to "Auto width"?
🧙♀️ 15 second tip 🧙♀️
Save time in Figma with batch rename. Select the frames you want to rename, press command + R for the Rename panel, and add a prefix across all of them, for example.
Pictured: icons from
@_phosphoricons
🧙♀️ 10 second tip 🧙♀️
To copy the *style* of an element, select the reference object and press option + command + c, then select the target object and press option + command + v.
The stroke, fill, and corner radius all carry over.
Ever wonder how
@Wikipedia
works?
I'm thrilled to be speaking with Alex Hollender, Jan Drewniak, and Olga Vasileva from the
@Wikimedia
Foundation on Saturday. Catch us at 11am ET for a discussion about building for an international audience.
#mediumday
🧙♀️ Screenshot tip 🧙♀️
Escape the clutter! On Mac, SHIFT + CMD + 4 to take a screenshot of the desired area, then hold the CTRL key to copy to clipboard versus saving the image to disc.
🧙♀️10 second tip 🧙♀️
Change the nudge amount in Figma to your liking. (Arrow keys for a small nudge and shift + arrow keys for a big nudge.) Can be helpful when working with an 8pt grid (set to 8) or when working on icons with finer detail (set to .5).
Shift + , opens Preferences.
About a week ago we quietly launched version 2.0 of Phosphor, and we're really proud of it. 201 new icons, a ton of little conveniences added in our libraries and plugins based on your feedback, and a new style on our website. Hope you enjoy 👾
THIS SESSION IS MY BABY. AND I AM SO JACKED THAT
@ciruyv
AND I GET TO HOST FIGMA LIKE THE PROS AT CONFIG!
It's an honor to work with some of our community best, and bring the tips and tricks to you! Let's get hyped!
Phosphor turned 4 yesterday.
It all started in our Brooklyn apartment in summer 2020, at the height of the pandemic, when our kitchen was our office and there was nowhere else to be.
A few icons became a few hundred, then a few thousand.
🧵 1/4
Today I rediscovered this 🔥🔥 compendium of maps, charts, and other visualizations by
@jasondavies
. It's my favorite thing.
Who doesn't love a good voronoi diagram? :)
Powerful scene in Succession S03E03 depicting the coordination of law enforcement agencies, represented by the Arial FBI, the Franklin Gothic FBI, the Univers FBI, the Impact FBI, and even the Aachen FBI.
@MaterialsOffice
I’ve finally received my along-awaited Altar I that I’ve been looking forward to for over a year! While it is a beautiful and unique keyboard, I feel that some of the design choices fall seriously short of expectations for the price point.🧵 (1/5)
@skuwamoto
@figmadesign
• Scale elements proportionally ()
• Apply a stroke/border on just one side (or two, three sides)
• Register different rotations in a component variant
• Set negative padding in Auto Layout
• Undo create component
The recent violence against Asian Americans has been heartbreaking. My sister
@m00b34r
and I are collaborating on a badge series to express our emotions and join the community in giving voice to the issue.
#hateisavirus
#stopasianhate
#stopaapihate
@skuwamoto
@figmadesign
• Select element to set as reference point, à la Illustrator (handy when aligning things)
• Type dimensions and l/r/t/b to set reference point, à la Sketch (50r changes dimensions to 50 from the right side)
• More nuanced animations for prototyping
• Design token support
We’ve raised $1,000 for
@hateisavirus_
!!!!!!!! Thanks everyone for your support.
Our next milestone is $1,500. You can help us by purchasing stickers here:
Today, we have an update we know many of you have been asking for: Code blocks with syntax highlighting are available in the Medium story editor. These have better readability, making it easier for your readers to understand and learn from your code.
@OdiOnuigbo
@uxniels
Kap is excellent, so simple and thoughtfully designed
I used Claquette, which has more granular control on the export but probably overkill for these clips
Happy to share that I’ve launched Family Style, a brand studio with my wife and best collaborator, Jess Walker.
If you’re working on something exciting or know someone who is, and could use some help bringing it to the world, let us know.
@harmanwardani
Sure. Let's say you want a leading icon. You'd group the icon + label in a horizontal auto layout.
For more nuance, you can also play with the padding so the button contents look centered. Adding an icon can throw off the optical alignment.
@Jabronus
👏 While we're at it, does the bell need a plus sign at all? Is the envelope a confusing symbol for DMs since it typically represents email? 😬