Импортирует материалы из Figma в композицию HyperFrames: изображения, бренд-токены и компоненты превращаются в локальные файлы и редактируемый HTML. Для анимации использует совместимый Figma connector, а раскадровку кадров собирает в движение, а не в последовательность слайдов.

Возможности

Импортирует изображения и векторы через REST-команду hyperframes figma asset, сохраняет их в .media/images/ и записывает происхождение в manifest.
Загружает бренд-переменные и стили через hyperframes figma tokens; токены можно связать с цветами импортированных компонентов.
Преобразует дерево Figma в редактируемый HTML-компонент с геометрией исходного макета.
Переносит анимацию в GSAP через совместимый Figma connector. Если connector недоступен, для движения нужен нативный экспорт.
Импортирует шейдеры из нативного экспорта: connector не сохраняет их корректно.
Собирает storyboard из кадров как анимацию состояний элементов. Импортированные файлы заморожены локально, поэтому рендер не обращается к Figma.

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

Пользователь прислал ссылку на figma.com или попросил импортировать слой, логотип, изображение либо бренд.
Нужно получить бренд-токены или собрать сцену из Figma frame.
Нужно перенести анимацию или шейдер из Figma в видео — для анимации потребуется совместимый connector, для шейдера обычно нужен нативный экспорт.
Есть storyboard из кадров, которые нужно превратить в движение элементов или в непрерывный сценарий интерфейса.

Установка

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

Примеры

Импортировать логотип как SVG и добавить описание для media index:

hyperframes figma asset 'KEY:1-2' --format svg --description "Логотип продукта" --entity "brand-logo"

Импортировать токены из Figma-файла:

hyperframes figma tokens <fileKey>

Импортировать frame как редактируемый компонент:

hyperframes figma component '<url-or-fileKey:nodeId>'