প্রোডাক্ট ডিজাইন ও UI/UX

ডিজাইন সিস্টেম

আপনার প্রোডাক্ট দেখতে কেমন হবে ও কীভাবে আচরণ করবে, তার একটিই শেয়ার করা উৎস। টোকেন, কম্পোনেন্ট ও ডকুমেন্টেশন, যা আপনার প্রোডাক্ট ও টিম বড় হওয়ার সাথে সাথে ডিজাইন ও কোডকে সামঞ্জস্যপূর্ণ রাখে।

কাদের একটি শেয়ার্ড সিস্টেম দরকার

নতুন ব্র্যান্ড কালার বা আরও ভালো ফোকাস স্টাইলের মতো সাধারণ একটি পরিবর্তনও প্রতিটি প্রোডাক্টে স্ক্রিন ধরে ধরে করতে হয়, কারণ ডিজাইন ও কোড আর একই উপাদান ব্যবহার করে না। ডিজাইন সিস্টেম প্রতিটি টিমকে রক্ষণাবেক্ষণ করা একই উপাদানের সেট দেয়, যা দিয়ে তারা তৈরি করতে পারে।

  • যেসব প্রতিষ্ঠানে একাধিক স্কোয়াড একই সময়ে একই প্রোডাক্টে UI রিলিজ করে
  • অধিগ্রহণ করা বা আলাদাভাবে তৈরি প্রোডাক্টগুলোকে একটি প্রোডাক্ট ফ্যামিলিতে আনছে এমন কোম্পানি
  • শেয়ার করা UI-কে ভার্সনড ও নিয়মিত রক্ষণাবেক্ষণ করা প্যাকেজে রূপ দেওয়ার দায়িত্ব পাওয়া ফ্রন্টএন্ড প্ল্যাটফর্ম টিম

ডিজাইনার ও ডেভেলপারদের মধ্যে অভিন্ন সামঞ্জস্য

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

AI-সহায়তায় অডিট, মানদণ্ডের দায়িত্ব বিশেষজ্ঞদের

AI যেভাবে সহায়তা করে

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

আমাদের বিশেষজ্ঞদের দায়িত্ব

  • টোকেন আর্কিটেকচার, নামকরণ ও থিমিং কৌশলের দায়িত্ব ডিজাইনার ও ইঞ্জিনিয়ারদের।
  • প্রতিটি কম্পোনেন্টের API, আচরণ ও স্টেট নির্ধারণ করেন ইঞ্জিনিয়াররা, এবং AI-সহায়তায় করা প্রতিটি পরিবর্তন রিভিউ করেন।
  • প্রতিটি কম্পোনেন্টের অ্যাক্সেসিবিলিটি যাচাই করা হয়: কিবোর্ডে আচরণ, ফোকাস, ARIA রোল, কনট্রাস্ট ও স্ক্রিন রিডারের আউটপুট।
  • গভর্নেন্সের দায়িত্ব মানুষের: সিস্টেমে কী যুক্ত হবে, ভার্সনিং, ডেপ্রিকেশন ও কন্ট্রিবিউশনের নিয়ম।

সিস্টেমের প্রতিটি স্তরে কী থাকে

