تتمثل إحدى أفضل ميزات Figma في أنها تتيح لك نقل التصميمات التي تقوم بإنشائها بها بسرعة إلى رمز. إذا كنت مطور تطبيق أو تعمل مع مصممين ، فهذه مهارة قيّمة للتعلم. بمساعدة الأدوات المضمنة والعديد من المكونات الإضافية ، تسمح لك Figma بتصدير تصميمك إلى منصات مختلفة.
إذا كنت تريد معرفة المزيد حول تحويل تصميم Figma الخاص بك إلى رمز ، فقد وصلت إلى المكان الصحيح. في هذه المقالة ، سنناقش كيفية تصدير الكود في Figma والأدوات التي ستحتاج إلى استخدامها.
كيفية تصدير التعليمات البرمجية في Figma على جهاز كمبيوتر يعمل بنظام Windows
إذا كنت من مستخدمي Windows وترغب في تصدير رمز في Figma ، فسيسعدك معرفة أنه يمكنك استخدام العديد من الخيارات.
فحص Figma
إحدى الطرق التي يمكنك استخدامها لتصدير الكود في Figma هي Figma Inspect. تتيح لك هذه الميزة تحويل تصميماتك بسهولة إلى Android أو iOS أو رمز الويب. نظرًا لأنه مدمج ، فلن تضطر إلى تثبيت أي مكونات إضافية أو تطبيقات تابعة لجهات خارجية.
وإليك كيفية استخدامه:
ستنشئ الأداة الرمز بناءً على الخيار الذي اخترته ، وبعد ذلك يمكنك تصديره. على الرغم من أن هذه أداة رائعة ، إلا أن لها بعض القيود. وبالتحديد ، لا يمكنك تصدير SVG إلى HTML. لذلك ، ستحتاج إلى استخدام مكون إضافي.
ملحقات Figma
يضم Figma مئات الإضافات المفيدة. سنذكر القليل الذي يمكنك استخدامه لتصدير تصميمك إلى HTML.
تحويل Figma إلى HTML
يمكّنك المكون الإضافي من تحويل تصميمك إلى HTML أو CSS ، حسب احتياجاتك. اتبع الخطوات أدناه لتثبيت المكون الإضافي وكود التصدير:
الأنيما لـ Figma
مكون إضافي مفيد آخر هو Anima for Figma. باستخدام هذا المكون الإضافي ، يمكنك تحويل تصميمك إلى HTML و CSS و React و Vue. اتبع هذه الخطوات لاستخدام البرنامج المساعد:
كيفية تصدير التعليمات البرمجية في Figma على جهاز Mac
يمكن تصدير تصميمك إلى رمز على جهاز Mac بعدة طرق.
فحص Figma
تتيح لك هذه الأداة المدمجة فحص وتصدير الكود والقيم الأخرى لتصميماتك. باستخدام Figma Inspect ، يمكنك الاختيار من بين ثلاثة خيارات للتعليمات البرمجية:Android أو iOS أو Web (CSS فقط).
اتبع الخطوات أدناه لاستخدام Figma Inspect على جهاز Mac:
إذا كنت مهتمًا فقط بـ CSS و iOS و Android ، فهذه أداة ممتازة للاستخدام. ومع ذلك ، إذا كنت تريد تصدير تصميمك إلى HTML ، فستحتاج إلى استخدام طريقة مختلفة.
ملحقات Figma
إذا كنت ترغب في تحويل تصميماتك إلى HTML ، فإن Figma تقدم العشرات من المكونات الإضافية التي تخدم هذا الغرض. عملية التثبيت بسيطة. سنقوم بإدراج عدد قليل من أشهرها.
تحويل Figma إلى HTML
يتيح لك هذا المكون الإضافي تحويل تصميمك إلى CSS أو HTML. وإليك كيفية تثبيته:
Figma to Code
باستخدام هذا المكون الإضافي ، يمكنك تحويل تصميم Figma الخاص بك إلى HTML أو Tailwind أو Flutter أو Swift UI. اتبع الخطوات أدناه لتثبيته واستخدامه:
هل يمكنني تصدير كود في Figma على iPhone؟
كان تطبيق Figma iPhone الجديد متاحًا فقط كإصدار تجريبي من خلال Testflight لأول 10000 جهاز iPhone ، لكن الشركة تذكر أن الإصدار الكامل قريبًا. يتيح لك التطبيق تصفح تصميماتك والوصول إليها وتتبع التغييرات المباشرة على iPhone أثناء تعديل التصميم على جهاز الكمبيوتر.
في ذلك الوقت ، لا يمكن تعديل التصميمات من خلال تطبيق iPhone ، مما يعني أنه لا توجد طريقة لتصدير الكود من خلاله.
تقدم Figma أيضًا تطبيق Figma Mirror على متجر التطبيقات. يمكّنك هذا التطبيق من عكس تصميماتك على أي جهاز iOS دون الاتصال بنفس الشبكة. بهذه الطريقة ، يمكنك التحقق من مظهر التصميم الخاص بك على جهاز معين (في هذه الحالة ، iPhone) وتتبع التغييرات. على الرغم من أن التطبيق مفيد ، إلا أنه لا يسمح لك بتصدير الرمز على جهاز iPhone الخاص بك. لذلك ، سيكون عليك انتزاع جهاز الكمبيوتر الخاص بك.
يمكنك أيضًا الوصول إلى تصميماتك من خلال متصفحك. ومع ذلك ، ستظل قادرًا فقط على عرض تصميمك وتتبع التغييرات المباشرة.
هل يمكنني تصدير كود في Figma على iPad؟
للأسف ، لا يمكن تصدير رمز في Figma إذا كنت تستخدم جهاز iPad. تعمل Figma على تطبيق الجوال ، وهناك إصدار تجريبي ، لكنه لم يكن متاحًا للأجهزة اللوحية ، فقط لأجهزة iPhone و Android.
تطبيق Figma Mirror متاح على أجهزة iPad. يتيح لك التطبيق تتبع التغييرات التي تجريها على تصميمك عبر الكمبيوتر والتحقق من مظهرها على شاشة iPad. للأسف ، خيار تصدير الرمز داخل التطبيق غير متاح.
إذا كنت لا ترغب في تثبيت التطبيق ، يمكنك الوصول إلى Figma من خلال متصفحك وتتبع التغييرات على التصميم. لكن تصدير الكود في Figma ممكن فقط على الكمبيوتر.
هل يمكنني تصدير كود في Figma على Android
تعمل Figma حاليًا على تطبيق Android وتقدم إصدارًا تجريبيًا لـ 10000 هاتف يعمل بنظام Android. يمكنك أن تصبح مختبِرًا عن طريق تنزيل التطبيق من متجر Play والوصول إلى هذا الرابط. يمكنك تصفح وعرض ومشاركة تصميماتك وتتبع التغييرات داخل التطبيق حتى عندما لا تكون بالقرب من جهاز الكمبيوتر.
على الرغم من أن التطبيق مفيد للعديد من الأغراض ، إلا أنه لا يمكّنك من تصدير الرمز في الوقت الحالي.
تطبيق Figma Mirror متاح أيضًا لنظام Android. الغرض الرئيسي منه هو تتبع التغييرات التي تجريها على تصميماتك على جهاز الكمبيوتر الخاص بك والتأكد من أنها تبدو جيدة عبر جميع أجهزة Android. خيار تصدير الرمز غير متاح.
يمكنك أيضًا استخدام Figma داخل متصفحك إذا كنت لا تريد تثبيت التطبيق. ومع ذلك ، ما زلت غير قادر على تصدير الشفرة. لذلك ، سوف تضطر إلى استخدام جهاز الكمبيوتر الخاص بك.
أسئلة شائعة إضافية
كيف أقوم بتصدير الألوان من Figma إلى Xcode؟
لسوء الحظ ، لا يمكن تصدير الألوان من Figma إلى Xcode لأن Figma لا يدعمها. ولكن ، هناك حل بديل يمكنك استخدامه يسمى تصدير Figma. اتبع الخطوات أدناه لاستخدامه:
1. إذا لم تكن قد قمت بالفعل بتثبيت Figma Export.
2. افتح "Terminal.app."
3. افتح المجلد الذي يحتوي على ملف "figma-export".
4. إطلاق “figma-export”.
5. تصدير الألوان باستخدام "./figma-export colors -i figma-export.yaml".
كيف أقوم بتصدير كود HTML من Figma؟
كما ذكرنا سابقًا ، تتيح لك الأداة المدمجة التي تسمى Figma Inspect الحصول على CSS ، ولكن ليس HTML. إذا كنت بحاجة إلى رمز HTML ، فستحتاج إلى تثبيت مكون إضافي.
يتميز Figma بالعشرات من المكونات الإضافية التي تخدم هذا الغرض. توصيتنا هي Figma إلى HTML. وإليك كيفية استخدامه:
1. افتح القائمة الرئيسية. إنه رمز أعلى اليسار.
2. اضغط على "الإضافات"
3. حدد "تصفح المكونات الإضافية في المجتمع".
4. اكتب "Figma to HTML" في شريط البحث وتأكد من تحديد "الإضافات" في الأعلى.
5. حدد "تثبيت".
6. ارجع إلى تصميمك وحدد العناصر التي تريد تحويلها إلى HTML
7. اذهب إلى القائمة الرئيسية وحدد "الإضافات" وافتح "Figma to HTML".
8. اضغط على HTML
9. اختر بين "نسخ" أو "تنزيل".
احصل على الرمز الذي تحتاجه
تسمح لك Figma بتصدير أنواع مختلفة من الرموز باستخدام عدة طرق. يمكنك استخدام أدوات مدمجة أو تنزيل مكونات إضافية مختلفة ، حسب احتياجاتك. في الوقت الحالي ، لا يمكن تصدير الرموز إلا عبر أجهزة الكمبيوتر. أصدرت Figma الإصدار التجريبي من تطبيق الجوّال (يقتصر على 10000 جهاز iPhone أو Android) ، لكنها لا تحتوي على هذا الخيار. لحسن الحظ ، فإن تصدير التعليمات البرمجية على أجهزة الكمبيوتر أمر سريع وسهل.
كيف تقوم بتصدير الكود في Figma؟ هل تستخدم إحدى الطرق التي ذكرناها في هذا المقال؟ أخبرنا في قسم التعليقات أدناه.
