How to Integrate Figma Design Tokens with Material UI in React

Design tokens and component libraries offer significant advantages for web development. This article demonstrates how to integrate Figma design tokens with Material UI in React to establish a well-structured and customizable design system.

Prerequisites

• Understanding of React, Material UI, and design token concepts.
• A Figma project where design tokens are defined.
• Exported design tokens ready for your React project (JSON or JavaScript object).

Steps

1. Export and Transform Design Tokens
   • Employ a plugin in Figma (such as Figma Tokens) to export your design tokens in a JSON-like format.
   • If necessary, utilize Style Dictionary to transform tokens into a JavaScript object usable by your React project.

2. Create a Material UI Theme

   • Import createTheme from Material UI.

   • Establish a new theme, mapping Figma design tokens to Material UI theme properties:
     

     JavaScriptimport { createTheme } from '@mui/material/styles';
     import tokens from './theme'; // Your design token file
     const theme = createTheme({
       palette: {
         primary: {
           main: tokens.color.primary,
         },
         // ... other color mappings
       },
       typography: { 
         // ... typography mappings
       },
       spacing: tokens.space 
     });
     

3. Apply the Theme with ThemeProvider

   • Import ThemeProvider from Material UI.

   • Enclose your top-level React component with ThemeProvider, providing your custom theme:
     

     JavaScriptimport { ThemeProvider } from '@mui/material/styles';
     function App() {
       return (
         <ThemeProvider theme={theme}>
           {/* Your React Components */}
         </ThemeProvider>
       );
     }
     

Example – Styling a Button

Illustrating use of a spacing token within button padding:

JavaScript// theme.js
module.exports = {
  space: {
    paddingMedium: 16
  }
};

// React Component
import { Button } from '@mui/material';

<Button 
  variant="contained" 
  sx={{ padding: theme.space.paddingMedium }} 
>
  Click Me
</Button> 

Additional Considerations

• Tool Assistance: For complex projects, Style Dictionary helps with theming format conversions.
• Specificity: To adjust individual components, prioritize Material UI's sx prop or stylesheets over theme attributes.

Conclusion

The smooth integration of Figma design tokens with Material UI enables a coherent design language across your React application. This technique simplifies development, facilitates effortless brand changes, and improves the overall user experience.