figma

Figma のリンクを貼ったときや、Figma のデザイン・枠・ロゴ・ブランドを動画に使いたいときに読ませるスキルです。説明文が、素材・ブランドのトークン・部品・絵コンテ・シェーダー・連携を使った動きを持ち込む、と挙げています。

取り込みは全部、組み立てるときに 1 回だけ行います。手元のファイルに固め、出どころを .media/ に記録するので、描き出しのときに Figma を呼ぶことはありません。同じコマンドを流し直すと、変わったものだけを取り込み直します。

トークンで取り込めるもの（素材・色と書体・部品）

3 つ

本文に載っている API の誤りの意味

4 種

同梱ファイル。動きの比較のスクリプト（2026-10-22 時点）

1 件

SKILL.md の大きさ（2026-10-22 時点）

6,167 バイト

トークンで取れるもの、連携が要るもの

3 つのコマンド

• figma asset層・ロゴ・画像を取る。ベクターとロゴは SVG、写真などは 2 倍の PNG
• figma tokensブランドの色と書体を取る。部品より先に流す
• figma component枠を寸法どおりの編集できる HTML にする。compositions/components/<名前>/ に入る

figma tokens で取った値を data-composition-variables に入れておくと、部品の塗りが var(--名前, #色) の形で出てきます。変数 1 つを変えれば取り込んだ部品の色が全部変わる仕組みです。

まだ取り込んでいないライブラリの色は、そのままの色の値に data-figma-unresolved の印が付きます。どのファイルのライブラリかは人に 1 回聞き、色の値で突き合わせるな、とあります。

取り込んだ部品は元の画と比べる

主役の部品は、同じ枠を figma asset --format png で取って画素で比べます。ずれの原因はたいてい文字で、直せないずれは手で調整せずに報告せよ、と書かれています。

絵コンテの枠は状態として動かす

本文でいちばん強く書かれているのがここです。絵コンテの 2 つの枠に同じ要素があれば、それはその要素の時間を通した状態で、その間を動かせ。枠を静止画として順に流すのは失敗の形だ、とあります。

1. 場面を集める枠の大きさの要素を全部場面とみなし、名前ではなく大きさで選ぶ。並びは x 座標の順
2. 要素を対応づける隣の枠の子要素を名前で、次に大きさと位置で対応づけ、その間を動かす
3. 注記を読む枠の下の文字は上の場面の動きの指示で、画面の文字ではない
4. 少しずつ書き出す1 回に 4 枠ほど。12 を超えると書き出しの API が時間切れになる
5. 画面の状態を作り直す1 つの製品の画面が続くなら、生きた DOM で作り直し、枠の変化を操作として演じる

共通の要素が無い枠だけが、静止画で流してよい例外です。

連携を使った動き

Figma のコネクタで動きのデータを取るときは、親の枠を 1 回の要求でまとめて取り、生の JSON を .media/figma-cache/ に置きます。キーフレームを書き写さず、@hyperframes/core/figma の関数で GSAP のタイムラインに直す手順です。

最後に Figma 自身の書き出しと描き出しを scripts/verify-motion.mjs で比べます。15 dB を下回ると不合格で、そのときは閾値ではなく変換を直せ、と書かれています。移せない動きは書き出した MP4 を固めて、<video class="clip"> として置きます。

Figma を使っていないとき

このスキルは Figma から持ち込むためだけのものです。デザインの元が別の道具なら要りません。

Figma に書き込みたいとき

トークンの範囲は読み取り専用で、Figma の側を変えることはしません。

動画そのものを作りたいとき

動画の作り方の決まりは入口の hyperframes にあります。発表資料なら slideshow で、このスキルは素材を持ち込む役です。

シェーダーをそのまま持ち込みたいとき

Figma の書き出しはシェーダーを基本の色に潰してしまう、と本文にあります。その枠は人に PNG か MP4 で書き出してもらい、素材として置く決まりです。

トークンを会話に貼らせない

作り方は figma.com の Settings → Security → Personal access tokens で、範囲は読み取り専用の File content と File metadata です。Enterprise でない契約で tokens を使うなら、Library content も足します。

.env をリポジトリに入れない

トークンをプロジェクトの .env に置くなら、git に入れないよう除外の設定を確かめてください。

Figma の API に繋ぐ

取り込みのたびに Figma の REST API を呼びます。429 が返ったときは待って再試行済みなので、1 分待つか、1 回に取る数を減らせ、とあります。

変数の取得が Enterprise を求めて 403 になるのは失敗ではなく、公開スタイルへの切り替えがもう走っている、と書かれています。

利用の計測を送る

動き・シェーダー・絵コンテの作業は CLI を通らないので、始めと終わりに npx hyperframes events --skill=figma-motion などを走らせる決まりです。これは利用の計測の信号です。送りたくないなら依頼文で伝えてください。

Figma の URL を残さない

本文の最後の行は、合成物の中に Figma の URL を残すな、です。

取り込んだ素材の権利

ロゴや画像を取り込めても、使ってよいかは別の問題です。他社のブランドを扱うなら条件を確かめてください。

allowed-tools の指定が無い

allowed-tools の指定はありません。確認なしで走る道具は宣言されておらず、どの道具も利用者の権限の設定どおりに確認されます。

ライセンス

Apache-2.0 です。再配布や商用利用の前に公開元の表記を確認してください。

トークンはどこに置きますか

シェルの環境変数 FIGMA_TOKEN か、プロジェクトの .env です。人が自分で置く決まりで、エージェントは会話に貼るよう頼みません。無ければ作り方を伝えて止まります。

どの権限が要りますか

読み取り専用の File content と File metadata です。Enterprise でない契約で色と書体を取るなら Library content も要ります。権限が足りないと 403 が返り、誤りの文が足りない範囲を名指しします。

ブランドの変数が取れません

Enterprise でない契約では変数の API が使えません。その場合は公開スタイルへの切り替えが自動で走るので、失敗ではありません。連携が変数を返せるなら、それを使う道も本文にあります。

動きも持ち込めますか

Figma の連携（コネクタ）があれば持ち込めます。動きのデータを GSAP のタイムラインに直し、Figma の書き出しと比べて合否を測ります。連携が無いなら、人に MP4 で書き出してもらい、映像として置くのが代わりの道です。

対応しているエージェントはどれですか

Claude Code と Codex です。公開元の README が、Claude Code へのプラグインの入れ方と Codex へ上げる手順を案内しています（2026-10-22 確認）。当サイトは公開元が明記しているものだけを対応として表示しています（指標の意味と限界）。