Skip to content

Commit

Permalink
Merge pull request #2 from JReinhold/panel-right-guide
Browse files Browse the repository at this point in the history
Describe how to move Figma panel to the right side
  • Loading branch information
hharnisc authored Oct 23, 2017
2 parents 2d9c8f6 + 517cf8c commit 0f07e61
Showing 1 changed file with 36 additions and 0 deletions.
36 changes: 36 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,3 +80,39 @@ storiesOf('App')
<App />
))
```

## Show Figma design in right panel

If you find that the Figma panel at the bottom is not big enough to fit your designs, it is possible to move the panel to the right of the window instead, where it is possible to give it more space. This requires the [@storybook/addons-options](https://github.com/storybooks/storybook/tree/master/addons/options) addon. Note however that it is only possible to do this for **all** stories at once, and will move all addon panels to the right. A simple setup is shown here.

Install the addon

```sh
npm install --save-dev @storybook/addon-options
```

Register the options addon in your `addons.js`

```jsx
// in .storybook/addons.js
import '@storybook/addon-actions/register'
import 'storybook-addon-figma/register'
// register the options addon
import '@storybook/addon-options/register';
```

Import and use the `setOptions` function in your `config.js` file

```jsx
// in .storybook/config.js
import * as storybook from '@storybook/react';
// import the options function
import { setOptions } from '@storybook/addon-options';

// set option to show panel in right side
setOptions({
downPanelInRight: true,
});

storybook.configure(() => require('./stories'), module);
```

0 comments on commit 0f07e61

Please sign in to comment.