見出し画像

【無料で超高機能！】画像やワイヤー作成に便利な「Figma」の魅力

柏木雄介（ゆっけ／pockke）

画像作成ツールといえば、Photoshopが有名ですが、そんなPhotoshopよりも動作サクサクで、さらに多機能で無料で使えるツールをご紹介します。

それが「Figma（フィグマ）」です。元々、ワイヤーの作成ツールとして使っていましたが、実はこれ、画像の作成にも便利！

また、最近のアップデートでは、「Miro」のようなホワイトボード機能も搭載され、チームで活用する際に利用できる幅も広がっています。

今回は、そんな「Figma」の魅力をご紹介します。

こんな人におすすめ💁‍♂️
・無料で画像作成できるツールを探している
・チームでプロトタイプを作成するツールを検討している

Figmaとは

デザインやワイヤーフレームなどの作成に便利なUIデザインツールです。共有しながら作成できるので、その中でコメントをしたり、チームでの作業ができます。特にチームで共有して使うことがなければ、無料プランで十分に使えます。（2人以上のチーム利用は有料プランがおすすめ）

Webブラウザでも利用できますが、デスクトップ版だとローカル環境のフォントを利用できて便利です。

Figmaでできること①  | 画像デザイン作成ツール 

動画や記事などのサムネ画像の作成、TwitterやInstagramなどに使用する画像の作成も簡単にできます。図形の作成だけでなく、色味やサイズ変更などのレタッチもできます。（※こちらの記事のアイキャッチもFigmaで作成しています）

パス編集機能や画像の色調補正も可能です。デザイナーの方でもなく、それっぽくバナー画像を作れるのがいいですね。もちろん、デザイナーに依頼する際のイメージなどを共有する際にも、予めFigmaで作成しておくと、それをもとにコミュニケーションがしやすくなります。

さらに、便利なプラグインが豊富で、マテリアルデザインやアイコン、Twitter絵文字などを使用するときに便利な「Iconify」や、フロー図や遷移の矢印が使える「autoflow」、画像の背景を削除できる「RemoveBG」、お洒落なフリー素材でおなじみ「Unsplash」など、自分なりに作業がしやすくなるようにプラグインを追加してカスタマイズできる点もFigmaの魅力。

その他おすすめプラグイン👨‍💻
・Better Font Picker（フォントを選択する時にプレビューを表示してくれる）
・Font Preview（手持ちのフォントをリアルタイムでプレビューできる）
・Notepad（Figmaファイル上でメモを直接作成）
・Image Palette（画像からカラーを抽出）
・Artboard Studio Mockups（モックアップを作成）
・GiffyCanvas（GIFアニメーションを作成）
・Filter（写真にフィルターをかけることができる）
・Find and Replace（テキストを別のテキストに簡単に置換）
・Anima for Figma（インタラクティブなプロトタイプを作成、HTMLに変換）

また、ショートカットが使いやすいのもポイント。作業効率アップします。

デスクトップ版ですと、ローカルのフォントを使えるのも便利です。パワーポイントのようなプレゼン資料作成もできます。

しかも何といっても、動作が軽くてサクサク動くのがストレスフリー。

ちなみに、以下の画像もFigmaで作成しました。元になるデザインだけ作っておけば、画像入れ替えるだけなので、簡単に作成できます。速報でしたが、発表後1分くらいで掲載できました。

Figmaでできること②  | プロトタイプ作成ツール 

誰でも簡単にプロトタイプやワイヤーフレームを作ることができます。Adobe XDやSketchなどのツールより操作がシンプル。

プロトタイプの作成により、リンク設定やアニメーション設定もできるので、画面遷移など簡単に動きを確認できます。スマホの実機で操作できるので、画面やパーツをタップした時の遷移先などをチェック可能です。

さらに開発用のコードの出力、画像の書き出し機能により、エンジニアとのコミュニケーションもしやすいかと思います。複数人でリアルタイムで共同編集可能なので、共有しながら作成できますし、コメントも残すことができます。

また、デザインした部品をコピーして使うことができる「コンポーネント」機能があるので、頻度の高いボタンなどを作る際や、チームで分担して作業する際の効率も上がる仕組みになっています。

さらに、データは常に自動保存されるため、途中でパソコンがフリーズして作成したデータが消えてしまうというリスクもありません。以前のバージョンに戻ることもできます。

参照（Notionまとめ付き）

Figmaはユーザーがたくさんいるので、アップデート情報を知ったり、わからない点などを質問などしあえるのも魅力。

参照した記事については以下Noitonでまとめました🙌 ぜひご覧ください。

↓公式のYouTube動画↓

↓わかりやすい動画解説↓

以下のslackを使ったコミュニティもおすすめです。

読んでいただいてありがとうございます🙇‍♂️

Twitterで仕事や育児関連の投稿しています。気軽にフォローください🙇 ☞ https://twitter.com/yukke1006