فيجما هي أداة تصميم تسمح لك بإنشاء نماذج أولية وتخطيطات وواجهات. يوفر فرصة للعمل في المشاريع معا ومشاركة النتائج مع الفريق. تحويل تصميم من فيغما إلى هتمل و كس هو خطوة هامة في عملية تطوير موقع على شبكة الانترنت أو واجهة.
تحويل تصميم من فيغما إلى هتمل و كس يمكن أن يكون مهمة شاقة ، وخاصة للمبتدئين. ومع ذلك ، باتباع عملية معينة ، ستتمكن من تحويل التصميم بنجاح إلى رمز. سيوفر لك هذا الدليل جميع الخطوات والتعليمات اللازمة للتحويل الناجح.
الخطوة الأولى هي تفكيك التصميم. لديك لتحليل كل صفحة وكل عنصر في فيغما وتحديد الأجزاء التي تحتاج إلى تحويلها إلى هتمل و كس. من المهم أن تضع في اعتبارك أن بعض العناصر ، مثل الرسوم التوضيحية أو التأثيرات المعقدة ، قد يكون من الصعب تحويلها وقد تتطلب استخدام أدوات أو مناهج أخرى.
بعد تفكيك التصميم ، فإن الخطوة التالية هي إعداد الملفات والمجلدات للعمل. قم بإنشاء مجلد جديد ووضع جميع الصور والخطوط والموارد الأخرى الضرورية فيه. سيسمح لك ذلك بتبسيط مشروعك وتوفير هيكل واضح لمزيد من العمل.
بعد ذلك ، يمكنك البدء في تحويل التصميم إلى رمز. هناك طرق مختلفة لهذا ، ولكن الخطوات الرئيسية تشمل إنشاء ترميز هتمل ، وتطبيق أنماط كس ، ودمج الصور وعناصر الوسائط الأخرى. يجب ترجمة كل عنصر من فيجما إلى التعليمات البرمجية والأنماط المناسبة.
- التحضير لتحويل تصميم من فيغما إلى هتمل و كس
- تثبيت وتكوين الأدوات الأساسية
- إنشاء هيكل هتمل على أساس تصميم في فيجما
- كس-التصميم وعناصر التصميم
التحضير لتحويل تصميم من فيغما إلى هتمل و كس
قبل البدء في تحويل تصميم من فيغما إلى هتمل و كس ، تحتاج إلى اتباع بعض الخطوات الأولية:
- دراسة تخطيط التصميم في فيجما وفهم هيكلها. انتبه إلى عناصر التصميم المختلفة مثل العناوين وكتل النص والأزرار والصور.
- قم بإنشاء مجلد جديد على جهاز الكمبيوتر الخاص بك حيث ستقوم بتخزين جميع الملفات المتعلقة بتحويل التصميم. قم بتسمية هذا المجلد بصريا بحيث يسهل التنقل فيه.
- قم بتنزيل جميع الخطوط الضرورية المستخدمة في التخطيط. تأكد من أن لديك جميع ملفات الخطوط الضرورية (عادة الملفات ذات الامتداد.صندوق النقد الدولي أو .أوتف).
- إنشاء ملف هتمل جديد وتسميته الفهرس.أتش تي أم أل . سيكون هذا الملف هو الملف الرئيسي الذي يربط جميع الملفات الأخرى ويحتوي على الترميز والأنماط الخاصة بك.
- قم بإنشاء مجلد جديد داخل مجلد المشروع وقم بتسميته كس. سيحتوي هذا المجلد على جميع ملفات كس المسؤولة عن أنماط صفحتك.
- ربط الخط والمغلق الملفات إلى الفهرس الخاص بك.أتش تي أم أل الملف. للقيام بذلك ، استخدم الرابط أو @استيراد العلامات. تأكد من تحديد مسارات الملفات بشكل صحيح.
بعد الانتهاء من كل هذه الخطوات الأولية ، سوف تكون على استعداد لبدء تحويل التصميم من فيغما إلى هتمل و كس.
تثبيت وتكوين الأدوات الأساسية
قبل البدء في تحويل تصميم من فيغما إلى هتمل و كس ، تحتاج إلى تثبيت وتكوين الأدوات الأساسية. في هذا القسم ، سأشرح كيفية تثبيت وتكوين الأدوات التالية:
1. مدير الملفات
للعمل مع الملفات وتنظيم مشروع ، يمكنك استخدام مدير ملفات مناسب. أوصي بتثبيت نص سامية أو رمز الاستوديو المرئي. كل من المحررين لديها مجموعة واسعة من الوظائف ودعم هتمل و كس مع تسليط الضوء على بناء الجملة.
2. بوابة (إذا لزم الأمر)
إذا كنت تخطط لتطوير مشروع باستخدام نظام التحكم في إصدار جيت ، تحتاج إلى تثبيته على جهاز الكمبيوتر الخاص بك. بوابة يسمح لك لتتبع التغييرات التعليمات البرمجية ، والعمل مع فرق ، وإنشاء فروع ، وأكثر من ذلك.
3. المتصفح
لاختبار النتائج وعرضها ، يوصى باستخدام متصفح ويب حديث مثل جوجل كروم أو موزيلا فايرفوكس أو سفاري. سيضمن ذلك أن الكود الخاص بك يبدو ويعمل بشكل صحيح على جميع الأنظمة الأساسية.
بمجرد تثبيت جميع الأدوات اللازمة بنجاح ، كنت على استعداد لبدء تحويل التصميم إلى هتمل و كس.
إنشاء هيكل هتمل على أساس تصميم في فيجما
لنبدأ بإنشاء جدول يحتوي على المحتوى الرئيسي للتصميم. للقيام بذلك ، استخدم التعليمات البرمجية التالية:
| الخلية الأولى | الخلية الثانية | الخلية الثالثة |
| الخلية الرابعة | الخلية الخامسة | الخلية السادسة |
في التعليمات البرمجية أعلاه ، لدينا جدول مع صفين (