Tools Every Designer Needs

The Designer's Toolkit

Product design in 2024 relies on a set of digital tools for every stage of the process -- from capturing research insights to building high-fidelity prototypes. Knowing which tools exist, what they are for, and how they relate to each other is an important part of becoming a working designer.

---

The Essential Tool: Figma

Figma is the industry-standard tool for product design. It is browser-based, collaborative, and used by product designers at virtually every major tech company globally and increasingly across Africa's growing tech sector.

What Figma does:

• Wireframing: Create simple, layout-focused screens to explore structure before visual design
• Visual design (UI): Apply typography, colour, icons, and imagery to create pixel-perfect designs
• Prototyping: Link screens together and add interactions to create clickable, animated prototypes
• Collaboration: Multiple designers and stakeholders can work on the same file simultaneously (like Google Docs for design)
• Developer handoff: Developers can inspect your designs to get precise measurements, colours, and CSS properties

Why Figma won:

• Before Figma, designers used Adobe XD, Sketch (Mac only), or Photoshop. Figma's browser-based, real-time collaboration destroyed the competition.
• Free for individuals (up to 3 projects); affordable for teams

Key Figma concepts:

• Frames: Containers representing screens (like artboards in other tools)
• Components: Reusable design elements (buttons, cards, navigation bars) that update everywhere when changed in one place
• Auto Layout: Automatically adjusts spacing and sizing as content changes -- essential for responsive design
• Variables: Store colours, text styles, and spacing values to maintain consistency across a design system
• Plugins: Extend Figma with additional capabilities (icon libraries, accessibility checkers, content fill)

---

Research and Discovery Tools

Notion or Confluence

Documentation tools for capturing research findings, writing user interview notes, building research repositories, and maintaining design documentation.

Miro or FigJam

Digital whiteboards for collaborative workshops. Used for:

• Affinity mapping (organising research insights into themes)
• Journey mapping (mapping the user's experience over time)
• Brainstorming and ideation sessions
• Creating empathy maps

Dovetail or Aurelius

Dedicated research repositories for storing and tagging user interview recordings, notes, and insights. Makes it easy to search across research history.

---

Usability Testing Tools

Maze

Connects to Figma prototypes and runs unmoderated usability tests. Users complete tasks, and Maze records where they click, how long they take, and where they fail. Generates detailed reports automatically.

UserTesting

Access a panel of participants who will complete tasks and narrate their experience on video. Faster than recruiting your own participants.

Lookback or Lookback.io

Tool for moderated (researcher-led) remote usability testing sessions with video recording.

---

Design System Tools

A design system is a collection of reusable components, guidelines, and standards that allows a team to build consistent products at scale.

Figma is used to build and maintain design systems. But two additional resources are important:

Storybook

A tool for frontend developers to document and showcase components. Designers and developers use Storybook to see how components look in their implemented state.

Zeroheight or Supernova

Tools that generate living documentation websites from your Figma design system, making guidelines accessible to the whole product team.

---

Handoff to Developers

One of the most important (and historically painful) parts of the design process is communicating designs to developers.

Figma Dev Mode

Figma now has a built-in developer mode where developers can:

• Inspect exact measurements and spacing
• Copy CSS, Swift, Kotlin, or Flutter code for design properties
• Download assets (icons, images) at correct sizes and formats
• View component details and where they are used

Zeplin

Historically popular for developer handoff. Still used in some teams for detailed specifications, though Figma Dev Mode has replaced much of its functionality.

---

Accessibility Tools

Designing accessibly means ensuring your product works for users with disabilities -- visual impairments, motor limitations, cognitive differences.

WCAG (Web Content Accessibility Guidelines)

The international standard for web accessibility. Defines criteria for accessible design. Designers need to understand key requirements like minimum colour contrast ratios.

Figma Plugins for Accessibility:

• Contrast: Checks colour contrast ratios against WCAG standards
• A11y Annotation Kit: Annotate designs with accessibility notes for developers
• Able: Colour blind simulator -- see how your design looks with different types of colour blindness

---

Learning Figma: Getting Started

Figma is free to sign up. Here is a suggested learning path:

1. Complete Figma's official tutorials (in-app and on YouTube)
2. Recreate an existing app screen: Choose an app you use (Instagram, WhatsApp, your bank app) and try to recreate one screen pixel-perfect. This builds tool fluency fast.
3. Design your first wireframe: Take a simple idea (a login flow, a settings screen) and wireframe it from scratch.
4. Build your first component: Create a button component with different states (default, hover, disabled).
5. Create a prototype: Link your screens together and add simple click interactions.

The key is practice. Tool proficiency comes from building things, not watching tutorials.

---

What Matters More Than Tools

Tools change. Sketch was replaced by Figma. Adobe XD was abandoned. New tools emerge constantly.

What does not change is the thinking behind good design: understanding users, defining problems clearly, generating and testing solutions, and iterating based on evidence.

Learn Figma because it is the current industry standard. But invest equally in developing your design thinking, research skills, and visual design fundamentals. Those are what make you a great designer -- not which tools you know how to use.