روابط الجهاز
تتمثل إحدى أفضل ميزات Figma في أنها تتيح لك نقل التصميمات التي تقوم بإنشائها بها بسرعة إلى رمز. إذا كنت مطور تطبيق أو تعمل مع مصممين ، فهذه مهارة قيّمة للتعلم. بمساعدة الأدوات المضمنة والعديد من المكونات الإضافية ، تسمح لك Figma بتصدير تصميمك إلى منصات مختلفة.
إذا كنت تريد معرفة المزيد حول تحويل تصميم Figma الخاص بك إلى رمز ، فقد وصلت إلى المكان الصحيح. في هذه المقالة ، سنناقش كيفية تصدير الكود في Figma والأدوات التي ستحتاج إلى استخدامها.
كيفية تصدير الكود في Figma على جهاز كمبيوتر يعمل بنظام Windows
إذا كنت من مستخدمي Windows وترغب في تصدير رمز في Figma ، فسيسعدك معرفة أنه يمكنك استخدام العديد من الخيارات.
فحص فيجما
إحدى الطرق التي يمكنك استخدامها لتصدير الكود في Figma هي Figma Inspect. تتيح لك هذه الميزة تحويل تصميماتك بسهولة إلى Android أو iOS أو رمز الويب. نظرًا لأنه مدمج ، فلن تضطر إلى تثبيت أي مكونات إضافية أو تطبيقات تابعة لجهات خارجية.
إليك كيفية استخدامه:
- حدد العناصر التي تهتم بها وانتقل إلى علامة التبويب فحص.
- ضمن قسم الرمز ، حدد الرمز الذي تريد تصديره (CSS للويب أو Swift لنظام iOS أو XML لنظام Android).
ستنشئ الأداة الرمز بناءً على الخيار الذي اخترته ، وبعد ذلك يمكنك تصديره. على الرغم من أن هذه أداة رائعة ، إلا أن لها بعض القيود. وبالتحديد ، لا يمكنك تصدير SVG إلى HTML. لذلك ، ستحتاج إلى استخدام مكون إضافي.
ملحقات فيجما
يضم Figma مئات الإضافات المفيدة. سنذكر القليل الذي يمكنك استخدامه لتصدير تصميمك إلى HTML.
Figma إلى HTML
ال توصيل في تمكنك من تحويل تصميمك إلى HTML أو CSS ، حسب احتياجاتك. اتبع الخطوات أدناه لتثبيت المكون الإضافي وكود التصدير:
- قم بالوصول إلى القائمة الرئيسية بالضغط على الرمز الموجود في الزاوية العلوية اليسرى.
- اضغط على الإضافات.
- اضغط على استعراض الإضافات في المجتمع.
- اكتب Figma إلى HTML وحدد الإضافات في الأعلى.
- اضغط على تثبيت.
- ارجع إلى التصميم الخاص بك وحدد العناصر المطلوبة.
- ارجع إلى القائمة الرئيسية ، وحدد الإضافات ، ثم حدد Figma to HTML.
- اختر HTML أو CSS.
- اضغط على نسخ أو تنزيل ، حسب احتياجاتك.
الأنيما ل فيجما
مكون إضافي مفيد آخر هو Anima for Figma. باستخدام هذا المكون الإضافي ، يمكنك تحويل تصميمك إلى HTML و CSS و React و Vue. اتبع هذه الخطوات لاستخدام البرنامج المساعد:
- افتح القائمة الرئيسية عن طريق تحديد الرمز العلوي الأيسر.
- اضغط على الإضافات.
- حدد استعراض المكونات الإضافية في المجتمع.
- اكتب Anima for Figma.
- اضغط على تثبيت.
- حدد العناصر التي تريد تصديرها.
- افتح القائمة الرئيسية ، واضغط على الإضافات ، واختر Anima for Figma. قم بالتسجيل إذا لم يكن لديك حساب.
- اختر نوع الرمز واضغط على رمز التصدير.
كيفية تصدير الكود في Figma على جهاز Mac
يمكن تصدير تصميمك إلى رمز على جهاز Mac بعدة طرق.
فحص فيجما
تتيح لك هذه الأداة المدمجة فحص وتصدير الكود والقيم الأخرى لتصميماتك. باستخدام Figma Inspect ، يمكنك الاختيار من بين ثلاثة خيارات للتعليمات البرمجية: Android أو iOS أو Web (CSS فقط).
اتبع الخطوات أدناه لاستخدام Figma Inspect على جهاز Mac:
- حدد العناصر التي تريد تصديرها.
- افتح علامة التبويب فحص على اليمين.
- اختر من بين CSS أو iOS أو Android.
- انسخ الكود الخاص بك.
إذا كنت مهتمًا فقط بـ CSS و iOS و Android ، فهذه أداة ممتازة للاستخدام. ومع ذلك ، إذا كنت تريد تصدير تصميمك إلى HTML ، فستحتاج إلى استخدام طريقة مختلفة.
ملحقات فيجما
إذا كنت ترغب في تحويل تصميماتك إلى HTML ، فإن Figma تقدم العشرات من المكونات الإضافية التي تخدم هذا الغرض. عملية التثبيت بسيطة. سنقوم بإدراج عدد قليل من أشهرها.
Figma إلى HTML
هذه توصيل في يسمح لك بتحويل تصميمك إلى CSS أو HTML. إليك كيفية تثبيته:
- حدد الرمز العلوي الأيسر لفتح القائمة الرئيسية.
- اضغط على الإضافات.
- حدد استعراض المكونات الإضافية في المجتمع.
- اكتب Figma إلى HTML في شريط البحث وحدد الإضافات في الأعلى.
- اضغط على تثبيت.
- ارجع إلى تصميمك وحدد العناصر التي تريد تصديرها.
- افتح القائمة الرئيسية ، وحدد الإضافات ، ثم حدد Figma to HTML.
- حدد HTML أو CSS.
- اضغط على نسخ أو تنزيل.
Figma إلى Code
مع هذا توصيل في ، يمكنك تحويل تصميم Figma الخاص بك إلى HTML أو Tailwind أو Flutter أو Swift UI. اتبع الخطوات أدناه لتثبيته واستخدامه:
- اضغط على الأيقونة العلوية اليسرى للوصول إلى القائمة الرئيسية.
- حدد الإضافات.
- اضغط على استعراض الإضافات في المجتمع.
- اكتب Figma to Code في شريط البحث واختر Plugins في الأعلى للحصول على النتائج ذات الصلة.
- اضغط على تثبيت.
- انتقل إلى التصميم الخاص بك وحدد العناصر المطلوبة.
- قم بالوصول إلى القائمة الرئيسية مرة أخرى ، وحدد الإضافات ، ثم حدد Figma to Code.
- حدد الرمز المطلوب.
- اضغط على نسخ إلى الحافظة.
هل يمكنني تصدير كود في Figma على iPhone؟
كان تطبيق Figma iPhone الجديد متاحًا فقط كإصدار تجريبي من خلال رحلة تجريبية لأول 10000 جهاز iPhone ، لكن الشركة تذكر أن الطرح الكامل قريبًا. يتيح لك التطبيق تصفح تصميماتك والوصول إليها وتتبع التغييرات الحية على جهاز iPhone الخاص بك أثناء تحرير التصميم على جهاز الكمبيوتر الخاص بك.
في ذلك الوقت ، لا يمكن تعديل التصميمات من خلال تطبيق iPhone ، مما يعني أنه لا توجد طريقة لتصدير التعليمات البرمجية من خلاله.
تقدم Figma أيضًا ملف مرآة فيجما التطبيق في متجر التطبيقات. يمكّنك هذا التطبيق من عكس تصميماتك على أي جهاز iOS دون الاتصال بنفس الشبكة. بهذه الطريقة ، يمكنك التحقق من مظهر التصميم الخاص بك على جهاز معين (في هذه الحالة ، iPhone) وتتبع التغييرات. على الرغم من أن التطبيق مفيد ، إلا أنه لا يسمح لك بتصدير الرمز على جهاز iPhone الخاص بك. لذلك ، سيتعين عليك الاستيلاء على جهاز الكمبيوتر الخاص بك.
يمكنك أيضًا الوصول إلى تصميماتك من خلال متصفحك. ومع ذلك ، ستظل قادرًا فقط على عرض تصميمك وتتبع التغييرات المباشرة.
هل يمكنني تصدير كود في Figma على جهاز iPad؟
للأسف ، لا يمكن تصدير رمز في Figma إذا كنت تستخدم جهاز iPad. تعمل Figma على تطبيق الجوال ، وهناك إصدار تجريبي ، لكنه لم يكن متاحًا للأجهزة اللوحية ، فقط لأجهزة iPhone و Android.
تطبيق Figma Mirror متاح على أجهزة iPad. يتيح لك التطبيق تتبع التغييرات التي تجريها على تصميمك عبر الكمبيوتر والتحقق من شكلها على شاشة iPad. للأسف ، خيار تصدير الرمز داخل التطبيق غير متاح.
إذا كنت لا ترغب في تثبيت التطبيق ، يمكنك الوصول إلى Figma من خلال متصفحك وتتبع التغييرات على التصميم. لكن تصدير الكود في Figma ممكن فقط على جهاز كمبيوتر.
هل يمكنني تصدير كود في Figma على Android
تعمل Figma حاليًا على تطبيق Android وتقدم إصدارًا تجريبيًا لـ 10000 هاتف يعمل بنظام Android. يمكنك أن تصبح مختبِرًا عن طريق تنزيل التطبيق من ملف متجر Play والوصول إلى هذا حلقة الوصل . يمكنك تصفح وعرض ومشاركة تصميماتك وتتبع التغييرات داخل التطبيق حتى عندما لا تكون بالقرب من جهاز الكمبيوتر الخاص بك.
على الرغم من أن التطبيق مفيد للعديد من الأغراض ، إلا أنه لا يمكّنك من تصدير الرمز في الوقت الحالي.
ال مرآة فيجما التطبيق متاح أيضًا لنظام Android. الغرض الرئيسي منه هو تتبع التغييرات التي تجريها على تصميماتك على جهاز الكمبيوتر الخاص بك والتأكد من أنها تبدو جيدة عبر جميع أجهزة Android. خيار تصدير الرمز غير متاح.
يمكنك أيضًا استخدام Figma داخل متصفحك إذا كنت لا تريد تثبيت التطبيق. ومع ذلك ، ما زلت غير قادر على تصدير الشفرة. لذلك ، سيتعين عليك استخدام جهاز الكمبيوتر الخاص بك.
كيفية البحث عن رسائل البريد الإلكتروني غير المقروءة في تطبيق gmail
أسئلة وأجوبة إضافية
كيف أقوم بتصدير الألوان من Figma إلى Xcode؟
لسوء الحظ ، لا يمكن تصدير الألوان من Figma إلى Xcode لأن Figma لا يدعمها. ولكن ، هناك حل بديل يمكنك استخدامه يسمى تصدير فيجما . اتبع الخطوات أدناه لاستخدامه:
1. إذا لم تكن قد قمت بذلك بالفعل ، فقم بتثبيت تصدير فيجما .
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 إلى HTML في شريط البحث وتأكد من تحديد الإضافات في الأعلى.
5. حدد تثبيت.
6. ارجع إلى تصميمك وحدد العناصر التي تريد تحويلها إلى HTML.
7. اذهب إلى القائمة الرئيسية ، وحدد الإضافات ، وافتح Figma إلى HTML.
8. اضغط على HTML.
9. اختر بين نسخ أو تنزيل.
احصل على الكود الذي تحتاجه
تسمح لك Figma بتصدير أنواع مختلفة من الأكواد باستخدام عدة طرق. يمكنك استخدام أدوات مدمجة أو تنزيل مكونات إضافية مختلفة ، حسب احتياجاتك. في الوقت الحالي ، لا يمكن تصدير الرموز إلا عبر أجهزة الكمبيوتر. أصدرت Figma الإصدار التجريبي من تطبيق الجوّال (يقتصر على 10000 جهاز iPhone أو Android) ، لكنها لا تحتوي على هذا الخيار. لحسن الحظ ، فإن تصدير التعليمات البرمجية على أجهزة الكمبيوتر سريع وسهل.
كيف تقوم بتصدير الكود في Figma؟ هل تستخدم إحدى الطرق التي ذكرناها في هذا المقال؟ تقول لنا في قسم التعليقات أدناه.
