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

What is Framer? Join the Community
Return to index
Koen Bok
Posted Jan 25 - Read on Facebook

Poll: How would you feel about Framer switching to ES6 (actual JavaScript)?
Background: Framer currently uses a layer on top of JavaScript called CoffeeScript, to make it less intimidating and easier for beginners. But the next version of JavaScript (ES6) fixed many of these issues, so we are considering to switch to it. There is a lot more to it then I can express in this post, but I just wanted to poll the temperature and get some feedback.


Øyvind Nordbø

How much switch pain are we looking at? 🤓

Kasper Andersen

Would it be possible to make an example of how a Layer and an animation would look in ES6?

Dominik Sebian

I guess it would be fine. But could you may guarantee that there is going to be a coffeescript to js converter inside of framer? So wen can translate the current project.

Aalok Trivedi

I can only speak for myself--as an intermediate coffeescripter who knows very little javascript. Would definitely be more of a burden for me, both in time to learn a new(ish) language/format AND time to actually build prototypes fairly quickly. Coffeescript makes it soo easy, but then again, it may help me in the long run?

Anton Kartashov

Kasper Andersen ↓

Jonathon Toon

I think it would be fantastic. While there is some overhead I think folks need to understand that Coffeescript IS Javascript. Conceptually everything you've written to this date is still done basically in the exact same way.

Also given that Framer allows designers to get stuck in to the implementation of actual production code, at least on the web, making the syntax almost 1:1 will close that gap even further.

Dominik Sebian

If you guys have anything to test, I would love to play around :)

Will Rice

Would much prefer ES6. From what I understand Coffeescript has essentially halted development, and ES6 has a whole lot of the good bits that made CS worth using. That being said, I write a decent amount of JS outside Framer, so it wouldn't be a huge switch for me.

Ee Venn Soh

This is awesome news! A great first step to help designers to actually learn something that is easily transferrable to other libraries and frameworks. We all like to invest time and energy in one skillset that we can see it use across many other areas.

Andrea Pedrina

Please i dont have time to learn JS

Jonathan Lazarini

Yes please ES6 👍🏻
One of the reason I don't use framerjs as it I used to do is ES6 😬

Øyvind Nordbø

I think the switch pain is worth it. Thanks to the sophisticated Framer linter and Auto-Code, we'll be fine. ;) TypeErrors will probably be a little annoying in the beginning, but the tradeoff is too big to dismiss on the account of legibility/clarity that CS provides (amongst other things), in my opinion. I think it will be way more rewarding for all parties involved, to use ES6 in the long run.

Jonathon Toon

I'm interested that people don't want Framer to change because learning Javascript is too much work. If you started using Framer with zero Coffeescript knowledge, and Javascript is practically no different, what makes you think you wont be able to pick it up just is easily (especially since the great team at Framer would re-do their source material and tutorials to match Javascript)?

Darin Dimitrov

I can't believe this is happening. Feels like Christmas. 😍

Anton Kartashov

What is pity to lose with CoffeeScript:
– "for" loop with ranges, "for…in" with iterator and "for…of" with key/value.
– ranges (array[5..], array[..10]).
– thin arrow; fat arrow in ES6 don't work with "this", you have to write word "function" :–)
– very beautiful and clean syntax with a lot of sugar.

Good things in ES6:
– "let" solves newbies' very common problem with understanding of "scoping"!!!
– ternary operator.
– classes, method properties.
– it looks more transparent.

I think, that with ES6 Framer will be complicated for beginners. On the other hand Framer would be more attractive, cause ES6 a more universal language today: you'll be able to apply your knowledge to work with the JavaScript in browser (DOM, React). Haters of CoffeeScript really got :–)

Dmitry Sholkov

I think it's worth it but a bit scary. If you guys provide good amount of learning materials to ease the switch, than I'm in. I'm talking about not just written docs but actual video tutorials with small tips around common UI interactions and syntax changes. When I was beginning learning framer I found videos easier to dive in then reading through the doc, after I got comfortable with syntax it was easier to use the documentation.

Also, I'm trying to convince some of my design peers to switch to Framer and I found it hard to recommend them any good video tutorials that is easy to follow just to get started. Most tutorials were made some time ago and don't use latest syntax (such as ".onClick" shortcuts or animate states) Who tried mentioned that it feels for them like double work: To learn old syntax first based on old tutorials and then learn shortcuts.

Dominik Sebian

Depending on how hard it is, i would like to do some tutorials to get basic stuff covered.

Douwe Homans

I believe it's better for an (experienced) programmer to learn the specifics of JavaScript then those of Coffeescript. So I believe ES6 will help them more.

Starting programmers will find learning Coffeescript or ES6 equally difficult. They will probably look at Framer documentation to learn, so as long as that documentation will be updated I think you're good.

