১. ভূমিকা
সর্বশেষ হালনাগাদ: ২১/০৯/২১
অ্যাপগুলো বেসলাইন স্কিম, ব্যবহারকারী-সৃষ্ট ডাইনামিক কালার বা ব্র্যান্ড কালারসহ বিভিন্ন রঙ ধারণ করতে পারে।
Material You-এর সাথে প্রবর্তিত নতুন ডাইনামিক কালার ফিচারগুলো সম্পর্কে জানতে প্রস্তুত হন। এই ল্যাবে, আপনি ডাইনামিক কালার প্যালেট তৈরি করে শিখবেন যে এই কালার সিস্টেমটি কীভাবে কাজ করে, অ্যাক্সেসিবল কালার প্যালেট তৈরির মূল ধারণাগুলো কী এবং সর্বশেষ ডিজাইন টুল ব্যবহার করে ডাইনামিক কালারের মাধ্যমে আপনার অ্যাপকে কীভাবে ভিজ্যুয়ালাইজ করা যায়।
আপনি যা শিখবেন
- ম্যাটেরিয়াল ডিজাইনের রঙে নতুন কী আছে
- আপনার অ্যাপে ব্যবহারকারী-সৃষ্ট রঙ কীভাবে প্রয়োগ করবেন
- সাহায্য করার সরঞ্জাম
পূর্বশর্ত
এই ল্যাবের জন্য আমরা কিছু মৌলিক ডিজাইন ধারণার ওপর ভিত্তি করে কাজ করব।
- ডিজাইনের মৌলিক ধারণা সম্পর্কে জ্ঞান: রঙের প্যালেট
- বর্তমান অ্যান্ড্রয়েড কালার স্কিম এবং ভূমিকা সম্পর্কে জ্ঞান
- ফিগমা সম্পর্কে জ্ঞান
আপনার যা যা লাগবে
২. শুরু করুন
সেটআপ
শুরু করার জন্য আপনাকে ডিজাইনল্যাব ফিগমা ফাইলটি অ্যাক্সেস করতে হবে। ল্যাবের জন্য আপনার প্রয়োজনীয় সবকিছু ফিগমা ফাইলটির মধ্যেই রয়েছে। আপনি ফাইলটি ডাউনলোড করে ইম্পোর্ট করতে পারেন অথবা ফিগমা কমিউনিটি থেকে এর একটি অনুলিপি তৈরি করতে পারেন।
প্রথমে, ফিগমাতে সাইন ইন করুন অথবা একটি অ্যাকাউন্ট তৈরি করুন ।
ফিগমা কমিউনিটি থেকে অনুলিপি
"Visualizing dynamic color in your app with Material Design" ফাইলটিতে যান অথবা ফিগমা কমিউনিটিতে (Figma Community) " Visualizing dynamic color in your app with Material Design" লিখে সার্চ করুন। ফাইলটি আপনার ফোল্ডারে কপি করতে উপরের ডান কোণায় থাকা "Duplicate" বাটনে ক্লিক করুন।
ফাইল লেআউট
ফাইলটি ভালোভাবে দেখুন। আপনি লক্ষ্য করবেন যে ফাইলটি একটি ভূমিকা দিয়ে শুরু হয়ে স্বয়ংসম্পূর্ণভাবে সাজানো আছে। প্রতিটি বিভাগকে পরস্পর সংযুক্ত আর্টবোর্ডের একটি সারিতে ভাগ করা হয়েছে, যেখানে বিভাগটির কিছু মূল ধারণার পর অনুশীলনী দেওয়া আছে। বিভাগগুলো এবং অনুশীলনীগুলো একে অপরের উপর নির্ভরশীল, তাই এগুলো ক্রমানুসারে সম্পন্ন করা উচিত।
এই কোডল্যাবটি আপনাকে সেই ধারণা এবং অনুশীলনগুলো আরও বিস্তারিতভাবে বুঝতে সাহায্য করবে। Material You-এর নতুন ফিচারগুলো সম্পর্কে আরও জানতে আমি কোডল্যাবটির সাথে সাথে পড়ার পরামর্শ দিচ্ছি।
ইন্ট্রো আর্টবোর্ড থেকে শুরু করে, আর্টবোর্ডগুলোকে ক্রমানুসারে সংযুক্ত করার জন্য বাটন রয়েছে; বাটনটিতে ক্লিক করে লিঙ্কটি অ্যাক্সেস করুন।
ফিগমা প্লাগইন ইনস্টল করুন
এই কোডল্যাবটি ডাইনামিক কালার স্কিম এবং টোকেন তৈরি করার জন্য একটি নতুন ফিগমা প্লাগইনের উপর ব্যাপকভাবে নির্ভর করে। ফিগমা কমিউনিটি পেজ থেকে সরাসরি ফিগমা প্লাগইনটি ইনস্টল করুন অথবা ফিগমা কমিউনিটিতে 'Material Theme Builder' লিখে সার্চ করুন।
৩. রঙের ধারণা
ডাইনামিক কালার বলতে কী বোঝায়?
ম্যাটেরিয়াল ইউ রঙকে আরও ব্যক্তিগত অভিজ্ঞতা হিসেবে নতুনভাবে উপস্থাপন করে। ডাইনামিক কালার এক্সট্র্যাকশনের মাধ্যমে, সম্ভাব্য রঙের অভিজ্ঞতার পরিসর উল্লেখযোগ্যভাবে বিস্তৃত হয়।
ডাইনামিক কালার হলো ম্যাটেরিয়াল ইউ-এর একটি মূল অংশ, যেখানে একটি অ্যালগরিদম ব্যবহারকারীর ওয়ালপেপার থেকে কাস্টম রঙ তৈরি করে তাদের অ্যাপ এবং সিস্টেম ইউআই-তে প্রয়োগ করে।
উজ্জ্বলতা
ডাইনামিক কালার অপ্রত্যাশিত পরিস্থিতিতে কাজ করার জন্য তৈরি করা হয়েছে। বিভিন্ন দেখার প্রেক্ষাপটে কনট্রাস্ট রেশিও পরিচালনা করার জন্য, লুমিন্যান্স লেভেল হলো মূল বৈশিষ্ট্য যা প্রোডাক্ট টিমের প্রতিটি নির্দিষ্ট রঙের সংমিশ্রণ পরীক্ষা করা ছাড়াই রঙগুলোকে সফলভাবে একত্রিত হতে সাহায্য করে।
একই রকম উজ্জ্বলতার উপাদানগুলোর মধ্যে পাঠযোগ্যতার জন্য উপযুক্ত বৈসাদৃশ্য থাকবে না, অপরদিকে ভিন্ন উজ্জ্বলতার উপাদানগুলো আরও সহজে আলাদা করা যাবে।
টোনাল প্যালেট
একটি টোনাল প্যালেট হলো একটি হিউ (একটি ডাইনামিক এক্সট্র্যাক্টেড কালার)-এর সাথে সম্পর্কিত টোনগুলির একটি বর্ণালীতে রূপান্তর। একটি রঙকে তেরোটি টোনে রূপান্তর করার ফলে টোনাল প্যালেট নামক টোনাল রেঞ্জগুলির একটি গ্রুপকে বিভিন্ন প্রেক্ষাপটে প্রয়োগ করা সম্ভব হয়; যেমন একটি কম্পোনেন্টের ভেতরের স্বতন্ত্র উপাদান থেকে শুরু করে সম্পূর্ণ অ্যাপ থিম পর্যন্ত।
রঙকে একটি স্বর পরিসরে রূপান্তরিত করা হয়েছে।
৪. রং নিষ্কাশন
বীজ থেকে পরিকল্পনা
চলুন দেখি ম্যাটেরিয়াল থিম বিল্ডারের সাথে ডাইনামিক কালার কীভাবে কাজ করে।
- ম্যাটেরিয়াল থিম বিল্ডারটি খুলুন। ‘ডাইনামিক’ অপশনটি সিলেক্ট করে একটি ছবি ড্রপ করুন অথবা ফাইল ব্রাউজার থেকে একটি ছবি বেছে নিন। লক্ষ্য করুন, ছবিটির ওপর ভিত্তি করে সীড কালারটি আপডেট হবে।
- একটি ওয়ালপেপার থেকে রঙের মানগুলো সংগ্রহ করে সেগুলোকে একটি 'টাইপ' দেওয়া হয়, যা নির্ধারণ করে একটি স্কিমে রঙটি অন্যান্য রঙের সাথে কীভাবে সম্পর্কিত হবে। এই 'কী কালার'গুলো (ডানদিকে) এই মানগুলো প্রতিফলিত করার জন্য আপডেট করা হয়েছে।
- এরপর সেগুলোকে উজ্জ্বলতা-ভিত্তিক টোনাল প্যালেটে রূপান্তরিত করা হয়, যা হালকা থেকে গাঢ় পর্যন্ত টোন সহ পাঁচটি রঙের পরিসর তৈরি করে। কালার আউটপুটে টোনাল প্যালেটগুলোকে সেভাবেই চিহ্নিত করা থাকে।
- পাঁচটি টোনাল রেঞ্জ থেকে, নির্দিষ্ট টোনগুলোকে (উজ্জ্বলতার উপর ভিত্তি করে) একটি স্কিম গঠনকারী পূর্বনির্ধারিত ভূমিকাগুলোতে স্থান দেওয়া হয়। ডিজাইন টোকেনের মাধ্যমে রঙগুলোকে একটি স্কিমের সাথে ম্যাপ করা হয়।
তৃতীয় স্তরের স্বর পরিসর থেকে তৃতীয় স্তরের রঙের ভূমিকা তৈরি করা হয় এবং সেগুলোকে উপাদানগুলিতে বিন্যস্ত করা হয়।
৫. থিম এবং টোকেন
ডিজাইন টোকেন ডিজাইনারদের একটি নির্দিষ্ট মানের পরিবর্তে, UI-তে কোনো এলিমেন্টের রঙের ভূমিকা নির্ধারণ করার সুযোগ দিয়ে একটি প্রোডাক্ট জুড়ে নমনীয়তা এবং সামঞ্জস্যতা নিশ্চিত করে। টোকেনগুলো একটি এলিমেন্টের নির্ধারিত ভূমিকা এবং সেই ভূমিকার জন্য নির্বাচিত রঙের মানের মধ্যে একটি সেতুবন্ধন হিসেবে কাজ করে। ডাইনামিক কালারের প্রচলনের ফলে, নির্দিষ্ট রঙের পরিবর্তে রঙের ভূমিকার জন্য ডিজাইন করা আরও মৌলিক হয়ে উঠেছে।
থিমগুলিতে রঙ এবং টাইপ উভয়ের জন্যই ম্যাটেরিয়াল ডিজাইন টোকেন থাকে, যা নিশ্চিত করে যে ডিজাইন এবং কোডের জন্য বেসলাইন উপস্থাপনের একটিই নির্ভরযোগ্য উৎস রয়েছে, এর সাথে ব্যবহারকারী-সৃষ্ট প্যালেট এবং কাস্টম মানও অন্তর্ভুক্ত থাকে।
ফিগমাতে, প্লাগইনটি এই টোকেনগুলোকে স্টাইল হিসেবে তৈরি করে, অর্থাৎ তৈরি হওয়া স্টাইলগুলো ব্যবহার করলে আপনি এমডি (MD) টোকেনগুলোই ব্যবহার করবেন।
একটি টোনাল প্যালেটের রঙগুলোকে ডিজাইন টোকেনের মাধ্যমে হালকা বা গাঢ় স্কিমে বিন্যস্ত করা হয়।
ম্যাপিং সিস্টেম একটি কম্পোনেন্টের প্রতিটি উপাদানে একটি টোন নির্ধারণ করে দেয়।
টোকেন সেটআপ করুন
আপনার ডিজাইনগুলিতে ডাইনামিক কালার প্রয়োগ করতে হলে, আমাদেরকে বিদ্যমান ম্যাটেরিয়াল-থিমের টোকেনগুলিতে মকআপটি সেট করতে হবে।
- এই থিমটি ব্যবহার করার জন্য, লেআউটের ফ্রেমটি সিলেক্ট করে 'swap'-এ ক্লিক করুন এবং লেআউটের সমস্ত টোকেন (ফিগমা স্টাইল) ডানদিকে সেট করুন। আপনি দেখবেন যে সিলেকশন কালারগুলিতে স্টাইল প্রিফিক্সটি আপডেট হয়ে গেছে।
নির্বাচিত ডিজাইনে ব্যবহৃত সংযুক্ত থিমটি আপডেট করতে সোয়াপ-এ ক্লিক করুন।
- এখন একটি ছবি ড্রপ করুন অথবা ফাইল ব্রাউজার থেকে একটি বেছে নিন। ছবিটি থেকে নেওয়া ডাইনামিক রঙটি মকআপের মানগুলিতে পরিবর্তিত হবে।
- শাফেল বাটনটি ক্লিক করুন, এটি ইমেজ থেকে রঙ নেওয়ার পরিবর্তে, অনুমানের জন্য ব্যবহৃত সিড কালারটিকে র্যান্ডমাইজ করবে। ডাইনামিক কালার আপনার ডিজাইন মকগুলোকে কীভাবে প্রভাবিত করতে পারে, তা দ্রুত দেখার এটি আরেকটি উপায়।
বীজের রঙ এলোমেলো করতে শাফেল বোতামে ক্লিক করুন।
থিম ছাড়া প্লাগইনটি খুললে শুরু করার জন্য একটি সেটআপ স্ক্রিন দেখা যাবে। 'Get started' বিকল্পটি ডিফল্ট বেসলাইন 'material-theme'-কে একটি ফিগমা স্টাইল গ্রুপ হিসেবে তৈরি করে দেবে, যা আপনি আপনার মকআপের সাথে সংযোগ করতে বা ম্যাটেরিয়াল ডিজাইন কিটের সাথে ব্যবহার করতে পারবেন।
৬. UI-তে আবেদন করা
প্রদত্ত লেআউটগুলি ম্যাটেরিয়াল ডিজাইন কিট দিয়ে তৈরি করা হয়েছে, যা ম্যাটেরিয়াল ডিজাইন টোকেন ব্যবহার করে, কিন্তু কয়েকটি কাস্টম এলিমেন্ট রয়েছে যেগুলো ম্যাপ করা হয়নি।
- আর্টিকেল কার্ডগুলো নির্বাচন করুন। ফিল-এ, স্টাইলটি (চারটি ডট আইকন) material-theme/surface- এ সেট করুন। (আপনি surface লিখেও সার্চ করতে পারেন)।
- একই প্রক্রিয়ায়, কার্ডগুলো থেকে ধরন নির্বাচন করে সেটিকে ‘অন-সারফেস’ এবং চেকবক্সগুলোকে ‘প্রাইমারি’ হিসেবে সেট করুন।
ডিজাইনের কার্ডগুলোতে ফিগমা স্টাইল ব্যবহার করা হয়েছে।
এরপরে আমরা বাকি স্কিমগুলো পুনরাবৃত্তি করার জন্য অতিরিক্ত মক তৈরি করব।
থিম তৈরি করুন এবং পুনরাবৃত্তি করুন
আমরা এখন ডাইনামিক কালার দেখার জন্য একটি মকআপ সম্পূর্ণরূপে সংযুক্ত করেছি, কিন্তু আমরা একাধিক থিম তৈরি করে সেগুলোকে আলাদা আলাদা মকআপে অদলবদল করে একবারে বিভিন্ন ধরনের ডাইনামিক কালার দেখতে পারি।
- প্লাগইন মডালে, ড্রপডাউনে ক্লিক করে 'নতুন থিম যোগ করুন ' নির্বাচন করুন।
- একটি অনন্য থিমের নাম তৈরি করুন এবং 'থিম তৈরি করুন' -এ ক্লিক করুন। এটি তৈরি করা প্রতিটি থিমের জন্য নতুন রঙিন ডায়াগ্রামও তৈরি করবে।
ড্রপডাউন মেনুর মাধ্যমে নতুন থিম যোগ করা।
- একটি ছবি যোগ করুন অথবা বীজের রঙ এলোমেলো করুন।
- প্লাগইন মডালে, একটি মকআপ (অ্যাপ UI কম্পোনেন্ট) নির্বাচন করুন এবং 'সোয়াপ' (swap ) এ ক্লিক করুন। এটি ড্রপডাউনে দেখানো বর্তমান থিম অনুযায়ী স্টাইলের মানগুলো আপডেট করবে।
- মকআপটি ডুপ্লিকেট করুন (CMD + D)।
নির্বাচিত ডিজাইনে ব্যবহৃত সংযুক্ত থিমটি আপডেট করতে সোয়াপ-এ ক্লিক করুন।
- ১-৫ ধাপগুলো পুনরাবৃত্তি করুন।
এখন আপনার কাছে বিভিন্ন গতিশীল রঙের পুনরাবৃত্তি সহ একাধিক ডিজাইন রয়েছে!
৭. অভিনন্দন
ডাইনামিক কালার শেখা এবং প্রয়োগ করার জন্য চমৎকার কাজ করেছেন! ম্যাটেরিয়াল থিম বিল্ডার ডাইনামিক কালার ভিজ্যুয়ালাইজ করা, কাস্টম থিম তৈরি করা এবং কোডে এক্সপোর্ট করার মাধ্যমে ম্যাটেরিয়াল ডিজাইনে আপনার জন্য রঙের কাজকে আরও সহজ করে তুলতে সাহায্য করে।
আপনার কোনো প্রশ্ন থাকলে, টুইটারে @MaterialDesign ব্যবহার করে যেকোনো সময় নির্দ্বিধায় আমাদের জিজ্ঞাসা করতে পারেন।
আরও ডিজাইন কন্টেন্ট এবং টিউটোরিয়ালের জন্য youtube.com/MaterialDesign- এ চোখ রাখুন।