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.
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.
- FigmaWhich of Figma’s Pricing Tiers is Right for You?Kezz Bracey
- FigmaCollaborative Interface Design With FigmaKezz Bracey
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.
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.
- FigmaFigma Layers Panel TipsKezz Bracey
- FigmaFigma Object Selection TipsKezz Bracey
- FigmaFigma Layer Stacking TipsKezz Bracey
- FigmaFigma On Canvas TipsKezz Bracey
- FigmaFigma Frame TipsKezz Bracey
- FigmaFigma Project, Page & Artboard TipsKezz Bracey
- FigmaFigma Properties TipsKezz Bracey
- FigmaFigma Image TipsKezz Bracey
- FigmaFigma Vector TipsKezz Bracey
- FigmaFigma Component TipsKezz Bracey
- FigmaFigma Layout TipsKezz Bracey
- FigmaFigma Handoff and Testing TipsKezz Bracey
- FigmaFigma General and Miscellaneous TipsKezz Bracey
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.
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.
- FigmaBeyond the Basics: FigmaAdi Purdila
- FigmaUsing Figma for SVG DesignKezz Bracey
- FigmaA Guide to Prototyping in FigmaAdi Purdila
- FigmaCreate a Themeable Site Design in FigmaKezz Bracey
- FigmaFigma Grids in Under 30 MinutesAdi Purdila
- FigmaWeb Typography Basics in FigmaKezz Bracey
- FigmaAdvanced Typography Design in FigmaKezz Bracey
- FigmaJump-Start Your Design Productivity With Figma’s Auto LayoutAdi Purdila
Figma Assets and Resources
Starter files and UI kits are great for playing with Figma. Whether you’re a beginner or a seasoned Figma user, you’ll love these resources.
- FigmaThe Best Free Figma Resources: Templates, Icons, UI Kits, and MoreTomas Laurinavicius
- UI DesignBest-Selling UX and UI Kits for Sketch, Photoshop, Illustrator, XD, and FigmaIan Yates