Что такое Фигма и как в ней работать

Фигма – рабочий инструмент дизайнеров, веб-разработчиков, SMM-специалистов, владельцев бизнеса и обычных пользователей. В этом графическом редакторе создают макеты сайтов и приложений без особой подготовки. 

Рассказываем, как начать работать в Figma и в чем ее особенности.

Что такое Figma

Figma – онлайн-платформа для разработки графических проектов: логотипов, интерфейсов, иллюстраций. Работать над ними можно самостоятельно или в команде. В Фигме вы увидите, каким будет дизайн приложения или сайта на экранах смартфонов и ПК. Прототип можно перенести в Тильду – конструктор веб-страниц. 

Instagram* (продукт компании Meta, которая признана экстремистской организацией)

Возможности и особенности Figma

Сервисом могут пользоваться не только профессионалы. Обычные блок-схемы, доски настроения, шаблоны для Instagram* (продукт компании Meta, которая признана экстремистской организацией) и других соцсетей, диаграммы, карты сайта и пути клиента – все это базовые опции платформы. 

Научиться пользоваться Фигмой можно быстро и легко. Дайте название проекту или команде, выберите тариф (бесплатный – Starter, платный – Professional) и приступайте к работе.  

Многопользовательский режим редактирования

Над веб-дизайном часто трудится одновременно несколько человек. Возможность совместного редактирования позволяет всем участникам рабочего процесса видеть внесенные коллегами изменения в реальном времени и дорабатывать оформление с любых устройств и ОС. Заказчик также может принимать участие в процессе – по ходу работы оценивать вид и удобство будущего продукта, оставлять комментарии. 

Облачный сервер хранения файлов

Проект и история изменений сохраняются автоматически на онлайн-площадке – в облаке. Для доступа в него членам команды нужен только интернет. Чтобы зафиксировать макет на определенном этапе, создают резервную копию и после продолжают работу в основном документе. 

Маркетинг

Читайте также:

Как работают алгоритмы Тик Ток и попасть в рекомендации

Как работают алгоритмы Тик Ток и попасть в рекомендации

Компоненты

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

Обратный звонок Calltouch – пример такого полезного компонента. Окно появляется ровно в тот момент, когда посетитель хочет совершить звонок. Вы будете оставаться на связи с клиентами в нерабочее время, в выходные и праздничные дни. 

Также можно подключить другие виджеты Calltouch для увеличения конверсии сайта и роста продаж. Зарегистрируйтесь и добавьте интерактива на свой сайт уже сегодня. 

Фреймы

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

Если вам необходимо переместить кнопку обратного звонка и фото на всех фреймах, сгруппируйте эти элементы (Object → Group Selection). Проверьте слои на предосмотре, сохраните результат. Готовый фрейм можно скачать в удобном формате. 

Сетки

Допустим, вам необходимо настроить расположение товаров в прототипе интернет-магазина. Сетка (Layout Grid) поможет скорректировать промежутки между ними (Gutter), расстояния от краев фрейма (Margin), а также размеры, количество (Count), цвет (Color) карточек с каждым продуктом. Сеток во фрейме может быть сколько угодно – отдельно для каждого графического компонента или группы. Цвет и параметры сетки легко поменять. Предусмотрено 12 колонок для крупных объектов, 24 – для мелких. Вертикальные линии подойдут для работы с текстом.

Еще одна функция – наглядная верстка. Вы сразу можете убедиться, что элементы выглядят одинаково на разных устройствах. 

Десктопная версия

Ее скачивают на Windows, MacOs, Android, iOS для загрузки собственных шрифтов и работы офлайн. Работу из десктопной версии можно импортировать в браузерную. Фигма – редактор с английским интерфейсом, поэтому не доверяйте ресурсам, на которых якобы можно скачать русскоязычную версию. Воспользуйтесь официальным сайтом. Дополнительно загрузите шаблоны. 

Условная бесплатность

Для самостоятельной работы и двух специалистов подойдет бесплатный тариф Starter. В него включены:

• 3 проекта;
• 2 библиотеки от Figma;
• 30 суток облачного хранения истории проекта;
• доступ для двух человек.

За 12$ в месяц с каждого члена команды доступен тариф Professional. Его преимущества:

• неограниченное количество проектов;
• множество библиотек;
• неограниченное хранение истории;
• доступ по приглашению.

Тариф Organization за 45$ в месяц дает вам полный доступ к работе в Figma. Список возможностей:

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

Доступна демо-версия.

Figma для дизайнеров

Есть масса графических редакторов – Photoshop, Adobe XD, Sketch, Canva. Но в Фигме целый ряд уникальных преимуществ для дизайнера:

• интуитивно понятный интерфейс;
• возможность командной работы через любые удобные браузеры, устройства и ОС;
• система шрифтов Google Fonts;
• возможность сохранить проект в формате Sketch (для Mac OS);
• возможность оставлять комментарии участникам команды;
• отзывчивая техподдержка;
• возможность разрабатывать не просто дизайн, а живой макет;
• облачное хранение.

Недостатки Фигмы

Какие нюансы учесть перед регистрацией в Фигма:

1. Искажение линейных иллюстраций. После копирования PNG, JPG и SVG-файлов Фигма добавляет пиксели.
2. Небезопасное хранение файлов. Тариф Starter не защищает файл от копирования и использования макета на любом этапе работы.
3. Нужен стабильный доступ в интернет. Фигма не предназначена для использования офлайн, но есть способ это обойти: зайдите в программу, дайте ей время загрузить все необходимое и работайте не в сети. Или скачайте десктопную версию.
4. Только английский интерфейс. Пользуйтесь инструкциями, если не знаете английского языка.

Начало работы в Фигме

Зайдите на официальный сайт и зарегистрируйтесь: кнопка Create one. Затем в правом верхнем углу кликните на кнопку +New. Так вы создадите файл. Задайте необходимые параметры и преступайте к разработке макета. 

Также вы можете скачать приложение. Зайдите на сайт Figma, выберите «Products», «Downloads», укажите продукт и вашу ОС. Либо нажмите на кнопку «Try Figma for free».

Маркетинг

Читайте также:

Как сделать расширенный сниппет в Яндекс и Google

Как сделать расширенный сниппет в Яндекс и Google

Коротко о главном

• Фигма – уникальная платформа для создания любых макетов – от несложных графических объектов до прототипов сайтов.
• Работать над проектом можно в команде в режиме онлайн. 
• Вся информация хранится в облаке.
• Есть десктопная версия.
• Доступ к редактированию открыт через любые устройства, браузеры, ОС.
• Платные тарифы надежнее и функциональнее.
• Фреймы можно скачать в удобном формате, с необходимыми компонентами: кнопками, фото, текстами, меню и списками.