Story to Design

https://story.to.design/docs
Admin
A Figma plugin that generates and maintains a full Figma library or UI kit directly from Storybook,...
Tokens:10,759
Snippets:181
Trust Score:6.3
Update:4 months ago
Show doc for...
Tokens:
Raw
### Enum ArgType Example with Select Control

Source: https://story.to.design/docs/args

Example of defining an enum argType with a 'select' control. This presents a dropdown list of options for the argument.

```javascript
argTypes: { variant: { control: 'select', options: ['primary', 'secondary'] }}
```

--------------------------------

### Create CSS Theme Variants with :css (Stylesheet)

Source: https://story.to.design/docs/special-args

This example shows how to create variants based on different stylesheets using the :css argument. It defines 'dark' and 'light' themes by linking to external CSS files.

```json
{
  "fromArg": ":css",
  "name": "theme",
  "values": [
    {"name": "dark", "argValue": "<link rel=\"stylesheet\" href=\"/css/dark.css\">"}, 
    {"name": "light", "argValue": "<link rel=\"stylesheet\" href=\"/css/light.css\">"}
  ]
}
```

--------------------------------

### Button Story with Args

Source: https://story.to.design/docs/stories

This example demonstrates how to define argTypes and default args for a Button component story. It sets up controls for 'disabled' and 'type', and provides default values for 'children', 'disabled', and 'type'.

```javascript
import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const ForFigma = {
  argTypes: {
    disabled: { control: 'boolean' },
    type: { control: 'select', options: ['primary', 'secondary'] },
  },
  args: {
    // Default values
    children: 'Label',
    disabled: false,
    type: 'primary',
  },
};
```

--------------------------------

### Create Additional Variant for Theme

Source: https://story.to.design/docs/import-defaults

Generate different variants for imported components based on CSS arguments. This example creates 'dark' and 'light' themes by importing different stylesheets.

```json
{
  "defaultImportConfiguration": {
    "initArgs": {},
    "variantProperties": [
      {
        "fromArg": ":css",
        "name": "theme",
        "values": [
          {
            "name": "dark",
            "argValue": "<link rel=\"stylesheet\" href=\"/css/dark.css\">
          },
          {
            "name": "light",
            "argValue": "<link rel=\"stylesheet\" href=\"/css/light.css\">
          }
        ]
      }
    ]
  }
}
```

--------------------------------

### Boolean ArgType Example

Source: https://story.to.design/docs/args

Example of defining a boolean argType for a component's argument. This enables a boolean control in Storybook.

```javascript
argTypes: {
  active: { control: 'boolean' }
}
```

--------------------------------

### Enum ArgType Example with Multi-Select Control

Source: https://story.to.design/docs/args

Example of defining an enum argType with a 'multi-select' control. This allows multiple options to be selected for the argument.

```javascript
argTypes: { variant: { control: 'multi-select', options: ['primary', 'secondary'] }}
```

--------------------------------

### Enum ArgType Example with Check Control

Source: https://story.to.design/docs/args

Example of defining an enum argType with a 'check' control. This displays checkboxes for the argument's options.

```javascript
argTypes: { variant: { control: 'check', options: ['primary', 'secondary'] }}
```

--------------------------------

### Create CSS Theme Variants with :css (Inline Styles)

Source: https://story.to.design/docs/special-args

The :css argument enables the creation of variants based on CSS themes. This example demonstrates creating 'red' and 'blue' themes by injecting inline style tags to force CSS color.

```json
{
  "fromArg": ":css",
  "name": "css-theme",
  "values": [
    {"name": "red", "argValue": "<style>* { color: red }</style>"},
    {"name": "blue", "argValue": "<style>* { color: blue }</style>"}
  ]
}
```

--------------------------------

### Enum ArgType Example with Radio Control

Source: https://story.to.design/docs/args

Example of defining an enum argType with a 'radio' control. This displays radio buttons for the argument's options.

```javascript
argTypes: { variant: { control: 'radio', options: ['primary', 'secondary'] }}
```

--------------------------------

### S2dComplexVariant Example

