🔥 업무 생산성이 높아지는 피그마 플러그인 5

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

👀 오늘 소개할 피그마 플러그인 5

1. Annotation Sticky Notes

오늘 소개할 첫 번째 플러그인은, 원하는 위치에 빠르고 간편하게 메모를 남길 수 있도록 도와줘요. 텍스트 입력을 위한 공간을 따로 만들지 않아도 되고, 코멘트와 같은 연속성이 있는 내용까지 필요하지 않은 경우 특히 유용하게 활용할 수 있어요. 

컬러를 바꿔보고, 내용을 입력한 뒤 사이즈 변경도 해봤어요. 작성자와 날짜는 선택이 가능해 둘 다 빼거나, 모두 넣거나 하나만 넣는 것도 해봤죠. 화살표의 방향은 총 8개를 지원하기에 이미지, 화면, 도형 등 어떤 대상을 위해 남긴 노트인지 조금더 빠르게 알 수 있어요.

아쉬운 점이 없는 건 아니에요. 노트 자체의 사이즈를 조절할 수 없고, 매 번 컬러가 랜덤하게 적용되기에 컬러에 따른 구분(노란색은 수정 의견, 파란색은 완료된 내용 등)을 맞추기가 번거로워요.

Annotation Sticky Notes 자세히 보기

2. Lorem Ipsum

두 번째로 소개할 플러그인은 더미 텍스트와 이미지를 쉽게 채울 수 있도록 도와주는 ‘로렘 입숨’이에요.

화면을 설계 할 때, 텍스트를 넣어야 하는 경우가 꽤 많아요. 영역만 잡아두면 길이나 구성에 따라 어떤 모습이 되는지잘 알지만, 채워넣을 내용이 마땅치 않을 때는 귀찮게 느껴지는데요. 이런 상황에서 로렘 입숨 플러그인을 활용하면 더미 텍스트는 물론 이미지도 빠르게 입력할 수 있어요.

이미지를 먼저 넣어볼까요? 이미지를 채울 곳을 지정한 뒤 플러그인을 실행하면 동물, 자연, 우주, 식물 등의 키워드를 볼 수 있고, 특정 키워드를 선택하면 이미지 리스트를 확인할 수 있어요. 원하는 이미지를 선택하면 영역에 맞게 이미지가 바로 적용되죠. 키워드는 직접 입력, 검색을 통해 이미지를 찾을 수도 있어요.

텍스트는 두 가지 방법으로 채울 수 있는데 하나는 문장 수를 기준으로 넣는 방법 또 하나는 선택한 영역에 알맞게 내용을 생성해 채우는 방법이에요. 개인적으로는 프레임에 맞게 알아서 채워주는 기능이 좋았는데, 작업중인 화면 속 영역에 텍스트가 꽉 찼을 때의 모습을 빠르게 볼 수 있기 때문이에요. 

Lorem Ipsum 자세히 보기

3. Outline

세번째 플러그인은, 자동으로 요소들 사이의 간격을 표시해주는 플러그인 입니다.

플러그인 없이도 자체적으로 간격을 확인할 수 있지만, 디자인QA를 하거나 복잡한 화면의 경우 간격을 표시해 전달하는게 효율을 높여주기도 하는데요. 바로 그럴 때 간편하게 사용하기 좋은 플러그인이랍니다.

평소에 해당 플러그인을 유용하게 쓰고 있는데, 한 가지 아쉬운 점은 오토 레이아웃이 걸려있는 프레임에서만 동작한다는 점이에요. 평소 오토 레이아웃으로 작업하는게 익숙하신 분이라면 문제 없지만, 그렇지 않은 경우에 대신 사용할만한 플러그인이 있다면 저에게도 알려주세요!

Outline 자세히 보기

4. Design Lint

네번째는, 프레임 내에서 누락된 스타일을 찾아주는 플러그인입니다.

작업을 하다보면 나도 모르게 컴포넌트가 해제되거나 틀어지는 경우가 있는데, Design Lint로 빠르게 스타일을 점검하고 수정할 수 있답니다.

플러그인을 실행하면 어떤 항목에 오류가 있는지 구체적으로 알려주는 모습을 확인할 수 있어요. ‘Select All’을 클릭하면 프레임에서 해당 부분이 포커싱되고, ‘Apply’를 누르면 스타일이 한 번에 자동으로 반영된 것을 확인할 수 있습니다.

플러그인을 사용해보면서 수정이 필요한 부분을 한번에 확인하고 수정할 수 있다는 점이 매우 감동적이었어요. 다만 텍스트의 경우 폰트 굵기와 행간이 동일하지 않으면 동일한 스타일로 간주하지 않고 있었는데, 그래도 이런 경우엔 패널에서 직접 수정하면 되어서 그리 어렵지는 않았답니다.

Design Lint 자세히 보기

5. Data Merge

마지막은 CSV를 붙여넣으면 자동으로 실제 데이터를 채워 넣어주는 플러그인입니다.

InDesign의 Data Merge를 알고 계신다면 반가울 플러그인이죠! 하나하나 데이터를 붙여넣지 않고, 템플릿 하나에 일괄 반영할 수 있도록 해줍니다. 명함이나 인증서같이 동일한 템플릿에 실제 데이터를 여러개 넣어야하는 작업을 할 때 효율을 어마어마하게 올릴 수 있어요.

템플릿을 제작한 뒤, 플러그인을 실행하고 위와 같은 데이터를 복사해 붙어넣기만 하면 (1행 데이터가 레이어명과 동일해야 해요!)

이렇게 순식간에 실제 데이터가 반영된 결과를 확인할 수 있습니다! 어떤가요?

Data Merge 자세히 보기

디자인 업무 효율을 높여주는 툴을 만들고 있으신가요? 

📮 광고 및 제휴 문의: https://tally.so/r/wa5WKE

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

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

📮 다음 주제 및 발행일 안내

업무 효율을 높이는 디자인 툴 소개 뉴스레터 세 번째 주제는 '생성형 AI'입니다. 첫 번째 뉴스레터를 통해 많은 분들이 요청해 주셨던 주제이기도 하고, 에디터들 역시 관심을 갖고 지켜보는 주제라 선정하게 되었어요. 생성형 AI 중에서도, 이미지에 초점을 맞춘 서비스를 살펴볼 예정입니다. 이번에는 에디터들이 소개하는 내용 외, 디자이너분들이 실무에서 실제 유용하게 사용하는 툴 역시 포함될 예정이에요. 다음 뉴스레터는 3주 뒤인 2024년 1월 2일 화요일에 발행될 예정입니다.

팁스터 뉴스레터의 공식 오픈채팅방에 참여해보세요!

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

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