Figma, 디자인 캔버스에 GitHub 통합 — Code Layers로 코드와 설계의 경계 바뀌나

Figma의 새 기능 Code Layers는 2년 전이었다면 불가능해 보였을 일을 해낸다. GitHub 저장소를 디자인 캔버스에 직접 클론할 수 있게 된 것이다. 저장소가 캔버스에 올라오면 기존 코드에서 편집 가능한 디자인 프레임을 추출하고, 시각적으로 수정한 뒤, 변경 사항을 저장소에 다시 동기화할 수 있다. 실시간 협업 기능을 그대로 유지한 채, 단 하나의 Figma 파일 안에서 모두 가능하다. 디자인과 개발이 같은 창에 존재한다.

수년간 핸드오프 노트를 작성하고, Jira 티켓에 스펙을 복사하거나 Zeplin 링크를 엔지니어링 팀에 보내온 디자이너들에게 Code Layers는 디자인과 코드의 대화가 일어나는 장소를 바꾼다. Figma의 변경 사항은 기반 코드를 업데이트하고, 코드의 변경 사항은 디자인 레이어를 업데이트한다. 두 분야 사이의 다리는 언제나 컨텍스트 전환을 요구했다. 이제 그 전환의 폭이 좁아졌다.

Figma Motion, 애니메이션을 출시 준비된 코드로 전환

Figma는 캔버스에 직접 내장된 키프레임 기반 애니메이션 타임라인 Motion도 발표했다. 디자이너들은 타임라인과 프리셋 라이브러리로 트랜지션, 호버 상태, 스크롤 애니메이션을 만들고 일곱 가지 형식으로 내보낼 수 있다. CSS, JSON, React, MP4, WebM, 애니메이션 SVG, GIF가 그것이다. Figma에서 디자인한 로딩 애니메이션은 더 이상 개발자가 해석해야 하는 참고 문서가 아니다. 그 자체가 애니메이션이다.

세 번째 주요 발표는 Shader Effects였다. 브라우저의 최신 그래픽 표준인 WebGPU로 구동되는 GPU 가속 필로, 디자이너가 수학적으로 생성된 복잡한 시각 텍스처를 Figma 레이어에 직접 적용할 수 있게 해준다. Figma의 AI 에이전트는 텍스트 설명이나 업로드한 이미지에서 이러한 맞춤형 셰이더 필을 생성할 수 있다. ‘부드러운 파란 간섭 패턴을 가진 서리 낀 유리’라고 입력하면 캔버스는 실시간으로 렌더링되고 인터랙티브하게 조정 가능한 결과물을 만들어낸다.

AI 에이전트, 스킬·도구·외부 연결 추가

AI 에이전트 자체도 상당히 확장됐다. 이제 자연어 프롬프트에서 재사용 가능한 ‘스킬’을 만들 수 있다. API 지식 없이도 반복적인 디자인 작업을 자동화하는 맞춤형 도구다. Notion, GitHub, Microsoft Excel을 포함한 외부 서비스에 직접 연결도 지원한다. 2026년 하반기 업데이트에서는 Figma가 작년에 인수한 워크플로 빌더 Weavy가 추가돼 디자인 파일 내 노드 기반 자동화가 가능해진다.

모든 기능이 오늘부터 사용 가능한 것은 아니다. Code Layers는 얼리 액세스 단계로, 신청 접수는 2026년 7월부터다. 유료 Figma 플랜의 Full 시트가 필요하다. Shader Effects와 강화된 AI 에이전트는 유료 플랜에서 이미 사용 가능하다. Figma Motion은 Full 시트 보유자를 대상으로 지금 바로 이용할 수 있으며, Code Layers의 일반 출시는 2026년 하반기로 예정돼 있다.

코드 에디터 작업 흐름을 흡수하려는 Figma의 야심은 현실적인 질문과 맞닥뜨린다. 코드를 작성하는 것과 인터페이스를 설계하는 것은 다른 인지 활동이며, 지난주 SpaceX가 600억 달러에 인수한 AI 코드 에디터 Cursor는 디자이너가 아닌 엔지니어 사이에서 사용자층을 쌓아왔다. 두 커뮤니티가 공유 캔버스를 중심으로 수렴할지 여부는 아직 열린 질문으로 남아 있다.

태그: GitHub, Code Layers, Config 2026, Cursor, Figma, 디자인 도구