Intro to Figma

These slides are for the seminar: Intro to Figma

We’re Going To Discuss

• What is Figma? (What Figma Can & Can’t Do)
• Pricing: Is Figma Free?
• Web App versus Desktop App
• High Level Intro to using Figma (design, prototype, share)
• How Figma compares to Adobe XD & Sketch
• Ways to Learn More

Getting Started

• Before I show how to use the Figma app, there’s some important things you should know.
• Many tutorials skip over these things, but I think they’re important context to fully understand Figma.

What is Figma?

• Figma is for designing digital products, experiences, and graphics (UX and UI design). This is sometimes called “Figma design”.
• FigJam is for whiteboarding (we won’t be covering this).

What Figma Can & Can’t Do

• In Figma you design the look/feel of websites, apps, etc. and make working prototypes to show clients & developers how the design should work, animate, etc.
• Design apps like Figma, Adobe XD, and Sketch do NOT create a final website or app (that must be coded by a developer).
• Figma’s prototyping features are good, but it can’t create every type of interaction. We aim to be close enough so clients and developers get the idea of our design.

Projects, Files, & Teams

Projects & Files

Projects are like folders, letting you group files together in one place. Projects are only available in teams.

• A Free Starter team gets one project (with only 3 files)
• Professional & Organization teams can create unlimited projects (with unlimited files)

Teams

You create & share resources and collaborate on files/projects in a shared Team workspace.

Permissions impact how collaborators can interact with your team.

• On Starter and Education plans (both are free), the team permissions determines their access to files.
• On Professional & Organization plans (paid), a person’s role (not their team permissions) determine if they can edit files.
• Learn more about permissions in Figma’s Help

Figma Pricing: Is Figma Free?

Figma Plans & Pricing

• Free Starter: 1 Project (3 Figma files), unlimited personal files
• Professional: Unlimited Figma files, Unlimited version history, Sharing permissions, Team libraries
• Organization: Everything in Professional plus Org-wide libraries, Branching and merging, and more

Is the Free Figma Starter Plan Good Enough?

For some, yes. But not for those who need to organize their files, collaborate with team members, share team libraries, and more.

Sketch is $9/month.
Adobe XD is $9.99/month (or included with Creative Cloud).
Figma starts at $12/month.

Figma is a Web App

• Figma requires a constant internet connection.
• All Figma files live on their servers. You can download copies, but to edit you must re-upload them.
• Without the internet, you cannot create or open files.
• If a file is open and you lose internet, you can keep working. Changes are saved in your browser (even if you close the file). When you reconnect, the changes will sync.

Benefits of Being a Web App

• You can start working quickly by simply logging into the website. You don’t have to install an app (unless you need local fonts).
• You see what other people are doing in real-time (like Google Docs) as files are auto-saved & updated.

Web App versus Desktop App

• You can install a Figma Desktop app (we highly recommend).
• All features work in both the web and desktop apps.
• The web app cannot access local fonts unless you install either the desktop app or their font service.
• The desktop app makes some things easier (exported graphics don’t have to be unzipped, you can choose where to save them, and you get tabs for each file, and more).

Intro to using Figma
(Design, Prototype, Share)

Live Demo

Figma vs. Adobe XD & Sketch

• Sketch is Mac only. Figma and XD work on Mac & Windows.
• Figma only works online & files must be stored online. XD and Sketch let you choose to work locally or online (some features require internet or cloud files).

Figma vs. Adobe XD & Sketch

• Sketch does not have a free plan (only a 30-day trial).
  Adobe XD has a free starter version with limitations (similar to Figma’s free starter plan, but more restrictive).
• Cost of paid plans: Sketch is the cheapest, then Adobe XD, & Figma is the most expensive.
• Sketch has the most limited prototyping features (with no animation). Figma & XD both have stronger prototyping and animation features.

Figma vs. Adobe XD & Sketch

• XD can open Sketch, Photoshop, & Illustrator files.
  Figma can open Sketch files.
  Sketch can’t open any other files.
• XD integrates better with Photoshop, Illustrator, & After Effects.
• Figma had an early lead in online collaboration, but XD and Sketch have since added online collaboration as well.
• In XD and Sketch, comments are not integrated into the app like in Figma (you must leave the app and go to a web link).

Figma vs. Adobe XD & Sketch

• Sketch has fallen behind in terms of features. Figma & XD has a stronger set of features, especially for prototyping and animation.
• Figma’s overall feature set is probably the strongest, but XD may initially be a bit easier to learn/use.
• Job market: Currently we see more UX/UI jobs asking for Figma and Sketch, than Adobe XD.
• For a more in-depth comparison, check out the
  Figma vs. Sketch vs. Adobe XD webinar

Learn More

Get started in Noble Desktop’s Certificate Programs & Classes:

Figma Bootcamp
UX & UI Design Certificate
Classes for UX Design or UI (Visual) Design