techlist.io
KR EN
figma

Figma의 디자인 에이전트, 이제 맞춤형 도구와 더욱 풍부한 컨텍스트 지원 | Figma 블로그 (새 탭에서 열림)

figmaai-agenthtmlshaderswebgpugenerative-plugins

Figma의 디자인 에이전트가 오픈 베타에서 더 많은 사용자에게 제공되며, 단순한 프롬프트를 넘어 사용자 정의 도구와 팀의 작업 맥락을 활용할 수 있게 됐다. 사용자는 에이전트에게 재사용 가능한 플러그인과 셰이더를 만들도록 요청해 Figma 캔버스 안에서 자신만의 디자인 워크플로를 구축할 수 있다. 이를 통해 에이전트는 결과물을 생성하는 도구를 넘어 사용자의 작업 방식을 이해하고 협업하는 파트너에 가까워진다.

Figma 디자인 에이전트의 확장

  • 에이전트는 Figma 캔버스에서 직접 작동하며, 디자인 작업의 유연성·정밀도·창작 제어력을 높인다.
  • 팀의 작업 방식과 실제 디자인 맥락을 이해할수록 단순히 결과물을 만드는 것을 넘어 협업할 수 있다는 점을 강조한다.
  • Figma는 에이전트와 사용자 정의 도구를 직접 시험할 수 있는 커뮤니티 플레이그라운드 파일도 제공한다.
  • 사용자의 요구를 자연어로 설명하면 에이전트가 도구 제작과 문제 해결 방법까지 제안한다.

프롬프트로 만드는 생성형 플러그인

  • 기존에는 플러그인을 만들려면 개발 지식과 별도의 개발 환경이 필요했지만, 이제 에이전트에게 재사용 가능한 플러그인 제작을 요청할 수 있다.
  • 생성형 플러그인은 다음과 같은 작업에 활용될 수 있다.
    • HTML을 Figma 캔버스로 가져오기
    • 대시보드 레이아웃 생성
    • 데이터를 시각화하기
    • 이미지 자산 자동 배치
  • PropsKit을 사용하기 때문에 Figma의 기본 기능처럼 자연스럽게 동작한다.
  • 캔버스 안에서 직접 결과를 확인하고 반복 수정할 수 있어, 외부 도구를 오가는 번거로움이 줄어든다.
  • Figma 밖의 AI 서비스나 서드파티 API와 연동해야 하는 경우에는 기존 방식의 클래식 플러그인을 사용해야 한다.
  • 플러그인이나 셰이더 자체는 제작자, 팀원, 커뮤니티 사용자 모두 무료로 사용할 수 있지만, 에이전트에게 제작을 요청하는 기능은 일반 출시 후 AI 크레딧을 사용하게 된다.

WebGPU 기반 셰이더 효과

  • 에이전트는 픽셀이 렌더링되는 방식을 정의하는 작은 프로그램인 셰이더도 생성할 수 있다.
  • Figma의 WebGPU 기반 렌더러를 활용해 다음과 같은 시각 효과를 만들 수 있다.
    • 디더링
    • 리퀴드 메탈
    • 프랙털 노이즈
    • 렌즈 왜곡
    • 입자 늘이기
    • 색상 외곽선
  • 셰이더 효과는 네이티브 Figma 효과처럼 쌓아 사용할 수 있으며, 속성을 조절하거나 기본 효과와 결합할 수 있다.

셰이더 효과와 셰이더 필

  • 셰이더 효과
    • 레이어에 적용되는 사용자 정의 시각 효과다.
    • 입자 효과, 렌즈 왜곡, 컬러 아웃라인 등 다양한 효과를 만들 수 있다.
    • 여러 효과를 조합해 복합적인 결과를 만들 수 있다.
  • 셰이더 필
    • 단색이나 일반 그라디언트를 넘어서는 동적·생성형 채우기다.
    • 수채화, 모아레, 패턴 그리드 등을 표현할 수 있다.
    • 디더 웨이브, 유체 하프톤, 파티클 웹, 마그네틱 필드 같은 프리셋으로 활용할 수 있다.
  • 사용자는 셰이더의 기능을 정의하고, 에이전트와 대화하며 UI와 조정 가능한 매개변수를 발전시킬 수 있다.
  • 사진에 콜라주, 마블링, 빛샘, 금속 엠보싱, 프리즘 효과를 적용하는 등 개인의 시각적 스타일을 재사용 가능한 워크플로로 만들 수 있다.

디자이너와 에이전트의 협업 방식

  • 제품 디자이너 Edward Chechique는 과거 개발자 지원이나 여러 외부 도구가 필요했던 생성형 플러그인 제작을 Figma 안에서 직접 처리할 수 있게 됐다고 설명한다.
  • 크리에이티브 테크놀로지스트 Anna Zhang은 에이전트와 기능과 UI를 주고받는 과정을 “협상”에 비유한다.
  • 에이전트가 제안한 해결책과 생성 결과가 다음에 추가할 매개변수와 기능에 영향을 주면서, 일회성 생성보다 반복적인 공동 설계가 가능해진다.

자신만의 레이아웃·효과·데이터 시각화 도구가 필요하다면 에이전트로 생성형 플러그인이나 셰이더를 만들어 보는 것이 유용하다. 다만 외부 API 연동은 클래식 플러그인을 사용해야 하며, 에이전트 기반 제작 기능은 AI 크레딧 비용과 지원 범위를 확인하는 것이 좋다.