Key Features

• Visual Mapping: Bridge the gap between UI design and API responses by visually mapping UI elements to specific JSON fields.

• Screenshot Integration: Drop any UI screenshot (Figma export, staging, phone capture) onto the canvas for annotation.

• API Collection Import: Supports importing Postman collections (v2.1), OpenAPI/Swagger specs, HAR files, and Bruno collections.

• Interactive Field Tree: API responses unfold into a browsable, clickable field tree, showing exact data structures.

• Direct Binding: Draw rectangles on UI elements and link them directly to corresponding JSON fields.

• Multiple Format Support: Accepts various API data formats including Postman, OpenAPI, HAR, Bruno, and raw JSON.

• Collaboration: Make the contract between API and UI visible, trackable, and permanent for teams.

How it Works

API Sketch streamlines the handoff process between designers and developers. Designers provide a UI screen, while developers work with API endpoints. Often, the field names and structures differ, leading to confusion and errors. API Sketch visualizes this mapping:

1. Screenshot Drop: Upload a screenshot of your UI screen.

2. Collection Drop: Import your API collection (e.g., Postman).

3. Mapping: Draw boxes on the UI elements and bind them to the corresponding fields from your API response. This creates a clear, visual contract that eliminates ambiguity.