Clu Soh

Framer for Web — The best prototyping tool for teams, available for free

Featured
58
Introducing a new browser-based way to create stunning interactive prototypes, no code required.

Add a comment

Replies
Best
Blixt
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
Rick Bakas
@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?
Addison Schultz
@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 :)
Paul Nylund
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.
Benjamin den Boer
@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.
Benjamin den Boer
@paul_nylund You can learn more about Framer Motion here: https://www.framer.com/motion/
Paul Nylund
@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.
Benjamin den Boer
@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.
Addison Schultz
@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...
Julien Zmiro
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 🙌
Vaibhav
I want to try this as I have heard a lot about it on twitter. Now seems to be the right team, as it is free.
Denis Danilov
That's a great release! UI is one of the favorite parts for me, It's a pleasure working in such environment🥳
Clu Soh
Hunter
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.
Rick Armbrust
Congrats on the launch! Huge improvement for product teams that need to collaborate remotely.
Saeed Richardson
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
Is the handoff only for react components and nothing else?
Krijn Rijshouwer
@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.
Sebastian Winther
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?
Koen Bok
@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.
Liana Karapetyan
This is a very helpful tool for early stage startups. Thanks. I believe many will benefit!
Karim Rahemtulla
Might have to send this one to our UX lead!
Greg Wehmeyer
Eager to try, based on how responsive the team is to questions and concerns, which I too may have.
Jatin Chaudhari
Exited to create stunning interactive prototypes using Framer!
Nisarg Shah
Interesting product. Excited to develop prototypes using your product. Kudos to the team for developing Framer for Web
Blake Manzo
So pumped to see this on the web! Congrats on the launch!
Scott Hanford
Wowwwww well done!
Samantha Q
Wow, I could have used this just 20 minutes ago! haha great idea
Prateek Keshari
This will make framer accessible to so many. Super stoked!
JerzyXD
That looks so cool
Yevhenii Peteliev
Wow! It's brilliant. Great job! I can't wait when I try it 🖤 Congratulations!