مائکرو انٹرایکٹو بنانے کے لئے ایڈوب XD کا استعمال کریں

Feb 2, 2026

کيسے

(تصویری کریڈٹ: ایڈوب)

ایڈوب XD پروٹوٹائپ کے ساتھ مدد کرسکتا ہے - ڈیزائن لائف سائیکل میں سب سے اہم عمل میں سے ایک، جو کام کے بہاؤ کی دیکھ بھال کے ساتھ ڈیزائنرز اور دیو ٹیموں کی مدد سے ترقی میں ایک اہم کردار ادا کرتا ہے. حال ہی میں پروٹوٹائپنگ زمین کی تزئین میں کچھ اہم تبدیلییں ہیں: ڈیزائنرز کو انتخاب کے لئے خراب کر دیا گیا ہے.

بہت سے دیگر مضامین کی طرح، کوئی بھی ڈیزائن اور پروٹوٹائپ کا آلہ نہیں ہے جو ہر چیز کو حاصل کرسکتا ہے. مختلف مراحل کے اوزار کے ایک منفرد سیٹ کی ضرورت ہوتی ہے. وہ دن ہیں جب ڈیزائنرز فوٹوشاپ اور خاکہ پر مکمل طور پر انحصار کرتے ہیں. اگرچہ وہ بہت اچھا UI ڈیزائن کے اوزار ہیں، ان کے پاس فوری صارف کے بہاؤ اور تار فریموں کے لئے صلاحیت نہیں ہے (ہمارے اوپر ملاحظہ کریں تار فریم ٹولز زیادہ تارفرمنگ کے اختیارات کے لئے).

اب ڈیزائن میں بات چیت کی بڑھتی ہوئی رقم کے ساتھ - جیسے متحرک تصاویر، اشاروں اور صوتی کنٹرول - یہ ایک ایسا آلہ تلاش کرنا مشکل ہے جو ان تمام پروٹوٹائپ کی صلاحیتوں کو حاصل کرسکتا ہے اور اب بھی چیزیں آسان رکھتی ہیں. کوڈنگ ان بات چیت کرنے کا ایک طریقہ ہے لیکن یہ وقت لگ رہا ہے. خوش قسمتی سے، ایڈوب XD اس کے پروٹوٹائپ کے آلے کو اپ ڈیٹ جاری کرنے کے ذریعے ریسکیو میں آیا ہے جس میں 'آٹو متحرک' کہا جاتا ہے. یہ طاقتور ٹول سیٹ کے لئے سب سے بڑا اضافہ ہے.

ایڈوب تخلیقی کلاؤڈ حاصل کریں

یہ خیال آسان ہے: آٹو متحرک ڈیزائنرز کو آسانی سے ایک آرٹ بورڈ کو ڈپلیکیٹ کرنے یا کسی چیز کی خصوصیات میں ترمیم کرکے غیر فعال حرکت پذیری کے ساتھ انٹرایکٹو پروٹوٹائپ بنانے کے قابل بناتا ہے. یہ خصوصیات کچھ بھی ہوسکتے ہیں، جیسے طول و عرض، ایکس اور Y، استحکام، گردش. پہلے ایڈوب ایکس ڈی نے بنیادی بات چیت کی پیشکش کی ہے جیسے سلائڈنگ، دھکا اور تحلیل.

نئی خصوصیات کے علاوہ، ڈیزائنرز آسانی سے موشن پر مبنی حرکت پذیری تشکیل دے سکتے ہیں، جس میں اس کے نتیجے میں صارف کو معلومات کے بہاؤ کے ذہنی ماڈل بنانے میں مدد ملے گی جب وہ ایک سے زیادہ اسکرینوں کے درمیان نیویگیشن کر رہے ہیں. یہ بھی بصری حراستوں، CTAS یا پیغامات پیدا کرنے کے لئے استعمال کیا جا سکتا ہے جو عارضی طور پر اسکرین سے باہر یا باہر نکلتا ہے.

