강의

멘토링

커뮤니티

BEST
Design

/

UI/UX

[UI3アップデート] Figma変数を利用したデザインシステムを構築する

最新のUI3インターフェースでFigmaの変数(バリアブル)を活用して、一緒にデザインシステムを作りましょう🔥 変数は一貫したユーザーエクスペリエンスを提供し、デザインプロセスを革新的に改善できる鍵🔑です。

難易度 初級

受講期間 無制限

  • bolduxlab
피그마
피그마
디자인 시스템
디자인 시스템
토큰
토큰
figma variable
figma variable
Figma
Figma
Figma Tokens
Figma Tokens
Design System
Design System
Atomic Design
Atomic Design
피그마
피그마
디자인 시스템
디자인 시스템
토큰
토큰
figma variable
figma variable
Figma
Figma
Figma Tokens
Figma Tokens
Design System
Design System
Atomic Design
Atomic Design

学習した受講者のレビュー

受講後に得られること

  • 変数を活用してデザインシステムを構築する

  • 2025年上半期 Figma 最新アップデート反映

  • デザイントークン、アトミックデザインを基盤に変数の概念を掘り下げる

  • 33+ コアデザインコンポーネントを最初から一つ一つ製作する

  • バリアブルモードを活用して、B2B、B2C、モバイルUIページを作成する

Figma Variable を活用したデザインシステム完璧ガイド 🔥


もしかして新しいUIインターフェースに慣れるのが難しいですか?

最近アップデートされたFigmaの適切な日本語資料を見つけるのが難しかったでしょうか?


🙋‍♀ トークンおよびデザインシステムを学びたいけれど、資料が多くてどこから始めればいいのか途方に暮れていた方々、

🤷 実務でどのようにバリアブル(Figma Tokens)を活用し、デザインシステムに適用すべきか難しく感じていた方々、

心配しないでください!

初心者のための基礎理論から実務者のための実践的な活用方法まで一度に学べる講義をご用意いたしました。特にFigmaとデザインシステムの能力が企業で必須要件とされる時点で、この講義は現場で活用できる実用的なスキルとインサイトを提供いたします。

デザイナーボールドをご紹介します😀

こんにちは、デザイナーのボルドです。現在私はロンドンでSr.プロダクトデザイナーとして働いており、インスタグラムとブランチを通じて私の実務の話を共有しています。

過去8年間、UXリサーチャーとプロダクトデザイン分野で働きながら、様々なプロジェクトを経験しました。特に最近、Figmaデザインシステムにバリアブルをアップデートするプロジェクトを実行し、これによってデザイン業務の生産性と効率性が2倍以上向上し、一貫したUX体験を作り出す成果を収めました。本講義は私の実務経験とノウハウを込めて、デザイントークン/デザインシステム概念の核心を理解し、実務に適用する方法に重点を置いています。これを通じて皆さんが現場で実際に活用できる実用的なスキルとインサイトを得て、デザインシステム能力を開発できるよう私がお手伝いします!

一緒に学び成長する楽しい旅路に参加してみませんか!

バリアブルを活用したデザインシステムを学ぶべき理由

Figmaが現在デザインツール市場で世界的に圧倒的な1位である理由は、まさにデザインシステム強力なコラボレーション機能のためです。

Figmaはデザインシステムの核心である「デザイントークン」の役割を果たすVariableを提供しており、今後多くのアップデートが予定されています。また、Atlassian、Microsoft、IBMなど多くのグローバル企業もすでにVariableをデザインシステムに導入しています。

本講義では、バリアブルを活用してデザインシステムを作成し、デザインの一貫性と効率性を向上させる方法を学ぶことができる講義です。

この講義だけの
核心ポイント

この講義では
どのような内容を学びますか?

この講義のカリキュラムは全部で3つのパートに分かれており、全13セクションに分かれています

Part 1
理論を理解してファウンデーションを作る

セクション2、3、4、5

デザイントークンと変数の理解

デザイントークンの概念に馴染みがありませんか?アトミックデザインと海外事例を通じて、デザイントークンの概念を明確に理解していただけるでしょう。

(無料講座として公開されましたので、ぜひご覧ください!)

ファウンデーション全体を直接作ってみる

ファンデーションを使ったことはあっても、作ったことはありませんか?スタイルから変数まで、すべてを作ってみましょう。

色、間隔バリアブル構造を理解して登録する

特にカラーバリアブル(Figmaトークン)の構造と命名が最も複雑で難しいです。例を通じてどのようにバリアブル構造を設計するかを学びます。学んだ後は、他の会社のトークンを見ても全て理解できるようになり、自分だけの構造も作れるようになります。

