강의

멘토링

로드맵

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) 172 reviews

1,415 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,650

Learners

230

Reviews

209

Answers

4.9

Rating

7

Courses

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

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

     

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

    피그마 UI/프로토타이핑

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

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

감사합니다.

 

경험 및 경력

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

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

연세대 인지공학랩 리서처

Curriculum

All

81 lectures ∙ (19hr 53min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

172 reviews

4.9

172 reviews

  • gs.kim님의 프로필 이미지
    gs.kim

    Reviews 3

    Average Rating 5.0

    5

    100% enrolled

    제대로 된, 깊이 있는 피그마 강좌를 찾고 있는데, 이 강좌를 듣지 않는다면 무조건 손해 보는 겁니다! 강의를 완강한 사람으로서 리얼 코멘트할게요. 저는 프론트엔드 개발자지만 UI/UX에 관심이 많아 포토샵이나 스케치 등을 어느 정도 쓸 수 있는 정도의 스킬을 갖고 있어 이 강의를 경험한 느낌 그대로 적어보려고 합니다. 피그마가 디자인 툴이긴 하나 6월 말에 Variables 및 Dev Mode가 추가되면서 엄청나게 강력해졌지만, 제대로 적용해보려면 그만큼 로지컬한 느낌을 받을 수 있어, 디자이너 입장에서는 알아야 지식이 많아진 거 같습니다. 저는 처음 완강을 할 때는 제대로 설명하고 있는지 유심히 살피면서 강의를 여러 번 눈팅?했고요. (한번 봐서는 잘 모르겠더라고요? 😓) 그리고 두 번째 보기 시작할 때는 따라 하기 쉬운 예제 위주로 간간이 따라 해봤습니다다. 이 강좌의 특징이 밀도가 높아 각 장마다다 술렁술렁 넘어가는 장이 없습니다. 처음부터 완벽하게 다 기억하고 다 따라하면 포기할 확률이 높을 거 같습니다. 바로 제가 초반에 그렇게 하다가 좌절하고, 다시 마음 잡고 속도보다는 이해를 중심으로 같은 영상을 여러 번 다시 보기 시작했습니다. 강좌를 듣는 사람 수준을 고려해서 말씀드리자면, 피그마에 대해서 완전 생초보 자는 어려울 수 있어요. 그러나 디자인 시스템에 대해서 더 알고 싶어 구매한 분들이라면 어렵지 않게 강의를 보고 따라 하실 수 있어요. 약간 지루할 수 있는 이론적인 부분이 초반에 있지만 초반만 좀 넘기면 정말 쓸모가 많은, 내공이 느껴지는 강의가 많았고 상당히 디테일하게게 설명합니다. 인내심을 갖고따라 하다 보니 어느샌가 디자인 시스템에 대한 이해 수준이 높아지는 것을 느낄 수 있었습니다. 실전에서 쓸 예제는 넘치고 넘쳤습니다. 한 번에 다 해치운다고 생각하지 말고 사탕을 입 안에 넣고 천천히 녹여 먹는다는 마음으로 강의를 보시면 실력이 쑥쑥 늘고 있다는 걸 느끼실 거라고 확신합니다. 제가 그랬습니다! 여러분도 한번 느껴보시길 추천드립니다.

    • 작고귀여운둉이님의 프로필 이미지
      작고귀여운둉이

      Reviews 1

      Average Rating 5.0

      5

      97% enrolled

      완강했습니다. 저는 현직자고, 피그마를 몇년째 매일 만지는 사람입니다. 제가 가진 스킬의 부족함이 있는지 확인차 강의를 결제하고 설연휴 이틀에 걸쳐 수강했습니다. 디자인시스템, 디자인 작업시 베리어블의 사용례를 아주 잘 익힐 수 있습니다. 피그마 업데이트 사항에 따라서 강의도 업데이트 해주셔서 특히나 좋았습니다. 밑에 분이 말씀하신대로 처음부터 강의의 모든 것을 다 따라하려하거나 초심자가 보기에는 상당히 어려울 수 있습니다. 하지만 이게 실무의 맛보기라는 점은 현직자들은 알고 있을 것입니다. 처음이라 어려운 것이지, 반복하고 또 반복하다보면 원리가 보이고 그 원리가 응용되고 반복된다는 점을 알면 금세 적응할 수 있습니다. 강의 만들어주셔서 고맙습니다. 한번 보고 마는 강의가 아닌 것이 타 강의와 차별화된 강점이라고 생각합니다.

      • 오리너구리님의 프로필 이미지
        오리너구리

        Reviews 6

        Average Rating 5.0

        5

        35% enrolled

        강사님 강의 퀄리티 너무 좋아서 볼때마다 감동받습니다 :) 👍 이런 개념들을 혼자 터득하기까지 많이 힘드셨을텐데... 강의로 만들어 공유 주셔서 감사합니다!! 저같은 초초초 쥬니어디자이너에겐 가뭄의 단비같은 강의인거 같아요! 완강 화이팅해보겠습니다!!

        • 김현석님의 프로필 이미지
          김현석

          Reviews 2

          Average Rating 5.0

          5

          57% enrolled

          도움 되는 내용들이 많습니다. 문득문득 평소에 궁금했던 점들이 강의에 나와 저에게는 개념 정리가 잘 되었던거 같습니다. 충분히 많은 도움이 되고 있습니다. 감사합니다.

          • Minjoo Kim님의 프로필 이미지
            Minjoo Kim

            Reviews 1

            Average Rating 5.0

            5

            100% enrolled

            피그마가 일 년 동안 정말 많은 업데이트가 되면서 이걸 언제 배우고 실무에 어떻게 적용하면 좋을까에 대한 고민이 많았습니다. 그 고민을 덜어준 강사님께 정말 감사드립니다. 토큰 시스템은 들어봤지만 도전하지 못했던 저에게 베리어블을 통해 색상을 등록하는 거부터 디자인 시스템들을 하나하나 만들고 컴포넌트화하면서 베리언트 하는 방법을 기초부터 다질 수 있는 기회가 된 값진 시간이었습니다. 실무 하면서 어떻게 배리언트를 만들어야 편리한지 많이 알게 되어 업무 효율성이 매우 높아질 듯합니다. 저도 강의를 이렇게 빠르게 완강을 한 적이 없었던 것 같아요. 강의 하나하나가 길지 않은 시간이어서 더 좋았던 것 같습니다. 앞으로도 좀 더 좋은 강의 기대하고 있겠습니다.

            $152.90

            bolduxlab's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!