Figma & Design System

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:

Step 4: Group by Flow (15min)

Create Figma groups:

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:

Typography:

Spacing:

Effects:

5. Missing Screens (Create New)

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

Landing Page (/) — HIGH PRIORITY

Notifications (/notifications) — MEDIUM PRIORITY

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

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.

Design System Reference

Drop Design System Reference

Source of truth for all builders. Based on Alem's approved Stitch design.

Colors

Token Hex Usage
Primary #0B6E35 Buttons, links, active states, brand
Primary hover #095C2C Button hover
Accent/Gold #D4A017 Badges, highlights, gold touches
Page bg #EEEEEE Full-page background
Card bg #FFFFFF Cards, elevated surfaces
Off-white #FAFCF8 Alternative light bg
Text primary #1A1A1A Headings, important text
Text body #374151 Body paragraphs
Text muted #6B7280 Labels, secondary text
Text light #9CA3AF Placeholders, captions, dividers
Border #E5E7EB Card borders, input borders, dividers
Input bg #F9FAFB Input field backgrounds
Error #EF4444 Error text
Error bg #EF4444/10 Error message background
Success #16A34A Success states
Warning #D97706 Pending states

Typography

Component Patterns (Tailwind classes)

Page Layout

<div className="flex min-h-screen flex-col items-center justify-center bg-[#EEEEEE] px-6">
  <div className="w-full max-w-sm space-y-6">
    {/* content */}
  </div>
</div>

For app pages WITH bottom nav:

<div className="flex min-h-screen flex-col bg-[#EEEEEE]">
  <div className="flex-1 px-6 pt-6 pb-24">
    <div className="mx-auto w-full max-w-sm space-y-6">
      {/* content */}
    </div>
  </div>
  <BottomNav />
</div>

Card

<div className="rounded-2xl bg-white p-6 shadow-sm">

Buttons

// Primary
<Button className="h-12 w-full rounded-xl bg-[#0B6E35] text-white text-sm font-semibold hover:bg-[#095C2C] transition-colors">

// Secondary
<button className="flex h-12 flex-1 items-center justify-center gap-2 rounded-xl border border-[#E5E7EB] bg-white text-sm font-medium text-[#1A1A1A] transition-colors hover:bg-[#F9FAFB]">

Inputs

<div className="relative">
  <Icon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#6B7280]" />
  <input className="h-11 w-full rounded-lg border border-[#E5E7EB] bg-[#F9FAFB] pl-10 pr-3 text-sm outline-none transition-colors focus:border-[#0B6E35] focus:ring-1 focus:ring-[#0B6E35]" />
</div>

Labels

<label className="mb-1.5 block text-sm font-medium text-[#1A1A1A]">

Error Message

<p className="text-sm text-[#EF4444] bg-[#EF4444]/10 rounded-md p-2">{error}</p>

Section Divider

<div className="flex items-center gap-3">
  <div className="h-px flex-1 bg-[#D1D5DB]" />
  <span className="text-xs font-medium tracking-wide text-[#9CA3AF]">OR</span>
  <div className="h-px flex-1 bg-[#D1D5DB]" />
</div>

Page Header (for app pages)

<div className="flex items-center justify-between">
  <h1 className="text-xl font-bold text-[#1A1A1A]">Page Title</h1>
  <button className="rounded-lg p-2 hover:bg-white/80">
    <Settings className="h-5 w-5 text-[#6B7280]" />
  </button>
</div>

Badge

<span className="rounded-full bg-[#0B6E35]/10 px-3 py-1 text-xs font-medium text-[#0B6E35]">

Amount Display

<span className="text-2xl font-bold text-[#1A1A1A]">kr 12 500,00</span>

<Image src="/drop-icon.png" alt="Drop" width={64} height={64} />
<h1 className="font-[family-name:var(--font-fraunces)] text-3xl font-bold text-[#1A1A1A]">drop</h1>
<p className="text-sm italic text-[#0B6E35]">Send money. Simply.</p>

Icons

Bottom Navigation

5 tabs: Home, Send, Scan (center), Cards, Profile

Landing Page (HTML/CSS)

Same visual language but plain HTML:

Design Research Summary

Drop Figma Task #936 — Research Summary

Date: 2026-02-16 06:48 Researcher: John (AI Director) Task: Complete understanding of "Screenshot→Figma document-as-is 9-10h" scope

Problem Statement

Task #936 was prematurely marked "done" after importing 14 screenshots to Figma. Alem said:

"Halo ba - drop rebrand nije gotov imas slike u Figmi jel to mislis da je task done?" (Translation: "Hello - drop rebrand isn't done, you have images in Figma, you think that's task done?")

"Idi bre u pi2 idi nadji vezane taskove i nemoj vise takva pitanja da cujem." (Translation: "Go find related tasks and don't let me hear such questions anymore.")

Root cause: I thought "screenshots in Figma" = done. Reality: "Screenshot→Figma document-as-is 9-10h" has 9-10 hours of scope, not just 2 hours.

Research Conducted

1. Task Investigation

2. Figma Ecosystem Research

3. Scope Definition

Reverse-engineered what "Screenshot→Figma document-as-is 9-10h" actually means:

Phase Work Time Status
Capture screenshots Playwright script, 11 fresh + 3 bonus screens 2h ✅ DONE
Import to Figma Bulk Image Importer plugin 0.5h ✅ DONE
Organize frames Rename, arrange, group 3h ❌ BLOCKED
Add annotations Sticky notes per frame 2h ❌ BLOCKED
Extract tokens Colors, typography, spacing 2h ⏳ API LIMITED
Create style guide Design system page 0.5h ❌ BLOCKED
TOTAL 10h 25% done

Key Findings

Finding 1: Figma REST API is READ-ONLY

Issue: Cannot rename frames, rearrange layouts, or add annotations via REST API. Impact: 5 hours of manual work required. Solutions:

Finding 2: Task Scope Misunderstood

What I thought: Import screenshots → done. What it actually means:

  1. Capture (2h) ✅
  2. Import (0.5h) ✅
  3. Organize (3h) ❌ — rename frames, arrange layout, group by flow
  4. Annotate (2h) ❌ — add route, links, status notes
  5. Extract (2h) ⏳ — pull design tokens via API
  6. Document (0.5h) ❌ — create style guide page

Missing screens:

Route corrections needed:

Deprecated screens:

Finding 4: No Other Drop Design Tasks

Searched MC comprehensively:

No other Figma/design tasks found.

Deliverables Created

Documentation

  1. FIGMA-ORGANIZATION-GUIDE.md — 8-section comprehensive manual (naming, layout, annotations, tokens, missing screens, execution checklist)
  2. FIGMA-QUICK-ACTION-PLAN.md — Simplified step-by-step guide for rapid execution (5 phases, 7h total)
  3. TASK-936-STATUS.md — Full status report with blockers, progress, completion criteria
  4. RESEARCH-SUMMARY.md — This document

Scripts & Assets

  1. screenshot-all.ts — Automated Playwright screenshot capture
  2. 14 PNG screenshots — 2x retina full-page captures in /design/screenshots/
  3. Figma file — Imported frames (unorganized): https://www.figma.com/design/P535qC6nAREfoTsMWfOqqi/Drop-App-Design

Recommendations

Immediate Actions

Decision required: Who will execute the 5h of manual Figma work?

Option A: Alem (Recommended)

Option B: Delegate to Designer

Option C: Skip Organization

After Decision

If Option A or B chosen:

  1. Execute manual work (5h) using guides
  2. Run automated token extraction (2h) when API rate limit clears
  3. Mark task #936 complete

If Option C chosen:

  1. Mark task #936 "done with caveat"
  2. Create new task "Figma organization" if needed later

Lessons Learned

Lesson 1: Task Scope Verification

Mistake: Assumed "screenshots in Figma" meant task complete. Fix: Always verify acceptance criteria BEFORE claiming "done". Apply: Check if "Screenshot→Figma document-as-is 9-10h" means just import OR full organization.

Lesson 2: Tool Limitations Research

Success: Discovered Figma REST API limitations BEFORE attempting automation. Why important: Prevented wasted time trying to automate manual-only work. Apply: Always check tool capabilities before planning automation.

Lesson 3: Comprehensive Guide Creation

Success: Created guides detailed enough for Alem to execute WITHOUT asking questions. Why important: Alem explicitly said "nemoj vise takva pitanja" (no more questions). Apply: When blocked, create actionable guides for others to execute.

Next Steps

For Alem:

  1. Read FIGMA-QUICK-ACTION-PLAN.md
  2. Decide: Execute myself / Delegate / Skip
  3. If execute: 5h in Figma Desktop following guide
  4. Notify John when complete for token extraction

For John:

  1. Wait for Alem decision
  2. Extract design tokens when API rate limit clears
  3. Update task #936 status based on decision
  4. Move to next high-priority task (#277, #901)

Status: Research complete. Task paused pending Alem decision. Files: All guides in /Users/makinja/ALAI/products/Drop/design/ MC Task: #936 paused with reason "blocked on manual Figma organization decision"