Skip to content
envato-tuts+
envato-tuts+
  • Design
    Design View all Design
    Start Learning
    • Software
      Software
      • Adobe Photoshop
      • Adobe Illustrator
      • Affinity Designer
      • Affinity Photo
      • Affinity Publisher
      • Adobe InDesign
      • Procreate
      • PaintTool SAI
      • Pixelmator
      • CorelDRAW
      • Inkscape
      • Sketch
      • Design Space
    • Drawing/Illustration
      Drawing/Illustration View all Drawing/Illustration
      Learn Illustration
      • Vectors
      • Digital Painting
      • Character Design
      • Pixel Art
      Learn Drawing
      • Animals
      • Drawing Theory
      • Human Anatomy
      • Cartoons & Comics
      popular software in Drawing/Illustration
      • Adobe Illustrator
      • Procreate
    • Graphic Design
      Graphic Design View all Graphic Design
      • Techniques & Workflow
      • Photo Manipulation
      • Infographics
      • 3D Design
      • Print Design
      • Apparel Design
      • Logo Design
      • Icon Design
      • Packaging Design
      • Book Design
      • Branding
      popular software in Graphic Design
      • Adobe Photoshop
      • Adobe Illustrator
      • Adobe InDesign
      • Affinity Designer
    • Typography
      Typography View all Typography
      • Fonts
      • Hand Lettering
      • Web Typography
    • Add-Ons
      Add-Ons View all Add-Ons
      • Photoshop Actions
      • Photoshop Brushes
      • Illustrator Brushes
      • Layer Styles
      • Procreate Add-Ons
      • Overlays & Textures
      • Photo Effects
      • Patterns
      • Text Effects
    • Graphic Templates
      Graphic Templates View all Graphic Templates
      • Album Cover
      • Book
      • Brochure
      • Card & Invite
      • Business Card
      • Flyer
      • Magazine
      • Menu
      • Newsletter
      • Packaging
      • Poster
      • Resume & CV
      • Social Media
      • Stationery
    • Theory
      Theory View all Theory
      • Art History
      • Global Influences
      • Design Trends
      • Color Theory
    • Mockups
      Mockups View all Mockups
      • Apparel
      • Banners & Ads
      • Book
      • Brochure
      • Flyer
      • Devices
      • Logo
      • Magazine
      • Mug
      • Packaging
      • Poster
    • Digital Crafting
      Digital Crafting View all Digital Crafting
      • Cricut
      • Digital Scrapbooking
    popular software in Design
    • Adobe Photoshop
    • Adobe Illustrator
    • Affinity Designer
  • Business
    Business View all Business
    Start Learning
    • Software
      Software
      • Microsoft PowerPoint
      • Keynote
      • Google Slides
      • Microsoft Word
      • Microsoft Excel
      • Microsoft Outlook
      • Google Docs
      • Google Sheets
      • Gmail
    • Presentations
      Presentations View all Presentations
      • Presentation Techniques
      • Pitch Decks
      • Public Speaking
      popular software in Presentations
      • Microsoft PowerPoint
      • Keynote
      • Google Slides
    • Templates
      Templates View all Templates
      • Proposal
      • Report
      • Invoice
      • Resume & CV
      • Business Card
      • Brochure
      • Flyer
    • Marketing
      Marketing View all Marketing
      • Sales
      • Email Newsletters
      • Creativity
      • eCommerce
      • Social Media
      • Infographic Templates
      • Writing
      • Branding
    • Finance
      Finance View all Finance
      • Funding
      • Financial Statements
      • Invoicing
      popular software in Finance
      • Microsoft Word
      • Microsoft Excel
      • Google Docs
      • Google Sheets
    • Management
      Management View all Management
      • Productivity
      • Strategy
      • Communication
      • Diversity & Ethics
    • Startups
      Startups View all Startups
      • Entrepreneurship
      • Business Plans
      • Microbusiness
    • Careers
      Careers View all Careers
      • Finding a Job
      • Freelancing
      • Time Management
      • Networking
      • Promotion
      • Education
    popular software in Business
    • Microsoft PowerPoint
    • Keynote
    • Google Slides
  • Photo
    Photo View all Photo
    Start Learning
    • Software
      Software
      • Lightroom
      • Adobe Camera Raw
      • Capture One
      • Gemstone
      • Affinity Photo
      • Adobe Photoshop
      • Pixelmator
      • Photo Mechanic
    • Equipment
      Equipment View all Equipment
      • Cameras & Lenses
      • Smartphones
      • Lighting
      • Tripods & Supports
      • Filters & Accessories
    • Photographing
      Photographing View all Photographing
      • Exposure
      • Composition
      • Light
    • Types of Photography
      Types of Photography View all Types of Photography
      • Social Media
      • Studio
      • Portrait
      • Event
      • Landscape & Nature
      • Still Life
      • Street
    • Editing & Post-Processing
      Editing & Post-Processing View all Editing & Post-Processing
      • Photo Editing
      • Workflow
      • Image Correction
      • Colour
      • Black & White
      • Portrait Retouching
      • Compositing
      • Printing
      • Portfolios
    • Theory
      Theory View all Theory
      • History of Photography
      • Running a Photography Business
    • Add Ons
      Add Ons View all Add Ons
      • Lightroom Presets
      • LUTs & Filters
      • Slideshow Templates
      • Photoshop Actions
    popular software in Photo
    • Lightroom
    • Adobe Camera Raw
    • Capture One
  • Video
    Video View all Video
    Start Learning
    • Software
      Software
      • Adobe After Effects
      • Adobe Premiere Pro
      • Davinci Resolve
      • Cinema 4D
      • Blender
      • Final Cut Pro
      • Apple Motion
      • OBS
      • Camtasia
      • Screenflow
      • Kapwing
      • Runway
      • Adobe Rush
    • Equipment
      Equipment View all Equipment
      • Cameras & Lenses
      • Tripods & Supports
      • Drones & Rigs
      • Filters & Accessories
      • Smartphones
      • Lighting
      • Audio Equipment
    • Production & Recording
      Production & Recording View all Production & Recording
      • Lighting
      • Audio
      • Composition
      • Screen Recording
      • Livestreaming
    • Post-Production
      Post-Production View all Post-Production
      • Video Editing
      • Color Grading
      • Motion Graphics
      • Audio
      • Workflow
    • Templates & Presets
      Templates & Presets View all Templates & Presets
      • Intros & Openers
      • Titles
      • Transitions
      • LUTs & Profiles
      • Text Effects
      • Particle Effects
      • Logo Animations
      • Slideshows
      • Presets
      • Scripts & Plug-ins
    • Types of Video
      Types of Video View all Types of Video
      • Instructional
      • Documentary
      • Stock Footage
      • Animation
      • YouTube
      • Social Videos
      • Music Videos
    popular software in Video
    • Adobe After Effects
    • Adobe Premiere Pro
    • Davinci Resolve
  • Web Design
    Web Design View all Web Design
    Start Learning
    • Software
      Software
      • Sketch
      • Figma
      • Adobe XD
      • Sublime Text
      • Visual Studio Code
      • MailChimp
      • Webflow
      • Campaign Monitor
    • WordPress
      WordPress View all WordPress
      • WordPress CMS
      • WordPress Themes
      • WordPress Plugins
      • WordPress Hosting
      • Elementor
    • HTML/CSS
      HTML/CSS View all HTML/CSS
      • HTML
      • CSS
      • JavaScript for Designers
      • Bootstrap
      • Animation
      • HTML Templates
      • Landing Pages
      • SVG
    • Email
      Email View all Email
      • Email Design
      • Email Templates
      • Email Marketing
      popular software in Email
      • Campaign Monitor
      • MailChimp
    • UX/UI
      UX/UI View all UX/UI
      Learn UI Design
      • Forms
      • Icon Design
      • Navigation
      • Prototyping
      • Wireframing
      • Web Typography
      • Material Design
      • Design Theory
      • Design Systems
      Learn UX Design
      • User Research
      • User Testing
      • Responsive Design
      • Usability
      • Accessibility
      popular software in UX/UI
      • Sketch
      • Figma
      • Adobe XD
      • Webflow
    • SEO
      SEO View all SEO
      • Content Strategy
      • Conversion
      • Performance
    • eCommerce
      eCommerce View all eCommerce
      • Shopify
      • WooCommerce
      • BigCommerce
      • Magento
    popular software in Web Design
    • Sketch
    • Figma
    • Adobe XD
  • Code
    Code View all Code
    Start Learning
    • WordPress
      WordPress View all WordPress
      • Plugin Development
      • Theme Development
    • HTML/CSS
      HTML/CSS View all HTML/CSS
      • HTML
      • CSS
      • JavaScript for Designers
      • Bootstrap
      • Animation
      • HTML Templates
      • Landing Pages
      • SVG
    • Mobile Development
      Mobile Development View all Mobile Development
      • iOS Development
      • iOS Templates
      • Android Development
      • Android Templates
      • React Native Development
      • React Native Templates
      • Ionic Development
      • Ionic Templates
      • Corona
      • Firebase
      • Kotlin
    • JavaScript
      JavaScript View all JavaScript
      • React
      • Vue.js
      • Node
      • jQuery
      • Angular
      • Web APIs
    • PHP
      PHP View all PHP
      • Laravel
      • PHP Scripts
      • CodeIgniter
      • Yii
    • Coding Fundamentals
      Coding Fundamentals View all Coding Fundamentals
      • OOP
      • Functional Programming
      • Databases & SQL
      • Security
      • Testing
      • Workflow
      • Design Patterns
      • Rest API
      • Machine Learning
      • Authentication
      • Version Control & Git
      • Performance
      • XML
      • AJAX
      • Regular Expressions
      • Tools
      • Game Development
      • Terminal and CLI
    • Python
      Python View all Python
      • Django
    • Ruby
      Ruby View all Ruby
      • Ruby on Rails
    • Cloud & Hosting
      Cloud & Hosting View all Cloud & Hosting
      • AWS
      • Web Servers
      • Hosting
      • Scaling
      • Databases & SQL
  • Music
    Music View all Music
    Start Learning
    • Software
      Software
      • Audacity
      • Audition
      • Reaper
      • Pro Tools
      • Fairlight
      • Premiere Pro
      • Ableton Live
      • Cubase
      • Garageband
      • Logic Pro
      • Reason
    • Equipment
      Equipment View all Equipment
      • Microphones
    • Audio Recording
      Audio Recording View all Audio Recording
      • Voice Recording
    • Audio Production
      Audio Production View all Audio Production
      • Audio Editing
      • Podcasting
      • Sound Design
      • Music Production
    • Royalty Free Music
    • Sound Effects
    • Music Theory
    • Instruments
      Instruments View all Instruments
      • Guitar
      • Drums
    popular software in Music
    • Audacity
    • Audition
    • Reaper

  • Sign In
  • Tuts+ YouTube
  • Envato Elements
  • Envato Elements
  • |
  • Tuts+ YouTube
  • |
  • Sign In
  • envato-tuts+
  • Design
  • Business
  • Photo
  • Video
  • Web Design
    • Software
        • Start Learning
        • Sketch
        • Figma
        • Adobe XD
        • Sublime Text
        • Visual Studio Code
        • MailChimp
        • Webflow
        • Campaign Monitor
    • WordPress
        • Start Learning
        • WordPress CMS
        • WordPress Themes
        • WordPress Plugins
        • WordPress Hosting
        • Elementor
      All WordPress
    • HTML/CSS
        • Start Learning
        • HTML
        • CSS
        • JavaScript for Designers
        • Bootstrap
        • Animation
        • HTML Templates
        • Landing Pages
        • SVG
      All HTML/CSS
    • Email
        • Start Learning
        • Email Design
        • Email Templates
        • Email Marketing
      All Email
      • popular software
      • Campaign Monitor
      • MailChimp
    • UX/UI
        • Learn UI Design
        • Forms
        • Icon Design
        • Navigation
        • Prototyping
        • Wireframing
        • Web Typography
        • Material Design
        • Design Theory
        • Design Systems
        • All UI Design
        • Learn UX Design
        • User Research
        • User Testing
        • Responsive Design
        • Usability
        • Accessibility
        • All UX Design
      • popular software
      • Sketch
      • Figma
      • Adobe XD
      • Webflow
    • SEO
        • Start Learning
        • Content Strategy
        • Conversion
        • Performance
      All SEO
    • eCommerce
        • Start Learning
        • Shopify
        • WooCommerce
        • BigCommerce
        • Magento
      All eCommerce
  • Code
  • Music
  1. envato-tuts+
  2. Home
  3. Web Design

