Figma не подойдет для тех, кто пишет картины или обрабатывает фотографии. Если вы — диджитал-художник или ретушер, лучше остановиться на Photoshop, Lightroom, Procreate или их аналогах. Зато для веб-дизайнеров и зерокодеров Figma совершенно незаменима: это инструмент, специально разработанный для создания прототипов и интерфейсов.
Разберемся в основных функциях Figma, ее достоинствах и других особенностях.
Что такое Figma?
Figma — среда для разработки интерфейсов и прототипов. Своей миссией разработчики называют «сделать дизайн доступным для всех». В рамках системы она представлена двумя инструментами:
- Figma design — непосредственно то, где творится магия. Это инструмент, который позволяет пользователям создавать и тестировать дизайн для веб-сайтов, мобильных и веб-приложений, а также других цифровых продуктов. Им пользуются дизайнеры, продакт-менеджеры, писатели и разработчики, а возможность расшарить проект позволяет как делиться результатом в режиме реального времени, так и создавать коллаборации. Команда может видеть работу, писать комментарии и вносить правки. Что выделяет платформу на фоне продуктов Adobe и их аналогов, которые обычно поставляются в виде программы.
- FigJam — интерактивная доска, в которую можно пригласить всю команду. Обычно ее используют для митингов, мозговых штурмов, планирования и рисерча. Ее интерфейс позволяет использовать те же инструменты, которые используются офлайн: стикеры, рисунки, текст, картинки. Просто все переносится в диджитал-вселенную, взаимодействовать с которой могут в том числе люди из разных городов и стран.
Лучше всего две эти фичи работают совместно, но если зерокодер, например, просто ищет удобную платформу для прототипирования или учебы, то использовать FigJam ему не обязательно. Достаточно Figma design.
Так выглядят интерфейсы: слева Figma design, справа FigJam:
Для чего подойдет?
Важные вещи, которые нужно знать о Figma:
- это векторный инструмент;
- она доступна как в онлайн браузере, так и в виде отдельной скачиваемой программы.
Первое определяет спектр решаемых задач. В векторе, например, можно отрисовать иконку, фавиконы (маленькие картинки, которые видны на вкладке браузера при переходе на определенный сайт), некоторые иллюстрации. Для живописи или ретуширования фото он не подойдет.
Но чаще всего Figma используется для:
- прототипирования — создания «схем» будущих приложений или сайтов, на которых распределяются меню, блоги, слайдеры и другие элементы страницы. Figma позволяет делать анимации и представлять сайт так, как его будут видеть пользователи, со всей интерактивностью;
- создания интерфейсов — внешнего вида будущего проекта. Огромный плюс Figma заключается в том, что платформа позволяет «примерить» любые нововведения до написания кода.Такое можно сделать и при помощи плагинов редактора кода, но с Figma отрабатывать подобные моменты намного проще;
- создания графиков и иконографики — и что особенно приятно, сервис Figma легко интегрируется с разными таблицами, «подтягивая» из них данные. Скажем, вы решили сделать диаграмму. Figma самостоятельно изменит показатели, если изменятся данные в таблице.
Как выглядит и из чего состоит?
Интерфейс редактора выглядит так:
Сразу стоит сказать, что Figma не русифицирована. Компенсируется отсутствие русского языка интуитивной понятностью — это простой инструмент, им легко пользоваться. Но если вы чувствуете, что без подсказок не обойтись — мы рассказываем как пользоваться всеми основными инструментами зерокодинга (включая Figma) на бесплатном интенсиве по мобильной разработке. Мы вместе создадим ваше первое приложение и пройдем весь путь от начала и до конца!
Разберем основные функции
Меню Figma расположено в верхнем левом углу. Чтобы его вызвать, нужно нажать на иконку. Тут есть все нужное для управления файлом: редактировать, сохранить, вызвать быстрые действия и многое другое. Примерно как в любом другом редакторе — если вы когда-либо использовали Photoshop, то быстро со всем разберетесь.
Инструменты (Tools) располагаются на панели справа от иконки вызова меню. Тут все тоже понятно: обрезать, сдвинуть, вставить текст, кадрировать и прочее.
Действия (Actions) идут ровно по центру сверху. Чтобы действия начали работать, следует выделить участок документа. Если ничего не выделено, Figma просто показывает, что можно сделать со всем файлом целиком. Например, создать дубликат, переименовать, экспортировать и другое.
Поделиться (Share) в правом верхнем углу создает ссылку, которую можно отправить другим участникам команды. Рядом есть иконка изменения масштаба документа, а также предпросмотр.
Слои (Layers) находятся в левом сайдбаре. Эта функция показывает слои, на которые разбит документ. Любой дизайнер взаимодействует со слоями — это позволяет быстро изменять отдельные элементы документа без перерисовки всего дизайна.
Холст (Canvas) — большая центральная зона, непосредственно рабочее пространство сервиса.
Свойства (Properties) — правый сайдбар. Это панель, включающая в себя все данные и настройки объекта, над которым вы работаете. Здесь есть две вкладки: «дизайн» и «прототип».
Что еще нужно знать? У Figma есть библиотека плагинов, которые сильно упрощают работу. Плагины помогают искать бесплатные фотографии на стоках, создавать UI-таблицы, встраивать переводчик, делать иллюстрации и многое другое. Они делятся на платные и бесплатные — в библиотеке можно выбрать подходящие.
Также у Figma есть коллекция шаблонов. Вместо того, чтобы создавать интерфейс приложения с нуля, можно просто выбрать подходящий шаблон и доделать его. Идеальный вариант для тех, кто работает над прототипом и пока не готов делать его с нуля — просто показать функционал.
Сколько стоит?
Ценовая политика у редактора Figma очень гибкая. Большой плюс — наличие бесплатного тарифа, который позволяет создать три дизайна или прототипа, а также три файла FigJam. Коллаборации количеством не ограничены, есть возможность использовать в разработке проекта плагины и шаблоны.
Платные тарифы начинаются с $12 в месяц. Оплатить их из России непросто, но возможно, хотя большинству учащихся и фрилансеров хватит и бесплатной версии.
Есть ли ограничения?
Помимо отсутствия русского языка и сложностей с покупкой платного тарифа, у Figma есть еще один недостаток. Для нормальной работы ей нужно быть онлайн, то есть, иметь стабильное подключение к интернету — примерно как для Google Docs. Ехать в поезде без Wi-Fi и работать над проектом не получится.
В остальном недостатков нет. Это удобная платформа, и уметь ей пользоваться — must have для веб-дизайнеров и зерокодеров.
