انٹرایکٹو پروٹوٹائپ کی تعمیر کے لئے فریمر ایکس کا استعمال کریں

Sep 11, 2025
کيسے
Framer X - Design prototypes fast
(تصویری کریڈٹ: فریمر)

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

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

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

فریمر ایکس کے ساتھ ایک اپلی کیشن کیسے بنائیں

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

  • کی ترکیبیں تلاش کرنے کے لئے معیاری تلاش بار
  • حالیہ سرگرمی کو دیکھنے کے لئے تازہ ترین ترکیبیں دکھائیں
  • ہدایت کارڈ سب سے زیادہ مقبول ترکیبیں جیسے چیزیں دکھاتی ہیں
  • ویڈیو اور اشتراک کے اختیارات کے ساتھ ہدایت کا تفصیلی نقطہ نظر بنانا

شروع کرنے کے لئے آپ کو بائیں نیویبار پر + آئکن پر کلک کرکے ایک نیا فریم (ایک آرٹ بورڈ) بنانے کی ضرورت ہے. صحیح بار پر معیاری آئی فون / لوڈ، اتارنا Android ٹیمپلیٹس کی فہرست سے کسی بھی آرٹ بورڈ سٹائل کو منتخب کریں. اب آپ جانے کے لئے تیار ہیں.

01. تلاش کی بار کی تعمیر

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

ان پیکجوں میں عناصر جیسے کارڈ، بٹن، کی بورڈ، سلائیڈرز، ان پٹ اور نیویگیشن مینو اشیاء شامل ہیں. ایک بار جب آپ ان پیکجوں کو انسٹال کرتے ہیں، تو آپ بائیں جانب اجزاء مینو سے عناصر استعمال کرسکتے ہیں.

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

02. ایک مواد اسٹیک بنائیں

اس حالیہ سرگرمی کے بلاک کے لئے، سب سے پہلے متن 'حالیہ سرگرمی' شامل کریں، جو بہت سیدھا ہے. اب ہم فریمر ایکس کی نئی خصوصیت کا استعمال کر سکتے ہیں. یہ + آئکن پر کلک کرکے مینو سے اسٹیک ایس کو منتخب کرکے کیا جا سکتا ہے. اسٹیک کو بنانے کے لئے کام کرنے والے فریم پر 600 x 300 کے علاقے کو ڈریگ اور ڈراپ کرنے کے بعد. یہ اسٹیک نیلے رنگ کے طور پر دکھایا جائے گا.

اب ہم اجزاء کے سیکشن اور لوڈ، اتارنا Android کٹ کے تحت واپس آتے ہیں، کارڈ -5 عنصر کی تلاش کریں اور اسے صرف اسٹیک میں ڈالیں. ان کارڈوں کو دو بار ڈپلیکیٹ کریں اور اس بات کو یقینی بنائیں کہ تمام تین کارڈ اسٹیک میں ہیں.

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

اب ہم نے ایک اسٹیک بنائے ہیں، چلو یہ سکرال بناتے ہیں. اسے فریم / آرٹ بورڈ سے باہر منتقل کریں. بائیں نیوی سے + آئکن پر کلک کریں اور سکرال کے اختیار پر کلک کریں. جیسا کہ ہم نے اسٹیک کے ساتھ ایک علاقے کو تخلیق کیا، فریم / آرٹ بورڈ پر ایک طومار علاقے بنائیں جو اسٹیک کے طور پر ایک ہی سائز ہے.

اب اس افقی کتاب کو بنانے کے لئے سمت تیر کو تبدیل کرکے دائیں بار میں سکرال کی جائیداد کو تبدیل کریں. ہمارے سکرال کنٹینر پیدا ہونے کے بعد ہمیں اس کے لئے مواد کی ضرورت ہوتی ہے، جو اس اسٹیک کی طرف سے پیش کی جاتی ہے جو ہم نے پہلے پیدا کیا ہے. لہذا صرف سکرال کنٹینر پر تیر فوری طور پر تیر کا استعمال کرتے ہوئے اسٹیک پر سکرال کنٹینر سے منسلک کریں. یہ ماؤس پوائنٹر اسٹیک پر گھسیٹ کر کام کرتا ہے.

03. عمودی اسٹیک بنائیں

Interactive Framer X - 01

فریمر ایکس آپ کو افقی اور عمودی طومار اسٹیک متعارف کرانے کی اجازت دیتا ہے (تصویری کریڈٹ: VAMSI BATCHU)

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

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

04. نیا صفحہ بنائیں

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

ویڈیو کو شامل کرنے کے لئے، اسٹور پر جائیں اور یو ٹیوب پیکج کو انسٹال کرنے کے لئے، جو آپ کو آپ کے پروٹوٹائپ میں آسانی سے ویڈیوز شامل کرنے کے قابل بناتا ہے. اب آپ کے اجزاء کے پینل پر جائیں اور یو ٹیوب کے اجزاء کو فریم میں سے یو ٹیوب عنصر سے ڈریگ اور ڈراپیں.

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

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

