উপাদান রঙ কাস্টমাইজ করা

1। পরিচিতি

শেষ আপডেট: 04/18/22

ab231b949cf7dae2.gif

অ্যাপ্লিকেশানগুলি বেসলাইন স্কিম, ব্যবহারকারীর তৈরি ডায়নামিক রঙ বা ব্র্যান্ডের রঙগুলি থেকে রঙের অ্যারে নিতে পারে।

আগের মেটেরিয়াল ইউ কালার ল্যাব অন্বেষণ করেছে কিভাবে ডিজাইন মকআপের মধ্যে ডাইনামিক কালার ভিজ্যুয়ালাইজ করা যায়, কিন্তু আপনি ম্যাটেরিয়াল থিমিং ব্যবহার করে আপনার ব্র্যান্ডের রঙের সাথে আপনার অ্যাপটি কাস্টমাইজ করতে পারেন। আপনার ব্র্যান্ডের রঙগুলির সাথে নতুন রঙের সিস্টেমটি ব্যবহার করা একটি অ্যাক্সেসযোগ্য রঙের স্কিম তৈরি করবে যা আরও গতিশীল বৈশিষ্ট্যগুলি গ্রহণ করতে পারে!

আপনি কি শিখবেন

  • মেটেরিয়াল থিম নির্মাতার সাথে কীভাবে একটি কাস্টম থিম তৈরি করবেন।
  • মকআপ ডিজাইন করতে একটি কাস্টম থিম প্রয়োগ করা হচ্ছে।
  • গতিশীল এবং কাস্টম রং একত্রিত করার সম্ভাবনা।

পূর্বশর্ত

এই ল্যাবের জন্য আমরা কিছু মৌলিক ডিজাইনের ধারণা তৈরি করব।

আপনি কি প্রয়োজন হবে

2. শুরু করুন

সেটআপ

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

প্রথমে, Figma সাইন ইন করুন বা একটি অ্যাকাউন্ট তৈরি করুন

ফিগমা সম্প্রদায় থেকে সদৃশ

কাস্টমাইজিং ম্যাটেরিয়াল ফাইলে নেভিগেট করুন বা ফিগমা কমিউনিটির মধ্যে মেটেরিয়াল ডিজাইনের সাথে আপনার অ্যাপে ভিজ্যুয়ালাইজিং ডাইনামিক কালার খুঁজুন। আপনার ফাইলগুলিতে ফাইলটি অনুলিপি করতে উপরের ডানদিকের কোণায় ডুপ্লিকেট ক্লিক করুন৷

2cb1a5f77aab6012.png

ফাইল লেআউট

আপনি যখন ফাইলটি দেখছেন, লক্ষ্য করুন যে ফাইলটি স্বয়ংসম্পূর্ণ, একটি ভূমিকা দিয়ে শুরু করে। প্রতিটি বিভাগকে আর্টবোর্ডের একটি সারিতে বিভক্ত করা হয়েছে যা একসাথে সংযুক্ত, বিভাগের জন্য কিছু মূল ধারণা সহ, অনুশীলন দ্বারা অনুসরণ করা হয়। বিভাগ এবং ব্যায়াম একে অপরের উপর তৈরি এবং ক্রমানুসারে সম্পন্ন করা উচিত।

এই কোডল্যাব আপনাকে সেই ধারণাগুলি এবং অনুশীলনগুলি আরও বিশদভাবে পরিচালনা করে। নতুন উপাদান আপনার বৈশিষ্ট্য সম্পর্কে আরও জানতে কোডল্যাব সহ পড়ুন!

289defd9d067d2f0.png

ফিগমা প্লাগইন ইনস্টল করুন

এই কোডল্যাবটি গতিশীল রঙের স্কিম এবং টোকেন তৈরি করতে একটি নতুন ফিগমা প্লাগইনের উপর অনেক বেশি নির্ভর করে। Figma সম্প্রদায় পৃষ্ঠা থেকে সরাসরি Figma প্লাগইন ইনস্টল করুন বা Figma সম্প্রদায়ে "ম্যাটেরিয়াল থিম বিল্ডার" অনুসন্ধান করুন৷

61f6731c8ab4d4f7.png

3. উপাদান রঙের স্কিম

