【初心者向け】Figmaの使い方講座&実践例|Adobe XDとの違いも解説します

初心者向けFigma使い方講座|FigmaとAdobeXDとの違いや実践例を解説

リモートワークでの働き方が定着してきました。職場の同僚と離れた場所にいても、スムーズなやり取りをできるツールの需要は非常に高くなっています。

Figmaはその代表例と言ってもいいでしょう。Figmaの認知度・人気は年々高まっています。

この記事では、Figmaのメリットを中心に紹介しながら、競合ツール「Adobe XD」との違いについてわかりやすく解説します。加えて、「初心者向けのFigma使用方法」についてもお伝えします。

Adobe製品を無料で体験する

Figmaとは?

Figmaとは

主にWEBサイトやアプリなどのUI/UXデザインの制作に携わる現場で活用できるデザインツールです。Figmaの特徴はオンライン上で作業を進めるところにあります。またオンラインミーティングの際の画面共有などでリアルタイムに編集できる点も特徴のひとつです。

Figmaでは何ができるのか?

チラシやポスターの制作や、WEBデザイン、アプリのUIデザインなどデザインのすべてをFigmaで解決できます。

また個々で制作を進めるデザイナーだけでなく、フロントエンジニアやバックエンドエンジニアにも広く使われています。

そのため、ひとつのプロジェクトチームでFigmaを共有すれば、わざわざファイルを送信する手間を省くことができ、よりスムーズなやり取りができます。

Figmaはインストール不要で使える!

アプリとしての提供もありながら、ブラウザ上での操作が可能となっています。

そのためには会員登録が必要ですが、方法は非常にシンプルです。ブラウザ上でFigmaのアカウントを作成しログインすればどこでも操作が可能です。

Figmaの会員登録

職場と自宅のパソコンが違うときには非常に便利であることがメリットのひとつであると言えます。

Figmaの日本語対応について

残念ながら2022年1月現在では日本語非対応です。

すべて英語表記ですが、UIが優れているのでツールなどのアイコンがわかりやすく直観的に使うことができるようになっています。

Adobe社のイラストレーター(イラレ)やXDの使用経験がある方は迷うことなく使いこなせるでしょう。

Adobe XDとの違いは?

データをやり取りする時、相手先がXDを持っていない場合にはXDのファイルをPDFや画像ファイル形式などに変換して送付しているという方は多いと思います。

これはXDだけでなくAdobe IllustratorやAdobe Photoshopなどでも同じでしょう。FigmaとXDの大きな違いはここにあると考えられます。

Figmaにもファイル形式を変換する機能は備え付けられていますが、URLを送信すれば確認してもらうことが可能です。ただしその際には、相手先をプロジェクトメンバーに招待しFigmの無料会員登録をしていただく必要があることを忘れないでください。

Figmaは個人利用にやさしい料金体系

Figmaは基本的に無料で使うことができるツールであり、個人で使う分には無料であっても十分な機能を持ち合わせているといえます。

AdobeXDとFigmaの料金体系比較

しかし、プロジェクトを組むと人数は2名以上になることは確実です。Figmaではユーザーを大きく2つに分類して考えられています。

ひとつは編集できるユーザー(editer)、もうひとつが閲覧だけのユーザー(viewer)です。

閲覧ユーザーのみの場合には料金が発生することはありませんが、編集できるユーザー複数名をプロジェクトチームに加える場合は利用料金が発生するので注意が必要です。

Adobe XDよりもFigmaの方が共有作業の効率が高い

有料での利用を前提に考えた場合、FigmaとXDを比較すると「プロジェクトを共有し、共同で編集ができる点」はFigmaの便利なところです。

フォントの種類はAdobe XDの方が豊富

Figmaは日本語非対応ということもあってか、デフォルトで対応している日本語のフォントは非常に少ないです。その点、Adobe Fontsを利用できるXDは豊富なフォントの中から簡単に選ぶことができます(※有償)。

デザイナーにとって、フォントの種類が多いのは嬉しいメリットです。

