Advertisement

to-path

 

Figmaは、現在人気となっているプロトタイプツールのひとつです。

 

SketchAdobe XDと比較すると、「リアルタイムで他の人とコラボレーションできる」点が優れています。つまり、ネット環境さえあれば、ブラウザ上でいつでもプロジェクトを起動できます。

 

しかし、Figmaには大きな欠点とし、SketchやAdobe XDユーザーが使っているツールが見つからないことも。そんなときは、Figmaをカスタマイズ、拡張できるプラグインを利用してみましょう。

 

この記事では、Figmaのデザイン制作が捗る便利プラグイン52個をまとめてご紹介します。

 

ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。


コンテンツ目次

 

Figmaのデザイン制作が捗る便利プラグインまとめ

 

デザインコレクション

Autoflow

このプラグインを起動し、2つのシェイプを選択するだけで、自動で美しいフローチャートが作成されるスゴ技。

autoflow

 

 

 

Arrow Auto

UIコンポーネント同士をシンプルな矢印付きフローでつなぐプラグイン。ボタンひとつの自動トラッキング機能つき。

arrow-auto

 

 

 

LilGrid

プロトタイプやワイヤーフレームを作成するとき、ボタンやグリッドなどをボタンひとつで整列させることができます。

lilgrid

 

 

 

Super Tidy

カンバスの位置に応じてフレームを整列したり、名前の変更を自動で行ってくれるプラグイン。ぐちゃぐちゃになったフレームの片付けにどうぞ。

super-tidy

 

 

 

Rename It

複雑になりすぎたファイルやフレーム名をまとめて変更、整理するプラグイン。複数のレイヤーを同時に変更でき、連続シークエンスに対応。

rename-it

 

 

 

Split Shape

ひとつの図形シェイプを複数の列カラムや行に分割する、ありそうでなかったプラグイン。マージン幅とガター溝の調整も同時に。

split-shape

 

 

 

Table Paste

ExcelスプレッドシートのデータをそのままFigmaに移行できる便利プラグイン。行と列数を選択したら、あとはデータをインポートするだけ。

table-paste

 

 

 

Google Sheets Sync

Google SheetsスプレッドシートのデータをFigmaファイルと同期させるプラグイン。

google-sheeets-sync

 

 

 

Dot Grid

カラフルなドットをつかってグリッドをお好みで作成できるプラグイン。サイズや幅、高さ、グリッドの間隔、カラーなどを調整できます。

dot-grid

 

 

 

Figmotion

Figmaアニメーション専門プラグイン。After Effectsなど他のツールへの切り替えが不要で、Web向けアニメーションを手軽に導入できます。

figmotion

 

 

 

アニメーション向けツール

GiffyCanvas

別アプリやサービスなどを使わず、Figma内でGIFアニメーションを作成できるプラグイン。再生時間やサイズを決め、プレビュー確認したら、そのままファイルをダウンロード。

giffy-canvas

 

 

 

LottieFiles

Figmaで多彩なアニメーションを利用できるプラグイン。LottieアニメーションをGIFファイルまたはSVGファイルのアニメーションフレームとして変換してくれます。

lottie-for-figma

 

 

 

デザイン、クリエイティブ系

Unsplash

超老舗フリー写真ストックサイトUnsplashの作品を、Figma内で直接利用できます。商用利用にも対応したライセンスも◎。

unsplash

 

 

 

Movie Posters

映画やテレビ番組に関連するアプリやウェブサイトを作成するときにとても便利なプラグイン。

movie-posters

 

 

 

BeatFlyer Lite

Figmaで作成したデザインに数クリックで素敵なアニメーションを追加できるプラグイン。

beatflyer-beta

 

 

 

Remove BG

Photoshop版オンライン版も話題となったサービスがそのままFigmaでも利用可能に。ボタンひとつで背景を切り抜いてくれます。アカウント登録が必要。

remove-bg

 

 

 

Artboard Studio Mockups

