Figma Config 2026 공부 정리 | 캔버스에 코드가 들어온다는 게 뭔지

Figma가 Config 2026에서 한꺼번에 여러 발표를 내놨다. Figma Motion, Code Layers, Agent 업데이트, Shader Fills 같은 것들이었다. Motion은 이미 따로 정리했고, 이번엔 Code Layers와 Agent 쪽이 더 궁금해서 발표 글을 다시 읽어봤다.

Code Layers는 발표 제목만 봤을 때 “캔버스에 코드를 얹는 기능?” 정도로 읽혔는데, 실제로 어떤 의미인지가 잘 안 와닿아서 조금 더 파봤다.

1️⃣ 이게 뭐냐?

Code Layers는 Figma 디자인 레이어를 코드 레이어로 전환해 캔버스 위에서 직접 작업하는 기능이다. 기존엔 디자인은 Figma, 코드는 별도 IDE에서 하고 핸드오프 단계에서 이어붙이는 방식이었다. Code Layers가 생기면 Figma 캔버스 안에 코드를 올려두고 일반 프레임처럼 나란히 비교하면서 탐색할 수 있다. 7월부터 베타로 열린다.

Dev Mode와도 연결되어 있어서 코드를 수정한 뒤 Figma 디자인으로 다시 가져오는 것도 가능하다고 읽혔다. 단방향 핸드오프가 아니라 왕복이 가능한 구조를 지향하는 것 같다.

Config 2026에서 발표된 Generative Plugins도 같이 눈에 걸렸다. 플러그인을 만들 때 코드 없이 지시사항만 설명하면 AI가 플러그인을 생성해주는 방식이라고 한다. 자기 워크플로우에 맞는 도구를 직접 만들 수 있다는 건데, 지금까지 플러그인 제작이 개발자 쪽의 일로 느껴졌다면, 이 방향이 그 경계를 바꿔놓을 가능성이 있어 보였다.

👉🏻 Code Layers와 Generative Plugins, 둘 다 “Figma 안에서 코드를 다루는 영역”을 넓히는 방향으로 읽혔다.

2️⃣ 내가 든 생각

Code Layers를 읽으면서 계속 들었던 질문이 있었다. “디자이너가 캔버스에서 코드 레이어를 편집하면, 실제 서비스 코드와는 어떻게 연결되는 거지?” 문서에는 탐색과 방향 확인 용도라는 뉘앙스가 있었는데, 구체적인 연결 구조는 직접 닿아보지 않은 입장에서는 가늠이 어려웠다. 내가 이해한 바로는 IDE를 대체하는 게 아니라 코드로 빠르게 방향을 잡는 탐색 도구에 가까운 것 같다. 맞게 이해한 건지는 솔직히 잘 모르겠다.

Figma Agent 업데이트도 흥미로웠다. Skills라는 개념이 새로 생겼는데, 반복적인 지시사항을 재사용 가능한 묶음으로 패키징해두는 방식이다. Notion, Slack, GitHub 같은 외부 도구와 연결하는 Connectors, 리서치나 브리프 같은 자료를 에이전트에게 첨부할 수 있는 Attachments도 추가됐다. 프롬프팅을 반복하는 게 아니라, 팀 전체의 작업 맥락을 에이전트가 가져다 쓰는 방향처럼 읽혔다. 이게 실제로 잘 작동하면 디자인 작업에서 에이전트를 쓰는 방식이 꽤 달라질 것 같다는 인상이 들었다.

코드를 배우는 중인 입장에서, 이번 발표가 흥미로웠던 건 기능 자체보다 “디자인 도구가 코드를 다루기 시작한다면 어디서 배우고 어디서 작업하는지의 기준이 달라지는 건지”라는 질문이 생겨서였다.

💡 여기서 드는 질문? Code Layers로 디자이너가 직접 코드 레이어를 다루게 되면, 디자이너와 프론트엔드 개발자 사이의 역할 분담은 어떻게 달라질까?

⭐️ 마지막으로, Config 2026을 공부하며 든 생각

결론까지는 못 내렸지만, 이번 Config 2026을 훑으면서 공통으로 읽힌 건 “도구의 경계를 어디에 두는가”라는 질문에 가까운 것 같다. 코드, 애니메이션, 외부 도구 연동이 하나씩 캔버스 안으로 들어오고 있다.

디자이너-개발자 전환기 입장에서 봤을 때 이 방향이 어떤 의미인지는, 공부만 해본 지금 단계에서는 아직 잘 정리가 안 된다. Code Layers 베타가 열리면 실제 후기들이 좀 더 나올 것 같고, 그걸 보면서 다시 정리해볼 것 같다.

---

참고 원문: Config 2026: New materials, new tools and a more expressive canvas