My rules of solid design system

Components and UI architecture in Figma

In this article I`m going to show you a simple and effective front-end architecture that will help to generate new sections of the product or make changes in the future more effectively. Now the approach to the development of the interface visual part within the organization / team has changed in a better way. Modern visual development tools allow you to use the relationship between the elements, simplifying the customization of individual modules or entire screens to group these modules in the component libraries and give access to all authorized persons. Such principles can be called a design language, design system or product design. Just as you wish. The essence remains the same: having put the right algorithm for the development of all graphical modules, you get limitless scalability for all types of devices and screen resolutions. According to the principles of “Atomic design” I’ll start with atoms and move on to more complex components. I`ll work in Figma and will demonstrate that the Sketch has a competitor, which should not be underestimated.

The second version of Figma bribed me by its proximity to the Sketch, work under misdeem Windows and the Developer’s handoff was of particular interest. This extension of the editor, is especially designed for developers. Developers now open the source in the browser, see all the indents and can pick up the code of any element in CSS, XML or Swift Android. The collaboration of designers and developers has become quite a bit more efficient. Performance integration of any design is accelerated by 2–4 times. I checked it personally. Minimum edits; there are no bugs with indents, fonts and dimensions. Everything is generated by the program. The need to write some spexies in the documents is in the past. And if you’re an independent designer, working with multiple clients, it is now much easier to establish effective communication with development Department in your customer`s company.

Accelerate design and development time by up to 50%

Material Design System for Figma

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 🎥

Let’s move on to practice. The essence of this article is to demonstrate the specific algorithm of visual development. Simply put, to design the interface so that it can be customize/edited for the minimum number of actions. The result is a library of components, whose properties are propagated to related elements. You changed it there and it changed everywhere. And developers don’t even need to press “refresh” — they see changes in real time on their screens. As I said above, any design language “words” form “phrases”, “phrases” built “sentence” which a whole chapter is made of. Abstractly speaking, we need an opportunity to quickly replace any “word” to another one in any chapter.

Words. Basic elements

I’ll start with the most simple elements. “Words” include headers H1,H2,H3 and further, text paragraph, icons. Any simple elements that are a part of any ui kit and from which it will be possible to make a “phrase” in the future. I try to get accustomed to the order, so I will follow the elements naming. This is particularly important if library will be used by other designers and developers. A good designer starts to make things convenient not only for users, but for colleagues as well.

Further, from each element I create so-called “component” (Ctrl-Alt-K). Component in the Figma is the ability to create relationships between the same type interface units or entire screens. If I give such a property, to, for example, a paragraph of text and use it on certain interface screens (copy > paste), then it`s enough just to edit the master component for the changes to be propagated to all screens. The use of such a hierarchy is the essence of this article. Figma paints all the “components” in the left column purple:

Phrases. Multi-piece elements.

“Phrase” is a metaphor for more complex modules, which 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.

Why? 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.

To visualize the hierarchy, I will draw the more complex modules to the right. The result will be that moving from left to right we move from simple to more complex things. From “words” to a whole “chapter”.

As you can see in the picture above, the button is highlighted, converted into component; and to the left there is its composition. Figma allows you to put a component inside another one, creating multiple levels of hierarchy and each level can have its own branches. It all depends on the complexity of the design modules for the product. For example, if the library you are using 5 different types of buttons with the same text style H3 Header, then you can make changes globally as well as locally. For global changes, component H3 to 1st level is edited, and for local ones we edit the nested component already inside the specific button and get the changes for those screens where the button is present. For clarity, I recorded a video: first, I globally change labels of buttons, and then locally with the necessary type of buttons.

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.

Sentences. From phrases to action.

It is time to assemble something more complicated from the “phrases” and “words”. I will use components of the 1st and 2nd levels to make a “sentence” — the next 3rd level. Lately I have a lot of experience in e-commerce, so let`s look at this step on the example of Windows mobile online store product mini-card.

The mini-card 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. By analogy it should be turned into a component to write our first “chapter.”

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.

Chapter consisting of sentences.

We`ve come to the most interesting part. In the metaphor I began with, “chapter” is the level where you can have independent and full screens of the app.

So you get even more — a stream of changes for all devices. By the way, just recently, all components were conveniently made in a separate section on the left, which you can get into via the tabs at the bottom. You can add modules using drag’n’drop. Before this had much to suffer in the search for the components scattered about the canvas, when there are many screens.

Many screens of the same type can be joined into one “chapter”, for example, form-factors. Figma allows you to put constraints quickly (to set adaptivity), thanks to which the mini-card can be enlarged to the tablet or desktop version without losing the link to the master-component. Moreover, developers clearly understand adaptivity of any module. There just aren’t any questions to arise.

Result

As a result of applying such a design management, we are able to quickly and efficiently implement changes in a set of screens:

It is worth saying that the use of only these features will not make you a good designer, but will demonstrate your competent approach to design management. It will now be more efficient to solve everyday problems and so the product development will definitely accelerate. Figma has a very clever mass-select, almost perfect snap and one of the most advanced pen tool. And for optimal teamwork, the use of this architecture is a necessity.

I am sure that among the readers there are those for whom this approach is already standard. Today many of the concepts and principles seem quite natural, although yesterday we said “Wow!”. I think that final wow-factor in the case of 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. Success!

Conclusion

Recent years have changed the view of the team approach in the interface development. The hype over the design systems played its role. When literally every week another IT giant releases its design language, its own rules and principles, it is clear that a design tool will inevitably stand on the same footing.

Now the developers can be attributed to designers 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. Although we are still far from being able to involve every designer into the coding.

Designers need to code, but they do not want” It is absolutely normal that the designer doesn’t like to write code by hand. We are mainly visuals. Techies are very rare among designers. And all that is required to push us to the coding is to provide a different approach to programming. We need a visual environment where cycles, conditions, calculations and animations would be created by simply dragging objects in the correct sequence.

It`s noticeable that the market of designer tools is long moving in one direction. Today there are enough alternatives to Sketch which once stood on top of a mountain. Today there are plenty to choose from, you do not have to change your preferences to work in a more advanced environment. Redistribution of this market is coming (or has already come). Huge companies with solid investment are competing. Figma has closed another round of $17 million this winter. And in January, 2018 InvisionApp will release their own Sketch, though judging by the announcement, their “Studio” promises designers nothing new. But for us this race is very useful. So sooner or later there will be even more comfortable work flow, but the downside is the need to more often adapt and move from instrument to instrument.

I bet that the market will be broken by the one to release in one product a combination of Webflow + Sketch. The problem is not solved, the designer must see the typography such as in the browser, but not perfectly rendered in any graphic editor. Especially when the font design is on top.


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