Introduction To Figma

Adi Purdila
Adi Purdila Jul 13, 2023

Lessons

Play lesson (2 mins)
Read Related Content

Play lesson (5 mins)
Read Related Content

Play lesson (5 mins)
Read Related Content

Play lesson (9 mins)
Read Related Content

Play lesson (11 mins)
Read Related Content

Play lesson (9 mins)
Read Related Content

Play lesson (6 mins)
Read Related Content

Play lesson (5 mins)
Read Related Content

Play lesson (35 mins)
Read Related Content

Play lesson (4 mins)
Read Related Content

Play lesson (12 mins)
Read Related Content

Play lesson (5 mins)
Read Related Content

Play lesson (3 mins)
Read Related Content

In this free tutorial, you’ll learn everything you need to know to get started with using Figma.

Once you’ve completed the lessons, you’ll have a good understanding of the tools and features included in Figma as well as how to create a sign-up form from scratch. Clocking in at just under two hours long, we get down to business quickly, so if you’re ready to learn, keep reading! 

Who is This Course For? 

  • UX and UI designers wishing to learn a new tool 
  • App designers 
  • Business owners
  • Web designers who want to expand into other areas

1. Welcome to the Course

In this intro lesson, we’ll take a look at what the course as a whole will cover. Right away, it will be clear to you that Figma shares similarities to other popular design tools like Adobe XD and Sketch but has its own set of unique features that are well worth a look on their own. 

