2026/03/24 2

[제작과정] 피그마(Figma) 핵심 기능 마스터를 위한 학습 도구 제작기(AI 협업)

안녕하세요피그마 공부를 하던 중 오토레이아웃, 컴포넌트, 베리언트의 중요성을 깨닫고논리적인 구조와 매커니즘을 확실하게 공부하기 위해 직접 실습 프로그램을 제작하게 되었습니다. ① 시작 — 기본 퀴즈 앱처음엔 오토 레이아웃·컴포넌트·배리언트 개념을 퀴즈로 학습하는 단순한 구조로 시작했습니다. 4지선다 퀴즈 10문제, 정답 시 피드백, 진행도 바, 챕터별 탭 구성이었습니다.② 퀴즈 → 인터랙티브 시뮬레이터로 전환퀴즈 방식이 연습에 불충분하다고 판단해서 방향을 완전히 바꿨습니다.실제 피그마 UI처럼 생긴 3단 레이아웃 (레이어 | 캔버스 | 속성 패널)오토 레이아웃 — Gap·Padding 슬라이더, 방향/Wrap/Align 버튼, 아이템 추가·삭제, 실시간 프레임 반영컴포넌트 — Main 색상 순환, 인스턴..

작업/작업기록 2026.03.24

디자이너를 위한 피그마(Figma) 오토레이아웃 & 컴포넌트 실습

피그마를 공부하다 보면 오토레이아웃의 사용법이나 배리언트(Variants)의 상태 변화가 머릿속으로 그려지지 않을 때가 많습니다.그래서 직접 값을 바꿔보며 결과물을 실시간으로 확인할 수 있는 간단한 학습 프로그램을 제작해 보았습니다. 🛠 주요 기능 및 학습 포인트1. 실시간 오토레이아웃 시뮬레이션단순히 이론만 보는 게 아니라, 직접 간격(Gap)과 패딩(Padding) 값을 입력하며 요소의 배치를 익힐 수 있게 구성했습니다.2. 컴포넌트 & 배리언트 전환피그마의 컴포넌트 개념을 코드로 치환했을 때 어떻게 작동하는지 구현했습니다. 버튼의 여러 상태를 한눈에 비교해 보세요. 직접 클릭하며 값을 입력해보세요! 프로그램 단독으로 보고싶으시다면 ▼https://jiwon12011.github.io/figma_..

카테고리 없음 2026.03.24