أساسيات الكود للمصممين

ليه المصمم محتاج يعرف كود؟

في نقاش قديم في مجتمع التصميم: هل المصمم لازم يعرف يكتب كود ولا لأ؟ الإجابة القصيرة: لازم يعرف الأساسيات على الأقل. مش عشان يبقى مطور، لكن عشان يصمم حاجات قابلة للتنفيذ ويتواصل مع المطورين بشكل أحسن.

لما بتعرف أساسيات HTML و CSS:

• بتصمم بواقعية: بتفهم إن في حاجات سهلة في التنفيذ وحاجات صعبة، فبتاخد قرارات تصميمية أذكى
• بتتواصل أحسن مع المطورين: بدل ما تقول "عايز الزرار ده يبان كده"، تقدر تقول "عايز border-radius: 12px و padding: 16px 24px"
• بتفهم القيود: الويب ليه قيود — زي إن النص بيتمدد، والشاشات مقاساتها مختلفة. لما بتفهم ده، تصميمك بيبقى أحسن
• بتقدر تعمل prototypes حقيقية: أحيانا prototype بالكود بيكون أفضل من Figma prototype
• بتزود قيمتك في سوق العمل: المصمم اللي بيفهم كود بياخد مرتب أعلى وفرص أكتر

خلينا نبدأ بالأساسيات.

أساسيات HTML: هيكل الصفحة

HTML (HyperText Markup Language) هي اللغة اللي بتبني هيكل صفحة الويب. فكر فيها على إنها الهيكل العظمي — بتحدد إيه العناصر الموجودة في الصفحة وترتيبها.

العناصر الأساسية:

<!-- عنوان رئيسي -->
<h1>أهلا بيك في موقعنا</h1>

<!-- عنوان فرعي -->
<h2>خدماتنا</h2>

<!-- فقرة نصية -->
<p>نحن شركة متخصصة في تصميم المنتجات الرقمية.</p>

<!-- رابط -->
<a href="https://example.com">زور موقعنا</a>

<!-- صورة -->
<img src="photo.jpg" alt="وصف الصورة" />

<!-- زرار -->
<button>اضغط هنا</button>

<!-- قائمة -->
<ul>
  <li>عنصر أول</li>
  <li>عنصر تاني</li>
</ul>

عناصر التجميع (Container Elements):

<!-- حاوية عامة -->
<div>محتوى هنا</div>

<!-- عناصر دلالية - بتوضح المعنى -->
<header>رأس الصفحة</header>
<nav>قائمة التنقل</nav>
<main>المحتوى الرئيسي</main>
<section>قسم معين</section>
<article>مقال أو محتوى مستقل</article>
<footer>ذيل الصفحة</footer>

ليه العناصر الدلالية مهمة؟
لما بتستخدم <header> بدل <div>، بتقول للمتصفح وقارئات الشاشة (screen readers) إن ده رأس الصفحة. ده مهم للـ accessibility وللـ SEO. كمصمم، لازم تعرف إن كل جزء من التصميم بيتحول لعنصر HTML محدد.

أساسيات CSS: تنسيق المظهر

CSS (Cascading Style Sheets) هي اللي بتحدد شكل العناصر — الألوان والأحجام والمسافات وكل حاجة بصرية.

خصائص أساسية:

/* الألوان */
color: #333333;              /* لون النص */
background-color: #f5f5f5;   /* لون الخلفية */

/* الحجم */
width: 300px;
height: 200px;
max-width: 100%;             /* مهم للـ responsive */

/* الخط */
font-family: 'Noto Kufi Arabic', sans-serif;
font-size: 16px;
font-weight: 700;            /* bold */
line-height: 1.6;            /* تباعد الأسطر */

/* المسافات */
padding: 16px;               /* مسافة داخلية */
margin: 24px;                /* مسافة خارجية */

/* الحدود */
border: 1px solid #e0e0e0;
border-radius: 12px;         /* حواف مستديرة */

/* الظلال */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

الفرق بين Padding و Margin:
ده من أكتر الحاجات اللي بتلخبط المصممين. تخيل عنصر HTML زي صندوق:

• Padding: المسافة بين المحتوى وحدود الصندوق (من جوه)
• Margin: المسافة بين الصندوق والعناصر اللي حواليه (من بره)
• Border: حد الصندوق نفسه

