Changes
3 changed files (+63/-1)
-
-
@@ -4,10 +4,22 @@ **WIP. Use at your own risk.**An unofficial Figma spec viewer. [Figma Live Embed Kit](https://www.figma.com/developers/embed) - Live update + Guidelines + Inspector. - [ ] WebComponents (`<figspec>`) - [x] WebComponents (`<figspec-*>`) - [ ] Node.js server - [ ] CLI - [ ] Deploy buttons - [ ] Netlify - [ ] Vercel - [ ] Heroku ## Packages | Directory Name | Package Name | Language | Description | | ---------------------------------------------- | --------------------- | ---------- | ------------------------------------------- | | [`packages/components`](./packages/components) | `@figspec/components` | TypeScript | CustomElements having actual preview logic. | | [`packages/react`](./packages/react) | `@figspec/react` | TypeScript | React bindings for ` | ## Usage Currently, we only have front-end components to preview. You need to implement a logic to call Figma API and feed them to the components. For more detail, see each package's README.
-
-
-
@@ -1,5 +1,7 @@# @figspec/components CustomElements renders given Figma API's result into a rich preview. ## Installation ```sh
-
@@ -10,6 +12,41 @@$ npm i @figspec/components ``` ## Usage Import the entry script (`import '@figspec/components'`) and it'll register our custom elements. Then you can now use these on your page. ```js // your script.js import "@figspec/components"; // ... ``` ```html <body> <figspec-viewer nodes="..." rendered-image="..." /> </body> ``` To see examples and API docs, please check out [Storybook](https://figspec.netlify.app/?path=/docs/components-figspec-viewer--defaults). NOTE: We don't provide bundled scripts yet. If you want to put the script in head tag, please build the files at your own. ## TypeScript support This package ships with TypeScript definition file. One of our "typing dependencies" is missing from `package.json#dependencies`, because it's not our "runtime dependency". So, you need to install that package in order to get full types (otherwise some properties turns into `any`). ```sh # By installing this package, FileNode related properties will get correct types. yarn add -D figma-js ``` ## Browser supports Browsers supporting WebComponents v1 spec and ES2015 or later. The bundled codes are emitted under `esm/es2015` and `cjs/es2016`.
-
-
-
@@ -13,3 +13,16 @@ # or$ npm i @figspec/react @figspec/components ``` ## Usage See the docs at `@figspec/components`. This bindings enables you to use the CustomElement's property via React's component props. You don't need to use kebab-case attributes :camel::dash: ```jsx import { FigspecViewer } from "@figspec/react"; <FigspecViewer nodes={nodes} renderedImage={renderedImage} zoomMargin={200} />; ```
-