https://github.com/pocka/figspec

Unofficial Figma spec viewer: Live Embed Kit - Live + Guides + Inspector
https://github.com/pocka/figspec

figma webcomponents

Last synced: 3 days 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 4 years ago)
• Default Branch: master
• Last Pushed: 2024-02-27T08:16:13.000Z (11 months ago)
• Last Synced: 2024-05-18T08:43:56.877Z (8 months 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

[![npm version](https://img.shields.io/npm/v/%40figspec/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.