How to generate realistic json mock data for ui prototyping
- Step 1Define the data shape for the UI component — Identify what data each UI component needs: a user card needs name, email, avatar, role; a product tile needs title, price, rating, stock.
- Step 2Generate realistic data for the full prototype — Generate 20-50 records for list views, 1 detailed record for detail views. Include a few edge cases: one very long name, one zero-stock item, one null optional field.
- Step 3Load into Figma with a JSON plugin — Use the Figma 'Data Populator' or 'Content Reel' plugin to bind the generated JSON to text and image layers. The plugin populates each instance with a different record from the JSON array.
- Step 4Use in CodeSandbox for interactive prototypes — Paste the generated JSON as a const data = [...] in the sandbox's data file. The interactive prototype uses this data to render the full UI, showing exactly how the component behaves with realistic content.
Frequently asked questions
How many records should I generate for a UI prototype?+
Generate enough records to fill a realistic viewport: 8-12 for a card grid, 20-50 for a list view, 100+ for a table that shows pagination. Including at least 2x the visible records allows prototyping scroll behavior and pagination.
How do I generate realistic product prices for an e-commerce prototype?+
Configure the price field to generate random numbers in the realistic range for your product category: $15-$200 for consumer goods, $100-$5000 for electronics. Include some values at the extremes of the range to test how the UI handles very cheap and very expensive items.
Is the prototype data transmitted to JAD Apps?+
No. Mock generation runs entirely in your browser. Prototype content and design data are never transmitted to JAD Apps servers.
Privacy first
Conversion runs locally in your browser. No file is uploaded — only metadata counters are saved for signed-in dashboard stats.