Дизайн
Angry
9847

Я бог продуктивности: пять шагов, чтобы познать радость быстрых правок в ките 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, а потом двигайте, проверяйте, изучайте.

Проектируем финтех-сервисы
{ "author_name": "Angry", "author_type": "editor", "tags": ["figma"], "comments": 29, "likes": 50, "favorites": 344, "is_advertisement": false, "subsite_label": "design", "id": 111361, "is_wide": true, "is_ugc": false, "date": "Wed, 11 Mar 2020 07:56:09 +0300", "is_special": false }
IPQuorum
Развитие технологических стартапов в России: барьеры и возможности
Внедрение решений Индустрии 4.0 в крупных промышленных предприятиях тормозят не только кризис и условия пандемии…
Объявление на vc.ru
0
29 комментариев
Популярные
По порядку
Написать комментарий...
32

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

Ответить
13

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

Ответить
2

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

Ответить
4

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

Ответить
2

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

Ответить
0

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

Ответить
1

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

Ответить
2

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

Ответить
0

Фотошоп?

Ответить
1

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

Ответить
0

Фотошоп — это еще ничего, хотя геморрой, конечно. Знаю людей, которые году в 2011-2012 рисовали интерфейсы в PowerPoint. Но они и не претендовали на лавры крутых дизайнеров. 

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

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

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

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

Ответить
20

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

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

Ответить
1

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

Ответить
4

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

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

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

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

Ответить
1

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

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

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

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

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

Ответить
3

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

Ответить
0

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

Ответить
2

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

Ответить
1

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

Ответить
0

фишки индизайна

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить

Прямой эфир