Я бог продуктивности: пять шагов, чтобы познать радость быстрых правок в ките Figma

Перестроили процесс работы команды с атомарным китом в Figma: изменения элементов — во всех экранах или локально — занимают несколько минут. В статье — как было и как стало, а также файл-пример для тренировки.

Сами породили проблему. У нас детальное проектирование: мы не рисуем исключительно основные экраны в авторизации — мы рисуем 70 и более экранов. Они содержат состояния всех элементов, все тексты всех возможных ошибок по всем каналам (push, SMS, email и так далее), все мелкие негативные и альтернативные сценарии, которые могут случиться с пользователем.

Каждый раз, когда требовались правки в элементы, изменения приходилось вносить во все экраны и параллельно отлавливать возможные ошибки. Процесс превращался в рутинную продолжительную драму. А иногда и не рутинную: два дня тщательно вносишь правки по просьбе клиента, а при проверке он находит то единственное место, где ты пропустил.

Ещё два года назад у нас в Figma был хаос. Из-за нашего подхода к проектированию дизайнеры захлебывались в правках, страдали от долгостроя, убивали день или два на внесение изменений в элементы и тратили в 2–3 раза больше времени на корректировки, нежели на создание прототипа.

Момент, когда приходили правки​

В прошлом году жизнь изменилась. Мы перестроили процесс работы команды с атомарным китом и научились вносить правки сразу по всему дизайну или локально. Вместо 1–2 дней — минуты, вместо десятков кликов — 1–2–3. «О господи, какой прекрасный кит я придумал! Я бог продуктивности. Я гуру фигмы», — кайф пришёл на смену боли.

Атомарный дизайн на практике

За основу взяли принципы атомарного дизайна и ввели специальные организмы, которые разрешают относиться к тексту как к любому другому элементу дизайна и изменять.

Наша дизайнерская вселенная населена пятью сущностями, две из них — наша находка.

  • Атомы. Базовые элементы-одноклеточные. Отвечают за стиль и используются много раз. Атомом бывает фигура или иконка.

  • Молекулы. Сумма атомов, основа дизайна: это целостный элемент, например кнопка, инпут, меню или тапбар. Отвечает за разметку (расстояния).
  • Организмы. Это состояния молекулы, которые передают цвет и отображение атомов. Например, состояния кнопки: при наведении или при нажатии.
  • Специальные организмы. Отвечают за текст, иконки и конкретный текст внутри сценария.
  • Общие организмы. Это специальные организмы, которые используются в неизменном виде в нескольких сценариях.

Выглядит так:

Такой формат помогает выполнять задачи быстрее — переключаться между состояниями элементов и находить нужные. Чтобы это заработало, нужно определенным образом организовать пространство внутри Figma.

Как это сделать — объясняем и показываем на примерах.

1. Как создавать атомы

Атом, элемент-одноклеточное, отвечают за стиль: закругление, прозрачность, тень и другие детали. Они нужны, чтобы быстро менять элементы стиля во всем дизайне.

Создание атома происходит в три клика.

Изменения — примерно так же.

Важно! Атом можно покрасить в любой цвет, поэтому не нужно тратить время и применять к нему цветовые стили: лучше сделать это на этапе создания организмов.

2. Как создавать молекулы

Молекула — группа двух или более атомов. Она содержит те атомы, которые нужны для работы элемента: например, кнопка состоит из атома прямоугольника, текста, иконки, а карточка товара — это прямоугольник, текстовые контейнеры (например, «Название товара», «Описание товара»), изображение.

Молекула отвечает за разметку: на каком расстоянии находятся атомы друг от друга, на каком — от её внешних границ. Её можно использовать, когда нужно что-то подвинуть или при добавлении нового элемента.

Чтобы собрать молекулу, поместите все атомы на Frame, выделите и нажмите Command+K. Затем разместите, как нужно:

И как можно её изменить:

Важно! При создании молекулы настройте констрейны, чтобы дизайн был адаптивным.

3. Как создавать организмы

Организм — это состояние молекулы: например, кнопка может быть доступна или недоступна. В организмах мы чаще всего редактируем цвета и иконки, иногда текст — если он не меняется нигде и никогда (например, в тап-баре всего приложения).

Чтобы создать организм, нужно взять копию молекулы, включить или выключить нужные атомы, а после придать им цвет.

Теперь покажем, как править организмы:

Важно!

  • После создания организма сделайте его компонентом с помощью Command+K. Это позволит быстро переключать состояния элементов.
  • Создавайте организмы только из базовой молекулы: если вы используете другие организмы, появится ненужная связь одного состояния с другим.