প্রথমে উপাদানের মধ্যে কীভাবে রঙ ব্যবহার করা হয় এবং নতুন রঙের সিস্টেম কীভাবে কাজ করে তার একটি ওভারভিউ।

রঙ শৈলী প্রকাশ করতে এবং অর্থ প্রকাশ করতে ব্যবহৃত হয় যে অর্থ ব্যবহারকারীর ব্যক্তিগত, ব্র্যান্ডিং বা শব্দার্থগত অর্থ কিনা। রঙ সিস্টেম গতিশীলভাবে পরিবর্তনশীল রঙের স্কিমগুলির পরিবর্তনশীলতা পরিচালনা করে যা ব্যবহারকারীর ইনপুট পরিবর্তনের সাথে সাথে উদ্ভূত হয়। টোনাল সম্পর্কের যুক্তি এবং বর্ণ এবং ক্রোমায় পরিবর্তন নমনীয় রঙ প্রয়োগের জন্য একটি ভিত্তি প্রদান করে।

রঙের স্থানটি 5টি কী রঙ এবং তারপর টোনাল প্যালেট তৈরি করে একটি উত্স রঙ থেকে বের করা অ্যাক্সেসযোগ্য আলো এবং গাঢ় রঙের স্কিমগুলি তৈরি করার একটি উপায় প্রদান করে, যেখানে নির্দিষ্ট টোনাল ধাপগুলি নির্বাচন করা হয়।

এই রঙ পরিবর্তনের কৌশলটি শুধুমাত্র একটি অ্যাক্সেসযোগ্য রঙের স্কিম প্রদান করে না, কিন্তু ব্র্যান্ডেড স্কিমগুলি তৈরি করার পদ্ধতি প্রদান করে যা ব্যবহারকারীর তৈরি রঙের স্কিমগুলির সাথে অ্যাক্সেসযোগ্য এবং সুসংগত।

b9d07b529bda89c7.png

রঙের স্কিমগুলি অ্যাক্সেসযোগ্য স্কিমগুলি তৈরি করতে 5টি কী রঙ থেকে টোনাল প্যালেটে তৈরি করা হয়

ব্র্যান্ডেড থিম

M3 আপনার ব্র্যান্ডের সাথে যোগাযোগ করে এমন শৈলীগুলিকে সংজ্ঞায়িত এবং বজায় রাখতে সাহায্য করার জন্য কাস্টম প্যারামিটারগুলির পদ্ধতিগত অ্যাপ্লিকেশনগুলিকে সমর্থন করে৷

একটি কাস্টম স্কিম হল একটি রঙের স্কিম যা ব্যবহারকারীর ডিভাইস ওয়ালপেপার থেকে নেওয়া হয় না, বরং অ্যাপ মেকার থেকে নেওয়া হয়। M3 রঙের সিস্টেম এবং কাস্টম স্কিমগুলি অ্যাপগুলিতে গতিশীল রঙ সক্ষম করার ভিত্তি।

কাস্টম স্কিমটি প্রয়োজনীয় টোকেন (কালার স্লট) সেট আপ করে সহজে মাইগ্রেশনের জন্য M2 এবং M3 এর মধ্যে ব্যবধান পূরণ করবে এবং আরও ব্র্যান্ডেড অভিজ্ঞতা তৈরি করবে।

691bd232c376b104.png

মেটেরিয়াল থিম বিল্ডারে ব্র্যান্ডের রং যোগ করা হচ্ছে

4. রঙের স্কিম: অ্যাকসেন্ট রং

একটি রঙ পরিকল্পনার ভিত্তি হল পাঁচটি মূল রঙের সেট যা পৃথকভাবে 13 টোন সহ পৃথক টোনাল প্যালেটের সাথে সম্পর্কিত। প্রতিটি টোনাল প্যালেট থেকে নির্দিষ্ট টোন একটি UI জুড়ে রঙের ভূমিকার জন্য বরাদ্দ করা হয়। চলুন শুরু করা যাক মেটেরিয়াল থিম বিল্ডার প্লাগইন খুলে এবং আমাদের প্রথম অ্যাকসেন্ট রঙ সেট আপ করে: প্রাথমিক

6e24bf04c72acc86.png

