Organizing variables. Shadcn/UI kits. Figma to Code.
FRIENDLY PROMO
Design System Bootcamp
My friend Molly Hellmuth opened registration to the next two cohorts of her popular design systems course. As a creator of the UI Prep and a prolific educator, she barely needs an introduction.
Over 5 weeks, Molly will guide students through every step of building a design system in Figma. By the end, you’ll have a finished system for your current company, portfolio, or future projects. I’m always jealous of attending the Q&As she hosts for every cohort with two special guests like Brad Frost, Dan Mall, Luis, and Miggi.
Figmalion readers get $100 off by using the coupon code FIGMALION100. (Tip: check with your employer to see if you have any remaining educational budget for this year.)
App Updates
Manage unassigned drafts
“Figma is making it easier for admins to find and manage draft folders of members and guests who have been removed from their organization, now known as ”unassigned drafts.” Organization admins on Organization and Enterprise plans can now access unassigned drafts directly from the admin console. Starting today, Pro team admins can also manage them from a new tab in the Pro team admin console.”
Using Figma
How I Organize Variables in Figma
Joey Banks with a deep dive on applying and organizing variables in Figma: “…if there’s one thing I’ve learned about variables, it’s that nearly every team takes a slightly different approach when it comes to creating and keeping them organized in Figma. I’d love to recap the many ways I use variables within the components and libraries I make, as well as some of the techniques and decision frameworks that have helped me most, and share with you how I approach creating and keeping them all organized, too.”
Figma’s Simple Design System
At a recent meetup, Developer Advocate Jake Albaugh shared the story of Figma’s SDS, a UI kit with a realistic code backing to help bridge the gap between design and development. As a reminder, the Simple Design System is available in the Libraries selector, Figma community, and GitHub.
Advanced Prototyping Techniques
In this workshop, Miggi explores approaches to Advanced prototyping in Figma: “We‘ll walk through examples using variables and component sets to create dynamic prototypes that are easy to manage and iterate upon. This is an intermediate level workshop and builds on a basic understanding of prototyping in Figma Design.”
Prototyping an animated card
Kudos to Oğuz for his patience while creating such a sleek and advanced animation with just a Figma prototype. That’s a lot of frames to connect.
Figma AI Full Overview
A good demo of all Figma AI features by Tair from a few months ago.
Resources
Open-source shadcn/ui kit for Figma
After the Figma library recommended by shadcn wasn’t updated in 2 years, I love all the new resources popping up! Yauheni created a free and open-source Figma library for the shadcn/ui component and documented his process on X.
Shadcn Figma kit (WIP)
Luis has been working on his version of the kit for over a month, and now it’s finally available in the Figma community. Even includes a new Sidebar component that was released last Friday!
Cool Loaders
Impressive lightsaber loader effect by Vijay.
Plugins
Figma to Code
I came across this wildly popular plugin as I dabbled into Tailwind CSS this week. Seeing a free (supported by Creator Fund) open-source plugin for generating code in a few common formats (HTML, JSX, Tailwind, Flutter, and SwiftUI) is refreshing.
Backstage
Setting the tone for Config 2024
Claire Butler, a marketing lead at Figma, shares three principles that help market to designers or other groups of passionate experts. Make sure to watch the video she is referring to.
I furiously nodded while reading her second lesson: “If you can come up with and understand all of the content, you haven’t gone deep enough. Whatever you are doing will come across too generic, and thus will not resonate. They’ll sniff you out.”