Material Design + Figma Styles = 🔥 | Figma Blog (opens in new tab)

Figma’s Styles feature makes Material Design easier to customize for different brands while preserving a shared, systematic foundation. The article presents a Material UI kit that uses global styles and nested components to theme colors, typography, elevation, grids, shapes, and icons across an entire design system. This approach helps teams move beyond generic stock interfaces toward consistent but distinctive branded experiences.

The Challenge of Theming Material Design

• Material Design improves usability and consistency across Google and Android applications.
• Using the same components everywhere can make products feel generic and less connected to their brands.
• Material’s broad component library creates a challenge: designers need an efficient way to customize an entire system rather than editing components individually.
• Themed Material Design aims to preserve the system’s strengths while enabling more memorable brand expression.

Figma Styles for Global Customization

• Figma Styles define reusable global text, fill, stroke, effect, and grid settings.
• Updating a style automatically changes every instance across the document.
• Styles can be shared through team libraries and reused across projects.
• This makes Styles well suited to theming large UI kits and design systems.

Material Colors, Typography, Elevation, and Grids

• Colors: Fill styles control primary and secondary colors, typography emphasis levels, and surface swatches. Changing a brand palette can update many components at once.
• Typography: Text styles cover Material’s type specifications, using Roboto by default but allowing teams to substitute their own typeface. Font changes may require adjustments to size and spacing.
• Elevation: Preset shadow styles represent Material’s elevation levels, simplifying shadows that may otherwise require combinations of up to three drop shadows.
• Grid: A reusable 4dp baseline grid can be applied to frames and components, alongside custom desktop, tablet, or mobile grids.

Combining Styles with Components

• Nested components allow teams to globally control the shape of buttons, floating action buttons, and cards.
• Designers can switch between sharp corners, cut corners, and rounded corners by toggling nested component visibility.
• Changes propagate throughout the system, though updates across hundreds of components may take several seconds.
• Individual component instances can still override shared settings when specialized styling is needed.

Icon Libraries

• Material offers five icon styles.
• To keep the main kit manageable, each icon style was organized into a separate sticker-sheet document.
• Teams can copy icons directly or publish the sheets as shared libraries for use across projects.

Figma Styles combined with components provide a practical way to build Material-based systems that are globally consistent, easily maintained, and adaptable to individual brands.