That's my opinion and that's why I vote ES6, but Koen Bok I think you might get biased results on this poll as I believe there are a lot of novice programmers (Framer users coming from a pure design background) out there who might not even be aware that they are using Coffeescript (in Framer) now, might use ES6 in the future, and why they should or would favor one over the other....

Dmitry Sholkov

Also would be cool if someone explained for not so advanced in JS what benefits are we talking about?

Tommaso Zennaro

switching to javascript would be huge

Gregory J. Orton

ES6 BABY. No more transpiling. No more spending 30 minutes working out how to do in Coffeescript what I can do in JS in 30 seconds.

Steve Ruiz

It depends on whether you're still trying to attract designers who don't code. There's a big advantage in using immediately legible language like Coffeescript, not only for people new to coding, but to people who have spend their careers working around code without actually touching it, and who see raw code as a sign that they're in a different professional's territory. The parts that Coffeescript takes care of behind the scenes - statements and punctuation that aren't self explanatory, all in nests of curly brackets - are what previously had identified code as something I shouldn't mess with.

Daniel Lauding

Yes yes, love

Andrea Pedrina

If your target are designers (from ux, visual, ecc.) leave coffe.. Few of them are willing to learn JS since there are developers for that and its time consuming.. My 2 cents

German Bauer

ES6. It's pointing more into the future and is more transferable to other projects.

Martin Skarbø Sangolt

If you still can use the visual editor with ES6, I think this will be a great move for experts and novices alike.

Arun Kumar Dadhwal

If we get *High Quality* ES6 tutorials for Framer (like we have in CoffeeScript), then I am in :)

Rafael Marin


Leon Kosters

Good luck with changing the docs 😁

Zoltán Cserei

I've been waiting for this!

Hunter Caron

It might make the skills people learn in framer feel more tangible/useful in real applications which is nice. Should greatly reduce the friction from using your framer knowledge to build full web apps.

Switching to ES6 might increase the initial "code is scary" but will help with long term confidence, which I think is worth it.

Stefanos Kofopoulos

I feel an important question to ask is why this is important. Why CoffeeScript or ES6 is important to the core mission of Framer.

There are many pros and cons for each but why Framer does what it does is the question to be answered first. How this can be done will influence or define the choice between CS or ES6.

I'm not trying to be a smart ass neither get philosophical here. I believe there is a fine line in every product decision.

It's the area between "If I had asked people what they wanted, they would have said faster horses" and doing the right thing for the product and the people aligned with the mission.

Ted Belfadla

if that would allow us to export our code...then yes, big yes!!!. Also, if you choose to switch, don't keep both please...tutorials are important...and if you allow people to choose between either one, people learning Framer in the future will suffer big time

Sigurd Tapio Mannsåker

In my experience it's easier to get non-coding designers started with the CS syntax, and you do get a lot of little stuff for free that involves a lot more typing in JS. JS scares off a lot of people who think they can't code. Even I find it liberatingly concise, even though I've written JS for years. Not gonna be a fan of curlies instead of arrows, especially when double arrows are a thing but single arrows aren't somehow?

As far as I know CS 2 on its way, which compiles to ES6 anyway. Don't know enough about it, but I'm eager to give t a chance.

This is prototyping after all, it should be pragmatic and fast above all else.

Chris Skiles

If coffee is already sitting on top of JS, how hard would it be to make a mode selection? That way those who want coffee can still use but it can be turned off as well.

Andy Jakubowski

While I would theoretically like to learn ES6 for various reasons, I would like to know what specifically we’d gain by switching to ES6 for Framer. What I like about Framer is the ability to build and test things fast, and having to learn new things or update/transition my projects would have to be offset by what is to be gained.

Framer is an important part of my work, so I will adapt. But I’d hope that there would be more benefits of switching than downsides.

Chad Lonberger

If you're considering adding support for ES6, then awesome. If you're considering replacing CoffeeScript entirely, I definitely suggest pushing this poll out to your entire user base via email before making the switch. As active members of this group we likely represent your more hardcore users and are *not* the users that would stop (or not start) using framer because of ES6. FWIW, as someone that writes in many languages (including ES6), I love how terse CoffeeScript is for prototyping, but would still continue using if ES6 was the only option.

Raphael Schaad

