日本発ノーコードアプリ開発ツール『Click』

Webデザインに最適なFigma(フィグマ)とは?使い方・料金を解説!

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

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

NoCodeDBを運営する株式会社For A-careerはノーコード/ローコード技術を主軸とした開発サービス『NoCode Dash』を運営しております。

 

WebデザインツールFigma(フィグマ)とは?

Figmaとは、Web上で使用できるデザインツールであり、ノーコードツールの一種です。

複数人で同時に編集することができ、チームでの作業に最適です。

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

また、通常のデータを共有する場合の面倒な作業も不要です。

    • 通常

ツール➜加工(画像に書き出して資料に、ツールを挟む必要がある)➜シェア(更新が必要)

    • Figma

Figma➜そのままシェア(URL)を送信するだけで誰でも見れる、自動で更新

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

 

Figma(フィグマ)の使い方|導入

早速WebデザインツールFigma の使い方を解説します。

まだFigmaに登録していない初心者の方は、こちらの章を参考にしてください。

既に登録済みの方は、次の章から操作画面の解説をしていますので、そちらを参考にしてください

STEP.1
Figma公式サイトにアクセス。

STEP.2
「Try Figma for free」をクリック。

STEP.3
画像の項目を入力。

 

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

STEP.4
画像の画面になれば完了。

 

Figma(フィグマ)の使い方|日本語化

Figmaの操作画面の使い方を解説する前に、Figmaの日本語化をしましょう。

Figmaは日本語に対応しておらず、本来は日本語で操作することができません。

そこでchromeの拡張機能である「Figma 日本語化」を利用することで日本語でFigmaを操作できるようになります。

ほぼすべての主要機能のメニューに対応しており、初心者の方でも直感的な操作が可能になります。

Figma日本語化のインストール・使い方につきましては、以下の手順を参考にしてください。

STEP.1
Figma日本語化のページにアクセス。

STEP.2
「chromeに追加」をクリック。

STEP.3
ダッシュボード画面で拡張機能を使用

STEP.4
日本語に切り替わったら完了

拡張機能を消去したい場合は、消したい拡張機能をクリックして、「拡張機能を消去する」をクリックすることでできます。

 

Figma(フィグマ)の使い方|アプリのダウンロード

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

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

WindowsかMacを選択。

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

STEP.2
「Open the desktop app」をクリック。

STEP.3
ダウンロードができたら完了。

 

Figma(フィグマ)の使い方|フレームの作成

STEP.1
「ファイル」から「新規作成」を選択。

STEP.2
フレームサイズを選択して完了。

今回は、Macbook proを選択します。

 

Figma(フィグマ)の使い方|フォントの追加

Figmaは初期設定では、日本語フォントが使えません。

日本語を使用するためには、以下の手順を参考にして設定してください。

STEP.1
「Settings」をクリック。

STEP.2
フォントから「Dawnload installer」を選択してダウンロード。

STEP.3
インストールが完了したら完了。

 

Figma(フィグマ)の使い方|操作画面

赤枠で囲った箇所の機能は以下の通りです。

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

これらを使用して画面中央の作業スペースでデザインを作成します。

具体的な使い方につきましては、以下の記事を参考にしてください。

 

Figma(フィグマ)の使い方|プラグイン

Figmaは、プラグインを利用して基本機能とは別に機能を拡張できます。

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

プラグインのインストール手順につきましては、以下の手順を参考にしてください。

STEP.1
「Community」をクリック。

STEP.2
インストールするプラグインを選択。

STEP.3
「Install」をクリックして完了。

 

インストールしたプラグインの使い方

インストールしたプラグインは、メニュー➜プラグインより使用することができます。

 

Figmaのプラグインのおすすめ【2021年】

プラグインの種類 プラグイン名 特徴
アイコン関係 iconify 多くのアイコンを使用できる。
Iconscout

数百万を超えるアイコンを使用できる。

ファイル形式や解像度も選択できる。

フォント関係 Text Resizer フォントのレイアウトの変化を確認できる。
Font Preview 手持ちのフォントをリアルタイムでプレビューできる。
Better Font Picker フォントのサンプルを表示できる。
イラスト関係 Storyset by Freepik 大量のイラストをコレクションしている。

ベクター形式でファイルのインポートが可能。