ده بيتسمى الـ Box Model، وهو أساس كل الـ layout في CSS.

الوحدات في CSS

من الحاجات اللي المصمم لازم يفهمها هي وحدات القياس المختلفة:

px (Pixels): وحدة ثابتة. 16px هي 16px على أي شاشة. مناسبة لحاجات زي border-width و font-size الأساسي.

rem: نسبية لحجم الخط الأساسي في الصفحة (عادة 16px). يعني 1rem = 16px, 1.5rem = 24px. مناسبة جدا للـ responsive design لأنها بتتغير مع حجم الخط.

% (نسبة مئوية): نسبية للعنصر الأب. width: 50% يعني نص عرض الحاوية. مهمة جدا للـ responsive.

vw و vh: نسبية لحجم الشاشة. 100vw هو عرض الشاشة كلها، 100vh هو ارتفاع الشاشة كلها.

نصيحة للمصممين: في Figma، بتصمم بالـ px. بس المطور هيحوّل كتير من القيم لـ rem أو %. عشان كده، صمم بأرقام بتتقسم على 8 أو 4 (يعني 8, 12, 16, 24, 32, 48, 64) — ده بيسهل التحويل.

Flexbox: ترتيب العناصر في صف أو عمود

Flexbox هو نظام ترتيب في CSS بيخلي العناصر تترتب في صف واحد (أفقي) أو عمود واحد (رأسي). هو أكتر حاجة شبه الـ Auto Layout في Figma.

.container {
  display: flex;
  flex-direction: row;        /* أفقي (الافتراضي) */
  /* flex-direction: column;  رأسي */

  justify-content: center;    /* محاذاة على المحور الرئيسي */
  align-items: center;        /* محاذاة على المحور الثانوي */
  gap: 16px;                  /* المسافة بين العناصر */
}

العلاقة مع Figma:

• Auto Layout في Figma = display: flex في CSS
• Horizontal في Figma = flex-direction: row
• Vertical في Figma = flex-direction: column
• Gap في Figma = gap في CSS
• Padding في Figma = padding في CSS
• Fill Container في Figma = flex: 1 أو width: 100% في CSS
• Hug Contents في Figma = الحجم الافتراضي في CSS

لما بتفهم العلاقة دي، تصميماتك في Figma بتطلع أسهل في التنفيذ لأنك بتفكر بنفس المنطق.

قيم justify-content الشائعة:

• flex-start: العناصر في البداية
• center: العناصر في النص
• flex-end: العناصر في النهاية
• space-between: العناصر متوزعة بمسافات متساوية بينهم
• space-around: مسافات متساوية حوالين كل عنصر

CSS Grid: شبكات ثنائية الأبعاد

Grid بيخليك ترتب العناصر في صفوف وأعمدة في نفس الوقت. مثالي للـ layouts الكبيرة.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 أعمدة متساوية */
  gap: 24px;
}

/* عنصر بياخد عمودين */
.wide-item {
  grid-column: span 2;
}

Flexbox مقابل Grid:

• Flexbox: للترتيب في بُعد واحد (صف أو عمود). مناسب لـ navigation bars، button groups، card rows
• Grid: للترتيب في بُعدين (صفوف وأعمدة). مناسب لـ page layouts، image galleries، dashboards

في Figma: الـ Auto Layout بيشتغل زي Flexbox. لحد دلوقتي مفيش Grid layout مباشر في Figma، بس تقدر تحاكيه باستخدام Auto Layout متداخل.

الـ Responsive Design

من أهم الحاجات اللي المصمم لازم يفهمها. الشاشات مختلفة — موبايل، تابلت، لابتوب، ديسكتوب — والتصميم لازم يتكيف مع كل حجم.

Media Queries:

/* ستايل للموبايل (الافتراضي) */
.container {
  padding: 16px;
  flex-direction: column;
}

/* ستايل للتابلت وأكبر */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    flex-direction: row;
  }
}

/* ستايل للديسكتوب */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

Breakpoints الشائعة:

• 320px - 480px: موبايل صغير
• 481px - 768px: موبايل كبير / تابلت صغير
• 769px - 1024px: تابلت
• 1025px - 1200px: لابتوب
• 1201px+: ديسكتوب