Very clear poll results. Additionally, think of it that way: are you planning to add more users to Framer in the future than in the current user base (probably yes), so for all those users whose first interaction with Framer will be in the future, what would you like them to see? And what other skills do they potential bring with them in 1, 2, 3 years? (no coding experience; some JS; ES6; or CS – unlikely, because Framer would be the only place where you'd learn it). That said, of course it's important to listen to the active community as well.

Carl Mathisen

Have a look at CS2 at The actual code is happening in the original jashkenas repo (branch named 2) and an alpha is close.

Chris Camargo

Having shown the ropes of Framer to many, many designers who are new to code, moving to ES6 makes me a bit nervous. The verbosity alone of ES6 over CS will terrify some newcomers. I think the beauty of CS is that folks who are new to coding find it less cumbersome and scary than plain ol JS. I think the cleanliness and pure readability of CS have been a significant factor in the tool's success, but that's just my guess.

I worry that moving from CS to ES6 would simply put off a percentage of folks who might have otherwise jumped in to a CS-based environment.

Josh Ackerman

JavaScript is more ubiquitous, and I personally don't enjoy keeping track of a bunch of different programming languages, so switching would make my life simpler in that respect.

From a different perspective, I don't even think the learning curve is a reason to withhold from switching, as programming is really more about concepts and computational thinking, as opposed to syntax.

My only concern is compatibility -- it wouldn't be enjoyable to convert all my old projects from CoffeeScript if I needed to use them again.

Regardless I would still vote to switch since it's probably a better move for the future.

Rich Price

Can't have both? Drop into ES6 as needed :) I know that would add create unidirectional issues, but it would create the option for entry level folks. If coffee is just preprocessed JS.

Keith Lang

This may sound trite, but I find the JS brackets sitting by themselves to look really ugly, and more importantly, difficult to visually track. They also look like a grammatical mistake, since latin-based languages only use brackets attached to word blocks.

Can Framer do some magic to help these brackets look more like the structure they actually represent? Otherwise, to at least this designers eye, it looks (and I think cognitively is) is a regression in ease-of-use.

Luca Galvani

I really can't wait to have ES6 available in Framer! :)

Javier Eduardo Treviño

This may be my own opinion but.. at the end of the day Framer is a product for designers who are somewhat interested in development or have a background in it in some way. I think being able to use the same syntax (ES6) both for a React app and Framer would be beneficial for the learning curve and productivity

Fritz Frizzante

CoffeeScript = ease of use

Tarun Chakravorty

Koen - This poll might be really skewed since people voting for ES6 know what it is in the first place. Any non-technical designer is right now looking at this poll and googling "what is ES6.."

I vote for going with the thing that is more easily searchable over the internet (which would be ES6). Right now, every time I want to do something very specific I spend 20 mins googling for the right coffeescript syntax..

David Phillips

Part of what makes Framer accessible is that it uses CoffeeScript which is a nice gateway drug to go from coffeescript to javascript. The moment you take that away, I see all the people who are excited about Framer going over to either Principle or just building it in standard HTML/CSS/JS and whatever frameworks they already know.

Emmanuel Henri

Yes that would definitely be a major step in the right direction! Speaking from a user and teacher of your tool (doing a course at Lynda at the end of the month)

Patrick Sullivan Burtchaell

As someone who works in both design and eng roles, I would appreciate writing actual JS (so yes, ES6). Framer is the only library I use Coffeescript for. Consequently, there are times when Framer reduces my productivity because I need to look up special syntax that I'm unfamiliar with. That being said, I am in a different position from some designers who don't also write code on a daily basis.

Mike Johnson

I'm not sure why so many people say coffee is easier, a lot of the mistakes we see are either indentation errors or lack of understanding core concepts, like when is this code calling a function that is accepting arguments vs creating an object, etc.

Sure, the brackets "look" ugly but it clearly explains what code is being written. I often get visual hiccups when reading other people's coffeescript because I have to re-read sections and hold it in my mind, OK that's a function passing an object defining a new function as a prop.... And so on.

If collaboration is desired we should be writing code that is easier for other people on the team to understand my intent, not what is easier for me to type.

Mike Johnson

The other important thought I have is where can people go after they learn Framer... If they only learn coffeescript there is no real place to use it to advance your knowledge or career. If we start teaching es6 they could use that knowledge to push the prototype further helping out the team goal more, if they want. They would start picking up things from their engineers on the team and could apply it back to their own projects.

Or they would find react/angular/Vue not a big departure from what they already know and start learning that as well.

With coffeescript it's really a dead end.

Koen Bok

This whole conversation also made me wonder about this, which most people seem to agree is the main benefit of CoffeeScript over JavaScript:

Mischa Eliseev

Well, Framer is already intimidating for designer who don’t code (for me anyway). But learning code I can use outside Framer would be pretty cool.

However I’m making more and more stuff in Flinto just because it’s a lot faster — I don’t need to remember Coffee Script syntaxis just to start working. Probably the best way is to a powerful auto code which will be capable of most basic stuff and actual Java Script for complicated interactions.

Daniel Marqusee

It seems like a language that I will need to learn anyway. Using it in framer will be a great learning tool.

Andrei Herasimchuk

This would be fantastic!

Akhil Dakinedi

the biggest benefit of CoffeeScript is definitely the syntax (or lack thereof). If you guys can ensure that error handling and proper autocomplete syntax works right in Framer running ES6, I'm all on board!

Michael Dorian Bach

Brackets are ugly. Framer is a designer tool. I personally think if Framer had its own language even better. Something even simpler. The goal should be less typing not more.

Josh Peters

From the perspective of someone who has lots of desire, but seemingly none of the time to fully assimilate JS into their designer know-how, I would say this would definitely add additional blockers to using Framer. Though having transferable knowledge is a much better thing to have in the end.

That said I don't use Framer on a daily basis. It seems a luxury to have to be able to tell your own story and bring it to life. And I'm used to not having luxury for the most part, but I'll do my best upon any given change to pick up what I can.

Luca Galvani

I think that FS isn't a tool for designers only... I design and code and having to constantly switch between js/coffeescript/typescript ecc it's getting a bit frustrating...
You also get the benefits of coding ES6 like in a real webapp, a dream come true.. so much time and $$$ saved! :)

