فگما میں کوڈ کیسے برآمد کریں۔

ڈیوائس کے لنکس

• انڈروئد
• آئی فون
• میک
• ونڈوز
• ڈیوائس غائب ہے؟

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

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

ونڈوز پی سی پر فگما میں کوڈ کیسے برآمد کریں۔

اگر آپ ونڈوز کے صارف ہیں اور فگما میں کوڈ برآمد کرنا چاہتے ہیں، تو آپ کو یہ جان کر خوشی ہوگی کہ آپ متعدد اختیارات استعمال کر سکتے ہیں۔

فگما معائنہ

Figma میں کوڈ برآمد کرنے کے لیے آپ جو طریقہ استعمال کر سکتے ہیں ان میں سے ایک Figma Inspect ہے۔ یہ خصوصیت آپ کو آسانی سے اپنے ڈیزائن کو Android، iOS، یا ویب کوڈ میں تبدیل کرنے کی اجازت دیتی ہے۔ چونکہ یہ بلٹ ان ہے، آپ کو کوئی پلگ ان یا تھرڈ پارٹی ایپس انسٹال کرنے کی ضرورت نہیں ہے۔

اسے استعمال کرنے کا طریقہ یہاں ہے:

1. ان عناصر کو منتخب کریں جن میں آپ دلچسپی رکھتے ہیں اور انسپیکٹ ٹیب پر جائیں۔
2. کوڈ سیکشن کے تحت، وہ کوڈ منتخب کریں جسے آپ ایکسپورٹ کرنا چاہتے ہیں (ویب کے لیے CSS، iOS کے لیے Swift، یا Android کے لیے XML)۔

ٹول آپ کے منتخب کردہ آپشن کی بنیاد پر کوڈ تیار کرے گا، اور پھر آپ اسے ایکسپورٹ کر سکتے ہیں۔ اگرچہ یہ ایک بہترین ٹول ہے، لیکن اس کی کچھ حدود ہیں۔ یعنی، آپ SVG کو HTML میں ایکسپورٹ نہیں کر سکتے۔ اس کے لیے، آپ کو ایک پلگ ان استعمال کرنے کی ضرورت ہوگی۔

فگما پلگ انز

فگما میں سینکڑوں مفید پلگ ان شامل ہیں۔ ہم چند ایک کا ذکر کریں گے جنہیں آپ اپنے ڈیزائن کو HTML میں ایکسپورٹ کرنے کے لیے استعمال کر سکتے ہیں۔

فگما سے HTML

دی رابطہ بحال کرو آپ کو آپ کی ضروریات کے مطابق اپنے ڈیزائن کو HTML یا CSS میں تبدیل کرنے کے قابل بناتا ہے۔ پلگ ان انسٹال کرنے اور کوڈ برآمد کرنے کے لیے درج ذیل مراحل پر عمل کریں:

1. اوپری بائیں کونے میں آئیکن کو دبا کر مین مینو تک رسائی حاصل کریں۔
   
2. پلگ ان دبائیں۔
   
3. کمیونٹی میں براؤز پلگ انز کو دبائیں۔
   
4. HTML میں فگما ٹائپ کریں اور اوپر پلگ انز کو منتخب کریں۔
   
5. انسٹال کو دبائیں۔
   
6. اپنے ڈیزائن پر واپس جائیں اور مطلوبہ عناصر کو منتخب کریں۔
7. مین مینو پر واپس جائیں، پلگ انز کو منتخب کریں، اور پھر فگما سے HTML کو منتخب کریں۔
   
8. HTML یا CSS کا انتخاب کریں۔
   
9. اپنی ضروریات کے مطابق کاپی یا ڈاؤن لوڈ کو دبائیں۔
   

فگما کے لیے انیما

ایک اور مددگار پلگ ان Figma کے لیے Anima ہے۔ اس پلگ ان کے ساتھ، آپ اپنے ڈیزائن کو HTML، CSS، React اور Vue میں تبدیل کر سکتے ہیں۔ پلگ ان استعمال کرنے کے لیے ان اقدامات پر عمل کریں:

1. اوپری بائیں آئیکن کو منتخب کرکے مین مینو کو کھولیں۔
   
2. پلگ ان دبائیں۔
   
