Figma 커스텀플러그인 만들기 – 업무효율성 극대화 방법

by

Figma는 기본적으로 매우 강력한 디자인 도구지만

모든 사용자의 요구를 다 만족시키기는 어렵습니다.

반복적인 작업이나 특정 기능이 아쉬울 때 직접 플러그인을 만들어 사용하면

작업 시간을 크게 줄이고 효율성을 극대화할 수 있습니다.

이번 글에서는 Figma 커스텀 플러그인 제작 과정과

이를 통해 업무 효율성을 200% 올릴 수 있는 방법을 소개하겠습니다.

1. Figma 커스텀 플러그인이 필요한 이유

디자인 업무를 하다 보면 반복 작업이나 불편한 프로세스가 생길 수 있습니다.

이때 기존 플러그인을 활용해도 해결되지 않는 경우,

직접 플러그인을 만들어 필요한 기능을 추가할 수 있는데요.

커스텀 플러그인이 필요한 상황

  • 반복적인 텍스트 변환 작업
  • 여러 프레임을 한 번에 정리해야 할 때
  • 복잡한 색상 변경 작업
  • UI 구성 요소를 한 번에 조정해야 할 때

자체 플러그인을 만들어 사용하면,

프로젝트 특성에 맞춘 맞춤형 작업을 빠르게 수행할 수 있습니다.

2. Figma 커스텀 플러그인 제작 기본 구조

Figma 플러그인은 HTML, CSS, JavaScript를 기반으로 만들어집니다.

브라우저 환경과 유사하기 때문에 웹 개발 경험이 있다면 쉽게 접근할 수 있습니다.

플러그인의 기본 구조

  1. manifest.json: 플러그인의 설정 파일
  2. code.js: 플러그인의 주요 기능을 담당하는 JavaScript 코드
  3. ui.html: 사용자 인터페이스(UI)를 담당하는 HTML 파일
  4. style.css: UI의 스타일을 정의하는 CSS 파일

3. Figma 플러그인 개발 환경 설정

단계 1: Figma 플러그인 디렉토리 생성

프로젝트 폴더를 만들고 내부에 다음과 같은 구조를 만들어야 합니다.

/my-plugin
/manifest.json
/code.js
/ui.html
/style.css

단계 2: manifest.json 설정

manifest.json 파일에는 플러그인의 기본 정보와 동작 방식을 정의합니다.

아래와 같이 설정하면 기본 환경이 만들어집니다.

{
“name”: “My Custom Plugin”,
“id”: “my-custom-plugin”,
“api”: “1.0.0”,
“main”: “code.js”,
“ui”: “ui.html”
}

단계 3: 간단한 JavaScript 코드 작성

code.js 파일에 플러그인의 핵심 기능을 작성합니다.

예를 들어, 모든 텍스트를 대문자로 변환하는 플러그인이라면 아래와 같아요.

figma.showUI(html);

figma.ui.onmessage = (msg) => {
if (msg.type === ‘uppercase’) {
const selectedNodes = figma.currentPage.selection;
for (const node of selectedNodes) {
if (node.type === ‘TEXT’) {
node.characters = node.characters.toUpperCase();
}
}
figma.closePlugin();
}
};

아직 포기 하지 마세요!

4. 플러그인 UI 구성

HTML 파일 작성

UI를 보여줄 간단한 버튼을 만든다고 생각해보세요.

<!DOCTYPE html>

<html>

  <body>

    <button id=”convert”>대문자로 변환</button>

    <script>

      document.getElementById(‘convert’).onclick = () => {

        parent.postMessage({ pluginMessage: { type: ‘uppercase’ } }, ‘*’);

      };

    </script>

  </body>

</html>

5. Figma에서 플러그인 실행하기

플러그인 설치

  1. Figma 앱에서 플러그인 > 개발 > 플러그인 폴더 열기를 클릭합니다.
  2. 앞서 만든 폴더를 복사하여 붙여넣습니다.
  3. Figma를 다시 실행하면 플러그인이 등록됩니다.

플러그인 실행

  • 디자인 파일에서 텍스트를 선택합니다.
  • 플러그인을 실행하고 “대문자로 변환” 버튼을 클릭하면 선택된 모든 텍스트가 대문자로 바뀝니다.

6. 커스텀 플러그인 활용 사례

사례 1: 컬러 팔레트 자동 적용

브랜드 컬러가 자주 변경되는 프로젝트라면,

한 번에 색상을 변경할 수 있는 플러그인을 제작할 수 있습니다.

사례 2: 자동 레이어 정리

작업이 많아질수록 레이어 정리가 어려운데요.

특정 기준에 따라 레이어를 자동 정렬해주는 플러그인을 만들면 효율적입니다.

사례 3: 아이콘 일괄 변환

UI 라이브러리 업데이트 시 아이콘 스타일이 바뀌는 경우가 있는데,

아이콘 이름을 기준으로 한 번에 교체하는 플러그인을 사용하면 편리합니다.

7. 플러그인 배포와 관리

플러그인 배포하기

  • Figma 커뮤니티에 플러그인을 배포하려면 Figma 홈페이지에서 플러그인 등록 메뉴를 이용합니다.
  • 자세한 사용법, 기능 설명, 라이선스 정보를 포함하여 배포하면 다른 디자이너들과 공유할 수 있습니다.

업데이트 관리

  • 코드 수정 후 다시 설치하지 않아도, 디렉토리 안에서 파일을 업데이트하면 Figma에서 자동으로 반영됩니다.
  • 주기적으로 기능 개선과 오류 수정 버전을 관리해야 합니다.

마무리

Figma에서 커스텀 플러그인을 만들어 사용하면

반복 작업을 줄이고, 팀원들과의 협업 효율성을 극대화할 수 있습니다.

특히 프로젝트 특성에 맞춘 맞춤형 플러그인을 제작하면

작업 속도와 정확성이 비약적으로 향상되는데요.

처음에는 간단한 플러그인부터 시작해서

점점 복잡한 기능으로 확장해 나가면 더욱더 발전이 가능 할거에요.

어렵다면 댓글을 달아주세요.

Leave a Comment