【初心者向け】Figmaの使い方を解説！Webデザインツールについて詳しく。

※本ページはプロモーションが含まれています

こちらの記事では、WebデザインツールFigma（フィグマ）について初心者向けに解説しています。

Figmaの使い方について詳しく知りたい方は、参考にしてください。

WebデザインツールFigmaとは？

Figmaとは、ブラウザ上で簡単にデザインができるツールです。

使い心地としては、パワーポイントをよりデザイン制作寄りにしたイメージです。

ブラウザを起動できれば場所を選ばずに使用することができ、複数人で同時に編集することができるため多くの人に利用されています。

UIデザイナーが必要とする多くの機能を備えており、Figmaを利用することで、従来の制作と比較して工数を抑えることが可能になります。

デザイナーだけでなく、エンジニアやWebディレクター、ちょっとしたチラシや広告を作成したい人にもおすすめのツールです。

また、2022年7月27日には日本語版がリリースされ、完全日本語対応になったことでも注目を集めています。

[box class=”box29″ title=”合わせて読みたい”]

• 【速報】Figmaの日本語版がリリース！日本語に切り替える方法を解説！

[/box]

Figmaのメリット・できること

Figmaのメリット・できることとして、以下の点が挙げられます。

[list class=”li-mainbdr strong”]

• 操作する場所を選ばない
• 共同編集ができる
• 操作がシンプルで動作が軽い
• データの共有が簡単

[/list]

それぞれ解説します。

操作する場所を選ばない

先程も記載しましたが、Figma はブラウザを起動できればどこでも利用できます。

作業の場所を選ばないため、どこでも好きな場所で作業できます。

リアルタイムで共同編集ができる

Figmaはリアルタイムで共同編集ができます。

話し合いながらデザインすることが容易になり、リモート作業でも効率的に作業することができます。

データの共有が簡単

Figmaは、データを共有するときの面倒な作業も不要です。

URLを送信するだけで簡単に共有できるため、無駄な確認コストをなくすことができます。

操作がシンプルで動作が軽い

Figmaはとにかく動作が軽いです。

作業中もストレスを感じることなく作業することができます。

Figamのデメリット・できないこと

Figmaのデメリット・できないこととして、以下の点が挙げられます。

[list class=”li-mainbdr strong”]

• 日本語フォントが少ない
• Adobe製品との相性が悪い

[/list]

それぞれ解説します。

日本語フォントが少ない

現状、Figmaは対応している日本語フォントが少ないです。

今後追加されることに期待です。

Adobe製品と相性が悪い

Figmaにはイラストレータやフォトショップとの連携機能がありません。

そのため、Adobe製品の使用が必須となっている企業で業務を行う際には注意が必要です。

Figmaの料金はいくらかかる？

Figmaの料金プランはStarter・Professional・Organizationの3つのプランに分けられます。

各プランの料金につきましては、以下の表を参考にしてください。

Figmaの料金プランについて詳しく知りたい方は、以下の記事を参考にしてください。

[box class=”box29″ title=”合わせて読みたい”]

• 【2022年】Figmaの料金プランを解説！無料プランと有料プランの違いは？

[/box]

Figmaの使い方｜アカウント作成～画面構成の説明

こちらの章では、Figmaの使い方を初心者向けに画像付きで解説します。

Figmaは無料で利用できますので、興味のある方は実際に使ってみることをおすすめします。

ログインアカウントの作成

Figmaを利用する際にはログインアカウントが必要になります。

以下の手順を参考にFigmaのログインアカウントを作成してください。

[timeline]

[tl label=’STEP.1′ title=’Figma公式サイトにアクセス。’]

[/tl]

[tl label=’STEP.2′ title=’「Try Figma for free」をクリック。’]

[/tl]

[tl label=’STEP.3′ title=’登録情報を入力。’]

Googleアカウントでも登録ができます。

[/tl]

[tl label=’STEP.4′ title=’画像の画面になれば完了。’]

[/tl]

[/timeline]

デスクトップアプリのダウンロード

次に、デスクトップアプリをダウンロードしましょう。

[timeline]

