Figma*가 디자인 파일 안에 실제로 작동하는 코드와 기획 문서를 함께 놓는 새 기능을 공개했습니다. 화면을 그린 뒤 별도의 개발 문서로 넘기던 흐름보다, 같은 캔버스에서 결과와 맥락을 나란히 확인하는 쪽에 가깝습니다.
이번 발표의 중심은 ‘Code Layers*’와 ‘Figma Specs*’입니다. 하나는 실행 가능한 인터랙션을 디자인 옆에 두고, 다른 하나는 요구사항과 결정 과정을 문서로 남깁니다. 사람뿐 아니라 코딩 에이전트도 이 자료를 함께 읽을 수 있도록 연결했습니다.
🧩 디자인 옆에서 바로 움직이는 Code Layers
Code Layers는 이름 그대로 코드로 만든 레이어입니다. 일반 프레임처럼 캔버스에 배치되지만, 안에는 실제로 실행되는 코드가 들어 있습니다. 버튼을 누르거나 화면을 전환하는 동작도 확인할 수 있어, 정적인 시안만으로 설명하기 어려웠던 인터랙션을 직접 보여줄 수 있습니다.
Code Layers를 가져오거나 만드는 방법은 세 가지입니다.
- 자연어: 디자인 프레임을 선택한 뒤 원하는 동작을 말로 설명합니다.
- 프로젝트 연결: GitHub 저장소를 연결하거나 로컬 폴더를 올립니다.
- 웹 캡처: 크롬 확장 프로그램으로 웹페이지를 가져옵니다.
이미 작동하는 화면과 새로 그린 디자인을 같은 파일에서 비교하며 수정할 수 있다는 뜻입니다.
이 기능은 단순히 ‘디자인을 코드로 바꿔주는 버튼’과는 조금 다릅니다. 목적은 완성된 서비스 코드를 자동으로 납품하는 데 있지 않습니다. 디자인 단계에서 실제 동작을 빠르게 시험하고, 개발자가 확인할 수 있는 형태로 의도를 더 선명하게 남기는 데 가깝습니다. Code Layers는 모든 요금제에서 오픈 베타로 순차 제공됩니다.
코드 레이어도 다른 디자인 요소처럼 캔버스에서 복제하고 배치할 수 있습니다. 서로 다른 동작을 한 화면에 펼쳐놓고 비교하거나, 댓글을 달아 수정 방향을 정할 수 있습니다. 프로토타입을 보기 위해 별도의 미리보기 링크를 오가는 횟수도 줄어듭니다.
📝 기획 문서도 캔버스 안으로 들어옵니다
Figma Specs는 마크다운 기반의 기획 문서입니다. 새 파일을 따로 열지 않아도 디자인 캔버스나 FigJam 안에 Specs를 놓을 수 있습니다. 기존 마크다운 파일을 끌어다 넣고, 화면 프레임과 다이어그램, Code Layers, Code Connect 코드 조각까지 문서 안에 연결할 수 있습니다.
예를 들어 결제 화면을 고치는 작업이라면 목표와 예외 상황을 Specs에 적고, 관련 화면을 바로 옆에 붙여둘 수 있습니다. 댓글에서 나온 결정도 같은 자리에서 이어집니다. 문서만 읽고 화면을 다시 찾아가거나, 회의에서 합의한 이유가 메신저 기록 속에 묻히는 일을 줄이려는 구성입니다.
Figma는 Specs를 ‘최종 기획서’보다 계속 갱신되는 작업 맥락에 가깝게 설명합니다. 기획과 디자인이 바뀌면 문서도 함께 고치고, 누가 어떤 판단을 내렸는지 이어서 확인할 수 있습니다. Specs는 유료 요금제를 대상으로 오픈 베타가 시작됐으며 계정에 따라 순차적으로 열립니다.
문서 안에서는 여러 사람이 동시에 편집하고 댓글을 남길 수 있습니다. Figma 에이전트가 댓글을 읽고 답하거나, 디자인 시스템의 구성 요소를 살펴 사용 맥락을 문서에 정리하는 흐름도 제시됐습니다. 문서 작성과 화면 검토가 따로 움직이지 않도록 만든 셈입니다.
🤝 사람과 코딩 에이전트가 같은 맥락을 읽습니다
두 기능이 만나는 지점은 구현 단계입니다. Specs 링크를 Codex 같은 코딩 에이전트에 전달하면, 에이전트는 Figma MCP*를 통해 문서와 연결된 디자인, 코드 레이어를 함께 읽을 수 있습니다. 화면만 보고 코드를 추측하는 대신, 왜 이렇게 설계했는지와 어떤 예외를 처리해야 하는지까지 참고할 수 있습니다.
반대로 구현하면서 확인된 내용은 원래 Specs에 다시 반영할 수 있습니다. 요구사항을 복사해 새 문서로 옮기기보다, 같은 기록을 사람과 에이전트가 오가며 업데이트하는 방식입니다. 다만 AI로 Code Layers를 만들거나 Specs 안에서 에이전트를 쓰는 작업에는 AI 크레딧이 필요합니다. Code Layers의 일부 AI 기능은 유료 요금제에서 11월 4일까지 무료로 제공된 뒤 크레딧 정책이 적용됩니다.
이번 업데이트는 디자인 도구의 범위를 넓히는 발표입니다. Figma 안에서 모든 일을 끝낸다는 의미보다는, 디자인·작동 화면·결정 기록 사이의 거리를 줄이려는 시도에 가깝습니다. 구현 결과만 빠르게 만드는 것보다, 그 결과가 나온 이유를 잃지 않는 흐름에 무게를 뒀습니다.
D.Flick Note
핵심은 자동화 속도보다 ‘맥락이 붙어 있는 상태’를 오래 유지하는 데 있습니다. 기획서와 디자인, 코드가 따로 흩어질수록 인수인계 때 빠지는 정보가 늘어납니다. Figma는 이 세 가지를 한 캔버스에 놓아 사람과 AI가 같은 출발점을 보게 만들고 있습니다.
Sources
Footnote
- Figma: 화면 디자인과 프로토타입을 여러 사람이 함께 만들고 검토하는 협업 도구입니다.
- Code Layers: Figma 캔버스 안에서 실제 코드로 실행되는 화면 요소입니다. 정적인 시안과 달리 버튼·화면 전환 같은 동작을 직접 확인할 수 있습니다.
- Figma Specs: 요구사항과 결정 내용을 마크다운 문서로 적고, 관련 디자인·다이어그램·코드를 함께 연결하는 기능입니다.
- Figma MCP: Figma의 문서와 디자인 정보를 Codex 같은 AI 코딩 도구가 읽고 활용하도록 이어주는 연결 방식입니다.