Figma শেখা কঠিন না। কিন্তু ভুল order এ শিখলে confusing হয়। এই guide টা সেই order ঠিক করার জন্য।
২০১৯ সালে যখন Figma widely popular হতে শুরু করে, তখন আমি Adobe XD ব্যবহার করতাম। Switch করার পর প্রথম সপ্তাহে মনে হয়েছিল সব হারিয়ে ফেলেছি, interface নতুন, shortcut আলাদা, workflow ভিন্ন।
কিন্তু দুই সপ্তাহ পর বুঝলাম, এটা আরও আগে করা উচিত ছিল। এখন আর অন্য কোনো tool ব্যবহার করার কথা ভাবতেই পারি না।
যারা এখন একদম নতুন শুরু করছেন তাদের জন্য এই গাইড, কী শিখবেন, কোন order এ শিখবেন, এবং কোন ভুলগুলো এড়াবেন।
প্রথমে কেন Figma?
Adobe XD officially discontinued। Sketch শুধু Mac এ চলে এবং market share কমছে। Figma browser-based, Windows/Mac/Linux সব জায়গায় চলে, real-time collaboration আছে, এবং এটাই এখন industry standard।
আপনার future client বা employer যদি design tool চান, ৯০% সম্ভাবনা Figma চাইবে। Figma তে invest করা মানে সঠিক জায়গায় invest করা।
প্রথম ৫টি জিনিস, এই Order এ শিখুন
১. Frames এবং Grids
F key চাপুন এবং canvas এ drag করুন, এটাই Frame। Right panel এ preset sizes আছে: iPhone 14, Desktop, Tablet। শুরুতে শুধু iPhone 14 (390×844) নিয়ে কাজ করুন।
Frame এ grid add করুন: right panel এ "Layout Grid" এ "+" click করুন। 4-column grid দিয়ে শুরু করুন। Grid ছাড়া alignment সঠিক রাখা কঠিন।
২. Auto Layout
এটা Figma এর সবচেয়ে powerful feature, এবং beginners সবচেয়ে বেশি এড়িয়ে যান।
কয়েকটা element select করুন, তারপর Shift + A চাপুন। Auto Layout on হবে। এরপর element add করুন বা remove করুন, layout automatically adjust হবে।
একটা button বানান: text + background shape। Auto Layout on করুন। Padding set করুন। এখন text বড় করলেও button নিজে থেকে resize হবে। এটাই real-world workflow।
৩. Components এবং Instances
একটা button design করুন। সেটাকে Component বানান: Ctrl/Cmd + Alt + K। এখন যখনই button লাগবে, সেই component থেকে copy করুন, এগুলো হলো "Instance"।
মূল component (Master) edit করলে সব instances automatically update হয়। ১০০টা button থাকলেও একবার edit করলে সব ঠিক হয়ে যাবে। এটাই design system এর ভিত্তি।
৪. Color ও Text Styles
Design শুরু করার আগে styles define করুন। Right panel এ "Fill" এর পাশে চার-dot icon click করুন, "+" দিয়ে color style save করুন।
Minimum যা লাগবে: Primary Color, Background, Surface, Text Primary, Text Secondary। Text style এও একই কাজ করুন: Heading 1, Heading 2, Body, Caption।
কেন দরকার: Brand color change হলে একটা style update করলে সব জায়গায় automatically change হয়ে যাবে।
৫. Prototype এবং Sharing
Design হলে frames এর মধ্যে connection বানান। Prototype tab এ যান, একটা element থেকে arrow টেনে পরের frame এ নিয়ে যান। Interaction type set করুন (click, hover), animation choose করুন।
তারপর Share করুন, ক্লায়েন্ট browser এ directly দেখতে পারবে, কোনো software install না করেই।
প্রথম Project কী করবেন?
আমার suggestion: আপনার পরিচিত কোনো app এর একটা existing screen redesign করুন। Pathao, Shohoz, Shajgoj, যেকোনো বাংলাদেশী app।
কেন? কারণ আপনি already জানেন সেই app কী করে। নতুন করে problem define করতে হবে না। শুধু solution design করতে পারবেন, এবং পুরো focus থাকবে Figma শেখায়।
Redesign করার পর original এর সাথে compare করুন। কোথায় আপনার version ভালো? কোথায় original ভালো? কেন? এই analysis টাই আপনাকে faster শেখাবে।
Common Beginner Mistakes
- সব feature একসাথে শিখতে যাওয়া: Variables, Dev Mode, Advanced Prototyping এগুলো পরে। শুধু যা project এ লাগছে তা শিখুন।
- Pixel-perfect obsession: প্রথম project এ perfect design করার চেষ্টা না করে complete design করুন। Done is better than perfect।
- শুধু tutorial দেখা: প্রতিটা tutorial দেখার পর সেই specific feature নিজে try করুন। শুধু দেখে শেখা হয় না।
- Group এর বদলে Frame ব্যবহার না করা: Component এবং Auto Layout শুধু Frame এ কাজ করে, Group এ নয়।
কোথায় শিখবেন?
Official Figma YouTube channel সবচেয়ে ভালো source, Figma নিজেই তাদের features explain করে। Figma Community তে free templates পাওয়া যায়, professionals কীভাবে design করেন সেটা সরাসরি দেখতে পারবেন।
সবচেয়ে ভালো উপায়: একটা real project নিন এবং সেটা Figma তে করার চেষ্টা করুন। সমস্যায় পড়লে Google করুন। এভাবেই আমি শিখেছি, এবং এভাবেই শেখাটা সবচেয়ে দ্রুত হয়।