概要
https://iret.media/156913
詳細内容
## 【Figma Make】1000以上のプロンプトを書いて見つけた5つのコツ
https://iret.media/156913
Figma Makeの活用を通じて、実務レベルで高品質なデザインを生成するための5つの具体的コツを著者の1000回以上の試行経験から解説します。
**Content Type**: 📖 Tutorial & Guide
**Language**: ja
**Scores**: Signal:4/5 | Depth:3/5 | Unique:3/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 100/100 | **Annex Potential**: 98/100 | **Overall**: 76/100
**Topics**: [[Figma Make, プロンプトエンジニアリング, UI/UXデザイン, 生成AI, Web開発ワークフロー]]
生成AIを用いたデザイン作成ツールが増える中、実務で活用できる質の高いデザイン生成には試行錯誤が必要です。本記事では、著者がFigma AIの主要機能「Figma Make」を1000回以上使用して得た、精度の高いデザインを生成するための5つのコツを共有しています。
まず、Figma Makeの公式ベストプラクティス（最初のプロンプトでの詳細記述、デザインファイルの整理、独自のコンポーネント活用など）が紹介されます。これらを踏まえつつ、より具体的な実践的ヒントが以下の5点にまとめられています。
1. **ファイル構造は最初に指定し、小さな単位で分割する**: 大規模な画面で要素が多すぎるファイルを生成すると、タイムエラーや動作遅延が発生する課題を解決します。Reactの構造を参考に、ページや項目ごとにファイルを分割するアプローチで、初期段階での指定が重要と強調されています。
2. **プロンプトは「大枠→ピンポイント」の2段階で書く**: 初めに作成したい画面の目的、必要な機能、ターゲットユーザー、デザインのテイスト（VOGUEのような洗練された感じなど）、フォント、アニメーションの有無といった「大枠」を具体的に指定します。次に、ファイル名やクラス名を用いて修正箇所を「ピンポイント」で指示することで、生成精度が向上します。
3. **レイアウト変更は「デザインファイル」と往復する**: 大きなレイアウト変更やユニークなデザインを実現する際には、Figma Makeで生成したデザインを通常のFigma Designファイルにコピーして修正し、再度Figma Makeに取り込むことで、期待通りの精度を迅速に得られると解説します。Figma Designでのレイヤー整理も高品質なコード生成に繋がります。
4. **数値連動は「根気」と「場合分け」で乗り切る**: バックエンドとの連携を含むシステム画面のプロトタイプ作成では、数値連動や条件分岐（「〜の場合」「〜を押すと」）など複雑なロジックの再現に悩まされることが多いものの、情報を整理し、根気強くプロンプトを具体的に書き込むことで実現可能だと述べられています。
5. **「Guidelines.md」を活用してUIを統一**: ファイルや表示場所によってUI（表、ボタン、ダイアログなど）の一貫性が失われる問題を解決するため、既存UIの参照をプロンプトで指示したり、デフォルトで作成される「Guidelines.md」ファイルにデザインシステムやコーディングルールを記述することが推奨されています。
著者は、Figma Makeの進化が著しく、使いこなすことで業務効率向上と可能性拡大に繋がると結論付けています。Webアプリケーションエンジニアにとって、UI/UXデザインと開発ワークフローの融合を加速させるFigma Makeの効果的な活用法として、これらの具体的な知見は非常に価値があります。特に、実務での複雑な要件への対応や、デザインの一貫性維持といった具体的な課題解決に役立つでしょう。