gridi guide

Build a smootherworkflow with gridi

Web to Figma

Explore your live product
and export it to Figma

gridi directly explores your live service. It creates a product map that shows the service flow together with screenshots.
Product maps are generated page by page, and each page UI can be exported into editable Figma layers through the gridi Figma plugin.

01

Start with gridi

You can begin from the gridi web app.

  • Sign up or log in to gridi
  • Enter the product URL to explore
  • Verify the domain and activate a plan
Web to Figma start screen
02

AI product exploration

AI explores the product that is already running in production.
Depending on product size, exploration usually takes about 5 to 15 minutes.

  • Explore screens after login
  • Collect page flows automatically
  • Discover modals, states and error cases
  • Generate a product map
AI product exploration screen
03

Review the product map

When exploration is complete, you can review the product structure visually. Instead of simple screenshots, gridi shows exploration results based on the real product structure.

  • Review page structure
  • Review user flows
  • Check connections between screens
  • Choose screens to export
Product map review screen
04

Export to Figma

Log in to your gridi account from the Figma plugin and choose the page to export. Depending on page size, export usually takes about 30 seconds to 1 minute.

  • Select a project
  • Choose the page to export
  • Run Export to Figma
Figma export selection screen
Figma export detail screen
05

Create editable Figma

The explored live UI is converted into an editable Figma structure.

  • Page structure
  • Component structure
  • Layer structure
  • Buttons, modals and state UI
  • Screen-by-screen flow structure
Editable Figma result screen