Search Machine

SketchSystems.spec

Search Machine
  Empty
    focusInput -> InputFocused
    searchByLocation -> LoadingResults
    NoLocation*
      getLocation -> HasLocation
    HasLocation
      loseLocation -> NoLocation
  InputFocused
    changeInput -> Loading
    clearInput -> InputBlank  
    loseFocusResults -> Results
    loseFocusNoResults -> Empty
    InputBlank*
    PredictionsError
    Loading
      success -> HasPredictions
      error -> PredictionsError
      blank -> InputFocused
    HasPredictions
      select -> Results
  Results
    focusInput -> InputFocused
    LoadingResults*
      success -> NoFocused
      error -> Empty
    NoFocused
      focusResult -> Focused
    Focused
      selectResult -> Selected
    Selected
      deselect -> Focused
    
         
         

SketchSystems_prototype.js

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

figmaToken = '2073-78bbf742-273c-42fc-ad5a-2e5aae9ee1b0'
projectKey = 'Gcd870Mhxn7E9XyPX8fQ6ies'

// ** Edit this: List state names and matching Figma frame/artboard IDs
let string, nodes, node_ids, figmaNodes;

imgElement = $("img", {
	height: "100%",
    src: undefined,
    ref: (el) => {this.image = el}
})

this.hasImages = false

figmaNodes = [{
		state: "NoLocation",
		id: "1:14",
		image: null
	},
	{
		state: "HasLocation",
		id: "1:15",
		image: null
	},
	{
		state: "InputBlank",
		id: "1:16",
		image: null
	},
	{
		state: "Loading",
		id: "1:17",
		image: null
	},
	{
		state: "PredictionsError",
		id: "1:18",
		image: null
	},
	{
		state: "HasPredictions",
		id: "1:19",
		image: null
	},
	{
		state: "LoadingResults",
		id: "1:23",
		image: null
	},
	{
		state: "NoFocused",
		id: "1:22",
		image: null
	},
	{
		state: "Focused",
		id: "1:21",
		image: null
	},
	{
		state: "Selected",
		id: "1:20",
		image: null
	}
];

function getNodeByState(state) {
	return figmaNodes.find(node => {
		return (node.state === state)
	})
}

function getNodeById(id) {
	return figmaNodes.find(node => {
		return (node.id === id)
	})
}



getImages = (stateName) => {
	if (this.hasImages) {
		this.setImage(stateName);
	}
  
  
    string = 'https://api.figma.com/v1/images/' + projectKey + '?ids='
    nodes_string = Object.entries(figmaNodes).map((entry) => {
        return (figmaNodes[entry[0]].id.replace(/:/g, '%3A'))
    }).join(',');
  
	fetch(string + nodes_string, {
		headers: {
			'X-FIGMA-TOKEN': figmaToken
		}
	}).then((res) => {
		res.json().then((data) => {
			Object.entries(data.images).forEach((entry) => {
				let node = getNodeById(entry[0])
				node.image = entry[1]
			})
			this.hasImages = true;
			this.setImage(stateName);
		})
	})
}

this.setImage = (stateName) => {
	let image = getNodeByState(stateName).image;
	this.image.src = image;
}

function render(model) {
	getImages(model.active_states[0].name)

	return $("div", {
			style: {
				"height": "100%",
				"text-align": "center"
			}
		},
		imgElement
	);
}