LinkedIn & Amazon Web App Design with Figma (2022)

Name: LinkedIn & Amazon Web App Design with Figma (2022)
Rating: 4.5 (69 reviews)

Advanced fast-paced Figma course for UI UX Design, User Experience Design, User Interface Design & Web Design

Created byBoroji Design Inc.

Last updated 4/2025

English

What you'll learn

Transform your static components into interactive UI elements
Design complex nested components with Auto Layout & Variants
Learn automated ways to re-use components & utilize Figma plugins
Learn how to design Figma UI components with blazing speed
Add Amazon & LinkedIn Figma projects to your design portfolio
Learn Figma in an advanced accelerated path

Course content

4 sections • 33 lectures • 4h 31m total length

Course Overview0:51
Examine how the queen brain engages with the game of life, acknowledging pain and change as forces shaping actions. Explore routines from exercising to night-time practices that influence performance.
Important Figma UI 3 Update0:14
Amazon Project Overview0:25
Explore the Amazon project overview, build the design together, establish the color palette and typography hierarchy, then create smaller components like the department component and make them interactive with variants.
LinkedIn Project Overview0:29
Overview of the LinkedIn project, broken into smaller nested components, illustrating the left side elements and message component, then combined into an interactive low-fi layout with content added.
Finding Resources0:27
Discover how to locate and download the Figma final file, data file, and LinkedIn project resources to follow along and download the complete project bundle from the introduction.
List of my Figma plugins0:25
Explore a curated list of my Figma plugins, linked to plugin pages, and download the included Figma file from the lecture resources to see the tools I use for design.
Download Course Files as Bundle0:01

Download Amazon Excel Data
Download Amazon Final Figma file
Important Figma UI 3 Update0:14
Generate Color Palette10:02
Generate a color palette for a mini design system by extracting Amazon colors and creating primary, secondary, accent, grayscale, and white shades using color shade, batch styler, and Stihler plugins.
Refine Colors1:58
Refine the color palette by breaking the accent into three categories, naming shades like platinum, mercury, and led, and removing redundant hues (900, 800, 700) after side-by-side comparisons.
Generate Typography7:27
Create and organize typography for a web app by applying a 16px base type scale, choosing a ratio (golden or minus third), setting weights, line heights, and CTA styles.
Buttons & Icon Library12:26
Design and implement a navigation bar with an icon library, create a reusable button system, name components, and configure typography, colors, and contrast, including primary, secondary, and lead variants.
Navigation Bar19:01
Build a responsive navigation bar in Figma with logo, location, and account sections, an a-z navigation, a search button, and a cart icon, using frames, padding, and color styling.
Interactive Navigation Bar36:30
Design a navigation bar featuring a secondary layer, replacing the logo with Amazon, and implement dropdowns for departments and accounts. Prototype hover states and scrollable dropdowns in Figma as components.
Sidebar Navigation11:23
Design a sidebar navigation in a Figma desktop frame with a global nav, then populate items using Google Sheets Sync, convert to components, and enable vertical scrolling in the prototype.
Footer Navigation13:02
Design a footer navigation in a figma prototype, using white text on mercury tones, hover effects, and four items in four columns, plus privacy and resources sections.
Finalizing Amazon Project22:50
Finalize a responsive Amazon product grid prototype in Figma by building reusable card components with image, rating, price, and rank, and integrating Google Sheets data.

Download LinkedIn Excel Data
Download LinkedIn Final Figma file
Important Figma UI 3 Update0:14
Re-use Colors & Styles5:24
Adapt a copied Amazon design to LinkedIn in Figma by reusing and adjusting colors, typography to Roboto, and updating primary, secondary, and UI elements.
Navigation Bar17:28
Design a LinkedIn style navigation bar in Figma by importing logo, applying brand color, adding a search field and icons, and using auto layout for active and inactive top-nav states.
Navigation Dropdown13:34
Design a functional account dropdown for a LinkedIn and Amazon style web app in Figma, detailing components, states, typography, and interactive dropdown behavior.
Navigation Footer5:30
Design the navigation footer in Figma with hover, normal, and active states, using secondary colors, rounded corners, and typography styles, then add a soft top shadow.
Sidebar News & Article10:08
Design a left news sidebar and a right info sidebar by building sidebar rows with article titles, text, and stats, styling borders, padding, and hover states with a chevron icon.
Sidebar Profile8:48
Design a sidebar profile in Figma for the LinkedIn & Amazon web app, building reusable components with a border, grayscale typography, and adjusted padding, plus a top background image.
Chat Component19:05
Design the chat component in Figma by adding a message page with search and profile pictures, three icons, chat bubbles, avatars, and a scrollable open/close prototype.
Header Component12:29
Design a header component and the main body for a LinkedIn and Amazon web app chat UI in Figma, using reusable message components, placeholders, and hover states.
Article Component13:03
Design an article component in Figma, including article text, author, followers, and publish date with likes and comments. Use frames, containers, borders, and variants, and test a prototype flow.
Finalizing LinkedIn Project27:42
Finalize the LinkedIn project in Figma by building the header, left and right sidebars, and main content with a footer, then prototype with fixed and scrollable regions and data-driven elements.

Requirements

Solid understanding of Figma

Description

By completing this advanced accelerated Figma course, you will feel confident adding 2 real world projects like Amazon & LinkedIn to your portfolio.

The course is suitable for students who have a solid foundation in Figma. Students who are already familiar with Figma can greatly benefit from this course by learning cutting edge Figma skills. At the beginning of each section, you will have the full access to download the Figma source files. We will dive right into designing projects in no time.

Amazon Project:

Design scalable and reusable color systems
Breakdown the Amazon project into smaller UI components and re-use them in Figma
Create a prototype in Figma by combining Amazon UI components
Learn how to sync data to your Amazon UI components

LinkedIn Project:

Design LinkedIn UI components with Auto Layout and Variants
Combine LinkedIn UI components into a working prototype in Figma
Transform static components into interactive components
Learn how to re-use components & styles to design the LinkedIn project efficiently

Other important topics that you will learn:

Design complex Figma auto layouts and nested interactive components
Generate color palettes and typographic items in a automated way
Utilize Figma plugins to improve your design workflow
Learn how to design and deliver better products with blazing speed
Build enterprise level design systems and UI components
Learn how to resolve UI issues as we build the components and prototypes together

Who this course is for:

Intermediate Figma designers

LinkedIn & Amazon Web App Design with Figma (2022)

What you'll learn

Explore related topics

Course content

Introduction7 lectures • 3min

Amazon E-Commerce Project12 lectures • 2hr 15min

LinkedIn Social Media Project13 lectures • 2hr 13min

Bonus Lecture1 lecture • 1min

Requirements

Description

Who this course is for: