Figma না জানলে Web Developer হিসেবে কোথায় পিছিয়ে পড়বেন? 

Figma না জানলে পিছিয়ে পড়বেন ? টাইটেল দেখেন অবশ্যই ভাবছেন যে আরে আমি ডেভেলপার আমার ডিজাইন জেনে আমি কি করব ?

এই প্রশ্নটা আমিও করতাম আমার ক্যারিয়ারের শুরুতে। তখন ভাবতাম, HTML, CSS, JavaScript, React জানলেই তো হয় ডিজাইন টিজাইন তো ডিজাইনারের কাজ!

আচ্ছা তার আগে আমি আপনাকে যদি একটা প্রশ্ন করি যে আপনি যখন একটা ওয়েবসাইট বানাচ্ছেন ডিরেক্ট কোড করে ডিজাইন না করেই তখন কি আপনার বটনে কোন কালার দিলে বেশি ভালো লাগবে বা ঐ কালারের সাথে কোন হোভার ইফেক্ট দিলে বেশি মানাবে এমন চিন্তায় আপনি চিন্তিত বা কোন ফন্ট দেয়া যায় প্রাইজিং সেকশনের কোথায় কি আইকন হবে ?

আমি বেশ প্যারা খেতাম আগে কোড করার সময় বিশেষ করে আমি যখন আমার নিজের পার্সোনাল প্রোজেক্টে কাজ করতাম বা ওয়েব টেমপ্লেট বানাতাম!

কিন্তু একদিন একটা রিয়েল ক্লায়েন্টের প্রজেক্টে হঠাৎ একটা Figma ফাইল হাতে এল। ফাইল খুলে দেখি কালার, ফন্ট, সাইজ, প্যাডিং, হোভার ইফেক্ট সবকিছু ডিজাইন করা। কি সুন্দর সব কিছু গুছানো আমার কাজ শুধু সেটা ফলো করে কোড করা এবং ঐ আউটপুট টা বের করা!

কিন্তু বুঝব কীভাবে? কোনটা কী? কীভাবে কী কোড করব? খুব কষ্টের সাথেই আমি কোন রকমে সিলেক্ট করে করে প্রোপার্টি ভ্যালু চেক করে কোড এ লিখছিলাম! তবে আমি খুবই মজা করে কোড করতে পারছিলাম এর কারণ হচ্ছে আমি ক্লিক করেই দেখে নিতে পারছি যে আমার বাটন এ কোন কালার হবে, কোন হোভার ইফেক্ট বাটনের কালারের সাথে সুন্দর মানাচ্ছে এবং ফুটিয়ে তুলছে । কোন ফন্ট আমার ওয়েবসাইটের সাথে যাচ্ছে শুধু তাই নয় কোন আইকন কোথায় বসবে এবং কোন সেকশনে কেমন UI হবে সব যেন আমার চোখের সামনেই আছে আমি শুধু দেখছি এবং কোড করছি কি মজা!

তবে তখন স্বাভাবিক ভাবেই আমার প্রয়োজনের চেয়ে বেশি সময় লেগে যায় কারণ আমি Figma’র প্রপার ইউজ কেস বা অ্যাডভানস কিছুই জানতাম না, এখন ক্লায়েন্টকে তো আর বলতেও পারছিনা যে আমি Figma বুঝতাম না বা পারতাম না এর আগে !

Figma না জানলে একজন Web Developer যেসব সমস্যায় পড়ে:

এই খানে আসলে সমস্যা না বলে “প্যারা” বললেই বেশি ভালো হয় । চলুন দেখি আসলেই কি কি প্যারা বা মুশকিল এর মধ্যে পরতে হয় যদি আপনি Figma না জানেন! বা আপনি যদি ঐ কোয়ালিটির মানুষ হন যে আরে ধুর “ডিজাইন করে ডিজাইনার” আমি তো ডেভেলপার আমার কাজ শুধুই কোড করা ডিজাইনের কিচ্ছুই আমার জানা লাগবে না । 

১. ডিজাইনারের সাথে কমিউনিকেশন গ্যাপ তৈরি হয়

