Figma - это не только графический редактор по созданию дизайна макетов, это еще и мощный инструмент, который может занять существенный сегмент в процессах разработки цифрового продукта. Но обо всем по порядку.
Прежде всего, это инструмент для дизайнеров
Развитая система работы с шаблонами
Figma позволяет быстро создавать макеты любой детализации — от вайрфреймов (серые блоки, показывающие структуру страницы), до конечного графического дизайна интерфейсов. Для этого есть все необходимые инструменты.
Дизайнеры с легкостью могут создавать шаблонные элементы, например, кнопки, и использовать их по всему макету. Поменяли в шаблоне — сразу же поменялось во всём проекте.
Надо создать дизайн для полноценного сайта? Или спроектировать приложение для iOS и Android? Нарисовать экран для Apple Watch? В Figma вы легко выберете шаблон, под необходимую вам платформу.
Кликабельные прототипы
Любой нарисованный макет можно оживить, сделав из него кликабельный прототип. Это позволяет создавать более продуманные интерфейсы, заранее проверяя и отрабатывая реакции интерфейса и более детально продумывая переходы между страницами.
Инструменты для работы в команде
Порой проект настолько большой, что над ним работает целая команда дизайнеров. И это уже проблема. Как соединить в единый макет экраны, созданные разными дизайнерами? В Figma с этим нет проблем. Вся команда дизайнеров изначально работает в едином пространстве, где каждый видит движение курсоров своих коллег.
Все это синхронизируется через интернет в фоновом режиме. Стоит вам добавить поле ввода в макет, как ваш коллега тут же увидит это. Разумеется, никто не будет работать в несколько рук над одним макетом одновременно. Каждый дизайнер, как правило, работает над отдельным интерфейсом. Но вы всегда находитесь в едином пространстве, что позволяет в один момент скопировать элемент с макета коллеги, или соединить макеты в единый прототип.
При совместной работе дизайнерам заранее нужно договориться о единой палитре, едином наборе базовых интерфейсных элементов, чтобы во всем проекте была консистентность и красота. И Figma заточена под это. В ней можно создать общую графическую библиотеку со всеми общими палитрами, набором шаблонов компонентов. И тут надо быть внимательным. Стоит поменять цвет или шаблон в библиотеке, как изменение автоматически распространяется на весь проект. Это и благо, и ответственность. Бывали случаи, когда круглые кнопки на всем тысячестраничном проекте становились квадратными по вине нерадивого дизайнера-экспериментатора.
Система автоматического сохранения резервных копий
Получается, в Figma любой может случайно "запороть" весь проект? Потенциально да, но это легко исправить. Система автоматического сохранения постоянно делает резервные копи всего проекта несколько раз в день и сохраняет их на сервере.
Если произошло непоправимое, вы просто откатываете проект к последней точке сохранения. Да, пара часов работы будет утрачена, но на практике такое происходит крайне редко, а уж если происходит, команда готова и день потерять, лишь бы возродить проект из пепла.
Работает в MacOS, Windows и в браузерах
В отличие от некоторых конкурентов, например, таких, как Sketch (среда проектирования интерфейсов, работающая только в MacOS), Figma работает и в MacOS, и на Windows, и даже в Linux (проекты открываются в окне браузера).
Эта удивительная способность работать на любой платформе делает программу Figma очень гибким и удобным инструментом, который могут использовать не только дизайнеры.
Отличный инструмент для команды разработки
Из-за своей гибкости Figma используют не только дизайнеры, но вся команда разработки.
Быстрый доступ к ресурсам и параметрам
В Figma есть режим просмотра. В таком режиме ничего нельзя менять, зато доступны стили, размеры элементов, отступы, параметры элементов. Любой ресурс, такой как, например, иконка, картинка, векторный элемент, можно портировать из Figma для нужд фронтенд разработчиков в любой момент — это помогает разработчикам быстро получить все необходимое, не отвлекая лишний раз дизайнеров.
Помимо ресурсов, разработчики могут быстро скопировать параметры элементов в виде кода и сразу применить его в верстке.
Комментирование макетов
Но все же без вопросов не обходится, иногда требуется оперативно получить от дизайнера правки или уточнения по конкретным макетам. Figma позволяет оставлять комментарии прямо в контексте макета.
Дизайнер может отвечать после внесения правок. А чтобы уже утратившие актуальность комментарии не мешали, их помечают как "вопрос решен". Таким образом, обсуждать макеты можно всей командой.
Пригождается даже продуктовым менеджерам
Figma может быть полезной и для продуктовых менеджеров. В ней можно создавать прототипы, моделирующие прохождение сценариев, что можно использовать для презентаций и тестирований.
Презентация для руководства
Созданный полноценный интерактивный прототип отлично подходит для показа на презентациях. Он нагляден, показывает, как продукт будет отрабатывать разные сценарии работы для разных ролей пользователей. Все это позволяет обсудить многие продуктовые вопросы еще до этапа разработки. Выявление сценарных недочетов на ранних стадиях разработки продукта дает возможность быстро их корректировать, менять прототип. Изменить прототип намного быстрее и дешевле, чем менять уже запрограммированный продукт.
Использование макетов для исследований
Такой интерактивный макет можно тестировать на реальных пользователях. Достаточная проработка деталей приводит к тому, что с таким макетом пользователи работают почти как реальным запрограммированным продуктом. Это дает возможность на ранних стадиях получать обратную связь от пользователей, выявлять ошибки и вносить правки быстро и оперативно.
В некоторых случаях для создания простых MVP также подойдет метод прототипирования в Figma. Но всегда надо понимать, что прототип — это не полноценный продукт, и его функциональность и имеет существенные ограничения.
Выводы
Figma существенно упрощает процессы разработки цифровых продуктов в команде. Она правильно организовывает работу дизайнеров, работающих в группе, делает процесс обсуждения и согласования макетов для команды более быстрым, дает возможность продуктовым менеджерам проверять гипотезы и делать наглядные презентации продуктов. А после помогает упростить процесс транзита макетов от дизайнеров к разработчикам.
Figma — универсальный инструмент. И если вы еще не работали с ним — не сомневайтесь, пробуйте!
#продукт_менеджмент #product_management #figma #разработка_продуктов Byn