Learn Figma: User Interface Design Essentials - UI/UX Design

Explore layouts, iconography, typography, colors, and composition to build a solid foundation in design basics for aspiring UI/UX designers.

Learn about layouts in ui ux design, emphasizing consistency and spacing to create clear, understandable compositions across apps and websites.

Explore visual hierarchy in UI design by prioritizing elements through size, color, alignment, contrast, proximity, repetition, and whitespace to guide user attention.

Eliminate unnecessary elements to reduce visual noise and design user-friendly screens with clear information and adequate white space, informed by user feedback.

Learn how iconography acts as a visual language to convey content or functionality with simple, recognizable icons. Design custom icons in harmony with your overall design, ensuring consistency and clarity.

Learn typography essentials for interface design in Figma. Use at most two fonts for headers and bodies, and master baseline and letter spacing, serif versus sans serif.

Explore color contrast in UI design, using vibrant colors and high-contrast accents to boost readability and legibility. Balance creativity with accessibility by checking contrast ratios online to avoid readability issues.

Explore how to build a color palette and color scheme for UI with primary, secondary, accent, neutrals, and semantic colors, plus complementary, monochromatic, and analogous combinations on the color wheel.

Learn to design with consistent spacing in user interfaces by measuring and applying uniform spacing patterns, such as eight-pixel gaps, to keep layouts clear and cohesive.

Explore composition in design through the golden ratio, a visually pleasing proportion used in architecture, paintings, and photography, with a 1200px layout split into 741px and 459px to guide attention.

Discover how a design guide acts as a system to keep designs consistent and accelerate design process using components like UI elements, typography, iconography, sizing and spacing, and color palettes.

Learn how to use fonts properly in ui design, keep it simple with at most two fonts, and explore San Francisco, Proxima Nova, and Roboto as options.

Keep colors consistent across your UI by applying the same colors to titles and purchase buttons on every page. Use a design guide to standardize color choices and patterns.

Test scalability to ensure icons remain recognizable at sizes such as 15 by 15 pixels. Maintain consistent iconography with padding between icons, color, and alignment across icons of different sizes.

Explore how UI element consistency strengthens interfaces by examining cards, text fields, sliders, dialogues, charts, steps, tables, selection controls, menus, and snack bars.

Explore font resources and learn to find free and paid fonts from online sites like Google Fonts, MyFonts, and Adobe Fonts, with helpful options such as Typewolf and Font Pair.

Discover color resources for UI design using color hot, Adobe Color, and web gradients to craft the best possible color palette for your projects.

Discover icon resources such as flat icon, icon finder, and nucleo for your design project. Choose icons that are easy for users to recognize.

Discover how Figma, a browser-based interface design tool, enables real-time collaboration across teams and supports desktop use on Windows and macOS. The free version offers unlimited pages and files.

Sign up for a free FEMA account with Google or email, access projects and plugins, and install the desktop app with font and live device preview support.

Navigate the Figma environment across browser and desktop, and master the four regions—toolbar, layers pane, inspector, and canvas—to accelerate UI design, prototyping, and code handoff.

Master the shapes tool in Figma to create and customize rectangles, circles, polygons, stars, lines, and images, adjusting corner radii, arc, count, ratio, and alignment for polished UI.

Explore editing shapes in Figma by entering edit mode, editing nodes and curves, adjusting corner radii, using the pen and band tools, and grouping to design icons.

Learn how to use the layers panel in a Figma-like tool to reorder layers, group items, hide and lock layers, identify layer types, and organize prototypes with pages.

Learn how to use boolean operations in Figma to combine shapes into icons, using union, subtract, intersect, and exclude, with search and cloud icon examples.

Learn to create and edit text in Figma with the text tool, including area text and fixed size text boxes. Convert to vectors using flatten or outlines stroke for design.

Explore the text inspector to customize typography, including font choice, weight, size, line height, letter spacing, and paragraph spacing, plus alignment, indentation, and advanced options.

Define and share text styles in Figma to reuse headers across screens, apply sizes to text layers, and see updates propagate across instances while noting color changes may not apply.

Explore constraints and responsive layouts to keep designs centered and adaptive across portrait and landscape modes. Make backgrounds stretch by adjusting left and right constraints and refine spacing.

Create and configure auto layout in Figma to build responsive user interface elements, such as buttons and cards, by adjusting horizontal and vertical padding, spacing, and alignment.

Learn to insert and edit images in Figma using place image, masks, and fills, and adjust exposure, saturation, and other properties from the assets for circles and cards.

Explore how to apply fills in Figma by creating shapes, picking colors with hex codes or eyedropper, adjusting opacity and color modes, and using solid, linear gradient, and radial fills.

Learn to add and customize a stroke to a shape, adjusting color, thickness, and positioning inside, center, or outside, and explore dash styles and basic arrow options.

Explore applying effects in Figma, including drop shadows, inner shadows, and layer and background blur, with tips on color, opacity, blur amount, and offsets for realistic UI.

Learn to create and apply color styles in Figma, building primary and secondary palettes from base colors, and save variations for fills, strokes, and quick design system updates.

