スキル自身の言葉で
Figmaのコンテンツを、静的アセット、ブランドトークン、HTMLとしてのコンポーネント、モーションタイムライン、シェーダーの5つのフェーズでHyperFramesコンポジションに取り込みます。可能な限りREST APIを使用します（アセット、トークン、コンポーネント）。モーションとシェーダーデータについては、オプションのコネクタを使用します。すべての取り込みでは成果物がプロベナンス情報とともにローカルに固定されるため、レンダリング時にFigmaを呼び出す必要がなく、決定的な動作を保てます。
ストーリーボードの再構築では、フレームをスライドではなく、時間経過に伴う要素の状態を記述するキーフレームとして扱います。トークンとコンポーネントのバインディングに対応しているため、ブランド変数を1つ更新するだけで、取り込んだすべてのコンポーネントの色が再適用されます。レート制限を認識し、自動的にリトライします。設定したトークンがアクセスできるすべてのFigmaファイルで動作します。
生成されるもの
- .media/images/以下に固定された画像アセット。マニフェストによるプロベナンスとimgスニペット付き
- ブランドトークンのエントリ、figma-tokens.jsonサイドカー、.media/figma-bindings.jsonl内のbinding-indexレコード
- compositions/components/<name>/以下の編集可能なHTMLコンポーネントパッケージ
- CDNタグの後に挿入されたGSAPタイムラインスクリプト。一時停止・有限で、window.__timelinesに登録されます
仕組み
- 01Figma参照の解析
parseFigmaRefを使用して、ユーザーのURL、fileKey:nodeId形式の文字列、または単独のfileKeyからfileKeyとnodeIdを抽出します。
- 02意図に応じて正しいフェーズへルーティング
ユーザーのリクエストを、アセットのエクスポート、トークンの取り込み、コンポーネントの再構築、モーションタイムライン、シェーダー処理の5つのフェーズのいずれかに一致させます。
- 03RESTまたはコネクタ経由での取得
アセット、トークン、コンポーネントにはRESTを使用します。モーションとシェーダーには、対応するコネクタまたは手動エクスポートが必要です。
- 04成果物をプロベナンスとともにローカルに固定
すべての取り込みでローカルファイルが書き込まれ、ソースのメタデータとともにマニフェストが更新され、共有のメディア利用インベントリが再生成されます。
- 05状態データからモーションとストーリーボードを再構築
ストーリーボードのフレームは、隣接するフレームの差分を取ることで要素のタイムラインになります。モーションのコンテキストはMotionDocsに正規化された後、GSAPスクリプトになります。
- 06正解データと照合して検証
静的な忠実度については、レンダリング結果をFigma自体のピクセルエクスポートと比較します。モーションの再構築は、最低15dBのmotion-PSNRを満たす必要があります。