Yann-Edern Gillet from Linear shows how he organizes Figma files into a matrix consisting of Components, Inspirations, Playground, and Ready for Dev areas. Raphael Schaad originally recommended this approach in his Config talk From paper to pixels.
Jay from Sneak Peek asked Tim Van Damme (UI3), Tammy Taabassum (AI), and Kelly Li from Figma to share their working projects and walk him through their file organization. Tim had one of the most humble takes on the design collaboration and process.
In the past, the file browser and the community files required different thumbnail aspect ratios. Now, it’s standardized at 16:9 across Figma files, FigJam, and Figma Slides.
“We’ve improved the experience for moving files. Now you can bulk move a group of files and find the right destination more easily.”
Users in Enterprise organizations with workspaces set up can now publish libraries to a workspace in addition to a team or the whole org.
Great advice from Jayneil Dalal and Cecilia Uhr that I follow religiously: “A mistake junior designers make is they delete or overwrite their design iterations in Figma. You shouldn’t do this because you never know when you might need to use that deleted design iteration or explain to your team why that iteration didn’t work.”
Draftocalypse seems to be over, but it’s still worth sharing this video that Tom Lowry, Director of Advocacy at Figma, put together to walk you through what’s changing and answer a few common questions.
What a fun project! A new interview series looking inside Figma files of the top designers. The first season includes six interviews with folks from Perplexity AI, LottieFiles, Bezi, and other companies. There is much value in just sharing the screen and walking through your actual work files instead of creating an idealized version of the design process.
The move of drafts to teams caused a big enough uproar in the Figma community to warrant an explanation from Dylan Field, the CEO of Figma. Dann Petty made one of the strongest arguments against this change.
The strong feelings made me wonder about the differences in how we use Figma, and it probably comes down to handling multiple accounts and teams. I usually have two Figma accounts — one for personal projects and another tied to my work email address. Each account has its own drafts, so my personal drafts are never mixed with work. If you’re a freelancer and a part of multiple teams with a single email address, all your drafts are mixed, and separating them can feel like an invasion into your personal space. I don’t share the strong feelings on this change, but can see where Dann and others are coming from. (Pro tip: I use a separate Figma Beta app for the personal account, so I never have to switch accounts in the app.)
That’s not all! Now, you can also select multiple pages by holding Shift to rename, delete, or move them in bulk.
I fully expected all big product announcements to be saved for Config, but we have an unexpected treat! Jokes aside, this is a very elegant solution based on how people already organize their files. Reminds me of how Twitter came up with retweets and the book The Best Interface is No Interface.
“When you name a page in Figma using only hyphens, en/em dashes, asterisks or spaces, that page will now automatically convert into a page divider.”
Luis shared a set of recommendations on how to approach naming conventions for components, props, and values within Figma component libraries.
Org and Workspace admins on the Enterprise plan can now mark libraries as approved for the organization or workspaces they manage. “Approved libraries are badged with a checkmark and pinned to the top wherever they appear — be it in the assets panel, the properties panel, the admin console, etc. Approved libraries help users know which libraries are sanctioned by their admins and help them find them more easily.”
Paavan gives a few tips on organizing your Figma files if you include them as a part of your job application or portfolio review.
It’s time to re-share this plugin to help designers fulfill a New Year’s resolution of naming their layers! It uses AI to rename layers and is free and open-source.
Molly Hellmuth suggests building small design habits in a new year that will make future you grateful — sticking to one naming format, avoiding groups, adding thumbnails to files, naming all your layers (good luck!), and unifying the name of your icon shapes.
5 mini resolutions for your Figma Files
— Molly Hellmuth (@molly_hellmuth) January 2, 2024
Start building small design habits now that will make future you grateful. Like better naming and organizational practices.. pic.twitter.com/yM3rao96ja
Molly Hellmuth recommends dividing design system assets into four files for increased flexibility and improved performance. These include Foundations, Icons, Components, and a separate design file with “local” assets.
Most Figma Design Systems should start with ~4 files
— Molly Hellmuth (@molly_hellmuth) December 19, 2023
Let me share why.. pic.twitter.com/3t8p5qewd0
A prototype of what page dividers in Figma might look like — considering this tweet’s engagement, it’s clearly something many of us would love to see!
Page dividers in Figma is a feature I’m badly missing.
— Natko Hasic (@natkohasic) November 22, 2023
Seeing how many projects in the community use the “hack” on the left makes me think I’m not the only one.
And yes, this is a Figma prototype of... Figma. pic.twitter.com/jmCkDFBAJe
Lee Munroe shares some ideas on using file templates to organize pages for projects in Figma.
Not everyone on your team knows how to navigate Figma the way you do.
— Lee Munroe (@leemunroe) November 1, 2023
Other designers have different methods. Engineers and PMs may not know where to start.
This is how we organize our project files and pages in @figma... pic.twitter.com/D0jpp0kEJ5
This plugin helps organize your files with pages, sections, and separators.