Figma의 Code Layers 업데이트, 핵심은 '디자인 캔버스의 확장'이다

Figma가 Config 2026에서 발표한 업데이트의 핵심은 개별 기능의 추가가 아니라, 캔버스의 역할 변화입니다. 2026년 6월 24일 공개된 발표에서 Figma는 새로운 캔버스 재료로 “모션, 깊이, 텍스처, 코드”를 제시했습니다.¹

그중 Code Layers는 디자인과 코드가 만나는 방식을 가장 직접적으로 보여주는 변화입니다. 기존처럼 디자인을 만든 뒤 개발로 넘기는 흐름을 보완해, 같은 캔버스에서 인터랙션 아이디어를 더 빠르게 실험하고 판단할 수 있게 하려는 업데이트입니다.

Code Layers는 무엇을 바꾸나

Code Layers는 Figma 캔버스 위에서 코드 기반 인터랙션을 탐색하는 기능입니다. 디자인에서 시작할 수도 있고, 기존 코드베이스에서 출발할 수도 있습니다. 사용자는 프롬프트로 여러 방향의 인터랙션을 만들고, 비교하고, 세부 동작을 조정할 수 있습니다.¹

여기서 중요한 판단 기준은 “완성된 프로덕션 코드 작성 도구인가”가 아닙니다. 현재 의미는 오히려 아이디어 검증에 가깝습니다. 디자이너, 개발자, PM이 같은 화면을 보며 동작을 빠르게 시도하고, 어떤 방향이 제품 경험에 맞는지 논의할 수 있다는 점이 실무적 가치입니다.

Code Layers는 현재 베타 신청 방식으로 제공됩니다.¹ 따라서 당장 모든 팀의 표준 워크플로에 넣기보다는, 인터랙션이 중요한 화면이나 프로토타입 검증 과정에서 먼저 시험해 볼 만한 기능으로 보는 편이 현실적입니다.

모션, 3D, 텍스처가 같은 흐름으로 묶인다

Code Layers만 따로 보면 “코드를 캔버스에 넣는 기능”처럼 보일 수 있습니다. 하지만 이번 업데이트의 방향은 더 넓습니다. Figma는 정적인 화면 설계에서 벗어나, 움직임과 깊이, 시각 효과까지 같은 환경에서 다루려 합니다.

Figma Motion은 타임라인을 직접 조정하거나 Figma 에이전트에게 요청해 애니메이션을 만들 수 있게 합니다.¹ 또한 재사용 가능한 애니메이션 시스템 제작을 지원하고, 개발자가 전달받을 수 있는 dev-ready 애니메이션을 목표로 합니다.¹ 이는 애니메이션을 일회성 장식이 아니라 제품 시스템의 일부로 관리하려는 접근에 가깝습니다.

3D transforms는 디자인과 이미지에 3D 차원감과 깊이를 더하는 기능입니다.¹ 여기에 모션을 결합하면 객체가 현실처럼 움직이는 표현을 만들 수 있습니다.¹ 즉, 화면의 상태뿐 아니라 상태가 바뀌는 과정까지 더 구체적으로 설계할 수 있습니다.

Shaders도 같은 맥락에 있습니다. 사용자가 원하는 효과를 설명하면 Figma 에이전트가 공유 가능한 텍스처를 생성합니다.¹ 복잡한 시각 효과를 별도 도구로 옮겨 실험하기보다, 팀이 보는 캔버스 안에서 빠르게 확인할 수 있게 되는 것입니다.

AI의 역할은 생성보다 맥락 연결에 가깝다

이번 발표에서 AI는 단순히 이미지를 만들거나 문구를 제안하는 도구에 머물지 않습니다. Figma는 Notion, Granola, Excel, GitHub 같은 도구를 AI 어시스턴트에 연결할 수 있게 했고, 프롬프트로 맞춤형 플러그인을 만드는 기능도 추가했습니다.¹

이 변화의 의미는 AI가 팀의 작업 맥락에 더 가까워진다는 데 있습니다. 파일, 참고 자료, 코드베이스, 반복 작업을 연결할수록 AI는 단순 생성 도구가 아니라 캔버스 안의 보조 작업자로 기능할 가능성이 커집니다. Code Layers 역시 이 흐름 안에서 이해하는 편이 자연스럽습니다. 코드를 별도 단계로 분리하기보다, 디자인 판단의 재료로 캔버스에 끌어오는 방식입니다.

팀이 확인해야 할 것은 기능보다 워크플로다

이번 Code Layers 업데이트의 결론은 명확합니다. Figma는 디자인과 코드 사이의 전달 도구를 넘어, 둘이 함께 실험되는 작업 공간이 되려 합니다.

다만 실무에서의 가치는 기능의 화려함보다 팀의 흐름에 맞는지에 달려 있습니다. 다음 기준으로 검토해 볼 수 있습니다.

• 인터랙션 아이디어를 빠르게 비교해야 하는 화면이 있는가

• 디자이너와 개발자가 같은 기준으로 모션과 동작을 검토할 수 있는가

• 기존 디자인 시스템이나 코드베이스와 연결했을 때 반복 작업이 줄어드는가

• 개발 리뷰 전에 동작의 의도를 더 명확히 공유할 수 있는가

Code Layers와 관련 기능들은 Figma 캔버스를 더 동적인 제품 사고의 공간으로 확장합니다. 지금 필요한 것은 모든 기능을 즉시 도입하는 것이 아니라, 팀의 병목이 어디에 있는지 파악하고 그 지점에서 캔버스 기반 실험이 실제로 시간을 줄여 주는지 확인하는 일입니다.

참고

¹Figma product news and release notes