Figma Prototype

/figma-prototype — Create Interactive Prototypes

> Build interactive prototypes in Figma with flows, transitions, and user journey mapping. Generates prototype HTML for testing. Requires /figma-use.

Freedom Level: High

Full creative freedom for interactions and flows. Must use existing components and follow atomic structure.

When to Use

• Creating clickable prototypes for user testing
• Demonstrating user flows (onboarding, checkout, auth)
• Building interactive presentations for stakeholders
• Generating standalone HTML prototypes via memi prototype

Workflow

Step 1: Define the User Journey

Map the flow as screens + transitions:

Onboarding Flow:
  Welcome → Feature 1 → Feature 2 → Feature 3 → Dashboard

Auth Flow:
  Login → [success] → Dashboard
  Login → [forgot] → ForgotPassword → ResetEmail → Login
  Login → [signup] → Signup → VerifyEmail → Dashboard

Checkout Flow:
  Cart → Shipping → Payment → Review → Confirmation

Step 2: Create Screens

For each screen in the flow:

1. Check if the page spec exists → read specs/pages/
2. If exists → use_figma to create from spec
3. If new → plan atomic decomposition, build bottom-up
4. Create all screens on the same Figma page
5. Arrange in a flow layout (horizontal, spaced)

Step 3: Add Interactions

// Navigate on click
button.reactions = [{
  action: { type: 'NODE', destinationId: nextScreenId, navigation: 'NAVIGATE' },
  trigger: { type: 'ON_CLICK' }
}];

// Smart animate between states
button.reactions = [{
  action: {
    type: 'NODE',
    destinationId: nextScreenId,
    navigation: 'NAVIGATE',
    transition: {
      type: 'SMART_ANIMATE',
      easing: { type: 'EASE_IN_OUT' },
      duration: 0.3
    }
  },
  trigger: { type: 'ON_CLICK' }
}];

// Overlay (modal, dropdown)
trigger.reactions = [{
  action: {
    type: 'NODE',
    destinationId: overlayId,
    navigation: 'OVERLAY',
    overlayRelativePosition: { x: 0, y: 0 }
  },
  trigger: { type: 'ON_CLICK' }
}];

Step 4: Transition Types

| Transition | Use Case | Duration | |-----------|----------|----------| | DISSOLVE | Page navigation | 0.2s | | SMART_ANIMATE | State changes, morphing | 0.3s | | MOVE_IN | Sheets, side panels | 0.25s | | SLIDE_IN | Page push transitions | 0.3s | | PUSH | Stack navigation (mobile) | 0.3s |

Step 5: Self-Healing Validation

Run the self-healing loop from /figma-use for each screen. Additionally: verify all interactions connect, no dead-end screens, consistent transition types within each flow.

Step 6: Generate Prototype HTML

memi prototype → generates prototype/prototype.html

This creates a standalone HTML file with all screens and click-through navigation, viewable in any browser.

Flow Layout in Figma

Arrange screens in a clear flow:

Section "User Flow: Onboarding"
├── [Welcome]  ──→  [Feature 1]  ──→  [Feature 2]  ──→  [Dashboard]
│                                                    ↗
├── [Login]  ──→  [Dashboard]
│     ↓
├── [ForgotPwd]  ──→  [ResetEmail]  ──→  [Login]
│     ↓
└── [Signup]  ──→  [VerifyEmail]  ──→  [Dashboard]

Spacing: 200px between screens (horizontal)
Connection lines: use FigJam connectors or annotation arrows

Spec Integration

Each screen in the prototype should have a PageSpec:

memi spec page Welcome
memi spec page FeatureHighlight
memi spec page Dashboard

The prototype flow itself is captured in an IA spec:

memi ia create OnboardingFlow

Anti-Patterns

• Dead-end screens with no navigation
• Inconsistent transition types within the same flow
• Missing back/cancel actions
• Screens not built from reusable components
• Floating screens outside the flow Section
• Not generating the HTML prototype for stakeholder review

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: sarveshsea
• Source: sarveshsea/design-skills
• License: MIT
• Homepage: https://www.memoire.cv/notes/community/

Install and usage instructions live in the source repository linked above.