First idea

Several ones you can start with: Basic components, colors, and typography

Second idea

<img alt="Taras Savytskyi" src="https://miro.medium.com/max/500/1*m-cCtGEqnESI0246KrKtS" width="28" height="28">It’s always hard to be the only person in a company who is responsible for product design. Your day can be insanely busy because you deal with multiple things at the same time. You have to define a high-level strategy for a product design, delivering features, collaborating with product people, supporting devs and QA’s, user interviews, and much more.In addition, you always have to keep up with your craft. Figma is the main tool we use for all product-related features: all designs, explorations and brainstorming sessions live there.Shortly after I joined Statflo, we started working on a newly revamped app. During the process, I needed a design system that would allow me to move quickly and create prototypes in a matter of several clicks.<figure><img alt="Open Source logo" src="https://miro.medium.com/max/500/1*N9UHktQfdonZ5ekHTSELJ" width="680" height="357"><figcaption dir="auto">Open Source logo by Pixel Perfect</figcaption></figure><h1 data-selectable-paragraph="">Do not hesitate to use the open-source design systems available out there.</h1>In the beginning, you do not need much. The majority of elements that you will be using are atomic components: buttons, dropdowns, forms, fonts, colours, etc. Initial styling of a system doesn’t matter- you can change styling afterward just in a couple of clicks.The most important things you need to look for in third-party design systems are flexibility and proper component nesting.Several ones you can start with:<h1 data-selectable-paragraph="">Basic components, colors, and typography</h1>If you decide to go ahead with your design system, you should focus on a couple of simple things first: colors, typography and essential components.This strategy will allow you to create designs much quicker. For example, if you need to create an input field, you can begin with a default state and add others at a later stage.For instance, if you’re unsure about what icon to use inside an input field, just create a 16x16 square, fill it with grey color and make it a component. This will allow you to move forward and will make it easier to update this icon in the future.<figure><img alt="Figma component — passord input" src="https://miro.medium.com/max/500/1*Q78x5tGuIreGxFrPLzU9Jg.png" width="680" height="215"></figure><h1 data-selectable-paragraph="">Always start with a component</h1>When you’re the only designer in a startup, sometimes there is no dedicated time to build a design system. If you want to save time, I suggest starting building UI and converting all elements into components as you go.By doing so, you will save a lot of time, and it will help you decide what elements are the most crucial in the beginning.Ideally, you should start with creating an element, and convert it into a component as your next step, so you won’t need to spend time on component replacement.<figure><img alt="Figma plugin “Master”" src="https://miro.medium.com/max/500/1*9FonQkHdSZ0zF-LR6uEd3A.png" width="680" height="337"></figure><h1 data-selectable-paragraph="">Use “Master” plugin for Figma</h1>Sometimes when you are in rush you may forget to create a component, and end up duplicating several artboards with the same element. It’s a tedious job to go back and replace everything manually. There is a great plugin that can help to convert all regular elements into one component. The plugin is called <a href="https://dominate.design/" rel="noopener ugc nofollow" dir="ltr">“Master”</a> created by Gleb Sabirzyanov.Also, in order to convert all elements on different artboards, you have to select all of them. <a href="https://www.figma.com/community/plugin/735733267883397781/Similayer" rel="noopener ugc nofollow" dir="ltr">The Similayer</a> plugin will help you with this task: just in one click, you can specify a selection of a UI part with any specs inside multiple artboards.<figure><img alt="Clock icon" src="https://miro.medium.com/max/500/1*HqHLTHgTWLDhRJ5BAEcXCQ.png" width="680" height="323"></figure><h1 data-selectable-paragraph="">Use downtime on polishing a design system</h1>Sometimes you have downtime between tasks/projects, and the best way to spend this time is to improve and polish a design system. Believe me, the time you will spend on this will pay off during the creation of new features or assembling another prototype.I am constantly trying to reserve a couple of hours in my calendar throughout the week to make sure I can make incremental changes and improvements to a design system.<figure><img alt="Three UI elements: checkbox, radio button and add button" src="https://miro.medium.com/max/500/1*UFCEXiC6LDoSvQDMb9_S2Q.png" width="680" height="194"></figure><h1 data-selectable-paragraph="">Don’t focus on proper naming at the beginning</h1>During the creation of a UI, when you are just starting to make components for a design system, usually there is no time to think about proper component naming. I would highly suggest moving this step to a later phase when you have more components. Then you can think about proper paths, naming, and nesting.There are several good plugins that will help you to rename elements in batches: <a href="https://www.figma.com/community/plugin/731271836271143349/Rename-It" rel="noopener ugc nofollow" dir="ltr">Rename It</a>, <a href="https://www.figma.com/community/plugin/833716037588204076/Ultra-Renamer-2" rel="noopener ugc nofollow" dir="ltr">Ultra Renamer 2</a>, <a href="https://www.figma.com/community/plugin/772054917007268360/Regulator" rel="noopener ugc nofollow" dir="ltr">Regulator</a> or even the <a href="https://help.figma.com/hc/en-us/articles/360039958934-Rename-Layers" rel="noopener ugc nofollow" dir="ltr">out-of-the-box functionality</a> in Figma.<figure><img alt="" src="https://miro.medium.com/max/500/0*3MKs32fQ0iZZnAsx.png" width="94" height="40"><figcaption class="kg kh fz fx fy ki kj bf b bg bh dx" data-selectable-paragraph="" dir="ltr">The UX Collective donates US$1 for each article we publish. This story contributed to <a href="https://www.wcd.school/" class="ek ll" rel="noopener ugc nofollow" dir="ltr">World-Class Designer School</a>: a college-level, tuition-free design school focused on preparing young and talented African designers for the local and international digital product market. Build the design community you believe in.</figcaption></figure>

