figmaавтор HeyGen

Figma Skill.

Навык для Claude Code и Codex в области анимации и видео: импортирует ресурсы Figma, токены бренда и раскадровки в композицию HyperFrames.

Анимация и видео
Video

Скачать OpenDesign Инструкция по использованию

heygen-com/hyperframes · skills/figma/SKILL.mdSKILL.md

--- name: figma description: Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition. --- ## Auth — two credentials, scoped ## Routing ## Assets (Phase 1 — CLI) ## Tokens (Phase 2 — CLI) ## Components (Phase 3 — CLI) ## Motion (Phase 4 — connector-assisted)

Метаданные и заголовки разделов прочитаны из исходного файла 2026-09-14 · 17 829 символов полностью

01 Что делает

Что делает skill figma в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Импортирует контент из Figma в композиции HyperFrames в пять фаз: статические ассеты, брендовые токены, компоненты как HTML, таймлайны движения и шейдеры. Использует REST API, где возможно (ассеты, токены, компоненты), с опциональным коннектором для данных движения и шейдеров. Каждый импорт замораживает артефакты локально с зафиксированным происхождением, так что рендеры никогда не обращаются к Figma и остаются детерминированными.

Восстановление сториборда рассматривает кадры как ключевые кадры, описывающие состояние элемента во времени, а не слайды. Поддерживает привязку токена к компоненту, так что обновление одной брендовой переменной перекрашивает каждый импортированный компонент. Учитывает ограничения по частоте запросов с автоматическими повторами. Работает с любым файлом Figma, доступным настроенному токену.

Что он выдаёт

Замороженные графические ассеты в .media/images/ с происхождением в манифесте и сниппетом img
Записи брендовых токенов, вспомогательный файл figma-tokens.json и записи индекса привязок в .media/figma-bindings.jsonl
Редактируемые пакеты HTML-компонентов в compositions/components/<name>/
Скрипты таймлайнов GSAP, вставленные после тегов CDN, приостановленные и конечные, зарегистрированные на window.__timelines

Смотрите пример запроса ↗

Как это работает

01
Разбор ссылки на Figma
Используйте parseFigmaRef, чтобы извлечь fileKey и nodeId из URL пользователя, строки вида fileKey:nodeId или простого fileKey.
02
Направление по намерению в нужную фазу
Сопоставьте запрос пользователя с одной из пяти фаз: экспорт ассетов, импорт токенов, восстановление компонентов, таймлайны движения или обработка шейдеров.
03
Получение через REST или коннектор
REST используется для ассетов, токенов и компонентов. Движение и шейдеры требуют совместимого коннектора или ручного экспорта.
04
Заморозка артефактов локально с фиксацией происхождения
Каждый импорт записывает локальный файл, дополняет манифест метаданными источника и заново генерирует общий реестр использования медиа.
05
Восстановление движения и сториборда из данных о состоянии
Кадры сториборда превращаются в таймлайны элементов путём сравнения соседних кадров. Контекст движения нормализуется в MotionDocs, затем в скрипты GSAP.
06
Проверка по эталону
Сравните рендер с собственным пиксельным экспортом Figma для оценки статической точности. Восстановление движения должно проходить минимум 15dB motion-PSNR.

02 Определите своё применение

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

Используйте skill figma в Claude Code или Codex, когда задача — motion и видео такого типа. Применимость и ограничения ниже взяты из собственного файла skill.

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

Пользователь вставляет ссылку figma.com или просит перенести дизайн из Figma в видео или композицию
Извлечение брендовых цветов, токенов или стилей из файла Figma в переменные композиции
Построение сцены из фрейма Figma как редактируемого HTML-компонента
Восстановление анимации из раздела сториборда, содержащего кадры сцены как ключевые кадры

Знайте границы

Импорт движения и шейдеров без совместимого коннектора Figma требует ручного нативного экспорта
Путь рендера коннектора Figma не выполняет шейдеры; они сплющиваются до базового цвета
API переменных REST доступен только в тарифе Enterprise; на других тарифах остаются метаданные в стиле опубликованных
Кадры сторибординга, изображающие один связный UI продукта, повышаются до пересборки приложения как живого DOM, а не цепочки элементов

Что предоставить

Персональный токен доступа FigmaПрава только на чтение: File content, File metadata, опционально Library content и Variables. Задайте как FIGMA_TOKEN в shell или .env.
Совместимый коннектор Figma (опционально)Авторизация отдельно от токена. Требуется для таймлайнов анимации и исходников шейдеров. Без него запросите нативный экспорт.
Заметки режиссёра для замысла сторибордингаTEXT-узлы под полосой сторибординга описывают, как анимировать. Сопоставляются со сценами по перекрытию диапазона по x.
Нативный экспорт Figma для шейдеровPNG или Motion MP4, экспортированные напрямую из Figma, когда путь коннектора не выполняет шейдеры или коннектор недоступен.

03 Внутри скилла

Правила, которые skill figma даёт Claude Code и Codex

7 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт агенту, — та часть файла, которая меняет результат.

