初心者にもおすすめのデザインツール！Figmaの使い方をご紹介

1.大手企業も利用中！Figmaとは

FigmaはUIデザインの設計等に使える便利なクラウドツールです。海外発のツールですが日本でも利用者が広まっており、大手企業も続々とFigmaを使いデザイン制作を行っています。

デザイン制作に使えるツールはいろいろありますが、初心者には敷居の高い機能が複数搭載されているものもあります。その点Figmaは直感的にドラッグ＆ドロップなどでデザインを完成させられるので、デザイナーの作業時間短縮や初心者のデザイン制作などに役立てられているのがポイントです。

ちなみにFigmaには下記のようなプランが用意されています。

• スターター：無料
• Figmaプロフェッショナル：月額15ドル、年額12ドル
• Figmaビジネス：月額換算45ドル（年額のみ、月額なし）

無料は誰でもすぐアカウントを発行して利用可能です。FigmaファイルとFigJamファイルを、それぞれ3つまで利用可能になっています。個人用ファイル数は無制限です。

またFigmaプロフェッショナルでは、Figmaファイル数が無制限になっているのでより使いやすくなっています。権限の共有や音声会話なども可能であり、テレワーク等に活用できるのがメリットです。

さらに上位プランのFigmaビジネスでは、組織全体のライブラリ管理や管理・請求の一元化機能などよりデザイン工程を一元化できるような機能が複数搭載されています。シングルサインオンにも対応しています。

気になる方は、まず無期限で無料利用ができるスタータープランから利用してみてください。

2.Figmaの特徴！メリット・デメリットを解説

続いてはFigmaの特徴を解説していきます。

Figmaのメリット

Figmaには次のメリットがあります。

ワイヤーフレーム・プロトタイプを簡単に作成できる

デザイン制作におけるワイヤーフレームやプロトタイプを、Figmaでならば短時間で作成可能です。

まずワイヤーフレームとは基本的に、画像や文字の配置イメージや全体のデザインレイアウトを共有するための図です。そこから実際に動き等を検証できるように画像等をはめ込んだプロトタイプを作っていきますが、Figmaには

• デスクトップやスマートフォンに合わせたテンプレートの選択
• 図形描画
• テキスト成型
• アニメーションの作成

といった各機能が搭載されています。

これによってワイヤーフレーム・プロトタイプの作成を一括で行って関係者に見せることが可能です。

作業の共有が簡単にできる

Figmaはクラウドツールなので、共有に便利な機能が複数搭載されています。

たとえばデザインの作成は複数人で同時ログインして行うことが可能です。当然やり取りをしながらリアルタイムで作業を終わらせることができます。

さらに共同作業を便利にするためのオンラインホワイトボード、「FigJam」も利用可能です。FigJam では図表や質問などを入力することでメンバー間へ内容を素早く共有、アイデアを整理しながら作業を進めることが可能になります。さらにFigmaとも連動しており、シームレスに移動することでアイデア出しやその実装をすぐ済ませることができます。

ちなみにFigJamファイルへ招待された他の方は、Figmaアカウントを持っていなくてもよいので面倒なくミーティング等へ参加可能です。

バージョン管理が可能

デザイン作成においては、「変更した後の見た目がやはりよくなかったのでバックしてやり直したい」といった需要が存在します。しかしデータを上書きしているとバージョンをバックさせることはできません。また複数ファイルを都度作成してバージョンを残すのも面倒です。

Figmaでは各ファイルのバージョンを、30分ごとに自動作成して保存する仕組みを採用しています。過去バージョンの反映を、WordPressのように簡単に実行できるのがメリットです。

また無料プランではバージョンの保存期間が30日間ですが、上位プランへすると無期限になるので便利です。長期間Figmaを使うのが前提になっておりその上でクライアントとのデザイン調整データを残しておきたい場合は、上位プランへ移行しておきましょう。

さまざまなデザインを作成可能

Figmaで作成できるのは、ワイヤーフレーム・プロトタイプだけではありません。

• SNSへの投稿画像
• Web広告
• プレゼン資料

などさまざまなデザインを一括で作成することができます。

デザイン作業が多岐に渡る場合も、Figmaへツールを一括化することで作業効率化へつながるでしょう。

Figmaのデメリット

Figmaのデメリットは次の通りです。

日本語へ完全対応していない

競合のデザインツールには日本語へ完全対応しているものもありますが、Figmaの場合海外発なので完全に日本語へ対応していません。そのため文献が読みにくい個所がある、他のツールと比較して問題解決の資料が少ないといった問題が考えられます。

といっても日本法人もすでに設立されており、日本語完全対応への布石はすでに打ってあります。すでに公式サイトが日本語で読めるようになっていたりと対応はある程度していますが、将来的には言語面での不便はさらになくなるかもしれません。

Webブラウザーで作業すると重くなることがある

FigmaでWebブラウザーを使って作業している場合、少しばかり挙動が重くなることがあります。クラウドツールは一貫してWebブラウザー上で重くなることがあるデメリットを抱えていますが、Figmaも例外ではありません。

気になる方はデスクトップアプリやスマートフォンアプリなども使って作業してみてください。

3.Figmaの使い方！登録手順などをご紹介

ここからはFigmaの使い方をご紹介していきます。

1. Figma公式サイトの「サインアップ」などをクリック・タップする
2. Googleアカウントまたはメールアドレスからログイン方法を選択
3. アカウント情報入力後サインインしてチーム情報を入力する
4. 無料プランから有料プランかを選択
5. テンプレートを選択する、あるいはスキップする
6. ダッシュボードから好きなフォーマットを選択して新規作成を行う
7. 作業を開始する

最初のアカウント登録やテンプレート選択などは、説明が出てくるので好きな情報を入力あるいは選択して次のステップへ進めるだけです。早ければ1分もせずにアカウント作成完了からログインまで進めます。

作業開始時は、ファイルの上部にある黒いツールバーや両側のサイドバーなどの機能を使ってレイアウト調整やデザイン作成を行っていきます。慣れるためにもテストで1回簡単なデザインを作ると安心です。

レイヤーやグループといったデザイン単語を知らない場合は、事前に概要を理解しておくとよりスムーズに作業慣れすることができるでしょう。

4.まとめ

今回はFigmaの概要やメリット・デメリット、そして基本的な使い方などをご紹介してきました。

Figmaを使うとワイヤーフレーム・プロトタイプやSNS投稿用画像などを簡単に作成可能です。クラウドツールとして共有機能も充実しているFigmaを使い、ぜひUIデザインを作成してみてください。

気に入った方はスターターから上位の有料プランにして、無期限のバージョン保管機能などを活用して作業を進めてみてください。