85

AMA: Framer Team On Framer 2.0, The Complete Product Design Tool

6 years ago from , Content Strategist @ Framer

Hey all,

I'm Asha, a content strategist at Framer.

We just launched Framer Design, a first of its kind graphics tool, built specifically for interaction design work. Draw shapes, create artboards and input text directly in Framer. Our auto-layout and smart positioning technology make responsive design a breeze. When you're done designing, simply switch over to Code and use our one-click functionality to add animation to your design. Then, share your designs with teammates and clients using Framer Cloud's iterative workflow.

Design, code and collaborate in one unified workspace with the all-new Framer. Now that Framer 2.0 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 from 8PM CEST onwards! We're looking forward to hearing from you!

Thanks for all your questions, the AMA is now closed! If you'd still like to leave a comment, we're all ears at facebook.com/groups/framerjs. Happy prototyping!

54 comments

  • Weston VierreggerWeston Vierregger, 6 years ago

    Congrats on the launch! Looks like a truly amazing product, and I'm already big on Framer Studio so I can't wait to check this out.

    My question is: With Sketch already so deeply ingrained with studios already, and with Sketch being a first-class citizen in Framer, do you plan on making designs made in Framer directly transferrable out to Sketch? With the new file format in Sketch, it seems to be open to this sort of thing - but obviously the code can't follow the design... The reason I ask is my team is essentially 100% Sketch, with homegrown toolkits and plugins already. But I'd love to be able to work in Framer Design as well, and export a Sketch file.

    17 points
    • Rhys MerrittRhys Merritt, 6 years ago

      100% agree with this.

      My concern is that I will be creating great prototypes in Framer, only to have to replicate them in Sketch so that I can keep my team updated with Zeplin / Abstract

      4 points
      • Jonathan SimcoeJonathan Simcoe, 6 years ago

        I hope they evolve Framer to supplant Sketch as the primary design tool. Imagine all your designs versioned in diff-able code snippets.

        2 points
    • Aiden Bordner, 6 years ago

      Sketch is the standard at the moment, but it's only been so for a short number of years. Big design teams were still switching away from Photoshop less than 3 years ago.

      It was the first of its kind that solved the right needs for designers—vector-based, simple artboards with web-native layouts, awesome export support for multi-size output, etc. But as the industry has evolved in more tools, Sketch has increasingly become bloated, bug-ridden, and unreliable. I'm more than happy to see someone step in with an attempt to replace it. In this industry, I feel becoming stuck with a particular workflow is foolish—there's always going to be better tools next year.

      3 points
      • Weston VierreggerWeston Vierregger, 6 years ago

        Correct. But the reason I ask the question (and sure, I probably already know the answer unfortunately) is that even if I want to use this tool right now, I can't. I can't use it because everyone else I work with uses Sketch.

        Edit: To be super clear, if Framer Design had the ability to push Sketch files out the same way it pulls them in then you'd probably see adoption skyrocket immediately.

        1 point
    • Koen Bok, 6 years ago

      With Sketch’s cool new file format, we definitely could. But generally, it’s pretty hard to get two design apps to render in exactly the same way. Especially when eagle-eyed designers notice every pixel :-) On top of that, Framer is browser-based and has different capabilities than Sketch (for example, we don’t have grouping). Framer Design was built as an alternative to Sketch, as a way to express graphics especially for interaction work, with a focus on hard problems like layout and hierarchy.

      So I don’t think we’ll be focusing on integrating Sketch and Framer Design (or Figma or Photoshop), but rather on making Framer Design better and better.

      18 points
      • Weston VierreggerWeston Vierregger, 6 years ago

        That's fair. Thanks Koen.

        0 points
      • Brian HintonBrian Hinton, 6 years ago

        The main concern I have is importing Sketch assets into Framer. Until something like redlining (colors, font, etc. re. Zeplin) exists in Framer Cloud I'm going to have to continue to use Sketch.

        1 point
      • Timur NurutdinovTimur Nurutdinov, 6 years ago

        Hi Koen,

        I was investigating the opportunities of Sketch importing with Framer Inventory and would like to continue exploring. If there is a kind of API to create objects in Framer Design, I will definitely take a look.

        Even the ability to sync back from code would be really handy!

        1 point
  • Koen Bok, 6 years ago

    Hey everyone! Jorn and me will be here for the next hour or so! Let's go!

    11 points
  • Raffaello SanzioRaffaello Sanzio, 6 years ago

    Any future plans to be more flexible on the prototyping side and not limit designers to use CoffeeScript?

    I love Framer Studio, but I've stopped using it because I'm now prototyping in React (Web/Native). I'd love to do that directly in this app, and even be able to use Airbnb's React-Sketch.

    Thank you, Framer Team!

    7 points
    • Koen Bok, 6 years ago

      For sure. We have been investigating a switch to ES6. JavaScript is just omnipresent and while it might have some downsides (like looking more intimidating), we actually believe it will be easier to learn and a worthier time investment in the end.

      18 points
      • Sky WinstonSky Winston, 6 years ago

        Definitely a +1 for ES6 support. ES6 has so many of the features that made Coffeescript a great alternative to the Javascript of old. The syntax for Coffeescript has a nicer aesthetic IMO, but I would prefer to write prototype code using the same syntax I write my production application code in, as one less context switch is always a huge win. There is also so many great (and free) resources on the web for learning ES6.

        4 points
        • Andric ThamAndric Tham, 6 years ago

          +1 for ES6 support. Especially if Framer 5 is going to adopt Preact, I prefer sharing a consistent abstraction with my developers (we do almost all of our apps on React now).

          0 points
  • Renato de LeãoRenato de Leão, 6 years ago

    Despite being complementary tools, there's really one thing that I like more on Sketch than Framer: the pricing model.

    <disembosom>

    I have already so many monthly bills to pay and so little money in the bank... monthly subscriptions was the thing that make me move away from companies like Adobe in the first place.

    I'm not a typical UI/UX designer and currently i'm spending most of time at text editor. But I'm a curious fella and buying a subscription for a design/prototyping tool is a big commitment for me because I don't know if I'll touch it in the next 3 months or so. (No I don't have 14 straight days free to immerse myself into the tool who has that these days?)

    I know I can subscribe for a month and unsubscribe after but damn... that process has friction, bores me to death and I know that I will forget to cancel it and will loose money so I just don't do it.

    Bought Sketch, Affinity products & Flinto just due the simple fact that is a one time payment. Bam! I Can dedicate my time to them whenever I want, at the weekends or some time off... And if i want the new shinny features, I'll gladly pay the upgrade because i'm already institutionalised.

    </disembosom>

    Don't get me wrong, I work at a startup, I know that your target is not "curious fellas" and recurrent revenue is a good decision, business wide.

    Shit my rational persona is back. Keep pushing the industry forward!

    5 points
    • Pedro Laguna, almost 6 years ago

      I feel like the pricing model for Sketch is actually similar to Framer if you look closely.

      We just had to renew all of our licenses for Sketch at the startup I'm working on and we really had to question ourselves if we wanted it that badly. We decided to stick with Version 44.1 for a while and began our experiments with Figma and Framer.

      Of course we will be able to use the current version forever, but if some next update adds something vital to our workflow, Sketch is gonna become a recurrent bill of our company.

      1 point
      • Renato de LeãoRenato de Leão, almost 6 years ago

        Pedro, well sort of... as you said at least you can still use your current version forever. That's how it was before "monthly billing software" become cool/standard. I never expected to buy once and get infinite updates forever. (Adobe CSx times)

        We (my startup) bought our license when sketch was on version 2x, they have updated their pricing model last year or so to that "1 year of updates", which is still a good deal IMO.

        My only "fear" is that big updates/features become scheduled relative to one year after the month with more purchased licenses, which is a major setback for product evolution, but an understandable decision from a business perspective. But hey, that's just me and my conspiracy theories ahah :p

        PS: We're dealing with the exact same question about renewing license at my company as I write this words, for now we're gonna stick with current version and leave the rest in Sketch's team hands: to produce awesome features that make us do the renewal. That's how a user-business relationship should be IMO.

        1 point
  • Luis La TorreLuis La Torre, 6 years ago

    Do you guys see the Design part of the Framer replacing Sketch or Figma? I can see using Framer almost for 80% of my prototyping needs without Sketch.

    5 points
    • Spencer BittleSpencer Bittle, 6 years ago

      I think it is very obvious that Framer intends to solve the ALL IN ONE TOOL problem. Which is consistent with them saying this is a BOLD move. Move over Sketch, Figma, XD, Invision etc.. Framer isn't here to play buddies or share screen time. I think what they put out this morning has set the bar even higher.

      Well done.

      8 points
    • Koen Bok, 6 years ago

      I'm happy to hear that, and it reveals some of our secret plans :-)

      But Sketch and Figma can do a lot of things that today’s version of Framer Design cannot handle. If you want to draw advanced shapes or even need a line tool (sorry) you’ll want to use any of these advanced graphics tools. But we believe that most of the design work done today is not that. It is more about (responsive) layout and interaction. And that is what Framer Design has been optimized for in this release, and will evolve towards.

      7 points
  • Nikhileswar JangalaNikhileswar Jangala, 6 years ago

    Hey guys,

    I always get excited with every Framer release. You make an awesome product. And when I see your release videos/ website I always want to start working with Framer.

    But when it comes to workflow, as a designer with minimal or no coding, it is not very intuitive. I think you can make more tutorials showing end to end work flows (highlighting all new features like flows/ modules etc... their advantages and all). May be if we get an idea of solving simple things end to end in Framer.

    Thanks :)

    3 points
    • Benjamin den BoerBenjamin den Boer, 6 years ago

      Hey! Thanks for your kind words. We hear you — coding isn't the easiest thing to get started with. We really hope to lower the barrier of entry with this release. Also, have you seen our new video tutorials? They’re great for getting familiar with the basics. https://framer.com/getstarted/tutorials/

      3 points
  • Nick MNick M, 6 years ago

    Great Direction! There are times where I would like to create a simple interaction to show stakeholders, and a full design in sketch is overkill. I think this solves this problem well

    that being said. I dont see asset exporting. It makes more sense to just evolve my designs in Sketch and import them in, rather than making anything of fidelity in Framer as I'd have to remake it for production.

    My question is, what is the prime use case? did i miss the export button?

    3 points
    • Koen Bok, 6 years ago

      The main use case now is to express and share interactive ideas. But asset generation is definitely something we'll be thinking about.

      2 points
  • Emil WidlundEmil Widlund, 6 years ago

    Thanks a whole lot for this amazing update. You're a brilliant team delivering super sharp features.

    I'm curious however, will we ever get a Windows client and if that's the case, when is it happening?

    Have a nice day; and remember... Be proud!

    2 points
    • Koen Bok, 6 years ago

      Hey Emil. We're big fans of what Microsoft is doing lately, so I would actually love to. But we're still small with limited resources, so I can't promise when.

      0 points
    • Jorn van Dijk, 6 years ago

      I agree with Koen, Microsoft has been doing really great lately.

      0 points
  • Aiden Bordner, 6 years ago

    Hey guys—really love the initiative to try and build a better mousetrap. While I assume I'm in the minority, I've felt for some time that Sketch is increasingly negatively impacting our workflow by requiring separate environments/tools for the end-to-end process (InVision, Zeplin, etc.). Also, it's just super buggy and slow at scale.

    My question is to your intended timelines. Sketch has a huge lead in features (when they work) and it'll be hard to sway designers from the current standard without some parity—things like layout grids, redline spec delivery (or at least Zeplin plugin support), robust symbols, autosave, etc. Adobe got off to a great start with Comet/XD insofar as creating a rendering engine that is, in our trials, an order of magnitude faster than Sketch, but since then feature releases have really crawled to a stop. What's your plan to keep up/surpass the minimum viable product needs for commercial use?

    2 points
    • Koen Bok, 6 years ago

      So I think this might be a faster horse kind of thing, if you know what I mean :-)

      First off, we like to ship fast, so that’s what we’ll keep on doing. But apart from parity, our focus will be more on innovation. Our core belief is that Sketch and Figma are great graphics apps, but most ideas that today’s product designers are working on are interactive. And as you can see from this first release, our focus will be on things like layout, hierarchy, motion and interaction all together in one app.

      2 points
  • Lucas GuarneriLucas Guarneri, almost 6 years ago

    Congratulations on this very exciting launch!

    We've discussed the new Framer Design at the company I work at and what's really missing for us is a component library in order to collaborate easily within our design team (We use Craft by Invision at the moment, it's not ideal but does a pretty good job). I think with Framer being code-based it should be even easier to build re-usable components and avoid duplicates across individual team files.

    Also the second thing missing (which we haven't found anywhere else) is spec automation: turn these components into convenient hand-offs to development teams.

    Are these 2 topics things you're looking into?

    1 point
  • Chris Cacioppe, 6 years ago

    yo guys .. nice work on the product .. thats a big release and im sure alot of work went into it .. max respect to the team!

    im interested in hearing about your product management/design process..

    how do you identify the problems you want to solve? does leadership specify features they want the team to build? how do you prioritise them? how do the team (or teams?) work on solving those problems? how do you test and validate your ideas?

    thanks!

    1 point
  • Rory Smyth, 6 years ago

    Congrats on the release. Definitely a step in the right direction. Any plans on abstracting things like animations, states, scrollviews etc out into the design mode? I love the idea of setting up the base layout in design mode and tweaking in code. But what about setting up states and animations in design mode and tweaking their interaction in the code view? Is this something you guys are considering?

    1 point
    • Account deleted almost 6 years ago

      Would love this. The simplicity of Flinto but details of Principle in 1 app. +1

      1 point
  • Cody IddingsCody Iddings, 6 years ago

    Is Framer still focused on app design? Will it start being able to use Angular or React code (similar to Airbnb's new react design tool) ?

    1 point
  • Eric TownsendEric Townsend, 6 years ago

    Exciting release! This is a huge step in the right direction. How do you plan to help design teams manage large projects in the future? Projects with a high number of screens can be quite cumbersome. Other design software has solved this pain point with text styles, layer styles, symbols, and shared libraries. These features help large design teams move quickly and consistently. How do you imagine Framer competing with these type of features?

    1 point
    • Jorn van Dijk, 6 years ago

      Components! This should be huge for a future release. We already have them in Code but just think of the possibilities if you combine a static Design Component that automatically has interaction in Code wired up…

      10 points
  • Maciej ZadykowiczMaciej Zadykowicz, 6 years ago

    Congratz on the release, this is huge! So um guys, right now any objects I add through Code Mode and code property edits aren't reflected in Design Mode. Do you plan on further integrating the two? I love the idea of this but the execution kinda leaves me wanting more.

    1 point
    • Jorn van Dijk, 6 years ago

      Hey Maciej, absolutely! There’s tons of improvements on the horizon for integrating the design and code modes. Can’t really say more because we still have to invent it at this point ;-)

      2 points
    • Koen Bok, 6 years ago

      Same for us. It’s easy to see how these could work better together in the future. And now that we have both, we can start figuring out how, which is going to be a lot of fun. Let me know if you have any great ideas too!

      0 points
  • adrian ioadrian io, 6 years ago

    Congrats on the launch. Having basic design and layout capabilities is great and I can see Framer as my only tool now for creating interactive wires / prototypes.

    Please don't be acquired (i.e. see what happened to Pixate) and looking forward to the windows version (I use both OSes).

    0 points
  • Davo Galavotti, 6 years ago

    Congrats guys, incredible work. I'm still adjusting to the previous update with the new UI.

    My questions:

    1. Seems like the beta channel is not active anymore, something happened? As a community member, where can we request for features or give feedback?
    2. There are lots of improvements for the code section.
      • Quick way to edit external components or to open external modules in new tab, maybe?
      • Quick way to add external CSS/JS libraries.
      • Quick way to edit or save pieces of code as modules.

    I love the effort on making prototyping more accessible and simple, but there is an incredible value on the community, with lots of new components, what do you think?

    0 points
  • Tyson SoelbergTyson Soelberg, 6 years ago

    Slightly banal, but curious why the 2.0 is apparently using some long ago install date which prevented me from even launching on my home machine. Sort of a bummer :/

    0 points
  • Danaan ClarkeDanaan Clarke, 6 years ago

    Awesome work guys, you can tell a lot of time and effort was put into making this awesome release. I'm curious why all of the screens in the marketing materials are small? Is large screen prototyping less of a focus than smaller screen? And will you focus more on larger screens in future releases?

    0 points
  • Taylor PalmerTaylor Palmer, 6 years ago

    One of the biggest things I have struggled with is bringing SVGs into Framer. Framer Design is awesome, but it doesn't solve that problem for me. Any plans in the future?

    0 points
    • Jorn van Dijk, 6 years ago

      For sure. You can now use the icons tab to pull in SVG’s. You can also drop in external SVG’s straight into Design-Mode. In the future you’ll see us work more on pulling in entire sets.

      0 points
      • Brian HintonBrian Hinton, 6 years ago

        The problem with how it seems that you are importing is that it's frozen. I can't edit the asset. It's nice to be able to drop in an external SVG, but I can only resize it.

        1 point
      • Jonathan SimcoeJonathan Simcoe, almost 6 years ago

        Also I've found that with the material icons I can't recolor the icons in Code to be able to create various icon (on/off) states. Changing the background color just changes the transparent frame and leaves the icon with the fill colors selected in Design mode.

        0 points
  • Connor McCormick, 6 years ago

    Really impressed with this release, great stuff! I'm a long time Sketch user. My current workflow is utilizing InVision's Craft Library/Prototype/etc. w/ Sketch. I don't stray too far from this on a daily basis. There is definitely a lot of power here with Framer, and I'm strongly considering giving it a try.

    Why should I make the switch? What am I missing by not using Framer?

    P.S. I'm not an overly technical person. I very rarely get my hands dirty in code.

    0 points
    • Koen Bok, 6 years ago

      That always depends on where you’re coming from. If you are not already prototyping: you’re missing out for sure. But if you are, you might want to check out how much more efficient you can be with a tool that combines both design and code, deals with layout and hierarchy automatically, and allows you to express ideas in the highest fidelity possible. Code is simpler than you think and well worth learning, but optional. We'll just slowly pull you into it :-)

      2 points
  • Colm TuiteColm Tuite, 6 years ago

    Congrats on the launch guys, I'm consistently impressed by the quality of your work.

    For years now, I've been puzzled by the approach all major design tools have been taking. Sketch, Figma, Adobe XD, Marvel Canvas and now Framer, all function by having the user draw arbitrary shapes on an artboard.

    At worst, this leads to massively inconsistent pictures. At best, beautiful pictures which are extremely limited in their application and ultimately disposable.

    Recently, we've seen huge advancements from Airbnb's React Sketchapp, though this leans heavily toward the technical side. I've always thought Framer were best positioned to solve this problem in a visual way.

    Do you think there is much value in having designers and developers both working on the same production assets? Or do you think there will always be a lot of value in designers working with throwaway prototypes and mockups?

    0 points
    • Koen Bok, 6 years ago

      So I think the question here always is efficiency vs idea constraints. On one hand, you don't want to do double work, so when your prototype is done you don't want to rebuild the parts that are already there.

      But on the other hand you don't want to be constrained by writing production code that is fast, readable, multiplatform, etc in the idea phase. So for now we're optimizing for the latter. Until that changes.

      1 point