![見出し画像](https://assets.st-note.com/production/uploads/images/149110085/rectangle_large_type_2_73c10d3bfc329cd225ee874895168a60.png?width=1200)
コードからFigmaへ!?神プラグインを使ってWebサイト制作を超効率化
プラグインはこちら
https://www.figma.com/community/plugin/1222554159237609568/code-to-design-playground
Figma AIは使えなくなってしまいましたが、Claudeと今回紹介する「code.to.design」を使うことで、0→1の部分に関しては同じようなことが実現可能です。
STEP1:Claudeでワイヤーを作成する
注意:「HTML、CSSで」と依頼しないと、SVGで生成することが多々あります。
![](https://assets.st-note.com/img/1722396733997-OJIn5g4gu3.png?width=1200)
STEP2:ソースコードをコピペする
Figma上で「code.to.design」をRunし、ソースコードをペーストする
![](https://assets.st-note.com/img/1722396796072-dZ5lgmnDtL.png?width=1200)
STEP3:Figmaに実装
Add to canvasを押して完了
![](https://assets.st-note.com/img/1722396845432-7AK2mVMtmM.png?width=1200)
この記事が気に入ったらサポートをしてみませんか?