We’re going to look at four key areas: 

  • A general introduction into Figma and what it is 
  • An overview into how to get started, including a discussion of the interface and features available 
  • A guided tutorial for using Figma as a designer 
  • A guided tutorial for using Figma as a developer

2. What Is Figma?

Figma is a design tool, and with it, you can create anything you want for the web from user interfaces to illustrations to icons. So, you can use it to create a full-fledged online store, a smartwatch app, and everything in between. 

What makes Figma pretty special is that it’s vector-based and browser-based, so you can create just about anything from just about anywhere. And best of all? It’s free to get started.

From here, we discuss how to install and setup Figma to move forward with the tutorial. 

Getting Started With Figma

3. Working With Projects, Files, and Pages in Figma

Alright, with Figma installed and setup, it’s time to get our hands dirty! We dive right in with this lesson, discussing all the different ways to organize your work. We talk about how to create projects, new files, and pages within Figma. We also talk about how to access your files. 

Working with Projects in FigmaWorking with Projects in FigmaWorking with Projects in Figma
Working with Projects in Figma

4. Using the Figma UI

Before you can really get down to business, you need to have a thorough understanding of how to use every button within the Figma user interface. We dive into the details here so you can move through the rest of the tutorial with confidence. The UI is set up as follows: 

  • Home Screen: What you’re greeted with when opening Figma. This provides access to your teams, projects, and options for searching for files, viewing recent files, plugins, and drafts. 
  • Team: This shows all the projects assigned to this team. 
  • Project: A list of all the files associated with the project. 
  • Right hand sidebar: Displays further options related to which screen you’re viewing. 
  • Top nav bar: Displays file name, sharing options, zoom, menu, cursor, shapes, and more tools.
  • Left side bar: Shows layers within a file by default.

