Figma для разработчика: работа с макетами, Dev Mode, MCP и выбор тарифа

11.09.2026 #Tools & Soft Skills

В этой статье разберём, как разработчику читать макеты Figma, снимать размеры, проверять состояния компонентов и переносить структуру в код. Отдельно рассмотрим Dev Mode, подключение MCP к ИИ-редактору и выбор тарифа для работы с собственными и клиентскими проектами.

Тарифы и ограничения проверены 11 сентября 2026 года. У Figma отдельно существуют план команды, тип места пользователя и права на конкретный файл. Перед оплатой проверь все три: покупка места в своей команде не означает, что нужный доступ появился в команде клиента.

С чего начать: бесплатный просмотр, Dev seat или Full seat

Если ты получаешь макет и верстаешь по нему несколько экранов, начни с бесплатного просмотра. С правом can view доступны свойства слоёв, комментарии, базовые фрагменты кода и экспорт. Полный Dev Mode для этого не обязателен. Возможности копирования и экспорта также зависят от ограничений владельца файла. Это описано в справке о панели свойств.

Для регулярной передачи макетов в разработку и работы через MCP я бы выбирал Professional с Dev seat. Если ты ещё рисуешь интерфейсы и редактируешь дизайн в платной команде, рассматривай Full seat. Это рекомендация по сценарию работы: сначала определи, что именно требуется от Figma.

Вариант	Цена в USD за место	Когда рассматривать
Starter / бесплатный просмотр	$0	Изучение макетов и нерегулярная вёрстка
Professional — Dev	$12 в месяц при годовой оплате	Разработка по макетам, Dev Mode, регулярный MCP
Professional — Full	$16 в месяц при годовой оплате	Разработка и редактирование дизайна
Organization — Dev / Full	$25 / $55 в месяц, годовая оплата	Работа в организации с общими библиотеками и управлением
Enterprise — Dev / Full	$35 / $90 в месяц, годовая оплата	Требования компании к управлению и безопасности

Это цены из официального прайса Figma. У Professional есть помесячная оплата: её стоимость смотри с переключателем Monthly. Годовой Dev seat по указанной ставке — $144 за год, Full — $192. Налоги и итоговую сумму проверяй перед подтверждением платежа.

Collab не заменяет Dev seat: он не открывает Dev Mode. Full уже включает Dev Mode — второе место Dev тому же пользователю для этого покупать не нужно. На Starter полноценный Dev Mode недоступен. Различия мест перечислены в руководстве для администраторов.

Что проверить фрилансеру перед покупкой

Сначала открой именно рабочий файл клиента и уточни, какой команде он принадлежит. Попроси администратора проверить твоё место и доступ к этому файлу. На Professional подписка относится к одной команде; View-места бесплатны, платные места учитываются в её счёте. Подробности — в правилах биллинга Professional.

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

Как разбирать макет перед вёрсткой

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

Найди актуальный экран. Уточни, какая версия согласована, и сохрани ссылку на конкретный frame в задаче.
Посмотри прототип. Проверь переходы, модальные окна, раскрывающиеся элементы и последовательность действий.
Выпиши структуру. Например: ограниченный по ширине контейнер, панель фильтров, сетка карточек, пагинация.
Найди повторения. Одинаковые кнопки, поля и карточки должны переиспользовать компоненты проекта.
Уточни недостающие состояния. Загрузка, ошибка, пустая выдача, длинный текст, disabled и клавиатурный фокус часто не нарисованы на основном экране.

Задавай вопросы в измеримой форме: «На ширине 768 пикселей карточки остаются в две колонки или переходят в одну?» полезнее, чем «Какой здесь адаптив?». Записывай согласованный ответ рядом со ссылкой на макет.

Приёмы, которые сокращают навигацию

