こんにちは。こもりです。
連日FigmaのDesign Agentのカスタムスキルやその元となっているClaude Code向けのスキルの追加、更新などのお知らせばかりになっておりましたが、今回は期間限定セールのお知らせです。
Figmaの中でもAIがいろいろ使えるようになり便利になってきました。「画面自体はキャンバス上で手早く作れるようになったけど、これを自分で実際に動くコードにして画面でチェックできたら…」みたいな、できることが増えると次なるステップを考えることもあるかもしれません。
そこでFigmaのデータとコーディングエージェントの間に入るのが「Figma MCP」です。Figma MCPを使えば、「フレームURLをコーディングエージェントに渡して手元でコードにしてブラウザで確認」逆に「コード側でおこなった変更をFigma側に反映、または直接編集」が可能です。ちょっとした画面確認の用途であれば、コーダーさんやエンジニアさんの手を借りることもなくできてしまいます。
その一方で注意点もあります。Figma MCPを使ってコードにする時、闇雲に要素を置いただけの画面では、コーディングエージェント自体が画面のスクリーンショットを見ながら推論を働かせてコード化を試みるしかなく、結果として「レイアウトが再現できない」とか「うまくいったとしても使えるコードになっていない」みたいなことになります。
そういう悲しい結果を招かないためには、Figmaのフレームの構造をコーディングエージェントが理解しやすい形にきちんと作れるかが大事です。
例えば、フレーム全体はオートレイアウトを使って実際のHTMLと同じようにツリー構造（フレームを使った入れ子）で作った方が良いですし、フレームの名前も適当にせずきちんと場所や内容が特定できる方が良いでしょう。
他にも、カラーパレットから配色した色やフォントサイズ、スペースの値などは、適当に手動で割り当てるのではなく、バリアブルズで変数化したうえで紐付けた方が修正も楽、かつコード化する際にその値をCSS側の変数として保持できます。繰り返し使う要素は事前にコンポーネント化できていれば、コード側で再利用可能なコンポーネントとして生成されるでしょう（ReactやAstroでは）。
そもそもFigma自体の操作は難しいものではなく、別段使い方の勉強をしなくてもすぐにでも使い始められる部類のツールで、その辺の正しい作り方をすっ飛ばしてオレオレデータで作っている方も多いのでは？（これまではエンジニアさんがうまくやってくれていただけで）
画面の再現性も含め、使えるものとしてうまくコード化してもらうには、元となるFigmaのデータをAIが理解しやすい形で作れているかがキモなのです（＝結果コーダーさんやエンジニアさんたちにもわかりやすいデータになる）。
※オートレイアウト？って方は、まずFigmaの使い方から勉強してくださいね。
※レイヤー名の修正、色や数値の変数化、コンポーネント化などは、連日スキルの追加・更新をしていた「KMRVID Figma Skills」を使えば、ほぼほぼ自動化できるようになりました。
期間限定「Figma × AI」講座が39%オフ！
「Figma × AI」講座は、AIが理解しやすいデータの作り方から実際のコード化、そして番外編として初歩的なコーディングエージェント側のスキルの使い方まで、動画と添付ファイルを使いながら学べるものとなっています。講座内ではVSCodeやClaude Codeなどの設定の仕方なども含んでいます。
※Figma Design マスター編、パックには含まれていますので重複購入にはご注意ください
この夏休み、特に予定もないし「今後のAIとの協業を視野に入れて勉強でもするか…」という方を応援します。今日から8月16日（日）まで「Figma × AI」講座が39%オフ（7,700円→4,697円）になる期間限定セールのスタートです。この機会に是非。
なぜ39%なのか？、それはいつもありがとうございますのサンキューからです！