UI/UXデザインツール『Figma』入門

1-2. 初期設定とインストール

    Figmaを利用する為に必要なアカウント登録、アプリのインストール、日本語の有効化について説明します

    公開日:2019/04/19最終更新日:2021/01/28

    1.アカウントを作る

    Figmaを利用するにはアカウント登録が必要です。有料版もありますが、ほとんどの機能は無料でも利用できます。

    オフィシャルサイト(https://www.figma.com/)にアクセスし、「Try Figma for free」からアカウント登録します。

    メールアドレスとパスワードを入力するとアンケートが表示されるので、名前と役職を回答しましょう。これらの情報は後から変更もできます。

    Create Account」をクリックして、アカウントの作成は完了です。編集画面が表示され、チュートリアルが始まるので「Next」をクリックします。2枚目でチームを作成するよう推奨されますが、個人利用の場合は必要ありませんので、左上の「Cancel」ボタンで離脱しましょう。

    2.日本語の有効化

    残念ながらFigmaはまだまだ日本ユーザーが少なく、デフォルトではGoogle Fontsが読み込まれるようになっています。それ以外を利用するには、ご使用のPCのフォントフォルダを読み込む必要があります。

    とても簡単なのではじめに設定しておきましょう。まず左上、Figmaのロゴが表示されている箇所をクリックし、「Account Setting」を開きます。

    すると登録したFigmaアカウントの設定画面が開きます。ページ下部「Fonts」セクションに「Download installer」(インストーラをダウンロードする)というボタンがあるのでクリックしましょう。

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

    インストールが完了しました」画面が出れば成功です。これでFigmaでも日本語が利用できるようになりました。

    インストーラのダウンロードボタンが表示されない場合は、https://www.figma.com/downloads/ から「Font installers」にインストーラのファイルがダウンロードできるリンクがありますので、そちらから自分の使用しているOSにあったインストーラをダウンロードしてください。

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

    Figmaはブラウザ上でも作業可能ですが、機能に制限があります。デスクトップアプリの方が操作もスムーズなので、ぜひ使ってみましょう。 下記URLからアプリをダウンロードできます。

    https://www.figma.com/downloads/

    Desktop App」から、お使いのOSのアプリケーションを選択してください。

    ダウンロード完了後、アプリを開くとログイン画面が表示されますので、先ほど作成したアカウントでログインしましょう。

    こちらが初期画面のファイルブラウザになります。

    上部にはツールバーが表示されており、右サイドバーではプロジェクトやファイルを管理します。 初期状態ではマテリアルデザインのUIキットとFigmaのサンプルファイル、カラースタイルが設定されている「Personal Color」のファイルが用意されています。

     

    次回から実際にファイルを使用し、Figmaの使い方を説明していきます。

    理解度チェック





    UI/UXデザインツール『Figma』入門

    1. Figmaの概要とインストール

    2.Figmaの基本操作

    3.ツールバーの操作

    4. プロパティパネルの操作

    5. プロトタイピング

    6. 共有とバージョン管理

    7. 料理写真投稿アプリを作ってみよう



    このレッスンの著者