UI/UXデザイン
Figmaは2016年の9月末にリリースされたデザインツールの1つで、UIデザインやワイヤーフレーム作成に便利です。
リアルタイムの同時編集ができるので作業を効率化するだけでなく、初心者にも簡単で直感的な操作性で注目を集めています。Webデザインをより効率的に行うために、新しいデザインツールFigmaについて詳しくご紹介していきます。
初心者でも簡単に使えるFigmaの使い方やメリット、デメリットを解説しているので、ぜひ参考にしてみてください。
文系出身・未経験でIT業界に入り、システムエンジニアとしてモバイルアプリ開発を経験。初心者でもわかりやすいような記事を心掛けています。 最近はマーケティング、Webデザインの勉強中。
Figmaとは
Figmaとは、ブラウザ上で簡単にデザインができるツールです。ブラウザが起動すれば場所を問わずデザインができ、チーム内での同時編集も可能なので利便性の高いデザインツールとして人気です。フリープランは無料で使えるため、初心者でも抵抗なく簡単に導入できます。
また、FigmaにはホワイトボードツールのFigjamやスライド作成ツールのFigma slide、デザインの自動作成ができるFigma AIなど利便性の高い機能が備わっています。
デザインの業務効率アップやチーム内のコミュニケーションも円滑に進められるので、おすすめのデザインツールです。早速Figmaの機能について解説していきます。
Figma Design
Figmaは、Webサイトやアプリのワイヤーフレーム、UIを作成できる利便性の高いWebデザインツールです。Figmaを使うと、コミュニケーションをとりながらリアルタイムの共同作業が可能なため、無駄な工数を減らし、効率的に作業が進められます。
また、骨組みとなるワイヤーフレームの作成、ページ遷移のアニメーションやボタン押下の動きをつけるプロトタイプの作成など、複数の機能をFigmaで作成できます。
Fig Jam
Fig Jamとは、2021年に発表された新機能のホワイトボードツールを指し、チームで共同制作をする上で情報を円滑に共有するためのものです。
Fig Jamは、従来通りの手書き機能や付箋の貼り付け機能に加え、情報の保存や検索機能が追加された利便性の高いホワイトボードです。ミーティングをする際に、図形を使って可視化しながら考えをまとめられるので、情報整理におすすめです。
さらに、Figmaと連携できるため、Web開発を円滑に進められる特徴があります。
Figma Slide
Figma Slideとは、プレゼンテーション作成ツールとして2024年に発表された新機能です。
Figmaの設計ツールとプレゼンテーション機能を融合したもので、複数のテンプレートが用意されており簡単にプレゼンテーションを作成できます。また、Figma同様に共有したプレゼンテーションは共同で作業が可能です。
Figmaの特徴
Figmaには、大きく分けて6つの特徴があります。デザインツールを使う上で、非常に便利な機能が備わっており、かつ初心者でも簡単に使える操作性となっています。Figmaの特徴を1つずつ詳しく解説していくので、ぜひ参考にしてください。
ブラウザからカンタン操作
Figmaは、ブラウザさえ起動していればどこでも利用可能なデザインツールです。Figmaにアクセスし、ログインをすればデザインができるため、特別なソフトウェアのインストールも必要ありません。
また、OSの縛りがなくWindows、Macで操作できるほか、デスクトップやスマートフォンなど様々なデバイスでも利用可能です。
さらに、作成したデータはクラウド上に自動保存され、複数のデバイスで使用しても同期がとれるため、常に最新のデータを確認することができます。
デザインがそのままコーディングへ変換される
Figmaでは、作成したデザインから簡単にコーディングに必要な情報を取得でき、デザイナーとエンジニアの摩擦がなくなり、スピーディーに作業が進められます。
一般的には提供されたデザインデータを基にコーディングをしますが、Figmaの場合はFigmaのデザインデータ（Figデータ）からコーディングをします。コーディングが必要な対象のテキストや要素を選択すると、右側のサイドバーから簡単にCSSを取得できます。
また、書き出したい画像がある場合も、倍率と形式を選択するだけで簡単に画像の書き出しが可能です。（複数枚同時に書き出しも可能）
さらにFigmaには、開発者に特化したインターフェースであるDev Mode（開発モード）を備えています。
Dev Mode（開発モード）では、デザインがそのままコーディングへ変換されるため、コピーするだけでコーディングの手間を省くことができます。
開発者はDev Mode（開発モード）とデザインモードを切り替えて作業が可能で、どのアセットが開発準備完了しているのか確認したり、デザインの変更内容を比較したりできるため、開発者にとってスムーズにコーディングできる環境が整っています。
複数のユーザーがリアルタイムに編集できる
Figmaで作成したデザインデータのリンクを共有すると、複数のユーザーがリアルタイムで共同編集が可能になります。共有する場合、「閲覧」もしくは「編集」の権限を付与できるため、誤って第三者が編集してしまうことを防げます。また、セキュリティの観点でも、「ユーザー全員」もしくは「招待された人のみ」を選択できるので、安心して共有できます。
- まずは共有したいデザインファイルの右上「共有」ボタンをクリックします。
- 権限を変更する場合は、アクセス権限を持つユーザーの「全員」をクリックして変更に進みます。変更の必要がない場合は、そのまま「リンクをコピー」して共有すれと共同編集ができます。
- アクセス権限を変更する場合は、アクセス可能なユーザーの「ユーザー全員」をクリックし、「ユーザー全員」もしくは「招待された人のみ」を選択します。また、閲覧/編集の権限付与も同時に行えます。（無料のフリープランは閲覧権限のみ）
独自のAI機能（Figma AI）が利用できる
Figma AIとは、デザイン作成をAIを使うことで自動化できる機能です。テキストで指示を入力すると自動的にデザインを作成してくれます。
また、プロトタイプもワンクリックで作成してくれるため、時間を大幅に節約し効率的です。Figma AIはベータ版（正式版リリース前の開発途上のテスト版）に限定されますが、無料で使えるのでぜひお試しください。
日本語でのUIをサポートしている
Figmaは2022年に日本語版がリリースされました。Figma製品自体の日本語対応だけでなく、公式サイトやヘルプセンターも日本語対応可能です。
また、東京にオフィスも構えているため、万が一の時にも日本語で対応ができるため、安心してFigmaをご利用いただけます。詳しい概要を知りたい方は公式サイトをご覧ください。
FigmaとFigJam 日本語版が遂に登場!🎉
本日よりFigmaとFigJamを日本語でご利用できます。
プロダクトだけではなくヘルプセンターもローカライズしました。💻🇯🇵
それと共に日本のコミュニティーをより良くサポートできるために東京🗼オフィスも開設します！
詳細はこちら👉 https://t.co/AHpMHzsbNl pic.twitter.com/ict7zLByP8— Figma Japan (@FigmaJapan) July 27, 2022
Figmaの使い方
Figmaの使い方をご紹介します。初心者でも簡単に使える直感的なUIになっており、インターネットがあればすぐにブラウザから始められます。
アカウントは無料で作成でき、フリープランを使えばデザイン作成も無料です。まずはアカウントを作成し、ログインから始めましょう。
Figmaのアカウント作成しログインする
- はじめにFigmaのWebサイトにアクセスし、右上の「無料で始める」からアカウントを作成します。
- メールアドレスとパスワードを入力してアカウントを作成します。
- 入力したメールアドレスにメールが届くので、届いたメールから「メールを確認する」をクリックします。メールアドレスの確認ができると、Figmaの画面に遷移します。
- Figmaに遷移したら、続いてFigmaの設定を行います。名前の入力や質問事項に答えいきます。
- 最後にプランの選択です。無料で使える「スターター」プランを選択しましょう。
- Figmaのデザインをすぐに始める場合は「Figmaを使ったデザイン」を選択します。すぐにデザインを始めず、設定を完了させる場合は「スキップ」を選択して設定を完了させます。
- 以下の画面に遷移したらアカウントの作成完了です。
settingからLanguageを日本語に変更する
Figmaのアカウント作成が完了したら、設定から言語を日本語に変更します。
設定言語が英語になっている場合、左上のアカウント「Settings」から日本語に変更が可能です。
Settingsをクリックすると設定ウィンドウが立ち上がるので、Languageの「Change language」から「日本語」を選択して保存します。これでFigmaの日本語設定は完了です。
デザインファイルを作成する
設定が完了したら、早速デザインに進みます。「デザインファイルを新規作成」をクリックすると、デザインを作成するデザインファイルに遷移します。
作成したデザインは「共有」からリンクをコピーして共有するだけで、第三者でもデザインの閲覧や編集が可能になります。
編集を開始する
デザインファイルを作成したら、Figmaでデザインを作成・編集ができます。Figmaには簡単に作成ができる無料のワイヤーフレームのテンプレートやプラグインが用意されています。
また、コーディングする前に必要なプロトタイプ制作もデザインファイルの画面から可能です。Figmaを使うことで業務の作業効率化ができるだけでなく、デザイナーとエンジニアのコミュニケーションが円滑になり、認識の齟齬や摩擦を減らすことができます。
Figmaの基本操作
Figmaの基本操作を解説します。
Figmaの使い方は非常にシンプルで、初心者でも直感的に操作ができるため簡単にデザイン制作ができます。それでは、Figmaの機能について操作方法を見ていきましょう。
フレーム
フレームには2つの役割があり、1つ目は全体のサイズを決める「アートボード」の役割、2つ目は要素の配置を自動配列する「オートレイアウト」の役割を持ちます。
左上のツールバーから「フレーム」を選択し、ドラッグで作成したいサイズのフレームを作成できます。サイズの変更は右側のサイドバーから可能です。
また、デザインする対象が決まっている場合は、サイドバーの「フレーム」をクリックすると、iPhoneやAndroid、Twitter投稿などの規定サイズのフレームを自動作成できます。
オートレイアウト機能を使う場合は、親フレームとなるフレームの中にオブジェクトを複数作成し、親フレームにオートレイアウトをすると、フレーム内に配置していたオブジェクトが自動配列されます。
配置の向きや間隔は右側のサイドバーから調整できます。
制約
Figmaには制約と呼ばれる機能があります。制約とは、フレーム内の要素の位置やサイズがフレームのサイズ変更に応じてどのように変化させるかを決めることです。
コンポーネント
FigmaのコンポーネントとはUI要素をまとめたもので、再利用することでデザインの一貫性を担保します。
コンポーネントを作成して、そのコンポーネントをコピーして使うと、親のコンポーネントの色やテキストなどのスタイルを変更しても、子コンポーネント（インスタンス）に引き継がれます。
後から修正が必要になった場合、親コンポーネントを修正すればコピーした子コンポーネント（インスタンス）に一括で反映されるので、修正の手間が省けます。
スタイル
Figmaのスタイル機能は、あらかじめ作成したデザインの色やフォントを管理し、別のオブジェクトに同じスタイルを適用させることができます。テキストやカラー、効果などは、後からでも同じスタイルに変更が可能です。
テキストにスタイル機能を使用する場合、サイドバーの「＋」からスタイルを作成して、後から別のテキストに対しても同じフォント、サイズ、カラーを適用できます。
スマートセレクション
スマートセレクション機能はFigmaの独自機能で、複数のオブジェクトを選択して個々のオブジェクトの順番を変更したり間隔を調整したりする機能を指します。
修正する際に非常に便利な機能で、手間なく簡単に修正できます。
エクスポート
Figmaで作成したデザインは、画像やPDFとしてエクスポートができます。
エクスポートは、「オブジェクト」「グループ」「レイヤー」「フレーム」単位で自由に選択できるので、エクスポートしたい対象を選択してエクスポートに進みます。
プレビューモード
Figmaで作成したデザインをプレビューモードにすることで、実際の挙動を確認することができます。
プロトタイプを作成し「▶」をクリックすると、ボタンを押下したときの挙動や画面遷移を見ることができるので、開発に進む前にデザイナーとエンジニアの認識のずれをなくし、効率的にコーディングへ進めることができます。
プロトタイプ機能
プロトタイプ機能とは、作成したデザインにフローをつけることで、ユーザーテストやフィードバックに役立てることができます。
共有・コメント機能
Figmaで作成したデザインを共有したり、コメントをつけたりして、デザイナーやエンジニアなど複数人でデザインの確認やコミュニケーションをとることができます。
共有は右上の「共有」をクリックすると権限の設定ができるので、設定を完了してからリンクをコピーして共有します。
コメント機能は、ツールバーからコメントツールを選択し、コメントをつけたい場所でクリックしてコメントを記入します。
コメント機能は知らせたい相手にメンションして通知したり、コメントに対して返信したりできる便利機能です。コメントの内容が完了したら解決済みにしてアーカイブもできます。（履歴は残るので後から確認可能）
Figma AI
Figma AIとは、Figma上で作成するデザインを自動化できる機能です。
Figma AIは手軽に導入できるだけでなく、手間のかかる工程を自動化することで省くことができるため、大幅に作業効率をアップできます。
ビジュアル検索
Figma AIには、ビジュアル検索機能があり、画像をアップロードするだけで、ほかのメンバーが作成したデザインの中から、一致する画像もしくは似た画像を見つけられます。ビジュアル検索を使うと、必要なデザインをすぐに発見でき、デザインの再利用が可能になります。
レイヤー名を自動で変更
https://www.figma.com/ja-jp/blog/introducing-figma-ai/
複雑なデザインを作成すると、その分レイヤーも増えていき、レイヤー名の変更に大幅に時間を費やします。
Figma AIを使えば、ワンクリックでレイヤー名をコンテキストに応じたタイトルに自動変更ができます。単調な作業ですが、複雑なデザインほど時間のかかる作業なので、Figma AIを有効的に使いましょう。
テキストの自動作成・修正・翻訳
Figma AIは、ワンクリックでテキストの自動生成・修正・翻訳ができます。
わざわざ検索やコピーを繰り返さなくても、Figma内で生成や修正、翻訳までできるため、雑務を減らしより迅速に完成まで到達できるようになります。
背景削除
Figma AIを使うことで、ワンクリックで背景を削除できます。手動で範囲選択をして背景削除をする必要がないので、手軽で抵抗なく行えます。
Figmaの利用料金
Figmaの料金プランのご紹介です。
Figmaには4つの料金プランが用意されており、誰でも無料で使えるフリープランもあります。プランによって使える機能は異なりますが、無料でもFigmaでデザインの作成ができるので、初心者の方はフリープランから始めてみましょう。
料金プランについて詳しく解説していきます。
スターターチーム
Figmaのスターターチームは無料で使えるフリープランです。スターターチームプランでは、Figmaのエディタでデザインが作成できるだけでなく、ファイルストレージが無制限で、プラグインの使用も可能です。閲覧者数も無制限なので、リンクを共有して複数人でデザインの確認ができます。
無料で使える機能が豊富ですが、開発モードの使用やリンクのパスワード保護は有料版からになるのでご注意ください。
プロフェッショナルチーム
プロフェッショナルチームのプランは、スターターチームの機能に加えて、開発モードや管理・セキュリティ機能が使えます。スターターチームでは制限がついているファイル数も無制限で作成が可能です。
ビジネス
ビジネスプランはチーム数を無制限で使えるため、多くのメンバーで利用するような大企業におすすめです。
また、プロフェッショナルチームに比べて、セキュリティ機能が大幅に良くなるので、機密性の高い情報管理ができます。
エンタープライズ
エンタープライズは他の料金プランとは異なり、Figmaの専門チームと連携して業務を進められます。
専門チームからサポートやアドバイスをもらえるので、高いセキュリティとデザインシステムの構築に最適です。
Figmaのメリット
デザインを作成するうえでFigmaを使うメリットは多くあります。その中でも、以下の3つが特にメリットとして挙げられます。順番に見ていきましょう。
- 無料でもデザイン機能を幅広く利用可能
- バージョン管理が簡単にできる
- デザインシステムの統一が簡単
無料でもデザイン機能を幅広く利用可能
Figmaには無料で使えるスタータープランが用意されています。
無料のプランのため制限もありますが、かなりデザイン機能を幅広く利用可能です。基本的に必要なデザインツールを使用できるだけでなく、個人用ドラフト数は無制限です。
また、無料で使えるフレームワークやプロトタイピング機能もあるので、デザインをしたことがない初心者にもおすすめなツールです。
バージョン管理が簡単にできる
Figmaにはバージョン管理機能が備わっているので、開発工程の履歴をさかのぼって過去のバージョンを確認できます。
過去のバージョンと最新のバージョンを比較することで、円滑に開発を進められます。また、Figma上で作成したデザインデータは自動保存されるため、データを失うこともありません。
デザインシステムの統一が簡単
デザインシステムとは、一貫性を保ったままユーザーエクスペリエンスを提供するためのガイドラインを指します。
デザインシステムにはコンポーネントやスタイル、パターン、ドキュメントを含みます。
デザインシステムをFigmaのライブラリ機能を使って公開し、チーム全体に共有すると、チームメンバー間で共通認識を持てるので、認識のずれを防ぐことが可能です。
Figmaのデメリット
Figmaのデメリットについて解説していきます。
- フリープランだとバージョン管理の保管が30日間
- オフラインで使用できない
- 動作が遅くなることがある
フリープランだとバージョンの保管が30日間
Figmaの無料で使えるフリープランは、バージョン管理ができる一方で保管期間が30日間に限定されます。
バージョンを確認しながらデザインや開発を進めていく場合、フリープランだと30日以前のバージョンが確認できないので注意しましょう。
オフラインで使用できない
Figmaはインターネット環境が整った中で、ブラウザ上で作業が可能なため、オフラインで使用ができません。
ただ、Figmaのアプリ版であればオフライン環境でも安定して動作するので、オフラインでFigmaを使用したい場合はインストールをしましょう。Windowsやmac、モバイルアプリもインストールできます。
動作が遅くなることがある
Figmaファイル内のページやオブジェクトが増え続けると、重くなり動作が遅くなることがあります。
これはFigmaにメモリー使用量の制限があるためです。動作を遅くしないためにも、画像データの軽量化や不要な非表示レイヤーの削除などで対策をしましょう。
現在のメモリー使用量の確認は各デザインファイル内から確認できます。
左上のFigmaアイコンをクリックし、「表示」「メモリー使用率」から確認してみましょう。
Figmaと似ているデザインツール
デザインツールはFigma以外にも数多くありますが、その中でFigmaと似ているデザインツールを4つご紹介します。Figmaと比較して、他デザインツールの特徴を解説していきます。
| ツール | 料金プラン/月 | 特徴 |
| Figma | 無料～11,250円 | ・リアルタイムの共同編集が可能
・ブラウザ上で動作 ・デザインからそのままコーディング ・AI機能 ・日本語でのサポート |
| Sketch | ＄10～＄120 | ・Macユーザー限定
・プラグインが豊富 ・使いやすいUIで操作が簡単 |
| Adobe XD | 7,780円 | ・Adobe製品との連携が簡単
・Adobeユーザーが学習コストが低い ・ソフトのインストールが必要（有料） |
| Framer | 無料～4,153円 | ・リアルタイムの共同編集が可能
・ブラウザ上で動作 ・Reactコードでコンポーネントの作成ができる |
| Miro | 無料～＄16 | ・オンラインホワイトボードツール
・テンプレートが豊富 ・ZOOMやTeamsなど複数サービスとの連携が可能 |
Sketch
Sketchは、初めてリリースされたUIデザインツールです。操作が簡単で動作も軽く、プラグインが豊富に用意されています。
ですが、SketchはMacユーザーに限定されてしまい、Windowsユーザーは使うことができません。
チーム内にWindowsを使っている方がいる場合は、Figmaの導入を検討してみましょう。Figmaにも多くのプラグインが用意されているので、Sketchで使っていた同様のプラグインを探せます。
また、SketchのファイルをFigmaにインポートするだけで簡単に移行もできます。
Adobe XD
Adobe XDはAdobe製品のUIデザインに特化したプロトタイピングツールです。
IllustratorやPhotoshopなどAdobe製品との互換性が高いため、連携をすることで無駄な手間を省き、円滑に作業を進められます。
また、Adobe製品のUIに使い慣れている方は、新たに操作方法を学ぶコストが省けるのでおすすめです。ただ、Adobe製品は有料プラン「Creative Cloudコンプリートプラン」を契約し、ソフトをインストールする必要があるので注意しましょう。
Framer
Framerは、Figma同様にブラウザ上で動作し、リアルタイムの共同編集ができるUIデザインツールです。
大きな特徴としては、Reactコードでコンポーネントが作れることです。コーディングができる方は、Framerを使うことで表現の幅が広がります。
また、FramerはSketchやFigmaのデザインファイルをインポートしてFramer上でデザインを編集することも可能です。手間のかかる移行もFramerなら簡単に済ませることができます。
Miro
Miroとは、オンラインホワイトボードツールです。
FigmaのFigjam機能に当たります。Miroは豊富なテンプレートが用意されているだけでなく、多様なワークフローにも適したツールです。また、情報の一元管理ができ、高いセキュリティ機能もあります。
FigjamをインポートしてMiroで編集も可能なので、使いやすいツールといえるでしょう。
Miro
Figmaのまとめ
Figmaの使い方や特徴、メリット・デメリットについて詳しく解説しました。デザインツールが複数ある中でもFigmaは、ブラウザ上で簡単に操作できるだけでなく、複数人でリアルタイムの共同編集ができます。
また、デザインをそのままコーディングできる機能やFigma AI機能による自動化で、業務効率化を目指せます。
Figmaでデザインを作成し、それをJiteraにインポートするだけで、AIが自動的にアプリ開発をサポートしてくれます。デザインからコードへの変換を手動で行う必要がなく、開発の効率が飛躍的に向上します。
Figmaで視覚的にデザインしたものが、瞬時に実用的なアプリへと変換されるため、スタートアップや中小企業にとって最適なソリューションになるでしょう。
開発期間や開発コストの削減だけでなく、お客様のニーズに沿って高品質・短納期を実現します。お困りごとがありましたら、お気軽に株式会社Jiteraへお問い合わせください。
