🔥 업무 협업을 도와주는 피그마 플러그인 4

지난 뉴스레터를 아직 보지 못하셨다면, 아래 링크를 통해 확인해주세요!

👀 오늘 소개할 서비스 4

1. 변경사항을 손쉽게 입력하고 확인할 수 있는, Changelog

오늘 처음으로 소개할 피그마 - 협업 관련 기능은 ‘Changelog(체인지 로그)’예요. Changelog는 변경사항에 대한 기록을 의미하는데요. 피그마를 통해 만든 화면은 리뷰 등을 거치며 변경될 수밖에 없는데, 이런 내용을 모두가 쉽고 빠르게 확인하는데 도움을 받을 수 있어요. 프레임 링크를 삽입, 추가 설명 작성, 변경사항이 새로 추가된 것인지, 변경된 것인지 등을 라벨 형태로 적용할 수 있어요. 

주요 기능 소개

위젯을 설치한 뒤 처음 실행한 모습이에요. 변경 사항을 입력할 수 있는 공간과 날짜는 기본으로 포함되어 있고, 오른쪽에 ‘Added’라는 라벨이 적용된 것을 볼 수 있어요. 상태 표기는 추가, 삭제, 변경, 진행 중 등 네 가지로 구분되어 있어 상황에 맞는 내용을 선택할 수 있죠.

기본 내용 외, 추가 설명을 입력하거나 변경 사항에 해당하는 프레임 링크를 추가할 수 있어요. 또 다크 모드로 변경하는 것도 가능하며 상태 표기의 경우 컬러값을 직접 변경할 수 있어요. 하나의 화면에도 여러 변경사항이 생길 수 있는데 프레임 옆으로 체인지 로그 위젯을 활용해 하나씩 작성해 두면 가장 최신 내용이 무엇이며, 어떤 과정을 거쳐 현재의 모습으로 적용되었는지 빠르게 파악할 수 있어요.

 좋은 점

아쉬운 점

적용 가능한 업무 단계 및 활용 방법

학습 난이도 ⭐

가격 정책

Changelog 바로가기

2. 페이지 단위의 현재 작업 상태를 쉽게 관리하는, Statusup

‘Statusup’은 최근 출시된 플러그인 중 하나로, 화면 단위의 작업 상태를 쉽게 등록하고 관리할 수 있도록 도와주는데요. 보통 피그마에서 화면 단위 작업을 할 때, 화면에 해당하는 타이틀을 입력하게 되는데 ‘Statusup’ 플러그인을 활용하면 타이틀 앞에 (완료, 백로그, 진행 중, 테스트 중, 리뷰 필요) 현재 상태가 어떤지 손쉽게 기록할 수 있어요. 화면만 보고는 작업 중인지, 완료된 것인지 등 바로 확인하지 못할 때가 있는데 이런 상황에서 특히 유용하게 활용할 수 있죠.

주요 기능 소개

플러그인을 설치한 뒤 선택하면, 별도의 실행과정 없이 상태 리스트를 확인할 수 있어요. 특정 화면을 선택한 뒤 상황에 맞는 대상을 선택하면 타이틀에 바로 적용되는 것을 알 수 있는데요. 현재 제공되고 있는 상태는 총 16개로 이모지와 함께 텍스트로 구분할 수 있어요. 예를 들어 작업이 완료된 화면의 경우 {🟢 › Done}, 아직 진행 중인 경우 {🟡 › In Process} 와 같이 표현하는 방법이죠. 

선택한 상태는 타이틀을 유지하면서, 맨 앞에 적용되는데요. ‘첫 번째 화면’이라는 타이틀에 ‘완료’ 상태를 추가하면 ‘{🟢 › Done} 첫 번째 화면’과 같이 적용되는 것을 확인할 수 있어요. 디자인 작업을 하다 보면 이번 배포에 모두 포함된다 하더라도 리뷰 등에 따라 특정 화면은 수정을 하는 등 작업 상태가 다를 수 있는데요. 이럴 때 플러그인을 활용해 팀원들에게 현재 상태를 명확하게 보여주는데 도움이 될 수 있는 역할을 할 수 있다고 생각해요. 

좋은 점

아쉬운 점

적용 가능한 업무 단계 및 활용 방법

학습 난이도 ⭐

가격 정책

Statusup 바로가기

3. 노션 문서를 피그마에서 확인할 수 있는, FigNotion

