실무에서 바로 쓰는 피그마 10 - 플러그인과 위젯 : Figma 기능 확장하기

지금까지 Figma의 핵심 기능을 통해 디자인 작업의 기본부터 고급까지 살펴보았습니다. 이제 Figma의 진정한 잠재력을 최대한 활용할 수 있는, 무한한 확장성을 제공하는 요소 플러그인(Plugins)과 위젯(Widgets)에 대해 알아볼 차례입니다. Figma 커뮤니티에서 제공하는 수많은 플러그인과 위젯은 반복적인 작업을 자동화하고, 새로운 기능을 추가하며, 협업 환경을 더욱 풍부하게 만들어줍니다. 이 글에서는 플러그인과 위젯의 종류, 설치 및 사용 방법, 그리고 실무에서 생산성을 극대화할 수 있는 유용한 추천 도구들을 상세히 다루겠습니다.

 

10.1 플러그인(Plugins)이란 무엇인가? 기능 확장 도구

플러그인은 Figma의 기능을 확장하고, 특정 작업을 자동화하거나, 새로운 기능을 추가하여 디자이너의 워크플로우를 개선하는 데 사용되는 소프트웨어 확장 프로그램입니다. Figma 커뮤니티의 개발자들이 만들고 공유하며, Figma 내에서 직접 설치하고 실행할 수 있습니다.

 

10.1.1 플러그인의 필요성 및 장점

Figma는 자체적으로도 강력한 도구이지만, 모든 디자이너의 모든 니즈를 충족시킬 수는 없습니다. 플러그인은 이러한 Gap을 메우고, 다음과 같은 이점을 제공합니다.

• 반복 작업 자동화 : 수동으로 많은 시간이 소요되는 반복적인 작업을 플러그인을 통해 자동으로 처리하여 시간을 절약합니다.(예 : 이미지 일괄 리사이즈, 레이어 이름 일괄 변경)
• 새로운 기능 추가 : Figma에 기본적으로 없는 기능을 추가하여 디자인 가능성의 폭을 넓힙니다. (예 : 3D 목업 생성, 데이터 기반 디자인)
• 워크플로우 최적화 : 디자인 프로세스의 특정 단계를 효율화하거나, 다른 도구와의 연동을 강화합니다.
• 디자인 일관성 유지 : 특정 디자인 시스템 가이드라인을 강제하거나, 에러를 검사하는 플러그인을 통해 일관성을 유지하는데 도움을 줍니다.
• 다양한 리소스 활용 : 무료 스톡 이미지, 아이콘, 더미 텍스트 등을 Figma 내에서 바로 가져올 수 있습니다.

10.1.2 플러그인 설치 및 관리

1. 플러그인 찾기 :

• 반복 작업 자동화 : 수동으로 많은 시간이 소요되는 반복적인 작업을 플러그인을 통해 자동으로 처리하여 시간을 절약합니다.(예 : 이미지 일괄 리사이즈, 레이어 이름 일괄 변경)
• 새로운 기능 추가 : Figma에 기본적으로 없는 기능을 추가하여 디자인 가능성의 폭을 넓힙니다. (예 : 3D 목업 생성, 데이터 기반 디자인)
• 워크플로우 최적화 : 디자인 프로세스의 특정 단계를 효율화하거나, 다른 도구와의 연동을 강화합니다.
• 디자인 일관성 유지 : 특정 디자인 시스템 가이드라인을 강제하거나, 에러를 검사하는 플러그인을 통해 일관성을 유지하는 데 도움을 줍니다.
• 다양한 리소스 활용 : 무료 스톡 이미지, 아이콘, 더미 텍스트 등을 Figma 내에서 바로 가져올 수 있습니다.

10.2 필수 & 유용한 플러그인 추천(실무 생산성 극대화)

수많은 플러그인 중에서 특히 실무에서 유용하게 사용될 만한 필수 플러그인들을 소개합니다.

 

10.2.1 이미지&콘텐츠 관련 플러그인

 

1. Unsplash : 

• 기능 : 고품질의 무료 스톡 이미지를 Figma 내에서 바로 검색하고 삽입할 수 있습니다. 카테고리별 검색, 이물/풍경 등 필터링이 가능합니다.
• 활용 : 목업 디자인에 실제 같은 이미지를 빠르게 채워 넣을 때, 다양한 분위기의 이미지를 시험해볼 때 필수적입니다.

2. Pexels : 

• 기능 : Unsplash와 유사하게 Pexels의 고품질 무료 스톡 이미지 및 비디오를 Figma로 가져옵니다.
• 활용 : Unsplash와 함께 사용하여 더 다양한 이미지 선택지를 확보합니다.

 

3. Content Reel:

• 기능 : 사용자 아바타, 이름, 날짜, 시간, 이메일, 전화번호, 국가 등 더미 데이터를 클릭 한 번으로 삽입할 수 있습니다. 텍스트, 이미지 모두 지원합니다.
• 활용 : 실제 데이터가 들어간 것처럼 보이는 디자인 목업을 빠르게 만들 때, 사용자 리스트나 댓글 목록 등을 디자인할때 유용합니다.

