✅ UI Designer Checklist for Tailwind-Friendly Design

🎨 1. Design System & Consistency

• Use a consistent spacing scale (e.g., multiples of 4: 4px, 8px, 16px…)
• Stick to a fixed set of colors (with clear primary, secondary, accent, neutral, success, error, warning, etc.)
• Define a typography scale (e.g., text-xs, sm, base, lg, xl, 2xl, etc.)
• Use fixed border-radius sizes (e.g., rounded, rounded-md, rounded-xl, etc.)
• Create and reuse components (e.g., Button, Input, Card, Modal) across the design
• Define z-index layers (e.g., base content, modals, toasts)

---

🧩 2. Atomic Layout Structure

• Use simple box-based layouts (easy to translate to flex, grid, space-x, space-y)
• Clearly separate sections using padding/margin (e.g., px-6 py-8)
• Align items using flex, items-center, justify-between patterns
• Use grid-based columns when needed (Tailwind’s grid-cols-X)

---

📏 3. Spacing & Sizing

• Stick to Tailwind spacing scale (0, 1, 2, 4, 6, 8, 10, 12, 16... which maps to px-1, px-2, etc.)
• Avoid arbitrary spacing (e.g., no 17px margin)
• Use relative units when possible (e.g., %, em, rem) for responsiveness

---

📱 4. Responsiveness

• Design mobile-first or adaptive breakpoints (sm, md, lg, xl, 2xl)
• Ensure no fixed-width containers; use flexible layouts (w-full, max-w-7xl, etc.)
• Show how components behave at different breakpoints (optional: separate artboards or annotations)

---

🔤 5. Typography

• Use Tailwind-aligned font sizes (text-sm, text-base, text-xl, etc.)
• Use consistent font weights (font-light, font-normal, font-semibold, font-bold)
• Avoid excessive letter spacing or custom font styles unless critical

---

🎛️ 6. Components & States

• Design UI components with all states:

  • Default
  • Hover
  • Focus
  • Active
  • Disabled
  • Error

• Buttons: show variants (primary, secondary, outline, ghost, etc.)

• Inputs: show filled, focused, error, success

• Modals/Toasts: show open and dismissed states

• Include loading spinners, skeletons, empty states if needed

---

🌗 7. Dark Mode

• Design for both light and dark themes, or annotate if dark mode is not required
• Avoid hardcoded colors; ensure contrast works in both modes
• Label colors semantically (e.g., text-primary, not #1A202C)

---

🧾 8. Export & Developer Handoff

• Provide clear layer naming in Figma (or design tool)
• Use Tailwind utility labels in components if possible
• Avoid raster assets unless necessary (use SVGs or icon libraries like Lucide)
• Use 8pt grid system to match Tailwind spacing logic
• Group reusable components into a component library
• Annotate tricky interactions (e.g., drag/drop, transitions)

---

⚙️ 9. Animation & Transitions

• Use Tailwind-friendly transitions (transition-all, duration-300, ease-in-out)
• Keep animations minimal and performant
• Optional: document motion specs for key components

---

📋 10. Design Tokens & Variables (Optional but Ideal)

• Use token-based naming for:

  • Colors (color-primary, color-muted)
  • Spacing (spacing-sm, spacing-lg)
  • Typography (font-body, font-heading)

• Match token values with Tailwind config for easy integration

---

🧰 Recommended Figma Plugins

• ✅ Tailwind CSS for Figma
• ✅ Design Lint (for checking inconsistencies)
• ✅ Measure (for spacing visualization)
• ✅ Iconify (for Tailwind-compatible icons like Lucide or Heroicons)