[tl label=’STEP.1′ title=’デスクトップアプリのダウンロード’]

WindowsかMacを選択。

今回は、Windowsを選択します。

[/tl]

[tl label=’STEP.2′ title=’Open the desktop app」をクリック。’]

[/tl]

[tl label=’STEP.3′ title=’ダウンロードできたら完了。’]

「New design file」からデザインを作成できます。

[/tl]

[/timeline]

画面構成の説明

次に画面構成の説明をします。

Figmaの画面は以下の要素で構成されます。

[list class=”li-mainbdr strong”]

• デザイン画面
• ツール
• レイヤー
• プロパティ

[/list]

それぞれの要素について解説します。

デザイン画面

デザイン画面は主な作業スペースになります。

「フレーム」と呼ばれるアートボードを追加してデザインを作成します。

ツール

ツールにはデザインを作る際に使うツールが並んでいます。

ツールには以下の種類があります。

[list class=”li-mainbdr strong”]

• メニュー
• 選択ツール
• フレームツール
• 図形ツール
• ペンツール
• テキストツール
• 手のひらツール
• コメントツール

[/list]

レイヤー

レイヤーではオブジェクトの構造を管理します。

プロパティ

プロパティではオブジェクトの設定を細かく指定できます。

Figmaの使い方｜フレームの作成～ファイルの書き出し

Figmaの基礎情報を理解したら、実際にデザインを作成してみましょう！

フレームの作成

コンテンツを作成するためには、まずフレームを作成します。

[timeline]

[tl label=’STEP.1′ title=’「ファイル」から「新規作成」を選択。’]

[/tl]

[tl label=’STEP.2′ title=’「F」をクリックしてフレームサイズを選択。’]

iPhone・タブレット・デスクトップといった様々な種類から選択することができます。

今回はデスクトップを選択します。

＊Figmaではフレームなどを使用するとき、直接クリックして使用することもできますが、ショートカットを活用することで効率的に作業ができます。

▶本当によく使うFigmaの便利ショートカット厳選36個まとめ

選択すると「Desktop」のフレームが作成されました。

[/tl]

[tl label=’STEP.3′ title=’ツールバーからデザイン’]

ツールバーには以下のツールがあります。

[list class=”li-mainbdr strong”]

• メニュー
• 選択ツール
• フレームツール
• 図形ツール
• ペンツール
• テキストツール
• 手のひらツール
• コメントツール

[/list]

[/tl]

[/timeline]

コンテンツを作成

実際にコンテンツを作成してみましょう！

[timeline]

[tl label=’STEP.1′ title=’ツールバーから長方形を追加。’]

今回は長方形ツールを選択してコンテンツを作成します。

[/tl]

[tl label=’STEP.2′ title=’色の変更は「塗り」から色の変更。’]

[/tl]

[tl label=’STEP.3′ title=’背景に画像を追加する。’]

長方形ツールは、背景に画像を利用することができます。

プラグインを活用することで簡単に画像を追加できますので、今回はプラグインを利用します。

長方形のフレーム全体を選択し、右クリックから「プラグインを探す」を選択しましょう。

[/tl]

[tl label=’STEP.4′ title=’プラグインをインストールする。’]

Figmaは、プラグインを活用して機能を拡張できます。

最適なプラグインを追加してFigmaをカスタマイズしましょう。

[open title=’おすすめプラグイン’]

[/open]

今回は「Photos」を利用します。

画面上部から「Plugins」を選択し、検索窓から「Photos」と検索してください。

「instal」をクリックしてPhotosをインストールしましょう。

[/tl]

[tl label=’STEP.5′ title=’編集画面に戻り「Photos」を選択。’]

[/tl]

[tl label=’STEP.6′ title=’お好みの画像を探す。’]

今回は「City」から画像を選択します。

背景が画像に変更されました。

[/tl]

[tl label=’STEP.7′ title=’テキストを入力する。’]

テキストは「T」をクリックすることで入力できます。

[/tl]

[/timeline]

プロトタイプの作成

次にプロトタイプの解説をします。

プロトタイプとは、作成したコンテンツの試作品を確認できるデモンストレーションのようなモノです。

編集画面より本番環境に近い状態でコンテンツの見た目・動きを確認できるので、完成前の確認などに活用しましょう。

[timeline]

[tl label=’STEP.1′ title=’別フレームを作成する。’]

今回は「1.A」をクリックしたら、別ページに移動する動作を確認します。

まずは最初に作成したフレームとは別にフレームを作成しましょう。

[/tl]

[tl label=’STEP.2′ title=’遷移先のページに繋げる。’]

オブジェクトをクリックすると「+」表示されるので、遷移先のページにドラッグして繋ぎましょう。

アクションの指定は四角で囲った箇所からできます。

今回は「1.Aをクリックしたとき、別ページに移動する」アクションを指定しました。

[/tl]

[tl label=’STEP.3′ title=’プレビューから動作の確認。’]

画面右上の「プレビュー」から設定した動作の確認をしましょう。

[/tl]

[tl label=’STEP.4′ title=’エディターでアプリの設定を行う’]

「1.A」をクリックすると。

ページが移動しました！

[/tl]

[/timeline]

データを共有する

作成したコンテンツを共有したい場合は、画面右上の「共有」をクリックしてメールアドレスを入力するか、リンクをコピーすることで簡単に共有できます。

また注意点として、共有する際に相手に以下の2種類の権限から選択して付与する必要があります。

[list class=”li-mainbdr strong”]

• can edit ➜編集もできる
• can View ➜閲覧のみ

[/list]

外部の人に共有するときは注意してください。

共有権限について詳しく知りたい方は、以下の記事を参考にしてください。

[box class=”box29″ title=”合わせて読みたい”]

• 【2022年】Figmaの料金プランを解説！無料プランと有料プランの違いは？

[/box]

データの書き出し方法

最後にファイルを画像やPDFとして書き出す方法を解説します。

書き出したい場合は、プロパティから「エクスポート」をクリックして書き出し形式を選択することでできます。

書き出し形式は以下の4つから選択することができます。

[list class=”li-mainbdr strong”]

• PNG
• JPG
• SVG
• PDF

[/list]

【補足】初心者の方は本や動画での学習もおすすめ！

Figmaの基礎的な使い方を解説しましたが、これだけではFigmaを完璧に使いこなすことは難しいです。

そこで初心者の方におすすめのFigmaの学習方法を幾つか紹介します。

まずはデザインの基礎を理解しよう！

これからデザイナーを目指す方は、Figmaの使い方だけでなく、UI・UXといったデザインの基礎についてまずは、学習することをおすすめします。

▶デザインを勉強したい人におすすめの本25選

本格的にFigmaの使い方を学習したい方Udemyがおすすめ！

本格的にFigmaの使い方を学習したい方は「Udemy」等のオンライン講座がおすすめです。

Figmaの扱いになれたデザイナーの方のレッスンを格安で受講できるため、効率的に学習したい方に最適です。

FigmaとAdobeXDの比較　

Figma以外のデザインツールとしてAdobeXDが多く利用されていますが、Figmaとの違いはどうなのでしょうか？

FigmaとAdobeXDの主要機能・料金・対応言語の比較については以下の表を参考にしてください。

実際に使ってみた感想としては、Figmaの方が使いやすい印象です。

弊社のデザイナーにも確認したところ、Figmaの方が共同作業がしやすいため、おすすめとの意見でした。

より詳しいFigmaとAdobe XDの解説につきましては、以下の記事を参考にしてください。

[box class=”box29″ title=”合わせて読みたい”]

• FigmaとAdobe XDの比較！結局どっちがおすすめなの？

[/box]

WebデザインツールFigma｜まとめ

WebデザインツールFigmaについて解説しましたが、参考になったでしょうか？

Figmaは、複数人での共同作業に適したWebデザインツールです。

デザイナーに必要な機能を多く備えており、データを共有する際の面倒な作業も不要です。

無料から利用できますので、興味のある方はぜひ利用してみてください。

また、より本格的にFigmaの使い方を学習したい方は「Udemy」等の活用をおすすめします。

最後までよんでいただき、ありがとうございました。