Building a Strong Foundation:

I remember the transition to Figma a few years ago. Facilitated and encouraged almost by remote working, COVID and a need for better online collaboration, Figma is now the go-to for so many design practitioners.

Design systems have become a critical part of modern product design workflows. Products are hugely complex. Design systems help bring consistency, scalability, and efficiency to product teams. This means that designers can adhere to a robust framework and spend more time on creating incredibly user-friendly products that delight users. If you’re wondering why some new products look, feel and behave so well it is more often than not adherence to a brilliant design system that is ultimately responsible.

Long story short – setting up a solid design system can dramatically improve the way your team works.

Why Design Systems?

Before diving into the “how,” let’s take a moment to reflect on the “why.”

1. Consistency Across Products and Platforms: As products become increasingly complex, design consistency can be difficult to maintain. A design system creates a shared language for your team, ensuring that elements, typography, colours, and components look and behave the same way across different platforms, devices, and touchpoints.
2. Efficiency and Speed: Reusable components, libraries, and patterns save time. Instead of designing every element from scratch, designers can pull from an existing repository of pre-built, tested components, speeding up the design process significantly. Figma excels at interactivity and even animation WITHIN components so the time saved can be hugely significant.
3. Collaboration Between Teams: Design systems bridge the gap between design, development, and product management. Shared documentation and component libraries create transparency and collaboration across departments, ensuring that everyone is working from the same source of truth. With remote work a norm since COVID this is a godsend for product teams.
4. Scalability: As your product grows, your design system grows with it. A well-maintained design system allows you to scale your design efforts without losing quality or introducing inconsistencies.
5. Improved Accessibility: Modern design systems can incorporate accessibility guidelines from the start, ensuring that components are usable by people of all abilities. This proactive approach prevents accessibility issues down the line.

Setting Up a Basic Design System in Figma

1. Create a New Figma File for Your Design System

Start by creating a new Figma file where all the elements of your design system will live. This file should be dedicated to the core components, typography, colour styles, and icons that will form the foundation of your system. Think of this file as the “single source of truth” for your design team.

2. Define Your Colour Styles

Go to the right-hand sidebar in Figma, and under the “Fill” section, create global colour styles. Define your primary, secondary, and neutral colours, and set specific shades for hover states, backgrounds, and text. Naming conventions are important here to ensure clarity and consistency. For example:

• Primary/Blue/500
• Neutral/Gray/200

Once set up, your team can easily apply these colour styles across designs without manually choosing each colour.

3. Establish Typography Styles

Next, create typography styles for headings, subheadings, body text, captions, and links. Again, use clear naming conventions like:

• Heading 1 / Bold / 32px
• Body Text / Regular / 16px

These text styles ensure that typography remains consistent throughout your product, regardless of who’s designing it.

4. Build Core Components

Components are reusable UI elements that can be used across different designs. Start by creating the core building blocks of your interface, such as:

• Buttons (Primary, Secondary, Disabled)
• Input Fields (With Placeholder, Focused, Error State)
• Cards, Avatars, Icons, Badges, and Modals

Once you’ve created these elements, convert them into Figma components (Command+Option+K on Mac or Ctrl+Alt+K on Windows). This will allow them to be reused and edited globally.

5. Organise with Auto-Layout and Variants

Use Figma’s Auto Layout and Variants features to make your components flexible and responsive. Auto Layout ensures that buttons, cards, and other elements adjust their size based on content. Variants let you group related components, such as different states of a button (default, hover, pressed), making them easier to manage.

6. Build a Component Library

Once your components are defined, you can publish them to a shared library in Figma. This allows the whole team to access the components in any Figma file. To do this:

1. Select the components you want to share.
2. Go to the “Assets” panel and click “Publish Library.”
3. Name your library appropriately (e.g., “Core Components Library”).

7. Document Usage and Guidelines

A design system isn’t just about components; it’s also about how those components should be used. Create a dedicated page in Figma to document usage guidelines. Include instructions on when and how to use different components, colours, and typography. You can also link out to more comprehensive documentation in tools like Notion or ZeroHeight.

Examples of Design Systems

1. Google Material Design: Google’s Material Design system is one of the most comprehensive design systems available. It includes guidelines for colour, typography, components, and layout, as well as specific patterns for accessibility and usability.
2. IBM Carbon Design System: IBM’s Carbon Design System is a great example of how to scale a design system across a large organisation. It focuses on maintaining design consistency across IBM’s vast array of products while prioritising accessibility.
3. Shopify Polaris: Shopify’s Polaris design system helps ensure consistency across all merchant-facing products. It’s a great example of how a design system can balance brand identity with usability and scalability.
4. Atlassian Design System: Atlassian’s system is designed to help teams collaborate effectively by offering patterns for everything from form elements to charts. Their focus on component-based design and documentation serves as a model for teams working on collaborative tools.

Best Practice

Creating a design system is just the beginning. It’s equally important to maintain and evolve the system over time. Here are a few best practices:

• Regular Updates: Set a cadence for reviewing and updating the design system to reflect product changes, user feedback, or design trends.
• Clear Ownership: Assign a design system lead or team to oversee updates and ensure that the system is consistent across all projects.
• Collaborate Across Teams: Involve developers, product managers, and other stakeholders in the creation and upkeep of the design system to ensure alignment.