Figma — интерфейс-дизайн и прототипы

1. Что такое Figma и зачем она нужна

Figma — это векторный редактор интерфейсов, работающий в браузере и в настольном приложении. Главное преимущество — совместная работа в реальном времени: несколько человек одновременно правят один макет, как в Google-документах.

Сценарии использования:

• дизайн макетов сайтов и мобильных приложений;
• создание интерактивных прототипов и кликабельных сценариев;
• дизайн-системы, компоненты и библиотеки для команды;
• передача макетов разработчикам со спекой (параметрами стилей).

2. Интерфейс и настройка

После входа на figma.com ты попадаешь в хаб файлов. Нажми New file, чтобы создать файл. Основные зоны интерфейса:

• Панель инструментов (сверху) — инструменты, режимы, экспорт;
• Canvas (холст) — бесконечная рабочая область;
• Левая панель — список страниц и слоёв;
• Правая панель — свойства выделенного объекта.

Удобные горячие клавиши для навигации:

3. Фреймы и размеры макета

Работа начинается с фрейма — прямоугольной области, обозначающей экран устройства или секцию сайта. Создать фрейм: инструмент Frame (F) или горячая клавиша F.

iPad Pro 11"      # пресет планшета
iPhone 14          # пресет телефона
Desktop 1440x900   # стандартный десктоп для сайтов
Frame              # произвольный размер (R, затем размер)

Для веб-макетов используют ширину 1440 или 1280 px, для мобильных — 390 или 375 px.

Сетка и колонки

Выдели фрейм и в правой панели нажми Layout grid. Добавь сетку с колонками (Columns): это поможет аккуратно расположить контент.

4. Фигуры и векторные инструменты

Основные инструменты панели:

У выделенной фигуры в правой панели меняются заливка, обводка, скругление углов (Radius) и прозрачность. Скругление угла: потяни за жёлтый кружок внутри прямоугольника.

Работа с путями (Pen)

Инструмент Pen строит кривые по опорным точкам. Клик ставит угловую точку, зажатие с протяжкой — точку с кривизной (безе). Двойной клик по точке снимает выделение.

5. Текст и типографика

Инструментом Text (T) создаётся текстовый слой. Важная особенность: фиксированная ширина (Auto width) или перенос текста по ширине (размер рамки).

• Auto width — текст растёт в одну строку;
• Fixed height — обычный абзац с переносом;
• Auto height — высота растягивается по тексту.

В правой панели настраиваются семейство шрифта, начертание, размер, межстрочный интервал (Line height), трекинг (Letter spacing).

Текстовые стили

Создай стиль текста через иконку «+» рядом с Typography в правой панели. Стиль можно применять к любому тексту позже.

6. Слои, группы и имена

Каждый объект на холсте — это слой. Слои показаны на левой панели. Правильная организация — залог удобного файла:

• давай слоям осмысленные имена (btn-primary вместо Rectangle 3);
• объединяй связанные объекты в группы: Ctrl + G;
• используй страницы (Page) слева сверху для разделов проекта.

Быстрое переименование: двойной клик по имени слоя или Ctrl + R.

Порядок слоёв (z-index)

