VueとStorybook用のChromaticプラグインとFigmaアドオンの実装方法
2022年10月25日に投稿され、2022年10月26日に更新されました。
目次
- Chromaticプラグインとは何か
- 使い方と使用例
- Chromaticのセットアップ
- Vueプロジェクトのセットアップ
- StorybookとのFigmaプラグイン統合
- 結論
Chromaticプラグインとは何ですか？
Chromaticプラグインは、Storybookの管理者が開発して、開発チームとデザインチームがStorybookを使ったワークフローを改善するためのサードパーティのソフトウェアパッケージです。ビルドされたコンポーネントを視覚化し、より少ない手作業でテストや反復作業を速く行えるように助けてくれます。
使い方
Chromaticプラグインは、以下の４つの異なるソフトウェアを同期させ、最適な体験を提供します。
- インターネットホスティングサービス（GitHub、GitLab、Bitbucket）
- 好きなフロントエンドフレームワーク（ReactまたはVue）
- Storybook
- Figma
使用例には以下が含まれます：
- コンポーネントの構築
- コンポーネントのテスト
- コンポーネントのレビュー
ローカルリポジトリでChromaticを設定する
まず、VueアプリケーションをStorybookで構築して、Storybook上にストーリーを公開していることを確認してください。
Storybookとのやり取りに関してはこの記事では取り扱わないので、フロントエンドアプリケーションと統合するためのStorybookのドキュメントへのリンクです。具体的なフレームワークのドロップダウンボタンをクリックしてください。
次に、chromatic.comでChromaticアカウントを作成し、プロジェクトを作業しているホスティングサービスのアカウント（GitHub、GitLab、Bitbucket）に接続します。
プロジェクトを接続すると、画面の左上隅にプロジェクト名が表示され、中央のページには実行する2つのコマンドが表示されます。2番目のコマンドには、自動生成されたプロジェクトトークンが含まれています。これをpackage.jsonのスクリプトに追加する必要があります。
両方のスクリプトをpackage.jsonにこのように追加することをお勧めします：
その後、リポジトリのすべてのストーリーをChromaticが認識するようにするために、最初のビルドnpm run chromaticを実行する必要があります。あなたのビルドは次のようにChromaticプロジェクトに表示されます：
各ビルドには、更新されたコンポーネントとコンポーネントライブラリに加えられた変更が表示されます。
おめでとうございます、Chromaticプラグインをアプリケーションに正常に接続しました。
StorybookとのFigmaアドオンの実装
Figmaアドオンは、Storybookでコンポーネントのデザインを表示するのに役立ちます。インストールするにはまず、
npm install storybook-addon-designs
を実行し、その後.storybookフォルダ内のあなたのmain.jsファイルのアドオン配列にアドオンを追加する必要があります。
module.exports = {
stories=["../src/components/**/*.stories.js"],
addons=["storybook-addon-designs"]
}
フォルダ構造は次のようになります：
この操作を行った後、`yarn storybook`を実行すると、デザインタブがアクティブになった状態で、あなたのStorybookは次のように表示されるはずです。
コンポーネントの特定のデザインフレームをそのコンポーネントのストーリーに取り込むには、そのフレームまたはデザインへのリンクをコンポーネントのストーリーの[パラメータ](https://storybook.js.org/docs/react/writing-stories/parameters)に追加する必要があります。
例えば、プライマリーなButtonコンポーネントの場合、`Button.stories.js`ファイルに次のように挿入します。
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Button',
};
Primary.parameters = {
design: {
type: "figma",
url: "https://www.figma.com/file/ahdbchdsiuvgldiuagauidvgu/Project_Name?node-id=253%3eh",
},};
行き詰ったら、各ツールのドキュメントを読んでください。
おめでとうございます、ChromaticプラグインとFigmaアドオンの実装に成功しました。次に面白い何かを書いた時にお会いしましょう！
こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/reallifenero/how-to-implement-chromatic-plugin-x-figma-addon-for-vue-and-storybook-1mf6
