LEVEL 1 · 입문
피그마 실무 입문 워크샵
01
기본기 + 화면 구조 이해
피그마는 레이어가 많아서 처음엔 어디를 눌러야 할지 막막합니다. 오늘은 그 구조부터 잡습니다.
+피그마 인터페이스, Frame·Layer 구조
+주요 툴바 기능 익히기
+Fill·Stroke·Effect 실무 활용
02
오토레이아웃 집중
오토레이아웃은 버튼 하나 누르는 기능이 아니라 구조를 생각하는 방식이라 다들 처음엔 막힙니다.
+Hug·Fill·Fixed 개념과 차이
+버튼·카드·리스트 오토레이아웃 적용
+Constraint 기능 적용
+리스트 타입 UI 오토레이아웃 완성
03
컴포넌트 + 실무 화면 구조화
컴포넌트를 만들었는데 왜 인스턴스가 안 바뀌는지 — 구조를 모르면 쓸 수 없습니다.
+컬러·폰트 로컬 스타일 등록
+메인 컴포넌트·인스턴스 컴포넌트 제작
+컴포넌트 - 프로퍼티 기능 5가지 (Variant, Text, Boolean, Instance swap, slot)
+버튼 상태 컴포넌트, 카드·인풋 컴포넌트 세트 완성
04
배리어블·프로토타입·AI
툴은 배웠는데 실제로 어떻게 이어 붙이는지가 막막합니다. 마지막 주는 전체를 연결합니다.
+컬러 배리어블로 라이트/다크 모드
+화면 간 프로토타입 연결
+Figma AI로 초안 생성 후 정제
4주 후 당신의 피그마 실력은?
+오토레이아웃으로 구조화된 실무 화면 제작
+재사용 가능한 컴포넌트 세트로 체계적인 화면 구성
+클릭 가능한 인터렉티브 프로토타입
+"왜 이렇게 만들어야 하는지" 설명할 수 있는 감각