It’s always hard to be the only person in a company who is responsible for product design. Your day can be insanely busy because you deal with multiple things at the same time. You have to define a…

health

Health

It’s always hard to be the only person in a company who is responsible for product design. Your day can be insanely busy because you deal with multiple things at the same time. You have to define a high-level strategy for a product design, delivering features, collaborating with product people, supporting devs and QA’s, user interviews, and much more.

In addition, you always have to keep up with your craft. Figma is the main tool we use for all product-related features: all designs, explorations and brainstorming sessions live there.

Shortly afte r I joined Statflo, we started working on a newly revamped app. During the process, I needed a design system that would allow me to move quickly and create prototypes in a matter of several clicks.

Do not hesitate to use the open-source design systems available out there.

In the beginning, you do not need much. The majority of elements that you will be using are atomic components: buttons, dropdowns, forms, fonts, colours, etc. Initial styling of a system doesn’t matter- you can change styling afterward just in a couple of clicks.

The most important things you need to look for in third-party design systems are flexibility and proper component nesting.

If you decide to go ahead with your design system, you should focus on a couple of simple things first: colors, typography and essential components.

This strategy will allow you to create designs much quicker. For example, if you need to create an input field, you can begin with a default state and add others at a later stage.

For instance, if you’re unsure about what icon to use inside an input field, just create a 16x16 square, fill it with grey color and make it a component. This will allow you to move forward and will make it easier to update this icon in the future.

When you’re the only designer in a startup, sometimes there is no dedicated time to build a design system. If you want to save time, I suggest starting building UI and converting all elements into components as you go.

By doing so, you will save a lot of time, and it will help you decide what elements are the most crucial in the beginning.

Ideally, you should start with creating an element, and convert it into a component as your next step, so you won’t need to spend time on component replacement.

Sometimes when you are in rush you may forget to create a component, and end up duplicating several artboards with the same element. It’s a tedious job to go back and replace everything manually. There is a great plugin that can help to convert all regular elements into one component. The plugin is called <a href="https://dominate.design/">“Master” </a>created by Gleb Sabirzyanov.

Also, in order to convert all elements on different artboards, you have to select all of them. <a href="https://www.figma.com/community/plugin/735733267883397781/Similayer">The Similayer </a>plugin will help you with this task: just in one click, you can specify a selection of a UI part with any specs inside multiple artboards.

Use downtime on polishing a design system

Sometimes you have downtime between tasks/projects, and the best way to spend this time is to improve and polish a design system. Believe me, the time you will spend on this will pay off during the creation of new features or assembling another prototype.

I am constantly trying to reserve a couple of hours in my calendar throughout the week to make sure I can make incremental changes and improvements to a design system.

Don’t focus on proper naming at the beginning

During the creation of a UI, when you are just starting to make components for a design system, usually there is no time to think about proper component naming. I would highly suggest moving this step to a later phase when you have more components. Then you can think about proper paths, naming, and nesting.

There are several good plugins that will help you to rename elements in batches: <a href="https://www.figma.com/community/plugin/731271836271143349/Rename-It">Rename It </a>, <a href="https://www.figma.com/community/plugin/833716037588204076/Ultra-Renamer-2">Ultra Renamer 2 </a>, <a href="https://www.figma.com/community/plugin/772054917007268360/Regulator">Regulator </a>or even the <a href="https://help.figma.com/hc/en-us/articles/360039958934-Rename-Layers">out-of-the-box functionality </a>in Figma.

How to build a design system if you’re the only designer in startup

First idea

MYSELF

Second idea

A Cc's ideas are part of this journey:

Related collections

Similar ideas