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!

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;"> 
[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">unDraw for XD</h2>
Beautiful images for your client and personal design projects, without attribution. A completely different kind of plugin, exclusively on XD.
</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://xd.undraw.co/#learn_more&#8221;]
</div>

unDraw for XD

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

Adobe XD Wireframe Kits &#8211; FREE

Your tool to translate design into code.

Yotako

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

Stark

Generate gorgeous confetti patterns in 1 click within Adobe XD.

Confetti for Adobe XD

Generate illustrations in Sketch and Figma. Wrroom lets you build illustrations with hundreds of drag and drop elements. As well as an illustration builder, it comes with an avatar creator to create faces with different expressions.

Wrrooom! Illustration Constructor

Typeout is a rich and quirky library of UX copy that you can add to your Figma designs. &#8220;Like Unsplash for UX copy&#8221;, you can quickly grab copy suggestions in a couple of clicks.

Typeout for Figma

Organise your Figma files! Raven lets you jot down notes for every screen in your design, track and update the progress of your work, and even sync your work to Trello.

Raven for Figma

The Overflow plugin extends Figma’s functionality to create beautiful user flow diagrams and stunning design presentations like never before.
<ul>
<li>Sync your artboards</li>
<li>Sync prototype links</li>
<li>Set export fidelity</li>
<li>Maintain design layers</li>
</ul>

Overflow for Figma

Turn your Figma layers into high-quality GIFs with Gifmock for Figma! Features include:
<ul>
<li>Frame ordering</li>
<li>Per frame delay </li>
<li>Pixel preview</li>
<li>Measurement</li>
<li>Retina support </li>
</ul>

Gifmock for Figma

The Figma-Low-Code project allows you to render your Figma designs directly in VUE.js applications. The core of the solution is the Figma VUE.js component, which turns the visual design into HTML, CSS and JavaScript. Through data- and method-binding developers can focus on business logic, without worrying about design hand-offs.

Figma Low Code

Start full-control voice prototyping for free.

ProtoPie - Full-control voice prototyping

<figure class="wp-block-image size-large"><img data-src="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/28101108/Post-Header-Image-2-1024x465.jpg" alt="" class="wp-image-113955"/></figure>


<h2>Creator Series | Ep. 5 &#8211; Meet Christine Nishiyama</h2>


If you’re looking to ditch your regular job to start your own creative business, this episode of Creator Series is for you! Meet Christine Nishiyama, artist and founder of <a href="https://might-could.com">Might Could Studios</a>, and teacher to over 70,000 aspiring and established artists.


<a href="https://twitter.com/might_could">Christine</a> made drawing her full-time career for over 7 years, moving from full-time illustrator to running an online artist community. She’s also a published author!


We’ve asked her what it takes to make such a transition, and what it’s like to build something as huge as Might Could Studios being an independent artist! Find out how to prioritise tasks, balance jobs, and learn new skills.


&#8230;but let’s start with Chrisitine’s spirit animal:


<h3>1. If you had to be a mix of two animals, which would you choose?</h3>


Oh, definitely a tarsier (that primate with huge eyes) mixed with a hawk because I’d basically be a flying fluff ball! You could call me a Tarawk.


<h3>2. You started your own Art business completely from scratch 😲 &#8211; can you give us an overview of what you do?</h3>


I’m Christine Nishiyama, artist and founder of Might Could Studios. I basically do 4 things: I write weekly essays on creativity, run a drawing challenge (#MightCouldDrawToday), host an online artist community (Might Could Studiomates), and I also make books (currently illustrating the 3rd in a 4-book series with Scholastic, called&nbsp;Layla and the Bots.)


<h3>3. We love your illustrations &#8211; how did you know art was the right direction for your career?</h3>


Thank you! I started drawing as a kid and basically taught myself to draw by copying Pokemon and Sailor Moon. As I got older I decided to go into graphic design, but once I got a full-time job, it wasn’t quite as creative as I had hoped. Over the years, I got back to my roots and began working full-time as an illustrator. I think I’ve always been drawn (pun!) to drawing because it’s such an amazing way of communicating. I can say so much in a drawing that can be said in words. I’m pretty soft-spoken and mumble a lot in-person, but I found my voice in my art and learned how to speak boldly and honestly. 


<blockquote class="wp-block-quote">
I can say so much more in a drawing than can be said in words.
</blockquote>


I’m now able to use art as a way to communicate with others and myself, uncovering the thoughts and emotions (I call them blobbies) in my mind and letting them all out on the page!


<figure class="wp-block-image size-large"><img data-src="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/24142830/image_2.jpg" alt="" class="wp-image-113612"/></figure>


<h3>4. How did you transition from freelance to running art classes at Might Could Studios? What’s it like working on your own?</h3>


Yeah, I’ve been self-employed since 2012, and it’s been amazing. It was a huge struggle at first to transition into freelance life, learning how to balance client communication, marketing, finances, doing the actual work, and personal life. But I’m a pretty self-motivated person and I love having control over my time and work choices. I think it’s extra hard to work on your own as an artist because there’s a lot more self-worth and personal stuff tied up in your job, rather than say, an accountant, or something. There’s a really nice&nbsp;<a href="https://shop.adamjk.com/products/do-what-you-love-print" rel="noreferrer noopener" target="_blank">Adam JK artwork</a>&nbsp;that sums it up nicely.


<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><a href="https://might-could.com"><img loading="lazy" data-src="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/24142921/Screenshot-2020-08-24-at-15.29.03-1024x802.png" alt="" class="wp-image-113615" width="410" height="321" data-srcset="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/24142921/Screenshot-2020-08-24-at-15.29.03-1024x802.png 1024w, https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/24142921/Screenshot-2020-08-24-at-15.29.03-300x235.png 300w, https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/24142921/Screenshot-2020-08-24-at-15.29.03-768x602.png 768w, https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/24142921/Screenshot-2020-08-24-at-15.29.03-1536x1203.png 1536w, https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/24142921/Screenshot-2020-08-24-at-15.29.03-2048x1604.png 2048w" sizes="(max-width: 410px) 100vw, 410px" /></a></figure>
</div>


<h3>5. A comfortable “regular” job vs. the hard path &#8211; why did you choose to go your own way?</h3>


Well, I tried out the whole “regular job” thing first. I worked for a year as a designer in a studio, but there was always just something itching at the back of my neck. I didn’t want to be designing other people’s ideas for the rest of my life — I wanted to explore my own. I could have chosen to have the regular day job, and moonlight creative work, but I’m just not cut out for an office job. I love working from home in my pajamas with my dog, and being able to go on walks and hikes on a Wednesday afternoon. That freedom is extremely important to me, and it was worth the pay cut and uncertainty that comes with working on your own.


<h3>6. How do you stay disciplined to run your own business &#8211; do you have a routine?</h3>


I’ve always been very routine-oriented, and I used to have a pretty regimented daily routine, doing the same things at the same times. But last October, we had our first baby — pseudonym: Butterbean — and all that got thrown out the window! She’s now 10 months old, and we’ve been able to figure out a sort-of-routine, but having a baby and working from home definitely requires more flexibility. Sometimes she naps for 30 mins, sometimes for 2 hours, and you gotta use that time to get stuff done! It’s made me more efficient and I can get into that Deep Work zone a lot quicker now than I used to.


<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><img loading="lazy" data-src="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/25110217/EUrv4jkXsAA08-F.jpg" alt="" class="wp-image-113757" width="360" height="360" data-srcset="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/25110217/EUrv4jkXsAA08-F.jpg 1024w, https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/25110217/EUrv4jkXsAA08-F-300x300.jpg 300w, https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/25110217/EUrv4jkXsAA08-F-150x150.jpg 150w, https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/25110217/EUrv4jkXsAA08-F-768x768.jpg 768w" sizes="(max-width: 360px) 100vw, 360px" /></figure>
</div>


Basically, my day-to-day is now waking up around 6:30 am with Butterbean and playing, feeding, being with her until 9 am. Then on some days my husband, who also works from home, watches her, and some days our nanny comes. Then I get to work until noon when we all break for lunch. If it’s a nanny day, I work until 3, or if it’s not then it’s my turn to play with Butterbean for the afternoon. We’ll often go for a walk, or a hike, or something outside. Then I cook dinner, and put Butterbean down for sleep around 7 pm, and get some relaxation time to myself. So some days I get to work for ~6 hours and sometimes just 3. But those hours are so much more productive than they used to be!


<h3>7. How do you prioritise what to work on? Can you take us through your secret process?</h3>


This totally depends on what the project is! For Layla and the Bots, the book series I’m working on right now, I sketch first in Procreate on my iPad, receive feedback from Scholastic, revise the sketches on Procreate, and then bring it all into Photoshop on my MacBook Pro. From there, I draw the final artwork in Photoshop using my iPad, Apple Pencil, and Astropad, which basically mirrors my MacBook screen onto my iPad.


<figure class="wp-block-image size-large is-resized"><img loading="lazy" data-src="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/25110942/51SdT7KsbaL.jpg" alt="" class="wp-image-113762" width="233" height="339" data-srcset="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/25110942/51SdT7KsbaL.jpg 344w, https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/25110942/51SdT7KsbaL-206x300.jpg 206w" sizes="(max-width: 233px) 100vw, 233px" /></figure>


For my essay illustrations, like on Prototypr.io, I write the essay in Notion, I let it sit, then reread and revise it, and then I draw the illustrations in my sketchbook with a Tombow Dual Brush Pen. Then I snap a photo of the illustrations, edit them in Photoshop, and send out the essay!


<h3>8. We’re familiar with design tools, but what are your go-to tools as an illustrator?</h3>


Oh, goodness! Too much! Well, I already mentioned my digital tools above, and most of my tools are for my sketchbook. I draw something in them pretty much every day, and have a huge stack of all different sizes and kinds dating back to High School! I tend to go through obsessions with tools, cycling through different ones. Right now I’m actually kind of in-between and searching for my next tool obsession. Previously, it’s been Posca paint pens, Copic markers, magic color-changing colored pencils, and watercolor brush pens. But my go-to is always the Tombow Dual Brush Pen, and that’s what I use for the essay illustrations. As for sketchbooks, I’ve used all different kinds, but my current favorites are the Strathmore Mixed Media 75lb (for Poscas) and the Fabriano EcoQua Notebook for Tombows. I usually have about 5 sketchbooks going on at once, each for a different tool or series.


<h3>9. You write a lot too! How important is writing to your business, and how did you wind up becoming a writer?</h3>


The writing aspect was a complete surprise to me. I never considered myself a writer, but here I am now having written over 100 weekly essays to a list of over 12,000 people! It’s insane. It’s become one of my absolute favorite and most fulfilling aspects of my job. And funnily enough, it evolved for totally selfish reasons. I’ve struggled with a lot of the same issues I write and teach about, and when I’m writing these essays, I’m almost always writing to myself. I choose topics and write what I need to hear, giving myself a pep talk or a kick in the butt… whatever I need at that moment. I think that’s what makes the essays resonate so much with people, I’m not writing as someone who has all the answers, I’m writing as someone who’s in the trenches, going through the same issues you are, and just doing my best to learn how to work and live as an artist. 


<blockquote class="wp-block-quote">
I’ve struggled with a lot of the same issues I write and teach about, and when I’m writing these essays, I’m almost always writing to myself.
</blockquote>


When I start an essay I have no idea where it’s going, but along the way, I’m able to crystallize my thoughts and really organize the way I think about things. It’s been amazing and has given me a really clear philosophy on artmaking and creativity that now guides everything I do.


<h3>10. How important is it to be consistent? How do you keep coming up with new topics and material for your writing?&nbsp;&nbsp;</h3>


It is difficult to keep it up consistently, but sending out the essays weekly actually helps take the pressure off them. If I were just aiming to make a series of essays as a group, I’m sure I would get caught up in trying to make a cohesive series, trying to make them perfect, and organizing ideas for so long I’d never actually get anything done. But knowing that I’m doing one every week breaks it up into doable chunks. I spend every Monday writing the essay, and wherever it’s at on Tuesday morning, well, that’s what ya get. There’s no procrastinating when you have the accountability of a weekly schedule.


<figure class="wp-block-image size-large"><img data-src="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/25111257/unnamed-1-1.jpg" alt="" class="wp-image-113764"/></figure>


Sometimes though, I will admit, that the pressure has gotten to be too much, and I’ve gotten better at giving myself breaks. That’s one reason I love that the essays are free, as I don’t need the added pressure and stress of having to please paying readers. I write these essays on whatever I want to, and although I do publish them ALMOST every week, I’m willing to prioritize my mental health when I need to a take a break. I know now that that’s what will allow me to keep doing this sustainably.


<h3>11. Also, how do you keep a good balance between your job, writing, personal life?</h3>


I’ve gotten pretty good at splitting up my days into different activities. Each day of the week has different projects that happen weekly, so that gives my job a stable routine. For example, I spend every Monday writing and illustrating that week’s essay, and then send it out every Tuesday morning. I also have designated sketchbook drawing times scheduled on my calendar each week to make sure I make time for that too.


<figure class="wp-block-image size-large"><img data-src="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2020/08/25110542/MC-resource-not-a-teacher-illos-13-1.jpg" alt="" class="wp-image-113760"/></figure>


I also know freedom of my time is a huge reason why I choose to run my own business, so I’m careful to keep up my work/life balance. I don’t work past 6pm or on weekends now unless I absolutely have to. When you work from home it can be really easy to just work all the time (especially when you love your job!), but I know I need breaks and other hobbies and activities to live a healthy life. Plus, with Butterbean in our life now, I want to be sure to prioritize being with her as often as I can! It’s nice to have her to remind me of what’s important. She helps to anchor me in the present moment and step away from my computer to enjoy exploring the world around us!


<h3>12. You’ve written some articles on creative productivity. What’s the biggest advice you can give to someone that’s struggling on this matter?</h3>


My philosophy is that artists (and people in general) think we need more techniques and hacks, but what we really need is a change of mindset. We think we can find the perfect routine or time-blocking technique or kanban board to help us “Get Things Done”, but usually the issues blocking us are much deeper than that. We’re often way too hard on ourselves and do too much worrying and future-tripping instead of being present and doing the thing TODAY. You don’t have to do some big, extravagant thing — just draw something for 5 minutes. Those little bits of creating add up, and then you look back, and you’re like, “man! I’ve filled up all those sketchbooks”! There’s no rush.


<blockquote class="wp-block-quote">
We’re often way too hard on ourselves and do too much worrying and future-tripping instead of being present and doing the thing TODAY.
</blockquote>


<h3>13. Finally, you have extensive industry experience. Looking at the current picture, what would you say to someone that’s just starting in design?</h3>


I’m so happy to see where the world of art and design is going right now, and the whole designer as author movement. 


<blockquote class="wp-block-quote">
Designers used to be seen as just a hand to carry out someone else’s ideas, but now they’re really rising up and taking more action on their own ideas!
</blockquote>


So I guess I’d say to someone just starting out: you don’t have to wait on finding “cool” clients to work on projects you’re passionate about — you can make their own stuff! Create your own projects! Bring to life your own ideas! Be your own client. Start something fun you love to work on and see where it takes you.&nbsp;🙂


<h3>14. Where can we follow your work?</h3>


Thanks for reading! If you’d like to get the weekly creativity essays I talked about, you can&nbsp;<a href="https://might-could.com/emails/prototypr" rel="noreferrer noopener" target="_blank">join my email list</a>&nbsp;and check out our artist community,&nbsp;<a href="https://might-could.com/studiomates/prototypr" rel="noreferrer noopener" target="_blank">Might Could Studiomates</a>!


<figure class="wp-block-image"><img data-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"/></figure>


<a href="https://blog.prototypr.io/@might_could" target="_blank" rel="noreferrer noopener">Read more from Christine in our blog</a> →


<a href="https://blog.prototypr.io/you-need-to-be-drawing-consistently-15d8b5a1f81f">You Need to Be Drawing Consistently</a> <a href="https://blog.prototypr.io/online-classes-dont-work-deab7de56851">Online Classes Don&#8217;t Work</a> <a href="https://blog.prototypr.io/the-5-types-of-creative-block-dea9dcf2a8e1">The 5 Types of Creative Block</a>

Breaking out of the 9 to 5 Grind as an Illustrator

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

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;"> 
[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">User Testing v2 by Marvel </h2>
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.
</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://marvelapp.com/enterprise&#8221;]
</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>
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.
</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/introducing-design-thinking-workshop-kit/&#8221;]
</div>

The Design Thinking Workshop Kit

Import Sketch prototypes into Marvel.

Marvel + Sketch

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.

Userflows — Made with the Marvel API

How to Pick More Beautiful Colors for your Data Visualizations

Figma Low Code – A new way to tackle design hand-offs

Have You Prepared to Join an Early-Stage Startup?

No more scattered notes! Build a "Productivity System" using this Notion template

Locomotion in VR: Procedural Generation of a Scene

The How (and Why) of User Flows

6 Tips to Improve Dark Theme

All for Tech, and Tech for All: Inclusive Design Is Just Better Design

The Rounded User Experience

Being Shady: How to Use Gradient Color in UX Design

Design Articles Without The Paywall: Open Stories

Redesigning a Consultancy Website for Non-Profits— A Case Study

Fund your Passions: Ko-Fi + Prototypr

How to simplify your design

Design Sprint as it is: Part 1 of a Design Sprint Trilogy

How to design a sleek dashboard UI

Prototypr Publisher: A Better Way to Reach Your Audience

5 Funky Tools That Are Great For Designers

Introverted and designer: how I facilitate workshops

Text fields & Forms design — UI components series

UX Research for Brand Colour

24 hours Startup: Build a Meal Kit Delivery Startup &amp; Mobile App.

100 Days of UI — Should You Take One Up?

<figure><img src="https://prototypr.io/wp-content/uploads/2020/09/SimpleProcess_5a-2.png" data-image="115904"></figure>
Figma-Low-Code is an open-source project that enables the direct inclusion of Figma designs in VUE applications. By ensuring that the Figma design stays the single source of truth, this approach reduces the need for design hand-offs and front-end code significantly.
A constant pain point during the development of an application is the hand-off between the design and the development team. Often this process is not frictionless. The design team creates a set of graphics and prototypes, which serve as the source of truth and specification for the development team. The development team implements the visual design in the desired technology, which includes the translation of the design into front-end code and business logic, as well as the wiring between the two. As the development evolves, the implementation becomes a second source of truth, and keeping the design and the code base in sync can be a painful exercise.
Handoff tools, such as Zeppelin, ease this pain by generateíng code snippets from the visual design and allowing a copy-paste workflow to ensure that the design stays the single source of truth. This approach can be further accelerated by using code generation tools such as Supernova. These tools take the visual design and generate front-end code. The developers take-over the code, improve it, include the business logic and add the wiring to the generated front-end.


<figure><img src="https://prototypr.io/wp-content/uploads/2020/09/LowCode-Workflow-7.png" data-image="115874" alt="Code Generation never works in agile projects"></figure>
This approach works perfectly when the design is fixed. However, in agile projects the situation is often different. The design changes frequently, in particular in early iterations. New user input and insights are gathered, and the design is improved to reflect the new learnings. Code generation fails at this point. It is not possible to simply regenerate the code base, because it would overwrite the manual changes that have been done by the development team. The solution of these tools is to generate a new code base, and leave the tedious task of merging up the developers.
<h1>Low Code as a solution</h1>
Low-Code is a term which describes a family of technologies, which aim to minimize the amount of manually written code. The intuition behind this approach is that certain aspects of an application can be visually modelled by domain experts. These models can be interpreted at runtime by special software components. The visual model serves as the single sources of truth in the application. Figma-Low-Code adopts the Low-Code idea for the development of user interfaces.
The tricky decision when it comes to Low-Code is to find the right balance between modelling and coding. For user interfaces, the front end code is a great opportunity for Low-Code, as the design is always created in a visual design tool. Business Logic is different however. Some aspects like workflows can be easily modelled with tools like BPMN, but complex decision logic or connections to backend systems are often easier expressed in code. The main question is where to draw the line. 
Some tools try to apply the Low-Code paradigm for the entire user interface and create App Builders, that allow for instance the visual configuration of data operations or REST requests. In practise, this methodology suffers from several major drawbacks. First, it usually requires a lot of interactions with a manyfold of, menus, text- and dropdown boxes and so on. This makes the creation of entire applications cumbersome. Simple operations that can be expressed in one line of code, take much longer and make the developers less productive. Second, this approach is prone to errors. While code is checked by the compiler (and other utils) automatically for errors, visual tools lack the sophisticated and mature validation capabilities that developers are used to. For example, simple typos can lead to problems and debugging is often more difficult when compared to a full fledged development environment such as Visual Studio Code. Last, the closed nature of these App Builders, makes it impossible to utilize the wide ecosystem of external libraries such as NPM. 
We have therefore decided to focus the Fima-Low-Code project solely on the front-end part of a user interface, and leave the implementation of the business logic in code. The core of the solution is the Figma-Low-Code component which reads the visual design and creates the front-end automatically on the fly. As a result, changes in the design are immediately updated in the application. The wiring between the front-end component and the business logic is achieved through method and data binding, which is defined in a Figma plugin. For example, when a user changes the value of a text field and clicks a button, the data variable that is bound to the text field is updated and afterwards the method that is bound to the button is executed. The implementation of the methods and data happens in plain JavaScript and leaves the developer with the strong tooling support that they are used to. To make this approach useful for real application development, the Low-Code component allows full UI customizations through extension points and custom child components. 
We believe this approach offers the best balance between visual modelling and coding. The visual design of the user interface is created in Figma and the business logic is implemented in VUE.js with the development environment of choice. As a result, the development process is simplified as there is no hand-off and the amount of front-end code is drastically reduced.
<h2>Working with Figma-Low-Code</h2>
Using Figma-Low-Code is dead simple. Once an initial design (even wireframes) is ready, the developers use the Figma-Low-Code <a href="https://www.figma.com/community/plugin/858477504263032980/Figma-Low-Code" target="_blank" rel="noopener noreferrer">plugin</a> to add metadata to the design. This metadata contains the wiring between the design and the application data and business logic. In addition the plugin allows to specify which UI elements to use, e.g. text input fields to enable the user to enter data.
<figure><a href="https://www.figma.com/community/plugin/858477504263032980/Figma-Low-Code" target="_blank" rel="noopener noreferrer"><img src="https://prototypr.io/wp-content/uploads/2020/09/PluginLowCode-1.png" data-image="115887" alt="The Figma plugin defines the wiring between design and business logic"></a></figure>
Afterwards, the Low-Code component must be imported into the VUE application and configured with a link to the Figma design. The design is automatically rendered without a single line of UI code. Also, prototyping links work out of the box. The developers can focus on the implementation of the data objects and business methods. Through the wiring defined in the plugin, data is shown at the right places and the business logic is invoked on user interactions. Changes in the design are automatically updated, and as there is no front-end code, there is no risk of code breaks and similar complications. 
<h2>How does it work under the hood?</h2>
The Figma-Low-Code works currently with VUE.js, and is just another NPN dependency. The component is placed at the root of the application. It loads the Figma design from a file (or during development from the Figma API) and creates the required DOM elements and CSS styles on the fly.
<figure><a href="https://github.com/KlausSchaefers/figma-low-code" target="_blank" rel="noopener noreferrer"><img src="https://prototypr.io/wp-content/uploads/2020/09/LowCode-Workflow-8.png" data-image="115895" alt="The VUE Figma component renders the design on the fly"></a></figure>
The data exchange between the LowCode component and the application is based on a ViewModel and data binding. In the plugin, the developers define the path of the data variable that should be bound to a certain UI element. The ViewModel holds the UI related data, and allows a clean separation between UI and business logic. When a screen is loaded, the LowCode component will populate the element with the right data from the ViewModel and user changes are automatically written back to the view model.
The wiring between UI elements and the business logic is also defined in the plugin. The developers specify the name of the method, which should be called for a certain event, for instance when a user clicks on a button, or data was changed. During runtime, the LowCode component checks if a method with the given name exists and executes it.
Extensibility was a key concern during the design of the Figma-Low-Code project. The generated CSS code follows a simple pattern (.screen-name .element-name) and can be overwritten or extended to introduce for instance hover or focus styles. When it is not possible to model the desired behavior of a screen section in Figma, one can define custom VUE components in the Figma plugin. During runtime, these components will be loaded and placed into the design. The developer has the full freedom and fine grained control over the&nbsp;behavior of these components.
The Figma-Low-Code project is open-source and free to use. The project enables a new kind of collaboration between developers and designers and reduces the friction between both roles. The visual design maintains the single source of truth, and allows the front-end developers to focus on business logic and backend connectivity. Design changes are automatically updated in the UI, without jeopardizing the existing code base. You can find more information at our <a href="https://github.com/KlausSchaefers/figma-low-code">GitHub</a> page:&nbsp;<a href="https://github.com/KlausSchaefers/figma-low-code" target="_blank" rel="noopener noreferrer">https://github.com/KlausSchaefers/figma-low-code</a>

Component8 is a Sketch plugin, which stores 1000+ crafted components. You can use them in Sketch by drag &amp; drop.

Component8

🐙 SQUID 2.0 User Flow Kit is the Library for Sketch and Figma. 
It helps to create User Flows and other diagrams quickly 🚀. All components may be 🎨 styled within seconds to match your project brand..

SQUID 2.0

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

Deck

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.

Avataaars

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

Symbol Browser &#8211; Sketch Plugin

Make your phone more yours now. Access beautifully crafted more than 110 minimalist icons for iOS 14 now. Made by <a href="https://twitter.com/tlgcav">Tolga Cavdar</a>.

Figma Low Code – A new way to tackle design hand-offs

Klaus Schaefers

Daily Toolbox

🔥 Latest Tools

Open Stories

☕️ Reading List

Creators

Christine Nishiyama

Founder of Might Could

Popular Stories

The Rounded User Experience

By Sandhya Subramaniyan

Redesigning a Consultancy Website for Non-Profits— A Case Study

By Tamara Sredojevic

Fund your Passions: Ko-Fi + Prototypr

By Graeme Fulton