デザイナーのavocadonekoです🥑🐈‍⬛
Figmaには意外と使われていない機能が多いので、あまり知られていないものを10こ厳選して紹介してみます！

1️⃣ 選択したオブジェクトをPNGとしてクリップボードにコピー

知られてない度：★★★

Exportを開かなくても、2倍サイズのPNGとしてコピーしてくれる小ワザ。
部分的にデザインを見せたいときにも便利！

2️⃣ Frameに合わせて整列

知られてない度：★★★

Frameに合わせて複数オブジェクトをまとめて整列させたいとき、Frame内のオブジェクトをGroupにしてませんか？
この小ワザを使えば、Groupにしなくてもオブジェクトの位置を変えずにまとめて整列ができます。

3️⃣ 連続で複製

知られてない度：★★☆

Adobe Illustratorのように、command + Dで最初に複製したものと同じマージンを保って無限に複製することができます。

イラレみたいに回転させて複製もできたら完璧なのですが、その機能はありません。

4️⃣ Auto Layout Frame内でAuto Layoutを無視

知られてない度：★★★

Auto layout内のオブジェクトを選択しているとき、デザインパネル右上にCSSでもお馴染みのAbsolute Positionボタンが現れます。Auto layoutにしたけど、このオブジェクトだけは自由に配置したい！というときに使えます。

5️⃣ ドラッグ＆ドロップでimageを簡単差し替え

知られてない度：★★☆

XDのようにドラッグ&ドロップで画像差し替えができないと思われがちですが、Fillの[image]エリアに画像をもっていくと差し替えられます。

ファインダーの画像を[⌘C]コピー→オブジェクト選択して[⌘V]ペーストでも同じことができます。

6️⃣ スケールツールでテキストもFrame内オブジェクトの大きさも変更

知られてない度：★☆☆

意外と知らない人も多い、使用頻度の高い小ワザ。ドロップシャドウや角丸も自動でリサイズしてくれます。
これを知るまではFrame内のオブジェクト全てのConstraintsを[Scale]にしてし、大きさを変更していました…

7️⃣ 複数FrameまたはGroup内の任意の子オブジェクトを同時に選択

知られてない度：★★☆

command押しながら選択すると最下層の子オブジェクトの選択ができますが、shift押しながらだと1つずつ階層を下って選択ができます。地味だけどかなり便利。

8️⃣ command押しながらFrameサイズだけ変更

知られてない度：★☆☆

Frame内のオブジェクトは動かさずに、外側のFrameのみ大きさを変えられます。（option押しながらだと両端を同時に変更）
画像だと余白をつくれて、自動でcrop設定になります。

9️⃣ スペースキーでFrame無視してオブジェクト移動

知られてない度：★★☆

Frame外からFrame内にオブジェクトをドラッグさせると、自動でFrameの中に入ってしまいます。逆に内から外へ出す時も、自動でFrame外オブジェクトとして扱われてしまいます。
しかし、spaceキーを押しながらドラッグするとレイヤー構造は変えずに見た目だけ変更することができます！

🔟 line-hightに%指定

知られてない度：★☆☆

line-heightには、Autoやpx以外に%での指定もできます。
フォントサイズが変わってもline-heightは維持されるのでとても便利です。

【番外編】 データ3つの円グラフをつくる

知られてない度：★★★

2番目のデータ（緑の部分）のSweep値は100%のままで一番下に敷き、1番目と3番目のデータのSweep値にそれぞれ任意の%を入力すると3項目でも円グラフが作れます。（3番目のデータ（青の部分）は左右反転させる）

データが2つだけの円グラフはFigmaで作成されているのをよく見ますが、3つはなかなか無いので今回載せてみました。

おわりに

知らない小ワザは何個ありましたか？？
3つ以上知らないものがあったら、スキ❤️ お願いします💌