Figma（フィグマ）とは
Figmaはアメリカ発、ブラウザベースのデザインプラットフォームです。 OSを問わずに使用・共同編集ができることもあり、ワイヤーフレームやWebデザイン、UIデザインの作成に世界的に使われています。 You Tubeなどのサムネイル作成、プレゼン用のスライドを作るのに使用している方もいますね。
日本国内だと「Sketch使えないWindows勢用」みたいな言われ方をしていた時期もありますが、2020年前後から人気が上昇。 2022年には日本語にも対応し、アップデートで便利な機能もどんどん追加されています。
デザインツールの比較サイト“UX Tools”によると、2023年時点でFigmaのシェアは圧倒的1位。 Adobe XDはずっと低空飛行かつ徐々に低下、一世を風靡したSketchも急速にダウンしていること考えると「これから学習するならFigmaが良い」と紹介されるのも納得です。
Figmaの何が良いの？
Figmaの利点として様々なことが挙げられていますが、大きいところでまとめると以下の6つかと思います。
- OS関係なく使える（Windows、Chrome、Mac、Linux）
- インターフェイスがわかりやすい
- リアルタイムでデザインを共有・共同編集できる
- ノンデザイナーの方でもビジネスツールとして使える
- デザインルールを一貫したデザインを作りやすい
- 無料プランがある
コーディングさせて頂く機会の多い人間としては、デザインルールが本当重要。 同じ色のボタン見えて実はカラーコードが違う、余白の設定がバラバラ……と、デザインなのか、単に仕事が雑なのか、判別に困るデザイン渡されること結構あります。
インターフェイス（操作画面）の分かりやすさやデザイン性能は、使ってみないとわからない・感じ方に個人差がある部分でもあります。 そこで大事なのが、無料で使える範囲。
無料プランは実質ほとんど使えないサービスもあるなか、Figmaは無料だけでも十分仕事ができるくらいの機能が使えます。無料で使える日数（期間）制限もありません。
極端な話、自分に合わないと思ったら放置して忘れてもOK。「Figmaってどんな？」「Figma勉強したほうが良い？」と、ずっと記事や動画を見続けているくらいなら、とりあえず触ってみたほうが効率が良いです。
Figmaのはじめかた方
無料アカウントの作成
Figmaの公式サイトにアクセスしましょう。 [無料で始める] もしくは [始める] のボタンをクリックして下さい。
下図のようなウィンドウが表示されます。 Googleアカウントを使ってFigmaにログインするか、メールアドレスとパスワードを入力してFigmaのアカウントを作成するかを選んで下さい。
以下は [Googleで続行] を選んだ場合の表示です。
どちらを選択た場合も、画面に表示される指示通り進めば問題ありません。
Googleアカウントとの連携、もしくはアカウント作成を進めると、Figmaの初期設定画面が表示されます。 Figma上でのあなたの表示名を決め、Figmaを使う目的などを選択して進めていきましょう。
回答を進めていくと、下図のようなプラン選択画面が表示されます。 無料の『Starter』を選択して下さい。 プランのアップグレードはいつでも出来るので、必要になった時に切り替えましょう。
Continueで進めると、最初にどっちを使う？という選択画面が出てきます。 よくわからない場合は、『Design with Figma』 の方を選択して下さい。
Finishで、初期設定画面を完了させましょう。
以下のような、Figma basicsとなっている画面が開いたら、登録作業は完了です。
ごちゃごちゃ色々なものが表示されているし、英語だし、「難しそう」「よくわからない」と思ってしまうかもしれません。 ですが、この画面はデザイン制作画面のデモ・見本のようなもの。 いきなり、この画面からデザインを作っていく必要はありません。
Figmaを日本語表示に設定にする（任意）
Figmaは日本語表示に対応していますが、最初の画面だと英語になっていること多いです。 日本語表示に切り替える場合は、以下の操作を行って下さい。
右下に表示されている「？」のアイコンをクリック。 表示されるメニューから [Change Language...] を選択します。
日本語を選択してSave。 画面がリロードされ、日本語表示に切り替わります。
Figmaのホーム画面（ファイルブラウザ）を開く
大抵のアプリでは、ログインするとホーム画面やトップ画面と呼ばれる、ファイル一覧や設定など各機能の一覧画面が開きます。 Figmaでは、この画面をファイルブラウザ（file browser）と呼びます。
今開いている、Figma basicsはデザイン制作画面のデモのようなもの。 一旦、ホーム画面（ファイルブラウザ）を開いてみましょう。
画面左上にある、Figmaのアイコン（メインメニュー）をクリック。 メニューの一番上にある [ファイルに戻る] を選択して下さい。
ファイルブラウザの画面が開きました。
次回、このファイルブラウザを含む、Figmaの主要機能について見ていきましょう。