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

What is Framer? Join the Community
Return to index
Jean-Francois Hector
Posted Jun 23 - Read on Facebook

Does anyone out there use Framer Studio with plain javascript instead of coffeescript?

I played with Framer a couple of months ago, then went on to read 2-3 books on Javascript to build my core skills, and now I'm ready to go back to Framer Studio. But I certainly don't feel like using Coffeescript. So I'm planning of writing my code between ''' and ''' so it's interpreted as Javascript.

I haven't tried it yet at the scale of a whole prototype, but I imagine that this could lead to problems?

Had anyone been successful with that approach, or another way to use Framer Studio with plain javascript?

Thanks!

11 Comments

Leonid Nazarov
Jean-Francois Hector

Thanks Leonid, that's helpful. But Andrew's blog post is about using the FramerJS library with your favourite text editor, rather than Framer Studio. I'd like to use Javascript in Framer Studio so I can toggle between Design and Code, use the new art boards, etc ..

Radek Kyselý

Copy this:
`
const thisIsCool = new Layer({x: 100, y: 100})
`

Jean-Francois Hector

Thanks Radek, that's really helpful (I hadn't realised that construction classes take an options object as an argument).

So, I know it is possible to use plain JS in Framer studio, but has anyone doing it successfully while also exploiting all the feature of Framer Studio?

Jean-Francois Hector

Oh Radek, another question: I see that you are declaring the variable using const. I thought that this was a ES6 feature, no? My understanding was also that Framer Studio isn't compatible with a lot of ES6 yet — judging from Andrew's blog post which talks about setting up Babel and Webpack to make up for that. Is there any way that I can use ES6 in Framer Studio, maybe by installing Babel and Webpack?

Javier Eduardo Treviño

I don't think that's even possible you have to use another editor if you want to use plain JavaScript as far as I understand, isn't it ?

Jean-Francois Hector

Final question: Is it possible to use my favourite editor (Atom) for the 'Code' part, and Design Studio for the 'Design' part? ie I know that I can use Atom for code, but I'm not sure that, if I do this, I'll still be able to integrate with the 'Design' mode. (I prefer Atom for code because it's just nicer, and it has autocomplete for plain JS, and it makes managing multiple module files easier).

Javier Eduardo Treviño

I am interested in all this too

Radek Kyselý

Jean-Francois Yes, it is possible to write your prototype in any editor. Just save it before you move onto changing it in a different editor (e.g. Framer Studio). Code mode inside Studio is just a simple code editor that handles app.coffee file in your prototype's folder. Also, it's cool enough to watch this file—that means when you change its contents somewhere else (Atom), it'll get automatically updated in Code editor.

Just remember: when you want to write plain JS in .coffee file, enclose it in backticks (`).

Now, managing multiple module files: no, it's not easier. You can already do that in Framer. Just save your module files in your prototype's ›modules‹ folder and require() it in the prototype.
https://framer.com/docs/#modules.modules

Since you probably don't want to use Babel for prototyping, you'll be using module.exports = {} and require() in JS anyway, so that's the same thing :)

Radek Kyselý

Jean-Francois Javier
And probably the coolest trick on how to use JS in Framer? It can import JavaScript modules, so... you've probably guessed it by now...

Look at this, it's written completely in JS in .js file!
https://framer.cloud/Phkiz/

This is how the main app.coffee looks like
https://framer.cloud/Phkiz/app.coffee

This is the 'prototype' module it imports
https://framer.cloud/Phkiz/modules/prototype.js

Have a good day! :) :)

Jean-Francois Hector

Thanks all, I'm really excited about using Framer Studio again with plain JS

Read the entire post on Facebook