Alex Escalante

Just about time

Radek Kyselý

Koen I just got an idea.
I can imagine you'd develop some kind of autocomplete that would add brackets, commas, semicolons to the code ›and wouldn't let user delete them‹ (unless they switch into some "advanced/developer" mode).

Also, that way you could dim the ES6 syntax and user will be left with clean, easy-to-scan code similiar to CS (only it'll be JS).

Henrique Gusso

Even though I wrote regular JS before I started playing with Framer, it was still extremely appealing to me in the beginning that the code was so pure that it didn’t look like code, it looked like declarative design. I’m very skeptical about losing that feeling.

Having said that, there’s also purity in removing a layer of transpilation, and the downsides of having extra characters around can be reduced with visual aids and autocomplete.

So for me, going to ES6 while maintaining the feeling of Framer sounds like it will take a lot of work, but also the right thing to do.

Alexander Olssen

Hm...Since I'm a designer without any coding skills, switching to ES6 seems a little bit scary. But with proper documentation it will be great switch due to ES6 prevalence.

Christie Gettler Tarazon

I think it would be great, though I'm new to all this and just learned cs and would be kind of bummed to now be immediately hampered again having to learn es6 but it would be worth it I suppose.

Marcelo Eduardo Oliveira

Here's my take, as someone with a medium team of both designers and developers using it: The only ones that talk about ES6 are the developers. The Designers, the one that are more enthusiastic about it, will find ES6 only option super scary and will jump to another tool if that happens.

I don't think keeping both is a drag, specially because the ones benefiting from ES6 will be the ones that need less support.

my non requested 2 cents ;)

Carl Mathisen

It all depends on who Framer wants to target in their next releases. Looking at their open job positions, it looks like they want to take Framer closer to a production level, and if that means ES6 is their marriage proposal to developers, I can understand the move. Just look at the poll, I am surprised so many people are pro ES6 - probably means a lot of developers are starting to use the tool.

Shane Brown

As someone who doesn't do web stuff besides, and with a little bit of experience with Java/C++, I find coffeescript quite annoying in trying to learn and understand how things are actually working. I've often had to use something like to try and get a better grip of why something I'm doing isn't working (syntax / logic error) or by finding help outside of the group that is in javascript and having to translate between, which can be frustrating.

In regards to concerns about complexity with 'actual' Javascript, I will say that where I am, everyone else is scared and intimidated by *any* code, coffeescript included. And then having me run into issues because I have trouble with coffeescript being 'black-boxy' doesn't help. At least, if a designer with no coding experience feels compelled to push into prototyping because of the quality of Framer prototypes, they will be able to come out with experience with modern javascript that they could then build upon or utilise in other related area's such as ActionScript for AE (& other Adobe stuff), Unity, Three.js & WebVR etc. I think that's more valuable, at least for me.

Javier Eduardo Treviño

coding in CoffeScript it's still almost as difficult as ES6 JavaScript which will be a skill that you can use for many things other than Framer, inlcluding many interaction-related stuff

Constantine Zuev

Well, coffeescript makes some things easier, but still it is JS with all of its limitations. ES6 on the other hand looks like a mature object oriented language with classes and other improvements. Yes, this will be pain to transition. But once you do, you won't be able to live with coffeescript again, believe me. It's just too simple.

Javier Eduardo Treviño

CS is an extra layer that may be little bit more Zen than ES6 but it alienates us from the overall picture of using JS to do a lot of different projects and products. Using the same language to prototype and to build stuff could be great.

Emmanuel Henri

And for all those who are scared of Javascript ES6 don't! You're using similar syntax with Coffeescript and there are even ways to still code in Coffeescript and get Javascript.

Jan Rod

