Figma + Adobe XD Guide: Learn UI/UX Design With 12 Projects

Create a website rollover button in Figma by building a gradient blue button, applying a drop shadow, and animating hover with smart animate and ease in/out.

Learn to create a left slide in Figma by building a frame, adding and styling shapes, applying drop shadows, importing icons, configuring components and variants, and prototyping with smart animate.

Create the website background by placing a rectangle, applying a blue to sky gradient, and importing a high quality airplane image; adjust size and corners for a clean look.

Create a button in Figma using auto layout, apply fill and text, adjust padding and centering, then convert to a component with a hover variant using smart animate.

Create a parallelex effect in Figma by building layered frames, masking content, and animating transitions between main frame one and main frame two with smart animate.

Create the car website front page by setting a 1920 by 1080 frame, adding a car image, text in chosen fonts, and a subscribe button with auto layout.

Add car logos to the first page by placing and resizing BMW, Ferrari, Chevrolet, and Audi, then create a text frame as a component with a variant and hover prototype.

Create a second web page by duplicating frames for home and about pages, add car images with image uploads, and refine the logo as a component with centered non-capital text.

Master prototyping steps to align cars on the about and home pages, flip elements, place pages, adjust backgrounds and logos, and animate navigation with smart animate at 700 ms.

Design the third webpage by building feature blocks, refining text, applying strokes and corner radii, adding icons, and aligning package details like 24/7 support.

Create a subscribe page in Figma, designing a premium package with gradient, benefits (two luxury cars, ten liters of fuel, 24/7 support) and a $40 price, plus components and prototyping.

Finish the website by arranging home, about, and subscribe pages, duplicating pages, and turning off content clipping. Connect prototype links with smart animate transitions in 700 milliseconds across pages.

Design a food recipe webpage in Figma by creating a 1280 by 720 frame, using AI-generated dish images, gradient backgrounds, drop shadows, and recipe names with feather icons.

Create a transition page by duplicating frames, hiding elements, and applying a masking effect, then insert cooking images with a plugin and place dummy text for a restaurant UI.

Create a backward button with feather icons, adjust scale and color, add a component with hover rollover effects, align elements, and finalize the interactive menu.

Duplicate and refine elements to finish the transition page animation, dragging and rotating frames and rectangles, toggling opacity, and building a prototype with 700 ms click transitions and back navigation.

Design a shopping app page in Figma on an iPhone Pro frame, adjust corners, add fashion imagery, style text with Poppins semibold, and create reusable components for buttons and collections.

Duplicate and replace frames, align and size images, and build a horizontal prototype where images scroll while text remains fixed, using light backgrounds, subtle strokes, clipping, and centered pricing text.

Create a relaxed T-shirt page in Figma by adding text and icons, adjusting typography and color within iPhone Pro frame, and turning elements into components with hover effects for prototyping.

Prototype a relaxed t-shirt product page in a Figma/Adobe XD UI design bootcamp workflow, adjusting backgrounds, images, text, and interactive buttons, linking frames with smart animate and on-tap prototyping.

Prototype men UI design page by duplicating frames, replacing female images with male ones, and enabling content clip, using instant transitions to switch between men and women while preserving pricing.

Finish all interactive animations by linking frames in the prototype, using smart animate with ease in/out, and enabling back navigation between kids, woman, and man screens.

Create a shoe shopping website prototype in Figma and Adobe XD, using image placement, background removal with AI tools, autolayout, color tweaks, and hover effects.

Practice hover-triggered transitions on the main page by highlighting shoes on hover, using masks, dummy shapes, and smart animate prototypes with a 200 ms timing.

Add and animate text on the main shoe page using masking and rectangles in Figma and Adobe XD, create color variations with dummies, and implement a rollover animation.

Prototype hover rollovers on the main shoe page, highlighting the selected shoe while dimming others, duplicating frames, adjusting opacity, and naming the golden shoe with 500 ms transitions.

Finish prototyping the MainShoe page by duplicating frames, renaming elements, applying 40% fades, and aligning items to the left, with hover rollovers and no click animation in preview.

Design a new product page in Figma and Adobe XD by duplicating frames, arranging shapes, applying gold tones, adding price and a dummy add-to-cart button, and refining masks.

Replace rollover with on click actions and disable rollover animations on the first main page. Add a backward button with feather icons, turn off content clipping, and preview interactions.

Learn how to connect main text to the next page in Figma using interaction, prototype with smart animate, adjust frames, and apply ease in and out for a smooth transition.

Finish the website interaction animation by linking prototype connections and on-click navigation across pages, and apply consistent color corrections like exposure, contrast, saturation, and tint.

Navigate the XD interface—from workspace and left tools to the right property panel—adjust artboards, colors, grids, and prototypes, and learn saving and sharing for collaboration.

Explore outputs and artboards in design tools, adjust presets or custom sizes, rename, resize to 1500 by 1500, and use grids and guides for precise alignment in ui/ux mockups.

