← 🎨 Figma
📖 기초 이해 약 15분
Figma 완전 정복 — 기능별 상세 가이드
Figma는 웹 기반 UI/UX 디자인 협업 툴입니다. 디자이너가 화면을 설계하고, 개발자가 CSS 코드를 추출하고, 기획자가 실시간으로 피드백을 남기는 모든 과정이 하나의 툴에서 이뤄집니다.
🔒 figma.com
실제 화면
캔버스 & 기본 편집
Frame 생성, 도형, 텍스트, 레이어 기초
실수 방지 체크리스트
- 1레이어 이름을 Rectangle 23, Group 15처럼 기본값 그대로 사용 → 개발자·팀원 혼란 — 컴포넌트명은 Button/Primary, 화면은 Login Screen처럼 의미 있게
- 2모든 요소를 그룹으로 묶고 Auto Layout 사용 안 함 → 반응형 디자인 불가 — 버튼·카드는 Auto Layout 필수로 감싸기