শুধুমাত্র প্রাইমারি প্রবেশ করালে এটি একটি সম্পূর্ণ রঙের স্কিম তৈরি করতে উত্স হিসাবে ব্যবহার করবে।

  1. প্লাগইন মোডেলে, কাস্টম ক্লিক করুন। এটি থিমটিকে একটি কাস্টম থিমে স্যুইচ করবে৷ এই ল্যাবের জন্য আমরা ইতিমধ্যে তৈরি করা উপাদান-থিম ব্যবহার করব, তবে আপনি চাইলে একটি নতুন থিমও তৈরি করা যেতে পারে, গতিশীল রঙের ভিজ্যুয়ালাইজে আরও জানুন।
  2. পরবর্তী আমরা একটি প্রাথমিক কী রঙ সেট করব। প্রাথমিকটি হতে পারে আপনার প্রধান ব্র্যান্ডের রঙ, বা প্রাথমিক উচ্চারণ রঙ যা সর্বাধিক ব্যবহৃত হয়। বাকি মূল রঙগুলি প্রাথমিক রঙের উপর ভিত্তি করে তৈরি হবে। এর মানে, অতিরিক্ত রং যোগ করার দরকার নেই যদি আপনার প্রয়োজন না থাকে।

5. বাকি থিম তৈরি করুন

থিম তৈরি করতে প্রাথমিক ব্যবহার করা হয়, তবে প্রাথমিক ব্র্যান্ডের রঙকে সমর্থন করার জন্য আপনার উচ্চারণ রং থাকতে পারে।

  1. প্লাগইন মোডেলে, সেকেন্ডারি কালারে ক্লিক করে একটি গৌণ রঙ যোগ করুন। রঙিন অভিব্যক্তির সুযোগ প্রসারিত করার সময় UI-তে কম বিশিষ্ট উপাদানগুলির জন্য মাধ্যমিক ভূমিকা ব্যবহার করা হয়। সেকেন্ডারি কালার কালার স্কিম্যাটিক এবং অ্যাপ UI এ আপডেট হবে।
  2. Tertiary জন্য একই কাজ. তৃতীয় ভূমিকাগুলি বিপরীত উচ্চারণের জন্য ব্যবহৃত হয় যা প্রাথমিক এবং মাধ্যমিক রঙের ভারসাম্য বা একটি উপাদানের প্রতি বর্ধিত মনোযোগ আনতে ব্যবহার করা যেতে পারে। তৃতীয় রঙের ভূমিকা নির্মাতাদের তাদের বিবেচনার ভিত্তিতে ব্যবহার করার জন্য ছেড়ে দেওয়া হয়েছে এবং পণ্যগুলিতে বিস্তৃত রঙের অভিব্যক্তিকে সমর্থন করার উদ্দেশ্যে।
  3. এখন নিরপেক্ষ, নিরপেক্ষ ভূমিকাগুলি পৃষ্ঠ এবং পটভূমির জন্য এবং উচ্চ জোর দেওয়া পাঠ্য এবং আইকনগুলির জন্য ব্যবহৃত হয়।

84e8a274ea3f8a19.png

আপনার রঙের স্কিম সম্পূর্ণরূপে কাস্টমাইজ করতে মাধ্যমিক, তৃতীয় এবং নিরপেক্ষ প্রদান করুন..

আপনার ব্র্যান্ডের রঙগুলি এখন M3 রঙের স্থানের সাথে মেলে, সম্পূর্ণরূপে অ্যাক্সেসযোগ্য এবং থিম হিসাবে কোডের মধ্যে রপ্তানি এবং প্রয়োগ করতে সক্ষম করার জন্য স্থানান্তরিত মূল রঙের স্কিমে অন্তর্ভুক্ত করা হবে।

6. আপনার থিম প্রয়োগ

ভূমিকা এবং টোকেন

প্রতিটি উচ্চারণ রঙ ( প্রাথমিক , মাধ্যমিক , এবং তৃতীয় ) জোড়া, সংজ্ঞায়িত জোর এবং চাক্ষুষ অভিব্যক্তির জন্য বিভিন্ন টোনের চারটি সামঞ্জস্যপূর্ণ রঙের একটি গ্রুপে প্রদান করা হয়। গ্রুপটি অ্যাকসেন্ট রঙ, রঙ, ধারক এবং ধারক দিয়ে তৈরি।

