Salman Alfariesh Logo
Tools3 min read

Design Tools I Use in 2024

My current toolkit for product design, from ideation to prototyping. Plus some hidden gems you might not know about.

Design Tools I Use in 2024

My 2024 Toolkit

Tools change fast in this industry. Every year something new promises to revolutionize the workflow. Most of them do not. Here is what I actually use day-to-day in 2024 — tools that have earned a permanent place in my setup through consistent usefulness.

Design and Prototyping

Figma

Figma remains the center of my design work, and the gap between it and alternatives has only widened. I use it for:

  • UI design — component libraries, page layouts, responsive variants
  • Prototyping — interactive flows for usability testing and stakeholder presentations
  • Design tokens — Figma Variables for colors, spacing, typography, and component-level tokens
  • Dev handoff — Dev Mode with annotations and component documentation

The introduction of Variables and advanced auto-layout features has made Figma even more powerful for systematic design. I rarely need to leave it for any visual design task.

FigJam

For workshops, brainstorming, and collaborative exercises like affinity mapping or user journey mapping, FigJam is simple and effective. I prefer it over Miro for its tighter integration with Figma files.

Code and Development

VS Code and Cursor

I split my time between VS Code and Cursor. VS Code is my stable workhorse for reviewing code, writing CSS, and navigating repositories. Cursor has become my go-to when I need AI-assisted coding — building prototypes, writing utility functions, or scaffolding React components quickly.

Key extensions I rely on:

  • Tailwind CSS IntelliSense — autocomplete for utility classes
  • ESLint and Prettier — consistent formatting without thinking about it
  • GitLens — understanding code history and ownership

Browser DevTools

Chrome DevTools is a design tool. I use it constantly for inspecting spacing, testing responsive behavior, debugging accessibility issues, and tweaking CSS values in real time before committing to code.

Project Management

Linear

Linear replaced Jira for me and I have never looked back. It is fast, keyboard-driven, and treats design work as a first-class citizen. I use it for:

  • Tracking design tasks alongside engineering work
  • Managing design system component backlogs
  • Writing project briefs and specs directly in issues

The cycles feature maps well to sprint-based workflows, and the GitHub integration keeps design and development work connected.

Notion

Notion is where longer-form thinking lives — research synthesis, design documentation, meeting notes, and design decision records. I maintain a design team wiki in Notion that serves as the canonical reference for design principles, patterns, and processes.

Accessibility

axe DevTools

The axe browser extension is the fastest way to catch accessibility violations during development. I run it on every page I build or review. It catches contrast issues, missing ARIA labels, heading order problems, and dozens of other WCAG violations.

Stark

Stark is a Figma plugin I use during the design phase to check color contrast ratios and simulate color blindness. Catching accessibility issues in Figma is far cheaper than catching them in code review.

VoiceOver

I regularly test with VoiceOver on macOS to understand the screen reader experience firsthand. There is no substitute for hearing how your interface actually sounds to someone who cannot see it.

Communication

Loom

I record short Loom videos for design walkthroughs, handoff context, and asynchronous feedback. A 3-minute video replaces a 15-minute meeting and creates a referenceable artifact.

Slack

The reality of product design is that a significant amount of work happens in Slack — quick feedback, clarifying questions, sharing work-in-progress. I use Slack's canvas feature for lightweight design briefs that do not warrant a full Notion document.

What I Have Stopped Using

Just as important as what I use is what I have dropped:

  • Sketch — fully replaced by Figma years ago
  • InVision — shut down, and Figma prototyping covers everything it did
  • Abstract — Figma's built-in branching handles version control
  • Zeplin — Figma Dev Mode made it redundant

The trend is clear: fewer specialized tools, more capability in fewer platforms. My toolkit is smaller than it was three years ago, and my output is better for it.

Salman Alfariesh

Salman Alfariesh

Product Designer specializing in web & mobile experiences