mcpField
F
figma

figma

github.com/heygen-comクリエイティブ・メディア74.7k348.2k 回インストール今日更新
リポジトリ

figma について

HyperFrames の動画コンポジションに、Figma の素材、デザイントークン、コンポーネントを取り込むスキルです。コネクターを使ったモーションやシェーダーの手順、ストーリーボードをアニメーション化する方法も扱います。

主な機能

  1. 01素材をローカルファイルとして取り込み
  2. 02ブランドトークンと書体の取り込み
  3. 03フレームを編集可能な HTML に変換
  4. 04Figma のモーションを GSAP に変換
  5. 05ストーリーボードのフレームをアニメーション化

活用シーン

  1. 01Figma のロゴや画像をプロジェクトに取り込む
  2. 02コンポーネントにブランドトークンを適用
  3. 03ストーリーボードの状態間をアニメーション化

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/figmaを入力して読み込まれたか確認します。

同梱ファイルscripts/verify-motion.mjs

詳細

プラグインのインストール： このスキルが HyperFrames プラグイン内にある場合、セットアップまたは鮮度確認のコマンドを実行する前に、プラグインの実行ルールに従ってください。

Figma → HyperFrames

すべてのインポートはビルド時に行われ、ソースを .media/ 配下に記録したローカルファイルとして固定されます。そのため、レンダリング時に Figma が呼び出されることはなく、コマンドを再実行しても、変更されたものだけが再インポートされます。アセット、トークン、コンポーネントはトークンを使って REST 経由で取得します。モーションとシェーダーデータには Figma コネクター、または担当者によるネイティブエクスポートが必要です。

アクセス

シェルまたはプロジェクトの .env に FIGMA_TOKEN が必要です。最初のコマンドの前に設定されていることを確認してください。設定されていない場合は、作成方法を案内して作業を中断します。figma.com → Settings → Security → Personal access tokens で、読み取り専用の File content と File metadata、さらに Enterprise プラン以外で tokens を使う場合は Library content を選択します。トークンは本人が設定します。チャットへの貼り付けを求めてはいけません。

エラー意味
BAD_TOKEN (401)有効期限切れまたは取り消し済みです。新しいトークンを作成してください
FORBIDDEN (403)メッセージに不足しているスコープが示されているか、アカウントからファイルを閲覧できません
REQUIRES_ENTERPRISE (403, variables)失敗ではありません。公開済みスタイルへのフォールバックはすでに実行されています
RATE_LIMITED (429)バックオフ付きで再試行済みです。1 分待つか、1 回の呼び出しでインポートするノード数を減らしてください

