تعتبر Figma أداة رائعة سرعان ما أصبحت مفضلة لدى UX / UI ومصممي الويب. يمكنك إنشاء تصميمات ويب سريعة الاستجابة بسرعة وسهولة باستخدام هذه الأداة المجانية القائمة على المتصفح.
بينما يقوم معظم الأشخاص بإنشاء تصميماتهم من البداية في Figma ، يمكنك أن تستلهم من مواقع الويب الحقيقية ويمكنك بسهولة إنشاء تصميم Figma مباشرةً من صفحة HTML موجودة. هيريس كيفية القيام بذلك.
لماذا يجب عليك إنشاء تصاميم Figma من HTML
هناك العديد من الأسباب التي قد تدفعك إلى تكرار تصميم ويب موجود كتصميم فيجما. يؤدي القيام بذلك عبر المكون الإضافي Figma إلى توفير الوقت ، مما يسمح لك بالتركيز على ضبط التصميم الخاص بك.
تعتبر ممارسة تصميم الويب عن طريق إعادة إنشاء صفحات الويب الموجودة طريقة رائعة للتعلم من الخبراء. يمكنك أيضًا استخدام أداة تصميم HTML to Figma إذا كنت قد صممت مسبقًا ونشرت صفحة ويب فقدت إمكانية الوصول إليها. بدلاً من إعادة تصميمه من البداية ، يمكنك توفير الوقت عن طريق تحويله مرة أخرى إلى Figma للعمل عليه مرة أخرى.
الآن بعد أن عرفت سبب الاستفادة من هذه الأداة ، حان الوقت لمعرفة كيفية عملها.
كيفية تحويل أي موقع إلى تصميم Figma
لبدء أي عمل تصميم قائم على Figma ، تحتاج إلى فتح Figma وتسجيل الدخول أو التسجيل. يمكنك استخدام إصدار المتصفح ، فيجما، أو قم بتنزيل تطبيق سطح المكتب; كلاهما يعمل بنفس الطريقة لهذا المشروع.
افتح ملف تصميم جديد لبدء مشروع تصميم HTML إلى Figma.
الخطوة 1: قم بتنزيل html.to.design Plugin
لتكون قادرًا على تحويل موقع ويب مباشر إلى تصميم Figma ، ستحتاج إلى مكون إضافي. هناك عدد لا يحصى من الإضافات في Figma للمساعدة في تصميماتك ، بما في ذلك المكونات الإضافية لإنشاء نماذج بالأحجام الطبيعية للهواتف والأجهزة. يمكنك إضافة تصميم موقع الويب المحول إلى نموذج بالحجم الطبيعي لاحقًا إذا كنت ترغب في ذلك.
لتنزيل البرنامج المساعد ، حدد ملف قائمة فيجما (شعار فيجما)> الإضافات > ابحث عن المزيد من المكونات الإضافية. بدلا من ذلك ، يمكنك الاختيار موارد > الإضافات. من أي من الخيارين ، اكتب في شريط البحث html.to.design.
ابحث عن الخيار المقدم من divRIOTS وحدد يجري. هذا يفتح البرنامج المساعد كمربع حوار على قماش Figma الخاص بك.
الخطوة 2: الصق عنوان URL لموقع الويب
المكون الإضافي html.to.design مجاني ، لكنه يقدم إصدارًا احترافيًا. يمكنك إكمال عملية التصميم بالكامل باستخدام الإصدار المجاني.
ابحث عن موقع الويب الذي تريد تصميم Figma له. يجب عليك استخدام موقع ويب عام - وليس صفحة ويب لا يمكن الوصول إليها إلا بتسجيل الدخول. سنستخدم صفحتنا الرئيسية ، MakeUseOf.com.
انسخ عنوان URL الكامل والصقه في مربع الاستيراد في Figma ، لتحل محل العنصر النائب لموقع Apple.
الخطوة 3: قم بتحميل التصميم الخاص بك
بعد لصق عنوان URL لموقع الويب ، افتح إعدادات أسفل مربع الاستيراد لتحديد حجم التصميم. يمكنك استيراد التصميم لمجموعة متنوعة من الأجهزة ، ولكن سيكون لديك نجاح أفضل في اختيار جهاز سطح المكتب إذا استخدمت عنوان URL لسطح المكتب وحقق نجاحًا أفضل باستخدام عنوان URL للجوّال لأجهزة الجوّال.
هناك أيضًا خيارات مخصصة للأجهزة أو الأحجام التي لا تتوفر كخيارات افتراضية. نحن نختار MacBook Pro 14 بوصة مع ضوء سمة.
بمجرد تحديد جهازك وعرض الإعدادات ، حدد يستورد لإضفاء الحيوية على تصميم HTML الخاص بك في Figma. انتظر حتى يكتمل شريط التحميل حتى يتم ملء تصميم Figma.
اعتمادًا على موقع الويب الذي استخدمته ، قد تلاحظ وجود مربع منبثق يشرح أنه يجب استبدال بعض الخطوط. سيكون هذا بسبب حقوق الطبع والنشر لأشكال الخطوط المرخصة. سوف تستبدلها Figma بمحارف يمكنك الوصول إليها.
اخرج من أي نوافذ منبثقة ، ثم اخرج من مربع حوار المكون الإضافي لرؤية تصميمك الجديد في شكله الكامل.
الخطوة 4: قم بتعديل تصميم Figma الخاص بك
من هنا ، يمكنك البدء في تحرير صفحة ويب Figma الخاصة بك بأي طريقة تريدها. كما ذكرنا ، تتيح لك وظيفة HTML إلى Figma هذه معرفة كيفية تصميم صفحات الويب الحالية لإلهامك لإنشاء صفحاتك الخاصة من البداية. يمكنك استخدام التصميم الأساسي من موقع الويب و إنشاء عرض تقديمي باستخدام التحولات في Figma، أو تعرف ببساطة على كيفية إعداد صفحات الويب بواسطة مصممين آخرين.
في القائمة اليسرى ، ستجد الطبقات. نظرًا لأنه تم تحويل هذا مباشرةً من HTML ، فقد تكون الطبقات أكثر تفصيلاً - أو حتى مربكة - مما اعتدت عليه عند تصميم نفسك. حدد قسمًا في التصميم للعثور على الطبقات المميزة في القائمة اليسرى.
يمكنك استبدال الصور أو إعادة كتابة العناوين والنص الأساسي أو نقل الأشياء داخل التخطيط بالنقر المزدوج فوق جانب التصميم. لا يكرر المكون الإضافي html.to.figma إعدادات الرسوم المتحركة أو الانتقال عند النقر فوق الروابط أو تغيير الصفحات. يمكنك إضافة هؤلاء بنفسك.
كيفية تحويل صفحة ويب خاصة
تتشابه غالبية عملية إنشاء موقع ويب خاص - موقع يتطلب حسابًا للوصول إليه - مقابل صفحة ويب عامة. ومع ذلك ، بدلاً من لصق عنوان URL ، يجب عليك بدلاً من ذلك استخدام امتداد Chrome الذي ينشئ ملفًا.
للبدء ، افتح Figma والمكوِّن الإضافي html.to.figma بنفس الطريقة السابقة.
الخطوة 1: قم بتنزيل وتشغيل ملحق Chrome
يمكنك فقط استخدام هذا الامتداد مع Google Chrome ، لذا افتح Chrome للبدء. من مربع حوار البرنامج المساعد Figma ، حدد تمديد كروم-أو افتح الامتداد هنا على متصفح Chrome الخاص بك.
يختار إضافة إلى الكروم > إضافة ملحق لإضافة الامتداد إلى متصفحك.
مع إضافة الامتداد ، انتقل إلى موقع الويب الخاص أو الصفحة التي ترغب في تكرار تصميمها - نحن نستخدم صفحة Instagram - وحدد الامتداد. تم العثور على الملحقات المطوية أسفل رمز قطعة اللغز في متصفحك.
سيسألك ما إذا كنت تريد التقاط الصفحة بأكملها أو ما يتم عرضه فقط. حدد اختيارك ثم سيظهر الالتقاط في التنزيلات كملف h2d.
الخطوة 2: اسحب الملف المُنشأ إلى ملحق Figma الإضافي
انتقل إلى تطبيق Figma الخاص بك أو موقع Figma على متصفحك واسحب ملف .h2d الذي تم تنزيله إلى المربع. سيتم تحميل الملف وإنشاء بنفس طريقة خيار موقع الويب العام.
كما هو الحال مع إصدار صفحة الويب العامة ، يمكنك النقر نقرًا مزدوجًا فوق جوانب التصميم لتعديلها أو النقر فوق القائمة الموجودة على اليسار لمعرفة مكان ظهورها في التخطيط.
قد ترغب في إضافة عناصر تصميم جديدة إلى تصميم صفحة الويب ، مثل تأثير زجاج بلوري فيجما، أو يمكنك حتى نسخ أجزاء من تصميم صفحة الويب كملف نموذج رئيسي للعروض التقديمية فيجما. في عام 2022 ، استحوذت Adobe على Figma، لذلك يمكننا توقع المزيد من الطرق الممتعة لاستخدام Figma في المستقبل.
استخدم أي موقع ويب للإلهام في تصاميم Figma الخاصة بك
في حين أن Figma مخصصة بشكل أساسي لتصميم مواقع الويب أو صفحات UX / UI من البداية ، إلا أنها فرصة رائعة لملء صفحات الويب الحالية لمعرفة كيفية بنائها. يمكنك أيضًا جعل تصميم الويب الخاص بك نسخة طبق الأصل من موقع موجود إذا لم تكن متأكدًا من أين تبدأ من قائمة فارغة.
سبب آخر رائع لاستخدام المكون الإضافي html.to.figma هو إذا كنت قد صممت بالفعل موقع ويب فقدت إمكانية الوصول إليه. يمكنك ملء الصفحة في Figma والبدء من جديد دون الحاجة إلى البدء من جديد.