※本記事は、2022年9月29日に公開済みの記事を移行して再掲載したものです。
こんにちは！デザイナーの片岡です。
突然ですが、Figmaってご存知でしょうか。
Figmaはデザインツールで、UIUXデザイナー、WEBデザイナーの方だけでなくPM、エンジニア、ディレクター、営業など様々な職種の方が資料やプロトタイプ作成、画像制作などにお使いいただける非常に便利なツールです！（後ほど詳しく説明します）
斯く言う私も、Figmaを利用し始めてまだ1年も経っていません。でも、機能がシンプルで非常に使いやすく、早く慣れることができました！
元々Adobe XDやSketchなどデザインツールを利用していた方は特に早く覚えられるかと思いますが、デザインツールを使うこと自体がそもそも初めてって方でも始めやすいかと思います！
Figmaを導入してみたい、どんなものか知りたい、という方向けの記事になりますのでぜひ参考にしてみてください。
⛳️この記事のターゲット
-
Figmaを利用したことがない方、利用することに興味がある方
-
デザインに少しでも興味がある方、今人気のサービスに興味のある方
-
職種は問わず
-
目次
1.Figmaって何？
Figmaとは、サンフランシスコ🇺🇸にあるFigma社発祥のデザインツールです。
ツールの言語は英語ですが、使い方を慣れれば英語が苦手な方でも大丈夫だと思います。
Figmaは、UIデザインツールとして特に近年急激に世界で普及しています。
引用：https://uxtools.co/survey-2021/
Figma社のサービスには2種類あります。
- Figma メインのツール。画像やwebサイトデザイン制作、プロトタイプ制作、資料制作など
類似サービス：Adobe XD, Sketch, STUDIO,UXPin
▼このように、ワイヤーフレームなどを作成できます。
参考：https://www.figma.com/templates/
- FigJam(β版) オンラインホワイトボードツール。オンラインでの会議でのアイデア共有など
類似サービス：Miro,Mural,Wismical
▼このように、ブレインストーミングなどに活用できます。
尚、今回の記事ではFigmaを紹介します🙋♀️
2.なぜFigmaがいいの？Figmaでできること
ではFigmaを導入するメリットやオススメの理由を紹介します。
Web上でも使える手軽さ
FigmaはWeb上で利用できるデザインツールのため、インターネット環境さえあれば気軽に利用できる点がメリットとなっています。フリープランがあり無料で利用できるので、誰にでも手軽に導入できます。
端末にソフトウェアをインストールする必要がなく、データの受け渡しも簡単に行えます。また、MacやWindowsなどのOS環境を選ばずに使えることもFigmaのメリットといえます。
- 複数人でリアルタイム編集が可能
Figmaは複数人によるリアルタイム編集が可能です。チーム内で画面を共有しながら、同時に編集を行うことができます。コメント機能で情報共有も可能です。
また、デザインした部品を使いまわすことのできる「コンポーネント」を用いて、複数のデザイナーで作業を分担し、作業のスピードを高められることもFigmaのメリットです。
サクサク軽い
デザインソフトというと動作が重たいイメージがあるかと思いますが、Figmaの動作は軽く、手軽にストレスフリーで使えます。
データを送付する必要がない
FigmaはファイルURLを共有すれば内容が確認できるため、データファイルを送付する必要がありません。デザインを修正するたびに毎回、容量の大きいデータを送受信する手間を省くことができます。
自動保存でバージョン管理の手間が省ける
Figmaで制作したデータは、常に最新バージョンが自動保存されます。そのため、誤って古いバージョンのデータを扱ってしまうなどのトラブルが起こりません。また、以前のバージョンからやり直したい場合は、変更日時を指定して戻ることも可能です。
デザインがいい
これは個人的な主観になりますが、デザインがスッキリとしていて綺麗で、スタイリッシュかつ見やすいUIで気分良く使えます。特にFigJamのUIはポップで明るい感じでスタンプなども可愛くて、気分が上がります！
3.アカウント作成、アプリダウンロード
では、実際に使ってみましょう！
1.下記のサイトにアクセスしてください。
2.画面右上の「Sign up」をクリックします。
3.「Continue with Google」で既存でお持ちのGoogleアカウントでログイン、もしくは入力フォームにメールアドレス、パスワードを入力し、「Create account」をクリックしてアカウント作成に進みます。
アプリのダウンロード
Webでもご利用いただけますが、アプリの方が動作が軽いので、
せっかくなのでアプリをダウンロードしましょう！
左側の「Desktop app」内で、お使いのOSに合わせてインストールしてください。
4.画面の説明
ではFigmaを立ち上げて、早速作成していきましょう！
テンプレートから初めてみるのもいいかもしれませんが、1から作る方法を説明します。
画面左上の方にある「New design file」をクリックすると、下記の画面になり、新規作成できます。
画面の構成の説明です。
選択されている状態（アクティブ状態）の項目は、青色になっています。
さらに、「ツール（編集）」の中で「選択」「フレーム」「図形」「ペン」にあるプルダウン（アイコンの右側に下向き矢印があるツール）のツールの詳細はこちらになります。
それぞれのツールの右側にある大文字のアルファベットは、ショートカットキーです。
こちらは、キーボードの入力が英語になっている時に利用可能です。
では、早速編集してみましょう。
5.フレームを作成
まず、編集の土台となる「フレーム」を作成しましょう。
①「フレーム」 OR ショートカットキー「F」を押す
②右側のツールバーから、作成したいサイズのOSを選択すると、そのOSの画面サイズのフレームを自動で作成できます。
上記サイズではなく任意のサイズで作成する場合、作業スペース上でのドラッグでも作成可能です。
③こちらがフレームとなります。
フレームのサイズは右側のサイドバーで変更もできます。
6.図形を作成する
では、図形（四角形）を作ってみましょう。
①ツールの「Rectangle」 OR ショートカットキー「R」を押す
②ドラッグで四角形を作成
右側の列に、図形のサイズ変更や色変更などの項目があります。
移動や拡大縮小したい時は「選択（Move)」ツールに切り替えて修正してください。
ショートカットキー「V」でも切り替え可能です。
7.テキストを入力する
ツールの「Text」を選択 OR ショートカットキー「T」を押し、テキストを入力したい場所でクリックするとテキストを入力できます。
（💡この時、入力したテキストが画面左側にあるレイヤーの画面で上に来ていることがわかるかと思います。レイヤー上でドラッグ＆ドロップでレイヤー順の変更も可能です）
右側のサイドバーで、テキストの位
置揃えやサイズ変更、色変更などが可能です。
また、テキストのサイズ変更で便利なツールが下記の「Scale」です。
①「Move」ツールのプルダウンにある「Scale」ツールを選択 OR ショートカットキー「K」キーを押す
②角をドラッグするとテキストを拡大＆縮小できます。
8.画像を挿入する
①「Rectangle」のプルダウンにある「Place image」を選択
②自身のローカルフォルダから、画像を挿入できます。
また、画像挿入は自身のローカルフォルダからドラッグ＆ドロップで挿入することも可能です。
9.書き出す
右側のサイドバーの「Export」から、書き出しが可能です。
倍率や画像形式も変更できますので、書き出したい画像形式と倍率を選択して「Export XXXX」のボタンをクリックしてください。（XXXは、フレーム名です。フレームの名称をフレームの左上ORレイヤーから変更しておくと、ファイル名にも反映されるので事前に行っておくことをおすすめします。）
すると、ローカルフォルダが表示されるので、格納先を選んで保存できます。
また、データを共有したい時は、画面右上の「Share」ボタンより共有したい人のemailアドレスを入力して共有可能です！（編集権限・閲覧権限も選べます。こちらは料金プランとも関係するのでその上で選択ください）
まとめ
いかがでしたでしょうか。Figmaへのハードルが少しでも下がったら幸いです。
先述のように、まずは、テンプレートから初めてみるのもいいかもしれません。
プロトタイプ作成や資料作成、画像作成、ブレインストーミングなど様々な用途にお使いいただけて、UIもシンプルで使い易くて本当にいいツールなのでぜひ使ってみてください！
フェズは、「情報と商品と売場を科学し、リテール産業の新たな常識をつくる。」をミッションに掲げ、リテールメディア事業・リテールDX事業を展開しています。 fez-inc.jp/recruit
Discussion