gridi 사용 가이드

gridi에서 효율적인워크플로우를 경험하세요

Web to Figma

운영 중인 서비스를 탐색하고
Figma로 내보내기

gridi는 운영 중인 서비스를 직접 탐색합니다. 서비스의 스크린샷과 함께 서비스의 플로우를 보여주는 프로덕트 맵을 생성합니다.
프로덕트 맵은 페이지 단위로 생성되며, Figma의 gridi 플러그인을 통해 페이지별 UI를 수정 가능한 피그마 파일로 내보낼 수 있습니다.

01

gridi 시작하기

gridi 웹에서 시작할 수 있습니다.

  • gridi 웹에서 회원가입 및 로그인
  • 탐색할 제품 URL 입력
  • 도메인 인증 및 플랜 활성화
Web to Figma 시작 화면
02

AI 제품 탐색

AI가 실제 운영 중인 제품을 직접 탐색합니다.
탐색 시간은 제품 규모에 따라 약 5~15분 정도 소요됩니다.

  • 로그인 이후 화면 탐색 지원
  • 페이지 흐름 자동 수집
  • 모달 / 상태 / 오류 케이스 탐색
  • 프로덕트맵 자동 생성
AI 제품 탐색 화면
03

프로덕트맵 확인

탐색이 완료되면 제품 구조를 시각적으로 확인할 수 있습니다. 단순 화면 캡처가 아니라, 실제 제품 구조를 기반으로 탐색 결과를 제공합니다.

  • 페이지 구조 확인
  • 사용자 플로우 확인
  • 화면 간 연결 관계 확인
  • export할 화면 선택
프로덕트맵 확인 화면
04

Figma로 Export

Figma 플러그인에서 gridi 계정으로 로그인하여, export할 페이지를 선택합니다. 페이지 규모에 따라 약 30초~1분 정도 소요됩니다.

  • 프로젝트 선택
  • export할 페이지 선택
  • Export to Figma 실행
Figma export 선택 화면
Figma export 상세 화면
05

Editable Figma 생성

탐색된 운영 UI가 수정 가능한 Figma 구조로 변환됩니다.

  • 페이지 구조
  • 컴포넌트 구조
  • 레이어 구조
  • 버튼 / 모달 / 상태 UI
  • 화면별 흐름 구조
수정 가능한 Figma 결과 화면