What is a design system? If you are a designer you probably already have one. The question is, has it been documented yey? Here is a YouTube video called What is a Design System? Design Systems 101 for Designers. In that video he goes out to see how others have defined it. Here are two examples. The complete set of design standards, documentation, and principals along with the toolkit (UI patterns and code components) to achieve those standards. – uxoin.com. Simply put, a design system is a collection of reusable components to tie whole products together. – freecodecamp.org.
What are some examples of design systems? Google has Material Design. Shopify has Polaris. IBM has its Design Language. Trello has Nachos.
In the above-mentioned video, Gary Simon comes up with his own definition of a design system: “A design system is a collection of guidelines, principles, and assets that are relevant to a business. The purpose of the design system to help the business team to learn, build, and grow.” Some design systems are more inclusive than others, but all design systems are dynamic. I would say that a design system is used by the business or organization to more effectively and efficiently communicate itself to the world with clarity and consistency. It’s about branding.
Design systems include things like typography, colors, spacing, illustrations, icons, pictures, animations, and so on. it also includes forms, images, navigation, movement guidelines, writing style, writing tone, voice tone, objectives and principles. This would include things like component libraries.
Why would you spend the time on setting up a design system? It is work up-front, but it can save time in the end. Having a design system speeds design up.
Figma
To create a design system in Figma, you start with creating a file. This file will have all the bits and pieces that you use in your design project. That includes assets such as buttons, icons, pictures, and so on. This way when you need to use one of your standard buttons with its standard size, color, and font, you don’t need to rebuild it each time. Just take a copy of the button in your design system.
If you are using the free account, you will not be able to copy and paste components into a new file. You can copy and paste regular elements.
Create a Figma Design System for a Marketing Site
To actually get started, create a new file in Figma. Let’s rename to something that identifies it better than “Untitled”. Charli Marie in her video called Figma design system for a marketing website, creates a Figma file called Components & styles – Marketing Kit. To download her 15-page PDF, go to charlimarie.com/design-systems.That’s not the only design system for that company. There is also one for the app, that would be in a different file.
Let’s work with colors first, then we’ll work with typography. In Charli’s video, she said that she created a separate file for the colors and kept the other design components in the other file called Components & styles – Marketing Kit. The colors file was called “ConvertKit Colors”. The color file is the one she wanted to share across the team of designers. First, you’ll need a list of colors with their RGB values in hex. All you need to do is create a rectangle and fill it with your first color. You could use 80 pixels wide and 40 pixels high. Since the colors are in their own file, you can put them right on the canvas, without putting them inside a frame. When you create the other file with components, typography, icons, button, and so on, you should put all like elements in the same frame and name the frame appropriately because it will be better organized in the Assets panel at the left.
For the icons, you can download them from icomoon.io and drag the SVG files into your frame that uses a 12 column grid. Once you’ve dragged an icon in, you need to constrain the proportions and resize it.