How to build your design system in Figma | Figma Blog (opens in new tab)

Figma’s 2017 post argues that design systems can begin with simple, practical building blocks and grow into sophisticated libraries of reusable components. Rather than prescribing one method, it showcases how teams use Figma’s constraints, components, and Team Library to support different organizational needs. The examples suggest that design systems improve consistency while also strengthening collaboration among designers, engineers, product managers, and non-designers.

Starting with Simple Building Blocks: Gusto

• Gusto’s experience addresses the common challenge of deciding where to begin.
• The team used basic, reusable elements as the foundation for its component library.
• The approach demonstrates that a design system does not need to be comprehensive at launch; it can develop incrementally.

Creating Marketing and Communications Assets: Square

• Square’s marketing team built an internal system for communications design.
• The system included reusable assets such as:
  • Color palettes
  • Logo sets
  • Other brand and communication resources
• Figma helped the team organize and share these assets across its internal workflows.

Empowering Non-Designers: Virta Health

• Virta Health documented the process from auditing existing components to producing final mockups.
• Designers used reusable components that allowed non-designers to assemble designs through drag-and-drop workflows.
• The design system improved communication between designers, engineers, and product managers by giving teams a shared visual language for discussing ideas.

Using Nested Components: OpenText

• OpenText explored nested components to create more flexible and powerful UI patterns.
• Components could be combined into more complex structures, including controls with multiple button states.
• This approach supports scalable systems in which changes to foundational components can flow through larger interface patterns.

Applying Atomic Design Principles: SetProduct.com

• SetProduct.com used atomic design as the organizing framework for its system.
• The hierarchy progresses from small elements to complete interfaces:
  • Words and icons
  • Buttons and other phrases
  • Cards and other sentences
  • Full screens or chapters
• Figma components support both local editing and broader, reusable design-system updates.

Figma’s examples show that teams should begin with the problems and workflows specific to their organization, then gradually build a reusable system around them. Features such as constraints, nested components, and Team Library can support systems ranging from simple asset collections to highly structured component architectures.