Figma 디자인 13가지 핵심 원칙

피그마 코딩(Figma MCP → AI 퍼블) 할 때 팁

✅ 원칙 1: 디자인과 설명 분리

• 나쁜 예: 설명글을 Figma 레이어로 작성
• 좋은 예: 코멘트 기능 활용
• 이유: AI가 디자인 요소와 설명을 혼동

✅ 원칙 2: 8000px 제한 준수

• 제한: Claude API는 8000px 초과 이미지 거부
• 해결: 섹션별 분리 (Header, Hero, Content, Footer)

✅ 원칙 3: 컴포넌트 독립성

• GNB 영역 별도 레이어
• Header 별도 레이어
• Footer 별도 레이어
• 핵심: 중요한 컴포넌트는 따로 별개의 레이어로 디자인

✅ 원칙 4: 코멘트 위치

• 레이어 위에 직접 배치
• 주의: 화면 밖으로 나가지 않게

✅ 원칙 5: 상태별 디자인

• 기본 화면 (Default)
• 마우스 올렸을 때 화면 (Hover)
• Active
• Disabled

✅ 원칙 6: 인터랙션 가이드 제공 (옵션)

• 더 정확한 디자인 퍼블을 위해 인터랙션 설명까지 Figma에서 별도로 작성
• 모션 레퍼런스 링크
• 속도/Duration 명시
• Easing 함수 지정

✅ 원칙 7: 레이어 구조 최적화

• 너무 많은 오토레이아웃 레이어 중첩 지양
• 필요한 레이어만 활용

section
  └── container
      └── item-box
          ├── title
          ├── desc
          └── subdesc

✅ 원칙 8: 레이어 구조 일관성

• 같은 디자인에 다른 레이어 구조를 사용하지 말 것

✅ 원칙 9: 네이밍 컨벤션

• 퍼블 클래스명을 짓는다는 수준으로 정확하게 네이밍
• 예시:
  • header-section
  • content-section
  • item-box, item
  • title, desc, subdesc

✅ 원칙 10: 여백 소속 명확화

• 헤더에 속하는 여백인지
• 컨텐츠에 속하는 여백인지
• 푸터에 속하는 여백인지

흔한 실수: 컨텐츠 영역의 여백인데 푸터에 넣어두는 경우 - 단순히 보여지는 것만 맞으면 그렇게 작업하는 경향이 있음 - 해결: 속하는 레이어 아래 여백값들을 지정

✅ 원칙 11: 데이터 구조 반영

예시: 게시판 글쓰기 폼

디자인은 같은 형태이지만 실제 데이터 구조가 다를 수 있음:

category-field (선택적 - 있을 수도 있고 없을 수도 있음)
title-field (필수)
extravar-field (선택적 - 있을 수도 있고 없을 수도 있음)

문제점: - 디자인 필드는 같은 형태라 동일한 레이어 구조로 해서 주시는데 - 실제 데이터는 설정에 따라 다름 - 패딩값 기준을 어디에 잡아야할지 애매해짐

해결: - 각 필드를 별도 레이어로 구분 - 레이어 보기/감추기 해보면 여백 기준이 명확해짐

✅ 원칙 12: 레이어 토글 테스트

• 특정 레이어 숨기기 → 여백 확인
• 여백 기준점이 명확한지 검증

✅ 원칙 13: 스크린샷 & 설명 첨부

• Figma URL만으로 부족할 때 스크린샷 제공
• 프롬프트 문서에 스크린샷과 설명 꼭 첨부

Figma 프레임 사이즈 설정 전략

문제 상황

• 데스크탑 기준: 1440px
• 모바일 기준: 360px
• 컨텐츠 넓이: 1860px (양쪽 마진 30px, 모바일 15px)

1920px로 프레임을 만들면: - 내가 디자인한 게 컨텐츠 영역을 가득 채우는지 - 브라우저 전체 너비를 가득 채우는지 - 개발자와 헷갈릴 수 있음

해결책

1920px 컨텐츠라면 프레임을 2240px 이상으로 잡고 작업

장점: - ✅ 브라우저 전체 너비 효과 미리 확인 가능 - ✅ 개발자와 소통할 때 명확함 - ✅ 큰 화면에서 어떻게 보일지 검증 가능

Figma에서 반응형 설정 방법

프레임 설정:

├── width: auto (또는 큰 값)
├── max-width: 1920px (컨텐츠 최대 너비)
└── Auto Layout 정렬: 중앙 상단 기준

→ 화면이 1920px 넘어가면 자동으로 컨텐츠가 중앙에 몰림

개발 시 주의사항

❌ 절대 이렇게 하지 마세요:

.content {
  width: 100vw; /* viewport width 전체 */
}

→ 부모 태그 무시하고 브라우저 전체 너비를 따라가서 반응형 깨짐

✅ 이렇게 하세요:

<main>
  <section class="content">
    <!-- 컨텐츠 -->
  </section>
</main>

main {
  max-width: 1920px;
  margin: 0 auto; /* 중앙 정렬 */
}

.content {
  width: 100%; /* 부모(main) 기준 */
  /* 또는 flex, grid로 레이아웃 */
}

실무에서 컨텐츠 너비 설정 원칙

이유: vw로 잡으면 상위 태그의 cascading 관계를 무시하고 viewport를 바로 따라가기 때문에 반응형이 깨짐