메인 콘텐츠로 건너뛰기

맞춤형 도구와 더욱 풍부한 컨텍스트를 갖춘 Figma의 디자인 에이전트

Georgia RustManager of Product Management, Figma
Rodrigo DaviesProduct Manager, Figma
Figma의 모바일 디자인 캔버스 모형 주위에 AI가 생성한 작업 프롬프트가 배치되어 있습니다. 캔버스에는 Camille Vosk의 'MODULAR LIVING' 포스터가 선택되어 있으며, 주변의 파란색 상태 표시에는 'QR 코드 플러그인 만들기', '코드 레이어 생성', '맞춤형 셰이더 만들기', '색상 대비 확인' 등의 메시지가 표시되어 있어 AI의 도움을 받은 디자인 업무 흐름을 보여줍니다.Figma의 모바일 디자인 캔버스 모형 주위에 AI가 생성한 작업 프롬프트가 배치되어 있습니다. 캔버스에는 Camille Vosk의 'MODULAR LIVING' 포스터가 선택되어 있으며, 주변의 파란색 상태 표시에는 'QR 코드 플러그인 만들기', '코드 레이어 생성', '맞춤형 셰이더 만들기', '색상 대비 확인' 등의 메시지가 표시되어 있어 AI의 도움을 받은 디자인 업무 흐름을 보여줍니다.

프롬프트는 시작을 도와줍니다. 맞춤형 도구와 실제 컨텍스트, 그리고 스킬을 활용하면 디자인 에이전트는 한층 더 강력해집니다. 그 결과, 캔버스에 완성되는 결과물은 진정으로 여러분만의 스타일을 담아냅니다.

맞춤형 도구와 더욱 풍부한 컨텍스트를 갖춘 Figma의 디자인 에이전트공유

에이전트와 맞춤형 도구를 위한 플레이그라운드 파일을 살펴보세요.

더 효율적으로 작업을 돕는 에이전트와, 여러분이 어떻게 일하는지까지 이해하는 에이전트를 구분하는 핵심은 바로 컨텍스트입니다. 에이전트가 팀의 작업 방식을 이해하면 단순히 결과물을 생성하는 것을 넘어, 진정한 협업 파트너가 될 수 있습니다.

이러한 협업이 진가를 발휘하는 곳은 바로 Figma 캔버스입니다. 이전에는 구현할 수 없었던 도구, 효과, 경험을 직접 만들어낼 수 있습니다. Figma 디자인 에이전트

The Figma design agent is here

Starting today, work with an agent that is built for Figma—directly on the canvas.

는 이제 오픈 베타를 통해 더 많은 사용자가 이용할 수 있으며, 작업 전반에서 한층 더 높은 유연성, 정밀성, 그리고 창의적인 제어 기능을 제공합니다.

나만의 도구를 만드세요

고객 사례: Edward Chechique

제품 디자이너 Edward Chechique는 HTML을 캔버스로 가져오고, 대시보드 레이아웃을 생성하며, 데이터를 시각화하는 생성형 플러그인을 직접 만들고 있습니다. 하지만 이전에는 이를 만드는 과정이 매우 번거로웠습니다. Edward는 "도움을 요청하려면 시간이 없을 수도 있는 개발자에게 부탁해야 했습니다."라고 말합니다. "이후 AI 도구 덕분에 이런 작업이 가능해졌지만, 여전히 여러 도구와 업무 흐름을 오가야 했습니다. 이제는 Figma에 에이전트가 추가되면서 훨씬 더 빠르고 쉬워졌습니다. 원하는 것을 직접 요청하기만 하면 되기 때문입니다. 가능성이 전혀 없던 상태에서, 이제는 무궁무진한 가능성을 갖게 되었습니다."

사람마다 작업 방식은 다르지만, 디자인 도구는 대개 모두에게 동일한 방식으로 제공됩니다. 레이아웃, 텍스처, 효과도 모두 디자인 도구에서 기본적으로 지원하는 기능에 의해 결정됩니다. 오늘부터는 디자인을 만들듯이 도구 자체도 원하는 방식으로 만들 수 있습니다. 이를 통해 시각적으로 더욱 자유롭게 실험하고, 직접 만든 결과물을 팀과 손쉽게 공유할 수 있습니다.

생성형 플러그인

