🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 요약

Figma는 새 업데이트에서 코드 레이어, 애니메이션·3D 변환·셰이더 지원, AI 기반 반복 작업·플러그인 생성 기능을 추가하며 디자인과 개발의 연결을 강화했다.

📌 핵심 요약

• Figma는 수요일 공개한 업데이트를 통해 협업 캔버스에 코드 레이어를 추가하고, 모션·셰이더·AI 기능을 확장했다고 밝혔다.
• 새 코드 레이어는 팀이 저장소를 복제하고 코드에서 흐름을 추출해 디자인 레이어로 가져와 테스트할 수 있도록 설계됐다.
• Figma는 지난해 AI 프롬프트 기반 프로토타이핑 도구인 Figma Make를 공개했고, Claude Code 및 Codex와의 통합을 통해 디자인과 코딩 간 인수인계를 개선해 왔다.
• 이번 업데이트로 디자이너는 외부 소프트웨어에서 애니메이션을 만들고 변환하지 않아도 Figma 안에서 애니메이션, 전환, 3D 변환을 직접 다룰 수 있게 됐다.
• Figma는 AI로 에셋과 셰이더 효과·채우기를 만들 수 있게 하고, AI 에이전트용 반복 스킬, 외부 도구 연결, 프롬프트 기반 맞춤 플러그인 생성 기능도 추가했다.

🧩 주요 포인트

1. Figma는 수요일 공개한 업데이트를 통해 협업 캔버스에 코드 레이어를 추가하고, 모션·셰이더·AI 기능을 확장했다고 밝혔다.
2. 새 코드 레이어는 팀이 저장소를 복제하고 코드에서 흐름을 추출해 디자인 레이어로 가져와 테스트할 수 있도록 설계됐다.
3. Figma는 지난해 AI 프롬프트 기반 프로토타이핑 도구인 Figma Make를 공개했고, Claude Code 및 Codex와의 통합을 통해 디자인과 코딩 간 인수인계를 개선해 왔다.
4. 이번 업데이트로 디자이너는 외부 소프트웨어에서 애니메이션을 만들고 변환하지 않아도 Figma 안에서 애니메이션, 전환, 3D 변환을 직접 다룰 수 있게 됐다.
5. Figma는 AI로 에셋과 셰이더 효과·채우기를 만들 수 있게 하고, AI 에이전트용 반복 스킬, 외부 도구 연결, 프롬프트 기반 맞춤 플러그인 생성 기능도 추가했다.

🧠 상세 정리

1. 업데이트의 큰 방향

TechCrunch 기사에 따르면 Figma는 이번 업데이트에서 코드, 모션, AI 기능을 한꺼번에 확장했다. 핵심은 협업 캔버스 안에 코드 레이어를 넣고, 애니메이션과 전환, 3D 변환, 셰이더 같은 시각 효과를 더 직접적으로 다루게 하는 것이다. 또한 AI를 활용해 에셋을 만들거나 반복 작업을 자동화하고, 프롬프트로 맞춤형 플러그인을 만드는 기능까지 포함됐다. 기사 전체의 흐름은 Figma가 디자인 도구를 단순한 화면 설계 공간에서 개발·프로토타이핑·자동화가 함께 이뤄지는 작업 공간으로 넓히고 있다는 설명에 집중한다.

2. 코드 통합의 누적된 흐름

Figma는 이전부터 자사 도구 안에 코드 통합을 가져오려는 작업을 이어 왔다고 기사에서 설명한다. 지난해에는 AI 프롬프트 기반 프로토타이핑 도구인 Figma Make를 공개했고, 이후 Claude Code와 Codex 통합을 출시해 코딩과 디자인 사이의 인수인계를 개선하려 했다. 이번 업데이트의 코드 레이어는 그 연장선에 있는 기능으로 소개된다. 즉 갑자기 별개의 기능이 추가된 것이 아니라, 디자인 결과물과 실제 코드 사이의 거리를 줄이려는 Figma의 기존 방향이 협업 캔버스 내부 기능으로 구체화된 것이다.

3. 협업 캔버스에 들어온 코드 레이어

이번 업데이트에서 Figma는 코드 레이어를 협업 캔버스에 직접 추가했다. 기사에 따르면 이 기능은 팀이 저장소를 복제하고, 코드에서 흐름을 추출해 디자인 레이어로 가져온 뒤 테스트할 수 있도록 돕는다. 이는 개발자가 만든 흐름이나 코드 기반 구조를 디자인 맥락에서 확인하고 실험할 수 있게 하는 방식으로 제시된다. Figma의 최고제품책임자 유키 야마시타는 이 기능이 디자이너, 제품 관리자, 프로그래머가 생산용으로 완벽한 코드를 만드는 데 집중하기보다 아이디어를 반복적으로 탐색하는 데 도움을 준다고 설명했다.

