Lewati ke konten utama

📋 Figma Cleanup & Systematization Checklist

Timeline: 4 minggu (Week 1-4) · Owner: Senior Designer · File: Amal E-Santri Design System

Progress tracking: Centang checkbox [ ] → [x] saat selesai. Weekly review dengan PM setiap Jumat.

🗓️ WEEK 1 — Strategic Cleanup & Copy Audit​

Day 1-2: Decision & Triage (4-6 jam)​

  • Stakeholder meeting 2 jam dengan PM + Tech Lead. Agenda:

    • Approve canonical Dashboard: Polished (25:2) atau "Dark Mode" (30:2)? Recommended: Polished
    • Approve canonical palette: Tailwind emerald/zinc? (default)
    • Approve font family: Inter only? (recommended — simpler)
    • Approve bottom nav: 6 tab dengan Tabungan atau 5 tab + More menu?
    • Meeting notes di-save sebagai "ADR-001 Canonical Decisions" di Notion/Confluence

  • Setup file organization:

    • Pindah "Dashboard (Dark Mode) — 30:2" (yang mislabeled) ke frame baru "🗄️ Archive / Explorations"
    • Jangan dihapus — archive saja untuk history
    • Tambahkan label "ARCHIVED" di frame title

  • Audit naming inconsistency:

    • List semua 42 frame → cek format Parent / [ScreenName] atau Parent / [Category] / [ScreenName] / [State]
    • Standardize ke format terakhir (lihat 06-naming-convention-guide.md)
    • Rename frame satu per satu

Day 3-5: Copy & Content Audit (10-12 jam)​

  • Greeting pattern (lihat 03-copy-standardization-matrix.md):

    • Rename headline jadi: Assalamu'alaikum,\n{FirstName} (dua baris)
    • Rename subtitle jadi: {TimeGreeting} · {PrayerContext} (contoh: "Selamat pagi · Waktu Dhuha")
    • Apply di SEMUA screen yang punya hero/greeting (Dashboard, Splash, Onboarding)

  • Empty state pattern standardize:

    • Tagihan Kosong (39:2): ✅ Sudah bagus, tetap
    • Nilai Kosong (39:32): Fix text truncation — shorten subtext jadi max 2 baris
    • Offline (39:62): Change button style outline → filled primary (match Server Error)
    • Server Error (39:99): ⚠️ Tambahkan bottom nav (sekarang hilang) + fix text truncation
    • Konsistensi circle size: semua 140×140px (Offline yang 160×160 → 140)

  • Copy review per screen — buka 03-copy-standardization-matrix.md, update sesuai rekomendasi

  • Islamic phrase consistency:

    • "Assalamu'alaikum" — tanpa coma di akhir kecuali langsung disambung nama
    • "Alhamdulillah" di celebration states
    • "Jazakumullah khairan" di thank-you / payment success
    • "Barakallahu fiik" di achievement / milestone

Week 1 Deliverable: File yang namespace-nya bersih, copy consistent, archive yang lama.

🗓️ WEEK 2 — Design Tokens Foundation​

Day 1: Install & Setup (2 jam)​

  • Install plugin Tokens Studio for Figma
  • Buka plugin → Settings → JSON → Import file tokens/tokens-starter.json dari Design Kit
  • Verify import sukses: harus muncul 4 token sets (core, semantic, semantic/light, semantic/dark)
  • Verify 2 themes muncul (Light, Dark)

Day 2: Color System Migration (8-10 jam)​

  • Di Tokens Studio, klik "Apply Themes" → pilih Light

  • Ini akan generate Figma Variables collection otomatis

  • Migrate color di 42 screen — pakai pattern berikut:

    • Select layer dengan hardcoded color → Tokens Studio → Apply token
    • Background → surface/background
    • Card bg → surface/card
    • Text primary → text/primary
    • Text secondary → text/secondary
    • Border → border/default
    • Primary button bg → brand/primary
    • Success elements → feedback/success-bg + feedback/success-text
    • Status badges → status/hadir, status/izin, dst
    • Payment status → status/lunas, status/belum-bayar, status/overdue

  • Validation QA:

    • Install plugin "Design Lint" atau "Contrast"
    • Run lint → pastikan 0 hardcoded color remaining
    • Screenshot before/after Dashboard untuk arsip

