Skip to main content

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.

Back to top