Master masking in Figma to reveal portions of images or objects, apply masks to layers above using the mask icon, or mask two layers, duplicating shapes to preserve effects.

Create reusable components in Figma, including master components and instances, to design buttons and text fields with hover and disabled states, then publish via team libraries for cross-project reuse.

Learn to use Figma variants to organize components into a single component set, enabling one-dimensional and multidimensional variants for buttons, switches, and icons with auto layout.

Learn how to use layout grids to precisely place objects across screen sizes in Figma, adjusting grids by size, color, opacity, and type, including columns, margins, spacing, and center alignment.

Explore how plugins extend Figma's functionality and learn to find, install, uninstall, and manage featured, popular, and installed plugins. Try on Splash and Contents Real for visuals and data.

Export designs from Figma by selecting objects, adjusting 1x–3x sizes with a suffix and format, then share with teammates or embed via iframe code on a website.

Master prototyping in Figma by building artboards, linking home and detail screens, and using smart animate for motion; preview, adjust timing and easing, and explore destinations.

Collaborate in Figma with multiplayer editing, live cursors, and in-app commenting to review UI design in real time. Share projects, invite teammates, post comments, and resolve discussions without exporting files.

Discover how to access Figma keyboard shortcuts from help and resources, with Mac and Windows variants, including copy, paste, group, duplicate, scale with K, and padding tips.

Explore essential UI elements such as text fields, buttons, sliders, cards, dialogues, steppers, and charts, and learn why they matter in designing a user interface.

Explore the anatomy of text fields, including label, input text, trailing icons, and activation indicators, and learn how different platforms use standard UI elements and state changes like error colors.

Design buttons by defining states, hierarchy, and placement to guide user actions. Use text, outlined, contained, and toggle buttons with clear contrast.

Explore how sliders enable users to select values within a range, with continuous and discrete types, instant responses, accessible design for brightness, volume, icons on both sides, and other settings.

Design tooltips that display concise, informative text when users hover, focus, or tap an element. Pair tooltips with their related elements, and use transitory tooltips that disappear after 1.5 seconds.

Explore selection controls in UI design, learn to use switches, radio buttons, and checkboxes to declare preferences, ensure familiarity and efficiency, and visually distinguish selected from unselected items.

Master chips in ui design to enable selections and actions within groups. Design for all states, ensure relevancy with content, and use compact chips with icons or text.

Learn how cards serve as standalone containers that display content and actions for a single subject with clear hierarchy and easily scannable layouts using media such as images and icons.

Design dialogues to inform users and prompt decisions—such as permissions or slider options—and block app usage until action, using a dark overlay, clear messaging, and side-by-side buttons.

Design lists as continuous groups of images or texts with items that include primary and secondary actions via icons, ensuring consistent icons, tags, and actions.

Explore data tables in user interface design, including header rows with column names, scrollable and sortable records, expandable rows, pagination, and fixed headers for context.

Explore navigating between app screens to complete tasks, from explorer page to profile page. Learn lateral, forward, and reverse navigation and how the main navigation component exposes top-level screens.

Explore how menus in user interface design present a list of choices on a surface, enabling quick, space-efficient selections with emphasis on easy scan, fast open/close, and front placement.

Explore how charts visualize data to help users compare values, and apply best practices for visibility, consistency with card-based layouts, and margins with ample white space in your projects.

Learn how steppers show progress through numbered steps and aid navigation, with optional feedback after saving. Apply rules to avoid nested steppers and choose between horizontal or vertical layouts.

Snack bars provide concise feedback at the bottom of the screen. Keep them brief, transient, and limit to one button; use dialogs for important tasks that block the app.

Explore how wireframes serve as the graphical skeleton and blueprint for an app or site, outlining layout and functionalities with low fidelity and considering user needs, contrasted with high-fidelity prototype.

Map user flows as the path from entry through phases to final action, such as purchasing, illustrated by a journey from home to category, product, cart, checkout, payment, and receipt.

Create high fidelity interactive prototypes that clearly convey design and exact interactions, guiding developers on code conversion. Use sketch, vision studio, principle, and proto pie for advanced prototyping.

explore wireframe tools and balance standalone software with web-based options to keep your wire framing consistent in ux design, using might flow dot com, sketch, and Adobe XP.

Create a low-fidelity wireframe using a premade wireframe UI kit, featuring hero sections, features, posts, social proof, navigation, and call-to-action elements.

Explore what a color style is and learn to create your own color style guide to ensure brand color consistency throughout the design process.

Create a design system in Figma by building primary, accent, and semantic color palettes, adjusting opacity for states, and creating color styles with the eyedropper to preserve consistency.

Build the design system by adding grey background colors and gradient colors, duplicating sections, detaching styles, and creating color styles with specific hex codes and opacities.

Learn to add borders and shadows in Figma by detaching colors, applying strokes, creating color border styles, and building layered shadow effects with precise blur, offset, and opacity.

Discover typography styles by building a textile-inspired typographic system with different sizes, weights, and colors for your Figma UI design project.

Duplicate artwork to build the typography portion of the style guide, rename groups to typography, and create left, center, and right styles (H1–H3) with sizes 34, 26, 16, and 12.