플러그인은 Figma 캔버스에서 가능한 작업의 범위를 확장해 주지만, 이를 만들기 위해서는 그동안 기술적인 지식과 개발 환경이 필요했습니다. 많은 디자이너에게는 쉽지 않은 일이었습니다. 이제는 디자인 에이전트에게 요청하기만 하면 재사용 가능한 플러그인을 만들 수 있습니다.

PropsKit을 사용하기 때문에 이러한 생성형 플러그인은 Figma에 기본으로 포함된 기능처럼 자연스럽게 동작하고 사용감을 제공합니다. 또한 캔버스에서 바로 사용할 수 있기 때문에 반복 작업을 진행하는 동안 결과물을 더욱 직접적으로 제어할 수 있습니다. 다만 AI 서비스나 서드파티 API처럼 Figma Design 외부와 연동해야 하는 기능은 기존 플러그인을 계속 사용하면 됩니다.

이미지 레이아웃 생성형 플러그인은 에셋 정리에 도움을 줍니다.
에이전트는 문제를 해결할 수 있는 방법을 제안해 주었습니다. 제게는 그게 정말 마법 같았습니다. 마치 기꺼이 도와주려는 개발자와 대화하는 것처럼 느껴졌기 때문입니다.
Edward Chechique, 제품 디자이너

셰이더 효과 및 채우기

고객 사례: Anna Zhang

크리에이티브 테크놀로지스트 Anna Zhang은 자신만의 셰이더를 만들어, 직접 촬영한 사진에 콜라주, 마블링, 빛 누출, 금속 엠보싱, 프리즘 효과를 적용해 새로운 스타일로 재해석했습니다. "지금까지 해오던 작업을 확장하거나, 재사용 가능한 업무 흐름을 구축할 수 있는 방법입니다."라고 그녀는 말합니다. "하나의 출발점만으로도 표현할 수 있는 가능성이 정말 무궁무진합니다."

Anna는 기능 구현에 집중하고, UI는 에이전트에게 맡겼습니다. "에이전트와 계속 주고받으며 대화를 이어갔고, 에이전트가 만들어낸 결과를 보면서 이후에 어떤 매개변수를 추가할지 결정했습니다. 마치 서로 협상하는 과정 같았죠."

에이전트는 셰이더도 만들 수 있습니다. 셰이더는 WebGPU

Figma rendering: Powered by WebGPU

We’ve updated our renderer to use WebGPU, unlocking new performance optimization opportunities. Here’s how we did it.

기반으로 동작하는 작고 사용자 지정 가능한 프로그램으로, 픽셀이 렌더링되는 방식을 정의합니다. 디더링, 액체 금속, 프랙털 노이즈 같은 효과를 구현한다고 생각하면 됩니다. 셰이더는 두 가지 유형으로 제공됩니다.

  • 셰이더 효과는 Figma의 기본 효과처럼 사용할 수 있지만, 전부 직접 제작할 수 있습니다. 입자 늘이기, 렌즈 왜곡, 색상 윤곽선 등 다양한 효과를 구현할 수 있습니다. 여러 셰이더 효과를 겹쳐 적용하고, 속성을 조정하며, 기본 효과와 조합해 원하는 결과를 만들어낼 수 있습니다.

플러그인이나 셰이더는 직접 만든 것이든, 팀원이 공유한 것이든, Community에서 찾은 것이든 관계없이 언제나 무료로 사용할 수 있으며, 모든 요금제에서 이용 가능합니다. 에이전트에게 플러그인이나 셰이더 생성을 요청하려면 Figma 디자인 에이전트에 대한 액세스 권한이 필요하며, 정식 출시 이후에는 AI 크레딧이 차감됩니다.

  • 셰이더 채우기는 동적이고 생성형 방식으로 작동하며, 단색이나 그레이디언트를 넘어 수채화, 모아레, 패턴 그리드 등 다양한 효과를 구현할 수 있습니다.
