📖 Figma Governance Template
Purpose: Template siap pakai untuk Cover page, Style Guide page, Component Library page, Patterns page, dan Changelog di Figma file.
How to use: Copy text blocks di bawah → paste ke Figma file → styling match dengan Style Guide.
🏠 COVER PAGE TEMPLATE
Layout ini di-populate sebagai halaman pertama file Figma:
┌─────────────────────────────────────────────────────────┐
│ │
│ 🌿 AMAL E-SANTRI │
│ Design System v1.0 │
│ │
│ ───────────────────────────────────────── │
│ │
│ Sistem desain untuk aplikasi pengelolaan madrasah │
│ dan pesantren di Indonesia. Untuk 6 persona │
│ (Orang Tua, Guru, Wali Kelas, Bendahara, Admin, │
│ Kepala Sekolah) di platform mobile (Flutter) │
│ dan web (Vue). │
│ │
│ ───────────────────────────────────────── │
│ │
│ 📐 Style Guide → Page 2 │
│ 🧩 Components → Page 3 │
│ 🎨 Patterns → Page 4 │
│ 👨👩👧 Parent (Orang Tua) → Page 5 │
│ 👨🏫 Guru → Page 6 │
│ 👩🏫 Wali Kelas → Page 7 │
│ 💰 Bendahara → Page 8 │
│ 🏢 Admin Lembaga → Page 9 │
│ 🎓 Kepala Sekolah → Page 10 │
│ 🗄️ Archive → Page 11 │
│ │
│ ───────────────────────────────────────── │
│ │
│ Version: 1.0.0 │
│ Last Updated: [DATE] │
│ Owner: [Designer Name] │
│ Reviewer: [Product Manager] │
│ │
└─────────────────────────────────────────────────────────┘
Cover Page Content (detail):
Section 1: Title Block
🌿 AMAL E-SANTRI
Design System v1.0
[Logo di tengah, ukuran 160x160]
Section 2: About
Tentang Sistem Ini
Amal E-Santri adalah platform digital terintegrasi
untuk pengelolaan madrasah dan pesantren di Indonesia.
Design system ini menjadi fondasi visual dan interaksi
untuk seluruh produk Amal — mulai dari mobile app
native (Flutter) hingga web dashboard (Vue).
Design system ini dibangun dengan prinsip:
✓ Islamic cultural sensitivity yang otentik
✓ Mobile-first untuk akses orang tua
✓ Accessibility WCAG AA sebagai standar minimum
✓ Component-driven, token-powered
✓ Dark mode native support
Section 3: Design Principles
5 Prinsip Desain
1. Bermakna (Meaningful)
Setiap elemen punya alasan. Hindari dekorasi kosong.
Contoh: "Alhamdulillah" di empty state tagihan lunas.
2. Hangat tapi Profesional (Warm yet Professional)
Nada komunikasi seperti kirim WA ke teman dekat,
bukan surat resmi. Tetap respectful untuk konteks pendidikan.
3. Inklusif (Inclusive)
Cultural fit untuk muslim Indonesia, tapi tetap
ramah untuk non-muslim staff dan anggota keluarga.
4. Minim Friksi (Low Friction)
Task utama harus selesai dalam 3 tap. Tidak ada
flow yang > 5 langkah tanpa progress indicator.
5. Konsisten Lintas Platform (Cross-Platform Consistent)
Mobile dan web share tokens yang sama, widget
yang paralel, meskipun codebase terpisah.
Section 4: How to Use This File
Untuk Designer:
─────────────
1. Baca Style Guide dulu sebelum add screen baru.
2. SELALU gunakan Components dari library — jangan hand-draw.
3. Jangan hardcode values (color, spacing, font) —
pakai Variables reference.
4. Rename frame saat rombak — ikuti naming convention
di docs/06-naming-convention-guide.md.
5. Commit changes ke Figma version dengan descriptive message.
6. Publish ke team library setelah approved reviewer.
Untuk Developer:
───────────────
1. File ini SOURCE OF TRUTH. Jangan improvise color/spacing
yang tidak ada di Figma.
2. Enable Dev Mode saat handoff.
3. Export tokens via Tokens Studio → tokens.json →
feed ke Style Dictionary → generate platform code.
4. Pakai Code Connect mapping untuk link Figma node ↔ widget.
5. Report inkonsistensi ke designer via Figma comments.
Untuk Product Manager:
─────────────────────
1. Review di weekly design review.
2. Approve changes via comments atau FigJam vote.
3. Track changelog per version.
4. Approve publish ke team library.
Section 5: Status & Metadata
📊 Current Status
Version: 1.0.0
Last Updated: [YYYY-MM-DD]
Owner: [Name]
Reviewers: [PM Name], [Tech Lead Name]
Parent Screens: 42
Components: 32 (4 atoms + 8 molecules + 20 organisms)
Coverage: 🟢 Production Ready
🔗 Related Links
Brand Voice Guide: [Notion/Confluence link]
Token Pipeline: [GitHub repo link]
Flutter Widget Lib: [GitHub repo link when ready]
Storybook (Web): [URL when ready]
Slack Channel: #amal-design-system
📐 STYLE GUIDE PAGE TEMPLATE
Layout:
┌─────────────────────────────────────────────────────────┐
│ STYLE GUIDE │
│ ─────────────────── │
│ │
│ Section 1: Color Palette │
│ Section 2: Typography │
│ Section 3: Spacing │
│ Section 4: Radius │
│ Section 5: Shadow │
│ Section 6: Icons │
│ Section 7: Imagery │
│ │
└─────────────────────────────────────────────────────────┘
Section 1: Color Palette
Layout: Horizontal rows, group by category
Brand Colors
──────────────────────────────────────
[██] brand/primary #059669 Islamic green — primary actions
[██] brand/primary-hover #047857
[██] brand/primary-pressed #065F46
[██] brand/primary-light #ECFDF5 Tint background for success
[██] brand/secondary #0D9488 Teal — academic context
[██] brand/accent #F59E0B Amber — achievement/rewards
Text Colors
──────────────────────────────────────
[██] text/primary #18181B Headlines, body
[██] text/secondary #52525B Subtext, meta
[██] text/tertiary #71717A Hints, captions
[██] text/disabled #D4D4D8 Disabled state
Surface Colors (Light)
──────────────────────────────────────
[██] surface/background #FAFAFA App background
[██] surface/card #FFFFFF Card container
[██] surface/variant #F4F4F5 Subtle container
Status Colors — Attendance
──────────────────────────────────────
[██] status/hadir #059669 Green
[██] status/izin #F59E0B Amber
[██] status/sakit #3B82F6 Blue
[██] status/alpha #EF4444 Red
[██] status/terlambat #F97316 Orange
Status Colors — Payment
──────────────────────────────────────
[██] status/lunas #059669
[██] status/belum-bayar #F59E0B
[██] status/overdue #EF4444
Feedback Colors
──────────────────────────────────────
[██] feedback/success #059669
[██] feedback/warning #F59E0B
[██] feedback/error #EF4444
[██] feedback/info #3B82F6
Display format per swatch:
┌──────────┐
│ │ brand/primary
│ ██ │ #059669
│ │ Islamic green — primary actions
└──────────┘
Section 2: Typography
Display all text styles in showcase format:
Display (28/1.2, Bold, -0.5px)
Assalamu'alaikum
H1 (24/1.2, Bold, -0.15px)
Selamat Datang di Amal E-Santri
H2 (20/1.3, Semi-Bold, -0.15px)
Tagihan Terbaru
H3 (18/1.3, Semi-Bold)
Akses Cepat
H4 (16/1.3, Semi-Bold)
Hari Ini
Body Large (16/1.5, Regular)
Ini adalah body paragraph yang digunakan untuk
konten utama. Cocok untuk deskripsi panjang.
Body (14/1.5, Regular)
Ini adalah body standar, digunakan untuk mayoritas
teks di aplikasi.
Body Small (13/1.5, Regular)
Text sekunder atau meta info.
Caption (12/1.5, Medium)
Caption kecil, label form
Micro Label (11/1.2, Semi-Bold, +1.2px, UPPERCASE)
ASSALAMU'ALAIKUM
SANTRI
HAFALAN
Section 3: Spacing
Visual scale display:
space-0 (0px) ──
space-1 (4px) ────
space-2 (8px) ────────
space-3 (12px) ────────────
space-4 (16px) ────────────────
space-5 (20px) ────────────────────
space-6 (24px) ────────────────────────
space-8 (32px) ────────────────────────────────
space-10 (40px) ────────────────────────────────────────
space-12 (48px) ────────────────────────────────────────────────
space-16 (64px) (full-width bar)
space-20 (80px) (full-width bar)
space-24 (96px) (full-width bar)
Base unit: 4px
Section 4: Radius
┌──┐ radius-xs 4px Micro elements
┌──┐ radius-sm 8px Buttons, chips
┌──┐ radius-md 12px TextField, small card
┌──┐ radius-lg 16px Card default
┌──┐ radius-xl 20px Hero, feature card
┌──┐ radius-2xl 24px Modal
● radius-full 999px Pill, avatar
Section 5: Shadow
Cards showing each shadow style:
[Card Flat] shadow: none
Use for: subtle containers
[Card Sm] shadow/sm
0 1px 3px rgba(0,0,0,0.1)
Use for: buttons, chips
[Card Md] shadow/md
0 4px 6px rgba(0,0,0,0.07)
Use for: hoverable cards
[Card Lg] shadow/lg
0 10px 15px rgba(0,0,0,0.1)
Use for: dropdowns, elevated panels
[Card-normal] shadow/card
0 2px 6px rgba(0,0,0,0.04)
Use for: list items, cards
[Hero] shadow/hero
0 8px 24px rgba(5,150,105,0.25) 🟢 COLORED
Use for: primary hero card (brand-tinted)
[FAB] shadow/fab
0 8px 20px rgba(5,150,105,0.35) 🟢 COLORED
Use for: FAB button
[Modal] shadow/modal
0 20px 60px rgba(0,0,0,0.2)
Use for: modal overlay
Section 6: Icons
Icon library: Material Symbols Rounded atau Phosphor
Icon sizes:
XS (14px) — inline with small text
SM (16px) — inline with body
MD (20px) — default UI
LG (24px) — primary actions
XL (32px) — illustrations
Icon usage rules:
✓ Selalu pakai token color
✓ Stroke width konsisten (2px)
✓ Ukuran match dengan text context
✗ Jangan mix icon style di 1 screen
✗ Jangan custom-draw kalau ada di library
Section 7: Imagery
Photography:
- Santri photos: portrait orientation, centered face
- School photos: wide landscape, activity moments
- Overlay:
rgba(0,0,0,0.2)untuk cohesion
Illustrations:
- Empty states: simplified, monochromatic + 1 accent color
- Onboarding: warm, Indonesian context (pesantren, masjid elements optional)
- Success states: celebratory, Islamic elements tastefully
Patterns:
- Islamic geometric patterns optional untuk decorative
- Opacity 0.03-0.08 untuk background accent
- Jangan dominate, hanya subtle
🧩 COMPONENT LIBRARY PAGE TEMPLATE
Layout:
┌─────────────────────────────────────────────────────────┐
│ COMPONENT LIBRARY │
│ ─────────────────── │
│ │
│ Atoms [Button] [Chip] [Avatar] [Icon] │
│ │
│ Molecules [Card] [TextField] [AppBar] [BottomNav] │
│ │
│ Organisms [HeroCard] [QuickActionCard] [EmptyState] │
│ [SkeletonLoader] [...] │
│ │
└─────────────────────────────────────────────────────────┘
Per component, showcase dengan format:
Button
┌─────────────────────────────────────────────────┐
│ Button │
│ ──────── │
│ │
│ [Showcase all variants] │
│ │
│ Primary: │
│ [ Simpan ] [ Bayar ] [ Lanjut ] │
│ │
│ Secondary: │
│ [ Batal ] [ Detail ] [ Kembali ] │
│ │
│ Tertiary: │
│ Lihat Semua Edit Hapus │
│ │
│ Danger: │
│ [ Hapus ] [ Keluar ] │
│ │
│ Sizes: │
│ XS SM MD LG │
│ │
│ States: │
│ Default Hover Pressed Loading Disabled │
│ │
│ With Icons: │
│ [➡ Lanjut] [Detail ➡] [+] [Simpan] │
│ │
│ Usage Do's: │
│ ✓ Primary untuk ONE action per screen │
│ ✓ Secondary untuk alternative │
│ ✓ Tertiary untuk inline/lesser action │
│ │
│ Usage Don'ts: │
│ ✗ Jangan 2 primary berdampingan │
│ ✗ Jangan pakai XS di CTA utama │
│ │
│ Variants: 120 combinations │
│ Status: 🟢 Production │
│ Last updated: [DATE] │
└─────────────────────────────────────────────────┘
Repeat untuk semua components (Chip, Avatar, Card, TextField, AppBar, BottomNav, HeroCard, QuickActionCard, EmptyState, SkeletonLoader).
🎨 PATTERNS PAGE TEMPLATE
Purpose: Composite patterns yang berulang di screens.
Layout:
┌─────────────────────────────────────────────────────────┐
│ PATTERNS │
│ ─────────── │
│ │
│ 1. Navigation Patterns │
│ - Bottom Navigation │
│ - Drawer / More Menu │
│ - Tab Bar (within screen) │
│ - Breadcrumbs │
│ │
│ 2. Empty State Patterns │
│ - Success empty (celebratory) │
│ - Waiting empty (pending) │
│ - Error empty (actionable) │
│ │
│ 3. Loading State Patterns │
│ - Skeleton loaders │
│ - Spinner + label │
│ - Progress bar │
│ │
│ 4. Error State Patterns │
│ - Network error │
│ - Server error │
│ - Validation error (form) │
│ - Permission denied │
│ │
│ 5. Form Patterns │
│ - Single field │
│ - Multi-step wizard │
│ - Inline editing │
│ - Modal form │
│ │
│ 6. List Patterns │
│ - Simple list │
│ - List with action │
│ - Grouped list │
│ - Grid layout │
│ │
│ 7. Card Patterns │
│ - Info card │
│ - Interactive card │
│ - Metric card │
│ - Feature card (hero) │
│ │
│ 8. Modal Patterns │
│ - Confirmation modal │
│ - Bottom sheet │
│ - Full-screen modal │
│ - Action sheet │
│ │
│ 9. Notification Patterns │
│ - Toast / Snackbar │
│ - Inline banner │
│ - Push notification design │
│ - In-app badge │
│ │
│ 10. Cultural Patterns │
│ - Greeting header │
│ - Hijri date display │
│ - Prayer time context │
│ - Islamic phrase integration │
│ │
└─────────────────────────────────────────────────────────┘
Each pattern section shows real example from 42 screens + usage guidelines.
📝 CHANGELOG TEMPLATE
Di akhir Cover page atau separate Documentation page:
📜 CHANGELOG
───────────────────────────────────────────────────
Version 1.0.0 — 2026-04-16
───────────────────────────────────────────────────
🎉 Initial Release — Production Ready
Added:
+ 42 Parent Portal screens
+ Figma Variables (color, typography, spacing, radius)
+ Light & Dark mode tokens
+ 32 master components (atoms, molecules, organisms)
+ Patterns page with 10 pattern categories
+ Brand voice guide (external doc)
Changed:
~ Migrated hardcoded colors to Variables
~ Applied Auto Layout to all frames
~ Standardized copy across 42 screens
~ Fixed empty state inconsistencies
Fixed:
✓ Dashboard "Dark Mode" mislabeled (renamed)
✓ Contrast violations (hero, bottom nav)
✓ Text truncation (Nilai Kosong, Server Error)
✓ Dark mode coverage expanded 2 → 42 screens
Known Issues:
⚠ Icon library decision pending (Material vs Phosphor)
⚠ Guru persona pages not yet systemized
───────────────────────────────────────────────────
Version 0.9.0 — 2026-04-01 (Pre-release audit)
───────────────────────────────────────────────────
Draft screens completed. Audit revealed:
- No Figma Variables
- 2 Dashboard versions conflict
- Dark mode only 2 screens
- Components not master
See audit report for full findings.
───────────────────────────────────────────────────
Version 0.5.0 — [Earlier date]
───────────────────────────────────────────────────
Initial Dashboard Polished design explored.
42 frames scoped.
───────────────────────────────────────────────────
🏛️ GOVERNANCE RULES
Who can edit the file?
| Role | Permissions |
|---|---|
| Senior Designer (owner) | Full edit |
| Junior Designer | Edit specific pages (not Component Library master) |
| Product Manager | Comment only |
| Developer | View + comment in Dev Mode |
| External | View only |
Edit workflow
-
Branch workflow untuk major changes:
- Create branch di Figma (Figma Branching feature)
- Make changes
- Request review (tag @reviewer)
- Merge after approval
-
Changelog wajib update untuk setiap change > patch version:
- Added / Changed / Fixed sections
- Date stamp
- Author name
-
Semantic versioning:
MAJOR(1.x.x → 2.0.0): Breaking changes (color palette overhaul, component API change)MINOR(x.1.x → x.2.0): New features (new components, new patterns)PATCH(x.x.1 → x.x.2): Fixes (bug, copy, micro-tweaks)
-
Publish policy:
- Auto-publish: PATCH changes
- Reviewer approval: MINOR
- Stakeholder approval: MAJOR
Review cadence
- Weekly design review — every Friday
- Monthly stakeholder review — last Wednesday
- Quarterly overhaul audit — every 3 months, check design debt
Component lifecycle
Proposed → Review → Approved → Production → (Deprecated)
📝 🟡 🟢 🟢 ⚫
Components yang di-deprecate diberi label [DEPRECATED v2.0] 1 version sebelum dihapus.
🎓 ONBOARDING NEW TEAM MEMBER
Checklist onboarding designer baru ke file ini:
Day 1:
[ ] Read Cover page + all 5 principles
[ ] Read Brand Voice guide (external)
[ ] Browse Style Guide page
[ ] Watch recorded walkthrough (if available)
Day 2:
[ ] Review Component Library — all 32 components
[ ] Try compose a screen from components (exercise)
[ ] Review Patterns page — understand when to use what
Day 3:
[ ] Read Naming Convention guide
[ ] Read Figma governance rules
[ ] Set up Tokens Studio plugin
Day 4-5:
[ ] Pair with senior designer
[ ] Work on minor task (bug fix, copy update)
[ ] Submit first small PR for review
Week 2+:
[ ] Own small feature design
[ ] Participate di weekly review
[ ] Contribute to Changelog
🔍 PRE-PUBLISH CHECKLIST
Sebelum designer "Publish" changes ke team library:
- Semua frame namanya sesuai convention
- Semua layer pakai Variables (0 hardcode)
- Semua components detached instances dihapus
- Auto Layout applied to 100% frames
- Stark plugin: 0 contrast violations
- Copy reviewed by PM
- Changelog updated dengan change summary
- Screenshot before/after untuk major change
- Reviewer comment di-resolve
Status: Template ready untuk copy-paste ke Figma Last updated: 2026-04-16 Version: 1.0