디자인시스템 플러그인 Propstar은 최근 사용한 플러그인 중에서도 가장 애정하는 플러그인입니다. 사용한 지 얼마 되지 않았지만, 베스트 5 안에 들 정도로 평가합니다. 특히, 프로덕트 디자이너가 디자인 시스템을 제작하고 관리해야 하는 특성을 갖고 있기 때문에 필수적으로 사용해야 한다고 생각합니다.
이제 예시를 통해 Propstar 플러그인의 활용 방법을 알아보겠습니다. 이 플러그인을 사용하면 디자인 작업을 훨씬 더 효율적으로 수행할 수 있으며, 디자인 시스템을 쉽게 제작하고 관리할 수 있습니다. 또한, 이 플러그인은 사용자 친화적인 인터페이스를 제공하여 사용자가 플러그인을 쉽게 익힐 수 있도록 도와줍니다. 이를 통해 디자이너는 시간과 노력을 절약하고, 더욱 창의적이고 효율적인 작업을 수행할 수 있습니다.
피그마에서 컴포넌트 생성
먼저 피그마 디자인 시스템에서 Components를 생성한 후, 모두 드래그하여 피그마 우측 패널에서 ‘Combine as variants’를 클릭하여 Variants를 생성합니다. 저는 커뮤니티에서 테스트용 예시로 생성된 Text Field 컴포넌트를 하나 가져와 보았습니다.
디자인시스템 플러그인 Propstar 실행
해당 Variants를 클릭한 상태로 Propstar 플러그인을 실행합니다. [예시이미지] 두 가지 옵션이 있습니다. 첫 번째로, “Create Embedded Table”은 해당 Variants에 직접 테이블을 생성합니다. 두 번째로, “Create Standalone Table”은 원본 Variants를 보존하고 별도의 테이블을 생성합니다. 저는 두 가지 방법을 모두 사용해보았지만, 관리 측면에서 첫 번째 방법이 더 유용하다고 생각하여 원본을 보존하지 않고 바로 테이블을 생성하는 방식을 사용하고 있습니다.
테이블 생성 완료
원하는 옵션을 클릭하면 기다리는 시간 없이 테이블이 즉시 생성됩니다. 아래 이미지는 위에서 제작한 컴포넌트를 기반으로 생성된 테이블입니다.
더 복잡한 프로퍼티를 가진 컴포넌트의 예시
실제 프로젝트에서 사용한 테이블을 한 번 살펴보겠습니다. 이 예시에서는 더 많은 프로퍼티를 가진 상황입니다. 이를 통해 Propstar 플러그인을 사용해야 하는 이유를 알 수 있습니다.
테이블을 자세히 보시면 컴포넌트의 백그라운드 색상이 조금 다른 것을 알 수 있습니다. 혹시 예상하셨나요? 놀랍게도, 흰색 백그라운드의 컴포넌트는 테이블 생성 전에 제가 제작한 컴포넌트 원본입니다. 반면, 바이올렛 컬러 백그라운드에 있는 컴포넌트는 제가 생성하지 않았지만, 플러그인에서 생성한 컴포넌트입니다. 정말 놀랍지 않나요?
사용해보니 부가 케이스 컴포넌트를 생성해 주는 기능 외에도 다른 점에서 만족하고 있습니다. 그 중 하나는 실수를 캐치할 수 있다는 점입니다. 실제 프로젝트가 바쁘게 진행될 경우 디자인 시스템을 제작하고 검수하는 데에 많은 시간을 할애할 수 없을 때가 많습니다. 하지만 플러그인을 이용하여 빠르게 테이블을 생성해주므로 누락되거나 구조적으로 맞지 않는 부분을 쉽게 발견할 수 있었습니다.
또한, 원본 컴포넌트를 수정할 때 바이올렛 컬러 백그라운드의 컴포넌트는 자동으로 수정됩니다.
구체적인 활용 사례
정리하자면 다음과 같은 구체적인 사례에서 활용될 수 있습니다.
- 디자인 시스템의 프로퍼티를 체계적으로 관리하고자 할 때
- 디자인 시스템의 변경 사항을 추적하고자 할 때
- 디자인 시스템을 다른 사용자와 협업하고자 할 때
추가 팁
플러그인을 보다 효율적으로 활용하기 위한 다음과 같은 팁을 참고할 수 있습니다.
- 프로퍼티를 그룹화하여 관리합니다. 프로퍼티 그룹 기능을 활용하여 프로퍼티를 그룹화하여 관리합니다.
- 프로퍼티에 설명을 추가합니다. 프로퍼티에 설명을 추가하여 프로퍼티의 용도를 명확하게 합니다.
- 프로퍼티를 정기적으로 업데이트합니다. 프로퍼티를 정기적으로 업데이트하여 디자인 시스템의 최신 상태를 유지합니다.
결론
propstar는 프로덕트 디자이너들이 피그마 디자인 시스템을 구축하고 관리하는 데에 매우 유용한 도구입니다. 이 도구를 사용하면 피그마 디자인 시스템의 품질과 생산성을 크게 향상시킬 수 있습니다. 해당 플러그인은 디자이너들이 효율적으로 작업할 수 있도록 도와줄 뿐만 아니라, 디자인 시스템의 관리도 편리하게 할 수 있습니다. 따라서 propstar를 활용하면 프로덕트 디자이너의 생산성을 대폭 향상시킬 수 있으며, 피그마 디자인 시스템을 보다 효과적으로 관리할 수 있습니다.