5. Working With Frames, Shapes, and Text in Figma

Getting started with frames within Figma starts with a comparison: they’re just like the artboards you’d encounter in Adobe XD. Frames give you a great starting point when working on a project and there are tons built into Figma for things like smartphones, browsers, social media sites, and more. 

Adding a iPhone 8 frame in FigmaAdding a iPhone 8 frame in FigmaAdding a iPhone 8 frame in Figma
Adding a iPhone 8 frame in Figma.

You can also use the Shape tool in Figma to create custom designs. If you’ve used any other design software in the past, this tool should be pretty familiar, as you’ll have your choice of rectangles, circles, lines and so forth and you have full control of their thickness, size, and stroke.

And you’ll learn about the Text tool as well. 

Putting the text tool in Figma to workPutting the text tool in Figma to workPutting the text tool in Figma to work
Putting the text tool in Figma to work.

6. Creating Vector Networks With the Pen Tool

Vector Networks are quite possibly the most unique feature in Figma. That is because most design tools approach the pen tool as follows: you click and create multiple points then return to your starting point to close the path. But it doesn’t work this way in Figma. 

Instead, Figma maintains open-ended paths, which makes it much easier to create more complicated shapes. In this lesson, we explore in detail how to make use of Figma’s unique pen tool and vector networks. 

7. Working With Grids in Figma

In Figma, grids are super useful for creating interface design but they can also be used for making icons with ease. You have full control over how grids appear, the box size, color, and more. 

8. Using Figma Plugins

Plugins add a wide range of additional features to your Figma experience. And in this lesson, we dive deep into the variety of plugins available to you. 

Figma pluginsFigma pluginsFigma plugins

And we also show you how to install plugins, set them up, and put them to work within your workflow. 

How to Use Figma as a Designer

9. Let’s Design a Sign-Up Form in Figma

