Developing design system. How to avoid unexpected routine.

Four simple things to remember and follow before design system development

If you are developing design systems, you probably learned that the sequence is important. When a component or symbol was created and you have multiplied it before it has been assigned with the necessary properties, the risk of a routine became possible.

Example: you’ve created the component from nested symbols inside it. If you forgot to specify resizing params / constraints right on time, then all the cloned ones are scaled incorrectly.

① Form a list of repeating elements

Identify and group all the repeating objects in exact layout, prototype or concept. Not just only buttons in the list. Labels, Icons, Inputs, Headings and so on. It’s worth adding backgrounds and even shadows params, if you want to build a sufficiently flexible system. Below you’ll learn the purpose of these actions.

Some of repeating components

② Determine all the possible states

Now start to form a list for a kind of elements where’s system response is possible, or user will be probably interacting with. If your mission requires to describe of even onhover states, I would recommend to keep this process later to the last stages of development, when all the components are visually known and then you can ask yourself “Which of them requires to be cloned for additional states?”

Few possible states for text inputs

③ Adjust constraints or resizing parameters

Get yourself a rule: ❝when I working on a component, I always keep in mind how it scales❞. Could you remember the example from which I started this post? The bottom line is that you need to set the constraints / resizing parameters immediately after you converted the frame into a component. Otherwise, you’ll stuck with routine in case you’ll have to adjust it manually for each element in the future.

Icons resizing params set to snap to the right

④ Accessible names came first, states — after

Got your component laid done and going to clone it for additional states? Excellent, but for the first apply an accessible name to it. Take care about yourself and devs team and use clear namings. Keep in mind that cloned component retains the name of the parent. If you prefer the orderliness, I expect your text field should sound like:

Text fields / Underlined / Default

Now the component can be safely cloned. Then detach the instance, apply visual necessary changes, and it’s only remains to edit at the end:

Text fields / Underlined / Active

⑤ Something for the dessert

No routine. My design process now engaged with design system and shown live on YouTube:

The bottom line ⤑ keep the sequence ♛

That’s all about the basics for today. No doubts, there are many more nuances in design systems development, perhaps I’ll describe about later. Please, share in comments your own methods / steps when you starting design the system from scratch. Cheers.

If you looking for high-grade design system for your product, then try Material Design System kit. It contains more than 240+ material-like components and boosts your workflow in Figma.

Thanks for reading the article,

Roman

Design systems UI architect • Setproduct.com

PS: an offer for readers, use the code MEDIUM2018 to get -30% discount. Direct purchase at Gumroad with -30% OFF