Figma로 디자인 시스템 만들기

안녕하세요, 게으른 사부작이입니다!

 

오늘은 디자인 시스템 시리즈의 실습 단계로, Figma를 활용해서 디자인 시스템을 만드는 방법을 알아보려고 해요. 지난 포스트에서 버튼과 컬러를 설계해 봤으니, 이제 그걸 Figma에서 구현해 볼 차례예요. Figma는 디자이너와 개발자 모두에게 사랑받는 툴인데, 처음 써보는 사람은 좀 헤맬 수 있죠. 저도 처음엔 Figma 인터페이스에서 길을 잃었지만, 익숙해지니 정말 편리하더라고요. 그럼 저와 함께 Figma로 디자인 시스템을 만들어볼까요?

ChatGPT 생성 이미지

Figma를 처음 썼을 때 헤맸던 기억이 나네요

제가 Figma를 처음 썼을 때의 일이에요. "Figma가 초보자도 쉽게 쓸 수 있다!"라는 말을 듣고 설레는 마음으로 시작했는데, 막상 열어보니 메뉴가 너무 많아서 어디서부터 시작해야 할지 몰랐어요. 버튼 하나 만들려고 했는데, 레이어는 어디 있는지, 색상은 어디서 바꾸는지 헤맸죠. 심지어 컴포넌트라는 개념도 처음이라 "이게 뭐야?" 하면서 한참을 헤맸던 기억이 나네요. 하지만 몇 번 연습해 보니 Figma의 강력함을 알게 됐어요. 특히 디자인 시스템을 만들 때 스타일과 컴포넌트 기능을 활용하면 정말 효율적이더라고요. 여러분도 Figma 처음 써보실 때 헤맨 적 있나요? 오늘은 저와 함께 Figma로 디자인 시스템을 만드는 과정을 단계별로 알아볼게요!

Figma에서 스타일 설정하기: 컬러와 텍스트

Figma에서 디자인 시스템을 만들 때, 먼저 **스타일(Styles)**을 설정하는 게 중요해요. 스타일을 설정하면 색상, 텍스트 같은 기본 요소를 체계적으로 관리할 수 있죠. 지난 포스트에서 설계한 버튼과 컬러를 기준으로 진행해 볼게요.

1. 컬러 스타일 설정

먼저 컬러 스타일을 설정해 볼게요. 지난 포스트에서 정의한 5가지 색상을 Figma에 등록할 거예요:

• Primary Color: #007BFF (파랑)
• Secondary Color: #D3D3D3 (회색)
• Accent Color 1: #28A745 (초록)
• Accent Color 2: #FF0000 (빨강)
• Background Color: #F5F5F5 (연한 회색)

단계별 설명:

1. Figma에서 새 파일을 열고, 아트보드 하나를 생성해요.
2. 오른쪽 패널에서 "Layout" 탭 옆에 있는 "Styles" 아이콘(네 개의 점 모양)을 클릭해요.
3. "Color Styles" 옆의 "+" 버튼을 눌러 새 스타일을 추가해요.
4. 색상 코드를 입력하고 이름을 정해요. 예를 들어, #007BFF는 "Primary"로, #D3D3D3는 "Secondary"로 저장해요.
5. 나머지 색상도 같은 방식으로 추가하면, 이제 버튼이나 요소에 이 스타일을 바로 적용할 수 있어요.

이렇게 컬러 스타일을 설정해 놓으면, 나중에 색상을 변경할 때 스타일만 수정하면 모든 요소가 한 번에 바뀌어요. 저는 처음엔 색상을 직접 입력했는데, 스타일로 관리하니까 훨씬 편리하더라고요.

2. 텍스트 스타일 설정

다음으로 텍스트 스타일을 설정해 볼게요. 이전 포스트에서 타이포그래피 시스템을 만들 때 정했던 크기 계층을 기준으로 설정할 거예요:

• 제목 (H1): Noto Sans Bold, 24px
• 본문: Noto Sans Regular, 16px

단계별 설명:

