[Figma 꿀팁] 색상, 폰트, 버튼 스타일 가이드 만드는 법 | 디자인시스템

 

디자인 시스템은 브랜드나 서비스의 일관성을 유지하고, 협업 효율을 극대화하는 핵심 도구입니다.

그 중에서도 색상, 타이포그래피, 버튼 스타일은 가장 기본이자 중요한 세 가지 구성 요소입니다. 이번 글에서는 Figma를 이용해 색상, 폰트, 버튼 가이드를 체계적으로 만드는 방법을 실무 중심으로 정리해드리겠습니다. 디자인 시스템을 처음 만들거나 정리해보고 싶은 디자이너분들께 도움이 되기를 바랍니다. 

 

 

1. 색상 시스템 정리하기

색상은 브랜드 인상과 사용자 경험에 직접적으로 영향을 주는 요소입니다. 기본적으로 아래 3가지 카테고리로 나누어 정리하는 것이 좋습니다. 

Primary color

Secondary color

 

색상 분류 예시

- Primary Color : 브랜드 대표 색상 (ex. Blue !#1C9FFC)

- Secondary color : 보조 색상

- Functional Color : 성공, 경고, 오류, 정보

 

📌 Figma 적용 방법

1. Figma에서 색상 스타일 생성

> Fill > 오른쪽 스타일 아이콘 + 클릭 > 이름 지정 (ex. Primary / Main)

 

2. 색상 이름 체계적으로 정리

- Primary / Blue 500

- Error / Red 700

 

실무에서는 브랜드 가이드 문서에 명시된 컬러값을 기준으로 스타일화 하고, 그 이후에 컴포넌트에 적용합니다.

 

2. 폰트 스타일 정리하기

텍스트의 위계와 가독성을 만드는 핵심 요소는 바로 폰트 스타일입니다.

다양한 폰트 스타일

사용되는 폰트와 폰트별 형태 정리

스타일 구분 기준

- Heading : Display, H1, H2, H3 (제목, 섹션 타이틀) 등

- Body : 본문 텍스트 (보통 14~16px)

- Caption / Label : 주석 / 부가 설명 등 (12px 이하)

 

📌 Figma 적용 방법

1. 텍스트 박스에 원하는 서체 / 크기 설정

2. 오른쪽 패널에서 Text Style 생성 > + 클릭

3. 이름 지정은 이렇게 :

Text / Heading / H1

Text / Body / 14px

 

단순한 글자 크기 외에도 줄 간격(Line Height), 자간(Letter Spacing), 정렬도 포함해서 저장해두면 좋습니다.

 

3. 버튼(Button) 스타일 가이드 만들기

버튼은 가장 많이 쓰이면서도 가장 혼란을 주기 쉬운 UI 요소입니다. 디자인 시스템에서는 버튼 상태를 명확히 정의하는 것이 핵심입니다. 

버튼 상태 예시

- 기본(Default)

- 호버(Hover)

- 비활성화(Disabled)

- 클릭/선택됨(Selected/Active)

기본(Default) / Hover / Selected / Disabled 순

📌 Figma 적용 방법

1. 버튼 컴포넌트를 만들고 Auto Layout 설정

2. 버튼 텍스트, 배경 색상, 패딩, 둥근 정도(border radius) 정리

3. 상태별로 Varients로 묶어서 하나의 버튼 컴포넌트로 관리

 

CTA 버튼, Secondary 버튼 등 용도별로 구분해서 디자인 시스템 내에 포함시키면 좋습니다.

 

4. 한 화면에 디자인 토큰 정리하기

디자인 시스템 가이드는 보통 한 페이지 안에 색상, 텍스트, 버튼을 모듈처럼 구성해서 보여줍니다.

📌 Figma 적용 방법

UI 구성 요소의 룰 섹션별로 보여주기

 

예를 들면, 좌측 : 색상 팔레트 박스, 가운데 : 타이포그래피 예시, 우측 : 버튼 Variants

이렇게 한눈에 UI 구성 요소의 룰을 보여줄 수 있으면, 개발자와의 협업도 훨씬 쉬워지고 문서로도 활용 가능합니다.

5. 마무리하며

디자인 시스템은 단순한 예쁜 정리 이상의 의미를 가집니다. 수십 개의 페이지를 일관되게 관리하고, 팀원 모두가 동일한 기준으로 디자인 할 수 있게 해주는 일종의 설계 언어 입니다. 처음부터 거창하게 만들 필요는 없습니다. 색상, 텍스트, 버튼만 정리해도 충분한 첫 단계입니다. 이후 여백, 아이콘, 입력창 등으로 확장하면 됩니다.