📚

【目次】Figma MCPを実際に使って書いた記事のまとめ

に公開

Figma MCPの記事が増えてきたので、目次を作りました。

Figma MCPの活用

Figma MCPを使って1ページ丸ごとAIに実装してもらう記事です。
現時点での知見をもとに手順をまとめました。
https://zenn.dev/yuichiroharai/articles/22c28f4c6af0ec

Figma MCPが返すTailwind CSSが冗長なので、リファクタリングした方が良さそうなスタイルをまとめています。
https://zenn.dev/yuichiroharai/articles/33432a0e5a9522

Figma MCPで画像を扱う際の注意点をまとめています。
https://zenn.dev/yuichiroharai/articles/50de24d21c0a51

取得できるデータについて

Figma MCPの中核となる「デザインコンテキスト(JSXコード)」についてまとめました。
https://zenn.dev/yuichiroharai/articles/b021398b6dae63

「デザインコンテキスト」の補助としてたまに使う「メタデータ(XML)」についてまとめました。
https://zenn.dev/yuichiroharai/articles/60884cd1f1100d

「デザインコンテキスト」とセットで取得される「スクリーンショット」の必要性について考察しています。
https://zenn.dev/yuichiroharai/articles/6fef41d82575ee

作ったCLIツール

Figma MCPの出力結果を直接ファイルに保存するCLIツールを作りました。
https://zenn.dev/yuichiroharai/articles/839bb8d1307280

Tailwind CSSのリファクタリングに使えそうなCLIツールを作りました。
https://zenn.dev/yuichiroharai/articles/df444919d23925

Discussion