Figma Config 2026 요약
요약
Figma Config 2026에서 디자인과 개발의 경계를 허무는 혁신적인 업데이트가 발표되었습니다. 코드 레이어 도입, 네이티브 모션 모드, WebGPU 기반 셰이더 효과, 그리고 AI 기반 플러그인 생성 기능 등 디자인 워크플로우를 근본적으로 변화시킬 기능들이 소개되었습니다.
핵심 포인트
- 코드 레이어를 디자인 소재로 취급하여 디자인과 코드 간 상호 작용 강화
- 타임라인 기반의 네이티브 모션 모드로 애니메이션 설계 및 전달 최적화
- WebGPU를 활용한 셰이더 이펙트 및 필로 고차원 비주얼 표현 가능
- 프롬프트만으로 재사용 가능한 플러그인을 생성하는 디자인 에이전트 도입
2026년 6월에 개최된 Figma Config 2026에서, 디자인과 개발의 경계를 재정의하는 대규모 업데이트가 잇따라 발표되었습니다.
이 기사에서는 발표된 주요 6가지 기능을 정리하여 소개합니다.
임의의 디자인 레이어를 인터랙티브한 「코드 레이어 (Code Layer)」로 변환할 수 있는 신기능입니다.
지금까지의 「디자인인가 코드인가」라는 대립을 해소하고,
코드를 이미지나 벡터와 동등한 디자인 소재로 취급한다는 컨셉의 기능입니다.
디자인 프레임과 코드 레이어 사이를 상호 왕복하며, 여러 방향성을 검토할 수 있는 것으로 보입니다.
할 수 있는 일은 다음과 같습니다.
- 코드 레이어를 여러 개 나열하여 구현안을 비교 (디자인 프레임의 복제와 같은 감각)
- 「외관」뿐만 아니라 「실제 동작」을 확인하며 검토
- Extract designs를 통해 코드의 현황을 캔버스 상의 편집 가능한 레이어로 변환
- 코드 에디터에서 직접 편집 및 주석 추가
- 클릭 한 번으로 코드 레이어 업데이트 → 리포지토리(Repository)에 푸시
디자인·도형 그리기·개발 모드와 나란히 하는, 모션(Motion)을 캔버스 네이티브로 다루는 새로운 모드입니다.
지금까지 After Effects 등 별도의 툴이 필요했던 모션 설계를 해소하고,
애니메이션을 디자인 시스템의 일부로 관리한다는 컨셉의 기능입니다.
디자인 파일 내에서 애니메이션을 완성하여 개발자에게 그대로 전달할 수 있게 됩니다.
할 수 있는 일은 다음과 같습니다.
- 타임라인 상에서 레이어를 드래그하여 타이밍 조정
- 키프레임(Keyframe)으로 위치·스케일·회전·불투명도를 독립 제어 (자동 키프레이밍 포함)
- 페이드·이동·스케일 등의 프리셋을 중첩 적용하거나 시퀀스(Sequence) 설정
- 모션 변수로 이징(Easing)을 정의하여 여러 애니메이션에 일괄 적용
- 개발 모드에서 타이밍·이징 곡선을 검사
- CSS / JSON / React로 직접 내보내기
- MCP 대응으로 코드 에이전트(Code Agent)에 설계 문맥을 전달 가능
WebGPU를 활용한, 셰이더 이펙트(Shader Effect)와 셰이더 필(Shader Fill)이라는 두 종류의 커스터마이징 가능한 비주얼 툴입니다.
단색·그라데이션과 같은 기존의 표현을 넘어,
툴의 제약을 넘어선 독자적인 비주얼 표현을 스스로 구축한다는 컨셉의 기능입니다.
여러 이펙트를 스택(Stack)하거나, Figma 네이티브 이펙트와 조합하여 조정할 수 있습니다.
할 수 있는 일은 다음과 같습니다.
셰이더 이펙트 (Shader Effect): 파티클 신장·렌즈 왜곡·컬러 아웃라인 등을 기존 레이어에 적용 -
셰이더 필 (Shader Fill): 수채화·모아레·패턴 그리드 등 동적·생성적 채우기를 적용 -
- 여러 셰이더를 스택하고, 네이티브 이펙트와 조합하여 조정
- 파라미터화되어 있어 캔버스 상에서 실시간으로 조작 가능
- Figma Motion과 연동하여 셰이더의 속성을 키프레임화하여 애니메이션화
디자인 에이전트에 대한 프롬프트만으로, 재사용 가능한 플러그인을 디자이너 스스로가 작성할 수 있는 신기능입니다.
기존에는 플러그인 개발에 기술적 스킬과 개발 환경이 필요했지만, 그러한 장벽을 제거하여,
모든 디자이너가 자신의 워크플로우에 맞춘 툴을 가질 수 있다는 컨셉의 기능입니다.
PropsKit을 활용하고 있기 때문에, Figma 네이티브 툴과 외관 및 조작감이 통일되어 있습니다.
할 수 있는 일은 다음과 같습니다.
- 프롬프트를 입력하는 것만으로 플러그인 생성 (로컬 개발 환경 불필요)
- HTML의 캔버스 임포트, 대시보드 레이아웃 자동 생성, 데이터 시각화 등
- 캔버스 상에 직접 배치되어 반복 작업을 효율화
- 외부 API나 AI 서비스와의 연동이 필요한 경우에는 클래식 플러그인 아키텍처를 사용
- 팀 내에서의 공유도 가능
생성형 AI를 활용한 크리에이티브 워크플로우 툴 「Weave」를, Figma Design 내에서 직접 이용할 수 있는 신기능입니다.
작년에 인수한 Weave의 노드 기반 워크플로우를 Figma에 통합하여,
디자인 제작과 AI 생성 파이프라인을 동일한 캔버스 상에서 완결시킨다는 컨셉의 기능입니다.
자유 형식의 입력 없이 일관된 결과를 얻을 수 있는 간결한 UI로 설계되었습니다.
할 수 있는 일은 다음과 같습니다.
- Weave 툴 (Figma Design 내): 스타일 전송(Style Transfer), 아이콘 생성, 텍스처 적용, 배경 교체, 제품 포토슈트 생성 등 20가지 이상의 AI 이미지 태스크를 패널에서 직접 실행
- Figma Community를 통한 워크플로(Workflow) 공유: 직접 만든 워크플로를 템플릿으로서 팀 내 또는 커뮤니티에 공개
- Figma node (2026년 여름 예정): Figma 프레임을 Weave 캔버스에 붙여넣고, 프레임의 변경 사항을 워크플로 전체에 실시간으로 반영
현황: Weave 툴은 오픈 베타(베타 기간 중 무료), Community 상의 워크플로는 공개 완료
파일 첨부, Figma 파일 참조, 웹 검색, MCP 커넥터(MCP Connector)의 4가지 방법으로 컨텍스트(Context)를 받아, **팀의 작업 내용을 이해한 상태에서 디자인을 지원하는 AI 에이전트(AI Agent)**입니다.
"좋은 컨텍스트는 에이전트에게 정보를 제공할 뿐만 아니라, 무엇을 만들지를 형성한다"라는 생각 아래,
프로젝트, 브랜드, 팀의 문맥(Context)에 가까울수록 정밀도가 올라간다는 컨셉의 기능입니다.
할 수 있는 일은 다음과 같습니다.
- 파일 첨부: 사용자 인터뷰, UX 카피, 데이터 리포트 등을 채팅에 직접 드롭하여 참조
- Figma 파일 링크 참조: 다른 Figma 파일의 컴포넌트(Component), 토큰(Token), 레이아웃(Layout), 스타일(Style)의 완전한 구조에 접근하여 디자인 패턴을 정확하게 재현
- 웹 검색: Figma를 벗어나지 않고 경쟁사 UX 패턴, 실제 목업(Mockup)용 콘텐츠, 최신 정보를 취득
- MCP 커넥터: GitHub, Atlassian, Slack, Linear 등 외부 도구의 컨텍스트를 직접 통합하여, 티켓 참조나 업데이트 자동 게시도 가능
끝까지 읽어주셔서 감사합니다!
평소에는 디자인과 프론트엔드를 중심으로 Qiita에 기사를 게시하고 있으니, 꼭 Qiita 팔로우와 X(Twitter) 팔로우를 부탁드립니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Qiita AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기