WEBデザイン
Figma|ショートカット集
INDEX
目次

1. macOS特定キーの記号表記解説

記号表記
記号の意味
Command
Option(alt)
^
Control
Shift
Backspace

2. よく使う・覚えておきたいショートカット

a. レイヤー操作

実行内容
コマンド(macOS)
コマンド(Windows)
一つ上の階層のレイヤーを選択する
⇧ + return(enter)
shift + return(enter)
ロックされたレイヤーを選択する
⌘ + 右クリック
ctrl + 右クリック
レイヤー(選択中以外)を全て閉じる
⌥ + L
alt + L
選択中のレイヤーの表示・非表示を切り替える
⌘ + ⇧ + H
ctrl + shift + H
選択中のレイヤーの階層を一つ上に上げる
⌘ + ]
ctrl + ]
選択中のレイヤーの階層を一つ下に下げる
⌘ + [
ctrl + [
選択中のレイヤーの階層を一番上に上げる
]
]
選択中のレイヤーの階層を一番下に下げる
[
[
選択中のレイヤーをAuto Layout化
⇧ + A
shift + A
選択中のレイヤーのAuto Layoutを解除
⌥ + ⇧ + A
alt + shift + A

b.オブジェクト

実行内容
コマンド(macOS)
コマンド(Windows)
複数コンポーネントを作成する
コンポーネント化したい複数オブジェクト選択 > カンバス上部のコンポーネントアイコンメニュークリック > 「Create Multiple Components」
(macOSと同じ)
フォントの一括変更
※変更対象のテキストレイヤー選択しておく
⌘ + / > 「Select all with same font」
ctrl + / > 「Select all with same font」
表示されていないすべてのレイヤーを表示する
⌘ + / > 「Unhide all objects」
ctrl + / > 「Unhide all objects」
すべてのオブジェクトのロックを解除
⌘ + / > 「Unlock all objects」
ctrl + / > 「Unlock all objects」
他のオブジェクトの左上コーナーにペースト
※ペースト可能な状態で特定のオブジェクトを選択しておく
⌘ + ⇧ + V
ctrl + shift + V
スタイルを複製する
⌥ + ⌘ + C(スタイルをコピー)⌥ + ⌘ + V(スタイルを貼り付け)
ctrl + alt + C(スタイルをコピー)ctrl + alt + V(スタイルを貼り付け)
画像の自動インポート機能(表示したパネルより複数の画像を選択すると、それらを連続で使い、個別にシェイプを塗りつぶすことが可能)
⌘ + ⇧ + K
ctrl + shift + K

c.表示

実行内容
コマンド(macOS)
コマンド(Windows)
Layers に切り替える
⌥ + 1
alt + 1
Assets に切り替える
⌥ + 2
alt + 2
Design に切り替える
⌥ + 8
alt + 8
Prototype に切り替える
⌥ + 9
alt + 9
Dev Mode に切り替える
⌥ + 0
alt + 0
UI の表示・非表示を切り替える
⌘ + .(ピリオド) or \(バックスラッシュ)
ctrl + \(バックスラッシュ)
上・下の Pages に移動する
PageUp or PageDown
PageUp or PageDown

d.整列

実行内容
コマンド(macOS)
コマンド(Windows)
左寄せ・右寄せ(Align Left/Right)
⌥ + A and D
alt + A and D
上寄せ・下寄せ(Align Top/Bottom)
⌥ + W and S
alt + W and S
中心寄せ・中央寄せ(Align Center)
⌥ + H and V
alt + H and V
等間隔に分布 – 中心・中央(Distribute Spacing)
⌃ + ⌥ + H and V
alt + shift + H and V
オブジェクトを整列(Tidy Up)
⌃ + ⌥ + T
alt + shift + T

e.ファイル・バージョン

実行内容
コマンド(macOS)
コマンド(Windows)
デザインのバージョン管理、保存をする
⌥ + ⌘ + S
ctrl + alt + S

f.その他

実行内容
コマンド(macOS)
コマンド(Windows)
ショートカットコマンド一覧を表示(これまでに使ったことのあるショートカットは青色に塗りつぶされる)
⌃ + ⇧ + ?
ctrl + shift + ?
Figmaのリソース使用状況を確認
⌘ + / > 「Resource use」
ctrl + / > 「Resource use」
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH