Figma 코드 레이어 및 Specs: 정의, 작동 방식 및 중지 위치2 min read

Figma 코드 레이어는 실행 코드를 캔버스에 배치하고 Figma Specs는 Markdown도 캔버스에 배치합니다. 둘 다 2026년 10월 15일 Config India에서 오픈 베타에 참여했으므로 이제 디자인 파일에 프레임, 작업 프로토타입 및 에이전트가 작성하는 서면 계획을 저장할 수 있습니다.

이 가이드는 프로토타입 및 사양 작업을 Figma로 이동할지 여부를 결정하는 디자이너, PM 및 프런트 엔드 엔지니어를 위한 것입니다. 각 기능의 기능, 시작 방법, AI 크레딧 비용, Claude, ChatGPT 또는 Cursor의 팀원을 위해 작업이 Figma를 떠나야 하는 위치를 다룹니다.

AI 시대에는 디자인이 곧 코드다. AI를 사용하여 코드에서 직접 디자인하거나 Figma 디자인을 코드로 변환하려면 다음을 사용하세요. Anima Playground: 화면을 설명하거나 Figma 디자인에서 시작한 다음 미리 보고 게시할 수 있는 편집 가능한 앱에서 계속 반복합니다.

AI를 사용하여 코드에서 직접 디자인

AI를 사용한 디자인: 화면을 설명하거나 Figma 디자인을 코드로 변환합니다.

Figma는 Config India 2026에서 무엇을 출시했나요?

코드 레이어와 Specs가 헤드라인이었지만 주변에 일련의 에이전트 기능이 포함되어 있었습니다. Figma 도움말 센터의 현재 상태는 다음과 같습니다.

두 베타 모두 몇 주에 걸쳐 출시되므로 나머지 팀 구성원 이전이나 이후에 확인할 수 있습니다.

Figma 코드 레이어란 무엇입니까?

코드 레이어는 실제 실행 코드를 보유하는 레이어입니다. 프레임 링크와의 상호 작용을 위조하는 프로토타입 대신, 디자인 옆 캔버스에 작동하는 코드 지원 프로토타입을 얻을 수 있습니다. 팀원은 클릭하여 댓글을 달고 복제하여 나란히 다른 방향으로 시도해 볼 수 있습니다.

Figma는 시작하는 네 가지 방법을 제공합니다.

• 디자인에서. 프레임을 선택하고 Figma 에이전트에게 프레임을 코드 레이어로 변환하도록 요청하세요.
• 라이브 웹사이트에서. Figma Chrome 확장자로 페이지를 캡처하여 캔버스에 붙여넣습니다.
• 저장소에서. GitHub 또는 로컬 폴더에서 지원되는 경량 프로토타이핑 코드베이스를 가져옵니다. GitHub 가져오기는 해당 저장소에 연결된 상태로 유지됩니다.
• 처음부터. 빈 코드 레이어를 추가하고 에이전트에 빌드하라는 메시지를 표시합니다.

Figma MCP 서버를 통해 코딩 도구로 제작한 프로토타입을 캔버스로 가져올 수도 있습니다.

편집은 세 가지 방법으로 이루어집니다. 에이전트에게 메시지를 표시하고, 프레임에 주석을 달아 변경 사항이 속한 위치를 표시하거나, 코드 편집기를 열고 코드를 직접 변경합니다. 코드보다 시각적인 세부사항이 더 중요한 경우 Extract designs 코드 레이어의 화면을 편집 가능한 Figma 프레임으로 다시 전환합니다. 엔지니어가 사용할 수 있는 코드가 준비되면 해당 코드를 브랜치에 푸시하고 끌어오기 요청을 열 수 있습니다.

Figma Specs는 무엇입니까?

Figma는 Specs를 “컨텍스트의 기본 홈”이라고 부릅니다. 실제로 이는 Figma Design 파일 또는 FigJam 보드의 캔버스에 있거나 자체 Spec 파일로 존재하는 공동 Markdown 문서입니다.

시작하는 것은 빠릅니다:

