디자인
디자인 (Design)
Figma에서 디자인 토큰을 사용하는 방법 문서예요. PatternFly 6 디자인 키트에 설정된 토큰 변수와 스타일로 컴포넌트를 커스터마이즈할 수 있어요.
출처: 문서
본문
토큰은 PatternFly 6의 일부로만 사용할 수 있어요. 토큰 시스템을 활용하려면 온보딩 가이드를 사용해 PatternFly 6 디자인 키트를 설치하고 제품이 PatternFly 6으로 업그레이드되어 있는지 확인해야 합니다.
Figma에서 토큰 사용하기 (Using tokens in Figma)
토큰은 Figma 안에서 변수와 스타일로 설정되며, 우리의 Design Tokens and Styles Library에 있습니다. 색상, 글꼴 크기, 간격, 치수 등 PatternFly에서 사용하는 모든 디자인 요소를 정의합니다.
Figma 토큰은 우리 토큰 변수 구조의 세그먼트와 일치하지만, 이중 하이픈(--) 대신 슬래시(/)를 사용합니다.
PatternFly 6 요소(컴포넌트, 차트, 확장 포함)는 토큰으로 구축됩니다. 따라서 일반적으로 토큰을 직접 다룰 필요는 없어요. 예외는 내장된 커스터마이즈 옵션에서 벗어나는 경우입니다. 자세한 내용은 토큰으로 커스터마이즈하는 가이드라인을 참조하세요.
토큰은 배후에서 설정되기 때문에 디자인에 컴포넌트를 추가하면서 커스터마이즈할 수 있게 해 줍니다. 컴포넌트를 Figma 디자인 작업 공간에 삽입하기 전에, 특정 사용 사례에 맞게 속성과 변수 모드를 조정할 수 있어요.
이렇게 하면 서로 다른 변형 사이를 빠르게 전환하고 컴포넌트 개선을 활성화/비활성화할 수 있습니다.
컴포넌트를 작업 공간에 삽입한 후에도 Figma의 디자인 사이드바에서 모양을 계속 커스터마이즈할 수 있어요. 색상, 스타일, 효과를 선택할 때 선택 가능한 토큰 목록이 표시됩니다.
토큰으로 디자인 커스터마이즈하기 (Customizing designs with tokens)
커스텀 디자인을 작업 중이라면 사전 정의된 옵션을 넘어 컴포넌트를 조정해야 할 수도 있어요. 예를 들어 텍스트를 추가하거나 아직 없는 곳에 커스텀 간격을 추가해야 할 수 있습니다. 커스텀 디자인을 만들 때는 필요한 스타일과 구조를 얻기 위해 토큰을 적절히 사용하세요. 자신의 요구에 가장 잘 맞는 의미적 토큰을 선택하세요.
토큰은 관련된 시각적 속성만 수정할 수 있도록 의도적으로 범위가 지정됩니다. 예를 들어 어떤 토큰은 색상 범위가 제한되어 fill 색상이나 stroke 색상으로만 사용할 수 있습니다. 즉, 토큰으로 디자인을 커스터마이즈할 수는 있지만, 특정 상황에서만 특정 토큰을 사용할 수 있다는 뜻이에요. 이는 작업 중인 디자인 요소에 개념적으로 관련된 토큰을 사용하도록 보장하는 데 도움이 됩니다.