I would be stoked if this would bring us closer to be able to effectively reuse parts of code from prototypes in production.

Ola Laurin

Hello again curly braces, parenthesis and semicolons 😭

Giles Perry

What's great about Framer is that it empowers designers. Coffeescript is relatively easy to dive into. That's important. Framer is a prototyping tool. Working quickly is what matters. If ES6 compromises either of these aspects a massive alarm bell should be going off. I don't know too much about ES6. But I'd ask the question: will ES6 help me to work more quickly? Will it help me make better prototypes? I'm more interested in getting it done than writing beautiful code so I don't see my code getting reused by a developer in any real-world situation.

Sarah Federman

Por que no los dos?

Blaine Billingsley

I'm not sure I understand what the benefit of switching to ES6 is enough for me to want it. Other than it being "the future", what do we gain from making the switch?

Asher Isaac Simonds

I can deal with learning a new system as long as the Framer documentation can provide a smooth means of transition.

Documentation should help existing users into the new language, and there should be good consideration for old project use.

Philippe Côté

If you decide to proceed with ES6, would you take our hand to help us transition from CoffeeScript to ES6? I've invested so many hours on this, this transition might be hard otherwise...

Alvaro Lourenço

I would probably set up a Coffeescript workflow without Framer Studio. Just can't see myself cluttered by brackets and commas.

Miguel Angel Olave

Sorry, but this survey sucks! In all options Javascript is an opción. Hahahha

Miguel Angel Olave

For the record. I added coffeescript

Freddie Iboy

ES6 as an advanced mode would work better. I've been introducing framer to my design co-workers at work and coffeescript is much easier for them to understand. The hard tabs and spaces are tougher for them to grasp at first but the uniformity after helps them to read their code. But the power of ES6 would future proof framer.

Alvaro Lourenço

Majority of Coffeescript developers in this pool is not considering to move out from CS, and the repo is discussing a progressive implementation in ES2015 into a Coffeescript 2 (WIP)

Philip Jacob Amour

Welp, when I've used Framer last time, I found it pretty intuitive to learn especially for its coffee script that's pretty straightforward and easy to use due its lack of brackets, semicolons, etc... However I still prefer more intuitive and faster approach to prototyping - visual coding - e.g. Origami Studio which is superior for this task (not to mention that's native and extremely well designed.) I used Framer last time around 6 months ago, since then I have mastered HTML & CSS, learned a little of JSX (even tho my main focus are native mobile apps that are the present and the future but the need emerged) and Swift. My natural progression is to learn more JSX even tho the syntax sucks and keep learning Swift which is superior and much more useful to anything else out there - not to mention the syntax is great. Personally I prefer coffeescript much more to any other JS syntaxes and feel like that will be the easiest to pick up and learn for designers. Worried that by changing the syntax you may discourage potential new users and alienate your current users. Funny enough the poll says different although you can't really poll potential customers and your current users that are not a part of this group so you may have selection bias.

Tobias Tiefert

ES6 Sounds like a good Option. What bothered me about coffee script is, that I had to learn just another way to code that I couldn't transfer to other projects. Using "proper" JS is quite useful because you can use that knowledge on web projects. So in some way it's less effort than coffee script.

Joseph Van Geffen

My main issues have always been scoping misunderstandings CAUSED by coffeescript and naming/layer conventions caused by living sketch file imports. Coffeescript simply isn't that much better than javascript vanilla to hamper product development.

Alvaro Lourenço

As a designer, I really don't expect to transfer my CS code all the way up to production. It's probably bad code. However, Coffeescript makes such a nice job on communicating my algorithms across development teams. Even C# people haven't had an issue on porting it. And results are awesome.
I would say vanilla JS would probably do worse for me and for them. The new JS features will probably serve for structured coding... which is not the case for Framer.

Richard Whitner

Personally, I would like to change to ES6, but I’ve got some designers getting ready to dive into learning Framer, and some of them are already intimidated by Coffeescript. I worry that ES6 will make that learning curve even steeper and more frustrating for them.

Richard Whitner

Based on the posts I've read here, it appears that the primary benefits of the switch would be:

• Learning ES6 in order to have knowledge for use outside of Framer
• Being able to use your Framer code in production

What I want to know is how the switch will allow me to make better prototypes, faster. I don't want to write production-ready code. I don't want to become a developer outside of Framer. I want to know how ES6 will empower me to do things I can't do with Coffeescript inside Framer.

If the bullet points listed above are really the only significant benefits, then I say stick with Coffeescript, or ideally some sort of hybrid (like demonstrated by Radek Kyselý), because it is far more important to me to be able to bring my non-coding designers into Framer with as little pain as possible... which I'm starting to reconsider requiring them to do.

Atom Marvel Raiff

I think it's safe to say that there are far more devs familiar with Javascript than Coffescript. This would really help devs like me that fall under that guide designers to use Framer.

Javier Eduardo Treviño

Even if we are not aspiring to create production code, there are more resources and and a culture around ES6 JavaScript. it's a mover universal standard, like using a programming language instead of Flash. SVG over PNG. Or using the standard QWERTY keyboard and USB ports for a laptop, etc.

Ola Laurin

If you ever were involved with Flash this conversation likely brings back many memories from the AS2 to AS3 transition.

JL Flores Mena

Can we have both? Maybe when creating a new project add the option to choose between CoffeeScript and ES6?

I was watching a React tutorial a few weeks ago, and at one point the developer made fun of CoffeeScript and people *still* using it. I think that attitude comes from lack of empathy and from a very narrow point of view.

Here are some thoughts I've had around this topic:

- I've seen designers develop their skills from CoffeeScript to JS *because* of Framer. (I'm one of them!)