Верхний слой в списке — наверху холста. Shift + ] — поднять выше, Shift + [ — опустить ниже.

7. Auto Layout — авто-лейаут

Auto Layout превращает фрейм в гибкую «коробку», которая автоматически перестраивает дочерние элементы. Это основа современных макетов и компонентов.

Создание: выдели элементы → нажми Shift + A или иконку Auto layout в правой панели. Настройки:

• направление (Row / Column);
• отступы между элементами (Gap);
• отступы от краёв (Padding);
• горизонтальное и вертикальное выравнивание;
• распределение (Space between, Center и т.д.).

Состав навбара (Auto layout, Row):
[ Логотип ]  [ Каталог ]  [ О нас ]  [ Контакты ]  [ Кнопка ]

Число в скобках Gap = отступ между элементами

8. Стили: цвет, текст, эффекты

Стили — это переиспользуемые значения. Изменишь стиль — обновится всё, что его использует. Виды:

• Color styles — цвета заливок, обводок, текст;
• Text styles — параметры шрифта;
• Effect styles — тени, блюры.

Создай стиль, нажав «+» рядом с соответствующей секцией правой панели. Например, придумай палитру:

primary        #2563EB   // главный синий
primary-hover  #1D4ED8
background     #F9FAFB
text-main      #0F172A
text-muted     #94A3B8
success        #16A34A

9. Компоненты и варианты

Компонент — это «мастер-объект» с экземплярами. Правка мастера обновляет все экземпляры (как класс и объекты в программировании).

Создание: выдели элементы → Ctrl + Alt + K или кнопка Create component. Экземпляр перетаскивается из панели Assets.

Варианты (Variants)

Варианты объединяют похожие состояния компонента в один: default / hover / pressed / disabled, размеры. Выбери группу экземпляров и нажми Combine as variants, затем добавь свойства (Property).

10. Прототипирование и переходы

Прототип — кликабельная связка экранов. Переключись на вкладку Prototype в правой панели и потяни за синюю точку с экрана на новый фрейм.

Настройки перехода (Interaction):

• Tap — клик по элементу;
• While hovering — наведение;
• Screen: Navigate / Overlay / Swap;
• Animation: Smart animate, Slide, Fade, Instant.

Smart animate

Smart animate плавно анимирует изменения между экранами: элементы одного имени в обоих фреймах «поедут» или «изменят размер» сами. Запуск просмотра: кнопка Present (▶) или Ctrl + Enter.

11. Экспорт и передача разработчикам

Выдели элемент и в правой панели открой вкладку Export. Форматы:

Число «2x / 3x» рядом с размером экспортирует изображение в 2–3 раза больше (для ретины).

Dev Mode

Вкладка Dev Mode показывает спецификацию: размеры, цвета, шрифты, CSS-код. Разработчику достаточно открыть файл, выбрать элемент и скопировать готовые стили.

12. Совместная работа и плагины

Figma — командный инструмент. Основные возможности:

• Комментарии — оставляй замечания прямо на макете;
• Share — ссылка на файл с правами can view / can edit;
• Multiplayer — курсоры участников в реальном времени;
• Library — публикация компонентов для всей команды.

Полезные плагины

Content Reel         # плейсхолдеры текста и фото
Unsplash             # стоковые изображения
Iconify              # библиотека иконок
html.to.design       # импорт страницы из HTML
Figma to Code        # генерация HTML/CSS

13. Дизайн-системы и библиотеки

Дизайн-система — единый набор стилей и компонентов, из которых собираются все экраны продукта. В Figma её строят три опоры:

• Токены — переменные для цветов, радиусов и отступов (например, через плагин Tokens Studio);
• Компоненты — кнопки, поля ввода, карточки с вариантами состояний;
• Библиотека — опубликованный набор, подключаемый в другие файлы через вкладку Assets.

1. Собери компоненты на странице «Library»
2. Файл → Publish as a library
3. В другом файле: Assets → Libraries → подключи библиотеку

14. Адаптивность и Constraints

Чтобы макет «жил» при изменении размера, используй Constraints (закрепление) и Auto Layout. Constraints задают поведение элемента при растяжении фрейма:

Left + Right   // элемент тянется по ширине
Top + Bottom   // элемент тянется по высоте
Scale          // масштабируется пропорционально

Практические приёмы:

• в Auto Layout используй режим Fill container вместо фиксированных ширин;
• для сетки карточек включай у колонки перенос обёртки (Wrap);
• проверяй макет на 390, 768 и 1440 — почти все поломки видны именно там.

15. FigJam, слайды и командная работа

В одном тарифе с Figma доступен FigJam — онлайн-доска для мудбордов, брейнштормов и пользовательских флоу:

• стикеры и карточки для идей;
• соединения и стрелки для сценариев;
• готовые темплейты для ретро и планирования.

Для презентации дизайна Figma умеет собирать слайды: назови страницы файла Slide 1, Slide 2 и нажми Present — получится демо по клику. Так прототипы показывают стейкхолдерам без экспорта.

Отрисовал флоу в FigJam
  → перенёс структуру в Figma
  → собрал слайды → показал заказчику

16. Финальный чек-лист макета

Перед передачей макета в разработку пройди по списку:

1. все слои переименованы, страницы разложены по разделам;
2. цвета и типографика взяты из стилей, а не нарисованы «по пикселям»;
3. повторяющиеся элементы — компоненты с понятными именами;
4. иконки экспортированы в SVG, растровые — в 2x/3x;
5. собран прототип ключевых сценариев (вход, корзина, ошибки).

Макет → Dev Mode → фронтендер
поток занимает минуты, а не недели согласований

17. Переменные и тёмная тема

Стили удобны, но для тёмной темы или нескольких брендов нужна гибкость. Переменные (Variables) хранят значения и переключают их между режимами: light/dark, бренд A/B. Создай коллекцию переменных, задай значения для каждого режима и применяй к заливкам — переключение режима в настройках файла мгновенно меняет все экраны.

Основные переменные:
Colors → color/primary:  light #2563EB · dark #60A5FA

Иерархия токенов:
Primitive  #2563EB           // сырое значение
Semantic   color/primary     // смысл, используется в макете

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

18. Горячие клавиши и быстрые приёмы

Десяток клавиш заметно ускоряет работу:

Быстрые приёмы: зажми Alt и перетащи объект — создашь копию; Ctrl + D дублирует с сохранением отступа; Shift при перемещении выравнивает по осям; двойной клик по имени слоя — переименование. Quick Actions вызывают поиск по командам, как палитра в VS Code.

19. Частые ошибки новичков

• рисуют «на глаз» без сетки и стилей — макет «поехал» при переносе в код;
• игнорируют Auto Layout — текст ломает кнопки и карточки;
• не создают компоненты — правка кнопки превращается в десятки ручных замен;
• вставляют SVG как изображение вместо Paste → это ломает возможность редактировать вектор;
• используют Auto width для длинных абзацев — текст остаётся в одну строку;
• экспортируют иконки в PNG вместо SVG — разработчик перерисовывает их вручную.

Перед передачей макета прогони чек-лист из раздела 16: большинство ошибок выше ловятся именно на нём.

20. От макета к коду: workflow и версии

Финальный пайплайн дизайнера и фронтендера в Figma:

1. макет с правильной структурой слоёв и токенами;
2. разработчик открывает Dev Mode и берёт спецификацию с CSS;
3. иконки экспортируются одной пачкой в SVG (плагин Icon Export);
4. после вёрстки пиксель-в-пиксель сверяют по макету.

Для истории правок используй Version history: снапшоты с авторами и комментариями, откат или копию в отдельный файл. При командной работе пригодится Branching — ветки дизайна, как в Git, чтобы эксперименты не ломали общий файл.

Полезные плагины передачи: Figma to Code (HTML/CSS/React), Anima и автоматические экспортёры иконок — каждый экономит часы ручной «пересборки».

Что дальше

Следующий шаг — создание полноценного макета страницы: сетка, компоненты, прототип. Затем сверстай его по курсу HTML и CSS, а анимацию добавь на JavaScript. Для работы с растровой графикой изучи Photoshop.

← Вернуться к курсам