UI/UX Design in Figma

1. Create new Figma file → Set up frame (iPhone 14: 393×852)
2. Add basic layout grid (8pt base grid)
3. Start with wireframe → Add components → Apply visual design
4. Create prototype connections between screens

Progress:

• Research & define requirements
• Create wireframes/low-fidelity mockups
• Design high-fidelity screens
• Build component library
• Create interactive prototype
• Conduct usability testing
• Iterate based on feedback
• Prepare handoff documentation

Detailed Process:

1. Setup & Planning

   • Create project structure (Pages: Research, Wireframes, Designs, Components)
   • Set up design tokens (colors, typography, spacing)
   • Define breakpoints and device frames

2. Wireframing

   • Use gray boxes and basic shapes
   • Focus on layout and information hierarchy
   • Keep it low-fidelity to avoid attachment

3. High-Fidelity Design

   • Apply brand colors and typography
   • Add real content where possible
   • Ensure accessibility (4.5:1 contrast ratio minimum)

4. Component Creation

   • Build atomic components (buttons, inputs, cards)
   • Use auto-layout for responsive behavior
   • Create variants for different states

5. Prototyping

   • Link screens with realistic transitions
   • Add micro-interactions for key actions
   • Test flow on actual devices

Example 1: Mobile App Login Screen Input: Need login screen for fitness app Output:

• Frame: 393×852 (iPhone 14)
• Components: Logo, email input, password input, login button, "forgot password" link
• Auto-layout: Vertical stack with 24px spacing
• Prototype: Connect to dashboard on successful login

Example 2: Design System Component Input: Need consistent button component Output:

• Master component with variants (Primary, Secondary, Disabled)
• States: Default, Hover, Pressed, Loading
• Auto-layout with 16px horizontal padding
• Text style: Semibold 16px

• Use 8pt grid system - Ensures consistent spacing and alignment
• Name layers descriptively - "Button/Primary" not "Rectangle 1"
• Leverage auto-layout - Makes designs responsive and easier to maintain
• Create component variants - Reduces duplication and maintains consistency
• Use real content - Lorem ipsum hides content hierarchy issues
• Test on devices - Use Figma mobile app for realistic testing
• Document interactions - Add notes explaining complex transitions
• Organize with pages - Separate research, wireframes, designs, components
• Use consistent naming - Follow team conventions for layers and components
• Version control - Use Figma's branching for major iterations

• Pixel-perfect obsession - Focus on user experience over pixel precision
• Too many variants - Start simple, add complexity when needed
• Ignoring constraints - Don't design impossible-to-build interactions
• No component library - Leads to inconsistent designs and extra work
• Designing in isolation - Collaborate with developers early and often
• Forgetting edge cases - Design for error states, empty states, loading states
• Not testing prototypes - Always test flows before finalizing
• Poor file organization - Clean up unused components and pages regularly
• Accessibility oversight - Check color contrast and keyboard navigation
• Not considering performance - Avoid excessive use of effects and large images