피그마 커뮤니티에 디자인 공유하기
피그마로 발표 템플릿(presentation template) 만들기
이제 2022년도 얼마 남지 않았습니다. 한 해가 끝나가는 요즘, 저는 올 초에 세워뒀던 계획을 얼마나 달성했는지 되돌아보고 있습니다. 과거의 저는 지금 저의 생각보다 너무 알차게 계획을 세워뒀더군요. 역시 실천이 가장 어려운 것 같습니다. 비록 얼마 남지 않은 2022년이지만, 그동안만이라도 계획을 실천에 옮겨보려 합니다.
2022년에 저는 프로덕트 디자이너로서 좋은 사용자 경험을 제공하는 것 외에도, 콘텐츠 생산을 통해 제품 인지도를 올리는데 도움이 되고 싶었습니다. 브런치에 글을 쓰기 시작한 것도 그 일환입니다. 하지만 조금 더 분발해보고자 피그마 커뮤니티에 리소스를 하나 올려보기로 했습니다.
목차
- 피그마 커뮤니티란?
- 발표 템플릿 디자인 시작
- 커뮤니티 공개(Publish) 준비
피그마 커뮤니티(Figma Community)란?
피그마 커뮤니티는 전 세계의 유저들이 피그마(Figma) 또는 피그잼(FigJam)으로 제작한 다양한 리소스를 찾고 공유할 수 있는 곳으로 피그마에서 운영하고 있는 채널입니다. 아디자인 시스템 관련 리소스는 물론 아이콘과 같은 비주얼 에셋까지 다양한 리소스를 찾고 사용할 수 있습니다.
다만, 피그마 커뮤니티에 공개된 리소스들은 모두 CC BY 4.0 라이선스를 가지니, 리소스를 공유 전에 이 점에 유의하셔야 합니다. 즉, 무료로 배포가 가능하고 자유롭게 수정이 가능한 리소스만 공유하셔야 합니다.
피그마 커뮤니티 랜딩 페이지원하는 리소스를 찾았다면, 우측 상단의 Get a copy 버튼을 눌러 복제 파일을 얻을 수 있습니다. 복제 파일은 Drafts에 위치합니다.
우측 상단의 'Get a copy' 버튼을 클릭해 복제 파일을 얻을 수 있습니다. 발표 템플릿 디자인하기
콘텐츠 선정
제품 홍보 콘텐츠가 자연스럽게 담기면서, 사람들이 많이 찾아볼만하고 제작에 시간이 많이 소요되지 않는 리소스를 만들고 싶었습니다. 그래서 프리젠테이션 템플릿을 만들어 보기로 했습니다. 피그마에는 프로토타입 기능도 있어 발표용 파일을 제작하기에도 좋은 도구입니다.
전략
디자인 시스템 관련 기능들을 많이 활용해야 사람들이 복제 파일을 갖고 싶어할거라 가정했습니다. 따라서 프레젠테이션 파일을 위한 작은 디자인 시스템을 설계했고, 이 디자인 시스템을 활용하여 발표 슬라이드를 제작했습니다. 또한 디자인 시스템 기능을 하면, 사용자는 미리 정의해둔 스타일과 컴포넌트를 사용자가 원하는대로 커스텀하여 자신만의 발표용 파일을 만들 수도 있습니다. 예를 들어, 원하는 폰트가 있는 경우 스타일에서 폰트만 변경하면 됩니다. 로고 변경을 원하는 경우 로고 컴포넌트만 수정해주면 됩니다. 파워포인트나 구글 슬라이드에서 제공하는 마스터 슬라이드 기능과 유사합니다.
컴포넌트 & 스타일 디자인
우선, Assets 페이지에 이미지나 로고 같은 모든 에셋 컴포넌트들을 만들었습니다. 슬라이드 템플렛의 배경 이미지도 공통된 여러 장의 그림을 겹쳐 만들어 만들었기 때문에, 이 그림들도 베이스 컴포넌트로 만들어 사용했습니다.
이 Assets에 있는 컴포넌트들을 활용하여, 슬라이드 컴포넌트를 만들었습니다. 슬라이드 컴포넌트에서 사용하는 타이틀과 본문, 컬러들은 미리 스타일로 정의해뒀습니다. 우측 사이드바의 Local styles에서 정의된 스타일을 확인할 수 있습니다.
어떻게 활용하면 좋을지 참고하실 수 있도록, 미리 예제 슬라이드들도 만들어 뒀습니다. 'Example slides' 페이지를 참고하여 쉽고 빠르게 발표용 파일을 완성할 수 있습니다! 예제 슬라이드의 콘텐츠는 cloudforet.io의 콘텐츠입니다.
커뮤니티 공개(Publish) 준비
디자인을 끝내고나면, 이제 피그마 커뮤니티에 공개할 준비를 합니다. 열심히 만든 디자인 파일을 잘 포장하는 단계입니다.
- 커뮤니티에서 노출될 썸네일 제작
- 문서 작성을 위한 컴포넌트 생성
- Read me 작성(사용자 가이드)
- Change Log 작성 (히스토리 관리)
파일의 유지보수 용이성을 위해 문서 작성용 컴포넌트도 별도로 생성했습니다. 스타일로 정의하여 사용할 수도 있었지만, 슬라이드 디자인을 위해 정의해둔 스타일과 혼동될 수 있어 문서용 스타일은 문서용 컴포넌트가 갖고 있도록 했습니다.
피그마 오른쪽 상단의 share 버튼을 누르고, Publish to Community 탭을 선택한 다음 Publish를 누르면 아래와 같은 창이 뜹니다. 포장의 마지막 단계 입니다.
이 단계에서는 파일 이름, 설명, 태그, 프리뷰방식(파일/프로토타입), 연락처, 창작자, 댓글작성 가능 여부 등을 설정할 수 있습니다. 한 번 공개한 파일은 지속적으로 Update도 가능하며, 더 이상 공개를 원치 않는 경우 해당 파일을 unpublish도 할 수 있습니다.
완성한 템플릿은 아래 링크를 통해 확인하실 수 있습니다.
Always grateful to my esteemed team members, Cloud Platform Lab. Megazone Cloud.
