Creating atomic components in Figma
This post is part of a series: Building a design system with Figma at littleBits. Read the next post on building responsive layouts here.
This year the software team at littleBits faced a challenge: we wanted to update our littleBits branded app for the launch of three new kits, and we were also excited to create a Marvel themed app to launch with our new Avengers Hero Inventor Kit.
All in all we were looking at releasing four new apps (two apps, deployed for both iOS and Android, targeting both mobile & tablet layouts!), and we had uh — around 6 months of clear roadmap with a small team.
As we were considering how we would approach building our design system, we looked to existing methodology — primarily Atomic Design by Brad Frost. We also looked at popular front end frameworks like Bootstrap. This post is a look at how we built an atomic design system in Figma.
Atoms
On the Atomic level, text styles and colors were defined using Figma Styles.
A set of icons (customized from Modern Pictograms) was imported and converted to components.
We drew some of the swatch names from Bootstrap. Knowing that colors would be changed in themes, we wanted to use semantic naming for key UI states, and Bootstrap’s were a familiar base.
We extended Bootstrap’s UI and Grayscale categories of swatch with more detailed brand swatch sets, and specific swatches for backgrounds, overlays, and outlines.
Molecules & organisms
As we developed our templates it became clear that it was not that common for us to have complex ‘molecules’ or ‘organisms’ that were re-used between multiple templates.
So we named everything from those categories as ‘Components.’ This was a simpler structure that also mapped well to what eventually became our React Native components.
Components included basic things like cards and tooltips, as well as foundational things like buttons.
The release of Figma Styles mid way through our process allowed us to drastically simplify the layer structure of our components — this helped a lot with general usability and document performance.
Because it was so simple to mix and match text styles with swatches, we didn’t create extra components for combos of color and styles — we made a style guide for reference, and applied text styles and swatches in templates as needed.
Semantic names for swatches also helps keep patterns and usage clear — for example in a light theme, the “bg — light” swatch is used for background colors, and “ui — dark” is the default for foreground elements. When swatches are used in this way, it’s easier to edit colors design wide in future, and be confident it wont break things.
Being able to mix and match text styles within a single text box gave us flexibility working with text where copy length was variable.
For our main button styles though, we did create nested components.
Some of our button styles had outlines (which still aren’t as easy to centrally manage in Figma), and buttons are of course repeated a lot across the design.
We created Primary, Secondary, and Tertiary styled versions of of our button component, and also called out some other custom buttons that would be repeated a lot in our designs.
And just like that.. We had a great base for a system that mapped well to components that would be defined in our React Native app.
Next step was to build a system of responsive layout templates.
This post is part of a series Building a Design System with Figma at littleBits. Read the next post Building Responsive Layout Templates in Figma.
