Figma版とStorybookを連携するための方針

Hidetaro7 commented 1 year ago

Issueにする価値があるかがわからないので、話し合って不要ならクローズする。

目的

ソースコードでも公開されていることが理解されることによってすぐ使ってみたいと思われることへの期待が持てる。

手段

連携機能を使う https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma

課題

情報の整理

Figma上のページ、セクションに対してどのように配置するのか情報設計を見直す必要があるかもしれない。例えば、

principle
token
components
usage and gallery のようなセクションに分けて整理する必要があるのかなど、決めが必要な気がする。

Figma バリアントは現在妥当な設定になっているか

なっていない気もする。Buttonsを例にとっても、

バリアント

variants
class
interactions

ブール値

icon-left
icon-right

TextContent

text

ただ、TailwindCSSのユーティリティクラスを付与して見た目が変わることをFigmaのバリアントとしても同等に扱うには無理があるように思える。

knokmki612 commented 1 year ago

https://storybook.js.org/addons/storybook-addon-designs を試しました

差分

```diff diff --git a/packages/tailwindcss/.storybook/main.js b/packages/tailwindcss/.storybook/main.js index e8ef680..22ac0e5 100644 --- a/packages/tailwindcss/.storybook/main.js +++ b/packages/tailwindcss/.storybook/main.js @@ -12,6 +12,7 @@ module.exports = { }, }, }, + "@storybook/addon-designs", ], framework: { name: "@storybook/html-vite", diff --git a/packages/tailwindcss/package.json b/packages/tailwindcss/package.json index e0698e0..dfa2b3d 100644 --- a/packages/tailwindcss/package.json +++ b/packages/tailwindcss/package.json @@ -28,6 +28,7 @@ "@babel/core": "7.22.8", "@storybook/addon-a11y": "7.0.26", "@storybook/addon-actions": "7.0.26", + "@storybook/addon-designs": "^7.0.0", "@storybook/addon-essentials": "7.0.26", "@storybook/addon-links": "7.0.26", "@storybook/addon-styling": "2.0.0", diff --git a/packages/tailwindcss/stories/Button.stories.mdx b/packages/tailwindcss/stories/Button.stories.mdx index ea6814a..84055ad 100644 --- a/packages/tailwindcss/stories/Button.stories.mdx +++ b/packages/tailwindcss/stories/Button.stories.mdx @@ -6,7 +6,7 @@ import html from "./html"; # Button

diff --git a/yarn.lock b/yarn.lock index b776868..e71ec86 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1786,6 +1786,21 @@ resolved "https://registry.yarnpkg.com/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz#c05ed35ad82df8e6ac616c68b92c2282bd083ba4" integrity sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ== +"@figspec/components@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@figspec/components/-/components-1.0.1.tgz#47d7e24999974b18c6daa810299624d4370fc7da" + integrity sha512-UvnEamPEAMh9HExViqpobWmX25g1+soA9kcJu+It3VerMa7CeVyaIbQydNf1Gys5v/rxJVdTDRgQ7OXW2zAAig== + dependencies: + lit "^2.1.3" + +"@figspec/react@^1.0.0": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@figspec/react/-/react-1.0.3.tgz#10529605ec57af305e1ee63afb9f0faf0898131d" + integrity sha512-r683qOko+5CbT48Ox280fMx2MNAtaFPgCNJvldOqN3YtmAzlcTT+YSxd3OahA+kjXGGrnzDbUgeTOX1cPLII+g== + dependencies: + "@figspec/components" "^1.0.1" + "@lit-labs/react" "^1.0.2" + "@humanwhocodes/config-array@^0.11.10": version "0.11.10" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2" @@ -2090,6 +2105,23 @@ uuid "^9.0.0" write-json-file "^5.0.0" +"@lit-labs/react@^1.0.2": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@lit-labs/react/-/react-1.2.1.tgz#5b421502cdf68a3639dec431318eeed2285f1c0e" + integrity sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A== + +"@lit-labs/ssr-dom-shim@^1.0.0", "@lit-labs/ssr-dom-shim@^1.1.0": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz#64df34e2f12e68e78ac57e571d25ec07fa460ca9" + integrity sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ== + +"@lit/reactive-element@^1.3.0", "@lit/reactive-element@^1.6.0": + version "1.6.2" + resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.6.2.tgz#c256690f82f2d7d0ffb0b1cdf68dcb1ec86cea28" + integrity sha512-rDfl+QnCYjuIGf5xI2sVJWdYIi56CTCwWa+nidKYX6oIuBYwUbT/vX4qbUDlHiZKJ/3FRNQ/tWJui44p6/stSA== + dependencies: + "@lit-labs/ssr-dom-shim" "^1.0.0" + "@mdx-js/react@^2.1.5": version "2.3.0" resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-2.3.0.tgz#4208bd6d70f0d0831def28ef28c26149b03180b3" @@ -2481,6 +2513,13 @@ lodash "^4.17.21" ts-dedent "^2.0.0" +"@storybook/addon-designs@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@storybook/addon-designs/-/addon-designs-7.0.0.tgz#8af85ad229c1b487dbe6cabb86ba264079419789" + integrity sha512-XSkW9Ylz62bpRSOpvN/C2W5gtb3I6wY77hyH3i0iOhYUsLo+Lv734aY4a31dIZbxzIs6OWN+C/htsL4Kc2hZsA== + dependencies: + "@figspec/react" "^1.0.0" + "@storybook/addon-docs@7.0.26": version "7.0.26" resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-7.0.26.tgz#f67389ed4f20bd51697337c93ef4ae67f0c99636" @@ -3525,6 +3564,11 @@ "@types/mime" "*" "@types/node" "*" +"@types/trusted-types@^2.0.2": + version "2.0.3" + resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.3.tgz#a136f83b0758698df454e328759dbd3d44555311" + integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g== + "@types/unist@^2.0.0": version "2.0.6" resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d" @@ -7082,6 +7126,31 @@ lines-and-columns@^1.1.6: resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== +lit-element@^3.3.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.3.2.tgz#9913bf220b85065f0e5f1bb8878cc44f36b50cfa" + integrity sha512-xXAeVWKGr4/njq0rGC9dethMnYCq5hpKYrgQZYTzawt9YQhMiXfD+T1RgrdY3NamOxwq2aXlb0vOI6e29CKgVQ== + dependencies: + "@lit-labs/ssr-dom-shim" "^1.1.0" + "@lit/reactive-element" "^1.3.0" + lit-html "^2.7.0" + +lit-html@^2.7.0: + version "2.7.5" + resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.7.5.tgz#0c1b9d381abe20c01475ae53ea4b07bf4c923eb8" + integrity sha512-YqUzpisJodwKIlbMFCtyrp58oLloKGnnPLMJ1t23cbfIJjg/H9pvLWK4XS69YeubK5HUs1UE4ys9w5dP1zg6IA== + dependencies: + "@types/trusted-types" "^2.0.2" + +lit@^2.1.3: + version "2.7.6" + resolved "https://registry.yarnpkg.com/lit/-/lit-2.7.6.tgz#810007b876ed43e0c70124de91831921598b1665" + integrity sha512-1amFHA7t4VaaDe+vdQejSVBklwtH9svGoG6/dZi9JhxtJBBlqY5D1RV7iLUYY0trCqQc4NfhYYZilZiVHt7Hxg== + dependencies: + "@lit/reactive-element" "^1.6.0" + lit-element "^3.3.0" + lit-html "^2.7.0" + load-json-file@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b" ```

コミュニティ公開しているFigmaファイルのURLではなく、FigmaファイルをURLに指定する必要がある（閲覧権限を持っていないユーザーは引き続きStorybookから閲覧不可）

Hidetaro7 commented 1 year ago

ありがとうございます、この後のどういう方針で対応するかはペアワークなどで話して決めていこうと思います。 @knokmki612

Hidetaro7 commented 1 year ago

他のデザインシステムを参考にすることにした。

tuqulore / jumpu-ui