My rules for good design of the system. Components and architecture of the interface in Figma
In this article I will demonstrate a simple and effective front-end architecture that will help to generate new sections of the product or make changes in the future. Now the approach to the development of the visual part of the interface 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 library and give access to all authorized. Such principles can be called a design language, the design system or product design. As you wish. The essence remains the same: putting the right algorithm for the development of all graphical modules, you get limitless scalability for all types of devices and screen resolutions. The principles Atomic design I'll start with atoms and move on to more complex components. Will work in Figma and show that the Sketch has a competitor, which should not be underestimated.
So, modern tools makes the designer's work already in full development. The concept design of the system means not only a set of ui kit with conceptual rules and beautiful illustrations. This is primarily a visual system architecture, organized in a certain way. It is closely correlated with the concept of product design, since the design system may encompass multiple products within a single organization, feeding them to the final consumer with the brand “design language”. Will assume that a competent reader of the advantages of this approach are known for a long time.
Once there is the concept of “design language”, this means it can “talk”. And even better — to write. The words form a phrase. Of the phrases is a sentence. And of the suggestions are already building a head. This is a different metaphor for a Atomic design and I like it more. When in July of this year came Figma 2.0, almost immediately it became clear that this tool is perfect for writing such language. Or system if you want. In small companies have the opportunity to organize a competent design management for multiple products and not to go beyond a single graphical editor without additional add-ins/plugins. However, and larger companies too, they're just so mired in the wilds of multiinstrumentalists that they are now extremely difficult to rebuild. I mean the fact that only Sketch'eat them is not enough for team play. Here and Craft, InvisionApp, and Marvel, and Zepplin and many other expletives, which you probably have not heard.
The second version of Figma I bribed proximity to the Sketch, work under
Let's move on to practice. The essence this publication is to demonstrate the specific algorithm of visual development. Simply put, to design the interface so that it can be to customize/edit for the minimum number of actions. The result is a library of components, whose properties are propagated to related elements. Changed there has 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 of “words” formed “sentence”, “sentences” built “the proposal”, and is a whole Chapter. Abstractly speaking, we need to quickly replace one head of any “word” to another.
Words. Basic elements
I'll start with the most simple elements. To “words” include headers H1, H2, H3, and further, paragraph text, icons. Any simple elements that are a part of any ui kit and from which it will be possible in the future to make a “phrase”. I try to accustom themselves to the order, so I will follow the naming of elements. This is particularly important if library will be used by other designers and developers. A good designer begins to make convenient not only for users, but also colleagues.
Further, from each item I create so-called “component” (Ctrl-Alt-K). Component in the Figma is the ability to create relationships between units of the same type of interface or entire sections. If I give such a property, for example a paragraph of text and use it on certain screens of the user interface (copy > paste), then I need to edit the master component changes to be propagated to all screens. The use of such a hierarchy is the essence of this article. Figma wears purple all the “components” in the left column:
Phrase. Multimaterial components
“Phrase” is a metaphor for more complex modules, which may consist of two or more simple elements. For example, a button. At least it consists of a background (most often a rectangle) and labels (label). Or form to enter text (input). In its composition and background, and header, and placeholder. I now limit myself to only one “Ghost” button. It will consist of a rectangle with no fill and a component H3 Header.
Why? If the product is used with several different buttons or States (primary, secondary, alternative, disabled, etc), they are placed on multiple screens and there is a need to change the font, I need to make changes only in one place. Changing the font for the component is"words" H3 Header I will automatically propagate these changes to the entire library, and on all screens of the interface. That is why it is important to lay the correct algorithm visual development at the very beginning.
To visualize the hierarchy the more complex modules I will draw to the right. The result will be that moving from left to right we move from simple to more complex. From “words” to a “Chapter”.
As you can see in the picture above, the button is highlighted, converted into a component; and turning to the left is its composition. The figma allows you to put a component inside another, 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 generated product. For example, if the library you are using 5 different types of buttons with the same component H3 of the Header, then you can make changes globally as well as locally. For global changes, edited 1 H3-m level, and for local, editable nested component is 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 have certain types.
And here POPs up some controversial specifics of a tool if you make changes locally in the right category buttons, Figma considers them a priority. And trying to change the component globally, the next step, you don't get results.
Suggestions. Phrases to business.
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 an “offer” — the next 3rd level. Lately I have a lot of experience in e-commerce, so consider this step on the example mini-card for Windows mobile online store.
Mini card consists of the components: H2 (value), H3 (item name), the Paragraph (short description), Ghost BTN (button add), icons, background and photos. The whole structure listed to the left on the screen above. The width of the card chosen in such a way that on the smartphone screen fits two in a row. By analogy it should be turned into a component to write our first “Chapter”.
This card can be called modular, since it contains components of the first two levels. The entire design of a product may have a modular structure, since going out is similar in structure components. Modularity promotes order and pleases the developers, because acting on the system is better to take from the library ready mini-card and pave her screen. You can change the aspect ratio, the height, width, fonts finally. Simply put: you don't have in the library to clone many different master cards in which you will be lost with the development of your product. The figma allows you to make small changes and keep this master link for quick editing.
Head consisting of sentences
We approached to the most interesting. In the metaphor with which I began, “head” is the level where you can have independent and full screens.
In the “head” you can generalize a lot of similar screens, such as different form factors. The figma allows you to quickly set constraints (set to agility), so mini-card can be increased for the tablet or desktop version without losing the connection with the master component. Plus developers understand the adaptability of any module. Issues simply do not arise.
So you get even more — a stream of changes for all devices. By the way, just recently, all components are conveniently made in a separate section on the left, which you can get into via the tabs at the bottom. Add modules using drag'n'drop. Before this had much to suffer in the search for scattered about the canvas component, when many screens.
Result
the result of applying such a design management we are able to quickly and efficiently implement changes in the 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. To solve everyday problems will now be more efficient, and so the product development will definitely accelerate. The Figma is 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, it is possible to use created on the above described principles of the library within the organization without additional tools, plug-ins or add-ons. All you need to do is add all of your components in the “library Team” 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 of the library, and the developers instantly get updates, export all the elements in the code and implement in production. Success!
Opinion
Recent years has changed the view of the team approach in the development of interfaces. The hype over the design of the system played a role. When literally every week another Western 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 in which they are already comfortable to act systematically and algorithmica, to lay the necessary architecture to bring the visual development of certain principles. Although we are still far from being able to involve every designer in the coding.
“Designers need to code, but they don't want”. It is absolutely normal that the designer doesn't like to write code by hand. We mainly visuals. Techies among the designers very little. And all that is required to push us to the coding is to provide a different approach to programming. We need a visual environment in which cycles, conditions, calculations, and animations would be created by simply dragging objects in the correct sequence.
Noticeably, the market of designer tools long been moving in the same direction. Already enough alternatives to Sketch once stood on top of a mountain. Today there are plenty to choose from, you do not have to change their preferences to work in a more advanced environment. Approaching (and perhaps already is) the redistribution of this market. Compete with huge companies with solid injections. Figma has closed another round of $17 million this winter. And in January, 2018 InvisionApp have to release your Sketch; however, according to the announcement, their “Studio” promises designers is nothing new. However, we have this game on hand. So sooner or later there will be even more convenient workflow, but the downside is often the need to adapt and move from instrument to instrument.
I bet that the market will blow up the first one to release in a single instrument a combination of Webflow + Sketch. The problem is not solved, the designer must see the typography such as in the browser, but not perfectly ofrendering in any graphic editor. Especially when the ball is ruled by the font design.
From December I am open to suggestions. More than others attract innovative directions. I would like to get into a strong team that monitors the Western trends to grow and develop further. Like the custom job definitions. kamushken@gmail.com
by the Way, what is your ideal design tool?
PS: the Source code of the prototype // BECAME. Thank hardipanel, continue to be creative right in your browser (requires login)
Комментарии
Отправить комментарий