とは言え、使いたいフォントをFigmaにインストールさえすれば日本語フォントを使うことができますので、この手間さえクリアすれば日本語フォント問題はなくなるのかもしれません。

Adobe XD を無料で使えるスタータープラン、無くなったって本当?

結論として、Adobe XDもFigmaと同様に無料で利用できます。スタータープランも無くなっていません。

>> Adobe XD 公式サイトはこちら

なぜ、スタータープランが無くなったという声があるのでしょう?それは、Adobe XDの公式ページを見ると分かります。

従来は、Adobe XD公式ページの「価格」の画面内にスタータープランが併記されていたのですが、現在はなくなってしまったのです。そのため、「Adobe XDから無料プランはなくなってしまった!」という声をよく見聞きするようになりました。

Adobe XDの価格画面

しかし、ページ内を探索すると以下のような画面にたどり着くことができます。この画面にたどり着き、「XDを無料で入手」のリンクをクリックしない限り、完全無料で利用できない状態なのです。

ここにたどり着くのはとても大変ですし、画面構成が変わるかもしれないので、ダウンロードリンクを以下に記載します。詳細は、リンクの後に掲載している関連記事をご参照ください。

\ XDを完全無料で利用する /

ダウンロードする

※ボタンを押すとダウンロード開始の注意書きが表示されます!
※いきなりのダウンロードに不安を感じる方がいるかもしれませんが、
 公式サイトですのでご安心ください。
※記事後半では、Adobe XD公式サイトTopページからダウンロードする方法も解説します

利用にはAdobeのアカウントが必要なので持っていない人は新規作成しましょう。

あわせて読みたい

基本的な機能の使い方

Figmaの利便性をご理解いただいけたかと思いますので、ここからはFigmaで使用できる各ツールについて解説します。

以下の画面からスタートします。

Figmaの基本的な使い方

各ツールや編集機能について

画面左上にあるツールアイコンは、それぞれイラストレーターなどを利用したことがある方には身覚えのある物になっており、またデザインツールをはじめて使う方にとっても比較的わかりやすくなっていると思います。

そして、アイコンの左端にはFigmaのロゴが表示されています。ここにカーソルを合わせると”mainmenu”と表示されるのでクリックします。すると、ズラリと英語でサブメニューが現れます。このサブメニューではファイルの新規作成やローカルへの保存、また編集機能もここに格納されています。

新規作成(Newdesignfile)

まずはデザインを制作する前に新規ファイルを作成する必要があります。

Figmaのアイコン > File > Newdesignfile

を順に選択するとブラウザのタブが切り替わり、新規ファイルが表示されます。

レイヤーについて(Layers)

画面左側に表示されているのがレイヤー部分です。レイヤーについて少し説明します。

はじめてデザインツールを利用する方にとっては聞きなれない言葉だと思います。

レイヤーとは、一見すると、ひとつの画面でも構造上では何枚ものレイヤー(画面)が重なっているものととらえる必要があります。そしてこの重なり順を表している部分でもあります。

最前面のレイヤーは一番上の位置に、最背面のレイヤーは一番下の位置に表示されています。重なり順はいつでも変更することが可能で、対象のレイヤーをドラッグ&ドロップで操作します。

図形ツール(Shapetools)

四角形や円形などのシンプルな形を図形ツール(Shapetools)で作成します。描いた図形は選択ツール(Movetool)で拡大縮小や回転などの編集が可能です。

ペンツール(Pen)

ペンツールは図形ツールでは描くことができないような複雑なイラストを描きたいときに使うと非常に便利です。パスと呼ばれる点を配置しながら線を書いていきます。

直線の場合はクリック、曲線の場合はドラッグします。

ペンツールを使うことが苦手な方は、描いた線をパスに変換してくれるペンシルツール(Pencil)をオススメします。これらはすべて後から編集できます。

塗りと線の設定(Fill/Stroke)

色や線を付けたい図形やテキストを選択ツール(Move)で選択すると、画面右側に編集画面で色を線を選択できます。

