Figma — самый популярный в мире облачный инструмент для дизайна. Ею пользуются все: от UI/UX-дизайнеров до предпринимателей, от разработчиков до маркетологов. Даже в бесплатном тарифе Figma предлагает мощные возможности, и в этом руководстве вы изучите её с нуля до продвинутого уровня.
Что такое Figma?
Figma — это браузерный инструмент для дизайна и прототипирования. Ничего устанавливать на компьютер не нужно: работать можно прямо в браузере (есть и десктопное приложение). Благодаря совместной работе в реальном времени над одним файлом могут одновременно трудиться несколько человек.
Ключевые особенности Figma:
- Облачная платформа — доступ откуда угодно
- Совместная работа в реальном времени — как в Google Docs
- Бесплатный тариф — достаточно для личного использования
- Система компонентов (component) — повторно используемые элементы дизайна
- Auto Layout — автоматическое выравнивание и изменение размеров
- Прототипирование — создание интерактивных прототипов
- Dev Mode — экспорт CSS/кода для разработчиков
Начало работы с Figma
Создание аккаунта
Создайте бесплатный аккаунт на figma.com. Войти можно в один клик через аккаунт Google. Бесплатный тариф включает:
- 3 файла Figma
- Неограниченное число личных черновиков (draft)
- История версий за 30 дней
- Базовая поддержка компонентов и стилей
Знакомство с интерфейсом
Интерфейс Figma состоит из четырёх основных частей:
Левая панель — слои и страницы:
Показывает все элементы файла в виде иерархии. Здесь же можно переключаться между страницами.
Верхняя панель инструментов:
Здесь находятся основные инструменты: выделение (V), Frame (F), фигура (R), перо (P), текст (T) и рука (H).
Правая панель — свойства:
Здесь настраиваются размер, цвет, шрифт, эффекты и другие свойства выбранного элемента.
Центральная область — холст (Canvas):
Бесконечное белое пространство, на котором вы создаёте дизайн. Можно приближать и отдалять изображение.
Основные инструменты
Frame (F)
Frame — базовый строительный блок вашего дизайна. Он используется для создания веб-страницы, экрана мобильного приложения или любой другой области.
Часто используемые размеры Frame:
- iPhone 15 Pro: 393 x 852
- Desktop: 1440 x 900
- iPad: 834 x 1194
- Instagram Post: 1080 x 1080
Совет: нажмите клавишу F, и в правой панели можно выбрать готовые размеры устройств.
Инструменты для фигур
- Rectangle (R): прямоугольник — для кнопок, карточек, фонов
- Ellipse (O): круг и эллипс — для фотографий профиля, иконок
- Line (L): линия — для разделителей
- Polygon: многоугольник — для нестандартных фигур
- Star: звезда — для элементов рейтинга
Текст (T)
Клавишей T включите инструмент «Текст». В правой панели можно настроить:
- Font: доступна вся библиотека Google Fonts
- Размер: в пикселях
- Насыщенность: Regular, Medium, Semi Bold, Bold
- Высота строки (Line height): расстояние между строками
- Межбуквенный интервал (Letter spacing): расстояние между буквами
Цвет и стиль
У каждого элемента есть свойства заливки (fill), обводки (stroke) и эффектов (shadow, blur).
Советы по выбору цвета:
- Создавайте гармоничные цветовые палитры в Coolors
- Просматривайте свою палитру на реальном сайте в Realtime Colors
- Берите образцы уже использованных цветов пипеткой Figma (клавиша I)
Система компонентов (Component)
Компоненты — самая мощная возможность Figma. Превратив элемент дизайна в компонент, вы сможете использовать его повторно где угодно. Стоит изменить главный компонент — и все его копии обновятся автоматически.
Создание компонента
- Выделите элемент дизайна
- Щёлкните правой кнопкой мыши и выберите «Create Component» (или Ctrl+Alt+K)
- Компонент станет фиолетовым — это главный компонент (main component)
Использование компонента
Если скопировать главный компонент и вставить его, появится «instance» (экземпляр). Экземпляры:
- Автоматически получают изменения главного компонента
- Позволяют локально менять такие свойства, как текст и цвет (override)
- Позволяют вносить правки только в конкретную копию, не меняя сам компонент
Variants (варианты)
Разные состояния компонента настраиваются с помощью вариантов. Например, компонент кнопки:
- State: Default, Hover, Active, Disabled
- Size: Small, Medium, Large
- Type: Primary, Secondary, Outline
Так из одного компонента кнопки вы получаете 12 разных комбинаций.