Creator Micro. Glowing card. Font Awesome Icons.
Sponsor
Variables in Figma now sync automatically in Webflow
Designed to be used alongside our Figma to Webflow Plugin, this App allows you to easily import your variables and their associated values, directly into Webflow. The changes you make in Figma to variables will be reflected in your Webflow build (in beta) — just like magic. Nothing will be imported without your explicit consent, you have full control.
What’s New
Figma Creator Micro
On Tuesday, Work Louder opened preorders for the Figma edition of their Creator Micro keyboard that ships in Q2 2024. I never got into mechanical keyboards, but their other products look incredible and might be a tipping point for me — preordered the Figma mini-keyboard right away. See a sneak peek by Nolan Perkins, the unboxing stream from Miggi, and a behind-the-scenes thread from Robert Bye. The Verge and Fast Company have also covered it.
FigBrew
A new podcast by Figma?! “The biggest topics in the design and digital product industry, discussed with a bit of humor.” In the first 3 episodes Andrew Hogan, Head of Insights at Figma, interviews an Industry Analyst Rob Koplowitz, a lecturer at Bentley University Janelle Estes, and a design lead Dan Makoski.
Using Figma
Building Components For Consumption, Not Complexity (Part 1)
A new long-read from Luis Ouriach published in the Smashing Magazine: “Design systems can be of immense help, but failure to adopt them invalidates the hard work that goes into building the thing in the first place! In this two-part series of articles, Luis shares his experience with design systems and how you can overcome the potential pitfalls, starting from how to make designers on your team adopt the complex and well-built system that you created to what are the best naming conventions and how to handle the auto-layout of components, indexing/search, and more.”
Interactive glowing card
Double Glitch is building on the powerful cursor-tracking technique I shared in the previous issue with a new tutorial for creating an interactive glowing card using a resource file he published in the community.
10 icons in 2 minutes challenge
Vijay challenged himself to create a small set of icons in 2 minutes — that’s just 12 seconds per icon! My takeaway is the importance of a good starting grid template (like this one from Font Awesome) that saves a ton of time and helps with consistency.
Dragging a field value
Never noticed that smart UI trick — excellent find from Anthony Hobday.
Plugins
Font Awesome Icons
The official Font Awesome Icons plugin is here! The free part of the collection was always available as a font in Figma, and they shared a popular icon component in the community, but the plugin provides full access to the Font Awesome account, search, and tens of thousands of icons in SVG format.
Roast
Roast for Figma is out and it lets you identify design issues and fix them instantly with the ultimate design lint plugin. Great for cleaning up an old or imported file, remixing a community resource, or updating all tokens to a current library in one click.
Code Snippet Editor
A new code plugin from Jake, Figma Developer Advocate: “This plugin allows you to write and generate code snippets for Figma nodes, which are rendered in the Inspect Panel in Dev Mode. You can make these code snippets dynamic, by referring to parameters provided by the plugin. Doing this for your component library will bring accurate code snippets to any project that incorporates your design system.”
Resources
Web Accessibility Annotation Kit
CVS Health Inclusive Design team: “Accessibility annotations help capture design intent that cannot be conveyed through visual design alone. This can help prevent many accessibility issues earlier and create more usable digital experiences. After 2 years of testing with over 65 design teams at CVS Health, we’re releasing our Web Accessibility Annotation Kit to the public.”
Backstage
13-Year Journey to Create the World's Best Product
In this interview, Figma CPO Yuhki Yamashita reflects on his journey as a PM and what he has learned trying to build products that people love.