- Make no mistake, ES6 is great, but it's not a new paradigm. There was JS before CoffeeScript. There was CoffeeScript before Framer. But it was only because of Framer that I (and others like me) finally got to wrap our minds around code. And then we went from Framer code, to custom CoffeeScript code (building our own modules), and then finally making the jump to vanilla JS.

- CoffeeScript doesn't make Framer a "dated" tool, it actually makes it welcoming for people who have never coded before.

- Framer is a very unique case in which CoffeeScript is not a weakness, but a strength.

- Framer does not have the same issue Flash had. Framer is another flavor of what's used to create web apps, another flavor of the most transferable skill on the web: JS. Flash, ActionScript and Adobe’s propietary plug-in were on a totally different camp. (Don’t you guys get Flash anxiety please).

- If Framer gives the user the option between Coffeescript and ES6, then it would empower designers to transition to vanilla JS at their own pace, without putting a big blocker in their workflows. (Then read the data and see if maybe in 2018 you guys can drop Coffee completely).

A mantra to share as a designer trying to code:
"Approach prototyping as the great designer you are, not like the JS developer expert you aren’t."

Having said all that. I really can’t wait to use ES6 in Framer.

Javier Eduardo Treviño

yeah, maybe make the transition gradual. A lot of less experienced coders will appreciate it. To me a lot of what makes Framer special it's the journey it takes us on, not necessarily a strictly ultra productive app like Sketch, but everyone uses it differently

Davo Galavotti

What about running something like "decaffeinate" to support old framer code. Maybe it's possible to "transpiled" JS back to CS?

Alvaro Lourenço

Come on guys... designers are not worried about integrating resourceful JS libraries into Framer. Most of the times the are a lot more concerned about taming the very basics of Framer's Layer architecture, and still plenty of them ends up using something like Flinto, or Marvel. The moment you try to sell EcmaScript 6 on the cover, they will be all out.

Justin Belcher

From a product perspective it kinda seems like a no-brainer to invest in the future—build a CS->ES6 codemod in Studio for day one conversion and create great migration docs. Most folks are unaware how many CS nice-to-haves (and more) exist in ES6.

From a user perspective I can understand the argument against, but ultimately it just comes down to clarity and ergonics. Language choice doesn't have to be coupled with onboarding and dev experience.

Javier Eduardo Treviño

flinto and principle are for visual designers who like to dive into adding motion to their work. Framer is for people who want to dive deeper into technology to be able create more complex and innovative ideas,so ES6 is a good fit. Even a WebGL version of framer would be interesting

Zachary Pfriem

If you make the switch to ES6, I would hope that a library of scripts greater than exists today would come with it for the beginner/novice user.

John Lee

Worth it in the long run, and would allow more features?

Javier Eduardo Treviño

tools like Axure and Justinmind allow designers to make prototypes without coding, they allow them to express the functionality of an application. But they are often limited in the interactions they offer. They offer a simple blank transition that is still the norm on the web for the most part. Framer needs to be a bridge between this and the other tools like Principle and Flinto which offer simpler interactions for native app designs

Javier Eduardo Treviño

Ultimately , I wanna be able to express a full idea before building it. Koen Bok and company have taken us into a journey with their product. We are living in a era where innovation and entrepreneurship are being taken into a new level. ES6 and possibly other technologies can move us into a new era where design and development meet. The future is bright for people like us who have invsted years into all this stuff.

John Lee

Switching would only increase the complexity of writing code and questions in this group. You'd need to provide very intuitive error states which open up into helpful docs on what's wrong and how to correct the error. ONLY then should you roll this out.

Felix Haus

