---
title: Figma
description: Браузерный редактор для интерфейсов, дизайн-систем, прототипов и совместной работы; канонический профиль продукта вместо пересказа в AI-обзоре.
---

## Назначение

**Figma** — облачный редактор для проектирования интерфейсов и совместной работы над ними. Основной результат — макет экрана или дизайн-система, которую команда ведёт в одном файле: компоненты, переменные, страницы и прототипы доступны дизайнерам, разработчикам и заказчику одновременно.

Figma не производит готовый сайт или печатный материал. Она проектирует цифровой продукт и передаёт решения в реализацию.

## Возможности и форматы

- Совместное редактирование в браузере, комментарии и история версий.
- Компоненты и варианты, auto layout, переменные и стили для токенов.
- Прототипирование переходов, оверлеев и простых взаимодействий.
- Dev Mode с инспекцией размеров, стилей и экспортом ассетов.
- Импорт `.fig`-файлов и вставка слоёв из других редакторов; экспорт PNG, JPG, SVG и PDF.
- Плагины и API, интеграция с дизайн-токенами и репозиториями.
- Figma Slides и AI-функции внутри рабочего пространства; их состав зависит от плана и региона.

## Практический сценарий

**Адаптивный макет и handoff.** Соберите один экран в двух ширинах — 1440 и 390 — на компонентах с auto layout. Задайте цвета и отступы переменными, а не ручными значениями. Соберите прототип перехода между состояниями и проверьте его в режиме просмотра. Затем откройте Dev Mode и убедитесь, что разработчик может прочитать размеры, стили и экспортировать иконки без вопросов к дизайнеру.

Проверка результата: изменение переменной меняет цвет во всех состояниях; экран на 390 не имеет горизонтальной прокрутки; прототип проходит сценарий без «мёртвых» кнопок.

## Ограничения

- Файлы живут в облаке Figma: офлайн-работа ограничена, а владение и экспорт зависят от плана и настроек команды.
- Dev Mode, часть AI-функций и расширенные права доступа входят не во все тарифы.
- Очень большие файлы с сотнями компонентов требуют дисциплины: библиотеки, страницы и именование иначе замедляют работу.
- Макет не равен реализации: адаптивность и состояния нужно отдельно проверять в коде.
- Перенос в другой редактор возможен, но часть компонентов и прототипов теряет связи.

## Когда выбирать

Figma уместна, когда над продуктом работают несколько человек одновременно, нужна дизайн-система и регулярная передача в разработку. Для открытого формата и хранения дизайна рядом с кодом сравните с [pen.dev](https://wpcraft.ru/kb/design/tools/pen-dev.md); для self-hosted и open-source — с [Penpot](https://wpcraft.ru/kb/design/tools/penpot.md); для полностью нативной работы на macOS — со [Sketch](https://wpcraft.ru/kb/design/tools/sketch.md).

## Связанные материалы

- [UI-дизайн](https://wpcraft.ru/kb/design/ui.md) — токены, компоненты и состояния, которые ведёт Figma.
- [ИИ-дизайн: сервисы и процесс](https://wpcraft.ru/kb/design/ai/tools-and-workflow.md) — AI-сценарии Figma и проверка результата.
- [Дизайн рекламных материалов](https://wpcraft.ru/kb/design/marketing/advertising-design.md) — когда цифровой макет становится рекламным материалом.
- [Иерархия блочной темы WordPress](https://wpcraft.ru/kb/stacks/wordpress/themes/practices/block-theme-hierarchy.md) — как макет превращается в блоки темы.

## Материалы и источники

- [Figma: справка](https://help.figma.com/hc/en-us)
- [Figma: возможности и продукты](https://www.figma.com/)
- [Figma AI](https://www.figma.com/ai/)
- По официальной документации, 2026-11-04.