Hearing Responses to Figma LP Wireframe Generator
Sales & LeadsFree
Description
An MCP cross-service workflow that retrieves website design hearing responses from FORMLOVA and auto-builds an LP wireframe in Figma using the Plugin API. Places headlines, CTA text, metrics, pricing plans, FAQ content directly into the wireframe. Color, layout composition, and tone selections are reflected in the design. Generates a Figma file ready for designer handoff or first-round client presentation. Best used in combination with the Website Design Hearing Sheet Generator recipe.
4 steps
- 1
Get FORMLOVA response data
Retrieve the latest hearing sheet response
- 2
Create Figma file
Create a new Figma design file named after the company
Figma - 3
Build wireframe
Build all LP sections from response data using Plugin API
Figma - 4
Output reflection checklist
Display which section each hearing item was reflected in
Figma
Setup steps
Setup Steps
This workflow includes external service integrations. Follow the steps below to set it up.
- 1
Get FORMLOVA response data
Retrieve the latest hearing sheet response
Integration: FORMLOVA - 2
Create Figma file
Create a new Figma design file named after the company
Integration: Figma - 3
Build wireframe
Build all LP sections from response data using Plugin API
Integration: Figma - 4
Output reflection checklist
Display which section each hearing item was reflected in
Integration: Figma
Prompt Example
Generate an LP wireframe in Figma based on FORMLOVA hearing sheet responses.
Step 1: Retrieve the latest response from FORMLOVA form ID [enter form ID here].
Step 2: Create a new Figma design file named "[Company Name] - LP Wireframe".
Step 3: Build the wireframe using Figma Plugin API (use_figma) with these rules:
Base: 1440px wide, vertical Auto Layout, FILL width per section. Use main/sub colors from responses as accents. Greyscale base. Inter font. Gray placeholders for images (8px radius, labeled).
Sections: Build only sections selected in "Sections to include".
- hero = Nav + first view. Use headline, subheadline, CTA text from responses. Layout follows "First view layout" answer.
- problem = 3 pain point cards extracted from target user info
- solution = 3-step flow diagram from business description and strengths
- features = 3 strength cards with main/sub color accents
- numbers = Dark background, metrics displayed as large numbers
- pricing = 3-tier plan cards, center highlighted
- cases = 3 testimonial cards with quote + avatar placeholder
- flow = 4-step numbered flow with arrows
- faq = 5 Q&A items generated from business context
- cta_bottom = Dark background + CTA + security badges
- Footer with company info + links
Tone interpretation: modern_tech=dark sections, wide spacing; warm_friendly=soft colors, rounded; minimal_clean=maximum whitespace
Reflect design NOs from responses.
Step 4: Show Figma file URL and output a reflection checklist.
Likes
- steps
- 4 steps
- Required plan
- Free
- Required integrations
- FORMLOVAFigma