44
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Figmaでよく使うコマンドリスト

Last updated at Posted at 2022-05-31

n番煎じかとは思いますが、こういう記事はいろんな視点でいくつもあって良いかなと思ったので投稿します!

これだけ覚えておけばOKなやつ

この記事で色々書いていますが、Figmaはサービス内に便利なクイックアクションととても見やすいショートカットリストが用意されています!

そしてクイックアクションさえ開ければ、検索でメニューを見つけたり、「Shortcut」と検索してショートカットリストにアクセスし、ショートカットを確認することが出来ます。

なのでこの記事では「コマンドを覚える」というよりは「こんなコマンドあるんだな」と「こんな風に使うと便利なんだな」を知っておく場として使ってもらえると良いかなと思います!

クイックアクションを表示する

Command + /

あれ?〇〇ってどうやるんだっけって思ったらとりあえずコマンドパレットを開いて検索すれば大体出てきます
直近使ったメニューやプラグインも候補に出てきて便利です
image.png

便利小技系

ショートカットを確認する

Control + Shift + ?

ショートカットが確認できます
使ったことのあるコマンドの色が変わるというゲーム性もあるのでつい制覇したくなります。
image.png

サイドバー(UI)を非表示にする

@

コードなどと並べておいていると画面サイズが小さくなり、UIが見にくい時があります。
そんな時は@でサイドバーを非表示にすると非常にみやすくなります。

選択範囲を画像としてコピーする

Command + Shift + C

ちょっとした画像を作成した時やUIの状態を共有する時に便利です

オブジェクト間の距離を測る

基準となるオブジェクトを選択し、Optionを押しながら距離を測りたいオブジェクトにHoverする

CSSを書くときに要素間の距離を測るのに便利です

ファイル内検索

ファイル内のレイヤー名やテキストを検索でき、置換もできます

Command + F

細かく検索条件を指定したい場合は「Similayer」というプラグインが便利です :)

リンクをコピーする

Command + L

Figmaのリンクを共有する機会は何かと多いので、ショートカットを覚えておくと時短になります

選択系

レイヤー階層を無視して直接オブジェクトを選択する

Commandを押しながら選択したいオブジェクトをクリック
Commandを押しながらドラッグで複数選択もできます。

通常オブジェクトをクリックをするとレイヤー階層が上のものから選択されるので、階層が深いものを選択したいときに便利

選択しているオブジェクトの子レイヤーを選択する

オブジェクトを選択した状態でEnter

image.png

このFrameの中身を全部Fill containerにしたいんだよなとかって時に便利です

選択しているオブジェクトの親レイヤーを選択する

オブジェクトを選択した状態でShift + Enter

image.png

image.png
↑こういうコンポーネントを選択したいときに、「テキストかアイコン部分をCommand + Clickで直接選択して一個上に移動する」みたいな選択方法ができて便利です

編集系

Big nudge単位でプロパティを変更

Shiftを押しながら矢印キーで移動やサイズ変更する

Big nudgeの値はPreference > Nudge amount...から設定できます
私は、基本UI上の数値を 4 or 8 の倍数にするためSmall nudge4Big nudge8にしています。
image.png

オブジェクトを前面/背面に移動する

前面に移動: Command + ]
最前面に移動: ]
背面に移動: Command + [
最背面に移動: [

レイヤーをリネームする

Command + R

レイヤーを複数選択した状態だと、リネームメニューのモーダルが開いて、インデックスを追加したりテキストの置き換えをしたりテキストを追加したりできます
image.png

選択しているレイヤーをロック/ロック解除する

Command + Shift + L

ロックされているオブジェクトを選択する

Controlを押しながらクリック

オブジェクトを整列する

上下左右揃え

Option + 上揃え : W / 左揃え : A / 下揃え : S / 右揃え : D

ぱっと見上下左右覚えるの大変そうと思ったけど、「WASD」になっててゲームの移動と同じになってるので覚えやすいです:video_game:

中央揃え

Option + 縦揃え : V(Vertical) / 横揃え : H(Horizontal)

オブジェクトを等間隔に配置する

Control + Option + T

入れ替えてペーストする

Command + Option + Shift + V

または

Command + Shift + R

AをBに入れ替えるという作業が1クリックで済むので地味にめちゃめちゃ便利です
複数選択した状態で一括で入れ替えもできます。
image.png

Auto layoutを適用する

Shift + A

解除はOptionを追加

選択したオブジェクトをFrameで囲う

Command + Option + G

Groupのコマンドもあるけど、Figmaでは基本Frameを使うことが多いので

解除はOptionを追加

コンポーネント化する

Command + Option + K

インスタンスを解除する

Command + Option + B

ツール系

移動ツールを選択

V

テキストツールを選択

T

コメントツールを選択

C

UI系

UI(ヘッダー・サイドバー)を隠す/表示する

Command + .

確認作業をしたり画面共有をする時にさっとUIを非表示にできて便利です

コメントを隠す/表示する

Shift + C

グリッドを隠す/表示する

Shift + G

レイヤーパネルの階層を閉じる

Option + L

レイヤー階層が増えすぎて見通しが悪くなってきた時に便利です

おまけ

使用頻度は高くないけど好きなやつです

左右/上下反転する

左右反転:Shit + H
上下反転:Shift + V

image.png

UIという観点ではあまり使わないけど、簡単なグラフィックを作成する時とかは便利かも

カーソルにメッセージを表示する

/

image.png

楽しいです

44
31
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
44
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?