4. Lorem Ipsum : 

• 기능 : 표준 더미 텍스트(Lorem Ipsum)를 생성하여 텍스트 상자에 채워 넣습니다. 단락, 문장, 단어 단위로 길이조절이 가능합니다.
• 활용 : 본문 텍스트나 설명글 등 실제 내용이 아직 확정되지 않았을 때 레이아웃을 미리 구성하는 데 사용합니다.

 

10.2.2 레이아웃 & 정렬 관련 플러그인

1. Styler : 

• 기능 : 선택된 레이어들의 색상, 텍스트 스타일, 효과 등을 하나의 스타일로 빠르게 정의하고 적용할 수 있습니다. (Figma의 기본 스타일 기능을 보완)
• 활용 : 디자인 시스템을 구축할 때 스타일을 효율적으로 관리하고 생성하는 데 도움을 줍니다.

2. Rename It :

• 기능 : 여러 레이어의 이름을 일괄적으로 변경합니다. 순차 번호, 검색 및 바꾸기, 대소문자 변경 등 다양한 옵션을 제공합니다.
• 활용 : 레이어 패널을 정리하고 체계적인 명명 규칙을 적용할 때 필수적입니다.

 

3. Batch Styler :

• 기능 : 여러 텍스트 스타일의 폰트 패밀리, 폰트 크기, 줄 간격 등을 한 번에 변경할 수 있습니다.
• 활용 : 디자인 시스템의 폰트 변경이나, 글로벌 폰트 업데이트 시 매우 유용합니다.

 

4. Content Buddy :

• 기능 : 디자인 내에서 일관성 없는 텍스트, 색상, 폰트 스타일 등을 찾아주고 수정할 수 있게 돕습니다.
• 활용 : 디자인 일관성을 유지하고 불필요한 스타일 중복을 제거하는 데 유용합니다.

 

5. Clean Document : 

• 기능 : 사용되지 않는 스타일, 숨겨진 레이어, 빈 그룹 등을 정리하여 Figma 파일을 깔끔하게 유지합니다.
• 활용 : 파일 용량을 줄이고 성능을 향상시키며, 협업 시 다른 팀원이 파일을 이해하기 쉽게 만듭니다.

 

10.2.3 아이콘&그래픽 관련 플러그인

 

1. Iconify : 

• 기능 : 수많은 아이콘 세트(Material Design Icons, Font Awesome, Simple Icons 등)를 Figma 내에서 검색하고 SVG 형태로 삽입할 수 있습니다.
• 활용 : 필요한 아이콘을 빠르고 효율적으로 찾고 사용하며, 디자인 시스템의 아이콘 라이브러리를 구축할 때 유용합니다.

 

2. Remove BG : 

• 기능 : 이미지의 배경을 자동으로 제거해줍니다. (remove.bg API 키 필요)
• 활용 : 특정 오브젝트만 추출하여 사용해야 할 때, 배경 제거 작업을 외부 툴 없이 Figma 내에서 처리할 수 있어 편리합니다.

 

10.2.4 접근성&검사 관련 플러그인

 

1.Contrast : 

• 기능 : 선택된 텍스트와 배경 색상 간의 대비율을 WCAG(Web Content Accessibility Guidelines) 기준으로 검사하여 가독성 여부를 알려줍니다.
• 활용 : 웹 접근성을 준수하는 디자인을 만들 때 필수적입니다.

 

2. A11y - Color Contrast Checker : 

• 기능 : Contrast 플러그인과 유사하게 색상 대비를 검사하고, 시뮬레이션을 통해 다양한 색각 이상자들이 어떻게 디자인을 인식하는지 보여줍니다.
• 활용 : 모든 사용자를 포용하는 디자인을 만드는 데 도움을 줍니다.

 

10.3 위젯(Widgets)이란 무엇인가? 협업 및 워크플로우 도구

위젯은 Figma 캔버스 위에 배치되어 팀원들이 힘께 상호작용할 수 있는 작은 애플리케이션입니다. 플러그인이 개인의 워크플로우를 개선하는데 중점을 둔다면, 위젯은 팀의 협업과 아이데이션 프로세스를 강화하는데 중점을 둡니다.

 

10.3.1 위젯의 필요성 및 장점

• 실시간 협업 강화 : 캔버스 위에서 바로 브레인스토밍, 투표, 피드백 정리 등 협업 활동을 할 수 있습니다.
• 아이데이션 및 의사결정 : 포스트잇, 타이머, 스티커 등 다양한 도구를 통해 아이디어를 시각화하고, 팀 내 의사결정을 지원합니다.
• 워크플로우 통합 : 외부 도구를 오갈 필요 없이 Figma 내에서 다양한 협업 활동을 통합할 수 있습니다.
• 새로운 협업 방식 제공 : 전통적인 디자인 작업 외에, 디자인 스프린트, 사용자 여정 지도, 팀 빌딩 활동 등 다양한 도로 활용됩니다.

10.3.2 위젯 설치 및 관리

 

1. 위젯 찾기 : 

