Figma adds code layers, support for animations, more AI features in new update

개요

Figma의 이번 업데이트는 디자인 작업 흐름에 코드 통합, 애니메이션 및 셰이더 지원, AI 기반 기능 확장 등을 도입하여 협업 및 생산성을 향상시킨다.

주요 내용

• 코드 레이어(Code Layers) 도입: 디자인 캔버스에 직접 코드를 삽입하고, 리포지토리 복제, 코드 흐름 추출 등을 통해 디자이너, 제품 관리자, 개발자 간의 협업 및 아이디어 반복을 용이하게 한다.
• 애니메이션 및 3D 트랜스폼 지원 강화: 외부 소프트웨어 없이 Figma 내에서 직접 애니메이션, 전환 효과, 3D 트랜스폼을 구현할 수 있게 되었다.
• AI 기능 확장: AI를 활용한 에셋 생성, 셰이더 효과 및 채우기 적용 기능이 추가되었으며, 텍스트 프롬프트를 통해 AI 에이전트가 사용할 반복 가능한 스킬을 생성하고 Notion, Excel, GitHub 등 외부 도구와 연동하여 AI 에이전트의 컨텍스트를 풍부하게 할 수 있다.
• 커스텀 플러그인 생성: 텍스트 프롬프트를 사용하여 레이아웃 생성기, 벡터 경로 추적기 등 커스텀 플러그인을 개발할 수 있는 기능이 추가되었다.
• Weavy 통합: 노드 기반 도구인 Weavy의 워크플로우를 Figma 내에서 직접 생성하고 통합할 수 있게 될 예정이다.

시사점

Figma의 코드 레이어 및 AI 기능 강화는 디자인과 코드 개발 간의 경계를 허물어 협업 효율성을 극대화하고, 디자이너가 프로덕션 코드의 품질에 대한 부담 없이 창의적인 아이디어를 빠르게 탐색하고 구현할 수 있는 환경을 제공한다.