Figma makes it easy to create a wide range of apps and website types. And in this lesson, we’ll cover how to create a sign-up form for a mobile app using all the knowledge you’ve amassed thus far. However, we’ll also go into depth about new features not discussed yet, like components, layout, color, and styles.

10. Let’s Create a Prototype

Figma can also be used to create prototypes. We do so in this lesson by using the two screens created in the previous lesson. In this case, we’ll create a prototype to connect these two screens when certain buttons are clicked. 

figma prototypefigma prototypefigma prototype

11. Sharing Work and Getting Feedback

An essential part of working on a design, is collaborating with others and getting other’s feedback. This is easy to accomplish within Figma, In fact, at any point during your workflow, you can share the project with others and solicit feedback. You can also provide editing permissions if you so choose. 

How to Use Figma as a Developer

12. Inspecting a Design File in Figma

If you’re a developer and have been given view-only access to a Figma file, this lesson is for you. Here, we delve into everything you need to know about developer access to Figma files and how you can take a project and turn it into an app, website, or other live and interactive product.

13. Exporting Assets

In the last lesson of this tutorial, you’ll learn how to export assets in Figma. It’s super simple to do and works in both view-only and in edit mode. So once you’re done working on your project, you can export it with ease and move onto your next task. 

Learn More About How to Put Figma to Use 

If you want to expand your Figma knowledge even further, consider checking out some of the articles we’ve written on the subject in the past. Here, you’ll find additional tutorials, template roundups, and tips and tricks, to help you level up your Figma skills.

  • What is Figma?
    Kezz Bracey
    16 Sep 2022
  • 20+ Best Figma Wireframe UI Kits and Templates
    Brenda Barron
    22 Jun 2023
  • 15+ Best Figma Templates for Web Designers
    Hermione Wright
    22 Mar 2023
  • 28 Figma UI Kits for Designers
    Eric Karkovack
    27 Mar 2023
  • 5 Figma Tricks and Tips for Beginners
    Adi Purdila
    29 Sep 2021
  • How to Use Figma Variants
    Adi Purdila
    04 Jul 2021
Figma Components: From Zero to Hero

Components in UI design are regular elements, like buttons or forms, and they can be reused multiple times throughout the design process. Working with Figma components means you don’t need to recreate an element each time you need one; you can reuse components from the library.

Figma Components: From Zero to Hero | FREE COURSE
 
Adi Purdila
Adi Purdila
Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value. Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals. When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets. You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.
adipurdila
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato Elements.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.
Quick LinksExplore popular categories
  • Curated Design Assets
  • Best Cool Fonts
  • InDesign Magazine Templates
  • Photoshop Actions
  • InDesign Newsletter Templates
  • InDesign Templates
  • Curated Web Design Assets
  • Responsive WordPress Themes
  • WordPress Themes for Consultants
  • Wireframe Templates
  • Best Shopify Themes
  • Masonry WordPress Themes
  • Web Themes & Templates
  • WP Themes
  • HTML Templates
  • Shopify Themes
  • Bootstrap Themes
  • Free WordPress Themes
  • Video
  • After Effects Templates
  • Apple Motion Templates
  • Video Effects
  • Lower Thirds
  • Stock Footage
  • Placeit
  • Logo Maker
  • Video Maker
  • Design Templates
  • Free Templates
  • Mockups
  • Curated Video Assets
  • After Effects Slideshow Templates
  • Premiere Pro Video Intro Templates
  • Final Cut Pro Templates
  • Final Cut Pro Title Templates
  • Premiere Pro Video Effects
  • Curated Presentation Assets
  • Keynote Pitch Deck Templates
  • Google Slides Business Templates
  • PowerPoint Pitch Deck Templates
  • Best Shopify Mobile Themes
  • Best Presentation Templates
  • Free Tools
  • Image Resizer
  • Video Cropper
  • Video To Gif Converter
  • Elements
  • WordPress Themes
  • Stock Images
  • Website Templates
  • Logos
  • Fonts
  • Tuts+
  • Learn JavaScript
  • Photoshop Tutorials
  • How to Draw
  • How to Use WordPress
  • How to Use PowerPoint
Envato Tuts+
About Envato Tuts+
Terms of Use
Advertise
Help
FAQ
Help Center
envato-tuts+
30,219
Tutorials
553
Courses
42,531
Translations
B Corp logo
  • Envato
  • Envato Elements
  • Envato Market
  • Placeit by Envato
  • All products
  • Careers
  • Sitemap
© 2023 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.
  • Youtube
  • Instagram
  • Tiktok
  • Facebook
  • Twitter
  • Pinterest