for developers
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/dev-tools@latest" generate [figma-ids]Publish mappings:
npx "@builder.io/dev-tools@latest" figma publishMigrate existing mappings:
npx "@builder.io/dev-tools@latest" figma migrateRe-authenticate:
npx "@builder.io/dev-tools@latest" figma authThe figma generate command supports several options:
--scaffold: creates basic mapping templates when automatic generation fails.
npx "@builder.io/dev-tools@latest" figma generate --scaffold--verbose: provides more detailed output during the mapping process.
npx "@builder.io/dev-tools@latest" figma generate 9ca66... --verbose--output: specifies the output directory for generated mappings.
npx "@builder.io/dev-tools@latest" figma generate 9ca66... --output=src/mappings--ci: run in non-interactive mode for CI/CD environments.
npx "@builder.io/dev-tools@latest" figma generate 9ca66... --ci --componentName="Button" --mappingOutput="src/mappings/Button.mapper.tsx"For more details on the commands available to you from the CLI, visit Builder CLI API, specifically the section on Figma commands.
- For an overview of how to connect Figma components to code components, go to Map components.
- For more information on the mapping process, publishing, and CI best practices, go to Component mapping in depth.
- For framework-specific details, go to Component mapping examples.