Figma

Как уже было сказано выше, назначение Фигма — это разработка различных графических продуктов в режиме реального времени. Работать над ними можно как индивидуально, так и в команде.

Онлайн-сервис позволяет создавать:

• Векторную графику. Сервис дает дизайнерам и разработчикам возможность создавать векторные изображения и загружать их из Sketch и Adobe Illustrator, переводить объекты в масштабируемый SVG-формат.
• Прототипы. Это модель будущего цифрового продукта, например, презентации, web-сайта или приложения для мобильных устройств. Дизайнер отрисовывает макеты страниц и прописывает связи между ними. Прототип позволяет членам команды и заказчику понять, как будет выглядеть цифровой продукт на экранах компьютеров, смартфонов, планшетов с разным разрешением. Это повышает скорость и эффективность работы над проектом.
• Элементы интерфейса. В Figma можно прорисовывать иконки, кнопки, формы обратной связи и другие детали, которые формируют внешний вид цифрового продукта. Также есть возможность настраивать разные эффекты, например, анимировать блоки, делать раскрывающиеся списки, кликабельные кнопки. 

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

Сервисом Фигма можно пользоваться из браузера или через бесплатное приложение. Первый вариант удобен для тех, кто работает с проектами с разных устройств, а приложение избавляет от необходимости держать открытыми множество вкладок в браузере.

Для начала работы нужно зайти на figma.com и пройти регистрацию. Далее можно авторизоваться на сайте либо скачать и установить приложение для iOS, Linux или Windows. Для оценки внешнего вида прототипов на экране мобильных приложений разработана отдельная программа — Figma Mirror.

После авторизации в браузерной версии или приложении Фигма вам будет доступно две рабочие области: 

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

После авторизации в Figma вы попадаете на стартовую страницу сервиса.

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

В левом меню расположены кнопки «Drafts» — «Черновики», «Recents» — «Недавние файлы», «Favorite files» — «Избранное». От того, какую из них вы выберите, зависит, что будет отображаться на рабочем столе. Слева ниже есть список ваших команд и ссылка на создание новой команды («Create new team»).

Чтобы создать новый проект, нужно кликнуть по кнопке «New design file» в панели «Drafts» или на рабочем столе. Чтобы открыть черновик или сохраненный проект, необходимо щелкнуть по соответствующему превью на рабочем столе. Также можно импортировать проект с жесткого диска вашего ПК — кнопка «Import file».

Когда вы открываете новый, импортированный или сохраненный проект, открывается основная рабочая панель онлайн-редактора — редактор файлов. У нее три области — рабочая панель по центру, список инструментов слева и список слоев справа.

Для редактирования файла используются следующие инструменты:

Move tools:

• Move — перемещение объектов.
• Scale — масштабирование объектов с сохранением пропорций.

Region tools:

• Frame — создание рабочей области (фрейма)
• Slice — создание элементов для экспортирования.

Shape tools:

• Line — создание линии.
• Rectangle — создание прямоугольника.
• Arrow — создание стрелки.
• Ellipce — создание эллипса.
• Poligon — создание многоугольника.
• Star — создание звезды.
• Place image — вставка изображения.

Drawing tools:

• Pen — инструмент «Перо» для рисования векторных линий (прямых и изогнутых).
• Pencil — инструмент «Карандаш» для рисования произвольных векторных линий.
• Text — набор текста.

Hand tool —инструмент «Рука», который перемещает элементы по рабочей области.

Add/Show comments — инструмент, позволяющий комментировать проект и видеть комментарии других членов команды.  

Это только основные инструменты онлайн-редактора. Также в нем есть возможность работать со слоями, с цветами. 

Все изменения сохраняются автоматически в облачном сервисе системы. Если вы хотите сохранить результаты проделанной работы вручную, используйте кнопку «Save to Version History». Также можно сохранить файл на свой компьютер или телефон. Для этого выберите «File» — «Save as .fig». Можно сохранить проект в формате PDF с помощью кнопки «Export Frames to PDF». 

Одно из главных преимуществ Figma заключается в возможности создавать и редактировать проекты совместно с другим пользователями. Для этого нужно создать команду и пригласить в нее своих коллег.

Персональная команда создается сразу при регистрации в сервисе. Ее можно переименовать. Также можно создавать новые команды с помощью пункта меню «Create new team» в нижнем левом углу панели инструментов.

Чтобы пригласить коллег в проект, нужно проделать следующие действия:

• выбрать нужную команду;
• в открывшемся окне кликнуть по кнопке «Invite», которая расположена справа вверху;
• ввести имя пользователя;
• установить для него права на просмотр и редактирование проектов; 
• отправить приглашение.

Также можно настроить права пользователя в конкретном проекте и отправить ему ссылку, скопировав URL из адресной строки или воспользовавшись опцией рассылки приглашений «Share».

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

Для Figma разработано уже несколько сотен плагинов, и эта цифра постоянно растет. Во только самые популярные расширения для онлайн-сервиса:

• Iconify — 100+ готовых наборов иконок и значков.
• Mockup — плагин для отображения дизайна на разных носителях.
• Vectary 3D Elements — библиотека 3D-объектов с функцией добавления третьего измерения в двухмерные проекты и наоборот.
• Blobs — генерация уникальных фигур.
• Arc — плагин для размещения текста по изогнутой линии любой сложности.
• Unsplash — библиотека бесплатных стоковых изображений прямо в графическом редакторе.
• Lorem Ipsum — автозаполнение блоков фиктивным текстом.
• Charts — плагин для создания диаграмм с заданными пользователем параметрами.
• Mapsicle — плагин, который позволяет создавать карты с поиском и отображением мест по адресу или координатам.
• Illustrations — библиотека бесплатных иллюстраций.

Для добавления плагина нужно кликнуть правой мышкой по иконке профиля в правом верхнем углу и выбрать вкладку «Plugins». Далее необходимо перейти по ссылке «Browse plugins in Community». Вы попадете в каталог всех плагинов, разработанных сообществом пользователей онлайн-редактора. Также в комьюнити можно найти бесплатные иконки, иллюстрации, макеты и другие элементы. 

Чтобы найти нужный плагин, можно воспользоваться формой поиска. Для установки используйте кнопку «Install».Обратите внимания, что для того, чтобы плагином можно было пользоваться, послу установки нужно перезагрузить приложение Figma или обновить страницу в браузерной версии сервиса.

Да, и это главное преимущество редактора, например, перед Photoshop. У Figma есть легальный бесплатный тариф Starter. В него входят 3 файла Figma и 3 файла FigJam (досок для совместной работы). Количество соавторов и личных файлов не ограничено. Можно пользоваться плагинами, шаблонами, виджетами. Бесплатно работать в сервисе Фигма можно как через браузер, так и через приложение для ПК и мобильных устройство. 

Есть и платные тарифы от 12 USD в месяц. Они включают не только неограниченное количество проектов, но и другие полезные опции, например, возможность совместного использования плагинов или проведение совещаний команды в голосовом формате.

Научиться работать в Figma и других графических редакторах на практике вам помогут онлайн-курсы Pentaschool для графических дизайнеров. Звоните по номеру 8 800 550-76-72 для получения консультации и помощи в выборе программы обучения.