見出し画像

「Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選」の補足記事

えび🍤

先日、ICS MEDIAにて「Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選」という記事を公開しました。

この記事の中で紹介しきれなかったプラグインや、溢れてしまった情報を補足する為の記事です。是非、上記の記事を読んでから読み進めてみてください。

Figmaプラグインのインストールについて

Figmaプラグインはインストールが不要で、ツールメニュー内のリソースパネルから検索して使う方式になっています。
このリソースパネルは2022年6月に実装された比較的新しい機能です。

Figmaプラグイン紹介記事を検索すると、リソースパネルが実装される以前に書かれた記事が多く古いUIで紹介されている記事が多くみられます。
ICS MEDIA記事内でも紹介しましたが、大事なことなのでこちらにも書いておきます。大事なことは2回言うと良いとされているので。

今後もプラグインの利用方式の変更は起こり得るので、もしリソースパネルの廃止などがあれば記事のメンテナンスを行なっていこうと思います。

Figma日本語対応の副作用

Figmaは日本語対応を行い、基本的に全てのUIを日本語で操作できるようになりました。

その副作用として、クイック操作でプラグインを実行する際にプラグインが日本語名でも問題なく実行できるようになりました。

例えば、ICSで作成した「テキスト校正くん」はプラグイン名が日本語のためクイック操作で「テキスト校正くん」と入力しても、候補に出てきませんでした。言語設定が日本語の場合、問題なく候補に出てきてくれます。

（言語設定 日本語）クイック操作で「テキスト校正くん」と入力した例

しかし、言語設定が英語の場合、プラグインが日本語名だとクイック操作でプラグインの実行ができないという問題は残っています。

（言語設定 英語）クイック操作で「テキスト校正くん」と入力した例

プラグイン名が日本語で公開できる以上、言語設定がなんであれクイック操作から実行できるようになってくれると嬉しいのですが……

プラグインの追加紹介

ここからは、記事が長くなりすぎてしまうなどの理由から紹介できなかったプラグインを少しだけ紹介します。

Propstar

Propstarは選択したコンポーネントが持つ、バリアントとコンポーネント プロパティを一覧表示するテーブルを作成してくれるプラグインです。

例えば、このボタンは3つのバリアントを持っています。


3つのバリアントを持つボタン

それに加えて、スターアイコンの有無を操作できるコンポーネント プロパティも持っているため、3つの状態×2つのプロパティ変化で合計6種類の見た目を持つボタンとなります。ただ、この状態では6種類の見た目があることが分かりませんよね？

Propstarを使うことで、コンポーネントが想定し得る見た目をテーブルにまとめてくれます。

コンポーネント プロパティは便利な機能ですがその反面、バリアントに比べコンポーネントの一覧性が落ちてしまう問題がありました。この問題を解決してくれる便利なプラグインです。

Magician

MagicianはAIによるアイコンの生成。

AIによる文章の生成。

AIによる画像の生成が行えるプラグインです。

こちらのプラグインはオープンベータが始まったばかりのため、以下のサイトからアクセスキーをリクエストする必要があります。

そのため、実際の動作感などはまだ分からないのですが今後の展開が楽しみなプラグインです。（アクセスキーが貰えたら実際の動作のキャプチャを追加します）

AIによるテキストtoアイコンのため、既存のアイコンセットなどにはないアイコンを作ることが可能な点が他のプラグインには無い特徴です。
例えば「帽子を被ったスマホ」なども生成可能です。

Axe for Designers（FREE）

Axe for DesignersはAxeというアクセシビリティチェックツールをFigmaで扱えるようにしたプラグインです。

元記事でもアクセシビリティチェックツールとして「Stark」を紹介しましたが、無料で使えるものではこちらの方が優秀かもしれません。

テキストのコントラストチェックはもちろん、クリックできる要素が十分な大きさか、見出しが適切な構造に置かれているかなどを確認してくれます。

チェックしたいフレームを選択すると、問題のある箇所をリストアップしてくれます。「highlight」にチェックを入れると、問題のある箇所を選択状態にしながら問題点を教えてくれます。
コントラストに問題がある場合、色の提案もしてくれるので、クリックしコピーしたらすぐにテキストカラーや背景色を変更することもできます。

html.to.design

先ほどのプラグインのデモにICS MEDIAのデザインファイルが使われていましたが、実際のプロジェクトファイルを開いていた訳ではありません（そんなことをしたら会社に怒られてしまいます）
html.to.designというプラグインは、URLを元にデザインの生成が行えるプラグインです。

プラグイン起動後、赤枠の箇所にURLを入力するだけで、Figmaで扱える形に変換してくれます。

プラグインにURLを入力

タグなどを元にフレーム分けをしてくれるので、HTML側が綺麗であればデザインファイルもある程度綺麗なものが生成されます

実際のサイトがデザインファイルに変換される

URLで生成すると、基本的にはライトモードで出力されますが、詳細設定からダークモードや横幅の指定が可能となっています。

詳細設定からダークモードや横幅の指定が可能
詳細設定でダークモードの生成も可能

このプラグインには、Chrome用の拡張機能が用意されており、この拡張機能でダウンロードできるファイルを元にデザインを生成することもできます。
例えば、初期アクセス時のデザインではなく、サイト上で操作を行なった後の変化した見た目が欲しい時などに役立ちます。（ログインが必要なサイトなど）

拡張機能を使うと、ローカルホストのデザインは出力できなかったので、対応しているのはあくまでも公開されているサイトのみのようです。
ローカルホストのデザイン出力も可能になり、公開されていないサイトも対応しているようです。（Twitterにて直接メッセージをいただきましたので、訂正しました）

まとめ

以上、「Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選」の補足記事でした。

プラグインは個人でも企業でも公開できるため、日々新しいものが登場しています。僕も知らないプラグインの方が多いので、こういう良いやつあるよ！とか教えて頂けるととても嬉しいです！（この記事か、元記事に追加しようと思います）

Figmaに関する情報を発信しています（目標週1回以上）ので、Twitterのフォローをぜひよろしくお願いします！

（なぜか、Figmaに関するツイートフォロワー増えないがちなので本当にお願いします！モチベーションにつながります！）

ここまで読んでいただきありがとうございました！ もし気に入っていただければ投げ銭よろしくお願いします🍤 投げ銭でエビフライを食べに行きます