Как неправильно:

Как правильно:

4. Как создавать специальные организмы

Мы придумали специальные организмы, чтобы быстро править тексты и иконки внутри сценариев. Они отвечают за конкретный текст внутри сценария. Например, нам требуются правки в сценарий входа — заменить с «Подтвердить» на «Войти».

Иногда в специальных организмах мы редактируем иконки: если на инпуте с паролем логичнее поставить глазик вместо крестика. Раньше пришлось бы менять вручную во всем дизайн-проекте, а потом исправлять в каждом экране.

Создаём специальный организм:

Показываем, как изменения работают только внутри одного организма и не влияют на другие:

Важно! Создавать специальные организмы нужно только из обычных организмов, чтобы избежать лишней вложенности.

5. Как создать общий организм

Берём специальный организм, используем его в другом сценарии без изменений — получаем общий организм. Создавать его отдельно или специально не нужно. Например, инпут «Телефон» может использоваться как логин в приложении, тогда он появится сразу в двух сценариях — «Вход» и «Смена логина».

Для подобных организмов отдельный признак необходим, чтобы не забывать: изменение распространяется не на один сценарий, а на все, где он использован.

Общими организмами могут быть любые элементы: как инпуты, так и целые страницы.

Важно! Если изменения общего организма не подходят для одного из сценариев, нужно создать другой — чтобы управлять изменениями локально.

Разность организмов

Сначала создаётся просто организм, никак не классифицируется.

Когда он попадает в какой-то сценарий с определённым текстом — станет специальным.

Если обычный или специальный организм используется в неизменном виде более чем в одном сценарии, он становится общим.

Как работает наш кит: четыре кейса

1. Молекула

Задача:

На ревью старший дизайнер попросил увеличить расстояние между текстом и левым краем инпута: вместо 20px сделать 25px.

Решение:

Нам нужно изменить расстояние, то есть изменить расположение атомов: это про разметку. За неё отвечают молекулы. Идём в неё, выбираем все текстовые слои, вносим правку одним нажатием: потратили 10 секунд и расстояние поменялось во всех инпутах сразу.

2. Организм

Задача:

После UX-теста мы поняли, что серые плейсхолдеры плохо видят более 80% пользователей. И нужно было изменить цвет в определённом состоянии элемента.

Решение:

За состояния отвечают организмы, поэтому зашли в организм «Инпут дефолт» и везде поменяли цвет плейсхолдера на более тёмный.

3. Специальный организм

Задача:

UX-редактор сказал изменить текст инпута Key Word на Password, потому что так привычнее.

Решение:

За локальным изменением пошли в специальный организм. Правка названия инпута заняла несколько секунд. Но без специального организма пришлось бы использовать плагин или проходиться по всему сценарию, заходить в каждый экран и менять название инпута.

4. И снова специальный организм

Для быстрого изменения разметки во всех экранах сценария мы превращаем целую страницу в специальный организм. Показываем на примере сценария авторизации в приложении.

Задача:

Старший дизайнер заметил, что отступы между инпутами логина и пароля слишком большие/маленькие и с ними нужно ещё поработать.

Решение:

Меняем расстояния между инпутами в компоненте авторизации — корректировка происходит на всём сценарии.

Больше не больно: четыре правила быстрых правок

  1. Если что-то используется больше одного раза — делай компоненты волшебными кнопками Command+K.
  2. Если нужно поправить разметку — иди в молекулу.
  3. Если нужно поменять цвет атома или скрыть его в конкретном состоянии элемента — иди в организм.
  4. Если нужно исправить текст внутри сценария — иди в специальный организм (только вспомни, использовался ли он и в других сценариях, поскольку изменение затронет и их).

И напоследок: практикум

Мы сделали тренировочный файл в Figma: продублируйте его себе в Drafts, а потом двигайте, проверяйте, изучайте.

0
29 комментариев
Написать комментарий...
Artem Latynof

Вы пару лет проспали.. Чую в след году выйдет статья про auto-layout)

Ответить
Развернуть ветку
Polina Tsybizova

Понимаю, что большинство дизайнеров сразу рождаются мастер-джедаями Figma)), но уверена, что любой личный опыт помогает начинающим командам систематизировать свою работу и двигаться быстрее и продуктивнее. В статье именно практический опыт, а не претензия на уникальность.

Ответить
Развернуть ветку
Artem Latynof

Следить за возможностями своего рабочего инструмента - это как чистить зубы.
Вопрос к вашим дизам и их руководителю..

