Table of contents
Background effect for Discord ad

Join our Discord server!

Leverage Once UI's full potential and discuss design system topics in our growing community

Once UI for Figma - Join our Discord community Join now!
chevron_left Back

Crafting the ultimate design system in Figma

Author avatar
Lorant Toth | Design & Development
8 months ago


In today's competitive business landscape, productivity is more important than ever for companies seeking to thrive and grow. Design systems play a crucial role in improving a design team's productivity, enhancing the developer experience, and ultimately, elevating product quality.

The perception of achieving a high-quality standard is often misunderstood; it's not about investing additional effort or labor. Instead, it's about establishing clear guidelines and implementing a solid system that aligns with your objectives.

Without a design system or with one that's not suited for your product, your business may struggle to scale effectively in the long run. To address this challenge, a scalable design system serves as a single source of truth for designers, developers, and stakeholders alike. It promotes consistency, efficiency, and scalability across projects and teams, helping businesses adapt and evolve with changing needs.

In this article, we'll explore the key aspects of building a scalable design system in Figma, focusing on planning, structure, components, collaboration, and maintenance.

Defining the goals and purpose

Before diving into creating your design system, it's essential to establish its goals and purpose. Consider the following questions:

  1. What are the main objectives of the design system?
    e.g., consistency, faster design-to-development handoff, improved collaboration
  2. Who are the primary users of the design system?
    e.g., designers, developers, content managers

Having a clear vision of your design system's purpose will guide your decisions throughout its creation and maintenance.

Identifying the key elements

A comprehensive design system typically consists of several key elements, including:

  1. Styles
    The foundational visual aspects of your design system ensure consistency across all design elements, including but not limited to: colors, typography, spacing, borders, elevation, and scaling.
    Image caption of Once UI's style system

    Once UI's style system

    Take a look at Once UI's scalable, yet simple and flexible style system

  2. Components
    The reusable building blocks of your product's interface, streamlining the design process and promoting a cohesive user experience. These modular elements, such as buttons, form fields, and navigation menus, come in various states and variants to accommodate diverse use cases, while maintaining a unified design language across the entire product.
    Image caption of Once UI's component system

    Once UI's component system

    Take a look at Once UI's fluid and modular component system

  3. Documentation
    By establishing a library of well-documented tokens and styles, components and proven design patterns, your team can ensure a consistent and efficient implementation of user flows and interactions across your product.
    Image caption of Once UI's documentation

    Once UI's documentation

    Take a look at Once UI's comprehensive Figma documentation


Organizing your design system

An organized design system is crucial for easy navigation, efficient collaboration, and scalability. It's important to acknowledge that different organizations have varying needs when it comes to design systems:

  • emoji_objects Freelancers or agencies
    As they often work with multiple clients, requiring them to manage several design systems with unique customizations tailored to each client's brand and requirements.
  • corporate_fare Startups or organizations
    They, on the other hand, typically need a single, more robust design system that can grow and adapt as their product evolves and their team expands.

By establishing a well-organized design system from the start, you'll set a solid foundation for scalability and easy maintenance down the line. Follow these guidelines:

  • inventory_2 Project structure

    Taking into account the aspects discussed earlier, set up your design file or design files accordingly. Ensure that projects are maintained in separate files and have the necessary library or multiple libraries enabled.

  • folder File structure

    For startups or organizations focused on a single product, consider setting up a unified design system file.

    For organizations or agencies working with multiple products, you might create a core design system containing all essential elements and optional extensions as libraries tailored for product-specific elements. Think about separating styles into an independent library, allowing the marketing team to import them without having to include an extensive set of components.

    Keep in mind that there are various ways to structure your design system, and it's vital to consider your unique needs when planning its organization. As your system or product evolves, you may need to adapt your design system structure accordingly.

  • layers Page structure

    Consider using separate pages for each key element (e.g., Colors, Typography, Components) in your design system file. Within each page, use frames to group related items, such as different component types or color categories.

    Incorporate utility elements like annotations and notes to facilitate navigation and provide additional context.

    Strive for balance in your design system by avoiding an excessive number of pages or too many elements on a single page, as it can make the system difficult to manage and understand.

    Image caption of Read the recommendations by Figma

    Read the recommendations by Figma


Defining design tokens

Design tokens are the smallest, most basic building blocks of your design system, representing the essential visual aspects like colors, typography, and spacing. They provide a way to store, organize, and maintain these values in a platform-agnostic manner, ensuring consistency across different platforms and devices.

By using design tokens, you can easily make global changes to your design system, as modifying a single token value will automatically update all the associated elements.

Figma provides several built-in tools to create and manage design tokens, including:

  • style Shared styles

    Define your color, typography, and effect styles to create a consistent visual language for your design system, allowing you to apply and maintain uniform colors, fonts, and effects across your design elements.

    Image caption of Learn about styles in Figma

    Learn about styles in Figma

  • flex_direction Auto layout

    Figma's Auto Layout feature allows you to create pixel-perfect designs using the same values as your spacing tokens, ensuring consistent whitespaces throughout your interfaces.

    Image caption of Learn about auto layout in Figma

    Learn about auto layout in Figma


