Figmaの練習は「トレース→オリジナル制作→ポートフォリオ化」の3段階で進めると、未経験から案件獲得まで最短ルートをたどれます。本記事では初心者が何から始めるべきか、フリーランス案件につなげる練習設計まで具体的に解説します。
▶ 3日で初案件PR
この記事でわかること
Figmaの練習ステップを公式チュートリアルからポートフォリオ整備まで5段階で把握できます。トレース20〜30枚で余白・配色・フォント階層の判断力が身につく理由が分かります。ポートフォリオに「目的・ターゲット・工夫点」を添えることで案件獲得率が上がる仕組みを理解できます。
今の仕事について、一番近いものは？
この記事の結論
Figmaの練習は「何をどの順番でやるか」を決めると、迷いなく続けられます。まず公式チュートリアルで基本操作を確認し、既存デザインのトレースで余白・配色の感覚を体に覚えさせ、バナーやLPのオリジナル制作へ進む流れが実務に直結します。フリーランスとして案件を取るには、制作物に「目的・ターゲット・工夫点」を添えてポートフォリオとして整備することが、スキル以上に重要な準備です。
最初に確認すること
Figmaの無料プランでブラウザから今すぐ練習を始められます。アカウント登録後、公式の「Get started with Figma design」チュートリアルを開くと、フレーム・コンポーネント・オートレイアウトの3要素を30分程度で確認できます。インストール不要で環境構築の時間がかからない点は、副業・フリーランスで時間が限られている人にとって大きな利点です。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| Figmaを開いたことがない | 公式チュートリアルから始めると時間を節約できる | 5分 |
| 基本操作は知っているがトレースが続かない | トレース練習は1画面・30分で完結させると習慣化しやすい | 5分 |
| ポートフォリオが整備できていない | ポートフォリオは目的・ターゲット・工夫点の3点で差がつく | 5分 |
| 案件獲得の具体的な手順を知りたい | 練習の成果をフリーランス案件につなげる4つの手順 | 5分 |
| 独学かスクールか迷っている | 独学・スクール・エージェントは目的と予算で選ぶ | 5分 |
Figma練習は公式チュートリアルから始めると時間を節約できる
Figmaを初めて触る人の多くは、参考書やYouTubeを探し始め、1時間経っても何も作れないまま終わります。最初の30分をどこに使うかが、その後の定着速度を決めます。
Figmaの無料プランは学習用途に十分な機能がある
Figmaのスタータープラン（無料）では、3プロジェクトまでファイルを作成でき、共同編集機能も基本的な範囲で使えます。ブラウザから直接アクセスできるため、環境構築に時間を取られません。フリーランス初期の練習用途であれば、無料プランで十分に通用します。有料プランへの移行が必要になるのは、クライアントと複数のプロジェクトを同時に進める段階です（最新のプラン情報はFigma公式サイトで確認できます）。
最初に覚える3要素はフレーム・コンポーネント・オートレイアウト
Figmaの学習で最初につまずく原因の多くは、この3要素を飛ばして「見た目の練習」だけ進めてしまうことです。フレームはデザインの「器」であり、画面サイズや要素の境界を定義します。コンポーネントはボタンやアイコンなど繰り返し使う要素を1か所で管理する仕組みで、実案件では変更のたびに全画面を修正する手間をなくします。オートレイアウトはFlexboxに相当する機能で、要素の間隔や並び方をルールとして設定できます。
この3つを知らずにデザインを作り始めると、要素を1つずつ手で動かす作業ばかりになり、時間がかかる上に修正に弱いファイルになります。公式チュートリアル「Get started with Figma design」は、この3要素を実際に触りながら確認できる構成になっています。
公式チュートリアルの後は「1画面完結の課題」に移る
公式チュートリアルを終えた後、「Udemyを買う」「YouTubeをひたすら見る」に流れてしまい、手を動かす時間が減るパターンは特に多くあります。この段階では、ボタン1つ・アイコン1セット・カード1枚といった「1画面で完結する小さな課題」を30分以内で仕上げることを繰り返すのが有効です。「完成させる」という経験を短いサイクルで積むことで、ツールの操作感が身についていきます。
Figmaに慣れながらデザインの仕事を探す段階になったら、フリーランスのポートフォリオの作り方を参考にして制作物の整理方法を確認しておくとスムーズです。
CHECK
▶ 今すぐやること: Figma公式チュートリアルを開き、フレームを1つ作成して保存する（30分）
Q: Figmaはパソコンにインストールしないと使えませんか？
A： ブラウザ版で学習に必要な操作はほぼ全て使えます。デスクトップアプリもありますが、初心者段階ではブラウザ版で問題ありません。
Q： 無料プランでどこまで練習できますか？
A： ポートフォリオ制作・トレース練習・バナー制作など個人の学習用途では無料プランで十分です。複数クライアントとの同時進行が必要になった時点で有料プランを検討してください。
トレース練習は1画面・30分で完結させると習慣化しやすい
「トレース練習をやろうと思ったが、何をトレースすればいいか分からない」「1時間かけても終わらなくて挫折した」という経験は、Figmaを学ぼうとした人に共通する悩みです。
トレース対象の選び方と最初の1枚
トレースとは、既存のWebサイトやアプリ画面をFigma上で再現する練習です。余白の取り方・フォントサイズの比率・配色のバランスを手を動かしながら体に覚えさせる効果があります。最初の1枚は「ヘッダーとヒーローセクションだけ」といった部分的な範囲にとどめることをお勧めします。1画面丸ごと再現しようとすると、最初の30分でフレームの設定に迷い、モチベーションが切れるケースが多くあります。
トレース対象は「カラムが1〜2列のシンプルなレイアウト」「テキストが16px以上で読めるサイズ」「使用色が3色以内」という3条件を満たすデザインを選ぶと、作業が止まりにくくなります。Apple・Airbnb・Notionなどのデザインは余白設計が明快で、トレースの学びが得やすいとされています（Figma初心者におすすめの練習方法7選｜LAF DESIGN）。
トレースで確認すべき3つの要素
トレースは「見た目を似せること」が目的ではなく、「なぜこのデザインがこう見えるのか」を理解することが本質的な目的です。
確認すべき1点目は余白（パディング・マージン）で、ボタンの内側の余白が均等かどうか、テキストとアイコンの間隔が統一されているかどうかを確認します。2点目はフォントの階層で、見出し・本文・注釈のサイズ比がどのくらいあるかを測ります（見出し32px・本文16px・注釈12pxという比率は実務でよく見られます）。3点目は配色で、主色・補色・背景色の3色がどの割合で配置されているかを確認します。
この3点を意識するだけで、トレース後の「なんとなく作った」から「意図を読んで作った」への移行が起きます。なお、Webデザイン配色の基本を押さえておくと、トレース中の配色分析がより深まります。
30分タイマーで終わらせるルールを作る
トレース練習が続かない最大の原因は「完璧に仕上げようとして時間を使いすぎること」です。30分のタイマーをセットし、タイムアップで未完成でも止める練習方法は、実務的な時間感覚を養う効果もあります。完成度より「今日も1枚触った」という積み重ねが、ツール習熟の速度を上げます。
Q： トレースは著作権的に問題ありませんか？
A： 個人の学習目的でのトレースは一般的に問題ないとされています。ポートフォリオに掲載する場合は「模写・練習作品」と明記し、オリジナル作品と区別する形にしてください。
Q： トレース練習は何枚くらいやればいいですか？
A： 20〜30枚程度をトレースすると、余白・配色・フォント階層の判断が自分でできるようになっていることが多くあります。ただし数より「なぜこのデザインか」を毎回考えることの方が重要です。
Figma練習の成果を見極める3つの判断基準
自分の練習が「実務レベルに近づいているか」を外から判断するのは難しく、「まだまだ足りない気がする」「いつになったら案件を取れるのか」と迷い続ける人は多くいます。
判断基準1: 指定がない状態で1画面を完成させられるか
参考デザインを見ながら模写する段階から、「バナーを作って」「カードコンポーネントを作って」という一言の指示だけで画面を完成させられるか、が一つの目安になります。余白・フォントサイズ・配色を自分で判断できる状態が「基礎完了」の目安です。
判断基準2: コンポーネントとオートレイアウトを意識的に使えるか
実案件では、修正依頼が必ず来ます。「ボタンの色を全部変えて」「間隔を広げて」という変更を、全要素を手で動かさずにコンポーネントとオートレイアウトで処理できるかどうかが実務耐性の分かれ目です。自分の練習ファイルを開いて、「この変更を30秒で対応できるか」を試すと現在地が分かります。
判断基準3: 制作物に目的と工夫点を言語化できるか
デザインの技術的な完成度より、「なぜこのレイアウトにしたか」「誰に向けて何を伝えようとしているか」を説明できるかどうかが、フリーランス案件での評価基準として重要です。クライアントはデザインの良し悪しより「この人に任せて大丈夫か」を判断するため、思考の言語化ができる人の方が信頼されやすい傾向があります。
Q： デザインが「上手い」かどうか自分では判断できません。
A: Figmaコミュニティ（figma.com/community）やデザイナー向けのDiscordサーバーでフィードバックをもらうことが有効です。自己評価より他者評価の方が現在地の把握に役立ちます。
Q： ショートカットキーはどれから覚えればいいですか？
A： 作業中に最も頻繁に使うV（選択）・F（フレーム）・R（矩形）・T（テキスト）・Cmd+D（複製）・Cmd+G（グループ化）の6つを先に習得すると操作速度が変わります。全ショートカットは後から追加できるので、最初からリストを丸暗記する必要はありません。
PR提供: 日本デザインスクール（デザスク）
ポートフォリオは目的・ターゲット・工夫点の3点で差がつく
「ポートフォリオを作らないといけないのは分かるが、何を載せればいいか分からない」「自信を持って見せられる作品がない」という状態で止まっている人は、フリーランスを目指す人の中でも特に多くいます。
ポートフォリオに必要な作品数の目安
案件獲得を目的としたポートフォリオであれば、質の高い作品3〜5点が複数の低品質作品を並べるより評価されやすいとされています（Figma案件でフリーランスになるには｜Remogu）。「まだ自信がない」という段階でも、バナー1点・LPのセクション2〜3点・UI画面1点といった構成で始められます。完成度より「何を考えてこのデザインにしたか」の説明がある作品の方が、クライアントの評価基準に合いやすくなります。
フリーランスのポートフォリオ作成では、7項目の構成と5ステップの実践法を解説しており、デザイン系の制作物を整理する際の参考になります。
各作品に必ず添える3つの情報
作品を並べるだけのポートフォリオと、仕事につながるポートフォリオの差は「制作意図の言語化」にあります。添えるべき情報は「目的（このデザインで何を達成しようとしたか）」「ターゲット（誰に届けるためのデザインか）」「工夫点（競合や一般的なパターンと何が違うか）」の3点です。
たとえば「食品ECサイトのバナーを制作しました」という説明だけでは判断材料になりません。「30〜40代女性向けに健康訴求を優先し、テキストを左揃えにすることで視線の流れを直線化しました」という説明があれば、デザインの意思決定プロセスが見えます。フリーランスとして案件を取る段階では、この説明文こそがスキルの証明になります。
ポートフォリオの媒体はFigmaとNotionで十分
ポートフォリオサイトを別途制作しようとして、そちらの学習に時間を取られてしまうパターンは見落としがちな落とし穴です。FigmaのPrototype機能でスライド形式のポートフォリオを作成するか、Notionページにデザイン画像と説明文を並べる方法で、クライアントへの共有には十分に機能します。制作物の見せ方に時間をかけるより、作品の質と説明の充実に時間を使う方が案件獲得に直結します。
CHECK
▶ 今すぐやること: 手元の練習作品から1点を選び、「目的・ターゲット・工夫点」を200字以内で書いてみる（20分）
Q: 実績がゼロの状態でポートフォリオを作っていいですか？
A： 問題ありません。個人制作・模写・コンセプト作品を実績として提示できます。「個人制作（練習作品）」と明記した上で、制作意図を丁寧に添えることが重要です。
Q： ポートフォリオはPDF形式とオンライン形式のどちらが良いですか？
A： 案件の受け方によります。クラウドソーシングではURLで共有できるオンライン形式の方が使い勝手が良く、エージェント経由ではPDFを求められることもあります。両方用意できると対応の幅が広がります。
Figma練習の成果をフリーランス案件につなげる4つの手順
練習を積んでポートフォリオが整ったあと、「どこで案件を探すか」「どう営業するか」が分からず止まっている人は多くいます。案件獲得は練習とは別のスキルセットが必要ですが、手順は整理できます。
手順1: 自分が狙う案件タイプを1つに絞る
Figmaを使う案件には、UI設計・バナー制作・LP制作・ワイヤーフレーム作成・デザインシステム構築など複数の種類があります。最初から全方向を狙うと、ポートフォリオの方向性が散漫になり、クライアントに刺さりにくくなります。まずバナー制作またはLP制作の1種類に絞り、その領域に特化したポートフォリオを3点用意するところから始めると、初案件の獲得確度が上がります。
手順2: クラウドソーシングで小規模案件を取る
クラウドワークスやLancersでは、バナー制作・LP修正・アイコン制作など、小規模案件が多く掲載されています。最初の1〜2件は単価より「実務経験の取得」を優先し、クライアントとのやり取り・納品ファイルの整理・フィードバックへの対応という実務の流れを体験することが目的です。この経験が次の案件の提案文を具体化します（Figmaのフリーランス案件・副業求人一覧｜Sokudan）。
クラウドソーシングでの提案文の書き方については、フリーランスの初営業と案件獲得が参考になります。
手順3: ファイル管理と命名ルールを実案件仕様にする
クラウドソーシングで1〜2件経験した後、次に差をつけるのが「納品ファイルの品質」です。レイヤー名がデフォルト（Frame1・Rectangle3など）のままのファイルを納品すると、クライアント側の修正対応が難しくなります。レイヤーには意味のある名前をつける（header-nav・hero-button-primaryなど）、未使用レイヤーを削除する、ページを「Draft」「Working」「Delivery」に分けるという3つのルールを練習段階から習慣にしておくと、実案件での作業がスムーズになります。
手順4: 高単価を狙う段階でエージェントを活用する
Figmaを使う案件の単価はプラットフォームによって差があり、クラウドソーシングの小規模案件と企業の中長期プロジェクトでは報酬レンジが異なります。ある程度実績が積み上がった段階でフリーランスエージェントへの登録を検討することが有効です。エージェントは案件の交渉や契約周りのサポートを受けられる分、独自営業より参入ハードルが下がる場合があります（Figma案件でフリーランスになるには｜Remogu、初心者におすすめ！Figmaのフリーランス事情を解説｜Tech Reach）。
Q： 最初の案件はどうやって選べばいいですか？
A： 予算・納期・作業内容の3点を確認し、「納期が2週間以上ある・作業範囲が明確・修正回数が制限されている」案件から選ぶと、初案件でのトラブルを減らしやすくなります。
Q： クライアントとのやり取りで困ることはありますか？
A： 特に多いのは「修正範囲の認識のズレ」です。契約前に「何回まで修正対応するか」を明文化しておくことで、納品後の無制限修正要求を防ぎやすくなります。
独学・スクール・エージェントは目的と予算で選ぶ
「独学で本当に案件が取れるレベルに到達できるのか」という不安は、Figmaを学ぼうとしている人に共通する疑問です。選択肢を整理すると、判断基準が見えやすくなります。
独学が向いているケースとコスト感
Figmaの独学には、公式チュートリアル・Udemy・YouTube・Figmaコミュニティのリソースが使えます。Udemyの講座はセール時に割引価格で購入できるため、体系的な学習ルートを比較的低コストで確保できます。自己管理ができる・フィードバックなしでも継続できる・すでにデザインの基礎知識があるという条件が揃う人には、独学が効率的な選択肢になります。「何が正しいか分からないまま練習を続けてしまう」というリスクは独学では生じやすくなります。
作業効率を高めながら学習を進めるためには、作業効率を上げる方法で紹介されている時間管理の仕組みも参考になります。
| 学習方法 | 向いているケース | コスト目安 |
| 公式チュートリアル | 最初の基本確認 | 無料 |
| Udemy等の動画講座 | 体系的な手順を追いたい | セール時に数千円程度 |
| デザインスクール | フィードバックを受けながら学びたい | 数万〜数十万円 |
| フリーランスエージェント | 実績が積み上がり案件探しに移る段階 | 成功報酬型が多い |
スクールを検討する条件
デザインスクールは費用が数万〜数十万円とレンジが広く、カリキュラムの質・フィードバックの頻度・案件紹介の有無で判断が変わります。「独学で3ヶ月以上進めたが現在地が分からない」「フィードバックをもらえる環境がない」「UI/UXデザインなど特定のジャンルに特化して学びたい」という場合にスクールが当てはまります（Figmaスクールおすすめ5選｜CrowdWorks Town）。
スクール選びで確認すべき点は「卒業後の案件サポートの有無」「受講中のフィードバック頻度」「実案件を扱うカリキュラムがあるか」の3点です。費用の高低だけで判断すると、カリキュラムが動画視聴だけで終わり、独学と大差ない状態になることもあります。
独学の限界を感じたらコミュニティを先に試す
スクールに入る前に、まずFigmaの学習コミュニティ（DiscordのデザイナーコミュニティやFigma Community）でフィードバックをもらうことを先に試してください。費用をかけずに他者の目を入れられる環境は、独学の弱点を補う上で効果的です。コミュニティ参加で「何が足りないか」が明確になった段階でスクールを検討すると、費用対効果が上がります。
CHECK
▶ 今すぐやること: Udemyで「Figma 初心者」を検索し、評価4.5以上・レビュー100件以上の講座を1つチェックする（10分）
Q: 無料で学べる範囲と、費用をかけるべき範囲はどこで分かれますか？
A： 基本操作・トレース・バナー制作レベルまでは無料リソースで十分に到達できます。UI/UXデザインの設計手法・ユーザーリサーチ・デザインシステム構築といった領域では、体系的な学習環境への投資が有効になるケースがあります。
Q： Figmaスクールは未経験者でも受講できますか？
A： 多くのスクールが未経験者を対象としています。ただし、公式チュートリアルを終えた段階でスクールを検討する方が、授業の吸収率が上がります。
Figma練習はトレースからポートフォリオの流れで完結
Figmaの練習は「公式チュートリアルで基本確認→トレース20〜30枚→バナー・LP制作→ポートフォリオ整備→案件獲得」という流れで設計すると、遠回りなく進められます。練習段階から「目的・ターゲット・工夫点」を制作物に言語化する習慣を持っておくと、スキルと同時にフリーランスとして必要な説明力も身についていきます。コンポーネントとオートレイアウトを意識的に使えているか、自分で判断して1画面を仕上げられるかという2点が、案件を取れる段階かどうかの実用的な目安です。
練習を続けていくうちに「自分のデザインがどのくらいのレベルか」が分からなくなる時期は、ほとんどの人に訪れます。その時点でコミュニティでフィードバックをもらうか、小さな案件に応募して外の評価を受けることが、次の成長の起点になります。まず今日の1枚から始めてください。
| 状況 | 次の一歩 | 所要時間 |
| Figmaを触ったことがない | 公式チュートリアルを開いてフレームを1つ作る | 30分 |
| 基本操作は覚えた | 既存デザインのヘッダーだけトレースする | 30分 |
| トレースを10枚以上やった | バナーを1点オリジナルで制作する | 2時間 |
| 作品が3〜5点ある | 各作品に目的・ターゲット・工夫点を添える | 1時間 |
| ポートフォリオが整備できた | クラウドワークスでバナー案件に1件応募する | 30分 |
Figma練習に関するよくある質問
Q: FigmaとXDはどちらを学ぶべきですか？
A： 現在の案件市場ではFigmaを指定する案件が多数を占めており、新規に学ぶ場合はFigmaを選ぶと案件につながりやすくなります。XDはAdobe CCとの連携が強みですが、Figmaのシェアが現場では広がっています（Figmaのフリーランス案件・副業求人一覧｜Freelance Concierge）。
Q： Figmaでワイヤーフレームも作れますか？
A： 作れます。コンポーネントライブラリに「Wireframe Kit」が複数公開されており、これを使うとワイヤーフレーム専用の素材を使った設計が効率よく進められます。ワイヤーフレーム案件も練習の対象に含めることで、案件の幅が広がります。
Q： Figmaの練習にどのくらいの期間が必要ですか？
A： 毎日30分の練習を続けた場合、基本操作の定着に2〜4週間、ポートフォリオ初版の完成に2〜3ヶ月が目安になります。練習の内容と頻度によって大きく変わります。
【出典・参照元】
Figma公式チュートリアル（Get started with Figma design）
Figma初心者におすすめの練習方法7選｜LAF DESIGN
初心者におすすめ！Figmaのフリーランス事情を解説｜Tech Reach
Figmaスクールおすすめ5選｜CrowdWorks Town