🎛️ Pi Multi-FX Pedal UI — Figma Template

v1 · 480×320 touchscreen · 4.3" DSI
COLORS
bg=#1a1a2e · card=#2a2a4a · accent=#44aa99 · warn=#ee8855 · clip=#ff4444 · midi=#4488ff
🧩 ELEMENTS
▭ Knob (48×48)
▭ FX Block (72×48)
▭ Footswitch ⏺
T Title
T Label 10px
T Value 8px
📊 VU Meter
📡 Tuner
▭ Preset Slot
▭ Divider
MAIN SCREEN — RIG VIEW
🔊 Preset 03 — Crunch ⚡ 34% | 🎛️ BNK 1
AMP
GAIN
68
BASS
52
MID
45
TREBLE
61
VOL
72
FX CHAIN
🎸 NS Gate
🔊 Comp
🔥 OD
🌀 Chorus
⏳ Delay
🌊 Reverb
A
B
C
D
▲
▼
SCREEN LAYOUT
Status bar
preset name + CPU
AMP section
5 knobs, values inline
FX chain row
scrollable, active/bypassed
Footswitch bar
A-D + bank nav
ALTERNATE SCREENS
🎛️ FX Edit
📋 Presets
🎸 Captures
🏚️ IRs
⚙️ Settings
📡 Tuner
SIGNAL FLOW — 4CM
🎸 Guitar
→
Noise Gate
→
Compressor
→
OD / Dist
→
PRE blocks
→
SEND → Amp
RETURN ← FX
→
POST blocks
→
Delay
→
Reverb
→
🔊 Output
🎛️ FX EDIT PANEL (tap a block)
MIX
TIME
FDBK
TONE
Per-FX params from block-params schema
📋 PRESET BROWSER
01 Clean Fender Twin
02 Blues Marshall Bluesbreaker
03 Crunch ▶ Playing
04 Lead ——
VU METERS
INPUT
OUTPUT
PEAK
-6.2
dBu
📝 DESIGN NOTES
• Screen: 480×320 @ 4.3" DSI — design at 1x, renders pixel-perfect on the LCD
• Color scheme: dark bg (#1a1a2e) with green accent (#4a9) for active state
• Knobs: 48×48px on touch targets (Fitts-friendly), 24×24px in the mockup here
• FX chain row scrolls horizontally if >6 blocks — indicator dots at bottom
• Status bar: preset name left, CPU/memory right. Red if >80% CPU
• Footswitch row doubles as page indicator (active = current screen)
• 4CM mode shows SEND/RETURN labels on the split point in the FX chain