/figjam-live-code-block

Turn FigJam into a collaborative JavaScript canvas

Primary LanguageTypeScript

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

Coming soon to the Figma Community

Global variables

Every live code block has access to the following variables:

Name Type Description
fetch() function MDN docs
fetchJson() function
Math Planned object MDN docs
Array Planned object MDN docs
Object Planned 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