こんにちは、デザイナーの中澤です。
日本語版や、さまざまなソフトとの互換性アップデートを日々しているデザインツール「Figma」。最近はますます使いやすく便利になりましたね。
Figmaを使ってUIデザインやワイヤーを効率的に作成する時に便利なものが「プラグイン」です。
今回は私がよく利用するプラグインを5つご紹介いたします！
Aspect Ratio：アスペクト比を保ちながら画像をリサイズできるプラグイン
画像のアスペクト比を崩さずにリサイズ調整する作業が簡単にできるプラグインです。
アスペクト比計算Webサービスを使って毎回画像の比率を確認するのって地味に手間のかかる作業ですよね。
このプラグインを使えば、たったワンクリックでアスペクト比を維持しながら画像をリサイズが出来るので、作業のスピードが格段に向上します！
Icons8：豊富なアイコン・イラスト・画像を自由に挿入
Figmaには、画像素材の検索・挿入に役立つプラグインがたくさんあります。
私がおすすめなのは、Icons8です。
Icons8をおすすめする理由は、１つのプラグインでアイコン・イラスト・写真がキーワード検索でFigma上に挿入できること、海外の高クオリティーなイメージが揃っていることがポイントです！
プロラインもありますが、無料版でも十分に多くの素材を利用することが出来ます。
3Dやアイソメトリックなイラストなど、流行を取り入れたデザインが多く揃っているのでたくさん使いたくなりますよ！
注意点としては、無料で利用する場合はリンクを設定する必要がありますので、クライアントワークなどで利用する場合は特にリンク設置箇所の準備などに気を付けましょう。
詳しくは公式サイトを確認してください。
Remove BG：ワンクリックで写真の背景を自動除去
人物や商品の写真を扱う場合、背景を切り抜く作業が必須です。
Photoshopで編集するのも手ですが、ライセンスが無い方などにはRemove BGがおすすめです！
このプラグインを使えば、AIが自動的に写真の背景を除去してくれます。
しかも、髪の毛など細かい部分もきれいに処理してくれるので、非常に高精度です。
25メガピクセル以内の画像であれば、ひと月で50回まで無料で利用できます。 それよりも大きい画像で利用したい場合は、有料のプレミアムプランへの登録が必要です。 Photoshopなどの編集ソフトとの使い分けも、ファイルサイズと回数制限で切り分けできそうですね。
なお、インストールする際、remove.bgの公式サイトでアカウントを作成し、remove.bgダッシュボードからAPI Keyを取得してFigmaプラグインにAPIをセットする必要があります。
参考リンク
Remove BG
Blob Generator：ユニークな流体シェイプを簡単に作成
昨今、Webデザインでは有機的な流体シェイプを取り入れることが流行しています。しかし、複雑な流体シェイプをイチから作成するのは、難易度が高いですよね。
Blob Generatorは、ランダムな流体シェイプを生成することができます。
Growth（大きさ）やEdges（輪郭の複雑さ）でシェイプを調整できます。
有機的な形の生成プラグインではBlobsも有名ですが、Blob Generatorは、調整スライドに数値の目盛りがあるのと、プリセットである程度の形状が用意されているので制作のスタートがしやすいのが特徴です。 どちらも使いやすいプラグインですので、お好みで選んでみてはいかがでしょうか！
参考リンク
Blob Generator
html.to.design：WebサイトをFigmaに取り込める
html.to.designは、WebサイトをFigmaに取り込むことができるプラグインです。
以下はhtml.to.designの主な機能です。
- プラグインを開き、WebサイトのURLを入力すると、Figma上にそのWebサイトの画像とテキストを取り込むことができます。
- 取り込んだWebサイトのレイアウトやデザインを編集することができます。
- サイズ（PC・スマートフォン）やライト・ダークモードのオプション設定ができます。
- Webサイトの画像やテキストをFigma内で再利用することができます。
html.to.designを使用することで、デザインデータがない場合でもスムーズにデザイン作業を開始することができます。
フォントの太さやシェイプの再現が一部不完全であったり、レイヤー構造がマークアップを踏襲しているため階層が深くなっていることが多く、デザインに効率的にグループ化しなおす必要がありますが、とても便利なプラグインです。
※無料版は、30日ごとに最大10個のインポートができます（2024年6月現在）
Find and Replase：テキストの一括置換をおこなう
Find and Replaceはデザイン上の文字を検索して「テキスト」または「レイヤー名」での一括置換ができるプラグインです。
まず、テキストの検索条件を指定します。次に、置換後のテキストを指定します。そして、適用する対象を選択します。置換を行いたいフレームや要素を指定することができます。
複数の対象を選択することもできますので、一度に複数の置換を行うことも可能です。
また、Find and Replaceはリアルタイムにプレビューを表示する機能も備えています。これにより置換結果を確認しながら調整することができます。
検索条件や置換後のテキストを保存しておけるので、同じ置換作業を繰り返す際に便利です。
現在テキストの置換はFigmaに標準搭載されていますが、Find and Replaceは使い勝手がよく、レイヤー名の置換が出来る点も便利なので私はプラグインとして利用をし続けています！
※スタイル名の変更はできません（2024年6月現在）
Nisa Text：複数行のテキストを分割したり、さまざまなテキスト編集をおこなう
ディレクターやクライアントからもらった原稿をデザインにペーストしたときに文章を1つ1つ分割して並べて整理して…この作業ってなかなか骨が折れますよね？
Nisa Textは、複数行のテキストを簡単に分割したり、さまざまなテキスト編集を行うことができる便利なプラグインです。
複数行のテキストを選択してNisa Text>Splitを実行すると、自動的に改行した所でテキストを分割してくれます。
Joinを実行すると、分割したテキストを再びくっつけることもできます。
あまり使う頻度はないかもしれないですが、Split wordという機能では1文字ずつ分割することも出来ます。これは文章というよりデザイン作業で文字を分ける必要があるときに使うかもしれないですね。
また、Nisa Textではテキストをカンマやピリオドなどの区切り文字で分割する機能も搭載しています。大量のテキストを短い行に分割して整理することができます（有料機能）
Font Fascia：利用しているfont-familyを一覧で表示
Font Fasciaは、デザイン上で利用しているフォントファミリー（フォントの種類）を一覧で表示することができます。
特定のフォントを再利用する場合や、意図しない指定が実はデザイン内に紛れ込んでいたりするので整理する際に利用します。
Font Fasciaを使用すると、Figmaのプラグインパネルで利用しているフォントを一覧で確認することができます。一覧には使用しているフォントファミリーの情報が含まれており、簡単に利用しているフォントを確認することができます。
Locofy：デザインをコードに出力する
Figmaで作ったデザインを実際にコードに変換する作業のことをFigma to Codeと言います。
Figma to Codeをするためのプラグインは様々ありますが、現在私はLocofy（無料かつHTML・CSS対応していたため採用）をやFigmaに標準搭載されているFigma to Codeを利用しています。
私自身、基本的にコーディングは行えるので、デザインが複雑になってしまった時に「あれ、ここの構造どうやってマークアップしようかな？」と思った場合にペアプログラミング相手のような役割をしてもらっています。
【番外編】Figma for VS Code
Figma for VS Codeは、Figmaのプラグインの1つです。VS Code内でFigmaのデザインファイルを表示したりCSSコードを取得することができ、デザインのプレビューを確認しながらコードを編集することができます。
以下はVSCode上でFigmaのデザインファイルを開いている様子です。
さらに、Figma for VS Codeではコンポーネントやスタイルの管理も行うことができます。
VS Code内でコンポーネントやスタイルのプロパティを編集すると、Figma上のデザインにも反映されます。これにより、デザインのコンポーネント化やスタイルの管理を行うことができます。
今まではFigmaとVSCodeを両方開いて各ウインドウを見つつ作業をするのが当たり前でしたが、1つのプログラム内でデザインを確認や、さらには調整までしながらコーディングが出来る画期的な状態に落ち着きました！
このコラボレーションで作業効率がかなり上がりました。
まとめ
今回はFigmaで便利なプラグインをご紹介いたしました。シンプルな操作ですぐに使えるものばかりなので是非試してみてください。
新しいプラグインもどんどん増えているので、情報を取り込みつつ自分に合ったものを利用するようにしていきたいですね。
FigmaのプラグインはFigmaコミュニティから検索することが出来ます！是非さまざまなプラグインを試してみてください。
では皆さん、よいFigmaライフを！
WEBデザイナー。2020年からは出版社のフロントエンジニア兼ディレクターとしてメディアの企画・運用改善に従事し事業成長に貢献。2023年に株式会社GLASS入社。