Learn to build a typography style guide in Figma by duplicating groups, renaming them, and setting body text to 14, 13, and 11 points, detaching text layers from styles.

Design a complete finance app in figma by building 24 screens from launch to onboarding. Create authentication flows, a home with cards, transactions, and transfer, plus notifications and profile.

Design a launch screen for the money app by creating an iPhone artboard, placing and centering the provided logo graphics from assets, and aligning with the status and home indicators.

Design sign-in and welcome pages by duplicating artboards, building gradient circles, a header logo, text fields, password visibility toggle, forgot password, and a gradient sign-in button.

Design a sign-up page in Figma by duplicating sign-in artboards, configuring password and email fields with icons, and creating an error state with a red color scheme.

Design OTP verification screens in Figma with an organized artboard, status bars, and illustrations, across three screens, and implement enabled and disabled verify button states using clear typography.

Design profile screens in Figma with a gradient background, a profile image placeholder, and fields for username, full name, and birth date, plus an active inactive complete button.

Design a modern home page in figma by building a header, a balance card with a bar chart, and a custom bottom tab bar with wallet, notification, and profile icons.

Design a left sliding menu for a mobile home screen in Figma by building the menu UI, adding profile info, submenu items with icons, selection states, and a sign-out button.

Design and build a credit cards page in Figma, featuring primary and secondary cards, gradient backgrounds, and a recent transactions list with icons and right-aligned amounts.

Design a transactions page in Figma with a header and navigation, a floating bottom card, and a search bar plus a list of transactions showing dates, times, and amounts.

Design a detailed transactions page in Figma by duplicating the screen, grouping elements, and creating four colored category cards for travel, shopping, sport, and medicine.

Design and assemble a transfer page in Figma, duplicating screens, removing elements, and building an input area with amount, recipient name, and send button, including navigation and profile avatar.

Create a confirmation screen in Figma by refining a transaction layout, displaying recipient and amount, status indicators, profile image, and two buttons for execute again and confirmation.

Design a notification page in Figma by duplicating the confirmation screen, adding a status bar and search bar, and listing notifications with profile, name, message, and a right arrow.

design a user profile screen in figma, including profile image, name, status, and form fields, with precise typography, color, spacing, and a bottom sign-out button.

design three onboarding pages that showcase logo, illustrations, titles, descriptions, and page indicators, then guide users with next and get started actions.

Create a modern landing page for a fictional app by building a design system, low-fidelity wireframes, and a high-fidelity interactive prototype with animations and accordions.

Learn what a landing page is and how to structure it for marketing success. Explore essential elements like the hero section, benefits, social proof, and CTAs to boost conversions.

Set up your Figma project and build a design guide with typography and color styles, then create and apply text styles for consistent headings and body text.

Create and organize color styles in Figma, establishing a design guide with primary, accent, secondary (light and dark), neutral, and stroke colors, then copy properties and apply typography.

Create a low-fidelity landing page wireframe, outlining a hero section, nav bar, menu items, and a call-to-action button using simple shapes and grouping.

Create a low-fidelity wireframe for an online banking app by building three feature sections with titles, descriptions, and right-side images, then add free and premium pricing plans and a Q&A.

Design a landing page navigation bar in Figma using a 12-column layout grid, auto layout, a logo, menu items, and a sign up button.

Design a hero section by building a layered gradient background with the pen tool, blending colors, masking the background, and placing a headline, description, and right-side image.

Design the hero section for a mobile banking app by adding a headline, subtitle, and call to action. Place an image and 3d shapes, and balance white space for depth.

Design and assemble a credit card feature in Figma, creating title and subtitle, a stylized card with shapes, masking, colors, and a MasterCard-like logo, plus shadow and alignment.

Design the second feature section by building left-side balance cards and a right-side header, description, and learn more button, then create a simple bar chart.

Design the support section in Figma by creating text layers, profile avatars, and three chat bubbles, using the content real plugin to populate images and show support in five languages.

Design a membership plans section in Figma, including a title, subtitle, two pricing cards with names and prices, a registration button, credit card visuals, and premium feature differences.

Design the frequently asked questions section in Figma, including a title, subtitle, and accordion cards with plus icons, and customize colors, spacing, and backgrounds with the pen tool and Luper.

Finish a landing page footer in Figma by building a contrasting background, placing the logo and copyright notice, and adding and aligning multiple link groups with clear spacing.

Create a fully functional prototype in Figma by adding hover states, light-theme credit cards, and accordion Q&A cards on a landing page, using smart animate and prototype connections.

Explore seven logo design types—from monogram and word marks to abstract, pictorial, mascot, combination, and emblem logos—using real-world examples and a starter project for hands-on practice.

Design our first logo in Figma by constructing shapes—the FEMA logo uses rounded rectangles and a circle; use color picking, duplication, flipping, and grouping to finalize.

Design the second logo for the imaginary brand Clark by building a 200 by 200 square with rounded corners, a green fill, and a gradient circle.

Design the third logo for the imaginary brand Moon in Figma using circles and a subtract boolean operation, rotate, align, color black, and add the word Moon in Monserrate font.