Ответить
Развернуть ветку
Yury

А то и больше. Статья про использование Atomic Design вышла через ~ 7(!) лет после одноименной книги Бена Фроста. 

Ответить
Развернуть ветку
Ilya Sh

Учитывая что стили были придуманы еще раньше и тот же Бен рассказывал пещерным людям на пальцах про модули которым лет и лет 

Ответить
Развернуть ветку
Yury

Ну Atomic Design появился во время. В начале 10-х стали появляться web applications и responsive design (с CSS3 будем считать). Фронтенд начал усложняться и нужно было это все как то эффективно организовывать. Хотя понятно, что идеи модуляризации кода в существуют очень давно

Ответить
Развернуть ветку
Anatolii Atamanov

*Брэда Фроста

Ответить
Развернуть ветку
Агент Моссада

даже больше. очень много вопросов вызывают дизайнеры, которые пришли к этому лишь недавно. как они работали раньше?

Ответить
Развернуть ветку
Виталий Шмелев

Фотошоп?

Ответить
Развернуть ветку
Karzec

Хуже, недавно хотели прислать макет в Corel

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Artem Petrenkov

PowerPoint хотя бы в каком-то смысле векторный. Плюс у него давным-давно есть поддержка мастер-страниц, что, несомненно, было преимуществом.

Ответить
Развернуть ветку
Ivan Matveev

поверпойнт и кейнот именно что векторные редакторы, которые приспособили для топменеджерских нужд

Ответить
Развернуть ветку
Natalya Sturza

Всем спасибо за комменты для охвата! Мы не претендуем на новизну и уникальность  — некоторыми приёмами из статьи пользуются профи. Некоторые из них наши. Для новичков в этом деле(не обязательно в дизайне) это полезный систематизированный контент :)

Ответить
Развернуть ветку
Artem Milovanov

Расскажите, как вы работаете с отступами в проектах. Используете пиксельные сетки, колоночные, на глаз каждый раз подбираете отступы или есть уже готовая система, которую вы используете?

С компонентами и автоматизацией и так все понятно) Лень - двигатель дизайнера. Сам дойдет до компонентов, когда в очередной раз задумается, а зачем он меняет одно и тоже в нескольких местах.

Ответить
Развернуть ветку
Viks

Используем и пиксельные, и колоночные сетки. Основой для отступов является шрифт и его размеры. 

При создании дизайн-концепции задаём силовые линии, на них будем располагать контент. Линия может быть центральная или по третям, по якорным точкам — всё зависит от проекта, опыта и желания дизайнера. 

Подбираем систему отступов, в какой-либо нелинейной зависимости: например, следующий отступ = 2 предыдущих или сумма двух предыдущих, или любая другая последовательность. Это делается для того, чтобы отступы были контрастными, а группировка контента легко читаемой. В процессе подбора понимаем, какой будет сетка: обычно 4 или 8 пикселей. При создании концепции понимаем, нужна ли нам колоночная сетка или наплавляющих и пиксельной сетки уже достаточно. 

Не считаем сетку за строгое правило: меняем в течение создания дизайна, если понимаем, что это необходимо.

Ответить
Развернуть ветку
Alexey Sorokin

Ответ тем, кто считает тему избитой и давно известной: если функция появилась пару лет назад и продвинутые люди ей пользуются, то это не отменяет того, что постоянно появляются новички в дизайне для которых такой набор рекомендаций будет полезен.

Молодцы что обобщили и выложили, новичкам в работе с figma будет полезно!

Ответить
Развернуть ветку
Natalya Sturza

На то и был рассчёт :) Спасибо!

Ответить
Развернуть ветку
Filipp Lyakh

Несколько соображений:

• Способ со специальными организмами по факту костыль, который решает проблемы фигмовских компонентов. А именно невозможность выбрать несколько инстансов и разом поменять у них оверрайды. Были времена, когда в скетче это делалось в два раза быстрее, но прошли

• Такое усложнение структуры компонентов ради возможности быстро что-то поменять - довольно скользкий путь. С одной стороны менять можно действительно быстро, с другой сама поддержка этой структуры понемногу превращается в ад. Типа следи постоянно за уровнями вложенности, решай крайние случаи, когда именно этот экран должен отличаться и его надо детачнуть, а потом не забыть обновить вручную и т.д.
А сложнее всего вникать в это новым людям на проекте. Если в продукте времени много и их ещё как-то можно обучить, то в студии проекты живут меньше, сделать там надо больше и в спешке, сложно в таком темпе следить за соблюдением всех правил. В общем кажется что в таких штуках лучше без фанатизма и текст в кнопке и правда дешевле плагином поменять. 
Что уж там - даже если возвращаешься в свой проект спустя полгода, чтобы что-нибудь поправить, чем сложнее структура, тем дольше ее будешь вспоминать

