Figma無料プラン｜初心者でもできること・できないことを解説
当サイトではアフィリエイト広告を利用しています。
Figmaを使ってWebデザインを始めてみたいけれど、「無料でも使えるの？」「無料プランではどこまでできる？」と気になる方も多いのではないでしょうか。
Figmaには無料の「Starter」プランがあり、Webデザインを学びたい初心者でも利用できます。
この記事では、Figmaの無料プランを中心に、無料でできること・できないこと、Web制作での使い方、有料プランを検討するタイミングまで初心者向けにわかりやすく解説します。
Figmaとは？
Figmaは、Webサイトやアプリなどのデザインを作成できるデザインツールです。
Web制作では、実際にHTMLやCSSを書く前に、画面のレイアウトや色、文字、ボタンなどをデザインするときに使われます。
例えば、Webサイトのトップページを作る場合は、次のような部分をFigma上で設計できます。
- ヘッダー
- メインビジュアル
- 見出し
- ボタン
- 画像
- カード
- フッター
コードを書く前に画面の完成イメージを作れるため、Webデザインを考えるときに便利です。
Figmaには無料プランがある
無料で利用できる「Starter」プランがあります。
個人でFigmaを試してみたい方や、Webデザインを学び始めた方は、まず無料プランから始めることができます。
特に、これからWeb制作を勉強する方なら、最初から有料プランを契約する必要はありません。
まず無料で使ってみて、必要な機能が増えてきたら有料プランを検討する方法がおすすめです。
Figma無料プランでできること
ここからは、無料プランでどのようなことができるのかを見ていきましょう。
Webサイトのデザインを作れる
Figmaでは、Webサイトの画面をデザインできます。
例えば、
- ブログ
- コーポレートサイト
- ランディングページ
- ポートフォリオサイト
- スマートフォン向けWebサイト
などをデザインできます。
PC用の画面だけでなく、スマートフォン用のレイアウトを考えることも可能です。
Webサイトを制作するときは、いきなりコードを書くのではなく、先にデザインを作っておくことで全体のイメージを整理しやすくなります。
ワイヤーフレームを作れる
Figmaでは、Webサイトの大まかな構成を考える「ワイヤーフレーム」も作成できます。
ワイヤーフレームでは、
- どこに見出しを置くか
- どこに画像を置くか
- ボタンをどこに配置するか
- コンテンツをどの順番で見せるか
といったページ構成を整理します。
最初から細かいデザインを作るのではなく、まず情報の配置を決めたいときに便利です。
プロトタイプを作れる
Figmaでは、デザインした画面に操作を設定して、簡単なプロトタイプを作ることもできます。
例えば、
「ボタンをクリックすると別の画面へ移動する」
といった動きを設定できます。
実際のWebサイトを完成させる前に、画面のつながりや操作感を確認できるのが便利なポイントです。
デザインを共有できる
Figmaで作ったデザインは、他の人と共有できます。
URLを使ってデザインを見てもらえるため、チームで確認したり、制作したデザインを誰かに見てもらったりするときにも便利です。
個人で使う場合でも、自分のデザインをポートフォリオとして整理するときに活用できます。
ブラウザから使える
Figmaはブラウザ上で利用できるため、専用ソフトをインストールしなくても始めやすいのが特徴です。
環境を準備してすぐに試せるので、Webデザイン初心者にも取り組みやすいツールです。
Figma無料プランでできないこと
無料プランでも多くの機能を使えますが、すべての機能が利用できるわけではありません。
特に注意したいのが、ファイル管理やチーム向け機能の制限です。
チームで管理するファイルには制限がある
無料のStarterプランでは、チーム内で管理するファイルに制限があります。
一方で、ドラフトとして作成するファイルは無制限に利用できます。
そのため、個人で練習したり、まずFigmaを試したりする用途では使いやすい一方、本格的なチーム制作では制限が気になる場合があります。
Dev Modeは無料プランでは利用できない
Figmaには、開発者向けの「Dev Mode」という機能があります。
デザインから実装へ移す際に役立つ機能ですが、現在の無料Starterプランでは利用できません。
Web制作を個人で勉強する段階では必ずしも必要ではありませんが、デザイナーとエンジニアがチームで制作する場合などには重要になることがあります。
高度なチーム機能には制限がある
無料プランでは、チームで本格的に利用するための一部機能にも制限があります。
例えば、大規模なデザイン管理やチームライブラリなどを利用したい場合は、有料プランを検討する必要があります。
そのため、
「個人で勉強する」
「小さなデザインを作る」
といった用途なら無料プランを使い、
「複数人で本格的に管理する」
という段階になったら有料プランを検討すると分かりやすいでしょう。
Figma無料プランでもWeb制作はできる？
結論として、Web制作を学び始めた初心者なら、無料プランから始めて問題ありません。
例えば、
- Webサイトのレイアウトを考える
- PC版のデザインを作る
- スマートフォン版を作る
- ボタンを配置する
- 色や文字を決める
- ワイヤーフレームを作る
- プロトタイプを試す
といったことができます。
これからWeb制作を勉強する方にとっては、無料プランでも十分Figmaを体験できます。
Web制作でFigmaを使うタイミング
Figmaは、Web制作の流れの中では主にデザインを考える段階で使います。
大まかな流れを並べると、
企画
↓
サイト構成を決める
↓
ワイヤーフレームを作る
↓
Figmaでデザインする
↓
HTML・CSSで実装する
↓
JavaScriptなどで動きを追加する
↓
確認・修正
↓
公開
となります。
Webサイト制作全体の流れについては、こちらの記事でも詳しく解説しています。
FigmaとHTML・CSSは何が違う？
FigmaとHTML・CSSは、どちらもWeb制作で使いますが、役割が違います。
| Figma | HTML・CSS |
|---|---|
| デザインを作る | Webページを実装する |
| 見た目を設計する | ブラウザに表示する |
| レイアウトを考える | コードで構築する |
| プロトタイプを作る | 実際のWebページとして動かす |
簡単に言えば、
Figmaでデザインを考えて、HTML・CSSで実際のWebサイトを作る
というイメージです。
HTML・CSS・JavaScriptそれぞれの役割について詳しく知りたい方は、こちらの記事も参考にしてください。
FigmaでWebサイトを作る基本的な流れ
Figmaを初めて使う場合は、簡単なWebページを1つ作ってみると理解しやすくなります。
STEP 1：Figmaを始める
まずはFigmaのアカウントを作成します。
無料のStarterプランから始めることができます。
STEP 2：新しいデザインファイルを作る
新しいデザインファイルを作成し、Webサイトを作るための準備をします。
STEP 3：フレームを作る
PC用のWebページやスマートフォン用のWebページを作るため、フレームを用意します。
STEP 4：レイアウトを考える
ヘッダーやメインビジュアル、コンテンツなどを配置していきます。
最初はシンプルな構成で問題ありません。
STEP 5：テキストや画像を配置する
見出しや本文、画像などを配置します。
STEP 6：色やサイズを整える
背景色や文字色、ボタンの色などを設定します。
ここでサイト全体の雰囲気を整えていきます。
STEP 7：スマートフォン用デザインを作る
PC版だけでなく、スマートフォンで見たときのレイアウトも考えます。
STEP 8：プロトタイプを設定する
必要に応じてボタンやリンクに画面遷移を設定します。
STEP 9：デザインを見直す
文字サイズや余白、配置などを確認します。
STEP 10：実装へ進む
デザインが完成したら、そのデザインを参考にHTMLやCSSでWebサイトを制作していきます。
Figmaで覚えておきたい基本機能
最初からすべての機能を覚える必要はありません。
まずは、次の機能から覚えていくと使いやすくなります。
フレーム
Webページの画面を作るときに使います。
PCやスマートフォンなど、画面サイズに合わせてデザインを作れます。
テキスト
見出しや本文などを配置できます。
図形
ボタンやカードなど、さまざまなパーツを作るときに利用できます。
オートレイアウト
複数の要素を整理して配置するときに便利な機能です。
Web制作では、ボタンやカード、ナビゲーションなどを作るときにも活用できます。
コンポーネント
同じデザインパーツを繰り返し使うときに便利です。
例えば、複数のボタンを同じデザインにしたい場合などに利用できます。
プロトタイプ
画面同士をつないで、実際の操作に近い形で確認できます。
Figma無料プランと有料プランの違い
Figmaの無料プランと有料プランでは、利用できる機能やファイル管理などに違いがあります。
| 項目 | Starter | Professional |
|---|---|---|
| 料金 | 無料 | 有料 |
| 個人での利用 | ○ | ○ |
| Webデザインの練習 | ○ | ○ |
| ドラフト | 無制限 | ○ |
| 基本的なデザイン | ○ | ○ |
| プロトタイプ | ○ | ○ |
| チームでのファイル管理 | 制限あり | より充実 |
| Dev Mode | 利用不可 | 利用可能 |
| 高度なチーム機能 | 制限あり | 利用可能 |
※料金・機能・プラン内容は変更される可能性があるため、利用前にFigma公式サイトで最新情報を確認してください。
Figma無料プランがおすすめな人
無料プランは、次のような方に向いています。
- Web制作を始めたばかりの人
- Webデザインを勉強したい人
- 個人でデザインを練習したい人
- ポートフォリオを作りたい人
- Figmaをまず試してみたい人
- ワイヤーフレームを作りたい人
特に、これからWeb制作を学ぶ初心者なら、まず無料プランを使ってみるのがおすすめです。
有料プランを検討したほうがいい人
一方で、次のような場合は有料プランを検討してもよいでしょう。
- チームで本格的に制作する人
- 大量のファイルを管理したい人
- 高度な機能を使いたい人
- Dev Modeを利用したい人
- デザインシステムをチームで管理したい人
つまり、最初から有料にするのではなく、無料プランで必要な機能を試してから判断する方法でも十分です。
FigmaとCanvaはどちらがいい？
FigmaとCanvaはどちらもデザインに使えるツールですが、得意な分野が少し違います。
| Figma | Canva |
|---|---|
| Webデザイン | 画像制作 |
| UIデザイン | バナー制作 |
| ワイヤーフレーム | SNS画像 |
| プロトタイプ | ブログ画像 |
| Webサイト設計 | テンプレートを使った制作 |
WebサイトのレイアウトやUIを考えたいならFigmaが向いています。
一方で、ブログのアイキャッチ画像やSNS用画像などを手軽に作りたい場合は、Canvaが便利です。
Figma無料プランのメリット
Figmaの無料プランには、次のようなメリットがあります。
無料で始められる
初めてFigmaを使う人でも、費用をかけずに試せます。
Webデザインを実際に作れる
ただ操作を覚えるだけでなく、実際のWebサイトをデザインしながら学習できます。
プロトタイプを試せる
画面遷移などを設定し、デザインの使いやすさを確認できます。
初心者の練習に向いている
個人でWeb制作を学ぶ段階なら、無料プランから始めやすいです。
Figma無料プランのデメリット
一方で、注意したい点もあります。
チーム利用には制限がある
本格的なチーム運用では、無料プランの制限が気になる場合があります。
一部の高度な機能を利用できない
Dev Modeなど、無料プランでは利用できない機能があります。
ファイル管理に制限がある
大量のファイルをチームで整理・管理したい場合には、有料プランが必要になることがあります。
Figma無料プランは初心者でも十分？
Web制作をこれから学び始める方なら、まずは無料プランで十分試すことができます。
Webサイトのデザインを作ったり、スマートフォン用のレイアウトを考えたり、プロトタイプを作ったりしながら、Figmaの基本を学べます。
最初からすべての機能を覚える必要はありません。
まずは、
フレーム → テキスト → 図形 → 画像 → オートレイアウト → プロトタイプ
という順番で少しずつ触ってみるとよいでしょう。
そして、実際に使ってみて「もっと高度な機能が必要」と感じた段階で、有料プランを検討すると無駄がありません。
まとめ
Figmaには無料のStarterプランがあり、Webデザインを学びたい初心者でも始めやすいデザインツールです。
無料プランでも、
- Webサイトのデザイン
- ワイヤーフレーム
- プロトタイプ
- デザインの共有
など、Web制作に必要な基本的な作業を体験できます。
一方で、チームでのファイル管理やDev Modeなど、一部の高度な機能には制限があります。
そのため、これからWeb制作を始める方は、まず無料プランでFigmaを試してみるのがおすすめです。
実際にWebサイトを1つデザインしてみると、Figmaがどのようなツールなのかも分かりやすくなります。
Related
