🎯この記事を読むとできること
- 要素が思うように選べず、Group解除の連続……そんなストレスを減らせます
- Figmaって不器用だけどなんか憎めないやつ……って思ってくれたら嬉しい
👤対象となる方
- Figmaの選択操作でいつもワーーー！となる方
- XDと違ってFigmaなんかわからずやだなって思ってる方
急いでいる方向け 記事内で紹介したショートカット集
| 操作内容 | ショートカット |
|---|---|
| ピンポイント選択 | Cmd / Ctrl + クリック |
| 複数選択 |
Cmd / Ctrl + クリック or Cmd / Ctrl + Shift + クリック
|
| 安全な範囲選択 | Cmd / Ctrl + ドラッグ |
| 子要素へ進む |
ダブルクリック or Enter
|
| 親要素へ戻る |
Esc または Shift + Enter
|
🧰 1. 基本の選択操作
✅ 単体・複数の選択
- 単体選択はクリック。
Auto Layout内などの要素を選択するときはCmd / Ctrl + クリック - 複数選択は
Shift + クリック
Auto Layout内などの要素を複数選択するときはCmd / Ctrl + Shift + クリック - 範囲選択したいときは、ドラッグで囲う。
ですが、大体親要素ごと移動されちゃう場面が多いのでCmd / Ctrl + ドラッグが安全です。
🧭 2. 親子関係を意識した選択
👨👧 親要素から子要素へ入る
- 基本は目的要素を選択できるまで
ダブルクリックを繰り返す - 親要素選択時に
Enterで選択している親要素内直下の子要素を全て選択
同じスタイルの子要素を一括選択して編集したいときに便利です。 - そのままEnterキーを押し続けると、選択している要素の数を維持しながら、最後の子要素になるまで選択要素が切り替わります。
👶 子要素から親要素を選ぶ
- 選択中に
Escを押すと、選択全解除、無選択状態に - 一つ上の親要素を選択するには
Shift + Enterこちらも繰り返すことでどんどん上の要素まで遡ります。
👦 同一階層の要素を選ぶ
- 選択している要素と同一階層の要素は
クリックで選択できます。 - 選択している要素と同一階層の要素を全選択したいときは
Cmd / Ctrl + A - 選択している要素からレイヤー上の次、前の要素を切り替えたいときは
Tab/Shift + Tab
📐 3. Auto Layout内での操作を快適に
出来上がったAuto Layout要素の中に新たな要素をドラッグで持って行きたい時があります。
カーソル合わせた先に青いガイドラインが出るのでそこで判断できるんですが、
複雑に入れ子になっているとそのガイドがどこを指してるのかわからない…！
本当はもっと中に追加したいのにガイドがそこまで出てこない…！
そんなときは…
📥 要素の挿入ポイントを見極める
-
Cmd / Ctrlを押しながらドラッグすることでAuto Layoutを無視できる！ - やっぱやめた！ってときは
Esc
⌨️ 4. 選択した先での便利そうなショートカット
Auto Layout内の選択した要素の移動
方向に合わせて ← / → / ↑ / ↓
選択した要素の大きさを徐々に変更
Cmd / Ctrl を押しながら ← / → / ↑ / ↓
選択した要素内の同色の色を一括で変更する
選択した状態で、右サイドバーの 選択範囲の色 一覧から該当の色を選んで色変更
🙌 まとめ
この記事が「ちょっとFigmaが使いやすくなったかも」と思ってもらえたら嬉しいです！
修正指示をスムーズにする校正ツール「AUN（aun.tools）」を広島を拠点に開発・運営している、株式会社フォノグラムのテックブログです。 エンジニア熱烈❤️🔥募集中です！
Discussion