Figma Plugin of This Week #1
মিডিয়ামে নিয়মিত লেখার ইচ্ছে নিয়েই শুরু করেছিলাম একটা সময়। কিন্তু সময়ের অভাবে সেভাবে লেখা হয় নি। অনেকেই বিভিন্ন সময়ে বিভিন্ন টপিকস, টিপস নিয়ে জানতে চান। UX ডিজাইনের এই দীর্ঘ যাত্রায় যা শিখেছি তাও নেহায়েত কম নয়। এখন থেকে তাই ইচ্ছে আছে কমিউনিটির জন্য লেখার। যেহেতু অনেক ডিজাইনারই ডিজাইনের অন্যান্য বিষয় নিয়ে অনেক দারুন দারুন ব্লগ লিখেছেন তাই আমি চেষ্টা করবো টুল স্পেসিফিক জিনিসগুলো নিয়ে আপনাদের জানাতে। এটা প্রথম পর্ব ধরে নিতে পারেন।
আমার ডিজাইন লাইফে আমি মোটামুটি Sketch, Adobe XD আর Figma সব ধরনের টুল নিয়েই কাজ করেছি।। প্লাগিন সাপোর্টই বলেন আর ডিজাইন সিস্টেম নিয়ে কাজ করা সব ক্ষেত্রেই UX ডিজাইন টুল হিসেবে Figma ই এখন সবচেয়ে ভালো করছে। তাই আমার আলোচনাগুলো Figma নিয়েই হবে।আমি প্রতিটি ব্লগেই চেষ্টা করবো কিছু একটা নিয়ে আলোচনা করতে। হতে পারে ফিগমা প্লাগিন, টিপস বা অন্য কিছু। এবারের পর্ব একটি প্লাগিন নিয়েই। কারন অনেক ক্ষেত্রেই আমরা অনেক প্লাগিন নিয়ে ইন্সটাগ্রামে এবং লিংকডইনে স্লাইড দেখে থাকি। কিন্ত সেটার সম্পূর্ন ব্যাবহার দেয়া থাকে না। যার জন্য অনেক ক্ষেত্রেই আমরা প্লাগিনগুলো কখন ব্যাবহার করতে গিয়ে সমস্যায় পড়ে থাকি এবং কোন সিচুয়েশনে ব্যাবহার করা উচিত সেটা নিয়েও সমস্যা ফেস করি। তাই চেষ্টা করবো ইন ডেপথ জিনিসগুলো নিয়ে আলোচনা করার।
আজকের ফিগমা প্লাগিন
আজকে যে প্লাগিনটি নিয়ে কথা বলবো তার নাম হলো : “To path”
প্লাগিনটির নাম আর ছবি দেখে হয়ত কিছুটা আন্দাজ করেই নিয়েছেন প্লাগিনটি কি করতে পারে। জ্বি হ্যা, নাম যেমন কাজ ও তেমন। ফিগমাতে আকা কোন লাইন বা পাথের উপরে দিয়ে আপনি যেকোন অবজেক্টকে সাজাতে পারবেন এই প্লাগিন দিয়ে। একটা নমুনা দেখাই:
নিশ্চয়ই কিছুটা হলেও ধারনা পেয়েছেন এটার কাজ সম্পর্কে। কাজ করার শুরুতে ইন্সটল করে নিন প্লাগিন টি। একটা বিষয় মাথায় রাখতে হবে যে আগে অবশ্যই একটা পাথ পেন টুল দিয়ে একে নিতে হবে আর যে অবজেক্টটা দিয়ে সাজাতে চাই সেটাও পাশে এনে রাখতে হবে।
কিভাবে প্লাগিনটি ব্যাবহার করবো
এখানে আমি কলমের একটি আইকনকে অবজেক্ট হিসেবে নিয়েছি আর একটি কার্ভ পেন টুল দিয়ে একে নিয়েছি। এবার “cmd + / ” প্রেস করে Quick Action বার ওপেন করুন। সেখান থেকে “To Path” প্লাগিন সিলেক্ট করে এন্টার দিন। নিচের ছবির মত একটা উইন্ডো আসবে।
এবার কার্ভ আর অবজেক্ট সিলেক্ট করে ফেলুন। সিলেক্ট করার পর প্লাগিন উইন্ডো চেঞ্জ হয়ে সিলেক্টেড দেখাবে এবং কিছু অপশন চলে আসবে। এবার সাজাতে হলে আপনাকে সিলেক্টেড কার্ভ আর অবজেক্টকে লিনক করে নিতে হবে। এটা একদম সহজ। সিলেক্টড অবস্থায় “Link” বাটনে ক্লিক করুন এবং ম্যাজিক!
দেখুন আপনার অবজেক্টটি পুরো কার্ভ ধরে সাজানে হয়ে গেছে। এবার কন্ট্রোল আপনার হাতে। বিভিন্ন রকম কাস্টমাইজেশন দিয়ে আরো দারুন করে সাজিয়ে নিতে পারেন। “Count” অপশন কমিয়ে বাড়িয়ে কার্ভে/পাথে কি পরিমান অবজেক্ট থাকবে সেটা ঠিক করে দিতে পারবেন।
কন্টেন্ট স্পেসিং ও কম বেশী করতে পারবেন “Spacing” অপশন থেকে। “Spacing” এর লিংক সিম্বলে ক্লিক করলে অবজেক্টগুলো পুরো কার্ভ জুড়ে সমানভাবে ছড়িয়ে থাকবে।
“Vertical Alignment” & “Horizontal Alignment” এই দুটো জিনিসই ব্যাবহার করে পাথ/কার্ভ থেকে কতটুকু ডানে-বামে বা উপরে-নিচে আসবে এটা ঠিক করে দিতে পারবেন। নিচের ছবিটা দেখুন।
লাস্ট যে দুটি অপশন বাকি থাকলো তা হলো “Objects follow curve rotation” এবং “Reverse Direction” . Objects follow curve rotation হলো আমাদের সিলেক্ট করা অবজেক্ট পাথ/কার্ভের মুভমেন্টের সাথে সাথে ঘুরবে কিনা। আর Reverse Direction হলো অবজেক্টের ডিরেকশন পুরোটা উল্টে যাবে।
একই প্রসেসে টেক্সট ও সাজাতে পারবেন। দারুন না?
আপনি যদি কোন ভিজুয়াল প্যাটার্ন তৈরী করতে চান তবে এই প্লাগিনটি দারুন কাজে আসবে। একটা নির্দিষ্ট পথে মনমতো অবজেক্ট নিয়ে খেলাধূলা করতে পারবেন।