高品質なモックアップ素材をFigma上でそのまま作成、利用できるプラグイン。デモ動画が公開中。

artboard-studio-mockup

 

 

 

Vectary 3D

立体感たっぷりな3DモックアップをFigmaに追加するプラグイン。追加するだけでなく、モックアップの角度なども変更できるます。

vectary-3d

 

 

 

SkewDat

シェイプの角度をリアルタイムで変更、調整できるだけでなく、元ファイルに触らない非破壊編集ができます。

skew-dat

 

 

 

Isometric

このプラグインを使えば、平面イラストやシェイプが立体的なアイソメトリック(英: Isometric )スタイルに自動変換できます。

isometric

 

 

 

Arc for Figma

文字テキストを円サークルやパスに沿って表示、適用できるプラグイン。

arc-for-figma

 

 

 

Get Waves

波ウェーブやジグザグなどユニークなSVG「波」ファイルをランダムで自動生成できるツール。

get-waves

 

 

 

Blobs

人間らしいナチュラルでランダムなBlobシェイプを自動生成するプラグイン。生成するたびに全く異なるシェイプが。

blobs

 

 

 

Humaaans for Figma

トレンドの手描きイラストを作成、利用できるプラグイン。Figmaの中でデザインプロセスを完了できるツールが増えています。

humaaans-for-figma

 

 

 

To Path

描いたパスに沿って、オブジェクトやグループ、文字テキストなどを並べることができるプラグイン。

to-path

 

 

 

Image Tracer

Figmaにビットマップ画像をアップロードすると、自動トレースしベクターレイヤーに変換してくれるプラグイン。

image-tracer

 

 

 

TinyImage Compressor

画像をエクスポートするときに、通常に比べて最大90%ファイルサイズを圧縮してくれるプラグイン。PNGとJPGファイルに対応で、圧縮された画像は、ZIPファイルで自動エクスポートされます。

tinyinmage-compressor

 

 

 

配色、カラーパレット

Webgradients

およそ180種類の美しいグラデーションカラーを揃えたライブラリ的プラグイン。お気に入り追加しておけば、グラデーションを時短で作成できます。

webgradients

 

 

 

Material Palette

マテリアルデザイン好きにおすすめしたい配色カラーパレット集。そろそろ配色のアップデートが行われるかも。

material-palette

 

 

 

Color Palettes

美しい配色カラーパレットを揃えた検索ライブラリツール。検索した色のカラーコード、パレット番号でFigmaに自動で適用します。

color-palettes

 

 

 

Color Search

入力したキーワードに合わせて、5色の美しいカラーパレットを自動生成してくれるプラグイン。お気に入りを見つけてローカルスタイルに数秒で追加できます。

color-search

 

 

 

Palette

人工知能AIを利用して、完璧な配色カラーパレットを見つけるお手伝いをしてくれるプラグイン。

palette

 

 

 

Image Palette

画像をアップロードすると使われている配色カラー5色を抽出してくれます。

image-palette

 

 

 

Color Kit

選択した配色の彩度を自動生成してくれるツールで、グラデーションカラーを決めるときに便利。

color-kit

 

 

 

地図、チャート図

Mapsicle

Figma内で地図を自由に作成できるプラグイン。国や地名を入力し、正確な場所を決めたら、地図の表示サイズ、スタイル、カメラアングルを選択したら完成。

mapsicle

 

 

 

Vector Maps

世界地図から特定の国や都市のベクターマップをダウンロード、利用できるプラグイン。

vector-maps

 

 

 

Charts

Figmaドキュメント内でグラフ、チャート図の作成、編集を行うことができるプラグイン。直線グラフやパイグラフ、ドーナツ型などスタイルも豊富。

charrts

 

 

 

ワイヤーフレーム、プロトタイプ作成

Content Reel

作成したレイアウトに必要なコンテンツ(文字テキストやアバター、アイコンなど)をデザインに追加してくれるプラグイン。アイデア出しの段階で特に便利。

