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.
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
Product Designer specializing in web & mobile experiences