Embedding Figma frames

SketchSystems.spec

Embedding Figma frames
  Shop
    click Tickets -> Tickets
  Tickets
    click Shop -> Shop
  

SketchSystems_prototype.js

// Attach Figma frames (artboards) to states
// IDs can be found under "Share > Public Embed" in Figma or using this plugin https://github.com/johnkazer/Export-Figma-layer-IDs

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

// ** Edit this list of IDs or paste from the plugin
const nodes = [
  {
    "name": "Membership",
    "id": "0:2"
  },
  {
    "name": "Frame 3",
    "id": "0:3"
  },
  {
    "name": "Status Bar",
    "id": "0:10"
  },
  {
    "name": "Frame 6",
    "id": "0:11"
  },
  {
    "name": "Frame 8",
    "id": "0:27"
  },
  {
    "name": "Navigation Bar",
    "id": "0:37"
  },
  {
    "name": "Image Thumbnail",
    "id": "0:46"
  },
  {
    "name": "Button",
    "id": "0:49"
  },
  {
    "name": "Tickets",
    "id": "0:53"
  },
  {
    "name": "Content",
    "id": "0:54"
  },
  {
    "name": "Date",
    "id": "0:77"
  },
  {
    "name": "Frame 4",
    "id": "0:85"
  },
  {
    "name": "Navigation Bar",
    "id": "0:89"
  },
  {
    "name": "Status Bar",
    "id": "0:98"
  },
  {
    "name": "Frame 6",
    "id": "0:99"
  },
  {
    "name": "Frame 8",
    "id": "0:115"
  },
  {
    "name": "Button",
    "id": "0:125"
  },
  {
    "name": "Collections",
    "id": "0:129"
  },
  {
    "name": "Content",
    "id": "0:130"
  },
  {
    "name": "Table Data",
    "id": "0:131"
  },
  {
    "name": "Search Bar",
    "id": "0:156"
  },
  {
    "name": "Navigation Bar",
    "id": "0:161"
  },
  {
    "name": "Status Bar",
    "id": "0:170"
  },
  {
    "name": "Frame 6",
    "id": "0:171"
  },
  {
    "name": "Frame 8",
    "id": "0:187"
  },
  {
    "name": "Shop",
    "id": "0:197"
  },
  {
    "name": "Status Bar",
    "id": "0:198"
  },
  {
    "name": "Frame 6",
    "id": "0:199"
  },
  {
    "name": "Frame 8",
    "id": "0:215"
  },
  {
    "name": "Navigation Bar",
    "id": "0:225"
  },
  {
    "name": "Product Image",
    "id": "0:234"
  },
  {
    "name": "Product Navigation",
    "id": "0:236"
  },
  {
    "name": "Button",
    "id": "0:241"
  },
  {
    "name": "Product Price",
    "id": "0:245"
  },
  {
    "name": "Product Description",
    "id": "0:253"
  },
  {
    "name": "Exhibition",
    "id": "0:257"
  },
  {
    "name": "Paragraph",
    "id": "0:258"
  },
  {
    "name": "Image Gallery",
    "id": "0:262"
  },
  {
    "name": "Image Gallery Navigation",
    "id": "0:263"
  },
  {
    "name": "Image Caption",
    "id": "0:280"
  },
  {
    "name": "Exhibition Preview",
    "id": "0:282"
  },
  {
    "name": "Navigation Bar",
    "id": "0:288"
  },
  {
    "name": "Status Bar",
    "id": "0:297"
  },
  {
    "name": "Frame 6",
    "id": "0:298"
  },
  {
    "name": "Frame 8",
    "id": "0:314"
  },
  {
    "name": "Menu",
    "id": "0:324"
  },
  {
    "name": "Cropped Home Page",
    "id": "0:325"
  },
  {
    "name": "Menu Side Bar",
    "id": "0:347"
  },
  {
    "name": "Search Navigation Bar",
    "id": "0:349"
  },
  {
    "name": "Status Bar",
    "id": "0:365"
  },
  {
    "name": "Frame 6",
    "id": "0:366"
  },
  {
    "name": "Frame 8",
    "id": "0:382"
  },
  {
    "name": "Home",
    "id": "0:392"
  },
  {
    "name": "Bottom Status Bar",
    "id": "0:393"
  },
  {
    "name": "Plan Your Visit Button",
    "id": "0:406"
  },
  {
    "name": "Featured Exhibition",
    "id": "0:410"
  },
  {
    "name": "Image Thumbnail",
    "id": "0:416"
  },
  {
    "name": "Navigation Bar",
    "id": "0:418"
  },
  {
    "name": "Status Bar",
    "id": "0:426"
  },
  {
    "name": "Frame 6",
    "id": "0:427"
  },
  {
    "name": "Frame 8",
    "id": "0:443"
  },
  {
    "name": "Log-In Page",
    "id": "0:453"
  },
  {
    "name": "Log-In Button",
    "id": "0:455"
  },
  {
    "name": "Log-In Fields",
    "id": "0:460"
  },
  {
    "name": "App Info",
    "id": "0:467"
  },
  {
    "name": "Status Bar",
    "id": "0:470"
  },
  {
    "name": "Frame 6",
    "id": "0:471"
  },
  {
    "name": "Frame 8",
    "id": "0:487"
  },
  {
    "name": "ic_settings_black_24px",
    "id": "0:573"
  }
]

const figmaURL = "https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/file/" + figmaFile + "/Sample-File?node-id=";
const extractId = name => nodes.find(node => node.name === name).id

function render(model){
  const currentStateName = model.active_states[0].name;
  return $("iframe",{src: figmaURL + escape(extractId(currentStateName)), width: '100%', height: '100%'});
}