Humans デザインに立体感を演出できる3Dキャラクターイラストの素材セット。
コントラスト関係 Stark コントラスト比のチェックや作成した色を実際のウェブデザインに適用できる。
Contrast

コントラスト比が測れる。

WCAGに基づいた判定の記載もあり。

HTML書き出し Figma to Code FigmaデータをHTML・CSSに書き出してくれる。
Figma to HTML 指定したURLのWebデザインを、Figmaデータに変換できる。

紹介したプラグイン以外にも優秀なプラグインがありますので、実際に使用してみてください。

 

WebデザインツールFigma(フィグマ)の料金プランについて

料金プラン Starter Professional Organization
料金/月額 無料 15$

(編集者1人)

年次請求のみ
料金/年 無料 12$

(編集者1人)

45$

(編集者1人)

機能
    • 3つのFigmaファイルと3つFigJamファイル
    • 無制限の個人ファイル
    • 無制限の協力者
    • プラグインとテンプレート
    • 無制限のファイルとプロジェクト
    • 無制限のバージョン履歴
    • 共有権限
    • プライベートプロジェクト
    • チームライブラリ
    • 音声会話
    • プロフェッショナルの全ての機能
    • 組織全体のライブラリ
    • 設計システム
    • 分岐とマージ
    • 一元化されたコンテンツ管理
    • 統一された管理と請求
    • プライベートプラグイン
    • SSO+高度なセキュリティ
    • SCIMによる自動プロビジョニング

引用:Figma|価格設定

Figmaの料金プランは、

「Starter」「Professional」「Organization」の3つに分けられます。

個人で利用する場合は「Starterプラン」

チームで利用する場合は「Professional」「Organization」を選択してください。

Organizationプランは、Professionalプランよりセキュリティを強化した、大企業向けのプランになります。

基本的にProfessionalプランで充分に制作が可能ですが、社内のクラウドサービスの利用についてセキュリティが厳しい場合は利用をおすすめします。

 

編集権限について

Figmaは、1つのファイルを複数人で共有することができ、さらにそのファイルの取り扱いの権限を分けることができます。

編集権限を限定するために、「Viewer(閲覧者)」「Editor(編集者)」の2種類の権限に分かれています。

 

支払いについて

まずはじめに、Figmaの料金は個人ではなく、チームごとに発生する点に注意してください。

例として、Aというチームに編集権限を持つアカウントが3つあるとしたら、月々の支払いは15$×3=45$になります。

(年払いの場合は、12$×3=36$)

また、支払いの担当者につきましては、チームを作成したオーナー以外のユーザーでも行うことができます。

しかし、1人ずつ個別で支払いをすることはできず、1チームにつき1人がまとめて支払いをする必要があります。

企業で利用する場合は、決裁権限のある立場の方にチームを作成してもらい、招待、支払いをまとめて行ってもらうことがおすすめです。

 

料金プランを選択する際の注意点

注意点としてプルダウンから「can edit」を選択するだけで自動的に課金されてしまう点が挙げられます。

編集権限者の追加に追加料金がかかることを理解しておきましょう。

 

WebデザインツールFigma(フィグマ)よくある質問

  • Figma(フィグマ)の入門・学習方法は?
  • Figma(フィグマ)のテンプレート
  • Figmaのログイン方法は?

それぞれ解説します。

 

Figmaの入門・学習

Figmaの入門として学習できそうな本は現在販売されていませんでした。

本以外の学習方法ですと、以下のサイトで初心者向けにFigmaの使い方を解説していますので、参考にしてください。

 

Figma(フィグマ)のテンプレートについて

UIの構築に慣れていない方は、テンプレートの利用をおすすめします。

Figmaのテンプレートのおすすめにつきましては、以下の記事を参考にしてください。

 

Figma(フィグマ)のログイン方法は?

Figmaへのログインは以下のURLから行ってください。

https://www.figma.com/login?cont=/developers

未登録の方は以下のURLより新規ユーザー登録を行ってください。(無料)

https://www.integromat.com/?pc=nocodedb

 

【Nocode Dash】ノーコードでの開発はお任せください。

NoCodeDBを運営する株式会社For A-careerはノーコード/ローコード技術を主軸とした開発サービス『NoCode Dash』を運営しております。

 

WebデザインツールFigma(フィグマ)まとめ

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

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

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

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

最後まで読んで頂きありがとうございました。