この記事ではデザインツール「Figma」の導入方法について紹介していきます。
Webサイト制作において、デザインだけでなくコーディングにおいてもFigmaを扱える必要があります。なので、コーディングの勉強を始められる皆様のために、最低限押さえて欲しい知識も含めてこの記事で紹介していきます。
目次
Figmaとは
Figmaは、WebサイトやWebアプリケーションの見た目（UIデザイン）を作成できるデザインツールです。
UIデザインに必要な機能が揃っており、業界的にもかなり普及しているデザインツールです。
ZeroPlusのカリキュラムでもFigmaを用いて授業を行っていきます。
初めのうちは、デザインデータを見ながら、コーディングを行う目的で使用していきます。
そのため、Webサイトをコーディングする段階でも登場するので、準備を進めていきましょう。
Figmaを使い始めよう
それでは早速、Figmaの導入を進めていきましょう。
Figmaの導入方法
- ブラウザアプリを使う
- デスクトップアプリを使う
Figmaには大きく上記２つの導入方法があります。
今回は、「ブラウザアプリを使う」方法で行っていきましょう。
Figmaのアカウントを作成する
Figmaは、ブラウザ（ChromeやSafari等）からアクセスできるアプリケーションです。
Figmaアカウントを作成することで、パソコンに直接インストールしなくても簡単に使い始めることができます。（以下の解説は画像は2023年4月現在のものになります。）
Figma公式サイトから「始める」をクリックする
まずは、Figmaの公式サイトにアクセスします。
画面上に「始める」というボタンがありますので、クリックしましょう。
メールアドレスとパスワードを入力する
続いて、Figmaアカウントを作成するために「メールアドレス」と「パスワード」を入力します。
入力し終わったら、「アカウント作成」のボタンを押して、次の画面へ進みます。
補足
作成したパスワードは、忘れないように控えをとっておきましょう。
FigmaアカウントはGoogleアカウントを使って登録することもできます。
名前と職業等のプロフィールを入力する
次に、名前と該当するプロフィールを入力します。
入力し終わったら、「アカウント作成」のボタンを押すと、先ほど登録したメールアドレスにメールが届きます。
名前と職業等のプロフィールを入力する
次に、Figmaにチームメンバーを招待するか聞かれます。
今回は、個人で使っていきますので「Do this later」をクリックして、スキップしましょう。
Figmaのプランを選択する
次に、契約プランを選択する画面が表示されるので「Starterプラン（無料）」を選択しましょう。
補足
Starterプラン（無料）は、デザインデータの作成数や共同編集に制限がかかります。
後々からプランの変更も可能なので、本格的にWebデザインを学ぶにあたって変更していければ大丈夫です。
チュートリアルをスキップする
次に、Figmaからチュートリアルを受けるか選択できます。
「I’ll get started on my own」をクリックし、スキップしても大丈夫です。
本解説ではスキップしますが、チュートリアルを受けたい場合は「Design with Figma」を選択し、
チュートリアルを始めてみましょう。
Figmaのホーム画面が表示されたら完了
上記の画像のようにFigmaのホーム画面が表示されれば完了です。
（以上の解説は画像は2023年4月現在のものになります。）
Figmaファイルを開く
次に、Figmaの使い方を簡単に紹介していきます。
ここでは、「コーディングの分野に関する部分のみ」ピックアップして紹介していきます。
なので、より詳細な操作に関しては、デザインを勉強する際に覚えていただければ幸いです。
Figmaファイルを開く
まずは、Figmaで作成されたデザインデータの開き方を確認していきましょう。
「ファイルをインポート」をクリックする
Figmaのホーム画面から「ファイルをインポート」をクリックしましょう。
ファイルを選択して開く
使っているパソコンの中から、開きたいFigmaファイルを選択しましょう。
Figmaのファイルの拡張子は「.fig」になっています。
（※解説画像はMacOSの画面のものになります。WindowsOSの場合でも大きな変化はありません。）
Figmaの画面と基本操作
次に、Figmaの操作画面の見方を確認していきましょう。
Figmaの操作画面
Figmaの基本的な操作画面は大きく４つに分けることができます。
- 選択ツール：Figmaの基本操作
- 左パネル：「レイヤー」でデザインデータ内の要素の一覧が確認できる
- キャンバス：デザインを作成する場所
- 右パネル：「デザインタブ」で要素見た目について確認できる
それぞれの画面については、上記のイメージを持っていただければ大丈夫です。
選択ツール
まず大前提として、Figmaの操作は「選択ツール」で行います。
選択ツールの使い方
要素をクリックして、青い四角形で囲われたら選択成功です。
「選択ツールで要素を選択→右パネルで確認/編集」がFigmaの基本操作になります。
（コーディングの作業においては、デザインが変わってしまうので移動や見た目を変更することはありません。）
要素間の余白を図る
Figmaのガイドを使って、要素間の「余白」を測ることができます。
このガイドを使って「padding」や「margin」などの余白を確認していきます。
測定の仕方
Windows：選択ツールで要素を選択後、カーソルを合わせてAlt
Mac：選択ツールで要素を選択後、カーソルを合わせてOption
Figmaからコードを読み取る
次は、FigmaからWebサイトのコードを読み取る方法を確認していきましょう。
コーダーがデザインデータから読み取るものは主に「CSSプロパティ」です。
Webサイトの要素がどのような見た目になっているかを、Figmaのデザインデータを見ながら確認していきましょう。
デザインタブ
Figmaの操作画面のうち右側のパネルに「デザイン」と書かれたタブがあります。
このデザインタプにはデザインデータの「塗り」や「線」、「エフェクト」などの要素の見た目に関する情報がまとめられています。
補足
それぞれの項目がどのCSSプロパティと対応しているか覚えておきましょう。
この「デザインタブ」を確認しながら、コーディングの情報を読み取っていきます。
プロパティの対応箇所を覚える（デザインタブの上部）
例として、適当な長方形を選択した時のデザインタブを上から見ていきます。
オレンジ色で囲われた部分が大事な情報になりますので、それぞれ覚えていきましょう。
プロパティの対応箇所を覚える（レイヤ〜塗り）
プロパティの対応箇所を覚える（線）
プロパティの対応箇所を覚える（エフェクト）
テキストのプロパティの対応箇所を覚える
選択ツールで、テキストをクリックした場合もデザインタブが切り替わります。
テキストに関するCSSプロパティがまとめらているので、ここでも項目を覚えておきましょう。
テキストの場合「塗り」の項目が「colorプロパティ」にあたります。
インスペクトタブ
デザインタブ以外にも、「インスペクトタブ」からもCSSプロパティを読み取ることができます。
選択した箇所のCSSプロパティが表示される
画像は、あるデザインのテキストをクリックした時の例になります。
インスペクトタブに選択した要素のCSSのコードが表示されます。
このように、インスペクトタブはコーダーのためにヒントをくれる機能になります。
注意
このインスペクトタブに書かれているコードの全てが正しいわけではありません。（※不必要なコードも含まれる場合がある。）
なので、デザインタブでCSSプロパティを確認し、あくまで参考程度でインスペクトタブを確認してください。
Figmaから画像素材を集める
コーディングを行う際に、デザインデータから画像素材を手にいれる必要があります。
使用する画像素材を手元にダウンロードすることを「書き出す」と言います。
Figmaを使う上で、画像の書き出し方を覚えていきましょう。
書き出す画像を選択する
選択ツール（V）の状態で、書き出したい画像を選択します。
補足
デザインデータによっては、画像の上にフィルターなどが配置されている場合があります。
このような要素は、普通にクリックしただけでは画像を選択することができません。
左側のパネルの「レイヤータブ」で、配置されているオブジェクトの一覧を確認できます。
その中から画像を探し、クリックすることでも画像を選択できます。（アイコンが「画像」になっているものがヒント）
右パネルを「デザインタブのエクスポート」の「+」をクリックする
画像の選択ができたら、デザインタブのエクスポートの項目の「+」をクリックします。
「エクスポート」から素材として書き出す画像の設定ができます。
- 書き出す画像の大きさ（ZeroPlusの教材では2XでOK）
- 名前（レイヤーに書かれてるものが反映される）
- ファイル形式（JPG,PNG等）
「○○をエクスポート」のボタンをクリックすると、パソコン内に画像が書き出されます。
制作の際は実際に画像を書き出していくことになるので、今のうちから慣れておきましょう。
Figmaの操作に慣れていこう
ここまでで、コーダー向けにFigmaの基本操作を紹介してきました。
Figmaを使い始める際は情報量の多さに混乱するかもしれません。
ですが、一度に全部覚えようとして焦ることはありません。少しずつ慣れていければ大丈夫です。
ただし、この記事を読んだだけでは、Figmaの使い方は身につきません。
実際に教材を進めていく中で少しずつFigmaの操作に慣れていきましょう。
