目次
普段はバックエンド開発を中心としているエンジニアの私ですが、「デザインツールを使いこなせたらもっと仕事の幅が広がるのでは？」と思い、人気のFigma（フィグマ）に入門してみました。
いざ触りはじめてみると、なにがなんやら…..
そんな私が独学ではありますが、調べたことをまとめてみました。
Figmaの基本画面
Figmaの画面構成
Figmaにログインして新しいファイルを作成すると、次のような画面が表示されます。
- 左側：レイヤーパネル
ここには作成した図形やテキストなどの「レイヤー」が一覧で表示されます。WordやPowerPointの「オブジェクト一覧」と似ています。 - 中央：キャンバス
実際にデザインを配置していく場所です。ドラッグ＆ドロップで自由に図形を置いたり動かしたりできます。 - 右側：プロパティパネル
選択中の図形やテキストの「色」や「サイズ」「位置」など、細かい設定をここで変更できます
基本操作
1. 図形を置いてみる
- 画面下部の「長方形」をクリック
（またはショートカット：Rキー） - キャンバス上でドラッグすると、四角形が描けます
- 右側のパネルで「色」や「枠線」も簡単に変更できます
2. テキストを入力する
- 下部メニューから「テキスト」（Tのアイコン）をクリック
- キャンバスをクリックして文字を入力
- フォントやサイズは右側のパネルから選択できます
3. オブジェクトを揃える・グループ化する
- 複数選択（Shift+クリック）→右クリックで「グループ化」
- グループ化したオブジェクトやテキストを「位置」で左右や上下に揃えることもできます
よくあるつまずきポイント
コンポーネントは「パーツのひな型」として登録し、何度も使い回せる仕組みです。
- 例：同じデザインのボタンを何箇所にも使いたいとき、「コンポーネント」にしておけば一括でデザイン変更が反映されます。
- 「メインコンポーネント」を変更すれば、コピーした「インスタンス」も自動で更新されます。
イメージ図：コンポーネントのしくみ
インスタンス作成
メインコンポーネントを変更するとインスタンスも変更される
1. オートレイアウトとは？
オートレイアウトは、グループ内の要素を自動で「縦並び」「横並び」に整列してくれる機能です。
- 例：複数のボタンやラベルを「同じ間隔」で自動配置したいときに便利です。
- 並び替えが変わっても、自動でレイアウトが調整されます。
イメージ図：オートレイアウト
オートレイアウトを追加
2. 誤操作時のリカバリ方法
■ 操作を間違えたときは「戻る」で安心
直前の操作を元に戻したいときは
- Windows：Ctrl + Z
- Mac：Command + Z
■ 消したものを復活させたいとき（Redo）
「元に戻す」をやりすぎてしまったときは
- Windows：Ctrl + Shift + Z
- Mac：Command + Shift + Z
■ 保存は自動
Figmaは操作が自動保存されるので、「保存し忘れ」の心配はありません。もし誤ってファイルを閉じても、直前までの状態がそのまま残っています。
■ 編集履歴も安心
左上メニューから「ファイル」→「バージョン履歴」を開くと、過去の編集履歴にいつでも戻ることができます。
3. その他の“あるある”つまずきと対策
■ レイヤーが多くてどこを選んだかわからない！
- 名前を変更せずにそのまま作り進めると、思ったところをうまく選択できなくなったりします。(整理整頓ダイジ。)
- 左側のレイヤーパネルで「名前」を付けて管理すると迷いません。
- オブジェクトを選択すると、どのレイヤーかわかりやすくハイライトされます。
■ 図形やテキストが消えた！
- 一瞬消し飛んだかと思って思考が止まります。
- 「レイヤーが非表示」になっていないか確認（👁アイコンで表示／非表示切り替え）
- Undo（元に戻す）ですぐに復活
まとめ
Figmaは直感的な操作でUIデザインを作っていけますが、最初はボタンだったりヘッダー等いきなり画面全てを作ろうと思うと大変なので、小さい単位のUIを作りつつAI等に聞きながら、使って行くのがいいかなと思いました。
本記事が、みなさんの「Figmaデビュー」のきっかけになれば幸いです！
