강의

멘토링

커뮤니티

BEST
Design

/

UI/UX

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

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

  • bolduxlab
피그마
디자인 시스템
토큰
figma variable
Figma
Figma Tokens
Design System
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,873

受講生

253

受講レビュー

224

回答

4.9

講座評価

7

講座

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

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

     

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

    피그마 UI/프로토타이핑

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

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

감사합니다.

 

경험 및 경력

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

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

연세대 인지공학랩 리서처

カリキュラム

全体

81件 ∙ (19時間 53分)

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

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

受講レビュー

全体

182件

4.9

182件の受講レビュー

  • sunblaz1560님의 프로필 이미지
    sunblaz1560

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

    If you are looking for a proper, in-depth Figma course, you will definitely miss out if you don't take this course! I will give you a real comment as someone who has completed the course. I am a front-end developer, but I am interested in UI/UX, so I have the skills to use Photoshop and Sketch to some extent, so I will write about my experience in this course. Although Figma is a design tool, it has become incredibly powerful since Variables and Dev Mode were added at the end of June, but if you want to apply it properly, you need to feel the logical feeling, so I think it is a lot of knowledge for designers. When I first completed the course, I carefully watched the lecture several times to see if it was explained properly. (I didn't understand it after watching it once? 😓) And when I started watching it for the second time, I followed along with easy-to-follow examples. The characteristic of this course is that it is dense, so there is no chapter that goes over each chapter in a rush. If you remember everything perfectly from the beginning and follow it all, you will likely give up. I did that in the beginning and got frustrated, so I got my mind right and started watching the same videos over and over again, focusing on understanding rather than speed. Considering the level of the people taking the course, it might be difficult for a complete beginner in Figma. However, if you bought it because you wanted to know more about the design system, you can easily watch the lecture and follow along. There are some theoretical parts that can be a bit boring in the beginning, but once you get past the beginning, there were many lectures that were really useful and showed a lot of inner strength, and they explained things in great detail. If you followed along with patience, you could feel your level of understanding of the design system increasing. There were so many examples that you could use in real life. Don't think that you'll finish it all at once, but if you watch the lecture with the mindset of putting a candy in your mouth and slowly melting it, I'm sure you'll feel your skills improving. That's what I did! I recommend you try it too.

    • uppermost913709님의 프로필 이미지
      uppermost913709

      受講レビュー 1

      平均評価 5.0

      5

      97% 受講後に作成

      It was tough. I am a current employee and have been working with Figma every day for several years. I paid for the course and took it over two days during the Lunar New Year holiday to check if there were any shortcomings in my skills. I was able to learn the design system and the use cases of Variable in design work very well. It was especially good that the course was updated according to Figma updates. As the person below said, it may be quite difficult for beginners or those who try to follow everything in the course from the beginning. However, current employees will know that this is a taste of the actual work. It is difficult because it is the first time, but if you repeat it over and over again, you will see the principles, and if you know that the principles are applied and repeated, you will be able to adapt quickly. Thank you for making the course. I think that the fact that it is not a course that you just watch once is a strength that differentiates it from other courses.

      • orinuguri님의 프로필 이미지
        orinuguri

        受講レビュー 6

        平均評価 5.0

        5

        35% 受講後に作成

        The instructor's lecture quality is so good that I am impressed every time I watch it :) 👍 It must have been hard to learn these concepts on your own... Thank you for making it into a lecture and sharing it!! For a junior designer like me who is very beginner, this lecture is like a drop of rain in a drought! I will do my best!!

        • kkimaz4705님의 프로필 이미지
          kkimaz4705

          受講レビュー 2

          平均評価 5.0

          5

          57% 受講後に作成

          There is a lot of helpful content. Sometimes, things I was curious about came up in the lecture, so I think it helped me organize my concepts well. It was very helpful. Thank you.

          • minju90139432님의 프로필 이미지
            minju90139432

            受講レビュー 1

            平均評価 5.0

            5

            100% 受講後に作成

            Figma has been updated so much over the past year that I have been worried about when to learn it and how to apply it to my work. I am very grateful to the instructor who helped me with my worries. I have heard of the token system but have never tried it before, so it was a valuable opportunity for me to learn the basics from registering colors through Variable, creating design systems one by one, and making variants while componentizing them. I think my work efficiency will greatly increase as I learn a lot about how to conveniently create variants while working. I don't think I have ever completed a lecture this quickly. I think it was better because each lecture was not too long. I look forward to even better lectures in the future.

            期間限定セール、あと01:31:42日で終了

            ¥123

            19%

            ¥24,425

            bolduxlabの他の講座

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

            似ている講座

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