Мини-учебник — Использование возможностей Figma для всего процесса проектирования

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

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

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

Что является основой плавного процесса разработки продукта?

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

1. Доступность и сотрудничество . Независимо от того, какие инструменты использует команда, должен быть способ работать вместе, представлять проекты, собирать отзывы и держать заинтересованные стороны в курсе событий. Все эти функции доступны в Figma.
2. Гибкость для итерации и получения результатов . Figma является гибкой и может использоваться в качестве совместной доски для набросков первоначальных идей и повторения всего, от каркасов до высокоточных макетов.
3. Умение создавать прототипы и тестировать . Разрабатываете мобильное приложение? Создавайте и публикуйте интерактивные прототипы и тестируйте их прямо на смартфонах — и все это в Figma.
4. Создание единого источника правды . Figma — отличный способ определить системы дизайна продукта, которые находятся полностью в Интернете. Это единственный источник правды по умолчанию. Больше не нужно задаваться вопросом: «Это последняя версия?»
5. Плавная передача . Просто поделитесь ссылкой с разработчиками, и они получат доступ ко всей информации, необходимой для реализации проекта, включая исправления, измерения и графические ресурсы, готовые к экспорту.
6. Универсальность для настройки и улучшения . API плагинов Figma позволяет командам писать свои собственные плагины или подключаться к более широкому сообществу пользователей и расширять инструмент новыми функциями.

1. Доступность и сотрудничество

Получите команду на борту

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

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

Аналогичные параметры общего доступа доступны на уровне группы (показано выше), уровне проекта и уровне файла. Если уровни доступа не указаны, они распространяются от команды к проекту и от проекта к файлам.

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

Встраивание файла проекта

Файлы проекта Figma можно встраивать в стороннее программное обеспечение. Например, общий документ Dropbox Paper можно использовать для представления текущего состояния проекта.

Чтобы внедрить файлы проекта, установите для видимости файла значение Любой, у кого есть ссылка, может просматривать , копировать код внедрения и встраивать файл проекта в любое стороннее программное обеспечение, поддерживающее embed.ly.

Отзывы и изменения

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

Чтобы пометить членов команды, используйте символ @, и система представит список имен на выбор. Это уведомляет членов команды, и после обработки отзыва обсуждение можно закрыть, нажав « Решить ».

Чтобы команды были согласованы, существует хорошая интеграция, которая может публиковать обсуждения из файлов Figma в специальном канале Slack.

Сотрудничество в режиме реального времени

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

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

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

С этой целью рекомендуется создавать пользовательские компоненты для воспроизведения определенных активов в виде виртуальных стикеров или элементов диаграммы.

2. Гибкость для повторения и получения результатов

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

3. Возможность создавать прототипы и тестировать

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

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

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

Пользовательское тестирование

Опять же, ссылка — это все, что нужно для распространения прототипов Figma, даже для пользовательского тестирования. Щелчок по маленькому значку воспроизведения в правом верхнем углу запускает прототип и генерируется новый URL-адрес. Можно скопировать URL-адрес или использовать синюю кнопку « Поделиться прототипом ». Как только пользователи открывают ссылку, им предоставляется интерактивный прототип, и они могут оставлять комментарии, если это необходимо.

Тестирование на мобильных устройствах

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

4. Создание единого источника правды

История версий

Разве не было бы здорово, если бы файлы проекта всегда были актуальными и постоянно резервировались? Эта функция включена в Figma по умолчанию. Каждый файл сохраняется автоматически во время работы над ним, а Figma создает новую запись в истории версий после 30 минут бездействия. Создается журнал всех автоматически сохраненных версий, и при необходимости каждую версию можно восстановить.

Конечно, автоматическое управление версиями — не единственный способ сохранить работу. Можно сохранить версию вручную или отредактировать конкретную версию в истории версий.

Системы проектирования и библиотеки компонентов

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

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

Возможность решать, как распространять библиотеки, в сочетании с возможностью переключения видимости или невидимости элементов библиотеки делает весь процесс плавным и мощным.

Компоненты и библиотеки могут быть вложены друг в друга для создания сложных систем проектирования, в которых все версии и актуальны для всех участников. И все компоненты могут быть аннотированы комментариями.

5. Гладкая передача обслуживания

Передача разработчика

С Figma дизайнерам и разработчикам не нужен отдельный инструмент, такой как Zeplin, для управления передачей. Они могут просто открывать файлы и переключаться в режим кода на правой боковой панели, даже имея доступ только для просмотра.

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

6. Универсальность для настройки и улучшения

API-интерфейсы Figma и пользовательские плагины

API-интерфейс Figma и система плагинов позволяют широкому кругу дизайнерских групп и специалистов легко настраивать программу для своих конкретных технологических потребностей. Гибкость Figma дает пользователям возможность программно взаимодействовать с платформой. Несколько примеров:

Использование реальных данных

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

Плагин под названием Google Sheets Sync — прекрасный пример того, что можно сделать. Этот плагин упрощает интеграцию Google Sheets в качестве источника для заполнения и синхронизации содержимого компонентов в файлах Figma.

Расширенные рабочие процессы

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

Надстройка Storybook синхронизирует файлы Figma и отображает компоненты дизайна Figma на панели вместе с реализованными компонентами. Еще одним интересным вариантом использования является Figma to React Converter, усовершенствование рабочего процесса, которое преобразует компоненты Figma в код.

Функции Figma идеально подходят для всего процесса проектирования

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

Тем не менее, Figma — это продвинутый, но интуитивно понятный инструмент, который зарекомендовал себя более чем способным справиться со всем процессом цифрового проектирования. Отдельные дизайнеры и команды могут извлечь выгоду из его уникальных функций совместной работы и итерации, а там, где программа не справляется, огромный выбор плагинов заполняет пустоту.

• • •

Дальнейшее чтение в блоге Toptal Design:

• Сила Figma как инструмента дизайна
• Figma против Sketch против Axure — обзор на основе задач
• Мини-учебник — Работа с компонентами кнопок Figma
• Совершенствуйте свое мастерство с помощью этих лучших инструментов UX
• Дизайн с точностью — обзор Adobe XD