Figmaで使っている色やフォントなどを一括変更する「Batch Styler」

テンプレートを使ってデザインを作成するときや、1度作成したデザインを修正するときに、登録済みのスタイルを名称を変更できると便利です。
デフォルトだとスタイルは1つ1つ変更していく必要がありますが、今回紹介する「Batch Styler」を使うと解決します。
ちなみに、以前「Styler」というプラグインも紹介しましたが、こちらは新規登録時に便利です。
今回紹介する「Batch Styler」は、変更に向いています。
Batch Styler

Batch Stylerはデザインデータ上のスタイルを選択して、あとから簡単に修正できるプラグインです。
プラグインをインストールするとメニューバーに[Plugins]→[Batch Styler]が追加されます。
基本的な使い方
Figmaメニューバーの[Plugins]→[Batch Styler]を選択して、パネルを表示します。

[Text]と[Color]それぞれのタブがあり、タブごとにデザインデータ存在するスタイルが表示されています。
スタイルを選択すると、選択したスタイルの情報が下に表示されるので修正後、「Update styles」で反映できます。
ちなみに、スタイル選択時にshiftやcommandを押しながら選択すると複数選択できるので、複数選択して一気に修正もできます。
その場合、「,(カンマ)」で情報が区切って表示されます。



Sketchの画像周りの基本操作|画像の追加方法や色補正、切り抜き方法まで
Sketchの整列をショートカットキーを使ってすばやく行えるようにする方法
Sketchのレイヤー周りの基本操作|グループ化やマスク、オブジェクトのロックや表示切り替えなどのレイヤーでできること
Illustratorの選択系のツールを徹底的にまとめる
Figmaのレイヤー周りの基本操作|グループ化やマスク、オブジェクトのロックや表示切り替えなどのレイヤーでできること
Figmaでモックアップをすばやく作成する「Mockuuups Studio」
Figma × Keyboard Maestroでどこまで効率化できる?
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
iTerm2でキーボードを使った操作を設定できる環境設定の「Keys」タブ
Nuxt.jsでのページ遷移設定方法(Vue Routerやnuxt-link)|Nuxt.jsの基本
Figmaのレイヤー名を一括変更するプラグイン「Rename It」
iStat Menusの「ディスク」アイコン表示と設定
あしたラボUNIVERSITY主催の学生限定ハッカソンに行ってきました
AlfredのTerminal機能を使って、すばやくターミナルコマンドを実行する
刷新されたAlfred 4のテーマエディタでエディタのカスタマイズと、公開テーマのインポート方法
Path Finderのデスクトップ表示をすれば、デスクトップだけ不可視ファイルを非表示にできる!
Drive File StreamでGoogle Driveをローカル容量を圧迫せずにファイルを閲覧する
Google Chromeの別アカウントとのブックマークを同期する「TeamSync Bookmarks」