একাধিক প্রোডাক্টের ওয়েব সিস্টেমের সাধারণ স্তরবিন্যাস; কোন স্তরে কী যাবে, তা ঠিক হয় আপনার অডিট থেকে।

  • টোকেন ও থিম

    • রং, টাইপ স্কেল, স্পেসিং ও কর্নার রেডিয়াসের মৌলিক মান
    • সারফেস, বর্ডার ও ডেঞ্জারের মতো সিম্যান্টিক অ্যালিয়াস, যা কম্পোনেন্টগুলো ব্যবহার করে
    • অ্যালিয়াসের মান বদলে তৈরি লাইট, ডার্ক ও ব্র্যান্ড থিম
    • ডিউরেশন ও ইজিংয়ের মোশন টোকেন, ইন্টারঅ্যাকশন স্পেসিফিকেশনের সাথে শেয়ার করা
    • CSS ভেরিয়েবলে এক্সপোর্ট, এবং প্রয়োজন হলে iOS ও Android ফরম্যাটেও
  • কম্পোনেন্ট ও স্টেট

    • শুধু টোকেন দিয়ে তৈরি বাটন, ইনপুট, সিলেক্ট, মোডাল ও টেবিল
    • প্রতিটি কম্পোনেন্টের একটি স্পেসিফিকেশন: প্রপস, ভ্যারিয়েন্ট, স্টেট ও কিবোর্ড আচরণ
    • কোডেড কম্পোনেন্টের প্রপসের সাথে মেলানো Figma ভ্যারিয়েন্টের নাম
    • ছোট ছোট কম্পোনেন্ট মিলিয়ে তৈরি ডেট পিকার ও কম্বোবক্সের মতো কম্পোজিট অংশ
  • প্যাটার্ন, নির্দেশনা ও গভর্নেন্স

    • কম্পোনেন্ট মিলিয়ে তৈরি প্যাটার্ন: ফর্ম লেআউট, ফিল্টারিং, বাল্ক অ্যাকশন, অনবোর্ডিং
    • কোন প্যাটার্ন কখন ব্যবহার করবেন, আর কখন করবেন না, তার নির্দেশনা
    • কন্ট্রিবিউশনের পথ: প্রস্তাব, ডিজাইন ও কোড রিভিউ, তারপর ভার্সনসহ রিলিজ
    • খসড়া থেকে ডেপ্রিকেটেড পর্যন্ত কম্পোনেন্টের স্ট্যাটাস, ব্রেকিং চেঞ্জের জন্য মাইগ্রেশন নোটসহ

আমরা যেভাবে ডিজাইন সিস্টেম তৈরি করি

  1. 01

    অডিট

    AI-সহায়তায় বিশ্লেষণের মাধ্যমে আমরা আপনার বর্তমান UI ও কোডের তালিকা তৈরি করি, তারপর আপনার সাথে মিলে অগ্রাধিকার ঠিক করি: কোনটি আগে স্ট্যান্ডার্ড করা হবে আর কোনটি বাদ দেওয়া হবে।

  2. 02

    ভিত্তি তৈরি

    রং, টাইপোগ্রাফি, স্পেসিং ও মোশনের টোকেন, ডিজাইনার ও ইঞ্জিনিয়ারদের মধ্যে সম্মত নামকরণ ও থিমিংয়ের নিয়মসহ।

  3. 03

    কম্পোনেন্ট

    Figma-তে ডিজাইন করা এবং স্কোপে থাকলে কোডে তৈরি কম্পোনেন্ট; প্রতিটি যুক্ত হওয়ার সময়েই তার আচরণ ও অ্যাক্সেসিবিলিটি রিভিউ করা হয়।

  4. 04

    ডকুমেন্টেশন ও প্রয়োগ

    ডকুমেন্টেশন, কন্ট্রিবিউশনের নিয়ম ও আপনার টিমগুলোর সাথে একটি ওয়াকথ্রু, তারপর প্রোডাক্টগুলো সিস্টেমে স্থানান্তরের সময় মাইগ্রেশন সাপোর্ট।

AI টুল নিয়ে কাজের দুটি উপায়

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

নিশ্চিত নন? স্কোপিংয়ের সময় আমরা একটি সুপারিশ করব। AI ব্যবহারের বিকল্প তুলনা করুন

আপনি কী পাবেন

ডিজাইন ও কোডের জন্য একটি সিস্টেম

  • UI অডিট ও ইনভেন্টরি

    আপনার বিদ্যমান কম্পোনেন্ট, প্যাটার্ন ও স্টাইলের একটি ক্যাটালগ, যেখানে ডুপ্লিকেট, অসামঞ্জস্য ও অ্যাক্সেসিবিলিটির ঘাটতি অগ্রাধিকার অনুযায়ী সাজানো থাকে।

  • ডিজাইন টোকেন

    রং, টাইপোগ্রাফি, স্পেসিং, রেডিয়াস, এলিভেশন ও মোশনের টোকেন, লাইট, ডার্ক বা ব্র্যান্ড থিমসহ, প্রয়োজন অনুযায়ী ওয়েব, iOS ও Android-এর জন্য এক্সপোর্ট করা।

  • Figma কম্পোনেন্ট লাইব্রেরি

    ভ্যারিয়েন্ট, প্রপার্টি ও প্রতিটি ইন্টারঅ্যাকশন স্টেটসহ কম্পোনেন্ট, যা টোকেনের ওপর তৈরি এবং কোডের সাথে মিলিয়ে নামকরণ করা।

  • কোডেড কম্পোনেন্ট

    React বা আপনার ফ্রেমওয়ার্কে তৈরি কম্পোনেন্ট, টাইপড প্রপস, টেস্ট ও অ্যাক্সেসিবল আচরণসহ; স্কোপে থাকলে ভার্সনড প্যাকেজ হিসেবে প্রকাশ করা হয়।

  • ডকুমেন্টেশন সাইট

    Storybook বা কাস্টম ডকস সাইট, যেখানে প্রতিটি কম্পোনেন্টের লাইভ উদাহরণ, ব্যবহারের নির্দেশনা, করণীয় ও বর্জনীয় এবং অ্যাক্সেসিবিলিটি নোট থাকে।

  • গভর্নেন্স ও ভার্সনিং

    কন্ট্রিবিউশনের নিয়ম, রিভিউয়ের ধাপ, রিলিজ নোট ও ডেপ্রিকেশন প্রক্রিয়া, যাতে সিস্টেমে পরিবর্তন আসে নিয়ন্ত্রিতভাবে।

