【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する作業が必要です。
コードがHTML/CSSであれば、フレーム化され、AutoLayoutも適用されています。
ぽちぽちするだけで複数ページを作成できました。
Figma to Code でFIgmaデータをコード化することも可能
「Figma to Code」のプラグイン↓
プラグインを起動中にフレームを選択するとコードが表示されます。
そのコードをCreateにペーストすると、下記のような画面が生成されました。
