إذا كان لديك صورة وتريد تعديلها داخل Figma، فهناك ثلاثة خيارات. يمكنك سحبها كصورة مسطحة ثم تتبعها يدويا (ببطء). أو يمكنك إعادة إنشاء التصميم من الصفر باستخدام الصورة كمرجع (أبطأ). أو يمكنك تحويل الصورة إلى طبقات Figma قابلة للتحرير باستخدام الذكاء الاصطناعي.
هذا الدليل يدور حول الخيار الثالث. تحول Codia AI أي صورة - لقطة واجهة، شاشة جوال، wireframe، sketch، صفحة ويب، illustration، أو صورة ملتقطة لشاشة - إلى ملف Figma منظم يحتوي على نص حقيقي، وأشكال حقيقية، ومكونات حقيقية، وAuto Layout حيث تنطبق الفكرة. معظم الشاشات الكاملة تستغرق نحو عشر ثوانٍ.
استخدم Codia Screenshot to Figma لتحويل لقطات الشاشة وصور واجهات المستخدم إلى طبقات Figma قابلة للتحرير قبل إعادة التصميم أو المقارنة أو التسليم.
ماذا يعني "Image to Figma"؟
"Image to Figma" هو العنوان الأوسع لفئة تحويل المدخلات البصرية إلى تصاميم Figma قابلة للتحرير. ويشمل:
عند الوصول إلى خطوة إعادة البناء، افتح Codia Screenshot to Figma وحوّل الصورة المرجعية إلى طبقات قابلة للتحرير قبل تنقيح التصميم.
- Screenshot to Figma — الحالة الأكثر شيوعا (لقطات واجهات المستخدم)
- Mockup to Figma — تصاميم من mockups بصيغ PNG/JPG
- Wireframe to Figma — صور wireframe بالأبيض والأسود
- Sketch to Figma UI — صور رسومات واجهة مرسومة يدويا
- Illustration to Figma — تحويل الأعمال الفنية للعلامة إلى ملفات متعددة الطبقات
- Screenshot to UI design — المعنى نفسه بصياغة مختلفة
كل هذه الحالات تمر عبر نفس خط تحويل Codia AI. الاختلاف يكمن في ما ينبغي توقعه من الناتج.
صيغ الصور المدعومة
تدعم Codia AI أكثر صيغ الصور شيوعا:
- PNG (مُوصى به) — من دون فقدان ويحافظ على الحواف الحادة
- JPG / JPEG — يعمل بشكل جيد للقطات النظيفة، لكن JPG المضغوط يفقد تفاصيل الأيقونات والنصوص الصغيرة
- WebP — مدعوم
- GIF — يُحوَّل الإطار الأول فقط (والـ GIF المتحرك يأخذ أول إطار)
- SVG — مدعوم، لكن إذا كان لديك SVG بالفعل فغالبا لا تحتاج إلى التحويل
- PDF — يحول الصفحة الأولى؛ وللملفات متعددة الصفحات راجع PDF to Figma
أفضل ممارسة: استخدم PNG حديثا ملتقطا من المصدر كلما أمكن. الصور الملتقطة للشاشات، وملفات JPG المعاد ترميزها، والصور المصغرة منخفضة الدقة كلها تقلل الجودة.
كيف يعمل التحويل
يمرّ الخط بأربع خطوات تحت الغطاء:
- تحليل بصري. تحدد Codia AI Vision مناطق الصورة: كتل النصوص، والأزرار، والبطاقات، والتنقل، والصور، والأيقونات، والعناصر الزخرفية.
- OCR. يُستخرج النص مع الحفاظ على موضعه، وحجم الخط، ومعلومات اللون.
- إعادة بناء التخطيط. تُعاد صياغة الصورة المسطحة كشجرة Frames في Figma، مع تطبيق Auto Layout حيث يكون نمط المسافات والمحاذاة نظيفا.
- التعرف على المكونات. تُعلَّم العناصر المتكررة (البطاقات، وصفوف القوائم، والأزرار في حالات متعددة) لتحويلها إلى components.
النتيجة هي ملف Figma يمكنك تعديله فعلا - لا لقطة شاشة موضوعة داخل Frame.
ما الذي ينجو من التحويل؟
غالبا نظيف
- محتوى النص وحجم الخط — يُستعاد عبر OCR
- قيم الألوان — تُلتقط التعبئات من المصدر
- بنية التخطيط — مربعات، صفوف، شبكات، أعمدة
- Auto Layout — يطبق على الأنماط الشائعة (البطاقات، القوائم، التنقل)
- مناطق الصور — تُستخرج كـ image fills
- الأيقونات البسيطة — تتحول إلى vector عند التعرف عليها
- الأزرار، وحقول الإدخال، والنماذج — تُتعرف عليها كمكونات عندما يكون الشكل والتنسيق نظيفين
يحتاج إلى مراجعة
- الخطوط — الاسم تقريبي؛ الخطوط المفقودة تُستبدل، مع الحفاظ على الاسم الأصلي
- الأيقونات والرسومات المعقدة — قد تظهر كصور raster؛ يمكنك تحويلها يدويا إلى vector أو استخدام خيار vectorize في Codia
- العناصر المتداخلة — هي الأصعب في الفصل؛ قد تحتاج إلى القص وإعادة التشغيل
- التدرجات والتأثيرات — التدرجات البسيطة جيدة، أما التدرجات المعقدة متعددة النقاط أو الشعاعية فتُقرب فقط
خطوة بخطوة
- اختر صورتك. أفضل النتائج تأتي من PNG نظيف.
- اقصص المنطقة غير المهمة. أزل إطار المتصفح، وأشرطة الحالة، والعلامات المائية، وأي عناصر لا تريدها في ملف Figma.
- ارفعها إلى Codia AI (تطبيق الويب أو إضافة Figma).
- شغّل التحويل. الشاشة النظيفة الكاملة تستغرق نحو عشر ثوانٍ.
- افتحها في Figma. كل تحويل يظهر كـ Frame مع طبقات منظمة.
- راجع ونظف. افحص النصوص، والخطوط، والألوان، والمكونات، وAuto Layout.
- حوّل العناصر المتكررة إلى components حتى يبقى الملف مفيدا للعمل التصميمي المستمر.
حالات الاستخدام حسب نوع المصدر
لقطة واجهة UI
الحالة الأكثر شيوعا. راجع دليل Screenshot to Figma للحصول على نصائح حسب السيناريو (الجوال، لوحة التحكم، صفحة الهبوط، التجارة الإلكترونية).
صورة wireframe
تتحول wireframes بشكل جيد - مستطيلات نظيفة، وlabels واضحة، وأسلوب بسيط. الناتج ملف Figma يمكنك تطبيق نظام التصميم عليه فورا.
sketch مرسوم يدويا (مصوَّر)
صوّر sketch على سطح مستوٍ بإضاءة متساوية. الرسومات ذات المستطيلات الواضحة للمكونات والكتابة المقروءة تتحول إلى Frames نظيفة بالأبيض والأسود. أما الرسوم الفنية اليدوية فليست مناسبة؛ بينما تنجح الرسومات الهيكلية.
Mockup لتطبيق جوال بصيغة PNG
نفس سير العمل الذي تتبعه مع لقطة الشاشة. إذا كان الـ mockup بدقة 1x، فرفعه بـ 2x أو 3x لتحصل على تعرف أنظف على الأيقونات.
أصل تسويقي / بانر
تتحول البنرات والإعلانات إلى Frames قابلة للتحرير داخل Figma. قد تحتاج الطبقات الضوئية الثقيلة والطباعة المزخرفة إلى تنظيف يدوي، لكن البنية الأساسية للنص والتخطيط تُستعاد بشكل جيد.
Illustration / أعمال العلامة
بالنسبة إلى الرسومات، توقّع أن يكون الناتج أقرب إلى raster منه إلى vector. إذا كنت تحتاج إلى vectors قابلة للتحرير، فـ Image to SVG أداة مكملة.
Image to Figma مقابل Screenshot to Figma مقابل صورة الشاشة
النيات الثلاث مرتبطة كثيرا لكنها ليست متطابقة:
| المصدر | الأداة | ما المتوقع |
|---|---|---|
| Screenshot (PNG) | Codia AI | أعلى fidelity - لقطة حديثة، وحواف حادة، وظروف OCR مثالية. |
| Image (PNG/JPG/WebP) | Codia AI | نفس الخط، لكن الجودة تعتمد على جودة المصدر. |
| صورة شاشة التُقطت بالكاميرا | Codia AI | تعمل، لكن توقع تنظيفا أكثر - الانعكاسات، والمواريه، والدوران تؤثر على كل خطوة. |
إذا كان لديك خيار التقاط Screenshot بدل تصوير الشاشة، فاختر Screenshot دائما.
ما الذي تراجعه بعد التحويل؟
عامل الناتج على أنه مسودة قابلة للتحرير عالية الجودة، لا نظام تصميم مكتمل. راجع:
- النص. قابل للتحرير؟ فواصل الأسطر صحيحة؟ هل خلط OCR بين رموز متشابهة؟
- الخطوط. هل الاستبدالات تبدو صحيحة؟
- الألوان. هل طُبقت على design tokens الخاصة بك؟
- الأيقونات. هل تحولت إلى vector أو يمكن استبدالها؟
- المكونات. هل رُقيت العناصر المتكررة إلى Figma components؟
- Auto Layout. هل طُبق بشكل صحيح؟ هل أُعيد بناء الحاويات الاستجابية؟
الـ API والمعالجة الدفعية
للحجم الكبير (هجرات الكتالوجات، تدقيق التصميم، الإدخال الآلي)، استخدم Visual Struct API. يقبل الصور ويعيد JSON منظما تستطيع أدواتك تحويله إلى Figma أو تمريره إلى خطوط التصميم اللاحقة. تدعم نقاط النهاية الدفعية حتى 1,000 صورة في المرة الواحدة.
الأسئلة الشائعة
ما الفرق بين "image to Figma" و "screenshot to Figma"؟
يُستخدمان بالتبادل في الغالب. "Image to Figma" أوسع - أي مدخل صورة. أما "screenshot to Figma" فيشير تحديدا إلى لقطات واجهات المستخدم. تتعامل Codia مع الاثنين بنفس سير العمل.
هل يمكنني فعلا تعديل النص بعد التحويل؟
نعم. يستخرج OCR النص، ويكون الناتج طبقة نص حقيقية في Figma يمكنك تعديلها مثل أي طبقة أخرى.
ماذا لو كانت الصورة تحتوي على كتابة يدوية؟
الأحرف المطبوعة يدويا في السياقات الهيكلية (labels الـ wireframe، والنداءات) تُقرأ عادة. أما الخط اليدوي المتصل فيكون أصعب.
ماذا لو كانت الصورة منخفضة الدقة؟
جرّب رفعها إلى 2x أو 3x قبل التحميل. أدوات الرفع المدعومة بالذكاء الاصطناعي مفيدة؛ الهدف هو إعطاء التحويل حدود بكسل أوضح.
هل يمكنني تحويل illustration إلى vectors قابلة للتحرير؟
بالنسبة إلى عناصر الواجهة، نعم. أما الرسومات الفنية، فـ Image to SVG أنسب.
هل توجد طبقة مجانية؟
نعم. تغطي طبقة Codia المجانية التحويلات المتقطعة. أما الخطط المدفوعة فتضيف الحجم، والوصول الدفعي، وميزات الفريق.
هل توجد إضافة Figma؟
نعم - ثبّت Codia AI Design من Figma Community.
مقالات ذات صلة
- Screenshot to Figma: The Complete Guide
- Codia vs image.to.design: Detailed Screenshot-to-Figma Comparison
- Screenshot to Figma with Cursor and the Figma MCP Server
- Image to SVG: Convert PNG and JPG Logos into Editable Vectors
- PDF to Figma: Convert Static PDFs into Editable Design Files
- Visual Struct API: Convert UI Screenshots into Structured JSON