figma-view
v0.0.0
Published
React figma renderer component
Downloads
318
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
import React from "react"
import FigmaView from "figma-view"
// with url
export default funtion (){
return <FigmaView url="https://figma.com/files/xxx?node-id=xxx" fallback={<>Loading..</>} cached/>
}
// with data json
export default funtion (){
return <FigmaView data={frameNode} fallback={<>Loading..</>} fromapi/>
}
Data from plugin api
<FigmaView data={frameNode} fallback={<>Loading..</>} fromplugin/>
Data from rest api
<FigmaView data={frameNode} fallback={<>Loading..</>} fromapi/>
// or.. by default the from api is set to true.
<FigmaView data={frameNode} fallback={<>Loading..</>}/>
Using Nodes
import { Frame, Text, Autolayout } from "figma-view"
export function FigmaDesignMock(){
return (
<Frame>
<Autolayout>
<Text>
This is a view made with figma-view
</Text>
</Autolayout>
</Frame>
)
}
Authentication
import FigmaView, { FigmaAuthenticationProvider } from "figma-view"
const _figma_personal_access_token = process.env.FIGMA_PERSONAL_ACCESSTOKEN;
export default function (){
return (
<FigmaAuthenticationProvider personalAccessToken={_figma_personal_access_token}>
<FigmaView url="https://figma.com/files/xxxx?node-id=xxx"/>
</FigmaAuthenticationProvider>
);
}
// 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 (
<FigmaAuthenticationProvider accessToken={accesstoken}>
<FigmaView url="https://figma.com/files/xxxx?node-id=xxx"/>
</FigmaAuthenticationProvider>
);
}