Shift + 1 — показать весь контент, Shift + 2 — приблизить выделенный объект. Сначала выбери слой в дереве, затем переходи к нему. Команды масштабирования.
Option на macOS / Alt на Windows — после выделения объекта наведи указатель на соседний, чтобы увидеть расстояния. Проверяй, что выбран нужный вложенный слой. Измерение и инспектирование.
Copy link to selection в контекстном меню слоя — ссылка на конкретный frame или компонент. Прикладывай её к задаче, PR и запросу ИИ. Работа со ссылками на узлы.
Сравнивай одинаковые элементы. Если у двух кнопок разный отступ, сначала выясни, разные ли это варианты. Не создавай CSS-исключение из-за случайного отличия в макете.

Auto Layout: как понять поведение, а не только размеры

У объекта может быть ширина 320 пикселей в текущем макете, но это ещё не требование написать width: 320px. Посмотри режим размеров по каждой оси: Fixed фиксирует размер, Hug contents подстраивает контейнер под содержимое, Fill container занимает доступное место в родительском Auto Layout. Учитывай также min/max, направление, gap и padding. Определения — в руководстве по Auto Layout.

Перевод в CSS зависит от структуры страницы. Горизонтальная группа может стать flex-контейнером, повторяющаяся сетка — CSS Grid. Fill container иногда соответствует flex: 1, иногда width: 100%; выбор зависит от родителя и соседей. Это инженерное решение, а не универсальная замена одного свойства другим.

Допустим, в макете есть карточка с вертикальным расположением содержимого, отступом 24 пикселя и кнопкой по ширине текста. Ниже — пример реализации, а не скопированный вывод Figma. Значения токенов нужно заменить на значения проекта.

:root {
    --space-card: 1.5rem;
    --space-content: 1rem;
    --radius-card: 0.75rem;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-card);
}

.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-content);
    min-width: 0;
    padding: var(--space-card);
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-card);
}

.card__title {
    margin: 0;
    overflow-wrap: anywhere;
}

.card__action {
    align-self: flex-start;
    margin-top: auto;
}

Этот вариант самостоятельно перераспределяет колонки по доступной ширине. Он подходит, если такое поведение согласовано. Если дизайн требует строго определённого числа колонок на конкретных диапазонах, задай соответствующие media queries. Проверь длинный заголовок, увеличенный текст и пустое описание: один статичный frame этого не доказывает.

Типографика, переменные и экспорт

Для текста снимай семейство шрифта, начертание, размер, line-height и letter-spacing. Не компенсируй отсутствующий шрифт случайными отступами: после загрузки правильного шрифта размеры изменятся. Значение line-height в пикселях не переносится в CSS как безразмерное число: для размера 16px и межстрочного интервала 24px можно использовать line-height: 1.5.

Сопоставляй переменные дизайна с токенами репозитория. Например, цвет текста text/secondary лучше связать с существующим --color-text-secondary, чем размножать hex-значение по селекторам. Если в макете есть светлая и тёмная темы, проверь обе.

Для иконок обычно подходит SVG, для фотографий — растровый формат с последующей оптимизацией под сайт. После экспорта SVG проверь viewBox, обрезку и зашитые цвета. Текст кнопок и заголовки оставляй текстом, а не экспортируй картинками. Наличие экспорта не заменяет проверку лицензии на шрифт или сторонний набор иконок.

Что даёт Dev Mode в ежедневной работе

Переключение — Shift + D. В Inspect удобно последовательно проверять layout, типографику, свойства компонентов и переменные. Сгенерированные фрагменты используй как справку: они не знают архитектуру твоего проекта. Доступ и расположение инструментов разобраны в руководстве по инспектированию.

Навигация по готовым макетам. Метки Ready for dev помогают отличать согласованные экраны от рабочих вариантов. Возможности представления и статусов зависят от плана. Навигация в Dev Mode.
Compare changes. Выбери верхнеуровневый frame или компонент и открой сравнение в Inspect. Так можно увидеть, какие слои и свойства изменились после начала разработки. Функция доступна с Dev или Full seat на платных планах. Сравнение изменений.
Описание компонента. Читай назначение и ограничения рядом с экземпляром. У одного визуально похожего элемента могут быть разные правила использования. Описания компонентов и переменных.

