Building a Design Systems Library with Figma & Scripter
Over the past few months, I’ve been helping Lyft build the initial version of our Figma design systems library, which contains all of the colors, text styles, and components used by designers across the company. As we worked on the project, we began to notice patterns of time-consuming tasks, some examples being:
- Generating helpful descriptions for our 500+ color styles.
- Optimizing each of the 900+ icons in our icon library.
- Finding and deleting private components that were no longer being used.
Eventually we became curious as to whether we could automate some of these processes. We discovered a Figma plugin called Scripter that allowed us to write quick-and-dirty scripts in TypeScript using the Figma Plugin API. It has significantly sped up our workflows ever since.
In this blog post, I want to share a few examples of how we’ve used Scripter to help build our design systems library in Figma and automate tasks that would have otherwise taken hours or even days to complete.
Generating descriptions for color styles
Figma allows users to add descriptions to their styles that show up as tooltips when designers hover over them in the style picker. One thing we wanted to do was update the description of each of our color styles to be the color’s RGB hex code, making it easily accessible for designers.
These descriptions are easy to add and edit in Figma: simply right click the style, select ‘Edit Style,’ and update the description. However, our design system consists of over 500 color styles, and updating each individually would have taken hours.
One of the first scripts we wrote was designed to automatically generate these tooltips. For each color style, the script analyzed the style’s color, generated its corresponding RGB hex color code, and set it as the style’s description.
Flattening icons
Like many design tools, Figma allows one to optimize icons by ‘flattening’ them into a single layer. We’ve found it to be good practice to flatten icons before publishing them for a few reasons:
- Flattened icons result in less noise in the layers panel.
- Icons that contain less layers are more efficient to render in Figma, especially in mocks that are heavily dependent on our icon library.
- Flattening icons after they have been published breaks overrides that designers have applied.
That said, our icon library currently consists of over 900 icons, so flattening each one independently through the Figma UI was unrealistic. Fortunately, the Figma Plugin API provides the figma.flatten() function that can help automate the process!
Note that this script makes a few important assumptions to be aware of. Specifically, it assumes that (1) every component in the file is an icon, (2) each icon contains a single color, and (3) the icons don’t use masks. The figma.flatten() function may not work as one expects if one of these conditions aren’t met.
Deleting unused private components
Most of the components in our design systems library are created using atomic building block components. For example, each of our button components share the same internal background component, which is private to the file and makes our buttons easier to update and maintain. When Auto Layout was released, we rebuilt several of our components from scratch and many of these building block components became outdated and were no longer necessary.
Unfortunately, Figma doesn’t provide a built-in mechanism for searching for local instances of a given master component, which made it difficult for us to confirm whether or not some of these components were still being used in the file. To solve this problem, we wrote a script! It allows us to select a component to delete and takes care of removing the component if it’s private and unused in the file.
Other scripts we’ve written
These are just a few of many scripts we’ve written to build our Figma design systems library. Here are some other examples:
- Generating color styles. We wrote a script that parses a JSON file containing all of the colors in our color spectrum and created a corresponding Figma color style for each using
figma.createPaintStyle(). This saved us hours of work that would have otherwise been spent manually creating hundreds of color styles through the Figma UI. - Searching for layers that aren’t using our color styles. We want all of our components to make use of our color spectrum styles rather than hardcoded hex colors. To verify that this is the case, we wrote a script that searches files for color usages that are not linked to a Figma color style. We determine if a layer has a fill color by analyzing its
fillsproperty, then verifying the fill color is linked to a Figma color style by checking that the layer’sfillStyleIdproperty is non-empty. Check out this script for an example. - Building custom selections. Figma provides numerous tools for selecting multiple layers at once. However, sometimes we want to create a selection satisfying our own custom set of criteria (e.g. selecting all instances of the currently selected master component). Fortunately, building selections is relatively easy to automate in a script. We do this by traversing the current page’s layer hierarchy, creating a list of layers you want to select, and assigning that list to the
figma.currentPage.selectionproperty. - Cleaning up layer names. Every once in a while we run a script that cleans up our layer names by removing trailing whitespace, fixing capitalization mistakes, adding missing spaces before and after ‘/’ characters, etc. This has significantly reduced the number of accidental typos we’ve made, and has ensured that naming remains consistent across our libraries.
Final thoughts
Writing scripts has been essential for accelerating up the development of our Figma design systems library, and has also made working on the project a lot more fun! We’d love to hear ideas and stories about how others automate their workflows in the comments below! And if you’d like to work with me, or any of our amazing designers and engineers here at Lyft — we’re hiring!
