Figma Designを初めて使う場合は、フレームを作り、文字と図形を置き、余白を調整し、画像として書き出す順に進めると、ひとつの画面を作る操作を確認できます。共通部品や複数画面の管理は、その後に学びます。
このページでは、初めての画面制作、素材の読み込み、部品の再利用、トラブル解決、開発用途に分けて、このサイトの操作記事を案内します。
初心者が進める順序
| 順序 | 確認すること | 次に読む記事 |
|---|---|---|
| 1 | フレーム・レイヤー・文字・図形を扱う | 基本操作12項目 |
| 2 | 文字量や画面幅を変えて、余白と配置を確認する | オートレイアウトの使い方 |
| 3 | 同じボタンを複数の場所で使う | アセット・コンポーネントの操作 |
| 4 | 見出し・本文・色の共通設定を作る | ローカルスタイル |
| 5 | 色や余白の値、ライト／ダーク等のモードを管理する | ローカルバリアブル |
| 6 | 画像で共有するために書き出す | 2x・固定幅・DPIの確認 |
Figmaの画面制作を学ぶ対象はFigma Designです。FigJam、Slides、Sitesなどは用途と操作が異なります。公式の入門教材も、Figma Designの基礎と製品別の教材を分けて案内しています。
配置と画面遷移を学ぶ
文字や画面幅を変えたときの配置はオートレイアウトの使い方で、クリック後の画面移動はプロトタイプの作り方で確認できます。まず部品の配置を整え、その後で「進む・戻る」の操作を設定すると、表示と遷移の問題を分けて確認できます。
素材を読み込んで始めたい
.fig はFigma用のファイルです。ダウンロードした素材は、.figファイルの読み込み方でインポート、読み込み先の権限、必要なフォントを確認してください。
- SWELL向けFigmaテンプレート：サイトの画面設計を検討する素材。
- ボタン素材35種類：ボタンの外観を比較する見本と編集用ファイル。
- 見出し素材40種類：見出しの装飾を検討する見本と編集用ファイル。
上記3点は無料配布です。無料で取得できることと、商用利用・加工・再配布・顧客への納品が許可されることは別なので、利用条件は各記事で確認してください。ほかの素材はテンプレート・素材カテゴリーから探せます。
共通部品とデザインルールを管理したい
ボタンの形を共通化するコンポーネント、文字設定などを共通化するスタイル、色や数値を共通化する変数は、管理する対象が異なります。コンポーネント・スタイル・変数・ライブラリの違いから、どこを共通化するか選びます。
- 部品を配置し、個別の文字を変える：アセットとインスタンス。
- 文字や効果の組み合わせを再利用する：ローカルスタイル。
- 色・余白・モードを切り替える：Variables。
- 適用したスタイルを個別に解除する：スタイルの解除。
操作できない・表示が変わらない
編集できない場合は、まず対象ファイルの編集権限と選択しているレイヤーを確認します。文字を変えたいのにフレーム全体を選択していたり、別ファイルのライブラリ元を編集する権限がなかったりすると、目的の操作ができません。
- フォント警告が出る：不足フォントの対処。
- Variablesのモードが変わらない：モード切替の確認。
- 書き出した画像の寸法が合わない：倍率・固定幅・再配置の違い。
ほかの症状はトラブル解決カテゴリーで確認できます。
開発・連携で使いたい
Figmaの部品を作る操作と、ファイルのデータを取得するAPIは別の作業です。REST APIとPlugin APIの比較で、外部からデータを取得する用途と、エディター内で操作する用途を選びます。
その他の連携記事はAPI・プラグインカテゴリーにまとめています。
目的別のカテゴリー
記事の画面例には撮影時期が異なるものがあります。ボタンの配置が一致しない場合は、対象機能の名称と公式資料も照合してください。