Figma: Пошаговый гайд как работать в программе

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

В облаке предусмотрена совместная работа над проектом. Сегодня речь пойдёт о бесплатном сервисе Figma. Подробно опишем возможности этого графического редактора и приведем пример, как работать в Фигме.

Figma, что это за программа?

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

Разработчики постоянно делают улучшения и выкатывают новые обновления. Большой вклад вносят и обычные пользователи, которые пишут плагины.

В каких проектах используется Figma?

1. Разработка интерфейса – иконок, блоков, кнопок, форм с добавлением эффектов.
2. Прототипы – модели будущих сайтов, которые можно адаптировать под цифровые устройства.
3. Векторная графика – иконки и стикеры. Поддерживается сохранение в формате .svg.
4. Создание диаграмм и графиков.
5. Отправка макета разработчикам для внедрения в проект.

После того как дизайн готов, передаем сайт в работу. Делается это двумя способами: через ключ API или сохранения html-документа. Зависит от движка, на котором разрабатывается web-сайт.

C CMS придётся повозиться, чтобы подогнать вёрстку под веб-сайт. В конструкторе сделать легче, так как там уже внедрен механизм, позволяющий настроить импорт из Figma.

Фигма онлайн графический редактор. Интерфейс программы.

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

Чтобы создать проект, нажимаем «Create New». В списке четыре кнопки.

1. Design File – создание проекта.
2. FigJam Board – доска для творческих идей. Добавляем графику.
3. Slide Deck – создание слайдов.
4. Import – для импортирования графики в программу. Применяется для ранее сохраненного шаблона.

При нажатии Design File откроется редактор.

В программе можно рисовать формы и добавлять картинки.

Фрейм является холстом, где размещаются элементы сайта. Чтобы создать его, нажмите кнопку и выберите инструмент Frame, как показано на скриншоте.

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

Щелкните, чтобы создать новый макет с фиксированной шириной и высотой под смартфон или ПК. Если нужно нарисовать Frame произвольного размера, то удерживайте кнопку мыши и ведите по холсту.

Сайт – это многостраничник, поэтому для каждой страницы нужен новый фрейм.

Боковые свойства для настройки объекта. Справа находятся две вкладки.

1. Design – изменяет ширину, высоту, угол, а также функция Auto Layout. Эта опция делает автоматический подгон всех элементов под размер фрейма.
2. Prototype – переходы между фреймами. Этот раздел устанавливает направляющие в Фигме. При активации указываем путь и связываем страницы друг с другом. Дополнительная опция – эффект переходов. Можно сделать плавный или резкий скачок. Функция будет полезна при скролинге экрана.

В редакторе есть примитивы. В процессе они будут помогать разрабатывать дизайн для сайта или приложения.

Pen и Pencil рисуют векторную графику из точек. Пример на скриншоте. Читайте ниже: как вырезать в Фигме.

Text – текстовое поле, предназначенное для названия или составления описания. Изменить шрифт можно в панели свойств.

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

Плагины – приносят в Figma дополнительные возможности. Установить их можно в специальной панели. Откройте её и перейдите во вкладку Plugins.

С основными функциями разобрались, перейдём к созданию макета.

Как создать приложение через графический редактор Figma?

Пользователи чаще проводят время за смартфонами, чем за ПК, поэтому проект сделаем для телефонов. Открываем рабочую область и добавляем фрейм. Выберем iPhone 14 & 15 Pro.

По умолчанию ширина и высота – 430 на 932. Иконок будет много, поэтому изменим параметр Height на 1464, чтобы все уместить.

Выберем тематику: софт для мобильных телефонов.

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

Приведем пошаговую инструкцию.

Шаг 1: Разместим задний фон

Добавим Rectangle, для этого выберем инструмент из панели управления и полностью покроем рабочую область. Изменим цвет на 0F181E.

Придумаем также имя слоя. Например, Background. Рекомендуется всем слоям давать осмысленные названия – так будет проще разобраться, когда проект станет больше.

Шаг 2: Рисуем шапку

Здесь используем примитиву Rectangle. Цвет: 173B56. Ширина и высота – 430 на 100 пикселей.