আহেন শুরু করি কিছু সিনারিও দিয়ে ধরেন আপনি একজন সিনিয়র রোলে কাজ করছেনঃ 

নাজমুল ভাই, একজন সিনিয়র ডেভেলপার, ৬+ বছরের অভিজ্ঞতা। React, Next.js, Node.js সবই ঝড়ের গতিতে করেন। কিন্তু তিনি Figma-তে কাজ কখনো করেননি, কারণ বরাবরই বলতেন,

 “ডিজাইন আমার কাজ না ভাই, আমি কোড জানি – সেটাই যথেষ্ট!”

একদিন কোম্পানির এক নতুন প্রজেক্টের জন্য ডিজাইনার তাকে হ্যান্ডওভার করলো Figma ফাইল। সেখানে ছিলঃ

• Multiple Layouts with Auto Layout
  
• Component-based Design System
  
• Hover States, Active States, Variants
  

তিনি ফাইল খুলেই রীতিমতো থ হয়ে গেলেন। বুঝতেই পারলেন না:

• এই হোভার স্টেটটা কোনটায় আছে?
  
• এই Button টা কি সব জায়গায় একই?
  
• Border radius কত, Shadow কত, Font সাইজ কত?
  

ফলে তিনি কাজ শুরু করতে পারলেন না, আর বারবার ডিজাইনারকে Discord এ ট্যাগ করে জিজ্ঞেস করতে হচ্ছে :

“এই বাটনের হোভার কালার কী হবে?”
“এই Title টার ফন্ট কি ঠিক H2?”
“এইটা কি Mobile layout নাকি Desktop?”

ডিজাইনার বিরক্ত, টিম লিড হতাশ।
শেষমেশ টিমের একজন জুনিয়র আরিফ ভাই Figma নিয়ে কাজ করেন বলে তাকেই কন্ট্রিবিউট করতে হলো। পরে আরিফ ভাই নাজমুল ভাইকে অনেক কিছু বুঝিয়ে এবং শিখিয়েও দিলেন যেন পরের কোন ডিজাইন ফাইল দেখেই নাজমুল ভাই হতাশ না হন! 

এই এক্সপেরিয়েন্স নাজমুল ভাইয়ের মতো একজন সিনিয়র ডেভেলপারকেও বিব্রতকর অবস্থায় ফেলে দিলো।

Figma না জানলে আপনি যতই সিনিয়র হন না কেন, ডিজাইনারের সাথে কাজের সময় আপনার Autonomy কমে যাবে । আপনি হয়ে পড়েন নির্ভরশীল একজন, অথচ আপনি হচ্ছেন সেই টিমের Tech Lead! এটা শুধু আপনার দক্ষতাকেই প্রশ্নবিদ্ধ করবে না, বরং টিমের উপরেও চাপ ফেলবে।

২. ডিজাইনের ডিটেইলস না বুঝে ভুলভাবে কোড করা হয় (এবং বারবার রিভিশনে পড়তে হয়)

আমি যখন প্রথম ফিগ্মা নিয়ে জেনেছিলাম তখন ভেবেছিলাম এটাই মনে হয় শুধু এটা ওয়েবসাইটের ছবি থাকবে যেটা ডেভেলপার কপি পেস্ট করে দেখে কোড করবে এমন! 

কিন্তু আসলে Figma ফাইল মানেই শুধু ছবি না এটা একটা পূর্ণাঙ্গ ভিজ্যুয়াল গাইড, যার ভেতরে থাকে Spacing, Fonts, Color, Alignment, Interaction সবকিছুর নিখুঁত নির্দেশনা।

চলেন এখন আর একটা সিনেরিও দেখি স্ক্রিনশট-ভিত্তিক কোডিং-এর ফলাফল

সাকিল একজন mid-level React developer। রিসেন্টলি সে একটি মার্কেটিং এজেন্সির ক্লায়েন্টের জন্য হোমপেজ বানাচ্ছে। ডিজাইনার তাকে Figma ফাইল দিয়েছে, যেখানে সব layout neatly organized।

কিন্তু সে ভাবল,

