Creating atomic components for an atomic design system in Figma | Figma Blog (opens in new tab)
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.