Figma Organization Guide

Drop Figma Organization Guide

Task: #936 completion - "Screenshot→Figma document-as-is 9-10h" Current Status: 14 screenshots imported, organization/documentation incomplete Estimated Time: 7-8 hours remaining work

---

1. Current State

Figma File: Drop App Design File Key: P535qC6nAREfoTsMWfOqqi

Imported Screenshots (14 total):

Fresh (Feb 15, 23:04):

1. home.png
2. login.png
3. register.png
4. dashboard.png
5. accounts.png
6. cards.png
7. send.png
8. scan.png
9. transactions.png
10. notifications.png
11. profile.png

Bonus (Feb 13): 12. onboarding.png 13. history.png 14. merchant.png

---

2. Frame Organization Plan

Step 1: Rename All Frames (30min)

Naming Convention: {flow}-{number}-{screen-name}

Current Name	New Name	Category
home.png	00-landing-home	Public
login.png	01-auth-login	Auth Flow
register.png / onboarding.png	02-auth-register	Auth Flow
dashboard.png	10-main-dashboard	Main App
send.png	11-main-send	Main App
scan.png	12-main-scan	Main App
cards.png	13-main-cards	Main App
transactions.png / history.png	14-main-transactions	Main App
accounts.png	20-profile-accounts	Profile Flow
notifications.png	21-profile-notifications	Profile Flow
profile.png	22-profile-settings	Profile Flow
merchant.png	99-error-merchant	Error/Deprecated

Note: merchant.png is an error page (not in architecture), mark for removal.

Step 2: Arrange Layout (1h)

Page Structure:

┌─ PUBLIC ──────────────────────┐
│ 00-landing-home               │
└───────────────────────────────┘

┌─ AUTH FLOW ───────────────────┐
│ 01-auth-login                 │
│ 02-auth-register              │
└───────────────────────────────┘

┌─ MAIN APP ────────────────────┐
│ 10-main-dashboard             │
│ 11-main-send                  │
│ 12-main-scan                  │
│ 13-main-cards (FUTURE)        │
│ 14-main-transactions          │
└───────────────────────────────┘

┌─ PROFILE FLOW ────────────────┐
│ 20-profile-accounts           │
│ 21-profile-notifications      │
│ 22-profile-settings           │
└───────────────────────────────┘

┌─ DEPRECATED ──────────────────┐
│ 99-error-merchant (DELETE)    │
└───────────────────────────────┘

Layout: 3 columns, 12 rows, 240px spacing between frames

Step 3: Add Frame Headers (30min)

For each section, add text frame above:

• "PUBLIC" — 48px Fraunces Bold, Forest Green (#0B6E35)
• "AUTH FLOW" — Landing → Login → Register
• "MAIN APP" — Core features (Dashboard, Send, Scan, Cards, Transactions)
• "PROFILE FLOW" — User settings and preferences
• "DEPRECATED" — Screens to remove (red text #EF4444)

Step 4: Group by Flow (15min)

Create Figma groups:

• Group: Public — Frame 00
• Group: Auth — Frames 01-02
• Group: Main App — Frames 10-14
• Group: Profile — Frames 20-22
• Group: Deprecated — Frame 99

---

3. Annotations & Documentation (2h)

Add Text Annotations in Figma

For each frame, add sticky note with:

1. Screen Name — User-facing name
2. Route — URL path
3. Access — Public / Auth required
4. Links To — Which screens this connects to
5. Status — ✅ Built | 🚧 WIP | ❌ Missing

Example Annotation (Login):

SCREEN: Login
ROUTE: /login
ACCESS: Public
LINKS TO:
  → Dashboard (on login success)
  → Register (via "Opprett konto")
STATUS: ✅ Built (rebrand complete)
NOTES: Email + Password + BankID/Vipps options

Complete Annotation Reference

Frame	Screen	Route	Links To	Status
00	Landing	/	Login, Register	❌ Missing design
01	Login	/login	Dashboard, Register	✅ Built
02	Register	/register	Login, Dashboard	✅ Built (route mismatch: app uses /onboarding)
10	Dashboard	/dashboard	Send, Scan, Transactions, Profile	✅ Built
11	Send	/send	Dashboard, Scan	✅ Built
12	Scan	/scan	Dashboard, Send	✅ Built
13	Cards	/cards	Dashboard	✅ Built (FUTURE - placeholder)
14	Transactions	/transactions	Dashboard	✅ Built (route mismatch: app uses /history)
20	Accounts	/accounts	Profile, Dashboard	✅ Built
21	Notifications	/notifications	Profile, Dashboard	❌ Missing implementation
22	Profile	/profile	Accounts, Notifications, Settings, Dashboard	✅ Built
99	Merchant	/merchant	—	❌ Error page (remove from app)

---

4. Design Token Extraction (2h)

Extract from Figma Variables

Run automated extraction:

cd /Users/makinja/ALAI/products/Drop
node ~/system/tools/figma-extract.js extract-tokens P535qC6nAREfoTsMWfOqqi > design/design-tokens-extracted.json
node ~/system/tools/figma-token-sync.js P535qC6nAREfoTsMWfOqqi --format all --output design/tokens/

Create Style Guide Page in Figma

Add new page "Design System Reference" with:

Colors:

• Forest Green: #0B6E35 (Primary, buttons, links)
• Gold: #D4A017 (Accent, logo dot, highlights)
• Off-White: #FAFCF8 (Background)
• Charcoal: #2C2C2C (Text primary)
• Gray: #6B7280 (Text secondary)

Typography:

• Display: Fraunces 700 (brand, headings)
• Body: DM Sans 400/500/600 (UI, content)

Spacing:

• 4px base unit
• Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96

Effects:

• Drop Shadow: 0 4px 6px rgba(0,0,0,0.1)
• Card Shadow: 0 2px 8px rgba(0,0,0,0.08)

---

5. Missing Screens (Create New)

Per gap-analysis-2026-02-14.md:

Landing Page (/) — HIGH PRIORITY

• Status: ❌ Missing from Figma AND app
• Action: Create Figma design first, then implement
• Reference: Drop marketing site, public-facing

Notifications (/notifications) — MEDIUM PRIORITY

• Status: Screenshot exists, but implementation missing
• Action: Verify screenshot matches spec, then build

---

6. Route Corrections

Current vs Architecture mismatches:

App Route	Architecture Route	Action
/onboarding	/register	Rename route in app code
/history	/transactions	Rename route in app code

---

7. Execution Checklist

• 30min: Rename all 14 frames per naming convention
• 1h: Arrange frames in grid layout (Public → Auth → Main → Profile → Deprecated)
• 30min: Add section headers (text frames)
• 15min: Group frames by flow
• 2h: Add annotations for each screen (sticky notes)
• 2h: Extract design tokens + create style guide page
• 1h: Create missing Landing page design
• 30min: Verify Notifications screenshot vs spec

Total: ~7.25 hours

---

8. Acceptance Criteria

Task #936 is complete when:

✅ All 14 screenshot frames renamed with clear convention ✅ Frames arranged in logical user flow layout ✅ Section headers added (Public, Auth, Main, Profile) ✅ All frames grouped by category ✅ Each frame has annotation (route, links, status) ✅ Design tokens extracted to design/tokens/ ✅ Style guide page created in Figma ✅ Missing Landing page design created ✅ Figma file = comprehensive reference document for dev team

---

Next: Execute this plan in Figma Desktop, or delegate to designer.