βOne significant aspect that design systems solve is serving as a single source of truth across products so that we can save ourselves from this mess at handoff. But what is this single source of truth and how do the teams working on it build and manage it?β
Joey Banks with a tip on indicating component or layer status through naming.
If you're creating components in Figma for others to use, adding emoji to component & layer names can really make a big difference!
— Joey Banks (@joeyabanks) November 18, 2021
βοΈ = edit expected (helpful for labels)
π = can instance swap (helpful for icons)
π« = component no longer supported
β¨ = interactive component
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.
Ridd shares his approach to organizing files in Figma.
I'm constantly asked...
— Ridd π (@Ridderingand) November 26, 2021
"How do I organize my files?"
So here are my 7 goals for file organization in @figmadesign π pic.twitter.com/NFuhHP3euu
βLearn how to use branching for exploring and testing alternate designs, and for sharing work with development partners.β
Luis Camino, a UI/UX designer at BMW and MINI, shares a few best practices for Library editors.
The team at Onfido Tech moved to Figma from Sketch and Abstract, and they organized projects and files to work around the lack of branches back then. Their structure may be a good fit for a larger organization.
Anton Lovchikov shares his approach to structuring pages in the Figma file.
It's very difficult keeping a Figma file in order without a system while working in iterations. Here is my system which works pretty well so far.
— Anton Lovchikov (@antiflasher) October 13, 2021
I use functional structuring for pages in the file. Each isolated functionality has its own page with all related mockups. pic.twitter.com/tcTS2I0Eu1
Luis talks to Santosh Komaragiri from Dataguard, who showed how they manage their Figma workspace. Their team has built some incredibly detailed product, marketing, and brand design systems which shows how you can take Figma to new levels of usage.
Komal Javed from Shopify shows how to set up your Figma projects to meet the needs of your whole team. Project Index Template is available in Figma Community.
A Figma version of a popular Sketch Manager plugin for tidying and organizing files.
Here's how I organize my design file after it reaches a certain stage. This has worked for me over the years. Hope this helps others too. π
— β (@hckmstrrahul) August 17, 2020
Firstly, I add a mini design doc/summary of all important things for someone viewing the file.
And a simple thumbnail π
(1/8) https://t.co/FEMQ7ruNKu pic.twitter.com/joc5A5epYz
Tobias Negele, a Staff Product Designer at Shopify, shares their approach and template for organizing files and creating a predictable structure that engineers and other colleagues can easily understand and navigate.