Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Figma for UI Designers
Rating: 4.2 out of 5(120 ratings)
794 students

Figma for UI Designers

Work efficiently and Collaborate on UI Design
Created byGreg Rog
Last updated 2/2018
English

What you'll learn

  • Figma tools and interface
  • Apple Watch project
  • Collaboration in Figma
  • Components in Figma
  • Exporting graphics
  • Optimising vectors

Course content

1 section • 31 lectures • 3h 29m total length

  • Intro3:06

    Explore Figma for UI designers by learning real-time collaboration, vector tools, and reusable components, and prototype transitions while handoffs to developers across web and native apps.

  • Figma Basics10:02
  • Features Preview8:18

    Explore the key features of figma for ui designers, from the hamburger menu and search shortcuts to frames, vector tools, constraints, fonts, export options, and collaborative workflows.

  • Artboards8:45
  • View Options7:31
  • Layout Grid9:11
  • Sketch and Illustrator Import7:30
  • Scaling in Figma5:34
  • Readymade Components5:05

    Discover readymade components and vector assets from material design and iOS elements, and learn to copy, paste, import, and organize them in Figma.

  • Working with Color9:43

    Learn to manage color in Figma, applying solid fills and linear gradients, adjust hex and alpha values, create personal and document color palettes, and sample colors with the eyedropper.

  • Working with Images4:32

    Place images in a Figma layout, resize and scale from the center using option and shift, and experiment with fill, crop, and tiling to create backgrounds.

  • Text Frames5:02
  • Working with Images5:03
  • Pen Tool12:44

    Learn to design icons in Figma with the pen tool, creating and editing vector shapes, adjusting points and handles, and merging into vector networks with strokes and alignment.

  • Advanced Shapes Operations13:41
  • Components6:15

    Learn to create and manage components in Figma, including mastering a component and its instances, applying overrides, and using find, reset, and detach options to control design reuse.

  • Second Screen6:44
  • Masks and Third Screen7:27

    Discover how to create a third screen in a figma prototype by masking avatars with shapes, placing a map in a frame, and designing a centered home button and labels.

  • Working with Effects12:26
  • Last Screens9:03
  • Constraints14:33
  • Version History3:31
  • Device Preview3:04

    Preview your Figma designs on a real device using the mirror app over Wi-Fi, instantly updating frames and components as you edit, with color, font, and layout checks.

  • Collaboration4:07
  • Using Comments2:24
  • Libraries6:59
  • Asset Export6:29

    Learn to export assets in Figma with exportable settings, scale options, and formats like PNG and JPEG, publish to team library, and manage slice exports for efficient UI design.

  • Blending Modes in Figma3:12
  • Prototyping4:03
  • Code Handoff from Figma2:23

    Extract colors, font sizes, line height, and padding from Figma and hand off code for iOS, Android, or web to developers. Learn to select elements, view code, and copy properties.

  • See You Soon0:56

Requirements

  • Basic knowledge on Graphic Design

Description

Figma is a revolutionary application, because it maintains its full functionality in both desktop, and browser versions. You can use either of them, and the web version will still surprise you with how efficient it is! Moreover, designing interfaces is but one of its many features. Thanks to its intuitive and user – friendly interface and tool set, everybody is going to be able to edit graphic assets using this app. Figma differs from other, similar applications such as Photoshop and Sketch, mainly because of its amazing collaboration capabilities, where a project may be worked on by more than one person, in real time!

During the course you will see all the tools and working techniques of Figma. The interface and tools available in Figma may be intuitive and user friendly, but it’s always good to use some reliable schemes and efficiency–improving techniques.

Figma is often compared to Sketch, but with the addition of great collaborative functions for UI/UX designers. It is possible to undertake real – time cooperation with several team members on one project and even see the changes implemented, live in the browser! This provides an opportunity for an ongoing discussion and remote, constructive feedback. Moreover, you may also make use of Libraries, where your team members will have access to all the design elements you have prepared beforehand! A change in one library element, eg. Style Guide, results in an update applied to all the projects.

One of the latest features of Figma is developer handoff as well as creating rapid prototypes from the static screens. Those new features all add up to make Figma one of the most interesting tools to follow and learn as an UI/UX desiner!

Who this course is for:

  • User Interface Designers
  • Web Designers
  • Graphic Designers
  • UX Designers

Report abuse