How to make a little design system with Figma (colors)

Jeison Daza — Sat, 29 Jan 2022 01:27:59 +0000

Content:

Create the shapes
Create a component
Create reusable colors
Choose the base colors
Choose the main colors
60-30-10 rule

Hello! On this day I will continue the series little design system with Figma. Today I will share how to create components and color palette.

1. Create the shapes

Working with UI elements as components gives us many advantages when we have to reuse them in our design.
To start we need to create simples shapes.

We can edit the shape's properties in the right panel.

In my case, this shapes are color swatches, they include color, contrast ratio, hexadecimal code, name and a dot for distinction.

It's a good practice sets auto layout behavior to main parts of our shape.

The Auto Layout option allows you to structure components or frames in such a way that they can grow automatically, making a container adapt to the size of its contents, or vice versa.

When set it gives us some functionality similar to display:flex in CSS. We can configure direction of the items, space between them, padding and alignment.

2. Create a component

Once we have nested our initial shape, we can create a component.

A component in Figma looks:

The awesomeness and power of Figma components allow us to create multiple instances of our component and modify them all by modifying the parent they came from (the parent component is marked whit four full-color diamond, while it instance is a only bordered diamond).

Also each instance can be individually modified.

3. Create reusable colors

To reuse colors we need set it as styles in tow steps:

First, we need to select the component part and set it the desired color.

Then, click on four-dots bottom, then on plus symbol and finally set a name to new color style. If you want to have your colors organized, follow the schema group name/item name.

It is possible to edit a color style clicking on the work space to view all styles, then click on the settings icon.

4. Choose the base colors

It's time to customize the instances. As I am making a color palette is a good practice to have into account the contrast ratio for purposes of accessibility and good visualization, I used webaim.org to get it.

Black and while are base color in my palette.

for the other colors I used maketintsandshades.com, a tint and shape generator. My project is small so I only get five variations: the picked tone, two light and dark levels.

My basic gray scale:

Colors to facilitate interaction between the system and the user:

5. Choose the main colors

Searching in colorhunt.com I found these colors that I liked.
These are all the colors for my projects:

6. 60-30-10 rule

This rule is for interior design to calculate the percentage of colors, but it can also be used for user interface design.

In my projects the proportion of colors will be:

The result of the palette is not important in itself, it's only a visual guide. The most matter is the resulting library of colors.

In future posts I will show how to share and reuse these colors in others Figma projects.

And this way we come to final of this post. The next post will deal with fonts.
Thank you for reading.

How to make a little design system with Figma (intro)

Jeison Daza — Wed, 26 Jan 2022 03:04:42 +0000

Content:

What is a design system?
My object
First step: How do I want my apps to look like?
Second step: Make a figma project

Hello there, I'm very happy to share my first post here.

I am a junior front-end developer and will be starting a series of posts about the figma tool.

Some things before we start.

What is a design system?

“Everything that makes up your product” — “From typography, layouts and grids, colors, icons, components and coding conventions, to voice and tone, style-guide and documentation, a design system is bringing all of these together in a way that allows your entire team to learn, build and grow”
— css-tricks.com

Like any system, a design system is complex because it unites
different parts that must work together. It takes into account everything that a product needs to exist, not only regarding the visual aspect but also things like brand, identity and purpose.

My object

As a beginner in web development, I want to improve my technical skills, so I have thought about creating some web-based tools for personal use and at the same time growing my portfolio.

My projects don't need a whole design system. I would like these apps to have a consistent visual design, that they feel like part of an ecosystem. To get it more easily I want to have a library of UI components with centralized styles following my design principles. For this reason I will not cover all aspects of a design system in my posts, we will focus in get a "little design system", just develop Style Guides and Pattern Library modules.

I know that it sounds like reinvent the wheel, since I could use some existing option, but I think the knowledge about UI and UX that I would gain doing it by myself will be helpful in my journey as a front-developer.

now yes, let's start.

First step: How do I want my apps to look like?

The answer to this question is to determine what app we are going to build (we know this from the software requirements). In my case, I want apps to take notes, pomodoro timer and similar. As they are tools that I'll use everyday, I want a simple design and few colors, a design focused in highlight the wanted functionalities.

Second step: Make a figma project

Stop to think (for now), it's time to get to work.
I will use figma.com because it's fast, web-based, has a great free plan, and I like because I've used it before.

To use figma we have to create a account.

Once inside the account, we will create a New design file.

And this is the figma work space.

It's recommended to put an appropriate name to our project.

This is all for now, in the next post I will create color components.

DEV Community: Jeison Daza