コンポーネントの基礎理論とライブラリ

コンポーネントの基礎を正しく理解できていない方のための追加講義として、本格的なコンポーネント実習に入る前に基本的な理論について詳しく説明いたします。

Part 2
変数を活用してコアコンポーネントを作ってみる

セクション6、7、8、9

コアコンポーネント30個以上作ってみる

核心コンポーネント30個を4つのパートに分けて作成していきます。コンポーネントを作成した後、簡単なチェックから簡単なWebアクセシビリティまでチェックしていきます。

[入力、ディスプレイ、フィードバック、ナビゲーション部分]

I'm

体系的に一歩一歩システム的に作ってみる

下位(Part)コンポーネントから実際のコンポーネントまで、どのようにビルドアップされるかをご覧いただけます。段階的に構築することで、皆さんも構造を理解し、簡単に作れるようになるでしょう。

効率性を高めるコツやノウハウをお教えします

スロットコンポーネントを活用してコンポーネント数を効率的に削減する方法、ダミーアイコンを活用するノウハウなど、有用なコンポーネントのコツをお教えします。

Part 3-1
モードの活用について学ぶ

セクション10

ダークモードを適用する

ダークモードを実装するために、ブランド、アクセシビリティ、美観を考慮して色彩値を選択し、これをローカル変数に登録してモードを適用してみます。

ブランドモードを適用してみる

マルチブランドモードの概念を理解し、バリアブルモードを活用して統合ブランドを実装する方法とその限界について学びます。

レスポンシブデザインを適用してみる

レスポンシブデザインとアダプティブデザイン、最大値と最小値について概念を学び、デスクトップ、タブレット、モバイルをバリアブルモードを活用して作ってみます。

多言語対応を試してみる

グローバル、ローカライゼーションについて扱い、ローカライゼーションのための言語の方向(RTL、LTR)、画像切り替えをテキストバリアブルを活用して作ってみます。

Part 3-2

モードを活用してページを作ってみる

Section 11, 12, 13, 14

B2B管理画面のWebデザインページを作ってみる

B2B Saas形式の管理ページを作成し、モードを活用してダークモード、マルチブランド、レスポンシブデザインを作ってみます。

B2C eラーニングページ作成

B2Cイーラーニングページを作ってみるんですね。モードを活用してダークモード、マルチブランド、レスポンシブデザインを作ってみるんですね。

モバイルOTTアプリサービスページを作ってみる

マルチブランド、ダークモードで構成されたアプリを一度作ってみます。モードを活用してどのように簡単で素早くダークモードを作り出すのかをご覧いただけるでしょう。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • デザインシステムに興味のあるすべての人

  • バリアブル/デザイントークンについて馴染みのない方

  • デザインシステムに関心のあるPM/開発者

  • Figmaのスキルを一段階アップグレードしたい方

前提知識、
必要でしょうか?

  • Figmaの基礎(基本インターフェース、オートレイアウト)

こんにちは
です。

4,911

受講生

256

受講レビュー

229

回答

4.9

講座評価

7

講座

저희는 프로덕트 디자이너의 성장을 돕는 볼드유엑스랩 메인 튜터인 볼드, 제 경력은 리서처로 시작하여 프로덕트 디자이너로 커리어 전환 후 핀테크, 클라우드 테크, 마케팅 등 다양한 분야에서 경험을 쌓고 있습니다. 국내 석사 출신으로 해외교육 없이 해외에서 취업하여 다양한 실무 경험을 하고 있으며, 실무에서 아래의 내용을 진행해왔습니다.

  • 사용자 리서치 시스템 구축, 관리

     

  • 디자인 시스템 구축, 관리,

    피그마 UI/프로토타이핑

  • 디자인 역량 코칭, 멘토링

인프런을 통해 제가 알고 있는 실무 노하우를 공유하고 이를 통해 저도 많이 배우고 싶습니다.

감사합니다.

 

경험 및 경력

(현) 데이터 솔루션 회사 · 시니어 프로덕트 디자이너

(전) 글로벌 리서치, 핀테크, 클라우드 컴퓨팅 등 다양한 분야에서 프로덕트 디자이너로 활동

연세대 인지공학랩 리서처

カリキュラム

全体

