Skip to content

colebemis/figjam-live-code-block

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

82 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

FigJam Live Code Block Widget

Turn FigJam into a collaborative JavaScript canvas

demo

Could be used for:

  • Exploring APIs
  • Teaching
  • Debugging
  • Pair programming
  • Code review
  • Technical interviews
  • ???

Found a creative use for this widget? Tell me about it on Twitter (@colebemis)

Installation

https://www.figma.com/community/widget/1034005547769330556

Global variables

Every live code block has access to the following variables:

Name Type Description
fetch() function MDN docs
fetchJson() function A convenient wrapper around fetch() specifically for fetching JSON data
Math object MDN docs
Array object MDN docs
Object object MDN docs

Local development

  1. Clone the repository

    git clone https://github.com/colebemis/figjam-javascript-repl.git
    cd figjam-javascript-repl
  2. Install the dependencies

    yarn
  3. Run local development scripts

    yarn start
  4. Open the Figma desktop app

  5. Inside a FigJam file, go to Menu > Widgets > Development > Import widget from manifest...

  6. Select /path/to/figjam-javascript-repl/manifest.json

  7. Add the widget to the canvas by selecting Menu > Widgets > Developement > JavaScript REPL or search for JavaScript REPL in the quick actions bar (⌘ /)

Prior art