Navigating the World of Design Systems in Figma

As a designer at an agency working through the ever-changing landscape of digital product design, I’ve faced the challenge of maintaining consistency across multiple interfaces while keeping projects scalable and efficient. The absence of a structured system often led to disjointed user experiences, wasted resources, and increased production times. If you’ve encountered similar challenges, you’re probably wondering how to streamline and scale your work effectively.

That’s where design systems come into play — a comprehensive collection of reusable components governed by clear standards, capable of creating a wide array of applications. Through my experience, I found that design systems empower teams to design, develop, and deploy products with greater speed and efficiency. For example, a Figma study from 2019 highlighted a 34% boost in design speed for teams utilizing design systems. Major companies like Google, Microsoft, Uber, and IBM have demonstrated the immense advantages of design systems, with their constant updates and improvements serving as valuable references for designers and developers worldwide.

So, why did I choose Figma for my design system? Like many others, Figma is my go-to design tool. It’s not just me; the designers, developers, and stakeholders I collaborate with are also familiar with it. Its native support for dynamic components, variables (tokens), real-time collaboration, version control, and auto-layout simplifies the process of building a comprehensive design system. If you’re curious about using Figma for your design system, this article aims to guide you through my experience, considerations, suggestions, and approach.

Unpacking Design Systems

What Exactly is a Design System?

A design system is a strategic framework that brings together design principles, styles, components, documentation, and scalability to ensure consistency, efficiency, and scalability in digital product design. It’s not just a collection of assets, but a living ecosystem that evolves with your project and the team’s needs. Let’s break down the key elements:

• Design Principles: Think of design principles as the North Star for your design system. They’re the guiding light that keeps everything in check. Whether it’s simplicity, inclusivity, or innovation, these principles ensure that every pixel and interaction resonates with your brand’s core values.
• Styles: Styles are the visual essence of your design system. From the colours that evoke emotions to the typography that speaks volumes, styles are the threads that weave consistency into the fabric of your digital experiences.
• Components: Imagine having a Lego set where each piece perfectly fits together to create something amazing. That’s what components are in a design system. Buttons, sliders, cards — you name it. These reusable pieces ensure that building and scaling interfaces are more like assembling a masterpiece, not reinventing the wheel.
• Documentation: It’s the manual that empowers everyone to use the system effectively. From how-to guides to do’s and don’ts, good documentation ensures that your design system isn’t just a pretty face — it’s a well-oiled machine that everyone can drive.
• Scalability and Maintenance: A design system’s true magic lies in its ability to evolve. Scalability ensures that as your product grows and changes, your design system can adapt seamlessly, embracing new features and challenges without losing its core integrity. Meanwhile, maintenance keeps the system in top shape, ensuring that every element remains relevant and functional.

Do You REALLY Need a Design System?

Do you really need it? Or do you just want one?

You’ve probably heard about design systems, but do you REALLY need one? It’s a valid question, design systems require a lot of time and resources to build and maintain. Before jumping into creating anything, it’s good to consider a few scenarios:

• Consistency Across Interfaces: If you’re noticing discrepancies in your product’s design across different interfaces, a design system can help. It ensures that elements like buttons and typography remain consistent, providing a cohesive user experience.
• Smooth Scaling: As your product grows, managing its design can become increasingly complex. A design system offers a structured approach, making it easier to scale your design without the chaos.
• Streamlined Collaboration: Ever experienced miscommunication between your design and development teams? A design system can bridge that gap, ensuring everyone works from the same playbook.
• Increased Efficiency: If you find yourself repeatedly creating similar elements for new features, a design system can save you time. It’s like having a toolbox at your disposal, ready to speed up your design process.
• Brand Consistency: Maintaining a consistent brand identity across multiple products or platforms can be challenging. A design system helps keep your brand’s look and feel uniform, no matter where it’s applied.

So, do you need a design system? Do you have the resources and time to build and maintain one? If you’re nodding along to any of these points, the answer might be a resounding “Yes!” It’s not just about making things pretty; it’s about making your design process more streamlined, collaborative, and scalable.

