When working with TypeScript, you can leverage these interfaces for better type safety in your mapping functions:
export type FigmaNodeType =
| "COMPONENT"
| "ELLIPSE"
| "FRAME"
| "GROUP"
| "INSTANCE"
| "LINE"
| "POLYGON"
| "RECTANGLE"
| "STAR"
| "TEXT"
| "VECTOR";
export interface FigmaNode extends BaseFigmaProps {
/** Figma node "name" */
$name: string;
/** Figma node type (FRAME, GROUP, TEXT, etc.) */
$type:
| "COMPONENT"
| "ELLIPSE"
| "FRAME"
| "GROUP"
| "INSTANCE"
| "LINE"
| "POLYGON"
| "RECTANGLE"
| "STAR"
| "TEXT"
| "VECTOR";
/** Represents the text content of the node and its descendants */
$textContent: string;
/** URL to the rasterized image of this node */
$imageUrl: string;
}
export interface BaseFigmaProps {
/** Direct children of the root component node or instance */
$children: (FigmaNode | undefined)[];
/** Recursively finds the first figma child with the given name, among all descendants */
$findOneByName(name: string | RegExp): FigmaNode | undefined;
/** Recursively finds all nodes with the given name, among all descendants */
$findAllByName(name: string | RegExp): FigmaNode[];
/** Recursively finds the first node that matches the predicate, among all descendants */
$findOne(predicate: (node: FigmaNode) => boolean): FigmaNode | undefined;
/** Recursively finds all nodes that match the predicate, among all descendants */
$findAll(predicate: (node: FigmaNode) => boolean): FigmaNode[];
}When creating a mapping function for a specific component, you should extend BaseFigmaProps with the properties from your Figma component:
figmaMapping({
componentKey: "button-component-key",
mapper(figma: FigmaButtonProps) {
return (
<Button
color={figma.Color?.toLowerCase()}
size={figma.Size?.toLowerCase()}
type={figma.Variant?.toLowerCase()}
>
{figma.$children}
</Button>
);
},
});With these mapping capabilities, you can create an efficient design-to-code workflow that maintains consistency between your Figma designs and your Angular components. Use these commands at the command line.
Generate mappings:
npx builder.io@latest figma generate [figma-ids]Publish mappings:
npx builder.io figma publishMigrate existing mappings:
npx builder.io figma migrateRe-authenticate:
npx builder.io figma authThe figma generate command supports several options:
--scaffold: creates basic mapping templates when automatic generation fails.
npx builder.io@latest figma generate --scaffold--verbose: provides more detailed output during the mapping process.
npx builder.io@latest figma generate 9ca66... --verbose--output: specifies the output directory for generated mappings.
npx builder.io@latest figma generate 9ca66... --output=src/mappings--ci: run in non-interactive mode for CI/CD environments.
npx builder.io@latest figma generate 9ca66... --ci --componentName="Button" --mappingOutput="src/mappings/Button.mapper.tsx"- Generate mappings:
npx builder.io@latest figma generate [figma-ids] - Publish mappings:
npx builder.io figma publish - Migrate existing mappings:
npx builder.io figma migrate - Re-authenticate:
npx builder.io figma auth
By understanding and using these mapping capabilities, you can create a seamless design-to-code workflow that maintains consistency between your Figma designs and your React components.
- Component Mapping Overview - Get started with the component mapping workflow
- Creating React Mappings - React-specific mapping instructions
- Creating Angular Mappings - Angular-specific mapping instructions
- Publishing Mappings - Learn how to publish your mappings to Builder.io