1. 파일 브라우저에서 독립형 Spec를 생성하거나 다음으로 이동하세요. figma.com/spec/new.
2. 디자인 파일 또는 FigJam 보드 내에서 도구 모음에서 Spec를 클릭하거나 디.
3. 이미 .md 파일? 캔버스로 드래그하면 스펙이 됩니다.
4. 이미 알고 있는 Markdown를 사용하여 작성하세요. # 제목의 경우, - 총알의 경우, [] 할 일을 위해, > 따옴표의 경우 코드의 경우 백틱 세 개입니다. 유형 / 이미지의 경우 Figma 삽입 및 구분선이 있습니다.

Markdown 파일보다 사양을 더 좋게 만드는 것은 텍스트 주변에 있는 것입니다. 프레임, FigJam 보드 또는 캔버스의 모든 노드를 포함할 수 있으므로 요구 사항과 설명하는 디자인이 서로 나란히 유지됩니다. 팀원들이 이에 대해 댓글을 달면 Figma 에이전트는 해당 댓글을 읽고 응답할 수 있습니다.

Specs는 Figma 외부에서도 작동합니다. Figma MCP 서버에 연결된 코딩 에이전트는 다음을 사용하여 사양을 읽고 생성하고 업데이트할 수 있습니다. figma-spec 기능. 하나를 전달하려면 사양 링크를 코딩 에이전트의 프롬프트에 복사하면 연결된 프레임, 다이어그램, 코드 레이어 및 Code Connect 스니펫이 함께 제공됩니다.

Markdown가 핸드오프 형식이 된 이유

Figma의 자체 출시 게시물에는 Markdown가 이제 에이전트와 컨텍스트를 공유하기 위한 사실상의 형식이라고 명시되어 있습니다. 모든 코딩 에이전트는 이를 읽습니다. 대부분의 제품 팀은 이미 계획, PRD 및 상담원 지침을 보관하고 있습니다. .md 파일.

내가 읽은 바에 따르면 Specs는 에이전트에 대한 핸드오프가 텍스트임을 수락한 다음 해당 텍스트를 멀티 플레이어로 만드는 Figma입니다. 현지인 AGENTS.md 또는 PRD는 형식 때문에 실패한 적이 없습니다. 단 한 사람만 편집했고, 디자인에서 벗어났으며, 에이전트가 어떤 버전을 사용했는지 아무도 알 수 없었기 때문에 실패했습니다.

Figma 내부에서 Specs가 이를 수정합니다. 열린 질문은 외부에서 무슨 일이 일어나는가입니다. 포함, 댓글 및 라이브 디자인 참조는 Figma 기능이며 에이전트는 Figma MCP 카탈로그에 나열된 클라이언트를 통해 이에 접근합니다. 엔지니어, PM의 ChatGPT 및 마케팅 팀의 Claude가 모두 동일한 계획이 필요한 경우에도 공유 사본이 어디에 있는지 결정해야 합니다.

실용적인 작업 흐름: PRD부터 코드 계층, 풀 요청까지

다음은 현재 Figma 문서를 사용하여 두 기능이 실제 기능에 어떻게 결합되는지 보여줍니다.

1. PRD를 캔버스로 드래그하세요. 귀하의 기존 .md 파일이 사양이 됩니다. 아무것도 다시 작성되지 않으며 직접 편집하면 AI 크레딧이 사용되지 않습니다.
2. 그것이 말하는 프레임을 삽입하십시오. 사용 / PRD가 설명하는 흐름을 추가합니다. 이제 검토자는 요구사항과 화면을 함께 볼 수 있습니다.
3. 키 프레임을 코드 레이어로 전환합니다. 이를 선택하고 상담원에게 메시지를 표시하세요. 프로토타입 저장소가 이미 있는 경우 대신 GitHub에서 가져옵니다.
4. 한곳에서 리뷰해보세요. 스펙 및 코드 레이어에 대한 의견을 수집합니다. 사람들이 동일한 스레드에 참여하는 동안 Figma 에이전트에게 열려 있는 각 댓글에 제안된 수정 사항을 회신하도록 요청하세요.
5. 사양을 넘겨주세요. Figma MCP 서버에 연결된 Codex, Claude Code 또는 Cursor에 사양 링크를 붙여넣습니다. 에이전트는 Markdown와 연결된 설계 컨텍스트를 가져옵니다.
6. 프로토타입 코드를 배송하세요. 코드 레이어의 변경 사항을 브랜치에 푸시하고 엔지니어가 병합하기 전에 검토할 수 있도록 끌어오기 요청을 엽니다.

