Skip to content

Instantly share code, notes, and snippets.

@davo

davo/Figma.tsx

Created Aug 5, 2018
Embed
What would you like to do?
Figma Live Embed for Framer X
/**
* @module FigmaLiveEmbed
* @author Davo Galavotti
* @version 0.1
*
* Based on Youtube code component by Jan Van Boghout
*/
import * as React from 'react'
import { Frame, FramerEvent, Animatable, PropertyControls, ControlType } from 'framer'
interface Props {
url: string
author: string
dribbble: string
}
/** Regular Expression from {@link https://www.figma.com/developers/embed} */
const REGEX = /https:\/\/([w.-]+\.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/
/**
*
* @export
* @class Figma
* @extends {React.Component<Props>}
*/
export class Figma extends React.Component<Props> {
static defaultProps = {
url: 'https://www.figma.com/file/cU16PQei0xJnwqRF1wG8VmUT/Isometric-Frame-Tutorial',
author: 'Dustin Tanner',
dribbble: 'https://dribbble.com/dustanner',
width: 800,
height: 450
}
/**
*
* @static
* @type {PropertyControls<Props>}
* @memberof Figma
*/
static propertyControls: PropertyControls<Props> = {
url: { type: ControlType.String, title: 'URL' },
author: { type: ControlType.String, title: 'Author' },
dribbble: { type: ControlType.String, title: 'Dribbble' }
}
render() {
let identifier = Figma.guessIdentifier(this.props.url) || 'none'
let width = Animatable.getNumber(this.props.width)
let height = Animatable.getNumber(this.props.height)
return (
<div
style={{
width: width,
height: height,
background: 'white'
}}
>
<iframe
width="100%"
height="100%"
scrolling="no"
frameBorder="no"
src={`https://www.figma.com/embed?embed_host=share&url=${identifier}`}
/>
</div>
)
}
/**
*
* @param {string} url
* @returns {(boolean | null)}
*/
private static isFigmaUrl = (url: string): boolean | null => {
return REGEX.test(url)
}
/**
*
* @param {string} incomingUrl
* @returns {(string | null)}
*/
private static guessIdentifier = (incomingUrl: string): string | null => {
if (!incomingUrl) return null
let isValidFigmaUrl = Figma.isFigmaUrl(incomingUrl)
if (isValidFigmaUrl == true) return incomingUrl
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment