Photoshop in a Figma World: What It's Still the Right Tool For

Let's get the argument out of the way: you should not be designing app layouts in Photoshop in 2026. Figma won that. Vector-first, real components, collaborative, browser-based, dev mode. If someone hands you a PSD as a spec, that's a smell.

But the pendulum swung too far, and there's now a generation of frontend devs who have never opened Photoshop and hit a wall roughly once a month because of it.

Here's the honest division of labour.

What Figma owns

• Layout and spacing
• Components and design systems
• Prototyping and handoff
• Anything a developer needs to inspect
• Icons and vector illustration

Don't fight this. If you're doing any of the above in a raster tool, you're making your own life harder.

What Photoshop still owns

1. Anything involving actual photographs

Figma can crop and mask. It cannot retouch.

Product shots for an e-commerce site, hero images, team photos where the lighting is wrong on one person, removing the sign in the background nobody noticed. This is raster work and it needs a raster tool.

The specific skills that matter: masking (especially hair and edges), levels and curves, healing, and non-destructive adjustment layers.

2. The asset export pipeline

This is the one that bites developers most often.

hero.jpg   2.4 MB   ← what the client sent
hero.webp  180 KB   ← what should ship

Photoshop's export handles the things you actually care about:

• Format conversion to WebP and AVIF with real quality control
• Density variants — @1x, @2x, @3x from one source in one operation
• Batch actions — apply the same treatment to 200 product images without opening them individually
• Precise quality tuning — where the file size cliff is for this image, not a generic preset

If you've ever shipped a 4 MB PNG because it was "just a background," this is the gap.

3. Texture, compositing, and generated backgrounds

Noise, grain, gradient meshes, duotones, subtle paper textures. Everything that makes an interface look less like a default Tailwind template.

Most of these are raster effects. You can fake some in CSS — and often should, for performance — but designing them means seeing them first.

4. Scripting and automation

Underused by developers, which is odd, because it's the part most aligned with how we think.

Photoshop is scriptable in JavaScript. Resize, watermark, export, rename across a whole directory, driven by code. If you maintain a site with a lot of imagery and you're doing this by hand, you're doing it wrong.

The workflow that actually works

1. Design in Figma. Layout, components, spacing, the whole interface
2. Prepare raster assets in Photoshop. Retouch, composite, texture
3. Place finished assets back into Figma for context
4. Export from Photoshop, not from Figma, when the output is a photo — you get better format control
5. Optimize in the build pipeline — Sharp, imagemin, or whatever your framework gives you

Photoshop sits upstream of the design tool, not in competition with it.

What to actually learn

You don't need the whole application. The 20% that covers almost everything a frontend dev needs:

• [ ] Layers, groups, and layer masks
• [ ] Adjustment layers (non-destructive editing)
• [ ] Selection tools — quick select, refine edge
• [ ] Smart objects and why they matter for scaling
• [ ] Export As / Save for Web, and the format tradeoffs
• [ ] Actions and batch processing
• [ ] Basic retouching — healing brush, clone stamp

That's maybe fifteen hours of focused learning, and it will pay off for the rest of your career, because photographs are not going anywhere.

Free places to learn it:

• Adobe's own tutorials — free, well made, and surprisingly good at the fundamentals
• PhotoshopCAFE and Phlearn's free content on YouTube — practical, project-based
• Master App & Web Design with Adobe Photoshop A-Z: free and downloadable, aimed at the app and web design use case specifically

!!! Skip anything teaching you to build page layouts in Photoshop. That part of the workflow is genuinely dead — take the raster and asset-pipeline skills and leave the rest.

The takeaway

"Photoshop is obsolete for web design" and "Photoshop is useless" are different claims, and only the first one is true.

Learn Figma for interfaces. Learn enough Photoshop to stop shipping 2 MB heroes.