النيوبروتاليستيReact UI Figma kit
طقم Figma بمظهر نيوبروتالي يطابق مكوّنات React بنسبة 1:1 — أكثر من 300 مكوّن مع variants وauto-layout وتوضيحات فئات Tailwind. توكنات فاتحة وداكنة مضمّنة؛ Pro يفتح الطقم.
- 300+ مكوّن Figma
- المتغيرات وauto-layout
- Tailwind تعليقات الفئة
- تحويل الخرائط 1:1 إلى كود برمجي
- الرموز الفاتحة والداكنة
- مُرفق مع Pro
- رموز السمات المدمجة
- التصميم → الشحن
- تصميم على الطراز النيو-بروتاليستي
- v1.3 مجموعة
المقياس التصميم و
التنمية
نظام واحد من طراز «النيو-بروتاليزم» متوفر على Figma وReact — مكونات، ومتغيرات، وتخطيط تلقائي، ورموز تتوافق مع مجموعة أدوات البرمجة (code kit) بحيث لا ينفصل التصميم عن الهندسة.
كل مكون أساسي، باعتباره مكونًا من مكونات Figma
يتم توفير الأزرار، سواء تلك الموجودة في مربعات الحوار أو غيرها، كمكونات حقيقية من نوع Figma مع متغيراتها. قم بالتصميم باستخدام نفس المكتبة التي يقوم تطبيقك بتثبيتها — وليس نموذجًا تجريبيًّا لمرة واحدة يضطر فريق الهندسة إلى إعادة بنائه من الصفر.
Tailwind الفئات في كل طبقة
يتم توضيح الطبقات بالأدوات المساعدة التي ترتبط بها في الكود. وتتم عملية التسليم عن طريق نسخ ولصق أسماء الفئات، وليس عن طريق مطابقة هذه المسافات الفاصلة بالعين المجردة.
اختر السمة مرة واحدة — وستتبعها المجموعة بأكملها
تعكس الرموز الفاتحة والداكنة موضوع الكود. ما عليك سوى تبديل العناصر الأساسية والأسطح والخطوط في المجموعة، وستتحديث جميع المثيلات تلقائيًا، بنفس الطريقة التي تعمل بها متغيرات CSS على تغيير مظهر الموقع.
محبوبة من المطوّرين والمصمّمين
وصنّاع المحتوى
صادفت عدة الـ UI بتاعتك وأخدتها على طول. جديدة ومصانة وبتتحسّن على طول — شغل رائع! 🤘
Ziv Reich, مطوّر برمجيات حبّيت بس أقول شغل ممتاز على neobrutalism.com. عاجبني جدًا. أنا فاشل في التصميم، فده كان إنقاذ. استخدمته في موقعي الشخصي.
Paul Bratslavsky, صاحب قناة Coding With Paul أخيرًا أعدت بناء موقعي الشخصي مع Neobrutalism.com — مكتبة ممتعة وسهلة جدًا للبدء!
Cameron Blackwood, صانع محتوى Neobrutalism.com من أفضل مكتبات مكوّنات الـ UI بأسلوب الرترو عندي — مكوّنات تقدر تشحنها فعليًا.
Zhengyang Hou, مطوّر مستقل من أفضل مكتبات الـ ui عندي للويب. شغل رائع — أتمنى لها كل التوفيق وأكتر.
Taseen Tanvir, مؤسّس ومصمّم جرّبت Neobrutalism.com Pro — عدة UI مش شبه كل حاجة تانية. البلوكات النيوبروتالية 🔥 خلّت تجربة اللايآوتات الغريبة أسرع بكتير.
Nitesh Padghan, كاتب بالنيابة تصميم صفحة هبوط جميل بتوازن وتدفّق مثاليين. لوحة الألوان مع الحركات تخلق تجربة مستخدم استثنائية.
Alan Obeng-Peprah, مصمم أول @ NativeXAI أنا معجب جدًا بالتصميم الذي سلّموه. المنتج النهائي طابق تمامًا ما تصوّرته.
Desmond, شريك مؤسس @ VectorlabsVentures كمالك وكالة، عادةً أقضي أسابيع في ضبط تخطيطات صفحات الهبوط للعملاء. مع Neobrutalism.com أُدرج قالبًا، أعدّل النصوص، وأكون جاهزًا للنشر.
Duke Opoku Amankwah, مؤسس @ Midas القوالب ليست مذهلة بصريًا فحسب، بل منظمة بشكل ممتاز أيضًا. وفّرت علينا أسابيع من وقت التطوير.
Abiola Braimah, مطوّر @ Studio IX جودة فائقة واهتمام بالتفاصيل. التصميم المتجاوب يعمل بلا عيوب على كل الأجهزة.
Acromond X., شريك مؤسس @ VectorlabsVentures دمج هذه القوالب في سير عملنا قلّص دورة التطوير بشكل ملحوظ. عمل ممتاز.
Raquib S., مطوّر خلفي أصبحت هذه القوالب مرجعنا الأساسي. الكود نظيف، موثّق جيدًا، وسهل التخصيص.
Hallic M., مطوّر @ AtlasLabs قوالب Neobrutalism.com تحقق التوازن المثالي بين الجمالية والوظيفة. نقلة حقيقية لمشاريعنا.
Ibrahim S., قائد الواجهة الأمامية @ ScaleUp دعم متميز وقوالب بجودة premium. العائد على هذه القوالب مذهل.
Kevin K., الرئيس التنفيذي @ WebCraft غيّرت قوالب Neobrutalism.com تمامًا طريقة تعاملنا مع مشاريع العملاء الجدد. جودة الكود استثنائية والتصاميم عالمية المستوى.
Danny G., مؤسس DevStack استخدمت مكتبات قوالب كثيرة، لكن Neobrutalism.com يتفوّق بالاهتمام بتحسين الأداء وبنية كود نظيفة.
Ian D., CTO في Wavelength الحركات والتفاعلات الدقيقة في هذه القوالب مذهلة تمامًا. أفضل استثمار لفريق التصميم لدينا.
Ben S., مصمم رئيسي في PixelPerfect كمؤسس غير تقني، ساعدتنا قوالب Neobrutalism.com على إطلاق MVP في وقت قياسي دون المساس بجودة التصميم. انبهر مستثمرونا.
Matthew I., مؤسس شركة ناشئة أقدّر مدى كون هذه المكوّنات معيارية وموثّقة جيدًا. تمكّنا من مزج أجزاء من قوالب مختلفة بسلاسة.
Garrett P., قائد الواجهة الأمامية في TechFusion عائد قوالب Neobrutalism.com مذهل. قلّصنا وقت التطوير بشكل كبير مع تسليم مواقع أعلى جودة لعملائنا.
Xavier C., مالك وكالة
مجموعة Figma
FAQ
نظام التصميم Pro (.fig) الموجود في هذه الصفحة — محتويات الملف، والتنزيل المقيد، والتعليقات التوضيحية لـ Tailwind، وكيفية ارتباطه بالكود.