# 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](https://www.figma.com/design/P535qC6nAREfoTsMWfOqqi/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:

```bash
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.