Published on <a href="https://blog.prototypr.io/phase-v1-all-about-interactions-3860b57dbbf0?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Phase.com 
{ 🕑 } — Early Summer
It’s all about Interactions in Phase v1.0, coming early summer. Import your Sketch files, and make them interactive. Faster, easier, and more flexibly than many have ever thought possible.
Prototype interactions in 5–15 seconds which take 5–15 minutes in other apps. Without code, or frustrating limitations.
Let’s talk about how. But first, let’s take a quick step back and together think about where we designers find ourselves today.
<h3>Breaking The Mould 💔</h3>
We use a lot of prototyping tools. Actually, we use a lot of design tools in general today, not just prototyping tools…too many of them.
But prototyping (or, interaction) tools are a particularly jumbled part of our workflow. From the <a href="https://uxtools.co/survey-2017">UXtools.co Survey</a>:
<blockquote>The average number of prototyping tools used by respondents was 2.98. If it takes a designer at least three tools to accomplish their goal, we’re likely to see a lot more movement in this category.</blockquote>
That’s a 2.98 average just for prototyping, excluding the many other design tools that pass a designer’s screen each day.
These tools have some subtle differences. Some are easier to use, or better suited to a specific use case than others, for example. However at their core they all essentially use the duplicate-screens model:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4qB0LUCB_3emKHNy6Ju8mw.png">Existing Products: [1] duplicate screens — [2] make changes — [3] transition screen-states.
This duplicate-screens model helps us work visually, but it is also intensely time-consuming and limiting. So it’s no wonder we turn to code. Working directly in code may also be slow, but at least it’s not limiting.
To be clear we’re oversimplifying things a bit. Not every app is exactly a duplicate-screens app, however the over-simplification hits quite close to the mark even with those apps that let you dig a bit deeper.
Meanwhile roughly every ~1.5 years a new duplicate-screens prototyping tool surfaces. This pace has actually accelerated, with some companies moving this duplicate-screens model into a ‘tab’ of an editor.
Every iteration it’s the same duplicate-screens model over again, but somehow just a little bit better than the previously reigning tool.
Usually, the new product comes with a ~10% improvement on whatever came before. A little bit easier, or a little bit less frustrating…but mostly the same. The new tool takes the crown, until the cycle repeats itself.
It’s a broken cycle— today most designers just feel tired, and disillusioned. We’ve been going down the wrong road, and we’ve lost hope along the way.
Years of broken promises in modern design tools has decayed faith into a cocktail of skepticism, and fatigue.
<h4>Stop; Rethink; Reset — { ⟳ }</h4>
Duplicate-screens prototyping-tools do not look at how web-mobile interactions actually work, and build up from there.
Instead they look at how print design software works, and think about what they can tack onto it. That’s their starting point…that is where they build from.
Digital Design is not the same as Print Design. It’s time we treat it as such. No more half-measures. It’s time we move on…really move on.
<h3>Finding Hope 🙏</h3>
Have hope, fellow designers. The best in digital design is yet to come. Don’t be disheartened, or overtaken by the disappointment of design tools in recent years.
Let’s talk about how, and why 💖, by re-touching on building-blocks, <a href="https://blog.prototypr.io/meet-phase-hi-3f395c695d87">from when first we met</a> 🤗:
<blockquote>When we design we take design’s core building blocks — things like paths, text, fills, borders, shadows, colors, etc. — and compose designs mixing these core building blocks together, to create designs with as much or as little complexity as we need.</blockquote>
<blockquote>Print design, video games, animation, CAD — it’s always the same. We don’t piece designs together exclusively from pre-made templates. We compose designs with the basic building blocks for that type of design.</blockquote>
<blockquote>It’s time we think about Interaction Design the same way and finally make the basic building blocks of Interaction Design — things like selectors, events, conditions — first-order citizens in our Digital Design products.</blockquote>
It’s all about building blocks. Interactions run so much deeper than just a layer of transitions sitting on top of print designs.
How we build a modern digital design tool is actually quite simple. We start by asking: what are the building blocks of Interaction Design?
Well they’re actually quite obvious. Of course these building blocks are things like: selectors, events, conditions (if/else), element states, etc.
That’s how you build a digital design tool worth being hopeful for. You treat digital design on its own terms…as something new. Leaving print-design software hacks behind us.
<h3>Interaction Building Blocks in Phase v1 🏗️</h3>
It’s all about interactions in Phase v1. Import your sketch files, then use the building blocks of interactions to compose interactive designs at lightning speed. For the first time, it’s really possible.
<h4>① Selectors</h4>
I want to select these components, but only when they’re children of these other components, and only when they’re visible, etc.
If you’re a coder, these are sort of like jQuery selectors. However they’re done visually, without touching (or needing to understand) any code.
<h4>② Events</h4>
Dynamic events: click the button, change some data, scroll some element, etc.
That’s how interactions work in the real world, and of course it’s how interactions work in Phase as well.
<h4>Selector(s) + Event(s) = Action</h4>
Put a Selector↔Event pair together and you’ve got what we call an Action.
<h4>③ Element States</h4>
Web-mobile Elements have multiple states and classes. They’re not static. So of course, elements in Phase are also the same.
Use these element States to transition elements on Actions, at whatever level of element-specific granularity you need.
<h4>④ Triggers</h4>
But it’s not all about State. Maybe you need to navigate to a new page? Or change the value of some data? Pause the transition? Insert or remove an element?
You can do this with Triggers inserted anywhere in the timeline.
<h4>⑤ Conditions</h4>
Like, simple if/else done visually.
Maybe you only want to do a certain interaction when the user is logged in? You can set that up with Conditions.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*MbRL2xiVRw9PLO-IaS7bdw.png">Compose to any level of complexity, with the Building Blocks of Web-Mobile Interactions
<h3>Putting it All Together 🛠️</h3>
Put these building blocks together and what have you got? Interactions, that’s what — at any complexity you need.
We have a working prototype with all of the above implemented, and in it we’ve seen designers do in literally seconds what takes them 10–20x more time in existing interaction tools, or directly in code.
We’ll give you a peek at the prototype very soon. We’re just polishing up the visuals, since we’ve been so engulfed in getting the function right that the visuals have thus-far been ignored 🙀
Once we polish it up, we’ll pull back the curtain and give you a look!
We’ve chosen to begin with Interactions in Phase v1 because it’s where we can make the biggest impact, very quickly. Soon we designers will be able to create Interactions at lightning speed, without code.
Once Phase v1 is shipped we’ll then shift our focus to quickly building editing tools, libraries, adaptive layouts, digital elements, collaboration, version control, and eventually export to code in v2, v3, etc.
<h3>Join Us! — More than 14k Designers</h3>
Join more than 14,000 designers building a Digital Design product worth being hopeful for again. Help us learn what part of Phase is most important for you, so we can move it up the list!
<h4>Coming Summer 2018 → <a href="https://phase.com/">Get Early Access.</a></h4>
<ul>
<li>Phase Slack: <a href="https://phase.com/community/">https://phase.com/community/</a></li>
<li>Twitter: <a href="https://twitter.com/phasecommunity">https://twitter.com/phasecommunity</a></li>
<li>Facebook: <a href="https://www.facebook.com/phasecommunity/">https://www.facebook.com/phasecommunity/</a></li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*sxQE6cf8cb6WviP5n5zAZw.jpeg"><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=3860b57dbbf0" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/phase-v1-all-about-interactions-3860b57dbbf0">Phase v1 — { All About Interactions }</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Phase v1 — { All About Interactions }

Top Stories