Design systems allow teams to build a consistent user experience, deploy features more quickly, make rebranding changes more efficiently and free-up time to address challenging UX issues. Most design teams have a big part of their design system in Figma, whether it’s a UI library, general styles and guidelines or design tokens. Maintaining these parts of a design system up to date can be time-consuming and repetitive work that often keeps designers from doing what they do best: designing new experiences.
In this post, we’ve rounded up 8 of the best Figma plugins that can help designers build, grow and maintain their design systems. A lot of them automate the dull, manual work and some even help bridge gaps between teams, aligning code and design.
Design System Organizer
As its name suggests, this plugin helps keep your design system organized. The Design System Organizer manages multiple instances of Figma component libraries thanks to 3 key features:
- 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.
- Bulk swap instances and styles between masters with the same name. This helps organize and move your master styles and components to the right place.
- Manage pathnames with /’s like folders to reorganize and clean up huge libraries with multiple names.
Design tokens are the foundation of any design system and Figma Tokens 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. Figma Tokens 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 Figma Tokens with an external source of truth such as GitHub or GitLab.
What’s a design system without its documentation? When working with a given component, it’s important for designers to be able to refer to the documentation easily, and it can be frustrating to have to leave the working file and search for a component’s documentation elsewhere. Gist offers a solution by attaching the documentation directly to the component in Figma. There are 3 ways to attach/create documentation using Gist:
- Writing the documentation in the plugin using Markdown.
- Linking a component directly to existing documentation that’s either in iFrame, Notion, GitHub or JSONbin.
- Publishing documentation written in the plugin to JSONbin or GitHub.
Sometimes design system teams need to know how often they are using a specific component. Instance Finder does just that. This plugin finds all instances of a specific component in a Figma file. Simply select which component you want to look up and the plugin searches all pages and frames to create a list of the instances used. The list is even split into the different pages for easier navigation, and clicking on any one of these instances will zoom in on it so you can find it.
As a design project progresses, it’s very likely that you’ll have elements that you wished were components or would like to turn into components. However, this process is manual and time-consuming. 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.
If you need to have a full overview of all components and their instances at a glance, the Propstar plugin is a must. The folks over at Transferwise created the plugin, Propstar, which generates all possible instances for your components in a nice, tidy table. You can even reorder properties and values to change the order and view of your table. It offers a simple way to automate the set-up of your UI library overview.
Roller - Design Linter
Consistency is one of the main goals of any design system, but how do you maintain this consistency in your ever-growing number of Figma files? Roller is the first ever design linter, helping designers to automatically find and fix style inconsistencies in Figma files. Once styles are added to the Roller Library, the plugin automatically detects inconsistencies on the page that don’t match the library. Designers can then replace these inconsistencies with the correct style from their library. Whether it’s for colors, text, borders, shadows or radii, Roller helps to ensure consistency between Figma and your design system.
We’d like to throw our own hat in the ring! story.to.design can save designers hours of UI library maintenance. Our plugin automatically transforms coded Storybook components into a full Figma UI library in just a few clicks, and works with most frameworks and component libraries. It even orders all these components into labelled tables, accompanied by any documentation you have in Storybook. Import all coded components and their variants without having to create a single one by hand. The best part is, with every code change, story.to.design automatically keeps your Figma components in sync so that you’re designing with the latest, production-ready components, aligning development and design in a single click.
Which Figma plugins would you add to this list? Do you have a must-have plugin for managing your design system that we should know about? Let us know on Twitter @story.to.design!