Very exited for this, always struggled with the Coffee syntax because all my other projects are using es6, so coding with framer always felt like a step backwards.
Maybe the integration of a plugin like prettier ( could be helpful to lower the pain with the brackets.

Rafe Chisolm

Just a question revisiting this: If the ES6 switch occurs would there be a possibility of those interested in signing up for a pre-release beta? Might give some valuable insight for those who are skilled in ES6 as well as those who aren't.

Javier Eduardo Treviño

Add support for es6 and more support for fluid layouts

David Puerto

Been waiting for this for years. I just did all my prototyping in [traditional] web technologies because I didn't want to learn CoffeeScript and wanted to learn and improve with JavaScript and eventually pick up React and the whole modern JavaScript toolchain. I guess that both should be possible but support should end for CoffeeScript while all the energy is poured into ES6... I wish it had always been the case to use vanilla JS. Great choice moving forward. Thanks!

Jithesh Ramesh

I might be wrong or stupid, but then what is stopping Swift and xCode (storyboards) to be adopted. Most of the prototypes created in Framer are for mobile anyways (Yes I am aware that it does not address Android platform)

Alvaro Lourenço
Javier Eduardo Treviño

there's a lot of overlap between the Codepen crowd and the Framer crowd, switching to regular JS would be easier...

Alvaro Lourenço

I think of Framer's crowd more like Dribbble's crowd, actually.

Andric Tham

Yeah, ES6 is the way to go. I think if Framer’s mission is to help designers get into code, Coffeescript is quite counterintuitive, given that most of actual front end code (JavaScript, Swift, Java) doesn’t resemble Coffeescript syntax.

As a designer, I have limited free time and mental bandwidth to spend on learning to code.

The cost I’ll have to pay to learn Coffeescript doesn’t pay off as much as learning Javascript would. For that reason, I like React’s philosophy of “learn once, write everywhere”. For Coffeescript, it’s more like learn once, that's it. Plus, Framer and Coffeescript’s community does not match the sheer scale of the node and React communities with great resources and libraries to help you along.

I want to have Framer Studio’s powerful tools such as Sketch import, auto code, and code export. But to have to learn a new Framer-specific syntax, layout engine, state management philosophy, all that is a bit wasteful since it's limited to Framer.

I find that paying the cost of learning Flexbox, React, Redux and ES6 will help me become more productive in the long run given that I would be able to write across different environments and leverage open source libraries and community resources. My developers at work have all switched to React/Redux and React Native, and Framer code seems all the less useful by the day.

Before Framer, there was Flash, Ruby on Rails and AngularJS, all with lofty goals of making code easier for designers. But they ended up making life harder for developers more than anything, and designers still wouldn't have learned much to be useful, given they're so domain-specific.

Alvaro Lourenço

Great point, but golden rule of Coffeescript is that “It’s just JavaScript”. So it doesn't seem that domain specific to me. Many good React and NPM libraries actually use Coffeescript. So it's hard to see it dying as long as Javascript survives.

Javier Eduardo Treviño

for me it's a different scenario, I am more of a front-end developer who works on conceptual and design oriented stuff, not only engineering-oriented stuff. So for me it would be great to show my ideas using Framer, before actually coding them in HTML or SVG which takes a lot of time as it is the actual final product. Normally I would be using JavaScript or jQuery, or D3, which use method chaining and other abstractions but they're pretty much pure JS libraries. I think it would be beneficial to have Framer be more similar to front-end projects for familiarity, for it to be sort of a magic wand of pre-development approval and ideation

Alvaro Lourenço

Yes, I got your point Javier. But when thinking of Framer's target user as these designers currently using Principle, Invision, Mavel app, Origami, UXPin and that sort of tools, we have to consider that most of them are nowhere near of being front-end developers. To consider your "familiarity" point, which makes some sense, is to ignore the easier learning curve proposed by Coffescript at the same time. Believe: brackets, semicolons, 'var' declarations and this sort of stuff will really blow UI/UX designers far away from Framer Studio.

Chris Wang

I always thought Framer is a great prototyping tool that bridges the gap between design and code. And as someone who doesn't have intensive dev background I love the fact that it uses coffeeScript for one main reason, it's a very human readable programming language,I feel more like writing sentences than code. And I don't have to worry about missing ; { [ or whatever syntax mistakes I will make in javaScript.

I could make most of my prototypes with coffeeScript pretty easily and all the default properties, components and modules in framers are huge time savers.
And I always thought the purpose of prototype is to validate ideas with less time, effort and resource than real product. And by definition prototypes are experimental and disposable. So I would never feel bad about my code in framer never making it to production or if I could use all the libraries that are available to javaScript or if I'm using ES6.

I find CoffeeScript to be way less intimidating than javaScript and let me focus on the design than worrying about writing codes. So I really wish it is here to stay.

Maybe what we need is a javaScript "mode" in Framer where people with dev background can do more advanced stuff without letting go of the part of Framer that makes it easy to just make simple prototypes.

Isaac Weinhausen

Maybe introduce a npm-style package management/sharing feature before making the switch to ES6? That would make it a more compelling reason for designers who are undecided to stick with Framer after the ES6 transition. The idea of being able to quickly import other people's UI frameworks and modules is super compelling.

Vlad Mafteiu Scai

Well, I will definetely set up a workflow to convert CS2 to ES6. As a UX/UI designer, I am not touching anything with semicolons, brackets etc.
It’s cool to have production ready code, and I did ask in one of the support emails I sent about it. But to be honest, none of my clients need it, they just want prototypes. Any code I write, will need converting to native code for mobile anyway.

Javier Eduardo Treviño

From what I understand the goal of switching to es6 is not so we can create production ready code.. it's rather a way for ux designers to get used to code and the culture around it as JavaScript is used for all sorts of things that a product designer might be interesed in

Maximilian Bredow

I would like to know, will there be an update coming soon? Or has it already been anounced?

My 2 cents:
I am new to programming. Tried learning Swift via Udemy, failed. Then installed Origami and touched concepts like functions, arrays, loops - but was missing the network compatibility. For Framer, I started learning CoffeeScript - am using it now even though there is the Design tab in Framer Studio. But soon realized CS is a language (compiler) that has lost momentum (e.g. Google Trends shows more traffic in 2014 than now). JS / ES6 seems like the future and there is far more content out there to learn this language than there is for CoffeeScript. I love the LiveCode feature as this shows me very quickly what my changes in code translate into on the prototype.

Michael Davis

Seems like Framer needs to pick a target audience. Designers are underserved with animation prototyping tools that are quick for concept development (and subsequently making it easier for Front End dev to interpret), so if you want more adoption on that front making it even harder to pick up will just lose those users.

Javier Eduardo Treviño

I think they dropped the idea of switching to pure JavaScript... Guess it makes sense now with the design tab

Adam Mazurick

Koen Bok is this still happening?

Koen Bok

We will switch to ES6 at some point in the future.

Daniel Rakh

Koen Bok any updates on this? Would love to know if we're going to see this by the end of the year? :D

Karina Kozinsky

Wanted to add couple of features, that I am missing in Framer now, before the switch thing. What about the correlation between design and code modes. Design mode is wonderful for reusable components, but then I duplicate them in code, overwrite properties and the artboard is not valid any more. I can't use this wonderful, long awaiting export feature any more. SVG animations- could be very nice to have some easier workflow for that, and maybe even export (I have no idea if it's doable). This can be used in production!

