Say Hello!
Send us your questions or customization on demand requests
We used to reply ASAP

Material design prototyping

Advantages of design system components, core and architecture when starting a new project
Let's imagine a simple and effective design system core that will allow to generate new sections of the product or make changes in the future more rapidly.

Nowadays most of designers' tools allow you to use the relationship between the objects, simplifying the customization of individual modules or entire screens to group these modules in the component libraries and give access to all authorized persons.

Putting the proper method for the development of all design modules, you will get unlimited responsivity for all kinds of devices and screen sizes. In terms of the principles of Atomic design let's begin from atoms and move further to more complicated components.

Fundamental principles

Design tool to use

Figma bribes by its proximity to the most common native design tools. It works under Windows and the developer's handoff looks promising.

This extension is especially made for devs. They can open the source in the browser, see all the specs and can grab the code of any object in CSS, XML or Swift. No additional docs needed, no routine.

The collaboration of devs and designers has become quite a bit more efficient. Design implementation process is boosted by 2-4 times.
The specific algorithm of design systems development will be showcased as the essence of this article. The library of visual components almost at your service. Full of design blocks whose properties are are propagated to related elements. You changed it there and it changed everywhere within a click.

Basic elements

Now start with the most simple elements. Backgrounds, shadows, icons, headers H1, H2, H3 and further. Any simple elements that are a part of any users' interface and from which it will be possible to make more complicated element in the future.

It's important to have the elements named clearly and accessible. This library possible will be used by other designers and developers. A thinking developer starts to make things convenient not only for users, but for colleagues as well.

Further, from each element I create the component. Figma gives the ability to create relationships between the same type interface units or entire screens. This is the mission of components. If we give such a property, to, for example, a paragraph of text and use it on certain interface screens, then it`s enough just to edit the master component for the changes to be propagated to all screens.

Multi-piece elements

Now more complex modules come on the scene. It may consist of two or more simple elements. For example, a button. It consists of at least a background (most often a rectangle) and labels. Or as a form to enter text (input). In its composition it has a background, a header, and a placeholder. I`m limitibg myself to only one "Ghost" button. It will consist of a rectangle without flood and an H3 Header component.

If several different buttons or states (primary, secondary, alternative, disabled, etc) are used in a product, they are placed on multiple screens and if there is a need to change the font, I just need to make changes in one place.Changing the font for the component-word of the H3 Header, I will automatically make these changes for the entire library and all the screens of the interface. That is why it is important to put the correct visual development algorithm at the very beginning.

And here comes some controversial specifics of the tool if you make changes locally in the necessary category of buttons, Figma considers them a priority. And trying to change the component globally by the next step, you don`t get the result.

Complicated modules

Typical item card, as the example, consists of the components: H2 (value), H3 (item name), Paragraph (short description), Ghost BTN (adding button), icons, background and a photo. The whole structure is listed to the left on the screen above. The width of the card is chosen so that on the smartphone screen it fits two in a row. It should be turned into a component by analogy

Such a card can be called modular, since it contains components of the first two levels. The entire product design may have a modular structure, as it`s made of the components similar in structure. Modularity promotes order and pleases the developers, because acting on the system, it is better to take a ready mini-card from the library and pave the screen with it. You can change the aspect ratio, the height, width, fonts. Simply put: you don't have to clone many different master cards in the library where you will be lost with the development of your product. Figma allows you to make small changes and keep this master link for quick editing.

The hierarchy

The bottom line

Design system in Figma is the possibility to use the library created on the above described principles within the organization without additional tools, plug-ins or add-ons. All you need to do is add all of your components into the "Team Library" and give a link to all the designers and developers in the team. Designers assemble new modules and entire screens of the components of such team design library and the developers instantly get updates, export all the elements into the code and implement in production.

Now the average designer can be attributed to developers too. Because now they have a more effective environment where they are already comfortable to act systematically and algorithmically, to lay the necessary architecture, to bring the visual development to certain principles.

Purchase Material Design System

This product is absolutely must-have for

UI, UX, Product designers
Huge amount of predesigned modules will help you to avoid typical routine

Web devs, Software engineers
Will let you understand and learn the design process deeply and enhance prototyping skills

PMs, CTOs, IT Entrepreneurs
Use the core of this design system and equip your devs team to save sprint time

Components overview

Explore some of 240 components from material design system