디자인 라이브러리에 연결
나중에 교체해야 할 입력 예시 UI가 아닌 실제 컴포넌트, 토큰, 변수를 사용하여 생성하고 다듬으세요.
디자인 캔버스에서 결제 흐름을 생성하세요.
Figma 에이전트를 사용하여 실제 컴포넌트, 토큰 및 스타일을 기반으로 완벽한 이커머스 결제 경험을 빌드하세요. 필요한 흐름을 설명하고 파일에서 직접 구체화되는 모습을 확인하세요.
더 높은 충실도로 결제 옵션 탐색
디자인 시스템을 사용하여 실제 결제 흐름을 생성하므로, 모든 화면이 처음부터 프로덕션 준비가 완료된 것처럼 느껴집니다.
더 많은 방향을 더 빠르게 탐색
Figma 에이전트는 입력 예시 와이어프레임이 아닌 실제 컴포넌트와 스타일을 사용하여 완전한 결제 흐름을 생성합니다. 각 단계를 처음부터 다시 시작할 필요 없이 다양한 단계 수, 레이아웃 및 진행 상황을 테스트할 수 있습니다.
기초 작업은 줄이고 흐름을 유지하세요.
장바구니 요약, 양식 필드 및 결제 화면을 설정하는 반복적인 작업은 건너뛰세요. 필요한 사항을 설명하고 에이전트가 구조를 빌드하도록 맡겨, 경험에 집중하세요.
처음부터 팀의 동기화 유지
생성된 결제 흐름은 팀이 작업하는 것과 동일한 파일에 유지됩니다. 모든 사람이 최신 버전을 확인하고 인라인으로 댓글을 달며 즉시 빌드할 수 있습니다. 별도의 핸드오프가 필요하지 않습니다.
에이전트 이면의 기능
디자인팀이 실제로 작업하는 방식에 맞춰 구축된 Figma 에이전트만의 차별점을 자세히 살펴봅니다.
병렬 프롬프팅
여러 프롬프트를 한 번에 실행하여 방향성을 병렬로 평가하세요. 각 프롬프트를 순차적으로 실행하며 시간을 낭비할 필요가 없습니다.
공유 가능한 스레드
스레드를 공유하면 팀원들이 디자인 이면의 전체 프롬프트, 컨텍스트 및 반복 작업 기록을 볼 수 있습니다. 별도의 전달이 필요 없습니다.
스킬
팀의 업무 흐름과 규칙을 재사용 가능한 /commands로 패키징하여 누구나 필요에 따라 실행할 수 있습니다.
Figma는 마치 내 손이 자연스럽게 확장된 것처럼 느껴집니다. 캔버스에서 디자인 아이디어를 구상하고 나면, 이제 에이전트가 마지막 단계를 처리해 줍니다. 디자인 라이브러리가 연결되어 있어, 디자인에서 코드로 넘어가는 속도가 그 어느 때보다 빨라졌습니다.
Andy Madrick
Notion 제품 디자이너
Figma 에이전트를 시작하세요
1단계: 에이전트 열기
왼쪽 사이드 레일에서 에이전트(Agents)를 선택하거나 CMD + Enter 키를 누르세요. 캔버스에 결제 흐름이 생성될 프레임을 추가하세요.
2단계: 결제 흐름 설명
단계 수, 결제 옵션, 비회원 결제 지원 등 필요한 사항을 에이전트에게 알려주세요. 실제 컴포넌트를 사용할 수 있도록 에이전트를 디자인 라이브러리에 연결하세요.
3단계: 캔버스에서 검토
캔버스에서 생성된 화면을 확인하세요. 동일한 스레드에서 다듬거나 다른 흐름 구조를 탐색하기 위해 병렬 스레드를 시작하세요.
4단계: 계속 반복하기
단계를 조정하거나, 업셀(upsells)을 추가하거나, 레이아웃을 변경하려면 다시 프롬프트를 입력하세요. 모든 항목은 편집 가능한 상태로 유지되므로, 수동으로 미세 조정하거나 프롬프트를 계속 입력할 수 있습니다.
에이전트 전문가가 되어보세요
자주 묻는 질문
결제 흐름 생성기는 사용자가 구매를 완료할 때 거치는 화면과 단계(장바구니 검토, 배송 세부 정보, 결제 및 확인)를 빌드하도록 도와줍니다. Figma 에이전트는 디자인 시스템을 사용하여 캔버스에서 직접 이러한 흐름을 생성하므로, 일반적인 와이어프레임 대신 프로덕션 준비가 완료된 화면을 얻을 수 있습니다. 다양한 결제 구조와 레이아웃을 탐색하는 프로세스의 속도를 높여줍니다.
왼쪽 사이드 레일에서 Figma 에이전트를 열거나 CMD + Enter 키를 누르세요. 단계 수, 비회원 결제 옵션, 결제 방법 등 필요한 결제 흐름을 설명하고 에이전트를 디자인 라이브러리에 연결하세요. 에이전트가 실제 컴포넌트를 사용하여 캔버스에 화면을 생성합니다. 그 후 후속 프롬프트로 다듬거나 수동으로 편집할 수 있습니다.
완전한 결제 흐름에는 일반적으로 장바구니 요약, 배송 정보 양식, 결제 세부 정보, 주문 검토 및 확인 화면이 포함됩니다. 제품에 따라 비회원 결제 옵션, 저장된 주소, 프로모션 코드 필드 또는 업셀 모듈을 추가할 수 있습니다. Figma 에이전트는 기존 컴포넌트를 사용하여 이 모든 것을 생성할 수 있습니다. 프롬프트에 필요한 것을 설명하기만 하면 됩니다.
단 하나의 정답은 없으며, 제품과 대상에 따라 다릅니다. 일부 이커머스 사이트는 속도를 위해 단일 페이지 결제를 사용하고, 다른 사이트는 명확성을 위해 3~5단계로 나눕니다. Figma 에이전트를 사용하면 다양한 단계 수를 병렬로 생성하고 비교할 수 있으므로, 한 가지 접근 방식을 결정하기 전에 사용자에게 가장 적합한 방식을 평가할 수 있습니다.
Figma 에이전트는 모든 유료 Figma 요금제로 사용할 수 있습니다. Figma Design의 왼쪽 사이드 레일에서 찾을 수 있습니다. 현재 오픈 베타 기간 동안에는 AI 크레딧을 소모하지 않으므로, 지금 바로 사용해 보고 피드백을 공유해 주세요.
Figma 에이전트로 더 빠르게 빌드하세요