Source: https://story.to.design/docs/variant-properties-api

Defines Figma variant properties by constructing each variant from a specific set of arguments. Ideal for complex configurations and pseudo-args.

```json
{
  "name"    : "VariantPropName",   // Variant property name in Figma (Mandatory)
  "values"  : [
      {
         "name": "VariantPropValue1",            // Value in Figma's variant property
         "withArgs": { "key": value, ... },      // Args (& pseudo args) to use when generating this variant
         "excludedArgs": { "key": value, ... }  // [Optional] Combinations to exclude
      },
      ...
  ],
  "axis"    :  "x" or "y" or "split"         // On which axis to display this variant in the matrix
}
```

```json
"variantProperties": [
  {
    "name": "Progress",
    "values": [
      { "name": "0%", "withArgs": { "value": 0, "min": 0, "max": 100 } },
      { "name": "25%", "withArgs": { "value": 25, "min": 0, "max": 100 } },
      { "name": "50%", "withArgs": { "value": 50, "min": 0, "max": 100 } },
      { "name": "75%", "withArgs": { "value": 75, "min": 0, "max": 100 } },
      { "name": "100%", "withArgs": { "value": 100, "min": 0, "max": 100 } }
    ]
  },
  {
    "name": "Size",
    "values": [
      { "name": "Small", "withArgs": { "size": "s" } },
      { "name": "Medium", "withArgs": { "size": "m" } },
      { "name": "Large", "withArgs": { "size": "l" } }
    ]
  }
],
```

--------------------------------

### Enum ArgType Example with Inline Radio Control

Source: https://story.to.design/docs/args

Example of defining an enum argType with an 'inline-radio' control. This displays inline radio buttons for the argument's options.

```javascript
argTypes: { variant: { control: 'inline-radio', options: ['primary', 'secondary'] }}
```

--------------------------------

### Enum ArgType Example with Inline Check Control

Source: https://story.to.design/docs/args

Example of defining an enum argType with an 'inline-check' control. This displays inline checkboxes for the argument's options.

```javascript
argTypes: { variant: { control: 'inline-check', options: ['primary', 'secondary'] }}
```

--------------------------------

### S2dArgVariant Example

Source: https://story.to.design/docs/variant-properties-api

Maps story args to Figma variant properties, allowing custom names and values. Useful for transforming arg values or renaming properties.

```json
{
  "fromArg" : "ArgName",           // Story arg name to create variants from
  "name"    : "VariantPropName",   // Variant property name in Figma (Optional - defaults to arg name)
  "values"  : [                    // Array of variant values mapped from arg values (Optional - defaults to arg values)
      {
         "name": "VariantPropValue1",   // Value in Figma's variant property
         "argValue": "ArgValue",        // Value in select arg (fromArg)
         "excludedArgs": {},            // Optional - Combinations to exclude
      },
      ...
  ],
  "axis"    :  "x" or "y" or "split"    // On which axis to display this variant in the matrix
}
```

```json
"variantProperties": [
  {
    "fromArg": "size",
    "name": "Size",
    "values": [
      { "name": "Small", "argValue": "s" },
      { "name": "Medium", "argValue": "m" },
      { "name": "Large", "argValue": "l" }
    ]
  },
  {
    "fromArg": "disable",
    "name": "State",
    "values": [
      { "name": "ON", "argValue": false },
      { "name": "OFF", "argValue": true }
    ]
  }
],
```

--------------------------------

### Configure Viewports with Width and Height

Source: https://story.to.design/docs/import-defaults

Define viewport breakpoints with both width and height for more precise simulation. This allows for accurate representation of different screen dimensions.

```json
{
  "defaultImportConfiguration": {
    "initArgs": {}
  },
  "styleMapping": {},
  "viewports": {
    "desktop": {
      "width": 1920,
      "height": 1080
    },
    "mobile": {
      "width": 390,
      "height": 800
    }
  }
}
```

--------------------------------

### Connect to Storybook URL

Source: https://story.to.design/docs/import-your-first-component

Enter the URL of your Storybook or Histoire library to connect it with the plugin.

```text
https://phorkit.phork.org/
```

