Figma Make を使ってみた
個人開発アプリのWebデザインを考える際に、Figma Makeを使って壁打ちしてみました。
これまではVercelのv0を利用していましたが、無料プランの利用制限に引っかかってしまったため、代わりとなるAIデザインツールを探していました。
最初に思い出したのはGoogle LabsのStitchでしたが、レスポンス速度やデザイン精度、調整の自由度が今ひとつだったため見送りました。
そこで、以前少し触ったことのあるFigma Makeを再び試してみることにしました。
Figma Makeは、Figmaプラットフォーム上のツールだけあって、Figmaとの相性がとても良いです。
テキスト指示によるデザイン生成に加え、shadcnベースのコード生成や、Figmaデータのエクスポートにも対応しています。
さらに、既存のFigmaデータをインポートして活用できる点も魅力的です。
特に良かったのは、Figma Makeで生成したデザインをFigmaにエクスポートし、気になる箇所だけをコピーして再度Figma Makeに貼り付けることで、部分的な改善提案を得られることです。
デザイン全体を作り直すことなく、ピンポイントで修正できるのは便利でした。
v0とFigma Makeはいずれも、デザイン修正依頼やコンテキストの注入といった点で似ていますが、 「Figmaとの連携」という明確な差別化ポイント がFigma Makeの魅力だと思います。
ただし注意点として、FigmaのStarterプランでは利用できる機能がかなり限られます。
途中で行き詰まることもあるため、継続的に使う場合はProfessionalプランなどの課金を検討したほうが良いでしょう。
-
コメント
0
読み込み中...
シェアする
フォローする
購読する
関連する記事
タグ「フロントエンド」の記事
AI にコードを書かせた後、余計なコードを見つけて消す作業があります。 不毛なことなので、それらの作業を減らすためのお作法を紹介します。 未使用コードを消す 以下でも書きましたが、未使用コードの検査に knip を使うことが多いです。 ht
最近、iframeを使っています。 クライアントサイドで埋め込む想定で、iframeを使おうとしています。 色々と苦労したことがあったので、書いて残しておこうと思います。 レスポンスヘッダー 前提として、ウェブアプリケーションをプロダクショ
紙を積んだイラストをSVGで書こうとしていました。 （当たり前ですが）図形を表現するためには数学の知識が必要で、学生の頃の記憶を思い出したので疲れました。 所感について、諸々書こうと思います。 成果物 実際に完成したのは、以下の画像ができま
2026年02月17日