Figma turns 10. Fluent Emoji. Tokens to SCSS.
Can you believe Figma turns 10 this month?! I first tried it during the closed beta in March 2016 and thought it was silly. A year later, I was thoroughly impressed by their progress and features. In 2018 it became my primary tool and I fell in love with it, starting this newsletter and writing a book.
I’m taking a break this week to travel and spend time with my family, so the next issue will come out on August 29th. Stay cool!
— Eugene
Sponsor
4 ways to overcome Figma handoff challenges
One of the biggest struggles in bringing a product to life is handoff between designers and developers. Here are 4 ways to make handoff clearer, easier, and faster.
App Updates
Accessible prototypes in Figma
Figma opened up the prototype screen reader beta to everyone. The feature was announced earlier in May. “The beta includes screen reader support for text nodes, alt text for images, and the ability to interact with prototypes with buttons and keyboard actions like tabbing.” Here is a quick preview using a macOS VoiceOver.
What’s New
Designing in the Open(Source)
Microsoft Design refreshed their entire library of Fluent Emojis last year, and now they’re open-sourcing them on Figma Community (see also parts 2 and 3) and GitHub. A staggering amount of work went into this set of 1,538 emojis and it’s definitely worth exploring. Every icon is available in multiple variants — 3D, flat, and high contrast. Beautiful work!
Cloud 100
Forbes’ Cloud 100 is a list of the world’s top private cloud companies. Figma keeps climbing higher and higher in this rating — this year it’s #5 on the list, after being #7 last year and #29 in 2020.
Using Figma
How to sync design tokens from Figma to SCSS variables
I’m not familiar with the Specify app, but this use case is something I’ve been thinking of automating myself. Happy to see that there is an existing solution! As Sun Tzu once said, “If you wait by the river long enough, the Figma tools and plugins you need will float by.”
3 thing about using Component Properties
Molly Hellmuth shares a few things she learned about using Component Properties after rebuilding a design system from scratch.
7 rules for crafting presentations in Figma
Patrick Morgan on setting guardrails to give structure to your presentations made in Figma. (I always use Figma for my slides. One time I had to use Google Slides, so I designed my slides in Figma and then copy-pasted them to the presentation.)
Groups vs Frames
And one more good piece of advice from Patrick. Every time I use a rectangle I just create more work for myself down the road.
Embed Interactive Figma Prototypes and Files into Notion
Elizabeth Alli shares how to embed an interactive Figma prototype into Notion.
The Definitive Guide to Figma Auto Layout
Learn everything you need to know to master the latest version of Auto Layout and optimize your work.
Plugins
Wire Box
Wire Box converts your high fidelity designs into low fidelity wireframes. I couldn’t see why this plugin exists until hearing about other people’s struggles with providing feedback on a “perfect” prototype made with a design system.
Backstage
10 physical objects
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!
Cloud 100 CEOs on Leading in a Downturn
“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.”