피그마 도구 · Figma 코드 레이어

피그마에서 디자인을 고치면, 버튼 한 번에 실제 코드도 바뀌어요

Figma가 10월 15일 공개 베타로 내놓으며 시연한 기능이에요. 피그마 프레임이나 깃허브 저장소, 웹페이지를 캔버스에 올리면 눌러 볼 수 있는 화면이 돼요. 그 화면을 디자인 레이어로 꺼내 평소처럼 고친 뒤, 버튼 한 번으로 코드에 다시 반영해요. 고친 코드는 깃허브 브랜치에 올리고, 풀 리퀘스트를 만들어 팀 검토를 받을 수 있어요. 공식 시연과 먼저 써 본 사람들의 화면을 모아 봤어요.

2026.10.26·사례 2

Figma 블로그 — Design Together With Code Layers on the Canvas, 2026-10-15

Figma 도움말 — Code layers in Figma Design(요금제·좌석·11월 4일까지 무료·차례로 공개)

Figma X — 코드 레이어 공개 베타 출시 영상, 2026-10-15(10월 26일 조회 6,706,822)

Figma가 10월 15일 Config India에서 코드 레이어 공개 베타를 알리며 올린 35초짜리 영상은, Figma 공식 X에서 조회 670만 회를 넘겼어요(10월 26일 확인). 일주일 뒤 Figma는 코드 레이어를 쓰는 네 가지 방법을 10분짜리 영상으로 따로 올렸어요. 20년 넘게 디자인해 온 Murat Bayral(유튜브 02ui)은 자기 회사 블로그로 먼저 써 본 뒤 "this thing is basically changing Figma entirely(이건 사실상 피그마를 통째로 바꾸고 있어요)"라고 했어요.

캔버스에 올릴 수 있는 것은 피그마 프레임, 깃허브 저장소, 내 컴퓨터의 폴더, Chrome 확장으로 가져온 웹페이지, 코딩 에이전트가 Figma와 연결해(Figma MCP) 보낸 코드예요. 올린 화면은 직접 눌러 보고, 복제해 여러 안을 나란히 견주고, 그 위에 댓글을 달 수 있어요. 고친 코드는 깃허브 브랜치에 올리고 풀 리퀘스트를 만들어 팀 검토를 받을 수 있어요.

지금은 Full 좌석과 Design 파일 편집 권한이 있는 사람이 쓸 수 있어요. Figma 도움말에 따르면 유료 요금제에서는 11월 4일까지 코드 레이어를 만들고 고치는 데 AI 크레딧이 들지 않아요. 몇 주에 걸쳐 차례로 열리고 있어서, 같은 팀 안에서도 메뉴가 늦게 보이는 사람이 있어요. 깃허브에서 가져오려면 Figma를 깃허브 계정이나 조직에 연결해야 하고, 가볍게 만든 시제품용 코드만 되며, 불러오는 데 10분 넘게 걸리기도 해요. 코드를 만들고 고치는 일은 캔버스 안의 Figma 에이전트가 맡아요.

Reference 01튜토리얼 · 20년 넘게 디자인해 온 두 사람이 운영하는 유튜브 02ui

피그마에서 손본 크기와 배치를, 버튼 하나로 블로그 사이트의 코드 레이어에 되돌렸어요

02ui의 Murat Bayral은 Figma를 깃허브에 연결하고 자기 회사 블로그 저장소(zero to UI blog main)를 캔버스로 불러왔어요. 캔버스 안에서 실제 사이트처럼 스크롤이 됐고, 다크 테마까지 그대로 떴어요. Murat은 "it is as same as my website(제 사이트와 똑같아요)"라고 했어요.

이어서 'new hero section'이라는 새 브랜치를 만들고, Extract designs로 화면을 피그마 디자인 레이어로 꺼냈어요. 꺼낸 화면을 보고는 "This is exactly the auto layout structure that I initially built on Figma(처음 피그마에서 짰던 오토 레이아웃 구조 그대로예요)"라고 했어요. 그다음 요소의 크기와 배치를 내용에 맞추기(hug)·고정(fixed)·채우기(fill)로 바꾸고, Update code layer를 눌러 그 수정을 코드 레이어에 반영했어요.

이 작업은 새 브랜치에서 한 것이고, 실제 사이트에 내보내는 장면은 영상에 나오지 않아요.

Reference 02제작사 공식 시연 · Figma 공식 블로그가 10월 23일 소개한 Cox Automotive의 쓰임

디자이너가 아닌 제품 관리자가, 한 시간쯤 손을 들여 시제품 19개 버전을 만들었어요

Cox Automotive에서 VinSolutions CRM을 맡은 제품 관리자 Lindsay Brechler는 딜러용 새 기능의 등급안 네 가지를 이해관계자와 맞추려고, 큰 HTML 시제품을 코드 레이어로 가져와 Figma 에이전트로 다듬었어요. 최종본은 HTML 파일 하나로 내보내 사내 사이트에 올렸어요.

Figma 블로그에 실린 본인의 추정으로는 19개 버전을 손 작업 약 1시간에 만들었고, "at least 10 times more efficient, or about 90% time saved(적어도 10배 효율적이고, 시간을 90% 정도 아꼈어요)"라고 했어요. 디자이너가 아닌 자기가 피그마에서 직접 만들 때와 견준 숫자이고, 그때 얼마나 걸렸는지는 블로그에 나오지 않아요. Brechler는 "I'm not a designer, I'm a product manager.(저는 디자이너가 아니라 제품 관리자예요)"라고 덧붙였어요.