نصيحة: صمم Mobile First. ابدأ بتصميم الموبايل وبعدين وسّع للشاشات الأكبر. ده نفس المنطق اللي CSS بيشجعه من خلال min-width media queries.

ليه Developer Handoff مهم؟

Developer Handoff هو عملية تسليم التصميم للمطور عشان ينفذه. ده المكان اللي فهمك للكود بيفرق فيه أكتر حاجة.

مشاكل الـ Handoff الشائعة:

• المصمم بيستخدم مسافات عشوائية (13px, 17px, 22px) بدل نظام منتظم
• التصميم مش responsive — المصمم عامل شاشة واحدة بس
• مفيش توثيق للـ hover states، error states، loading states
• الألوان والخطوط مش متسقة
• التصميم فيه حاجات صعبة في التنفيذ من غير ما المصمم يعرف

إزاي تحسّن الـ Handoff:

• استخدم Design System: ألوان وخطوط وcomponents متسقة
• استخدم Auto Layout: كل frame يكون عنده Auto Layout — ده بيترجم مباشرة لـ Flexbox
• استخدم أرقام منتظمة: التزم بمضاعفات 4 أو 8 في كل المسافات
• صمم كل الحالات: normal, hover, active, disabled, error, loading, empty
• اكتب ملاحظات: وضح السلوك المتوقع لكل تفاعل
• استخدم Dev Mode في Figma: بيعرض للمطور الأكواد والقيم مباشرة

أدوات الكود للمصممين

مش لازم تتعلم كل حاجة دفعة واحدة. في أدوات بتسهل البداية:

للتعلم:

• freeCodeCamp: كورسات مجانية شاملة
• Codecademy: تعلم تفاعلي
• CSS-Tricks: مرجع ممتاز لـ CSS
• MDN Web Docs: المرجع الرسمي والأشمل

للتجربة:

• CodePen: اكتب HTML و CSS وشوف النتيجة فورا في المتصفح
• VS Code: محرر كود مجاني وقوي
• Chrome DevTools: بتفتحها بـ F12 وتقدر تعدّل أي موقع مؤقتا وتشوف الكود بتاعه

تمرين عملي:

1. افتح CodePen
2. اكتب HTML بسيط (heading, paragraph, button)
3. أضف CSS لتنسيقه (ألوان, خط, padding)
4. جرب Flexbox لترتيب العناصر
5. جرب تغير القيم وشوف النتيجة

استخدام Chrome DevTools:
ده من أقوى الأدوات للمصمم. على أي موقع:

1. اضغط F12 أو Right-click > Inspect
2. اختار أي عنصر وشوف الـ CSS بتاعه
3. عدّل القيم وشوف التأثير فورا
4. ده بيعلمك كتير عن إزاي المواقع الكبيرة بتتبنى

CSS Variables والـ Design Tokens

CSS Variables (أو Custom Properties) بتخليك تحدد قيم مرة واحدة وتستخدمها في كل مكان — بالظبط زي الـ Design Tokens في Figma.

:root {
  /* ألوان */
  --color-primary: #6366f1;
  --color-text: #1f2937;
  --color-background: #ffffff;

  /* مسافات */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;

  /* حواف */
  --radius-md: 12px;
  --radius-lg: 16px;
}

.button {
  background-color: var(--color-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
}

لما بتفهم ده، بتقدر تصمم Design System في Figma بنفس المنطق وبيكون سهل جدا على المطور يحوله لكود.

الخلاصة

مش مطلوب منك كمصمم إنك تبقى مطور. المطلوب إنك تفهم الأساسيات عشان تصمم بذكاء وتتواصل بفعالية.

ابدأ بالخطوات دي:

1. اتعلم HTML الأساسي — العناصر وهيكل الصفحة
2. اتعلم CSS — الألوان والمسافات والخطوط
3. افهم Flexbox — لأنه نفس منطق Auto Layout في Figma
4. جرب Chrome DevTools على المواقع اللي بتحبها
5. صمم في Figma وحاول تنفذها بالكود على CodePen

كل ما زادت معرفتك بالكود، كل ما تصميماتك بقت أحسن وأسهل في التنفيذ والتواصل مع المطورين بقى أسلس. مش محتاج تبقى خبير — محتاج بس تتكلم نفس اللغة.