피그마(Figma) 실무 심화 강좌: 베리어블·디자인 토큰·컴포넌트 프로퍼티
끝없이 늘어나는 배리언츠 지옥에서 탈출하세요! 피그마 컴포넌트 프로퍼티(Variants·Boolean·Instance Swap·Slots)부터 베리어블 기반 디자인 토큰, 조건부 챗봇 프로토타이핑까지 실무 핵심만 모았습니다.
주제 안내
오토레이아웃 다음은 무엇을 배워야 할까? 실무 효율을 가르는 '베리어블'과 '프로퍼티'
오토레이아웃과 기본 컴포넌트까지는 어느 정도 손에 익었는데, 막상 실무 프로젝트나 팀 포트폴리오에 들어가면 컴포넌트 개수가 수백 개로 불어나서 관리가 안 된 적 있으신가요? 🤯 버튼의 상태와 색상 조합이 늘어날 때, 어떤 차이를 배리언츠로 나누고 어떤 값을 공통으로 관리할지 헷갈릴 수 있어요. TuTu는 그 구분을 중심으로 강의를 묶었어요.
이번에는 **컴포넌트 프로퍼티(Component Properties)**와 **베리어블(Variables)·디자인 토큰(Design Tokens)**을 나눠 살펴봐요. 버튼에서 따로 바꿀 속성은 무엇인지, 컬러·간격·모드 중 어떤 값을 함께 관리할지 비교하는 것이 이번 묶음의 관찰 포인트예요. Primitive → Semantic → Component 같은 토큰 구조와 각 속성의 연결 관계도 함께 정리했어요.
컴포넌트 프로퍼티·베리어블 디자인 시스템·고급 프로토타이핑 3단계 실무 코스
그래서 오늘 TuTu가 기초를 넘어 현업 수준의 디자인 시스템과 인터랙션을 구축하고 싶은 분들을 위해 검증된 한국어 피그마 심화 강의 7편을 3단계로 엄선해 왔어요! 1단계에서는 **배리언츠, 불린(Boolean), 인스턴스 스왑, 텍스트, 슬롯(Slots)**까지 컴포넌트 프로퍼티의 쓰임을 비교하고, 2단계에서는 베리어블로 만드는 컬러 팔레트와 소규모·대규모 디자인 시스템 실무 운영 노하우를 파헤쳐요. 마지막 3단계에서는 베리어블 조건문을 활용한 AI 챗봇 프로토타입과 인터랙티브 컴포넌트 애니메이션까지 직접 만들어 볼 수 있으니, 실습 파일 켜고 TuTu랑 함께 폼 미친 실무 스킬을 장착해 봐요! 🔥
🎬 컴포넌트 프로퍼티 마스터: 배리언츠·불린·인스턴스 스왑·슬롯
2026 최신 정리! 배리언츠·불린·인스턴스 스왑·텍스트·슬롯(Slots) 실전 활용법
단 하나의 컴포넌트 안에서 버튼 상태, 크기, 텍스트, 아이콘, 그리고 내부 콘텐츠 영역(Slots)까지 유연하게 바꾸는 최신 컴포넌트 프로퍼티 총정리 강의예요! 실제 버튼, 토글 스위치, 메뉴, 모달 UI에 적용하는 과정을 타임스탬프별로 명쾌하게 보여줘요.
참고 원본 영상 펼치기 (YouTube)
실습 파일 제공! 실무에서 바로 쓰는 컴포넌트 & 배리언츠 설계 올인원 강의
이론만 나열하는 대신 현업에서 컴포넌트와 배리언츠를 어떻게 구조화하고 스타일·라이브러리와 연결하는지 실습 파일과 함께 꼼꼼히 알려 줘요. 주니어 디자이너가 실무 파일 컨벤션을 익히기에 딱 좋은 영상이에요!
참고 원본 영상 펼치기 (YouTube)
복사한 컴포넌트 안의 아이콘과 텍스트를 1초 만에 바꾸는 프로퍼티 핵심 요약
컴포넌트를 복제해 놓고 내부 아이콘이나 문구를 어떻게 바꿔야 할지 막막했던 분들을 위해 프로퍼티 설정 핵심만 압축한 강의예요. 피그마 커뮤니티 예제 파일을 켜 두고 따라 하면 프로퍼티 개념이 단번에 정리돼요! 🍯
참고 원본 영상 펼치기 (YouTube)
🎬 베리어블(Variables) 컬러 팔레트 & 실무 디자인 시스템 구축
베리어블(Variables)로 만드는 컬러 팔레트 A to Z: Primitive·Semantic·Component 토큰
피그마의 핵심 기능인 베리어블(Variables)을 활용해 기초 컬러 팔레트(Primitive)부터 시맨틱 토큰(Semantic), 컴포넌트 토큰까지 단계별로 설계하는 방법을 46분간 아주 깊이 있게 다루는 실무 바이블 영상이에요.
참고 원본 영상 펼치기 (YouTube)
현직 디자이너 대담: 소규모 스타트업 vs 대규모 기업 디자인 시스템 구축·관리 노하우
피그마피디아 운영진과 대기업(G마켓) 디자인 시스템 담당 디자이너가 직접 겪은 시행착오와 조직 규모별 디자인 시스템 운영 전략을 생생하게 들려줘요. 우리 팀에 맞는 시스템 범위를 어떻게 잡아야 할지 현실적인 해답을 얻을 수 있어요.
참고 원본 영상 펼치기 (YouTube)
🎬 베리어블 활용 챗봇 프로토타입 & 인터랙티브 컴포넌트 심화
베리어블(Variables) 조건문으로 질문에 맞춰 대답하는 AI 챗봇 프로토타입 만들기
피그마 베리어블을 프로토타이핑에 결합하면 어디까지 구현할 수 있는지 보여주는 놀라운 실습 영상이에요! 사용자가 선택한 질문을 변수로 인식해 알맞은 답변 화면을 띄워 주는 인터랙티브 챗봇을 커뮤니티 예제와 함께 만들어 볼 수 있어요.
참고 원본 영상 펼치기 (YouTube)
인터랙티브 컴포넌트 & Smart Animate로 만드는 상품 확대 호버 인터랙션
배경 블러 효과와 컴포넌트 세트(Component Set), 트리거(Trigger), 그리고 스마트 애니메이트(Smart Animate)를 조합해 마우스를 올렸을 때 자연스럽게 확대되는 고급 이커머스 카드 인터랙션을 7분 만에 완성해 봐요!
참고 원본 영상 펼치기 (YouTube)
More Picks Ready for You
TuTu가 추가로 발굴한 3개의 관련 영상
+3
계속 둘러보기
판소리 장단 듣기: 중모리와 중중모리 박자 흐름·소리 관계 비교
판소리에서 중모리와 중중모리는 왜 빠르기 차이만으로 설명할 수 없을까요? TuTu와 함께 12박 안의 분박 구조(2분박 걸음걸이 vs 3분박 춤사위 호흡), 9박 대점의 위치, 소리 대목의 감정선 차이를 영상으로 비교해 봐요.
핑거스타일 엄지 베이스 독립: 박자 유지와 멜로디 분리 연습법
핑거스타일 기타를 칠 때 엄지가 멜로디 박자에 자꾸 끌려가나요? 베이스 근음과 상성부 멜로디를 독립적으로 분리하는 오른손 기초 자세와 단계별 리듬 연습을 TuTu가 정리했습니다.
한국사능력검정시험 기출 복습: 사료 키워드와 시대 구분법
한국사능력검정시험 기출 사료에 반복 등장하는 핵심 키워드와 왕대별 전후 흐름을 연결해 오답 선지를 명쾌하게 솎아내는 실전 복습 가이드예요.
한글 문서 스타일: 제목 번호와 서식 복구
TuTu와 함께 한컴오피스 한글(HWP) 보고서의 뒤엉킨 서식을 한 번에 정리해요! 직접 서식과 문단 스타일(F6)의 차이, 개요 번호(Ctrl+Insert) 수준 체계, 모양 복사(Alt+C)로 망가진 번호와 들여쓰기를 복구하는 실전 팁을 모았어요.
이번 주제는 여기까지예요. 다음에 또 둘러봐요.
이 주제는 AI의 도움을 받아 사람이 편집했으며, 오류나 편향이 있을 수 있습니다. 영상 권리자로서 노출을 원하지 않으시면 FindTuTu에 문의해 주세요.