الاستيراد إلى Figma: يقوم Buddy بتحويل الصور وHTML وتصميم Claude ونماذج Claude الأولية ومواقع الويب إلى طبقات1 min read

لم تعد أعمال التصميم تبدأ في مكان واحد.

في بعض الأحيان تكون الفكرة الأولى هي النموذج الأولي Claude Design. في بعض الأحيان تكون قطعة أثرية لكلود. في بعض الأحيان تكون تجربة HTML، أو لقطة شاشة، أو صفحة مقصودة تحبها، أو موقع ويب مباشر يريد فريقك التعلم منه.

المشكلة ليست في جعل الذكاء الاصطناعي أو الويب يصنعان شيئًا مثيرًا للاهتمام. تكمن المشكلة في إعادة هذه الفكرة إلى المكان الذي يتم فيه تصميم المنتج فعليًا: Figma.

يتيح لك Buddy استيراد أي شيء تقريبًا إلى Figma وتحويله إلى طبقات تصميم قابلة للتحرير على اللوحة القماشية. ليست لقطة شاشة مسطحة. ليست صورة مرجعية ثابتة. طبقات حقيقية يمكنك تحريرها وتنظيمها وتحسينها وتسليمها.

قم باستيراد أي شيء إلى Figma باستخدام Buddy، ثم استمر في التصميم في Figma

‏Buddy هو وكيل تصميم Figma AI الخاص بـ Anima. إنه موجود داخل Figma، ويقرأ اللوحة القماشية الخاصة بك، ويساعدك على إنشاء التصميمات وتحريرها وتنظيمها من خلال الدردشة.

الآن يعمل Buddy أيضًا كجسر بين الإلهام الخارجي وسير عمل Figma. الصق قطعة أثرية أو صورة أو لقطة شاشة أو HTML أو URL، وسيقوم Buddy بتحويلها إلى طبقات Figma قابلة للتحرير حتى تتمكن من متابعة عملية التصميم دون إعادة بناء كل إطار يدويًا.

هذا يعني أنه يمكنك البدء من:

• التحف Claude Design، عندما تريد جلب واجهة تم إنشاؤها بواسطة الذكاء الاصطناعي إلى Figma.
• التحف كلود، عندما يتم إنشاء نموذج أولي أو شاشة أو فكرة تفاعلية في كلود.
• التحف HTML، عندما يبدأ التصميم من HTML الذي تم إنشاؤه أو نموذج بالحجم الطبيعي مشفر.
• الصور ولقطات الشاشة، عندما تريد لصق مرجع مرئي والحصول على طبقات Figma قابلة للتحرير.
• الموقع الإلكتروني URLs، عندما تريد استنساخ موقع ويب عام في Figma كتصميم يمكنك فحصه وإعادة مزجه.

سير العمل بسيط: أحضر المصدر إلى Buddy، ودع Anima يفسر البنية المرئية، ثم تابع التصميم مباشرة على لوحة Figma.

سبب أهمية ذلك: يمنحك الذكاء الاصطناعي المسودة الأولى، بينما يمنحك Figma التحكم

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

لكن أعمال التصميم الاحترافية لا تنتهي عند المسودة الأولى. وعادة ما يبدأ هناك.

لا تزال الفرق بحاجة إلى تحرير النسخة، وإصلاح التسلسل الهرمي، وتطبيق العلامة التجارية، ومحاذاة المسافات، واستخدام المكونات، ومراجعة حالات الحافة، وإعداد ملف يمكن للمصممين الآخرين ومديري المشروعات والمهندسين العمل معه فعليًا.

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

يعيد Buddy هذا العمل إلى Figma كطبقات قابلة للتحرير، بحيث يصبح مخرجات الذكاء الاصطناعي شيئًا يمكن لفريقك تشكيله.

استيراد القطع الأثرية Claude Design إلى Figma

يعد Claude Design رائعًا لاستكشاف أفكار واجهة المستخدم والمفاهيم التفاعلية بسرعة. يمكنك وصف منتج أو ميزة أو صفحة مقصودة والحصول على قطعة أثرية مصقولة بسرعة.

ولكن إذا كانت الخطوة التالية هي مراجعة التصميم أو تحسين العلامة التجارية أو التسليم، فعادةً ما يحتاج فريقك إلى النتيجة في Figma.

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

يكون هذا مفيدًا عندما يقوم مؤسس أو مدير مشروع أو مسوق أو مهندس بإنشاء نموذج أولي للذكاء الاصطناعي أولاً، ثم يريد من المصمم أن يجعله بجودة إنتاجية.

استيراد القطع الأثرية لكلود ونماذج الذكاء الاصطناعي

يمكن أن تشتمل قطع كلود الأثرية على أكثر من شاشة واحدة. يمكن أن تحتوي على حالات ولوحات وقوائم ونماذج وجداول وبطاقات وحالات فارغة ومفاهيم واجهة المستخدم الكاملة.

بدلاً من التقاط لقطات الشاشة يدويًا وتتبع التصميم، قم بلصق القطعة الأثرية في Buddy. يقوم Anima بتحويله إلى تصميم Figma منظم يمكن لفريقك تعديله.

بمجرد ظهوره على اللوحة القماشية، يمكنك:

