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

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

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

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

【Adobe XDの主な機能を紹介】初心者でも使いやすくUI/UXデザインができる

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

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

Figmaとは

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

Figmaでできること

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

料金プラン

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

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

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

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

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

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

1.アカウント作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

新規ファイルを作成

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

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

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

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

最後に

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

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

FigmaでUI/UXデザイン！基本操作を初心者にもわかりやすく解説