Penpot에서 구성 요소 변형을 활용하는 방법 — Smashing Magazine

2013년 Brad Frost가 디지털 디자인에서 디자인 시스템 사용을 대중화한 이후 디자인 시스템은 일관된 모양과 느낌의 재사용 가능한 디자인 패턴을 만들고 싶어하는 조직은 물론 개인에게도 귀중한 리소스가 되었습니다.

그러나 브래드는 단지 디자인 시스템을 대중화한 것이 아닙니다. 그는 또한 우리에게 뼈대 구조화하기 위해 그리고 우리가 그 프레임워크를 정확히 따를 필요는 없지만(대부분의 사람들은 그것을 자신의 필요에 맞게 조정합니다) 대부분의 디자인 시스템에서 특히 중요한 부분은 변형어느 것 변형 구성 요소의. 구성 요소 변형을 사용하면 다른 구성 요소와 동일하지만 다른 구성 요소를 설계할 수 있으므로 사용자가 즉시 이해할 수 있으면서도 고유한 컨텍스트에 대한 명확성을 제공할 수 있습니다.

이는 구성 요소 변형을 구성 요소 자체만큼 중요하게 만듭니다. 이는 다른 구성 요소와 약간만 다르더라도 개별적으로 관리해야 하는 구성 요소를 너무 많이 만들지 않도록 보장하며, 구성 요소 변형이 함께 그룹화되므로 구성 및 시각적 일관성도 보장합니다.

이제 디자인을 코드로 표현하는 웹 기반 오픈 소스 디자인 도구인 Penpot에서 사용할 수 있습니다. 이 문서에서는 변형, 디자인 시스템에서의 위치, Penpot에서 효과적으로 사용하는 방법에 대해 알아봅니다.

1단계: 디자인 토큰을 순서대로 가져오기

대부분의 경우 하나의 변형을 다른 변형과 구분하는 것은 사용하는 디자인 토큰입니다. 그런데 디자인 토큰이란 정확히 무엇입니까?

브랜드 색상을 상상해 보세요. 색상 값이 다음과 같다고 가정해 보겠습니다. hsl(270 100 42) CSS에서. 우리는 이를 “디자인 토큰”이라는 이름으로 저장합니다. color.brand.default 더 번거로운 것을 기억할 필요 없이 더 쉽게 재사용할 수 있도록 hsl(270 100 42).

거기에서 우리는 두 번째 디자인 토큰을 만들 수도 있습니다. background.button.primary.default 그리고 그것을로 설정 color.brand.default이를 통해 두 색상을 동일한 색상으로 동일하게 만들지만 이름은 다르게 지정하여 둘 사이의 의미적 분리를 설정합니다. 한 토큰의 값을 다른 토큰에서 참조하는 것을 흔히 “별칭”이라고 합니다.

이 설정을 사용하면 문서 전체의 색상 값을 변경하거나 구성 요소에 사용된 색상을 변경하거나(다른 토큰 별칭으로 전환하여) 다른 색상을 사용하는 구성 요소의 변형을 만들 수 있는 유연성을 제공합니다. 궁극적으로 목표는 전부 아니면 전무한 변경으로 제한하기보다는 특정 범위에서 디자인 자체가 아닌 디자인 토큰 값을 편집하여 하나씩이 아닌 한 번에 여러 곳을 변경할 수 있도록 하는 것입니다. 이를 통해 우리는 제약 없이 디자인 시스템을 확장할 수 있습니다.

이를 염두에 두고 마우스 오버 및 비활성화 상태가 있는 기본 버튼에 대한 몇 가지 색상 관련 디자인 토큰에 대한 대략적인 아이디어는 다음과 같습니다.

Penpot에서 컬러 토큰을 생성하려면 왼쪽 패널의 “토큰” 탭으로 전환하고 더하기(+) 아이콘을 클릭한 다음 이름, 값 및 선택적 설명을 지정합니다.

예를 들어:

• 이름: color.brand.default,
• 값: hsl(270 100 42) (필요한 경우 색상 선택기가 있습니다).

다른 유형의 디자인 토큰에도 거의 동일한 프로세스가 있습니다.

걱정하지 마세요. 모든 디자인 토큰을 안내하지는 않지만 디자인 토큰을 만드는 방법을 보여 드리겠습니다. 별명. 위 단계를 반복하기만 하면 됩니다. 단, 값에 대해 방금 다른 색상 토큰을 어떻게 참조했는지 확인하세요(중괄호를 포함해야 함).

• 이름: background.button.primary.default,
• 값: {color.brand.default}

