#Design Systems

Build a Design System with Figma and Notion

A nice way to organize a design system and plan work using Figma embeds in Notion.

Build a Design System with Figma and Notion

Force Mobile Design System

Warren Tobias describes the whole process of developing a proper design system and replacing Sketch, Abstract, and Flinto with Figma. Interestingly, they continued using Zeplin for the handoff process as their development and engineering team is mostly outsourced.

How We Build Our Design System

Jonathan Saring shows and explains the process of creating a design system with components to standardize and scale the UI development process at Bit.

In the File: Governing your design system

Pinterest’s Ashley Seto and Fidelity Investments’ Taylor Cashdan and Mark Steinruck provide a behind the scenes look into their design systems and the operations that keep them going.
In the File: Governing your design system

Design Tokens

Export Figma styles and custom tokens to Style Dictionary JSON or sync to GitHub. I’ve been thinking of building a plugin for this before, so looking forward to trying it on one of the projects.

Juli SomBAT: Using Variants in Spotify web design system

In this example, they replaced 105 button components with just 3. (Sounds like they’ve been using Variants for a while, as Dylan Field used Spotify design system Encore to present the feature in his Config keynote.)

Mattias Johansson: Using Variants in Spotify mobile design system

Another example from Spotify. Here, they moved from 36 to 4 track row components.

Tobias Negele: Using Variants to clean up components in Polaris

Shopify used Variants to clean up their local design system for retail.

Power Up Your Design System With Figma’s Agency Partners

“Figma has partnered with leading global digital and design agencies. These agencies have a proven track record of helping their clients run at scale by setting up and migrating their design systems, implementing more efficient processes, and providing an overall elevated level of service.”

In the File: Building a Design System Around Collaboration, Not Components

It’s all too easy to focus your design system on the perfect component, missing out on the aspect that’ll ensure your success – collaboration. Join Zalando’s Louise From and Julia Belling to understand how they created, educated, and scaled their internal design system.
In the File: Building a design system around

Designing a Material Theme: Color

A guide to creating the perfect palette with Material Design. While it’s not strictly specific to Figma, the recommended Baseline Design Kit makes it easy to preview a custom color palette in the Material Design system.

How to Automate Design Tokens in a Design System

Somehow I missed this article earlier this year, but it’s a good resource for creating an automated process to keep design tokens of the design tool in sync with the code behind it. They achieve this by setting up a Node.js server that generates Sass and Tailwind files with all the variables from the Figma API.

Figma & design thinking: Building a design system for an existing product

Tammy Taabassum created a design system in Figma for an existing product following the design thinking process. She started by assessing the situation (Discovery), set goals (Define), and only then built components and unified colors.

Creating multi-brand design systems

The team members from Shopify, Condé Nast, and Harry’s shared their experiences creating multi-brand design systems in a livestream a few months ago. This post shares some of the highlights from it.

Making Design Within Reach for online shoppers

A branding and digital agency BASIC worked with Herman Miller on redesigning a Design Within Reach (DWR) website to replicate the experience shoppers might have in a showroom. They used Figma prototypes for usability testing and took the redesign as an opportunity to create the first design system for all of Herman Miller brands.

Build it in Figma: Create a Design System IV — Testing

Testing a design system to see if the component library is robust enough in real-world scenarios.
Build it in Figma: Create a Design System lV —

Build it in Figma: Create a Design System V — Documentation

Rogie shows the best practices for documenting your design system using Figma and other tools.
Build it in Figma: Create a Design System V:

Building a Design System Library

Jeremy Dizon discusses best practices that his team followed to create and maintain multiple Lyft Product Language component libraries in Figma.

Build It in Figma: Create a Design System — Components

“Part 2⁄5. Add to your design system by building foundational components and organize them using pages, frames, names, and descriptions.”
Build it in Figma: Create a design system —

Managing Your Design System in Figma

The Headway design team on managing a design system and multi-tiered UI kits in Figma. Love their usage of status badges and overlays.

Features

Topics

Products

Design Tools

Figmalion

Issues:
212
Links:
3,820