コマンド

  • レイヤー、ロゴ、画像：npx hyperframes figma asset '<url or fileKey:nodeId>' [more refs] --format svg|png --scale 2 --description "<what it is>" [--entity "<brand mark>"]。ベクターとロゴには SVG、ラスターには 2x の PNG を使います。同じファイルの複数のノードを 1 回の呼び出しで指定すると、1 回のリクエストでレンダリングされます。--entity を指定すると、後から /media-use でブランドマークを見つけられます。
  • ブランドカラーと書体：npx hyperframes figma tokens <fileKey>。component の前に実行し、出力されたエントリーを data-composition-variables に貼り付けます。Enterprise プラン以外では、公開済みスタイルにフォールバックします。代わりにコネクターから変数を取得することもできます。その場合、生のレスポンスを .media/figma-cache/ にキャッシュし、バインディングを .media/figma-bindings.jsonl に書き込みます（{kind:"binding", figmaId, sourceFileKey, compositionVariableId:"figma:<name>", version}）。
  • 正確なジオメトリを維持した、編集可能な HTML としてのフレーム：npx hyperframes figma component '<url or fileKey:nodeId>'。compositions/components/<name>/ にパッケージ化されます。インポートしたトークンにバインドされた塗りつぶしは var(--slug, #literal) になります。そのため、1 つの変数でインポートしたものすべてのブランドを変更できます。不明なトークンは data-figma-unresolved が付いたリテラルのままです。そのライブラリのトークンをインポートしてから、再インポートしてください。ライブラリがどのファイルにあるかは一度だけ尋ねてください。16 進数で照合してはいけません。
  • ヒーローコンポーネントを Figma のピクセルと照合します（figma asset <same node> --format png）。通常、ずれの原因はテキストです。修正できないずれは報告し、インポート結果を手作業で微調整してはいけません。

Motion（コネクター）

使用状況ビーコン：これらのフェーズには CLI のタッチポイントがないため、開始時に npx hyperframes events --skill=figma-motion を実行し、完了時に npx hyperframes events --skill=figma-motion --event=skill_completed --outcome=success|error を実行してください。シェーダー（figma-shaders）とストーリーボード（figma-storyboard）も同様です。

  1. 親フレームのモーションコンテキストを、再帰リクエスト1回で取得し、生の JSON を .media/figma-cache/ にキャッシュします。
  2. キーフレームを手作業で書き起こさず、@hyperframes/core/figma の motionContextToDocs(raw, { selectorFor, repeat }) で正規化します。これは motion.dev のスニペットを読み込み（CSS スニペットは再生時間を引き伸ばします）、ループの折り返し部分にある末尾のキーフレームを除外し、ベジェイージングを保持します。selectorFor はコンポーネントのインポート元の ID を返します。
  3. motionToGsap(doc) → emitTimelineScript(spec) の順に実行し、GSAP と CustomEase のタグの後に挿入します。ポーズ状態で、有限であり、window.__timelines のキーはリテラル値にします。マッピング対象外の名前付きイージングは linear にフォールバックすることを伝えてください。
  4. Figma 独自のエクスポートと照合します：node <SKILL_DIR>/scripts/verify-motion.mjs --reference <export.mp4> --render <render.mp4> --crop WxH+X+Y。サンプル間のモーションを比較するため、静的なずれは相殺され、15 dB 未満で失敗します（忠実な場合は約 20 以上、乖離している場合は約 5）。--crop の値はレンダーのカードの端を基準に測定してください。失敗した場合は、しきい値ではなく変換を修正してください。
  5. 変換できないトラックはエクスポートして MP4 を固定し、<video class="clip"> として配置します。

シェーダー

Figma のエクスポート処理ではシェーダーがベースカラーにフラット化され、シェーダーのソースにアクセスできるのはライブラリで公開されたスタイルのみです。そのフレームのネイティブエクスポート（PNG または MP4）を依頼し、アセットまたはクリップとして配置してください。

ストーリーボード：フレームはスライドではなく、キーフレームです

同じ要素を含む2つのフレームは、その要素の時間経過に伴う状態を表します。状態間で要素をアニメーションさせてください。フレームを静止画として続けて再生するのは、誤った方法です。

  1. シーンは、セクション内のフレームサイズのノードすべてです。名前付きフレームも、単独のフルフレーム矩形も含まれます。種類や名前ではなく、サイズで絞り込んでください。absoluteBoundingBox.x の順に並べます。
  2. 隣り合うフレーム間で子要素を照合する際は、まず名前で照合し、次にサイズと位置の類似度で照合します。状態間のジオメトリはトゥイーンし、ピクセルが変わった場合は、その場で2つのエクスポートをクロスフェードします。フレームごとに静止画を1枚ずつではなく、要素ごとにアセットを1つエクスポートします。照合できなかった子要素は、シーンのビートに合わせて出現または退場します。
  3. ストリップの下にあるテキストノードは、画面に表示するテキストではなく、その上のシーンのモーションに関する注記です。シーン内のモーションについての注記（「線が次々に表示される」など）は、そのフレームをコンポーネントとしてインポートし、アニメーションさせることを意味します。
  4. 1回の呼び出しにつき、シーンフレーム約4つずつのバッチでエクスポートします。ID が約12個を超えると、/v1/images がタイムアウトします。
  5. 連続する状態を表す1つの製品 UI のフレームの場合は、UI をライブ DOM として再構築します。状態が変化する部分はコード化し、変化しない部分は固定して、各フレームの変化を適用するトゥイーンではなく、実行するインタラクションとして扱います（カーソルが移動し、クリックし、画面が反応します）。
  6. 静止画は、共有要素のないフレームに限り、最後の手段として使います。

コンポジション内に Figma の URL を残さないでください。

コメント

Markdown 対応