세 번째로 소개하고 싶은 툴은 정책 문서는 노션으로, 디자인은 피그마로 일하는 팀에게 도움이 될만한 위젯인데요. 바로 노션 문서를 피그마에 불러올 수 있는 FigNotion입니다.

각각 문서 작성과 디자인에 최적화된 도구이지만 실제로 일을 하다 보면 생기는 문제가 하나 있는데요. 바로 정보가 파편화된다는 점이에요. 디자이너가 디자인 중에 정책서에 포함된 내용을 놓치거나 중간에 정책이 변경되는 경우에 동일한 내용을 담은 두 문서의 내용이 달라지며 정보가 파편화되게 됩니다. 개발자는 피그마와 노션 중 무엇이 맞는지 헷갈리게 되죠.

강남언니 팀에서도 비슷한 문제를 겪었는데요, 프론트 개발자 Evan이 이를 개선하기 위해 노션 문서를 피그마에서 확인할 수 있는 위젯을 개발했다고 해요!

주요 기능 소개

위젯을 실행하고 노션 문서와 연결하면 피그마 화면 옆에 임베드 됩니다. 위젯 상단에 reset 아이콘을 클릭해 문서와 동기화도 가능하고, 마지막으로 싱크된 시간도 알 수 있습니다.

자세한 사용 방법은 👉이곳에서확인할 수 있어요.

위젯 사용을 위해 노션 Intergration을 생성해야하는데, 노션에서 워크스페이스 소유자만 Integrations 탭에 액세스하고 통합을 생성할 수 있다고 하니 참고해주세요!

좋은 점

아쉬운 점

적용 가능한 업무 단계 및 활용 방법

학습 난이도 ⭐️⭐️

가격 정책

FigNotion 바로가기

4. 속성에 대한 주석을 간단하게 달 수 있는, Dimensions

이전 생산성 관련 플러그인 편에서, 핸드오프 툴로 소개했던 Outline을 기억하시나요? Outline은 요소들 사이의 간격을 자동으로 표기해 주는 플러그인이었어요. Outline의 아쉬운 점은 오토 레이아웃이 걸려있는 프레임에서만 동작한다는 점이었는데, 이번에는 오토 레이아웃이 아닌 요소들 사이의 간격을 지정할 수 있는, Dimensions이라는 플러그인을 소개해보려고 해요.

주요 기능 소개

기본적인 기능은 간단합니다. 플러그인을 실행하면 다음과 같은 창이 뜨고, 원하는 내용을 선택하면 자동으로 주석이 표시됩니다.

개체의 높이와 너비, 개체 사이 간격, R값 등을 선택할 수 있고, 컬러값(opacity 포함)과 텍스트 프로퍼티도 클릭 한번으로 표기할 수 있답니다.

실제 개발 과정에서는 모든 개체간 간격을 확인하기 어려운 부분이 있어, 주요 화면에 간격 값을 잘 표기해 주는 것 만으로 개발자와 협업 효율을 높일 수 있는데요. 그럴 때 활용해보세요!

좋은 점

아쉬운 점

적용 가능한 업무 단계 및 활용 방법

학습 난이도 ⭐

가격 정책

Dimensions 바로가기

🔔 디자인 업무 효율을 높이는, 파밍 클럽 1기 사전 신청 안내

파밍은 농사에서 농작물을 수확하거나 게임에서 캐릭터의 능력을 올리기 위해 아이템을 모으는 행위를 뜻하는데요. 업무 효율을 높이는 방법을 함께 찾고 분석하며 발견하는 즐거움이 있는 클럽이라는 의미를 담고 있어요. 일정 시간을 꾸준히 투자해 결실을 맺는 농사와 같이 우리의 일도 같은 방법으로 접근하면 어떨까?라는 의미도 담겨있어요. 

🎁 클럽을 통해 무엇을 얻을 수 있나요?

파밍 클럽 사전 신청하기

💬 이번 뉴스레터는 어땠나요?

링크를 통해 뉴스레터에 대한 의견을 남겨주세요. 꼭 소개 되었으면 하는 툴도 좋고, 다음에 꼭 다뤘으면 하는 주제도 좋아요! 

팁스터 뉴스레터에서는 프로덕트와 관련된 다양한 주제의 콘텐츠를 발행하고 있어요!

멤버십 콘텐츠 중 '캠핑'편은 무료로 체험하실 수 있어요!

팁스터 에디터와 함께 하는 클럽도 확인해보세요!