---
url: "/ko/emailify/design/figma-mcp.md"
description: "에이전트가 Figma에서 Emailify 이메일을 직접 만들거나 편집할 때 꼭 따라야 하는 프레임, 컴포넌트, 메타데이터 규약이에요."
---

# Figma MCP와 함께 Emailify 사용하기

> 에이전트가 Figma에서 Emailify 이메일을 직접 만들거나 편집할 때 꼭 따라야 하는 프레임, 컴포넌트, 메타데이터 규약이에요.

이 페이지는 에이전트가 Figma MCP로 Emailify 이메일을 직접 만들거나 편집할 때 따르는 공식 규약이에요. 이름과 구조를 정확히 지켜야 Emailify가 결과물을 인식하고, 모든 컴포넌트가 원본 메인 컴포넌트에 연결된 상태로 유지돼요.

에이전트는 주변 문서 화면을 불러오지 않고도 이 규약의 간결한 [Markdown 버전](/ko/emailify/design/figma-mcp.md)을 읽을 수 있어요.

> **Note:** Figma에 직접 작업하는 이 워크플로는 AI Designer(베타)의 일부예요. 기능을 개선하는 동안 규약이 바뀔 수 있으니, 에이전트는 MCP 워크플로를 시작할 때마다 이 페이지를 읽어야 해요.

## 에이전트 지시문 {#agent-instruction}

Figma 쓰기 권한이 있는 Codex, Claude Code 또는 다른 에이전트에 아래 내용을 붙여 넣으세요.

```text
Read and follow the current Emailify Figma MCP contract at https://docs.hypermatic.com/emailify/design/figma-mcp.md before writing to Figma. Create or edit the email using only linked Emailify component instances. Preserve protected content, component links, and existing instance overrides. For a new email, create a vertical auto-layout frame on the page or inside Figma sections named exactly "✉️ Emailify MCP: [email name]" and include at least one linked Emailify section, wrapper, hero, or code-only custom-code instance. Ordinary images and frame layers may also be direct children and export as images. Never detach Emailify instances. Create a separate sibling frame in the same page or section named exactly "✉️ Emailify MCP Metadata: [same email name]" with TEXT layers named exactly "Subject Line" and "Preheader Text", containing only their corresponding values. Replace the bracketed placeholders with the actual email name. When finished, tell me to open or refresh Emailify.
```

## 이메일 프레임 규약 {#email-frame-contract}

새 이메일마다 아래 규칙을 모두 만족하는 프레임을 하나 만드세요.

| 속성 | 필수 값 |
| --- | --- |
| 이름 | `✉️ Emailify MCP: [email name]` |
| 위치 | Figma 페이지 바로 아래 또는 Figma 섹션 안. 일반 프레임이나 그룹 안에는 절대 넣지 마세요 |
| 레이아웃 | 세로 Auto Layout |
| 직계 하위 요소 | 연결된 Emailify 컴포넌트 인스턴스. 내보낼 수 있는 일반 시각 레이어를 함께 넣어도 돼요 |
| 허용되는 Emailify 루트 | `mj-section`, `mj-wrapper` 또는 `mj-hero`. Emailify Custom Code 텍스트 레이어만 들어 있는 사용자 지정 코드 인스턴스 |
| 콘텐츠 | 유효한 Emailify 컴포넌트 인스턴스 하나 이상 |

`[email name]`은 실제 이름으로 바꾸세요. `✉️ Emailify MCP:` 뒤의 텍스트가 Emailify 이메일 이름이 되며, 비어 있으면 안 돼요.

Emailify 인스턴스를 분리(detach)하거나 그 내용을 일반 레이어로 다시 만들지 마세요. 컴포넌트 콘텐츠는 인스턴스 재정의로 바꿔야 디자인 시스템 업데이트가 조립된 모든 이메일에 계속 반영돼요. 일반 이미지, 프레임, 그룹 등 다른 시각 레이어는 이메일 프레임 바로 안에 넣어도 돼요. Emailify는 이런 레이어를 편집 가능한 이메일 콘텐츠가 아닌 이미지로 내보내요.

## 제목과 프리헤더 {#subject-line-and-preheader}

이메일 메타데이터용으로 같은 페이지나 섹션에 별도의 형제 프레임을 만드세요. 이 프레임의 이메일 이름은 이메일 프레임과 정확히 같아야 해요.

| 속성 | 필수 값 |
| --- | --- |
| 프레임 이름 | `✉️ Emailify MCP Metadata: [same email name]` |
| 제목 레이어 | 이름이 `Subject Line`이고 제목만 들어 있는 TEXT 레이어 |
| 프리헤더 레이어 | 이름이 `Preheader Text`이고 프리헤더만 들어 있는 TEXT 레이어 |

이 메타데이터 프레임은 이메일 프레임 밖에 두세요. 텍스트 값에 레이블, 접두어, 메모, 대체 문구를 넣지 마세요.

