POINT

Figmaのデザインを実装する2つの方法

FigmaのデザインをClaudeCodeでコード化するには、大きく2つのやり方があります。それぞれ手間と精度が違うので、まずは全体像をつかみましょう。

01 スクリーンショットを使う

FigmaのデザインをPNGで書き出してClaudeCodeに渡す方法。特別な設定がいらず今すぐできるのが利点。まずはここから始めるのがおすすめです。

02 Figma MCPを使う

ClaudeCodeがFigmaのデータに直接アクセスする方法。画像より精度が高い一方、初期設定が必要（17番で解説）。慣れてきたら移行を検討します。

つまり迷ったら方法①（スクリーンショット）から。今すぐ手を動かせて、実装の流れをひと通り体験できます。

方法①：画像を書き出して渡す

まずはFigmaのデザインを画像にして、ClaudeCodeに渡すまでの流れです。

1

Figmaでデザインを書き出す

実装したいフレームを選択 → 右クリック → 「コピー」→「画像としてコピー」。または Export から PNG で書き出します。

2

画像を添付してプロンプトを送る

書き出した画像をClaudeCodeに添付し、「このデザインをHTML/CSSで実装して」と条件つきで依頼します（次のプロンプト参照）。

実装を依頼するプロンプト例

プロンプト例（画像を添付して送る）

添付した画像はFigmaで作ったデザインカンプです。
このデザインをHTMLとCSSで実装してください。
条件：
- ファイル名 index.html
- CSSはHTMLファイル内に書く
- フォントはGoogleフォント
- レスポンシブ対応（768pxでブレイク）
- 画像はプレースホルダーでOK（picsum.photos）
- design.md のカラー・フォントに従う

ポイント条件を箇条書きで明記するほど、狙い通りのコードが返ってきます。design.mdを先に用意しておくと、カラーやフォントのブレも防げます。

生成後は差異を伝えて修正

生成されたHTMLをブラウザで確認し、デザインとのズレを具体的に伝えて直していきます。

修正を伝えるプロンプト例

ヘッダーの高さが違います。
デザインでは80pxですが、生成コードは60pxです。
修正してください。

コツ「なんか違う」ではなく「どこが・どう違うか」を数値や箇所で具体的に伝えると、修正の精度が上がります。

CHECK

きれいに仕上げる3つのコツ

一度に全部を渡さない「ヘッダーだけ」「ファーストビューだけ」と部分的に依頼すると、精度が上がり修正も楽になる。
design.md を先に作っておくカラーコードやフォントなどの基準をまとめておけば、実装のブレを最初から減らせる。
フォントは名前を明記する「このフォント」ではなく「Noto Sans JP」のように、正式名で指定して曖昧さをなくす。