Landkit 스타일

에디터 우측 패널엔 Design 탭과 Document 탭이 있어요.

Document

Document 탭은 페이지 전체에 필요한 프로퍼티를 가지고 있어요.

• 전체 페이지의 색상 설정하기
  Document > Page CSS > Fill 에서 컬러 지정

컬러는 두 가지 옵션으로 선택할 수 있어요.

1. 컬러 팔레트
컬러 팔레트에서 컬러 코드를 직접 입력할 수 있어요.(HEX, RGB, RGBA, HSL, HSLA)

2. Seed Design 컬러 토큰
디자인 컬러 토큰을 리스트에서 선택할 수 있고, 검색 기능으로 원하는 토큰을 찾을 수 있어요.
컬러 토큰은 디바이스의 라이트/다크 모드에 대응되어 있어요.

Design

컴포넌트를 선택하면 Design 탭에서 해당 컴포넌트의 디테일을 정할 수 있어요

내용

• 내용은 콘텐츠를 다루는 영역이에요. 텍스트를 입력할 수도 있고, 이미지를 업로드할 수도 있어요.
• 자세한 내용은 콘텐츠 가이드에서 다루고 있어요.

프로퍼티

• 프로퍼티를 통해 컴포넌트의 디자인을 제어할 수 있어요.
• 컴포넌트마다 노출되는 프로퍼티가 달라요.

Frame

프레임 전체의 디자인 옵션을 지정할 수 있어요

• Padding
  컨텐츠와 컨텐츠를 감싸고있는 프레임 사이의 여백을 말해요. 패딩값에 따라 프레임의 크기가 자동적으로 반영되어요.
• Gap
  내부 컨텐츠 끼리의 사이 간격을 말해요.
• Fill
  프레임의 컬러를 지정할 수 있어요.
• Width & Height
  특별한 경우를 제외하고 조정하지 않아요.

Card

카드를 포함한 컴포넌트의 경우 카드 내부의 디자인 옵션을 지정할 수 있어요

• Padding
  컨텐츠와 컨텐츠를 감싸고있는 카드 사이의 여백을 말해요. 패딩값에 따라 카드의 크기가 자동적으로 반영되어요.
• Gap
  카드 내부 컨텐츠끼리의 사이 간격을 말해요.
• Fill
  카드의 컬러를 지정할 수 있어요.
• Radius
  카드의 R값을 지정할 수 있어요.
• Width & Height
  특별한 경우를 제외하고 조정하지 않아요.

Title & subtitle & Description

• 주로 사용하는 옵션 : Size, Weight, Lineheight, Letterspacing, Align, Color
• Size
  텍스트의 크기를 변경할 수 있어요. 단위는 px이에요.
• Weight
  텍스트의 굵기를 변경할 수 있어요.
• Lineheight
  텍스트의 행간을 변경할 수 있어요. % 단위로 입력해요. (예시 150%)
• Letterspacing
  텍스트의 자간을 변경할 수 있어요. px 단위로 입력해요. 마이너스 값도 사용 가능해요. (예시 -1px)
• Color
  텍스트의 컬러를 변경할 수 있어요.

Image

• 옵션을 거의 활용하지 않아요. 이미지의 크기는 피그마에서 디자이너가 가이드에 따라 export 후 그대로 업로드해요.
• Width & Height & Radius(round 값) & Fit 옵션을 설정할 수 있어요.

Badge

• Color
  내부 텍스트의 컬러를 변경할 수 있어요.
• Fill
  배지의 컬러를 변경할 수 있어요.
• Radius
  배지의 R값을 지정할 수 있어요.
• Padding
  배지와 배지내부의 텍스트 사이의 여백값을 조절할 수 있어요. 패딩값에 따라 크기가 자동적으로 반영되어요.
• Width & Height
  특별한 경우를 제외하고 조정하지 않아요.

Button

• 주로 사용하는 옵션 : Height, Color (내부 텍스트 컬러), Fill, Radius
• Color
  내부 텍스트의 컬러를 변경할 수 있어요.
• Fill
  버튼의 컬러를 변경할 수 있어요.
• Radius
  버튼의 R값을 지정할 수 있어요.
• Width & Height
  특별한 경우를 제외하고 조정하지 않아요.