<p>Adobe XD Wireframe Kit. A collection of UI components for creating wireframes with swagger! Time-saving, idea sparking, back-patting wireframe goodness. 👍 370+ Elements | 8 Pre-created Layouts | 60 Custom Icons | Mobile &amp; Desktop | Ultimate Flexibility!</p>


heywires | Adobe XD Wireframe Kit

<div class="gallerycontainer boxShadow-subtle react_hide" style="width:100%;position:relative;display:inline-block; padding:20px;background:#fff; clear:both; 

margin-bottom:20px;"><br />
[post_gallery]
</div>
<div class="gallerycontainer boxShadow-subtle" style="width:100%;position:relative;display:inline-block; padding:20px;background:#fff; clear:both; margin-

bottom:20px;"></p>
<h2  style="font-size:22px;padding-bottom:20px">unDraw for XD</h2>
<p>Beautiful images for your client and personal design projects, without attribution. A completely different kind of plugin, exclusively on XD.
</p></div>
<div class="gallerycontainer boxShadow-subtle react_hide" style="width:100%;position:relative;display:inline-block; padding:20px;background:#fff; 

clear:both;"></p>
<h2  style="font-size:22px;padding-bottom:20px">Related links</h2>
<p>[link-preview url=&#8221;https://xd.undraw.co/#learn_more&#8221;]</p>
</div>


unDraw for XD

<p>[post_gallery]</p>
<p>A collection of free Adobe XD wireframe kits to do wireframing digitally.</p>


Adobe XD Wireframe Kits &#8211; FREE

<p>Your tool to translate design into code.</p>


Yotako

<p>The plugin to help you design and build products that are accessible, ethical, and inclusive.</p>


Stark

<p>Generate gorgeous confetti patterns in 1 click within Adobe XD.</p>


Confetti for Adobe XD

<p></p>
<p>Bring your Figma designs into Framer and create interactive prototypes in a quick manner. Figma Importer for Framer brings together two of the most powerful tools in design right now. While with Figma you can easily build a static prototype or even UI, with Framer you can bring it to life. This integration: </p>
<p></p>
<p></p>
<ul>
<li>Introduces a more open workflow </li>
<li>Gives teams a competitive edge</li>
</ul>
<p></p>
<p></p>
<p>Give it a try! </p>
<p></p>


Figma Importer for Framer


<p>Get your Figma files to your developers in an instant. Figma Handoff facilitates the design handoff process, so you can quickly go from design to deployment. Besides that, make sure your dev team has the correct project specifications. Features include:</p>



<ul><li>Size, distance and design properties</li><li>Settings for different platforms</li><li>Offline exporting</li><li>Images exporting</li></ul>



<p>Also, it&#8217;s fully open source. ⚡️ By <a href="https://twitter.com/leadream4">leadream</a>.</p>


Figma Handoff


<p>Figma is listening to the design community and just keeps on growing. The tool&#8217;s Auto Layout feature is out, meaning that:</p>



<ul><li>💎 Buttons resize with their text </li><li>💫 Lists rearrange themselves when items are moved around</li><li>🌈 Elements are nested to respond to their content</li></ul>



<figure class="wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter"><div class="wp-block-embed__wrapper">
<blockquote class="twitter-tweet" data-width="550" data-dnt="true"><p lang="en" dir="ltr">Design more, resize less. Auto Layout is here. <br><br>Read more: <a href="https://t.co/se416TBfsR">https://t.co/se416TBfsR</a> <a href="https://t.co/KmLL3YNjzG">pic.twitter.com/KmLL3YNjzG</a></p>&mdash; Figma (@figmadesign) <a href="https://twitter.com/figmadesign/status/1202618685795553280?ref_src=twsrc%5Etfw">December 5, 2019</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<h2 class="marginTop-l">Before and After</h2>



<p>This gif from Tony demonstrates just how much time Autolayout can save you. Here, he compares the old way with the new way:</p>



<figure class="wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter"><div class="wp-block-embed__wrapper">
<blockquote class="twitter-tweet" data-width="550" data-dnt="true"><p lang="en" dir="ltr">This is how much time the new Figma Autolayout update is already saving me. This is an example of what I did before versus what’s possible now. <br>Thanks <a href="https://twitter.com/figmadesign?ref_src=twsrc%5Etfw">@figmadesign</a> <a href="https://twitter.com/hashtag/autolayout?src=hash&amp;ref_src=twsrc%5Etfw">#autolayout</a> <a href="https://t.co/4N3BgFaNsz">pic.twitter.com/4N3BgFaNsz</a></p>&mdash; Tony Gines (@TGines) <a href="https://twitter.com/TGines/status/1202689073883860993?ref_src=twsrc%5Etfw">December 5, 2019</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<h2 class="marginTop-l">How it&#8217;s made</h2>



<p>Autolayout is a very useful feature, and a many design and enginerring decisions must have been made to get this working. <a href="https://twitter.com/skuwamoto">Sho Kuwamoto</a>, Director of Product Design at Figma, explains why items in an Autolayout frame go backwards:</p>



<figure class="wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter"><div class="wp-block-embed__wrapper">
<blockquote class="twitter-tweet" data-width="550" data-dnt="true"><p lang="en" dir="ltr">A lot of people have been asking why the items in an Auto Layout frame go backwards in <a href="https://twitter.com/figmadesign?ref_src=twsrc%5Etfw">@figmadesign</a>.<br><br>I usually hesitate to answer seemingly simple questions that end up requiring super long answers, but&#8230; here we go! <br>1/n</p>&mdash; Sho Kuwamoto (@skuwamoto) <a href="https://twitter.com/skuwamoto/status/1204261358428012545?ref_src=twsrc%5Etfw">December 10, 2019</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<h2 class="marginTop-l">Related Reads</h2>



<p class="marginBottom-m">Here&#8217;s a couple more articles on our blog on how Auto Layout works. Thanks to <a href="https://blog.prototypr.io/@christopherbamharrison">Chris Bam Harrison</a> and <a href="https://blog.prototypr.io/@davi.costa?source=post_page-----e54666a47aba----------------------">Davi Costa</a> for sharing their experiences.</p>



<blockquote class="embedly-card"><h4><a href="https://blog.prototypr.io/putting-figmas-auto-layout-through-its-paces-9bd779239c47?source=collection_home---4------6-----------------------">Putting Figma&#8217;s Auto-Layout through its paces</a></h4><p>First, let&#8217;s talk about fundamentals. For most people, auto layout is going to allow you to design elements that contain text without having to redesign them when the text changes. The first use most of us will have for this feature are dynamically resizing buttons, as seen in this great tweet: As the length of the text increases, so does the other elements in the button.</p></blockquote>
<script async="" src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>



<blockquote class="embedly-card"><h4><a href="https://blog.prototypr.io/what-auto-layout-in-figma-allows-e54666a47aba">What &#8220;Auto Layout&#8221; in Figma allows</a></h4><p>Objects can resize frames, but frames can&#8217;t resize these objects. 🚨 Disclaimer: This article covers the state of the feature as of December 2019. It&#8217;s probable that the shortcomings explained here will be addressed in the near-term. Hopefully 🙏 &#8220;When you add Auto Layout to a frame, the items inside are stacked next to each other (either vertically or horizontally).</p></blockquote>
<script async="" src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>


Figma Auto Layout


<p>Get logo inspiration right inside Figma with this useful plugin by <a href="https://twitter.com/imdeepjoshi">Deep Joshi</a> and <a href="https://twitter.com/its_mnthn">Manthamkunar Satani</a>. Logo Creator comes with 50+ logo shapes  that you can choose from and craft into your own logo. If you need ideas, check the logo inspiration collection where you can browse logos from popular apps.</p>


<p>&#8230;..</p>

Figma Logo Creator


<p>A Figma plugin for finding colors by <a href="https://twitter.com/notdetails">Joel Califa</a>. Search for anything, find a color. Color Search gives you up to 5 colors for literally any search query.  Choose your favorite an add it to your local styles in seconds!</p>


Figma Color Search


<p>Speed up your Figma skills with this game-like experience. Figma Ninja helps you learn the basics of Figma and use the tool&#8217;s shortcuts to make your workflow more efficient. </p>


Figma Ninja

<p></p>
<h2>Creator Series | Ep. 2 — Meet Jon Yablonski</h2>
<p></p>
<p></p>
<p>If you’re familiar with design blogs or the Humane by Design project, then the name Yablonski surely rings a bell. Based in Detroit, Jon generated buzz in the design world through his skilful side-projects and popular blog posts on Prototypr and other publications. Having begun his career in graphic design, he quickly transitioned to interaction, and is now focusing on the next generation of in-vehicle interactive experiences as a senior product designer at General Motors. Also, he has just released a new book <a href="https://www.amazon.com/Laws-UX-Psychology-Products-Services-ebook/dp/B087F24RJB">Laws of UX</a>. </p>
<p></p>
<p></p>
<p>So, it’s with great excitement that we introduce you to the amazing <a rel="noreferrer noopener" href="https://medium.com/u/df201e992792" target="_blank">Jon Yablonski</a>! </p>
<p></p>
<p></p>
<figure class="wp-block-image size-large"><a href="https://twitter.com/JonYablonski/status/1254749892439916548?s=20"><img src="https://prototypr.io/wp-content/uploads/2020/05/Jon-Yablonski-Twitter-Post-1024x709.png" alt="" class="wp-image-51434" srcset="https://prototypr.io/wp-content/uploads/2020/05/Jon-Yablonski-Twitter-Post-1024x709.png 1024w, https://prototypr.io/wp-content/uploads/2020/05/Jon-Yablonski-Twitter-Post-300x208.png 300w, https://prototypr.io/wp-content/uploads/2020/05/Jon-Yablonski-Twitter-Post-768x531.png 768w, https://prototypr.io/wp-content/uploads/2020/05/Jon-Yablonski-Twitter-Post.png 1188w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
<p></p>
<p></p>
<h3><strong>1. Jon, for those who are not so familiar with your journey and your work, can you tell us a bit about yourself?</strong></h3>
<p></p>
<p></p>
<p>My journey began as a graphic designer after graduating from art school but I quickly gravitated towards interaction design. I’ve had the opportunity to work on a variety of teams, companies and projects — learning something with each experience. I try to write about design and web development because I think that writing is a great way to reflect and learn, but also a way to teach others. I experiment frequently through side-projects, which I see as a way to explore ideas and grow skills that eventually benefit my client work.</p>
<p></p>
<p></p>
<h3><strong>2. Front-end and design. When did you find out this is what you wanted to&nbsp;do?</strong></h3>
<p></p>
<p></p>
<p>My mom was always really supportive when it came to my interests, especially art. She’d take me to art museums, enrol me in summer art classes, and buy me art supplies. She really encouraged me to pursue my interest in art, even though it was an uncommon career path where I grew up in Arkansas. Her encouragement pushed me to work hard, and this hard work won me a spot in summer art camp at Memphis College of Art. It was during this time I learned about graphic design and realised that design is what I wanted to do. A couple of years later, I was back at art school but this time enrolled as a freshman.</p>
<p></p>
<p></p>
<blockquote class="wp-block-quote">
<p>While I started my career as a graphic designer focused on print and branding work, I quickly gravitated towards the digital space. I needed an online portfolio and there wasn’t a lot of great options at the time, so I started trying to learn how I could code <a href="https://jonyablonski.com/" rel="noreferrer noopener" target="_blank">my own&nbsp;website</a>.&nbsp;</p>
</blockquote>
<p></p>
<p></p>
<p>I still remember printing out code from view-source and pouring over it, highlighting stuff and trying to understand it. It didn’t take long for me to be completely enveloped with interaction design and front-end web development, and I’ve never looked back.</p>
<p></p>
<p></p>
<h3><strong>3. How did you learn and get experience?&nbsp;</strong></h3>
<p></p>
<p></p>
<p>I went to art school and got a more traditional design education that emphasised history, foundations and form over technical knowledge. I realised shortly after graduation that I needed to be more adept in the digital space, so I started to experiment a little bit on the side with it. When the iPhone came out in 2007, this gravitation towards digital accelerated and I found myself immersed in the challenges and opportunities of designing for the web.</p>
<p></p>
<p></p>
<p>Over the years, I’ve gotten experience by working in a variety of roles at different kinds of companies. I also put a big focus on side-projects, which gives me the opportunity to learn and gain experience with things that I don’t get a chance to with my client work.</p>
<p></p>
<p></p>
<h3><strong>4. You currently work as a product designer at General Motors. Where did your passion for product come&nbsp;from?</strong></h3>
<p></p>
<p></p>
<p>Most of my career has been spent working in agencies, which typically means juggling multiple projects for different clients that each span 3–6 months. Taking on a product design role has really allowed me to have a deeper impact and see something evolve on a much larger scale. It’s been an eye-opening experience that’s really rounded out my knowledge and brought out my passion for being part of the evolution of a product as opposed to a one-off project.</p>
<p></p>
<p></p>
<h3><strong>5. I must say your work is quite inspiring. Your Humane by Design and Laws of UX projects in particular have caught our attention and gathered a lot of buzz in the community. What drove you to start&nbsp;these?</strong></h3>
<p></p>
<p></p>
<p>I see side projects as a way to explore new ideas, level up with new tools, and experiment with new techniques. It gives me an opportunity to push myself, stay curious, and gain knowledge that always seems to find a way back into my client work. Since the winters in Detroit are pretty long and harsh, I use them as a time to focus on ideas that have been on my mind.</p>
<p></p>
<p></p>
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1600/1*GQmc4-ZcJSzN7T4Zk5HckA.jpeg" alt=""/><figcaption><a href="https://humanebydesign.com/" rel="noreferrer noopener" target="_blank">Humane by Design by Jon Yablonski <em>→</em></a></figcaption></figure>
<p></p>
<p></p>
<p>These projects are always an offshoot of something I experienced professionally and wanted to explore further. Take for example <a href="https://lawsofux.com/" rel="noreferrer noopener" target="_blank"><strong>Laws of UX</strong></a>: I found myself researching psychology heuristics for a client project but discovered there wasn’t a lot of resources focused on how these intersect with design.&nbsp;</p>
<p></p>
<p></p>
<blockquote class="wp-block-quote">
<p>I decided to make the resource I was looking for [Laws of UX] and in the process learned a lot about the intersection of psychology and UX&nbsp;design.</p>
</blockquote>
<p></p>
<p></p>
<p>I also like to connect ideas if possible, and Humane by Design is somewhat a response to Laws of UX. We can use persuasive design patterns to keep users engaged in the products we help create, but there is also an ethical question that we must consider. A lot of discussion on this topic seems to suggest that designers have little to no impact, especially if the underlying business model of a product is geared toward capturing people’s attention and keeping it. I wanted to explore the possibility that designers could actually influence how products are created to prevent them from becoming invasive, addictive, dishonest, or harmful to the people using them.</p>
<p></p>
<p></p>
<h3><strong>6. With such a huge focus on results, sales, monetisation, do you think products today lack a human touch? In another words, has UX lost its&nbsp;way?</strong></h3>
<p></p>
<p></p>
<p>I think that more often than not the goals of the business and the goals of the user are at odds with one another. A lot of emphasis lately seems to focus on UX supporting business goals by creating “habit forming” products that keep users coming back, but this isn’t what people actually want.&nbsp;</p>
<p></p>
<p></p>
<blockquote class="wp-block-quote">
<p>People want technology to empower them — to amplify their abilities and make life&nbsp;easier.&nbsp;</p>
</blockquote>
<p></p>
<p></p>
<p>The reality is many products and services out there, even ones that are renowned for being well-designed, are based on exploitative practices that monopolize people’s time and attention. People are becoming more aware of this and I think it will become imperative that companies consider how their products affect those using them. UX plays a critical role in all of this — the era of move fast and break things is over.</p>
<p></p>
<p></p>
<h3><strong>7. You also run Web Field Manual. How do you manage to do everything and keep a good balance between your work, projects and personal&nbsp;life?</strong></h3>
<p></p>
<p></p>
<p>I am a big believer in prioritisation over daily balance. That’s not to say that I think work/life balance isn’t important, but I tend to focus on one thing at a time. It’s really just about managing that focus and where you spend it, which for me changes week-to-week and even season-to-season. That’s one nice thing about living in Detroit — the seasons are very pronounced, so they kind of work as a mental trigger. In the winter, I’m very introverted and focused on my work, and in the summer I’m very extroverted and hungry for inspiration. It’s a natural rhythm that I value and I know I’d miss if I lived somewhere that didn’t have distinct seasons.</p>
<p></p>
<p></p>
<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/Web-FIeld-Manual-1024x576.jpg" alt="" class="wp-image-51425" srcset="https://prototypr.io/wp-content/uploads/2020/05/Web-FIeld-Manual-1024x576.jpg 1024w, https://prototypr.io/wp-content/uploads/2020/05/Web-FIeld-Manual-300x169.jpg 300w, https://prototypr.io/wp-content/uploads/2020/05/Web-FIeld-Manual-768x432.jpg 768w, https://prototypr.io/wp-content/uploads/2020/05/Web-FIeld-Manual-1536x864.jpg 1536w, https://prototypr.io/wp-content/uploads/2020/05/Web-FIeld-Manual.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
<p></p>
<p></p>
<h3><strong>8. Considering all the work you’ve done so far, what’s your favourite or most impactful project? And&nbsp;why?</strong></h3>
<p></p>
<p></p>
<p>I think my most impactful project has been Laws of UX because it makes complex psychology laws accessible to more designers. Cognitive and behavioural psychology provides such a wealth of knowledge that is useful for designers, so creating a designer-friendly resource that aggregates this information gave me an opportunity to learn a lot. I think this knowledge has made me a stronger designer and communicator in regards to design and problem solving.</p>
<p></p>
<p></p>
<p>______</p>
<p></p>
<p></p>
<p>If you want to know more about how you can apply key principles in psychology to build more intuitive and human-centered products and experiences, <a href="https://www.amazon.com/Laws-UX-Psychology-Products-Services-ebook/dp/B087F24RJB">check out Jon&#8217;s new book &#8211; &#8220;Laws of UX&#8221;</a>. You can get it <a href="https://www.amazon.com/Laws-UX-Psychology-Products-Services-ebook/dp/B087F24RJB">here</a>. </p>
<p></p>
<p></p>
<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/laws-of-ux-book-1024x768.png" alt="" class="wp-image-51421" srcset="https://prototypr.io/wp-content/uploads/2020/05/laws-of-ux-book-1024x768.png 1024w, https://prototypr.io/wp-content/uploads/2020/05/laws-of-ux-book-300x225.png 300w, https://prototypr.io/wp-content/uploads/2020/05/laws-of-ux-book-768x576.png 768w, https://prototypr.io/wp-content/uploads/2020/05/laws-of-ux-book.png 1440w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
<p></p>
<p></p>
<h3><strong>9. When creating something, what is your process usually&nbsp;like?</strong></h3>
<p></p>
<p></p>
<p>I always start it with:&nbsp;</p>
<p></p>
<p></p>
<ol class="pl-10">
<li><strong>Learning as much as I can about the topic at hand.</strong>&nbsp;<br />This means reading a lot, asking questions and really letting myself be immersed in the subject matter. Next…&nbsp;</li>
<li><strong>Taking time to get inspired and ask the “what if” questions.&nbsp;<br /></strong>This phase is many times my favorite part of a project — a time when anything is possible. I usually do a lot of mood boards, style tiles, and sketching. It’s also a time to define requirements that support what I’m trying to achieve — whether it’s learning a new tool/technology, achieving client goals, or simply exploring an idea. Step 3 is focused on…&nbsp;</li>
<li><strong>Narrowing down and then validating an approach.</strong><br />This means creating wire frames, prototypes, and conducting user tests. It’s a time to identify what does and doesn’t work, but also discovering things I didn’t initially consider. It’s a very iterative part of the process in which everything is still subject to change. Next is all about…</li>
<li><strong>Committing to the best approach, implementation and then refinement.</strong>&nbsp;<br />Development is often a heavy focus during this part of the process, but that’s not to say there isn’t still room for some experimentation: fine-tuning transitions, animations, and other details are my favorite part of this phase. I also consider the additional iteration that comes with user feedback as part of this phase — a project doesn’t end on launch day!</li>
</ol>
<p></p>
<p></p>
<h3><strong>10. Building products comes with a lot of hurdles. What’s the biggest issues you’ve encountered in this process and how would you approach&nbsp;them?</strong></h3>
<p></p>
<p></p>
<p>The biggest issues I’ve encountered all come back to a breakdown in communication. The better you can articulate a shared goal and a plan to achieve it, the more support you’ll get. This means being proactive and working collaboratively with other disciplines within your entire organization, not just your immediate team.</p>
<p></p>
<p></p>
<h3><strong>11. Now to everyone’s favorite question. What’s in your&nbsp;toolbox?</strong></h3>
<p></p>
<p></p>
<p>My toolbox changes depending on the project, but there are a few that I reach for every time. Good old fashioned <strong>pencil and paper</strong> is an invaluable tool in any designer’s toolbox, and it’s always the first one I reach for. Whether I’m taking notes, brainstorming or sketching paper wire frames, getting back to the basics allows me to think without the hindrance of tools. <strong>Sketch in addition to Zeplin</strong> has become invaluable and I find myself using them for everything from wire framing to high-fidelity designs. I also love using tools like <strong>Trello and Evernote</strong> for tracking tasks, notes, and documentation. From a development perspective, I’m really digging static site generators these days like <strong>Hugo</strong> for its speed/flexibility and <strong>Visual Studio Code</strong> is my editor of choice.</p>
<p></p>
<p></p>
<h3><strong>12. Burnout is becoming worryingly common in our industry. Have you ever had to deal with this&nbsp;problem?</strong></h3>
<p></p>
<p></p>
<p>Yes — definitely. The industry is changing so fast that it can be a challenge keeping up. Both tools and processes are in a constant state of evolution and change, and everyone is feeling the pressure to stay on top of the latest and greatest. I’ve also felt this pressure and the resulting burnout because design isn’t just something I do for work — it’s a passion I take home with me.</p>
<p></p>
<p></p>
<h3><strong>13. Any advice for those going through something like&nbsp;this?</strong></h3>
<p></p>
<p></p>
<p>The way I like to deal with burnout is to slow down and be more purposeful with the things I’m doing. It’s all about prioritizing tasks based on the goals you want to achieve. Also, don’t forget the basics: eat healthy, exercise, and get away from the computer often (preferably outside).</p>
<p></p>
<p></p>
<h3><strong>14. Finally, do you have any advice for people who are just getting started in design and development?</strong></h3>
<p></p>
<p></p>
<p>Never stop learning, stay hungry but humble, and do what you love to do even if it means doing it during personal time — eventually, it will be what you get to do all the time. Learn what you need to when you need to and don’t get carried away with trying to always know the new shiny tool, the latest technique, or some new method. Tools and processes change, but good design is timeless.</p>
<p></p>
<p></p>
<h3><strong>15. Anything else you’d like to&nbsp;mention?</strong></h3>
<p></p>
<p></p>
<p>I think one of the most important things that anyone working in our industry can do is to truly understand the real-life effects of their work.&nbsp;</p>
<p></p>
<p></p>
<blockquote class="wp-block-quote">
<p>We have a responsibility as designers and developers to create technology that enhances people’s lives, not exploit them or extract their attention.&nbsp;</p>
</blockquote>
<p></p>
<p></p>
<p>There’s enough of that in the world already.</p>
<p></p>
<p></p>
<figure class="wp-block-image is-resized full-size"><img src="https://www.prototypr.io/wp-content/uploads/2019/05/image_preview.png" alt="This image has an empty alt attribute; its file name is image_preview.png" width="580" height="26"/></figure>
<p></p>
<p></p>
<p><a href="https://blog.prototypr.io/@jonyablonski" rel="noreferrer noopener" target="_blank"><strong><em>Read more from Jon in our blog</em></strong></a><em> →</em></p>
<p></p>
<p></p>
<h4><strong>Popular Stories</strong></h4>
<p></p>
<p></p>
<p><a href="https://blog.prototypr.io/design-principles-for-reducing-cognitive-load-84e82ca61abd" rel="noreferrer noopener" target="_blank">Design Principles For Reducing Cognitive Load</a><br /><a href="https://medium.com/@jonyablonski/designers-guide-to-flexbox-and-grid-cec6e7e45736" target="_blank" rel="noreferrer noopener">Designer’s Guide To Flexbox And Grid</a><br /><a href="https://medium.com/@jonyablonski/designing-with-occams-razor-3692df2f3c7f" target="_blank" rel="noreferrer noopener">Designing With Occam’s Razor</a></p>
<p></p>


Laws of UX: Making the resources you are looking for

<p></p>
<p>This eBook from Marvel will help you learn the basic principles of a design system and also help you build one.  </p>
<p></p>
<p></p>
<p></p>


Getting Started with Design Systems &#8211; eBook

<div class="gallerycontainer boxShadow-subtle react_hide" style="width:100%;position:relative;display:inline-block; padding:20px;background:#fff; clear:both; 

margin-bottom:20px;">
[post_gallery]</div>
<div class="gallerycontainer boxShadow-subtle" style="width:100%;position:relative;display:inline-block; padding:20px;background:#fff; clear:both; margin-

bottom:20px;">
<h2 style="font-size:22px;padding-bottom:20px">
Marvel Enterprise 3</h2>
The all new Marvel Enterprise gives you everything you need create amazing products at scale.
Wireframe, prototype, user test and developer handoff in a single platform that powers design productivity and collaboration.

</div>
<div class="gallerycontainer boxShadow-subtle react_hide" style="width:100%;position:relative;display:inline-block; padding:20px;background:#fff; 

clear:both;">
<h2 style="font-size:22px;padding-bottom:20px">Related links</h2>
[link-preview url=&#8221;https://blog.marvelapp.com/&#8221;]

</div>

Marvel Enterprise 3

<div class="gallerycontainer boxShadow-subtle react_hide" style="width:100%;position:relative;display:inline-block; padding:20px;background:#fff; clear:both; 

margin-bottom:20px;"><br />
[post_gallery]
</div>
<div class="gallerycontainer boxShadow-subtle" style="width:100%;position:relative;display:inline-block; padding:20px;background:#fff; clear:both; margin-

bottom:20px;"></p>
<h2  style="font-size:22px;padding-bottom:20px">User Testing v2 by Marvel </h2>
<p>Prototyping meets User Testing.Get video, voice and analytical feedback on designs and prototypes in just a few clicks. Now in private beta.Whether you&#8217;re running an in-person user interview or a remote usability test, you’ll be able to capture and view every tap, click, comment and reaction on your prototype just by sharing a link.
</p></div>
<div class="gallerycontainer boxShadow-subtle react_hide" style="width:100%;position:relative;display:inline-block; padding:20px;background:#fff; 

clear:both;"></p>
<h2  style="font-size:22px;padding-bottom:20px">Related links</h2>
<p>[link-preview url=&#8221;https://marvelapp.com/enterprise&#8221;]</p>
</div>


User Testing v2 by Marvel

<div class="gallerycontainer boxShadow-subtle react_hide" style="width:100%;position:relative;display:inline-block; padding:20px;background:#fff; clear:both; margin-bottom:20px;">
[post_gallery]
</div>
<div class="gallerycontainer boxShadow-subtle" style="width:100%;position:relative;display:inline-block; padding:20px;background:#fff; clear:both; margin-bottom:20px;">
<h2  style="font-size:22px;padding-bottom:20px">About The Design Thinking Workshop Kit</h2>
<p>This Design Thinking Workshop Ket from Marvel helps you create a hands-on workshop that will give you and your team a simple, fun and reusable process using the basic principles of Design Thinking for creating new features, apps, websites or products.</p>
</div>
<div class="gallerycontainer boxShadow-subtle react_hide" style="width:100%;position:relative;display:inline-block; padding:20px;background:#fff; clear:both;">
<h2  style="font-size:22px;padding-bottom:20px">Related links</h2>
<p>[link-preview url=&#8221;https://blog.marvelapp.com/introducing-design-thinking-workshop-kit/&#8221;]</p>
</div>


The Design Thinking Workshop Kit

<p>Import Sketch prototypes into Marvel.</p>


Marvel + Sketch

<p>Userflows turns your Marvel prototypes into interactive user journeys that give you a birds-eye view of how users will move from screen to screen, helping you tell a better story to developers, stakeholders and clients.</p>


Userflows — Made with the Marvel API

4 things you need to know about Atomic Design

How I use Webflow to build a side project to help designers connect

Introverted and designer: how I facilitate workshops

UX Research for Brand Colour

Building a Design System? Start with a map

Designing with design systems at Hadronapp

Design Articles Without The Paywall: Open Stories

Enter the 3D Coding World: React + ThreeJS = R3F

Building Letter: The Product as the Prototype

<p>Last week we launched the new Prototypr 3, with an open space to publish articles without the boundaries of sign up walls and popups. We finished <a href="https://prototypr.io/post/design-articles-without-the-paywall-open-stories/">3rd on Product Hunt</a>, and are already at nearly 3,000 members!</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/Screenshot-2020-05-19-at-22.25.37-1024x559.png" alt="" class="wp-image-51567"/><figcaption>Prototypr Open Stories</figcaption></figure>



<p>And today, I'm excited to share our new editor - now you can directly contribute to our <a rel="noreferrer noopener" href="http://prototypr.io/posts" target="_blank">Open Stories</a> section from a new editing dashboard. The publishing tools include:</p>



<ul><li>📝 <strong>An Editor</strong>: Write and edit your posts.</li><li>🖼 <strong>Media Library</strong>: Easily upload images for your articles.</li><li>👁 <strong>Preview</strong>: See how your drafts will look when published.</li></ul>



<h2>Open design, open content</h2>



<p>Traditionally, blogs and educational content in the design/development industry have been openly accessible for anyone on the web to learn from, no matter their background. Recently though, we’ve seen a rise in gated content, which has also been known as ‘the great paywall mania’ (well, I made that term up):&nbsp;</p>



<figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://prototypr.io/wp-content/uploads/2020/05/3Ow3w1w.png" alt="" data-id="51507" data-full-url="https://prototypr.io/wp-content/uploads/2020/05/3Ow3w1w.png" data-link="https://prototypr.io/?attachment_id=51507" class="wp-image-51507"/><figcaption class="blocks-gallery-item__caption">Washington Post Paywall</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://prototypr.io/wp-content/uploads/2020/05/ACM_rGyg.png" alt="" data-id="51508" data-full-url="https://prototypr.io/wp-content/uploads/2020/05/ACM_rGyg.png" data-link="https://prototypr.io/?attachment_id=51508" class="wp-image-51508"/><figcaption class="blocks-gallery-item__caption">Medium Membership</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://prototypr.io/wp-content/uploads/2020/05/eNsVS-Fr-1024x552.png" alt="" data-id="51509" data-full-url="https://prototypr.io/wp-content/uploads/2020/05/eNsVS-Fr.png" data-link="https://prototypr.io/?attachment_id=51509" class="wp-image-51509"/><figcaption class="blocks-gallery-item__caption">LA Times Popup</figcaption></figure></li></ul></figure>



<p>It must be noted here that paid publications such as the Washington Post and LA Times are written by professional news journalists. This makes them tricky to compare with premium blogging platforms like Medium, where anyone can write. </p>



<p>Running a paid Medium publication with Prototypr, I love that authors can earn money directly from their writing, but there’s another side to it too.&nbsp;</p>



<p>Some content just doesn’t fit the paywall model:</p>



<ul><li>💰 Articles with little research don’t fit - paying members expect high quality.</li><li>👎 Content that doesn’t fit the publication’s calendar will get rejected.</li><li>😢 Subscribers are unlikely to want to read design case studies, that showcase work rather than teach them something new.</li></ul>



<p>That's not even mentioning the ethical dilemma of restricting content to people who can afford it. As famous illustrator extraordinaire, Pablo Stanley puts it:</p>



<blockquote class="wp-block-quote"><p>“The knowledge behind our craft should not be kept behind gates but rather freely accessible to the world.” </p><cite>- Pablo Stanley</cite></blockquote>



<p>Most of what I learned, including the skills to make this site came from free resources I found on the web, so I agree. And like Pablo, I was guilty of pirating some Adobe software as a student 😂. This is my favourite bit of the <a rel="noreferrer noopener" href="https://uxdesign.cc/open-doodles-5341a677f20c" target="_blank">Open Doodles article</a>:</p>



<blockquote class="wp-block-quote"><p>When I was starting as a designer, there was no one around me to teach me the craft, and I was broke as hell. I wanted to learn how to do digital art, but I had no money to get the programs. So, I had to pirate software (sorry Adobe) and even steal the CDs that used to come inside tech magazines.</p></blockquote>



<p>So apart from your own website, where is good to publish something that you want to share with an audience? What about just writing for fun, or even sharing information that is in the public interest?</p>



<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Disappointed to see an article like this behind a paywall!🤦‍♀️I'm all for getting paid for your work but work rights and industry problems concerns all of us. Everyone being able to read this free of charge is what will pay off the most for all of us in the end <a href="https://twitter.com/jamalnichols?ref_src=twsrc%5Etfw">@jamalnichols</a>. <a href="https://t.co/7AZKAUR8WN">pic.twitter.com/7AZKAUR8WN</a></p>— Signe Roswall (@signeroswall) <a href="https://twitter.com/signeroswall/status/1261636775883177986?ref_src=twsrc%5Etfw">May 16, 2020</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



<h2>How to try it</h2>



<p>That’s why we’ve made this <a rel="noreferrer noopener" href="http://prototypr.io/posts" target="_blank">new space</a>. Of course you can still publish with us in the Medium partner program, it’s up to you! This new space provides another option:</p>



<ul><li>Anyone can read it, without restrictions.</li><li>Write about anything: we love side projects, case studies, and career learnings. </li><li>You control when your post is published (no approval needed).</li></ul>



<p>If your article is awesome, it'll be marked as a 'featured article', appear on the front of the stories page, and get sent out in our weekly newsletter.</p>



<p>👋 To access the editor, sign in, and then go to the <a rel="noreferrer noopener" target="_blank" href="https://prototypr.io/new-story/">new post page</a>. You'll see a button that opens the publishing dashboard:</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/Screenshot-2020-05-22-at-13.08.13-1024x729.png" alt="" class="wp-image-51716"/><figcaption>Open Publishing Dashboard</figcaption></figure>



<h3><strong>Tech stuff</strong></h3>



<p>If you’re curious about the tech involved, the editor we’re using is the magical <a rel="noreferrer noopener" href="https://wordpress.org/gutenberg/" target="_blank">WordPress Gutenberg</a> editor. It can handle contributor content, and is something stable for the short term.</p>



<p>In the future, we’ll be putting together a faster, custom editor! For now though, Gutenberg lets us get started right away.&nbsp;</p>



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/NRLnE82Q-1024x768.png" alt="" class="wp-image-51558"/><figcaption>Gutenberg Editor</figcaption></figure>



<p>I may not be a Steve Jobs-level guru (yet), but our tiny team has made an open blogging platform that reaches thousands of people every day. Our heart is at the core of everything we do here, and our actions show it.</p>



<p>Hop on board and see what we're creating!</p>



<blockquote class="twitter-tweet"><p lang="en" dir="ltr">So excited for this! The 1st contributor post published with the new <a href="https://twitter.com/Prototypr?ref_src=twsrc%5Etfw">@Prototypr</a> Editor👉🏽 <a href="https://t.co/cNBL73r1xW">https://t.co/cNBL73r1xW</a><br><br>Huge thanks to <a href="https://twitter.com/charlieyllobre?ref_src=twsrc%5Etfw">@charlieyllobre</a>! We're now an open design platform:<br><br>📝 New editor <br>💫 Publish straight away, without approval<br>👁 Open for anyone to read, for free <a href="https://t.co/VtBHREgE8M">pic.twitter.com/VtBHREgE8M</a></p>— gram (@graeme_fulton) <a href="https://twitter.com/graeme_fulton/status/1262716511761940483?ref_src=twsrc%5Etfw">May 19, 2020</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Maze is a user research platform that helps you get insights fast, early, and often.

Maze Discovery: Get user insights fast

<p>Designing presentations has never been this easy. Design slides in sketch and later convert it to an editable Powerpoint presentation for free using Deck</p>


Deck

<p>Create avatar illustrations in Sketch with this free library designed by <a href="https://twitter.com/pablostanley">Pablo Stanley</a>. Mix and match clothing, hair, emotions, accessories and colours.</p>


Avataaars

<p>A better way to browse your symbols. Make the most of your Design System by bringing symbols and UI Sticker sheet together.</p>
<p>This plugin lets you&#8230;</p>
<p>&#8212; Browse Symbols from multiple Libraries (All in one place)<br />
&#8212; True-to-size symbol preview<br />
&#8212; Drag-N-Drop Symbols and UI Kit / Stickers<br />
&#8212; Add documentation to your Sketch Library<br />
&#8212; [New] Share instances of the Symbol<br />
&#8212; [New] Works offline</p>
<p>Visit plugin website for more: http://symbol-browser.pratikshah.website</p>


Symbol Browser &#8211; Sketch Plugin

<p></p>
<p>Get real 3D mockups and elements directly in Sketch with Vectary&#8217;s new plugin. Vectary for Sketch allows you to import your 3D designs to Sketch and choose the angle you want. Also, you can set it up as a custom 3D mockup or element. A simple plugin with plenty of room for customization. </p>
<p></p>


Vectary for Sketch


<p>Zecoda turns your Sketch project into Vue.JS in no time. This means that you can automatically go from design to a fully responsive website.</p>


Zecoda


<p>Create your unique monsters using a single Sketch symbol or Figma component. Mix-and-match your monsters &#8211; it’s super easy! Just swap nested body parts and choose their color styles to create unique combinations.</p>



<p>Creatures is free for commercial or personal use under&nbsp;<a rel="noreferrer noopener" href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC Attribution 4.0&nbsp;</a>International License.</p>


Creatures

<p>Sympli is an enterprise-grade, integrated collaboration and workflow platform for building digital products. </p>
<p>It consists of a couple tools: Sympli Versions, and Sympli Handoff. </p>
<p>&#8211; Versions lets you store and collaborate on Sketch mockups with branches and unlimited version history.<br />
&#8211; Handoff helps automate the handoff of designs, specs, style guides and assets for designers, developers &#038; stakeholders.</p>


The Design Toolbox for All You Need

Design Articles Without The Paywall: Open Stories

Daily Toolbox

🔥 Latest Tools

Open Stories

☕️ Reading List

Creators

Jon Yablonski

Sr. Product Designer and Author