Day 3: Typography System (6-8 jam)​

  • Di Tokens Studio → apply typography tokens

  • Ini generate Text Styles di Figma

  • Apply text styles di SEMUA text layer:

    • Hero name (e.g. "Fatimah") → display
    • Section headers (e.g. "Akses Cepat", "Hari Ini") → h3
    • Card titles → h4
    • Body content → body
    • Metadata / small text → body-sm atau caption
    • Category labels (e.g. "ASSALAMU'ALAIKUM", "SANTRI") → micro-label

  • Font fallback check: semua pakai Inter (tidak ada yang masih Plus Jakarta Sans atau system default)

Day 4: Spacing, Radius, Shadow (4-6 jam)​

  • Spacing:

    • Apply Auto Layout dengan spacing tokens
    • Page margin: 16px (mobile) → use spacing/4
    • Section gap: 24-32px → use spacing/6 atau spacing/8
    • Card padding: 16-20px → use spacing/4 atau spacing/5

  • Border Radius:

    • Button → radius/sm (8px) atau radius/md (12px)
    • Card → radius/lg (16px)
    • Hero/feature card → radius/xl (20px)
    • Pill/chip → radius/full
    • Modal → radius/xl

  • Effect Styles — buat manual:

    • shadow/sm — 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)
    • shadow/md — 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)
    • shadow/lg — 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)
    • shadow/card — 0 2px 6px rgba(0,0,0,0.04)
    • shadow/hero — 0 8px 24px rgba(5,150,105,0.25) (colored, brand)
    • shadow/fab — 0 8px 20px rgba(5,150,105,0.35) (colored)
    • shadow/bottomtab — 0 -3px 16px rgba(0,0,0,0.1)

Day 5: Token QA & Export (4 jam)​

  • Validation checklist:

    • 0 hardcoded color
    • 0 hardcoded font size
    • 0 hardcoded spacing di Auto Layout gaps/padding
    • Semua border-radius = token reference
    • Semua shadow = effect style

  • Export tokens.json via Tokens Studio:

    • Settings → JSON → Export
    • Save ke lokasi C:\Users\Kidolabs\Projects\amal-design-kit\tokens\tokens-v1.0.json
    • Reply ke Claude di chat: "Tokens exported, please validate"

Week 2 Deliverable: Figma Variables complete. File sudah beneran design system, bukan mockup.

🗓️ WEEK 3 — Component Library​

📖 Reference: buka 02-component-spec.md selama fase ini

Day 1-2: Atoms (12 jam)​

  • Button component — create master + variants:

    • Variant prop: Primary / Secondary / Tertiary / Danger / Ghost
    • Size prop: XS / SM / MD / LG
    • State prop: Default / Hover / Pressed / Loading / Disabled
    • Icon prop: None / Leading / Trailing / Icon Only
    • Width prop: Hug / Fill
    • Total variants expected: ~120 combinations (handled via Component Properties)

  • Chip component:

    • Semantic prop: Hadir / Izin / Sakit / Alpha / Terlambat / Lunas / Belum-Bayar / Overdue / Neutral
    • Variant prop: Tonal / Filled / Outlined
    • Size prop: SM / MD
    • With-icon prop: True / False

  • Avatar component:

    • Size prop: XS (24) / SM (32) / MD (40) / LG (56) / XL (80)
    • Type prop: Image / Initials / Glass
    • Badge prop: None / Dot / Number
    • Border prop: None / Solid / Glass

  • Icon wrapper:

    • Standardize icon size: 14 / 16 / 20 / 24
    • Color = token reference (stroke + fill)
    • Library: Material Symbols atau Phosphor (decide)

