44

AMA: Framer Team on the all-new Framer and Auto-Code

over 3 years ago from , Content Strategist at Framer

[update] Thanks for all your questions! The Framer team is signing off for now. We'll talk to you soon.

Hey everyone,

My name is Brittany Gregory and I'm a content strategist at Framer.

Maybe you already heard that we released the all-new Framer last Tuesday, April 12. We are beyond excited about all the reactions we’ve been hearing from you. The new Framer introduces a set of powerful new design features, called Auto-Code. You can now create and manipulate objects in Framer with the simplicity of a visual design tool. And you still have all the power and flexibility you get with code. Now Framer will actually write the code to get started. This lets you explore more ideas, much faster. And the added bonus is that it makes Framer so much easier to learn and use.

Now that the new Framer is out in the world, we’re excited to hear from you and answer any questions you have. Our founders, Koen Bok and Jorn van Dijk, along with several members of the Framer Team will be answering your questions throughout the day.

We are happy to answer any questions you have about the new Framer or Auto-Code. Or maybe you have questions about why we built Framer, how it works or just generally about tools or design startups. Feel free to ask us anything!

We'll start answering your questions on April 19th at 9am PST.

53 comments

  • Matthew BlodeMatthew Blode, over 3 years ago

    Hi Framer team, First off I'm going to say that I haven't bought Framer Studio and I just got the beta after you released auto-code. It is incredible! The learning curve is relatively steep but after the 8 hours of the trial was up, I had the hang of everything.

    1. What are the benefits of Framer over flinto, principle, and the the myriad of new prototyping tools popping up every second week?

    2. Is $120 worth it for Framer studio when Framer.js is open source?

    3. Is framerJs' auto-code intended for designers to not use sketch or Photoshop but rather to visually design entirely within Framer?

    4. I see a couple of months ago that you made Cactus and Blueprint free. What else does the team work on now? Is it exclusively on Framer studio?

    5. What tips/guru life lessons would you give to a 17 year old in his last year of high school?

    6. Is a college degree necessary for getting a job at Framer or other similar companies?

    Thank you so much! I love your incredible software! (You don't have to answer all of them if you don't want to)

    19 points
    • Jorn van Dijk, over 3 years ago (edited over 3 years ago )

      Hey Matthew, glad to hear you like Auto-Code. Let's have a look at your questions.

      1. Different tools serve different purposes, they all have pros and cons. I like that the design tool landscape finally offers alternatives. Try them all and see what works best for you. In terms of benefits vs other tools, learning curve vs flexibility comes to mind. Framer has a bit of a learning curve (code) but has virtually no limit as to what you can achieve. Invest a bit in it and you’ll get greater results back as you progress in coding. Other tools offer a lower learning curve, but are limited by the UI as to what you can build.

      2. Hell yeah! The Framer Library is what drives everything, but you’d miss out on Auto-Complete, Auto-Code, Direct Manipulation, Docs, Error Handling, the list goes on.

      3. Not entirely. But we do think that it offers a nice alternative to the very basics of those tools. Quick example: if you want to design a mobile lay-out, you should probably consider how that looks across devices. That’s relatively easy with Framer. You’d just set the width of an object to the width of the screen. And then switch devices to see how it looks.

      4. We’re solely focussed on Framer.

      5. Assuming you want to do design: make as much as you can. Figure out what you love doing and then do that, forever.

      6. Nope. The only thing that counts is your work and what you can do.

      For sure! I did end up answering all of them. Hope its insightful for you.

      6 points
    • Koen Bok, over 3 years ago

      Also for 5, my favorite tip is: start many side projects and at least finish some. Preferably with other good people.

      4 points
    • Benjamin den BoerBenjamin den Boer, over 3 years ago

      In addition to #5 — surrounding yourself with the right people who can (and are willing to) help you grow can be tremendously valuable as well. :-)

      3 points
      • Koen Bok, over 3 years ago

        Yeah to make this more practical, and having worked at startups and big tech, there is a big difference.

        In a great startup you learn on a deep and personal level, almost like an apprenticeship. You will get more honest and insightful feedback over a long timeline of multiple projects.

        In big tech you learn a lot of small bits from many different people, it's more up to you to turn it into great work.

        1 point
    • Edwin van Rijkom, over 3 years ago

      Re. 3, we think that code is a very powerful tool in the hands of designers, but tweaking plain layer and state properties is much easier when done through direct manipulation, or using a property panel. So it felt like a natural next step to start exploring this direction further, trying to merge the best of both worlds.

      1 point
  • Daniël van der Winden, over 3 years ago

    Is Ben's dancing really that bad?

    8 points
  • Florian PnnFlorian Pnn, over 3 years ago

    Hi guys, First of all I'll say thank you. Thanks for your work that push the design industry forward. After playing with Auto-code one question came : Why didn't you integrate a text layer in this release? I understand that it requires a bit more work but the upside of it would be amazing.

    I'm mainly working with real-data nowadays and plug APIs within Framer to generate content. But customizing text isn't the easiest task through code.

    Is it something you plan to iterate on it and give even more power to Framer?

    7 points
    • Krijn Rijshouwer, over 3 years ago

      Hey Florian,

      Thanks man, happy to hear that you like what we're making!

      We haven't launched a TextLayer Component in the Auto-Code release because we want to make Auto-Code better one step at a time. Doing text editing right is pretty complicated and it is definitely something we want to get totally right once it's in there. It is on the roadmap and up soon though, so it won't be long until you can easily edit and use variable text in Framer.

      3 points
      • Jorn van Dijk, over 3 years ago

        What Krijn said. Working with text in Framer is far from great. We'll tackle it soon (cleaner syntax first) and then onto better alignment and layouts.

        4 points
  • Josh Heyer, over 3 years ago (edited over 3 years ago )

    I just bought Framer. The new auto-code feature is great and the ability to modify elements right on the canvas is awesome. Thanks for all the hard work, well done!

    1. Will Framer include something like a view controller component in the near future for managing views and transitions out of the box or is that something you feel should should be developed by the one prototyping?

    2. Are there more out of the box components like the scroll component and page component coming in the near future?

    3. Framer has a higher learning curve compared to other prototyping tools (because it's more powerful), but why does it have the shortest trial period?

    4. Will framer's code view always be a single document or will there at some point be a way to break out code into multiple files?

    5. Would you consider hosting the framer community forums outside of Facebook for those of us who don't want to use Facebook simply to be apart of the community? Something like Discourse.org.

    4 points
    • Koen Bok, over 3 years ago (edited over 3 years ago )

      Thanks Josh!

      1. We have some plans for this. We won't be as optimized as InVision for this anytime soon, but we do think we can get a lot better at it. And we think the combination of simple flows and specific hi-fi interactions can be very powerful.

      2. Yes. I can't really announce anything, but we're basically looking at the most popular modules people make and slowly adding them to Framer if they're useful to enough people.

      3. It's 8 active hours of actually using the app (in the foreground, Mac active). But it's pretty arbitrary and we're happy to change it if more people feel like it's too short. You can also alway email us if you need more time (or even can't afford it).

      4. We will introduce a way to better organize your code fairly soon. But probably not like you expect :-)

      5. We did, but moving a community is though and the one on Facebook works really well. But I can totally understand if you don't want to use Facebook for it (or at all). You can always lurk at the public archive.

      3 points
  • George Kedenburg IIIGeorge Kedenburg III, over 3 years ago

    howd you guys create the best internet community ever?

    4 points
    • Koen Bok, over 3 years ago (edited over 3 years ago )

      I know what you want to hear, and you totally deserve it too George: people like you.

      We get this question a lot, and it's easy to answer, but unfortunately not a silver bullet. You just start a community, build something people like, and hang out there every day to answer every question.

      Your answers will help foster a culture that will attract people like George and many others who happen to enjoy talking about design innovation and helping out others.

      Also, seeing people go from not understanding programming to using it everyday with a few weeks is very rewarding.

      5 points
      • Noam ElbazNoam Elbaz, over 3 years ago

        I was shockex when I realized that some of those people answering my questions were the actual framer team

        2 points
    • Jorn van Dijk, over 3 years ago

      Be kind, patient and helpful. And have GK3 by your side.

      2 points
  • Account deleted over 3 years ago

    I love that you guys are on the forefront of prototyping tools/technology.

    Where do you see Framer in the next 2-3 years? Do you think design and code will eventually converge as we have seen the new Framer and more so with tools like Deco and Nuclide coming into the picture?

    2 points
    • Koen Bok, over 3 years ago

      That is very hard to predict, but we have a few ideas:

      • We're betting that code is a great tool to efficiently express interaction, animation, physics, etc. But we'll have to invent new ways to use code, make it even more accessible, and find a balance with things that are easier to do with for example direct manipulation.

      • We think that the above will also naturally occur. In design, but any profession really, applying code won't make you 10% better/more efficient, but 10x. Especially younger designers don't see this whole code/design argument and will just pick both up. Also see Josh's milkshake tweet.

      • Just like a division of tools emerged for print with Photoshop, Illustrator and InDesign, a division of tools will emerge for interactive. It is hard to predict how this exactly will play out, but I think interactive is going to be a bit more, and visual a bit less important then today.

      • But honestly one of the easiest predictions is that the meaning of being a designer will change faster and faster. We're still trying to figure out how to do interactive and animation design, but the VR goggles are already shipping. And if you thought going from visual design to interactive design was a jump, brace yourself for VR design or whatever other platform that will arrive faster then you think, changing everything we know about design.

      • I think Deco and Nuclide are awesome tools and pretty similar to Framer, but trying to solve things from the production perspective. There is a lot to do between Sketch and XCode, so I'm happy they are here to innovate.

      4 points
  • Alec SibiliaAlec Sibilia, over 3 years ago

    Hey guys, thanks for taking the time. Let me start by saying that as a designer who can write code, so far I'm really enjoying learning Framer. It's been a great way to prototype components quickly without having to set up a dummy app or dirty an existing one. I only have a few questions so far...

    1. Why CoffeeScript? (ES6 would be my dream)

    2. Any plans to allow editing SVG elements' base properties (fill etc.)?

    3. Where do you see Framer 3 years from now?

    2 points
    • Benjamin den BoerBenjamin den Boer, over 3 years ago

      Hey Alec! Thanks — this is always nice to hear. Let's see..

      1. We initially chose CoffeeScript because we believe it has a lot of advantages for people new to scripting: its syntax is relatively flexible, you can omit curly braces, brackets etc. which can make it easier to scan and learn. Writing things like functions and loops is also a little simpler. Basically, we hope it makes it easier for people to start with.

      2. Well, we're exploring SVG layers, yeah — and there's already a lot you can do with SVGs in Framer. This is something that could happen.

      3. Hehe, this is a tricky one to answer. In general, there's still so much more we can do to improve Auto-Code. Everything from making it easier for people to start with Framer, to implementing more advanced / future design tools and components, to improving the sharing experience, etc... there's a lot left to explore. And 3 years is a long time! :-)

      2 points
      • Jorn van Dijk, over 3 years ago

        Short answer to 3: become the best code based design tool. There are so many design problems we can solve with the right mix of code and interface.

        1 point
  • Kenny Chen, over 3 years ago

    Hi Framer team!

    Great update and awesome new logo. Would love to hear the thought process that went into creating it.

    Keep up the good work!

    2 points
    • Benjamin den BoerBenjamin den Boer, over 3 years ago (edited over 3 years ago )

      Heya Kenny, cheers!

      Well, the short story is: we didn't have a logo, only an app icon that we repurposed. So we set-out to start exploring a logo that we could use in more varied contexts (think prints, shirts) and translate it to an app icon later.

      As for how it turned out: we wanted it to feel modern, and to resemble an "F". Playing with geometric shapes made sense, and we figured we could use the primary colors of our previous app icon in the logo too. As for the new app icon, we like that it feels a little like an evolution of our previous one, while being a tad fresher. :-)

      2 points
  • Rhys MerrittRhys Merritt, over 3 years ago

    First off, you guys are nothing short of amazing! Thank you so much for such a great contribution to the industry!

    I would love to know if there are any plans to include a feature which allows Framer to bridge the gap between coding / designing prototypes with CoffeeScript, and handing the developers in my team some copy pasta in their language, whether it's Java, Obj-C or Swift.

    While I don't think this is a critical feature, it would definitely be a 'nice to have'.

    Thanks!

    2 points
    • Benjamin den BoerBenjamin den Boer, over 3 years ago (edited over 3 years ago )

      Hey Rhys — thank you! Much appreciated. Let's see.

      There is definitely more we can do in terms of exporting to production or to different platforms. Things like animation values (spring curves) and the like. This is definitely something we'll explore further, yes.

      4 points
      • Jorn van Dijk, over 3 years ago (edited over 3 years ago )

        What Ben says is true, we have ways to go to make exporting certain pieces easier (spring values, maybe assets or state properties even). But we do look at Framer as a code-based 'design' tool. And a design mindset is very different then an engineering mindset, if that makes sense. Oversimplified example: when you're designing something, you're thinking about how it looks, feels and behaves. When you're engineering something, you're thinking about loading times, data storage, etc. Again: oversimplified, but we do think that while Framer is rooted in code, it is still very much a design tool you use to tinker around in code. Not so much produce it.

        4 points
  • Zack Rabie, over 3 years ago

    Hey Framer Team! I'm quite new to prototyping, but not new to code so this seems like a good fit for me. What are some good resources to learn the ins and outs of Framer?

    1 point
    • Floris Verloop, over 3 years ago

      There are tons of resources out there. To get up and running with Framer I recommend starting with our learn pages. If you want even more, browse our collection of handy resources. Lastly, make sure to visit our Facebook group regularly, there are a lot of smart people there who’ll happily help you out. You can also find a lot of shared prototypes here, I’ve personally learned a lot from skimming through other peoples’ code.

      2 points
  • Raffaello SanzioRaffaello Sanzio, over 3 years ago (edited over 3 years ago )

    Hey guys, Thank you for all the work you're doing!

    Any plans to offer a Private Sharing feature?

    Thanks!

    1 point
    • Koen Bok, over 3 years ago

      Yes. We have plans to add more functionality to shared prototypes and improve their presentation. But we'd also love to offer companies a way to host them themselves with their own security standards, while still keeping it as easy as a single click.

      That said, the current url's are completely random and very hard to guess. Dropbox links work the same way.

      3 points
  • eryk orłowski, over 3 years ago

    Is there a plan to include Sketch/Photoshop imported objects into Autocode feature?

    1 point
  • Sadok Cervantes, over 3 years ago

    When will you fix the bug with the new Symbols in sketch? Where the overrides don't import properly into Framer, and the default value is shown. Thanks!

    1 point
  • Raphael Lopes, over 3 years ago (edited over 3 years ago )

    Hi guys, first of all thank you for making Framer a better tool every day.

    1. Although the new "Auto-Code" has greatly facilitated the creation of prototypes, I still see many designers give up Framer because of CoffeScript. For many designers, this is a completely new universe (code) and therefore most often causes fear. I wonder if you have something extra in mind (future updates) for this barrier will become increasingly simple for designers who don't have any code skills.

    2. As I said above, I still see many designers afraid to try Framer because of code. This is the image that was created (Framer = very difficult because of the code). Of course it is not, but many designers still think that way. So, it would be great if, somehow, you try to create small video tutorials to learn tips and tricks on Framer, from basic to advanced. I know there are many good courses around the Web, but the best are usually paid. And it ends up creating an extra barrier for many people who want to learn, since the Framer is not free. And I know that the documentation on Framer website is really great (thanks for that!), but I still see many designers completely lost and disoriented to have to read this type of document (this is not common for many designers). So I think some kind of tutorial (videos or something) done regularly help many designers to lose your fear and give a chance to Framer.

    Thank you and congrats, guys!

    0 points
    • Rhys MerrittRhys Merritt, over 3 years ago

      I feel like this question sort of misses the idea of Framer.. Code is what makes Framer so much more powerful than any other prototyping tool. Of course it would be great to have something more 'user-friendly' so that many other designers get into using Framer, but in doing so they would sacrifice so much of the power that using code gives.

      I feel like Framer shouldn't be apologetic about the learning curve for designers who are 'afraid of code'... They seem to be going above and beyond to help facilitate this by having Auto-Code, as well as Smart Autocomplete.

      Designers who are afraid of code will eventually come to see how achievable using Framer is, so I hope that the guys at Framer do not sacrifice the power of code simply to make it a bit easier for designers to learn how to use it.

      1 point
      • Raphael Lopes, over 3 years ago

        I partially agree with you. One of the reasons that Framer is so powerful is because of the code, and sacrifice this feature for people who don't want to learn how to code can harm the software. In this point, I agree with you.

        But as we saw with Auto-Code, maybe the Framer team are thinking about other things (like Auto-Code) that might be useful for more designers who don't know how to code feel more confident with the Framer without sacrifice the power of the software, this is my point.

        I don't think you have to sacrifice advanced users to help new users learn about your software. And it would be great if more designers lost your fears with a software that is easy to introduce in a new universe like code, maybe they will feel more confident.

        0 points
    • Brittany GregoryBrittany Gregory, over 3 years ago (edited over 3 years ago )

      Hey Raphael, as someone who was introduced to Framer with almost no experience with code or programming, I totally get the concern about learning CoffeeScript. Continuing to remove barriers to getting started in Framer is a major goal of ours. Auto-Code was a first step, but we will be continuing to work toward this in future updates. We will, however, always be big believers in code over here. The good news is that with a little time, Framer is not all that hard to learn...I’m living proof :)

      Regarding your question about adding tutorials and tips and tricks on Framer, this is in the works! We’re hoping provide you guys some really helpful content in the near future. Stay tuned! Are there any tutorials that you find particularly helpful, from other companies or products?

      3 points
      • Raphael Lopes, over 3 years ago (edited over 3 years ago )

        Hi Brittany, it would be fantastic if I could watch some short and focused videos like this: http://principleformac.com/tutorial.html and this: http://www.pixate.com/education/video-tutorials/.

        The Examples page that exists in the Framer website is very good, but if you don't have experience with code, you'll need to analyze code by code in order to understand and learn how to replicate that example in their own work. Almost always (in more complicated examples) this work takes a very long time and sometimes it's quite complicated.

        IMHO, small and focused videos in small little tips (from basic to advanced) would make me move faster and get more out of Framer! :)

        0 points
  • Joseph Kim, over 3 years ago

    When will you guys support Windows version of Framer?

    0 points
  • Minhaj M.Minhaj M., over 3 years ago

    Any plan to ditch CoffeeScript in favor of your own scripting language?

    0 points
    • Edwin van Rijkom, over 3 years ago

      Hey Minnix - chances are slim that we'll start rolling a custom scripting language unless it would become a technical necessity at some point (maybe to further auto code or something alike).

      1 point
  • Hang Le, over 3 years ago

    Thank you Framer team for producing such a powerful tool to help designers. I've been loving the tool since it came out.

    I'm definitely a power user and my comments might be too specific, but here they are :

    1. In the new version, I've noticed that once I create an image object, I can drag it around in the Preview panel to change the coordinates, however, after I click outside/deselected, I can't select it again from the Preview Panel. It took me and my coworkers some time to realize that we could select the layer by clicking on the handle all the way on the left side to select the layer again. I feel that the experience around selecting the layer could be improved, unless I'm doing it wrong...

    2. My workflow revolves around designing in Sketch and importing into Framer. I wish there were more turorials /code examples that simply do interactions using a Sketch design file - it would help me teach my team and get them to use Framer quicker.

    3. I wish the documentation around Events were more detailed - they only list the event name, not what I'd get in the return function. Some of them have examples, some don't. Many times I have to trace the event object to see what arguments are given and have to guess what each arguments mean.

    4. I've been avoiding using the "share" function in Framer because every time it generates a different link, and I commonly have to get feedback and change them with a team of designers. So I have to keep track of which link is the latest and have to tell people to go to that link - in the end I opted to host the whole prototype myself. Having an option in share to somehow "overwrite" the last link would work better for me.

    Still, you guys have a kick-ass tool. Love it.

    0 points