3. کمیونٹی میں براؤز پلگ انز کو منتخب کریں۔
   
4. فگما کے لیے Anima ٹائپ کریں۔
   
5. انسٹال کو دبائیں۔
   
6. وہ عناصر منتخب کریں جنہیں آپ برآمد کرنا چاہتے ہیں۔
7. مین مینو کھولیں، پلگ ان دبائیں، اور فگما کے لیے انیما کو منتخب کریں۔ اگر آپ کے پاس اکاؤنٹ نہیں ہے تو سائن اپ کریں۔
   
8. کوڈ کی قسم کا انتخاب کریں اور ایکسپورٹ کوڈ کو دبائیں۔
   

میک پر فگما میں کوڈ کیسے برآمد کریں۔

اپنے ڈیزائن کو میک ڈیوائس پر کوڈ میں ایکسپورٹ کرنا کئی طریقوں سے کیا جا سکتا ہے۔

فگما معائنہ

یہ بلٹ ان ٹول آپ کو اپنے ڈیزائن کے لیے کوڈ اور دیگر اقدار کا معائنہ اور برآمد کرنے کی اجازت دیتا ہے۔ Figma Inspect کے ساتھ، آپ کوڈ کے تین اختیارات میں سے انتخاب کر سکتے ہیں: Android، iOS، یا ویب (صرف CSS)۔

میک پر فگما انسپیکٹ استعمال کرنے کے لیے درج ذیل مراحل پر عمل کریں:

1. وہ عناصر منتخب کریں جنہیں آپ برآمد کرنا چاہتے ہیں۔
2. دائیں طرف معائنہ ٹیب کو کھولیں۔
3. CSS، iOS، یا Android میں سے انتخاب کریں۔
4. اپنا کوڈ کاپی کریں۔

اگر آپ صرف CSS، iOS اور Android میں دلچسپی رکھتے ہیں، تو یہ استعمال کرنے کا ایک بہترین ٹول ہے۔ تاہم، اگر آپ اپنے ڈیزائن کو HTML میں برآمد کرنا چاہتے ہیں، تو آپ کو ایک مختلف طریقہ استعمال کرنے کی ضرورت ہوگی۔

فگما پلگ انز

اگر آپ اپنے ڈیزائن کو HTML میں تبدیل کرنا چاہتے ہیں تو، Figma درجنوں پلگ ان پیش کرتا ہے جو اس مقصد کو پورا کرتے ہیں۔ تنصیب کا عمل آسان ہے۔ ہم چند سب سے زیادہ مقبول کی فہرست بنائیں گے۔

فگما سے HTML

یہ رابطہ بحال کرو آپ کو اپنے ڈیزائن کو CSS یا HTML میں تبدیل کرنے کی اجازت دیتا ہے۔ اسے انسٹال کرنے کا طریقہ یہاں ہے:

1. مین مینو کو کھولنے کے لیے اوپری بائیں آئیکن کو منتخب کریں۔
   
2. پلگ ان دبائیں۔
   
3. کمیونٹی میں براؤز پلگ انز کو منتخب کریں۔
   
4. سرچ بار میں فگما سے HTML ٹائپ کریں اور اوپر پلگ انز کو منتخب کریں۔
   
5. انسٹال کو دبائیں۔
   
6. اپنے ڈیزائن پر واپس جائیں اور وہ عناصر منتخب کریں جنہیں آپ برآمد کرنا چاہتے ہیں۔
7. مین مینو کو کھولیں، پلگ انز کو منتخب کریں، اور پھر فگما سے HTML کو منتخب کریں۔
   
8. HTML یا CSS کو منتخب کریں۔
   
9. کاپی یا ڈاؤن لوڈ کو دبائیں۔
   

فگما ٹو کوڈ

اس کے ساتھ رابطہ بحال کرو ، آپ اپنے فگما ڈیزائن کو HTML، Tailwind، Flutter، یا Swift UI میں تبدیل کر سکتے ہیں۔ اسے انسٹال کرنے اور استعمال کرنے کے لیے درج ذیل مراحل پر عمل کریں:

1. مین مینو تک رسائی کے لیے اوپری بائیں آئیکن کو دبائیں۔
   
2. پلگ انز کو منتخب کریں۔
   
