figma

디자인 시스템을 만든다는 건 단순히 예쁜 UI 컴포넌트를 정리하는 게 아닙니다.
브랜드가 지켜야 할 일관성과 논리를 ‘코드처럼’ 관리하고 유지한다는것에 가깝죠.

그래서 디자인 시스템을 처음 설계할 때 가장 먼저 고민해야 할 것은
색상, 타이포그래피, 여백, 라운드, 쉐도우 같은 기초적인 속성값들인데요.

이런 속성값을 체계적으로 관리하는 방법이 바로 디자인 토큰 Design Token 입니다.
그리고 다행히도, Figma 안에서 이 디자인 토큰 개념을 꽤 강력하게 구현할 수 있습니다.
오늘은 디자인 시스템을 ‘제대로’ 만들고 싶다면 왜 토큰 시스템부터 시작해야 하는지,
그리고 Figma에서는 이를 어떻게 실무적으로 다뤄야 하는지를 설명해 보겠습니다.

디자인 토큰이란 무엇인가요?

디자인 토큰은 디자인 속성을 코드처럼 이름을 붙여 관리하는 방식입니다.
예를 들어 색상을 코드로 표현하면 다음과 같이 쓸 수 있습니다.

json복사편집"color-primary": "#0052CC"
"spacing-small": "8px"
"font-heading": "Roboto, 24px, Bold"

이 값들은 디자인 파일 내에서만 의미가 있는 것이 아니라,
개발자에게 넘겨줄 때도 재사용 가능한 기준점이 되죠.
변수처럼 이름만 바꾸면 전체 시스템에 반영되기 때문에
디자인의 확장성, 유지보수성, 협업 효율성이 모두 높아집니다.

---

Figma에서 토큰처럼 관리하는 방법

Figma에는 “디자인 토큰”이라는 공식 기능은 없지만,
**스타일(Styles)**과 컴포넌트 시스템, 그리고 최근에는 플러그인을 통해
토큰과 유사한 구조를 구현할 수 있습니다.

1. 색상 토큰

• Primary / 500, Secondary / 300, Neutral / 50 등으로 이름을 규칙화합니다.
• 스타일 패널에서 Color Styles를 만들어두고, 디자인 전체에 연결합니다.
• 브랜드 색상이 바뀌더라도 스타일만 수정하면 전체에 적용됩니다.

2. 텍스트 토큰

• Heading / XL, Body / Small, Caption / Light 등의 이름 규칙을 설정합니다.
• Text Style을 계층적으로 관리하면, 타이포그래피 시스템이 안정적으로 유지됩니다.

3. 여백, 라운드, 쉐도우

• Figma 기본 기능에서는 여백과 Radius 같은 수치를 직접 변수화할 수는 없지만,
• Spacing 컴포넌트 또는 레이아웃 템플릿을 만들어서 관리할 수 있습니다.
• 최근에는 Tokens Studio for Figma 플러그인을 사용하면
  여백, 라운드 값도 변수처럼 설정 가능합니다.

---

플러그인 활용: Tokens Studio

실제 토큰처럼 Figma에서 데이터를 관리하고
JSON 파일로 내보내기까지 가능한 도구가 바로 Tokens Studio for Figma입니다.
이 플러그인은 다음과 같은 기능을 제공합니다.

• 컬러, 타이포, 여백, 그리드 등의 토큰을 JSON으로 정리
• 테마별(라이트/다크) 토큰 세트 관리
• 코드와의 일관성 확보 (개발자와 협업할 때 유리)
• GitHub와 연동해 토큰 변경 사항을 버전으로 관리 가능

즉, 디자인 시스템을 코드처럼 운영하고 싶다면
이 플러그인은 사실상 필수에 가깝습니다.

---

실무에서 어떻게 적용하나요?

1. 기초 스타일을 토큰처럼 이름 붙여 설정합니다.
   • 개발자가 그대로 가져갈 수 있는 네이밍이 이상적입니다.
2. 컴포넌트 내부에 토큰 스타일만 연결합니다.
   • 컴포넌트 내부에 직접 색상이나 폰트 수치를 입력하는 방식은 피해야 합니다.
3. 중앙에서 토큰만 변경하면 전체 UI가 바뀌도록 구조를 짭니다.
   • 하나의 버튼을 수정하면 전체 버튼이 업데이트되도록 설계하는 것이 핵심입니다.
4. 디자인과 코드의 토큰이 동일한 기준으로 작동하도록 맞춥니다.
   • 디자인 시스템 문서와 실제 CSS 변수 이름이 다르면 혼란이 생기기 쉽습니다.

---

마무리하며

디자인 시스템을 오래 쓰려면 무엇보다 기초 토대를 탄탄하게 쌓는 것이 중요합니다.
그 기초가 바로 디자인 토큰이고,
그 토큰을 Figma에서 체계적으로 관리하는 방식이 곧 디자인 시스템의 품질을 결정합니다.

디자인이 점점 시스템화되고 협업 중심으로 바뀌는 시대에서
Figma로 토큰 기반 디자인 시스템을 먼저 구성해두는 건
디자이너로서 갖춰야 할 중요한 경쟁력 중 하나가 될 것입니다.

다음 글에서는 Tokens Studio를 실무에서 세팅하는 과정과
디자인 시스템 문서에 반영하는 실제 사례를 함께 정리해 보겠습니다.

Figma를 사용하다 보면 Auto Layout은 잘알면 편하지만 사용법이 조금은 애매하죠?