“Figma-তে ঢুকে ঢুকে inspect করে time নষ্ট করার কী দরকার! একটা স্ক্রিনশট নিলেই তো সব বুঝা যায় একজায়গায়।”

সে স্ক্রিনশট দেখে দেখে কোড লেখা শুরু করলো.

• Padding আন্দাজে দিল 20px – অথচ ডিজাইনে ছিল 24px
  
• হেডিং ফন্ট দিল ‘Inter’ – অথচ ডিজাইনার ইউজ করেছিল ‘Poppins’
  
• Button Shadow দিল মনে মতো – যা আসল ডিজাইনের সঙ্গে মিল খায় না
  
• Section এর নিচে spacing রাখলো 40px – অথচ ডিজাইনে সেট করা ছিল 64px
  

তিন দিন পর ক্লায়েন্ট ফিডব্যাক দিল:

“Design-to-code match হচ্ছে না। Section গুলা tight লাগতেছে। Fonts mismatch করছে।”

ডিজাইনারও বললো,

“আমি যেভাবে সাজিয়েছি, সেটা তো reflect-ই করছে না। আমি তো পিকচার দিইনি, pixel-perfect গাইড দিয়েছি!”

এবার রিভিশন দিতে হলো, সব spacing আবার মেপে মেপে করতে হলো, ফন্ট আবার ঠিক করতে হলো, ডিজাইনারের কাছে গিয়ে গিয়ে verify করতে হলো।

অর্থাৎ কাজটা একবার না করে দুবার করতে হলো, শুধু Figma-এর Inspect Tool ব্যবহার না করার কারণে। এবং তিনি ভেবেছিলেন যে ধুরও ফিগ্মায় এতো প্যারা নিয়ে কি লাভ সেই একই জিনিসই তো!

ডেভেলপার হিসেবে আপনার কাজ হচ্ছে ডিজাইনের সঙ্গে একেবারে মিল রেখে ওয়েবসাইট তৈরি করা।
Figma আপনাকে সেই ডিজাইনকে code-level breakdown করে দেয় যেন আপনি শান্তি মতো কোড করতে পারেনঃ
যেমন:

• কোন text এর Font Size 36px?
• কোন Section এর Margin-Bottom 64px?
• কোনটা Bold, কোনটা Light?

Figma’র Inspect Panel না ব্যবহার করলে আপনি শুধু layout ভেজালেই ফেলবেন না, barbar client feedback-এর চক্করে পড়বেন। এতে শুধু সময়ই যাবে না, আপনার কোয়ালিটি নিয়েও প্রশ্ন উঠবে।

এই বারে আর একটা সিনেরও দেখি চলুন Project Workflow এ অপ্রয়োজনীয় Delay পড়ে

আমি যখন ফিগ্মা শিখেছিলেম তখন শিখার পরেই মনে হচ্ছিলো যেন কি এমন যুদ্ধ জয় করে ফেলেছি এখন “কে কই আছিস দে খালি ডিজাইন দিলেই কোড কইরা ফাডায়া ফেল্মু” কিন্তু আমার সিনিওর ভাই আমার সে ভুল ভেঙ্গে দিলেন বলা যায় আমার মোটিভিশন কেই শেষ করে দিলো আমি একটু বিরক্ত হয়েই বললাম যে কেন ভাই কেন কি সমস্যা এখন ? 

তখন তিনি আমাকে বুঝাইলেন একটা প্রজেক্ট মানে শুধু ডিজাইন হাতে পেয়ে কোড শুরু করলেই শেষ না এটা একটা সিঙ্ক্রোনাইজড টিম ওয়ার্ক। প্রজেক্টের স্পিড নির্ভর করে কে কার কাজ কতটা আগেই বুঝে নিতে পারছে তার উপর।

একজন দক্ষ Web Developer যদি Figma বোঝেন, তাহলে তিনি সহজেই নিচের বিষয়গুলো বুঝে নিতে পারেন:

• কোনটা Grid Layout?
  
• কোন Component গুলো Reusable?
  
• কোন অংশটা Fixed আর কোনটা Responsive?
  
