How hard could it be?
I realized after hundreds of components into the design system that it wasn't structured for scale. I built myself into an unscalable file structure that couldn't be maintained with a reasonable amount of effort.
When starting the design system I failed to realize how large it can get. How many connections and nested instances the components would have. And how much effort it would take to maintain the way I was building my components.
This made me think – how can I do this again and never have to worry again?
Structuring Organization of Projects, Figma Files, and Libraries
Starting with a scalable file structure ensures as you add to your design system there is a place to put the designs. The exact file structure depends on your company, but here's what worked for me working at a software company in an Agile environment.
First Project: Design System
I follow the same conceptual practices as the Atomic Design methodology of nesting smaller components into larger ones. Atomic Design communicates this concept by assigning component categories of Atoms, Molecules, Organisms, Templates, and Pages. I think what's more important than using these names is understanding the concept and structure for your components so you organize appropriately when creating a design system.
The Figma files in this project contain the master components that are published to Figma Libraries for use throughout other files. For smaller Design Systems you might be able to fit all your components in one Figma File. From my experience, there can be hundreds of components to manage with a large enterprise-level product.
Figma workflow tip
Naming Components
Each Master Component usually has a variety of states – like hover, focus, and mouse down – so for every component there are several related Master Components. Naming these components with a common pattern is essential to finding those components when you or a teammate needs to find them.
A naming convention that has proven reliable is one bookended by the Component Name and State:
Component Name / Attribute 01 / Attribute 02 / Attribute XX / State
For example, a specific variation of a button component might be named
Button / Large / Primary / Hover
Figma recognizes slashes in the names of components and organizes them into continually expanding menus. This means you can follow the path of your naming convention until you reach the exact variation of the component you need. Not all components need the same number of tiers in naming because they have different attributes, but you always know the state will be the last choice.
Second Project: Customer and Internal Projects
This is where a Figma File for each customer goes. These files use the components from the Design System project but contain modifications specific to the customer or project. In other words, this is where the Design System components are actually used to build out screens and workflows.
Add a Project per Sprint
One of the potential pitfalls of working with developers in an agile design system that is constantly being updated is developers have a moving target. To prevent constantly changing design files that are actively in development it's important to have files for sprints with every component detached. This clears up what the developers need to work on while having visibility into what's in each release of the product.
For example, one Sprint might require updates to key parts of the design system with a couple of customer projects. Whatever is changing in the design system should be copy/pasted into a Figma File inside the Sprint Project. Follow that up with detaching all the components in those files and adding notes for handoff.
Figma workflow tip
Quickly detach all component instances in Figma
- Select all the top-level Frames you want to detach
- Use the shortcut Command + Option + B to detach any instances
- Hit Return to select layers 1 level deeper inside the top-level Frames
- Use the shortcut again to detach those layers, hit Return again, and repeat until all layers are detached
This workflow flows quickly with the use of shortcuts while being a sure-fire way to detach all instances.
Disciplined Maintenance
Taking the time to set all this up is only worth it if you maintain the organizational patterns. Keep up with the system so when new employees join you just have to teach them the system to do their job – also now no one has to be diligent in remembering where things are stored because you can hunt down exactly what you need using the patterns.