• شاشات منفصلة إلى إطارات.
• تحرير النص ونسخة المنتج.
• تحسين التباعد والتسلسل الهرمي.
• استبدل العناصر المرئية العامة بأصول العلامة التجارية.
• تطبيق نظام التصميم الخاص بك.
• قم بإعداد التصميم للمراجعة أو التسليم الهندسي.

يصبح النموذج الأولي للذكاء الاصطناعي نقطة البداية، وليس طريقًا مسدودًا.

استيراد القطع الأثرية HTML إلى Figma

تقوم العديد من أدوات الذكاء الاصطناعي الآن بإنشاء HTML كمخرجات تصميمية خاصة بها. يمكن أن يكون ذلك مفيدًا للمعاينات السريعة، ولكن HTML ليس دائمًا أفضل مكان لتقييم تصميم المنتج.

يحتاج المصممون إلى التحكم في القماش. إنهم بحاجة إلى نقل الطبقات ومقارنة الخيارات وفحص التسلسل الهرمي ومواءمة العمل مع نظام التصميم.

يساعد Buddy من خلال إعادة عناصر HTML إلى Figma. يمكنك استخدام مخرجات HTML كمصدر، ثم تحويلها إلى طبقات Figma قابلة للتحرير والتي يمكن تنظيفها وإعادة تنظيمها وصقلها.

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

الصق صورة أو لقطة شاشة واحصل على طبقات Figma قابلة للتحرير

لقطات الشاشة موجودة في كل مكان في عمل المنتج.

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

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

باستخدام Buddy، يمكنك لصق صورة أو لقطة شاشة وتحويلها إلى طبقات Figma قابلة للتحرير. يصبح النص والتخطيط والبنية المرئية وعناصر واجهة المستخدم شيئًا يمكنك العمل به على اللوحة القماشية.

يؤدي ذلك إلى حفظ الجزء الأكثر إزعاجًا من العملية: إعادة إنشاء ما هو موجود بالفعل حتى تتمكن من إجراء التغييرات.

استنساخ أي موقع على شبكة الإنترنت عن طريق لصق URL

يعد إلهام موقع الويب أحد نقاط البداية الأكثر شيوعًا للمنتجات الجديدة والعمل التسويقي.

ربما يعجبك هيكل الصفحة الرئيسية SaaS. ربما تريد دراسة صفحة التسعير. ربما تحتاج إلى التقاط تخطيط لوحة المعلومات، أو تدفق الإعداد، أو قسم الصفحة المقصودة.

باستخدام Buddy، يمكنك لصق موقع ويب URL وإحضار الصفحة إلى Figma كتصميم قابل للتحرير. بدلاً من حفظ لقطة الشاشة، يساعدك Buddy على إعادة إنشاء البنية المرئية كطبقات على اللوحة القماشية.

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

ما تحصل عليه على قماش Figma

والفرق الرئيسي هو قابلية التحرير.

‏Buddy لا يقوم فقط بوضع صورة نقطية على اللوحة القماشية. الهدف هو منحك تصميم Figma عمليًا يمكن تحريره ومراجعته وتحسينه.

بعد الاستيراد، يمكنك الاستمرار في العمل العادي لـ Figma:

• تحرير النص مباشرة.
• نقل وتغيير حجم الطبقات.
• اضبط الألوان والخطوط والمسافات والتسلسل الهرمي.
• تنظيم الإطارات والأقسام.
• قم بتطبيق التخطيط التلقائي عند الحاجة.
• استبدل العناصر الخشنة بمكونات حقيقية.
• قم بمحاذاة النتيجة مع نظام التصميم الخاص بك.

هذا هو الهدف من Buddy: السرعة دون فقدان السيطرة.

سير عمل أفضل للتصميم المولد بالذكاء الاصطناعي

بدا سير العمل القديم كما يلي:

1. توليد فكرة في أداة الذكاء الاصطناعي.
2. التقط لقطات شاشة.
3. الصق لقطات الشاشة في Figma.
4. إعادة بناء التصميم يدويًا من البداية.
5. ابدأ أعمال التصميم الفعلية.

سير العمل Buddy أقصر:

1. قم بإنشاء المصدر أو العثور عليه: قطعة أثرية أو HTML أو صورة أو لقطة شاشة أو URL.
2. الصقه في Buddy.
3. احصل على طبقات Figma قابلة للتحرير.
4. استمر في التصميم على القماش.

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

لمن هذا؟

يعد استيراد أي شيء إلى Buddy مفيدًا لأي شخص يحتاج إلى التحرك بسرعة دون فقدان سير عمل Figma.

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

لا يتعلق الأمر باستبدال التصميم. يتعلق الأمر بإزالة أعمال إعادة الإعمار المملة بين الفكرة واللوحة القماشية القابلة للتحرير.

حاول استيراد فكرتك التالية إلى Buddy

قد تبدأ شاشة المنتج الرائعة التالية في Claude Design، أو قطعة أثرية من Claude، أو نموذج أولي HTML تم إنشاؤه، أو لقطة شاشة، أو موقع ويب URL.

باستخدام Buddy، يمكن أن تصبح نقطة البداية هذه تصميم Figma قابلاً للتحرير في سير العمل الحالي لديك.

الصقها في Buddy، واحصل على الطبقات على القماش، واستمر في التصميم.