Figma Code Connect Componentsавтор OpenAI

Figma Code Connect Components Skill.

Сделайте связь между компонентом дизайна и его реализацией явной.

Figma
Дизайн-системы
Передача в разработку

Скачать OpenDesign Открыть руководство по использованию

Обзор источника · Figma Code Connect ComponentsSKILL.md

Задача Figma Результат • Предлагаемый список соответствий узлов Figma и компонентов кода • Одобренные сопоставления Code Connect с путями к исходникам и метками фреймворков • Сводка, разделяющая подключённые, пропущенные и неудавшиеся сопоставления Перед началом Подключённые Figma MCP, доступ к опубликованным компонентам и кодовой базе, а также действующее право на Code Connect и права на редактирование.

Редакционная сводка · источник проверен 2026-10-07 · не сгенерированный пример

01 Возможности

Сопоставьте опубликованные компоненты Figma с их кодом

Рабочий процесс Figma MCP для поиска, проверки и записи одобренных сопоставлений Code Connect.

Процесс на основе источникаНе тест выполнения

Принцип работы

Figma Code Connect Components — это процесс сопоставления, а не генератор экранов. Он находит несопоставленные опубликованные компоненты в выборке Figma, ищет по локальной кодовой базе и сравнивает структуру и свойства компонентов. Совпадение имён — лишь отправная точка: варианты, значения по умолчанию и назначение тоже должны совпадать.

Согласно источнику, предлагаемые соответствия нужно показать пользователю до создания любых сопоставлений. Частичное одобрение поддерживается, а неоднозначные или отсутствующие компоненты сообщаются, а не угадываются. Результат — находимая связь между дизайном и кодом; он не переписывает ни одну из сторон автоматически и не доказывает, что их внешний вид идентичен.

Ожидаемые результаты

Предлагаемый список соответствий узлов Figma и компонентов кода
Одобренные сопоставления Code Connect с путями к исходникам и метками фреймворков
Сводка, разделяющая подключённые, пропущенные и неудавшиеся сопоставления

Смотреть пример задания

От задания к проверке

01
Определите опубликованные компоненты
Используйте ссылку Figma на конкретный узел или поддерживаемый выбор в десктопном приложении и выясните, какие компоненты остаются несопоставленными.
02
Сравните реализации
Найдите в репозитории и изучите реальные экспорты, свойства и значения по умолчанию. Если подходят несколько компонентов, покажите варианты.
03
Подключите одобренный набор
Отправляйте только одобренные пользователем сопоставления, затем отдельно сообщайте об успешных и неудачных.

02 Когда использовать

Когда использовать

Подключённые Figma MCP, доступ к опубликованным компонентам и кодовой базе, а также действующее право на Code Connect и права на редактирование.

Хорошо подходит

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

Ограничения для проверки

Нужны опубликованные компонентыПроверенный процесс рассчитан на опубликованные компоненты или наборы компонентов, а не на произвольные прямоугольники или неопубликованные черновые компоненты.
Доступ настраивается отдельноПеред созданием сопоставлений убедитесь, что ваш план Figma поддерживает Code Connect, у вас есть право на редактирование и рабочее подключение.

Что подготовить

Выбор в FigmaДайте ссылку на файл с ID нужного узла или выбранный узел через поддерживаемое десктопное подключение.
Репозиторий кодаПредоставьте файлы реализации, чтобы можно было изучить экспорты и свойства.
Одобрение сопоставленийПеред записью выберите все, некоторые или ни одного из предложенных соответствий.

03 Важные решения

Важные решения

Сопоставление на уровне свойств
Сравнение интерфейсов вариантов и размеров уменьшает число ложных связей между компонентами, у которых просто совпадает имя.
Явный частичный успех
Неудавшийся или пропущенный компонент остаётся виден при передаче, а не теряется за общим сообщением об успехе.

04 Пример задания

Попробуйте узкое задание

Приведённый ниже пример задания не тестировался. Перед использованием проверьте настройку навыка.

Проверьте настройку

Установите отобранный навык поддерживаемым способом в вашей среде агента и отдельно подключите Figma. Эти бета-материалы регулируются Условиями для разработчиков Figma, а не MIT. Установка не даёт доступа к Code Connect.

Исходный файл upstream

https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-code-connect-components/SKILL.md

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания

Используй figma-code-connect-components, чтобы изучить опубликованные компоненты в этом фрейме Figma и найти их реализации в нашем репозитории. Сравни свойства вариантов и значения по умолчанию, покажи предлагаемые пути к исходникам и дождись моего одобрения перед созданием сопоставлений. Если у компонента два правдоподобных соответствия, объясни разницу, а не выбирай молча.

Проверьте результат

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

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

OpenDesign предоставляет локальное дизайн-пространство для кодинг-агентов. Этот каталог не означает, что навык включён в поставку или что в неё входят его внешние инструменты, учётные данные и программные зависимости.

Скачать OpenDesign Прочитать краткое руководство

05 Источник и лицензия

Источник и лицензия

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

Владелец источника: OpenAI
Репозиторий: openai/skills
Файл навыка: skills/.curated/figma-code-connect-components/SKILL.md
Лицензия: Условия Figma
Проверенная версия: 2026-10-07 · 49f948faa925

Редакционная сводка источника

Рабочий процесс Figma MCP для поиска, проверки и записи одобренных сопоставлений Code Connect.

Оригинальная сводка OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Генерирует ли он код приложения?

Нет. Он сопоставляет компоненты дизайна с существующими реализациями. Создание кода из фрейма Figma — отдельный процесс.

Можно ли подключить неопубликованные компоненты?

В проверенном источнике сказано, что компоненты должны быть опубликованы в командной библиотеке, прежде чем Code Connect сможет их сопоставить.

Можно ли одобрить только одно соответствие?

Да. Процесс явно поддерживает принятие всех, некоторых или ни одного из предложенных сопоставлений.

OpenDesign

Освободите место для следующей итерации дизайна.

Храните задание, исходные материалы и дизайнерскую работу вместе в локальном рабочем пространстве. Перед добавлением навыка в рабочий процесс проверьте его собственную настройку.

Скачать OpenDesign Смотреть дизайн-навыки