• Figma 앱 내에서 좌측 패널의 Widgets탭을 클릭하거나, 상단 메뉴바의 Widgets > Find more widgets를 선택합니다.
• Figma Community 웹사이트 : Figma Community 에서 Widgets 섹션을 탐색합니다.

2. 위젯 설치 :

• 위젯 상세 페이지에서 Install 버튼을 클릭합니다.

3. 위젯 실행 및 추가 :

• 캔버스에서 마우스 우클릭 : 캔버스에서 마우스 우클릭 > Widgets > 설치된 위젯 목록에서 원하는 위젯 선택
• 좌측 패널 : widgets탭에서 원하는 위젯을 찾아 캔버스나 프레임 안으로 드래그 앤 드롭합니다.

4. 위젯 관리 : Widgets 탭 또는 Widgets메뉴에서 Manage widgets 를 클릭하여 설치된 위젯 목록을 확인하고 관리할 수 있습니다.

 

10.4 필수 & 유용한 위젯 추천(협업 및 아이데이션 강화)

 

협업 및 아이데이션 프로세스에 유용한 위젯들을 소개합니다.

 

10.4.1 브레인스토밍 & 아이데이션 위젯

 

1. FigJam Sticky Notes : 

• 기능 : FigJam의 핵심 기능인 스티커 노트를 Figma 파일 내에서 사용할 수 있게 해줍니다. 다양한 색상의 스티커 노트를 만들어 아이디어를 포스팅하고 정리할 수 있습니다.
• 활용 : 디자인 스프린트, 아이데이션 세션, 피드백 정리 등 팀원들과 함께 아이디어를 모으고 시각화할 때 필수적입니다.

2. Polls (투표) : 

• 기능 : 캔버스 위에 간단한 투표를 만들고, 팀원들이 참여하여 투표 결과를 실시간으로 확인할 수 있습니다.
• 활용 : 여러 디자인 시안 중 하나를 선택하거나, 팀 내 의견을 신속하게 수렴할 때 사용합니다.

3. Timer : 

• 기능 : 제한 시간을 설정하고 카운트다운을 시작할 수 있는 타이머 위젯입니다.
• 활용 : 디자인 스프린트나 특정 작업에 시간을 제한하여 집중도를 높일 때 유용합니다.

10.4.2 협업&피드백 위젯 

 

1. Team Flow : 

• 기능 : 팀원들의 작업 흐름을 시각적으로 보여주고, 누가 어떤 파일을 작업하고 있는지 확인할 수 있습니다.
• 활용 : 팀의 전반적인 작업 상태를 파악하고, 병목 현상을 식별하는 데 도움을 줍니다.

2. Table : 

• 기능 : 캔버스 위에 표를 만들고 데이터를 입력할 수 있습니다.
• 활용 : 사용자 시나리오, 기능 목록, 에셋 관리 테이블 등 구조화된 데이터를 캔버스에 직접 기록할 때 사용합니다.

10.4.3 생산성 & 기타 위젯

1. Notion Widget : 

• 기능 : Notion 페이지를 Figma캔버스에 직접 임베드하여 표시할 수 있습니다. 
• 활용 : 디자인 가이드라인, 프로젝트 계획, 회의록 등 Notion에 정리된 정보를 Figma에서 바로 참조할 때 유용합니다.

2. Jira Widget : 

• 기능 : Jira이슈를 Figma 캔버스에 연결하고, 이슈의 상태를 동기화하여 표시합니다.
• 활용 : 디자인 요소와 개발 이슈를 직접 연결하여 개발자와의 핸드오프 및 트래킹을 효율화합니다.

10.5 마치며 : Figma 생태계의 무한한 가능성

 

이번 글에서는 Figma의 플러그인과 위젯이라는 두 가지 강력한 확장 도구에 대해 깊이 있게 다루었습니다. 플러그인을 통해 개인의 디자인 워크플로우를 자동화하고 기능을 확장하는 방법, 그리고 위젯을 통해 팀의 협업과 아이데이션  프로세스를 강화하는 방법을 알아보았습니다.

 

Figma 커뮤니티는 끊임없이 성정하며 새로운 플로그인과 위젯을 제공하고 있습니다. 여러분의 디자인 작업에 어떤 불편함이 있다면, 이미 누군가가 그것을 해결하기 위한 플러그인이나 위젯을 만들어 놓았을 가능성이 큽니다. 적극적으로 뮤니티를 탐색하고, 자신에게 맞는 도구들을 찾아 워크플로우를 최적화하는 것이 Figma 마스터로 가는 중요한 단계입니다.

 

이제 Figma의 핵심 기능들을 거의 다 마스터했습니다! 다음 글에서는 Figma와 외부 도구 연동 : 개발자 핸드오프 및 통합 워크플로우라는 주제로, Figma를 다른 디자인 및 개발 도구(예 : Zeplin, Storybook, Jira)와 어떻게 연동하여 더욱 통합된 워크플로우를 구축할 수 있는지 알아보겠습니다. Figma의 무한한 확장성과 연동 능력을 통해 여러분의 디자인 프로세스를 한 단계 더 업그레이드할 준비가 되셨나요? 계속해서 Figma 마스터의 여정을 함께 하시죠!