ডিজাইন সিস্টেমের সাধারণ অনুরোধ

যে ধরনের পরিস্থিতি আমরা সাধারণত স্কোপ করি; এগুলো ক্লায়েন্টের কেস স্টাডি নয়।

  • একাধিক প্রোডাক্টজুড়ে রিব্র্যান্ড

    ওয়েব অ্যাপ, মোবাইল অ্যাপ ও একটি অ্যাডমিন টুল আছে এমন একটি কোম্পানি তাদের ব্র্যান্ড কালার বদলাচ্ছে। আমরা প্রথমে রংগুলোকে থিমভিত্তিক টোকেনে নিয়ে যাই, যাতে প্রতিটি প্রোডাক্ট একই জায়গা থেকে নতুন প্যালেট পায়।

  • Figma ও কোডের মধ্যে অমিল

    ডিজাইনাররা এমন একটি Figma লাইব্রেরি রক্ষণাবেক্ষণ করেন, যা ডেভেলপাররা আর ব্যবহার করেন না, অন্যদিকে React কম্পোনেন্টগুলোতে রয়েছে নিজস্ব স্পেসিং ও রং। আমরা দুটোই অডিট করি, প্রতিটি কম্পোনেন্টের কোন ভার্সন স্ট্যান্ডার্ড হবে তা মিলে ঠিক করি, এবং নামগুলো মিলিয়ে নিই, যাতে ডিজাইন ও কোড এক থাকে।

  • সব প্রোডাক্টের জন্য একটি অ্যাক্সেসিবিলিটি সমাধান

    একটি অ্যাক্সেসিবিলিটি রিভিউতে একাধিক প্রোডাক্টে ব্যবহৃত ডেট পিকার, মোডাল ও ড্রপডাউনে ফোকাস ও কিবোর্ডের সমস্যা ধরা পড়ে। আমরা শেয়ার করা কম্পোনেন্টে একবারেই সেগুলো ঠিক করি, প্রত্যাশিত কিবোর্ড আচরণ ডকুমেন্ট করি, এবং এমন একটি ভার্সন প্রকাশ করি, যা প্রতিটি প্রোডাক্ট গ্রহণ করতে পারে।

এই এনগেজমেন্টের আওতায় যা নেই

  • আপনার প্রোডাক্টের আলাদা আলাদা স্ক্রিন ডিজাইন করা এই কাজের অংশ নয়; স্ক্রিন ধরে ধরে UI ডিজাইন হয় Figma ও ভিজ্যুয়াল ডিজাইনে, যা এই সিস্টেমের ওপর ভিত্তি করে তৈরি হতে পারে।
  • মোশন টোকেন এর অন্তর্ভুক্ত; সেগুলো ব্যবহার করে এমন ট্রানজিশন, জেসচার ও কোরিওগ্রাফি ডিজাইন করা ইন্টারঅ্যাকশন ডিজাইনের কাজ।
  • প্রতিটি প্রোডাক্টের বিদ্যমান স্ক্রিনগুলো সিস্টেমে নিয়ে আসা প্রোডাক্ট ডেভেলপমেন্টের কাজ, যার স্কোপ আলাদাভাবে ঠিক করা হয়; সিস্টেমের সাথে থাকে মাইগ্রেশন নোট এবং সম্মত সাপোর্ট।
  • হ্যান্ডওভারের পর সিস্টেমটির জন্য আপনার দিকে একজন নির্দিষ্ট দায়িত্বপ্রাপ্ত ব্যক্তি, অথবা আমাদের সাথে সম্মত রক্ষণাবেক্ষণের ব্যবস্থা দরকার; তা না থাকলে বিচ্যুতি আবার ফিরে আসে।

