Creating atomic components for an atomic design system in Figma | Figma Blog

littleBits built an atomic design system in Figma to support four mobile and tablet apps across iOS and Android within a six-month roadmap. Drawing on Atomic Design and Bootstrap, the team organized reusable styles and components while adapting the structure to their actual workflow. They concluded that a simplified system aligned with React Native components was more practical than rigidly preserving separate “molecule” and “organism” categories.

Atoms: Styles, colors, and icons

• Text styles and colors were defined with Figma Styles.
• A customized icon set based on Modern Pictograms was imported and converted into components.
• Colors used semantic names inspired by Bootstrap, including categories for:
  • UI states
  • Grayscale values
  • Brand colors
  • Backgrounds
  • Overlays
  • Outlines
• Semantic naming made future theme changes safer. For example, bg-light could consistently represent backgrounds while ui-dark represented foreground elements.

Simplifying molecules and organisms

• The team found that complex molecules and organisms were rarely reused across multiple templates.
• Instead, both categories were grouped under the simpler name “Components.”
• This structure mapped more naturally to the React Native components being developed in parallel.
• Components included cards, tooltips, and foundational controls such as buttons.

Combining styles without unnecessary components

• Figma Styles enabled designers to combine text styles and color swatches directly.
• Rather than creating separate components for every color-and-text combination, the team documented combinations in a style guide and applied styles as needed.
• Mixing text styles within a single text box also supported copy with variable lengths.
• This approach reduced document complexity and improved usability and performance.

Reusable button components

• Buttons were treated differently because they appeared frequently and included styling details such as outlines that were harder to manage centrally in Figma.
• The team created nested components for:
  • Primary buttons
  • Secondary buttons
  • Tertiary buttons
  • Other frequently repeated custom buttons
• These reusable button components provided a consistent foundation for the broader design system.

The resulting system balanced atomic design principles with the team’s real reuse patterns, creating a practical Figma library that supported both design work and React Native implementation. The next step was applying these components to responsive layout templates.