Figma에서 영감받은 디자인 시스템

Category: 디자인 & 크리에이티브 협업 디자인 도구. 선명한 다색상, 장난기 있으면서도 전문적인.

1. 비주얼 테마 & 분위기

Figma의 인터페이스는 스스로를 디자인한 디자인 도구입니다 — 커스텀 가변 폰트(figmaSans)가 극세(weight 320)에서 볼드(weight 700) 사이를 조율하되, 대부분의 타이포그래피 시스템이 결코 탐색하지 않는 특이한 중간 값(330, 340, 450, 480, 540)에 정류하는, 타이포그래피 정교함의 교과서적 사례입니다. 이 세밀한 굵기 제어 덕분에 모든 텍스트 요소는 정밀하게 조율된 시각적 무게를 지니며, “레귤러 대 볼드”라는 단순한 도구 대신 미세한 차이를 통해 위계를 만들어냅니다.

이 페이지는 흥미로운 이중성을 드러냅니다. 인터페이스 크롬은 엄격하게 흑백(감지된 색상이 문자 그대로 #000000과 #ffffff뿐)인 반면, 히어로 섹션과 제품 쇼케이스는 선명한 다색 그라디언트 — 일렉트릭 그린, 밝은 노랑, 짙은 보라, 핫 핑크 — 로 폭발합니다. 이 분리는 디자인 시스템 자체가 무색임을 의미하며, 제품의 화려한 결과물을 히어로 콘텐츠로 대우합니다. Figma의 마케팅 페이지는 본질적으로 화려한 예술 작품을 전시하는 흰 갤러리 벽입니다.

가변 폰트 너머에서 Figma를 돋보이게 하는 것은 원형과 필(pill) 형태의 기하학입니다. 버튼은 50px 반경(필) 또는 50%(아이콘 버튼용 완전한 원형)을 사용하여 유기적인 툴 팔레트 같은 느낌을 만들어냅니다. 점선 아웃라인 포커스 표시(dashed 2px)는 Figma 에디터의 선택 핸들을 연상시키는 의도적인 디자인 선택입니다 — 웹사이트의 UI 언어가 제품의 UI 언어를 참조하는 것입니다.

주요 특성:

• 특이한 굵기 정류점을 가진 커스텀 가변 폰트(figmaSans): 320, 330, 340, 450, 480, 540, 700
• 엄격하게 흑백인 인터페이스 크롬 — 색상은 제품 콘텐츠에만 존재
• 넓은 자간과 대문자 기술 레이블을 위한 figmaMono
• 필(50px) 및 원형(50%) 버튼 기하학
• Figma 에디터 선택 핸들을 반영한 점선 포커스 아웃라인
• 선명한 다색 히어로 그라디언트 (그린, 옐로우, 퍼플, 핑크)
• 전역적으로 활성화된 OpenType "kern" 기능
• 전반에 걸친 음수 자간 — 본문 텍스트조차 -0.14px에서 -0.26px

2. 색상 팔레트 & 역할

Primary

• 순수 검정 (#000000): 모든 텍스트, 모든 솔리드 버튼, 모든 테두리. 인터페이스의 유일한 “색상”.
• 순수 흰색 (#ffffff): 모든 배경, 흰색 버튼, 어두운 표면 위의 텍스트. 이진법의 나머지 절반.

참고: Figma의 마케팅 사이트는 인터페이스 레이어에 오직 이 두 가지 색상만 사용합니다. 모든 선명한 색상은 제품 스크린샷, 히어로 그라디언트, 임베드 콘텐츠에만 나타납니다.

Surface & Background

• 순수 흰색 (#ffffff): 기본 페이지 배경 및 카드 표면.
• 글래스 블랙 (rgba(0, 0, 0, 0.08)): 보조 원형 버튼 및 유리 효과를 위한 미묘한 어두운 오버레이.
• 글래스 화이트 (rgba(255, 255, 255, 0.16)): 어둡거나 컬러풀한 표면 위의 버튼을 위한 서리 낀 유리 오버레이.

Gradient System

• 히어로 그라디언트: 일렉트릭 그린, 밝은 노랑, 짙은 보라, 핫 핑크를 사용한 선명한 다중 정류 그라디언트. 이 그라디언트는 히어로 섹션의 시각적 시그니처입니다 — 도구의 창의적 가능성을 표현합니다.
• 제품 섹션 그라디언트: 개별 제품 영역(디자인, 개발자 모드, 프로토타이핑)은 쇼케이스에서 각기 다른 색상 테마를 사용할 수 있습니다.

3. 타이포그래피 규칙

Font Family

• Primary: figmaSans, 폴백: figmaSans Fallback, SF Pro Display, system-ui, helvetica
• Monospace / Labels: figmaMono, 폴백: figmaMono Fallback, SF Mono, menlo

위계

원칙

• 가변 폰트 정밀도: figmaSans는 대부분의 시스템이 결코 사용하지 않는 굵기를 씁니다 — 320, 330, 340, 450, 480, 540. 이는 극적인 도약 대신 미묘한 굵기 차이를 통해 위계를 만들어냅니다. 330과 340의 차이는 거의 감지하기 어렵지만 구조적으로 의미 있습니다.
• 라이트를 기본으로: 대부분의 본문 텍스트는 320–340(일반적인 400 “레귤러”보다 가벼운)을 사용하여, 디자인 도구 미학과 어울리는 에테르 같고 공기처럼 가벼운 읽기 경험을 만들어냅니다.
• 어디서나 커닝: 모든 텍스트 요소는 OpenType "kern" 기능을 활성화합니다 — 커닝은 선택 사항이 아니라 구조적입니다.
• 기본값으로 음수 자간: 본문 텍스트도 -0.1px에서 -0.26px 자간을 사용하여, 전반적으로 타이트한 텍스트를 만듭니다. 디스플레이 텍스트는 -0.96px와 -1.72px로 더욱 압축됩니다.
• 구조를 위한 모노: 양수 자간(0.54px–0.6px)과 함께 대문자로 사용한 figmaMono는 기술적 이정표 레이블을 만듭니다.

4. 컴포넌트 스타일링

버튼

블랙 솔리드 (필)

• Background: 순수 검정 (#000000)
• 텍스트: 순수 흰색 (#ffffff)
• Radius: 아이콘 버튼에는 원형 (50%)
• Focus: dashed 2px outline
• 최대 강조

화이트 필

• Background: 순수 흰색 (#ffffff)
• 텍스트: 순수 검정 (#000000)
• Padding: 8px 18px 10px (비대칭 수직)
• Radius: pill (50px)
• Focus: dashed 2px outline
• 어둡거나 컬러풀한 표면 위의 표준 CTA

글래스 다크

• Background: rgba(0, 0, 0, 0.08) (미묘한 어두운 오버레이)
• 텍스트: 순수 검정
• Radius: 원형 (50%)
• Focus: dashed 2px outline
• 밝은 표면 위의 보조 액션

글래스 라이트

• Background: rgba(255, 255, 255, 0.16) (서리 낀 유리)
• 텍스트: 순수 흰색
• Radius: 원형 (50%)
• Focus: dashed 2px outline
• 어둡거나 컬러풀한 표면 위의 보조 액션

카드 & 컨테이너

• Background: 순수 흰색
• Border: 없음 또는 최소화
• Radius: 6px (소형 컨테이너), 8px (이미지, 카드, 다이얼로그)
• Shadow: 미묘한 수준에서 중간 수준의 고도 효과
• 카드 콘텐츠로서의 제품 스크린샷

내비게이션

• 흰 배경 위의 깔끔한 수평 내비게이션
• 로고: 검정의 Figma 워드마크
• 제품 탭: 필 형태 (50px) 탭 내비게이션
• 링크: 검정 텍스트, 1px 언더라인 장식
• CTA: 블랙 필 버튼
• Hover: CSS 변수를 통한 텍스트 색상

특이 컴포넌트

제품 탭 바

• 수평 필 형태 탭 (50px 반경)
• 각 탭은 Figma 제품 영역(디자인, 개발자 모드, 프로토타이핑 등)을 표현
• 활성 탭 강조 표시

히어로 그라디언트 섹션

• 전체 너비의 선명한 다색 그라디언트 배경
• 86px 디스플레이 제목이 포함된 흰색 텍스트 오버레이
• 그라디언트 안에 떠 있는 제품 스크린샷

점선 포커스 표시

• 모든 인터랙티브 요소는 포커스 시 dashed 2px 아웃라인 사용
• Figma 에디터의 선택 핸들을 참조
• 웹사이트와 제품을 연결하는 메타 디자인 선택

5. 레이아웃 원칙

간격 시스템

• 기본 단위: 8px
• 스케일: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px

그리드 & 컨테이너

• 최대 컨테이너 너비: 1920px까지
• 히어로: 중앙 정렬 콘텐츠를 가진 전체 너비 그라디언트
• 제품 섹션: 교차 쇼케이스
• 푸터: 어두운 전체 너비 섹션
• 559px에서 1920px까지 반응형

공백 철학

• 갤러리 같은 호흡: 넉넉한 간격은 각 제품 섹션이 자체 전시물로서 숨 쉬게 합니다.
• 시각적 호흡으로서의 색상 섹션: 그라디언트 히어로와 제품 쇼케이스는 모노크롬 인터페이스 섹션들 사이에 색채적 여유를 제공합니다.

테두리 반경 스케일

• 최소 (2px): 소형 링크 요소
• 미묘 (6px): 소형 컨테이너, 구분선
• 편안함 (8px): 카드, 이미지, 다이얼로그
• 필 (50px): 탭 버튼, CTA
• 원형 (50%): 아이콘 버튼, 원형 요소

6. 깊이 & 고도

그림자 철학: Figma는 그림자를 절제하여 사용합니다. 주요 깊이 메커니즘은 배경 대비 (컬러풀하거나 어두운 섹션 위의 흰 콘텐츠)와 제품 스크린샷 자체가 가진 고유한 입체감입니다.

7. Do’s and Don’ts

Do

• 정밀한 가변 굵기(320–540)로 figmaSans를 사용하세요 — 세밀한 굵기 제어 자체가 디자인입니다
• 인터페이스를 엄격하게 흑백으로 유지하세요 — 색상은 제품 콘텐츠에서만 옵니다
• 모든 인터랙티브 요소에 필(50px) 및 원형(50%) 기하학을 사용하세요
• dashed 2px 포커스 아웃라인을 적용하세요 — 시그니처 접근성 패턴입니다
• 모든 텍스트에 "kern" 기능을 활성화하세요
• 레이블에는 양수 자간과 함께 대문자 figmaMono를 사용하세요
• 전반에 걸쳐 음수 자간을 적용하세요 (-0.1px에서 -1.72px)

Don’t

• 인터페이스 색상을 추가하지 마세요 — 모노크롬 팔레트는 절대적입니다
• 표준 폰트 굵기(400, 500, 600, 700)를 사용하지 마세요 — 가변 폰트의 고유 정류점(320, 330, 340, 450, 480, 540)을 사용하세요
• 버튼에 날카로운 모서리를 사용하지 마세요 — 필과 원형 기하학만 허용됩니다
• 솔리드 포커스 아웃라인을 사용하지 마세요 — 점선이 시그니처입니다
• 본문 폰트 굵기를 450 이상으로 높이지 마세요 — 가벼운 굵기 미학이 핵심입니다
• 본문 텍스트에 양수 자간을 사용하지 마세요 — 항상 음수입니다

8. 반응형 동작

브레이크포인트

축소 전략

• 히어로 텍스트: 86px → 64px → 48px
• 제품 탭: 모바일에서 가로 스크롤
• 기능 섹션: 단일 열로 스택
• 푸터: 다열 → 스택

9. 에이전트 프롬프트 가이드

빠른 색상 참조

• 모든 것: “순수 검정 (#000000)” 과 “순수 흰색 (#ffffff)”
• Glass Dark: “rgba(0, 0, 0, 0.08)”
• Glass Light: “rgba(255, 255, 255, 0.16)“

예시 컴포넌트 프롬프트

• “선명한 다색 그라디언트(그린, 옐로우, 퍼플, 핑크) 위에 히어로를 만드세요. 헤드라인은 86px figmaSans 굵기 400, line-height 1.0, letter-spacing -1.72px. 흰 텍스트. 흰 필 CTA 버튼 (50px 반경, 8px 18px 패딩).”
• “필 형태 버튼(50px 반경)으로 제품 탭 바를 디자인하세요. 활성: 블랙 배경, 흰 텍스트. 비활성: 투명, 검정 텍스트. figmaSans 20px 굵기 480.”
• “섹션 레이블을 만드세요: figmaMono 18px, 대문자, letter-spacing 0.54px, 검정 텍스트. Kern 활성화.”
• “20px figmaSans 굵기 330, line-height 1.40, letter-spacing -0.14px로 본문 텍스트를 만드세요. 흰 배경 위의 순수 검정.”

반복 가이드

1. 가변 폰트 굵기 정류점을 정확하게 사용하세요: 320, 330, 340, 450, 480, 540, 700
2. 인터페이스는 항상 검정 + 흰색 — 크롬에 색상을 추가하지 마세요
3. 솔리드가 아닌 점선 포커스 아웃라인
4. 본문에는 항상 음수 자간, 모노 레이블에는 항상 양수 자간
5. 버튼/탭에는 필(50px), 아이콘 버튼에는 원형(50%)