The Designer’s Guide to Figma

Figma has become a real favorite in the battle of web design applications. Packed with design tools (some completely unique) and continually in sync thanks to its web-based nature, Figma has been making designers and design teams very happy since its launch in 2015.

If you’ve never used it, or you want to take the way you use it to the next level, this guide is for you!

What is Figma?

Figma can be used for a number of things, including UI design, UX design, app design, even vector illustration. So what exactly is it and who is it for?

Now you know exactly what it is, Adi Purdila’s free Figma tutorial will get you properly up and running.

Introduction to Figma

Adi Purdila

24 Aug 2020

Design Collaboration Tools

Figma is leading the charge in design team collaboration. Thanks to its web-based nature (even the desktop app requires internet connection) it continuously syncs documents, keeping all team members informed of what’s going on.

“We now have a dynamic, collaborative environment that enables us to brainstorm together, bounce ideas off one another and ultimately be more creative.” — Taylor Madaffari, Copywriter, Aisle Rocket Studios

Figma is a free-to-use design application, but it also offers added features for paying subscribers. The free tier is fully functional in terms of the tool itself; the paid tiers offer more advanced collaboration for larger teams and larger businesses.

Figma and Your Other Favorite Tools

If you work with other vector or web design tools such as Adobe Illustrator, Adobe XD, Sketch, Affinity Designer, you might want to know how they work with the Figma app.

Quick Tip: How to Use Adobe Illustrator Files in Figma
In this quick tip I’m going to show you how to get an Adobe Illustrator file into Figma, without needing Adobe Illustrator.

Kezz Bracey
16 Jan 2019

Figma
Choosing UX Design Tools
A guide to which factors UX designers consider when choosing their toolkits to create and prototype products.

Joanna Ngai
30 Mar 2017

UX

Figma Tips and Tricks

Kezz Bracey has compiled a whole series of tips and tricks, grouping them together for easy reference. You’ll find everything here, from ways to speed up your workflow, tricks for using Figma’s range of tools, to advice for handoff and working with other designers.

Figma to HTML

Learn how to take a one-page design for a travel website in Figma and go through the process of converting it into HTML. In the process, you’ll learn some tricks about working with Figma and using CSS Grid and Flexbox to make layout control a breeze.

This course is perfect for anyone who’s found a landing page template on Envato Elements and wants to code it up themselves.

Figma to HTML: Code Up a Single-Page Design

Kezz Bracey

10 Apr 2019

Taking Figma to the Next Level

With the basics under your belt it’s time to take things further! The following courses and tutorials will help you take your Figma designing to the next level, diving into specialist subjects such as SVG design and how to prototype online.