入門者から実務者へ：Figmaでマスターするデザインシステム A to Z

[私が面接官として参加した実際の事例]

デザインシステム構築能力を備えた

候補者Aが「ジュニア」プロダクトデザイナーとして採用された理由 🙌

私は最近働いていたチームでジュニアプロダクトデザイナーを採用することになり、面接官として評価に参加しました。その際、候補者A、B、Cがいたのですが。

A、B、Cは全員、ポートフォリオにおいて次のような核心的な逆量をしっかりと示していました。UX/UIプロジェクトを進めるにあたって、ユーザーリサーチ、デザインシンキング、ペルソナといった部分を行ったことを示していましたし、ワイヤーフレームやハイファイUIデザインのような視覚的な成果物も、クオリティ高く作り上げていました。

しかし、結果的に志願者Aが採用されました。なぜでしょうか？ 志願者Aは、ポートフォリオにおいて非常に明確な一つの差別化ポイントが現れていました。それはまさにデザインシステムの構築能力でした。志願者Aは、私を含む面接官たちに、デザインシステムを専門的に構築し管理できるだろうという確信を与えてくれました。つまり、この人を採用すれば、デザインシステムの業務において多くの教育を必要とせず、すぐに業務を任せられるという結論を下すことができたのです。

応募者B、Cもカラーやタイポグラフィなど、簡単なレベルの構築経験はありましたが、応募者Aはデザイン原則、ファウンデーション、トークン、UIコンポーネントの制作および管理を含め、デザインシステムを実務で求められるレベルで包括的に構築した経験があることを示していました。そして、そのために実務で必要とされるFigmaのスキルも備えていました。さらに、それを自身のポートフォリオを通じて証明していました。

デザインシステム構築能力がUX/UIデザインの就職に

において、もはや選択ではなく必須である2つの理由🤔

1つ目の理由。現場でデザイナーがデザインシステムに対してオーナーシップを持ち、運用しなければならないため

プロダクトデザイナーは、他のデザイナー、開発者、PMなど、さまざまなステークホルダーと協業します。その中で明確な一点は、デザインシステムに対する一次的なオーナーシップはデザイナーにあるという点です。新しいカラー、トークン、コンポーネントが必要になれば、デザイナーが自ら作成してデザインシステムに反映し、それをチームと共有してコミュニケーションを取らなければなりません。規模の大きな会社にはデザインシステム専任のデザイナーがいることもありますが、そうだとしても、すべてのデザイナーはデザインシステムの発展に貢献し続ける必要があります。

二つ目の理由。実務担当者や面接官にとって、新人にデザインシステムを教育することは大きな負担となる。

会社側の視点に立つと、デザインシステムの経験がないデザイナーを採用することは大きな負担です。もし新人がデザインシステムを知らなければ、実務デザイナーが直接教育しなければなりません。しかし現実的に「教育のために業務を減らしてほしい」という要望が受け入れられる可能性は低く、通常は実務と教育を並行することになります。問題は、デザインシステムの教育が数日で終わるものではないという点です。少なくとも数週間、長ければ数ヶ月かかります。結局、これは実務担当者にとって大きな負担となり、そのため会社は自然とすでに基礎能力を備えたデザイナーを好むようになります。

まとめると、UX/UIデザイナーを目指す入門者にとって、デザインシステムを構築する能力は選択ではなく必須であり、この講義を通じて実務で求められるデザインシステムのスキルを身につけ、希望するキャリア目標を達成できるようサポートいたします。

受講生たちのリアルな講義レビュー ✨

デザインシステムをマスターしようとする受講生の方々を通じて検証した内容で、

核心的に必要なコンテンツを厳選して講義に込めました。

この講義を通じて何を学ぶことになりますか？ 📖

この講義は、デザインシステムを「ツールの機能」としてではなく、「プロダクトを作るためのデザインシステム」の原理を理解することから始まります。概念 → 原則 → ファウンデーション → トークン → コンポーネント → サービスへの適用まで、現場でデザインシステムを構築する際の一連の思考プロセスと実践的なスキルをすべて網羅しています。受講完了後には、デザインシステムについて説明ができ、自ら構築し、サービスに適用できる状態になることを目標としています。

そして、デザインシステムを活用した製品・サービス設計の実務チップス

デザインファウンデーション、トークン、コンポーネントは、最終的に一貫性のある画面を設計し、質の高い製品やサービスを作るためのツールです。これまでに作成したデザインシステムをもとに、実際の画面を設計する中で直面する悩みや、画面設計 ↔ コンポーネント・トークンの拡張が繰り返されるイテレーションの過程における実務的な判断基準とヒントを共有します。

単なる理論ではなく、実務でデザインシステムを運用しながら直面する「いつ新しいコンポーネントを作るべきか」、
「どこまでをバリエーションとして持たせるべきか」といった現実的な問いに対する答えを扱います。

この講座を通じて何を作りますか？ 🛠️

[総合実践プロジェクト] 実務ですぐに使えるコンポーネントシステム設計実習

