Pixso 2.0 디자인 토큰

수십 개의 디자인 요소에서 동일한 색상이나 간격을 수정하느라 시간을 허비한 적이 있나요? Pixso 2.0의 디자인 토큰이 그 번거로움을 해결합니다. 이 스마트하고 재사용 가능한 디자인 토큰을 사용하면 색상, 숫자, 텍스트 등을 한 번만 설정해도 어디서든 동기화할 수 있습니다.

디자인 토큰이란?

디자인 토큰은 워크플로우를 단순화하고, 디자인 효율성을 높이며, 일관성을 보장하고, 협업을 강화하며, 적응형·인터랙티브 디자인을 구축할 수 있게 해주는 강력한 도구입니다. 이를 통해 확장성과 전체적인 디자인 품질이 개선됩니다.

디자인 토큰의 주요 장점

재사용 가능: 색상, 숫자, 텍스트, 부울 값 등의 속성을 요소에 할당할 수 있습니다.

유연한 전환:다양한 테마 간 전환을 매끄럽게 수행할 수 있습니다.

동적 업데이트: 토큰이 적용된 모든 인스턴스에서 변경 사항이 자동으로 동기화되어, 디자인 시스템 업데이트 시 시간과 노력을 절약할 수 있습니다.

디자인 토큰의 활용 사례

• 라이트/다크 모드 또는 다른 테마 간 전환
• 레이아웃 조정
• 다국어 전환
• 타이포그래피 적용

지원되는 디자인 토큰 유형

Pixso는 다양한 디자인 요구를 충족하기 위해 4가지 디자인 토큰 유형을 제공합니다:색상, 숫자, 텍스트, 그리고 부울 값.

색상 토큰은 객체의 채우기나 선에 적용할 수 있습니다.

숫자 토큰은 레이어의 너비와 높이, 간격, 모서리 반경 등 치수를 정의하는 데 사용할 수 있습니다.

텍스트 토큰은 텍스트 레이어에 적용할 수 있으며, 반복 콘텐츠 및 현지화를 효율적으로 관리할 수 있습니다.

부울 토큰은 레이어의 표시 여부를 전환하는 데 사용할 수 있습니다.

토큰은 어떻게 적용하나요?

디자인 토큰은 유형에 따라 디자인 패널의 다른 섹션에서 접근할 수 있습니다. 사용 방법은 다음과 같습니다:

1. 객체에 디자인 토큰 적용

캔버스에서 레이어를 선택한 후 오른쪽 사이드바를 사용합니다. 색상 토큰의 경우: 스타일 아이콘을 클릭하세요.

숫자, 텍스트, 부울 토큰의 경우: 토큰 아이콘(육각형)을 클릭하거나 텍스트/숫자 입력 필드의 드롭다운 메뉴를 엽니다.

2.컴포넌트에서 디자인 토큰
"색상"과 "간격" 같은 토큰 세트를 사용해 컴포넌트를 구성합니다. 요소를 선택한 후 "색상" 컬렉션에서 색상 토큰을 고르세요.
 

"간격" 세트의 숫자 토큰을 카드의 오토 레이아웃 패딩과 간격 값에 적용합니다.
 

3.텍스트에서 디자인 토큰 사용
텍스트 토큰을 텍스트 레이어에 바인딩하여 중앙 집중식 콘텐츠 관리를 할 수 있습니다 (예: 반복되는 텍스트를 한 번에 업데이트). 또한 글꼴 패밀리나 굵기 같은 타이포그래피 설정에도 사용할 수 있습니다.

텍스트를 선택하고 패널에서 텍스트 토큰을 적용하면—변경 사항이 모든 연결된 인스턴스에 동기화됩니다.

4.타이포그래피 토큰
텍스트 토큰(예: 글꼴 패밀리)과 숫자 토큰(예: 글꼴 두께, 크기)을 조합해 타이포그래피 시스템을 표준화할 수 있습니다.

5.그리드에서 토큰
프레임을 선택한 후 토큰을 사용해 레이아웃 그리드 매개변수를 동적으로 조정합니다.

6.효과에서 디자인 토큰
토큰을 효과 속성에 바인딩할 수 있습니다. 예를 들어 그림자 값을 토큰에 연결할 수 있습니다. 그림자 토큰이 연결된 카드를 다른 컨테이너로 드래그하면, 해당 토큰이 라이트 모드에만 적용되도록 설정된 경우 그림자가 사라질 수 있습니다.

7.그라데이션에서 디자인 토큰
개별 그라데이션 노드에도 색상 토큰을 바인딩할 수 있습니다:

1) 레이어를 선택하고, "채우기" 설정 패널을 열어 그라데이션 시작점을 선택합니다.

2) "토큰" 탭으로 전환하고 "Gradient"를 검색한 후 "그라데이션 시작점"을 선택해 적용합니다.

Pixso 2.0의 디자인 토큰을 활용하면 디자인 일관성을 유지하고 변화에 빠르게 대응할 수 있습니다—워크플로우를 간소화하고 더 견고한 디자인 시스템을 구축하세요.

Pixso 무료로 사용해보기