چیزوں کے لئے آسان چیزیں آسان بنانے کے لئے، آپ اجزاء نامی ایک سیکشن شامل کرسکتے ہیں، جو اس معاملے میں، فرانسیسی پاستا میں - ہمارے ہدایت کے لئے ضروری اجزاء کی ضرورت ہوگی.

05. تعامل متعارف کرایا

Interactive Framer X - 02

ان کو زیادہ مصروف بنانے کے لئے بٹن اور عناصر کے ساتھ بات چیت شامل کریں (تصویری کریڈٹ: VAMSI BATCHU)

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

اس بات کو یقینی بنائیں کہ اس فریم کی چوڑائی اور اونچائی ایک ہی چوڑائی اور اونچائی ہے جو ہم نے پیدا کیے ہیں. خیال یہ ہے کہ اس نئے حصص کی سکرین کو سلائڈ کرنے اور موجودہ اسکرین کو تبدیل کرنے کے لئے ہے جب حصص آئکن پر کلک کیا جاتا ہے.

اسکرین کو الگ کرنے میں مدد کرنے کے لئے، چلو اس میں کچھ رنگ شامل کریں اور سوشل میڈیا شبیہیں جیسے فیس بک، انسٹاگرام، WhatsApp اور ای میل کے ساتھ بھریں. اس حصص کی سکرین کو بھی ایک ایکس آئکن بھی شامل ہونا چاہئے، جس پر کلک کیا جاتا ہے جب اسے اصل ریاست میں واپس لے آئے گا.

اس بات کو یقینی بنائیں کہ تمام شبیہیں ایک اسٹیک کے اندر بندھے ہوئے ہیں. جیسے ہی ایکس آئکن شامل ہے، اگلے مرحلے کو اس فریم سے منسلک کرنا ہے تاکہ اس وقت آپ کو اشتراک آئکن پر کلک کریں.

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

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

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

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

06. محفوظ کریں بٹن شامل کریں

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

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

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

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

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

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer.

جانیں کہ کس طرح بہتر جاوا اسکرپٹ کی تعمیر میں پیدا کریں (تصویری کریڈٹ: مستقبل / ریمی شارپ / فل ہاکسورتھ / جیریمی کیتھ / نادیہ بریمر / ٹا ہیٹیبا، غیر فعال)

اپریل 2020 میں ہمارے اندر اندر جاوا اسکرپٹ سپر اسٹار کے ساتھ ہمارے ساتھ شامل کریں - کانفرنس آپ کو بہتر جاوا سکرپٹ کی تعمیر میں مدد ملتی ہے. کتاب اب generateconf.com.

مزید پڑھ:

  • باہر کھڑے ہونے اور ایک UX ڈیزائنر کے طور پر ملازمت حاصل کرنے کے لئے کس طرح
  • 20 UX تجاویز آپ کو جاننے کی ضرورت ہے
  • 22 بہترین UI ڈیزائن کے اوزار

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

Chiaroscuro آرٹ: ایک قدم بہ قدم گائیڈ

کيسے Sep 11, 2025

Chiaroscuro آرٹ بنانے کی روشنی اور سائے کی ساخت کی گہرائی پیدا کرنے کے لئے، اور زیادہ اہم بات، موڈ بنانے کے بارے..

vue.js کے ساتھ ایک اپلی کیشن کیسے بنائیں

کيسے Sep 11, 2025

جاوا اسکرپٹ ماحولیاتی نظام کو ایک دہائی سے زیادہ تبدیل کر دیا گیا ہے، م�..

قابل رسائی ویب فارم کیسے بنائیں

کيسے Sep 11, 2025

فارم ویب کا ایک لازمی جزو ہیں کیونکہ وہ صارفین کو آپ کے کاروبار سے منسلک..

ناک کیسے ڈالو

کيسے Sep 11, 2025

ایک ناک کو کس طرح اپنی طرف متوجہ کرنے کے لئے ماسٹرنگ ایک چہرے ڈرائنگ کے �..

سکریچ سے ایک ای کامرس سائٹ کی تعمیر

کيسے Sep 11, 2025

حالیہ برسوں میں ای کامرس بہت مقبول ہو گیا ہے، اب اس کے بغیر مستقبل کا تص�..

صحیح پروٹوٹائپ کا آلہ کیسے منتخب کریں

کيسے Sep 11, 2025

پروٹوٹائپ شاید ویب ڈیزائن کے عمل کے سب سے اہم حصوں میں سے ایک ہے. �..

گیلے ان گیلے پینٹنگ کی تکنیک کے ساتھ گرفت میں جائیں

کيسے Sep 11, 2025

گیلے گیلے A. پینٹنگ کی تکنیک یہ اکثر مایوسی کا باعث بن سکتا ہے. ی�..

جادو چمک چلنے والی رنز کیسے پینٹ

کيسے Sep 11, 2025

اس سبق میں، میں آپ کو دکھاتا ہوں کہ کس طرح صوفیانہ رنوں کو چمکتا ہے جو چم..

اقسام