이제 색상 값이 변경되면 버튼의 배경도 변경됩니다. 그러나 또한 버튼에서 색상을 분리하려면 다른 색상 토큰이나 값을 참조하기만 하면 됩니다. Mikołaj Dobrucki는 다른 Smashing 기사에서 훨씬 더 자세히 설명하지만 여기서는 Penpot 디자인 토큰이 플랫폼에 구애받지 않는다는 점에 주목할 가치가 있습니다. 표준화된 W3C DTCG 형식을 따르므로 다른 도구와 호환되며 웹, iOS 및 Android를 포함한 모든 플랫폼으로 쉽게 내보낼 수 있습니다.

다음 몇 단계에서는 다양한 디자인 토큰을 다양한 변형에 연결하면서 버튼 구성 요소와 해당 변형을 만듭니다. 이 작업이 왜 그렇게 유용한지, 그리고 변형에서 디자인 토큰을 사용하는 것이 디자인 시스템 전반에 어떤 이점을 주는지 알게 될 것입니다.

2단계: 구성요소 생성

앞으로 필요에 따라 업데이트할 “기본” 구성 요소를 만들어야 합니다. 실제로 디자인에 삽입할 다른 구성 요소는 기본 구성 요소의 복사본(또는 “인스턴스”)이 될 것입니다. 이것이 바로 요점입니다. 한 번 업데이트하면 변경 사항이 모든 곳에 반영됩니다.

색상을 제외하고 이전에 만든 것은 다음과 같습니다.

디자인 토큰을 적용하려면 “토큰” 탭에서 관련 레이어를 선택했는지 확인한 다음 적용할 디자인 토큰을 선택하세요.

어떤 변형을 먼저 만드는지는 중요하지 않지만 제가 한 것처럼 기본 변형을 시작점으로 사용하고 싶을 것입니다. 어느 쪽이든 이 버튼을 기본 구성 요소로 바꾸려면 캔버스(또는 “레이어” 탭)를 통해 버튼 개체를 선택하고 마우스 오른쪽 버튼으로 클릭한 다음 컨텍스트 메뉴에서 “구성 요소 만들기” 옵션을 선택합니다(또는 그냥 Ctrl 키 / ⌘ + 케이 선택한 후).

구성요소의 이름도 기억하십시오. 이름을 두 번 클릭하면 됩니다(캔버스나 “레이어” 탭을 통해서도 가능).

3단계: 구성요소 변형 생성

변형을 생성하려면 주요 구성요소를 선택하고 Ctrl 키 / ⌘ + 케이 키보드 단축키를 사용하거나 ‘변형 만들기’ 도구 설명(오른쪽 패널의 ‘디자인’ 탭에 있음)을 표시하는 아이콘을 클릭하세요.

다음으로 변형이 선택된 상태에서 “디자인” 탭을 통해 필요한 디자인 변경을 수행합니다. 또는 디자인 토큰을 다른 디자인 토큰으로 교체하려는 경우 “토큰” 탭을 통해 처음에 적용한 것과 동일한 방식으로 수행할 수 있습니다. 캔버스에 모든 변형이 디자인될 때까지 헹구고 반복합니다.

그 후에는 짐작할 수 있듯이 변형의 이름을 지정하고 싶을 것입니다. 하지만 “레이어” 패널을 통해 이 작업을 수행하는 것은 피하세요. 대신 변형을 선택하고 ‘속성 1’을 각 변형의 차별화된 속성을 설명하는 라벨로 바꾸세요. 이 예의 버튼 변형은 동일한 버튼의 다양한 상태를 나타내므로 이 이름을 “상태”로 지정했습니다. 이는 모든 변형에 적용되므로 이 작업은 한 번만 수행하면 됩니다.

속성 이름 옆에 ‘값 1’ 또는 이와 유사한 내용이 표시됩니다. 예를 들어 주 이름과 같이 각 변형에 대해 편집합니다. 제 경우에는 “기본값”, “호버” 및 “비활성화”라는 이름을 지정했습니다.

그리고 그렇습니다. 구성 요소에 더 많은 속성을 추가할 수 있습니다. 이렇게 하려면 근처에 있는 더하기(+) 아이콘입니다. 하지만 규모에 따른 구성 요소 변형에 대해서는 잠시 후에 자세히 설명하겠습니다.

작동 중인 구성 요소를 보려면 “자산” 탭(왼쪽 패널에 있음)으로 전환하고 구성 요소를 캔버스로 드래그하여 인스턴스 하나를 초기화하세요. 다시 한 번 “디자인” 탭에서 올바른 속성 값을 선택해야 합니다.

