2024年(最新版)『写真でわかるFigmaのはじめ方ー登録から基本操作まで解説ー』

2024年(最新版)『写真でわかるFigmaのはじめ方ー登録から基本操作まで解説ー』

こんにちは。記事をご覧くださりありがとうございます!みなさん「Figma(フィグマ)」はご存知でしょうか?

Figma(フィグマ)」とは、デザイン初心者からプロまで幅広く利用される強力なデザインツールです。

本記事では、「Figma」の登録方法から基本操作までをわかりやすく解説します。これを読めば、あなたもすぐに「Figma」を使いこなせるようになります!

目次

Figmaとは

Figma(フィグマ)」とは、Figma.Incによって開発されたブラウザベースのコラボレーション・インターフェース・デザイン・ツールです。

Figma公式サイト

デザインとプロトタイピング(デザイン試作)が一体化しており、このツールを使うことで、デザインを作成したり、チームメンバーと共有したり、フィードバックを収集したりすることが可能です。

Figmaの特徴

Figma(フィグマ)
概要オンラインベースのデザインツール
使用用途UI/UXデザイン
プロトタイピング
対象ユーザーデザイン初心者からプロまで
企業
難易度★★☆
特徴リアルタイムでの共同作業が可能
直感的なインターフェース
FigJam」や「FigmaSlides」といった追加機能の充実
フィードバックが簡単
料金プランスタータープラン 無料
プロフェッショナルチーム 月額¥2,250 (1フルシートあたり)
ビジネス 月額¥6,750 (1フルシートあたり)
エンタープライズ 月額¥11,250 (1フルシートあたり)
提供されているデバイスPCのデスクトップアプリ
サイト
モバイルアプリ

このように多様な機能やその使いやすさから、多くのデザイナーや企業に使用されています!


関連記事:[「FigJam」の魅力と活用法:Figmaによるオンラインホワイトボードの新しいスタンダード]

以下の記事では「Figma」が提供するウェブ上でのオンラインホワイトボードツール「FigJam」について機能や特徴を詳しく解説しております。

あわせて読みたい
「FigJam」の魅力と活用法:Figmaによるオンラインホワイトボードの新しいスタンダード みなさん、こんにちは! 「FigJam(フィグジャム)」をご存じですか? これは、デザインツール「Figma(フィグマ)」の中で提供されているオンラインホワイトボード機能です...

Figmaを始めてみよう!

では、「Figma」の登録方法をステップバイステップで解説していきますので、一緒に登録してみましょう!

Figmaの登録方法

Figma」の登録方法は以下の4ステップで簡単に行えます。

  1. Figmaの公式サイトにアクセスします。
  2. トップページにある「Figmaを無料で体験する」を選択します。


  3. 次に表示される画面で、メールアドレスを入力したり、GoogleまたはGitHubのアカウントでサインインします


  4. 入力したメールアドレスに確認メールが送られてくるので、その指示に従ってアカウントを有効化します。
  5. 以上でFigmaの登録が完了です!
    • その後は、Figmaのダッシュボードにアクセスし、新しいプロジェクトを作成したり、既存のプロジェクトを開いたりすることができます。Figmaは初めてでも直感的に使えるように設計されていますが、何か困ったことがあれば、ヘルプセンターやオンラインのチュートリアルを参照してみてください。

次はいよいよ基本操作編です!

Figmaの基本操作

Figma」は多機能であるため、初めて使う人にとっては少々難易度が高いかもしれません!

しかし、一度慣れてしまえば、その多機能性が大きな強みとなります。

※2024年10月10日の最新アップデートによりUIがバージョンアップされています。ここでは以前のUIを主に紹介します!

この章では、7つの基本操作について簡単に解説します!

  1. 基本画面の操作
  2. フレームの作成
  3. 要素の追加
  4. プラグインのインストール
  5. プロトタイプの作成
  6. デザインの共有
  7. デザインの書き出し

以前のUIバージョン (2024年10月10日以前)

1. 基本画面の操作

Figma」の基本画面は以下の4つの要素で構成されています。

  • ツール:図形、テキスト、ペン、コメントなどが選択可能 
  • レイヤー:オブジェクトの構造を管理 
  • デザイン画面:主な作業スペース、フレームを追加してデザインを作成 
  • プロパティ:オブジェクトの詳細を設定


2.フレームの作成

最初に、アートボードとなる「フレーム」を作成します。ツールバーから「フレーム」を選択し、サイズを選びます。


3.要素の追加

次にフレームに要素を加えていきます。

例)ツールバーから「長方形」を選択し、図形を挿入します。挿入した図形は、「プロパティ」から詳細を変更できます。

プロパティで変更できる点

  • 高さ
  • 横幅
  • 塗りの色
  • 線の色
  • エフェクト(影など)



4.プラグインのインストール

Figmaではプラグインを活用して機能を拡張できます。ツールバーから「プラグイン」に進み、検索窓で追加したいプラグインを入力します。



5.プロトタイプの作成

フレームが完成したら、次は「プロトタイプ」を作成します。プロトタイプではより本番環境に近い状態で、見た目や動きを確認できます。

