00:00:00هذا هو Penpot، أداة تصميم مفتوحة المصدر تنافس أدوات مثل Figma.
00:00:05في البداية، تبدو وكأنها Figma، لكن طريقة عملها مختلفة تماماً.
00:00:10لأنها في الأساس تستخدم CSS حقيقية، وليس شيئاً يتطلب التحويل لاحقاً.
00:00:15وهذا يغير مشكلة تسليم التصميم للمطورين بشكل كبير.
00:00:18دعني أوضح لك ما أعنيه.
00:00:20Penpot هي أداة تصميم واجهات ونماذج أولية تعمل عبر المتصفح.
00:00:29في الظاهر، نعم، تبدو مثل Figma أو Sketch.
00:00:32لكن في الحقيقة، هذا هو الفرق الجوهري.
00:00:35Penpot مفتوحة المصدر بنسبة 100% ومبنية على معايير الويب الحقيقية.
00:00:40SVG، وCSS Flexbox، وGrid، وHTML.
00:00:43بدلاً من التصميم داخل بيئة تتطلب فك التشفير وإعادة الهيكلة لاحقاً،
00:00:49فأنت بالفعل أقرب إلى كيفية عمل الويب فعلياً.
00:00:52يمكنك استضافتها ذاتياً باستخدام Docker بأمر واحد،
00:00:54وهو ما سأفعله في هذا الفيديو، لأن هذا هو اهتمامي.
00:00:58الإصدارات مفتوحة المصدر من الأدوات ورؤية كيفية مقارنتها بغيرها.
00:01:01مع Penpot، لا يزال بإمكان المصممين الحصول على المكونات، والتخطيطات، والنماذج الأولية.
00:01:06لكن المطورين يحصلون على الجزء الأكثر أهمية، مخرجات تشبه الكود الحقيقي.
00:01:11لا توجد طبقة وسيطة غريبة، ولا حاجة للتخمين بشأن ما يحدث.
00:01:14وهي مجانية.
00:01:15ملفات غير محدودة، ومساهمون غير محدودين، لهذا السبب يهتم الناس بها.
00:01:20إذا كنت تستمتع بالأدوات مفتوحة المصدر ونصائح البرمجة التي تسرع سير عملك،
00:01:23فتأكد من الاشتراك في القناة.
00:01:25لدينا فيديوهات تصدر باستمرار.
00:01:27الآن Penpot هي أداة تصميم.
00:01:28فلماذا يجب أن تهتم، خاصة إذا كنت مطوراً؟
00:01:31لأنها تحل مشكلة محددة جداً.
00:01:34ألم تسليم المشروع أو تحويل التصميم إلى كود حقيقي.
00:01:39تجعل Penpot التصميم يبدو أصلياً للويب.
00:01:42لذا عندما تفحص شيئاً، فأنت لا تخمن، بل تقرأه.
00:01:46دعني أريك.
00:01:48حسناً، وقت العرض التوضيحي السريع يا رفاق.
00:01:50هذا يعمل مباشرة على نسخة Penpot التي أستضيفها ذاتياً.
00:01:54لقد قمت بتشغيلها بأمر Docker Compose up واحد باستخدام ملف
00:01:58Docker Compose الرسمي الذي قمنا بإعداده للتو.
00:02:00كان هذا أمراً ضخماً.
00:02:02لذا استغرق الأمر بعض الوقت للتشغيل، ولكن الآن بعد أن أصبح جاهزاً، يعمل بشكل رائع.
00:02:07ونحصل على صفحة ترحيب جميلة هنا، ومظهر نظيف حيث يمكنني إنشاء مشروع جديد.
00:02:12الآن دعنا نبني شيئاً ما، مجرد بطاقة بسيطة، لا شيء معقد.
00:02:16مجرد حاوية، اضبطها على flexbox، وأضف بعض الهوامش.
00:02:21سأضيف عنواناً، وبعض النصوص، وزراً.
00:02:24ربما أضيف المزيد هنا، بطاقة أخرى، يمكنني نسخها ولصقها.
00:02:28سأقوم ببعض التعديلات السريعة.
00:02:30سننتقل إلى وضع الفحص (Inspect).
00:02:32وهذا هو الجزء المهم.
00:02:33تحصل على هيكل نظيف في CSS الفعلي، وخصائص flexbox، والمسافات، والتخطيط.
00:02:39ليس مجرد ترجمة تقريبية، بل شيء تفهمه بالفعل.
00:02:42يمكنك نسخ هذا ووضعه مباشرة في مشروعك.
00:02:46لديك أيضاً المتغيرات، والرموز، وتدفقات النماذج الأولية، والتصدير كـ SVG.
00:02:51هذا هو الأمر الكبير هنا.
00:02:52هذا يزيل الكثير من الاحتكاك بالنسبة لـ
00:02:54فرق التطوير، خاصة عندما تمتلك كامل البنية بنفسك.
00:02:58الآن دعنا نتحدث عن الجزء الذي يجعل معظم المطورين متشككين.
00:03:02في البداية، يبدو الأمر وكأنه، رائع، أداة تصميم أخرى.
00:03:06لكن الفرق ليس في الشكل، بل في طريقة العمل.
00:03:09Figma تحاكي التخطيطات.
00:03:12ميزة Autolayout مستوحاة من flexbox، لكنك لا تزال ينتهي بك الأمر بترجمة كل هذا في
00:03:16رأسك.
00:03:17Penpot تبدأ أقرب بكثير إلى CSS الفعلي، لذا
00:03:21هناك جهد ذهني أقل للتحويل بين التصميم والكود.
00:03:25ثم هناك مشكلة الحبس داخل المنصة (Lock-in)، أليس كذلك؟
00:03:26Figma تستخدم ملفات خاصة بها.
00:03:29لدينا نماذج تسعير حسب المقعد.
00:03:31Penpot، مفتوحة المصدر، لذا يمكنك استضافتها ذاتياً.
00:03:34تبقى بياناتك في صيغ SVG وCSS وJSON.
00:03:38عملية التسليم مختلفة أيضاً لأنها في Figma تبدو كطبقة إضافية، أليس كذلك؟
00:03:42وضع المطورين، الإضافات، خطوات إضافية.
00:03:45في Penpot، هي مدمجة مباشرة.
00:03:47طريقة العرض للفحص أقرب بالفعل لما نحتاجه فعلياً.
00:03:50ولكي نكون منصفين، Figma رائعة.
00:03:53أنا أستخدمها، إنها ضخمة، وهي نظام بيئي مصقول.
00:03:56لكن Penpot صُممت بوضوح مع وضع المطورين في الاعتبار منذ البداية.
00:04:00ما الذي يعجب المطورين حقاً في هذا؟
00:04:02حسناً، أكبر شيء قلته، أليس كذلك؟
00:04:04إنه بسيط، مشكلة التسليم تصبح أصغر.
00:04:07هذا ضخم بالنسبة لنا.
00:04:08أنت لا تقوم بهندسة التخطيطات عكسياً بعد الآن.
00:04:11أنت تقرأ شيئاً يترجم مباشرة إلى CSS.
00:04:15وهذا يظهر في رموز التصميم أيضاً.
00:04:18الألوان، المسافات، الطباعة، كلها مهيكلة بطريقة تبدو أقرب
00:04:22لكيفية تفكيرك بالفعل في الكود.
00:04:24والاستضافة الذاتية أمر كبير لبعض الفرق.
00:04:27إذا كنت تهتم بالخصوصية، الأدوات الداخلية، وخطوط إنتاج CI/CD، كل هذا مهم، أليس كذلك؟
00:04:33لكن المصادر المفتوحة، ليست مثالية، لا توجد أداة مثالية، حتى Figma، أليس كذلك؟
00:04:37لكن Penpot قد تواجه صعوبة مع الملفات الكبيرة جداً.
00:04:40النظام البيئي للإضافات أصغر بكثير.
00:04:43وإذا كنت منغمساً بعمق في Figma، فستكون هناك نوع من منحنى التعلم،
00:04:47ولكن بصراحة، من السهل جداً تعلمها لأنها طريقة تفكير مختلفة.
00:04:51لذا نعم، أقل صقلاً في بعض الجوانب، ولكن فجوة أصغر بكثير بين التصميم
00:04:56والتطوير، وهو بصراحة ما يسعى إليه الكثير منا.
00:04:59الآن، هل تستحق الاستخدام؟
00:05:01أعتقد ذلك.
00:05:02لقد كان الأمر ممتعاً للغاية.
00:05:02أنا أستمتع بمثل هذه الأدوات.
00:05:03لذا بالنسبة للكثير منكم أيها المطورون، نعم.
00:05:06إذا كنت تعمل على مشاريع جانبية أو أي شيء كثيف التطوير، فهذا منطقي،
00:05:10خاصة إذا كنت تهتم بتوفير المال، أليس كذلك؟
00:05:12أنت تبني منتجاً أولياً (MVP)، أنت تبني شيئاً كهذا،
00:05:14أنت تحاول تجنب الحبس داخل منصة، و
00:05:16تريد الحصول على تصميمات تترجم بوضوح إلى كود.
00:05:19الآن، إذا كنت في شركة كبيرة ذات أنظمة تصميم ضخمة،
00:05:23فأنت بالفعل مبني حول Figma.
00:05:24لذا ربما لن تنتقل إلى هذا، على الأقل ليس بين عشية وضحاها، لكن
00:05:28ليس هذا هو الهدف حقاً.
00:05:29لا تحتاج Penpot لاستبدال كل شيء لتكون مفيدة.
00:05:31بالنسبة للعديد من الفرق، للكثير منكم، فهي تغطي معظم ما تحتاجه،
00:05:35وتجعل التطوير أسرع.
00:05:36وهذا هو السبب في أن المزيد من المطورين بدأوا بالفعل في تجربتها.
00:05:39إنها تقلل من كل وقت التسليم الذي يستغرقه نقل التصميم إلى كود.
00:05:45إذا كنت ترغب في تجربتها، فالأمر سهل.
00:05:46اذهب إلى تطبيق Penpot، استخدم نسخة السحابة، أو افعل ما أفعله.
00:05:50قم باستضافتها ذاتياً باستخدام Docker إذا كنت تريد مزيداً من التحكم تماماً كما هنا.
00:05:54إذا كنت تستمتع بالأدوات مفتوحة المصدر ونصائح البرمجة كهذه،
00:05:57فتأكد من الاشتراك في قناة Better Stack.
00:05:59نراكم في فيديو آخر.