ウェブ制作
ウェブデザイン
【仕事が10倍速く
なる！】
XD・Figma
ショートカット相対表
くるまちゃん@デザイナー
2025.2.6
#Oookey_blog_008
Share on
デザインを作ろうと思った時によく使用されているAdobeXDやFigma。
近年新しく出てきたFigmaに移行したり、両方使っていく中であの機能ってこっちだとどうするんだっけ…なんて悩むことが多いのでまとめてみました。
目次
AdobeXDとFigmaとは？
ウェブのデザインからチラシのデザイン、バナーまで様々なデザインを作成するのに便利なアプリケーションの一つがAdobeXD、そしてFigmaです。
それぞれのアプリケーションには強みがあり、クライアントや現場によって使い分けが求められることがあります。
AdobeXD
「PhotoshopもIllustratorも、
この手の中に」
AdobeXD（以下、XD）は、今や様々な業務で必須となっているAdobe社がWebデザインの制作などに使用するソフトとして提供しています。
その最大の特徴としては、同じくAdobeの人気ソフトであるPhotoshopやIllustratorと簡単に連携することができ、よりプロフェッショナルな制作を行うことができます。
注意！
2025年2月4日現在、XDはメンテナンスモードになっているようです。
詳しくは公式サイトをご確認ください。
Figma「想像をシームレスに」
2015年ごろより使用され始め、今となってはXDと並ぶデザイン作成ソフトとして親しまれています。
デザインだけではなく、FigJamという使いやすすぎるホワイトボードがあったり、ベータ版としてプレゼン資料が作成できるFigma slidesがあり、デザイナーだけではなく様々な人に使用されています。
チームメンバーとの共同作業がわかりやすい、行いやすい仕組みが多く、コミュニケーションが取りやすいところが個人的な推しポイントです。
ショートカット相対表
さて、実際に使用するにあたって便利な機能やショートカットをまとめてみました！
お馴染みの機能から使ったことない機能まで、ぜひ最後までご覧ください！
アプリ間共通ショートカット
| メニュー | macOS | Windows |
|---|---|---|
| ファイル新規作成 | ⌘+N | Ctrl+N |
| 保存 | ⌘+S | Ctrl+S |
| 要素を10pxずつ移動（変更可能） | ⇧+矢印キー | Shift+矢印キー |
| 取り消し | ⌘+Z | Ctrl+Z |
| やり直し | ⇧+⌘+Z | Shift+Ctrl+Z |
| カット | ⌘+X | Ctrl+X |
| コピー | ⌘+C | Ctrl+C |
| ペースト | ⌘+V | Ctrl+V |
| 書式なしでペースト | ⇧+⌘+V | Shift+Ctrl+V |
| 全て選択 | ⌘+A | Ctrl+A |
| 選択範囲のグループ化 | ⌘+G | Ctrl+G |
| 選択範囲のグループ解除 | ⇧+⌘+G | Ctrl+Shift+G |
| 手のひらツール | Space | Space |
| 選択/移動ツール | V | V |
ツールメニュー系
| メニュー | macOS：XD | macOS：Figma | Windows：XD | Windows：Figma |
|---|---|---|---|---|
| アートボード/ フレームツール |
A | F | A | F |
| 楕円ツール | E | O | E | O |
| シェイプでマスク | ⇧+⌘+M | Ctrl+⌘+M | Shift+Ctrl+M | Ctrl+Alt+M |
| 共通 | ||||
| ペンツール | P | P | P | P |
| 長方形ツール | R | R | R | R |
| 線ツール | L | L | L | L |
| スポイトツール | I | I | I | I |
| 各ソフトのみ | ||||
| 多角形ツール | Y | Y | ||
| コメントの追加 | C | C | ||
表示系
| メニュー | macOS：XD | macOS：Figma | Windows：XD | Windows：Figma |
|---|---|---|---|---|
| レイアウトグリッド | ⌘+' | ⇧+G | Ctrl+' | Shift+G |
| 整列（左揃え） | Ctrl+⌘+← | ⌥+A | Ctrl+Shift+← | alt+A |
| 整列（右揃え） | Ctrl+⌘+→ | ⌥+D | Ctrl+Shift+→ | alt+D |
| 整列（上揃え） | Ctrl+⌘+↑ | ⌥+W | Ctrl+Shift+↑ | alt+W |
| 整列（下揃え） | Ctrl+⌘+↓ | ⌥+S | Ctrl+Shift+↓ | alt+S |
| 整列（水平揃え） | Ctrl+⌘+C | ⌥+H | Shift+C | alt+H |
| 整列（垂直揃え） | Ctrl+⌘+M | ⌥+V | Shift+M | alt+V |
| 選択範囲の表示/ 非表示 |
⌘+, | ⇧+⌘+H | Ctrl+, | Shift+Ctrl+H |
| 選択範囲の表示/ 非表示 |
⌘+, | ⇧+⌘+H | Ctrl+, | Shift+Ctrl+H |
| 選択範囲の表示/ 非表示 |
⌘+, | ⇧+⌘+H | Ctrl+, | Shift+Ctrl+H |
| 選択範囲のロック /ロック解除 |
⌘+L | ⇧+⌘+L | Ctrl+L | Shift+Ctrl+L |
| 距離の測定 | ⌥ | ⌥ | Alt | Alt |
| 複製 | ⌥+ドラッグ | ⌥+ドラッグ | Alt+ドラッグ | Alt+ドラッグ |
| 最前面へ | ⇧+⌘+] | ] | Shift+Ctrl+] | ] |
| 最背面へ | ⇧+⌘+[ | [ | Shift+Ctrl+[ | [ |
| 前面へ | ⌘+] | ⌘+] | Ctrl+] | Ctrl+] |
| 背面へ | ⌘+[ | ⌘+[ | Ctrl+[ | Ctrl+[ |
| 各ソフトのみ | ||||
| 上下反転 | ⇧+V | ⇧+V | ||
| 上下反転 | ⇧+H | ⇧+H | ||
| ネスト選択（複数選択） | ⌘+クリック | Ctrl+クリック | ||
| 選択範囲のフレーム化 | ⌘+⌥+G | Ctrl+Alt+G | ||
まとめ
今回はXDとFigmaのショートカットの相対表をご紹介しました！
どちらにもいいところがあるので、どちらも使えるのがベストかもしれませんね。
実は、FIgmaでは以下のコマンドでショートカットの一覧を見る機能があります。
こちらもぜひ試してみてください！
control+shift+?（Windows、mac共通）
あなたのデザイン制作のお供になれますように。
Share on