Design System In Figma

Learn how to use and design a collaborative and powerful design system in Figma.

Create your own

Download Source Code

What is a Design System?

A design system is a living style guide that’s collaborative and code-connected. It’s not just a style guide where designers are the only contributors. It’s shared across the whole team, including designers, developers, product managers, etc. As a result, the design system should be cohesive, dynamic, reusable and maintainable both in design and code.

It starts with the styles and components in Figma, then move its way into the team library to finally become code components that exist in a place that’s easy to reference, contribute and version controlled, like a git repository.

Anatomy of a Design System

A design system is composed of all the elements in your final app. These elements should be cleanly organized into styles and components that are referenced in a single source of truth inside a separate document. This document should be easy to maintain by anyone in your team.

If your developers are involved in Figma, you can share your Design System file as a Web URL. If you build a site as well, you can use Live Embeds to reflect all the changes perfectly to your site.

As a final step, as you empower your designers to contribute code, it’s best to recreate all the components in code and show the code samples. A good example is the Zendesk Garden design system.

FOUNDATION

The foundation of your design system set the tone of your design language. It’s important to formulate the context for the branding, clearly indicating how your logo should be used appropriately. Also, you should set the main colors, typography and grids.

FIGMA STYLES

In Figma, most of the foundation element are set in the Styles, which contains Colors (including gradients and images), Text and even Effects. You can make them readily available as a Library. As you design, you can set these styles in your Inspector, for things like TextFillStroke and Effects.

RULES

Another important piece of the foundation is setting the rules for negative spacing, page division and elements placement using grids. You can demonstrate how to harmonize elements using different sets of elements together, or use the drop shadows in order to be consistent with your design language.

COMPONENTS

Components are building blocks for your design system. They’re generally collections of elements put together in a reusable way, such as for buttons, forms, navigations, cards, cells and overlays. Component elements like text content, colors and images can be customized in the Inspector. A button component can be duplicated many times, with different content and styles.

Additionally, you can have Components within Components, allowing you to customize even the most complex groups of elements, like icons, states and complex themes.

For example, a Table Cell can be a Component containing a toggle, which itself is another Component. That toggle can be switched between ON and OFF.

Figma VS Sketch

Let’s start from the beginning and highlight what makes Figma special. Nowadays, design tools are not vastly different from each other. The layout is similar and you’ll find the same essential features such as components, libraries and developer handoff.

While Sketch is rich in plugins like CraftAbstract and Zeplin, Figma has all those tools embedded into it at the start. On top of that, Figma has real-time collaboration, has all its content exist on the Web and works on Windows.

Import from Sketch

Figma treats your Sketch files as first-class citizens. It is so good at importing that even an intricate and massive Library file like Angle can be imported to 95% accuracy. All the layers and symbols are kept intact.

Mac and Windows

What sets Figma apart is its collaborative and always accessible nature. Barriers such as requiring a Mac or downloading a large app is a thing of the past. Thanks to this, anyone can design and anyone can view your design, while you design. As someone who has used this daily, I cannot overstate how game-changer this is. No longer is your team over-relying on a third party tool, or an increasingly complex and fragmented set of plugins, Figma simply has everything from the start. Because a lot of developers work on Windows machines, this is truly essential to keeping your team in sync. Any developer can receive a link from you, inspect the design and get the colors, fonts and even CSS, Swift and SVG Code.

Real-Time Collaboration

Figma truly is the Google docs of design tools. Once you start collaborating with fellow designers, developers and clients in real-time on a design project, you’ll never want to go back. You can share your design with anyone and they can watch your progress, comment and even participate as you bring your pixels to life.

Version Control

In Figma, everything you do is automatically saved in the history for free. You can also manually commit (Command + Option + S) a version to keep things in a neat timeline. You don’t have to think about branches because the real-time collaboration allows you to ensure that nobody is stepping on each other’s toes. It’s actually a relief to not compare this too much to Git because a lot of designers struggle with the more advanced concepts of Git.

Vector Network

Figma introduced a powerful new way to design vectors. Instead of connecting paths one to one, you can create web-like connections, making the whole process of creating icons more flexible.

Performance

While most tools today focus on the hype train of new features, Figma simply focuses on a solid workflow with a performance that is unmatched by its peers. This is one of the main reasons why I switched from Photoshop in the first place. And for me, Figma is as fast you can get in a design tool.

When you work 8 hours a day on a tool, every second you save counts.

Every drag of a button and every text edit feels buttery smooth at 60 frames per second. Zooming in and out is without lag.

Team Library

Imagine Abstract, Google Docs and Sketch in a single tool. Imagine a more cohesive and smoother experience. That’s Figma. Team Libraries allow you to share your components, styles and assets across your whole team. You can enable and disable these in the Team Library icon at the top right. This is absolutely essential for your design system.

Thanks for reading this post

Buy Me a Coffee

Basic Layout and Techniques

Start with the styles and design system foundation in Figma

Out of all the design tools, Figma is probably the most fully-featured one. It’s every bit as powerful as Sketch, yet it went above and beyond to solve common issues like collaboration, version control, prototyping, icon illustration and so on. For creating a design system that’s collaborative and easy to share, Figma is unmatched.

Constraints and Adaptive Layout

Make your design adapt to any screen

Working with constraints is a crucial part of the workflow as you design for so many screens. Elements, groups and components need to be flexible enough to react to any content or screen change.

Styles and Team Library

Rules for typography, colors and gradients in Figma

Styles are essential to set up a strong foundation of your design system in Figma. They can be shared inside a Library, which your whole team can use for their designs. When used properly you can keep your typography, colors and assets consistent in your app even when multiple designers are working on the same files.

Components and Nesting

Design powerful and reusable elements for your site

Components are reusable elements in your design. A header, footer or even a button can be a component. As you reuse a Master component multiple times, any structural change to it in the future will affect all other instances.

Components are extremely flexible in Figma. You can virtually override anything except for the position. Anything that can be edited in the Inspector can be customized. Components can even be resized.

Booleans and Shapes

Collaborate with your team with shared components

The first time I used Union and Subtract on two shapes, it changed my perception of how simple illustration can be. You can literally create a moon icon by subtracting one circle from another. It’s effortless.

Icons and Vector Network

Create your own vector illustrations from scratch in Figma

Making icons and logos has become exponentially easier thanks to modern design tools which only gives the simplest, most necessary tools to get you started. Figma makes it even more powerful with their Vector Network, which offers greater flexibility for editing the vectors.

Export, Inspect and Code in Figma

Communicating the design system to your developers

Getting production code from your design elements has always been a huge challenge for designers and developers. It’s only recently that tools enable anyone in the team to inspect sizes, properties and distances. Figma takes it to the next level by making it all available in the design tool, rather than having to create a bunch of accounts and switching back and worth between tools.

Multiplayer and Commenting in Figma

Iterate designs and explore new ideas in a multiplayer environment

Multiplayer is not a new concept. Google docs completely changed the way we collaborate on text. More and more tools in our daily work are becoming collaborative, such as AirtableSlack and now Figma. Once you start experiencing its power, you can’t go back. It’s one of those “of course!” moment.

Real-time collaboration helps with the introvert nature of designers when they’re working on something new. That’s because the fear of sharing is powerful when they work in a silo, and the more they dive deep in that rabbit hole, the less they’re inclined to share.

Prototyping and Interaction

Quickly create an entire flow for your app design in Figma

Figma makes it super simple to create prototypes using transitions without downloading a single third-party app. The prototype tool is in its own Tab in the Inspector.

Thanks for reading this post

Buy Me a Coffee

0
Would love your thoughts, please comment.x
()
x