بناء نظام تصميم في Figma

عن الدورة

كل فريق منتج يكتشف في النهاية أن ملفات التصميم صارت غير قابلة للصيانة: ألوان مكرّرة، components متشعّبة، فوضى في تسليم العمل للمطورين. الحل هو نظام التصميم، لكن معظم الفِرَق تبنيه بشكل خاطئ (مُبالَغ فيه هندسيًا، ضعيف التوثيق، مُهمَل خلال ستة أشهر). تمشي هذه الدورة عبر نظام حقيقي من المبادئ الأولى: tokens (اللون والخط والمسافات)، components تأسيسية، أنماط التركيب، والتوثيق الخفيف الذي يُبقي الفريق يستخدمه.

ما ستتعلّمه

• 1

  لماذا تفشل نظم التصميم

  الأنماط الخمسة التي تقتل الأنظمة. كيف يبدو 'الجيد' فعلًا على نطاق فودافون وطلبات وفيزيتا.

• 2

  Tokens: اللون والخط والمسافة و radius

  الطبقة الذرية. تسمية تصمد بعد إعادة التصميم. Variables مقابل styles في Figma.

• 3

  الأسس: الطباعة والأيقونات والحركة

  سلم خطوط يعمل في EN و AR. مجموعة أيقونات تتوسّع. مبادئ حركة يتّبعها الناس فعلًا.

• 4

  Components الأساسية: button و input و modal و card

  Components التي يحتاجها كل منتج، مبنية مرة واحدة. Variants لا تتشظّى.

• 5

  التركيب: من العناصر الأولية إلى الأنماط

  النماذج والقوائم والجداول. مكتبة الأنماط التي تعيش بين النظام والمنتج.

• 6

  توثيق لا يتعفّن

  ماذا توثّق وماذا تتخطّى. توثيق Figma مقابل Notion مقابل Storybook. إبقاؤه محدّثًا.

• 7

  التبنّي — الجزء الأصعب

  كيف تنشر، وتحصل على القبول، وتبني حلقة التغذية الراجعة مع المطورين.

المهارات اللي هتبنيها

• نظم التصميم
• Figma variables
• design tokens
• مكتبات components
• design ops
• التوثيق
• Figma
• تصميم المنتجات