How to build your design system in Figma

We’re bullish on design systems here at Figma…in case you couldn’t tell from our announcements this week 😋. 2018 will be a big year, as we develop DesignSystems.com into a learning resource for the community to discuss the subject. We also want to support our own users in their design system journey with Figma.

I’ll never forget watching Václav Vančura, a Microsoft designer, show off the layers upon layers of components he’d nested and constrained in Figma… turtles all the way down, as far as the eye could see. It was more complex than anything we’d come across yet. We love when people push the limits of our technology past what we ever imagined.

On the heels of launching DesignSystems.com, we want to take a moment to showcase community posts about building design systems like Václav’s in Figma. Our users come from a broad array of backgrounds and geographies, and you make for excellent teachers, offering real world applications we couldn’t dream up if we tried. We hope the features we build, like constraints and Team Library, will continue to adapt to your varied use cases. Look for more product developments in 2018!

(P.S. We didn’t pay for or sponsor any of these posts. But we appreciate the thoughtful time and effort that went into each of them ☺️.)

Taking the first big step — Gusto

Here, designer Will Newton talks through the scariest design system question: “Where do we start?” The organization he works for, payroll and HR tech company Gusto, used simple building blocks to overcome this first hurdle.

Building your marketing and communications design system — Square

In this post, communications designer Zach Grosser shows how the marketing team at the payments processor Square built their own internal design system with assets like color palettes and logo sets.

Empowering non-designers with design systems — Virta Health

Virta Health, named a rising SF startup to watch in 2018, is fighting diabetes with user friendly design. In this article, designer Joey Banks talks through all the stages of building a design system — from an initial component audit to final mock-ups. He also talks about how Virta’s design system changed the way engineers and product managers communicate ideas.

Tapping the power of nested components — OpenText

Thomas Lowry, lead designer at the enterprise IT company OpenText, dives deep into using nested components to build a more powerful design system. This is similar to the work Vaclav at Microsoft has been doing.

Atomic design & Figma — SetProduct.com

In this post, designer Roman Kamushken, from UI kit site SetProduct.com, uses atomic design principles as the foundation for creating his design system — from words (headers, icons, etc), to phrases (buttons), to sentences (cards), to chapters (screens).