Что такое Figma и для чего она нужна
На сегодняшний день существует множество графических редакторов, предназначенных для проектирования интерфейсов. О них уже было написано множество статей, создано множество туториалов, и созданы обширные обучающие видеоролики. Среди этого многообразия выделяется графический редактор Figma. Для удобства поиска информации о нем в различных источниках, данная статья представляет собой комплексное руководство. Она поможет вам понять, что представляет из себя Figma, какие функции она включает, для кого она предназначена, и с чего начать новичку в использовании этого инструмента.
Что представляет собой Figma?
Figma — это кросс-платформенный графический онлайн-редактор, специально разработанный для совместной работы. Этот инструмент позволяет создавать wireframe, UI, прототипы и презентации, а также легко передавать материалы для дальнейшей разработки. Он предоставляет возможность наблюдать за процессом работы в реальном времени, оставлять комментарии и обсуждать детали макета.
Начать использование Figma очень просто, поскольку программа не требует от пользователя специальной подготовки.
Какие основные возможности предоставляет Figma
Режим совместной работы
Одним из наиболее убедительных аргументов в пользу Figma является его многопользовательский режим — особенность, которой пока не может похвастаться ни один из популярных графических редакторов. По состоянию на момент написания этой статьи, так оно и остается. Если вы и ваши коллеги-дизайнеры сосредоточены на общем проекте, Figma предоставляет вам общее пространство, где вы всегда в курсе прогресса каждого участника.
Теперь менеджер проекта, вместо того чтобы отвлекаться на вопросы вроде «как продвигается макет», может моментально оценить текущее состояние. Конечно, при условии, что вы предоставите ему ссылку на файл 😉 Разработчики также могут следить за тем, как дизайн формируется, понимать, что ожидать в будущем, и оценивать предстоящий объем работы.
Все участники проекта могут оставлять комментарии, вопросы и предложения прямо на макете, что значительно упрощает процесс согласования и устраняет необходимость в лишней переписке по почте или мессенджерам. Полная история комментариев всегда доступна в рамках файлов проекта.
Настройки конфиденциальности предоставляют достаточную гибкость: вы можете предоставить доступ как ко всему проекту, так и к отдельному файлу. Это позволяет эффективно управлять видимостью для каждого участника команды. Более того, вы имеете возможность предоставить доступ к проекту человеку, у которого нет учетной записи в Figma и, возможно, даже не знакомому с этой платформой, например, вашему клиенту.
Файлы в облаке
Сохранение файлов на локальном диске становится все менее актуальным, поскольку в настоящее время основные возможности предоставляют облачные сервисы. Figma, как онлайн-редактор, автоматически сохраняет результаты вашей работы в своем облачном хранилище. Тем не менее, также существует возможность загрузки файлов. Для этого в главном меню программы достаточно выбрать «Файл» и затем «Сохранить как .fig».
Кросс-платформенность
Доступ к макетам доступен с любого устройства, включая iPad, просто запустив браузер и подключившись к интернету. Это также означает, что больше нет необходимости постоянно экспортировать результаты работы из редактора в форматы PNG и JPG. Достаточно отправить ссылку на файл с установленными правами доступа, и получатель даже не обязан иметь аккаунт в Figma.
Десктопное приложение тоже есть. Оно предусмотрено для MacOS и Windows, Linux.
Компоненты
Как и во всех графических редакторах, заточенных под проектирование интерфейсов, Figma умеет работать с компонентами. Для бесплатных аккаунтов библиотека компонентов доступна в рамках одного файла. А чтобы дать доступ целой команде и подключить её ко всем файлам проекта, нужно немного раскошелиться.
История версий
Ещё одна полезная функция — история версий. Если над проектом работает ещё кто-то помимо вас и вы внезапно замечаете недочёты в файле, виновника будет достаточно просто найти в истории изменений.
Figma автоматически сохранит версию, если вы не изменяли макет в течение 30 минут. Можно сохранять версии вручную, задавать им названия и описания. Для удобства вы можете указывать, какие изменения были внесены. Так будет проще контролировать процесс.
Бесплатная версия запоминает изменения за последние 30 дней. Полная история доступна на всех платных тарифах.
Фреймы
В Figma есть стандартный набор фреймов с размерами популярных мобильных (включая Apple Watch) и десктопных устройств, распространённых бумажных форматов и фото для соцсетей. В общем, заготовки на все случаи жизни — вопрос «что можно делать в Figma» отпадает сам собой.
У фреймов Figma есть особенности, которые обязательно стоит иметь в виду:
- Фрейм может содержать другой фрейм. Это бывает порой очень удобно.
- Если нужно растянуть фрейм, обязательно удерживайте нажатой клавишу Сmd (MacOS) или Ctrl (Windows), тогда все детали макета останутся на своих местах. В противном случае изображение станет непропорциональным.
Сетки
Как мы знаем, сетка в проектировании — главный помощник. На мой взгляд, работа с сеткой в Figma реализована максимально удобно:
- добавить её для фрейма легко;
- настроить можно очень быстро и просто;
- количество сеток для фрейма не ограничено.
Плагины
Figma — удобный инструмент для работы над дизайном интерфейсов. Но можно сделать работу в редакторе ещё быстрее, автоматизировав часть рутинных задач. На помощь придут плагины.
Они все доступны на сайте Figma, где вы можете подобрать нужный, как в магазине приложений. Также плагин можно выбрать на главном экране Figma. Если у вас открыт рабочий файл, в панели вкладок нажмите на иконку Figma, слева в меню выберите раздел Community (Сообщество), нажмите Explore и далее Plugins.
Импорт Sketch-файлов
На Figma очень легко перейти со Sketch, и причина не только в схожести инструментов. У Figma есть возможность импорта Sketch-файлов. Реализована эта функциональность очень качественно. Сохраняются слои, группы, даже локальные компоненты. Проблемы возникают, только если к импортируемому файлу были подключены внешние библиотеки компонентов. Связи рвутся, и в Figma элементы будут отображаться некорректно.
Стоимость
Для личного пользования вполне хватит бесплатных возможностей Figma. Можно спокойно делать проекты на фрилансе. Бесплатный аккаунт Figma называется Starter, и возможности у него такие:
- история изменений хранится 30 дней;
- можно завести и поддерживать не более трёх проектов;
- только два пользователя могут иметь права на редактирование.
Платный тариф называется Professional, в нём нет описанных выше ограничений. Вдобавок вы сможете делиться с пользователями библиотеками компонентов ваших проектов. При единовременной оплате годовой подписки каждый месяц вам обойдётся в 12 $. Если этот вариант вам неудобен, можете оплачивать сервис помесячно — по 15 $ за каждый месяц.
Третий тариф — Organization — предназначен для больших команд. Стоит он 45 $ в месяц, оплатить нужно сразу год.
Минусы Figma
В главном преимуществе Figma (совместная работа) кроется и минус, который может оказаться для кого-то существенным. Например, если вы не переносите, когда кто-то наблюдает за вашей работой, Figma может вас расстроить.
Представим ситуацию: вы работаете над макетом, к которому настроен общий доступ для коллег, в том числе для вашего начальника. Менеджер проекта поделился с ним ссылкой для промежуточного отчёта. Босс открыл файл, а вы в этот момент дорабатываете макет. Курсор с именем руководителя возле фрейма, над которым вы в этот момент трудитесь, может выбить из колеи.
Ещё один, уже существенный минус, — это необходимость стабильного интернет-соединения. Если сеть пропадает, нет ни работы, ни результата. Конечно, можно периодически сохранять файлы локально, чтобы открыть их и продолжить без интернета, но в таком случае преимущества облачного продукта пропадают.
Что можно делать в Figma?
Прежде всего, Figma — это инструмент для дизайна пользовательских интерфейсов. В этом приложении вы можете создавать макеты веб-сайтов, мобильных приложений, разрабатывать дизайн-системы и реализовывать множество других проектов в цифровой сфере. Постоянное развитие инструмента расширяет его функциональность, делая его применимым в широком спектре областей.
Прототипирование
Прототип представляет собой структуру экранов приложения, эмулирующую работу будущего продукта. Figma предоставляет удобные инструменты для создания высококачественных интерактивных прототипов, включая возможность добавления и настройки интерфейсной анимации, которая постоянно совершенствуется. Это позволяет разрабатывать прототипы, максимально приближенные к реальному продукту.
Для создания прототипа в Figma:
- Подготовьте карту экранов в необходимой последовательности.
- Переключитесь на вкладку «Prototype» в верхней части правого блока.
- Выберите элемент интерфейса, для которого желаете настроить интерактивность.
- Добавьте и настройте действие справа.
В настройках прототипа можно выбрать мобильное устройство, для которого разрабатывается интерфейс. Таким образом, в режиме просмотра прототипа вы сможете представить, как интерфейс будет выглядеть на данном устройстве.
Usability-тестирование
После завершения создания прототипа можно провести usability-тестирование, оценив решение на реальных пользователях. Для этого необходимо встретиться с респондентом или связаться с ним, предоставив ссылку на интерактивный прототип.
Передача макетов разработчикам
Для передачи макетов разработчику необходимо предоставить ему доступ к файлу с правами на просмотр. В этом режиме программисту станут доступны CSS-стили элементов интерфейса. Если разрабатывается мобильное приложение, разработчик сможет просмотреть код для iOS или Android. Для более удобного определения размеров элементов и расстояний между ними предусмотрены направляющие.
Презентация
Режим «Prototype» в Figma можно не только использовать для создания прототипов, но и для проведения презентаций. Это особенно удобно во время вебинаров, когда необходимо одновременно показывать презентацию и взаимодействовать с примером в режиме реального времени. Для этого нет необходимости запускать несколько программ — достаточно двух активных вкладок в Figma.
Для кого подходит Figma
Figma идеально подходит для веб-дизайнеров, проектировщиков и дизайнеров интерфейсов. Она также полезна для UX-исследователей и разработчиков. Руководители продуктов могут эффективно контролировать процесс, отслеживать стадии дизайна и быстро создавать презентации для коллег. Аналитики могут экспортировать макеты для описания сценариев, не прерывая работу дизайнера.
Figma Templates
Figma предлагает широкий спектр возможностей, включая раздел Figma Templates, где представлены полезные шаблоны на разные случаи — от карты пути пользователя до диаграммы Ганта. Каждый шаблон сопровождается описанием и инструкцией по применению.
С чего начать
Если вы заинтересованы в использовании Figma, рекомендуется загрузить десктопное и мобильное приложения, доступные в разделе Downloads на сайте. После регистрации вы получите доступ к графическому редактору и менеджеру файлов. Интерфейс Figma прост и интуитивно понятен, что облегчает начало работы.
В процессе использования возможны вопросы, и официальный канал Figma на YouTube предлагает пошаговые уроки и полезные материалы по инструменту.
Выводы
Figma является мощным инструментом с множеством преимуществ и некоторыми ограничениями. Она объединяет функционал нескольких программ, помогая команде эффективно решать разнообразные задачи. Однако выбор инструмента остается на усмотрение каждого. Эта статья предоставляет информацию, которая может помочь вам сделать осознанный выбор.