content-reel

 

 

 

Coda for Figma

Figmaドキュメント作成ツールで、Spotify、Wikipedia、Dropbox、Gmail、Googleカレンダー、Jira、Shopify、Githubなどのサービスからのデータをレイアウトに直接入力することができます。

coda-for-figma

 

 

 

Wireframe

プロトタイプや基本的な構造の作成に便利なツールで、ウェブとモバイルようにあらかじめデザインされたワイヤーフレーム(テンプレート)リストが、カテゴリ別に分けられているので、あとはボタンひとつでフレームに追加しましょう。

wireframe-350

 

 

 

HTML to Figma

実際に公開されているウェブサイトのページを、Figmaレイヤーに変換、追加できるプラグイン。インポートしたいURLを入力するだけのお手軽さもポイント。

html-to-figma

 

 

 

Marka Email Generator

Figmaのフレーム状に作成したコンテンツを自動でHTMLテンプレートファイルに変換してくれるプラグイン。文字テキストや画像、ボタン、長方形、フレームに対応。

email-generator

 

 

 

アイコン素材

Figmoji

絵文字をFigmaでも自由に利用できるプラグイン。メモなどでも使えるので共同作業でも便利。

figmoji

 

 

 

Feather Icons

シンプルで使い勝手の良い、オープンソースのフリーアイコンを検索、利用できるプラグイン。

feather-icon

 

 

 

Icons8 for Figma

12万以上のアイコン素材を無料で検索、利用できるプラグイン。32の細かいカテゴリに分け。無料版はPNGファイル(クレジット表記付き)、プロ版はSVGファイルでダウンロード可能。

icons8-for-figma

 

 

 

UIデザイン関連ツール

Better Font Picker

Figmaのデフォルトでは分かりにくいフォント選びをラクにするツール。フォントスタイルを見ながら選択できオススメ。

better-font-picker

 

 

 

Wire Box

完成したウェブデザインをシンプルな図形のプロトタイプに変換し、サイト全体の使いやすさ、UXデザインにフォーカスしやすくしてくれるユニークなプラグイン。

wire-box

 

 

 

A11y – Color Contrast Checker

使用している文字テキストがきちんと読みやすいか、WCAG(Web Content Accessibility Guidelines)ガイドライン基準で判断してくれます。

a11y-color-contrast-checker

 

 

 

Design System Organizer

デザインシステムで利用しているボタンなどのUIコンポーネントを、グループ分けしたり、移動、名前の変更、複製などをボタンで設定できます。

design-system-organizer

 

 

 

Design Lint

完成したデザインをデベロッパーに引き渡すとき、分かりやすく整理、統一されているかチェックしてくれるオープンソースのプラグイン。配色やフォント、エフェクト、塗、ストロークなどに統一性があるか、自動で検証、修正します。

design-lint

 

 

 

Viewport

あらゆるデバイス端末にデザインが対応しているか確認するツール。ビューポートサイズをお好みで変更できます。

viewport

 

 

 

Sympli Handoff

デザイナーとデベロッパー間のデザインの引き渡し、共同コラボ用プラグイン。Sympliプロジェクトにアートボードをアップロードすれば、デベロッパーは画像やスタイル、サイズ、色などの使用を確認できます。

sympli-handoff

 

 

 

ショートカットキーを覚えてより快適な作業を目指そう!

 

どんなツールもショートカットを覚えることで、制作時間の短縮、効率化を図ることができます。以下の記事では、「もっと早く知っておけばよかった!」と思ってしまう便利なショートカットを厳選しています。

 

best-of-figma-shortcut-1
どんなツールもショートカットを覚えることで、制作時間の短縮、効率化を図ることができます。しかし、膨大にあるショートカットキーをすべて覚えるのはなかなか大変な作業。こ

 

参照元リンク : Best Figma plugins for 2020 which deserve your attention – Medium

参照元リンク : Figma Community Plugins – Figma