UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Переход со Sketch на Figma: пример миграции дизайн-систем
Редакція
Редакція

Опубліковано

Переход со Sketch на Figma: пример миграции дизайн-систем

Переход на другой инструмент – это не то решение, к которому следует относиться легкомысленно. В этой статье представлен опыт Help Scout по переносу дизайн-системы из Sketch в Figma: почему мы поменяли рабочий инструмент, пошаговое описание процесса, и его последствия. Этот опыт применим к любой команде, обдумывающей масштабную миграцию с одного инструмента на другой.

В прошлом году, всякий раз, когда я разочаровывался в Sketch, мой коллега предлагал мне попробовать Figma. Затем, когда я написал статью о построении нашей дизайн-системы в Sketch, я получил множество отзывов от людей, рекомендовавших мне попробовать Figma. А недавно Линда – глава отдела дизайна в Help Scout, спросила меня: «Эй, Базз, может нам следует использовать Figma?»

Я больше не мог с этим бороться... Я просто должен был попробовать Figma!

Это не признание в любви к Figma или критика в адрес Sketch. Это предостережение для тех, кто подумывает о смене инструментов. Это история об особенностях миграции дизайн-системы с одной платформы на другую.

Понимание стоимости

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

Для Help Scout трудность заключалась в том, что наша дизайн-система построена, как несколько взаимозависимых библиотек Sketch, управляемых с помощью GitHub. У нас также есть несколько проектов, процессов и обширной документации, которые зависят от файлов Sketch. И не забудьте о грандиозных усилиях, связанных с обучением и переводом всей команды на новый инструмент, одновременно выполняя текущую работу!

Развитие дизайн-системы Help Scout через GitHub

Есть также финансовые затраты, связанные с тем, что кто-то (в данном случае это был я) отрывался от обычной работы, чтобы исследовать и документировать этот переход. Дело в том, что, если вы работаете в устоявшейся команде дизайнеров, вы знаете, что сменить инструмент так же просто, как и переехать в другой офис.

Достаточно сказать, что это решение было не легко принять.

Прощупайте почву

Понимая, что мое решение окажет влияние на всю команду и компанию, я начал с того, что потратил два полных дня на изучение Figma. Я смотрел видео, общался с другими дизайнерами, которые часто ее используют, и я играл с ней… очень много! По сути, я исследовал насколько легко было бы переместить наши Sketch-компоненты. Возник вопрос: будет ли это так же просто, как открыть в Figma файл с расширением. sketch?

Неудивительно, но ответ нет.

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

Слишком сложно? Да. Но это отлично работало для нас.

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

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

Хотя подобная сложность в Sketch позволила нам достичь уровня гибкости, который Figma предлагает «из коробки», это означало, что практически любой компонент, импортированный из Sketch, принес с собой ненужный уровень сложности. Чтобы использовать Figma, нам нужно было перестроить все с нуля.

Время принятия решения!

Учитывая вышесказанное, и несмотря на то, что считал Figma – лучшим инструментом, который усилит компанию в долгосрочной перспективе, я принял решение, что подобный переход будет для нас слишком сложным и дорогим. Заново создавать целые библиотеки – это слишком много работы! Это было похоже на расставание, прежде чем дать ему шанс.

«Дело не в тебе, дело в нас».

Но, как оказалось, Figma – клиенты Help Scout. Услышав наше решение придерживаться Sketch, наш начальник отдела продаж связался с продуктовой командой Figma – не обязательно для того, чтобы изменить чье-то мнение, а для того, чтобы по-дружески поделиться опытом. Они попросили обсудить мое решение. И это была возможность, которую было нельзя упускать!

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

К тому времени, когда я говорил с командой Figma, я уже поменял точку зрения. Всего за пару дополнительных дней я понял, насколько продуктивнее станет наша команда с такими функциями. Стоимость перехода на другой инструмент не изменилась, но изменилось мое мнение, стоит ли это делать. Глава отдела дизайна Help Scout подытожил: если мы думаем, что когда-нибудь сделаем это, то почему бы не сегодня?

Так что я закончил свой разговор с представителями Figma просьбой: «Дайте мне пару советов, как лучше это сделать», что они любезно и сделали.

Как совершить переход

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

1. Разделите свои библиотеки

Это относится и к созданию библиотек Sketch, но я настоятельно рекомендую разбивать дизайн-системы на отдельные суббиблиотеки, которые охватывают разные части вашей экосистемы. В нашем случае у нас есть «Ядро», содержащее компоненты, применимые к любому дизайну (активы бренда, иллюстрации, иконки и т. д.), а затем документы, относящиеся к конкретной области. Такой подход немного облегчает переход на другой инструмент, когда вы перемещаете элементы дизайн-системы организованными порциями.

