Figmaとは～概要・無料で始める方法～

• Figma（フィグマ）とは
• Figmaの何が良いの？
• Figmaのはじめかた方
• 無料アカウントの作成
• Figmaを日本語表示に設定にする（任意）
• Figmaのホーム画面（ファイルブラウザ）を開く

Figma（フィグマ）とは

Figmaはアメリカ発、ブラウザベースのデザインプラットフォームです。
OSを問わずに使用・共同編集ができることもあり、ワイヤーフレームやWebデザイン、UIデザインの作成に世界的に使われています。
You Tubeなどのサムネイル作成、プレゼン用のスライドを作るのに使用している方もいますね。

https://www.figma.com/ja/

日本国内だと「Sketch使えないWindows勢用」みたいな言われ方をしていた時期もありますが、2020年前後から人気が上昇。
2022年には日本語にも対応し、アップデートで便利な機能もどんどん追加されています。

デザインツールの比較サイト“UX Tools”によると、2023年時点でFigmaのシェアは圧倒的1位。
Adobe XDはずっと低空飛行かつ徐々に低下、一世を風靡したSketchも急速にダウンしていること考えると「これから学習するならFigmaが良い」と紹介されるのも納得です。

画像元：2023 Design Tools Survey - UI Design | UX Tools

Figmaの何が良いの？

Figmaの利点として様々なことが挙げられていますが、大きいところでまとめると以下の6つかと思います。

• OS関係なく使える（Windows、Chrome、Mac、Linux）
• インターフェイスがわかりやすい
• リアルタイムでデザインを共有・共同編集できる
• ノンデザイナーの方でもビジネスツールとして使える
• デザインルールを一貫したデザインを作りやすい
• 無料プランがある

コーディングさせて頂く機会の多い人間としては、デザインルールが本当重要。
同じ色のボタン見えて実はカラーコードが違う、余白の設定がバラバラ……と、デザインなのか、単に仕事が雑なのか、判別に困るデザイン渡されること結構あります。

インターフェイス（操作画面）の分かりやすさやデザイン性能は、使ってみないとわからない・感じ方に個人差がある部分でもあります。
そこで大事なのが、無料で使える範囲。

画像元：Figmaの無料プラン、プロフェッショナルプラン、およびビジネスプランの価格設定。

無料プランは実質ほとんど使えないサービスもあるなか、Figmaは無料だけでも十分仕事ができるくらいの機能が使えます。無料で使える日数（期間）制限もありません。

極端な話、自分に合わないと思ったら放置して忘れてもOK。「Figmaってどんな？」「Figma勉強したほうが良い？」と、ずっと記事や動画を見続けているくらいなら、とりあえず触ってみたほうが効率が良いです。

Figmaのはじめかた方

無料アカウントの作成

Figmaの公式サイトにアクセスしましょう。
[無料で始める] もしくは [始める] のボタンをクリックして下さい。

https://www.figma.com/ja/

下図のようなウィンドウが表示されます。
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の主要機能について見ていきましょう。