81件 ∙ (19時間 53分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

184件

4.9

184件の受講レビュー

  • sunblaz1560님의 프로필 이미지
    sunblaz1560

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

    ちゃんとした、奥行きのあるピグマ講座を探していますが、この講座を聞かないと無条件に損してみるのです! 講義を頑張った人としてリアルコメントします。 私はフロントエンド開発者ですが、UI/UXに関心が多く、Photoshopやスケッチなどをある程度使える程度のスキルを持っており、この講義を経験した感じのまま書いてみたいと思います。ピグマがデザインツールであるが、6月末にVariablesおよびDev Modeが追加されて途方もなく強力になったが、きちんと適用してみるにはそれだけロジカルな感じを受けることができ、デザイナーの立場では知ってこそ知識が多くなったようです。 私は初めて頑強をする時はちゃんと説明しているのか、気をつけながら講義を何度も目覚めました。 (一度見てはよく分からなかったんですか? 😓) そして、2番目の例を始めるときは、従いやすい例を中心にガンガンがついてみました。この講座の特徴が密度が高く、各章ごとにスルロンスルロンを越える章はありません。最初から完璧にすべて覚えてみると、諦める確率が高いようです。まさに私が序盤にそうして挫折し、また心をつかんで速度よりは理解を中心に同じ映像を何度も再び始めました。 講座を聞く人のレベルを考慮して申し上げると、ピグマに対して完全生初心者は難しいかもしれません。しかし、デザインシステムについてもっと知りたくて購入した方なら、難しくない講義を見て従うことができます。 ちょっと退屈な理論的な部分が序盤にありますが、序盤だけ少しめくると本当に役に立たない、内空が感じられる講義が多く、かなりディテールに説明します。 忍耐を持って従うと、いつの間にかデザインシステムに対する理解水準が高まるのを感じることができました。 本番で書く例はあふれて溢れていました。一度に全部傷つけるとは思わず、お菓子を口の中に入れてゆっくりと溶かして食べるという気持ちで講義を見れば、実力がすっぽり増えていることを感じられると確信しています。 私はそうでした!皆さんも一度感じてみることをおすすめします。

    • uppermost913709님의 프로필 이미지
      uppermost913709

      受講レビュー 1

      平均評価 5.0

      5

      97% 受講後に作成

      頑張りました。 私は現職者で、ピグマに何年も毎日触れる人です。私が持っているスキルの不足があるかどうか確認車講義を決済し、雪連休の2日にわたって受講しました。 デザインシステム、デザイン作業時のバリアブルの使用例を非常によく習得できます。 ピグマアップデートに応じて講義もアップデートしてくださって特に良かったです。 下の方がおっしゃったように、最初から講義のすべてをすべて追いかけようとしたり、初心者が見るにはかなり難しいことがあります。 しかし、これが実務の味わいという点は現職者たちは知っているはずです。 初めてだから難しいことだし、 何度も何度も繰り返すと原理が見えます。 その原理が応用され、繰り返されることを知ると すぐに適応できます。 講義を作ってくれてありがとう。 一度見て飲む講義ではないこと 他講義と差別化された強みだと思います。

      • orinuguri님의 프로필 이미지
        orinuguri

        受講レビュー 6

        平均評価 5.0

        5

        35% 受講後に作成

        講師の講義クオリティがとても好きで、見るたびに感動します:) 👍 こんな概念を一人で習得するまでたくさん大変だったのに…講義で作って共有していただきありがとうございます!私のような超初秒ジュニアデザイナーには干ばつのダンビーのような講義だと思います!頑強ファイトしましょう!

        • kkimaz4705님의 프로필 이미지
          kkimaz4705

          受講レビュー 2

          平均評価 5.0

          5

          57% 受講後に作成

          役に立つ内容がたくさんあります。ふとふと普段から気になった点が講義に出てきて私には概念整理が上手くなっていたようです。十分に多くの役に立っています。ありがとうございます。

          • minju90139432님의 프로필 이미지
            minju90139432

            受講レビュー 1

            平均評価 5.0

            5

            100% 受講後に作成

            ピグマが一年の間に本当に多くのアップデートになって、これをいつ学び、実務にどのように適用すればよいかについての悩みが多かったです。その悩みを和らげてくれた講師に本当に感謝します。 トークンシステムは聞いたが挑戦できなかった私にバリアブルを介して色を登録することからデザインシステムを一つ一つ作り、コンポーネント化しながらベリアントする方法を基礎から固める機会となった貴重な時間でした。 実践しながら、どのようにバリアントを作らなければ便利なのかをよく知り、業務効率が非常に高くなるようです。 私も講義をこんなに早く頑強したことがなかったようです。川のひとつひとつが長くない時間なのでもっと良かったようです。これからももっと良い講義を楽しみにしています。

            期間限定セール、あと3日日で終了

            ¥138,600

            30%

            ¥24,570

            bolduxlabの他の講座

            知識共有者の他の講座を見てみましょう!

            似ている講座

            同じ分野の他の講座を見てみましょう!