একটা Component হলো UI-র একটা পুনরায়-ব্যবহারযোগ্য অংশের master copy — একটা button, একটা input field, একটা card। file-এর অন্য যেখানেই সেই button ব্যবহার করা হয় সেটা একটা Instance — একটা linked copy যা আসল Component বদলানোর সাথে সাথেই স্বয়ংক্রিয়ভাবে update হয়।
যেকোনো layer বা group select করুন আর Ctrl+Alt+K চাপুন (অথবা right-click → Create component)। layer-টা Layers panel-এ একটা বেগুনি diamond icon পায়, একে Component হিসেবে চিহ্নিত করে। এটাকে আবার canvas-এ drag করলে, বা copy-paste করলে, একটা নতুন Component না বানিয়ে একটা Instance তৈরি হয়।
Component ছাড়া, ৪০টা screen-এ ব্যবহৃত একটা button-এর একটা typo ঠিক করতে হলে সেটা ৪০ বার খুঁজে edit করতে হবে। Component দিয়ে, একটা মাত্র master Component edit করলে সাথে সাথেই পুরো file জুড়ে প্রতিটা Instance update হয়ে যায় — এই একটা feature-এর কারণেই design system আদৌ practical।
একটা button-এর সাধারণত শুধু একটা look থাকে না — এর একটা default state, একটা disabled state, হয়তো primary আর secondary version লাগে। চারটা অসম্পর্কিত Component বানানোর বদলে, Figma সম্পর্কিত Component-গুলোকে নাম-দেওয়া property সহ একটা Variant set-এ গ্রুপ করে, তাই একজন designer আলাদা disabled-button Component খুঁজে বের করার বদলে একটা dropdown থেকে "State: Disabled" বেছে নেয়।
একটা consistent naming pattern সহ দুই বা তার বেশি Component select করুন (যেমন "Button, State=Default" আর "Button, State=Disabled") আর সেগুলোকে একটা set-এ combine করুন। প্রতিটা property (যেমন "State") সেই set-এর একটা Instance যেখানেই বসানো হোক না কেন Design panel-এ একটা dropdown হয়ে যায় — একই button, panel থেকে বেরিয়ে না গিয়ে ডিজাইন করা প্রতিটা state-এর মধ্যে বদলানো যায়।