• Breakpoints কোথায় কোথায় লাগবে?
  
• Images, SVG Assets কোথা থেকে Export করতে হবে?
  

কিন্তু আপনি যদি Figma না জানেন, তাহলে প্রতিটা ব্যাপারেই হয় ডিজাইনারের কাছে যেতে হবে, নয়তো আন্দাজে কাজ করতে হবে যেটা শেষ পর্যন্ত Project Delay এর কারণ হয়ে দাঁড়ায়।

Figma জানা থাকলে একজন Web Developer হিসেবে আপনি যেসব দারুণ সুবিধা পাবেন:

১. Figma বোঝার সবচেয়ে বড় উপকারিতা হলো Communication Gap দূর হয়ে যায়।

ধরুন, ডিজাইনার বলছে:

“এইটা একটা Secondary Button, Hover কালার একটু অফ হোয়াইট। Shadow টা একটু subtle।”

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

• Background Color: #f7f7f7
  
• Hover State: Opacity 80%
  
• Shadow: 0px 4px 12px rgba(0,0,0,0.08)
  

এর ফলে ডিজাইনারের কথা বুঝতে আপনার সময় লাগে না, বারবার মেসেজ দিতে হয় না, টিমের Collaboration অনেক ফাস্ট হয় এবং আপনি নিজেও চাইলে ডিজাইনার কে বলত পারবেন যে কোথায় ইম্প্রুভ করা যায় কিনা অথবা আপনি নিজেই সেটি করে নিয়ে পারবেন ।

 ২. Assets ও Icons নিজে Export করে নিতে পারবেন

Figma ফাইলের ভেতরে অনেক সময় প্রয়োজনীয় PNG, SVG, বা JPEG ফাইল থাকে Logo, Arrow Icon, Illustration ইত্যাদি।
Figma বোঝা না থাকলে আপনি বারবার বলবেন:

“ভাই, logo টা আলাদা করে দেন তো।”
“Icon গুলা export করে ইনবক্সে দেন।”

কিন্তু আপনি যদি Figma জানেন:

• আপনি Layers Panel থেকে Icon সিলেক্ট করবেন
  
• Right sidebar-এ “Export” ক্লিক করবেন
  
• PNG, SVG, WebP — যেটা দরকার সেটাতে ডাউনলোড করে নেবেন
  

এই ছোট্ট স্কিলটা আপনার কাজের গতি কয়েকগুণ বাড়িয়ে দেবে। আমার পার্সোনাল অভিজ্ঞতা থেকে বলছি আমাকে এই স্কিলটা এত বেশি উপকার করেছে যা বলে বুঝানর মতো নয়! আমি এখন যখন কোন প্রোডাক্ট ডিজাইন করি বা ওয়েবসাইট নিয়ে কাজ করি তখন ঐ প্রোডাক্ট বা ওয়েসাইটের জন্য আমি নিজেও আইকন বা লোগো বা Illustration বানিয়ে ফেলি।

 https://www.arifalmas.com/ আপনারা যদি এই ওয়েবসাইট টা ভিজিট করেন তাহলে এখানে যেগুল আইকন বা লোগো Illustration ইমেজ দেখছেন সব কাস্টম ডিজাইন করেছিলাম আমি নিজেই যেটা আমার ওয়েবসাইটকে আরও ইউনিক এবং প্রফেশনাল করে তুলেছে ।

৩. Component ও Auto Layout বুঝে Responsive Code করতে পারবেন

Figma-এর Component System এবং Auto Layout ফিচার গুলো ঠিকমতো বুঝতে পারলে আপনি কোড লেখার আগেই বুঝে যাবেন:

• কোনটা Reusable Component
• কোন জায়গায় Flex বা Grid ব্যাবহার হবে
• কোন সেকশনটা Responsive হবে এবং কোনটা Fixed থাকবে

উদাহরণ:
Auto Layout দেখেই আপনি বুঝতে পারবেনঃ
“এই কার্ড গুলা row না, column-এ থাকবে; এবং gap 16px।”

