https://github.com/gridaco/figma-view
React figma renderer component
https://github.com/gridaco/figma-view
Last synced: 9 months ago
JSON representation
React figma renderer component
- Host: GitHub
- URL: https://github.com/gridaco/figma-view
- Owner: gridaco
- License: mit
- Created: 2022-07-21T08:09:57.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-07-30T15:10:18.000Z (almost 3 years ago)
- Last Synced: 2024-05-23T00:01:13.118Z (about 2 years ago)
- Language: TypeScript
- Homepage: https://grida.co/figma-view
- Size: 60.5 KB
- Stars: 11
- Watchers: 1
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# figma-view
React figma renderer component
```
yarn add figma-view
```
## Backends
**html-backend**
draws figma document using standard html elements
**canvas-backend**
draws figma document on html5 canvas
**iframe-backend**
A simlpe figma embeding wrapper
## Usage
Basic usage
```tsx
import React from "react"
import FigmaView from "figma-view"
// with url
export default funtion (){
return Loading..>} cached/>
}
// with data json
export default funtion (){
return Loading..>} fromapi/>
}
```
Data from plugin api
```tsx
Loading..>} fromplugin/>
```
Data from rest api
```tsx
Loading..>} fromapi/>
// or.. by default the from api is set to true.
Loading..>}/>
```
Using Nodes
```tsx
import { Frame, Text, Autolayout } from "figma-view"
export function FigmaDesignMock(){
return (
This is a view made with figma-view
)
}
```
## Authentication
```tsx
import FigmaView, { FigmaAuthenticationProvider } from "figma-view"
const _figma_personal_access_token = process.env.FIGMA_PERSONAL_ACCESSTOKEN;
export default function (){
return (
);
}
// or with access token (not personal access token)
// issue of access token is not done by this package. you can use `@design-sdk/figma-oauth` for that.
export default function (){
return (
);
}
```
### Custom document provider (Proxy server)
You can host up your own proxy server for your needs with [figma-file-proxy-server](https://github.com/gridaco/figma-file-proxy-server)
### References
- [design-sdk](https://github.com/gridaco/design-sdk)