Prev

Icons

Next

Motion

Back

Tok.D _ Design System (Beta)

Setting - Logo

Logo

Navigation에 활용되는 로고 영역은 **215x80(px)**로 제한합니다.

1) Align

Left

**PC** /Header, **Tab, Mobile**/Text Header , **Tab, Mobile**/Bottom Navigation - Header에서는 항상 Logo _ Left 를 적용합니다.

Center

**Tab, Mobile** /Icon Header 에서는 항상 Logo _ Center 를 적용합니다.

2) Color

제품의 로고에는 Primary 또는 White 컬러를 적용할 수 있습니다.

Background 영역이 어둡거나 색상 배경이 깔리게 되어 Header Background 를 Transparent 로 설정할 경우, White 로고를 주로 활용합니다.

3) Edit Guide _ Figma

  1. 보라색 점선 영역을 두번 클릭 후, 기존 로고를 삭제하세요.

  1. 대치할 로고파일을 불러와 피그마 Frame 위에 올린 후,

우측 Design 탭에서 Fill - Style 버튼을 눌러 Brand Color _ Primary 를 적용하세요.

  1. 해당 로고를, 빈 보라색 점선 영역 안에 드래그 해 배치하세요.

좌측정렬, 중앙정렬 각 1개씩 배치하세요. 로고 영역은 215x80(px)로 제한합니다.

  1. 위의 과정을 완료하면, Logo White 영역에도 자동으로 새로운 로고가 대치됩니다.

해당 로고를 두번 클릭한 후, 우측 Design 탭 - Selection Colors 에서 Brand color/Primary 를 Grayscale/White 로 변경해 적용하세요.