[피그마] figma에서 spacing을 smart component로 활용하는 방법

Spacing Smart Component 생성

1. 새로운 컴포넌트 생성:
   • 빈 프레임을 만들고 이를 컴포넌트로 변환합니다.
   • 이 프레임의 크기를 원하는 기본 spacing 값(예: 8px)으로 설정합니다.
2. 변수 추가:
   • 컴포넌트를 선택하고 우측 패널에서 '변수 추가'를 클릭합니다.
   • 'size'라는 이름의 숫자 변수를 생성합니다.
3. 속성 연결:
   • 컴포넌트의 너비와 높이를 'size' 변수에 연결합니다.

Smart Component 활용

1. 인스턴스 생성:
   • 생성한 spacing 컴포넌트의 인스턴스를 디자인에 추가합니다.
2. 크기 조정:
   • 인스턴스를 선택하고 'size' 변수 값을 조정하여 spacing을 변경합니다.
3. Auto Layout 활용:
   • Spacing 컴포넌트를 Auto Layout 프레임 내에서 사용하여 요소 간 간격을 일관되게 유지합니다.

추가 팁

• 변수 프리셋 생성: 자주 사용하는 spacing 값(예: 8px, 16px, 24px)에 대한 프리셋을 만들어 빠르게 적용할 수 있습니다.
• 색상 표시: Spacing 컴포넌트에 연한 색상을 적용하여 시각적으로 구분하기 쉽게 만듭니다.
• 네이밍 규칙: 'spacing/small', 'spacing/medium' 등의 명확한 이름을 사용하여 관리를 용이하게 합니다.

이러한 방식으로 spacing을 smart component로 활용하면, 디자인 시스템의 일관성을 유지하고 반응형 레이아웃을 더욱 효과적으로 구현할 수 있습니다

 

또한, 디자인 변경 시 spacing을 한 곳에서 관리할 수 있어 유지보수가 훨씬 쉬워집니다.