この講義では、実際のプロダクトで使用される基準でコンポーネントを設計し、状態（state）、オプション（variant）、拡張性まで考慮したコンポーネントシステムを直接構築します。

ボタン、テキストフィールド、セレクトボックス、スナックバー（Snackbar）など、実務で最も頻繁に使用されるコンポーネントを中心に
単なるUIデザインを超えて「システムとしてのコンポーネント」を作る過程を扱います。

各コンポーネントは、基本（Default）状態だけでなく、

• Hover / Active / Disabled / Error など、さまざまな状態

• Size、Type、Iconの有無といったオプション

• ライト/ダークモードへの考慮など

  
  

どのように構造化し管理すべきかを、実習を通して身につけます。

また、Figmaを活用してコンポーネント構造をどのように分け、属性（Properties、Variant、Booleanなど）をどのように適用すべきか、以前に定義したプリミティブ（Primitive）トークンとセマンティック（Semantic）トークンをコンポーネントにどのように活用すべきか、今後コンポーネントが増えてもメンテナンスが可能な設計とは何かを実務デザイナーの視点から説明します。この過程を通じて

「ただきれいなコンポーネント」ではなく
開発チームと協業可能なコンポーネントシステムを、自ら作ってみることができます。

[総合実践プロジェクト] デザイントークンとコンポーネントを組み合わせてレスポンシブWebサービスを作る

自分で設計したデザイントークンとコンポーネントを適用し、モバイル・タブレット・デスクトップのすべての環境を考慮したレスポンシブWebサービスを作成します。デバイスごとに画面を新しくデザインする方式ではなく、一つのデザインシステムを基準にレイアウトとコンポーネントを組み立てながら、柔軟に拡張していくプロセスを実習します。

これを通じて、レスポンシブウェブをシステム的な観点からデザインする方法と、実務でデザインシステムの要素を再利用する手法について、自然に習得することができます。

この講義はどのような方に役立つでしょうか？ 🧭

履修推奨科目のご案内

フィグマを全く知らない方であれば、私がInflearnに開設した「Figmaを活用したUIデザイン入門から実践まで」講座を先に受講されることをおすすめします。以下のリンクから購入される方は、30パーセント割引された価格で受講いただけます。該当の講座を受講した後にこのデザインシステム講座を受ければ、より爆発的な勢いで素早くスキルをマスターできるはずです。（🎁 講座割引クーポン）

よくある質問 (FAQ)

Q. WindowsとMacBookで学習可能ですか？

A. 可能です。この講座はFigmaツールを基準に作成されています。Figmaはブラウザベースのソフトウェアであるため、WindowsとMacBookの両方で実行可能です。また、この講座で使用するショートカットキーについても、Windows用とMacBook用をそれぞれお伝えします。

Q. Figma（フィグマ）の無料版でも受講できますか？

A. この講義の理論的な部分とほとんどの内容は、Figmaの無料版でも受講いただけます（講義の70%程度）。バリアブル、コンポーネント、オートレイアウトなどはすべて無料版で使用可能です。ただし、バリアブルを活用してモードを適用する部分や、時折お見せするDevモードに関する部分は無料版では利用できないため、受講期間中は投資と考え、月額16ドルで有料版を使用されることをお勧めします。

Q. どうすればデザインシステムを早くマスターできるでしょうか？

A. デザインシステムの基本原理とFigmaツールの活用法を習得された後は、数多くのリファレンスを研究し、また「直接」構築してみる練習をすることが重要だと思います。この講義を通じて様々な事例を練習し、総合実践プロジェクトに沿って作ってみることで、いつの間にかデザインシステムを構築できるようになっている自分に気づくはずです。そして、その後は継続して練習と適用を繰り返し、実務に就いた際には実際のプロジェクトに落とし込んでみることをおすすめします。

Q. 非専門家でも受講できますか？

A. はい、この授業は入門者や非専攻の方に合わせて設計された科目です。しかし、前提知識であるUXデザインの概念的な基礎やUIデザインのための基礎知識、Figmaの基本機能を習得してから受講されると、より爆発的に本講義の内容を素早く理解し、スキルを習得できるはずです。UX/UIデザインを始めたばかりの段階であれば、私がInflearnに開設した入門者のためのUXデザイン概論を先に受講することをお勧めします。UXに関する基本知識はある程度持っているけれど、Figmaを使ったことがないという方は、Figmaを活用したUIデザイン講座を先に受講してからお越しいただければ、この講義を通じてデザインシステムを何倍も速くマスターできるでしょう。

Q. 講義を聞いていて質問ができた場合はどうすればいいですか？(コミュニティ運営のご案内)

A. 講義を受けながら疑問が生じることがあるかと思います。質問への迅速な回答とコミュニケーションのために、グループオープンチャットコミュニティを運営しており、また該当講義の質問掲示板を通じても回答を差し上げています。さらに、ミッションなどの課題については、該当講義のコミュニティ掲示板を積極的に活用し、受講生同士の共有を促進しながら共に成長することを目指しています。