강의

멘토링

로드맵

BEST
Design

/

UI/UX

[UI3 Update] Building a Design System Using Figma Variables

Create a design system together using Figma's variables with the latest UI3 interface🔥 Variables are the key🔑 to providing a consistent user experience and dramatically improving the design process.

(4.9) 170 reviews

1,409 learners

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

Reviews from Early Learners

What you will learn!

  • Building a design system using variables

  • Reflecting the latest Figma updates for the first half of 2025

  • Solidifying the concept of variables based on design tokens and atomic design

  • Creating 33+ core design components from scratch, one by one

  • Creating B2B, B2C, and mobile UI pages using variable mode.

Complete Guide to Design Systems Using Figma Variables 🔥


Are you having trouble adapting to the new UI interface?

Have you had trouble finding proper Korean resources for the recently updated Figma?


🙋‍♀ For those who wanted to study tokens and design systems but felt overwhelmed by the abundance of materials and didn't know where to start,

🤷 For those who found it difficult to understand how to utilize variables (Figma Tokens) in practice and apply them to design systems,

Don't worry!

I have prepared a course where you can learn everything from basic theory for beginners to practical application methods for professionals all at once. Especially at a time when Figma and design system capabilities are considered essential requirements in companies, this course will provide practical skills and insights that can be utilized in the workplace.

Introducing Designer Bold 😀

Hello, I'm designer Bold. I'm currently working as a Sr. Product Designer in London, and I share my work stories through Instagram and Brunch.

Over the past 8 years, I've worked in UX research and product design, experiencing various projects. Recently, I carried out a project to update variables in the Figma design system, which resulted in more than doubling productivity and efficiency in design work and creating consistent UX experiences. This courseincorporates my practical experience and know-how, focusing on understanding the core concepts of design tokens/design systems and how to apply them in practice. Through this, I'll help you gain practical skills and insights that you can actually use in your current work and develop your design system capabilities!

Join us on an enjoyable journey of learning and growing together!

Why You Should Learn Design Systems Using Variables

The reason Figma is currently the undisputed global leader in the design tool market is precisely because of its design system and powerful collaboration features.

Figma provides variables that serve as "design tokens," which are the core of design systems, and many updates are planned for the future. Additionally, many global companies such as Atlassian, Microsoft, and IBM have already incorporated variables into their design systems.

In this course, you will learn how to create a design system using variables and improve design consistency and efficiency.

This course's exclusive
key points

What content will I learn in this course?

This course curriculum is divided into a total of 3 parts and is organized into a total of 13 sections.

Part 1
Understanding theory and building a foundation

Section 2, 3, 4, 5

Understanding Design Tokens and Variables

Does the concept of design tokens feel unfamiliar to you? You'll be able to clearly understand the concept of design tokens through atomic design and international case studies.

(It's now open as a free course, so please check it out!)

Building the entire foundation from scratch

Have you ever used a foundation but never created one yourself? We'll create everything from styles to variables.

Understanding and Registering Color and Spacing Variable Structures

Color variables (Figma tokens) in particular have the most complex and challenging structure and naming conventions. Through examples, you'll learn how to design variable structures. Once you've learned this, you'll be able to understand tokens from other companies and create your own structure as well.

Basic Theory and Libraries of Components

This is an additional lecture for those who haven't properly understood the basics of components, providing detailed explanations of fundamental theory before diving into full-scale component practice.

Part 2
Using Variables to Create Core Components

Section 6, 7, 8, 9

Building Over 30 Core Components

We'll create 30 core components divided into four parts. After creating the components, we'll check everything from simple inspections to basic web accessibility.

[Input, Display, Feedback, Navigation Parts]

I'm

Building systematically step by step in a structured manner

You'll see how it builds up from sub (Part) components to the actual components. By building progressively, you'll also understand the structure and be able to create it easily.

We share tips and know-how to boost your efficiency

Methods for efficiently reducing the number of components using slot components, tips for utilizing dummy icons, and other useful component tips will be shared.

Part 3-1
Learning about the utilization of modes

Section 10

Applying Dark Mode

To implement dark mode, we'll select color values considering brand, accessibility, and aesthetics, then register them as local variables to apply the mode.

Applying Brand Mode

We'll understand the concept of multi-brand mode and learn how to implement integrated branding using variable mode, as well as its limitations.

Applying Responsive Design

We'll learn about responsive and adaptive design concepts, maximum and minimum values, and create desktop, tablet, and mobile versions using variable mode.

Applying Multiple Languages

We'll cover global and localization topics, and create language direction (RTL, LTR) and image switching for localization using text variables.

Part 3-2

Creating Pages Using Modes

Section 11, 12, 13, 14

Creating a B2B Admin Web Design Page

We'll create a B2B SaaS admin page and use modes to implement dark mode, multi-brand, and responsive design.

Creating B2C E-learning Pages

I'm going to create a B2C e-learning page. I'll use modes to create dark mode, multi-brand, and responsive design.

Creating a Mobile OTT App Service Page

We're going to create an app with multi-brand and dark mode features. You'll see how to easily and quickly create dark mode using modes.

Recommended for
these people

Who is this course right for?

  • Anyone interested in design systems

  • For those unfamiliar with variables/design tokens

  • PMs and developers who are curious about design systems

  • For those who want to upgrade their Figma skills

Need to know before starting?

  • Figma Basics (Basic Interface, Auto Layout)

Hello
This is

4,623

Learners

226

Reviews

206

Answers

4.9

Rating

7

Courses

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

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

     

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

    피그마 UI/프로토타이핑

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

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

감사합니다.

 

경험 및 경력

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

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

연세대 인지공학랩 리서처

Curriculum

All

81 lectures ∙ (19hr 53min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

170 reviews

4.9

170 reviews

  • sunblaz1560님의 프로필 이미지
    sunblaz1560

    Reviews 3

    Average Rating 5.0

    5

    100% enrolled

    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

      Reviews 1

      Average Rating 5.0

      5

      97% enrolled

      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

        Reviews 6

        Average Rating 5.0

        5

        35% enrolled

        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

          Reviews 2

          Average Rating 5.0

          5

          57% enrolled

          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

            Reviews 1

            Average Rating 5.0

            5

            100% enrolled

            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.

            Limited time deal ends in 5 days

            $115.50

            24%

            $152.90

            bolduxlab's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!