সিস্টেমটি কীভাবে ডেভেলপমেন্ট, QA ও রিলিজে সহায়তা করে

  • শেয়ার করা অংশ দিয়ে তৈরি

    ডেভেলপাররা নতুন করে তৈরি না করে টেস্ট করা কম্পোনেন্ট ও টোকেন দিয়ে স্ক্রিন সাজান, আর ডিজাইনের পরিবর্তন সরাসরি কোডে প্রতিফলিত হয়।

  • কম্পোনেন্ট পর্যায়ে QA

    প্রতিটি কম্পোনেন্টের সাথেই থাকে নিজস্ব ভিজ্যুয়াল রিগ্রেশন ও অ্যাক্সেসিবিলিটি চেক, তাই রিলিজ টেস্টিং ইউজার জার্নি ও বিজনেস রুলে মনোযোগ দিতে পারে।

  • সিস্টেমের নিয়ন্ত্রিত রিলিজ

    ভার্সনড প্যাকেজ, চেঞ্জলগ ও মাইগ্রেশন নোটের ফলে প্রতিটি প্রোডাক্ট সিস্টেমের আপডেট গ্রহণ করে ভেবেচিন্তে, হঠাৎ করে নয়।

  • প্রবৃদ্ধির সাথে রক্ষণাবেক্ষণ

    লঞ্চের পরও আমরা সিস্টেমটি রক্ষণাবেক্ষণ করতে পারি: নতুন কম্পোনেন্ট যোগ করা, কন্ট্রিবিউশন রিভিউ করা এবং ডিজাইন ও কোডকে একে অপরের সাথে মিলিয়ে রাখা।

প্রশ্নোত্তর

সাধারণ প্রশ্নাবলী

আমাদের কি এখনই ডিজাইন সিস্টেম দরকার?

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

আমাদের বিদ্যমান কম্পোনেন্টের ওপর ভিত্তি করে কি আপনারা কাজ করতে পারেন?

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

আপনারা কি কোডেড লাইব্রেরিও তৈরি করেন, নাকি শুধু Figma-র দিকটি?

দুটোই সম্ভব। শুধু ডিজাইনের এনগেজমেন্টে আপনি পাবেন Figma লাইব্রেরি, টোকেন এবং আপনার ডেভেলপারদের জন্য ইমপ্লিমেন্টেশন নির্দেশনা। কোডেড কম্পোনেন্টও চাইলে আমাদের ইঞ্জিনিয়াররা আপনার স্ট্যাকে সেগুলো তৈরি ও টেস্ট করেন। ডকুমেন্টেশন সাইটের হোস্টিং আলাদাভাবে আলোচনা করে ঠিক করা হয়।

কম্পোনেন্ট তৈরিতে AI সাহায্য করলে আমাদের কোড কোথায় প্রসেস হয়?

তা কাজ শুরুর আগেই আপনার সাথে মিলে ঠিক করা হয়। প্রাইভেট / লোকাল AI ইঞ্জিনিয়ারিংয়ে AI প্রসেসিং চলে একটি সম্মত সীমানার ভেতরে, প্রাইভেটভাবে হোস্ট করা মডেলে। Claude Code / OpenAI Codex ইঞ্জিনিয়ারিংয়ে বাণিজ্যিক কোডিং এজেন্ট কাজ করে সম্মত অ্যাকাউন্ট, ডেটা হ্যান্ডলিং ও রিটেনশন সেটিংসের আওতায়। যেভাবেই হোক, প্রতিটি পরিবর্তন রিভিউ করেন ইঞ্জিনিয়াররা।

এমন সিস্টেম তৈরি করুন, যা আপনার টিম ব্যবহার করবে

আপনার প্রোডাক্ট, টিম ও বর্তমান UI সম্পর্কে জানান। কোথা থেকে শুরু করবেন, তা আমরা সুপারিশ করব: একটি অডিট থেকে শুরু করে ডিজাইন থেকে কোড পর্যন্ত পূর্ণাঙ্গ সিস্টেম।