FigmaVariables2 디자인 시스템의 뿌리, 디자인 토큰(Design Tokens): 심화 설계를 위한 필수 기초 지식 효율적인 UI 협업의 시작, 디자인 토큰: 디자인-개발 싱크를 위한 구조적 가이드라인0. 들어가며: 왜 지금 '디자인 토큰'인가?최근 UI/UX 디자인 현장에서 '피그마 변수(Variables)' 기능의 등장은 디자인 시스템의 패러다임을 완전히 바꾸어 놓았습니다. 단순히 색상을 저장하는 '스타일' 단계를 넘어, 코드와 디자인이 실시간으로 동기화되는 '디자인 토큰(Design Tokens)' 체계가 필수가 된 것이죠.특히 대한민국 공공 웹·앱의 표준인 KRDS(Korean Government Design System) 역시 이 토큰 체계를 통해 접근성과 일관성을 관리하고 있습니다. 오늘은 초보 디자이너부터 실무자까지 아우를 수 있는 디자인 토큰의 개념과 피그마 활용법, 그리고 KRDS의 모범 사례와 202.. 2026. 1. 9. Figma Variables로 구축하는 다크모드 디자인 시스템 (Hex 코드 포함) 디자인 시스템의 실전: Figma Variables 실무 가이드단순히 색을 고르는 단계를 넘어, 개발자와 협업 가능한 디자인 토큰(Design Tokens)을 설계합니다.실제 핀테크/증권 프로젝트에서 바로 복사해서 쓸 수 있는 핵심 컬러 팔레트와 네이밍 컨벤션을 공개합니다.안녕하세요! 지난 포스팅에서 다크모드의 전략적 중요성을 다뤘다면, 오늘은 그 전략을 실제 Figma에서 어떻게 구현하는지 알아보겠습니다. Figma의 Variables(변수) 기능은 라이트/다크 모드 전환을 1초 만에 가능하게 할 뿐만 아니라, 개발자와의 소통 비용을 획기적으로 줄여줍니다.1. 핵심은 네이밍: 역할(Role) 중심의 토큰 설계많은 디자이너가 실수하는 부분이 `Color/Grey-100`처럼 색상 이름으로 변수를 만드는 .. 2026. 1. 8. 이전 1 다음 반응형
