تصدير صفحات الويب إلى Figma

كيف يعمل سير العمل المحلي

لا يقوم CloneWebsite بإرسال صفحة ويب إلى خادم التحويل. تقرأ إضافة Chrome الصفحة المعروضة في علامة التبويب النشطة، وتنشئ أرشيف .cdesign مُصدَّر محلياً في الذاكرة، ثم تنزّله أو تحفظه محلياً. تفتح إضافة CloneWebsite Figma هذا الملف وتنشئ طبقات في مستند Figma الحالي.

صفحة ويب معروضة → إضافة Chrome → ملف .cdesign محلي → إضافة Figma → طبقات قابلة للتحرير

ملف .cdesign هو حاوية مفتوحة قائمة على ZIP. يحتوي على بيان، وملف مشهد JSON واحد لكل حالة ملتقطة، وموارد صور معنونة بالمحتوى.

التقاط صفحة أو مكون

1. افتح صفحة الويب وانتظر حتى يكتمل عرض محتواها وخطوط الويب.
2. افتح شريط أدوات CloneWebsite وغيّر المخرجات من الموقع الإلكتروني إلى Figma.
3. اختر استنساخ الصفحة أو استنساخ المكوّن.
4. افتح خيارات التقاط Figma واختر مجموعات إطار العرض والسمة. يلتقط الإعداد الأولي إطار العرض الحالي والسمة الحالية. يمكنك إضافة إطارات عرض بدقة 1440 و768 و390 بكسل، وسمات فاتحة أو داكنة، حتى ست مجموعات.
5. أبقِ الالتقاط المعزز مفعّلاً عندما تحتاج إلى إطارات عرض متجاوبة، أو حالات تفاعل المكونات، أو حالات الرجوع النقطية لـ iframe/المرشحات، أو هندسة متصفح أكثر دقة.
6. حدد بدء. في وضع المكوّن، انقر على المكوّن في الصفحة وأكّد التحديد.
7. نزّل ملف .cdesign الناتج، أو احفظه في قائمة المشاريع المحلية للإضافة للتنزيل لاحقاً.

إذن مصحح أخطاء Chrome

لا يدعم Chrome الإعلان عن إذن debugger كإذن اختياري، لذلك يُمنح عند تثبيت الإضافة. لا يقوم CloneWebsite بإرفاق مصحح الأخطاء إلا عند بدء التقاط Figma مع تفعيل الالتقاط المعزز. ويُستخدم مؤقتاً لمحاكاة مجموعات إطار العرض/السمة، وفرض حالات العناصر الزائفة المدعومة للمكونات، وإنشاء لقطات شاشة محلية للأشجار الفرعية البصرية غير المدعومة. تنفصل الإضافة عن علامة التبويب عند انتهاء الالتقاط أو فشله.

عندما يكون الالتقاط المعزز متوقفاً، لا تقوم الإضافة بإرفاق مصحح الأخطاء. يلتقط الوضع الأساسي إطار العرض الحالي والسمة الحالية وحالة المكوّن Default. يوضّح تقرير الالتقاط المشاهد المعززة أو الطبقات الاحتياطية التي تم تخطيها.

لا يمكن لأدوات Chrome DevTools وأي عميل مصحح أخطاء آخر التحكم في نفس علامة التبويب في وقت واحد. أغلق DevTools لتلك علامة التبويب إذا أبلغ الالتقاط المعزز عن خطأ في الإرفاق.

الاستيراد إلى Figma

أثناء مرحلة الإصدار الداخلي:

1. قم ببناء الإضافة من figma_plugin/ باستخدام pnpm install && pnpm build.
2. في Figma Desktop، اختر Plugins → Development → Import plugin from manifest….
3. حدد figma_plugin/manifest.json.
4. شغّل CloneWebsite Design Importer.
5. أفلت ملف .cdesign، وحدد المشاهد المراد استيرادها، وابدأ الاستيراد.

الإضافة ليس لديها إذن شبكة. يحدث تحليل الأرشيف وإنشاء الصور ومطابقة الخطوط وتوليد الطبقات داخل Figma على جهازك.

ما يبقى قابلاً للتحرير

• الإطارات والتعبئات والحدود وزوايا نصف القطر والظلال وأنماط المزج الأساسية
• محتوى النص وحجم الخط وارتفاع السطر والمحاذاة والزخرفة واللون
• طبقات الصور وSVG
• تخطيطات Flexbox عالية الثقة كـ Figma Auto Layout
• المكونات المحددة كمكونات Figma
• حالات المكون Default وHover وFocus وActive وDisabled كمتغيرات عندما يتمكن الالتقاط المعزز من تعيين المكوّن المحدد

تستخدم مناطق الصفحة Network Grid والحرة التموضع المطلق للحفاظ على الهندسة. قد تصبح المرشحات المعقدة والأقنعة وiframe وأسطح الفيديو وتأثيرات المتصفح غير المدعومة طبقات احتياطية نقطية محلية.

الخطوط وتقارير الاستيراد

لا تستطيع إضافات Figma تثبيت خط ويب بعيد للصفحة في المحرر. يبحث المستورد أولاً عن العائلة والنمط المطلوبَين بين الخطوط المتاحة لـ Figma. إذا تعذّر تحميل تطابق دقيق، فسيستخدم خطاً احتياطياً محلياً قابلاً للتحرير ويسرد الاستبدال في تقرير الاستيراد.

كما يذكر التقرير أيضاً الموارد المفقودة، والبدائل النقطية، وترميز SVG غير الآمن المتخطّى، وحدود العُقد، وتحذيرات الالتقاط. راجعه قبل اعتبار الملف المستورد مصدر تصميم للإنتاج.

الخصوصية والاستخدام المسؤول

لا يتم رفع محتوى الصفحة إلى CloneWebsite. تقتصر طلبات الشبكة أثناء الالتقاط على تنزيل الموارد المُشار إليها بالفعل بواسطة الصفحة، بالإضافة إلى نقطة نهاية ذكاء BYOK الاصطناعي الاختيارية إذا كنت قد تكوّنت هذه الميزة بشكل منفصل. راجع سياسة خصوصية الإضافة.

التقط الصفحات المخوَّل لك بالوصول إليها فقط. تبقى حقوق الطبع والنشر والعلامات التجارية والبيانات الشخصية وحقوق التصميم للموقع الأصلي ملكاً لأصحابها.