Figmaの基本【これからはじめるFigma】

はじめに

「Figma」って聞いたことあるし、触ったこともあるけど、業務に活かせるまでは使いこなせてないデザイナー。

SketchやPhotoshopのように有料のツールを買って「ガッツリ勉強！」というところまではしたくないけどちょっとした画像加工などはできるようになりたいエンジニア、ディレクター、マーケター。

そういう方は多いのではないでしょうか？

FigmaはしっかりUI/UXのデザインをしたいデザイナー、ちょっとした画像加工を行いたいエンジニア、ディレクター、マーケターにとって非常に便利なツールです。

Webベースのツールなので、Macの方でもWindowsの方でも使える！また、ブラウザさえあればどこでも使える。さらに、プロジェクトをいくつ作っても無料で使える。

今回はそんな超便利だけど意外と知られていない、Figmaとその基本をご紹介します！

Figmaとは

FigmaとはDylan FieldとEvan Wallaceが共同開発した初の(design tool with real-time collaboration)リアルタイムコラボレーションができるデザインツールです。

どのようにリアルタイムコラボレーションができるかというと、複数人で同時にデザインすることができることです。Google docsやspreadsheetを思い浮かべていただくとイメージしやすいかもしれないです。

また、FigmaはWebベースなので、PhotoshopやSketchなどが入っていなくても、どのマシンでもブラウザさえあれば誰でもデザインを閲覧、編集、コメントすることができます。

また、Figmaは無料で使うことができます。
とはいえ、チームで使う場合はプランが３つあり、無料プランだと、３プロジェクトまで無制限で使うことができます。（細かいところをいうと、Figmaはバージョン管理をしてくれるのですが、この機能が最初の３０日間しか使えないという制限があります）

ただ、チームで使わない分には、永遠に無料で使えるので非常に便利ですし、チームで使う場合も大型のプロジェクトでない限りは有料にしなくても大丈夫そうです。

Figmaでできること

Figmaはもともとインターフェースデザインのために作られたデザインツールで、いわゆるUI/UXデザイナーにはぴったりです。

先ほども触れましたが、複数人でリアルタイムにデザインをすることができます。（この機能はワイヤーなどでみんなと話し合いながら変更などを加える時に便利かもしれません）

さらに、作ったデザインに対してリアルタイムでコメントなどのフィードバックを入れることができます。

こちらのやり方に関しては、別の記事でご紹介します。

また、話題にもなっていましたが、Figmaにはバージョン管理機能があり、つい先日こちらの機能がさらにリッチになるように改良されました。さらに詳しく知りたい方は、下記mediumの記事をご覧ください。

Now you can name and annotate your Figma Version History
(Figmaのバージョンに名前と説明文がつけられるようになりました)

イメージとしては、gitのデザイン版のようにデザインのバージョンに対し、名前をつけたり説明文がつけられるように改良されています。

これからはじめるFigmaシリーズについて

【これからはじめるFigma】シリーズではSketchを使ったことがない方やデザイナーではない方、新しいツールを触るのが不安な方に向けて、Figmaというツールをさらに便利に使っていただけるよう、Figmaの設定方法から細かい機能の使い方までご紹介します。

FigmaはSketchを使っているデザイナーであれば、分かりやすいように作られていますが、先ほどもご紹介したようにFigmaは非常に機能が豊富です。

すでにSketchを使ったことがあるというデザイナーさんに向けても、Webベースであるが故に設定しておいた方が良いことやFigmaならではの機能をご紹介し、さらにFigmaをフルに使っていただけるように様々なものをご紹介します。

また、シリーズ後半ではシンプルなアプリを作り、Figmaのプロトタイピング機能、コラボレーション機能、ディベロッパーへのハンドオフの仕方なども紹介していきます。

Figmaの基本

それでは、早速実践に入り、Figmaの基本設定をしていきましょう。

本来であれば、「ツールをダウンロードしよう！」というところから初めていくのですが、FigmaはWebベースなのでダウンロードせずに気軽にはじめることができます！

Figmaのアカウントを作る

Figmaをはじめるためには、こちらのサイトにアクセスしてください。
Figma

すでにアカウントをお持ちの方は「Sign in」よりサインインしてください、アカウントをお持ちでない方は「Sign Up」してください。

サインアップする方は、最初に簡単にどういうお仕事をしているのかアンケートがあるので、そちらに答えて「Create Account」してください。

アカウントを作り、Figmaに入ると、このようにすでにサンプルのプロジェクトがいくつか入っています。

最初に簡単なチュートリアルがあるので、英語が大丈夫の方は一通り受けていただくと良いと思いますし、苦手な方はバツでスキップしてしまっても良いと思います。

Figmaをネイティブアプリとして使う

FigmaはWebベースなので、ブラウザっぽい感じが気になる、という方もいらっしゃるかもしれません。

とはいえ、Figmaをネイティブアプリっぽく使用していただくコツがあります。

ブラウザをフルスクリーンにすると少しネイティブアプリっぽくなります。

もしくは、コンピューターのメニューバーの「表示」からブックマークバーやツールバーなどを非表示にしておくのも良いかもしれません。

FigmaはChromeと一番相性が良いので、他のブラウザでも良いのですが、できたらChromeで作業されることをおすすめします。

また、FigmaはWeb版しかない、と思われがちですが、デスクトップ版のアプリもあります。

左上のハンバーガーメニューから「Get Desktop App」をクリックすると、zipファイルがダウンロードされ、それを解凍すればネイティブアプリでもほぼWeb版と同じことができます。

ただし、こちらのネイティブアプリはもちろん別のPCからはアクセスすることはできないので、ご注意ください。

Figmaにローカルのフォントを設定する

FigmaはWebベースのツールなので、そのままローカルのフォントをツール上で使用することができません。

Figmaをはじめる前に設定で、ローカルフォントを使えるようにしていきます。

左上のハンバーガーメニューから「Account Settings」を開きます。

「Fonts」部分の「Download Installer to enable local fonts」をクリックし、ダウンロードされた「FigmaInstaller.pkg」を開きます。

するとローカルフォントがFigma内でも使えるようになります。

基本の動作

それでは、左のサイドメニューの「Recent」から先ほどの画面に戻り、Figmaの基本の動作を確認していきます。

表示されているいずれかのプロジェクトを開いてください。
私は今回、「Sample File」というプロジェクトを開いて作業します。

ページ内で動く

まず、自分が操作したいところにいけるよう、Figmaのページ内で動く方法をご紹介します。

上記、6つのショートカットが基本的な、ページ内移動、ズームのショートカットですので、一番使いやすいものを模索しながら慣れるまでページ内をくるくる移動してみてください。

掴みたいオブジェクトを掴む

FigmaではPhotoshopやSketchと同じように、全てのデザイン部品を「レイヤー」という単位で分けています。

また、「レイヤー」をいくつかまとめたもののことを「グループ」と呼びます。

普通にFigma内でデザイン上をクリックすると「グループ」の方が選択されます。

グループ内のレイヤーを掴みたい場合は、「⌘」+ クリックで中のレイヤーを掴みましょう。

画像のレイヤー、シェイプのレイヤー、テキストのレイヤーなど思い通りに自分のレイヤーが掴めるように練習してみてください。

何度もうまくいかない場合は、「ページ内で動く」部分でご紹介したショートカットを使いながら、自分の掴みたいレイヤーの近くまでズームして再度チャレンジすると良いかもしれません。

ある程度スムーズに掴めるようになったら、どれでも良いので、テキストレイヤーを掴んでください。

テキストレイヤーを掴むと、左のレイヤーパネルで「T」に似た文字がハイライトされるはずです。

テキストレイヤーがつかめていることが確認できたら、右にあるバーをご覧ください。こちらは「プロパティバー」といい、そのレイヤーのもつ様々な属性を変更することができます。そのレイヤーのオプションを変更することができる、と考えても良いでしょう。

例えば、テキストレイヤーであれば、そのテキストのフォントや大きさ、行間などを変更できます。

今回は、文字のフォントを変更してみましょう。
フォントを変更する際に、１つ注意点なのですが、「TEXT」部分の右側にある「・・・」をクリックしてください。

こちらをクリックすると、「Advanced Type」という書式の詳細設定をすることができます。

こちらを開いていただいたら、一番下の「Show Google web fonts」というところにチェックが入っているのを確認してください。

こちらにチェックを入れることによりGoogleのWebフォントが使用できるようになります。

また、もう一点注意するべき点としては、フォントが英文フォントになっているときは日本語をタイプしても表示されません。いくら日本語を入力しても文字が出てこず日本語ユーザーがFigmaを使用する際に混乱する大きな原因になっています。フォントを和文フォントに変更すれば日本語はきちんと表示されるので日本語を打つ際はフォントの変更を忘れないようにしてください。

まとめ

以上、今回はFigmaの基本についてご紹介しました。

Figmaはデザイナーだけでなく、エンジニア、ディレクター、マーケターの方にも使っていただける非常に便利なデザインツールです。

ベーグリーでは【これからはじめるFigma】という名前でFigmaの基本操作やさらに奥深い機能のご紹介までしていきますのでぜひ皆さんの学習に役立ててください。