線の幅は直感的にカーソルを用いて設定するか、数字を入力して編集します。

破線(Dash/Custom)や矢印など線の種類を変更することも可能です。

テキストの入力(Text)

Tの文字がアイコンになっているツールです。テキストを入力したい位置をクリックするとテキスト入力モードになります。

コンポーネントとは

たとえば、アプリのUIデザインをする際には「ホームボタン」や「メニューボタン」などどのページにも存在するものがあります。

これらの色を変更しなければならなくなったとき、ひとつひとつのボタンを選択して編集するのはとても手間と時間がかかります。

この解決策になるのが「コンポーネント」です。

ひとつのボタンに対して変更を行うと、すべてのボタンに編集内容が反映されます。その結果、時間を短縮でき、制作効率向上につなげられるのです。

コンポーネントの使い方

コンポーネントを適用させたい図形を選択ツールでクリックします。

続けて右クリックするとサブメニューが表示されます。

Figmaのコンポーネントの使い方

その中から”Createcomponent”を選択します。コンポーネントに登録されているかどうかを確認するには、画面左上のツールアイコンが並ぶすぐ下の”Assets”を選択します。

すると”Layers”タブから切り替わり”Assets”の画面が表示されます。

登録されているコンポーネントは、すべてこの画面に表示されます。

コンポーネントの編集方法

色や形などのスタイルを編集することはとても簡単です。

コンポーネントとしてすでに登録されているので、編集したい対象を選択ツールでクリックし、編集するだけでコンポーネントの対象すべてに編集内容が適用されます。

実践例|スマートフォン用アプリのモックアップ(プロトタイプ)を作成する方法

実際にスマートフォン用アプリのUIデザインを考えながらモックアップを作成する方法を説明します。

モックアップとは実際にボタンをクリックしたとき、どのページに遷移するかを確認できるものです。

Figmaではこれをプロトタイプ(Prototype)と読んでいます。

ここでは「ハンバーガーのデリバリーアプリ」のUIデザインを例に挙げます。

Figmaで作るスマホアプリのUIデザインのワイヤーフレーム・プロトタイプ

STEP1: 画面のサイズを選択

FigmaにはPCからスマートフォンまであらゆるの画面サイズのテンプレートが用意されています。ツールアイコンの右隣にある”Frame”のアイコンをクリック。

すると、画面右側にスマートフォンやタブレットの機種名やPCの画面サイズが表示されます。

任意のサイズを選択すると画面中央に長方形が現れます。

STEP2: ワイヤーフレームを作成

手始めに簡単な図形を描きながらメイン画面のワイヤーフレームを作成します。

ワイヤーフレームとはボタンや画像のサイズ・配置場所、おおまかなテキストの内容などをある程度把握するためのもので、この段階ではきちんとしたデザインはまだ行わずモノトーンで作ります。

STEP3: レイヤーの名前を変更

ホーム画面ができ上がったらレイヤーで名前を変更します。デフォルトでは画面サイズを選択した際の機種名になっていますので、名前の部分をダブルクリックすると簡単に名前を変更できます。

STEP4: 遷移先ページを作成

ページを追加したいときには”Frame”から再度同じサイズのものを選択します。

また、サイズ選択をした際にすでにページ数が決まっている場合は「Altキー」を押しながら選択ツールで画面サイズの長方形をドラッグすると簡単にコピーできます。

STEP5: プロトタイプ機能を使って遷移するページを指定する

画面右上に”Prototype”とあります。これを選択すると「プロトタイプモード」に切り替わります。

HOMEボタンをタップした時どこのページに遷移させるかを指定します。

HOMEボタンを選択すると、ボタンの右横にプラスボタンが表示されます。このプラスボタンを遷移させたいページまで引っ張ると矢印が現れます。

矢印が向かっている先のページに遷移する意味となっています。

STEP6: デザインを完成させる

実際にデザインを施す段階は、プロジェクトによって異なる場合があります。

ここではある程度プロトタイプを完成させてからデザインに移る流れとなっています。

STEP7: プレビューを共有する

