members

members

デザイナーが選ぶ!Figmaで使用頻度の高いショートカットキー BEST4

Tweet

デザイナーが選ぶ!Figmaで使用頻度の高いショートカットキー BEST4

こんにちは。EMCカンパニー第4ビジネスユニット アカウントサービス第8ユニット所属の森です。
メンバーズで担当している案件では主にWebサイトのUI/UXやデザイン設計・改善をしています。
今回はUIツールのFigmaから作業効率がアップできる、使用頻度の高いショートカットをご紹介します。

 


 

1.Copy properties & Paste properties

Copy properties & Paste properties

こちらは使用頻度No1の、プロパティのコピー&ペースト機能です。
画像の貼り替え作業や、テキストスタイルのみコピーすることができるのでデザインのパターンを増やす際に役立ちます。

Mac
プロパティをコピー: ⌥option + ⌘command + C
プロパティをペースト: ⌥option + ⌘command + V

Windows
プロパティをコピー: alt + ctrl + C
プロパティをペースト: alt + ctrl + V

2.Copy as PNG

Copy as PNG

UIをPNGで複製したい時に、書き出しの工程が省けるのでこちらのショートカットをよく使用します。

Mac
PNG複製: ⇧shift + ⌘command + C

Windows
PNG複製: ⇧shift + ctrl + C

3.Bring to front & Send to back

Bring forward & Send backward

レイヤーを最前面と最背面へ移動するショートカット。

Mac
Bring to front(レイヤー最前面へ): ⌥option + ⌘command + ]
Send to back(レイヤー最背面へ): ⌥option + ⌘command + [

Windows
Bring forward(レイヤー最前面へ): alt + ctrl + ]
Send backward(レイヤー最背面へ): alt + ctrl + [

4.Bring forward & Send backward

Bring forward & Send backward

レイヤーの上下関係を一枚ずつ変更するショートカット。細かなレイヤーを整理するときにはこちらを使用します。

Mac
Bring forward(レイヤー順上へ): ⌘command + ]
Send backward(レイヤー順下へ): ⌘command + [

Windows
Bring forward(レイヤー順上へ): ctrl + ]
Send backward(レイヤー順下へ): ctrl + [

おわりに

毎日FigmaでUI制作の作業をするのですが、以上4つのショートカットを覚えておくだけで作業効率がぐんとアップします。
まだ使ったことがない方は、ぜひ今回を期に使用してみてください!

コラム執筆

森 遥香(もり はるか)

2019年4月入社。EMCカンパニー第4ビジネスユニット アカウントサービス第8ユニットに所属するデザイナー。素敵なデザインをこよなく愛する。