Getting Started, Laying the Foundation

Now that we’ve explored the necessity of a design system, let’s dive into how to get started with building one. Creating a design system is like building a house. Before you get to the fancy decor, you need a solid foundation.

Establishing Principles

Think of your design principles as the compass guiding your design system. They are the core values that will steer your decisions and ensure your system stays true to its purpose. Here’s how to get started:

• Reflect on Your Brand: What values define your brand? Whether it’s simplicity, innovation, or inclusivity, these should be the bedrock of your design principles.
• Seek Inspiration: Look at other design systems and see how they articulate their principles. Don’t copy, but let their clarity and focus inspire you.
• Keep it Concise: Aim for around three to five principles. They should be easy to remember and impactful.
• Make Them Actionable: Each principle should guide behaviour. For example, “Be clear, not clever” is more actionable than “Value clarity.”

Setting up the file

When setting up your Figma file for the design system, starting with a clear structure and organization is important. You have the option to create multiple files to separate each component of your design system or opt for a single dedicated file, organizing all pieces across separate pages. I prefer the latter approach, as it ensures that navigation and updates remain manageable as your system evolves. An optional tip that I find incredibly helpful is integrating visual emojis into the names of sections or pages. Having these visual indicators and also the date of the last update, adds an extra layer of clarity and organization which can be seen at a glance in the layers panel.

Simply using a ✅ or ✏️ emoji to indicate the status of each section along with the date makes it easier to recognize and track the status in the layers.

Naming Conventions

Establishing a hierarchical naming convention is equally crucial for your design system. Clear, logical, simple, and standardized names enhance consistency and usability across all levels. Start by defining broad categories like “Components,” “Colors,” and “Typography,” then break these down into specific subcategories and states, such as “Buttons/Primary/Hover” or “Typography/Heading/Large.” It’s important not to underestimate the time required to align these conventions with developers and other stakeholders using the design system, as this ensures seamless implementation.

Hierarchical naming convention example

Assembling the Core Elements

Next let’s delve into the creation of the core elements including Styles, Components, and Documentation. It requires time, effort, and constant iteration to get a working core of the design system.

Styles: Setting the Visual Language

Styles are the backbone of your design system, defining the visual language that will be consistent across all your designs. Here’s what to focus on:

• Colours: Start by defining a primary palette that represents your brand, then expand it to include secondary and tertiary colours for accents and UI elements. There is a colour styles library in Figma where you can easily define, manage, and apply these consistently.
• Typography: Define sizes, weights, and line heights for various text elements. Typically you will have distinct type styles for headline and body, depending on what you need you can expand to include display, title, and label text styles as well. Similarly to colour styles, there is a text style library to define, manage and apply these consistently across your designs.
• Spacing: Develop a scale for margins and paddings that aligns with your grid system. Implement this spacing system in Figma using auto-layout features to maintain consistent spacing across components.
• Motion: Outline principles for animations — like easing curves and duration — that enhance the user experience without overwhelming it. While Figma doesn’t have extensive animation capabilities, for smaller animations and developers these guidelines will be critical.

Components: The Building Blocks

Components are the heart of your design system. It is crucial to build components that are well thought out and utilize the integration of styles and variables to not only ensure reusability but also easier maintenance and adaptability.

• Design for Modularity and Atomic Design: Think in terms of atoms, molecules, and organisms. Start with the most basic elements (like buttons and inputs) and combine them to create complex components (like forms). This approach ensures versatility and reusability.
• Component Properties: Leverage Figma’s variants to create flexible components. For instance, a button component can have properties for colour, size, and state, allowing you to manage a comprehensive library of buttons in a streamlined manner.
• Auto-Layout: Auto-layout makes your components responsive. I tend to implement this onto my components whenever possible because it makes adjusting and adapting a component a lot more headache-free. No more detaching and assigning custom values to a single instance.
• Integrating Variables: Integrating Figma’s variables in the design system is a game-changer. It’s about setting key values like colours, fonts, spacing, radius, and almost any property you can think of in one place and applying them across your designs. With styles, you can easily manage these variables, ensuring consistency with a single update. It’s a smooth way to keep your design system in sync, making updates a breeze and seamless for developers as well.

Components can include a wide range of elements such as buttons, icons, tooltips, switches, navigation and even more!

Documentation: The Design System’s Handbook

Proper documentation is crucial for the success and adoption of your design system. It’s not about just listing what is in your design system but it guides your team on how to use it effectively and why certain choices were made.

• Design Principles: Clearly articulate the core principles that underpin your design system. Explain how these principles inform the creation and usage of components and styles, providing a cohesive vision that aligns design decisions with your brand’s values.
• Guidelines on How to Use it: Create detailed documentation for each component and style, explaining their purpose, usage, and variations. Incorporate interactive examples in Figma to show these elements in action.
• Best Practices: Offer insights into using your system, from layout principles to accessibility guidelines. This section helps users understand not just the ‘how’ but the ‘why’ behind your design decisions. Providing templates and design files that showcase the application can help educate your team on how to leverage the system effectively.
• Change Log: Keep a detailed record of updates, additions, and removals within your design system. This transparency helps users stay informed and adapt to changes seamlessly.

Ensuring Scalability and Relevance

Embracing Change with Scalability

Scalability is all about flexibility and growth. It’s about designing your system in a way that it can easily accommodate new components, styles, and principles without a complete overhaul. This might mean creating a modular structure where elements can be added or removed without disrupting the whole system. It’s like building a Lego set where you can keep adding pieces without losing the integrity of your creation.

Flexibility with Theming

Theming is like the secret sauce of scalability, giving your design system the superpower to shape-shift for different brands, products, or platforms. And let’s be real, the dark and light mode toggle on almost every modern platform is a godsend for our precious eyeballs. By weaving themeable properties into our variables like colours, typography, and spacing — we can effortlessly switch up our system’s vibe, ensuring it stays consistent and cohesive, no matter the context. This presentation from Ford is a great example of theming helping them to scale their organization and brands.

Keeping it Fresh with Maintenance

Maintenance is the ongoing process of keeping your design system up-to-date and relevant. It involves regularly reviewing and updating components, styles, and documentation to reflect changes in design trends, technology, and user feedback. Think of it as tending to a garden; you need to water the plants, trim the bushes, and pull out the weeds to keep it looking beautiful and healthy.

Collaboration is Key

A successful design system relies on collaboration between designers, developers, and stakeholders. Regular communication and feedback loops help identify areas for improvement and ensure that the system meets the evolving needs of the team and the product. It’s a team effort, where everyone has a role in nurturing and growing the system.

Conclusion

The process of building a comprehensive design system can feel like climbing a mountain — it’s daunting, it’s time-consuming, but the view from the top is worth it. The benefits are undeniable; a well-crafted design system can be a game-changer for your team’s efficiency, consistency, and creativity.

My journey with design systems has been a rollercoaster of learning, adapting, and growing. And I’m still on that ride. The beauty of design systems is that they’re as unique as the projects and organizations they serve. They’re living entities that evolve with your needs and the shifting sands of the design landscape.

So, I encourage you — embrace the adventure. Keep refining, improving, and evolving your system. Stay curious and open to change, because the world of design is ever-changing, and your design system should be too.

Additional Resources

If you’re interested in diving deeper into learning more about design systems here are some great reads and resources to continue with!

• Atomic Design by Brad Frost: A book that introduces a methodology for creating design systems, focusing on the concept of atomic design.
• Figma’s Components, styles, shared library best practices: Refresh your fundamental basics with the best practices from Figma.
• Thinking in Systems by Donella H. Meadows: Amazing book on conceptual tools and methods of systems thinking.
• Design Systems by Figma: An extensive design systems publication by Figma for getting started guides, articles, inspiration and resources.

Four Nine is a full-service Digital Agency located in Vancouver, BC. Learn more about us by visiting our website or contact us at info@fournine.digital.