見出し画像

今日から使える Figma ショートカット・時短テク

突然ですが、皆さん Figma 使ってますか?
私は2,3ヶ月前から使い始めたのですが、デザインだけでなく付随するコミュニケーションや挙動の確認まで包括して行える Figma の便利さを日々実感しています。

最近ではメインのデザインツールとして採用している企業も増えていると聞きます。その一方で、既に知見が広く共有されている Adobe 系や Sketch ほど作業ノウハウなどの記事がなく、皆さん手探りで使っている部分もあるかと思い、自分の知る範囲ではありますが業務の合間で Figma についての記事を発信し情報共有をやっていければと思っています。

かなり話を飛ばしますが、つい最近、納期に追われる Web 制作会社が舞台となる(書籍を映像化した)TV ドラマが放送されているのを見ました。
まさにパブリックなイメージ通りといった感じの労働環境が分かりやすく描かれていて、ついでに自分がまだデザインの経験が浅く何をするにも時間がかかり忙殺されていた時のことを思い出したりもしました(ドラマで映されていたのは、どちらかというと個人スキルではなく組織マネジメント的な領域の話だったので若干文脈が違いますが…)。

単純に作業フローやデザイン思考に不慣れだったというのもありますが、ほとんど触ったことのなかった(デザイン未経験からのスタートでした)デザインツールの操作を習得するのに一番時間がかかったような記憶があります。当時はよく「Fireworks ショートカット」でググったり、Photoshop で作業手順を簡略化する方法を色々試していたような気がします(とはいいつつも、今でもたまに似たよう感じでキャッチアップは続けています)。

幸いなことに、これまでに勤めた幾つかの制作会社では長時間の勤務を推奨しない意識が共有されていたこともあり、上述したような時短テクを織り交ぜつつ Web デザインに慣れてきたことも重なって、ドラマのような厳しい環境にはそれほど直面しませんでした。

その一方で、今まさに作業を効率化したい方もいるのでは…と思い、普段使っている Figma のちょっとしたショートカットや Tipsのようなものを発信するべくこの記事を書いています。

とはいえ、こういったショートカットなど機能紹介系の記事ってどうしても「たくさんありすぎて何から覚えていけばいいか分からない」「そもそも一度に覚えられない」となりがちですよね…。

そこで今回は、自分が調べて・使い始めてすぐに良かったと感じられたものに絞ってご紹介していきます。基本的な操作方法にプラスアルファで、すぐに今日から作業がちょっと速く、便利になるものから試してみましょう。

(なお、筆者の環境は macOS のため、そちら寄りの表記としています。Windows 環境で利用されている方は ⌘ command → ctrl とするなど、適宜読み替えていただければ🙇‍♂️)

レイヤー(選択中以外)を全て閉じる

⌥ option(alt) + L

Figma に限らず、デザインツールで作業しているとレイヤー階層が深くなり、レイヤーツリーが煩雑になり、プチ迷子になりがちですよね…(なりませんか?私はなります)。

そういった場面でこれを押せば、選択中のオブジェクトが属しているレイヤー階層を除いた全てのレイヤーを閉じてくれます。

左ペインをレイヤーツリーから Assets に切り替える

⌥ option(alt) + 2

初期でレイヤーツリー(Layers)が表示されている左ペインを、Assets リストに切り替えるやつです。コンポーネントベースの UI デザインを行う時にはレイヤーツリーと Assets を行き来するので特に重宝します。

これが UX 的に優れている点として、ただ切り替わるだけでなく検索欄(Search)にフォーカスした状態で切り替わります。コンポーネント一覧を表示しつつ即座に名前で検索できるのでかなり便利です。ちなみに元のレイヤーツリー(Layers)に戻したい時は ⌥ option(alt) + 1 で OK です。

UI の表示・非表示を切り替える

⌘ command +  .(ピリオド)or  \(バックスラッシュ)

大きいディスプレイだとそこまで問題ないのですが、小さいディスプレイで作業する際、全体を俯瞰したい時にズームアウトをするとデザインデータ自体が小さくなり過ぎてしまい、辛さを感じている方にオススメです。

これを押すことで UI(左右のパネル)を閉じることができ、画面が広く使えるようになります。デザインツールでは定番の機能ですね。13インチの MacBook Pro 単体で作業する時によく使っています。

選択中のレイヤーの表示・非表示を切り替える

⌘ command + shift + H

レイヤーの表示・非表示は作業内容を問わず使用頻度が高いですよね。でもレイヤー右の小さな👁をちまちまクリックするの辛くないですか?私は辛いのでこれを押して切り替えてます。

よくやるのが、複数パターンを作りたい時に

・元のオブジェクトを選択
・そのまま ⌘ command + D で複製
・複製レイヤーはそのまま ⌘ command + shift + H で非表示にして残す
tab で一つ下の複製元レイヤーを選択して適宜編集する

みたいな作業を高速に済ませられるのでオススメです。

一つ上の階層のレイヤーを選択する

shift + return(enter)

return(enter)で Frame や Group の下の階層へ掘り進んでいくのと逆の操作ですね。Figma では ⌘ command を押しながらのクリックで下の方の階層のレイヤーも一発で選択できるのですが、間違えて深すぎるレイヤーを選択してしまった時とかにこれで上の方へ戻ると便利な感じです。

UI デザインの場面では、コンポーネントの高さとかをいじって画面下の方が最上階の Frame から見切れたらこのショートカットを連打して最上階の Frame を選択した状態にして、⌘ command を押しながら縦に Frame を伸ばして見切れないよう調整するとかもよくやります。

関係ないですが "階層のレイヤー" って頭痛が痛いやつかもしれないですね(ただこれに代わる良い表現が思い浮かばず…)。

上・下の Pages に移動する

PageUp or PageDown

読んで字の如く、といった感じなんですが自分はこれに気付くのに結構かかったので一応書いておきます。所属しているスペースマーケットのデザインでは、Pages を Git のブランチに見立てて枝分かれ的に作業したり、プロトタイピングの都合上 PC と SP で Pages を分けたりするので割と Pages 間を行き来しますが、これを押すとちょっとだけラクできます。

ちなみにこれ、どちらも Mac ユーザーには馴染みが無いキーかもしれませんが、fn + ↑ orの組み合わせで同じ動作となります。そういえばテンキー付きの Magic Keyboard なら PageUp・PageDown 単独のキーが搭載されてますね。

Copy as PNG

右クリックしてコンテキストメニューの下の方にある機能「Copy as 〜」を使うと、選択しているレイヤーをクリップボードに一時保存できます。中でも Copy as PNG を使えば、レイヤーを気軽に一枚の画像としてコピペできるので、例えばバナーデザインの際にモックアップへ仮で当てはめる時とかにけっこう役立ちます(ちなみに png に限り、ブラウザ版では表示されず デスクトップ App 版のみ利用可能なようです)。

いちいち png として書き出し → 再び Figma 上に持ってくる手間が省けるので、地味な機能ですが覚えておいて損は無いです。

終わりに

デザイン手法や理念・思考に関しては人や組織によって千差万別ですが、"効率的に作業したい"という思いは基本的に人・組織・作業内容を問わず共通するものなので、こういったツール紹介系の記事は書きやすくて良いですね。

こういった時短テクを駆使することで、手を動かす時間から頭を動かす時間を創出できれば幸いです。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

あざます!良かったらSNSシェアもお願いしますm(_ _)m
55
Web・グラフィックのデザイナーとして制作に携わったのち、スペースマーケットに参加。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。