নিরপেক্ষ ভূমিকা পৃষ্ঠতল এবং ব্যাকগ্রাউন্ড এবং উচ্চ জোর দেওয়া পাঠ্য এবং আইকনগুলির জন্য ব্যবহৃত হয়।

ডিজাইন টোকেনগুলি ছোট, বারবার ডিজাইনের সিদ্ধান্তগুলিকে উপস্থাপন করে যা একটি ডিজাইন সিস্টেমের ভিজ্যুয়াল শৈলী তৈরি করে। টোকেন স্থির মান প্রতিস্থাপন করে, যেমন রঙের জন্য হেক্স কোড, স্ব-ব্যাখ্যামূলক নাম দিয়ে। ডিজাইন টোকেনগুলি অর্থপূর্ণভাবে শৈলী পছন্দগুলিকে সংযুক্ত করে যা অন্যথায় একটি স্পষ্ট সম্পর্কের অভাব বোধ করে।

Figma প্লাগইন টোকেন তৈরি করে এবং বিদ্যমান মক-আপ, ব্র্যান্ড স্টাইল গাইড এবং এমনকি ডিজাইন সিস্টেমের সাথে সংযোগ করতে ফিগমা শৈলীর আকারে আপনার নিজস্ব উত্স রঙ ইনপুট করে।

99b715ce2b99c3be.png

ডিজাইন টোকেনগুলি রঙের ভূমিকা এবং বাস্তবায়নের মধ্যে একটি সাধারণ ভাষা তৈরি করে।

রঙের অনুক্রম

আপনার মকআপগুলিতে রঙের ভূমিকা প্রয়োগ করার সময়, আপনার উপাদানগুলির গুরুত্বের ক্রম বা অনুক্রম বিবেচনা করুন। এই ধারণাটি তাদের নিজ নিজ ভূমিকাগুলিতে ব্র্যান্ডের রঙগুলি বরাদ্দ করতে সহায়তা করবে, তবে সেগুলিকে UI এর মধ্যে মানচিত্রও করবে৷ সাধারণত, বেশি স্যাচুরেটেড বা ঘনীভূত রং প্রথমে একজন ব্যবহারকারীর দৃষ্টি আকর্ষণ করবে, এই কারণেই প্রাথমিক রঙের ভূমিকা ম্যাপ করা উপাদানগুলি যা অধিক কল টু অ্যাকশন ফোকাসড। যদিও মেটেরিয়াল থিম বিল্ডার উপযুক্ত রং তৈরি করতে M3 কালার সিস্টেম ব্যবহার করে, উচ্চতর স্যাচুরেশন সহ সেকেন্ডারি বা টারশিয়ারি রং প্রদান করলে এমন রং তৈরি হবে যা তাদের প্রাইমারিকে ছাড়িয়ে যায়। আপনি আপনার ব্যবহারকারীদের UI এবং বিষয়বস্তুর মধ্যে যুক্ত করতে চান এমন ক্রম বিবেচনা করুন যাতে রঙের ভূমিকা নির্ধারণে সহায়তা করা যায়, সমস্ত উপাদান প্রাথমিক ব্যবহার করা উচিত নয়।

7fe95c9c2cbff5b1.png

সলিড স্যাচুরেটেড রঙ সবচেয়ে মনোযোগ আকর্ষণ করে।

7. থিমে অদলবদল করুন

আপনার ডিজাইনে আপনার তৈরি করা কাস্টম থিম প্রয়োগ করতে আমাদের বিদ্যমান উপাদান-থিমের টোকেনগুলিতে মকআপ সেট করতে হবে।

উপাদান উপাদানগুলি পূর্ব-ম্যাপ করা ভূমিকাগুলির সাথে আসে এবং স্বয়ংক্রিয়ভাবে উপাদান থিম নির্মাতার সাথে কাজ করবে৷

3f7e3eee2f231b43.png