'셰이더 채우기' 라이브러리 패널이 표시된 Figma 인터페이스 옆에 검은색 타이포그래피와 주황색, 회색 하프톤 패턴으로 구성된 그래픽이 배치되어 있습니다. 패널은 디더 웨이브, 유체 하프톤, 입자 웹, 자기장 등 맞춤형 셰이더 사전 설정이 표시되어 있으며, 커서가 그중 하나의 사전 설정을 선택하고 있습니다.'셰이더 채우기' 라이브러리 패널이 표시된 Figma 인터페이스 옆에 검은색 타이포그래피와 주황색, 회색 하프톤 패턴으로 구성된 그래픽이 배치되어 있습니다. 패널은 디더 웨이브, 유체 하프톤, 입자 웹, 자기장 등 맞춤형 셰이더 사전 설정이 표시되어 있으며, 커서가 그중 하나의 사전 설정을 선택하고 있습니다.
디더 웨이브, 유체 하프톤, 입자 웹, 자기장과 같은 셰이더 채우기를 사용해 보세요.

셰이더와 생성형 플러그인은 이제 새로운 도구 탭에서 기존 플러그인, Weave 도구

Three-panel product graphic demonstrating AI-powered style transfer. On the left, a "Transfer style" interface displays a target image of people carrying skateboards and a blurred portrait used as the style source. In the center, a workflow canvas labeled "Spring Campaign" shows a connected post-generation node producing a floral-themed social media graphic titled "Spring Arrivals." On the right, a gallery-style layout displays generated creative assets, including an illustrated handshake artwork and merchandise design cards, showing how transferred styles can be applied across a campaign.Three-panel product graphic demonstrating AI-powered style transfer. On the left, a "Transfer style" interface displays a target image of people carrying skateboards and a blurred portrait used as the style source. In the center, a workflow canvas labeled "Spring Campaign" shows a connected post-generation node producing a floral-themed social media graphic titled "Spring Arrivals." On the right, a gallery-style layout displays generated creative assets, including an illustrated handshake artwork and merchandise design cards, showing how transferred styles can be applied across a campaign.

Connecting Figma and Weave

Today, we’re announcing new ways your Weave creative workflows can live alongside your Figma frames.

, 위젯과 함께 사용할 수 있습니다. Figma는 시작할 수 있도록 30개 이상의 플러그인과 셰이더를 제공하지만, 가장 유용한 도구는 결국 여러분이 직접 만드는 것입니다.

디자인 에이전트를 사용할 때는 어떤 종류의 셰이더를 만들고 싶은지, 그리고 어떤 속성을 조정할 수 있어야 하는지를 지정하면 에이전트가 이를 구현해 줍니다. 하지만 에이전트가 캔버스에서 만들어낼 수 있는 결과물의 품질은, 결국 여러분이 제공하는 정보의 품질에 달려 있습니다.

추상적인 빨간색과 흰색 줄무늬 그래픽 위에 '하프톤'이라는 제목의 Figma 플러그인 패널이 표시되어 있습니다. 패널에는 패턴 유형, 크기, 임계값, 색상을 조절하는 옵션이 있으며, 커서가 슬라이더를 움직여 노이즈 기반 하프톤 효과를 실시간으로 조정하는 모습을 보여줍니다.추상적인 빨간색과 흰색 줄무늬 그래픽 위에 '하프톤'이라는 제목의 Figma 플러그인 패널이 표시되어 있습니다. 패널에는 패턴 유형, 크기, 임계값, 색상을 조절하는 옵션이 있으며, 커서가 슬라이더를 움직여 노이즈 기반 하프톤 효과를 실시간으로 조정하는 모습을 보여줍니다.
셰이더 효과와 채우기의 설정을 원하는 대로 조정하세요.
Figma에서 여러 셰이더 효과를 겹쳐 적용한 추상 이미지가 표시되어 있습니다. 캔버스는 선명한 주황색, 보라색, 빨간색, 흰색 텍스처로 채워져 있으며, '리소 프린트', '입자 그리드', '그레이디언트 맵'이라는 이름의 조절 컨트롤이 떠 있어 여러 시각 효과를 레이어링한 이미지 처리 과정을 보여줍니다.Figma에서 여러 셰이더 효과를 겹쳐 적용한 추상 이미지가 표시되어 있습니다. 캔버스는 선명한 주황색, 보라색, 빨간색, 흰색 텍스처로 채워져 있으며, '리소 프린트', '입자 그리드', '그레이디언트 맵'이라는 이름의 조절 컨트롤이 떠 있어 여러 시각 효과를 레이어링한 이미지 처리 과정을 보여줍니다.
원하는 결과를 얻기 위해 레이어 효과를 사용하세요.
직접 도구를 만들 수 있다는 것은 스스로 통제권을 갖는다는 의미입니다. 모든 도구에는 무엇이 가능해야 하는지에 대한 각자의 관점이 담겨 있습니다.
Anna Zhang, 크리에이티브 테크놀로지스트

