FigmaでUI/UXデザイン!無料で使用できるデザインツールFigmaの導入

こんにちは、リリーです。
みなさんは、Figma(フィグマ)って聞いたことはありますか。
Googleで「Figma」と検索するとフィギュアサイトが出てきてしまいますが、こちらは違います!
「Figma webデザイン」などで検索すると正しい情報が表示するでしょう。

私も担当営業に聞くまでは、Figmaの存在を知らなかったのですが、
Adobe XDの機能と似たようなUI/UXデザインがFigmaでも可能なのです!

Adobe XDについてはこちらの記事をご覧ください。


web案件のプロジェクトでも、必要スキル・経験に「Sketch」や「Figma」の記載があるのを目にします。
案件詳細をいただく度に、「Sketch」、「Figma」…と書いてあり、
とりあえず、どちらか1つでも使えるようになろうと思い、無料で利用できるFigmaの学習を始めることにしました。

そこで、今回は私がFigmaを学習し学んだことやwebデザインツールの使い方などをFigma特集としてシリーズにしてお届けしたいと思います。
初回は、Figmaとは?どういうものなのか、インストール手順や日本語対応の設定方法をご紹介します。

Figmaとは

Figmaとは、ブラウザ上で簡単にデザインができるUI/UXデザインツールです。
Adobe XDやSketchとは違いフリープランがあり無料で利用できるので、誰にでも手軽に導入しやすいのもポイント。
デザイナーではない人でもちょっとした用途に役立つでしょう。

Figmaでできること

  • Webサイトのワイヤーフレーム作成
  • プロトタイピングデザインの作成
  • 複数人でリアルタイム編集が可能
  • コメント機能でチームメンバーやクライアントと情報共有ができる
  • ブラウザ上で利用できる

料金プラン

料金プランについても触れておきましょう。
(基本無料ですが、プロジェクト数・使用するメンバー数に応じて有料に)
Figmaは下記の3つのプランがあります。

Figma公式ホームページより料金表を引用

プランStarterProfessionalOrganization
料金無料編集者1人あたり月額12$
毎年請求されるか、月ごとに15$
編集者1人あたり月額45$
内容・下書きの無制限ファイル
・無制限の視聴者とコメント投稿者
・3つのチームファイルの無制限のエディター
・1チームプロジェクト
・30日間のバージョン履歴
・無制限のクラウドストレージ
・無制限のプロジェクト
・無制限のバージョン履歴
・カスタムファイル/ユーザー権限
・招待のみのプライベートプロジェクト
・共有可能なチームライブラリ
・組織全体の設計システム
・一元化されたチーム
・プライベートプラグイン
・プラグイン管理
・共有フォント
・SSO +高度なセキュリティ
・デザインシステム分析

Figmaを導入 インストール手順

Figmaを利用するには、アカウント登録が必要です。
Figmaインストール手順が下記となります。

  1. アカウント作成
  2. デスクトップアプリのダウンロード
  3. 日本語の有効化

アプリを起動後、新規ファイルを作成してみましょう。

1.アカウント作成

Figmaの公式ページ(https://www.figma.com/)へアクセスし、
Try Figma for free」をクリックして、アカウント登録をします。

インストール手順資料_1

メールアドレス、パスワードを入力し、「Create account」をクリックすると、次にアンケートが表示されるので、名前と役職を回答します。もう一度「Create account」 をクリックします。

インストール手順資料_2

登録したメールアドレスにメールが送られてくるので、「verify email」をクリックします。

インストール手順資料_3

ブラウザ上にFigmaが開きます。アカウント登録完了です。

インストール手順資料_4

2.デスクトップアプリのダウンロード

Figmaはブラウザ上でも作業可能ですが、機能に制限があります。
デスクトップアプリの方が操作もスムーズなので、ダウンロードしましょう。

ダウンロードページ(https://www.figma.com/downloads/)へアクセス。
Desktop App」から、お使いのOSのアプリケーションを選択してください。

デスクトップアプリダウンロード資料_1

Figma.ZiPをダウンロード完了後、アプリを開くとログイン画面が表示されるので、

デスクトップアプリダウンロード資料_2

log in with browser」から、先ほど作成したアカウントでログインしてください。

デスクトップアプリダウンロード資料_3

ログインが完了すると、以下のような画面が表示されます。

デスクトップアプリ表示画面資料_4

3.日本語の有効化の設定

Figmaはwebベースのツールなので、そのままローカルのフォントをツール上で使用することができません。
ローカルフォントを使えるように設定していきましょう。

ダウンロードページ(https://www.figma.com/downloads/)へアクセス
Font installers」からお使いのOSのアプリケーションを選択してください。

日本語の設定資料_1

Figmainstaller.pkgをダウンロード完了後、パッケージをダブルクリックで開くと、インストーラが起動するので指示にしたがってインストールを完了してください。

日本語の設定資料_2

これでFigmaでも日本語が利用できるようになりました。

新規ファイルを作成

最後に新規ファイルを作成してみましょう。
New file項目の「Design file」を開きます。

新規ファイル作成資料_1

デザインのために必要なフレームは、すでに登録されています。
iPhone X以外に、Androidにも対応、デスクトップPCのフレームも表示できます。

ツールバー左から3番目のフレームアイコンを選択すると「Frame」が出てきますので、「Frame」を選択すると右側にフレームのデバイスが表示されます。

ちなみに、ショートカットキー「F」でもフレームの選択画面一覧を開くことができます。

新規ファイル作成資料_2

最後に

お疲れ様でした。
設定は特に難しいところはなかったと思いますが、
Figmaの導入から新規ファイル作成までできましたでしょうか。
これでFigmaを使える準備ができました!!

次回は基本的な操作機能の説明をさせていただきます。

作者情報

ねこ好き。猫の泣き声に敏感です!
実家に8匹飼っています。猫好き家族です(笑)上京して一人暮らし。ねこ動画で癒されています。
Webデザイナー目指して勉強中です!