피그마로 디자인하고 CSS로 구현할 때 색상이 미묘하게 달라지는 경우가 있습니다. 두 환경 간 색상을 정확하게 옮기는 방법을 정리했습니다.
피그마 색상 추출
피그마에서 요소를 선택하고 우측 패널의 Fill에서 색상 코드를 복사합니다. HEX, RGB, HSL 중 원하는 형식을 선택할 수 있습니다.
CSS 코드 직접 복사
피그마의 Inspect 패널에서 CSS 코드를 직접 복사할 수 있습니다. 하지만 그라데이션이나 그림자는 수동 조정이 필요할 수 있습니다. 색상 변환기로 값을 검증하세요.
색상 프로파일 주의
피그마는 sRGB를 사용합니다. 모니터가 다른 색상 프로파일이면 보이는 색이 다를 수 있습니다. 최종 확인은 실제 브라우저에서 하세요.
디자인 토큰 활용
피그마의 스타일을 CSS 변수로 내보내는 플러그인을 사용하면 일관성 유지가 쉽습니다.
피그마 플러그인 활용
Tokens Studio for Figma 플러그인을 사용하면 디자인 토큰을 JSON으로 관리하고 GitHub와 동기화할 수 있습니다. 변경 사항이 자동으로 CSS 변수로 변환됩니다. 색상 변환기로 값을 확인하면서 토큰을 설정하세요.
색상 스타일 관리
피그마에서 색상을 직접 지정하지 말고 항상 스타일로 등록해서 사용하세요. 나중에 색상을 변경할 때 스타일만 수정하면 모든 사용처에 반영됩니다. 개발 단계에서도 일관된 값을 얻을 수 있습니다.
Inspect 패널 활용
피그마 Inspect 패널에서 CSS 코드를 바로 복사할 수 있습니다. 색상뿐 아니라 그림자, 폰트 등 다른 스타일도 함께 가져올 수 있어 개발 시간을 단축할 수 있습니다.