6.デザインの共有

完成した制作物は「共有」から簡単に送信可能です。メールアドレスを入力、またはリンクをコピーすることで共有できます。


7.デザインの書き出し

最後に、作成したデザインを「エクスポート」から書き出すことができます。プロパティのエクスポートから、形式を選択し出力できます。



最新のUI3バージョン (2024年10月10日以降)

UI3においても基本画面の要素は変わりありません。

ここでは以前のUIから今回のUI3への変更点を簡単に紹介いたします!

  • 前バージョンからの変更点
    • ツールバー画面下に移動
    • 保存タイトル左側に移行
    • 開発モードへのスムーズな移行
    • プロパティパネル最小化

以上が「Figma」の基本的な使い方です。Figmaの機能はまだまだたくさんあるので、今後紹介していきます!


関連記事:『写真でわかるFigmaの基本操作①ーオブジェクト操作・レイヤー編ー』

「Figma」の基本操作について段階ごとに詳しく解説した記事があります。以下の記事ではオブジェクト操作について主に解説しております!

あわせて読みたい
『写真でわかるFigmaの基本操作①ーオブジェクト操作・レイヤー編ー』 【オブジェクトの作成方法】 オブジェクトの作成は、Figmaの基本的な操作の一つです。以下の手順でオブジェクトを作成することができます。 Figmaを開き、新しいプロジ...
『写真でわかるFigmaの基本操作①ーオブジェクト操作・レイヤー編ー』

関連記事:「【2024年10月最新情報!】Figma最新リリース:14つの機能を徹底解説!(前半編)

以下の記事では10月10日にリリースされた「Figma」の最新機能を紹介しております!新しいUI3についての情報もあるのでぜひご覧ください!

あわせて読みたい
【2024年10月最新情報!】Figma最新リリース:14つの機能を徹底解説!(前半編) みなさん!こんにちは! UI/UXデザインの分野で利用されているクラウドベースのデザインおよびプロトタイピングツール「Figma」が最新リリース情報を公開しました! 202...
【2024年10月最新情報!】Figma最新リリース:14つの機能を徹底解説!(前半編)

Figmaのメリット・デメリット

そんな「Figma」を使うことで一体どのようなメリットがあるのでしょうか?この章ではデメリットと合わせてお伝えいたします!

メリット

  • リアルタイムコラボレーション
    • 複数のユーザーが同時に作業でき、変更が即座に反映されるため、チームでのコミュニケーションが円滑になります!
    • また、リアルタイムでフィードバックを得ることもできます。
  • クラウドベース
    • インターネットさえあればどこでもアクセス可能で、デバイス、場所を選ばずに作業できます。
  • 豊富なプラグイン
    • デザインの効率を上げるための多くのプラグインが利用でき、カスタマイズ性が高いです。
  • プロトタイピング機能
    • インタラクティブなプロトタイプを簡単に作成でき、ユーザー体験を視覚化しやすくなります。
  • バージョン管理
    • 変更履歴が自動で保存され、過去のバージョンに簡単に戻ることができます!

デメリット(気をつけるべき点)

  • インターネット環境の必要性
    • クラウドベースのため、インターネット接続が不安定な場合、作業が難しくなることがあります。
    • また、オフラインでは機能が制限されてしまいます。
  • 学習の難易度
    • 初心者には機能が多いため、使いこなすまでに時間がかかることがあります。
  • パフォーマンスの問題
    • 大規模なプロジェクトや複雑なデザインでは、動作が遅くなることがあります。
  • プライバシーとセキュリティ
    • クラウドにデータを保存するため、機密情報の取り扱いには注意が必要です。

まとめ

この記事では、「Figma」の基本的な使い方や特徴、メリット・デメリットについて詳しく解説しました。Figmaは、リアルタイムでのコラボレーション豊富な機能を活用することで、デザイン作業を効率的に進めることができます。また、初心者でも簡単に始められるように、登録方法や基本操作を具体的に紹介しまていきました!

Figma」を使いこなすためには、実際にプロジェクトを進めながら学ぶことが重要です。また、さらなるスキルアップを支援するために本サイトではFigmaの基本操作シリーズの記事を執筆しています!

さらに、Figmaの公式フォーラムやデザインコミュニティに参加することで、他のデザイナーとの交流やフィードバックを得ることができ、より深い理解を得ることもできます。これらのリソースを活用し、「Figma」を使ったデザインスキルをさらに磨いていきましょう!

関連記事:「写真でわかるFigmaの基本操作③ーショートカット編ー」

この記事では「Figma」をより効率的に使うためのショートカットキー一覧を紹介しています!

あわせて読みたい
写真でわかるFigmaの基本操作③ーショートカット編ー Figma 公式サイト 「Figma(フィグマ)」とは、UI(ユーザーインターフェース)やUX(ユーザーエクスペリエンス)のデザインに特化ししたウェブベースのデザインツールで...
「写真でわかるFigmaの基本操作③ーショートカット編ー」
Xにもシェアお願いします!!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (3件)

コメントする

目次