Axis options
This page describes the axis
option for the variantProperties
API.
Options axis="x"
and axis="y"
Default configuration
By default, story.to.design will lay out variants vertically, like this:
![Default layout of imported components on Figma canvas.](/_image/pages/docs/axis/base_1280x1296.webp)
And the default configuration will be:
{
"initArgs": {},
"variantProperties": [
"disabled",
"kind",
"variant"
]
}
However, if you are not happy with the default layout of a variant,
it can be ajusted in Advanced setup with the axis
option.
Using axis="x"
{
"initArgs": {},
"variantProperties": [
"disabled",
"kind",
{
"fromArg": "variant",
"axis": "x"
}
]
}
Result
![Layout of components using the x axis option.](/_image/pages/docs/axis/axisx_1760x736.webp)
Using axis="y"
{
"initArgs": {},
"variantProperties": [
"disabled",
"kind",
{
"fromArg": "variant",
"axis": "y"
}
]
}
Result
![Layout of components using the y axis option.](/_image/pages/docs/axis/base_1280x1296.webp)
Option axis="split"
With the axis="split"
option, you can create groups of individual components.
This is particularly helpful if you want to split icons into multiple components to use them in instance swaps.
Icons as variants default
![Default layout of icons as variants.](/_image/pages/docs/axis/icon-variants_840x1146.webp)
Using axis="split"
{
"initArgs": {
"color": "neutral-500"
},
"variantProperties": [
{
"fromArg": "name",
"axis": "split"
}
]
}
Result
![Layout of icons after using split axis option.](/_image/pages/docs/axis/icon-split_1180x1348.webp)