একজন ডেভেলপার হিসেবে কিভাবে Figma শিখবেন ?

Figma, প্রথমেই একটা ভুল ভাঙা যাক Figma শুধু UI/UX ডিজাইনারদের জন্য নয়। আপনি যদি একজন ফ্রন্টএন্ড ডেভেলপার হন, তবে ক্লায়েন্ট বা ডিজাইনারের Figma ফাইল খুলে বুঝতে পারা, তা থেকে pixel-perfect ডিজাইন তৈরি করা আপনার কাজের অর্ধেক সহজ করে দিতে পারে।

এমনকি আপনি যদি একাই কাজ করেন (freelancer/full-stack dev), তখনও একটি সুন্দর UI ডিজাইন তৈরি করতে Figma আপনার বেস্ট ফ্রেন্ড হতে পারে।

Step 1: Figma কী এবং কেন একজন ডেভেলপারের শেখা দরকার?

Figma হচ্ছে একটি Web-based UI Design Tool, যেটি মূলত ডিজাইনাররা ব্যবহার করে থাকেন ওয়েবসাইট, মোবাইল অ্যাপ, অথবা যেকোনো ডিজিটাল প্রোডাক্টের ইন্টারফেস ডিজাইন করার জন্য। এটি ব্রাউজারেই কাজ করে ইনস্টল করতে হয় না। আপনি যেখানেই থাকুন, শুধু ইন্টারনেট থাকলেই Figma ব্যবহার করতে পারবেন।

এখন প্রশ্ন আসতে পারে, আপনি একজন ডেভেলপার হয়ে কেন Figma শিখবেন? আপনিও তো কোড নিয়ে ব্যস্ত থাকেন, তাহলে এই ডিজাইন টুল শিখে কী হবে?

চলুন ব্যাখ্যা করি:

১. ডিজাইনারের Figma ফাইল বুঝতে ও কোডে রূপান্তর করতে পারবেন

প্রায়শই দেখা যায়, একজন ডিজাইনার একটি UI ডিজাইন তৈরি করেন এবং সেটা Figma ফাইলে আপনাকে দেন। এখন আপনি যদি Figma ফাইলটা শুধু চোখের দিকে তাকিয়ে থাকেন আর বুঝতে না পারেন কোনটা কোন heading, কোনটা section, কেমন spacing—তাহলে কোড কিভাবে করবেন?

Figma শেখা থাকলে আপনি সহজেই বুঝতে পারবেন:

• কোন জায়গায় কত margin বা padding
• কোন font size ও font weight ব্যবহার করা হয়েছে
• color code কোনটা
• কিভাবে layout গঠন করা হয়েছে

অর্থাৎ, আপনি ক্লিয়ারলি বুঝে কোড করতে পারবেন যেটা pixel-perfect UI গড়ার জন্য ভীষণ জরুরি।

২. Inspect Tool দিয়ে সকল ডিজাইন ডিটেইলস দেখে নিতে পারবেন

Figma-এর একটি দারুণ ফিচার হলো Inspect Tool, যা মূলত ডেভেলপারদের জন্য তৈরি। এই টুলটির মাধ্যমে আপনি যেকোনো ডিজাইন এলিমেন্টে ক্লিক করে দেখতে পারবেন:

• CSS property (font, color, shadow)
• Distance between elements
• Asset export (SVG, PNG ইত্যাদি)

এই টুলের কারণে আপনাকে আর ডিজাইনারকে জিজ্ঞেস করতে হবে না “ভাই এই button টার padding কত?” আপনি নিজেই দেখে নিতে পারবেন।

৩. ক্লায়েন্টকে প্রাথমিক ডিজাইন আইডিয়া দেখাতে পারবেন

আপনি যদি একজন ফ্রিল্যান্সার হন, তাহলে অনেক সময় ক্লায়েন্ট বলবেন “একটা রাফ আইডিয়া দেখান” বা “আপনি নিজেই একটা UI সাজিয়ে দিন”। এখন আপনি যদি Figma না জানেন, তাহলে সেই প্রেজেন্টেশন কিভাবে দিবেন?