اس آرٹیکل میں، میں اس بات کی وضاحت کروں گا کہ ایڈوب ایکس ڈی کے اس نئے آٹو متحرک خصوصیت کا استعمال کرتے ہوئے سادہ مائیکرو حرکت پذیری کیسے بنانا ہے. ہم شروع ہونے سے پہلے، اس بات پر غور کرنے کے لئے کچھ چیزیں موجود ہیں کہ آٹو حرکت پذیری کے لئے کس طرح اشیاء کو سنبھال لیا جاسکتا ہے:

جب ایک اعتراض یا عنصر منزل کی آرٹ بورڈ پر نہیں ہے، تو یہ عام طور پر پیش کرتا ہے جب پیش نظارہ
جب ابتدائی آرٹ بورڈ میں ایک عنصر موجود نہیں ہے تو، اس میں دھندلا جاتا ہے
جب آپ پروٹوٹائپ موڈ میں ہیں تو ہمیشہ آرٹ بورڈز کو تاریں، جو بات چیت پیدا کرے گی
حرکت پذیری بنانے کے لئے، ہمیشہ اس بات کو یقینی بنائیں کہ اشیاء اور عناصر تہوں میں ناموں کے نام اور اس گروپ کا نام بھی شامل ہیں جن میں وہ ہوسکتے ہیں

آٹو متحرک کا استعمال کرتے ہوئے ایک ریاست تبدیلی بنائیں

Adobe XD tutorial — یہ سادہ لگ سکتا ہے، لیکن آپ کو دو سائز کے ساتھ شروع کرنے کی ضرورت ہوگی (تصویری کریڈٹ: VAMSI BATCHU)

آٹو متحرک کا استعمال کرتے ہوئے ریاستی تبدیلی کا ایک سادہ مثال بنانا شروع کریں. اس مثال میں، اس کی خصوصیات جو تبدیل ہوجائے گی چوڑائی، اونچائی اور رنگ ہیں. کسی بھی آٹو متحرک ٹرانزیشن کے لئے، آپ کو دو سے زیادہ آرٹ بورڈز کی ضرورت ہے.

ابتدائی آرٹ بورڈ پر، ایک شکل ڈرا - ہماری مثال میں، یہ 500px ایکس 200px کی ایک سبز آئتاکار ہے. اس آرٹ بورڈ کو ڈپلیکیٹ کریں اور دوسرا آرٹ بورڈ پر آئتاکار منتخب کریں. ہمیں چوڑائی سے 1000 اور اونچائی سے 500 تک بڑھانے کی طرف سے آئتاکار کی خصوصیات کو تبدیل کرنے کی ضرورت ہے. آپ مزید ترمیم بھی انجام دے سکتے ہیں جیسے 50٪ تک دھندلاپن کو تبدیل کرنے یا رنگ گلابی بنانے کے.

اب اوپری بائیں کونے پر پروٹوٹائپ ٹیب پر کلک کریں. پہلا آرٹ بورڈ منتخب کریں اور دوسرا آرٹ بورڈ پر تیر کا استعمال کرتے ہوئے اسے لنک کریں. جب آپ ایسا کرتے ہیں، اس اپلی کیشن کے دائیں جانب ایک بات چیت ٹیب موجود ہے جو پیرامیٹرز جیسے ٹرگر، عمل، منزل اور آسان بنانے کے لئے استعمال کیا جا سکتا ہے. ہر پیرامیٹر آپ کی ضروریات کے مطابق اپنی مرضی کے مطابق کیا جا سکتا ہے. پانچ قسم کے ٹرگر ہیں - بشمول نل، ڈریگ اور ٹائم - جو حرکت پذیری شروع کرے گی.

آٹو متحرک کرنے کے لئے ایکشن ٹیب ڈیفالٹ مقرر کریں اور اس وجہ سے کہ ہمارے مثال میں صرف دو آرٹ بورڈز موجود ہیں، آرٹ بورڈ میں منزل ٹیب مقرر کریں 2. وہاں ایک سے زیادہ ہموار ٹرانزیشن بھی منتخب اور ٹائم کیا جا سکتا ہے. آٹو متحرک دیکھنے کے لئے سب سے اوپر دائیں پر کھیل آئکن پر کلک کریں اس کے جادو اور آئتاکار کو متحرک کریں. جب دو عناصر سے زیادہ ہیں جو بیک وقت تبدیل کرنے کی ضرورت ہوتی ہے، اس بات کو یقینی بنائیں کہ ان عناصر کے نام دونوں آرٹ بورڈز میں ہیں. یہ اس درخواست کو مطلع کرے گا کہ یہ دو عناصر متحرک ہونے کی ضرورت ہے.

