Sketch for primary design work. Miro for collaboration with team (and live wireframe work with some new features they added), WIP reviews. InVision for client-focused work sharing, and developer annotations. ReadyMag for rich-media prototyping that includes scroll actions. SublimeText2 for basic coding.

BTW, I used to use Principle for the exact reason we now use ReadyMag. Principle has a steep learning curve, and you can't give anyone an actual prototype to test and use. ReadyMag was a fantastic substitute; funny how a build-it-yourself website tool that wasn't meant to be a prototyping tool has turned out to be the best prototyping tool when I need to account for scrolling actions.

I've been learning Principle with a goal of using it with Sketch to prototype long-scrolling rich media content - text, audio, video, photos, animations, etc. Principle feels like the most viable in pulling off what I want to do, I just wish it's drawing tools and editing tools had more to them. I'm also finding it tricky to decide when to use drivers and when to use page-to-page transitions to animate things.

I really want InVision Studio to work to accomplish the same things, because I'd be able to push all the prototypes to our full InVIsion account, get comments, have devs use the Inspect tool, etc. It just doesn't have the scroll capabilities like Principle. I hope it works because for less complex stuff, Studio will definitely hold it's own against other apps like XD.

I gave Framer X a look but I don't have the time to get so deep into React and coding stuff to really do what I want.

Then, based on a thread I posted earlier today, someone suggested Webflow, and I'm now pretty excited to do some tutorials on that. I'm a UX designer, and while I don't concentrate on code or visual design in my job, I'm capable of both, and Webflow seems like it could be very intuitive in combining all three of those things.

One last thought on Studio. I think you can probably simulate lots of animations based on scrolling by using hidden layers that trigger animations on rollover of those hidden areas. It's been several months, but I recall finding a way to do that.

Thanks for your reply. The purpose of the prototype would be to first use low-mid fidelity wireframes to outline animations, transitions, text, etc. in a rich media content piece on the UX side of things, then work with a visual design team to start creative work that aligns with the flow of things from top to bottom. We'd want this prototype to be as accurate as possible so that when a dev team builds it, we've given them completely realistic examples of how the animation should work (as opposed to just showing static comps and saying "when you scroll, this does this..." and having to voice over how it works). We've got some goals to create really nice, engaging storytelling content for the first time, and need to get everyone - UX, writers, visual design, and development - on the same page before we propose projects like this, and ultimately build whatever it is.

I just don't want to half-ass the creative process. I don't want developers to be left guessing. If we had someone who had great crossover skills in visual design and coding, that would help a lot, but we don't, so it's important to align everyone with a good process.

WebFlow looks interesting, thanks. I need to dig in deeper, but could help a lot. Thanks again.

I've got a question in to our agency's account rep, but thought I'd ask it here: Is the DSM accessible in Studio yet, and if not, why not, and when will it be integrated? The DSM is going to be a hugely useful tool when it can be used between Sketch and Studio. I'm really eager to evolve a workflow where I'm working closely with a visual designer to create hi-fidelity comps, then drop various pieces they have created back into my files to use in Studio to make animated prototypes. The DSM is going to be the perfect way to do this, so I hope it's coming soon (or, that it's already integrated and I've completely missed it.)

It looks like they're trying to resemble the style of clothing sold in Urban Outfitter's dwindling guy's section. Have you been in one of those places recently? It's bizarre.

RE: "feel less in control" How do you think demo 4 would feel as navigation across the top of the page? would people constantly be bumping it and exposing it? If it were triggered by proximity to a logo, I really wonder how frequently people would trigger a menu bar, get annoyed by it, etc. Any thoughts?

I love the demos tympanus puts together; got excited about this related to a project I'm on at the moment.

Same here. I started exploring UX Powertools, loved it, but found it a bit complex, especially to roll out to a team of people with mixed experience in Sketch.

In the end, I've built a library from scratch, containing the most common components we use, along with basic wireframe elements (boxes, shapes, placeholder, etc.). I spent significant time testing each thing I created, making sure things resized appropriately. In creating it, I've organized around atomic design principles, but for my team, I've changed the naming convention to keep things simplified. Everything we use regular is in a folder called "Components," and the next step up from there is Patterns, consisting of groups of components. From there, we will collaborate on building out reusable templates that suit best practices and our POV on things.

I'm definitely glad I took the time to build from scratch. I know it inside and out, which will help team members troubleshoot anything they have problems with.

That's interesting, thanks. With such a continuous delivery model, and if that's indeed what Facebook are doing, I wonder what the consensus is from a UX perspective on usability and learnability of various UI aspects that change SO OFTEN. Much like your comment about the semi-colon / Boost button.

I'm just always asking myself "why can't they just let a good thing be?"

Really nice response. I'm in the process of helping convert our small agency team to Sketch, and I've been building out a pattern library using Libraries for a few months now. These are great tips and mirror some of my thinking.

One thing we're trying to do (using atomic design) is create a variety of organisms and templates that are reusable and built from our core set of atoms and molecules. Do you use a system such as atomic design to organize and control the things people can freely modify (ex: group of product cards as template), vs. the things that should never change (ex: form fields)?

I enjoyed reading this. I'm working on a UX project at the moment in which I've made some big changes to our traditional wireframe process to avoid duplication of various annotations, modules, etc. I could see taking it a step further and trying to organize it around this methodology, and doing so with much success. Just too far along at this point to deviate, but I'm going to keep this idea in mind for the next project. Nice work.