Orkhan Jafarov gigantz

Figma Plugin Development Live Reload

Create a run-plugin.sh somewhere in your project
Copy the code from the run-plugin.sh file in this gist
Install nodemon with yarn add --dev nodemon
Add a script in the scripts property of your package.json replacing PLUGIN_CODE_FOLDER by the path to the folder where your plugin code lives
```
"scripts": {
```

"livereload": "nodemon --watch PLUGIN_CODE_FOLDER --exec run-plugin.sh"

Docker - How to cleanup (unused) resources

Once in a while, you may need to cleanup resources (containers, volumes, images, networks) ...

delete volumes

// see: https://github.com/chadoe/docker-cleanup-volumes

$ docker volume rm $(docker volume ls -qf dangling=true)

$ docker volume ls -qf dangling=true | xargs -r docker volume rm

Hexadecimal color code for transparency

How to set transparency with hex value ?

For example, you want to set 40% alpha transparence to #000000 (black color), you need to add 66 like this #66000000.

All hex value from 100% to 0% alpha:

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Python VS ES6 syntax comparison

Python syntax here : 2.7 - online REPL

Javascript ES6 via Babel transpilation - online REPL

Imports

import math

	figma.showUI(__html__,{width: 250, height: 250});
	// restore previous size
	figma.clientStorage.getAsync('size').then(size => {
	if(size) figma.ui.resize(size.w,size.h);
	}).catch(err=>{});
	figma.ui.onmessage = msg => {
	switch (msg.type) {
	case "resize":
	figma.ui.resize(msg.size.w,msg.size.h);
	figma.clientStorage.setAsync('size', msg.size).catch(err=>{});// save size

	// "Reminder" for mobile Safari to not enable default user scaling. When
	// testing a PSPDFKit release we noticed that iOS 12.4.1 on _some_ devices
	// (iPhone X) was ignoring the user-scalable part causing it to zoom in
	// whenever a node is focused with a below 16px font-size.
	//
	// We found out that updating the content meta tag's user-scalable part from
	// 0 to no (which is equivalent and also supported on iOS) after a bit would
	// be enough to get the desired behavior.
	setTimeout(function() {
	const viewport = document.querySelector('meta[name="viewport"]');

	import React from 'react'

	/*
	* Higher order component that passes `getInitialProps` through
	* to the child component
	*/
	const HOC = function(Child) {
	return class Higher extends React.Component {
	static getInitialProps(ctx) {
	return Child.getInitialProps(ctx)

	// Add on element with overflow
	-webkit-mask-image: -webkit-radial-gradient(white, black);