Я бог продуктивности: пять шагов, чтобы познать радость быстрых правок в ките 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. И снова специальный организм
Для быстрого изменения разметки во всех экранах сценария мы превращаем целую страницу в специальный организм. Показываем на примере сценария авторизации в приложении.
Задача:
Старший дизайнер заметил, что отступы между инпутами логина и пароля слишком большие/маленькие и с ними нужно ещё поработать.
Решение:
Меняем расстояния между инпутами в компоненте авторизации — корректировка происходит на всём сценарии.
Больше не больно: четыре правила быстрых правок
- Если что-то используется больше одного раза — делай компоненты волшебными кнопками Command+K.
- Если нужно поправить разметку — иди в молекулу.
- Если нужно поменять цвет атома или скрыть его в конкретном состоянии элемента — иди в организм.
- Если нужно исправить текст внутри сценария — иди в специальный организм (только вспомни, использовался ли он и в других сценариях, поскольку изменение затронет и их).
И напоследок: практикум
Мы сделали тренировочный файл в Figma: продублируйте его себе в Drafts, а потом двигайте, проверяйте, изучайте.
Вы пару лет проспали.. Чую в след году выйдет статья про auto-layout)
Понимаю, что большинство дизайнеров сразу рождаются мастер-джедаями Figma)), но уверена, что любой личный опыт помогает начинающим командам систематизировать свою работу и двигаться быстрее и продуктивнее. В статье именно практический опыт, а не претензия на уникальность.
Следить за возможностями своего рабочего инструмента - это как чистить зубы.
Вопрос к вашим дизам и их руководителю..
А то и больше. Статья про использование Atomic Design вышла через ~ 7(!) лет после одноименной книги Бена Фроста.
Учитывая что стили были придуманы еще раньше и тот же Бен рассказывал пещерным людям на пальцах про модули которым лет и лет
Ну Atomic Design появился во время. В начале 10-х стали появляться web applications и responsive design (с CSS3 будем считать). Фронтенд начал усложняться и нужно было это все как то эффективно организовывать. Хотя понятно, что идеи модуляризации кода в существуют очень давно
*Брэда Фроста
даже больше. очень много вопросов вызывают дизайнеры, которые пришли к этому лишь недавно. как они работали раньше?
Фотошоп?
Хуже, недавно хотели прислать макет в Corel
Комментарий недоступен
PowerPoint хотя бы в каком-то смысле векторный. Плюс у него давным-давно есть поддержка мастер-страниц, что, несомненно, было преимуществом.
поверпойнт и кейнот именно что векторные редакторы, которые приспособили для топменеджерских нужд
Всем спасибо за комменты для охвата! Мы не претендуем на новизну и уникальность — некоторыми приёмами из статьи пользуются профи. Некоторые из них наши. Для новичков в этом деле(не обязательно в дизайне) это полезный систематизированный контент :)
Расскажите, как вы работаете с отступами в проектах. Используете пиксельные сетки, колоночные, на глаз каждый раз подбираете отступы или есть уже готовая система, которую вы используете?
С компонентами и автоматизацией и так все понятно) Лень - двигатель дизайнера. Сам дойдет до компонентов, когда в очередной раз задумается, а зачем он меняет одно и тоже в нескольких местах.
Используем и пиксельные, и колоночные сетки. Основой для отступов является шрифт и его размеры.
При создании дизайн-концепции задаём силовые линии, на них будем располагать контент. Линия может быть центральная или по третям, по якорным точкам — всё зависит от проекта, опыта и желания дизайнера.
Подбираем систему отступов, в какой-либо нелинейной зависимости: например, следующий отступ = 2 предыдущих или сумма двух предыдущих, или любая другая последовательность. Это делается для того, чтобы отступы были контрастными, а группировка контента легко читаемой. В процессе подбора понимаем, какой будет сетка: обычно 4 или 8 пикселей. При создании концепции понимаем, нужна ли нам колоночная сетка или наплавляющих и пиксельной сетки уже достаточно.
Не считаем сетку за строгое правило: меняем в течение создания дизайна, если понимаем, что это необходимо.
Ответ тем, кто считает тему избитой и давно известной: если функция появилась пару лет назад и продвинутые люди ей пользуются, то это не отменяет того, что постоянно появляются новички в дизайне для которых такой набор рекомендаций будет полезен.
Молодцы что обобщили и выложили, новичкам в работе с figma будет полезно!
На то и был рассчёт :) Спасибо!
Несколько соображений:
• Способ со специальными организмами по факту костыль, который решает проблемы фигмовских компонентов. А именно невозможность выбрать несколько инстансов и разом поменять у них оверрайды. Были времена, когда в скетче это делалось в два раза быстрее, но прошли
• Такое усложнение структуры компонентов ради возможности быстро что-то поменять - довольно скользкий путь. С одной стороны менять можно действительно быстро, с другой сама поддержка этой структуры понемногу превращается в ад. Типа следи постоянно за уровнями вложенности, решай крайние случаи, когда именно этот экран должен отличаться и его надо детачнуть, а потом не забыть обновить вручную и т.д.
А сложнее всего вникать в это новым людям на проекте. Если в продукте времени много и их ещё как-то можно обучить, то в студии проекты живут меньше, сделать там надо больше и в спешке, сложно в таком темпе следить за соблюдением всех правил. В общем кажется что в таких штуках лучше без фанатизма и текст в кнопке и правда дешевле плагином поменять.
Что уж там - даже если возвращаешься в свой проект спустя полгода, чтобы что-нибудь поправить, чем сложнее структура, тем дольше ее будешь вспоминать
• В рамках одного проекта характер "молекул" меняется редко. Типа делать кнопки с разными скруглениями - моветон, а один размер чаще всего фиксируется ещё на этапе концепта. Не факт что ради этого стоит туда добавлять уровень вложенности.
То, что вы описываете, нам очень знакомо. Мы и сами задавились некоторыми вопросами.
Насчёт того, что структура превращается в ад: по мере работы больше, чем над одним проектом, принципы усваиваются, дизайнер ориентируется на 5 правил создания и правок. Плюс поддерживать и вникать в систему, в которой есть правила построения проще и быстрее, чем в ту, где их нет. Экранов, которые надо детачить единицы на всем сценарии и, ориентируясь на правила, их проще найти, чем пропущенное слово на кнопке, когда экранов больше 100. Но мы согласны с тем, что это создаёт дополнительную проблему контроля. Мы когда-то использовали плагины. Утверждать, какой из способов быстрее нельзя: надо мерить. Ещё зависит сильно от типа правки и сценария: где-то одиночных экранов больше, где-то меньше — мы как раз думаем, как всё это оптимизировать.
На проектах у нас фиксированные команды, поэтому проблем со сменой людей нет. Даже если кто-то поменялся, всегда есть люди, которые знают и понимают, что происходит в проекте. А новичкам показывают и рассказывают старшие дизайнеры, закреплённые на проекте, плюс для них есть наглядное пособие. Можно сказать, что работу с китом мы встраиваем в процессы компании и команд.
Возможно, неправильно вас поняли, но скругление не добавляет вложенности. Она появляется из-за состояний (организмы) и текстов (специальные организмы). С размерами кнопок все верно: как правило, задаются на этапе концепции. У нас были случаи, когда в середине проекта приходилось менять элементы дизайна на уровне разметки (молекул) и стилей элементов (организмы), но с сохранением размеров: и тут все наши организмы нам очень помогли быстро все изменить.
Спасибо, что внимательно читаете и делитесь мыслями — это помогает задавать новые вопросы и находить слабые места в текущем решении, а значит, делать его лучше! 🙂
Отличная статья! да, большинство дизайнеров уже давно руководствуются принципами Atomic design, но методологии у всех разные. Вот мы с моей командой строили дизайн-систему немного по другой методике, но все по Atomic design. Было очень полезно прочитать про виды организмов, и как вы с ними работаете. Спасибо👌🏻
Спасибо, команда старалась :) Расскажите, как у вас устроено? Какую "немного другую методику" использовали?
Стили объектов и линки. В общем то, что использовалось и до фигмы - в иллюстраторе и индизайне. Возможно когда-нибудь в фигме появятся и grep-стили, running headers и прочие фишки индизайна.
Мне нравится, как многим кажется, что это прям ново и свежо)
Тем не менее молодцы, что делитесь!
Спасибо :) Про новизну и свежесть мы не говорим — рассказали про свою систему и правила работы в командах.
Когда для них не придется изобретать велосипеды после передачи дизайна в разработку. Фигма поступает логично, что ее функционал развивается на одном уровне с веб-стандартами (отчасти догоняет их). В CSS, например, сейчас нет возможности сделать что то похожее на GREP-styling. Подобное можно сделать с помощью JS, но это будет кастомное решение (кому надо, те сделают у себя, так оно не трудно).
Когда дизайнеры поняли, что копипастить это не продуктивно, и открыли для себя разработку с использованием компонентов...
Выглядит круто
спасибо, ребята старались и много вложили сил :)
А как обстоят дела с цветом иконок? У вас в макете одна из иконок другого цвета. На каком этапе добавляется цвет иконки?