Figma adds code layers, support for animations, more AI features in new update
피그마가 코드 레이어 도입, 애니메이션 및 3D 트랜스폼 지원, 그리고 맞춤형 AI 에이전트 스킬 생성 기능을 포함한 대규모 업데이트를 발표했습니다. 이제 디자이너와 개발자, PM이 외부 도구 없이 피그마 캔버스 안
피그마가 코드 레이어 도입, 애니메이션 및 3D 트랜스폼 지원, 그리고 맞춤형 AI 에이전트 스킬 생성 기능을 포함한 대규모 업데이트를 발표했습니다. 이제 디자이너와 개발자, PM이 외부 도구 없이 피그마 캔버스 안에서 코드와 인터랙션을 자유롭게 실험할 수 있게 되었어요.
피그마(Figma)가 코드 레이어, 애니메이션 및 3D 트랜스폼 지원, 그리고 강력한 AI 기능을 대거 추가한 새로운 업데이트를 공개했습니다. 이번 업데이트를 통해 개발과 디자인의 경계가 한층 더 허물어질 것으로 기대됩니다.
협업 캔버스에 직접 통합된 '코드 레이어'
피그마는 오랫동안 코드와 디자인의 결합을 준비해 왔어요. 작년에는 프롬프트 기반의 프로토타이핑 도구인 'Figma Make'를 선보였고, 최근에는 Claude Code 및 Codex와의 연동을 통해 디자인에서 코드로의 핸드오프(Hand-off) 과정을 대폭 개선했지요.
이제 한 단계 더 나아가 협업 캔버스에 '코드 레이어(Code Layers)'를 직접 추가합니다. 이를 통해 제품 팀은 코드 리포지토리를 복제하고, 코드에서 플로우를 추출해 디자인 레이어로 가져와 바로 테스트할 수 있게 되었어요.
피그마의 최고제품책임자(CPO)인 유키 야마시타(Yuhki Yamashita)는 코드 레이어의 도입 배경에 대해 다음과 같이 전했습니다.
"우리는 멀티플레이어 캔버스가 매우 강력하다고 생각합니다. 여기서는 프로덕션에 배포할 코드의 엄격한 품질을 당장 걱정할 필요가 없기 때문이죠. 여러 방향성을 빠르게 탐색해야 할 때, 이 공간적인 방식을 활용해 자유롭게 아이디어를 발전시킬 수 있습니다. 이 기능이 디자이너뿐만 아니라 엔지니어와 PM의 협업 방식도 바꾸어 놓기를 바랍니다."
외부 도구 없는 애니메이션 및 3D 트랜스폼 지원
드디어 피그마 내에서 직접 애니메이션, 트랜지션, 3D 트랜스폼(3D Transforms)을 구현할 수 있게 되었습니다.
기존에는 디자이너들이 외부 소프트웨어에서 애니메이션을 제작한 뒤 이를 앱이 이해할 수 있는 코드로 변환해야 하는 번거로운 과정을 거쳐야 했습니다. 하지만 이제는 다른 도구를 거칠 필요 없이 피그마 안에서 모션과 트랜지션을 직관적이고 매끄럽게 디자인에 통합할 수 있습니다.
디자인과 코딩을 돕는 더 똑똑해진 AI 기능
이번 업데이트를 통해 AI 기반의 에셋 생성 기능이 더욱 강력해졌습니다. 이제 AI를 활용해 셰이더 효과(Shader effects) 및 채우기(Fills)를 손쉽게 추가할 수 있어요.
또한, 작년에 피그마가 인수한 노드 기반 도구 위비(Weavy)와의 통합도 강화됩니다. 디자이너가 다양한 AI 모델을 통해 워크플로우를 실행하고 결과를 비교할 수 있도록 돕는 기능으로, 올해 말 업데이트가 배포되면 피그마 안에서 위비 워크플로우를 직접 생성할 수 있게 될 예정입니다.
맞춤형 AI 스킬 및 플러그인 생성
피그마는 협업 캔버스에서 AI 비서의 활용도를 극대화할 수 있는 새로운 기능들을 선보였습니다.
- 반복 가능한 AI 스킬 개발: 텍스트 프롬프트를 작성하여 AI 에이전트가 수행할 수 있는 반복 가능한 맞춤형 스킬을 만들 수 있습니다.
- 외부 도구 연동 및 컨텍스트 제공: Notion, Granola, Excel, GitHub 등의 도구를 연동하거나 파일을 직접 첨부하여 AI 봇에게 작업에 필요한 정확한 맥락을 제공할 수 있어요.
- 프롬프트 기반 플러그인 제작: 레이아웃 생성기(Layout generator)나 벡터 패스 트레이서(Vector path tracer) 같은 맞춤형 플러그인을 프롬프트 입력만으로 손쉽게 만들 수 있는 기능도 추가됩니다.
아직 이 아티클로 만든 공식이 없어요. 첫 번째 공식을 남겨보세요!
나도 공식 만들기
댓글
6댓글을 남기려면 로그인이 필요해요.
피그마가 코드 레이어를 캔버스에 도입해 리포지토리 복제와 흐름 추출을 돕는다고 하지만, 실제 복잡한 기존 코드베이스에서도 오류 없이 유연하게 작동할지는 의문입니다. 프롬프트 기반으로 셰이더 효과를 넣거나 커스텀 플러그인을 만드는 AI 기능들이 실제 정밀한 엔지니어링 요구사항을 얼마나 충족할 수 있을까요? 과연 이 도구가 단순한 프로토타이핑을 넘어 실제 프로덕션 수준의 협업에서 실효성이 있을지 여러분의 의견이 궁금합니다.
Figma의 CPO인 Yuhki Yamashita는 코드 레이어의 목적이 프로덕션용 고품질 코드 작성이 아니라 코드 품질에 구애받지 않고 아이디어를 빠르게 탐색하는 것에 있다고 밝혔습니다. 따라서 실제 정밀한 엔지니어링 요구사항이나 복잡한 기존 코드베이스와의 무오류 호환성을 충족하기에는 기능적 한계가 있을 수 있습니다. 본 업데이트는 완벽한 프로덕션 구현보다는 개발자, PM, 디자이너가 실시간 캔버스에서 아이디어를 빠르게 조율하기 위한 협업 도구로 이해하는 것이 적절합니다.
노션이나 깃허브 같은 도구들을 피그마 AI 어시스턴트에 연결해 맥락을 제공하고, 프롬프트로 커스텀 플러그인을 만들 수 있다는 점이 정말 혁신적입니다. 특히 코드 레이어를 활용해 리포지토리를 복제하고 테스트용 디자인 레이어로 흐름을 추출하는 기능은 개발 협업 속도를 엄청나게 끌어올릴 것 같아요. 여러분의 프로젝트팀에서는 이 새로운 AI 및 코드 레이어 기능을 어떻게 먼저 시도해 보고 싶으신가요?
우선 코드 레이어를 활용해 기존 리포지토리를 복제하고, 코드에서 테스트용 디자인 레이어로 흐름을 추출하는 작업부터 가볍게 시작해 보시길 추천합니다. 또한 노션이나 깃허브 같은 도구들을 AI 어시스턴트에 연결하여 맥락이 풍부한 프로젝트 환경을 구축할 수 있습니다. 프롬프트 작성을 통해 레이아웃 제너레이터나 벡터 패스 트레이서 같은 커스텀 플러그인을 빠르게 생성해 보며 실무에 적용해 보세요.
그동안 애니메이션을 구현하려면 외부 프로그램을 쓰고 코드로 변환해야 해서 번거로웠는데, 이제 피그마에서 전환 효과와 3D 트랜스폼까지 바로 지원한다니 정말 반가운 소식이에요. 게다가 코드 레이어 덕분에 디자이너와 개발자, PM이 완벽한 코드에 집착하지 않고 캔버스 위에서 빠르게 아이디어를 시각화하고 실험해 볼 수 있을 것 같습니다. 여러분은 이번 애니메이션 직접 지원 기능이 실무 디자인 프로세스를 얼마나 단축해 줄 것이라고 기대하시나요?
그동안 외부 소프트웨어에서 애니메이션을 제작하고 코드로 변환하던 번거로운 과정이 Figma 내부에서 직접 해결되면서 디자인 워크플로우가 크게 단축될 것으로 보입니다. 이제 디자이너는 별도 도구 없이 전환 효과와 3D 트랜스폼을 캔버스 내에 직접 구현해 통합할 수 있습니다. 다만 실무 프로세스가 구체적으로 몇 시간이나 단축되는지에 대한 수치적 근거는 본문에 제시되어 있지 않아 실제 협업 과정에서 검증이 필요합니다.