الوحدة الأولى : Figma Varibles and Design Tokens
-
11- التعريف بمن هو أسامة الدريني
-
22- مقدمة عن الجلسة
-
33- جدول الاعمال وما الذي سنتعلمه
-
44- من الذي يمكنه استخدام Design System وعلاقته بـ tokens وماهو Design System
-
55- التحكم في الخصائص
-
66- الفرق بين variables و tokens
-
77- التعرف على الـ variables في Figma
-
88- ما هو Design Tokens
-
99- ادوات تساعدني في تطبيق Design Tokens
-
1010- عملية الـ Design Tokens
-
1111- ما الاسباب التي تجعلنا نستخدم design tokens داخل design tools
-
1212- التحديات التي قد تواجهك مع الفريق ونظام التسمية " naming system "
-
1313- تطبيق عملي على ما تم شرحه
-
1414- تطبيق الجزء الثاني و عمل ال gradient
-
1515- تصحيح تاسك اللايف سيشن الجزء الاول
-
1616- تصحيح تاسك اللايف سيشن الجزء الثاني
-
1717- فقرة الاسئلة الجزء الاول
-
1818- فقرة الاسئلة الجزء الثاني
الوحدة الثانية : Design Tokens
-
1919- افتتاحية الحلقة وكيف تختار ما الذي تحتاجة figma variables او figma style
-
2020-تطبيق عملي على figma variables في حالات مختلفة واستخدام tokens studio
-
2121- التعرف على مستويات الـ Tokens
-
2222- كيفية تسمية الـ tokens
-
2323- تطبيق عملي على تسمية الـ tokens
-
2424- تعليمات هامة اثناء التسمية naming structure
-
2525- تطبيق على بعض التسميات المعقدة لـ tokens
-
2626- تطبيق عملي على التسميات المعقدة
-
2727- شرح التاسك المطلوب
-
2828- فقرة الاسئلة الجزء الاول
-
2929- فقرة الاسئلة الجزء الثاني
الوحدة الثالثة : الجانب العملي التطبيقي على Design Tokens
-
3030- افتتاحية الحلقة و كيفية بناء الكارد
-
3131- كيفية التخطيط لـ Option Tokens-Alias Tokens ، تجهيز الألوان الجزء الاول
-
3232- كيفية التخطيط لـ Option Tokens-Alias Tokens ، جداول التخطيط الجزء الثاني
-
3333-كيفية التخطيط لـ Option Tokens-Alias Tokens ، جداول التخطيط الجزء الثالث
-
3434- كيفية التخطيط لـ Option Tokens-Alias Tokens ، جداول التخطيط الجزء الرابع
-
3535- بناء ال Option Tokens
-
3636- بناء ال Alias Tokens
-
3737- كيفية ضبط ال scope
-
3838- ربط الـ tokens بالعنصر
-
3939- إنشاء الـ tokens الخاصة بـ Typography
-
4040- فقرة الاسئلة الجزء الاول
-
4141- فقرة الاسئلة الجزء الثاني
الوحدة الرابعة : تحويل الـ Tokens لكود وتسليمه الى المطورين
-
4242- افتتاحية الحلقة وتعليقات على التاسك
-
4343- كيفية توثيق Documentation
-
4444 - شرح بعض التقييدات Limitations
-
4545- كيفية تحويل الـ variables إلى كود
-
4646- شرح Design-Dictionary Configurator
-
4747- كيف يمكننا تحويل الـ variables لـ JSON Code
-
4848- تحويل ملف ال JSON Code إلى ملف CSS
-
4949- شرح التاسك المطلوب
-
5050- كيف يتعامل المطور مع الملف الذي نقوم بتسليمه له
-
5151- ماذا لو تم طلب تعديلات على التصميم ؟
-
5252- شرح بعض التقييدات "Limitations" التي قد تواجهنا مع الـ variables الجزء الاول
-
5353- شرح بعض التقييدات "Limitations" التي قد تواجهنا مع الـ variables الجزء الثاني
-
5454- فقرة الأسئلة الجزء الاول
-
5555- فقرة الأسئلة الجزء الثاني
الوحدة الخامسة : تطبيق عملي شامل على كل ما سبق
-
5656- افتتاحية الحلقة وتحديات التطبيق العملي
-
5757- تحديات التطبيق العملي في الـ semantic الجزء الاول
-
5858- تحديات التطبيق العملي في الـ semantic الجزء الثاني
-
5959- تحديات التطبيق العملي في الـ semantic الجزء الثالث
-
6060- اسئلة على جزء التطبيق السابق
-
6161- التطبيق العملي للثلاث مستويات و specific tokens
-
6262- التخطيط والربط لـ specific tokens الجزء الاول
-
6363- التخطيط والربط لـ specific tokens الجزء الثاني
-
6464- التخطيط والربط لـ specific tokens الجزء الثالث
-
6565- فقرة الاسئلة الجزء الاول
-
6666- فقرة الاسئلة الجزء الثاني
الوحدة السادسة : تكملة الجانب العملي التطبيقي
-
6767- افتتاحية الحلقة ومراجعة التحديات الهامة في تاسك الـ semantic
-
6868- حل تحديات تاسك الـ semantic الجزء الاول
-
6969- حل تحديات تاسك الـ semantic الجزء الثاني
-
7070- حل تحديات تاسك الـ semantic الجزء الثالث
-
7171- التخطيط لـ card semantic للتاسك السابق
-
7272- ربط الـ variables وتحويل الـ JSON Code لـ CSS الجزء الاول
-
7373- ربط الـ variables وتحويل الـ JSON Code لـ CSS الجزء الثاني
-
7474- انشاء الـ light mode و dark mode
-
7575- تحويل كود الـ light mode و dark mode لـ CSS
-
7676- فقرة الاسئلة الجزء الاول
-
7777- فقرة الاسئلة الجزء الثاني
الوحدة السابعة : متابعة الجانب العملي التطبيقي لـ Design Tokens
-
7878- افتتاحية الحلقة وشرح لما سيتم تناوله
-
7979- تخطيط جديد لـ Option Tokens وكيفية بنائه
-
8080- بناء الـ Alias Tokens
-
8181- بناء الـ Component specific Tokens
-
8282- كيف يتم التخطيط لـ Multi themes الجزء الاول
-
8383- كيف يتم التخطيط لـ Multi themes الجزء الثاني
-
8484- بناء الـ variables الخاصة بالـ Component Collection
-
8585- بناء الـ variables الخاصة بالـ Color Collection -Language Collection
-
8686- بناء الـ Variables الخاصة بالـ Card الجزء الاول
-
8787- بناء الـ Variables الخاصة بالـ Card الجزء الثاني
-
8888- مرحلة ربط الـ variables بالـ component
-
8989- ملاحظات مهمة عن ربط الصورة
-
9090- بناء English mood & Arabic mood
-
9191- بناء Light mood & Dark mood
-
9292- تحويل الـ tokens في ملف فيجما لـ JSON code
-
9393- حل بعض المشاكل التي قد تواجهنا في أثناء إنشاء الكود
-
9494- طريقة مختلفة لتحويل الـ tokens إلى كود
-
9595- التاسك و فقرة الأسئلة
الوحدة الثامنة : تطبيقات عملية جماعية
-
9696- افتتاحية الحلقة وحل تحديات تاسك الـ Themes
-
9797- حل التحديات لتاسك الـ Themes الجزء الاول
-
9898- حل التحديات لتاسك الـ Themes الجزء الثاني
-
9999- كيفية تحويل ملف الـ JSON يدوي Tokens Set Manual
-
100100- Tokens Studio
-
101101- شرح تاسك اللايف سيشن
-
102102- تصحيح تاسك اللايف سيشن الجزء الاول
-
103103- تصحيح تاسك اللايف سيشن الجزء الثاني
-
104104- تصحيح تاسك اللايف سيشن الجزء الثالث
-
105105- فقرة الاسئلة
الوحدة التاسعة : التخطيط بواقعية للأزرار
-
106106- مقدمة وشرح كيفية التخطيط الصحيح عند تصميم أى زر Button
-
107107- تطبيق عملي لتنفيذ الزر بأقل عد من الـ variables الجزء الاول
-
108108- تطبيق عملي لتنفيذ الزر بأقل عد من الـ variables الجزء الثاني
-
109109- كيفية تصميم ال responsive design
-
110110- كيف يمكننا أن Publish Library
-
111111- ماذا بعد المعسكر ؟
-
112112- كيفية استخدام Design Tokens Gragh Engin
-
113113- شرح مثال آخر لنفس الأداة Gragh Engine الجزء الاول
-
114114- شرح مثال آخر لنفس الأداة Gragh Engine الجزء الثاني
-
115115- كيفية نقل تلك النتائج إلى ملف Figma
-
116116- فقرة الأسئلة الجزء الاول
-
117117- فقرة الأسئلة الجزء الثاني
Please, login to leave a review
Lessons:
