figma

워크플로우 속도를 높여주는 (새 탭에서 열림)

플러그인은 Figma에서 반복 작업을 자동화하고 디자인 데이터를 효율적으로 다루도록 돕는다. 이 글은 플러그인 생태계 출시 직후 주목할 만한 유틸리티 플러그인 5개를 소개하며, 화면 크기 조정부터 컴포넌트 복제·텍스트 편집·유사 레이어 선택까지 다양한 작업을 간소화하는 방법을 설명한다. 또한 단축키를 활용하면 플러그인을 더 빠르게 실행할 수 있다고 강조한다.

Viewports: 기기 화면 크기 빠르게 확인

  • 프레임을 스마트폰 등 일반적인 기기 화면 크기로 변경할 수 있다.
  • 디자인 요소에 먼저 Figma의 Constraints를 설정해야 화면 크기 변경에 따른 레이아웃 변화를 제대로 확인할 수 있다.
  • 각 뷰포트별로 해당 기기를 사용하는 사용자의 예상 글로벌 시장 점유율을 보여준다.
  • 이를 통해 어떤 화면 크기를 우선 고려할지 판단할 수 있다.
  • 플러그인은 별도의 수동 업데이트 없이 새 기능이 배포되면 사용할 수 있다.

Component Cloner: 컴포넌트와 인스턴스 복제

  • 선택한 마스터 컴포넌트만 복제하거나, 해당 컴포넌트의 인스턴스까지 함께 복제한다.
  • 색상 오버라이드가 적용된 아이콘을 별도로 실험하거나 아이콘 스프라이트를 제작할 때 유용하다.
  • 컴포넌트와 연결된 여러 인스턴스를 일일이 다시 만들 필요가 없어 반복 작업을 줄여준다.

Nisa Text Splitter: 텍스트를 개별 객체로 분리

  • 한 텍스트 박스에 입력된 여러 줄을 줄바꿈 기준으로 각각의 텍스트 박스로 분리한다.
  • 분리된 텍스트 객체를 알파벳순 또는 역순으로 정렬할 수 있다.
  • Figma의 Smart Selections와 함께 사용하면 여러 객체의 순서를 편리하게 재배치할 수 있다.
  • 반대로 여러 텍스트 박스를 하나의 텍스트 객체로 합치는 기능도 제공한다.
  • 목록, 메뉴 항목, 데이터 샘플처럼 줄 단위 편집이 필요한 작업에 적합하다.

Find and Replace: 텍스트와 레이어 이름 일괄 변경

  • 문서 전체에서 텍스트를 검색하고 다른 문자열로 치환한다.
  • 캔버스 위의 텍스트뿐 아니라 레이어 이름도 검색·변경할 수 있다.
  • 대소문자 구분 여부를 설정할 수 있다.
  • 검색 범위를 문자열의 어느 위치에 적용할지 선택할 수 있다.
    • 문자열 어디에서나 일치
    • 문자열의 시작 부분
    • 문자열의 끝 부분
    • 전체 문자열이 정확히 일치
  • 대규모 문서의 문구 수정이나 카피 변경 시 특히 유용하다.

Similayer: 조건이 같은 레이어 일괄 선택

  • 기준이 될 요소를 선택한 뒤, 원하는 속성을 지정해 동일한 조건의 레이어를 찾아 선택한다.
  • Figma의 “같은 속성을 가진 항목 모두 선택” 기능을 확장한 방식이다.
  • 다음과 같은 속성을 조합할 수 있다.
    • 테두리 반경
    • 채우기
    • 그림자
  • 여러 속성을 동시에 조건으로 지정할 수 있어, 복잡한 디자인 요소도 빠르게 선별할 수 있다.
  • 유사한 레이어를 한꺼번에 수정해야 할 때 반복 클릭을 크게 줄여준다.

플러그인 실행 단축키

  • Mac에서는 ⌘ + /, Windows에서는 Ctrl + /로 메뉴 검색을 연다.
  • 검색창에 플러그인 이름을 입력한 뒤 키보드만으로 실행할 수 있다.
  • 직전에 실행한 플러그인은 다음 단축키로 다시 실행할 수 있다.
    • Mac: ⌘ + ⌥ + P
    • Windows: Ctrl + Alt + P

반복적인 화면 검증, 컴포넌트 복제, 텍스트 정리, 일괄 수정이 자주 발생한다면 이 플러그인들을 작업 흐름에 맞게 조합해 사용하는 것이 좋다. 특히 플러그인 이름을 메뉴 검색으로 실행하는 습관을 들이면 마우스 조작까지 줄일 수 있다.