Обратите внимание – в шапку были добавлены иконки. Найти их можно в плагинах. Например, в Icons8.

Нажимаем кнопку в панели управления. Прописываем название в строке поиска. Выберем плагин из результата выдачи. Устанавливаем.

После этого плагин установится. Его можно вызывать из контекстного меню Plugins.

Один блок готов. Чтобы легче управлять им, нужно объединить блоки.

Как сгруппировать элементы в Фигме?

Для этого поочередно выберите мышкой каждую картинку, при этом удерживая клавишу CTRL. Вызовем контекстное меню и нажмём Group Selection. Кстати, есть вариант вместо Group применить Frame. Оба пункта меню находятся рядом.

После объединения имя будет Group с порядковым номером. Лучше переименовать в Header.

Шаг 3: Добавляем галерею

На многих сайтах можно увидеть карусель с картинками. Её используют для того, чтобы показать пользователям последние записи. Нарисуем галерею. Добавим в ряд несколько картинок. Найти изображения можно на бесплатных фотостоках.

Все элементы объединим в группу. Также добавим текст «Галерея» и шрифт «Inter».

Пример, как добавить шрифт в Фигму:

Если посмотреть на border с надписью «Галерея», то мы увидим, что здесь он представлен как не цельный прямоугольник, а слегка скошенный. Добиться этого можно отредактировав фигуру. Покажем пример.

Вот фигура прямоугольник (скриншот ниже). Щелкните по ней дважды. Появятся точки. Захватите мышкой и тяните. После этого фигура начнет менять вид.

Таким образом редактируются не только прямоугольники, но любые примитивы: круг, звезда, полигон.

Шаг 4. Раздел «Популярные приложения»

Сюда входят программы, которые чаще всего покупают или скачивают. Пример структуры ниже.

Добавили нововведение – звезду. Использовали плагин Icons8, чтобы подобрать подходящую иконку. Кнопка «Показать ещё» состоит из красного фона (цвет D24D4E) и белого шрифта.

Шаг 5: Категория «Новинки»

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

Шаг 6: «Недавно добавленные»

Уже имеется похожий раздел – Галерея, но там всего лишь картинки. Нужно добавить названия.

В тексте использовали маркированный список. Создать его несложно – щелкаем по текстовому полю и выбираем опцию, как показано на скриншоте.

Шаг 7. Делаем активные ссылки

Каждая кнопка – это ссылка, ведущая на другую страницу. При щелчке откроется краткое описание приложения.

Чтобы сделать направляющие в Фигме, нужно создать дубликат страницы, удалить лишнее и заполнить поле текстом. Пример ниже.

Запустили плагин Lorem Impus. Он генерирует случайный текст в любом количестве.

Это облегчает заполнение макета Figma. Использовать легко – выбираем текстовое поле, щелкаем по нему правой кнопкой мыши, нажимаем Lorem Impus. После этого программа предложит заполнить параметры. Устанавливаем количество строк и щёлкаем Generate.

Две страницы готово. Делаем направляющие в Фигме. Переходим во вкладку Prototype. При наведении на любую из картинок появится кружок. Если указать на него, то ещё добавится плюс, щёлкаем и идем на другую страницу. Пример ниже.

Дальше выбираем способ, при каких условиях будет осуществляться переход. По умолчанию «On Tap» и «Navigate To». Если поменять опцию на «Scroll To», то можно установить якорные ссылки и делать переходы с прокручиванием. Первое тестирование. Щёлкаем по кнопке Present.

Если всё нормально, появится приложение. Нажимаем кнопки, для которых установили направляющие Фигма – будет происходить переход.

Внимание: дизайнер может столкнуться с проблемой, когда вместо одного слоя мышкой захватывается другой. Такое случается, если в блоке слишком много мелких деталей. Избежать этого можно путем отключения некоторых слоев. Достаточно повесить на них замок.

Если стоит цель создать стоящий продукт, нужно придумать логотип. Поручить это можно искусственному интеллекту. Подойдёт Ideogram для генерации лого.

Для нейросети составили следующий prompt:

