30 мая 2025
Как работать в Figma: обзор основных функций
Figma — это популярный инструмент для дизайнеров. В программе создают интерфейсы приложений, веб-сайтов, прототипы и графические элементы для самых разных проектов. По данным на 2024 год, у Figma более четырёх миллионов пользователей по всему миру, и её активно используют такие крупные компании, как Microsoft, Netflix и Airbnb.
Вместе с арт-директором Марией Простяковой разберём основы работы в Figma и создадим небольшой проект из базовых элементов.
Вместе с арт-директором Марией Простяковой разберём основы работы в Figma и создадим небольшой проект из базовых элементов.
Мария Простякова
Арт-директор
Figma — это популярный инструмент для дизайнеров. В программе создают интерфейсы приложений, веб-сайтов, прототипы и графические элементы для самых разных проектов. По данным на 2024 год, у Figma более четырёх миллионов пользователей по всему миру, и её активно используют такие крупные компании, как Microsoft, Netflix и Airbnb.
Вместе с арт-директором Марией Простяковой разберём основы работы в Figma и создадим небольшой проект из базовых элементов.
Вместе с арт-директором Марией Простяковой разберём основы работы в Figma и создадим небольшой проект из базовых элементов.
В материале
- Регистрация и выбор тарифа
- Создаём новый файл
- Интерфейс Figma: изучаем главные элементы
- Настраиваем размер арт-борда и сетку
- Знакомимся с базовыми инструментами Figma
- Работаем со слоями
- Группируем объекты для удобства работы
- Работаем с цветом
- Экспортируем дизайн
- Совместная работа: генерируем ссылку для просмотра или редактирования
- Топ-3 ошибки новичков в работе с Figma и как их избежать
- Полезные ресурсы для углублённого изучения
- Резюмируем
Регистрация и выбор тарифа
Чтобы начать работать в Figma, необходимо создать аккаунт. Перейдите на сайт Figma и нажмите кнопку Get started for free. Введите свой email, придумайте пароль или войдите через Google-аккаунт. После подтверждения email вы получите доступ к Figma.
Регистрируемся в Figma
Бесплатной версии достаточно для новичков, но есть и платные тарифы с дополнительными функциями. Например, они позволят создавать больше файлов и подключать других участников к проекту. Стоимость платных тарифов начинается от $ 12.
- Скачивать программу необязательно: браузерная и десктопная версии Figma одинаковые.
Создаём новый файл
Чтобы создать новый файл в Figma, на главном экране в правом верхнем углу нажмите кнопку Design. После этого программа откроет новый пустой файл, где вы сможете начать работу над своим дизайном.
Создаём новый файл в Figma
Интерфейс Figma: изучаем главные элементы
Рабочая область в центре — это место, где вы создаёте дизайн на арт-бордах, то есть холстах. В нижней части экрана находится панель инструментов — здесь вы найдёте основные инструменты для создания текстовых блоков и фигур, размещения фото и видео. Слева расположена панель слоёв, где отображаются все элементы вашего проекта, их порядок и структура.
Изучаем главные элементы интерфейса Figma
Figma — основной инструмент UX/UI-дизайнера. Получите профессию на курсе ↓
• Освоите Figma на умном тренажёре с обратной связью и получите востребованную профессию
• Будете учиться у senior-дизайнеров и арт-директоров из СберМаркета, Газпромбанка, AGIMA и других топовых компаний
• Cможете начать поиск работы и брать первые заказы уже через 3 месяца после начала обучения
• Будете учиться у senior-дизайнеров и арт-директоров из СберМаркета, Газпромбанка, AGIMA и других топовых компаний
• Cможете начать поиск работы и брать первые заказы уже через 3 месяца после начала обучения
• Освоите Figma на умном тренажёре с обратной связью и получите востребованную профессию
• Будете учиться у senior-дизайнеров и арт-директоров из СберМаркета, Газпромбанка, AGIMA и других топовых компаний
• Cможете начать поиск работы и брать первые заказы уже через 3 месяца после начала обучения
• Будете учиться у senior-дизайнеров и арт-директоров из СберМаркета, Газпромбанка, AGIMA и других топовых компаний
• Cможете начать поиск работы и брать первые заказы уже через 3 месяца после начала обучения
А если не готовы учиться платно, освойте Figma на бесплатных занятиях ↓
Изучите базовые инструменты редактора, выполните практическое задание и добавите его в портфолио
Получите конкретные рекомендации от приглашённого эксперта по работе с Figma
Настраиваем размер арт-борда и сетку
Первым делом настройте арт-борд — ваш рабочий холст. На панели инструментов выберите Frame, сделать это можно также нажатием клавиши F. Кликните на рабочую область левой кнопкой мыши и растяните прямоугольник с фреймом. Необходимый размер можно выбрать в панели инструментов справа. Установите длину и ширину макета, например 2400 px на 1920 px.
Затем включите сетку для точного размещения элементов: в правой панели инструментов выберите Layout guide. Измените шаг, выбрав классический в 8 или 16 пикселей. Сетка поможет выравнивать объекты и создавать аккуратный дизайн.
Затем включите сетку для точного размещения элементов: в правой панели инструментов выберите Layout guide. Измените шаг, выбрав классический в 8 или 16 пикселей. Сетка поможет выравнивать объекты и создавать аккуратный дизайн.
Первый шаг — создаём арт-борд и включаем сетку
Знакомимся с базовыми инструментами Figma
Инструменты для создания базовых визуальных элементов находятся на основной панели внизу рабочей области.
Панель инструментов в FIgma
Инструменты перемещения
На первом месте — два ключевых инструмента для перемещения внутри рабочей области или макета. Move включается при нажатии клавиши V и используется для выбора объектов и их передвижения по макету, а Hand tool включается при нажатии клавиши H и используется для закрепления точки рабочей области и её перемещения в рамках экрана.
- Инструменты перемещения — это основа для удобной навигации по рабочей области в Figma. Их стоит освоить, чтобы быстро и эффективно работать с элементами макета.
Move и Hand tool — основные инструменты перемещения объектов
Чтобы приблизить или отдалить рабочую область в Figma, используйте инструмент Zoom. Нажмите клавишу Z и масштабируйте арт-борд левой кнопкой мыши. Также можно зажать Ctrl и крутить колёсико мыши или воспользоваться комбинацией клавиш Ctrl + «+» или Ctrl + «-».
- На MacBook вместо клавиши Ctrl используйте Cmd.
Фигуры
Чтобы создать геометрические фигуры в Figma, используйте инструменты на нижней панели. Выберите Rectangle или нажмите клавишу R для рисования прямоугольников или квадратов. Для кругов или овалов используйте Ellipse или клавишу O, а для прямых линий — Line или клавишу L. Кликните на арт-борде и, удерживая мышь, потяните, чтобы нарисовать фигуру нужного размера.
- Инструменты фигур — это основа для построения любых макетов в Figma. Они помогают создавать элементы дизайна, блоки, акценты и структуры.
Создаём базовые геометрические фигуры и размещаем внутри макета
Фото и видео
Чтобы добавить изображение, используйте инструмент Image/video на основной панели, также можно нажать клавиши Ctrl + Shift + K. Выберите файл с компьютера, и он появится на арт-борде. Перетаскивайте углы, чтобы изменить размер, или используйте Crop для обрезки.
- Figma сжимает изображения, если их ширина превышает 4096 px, поэтому стоит подбирать фото и видео меньшего размера.
Размещаем изображение согласно сетке проекта
Текст: шрифты, размеры, выравнивание
Для создания текстового блока выберите инструмент Text или нажмите клавишу T и кликните на арт-борде. Введите текст, а затем настройте его отображение в правой панели, где есть следующие опции:
- Шрифт. Выберите из списка доступных шрифтов любые начертания. Как правило, в Figma отображаются те шрифты, которые установлены на рабочем компьютере.
- Размер. Задайте размер шрифта, например 42 px для основного текста и 65 px для заголовка.
- Выравнивание. Используйте кнопки для выравнивания текста по левому краю, центру или правому краю.
- Чтобы текст выглядел аккуратно, экспериментируйте с межбуквенным и межстрочным интервалом: Letter spacing и Line height в правой панели.
Создаём текстовые блоки и настраиваем их
Работаем со слоями
Панель слоёв слева — важнейший инструмент для управления элементами. Каждая фигура, текст, изображение на макете — это отдельный слой. Чтобы в проекте был порядок, слои можно:
- Переименовывать. Дважды кликните на название слоя в панели и дайте ему понятное имя, например, «Кнопка_входа» или «Логотип». Это особенно важно в больших проектах.
- Упорядочивать. Перетаскивайте слои вверх или вниз, чтобы изменить их порядок. Элементы выше в списке будут отображаться на макете поверх тех, что ниже.
- Панель слоёв помогает упорядочивать элементы дизайна и управлять ими. Переименовывайте и сортируйте слои, чтобы ваш проект оставался организованным и понятным.
Наводим порядок в проекте
Группируем объекты для удобства работы
Если у вас несколько связанных элементов, например кнопка с текстом и иконкой, объедините их в группу:
- Выделите объекты, зажав Shift и кликая по ним, или обведите их курсором с зажатой кнопкой Shift.
- Нажмите Ctrl + G, чтобы сгруппировать. В панели слоёв появится новая группа.
- Дайте группе имя, например «Меню_навигации», чтобы сразу понимать, что внутри.
- Группы можно перемещать, масштабировать или скрывать одним кликом. Это упрощает работу с дизайном и помогает сохранять порядок в проекте.
Создаём группы из объектов
Работаем с цветом
Цвета и прозрачность
В Figma цвета настраиваются через панель свойств, которая находится справа на экране. Выберите объект — фигуру или текст, — затем найдите секцию Fill, то есть заливку. Кликните на цветной прямоугольник, чтобы открыть палитру. Вы можете ввести код цвета или выбрать оттенок вручную. Чтобы изменить прозрачность, используйте ползунок Opacity в той же панели: это позволяет сделать элементы полупрозрачными для эффекта наложения.
Пипетка для выбора цвета
Eyedropper помогает взять цвет с любого объекта на экране. Выберите объект, для которого нужно подобрать заливку, и нажмите клавишу I — или перейдите в секцию Fill, кликните на цвет и нажмите иконку пипетки. Затем кликните на нужный цвет в рабочей области — Figma автоматически применит его. Пипетка удобна, если вы хотите использовать цвет с другого элемента или изображения в проекте.
Окрашиваем объекты и настраиваем прозрачность
Экспортируем дизайн
Чтобы скачать дизайн из Figma, выберите арт-борд или отдельный элемент, который хотите сохранить. В нижней части правой панели найдите раздел Export. Нажмите на «+» и выберите формат: PNG, JPG или SVG. Настройте параметры, например разрешение 1x или 2x для дисплеев Retina с высокой плотностью пикселей. Затем нажмите Export и выберите папку на компьютере для сохранения файла.
Сохраняем дизайн в Figma
Совместная работа: генерируем ссылку для просмотра или редактирования
Чтобы передать дизайн коллегам или разработчикам, создайте ссылку. В правом верхнем углу файла нажмите кнопку Share. В открывшемся окне выберите, кто может просматривать файл: Anyone, то есть любой со ссылкой, или конкретные пользователи. Установите права доступа: View для просмотра или Edit для редактирования. Кнопка Edit будет активна, только если вы делитель файлом с зарегистрированным пользователем Figma.
Скопируйте сгенерированную ссылку и отправьте её. Разработчики смогут открыть дизайн в браузере, изучить элементы и получить доступ к стилям и размерам через режим Inspect.
Скопируйте сгенерированную ссылку и отправьте её. Разработчики смогут открыть дизайн в браузере, изучить элементы и получить доступ к стилям и размерам через режим Inspect.
Создаём ссылку на дизайн в Figma
Топ-3 ошибки новичков в работе с Figma и как их избежать
Рассмотрим самые распространённые ошибки:
- Игнорировать слои и их именование. Проблема: хаос в проекте из-за беспорядка в слоях. Решение: называть слои согласно их содержанию, например: ButtonOK, Header.
- Не использовать сетку. Проблема: элементы располагаются хаотично, их сложно выровнять. Решение: включить сетку и размещать элементы в соответствии с ней.
- Не использовать горячие клавиши. Проблема: медленная работа из-за ручного выбора инструментов. Решение: освоить базовые горячие клавиши и их комбинации.
- Основные горячие клавиши:
- V: переключение на инструмент Move — перемещение объектов.
- R: выбор инструмента Rectangle — прямоугольник.
- T: активация инструмента Text — текст.
- O: инструмент Ellipse — эллипс.
- I: инструмент Eyedropper — пипетка для выбора цвета.
- Shift + G: включение и выключение сетки.
- Ctrl + C / Ctrl + V: копировать/вставить элементы.
- Ctrl + D: дублировать выделенный объект.
Полезные ресурсы для углублённого изучения
Официальная документация и туториалы
Официальная документация Figma — это отличный старт для новичков. В Figma Learn вы найдёте подробные статьи и гайды на английском языке по всем инструментам и функциям, от создания проектов до экспорта.
Онлайн-курсы и видео
Многие профессиональные дизайнеры и разработчики изучают Figma при помощи онлайн-уроков и комплексных онлайн-курсов. Бесплатный курс «Обучение основам работы в Figma с нуля» от Нетологии поможет освоить базовые инструменты и создать первые макеты. Также вы можете пройти бесплатный урок «Инструменты UX/UI-дизайнера: работа с Figma и нейросетями», чтобы узнать, как искусственный интеллект помогает в создании интерфейсов и оптимизации работы в Figma.
Сообщества и шаблоны
Figma Community — это раздел на сайте Figma, где дизайнеры со всего мира делятся шаблонами, плагинами и файлами проектов. Здесь есть бесплатные макеты для сайтов, приложений или презентаций, которые можно использовать как основу для своих работ. Там же доступны плагины для автоматизации задач, например добавления иконок или генерации текста. Это отличный способ вдохновиться, сэкономить время и изучить, как устроены профессиональные дизайны.
Резюмируем
Figma — доступный инструмент, который подходит как новичкам, так и профессионалам. Освоив базовые функции, вы заложите фундамент для создания качественных дизайнов и для управления дизайн-проектами. Попробуйте применить описанные шаги на практике: создайте свой макет, экспериментируйте с цветами и композицией.
Чек-лист: что важно знать новичку
- Где расположены основные элементы интерфейса: панель инструментов, рабочая область, меню слоёв.
- Как создать новый файл, настроить арт-борд и сетку.
- Какие есть инструменты для рисования фигур: Rectangle — R, Ellipse — O, Line — L — и настройки заливки.
- Какие есть основные горячие клавиши: V — перемещение, T — текст, I — пипетка.
- Как экспортировать дизайн в PNG или JPG и сгенерировать ссылку для просмотра.
- Где найти встроенные туториалы Figma или онлайн-курсы для закрепления навыков.
Читать также
Мнение автора и редакции может не совпадать.
Чтобы быть в курсе всех новостей и не пропускать новые статьи, присоединяйтесь к Telegram-каналу Нетологии.
Чтобы быть в курсе всех новостей и не пропускать новые статьи, присоединяйтесь к Telegram-каналу Нетологии.
Мария Простякова
Арт-директор
Оцените статью