Manage your design tokens effectively:

  • Establish clear naming conventions for your tokens.

  • Organize your tokens in a dedicated location within your design system file or as a separate library.

  • Document the usage of each token, including any constraints or best practices.

Creating components

Components and variants are the reusable building blocks of your design system, enabling you to streamline your design process and ensure consistency across your product. Figma offers powerful features for creating and managing components, such as:

  • widgets Components

    Components enable you to design and reuse UI elements such as buttons, form fields, and navigation menus, establishing a consistent basis for your design system. These components can range from foundational elements like buttons and inputs to more complex compositions of atomic-level elements, forming larger organisms with extensive customization options and features, such as headers.

    Image caption of Learn about creating components and variants in Figma

    Learn about creating components and variants in Figma

  • dynamic_feed Properties

    Component properties facilitate the creation of versatile and adaptable elements with diverse states and variations for your product. By utilizing features such as variants, text properties, boolean properties, and instance swap properties, you can introduce custom functionalities to your components, enhancing their reusability and customization options.

    Image caption of Learn about component properties in Figma

    Learn about component properties in Figma


Optimize your component creation process:

  • Use consistent naming conventions for your components and variants.

  • Leverage Figma's Auto Layout feature to ensure your components are responsive and adapt to different content and container sizes.

  • Document the usage and best practices for each component, including any constraints or specific implementation guidelines.

Establishing design patterns

Design patterns are solutions to common user interface problems, providing guidance on how to combine components to address specific user needs and scenarios. By creating a library of well-documented and proven design patterns, your team can ensure a consistent and efficient implementation of user flows and interactions across your product.

Some common design patterns include navigation patterns (e.g., tabs, sidebars), data display patterns (e.g., cards, tables), and feedback patterns (e.g., messages, tooltips).

Effectively establish and maintain your design patterns:

  • Create a dedicated location within your design system file or a separate library for your design patterns.

  • Document the purpose, usage, and best practices for each design pattern, including any constraints or specific implementation guidelines.

  • Regularly review and update your design patterns as your product and user needs evolve.

Fostering collaboration and maintenance

A successful design system is one that promotes collaboration among designers, developers, and stakeholders, while also being easy to maintain and evolve over time.

Ensure your design system remains a valuable asset:

  • Establish clear roles and responsibilities for team members involved in the creation, maintenance, and usage of the design system.

  • Provide documentation and training resources to help team members understand and use the design system effectively.

  • Encourage feedback and suggestions from team members to continuously improve the design system.

Documenting your design system

An essential aspect of a successful design system is thorough documentation, ensuring that stakeholders can access, understand, and effectively use the system. There are several ways to document your design system, with some organizations relying on third-party platforms like Zeroheight or InVision to create and manage their documentation.

However, a convenient approach for many teams is to keep the entire ecosystem within Figma itself. This method offers several benefits:

  • Reduced reliance on third-party tools
    By keeping everything within Figma, you can avoid paying for and depending on additional applications, streamlining your workflow and potentially saving costs.
  • Simplified maintenance
    With Figma-based documentation, you can use the same tools you employ for creating your designs to maintain and update your design system documentation.
  • Instant updates
    Figma serves as a sandbox environment, allowing any changes to styles or components to be instantly reflected in the documentation. This real-time updating ensures that stakeholders always have access to the most up-to-date information.
  • Seamless integration
    As designers and developers rely heavily on Figma, having the design system documentation within the platform ensures it can be easily integrated into the product creation workflow. Stakeholders can have the system open in a tab, readily available whenever needed.
  • Interactive prototype
    Figma's prototyping capabilities allow users to interact with the design system documentation, providing a more comprehensive understanding of how the components and styles should function in a real-world context.

By choosing to document your design system within Figma, you can simplify your workflow, enhance collaboration, and streamline the maintenance process, making it an attractive option for many organizations.


In conclusion, a well-planned and organized design system is vital for driving productivity, improving collaboration, and enhancing the overall quality of your product. By building a scalable design system in Figma, you can establish a single source of truth that promotes consistency, efficiency, and adaptability across projects and teams.

Remember, a design system is a living entity, and it should evolve alongside your product and organization. Embrace change and continuous improvement to ensure that your design system remains a valuable asset to your team and organization as a whole.

This article has provided you with insights and best practices on planning, structuring, and maintaining a design system in Figma, helping you set the foundation for a scalable and successful product. Keep in mind that this overview just scratches the surface; each topic covered in this article deserves a deep dive and separate article to explore it thoroughly. Be sure to keep an eye out for upcoming articles that delve further into these subjects.

Promo image for Once UI design system

The $900,000 design system mistake you can’t afford to make

A staggering 90% of startups fail. We're exposing the secret mistake that can doom your business for good.

Once UI for Figma - design framework for prototyping on Product Hunt

Updates from the creators

Stay in the loop with our weekly newsletter

© 2023 Once UI - All rights reserved.

Once UI is an independent framework and is not affiliated with, endorsed, or sponsored by Figma or any of its subsidiaries.