The software

The main difference between these two applications is how they are run. Photoshop is a large application which is heavy on CPU and GPU usage and must be installed on a computer, whereas Figma can be downloaded or run in your browser and is much less resource-intensive. Surprisingly Figma actually seems to run better than photoshop and is much more responsive despite using fewer resources.

Features

An interesting feature of Figma is that you can create components which act as a sort of template that you can then duplicate, then updating the original ‘master’ component will also update all the duplicates. Figma is also much more geared towards collaboration than Photoshop, letting users edit together in real-time with comments and extensive version history.

If you’re going to be editing lots of photos in your design then Photoshop may be a safer bet, it is much more raster-focused than Figma so has more powerful photo editing tools. Photoshop is also an industry-standard software so has much more support available online and most designers will be familiar with using the PSD format.

Figma has been designed for UI / UX creation from the start, whereas Photoshop was adapted to this purpose. Therefore, Figma has UI design features that set it apart from Photoshop in terms of ease of use. Figma will create a colour scheme for each document, if you choose to change any of these colours it will update that colour in every instance. It can also update the background / padding of a button if the text inside is changed.

Photoshop has significantly more complex export options than Figma, making it simple to alter the quality of an export to reduce the file size and choose a colour profile.

Drawbacks

Photoshop is slow. It uses huge amounts of your CPU and RAM capacity and can grind to a halt when editing large documents. It’s also expensive, transitioning in the last few years to a subscription-only model it costs £19.97/month just for the one app. Figma comes in at a more reasonable £11.31/month (converted from USD) and it has a free tier to get you started.

Figma definitely has a bit of a learning curve, it’s a powerful tool but a lot of the great features are hidden behind a slightly clunky user interface. Its controls can also take some getting used to, especially if switching from Adobe software.

Integrations

A big advantage of Photoshop is the integration of Creative Cloud so you can include fonts from Adobe Fonts with ease and save all projects to the cloud.

Figma has a number of plugins available that let you connect apps like Slack and Trello so you can get notified when users comment on your designs. It can also integrate with software like Zeplin so developers can find assets and code snippets easily. Photoshop does have some of these options but the plugin library is much more scarce.

Presentation

This is where Figma really excels, designs can be shared in an online viewer where it will be displayed at actual size and sections can be fixed so they don’t scroll with the rest of the page. You can also create links between frames, so if you had a homepage frame with a button to a contact page you could create a link so that, when viewing the presented design, clicking the button will take you to the contact page design. It’s also much better at presenting responsive designs, you can select how elements should behave when the frame size is adjusted and choose from a wide selection of preset frame options.

In Conclusion

Both of these tools are fantastic in their own way and either will produce great results but, for web design purposes Figma seems like the clear choice. Its lightweight software and unique design features make it much less cumbersome than Photoshop in positioning elements meaning you have more time to focus on the larger design points. This isn’t to say Photoshop is an incorrect choice, it’s still widely used and well documented, and will probably remain so, but, since its core focus is on something other than UI design, Figma will continue to make further strides in interface design and leave Photoshop to fall behind.