디자인 작업이 보이는 책상

Topic guide

UI design from scratch in Figma

템플릿을 열기 전에, 빈 프레임에서 구조를 세우는 순서만 정리했습니다.

시작 전 준비

Figma 계정, 한국어·영문 UI 폰트 각 1종, 참고할 한국 서비스 스크린샷 3장. 스크린샷은 ‘예쁘다’보다 ‘정보가 어떻게 쌓였는지’를 보는 용도입니다.

첫 60분 루틴

390×844 프레임 → 8pt 가이드 → 상단 바·본문·하단 탭을 Auto Layout으로 분리. 색은 그레이스케일만 쓰고, 컴포넌트화는 그다음 날에 합니다.

자주 하는 실수

절대 좌표로 아이콘을 흩뿌리는 것, hover 상태를 복제 프레임으로만 만드는 것, 개발 전달 전에 간격 숫자를 메모하지 않는 것.

다음 단계

이 루틴이 익숙해지면 Figma UI 파운데이션에서 상태 변형과 핸드오프까지 확장합니다.

강의로 이어가고 싶다면

코호트 일정과 실습 파일 구성을 비교해 보세요.