کارڈ کھولیں

اب ہم زیادہ سے زیادہ انٹرایکٹوٹی کے ساتھ ایک مثال کے طور پر پیش رفت کرتے ہیں اور اس میں ایک سے زیادہ عناصر شامل ہیں. چلو اس کے لئے پہلے آرٹ بورڈ بنانے کے لۓ شروع کرتے ہیں، جو کارڈ پر مشتمل ہے. کارڈ میں عناصر جیسے ہیڈر، وضاحت اور نیچے پڑھنے کے نقطہ نظر کی تاریخ میں ایک لنک ہوگا. لنک کے آگے، وہاں ایک تیر آئکن کا سامنا کرنا پڑے گا. جب صارف لنک پر کلک کرتا ہے تو، کارڈ پچھلے اندراجوں کو ظاہر کرنے کے لئے ایک دراج کی طرح کھلے گا. چونکہ یہ کلک / نل کی تقریب پر ہوتا ہے، پچھلے اندراجات کو پہلے آرٹ بورڈ میں نہیں بنایا جانا چاہئے.

اگلا، ہم اس آرٹ بورڈ کو نقل کرتے ہیں اور کارڈ کی کچھ خصوصیات کو تبدیل کرتے ہیں. ایسا کرنے کی پہلی چیز آئتاکار کارڈ کی اونچائی میں اضافہ ہوا ہے تاکہ اسے وسیع ریاست کی طرح نظر آتی ہے. ہیڈر اور وضاحت ذیل میں کوئی تبدیلی نہیں ہونا چاہئے. اب ہم نے پہلے ذکر کردہ ان اندراجات کو شامل کرنے کا وقت ہے.

تصور کریں کہ کارڈ کے لئے تین اندراج موجود ہیں. ہر اندراج میں ایک اندراج کا نام، داخلہ تاریخ اور ایک بٹن ہے جیسا کہ اہم تصویر میں دکھایا گیا ہے. آپ اندراجات کے ایک گروہ کو تخلیق کرنے کے لئے ایک اندراج بنا سکتے ہیں اور اسے دو بار نقل کرسکتے ہیں. ان اندراج میں دکھایا گیا ہے اور ان اندراجات کے نیچے نقطہ نظر کی تاریخ کا متن لنک رکھیں. کیونکہ یہ ایک وسیع ریاست میں ہے، تیر آئکن کو گھمائیں تاکہ اس کا سامنا کرنا پڑا. یہی ہے. آپ نے آرٹ بورڈز کو ترتیب دیا ہے.

حرکت پذیری بنانے کے لئے، پہلے آرٹ بورڈ پر جائیں اور اوپر بائیں کونے سے پروٹوٹائپ ٹیب پر کلک کریں. اب سب سے پہلے آرٹ بورڈ پر ملاحظہ کریں تاریخ کا لنک پر کلک کریں اور پروٹوٹائپ کو دوسرے آرٹ بورڈ سے لنک ڈریگ کریں. یہ نقطہ نظر کی تاریخ کو ٹرگر سے منسلک کرتا ہے. آٹو متحرک کرنے کے لئے ٹرگر اور کارروائی کرنے کے لئے ٹرگر کو ترتیب دینے کے ذریعے دائیں جانب بات چیت ٹیب میں خصوصیات کو تبدیل کریں. ہموار دراج حرکت پذیری کو دیکھنے کے لئے ٹیسٹ کریں. اگر آپ کو حرکت پذیری کافی آسان نہیں ہے تو بات چیت کے ٹیب میں آسان اختیار میں تبدیلیاں بنائیں.

ڈریگ حرکت پذیری بنائیں

