Ahlam Mohammed

Design System Designer @thmanyah

[Ahlam Mohammed @ahlamMo7md]

بسم الله نخوض دروباً جديدة آملين آلا يَمسنَّا نَصبٌ ولاَ تَقل عَزِيمَتنَا 🤍

[Ahlam Mohammed @ahlamMo7md]

@avstorm Wow 🤩
Which app are we seeing here?

[Ahlam Mohammed @ahlamMo7md]

مؤتمرات Figma ما صارت عن الواجهات الجميلة أو تحسين تجربة الاستخدام بس، صرنا نتكلم عن أنظمة تصميم تفكر، تتعلم، وتتكيف مع الذكاء الاصطناعي 🧠.

بعد إعلان Schema 2025، أحس فعلاً إننا دخلنا عصر «أنظمة التصميم الذكية» أنظمة تفهم، تتطور، وتتعلم مع الفريق والـAI بنفس الوقت 🤖.

أبرز اللي أعلنوا عنه في Figma:

1️⃣ المجموعات الموسّعة (Extended Collections)
خطوة عبقرية خصوصًا للفرق اللي تشتغل على منتجات تحت براند واحد، لأنها تخلّيك تبني نظام أساسي واحد، وتوسّع منه عدّة أنظمة بعلامات مختلفة، بالضبط فكرتها قريبة من OOP في البرمجة، النظام الأساسي كأنه Base Class، والعلامات التجارية ترث منه خصائصه وتضيف شخصيتها الخاصة، من غير ما تكسر الرابط مع الأصل.
نظام واحد.. بهويات متعددة 🦾.

2️⃣ Slots
تخلّيك تضيف محتوى داخل الـ Instance بدون Detach. سابقًا ما كنا نقدر نضيف عناصر جديدة بحرية داخل مكوّن مثل القائمة المنسدلة، كنا لازم نرجع للمكوّن الأساسي ونسوي هاكس عشان نضيف شوية حوكمة أو نضطر نفصله بـ Detach. الآن؟ نقدر نضيف بحرية ومرونة بدون Detach، وهذا التوازن اللي ندور عليه، النظام يحافظ على الحوكمة، والمصمم يحتفظ بالمرونة 🚀.

3️⃣ فحص التصاميم (Check Designs)
يراجع المتغيّرات والتوكنز في لحظة، ويقولك وين الغلط أو النقص، ما عاد في «تخمينات» بين التصميم والتطوير. كل شيء واضح! كل شيء متصل. يعني الـLinting صار جزء من Figma نفسه، مو خطوة إضافية 🔥.

4️⃣ واجهة ربط الكود (Code Connect UI)
تربط Figma مع GitHub وتسوّي مطابقة تلقائية بين المكوّنات في التصميم والكود. الحدود بين التصميم والتنفيذ فعليًا بدأت تختفي، والمصمم صار لازم يفهم GitHub مثل أي مطور 🫨.

5️⃣ خادم Figma MCP
يمكّن الذكاء الاصطناعي يفهم «فكر نظام التصميم» ويطبّق الإرشادات لحاله، ويربطها مع الكود. بداية فعلية لأتمتة واعية، مو بس توليد عناصر عشوائية 🧩.

6️⃣ Make Kits و npm Imports
تخلّيك تستورد النظام كحزمة جاهزة وتولّد مكونات React وCSS تلقائيًا. النتيجة؟ نماذج أولية أسرع، والمسافة بين التصميم والتنفيذ تصغر أكثر 🤏🏼.

7️⃣ استيراد / تصدير المتغيرات (Variables Import / Export)
وأخيرًا صار في دعم رسمي للاستيراد والتصدير، تقدر تحفظ التوكنز، وتشاركها بين الأدوات، وتحدّثها برمجيًا. W3C أقرّ المعيار، و Figma طبّقته 🥳.

في النهاية، كل هذا يثبت إن أنظمة التصميم ما بتصير ملفات جامدة، صارت منظومات ذكية تتطور، تتفاعل مع الكود، وتتعلم من الفريق 🧠.

شخصيًا؟ أحس إن هذا التوجه بيغيّر طريقة تفكيرنا كمصممين. صار لازم نتعامل مع الـDesign System كمنتج يعيش ويتطور مع الوقت، مو كمكتبة نحافظ عليها وخلاص 🦾.

#Figma #Schema2025 #DesignSystems #DesignTokens #AIDesign #ProductDesign #UIDesign

[Ahlam Mohammed @ahlamMo7md]

في بعض الأحيان، المتعة في التجربة ما تجي من ميزة كبيرة، بل من لحظة ذكية وصادقة ♥️

#UXDesign #Microinteractions #ContextAwareDesign #DelightfulUX #UX

[Ahlam Mohammed @ahlamMo7md]

أثناء تجربة الدفع في أحد المطاعم باستخدام المحفظة الإلكترونية، وصلني هذا الإشعار 🥹

كـ مصممة تجربة مستخدم، هذا النوع من التفاصيل ما يمر علي مرور الكرام 👀

[Ahlam Mohammed @ahlamMo7md]

هذي اللحظة تدخل تحت شي نسمّيه:
Delightful UX و Context-Aware Design

تصميم يعرف متى يتكلم، وإيش يقول، عشان يبني للمستخدم شعور بأن المنتج "فاهمه"

[Michael · Design Partner @MichaelFilipiuk]

Most designers are lost when it comes to color.

Here's the simple 5-step process I use for all my design projects 👇

[Ahlam Mohammed @ahlamMo7md]

@Alhobani_Adv ملف

[Ahlam Mohammed @ahlamMo7md]

@Elanssari14 رهييبه يا هِنــد 🔥

[Ahlam Mohammed @ahlamMo7md]

@chouaibui مهتمه

[Ahlam Mohammed @ahlamMo7md]

@oaDk36 @Qalbiorg الدنيا دواره

[Ahlam Mohammed @ahlamMo7md]

@dunialmasmari ربي يجعل حياتك كلها جميلة ومُبهجة يا سيدة عامك 💕

[Ahlam Mohammed @ahlamMo7md]

@ABDULMAJEEDFUL صباح النور،
ننجز 🚀

[Ahlam Mohammed @ahlamMo7md]

But thanks to this feature, I was able to recover everything with just one click! Honestly, I don’t know what I would’ve done without it! 😭💕

[Ahlam Mohammed @ahlamMo7md]

Dear @figma thank you from the bottom of my heart for the "Restore this version" feature! 🙏🏻

Last night, I accidentally deleted around 40 screens 💔 and almost lost all my hard work 🤯.

#figma #ui #uidesign

[Ahlam Mohammed @ahlamMo7md]

@Elanssari14 Cute ✨

[Ahlam Mohammed @ahlamMo7md]

تحليل المنافسين (Competitive Analysis): هذه التجربة أعطتني رؤية أوسع للسوق وساعدتني في تحديد نقاط القوة والضعف، مما حيرفع مستوى تجربة المستخدم لتطبيق @Ninjaappksa بشكل ملحوظ 🚀.

[Ahlam Mohammed @ahlamMo7md]

استطلاعات الرأي والاستبيانات (Surveys): جهزنا فيها أسئلة مناسبة، ونشرناها للجمهور المستهدف، وحصلنا على 182 نتيجة، وكانت عندنا معلومات قيمة نقدر نستفيد منها 👌🏽.