About this Course

Figma is a modern design app that was built with the specific needs of a modern web designer, UX designer, or app designer in mind. Unlike image editing programs such as Photoshop—which were originally created for print, photo retouching, or illustration—the entire focus of Figma is on designing user interfaces and user experiences. You can craft the visuals and turn them into working prototypes all in a single app!

Figma uses frames (which other apps call artboards), to efficiently design web layouts for mobile, tablet, and desktop (or screens for apps). It’s vector-based, so you can scale for a variety of screen sizes with ease, as well as export hi-res (Retina) graphics for the web or apps. You’ll find tools and features specifically relevant to UI (User Interface) design and UX (User Experience) design, such as components, built-in prototyping tools, and much more.

Learn to design complex and realistic prototypes with advanced functionality. You’ll add interactions such as hovers, add animations to your designs using smart animate, make specific areas within a screen scrollable, and much more.

Figma is a web app and 100% cloud-based, so collaboration and easy file sharing is built-in. While you can install the Figma desktop app, you can also just log into Figma in any web browser and start designing without installing anything.

What You’ll Learn:

  • Create UI (user interface) and UX (user experience) designs for websites and apps
  • Design finished layouts that are optimized for mobile, tablet, and desktop screens
  • Design on grids, extract image assets, share designs with clients/developers, and more
  • Create more complex & realistic prototypes
  • Add interactions, such as hovers
  • Make animations using smart animateUse components (including variants) to make updating your designs easier
  • Work with Team libraries to share style & design components
  • Define scrollable areas within a screenScroll up & down within a page

Outline

Section 1:

  • Introduction: Web app versus Native App
  • Creating New Files & Designing on a Grid
  • Importing & Cropping Photos
  • Vector Graphics, Colors, Shadows, & More
  • Text Styles

Section 2:

  • Components (Reusable Elements)
  • Turning a Design into a Clickable Prototype
  • Exporting Assets for Web: SVG, JPEG, & PNG
  • Sharing Figma Files: Commenting, Testing, Developers, etc.

Section 3:

  • Auto Layout
  • Linking Up/Down a Page, Scrollable Areas, & Hyperlinks
  • Intro to Smart Animate
  • Parallax Animation

Section 4:

  • Variants
  • Hovers & Overlays
  • Adding Interactions to a Slideshow: Tap, Drag, & Keys
  • Team Libraries (Shared Libraries)

Exam Pass Guarantee

At Microtrain we are committed to your success! Let us show you the return you get from great tech training. We will personally guarantee that if you take our class and follow our program you will be successfully certified!

Raves & Praise

Connect with MicroTrain

Begin building a successful long-term career pathway.

(630) 981-0200

Back to Top