شرح Design System - Part 2 - Text Fields

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 ก.พ. 2025

ความคิดเห็น • 60

  • @islamhefney
    @islamhefney  6 หลายเดือนก่อน +5

    لينك الفايل علي فيجما:
    www.figma.com/design/HgSX9f1NNHa0gQPVYrQUER/Design-System?node-id=1-150&t=D3H9OjYyLzlLwCox-1

    • @mohamedsherifxo
      @mohamedsherifxo 6 หลายเดือนก่อน

      تسلم يا هندسة والله، جزاك الله كل خير 🙏❤❤

  • @amiraahmed8276
    @amiraahmed8276 หลายเดือนก่อน

    شرح تحفه♥️
    يا ريت بجد تشرح الstyle في فيديو لوحده في اسرع وقت ويكون شامل كل حاجه 🥰

    • @islamhefney
      @islamhefney  หลายเดือนก่อน

      قريب جدا إن شاء الله

    • @amiraahmed8276
      @amiraahmed8276 หลายเดือนก่อน

      @ يا ريت تعمل project كامل
      نرتب فيه افكارنا يعني تبدأ من اول الفكره وتعمل الديزاين سيستم اللي هتمشي عليه لحد ما تخلص للاخر🩵
      الفكرة دي بجد هتفيدنا كتير خصوصاً الناس اللي عايزه تشتغل فريلانسر🩵

  • @hossamsheref9105
    @hossamsheref9105 หลายเดือนก่อน

    احلى انستركتور ده ولا ايه!! 😍😍

    • @islamhefney
      @islamhefney  29 วันที่ผ่านมา +1

      حبيبي يا حسام 🙏🙏

  • @islam-hossain
    @islam-hossain 3 หลายเดือนก่อน +1

    رائع كعادتك يااسلام .. ربنا يوفقك ..ممكن تقولنا ال road map اللى حضرتك مشيت عليها علشان توصل للمستوى الاحترافى ده ماشاء الله

    • @islamhefney
      @islamhefney  3 หลายเดือนก่อน +2

      الف شكر يا اسلام علي كلامك الطيب .. علي قدي جدا علي فكرة 😁 .. إن شاء الله ممكن ابقي اعمل فيديو عن roadmap للي عايز يبدأ من وجهة نظري.

    • @islam-hossain
      @islam-hossain 3 หลายเดือนก่อน

      @@islamhefney والله مش بجاملك يااسلام ...انت فعلا شرحك مبسط ورائع ...وبتقدم معلومات قيمة ..مش موجودة في المحتوى العربي ومش بتبخل بالمعلومات وبتقدم معلومات كاملة ... شكراً ليك مرة تانية

    • @islamhefney
      @islamhefney  3 หลายเดือนก่อน +1

      @@islam-hossain مش عارف اقولك ايه بس حقيقي مبسوط جدا من كلامك وانك استفدت .. الف شكر 🙏

  • @Mohamed_Bahaa-l
    @Mohamed_Bahaa-l 5 หลายเดือนก่อน

    حقيقي شرح حضرتك اكتر من رائع وكوالتي عالية جداً 👏🏻❤️❤️

    • @islamhefney
      @islamhefney  5 หลายเดือนก่อน +1

      الف شكر يا محمد 🙏

  • @sarael-jendy
    @sarael-jendy 3 หลายเดือนก่อน

    شرحك جميل جدا ومفصل جزاك الله كل خير

    • @islamhefney
      @islamhefney  3 หลายเดือนก่อน

      الف شكر يا سارة .. جزانا واياكم 🙏

  • @SallyMagdi1852
    @SallyMagdi1852 5 หลายเดือนก่อน

    شرحك ممتاز حقيقي واستفدت جدا جدا

    • @islamhefney
      @islamhefney  5 หลายเดือนก่อน +1

      الف شكر يا سالي 🙏

  • @Zahra-opaia
    @Zahra-opaia 7 หลายเดือนก่อน +2

    يا ريت فعلا حضرتك تعمل فيديو لل style.لوحده

    • @islamhefney
      @islamhefney  7 หลายเดือนก่อน +1

      إن شاء الله هيكون علي القناة قريب يا زهرة

  • @mariamali9070
    @mariamali9070 5 หลายเดือนก่อน

    High-quality content 👌

    • @islamhefney
      @islamhefney  5 หลายเดือนก่อน

      Thank you 🙏

  • @YoussefAbouzaher
    @YoussefAbouzaher 9 หลายเดือนก่อน

    تسلم يا هندسة، شرح مفيد جدًا

    • @islamhefney
      @islamhefney  9 หลายเดือนก่อน +1

      شكرا يا يوسف 🙏

  • @AhmedAbourehab2001
    @AhmedAbourehab2001 9 หลายเดือนก่อน

    بسم الله مشاء الله ربنا يوفقك يارب ❤️❤️❤️

    • @islamhefney
      @islamhefney  9 หลายเดือนก่อน

      الف شكر 🙏

  • @AsmaaDosuky
    @AsmaaDosuky 5 หลายเดือนก่อน

    شرحك ممتاز وسهل الفهم بس لو تعمل مثال بالcomp اللى نفذتها هيبقي مفيد جدا .. يعنى مثلا للفيديو ده لو فيه مثال لشكل الفورم بعد ما عملنا ال Fields هيبقي حلو اوى.

    • @islamhefney
      @islamhefney  5 หลายเดือนก่อน

      شكرا يا اسماء 🙏 هحاول اظبطها فالفيديوهات اللي جاية حاضر

  • @EmanEssam.
    @EmanEssam. 5 หลายเดือนก่อน

    شكرا من هنا لبكرة

    • @islamhefney
      @islamhefney  5 หลายเดือนก่อน

      عفوا يا ايمان 🙏

  • @RanaWeb-hh1qo
    @RanaWeb-hh1qo 9 หลายเดือนก่อน

    حقيقي حاجه في منتهي الجمال اننا نلاقي محتوي عربي بالجودة و البساطه دي ربنا يجزيك كل خير
    بعد اذنك يا بشمهندس ممكن طريقه للتواصل مع حضرتك ضروري جدا

    • @islamhefney
      @islamhefney  9 หลายเดือนก่อน

      متشكر جدا يا رنا 🙏 ممكن علي لينكد ان

    • @RanaWeb-hh1qo
      @RanaWeb-hh1qo 9 หลายเดือนก่อน

      @@islamhefney للأسف عشان اتواصل مع حضرتك لينكد ان محتاج النسخه ال premium

  • @hassanmahmoud4162
    @hassanmahmoud4162 18 วันที่ผ่านมา

    شرح حضرتك ممتاز جدا ما شاء الله
    بس عندي سؤال
    هو لي حضرتك عملت Variant للكومبوننت بكل الحالات دي بالنسبة للأيقونز
    يعني لي معملناش input field واحد بس لكل حالة سواء filled او error مثلا ونحط التريلين أيقون والليدين أيقون ونعمل كل واحدة فيهم boolean اعتقد دا هيكون اسرع وهيكون معانا نفس النتيجة

    • @islamhefney
      @islamhefney  17 วันที่ผ่านมา

      الف شكر يا حسن 🙏 اكيد ممكن نعمل الايكونز بال boolean ولكن الشكل اللي فالفيديو ليه غرض وهو لعرض كل الحالات ب تفاصيلها لل developers او افراد التيم او الكلاينت اللي بيراجع الشغل
      لو استخدمنا ال boolean يا اما هنظهر الايكونز كلها فنفس الفيلد يا اما هنخفيهم ودا مش افضل حاجة ف احنا مش بنفكر غ شغلنا احنا بس احنا بنفكر فاللي هيتشتغل بعدنا او هيراجع او يحتاج يتطلع علي تفاصيل التصميم

  • @safwanahmed8069
    @safwanahmed8069 7 หลายเดือนก่อน

    أحسنت ياصديقي ❤❤

  • @monaeldkrory8073
    @monaeldkrory8073 9 หลายเดือนก่อน

    ماشاء الله ع الشطارة بجد👏👏👏

    • @islamhefney
      @islamhefney  9 หลายเดือนก่อน

      شكرا يا مني 🙏

  • @s7s_space
    @s7s_space 5 หลายเดือนก่อน

    ازاي اخلي الأيقونات اختار م مجموعة معينة ؟ يعني مجموعة ايقونات محددة فقط ؟ هل يمكن عمل ذلك ؟

    • @islamhefney
      @islamhefney  5 หลายเดือนก่อน

      ممكن تضيف الايكونز اللي بتستخدمها ف فريم جوة الفايل وتقعد تضيف فيه الايكونز اللي بتحتاجها من اي مكتبة وتعمل swap لاي واحدة فيهم .. او انك تضيف المكتبة كلها في الفايل وتعمل swap بالبحث عن اسامي الايكونز اللي بتحتاجها

  • @The_AhmadHassan
    @The_AhmadHassan 9 หลายเดือนก่อน

    عاااش، تسلم 🎉

  • @hanagis23
    @hanagis23 9 หลายเดือนก่อน

    ماشاء الله الشرح ممتاز ربنا يكرمك .عندى سؤال ازاى بعمل الايقون instant swap

    • @islamhefney
      @islamhefney  9 หลายเดือนก่อน

      متشكر جدا ليكي .. ممكن زي ما في الفيديو كدة توصلي لل instance بتاع الايكون هتلاقي اوبشن ال instance swap فالبار اللي عاليمين وتقدري تبدلي ب اي ايكون .. شرط تكون موجودة في نفس الملف ك component
      والطريقة التانية هي انك لما توصل للفريم بتاع الايكون تعملي create instance property لكل ال variations اللي عملناها بحيث التبديل يبقي من برا خالص مع باقي ال properties اللي عملناها فالفيديو
      الطريقة التانية دي انا شارحها في فيديو علي القناة بتاع ال variants

  • @olahamdy24
    @olahamdy24 8 หลายเดือนก่อน

    ما شاء الله .. والله انا ححاول اعمل الديزاين سيستم اللى فى فيديوهاتك فى مشروعى الحالى 👌بس هو المشروع مش واضح فهل اعمل ديزاين الاول و لما يتوافق على الديزاين بعدها اعمل components و بعدها استخدمها فى الديزاين سيستم ؟

    • @islamhefney
      @islamhefney  8 หลายเดือนก่อน

      اعتقد اه يعني لما يبقي في اتجاه او لغة تصميم واضحة هتمشي عليها ممكن وقتها تبتدي تظبطي ال components

  • @mohamedsherifxo
    @mohamedsherifxo 6 หลายเดือนก่อน

    ممكن تنزل الfile بتاع ال color styles اللي اشتغلت بيه 🙏

    • @islamhefney
      @islamhefney  6 หลายเดือนก่อน

      هنزل الفايل كله يا محمد حاضر

  • @marinanagub5710
    @marinanagub5710 7 หลายเดือนก่อน

    هو أنا لو عايزه اعمل design
    لموبايل Samsung
    استخدم انهي frame
    و هل الفريم اللي هستخدمه دا
    هيمشي مع كل الموبايلات
    و كمان بخصوص الكي بورد. احط انهي كي بورد ؟

    • @islamhefney
      @islamhefney  7 หลายเดือนก่อน +1

      الموبايل عموما انا بستخدم ٣٦٠ عرض والمحتوي بيبقي ف ٣٢٨ بيكسل بعد ما اسيب ١٦ يمين وشمال
      هيمشي مع كل الموبايلات لانه هيبقي responsive ممكن تشوفي فيديو ال responsive design في معلومات اكتر لو حابة
      بالنسبة الكيبورد ممكن اي كيبورد عادي يحبذ طبعا لو اندرويد تبقي بتاعة الاندرويد ولكن الاهم ال positioning بتاعها والهدف من اظهارها زي مثلا انها متغطيش اي محتوي او interactive element مهم

    • @marinanagub5710
      @marinanagub5710 7 หลายเดือนก่อน

      @@islamhefney يعني لوحه الكبيورد اندرويد هتمشي مع كل الموبايلات
      يعني مثلا أنا دلوقتي في مشروع ابلكيشن ماركت. فا اكيد ناس كتيره هتستخدمه
      امشي علي انهي أندرويد ولا iOS ولا ٢
      شكرا بجد علي الاهتمام و الرد بكل تفاصيل
      طبعا هشوف فيديو responsive

    • @islamhefney
      @islamhefney  7 หลายเดือนก่อน

      @@marinanagub5710 ممكن التركيز يبقي علي ال positioning وعلي شكل الكيبورد عموما فالسنريوهات المختلفة امتي تكون حروف وامتي تكون ارقام بس زي ما بنضيف otp مثلا وهكذا
      كدة كدة ال operating systems سواء ios او google ليهم ال keyboards الخاصة بيهم هيبقي مهم بس طريقة استخدامهم في سيناريوهات ال app المختلفة يعني فالتصميم سواء دي او دي

  • @AhmedAbourehab2001
    @AhmedAbourehab2001 9 หลายเดือนก่อน

    مممكن تبقي تعمل فديو route map للمجال

    • @islamhefney
      @islamhefney  9 หลายเดือนก่อน +1

      إن شاء الله قريبا يا احمد

  • @Zahra-Opaia-0
    @Zahra-Opaia-0 7 หลายเดือนก่อน

    هو حضرتك ليه مستخدمتش هنا ال _base-component ؟

    • @islamhefney
      @islamhefney  7 หลายเดือนก่อน

      قصدك ليه مستخدمتش بتاع الماتريال بدون تعديل؟

    • @Zahra-Opaia-0
      @Zahra-Opaia-0 7 หลายเดือนก่อน

      @@islamhefney لا اقصد اننا نعمل base text field فيه المقاسات وال properties اللي احنا عايزينها ومنه ناخد نسخه ونبني ال structure كله بحيث لو عايزين نعدل ف أي مقاسات منضطرش نعدل ف كل ال components.
      أو السؤال بمعني تاني do we no longer use the nested variables or base component.?

    • @islamhefney
      @islamhefney  7 หลายเดือนก่อน

      ​@@Zahra-Opaia-0 تمام انا فهمت قصدك طيب احنا مبدئيا لو اتكلمنا عن الالوان زي ال fill وال stroke اللي بتتغير مع كل state دا هيخليني مستفدش من موضوع اني اعمل component لل field بكل ال properties وبعدها ابني الباقي ... النقطة التانية اني مثلا لو هتكلم عن ال icons هتبقي instance جوة instance ودا مش هيخليني اعرف اعمل ال instance swap ومش هيسهل عليا حتة اني اغير ال icons من برة وقت ما اطلع instance من الحالات المختلفة اللي عملتها
      اذا انا هستفيد في الحالة دي اني اغير ال padding او ال radius وفالحالتين دول سهل عملهم ب اني اعمل select ل field واحد بس وبعدها select matching layers واقدر اغير الاتنين بكل سهولة هي الطريقة تنفع ولكن انا بفضل اللي في الفيديو حتي اكون قللت عدد ال components واللي هبقي محتاج اني دايما اقللهم بقدر الامكان بالذات لو project كبير

    • @Zahra-Opaia-0
      @Zahra-Opaia-0 7 หลายเดือนก่อน

      @@islamhefney فهمت قصد حضرتك ٫ شكرا جدا ، بس ممكن كمان نعمل nested property ف بتظهر من بره عادي .

  • @olahamdy24
    @olahamdy24 8 หลายเดือนก่อน

    معلش عندي سوال ملغبطني ليه مش عملنا اول كومبوننت بالاتنين ايكونز و لما استخدم ال instant ابقي اخفي الايكونز اللي مش عايزها ؟ و التكست يبقي fill بحس لما الايكون تختفي يتظبط لوحده

    • @islamhefney
      @islamhefney  8 หลายเดือนก่อน

      مهو احنا عملناهم كدة المفروض عملنا كل الحالات سواء ايكون واحدة او ٢ او بدون وبعد كدة متحكم ف اظهارهم او اخفائهم وقت ما نخرج ال instance

  • @hanaosman4492
    @hanaosman4492 9 หลายเดือนก่อน

    👏👏👏👏👏👏