ブラウザ上での操作が可能なプロトタイプのプレビュー機能は共有できます。

プレビュー画面の右上にある”Shareprototype”をクリックすると送信先のメールアドレスを入力する画面が表示されます。

この時メールアドレスの入力場所の右側の矢印には”canview”が選択されている状態になっていると思います。

これを”canedit”に切り替えると料金が発生することもあるので注意してください。

閲覧のみの共有であれば前者の”canview”を選択することを推奨します。

まとめ

以上がFigmaとXDの違いおよびFigmaの使い方でした。

ここでお伝えしたいのは、デザイナーやエンジニアにとってFigmaの需要が高いことは間違いなく、これからの時代には欠かすことはできない重要なツールであることです。Adobe XDからFigmaへ移行しているデザイナーは多くなっているのも事実です。

デザイナーの初心者であっても、これを機にFigmaを使ってみることをオススメします。


これまでAdobe製品を使ってきた人にとっては、FigmaよりもAdobe XDの方がIllustratorやPhotoshopとの相性がよく、使い勝手が良いのも事実。

お世辞にも安いとは言い難いAdobe Creative Cloudのサブスクライセンス費用、少しでも安く抑えたいという人も少なくないでしょう。

そんな方には、デジハリのAdobeマスター講座がおススメです!(↓↓の記事で詳しく解説しています)

あわせて読みたい

\ AdobeCCが45%OFF /
デジハリのAdobeマスター講座

公式サイトを確認する

 


UXデザインに関する体系的な学習をしたい方には、Courseraの「Google UXデザインプロフェッショナル認定コース」がオススメです。

Google UXデザイン プロフェッショナル認定は、オンライン上で講義を受けて課題に取り組みながら、UXデザインについて体系的な知識習得とアウトプットのトレーニングができる講座です。Figmaを使った実践的な演習も可能です。

 

Google UXデザイン プロフェッショナル認定コースには、次の7つのコースがあります。

各講座の内容は体系的になっているために、推奨として提示された順序で各認定プログラムのコースを受講することを強くおすすめします。

>> Google UXデザインプロフェッショナル認定コースの詳細

  • この記事を書いた人

dice

Adobe製品のお得な買い方、スキルアップのためのオンライン学習プラットフォーム情報、デジタルマーケティングの基礎知識など、大人の学びに役立つ情報を発信していきます。コストパフォーマンス高いスキルアップ・リスキリングのお供に。

人気記事

デジハリでAdobeCCを安く購入する方法 1

デザインや動画編集などのクリエイティブな作業に必要不可欠なAdobe Creative Cloud (以下、AdobeCCと略します)を契約すると、IllustratorやPhotoshopなど複数の ...

Canva_有料版と無料版の違いは?_Pro版を使うメリットを解説 2

Canva は、誰でも簡単にプロのようなデザインができるツールです。 バナーやSNS投稿、 名刺やポスター、プレゼン資料、YouTubeサムネイルにいたるまで、豊富なテンプレートを使って誰でも簡単にデ ...

SocialDogの評判、料金プランやメリット・デメリットを徹底解説 3

Twitterのアカウント運用はSNSマーケティングの王道です。 Twitterで注目を集めることで、ビジネスの成長・マネタイズにつなげられます。 とはいえ、Twitterのアカウントを運用するのは簡 ...

AdobeXDのスタータープランは無くなった?誤報です!正攻法でダウンロードする方法を解説 4

Adobe XD はWebサイトやスマホアプリのワイヤーフレーム・モックアップ・プロトタイプなどの作成に使用されるデザインツールです。 WebデザイナーやUI/UXデザイナーにとっては不可欠なツールの ...

【Canva】画像から人物を切り抜きたい!背景の削除と透過方法について画像つきで解説 5

Canvaには、「画像から人物を切り抜いて、背景なしの状態で保存する」機能があります。 ワンクリック操作で画像の切り抜きができるため、初心者にも優しい便利機能です。   この記事ではCanvaの「背景 ...

-Webデザイン
-