핵심 아이디어

디자이너와 개발자는 같은 컴포넌트 속성(props) 용어를 사용하지만, 서로 다른 환경과 맥락으로 인해 이를 다르게 해석하고 구현한다.

요약

실제 사례로, Figma에서 디자이너가 만든 ‘Button’과 ‘IconButton’ 두 컴포넌트가 코드베이스에서는 ‘MuiButtonBase’, ‘ButtonPrimitive’, ‘Button’, ‘IconButton’, ‘SpecialtyButton’의 다섯 가지 컴포넌트로 구현되었다. ‘disabled’와 같은 속성은 디자인에서는 상태 변형으로 표현되지만, 코드에서는 별도의 boolean 속성으로 구현된다.

견해

완벽한 언어적 통일보다 중요한 것은 각 환경의 차이를 인정하고 충분한 맥락을 공유하는 것이며, Component Inspector 플러그인과 같은 도구가 이러한 번역을 지원한다.

출처

The Shared Language of Props | Figma | Figma Blog