3. کمیونٹی میں براؤز پلگ انز کو دبائیں۔
   
4. سرچ بار میں Figma to Code ٹائپ کریں اور متعلقہ نتائج حاصل کرنے کے لیے اوپر پلگ انز کا انتخاب کریں۔
   
5. انسٹال کو دبائیں۔
   
6. اپنے ڈیزائن پر جائیں اور مطلوبہ عناصر کو منتخب کریں۔
7. مین مینو تک دوبارہ رسائی حاصل کریں، پلگ انز کو منتخب کریں، اور پھر فگما ٹو کوڈ کو منتخب کریں۔
   
8. مطلوبہ کوڈ منتخب کریں۔
9. دبائیں کاپی کلپ بورڈ پر۔

کیا میں آئی فون پر فگما میں کوڈ ایکسپورٹ کر سکتا ہوں؟

نئی فگما آئی فون ایپ صرف بیٹا ورژن کے طور پر دستیاب تھی۔ آزمائشی پرواز پہلے 10,000 آئی فونز کے لیے، لیکن کمپنی کا کہنا ہے کہ مکمل رول آؤٹ جلد ہی آ رہا ہے۔ ایپ آپ کو اپنے ڈیزائن کو براؤز کرنے اور ان تک رسائی حاصل کرنے اور اپنے کمپیوٹر پر ڈیزائن میں ترمیم کرتے ہوئے اپنے آئی فون پر لائیو تبدیلیوں کو ٹریک کرنے کی اجازت دیتی ہے۔

اس وقت، آئی فون ایپ کے ذریعے ڈیزائن میں ترمیم کرنا ممکن نہیں ہے، جس کا مطلب ہے کہ اس کے ذریعے کوڈ برآمد کرنے کا کوئی طریقہ نہیں ہے۔

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

آپ اپنے براؤزر کے ذریعے بھی اپنے ڈیزائن تک رسائی حاصل کر سکتے ہیں۔ تاہم، آپ اب بھی صرف اپنے ڈیزائن کو دیکھنے اور لائیو تبدیلیوں کو ٹریک کرنے کے قابل ہوں گے۔

کیا میں آئی پیڈ پر فگما میں کوڈ ایکسپورٹ کرسکتا ہوں؟

بدقسمتی سے، اگر آپ آئی پیڈ استعمال کر رہے ہیں تو فگما میں کوڈ برآمد کرنا ممکن نہیں ہے۔ فگما موبائل ایپ پر کام کر رہی ہے، اور اس کا بیٹا ورژن ہے، لیکن یہ ٹیبلیٹس کے لیے دستیاب نہیں تھا، صرف iPhones اور Androids کے لیے۔

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

اگر آپ ایپ کو انسٹال نہیں کرنا چاہتے تو آپ اپنے براؤزر کے ذریعے فگما تک رسائی حاصل کر سکتے ہیں اور ڈیزائن میں ہونے والی تبدیلیوں کو ٹریک کر سکتے ہیں۔ لیکن، فگما میں کوڈ برآمد کرنا صرف کمپیوٹر پر ہی ممکن ہے۔

کیا میں اینڈرائیڈ پر فگما میں کوڈ ایکسپورٹ کر سکتا ہوں؟

فگما فی الحال اینڈرائیڈ ایپ پر کام کر رہی ہے اور 10,000 اینڈرائیڈ فونز کے لیے بیٹا ورژن پیش کرتی ہے۔ آپ سے ایپ ڈاؤن لوڈ کرکے ٹیسٹر بن سکتے ہیں۔ پلےسٹور اور اس تک رسائی حاصل کرنا لنک . آپ اپنے ڈیزائن کو براؤز کر سکتے ہیں، دیکھ سکتے ہیں اور ان کا اشتراک کر سکتے ہیں اور ایپ میں تبدیلیوں کو ٹریک کر سکتے ہیں یہاں تک کہ جب آپ اپنے کمپیوٹر کے قریب نہ ہوں۔

اگرچہ ایپ بہت سے مقاصد کے لیے مفید ہے، لیکن یہ آپ کو ابھی کے لیے کوڈ برآمد کرنے کے قابل نہیں بناتی ہے۔

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

