Сила Figma как инструмента дизайна

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

Давайте посмотрим поближе.

Figma работает на любой платформе

Figma работает в любой операционной системе, в которой работает веб-браузер. Mac, ПК с Windows, машины с Linux и даже Chromebook можно использовать с Figma. Это единственный инструмент для дизайна в своем роде, который делает это, и в магазинах, использующих оборудование, работающее под управлением разных операционных систем, каждый по-прежнему может делиться, открывать и редактировать файлы Figma.

Во многих организациях дизайнеры используют компьютеры Mac, а разработчики — ПК с Windows. Figma помогает объединить эти группы. Универсальный характер Figma также предотвращает раздражение PNG-pong (где обновленные изображения прыгают туда и обратно между дисциплинами команды дизайнеров). В Figma нет необходимости в посредническом механизме, чтобы сделать дизайн доступным для всех.

Совместная работа в Figma проста и привычна

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

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

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

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

Figma использует Slack для командного общения

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

Обмен Figma прост и гибок

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

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

Встроенные файлы Figma обеспечивают обновление в реальном времени

Figma также предоставляет живые фрагменты кода для вставки, чтобы вставить iFrame в сторонние инструменты. Например, если Confluence используется для отображения встроенных файлов макетов, эти файлы не «обновляются» путем сохранения файла Figma — эти встроенные файлы ЯВЛЯЮТСЯ файлом Figma.

Если кто-либо в Figma внес изменения в макет, это изменение можно увидеть в реальном времени во встроенном макете Confluence. (Подробнее об интеграции Figma и Confluence можно прочитать здесь.)

Влияние этой функции на процесс UX показано на следующей диаграмме:

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

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

Figma отлично подходит для отзывов о дизайне

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

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

Передача разработчика упрощается с помощью Figma

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

Файлы проекта Figma находятся в одном месте — онлайн

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

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

Это всего лишь один из методов организации файлов, который можно сделать более или менее детализированным в зависимости от требований процесса.

API-интерфейсы Figma обеспечивают интеграцию сторонних инструментов

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

В программном обеспечении Atlassian JIRA реализована надстройка Figma, поэтому владельцы продуктов, разработчики и инженеры по качеству всегда просматривают последнюю версию любого макета от дизайнеров.

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

Управление версиями файлов выполняется автоматически или по требованию

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

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

Прототипирование в Figma простое и интуитивно понятное

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

Прототипы Figma можно распространять так же, как файлы дизайна Figma; любой, у кого есть разрешение на ссылку, может просматривать и комментировать прототип, и опять же, эта обратная связь фиксируется на панели комментариев инструмента и записывается в Slack. Разработчики могут видеть рабочий процесс проектирования, оставлять прямые @сообщения для дизайнеров и получать измерения и атрибуты CSS внутри прототипа.

Командные библиотеки Figma идеально подходят для систем проектирования

Системы дизайна стали необходимостью для многих компаний, и существует потребность в компонентах (символы в Sketch и Illustrator), которые можно повторно использовать, масштабировать и «токенизировать» для использования в библиотеках шаблонов, доступных для дизайнеров UX и разработчиков интерфейса.

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

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

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

Figma создана для улучшения командной работы дизайнеров

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

Эксперты по дизайну, которые используют Figma после перехода со Sketch (файлы Sketch можно импортировать с четностью в Figma), не разочарованы:

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

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

В течение последнего года я использовал Figma для своего процесса проектирования UI/UX, и это сэкономило мне часы работы. Это действительно изменило мой рабочий процесс дизайна — Как оптимизировать рабочий процесс UI / UX с помощью Figma

Мое время, проведенное в Figma, обычно является самой приятной и продуктивной частью моего дня — Figma меняет весь мой рабочий процесс, и это потрясающе!

• • •

Дальнейшее чтение:

• Совершенствуйте свое мастерство с помощью этих лучших инструментов UX
• Оптимизируйте совместный дизайн с Figma
• Используйте Craft by InVision для оптимизации командной работы
• Смерть каркасу. Прямо к высокой точности!
• Станьте дизайнером мирового уровня, сделав мир своим офисом