Standardy Współpracy Grafik – Programista

Design Hand-off

Single Source of Truth

1. Figma = Źródło Prawdy

  • Jedyne miejsce przechowywania aktualnych makiet.
  • Czytelne nazewnictwo warstw i grup. (np. Hero-Section, a nie Frame 42).
RWD Standards

2. Zunifikowane Breakpoints

  • Sztywne punkty zmian layoutu.
  • Mobile: projektuj na 375px/390px.
  • Tablet: projektuj na 768px.
  • Desktop: projektuj na 1440px/1920px.
  • Pokazuj zmiany układu (np. menu burger).
Consistency

3. Spójny Design System

  • Zdefiniowane style globalne (H1-H6, Body).
  • Paleta kolorów (Primary, Utility, Backgrounds).
  • Spójne odstępy (np. wielokrotność 8px).
  • Zdefiniowane cienie i zaokrąglenia.
Performance optimized

4. Formaty Grafik (Assets)

  • Zdjęcia: Format WebP.
  • Ikony/Logo: Format SVG.
  • Pamiętaj o przezroczystości (transparent BG).
  • Exportuj w odpowiedniej skali (np. @2x dla Retiny).
User Experience

5. Stany Interakcji

  • Zaprojektuj stany: Hover, Active, Disabled.
  • Kluczowy stan Focus dla nawigacji klawiaturą.
  • Stany błędów i sukcesów w formularzach.
Edge Cases

6. Logika i Edge Cases

  • Co jeśli tekstu jest za dużo? (np. 3 linie).
  • Co jeśli brak danych? (Empty States).
  • Dostępność (WCAG) - kontrast i czytelność.