إذا كنت تعمل مع التصميم الجرافيكي ، وربما كنت قد تأتي عبر الحاجة إلى تحويل واجهات والرسوم التوضيحية من فيغما إلى هتمل سفغ. هذا صحيح بشكل خاص إذا كنت بحاجة إلى تكييف التصميم لمواقع الويب وتطبيقات الهاتف المحمول. في هذه المقالة ، سنلقي نظرة على إرشادات مفصلة حول كيفية إجراء تحويل كامل ونقدم بعض النصائح والأمثلة المفيدة.
فيغما هي واحدة من الأدوات الأكثر شعبية لخلق تخطيطات واجهة والنماذج. يسمح للمصممين بالعمل على المشاريع عبر الإنترنت ومشاركتها مع الزملاء وتلقي التعليقات. ومع ذلك ، بعد أن يصبح التخطيط جاهزا ، يصبح من الضروري نقله إلى الكود. الشكل الأكثر عالمية لهذا هو هتمل سفغ ، كما هو مدعوم من قبل جميع المتصفحات الحديثة ويمكن وضعها في صفحة هتمل من أي موقع.
التحويل من فيغما إلى هتمل سفغ هو عملية تحويل الكائنات الرسومية ، وأنظمة الألوان ، والخطوط ، وعناصر التصميم الأخرى إلى التعليمات البرمجية التي يمكن تفسيرها وعرضها من قبل المتصفح.
إذا كنت معتادا على هتمل و كس ، ثم تحويل فيغما إلى هتمل سفغ سيكون أسهل بالنسبة لك. ومع ذلك ، هناك أيضا أدوات عبر الإنترنت تسمح لك بإكمال هذه المهمة حتى بدون معرفة مسبقة بهذه التقنيات. من المهم أن نفهم أن التحويل قد يستغرق بعض الوقت ، خاصة إذا كان لديك تخطيط معقد مع عدد كبير من العناصر. لكن الصبر والرعاية سيساعدونك على إكمال هذه العملية بنجاح والحصول على رمز جاهز يمكن استخدامه لإنشاء واجهة تطبيق ويب وظيفية وجذابة.
- كيفية تحويل فيغما إلى هتمل سفغ: تعليمات ونصائح مفيدة
- الخطوة 1: إعداد التصميم في فيجما
- الخطوة 2: تصدير التصميم من فيجما
- الخطوة 3: تحويل فيغما إلى هتمل سفغ
كيفية تحويل فيغما إلى هتمل سفغ: تعليمات ونصائح مفيدة
1. تصدير من فيجما:
الخطوة الأولى هي تصدير التصميم من فيجما. للقيام بذلك ، حدد الكائنات التي تريد تحويلها وحدد "تصدير" من قائمة "ملف". ثم حدد تنسيق تصدير سفغ وحفظ الملف على جهاز الكمبيوتر الخاص بك.
2. إنشاء ملف هتمل:
فتح محرر نصوص وإنشاء ملف جديد مع .أتش تي أم أل التمديد. أدخل الكود التالي:
تحويل فيغما إلى هتمل سفغ
4. إضافة أنماط المغلق:
إذا كنت ترغب في إضافة أنماط إلى سفغ ، يمكنك إنشاء كتلة نمط كس منفصلة في ملف هتمل أو استخدام ملف نمط خارجي. أدخل الكود التالي بعد :
5. فتح ملف هتمل في المتصفح:
احفظ ملف هتمل وافتحه في متصفح الويب. يجب أن ترى تصميم فيغما تحويلها في شكل سفغ.
6 مكافحة ناقلات الرسومات. العمل مع سفغ:
يمكنك تغيير الأحجام والألوان ومعلمات سفغ الأخرى باستخدام أنماط كس. للقيام بذلك ، ببساطة تغيير قيم الخصائص المقابلة في كتلة نمط كس أو ملف نمط خارجي.
في الختام ، تحويل فيغما إلى هتمل سفغ هو عملية بسيطة إلى حد ما لا تتطلب سوى بضع خطوات. بعد التعليمات والنصائح لدينا ، سوف تكون قادرة على إكمال هذه المهمة بنجاح وإنشاء موقع على شبكة الانترنت مع الرسومات المتجهة في شكل سفغ.
الخطوة 1: إعداد التصميم في فيجما
قبل البدء في تحويل فيغما إلى هتمل سفغ ، تحتاج إلى إعداد التصميم بشكل صحيح في فيغما. فيما يلي بعض الخطوات لمساعدتك على تحقيق ذلك:
1. إنشاء مشروع جديد: تسجيل الدخول إلى فيجما وإنشاء مشروع جديد. حدد أحجام قماش على أساس الجهاز الذي سيتم عرض الرسومات سفغ تحويلها على.
2. تحديد هيكل التصميم: كن واضحا في تحديد هيكل التصميم الخاص بك. تقسيمه إلى عدة كتل أو طبقات لجعله أسهل لتصدير كل عنصر في شكل سفغ في المستقبل.
3. إنشاء الرموز: استخدم الرموز في فيجما لإعادة استخدام عناصر التصميم الخاص بك وتحريرها بسهولة. الجمع بين عناصر مماثلة في الرموز حتى لا تكرار العمل عند التحويل إلى هتمل سفغ.
4. تأكد من أن: قبل التصدير ، تأكد من أن التصميم الخاص بك يلبي جميع المتطلبات ، سواء كان إنشاء طبقات منفصلة لكل عنصر ، أو التخصيص الصحيح للرموز أو القدرة على تحرير الأجزاء الفردية من التصميم.
باتباع هذه الخطوات ، سوف تكون على استعداد لتحويل التصميم الخاص بك من فيغما إلى هتمل سفغ وتوفير الوقت والجهد في الخطوات التالية.
الخطوة 2: تصدير التصميم من فيجما
بعد إنشاء تصميم في فيغما ، سوف تحتاج إلى تصديره إلى تنسيق يمكن تحويله إلى صفحة هتمل باستخدام رسومات سفغ. إليك كيفية القيام بذلك:
1. حدد العناصر المراد تصديرها:
أولا وقبل كل شيء ، حدد عناصر التصميم الخاص بك الذي تريد تصديره إلى تنسيق سفغ. يمكنك تحديد طبقات أو مجموعات أو كائنات فردية ، وتطبيق الإعدادات الضرورية ، مثل الأبعاد والدقة.
2. انقر فوق الزر "تصدير" :
في الزاوية اليمنى العليا من نافذة فيجما ستجد زر التصدير. انقر فوقه لفتح قائمة بها خيارات التصدير.
3. حدد تنسيق التصدير والخيارات:
في القائمة تصدير ، تتم مطالبتك بتحديد تنسيق التصدير. لإنشاء صفحة هتمل مع رسومات سفغ ، تحتاج إلى تحديد تنسيق "سفغ". بالإضافة إلى ذلك ، يمكنك تخصيص خيارات تصدير أخرى مثل الأبعاد والمقياس ومساحة اللون. تأكد من تعيين الإعدادات الضرورية وانقر فوق الزر "تصدير".
4. احفظ الملف على جهاز الكمبيوتر الخاص بك:
- بعد النقر على زر" تصدير " ، سوف فيغما يطالبك لحفظ الملف مع تصميم تصديرها. حدد الموقع على جهاز الكمبيوتر الخاص بك حيث تريد حفظ الملف وانقر على زر حفظ.
- 5. لقد انتهى الأمر! وقد تم تصدير التصميم الخاص بك إلى شكل سفغ:
- الآن لديك ملف سفغ الذي يحتوي على التصميم الخاص بك من فيغما. سيكون هذا الملف أساسا لمزيد من التحويل إلى صفحة هتمل مع محتوى رسومي سفغ مضمن.
- ملاحظة: إذا كنت ترغب في تصدير التصميم بأكمله ، بدلا من العناصر الفردية ، يمكنك الضغط على السيطرة+ التحول + ه (على ويندوز) أو كمد + التحول + ه (على ماك) لحفظ فورا التصميم بأكمله في شكل سفغ.
- الخطوة 3: تحويل فيغما إلى هتمل سفغ
- عند الانتهاء من العمل مع التصميم في فيغما وإنشاء كائنات ناقلات ، وحان الوقت لتحويلها إلى تنسيق هتمل سفغ. سيسمح لك ذلك باستخدام الصور المتجهة في تطوير الويب وتكييفها مع الشاشات والأجهزة المختلفة.
- لتحويل فيغما إلى هتمل سفغ ، سوف تحتاج إلى المعلومات التالية:
حدد الكائن المتجه المطلوب في فيجما وانسخه;
افتح محرر التعليمات البرمجية أو أي محرر نصوص آخر;