Проверяйте токен перед первым вызовом CLI
Перед запуском любой команды hyperframes figma убедитесь, что FIGMA_TOKEN присутствует в окружении shell или в .env проекта. Если нет ни того, ни другого, проведите пользователя через одноразовую настройку и остановитесь.
Всегда передавайте --description для ресурсов
Каждый импорт ресурса должен включать --description с описанием того, что это. Это становится строкой индекса и alt-текстом изображения. Добавьте --entity для именованных брендовых знаков.
Группируйте узлы в один запрос на файл
Передавайте несколько ссылок одного файла как аргументы, разделённые пробелом или запятой. Все рендерятся в одном вызове /v1/images, чтобы избежать ограничений частоты запросов.
Импортируйте токены перед компонентами
Запустите hyperframes figma tokens перед импортом компонентов. Это позволяет цветам компонентов ссылаться на брендовые переменные вместо запекания дублирующихся литералов.
Никогда не оставляйте URL-адреса Figma в композиции
Сначала заморозьте весь контент Figma в локальные файлы. Рендер должен видеть только локальные файлы для детерминированного результата.
Никогда не выдавайте Repeat: -1
Таймлайны должны быть на паузе, конечными, с буквальными ключами window.__timelines. Никаких бесконечных циклов.
Озвучивайте каждый шаг для пользователя
Перед каждой командой говорите, что вы забираете из Figma. После — куда это попало, что изменилось в композиции, и каким будет непосредственное следующее действие.

04 Применение

Установить figma в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить figma в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill figma

Общая форма CLI skills для skills/figma/SKILL.md; репозиторий может документировать свой собственный путь.

Дайте skill первую задачу по motion и видео

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt

Import the hero section from [figma.com/file/abc123/Brand?node-id=42-1] including the logo, headline text, and background. Pull the brand tokens from the same file so the colors stay linked to our design system variables. Then build the animation timeline — the logo should scale in with a burst effect and the headline should slide from the left.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Запустите npx hyperframes check перед вызовом завершения импорта motion или компонента
Проверьте, что реконструкция motion проходит минимум 15dB motion-PSNR с помощью скрипта verify-motion.mjs
Проверяйте, что импорт ассетов идемпотентен по fileKey:nodeId:format:scale:version, повторно импортируя только изменённый контент

В OpenDesign импортируйте figma по ссылке из его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Ветка main
Файл skill: skills/figma/SKILL.md Контрольная сумма содержимого зафиксирована при проверке; коммит 558c11b
License: Apache-2.0 Из LICENSE.
Звёзды репозитория: 49 761 Снимок GitHub сделан 14.09.2026 для всего репозитория heygen-com/hyperframes, который содержит 9 навыков в этом каталоге. Не является рейтингом или счётчиком использования для figma.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Figma → HyperFramesРазделение возможностей на пять фаз: ассеты, токены, компоненты через REST; motion и шейдеры через коннектор или ручной экспорт
Авторизация — два ключа доступа с ограниченной областьюТокен личного доступа для REST с правами только на чтение; отдельная авторизация коннектора для motion и шейдеров; проверка токена перед запуском CLI
МаршрутизацияРазбор ссылок Figma, маршрутизация по намерению на фазы asset/tokens/component/motion/storyboard/shader
Ассеты (фаза 1 — CLI)Рендер нод через REST, санитизация SVG, фиксация в .media/images/, пакетная обработка нод по файлу для избежания лимитов частоты запросов
Токены (фаза 2 — CLI)Импорт переменных как записей бренда композиции, деградация до опубликованных стилей на не-Enterprise, построение индекса привязок
Компоненты (фаза 3 — CLI)Дерево нод преобразуется в HTML с точной геометрией, векторы автоматически растеризуются, заливки привязываются к токенам через var() при импорте
Motion (фаза 4 — с помощью коннектора)Рекурсивное получение motion-контекста, нормализация в MotionDocs, генерация скриптов GSAP, проверка по порогу motion-PSNR 15 дБ
Шейдеры (фаза 5 — в основном вручную)Рендер через коннектор упрощает шейдеры до плоского вида; вместо этого попросите пользователя сделать нативный экспорт из Figma в PNG или MP4
Storyboard (РАЗДЕЛ кадров сцены → анимация)Кадры — это ключевые кадры, а не слайды; соседние кадры сравниваются для построения цепочек элементов, сопоставление по имени, затем по геометрии, режиссёрские заметки задают переходы
ДетерминизмВсе ссылки Figma фиксируются локально, повтор -1 никогда не выводится, таймлайны на паузе и конечны, весь ввод/вывод — на этапе импорта

Собственное описание skill

«Импортирует контент Figma в композицию HyperFrames — отрендеренные ассеты, токены бренда, компоненты, разделы раскадровки → реконструированная анимация (фреймы читаются как состояния, не слайды) (REST/CLI), анимация с помощью коннектора при наличии, и шейдеры из коннектора или нативного экспорта. Используйте, когда пользователь вставляет ссылку на figma.com или просит перенести дизайн, фрейм, логотип, бренд или анимацию из Figma в видео/композицию.»

Описание из метаданных SKILL.md. Полный файл составляет около 17 829 символов. Читайте полный файл на GitHub.

Figma

Запустите figma на реальной задаче по анимации и видео.

Скачайте OpenDesign, импортируйте figma по ссылке на его SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/heygen-com/hyperframes --skill figma

Что делает skill figma в Claude Code и Codex

Словами самого skill

Как это работает

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

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

Знайте границы

Что предоставить

Правила, которые skill figma даёт Claude Code и Codex

Проверяйте токен перед первым вызовом CLI

Всегда передавайте --description для ресурсов

Группируйте узлы в один запрос на файл

Импортируйте токены перед компонентами

Никогда не оставляйте URL-адреса Figma в композиции

Никогда не выдавайте Repeat: -1

Озвучивайте каждый шаг для пользователя