こんにちは。EMCカンパニー第4ビジネスユニット アカウントサービス第8ユニット所属の森です。
メンバーズで担当している案件では主にWebサイトのUI/UXやデザイン設計・改善をしています。
今回はUIツールのFigmaから作業効率がアップできる、使用頻度の高いショートカットをご紹介します。
1.Copy properties & Paste properties
こちらは使用頻度No1の、プロパティのコピー&ペースト機能です。
画像の貼り替え作業や、テキストスタイルのみコピーすることができるのでデザインのパターンを増やす際に役立ちます。
Mac
プロパティをコピー: ⌥option + ⌘command + C
プロパティをペースト: ⌥option + ⌘command + V
Windows
プロパティをコピー: alt + ctrl + C
プロパティをペースト: alt + ctrl + V
2.Copy as PNG
UIをPNGで複製したい時に、書き出しの工程が省けるのでこちらのショートカットをよく使用します。
Mac
PNG複製: ⇧shift + ⌘command + C
Windows
PNG複製: ⇧shift + ctrl + C
3.Bring to front & Send to back
レイヤーを最前面と最背面へ移動するショートカット。
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
レイヤーの上下関係を一枚ずつ変更するショートカット。細かなレイヤーを整理するときにはこちらを使用します。
Mac
Bring forward（レイヤー順上へ）: ⌘command + ]
Send backward（レイヤー順下へ）: ⌘command + [
Windows
Bring forward（レイヤー順上へ）: ctrl + ]
Send backward（レイヤー順下へ）: ctrl + [
おわりに
毎日FigmaでUI制作の作業をするのですが、以上4つのショートカットを覚えておくだけで作業効率がぐんとアップします。
まだ使ったことがない方は、ぜひ今回を期に使用してみてください！
コラム執筆
森 遥香（もり はるか）
2019年4月入社。EMCカンパニー第4ビジネスユニット アカウントサービス第8ユニットに所属するデザイナー。素敵なデザインをこよなく愛する。