Skip to content

Instantly share code, notes, and snippets.

@gavinmcfarland
gavinmcfarland / figma.js
Created March 19, 2020 19:08
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
@gavinmcfarland
gavinmcfarland / animateIntoView.js
Created October 28, 2021 14:26
A Figma helper to animate viewport into view
import { Tween, Queue, Easing } from 'tweeno'
function animateIntoView(selection, duration?, easing?) {
// Get current coordiantes
let origCoords = {
...figma.viewport.center,
z: figma.viewport.zoom
}
@gavinmcfarland
gavinmcfarland / readme.md
Last active July 8, 2022 14:29
Sharing data between files in Figma plugins

Sharing data between files in plugins

The following functions allow you to share data between files without the need to use the REST API. While it suffers from some drawbacks (like managing duplicate files), it offers an almost frictionless experience for users.

How it works

When a user opens a file with your plugin the file is added to a list in clientStorage with a unique ID. When the user visits another file all previously visited files are be accessible from the clientStorage. Used in combination with a list which is stored on each file, it's possible to keep a record of remote files your plugin is using for a given file. The data for each file can contain any keys or information you need to access or import data from remote files.

Functions

@gavinmcfarland
gavinmcfarland / .profile
Last active November 27, 2021 02:10
My Local Development Setup
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
@gavinmcfarland
gavinmcfarland / toggleLayerZIndexOrdering.js
Last active April 14, 2021 21:21
Figma helper to toggle layer ordering using 180 hack to match z-index of web
function reverseChildren(children) {
const length = children.length
for (let i = 0; i < length; i++) {
var oppIndex = length - i
children[i].parent.insertChild(oppIndex, children[i])
}
}
function toggleLayerZindexOrdering(node) {
@gavinmcfarland
gavinmcfarland / getLayerNames.js
Last active March 19, 2021 10:11
Get list of layer names in Figma
function getLayerNames() {
var names: any = []
var layers = figma.currentPage.selection
layers.map((layer) => {
names.push(layer.name)
})
return names
}
print(getLayerNames())
@gavinmcfarland
gavinmcfarland / getPageNames.js
Last active March 19, 2021 10:10
Get list of page names in Figma
function getPageNames() {
var names: any = []
var pages = figma.root.findAll((node) => {
if (node.type === "PAGE") {
names.push(node.name)
}
return (node.type === "PAGE")
})
return names
}
@gavinmcfarland
gavinmcfarland / getPageNames.js
Last active March 2, 2021 10:58
A helper to get list of page names in a Figma document
function getPageNames() {
var names: any = []
var pages = figma.root.findAll((node) => {
if (node.type === "PAGE") {
names.push(node.name)
}
return (node.type === "PAGE")
})
return names
}
[
'id',
'parent',
'name',
'removed',
'visible',
'locked',
'children',
'constraints',
'absoluteTransform',
@gavinmcfarland
gavinmcfarland / SketchSystems.spec
Last active May 1, 2020 16:35
Document Process
Document Process
Draft
Submit -> Submitted
Submitted
Ready
Review -> Reviewing
Reviewing
Authorise -> Authorised
Deny -> Draft
Authorised