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
読み込み中...
関連する記事
タグ「フロントエンド」の記事
また、以下の記事の続きを書こうと思います。 https://silverbirder.github.io/blog/contents/20260312/ ビジネスロジック アプリケーションのビジネスロジックに関することについて書きます。 複
2026年03月18日
Webフロントエンドのコードレビューをしているときに考えていることについて書きます。 毎日1記事投稿、1記事30分という制約を課していますので、本記事は完璧ではありません。(言い訳) また希望的な考えもあるので、実践していないものもあります
2026年03月12日
AI にコードを書かせた後、余計なコードを見つけて消す作業があります。 不毛なことなので、それらの作業を減らすためのお作法を紹介します。 未使用コードを消す 以下でも書きましたが、未使用コードの検査に knip を使うことが多いです。 ht