Visual Design Principles

What You'll Cover Today

Day 3 of UX Design in 5 Days focuses on prototyping in figma. Figma basics, interactive prototypes, component libraries. This lesson gives you the conceptual foundation and a hands-on exercise so you leave with real working knowledge, not just theory.

Figma

Understanding figma is foundational for everything in this course. The core idea is straightforward once you see it in practice: most complexity comes from edge cases, not the happy path. Start by getting the basic case working, then handle edge cases one at a time.

// Prototyping in Figma — working example
// Replace these values with your actual data

const example = {
  topic: 'Figma',
  day: 3,
  course: 'UX Design in 5 Days'
};

// This is where your implementation goes
function implement(config) {
  // 1. Validate inputs
  if (!config.topic) throw new Error('Topic required');
  
  // 2. Core logic
  const result = process(config);
  
  // 3. Return structured output
  return result;
}

console.log('Ready to implement Figma');

components

Once you have the basics, components becomes the practical application. The pattern you'll use most often is: configure once, reuse everywhere. Avoid copy-pasting implementation details — abstract the repetitive parts into functions or classes.

Common Mistakes on Day 3

• Skipping error handling — every real-world implementation needs error handling. Add it from the start, not as an afterthought.
• Hard-coding configuration — use environment variables for anything that differs between development and production.
• Not reading error messages — error messages in UX are usually precise. Read them carefully before searching Stack Overflow.
• Over-abstracting too early — make it work first, then refactor. Premature abstraction is the enemy of progress.