Figma AI 에이전트로 ‘맞춤형 플러그인’ 만들기: 프롬프트부터 툴 생성까지 초보자 튜토리얼

왜 ‘맞춤형 플러그인’인가

 

Figma를 쓰다 보면 반복 작업이 시간을 잠식합니다. 색상 토큰 정리, 컴포넌트 배치, 접근성 검수처럼 규칙은 명확한데 손이 많이 가는 일들입니다.

 

최근 공개된 Figma AI 에이전트는 이런 규칙을 말로 설명하면 플로우를 자동화하는 맞춤형 플러그인(툴)을 만들어 줍니다. 코드를 몰라도 팀의 반복 업무를 버튼 한 번으로 묶을 수 있습니다.

 

이 글은 “프롬프트로 요구사항 설명 → 에이전트가 제안 → 필요한 툴 생성”까지 한 번에 따라 하는 튜토리얼입니다. 초보자도 실무 화면에서 바로 써볼 수 있는 최소 절차와 예시를 제공합니다.

 

> 주의: 자동화가 강력할수록 잘못된 규칙이 그대로 확산될 수 있습니다. 생성된 툴은 팀 규칙과 파일 백업을 준비한 뒤 소규모 파일에서 먼저 검증하세요.

 

프롬프트가 ‘규칙’이 되고, 툴은 ‘버튼’이 됩니다

 

반복 작업을 말로 정의하면 그 말이 곧 규칙이 됩니다. Figma AI 에이전트는 이 규칙을 읽고 한 번에 실행하는 작은 툴(맞춤형 플러그인)로 바꿉니다.

 

예를 들어 “텍스트 스타일을 H1/H2/H3로 정규화하고 대비 4.5:1 미만은 경고”처럼요.

 

필요한 이유는 규칙이 사람마다 다르게 해석되는 순간 품질이 흔들리기 때문입니다. 에이전트를 통하면 “무엇을, 언제, 어디에” 적용할지 일관된 버튼으로 고정할 수 있습니다.

 

작동 흐름은 간단합니다. 자연어 요구사항 → 에이전트의 작업 계획 제안 → 허용 범위 확인 → 캔버스에서 실행 가능한 툴 생성.

 

한 번 만든 툴은 같은 파일이나 다른 프로젝트에서도 재사용할 수 있습니다.

 

> 안티패턴: “알아서 깔끔하게 정리해줘”처럼 모호한 지시는 누락을 부릅니다. 수치, 범위, 대상 레이어를 구체화하세요.

 

프롬프트 → 툴 생성: 7단계 체크리스트

 

빈 파일이나 샘플 프레임을 열고, 자동화할 작업의 범위를 한 문장으로 적어 둡니다. 대상·조건·결과를 숫자와 규칙으로 명시하는 것이 핵심입니다.

 

예: “선택한 프레임의 텍스트를 H1/H2/H3로 정규화하고 대비 4.5:1 미만 경고”.

 

- Figma에서 AI 에이전트를 열고 새 작업을 생성합니다.
- “어디에 적용할지(선택/페이지/파일)”를 먼저 지정합니다.
- 규칙을 항목화합니다: 대상 레이어, 임계값(예: 대비 4.5:1), 예외(예: 아이콘 라벨 제외).
- 에이전트가 제안한 작업 계획에서 추가/제외 항목을 수정합니다.
- 실행 전 “미리보기/샘플 실행”으로 한두 개 레이어만 검증합니다.
- 이상 없으면 툴로 저장하고 이름·설명·권한(작업 범위)을 설정합니다.
- 다른 파일에서 재사용해 보고 필요 시 규칙을 버전으로 분리합니다.

 

에이전트가 만든 툴의 옵션은 짧은 프롬프트로 재설정할 수 있습니다. 예: “대비 기준을 7:1로 올리고 캡션은 제외”.

 

> 실무 팁: 대량 변경 전 ‘파일 복제 → 선택 영역만 테스트 → 전체 적용’ 순서로 진행하세요. 규칙이 과하게 적용되면 되돌리기 비용이 큽니다.

 

툴 저장 후 빠르게 회귀 테스트를 준비하면 품질이 안정됩니다. 다음 항목만 체크해 두면 추후 수정 시에도 일관성을 유지하기 쉽습니다.

 

- 샘플 프레임 3종(밝은 배경/어두운 배경/혼합) 보관
- 기준표(타이포 체계, 컬러 토큰, 대비 임계값) 링크
- 스코프 메모(선택한 프레임만, 현재 페이지만, 파일 전체) 표시

 

흔한 실수와 선택 기준 한 번에 정리

 

모호한 지시, 과한 권한, 무검증 실행이 초보 단계에서 가장 많이 나옵니다. 규칙을 숫자와 범위로 고정하고 작은 단위로 검증하는 것이 안전합니다.

 

