Learn Figma For Absolute Beginners 2021

Figma is a browser-based ui and design application with web-based prototyping and offline desktop options, easy to learn and master in seven to ten days, accessible from anywhere.

Sign up for Figma by entering your email and password or signing in with Google, then choose from plans, including the starter, and set up your account for team collaboration.

Enable local fonts in Figma by accessing account settings, downloading and installing the local fonts package, then reload to access a broader set of fonts in your workspace.

Explore the Figma workspace by navigating the homepage, tools, layers, canvas, and properties panel, and learn how to import files, create new frames, and share designs.

Set up your first Figma file by creating a new file, renaming the project and file, and creating a frame, then select the iPhone 11 pro max frame.

Add and manage frames in figma for your website. Rename, lock, and explore frame properties such as x and y coordinates, rotation, layout, grid, fill, and effects.

Learn to work with shapes in Fatemah: draw rectangles with corner radius, apply hex or rgb colors with adjustable opacity, and use stroke, polygons, stars, and pie charts.

Master the pen tool in Figma to design graphics, shapes, and icons, draw curves with handles, and adjust fills and strokes through precise clicks and edits.

Discover how to import images into Figma, place and resize them, adjust blending and image properties, and mask photos into shapes to achieve aligned, clipped designs.

Learn to work with text and fonts in Figma, enabling local and Google fonts, and adjust font weight, size, line height, and alignment while organizing text layers.

Learn how to create and manage components in Figma, including master and child components, how changes propagate from parent to children, detaching instances, and basic constraints for reusing content.

Apply Figma constraints to design responsive layouts for different screen sizes using left, right, center and scale on the x-axis, and top, bottom, center and scale on the y-axis.

Master figma versioning with version history, autosave, and restore features to track changes, name versions, add descriptions, and collaborate with teammates.

Learn to create an iOS design guideline system for a Nike project by using frames, rulers, and 16-pixel spacing to map status bars, titles, and navigation elements.

Create a real-world Nike shopping cart app in Figma, link screens to build interactive navigation, and prepare for a splash screen in the next video.

Create an app splash screen in Figma by building local color and font styles from the exercise files, rename the frame to splash screen, apply them, and center Nike logo.

Create a login screen in Figma by arranging logo, title, email and password fields, a sign-in button, sign-up text, and social icons.

Learn to design an account recovery screen in Figma by duplicating and renaming frames, updating text to enter email, and labeling the button as send to trigger a reset link.

Apply basic UI design in Figma by duplicating the login screen to create a reset screen, updating labels for new password, confirm password, email, and centering the reset button.

design and customize a sign up screen in Figma by duplicating the previous screen, renaming fields to full name and email, adding an icon, and adjusting spacing.

Build the home screen from scratch in Figma by duplicating the screen, renaming it, arranging rectangles and ellipses, placing images into circles, and adding a bottom menu and cart button.

design a pre-login profile screen in Figma by duplicating the main screen, creating a 414 by 414 panel, and adding my orders, help center, icons, and terms.

Duplicate the home screen after login, rename it to homescreen 2, move it right, add a cart icon from the exercise files, and color the first items with the team color.

Copy the previous screen to create the product list screen, delete the category section and tabs, rename the heading to snicker's, and paste assets from the exercise files to complete.

Design a product detail screen in Figma by duplicating elements, importing a shoe image, applying color fills and 20 percent opacity, and adding text, counters, stars, a button, and icons.

Design a cart screen in figma by duplicating screens, creating white card rectangles, adding product images and text, configuring spacing, borders, a dashed divider, and a continue to checkout button.

Design a payment screen in figma by duplicating the scheme to payment stream, adding a payment method and credit-debit card with icons, plus shipping address.

Design a place order screen in figma by duplicating and renaming the screen, adjusting colors, adding shapes, and aligning the order placed and expected delivery texts.

Learn to build a Figma search screen for absolute beginners by adding a search bar, recent searches, lines between sections, and a keyboard from the exercise files.

Build a favourites screen in Figma by duplicating screens, renaming layers, setting a white frame at 30% opacity, and aligning elements to the tab focus to finalize the screen.

Learn to design a profile screen in Figma: copy screens, add a random user image with the Unsplash plugin, and format text, icons, and dividers with proper alignment.

Edit profile screen by duplicating components, renaming text to contact info, adding fields, and adjusting fonts, colors, and margins to complete the design.

Copy the previous screen to create my cards screen, rename it to my cards, set the background to white, and add a 25x25 rectangle with a plus icon and spacing.

Learn how to create an add card screen in Figma for absolute beginners, including renaming placeholders, adjusting margins, setting inactive field colors, adding a checkmark icon, and an apply button.

Design the my address screen in Figma by adding a map with an icon, three input rectangles for address, unit, and postal code, and a save button.

Learn to build a help center screen in figma by duplicating a screen, styling shapes and text with margins, adding an arrow, grouping components, and preparing for prototype linking.

Link frames in the prototype view to create a real-world app flow with timed transitions and dissolve animations, then share the linked prototype with teammates or stakeholders via a link.