UI/UXデザインツール「Figma」の始め方

Figma（フィグマ）とは、サンフランシスコ発祥のクラウド開発のデザインツールです。2020年4月にユニコーンに入り、さらに注目のツールとなりました。似たようなサービスにはSketchやAdobeXDがあります。ツール内は英語のみですし、チュートリアルのほとんども英語なので少しとっつきにくいかもしれませんが、初心者にでも分かりやすように解説していきます。

本記事のテーマ

Figmaを学んでみたいと思われている初心者さんに向けて、Figmaのメリット、習得の流れをご紹介します。

筆者の経歴

私は2019年にサンフランシスコのプロダクトデザインの養成所へ行き、現在はシリコンバレーでUIUXデザイナーとしてフルタイムで働いています。プロダクトデザイン養成所ではまず、当時主流だったSketchを学びました。その後５社サンフランシスコのスタートアップさんとプロジェクトデザインに携わらせていただいたところ、どの会社もFigmaを採用しており私のメインのプロトタイプツールはFigmaとなりました。Sketch,Figmaどちらのツールも使った経験を元に、今流行りのFigmaの解説をしていきたいです。

Figma学習の始め方
①目標：Figmaを使ってチーム内でデザインを共有する
②環境準備：パソコンにFigmaをダウンロード（無料プランあり）
③基礎理解：Figmaでできること、事例
④学習手順：基礎学習→個人作業環境→チーム作業環境→作業の効率化
⑤仲間を作る、実践で使ってみる

①目標：Figmaを使って、チーム内でデザインを共有する

Figmaの最も優れているところは、デザインデータがクラウドで管理されており、チームでデザインを共有できることです。

②環境設定：パソコンにFigmaをダウンロード（無料プランあり）

無料で始めることができます。https://www.figma.com/pricing/

macOS: 10.11 (OS X El Capitan)以降
Windows: Windows 8以降の64-bit環境

③基礎理解：Figmaとは

３−１Figmaってこんな会社
フィグマはチーム全体の設計プロセスを1つのオンラインツールで実行できる、コラボレーションデザインツールです。

2020年4月に約130ミリオンを調達し、シリーズDにユニコーン化しました。Sriram Krishnan やAndreessen Horowitzを含む20の投資家から投資を受けています。Crunchbase

2012年にサンフランシスコで設立されて依頼、急成長を遂げている大注目のツールであり、日本でも導入する会社が増えてきています。

３−２Figmaってなにができる？

UI デザイン
デザインシステムをプロジェクト内で共有できます。また、多くの企業がFigma向けにUIキットのコンポーネントを作成しているので、それらをダウンロードすればそのままデザインに反映させることが可能です。
UX デザイン
許可された全てのチームメンバーが、クラウド上で同時作業できます。バージョン管理もされているのでデータを失う心配はありません。また、リンクをもつ全ての人がフィードバックコメントをデザイン内に残すことができます。
プロトタイピング
デザインを、クリック可能なプロトタイプにすることで、より現実世界での実装をイメージする見せ方ができます。従来は他のサービスを使ってのプロトタイプの作業をする必要がありましたが、Figmaではソフト内で出来てしまいます。Figmaのアカウントを持っていないユーザーにもクリック可能なプロトタイプが見れるリンクをシェアできます。

グラフィックデザイン
チームメンバー全体でグラフィックデザインが可能です。ベクターネットワークツールや、ペンツール、１００を超えるフォントにより、簡単にグラフィックデザインを書くことができます。

ワイヤーフレーム
簡単にワイヤーフレームのアイデアをデジタル化しフィードバックをもらえます。フィードバックを貰う際には相手にFigmaをダウンロードしもらう必要はなく、リンクさえ送信すればWindows,macOS Linuxどこからでもデータを閲覧できます。

ブレインストーミング
チームメンバー全員が参加するブレーンストーミングを簡単に行えます。参加者はFigmaをダウンロードする必要はなく、URLさえあればWindows,macOS Linuxからどこからでもデータを閲覧できます。全員のアイデアを分類したり優先順位をつけることも出来ます。

テンプレート
フローチャートメイカー、ワイヤーフレームキット、カスタマージャーニーキット、モバイルUIキットなど、Figma公式の様々なテンプレートを無料で使うことができ、作業が最適化されます。

リモートデザイン
世界中の人々と、タイムゾーンや地域を選ぶことなくリモートでコラボレートができます。デザインだけでなく、リサーチ、ブレインストーミング、フィードバック等も、あたかも顔を合わせているかのように、リアルタイムで作業することができます。

３−３　Figma事例

面白いデータがオープンソースになっていたのでご紹介します。

音楽アプリのスポティファイ
Figma (@spotify) | Figma Community
The latest files and plugins from Spotify (@spotify)
www.figma.com
東京都の新型コロナウイルス対策ページ、Figmaが公開されています
Figma
Created with Figma
www.figma.com

④学習方法、手順

おすすめは動画学習

動画での基礎学習なら、最初はYoutubeのFigma公式のチュートリアルが無料ですし英語ですがとっても分かりやすいのでおすすめです。動画では全てを網羅していないので、ウェブサイトのチュートリアル記事を読んでいくのが分かりやすかったです。

学習手順：個人で作業のフェーズ→チームで作業フェーズ

個人で作業フェーズ

図形やアートボードを書いてみる
ブートストラップ等を意識したレイヤー
コンポーネント化してみる
クリック可能なプロトタイプ
フォントをダウンロード
削除したファイルを戻す
ファイルの書き出し、読み込み
プラグイン

チームで作業フェーズ

ファイルのシェア
コメント
バージョン管理
スタイルのパブリッシュ、チームライブラリ
フォルダの管理
エンジニアにデータを渡す

⑤実践で使ってみる、Figma仲間を作る

私自身、勉強と実践はあまりにも違うと感じました。完全に理解していなくても一人で勉強するのは３ヶ月くらいにして、仕事で使ったり、仲間と作業をしていったほうがいいです。私は仕事でFigmaを使っている他に、２つのスラックコミュニティに所属しています。私自身アクティブに活動している訳ではありあませんが、皆さんが悩んでいるところは自分も悩む確率が高いので、質問を見ることができるのは素晴らしいです。

オフィシャルコミュニティ(英語)：https://join.slack.com/t/friendsoffigma/shared_invite/zt-cwvccimc-cemnI92WUkgt4qU4ZAvePA
日本語：https://note.com/hikarutayama/n/n158b083af53f