Skip to main content

Examples

Complete page examples using real Figdown syntax. Each example shows a full .figdown file you can paste directly into the playground.

Landing page

A SaaS landing page with a hero, pricing cards, and a waitlist modal.

theme: light

nav:
logo: Figdown
link: Docs → /docs
link: Examples → /examples
link: Pricing → /pricing
primary button: Get Started → [modal: waitlist]

hero:
title: Wireframe in plain text
subtitle: Figdown turns simple text into interactive UI mockups. No GUI, no exports — just type and see.
large primary button: Try in playground → /playground
large outline button: Read the docs → /docs

---

blue alert: **New in v2.0:** Multi-file support, custom themes, and folder mode.

centered title: Simple pricing

row:
1/3 card:
## 🎁 Free
Perfect for solo projects and exploration.

full outline button: Get Started → [modal: waitlist]

1/3 card:
row:
## 🚀 Pro
blue badge: Popular

For teams that ship fast.

full primary button: Start Free Trial → [modal: waitlist]

1/3 card:
## 🏢 Enterprise
Custom contracts and dedicated support.

full outline button: Contact Sales

modal: waitlist
## Join the Waitlist
email input: Your email address...
full primary button: Reserve my spot

footer:
logo: Figdown
link: Docs → /docs
link: GitHub → https://github.com

Settings form

A settings page with tabs, inputs, toggles, and a danger zone.

theme: light

nav:
logo: MyApp
link: Dashboard → /
link: Projects → /projects
link: Settings → /settings

breadcrumb:
link: Home → /
link: Settings

centered title: Account Settings

tabs: Settings
tab: Profile
full input: Display name...
email input: Email address...
full textarea: Short bio...
tooltip: Why do we need this?
Your bio appears on your public profile and shared project links.
full primary button: Save changes

tab: Notifications
checked toggle: Email alerts
checked toggle: Weekly digest
toggle: Marketing emails
toggle: Product announcements
full primary button: Save preferences

tab: Security
password input: Current password...
password input: New password...
password input: Confirm new password...
full primary button: Update password

---

red alert: **Danger zone** — the actions below are irreversible.
full danger button: Delete account → [modal: confirm-delete]

modal: confirm-delete
## Delete your account?
This will permanently delete all your data. There is no undo.
full danger button: Yes, delete my account
full ghost button: Cancel

footer:
logo: MyApp
link: Privacy → /privacy
link: Terms → /terms

Dashboard

An analytics dashboard with a sidebar, stat cards, progress bars, and a data table.

theme: light

nav:
logo: Dashboard
link: Overview → /
link: Reports → /reports
link: Team → /team
outline button: Export → /export

1/4 sidebar:
card:
## Navigation
link: Overview → /
link: Traffic → /traffic
link: Revenue → /revenue
link: Conversions → /conversions

---

gray badge: Q2 2026

card:
## Summary

row:
1/2 card:
## Users
blue badge: +12%
Total signups this month.
1/2 card:
## Revenue
green badge: +8%
MRR vs last month.

---

## Upload progress

green progress: Assets synced 100%
blue progress: Reports generated 72%
progress: Data indexed 38%

---

## Team members

| Name | Role | Status |
|--------|---------|--------|
| Alice | Admin | Active |
| Bob | Editor | Active |
| Carol | Viewer | Paused |

outline button: Manage team

footer:
logo: Dashboard
link: Help → /help
link: Status → /status