개발 모드 & 핸드오프

Figma 불렛 리스트 컴포넌트화

피그마 오픈카톡방2026. 3. 7.

질문사항

피그마의 기본 리스트 기능을 사용할 때, 개발 시 불렛과 텍스트 간의 간격이 제대로 나오지 않는 문제가 있습니다. 불렛 리스트를 컴포넌트로 만들어서 사용하면 불렛과 텍스트 간격 및 텍스트 사이의 간격 확인이 가능한가요? 또한, 불렛 크기가 텍스트에 비해 너무 커서 현업에서 컨펌이 나지 않은 경험도 있는데, 이에 대한 해결책이 있을까요?

답변

피그마의 기본 리스트 기능은 개발 시 불렛과 텍스트 간의 간격이나 불렛 크기 커스터마이징에 제한이 있을 수 있습니다.

간격 확인: Dev Mode에서는 `list-style-position`이나 `padding-left`와 같은 CSS 속성을 통해 리스트의 간격 관련 값을 조회할 수 있습니다. 하지만 이는 브라우저의 기본 스타일을 따르므로, 피그마에서 시각적으로 설정한 것과 다르게 해석될 수 있습니다.

컴포넌트 활용: 불렛 리스트를 컴포넌트로 만들어 사용하면, 디자이너가 의도한 간격과 불렛 스타일을 명확하게 정의하고 개발자에게 전달할 수 있습니다. 예를 들어, 오토 레이아웃을 사용하여 불렛과 텍스트를 그룹화하고, 그 사이에 명확한 `gap` 값을 설정하면 개발자가 이를 쉽게 확인할 수 있습니다.

불렛 크기 커스터마이징: 피그마 자체에서는 불렛의 크기를 직접적으로 커스터마이징하는 기능이 제한적입니다. 이 문제를 해결하기 위해서는 다음과 같은 방법을 고려할 수 있습니다:

커스텀 불렛 컴포넌트: 불렛을 텍스트와 분리된 별도의 아이콘(또는 도형) 컴포넌트로 만들고, 이를 텍스트와 함께 오토 레이아웃으로 묶어 리스트 아이템 컴포넌트를 생성합니다. 이렇게 하면 불렛의 크기, 색상, 모양 등을 자유롭게 제어할 수 있습니다.

아이콘 폰트 사용: 개발 단계에서 아이콘 폰트(예: Font Awesome, Material Icons)를 사용하여 불렛을 구현하고, CSS로 크기와 색상을 조절하는 방식을 고려할 수 있습니다. 디자인 시스템 가이드에 이를 명시하여 디자이너와 개발자 간의 싱크를 맞춥니다.

결론적으로, 피그마의 기본 리스트 기능의 한계를 극복하고 개발자와의 효율적인 핸드오프를 위해서는 불렛 리스트를 컴포넌트화하고 오토 레이아웃을 적극적으로 활용하는 것이 좋습니다.