Skip to content
< meta name=" viewport "material=" width= device-width, initial-scale= 1, shrink-to-fit= no "><link data-react-helmet="true" rel="canonical" href="https://www.sitepoint.com/figma-prototyping/"><link data-react-helmet="true" href="/favicons/32x32.png" rel="icon" type="image/png"><link data-react-helmet="true" href="//dab1nmslvvntp.cloudfront.net"><link data-react-helmet="true" href="//d2sis3lil8ndrq.cloudfront.net"><link data-react-helmet="true" href="https://bid.g.doubleclick.net"><meta data-react-helmet="true" name="description" content="One problem with mockups is that they're often static. But they don't have to be! Learn how to create an interactive mockup with when prototyping with Figma."><meta data-react-helmet="true" property="og:title" content="An Introduction to Prototyping with Figma - SitePoint"><meta data-react-helmet="true" property="og:description" content="One problem with mockups is that they're often static. But they don't have to be! Learn how to create an interactive mockup with when prototyping with Figma."><meta data-react-helmet="true" property="og:type" content="website"><meta data-react-helmet="true" property="og:image" content="https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-6.jpg"><meta data-react-helmet="true" property="twitter:account_id" content="15743570"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" name="twitter:image" content="https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-6.jpg"><meta data-react-helmet="true" name="twitter:title" content="An Introduction to Prototyping with Figma - SitePoint"><meta data-react-helmet="true" name="twitter:description" content="One problem with mockups is that they're often static. But they don't have to be! Learn how to create an interactive mockup with when prototyping with Figma."><link rel="manifest" href="/manifest.webmanifest"><meta name="theme-color" content="#3a3a3a"><link rel="apple-touch-icon" sizes="48x48" href="/favicons/48x48.png"><link rel="apple-touch-icon" sizes="72x72" href="/favicons/72x72.png"><link rel="apple-touch-icon" sizes="96x96" href="/favicons/96x96.png"><link rel="apple-touch-icon" sizes="144x144" href="/favicons/144x144.png"><link rel="apple-touch-icon" sizes="192x192" href="/favicons/192x192.png"><link rel="apple-touch-icon" sizes="256x256" href="/favicons/256x256.png"><link rel="apple-touch-icon" sizes="384x384" href="/favicons/384x384.png"><link rel="apple-touch-icon" sizes="512x512" href="/favicons/512x512.png"><link rel="preconnect" href="https://cdn.sanity.io"><link rel="sitemap" type="application/xml" href="/sitemap.xml"><link rel="alternate" type="application/rss+xml" title="SitePoint" href="/sitepoint.rss"><link as="script" rel="preload" href="/component---src-templates-post-post-js-56a90e757e16141d33ed.js"><link as="script" rel="preload" href="/framework-fca5a6c89ebf46562859.js"><link as="script" rel="preload" href="/app-8b50047186e4f6cca9b9.js"><link as="script" rel="preload" href="/styles-8d3db5124725dcff78a7.js"><link as="script" rel="preload" href="/ec1189df-089afae62ba468b39363.js"><link as="script" rel="preload" href="/linaria-3f2411e57aa668bbc1bd.js"><link as="script" rel="preload" href="/666dde8597d1f9d1c775385416e6ca4aab230ec4-5af9165cfe62b5d6d9ba.js"><link as="script" rel="preload" href="/commons-c23225565df8ce4ea245.js"><link as="script" rel="preload" href="/a9a7754c-0697aba322bf12a5c9fb.js"><link as="script" rel="preload" href="/webpack-runtime-04ec117e9e5448116644.js"><link as="fetch" rel="preload" href="/page-data/figma-prototyping/page-data.json?v=1" crossorigin="anonymous"><link as="fetch" rel="preload" href="/page-data/sq/d/3448431816.json" crossorigin="anonymous"><link as="fetch" rel="preload" href="http:///page-data/app-data.json?v=1" crossorigin="anonymous"></head><body id="readabilityBody"><noscript></noscript></p>
<div id="___gatsby">
<div tabindex="-1" id="gatsby-focus-wrapper">
<header class="szqta7"><a id="skip-navigation" href="https://www.sitepoint.com/figma-prototyping/?utm_source=rss#main-content" class="s40erwn">An Intro to Prototyping with Figma- SitePoint < link data-react-helmet= "real" href="http:/// favicons/32x32. png" rel =" icon" type=" image/png" ></p>
<section aria-label="Article header for An Introduction to Prototyping with Figma" color="design-ux" class="s1xu2uce">
<div class="wzjw2su">
<header class="i1ju85s6"></header>
<div data-type="book" class="s3srsdt">
<div>
<div data-layout="compact" class="spapid0">
<h4 class="t10axsgu">< meta data-react-helmet=" real" name=" description" material=" One issue with mockups is that they're
<div class="bk2yy1g">
<div class="book-cover cover-spine-overlay gatsby-image-wrapper"><img aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAZCAIAAAC+dZmEAAAACXBIWXMAAAsSAAALEgHS3X78AAAC8klEQVQ4y42UW08TQRTH9/u03V6hlAIWBMSq3CSKJGpUIBKjMSS8aaI+mPhgvDyZSOKDT0Y/BKEzsy29bLm0SHhQCRFCb2x32+6sL86ZdktLm0Dyy8nc/jNnzjkzgo6t58CmkyrWWoOPC+cSE7se7tQj3SZduuRmO55T7KBrvTQ2xBmk0X7K9EQUznYYxCIcFfbC+UCHTpytJ1tMa2kebOXUndn2xAFbgnXokovjZlBG2ANWYraTssPZeIPbNj3io4krVJ6kiWuAPAEkJ6k8bsgTxvq0sXELWGfcoPHLuuQRTkISHzFS88b2YyP10EgtQAN4At2tWdb4t7Nk7CzCms3bhjxOw9662EmjF2lyyti4A9OgnwfSC0aai7ceQHdrlq5P0+R1IzFKI91C04XDXpoYM1JzINi8S8HVGVN2D9rcecoaySmWPKEpqsROowEqj7F70niQRgfAndgIlUdhMD4CSY5fgqnYMMuZ0FKGdh5wF4+53cSpS86TRNQ4VSTkVG7bdtvluYKsZWSrcMzaqrZrlJFYCtmZrZVdXVzCjiIJKJExRhEPlLGrgh0a8StkUCM9FShGaxH5MqGggnoaxWx7i4r9heRS8fc35df3XPIZ20jFfXn5aS79Pi8vqiRQRo5CZPow+Tq3dr+E3dxzm0AJiIvSwPHuJ13dq6h/C7tfFSlYwMGj7eXsfuJo+0seXy0if27jZfbPSjb1kbmjI35yTUz6Cz8/lPJpLb+b21lWyCUF9R3EX+ynfhwkXh2HAsfoQmbzTWYvlEl/PibBalwEfgGLirrysbl8+m0u/S4be6QifxnZM6tD+ys3s6vDzOcS9uQiM4eJ59m1WQ35mgJWwaKGvZoUUEm/hrvK2A5RDInqqquE7NUIacitoF4NdVZw+2/IVo8kT7uN8mIw08tLCIv1BULLLyfyaZPa6npXbNxdaPPX1X6c+qdTxQt/AxEbF7cVd7DnxvEBYW5ZV/KcJQavRLP0+avA5vPATT4z/gP7deMY2smaEgAAAABJRU5ErkJggg==" alt><noscript><picture><source type="image/webp" srcset="https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-1.png&fm=webp 165w, https://websitedesign-usa.com/wp-content/uploads/2021/04/webp-1 248w, https://websitedesign-usa.com/wp-content/uploads/2021/04/webp-2 330w, https://websitedesign-usa.com/wp-content/uploads/2021/04/webp-3 495w, https://websitedesign-usa.com/wp-content/uploads/2021/04/webp-4 1056w" sizes="(max-width: 165px) 100vw, 165px"><source srcset="https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-1.png 165w, https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-2.png 248w, https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-3.png 330w, https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-4.png 495w, https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-5.png 1056w" sizes="(max-width: 165px) 100vw, 165px"><img class="lazy-load" loading="lazy" sizes="(max-width: 165px) 100vw, 165px" srcset="" data-srcset="https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-1.png 165w, https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-2.png 248w, https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-3.png 330w, https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-4.png 495w, https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-5.png 1056w" src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-src="https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-1.png" alt></picture></noscript></div>
</div>
<div class="p165lja" readability="8">
<p data-size="small" font-weight="400" class="s1aa88yd">typically fixed. They do not have to be! Discover how to develop an interactive mockup with when prototyping</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="shgz0o2">
<section aria-label="Article content for An Introduction to Prototyping with Figma" class="sqalzbe" readability="82.053027356411"><head></head><body readability="164.10605471282"></p>
<p><strong>with Figma.” >< meta data-react-helmet =" real" home =" og: title "material=" An Intro to Prototyping with Figma- SitePoint" >< meta data-react-helmet =" real" residential or commercial property=" og: description" material= "<em> One issue with mockups is that they’re typically fixed. They do not have to be! Find out how to develop an interactive mockup with <em>when prototyping with Figma.” >< meta data-react-helmet=" real "residential or commercial property= "og: image" material =" https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-6.jpg" >< meta data-react-helmet=" real" home=" twitter: account_id "material=" 15743570 ">< meta data-react-helmet =" real" name=" twitter: card" material =" summary_large_image" >< meta data-react-helmet=" real" name=" twitter: image" material= "https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-6.jpg ">< meta data-react-helmet= "real" name =" twitter: title" material=" An Intro to Prototyping with Figma- SitePoint ">< meta data-react-helmet=" real" name= "twitter: description" material=</p>
<p>” One issue with mockups is that they’re typically fixed. They do not have to be! Discover how to develop an interactive mockup with when prototyping with Figma.” >< link rel=" apple-touch-icon" sizes=" 144x144" href="/ favicons/144x144. png" >< link rel=" apple-touch-icon" sizes= "192x192" href</a> =”/ favicons/192×192. png” >< link rel= "apple-touch-icon" sizes=" 256x256" href="/ favicons/256x256. png" > < link rel=" apple-touch-icon" sizes=" 512x512" href="/ favicons/512x512. png" >< link rel=" alternate "type=" application/rss+ xml "title=" SitePoint" href="/ sitepoint.rss" > < link as=" script" rel =" preload" href= "/ framework-fca5a6c89ebf46562859. js" >< link as="script" rel =" preload" href ="/ styles-8d3db5124725dcff78a7. js" >< link as =" script" rel=" preload" href= "/ ec1189df-089afae62ba468b39363. js" >< link as =" script" rel =" preload "href="</em></p>
<p>/ linaria-3f2411e57aa668bbc1bd. js” > < link as =" script" rel=" preload" href ="/ commons-c23225565df8ce4ea245. js" >< link as=" script" rel =" preload" href="/ a9a7754c-0697aba322bf12a5c9fb. js ">< link as=" script" rel=" preload" href= "/ webpack-runtime-04ec117e9e5448116644. js" >< link as=" bring" rel =" preload "href= "/ page-data/figma-prototyping/page-data. json?v =1" crossorigin= "confidential" > < link as= "bring" rel=" preload" href="/ page-data/app-data. json?v= 1" crossorigin=" confidential "> Avoid to primary material< short article aria-label =" Post title: An Intro to Prototyping with Figma" class=" cG9zdDoxODIwNTA=" <strong>> Free JavaScript Reserve! < source srcset=" https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-1.png 165w, https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-2.png 248w, https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-3.png 330w, https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-4.png 495w, https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-5.png 1056w" sizes="( max-width: 165px) 100vw, 165px" >< img loading =" lazy" sizes=" (max-width: 165px) 100vw, 165px"
<p>srcset= “https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-1.png 165w, https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-2.png 248w, https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-3.png 330w, https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-4.png 495w, https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-5.png 1056w” src =” https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-1.png” alt > Write effective, maintainable and tidy JavaScript.RRP $ 11.95 Prototyping is the procedure of turning a fixed mockup</p>
<ul>
<li>into a vibrant and interactive mockup( much better referred to as a model). Bringing a fixed mockup to life lacks doubt among the most– if
<li>not the most– amazing action in the style workflow. It’s likewise very crucial that designers comprehend the style’s user circulation
<li>, and how it needs to operate and feel. What much better method to do that than by utilizing Figma, the very best style tool worldwide according to the 2020 Style Tools Study!.?.!? Prototyping with Figma is pleasurable and simple when you understand how it</em> works. Begin by replicating this fixed mockup( click Series of Interactions and after that Replicate to my drafts), and after that throughout the tutorial we’ll include a growing number of practical fidelity. Your regional copy needs to appear like this: Keep in mind: I’m presuming that you have at least a percentage of
<p>experience <strong>with modern-day UI style tools such as Figma or Sketch. Let’s begin with Artboard <strong>1, making the choice of cards that overflow the viewport horizontally scrollable. This is one example of how we <strong>can make our mockups vibrant <strong>without needing to produce what Figma</p>
<p><img class="lazy-load" src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-src="https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file.jpg" alt="Figma: horizontal scrolling" loading="lazy"></p>
<p>calls “Links”. Links direct us to brand-new Artboards, however that’s not what we’ll be performing in Action 1. Start by picking Cards from the Layers Panel (left sidebar ), and after that from the Style Panel( ideal sidebar this time )alter the Group choice to Frame utilizing the dropdown. I <kbd>will not dive into this excessive, however the<kbd>primary distinction <kbd>in between a frame and a group is that Groups cover their kids firmly, whereas Frames can be any size. This indicates that: organized kids scale with the Group, whereas Framed kids are a little bit more persistent( a function, not a bug )framed kids end up being lined up relative to their Frame, whereas Grouped kids are still relative to their Artboard frames can have overruning material</p>
<p><img class="lazy-load" src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-src="https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-1.jpg" alt="Adjusting the spacing in Figma Frames" loading="lazy"></p>
<h2 id="step2createanartboardtransition">that can be scrolled horizontally or vertically</p>
<p>( this is what we'll be trying )Wait, does this mean that Artboards are in fact Frames? : what other UI style tools call Artboards, Figma</p>
<p>calls Frames <strong>. This</strong> is most likely since, in Figma, Frames can be embedded within other Frames, which is a little various from what Artboards carry out in other tools like Sketch, Adobe XD, and so on. Change to Model mode (⌥+ 9) where the Overflow habits setting will now be readily available, and after that alter the dropdown alternative from No scrolling to Horizontal scrolling.< img src =" https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file.jpg" alt=" Figma: horizontal scrolling" loading=" lazy" > Now, you'll see that the shadows </p>
<ul>
<li>are unusually cut off by the
<ul>
<li>freshly transformed Frame, however this is in fact basic habits for overruning material, and it can be repaired reasonably quickly. Because the shadow's blur variable is 30 and Frames can
</ul>
</li>
<li>be any size,
<ul>
<li>we'll require to resize the Frame to permit <em>for an additional 30 spacing around its edges. It must be simple adequate to Resize (shift +⌘ +↑ ↓ ← →) and Push( shift+ ↑ ↓ ← → )the things appropriately.< img src= "https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-8.jpg" alt=" Pushing and resizing in Figma "loading=" lazy "> By the method, you</li>
</ul>
</li>
</ul>
<p><img class="lazy-load" src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-src="https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-2.jpg" alt="Creating animated Figma interactions" loading="lazy"></p>
<p>may see (if you click the Frame )that the cards and their spacing can be reorganized</em> rather quickly. This isn't pertinent to the tutorial particularly, however still amazing.</p>
<p><em>< img src=" https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-1.jpg" alt</h2>
<p>=" Changing the spacing in Figma Frames" loading=" lazy" > Action 2: Develop An Artboard Shift For this next action, <strong>let's attempt an interaction that links one Artboard to another Artboard, otherwise referred to as a" Connection". Select the Cards frame( yes, the whole frame, considering that it does not actually matter which card</p>
<ul>
<li>winds up being tapped today).
<ul>
<li>Presuming that
<li>you're still in Prototype mode</ul>
<p><img class="lazy-load" src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-src="https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-3.jpg" alt="Creating a "Back" interaction in Figma" loading="lazy"></p>
<p>, drag the Adapter( that is, the surrounded circle that reveals a+ when hovered) into Artboard 2. These Artboards are now linked. After dropping the Adapter onto Artboard 2, the Connection settings (which ought to now be exposed), need to appear like this: Interaction information" On tap "( the interaction will be activated by tapping )" Browse to</p>
<h2 id="step4createarelativelycomplextimedanimation">"/" Artboard 2" (tapping will trigger the user to browse to Artboard 2)</p>
<p>Animation." Press "/" ←"( "Artboard 2" will press itself onto the screen from the right)" Relieve "/" 300ms"( throughout 300ms, the animation will start quick and decrease towards completion )Inspect the" Smart stimulate matching layers "checkbox( typical aspects such as the back button and the navigation will not stimulate if left the same)< img src= "https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-2.jpg" alt =" Developing animated Figma interactions "loading=" lazy" > Wish to see what we've done so far in action? Click the "Present" button( i.e. the play icon )in the top-right corner.</p>
<p>If you're utilizing Figma in a web internet browser, this opens a</p>
<p>brand-new tab. Pointer: struck R <strong>to refill the model. Action 3: <strong>Retreat! Prior to we progress and dive</strong> into more intricate Links, let's ensure that we <strong>can go back to Artboard 1( or whatever Artboard we originated from ). Produce another Connection, this time stemming from the back button( s) with</li>
<li>the following settings: Interaction information."</li>
</ul>
</li>
<li>On tap"" Back"</li>
<li>< img src=" https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-3.jpg "alt="</li>
</ul>
</li>
</ul>
<p><img class="lazy-load" src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-src="https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-4.jpg" alt="Create another interaction in Figma" loading="lazy"></p>
<p><em>Producing a "Back" interaction in Figma" loading=" lazy" > Animation settings will not be readily available this time, because the choices are repaired. Particularly, the shift will stimulate in reverse. If we transitioned into the Artboard with" Push ←" then we'll shift back out with" Push → ". Step 4: Develop a( Fairly) Complex Timed Animation Throughout this last and next action, we'll produce a particular animation that in fact covers throughout a number of Artboards and separately stimulates numerous items instead of the whole Artboard.</em></p>
<p>Particularly, we'll turn the broadened card to the left upon the click of a button, and after that established a timer to turn it to the right prior to going back to its initial state. Basically, a swinging animation.</p>
<p>Select the Button things on Artboard 2 and develop a Port that links to Artboard 3. Utilize these settings: Interaction information. "On tap "" Browse to "/" Artboard 3" Animation." Smart stimulate" "Ease"/" 300ms"< img src= "https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-4.jpg" alt=" Develop another interaction in Figma" loading =" lazy "> Note: as we have actually picked" Smart stimulate" as the animation type, layers that exist in both Artboards <strong>however are aesthetically various will shift efficiently, however just if the pertinent layer structure and layer names stay constant. If they do not stay constant, Figma will stop working to comprehend that the layers are one and the exact same, and they will not stimulate properly. From the" Style" Panel, you need to see that I have actually made the button's background #FF 0000 and turned the <strong>card to the left.</p>
<p>How do we then turn it to the right after the 300ms" turn left animation" has run its course? Well, that's where timed animations are required. Repeat the actions above, this time linking Artboard 3 to Artboard 4 with" After hold-up"/" 300ms "being the only distinction. To finish the interaction, repeat once again linking Artboard</p>
<p><img class="lazy-load" src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-src="https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-5.jpg" alt="Figma: timed animations" loading="lazy"></p>
<h2 id="prototypingwithfigmaisfunright">4 to Artboard 5. This is how we run animations consecutively.</p>
<p>In our case, the preliminary tap interaction triggered a" turn left animation" and after that the following animations occurred instantly on a timer. < img src=" https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file-5.jpg" alt=" Figma: timed animations" loading= "lazy" > Prototyping with Figma is Enjoyable? We have actually now reached completion of this tutorial. When utilizing Model mode), the Figma file should not actually look any various( besides a couple of a noticeable Connectors. It must work really in a different way in Present mode. If you didn't follow together with the <a href="https://figma.com/file/Is1EOrzFrl3lzV7upbCZlN/Series-of-interactions?node-id=0%3A1">tutorial, have a look at the "Dynamic" variation, where you can check the</p>
<p>result. Pretty cool, right?</p>
<p>While there are definitely designs of animations and kinds of interactions with more intricacy that we might picture, what we have actually taken a look at here need to cover about 99% of what you'll require to understand. When it concerns interactions, easy is much better anyhow!</p>
<p>For animations that need more intricacy, there's a cool Figma Plugin called <a href="https://figma.com/community/plugin/809860933081065308">LottieFiles</a> that's certainly worth having a look at.</p>
<p>And for more on Figma, you can likewise check out <a href="https://www.sitepoint.com/wireframing-figma/">wireframing with Figma</a>.</p>
<p></body></section>
</div>
</article>
</div>
<p></main></p>
<footer class="syzew71">
<nav aria-label="Footer navigation"></nav>
</footer>
</div>
</div>
<p></body> </p>
<div class="blog-share text-center"><div class="is-divider medium"></div><div class="social-icons share-icons share-row relative" ><a href="whatsapp://send?text=%26lt%3BaAn%20Intro%20to%20Prototyping%20with%20Figma - https://websitedesign-usa.com/an-introduction-to-prototyping-with-figma/" data-action="share/whatsapp/share" class="icon button circle is-outline tooltip whatsapp show-for-medium" title="Share on WhatsApp"><i class="icon-whatsapp"></i></a><a href="https://www.facebook.com/sharer.php?u=https://websitedesign-usa.com/an-introduction-to-prototyping-with-figma/" data-label="Facebook" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" class="icon button circle is-outline tooltip facebook" title="Share on Facebook"><i class="icon-facebook" ></i></a><a href="https://twitter.com/share?url=https://websitedesign-usa.com/an-introduction-to-prototyping-with-figma/" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" class="icon button circle is-outline tooltip twitter" title="Share on Twitter"><i class="icon-twitter" ></i></a><a href="mailto:enteryour@addresshere.com?subject=%26lt%3BaAn%20Intro%20to%20Prototyping%20with%20Figma&body=Check%20this%20out:%20https://websitedesign-usa.com/an-introduction-to-prototyping-with-figma/" rel="nofollow" class="icon button circle is-outline tooltip email" title="Email to a Friend"><i class="icon-envelop" ></i></a><a href="https://pinterest.com/pin/create/button/?url=https://websitedesign-usa.com/an-introduction-to-prototyping-with-figma/&media=https://websitedesign-usa.com/wp-content/uploads/2021/04/unnamed-file.png&description=%26lt%3BaAn%20Intro%20to%20Prototyping%20with%20Figma" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" class="icon button circle is-outline tooltip pinterest" title="Pin on Pinterest"><i class="icon-pinterest" ></i></a><a href="https://www.linkedin.com/shareArticle?mini=true&url=https://websitedesign-usa.com/an-introduction-to-prototyping-with-figma/&title=%26lt%3BaAn%20Intro%20to%20Prototyping%20with%20Figma" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" class="icon button circle is-outline tooltip linkedin" title="Share on LinkedIn"><i class="icon-linkedin" ></i></a></div></div></div>
<footer class="entry-meta text-center">
This entry was posted in <a href="https://websitedesign-usa.com/category/website-design/" rel="category tag">Website Design</a>. Bookmark the <a href="https://websitedesign-usa.com/an-introduction-to-prototyping-with-figma/" title="Permalink to <aAn Intro to Prototyping with Figma" rel="bookmark">permalink</a>. </footer>
<div class="entry-author author-box">
<div class="flex-row align-top">
<div class="flex-col mr circle">
<div class="blog-author-image">
<img alt='' src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2090%2090%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-src='https://secure.gravatar.com/avatar/26ce137576cd47ac1c1ae35caaa58a12?s=90&d=mm&r=g' srcset="" data-srcset='https://secure.gravatar.com/avatar/26ce137576cd47ac1c1ae35caaa58a12?s=180&d=mm&r=g 2x' class='lazy-load avatar avatar-90 photo' height='90' width='90' loading='lazy'/> </div>
</div>
<div class="flex-col flex-grow">
<h5 class="author-name uppercase pt-half">
Site Admin </h5>
<p class="author-desc small"></p>
</div>
</div>
</div>
<nav role="navigation" id="nav-below" class="navigation-post">
<div class="flex-row next-prev-nav bt bb">
<div class="flex-col flex-grow nav-prev text-left">
<div class="nav-previous"><a href="https://websitedesign-usa.com/how-to-create-scroll-animated-before-and-after-images-in-divi/" rel="prev"><span class="hide-for-small"><i class="icon-angle-left" ></i></span> How to Create Scroll Animated Before and After Images in Divi</a></div>
</div>
<div class="flex-col flex-grow nav-next text-right">
<div class="nav-next"><a href="https://websitedesign-usa.com/some-articles-about-accessibility-ive-saved-recently/" rel="next">Some Articles About Ease Of Access I have actually Conserved Just recently <span class="hide-for-small"><i class="icon-angle-right" ></i></span></a></div> </div>
</div>
</nav>
</div>
</article>
<div id="comments" class="comments-area">
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/an-introduction-to-prototyping-with-figma/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://websitedesign-usa.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> Required fields are marked <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Comment</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p>
<p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p>
<p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p>
<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='28565' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p><!-- Anti-spam plugin wordpress.org/plugins/anti-spam/ --><div class="wantispam-required-fields"><input type="hidden" name="wantispam_t" class="wantispam-control wantispam-control-t" value="1619086379" /><div class="wantispam-group wantispam-group-q" style="clear: both;">
<label>Current ye@r <span class="required">*</span></label>
<input type="hidden" name="wantispam_a" class="wantispam-control wantispam-control-a" value="2021" />
<input type="text" name="wantispam_q" class="wantispam-control wantispam-control-q" value="7.2.7" autocomplete="off" />
</div>
<div class="wantispam-group wantispam-group-e" style="display: none;">
<label>Leave this field empty</label>
<input type="text" name="wantispam_e_email_url_website" class="wantispam-control wantispam-control-e" value="" autocomplete="off" />
</div>
</div><!--\End Anti-spam plugin --></form> </div><!-- #respond -->
</div>
</div>
<div class="post-sidebar large-3 col">
<div id="secondary" class="widget-area " role="complementary">
<aside id="search-2" class="widget widget_search"><form method="get" class="searchform" action="https://websitedesign-usa.com/" role="search">
<div class="flex-row relative">
<div class="flex-col flex-grow">
<input type="search" class="search-field mb-0" name="s" value="" id="s" placeholder="Search…" />
</div>
<div class="flex-col">
<button type="submit" class="ux-search-submit submit-button secondary button icon mb-0" aria-label="Submit">
<i class="icon-search" ></i> </button>
</div>
</div>
<div class="live-search-results text-left z-top"></div>
</form>
</aside>
<aside id="recent-posts-2" class="widget widget_recent_entries">
<span class="widget-title "><span>Recent Posts</span></span><div class="is-divider small"></div>
<ul>
<li>
<a href="https://websitedesign-usa.com/themes-set-up-for-a-paradigm-shift-wordpress-5-8-will-unleash-tools-to-make-it-happen/">Styles Establish for a Paradigm Shift, WordPress 5.8 Will Unleash Tools To Make It Take place</a>
</li>
<li>
<a href="https://websitedesign-usa.com/still-hoping-for-better-native-page-transitions/">Still Wishing For Better Native Page Transitions</a>
</li>
<li>
<a href="https://websitedesign-usa.com/download-a-free-header-footer-for-divis-chess-club-layout-pack/">Download a FREE Header & Footer for Divi’s Chess Club Design Load</a>
</li>
<li>
<a href="https://websitedesign-usa.com/how-to-add-a-double-border-to-svg-shapes/">How to Include a Double Border to SVG Shapes</a>
</li>
<li>
<a href="https://websitedesign-usa.com/35-web-design-blogs-worth-following/">35 Web Design Blogs Worth Following</a>
</li>
</ul>
</aside><aside id="categories-2" class="widget widget_categories"><span class="widget-title "><span>Categories</span></span><div class="is-divider small"></div>
<ul>
<li class="cat-item cat-item-5"><a href="https://websitedesign-usa.com/category/monthly-specials/">Monthly Specials</a>
</li>
<li class="cat-item cat-item-6"><a href="https://websitedesign-usa.com/category/search-engine-optimization/">Search Engine Optimization</a>
</li>
<li class="cat-item cat-item-1"><a href="https://websitedesign-usa.com/category/uncategorized/">Uncategorized</a>
</li>
<li class="cat-item cat-item-8"><a href="https://websitedesign-usa.com/category/website-design/">Website Design</a>
</li>
<li class="cat-item cat-item-9"><a href="https://websitedesign-usa.com/category/website-development/">Website Development</a>
</li>
<li class="cat-item cat-item-10"><a href="https://websitedesign-usa.com/category/wordpress/">WordPress</a>
</li>
</ul>
</aside><aside id="archives-2" class="widget widget_archive"><span class="widget-title "><span>Archives</span></span><div class="is-divider small"></div>
<ul>
<li><a href='https://websitedesign-usa.com/2021/04/'>April 2021</a></li>
<li><a href='https://websitedesign-usa.com/2021/03/'>March 2021</a></li>
<li><a href='https://websitedesign-usa.com/2021/02/'>February 2021</a></li>
<li><a href='https://websitedesign-usa.com/2021/01/'>January 2021</a></li>
<li><a href='https://websitedesign-usa.com/2020/12/'>December 2020</a></li>
<li><a href='https://websitedesign-usa.com/2020/11/'>November 2020</a></li>
<li><a href='https://websitedesign-usa.com/2020/10/'>October 2020</a></li>
<li><a href='https://websitedesign-usa.com/2020/09/'>September 2020</a></li>
<li><a href='https://websitedesign-usa.com/2020/08/'>August 2020</a></li>
<li><a href='https://websitedesign-usa.com/2020/07/'>July 2020</a></li>
<li><a href='https://websitedesign-usa.com/2020/06/'>June 2020</a></li>
<li><a href='https://websitedesign-usa.com/2020/05/'>May 2020</a></li>
<li><a href='https://websitedesign-usa.com/2020/04/'>April 2020</a></li>
</ul>
</aside><aside id="meta-2" class="widget widget_meta"><span class="widget-title "><span>Meta</span></span><div class="is-divider small"></div>
<ul>
<li><a href="https://websitedesign-usa.com/wp-login.php">Log in</a></li>
<li><a href="https://websitedesign-usa.com/feed/">Entries feed</a></li>
<li><a href="https://websitedesign-usa.com/comments/feed/">Comments feed</a></li>
<li><a href="https://wordpress.org/">WordPress.org</a></li>
</ul>
</aside></div>
</div>
</div>
</div>
</main>
<footer id="footer" class="footer-wrapper">
<!-- FOOTER 1 -->
<!-- FOOTER 2 -->
<div class="absolute-footer dark medium-text-center small-text-center">
<div class="container clearfix">
<div class="footer-secondary pull-right">
<div class="footer-text inline-block small-block">
<div align="center"><a href="https://www.veteranownedbusiness.com" target="_blank" ><img src="https://www.veteranownedbusiness.com/images/banner_links/VOB-Banner-Trade-Show-Border.jpg" alt="Proud Veteran Owned Business Member!" border="0px" /></a></div> </div>
</div>
<div class="footer-primary pull-left">
<div class="copyright-footer">
<img src="https://websitedesign-usa.com/wp-content/uploads/2020/03/Footer.png" width="150" height="45" alt=""/><h5>Copyright 2021 © Website Design U.S.A.
<br><img src="https://websitedesign-usa.com/wp-content/uploads/2019/07/Designs-By-Heath-Arsenault.png" width="20" height="20" alt=""/><a href="https://websitedesign-usa.com/" title="Design By Heath Arsenault, Website Design U.S.A. - A Veteran Owned Company" target="_blank"> Website Design U.S.A.</a></h5> </div>
</div>
</div>
</div>
<a href="#top" class="back-to-top button icon invert plain fixed bottom z-1 is-outline circle" id="top-link"><i class="icon-angle-up" ></i></a>
</footer>
</div>
<div id="main-menu" class="mobile-sidebar no-scrollbar mfp-hide">
<div class="sidebar-menu no-scrollbar ">
<ul class="nav nav-sidebar nav-vertical nav-uppercase">
<li class="html custom html_nav_position_text_top"><div align="center"><img src="https://websitedesign-usa.com/wp-content/uploads/2020/03/Veteran-Owned.png" width="202" height="60" alt=""/></div></li><li id="menu-item-908" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-908"><a href="https://websitedesign-usa.com/">Home</a></li>
<li id="menu-item-909" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-909"><a href="https://websitedesign-usa.com/design-services/">Design Services</a></li>
<li id="menu-item-910" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-910"><a href="https://websitedesign-usa.com/get-a-quote/">Get A Free Quote</a></li>
<li id="menu-item-912" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-912"><a href="https://websitedesign-usa.com/website-design-work-samples/">Website Design Work Samples</a></li>
<li id="menu-item-911" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-911"><a href="https://websitedesign-usa.com/graphic-design-work-samples/">Graphic Design Work Samples</a></li>
<li id="menu-item-1010" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1010"><a href="https://websitedesign-usa.com/about-heath-arsenault/">About Heath</a></li>
<li id="menu-item-914" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-914"><a href="https://websitedesign-usa.com/client-training/">Client Training</a></li>
<li id="menu-item-915" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-915"><a href="https://websitedesign-usa.com/website-design-usa-news/">News</a></li>
<li id="menu-item-916" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-916"><a href="https://websitedesign-usa.com/reviews/">Reviews</a></li>
<li id="menu-item-917" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-917"><a href="https://websitedesign-usa.com/contact-website-design-usa/">Contact</a></li>
<li class="header-contact-wrapper">
<ul id="header-contact" class="nav nav-divided nav-uppercase header-contact">
<li class="">
<a href="mailto:heath@websitedesign-usa.com" class="tooltip" title="heath@websitedesign-usa.com">
<i class="icon-envelop" style="font-size:16px;"></i> <span>
Email </span>
</a>
</li>
<li class="">
<a class="tooltip" title="M Thru F - 7:30 - 3:30 EST ">
<i class="icon-clock" style="font-size:16px;"></i> <span>M Thru F - 7:30 - 3:30 EST</span>
</a>
</li>
<li class="">
<a href="tel:207-333-2449" class="tooltip" title="207-333-2449">
<i class="icon-phone" style="font-size:16px;"></i> <span>207-333-2449</span>
</a>
</li>
</ul>
</li><li class="html header-social-icons ml-0">
<div class="social-icons follow-icons" ><a href="https://www.facebook.com/usawebsitedesign/" target="_blank" data-label="Facebook" rel="noopener noreferrer nofollow" class="icon plain facebook tooltip" title="Follow on Facebook"><i class="icon-facebook" ></i></a><a href="https://www.instagram.com/websitedesignusa/" target="_blank" rel="noopener noreferrer nofollow" data-label="Instagram" class="icon plain instagram tooltip" title="Follow on Instagram"><i class="icon-instagram" ></i></a><a href="https://twitter.com/Web_DesignUSA" target="_blank" data-label="Twitter" rel="noopener noreferrer nofollow" class="icon plain twitter tooltip" title="Follow on Twitter"><i class="icon-twitter" ></i></a><a href="https://www.linkedin.com/in/heatharsenault" target="_blank" rel="noopener noreferrer nofollow" data-label="LinkedIn" class="icon plain linkedin tooltip" title="Follow on LinkedIn"><i class="icon-linkedin" ></i></a></div></li><li class="header-newsletter-item has-icon">
<a href="#header-newsletter-signup" class="tooltip" title="">
<i class="icon-envelop"></i>
<span class="header-newsletter-title">
NEWSLETTER </span>
</a>
</li><li class="html header-button-1">
<div class="header-button">
<a rel="noopener noreferrer" href="https://www.paypal.com/ppcreditapply/da/us/lander?p=ppcdalpBAUNI&t=ppcdaltPPCSEM&gclid=EAIaIQobChMI5fGwkKO46AIVCJSzCh0tgwDuEAAYASAAEgJlLPD_BwE&gclsrc=aw.ds" target="_blank" class="button alert is-small" style="border-radius:99px;">
<span>Apply For Financing</span>
</a>
</div>
</li>
<li class="html custom html_top_right_text"><img src="https://websitedesign-usa.com/wp-content/uploads/2020/03/Footer.png" width="150" height="45" alt=""/></li> </ul>
</div>
</div>
<script type='text/javascript' src='https://websitedesign-usa.com/wp-content/plugins/anti-spam/assets/js/anti-spam.js?ver=7.2.7' id='anti-spam-script-js'></script>
<script type='text/javascript' src='https://websitedesign-usa.com/wp-content/themes/flatsome/inc/extensions/flatsome-live-search/flatsome-live-search.js?ver=3.13.3' id='flatsome-live-search-js'></script>
<script type='text/javascript' src='https://websitedesign-usa.com/wp-content/plugins/official-mailerlite-sign-up-forms/assets/js/jquery.validate.min.js?ver=5.7.1' id='jquery-validation-plugin-js'></script>
<script type='text/javascript' src='https://websitedesign-usa.com/wp-includes/js/hoverIntent.min.js?ver=1.8.1' id='hoverIntent-js'></script>
<script type='text/javascript' id='flatsome-js-js-extra'>
/* <![CDATA[ */
var flatsomeVars = {"ajaxurl":"https:\/\/websitedesign-usa.com\/wp-admin\/admin-ajax.php","rtl":"","sticky_height":"70","lightbox":{"close_markup":"<button title=\"%title%\" type=\"button\" class=\"mfp-close\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-x\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg><\/button>","close_btn_inside":false},"user":{"can_edit_pages":false},"i18n":{"mainMenu":"Main Menu"},"options":{"cookie_notice_version":"1"}};
/* ]]> */
</script>
<script type='text/javascript' src='https://websitedesign-usa.com/wp-content/themes/flatsome/assets/js/flatsome.js?ver=3.13.3' id='flatsome-js-js'></script>
<script type='text/javascript' src='https://websitedesign-usa.com/wp-content/themes/flatsome/inc/extensions/flatsome-lazy-load/flatsome-lazy-load.js?ver=3.13.3' id='flatsome-lazy-js'></script>
<script type='text/javascript' src='https://websitedesign-usa.com/wp-includes/js/comment-reply.min.js?ver=5.7.1' id='comment-reply-js'></script>
<script type='text/javascript' id='site-reviews-js-before'>
window.hasOwnProperty("GLSR")||(window.GLSR={});GLSR.action="glsr_action";GLSR.ajaxpagination=["#wpadminbar",".site-navigation-fixed"];GLSR.ajaxurl="https://websitedesign-usa.com/wp-admin/admin-ajax.php";GLSR.nameprefix="site-reviews";GLSR.stars={"clearable":false,"tooltip":false};GLSR.urlparameter=true;GLSR.validationconfig={field:"glsr-field",form:"glsr-form",field_error:"glsr-field-is-invalid",field_message:"glsr-field-error",field_required:"glsr-required",field_valid:"glsr-field-is-valid",form_error:"glsr-form-is-invalid",form_message:"glsr-form-message",form_message_failed:"glsr-form-failed",form_message_success:"glsr-form-success",input_error:"glsr-is-invalid",input_valid:"glsr-is-valid"};GLSR.validationstrings={accepted:"This field must be accepted.",between:"This field value must be between %s and %s.",betweenlength:"This field must have between %s and %s characters.",email:"This field requires a valid e-mail address.",errors:"Please fix the submission errors.",max:"Maximum value for this field is %s.",maxlength:"This field allows a maximum of %s characters.",min:"Minimum value for this field is %s.",minlength:"This field requires a minimum of %s characters.",number:"This field requires a number.",required:"This field is required.",unsupported:"The review could not be submitted because this browser is too old. Please try again with a modern browser."};
</script>
<script type='text/javascript' src='https://websitedesign-usa.com/wp-content/plugins/site-reviews/assets/scripts/site-reviews.js?ver=5.8.5' id='site-reviews-js'></script>
<script type='text/javascript' src='https://websitedesign-usa.com/wp-includes/js/wp-embed.min.js?ver=5.7.1' id='wp-embed-js'></script>
<div id="glsr-modal" class="glsr-modal" aria-hidden="true">
<div class="glsr-modal__overlay" data-glsr-close tabindex="-1">
<div class="glsr-modal__dialog" aria-modal="true" data-glsr-modal role="dialog">
<button class="glsr-modal__close" aria-label="Close modal" data-glsr-close></button>
<div class="glsr-modal__content"></div>
</div>
</div>
</div>
</body>
</html>
