Figma Wireframe SOP
Purpose
Defines when and how to create Figma wireframes for client website projects. Figma is the standard wireframing tool for Symphony Core website design work.
When to Use
| Scenario | Requirement |
|---|---|
| Home page design | Required -- always wireframe before Elementor build |
| Custom-layout inner pages | Recommended -- pages that do not follow an existing starter template |
| Inner pages following established patterns | Optional -- use at designer's discretion |
Setup
- Account: Use the SC Figma account (credentials in 1Password)
- File naming:
{client-slug}-website-wireframe - Location: Create in the client's Figma project folder or SC shared design space
Wireframe Conventions
Desktop Layout
- Artboard width: 1440px
- Content area width: 1200px (matches Elementor default)
- Use placeholder boxes for images; use real text for headings and CTAs
- Annotate each section with:
- Section name (e.g., "Hero", "Services Grid", "Testimonials")
- Intended Elementor widget type (e.g., "Image Carousel", "Icon Box")
- Link targets for CTAs and navigation items
Mobile Layout
- Include a mobile breakpoint at 375px for the home page at minimum
- Verify text remains readable and CTAs are tappable at mobile size
Required Annotations
- Hero section boundaries
- CTA placement and link destinations
- Form locations (note which GHL form)
- Header and footer zones
- Any sections that differ from the starter template
Client Brand Integration
- Logo: Pull from GHL Media Storage > Logos/ folder (see Logo Format Guide)
- Colors: Use client brand colors from client profile or brand voice document
- Typography: Match the font families that will be configured in Elementor global fonts
Approval and Handoff
- Share Figma link with AM/Rohit for internal review
- After internal approval, share with client for sign-off
- Once client approves, the wireframe becomes the build spec for Elementor development
- Developer references the wireframe during Phase 4 (Development) of the Website Project Template
Related Documents
- Logo Format Guide -- Logo sourcing and naming
- Elementor Best Practices Guide -- Elementor implementation standards
- Website Project Template -- Standard website project phases
- Brand Voice Template -- Client brand identity reference
- Design & Brand SOP -- Branding deliverable workflow
- GHL Asset Handoff SOP -- downstream: wireframe form and CTA annotations feed the GHL asset handoff record
Document Information
Version: 1.0 Created: 2026-03-18 Review Schedule: Quarterly