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

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.