피그마 변수, 디자인 시스템을 더 스마트하게!
by DD
5개월 전
조회수 26
피그마 변수를 통해 색상, 텍스트, 상태 등 UI 요소의 동적 관리를 가능하게 함
라이트/다크 모드 전환, 브랜드 리뉴얼 시 유지보수 효율을 극대화
Boolean 변수를 활용하여 컴포넌트 상태 관리를 통합하고 UI 일관성 확보
색상 변수: 디자인 시스템의 핵심
색상 변수는 라이트/다크 모드 전환 시 유지보수 비용을 획기적으로 줄여준다. 의미 기반 토큰을 정의하고, 각 토큰에 모드별 값을 바인딩하면 된다. 따라서 UI는 hex 값을 직접 참조하지 않고, 토큰을 참조하여 테마 변경에 유연하게 대응한다.
Boolean 변수: 전역 상태 관리의 혁신
Boolean 변수는 컴포넌트 내 지역적 상태를 전역 상태로 승격시킨다. isLogin과 같은 변수를 정의하고, 모든 컴포넌트가 이를 참조하도록 연결한다. 결과적으로 UI 전체에서 로그인 여부를 단일 조건으로 관리하며, 상태 관리의 효율성을 높인다.
Spacing & Number 변수: UI 일관성 확보
Spacing 변수는 UI 간격의 일관성을 유지하고, Number 변수는 디테일 값을 통제한다. 간격 스케일을 정의하면 패딩, 마진, 갭을 하나의 기준으로 관리할 수 있다. 따라서 UI 리듬을 유지하고, 브랜드 톤을 일관되게 유지하며, 확장성을 확보한다.
