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): 
 
 home.png 
 login.png 
 register.png 
 dashboard.png 
 accounts.png 
 cards.png 
 send.png 
 scan.png 
 transactions.png 
 notifications.png 
 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: 
 
 Screen Name — User-facing name 
 Route — URL path 
 Access — Public / Auth required 
 Links To — Which screens this connects to 
 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.