Emailify는 플러그인을 열거나 새로 고칠 때 각 필드를 따로 가져와요. 캔버스의 메타데이터가 바뀌지 않았다면 나중에 Emailify 안에서 직접 수정한 내용을 덮어쓰지 않아요. 에이전트가 캔버스에서 메타데이터 값을 바꾸면 Emailify는 다음 새로고침 때 바뀐 필드를 가져와요.

## 기존 이메일 편집하기 {#editing-an-existing-email}

이미 이 규약을 따르는 이메일을 업데이트할 때는 다음을 지키세요.

- 가능하면 기존에 연결된 인스턴스를 그 자리에서 수정하세요.
- Emailify 컴포넌트를 추가하거나 순서를 바꿀 때도 연결된 상태를 유지하세요. 일반 시각 레이어는 함께 있어도 되고 이미지로 내보내져요.
- 이메일 프레임 이름과 세로 Auto Layout 구조를 유지하세요.
- 브리프에서 명시적으로 바꾸라고 하지 않는 한 기존 컴포넌트 연결과 인스턴스 재정의를 유지하세요.
- 잠긴 레이어나 이름이 `🔒`로 시작하는 레이어는 절대 바꾸거나 숨기거나 삭제하지 마세요.
- 브리프에 정확한 대체 URL이 없다면 기존 링크를 유지하세요.
- 제목이나 프리헤더가 바뀌면 짝이 되는 메타데이터 프레임도 업데이트하세요.

## 적용 및 검증 {#adoption-and-validation}

에이전트가 작업을 마치면 Emailify를 열거나 새로 고치세요. Emailify는 후보 프레임을 검증한 다음 일반 `mj-body` 메타데이터를 적용하고, 짝이 되는 제목과 프리헤더 값을 가져와요.

프레임이 일반 프레임이나 그룹 안에 중첩되어 있거나, 비어 있거나, 세로로 배치되지 않았거나, 내보낼 수 없는 레이어가 있거나, 연결된 Emailify 섹션, 래퍼, 히어로, 코드 전용 사용자 지정 코드 컴포넌트가 하나도 없으면 Emailify는 그 프레임을 거부해요. 이는 의도된 동작이에요. 일반 Figma 레이아웃이 실수로 Emailify 이메일로 바뀌어서는 안 되니까요.

## 문제 해결 {#troubleshooting}

| 문제 | 확인할 사항 |
| --- | --- |
| 이메일이 인식되지 않아요 | 정확한 `✉️ Emailify MCP:` 이름, 페이지 또는 섹션 위치, 세로 Auto Layout, 연결된 Emailify 직계 하위 인스턴스가 하나 이상 있는지 확인하세요. |
| 제목이나 프리헤더가 없어요 | 메타데이터 프레임이 같은 이메일 이름을 쓰는지, 텍스트 레이어 이름이 정확히 `Subject Line`과 `Preheader Text`인지 확인하세요. |
| 컴포넌트 연결이 끊겼어요 | 분리되었거나 다시 만든 레이어를 원본 Emailify 메인 컴포넌트의 인스턴스로 바꾸세요. |
| 법적 고지나 고정 콘텐츠가 바뀌었어요 | 레이어를 잠그거나 이름 앞에 `🔒`를 붙인 다음, 메인 컴포넌트에서 승인된 콘텐츠로 되돌리세요. |
| Emailify에서 직접 입력한 값이 바뀌지 않아요 | 캔버스에서 해당 메타데이터 텍스트를 수정한 다음 Emailify를 다시 새로 고치세요. |

Figma 쓰기 도구를 쓸 수 없을 때는 [AI Designer로 이메일 만들기](/ko/emailify/design/ai-designer)에 설명된 검증된 JSON 가져오기 워크플로를 사용하세요.

사용자 지정 코드 컴포넌트는 이메일 섹션 사이에 바로 넣을 수 있어요. 예를 들어 조건부 템플릿 로직을 열고 닫을 때 쓸 수 있어요. 메인 컴포넌트와 인스턴스 모두 Custom Code 텍스트 레이어만 하나 이상 들어 있어야 해요. 빈 컴포넌트, 중첩된 프레임, 일반 텍스트, 시각 콘텐츠가 섞인 경우는 해당하지 않아요. 이 컴포넌트들은 마스터 컴포넌트에 연결된 상태로 유지하세요.

Figma 섹션 안에 이메일 프레임을 넣을 수 있고, 중첩된 섹션도 괜찮아요. 가능하면 각 메타데이터 프레임을 같은 섹션 안에서 해당 이메일 옆에 두세요. Emailify는 같은 컨테이너에 있는 짝이 되는 메타데이터를 우선 사용하지만, 페이지의 다른 곳에 이미 있는 짝이 되는 메타데이터도 계속 지원해요. 일반 프레임과 그룹은 이메일 컨테이너가 아니에요.