Explore text tools in XD, from adjusting font size and styles to applying fills, borders, opacity, and shadows, and master alignment, spacing, and auto width/height.

Import and arrange images in XD, adjust size and borders, and explore blending modes. Learn masking with a shape to reveal the image, and apply background blur and shadows.

Learn alignment tools to place a rectangle and a circle in perfect alignment using vertical and horizontal options. Apply booleans like subtract, intersection, and exclude to alter shapes and colors.

Learn assets and components in UI design, including creating components, adding color and font assets, managing instances, and exploring rollover and click prototype states.

Harness the repeat grid to duplicate items, group elements, and build scalable image galleries for mobile and web. Adjust spacing and replace images to create looping, seamless grids.

Learn responsive design concepts in XD, including responsive resize, grouping, stacks, and artboard responsiveness, with comparisons to Figma’s auto layout and practical tips for building adaptive UI.

Explore basic and advanced prototyping in Figma, with comparisons to XD and projects. Create components with default, hover, and rollover states; connect pages; apply transitions with auto-animate and smart animate.

Create a first user interface page for a food delivery app in Adobe XD, configuring frames, icons, typography, colors, images, pricing emphasis, and delivery address section to prototype the layout.

Create a gallery-like prototype by aligning transparent images, duplicating and grouping frames, adding text and price labels, and linking iPhone Pro Max screens with tap-triggered auto-animate transitions.

Prototype a main food app item page with backward navigation, fade-out menus, and rollover and order now buttons. Utilize groups, states, and auto animate transitions (ease in/out, 3s).

Design a payment method page with credit card, PayPal, and Google Pay options, using logo imports, component states, and interactive prototypes to showcase selection and transitions.

Finish prototyping the payment method page by linking credit card, PayPal, and Google Pay to their pages, and add a loading animation with hover states.

Design a PayPal login page in Figma or Adobe XD, resize the logo and icons, replace the image, set welcome text, and create a reusable component with hover states.

Create a type text interaction animation for a login page by masking a rectangle, simulating typing with a cursor, and linking email input through prototype transitions.

Master finishing type text interactive animation by designing masked password circles, a blinking cursor, and prototype connections for a six-character password, culminating in a login flow and PayPal page demo.

Design a PayPal-like login flow and a request payment button, then create a transaction details page showing transaction ID, date, amount, and tax.

Finish connecting pages, enable automatic back navigation, and wire the order now button to payment flows for PayPal, credit card, and Google Pay, with appropriate transitions.

Create a first mens wear product page in a 1920 by 1080 frame, arranging three images, a logo, and masking with shapes while applying borders and drop shadows.

Design a product card on the main page in Figma and XD, adding title, price, and a rollover button with hover states, alignment, dummy content, and component states.

Finish the main page by adding social media icons (Instagram, Facebook, LinkedIn) with PNG logos, configure the menu and search, and create a reusable quick view button with hover states.

Learn to prepare a main web page prototype by organizing images into groups, replacing visuals with button interactions, duplicating assets, and masking content to create a polished product showcase.

Finish the main page prototype by applying drop shadows and organizing content with groups and masks. Link screens with auto-animate transitions to create looping navigation across the first three views.

Duplicate and ungroup elements to form new components, organize groups, and set hover and default states, then prototype main-page interactions like buy now linking to payment details with auto-animate.

Design and prototype a finished name input card in Figma or XD by masking text, linking the input to the prototype, and noting limits of random text.

Design an interactive credit card input field animation in Figma and Adobe XD, using masking, cursor placement, typing digits, and opacity changes, with linked prototype.

Learn to finish input fields in a UI prototype by wiring card name, number, expiry date, and CVC, including backward navigation, masking, and final prototyping steps.

Design and prototype a finished website page by importing assets, styling text, setting colors, grouping elements, and implementing hover states with transitions and auto-animate, plus audio.

Design a header for a payment gateway site by building a logo, navigation, and a sign-up button with gradients. Explore components, hover states, and alignment in Figma and Adobe XD.

Finish the first webpage for a commercial site by adjusting text, color, font size, alignment, and images to present a professional design in Figma and Adobe XD.

Duplicate the second webpage, replace images, adjust text colors and layout to show connecting a local bank account; create a component with state and slide transitions to navigate between states.

Duplicate and group elements to build the connect now button, add a hover state, and align images and frames. Link the button to the prototype with auto animate.

Finish the start page animation by building components, setting default and hover states, and prototyping card linking flows for debit, credit, and digital cards with 0.6-second transitions.

Finish the interactive animation for the connect button using auto animate with ease in and out at 0.6, and implement hover states, groups, and opacity transitions.

Design and prototype a sign-up page using Figma and Adobe XD, guided by ui/ux principles in this bootcamp.

Finish connecting the home, about, and pricing pages, set hover and default states, and ensure seamless navigation for a professional website.