https://github.com/pocka/figspec
Unofficial Figma spec viewer: Live Embed Kit - Live + Guides + Inspector
https://github.com/pocka/figspec
figma webcomponents
Last synced: about 1 year ago
JSON representation
Unofficial Figma spec viewer: Live Embed Kit - Live + Guides + Inspector
- Host: GitHub
- URL: https://github.com/pocka/figspec
- Owner: pocka
- License: mit
- Created: 2020-10-13T05:13:41.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-02-27T08:16:13.000Z (over 2 years ago)
- Last Synced: 2024-05-18T08:43:56.877Z (about 2 years ago)
- Topics: figma, webcomponents
- Language: TypeScript
- Homepage: https://pocka.github.io/figspec/
- Size: 2.94 MB
- Stars: 45
- Watchers: 2
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @figspec/components
[](https://www.npmjs.com/package/@figspec/components)
[![docs HTML (with demo)]()
](https://pocka.github.io/figspec/)
`@figspec/components` is a set of CustomElements that renders Figma file/frame and displays Figma's editor-like inspector for a selected node.
The components are designed to work on Figma REST API result.
This library does not provided a functionality to invoke Figma REST API endpoints.
## Installation
```sh
$ npm i @figspec/components
```
This library does not provide bundled script. Please use CDN or bundle on your own.
## Usage
Import the entry script (`import '@figspec/components'`) and it'll register our custom elements.
Then you can now use these on your page.
```html
```
```js
// your script.js
import "@figspec/components";
const figmaFrame = document.getElementById("figma_frame")
figmaFrame.apiResponse = /* ... */;
figmaFrame.renderedImage = /* ... */;
```
To display an entire Figma File, use `` instead.
```html
```
```js
// your script.js
import "@figspec/components";
const figmaFile = document.getElementById("figma_file")
figmaFrame.apiResponse = /* ... */;
figmaFrame.renderedImages = /* ... */;
```
To see working examples and API docs, please check out [the docs site](https://pocka.github.io/figspec/).
## Browser supports
This library works on browser implementing WebComponents v1 spec and ES2019.
The bundled files are at `esm/es2019`.
## Related packages
- [`@figspec/react`](https://github.com/pocka/figspec-react) ... React bindings for this package.