처음에는 버튼이나 카드처럼 단순한 컴포넌트를 정렬할 때 유용하게 느껴지지만,
조금만 구조가 복잡해지면 정렬이 무너지고 간격이 뒤죽박죽되는 경우를 자주 겪게 돼요.
특히 모바일이나 반응형 UI를 설계할 때는 작은 오차가 전체 레이아웃에 영향을 주기 때문에
Auto Layout을 정확하게 이해하면서 사용해야 합니다.

이번 글에서는 Auto Layout이 꼬이지 않도록 설정하는 핵심 원리와 정렬이 정확해지는 설정법을 단계별로 정리해보겠습니다.

---

Auto Layout의 기본 구조, 다시 정확히 이해해야 합니다

Auto Layout은 프레임 내부에 있는 객체들의 방향, 정렬, 간격, 여백 등을 자동으로 관리해주는 기능입니다.
정렬을 정확하게 유지하려면 먼저 이 네 가지 요소를 기준으로 구조를 설계해야 합니다.

1. Direction (방향)
   • 수평(Horizontal) 또는 수직(Vertical) 중 하나를 선택
   • 내부 요소의 배치 방향이 명확하지 않으면 정렬이 흐트러집니다.
2. Spacing (간격)
   • 자식 요소 간 간격을 지정하는 값
   • 요소를 추가하거나 제거해도 자동 간격을 유지할 수 있습니다.
3. Padding (여백)
   • 프레임 바깥쪽 테두리와 콘텐츠 사이의 간격을 의미
   • 상하좌우를 개별로 조정할 수 있으며, 이 값이 올바르지 않으면 정렬이 어색해집니다.
4. Alignment (정렬 기준점)
   • 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬 등 기준점을 설정
   • 내부 요소가 다를 경우 기준점 설정이 핵심이 됩니다.

---

실제로 많이 헷갈리는 설정 실수 TOP 3

1. Resize 속성을 제대로 설정하지 않음

Auto Layout 내 요소들은 기본적으로 Hug contents로 설정되는데요.
이럴 경우, 텍스트나 이미지의 크기가 커지면 전체 프레임이 함께 튀어버릴 수 있습니다.
반대로 Fill container로 설정하면 부모 프레임의 폭에 맞춰 늘어나기 때문에
정해진 구조에서 안정적으로 작동합니다.

팁: 텍스트가 들어간 버튼은 내부 텍스트는 Hug, 버튼 배경은 Fill로 설정하는 것이 가장 자연스럽습니다.

2. 간격(Spacing)이 아니라 Margin을 조정하려는 실수

컴포넌트 간의 간격을 조정할 때, 종종 외부 여백을 따로 지정하려는 경우가 있습니다.
하지만 Auto Layout 구조 안에서는 margin 개념이 없고 spacing 값으로 전체를 조정해야 하기 때문에
하나의 요소만 튀어나오는 문제가 생깁니다.
이럴 때는 Dummy Spacer(빈 프레임)를 삽입해서 공간을 제어하는 방식이 더 안정적입니다.

3. Nest된 구조에서 정렬 충돌

Auto Layout을 중첩해서 사용할 때 자식 프레임과 부모 프레임의 방향이 다르면
정렬이 꼬이거나 의도하지 않은 위치로 밀리는 현상이 생깁니다.
이럴 땐 각각의 레벨에서 direction과 alignment 설정을 정확히 확인해야 합니다.

---

정렬이 정확해지는 실전 설정 팁

여기서 진짜 중요한 팁이니 이 부분을 반드시 이해하고 사용해주세요.

• 레이어 순서를 항상 왼쪽 → 오른쪽 / 위 → 아래로 맞춰주세요
  정렬 기준은 레이어 순서와 일치하기 때문에 드래그 순서가 중요합니다.
• Spacing between items와 Padding은 명확히 구분해 주세요
  내부 아이템 간 간격과 외곽 여백은 개념적으로 완전히 다릅니다.
• Fill vs Hug vs Fixed의 차이를 이해하세요
  Fill은 부모를 기준으로 크기를 맞추고, Hug는 콘텐츠 기준, Fixed는 고정입니다.
  컴포넌트가 작동 방식에 따라 다르게 설정되어야 합니다.
• Smart selection은 정렬 구조를 망가뜨릴 수 있습니다
  여러 개의 요소를 선택하고 간격 조정할 때, Auto Layout 설정이 덮여버리는 경우가 생기기 때문에
  반드시 전체 구조를 파악한 뒤 조작하는 것이 좋습니다.

---

마무리

Auto Layout은 단순한 정렬 도구가 아니라,
디자인 시스템을 구성하고 반응형 UI를 설계할 때 핵심이 되는 구조 설계 도구입니다.
하지만 이 기능은 잘못 쓰면 오히려 시간을 더 낭비하게 만드는 원인이 되기도 합니다.

이번 글에서 정리한 원칙과 설정 방법을 바탕으로,
Auto Layout을 더욱 정밀하게 사용해보시기 바랍니다.
꼬이지 않는 Auto Layout을 만드는 가장 좋은 방법은
처음부터 방향, 크기, 여백, 정렬을 기준으로 구조를 짜는 것이라는 점, 꼭 기억해 두세요.

다음 글에서는 실제 디자인 시스템 구축에서 Auto Layout이 어떤 방식으로 쓰이는지
실전 사례 중심으로 소개해보겠습니다.