Figma가 코드 레이어·모션·셰이더 지원과 AI 기반 커스텀 플러그인 기능을 도입

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

TL;DR

Figma가 코드 레이어, 모션·셰이더 지원, 그리고 AI 기반 커스텀 플러그인 생성 기능을 도입해 디자인 캔버스에서 코드와 시각적 표현을 더 밀접하게 결합할 수 있게 되었다. 이 업데이트는 기존의 별도 툴에서 애니메이션과 셰이더를 만들고 변환하던 과정을 캔버스 내부로 끌어들여 프로토타이핑 흐름을 단축한다. 또한 Weavy 인수로 확보한 노드 기반 워크플로를 캔버스에 통합하고 Claude Code와 Codex 같은 코드 보조 에이전트와의 연계를 강화해 디자인-개발 간 핸드오프를 부드럽게 만든다.

새로운 코드 레이어는 레포지토리 복제와 코드에서 디자인 레이어로의 흐름 추출을 허용해 사용자가 빠르게 아이디어를 실험하고 시각적 테스트를 실행할 수 있도록 설계되었다. 애니메이션, 전환, 3D 변환과 같은 모션 요소는 이제 외부 변환 없이 캔버스 내에서 구성할 수 있으며 AI는 셰이더 효과와 채우기(fill)를 생성해 디자인 자산을 보강한다. 향후 업데이트로 Weavy 워크플로를 Figma 내부에서 직접 생성할 수 있게 되어 다중 모델 비교와 출력물 선택이 더 쉬워진다.

AI 어시스턴트의 '스킬' 기능을 통해 사용자는 텍스트 프롬프트로 반복 가능한 작업을 정의하고 Notion, Granola, Excel, GitHub 같은 외부 도구를 연결해 에이전트가 문맥을 가진 작업을 수행하도록 할 수 있다. 커스텀 플러그인 생성 기능은 레이아웃 생성기나 벡터 경로 추적기 같은 도구를 프롬프트로 설계해 개발 역량이 제한적인 디자이너도 반복 도구를 만들 수 있게 한다. 이 변화는 초기 반복과 프로토타이핑 속도를 크게 올릴 수 있지만, 제품 수준의 품질 높은 코드가 필요한 단계와의 경계는 여전히 존재한다.

섹션별 상세

Figma는 코드 레이어를 캔버스에 직접 추가해 레포지토리 복제와 코드로부터 디자인 레이어를 추출하는 워크플로를 제공하며, 사용자는 코드 입력을 통해 시각적 레이어를 생성하고 캔버스에서 바로 테스트 가능한 출력물을 얻을 수 있다. 이 기능은 디자이너와 엔지니어가 초기 아이디어를 빠르게 반복하는 데 초점을 두며, Figma의 최고 제품책임자는 멀티플레이어 캔버스 환경에서는 코드 품질보다 탐색 속도가 중요하다고 설명했다. 캔버스 내 코드 레이어는 기존에 분리돼 있던 디자인-코드 핸드오프 과정을 줄여 협업 반복 주기를 단축시키는 효과가 기대된다.

캔버스 좌측에 디자인, 중앙에 프로토타입 UI, 우측에 코드 에디터가 동시에 보이는 스크린샷이다. — Screenshot이 이미지는 코드 레이어 기능이 디자인 캔버스와 코드 편집 환경을 나란히 배치해 동시 작업을 가능하게 하는 점을 시각적으로 보여준다. 코드에서 UI 흐름을 추출해 캔버스에 배치하고 즉시 시각적 테스트를 진행하는 사용 사례를 직접적으로 전달하므로 본문 내용의 핵심 기능을 이해하는 데 도움이 된다.

애니메이션과 전환, 3D 변환에 대한 직접적인 지원이 추가되어 디자이너가 외부 툴에서 만든 애니메이션을 변환할 필요가 없어졌고, AI를 활용해 셰이더 효과와 채우기를 생성하는 기능이 도입되었다. 입력으로는 디자이너의 속성 설정이나 프롬프트가 들어가고 내부 엔진이 모션 계산·변환 또는 셰이더 코드를 생성해 캔버스에 적용하는 출력물을 만든다. 이 변경은 프로토타입 제작 단계의 도구 이동을 줄여 시각적 실험을 빠르게 수행할 수 있게 하는 것이 핵심이다.

Figma는 지난해 인수한 Weavy의 노드 기반 워크플로를 캔버스와 더 긴밀하게 통합할 계획을 밝히며, 향후 업데이트에서 사용자가 Figma 내부에서 직접 Weavy 워크플로를 생성할 수 있게 한다. Weavy 워크플로는 서로 다른 모델과 처리 단계를 연결해 출력물을 비교하는 구조로, 입력으로 여러 모델의 결과를 받아 비교 및 선택 가능한 출력물을 생성한다. 이 통합은 디자인 실험에서 다양한 모델 출력을 한 곳에서 평가할 수 있게 해 반복 실험의 효율을 높인다.

AI 어시스턴트의 스킬 기능 확장으로 사용자는 텍스트 프롬프트로 반복 가능한 스킬을 정의하고 Notion, Granola, Excel, GitHub 같은 외부 도구를 연결하거나 파일을 첨부해 더 많은 문맥을 에이전트에 제공할 수 있다. 입력된 프롬프트와 연결된 외부 리소스가 에이전트의 처리 과정에 사용되며, 결과는 캔버스 상의 자동 작업이나 리포트 형태로 출력될 수 있다. 이러한 스킬과 커스텀 플러그인 생성 기능은 반복적 검사나 레이아웃 생성 같은 작업을 자동화해 팀의 생산성을 높이지만, 프로덕션 품질의 코드와 캔버스 실험용 코드 사이의 역할 분리는 유지될 필요가 있다.

스킬과 명령어 목록을 선택하는 UI와 컨텍스트 도움말이 함께 보이는 인터페이스 캡처이다. — Screenshot이 이미지는 사용자가 슬래시 명령 형태의 스킬을 선택해 반복 작업을 실행하고, 각 스킬에 대한 설명을 통해 어떤 규칙이나 접근 방식이 적용되는지를 확인할 수 있음을 보여준다. 이는 본문에서 설명한 텍스트 프롬프트 기반 스킬과 외부 도구 연결이 실제로 캔버스 내에서 어떻게 드러나는지를 설명하는 근거가 된다.

실무 Takeaway

코드 레이어를 통해 레포지토리나 코드 스니펫을 캔버스에 직접 넣어 디자인-코드 간 초기 핸드오프를 단축할 수 있으므로 프로토타입 반복 속도가 증가한다.
모션·셰이더와 같은 시각 효과를 캔버스 내에서 AI로 생성하면 외부 툴 전환 없이 다양한 시각적 대안을 빠르게 실험할 수 있어 디자인 탐색의 비용과 시간이 줄어든다.
텍스트 프롬프트로 정의 가능한 AI 스킬과 외부 도구 연동을 활용하면 반복 검사와 데이터 결합 작업을 자동화할 수 있어 협업 흐름의 문맥 전달과 작업 효율이 향상된다.