株式会社GlobeeでUIデザイナーをしている西田です。
今回は、2023年もっともつかったFigmaプラグインを紹介します。
Filter
選択した領域にふくまれるテキストやグループ、ベクターなど、種類別に選択可能にしてくれるプラグインです。
たとえばframeに含まれるテキストだけを選択して一気にフォントファミリーを変更したい、特定のフォントサイズのテキストだけ選択したいときによく使います。
これがないと一つ一つクリックして選択しないと行けないので非常に便利です。
Contrast
テキストと背景色のコントラスト比をサクッと確認できるプラグイン。
アプリやWebに限らず、一定のコントラスト比を保たないと、非常に読みづらい状況が発生しますが、このツールを使うことで最適なコントラスト比を設定するのに役立ちます。
アイコンやシェイプに使うには問題なくても、テキストに使うと見づらいとか、大きめのフォントサイズならOKだけど12px程度のサイズだと適さない、などが簡単にわかるのもいいですね。
また、WCAG 3.0にて検討が進められているテキストの視覚的コントラスト基準である「APCA」にもbetaながら対応しています。
DownSize
Figmaを長期間使っていると、いろんな画像をダミーとしてつかったりします。
それの積み重ねでメモリ使用量が大きくなり、Figmaが重くなって使用しづらい状況になります。
そんなとき、このプラグインを使うと表示しているページに含まれる画像を一気に軽量化してメモリ使用量を削減することができます。
毎日使うようなものではありませんが、存在を知っていると困ったときに非常に便利です。
Color Name
Figmaでカラースタイルを作成するとき、困るのがそのカラースタイルの名前です。
たとえば、UI的な役割を名称にいれて、例えばPrimary、Secondaryとかやってるとかなり管理がしづらくなります。
そこで、abceedの場合は色にUI的な意味合いは加えず、色の見た目を名称にセットしているのですが、それで困るのが名前の付け方です。名前を考えるのに時間をかけることはしたくないなあ、、、と思っていたら見つけたのがこのプラグイン。
色設定したシェイプをを選択したあとこのプラグインを実行すると、その色に近い名称を提案してくれます。
Figma to STUDIO
先日、弊社でもSTUDIOを導入し、各種LPをSTUDIOに移行することにしました。そうすることで、デザイナーとマーケ担当者などの間でデザイン/実装/リリースが完結するのでエンジニアのリソース逼迫を避けることができます。
通常、Figmaでデザインを作ったら、そこから必要な素材を書き出して、STUDIOにアップして、デザインをみながらSTUDIOでデザインを地道に反映していきますが、このプラグインにより、「Figmaでデザインをコピーして、STUDIOでペーストするだけ」という夢のようなフローが実現します。
もちろん、Figma側のデザインが複雑だとそもそもコピーに時間がかかるとか、STUDIO側でペーストしたときにデザインが崩れることがありますが、そこはデザインの作り方をできる限りシンプルにすることで対応できます。また、STUDIO側で調整がもちろん可能なので特に問題はありませんでした。
通常なら2〜3日かかっていた作業が、数十分から数時間で完了する素晴らしいプラグインです。
2024年もFigmaプラグインで生産性アップ！
先日Adobeが買収を諦めたFigmaですが、今なおたくさんのプラグインが開発されています。
2024年もプラグインを使いまくってよりよいデザインをつくっていきましょー