Skip to content

Instantly share code, notes, and snippets.

@gavinmcfarland
Created March 19, 2020 19:08
Show Gist options
  • Save gavinmcfarland/7d8f272097cb6423c6e44f4a7f552e25 to your computer and use it in GitHub Desktop.
Save gavinmcfarland/7d8f272097cb6423c6e44f4a7f552e25 to your computer and use it in GitHub Desktop.
An example of a Figma embed block for Sanity
import React from "react";
const FigmaPreview = ({ value }) => {
const { url } = value;
const host = `gavinmcfarland.co.uk;` // Change to your host/domain
const regex = /https:\/\/([\w\.-]+\.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/
if (regex.test(url)) {
const embedUrl = `https://www.figma.com/embed?embed_host=${host}&url=${url}`;
return (<iframe
height="450"
style={{ width: '100%' }}
src={embedUrl}
allowfullscreen
frameBorder="no"
allowTransparency
/>);
}
else {
return <pre>"Please check the url is correct"</pre>
}
};
export default {
name: "figma",
type: "object",
title: "Figma Embed",
preview: {
select: {
url: "url"
},
component: FigmaPreview
},
fields: [
{
name: "url",
type: "url",
title: "Figma URL"
}
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment