강의

멘토링

로드맵

BEST
디자인 · 아트

/

UX/UI

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

최신 UI3 인터페이스로 피그마의 배리어블을 활용하여 함께 디자인 시스템을 만들어보세요🔥 배리어블은 일관된 사용자 경험을 제공하고 디자인 프로세스를 혁신적으로 개선할 수 있는 열쇠🔑입니다.

(4.9) 수강평 168개

수강생 1,396명

  • 볼드 UX

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

이런 걸 배울 수 있어요

  • 배리어블을 활용하여 디자인 시스템 구축하기

  • 2025년 상반기 피그마 최신 업데이트 반영

  • 디자인 토큰, 아토믹디자인을 기반으로 배리어블 개념 다지기

  • 33+ 코어 디자인 컴포넌트 직접 처음부터 하나하나 제작하기

  • 배리어블 모드를 활용하여 B2B, B2C, 모바일 UI 페이지 만들기

피그마 배리어블(Figma Variable)을 활용한 디자인시스템 완벽 가이드 🔥


혹시 새로운 UI 인터페이스에 적응하기 어려우신가요?

최근 업데이트된 Figma의 제대로 된 한글 자료를 찾기 힘드셨나요?


🙋‍♀ 토큰 및 디자인 시스템을 공부하고 싶은데 자료가 많아 어디서부터 시작해야 할지 막막하셨던 분들,

🤷 실무에 어떻게 배리어블(Figma Tokens)을 활용하고 디자인 시스템에 적용해야 할지 어려우셨던 분들,

걱정마세요!

입문자를 위한 기초 이론부터 실무자를 위한 실제적인 활용 방법까지 한 번에 배울 수 있는 강의를 준비했습니다. 특히 피그마와 디자인 시스템 역량이 기업에서 필수 요건으로 여겨지는 시점에, 이 강의는 현업에서 활용할 수 있는 실용적인 스킬과 인사이트를 제공할 것입니다. 

디자이너 볼드를 소개합니다 😀

안녕하세요, 디자이너 볼드입니다. 현재 저는 런던에서 Sr. 프로덕트 디자이너로 일하며, 인스타그램과 브런치를 통해 저의 실무 이야기를 공유하고 있어요.

지난 8년 동안 UX 리서처와 프로덕트디자인 쪽에서 일하며 다양한 프로젝트를 경험했어요. 특히 최근 피그마 디자인 시스템에 배리어블을 업데이트하는 프로젝트를 수행하였으며, 이를 통해 디자인 업무 생산성과 효율성이 2배 넘게 향상되고 일관된 UX 경험을 만들어내는 성과를 거두었어요. 본 강의는 제 실무 경험과 노하우를 담아, 디자인 토큰/디자인 시스템 개념의 핵심을 이해하고 실무에 적용하는 방법에 중점을 두고 있어요. 이를 통해 여러분이 현업에서 실제로 활용할 수 있는 실용적인 스킬과 인사이트를 얻고 디자인 시스템 역량을 개발할 수 있도록 제가 도와 드릴게요!

함께 배우고 성장하는 즐거운 여정에 참여해보세요!

배리어블을 활용한 디자인 시스템을 배워야 하는 이유

피그마가 현재 디자인 툴 시장에서 전세계 독보적인 1위인 이유는 바로 디자인 시스템강력한 협업 기능 때문이에요.

피그마는 디자인 시스템의 핵심인 “디자인 토큰” 역할을 하는 배리어블 제공하고 있으며, 앞으로 많은 업데이트가 예정되어 있습니다. 또한 아틀라시안, 마이크로소프트, IBM 등 많은 글로벌 회사들도 이미 배리어블을 디자인 시스템에 도입했습니다.

본 강의에서는 배리어블을 활용하여 디자인 시스템을 만들고 디자인의 일관성과 효율성을 높일 수 있는 방법을 배울 수 있는 강의입니다.

이 강의에만 있는
핵심 포인트

이 강의에서는
어떤 내용을 배우나요?

본 강의의 커리큘럼은 총 3가지 파트로 나누어져 있고 총 13섹션으로 나누어져있어요

Part 1
이론을 이해하고 파운데이션 만들기

Section 2, 3, 4, 5

디자인 토큰과 배리어블 이해하기

디자인 토큰의 개념이 낯설게 느껴지시나요? 아토믹 디자인과 해외 사례를 통해 디자인 토큰의 개념을 명확하게 이해하실 수 있을 겁니다.

(무료 강좌로 오픈 되었으니 꼭 보세요!)

파운데이션 전체를 직접 만들어보기 

파운데이션을 사용 해본 적은 있어도 만들어보신적이 없으신가요? 스타일부터 배리어블까지 모든 것을 만들어 볼거에요.

색상, 간격 배리어블 구조를 이해하고 등록하기

특히 색상 배리어블(피그마 토큰)의 구조와 명명이 가장 까다롭고 어려워요. 예시를 통해 어떻게 배리어블 구조를 설계하는지 배울거에요. 배우고 나시면 이제 다른 회사의 토큰을 봐도 다 이해되시고 자기만의 구조도 만드실 수 있을거에요.

컴포넌트의 기초 이론과 라이브러리

컴포넌트의 기초를 제대로 이해하지 못한 분들을 위한 추가 강의로, 본격적인 컴포넌트 실습에 들어가기 전에 기본적인 이론에 대해 자세히 설명해 드려요.

Part 2
배리어블을 활용하여 핵심 컴포넌트 만들어보기

Section 6, 7, 8, 9

핵심컴포넌트 30개 이상 만들어보기

핵심 컴포넌트 30개를 네 파트로 나누어서 만들어볼거에요. 컴포넌트를 만든 후 간단한 점검부터 간단한 웹 접근성까지 체크할거에요.

[입력, 디스플레이, 피드백, 네비게이션 파트]



체계적으로 차근차근 시스템적으로 만들어보기

하위(Part) 컴포넌트에서부터 실제 컴포넌트까지 어떻게 빌드업 되는지 보시게 될거에요. 점진적으로 구축하면써 여러분도 구조를 이해하고 손쉽게 만들 수 있게 될 것입니다.

효율성을 높여주는 팁, 노하우를 공유해드려요

슬롯 컴포넌트를 활용하여 컴포넌트 수를 효율적으로 줄이는 방법, 더미 아이콘을 활용하는 노하우 등, 유용한 컴포넌트 팁을 알려드립니다.

Part 3-1
모드의 활용에 대해 알아보기

Section 10

다크모드를 적용하기

다크모드를 구현하기 위해 브랜드, 접근성, 심미성을 고려하여 색상 값을 선택하고, 이를 로컬 배리어블에 등록하여 모드를 적용해 볼거에요.

브랜드 모드 적용해보기

멀티 브랜드 모드의 개념을 이해하고 배리어블 모드를 활용하여 통합 브랜드를 구현하는 방법과 그 한계를 알아볼거에요.

반응형 디자인 적용해보기

반응형과 적응형 디자인, 최대값과 최소값에 대해서 개념을 배우고 데스크탑, 타블렛, 모바일을 배리어블 모드를 활용하여 만들어볼거에요.

다중 언어 적용해보기

글로벌, 로컬라이제이션에 대해서 다루고 로컬라이제이션을 위한 언어의 방향(RTL, LTR), 이미지 전환을 텍스트 배리어블을 활용하여 만들어볼거에요. 

Part 3-2

모드를 활용하여 페이지 만들어보기

Section 11, 12, 13, 14

B2B 어드민 웹 디자인 페이지 만들어보기

B2B Saas 형태의 어드민 페이지를 만들어보고 모드를 활용하여 다크모드, 멀티브랜드, 반응형 디자인을 만들어볼거에요.

B2C 이러닝 페이지 만들기

B2C 이러닝 페이지를 만들어볼건데요. 모드를 활용하여 다크모드, 멀티브랜드, 반응형 디자인을 만들어볼거에요.

모바일 OTT 앱 서비스 페이지 만들어보기

멀티브랜드, 다크모드로 구성된 앱을 한번 만들어볼거에요. 모드를 활용하여 어떻게 손쉽고 빠르게 다크모드를 만들어 내는지 보시게 될거에요.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 디자인 시스템에 관심 있는 누구나

  • 배리어블/디자인 토큰에 대해 생소하신 분

  • 디자인 시스템이 궁금한 PM/개발자

  • 피그마 실력을 한단계 업그레이드 하고 싶으신 분

선수 지식,
필요할까요?

  • 피그마 기초(기본 인터페이스, 오토레이아웃)

안녕하세요
입니다.

4,535

수강생

221

수강평

199

답변

4.9

강의 평점

7

강의

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

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

     

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

    피그마 UI/프로토타이핑

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

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

감사합니다.

 

경험 및 경력

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

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

연세대 인지공학랩 리서처

커리큘럼

전체

81개 ∙ (19시간 53분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

168개

4.9

168개의 수강평

  • sunblaz1560님의 프로필 이미지
    sunblaz1560

    수강평 3

    평균 평점 5.0

    5

    100% 수강 후 작성

    Nếu bạn đang tìm kiếm một khóa học figma phù hợp và chuyên sâu, bạn chắc chắn sẽ thất bại nếu không tham gia khóa học này! Với tư cách là một người đã chăm chỉ nghiên cứu bài giảng, tôi sẽ đưa ra nhận xét thực sự. Tôi là một nhà phát triển front-end, nhưng tôi rất quan tâm đến UI/UX và có một số kỹ năng sử dụng Photoshop và Sketch, vì vậy tôi sẽ cố gắng viết ra trải nghiệm của mình về bài giảng này. Mặc dù Figma là một công cụ thiết kế nhưng nó đã trở nên vô cùng mạnh mẽ khi được bổ sung Biến và Chế độ Dev vào cuối tháng 6. Tuy nhiên, nếu áp dụng đúng cách, bạn có thể có được cảm giác logic hơn, vì vậy, từ góc độ của một nhà thiết kế, có vẻ như vậy. giống như kiến ​​thức bạn cần biết đã tăng lên. Khi mới kết thúc một bài giảng, tôi liếc nhìn bài giảng nhiều lần, chú ý xem liệu mình có giải thích đúng cách hay không. (Bạn không thực sự hiểu sau khi xem một lần, phải không? 😓) Và khi bắt đầu xem lần thứ hai, tôi cố gắng thỉnh thoảng làm theo những ví dụ để dễ làm theo. Bản chất của khóa học này là dày đặc nên không cần thiết phải nhảy qua từng chương. Nếu bạn nhớ và làm theo mọi thứ một cách hoàn hảo ngay từ đầu, rất có thể bạn sẽ bỏ cuộc. Đó chính xác là những gì tôi đã làm lúc đầu và cảm thấy chán nản, vì vậy tôi đã đứng dậy và bắt đầu xem đi xem lại cùng một video, tập trung vào sự hiểu biết hơn là tốc độ. Xem xét trình độ của người tham gia khóa học, người mới bắt đầu hoàn toàn sử dụng Figma có thể gặp khó khăn. Tuy nhiên, nếu bạn mua nó vì muốn tìm hiểu thêm về hệ thống thiết kế, bạn có thể dễ dàng xem và theo dõi các bài giảng. Có một số phần lý thuyết ban đầu có thể hơi nhàm chán, nhưng khi bạn đã vượt qua phần đầu, sẽ có rất nhiều bài giảng thực sự hữu ích và sâu sắc, và chúng được giải thích rất chi tiết. Khi tôi kiên nhẫn làm theo, tôi có thể cảm thấy rằng mức độ hiểu biết của tôi về hệ thống thiết kế ngày càng tăng. Có rất nhiều ví dụ thực tế để sử dụng. Thay vì nghĩ rằng bạn có thể hoàn thành mọi việc ngay lập tức, nếu bạn xem bài giảng với tâm thế cho viên kẹo vào miệng và từ từ tan chảy trước khi ăn, tôi chắc chắn rằng bạn sẽ cảm thấy kỹ năng của mình đang được cải thiện. Tôi đã làm vậy! Tôi khuyên tất cả các bạn hãy thử nó.

    • uppermost913709님의 프로필 이미지
      uppermost913709

      수강평 1

      평균 평점 5.0

      5

      97% 수강 후 작성

      Tôi thật bướng bỉnh. Tôi hiện là nhân viên và đã sử dụng Figma hàng ngày trong vài năm. Để kiểm tra xem kỹ năng của mình có còn thiếu hay không, tôi đã trả tiền để tham gia khóa học và học trong hai ngày trong dịp nghỉ Tết Nguyên đán. Bạn có thể tìm hiểu rất tốt hệ thống thiết kế và các trường hợp sử dụng Biến khi làm việc thiết kế. Điều đặc biệt thú vị là các bài giảng đã được cập nhật theo bản cập nhật của Figma. Như người dưới đây đã nói, nó có thể khá khó khăn đối với những người mới bắt đầu hoặc những người cố gắng theo dõi mọi thứ trong bài giảng ngay từ đầu. Tuy nhiên, những người đương nhiệm sẽ biết rằng đây chỉ là một trải nghiệm của công việc thực tế. Thật khó khăn vì đây là lần đầu tiên của bạn, Nếu bạn lặp đi lặp lại điều đó, bạn sẽ thấy được nguyên tắc. Biết rằng nguyên tắc được áp dụng và lặp đi lặp lại Bạn sẽ quen với nó một cách nhanh chóng. Cảm ơn bạn đã tạo ra khóa học. Đây không phải là bài giảng mà bạn chỉ có thể xem một lần. Tôi nghĩ đây là điểm mạnh khiến nó khác biệt so với các khóa học khác.

      • orinuguri님의 프로필 이미지
        orinuguri

        수강평 6

        평균 평점 5.0

        5

        35% 수강 후 작성

        Chất lượng bài giảng của giảng viên tốt đến nỗi mỗi lần xem là tôi đều cảm động :) 👍 Chắc hẳn bạn đã rất khó khăn để tự học những khái niệm này... Cảm ơn bạn đã biên soạn một bài giảng và chia sẻ nó với chúng tôi!! Tôi nghĩ bài giảng này giống như một cơn mưa rào đối với một nhà thiết kế trẻ sắc sảo như tôi! Tôi sẽ cố gắng hết sức!!

        • kkimaz4705님의 프로필 이미지
          kkimaz4705

          수강평 2

          평균 평점 5.0

          5

          57% 수강 후 작성

          Có rất nhiều nội dung hữu ích. Đột nhiên, những điều tôi luôn tò mò xuất hiện trong bài giảng và tôi cảm thấy mình có thể sắp xếp các khái niệm một cách tốt. Nó giúp tôi rất nhiều. Cảm ơn

          • minju90139432님의 프로필 이미지
            minju90139432

            수강평 1

            평균 평점 5.0

            5

            100% 수강 후 작성

            Vì Figma đã được cập nhật rất nhiều lần trong năm qua nên tôi đã tự hỏi khi nào nên học nó và làm thế nào để áp dụng nó vào thực tế. Tôi thực sự biết ơn người hướng dẫn đã giải tỏa cho tôi nỗi lo lắng đó. Đối với tôi, người đã nghe nói về hệ thống mã thông báo nhưng chưa bao giờ thử nó, đây là một cơ hội quý giá để học từ những điều cơ bản về cách thực hiện các biến thể bằng cách tạo từng hệ thống thiết kế một và biến chúng thành các thành phần, bắt đầu bằng việc đăng ký màu sắc thông qua các biến thể. Tôi nghĩ hiệu quả công việc của tôi sẽ tăng lên rất nhiều khi tôi tìm hiểu thêm về cách tạo biến thể một cách thuận tiện trong khi làm việc. Tôi không nghĩ mình đã từng hoàn thành một bài giảng nhanh đến vậy. Tôi nghĩ như vậy sẽ tốt hơn vì mỗi bài giảng không dài. Tôi mong đợi những bài giảng tốt hơn trong tương lai.

            월 ₩830,980

            5개월 할부 시

            ₩198,000

            볼드 UX님의 다른 강의

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

            비슷한 강의

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