Product Lifecycle

SketchSystems.spec

Product Lifecycle
  initializing*
    INITIALIZED -> initialized
    ERROR -> error
  initialized&
    list
      listEmpty*
      listSome
      listFull
      SELECT -> selecting
    selecting
      selectingIdle*
      selectingClean
        DIRTY -> selectingDirty
      selectingDirty
        CLEAN -> selectingClean
        SAVE -> selectingSaving
      selectingSaving
        COMPLETE -> selectingComplete
        ERROR -> selectingError
      selectingError
        RESET -> selectingClean
      selectingComplete
        RESET -> selectingClean
  error

SketchSystems_prototype.js

// Attach Figma frames (artboards) to states
// IDs can be found under "Share > Public Embed" in Figma 

// ** Edit this: Figma File ID
const figmaFile = "Hh2G6ft4MW4M2hKA9jLjaf";


// ** Edit this: List state names and matching Figma frame/artboard IDs
const figmaNodes = {
    initializing: "", 
    listEmpty: "490-3176",
    listSome: "490-2996",
    selectingClean: "490-2858",
    error: "524-4034",
  };

const figmaURL = "https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/file/" + figmaFile + "/Sample-File?node-id=";

function render(model){
  const currentStateName = model.active_states;
  console.log(model.active_states);
  for (f in figmaNodes) 
    for (s of model.active_states)
      if (s.name === f)
        return $("iframe",{src: figmaURL + figmaNodes[f], width: '100%', height: '100%'});
}