컴포넌트 & 인스턴스
Figma/개발 컴포넌트 관계
피그마 오픈카톡방2026. 3. 7.
질문사항
Figma의 오토 레이아웃이나 컴포넌트 연결 방식은 표준화된 작업 방식이 있다기보다 실무자의 용도에 따라 논의하여 결정하는 문제라고 생각합니다. Figma 컴포넌트와 개발 컴포넌트 간의 관계 및 작업 방식에 대한 의견을 공유해 주실 수 있나요?
답변
Figma의 컴포넌트와 개발단의 컴포넌트는 개념적으로는 유사하지만, 구현 방식은 분리되어 있습니다. Figma에서 디자인된 컴포넌트의 시각적 속성(예: 여백, 색상, 폰트 크기 등)이 개발팀에 전달되면, 개발팀은 이를 바탕으로 실제 코드 컴포넌트를 구현합니다. 중요한 것은 Figma 컴포넌트의 '모습'과 '속성'이 일관되게 정의되어 개발팀이 이를 명확히 이해하고 코드화할 수 있도록 하는 것입니다. 예를 들어, Figma에서 `primary_button`이라는 컴포넌트를 만들고 `padding: 16px`, `background-color: #5578f0`, `font-size: 16px`, `color: #ffffff`와 같은 속성을 정의하면, 개발팀은 이를 참고하여 CSS나 다른 프레임워크로 동일한 속성의 `primary_button` 컴포넌트를 구현하게 됩니다.