どうも、まさとらん（@0310lan）です！
今回はブラウザ上でWebデザインやプロトタイプを作成できる「Figma」をパワーアップしてくれる、厳選された拡張機能をまとめてご紹介します。
デザインの構築を便利にしてくれるものから、Web開発の即戦力となるプラグインやツールの枠を超えたユーティリティを提供してくれるものまで、幅広くピックアップしていますのでぜひ参考にしてみてください！
■Figmaのデザインをコードに変換できるプラグイン
【 Figma to Code 】
Figmaで作成したWebデザインを、そのまま実際の開発に利用できるソースコードに変換してくれるプラグインが「Figma to Code」です。
2020年11月時点では、汎用性の高い「Tailwind CSS」を利用したHTMLへの書き出しに対応しており、他にもFlutterやSwiftUIのソースコードが出力可能です。
基本的な使い方も簡単で、コードに変換したいデザインを選択したあとにプラグインを起動するだけで自動的に変換されたコードが表示されます。
プラグインに表示されている「CodePen」のボタンをクリックしてソースコードをコピペすれば、Figmaのデザインが実際にコードで再現できているのが分かります。
作成したデザインが複雑なときや、利用している機能によってはうまく変換できていない場合もあります。ただし、ソースコードで書き出されているので、自分でコードを修正すれば細かい微調整もできます。
とにかく簡単なステップでソースコードに変換したい方には最適なプラグインと言えるでしょう。
＜参考リンク＞
■素早くワイヤフレームを作成できるプラグイン
【 Wireframe 】
PC・タブレット・スマホ向けのリッチなワイヤフレームを、豊富なカテゴリから選択するだけで素早く作成できるのが「Wireframe」です。
ログイン、メニュー、ヘッダー、フォーム、メンバー…など、さまざまなカテゴリに最適なワイヤフレームのテンプレートが搭載されており、好きなものを選択するだけですぐにFigmaで利用できるのが特徴です。
実際にプラグインを起動して好きなワイヤフレームを選択すると、以下のように画面へ追加されます。
提供されているワイヤフレームはすべてFigmaのコンポーネントで構成されているので、あとから自分で好きなようにカスタマイズも可能です。
つまり、デフォルトのワイヤーフレームをベースにして独自のワイヤーフレームを素早く作成できるのも特徴の1つなのです。カラーやシェイプ画像を変更するだけでも雰囲気が変化するのでイメージするWebサイトに合わせて調整してみましょう。
ちなみに、同じような操作方法でロゴを作成できるプラグインもあります。
【 Logo Creator 】
300以上のカテゴライズされたロゴが搭載されているので、イメージに合うロゴを選択するだけですぐに利用できます。もちろん、ベクターで作成されているので独自にカスタマイズして細かく編集も可能です。
＜参考リンク＞
■Figmaでプレゼン用のスライドを作成できるプラグイン
【 Show + Tell 】
1クリックで手軽にプレゼン用のスライドを自動生成してくれるプラグインが「Show + Tell」です。
使い方は簡単で、プラグインを起動したらプロジェクト名を入力して【Create】ボタンをクリックするだけです。
すると、カバータイトルやデザインを含めたスライドなどが自動的に生成されるのが分かります。
あとはプレビューモードで再生すれば、パワポのような全画面のスライド資料として利用できます。
テキストの編集はもちろんのこと、あとから追加でイメージを挿入するなどのカスタマイズもできるようになっています。
難しい操作は一切ないので、作成したWebデザインを手っ取り早くスライドに変換して誰かに説明するようなケースにも活用できるはずです。
＜参考リンク＞
■3Dモックアップを編集＆挿入できるプラグイン
【 Vectary 3D 】
PCやスマホだけでなくマグカップやTシャツなど、さまざまな3Dオブジェクトが搭載されたエディタを操作しながらFigmaのデザインへ挿入できるプラグインが「Vectary 3D」です。
基本的な使い方としては、まず最初にプラグインを起動して好きな3Dオブジェクトを選択します。
上図のようにプレビュー画面に表示されたオブジェクトは3D空間に配置されているので、マウス操作で360度グリグリと動かすことができます。拡大・縮小も可能なので、自分がデザインに挿入したい角度や位置を決めておきましょう。
さらに、任意の「①要素」を選択してから「②Use Frame」ボタンをクリックすると、3Dオブジェクトの表面に指定した要素が「③レンダリング」されて表示できるのです。
そして、画面下の「Save」ボタンをクリックすれば自動的にFigmaのデザインへ挿入されます。
ちなみに要素をレンダリングせずにデフォルトの状態でも挿入は可能です。
開発中のWebサービスやアプリのスクリーンショットなどをレンダリングしたり、会社のロゴなども利用したりするとおもしろいでしょう。
また、このプラグインを提供している「Vectary」のサービスで作成した3Dオブジェクトも読み込んで活用できます。「Vectary」がどんなサービスなのかについては、以下の記事で詳細を解説しているので参考にしてみてください！
＜参考リンク＞
■地図を手軽にデザインへ挿入できるプラグイン
【 Map Maker 】
「Googleマップ」や「Mapbox」の地図をカスタマイズして手軽にFigmaで利用できるようにしてくれるのが「Map Maker」です。
海外製のプラグインですが、日本語で所在地を入力できたり「スカイツリー」などのキーワードからその付近の場所を地図で表示できるようになっているので便利です。
使い方はプラグインを起動して地名などを入力するだけですぐに地図を表示できます。
オプションとしてズームレベルなどが設定できたり、カスタムスタイルの指定ができたりするので自分好みの地図に調整できるのも特徴です。
標準スタイルも変更できるようになっており、衛星画像やダークテーマなどさまざまなプリセットを選べるようになっています。
カスタマイズができたら最後にボタンをクリックすることで、Figmaのデザインに地図を挿入できます。
挿入後の地図は画像と同じように拡大・縮小などの調整もできます。
＜参考リンク＞
■デザインのスタイルガイドを自動生成できるプラグイン
【 Style Organizer 】
Figmaで作成したページ内のデザインを総合的に解析して、カラーやテキストなどのスタイルを分かりやすいレポートにまとめてくれるのが「Style Organizer」です。
使い方は非常に簡単で、プラグインを起動して表示されるボタンをクリックするだけで自動的に解析をしてくれます。
解析後の結果は「カラー」と「テキスト」に分けてまとめられます。
利用しているカラーの割合、使用状況、フォント、テキストスタイル、アクションの使用可否…など、細かいデータがキレイにまとめられているのが分かります。
またレポートに表示されている任意の要素をクリックすると、該当するFigmaの要素にフォーカスしてくれる機能もあります。レポートの結果からすぐに確認したいようなケースでは便利に活用できるはずです。
＜参考リンク＞
■Figmaを会議室にしてくれるプラグイン
【 Retro Super Storm 】
Figmaには複数人と同時編集できるコラボ機能があるのですが、これをうまく活用してエディタ内で簡単なミーティングやブレインストーミングなどをできるようにしてくれるのが「Retro Super Storm」です。
プラグインを起動すると、あらかじめ用意されているプリセットが表示されるので好きなものを選択します。
たとえば、ブレインストーミングのプリセットを選ぶと、以下のように大きなキャンバスが表示されます。
付箋紙に見立てたボックスがいくつか提供されており、これを活用して複数人でアイデアを出し合うようなことが可能になります。また、どのアイデアがよいのかを決めるのに利用できるドットシールのようなアイコンも用意されています。
ホスト側はタイマーを操作できるようになっており、時間を区切ってブレインストーミングができるように設計されているのも特徴でしょう。
＜参考リンク＞
■おまけ（プラグインのインストール・使い方）
最後にFigmaでプラグインを使う方法やインストールする手順について、簡単にまとめておきます。
プラグインに関してはFigmaの「Community」ページに統合されており、以下のリンクから閲覧・検索ができます。
【 Community - Figam 】
Figmaにログインしてから閲覧すればプラグインのインストールも可能になります。
インストールする場合は、それぞれのプラグイン詳細ページの上部にある「Install」ボタンをクリックするだけです。
実際に使うには、Figmaの編集画面上で右クリックして表示されるメニューの「Plugins」から実行できます。
もし不要になったプラグインがある場合は、自分のマイページから「Plugins」タブに切り替えるとインストール済みのリストが表示されます。
各プラグインの横にある「ー」アイコンをクリックすると削除できるようになっています。
このようにプラグインの導入から削除まで、とても簡単なステップで利用できるのでぜひみなさんもお気に入りのプラグインを探求してみてください！
■動画＆ゲームでプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください！
■まとめ
今回は、FigmaをパワーアップしてWebデザインや開発を便利にしてくれるプラグインを厳選してご紹介しました。
ご紹介したプラグインはすべて無料で利用可能であり、随時アップデートも実施されているので今後も便利な機能が追加されていくはずです。
これからWebデザインやプロトタイプを始めようと考えている人は、Figmaを試しながら今回ご紹介したようなプラグインをぜひ活用してみてください！
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