جب یہ موبائل تعامل میں آتا ہے تو ڈریگ سب سے زیادہ عام حرکت پذیری میں سے ایک ہے. چلو دو آرٹ بورڈز کے ساتھ ایک سادہ مثال کی کوشش کریں. پہلے آرٹ بورڈ کے لئے، کسی بھی رنگ اور طول و عرض کے دائرے کی تشکیل سے شروع کریں. اب 250px کی چوڑائی اور 25px کی اونچائی کے ساتھ ایک آئتاکار بنائیں. یہ آئتاکار آٹھ مرتبہ ڈپلیکیٹ، ہر ڈپلیکیٹ کے درمیان 20px کی جگہ کو برقرار رکھنے کے لۓ، تاکہ یہ ایک اسٹیک بنائے. اس آرٹ بورڈ کو ڈپلیکیٹ کرنے سے پہلے پہلے آئتاکار کے اوپر دائرے پر رکھیں.

دوسرے آرٹ بورڈ کے لئے بہت زیادہ بائیں نہیں ہے. صرف نقل شدہ آئتاکاروں میں سے ہر ایک کے درمیان فرق کو کم کرنا تاکہ ایسا لگتا ہے کہ یہ کمپیکٹ ہے. پہلے آرٹ بورڈ کی طرح، پہلے آئتاکار کے سب سے اوپر دائرے پر رکھیں. حتمی قدم یہ سب سے اوپر بائیں کونے سے پروٹوٹائپ ٹیب پر کلک کرکے پروٹوٹائپ کرنا ہے. اب پہلے آرٹ بورڈ سے دائرے پر کلک کریں اور اسے ایک ٹرگر بنائیں. صرف پچھلے مثالوں کی طرح، آٹو متحرک کرنے کے لئے ڈریگ اور کارروائی کرنے کے لئے ٹرگر اور کارروائی کرنے کے لئے دائیں طرف بات چیت ٹیب میں خصوصیات کو تبدیل کریں. جب آپ حرکت پذیری پیش نظارہ کرنے کے لئے کھیل کے بٹن پر کلک کریں تو، آپ کو ایک ہموار کارروائی کو دیکھنے کے قابل ہو جائے گا جیسے بلاک اس علاقے کی طرف سے کمپیکٹ کیا جا رہا ہے.

لامحدود لوڈر حرکت پذیری بنائیں

ایڈوب XD کی بہترین خصوصیات میں سے ایک یہ ہے کہ آٹو متحرک ایک سے زیادہ آرٹ بورڈز کے درمیان لاگو کیا جا سکتا ہے. اس طرح کی حرکت پذیری کرنے کے لئے، آپ کو صرف ایک خصوصیات میں سے ایک میں سادہ تبدیلیوں کی ضرورت ہے.

چلو ایک لوڈنگ حرکت پذیری تخلیق کرتے ہیں جس میں ایک بیٹری بھرا ہوا ہے. اس کامل کو حاصل کرنے کی کلید مناسب طریقے سے پہلے آرٹ بورڈ کو تیار کرنے کے لئے ہے. پہلی آرٹ بورڈ میں تصویر میں دکھایا گیا ہے کے طور پر ایک بیٹری پلیس ہولڈر ہے. یہ آئتاکار کی شکلوں کا استعمال کرتے ہوئے تخلیق کیا جا سکتا ہے. جگہ ہولڈر کے اندر اصل بیٹری کے لئے، پہلا آرٹ بورڈ خالی ہونا چاہئے (جو 0٪ کی نمائندگی کرتا ہے). اس آرٹ بورڈ کو ڈپلیکیٹ کریں اور 50px اونچائی کے ساتھ ایک سبز آئتاکار بنائیں جو جگہ ہولڈر کے اندر مکمل طور پر فٹ بیٹھتا ہے. اسی طرح کے ڈپلیکیٹس بنائیں تاکہ تیسرے آرٹ بورڈ میں بیٹری کی اونچائی 50px اور اسی طرح میں اضافہ ہو. جب تک آرٹ بورڈ مکمل طور پر بھرا ہوا ہے جاری رکھیں.

