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

1,532 learners

Level Basic

Course period Unlimited

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

News

8 articles

  • bolduxlab님의 프로필 이미지

    Hello, students,

    Did you have a good Lunar New Year holiday?

    📢 Lecture update information

    📅 February 5th and 6th (Wednesday and Thursday) 2:00 AM to 6:00 AM Korean time

    During this time, the lectures will be fully updated. Please note that the existing lectures can be checked in the last section (Section 16) until mid-March.

    🔹 What's in this update?

    Improved sound quality – Adjusted the volume and adjusted the speed to an appropriate level.

    Reflecting the latest version of UI3 – All lectures have been updated to the latest version.

    Added typography variables - ( High difficulty, so we recommend watching it multiple times! )

    Component tutorial enhancements – Added icon buttons and button stacks.

    Added image placeholder tutorial – explained how to fix the left-right ratio using a plugin.

    etc.

    🎯 Inflearn warm-up study to be held starting in March! [Recruitment will likely start next week.]

    If you would like to learn the UI3 interface and complete the course, please join us!

    We desperately need your help.

    We have done our best to review the content, but there may be parts of the lecture that are not fully edited or have black screens. If you find any shortcomings while watching the lecture, please send us feedback to the email address below within one month.

    📩 Contact: boldplus.ux@gmail.com

    Thank you. 😊

    0
  • bolduxlab님의 프로필 이미지

    hello,

    As September draws to a close, we are heading into the final days of 2024.

    In October, we started the Infraon Warmup and updated two lectures over the weekend.

     

    1. Section 3: How to register an icon, and tips with Antman strategy
    Since the lecture opened, I have received more than 30 questions about icons. I have prepared a lecture that can solve these questions. In particular, I will cover how to solve the problem of broken icons in Figma using the Antman strategy. This content received a great response in the last special lecture of the first period. The existing old icon lecture will be maintained until October and then deleted.

     

    2. Section 14: Figma UI3: What's changed from the original UI2?
    I have re-recorded and re-uploaded the UI2 lecture that had audio quality issues. I have also included in the lecture any updates to the UI that were made within a week.

     

    We are also planning to upload a Typography Variables (UI3 version) course at the end of October, and are preparing to open it early next year due to many requests for the Figma Basics course.

     

    In addition to updating existing lectures, we will also work hard to prepare additional lectures in the future.

    thank you

    2
  • bolduxlab님의 프로필 이미지

    Hello, students!

     

    How was your Chuseok holiday? There are three updates to this course.

     

    1. Recruiting for the Infraon Warm-up Club

    As we have already informed you through Discord, the Infraon Warm-up Club is recruiting until tomorrow, the 24th. If you have not yet completed the course, we strongly recommend that you participate and complete it together.
    https://inf.run/Qg5iV

     

    2. UI3 related update lecture

    We have re-recorded and edited the live lecture <Figma UI3: What's Changed from UI2> held at the end of August and updated it in Section 14. Be sure to check it out if you are a die-hard student or interested in UI3.

    3. Lecture Best Practice Event

    I am very proud to see good examples of people applying this lecture to their actual work or creating plugins.

    So, we would like to collect the good examples you send us and hold an award ceremony. After thinking about the best product, we would like to give away Son Heung-min's T-shirt, which was mentioned in my token concept.

    • Excellent product: Son Heung-min Tottenham Home, Away T-shirt provided

    • Application Period: Until the end of February 2025

    • Format: PDF, Figma file - format and size do not matter

    • Submissions: Please send to boldplus.ux@gmail.com .

     

    0
  • bolduxlab님의 프로필 이미지

    Hello, this is Bold.

    This time, I participated as a coach in the Design System lecture at the Infraon Warm-up Club.

    < Building a design system using Figma Variable>

     

    boon

    • This is a study group that will run from beginning to end of the lecture during May under the leadership of knowledge sharer Bold , and will be held in the Discord community.

    • Upon completion of the course, we will give away prizes (30,000 leaves) prepared by Infraon , and special prizes will be given to excellent runners.

    • Students can participate for free , so we encourage you to take this opportunity to complete the course and enjoy the many benefits.

    • We also have a 30% discount coupon ready, so if any of you are interested, please let us know. (See link below)

     

    notification

     

    If you have any questions, please feel free to email me anytime.

    boldplus.ux@gmail.com

    Thank you, Bold Dream.

    0
  • bolduxlab님의 프로필 이미지

    Hello, this is Bold.

    This news is about sharing a summary of the lecture theory portion .

    The link is in Section 0 [Share Summary Files] .

     


    📝 The reason for its creation

    After reading the course reviews and surveys, many of the comments were as follows:

    Is this lecture really helpful for my practice? It's so difficult at first that I think I'll have to listen to it 2-3 times after completing it to make it mine.

    To help students preview and review, I have created a summary of the lecture theory in Notion format . I have also organized frequently asked questions (mainly about the icon section).

     

    📌 Notes

    Due to copyright issues, please refrain from copying or duplicating. If discovered, the summary will be deleted. Please be considerate of other students.

     

    🎉 Complete event

    We plan to share a PDF summary of this lecture with those who completed the course evaluation/survey.

    We ask for your active participation.

     


     

    We will do our best to provide lectures that will help you grow.

    Bold Dream.

    2
  • bolduxlab님의 프로필 이미지

    Edited

    We would like to inform you about the recruitment for the 2nd study group and the lecture updates.


    We are recruiting for the second study group in January 2024.

    We are currently in the first period and are destroying Variable together with the students who participated.

    To summarize the 4-week achievements of the dazzling first-generation members,

    • 180+ certified shots

    • Average of 21 classes completed per person

    • Satisfaction 4.8/5

    imageimage

    If you would like to participate in the second period, please join the Slack community by January 1st and apply for participation.


    Variable Update Summary

    We ran a variable event on Instagram. If you are curious about the full update, please refer to the Notion link containing the YouTube video.

    https://candied-bowl-4a6.notion.site/12-639103a61e5f4889b4ba61aa21e105ce

    A total of 4 additional videos will be updated to Infraon related to this update on January 1st of next year.

     

    2024 lecture increase

    The 2024 lecture will be increased. Those who have already dropped out of the lecture will not be affected at all. If there is anyone around you who is interested in this lecture, please let me know as this is a great opportunity to purchase it at a discounted price before December 31st .

    Lastly, as you all know, Figma updates very quickly. My lectures will continue to evolve to match these changes and help you grow.

    thank you

    Bold Dream.

    1
  • bolduxlab님의 프로필 이미지

    Edited

    Hello, this is Bold.

    It's been about a month since the course was opened. Many people are currently taking the course, and the first study group is in full swing in the Slack channel.

    Today I'd like to share with you some event and lecture updates .

     


    Event Information: Free 30-minute coffee chat for those who complete 80% of the course

    Online lectures have the advantage of being available at any time, but there are many cases where it is difficult to study alone. Therefore, to help you, we would like to provide a free coffee chat worth 50,000 won to those who have listened to more than 80% of the lectures.

    Here are some areas where I can help:

    • Portfolio Review

    • Overseas employment

    • Career Advice

      If you would like to chat online, please contact boldplus.ux@gmail.com .

      We will work hard until you all become strong.

     


    Update News

    Yesterday, there was a major update to Figma Variable. We are currently holding an event related to this on Instagram, and we plan to upload videos and materials related to the update to Infraon next week.

    We will post another notice once the lecture is updated.

     

    [Update Summary] This update mainly deals with numeric variables.

    • Individual corner radius: Register 'rounded corner' variable at any location

    • Effect, Layer Opacity : Register variable for effect, transparency

    • Grid, Stroke : Registering variables on grid and border

    • Finally, attach the variable to the instance ,

      Let me explain the usage in detail with some examples.

     

    0
  • bolduxlab님의 프로필 이미지

    Does the task of creating 30 components seem daunting?

    If so, this worksheet may help.

    Worksheet Guide: Section 3 Lesson 2 - Component Worksheet Beta Share

    Hello! I am sharing the Components Worksheet Beta in Section 3 Lesson 2. This worksheet will help you keep track of your progress and get help as you go through the lesson. It only covers what we have covered so far. Please leave a comment if there is anything missing or needs to be corrected.

    User Guide:

    1. Please copy and use this worksheet.

    2. Use the worksheet to create components following the lecture.

    3. If there is a problem with the original file or if there is any part that needs to be corrected, please leave a comment in the original file.

    Community Challenge Guide: If you join the community, you will have the opportunity to create components together through monthly challenges. Join us on our journey of learning and growing together!

    If you need any help or have any questions, please feel free to leave a comment. Have a nice Figma journey!

    0

Limited time deal

$115.50

24%

$152.90