--------------------------------

### Define Args for All Stories

Source: https://story.to.design/docs/args

Define default args and argTypes for all stories of a component. This sets up global controls for component properties.

```javascript
// Button.stories.js|jsx

import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
  //👇 Creates specific argTypes
  argTypes: {
    disabled: { control: 'boolean' },
    variant: { control: 'select', options: ['primary', 'secondary'] },
  },
  args: {
    //👇 Default values
    disabled: false,
    variant: 'primary',
  },
};

```

--------------------------------

### Configure Split Axis for Icon Variants

Source: https://story.to.design/docs/axis

Use `axis="split"` to group individual components, such as splitting icons into multiple components for instance swaps. Includes a neutral-500 color initialization argument.

```json
{
  "initArgs": {
    "color": "neutral-500"
  },
  "variantProperties": [
    {
      "fromArg": "name",
      "axis": "split"
    }
  ]
}
```

--------------------------------

### Define Args for a Single Story

Source: https://story.to.design/docs/args

Define default args and argTypes for a specific story, such as a 'Playground' story. This allows for isolated configuration of component properties for a particular use case.

```javascript
import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const Playground = {
  //👇 Creates specific argTypes
  argTypes: {
    disabled: { control: 'boolean' },
    variant: { control: 'select', options: ['primary', 'secondary'] },
  },
  //👇 Default values
  args: {
    disabled: false,
    variant: 'primary',
  },
};

```

--------------------------------

### Chromatic Storybook URL Format

Source: https://story.to.design/docs/connect-your-storybook

Use this format to connect your Storybook hosted on Chromatic. Replace `<BRANCH>` with your branch name (e.g., `master`) and `<PROJECTID>` with your Chromatic project ID.

```text
https://<BRANCH>--<PROJECTID>.chromatic.com
```

--------------------------------

### Configure Viewports with Width Only

Source: https://story.to.design/docs/import-defaults

Define viewport breakpoints using only their width in pixels. This is useful for setting up common device sizes.

```json
{
  "defaultImportConfiguration": {
    "initArgs": {}
  },
  "styleMapping": {},
  "viewports": {
    "desktop": 1440,
    "mobile": 390
  }
}
```

--------------------------------

### Configure Element Selection with :selector

Source: https://story.to.design/docs/special-args

Use the :selector argument to specify a CSS query selector for the root element story.to.design should import components from, overriding the default 'root' or 'storybook-root' IDs. This is useful for modals or when components are wrapped in other elements.

```json
{
  "initArgs": {
    ":selector": ".my-provider-class :first-child"
  }
  ...
}
```

--------------------------------

### Configure Styles Mapping for Tokens

Source: https://story.to.design/docs/import-defaults

Map and filter CSS variables to local styles in Figma. This snippet shows how to set prefixes, ignore specific tokens, and replace token names.

```json
{
  "defaultImportConfiguration": {
    "initArgs": {}
  },
  "styleMapping": {
    "prefix": "myprefix", // <= Choose the prefix to for all your local styles from tokens
    "ignores": [
      // <= Filter tokens configuration
      "--color-txt", // <= ignores tokens starting with
      {
        "regex": "--color-internals-.*" // <= ignores tokens with this regexp
      }
    ],
    "colors": {
      // <= This is the specific configuration for paint styles
      "replaces": [
        // <= replace tokens' names configuration
        {
          "regex": "color-palette", // <= replace from regexp
          "replace": "basics" // <= replace to
        },
        "color-" // <=  replace all matching substring with empty
      ]
    }
  }
}
```

--------------------------------

### Default Variant Layout Configuration

Source: https://story.to.design/docs/axis

This is the default configuration where variants are laid out vertically. No specific axis is defined.

```json
{
  "initArgs": {},
  "variantProperties": [
    "disabled",
    "kind",
    "variant"
  ]
}
```

--------------------------------

### Set Component Type to 'components'

Source: https://story.to.design/docs/setup-variants-advanced

Use this to specify that generated components will be combined as variants. This is an alternative to the default 'component-set'.

```json
{
  "type": "components",
  ...
}
```

