Facebook Design System With Figma Variables | UX UI Advanced

Organize a Facebook design system in two files—design system with components and a design file with pages—covering foundations, logos, icons, colors, typography, and atoms to templates.

Understand how branded house applications differ from one-, two-, and three-tier token architectures, and how theme and brand differentiation drive scalable, maintainable design systems.

Explore the primitives collection within a three tier token architecture to build a color palette and typography system, including font weights and system fonts such as SF Pro and Roboto.

Create a semantic collection by linking raw colors to a variables library, defining primary and neutral palettes, and enabling light and dark modes with error, success, warnings, and information colors.

Structure the component collection with two folders, general and specific, focusing on surfaces, text, and icons, with common states and a scalable color system to avoid oversized variables.

Design a responsive collection within a Facebook design system using Figma variables, defining breakpoints, grid columns, typography scales, and consistent radii for mobile-first interfaces.

Define and manage text styles for headings (h1–h4) and body text using SF Pro, typography variables, and weights, with line height, letter spacing, and paragraph spacing.

Apply focus ring and shadows in the design system, using a blue focus ring as a drop shadow for accessibility; set up mobile to six-column grids with margins and gutters.

Design annotations organize a component using frames and auto layout, placing logo, path, title, and description with color and responsive alignment, while applying max width constraints.

Build the colors primitive as a base color block with hex codes, borders, and auto layout, then organize multiple swatches with typography and descriptive naming for a scalable palette.

Create a semantic collection by converting primitives to semantic naming, add descriptive text and large description fields, and organize with auto layout, uniform top-left alignment, and 64 px gaps.

Master mobile-first typography within a design system by applying design annotations, rem-based sizing, and a scalable scale for headings and text, using auto layout to create reusable typography components.

Organize and annotate logos and icons in the Facebook design system using Figma. Copy, paste, and align logos and icons, and set descriptions and colors for consistent design.

Apply effects like shadows and text shadows to add depth by layering elements on a z axis, and design focus rings for keyboard navigation and distinct error states.

Explore spacing and grid in the Facebook design system with Figma variables, defining pixels, measurements, and auto layout to build a responsive mobile grid with columns, gutters, and margins.

Divide a UI into components, blocks, templates, and pages, then apply this structure across marketplace, settings, feed, profile, and login, identifying reusable top and bottom navs.

Discover how components work as rigid building blocks in a design system, using master components and instances, with variants to adapt while keeping consistency across web and mobile.

Explore how to work with master components, instances, and both one-dimensional and multi-dimensional variants in Figma, including icon and color properties, to customize buttons and layouts.

Master how to differentiate and apply variant, text, boolean, and instance swap properties to create flexible components in Figma, using apply variables and appearance to toggle content and icons.

Understand how instance swap works for icons, images, and illustrations, and how components enable swapping. Create components from assets to enable instance swap and swap icons in frames.

Create and organize a button component in a design system using Figma variables, defining primary, ghost, subtle, outline, and neutral states with hover, pressed, focus, loading, and disabled.

Learn to design and test rounded button icons in a Facebook design system, mastering sizes, gaps, focus and hover states, color variants, borders, icon positions, and Figma variables.

Learn to design and implement alerts using Figma variables, including annotations, text variants, icon buttons, and color states for informative messages and user feedback in a 375 by 58 layout.

Design and assemble a scalable avatar component in Figma, creating circular avatars in multiple sizes with frames and borders, online indicators, logo and initials variants, and instant swap for images.

Explore the rating component as a molecule that visualizes user sentiment with a row of blue stars and subtext, including full and half-star variants for quality and social proof.

Design a shortcut tile for the settings menu, featuring a 24 by 24 icon, memories label, and a 170 by 76 surface with hover and pressed states.

Design and prototype checkbox and radio button components for Facebook design system in figma, covering default, hover, focus, disabled, and selected states, with md and lg sizes and icon usage.

Explore toggles in the Facebook design system by applying instance swap to icons, creating properties, and adjusting naming conventions to ensure icons appear or disappear and stay aligned.

Design a circular loading indicator inspired by Facebook, starting at 22 by 22 pixels and scaling to 32 by 32, 42 by 42, and 64 by 64.

Design and build a slider component in Figma, crafting the indicator, percentage text, hover and focus states, and a 320 by 8 progress bar, with variants from 0 to 100%.

Design the page indicator, a row of dots that tracks the current page in horizontal scroll areas like image galleries, with a white selected dot and light unselected dots.

Design a responsive tab bar with auto layout, min width 72 px and height 44, including selected/unselected states, bottom border, and fill container behavior for multiple tabs.

Design tooltips as blue boxes with text and arrows that describe or identify interface elements, display alternate image text, and support multiple variants and directions in auto layout.

Explore slots, a powerful design system concept, and learn to apply the instance swap technique to swap components like avatars, button groups, ratings, text, and icons.

Design a flexible slot component in a design system, enabling interchangeable content and swappable modules while centralizing dynamic content in a single source of truth.

Design and implement a versatile list item component with interchangeable title, subtext, icon, avatar, and toggle states, including border on/off and responsive variants for menus and settings.

Explore how the Facebook feed uses flexible media slots to render posts, including 2x4 and single image grids, with instant swap to switch content quickly.

Design a flexible jar component using interchangeable slots and auto layout to create a reusable drawer pattern for secondary content, with device mockups and scalable filters.

Design a modal sheet overlay that acts as an architectural container for high-priority transient interactions, dimming the background with a scrim and presenting a focused content vessel on top.

Explore building a versatile input box in the Facebook design system with Figma variables. Implement borders, placeholders, left and right icons, auto layout, and hover, focus, disabled, and error states.

Learn responsive design in Figma by mastering fixed width, hug, and fill container behaviors, using auto layout to build scalable frames, cards, buttons, and images that resize with the screen.

Analyze responsive design on YouTube, shifting grid columns from five to one, preserving a limited search bar, removing sidebars at breakpoints, and collapsing navigation for mobile.

Design and assemble a Facebook feed post with header, media, and footer, configuring icons, avatars, and like, comment, and share actions with responsive auto layout and component swaps.

Design a login form anchored by a brand hero illustration, featuring a stacked input group for phone, email, and password, and a full-width primary ghost login button.

Design and assemble the marketplace buy box by structuring image, title, price, stock status, description, quantity selector, and call-to-action buttons into a responsive auto layout.

Design a responsive two-column pixel shortcut grid for the settings menu using auto layout and fill container, turning tiles into components and unifying disparate features into a consistent navigation hub.

Create cohesive top and bottom navigation components for a Facebook-style UI, detailing icon states (filled vs outline), top borders for selected, text labels, and responsive auto-layout for mobile layouts.

Design a page profile header that anchors a full-width cover image with an overlapping circular avatar to establish visual hierarchy, plus likes, followers, and a responsive action bar.

Design a detailed profile section by transforming buttons into a cohesive button group, adding avatar accents, link-styled list items, and responsive auto-layout containers for a polished, info-rich profile page.

design a feed section with stories and reels using a horizontal carousel of vertical media cards, controlled by a top segmented control, with reusable components and responsive layout.

Design a template shell that serves as the master structural container with persistent top and bottom navigation, enabling instance swaps for slots and seamless view transitions.

Create page profile template, a specialized identity interface for public figures, brands, and organizations, with a high impact header and overlap avatar and cover media for subscribe or message actions.

Design the Facebook feed template as the central content aggregator, with a vertical stack of posts, reels, and stories anchored by a stories tray and a top composer.

Design a login page as the security gateway, using a login template and components to capture credentials (email, phone, password) and provide recovery paths within a structured layout.

Create and integrate a bottom sheet modal with a dark overlay that dims the underlying page, enabling focused tasks like filtering and adjusting settings.

Design the settings page as a centralized command center for user configuration, privacy controls, and account security, using desktop master-detail pattern, persistent sidebar navigation, and mobile drill-down to manage information.

Design a responsive friends page using a vertical list of user cells, rounded action buttons, and avatar icons, focusing on the friends discovery template to drive network growth.

Design the marketplace listing as the primary conversion interface by organizing a high fidelity media gallery, decision data, price, condition, and social proof before the call to action.

Learn to convert a light feed design to dark mode by applying component-level variables, adjusting backgrounds, text, borders, and icons for a cohesive Facebook design system theme.

Celebrate completing the Facebook design system with Figma variables course and apply your mastery of instances, instance swaps, variants, and variables to build responsive, end-to-end applications.