Figmaのショートカット等覚書一覧

こんにちは。
きりんです。Webクリエイターとして活動しています。

新規案件を機に、Figmaを使って制作をしてみることにしました。
XDがFigmaを吸収して半年ほど経ったので、そろそろ慣れておきたい…。
XDもそもそも触ったことなかったんですけどね！
10年弱ぶりにWeb業界に戻ってきたらXDやFigmaやそんなことなってて追いつくのに必死です。

動作環境：mac M1 + デスクトップタイプFigmaアプリ

ショートカット覚書

ちょっと触るたびに、ああ、大好きなイラレと使い方が違う！ってところがたくさんあったので、覚書です。
また随時追加していきます。

レイヤーを選択する

command(⌘)を押しながら選択
そのままクリックしてもグループ選択をしてしまいます。

カーニング

option + >　または　option + <

行間調整

shift + option + ,　または　shift + option + .

marginの確認

対象の要素を選択したまま、marginを測りたい対象の要素にカーソルを置くだけで、marginが表示されました。すぎょい
微調整するときは、カーソルを置いたまま、キーボードの矢印でカチカチするだけでmarginを表示したまま移動できます。強いです。

グループ化している要素に対しては"option"を押したままカーソルを置くとmarginが表示されました。

ボックスでテキストの拡大縮小

そのまま拡大縮小をしても、テキストボックスの範囲が拡大縮小するだけで、フォントサイズの変動は有りません。

キーボード K　（拡大縮小）

左上のツールバーの、拡大縮小を使うことでフォントサイズの自動調整が行えるようになりました。

フレームだけ広げる

フレームの機能を使ってグループ化している場合、範囲を広げようとすると中のオブジェクトが縦長になってしまったり、と一緒に可変してしまいました。なんかないかなーと思って探していたら

⌘を押しながら可変する

ことで、単体を動かすことができました。よかった。

ショートカット以外のコト

インスペクトにCSSコードあるやん…

marginはまだ見かけてないので、どんなにボックスを置いてもpositionコードにはなってしまっていますが、これはすごい便利…

感想

XDを使ったとき、よくわからない感じだったんですが、一方でFigmaを触ってみると、直感的に使えるなと思いました。ショートカットがわからないAdobeってかんじ。
AdobeがFigmaを吸収したいとおもった気持ちがわかった気がします。
また随時、気づいたショートカットを追加更新していきます。