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

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

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

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

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

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

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

4

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

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

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

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

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

2