実はFigma標準機能！こんなこともできたのか…
ドキュメントや資料作成、コーディング時にもFigmaを活用していますが、使い始めの頃は便利なプラグインや入れるべきプラグインの記事を読みあさっていました。
当初、XDからFigmaに移行したこともあり、レイヤー名の一括変更はRename Itなどプラグインがないとできないと思い込んでいましたが、実はFigmaの標準機能でレイヤー名を一括リネームできると最近知りました。
このように「プラグインを使わなくても実はできる機能」がたくさんあるのでは？と思い、Figmaの公式ヘルプを確認しました。
ヘルプページで「shortcut」というキーワード＋Figma Designカテゴリで検索し、2025年2月20日時点で65件の該当記事をチェック。その中から「こんな機能あったの？」「デフォルトであったんだ」と知らなかった機能をいくつかピックアップしてまとめてみました。
レイヤー名の一括変更
レイヤー名を一括でリネームするには、Ctrl + R（Macの場合は Cmd + R）を押すだけ。さらに、
$n：昇順で連番を振る（1, 2, 3...）$N：降順で連番を振る（10, 9, 8...）
というように、パターンを使い分けられる。
☺️レイヤーをコピペすると上にレイヤーが積みあがっていくので、降順で一括リネームできるのがうれしい。
<ショートカットキー>
Mac: Command ⌘ - R
Windows: Ctrl + R
オートレイアウトのパディング一括設定
オートレイアウトの「パディング」や「間隔」を個別に設定する場合は、「パディング（個別）」ボタンをクリックしてから設定をしていました。
実は、カンマ区切りで一括入力できるそうです！
例えば 10, 20, 10, 20 と入力すると、
- 上下のパディングが10px
- 左右のパディングが20px
のように適用されます。
🤔いくらカンマで区切っても、個別にならない...。
１アクション必要だったようです。レイヤーを選択した状態でCtrlキーを押しながら、パディング入力欄をクリックすると水平パディング／垂直パディングの入力欄が１つになりました。
アウトラインモード
よく使うか？というとほぼ使わない。
けど、イラレじゃないとできないと思っていたので、できるんだという驚きはありました。
<ショートカットキー>
Mac: ⌘ Command ⇧ Shift O
Windows: Control ⇧ Shift O
😂パスの単純化や不要なパスの削除ができるようになってくれるとうれしいな・・（調べたけどわからなかった）
オートレイアウトの提案機能
本当にこれは驚いた・・
オートレイアウトの設定って、地味に面倒だったりします。実は、Figmaは最適なオートレイアウトを提案してくれる機能を持っています。
試した手順
- 適当に矩形とテキストレイヤーを並べる（今回は、すべてレイヤーが同列の状態です）
- レイヤーを選択
- ショートカットまたは右クリック > その他のレイアウトオプション > オートレイアウトを提案
- 自動でオートレイアウト！
<ショートカットキー>
Mac: ⌃ Control ⇧ Shift A
Windows ⌃ Control Alt ⇧ Shift A
🙄本当に驚きました。なんて便利な・・
タッチキーボードで簡単に絵文字を入力
Windowsの場合は、タッチ キーボードを有効にする必要があります。（そもそもPCでタッチキーボードを使ったことがありませんでした）
テキストレイヤーで、:から入力開始し単語を入力すると該当するApple 絵文字の候補が表示されます。
寸法を自動計算
今の幅を「半分にしたい」「〇分割にしたい」というとき、数が多くなればなるほど電卓を使いがち。
Figmaなら、「サイズのWに/2」と入力するだけで自動計算してくれます。
加算 +、減算 -、乗算 *、括弧などの使用も可能です！
公式のヘルプでは(𝑥/2)+6やMixed+100といった式も紹介されています。
レイヤーに一括配置できるマルチペースト
ヘッダーやフッター、資料であればページ番号など同じ要素を貼り付けるとき、フレームを選択→貼り付けを繰り返していました。
レイヤーを複数選択（ドラッグでまとめて選択）した状態から、貼り付けるだけ。
バリアントの結合
Figmaを使い始めた頃、バリアントの存在にものすごく衝撃を受けた記憶があります。パネルにトグルスイッチが出たときには感動しました✨
しかし、そこから止まってました・・
名前を揃えるだけで簡単にバリアントをグループ化できるのです。
試した手順
- ボタンを作成
- 色違い、大きいサイズ、アイコンありのパターンを作成
- レイヤー名を「コンポーネント名/色名/サイズ/アイコンの有無」でスラッシュ区切りでプロパティをセットする
- 各要素をコンポーネント化
- まとめて選択
- 右パネルの「バリアントの結合」をクリック
- 右パネルにコンポーネント名以降につけた「色名」「サイズ」「アイコンの有無」がプロパティ化されている
- プロパティ名を変更
- コンポーネントを配置すると、右パネルに設定したプロパティが選択肢として表示される
よく使う機能
- バリアブルのモード
- もっと使いこなしたい🔥
- 画像エクスポート サフィックス設定
- 矢印
- 資料を作るとき便利
- XDのときはプラグイン使っていた
- チャット機能
- その場にいるメンバーを見つけて話しかけたり、Figma上でチャットできるのでその場で済む会話ができるのが便利
- セクション
- グループ分けしてまとめて移動できるのが本当に助かる
- 選択範囲へのリンク
📒リリースノート
https://www.figma.com/ja-jp/release-notes/
RSSも配信されてます🎉
ショートカットのおさらい
機能 | Mac | Windows |
|---|---|---|
キーボードショートカット | Control + Shift + ? | Ctrl + Shift + ? |
テキストのアウトライン化 | Command + E | Ctrl + E |
線のアウトライン化 | Command + Option + O | Ctrl + Alt + O |
両サイドのパネル開閉 | Command + \ | Ctrl + \ |
左パネルのページ・アセット切替 | Option + 2 | Alt + 2 |
オートレイアウト | Shift + A | Shift + A |
開発モード切替 | Shift + D | Shift + D |
矢印ツール | Shift + L | Shift + L |
セクションツール | Shift + S | Shift + S |
レイヤー表示・非表示 | Command + Shift + H | Ctrl + Shift + H |
レイヤーロック・解除 | Command + Shift + L | Ctrl + Shift + L |
ネストオブジェクトの移動 | - 子を選択：Enter | 同左 |
レイヤー選択の解除 | Esc | Esc |
コンポーネントの切り離し | Option + Command + B | Ctrl + Alt + B |
プロパティコピー・貼り付け | - コピー：Option + Command + C | - コピー：Ctrl + Alt + C |
カーソルチャット | /（52文字の制限あり） | /（52文字の制限あり） |
番号付きリスト | 1.または1) のあとにスペース | 1.または1) のあとにスペース |
位置揃え | - 上：Alt + W | 同左 |
レイヤー反転 | - 垂直：Shift + V | 同左 |
マスク | Control + Command + M | Ctrl + Alt + M |
エクスポート | Shift + Command + E | Shift + Ctrl + E |
まとめ
Figmaには、プラグインを入れなくても活用できる隠れた便利機能がたくさんあることに驚きました。UIもどんどん進化し、新たな機能が増えていることに気付かないのはもったいない。キャッチアップの大切さを改めて感じました。