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.
Accelerate design and development time by up to 50%
Material Design System for Figma consists exactly of 512 material UI components and 1171 material icons.
- Unique architecture for quick customization
- Equipped with simple & clear documentation
- Dedicated to fit desktop & mobile applications
- Made with material design guidelines following
- Uses Figma ‘Instance’ features at maximum
- Supports Figma web API for real-time integration
- Customers support 7 days per week!
Learn more → http://setproduct.com/material
If you still in doubts, I recommend you to watch the overview 🎥
① 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.
② 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?”
③ 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.
④ 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.
What’s next? Quickstart your material design project with this Figma library
Created with Material prototyping system 🔨 for Figma
❶ Explore the system → http://setproduct.com/material
❷ Components overview → http://setproduct.com/material/components
❸ More videos → http://setproduct.com/material/videos
❹ Purchase & download → http://setproduct.com/material/download
❺ 1000+ material icons → http://setproduct.com/material/icons_pro
