أدوات ومصادر للمصممين، مختارة ومرتبة حسب التصنيف. خطوط وأيقونات ومصادر إلهام وإضافات Figma ومراجع تستحق أن تبقى مفتوحة.
(01)اختيارات الأسبوع
- مجاني جزئيًا
Mobbin
مصادر إلهامشاشات حقيقية ورحلات كاملة من تطبيقات منشورة. ابحث بالنمط بدل التخمين.
mobbin.com - مجاني
IBM Plex Sans Arabic
خطوط عربيةعائلة خطوط عربية واضحة للواجهات بسبعة أوزان، تتناسب مع الخطوط اللاتينية. هذا الموقع يستخدمها.
fonts.google.com - مجاني
Realtime Colors
ألوان وتباينجرّب الباليت على صفحة حقيقية قبل اعتمادها، ثم صدّر الـ tokens.
realtimecolors.com - مجاني جزئيًا
Shots
موك أب وأصولحوّل أي سكرين شوت إلى موك أب جهاز مرتب لدراسات الحالة والبوستات في ثوانٍ.
shots.so
(02)مجموعات
(03)مصادر إلهام
- مجاني جزئيًا
Mobbin
مصادر إلهامشاشات حقيقية ورحلات كاملة من تطبيقات منشورة. ابحث بالنمط بدل التخمين.
mobbin.com - مدفوع
Page Flows
مصادر إلهامرحلات مستخدم مسجلة مثل التسجيل والدفع والترقية، خطوة بخطوة.
pageflows.com - مجاني
Land-book
مصادر إلهاممعرض كبير ومرتب لصفحات الهبوط والبورتفوليو.
land-book.com - مجاني
Godly
مصادر إلهاممراجع جريئة لتصميم المواقع مع الحركة، مسجلة كفيديو.
godly.website - مجاني
Awwwards
مصادر إلهاممواقع حاصلة على جوائز، يتم تقييمها على التصميم وسهولة الاستخدام والإبداع.
awwwards.com - مجاني
Behance
مصادر إلهامدراسات حالة كاملة من مصممين حول العالم. ادرس طريقة الحكي، لا الشكل فقط.
behance.net
(04)خطوط عربية
- مجاني
Google Fonts Arabic
خطوط عربيةكل خطوط Google المجانية التي تدعم العربية، في صفحة واحدة قابلة للفلترة.
fonts.google.com - مجاني
IBM Plex Sans Arabic
خطوط عربيةعائلة خطوط عربية واضحة للواجهات بسبعة أوزان، تتناسب مع الخطوط اللاتينية. هذا الموقع يستخدمها.
fonts.google.com - مجاني
Tajawal
خطوط عربيةخط عربي هندسي يبقى مقروءًا في الأحجام الصغيرة.
fonts.google.com - مجاني
Cairo
خطوط عربيةعائلة متغيرة بالعربي واللاتيني، مناسبة للعناوين والنصوص القصيرة في الواجهات.
fonts.google.com - مدفوع
29LT
خطوط عربيةمسبك خطوط عربية احترافي. المكان المناسب عندما تحتاج العلامة عائلة مرخصة.
29lt.com
(05)خطوط وتايبوجرافي
- مجاني
Fontshare
خطوط وتايبوجرافيخطوط لاتينية عالية الجودة من Indian Type Foundry، مجانية للاستخدام التجاري.
fontshare.com - مجاني
Typewolf
خطوط وتايبوجرافيتنسيقات خطوط واستخدامات حقيقية في مواقع، مع بدائل للخطوط المدفوعة.
typewolf.com - مجاني
Typescale
خطوط وتايبوجرافيعاين مقياس أحجام الخطوط وانسخ القيم مباشرة إلى الـ styles.
typescale.com
(06)أيقونات
- مجاني
Lucide
أيقوناتمجموعة أيقونات خطية مفتوحة المصدر بسُمك واحد وشبكة واحدة وحزم برمجية.
lucide.dev - مجاني
Phosphor
أيقوناتآلاف الأيقونات بستة أوزان، من الرفيع حتى المصمت والـ duotone.
phosphoricons.com - مجاني
Iconoir
أيقوناتمكتبة أيقونات هادئة ومتناسقة ومفتوحة المصدر، بنسخ Figma وكود.
iconoir.com - مجاني جزئيًا
Streamline
أيقوناتمكتبة ضخمة من الأيقونات والرسومات بأساليب متعددة، مع إضافة Figma.
streamlinehq.com
(07)ألوان وتباين
- مجاني
Realtime Colors
ألوان وتباينجرّب الباليت على صفحة حقيقية قبل اعتمادها، ثم صدّر الـ tokens.
realtimecolors.com - مجاني جزئيًا
Coolors
ألوان وتبايناصنع واحفظ باليتات بسرعة، مع فحص التباين وعمى الألوان.
coolors.co - مجاني
Radix Colors
ألوان وتباينسلالم ألوان من 12 درجة مصممة للواجهات، لكل درجة دور: الخلفيات والحدود والنصوص.
radix-ui.com - مجاني
WebAIM Contrast Checker
ألوان وتباينضع لونين واعرف إن كان النص ينجح في معايير WCAG AA و AAA.
webaim.org
(08)إضافات Figma
- مجاني جزئيًا
Stark
إضافات Figmaفحوصات إتاحة داخل Figma: التباين ومحاكاة الرؤية وترتيب التركيز.
getstark.co - مجاني
Iconify
إضافات Figmaأضف أيقونات من أكثر من مئة مجموعة مفتوحة المصدر كـ vectors نظيفة.
figma.com - مجاني
Content Reel
إضافات Figmaاملأ التصميم بأسماء وصور وأرقام حتى يتوقف عن قول Lorem ipsum.
figma.com - مجاني جزئيًا
Autoflow
إضافات Figmaيرسم أسهم الرحلة بين الشاشات، مفيد لمخططات رحلة المستخدم.
figma.com
(09)موك أب وأصول
- مجاني
Unsplash
موك أب وأصولصور مجانية عالية الجودة، مع إضافة Figma لوضعها داخل الإطارات.
unsplash.com - مجاني جزئيًا
Shots
موك أب وأصولحوّل أي سكرين شوت إلى موك أب جهاز مرتب لدراسات الحالة والبوستات في ثوانٍ.
shots.so - مجاني
Mockups Design
موك أب وأصولملفات موك أب PSD مجانية للهويات والمطبوعات والتغليف.
mockups-design.com - مجاني جزئيًا
Untitled UI
موك أب وأصولUI kit ونظام تصميم كبير على Figma. ممتاز لدراسة طريقة بناء الـ components.
untitledui.com
(10)نماذج وحركة
- مجاني جزئيًا
Framer
نماذج وحركةصمّم وانشر مواقع حقيقية بحركة، من غير كود.
framer.com - مجاني جزئيًا
Rive
نماذج وحركةرسوم متحركة تفاعلية تستجيب للمستخدم، وتُصدَّر كملفات صغيرة جدًا.
rive.app - مجاني جزئيًا
LottieFiles
نماذج وحركةرسوم متحركة خفيفة للتطبيقات والمواقع، مع مكتبة مجانية كبيرة.
lottiefiles.com - مدفوع
ProtoPie
نماذج وحركةنماذج تفاعلية عالية الدقة بمنطق حقيقي وحساسات ومتغيرات.
protopie.io
(11)ذكاء اصطناعي للتصميم
- مجاني جزئيًا
Relume
ذكاء اصطناعي للتصميميولّد خريطة الموقع والـ wireframes من وصف قصير، ثم يصدّرها إلى Figma.
relume.io - مجاني جزئيًا
v0
ذكاء اصطناعي للتصميمصف الواجهة واحصل على كود React يعمل، مفيد لتجربة الفكرة في المتصفح.
v0.dev - مدفوع
Midjourney
ذكاء اصطناعي للتصميمتوليد صور للـ moodboards والتصاميم الرئيسية وتجارب الـ art direction.
midjourney.com - مجاني جزئيًا
Google Flow
ذكاء اصطناعي للتصميماستوديو Google الإبداعي بالذكاء الاصطناعي للفيديو والصور، مبني على Veo وImagen. مناسب لتجارب الحركة والفيديوهات الدعائية القصيرة.
flow.google.com - مجاني
Arena
ذكاء اصطناعي للتصميمقارن بين نماذج الذكاء الاصطناعي جنبًا إلى جنب على البرومبت نفسه، مع ترتيب عام لنماذج النص والصور وتصميم المواقع.
arena.ai
(12)تعلّم UX
- مجاني
Laws of UX
تعلّم UXمبادئ علم النفس وراء الواجهات الجيدة، كل مبدأ في صفحة واضحة.
lawsofux.com - مجاني
Nielsen Norman Group
تعلّم UXمقالات UX مبنية على أبحاث. عندما تحتاج للدفاع عن قرار، ابدأ من هنا.
nngroup.com - مدفوع
Refactoring UI
تعلّم UXتكتيكات عملية في التصميم البصري: الهرمية والمسافات والألوان والعمق.
refactoringui.com - مجاني
Material Design 3
تعلّم UXنظام تصميم Google، ويتضمن دليلًا واضحًا لاتجاه القراءة وعكس العناصر.
m3.material.io - مجاني
Apple HIG
تعلّم UXإرشادات Apple لتصميم الواجهات. ابدأ بقسمي التخطيط والخطوط.
developer.apple.com