Penpot 디자인 시스템이 이미 있는 경우 여러 구성 요소를 변형이 포함된 하나의 구성 요소로 결합하는 것이 쉽고 오류가 없을 뿐만 아니라 슬래시(/). Penpot은 매우 간단한 가이드를 작성했지만 아래 다이어그램은 이를 매우 잘 요약합니다.

구성요소 변형이 대규모로 작동하는 방식

디자인 시스템의 삼중 위협인 디자인 토큰, 구성 요소 및 구성 요소 변형이 함께 작동하여 강력하면서도 유연한 디자인 시스템뿐만 아니라 확장 가능한 지속 가능한 디자인 시스템을 만듭니다. 처음에는 얼마나 장황해 보일지 몰라도 토큰 별칭을 사용하여 “무엇을 위해”와 “무엇을 위해”를 구분하는 디자인 토큰으로 시작하여 미리 생각하면 이를 달성하기가 더 쉽습니다.

예를 들어, 나는 color.brand.lightest 모든 변형의 텍스트 색상에 대해 색상 토큰을 직접 연결하는 대신 다음과 같은 별칭을 만들었습니다. text.button.primary.default. 즉, 캔버스의 실제 변형을 자세히 살펴보거나 강제로 변경하지 않고도 나중에 변형의 텍스트 색상을 변경할 수 있습니다. color.brand.lightest 이는 다른 여러 구성 요소에 영향을 미칠 수 있습니다.

기억하세요. 구성 요소와 그 변형은 버튼의 재사용성을 제공하지만 색상 토큰은 색상의 재사용성을 제공합니다.수백 개는 아니더라도 수십 개의 다른 구성 요소에 사용될 수 있습니다. 디자인 시스템은 살아 숨쉬는 생태계와 같습니다. 일부 부분은 연결되어 있고, 일부 부분은 연결되어 있지 않으며, 일부 부분은 연결되어 있거나 연결되어 있지 않지만 나중에 연결되어야 할 수도 있으므로 이에 대비해야 합니다.

좋은 소식은 사전에 약간의 계획만 세우면 Penpot을 사용하면 이 모든 것을 매우 쉽게 관리할 수 있다는 것입니다.

다음을 고려하십시오.

• 재사용할 디자인 토큰(예: 색상, 글꼴 크기 등)
• 디자인 토큰 별칭이 재사용되는 위치(예: 버튼, 제목 등)
• 디자인 토큰을 세트로 구성하고,
• 세트를 테마별로 구성하고,
• 주제를 그룹으로 정리하고,
• 필요한 다양한 구성 요소 및
• 각 구성 요소에 필요한 다양한 변형 및 변형 속성입니다.

오늘 제가 디자인한 버튼도 제가 이미 만든 것보다 훨씬 더 확장될 수 있습니다. 활성 및 초점 상태와 같은 더 많은 상태에 대한 추가 속성은 말할 것도 없고 보조 버튼 색상, 3차 색상, 확인 색상, 경고 색상, 취소된 색상, 밝은 모드와 어두운 모드의 다양한 색상 등 나타날 수 있는 모든 변형을 생각해 보세요. 비활성화된 상태의 버튼을 가리킬 수 있는 위치와 모든 버튼에 초점을 맞출 수 있는 위치와 같은 변형의 전체 매트릭스를 원한다면 어떻게 될까요? 아니면 일부 버튼에 텍스트 라벨 대신 아이콘이 있거나 둘 다 있는 경우가 있나요?

디자인은 매우 복잡해질 수 있지만 Penpot에서 디자인 토큰, 구성 요소 및 구성 요소 변형으로 구성한 후에는 실제로 매우 단순하게 느껴질 것입니다. 특히 캔버스에서 볼 수 있을 때, 그리고 아무것도 깨지지 않고 단 몇 초 만에 중요한 변경을 수행한 후에는 더욱 그렇습니다.

결론

이것이 우리가 구성 요소 변형을 대규모로 작동시키는 방법입니다. 우리는 다음과 같은 혜택을 얻습니다. 재사용성 유지하면서 유연성 크든 작든 우리 디자인 시스템의 모든 측면을 벗어나지 않고 분기할 수 있습니다. 그리고 Penpot과 같은 디자인 도구를 사용하면 디자인 시스템을 구축할 수 있을 뿐만 아니라 디자인 토큰과 스타일을 코드로 표현할 수도 있습니다.

(gg, yk)