• В рамках одного проекта характер "молекул" меняется редко. Типа делать кнопки с разными скруглениями - моветон, а один размер чаще всего фиксируется ещё на этапе концепта. Не факт что ради этого стоит туда добавлять уровень вложенности. 

Ответить
Развернуть ветку
Viks

То, что вы описываете, нам очень знакомо. Мы и сами задавились некоторыми вопросами. 

Насчёт того, что структура превращается в ад: по мере работы больше, чем над одним проектом, принципы усваиваются, дизайнер ориентируется на 5 правил создания и правок. Плюс поддерживать и вникать в систему, в которой есть правила построения проще и быстрее, чем в ту, где их нет. Экранов, которые надо детачить единицы на всем сценарии и, ориентируясь на правила, их проще найти, чем пропущенное слово на кнопке, когда экранов больше 100. Но мы согласны с тем, что это создаёт дополнительную проблему контроля. Мы когда-то использовали плагины. Утверждать, какой из способов быстрее нельзя: надо мерить. Ещё зависит сильно от типа правки и сценария: где-то одиночных экранов больше, где-то меньше — мы как раз думаем, как всё это оптимизировать. 

На проектах у нас фиксированные команды, поэтому проблем со сменой людей нет. Даже если кто-то поменялся, всегда есть люди, которые знают и понимают, что происходит в проекте. А новичкам показывают и рассказывают старшие дизайнеры, закреплённые на проекте, плюс для них есть наглядное пособие. Можно сказать, что работу с китом мы встраиваем в процессы компании и команд. 

Возможно, неправильно вас поняли, но скругление не добавляет вложенности. Она появляется из-за состояний (организмы) и текстов (специальные организмы). С размерами кнопок все верно: как правило, задаются на этапе концепции. У нас были случаи, когда в середине проекта приходилось менять элементы дизайна на уровне разметки (молекул) и стилей элементов (организмы), но с сохранением размеров: и тут все наши организмы нам очень помогли быстро все изменить. 

Спасибо, что внимательно читаете и делитесь мыслями — это помогает задавать новые вопросы и находить слабые места в текущем решении, а значит, делать его лучше! 🙂

Ответить
Развернуть ветку
Philip Putria

Отличная статья! да, большинство дизайнеров уже давно руководствуются принципами Atomic design, но методологии у всех разные. Вот мы с моей командой строили дизайн-систему немного по другой методике, но все по Atomic design. Было очень полезно прочитать про виды организмов, и как вы с ними работаете. Спасибо👌🏻

Ответить
Развернуть ветку
Polina Tsybizova

Спасибо, команда старалась :) Расскажите, как у вас устроено? Какую "немного другую методику" использовали?

Ответить
Развернуть ветку
Арсений

Стили объектов и линки. В общем то, что использовалось и до фигмы - в иллюстраторе и индизайне. Возможно когда-нибудь в фигме появятся и grep-стили, running headers и прочие фишки индизайна. 
Мне нравится, как многим кажется, что это прям ново и свежо)
Тем не менее молодцы, что делитесь!

Ответить
Развернуть ветку
Natalya Sturza

Спасибо :) Про новизну и свежесть мы не говорим — рассказали про свою систему и правила работы в командах.  

Ответить
Развернуть ветку
Yury
фишки индизайна

Когда для них не придется изобретать велосипеды после передачи дизайна в разработку. Фигма поступает логично, что ее функционал развивается на одном уровне с веб-стандартами (отчасти догоняет их). В CSS, например, сейчас нет возможности сделать что то похожее на GREP-styling. Подобное можно сделать с помощью JS, но это будет кастомное решение (кому надо, те сделают у себя, так оно не трудно). 

Ответить
Развернуть ветку
Владимир

Когда дизайнеры поняли, что копипастить это не продуктивно, и открыли для себя разработку с использованием компонентов...

Ответить
Развернуть ветку
Denis Azarenko

Выглядит круто

Ответить
Развернуть ветку
Natalya Sturza

спасибо, ребята старались и много вложили сил :)

Ответить
Развернуть ветку
Dmitry

А как обстоят дела с цветом иконок? У вас в макете одна из иконок другого цвета. На каком этапе добавляется цвет иконки? 

Ответить
Развернуть ветку
26 комментариев
Раскрывать всегда