Figma трансформирует весь мой рабочий процесс

Figma трансформирует весь мой рабочий процесс

И это невероятно!

Совсем недавно Figma выпустила обновление с новой функцией «Командная Библиотека компонентов» (Team Libraries system). Не секрет, что я принимал участие в создании этого продукта. Я скептически относился к облачному приложению как повседневному инструменту проектирования интерфейсов. Тем не менее я был впечатлен не только высокой производительностью программы, а также тем что взаимодействие с интерфейсом ощущается более отзывчивым и нативным чем мы когда-либо ожидали от веб-приложения. А также с тем, насколько сильно Figma позволяет перенести всю инфраструктуру процесса создания дизайна в облако. Если вы еще не вкурсе всех прелестей программы Figma, то обновление с новой функцие Библиотеки компонентов прекрасная причина подняться на борт.

Итак, в моей третьей статье посвященной программе фигма, вот чтобы я хотел затронуть:

  1. Меньше инструментов, больше проектирования.
  2. Библиотека компонентов и организация компонентов.
  3. Как я использую Figma в нашей творческой команде.

Меньше инструментов, больше проектирования

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

Вот некоторые инструменты, которые я больше не использую:

  1. Внешние инструменты и плагины для прототипирования с малой функциональностью.
  2. Сервисы для организации комментирования макетов и облегчения командной работы над проектом.
  3. Сервисы, которые облегчают взаимодействие дизайнеров с верстальщиками и программистами.
  4. Облачные хранилища для обмена файлами и библиотеками.
  5. Сервисы контроля версий.

Библиотека компонентов Все эти функции есть в Figma. К тому же новая функция Библиотеки компонентов представляет из себя простую и удобную систему публикации компонентов в облако. Что это значит? Любой компонет, который вы создаете — может быть опубликован в библиотеке команды и быть повторно использован в любым членом команды в любом проекте. Каждый экземляр сохраняет ссылку на исходный компонент, то и любой экземляр можно будет изменить согласно исходному компоненту. Это огромная экономия времения для внесения изменений, если какая-то деталь изменилась. А главное, теперь все члены команды смогут использовать только последние версии компонентов.

Изображение библиотеки компонентов Figma

Прототипирование

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

Изображение функции прототипирования Figma

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

Бесплатный режим просмотра и комментирования К вышеперечисленному я также добавлю, что ценю то, что Figma позволяет бесплатно добавлять пользователей к проекту, которые могут использовать проект в режиме «просмотра и комментирования». Таким образом, теперь нет необходимости иметь дело с лицензиями и одобрением бюджета, чего на моем рабочем месте хватало, чтобы моя голова взорвалась.

Библиотеки команд и организация компонентов

Когда я начал переносить файлы Sketch в Figma, то сразу я чувстовал себя немного потерянным без специального места, на котором размещаются мои компоненты. Мне действительно не хватало страницы «Символы». Теперь вы можете публиковать не только компоненты из любого проекта в библиотеку команды, но также и получить быстрый доступ к любому компоненту с помощью панели компонентов. Левая боковая панель, которая ранее была зарезервирована только для слоев, теперь имеет три вкладки: одна для слоев, одна для компонентов (внутри документа) и одна для доступа к библиотекам команд. Между которым легко переключаться с помощью сочетания клавиш alt + 1, alt + 2, alt + 3.

Изображение использования левой панели компонентов

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

Организация компонентов в вашей команде может осуществляться следующим образом.

  • Вы можете выбрать один главный документ для размещения всей вашей системы проектирования или разбить его на несколько файлов.
  • Вы также можете просто публиковать компоненты из документов, в которых вы создали свои базовые компоненты, без переноса этих компонентов в отдельный файл. Это отлично работает, гораздо легче поддерживать отделньные документы посвященные компонентам, если вы разрабатываете большой интерфейс.
  • Благодаря тому, что Figma организовывает компоненты на панели «Библиотека команд», вы можете использовать артборды (фреймы) или группы для сортировки их в логические категории (например: кнопки, вкладки, элементы форм и т.д.)
  • Изменение цвета фона фрейма или групп приведет обновлению изображения предпросмотра на боковой панели компонентов. Конечно, возможности бесконечны, когда дело доходит до организации компонентов в систему. Уильям Ньютон написал замечательную статью о том, как он организовывает свои компоненты в компании Gusto здесь.

Как я использую Figma в своей команде

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

Начнем с многопользовательского использования. Я слышу разговоры, о том что многие дизайнеры не нуждаются в многопользовательской работе над одним и тем же файлом. Хотя уже успешно испытал его в совместной работе с другими дизайнерами, чтобы быстро сгенерировать идеи. Также я виж много преимуществ членов команды, которые не являются дизайнерами. Например, у нас еженедельные и двухнедельные проверки в проектах, в которых мне необходимо предоставить отчет об обновления. Раньше в этих обновлениях я часто делился своим экраном (низкое качество, проблемы с масштабированием, дополнительное програмное обеспечения), или мне приходилось экспортировать все материалы и распространять их, чтобы все сотрудники и заинтересованные сотороны могли просматривать их в приближении 100%. Получение обратной связи вызывало много хлопот и обычно включало в себя записись замечаний или вычитывание комментариев в PDF.

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

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

Изображение функции комментариев в Figma

Также возможно использовать презентации за пределами просмотра в программе. Figma позволяет встраивать презентации на сайт (с помощью iframe), который встроит документ Figma на сайт. Это позволяет интегрировать Figma с многими ведущими системами управления проектами. Вам не нужно ничего устанавливать. Вы просто даете ссылку на документ и устраняете путаницу с версиями проектов.

Гайдлайны

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

Изображение примера спецификации в программе Figma

Использование этого инструмента, а также взаимодействие с командой Figma было удивительным опытом. Маневренность команды впечатляет, когда я смотрю, как быстро они добавляют инновационные и стабильные функции в продукт, а не только прослушивают, но и быстро отслеживают реализацию обратной связи с пользователями. Это внушает уверенность в том, что любые желаемые функции, которые могут отсутствовать, вероятно появятся в ближайшем будущем, и, вероятно, причина в том, что ссылка с обновлениями программы Figma нашла место в моей панели закладок. Мое время, проведенное в Fimgа обычно явлется самой приятной частью дня. Надеюсь, мой азарт будет заразителен в предах офиса и привлечет больше сотрудников.

Пожалуйста, поделитесь своим опытом!


Компания Figma нашла эту статью полезной для себя и поэтому с моего разрешения рекламирует ее.


Вольный перевод статьи Томаса Лоури «Фигма трансформирует весь мой рабочий процесс». Оригинальная статья.

Комментарии