開発者のためのFigma活用術(3) デザインを作ってみよう！初心者が押さえたいFigmaの使い方

今回は初めてFigmaを利用するユーザー向けに、「Figmaのアカウント作成から基本的な操作」について紹介します。

Figmaには「プロフェッショナル」や「ビジネス」などの有料プランもありますが、無料の「スターター」プランとUI(ユーザーインターフェイス)やツールの操作方法は変わりません。そこで、今回はスタータープランでFigmaを利用することを想定し、アカウント作成から基本的な操作方法を解説します。

アカウントを作成し、新規ファイルを作成する

まずは、Figmaのホームページのトップ画面にある「サインアップ」を押して、メールアドレスとパスワードを入力し、「アカウントを作成」ボタンを押します。

その後、「名前」「職業」「Figmaの使用目的」を選択して、再度、「アカウントを作成」ボタンを押すと、入力したメールアドレス宛てに「メールアドレスの確認」メールが届きます。

メールにある、「メールアドレスを確認する」ボタンを押せば、Figmaのアカウント作成は完了です。ユーザーのホーム画面に遷移すると、無料の「スターター」プランと有料プランのどちらを利用するか尋ねられます。どちらも、UI(ユーザーインターフェース)やツールの操作方法は変わらないので、まずスタータープランで体験してみてください。

ログインすると、まずは「ファイルブラウザ」画面が表示されます。「最近表示したファイル」や「下書き」などの自分が作成したデザインファイルや、チームで共同制作中の保管するファイルなどにアクセスすることができます。

ファイルブラウザ画面

ホームファイルブラウザ画面中央上部の「デザインファイルを新規作成」からは新規のFigmaファイルを作成できます。「FigJamファイルを新規作成」では新規のFigJamファイルを作成できます。

「ファイルをインポート」を押すと、Sketchなど他のデザインツールで作ったファイルや、PCのローカルフォルダに保存されたFigmaファイルなどがインポート可能です。

新しく作成したファイルは、デフォルトで「下書き」に保存されます。下書きは自分のプライベートファイルになっているので、他の人にデザイン途中のファイルを見られることはありません(招待すれば、他者も下書きファイルを閲覧可能)。

エディタ画面の見方

次に、Figmaのエディタ画面について説明していきます。

「デザインファイルを新規作成」を押して、「エディタ画面」を開きましょう。もし他のデザインツールを使ったことがある人なら、使い方を直感的に把握できると思います。中央にある「キャンバス」の上に、デザインを置いていきます。

エディタ画面(中央がキャンバス)

まずは、キャンバスの基本操作を覚えましょう。キャンバスは動かしたり、拡大したりすることができます。スペースキーを押しながらマウスを動かすとキャンバスを移動できます。そして、Zキーを押しながらクリックすると拡大でき、Windowsの場合はalt＋Zキー/Macの場合はOption＋Zキーを押しながらクリックすると縮小できます。

また、Zキーを押しながら、マウスで範囲を指定すると、指定した範囲をピンポイントでズームできます。

「キャンバス」の両サイドには「パネル」があります。

左側のサイドバーにあるのが「レイヤーパネル」で、キャンバス上にあるデザインの要素が全て表示されます。右側のサイドバーにある「デザインパネル」では、画像やアイコンの縦幅・横幅、コントラスト、彩度など、デザインのさまざまな要素を調整するための機能があります。

エディタ画面(左側がレイヤーパネル、右側がデザインパネル)

レイヤーパネルには、キャンバスを増やす「ページ」という機能があります。

ページはたくさんのデザインを整理しながら作成するときに便利です。例えば、メインのページではWebサイトのデザインを作成し、別のページでは、(メインページで使う)ボタンのデザインを整理する、といった使い方をしてみてください。

ページ機能(デザインを整理する時に使用)

モードの切り替え

次に、Figmaの「モード」について説明します。

Figamでは、Webページやアプリなどのデザインを作成できる「デザインモード」のほかに、デザインに画面遷移などのインタラクションを付加したプロトタイプを作成できる「プロトタイプモード」、エンジニアがコーディングする際にスタイリング(CSS)を確認できる「インスペクトモード」があります。デザインパネルの最上部でタブを切り替えることができます。

モード切り替えボタン(デザインパネル上部)

プロトタイプモードでは、デザインに「このボタンをクリックすると、この画面に遷移する」などのインタラクションを付加することができます。画面遷移のルールやアニメーションなども細かく設定することができます。

ここでは、「あるボタンを押すと、違う画面に遷移する」というインタラクションを設定する場合について説明します。

まず、インタラクションを設定したい要素を選択すると、その要素の右側に＋(プラス)ボタンが表示されます。＋ボタンを押すと矢印が表示されるので、そのまま矢印を遷移先画面までドラッグします。これで画面遷移のインタラクションの設定が完了です。

プロトタイプモード(ページ遷移を設定している様子)

インタラクションの動作は、プロトタイプのプレビュー画面から実際に操作して確認できます。プレビューを表示するには、エディタ画面右上の「プレゼンテーションを実行」ボタンを押します。このプレビュー画面は、ユーザーテストをするときなどに便利です。

「実際に操作してみると動作に違和感がある」「このアイコンはわかりにくい」など問題点がわかったら、またデザインを調整していきます。

インスペクトモードは、エンジニアが使うことの多いモードです。デザインを基にコードを書いて実装するとき、テキストのフォントや画像のサイズなどの細かな情報を確認することができます。要素ごとに詳細を確認できるので実装がしやすいです。

インスペクトモード

デザインを作ってみよう

実際にデザインを作るときは、画面左上にあるフレーム、シェイプなどを用います。

まずはフレームを引きます。フレームは箱と考えてみてください。自分の作りたいデザインをこの箱に入れましょう。

「フレームボタン」を押すと、右のデザインパネルにテンプレートが出てきます。デザイナーはiPhoneなど、対象のデバイスを意識してデザインを作ることが多いと思いますが、デバイスごとの解像度を覚えるのは大変です。テンプレートにはさまざまなデバイスのサイズが登録されており、任意のサイズのフレームを選択できます。