Figma 타이포, 컬러 스타일 등록하기

타이포 스타일 등록하기

 

타이포 분류와 사이즈 세분화 

• Headline, Title, Body, Button, Caption 같은 텍스트 종류로 나누고 
• 각각 여러 크기(L, M, S 등)로 디테일하게 구분해 스타일 등록

 

스타일 등록 과정

• Headline L부터 하나씩 새 텍스트 스타일 만들어서 저장
• 스타일 이름, 설명 적어서 체계적으로 관리 가능

 

스타일 적용 & 작업 효율성 

• 등록된 텍스트 스타일은 바로 작업 영역에 적용 가능 
• 제목 영역, 본문 영역, 버튼 영역 등 디자인 구분해서 일관되게 쓰면 깔끔 
• 사전에 정의된 스타일로 통일시켜서 작업 중 헷갈림 최소화 
• 폰트, 크기, 굵기, 색상 등의 조화를 미리 맞춰두면 작업 속도 UP

---

컬러 스타일 등록하기

 

 

자주사용하는 컬러 구분하기

• 메인컬러와 서브컬러, 그리고 포인터컬러 3가지를 정해줬다.
• 텍스트도 밝기에 따라 3가지를 정해주고 하나씩 스타일을 등록하면 color styles에 등록한 목록이 나온다.

 

스타일 적용하기

• 적용할 대상을 선택 후, Fill의 style을 눌러 색을 선택해준다.
• 만들어 둔 스타일을 Edit 버튼을 눌러 수정할 수 있다.

 

---

시멘틱 컬러와 컬러 베리어블

스타일처럼 색으로 네이밍을 하게 되면 어떤 UI에 드렁가야하는 컬러인지 알수가 없다

엡에서 사용할 특정 컬러를 컬러 고유의 색 이름으로 네이밍한다.

이렇게 네이밍한 컬러를 변수로 생성한다. 다음 UI 타입을 가지고 네이밍해서 또 다른 변수로 만들어 준다.

UI명은 버튼이나 텍스트가 될 수 있는데, 이렇게 의미와 기능을 가진 이름을 시맨틱 컬러라고 한다.

 

 

컬러 variables에 등록하기(1차변수)

• 적용할 대상을 선택 후, Fill의 variable을 눌러 색을 선택해준다.
• 사용할 이름을 적고 등록!
• variable은 style처럼 바로 나오지 않고 variables 창을 열어야 등록한 목록이 나온다.

 

 

 

실제 UI에 색을 사용하기 위해서는 2차 베리어블을 만들어줘야함(2차변수)

 

• variables의 컬러 팔레트의 세트이름을 color palette로 바꿔주었다.
• 다시 variables를 열고 ui color set 이름으로 collection을 만들어준다.
• button / primary 이렇게 슬래시를 넣고 만들어주면 상하위 카테고리가 생긴다. 
• 만들어둔 베리어블 중 사용할색을 선택해준다.
• 등록한 색을 버튼에 적용해준다.
• variables에서 primary의 색을 green으로 바꿔주면 버튼색도 변한다.

 

 

컬러 베리어블과 스타일의 차이

한개의 컬러를 여러 가지 UI 타입에 사용할 경우 베리어블을 사용하는 것이 적합하다.

베리어블은 한개당 단일 속성만 가질 수 있다.

 

스타일은 한개당 속성이 여러개일 수 있다.

속성엔 베리어블을 포함해 투명도, 그라디언트 등의 속성을 넣을 수 있다.

투명도나 그림자 등의 효과가 들어가야하는 버튼이 필요할 땐 베리어블보다는 스타일로 사용하는 것이 좋다.