My figma designs have design system using react spectrum components and design tokens. When I import designs to builder.io, the design system and tokens are not picked up.
Given react spectrum components are available in an open source module ( and not in my code repo), how do I get builder to understand and register the design tokens and components from react spectrum that are used in my design?
Hey @SoD welcome to the Builder forum.
To use React Spectrum components and design tokens in Builder.io, you’ll need to register them with Builder.io so that the Visual Editor can understand and utilize them. Here’s a step-by-step guide on how to achieve this:
- Install React Spectrum Components and Design Tokens:
Ensure that React Spectrum and its design tokens are installed in your project.
npm install @adobe/react-spectrum @adobe/spectrum-tokens
- Create Custom Components for Builder.io: Register your React Spectrum components as custom components in Builder.io. This allows Builder.io to recognize and use these components in the Visual Editor. Create or update a file (e.g., builder-register.tsx) to register your custom components. Import the necessary React Spectrum components and register them using Builder.registerComponent.
// builder-register.tsx
import { Builder } from '@builder.io/react';
import { Button, TextField } from '@adobe/react-spectrum'; // Import React Spectrum components
// Register a Button component
Builder.registerComponent(Button, {
name: 'SpectrumButton',
inputs: [
{ name: 'children', type: 'string', defaultValue: 'Click me' },
{ name: 'variant', type: 'string', enum: ['cta', 'secondary', 'negative'] },
{ name: 'isDisabled', type: 'boolean', defaultValue: false },
],
});
// Register a TextField component
Builder.registerComponent(TextField, {
name: 'SpectrumTextField',
inputs: [
{ name: 'label', type: 'string', required: true },
{ name: 'placeholder', type: 'string' },
{ name: 'isDisabled', type: 'boolean', defaultValue: false },
],
});
- Register Design Tokens: To maintain consistent styling, use the design tokens provided by React Spectrum and register them in Builder.io. Import the design tokens from React Spectrum and register them with Builder.io. Create a file (e.g., builder-design-tokens.ts) to manage this registration.
// builder-design-tokens.ts
import { Builder } from "@builder.io/react";
import spectrumTokens from "@adobe/spectrum-tokens";
Builder.register("editor.settings", {
designTokens: {
colors: [
{ name: "Spectrum Blue", value: spectrumTokens.blue400 },
{ name: "Spectrum Red", value: spectrumTokens.red400 },
// Add more tokens as needed
],
},
});
Note: Ensure both these files are executed in your project to register the design tokens with Builder.io.
// Include in your main application file or custom initialization file
import './builder-register';
import './builder-design-tokens';
Thank you for the detailed instructions!
Using the example provided in the docs,
I had added the following in a spectrum-components.tsx file
export { ActionButton } from ‘@adobe/react-spectrum’;
This added the mentioned components to builder-register.tsx (covered steps 1 and 2)
I am able to map components and generate code with this setup
I have added step 3 to my setup. I have a couple questions
- How do I map design tokens so they can be used in code gen from figma ( quality setting for typescript, css modules, react).
- Is there a way to export design tokens like components can be exported (docs link above), so builder can add the registration code?
- Also how can I map spectrum icons used in my figma design, in the mapping step, so my generated code uses spectrum icons?
Thank you!
Hey @SoD, that is great to see that you have the setup working well and have mapped components and generated code!
1. How do I map design tokens so they can be used in code gen from figma ( quality setting for typescript, css modules, react). -
To map design tokens for code generation from Figma in Builder.io, follow these general steps:
1. Extract Design Tokens from Figma
Use Figma Tokens or Figma API to export design tokens (e.g., colors, typography) as a JSON file.
{
"colors": {
"primary": "#FF5733",
"secondary": "#33C1FF"
},
"typography": {
"fontSize": "16px",
"fontWeight": "bold"
}
}
2. Define TypeScript Interface
Create a TypeScript interface to represent the design tokens.
interface DesignTokens {
colors: {
primary: string;
secondary: string;
};
typography: {
fontSize: string;
fontWeight: string;
};
}
3. Generate CSS Modules
Map the design tokens to CSS variables in a CSS module.
import tokens from './design-tokens.json';
const generateCSS = (tokens: DesignTokens) => `
:root {
--color-primary: ${tokens.colors.primary};
--color-secondary: ${tokens.colors.secondary};
--font-size: ${tokens.typography.fontSize};
--font-weight: ${tokens.typography.fontWeight};
}
`;
export default generateCSS;
4. Use in React Components
Apply the generated CSS variables in your React components.
import styles from './styles.module.css';
const MyComponent = () => (
<div className={styles.container}>
<h1 style={{ color: 'var(--color-primary)' }}>Hello World</h1>
</div>
);
export default MyComponent;
5. Automate with a Script
Automate CSS generation with a simple Node.js script.
const fs = require('fs');
const tokens = require('./design-tokens.json');
const cssContent = `
:root {
--color-primary: ${tokens.colors.primary};
--color-secondary: ${tokens.colors.secondary};
--font-size: ${tokens.typography.fontSize};
--font-weight: ${tokens.typography.fontWeight};
}
`;
fs.writeFileSync('styles.module.css', cssContent);
6. Run the Script
Run the script to generate styles.module.css.
node generate-css.js
2. Is there a way to export design tokens like components can be exported (docs link above), so builder can add the registration code?
Currently, Builder.io’s automated tool for exporting components doesn’t directly export design tokens. However, you can manually add design token registration code in your setup.
You can consider submitting a feature request at Builder.io Ideas.
3. Also how can I map spectrum icons used in my figma design, in the mapping step, so my generated code uses spectrum icons?
To map Spectrum icons from your Figma designs you can consider following steps-
Register Icons as Components
First, register the icons similar to other components.
spectrum-icons.ts
1import { ActionButton, Text } from '@adobe/react-spectrum';
2import { SpectrumIcon } from '@adobe/react-spectrum';
3
4export { ActionButton, Text, SpectrumIcon };
5// Add other SpectrumIcons as needed
Register Icons in Builder
builder-registry.ts
1import dynamic from 'next/dynamic';
2import { Builder } from '@builder.io/react';
3import { SpectrumIcon } from './spectrum-icons'; // Adjust import path accordingly
4
5Builder.registerComponent(dynamic(() => import('@adobe/react-spectrum/Icon')), {
6 name: 'Icon',
7 inputs: [
8 {
9 name: 'iconName',
10 type: 'enum',
11 enum: [ 'Add', 'Alert', 'Checkmark', /* Add more icon names here */ ],
12 defaultValue: 'Add',
13 },
14 ],
15});
Mapping Icons
While importing from Figma, ensure you have the icons’ mappings correct. Since Figma might describe icons differently, make sure the names and properties align during the mapping process.
Manual Mapping: Manually adjust the Figma-to-Builder mapping in the Builder.io settings to ensure the correct component and design token utilization.