1. 아트보드에 텍스트 툴(T)을 사용해 "제목"이라는 텍스트를 입력해요.
2. 폰트를 Noto Sans Bold로, 크기를 24px로 설정해요.
3. 오른쪽 패널에서 "Text Styles" 옆의 "+" 버튼을 눌러 스타일을 저장해요. 이름은 "H1"으로 설정.
4. 같은 방식으로 본문 텍스트(Noto Sans Regular, 16px)를 만들어 "Body"로 저장해요.

이제 텍스트를 입력할 때마다 "H1"이나 "Body" 스타일을 바로 적용할 수 있어요. 저는 이 기능 덕분에 글씨 크기와 스타일을 일일이 조정하는 시간을 아꼈어요.

Figma에서 컴포넌트 만드는 법

이제 컴포넌트를 만들어볼게요. 컴포넌트는 재사용 가능한 디자인 조각으로, 디자인 시스템의 핵심이에요. 지난 포스트에서 설계한 버튼 3개를 컴포넌트로 만들어볼게요: Primary 버튼, Secondary 버튼, Warning 버튼.

단계별 설명:

1. 아트보드에 사각형 툴(R)을 사용해 48px x 48px 크기의 버튼을 그려요.
2. Primary 버튼으로 설정: 색상은 "Primary" 스타일(#007BFF), 모서리 둥글기는 8px로 설정.
3. 텍스트 툴(T)로 "확인" 텍스트를 추가하고, "Body" 스타일(16px, Bold) 적용, 텍스트 색상은 흰색.
4. 버튼과 텍스트를 그룹으로 묶은 뒤, 상단 메뉴에서 "Create Component" 버튼(다이아몬드 모양 아이콘)을 클릭해요.
5. 컴포넌트 이름은 "Button/Primary"로 설정해요.
6. 같은 방식으로 Secondary 버튼(#D3D3D3, "취소"), Warning 버튼(#FF0000, "삭제")도 컴포넌트로 만들어요.

이제 이 컴포넌트를 드래그해서 다른 아트보드에 배치하면, 똑같은 버튼을 재사용할 수 있어요. 만약 Primary 버튼 색상을 바꾸고 싶다면, 원본 컴포넌트의 색상을 변경하면 모든 버튼이 자동으로 업데이트돼요. 저는 이 기능 덕분에 반복 작업이 줄어서 정말 편리했어요.

실무 팁: 문서화와 협업

Figma로 디자인 시스템을 만들 때 몇 가지 실무 팁을 드릴게요. 먼저, 문서화가 중요해요. Figma 파일에 "스타일 가이드"라는 아트보드를 따로 만들어서, 컬러 스타일과 텍스트 스타일, 컴포넌트를 정리해 놓으세요. 예를 들어, "Primary 버튼: #007 BFF, 48px" 같은 설명을 추가하면 나중에 참고하기 좋아요. 저는 처음엔 문서화를 안 했다가 "이 버튼 속성이 뭐였지?" 하고 헤맸던 적이 많았어요.

또, Figma는 팀 협업에 정말 유용해요. 팀원들과 파일을 공유하면 실시간으로 함께 작업할 수 있죠. 예를 들어, 디자이너가 만든 컴포넌트를 개발자가 바로 보고, 스타일 값을 확인해서 코드에 반영할 수 있어요. Figma의 "Inspect" 탭을 열면 색상 코드나 크기 값을 바로 확인할 수 있으니, 개발자와 협업할 때 유용하답니다.

이제 개발자와 손잡을 준비 됐나요?

Figma로 디자인 시스템을 만들어보니, 스타일과 컴포넌트를 체계적으로 관리하는 게 얼마나 중요한지 새삼 느껴졌어요. 컬러와 텍스트 스타일을 설정하고, 버튼 컴포넌트를 만들면서 UI가 훨씬 깔끔해졌죠. Figma의 강력한 기능을 활용하면 초보자도 멋진 디자인 시스템을 만들 수 있답니다. 이제 디자인 시스템의 기본 뼈대가 완성됐으니, 다음 포스트에서는 이 시스템을 개발자와 함께 어떻게 구현하는지 알아볼게요. 여러분은 Figma로 어떤 작업을 해보셨나요? 저는 컴포넌트 기능 덕분에 작업이 훨씬 빨라졌어요. 댓글로 여러분의 경험도 공유해 주세요!