よく使う Figma プラグインとそのショートカットたち
自己紹介
こんにちは
マンガやアニメが大好きな torish14 です。
読み方は "トリッシュ" で、これは本名のアナグラムであることと同時に、ジョジョ(中でも第 5 部)が好きだからというのが由来になっています。
仕事は、主に業務委託で UX/UI デザイナーとして働いています。
NOT DESIGN SCHOOL では UI デザインコースの開発に関わらせていただくことになりました。
僕は教育やゲーミフィケーションに関心があるのでとても楽しみです👾
この記事の概要
この記事は、Figma を触り始めたけどもっと効率的に作業したいと思っているような方に向けた記事になります。
具体的には、ほとんどの方が Figma でデザインする上でよく使うであろうプラグインとそのプラグインに割り当てているショートカットをいくつか抜粋してご紹介します。
ほかの Figma 効率化についてはまた別の機会にご紹介させてください🙏
前提
この記事は Mac をお使いの方を対象としています。
Mac では Figma デスクトップアプリにキーボードショートカットを割り当てることができます。
この機能を使って、よく使っている Figma プラグインにショートカットを割り当てましょう。
詳しくはこちらの記事をご参考ください。
「やり方がよくわからないよ〜」って方は X に DM していただけたらと思います。
また、大変恐縮なのですが、Windows 等の PC をお使いの方はそれぞれの環境で Figma プラグインにショートカットを割り当てる方法を検索されてください。
お待たせいたしました、お待たせし過ぎたかもしれません。
次からキーボードショートカットを割り当てているプラグインの一部ご紹介になります。
割り当てているショートカットはあくまで一例ですので、ご自身の使いやすいようにカスタマイズしてくださいね。
ではさっそく行きましょう🚀
自動化系
Figma Autoname
Figma Autoname はその名のとおり、AI がレイヤーを自動でいいかんじに命名してくれるプラグインです。
AI なので的確な命名をしてくれるときもあるし、そうじゃないときもあります。
これからどんどん精度が上がっていくとは思いますが、あくまでたたき台として使うのをオススメします。
使い方は簡単で、命名したいレイヤーを選択してプラグインを起動し、あとは "Name" ボタンを押すだけです。
ショートカットは Ctrl + Shift + G を割り当てています。
Spaciiing
複数の要素間に 8 の倍数の余白を一瞬で設定してくれるプラグインです。
使い方は簡単で、余白の数値を調整したい要素を複数選択してプラグインを起動、設定したい余白の数値等を選び、最後に "Apply" ボタンを押すだけです。
ショートカットは Ctrl + Shift + X を割り当てています。
Swap
2 つの要素の位置を入れ替えてくれるプラグインです。
シンプルですが、とても強力で重宝しています。
使い方は簡単で、位置を入れ替えたい 2 つの要素を選択してプラグインを起動するだけです。
ショートカットは Ctrl + Shift + S を割り当てています。
コンポーネント系
Go to main component
インスタンスからメインコンポーネントを検索・フォーカスしてくれる Figma のデフォルト機能になります。
プラグインではないですが、かなり高頻度で使用すると思ったので書きました。
使い方は簡単で、インスタンスを選択して "Go to main component" を実行するだけです。
ショートカットは Ctrl + Shift + O（オー） を割り当てています。
Instance Finder
メインコンポーネントからインスタンスを検索・フォーカスしてくれるプラグインです。
使い方は簡単で、コンポーネントを選択してプラグインを実行するだけです。
ショートカットは Ctrl + Shift + D を割り当てています。
Master
あとからコンポーネントをまとめて作成してくれるプラグインです。
有料なのですが、費用対効果を考えれば間違いなく買いだなと思います。
買い切りなのもうれしいですね。
詳しい使い方は以下の Figma ファイルをご確認ください。
ショートカットは Ctrl + Shift + M を割り当てています。
さいごに
いかがだったでしょうか？
上記で挙げた Figma プラグインやショートカット割り当ての記事はすでに note などで公開されているので、どこかで見かけたこともあったかも知れません。
ですが、これらの情報は欲している方すべての目に行き届いているとは限らないし、この手の記事は多いに越したことはないと思い、今回この記事を書くことにしました。
また、Zenn で執筆した理由は、デザインにちょっとでも興味のあるエンジニアやすでに Figma を触っているエンジニアの方にもこの記事が届いたらいいなと思ったからです。
「私は Figma でこんな効率化をしてます！」
などあればぜひ気軽にコメントで教えてください。
Discussion