small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p>Published on <a href="http://ift.tt/2tCTFjW">| Prototyping: From UX to Front End &mdash; Medium</a> Adam Amran <img alt="" src="http://ift.tt/2t8sWbE"></p>
<p>For every design tool out there, there are many heated discussions about which one is the best. And as much as we would like, there is no one perfect tool to rule them all. I believe in the power of using different tools together in a workflow that fits your needs.</p>
<p>That’s why I want to share my own and what makes it work for me. Let’s start with why those 3 tools and how they fit together.</p>
<h3><strong>Sketch</strong></h3>
<p>This is the cornerstone of my toolset — both for wireframing and UI design. I used to use Axure for wireframing, but since I moved to designing mobile apps rather than websites, Sketch started to be a better option.</p>
<p>There are some very good alternatives like Figma or Adobe XD, but Sketch feels the most mature to me. Part of the reason I use it is how comfortable I&#8217;ve gotten with it. I think it’s actually important to get to a solid skill-level quickly in a tool (Framer being an exception for code-virgins) and Sketch was very easy for me to learn — the learning curve is quite fast.</p>
<p>On top of that, it has plugins which leads me to Invision…</p>
<h3><strong>Invision</strong></h3>
<p>Obviously a prototyping tool, but I use it largely as a communication tool as well. It’s great for getting feedback from the team via comments and it’s easy to track the status of the design via workflow.</p>
<p>But the real killer feature is the InVision Craft plugin for Sketch: this is the connecting link between the two and it’s made my work so much easier and faster when it comes to pushing new designs and updates to InVision. Plus with one of the latest updates you can prototype directly in Sketch — details below.</p>
<h3><strong>Framer</strong></h3>
<p>Framer is for those moments where InVision is not enough. When I want a nice animation or a anything more advanced really, I roll up my sleeves and write some code to get it done. There’s a learning curve to this tool and I’m still a beginner, but the more I learn, the more I believe in the power of code. And I think Framer has a potential to replace both Sketch and InVision in the future. (What?! Read on 🙂)</p>
<p>But let’s not get ahead and talk about what makes this workflow so efficient for me.</p>
<h3><strong>Best of Sketch</strong></h3>
<h4>🔯 Symbols</h4>
<p>Biggest strength of Sketch for me is the way you can work with symbols and their overrides. Keeping your designs consistent is key and using symbols helps immensely with that. It’s a also a huge time saver when you need to change a colour or font in tens or hundreds of instances of a given element.</p>
<p><img alt="" src="http://ift.tt/2tCGqjj"></p>
<p>But the real magic happens when you start using nested symbols and overrides. I’ll let <a href="http://ift.tt/2gIFxl9">this article</a> explain in detail.</p>
<h4><strong>🏃 </strong><a href="http://ift.tt/1oPkHPd"><strong>Runner</strong></a></h4>
<p>This plugin is basically a Spotlight for Sketch. For someone who works with symbols a lot, manually picking the right can be painful. It’s a breeze with Runner — very easy to insert by typing the right name.</p>
<p><img alt="" src="http://ift.tt/2tCmaOO"></p>
<h4><strong>🔲 </strong><a href="http://ift.tt/20WFWN3"><strong>Dynamic Button</strong></a></h4>
<p>You know those moments when you have to resize a button when you change its text? This plugin allows you to do that with a simple keyboard shortcut. My tip: create a button with this, give it a shared style and then just reuse it wherever you need. That said, it’s not ideal, but probably the best solution for now.</p>
<h3><strong>Best of InVision</strong></h3>
<h4>⌛️ Craft</h4>
<p>As I already mentioned, <strong>Craft saves me a ton of time</strong> and it&#8217;s the small, but crucial, link that makes the Sketch+InVision workflow just right for me. There are several great features hidden inside, but Sync stands out as it allows screens to be synced by hitting a shortcut and the change propagates to InVision in seconds.</p>
<p><img alt="" src="http://ift.tt/2tCxVoG"></p>
<p>This works wonders in meetings:</p>
<blockquote><p>Team/client looking at a screen in InVision: “What if that button was green instead of blue?”<br />Me: “Yeah, that might be better” (making the change and syncing it while talking)<br />Team/client: “Whoa!”</p></blockquote>
<p>I lost count how much time this has saved me a long ago.</p>
<h4>🕹 Prototyping</h4>
<p>One of the latest features of Craft is <strong>prototyping directly in Sketch</strong>. Connecting screens wasn’t really a problem to do in InVision itself before, but this makes it much quicker and easier.</p>
<p><img alt="" src="http://ift.tt/2t8sbPL"></p>
<blockquote><p>It’s an important part of my workflow, because having a somewhat functional prototype answers a lot of questions during the development.</p></blockquote>
<p>I also make sure to include dialogs, actions sheets and other system elements, that are part of the app’s experience, in the prototype.</p>
<h4>💬 Comments</h4>
<p>This is the reason why InVision is my go-to tool for getting feedback from my team or clients. It&#8217;s the most comfortable way of getting people to comment on the designs I&#8217;ve done.</p>
<p>It&#8217;s iterating on my work where this workflow really shows it&#8217;s strength: I design a mockup, push it to InVision, send a link to the person from whom I want feedback, they comment on some specific things, perhaps we debate a little, I make changes and push them again. This can be a matter of <strong>less than half an hour</strong>. It would take hours or days over e-mail.</p>
<h3><strong>Best of Framer</strong></h3>
<p>Sometimes, I want to do a more complicated interaction or a fancy animation. This is where InVision falls short and Framer steps in.</p>
<p>There are a several things which set it apart from other prototyping tools:</p>
<h4><strong>☕️ Coding for non-coders</strong></h4>
<p>Framer uses Coffeescript which is basically a friendlier looking Javascript. It provides you with many predefined snippets and all of it is <a href="http://ift.tt/2qg8eJz">well documented</a> so you can get started.</p>
<p><img alt="" src="http://ift.tt/2t8NhgR">It&#8217;s really not that scary 😉</p>
<p>Recently the team released <a href="http://ift.tt/2rvzqW5">Patterns</a> which give you code for many common interactions and you just adapt it for your needs. Basically they are doing everything they can to make prototyping in code less scary, easier and more enjoyable.</p>
<p>“Learning to code is too hard” is not an excuse anymore.</p>
<h4>👌 <strong>Constantly shipping great new features</strong></h4>
<p>The team behind Framer moves fast and I see a lot of potential this tool holds for the future. With <a href="http://ift.tt/2t8kOrC">Design</a> introduced recently, Framer is now one of few tools that combine design and prototyping.</p>
<p>Of course it’s still early, but as it matures that combination will become very very powerful. It&#8217;s exactly why I think it could possibly become a replacement for other tools in the future. They already have a sharing platform too, adding collaboration features is just a matter of time. Watch this space ❗️</p>
<h4><strong>🚀 Endless possibilities</strong></h4>
<p>I’ve started playing around with Framer about a year ago, but was really discouraged by the fact that it&#8217;s code. Then I’ve tried tools like Flinto or Principle and found them to be quite confusing, but also limiting. So I came back to Framer and invested a little more time to learn the very basics to be able to prototype stuff that I usually need. It was definitely worth it.</p>
<p>Not that I would be capable of it today, but Framer allows you to do some crazy shit that you simply cannot do with other tools. You can work with live data, sounds, even do a VR prototype in it. <strong>There is a lot of power in code.</strong></p>
<p>– — –</p>
<h3><strong>What does your workflow look like?</strong></h3>
<p>I hope you’ve found something interesting or useful about my workflow. Everyone is different and so I would love to hear about yours — what tools do you use, why those and what you like about them 🙂</p>
<p>Btw let&#8217;s connect on <a href="https://twitter.com/amrancz">Twitter</a>!</p>
<p><img src="http://ift.tt/2tCKvnV" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2t8IBru">My Design Workflow: Sketch + InVision + Framer</a> was originally published in <a href="http://ift.tt/2cAqCpx">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


My Design Workflow: Sketch + InVision + Framer

My Design Workflow: Sketch + InVision + Framer

Top Stories