Day 3-4: Molecules (10-12 jam)​

  • Card component:

    • Variant: Flat / Elevated / Outlined
    • Radius: MD / LG / XL
    • Padding: SM (12) / MD (16) / LG (20)
    • With-action prop (chevron / button di kanan)

  • TextField component (7 states):

    • Empty / Focused / Filled / Error / Disabled / Success / Loading
    • Dengan/tanpa label
    • Dengan/tanpa leading icon
    • Dengan/tanpa helper text
    • Dengan/tanpa character count

  • AppBar component:

    • Variant: Default / With Back / With Action / Large Title
    • With-subtitle option
    • Trailing actions slot (bell, avatar, button)

  • BottomNav component:

    • Persona variant: Parent / Guru / Walikelas / Bendahara / Admin / Kepsek
    • Per persona ada tab sesuai decision
    • State: Active tab highlighted + label color change
    • With-badge support (untuk notifikasi di tab)

Day 5: Organisms (6-8 jam)​

  • HeroCard component (untuk Dashboard):

    • Variant: Parent / Guru / Walikelas (warna gradient berbeda)
    • Dengan glass child-switcher card
    • Dengan Hijri date pill
    • Dengan decorative rotated squares

  • QuickActionCard component:

    • Variant: Default / Active / With Notification
    • With-badge variant
    • Icon + label

  • EmptyState component:

    • Variant: Success / Waiting / Offline / Error
    • Tiap variant punya color + icon preset
    • Optional CTA slot
    • Optional secondary action slot

  • SkeletonLoader patterns:

    • List item skeleton (avatar + text lines)
    • Card skeleton (heading + content)
    • Dashboard skeleton (hero + metrics + list)

Week 3 Deliverable: Component library matang. Semua screen tinggal assemble dari components.

🗓️ WEEK 4 — Screen Refactor + Dark Mode + Polish​

Day 1-2: Apply Components + Auto Layout (12 jam)​

  • Refactor 42 screen:

    • Replace hand-drawn elements → use master Components
    • Delete detached instances
    • Apply Auto Layout ke frame utama (vertical)
    • Apply Auto Layout ke grouped sections (horizontal)
    • Set fill/hug/fixed dengan benar

  • Constraint test:

    • Test dengan nama panjang (ganti "Fatimah" → "Fatimatuzzahra Asy-Syafi'iyyah")
    • Test dengan angka besar (ganti 750000 → 15750000)
    • Test dengan empty state (0 items)
    • Pastikan tidak ada layer overflow / overlap

Day 3: Dark Mode Expansion (8-10 jam)​

📖 Reference: buka 05-dark-mode-pairing-guide.md selama fase ini

  • Via Figma Variables (cara cepat):

    • Karena semua sudah pakai tokens, switch mode Light → Dark di Variables panel → auto-propagate ke 42 screen
    • Duplicate setiap screen → rename [Original] - Dark → switch mode ke Dark
    • Fine-tune per screen yang butuh adjustment

  • Manual adjust yang tidak bisa auto:

    • Hero gradient dark variant (lihat pairing guide)
    • Shadow intensity dark (kurangi spread, naikkan opacity)
    • Border-highlights (dark mode perlu border lebih terlihat)
    • Illustration/icon mode (beberapa butuh dark variant)

  • QA Dark Mode:

    • Contrast check semua text (lihat 04-accessibility-audit-report.md)
    • Elevation hierarchy tetap readable
    • Tidak ada "pure black" (#000) — selalu pakai zinc-950 atau zinc-900

Day 4: Accessibility & Skeleton (6-8 jam)​

📖 Reference: buka 04-accessibility-audit-report.md selama fase ini

  • Install plugin Stark atau Able

  • Fix contrast violations (list detail di audit report):

    • Hero subtitle opacity naikkan → min 4.5:1
    • Bottom nav inactive #9e9e9e → ganti #52525b (zinc-600)
    • Bottom nav label size 9px → naikkan ke 11px minimal
    • Small text 12px harus rasio kontras min 4.5:1
    • Large text 18px+ bold bisa min 3:1

  • Tambah skeleton loader frames:

    • Dashboard skeleton
    • Tagihan list skeleton
    • Nilai list skeleton
    • Absensi calendar skeleton
    • Chat list skeleton
    • Notifikasi list skeleton

  • Tambah Offline banner sebagai reusable component:

    • Banner strip merah di atas screen
    • Icon + text "Tidak ada koneksi internet"
    • Close button
    • Bisa di-slot di atas SEMUA screen (tidak frame terpisah)

Day 5: Governance & Documentation (4-6 jam)​

📖 Reference: buka 07-figma-governance-template.md selama fase ini

  • Buat Cover Page (page pertama di file):

    • Brand story 1 paragraf
    • Design principles (5 poin)
    • How to use this file
    • Link ke brand voice guide
    • Changelog v1.0 (initial)
    • Contact / owner info

  • Buat Style Guide page:

    • Color swatches (brand + semantic + neutral)
    • Typography specimen
    • Spacing scale visualization
    • Shadow specimen
    • Icon set showcase
    • Do / Don't examples

  • Buat Component Library page:

    • Showcase semua components dengan variants
    • Annotation untuk interaction state
    • Usage guidelines (kapan pakai variant X)
    • Do's and Don'ts per component

  • Buat Patterns page:

    • Navigation patterns (bottom nav, drawer, tabs)
    • Empty state pattern library
    • Error state pattern library
    • Loading state pattern library
    • Form pattern library
    • List pattern library

  • Publish components to team library (File → Publish library)

    • Tim member bisa use Components di file lain
    • Version: 1.0.0

Week 4 Deliverable: Figma Design System v1.0 — Production Ready.

✅ FINAL VALIDATION (End of Week 4)​

Run validation ini sebelum declare "done":

  • File Structure:

    • Cover page exists dan informatif
    • Style Guide page exists
    • Component Library page exists
    • Patterns page exists
    • Screens terorganisir by persona (Parent, Guru, dst) atau di file terpisah
    • Archive page exists untuk explorations lama

  • Variables:

    • 4 collections: Color, Typography, Spacing, Radius
    • 2 modes minimum: Light, Dark
    • 0 hardcoded values

  • Components:

    • Semua atoms (Button, Chip, Avatar, Icon) created dengan variants
    • Semua molecules (Card, TextField, AppBar, BottomNav) created
    • Semua organisms (HeroCard, QuickActionCard, EmptyState, SkeletonLoader) created
    • Semua components published ke team library

  • Coverage:

    • 42 Parent screens semua refactored pakai components
    • 100% Auto Layout coverage
    • Dark mode variant tersedia untuk 42 screen
    • Skeleton loader tersedia untuk setiap list screen
    • Offline banner component ready

  • Accessibility:

    • 100% text lolos WCAG AA
    • 0 tap target < 44×44px
    • 0 text < 11px font size

  • Content:

    • Copy konsisten (cek matrix di file terpisah)
    • Islamic phrases digunakan dengan tepat
    • 0 text truncation

  • Naming:

    • Frame names follow convention (lihat 06-naming-convention-guide.md)
    • Component names follow convention
    • Variant props named in PascalCase atau camelCase konsisten

  • Handoff Ready:

    • Dev Mode enabled
    • Code Connect setup (optional, untuk Flutter widgets nanti)
    • Token.json latest export tersedia
    • Changelog updated

📊 Progress Tracker​

Update tiap akhir week:

WeekTargetDoneBlockerNotes
Week 1Cleanup & Copy__%
Week 2Tokens__%
Week 3Components__%
Week 4Polish & Governance__%

🆘 Troubleshooting Common Issues​

"Tokens Studio import gagal"​

→ Cek format JSON, pastikan tidak ada trailing comma. Boleh minta Claude bantu validate.

"Variables tidak auto-propagate saat switch mode"​

→ Pastikan kamu apply sebagai Variable reference, bukan one-time value. Right-click token → "Apply as variable".

"Component dengan 100+ variants jadi lambat"​

→ Pakai Component Properties (boolean, text, instance-swap) alih-alih variants. Variants hanya untuk visual yang beda signifikan.

"Dark mode kontras kurang di beberapa screen"​

→ Cek 05-dark-mode-pairing-guide.md untuk recommended pairing. Beberapa hero perlu adjust manual.

"Figma jadi berat setelah banyak Auto Layout"​

→ Normal. Hidden unused pages. Consider split ke 2 files (Foundation + Screens).

Status: Ready untuk designer execute Last updated: 2026-04-16 Version: 1.0