4. 아이디어 탐색을 위한 멀티플레이어 환경

야마시타는 Figma의 멀티플레이어 캔버스가 코드 품질을 엄격히 따지지 않아도 되는 환경이라는 점을 강조했다. 그의 설명에 따르면 빠르게 탐색하거나 여러 방향을 실험해야 할 때, 사용자는 공간적인 방식으로 아이디어를 펼칠 수 있다. 이 발언은 코드 레이어가 최종 배포용 코드를 생산하는 기능이라기보다, 다양한 직군이 같은 캔버스에서 빠르게 시도하고 검토하는 기능으로 설계됐다는 점을 보여준다. 기사에서는 이 변화가 디자이너뿐 아니라 엔지니어와 제품 관리자에게도 다른 작업 행동을 만들어낼 수 있다는 Figma 측 기대를 함께 전한다.

5. 애니메이션, 전환, 3D 변환의 내장 지원

Figma는 이번 업데이트에서 애니메이션, 전환, 3D 변환 지원도 추가했다. 기존에는 디자이너가 다른 소프트웨어에서 애니메이션을 만든 뒤, Figma가 이해할 수 있는 코드 형태로 변환해야 했다고 기사에서 설명한다. 이제는 이러한 애니메이션과 전환을 Figma 안에서 직접 통합할 수 있게 됐다. 여기에 AI로 일부 에셋을 만들 수 있는 기능도 포함됐고, AI를 통해 셰이더 효과와 채우기를 추가하는 지원도 새롭게 더해졌다.

6. Weavy 통합과 AI 에이전트·플러그인 확장

기사 후반부는 Figma의 AI 기능 확장에 초점을 맞춘다. Figma는 지난해 노드 기반 도구 Weavy를 인수했는데, 이 도구는 디자이너가 여러 모델을 통해 워크플로를 실행하고 결과물을 비교할 수 있도록 돕는 역할을 해 왔다. Figma는 두 앱의 통합을 더 긴밀히 추진하고 있으며, 올해 말 출시될 업데이트에서는 사용자가 Figma 안에서 Weavy 워크플로를 직접 생성할 수 있게 될 예정이다. 또한 사용자는 텍스트 프롬프트로 AI 에이전트가 사용할 반복 가능한 스킬을 만들고, Notion, Granola, Excel, GitHub 같은 도구를 연결하거나 파일을 첨부해 AI 봇에 더 많은 맥락을 제공할 수 있다. 여기에 레이아웃 생성기나 벡터 경로 추적기 같은 맞춤 플러그인을 프롬프트로 만드는 기능도 추가된다.

🧾 핵심 주장 / 시사점

• 이번 업데이트의 핵심은 Figma가 디자인 파일과 개발 코드 사이의 경계를 줄이고, 같은 협업 캔버스 안에서 아이디어 실험과 구현 흐름을 함께 다루도록 만드는 데 있다.
• 코드 레이어는 생산용 코드 품질을 보장하는 기능이라기보다, 디자이너·엔지니어·제품 관리자가 빠르게 여러 방향을 탐색하고 테스트하는 협업 장치로 설명된다.
• AI 기능은 단순 생성형 보조를 넘어 반복 가능한 스킬, 외부 도구 연결, 파일 맥락 제공, 맞춤 플러그인 생성까지 확장되며 Figma 내부 작업 자동화의 범위를 넓히고 있다.

✅ 액션 아이템

• 코드 레이어 기능이 저장소 복제 후 코드 흐름을 추출해 디자인 레이어로 반영되며 팀 테스트까지 이어지는지 작업 흐름을 구체적으로 점검한다.
• 디자이너가 외부 소프트웨어 없이 Figma 내에서 애니메이션·전환·3D 변환을 처리할 때 대체 가능한 영역과 계속 외부 의존이 필요한 예외를 구분한다.
• AI로 에셋·셰이더·채우기를 생성하고 반복 스킬·맞춤 플러그인을 통해 나온 결과물을 기존 방식과 비교해 적용 범위를 정한다.

❓ 열린 질문

• 코드 레이어 도입이 디자인-개발 인수인계의 속도와 정확도에 어떤 직접 효과를 만들었는가?
• Figma Make와 Claude Code·Codex 통합이 이번 업데이트의 코드 레이어, 애니메이션, AI 기능과 실제로 어떻게 맞물리는가?
• AI 에이전트 반복 스킬이 셰이더·채우기 생성 과정에서 오류를 줄이려면 어떤 품질 판단 기준이 필요한가?