Figma Webデザイン

Figma初心者がよく使うショートカットキーをカテゴリごとにまとめてみた

Figmaを使い始めたけど、もっと効率よく作業したい!

そんな方に少しでも役立てられればと思い、Figmaでよくつかうショートカットキーをまとめました。

そんな私もFigmaを使ってWebデザインの絶賛勉強中です!
もっと効率よく、時間をかけずに作業をすすめたいと思ったので、ショートカットキーをまとめてみました。

本記事の内容

  • オススメ無料フォント10選
  • フォントのインストール方法
  • Figmaへの反映方法

そもそもFigmaとは?

Figmaは2016年9月に正式リリースされたアプリデザイン(UIデザイン)ツールです。
比較的新しいサービスですが、操作方法も直感的に使用でき、最近どんどん進化してきて便利なプラグインも次々に出ているとても素晴らしいツールです。

Figmaのポイント3つ

無料で使える

デザインの勉強を始める場合やちょっとしたチラシを作りたい場合などに、最初から何万円もするようなツールを購入するには少し躊躇してしまいますが、Figmaなら無料で始められます!

共同作業ができる

通常のデザインファイルなどは、チームメンバーやクライアントにデザインデータの受け渡しをすることになると思いますが、Figmaは「URL」を共有するだけで誰でも見ることができ、同時に編集もできるので、共有のハードルが低く、スピード感も段違いに早いです!

ブラウザで動くデザインソフト

Figmaはデザインツールではありますが、インストールなしでブラウザですぐ使えるので、使用ハードルも非常に低いです。

始め方は非常に簡単で、オフィシャルサイト(https://www.figma.com/)にアクセスし、「Try Figma for free」からアカウント登録すれば誰でも無料で始められます

役立つショートカットキーたち

ごま
ごま

7月にFigmaを使い始めたけど、もっと効率よく作業を進めるために、便利なショートカットを勉強しよう♪

ということでFigma使用歴2ヶ月の私が便利だと感じたFigmaのショートカットをご紹介します!
※今回ご紹介するのはMacでのショートカットキーです。

特定キーの記号表記

…command(Windows=Ctrl)
・⌥…option(Windows=Alt)
・⌃ …control
・⇧…shift

Figma以外でもつかう共通編

+C選択した項目をクリップボードにコピー
+X選択した項目を切り取り、クリップボードにコピー  
+Vクリップボードの内容をペースト
+Z直前のコマンドを取り消し
+A項目をすべて選択
⇧+click  複数選択
escキャンセル

Figmaで使うショートカットキー

ツール関連

まずはFigmaの基本的なツールのショートカット一覧。
これはツールバーで各ツールを選択する際に記載されているので自然と覚えられると思います。

V移動
F(A) キャンバス作成
RRectangle(□)の作成    
LLine(/)の作成
OEllipse(○)の作成
Pペンツール
Tテキストの作成

レイヤー関連

+Gオブジェクトのグループ化
+L開いているレイヤーを全て閉じる
+右Click ロックされたレイヤーを選択する
+[選択中のレイヤーを一つ下の階層に下げる
+[選択中のレイヤーをキャンバスの一番下の階層に下げる  
+]選択中のレイヤーを一つ上の階層に上げる
+]選択中のレイヤーをキャンバスの一番上の階層に上げる

オブジェクト関連

ダイレクト選択
+Drag 元の要素をそのままにして複製
⇧+Drag水平垂直移動・縦横比を維持したまま拡大縮小  
⇧+矢印10px単位で移動
 +tab開いているタブの表示切り替え
+Cスタイルのコピー
+Vスタイルの貼り付け
+Bテキストを太字にする
+Uテキストに下線をひく
+Iテキストを斜体にする
+Kリンクを追加
⇧+Hオブジェクトを左右反転
⇧+Vオブジェクトを上下反転
+Aオブジェクトをフレームのに整列
+Hオブジェクトをフレームの中央に整列
+Dオブジェクトをフレームのに整列
+Wオブジェクトをフレームのに整列
+Sオブジェクトをフレームのに整列
+Vオブジェクトをフレームの上下中央に整列

表示関連

各要素の余白を表示
+ピリオド UI(左右のパネル)の表示/非表示   
⇧+R定規の表示/非表示
+Yアウトラインの表示/非表示

その他便利なもの

+Rフレームの名前編集
⇧+Aオートレイアウトに変更
+⇧+Aオートレイアウトを解除
+⇧+E エクスポート
+2コンポーネントパネルを表示   
+Kコンポーネント作成
+Bコンポーネント解除

最後に

今回はショートカットキーをまとめましたが、

Figmaの効率をさらにUPするためにはプラグインの活用も必須です!

おすすめのプラグインについてもまとめていますのでよかったらこちらもどうぞ

今回はこの記事のサムネイル画像もFigmaで作成してみました。
今後もFigmaについて勉強したことを投稿していきますので、参考にしていただければ幸いです♪

最後まで読んでいただきありがとうございました。

-Figma, Webデザイン
-,