출력은 코딩 에이전트가 읽을 수 있는 사양과 팀이 실제로 클릭한 작업 프로토타입입니다. 다른 코드와 마찬가지로 생성된 코드를 테스트합니다. 실행되는 프로토타입은 프로덕션 준비 코드와 동일하지 않습니다.

다음 단계가 Figma 디자인을 실행할 수 있는 코드로 바꾸거나 프롬프트에서 코드로 디자인하는 것이라면 이것이 Anima Playground의 작업입니다.

코드 레이어와 Specs의 비용은 얼마입니까?

• 코드 레이어는 AI 크레딧을 사용합니다. 유료 플랜의 경우 2026년 11월 4일까지 코드 레이어 내부 생성 및 편집이 무료입니다. 동일한 프롬프트에서 다른 에이전트 작업에는 여전히 크레딧이 사용되며, 11월 4일 이후에는 모든 코드 레이어 작업에 크레딧이 사용됩니다.
• Specs는 자유롭게 쓸 수 있습니다. 사양을 직접 입력하고 편집하면 크레딧이 사용되지 않습니다. 사양이 있는 에이전트를 사용하면 됩니다. 각 프롬프트 다음에 영수증을 마우스로 가리키면 비용이 얼마인지 확인할 수 있습니다.
• Payload 및 지침에는 비용이 추가됩니다. Figma는 둘 다 상담원에게 더 많은 컨텍스트와 더 많은 작업을 제공하므로 동일한 프롬프트가 더 많은 크레딧을 사용할 수 있다고 지적합니다.

계획을 세우기 전에 확인해야 할 제한 사항

• 출시. 두 기능 모두 몇 주에 걸쳐 출시되는 오픈 베타 버전입니다. Figma Design 도구 모음에서 코드 아이콘을 찾고 파일 브라우저에서 Spec 옵션을 찾으세요.
• 계획. Specs에는 유료 요금제가 필요합니다. 초보자 사용자는 코드 레이어를 얻지만 Specs는 얻지 못합니다. 둘 다 생성하려면 수정 권한이 필요합니다.
• 선택 해제. 엔터프라이즈 관리자만이 모든 Figma AI 기능을 꺼야만 코드 레이어를 끌 수 있습니다.
• 레포 크기. GitHub 가져오기는 전체 프로덕션 앱이 아닌 경량 프로토타이핑 코드베이스용입니다.
• 디자인 시스템 코드. 코드 소스를 통해 실제 구성 요소 코드를 연결하는 것은 아직 비공개 베타이므로 코드 레이어에서는 아직 프로덕션 구성 요소를 사용하지 않을 수 있습니다.

Figma가 멈추는 곳과 Anima와 AgentGrid.io가 맞는 곳

전체 팀이 Figma에서 작업하는 경우 코드 레이어와 Specs가 강력한 기본값입니다. 프로토타입, 계획 및 설명은 동일한 파일에 있으며 Figma의 에이전트와 MCP 클라이언트가 이에 대해 작업할 수 있습니다.

두 가지 일반적인 상황은 여전히 해당 파일 외부에 있습니다.

아이디어는 다른 곳에서 시작됐다. Claude Design 프로토타입, ChatGPT에서 생성된 HTML 페이지 또는 배우고 싶은 라이브 사이트. Figma의 MCP 서버에는 이제 html_to_figma 에이전트 생성 HTML용 도구입니다. Figma 내부의 AI 설계 에이전트인 Anima의 Buddy도 다음과 같이 변합니다. HTML, Claude 아티팩트, 이미지 및 URL을 편집 가능한 Figma 레이어로 변환, 디자인 시스템을 사용하여 해당 레이어에 대한 디자인을 계속하려는 경우에 유용합니다.