React/Tailwind লিখতে গিয়ে এই ফ্লোটা আগেই মাথায় থাকলে আপনি অনেক fast ও accurate কোড লিখতে পারবেন। ইভেন আপনি চাইলে ফিগ্মান নতুন ডেভ মোডে কোডের Property গুলোও দেখে নিতে পারবেন ।

৪. Team Project এ আপনি আরও Efficient সদস্যে পরিণত হবেন

ধরুন আপনি একটা বড় টিমে কাজ করছেন যেখানে একজন ডিজাইনার, একজন ফ্রন্ট-এন্ড ডেভেলপার, একজন ব্যাক-এন্ড ডেভেলপার আছেন।

Figma জানা না থাকলে আপনি শুধু ডিজাইনারের উপর নির্ভরশীল থাকবেন। অথচ জানলে আপনি নিজেই:

• Design Review করতে পারবেন
  
• Pixel-perfect কাজ করতে পারবেন
  
• Design Token (font, color, spacing) Maintain করতে পারবেন
  

আপনি হবেন এমন একজন মেম্বার যার উপর টিম ভরসা করতে পারে। আপনার Task Completion Time কমবে, মান বাড়বে।

কিভাবে Figma শেখা শুরু করবেন একজন Web Developer হিসেবে?

আপনি যদি একজন Web Developer হয়ে থাকেন এবং এখনই ভাবছেন:

“Figma তো ডিজাইনারদের টুল! এটা আমি কীভাবে শিখবো?”

তাহলে বলি, আপনি একদম ঠিক পথে হাঁটছেন। Figma শেখা একদম Rocket Science না বরং আপনার Developer Mindset দিয়ে আপনি খুব সহজেই Figma’র সবচেয়ে দরকারি দিকগুলো শিখে ফেলতে পারবেন।

চলুন ধাপে ধাপে দেখে নেন কীভাবে শেখা শুরু করবেন:

১. YouTube এ “Figma for Developers” লিখে সার্চ দিন

Figma নিয়ে প্রচুর টিউটোরিয়াল আছে, কিন্তু যেহেতু আপনি একজন ডেভেলপার তাই আপনার দরকার “design explanation না”, বরং design interpretation শেখা । 

YouTube এ গিয়ে সার্চ করুনঃ
“Figma to HTML”, “Figma to Tailwind”, “Figma for Frontend Developers”
এই ধরনের কিওয়ার্ডে আপনি এমন ভিডিও পাবেন যেগুলো:

• Figma ফাইল কিভাবে পড়তে হয়
  
• Inspect Tool কিভাবে ব্যবহার করতে হয়
  
• কোন Layer মানে কী
  
• কোথা থেকে Code বা Assets বের করতে হয়
  

যেমনঃ Kevin Powell, DesignCourse, Codegrid, Dev Ed এদের কিছু ভিডিও আপনার শুরুটা দারুণ করে তুলবে।

২. ফ্রি টেমপ্লেট খুলে Inspect Tool ব্যবহার করে দেখুন কী কী প্রপার্টি রয়েছে

শুধু ভিডিও দেখলে হবে না হাতেকলমে চেষ্টা করতে হবে। হাতে কলমে শিখালে সেটি আপনার আজীবন মনে থাকবে ।

Figma Community তে গিয়ে একটা ফ্রি ডিজাইন টেমপ্লেট ক্লোন করুন। তারপর একটা সেকশন সিলেক্ট করে নিজের মতো করে এনালাইসিস করুন:

• এই H1 টা কেমন ফন্টে লেখা?
  
• Padding কত আছে?
  
• Color Code ঠিক কী?
  
• Shadow বা Border আছে কিনা?
  
• Auto Layout ব্যবহৃত হয়েছে কি?
  

এভাবে Inspect Tool ব্যবহার করে আপনার চোখে অভ্যাস গড়ে উঠবে কীভাবে ডিজাইন থেকে Code Breakdown করতে হয়।

প্রথম দিকে কিছুই বুঝবেন না এটাই স্বাভাবিক। কিন্তু কিছুদিনের মধ্যেই আপনি নিজেই বলবেন,

৩. Dribbble বা Figma Community থেকে ডিজাইন নিয়ে কোড করার চেষ্টা করুন

