figma کے ساتھ ایک ذمہ دار ڈیش بورڈ بنائیں

Sep 16, 2025

کيسے

FINMA UI ڈیزائنرز کے لئے ایک گرافکس کا آلہ ہے. اس میں ایک سادہ انٹرفیس ہے اور آپ کو آپ کے ٹیموں کے ساتھ کام پر تعاون کرنے کے قابل بناتا ہے. اگر آپ آف لائن کام کرنا چاہتے ہیں، تو آپ ڈیسک ٹاپ اپلی کیشن کا استعمال کرسکتے ہیں. متبادل طور پر، figma کسی بھی آپریٹنگ سسٹم (ہیلو، ونڈوز) پر کام کرتا ہے، لہذا آپ کو کچھ بھی انسٹال کرنے کی ضرورت نہیں ہے. اور شروع کرنا آسان ہے - آپ خاکہ سے اپنے پچھلے ترتیب ڈیزائن درآمد کرسکتے ہیں.

ویب سائٹ بلڈر کا انتخاب کریں: 16 اوپر ٹولز

figma میں، آپ اپنی انٹرفیس کے لئے اپنی مرضی کے مطابق ویکٹر شبیہیں سے اپنی مرضی کے مطابق ترتیب کے لئے آپ کو ہر چیز کو تشکیل دے سکتے ہیں. Multiplayer ترمیم ڈیزائن ٹیموں کے لئے زیادہ وقت بچا سکتا ہے، کیونکہ اس کا مطلب یہ ہے کہ تمام ٹیم کے ارکان ایک ہی وقت میں اسی ترتیب پر کام کرسکتے ہیں. اور یہ بھی اس کی تمام بڑی خصوصیات نہیں ہیں.

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

01. سائن اپ

سب سے پہلے، آپ کو سائن اپ کرنے کی ضرورت ہے www.figma.com. . فیصلہ کریں کہ اگر آپ اپنے براؤزر میں آلے کا استعمال کرنا چاہتے ہیں یا ڈیسک ٹاپ اپلی کیشن ڈاؤن لوڈ کریں. ڈیسک ٹاپ ورژن ڈاؤن لوڈ کرنے کے لئے، سب سے اوپر بائیں کونے میں ہیمبرگر مینو پر جائیں اور 'ڈیسک ٹاپ ایپ حاصل کریں' پر کلک کریں.

02. آرٹ بورڈ اور گرڈ بنائیں

Add a baseline grid to help you position your elements harmoniously (click image to enlarge) — آپ کے عناصر کو ہم آہنگی سے پوزیشن میں مدد کرنے کے لئے ایک بیس لائن گرڈ شامل کریں (تصویر بڑھانے کے لئے کلک کریں)

مارا A. ایک آرٹ بورڈ بنانے کے لئے. آپ presets میں سے ایک کو منتخب کر سکتے ہیں یا اپنی اپنی مرضی کے مطابق سائز بنائیں. اس منصوبے کے لئے، ہم فون اور جی ٹی کا استعمال کرنے جا رہے ہیں؛ آئی فون 7 (375x667px). ایک گرڈ بنانے کے لئے، سب سے پہلے آرٹ بورڈ کا انتخاب کریں. اس کے بعد دائیں ہاتھ سائڈبار پر 'لے آؤٹ گرڈ' تلاش کریں اور '+' دبائیں. کالم شمار قائم کریں: 6، گٹر: 16، مارجن: 8 اور قسم: مسلسل.

03. پس منظر کے لئے ایک آئتاکار ڈرا

چلو پس منظر کے ساتھ شروع کرو. پریس آر آئتاکار کے آلے کو لانے اور کسی بھی سرحدوں کے ساتھ ایک آئتاکار # 5F98FA ڈرائیو. دائیں ہاتھ کی طرف پر خصوصیات پینل کا استعمال کرتے ہوئے 375x363 تک طول و عرض مقرر کریں.

04. ایک اسٹیٹ بار شامل کریں

Set the gradient for the status bar using the properties panel on the right on the screen. Here you can adjust the colour options to create a linear gradient (click image to enlarge) — اسکرین پر دائیں جانب پراپرٹیز پینل کا استعمال کرتے ہوئے اسٹیٹ بار کے لئے تدریسی مقرر کریں. یہاں آپ ایک لکیری تدریسی تخلیق کرنے کے لئے رنگ کے اختیارات کو ایڈجسٹ کرسکتے ہیں (تصویر کو بڑھانے کے لئے کلک کریں)

اگلا ہم اسکرین کے سب سے اوپر پر حیثیت بار رکھنا چاہتے ہیں. پریس آر چوڑائی قائم کرنے کے لئے: 375، اونچائی: 64، پوزیشن (x: 0؛ y: 0). ہمارے نیویگیشن بار کے لئے دائیں جانب پراپرٹی انسپکٹر پینل کا استعمال کرتے ہوئے گریجویٹ کو بھرنے کے لۓ. 'بھریں' کا اختیار تلاش کریں، رنگ پیش نظارہ پر دبائیں اور ڈراپ ڈاؤن مینو سے 'لکیری' کو منتخب کریں. سب سے اوپر رنگ # 77A6F7 ہونا چاہئے، اور سب سے نیچے # 5A93F5 (دونوں کے لئے دھندلاپن 100 فی صد).

05. iOS کی حیثیت کی بار درآمد کریں

بدقسمتی سے، FINMA میں ڈیفالٹ کی طرف سے iOS UI عناصر شامل نہیں ہیں. تاہم، 'نمونہ فائل' کہا جاتا ہے جس میں ایک فائل ہے، جو IOS ایپ ڈیزائن ہے، لہذا ہم اس سے حیثیت کی بار قرض لے سکتے ہیں. روشنی کی حیثیت کے بار اختیار کاپی کریں، اسے موجودہ فائل میں پیسٹ کریں اور اسے رکھیں (x: 0؛ y: 0). ٹیکسٹ آلے کا استعمال کرتے ہوئے ( ٹی )، نیویگیشن بار پر ہیڈر شامل کرنے کے لئے اپنے آرٹ بورڈ پر کلک کریں. میں ایونیر بھاری، 15px، #ffffff کے لئے گیا ہوں. افقی مرکز کی طرف سے سرخی کو سیدھ کریں، Y: 33.

06. بیک اپ آئیکن بنائیں

نیویگیشن بار کے بائیں جانب ایک 'بیک' آئکن ہونا چاہئے. میں اسے خرگوش سے پیدا کرنے جا رہا ہوں. ایک آئتاکار 14x14px بنائیں، 45 ڈگری گردش شامل کریں، x: 14؛ Y: 43. اس آئتاکار کو ڈپلیکیٹ کریں اور اسے X: 18 میں رکھیں. Y: 43. دونوں آئتاکاروں کو منتخب کریں اور سب سے اوپر مینو کے تحت Boolean گروپوں اور GT پر جائیں؛ انتخاب کا انتخاب اس کے بعد، Boolean گروپوں اور GT میں واپس جائیں؛ فلیٹن انتخاب، یا دبائیں CMD + E. .

07. تیر آئکن کو ختم کرو

ہمارے تیر آئکن تقریبا کیا جاتا ہے. اب ہمیں صرف عددی اقدار میں چوڑائی اور اونچائی کو قائم کرنے کی ضرورت ہے - میرے کیس کی چوڑائی: 12px؛ اونچائی: 20px. حتمی قدم #fffffffffffffffffffffff کے لئے مقرر کرنا ہے.

08. ایک گراف بنائیں

اب ہم گراف بنانے جا رہے ہیں. سب سے پہلے، ہم کچھ ہدایات میں ڈالیں گے. آئتاکار کا آلہ منتخب کریں ( آر ) اور x مقرر کریں: 24 Y: 147؛ چوڑائی: 1؛ اونچائی: 166؛ رنگ # B3DCFF اور دھندلاپن 20٪ بھریں.

80px مارجن کے ساتھ چار بار اس آئتاکار کو ڈپلیکیٹ کریں. ہر ہدایت کے نیچے، ہمیں ٹیکسٹ تہوں ('فروری 2'، 'فروری 9،' فروری 23 '،' مارچ 1 ') کا استعمال کرتے ہوئے ایک تاریخ لیبل کو شامل کرنے کی ضرورت ہے. میں نے Avenir درمیانے درجے کا استعمال کیا ہے، 11px، # c1d8ff.

09. ڈیٹا لائن بنائیں

قلم کے آلے کا استعمال کرتے ہوئے ( پی ) ہمیں ڈیٹا لائن کی نمائندگی کرنے کے لئے ایک ویکٹر بنانے کی ضرورت ہے. Bézier نقطہ بنانے کے لئے کلک کریں اور ڈریگ کریں. اس شکل میں 4px اسٹروک اور کوئی بھر نہیں، #ffffff ہونا چاہئے.

آئیے لائن کھڑے ہونے میں مدد کرنے کے لئے ایک ڈراپ سائے شامل کریں: اثرات کے سیکشن پر '+' پر کلک کریں اور 'ڈراپ شیڈو' کا انتخاب کریں. ہموار اور خوبصورت سائے بنانے کے لئے مندرجہ ذیل ترتیبات کا استعمال کریں: دھندلا: 3px، Y: 7px، # 2951FF، دھندلاپن: 100٪.

10. گراف میں تفصیل شامل کریں

Use the Text tool to add values to the places the guidelines intersect with the data line — مقامات پر اقدار کو شامل کرنے کے لئے متن کا آلہ استعمال کریں کہ ہدایات ڈیٹا لائن کے ساتھ انٹرویو کریں

اس پوائنٹس پر جہاں ہدایات ڈیٹا لائن کے ساتھ گھومتے ہیں ہم حلقوں کو شامل کرنے جا رہے ہیں. اس بار ہم یلپس کے آلے کا استعمال کریں گے ( اے )، جس میں آپ کو آئتاکار کے آلے کے ساتھ ڈراپ ڈاؤن مینو میں مل جائے گا. ہر چوک پر 8x8px حلقوں کو ڈرا اور بھرنے کا رنگ # 5F98FA پر مقرر کریں. ہمیں ایک اسٹروک شامل کرنے کی ضرورت ہے: اسٹروک سیکشن کے آگے '+' بٹن پر کلک کریں، وزن کا وزن: 2px اور سیدھ: سینٹر.

11. حتمی رابطے

گراف سیکشن کو ختم کرنے کے لئے، ہمیں صرف ہمارے چوک پوائنٹس پر اقدار کو شامل کرنے کی ضرورت ہے. متن کے آلے کے ساتھ ( ٹی ) Avenir سیاہ، 11px، # 1f4991 منتخب کریں.

12. تین معلوماتی بکس

لائن گراف کے نیچے ہم تین خلیوں کو تخلیق کرنے جا رہے ہیں جو مزید معلومات دکھاتے ہیں. ٹیکسٹ آلے کا استعمال کرتے ہوئے ( ٹی ) چلو ہماری پہلی سرخی بنائیں: 'آپ کے حصص کی متوقع قیمت': x: 16؛ Y: 391، Avenir درمیانے، 15px، # 5d7eb6. سیل کے حق میں قیمت '$ 1،115'، متن سٹائل: ایونیر بھاری، 22px، # 5F98FA، متن کی سیدھ: بائیں، x: 287؛ Y: 387.

13. الگ الگ بنانا

ایک آئتاکار ڈراؤ جو اونچائی میں 1px ہے اور اسکرین کی مکمل چوڑائی (# F5F5F5؛ x: 0؛ y: 435) - یہ خلیات کے درمیان علیحدگی کے طور پر کام کرے گا. سرخی، قدر اور علیحدگی کا انتخاب کریں اور ایک گروپ بنائیں ( CMD + جی ).

14. عنوانات شامل کرنا

Underneath the graph will be three cells showing key pieces of data (click image to enlarge) — گراف کے نیچے تین خلیوں کو اعداد و شمار کے اہم ٹکڑے ٹکڑے دکھائے جائیں گے (تصویر بڑھانے کے لئے کلک کریں)

اس گروپ کو ڈپلیکیٹ کریں تاکہ آپ کے درمیان 24px عمودی فاصلے کے ساتھ تین گروپ ہیں. 'کل اراکین' کو دوسری سرخی کو تبدیل کریں اور تیسرے گروپ کو 'دوستوں پر دستخط کیا' اور متعلقہ اقدار کو اپ ڈیٹ کریں.

15. ڈرا اور ایک اور آئتاکار کو سیدھا کریں

اب ہم کارروائی کرنے کے لئے ایک کال شامل کرنے جا رہے ہیں. آخری سیل کے نیچے ایک آئتاکار ڈرائیو، چوڑائی: 195؛ اونچائی: 44، آخری علیحدگی 21px سے Y-Axis فاصلے.

سیدھ کے اوزار کا استعمال کرتے ہوئے، افقی مرکز کی طرف سے آئتاکار قائم کریں. اس کے بعد بھرنے کا رنگ # 5F98FA اور 22 تک گولیاں مقرر کریں (آپ کو اس فیلڈ کو 'گردش' کے بعد پراپرٹیز پینل میں مل جائے گا). اس کے بعد ایک ڈراپ شیڈو اثر (رنگ: #abdaff؛ دھندلاپن: 100٪؛ Y: 5؛ دھندلا: 11).

16. بٹن پر کچھ متن رکھو

متن کے آلے کا استعمال کرتے ہوئے بٹن پر متن شامل کریں ( ٹی ): 'مزید حصص حاصل کریں!' Avenir سیاہ، 15px، #ffffff میں اسے مقرر کریں. بٹن کے مرکز کی طرف سے متن کو سیدھ کریں. آخر میں، گروپ تمام عناصر کے ساتھ مل کر اور انہیں مناسب طریقے سے نام.

17. یہ ذمہ دار بنائیں

اب ہم اپنی ترتیب کو ایڈجسٹ کرنے جا رہے ہیں لہذا یہ مختلف آئی فونز (320x568، 375x667 اور 414x736) کے لئے ذمہ دار ہے. ایسا کرنے کے لئے ہمیں رکاوٹوں کا استعمال کرنا ہوگا، جو آپ کو دائیں جانب پراپرٹیز مینو کے تحت مل جائے گا.

18. صحیح ترتیب حاصل کرنا

اگر آپ افقی ڈراپ ڈاؤن پر 'بائیں' یا 'دائیں' کا انتخاب کرتے ہیں تو، گروپ اسکرین کے اپنے منتخب کردہ حصے میں پن کرے گا، اور اس سے بڑھ نہیں جائے گا. اگر آپ 'مرکز' کا انتخاب کرتے ہیں تو، گروپ یا پرت بڑھ جائے گی لہذا یہ اسکرین کی چوڑائی بھرتی ہے. ہمیں حیثیت کی بار کو جگہ میں فلوٹ بنانے کی ضرورت ہے، لہذا ہم چاہتے ہیں کہ 'دائیں & amp؛ بائیں' اختیار (یا نیچے 'سی ایم ڈی' اور ڈایاگرام پر بائیں اور دائیں سلاخوں پر کلک کریں).

19. ٹیسٹ

چلو اس کی کوشش کریں. منتخب حیثیت کے بار کے ساتھ، 'دائیں & amp؛ بائیں' اختیار کو مار ڈالو. ایک آرٹ بورڈ کا انتخاب کریں اور، آئی فون 7 کے بجائے، آئی فون 7 پلس کا انتخاب کریں. اگر آپ آئی فون سی کا سائز منتخب کرتے ہیں تو یہ مناسب طریقے سے کام کرتا ہے.

20. ہر پرت کو چیک کریں

باقی تہوں پر غور کریں. نیویگیشن بار پس منظر کے لئے، ہم 'دائیں + بائیں' استعمال کرنا چاہتے ہیں. نیویگیشن بار کے عنوان کے لئے: 'مرکز'. پیچھے تیر آئکن کے لئے، یہ 'بائیں' کا اختیار استعمال کرنے کے لئے سب سے بہتر ہے - اس طرح تیر اسکرین کے بائیں جانب سے پھینک دیا جائے گا.

21. لائن گراف مقرر کریں

اب ہم لائن گراف مقرر کرتے ہیں. ہدایات، تاریخوں اور چوک حلقوں کے لئے، ہم 'مرکز' استعمال کرنا چاہتے ہیں. ڈیٹا لائن اور پس منظر کے لئے، ہم 'دائیں & amp؛ بائیں' استعمال کریں گے. اضافی ڈیٹا سیکشن میں ہم ہر قیمت کے لئے 'بائیں' کا استعمال کرنا چاہتے ہیں، ہر قدر کے لئے 'دائیں'، اور علیحدگی کی لائنوں کے لئے 'دائیں & amp؛ بائیں' کے لئے. CTA بٹن گروپ کے لئے 'سینٹر' مقرر کریں.

22. عمودی رکاوٹوں کو مقرر کریں

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

23. ہر اسکرین کے سائز کے لئے یہ کام کریں

آئیے دو بار آرٹ بورڈ ڈپلیکیٹ کریں، اور آئی فون 7 پلس اور ایک آئی فون SE پر سائز کے دوسرے کے سائز کو مقرر کریں. پلس ورژن پر، آپ کو اضافی معلومات اور سی ٹی اے کے بٹن کے آخری سیل کے درمیان فرق کو کم کرنے اور سیلز گروپ کو منتخب کرکے 195 سے 225 تک اس کی اونچائی میں اضافہ کرنے کی ضرورت ہوگی. SE ورژن پر آپ دیکھیں گے کہ معلومات کے خلیات بہاؤ CTA بٹن، لہذا ہمیں سیلز گروپ کو منتخب کرنا اور اس کی اونچائی 150 تک کم کرنا ہے.

24. سب کچھ

ارے، مبارک ہو! ہم نے Figma میں پوری ایپ کی سکرین کو مکمل کیا ہے. اب کے لئے صرف ہر چیز کی جانچ پڑتال کی جاتی ہے، اور آپ واپس بیٹھ سکتے ہیں اور ایک ماہر کی طرح محسوس کر سکتے ہیں.

یہ مضمون اصل میں شامل کیا گیا تھا نیٹ میگزین مسئلہ 288؛ اسے یہاں خریدیں.

متعلقہ مضامین:

نئی Behance تصور ایک قاتل اپلی کیشن کی طرح لگتا ہے
سماجی اثرات کے لئے ڈیزائن
ACE ٹیک ملازمتوں کے انٹرویو کے لئے 8 تجاویز