Практический сценарий: реализовал форму, получил сообщение «дизайн обновлён», открыл сравнение и составил список изменений. Это помогает оценить объём до правок в коде. Сам по себе статус Ready for dev не отвечает на вопросы о валидации, API и поведении при ошибке — их всё равно нужно согласовать.

Figma MCP: как передать макет ИИ-редактору

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

Есть два подключения: remote работает через сервер Figma без desktop-приложения и доступен на всех планах с разными лимитами; desktop требует приложения Figma и Dev или Full seat на платном плане. Figma рекомендует remote для наиболее полного набора возможностей. У сервера также есть функции записи на холст, поэтому в задаче реализации явно задай, требуется ли менять дизайн. Официальный обзор MCP.

Подключение remote MCP на примере VS Code

В палитре команд VS Code выбери MCP: Open Workspace Folder MCP Configuration для проекта или MCP: Open User Configuration для пользовательской настройки.
Добавь сервер в конфигурацию. Если другие серверы уже есть, сохрани их записи.
Запусти сервер и пройди OAuth-авторизацию Figma нужным аккаунтом.
Скопируй ссылку на frame с выбранным узлом и передай её агенту вместе с требованиями к реализации.

{
    "servers": {
        "figma": {
            "type": "http",
            "url": "https://mcp.figma.com/mcp"
        }
    }
}

Этот формат предназначен для VS Code: другие клиенты могут использовать другую схему конфигурации. Сервер поддерживает клиентов из каталога Figma; инструкции и варианты установки через плагины собраны в руководстве remote MCP. Подписка на ИИ-редактор и его лимиты учитываются отдельно от доступа к Figma.

Когда нужен desktop MCP

Он удобен, когда хочешь передавать текущее выделение в открытом приложении. Обнови Figma Desktop, открой файл, включи Dev Mode и нажми Enable desktop MCP server в Inspect. Локальный endpoint — http://127.0.0.1:3845/mcp. Приложение должно оставаться запущенным. Инструкция — в документации desktop MCP.

Remote получает нужный узел по ссылке: фраза «возьми моё выделение» без URL там недостаточна. Работа с текущим выделением относится к desktop-подключению. Это различие отмечено в описании инструментов MCP.

Какие инструменты полезны для реализации

get_design_context — получить контекст выбранного frame или слоя.
get_screenshot — получить визуальный ориентир для сравнения.
get_variable_defs — запросить используемые переменные и стили.
get_metadata — получить структуру узлов, чтобы затем запросить нужную часть большого макета.

По документации, вывод get_design_context по умолчанию ориентирован на React и Tailwind, но агент может преобразовать его под другой стек. Для WordPress-темы сразу укажи PHP, HTML и SCSS; наличие Tailwind в ответе инструмента не является причиной устанавливать его в проект. Назначение инструментов и выбор стека.

Лимиты MCP: что покупает Dev seat

На дату проверки Figma указывает следующие ограничения для инструментов чтения. Один запрос пользователя к ИИ может вызвать несколько инструментов; лимит вызовов не равен количеству сообщений в чате.

План и место	Вызовы инструментов чтения
Starter	До 20 в месяц
View или Collab на платном плане	До 6 в месяц
Professional — Dev или Full	До 200 в день и 10 в минуту
Organization — Dev или Full	До 200 в день и 15 в минуту
Enterprise — Dev или Full	До 600 в день и 20 в минуту

Источник — Rate limits & access. Не все инструменты расходуют этот лимит; например, whoami исключён. При ошибке доступа попроси агента вызвать его и проверь аккаунт, план, место и принадлежность рабочего файла. Платное место не даёт доступа к чужим закрытым файлам.