결과는 Figma를 벗어나야 합니다. 귀하의 사양 또는 프로토타입은 Figma 팀 외부의 사람들이 검토하고, 여러 공급업체의 에이전트가 편집하거나, 라이브 링크로 게시되어야 합니다. 이것이 바로 Anima가 구축한 AgentGrid.io가 하는 일입니다. AgentGrid.io의 Markdown 아티팩트는 Claude, ChatGPT, Cursor 및 Grok Bot와 같은 사람과 연결된 에이전트가 편집할 수 있는 실시간 자동 저장 문서이며, 각 변경 사항은 버전 기록의 이름별로 표시됩니다. HTML 아티팩트는 승인되면 댓글을 달고 공개 URL에 게시할 수 있는 실행 페이지입니다. 하나의 Figma 프레임을 AgentGrid.io에 앱 아티팩트로 가져올 수도 있습니다. 해당 가져오기는 단방향이므로 나중에 Figma 편집 내용이 동기화되지 않습니다.

두 사람은 같은 단계를 놓고 경쟁하는 것이 아닙니다. Figma는 디자인 캔버스를 소유하고 있습니다. AgentGrid.io는 Markdown 작업이 도구와 팀을 넘나들 때 HTML 아티팩트가 사라집니다.

AgentGrid.io를 사용해 보세요 팀의 모든 에이전트가 편집하고 게시할 수 있는 사양 또는 프로토타입을 유지합니다.

다음과 같은 경우에 각 도구를 사용하십시오.

• Figma 코드 레이어 사용 이해관계자가 디자인 옆에 있는 작업 프로토타입을 클릭하고 방향을 나란히 비교해야 할 때.
• Figma Specs 사용 계획이 프레임 옆에 있어야 하고 Figma MCP 서버를 통해 코딩 에이전트가 읽어야 하는 경우입니다.
• 사용 Anima Playground AI를 사용하여 코드에서 직접 디자인하거나 Figma 디자인을 미리 보고 게시할 수 있는 편집 가능한 앱으로 전환하려는 경우.
• 사용 Buddy 시작점이 Figma 외부에 있고 캔버스에서 편집 가능한 레이어를 원할 때. Figma와 브라우저 빌더의 빌드에 대한 자세한 비교는 다음을 참조하세요. Figma Make 대 Anima Playground.
• AgentGrid.io 사용 사람과 에이전트가 여러 도구를 통해 사양이나 프로토타입을 편집하고, 의견을 검토하고, 라이브 링크로 게시해야 하는 경우.

자주 묻는 질문

Figma의 코드 레이어는 무엇입니까?

코드 레이어는 실제 실행 코드를 보유하는 Figma 캔버스의 레이어입니다. 선택한 프레임, Figma Chrome 확장으로 캡처된 라이브 웹 사이트, GitHub 프로토타이핑 저장소 또는 빈 프롬프트에서 하나를 만든 다음 이를 클릭하고 댓글을 달고 복제하여 방향을 비교할 수 있습니다.

Figma Specs는 그냥 Markdown인가요?

Specs는 텍스트에 Markdown를 사용하며 .md 파일을 캔버스로 끌어서 만들 수 있습니다. 해당 텍스트 주위에 Figma 기능(임베디드 프레임, FigJam 보드, 댓글, 해당 댓글을 읽고 응답할 수 있는 에이전트)을 추가합니다.

Figma 코드 레이어에는 AI 크레딧이 필요합니까?

그렇습니다. 유료 플랜의 경우 2026년 11월 4일까지 코드 레이어 내부 생성 및 편집이 무료입니다. 동일한 프롬프트에서 다른 에이전트 작업은 여전히 ​​크레딧을 사용하며, 11월 4일 이후 모든 코드 레이어 작업은 AI 크레딧을 사용합니다.

Claude Code, Codex 또는 Cursor는 Figma Spec를 읽을 수 있습니까?

예, Figma MCP 서버에 연결된 경우 가능합니다. 코딩 에이전트는 figma-spec 기술을 사용하여 사양을 읽고 생성하고 업데이트할 수 있으며, 사양 링크를 프롬프트에 붙여넣어 연결된 디자인 컨텍스트를 전달할 수 있습니다.

어떤 Figma 계획에 Specs가 포함되어 있나요?

Specs는 Figma의 Config India 기사에 따라 Professional, Organization, Enterprise 및 Education과 Government의 유료 플랜에 대한 공개 베타 버전입니다. 무료 스타터 플랜에는 없습니다. 코드 레이어는 Starter를 포함한 모든 계획에 출시됩니다.