মেটেরিয়াল থিম বিল্ডার মডেল থেকে থিমে অদলবদল করুন।

  1. লেআউটের ফ্রেম নির্বাচন করে এবং অদলবদল ক্লিক করে এই থিমটি ব্যবহার করতে ডানদিকে লেআউটের সমস্ত টোকেন (ফিগমা শৈলী) সেট করি। আপনি নির্বাচন রঙে শৈলী উপসর্গ আপডেট দেখতে পাবেন।
  2. সবকিছু আপডেট না? কাস্টম উপাদান, যেমন উদ্ভিদ যত্ন টিপ কার্ড, প্রথমে ফিগমা শৈলী প্রয়োগ করতে হবে। যত্ন টিপ কন্টেইনার নির্বাচন করুন, ধারকটি নির্বাচন করে, একটি শৈলী নির্ধারণ করতে 4 ডট আইকনে ক্লিক করুন, তৃতীয় ধারক বাছাই করুন। কেয়ার টিপ কার্ডের বিষয়বস্তুর সাথে একই কাজ করুন, একটি অন-টারশিয়ারি কন্টেইনার বরাদ্দ করা ছাড়া। তালিকার ছোট লেবেলগুলিও কাস্টম উপাদান, কিন্তু আমরা পরে সেগুলিতে ফিরে আসব!
  3. মেটেরিয়াল ডিজাইনের উপাদানগুলি ডিফল্ট ম্যাপিং ব্যবহার করছে, তবে আপনি UI-এর সাথে সবচেয়ে উপযুক্ত করার জন্য শৈলী অ্যাসাইনমেন্ট নিয়ে পরীক্ষা করতে পারেন। বিভিন্ন রঙের শ্রেণিবিন্যাস এবং ব্র্যান্ডের অভিব্যক্তি নিয়ে খেলতে কিছুক্ষণ সময় নিন।

(কোডের জন্য রপ্তানি ফাইলে শুধুমাত্র থিম অন্তর্ভুক্ত করা হয়েছে। যদি একজন প্রকৌশলীর সাথে কাজ করেন, তাহলে টোকেন ম্যাপিংয়ের সাথে যোগাযোগ করার জন্য মক শেয়ার করুন, যেহেতু এটি রপ্তানিতে অন্তর্ভুক্ত হবে না)

একটি থিম ছাড়া প্লাগইন খোলা শুরু করার জন্য একটি সেটআপ স্ক্রীন দেখাবে৷ 'শুরু করুন' ডিফল্ট বেসলাইন 'ম্যাটেরিয়াল-থিম' তৈরি করবে ফিগমা স্টাইল গ্রুপ হিসেবে আপনার মকআপের সাথে সংযোগ করতে বা মেটেরিয়াল ডিজাইন কিটের সাথে ব্যবহার করতে।

8. মূল স্কিম অতীত প্রসারিত

আপনার কাছে এখন একটি ব্র্যান্ডেড রঙের থিম রয়েছে যা উপাদান এবং ডিজাইন মকের সাথে ম্যাপ করা হয়েছে, তবে আপনার অতিরিক্ত রঙ থাকতে পারে যা অন্তর্ভুক্ত করা দরকার। কাস্টম রং যোগ করার অনুমতি দিতে একটি বর্ধিত স্কিম আসে যেখানে.

এগুলি শব্দার্থিক রঙ, ব্র্যান্ড-নির্দিষ্ট, বা এমনকি পণ্য-নির্দিষ্ট রঙ হতে পারে, যেগুলির ভূমিকা নির্ধারণ করা প্রয়োজন এবং রঙের অ্যালগরিদমের মাধ্যমে স্থানান্তরিত হতে হবে বা ইনপুট হিসাবে থাকতে হবে।

বর্ধিত রঙের স্কিমটি আপনার ব্র্যান্ডের রঙের সাথে গতিশীল (ব্যবহারকারী-উত্পাদিত) রঙগুলিকে একত্রিত করার সম্ভাবনাও প্রবর্তন করে। মূল স্কিমটিকে ব্যক্তিগতকৃত ব্যবহারকারীর প্রভাবের অনুমতি দিন, যখন বর্ধিত স্কিমে ব্র্যান্ডের রং সেট করা থাকে। এর অর্থ হল UI উপাদানগুলি আপনার ব্যবহারকারীদের কাছে আরও ব্যক্তিগত হতে পারে এবং আপনার ব্র্যান্ডের রঙগুলি অ্যাপটিতে আরও সুনির্দিষ্ট প্রভাবশালী মুহুর্ত থাকতে পারে।

