Figma-তে ডিজাইন টোকেন সিস্টেম একটি পদ্ধতি যেখানে নির্দিষ্ট ডিজাইন উপাদানগুলির (যেমন রং, ফন্ট, স্পেসিং ইত্যাদি) জন্য একক উৎস বা স্ট্যান্ডার্ড মান সেট করা হয়, যা সারা প্রজেক্টে ব্যবহার করা যায়। এটি ডিজাইন কনসিস্টেন্সি বজায় রাখার জন্য এবং সহজে পরিবর্তন করার জন্য কার্যকর।
Figma-তে টোকেন সিস্টেম কীভাবে কাজ করে:
ডিজাইন টোকেন হলো স্টাইল বা ভিজ্যুয়াল ভেরিয়েবল, যা মূলত ডিজাইন সিস্টেমের স্টাইলের প্রতিনিধিত্ব করে। এগুলি UI ডিজাইন এবং কোডের মধ্যে সংযোগ স্থাপনের জন্য ব্যবহৃত হয়। উদাহরণস্বরূপ, একটি কালার টোকেন হতে পারে primary-color, যা ডিজাইনে একাধিক স্থানে ব্যবহৃত হবে, এবং এটি আপডেট করলে সমস্ত জায়গায় স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।
টোকেনের বিভিন্ন প্রকার:
- Color Tokens: যেমন Primary Color, Secondary Color।
- Typography Tokens: ফন্ট সাইজ, লাইন হাইট ইত্যাদি।
- Spacing Tokens: মার্জিন, প্যাডিং।
- Border Tokens: বর্ডারের রঙ, স্টাইল।
- Shadow Tokens: বক্স শ্যাডোর প্যারামিটার।
মোবাইল অ্যাপের ডিজাইন টোকেন সিস্টেমে তৈরি করার ধাপসমূহ:
- ডিজাইন টোকেন নির্ধারণ করুন: প্রথমে আপনি যেসব ভিজ্যুয়াল প্রোপার্টি (যেমন রঙ, ফন্ট সাইজ, বর্ডার) সারা অ্যাপ্লিকেশনে কনসিস্টেন্ট রাখতে চান, সেগুলি টোকেন আকারে নির্ধারণ করুন। যেমন, Primary Color, Secondary Color, Button Font Size ইত্যাদি।
- Figma-এর Styles এবং Variables ব্যবহার করুন:
- Styles: Figma-এর ‘Styles’ ফিচারটি ব্যবহার করে আপনি রঙ, ফন্ট, ইফেক্টের জন্য গ্লোবাল স্টাইল সেট করতে পারেন।
- Variables: নতুন ফিচার হিসেবে Figma এখন ভ্যারিয়েবল (Variables) সাপোর্ট করে, যা ডিজাইন টোকেনের মতো কাজ করে। আপনি বিভিন্ন টোকেন হিসেবে রং, টেক্সট স্টাইল, বা অন্যান্য ভিজ্যুয়াল এলিমেন্ট সংরক্ষণ করতে পারেন।
- Plugin ব্যবহার করুন: টোকেন ব্যবস্থাপনার জন্য কিছু প্লাগইন যেমন Figma Tokens ব্যবহার করতে পারেন। এটি আপনাকে JSON ফরম্যাটে টোকেন তৈরি ও ম্যানেজ করতে সাহায্য করে, যা কোডের সাথে এক্সপোর্ট করা যায়।
- কম্পোনেন্ট বানান: একবার টোকেন তৈরি হলে, সেগুলি আপনার UI কম্পোনেন্টে প্রয়োগ করুন। এইভাবে, যদি কোন টোকেন পরিবর্তন করতে হয়, সেটি আপডেট করলে সারা ডিজাইনে পরিবর্তন স্বয়ংক্রিয়ভাবে প্রয়োগ হবে।
মোবাইল অ্যাপ ডিজাইনে টোকেন সিস্টেম প্রয়োগ:
- টোকেন ডকুমেন্টেশন তৈরি করুন: সব টোকেন একসাথে ডকুমেন্টে উল্লেখ করুন।
- কম্পোনেন্ট লাইব্রেরি: সব মোবাইল কম্পোনেন্টকে টোকেন অনুযায়ী সেট করুন, যেমন বাটন, হেডার, ইনপুট ফিল্ড।
- প্রতিটি স্ক্রিন ডিজাইনে টোকেন প্রয়োগ করুন: যখন নতুন স্ক্রিন ডিজাইন করবেন, কম্পোনেন্ট এবং টোকেনের স্টাইল অনুযায়ী তৈরি করুন। এতে কনসিস্টেন্সি বজায় থাকবে।
উদাহরণ:
- Primary Color Token:
#FF5733নামে একটি কালার টোকেন তৈরি করুন এবং এটি বাটন, হেডার ইত্যাদিতে ব্যবহার করুন। - Typography Token:
Heading-1নামে একটি ফন্ট টোকেন তৈরি করুন, যেখানে ফন্ট সাইজ 24px এবং ওজন Bold থাকবে।
এইভাবে, আপনি একটি সুশৃঙ্খল ডিজাইন সিস্টেম তৈরি করতে পারবেন।
Ashikul Islam
A Senior UI/UX and Product Designer with over 11 years of experience in the creative industry. With a unique background in Civil Engineering, he brings a perfect blend of structural logic and human-centered design to every project. Having successfully delivered 50+ UI/UX products and worked with 500+ global clients, he specializes in transforming complex business requirements into intuitive and high-performing digital experiences. He is passionate about design thinking, user research, and building scalable design systems.
