techlist.io
KREN
figma

피그마 디자인 에이전트가 출시되었습니다 | 피그마 블로그 (새 탭에서 열림)

aidesign-systemsgen-aimodel-context-protocolfigma-designfigma-agent

Figma는 캔버스 안에서 직접 작동하며 디자인 시스템과 팀의 작업 맥락을 이해하는 전용 디자인 에이전트를 공개했다. 이 에이전트는 AI 생성과 직접 조작 중 하나를 선택하게 하지 않고, 아이디어 탐색부터 반복 수정·대량 편집까지 디자이너의 작업을 보조한다. Figma는 이를 통해 속도와 정밀성, 자동화와 디자이너의 통제력을 함께 확보하려 한다.

캔버스에 통합된 Figma 디자인 에이전트

  • 에이전트는 Figma 캔버스와 왼쪽 레일에서 바로 사용할 수 있다.
  • 특정 디자인 레이어에서 프롬프트를 시작할 수 있다.
  • 여러 프롬프트를 병렬로 실행해 다양한 아이디어를 동시에 비교할 수 있다.
  • 사용자가 직접 편집하는 동안 에이전트도 계속 반복 작업을 수행할 수 있다.
  • 별도의 도구 설정이나 컨텍스트 전환 없이 팀과 같은 파일 안에서 협업자처럼 작동한다.
  • 컴포넌트, 디자인 토큰, 변수, 표준, 모범 사례 등 Figma 내부의 디자인 시스템 맥락을 이해하도록 설계됐다.

Figma 에이전트와 MCP 서버의 역할 분담

  • Figma 에이전트
    • 캔버스 안에서 디자인을 생성하고 수정하는 데 적합하다.
    • 현재 파일과 디자인 시스템에 대한 추가 맥락을 활용한다.
    • Figma 파일을 직접 편집하며 결과물을 바로 조작할 수 있다.
  • MCP 서버와 use_figma
    • 코드를 캔버스로 가져오거나 디자인을 다시 코드로 보내는 작업에 사용한다.
    • 코드와 Figma 사이를 오가며 디자인 충실도를 유지할 수 있다.
  • 두 방식은 경쟁 관계가 아니라, 캔버스 작업과 코드-디자인 간 연결을 각각 담당한다.

다양한 디자인 방향 탐색

  • 첫 번째 아이디어나 프롬프트에 머무르지 않고 여러 방향을 빠르게 실험할 수 있다.
  • 같은 문제에 대해 서로 다른 스타일의 시안을 여러 개 생성할 수 있다.
    • 예: 유기적 스타일, 현대적 스타일, 복고풍 스타일
  • 서로 다른 비즈니스 목표에 맞춘 결제 흐름이나 정보 구조를 비교할 수 있다.
  • Figma Design에서 흐름, 상태, 문구, 구조를 구체화한 뒤 Figma Make로 보내 동작을 위한 코드 레이어를 생성할 수 있다.
  • 반대로 Figma Make에서 만든 프레임을 Figma Design으로 가져와 에이전트로 다듬은 뒤 다시 Make로 보낼 수도 있다.

디자인 시스템을 활용한 생성과 반복

  • 에이전트는 자주 사용되거나 최근 사용된 컴포넌트를 우선 활용한다.
  • 특정 라이브러리를 선택하거나 토큰·변수·컴포넌트를 @ 멘션해 결과를 세밀하게 통제할 수 있다.
  • 디자인 시스템에 맞는 화면을 생성하고 기존 디자인을 새로운 스타일로 리믹스할 수 있다.
  • 예시 작업:
    • 모바일 앱용 가로 스크롤 이미지 캐러셀 생성
    • 이미지 위·아래에 제목을 배치한 여러 버전 비교
    • 특정 디자인을 여러 시각적 스타일로 변환
  • AI가 평균적인 결과물을 빠르게 만드는 데 그치지 않도록, 여러 대안을 비교한 뒤 최종 방향은 디자이너가 직접 선택하고 조작하도록 한다.

반복적인 대량 작업 자동화

  • 에이전트는 맥락과 정밀성이 필요한 단순 반복 작업을 자동화한다.
  • 대표적인 활용 사례:
    • 파일 전체의 타이포그래피 업데이트
    • 여러 화면의 동일 컴포넌트 일괄 교체
    • 전체 플로우의 패딩 값 변경
    • 변수 이름 일괄 변경
    • 그리드 전체의 Lorem ipsum과 이미지를 실제에 가까운 콘텐츠로 교체
    • 칩 컴포넌트를 모두 활성 상태로 변경
    • 화면을 다크 모드로 변환
  • 디자인 시스템 관리자는 라이브러리의 설명, 태그, 사용 사례, 컴포넌트 문서와 명명 규칙을 대량으로 정리할 수 있다.

코드와 디자인 사이의 연속적인 흐름

  • 코드에서 시작한 결과물을 Figma의 코드-투-캔버스 기능으로 가져와 디자인 시스템을 적용하고 시각적으로 반복 수정할 수 있다.
  • 수정된 디자인은 MCP 서버를 통해 다시 코드로 전달할 수 있다.
  • 이 과정에서 Figma 에이전트가 캔버스 작업을 지원해 코드와 디자인 간 이동 중에도 작업 흐름과 맥락을 유지한다.
  • AI 지원과 직접 조작을 필요에 따라 오갈 수 있어, 모든 작업을 프롬프트로 해결하지 않아도 된다.

디자인 방향을 넓게 탐색할 때는 에이전트를 활용하고, 최종 선택과 세밀한 조정은 캔버스에서 직접 수행하는 방식이 가장 실용적이다. 특히 디자인 시스템을 사용하는 팀은 컴포넌트·토큰 기반의 대량 수정과 코드-디자인 동기화에 에이전트를 효과적으로 활용할 수 있다.