Khachatour

Figma Plugin Development Live Reload

1. Create a run-plugin.sh somewhere in your project
2. Copy the code from the run-plugin.sh file in this gist
3. Install nodemon with yarn add --dev nodemon
4. 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"

Khachatour

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.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

Khachatour

/*  Sometimes it's pretty easy to run ito troubles with React ES6 components.
    Consider the following code: */

class EventStub extends Component {
  componentDidMount() {
    window.addEventListener('resize', this.onResize.bind(this)); //notice .bind
  }
  
  componentWillUnmount() {
    window.removeEventListener('resize', this.onResize.bind(this));