Figma Intermediate: Design Systems

Name: Figma Intermediate: Design Systems
Author: Justin Billmeier

Learn how to create and manage a design system in Figma

Preview the first lesson free — get full access to all 4 lessons.

Course: On-Demand

Hello, my name is Justin and in these lessons you will learn about design systems. You'll learn how to create and manage them and utilize them in your designs. In this lesson we'll talk about creating a design system with a library. By the end of the lesson you'll know how to create and publish the library. So what is a design system? Well let's go with the Nielsen Norman groups definition. They have been a leader in design thinking for years. They say a design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels. Okay so what that means is that a design system is bigger than what we're actually doing with Figma but Figma plays a crucial role in the creation and management of a design system by serving as a single source of truth. Now the design system is also going to involve engineering and documentation in something like Confluence. When you create components and styles, engineering has to have a reliable way to implement that. So they have to be working with you to make sure that they're building that alongside of you. Alright so let's look at what we have here. I've added some more components, some more icons, another button, some more text fields here, some logos, thumbnails, headers, lists, some navigation options, some cards, and I've added styles here. We have grid styles and I have colors and topography. Now this is from a simple design that I made, it's just a fictional app, it could be anything. When you're creating your design system there's a couple of different ways you can start. You could start by using an existing design system as a reference, something like Google Material, Bootstrap, I have a couple here, here's one from Uber, there's open source ones that you can just implement with engineering or you could just use them to start building your own as a reference. Another method is to just take what you already have and start building it off of that. It might not be much, maybe you already have some web pages but whatever you're doing, starting with that as basic building blocks and then just gradually building it out. That's what I'm doing here and let's go and look at our components. The components are already added and I'm going to add just a few styles here because that's important too. I'll select a color and for fill here I can click on the Libraries and click Add and I'm going to name this color Black. What you can do actually if you want to categorize these, I'm going to put this in a category called Grays because I want all of these grays, I'm just going to lump it in with grays black and white and create a style and let me do another one. Let's do a couple of type styles here. My type hierarchy with some headings, some body type, let me add some text styles. I have some color styles, a couple of text styles and once this is all built out I will go through and make sure that the text styles and color styles are applied to all of the components so it's all linked up together. That way when changes are made they happen seamlessly across multiple things at the same time. Once you get this all set then you want to publish your library. Let me go to my Assets panel here. Actually you can do it here too, you click up here and just say Publish Library and it's going to publish all of my components and my styles to a library and I will be able to use this in other files and not just me. Anybody on my team that I give access to will be able to use this as well. I will publish this and it's publishing the library. Sometimes it takes a minute or two, not too bad, it's successfully published. So our library is published. In our next lesson we'll look at managing a design system. Thanks for watching.

Intermediate Provider : Justin Billmeier 4 Lessons · 19m in Arabic, English

Course Description

A design system is a living style guide—a cohesive, dynamic, reusable, and maintainable resource that provides consistency and scalability, improves efficiency, and enhances collaboration and accessibility across your designs. In Figma, a design system starts with styles and components, which are combined to create reusable, consistent design elements. You’ll learn how the changes you make to these components reflect across all instances, to ensure consistency throughout your project. We’ll also cover how to store your designs in a team library where it’s version-controlled and easy to reference.

In this KnowledgeCity course on Figma Intermediate: Design Systems, you’ll learn how to create and manage a design system in Figma. As a cloud-based design tool, Figma facilitates collaboration among teams, making it a good choice for creating design systems. We’ll show you what’s involved in establishing a design system, as well as best practices for consistently applying a design system across your own projects.

What You'll Learn

Describe what design systems are and how they work as a living, reusable, and maintainable style guide
Create a design system in Figma starting with styles and components
Manage a design system so changes to components reflect across all instances for consistency
Apply a design system across your own projects using best practices
Store designs in a version-controlled team library that is easy to reference

Key Takeaways

A design system is a living style guide that provides consistency and scalability while improving efficiency, collaboration, and accessibility across designs.
In Figma, a design system starts with styles and components that combine into reusable, consistent design elements.
Changes made to components reflect across all their instances, ensuring consistency throughout a project.
Storing designs in a team library keeps them version-controlled and easy to reference.
As a cloud-based tool, Figma facilitates team collaboration, making it a good choice for creating design systems.

Frequently Asked Questions

What will I learn in this course?

You'll learn how to create and manage a design system in Figma, including what design systems are, how to create one, and how to apply it across projects.

Why use Figma for building a design system?

Figma is a cloud-based design tool that facilitates collaboration among teams, making it a good choice for creating design systems.

What topics do the lessons cover?

The lessons cover creating a design system, managing a design system, using a design system in designs, and design system best practices.

How does a design system keep my work consistent?

A design system is built from reusable styles and components, and changes you make to these components reflect across all instances to ensure consistency throughout your project.

How are designs stored and shared?

Designs are stored in a team library where they are version-controlled and easy to reference.