How to build a design system if you’re the only designer in a startup
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.
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.
Several ones you can start with:
Free: Ant Design Open Source, Lexicon DSL
Paid: Tetrisly, Venus Design System, 73px
Basic components, colors, and typography
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.
Always start with a component
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.
Use “Master” plugin for Figma
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 “Master” created by Gleb Sabirzyanov.
Also, in order to convert all elements on different artboards, you have to select all of them. The Similayer 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: Rename It, Ultra Renamer 2, Regulator or even the out-of-the-box functionality in Figma.
