Figma UIUX Projects

Explore how contrast enhances UI visibility in Figma by juxtaposing elements, using black and white, showcasing high versus low contrast, and applying clear typography with h1 and h2 hierarchy.

Explore color as a design element, covering primary colors red, yellow, blue; secondary and texture colors, complementary and analogous palettes, and how to create gradients and color transitions in Figma.

Explore how complexity and simplicity shape interface design in the Figma UIUX projects course, demonstrating how reducing clutter and avoiding overwhelming UI elements helps users navigate with clarity.

Scale demonstrates how element sizes change by percentage or value to maintain UI consistency across desktop, mobile, and tablet, highlighting responsive design and visual hierarchy.

Explore prototypes as testable product likenesses to gather investor and stakeholder feedback. Compare low-fidelity paper prototypes with high-fidelity digital prototypes in Figma and XD, and see how wireframes shape design.

Learn to use figma for ui design, from signing up and creating a new design to working with frames, shapes, fills, strokes, and layers.

Learn a practical figma interface walkthrough, including masking an avatar, resizing, rounding corners, and creating reusable components with assets and plugins, plus exporting PNG, JPEG, or SVG.

Design a web landing page in Figma by translating a Dribbble-inspired concept into a structured frame, grid, and navigation, including a logo, menu items, and an apply now button.

Design a UI hero card in Figma using plugins such as I quantify and On Splash to add a search icon, fill shapes with images, and adjust typography and spacing.

Create a polished social icons row and call-to-action elements in a Figma UI/UX project. Adjust opacity, font weight, and icon size, then evenly distribute spacing to match the design.

Learn practical Figma UI/UX design techniques, including resizing and color selection, typography adjustments, alignment, vector icons, and inserting images to create a polished contact card.

Refine a Figma uiux project by composing lines and shapes, applying color fills and drop shadows, and arranging icons with alignment, grouping, and layering for a polished interface.

Develop text styling and layout skills for mobile screens by configuring font weights, sizes, colors, alignment, icons, and duplicate elements in a Figma UIUX project.

Populate screens with email and phone, align icons and text, and apply consistent spacing and sizes (15, 19, 36) while adding Telegram and WhatsApp icons in a Figma uiux project.

Create a contacts screen in Figma by designing a profile avatar, search bar, and text elements, adjusting frame layout, sizes, radius, color, and drop shadow.

Design 8 continues building the home screen in Figma, teaching image placement, masking, and layout with Pixabay images, avatars, a list view, and a floating action button.

In this design session, learn to fine-tune spacing, perform multi-select with the shift key, group and rename elements, add dividers and lines, and adjust strokes for cohesive Figma UI design.

Develop pixel-perfect contact UI skills in Figma by aligning and centering text, adjusting typography to 14 px, managing layer order, adding dividers and a floating action button, and verifying distances.

Design an e-commerce UI in Figma by building a Hodja storefront, adding nav text, buttons, images, social icons, and using layout grids and columns to guide alignment.

Continue building the ecommerce landing page by aligning the navigation bar and elements, applying tidy up and spacing, duplicating text, using the Roberto font in black, and adjusting line height.

Explore exercise 3 in the Figma uiux projects course, building an ecommerce persona interface for Asia with images, shapes, a blob, and color and corner tweaks.

Align icons and arrange elements to refine the ecommerce UI design. Update text, adjust shapes and colors, duplicate components, and group them for final alignments.

Learn to design and align icons in Figma, using circles to craft clean social icons. Build a polished ecommerce landing page with live chat and customer support features.

Apply drop shadows in Figma to make buttons appear to project from the screen by adjusting x and y offsets, blur, and spread on rectangles and ellipses.

Explore interactive hover effects in Figma for UIUX projects. Interactive hover effects in Figma for UIUX projects.

Design a news UI for an agriculture-related weather app in Figma, duplicating screens, styling the news daily heading, text, shadows, and layout, and preparing for image and bookmark features.

learn to build a news ui in figma by populating the layout with greek-themed images, applying selection colors for bookmarks, and prototyping navigation between the home and news screens.

Design a news app interface in Figma by building a frame, colored shapes, and icons, applying shadows and interactivity, and wiring color changes when the news icon is clicked.