{"id":37491,"date":"2024-03-21T04:56:15","date_gmt":"2024-03-21T11:56:15","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=37491"},"modified":"2024-03-21T04:56:42","modified_gmt":"2024-03-21T11:56:42","slug":"figma-plugin-tutorial","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/","title":{"rendered":"Figma Plugin Tutorial \u2013 Copy and Paste Design from Figma to UXPin"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/UXPin-Figma-Plugin-Release-1024x512.png\" alt=\"UXPin Figma Plugin Release\" class=\"wp-image-37492\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/UXPin-Figma-Plugin-Release-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/UXPin-Figma-Plugin-Release-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/UXPin-Figma-Plugin-Release-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/UXPin-Figma-Plugin-Release.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Designers are always looking for ways to improve their prototypes\u2013for stakeholder feedback, accurate user testing, and design handoffs. Figma is a fantastic design tool but lacks prototyping features, meaning designers must use external tools.<\/p>\n\n\n\n<p>UXPin has a plugin for Figma called <a href=\"https:\/\/www.figma.com\/community\/plugin\/1133387866564475565\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>UXPin \u2013 Copy. Paste. Prototype.<\/strong><\/a> Designers can literally copy Figma designs to UXPin and add interactivity to static Figma mockups. Let&#8217;s see how it works.<\/p>\n\n\n\n<p><strong>Key takeaways:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>UXPin&#8217;s plugin for Figma helps you turn static Figma designs into interactive prototypes. that behave like an end-product.<\/li>\n\n\n\n<li>The plugin is free to use, but it needs to be installed in Figma.<\/li>\n\n\n\n<li>After clicking Command+V in UXPin (or Control+V), you can paste your Figma design to UXPin.<\/li>\n\n\n\n<li>Once you have a design copied to UXPin, you can add interactions (variables, expressions, and states).<\/li>\n<\/ul>\n\n\n\n<p>Turn static Figma mockups into designs that have interactivity baked into them. Improve collaboration between designers and developers and simplify design handoff. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What is Figma?<\/h2>\n\n\n\n<p>Figma is a web-based design tool used primarily for interface design. It allows multiple designers to work on the same project simultaneously, enabling real-time collaboration and feedback.<\/p>\n\n\n\n<p>Figma is popular among designers and design teams for its ease of use, powerful features, and ability to streamline the design process.<\/p>\n\n\n\n<p>Figma allows designers to ass interactivity to the UI design by linking different screens together. This isn&#8217;t the best solution for usability testing or design handoff. You want to be precise in those scenarios to avoid rework and miscommunication. This is where UXPin fills in for Figma&#8217;s blind spots.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-the-difference-between-figma-and-uxpin\">What is the difference between Figma and UXPin?<\/h2>\n\n\n\n<p>Both Figma and UXPin are design tools that boost collaboration. Figma focuses on designer end of the spectrum, while UXPin tries to fill the gap between design and development.<\/p>\n\n\n\n<p>Figma allows designers to design beautiful static mockups but lacks <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/advanced-prototyping-features\/\" target=\"_blank\" rel=\"noreferrer noopener\">advanced prototyping features<\/a>. Designers must use additional tools or rely on engineers to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">build interactive prototypes<\/a>\u2013adding time and resources to design projects.<\/p>\n\n\n\n<p>UXPin is powered by code, significantly enhancing its capability for creating <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/high-fidelity-prototype-how-to-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">high-fidelity, fully functioning prototypes<\/a> that accurately replicate the end product&#8217;s experience. Design teams can create prototypes and hand them off to developers for production without any extra tools that need to translate design to code.<\/p>\n\n\n\n<p>What&#8217;s great about UXPin is that it has a technology for handling MUI, Ant design, Bootstrap, and other open-source UI components that look and behave exactly like they do in the end product. Using it, you can reach ultimate consistency between design and code. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Read more about UXPin Merge<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-integrate-figma-with-uxpin-to-make-ui-interactive\">Integrate Figma with UXPin to make UI interactive<\/h2>\n\n\n\n<p>Even though UXPin is an end-to-end design tool, we recognize that many designers love designing their wireframes and mockups in Figma. So, we created the <a href=\"https:\/\/www.figma.com\/community\/plugin\/1133387866564475565\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>UXPin \u2013 Copy. Paste. Prototype.<\/strong><\/a><strong> <\/strong>plugin to allow design teams to export their Figma designs into UXPin for prototyping\u2013<em>the best of both worlds<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Figma plugin \u2013 Copy, Paste, Prototype in UXPin\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/XW9Vk4CH0XQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>This step-by-step guide will demonstrate how to install the UXPin plugin for Figma, copy designs into UXPin, and what they can expect from UXPin&#8217;s advanced, interactive prototyping capabilities.<\/p>\n\n\n\n<p><em>Note: <\/em><a href=\"https:\/\/www.figma.com\/community\/plugin\/1133387866564475565\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong><em>UXPin \u2013 Copy. Paste. Prototype.<\/em><\/strong><\/a><em> works best with the Chrome browser or when copying from the <\/em><a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/5601429983767\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>Figma<\/em><\/a><em> to <\/em><a href=\"https:\/\/www.uxpin.com\/docs\/getting-started\/downloading-and-using-uxpin\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>UXPin desktop applications<\/em><\/a><em>.<\/em><\/p>\n\n\n\n<p>We&#8217;re using the <a href=\"https:\/\/fabrx.co\/moood-music-app-ui-kit\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Moood Music App UI Kits<\/a>, which you can download from the creator, Fabrx&#8217;s website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-1-install-the-plugin\">Step 1: Install the plugin<\/h3>\n\n\n\n<p>You&#8217;ll find the <a href=\"https:\/\/www.figma.com\/community\/plugin\/1133387866564475565\/UXPin-%E2%80%93-Copy.-Paste.-Prototype.\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin \u2013 Copy. Paste. Prototype.<\/a> plugin in Figma&#8217;s Community. Click &#8220;Try it out&#8221; to install.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-2-copy-a-figma-design\">Step 2: Copy a Figma design<\/h3>\n\n\n\n<p>Open a Figma project and select the screen you want to copy. We recommend copying one screen at a time. Select the frame or drag your cursor around the components you want to copy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-3-activate-the-plugin\">Step 3: Activate the plugin<\/h3>\n\n\n\n<p>Right-click on the design, navigate to <strong>Plugins &gt; Saved Plugins &gt; UXPin \u2013 Copy. Paste. Prototype.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"533\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Figma-Plugin--1024x533.png\" alt=\"Figma Plugin\" class=\"wp-image-37494\" style=\"width:650px;height:undefinedpx\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Figma-Plugin--1024x533.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Figma-Plugin--576x300.png 576w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Figma-Plugin--768x400.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Figma-Plugin--1536x800.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/Figma-Plugin--2048x1066.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In Figma&#8217;s desktop app, the plugin will copy automatically. In Chrome, you must click &#8220;Copy to Clipboard&#8221; to trigger the copy process.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"526\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/uxpin-figma-plugin-copy-1024x526.jpg\" alt=\"uxpin figma plugin copy\" class=\"wp-image-37496\" style=\"width:650px;height:undefinedpx\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/uxpin-figma-plugin-copy-1024x526.jpg 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/uxpin-figma-plugin-copy-584x300.jpg 584w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/uxpin-figma-plugin-copy-768x395.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/uxpin-figma-plugin-copy-1536x790.jpg 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/uxpin-figma-plugin-copy.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>A message will appear at the bottom of the screen saying &#8220;Copied to clipboard&#8221; once complete.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-4-paste-into-uxpin\">Step 4: Paste into UXPin<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/docs\/dashboard\/projects#creating-a-project\">Create a project in UXPin<\/a>, and open it. Use the paste shortcut <strong>COMMAND+V<\/strong> or right-click <strong>Paste &gt; Paste Here<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Paste Figma Design into UXPin?\" width=\"660\" height=\"495\" src=\"https:\/\/www.youtube.com\/embed\/Oqbo-1UwffE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Drag the design to position it if necessary.<\/p>\n\n\n\n<p>If you have more than one screen, add a new page and repeat steps 2 &amp; 3.<\/p>\n\n\n\n<p><strong>Note:<\/strong> In Figma, you have multiple screens on a single artboard or view, whereas UXPin uses a <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#pages\" target=\"_blank\" rel=\"noreferrer noopener\">single screen per page<\/a>. You&#8217;ll notice this workflow is more intuitive when you create prototypes with interactions and page transitions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-5-add-interactivity\">Step 5: Add interactivity<\/h3>\n\n\n\n<p>Once you have imported your Figma designs, it&#8217;s time to create <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-figma-designs\/\" target=\"_blank\" rel=\"noreferrer noopener\">interactive prototypes in UXPin<\/a>. We have several <a href=\"https:\/\/www.uxpin.com\/examples#section-app-examples\" target=\"_blank\" rel=\"noreferrer noopener\">example apps<\/a> and <a href=\"https:\/\/www.uxpin.com\/examples#section-interactive-ui-patterns\">patterns<\/a> demonstrating UXPin&#8217;s prototyping features. <a href=\"https:\/\/www.youtube.com\/watch?v=XW9Vk4CH0XQ\" target=\"_blank\" rel=\"noreferrer noopener\">You can also follow our example YouTube video for this application<\/a>.<\/p>\n\n\n\n<p>Here are some examples of UXPin&#8217;s prototyping features.<\/p>\n\n\n\n<p>A desktop <a href=\"https:\/\/www.uxpin.com\/examples\/carousel\" target=\"_blank\" rel=\"noreferrer noopener\">Carousel<\/a> example demonstrates three methods for creating animated carousels. One is automatic, while the other two rely on a click\/tap <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#triggers\" target=\"_blank\" rel=\"noreferrer noopener\">trigger<\/a>.<\/p>\n\n\n\n<p>UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/examples\/sign-up-form\" target=\"_blank\" rel=\"noreferrer noopener\">sign-up form example<\/a> demonstrates how designers can create fully functioning forms that capture user data (using <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/variables\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Variables<\/a>) and use it elsewhere in the prototype\u2013like a personalized confirmation screen.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\"><a href=\"https:\/\/t.co\/C5F639ip4g\">https:\/\/t.co\/C5F639ip4g<\/a> \ud83c\udf89 Try UXPin for free and try your hand at interactive prototyping!<br><br>Here&#39;s an example of a <a href=\"https:\/\/twitter.com\/hashtag\/UXPin?src=hash&amp;ref_src=twsrc%5Etfw\">#UXPin<\/a> prototype \ud83d\udc47 <a href=\"https:\/\/t.co\/XzXgAoscNo\">pic.twitter.com\/XzXgAoscNo<\/a><\/p>&mdash; UXPin (@uxpin) <a href=\"https:\/\/twitter.com\/uxpin\/status\/1589684680848470016?ref_src=twsrc%5Etfw\">November 7, 2022<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>The sign-up form uses a combination of <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Interactions<\/a> and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/expressions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Expressions<\/a> for dynamic error messages that respond to user inputs.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/GQIfXvWXSPK2Sel5p1_kQlOPMtG2pjXw2QnBwvXctej8JaWSNkTQpmkbOEY_S-zMoNV_713snTEcseqWRlHKnDri2htnDFOUWWSEzfHLo1XKGVSwrnglYCxBhA-_tashOEijtuXFIuyRyGmQiIHfTp4F9Tx_wn_rlHQhK-Uvm25s4olLeCyw0jIk4cLceg\" alt=\"Interactive prototyping in UXPin\" style=\"width:650px;height:undefinedpx\"\/><\/figure>\n\n\n\n<p>This <a href=\"https:\/\/www.uxpin.com\/examples\/stepper\">stepper example<\/a> shows how you can combine an interactive button with an input field\u2013a standard eCommerce UI pattern. Users can use the + or &#8211; buttons to step up or down or use the input field to enter a custom amount.<\/p>\n\n\n\n<p>The bottom line is that design teams can recreate in UXPin most of what engineers can do with HTML, CSS, and Javascript. Designers can <a href=\"https:\/\/www.uxpin.com\/docs\/how-to\/google-calendar-events\/#build-your-applet-in-ifttt\" target=\"_blank\" rel=\"noreferrer noopener\">connect to APIs<\/a> using <a href=\"https:\/\/ifttt.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">IFTTT<\/a> (If This, Then That) to go beyond any image-based design tool&#8217;s capabilities.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-6-share-prototype-with-stakeholders\">Step 6: Share prototype with stakeholders<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/stakeholder-analysis-for-product-teams\/\" target=\"_blank\" rel=\"noreferrer noopener\">Stakeholder feedback<\/a> is an essential part of the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-process-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">design process<\/a>. The problem with image-based prototyping is that stakeholders battle to interpret designs, adversely impacting the design team&#8217;s ideas and buy-in.<\/p>\n\n\n\n<p>UXPin prototypes look and feel like the final product, so there&#8217;s no confusion about what the designs should do. Stakeholders can interact with UXPin prototypes, including completing forms, making purchases, upgrading\/downgrading plans, and more.&nbsp;<\/p>\n\n\n\n<p>Designers use <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/preview-and-share\/\" target=\"_blank\" rel=\"noreferrer noopener\">Preview and Share<\/a> to share prototypes in the browser or <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/uxpin-mirror\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Mirror<\/a> for mobile applications. They can also <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/preview-and-share\/#password-protect-a-design\" target=\"_blank\" rel=\"noreferrer noopener\">password-protect designs<\/a> so that only those authorized can view them.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/comments\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Comments<\/a> allow stakeholders to <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/comments\/#comments-on-preview\" target=\"_blank\" rel=\"noreferrer noopener\">share feedback on prototypes<\/a>. They can assign comments to team members who can action and mark them as resolved once complete. You can <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/comments\/#team-and-public-comments\" target=\"_blank\" rel=\"noreferrer noopener\">add these extra team members and stakeholders for free<\/a>, allowing everyone to collaborate in UXPin without purchasing additional users for non-designers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-7-run-usability-tests\">Step 7: Run usability tests<\/h3>\n\n\n\n<p>As with stakeholder feedback, designers can use Preview and Share to test in the browser or UXPin Mirror for native app testing.<\/p>\n\n\n\n<p>With UXPin&#8217;s advanced prototypes, design teams <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototypes-improve-usability-testing\/\" target=\"_blank\" rel=\"noreferrer noopener\">receive meaningful, actionable feedback<\/a> from usability participants, allowing them to identify more problems and opportunities.<\/p>\n\n\n\n<p>UXPin uses a component-based approach to designs, meaning designers create fully interactive components rather than multiple frames as they would in image-based design tools. The result is fewer screens, making it easier and faster to test and iterate.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-8-design-handoff\">Step 8: Design handoff<\/h3>\n\n\n\n<p>Design handoffs are much smoother with less confusion in UXPin. Prototypes look and feel like the final product, giving engineers an immersive understanding of triggers, interactions, animations, and user flows.<\/p>\n\n\n\n<p>Designers can include prototypes, design files, <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/documentation\/\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a>, assets, and <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/spec-mode\/\" target=\"_blank\" rel=\"noreferrer noopener\">technical specs<\/a> for engineers to examine. With final product-like functionality and fidelity, prototypes need less explanation and documentation.<\/p>\n\n\n\n<p>Team members can use <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/comments\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Comments<\/a> to collaborate throughout the design handoff, keeping everything in one location, minimizing errors and &#8220;missed&#8221; files.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Create prototypes that are fully interactive<\/h2>\n\n\n\n<p>UXPin&#8217;s code-based features enable designers to go beyond what&#8217;s capable in image-based design tools like <a href=\"https:\/\/www.uxpin.com\/uxpin-vs-figma\" target=\"_blank\" rel=\"noreferrer noopener\">Figma<\/a>, <a href=\"https:\/\/get.uxpin.com\/uxpin-vs-adobe-xd\/\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe XD<\/a>, <a href=\"https:\/\/www.uxpin.com\/uxpin-vs-invision\" target=\"_blank\" rel=\"noreferrer noopener\">InVision<\/a>, and others.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">Design, collaborate, and move fast with UXPin. Try these powerful features for free:<br>\u26a1\ufe0fAuto layout<br>\ud83e\udde0Conditional logic<br>\ud83c\udfa8Design systems<br>\ud83d\udcabGet UI elements&#39; code<br><br>Try UXPin for free \ud83c\udf89 <a href=\"https:\/\/t.co\/Me1llOBckA\">https:\/\/t.co\/Me1llOBckA<\/a> <a href=\"https:\/\/t.co\/qjs41PNl6O\">pic.twitter.com\/qjs41PNl6O<\/a><\/p>&mdash; UXPin (@uxpin) <a href=\"https:\/\/twitter.com\/uxpin\/status\/1572938273676300290?ref_src=twsrc%5Etfw\">September 22, 2022<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>Here are five UXPin features to take your prototyping to the next level.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-states\">States<\/h3>\n\n\n\n<p>Many design tools offer features to change component states, but these are limited to basic interactivity, like active, hover, disabled, etc. <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/states\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s States<\/a> enable designers to create complex components, including fully functioning <a href=\"https:\/\/www.uxpin.com\/examples\/accordion\" target=\"_blank\" rel=\"noreferrer noopener\">accordions<\/a>, <a href=\"https:\/\/www.uxpin.com\/examples\/multilevel-dropdown-navigation\" target=\"_blank\" rel=\"noreferrer noopener\">multilevel dropdown navigation<\/a>, and <a href=\"https:\/\/www.uxpin.com\/examples\/carousel\" target=\"_blank\" rel=\"noreferrer noopener\">carousels<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-interactions\">Interactions<\/h3>\n\n\n\n<p>Interactions are the heart of any prototype or digital product. Without interactivity, the prototyping scope is severely limited. <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Interactions<\/a> include multiple <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#triggers\" target=\"_blank\" rel=\"noreferrer noopener\">Triggers<\/a>, <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#actions\" target=\"_blank\" rel=\"noreferrer noopener\">Actions<\/a>, and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#animations\" target=\"_blank\" rel=\"noreferrer noopener\">Animations<\/a> to create immersive experiences that respond to user engagement and system changes.<\/p>\n\n\n\n<p>Designers can use <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#conditional-interactions\" target=\"_blank\" rel=\"noreferrer noopener\">Conditional Interactions<\/a> to design &#8220;if-then&#8221; and &#8220;<a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#if-else-conditions\" target=\"_blank\" rel=\"noreferrer noopener\">if-else<\/a>&#8221; conditions (similar to Javascript functions) to recreate dynamic &#8220;code-like&#8221; outcomes\u2013as the user would experience using the final product.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-variables\">Variables<\/h3>\n\n\n\n<p>UXPin comes with several <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/elements\/#forms\" target=\"_blank\" rel=\"noreferrer noopener\">form elements<\/a> that respond to user engagement like they would in code. Designers can use UXPin&#8217;s Variables to capture user inputs and use that data elsewhere in the prototype.<\/p>\n\n\n\n<p>In the sign-up form example above, the prototype captures data from the email input to tell that an email was sent to the address they entered and to check their inbox\u2013accurately replicating a typical sign-up confirmation screen with dynamic user information.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-expressions\">Expressions<\/h3>\n\n\n\n<p>Expressions allow designers to increase prototype complexity with code-like functionality. Returning to our sign-up form, we used Expressions to ensure the email and password inputs met specific criteria and triggered error messages when they weren&#8217;t met.<\/p>\n\n\n\n<p>Some of the data designers can use in Expressions include:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Numbers \u2013 matching numerical values<\/li>\n\n\n\n<li>Strings \u2013 text specified in double quotation marks, e.g., &#8220;Text&#8221;<\/li>\n\n\n\n<li>Content of elements \u2013 content of an element specified in single quotation marks, e.g., &#8216;Box&#8217;<\/li>\n\n\n\n<li>Function \u2013 any of the supported functions, e.g., length(string)<\/li>\n\n\n\n<li>Boolean values \u2013 true<strong> <\/strong>or<strong> <\/strong>false value<\/li>\n<\/ul>\n\n\n\n<p>When designers combine these features, the possibilities are endless. They&#8217;re only constrained by code, thus enhancing prototype capability and developer collaboration.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Component import<\/h3>\n\n\n\n<p>Code import is a way to sync development components with UXPin. If you want to increase productivity, reach consistency, and collaborate better with engineers, here&#8217;s something for you. With this import, you can bring components from Git, Storybook, or npm, and speed up every part of product design process, from prototyping to design handoff.<\/p>\n\n\n\n<p>Don&#8217;t let image-based design tools limit prototyping scope. Improve prototypes with UXPin for better stakeholder feedback and user testing. Design the user experiences your customers deserve with the world&#8217;s most advanced design tool. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Designers are always looking for ways to improve their prototypes\u2013for stakeholder feedback, accurate user testing, and design handoffs. Figma is a fantastic design tool but lacks prototyping features, meaning designers must use external tools. UXPin has a plugin for Figma called UXPin \u2013 Copy. Paste. Prototype. Designers can literally copy Figma designs to UXPin and<\/p>\n","protected":false},"author":3,"featured_media":37492,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,11,19],"tags":[],"class_list":["post-37491","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-tutorials","category-uxpin"],"yoast_title":"Figma Plugin Tutorial for Exporting Designs to UXPin","yoast_metadesc":"Would you like to make Figma designs interactive? Here's the simplest way of doing that! Add advanced interactivity with this Figma plugin.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Figma Plugin Tutorial for Exporting Designs to UXPin<\/title>\n<meta name=\"description\" content=\"Would you like to make Figma designs interactive? Here&#039;s the simplest way of doing that! Add advanced interactivity with this Figma plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Figma Plugin Tutorial \u2013 Copy and Paste Design from Figma to UXPin\" \/>\n<meta property=\"og:description\" content=\"Would you like to make Figma designs interactive? Here&#039;s the simplest way of doing that! Add advanced interactivity with this Figma plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-21T11:56:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T11:56:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/UXPin-Figma-Plugin-Release.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/figma-plugin-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/figma-plugin-tutorial\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Figma Plugin Tutorial \u2013 Copy and Paste Design from Figma to UXPin\",\"datePublished\":\"2024-03-21T11:56:15+00:00\",\"dateModified\":\"2024-03-21T11:56:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/figma-plugin-tutorial\\\/\"},\"wordCount\":1776,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/figma-plugin-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/UXPin-Figma-Plugin-Release.png\",\"articleSection\":[\"Blog\",\"Tutorials\",\"UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/figma-plugin-tutorial\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/figma-plugin-tutorial\\\/\",\"name\":\"Figma Plugin Tutorial for Exporting Designs to UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/figma-plugin-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/figma-plugin-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/UXPin-Figma-Plugin-Release.png\",\"datePublished\":\"2024-03-21T11:56:15+00:00\",\"dateModified\":\"2024-03-21T11:56:42+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Would you like to make Figma designs interactive? Here's the simplest way of doing that! Add advanced interactivity with this Figma plugin.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/figma-plugin-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/figma-plugin-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/figma-plugin-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/UXPin-Figma-Plugin-Release.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/UXPin-Figma-Plugin-Release.png\",\"width\":1200,\"height\":600,\"caption\":\"UXPin Figma Plugin Release\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/figma-plugin-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Figma Plugin Tutorial \u2013 Copy and Paste Design from Figma to UXPin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Figma Plugin Tutorial for Exporting Designs to UXPin","description":"Would you like to make Figma designs interactive? Here's the simplest way of doing that! Add advanced interactivity with this Figma plugin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Figma Plugin Tutorial \u2013 Copy and Paste Design from Figma to UXPin","og_description":"Would you like to make Figma designs interactive? Here's the simplest way of doing that! Add advanced interactivity with this Figma plugin.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/","og_site_name":"Studio by UXPin","article_published_time":"2024-03-21T11:56:15+00:00","article_modified_time":"2024-03-21T11:56:42+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/UXPin-Figma-Plugin-Release.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Figma Plugin Tutorial \u2013 Copy and Paste Design from Figma to UXPin","datePublished":"2024-03-21T11:56:15+00:00","dateModified":"2024-03-21T11:56:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/"},"wordCount":1776,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/UXPin-Figma-Plugin-Release.png","articleSection":["Blog","Tutorials","UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/","name":"Figma Plugin Tutorial for Exporting Designs to UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/UXPin-Figma-Plugin-Release.png","datePublished":"2024-03-21T11:56:15+00:00","dateModified":"2024-03-21T11:56:42+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Would you like to make Figma designs interactive? Here's the simplest way of doing that! Add advanced interactivity with this Figma plugin.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/UXPin-Figma-Plugin-Release.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/UXPin-Figma-Plugin-Release.png","width":1200,"height":600,"caption":"UXPin Figma Plugin Release"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/figma-plugin-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Figma Plugin Tutorial \u2013 Copy and Paste Design from Figma to UXPin"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/37491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=37491"}],"version-history":[{"count":7,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/37491\/revisions"}],"predecessor-version":[{"id":52495,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/37491\/revisions\/52495"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/37492"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=37491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=37491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=37491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}