見出し画像

Figma Config 2022 で新登場した機能のショートカット・テクニックまとめ

seya

Figma Config 2022 でも様々な機能が出ました。
Individual Stroke, Absolute positioning, Component Properties…

これに付随してチュートリアルを見ただけでは分からない隠れたショートカットなどもたくさんあります。
この記事ではそんなテクニックたちをガッと紹介していきます。

パディングを昔ながらの一つの入力欄で操作する方法

Padding は今回の Auto Layout の変更で Vertical と Horizontal で二つに分かれてしまったのですが、⌘を押しながらクリックすることで一つになります。


Absolute を使うときはちゃんと Constraints を指定しよう

CSSの値に反映されるのもそうですが、Auto Layout な Frame のサイズが変わった時にちゃんと意図通りの位置になるように指定した方が良いです。

キャンバスから Padding の値を操作

Opt を押すと水平 or 垂直方向のものがまとめていじれます。

更に Opt + Shift で4サイド一気にいじれます。

Spacing の値に a と入力すると space-between になる

Hug Contents や Fill Container の切り替え

  • Auto Layout のフレームの縁をダブルクリック → Hug Contents に

  • 中身のはみ出てるものの縁を opt + double click → fill container に

Arrow に丸がこっそり追加されてる

こういう図を作る時に役立つみたいです。

Variants の中の似ているレイヤーをまとめて選択

やったね

ただ Variants の中のみみたいなので、それ以外の用途には Similayer というプラグインを使いましょう。

Component Properties で Slot Component が扱いやすく

確かに便利だけど、入れる側をコンポーネントにしなきゃいけないのがあともう一歩感。

以上です！使いこなしていきましょう💪

いいなと思ったら応援しよう！