모든 대화에 더 풍부한 컨텍스트를 더하세요

좋은 컨텍스트는 단순히 에이전트에 정보를 제공하는 데 그치지 않고, 에이전트가 만들어 내는 결과물 자체를 결정합니다. 에이전트가 여러분의 프로젝트와 브랜드, 그리고 작업 방식에 대해 더 많이 이해할수록 더욱 정확한 결과를 생성할 수 있습니다.

  • 파일 직접 첨부: 사용자 인터뷰, UX 카피 문서, 데이터 리포트 등의 파일을 에이전트 채팅에 직접 첨부할 수 있습니다. 에이전트는 대화 내내 해당 파일을 참고 자료로 활용하므로, 프로젝트의 컨텍스트와 방향성이 반영된 결과물을 생성할 수 있습니다.
  • 다른 Figma 파일 참조: Figma 파일 링크를 붙여넣으면 에이전트가 컴포넌트, 토큰, 레이아웃, 스타일을 포함한 전체 구조를 가져와, 단순히 평면 이미지를 기반으로 비슷하게 추정하는 것이 아니라 디자인 패턴을 이해하고 그대로 재현할 수 있습니다.
  • 웹 검색: 에이전트는 Figma를 벗어나지 않고도 실시간 데이터를 가져올 수 있습니다. 예를 들어, 목록에 사용할 실제 레스토랑 이름과 사진, 경쟁사의 최신 UX 패턴, 사실적인 모형을 위한 최신 콘텐츠 등을 활용할 수 있습니다.
  • 도구 연결: MCP 커넥터를 사용하면 GitHub, Atlassian, Slack 등 다양한 도구의 컨텍스트를 에이전트로 직접 가져올 수 있으며, 업데이트를 다시 해당 도구로 전송할 수도 있습니다. 예를 들어, Linear의 제품 티켓을 가져와 디자인에 반영하거나, 복사 및 붙여넣기 없이 Hex의 데이터를 직접 참조할 수 있습니다.
다크 테마의 박물관 지도 인터페이스와 AI 프롬프트 카드가 함께 표시된 디자인 캔버스입니다. 카드에는 'exhibits.csv'라는 첨부 CSV 파일이 참조되어 있으며, "첨부된 스타일과 데이터를 사용해 박물관 전시를 위한 동적 지도를 생성하세요"라는 지시문이 포함되어 있어 구조화된 데이터를 기반으로 한 AI 생성 기능을 보여줍니다.다크 테마의 박물관 지도 인터페이스와 AI 프롬프트 카드가 함께 표시된 디자인 캔버스입니다. 카드에는 'exhibits.csv'라는 첨부 CSV 파일이 참조되어 있으며, "첨부된 스타일과 데이터를 사용해 박물관 전시를 위한 동적 지도를 생성하세요"라는 지시문이 포함되어 있어 구조화된 데이터를 기반으로 한 AI 생성 기능을 보여줍니다.
에이전트 채팅에 파일을 직접 첨부하세요.
커넥터 메뉴가 펼쳐진 Figma 인터페이스가 표시되어 있습니다. 메뉴에는 Atlassian, Dovetail, GitHub, Granola, Hex, Notion, Slack 등의 옵션이 표시되어 있으며, Notion이 선택되어 있습니다. 이를 통해 연결된 외부 도구와 지식 소스에 접근하는 기능을 보여줍니다.커넥터 메뉴가 펼쳐진 Figma 인터페이스가 표시되어 있습니다. 메뉴에는 Atlassian, Dovetail, GitHub, Granola, Hex, Notion, Slack 등의 옵션이 표시되어 있으며, Notion이 선택되어 있습니다. 이를 통해 연결된 외부 도구와 지식 소스에 접근하는 기능을 보여줍니다.
외부 도구의 컨텍스트를 에이전트로 가져오세요.

관점을 확장하세요