اگر آپ ایپ کو انسٹال نہیں کرنا چاہتے ہیں تو آپ اپنے براؤزر میں فگما بھی استعمال کر سکتے ہیں۔ تاہم، آپ اب بھی کوڈ برآمد نہیں کر سکیں گے۔ اس کے لیے، آپ کو اپنا کمپیوٹر استعمال کرنا ہوگا۔

کس طرح کسی کو فیس بک پر کسی البم میں ٹیگ کرنا ہے

اضافی سوالات

میں فگما سے ایکس کوڈ میں رنگ کیسے برآمد کروں؟

بدقسمتی سے، رنگوں کو فگما سے ایکس کوڈ میں ایکسپورٹ کرنا ممکن نہیں ہے کیونکہ فگما اس کی حمایت نہیں کرتا ہے۔ لیکن، ایک حل ہے جسے آپ استعمال کر سکتے ہیں۔ فگما ایکسپورٹ . اسے استعمال کرنے کے لیے درج ذیل مراحل پر عمل کریں:

1. اگر آپ کے پاس پہلے سے نہیں ہے تو انسٹال کریں۔ فگما ایکسپورٹ .

2. Terminal.app کھولیں۔

3. figma-export فائل کے ساتھ فولڈر کھولیں۔

4. فگما ایکسپورٹ شروع کریں۔

5. ./figma-export colors -i figma-export.yaml کا استعمال کرتے ہوئے رنگ برآمد کریں۔

میں فگما سے HTML کوڈ کیسے برآمد کروں؟

جیسا کہ پہلے ذکر کیا گیا ہے، فگما انسپیکٹ نامی بلٹ ان ٹول آپ کو CSS حاصل کرنے کی اجازت دیتا ہے، لیکن HTML نہیں۔ اگر آپ کو HTML کوڈ کی ضرورت ہے، تو آپ کو ایک پلگ ان انسٹال کرنے کی ضرورت ہوگی۔

فگما میں درجنوں پلگ ان شامل ہیں جو اس مقصد کو پورا کرتے ہیں۔ ہماری سفارش ہے۔ فگما سے HTML . اسے استعمال کرنے کا طریقہ یہاں ہے:

1. مین مینو کھولیں۔ یہ اوپری بائیں آئیکن ہے۔

2. پلگ ان دبائیں۔

3. کمیونٹی میں براؤز پلگ انز کو منتخب کریں۔

4. سرچ بار میں Figma سے HTML ٹائپ کریں اور یقینی بنائیں کہ پلگ ان سب سے اوپر منتخب ہیں۔

5. انسٹال کو منتخب کریں۔

6. اپنے ڈیزائن پر واپس جائیں اور وہ عناصر منتخب کریں جنہیں آپ HTML میں تبدیل کرنا چاہتے ہیں۔

7. مین مینو پر جائیں، پلگ انز کو منتخب کریں، اور Figma کو HTML میں کھولیں۔

8. ایچ ٹی ایم ایل دبائیں۔

9. کاپی یا ڈاؤن لوڈ کے درمیان انتخاب کریں۔

آپ کو مطلوبہ کوڈ حاصل کریں۔

فگما آپ کو کئی طریقوں کا استعمال کرتے ہوئے مختلف قسم کے کوڈز برآمد کرنے کی اجازت دیتا ہے۔ آپ اپنی ضروریات کے مطابق بلٹ ان ٹولز استعمال کرسکتے ہیں یا مختلف پلگ ان ڈاؤن لوڈ کرسکتے ہیں۔ ابھی کے لیے، کوڈز کو برآمد کرنا صرف کمپیوٹر کے ذریعے ہی ممکن ہے۔ فگما نے موبائل ایپ بیٹا ورژن جاری کیا (10,000 آئی فون یا اینڈرائیڈ ڈیوائسز تک محدود)، لیکن اس میں یہ آپشن نہیں ہے۔ خوش قسمتی سے، کمپیوٹرز پر کوڈ برآمد کرنا تیز اور آسان ہے۔

آپ فگما میں کوڈ کیسے برآمد کرتے ہیں؟ کیا آپ ان طریقوں میں سے ایک استعمال کرتے ہیں جن کا ہم نے اس مضمون میں ذکر کیا ہے؟ ذیل میں تبصرے کے سیکشن میں ہمیں بتائیں۔