UIデザインを設計できるデザインツールとして、近年注目を集めている「Figma(フィグマ)」。
このFigmaを使いこなすことで、Web制作におけるデザイン工程の効率化を図ることができます。
そこで、この記事ではFigmaの特長や機能、使い方や注意点などを解説します。
ぜひ参考にしてみてください。
Figmaとは？
Figmaとは、2016年9月よりサービスを開始したWebデザインツールです。
インストールが不要かつフリープランを利用すれば無料で利用可能なので、簡単に導入することができます。
ワイヤーフレームやプロトタイプの制作、スライド資料まで様々なデザインを作成することができます。
また、複数人で１つのファイルをリアルタイムで共有し編集することができるので、テレワークでやり取りを行う時やチームでの作業に適しているツールと言えます。
Figmaの特徴
具体的にはFigmaにはどのような特徴があるのでしょうか。
下記にまとめました。
特徴①複数人で共同編集できる
Figmaは複数のユーザーが同じファイルをリアルタイムで共有し、そして同時に編集できるリアルタイムコラボレーション機能が備わっています。
これにより、チームメンバー全員がファイルの進捗状況を常に確認できるので、進捗確認のコミュニケーションのロスを減らし、他メンバーの作業を把握しながら自身の作業に専念することができます。
特徴②OSやデバイス、場所に左右されずに使える
Figmaはブラウザ上で起動するため、専用アプリのインストールは不要です。そのため、WindowsやMacなどのPCは勿論、タブレットやスマートフォンなど様々なデバイスで使用することができます。
また、インターネット環境さえ整っていればアクセスできるので、オフィスだけでなく自宅やカフェなど様々な場所で作業を進めることができます。
特徴③バージョン管理が可能
Figmaでは、作成したファイルのバージョン管理を行えるため、更新履歴を遡ることで開発工程を確認することができます。
他の編集者に誤って本来変更すべきではない部分を編集された場合にも、変更履歴を追跡し、以前のバージョンに戻すことも可能です。
変更データは自動で保存されるので、作業効率の向上が図れるうえにブラウザのクラッシュなどによる予期せぬデータ消失も未然に防ぐことができます。
特徴④基本無料で利用可能
Figmaの料金プランは「Starter」「Professional」「Organization」の3種類があります。
無料のStarterプランでは、プロジェクトは最大1つまで、ファイルは最大3つまで同時に作成することができます。Fileを編集できるエディターは無制限なため、コミュニケーションは有料プランと同様に密に取ることが可能です。
個人用ファイル数は無制限である点もポイントです。
そのため、個人や小規模プロジェクトに向いているプランと言えるでしょう。
また、「Professional」は月々＄12、「Organization」は月々＄45で利用できます。
こちらはプロジェクトやファイルに制限がないため、より機能の幅が広がり、中小企業や大企業のチームプロジェクトの使用に向いていると言えるでしょう。
Figmaの機能
Figmaには様々な便利な機能があります。
以下に代表的な５つの機能を解説します。
機能①オートレイアウト
オートレイアウト機能とは、コンテンツに合わせてフレームを作成できる機能です。
指定したフレームの中に存在する要素を縦や横の単一方向へ規則的に並べるためのルールを設定でき、この設定を組み合わせることで自動的にルールに従ったレイアウトができるようになるため、コンテンツ内容に変更があってもレイアウトが崩れなくなります。
オートレイアウトを使用すると、例えば文字数が増えたためにボタンの大きさを変更したいという場合にも、自動で修正できるようになるため、作業の効率化ができます。
機能②コンポーネント
コンポーネントとは、再利用ができるＵＩの要素を指します。
コピーした要素をコンポーネント化することで、色や枠線、フォント、位置、エフェクトなどオブジェクトスタイルをまとめて適用することが可能となります。
例えば、ワイヤーフレームを作成するときに同じようなボタンやアイコンなどを毎回利用する場合に、コンポーネントを使用するとすぐに使えて便利です。
機能③カーソルチャット
カーソルチャットとは、数秒で消えるメッセージを送ることができる機能です。
スラッシュキーを押すことによりカーソル上に表示されるテキストボックス内にメッセージを入力することで、マウスカーソルから吹き出しのようにメッセージが表示されます。
ショートカットキーとしても使えるので、使い勝手も良いです。
音声でやり取りができない場合に、ファイル上でメッセージを伝える時に便利な機能です。
機能④メンション
メンション機能は特定の人に向けてコメントを残すことができる機能です。
コメントの＠の後に伝えたい人のアカウント名を入力することで、伝えたい相手に通知がいく仕組みになっています。
二度目からはコメントに＠と入力することで、最近やり取りをした共同編集者をメンション相手に提案してくれるので、アカウント名を入力する手間を省くことができます。
機能⑤ワシテープ
ワシテープとは、よいアイデアをマスキングテープのようなデザインで目立たせることができる機能です。
大事なアイデアをより目立たせたい場合やオンライン会議時などにアピールしたい部分にワシテープを利用して印をつけることで、内容をよりわかりやすく伝えることができます。
ちなみに、「ワシ」とは日本語の「和紙」が語源となっています。
Figmaの使い方
次にFigmaの導入から基本的な使い方までを順を追って解説します。
①ブラウザ版かアプリ版を選択する
Figmaを導入する際には、まずブラウザ版かアプリ版かを選びましょう。
ブラウザでもFigmaは利用できますが、操作する際には重くなってしまうことがあるため、使用するデバイスが決まっている場合にはアプリ版がおすすめです。
アプリ版を利用する際には使用しているOSのアプリケーションをダウンロードしてセットアップします。
ブラウザで利用する場合には、デフォルト設定ではローカルのフォントデータが利用できないので、「Font Installers」からフォント読み込みができるように設定しておきましょう。
②公式サイトでアカウントを作成する
Figmaを利用する際には、まずアカウントを作成する必要があります。
まずFigmaの公式HP(https://www.figma.com/ )にアクセスし、画面中央に表示される「Get started」をクリックして、Googleアカウントでのログイン、もしくはメールアドレスとパスワードを入力してアカウントを作成しましょう。
入力するとアンケートが表示されるので、名前と職業を入力しましょう。後から変更も可能です。
するとメールが届くので、「verify email」をクリックして完了できます。
③日本語を有効化する
デフォルトではGoogle Fontsが読み込まれるようになっています。
Figmaは日本語フォントに対応していないので、まずは日本語を使えるように設定しましょう。
まず左上に表示されるFigmaのロゴをクリックし、「Account Setting」を開くと登録したアカウントの設定画面が出てきます。
その後ページ下部にある「Fonts」セクションに表示される「Download installer」をクリックすると、「FigmaInstaller.pkj」がダウンロードされるので、そのパッケージをダブルクリックし、指示に従って起動することで日本語を有効化できます。
④デザインを作る
それではデザインを作ってみましょう。
画面左上のツールバーの一番左からメインメニューを選択して「New design file」を選択することで、新規ファイルを作成できます。
続いて、デザインを作成するモード「Designモード」に変更しましょう。
右側スペースの上部にあるタブメニューのうち、一番左の「Design」タブを選択することで、Designモードに切り替えることができ、ワイヤーフレームなどを作成できるようになります。
図形の配置もツールを選択するだけでできます。
右上にあるメニューの中から□の図形アイコンをクリックすることで、四角形や円、矢印や直線など様々な形状の図形を配置することができます。
また、テキストは右上のメニューから「T」のアイコンをクリックすることで入力できます。
さらに、メニューからはフォントの種類やサイズの変更や配置の調整も行えます。
⑤プロトタイプを作る
続いては、プロトタイプの作成方法をご紹介します。
プロトタイプの作成時には、プロトタイプモードに切り替える必要があります。
また先ほどと同様に新規ファイルを作成した後に、「Prototypeモード」に切り替えましょう。
プロトタイプモードでは、ページ遷移のシミュレーションも可能となっています。
矢印を使えるので、一目でわかりやすくリンクをつなげることができます。
また、この段階で閲覧するデバイスの設定や最初に表示される画面の選択も指示に従い行いましょう。
プロトタイプの動作確認を行う際には、画面の右上にある三角形のマークをクリックします。
すると、ブラウザの別画面が起動してプレビュー状態になるので、どのように動作するのかを確認していきましょう。
⑥データを出力する
Figma内で作成したものは、出力することでPCの中に保存可能です。
右側にある「Export」内の選択メニューを開き、PNG、JPG、SVG、PDFの4種類の形式の中か適したものを選び、保存場所を選択して保存しましょう。
⑦チームメンバーと共有する
FigmaはURLを伝えるだけで、制作したデザインを他の人に共有することができます。
右上にある青い「Share」ボタンをクリックします。
この際、Figmaのアカウントを持っている人と共有する場合には、閲覧のみを許可するのか、編集も可能にするのかを選択することで、権限を付与できます。
そしてFigmaに登録している相手のメールアドレスを入力し、「Send invite」を押すことで共有が完了します。
また、Figmaに登録していない人と共有する場合には、「Copy Link」を押すことでURLをコピーすることができるので、そのリンクを相手にメールなどで伝えましょう。
⑧コメントツールを使う
他の人にデザインをチェックしてもらう際には、コメントツールを利用することでより円滑にコミュニケーションを取ることができます。
コメントを付ける際には、ツールバー上部の右側にあるコメントツールをクリックし、画面上のコメントを付けたい箇所をクリックして文字を入力することで、コメントを付けられます。
コメントが投稿された箇所にはユーザーのアイコンマークが表示されるので、誰がコメントを付けたのかが視覚的にわかりやすいです。
また、付けられたコメントには返信もできます。チャットだけでなくスタンプなどを利用して簡単な返信をすることも可能であるうえに、コメントは右側にスレッドとして残るので非常に見やすいです。
⑨データをPDF化する
データをクライアントへと送る際には、Chatworkやメール添付などの手段ですぐに送れるようにPDF化すると便利です。
PDF化する際には、右側のメニューの「EXPORT」から「PDF」を選択し、出力するページと保存場所を選択しましょう。
Figmaの注意点
Figmaは利用するうえでいくつか注意すべきポイントがあります。
下記にて紹介していきます。
注意点①日本語への対応が不十分
Figmaはアメリカで開発されたツールであり、日本語への対応が不十分であるというデメリットもあります。
日本語を使用できるように設定すること自体はできるものの、デフォルトで入っている日本語はあまりないので使いづらいと感じる方もいるでしょう。
しかし、2022年に「Figma Japan」が開設されたことにより、デフォルトで入っている日本語や日本語の解説も増えてきており、以前よりも使いやすくなっています。
今後はさらに改善が進み、日本人により使いやすいような環境になることが期待されます。
注意点②Adobe製品と連携できない
Adobe製品には、デザイン業界で最も多く使われているソフトであるイラストレーターやフォトショップなどがあり、Figmaと併用使いしたいという方も多いでしょう。
しかし、FigmaはAdobe製品と連携できないために、併用するときにはイラストレーターで作成した画像をコピーしてFigmaにペーストする必要があるなど、ある程度の工程を挟む必要があります。
【まとめ】Figmaを使ってみましょう
いかがだったでしょうか。
この記事では、Figmaの説明や基本的な使い方についてご紹介しました。
Figmaは便利ツールなので、導入することで作業の効率化を図ることができます。
無料で直感的に使うことができるので、チームでデザイン制作を行う際にはぜひ使ってみてはいかがでしょうか。
