Create Website UI/UX In Figma 2022

Explore what Figma is as a browser-based UI prototyping tool, compare it with other apps, and learn why Sigma offers license-free, web-based access with optional offline desktop use.

Sign up for Figma by visiting site, entering your email and password or signing in with Google, create your account, add a team, and choose the starter plan for beginners.

Enable local fonts in Figma by downloading and installing the font installer, expanding your font options for website UI/UX design. Then explore the Figma workspace and access recent files.

Explore the sigma workspace, its home page with three projects, import options for Figma and sketch files, and the toolbar for shapes, layers, and assets.

Learn to set up your first Figma file, rename the project, create a frame, and select a web 1920 by 10 frame for building a website.

In Figma, set up a 1920x1080 frame with a 12-column grid, add a logo and navigation, create a hero banner with a call-to-action, and assemble product cards and a footer.

Design an about us page in Figma by building sections for our story and our services, adding meet our team cards with icons, breadcrumbs, and precise typography.

Create the menu screen in Figma by duplicating elements, arranging seven circular item placeholders, adding images and a banner, then include the popular item section to complete the menu.

Create a menu screen in Figma with a product image, rating stars, size selectors, quantity controls, and a red add-to-cart button; include a reviews tab and you might also like.

Duplicate previous frame for the menu screen, adjust colors (white reviews, black details), add user ratings with a 50 px top margin, then draw a gray line under the review.

Create add to cart screen in figma by duplicating frames, layering an overlay, adding rounded rectangles, a close and check icon, and buttons labeled continue shopping and proceed to checkout.

Create a product details screen in Figma by configuring the cart with three items, adding quantity controls, showing subtotal, shipping, and total cost, and including continue shopping and checkout buttons.

Design a login screen in Figma by shaping input fields, placeholders, and action buttons, including forgot password and social logins with Facebook and Google.

Design a sign up screen in Figma by adapting the menu and adding backgrounds. Convert login to register now with first name, last name, email, password, and re-enter password.

Design a checkout screen in Figma by duplicating frames, creating billing address, order summary, and payment method sections with product details, shipping, totals, terms, and a red place order button.

Duplicate frame to create order confirmation screen, update text to 'your order is placed,' add green checkmark, draw 440 by 170 yellow rounded rectangles for order date and shipping address.

Create contact us screen in Figma by duplicating and renaming components, set bar red, add phone, email, address in the form, include a send button, link all screens.

Connect frames in the prototype view to build a real-world website in Figma, using Smart Animate, and share the interactive mockup with teammates and stakeholders for design review and handoff.