Figma - as a single point of truth in the design

As we have built all the processes of development and implementation of design around a single tool.

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

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

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

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

For the designer

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

Created a layout → assembled an interactive prototype → transferred to the development - and all this for one link.

The process of creating a design has ceased to be “behind the seal”, it became public. The usual case in our work: the designer creates an interface, another task participant enters into the layout and leaves his advice in the form of a comment.

In Figma, it is convenient not only to maintain your layouts, use a common design system, but also interact with developers, testers and managers. When the product team saws a feature, it is very important not to produce unnecessary versions and state of the layouts in order not to slow down the whole team. Andrei Goranov, designer.

For manager

We have seven product managers and each one is a leader in their own direction. For their convenience, we organized the files in such a way that everyone has their own project in Figma : appointment to the doctor, diagnosis, telemedicine, etc. One link is enough for them to ensure that all developments in their tasks were at hand.

Telemedicine Project Example

Improvements they bring in the form of comments to the desired part of the layout. We jointly decided that we would not accept major changes anywhere: neither in protocols, nor in Jira , nor in messengers. The necessary designer is mentioned in the comments and a notification comes to him by mail.

Everything is stored online, no need to shake that you will not get access to the layout, working from another computer. I know for sure that improvements can be put only 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 had different ideas about layouts with designers. 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 they should follow and spent time on questioning.

Developers have only seen a specific layout in Zeplin.

In Figma, developers see the 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 to feel at home.

Horizontally transitions between screens, vertically - inside screens

Conveniently, all the layouts in one place and access from everyone, 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 paste it into the documentation. Irina Mukhina, tester.

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

When you get used to online services, like Figma , the previous tools seem to be something primitive and very distant. No file sharing, license issues, software installation, instead - just a link in the task description in Jira . To get the CSS style element is enough to make two clicks. Peter Dorozhkin, developer.

For marketer

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

Find the action that was done 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, slightly adjusted the shape and color - after all, everything is vector.

We are currently working on the illustration designer in Figma.

It is easy to explain to the designer where and what visual elements you need to change / remove / add. Instead of a thousand words, you can once show where and what to do. These comments can be returned by designers at a convenient time for them. Katya Fedyunina, marketer

And when the task is marketing, but directly concerns the product, the teamwork of designers from the two departments reaches a new level. One comes up with a visual concept, another tries it on the interface - all in one layout and at the same time!

the main idea

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