【Webサイト制作 3STEP】Notion→Claude→Figmaでワイヤーフレームからデザインまでの作業を短縮する

手順1：NotionでWebサイトの構成を作成

手順2：Claudeに構成を渡し、ワイヤーフレームを生成

「Figmaライクに」と指示すると、Figmaで編集しやすいワイヤーにしてくれます。

「Figmaライクに」と指示しない場合↓

「Figmaライクに」と指示した場合↓

注意

ClaudeはSVGで生成することがあるため、「HTML/CSSで」と指示するのがお薦めです。

手順3：Figmaで「code.to.design」を使用

「code.to.design」のプラグイン↓

https://www.figma.com/community/plugin/1222554159237609568/code-to-design-playground

プラグインをRUNし、Claudeで生成したコードをペーストする。その後、「Update canvas」を押すとFigmaにフレームが配置されます。

Claudeで生成したコードがSVGだと、中の要素はフレームじゃないのでAutoLayoutも適用されていません。手動でグループセクションからフレームセクションに変更し、AutoLayoutする作業が必要です。

SVGを使うとフレーム化、AutoLayout化されない

コードがHTML/CSSであれば、フレーム化され、AutoLayoutも適用されています。

HTML/CSSを使うとフレーム化、AutoLayout化されない

ぽちぽちするだけで複数ページを作成できました。

Figma to Code でFIgmaデータをコード化することも可能

「Figma to Code」のプラグイン↓

https://www.figma.com/community/plugin/842128343887142055/figma-to-code-html-tailwind-flutter-swiftui

プラグインを起動中にフレームを選択するとコードが表示されます。

そのコードをCreateにペーストすると、下記のような画面が生成されました。