Figma Live Embed for Framer X

Figma.tsx

/**
 *  @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
	}
}