【アップデート】Figma版に新スキル登場（2026.09.09）

またやっちゃいました。スキル工場長のこもりです。Figma版に新しいスキルを2つ追加しました。

まずひとつめの「tidy-up」は、適当に作られたFigmaのデータを整理して構造化するスキルです。「オートレイアウトとか何？」「面倒くせーよ」みたいな方でも、とりあえず箱作って文字置いてページの体裁だけは何となくできていれば、スキル一発でレイヤーが整理されてオートレイアウトで構造化されたフレームへと変換してくれます。ボタンとかカードみたいな小さなものから、ページ全体のような大きなものまで対応します。

もう一つは講座限定スキルとして追加した「hey-be-careful」スキルです。こちらはFigma のエージェントが適当な仕事をしないように矯正するガイドラインスキルです。Figmaのエージェントさんは、たまにスキルに書かれていることをスキップしたり、省力化なのかユーザーへの複数の質問をひとつにまとめてしまったりする癖があります。そういうのは結構困るのでちゃんと働いてくれるように矯正するスキルを作りました。ちゃんと仕事をしてもらいたいときに、チャットの冒頭などで呼び出してあげてください。

For English readers: 

とりあえず要素置きました、的なページのデザインでもスキルを実行すれば、下記のようにレイヤー名も綺麗になってオートレイアウトで構造化されたFigmaに生まれ変わります。

ここまでできたら、あとは「figma-tokenize」を使って変数やスタイルを設定＆バインド、「figma-componentize」で複数回使用している要素をコンポーネント化してあげれば、コーディングエージェントに放り投げるだけでよしなに作ってくれるでしょう。変数化とコンポーネント化が面倒な方は「figma-systematize（自動実行）」とか「hey-optimize-me（選択実行）」を使ってください。

※変数などのチェックはスキル呼び出し時におこなっていますが、ページを構造化して変数のバインドなどまでやってしまうと想像以上に時間がかかってしまうので、それは別のスキルで実行するように割り切りました。

ということで、今回追加したスキルの詳細です。

新規スキル

tidy-up（Figma版）

• 選択したフレーム/コンポーネント（複数選択可）を、Auto Layout・整理されたレイヤー名・正規化されたスペーシングで再構築するスキル
• 最初に「変更前」のスクリーンショットと要素ごとのスペーシングマップを記録し、マクロレベルのレイアウトリズム（セクション間の間隔・セクション内padding、4pxグリッドに丸めて維持）とミクロレベルのズレ（ボタン内テキストの中央ズレ、カード内要素の数px単位の不揃いなど、Auto Layout自身の整列に任せて補正）を区別する
• 既存ノードは削除せず、新しい構造フレームへ移し替えることで見た目を保ったまま再構築。再構築後はスクリーンショット比較→修正のサイクルをマクロレベルで元と一致するまで繰り返す
• ファイル内の既存の変数・スタイルはチェック・報告のみでバインドは行わない。バインドしたい場合は完了後にfigma-tokenizeを実行する運用に変更（変数バインドまで一度に行うと処理が重く時間がかかりすぎたため、このステップを分離）
• 手動配置でAuto Layout未適用のデザインが対象。実機検証済み

hey-be-careful（Figma版）

• エージェントが慎重かつ段階的に作業を進めるためのガイドラインスキル
• 呼び出すとチャットセッション全体を通して、①不明点はユーザーに確認する、②スキルの手順を省略せず順番に実行する、③実行結果を丁寧に検証する、④質問は一度に1つずつ行う、⑤複数手順の作業は開始前に計画を共有する、⑥完了報告は具体的に行う、の6ルールを厳守
• キャンバスではなくエージェント自身の振る舞いを対象とするため選択不要
• 新しいチャットの開始時や、より丁寧で入念な作業をさせたいときに呼び出す。実機検証済み

「tidy-up」はFigmaコミュニティで公開しているので是非お試しください。