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

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

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

কোড না করেই যদি ডিজাইনের ফিল না আসে?

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

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

হঠাৎ একদিন Figma…

কিন্তু একদিন একটা রিয়েল ক্লায়েন্টের প্রজেক্টে হঠাৎ একটা 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?”

বিব্রত সিনিয়র, বিরক্ত ডিজাইনার

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

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

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

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

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

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

স্ক্রিনশট নির্ভর কোডিংয়ের বিপদ

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

সাকিল একজন mid-level React developer।
রিসেন্টলি সে একটি মার্কেটিং এজেন্সির ক্লায়েন্টের জন্য হোমপেজ বানাচ্ছে।

ভাবনার ভুল: “Screenshot নিলেই হবে”

সে ভাবল,

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

তারপর কী হলো?

• Padding দিল 20px, অথচ ডিজাইনে ছিল 24px
• ফন্ট দিল ‘Inter’, অথচ ডিজাইনার ইউজ করেছিল ‘Poppins’
• Shadow দিল নিজের মতো
• Section এর নিচে spacing রাখলো 40px, ডিজাইনে ছিল 64px

ফলাফল: আবার শুরু থেকে

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

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

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

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

এইবার রিভিশন দিতে হলো, সব spacing আবার মেপে মেপে করতে হলো।

৩. Project Workflow এ অপ্রয়োজনীয় Delay পড়ে

আমি যখন ফিগ্মা শিখেছিলাম তখন মনে হচ্ছিলো যেন যুদ্ধ জয় করে ফেলেছি।

“কে কই আছিস দে খালি ডিজাইন দিলেই কোড কইরা ফাডায়া ফেল্মু!”

কিন্তু সিনিয়র ভাইয়ের Reality Check

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

প্রজেক্টের স্পিড নির্ভর করে কে কার কাজ কতটা আগেই বুঝে নিতে পারছে তার উপর।

নিজের Experiment Lab তৈরি করুন

আপনি চাইলে নিজস্ব Experiment Lab তৈরি করতে পারেন, যেখানে আপনার প্রয়োজনীয় component, color palette, typography, এবং layout আগেই সাজানো থাকবে। এর ফলে আপনি UI ডিজাইন আগে থেকেই রেডি করে রাখতে পারবেন, এবং এরপর সরাসরি coding শুরু করা অনেক সহজ হবে।
এই Lab আপনার জন্য হবে একধরনের sandbox, যেখানে আপনি নতুন নতুন ধারণা পরীক্ষা করে দেখতে পারবেন, এবং বারবার নতুনভাবে শুরু না করে একই ভিত্তির উপর দাঁড়িয়ে আগাতে পারবেন।

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

১. Communication Gap দূর হয়ে যায়

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

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

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

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

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

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

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

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

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

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

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

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

এখনো ভাবছেন?

আপনি বিশাল এক রেস্টুরেন্টের শেফ, কিন্তু মেনু কার্ড পড়তে পারেন না!

Figma না জানলে আপনি বুঝতে পারবেন না,

• বাটনটা আসলে কতটা গোল?
• প্যাডিংটা একটু নরম লাগছে নাকি জোরে ঠেলেছে?
• ফন্টটা হেডলাইন না হেডফেইক?

আর ডিজাইনার ভাবছে,

“ও ভাই, Figma একটু শিখলেই তো পারতো!”

শেষ কথা

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

ফিগ্মা নিয়ে কমপ্লিট একটা গাইডলাইন পেতে চান ? তাহলে অবশ্যই জানাতে ভুলবেন না।