mospecs.ts

//https://thomas-lowry.github.io/figma-plugin-ds/#onboarding

figma.showUI(__html__)

var specFrame
var rowHeight = 51
figma.ui.resize(300,480)
var hexToRgbColor


figma.ui.onmessage = msg => {
  if (msg.type === 'create-rectangles') {

    specFrame = figma.createFrame()

     // draw and add ruler inside specFrame
     let scale =  drawScale(1000)
     scale.y = scale.y - scale.height
     specFrame.appendChild(scale)
 

    const tmpJSON = '{"firstKeyTime":0,"lastKeyTime":0.41666666666667,"layers":[{"name":"Button Dark Overlay","index":2,"props":[{"threeDLayer":false,"propertyValueType":6417,"name":"Opacity","dur":0.08333333333333,"startTime":0.33333333333333,"startValue":100,"startTemporalEase":{"influence":16.666666667,"speed":-1200},"startEaseType":6612,"endTime":0.41666666666667,"endValue":0,"endTemporalEase":{"influence":16.666666667,"speed":-1200},"endEaseType":6612,"duration":0.08333333333333}]},{"name":"Button Dark Overlay","index":3,"props":[{"threeDLayer":false,"propertyValueType":6417,"name":"Opacity","dur":0.03333333333333,"startTime":0.05,"startValue":0,"startTemporalEase":{"influence":16.666666667,"speed":3000},"startEaseType":6612,"endTime":0.08333333333333,"endValue":100,"endTemporalEase":{"influence":16.666666667,"speed":3000},"endEaseType":6612,"duration":0.03333333333333}]},{"name":"ButtonText Transforms","index":7,"props":[{"threeDLayer":false,"propertyValueType":6414,"name":"Scale","dur":0.03333333333333,"startTime":0,"startValue":[100,100,100],"startTemporalEase":{"influence":16.666666667,"speed":-150},"startEaseType":6612,"endTime":0.03333333333333,"endValue":[95,95,100],"endTemporalEase":{"influence":16.666666667,"speed":-150},"endEaseType":6612,"duration":0.03333333333333}]},{"name":"Button Text","index":9,"props":[{"threeDLayer":false,"propertyValueType":6417,"name":"Opacity","dur":0.08333333333333,"startTime":0.21666666666667,"startValue":100,"startTemporalEase":{"influence":16.666666667,"speed":-1200},"startEaseType":6612,"endTime":0.3,"endValue":0,"endTemporalEase":{"influence":16.666666667,"speed":-1200},"endEaseType":6612,"duration":0.08333333333333}]}]}'
    const aeJSON = JSON.parse(tmpJSON);

    // draw specFrame
    specFrame.resize(1440,760)
    figma.currentPage.appendChild(specFrame)
    specFrame.x = 0
    specFrame.y = 0
    
    // add side panel to spec frame
    var sidepanel = figma.createFrame()
    sidepanel.resize(240,specFrame.height)
    //setFillColor(sidepanel,"F6F6F6" )

    sidepanel.name = "Sidepanel"
    specFrame.appendChild(sidepanel)
    
    //loop through layers
    const layers = aeJSON.layers

    for (let index = 0; index < aeJSON.layers.length; index++) {
      const layer = layers[index];
      
      //create Layer Objects
      var layerObject = figma.createFrame()
      
      layerObject.resize(sidepanel.width,36)
      layerObject.name = layer.name
      
      layerObject.y = layerObject.y + (index * 36)

      var alternateColor = index % 2 ? "F1F1F1" : "F6F6F6"
      setFillColor(layerObject, alternateColor )

      // set text accepts (text, size, alignment, parent object )
      setTextLabel(layer.name, 14, "left", layerObject)
      specFrame.appendChild(layerObject)

      // create props container
      var propsContainer = figma.createFrame()
      
      
      
      //  console.log(layer.name)

      //loop through properties
        for (let index = 0; index < layer.props.length; index++) {
          const prop = layer.props[index];

          let curve = drawCurve(0.47,0.04,0,0.96)
          //curve.resize(scale.width -20,rowHeight)
          // duration in ms = frames / fps * 100

          // convert duration(in seconds), to ms
          var durationWidth = prop.dur * 1000
          var delayWidth = prop.startTime * 1000
          

          curve.resize(durationWidth,rowHeight)
          curve.name = prop.name 

          var alternateColor = index % 2 ? "F1F1F1" : "F6F6F6"
          setFillColor(curve, alternateColor )
          
          var heightCounter = rowHeight * index 

          propsContainer.x = sidepanel.width + (delayWidth +10)
          propsContainer.name = layer.name + " props" 


          propsContainer.resize(curve.width, curve.height + heightCounter)
          
        
          propsContainer.appendChild(curve)
          curve.y = curve.height * index

          specFrame.appendChild(propsContainer)
        

        }
        //set the y position of the curve conatiners
        propsContainer.y = ( propsContainer.height * index)+24
        layerObject.y = propsContainer.y
        layerObject.resize(propsContainer.x, 36)
    


    

   
    // Loop through layers

    // Create layer objects
    // draw curves
    // draw

    



    

    
  }
  
  }
    
  //figma.currentPage.selection = nodes;
    //figma.viewport.scrollAndZoomIntoView(nodes);
  // Make sure to close the plugin when you're done. Otherwise the plugin will
  // keep running, which shows the cancel button at the bottom of the screen.

  
  // function to draw the scale
  function drawScale(timeInMS) {
    //ms to ruler units
    timeInMS = timeInMS/10
    //declear variables

    const smallTickSize = 6
    const bigTickSize = 11
    var counter = 0
    var tickLineGap = 0

    
    //setup Ruler container
    var rulerFrame = figma.createFrame()
    rulerFrame.resize(500,24)

    // draw ticks
    do { 
      const tickLine = figma.createLine();
      //draw big ticks post 5 small ticks
      if (counter % 5 == 0 ){
        tickLine.resize(bigTickSize,0) 
        tickLine.y = (rulerFrame.height - bigTickSize-1)

        // add text lables to ruler

        const text:TextNode = figma.createText();
        figma.loadFontAsync({
          family: 'Roboto',
          style: 'Regular',
        }).then(() => {
          
          text.fontSize = 10
          text.textAlignHorizontal = "CENTER"
          text.characters = (tickLine.x-10).toString()})
          text.x = (tickLineGap + 10) - (text.width)
          rulerFrame.appendChild(text)

      } else{
        tickLine.resize(smallTickSize,0)
        tickLine.y = (rulerFrame.height - smallTickSize -2 )
      }

      //gap calculation among ticks
      tickLine.x = tickLineGap + 10
      tickLineGap = tickLine.x
      
      // make the tick verticle (default line is created horizntal)
      tickLine.rotation=-90
    
      //add tick to the scale
      rulerFrame.appendChild(tickLine)

      // increase tick counter for next tick to be drawn
      counter = counter+1
      
  
     }  

     while (counter != (timeInMS+1)); 
     //3 is padding post last label in the ruler (3 =30px)
     rulerFrame.resize((timeInMS + 3) * 10 ,24)
     rulerFrame.name="Scale"
     
     rulerFrame.x = 240
     rulerFrame.y = 24
     

     return rulerFrame

    }




    // Draw Cubic Bezier Curves

    function drawCurve(x1,y1,x2,y2,) {

      var rect = figma.createFrame()
      rect.resize(500, 100)

      setFillColor(rect,"FFFFFF" )

      // hexToRgbColor = hexToRgb("F6F6F6")

      // rect.fills = [{type: 'SOLID', 
        
      //   color: {
      //     r: hexToRgbColor.r, 
      //     g: hexToRgbColor.g,  
      //     b: hexToRgbColor.b, 
      //   }
      // }]


      const nodes: SceneNode[] = [];

      var curve = figma.createVector()
      
      var startX = 0 + " "
      var startY = 100 + " "

      var canvasHeight = 100

      var controlPointX1 = (100 * x1) + " "
      var controlPointY1 = (canvasHeight - (100 * y1)) + " "

      var controlPointX2 = (100 * x2) + " "
      var controlPointY2 = (canvasHeight - (100 * y2)) + " "
      
      var endX = 500 + " "
      var endY = 0

      var bezierExpression = "M " + startX + startY + "C " + controlPointX1 
      + controlPointY1 + controlPointX2 
      + controlPointY2 + endX 
      + endY + " L 500 100" + " Z"
      
      curve.vectorPaths = [{
        windingRule: "NONE",
        data: bezierExpression
      }]

      curve.x = 1
      curve.y = 0
      curve.strokeAlign = "OUTSIDE"
      
      //clone the property then change it and then assign it to original one.
      hexToRgbColor = hexToRgb("EBB15E")
      

      const strokes = clone(curve.strokes)
      strokes[0].color.r = hexToRgbColor.r 
      strokes[0].color.g = hexToRgbColor.g
      strokes[0].color.b = hexToRgbColor.b
      curve.strokes = strokes
      
      

      curve.constraints = {
      horizontal: "STRETCH",
      vertical: "STRETCH"
      }

      rect.name= "Curve"
      rect.appendChild(curve)
      rect.y = rect.y + 24

      return rect
        
    }

    //Clone objects/properties for easy manipulation
    function clone(val) {
      return JSON.parse(JSON.stringify(val))
    }


    // Color conversion from Hex to RGB
    function hexToRgb(hex) {
      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? {
        r: (parseInt(result[1], 16)) / 255,
        g: (parseInt(result[2], 16)) / 255,
        b: (parseInt(result[3], 16)) /255
      } : null;
    }

    // JSON object parsing and interface

  //   interface aeJSON {
  //     myString: string
  //     myNumber: number
  //     lola: string
  // }

  async function setTextLabel( textLabel, size, alignment, parent){

    await figma.loadFontAsync({
      
      family: 'Roboto',
      style: 'Regular'
      
    })
    const text:TextNode = figma.createText();
    
    switch (alignment) {
      case "center":
        text.textAlignHorizontal = "CENTER"
        break;

      case "left":
        text.textAlignHorizontal = "LEFT"
        break;

      case "right":
        text.textAlignHorizontal = "RIGHT"
        break;

      default:
        text.textAlignHorizontal = "LEFT"
        break;
    }
  
    text.fontSize = size
    text.characters = (textLabel)
    text.setRangeTextStyleId
    
    parent.appendChild(text)
    text.y = 10
    text.x = 10
    return text
      
  }

  function setFillColor(layerObject, hexColor) {

    hexToRgbColor = hexToRgb(hexColor)
    layerObject.fills = [{type: 'SOLID', 
      color: {
        r: hexToRgbColor.r, 
        g: hexToRgbColor.g,  
        b: hexToRgbColor.b, 
      }
    }]

  }

  
    figma.closePlugin();
};