inflearn logo
inflearn logo

[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) 수강평 193개

강의소개.상단개요.수강생.short

난이도 초급

수강기한 무제한

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

먼저 경험한 수강생들의 후기

먼저 경험한 수강생들의 후기

4.9

5.0

gs.kim

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.

5.0

작고귀여운둉이

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.

5.0

오리너구리

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!!

강의상세_배울수있는것_타이틀

  • 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.

강의소개.콘텐츠.추천문구

학습 대상은 누구일까요?

  • 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

선수 지식, 필요할까요?

  • Figma Basics (Basic Interface, Auto Layout)

강의소개.지공자소개

5,370

수강생

286

수강평

245

답변

4.9

강의 평점

7

강의_other

I am Bold, the lead tutor at Bold UX Lab, where we help product designers grow. I started my career as a researcher before transitioning to product design, and I have since gained experience in various fields including fintech, cloud tech, and marketing. Despite holding a master's degree from Korea and having no prior education abroad, I successfully secured employment overseas and have been gaining diverse professional experience, focusing on the following areas in my practice:

  • Establishing and managing user research systems

    Building and managing design systems; coaching and mentoring on Figma UI/prototyping design capabilities. Through Inflearn, I share the practical know-how I have acquired, which also allows me to...

  • Design system development and management,

    Figma UI/Prototyping

  • Design competency coaching and mentoring

I want to share the practical know-how I've gained through Inflearn and hope to learn a lot myself in the process.

Thank you.

Experience & Career (Current) Senior Product Designer at a Data Solutions Company (Former) Product Designer in various fields including Global Research, Fintech, and Cloud Computing

Experience & Career

(Current) Senior Product Designer · Data Solutions Company

(Former) Product Designer in various fields including global research, fintech, and cloud computing

Researcher at Yonsei University Cognitive Engineering Lab

더보기

커리큘럼

전체

81개 ∙ (강의상세_런타임_시간 강의상세_런타임_분)

해당 강의에서 제공: [object Object]
강의 게시일: 
마지막 업데이트일: 

수강평

전체

193개

4.9

193개의 수강평

  • 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.

      • 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.

        • 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!!

          • 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.

            bolduxlab님의 다른 강의

            지식공유자님의 다른 강의를 만나보세요!

            비슷한 강의

            같은 분야의 다른 강의를 만나보세요!

            강의상세.할인문구

            $16,958.00

            29%

            $152.90