소통이 중요한 디자인 전달 방식 체크리스트 꿀팁

Figma 디자인 전달 체크리스트 (디자이너용)

기본 준비

  • 모든 화면이 명확한 프레임(Frame) 안에 정리되어 있다지?
  • 프레임 이름이 논리적으로 정리되어 있다 (예: Login_Desktop, Main_Mobile)
  • 불필요한 요소(참고용, 테스트용)는 삭제하거나 숨김 처리하기
  • Viewport 사이즈 기준(1440px, 375px 등)을 명확히 설정하기
  • 파일 내 페이지 정리 완료 (01_Wireframe, 02_Design, 03_Components 등)

스타일 정리

  • 컬러는 모두 Figma Color Style로 등록되어 있고
  • 텍스트는 Figma Text Style로 통일성 있게 관리되고 있어
  • 사용된 폰트가 디자인 시스템이나 가이드에 맞게 적용되어 있다
  • Shadow, Radius 등 효과값이 일관되게 적용되어 있다
  • 사용한 아이콘은 통일된 스타일로 정리되어 있다 (선/두께/컬러)

컴포넌트 & Auto Layout

  • 반복되는 요소는 Component로 만들어 사용했다
  • 버튼, 카드, 리스트 등은 변형 없이 일관된 형태로 관리되고 있다
  • Auto Layout이 적절히 사용되었고, Padding / Gap / Alignment 설정이 정확하다
  • Hug / Fill / Fixed 설정이 상황에 맞게 적용되었다
  • Nested Auto Layout이 잘 구성되어 있다 (리스트, 섹션 등)

개발자 전달 편의성

  • 각 화면 상단 또는 사이드에 설명 또는 상태 표기가 있다
    (예: “로그인 화면 – Desktop / 로그인 실패 시 메시지 노출”)
  • 컴포넌트에는 이름이 명확하게 붙어 있다 (Btn/Primary/Disabled 등)
  • 필요한 경우, 상태(State)를 나눠 표시했다 (Normal, Hover, Active 등)
  • 파일 공유 시 View-only 권한 + 코멘트 권한 여부를 체크했다
  • 디자인 시스템 또는 컴포넌트 라이브러리 링크를 함께 전달했다

최종 전달 전 체크

  • 모든 이미지가 고해상도로 삽입되어 있다
  • 모든 텍스트가 실 텍스트로 입력되어 있다 (더미 텍스트 제거)
  • 디자인 가이드 문서 (Notion 등)와 함께 전달할 준비가 되어 있다
  • 최종 전달용 파일 이름이 깔끔하게 정리되어 있다 (Brand_Project_Design_v2)
  • [Inspect] 탭에서 정보가 정확하게 추출되는지 테스트해봤다

공유 방식

  • Figma 링크 공유 (View only)
  • Notion/Slack 등 전달 메세지에 요약 포함
  • 수정 사항이 생기면 개발자에게 리마인드/버전 업데이트 공유
  • 컴포넌트 수정 시 영향 범위 확인하고 설명 추가