피그마와 개발자의 협업을 더욱 원활하게 만드는 피그마 가이드라인 플러그인 Spectral! 컴포넌트의 간격, 여백, 패딩 및 측정값을 시각화하여 개발자에게 쉽게 전달하세요.
피그마 가이드라인 플러그인 Spectral [DesignDoc] 소개
프로젝트 진행 시 개발 단계에서 개발자가 디자이너에게 컴포넌트 간 간격을 물어보는 상황이 종종 발생합니다. 물론 피그마에서 확인이 가능하지만, 디자이너마다 그룹핑 구조를 다르게 설계하고, 개발자마다 본인만의 방식이 존재할 수 있습니다. 이때 일일이 컴포넌트 간격을 표시하는 작업이 때로는 디자인을 하는 시간보다 더 소요될 수 있습니다.
이럴 때 Spectral 플러그인을 사용하면 시간을 절약할 수 있습니다. Spectral 플러그인은 피그마에서 구성 요소간의 간격, 여백, 패딩에 대한 정밀하고 정확한 측정값을 표시해주기 때문입니다. 또한, Spectral 플러그인은 측정값을 시각화하여 개발자에게 쉽게 전달할 수 있도록 도와줍니다.
특히, 다음과 같은 상황에서 유용하게 사용할 수 있습니다.
- 개발자가 디자이너에게 컴포넌트 간 간격을 물어보는 경우
- 디자인 가이드라인을 정리하여 공유해야 하는 경우
- 디자인을 리뷰하거나 피드백을 제공해야 하는 경우
Spectral 플러그인을 사용하면 다음과 같은 이점을 얻을 수 있습니다.
- 개발자와의 협업 효율성 향상: 컴포넌트 간 간격을 빠르고 쉽게 전달할 수 있습니다.
- 일관된 디자인 유지: 정확한 측정값을 사용하여 일관된 디자인을 유지할 수 있습니다.
- 디자인 작업 효율성 향상: 일일이 컴포넌트 간격을 표시하는 작업을 줄일 수 있습니다.
Spectral 플러그인 사용법
Spectral 플러그인은 피그마의 공식 웹사이트에서 무료로 다운로드 또는 피그마에서 상단 버튼을 통해 추가할 수 있습니다.
- 피그마에서 플러그인을 검색하여 실행합니다.
- 플러그인을 실행하면 아래와 같은 화면이 나오는데, 이때 측정값을 표시하고 싶은 프레임을 선택합니다.
- 프레임을 선택하면 창이 아래와 같이 바뀝니다. Spec 탭에서 표시하길 원하는 값에 체크한 후 ‘Create spec’ 버튼을 누르면 선택한 프레임에 대한 측정값이 표시됩니다.
결론
피그마가 나오기 전에는 디자이너가 파워포인트나 포토샵에서 일일히 스펙을 기재하는 문서 작업을 진행했었는데 세상이 참 편해졌습니다. 그때 당시에는 ‘가이더’라는 직업이 별도로 존재할 정도 였으니까요. (가이더는 해당 가이드 표기하는 작업만 수행하는 사람을 말합니다.)
진행했던 프로젝트도 전부는 아니지만 상황이나 사람에 따라 가이드라인 표기가 필요한 상황이 발생하는데 이때 사용해본 플러그인 중 가장 유용했던 플러그인 입니다.
Spectral 플러그인은 디자이너와 개발자의 협업을 더욱 원활하게 만드는 필수 플러그인입니다. 아직 사용해보지 않았다면, 지금 바로 사용해보시기 바랍니다.