Что такое Figma: возможности и принципы работы
Кто хотя бы раз работал в Google Docs вряд ли захочет работать в классическом документе Word. Ведь куда удобнее хранить и редактировать документы онлайн. При чем работать над статьями может сразу целая группа людей, да и открывать их можно с любого устройства (ПК, смартфон и пр.) В 2016 г. для веб-дизайнеров был разработан похожий инструмент — Figma. Этот онлайн редактор позволяет проектировать сайты, приложения и другие дизайнерские продукты. В настоящее время это самый популярный инструмент дизайнеров. В статье расскажем все об особенностях Figma и как начать работать с ним.
Что такое Figma
Figma представляет собой удобный графический редактор, разработанный для веб-дизайнеров. Все созданные документы хранятся в облаке, а это значит, что над проектом может работать целая команда людей, при этом скачивать его не нужно, достаточно просто открыть ссылку.
Заходить в Фигму можно через браузер или скачать на свой ПК (подходит для работы Windows и Mac). Если вы выбрали второй вариант, то можно редактировать проекты в режиме оффлайн и при подключении интернета все изменения синхронизируются.
В данном редакторе можно создавать:
- векторные иллюстрации;
- иконки, меню, окна, кнопки и другие составляющие элементы интерфейса;
- интерактивные прототипы мобильных приложений и сайтов.
Где скачать Figma?
Чтобы начать работу в Figma достаточно зайти на официальный сайт редактора (https://www.figma.com). При желании работать онлайн, достаточно нажать на “Try Figma for free”, если возникло желание установить софт, то выберете пункт “Get desktop app”.
Не стоит качать Фигму с подозрительных сайтов, так как вполне возможно нарваться на вирусные источники.
Преимущества Figma для работы
Популярность данного кроссплатформенного онлайн-редактора растет с каждым днем. Какие же преимущества у Figma? Расскажем немного подробнее.
Исходники документов хранятся в облаке
Все рабочие файлы редактора хранятся в облаке, а не на вашем компьютере. Вам не нужно переживать за их сохранность и необходимость искать в “Новая папка 39” макет “Финал 22”. Абсолютно все изменения Figma автоматически сохраняются. А чтобы начать работу в редакторе, достаточно просто зайти в свой аккаунт.
Командная работа над макетами
Мы уже сравнили принцип работы Figma с Google Docs: доступ на просмотр и редакцию над макетом доступен сразу всей команде. Такой подход позволяет участникам лучше понимать поставленную задачу и работать над ней комплексно. Например, пока дизайнер разрабатывает прототип приложения, копирайтер уже работает над текстами.
Инструмент бесплатен для индивидуальных пользователей
Основное преимущество работы в Фигме — все функции бесплатны. Вы просто регистрируетесь на сайте и начинаете работать. Кроме того, у вас всегда есть возможность дать ссылку на просмотр документа коллеге и тоже, совершенно бесплатно.
Сколько стоит Figma
В бесплатной версии Фигма практически нет ограничений по функционалу, однако именно от стоимости подписки и зависят возможности командной работы:
| Бесплатная | Доступно: прототипирование, доступ для просмотра и комментариев, атрибуты кода, хранение документов (всего 30 дней), импорт документов. Из ограничений — нет совместной редакции документов. |
| $ 12 | Имеется доступ к редактированию документов, сохраняется вся история версий (без ограничений), возможность создавать личные проекты с открытым доступом для других пользователей, возможность создать библиотеку с UI. Отличный вариант для командной работы. |
| $ 45 | Возможность создать команды внутри проекта, загружать шрифты и давать к ним доступ и другие возможности, регулировать доступ к документам по ссылке, сохранять авторство и пр. Подойдет большим организациям. |
Как начать работать с Figma
Пройдя регистрацию, на почту придет письмо со ссылкой на раздел “Помощь”, Здесь доступны видеоуроки, форум и другие ресурсы для быстрого изучения редактора. В целом интерфейс понятный — сверху панель инструментов, слева расположена панель со слоями, а справа — свойства.
Изюминка редактора в том, что при начале работы, появляются уведомления с важными подсказками. Они и помогают сориентироваться в сервисе.
Как научиться работать в Figma
На самом деле, разобраться с Figma не так сложно, но при необходимости можно просмотреть видеоуроки на Youtube:
- «Школа дизайна UX Mind School».
- «Наука Дизайна».
Также можно скачать электронную книгу “Руководство по Figma” от Александра Окунева. Автор рассматривает следующие темы: обзор интерфейса, градиенты,перо и векторные сети, компоненты, цветокоррекция и пр.
Существуют и телеграмм каналы, где можно найти советы и новости Фигма:
- Фигма-чат. Здесь пользователи редактора общаются между собой. Дают практические советы и помогают друг другу.
- Figma Design Channel. Данный канал официальный. Здесь есть новости и советы по работе с редактором.
- Figma Tips. На канале публикуют новости и подсказки, а также важные обзоры функционала.
Возможности Figma
Говорить о преимущества Фигма можно долго и бесконечно, но лучше сразу перейти к доступным возможностям редактора.
Прототипирование
В редакторе дизайнеры могут создать кликабельную версию сайта или мобильного приложения. Пользователь может настроить любую функцию. Например, всплывающие меню, кнопки, модальные окна и пр.
Преимущество в том, что все экраны расположены на одной странице, а это значит, что переключаться между окнами не нужно. Когда прототип готов, можно включить режим презентации, где открывается возможность переходить между разделами сайта и кликать на различные пункты в меню.
Компоненты
Компоненты — это повторяющиеся UI элементы. Их можно создавать из иконок, полей, форм, блоков, заголовков и пр. В Фигма можно создавать два типа элементов:
- Основной (Master components).
- Зависимый (Instances).
Чтобы создать компонент, достаточно просто выбрать соответствующую функцию “Создать компонент”. В таком случае у вас получится основной компонент, а если вы копируете его и куда-то перетащите, то он станет зависимым. К слову, сделать компонент зависимым можно:
- удерживая Alt перетащить в нужное место;
- использовать команду Dublicate;
- при помощи классического копипаста.
Векторные сетки
Данная функция позволяет дизайнерам создавать векторные формы различной сложности. Из особенностей можно отметить то, что линия необязательно должна выходить из одной точки и замыкаться. Пользователь может разветвлять линию и рисовать ее из любой точки.
Встроенное комментирование, редактирование и доступ
Мы уже говорили, что Figma позволяет работать над проектом коллективно. Можно создать команду и каждому ее участнику задавать определенные настройки. Например, кто-то может только просматривать проект, а кто-то — редактировать. Также создатель проекта видит, как его участники работают над документом.
Также пользователи могут обсуждать любой элемент в проекте и оставлять комментарии. Все эти полезные функции для команды позволяют работать быстро и слаженно.
Контроль версий
В данном онлайн-редакторе можно отслеживать всю историю действий сотрудника, а также восстанавливать предыдущие версии документов. Преимущество Figma в том, что даже после закрытия вкладки, сервис сохраняет версии. Также сохраняются изменения, если участники не вносили правки в течение последних 30 минут.
Чтобы открыть историю версий, достаточно в выпадающем меню выбрать соответствующую опцию. На панели справа появится история изменений.
Ограничения Figma
Так как Фигма создана для веб-дизайнеров важно отметить ограничения с которыми они могут столкнуться:
- Работа с полиграфией. Здесь нет возможности переключать размерную сетку на см/мм, а также нет СМYK палитры. Поэтому, если вы создаете баннер или листовку, то созданный в редакторе файл придется загрузить в другую программу, которая предназначена для полиграфии.
- Нет возможности импортировать макеты из Photoshop. Если возникла такая острая необходимость, нужно перевести их в формат Sketch и только потом перенести в Фигма.
Вывод
Несмотря на то, что Figma — относительно новая программа, ее популярность растет с каждым днем. Многие UI/UX-дизайнеры уже не могут и обойтись без нее. Основное преимущество редактора в том, что им можно пользоваться как онлайн, так и скачав на свой ПК. Пользователи также отмечают то, что можно совместно работать над проектом и именно по этой причине многие выбирают этот сервис. А остальные достоинства можно оценить, просто начав работу с Фигма.
Вопросы и ответы
Какие основные возможности предоставляет Figma?
Figma предоставляет широкий набор инструментов для дизайна, включая создание векторных изображений, интерфейсов, прототипов, совместную работу над проектами, обеспечение доступа с разных устройств и многое другое.
Какие преимущества имеет Figma по сравнению с другими инструментами для дизайна?
Figma отличается от других инструментов тем, что это веб-платформа, позволяющая работать онлайн, а также легко сотрудничать с другими пользователями над одним проектом. Все изменения отображаются в реальном времени, что упрощает совместную работу.
Какие возможности для прототипирования предоставляет Figma?
Figma позволяет создавать интерактивные прототипы, которые можно тестировать и просматривать. Это помогает дизайнерам и командам определить, как будет работать интерфейс в реальном использовании.
