Ok, so far, I’ve worked all day with the new Framer and it’s really sweet. The product strategy is brilliant and it makes Framer and (coding generally) more accessible to designers. That’s a huge plus. At my company, I’m the only designer and proud advocate of Framer. Initially, people were like “wtf is Framer?!” Now Stakeholders love it and we can’t imagine our company without it. Our hiring descriptions in my department now request that Candidates have some experience with the product. It allows us to test and validate our ideas remarkably quick. It responds to my need as a Designer in very intuitive and thoughtful way. It will remain my weapon of choice for mobile prototyping. I must admit, the new design mode is a little ‘foreign’ to me. For example, if I create a layer in code mode, I expect to see it represented in the design view, but it’s not. Whereas if I create the layer directly in design you can see it reflected in the object hierarchy in code. It’s weird that stuff I create in code-mode isn’t visible in design mode. Moreover, the convention of relabelling a layer for the purpose of targeting is … interesting but weird. I’m sure over time I’ll become accustomed to using design-mode`…but Sketch(as of now remains my tool of choice). Having said that, I’m about to ask what may sound like a silly and arguably subjective question. If I build my prototypes programmatically, not using design mode, but rather dragging and dropping sketch assets into my project…and then I toggle to Design Mode, it’s a complete empty state…Is that ok? Would I be correct in assuming that if you’re workflow doesn’t involve the new Design feature whatsoever, Prototyping in Framer remains largely the same as it did in v89?

Adam Mazurick

Posted Jun 03 - Read on Facebook

Ok, so far, I’ve worked all day with the new Framer and it’s really sweet. The product strategy is brilliant and it makes Framer and (coding generally) more accessible to designers. That’s a huge plus. At my company, I’m the only designer and proud advocate of Framer. Initially, people were like “wtf is Framer?!” Now Stakeholders love it and we can’t imagine our company without it. Our hiring descriptions in my department now request that Candidates have some experience with the product.

It allows us to test and validate our ideas remarkably quick. It responds to my need as a Designer in very intuitive and thoughtful way. It will remain my weapon of choice for mobile prototyping.

I must admit, the new design mode is a little ‘foreign’ to me. For example, if I create a layer in code mode, I expect to see it represented in the design view, but it’s not. Whereas if I create the layer directly in design you can see it reflected in the object hierarchy in code. It’s weird that stuff I create in code-mode isn’t visible in design mode. Moreover, the convention of relabelling a layer for the purpose of targeting is … interesting but weird.

I’m sure over time I’ll become accustomed to using design-mode`…but Sketch(as of now remains my tool of choice). Having said that, I’m about to ask what may sound like a silly and arguably subjective question. If I build my prototypes programmatically, not using design mode, but rather dragging and dropping sketch assets into my project…and then I toggle to Design Mode, it’s a complete empty state…Is that ok?

Would I be correct in assuming that if you’re workflow doesn’t involve the new Design feature whatsoever, Prototyping in Framer remains largely the same as it did in v89?

5 Comments

Cédric Magnin

I agree with you. For me, Design tab is a nice utility room just beside your big kitchen that is Code. Use it for quick preparations, assemble some things, but big meals will be made in your kitchen with raw material coming from your big fridge (Sketch). Am I wrong ?

Adam Mazurick

Cédric MagninThanks for the response. I saw a bunch of likes, but no one commented.

I don’t think you’re wrong. Moreover, that’s a brilliant analogy you made there with the Fridge. It really encapsulates how I feel.

I get the business-case for Design Mode. If worked at Framer, I probably would have lobbied for Design mode too at a Strategic level. I think it makes Framer as a product more accessible to Designers who don’t code. I love that. Knowing code has opened so many doors for me and I love Framer’s commitment to introducing code to more Designers. Being proficient with Framer has been both a good and bad thing for me professionally.

Good: It increases your value proposition as a Designer at ANY company you work for. You will immediately stand-out to Management as a key design resource.

Bad: I worked briefly for a couple Agencies that had very immature design practices. Contrary to the role an Agency/Innovation Partner should play, these were shops where innovation went to die. Designers were accustomed to traditional, less code-reliant tools like InVision, After Effects and Principle. Knowing Framer gave me near-super human powers at work. Framer allowed me to articulate complex interactions quickly and establish meaningful cross-departmental points of collaboration with Engineering teams.

This was VERY disruptive for the Design Department Leads and other Designers who had no interest in climbing the steep learning curve Framer has. Complacency was easier than Adoption.

Senior Management loved me, my Design team felt intimidated and this was a significant point of friction.

I’ve had a few chats with Jordan Robert Dobson about this.

The other challenge I have with Design Mode, is that if this is intended to replace Sketch as a Design Tool, there are certain functions I expect to find there. For example, what if I want to add a gradient quickly to a header…not possible.

Justin Ma

I'm on the same page as you two, I'm unsure of how to fit the tool into my workflow right now. I have to mess around with it a bit more, but ultimately I'm going to be working in Sketch a lot more as designers in my org aren't as familiar with Framer. I don't see myself designing straight in Framer anytime soon, as these files need to be accessible by them as well.

I'm both excited at the new tool, and to be honest slightly confused at this workflow. I knew of some designers that designed in Framer even before this update, so this probably suits their needs much better than mine.

Koen Bok

Right now, the design tab is a smarter alternative to importing. One that also imports style and layout rules. Over time, they will blend over more as we figure out the right workflow/balance with you guys.

Adam Mazurick

Koen BokThank you for your response. So I have an additional question.

A lot of my Sketch Art boards are now made @ 1242 x 2208 in sketch. I prototype on a 7Plus for Stakeholders at Work. I find it easier for me to export assets at 1242 x 2208.
I’m notorious for not using sketch import. My work flow goes as follows.

1. Design in Sketch on an art board at 1242 x 2208

Let’s say my goal is that I want the header to animate from a Y coordinate value outside the visible canvas of my prototype to a visible coordinate inside my canvas. Just for the purposes of this discussion.

2. Export Header
3. Pull into sketch manually. Drag drop. That's how I roll. I don’t know why, but I never liked just importing directly from grouped layers in sketch. My mind doesn’t work that way. 4.Drag off canvas manually to track Y start and end values. 5. Finesse animation with animation values using the sidebar curve feature.

How do you recommend I handle asset preparation and migration and workflows moving forward?

Is there more documentation? Do you see the design mode being the primary destination for creative activity rather than Sketch?

Sorry, I’m just experiencing certain challenges and I want to make sure I’m not following a suboptimal work process. What would you consider best practice at Framer HQ?

Read the entire post on Facebook