WebデザイナーにおすすめのFigmaプラグイン5選

こんにちは、デザイナーの中澤です。

日本語版や、さまざまなソフトとの互換性アップデートを日々しているデザインツール「Figma」。最近はますます使いやすく便利になりましたね。

Figmaを使ってUIデザインやワイヤーを効率的に作成する時に便利なものが「プラグイン」です。

今回は私がよく利用するプラグインを5つご紹介いたします！

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個のインポートができます（2023年11月現在）

Find and Replase：テキストの一括置換をおこなう

Find and Replaceはデザイン上の文字を検索して「テキスト」または「レイヤー名」での一括置換ができるプラグインです。

まず、テキストの検索条件を指定します。次に、置換後のテキストを指定します。そして、適用する対象を選択します。置換を行いたいフレームや要素を指定することができます。

複数の対象を選択することもできますので、一度に複数の置換を行うことも可能です。

また、Find and Replaceはリアルタイムにプレビューを表示する機能も備えています。これにより置換結果を確認しながら調整することができます。

検索条件や置換後のテキストを保存しておけるので、同じ置換作業を繰り返す際に便利です。

現在テキストの置換はFigmaに標準搭載されていますが、Find and Replaceは使い勝手がよく、レイヤー名の置換が出来る点も便利なので私はプラグインとして利用をし続けています！

※スタイル名の変更はできません（2023年11月現在）

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で便利なプラグインを5つ（＋番外編1つ）をご紹介いたしました。シンプルな操作ですぐに使えるものばかりなので是非試してみてください。

新しいプラグインもどんどん増えているので、情報を取り込みつつ自分に合ったものを利用するようにしていきたいですね。

FigmaのプラグインはFigmaコミュニティから検索することが出来ます！是非さまざまなプラグインを試してみてください。

では皆さん、よいFigmaライフを！