Framer Web makes collaborative interactive prototyping accessible for you and your team. Watch as prototypes come together quickly thanks to effortless importing, insertable components, customizable Magic Motion animations, and so much more. Plus, pinnable comments and effortless sharing mean you’ll iterate and ship faster than ever before.
Learn more — https://bit.ly/2zL71jO
Start using Framer Web for free — https://bit.ly/2LzOlpQ
@blixt@graeme_fulton Product Hunt delivers again! Just so happened to be ready to prototype a concept. Watched your YT videos to learn the basics. The UI is more intuitive than most tools I've seen with this level of complexity. Nice work!
Still learning. Saw you had a beta app that people were downloading to their desktop. What's the difference between that and this free web based version?
Also, now that I've got some work done, is my design auto saved? Do I need to save anything to make sure it's not lost?
@rickbakas The main difference between the two is that the desktop app gives you more flexibility with code (you can work in the project folder, install npm modules, other stuff around this scope), but the web version introduces multiplayer editing and collaboration + persistent share links.
They work well together hand in hand also, as you can download web files, and upload desktop files to web. You can find more info here: https://www.framer.com/support/u...
Framer Web auto saves, so no worries there :)
I still don't understand the point of Framer... Why would I want to import React components but not export? What's the point of programming any animation in Framer if everything has to be rebuilt again? The agency I work at has trialled it, due to its support for interactive maps, but we found it to be completely unusable and actually counter-productive due to its extremely handicapped handover process.
@paul_nylund Hi Paul. In Framer Web, you do not need to import React Components or write any code to create expressive interactions and transitions. With new tools like Magic Motion, you can visually define and tweak animations and preview it on your mobile devices, too. If you’re done, the animation curves and code can be used in Production via Framer Motion and they map 1:1. Framer Web is essentially a completely new product with different workflows for Handoff, too. Hope that helps a bit, happy to answer more questions.
@benjaminnathan I don't want to have to import any code to create animations. The problem with Framer Motion - I love Framer Motion and use it on my own portfolio site - is that it is separate from the Framer Library. This makes it extremely tedious to convert Library components to Motion components. Is there some strategic reason for them not to be the same? I'm both a front-end developer and designer, so why is it so confusing? I really want to love Framer.
@paul_nylund You don’t have to! You can create all of your animations visually, without the need of any code in the process. Should you need want to use your animation in production, you can copy the Motion code directly from our Handoff panel.
@paul_nylund You can see a quick example of that here :) https://twitter.com/AddisonSchul...
Also, we're building out the API for Framer Motion to do some seriously magic stuff, including applying the magic motion transition and element transitions in code using really easy syntax. Here's a preview: https://twitter.com/mattgperry/s...
Super excited to see Framer coming to the web! I rarely saw a product so nicely designed: The UI is gorgeous, the onboarding seamless, and I can now share my prototypes even more easily. Congrats team 🙌
From the first version of Framer starting as my prototyping tools, then now from desktop to web. Exciting to for the future how can we deliver high fidelity prototype will less code or maybe no-code. Seem it’s the best combination with our favourite design tool Figma 3.0 . Collaboration is the key in the product development circle, creating interactive prototypes and gather all the feedback and team together is helpful in the design critique process.
Can anyone from Framer help with this answer?
I've always appreciated and marveled at tools like Framer, but have always wondered how beneficial they can be after the prototype. If all of my apps are built in Vue.js using a UI framework like Vuetity, how can I export (or handoff using the Framer taxonomy) into a format I can use?
I could be wrong, but it looks like I'm left with a very interactive prototype that I can't easily port to something I can wire up for my app. If there were a way to easily do this, I'd sign up in a heart beat.
(Forgive me if this does exist and I just don't know, and seems I've never gotten an answer.)
@saeed_richardson Hey Saeed! You can actually also copy css, export images and extract animation values. The animation values are optimized to work with Framer Motion (our production animation library for React) but should be translatable to animation libraries for other frameworks.
Looks good! I'm curious though: ?makers, is this a step away from being a fully fledged design tool like Sketch or Figma, and back towards being mostly a prototyping tool? Or would I want to both freeform design and prototype in Framer Web? What is your recommended workflow?
Also curious about the step away from React. I was hoping that Framer would evolve to a tool in which I could design with production grade UI code-components; guess this dream is dead now?
@sebastianwinther the main difference between Framer and visual tools is that we believe all design should be interactive so we focus on prototyping instead of images. We play very nice with Figma and Sketch out of the box.
We can render any React component on the canvas and you can build them yourself, but we're absolutely also on a mission to make Framer as easy as possible for anyone by allowing you to compose everything visually on the canvas and build any transition using Magic Motion, no code required at all.
Framer