Для обычной реализации интерфейсов повышение с Dev до Full на Professional не увеличивает указанный лимит чтения MCP. Поэтому Full стоит выбирать ради редактирования дизайна и других необходимых возможностей. Если вызовов не хватает, сначала уменьши размер задач: один компонент за запрос, без повторного чтения всего файла после каждой CSS-правки.

AI credits и вызовы MCP — разные счётчики. Не считай пакет AI credits обещанием дополнительных чтений макета: для MCP смотри отдельную таблицу выше. Кредиты относятся к AI-функциям Figma и управляются по своим правилам. Управление AI credits.

Промпт для реализации компонента по Figma

Покажи агенту конкретный узел и существующие компоненты репозитория. Просьба «сделай страницу как в Figma» оставляет слишком много решений без ограничений. Ниже — пример для проекта на PHP и SCSS; пути и стек замени на свои.

Реализуй компонент по этому узлу Figma: {URL_НА_FRAME_С_NODE_ID}.

Сначала изучи README.md, правила репозитория, существующие компоненты
в components/ и токены в assets/scss/.

Получай данные из Figma через MCP:
- контекст конкретного узла;
- его скриншот;
- используемые переменные и стили.
Если ответ обрезан, запроси структуру и разбери компонент частями.

Стек проекта: PHP-шаблоны, HTML и SCSS.
Переиспользуй существующие кнопки, типографику и токены.
Не добавляй библиотеки без необходимости.
Figma используй для чтения; менять сам макет не требуется.

Сохрани семантику HTML и управление с клавиатуры.
Не придумывай отсутствующие состояния и правила адаптива молча:
перечисли пробелы и сформулируй вопросы или явные предположения.

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

Последовательность «контекст → скриншот → реализация → сравнение» согласуется с рекомендациями Figma для правил агента. При этом критерии готовности задаёт проект: например, отсутствие горизонтального скролла, переиспользование существующего компонента и корректное поведение формы при ошибке.

Почему ИИ ошибается даже с MCP

В макете могут отсутствовать названия компонентов, состояния и правила изменения размеров. MCP передаёт доступный контекст, но не создаёт отсутствующие продуктовые требования. Осмысленные имена слоёв, компоненты, переменные и Auto Layout делают структуру понятнее — это рекомендует и Figma в руководстве по подготовке файлов.

Если агент нарисовал новую кнопку вместо существующей, укажи путь к компоненту и его API. Если использовал абсолютное позиционирование для всей страницы, проверь структуру макета и попроси объяснить выбор layout. Если не совпадает текст — сначала проверь шрифт и ширину контейнера, затем интервалы.

Code Connect: когда нужно связывать дизайн с кодом

Code Connect связывает компоненты Figma с их реализациями в репозитории. Это даёт агенту дополнительные ориентиры для переиспользования дизайн-системы. Для собственных интеграций документация указывает Dev или Full seat на Organization либо Enterprise. Не закладывай эту возможность в покупку обычного Professional. Документация Code Connect.

Для небольшой темы или приложения начни с явных путей к компонентам, описанных props и правил проекта. Если у команды много приложений на общей дизайн-системе, оцени стоимость поддержки связей Code Connect: их нужно обновлять вместе с компонентами. Покупать корпоративный план ради одной карточки обычно не имеет смысла.

Чек-лист перед началом следующей задачи

Открыт актуальный frame, его ссылка сохранена в задаче.
Понятны контейнеры, размеры, Auto Layout, шрифты и токены.
Согласованы адаптив, состояния, переполнение текста и ошибки.
Проверено, достаточно ли бесплатного просмотра; платное место назначено в нужной команде, если оно необходимо.
Для MCP выбран конкретный узел, аккаунт имеет доступ, стек и ограничения проекта указаны в запросе.
Реализация использует компоненты репозитория и проверена в браузере.
Изменения дизайна после начала работы проверяются отдельно, а не незаметно смешиваются с исходной задачей.