Week 18 - Design System Edition
Five Figma plugins for creating and managing a design system.
Design systems allow us to build a consistent user experience, deploy features more quickly and free-up time to address challenging UX issues. Many design teams have at least part of their design system in Figma, whether it’s a UI library, general style guidelines or design tokens…
So in this issue, we’ve rounded up some of the best Figma plugins to help build, grow and maintain a design system. Some automate the dull, manual work and others even help bridge gaps to align code and design.
Let’s go! 🚀
1. Design System Organizer
Keep your libraries organized.
The Design System Organizer manages multiple instances of Figma component libraries thanks to three key features:
1. Copy styles from one file to another or combine multiple style files into a single one. This keeps your design system styles consistent over time.
2. Bulk-swap instances and styles between masters with the same name; to organize and move your master styles and components to the right place.
3. Manage pathnames like folders to reorganize and clean up huge libraries with multiple names.
🎁 FREE 15-day trial, 💰 paid plans from $24 (one-time payment)
🗂️ Get master styles and components in the right file
📚 Organize your UI libraries
2. EightShapes Specs
Automate your design specs.
If you’re creating design system documentation in Figma, you’ll most likely need to annotate your components and layouts with their design specifications. Eight Shapes Specs is a simple tool that automatically adds measurement, spacing and anatomy annotations to your designs. For anyone referring to your design system in Figma, having these annotations will be helpful both for design-dev handoff, and for understanding how a given component has been designed.
🎁 FREE for limited features, 💰 all features $8/month per user
📏 Automatic design specs
📝 Great for design system documentation
3. Master
Dominate your components.
As a design project progresses, it can happen that you end up with elements that you wished were components or would like to turn into components. But achieving this involved a manual and time-consuming process. Master is a Figma plugin that does it all for you. It can create, attach, clone and move components in a few clicks and without losing overrides. It’s useful when you want to turn a repeated element into a Figma component and link all equal elements to this master component.
🎁 FREE up to 5x per file, 💰 unlimited use from $37.50 (one-time payment)
❖ Master your components
♻️ Great for cleaning up designs and turning everything into instances
4. story.to.design
Bring your components from Storybook to Figma.
story.to.design can save you hours of UI library maintenance. This plugin brings all your coded Storybook components into Figma, setting up a full UI library for you in no time. It works with most frameworks and component libraries and even orders all your components into labelled tables, accompanied by any documentation you have in Storybook.
Import all coded components and their variants into Figma, without having to create a single one by hand. The best part: with every code change, story.to.design automatically syncs your Figma components so that you’re designing with the latest, production-ready components, keeping development and design aligned.
🎁 15 FREE components 💰 unlimited from $149/month per team
✅ Keep components in sync with code
⚡️ Set up a UI library with all variants in minutes
5. Tokens Studio for Figma
THE plugin for managing design tokens.
Design tokens are the foundation of any design system and Tokens Studio for Figma is the plugin for managing your design tokens in Figma. It allows you to use design tokens such as border radii, spacer units, color and typography styles and apply them to a range of design options. Tokens Studio also allows you to change tokens and see these changes applied to either the entire Figma file or just a selection. There are two ways to generate design tokens: either with the plugin’s UI or using your own JSON file. You can even sync your tokens in Tokens Studio with an external source of truth such as GitHub or GitLab.
🎁 FREE for limited features, 💰 all features from $8/month per user
🎨 Use and manage design tokens in Figma
✅ Keep design tokens synced between Figma and code
Newsletter brought to you by ‹div›RIOTS.