Problem
The Template API provides getString(), getBoolean(), getEnum(), getInstanceSwap() — but has no way to read bound Figma variables on visual properties (fills, strokes, text color).
When a component's fill color is set via a Figma variable (e.g. errorColor), the template cannot access that variable name to generate the correct code token.
Use Case
We have a Flutter Badge component where background color is controlled by bound Figma variables. The variable can be any color from our full design system palette — primaryColor, errorColor, successColor, warningColor, and many others. In code, these map directly to theme accessors:
PbBadge(
value: 'Text',
color: context.theme.primaryColor,
)
PbBadge(
value: 'Error',
color: context.theme.errorColor,
)
Currently the template cannot output color: at all — developers must manually look up the correct token.
Proposed API
instance.getBoundVariable('fills') // → "primaryColor"
instance.getBoundVariable('strokes') // → "borderColor"
Template usage (Flutter example):
const fillVar = instance.getBoundVariable('fills');
const colorPart = fillVar ? `\n color: context.theme.${fillVar},` : "";
export default {
example: figma.code`PbBadge(
value: "${value}",${colorPart}
)`,
};
This would generate:
PbBadge(
value: 'TextValue',
color: context.theme.primaryColor,
)
Problem
The Template API provides
getString(),getBoolean(),getEnum(),getInstanceSwap()— but has no way to read bound Figma variables on visual properties (fills, strokes, text color).When a component's fill color is set via a Figma variable (e.g.
errorColor), the template cannot access that variable name to generate the correct code token.Use Case
We have a Flutter
Badgecomponent where background color is controlled by bound Figma variables. The variable can be any color from our full design system palette —primaryColor,errorColor,successColor,warningColor, and many others. In code, these map directly to theme accessors:Currently the template cannot output
color:at all — developers must manually look up the correct token.Proposed API
Template usage (Flutter example):
This would generate: