Redesigned comments. Design tools performance. Staying organized.
Hello! 👋 If you’re in the US, I hope you had a wonderful Thanksgiving. This week, I’m thankful for the comments redesign that makes it much easier to work with feedback. Great update!
Marc Edwards, the creator of iStat Menus and a few other Mac apps, wrote a blog post comparing hardware utilization by Figma, Sketch, Adobe XD, and Affinity Designer. As expected, Figma’s web app can’t load CPU as heavily as native apps, but it uses GPU a lot for some operations. Helpful to know if you’re looking to get a new Mac.
Josh Cusick from the Design Systems team at Microsoft wrote how they build and maintain an internal Figma UI kit. Lots of good tips on organizing files and preparing for developer handoff. See also an in-depth guide on using design tokens and tips for file organization from Ridd.
— Eugene
Sponsor
Webflow Inspo
It’s like if your favorite uncle was a Figma pro and knew his way around Webflow, and also happened to have an email newsletter.
App Updates
Changes to comments in Figma and FigJam
Fantastic redesign of comments — now the pins are visible by default and form clusters when you zoom out. They’ve also added search, sorting, reactions, and selecting an area to comment on. Show or hide pins with Shift-C.
Stay in the flow with redesigned comments
Ryhan Hassan, Product Designer at Figma, on comments redesign: ​“To help teams manage and incorporate feedback throughout the design process, we’re introducing updates to comments in Figma and FigJam. These changes are designed to encourage collaborators to share comments and understand how to give better feedback, while helping designers more easily act on the input they receive.” Also, see his Twitter thread on design details and Christa Simon’s thread on design research.
New comments walkthrough
Tom Lowry gives a walkthrough of some of the new commenting improvements and enhancements.
What’s New
Friends of Figma Discord
Friends of Figma community is moving from Slack to Discord. If you haven’t joined before, now is the time!
Design tool performance signatures
The developer of the popular Mac app iStat Menus tested how various design tools utilize the hardware they’re running on. For Figma, GPU seems to be more important than CPU, while memory is not a big factor as usage is limited to 2GB per tab. Good to know if you’re getting a new Mac but not sure about the config.
Using Figma
Keeping Things Organized
Josh Cusick shares how the Design Systems team at Microsoft built, maintained, and set up for people to contribute the Figma UI kit for Teams Component Libraries (TCL). He covers structuring pages, naming things, aligning with code, design tokens, and version control.
Creating design systems with Figma Tokens
A guide on how to build design systems that scale easily and sync with GitHub, with the help of a plugin called Figma Tokens.
10 icon packs from the Figma community to have in your toolkit
Good list of ten very different free icon packs.
5 tips for designing a responsive dashboard in Figma
Molly shares a few takeaways from recreating a responsive Asana dashboard in Figma.
7 goals for file organization
Ridd shares his approach to organizing files in Figma.
Adding emoji to component & layer names
Joey Banks with a tip on indicating component or layer status through naming.
<AutoLayout />
While this approach feels backwards, I think it’s an interesting idea to explore for the developer handoff. Auto Layout is quite close to Flexbox, so creating a universal utility wrapper shouldn’t be hard.
How the Figma engineering team uses FigJam
“Get an inside look into how engineers across Figma use FigJam to stay aligned, share feedback, and communicate complex problems. We’ll showcase how we’ve integrated FigJam into our engineering process and arm you with templates to use with your team.”
Office Hours: A deeper dive into Widgets in FigJam
“We’re bringing our open platform to FigJam so developers can build plugins and widgets to automate workflows and engage the entire team. Widgets are interactive, native-like objects — like polls, games, and notepads — that the entire team can use together. Hear from Figmates and developers from the Community to see how you can build your own!”
Made in Figma
Jinx
Beautiful artwork and animation. See also a video walkthrough of the process.
Camera Click Interaction
“This is an interaction of a digital camera demonstrating the zoom in, zoom out, and shutter action when a photograph is clicked.”
But Figma isn’t good for graphic des…
Rogie shared a few beautiful designs by Fons Mans.
Resources
Figma Plugin Monetization Template
“Complete annotated TypeScript source code for a Figma plugin built using the Create Figma Plugin toolkit and monetized via Gumroad license keys.” Fantastic starter kit if you want to monetize a plugin.
IKEA Storage & Organization Planner
Katie Langerman made a Figma component library of IKEA (US) organizers, boxes, baskets, jars, etc. Useful if you use Figma for home planning and organization.
Plugins
Play prototypes while editing
Rogie made a new plugin for playing a prototype while editing it. Because the plugin accesses the file id, it has to be installed locally. (I usually just open a prototype in a new app window while working on it.)
Color Fixer
“Associates colors to styles if it finds matching or very similar ones.”
Ghost
A lightweight plugin that converts high-fidelity mockups to loading or ​“skeleton” screens.
Backstage
Dylan Field, Figma Co-founder, Talks Design, Digital Economy, and Remote Culture with Host Connie Yang
The latest episode of the Distributed podcast pairs Dylan, Figma’s CEO and Co-founder, and guest host Connie Yang, Head of Payments Design at Stripe, with past design leadership posts at Coinbase and Facebook.