좋은 프롬프트에는 자신만의 관점이 담겨 있습니다. 스킬을 사용하면 그 사고방식을 저장하고, 팀과 공유하며, 자신의 파일을 넘어 크리에이티브 방향성을 다양한 작업에 적용할 수 있습니다.

  • 맞춤형 스킬 만들기:스킬을 사용하면 자주 사용하는 프롬프트를 재사용 가능한 슬래시 명령어로 저장할 수 있습니다. 특정 디자인 스타일을 적용하거나, 디자인을 검토하거나, 이미 정립해 둔 작업을 자동화하는 등 반복되는 작업을 더욱 효율적으로 수행할 수 있습니다.
  • 팀에 스킬 게시: 스킬을 공유하면 여러분의 사고방식이 팀 전체의 작업 방식에 자연스럽게 녹아듭니다. 디자인 철학, 고유한 디자인 스타일, 피드백 관점까지도 팀원 누구나 실행하고, 배우고, 발전시켜 나갈 수 있는 형태로 공유할 수 있습니다.
  • 공동작업자의 프롬프트 확인: 반복 작업 기록은 단순한 로그가 아니라, 다른 사람이 어떤 사고 과정을 거쳤는지 보여주는 창입니다. 기본적으로 에이전트와의 대화는 같은 파일의 공동작업자에게 공유되므로, 작업 과정 자체가 팀이 함께 활용할 수 있는 리소스가 됩니다. 필요할 때는 언제든 비공개로 전환할 수 있습니다.
채팅 인터페이스에 스킬 및 명령어 메뉴가 표시되어 있습니다. '/contrast-improvements'라는 맞춤형 명령어가 선택되어 있으며, 대비가 낮은 색상 조합을 WCAG 기준을 충족하는 접근 가능한 색상 조합으로 대체하는 기능에 대한 설명이 표시됩니다. 아래에는 선택한 스킬을 사용해 모든 디자인을 검사하라는 프롬프트가 표시되어 있습니다.채팅 인터페이스에 스킬 및 명령어 메뉴가 표시되어 있습니다. '/contrast-improvements'라는 맞춤형 명령어가 선택되어 있으며, 대비가 낮은 색상 조합을 WCAG 기준을 충족하는 접근 가능한 색상 조합으로 대체하는 기능에 대한 설명이 표시됩니다. 아래에는 선택한 스킬을 사용해 모든 디자인을 검사하라는 프롬프트가 표시되어 있습니다.
맞춤형 스킬을 만들고 공유해 반복되는 업무 흐름을 원클릭 명령으로 바꿔 보세요.

디자인에서 가장 멋진 순간은 머릿속의 아이디어가 화면 위에 그대로 구현되는 순간입니다. 이제 그 아이디어를 현실로 만들 수 있는 방법이 더욱 다양해졌습니다. 코드, 플러그인, 셰이더, 그리고 컨텍스트까지, 모두 Figma 캔버스 위에서 활용할 수 있습니다. 이것이 바로 Figma 디자인 에이전트가 열어주는 새로운 가능성입니다.

Figma 디자인 에이전트는 프로페셔널, 오거니제이션, 엔터프라이즈 요금제의 풀 시트 사용자를 대상으로 오픈 베타로 제공됩니다. 콜라보, 데브, 뷰 시트 사용자는 자신의 초안에서 디자인 에이전트를 사용할 수 있습니다. 베타 기간 동안에는 디자인 에이전트를 무료로 이용할 수 있습니다. 에이전트 플레이그라운드 파일에서 직접 기능을 체험해 보거나, 디자인 업무 흐름에서 AI를 실무에 활용하는 다양한 방법을 살펴보세요. 자세한 내용은 도움말 센터에서 Figma 에이전트와 생성형 플러그인 및 셰이더에 대한 안내를 확인해 보세요.

콜라주 스타일의 제품 그래픽이 AI 지원 디자인 및 개발 업무 흐름을 보여주며, 플러그인 생성 프롬프트, 시각 효과 컨트롤, 코드 생성 도구, 창의적인 작업공간에 배열된 인터랙티브 UI 컴포넌트를 포함하고 있습니다.콜라주 스타일의 제품 그래픽이 AI 지원 디자인 및 개발 업무 흐름을 보여주며, 플러그인 생성 프롬프트, 시각 효과 컨트롤, 코드 생성 도구, 창의적인 작업공간에 배열된 인터랙티브 UI 컴포넌트를 포함하고 있습니다.

Figma CEO 겸 공동 창립자인 Dylan Field의 Config 요약을 읽어보세요.

Related articles

Create and collaborate with Figma

Get started for free