Nam Dang

ES 6 pls

Alvaro Lourenço

Coffee is nice.
We need a killer Design Tab.

Alan Travis

Chris Wang mentioned a JavaScript mode...

MIT came up with a pretty ingenious way to learn how to code... Scratch...

I'm not about to advocate Framer Studio adopt Scratch, but there is an interesting thought to consider...

Designers who are by their nature visual, code visually... Behind the scenes the visual code can be any flavour of whatever programing language is appropriate.

I personally am a polyglot, and am able to code in pretty much any language... Under the hood they are all VERY similar... I'm sure this same principle is true for designers who can switch between Ai, Photoshot, Sketch, Adobe XD, etc...

With software design, there are very basic building blocks... Which when assembled in clever ways make for interesting and useful components and modules... Then when assembling those modules you can create complex interesting applications... And so on...

I personally think some of us who are gung ho for ES6, might look at MIT and Scratch, and think about bridging the gap from design to code with a visual code interface...

With of course the toggle switch to show the underlying code and/or edit in code mode completely.

Muhammad Athar

ES6 for life!
BUT: Koen, will it be backwards compatible with all the modules, plugins, snippets written back in time? There is so much out there which are not even being maintained anymore.

Karan Murthy

Can we pre-create a lot of commonly used effects and keep the CS with an updated design tab ( Actually much more killer design section ) . It will make my life wayyyyyyyy easier than it is now . I have no problem with JS at all since I have transitioned from being a software engineer to a UX designer . From my experience designers need less and efficient coding and want to spend most of the time designing the actual architecture for the problem

Javier Eduardo Treviño

you should really look into Axure, as it's very powerful but It looks like a old Microsoft program , maybe you could introduce similar features that feel more like designing software and less like painting compositions, no matter what syntax you choose to adopt in the end. in my opinion I Still think pure JS is better for me as I develop my own React projects, and have always coded pure JS for creating websites.. but that's a highly personal thing

James McKay

For a designer considering a jump into Framer, had I better get into it now before Coffee Script disappears and the entry bar gets raised too high for me? 🤔

Kuai Meizheng

No matter what language you use, the cost of learning is the same for designers, or for those who need it. Why not choose a better Es6?

Read the entire post on Facebook