Figma শেখার সবচেয়ে কার্যকর উপায় হচ্ছে Design দেখে Practice করা।

Dribbble বা Figma Community থেকে যেকোনো একটা Modern Landing Page, Card Layout, বা App UI নিন এবং সেটা দেখে HTML + Tailwind বা React দিয়ে কোড করার চেষ্টা করুন।

এই সময় লক্ষ্য করুন:

• Layout কীভাবে Flex/Grid এ কনভার্ট করা যায়?
  
• Typography কিভাবে match করা যায়?
  
• Responsive করলে কোন কোন Element ভাঙবে?
  
• Button State গুলা কীভাবে Handle করবেন?
  

প্রথমে মিল খাবে না কিন্তু প্রতিটি চেষ্টায় আপনি শিখবেন কীভাবে Figma ফাইলের ভেতরের চিন্তাগুলো Code এ রূপান্তর করতে হয়।

৪. Auto Layout, Component, Variants – এগুলা আস্তে আস্তে বুঝুন

Figma’র সবচেয়ে শক্তিশালী ফিচারগুলো হলো:

• Auto Layout: বুঝতে পারবেন কোন Section নিজে থেকেই grow করে, কোনটা fixed থাকে।
  
• Component: কোথা থেকে কোন Design বারবার Reuse হচ্ছে।
  
• Variants: Button এর Hover, Clicked, Disabled স্টেট কিভাবে সাজানো হয়েছে।
  

এই গুলো না বুঝলে আপনি কোডে Reusability আনতে পারবেন না, এবং UI টাও ভালোভাবে মেলাতে পারবেন না।

Figma-এর Documentation-এ বা YouTube প্লেলিস্টে “Auto Layout Tutorial”, “Component vs Instance”, “Variants Explained” এই কিওয়ার্ডগুলো দিয়ে শিখে নিতে পারেন।

এক লাইনে বললে:

Figma শেখা মানে ফটোশপ শেখা না, বরং Design দেখার জন্য Developers দের চোখ রেডি করা।

শুরুতে কিছু কঠিন মনে হলেও, একবার বুঝে ফেললে আপনি নিজেই বলবেনঃ “এতদিন কেন শিখিনি!”

এখনো ভাবছেন নাকি ? যে “আমি তো ভালোই কোড করি, Figma না জানলে কী এমন হবে?”
আসলে ব্যাপারটা অনেকটা এমন আপনি বিশাল এক রেস্টুরেন্টের শেফ, কিন্তু মেনু কার্ড পড়তে পারেন না। মানে খাবার বানাতে পারেন, কিন্তু কাস্টমার কী চাইছে সেটা ধরতেই পারছেন না! 

Figma না জানলে আপনি নিজেই বুঝতে পারবেন না বাটনটা আসলে কতটা গোল? প্যাডিংটা একটু নরম লাগছে নাকি জোরে ঠেলেছে? ফন্টটা হেডলাইন না হেডফেইক? আর সবচেয়ে বড় কথা, আপনি যখন ডিজাইনারকে দিনে ৫ বার জিজ্ঞেস করবেন “ভাই, এইটা লিংক না বাটন?”, তখন সে মনে মনে ভাবছে, “ও ভাই, Figma একটু শিখলেই তো পারতো!”

একটা ভালো ডেভেলপার শুধু কোড জানে না, সে টিমের কথা বোঝে, ডিজাইনের ভাষা বোঝে, আর ক্লায়েন্টের চোখে স্বপ্নের ছবিটা রূপ দেয় ওয়েবে। আপনি যদি চান যে, কোড দেখে কেউ বলুক “ও ভাই, Pixel perfect!” তাহলে Figma শিখে ফেলুন। না হলে শুধু কোড করবেন, আর ডিজাইনার বলবে “এই তো, আবার রিভিশন!”

Figma শেখা কোনো ডিজাইনার হওয়ার রাস্তা না। এটা একজন Pro Developer হওয়ার সিক্রেট সস।

Technology এর সকল আপডেট সবার আগে বিস্তারিত পেতে চেক করুন