Figma 블로그에는 결과물 링크가 없고 캔버스 화면만 실렸어요.

사람들의 반응

좋았다는 반응

“if you extract the design and do lots of iterations for hours, you don't spend any credits. That's the most powerful part of this code layers.”
디자인을 꺼내서 몇 시간 동안 여러 번 고쳐도 크레딧이 들지 않아요. 그게 이 코드 레이어에서 가장 강력한 부분이에요.
Murat Bayral · YouTube 02uiyoutube.com
“molto molto utile”
아주아주 쓸모 있어요
실제 웹사이트를 코드 레이어로 가져오면서 버튼에 마우스를 올렸을 때와 눌렀을 때의 상태까지 함께 가져온 것을 두고 한 말이에요.
Matteo Salvati · YouTubeyoutube.com
“This is insane”
이건 미쳤네요
@LPesthectics · Figma 공식 YouTube 댓글youtube.com

아쉬웠다는 반응

“si è inchiodato … ho notato che tende spesso a bloccarsi”
멈춰 버렸어요 … 자주 멈추는 경향이 있더라고요
Chrome 확장으로 웹사이트를 가져와 붙여 넣은 뒤 시험하며 한 말이에요.
Matteo Salvati · YouTubeyoutube.com
“Non sembrava funzionare bene”
잘 작동하는 것 같지 않았어요
화면에서 요소 하나만 골라 디자인으로 꺼내는 기능을 시험하며 한 말이에요.
Matteo Salvati · YouTubeyoutube.com
“right now it is in beta mode, so I spent 20 AI credits. I said maybe it would be free, but it was not anyhow.”
지금은 베타 모드예요. 그래서 AI 크레딧 20을 썼어요. 무료일지도 모른다고 말했는데, 어쨌든 무료가 아니었어요.
공개 베타 이튿날(10월 16일) 올린 영상에서, 꺼낸 디자인의 수정을 코드 레이어에 한 번 반영(Update code layer)한 뒤 한 말이에요. Figma 도움말은 유료 요금제에서 11월 4일까지 만들고 고치는 데 크레딧이 들지 않는다고 적었는데, 이때 크레딧이 왜 빠졌는지는 영상에 나오지 않아요.
Murat Bayral · YouTube 02uiyoutube.com
“it is clear that Figma AI credits are very expensive and runs out fast”
Figma AI 크레딧이 아주 비싸고 빨리 닳는다는 건 분명해요
Figma Make와 Figma 에이전트를 써 왔다고 밝힌 시청자의 댓글이에요.
@basantrajmohan8716 · 02ui YouTube 댓글youtube.com
“The main problem with this feature is that I can only use Figma LLM”
이 기능의 가장 큰 문제는 Figma의 언어 모델만 쓸 수 있다는 거예요
@TheKarsonE · Figma 공식 YouTube 댓글youtube.com
“Ehm 99.9% of real design systems need compilation at build-time.”
음, 실제 디자인 시스템의 99.9%는 빌드할 때 컴파일이 필요해요.
캔버스에서 React 코드가 돌아간다고 정리한 Florian Gampert의 LinkedIn 글에 단 댓글이에요. 회사가 실제로 쓰는 디자인 시스템을 코드 레이어에 그대로 올려 돌리기는 어렵다는 지적이에요. Figma 도움말도 모든 저장소가 되지는 않고, 일부 프로젝트는 고쳐야 돌아간다고 적었어요.
Mattia Astorino · LinkedInlinkedin.com
“I dont think this is reliable for high scale applications, can be for demo purposes tho”
규모가 큰 앱에는 믿고 쓰기 어려울 것 같아요. 시연용으로는 될 수 있겠지만요
@yashanand2308 · Figma 공식 YouTube 댓글youtube.com

시작하는 법

Figma Design 파일에서 프레임 하나를 고르고, 코드 레이어의 Figma 에이전트에 아래 요청을 붙여 넣으면 돼요. Full 좌석과 편집 권한이 있어야 하고, 편집 권한이 있는 사람은 누구나 코드를 읽을 수 있으니 API 키는 넣지 마세요.

시작 요청
이 글에 Figma 코드 레이어로 해낸 사례가 있어요: https://www.working-ref.com/reference/figma-code-layers-2026-10 지금 고른 프레임을 보고, 내 일에 맞춰 코드 레이어로 해 볼 만한 것 세 가지를 제안해 줘. 웹페이지에서 시작하는 안은 내 사이트나 내가 권리를 가진 페이지로만 잡아 줘. 내가 하나를 고르면 바로 시작해 줘. 고를 게 없으면 이 프레임을 눌러 볼 수 있는 코드 레이어로 바꾸고, 버튼에 마우스를 올렸을 때와 눌렀을 때의 상태를 넣어 줘.

이 레퍼런스 공유하기

매주 1회 · 무료

이 레퍼런스가 도움이 되셨나요?

매주 쏟아지는 AI 소식 중 BEST
딱 3개만, 메일함에 꽂아 드릴게요

Work Smarter with AI

구독 완료 다음 호부터 메일함에서 만나요.