私がFigmaでとりあえず入れておきたいプラグイン5選

私がFigmaでとりあえず入れておきたいプラグイン5選

ツール
Pocket

最近は、Figmaを利用して画面遷移図等を作成しています。

私がFigmaでとりあえず入れておきたいプラグイン5選
Build better products as a team. Design, prototype, and gather feedback all in o…
www.figma.com

ほんと直感的に使え個人利用であれば無料なので使わない手はないです。

パターンの複製も簡単にできるので、想像力を働かせるにも持ってこいです。

基本機能だけで充分利用できるのですが、プラグインの仕組みがあるので機能拡張も簡単に行えます。

そんなプラグインで、私がよく利用しているプラグインを紹介したいと思います。

Find and Replace

Search for texts on your page and replace them just like a text editor. You can …
www.figma.com

テキストの検索、一括置換が簡単に行えるプラグインです。

↓の形で、指示をテキストで書いたりします。

このメモが基本機能では検索ができません。一括置換したい場合も不便です。

私がFigmaでとりあえず入れておきたいプラグイン5選

こちらのプラグインを入れると、メニューのプラグインから、Find and Replaceを起動し、検索したい文字列を入れると、色々なところにあるメモから文字列を検索してくれます。

以下は、disabledを検索している例です。2つ見つけてくれています。置換もReplace Allすれば一括置換できます。

私がFigmaでとりあえず入れておきたいプラグイン5選

テキストを使う人は入れておいて損はありません。

Autoflow

Autoflow makes it easy to draw flows. Simply select 2 objects and a line will be…
www.figma.com

こちらは、オブジェクトとオブジェクトを選択すると、接続線を簡単に引いてくれるプラグインです。

プラグインを起動して、2つのオブジェクトをshiftキー押しながら選択すると線を引いてくれます。

私がFigmaでとりあえず入れておきたいプラグイン5選

コネクタの形は、以下から変更可能です。

始点・終点の形や線の太さ等を変えることができます。

私がFigmaでとりあえず入れておきたいプラグイン5選

Autoflowなしではもう2つのオブジェクトのつなぎこみはできません。

Remove BG

Remove the background of images automatically with just a single click - using t…
www.figma.com

こちらは、簡単に画像の背景を取り除けるツールになります。

こちらのツールは、remove.bgのAPIを利用するため、remove.bgのアカウントを作成する必要があります。

左の画像を右の画像に簡単に変更することができます。

私がFigmaでとりあえず入れておきたいプラグイン5選

remove.bgで取得したAPI KeyをプラグインのSet API Keyのところにセットすれば利用できるようになります。

私がFigmaでとりあえず入れておきたいプラグイン5選

HTML to Figma

Convert Figma designs to high quality, responsive HTML, CSS, React, Vue, and mor…
www.figma.com

こちらの最強ツールだと思います。

今までは、実際のhtmlを表示してスクショして、加工を行っていましたが、このプラグインがあれば

URLを入れるだけで、デザインの取り込みを行ってくれます。

そして1つ1つの要素が変更することができます。

公開サイトのデザイン変更を考える場合は、このツール最強です。

取り込み時に、PC/タブレット/SPが選択できるので、切り替えてデザインを取り込むことができます。

もう感激します。

私がFigmaでとりあえず入れておきたいプラグイン5選

番外編

スクショとか画像とかをバンバン大きいサイズのままFigmaに投げ込んでいくと重くなります。

私は、基本、スクショや画像は、Squooshで圧縮してから貼り付けるようにしています。

私がFigmaでとりあえず入れておきたいプラグイン5選
Squoosh is the ultimate image optimizer that allows you to compress and compare …
squoosh.app

これは、WordPressでのメディアアップロード前にも利用しています。

こちらのツールで、画像自体の圧縮と画像のサイズ変更も行えます。

(5000pxとかのファイルってほんとWeb表示では不要)

使えるプラグインに遭遇したら随時更新していきたいと思います。

Figmaさん感謝感謝。

いつか、プラグインの作成にも挑戦したいと思います。