اب ہمیں ان آرٹ بورڈز کے درمیان ایک لامحدود لوپ بنانا ہے تاکہ یہ ایک مطابقت پذیر لوڈنگ حرکت پذیری پیدا کرے. اس کے لئے، پروٹوٹائپ موڈ پر جائیں، پہلے آرٹ بورڈ پر کلک کریں اور پروٹوٹائپ تیر کو دوسرے آرٹ بورڈ میں گھسیٹیں. بات چیت کے پینل میں خصوصیات کو تبدیل کریں، وقت سے ٹرگر کی ترتیب کی طرف سے اور پھر 0 سیکنڈ تک تاخیر مقرر کریں، جو پیش نظارہ کرتے وقت دوسرے آرٹ بورڈ پر متحرک کریں گے. سبھی آرٹ بورڈز میں اسی تبدیلیوں کو انجام دیں، تیسرے اور اسی طرح پہلے سے ہی آخری آرٹ بورڈ سے پہلے ایک دوسرے سے منسلک کرنے سے پہلے. ہم نے تمام آرٹ بورڈز کو ایک لامحدود لوپ بنانے کے لئے کامیابی سے منسلک کیا ہے. لوڈنگ ہموار بنانے کے لئے آپ کی ضرورت کے مطابق آسان اور مدت کی ترتیبات کو تبدیل کریں.

اگرچہ وہاں مختلف تغیرات موجود ہیں جو ایڈوب ایکس ڈی کا استعمال کرنے کی کوشش کی جا سکتی ہیں، آلے کی موجودہ صلاحیتیں محدود ہیں اور اب بھی ترقیاتی ٹیم کی طرف سے باقاعدگی سے اپ ڈیٹ کیا جا رہا ہے. لہذا، جب اصول اصول کے مقابلے میں، آپ محسوس کر سکتے ہیں کہ XD ایک محدود ٹول سیٹ ہے. تاہم، ایڈوب نے سیکھنے اور استعمال کرنے کے لئے آسان آلہ بنانے کا بہترین کام کیا ہے. پیچیدہ بات چیت کی تشکیل کچھ وقت اور کوشش کر سکتی ہے لیکن وہ XD کے آٹو متحرک خصوصیت کا استعمال کرتے ہوئے مکمل طور پر حاصل کرنے کے قابل ہیں. کلیدی اشیاء کو منتقل کرنے، ان کا سائز تبدیل کرنے، تہوں کو شامل کرنے اور ٹرگروں کا استعمال کرتے ہوئے بنیادی طور پر سمجھنے کے لئے ہے.

یہ مضمون اصل میں 326 کا مسئلہ شائع ہوا نیٹ ویب ڈیزائنرز اور ڈویلپرز کے لئے دنیا کے معروف میگزین. خریدنے مسئلہ 326. یا یہاں سبسکرائب کریں .

مزید پڑھ:

40 شاندار ورڈپریس سبق
11 حیرت انگیز جاوا اسکرپٹ فریم ورک
کیا نیورومفزم واقعی 2020 کی سب سے زیادہ رجحان ہے؟

مائکرو انٹرایکٹو بنانے کے لئے ایڈوب XD کا استعمال کریں

آٹو متحرک کا استعمال کرتے ہوئے ایک ریاست تبدیلی بنائیں

کارڈ کھولیں

ڈریگ حرکت پذیری بنائیں

لامحدود لوڈر حرکت پذیری بنائیں

کيسے - انتہائی مشہور مضامین

حوالہ تصاویر کا استعمال کیسے کریں: فنکاروں کے لئے 13 ضروری تجاویز

فوٹوشاپ میں ایک تصویر کا سائز تبدیل کرنے کے لئے

ایک ویڈیو گیم کے لئے ایک playable اوتار ڈیزائن

اپنے اپنے Webgl طبیعیات کھیل کی تعمیر

سیاہی میں نامیاتی ساختہ بنائیں

ساس کے ساتھ شروع کیسے کریں

وین گوگ کی طرح ایک تصویر پینٹ

GIFs سے مزید کیسے حاصل کرنے کے لئے

اقسام