--------------------------------

### Configure Horizontal Axis for Variants

Source: https://story.to.design/docs/axis

Use `axis="x"` to lay out variants horizontally. This is useful for adjusting the default vertical layout.

```json
{
  "initArgs": {},
  "variantProperties": [
    "disabled",
    "kind",
    {
      "fromArg": "variant",
      "axis": "x"
    }
  ]
}
```

--------------------------------

### Define Default Arguments for Variants

Source: https://story.to.design/docs/setup-variants-advanced

Set default key/value pairs for all variants. These are fixed values and do not define Figma variant properties.

```json
{
  "initArgs": { "size": "medium", "min": 0, "max": 100 },
  ...
}
```

--------------------------------

### Simulate State on Specific Elements with :actionSelector

Source: https://story.to.design/docs/special-args

The :actionSelector argument allows you to define a CSS query selector for the specific element on which simulated states (like interactions) should be applied. This is particularly useful for component groups like button groups.

```json
{
  "initArgs": {
    ":actionSelector": ".button-group-class :nth-child(3)"
  }
  ...
}
```

--------------------------------

### Import Stories with Custom Selector

Source: https://story.to.design/docs/import-defaults

Apply a custom CSS selector to all imported stories. This is useful for targeting specific elements within your application's structure.

```json
{
  "defaultImportConfiguration": {
    "initArgs": {
      ":selector": ".my-provider-class :first-child"
    }
  }
}
```

--------------------------------

### Define Variant Properties and Values

Source: https://story.to.design/docs/setup-variants-advanced

Specify Figma variant properties and their possible values. The tool will generate all combinations based on this configuration.

```json
{
  ...
  "variantProperties": [
    {
      "name": "Progress",
      "values": [
        { "name": "0%", "withArgs": { "value": 0, "min": 0, "max": 100 } },
        { "name": "25%", "withArgs": { "value": 25, "min": 0, "max": 100 } },
        { "name": "50%", "withArgs": { "value": 50, "min": 0, "max": 100 } },
        { "name": "75%", "withArgs": { "value": 75, "min": 0, "max": 100 } },
        { "name": "100%", "withArgs": { "value": 100, "min": 0, "max": 100 } }
      ]
    },
    {
      "name": "Size",
      "values": [
        { "name": "Small", "withArgs": { "size": "s" } },
        { "name": "Medium", "withArgs": { "size": "m" } },
        { "name": "Large", "withArgs": { "size": "l" } }
      ]
    }
  ]
}
```

--------------------------------

### Configure Vertical Axis for Variants

Source: https://story.to.design/docs/axis

Use `axis="y"` to explicitly define the vertical axis for variants. This maintains the default vertical layout.

```json
{
  "initArgs": {},
  "variantProperties": [
    "disabled",
    "kind",
    {
      "fromArg": "variant",
      "axis": "y"
    }
  ]
}
```

--------------------------------

### String Variant Properties Mapping

Source: https://story.to.design/docs/variant-properties-api

Use string type for direct mapping of story args to Figma variant properties without name or value changes. Values are sourced from story argTypes.

```json
"variantProperties": [
  "size",
  "disabled"
],
```

--------------------------------

### Specify DOM Hierarchy for Portals with :portalSelector

Source: https://story.to.design/docs/special-args

Use the :portalSelector argument to indicate a CSS query selector for a DOM element that exists outside the Storybook root. This is essential when dealing with elements rendered via React Portals or Vue Teleport, such as modals or tooltips.

```json
{
  "initArgs": {
    ":portalSelector": ".MyPortalRootClass"
  }
  ...
}
```

--------------------------------

### Define Figma Variants in Storybook Story

Source: https://story.to.design/docs/extend-stories

Add the `s2d` parameter to your story object to define Figma variant properties. This allows the story.to.design plugin to automatically detect and load these variants in Figma.

```javascript
export const Playground: StoryObj<ButtonProps> = {
  ...
  parameters: {
    s2d: {
      variantProperties: [ /* Figma variant properties definition here */ ],
    },
  },
};
```
Tokens:
Raw