업무 효율을 높이는 피그마 플러그인 추천 (1)
피그마의 알파이자 오메가, 플러그인을 알아보자
요즘IT 디자인 카테고리에서 2023년 가장 인기 있었던 글 TOP5에 들었습니다.
재미있게 봐주셔서 감사합니다 :)
정작 2022년에 쓴 글이었는데...
2023.8.27
갑자기 이 글의 조회 수가 오르는 기현상(?)이 발생했다.
그래서 부랴부랴 내용을 보완하고 플러그인 사용 예시도 추가했다.
피그마가 그동안 많은 업데이트를 겪으면서 아래 플러그인들보다 더 유용하게 쓸 수 있는 플러그인들이 많이 등장했지만 아래에 있는 플러그인들은 여전히 유용하니 잘 비교해보고 취사 선택하시길 바란다.
커버이미지 고르는 것도 고민이네...TMI : 커버이미지는 Unsplash에서 찾아서 쓰고 있다. 전문 포토그래퍼들의 사진 포트폴리오에 가까운 곳이다보니 아무래도 figma 키워드로는 피그마 글을 쓰기 적합한 이미지가 별로 없다...커버 찾는 것도 일이네...
현존(?) 최고의
디자인 툴, 피그마
2022년 현재 가장 강력한 UI/UX 디자인 툴은 피그마라는 걸 아무도 부정할 수 없을 것이다. 물론 포토샵이 그랬듯, 일러스트레이터가 그랬듯 언젠간 피그마도 다른 무언가에게 지금의 옥좌를 넘겨주게 되겠지만, 그게 최소한 앞으로 10년은 더 있어야 할 것이다. 처음에야 스케치에 비해 다소 부족했지만, 갈수록 파워업되는 기능들과 기획-개발-마케팅까지 아우를 수 있는 협업 체계 구축 및 콘텐츠 관리에서도 기존 다른 툴에 비해 모자람이 없는 상황이다.
피그마의 파워업은 세계 제일!피그마가 가장 널리 쓰이는 툴이 된 건 여러 이유들이 있겠지만, 운영체제에 상관없이 심지어 브라우저 환경만 지원하면 태블릿에서도 사용할 수 있다는 범용성을 꼽을 수 있다. 또한 다양한 직무들이 제품을 놓고 협업하기 좋은 환경을 구축하게 해준다는 점 또한 강력한 부분이 아닐까 싶다.
이외에도 다른 다양한 장점들이 있겠지만, 아무래도 가장 큰 이유는 플러그인이 아닐까 싶다. 플러그인이란, 쉽게 말해 프로그램이 지원하지 않는 기능을 실행하게 해주는 일종의 확장 프로그램이라고 보면 된다. 스케치에서도 플러그인은 지원했지만, 스케치는 맥 환경에서만 실행할 수 있는 프로그램이라 플러그인도 맥에서만 만들 수 있다는 큰 단점이 있다. 또한 개발 언어도 조금 더 난이도가 있다.
그에 반해 피그마는 잘 알려진 웹 프레임워크인 리액트를 사용하면 누구든지 쉽게 만들 수 있고, 윈도우 환경에서도 만들 수 있다는 장점이 있다. 위에서 말한 범용성이 플러그인 제작을 쉽게 만드는 기반이 되었고, 이는 피그마 커뮤니티가 스스로 성장해 지금의 규모가 되게 한 일등공신이라고 봐도 무방할 것이다.
피그마 커뮤니티 탭을 열어보면 오만가지 기능과 템플릿이 다 있다. 구경만 해도 시간이 술술 간다.이 플러그인들을 잘 활용하면 반복적인 작업이나 전체에서의 일부 수정, 레이아웃의 변경에 따른 디자인 수정 등등 귀찮은데 안 중요하기하고, 그렇다고 안 하자니 팀간 소통에 더 오해만 만드는 그런 작업들을 정말 간단하게 처리할 수 있다. 또한 제품의 주요 정책들을 반영하거나 협업에도 엄청난 시간을 절약시켜주고 효율성을 극대화해준다. 쉽게 말해 플러그인만 잘 써도 내 일이 절반은 줄고, 피그마 어디가서 못 다룬다는 말은 안 듣는다는 것이다. 그래서, 내가 디지털 제품을 만들면서 나름 유용하게 사용하는 플러그인 몇가지를 소개하고자 한다.
1. Content Reel
마이크로소프트에서 만든 피그마 플러그인이다. 반복된 디자인에 더미 텍스트나 이미지를 넣고 싶을 때 사용할 수 있는 가볍고 빠른 플러그인 중 하나다.
반복적인 작업, 특히 이미지나 글이 패턴화되어 계속 나오는 형태의 작업을 처리할 때 압도적인 효율을 보여준다. 만약 같은 형태로 반복되어 나오는 카드나 리스트 컴포넌트의 썸네일을 동시에 랜덤하게 넣고 싶다면, 썸네일 프레임을 모두 선택한 후에 플러그인에서 원하는 이미지 그룹을 선택만 하면 된다. 입숨 로렘으로 대표되는 더미 텍스트도 가능하며, 로그인해서 사용하면 나만의 그룹을 만들어 빠르게 목업을 제작하는 데에도 큰 도움을 준다.
로그인하면 나만의 그룹을 생성해 작업을 더 효율적으로 할 수도 있다.나만의 그룹을 생성할 때 다른 사람들도 사용할 수 있도록 Public을 선택할 수도 있고, 나만 사용하도록 Private을 선택할 수도 있다.
단점이라면 그룹 하나 당 20개의 아이템밖에 만들 수 없다는 점, 아이템을 순서대로 넣기 조금 어렵다는 점, 플러그인 자체가 가끔 꼬여서 한번씩 껐다가 켜줘야 된다는 점 정도가 있다.
2. Material Design Icons
지금 설계 중인 제품은 별도의 아이콘 셋을 쓰고 있지만, 빠르게 와이어프레임을 그려야 할 때나 간단한 프로젝트를 할 때도 그렇게 하기엔 시간이 모자란다. 구글이 잘 만들어둔 머티리얼 디자인 아이콘들을 빠르게 적용할 수 있는 플러그인이다. 구글이 직접 만든 플러그인은 아니지만, 아이콘의 스타일, 크기, 색상까지 한번에 제어해서 사용할 수 있어서 나름 유용하게 썼던 플러그인이다.
아이콘을 미리 볼 수 있고, 누르면 바로 프레임에 삽입된다.
만약 이 플러그인 외에 구글에서 공식적으로 배포한 플러그인이 필요하다면 Material Symbols를 사용해봐도 좋다.
3. Font Changer
폰트 관련 플러그인들은 정말 많은데, 여러개 쓰다가 그냥 하나만 써야지...하고 썼던 플러그인이다. 서체 정보를 변경해주는 플러그인인데, 원하는 텍스트들이 있는 프레임을 다 선택한 다음 플러그인을 실행하면 된다. 선택한 프레임 안에 들어있는 서체 정보와 텍스트 레이어 갯수를 보여주고, 오른쪽 메뉴에서 변경하고자 하는 서체를 고르면 된다.
텍스트 레이어가 포함된 프레임을 선택하면 사용된 폰트를 모두 보여준다.일일히 텍스트 레이어를 선택해서 바꾸는 수고로움을 확 줄여주고, 일괄적으로 변경까지 할 수 있다는 편리한 플러그인이지만, 스타일은 인식되지 않는다는 점과 프레임 안에 묶여 있는 텍스트 레이어가 간혹 변경이 되지 않는 경우가 있다. 숨김된 레이어거나 잠긴 레이어인 경우들인데, 이럴 땐 강제로 찾아서 수정하는 수밖에 없다는 단점이...
라이브러리로 타이포 스케일을 다 잡아놓고 쓰는 지금은 사용 횟수가 많이 줄어든 플러그인. 플러그인 마지막 업데이트도 3년 전이라 사실상 배포가 중단된 플러그인이지만, 급할 때 요긴하다.
4. Font Scanner
이것도 font 키워드로 검색하다 찾은 플러그인인데, 현재 페이지 안의 폰트 정보를 서체 기준으로, 또는 사이즈 기준으로 보여주고 일괄 선택할 수 있게 해준다. 장점과 단점 역시 3번과 유사하다. 취사선택하자.
디자인이 비교적 올드하지만, 다 볼 수 있게 해주는 것만으로도 감지덕지5. Filter / Effects
완전무결하다고 보이는 피그마에서 가장 아쉬운 건 보정 및 이미지 필터일 것이다. 물론 기본적인 이미지 조정과 블렌딩 옵션이 있지만, 포토샵만큼의 강력한 성능이 없다는 그 단점을 나름 상쇄해주는 플러그인이다. 원하는 레이어를 선택하면, 그 레이어에 포토샵에서 보이는 다양한 이미지 필터와 레이어 블렌딩 옵션 비스무리한 걸 적용할 수 있다.
자주 사용하는 효과는 프리셋으로 저장할 수 있다.적용한 효과는 원본 프레임에 그대로 반영되는 것이 아니라 새 이미지로 저장하는 방식이다. 즉 프레임에 적용하고 싶어도 적용된 결과물은 이미지 파일로 쓸 수 있다는 애매한 단점이 있다.
6. Autoflow
피그마에서 다수의 화면을 보고 협업할 때 가장 불편한 건, IA나 플로우차트를 번갈아가면서 봐야한다는 점이다. 아무리 화면 네이밍 규칙을 잘 세워도 직관적으로 사용자의 흐름과 디자인을 동시에 보는 건 어렵다. 물론 피그잼을 사용해 플로우차트를 만들 수도 있지만, 피그마에서 바로 디자인과 플로우를 동시에 보고 싶다는 부분은 여전히 해소되지 않는다. 즉, 실제 목업 디자인을 와이어프레임으로 보고 싶다는 니즈가 있다. Autoflow는 그 불편함을 나름 충족시켜주는 플러그인이다.
플러그인을 실행한 후, 각각의 프레임을 연결할 화살표를 커스텀한 후에 서로 다른 프레임을 선택하면 프레임과 프레임을 자동으로 화살표 오브젝트로 이어준다.
화살표에는 이렇게 라벨도 붙일 수 있다.단점이라면, 프레임 선택 순서가 화살표 이동 순서라는 점떄문에 간혹 화살표 방향이 반대로 될 때가 있고, 생각없이 프레임을 눌렀다가 화살표가 생기는 경우가 있을 수 있다. 또한 프리셋들을 미리 만들어서 쓸 수가 없다.
불행 중 다행인지, 피그마에서 Select All with Same Stroke 를 하면 화살표들을 모두 선택할 수 있다. 물론 똑같은 속성값을 가진 디자인 컴포넌트가 있다면 그것도 같이 선택되어버릴 수 있으니, 프레임을 연결할 화살표 디자인은 정말 안 쓸 것같은 색상과 두께로 미리 설정해두고 사용하는 것이 좋다. 무료 사용자라면 한 파일 당 50개 플로우까지 쓸 수 있다. 만약 프리셋 기능이 탐난다면 Draw connector 라는 플러그인을 추천한다.(물론 얘도 유료)
7. Google Sheet Sync
앞서 소개한 Content Reel의 심화버전이라고 볼 수 있다. 구글 드라이브에 작성한 구글 시트의 정보를 디자인에 그대로 반영할 수 있는 플러그인이다. 이미지든 텍스트든 뭐든 다 반영할 수 있다. 게다가 데이터가 바뀌면 바뀌는대로 반영되고, 또한 데이터 컬럼을 더 만들어서 빠르게 반복적인 패턴을 만들어낼 수 있다. 또한 정책적인 부분이나 서비스 핵심 데이터까지 연결하고 시트 관리만 잘 하면, 디자이너가 일일히 버전 업마다 따라다니면서 수정할 필요도 없다.
Sync를 누르면 자동으로 시트 데이터가 반영된다.만약 데이터가 자주 바뀌거나 양이 많다면, 디자이너가 매번 일일히 반영하는 건 비효율적이다. 미리 데이터와 피그마를 연결해서 맞춰놓고, 업데이트될 때마다 피그마에서 Sync만 누르면 시트의 데이터가 자동으로 채워진다. 데이터 뿐만 아니라 피그마에서 사용하는 더미 텍스트나 이미지들도 시트로 만들어서 반영하면, 매번 새로운 더미 디자인을 만들 필요 없이 채워넣을 수 있어서 편리하다.
생각해보면, 글자 하나 고치자고 다른 일 집중하다가 피그마 열고, 이미지 하나 갈아끼우자고 다른 일 집중하다가 또 방해받고...이 얼마나 귀찮고 불편한데 안 할 수 없는 일들인가! 이런 시간들을 최대한 줄이면서, 동동시에 어떻게 해야 이 불편함을 줄이고 효율적으로 일할까를 계속 고민해야 한다. 그래야 내 생산성이 극대화되는 건 너무 당연한 일이다. 최소한 이런 수정 사항들은 구글 시트로 데이터를 관리해서, 나는 디자인 역량에 내 리소스를 총 집중하는 환경을 만들어보자.
플러그인의 세계는
무궁무진하다
위에서 소개한 플러그인 외에도 핸드오프 문서를 빠르게 만들어주는 Simpli Handoff, 프로토파이로 디자인을 옮겨주는 Protopie, 레이어 이름을 검색해주는 Find / Focus, 사각형을 내가 원하는 그리드로 쪼개주는 Split Shape, 글자를 포토샵에서 처럼 변형시켜주는 Skewdat, 스토리북과 연동시켜주는 Storybook Connect, 라이브러리에 토큰값을 만들어주는 Figma Tokens 등 잘 사용했고 지금도 사용하는 플러그인을 가져오면 밑도 끝도 없다. 다만 정말 잘 썼다! 생각하는 플러그인 몇개만 먼저 소개해봤다. 피그마 플러그인은 이말고도 정말 무궁무진하게 많고, 내가 소개한 것보다 더 빠르게, 효율적으로 제품을 설계할 수 있는 플러그인들이 많으니 오늘부터 당장 피그마 커뮤니티에 방문해 플러그인을 탐색해보길 바란다.
그리고 더 좋은 게 있으면...댓글로도 좀...공유...해주시면 감사합니다(?)
