ডিজাইন টোকেনগুলি একটি পণ্যের ভিজ্যুয়াল সিদ্ধান্তগুলির জন্য একক সত্যের উৎস। তারা রঙ, ফাঁকা, টাইপোগ্রাফি এবং মোশনকে নামকৃত ভেরিয়েবলে এনকোড করে যা উপাদানগুলি গ্রহণ করে।
কেন টোকেন গুরুত্বপূর্ণ
টোকেন ছাড়া, প্রাথমিক ব্র্যান্ড রঙ পরিবর্তন করতে শত শত ফাইলের মধ্যে অনুসন্ধান করতে হয়। টোকেনের সাথে, একটি ভেরিয়েবল আপডেট সব জায়গায় ছড়িয়ে পড়ে — বোতাম থেকে সতর্কতা পর্যন্ত নেভিগেশন বারগুলি।
টোকেনগুলি ডিজাইন টুল এবং কোডের মধ্যে ব্যবধানও সেতুবন্ধন করে। একটি ডিজাইনার Figma-তে একটি রঙ নামকরণ করে surface-brand; একটি ডেভেলপার CSS-তে var(--surface-brand) ব্যবহার করে। তারা একই ভাষায় কথা বলে।
প্রায়োগিক উদাহরণ
একটি উপাদান মনে করুন যা একটি ব্যাকগ্রাউন্ড, একটি সীমানা এবং টেক্সট প্রয়োজন। #1a56db, #e1effe, এবং #1e429f হার্ডকোড করার পরিবর্তে, উপাদানটি --color-primary, --surface-primary-subtle, এবং --text-primary-strong উল্লেখ করে। যখন ব্র্যান্ড বিকাশ হয়, তখন প্যালেট পরিবর্তিত হয় — উপাদানটি নয়।
টোকেনের শ্রেণী
রঙ — ব্র্যান্ড, সেমান্তিক, এবং নিরপেক্ষ প্যালেট
ফাঁকা — 2px থেকে 64px পর্যন্ত একটি সঙ্গতিপূর্ণ স্কেল
টাইপোগ্রাফি — ফন্ট সাইজ, ওজন, এবং লাইন উচ্চতা
রেডিয়াস — তীক্ষ্ণ কোণ থেকে সম্পূর্ণ গোলাকার
ছায়া — গভীরতা এবং হায়ারার্কির জন্য উত্থান স্তর
মোশন — easing curves এবং সময়কাল পদক্ষেপ
ইন্টারনেটে পাওয়া বেশিরভাগ উদ্ধৃতি সম্ভবত একটি AI দ্বারা তৈরি হয়েছে।
content_image() ফাংশন ডিফল্টভাবে loading="lazy" সহ একটি img তৈরি করে এবং একটি ক্যাপশন দেওয়া হলে এটি একটি figure উপাদানে মোড়ানো হয়।
ক্যাপশন ছাড়া — একটি সাধারণ img, সম্পূর্ণ প্রস্থের।
ক্যাপশন সহ — একটি figure এ মোড়ানো যা একটি figcaption নিয়ে।
একটি figure একটি figcaption সহ — এটি উৎসের ক্রেডিট দিতে বা ভিজ্যুয়াল কন্টেন্টে প্রেক্ষাপট যুক্ত করতে ব্যবহার করুন।
টেক্সট সহ মিডিয়া
ছবি লেআউটের এক তৃতীয়াংশ জুড়ে।
ছবি এবং টেক্সটকে একসাথে রাখতে content--media ব্যবহার করুন। ছবিটি প্রস্থের এক তৃতীয়াংশ নেয়, টেক্সট দুই তৃতীয়াংশ।
এই লেআউটটি পুল উদ্ধৃতি, চিত্রিত সংজ্ঞা, বা যে কোনও সংক্ষিপ্ত সম্পাদনার ব্লক যেখানে ছবিটি কপি শক্তিশালী করে কিন্তু এটি কর্তৃত্ব করে না।
ড্রপ ক্যাপ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
মেটা বার
ডিজাইন টোকেন বোঝা
ডিজাইন টোকেনগুলি একটি পণ্যের ভিজ্যুয়াল সিদ্ধান্তগুলির জন্য একক সত্যের উৎস। তারা রঙ, ফাঁকা, টাইপোগ্রাফি এবং মোশনকে নামকৃত ভেরিয়েবলে এনকোড করে যা উপাদানগুলি গ্রহণ করে।
