피그마 디자인 작업시 반드시 지켜야 할 6가지 체크리스트

 
안녕하세요 찐망고입니다.
초보자들이 피그마 작업시 꼭 알아야 할 6가지 포인트를 정리하고자 포스팅 하려고 해요
 

1. 모든 요소는 반드시 프레임 안에 배치할 것

화면에 보인다고 끝이 아님.
레이어 패널에서 프레임 밖에 빠진 요소는
Auto Layout, Export, 개발자 전달 시 누락될 수 있음

피그마 레이어

 

2. Clip Content 옵션 확인은 필수

프레임에 Clip Content가 체크돼 있으면
프레임을 벗어난 객체는 화면에 보이지 않음
→ 진짜 프레임 밖인지, 숨겨진 건지 헷갈릴 수 있으니 레이어 확인 필수

 

피그마 Clip Content체크 유무

 

3. 좌표·크기·여백은 소수점 없이 정수로

→ 1px 오차가 정렬 깨짐·버튼 밀림 문제를 유발함
→ x, y, width, height, padding, radius 등은 정수값으로
→ 단, 아이콘은 예외 (벡터 기반이기 때문)

피그마 좌표, 크기, 여백 소수점

 

4. 디자인 시작 = 프레임부터!

→ 프레임 없이 객체만 올리면 나중에
Auto Layout, Constraints, Export가 모두 불편해짐
→ 퍼블리싱 구조(Box Model)처럼 디자인도 구조 설계부터 시작해야 한다

피그마 프레임

 

5. 디자인시안은 반드시 100%로 확인!

확대된 상태나 축소된 상태에서 예쁘게 보여도
실제 사용자 화면 비율(100%)에서 보면 이상한 여백, 오차가 보일 수 있음
→ 최종은 반드시 100% 확인할 것!

 

6. Stroke(테두리)는 반드시 Inside로 설정할 것!

→ 기본은 Center지만, 퍼블리싱 시엔 사이즈가 틀어짐
→ Inside로 설정하면 디자인의 가로·세로 사이즈가 정확히 떨어지고,
CSS에서도 box-sizing: border-box와 일치
→ 특히 버튼, 카드, input 영역은 반드시 Inside 적용할 것!

 

피그마 테두리