115
It’s time to meet Framer X, an advanced interaction design tool that’s easy for just about anyone to use. (framer.com)
almost 5 years ago from Krijn Rijshouwer, Product Designer at Framer
58 comments
Michael Dorian Bach, almost 5 years ago This is a sad announcement as a fan of Framer who was excited about where it was heading and the problem it was originally trying to solve. With the release of X, it's no longer a tool focused on the ideation and prototyping stages of design. This part of the design process is a more difficult problem to solve. Tools that help designers unlock new ideas versus recycling old ones.
Framer before X had some amazing ideas on how to make a general purpose interaction sketching tool. They took the right approach. Use a general purpose logic model that code brings but slowly remove it's complexity through smart UI, simplifying the language etc. Continuing to abstract. So much potential to go further when the output doesn't need to carry the weight of being "production" code. And you focused on those 3 things. Framer was the first tool to get as close as possible to a free form prototyping tool for new and fresh ideas.
With Framer X, they are now exiting this space and clearly focusing on the hot flavor of the month which is design systems and collaboration. It's sad to see Framer abandon it's original unsolved mission of "Prototype Anything" and become another "glue" tool for large design teams. It make sense financially. A lot more money selling seats to design managers with big teams then focusing on prototyping and ideation which is more in the market of an individual designer.
Sure it's now dead simple to make the same boring interaction that every tool already lets you do (Page transitions, scrolling, etc) which I would argue doesn't even need to be prototyped anyways.
It's now visual screen design tool (Sketch, Figma) backed by a symbols / component library that you can edit using React and share components via some cloud hosting. And if we're working in mobile native or not React? Then we really just have a visual design tool with a fancy components library.
Framer went backwards in search of a holy grail that will never work - Design tools that aim to maintain production code. Its production code for a reason. The whole designer <> engineer thing has been tried for years. I worked at Microsoft in tooling and we aimed for the same thing. Crashing and burning because designers are not engineers.
Feels like after every release, Framer wants to reinvent itself. I kind of wish it stood tall and continue on the march of solving the unsolved problem in digital design. - Helping creative people move beyond screen design.
In the words of Koen the 3 things he wants Framer to become -
- Framer X for your design system
- Framer X as your main visual design tool (Good luck)
- Framer X a private store to collaborate in a company
RIP Framer, Hello Framer X. Prototyping was sooo 2016.
Itay Abraham, almost 5 years ago I think the prototyping tool you're looking for already exists.
You can create anything you can imagine. New kinds of interactions, freedom to create anything that comes to mind.
But it has a steep learning curve just like any powerful tool.
It's called a text editor and knowledge of HTML, CSS, and Javascript.
Weston Thayer, almost 5 years ago IMO, Framer made it wayyyy easier to prototype using code than starting from scratch with HTML/CSS/JS. Sure, it's easy to get a basic webpage up, but what happens when you want live reloading? Need to find and add tooling. What happens when you want to be able to drag things around the screen? Either find a library or understand the web's low-level interaction APIs.
Framer abstracted all of that into an IDE and API that was very easy to pick up and use compared to a "from scratch" approach.
Michael Dorian Bach, almost 5 years ago Not the same at all. Framer was way easier. Especially with the last release with the design surface. The way you mentioned above might actually be easier then the new Framer though.
Lucian .es, almost 5 years ago
The only constructive comment here. Thanks for taking the time to enlighten some of us and hope Framer gets a clear vision without trying to reinvent themselves every couple of months. This might be what they were looking for, we just have to wait and see what they actually deliver.
Mike Stevenson, almost 5 years ago
This seems very thought out, my question to you would be why you think they’re abandoning their original product? From what I gathered, this is just a hefty enhancement in that it allows you to design more robust interfaces inside framer and blur the line between a visual tool and code. In other words, you can work visually or you can work in code if that’s your tool of choice. Is framer x removing the current ability for complex and new interactions?
Did I miss the point? It’s very possible as I’ve not used framer before, just principle and flinto for interactions. There’s been a lot of positive feedback from design teams at great companies who saw the presentation from the people over at framer.
Michael Dorian Bach, almost 5 years ago Because moving to React is completely opposite of what the original goal was. Additionally, they completely abandoned the code editor. Want to try to "sketch" something? You have to now deal with the weight of React and even edit the code in a separate editor and import the component in. That's a workflow more a kin to building what you already know you want to build (final components) versus trying to figure out what you want to make. I would wager the move to React was purely driven by the desire to have this "design store". Reacts component and packaging paradigm lends itself well to this.
We will consider Framer for that aspect of the workflow, but what I'm arguing is its a totally different product now.
Linton Ye, almost 5 years ago This is an interesting insight.
I'd argue though that moving to React is not equal to requiring designers to build "production-ready" components. What prevents you to just build some prototypes, throw them away and rebuild them?
IMHO it's not that much of a workflow shift. You just get a new tool to create elements: code. (To be absolutely accurate, in old Framer, you could create elements with code, but it's just not as prominent as in X)
No matter if it's via direct manipulation or code, you can either build what you already know you want to build, or figure out what you want to make. It depends on the context and your goal. In many cases, code is a more powerful and even more convenient tool for exploring ideas, if you know how to do it.
The bottom line is, you get a new tool at your disposal. You can choose what works the best.
There's definitely added overhead with extra React knowledge requirement and separate editor etc. It's a tradeoff. The question is whether it's worth it.
IMHO the answer is yes. Not to mention the other benefits of knowing React as a designer.
Michael Dorian Bach, almost 5 years ago Doesn't mean it's a bad product. The positive feedback comes from big companies with multi-user design teams trying to maintain design systems. Totally different problem statement.
Sean Chase, 7 months ago I would argue that switching to React does not mean that designers must create " word hurdle production-ready" components. How come you don't just make a few mockups, toss them, and start over?
Andrew B, almost 5 years ago Yup - totally agree. Framer was great for experimenting things that couldn't be done in more limited programs, and especially for games.
Saurabh M, almost 5 years ago Agreed. Definitely a different kind of tool now.
Jorge Martins, almost 5 years ago
I can't find where I've read that, but looks like Framer X was built from ground up and is not a simple update to the current software, it means to me that the normal Framer will still exist. So you can choose not to jump on the X bandwagon. Yes it doesn't solve the lack of focus you're mentioning, but at least they might not kill the existing solution completely.
Jrtorrents Dorman , almost 5 years ago I see your point but I can understand the reason for their new direction.
While framer in it’s current form may be powerful, they only attracted a few small set of designers. Most designers (like myself) don’t want to touch a line of code to make a design/prototype.
I remember subscribing for month just to try it out but I gave up after the first day and asked for a refund.
It makes sense that trying to simplify the prototype/screen design experience to cater for a much wider market.
They’ve good bills and investor money to pay, they can’t keep on catering for tiny market.
Tom Parandyk, almost 5 years ago It's one thing to be able to design with existing React components and another to be able to make your own <= this lets me stay in control of my experience.
It's great to see designers wanting more from the design tools. Dropping hand-off means massive time savings and cross-functional upskilling for all members of the product team.
In that context, FramerX still looks like a prototyping tool (from before launch comms) and code export doesn't sound exciting that much. Code export means that the design/prototype is not the final product, and will eventually fall behind.
Prototyping is different to design in production.
Design in production, or Continuous Design, has way more benefits than any prototyping: - You can speed up your development. - Perform faster revision loops. - Test innovative ideas. - Reduce the cost of design iterations. - Learn how your product really works.
Continuous Design is the ultimate goal for designers who want to make a rapid impact on the final experience the users have.
It took us a while to understand the difference between the prototyping and the Continuous Design (8 years puts every maker in perspective), but design in production is possible today with our new, more intuitive, simplified programming language, called Views.
All this time we've been testing, testing, testing with pilot teams around the world to make sure that our claim stands. And it does. Here's first open source demo app (also in appstores, links in the post) https://medium.com/viewstools/building-an-app-in-views-and-react-part-1-531907dad23f
This summer we will launch our design tools (beta) for designers who don't see coding as part of their workflow featuring first iteration of Predictive Coding.
There is still more to come - flows and state management, git automation, Javascript conventions, custom React components rendering (hello FramerX :D).
Here's more info and beta signup for the curious https://design.views.tools
Andrew C, almost 5 years ago Request to tool makers: Show a variety of project and platforms on your video... not just sleek Apple-esque mobile systems. A web-app in a browser resolution, for example.
David Thorn, almost 5 years ago
Web apps ain't cool. We've known this since everyone jumped to Sketch from Photoshop.
Dexter W, almost 5 years ago now to be fair, going from photoshop to sketch was more than a cool thing.
I was being a little cheeky, but the trendy way of showing off software seems to be showing that it solves problems for mobile, and it has been for many years now.
Dexter W, almost 5 years ago I agree with you. Whenever Framer would release new updates, I would be like..well I design for the web a lot and this is cool but I can't use it.
Tom Parandyk, almost 5 years ago Here's a cross-platform composition model (same components work in React DOM, React Native, plus native-native via Electron) https://medium.com/viewstools/building-an-app-in-views-and-react-part-1-531907dad23f
Here's more info and beta signup https://design.views.tools/
Tim Hoste, almost 5 years ago This looks cool.... but so did Invision studio when that was teased. If it's laggy and slow it will only hinder the design process. Please focus on speed and performance over features so it will help the design process not hurt it.
Ariel Verber, almost 5 years ago
product market fit > performence. but IMO invision wasn't successful in both in this case.
Krijn Rijshouwer, almost 5 years ago We’re so excited to give you a first look at Framer X! It’s now easier than ever to design screen-to-screen transitions using our Link tool. Then simply search and install interactive components from our in-app Store and customize everything directly on the canvas. It’s all React-based, so you can build upon your designs or even pull in production components. Beta rollout begins August 1st.
John Jackson, almost 5 years ago Will the initial beta be rolled out primarily to influencers? I'd be curious to know how large the initial beta wave will be. Really looking forward to trying this out!
Joao Carvalho, almost 5 years ago Is the React code opinionated?
Bart S, almost 5 years ago Still extremely excited to try this out, but also a bit let down. Where I work we don't use React so the code I write in Framer won't be used. I've got some React experience and I've recently switched to Vue for some personal try-out projects. I don't see React being the marketleader (if you could even call it that) in 2-3 years anymore. The code I do write in Framer is useful though, but we obviously have to re-write it so it fits in our production environment. I don't see X changing that. Maybe if you do use React at work it's a game changer but I wouldn't know.
Secondly, and probably most importantly, I don't see our team (even though it's small) switching to Framer for the design-phase. It's something that's been bothering me about Framer for a while even though I do understand the reason behind it. I started using Framer for prototyping/animating by importing from Sketch. It worked great for a long while like that. I don't use it every day but when I open it now I'm always confused by all the new design related stuff that's been added. I don't design in Framer and I don't know anyone that does in my environment, so I'm not going to build our whole design system/component library in there.
But again, I'm still excited to try it out and there's definitely some stuff in there that I'm looking forward to. I kinda like the big competition that seems to be going on between design/prototype tools right now since only good can come out of it.
Mattan Ingram, almost 5 years ago
I have the same hesitations regarding building a whole design system in Framer when so few tools, plugins, etc are available for it the way they are for Sketch or even Figma.
I also am falling in love with Vue, and as much as I am fine with React I like the direction tools like Hadron are going in where they don't tie themselves to a specific framework.
your presentation is amazing. your design tool would probably be adopted by some good amount of power users and will be extremely helpful in the handoff stage. my only problem is that you write it's for everyone. i'm working in a team who develops a native app, it won't be faster for me to design a new screen or a feature than in sketch, won't be faster for prototyping than invision, and won't be faster for micro-animations than principle. it solves a specific problem designers have (handoff pixel perfect components + behavior to react front end developers), and IMO should be communicated this way.
would love to be proved wrong.
Mitch Murry, almost 5 years ago I think Framer X has the code components if needed, but it's now primarily a design tool to tackle Invision and Sketch. Just my initial impressions.
Anthony Short, almost 5 years ago I really don't think it's just for handing off React components. It can do all of the prototyping and interactions way better than anything else out there right now. It can leverage the large React ecosystem that already exists to create just about anything you can think of.
That said, I think it's much more powerful for people that also know JavaScript and React quite well. It reminds me of the Flash days with Actionscript.
Afnizar Nur Ghifari, almost 5 years ago This is just brilliant. Unbelievably excited to try this out!
I wonder Framer handles trying a variety of different approaches to a design by duplicating artboards. In the real world my Sketch or Figma docs never look like the perfect ones you see in marketing websites where every page is done once and linked up into a beautiful prototype. In reality you end up with 5 duplicates of the same artboard with different approaches to a particular component.
I'm waiting for a tool that provides something like artboard "alternates" where I can use the same artboard but switch it out with different versions of the same concept. That way my canvas remains clean and makes it easier to prototype with the various alternates.
Linton Ye, almost 5 years ago This sounds like something possible with a custom component in Framer X.
Only 5 duplicates? Ha.
Account deleted almost 5 years ago I've bought into the notion that Framer is on the right track concerning design tools - however, everything looks good in a product marketing video. This tool is playing with uncharted territory - which is good, but it means that there's ample room for quirkiness.
Nonetheless, I'm excited that Framer is helping lurch design tools towards this direction - it's needed and the obvious next step (in my opinion). I'm skeptically optimistic.
Andrew C, almost 5 years ago I agree—but Framer has proven itself a pretty consistent and reliable deliverer of products. From the video to the "beta by August 1st" specificity there's already a very specific confidence I like about this rollout.
I'd like to give it a try out when it's available.
Stephan Lenting, almost 5 years ago Looks amazing, really useful!
Will we be able to drag multiple images or a textfile to populate a grid? I really love this feature in XD. Auto-updating from a linked source would be even better :-)
Jorn van Dijk, almost 5 years ago Benjamin den Boer (one of our Framer designers) has a grid component working that does this, and then a lot more.
GOOD LUCK, almost 5 years ago
The only advantage of the new Framer X would be if it produces PRODUCTION ready code (this is what I hope for) by exporting a real code for the devs, so they don't have to waste time and recreate our work again.
This is not the case I believe. So, nope, thank you.
Good luck.
Account deleted almost 5 years ago I humbly disagree with this take. I think the major win for a tool like this is the opportunity to use existing React components Framer X that your team/company has produced for product development. This opens up the possibility for designers to create interfaces from the same UI building blocks used in production - meaning that all teams are working from a single source of truth.
This would be huge. Mind-blowingly huge.
So, yeah, your prototype won't be production-ready. I think that's a safe assumption. However, the ability to design an interface with the same UI components developers use to build them will have a profound impact on how teams work together to make software.
Jake Haugen, almost 5 years ago
I totally agree, this would be incredible. Being able to copy and paste code in and generate a symbol that synced across multiple design files would be a game changer.
You raised a valid point, agree with that and I see the benefits in the scenario you described.
I still don't see myself and my team to use framer for design (to slow). Also, don't see framer as a THE prototype tool (99% cases) for a client's work, where the speed is the real factor (I will use probably Flinto instead). But this is my perspective (agency work), I guess product based teams will benefit from framer a bit more.
PEACE!
Patrick Westwood, almost 5 years ago
I try not to get too excited about new tools, but this looks very promising.
Jonathan De Heus, almost 5 years ago I have to say that that this looks amazing. The private component store is really going to make a difference for enterprise teams. I'm curious, does this component store support version control?
Michael Dorian Bach, almost 5 years ago Hope they keep the old Framer around. Framer X might as well be called something totally different. Maybe have 2 product lines. Framer (For rapid ideation and prototyping) and Composer (Or something along those lines for production design and collaboration.)
Account deleted almost 5 years ago Stupid question: Does this produce production ready code?
Anthony Short, almost 5 years ago From what I've seen, I doubt you could just drop the components into a code base and you'd be good to go. It looks it might work better the other way around: Pulling in your teams React components to use them in your designs.
Account deleted almost 5 years ago Ah okay, cool. Thanks :)
If you pull in components from a code base and make visual changes in framer, will framer output the newly styled code into the original component or will it be separate?
Andrew C, almost 5 years ago This will be a hard question to answer. One squad's unreadable rewrite candidate is another squad's production ready code.
If it exports in React components they have a shot at least?
Lincoln Mitchell, almost 5 years ago In my view, the best way to do UX work is iteratively and within a multifunctional team. If that team is too Design, Developer or Business focused. It's gonna turn out bad.
For individuals to work well with each other, they will need overlapping skills and tools, process etc...
So as the UX Designer on this team, I'm looking for Framer X features to be: 60% Design features 20% Developer features 20% Business features
Does it have that split? Looking forward to finding out.
Kris Kim, almost 5 years ago
Maybe I'm missing something but does this still allow making prototypes by coding? If so, using React? Or only exporting codes?
Gavin McFarland, almost 5 years ago
So... can I now design prototypes for desktop properly instead of having to have a frame around the design?
Fenx Wan, almost 5 years ago
[01:46] Nice to be able to insert youtube link. How about gifs like sketch plugin "Gif me"?
Dragoș Jurca, almost 5 years ago This is Mac only, right?
Cameron Getty, almost 5 years ago
Correct.
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now