Figma শিখে নিলে আপনি নিজেই তৈরি করতে পারবেন:

• একটি Simple Landing Page Layout
• Button & Input Design
• Responsive Grid Structure

এইভাবে ক্লায়েন্টকে শুরুর থেকেই ভালো ইমপ্রেশন দিতে পারবেন।

৪. Developer Handoff প্রক্রিয়া আরও সহজ হবে

Developer handoff বলতে বোঝায় ডিজাইনার থেকে ডেভেলপারের কাছে ডিজাইন ফাইল হস্তান্তরের প্রক্রিয়া। যদি আপনি Figma বুঝতে না পারেন, তাহলে handoff-এর সময়:

• অনেক সময় নষ্ট হবে
• বারবার মেসেজ করে জিজ্ঞেস করতে হবে
• ভুল বোঝাবুঝি হবে

কিন্তু যদি Figma-এর Dev Mode বা Inspect Tool আপনার আয়ত্তে থাকে, তাহলে আপনি ডিজাইনারের কাছ থেকে ফাইল নিয়েই সরাসরি কোডিং শুরু করতে পারবেন ফাস্ট, ইফিশিয়েন্ট, এবং কম ভুলে।

Step 2: কোথা থেকে শুরু করবেন?

Figma শেখার সবচেয়ে ভালো দিক হলো এটা শুরুর জন্য আপনার কোনো টাকা খরচ করতে হয় না, আর খুব একটা টেকনিক্যাল জ্ঞানও লাগে না। আপনি যদি একজন ফ্রন্টএন্ড ডেভেলপার হয়ে থাকেন, তাহলে খুব সহজেই Figma-তে হাতেখড়ি নিতে পারেন। চলুন দেখি কিভাবে শুরু করবেন:

১. ফ্রি একাউন্ট খুলুন – মাত্র ১ মিনিটেই শুরু

প্রথমে চলে যান figma.com ওয়েবসাইটে। সাইন আপ করার জন্য আপনার শুধু একটি Gmail একাউন্ট হলেই চলে।

সাইন আপ করার সময় “Designer or Developer?” এমন প্রশ্ন করলে আপনি ‘Developer’ বেছে নিতে পারেন, কিন্তু এটা বাধ্যতামূলক না।

Figma এর ফ্রি প্ল্যানেই আপনি:

• ডিজাইন তৈরি করতে পারবেন
• অন্যদের ফাইল দেখতে ও কপি করতে পারবেন
• Team ফাইল শেয়ার করতে পারবেন (লিমিটেড)
• এবং সবচেয়ে গুরুত্বপূর্ণ: Inspect Mode ব্যবহার করতে পারবেন

২. Interface-এর সাথে পরিচিত হোন

Figma ইন্টারফেসটা দেখতে অনেকটা Google Docs-এর মতো Web Browser-এ চলে এবং রিয়েল-টাইমে সব আপডেট হয়। আপনি যদি প্রথমবার ব্যবহার করেন, তাহলে নিচের গুরুত্বপূর্ণ অংশগুলোর সঙ্গে পরিচিত হওয়া জরুরি:

Frames (Artboards):

Frame হচ্ছে মূল ক্যানভাস, যেখানে আপনি পুরো ডিজাইনটি বানান। এটা Adobe XD বা Photoshop-এর Artboard-এর মতো।

উদাহরণস্বরূপ:

• Mobile App বানাতে চাইলে iPhone 13 এর ফ্রেম নিন
• ওয়েবসাইট ডিজাইন করতে চাইলে Desktop Frame নিন

এগুলো আপনাকে নির্দিষ্ট screen size অনুযায়ী ডিজাইন করতে সাহায্য করবে।

Components:

Component হলো এমন একটি এলিমেন্ট, যেটা বারবার ব্যবহার করা যায়। ধরুন আপনি একটি বাটন ডিজাইন করলেন—এই বাটনটা Component বানিয়ে রাখলে আপনি যেকোনো জায়গায় তা বারবার বসাতে পারবেন, আর এক জায়গায় পরিবর্তন করলে সব জায়গায় আপডেট হয়ে যাবে।

এটি বড় ডিজাইন ফাইল ম্যানেজ করতে এবং কোডের সাথে মিল রাখতে খুব কাজে দেয়।

Layers Panel:

এখানে আপনি ডিজাইন করা সব উপাদান দেখতে পারবেন ঠিক Photoshop-এর মতো। কোন এলিমেন্ট উপরে, কোনটা নিচে—সবকিছু এখানেই থাকে।

ডেভেলপার হিসেবে আপনি এখান থেকে বুঝতে পারবেন:

• কোনটা হেডিং
• কোনটা বাটন
• কোনটা গ্রিড বা ইমেজ

এটি ভালোভাবে না বুঝলে কোড লেখার সময় অনেক ভুল হবে।

Inspect Panel (ডেভেলপারদের প্রাণ):

Figma-এর ডানদিকে থাকা Inspect ট্যাবটি আপনার সবচেয়ে প্রিয় জায়গা হবে। কারণ এখান থেকেই আপনি কোডিংয়ের জন্য প্রয়োজনীয় সব ডিটেইলস পেয়ে যাবেন।

Inspect Panel-এ আপনি দেখতে পারবেন:

• Margin ও Padding
• Font Size, Font Weight
• Color Code (#hex)
• Border, Shadow
• CSS-এর মতো কোড স্নিপেট

এই অংশটা Figma না শিখে বোঝা সম্ভব না তাই প্র্যাকটিস করুন!

Constraints (Responsive Design বোঝার জন্য):

Constraints দিয়ে বুঝানো হয় কোন এলিমেন্ট স্ক্রিন ছোট বা বড় হলে কিভাবে behave করবে। আপনি যদি রেসপনসিভ ডিজাইন করেন, তাহলে এই বিষয়টা খুবই গুরুত্বপূর্ণ।

উদাহরণ:
একটি বাটন যদি “Left & Right”-এ fixed থাকে, তাহলে স্ক্রিন ছোট হলেও সেটা মাঝখানে থাকবে।

এই ধারণা আপনাকে রেসপনসিভ CSS লিখতে অনেক হেল্প করবে।

Styles (Typography ও Color System):

Figma-তে আপনি টেক্সট ও কালারের জন্য আলাদা Style বানাতে পারেন। যেমন:

• Heading 1: 32px Bold
• Primary Color: #0052CC

এইভাবে একটি ডিজাইনের consistent look তৈরি হয়।

একজন ডেভেলপার হিসেবে আপনি এই Style গুলো থেকে:

• টেক্সট ক্লাস তৈরি করতে পারেন (Tailwind বা CSS-এ)
• কালার ভ্যারিয়েবল বানাতে পারেন

ছোট একটি টাস্ক আপনার জন্য:

• figma.com থেকে একটি ফ্রি Mobile App Template খুলুন
• Inspect Tool দিয়ে দেখুন কোন বাটনের Margin কত?
• Color Code কী?
• Font Size কত?

এই ছোট ছোট অনুশীলন আপনাকে দ্রুত ফিগমার ইন্টারফেসের সাথে মানিয়ে নিতে সাহায্য করবে।

Step 3: Figma ফাইল ইনস্পেক্ট প্র্যাকটিস করুন

Figma শেখার সবচেয়ে গুরুত্বপূর্ণ ধাপগুলোর মধ্যে একটি হলো – নিজে হাতে প্র্যাকটিস করা। আপনি যতই YouTube ভিডিও দেখেন, যত টিউটোরিয়াল পড়েন না কেন, Figma’র আসল শক্তি বুঝবেন তখনই, যখন আপনি নিজের হাতে একটা রিয়েল ডিজাইন ফাইল খুলে Inspect করতে শিখবেন।

শুধু শিখে রাখলে হবে না, ব্যবহার করাই হলো শেখার আসল পথ।

তাহলে কিভাবে প্র্যাকটিস করবেন?

একজন ডেভেলপার হিসেবে আপনাকে জানতে হবে, Figma ফাইল থেকে কীভাবে প্রয়োজনীয় ইনফরমেশন বের করে আনবেন। কারণ এগুলোর উপর ভিত্তি করেই তো আপনি ওয়েবসাইট বা অ্যাপের ডিজাইন কোড করবেন।

চলুন ধাপে ধাপে দেখি:

১. Figma Community থেকে ফ্রি টেমপ্লেট নিন

Figma-এর একটি বড় সুবিধা হলো Figma Community, যেখানে হাজারো ডিজাইনার তাদের তৈরি করা ফ্রি টেমপ্লেট শেয়ার করে রেখেছেন।

যেতে পারেন এই লিংকে: https://www.figma.com/community

সেখানে গিয়ে সার্চ করুন:

• “Website Template”
• “Landing Page UI”
• “Mobile App UI”
• “Dashboard Design”

যেকোনো একটি ফাইল খুলে “Duplicate” করে আপনার একাউন্টে কপি করে নিন।

২. একটি টেমপ্লেট খুলুন এবং নেভিগেট করুন

Figma ফাইল ওপেন করার পর কিছু সময় সেটার গঠন বুঝতে দিন নিজেকে। যেমন:

• কোনটা হেডার?
• কোনটা Hero Section?
• কোন কোন Component রিপিট হয়েছে?
• কোন Layout গ্রিড ব্যবহার হয়েছে?

এভাবে Section by Section ঘুরে দেখুন যেন আপনার চোখ ডিজাইন ধরতে শিখে যায়।

৩. Inspect Panel ব্যবহার করুন

এখন আপনার আসল কাজ শুরু Inspect Panel ব্যবহার করে দেখতে শুরু করুন:

কি কি খেয়াল করবেন?

• Margin & Padding:
  ➤ একটি বাটন বা কার্ড কোন দিক থেকে কতটুকু দূরে রাখা হয়েছে?
  ➤ কোন দুটি এলিমেন্টের মধ্যে gap কতো?
• Color:
  ➤ হেডিং-এর কালার কী (#000000)?
  ➤ বাটনের ব্যাকগ্রাউন্ড কালার কী (#1E40AF)?
  ➤ কালারটি কোথা থেকে এসেছে Style হিসেবে ব্যবহৃত হয়েছে কি?
• Typography:
  ➤ হেডিং-এর font size কত?
  ➤ Font family কি (Roboto, Inter, ইত্যাদি)?
  ➤ Font weight কেমন Regular, Bold, Semibold?
• Border, Shadow, Radius:
  ➤ কার্ড বা বাটনের কোনটা soft shadow পেয়েছে?
  ➤ কোন বর্ডার আছে কি?
  ➤ Border radius কতো? (৫px? ১০px?)

Step 4: নিজের ডিজাইন বানানোর চেষ্টা করুন (Design It Yourself)

হ্যাঁ, আপনি একজন ডেভেলপার। কিন্তু নিজে ডিজাইন করতে পারলে আপনি হয়ে উঠবেন একজন ডেভেলপার+ডিজাইনার হাইব্রিড প্রফেশনাল, যেটা আজকের মার্কেটে অনেক বেশি demand পাচ্ছে।
নিজে ছোট ছোট UI ডিজাইন তৈরি করলে:

• ডিজাইন সেন্স বাড়ে
• রঙ, টাইপোগ্রাফি, স্পেসিং–এই জিনিসগুলো চোখে বসে যায়
• কোড করার সময় র‍্যান্ডম ডিজাইন না করে প্ল্যান করে কাজ করতে পারেন

শুরু করার জন্য কয়েকটি বেসিক ডিজাইন আইডিয়া:

১. Hero Section (ওয়েবসাইটের শুরুতে বড় ব্যানার)

• একটি বড় হেডিং
• সাবহেডিং বা description
• একটি CTA (Call-to-Action) Button
• পাশে একটি ইমেজ বা Illustration

এই ডিজাইনটা হচ্ছে “First Impression”—তাই এখান থেকেই আপনি বাস্তব ধারণা পাবেন কীভাবে Attention Grabbing UI বানাতে হয়।

২. Navbar + Footer

• Logo placement
• Navigation menu (Home, About, Services, Contact)
• Responsive burger menu (for small screen)
• Footer-এ contact info, copyright, social links

এগুলো ফ্রন্টএন্ড প্রজেক্টে বারবার লাগে, তাই নিজেই ডিজাইন করলে নিজে বারবার কোড করার সময় আরেকটু সহজে সাজিয়ে নিতে পারবেন।

৩. Login / Signup Page UI

• Simple form with inputs
• Labels, placeholders
• Eye icon for password visibility
• Remember Me / Forgot Password link
• “Login with Google” styled button

আপনি যখন Form Design নিজেই করবেন, তখন বুঝবেন user experience কেমন রাখা উচিত।

নিজের বানানো ডিজাইন কিভাবে কাজে লাগাবেন?

• Figma-তে ডিজাইন করুন → কোডে রূপান্তর করুন (HTML, Tailwind, React etc.)
• নিজের প্রজেক্টে বসান
• Behance বা GitHub-এ Showcase করুন
• Resume বা Portfolio-তে যুক্ত করুন

Step 5: Practice Ideas একজন ডেভেলপারের জন্য

আপনি যদি প্রতিদিন মাত্র ১৫-২০ মিনিট Figma নিয়ে খেলেন, তাহলে খুব অল্প সময়েই আপনার ডিজাইন বুঝার চোখ তৈরি হয়ে যাবে।

নিচে কিছু বাস্তবিক Practice Idea দেওয়া হলো:

১. Dribbble বা Behance দেখে UI প্র্যাকটিস করুন

Dribbble.com এবং Behance.net এই দুইটি সাইট হলো ডিজাইনের বিশাল জগৎ।

• প্রতিদিন একটা করে UI ডিজাইন দেখুন
• খেয়াল করুন: Typography, Color usage, Spacing
• চেষ্টা করুন নিজে recreate করতে

Bonus Task: Dribbble থেকে একটি simple card UI দেখে Figma-তে বানানোর চেষ্টা করুন।

২. একটি UI দেখে কোড করে ফেলুন

Figma থেকে অথবা অন্য কোন সোর্স থেকে একটি ডিজাইন নিন। তারপর সেটিকে:

• Pixel-by-pixel Matching করে কোড করুন
• Tailwind CSS বা Vanilla CSS দিয়ে replicate করুন
• দেখুন কোথায় struggle করছেন

এই এক্সারসাইজটাই আপনাকে ডেভেলপার টু প্রোডাকশন ডেভেলপার বানাবে।

৩. প্রতিদিন ১টি Figma ফাইল ওপেন করে Inspect করুন

• Community থেকে একটি টেমপ্লেট নিন
• Inspect Tool চালু করুন
• বিভিন্ন element এর margin, padding, color, font size, shadow সব দেখে note করুন

এতে আপনার চোখে স্পেসিং ও টাইপোগ্রাফি ধরা শুরু করবে।

৪. নিজে ডিজাইন করুন → কোডে রূপান্তর করুন

• Figma-তে একটা simple UI বানান
• তারপর সেটা HTML/CSS বা React দিয়ে কোড করুন
• দেখুন ডিজাইন এবং কোড কতটা মিলছে

এতে আপনার UI-to-Code skill grow করবে, যেটা বাজারে দারুণ চাহিদাসম্পন্ন।