Figma UI Practices

Explore how ux designers uncover user needs, define goals, and design accessible solutions that truly solve problems, using relatable examples like Alma's late-school commute.

Identify user problems and needs through research, then map flows and wireframes. Conduct usability testing to gather feedback and refine the solution.

Explore how ux design creates easy navigation and intuitive layout in an Instagram case study. See ui design guide visual direction with icons, color, accessible on-screen text, and dark mode.

TikTok showcases an immersive ux with distraction-free video viewing and simple, labeled navigation, while ui cues include pink action colors and red indicators that guide quick, thumb-friendly interactions.

Learn how well designed UI enhances user experience and retention, drives competitive advantage, and boosts business revenue through intuitive typography, color, spacing, and layout.

Design content icons in Figma following material design guidelines, using a 24 by 24 pixel template with live area and padding, then build the mobile phone, mail, and location icons.

Design a color icon by drawing ellipses, duplicating and aligning circles into a pentagon, applying booleans, and crafting a phone icon with rounded shapes in vector mode.

Learn to build a horizontal image scroller in Figma by creating a frame, arranging images, enabling clip content, and setting the prototype to horizontal scroll.

Learn how to implement a vertical scroll in Figma while keeping the menu bar fixed, by using fixed frames, overflow vertical, and image card components.

Learn to remove image backgrounds in Figma using the icon eight background remover plugin and the icon eight illustration plugin, from finding plugins to applying and displaying the result.

Create a splash screen in Figma using the Lucy plugin and LottieFiles, import and animate a GIF, size a 168 by 168 circle, add pizza text, and preview in prototype.

Learn to create a loading animation in Figma using the Figma to Lottie export feature and the Lottie plugin, exporting a JSON animation for use in apps and websites.

Learn to build a music player animation in Figma by creating shapes, rounding corners, using auto layout and component sets, prototyping variant connections, and adding unsplash images and colors.

Learn to design a flip card animation in Figma by building front and back frames with shapes, gradients, images, and icons, then animate through hover and after delay prototype transitions.

Build a slide up card hover effect in figma by crafting a rounded gray card with title, description, and icon, then use component sets, properties, and smart animate for reusability.

Learn to build an infinite scroll (marquee) effect in Figma by creating text, shapes, and booleans, duplicating frames, and prototyping with smart animate and looping transitions.

Create a rotating image carousel in Figma by building frames and a circle path of five linked images with the Unsplash plugin, then animate via prototype and smart animate.