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.
- Which of Figma’s Pricing Tiers is Right for You?Kezz Bracey25 Feb 2019
- Collaborative Interface Design With FigmaKezz Bracey01 Jan 2019
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.
- Figma Layers Panel TipsKezz Bracey15 Oct 2018
- Figma Object Selection TipsKezz Bracey17 Oct 2018
- Figma Layer Stacking TipsKezz Bracey30 Oct 2018
- Figma On Canvas TipsKezz Bracey01 Nov 2018
- Figma Frame TipsKezz Bracey05 Nov 2018
- Figma Project, Page & Artboard TipsKezz Bracey07 Nov 2018
- Figma Properties TipsKezz Bracey12 Nov 2018
- Figma Image TipsKezz Bracey14 Nov 2018
- Figma Vector TipsKezz Bracey19 Nov 2018
- Figma Component TipsKezz Bracey21 Nov 2018
- Figma Layout TipsKezz Bracey28 Nov 2018
- Figma Handoff and Testing TipsKezz Bracey29 Nov 2018
- Figma General and Miscellaneous TipsKezz Bracey10 Dec 2018
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.
- Beyond the Basics: FigmaAdi Purdila01 Oct 2018
- Using Figma for SVG DesignKezz Bracey19 Nov 2018
- A Guide to Prototyping in FigmaAdi Purdila11 Oct 2018
- Create a Themeable Site Design in FigmaKezz Bracey11 Feb 2019
- Figma Grids in Under 30 MinutesAdi Purdila20 May 2019
- Web Typography Basics in FigmaKezz Bracey20 Aug 2019
- Advanced Typography Design in FigmaKezz Bracey24 Sep 2019
- Jump-Start Your Design Productivity With Figma’s Auto LayoutAdi Purdila15 Jan 2020
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.
- The Best Free Figma Resources: Templates, Icons, UI Kits, and MoreTomas Laurinavicius16 Nov 2018
- Best-Selling UX and UI Kits for Sketch, Photoshop, Illustrator, XD, and FigmaIan Yates09 Nov 2018
More Useful Links
-
Figma templates on ThemeForest
- www.figma.com
-
@figmadesign on Instagram
-
figmadesign on Facebook
-
@figmadesign on Twitter
-
figma-design on Medium