يجمع أنظمة تصميم مفتوحة المصدر يمكن استخدامها مباشرة في Figma.
يأتي مع وثائق واضحة لتسهيل عملية التطوير.
هذا الموقع يعمل كمكتبة مركزية أو فهرس يضم 60 نظام تصميم (Design System) مفتوح المصدر من شركات عالمية، جميعها متاح للاستخدام المباشر في Figma.
💎 أهم ما يميز المورد:
1. مجموعة ضخمة وموثوقة
· تنوع عالمي: يحتوي على أنظمة من شركات كبرى مثل Google (Material Design)، Microsoft (Fluent)، Apple، IBM (Carbon)، Shopify (Polaris)، GitHub (Primer)، وغيرها الكثير.
· توثيق مدعوم بالكود: كما ذكرت، كل نظام تصميم يأتي مع وثائق تطوير واضحة تربط بين تصميم Figma والكود الفعلي (React، Angular، Vue، إلخ)، مما يسهل العمل بين المصممين والمطورين.
2. فلترة وترشيح ذكية
· فلترة حسب لغة البرمجة: يمكنك عرض الأنظمة التي تدعم إطار العمل الذي تستخدمه (مثل React، Angular، Vue، iOS، Android).
· فلترة حسب دعم السمات (Theming): يمكنك اختيار الأنظمة التي تدعم الوضع الداكن (Dark Mode) أو رموز التصميم (Design Tokens)، وهو أمر أساسي للتطبيقات الحديثة.
🛠️ كيف يمكن الاستفادة منه؟
لنفترض أنك تبدأ في تصميم لوحة تحكم (Dashboard) لتطبيق ويب:
1. تذهب للموقع وتستخدم فلترة "Language" لاختيار React (إذا كان فريق التطوير يستخدمه).
2. تختار "Dark Mode" تحت "Theming Support" لأن تطبيقك يحتاج وضعًا داكنًا.
3. ستظهر لك على الفور أنظمة مثل Ant Design، Chakra UI، و MUI (Material-UI).
4. تختار النظام الذي يعجبك، وتنقر على الرابط (غالبًا ما يكون لمستودع GitHub أو موقع الوثائق الرسمي) لتحميل ملفات Figma وقراءة الوثائق.
5. تبدأ التصميم باستخدام مكونات جاهزة ومتناسقة، مع العلم أن هناك كودًا مطابقًا لها، مما يوفر وقت فريق التطوير ويحافظ على الاتساق.
designsystemsforfigma.com