মূল স্কিম কাস্টম রং অন্তর্ভুক্ত প্রসারিত করা যেতে পারে. 452857e2cfa3fda3.png

9. প্রসারিত এবং কাস্টমাইজ করা

কাস্টম রঙের সাথে স্কিমটি প্রসারিত করার ফলে শব্দার্থিক বা অতিরিক্ত ব্র্যান্ডিং রঙের মতো রং যোগ করা যায়।

efa6ff9073f0d685.png

কাস্টম রং যুক্ত কাস্টম স্কিম।

  1. প্লাগইন মোডেলে, কী রঙের অধীনে, একটি রঙ যোগ করুন ক্লিক করুন।
  2. বর্তমান থিমটি একটি নতুন Custom0 সারি দিয়ে আপডেট হবে। রঙের উপর ক্লিক করে এই রঙটি আপডেট করুন, একটি নতুন রঙ নির্বাচন করুন।
  3. এই বর্ধিত রঙগুলি Custom0 হিসাবে শুধুমাত্র পঠিত শৈলীগুলির মধ্যে একটি শৈলী হিসাবে পাওয়া যেতে পারে। তাদের টোনাল প্যালেট এবং স্কিম উভয়ই বর্তমান। আসুন লেবেল পটভূমি নির্বাচন করে নতুন রঙের সাথে কিছু তালিকার লেবেল ম্যাপ করি এবং যোগ করা রঙের ভূমিকাগুলির একটি নির্ধারণ করি (অন-কাস্টম0 কন্টেইনার)।

3787cb6c18bade9c.png

নির্বাচিত রঙে কাস্টম রঙ সেট করা হচ্ছে।

  1. ম্যাটেরিয়াল থিম বিল্ডার স্বয়ংক্রিয়ভাবে কাস্টম# হিসাবে রং তৈরি করে। একটি যোগ করা কাস্টম রঙের নাম পরিবর্তন করতে, স্টাইল প্যানেলে থিমের শৈলীর গ্রুপটি প্রসারিত করুন (কিছুই নির্বাচিত না হলে এটি প্রদর্শিত হবে)। তারপর উৎস উপগোষ্ঠীর মধ্যে Custom0 সন্ধান করুন। এখানে উৎসের নাম পরিবর্তন করলে প্লাগইন মডেলের মধ্যে রঙের নাম পরিবর্তন হবে।

b2d7018a259907b4.png

কাস্টম রঙ শৈলী শৈলী প্যানেলে পাওয়া যাবে.

  1. যোগ করা রঙ মুছে ফেলা একই পদ্ধতিতে ডান ক্লিক করে এবং শৈলী মুছে ফেলার মাধ্যমে সম্পন্ন করা যেতে পারে। পরের বার প্লাগইন খোলা হলে যোগ করা রঙ সরানো হবে। পুনঃনামকরণ এবং মুছে ফেলা রঙের চিত্রে প্রতিফলিত নাও হতে পারে।

10. অভিনন্দন

de77f759e20062b6.png

ম্যাটেরিয়াল থিম বিল্ডার ব্যবহার করে কীভাবে একটি কাস্টম রঙের থিম তৈরি করতে হয়, এটিকে ডিজাইন মকআপে প্রয়োগ করতে এবং রঙের স্কিমে যোগ করতে শেখার জন্য দুর্দান্ত কাজ৷ নতুন উপাদান 3 রঙের সিস্টেম ডিজাইনগুলিতে অ্যাক্সেসযোগ্য, নমনীয় এবং সুসংগত রঙ নিয়ে আসে এবং আপনি কীভাবে সেগুলি ব্যবহার করেন তা দেখার জন্য আমরা অপেক্ষা করতে পারি না!

আপনার যদি প্রশ্ন থাকে, টুইটারে @MaterialDesign ব্যবহার করে যেকোনো সময় নির্দ্বিধায় আমাদের জিজ্ঞাসা করুন।

youtube.com/MaterialDesign- এ আরও ডিজাইনের বিষয়বস্তু এবং টিউটোরিয়ালের জন্য সাথে থাকুন