![見出し画像](https://assets.st-note.com/production/uploads/images/107687447/rectangle_large_type_2_064f66ec73aa11d49500cf98a84ce0ae.png?width=800)
意外と知らない?Figma小ワザ10選
デザイナーのavocadonekoです🥑🐈⬛
Figmaには意外と使われていない機能が多いので、あまり知られていないものを10こ厳選して紹介してみます!
1️⃣ 選択したオブジェクトをPNGとしてクリップボードにコピー
知られてない度:★★★
任意のオブジェクトを選択し、 shift + ⌘command + C
![](https://assets.st-note.com/production/uploads/images/107389631/picture_pc_75eed043ed44c32fb576694c4cd98711.gif)
Exportを開かなくても、2倍サイズのPNGとしてコピーしてくれる小ワザ。
部分的にデザインを見せたいときにも便利!
2️⃣ Frameに合わせて整列
知られてない度:★★★
shiftを押しながら整列ボタンクリック
![](https://assets.st-note.com/production/uploads/images/107389914/picture_pc_0e9f44eae94752970cda2d6cdcbe393d.gif)
Frameに合わせて複数オブジェクトをまとめて整列させたいとき、Frame内のオブジェクトをGroupにしてませんか?
この小ワザを使えば、Groupにしなくてもオブジェクトの位置を変えずにまとめて整列ができます。
![](https://assets.st-note.com/img/1685905571625-x9CpLrtdFp.png)
![](https://assets.st-note.com/img/1685905540629-5T84CsRFGv.png)
3️⃣ 連続で複製
知られてない度:★★☆
オブジェクトを複製後、command + D を連打
![](https://assets.st-note.com/production/uploads/images/107390015/picture_pc_da95181ef6184143cde796a6de0646fc.gif)
Adobe Illustratorのように、command + Dで最初に複製したものと同じマージンを保って無限に複製することができます。
イラレみたいに回転させて複製もできたら完璧なのですが、その機能はありません。
4️⃣ Auto Layout Frame内でAuto Layoutを無視
知られてない度:★★★
![](https://assets.st-note.com/production/uploads/images/107682387/picture_pc_79881631713fc8ff7960f03a2b55d7e4.gif)
Auto layout内のオブジェクトを選択しているとき、デザインパネル右上にCSSでもお馴染みのAbsolute Positionボタンが現れます。Auto layoutにしたけど、このオブジェクトだけは自由に配置したい!というときに使えます。
![](https://assets.st-note.com/img/1686202131691-nUQkHWHS2d.png?width=800)
5️⃣ ドラッグ&ドロップでimageを簡単差し替え
知られてない度:★★☆
![](https://assets.st-note.com/production/uploads/images/107391258/picture_pc_22d18afb2e60ff0959a917fbe3bc38be.gif)
XDのようにドラッグ&ドロップで画像差し替えができないと思われがちですが、Fillの[image]エリアに画像をもっていくと差し替えられます。
ファインダーの画像を[⌘C]コピー→オブジェクト選択して[⌘V]ペーストでも同じことができます。
6️⃣ スケールツールでテキストもFrame内オブジェクトの大きさも変更
知られてない度:★☆☆
K でスケールモードに切り替え(Vで戻る)
![](https://assets.st-note.com/production/uploads/images/107391633/picture_pc_9e657b49855579ed0ac5adc372948b0c.gif)
意外と知らない人も多い、使用頻度の高い小ワザ。ドロップシャドウや角丸も自動でリサイズしてくれます。
これを知るまではFrame内のオブジェクト全てのConstraintsを[Scale]にしてし、大きさを変更していました…
7️⃣ 複数FrameまたはGroup内の任意の子オブジェクトを同時に選択
知られてない度:★★☆
shift 押しながらオブジェクトを連打
![](https://assets.st-note.com/production/uploads/images/107391975/picture_pc_bb73c3095a57f0accf83b1514c94d330.gif)
command押しながら選択すると最下層の子オブジェクトの選択ができますが、shift押しながらだと1つずつ階層を下って選択ができます。地味だけどかなり便利。
8️⃣ command押しながらFrameサイズだけ変更
知られてない度:★☆☆
command 押しながらFrameのサイズ変更
![](https://assets.st-note.com/production/uploads/images/107392325/picture_pc_42bb90912b66ec6f36d206d12612bfd9.gif)
Frame内のオブジェクトは動かさずに、外側のFrameのみ大きさを変えられます。(option押しながらだと両端を同時に変更)
画像だと余白をつくれて、自動でcrop設定になります。
9️⃣ スペースキーでFrame無視してオブジェクト移動
知られてない度:★★☆
space 押しながらオブジェクトをFrameの内外へ移動
![](https://assets.st-note.com/production/uploads/images/107392601/picture_pc_3ca1555aa10e495d1d0e8a178433e3c0.gif)
Frame外からFrame内にオブジェクトをドラッグさせると、自動でFrameの中に入ってしまいます。逆に内から外へ出す時も、自動でFrame外オブジェクトとして扱われてしまいます。
しかし、spaceキーを押しながらドラッグするとレイヤー構造は変えずに見た目だけ変更することができます!
🔟 line-hightに%指定
知られてない度:★☆☆
例えばlight-height: 1.5;にしたいときは 150% と入力
![](https://assets.st-note.com/img/1685914088312-h2tgt63n22.png)
line-heightには、Autoやpx以外に%での指定もできます。
フォントサイズが変わってもline-heightは維持されるのでとても便利です。
【番外編】 データ3つの円グラフをつくる
知られてない度:★★★
![](https://assets.st-note.com/img/1685914359690-c88SmT3Tik.png)
2番目のデータ(緑の部分)のSweep値は100%のままで一番下に敷き、1番目と3番目のデータのSweep値にそれぞれ任意の%を入力すると3項目でも円グラフが作れます。(3番目のデータ(青の部分)は左右反転させる)
データが2つだけの円グラフはFigmaで作成されているのをよく見ますが、3つはなかなか無いので今回載せてみました。
おわりに
知らない小ワザは何個ありましたか??
3つ以上知らないものがあったら、スキ❤️ お願いします💌
この記事が気に入ったらサポートをしてみませんか?