Мир новых инструментов дизайна невероятно увлекателен. Новые многообещающие программы запускаются в быстрой последовательности, но есть одна, которая постепенно стала лучшим выбором для больших и в основном распределенных команд разработчиков.
Figma имеет потенциал для поддержки всего процесса проектирования от начала до конца. Первые наброски, сбор отзывов, совместная работа, готовые к тестированию прототипы и передача разработчикам полностью соответствуют его возможностям. Figma также упрощает работу менеджеров по продукту и дизайнеров, а также всех других заинтересованных сторон.
Итак, что отличает Figma от конкурентов? Есть несколько ключевых аспектов, но все они могут быть прослежены до того факта, что Figma основана на сети. Это вызвало много удивлений, когда инструмент был впервые выпущен, но в конечном итоге это проложило путь к гибкости и уникальным функциям Figma.
Содержание статьи
- 1 Что является основополагающим для плавного процесса проектирования изделия?
- 2 1. Доступность и сотрудничество
- 3 2. Гибкость для итерации и производства результатов
- 4 3. Способность создавать прототипы и тестировать
- 5 4. Установление единого источника истины
- 6 5. Smooth Handoff
- 7 Функции Figma идеально подходят для всего процесса проектирования
Что является основополагающим для плавного процесса проектирования изделия?
Хотя верно, что у каждой команды и проекта может быть свой рабочий процесс, существуют функции и фазы, которые являются важными компонентами проектирования и управления продуктом. Фигма покрывает каждый.
- Доступность и сотрудничество . Независимо от инструментов, которые использует команда, должен быть способ работать вместе, представлять проекты, собирать отзывы и держать заинтересованные стороны в курсе. Все эти функции доступны в Figma.
- Гибкость для итерации и получения результатов . Figma является гибкой и может использоваться в качестве интерактивной доски для набросков первоначальных идей и повторения всего: от каркасов до высокоточных макетов.
- Способность создавать прототипы и тестировать . Разрабатываете мобильное приложение? Создавайте и публикуйте интерактивные прототипы и тестируйте их непосредственно на смартфонах — все из Figma.
- Установление единого источника истины . Figma — это отличный способ определить системы дизайна продукта, которые находятся в режиме онлайн. По умолчанию это единственный источник правды. Больше не нужно удивляться: «Это последняя версия?»
- Плавная передача обслуживания . Просто поделитесь ссылкой с разработчиками, и они получат доступ ко всей информации, необходимой для реализации проекта — красные линии, измерения и графические активы, готовые к экспорту.
- Универсальность, настраиваемая и улучшаемая . API подключаемых модулей Figma позволяет командам создавать собственные подключаемые модули или подключаться к более широкому сообществу пользователей и расширять инструмент новыми функциями.
1. Доступность и сотрудничество
Получить команду на борту
Давайте подробнее рассмотрим, как Figma вносит вклад в шесть ключевых областей, описанных выше. Новые пользователи могут захотеть создать бесплатную учетную запись Figma, создать команду и посмотреть, как начать работу с Figma. Как только команда будет создана, пригласите членов команды и соответствующие заинтересованные стороны присоединиться.
Поскольку Figma доступна в браузере, не имеет значения, как кого-то приглашают или в какой системе он работает. Пока используемое ими устройство и браузер отвечают минимальным требованиям, они могут сразу перейти по ссылке, и интерфейс меняется в зависимости от того, имеют ли они права на редактирование или просмотр.
Встраивание файла проекта
Файлы проекта Figma могут быть встроены в стороннее программное обеспечение. Например, общий документ Dropbox Paper может использоваться для представления текущего состояния проекта.
Для встраивания файлов проекта установите видимость файла . Любой, у кого есть ссылка, может просмотреть скопировать код для встраивания и внедрить файл проекта в любое стороннее программное обеспечение, которое поддерживает embed.ly.
Одной из наиболее интригующих функций Figma является то, что они называют мультиплеером . Это позволяет нескольким членам команды открывать и работать над файлом проекта одновременно. Каждый, кто работает с файлом, виден в правом верхнем углу страницы, а его аватары названы и кликабельны.
Может потребоваться некоторое время, чтобы оценить, что это означает на практике. Хотя маловероятно, что дизайнеры будут использовать многопользовательскую игру для одновременной работы над одной и той же частью файла, невероятно приятно не беспокоиться о конфликте версий файлов, особенно для больших распределенных команд.
Многопользовательский режим удобен при удаленном представлении, поскольку он позволяет всем, кто подключен к файлу, следить за окном просмотра докладчика. Это также позволяет командам обходить дополнительные программы и использовать Figma в качестве интерактивной доски (хотя конкретные решения, такие как Miro, могут в конечном итоге лучше подходить для работы).
Для этого целесообразно создать пользовательские компоненты для репликации определенных активов в виде виртуальных записей или элементов диаграммы.
2. Гибкость для итерации и производства результатов
После того, как члены команды были приглашены и начальные наброски уже начались, Figma может быть использована для итерации. Основная причина, по которой был создан Figma, — это дизайн интерфейса — после завершения интерактивной доски команды могут переходить к картам потоков и каркасам. Опять же, разумно создавать библиотеки компонентов, которые можно использовать для этих задач. Официальная коллекция шаблонов обеспечивает вдохновение и дизайн, чтобы начать с.
3. Способность создавать прототипы и тестировать
Создать интерактивные прототипы с помощью Figma довольно просто. Когда файл Figma открыт с правами на редактирование, можно переключаться между режимом проектирования и создания прототипа. Находясь в режиме прототипа, можно щелкнуть элемент, чтобы сделать его интерактивным, будь то со сцены или с боковой панели слоев.
Пользовательское тестирование
Опять же, ссылка — это все, что нужно для распространения прототипов Figma, даже для пользовательского тестирования. Нажатие на маленький значок воспроизведения в правом верхнем углу запускает прототип, и генерируется новый URL. Можно скопировать URL-адрес или использовать синюю кнопку Share Prototype . Как только пользователи открывают ссылку, они получают интерактивный прототип и могут оставлять комментарии при желании.
Тестирование на мобильном телефоне
Проекты для мобильных устройств представлены с макетом реального устройства, окружающего прототип. Если для проверки взаимодействия требуется больше реализма, лучше всего загрузить приложение Figma Mirror для тестирования конкретного устройства.
4. Установление единого источника истины
История версий
Разве не было бы замечательно, если бы файлы проекта всегда были текущими и постоянно создавали резервные копии? Эта функциональность включена в Figma по умолчанию. Каждый файл автоматически сохраняется при работе с ним, и Figma создает новую запись в истории версий после 30 минут бездействия. Создается журнал всех автоматически сохраненных версий, и каждая версия может быть восстановлена при необходимости.
Другим аспектом, на котором блестит Figma, является то, как он позволяет дизайнерам создавать, организовывать и распространять библиотеки компонентов. Любой файл может быть опубликован в виде библиотеки, и каждый цвет, стиль текста, эффект, сетка или компонент доступны для использования в других файлах Figma.
Handoff разработчика
В Figma дизайнерам и разработчикам не нужен отдельный инструмент, например Zeplin, для управления передачей обслуживания. Они могут просто открывать файлы и переключаться в режим Code на правой боковой панели, даже с доступом только для просмотра.
API-интерфейсы Figma и пользовательские плагины
API и система подключаемых модулей Figma позволяют широким кругам проектных групп и дисциплин настраивать программу для своих конкретных потребностей процесса. Гибкость Figma дает пользователям возможность программно взаимодействовать с платформой. Несколько примеров:
Использование реальных данных
Чрезвычайно ценно иметь возможность использовать реальные данные в макетах и прототипах, и Figma делает это возможным, позволяя импортировать контент из внешних источников. Используя реальный контент, можно проводить стресс-тестирование компонентов дизайна, поддерживать макеты в актуальном состоянии и привлекать команды, не связанные с дизайном.
Плагин с именем Google Sheets Sync является прекрасным примером того, что можно сделать. Этот плагин позволяет легко интегрировать Google Sheets в качестве источника для заполнения и синхронизации содержимого компонентов в файлах Figma.
Расширенные рабочие процессы
Возможность размещения системы проектирования в программе проектирования пользовательского интерфейса имеет смысл только в том случае, если система последовательно реализована на экранах, ориентированных на клиента. К счастью, есть Figma API, плагины и интеграции, которые могут помочь.
Дополнение Storybook синхронизирует файлы Figma и показывает компоненты дизайна Figma на панели вместе с реализованными компонентами. Еще один интересный пример использования — конвертер Figma в React, расширение рабочего процесса, которое преобразует компоненты Figma в код.
Не существует единой программы дизайна, которая бы отвечала потребностям каждого дизайнера или проектной проблемы, и это хорошо. Конкуренция среди дизайнерских инструментов выгодна дизайнерам. Это гарантирует, что компании, которые делают наши инструменты, прислушиваются к тому, что нам нужно, и предоставляют нам новейшие функции, подходящие для наших задач.
Тем не менее, Figma — продвинутый, но интуитивно понятный инструмент, который зарекомендовал себя более чем способным справиться со всем процессом цифрового проектирования. Отдельные дизайнеры и команды могут извлечь выгоду из его уникальных функций совместной работы и итерации, и там, где программа терпит неудачу, огромный выбор плагинов заполняет пустоту.
• • •
Загрузка...
