Speaking of the font metrics, I’ve just bought the Martian Grotesk font family for the upcoming redesign of my personal website. Its author Roman Shamin put a great deal of work into making this font a fantastic choice for web and digital design — equal vertical metrics for perfect positioning inside a bounding box, glyph height sticking to the pixel grid at common sizes, case sensitivity, and a variable version. It’s one of the most thoughtfully made fonts for the UI work and currently it’s 60% off until September 4th. (See also his free open-source font Martian Mono.)
The Chrome Cast podcast interviews Noah Levin, the Director of Design at Figma. Besides talking about Figma and FigJam, they discuss Google for Education’s partnership with Figma to bring the collaborative design platform to education Chromebooks across the US and how Figma is leaning into the education space.
Anthony DiSpezio with a great tip on controlling opacity and zoom level with the number keys.
Incoming #figmatip
— Anthony DiSpezio (@adispezio) August 19, 2022
*Number keys for opacity* enabled:
- 0-9 to set 10% increments
- Tap two keys quickly for the exact %
- Tap 0 twice for 0%
- Hold shift for zoom keys⬇️
if disabled:
- 1 for 'zoom to fit'
- 2 for '...selection'
- 0 for '...100%'
- Hold shift for opacity keys⬆️ pic.twitter.com/82Et0GSV1w
Patrick Morgan asked designers about their favorite Figma shortcuts and shares the top 10 recommendations based on 220+ responses.
I asked designers for their favorite @figma keyboard shortcuts.
— Patrick Morgan (@itspatmorgan) August 15, 2022
220+ responses and hours of synthesis later...
Here are the top 10 keyboard shortcuts to supercharge your workflow:
Molly Hellmuth gives a few practical recommendations on creating a bulletproof color system.
Christine Vallaure highlights some of Figma’s features and possibilities to help you build a design that aligns with code as much as needed and improve your teamwork.
Molly Hellmuth shares a few things she learned about using Component Properties after rebuilding a design system from scratch.
I just rebuilt my Design System from scratch (to include Config2022 updates)
— Molly Hellmuth (@molly_hellmuth) August 11, 2022
Here are the 3 biggest thing I learned about using Component Properties during this process.. pic.twitter.com/9aNJcmxNjd
“Cloud 100 leaders from Algolia, Figma, Gong.io, and Papaya Global share their stories from the trenches as they offer both strategic and tactical advice to founders on building enduring businesses.”
To celebrate 10 years of Figma, Dylan Field shares 10 physical objects from Figma’s history that are special to him. The beta notebook and WebGL coffee table are my favorites!
10 years ago, in August 2012, I dropped out of @BrownUniversity to start @Figma with @evanwallace !
— Dylan Field (@zoink) August 11, 2022
We might be in the business of digital design at Figma, but we love physical objects too!
So to celebrate 10 years I'm sharing 10 physical objects that are special to me...
The founder of Cron wondered about this question, and Figma’s Design Director Noah Levin came up with some great links in replies.
Haha yes totally!
— Noah Levin (@nlevin) August 5, 2022
Some relevant links:https://t.co/eOue1DHw7Mhttps://t.co/AcQYLgFQS8https://t.co/8BIf6y60QPhttps://t.co/Xd1KHqxFPi
But yeah there's so much more to it that I'd love for us to share sometime… especially how FigJam has pretty much replaced all "presentations"
Ridd finally launched his YouTube channel! That’s an instant-subscribe. There are already a bunch of great videos, including the latest on building a product design inspiration database in Notion. See also his best practices for component properties.
Luis Ouriach walks through updates to the design system structure recommended by Figma Advocates.
Happy Monday ☀️
— luis. (@disco_lu) August 1, 2022
The @figma design systems guide has been updated (big time!), with tips for:
• Differences between each Figma plan
• 3 types of design system file
• Example organisation structures
• 4 file structure examples
• Local component guidehttps://t.co/z00j98bech pic.twitter.com/6t3Ey5uSHS
Miguel with a few useful shortcuts for adjusting font size, weight, letter spacing, and line height.
Happy Monday! Here are some some great shortcuts when deep in the weeds of type exploration in @figma.
— miggity miggity mac (@miggi) August 1, 2022
Easily adjust font size, weight, letter spacing and line height using modifier keys and the <, > symbols. On Windows, swap out "alt" for "⌥" and "ctrl" for "⌘"#figmatip pic.twitter.com/byFfkVWUMe
Bonnie Kate Wolf designs pictograms for Netflix in Figma.
Designing pictograms for @netflix in @figma
— Bonnie Kate Wolf (@bonniekatewolf) August 2, 2022
Somebody pinch me! pic.twitter.com/Z6U1DZR2Ku
Annotation is a lot smoother with Pencil strokes no longer getting clipped or disturbing Auto Layout in frames. See also Marcin Wichary’s short thread on how they got to this solution.
Sometimes I feel happier about the little fixes than the giant new features. Using the pencil tool in clipped or AutoLayout frames pretty much always did the Wrong Thing. Thanks to @mwichary for talking through all the little edge cases with me. pic.twitter.com/XKhuxXpjrX
— Michael Feldstein (@msfeldstein) August 2, 2022
Rogie comes to the rescue and explains how to preserve a fill color when icons are overridden and swapped. It’s worth keeping a layer name consistent across icons in the library if you plan to use them in different colors.
To get icon colors to preserve when they are overridden and swapped, you need to make sure that your layer names are the same. You'll see in this gif that add_circle and add_shopping_cart have the same layer name...that's how Figma knows to apply the override as you swap. pic.twitter.com/io8DZFtgBQ
— ˗ˏˋrogieˎˊ (@rogie) July 29, 2022
Miggi with a mind-blowing trick for selecting items inside of the tight spots.
Haven't posted a #FigmaTip in a while, so here goes.
— miggi from figgi (@miggi) July 28, 2022
In @figma, draw a selection then hold the space bar to move the selection over the objects you want to select. Great for getting items inside of those tight spots. 🎉 pic.twitter.com/zEcCb90Jyk
Zander Whitehurst shows how to create a cool interactive carousel in Figma. See also his quick video “Wireframe to Landing page” where he uses that carousel in a landing page design.
🎠 Designing curved carousels in @figma, supafast! pic.twitter.com/lcYnvc8dCM
— Zander Whitehurst (@zander_supafast) July 27, 2022
The fresh look of the Figma Community with improved search and a new browsing experience makes it easier to discover and differentiate between categories like product (Figma or FigJam), use cases (like design systems), and resources (widgets or plugins).
Miggi shows how to create a FigJam file, maximize the FigJam collaboration features, navigate the FigJam toolbar, add text, images, and stickers to your file, use sections for organization, and finally, how to invite others to your FigJam file.