Прежде чем генерировать, нужно перевести на английский.

В итоге за несколько секунд получим четыре лого.

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

Как сохранить проект в Фигме?

На платформе для сохранения проектов поддерживается четыре формата: jpg, png, svg и pdf. Чтобы экспортировать проект, нужно выбрать фрейм, нажать Export и щелкнуть по кнопке. Пример на картинке.

При скачивании можно изменить масштаб. По умолчанию 1X. Доступно увеличение в четыре раза, пример на скриншоте.

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

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

Ещё вариант «как сохранить в фигме» – это SVG форма. Используется для векторной графики, чтобы вырезать сложные фигуры и сохранять без фона. Подходит для создания стикеров и иконок.

Сообщества Figma

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

В строке прописываем название, например «landing page», получаем список. Любой проект открывается через редактор Figma.

7 вопросов по работе Figma

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

№1. Как вырезать область в Фигма?

Проще всего это сделать удалив задний фон. Для этого есть специальный плагин. Открываем инструмент Resources и прописываем RemoveBG.

А как вырезать в Фигме через инструмент «Pen»?

Загружаем картинку Pen, выделяем объект и заливаем его – свойство Fill.

Создаём маску. Выбираем слой Vector 1. Правой кнопкой вызываем контекстное меню и Use AS Mask или клавиши Ctrl+ALT+M. Создается группа с названием Mask group, переносим туда свою картинку, занимаем верхний уровень и убеждаемся, чтобы она стояла выше вектора. Готовый пример ниже.

№2. Как в Фигме удалить элемент?

Делается это с помощью специальной клавиши. Выбираем элемент и нажимаем Delete.

№3. Как добавить картинку в Фигме?

Есть два способа это сделать.

Первый – через Place Image. Открываем меню, где находятся примитивы Rectangle, Star и другие. Нажимаем Place Image и загружаем.

Второй – через Drag and Drop. Просто переносите файл с ПК в рабочую область.

№4. Как в Figma объединить два элемента в один?

Для этого есть две функции – Group Selection и Frame Selection. Первая создаёт группу, вторая объединяет в Frame. Быстрый способ – это горячие клавиши. Выделяете несколько объектов и нажимаете:

• Ctrl + G – группа
• Ctrl + Alt + G – фрейм

Так же можно и разгруппировать, выбрав в меню Ungroup.

№5. Как сохранить в Figma?

В статье приводили пример, как сохранить картинки в Figma. Вариант подходит для баннеров. Но что делать, если нужно сохранить проект в Фигме, чтобы потом перенести на сайт?

Для этого есть формат HTML. Он сохранит всё, включая CSS стили, документ и картинки. Поэтому используем его, чтобы скачать. Мы протестировали плагины. Лучший из них оказался этот.

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

Хотя в Figma и предусмотрена история, где можно сделать откат, но лучше хранить работу у себя на компьютере. Чтобы сделать Save, перейдите в меню и нажмите «File->Save Local Copy».

№6. Как перенести дизайн на конструктор?

Конструктор позволяет создавать сайты в онлайне, не соприкасаясь с кодом. Добавляете блоки и настраиваете их. Преимущество такого подхода – работа в облаке без использования дискового пространства, что в целом упрощает сайтостроение. Недостатком является, то что многие модули являются платными.

Перенести дизайн из Figma в конструктор проще простого. Сначала генерируем API. Переходим в Settings.

Находим раздел Personal access tokens и нажимаем Generate new token. Заполняем поля Token Name и Generate Token.

Копируем API, переходим в конструктор и указываем API и ссылку на проект.

№7. Как добавить шрифт в Фигму?

На платформе можно скачать шрифты. Для этого в профиле пользователя «Settings». Выбираем «Download Installer».

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

Вместо вывода

Графический редактор Figma похож на альтернативный софт для ПК. Интерфейс простой, а даже если какие-то функции отсутствуют, всегда можно заменить плагинами.

Создавать макеты в Figma можно бесплатно, платные тарифы распространяются только на некоторые функции и плагины. Если ищете альтернативу десктопной версии, попробуйте этот редактор.