Start working with a design system

Tip for my mentee 🫶 All given examples are applicable in Figma.

Start working with elements and small components like buttons, text fields, icons, etc.

Decide what suits more to your project:

– creating your own library from nothing;

– using some ready made libraries or UI kits and adapting them to your needs;

– finding out if there is a design system in your company. Then you can adjust or redesign it.

Define essential elements

For instance, if you are designing a login form, for sure you will need buttons, text fields, maybe links to other pages and supportive icons. So, these elements and small components are going to be your essentials in the library at the first place.

Usually, you start with key pages of a project. Try to reuse existing components. Add new once only if needed. Place new components next to the existing, so you could see what states you will need, do they have a similar style or not, plus also check, maybe you have this component already (it happens sometimes 😁)

Review your library

After collecting and editing first components for your first several / essential pages, take a look through your library. Check all states of your buttons, how do they interact on your prototypes. Please, remember to check out all components’ interactions via colorblindness simulations to be more inclusive and color independent. I love Chrome extension “Colorblindly”.

Don’t forget to add at least color and fonts styles to your Figma file!

Expand your components, their states and interactions

Use variables

For instance, you can add an icon variable into a button component. Then you don’t need to duplicate the same button + an icon, you will adjust its properties right on the work frame. Also, you can add a text variable and then it would be possible to adjust the button as icon only.

Adjust components’ interactions

One-type interactive components should work the same way. It would be weird if one modal window or panel opened in one way, but another way in a different way. Consistent work of one-type components makes users feel more comfy when working with an application. Probably because they know what to expect clicking on the similar component.

Plus you can add grids, variables and other styles to manage your mockup in a better way.

Adapt to different sizes

Make easily resizable components. It may be difficult to adjust them for different screen sizes. To simplify this work you may play around Frame and Constraints properties. Make sure if you change component’s properties they look good for all of screen types that needed.

Describe what is going on

Don’t forget to describe how things like animations, transitions, hint & other stuff should work! If you have prototyped components states, it is better to add some link to the description right in the library.

Evolve

Applying the library to new services use the same principles from the beginning of this tip 🔝

Define essential elements

Review your library

Adjust or expand components states

Adapt to different sizes

Describe what is going on

If you have several web sites or applications in the company in the very beginning, do some research of content they may contain. It is not easy but from my experience, if different teams don’t align with each other work inside of one big project or company, it leads to a mess anyway.

xoxo