2주만에 피그마 플러그인 개발하기 - Flamel 3D icon AI generator

Figma Plugin, 왜 사용할까?

왜 3D Icon Generator 플러그인일까?

피그마 플러그인 아키텍쳐

보일러 플레이트 및 플러그인 개발 환경 셋팅

0. 보일러 플레이트 활용

$ git clone https://github.com/CoconutGoodie/figma-plugin-react-vite

1. 피그마가 플러그인 코드를 읽는 원리 (manifest.json)

export default {
  name: "Figma-Plugin-React-Vite",
  id: "1222852692367737510",
  api: "1.0.0",
  main: "plugin.js",
  ui: "index.html",
  capabilities: [],
  enableProposedApi: false,
  editorType: ["figma", "figjam"],
};

• name: 플러그인의 이름으로, 사용자에게 표시됩니다.

• main: 플러그인의 JavaScript 파일 경로입니다.

• ui: 플러그인 모달의 HTML 파일 경로입니다.

2. 플러그인을 실행시켜보자

npm install

npm run dev

플러그인 실행 절차:

1. Figma 데스크탑 앱 실행

2. 우측 클릭 후 "Plugins > Development > Import plugin from manifest…" 선택

3. manifest.json 파일을 업로드

4. Figma에서 아무 디자인 파일을 열고, "Plugins > Development"에서 플러그인을 실행

3. 보일러 플레이트의 구조에 대한 설명 (피그마의 아키텍처와 연관 지어서)

1) src/plugin

2)src/ui

3) src/common

번들링 과정을 포함한 개발 프로세스:

• 피그마에서 실행할 로직: src/plugin/plugin.ts → 빌드 → dist/plugin.js (실행 파일)

• 플러그인 모달에서 실행할 로직: src/ui/index.html → 빌드 → dist/index.html (실행 파일)

• manifest.json 로직: figma.manifest.ts → 빌드 → dist/manifest.json (Figma에 업로드)

4. 피그마에서 개발자 콘솔 실행 방법

1. Figma 데스크톱 앱에서 플러그인을 실행합니다. Figma 웹 버전에서는 플러그인 개발자 콘솔을 사용할 수 없으므로, 반드시 데스크톱 앱을 사용해야 합니다.

2. 플러그인 실행 후, Figma 메뉴에서 "Show/Hide console"을 선택합니다
• 메뉴 경로: Figma 메뉴 > Plugins > Development > Open/Hide Console

3. 단축키를 사용하여 개발자 콘솔을 열 수 있습니다:
• Mac: Command + Option + I
• Windows: Ctrl + Shift + I

4. 개발자 콘솔이 열리면, 플러그인에서 발생하는 에러 로그, console.log 출력, 네트워크 요청 등을 확인할 수 있습니다.

플러그인과 피그마 간의 통신

0. 왜 통신이 필요한가?

1. 사용자 정보 저장 및 유지

2. 디자인 애셋의 가져오기 (Import)

1. 플러그인 모달 실행

    figma.showUI(__html__, {
      width: 800,
      height: 650,
      title: "My Figma Plugin!",
    });

// dist/plugin.js

2. 피그마와 플러그인 모달 통신

1) 플러그인 모달 → 피그마

  useEffect(() => {
    parent.postMessage(
      {
        pluginMessage: {
          type: "sent-message",
          message: "sending a message...",
        },
      },
      "*"
    );
  }, []);

// src/ui/app.tsx

  figma.ui.onmessage = async (msg: { type: string; message: string }) => {
    if (msg.type === "sent-message") {
      console.log(msg.message);
    }
  };
// src/plugin/plugin.ts

2) 피그마 → 플러그인 모달

figma.ui.postMessage({
  type: "message-received",
  message: "message received!",
});

// src/plugin/plugin.ts

  window.onmessage = async (event) => {
    const message = event.data.pluginMessage;
    if (message.type === "message-received") {
      console.log(message.message);
    }
  };


// src/ui/app.tsx

피그마 플러그인, 글로벌 유저를 만날 수 있다!