- 모호한 표현: “정리해줘/맞춰줘” → 금지어로 취급하고 수치·대상·예외를 명시
- 과한 범위: 파일 전체 적용 → 선택 영역·현재 페이지부터 시작
- 미리보기 생략: 바로 실행 → 샘플 1~2개로 결과 확인 후 확장
- 규칙 누락: 예외 레이어 미정 → 아이콘/로고/비표준 폰트는 제외 항목화
- 결과 불명확: 완료 기준 없음 → 변경 요약(몇 개 수정, 몇 개 경고)을 출력하게 지시

 

툴을 고정 규칙형 vs 대화형으로 만들지 선택해야 합니다. 반복 일괄 처리에는 고정 규칙형이, 상황별 옵션 조정에는 대화형이 적합합니다.

 

- 고정 규칙형: 팀 토큰 적용, 네이밍 정리, 접근성 기준 점검
- 대화형: 컴포넌트 치수 조정, 페이지별 예외 적용, 특정 브랜드 변형

 

> 실무 팁: 첫 버전은 “읽기 전용 리포트” 모드로 생성해 변경 제안을 로그로만 보게 하세요. 승인 흐름을 거친 뒤 “실제 변경” 모드로 전환하면 리스크를 크게 줄일 수 있습니다.

 

에이전트 자동 제안과 기존 플러그인 중 무엇을 쓸지 헷갈리면 유지보수 관점으로 고르세요. 내부 규칙이 자주 바뀌면 에이전트 툴이 유리하고, 표준화된 과업(예: 아이콘 내보내기)은 검증된 공개 플러그인이 낫습니다.

 

지금 할 일: 첫 툴 만들고 작은 파일에서 검증하기

 

이번 튜토리얼의 핵심은 규칙을 말로 고정하고 그것을 재사용 가능한 버튼(툴)으로 저장하는 것입니다. 한 번 만든 규칙은 같은 팀 작업에 반복 적용해 품질 편차를 줄일 수 있습니다.

 

지금 바로 실행할 체크리스트입니다. 10분 안에 첫 툴을 만들어 결과를 눈으로 확인하세요.

 

- 샘플 프레임 준비: 텍스트/아이콘이 섞인 작은 캔버스를 만듭니다.
- 범위를 한 문장으로 정의: “선택 영역에 H1/H2/H3 적용, 대비 4.5:1 미만 경고”.
- Figma AI 에이전트 열기 → 새 작업 생성 → 적용 범위를 ‘선택’으로 지정.
- 규칙 항목화: 대상(텍스트), 임계값(4.5:1), 예외(아이콘 라벨 제외).
- 미리보기로 1~2개 레이어만 실행 후, 이상 없으면 툴로 저장.

 

저장한 툴은 다른 파일에서 재사용해 보되, 변경 요약(몇 개 수정/경고)이 보이는지 함께 확인합니다. 결과가 기대와 다르면 임계값이나 예외만 수정해 버전으로 나누세요.

 

> 실무 팁: 처음부터 파일 전체에 실행하지 말고 페이지/선택 영역부터 검증하세요. 잘못된 규칙이 퍼지면 되돌림 비용이 커집니다.

 

예시로 끝내기: ‘텍스트 스타일 정규화 + 대비 경고’ 툴 완성본

 

이 섹션은 앞에서 만든 규칙을 실제 프롬프트로 묶어 하나의 툴로 저장하는 과정을 예시로 보여줍니다. 같은 규칙을 반복 적용할 수 있게 버튼화하는 것이 목표입니다.

 

- 적용 범위: 선택한 프레임
- 대상: 텍스트 레이어만
- 규칙: H1/H2/H3 매핑, 대비 4.5:1 미만 경고
- 예외: 아이콘 라벨, 로고 포함 텍스트 제외
- 결과: 수정 개수/경고 개수 요약 출력

 

아래 프롬프트는 에이전트에 붙여 넣어 바로 툴을 생성할 때 사용하는 예시입니다. 팀 규칙과 명칭만 바꾸면 다른 파일에도 재사용할 수 있습니다.

 

선택한 프레임에만 적용. 텍스트 레이어를 탐색해 다음 규칙으로 정규화:
- H1: 32px Bold, H2: 24px Semibold, H3: 18px Regular.
- 대비(WCAG) 4.5:1 미만은 수정하지 말고 경고만 기록.
- 이름에 "icon", "logo" 포함 텍스트는 제외.
실행 전 2개 샘플로 미리보기 후 전체 적용. 완료 후 '수정 n개, 경고 m개' 요약 출력. 툴 이름: "Text Normalize + Contrast Check".

 

핵심은 대상·예외·임계값을 숫자와 키워드로 고정하고, 미리보기와 결과 요약을 포함하는 것입니다. 이렇게 저장한 툴은 ‘선택 → 미리보기 → 전체 적용’ 순서로 안전하게 확장할 수 있습니다.

 

> 경고: 파일 전체에 즉시 적용하면 예외 누락이 일괄 반영될 수 있습니다. 소규모 선택 영역에서 검증 후 범위를 넓히세요.