Наши разделенные библиотеки дизайна

В нашем случае миграция на Figma начиналась с элементов «Ядра», которые затем использовались для создания последующих библиотек.

2. Полагайтесь на стили (+ документацию)

В Figma есть «Стили», которые работают так же, как стили шрифтов в Sketch, но с дополнительным преимуществом – они также применяются к цвету и эффектам. Поэтому очень полезно определить все цвета и общие элементы в одной библиотеке, а затем задокументировать их.

Пример того, как стили задокументированы в каждой библиотеке

3. Покажите, как расширить компоненты

Поскольку Figma позволяет намного лучше контролировать, расширение компонентов, вероятно, в конечном итоге у вас выйдет меньше компонентов, чем было в Sketch. Вместо «button solid color» и «button outlined» в Figma вам понадобится просто «button». Из-за этого я обнаружил, что важно документировать различные способы расширения компонента непосредственно в самой библиотеке.

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

Пример того, как из одного компонента Figma можно собрать весь диалог

4. Организовывайте материалы надлежащим образом

Из-за небольших различий в работе файловой системы Figma, я быстро отказался от попыток воспроизвести структуру наименований, которая была в исходных файлах Sketch. В конечном счете, цель состоит в том, чтобы гарантировать, что компоненты логично расположены и их легко найти. Лучший способ, который я нашел для достижения этой цели, заключается в тщательной организации Страниц (Pages) по категориям (например, Forms), Фреймов (Frames) по группам (например, Inputs), и Компонентов (Components) по отдельным элементам (например, Error). Точность в именовании сильно упрощает поиск компонентов, особенно для людей, которые их не создавали.

Именование важно!

5. Импорт VS Создания заново

Хотел бы, чтобы у меня были для вас хорошие новости о физическом процессе импорта компонентов Sketch (многие вещи, а именно отдельные элементы, например, иконки, вы можете импортировать из Sketch, и все будет отлично работать). Однако более сложные компоненты (особенно те, которые содержат маски и вложенные символы) лучше создавать с нуля. Да, это ужасно, но, с другой стороны, вы очень быстро освоите Figma!

Воссоздавая сложные Sketch-компоненты, я буквально делал скриншот, а затем «калькировал» его в Figma. Как бы смешно, это не звучало, но это было гораздо быстрее, чем импортировать их из Sketch и удалять ненужные элементы. И мне немного стыдно признаваться, но мне нравится подобная работа, кроме того оказалось, что такой рабочий процесс был более эффективным.

(Но, конечно, если вы переносите более простые компоненты, такие как иконки, возможности импорта в Figma вас устроят).

Мой рабочий процесс

6. Обучите свою команду

Поскольку у нас на 100% удаленная команда, мы хорошо проинформированы о большинстве происходящих в компании процессов. И это не было исключением. Поэтому команда заранее знала о предстоящем переходе на новый инструмент.

Когда все было готово, я поделился с ними 20-минутным демонстрационным видео, объясняющим основы Figma, и какие классные улучшения их ждут при использовании компонентов. Это определенно смягчило удар для тех, кто поначалу, возможно, немного сомневался.

Оригинальное видео, которым я поделился со своей командой

7. Ва-банк

Часть моего первоначального исследования заключалась в том, чтобы выяснить, можем ли мы поддерживать нашу дизайн-систему в Sketch и Figma одновременно. Я уверен, что это возможно сделать, но это вызвало бы дополнительные трудности, поскольку у нас довольно маленькая команда и нет выделенной команды или человека для обслуживания библиотек. Вместо того, чтобы сохранить то, что у нас было, я решил поставить всё на Figma.

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

Конечно, библиотеки наши Sketch все еще существуют; они просто больше не документируются и не обновляются. И в условиях перехода на другой инструмент, текущие проекты продолжают использовать файлы Sketch (хотя некоторые дизайнеры решили перенести свою работу в Figma), тогда как в новых проектах используется только Figma.

Вывод: составьте план!

Трудно завершить подобную статью, не сказав, что у меня есть ответы на все вопросы, хотя, это не так. Но мой совет всем, кто решил переключиться на другие инструменты, делайте это медленно. Проведите исследование, составьте план, определите стоимость и взвесьте, готовы ли вы ее заплатить. Неважно переходите ли вы на Figma, Sketch, InVision Studio, Adobe XD, Framer X или любой другой модный новый инструмент, о котором я еще не слышал.

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


Перевод статьи Buzz Usborne

Топ коментарі (0)