Figma - as a single point of truth in design

How we built all the processes of development and implementation of design around one tool.

Hello! I am Vanya Solovyov , design director at DocDoc (part of the Sberbank group). Today is the Tim-Tim column, in which I will describe how we get along with other teams.

In 2017, our interfaces were created in Sketch , prototypes were assembled in Marvel , and development was passed through Zeplin . Everything was standard for the time until Figma appeared .

This article is not about comparing tools, such articles have already been written in abundance. She is about how in our company Figma helped:

• design to become public, and not the privilege of one designer;
• organize the whole process of design work without unnecessary documentation;
• Get rid of unnecessary tools and resources to support them.

For the designer

The designer no longer stores layouts locally, as files. It does not exchange screenshots of interfaces with the manager and does not send the necessary layouts to other designers. The layout has a link and is available to all participants in the process.

Created a mock-up → assembled an interactive prototype → handed it over to development - and all this by one link.

The process of creating the design ceased to go “beyond the seven seals”, it became public. A common case in our work: the designer creates an interface, another participant in the task enters the layout and leaves his advice in the form of a comment.

In Figma, it’s convenient not only to maintain your layouts, to use a common design system, but also to interact with developers, testers and managers. When a product team saws a feature, it is very important not to produce unnecessary versions and layout states so as not to slow down the entire team. Andrey Goranov, designer.

For manager

We have seven product managers and each is a leader in their own area. For their convenience, we organized the files in such a way that everyone has their own project in Figma : an appointment with a doctor, diagnostics, telemedicine, etc. One link is enough for them so that all the developments on their tasks are at hand.

Telemedicine Project Example

They bring improvements in the form of comments to the necessary part of the layout. We jointly decided that we won’t accept big edits anywhere: neither in the protocols, nor in Jira , nor in the messengers. In the commentary, the necessary designer is mentioned and a notification is sent to him by mail.

Everything is stored online, do not shake that you will not get access to the layout, working from another computer. I know for sure that improvements can only be put in the form of a comment in the layout and they will be made. It is very cool. In addition, the comment history allows you to restore events. Grisha Garshin, manager

For developer and tester

Previously, when we passed layouts to developers through Zeplin , they and designers had a different idea about layouts. Designers saw a complete picture of transitions in Sketch , and developers only a specific screen in Zeplin . The guys did not always understand which screen to follow, and spent time questioning.

Developers only saw a specific layout in Zeplin

In Figma, developers see the exact same picture as the designers. For unity, we adhere to such an organization of layouts: horizontally transitions between screens, vertically - inside screens. This helped the guys feel “at home” in the mock-ups.

Horizontal transitions between screens, vertical - inside screens

It’s convenient that all the layouts are in one place and everyone has access, it’s comfortable to do a review - there are comments. Layouts are always relevant and in the same form for all participants, it is convenient that separate layouts for iOS and Android . Another cool thing is that you can make a link to a specific screen, and insert it into the documentation. Irina Mukhina, tester.

We use the same variable names in colors and styles, this helps not to produce unnecessary entities in the layout of the interface. Developers can independently unload any element in the layout, without wasting time asking the designer to do it. For example, you can get the svg code for the icon or export it in the desired format.

When you get used to online services like Figma , the previous tools seem primitive and very distant. No file hosting, license problems, software installation, instead - just a link to the task description in Jira . To get the CSS styles of an element, two clicks are enough. Peter Dorozhkin, developer.

For a marketer

We also do web marketing tasks in Figma . They have their own project, where all the layouts are stored. So marketing designers are easier to adhere to our corporate identity - all the elements are in Figma .

Find the stock you did in the fall of 2018? Pf, easy!

It works well and vice versa: the marketing designer drew illustrations, transferred them to Figma . The product designer took them to his interface and, if necessary, adjusted the shape and color a little - because everything is vectorial.

We are currently working on an illustration designer in Figma.

It is easy to explain to the designer where and what visual elements need to be changed / removed / added. Instead of a thousand words, you can show once where and what needs to be done. Designers can come back to these comments at any time convenient for them. Katya Fedyunina, marketer

And when the marketing task, but relates directly to the product, the teamwork of designers from two departments goes to a new level. One comes up with a visual concept, the other tries on an interface - all in one layout and at one time!

the main idea

Design is the result of the work of the team, not just one person. Strive to ensure that each participant can interact with him comfortably. Get away from local tools and look for those that connect you and your processes.