フリーランスが1人でFigmaデザインシステムを構築する場合、色・テキスト・コンポーネントの3層を最初に固めれば、最短2〜3時間で実務利用できる最小構成が完成します。この記事では5ステップの手順と、案件単価を上げるための運用設計まで解説します。
▶ 3日で初案件PR
この記事でわかること
色・テキスト・コンポーネントの3層を2〜3時間で構築する手順がわかる。コンポーネント設計で詰まらない4種類の優先順位がわかる。デザインシステムを案件単価向上に直結させる5つの仕組みがわかる。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
Figmaデザインシステムの本質は「再利用できる部品と、その使い方のルール」を1つのファイルにまとめることです。色・テキスト・コンポーネントの3層を順番に固めれば、一人でも2〜3時間で動く最小構成が作れます。作り終えたらライブラリとして公開し、更新ルールまで決めて初めて「システム」として機能します。
CHECK
▶ 今すぐやること: 既存のFigmaデータを開き、画面上に使われているカラーコードを書き出して「ブランドカラー」「ニュートラル」「状態色」の3グループに分類する（30分）
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| デザインシステムが何か知りたい | Figmaデザインシステムは3層で構成 | 3分 |
| 何から着手すればよいか迷っている | 作業開始は5ステップで判断 | 5分 |
| コンポーネント設計で詰まっている | Figmaコンポーネントは4種類が土台 | 5分 |
| 一人・少人数での運用方法を知りたい | Figmaデザインシステムは最小5要素で運用 | 4分 |
| 案件提案・単価向上に活かしたい | フリーランスは5つの仕組みで案件単価を上げる | 6分 |
Figmaデザインシステムは3層で構成
「デザインシステム」という言葉を聞いて、大企業向けの複雑な仕組みと受け取る方は少なくありません。ただ、Figmaでの実装に限定すれば、構造は3層に整理できます。フリーランスであっても、この3層を順番に固めるだけで実務に使えるシステムが完成します。
デザインシステムの定義は「部品＋ルール」の1ファイル
デザインシステムとは、製品のルック＆フィールを統一するための「構成要素と使用ルールのセット」です（Figma公式 デザインシステムとは）。チームに統一言語を与えることで、デザイナーが毎回ゼロから色やボタンを考える時間をなくし、開発者が仕様を読み違える機会を減らします。フリーランスの場合でも、クライアントへの引き継ぎ資料として、あるいは複数案件での部品再利用として、直接的な作業時間の削減につながります。「大企業専用ツール」ではなく、1人の作業効率を上げるための仕組みとして捉えるのが適切です。
Figmaでの3層はトークン・コンポーネント・ドキュメントに分かれる
Figmaにおけるデザインシステムは、第1層がデザイントークン（色・テキスト・スペーシングの数値定義）、第2層がコンポーネント（ボタン・入力欄・カードなどの再利用部品）、第3層がドキュメント（命名規則・使用ガイドライン）という3層構造です（Figma公式 デザインシステムの構築方法）。この順序には明確な意味があります。第1層を先に固めなければ、コンポーネントの色やサイズがバラバラになり、後から修正するコストが跳ね上がります。第1層さえ正確に定義すれば、コンポーネントは比較的短時間で揃えられます。
スタイルとVariablesは役割が異なる
Figmaには「スタイル」と「Variables」という2種類のトークン管理機能があります。スタイルは色やテキストのセットに名前をつけて再利用する機能で、2023年以前から使われてきた方法です。VariablesはFigma 2023年の大型アップデートで導入された機能で、ライトモード・ダークモードの切り替えや、数値のスケール定義など、より構造的なトークン管理が可能です（Figma Learn デザインシステムを構築する）。最初はスタイルで運用し、ダークモード対応や大規模トークン管理が必要になった段階でVariablesに移行するのが現実的です。いきなりVariablesから入ると設計が複雑になりやすく、作業が止まるリスクがあります。
「作って終わり」では機能しない理由
デザインシステムを一度作っても、更新ルールがなければ形骸化しやすくなります。これはシステム自体の問題ではなく、「誰が、いつ、どのタイミングでコンポーネントを更新するか」が決まっていないことが原因です。フリーランスの場合は自分が更新担当になるため問題が起きにくく見えますが、複数案件を抱えると「どのファイルのデザインシステムを最新とするか」が曖昧になりやすいです。ファイル命名規則と更新日記録を最初から設計に組み込んでください。
CHECK
▶ 今すぐやること: Figma公式の「デザインシステムとは」ページを読み、自分の直近案件でどの3層が不足しているかをメモする（15分）
Q: デザインシステムとスタイルガイドの違いは何ですか？
A： スタイルガイドは視覚表現のルールをドキュメント化したものです。デザインシステムはそこに実際の再利用部品（コンポーネント）と運用ルールが加わります。Figmaで作るデザインシステムは、スタイルガイドの内容をそのまま実装として持っているため、ドキュメントと実装が乖離しにくい点が強みです。
Q： FigmaのプランはFreeで足りますか？
A： 個人利用・小規模案件であればFreeプランでも基本的な構築は可能です。複数メンバーへのライブラリ公開やブランチ機能はProfessional以上が必要です（Figma公式料金ページで最新情報をご確認ください）。フリーランスの1人ファイルとして管理する方法であれば、Freeプランで対応できます。
作業開始は5ステップで判断
「何から手をつければいいのか分からない」という状況は、Figma学習者に共通して起きます。手順を5段階に分けることで、どこで詰まっているかが明確になります。
ステップ1はUIの棚卸しから始める
最初にやるべきことは、新しいコンポーネントを作ることではありません。既存のFigmaデータや完成画面のスクリーンショットを並べ、「何色が使われているか」「どのフォントサイズが出現しているか」「ボタンは何パターン存在するか」を書き出す棚卸し作業から始めてください。この段階で初めて、自分のデザインに何種類の青色が混在しているかが可視化されます。整理前には同一ブランドカラーの派生だけで複数の「似た青」が存在するケースも珍しくありません。これを3〜4色に絞り込む決断が、後工程の品質を決定します。
ステップ2はカラートークンの定義
棚卸しが終わったら、色を「ブランドカラー」「ニュートラルカラー」「状態色（Success/Warning/Error）」の3カテゴリに分類して命名します。命名規則は「カテゴリ/用途/段階」の形式（例: color/brand/primary、color/neutral/100）が一般的です。Figmaのスタイル機能を使って各色に名前をつけることで、後からカラーを変更した際にすべての参照箇所が自動更新されます。1案件あたりのカラー定義は10〜15色程度に抑えると、後の保守コストが最小化されます。
ステップ3はテキストスタイルの階層定義
カラーが決まったら、テキストスタイルを役割ごとに定義します。「見出し（H1〜H3）」「本文（Body/Small）」「ラベル/キャプション」の5〜7段階が標準的な構成です。各スタイルにはフォントファミリー・サイズ・行高さ・字間をセットで定義します。フォントサイズは感覚で決めないことがポイントです。Modular Scaleと呼ばれる比率（1.25や1.333など）を使うと、視覚的に整合性のとれた階層が作れます。比率1.25を基準にすると、Body=16px、H3=20px、H2=25px前後、H1=31px前後という構成が導けます（実際の値はプロジェクトの方針に合わせて調整してください）。
ステップ4はコンポーネント作成
スタイルが揃ったら、コンポーネント作成に進みます。優先順位は出現頻度で決めてください。ほぼすべての画面に登場する「ボタン」「入力フォーム」「アイコン」「カード」から作成し、特定画面にしか出ない複雑なコンポーネントは後回しにします。Auto Layoutを使ってコンポーネントの内側余白と間隔を定義し、Variantsで状態差分（Default/Hover/Disabled/Error）を1つのコンポーネントにまとめます。「バリアントが増えすぎて管理できない」と感じた場合は、状態数を絞るか、コンポーネントの粒度を見直すサインです。
ステップ5はライブラリ公開と運用ルール設定
コンポーネントとスタイルが揃ったら、Figmaのライブラリ機能でPublishします。PublishするとチームプロジェクトまたはOrganization内の他のファイルからコンポーネントを参照できるようになります。同時に「誰がいつPublishするか」「変更前にレビューするか」というルールを最低限1ページのドキュメントとして記録してください。この運用ルールがなければ、複数人で編集した際にコンポーネントが勝手に変更され、参照先のデザインが意図せず書き換わるトラブルが発生します。
CHECK
▶ 今すぐやること: 直近のFigmaファイルを開き、使われている色をすべて書き出して3カテゴリに分類する（30分）
Q: 既存のデザインをデザインシステム化する場合、一からやり直すべきですか？
A： やり直す必要はありません。既存のデザインから「最もよく使われている要素」を抽出してコンポーネント化するのが効率的です。全ページを再設計するよりも、頻出要素を優先的に整理するアプローチが、作業コスト削減に効果的です。
Q： スタイル定義とVariables定義はどちらを先にすべきですか？
A： 最初はスタイル（色・テキスト）から始めてください。Variablesはダークモード対応やトークンの階層化が必要になった段階で導入する方が、設計の複雑さを抑えられます。Variablesを先に習得しようとすると学習コストで作業が止まりやすいです。
Figmaコンポーネントは4種類が土台
コンポーネント設計で「どこまで細かく作るべきか」という判断に迷う方は多いです。最小限の4種類から始める方針が、過剰設計を防ぐ現実解です。
ボタンコンポーネントはVariantsで状態を管理
ボタンは最も出現頻度が高いコンポーネントです。Primary・Secondary・Tertiary（テキストのみ）の3タイプを基本とし、各タイプにDefault・Hover・Focus・Disabled・Loadingの5状態をVariantsで定義します。合計15パターンが1つのコンポーネントに収まります。Auto Layoutを使ってラベルテキストの長さに合わせて横幅が自動調整されるよう設定すると、使う側が幅を手動で変える必要がなくなります。ボタンのサイズ（Large/Medium/Small）をVariantsに含めるかどうかは案件の規模次第です。フリーランスの1〜2人規模であればサイズはプロパティで対応し、Variants数を増やしすぎない方が保守性が上がります。
入力フォームはエラー状態の設計が重要
入力フォームコンポーネントはDefault・Focus・Filled・Error・Disabledの5状態が基本です。ErrorとFilled状態を省略しがちですが、省略すると開発者がこの状態を別途自前で実装することになるため、仕様の齟齬が起きやすいです。エラーメッセージテキストをコンポーネント内部に含める設計にすると、開発との連携品質が上がります。フリーランスのFigma案件を受注する際、エラー状態が定義されていると「仕様が丁寧」という印象を与え、次の案件につながりやすくなります。
カードコンポーネントはコンテンツを切り離して設計
カードはコンテナ（枠・影・余白）とコンテンツ（画像・テキスト・アクション）を分離して設計します。コンテナをコンポーネント化してコンテンツはインスタンスとして差し込む構造にすると、1つのカードコンポーネントで商品カード・記事カード・プロフィールカードを表現できます。カードの高さを固定してしまうとテキスト量が変わった際にはみ出すトラブルが起きます。Auto LayoutでコンテナのResizingをHug Contentsに設定し、コンテンツに合わせて自動伸縮するよう設定してください。
アイコンは外部ライブラリの活用が最短経路
アイコンをゼロから作成する必要はありません。Material Symbols（Google提供）やRemix Iconといった無料ライブラリをFigmaのCommunityからインポートし、デザインシステムファイルにリンクする方法が最短経路です。独自アイコンが必要な場合のみ追加作成するという方針にすることで、アイコン設計にかかる工数を削減できます。
CHECK
▶ 今すぐやること: Figma Communityで「Material Symbols」を検索して複製し、自分のデザインシステムファイルにリンクする（20分）
Q: VariantsとComponent Propertiesはどちらを使うべきですか？
A： FigmaのComponent Properties（2022年導入）は、テキスト・アイコン表示の切り替えや真偽値をVariantsよりもシンプルに管理できます。状態差分（Default/Hover等）はVariants、テキストや要素の表示切り替えはComponent Propertiesと使い分けることで、1コンポーネントあたりのVariants数を抑えられます。
Q： Auto Layoutを設定すべき優先コンポーネントはどれですか？
A： ボタン・入力フォーム・バッジ・タグ・モーダルヘッダーの5種類を優先して設定してください。これらはコンテンツ量によってサイズが変わる頻度が最も高いコンポーネントであり、Auto Layout未設定のまま使い続けると、デザイン変更のたびに手動リサイズが発生します。
PR提供: 日本デザインスクール（デザスク）
Figmaデザインシステムは最小5要素で運用
完成度を追求しすぎると、デザインシステム構築自体が目的化します。最小5要素を満たせば実務で機能するシステムになるため、まずここを目標にしてください。
最小構成の5要素と判断基準
実務で機能する最小構成は、カラースタイル・テキストスタイル・スペーシング定義・基本コンポーネント（ボタン・フォーム・カード）・ライブラリPublishの5要素です。
Figmaで基本的なデザインシステムを組み立てた実践者の声として、「色→テキスト→コンポーネント→公開という流れで、Figma上で基本的なデザインシステムを組み立てた」という報告があります（Figmaで簡単！デザインシステムの基本をマスターして）。
この5要素が揃えば、新しい画面を作る際に「色を選ぶ」「テキストスタイルを選ぶ」「コンポーネントをドラッグする」という3動作でデザインが組み上がります。Variables・Dev Mode連携・承認フローはすべてこの基盤が安定してから追加する拡張要素です。初版では省略して問題ありません。
スペーシングは4pxか8px基準で統一する
スペーシングの基準が決まっていないと、コンポーネント間の余白が3px・5px・7pxとバラバラになり、視覚的な統一感が失われます。4px基準（4・8・12・16・24・32・48px）または8px基準（8・16・24・32・48・64px）のどちらかを選んで全体に適用してください。情報が密なBtoB管理画面では4px基準、余白を広くとるマーケティングサイトでは8px基準が適合することが多いです。プロジェクト途中での変更は全コンポーネントの余白を修正する大規模作業になるため、最初に決定して変更しないことが前提です。
命名規則は3階層で統一する
Figmaのコンポーネント名・スタイル名・レイヤー名の命名規則が統一されていないと、検索やライブラリ参照の際に混乱が生じます。推奨フォーマットは「カテゴリ/コンポーネント名/バリアント名」の3階層（例: Form/Input/Error、Button/Primary/Hover）です。命名規則はシンプルな1ページのドキュメントとしてデザインシステムファイルのカバーページに記載しておくと、引き継ぎ時の説明コストがほぼゼロになります。
少人数チームでの運用方針
少人数チーム向けに、色数やタイポグラフィ段階を絞り、トークンとコンポーネントをまとめてライブラリ化する方針が実践されています（2〜5人の制作チームでも崩れないFigmaデザインシステム）。
2〜5人規模では、厳密な承認フローを作るよりも「変更した場合はチャンネルに通知する」というルール1つで十分機能します。フリーランスの1人運用では通知すら不要ですが、クライアントに渡す場合を想定して変更ログを残す習慣をつけると、後のトラブルが減ります。週1回の更新サイクルを設定し、まとめてPublishする方式が最も運用コストが低いです。
Variablesによるトークン管理は第二段階
VariablesはFigmaの高度な機能であり、ダークモード対応・テーマ切り替え・数値トークンの階層定義が可能です。変数の概念を理解していない状態で導入すると、スタイルとVariablesが二重管理になるという事故が起きます。スタイルで運用を開始し、ダークモード対応の必要性が生じた段階でVariablesに移行するという2段階のアプローチが、学習コストを分散させる現実解です。Variables導入の目安は「コンポーネントが30個を超え、かつカラースキームが2種類以上必要になった時点」です。
CHECK
▶ 今すぐやること: 自分のFigmaファイルにカバーページを追加し、カラー定義・テキストスタイル・命名規則の3項目を記録する（20分）
Q: スペーシングは4pxと8px基準のどちらが多く使われていますか？
A： 汎用性では8px基準が一般的です。管理画面・データグリッド・フォームが多いBtoBプロダクトでは4px基準の方が細かい余白調整に対応しやすいです。8px基準から始めて、窮屈さを感じた時点で4px基準への切り替えを検討してください。
Q： Dev Mode連携はどの段階で設定すべきですか？
A： コンポーネントとスタイルが一通り揃った後が適切です。Dev Modeを設定すると、開発者がFigmaファイルを開いた際にコンポーネントの仕様（サイズ・色コード・余白）が自動表示されるため、仕様書を別途作成するコストが削減されます。フリーランスが開発者と連携する案件では、Dev Mode対応はそのまま単価交渉の材料になります。
フリーランスは5つの仕組みで案件単価を上げる
デザインシステムは作れるだけでは差別化になりません。「どう使って単価を上げるか」まで設計することが、フリーランスとしての実質的な価値です。
ハック1: 既存資産の再利用で納期を短縮して受注単価を維持
【対象】: 複数案件を抱えているフリーランスデザイナー
【手順】: 最初の案件でデザインシステムを構築する（3〜5時間）。次の案件を受ける前に、既存デザインシステムの色・テキスト・コンポーネントが新案件に流用できるか確認する（30分）。流用できる部品を新プロジェクトファイルにリンクし、差分のみ追加作成する（1〜2時間）。
【コツと理由】: デザインシステムの再利用で工数を削減できると、同じ納期内により多くの画面を完成させるか、余った時間をUX改善の提案に使えます。後者は「仕様通りに作るデザイナー」から「提案するデザイナー」への転換であり、単価向上につながります。
【注意点】: 前の案件のコンポーネントをそのまま流用してブランドの一貫性を崩すことは避けてください。色・ロゴ・フォントはクライアントごとにスタイルを差し替え、構造のみ再利用する方針を徹底してください。
ハック2: デザインシステム納品で成果物を1資産分追加して単価交渉
【対象】: Webサイト・アプリのデザインを受託しているフリーランス
【手順】: 案件の画面デザインと並行してデザインシステムをFigmaで構築する（通常の1.2〜1.5倍の工数）。納品時に「画面デザイン」と「デザインシステム（Figmaライブラリ）」を別ファイルとして渡す（30分の説明資料追加）。次回以降の改修案件の見積もりに「デザインシステム保守費用」を別途設定する（見積書変更のみ）。
【コツと理由】: デザインシステムを「クライアントにとって資産となる再利用可能ファイル」として提案すると追加費用が通りやすくなります。クライアント側も「次回改修コストを下げる投資」として受け入れるケースがあります。フリーランスの見積書の書き方を参考に、デザインシステム構築費を独立した行として記載することで、費用の根拠を明確に伝えられます。
【注意点】: デザインシステムを納品する際に口頭説明だけで終わらせることは避けてください。1ページのREADMEドキュメント（カラー定義・命名規則・更新方法）をFigmaのカバーページに記録して渡すことで、クライアントが社内で自走できる状態になり、信頼度が上がります。
ハック3: Dev Mode設定で開発との連携コストを削減して再発注を促進
【対象】: デザインと開発の橋渡しに課題を感じているフリーランス
【手順】: FigmaのDev Modeを有効にし、コンポーネントのプロパティ（サイズ・色コード・余白・フォント）が開発者に自動表示される状態を確認する（15分）。コンポーネントに「使用場面」の説明をFigmaのコメント機能で追記する（30分）。開発者に「仕様書なしでFigmaから直接確認できます」と説明して連携フローを変更する（打ち合わせ30分）。
【コツと理由】: Dev Modeで仕様をFigmaに持たせることで、別途仕様書を作成するコストを削減できます。開発者からの仕様確認の問い合わせが多い案件では、コミュニケーションコストを削減できます。
【注意点】: Dev Modeを設定しただけで満足することは避けてください。開発者が実際にDev Modeから仕様を読み取れているか、最初の1週間は確認の時間を設けてください。慣れていない開発者に説明なしで渡すと、結局仕様確認の連絡が増えることがあります。
ハック4: Variantsの体系化でクライアントへの提案スピードを上げる
【対象】: UIの修正・提案を繰り返すフリーランスデザイナー
【手順】: ボタン・フォーム・カードの主要3コンポーネントにVariantsを設定し、状態差分をすべて1コンポーネントに集約する（2〜3時間）。提案時は1つのプロトタイプファイルでVariantsを切り替えながらクライアントに見せる（提案準備30分）。フィードバックをVariantsのプロパティ変更だけで反映し、その場でクライアントに確認させる（打ち合わせ内15分）。
【コツと理由】: 「Variantsで状態を切り替えてその場で確認」するアプローチをとることで、クライアントの意思決定スピードが上がります。打ち合わせの中でリアルタイムに変更を見せられるため、「持ち帰って修正して再提出」のサイクルを減らし、提案から決定までの期間を短縮できます。
【注意点】: Variantsを増やしすぎてコンポーネントの管理が破綻することは避けてください。1コンポーネントあたりVariantsが増えるとFigmaの動作が重くなります。Variantsが多くなってきたら、コンポーネントを分割するか、Component Propertiesで代替できるか検討してください。
ハック5: 最小構成の公開で1日でプロジェクト参加できる体制を構築
【対象】: 初めてチーム案件に参加するフリーランスデザイナー
【手順】: デザインシステムファイルのカバーページに「クイックスタート（5分で使えるようになるガイド）」を作成する（30分）。Figmaのライブラリ公開手順を1スクリーンショット付きで記載し、新メンバーが自力で設定できる状態にする（30分）。新メンバーが参加した最初の日に「カバーページを読んで疑問があれば聞いてください」とだけ伝える（2分）。
【コツと理由】: クイックスタートページを先に用意しておく方が、口頭で長時間説明するより教育コストを大幅に下げられます。クイックスタートが用意されていれば、新メンバーが参加した初日からデザイン作業を開始できます。クイックスタートがない場合、環境構築と質問応答だけで数日かかることもあります。
【注意点】: クイックスタートページを完璧に仕上げようとすることは避けてください。最初は箇条書き3行のメモ程度で十分機能します。完璧なドキュメントを目指して作業が止まるよりも、荒削りでも使えるドキュメントを当日中に用意する方が価値があります。
CHECK
▶ 今すぐやること: 直近の案件見積もりを見直し、「デザインシステム構築費」の行を追加した新しい見積もりテンプレートを作成する（30分）
Q: デザインシステム構築のスキルを証明するにはどうすればよいですか？
A： 自分で作ったデザインシステムをFigma Communityで公開してください。公開することで閲覧数・複製数が実績として可視化され、ポートフォリオに「Figma Community掲載・閲覧数〇〇件」と記載できます。クライアントが技術力を判断する際の具体的な根拠になります。
Q： フリーランスがデザインシステム案件を獲得するにはどこで探すべきですか？
A： クラウドワークス・ランサーズの「Figma」「UIデザイン」タグ付き案件、またはレモングなどのフリーランス向けエージェントが主な経路です。「デザインシステム」と明記した案件はまだ少ないですが、「UIデザイン+Figma」の案件に「デザインシステム構築経験あり」と記載して応募すると差別化になります（フリーランスのFigma案件）。
Figmaデザインシステムを5ステップで完成させる：今週中に動き出す3つの行動
Figmaデザインシステムの本質は「色・テキスト・コンポーネントの3層を定義し、ライブラリとして公開する」ことであり、フリーランスでも2〜3時間で最小構成が完成します。完成度を追求して作業を止めるよりも、最小5要素を揃えて実案件で使い始め、必要に応じてVariablesやDev Mode連携を追加する段階的なアプローチが最も費用対効果が高いです。デザインシステムは作業効率化ツールであるだけでなく、クライアントへの納品物として、あるいは案件単価を上げる提案材料として活用できます。
一度作ったデザインシステムは、次の案件に持ち込めます。最初の3時間を今週中に使って最小構成の第一版を完成させることが、半年後の作業効率と単価を決める分岐点です。作業効率を上げる方法と組み合わせることで、デザインシステム構築の時間を確保しながら既存案件の品質も維持できます。
| 状況 | 次の一歩 | 所要時間 |
| まだ何も作っていない | 既存Figmaファイルからカラーコードを書き出す | 30分 |
| スタイルは定義済み | ボタンコンポーネントをVariants付きで作成する | 1時間 |
| コンポーネントはある | ライブラリとしてPublishし、別ファイルから参照できるか確認する | 20分 |
| すべて揃っている | デザインシステム納品を含む見積もりテンプレートを作成する | 30分 |
Figmaデザインシステムに関するよくある質問
Q: デザインシステムを作るのにどのくらいの時間がかかりますか？
A： 最小構成（カラー・テキスト・基本コンポーネント3種・ライブラリ公開）であれば2〜3時間が目安です。完璧なシステムを目指さず最小構成から始めてください。コンポーネントを20種類以上揃える本格的な構成になると、初期構築だけで10〜20時間かかります。
Q： FigmaのVariablesは必ず使う必要がありますか？
A： 必須ではありません。スタイルだけでもデザインシステムは機能します。Variablesが有効なのは、ダークモード対応や複数テーマへの対応が必要な場合です。小規模案件や1人運用であれば、スタイルで十分です。Variablesは「必要になったら導入する拡張機能」として位置づけてください。
Q： デザインシステムのテンプレートを参考にする場合、何を使えばよいですか？
A： Figma Communityで「Design System」を検索すると、Google Material Design・IBM Carbon・Radix UIなど、主要なデザインシステムの公式Figmaファイルを無料で複製できます。これらを参照して構造を把握し、自分のプロジェクト向けに改変する方が、ゼロから設計するより理解が早まります。