This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Ryan Gambles
Posted Jul 30 - Read on Facebook

Has anybody tried using Google's dat.GUI library for allowing state control of prototypes?

I recently incorporated it into a prototype and it's proven to be pretty dang useful for finding edge cases, letting developers jump around to different key states, and all sorts of other things:
http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

I added it to my project as an nmp module and instantiated it in the prototype using:
{datGUI} = require "npm"
prototypeControls = new datGUI.GUI()
prototypeControls.add(progressBar, 'percentage', 0,100).step(1).listen();

Just need to add to Style.css to make it usable:
.dg.ac {
z-index: 100000 !important;
}

3 Comments

Koen Bok

Yeah I used to use this all the time, it works great! I'd love to make something like this inside Framer.

Ryan Gambles

It's super simple to get running in a Framer prototype. Would be great to have it as a "native" component.

Jordan Robert Dobson

Thanks. Trying this today!

Read the entire post on Facebook