Design system ছাড়া বড় product maintain করা chaos। কিন্তু freelancer হিসেবেও একটা personal system থাকলে কাজের speed এবং quality দুটোই বাড়ে।
অনেকে মনে করেন design system শুধু Google বা Airbnb এর মতো বড় company এর জন্য। আমি মনে করি এটা ভুল ধারণা। এমনকি একা কাজ করলেও একটা structured system থাকলে প্রতিটা project দ্রুত হয় এবং output consistent থাকে।
Design System কী, কী নয়
Design system মানে শুধু UI component library নয়। এটা হলো একটা shared language, documentation, principles এবং tools এর সমন্বয়।
তিনটা layer আছে:
- Foundation: Color palette, typography scale, spacing system, iconography, grid
- Components: Button, input, card, modal, navigation — reusable building blocks
- Patterns: Form layout, empty state, error state, loading state — কীভাবে components একসাথে কাজ করে
Tokens: Design System এর ভাষা
Design token হলো named variable যেখানে design decision store হয়। Color এর নাম "blue-500" রাখার বদলে "color-primary" রাখুন। Font size "24px" বলার বদলে "text-heading-2" বলুন।
কেন? কারণ "color-primary" এর value change করলে সব জায়গায় automatically update হয়। Brand color rebrand করতে হলে একটা জায়গায় change করলেই হয়।
Figma Variable: Figma এর Variable feature দিয়ে token তৈরি করুন। Light mode এবং dark mode এর জন্য আলাদা value set করুন। একটা click এ entire design এর theme switch হবে।
Component Anatomy
একটা ভালো component এর তিনটা অংশ থাকে:
Structure: Component টা Figma তে কীভাবে বানানো, layers কেমন, constraints কীভাবে set।
Variants: Button এর size variants (small, medium, large), state variants (default, hover, disabled, loading), type variants (primary, secondary, ghost)।
Documentation: এই component কখন use করবেন, কখন করবেন না, dos and don'ts।
Spacing System
Random spacing সবচেয়ে common design mistake। একটা base unit বেছে নিন (আমি 4px ব্যবহার করি) এবং সব spacing এর multiple ব্যবহার করুন: 4, 8, 12, 16, 24, 32, 48, 64px।
এই system follow করলে design এ natural rhythm তৈরি হয়। Spacing দেখতে "ঠিক মনে হচ্ছে" এর কারণ হলো underlying mathematical consistency।
Personal System দিয়ে শুরু করুন
পুরো Google Material Design বানানোর দরকার নেই। শুরু করুন একটা simple Figma file দিয়ে যেখানে থাকবে:
- আপনার standard color palette (primary, secondary, neutral, semantic)
- Typography scale (6টি size, 2টি font)
- Spacing tokens (4px base)
- ৮–১০টি common component (button, input, card, badge, modal)
প্রতিটা নতুন project এ এই file duplicate করে শুরু করুন। কয়েক মাসে আপনার system আরও সমৃদ্ধ হবে। এটাই আপনার competitive advantage হয়ে উঠবে।