{"id":124715,"date":"2019-06-06T22:21:08","date_gmt":"2019-06-06T20:21:08","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/justinmind-integration-with-adobe-xd\/"},"modified":"2025-01-30T12:56:10","modified_gmt":"2025-01-30T11:56:10","slug":"justinmind-integration-with-adobe-xd","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/justinmind-integracion-con-adobe-xd","title":{"rendered":"Integraci\u00f3n de Justinmind con Adobe XD"},"content":{"rendered":"<p>Hay dos formas de importar tu trabajo de Adobe XD a Justinmind.<\/p>\n<h2><a id=\"copy-and-paste-svg-adobexd\"><\/a>Copiar y pegar el c\u00f3digo SVG<\/h2>\n<p>Para llevar cualquier elemento, grupo de elementos o mesas de trabajo de Adobe XD a Justinmind s\u00f3lo tienes que seleccionarlos en Adobe XD y seleccionar la opci\u00f3n del bot\u00f3n derecho \u00abCopiar c\u00f3digo SVG\u00bb. A continuaci\u00f3n, abre Justinmind y selecciona la opci\u00f3n del men\u00fa principal \u00abEditar &#8211; Pegar\u00bb para traer todos los elementos vectoriales con la misma estructura y nombres de capa que ten\u00edan en Sketch. A continuaci\u00f3n, puedes seleccionar cada elemento vectorial individual y modificarlo como quieras. De forma similar, si tienes alg\u00fan elemento vectorial en Justinmind creado con la herramienta \u00abPluma\u00bb, puedes llevarlo a Adobe XD para seguir edit\u00e1ndolo. Haz clic con el bot\u00f3n derecho en el elemento vectorial en Justinmind y selecciona \u00abCopiar c\u00f3digo SVG\u00bb, luego abre Adobe XD y p\u00e9galo. La estructura de capas del elemento vectorial creado en Justinmind se mantiene en Sketch. Puedes avanzar y retroceder utilizando Copiar y Pegar tantas veces como necesites.  <\/p>\n<h2><a id=\"setting-up-your-justinmind-plugin-for-adobexd\"><\/a>Configurar el plugin de Justinmind para Adobe XD<\/h2>\n<p>Otra forma de introducir dise\u00f1os de Adobe XD en Justinmind es utilizar el plugin Justinmind para XD:<\/p>\n<ol>\n<li>Abre Adobe XD, busca en el men\u00fa principal Plugins y selecciona \u00abExaminar Plugins\u00bb.<\/li>\n<li>En la ventana que aparece, ve a &#8216;Todos los plugins&#8217; -&gt; &#8216;Buscar todos los plugins&#8217;, busca &#8216;Justinmind&#8217;, e instala el plugin Justinmind para XD.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16473\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/XdPlugin.png\" alt=\"Plugin XD\" width=\"792\" height=\"446\"><\/li>\n<\/ol>\n<p>Una vez instalado el plugin, abre el archivo que quieras exportar. A continuaci\u00f3n, ve al men\u00fa Plugins y selecciona \u00abXD a Justinmind\u00bb. Ver\u00e1s un di\u00e1logo en el que puedes especificar el nombre y el destino de la exportaci\u00f3n. Despu\u00e9s, el plugin generar\u00e1 un archivo .vp compatible con Justinmind. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16351\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/ExportDialog.png\" alt=\"Di\u00e1logo de exportaci\u00f3n de Adobe XD\" width=\"864\" height=\"499\"><br \/>\nEl archivo .vp generado convertir\u00e1 todas las capas de tu archivo Adobe XD en elementos y componentes individuales en Justinmind. Todo el texto de tu dise\u00f1o se mantendr\u00e1 como texto editable, y los Rect\u00e1ngulos y las Elipses permanecer\u00e1n como formas en tu prototipo de Justinmind. Todos los dem\u00e1s elementos se convertir\u00e1n en im\u00e1genes .svg.<\/p>\n<h2><a id=\"how-to-work-with-your-adobexd-files-in-justinmind\"><\/a>C\u00f3mo trabajar con tu archivo Adobe XD en Justinmind<\/h2>\n<p>Abre el archivo .vp en Justinmind y empieza a trabajar. Ver\u00e1s todas las capas de tu archivo listadas en la paleta <span style=\"font-weight: 400;\">Capas<\/span> y en el Lienzo. Haz clic en un elemento y mira en la paleta Propiedades para ver las distintas formas en que puedes personalizar a\u00fan m\u00e1s tu dise\u00f1o.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16353\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/XDinJustinmind.png\" alt=\"Archivo XD exportado a Justinmind\" width=\"864\" height=\"605\"><br \/>\nAhora puedes empezar a a\u00f1adir funcionalidades a tu prototipo, como Enlaces a otras pantallas. Haz clic <a href=\"https:\/\/www.justinmind.com\/es\/soporte\/puesta-en-marcha\">aqu\u00ed<\/a> para saber m\u00e1s sobre c\u00f3mo empezar con tu nuevo prototipo Justinmind. <\/p>\n<div><strong>Nota:<\/strong> el plugin generar\u00e1 un prototipo de dispositivo Web. Si quieres trabajar con otro tipo de dispositivo, tendr\u00e1s que cambiarlo manualmente en Justinmind. Puedes cambiar el tipo de dispositivo seleccionando la pantalla base en la <span style=\"font-weight: 400;\">paleta Capas<\/span> y, a continuaci\u00f3n, en la paleta Propiedades, en General, elige otro dispositivo del desplegable.  <\/div>\n<h2><a id=\"adding-interaction-adobexd\"><\/a>A\u00f1adir interacciones a los dise\u00f1os de Adobe XD<\/h2>\n<p>Justinmind es especialmente potente para hacer dise\u00f1os interactivos y simular aplicaciones web y m\u00f3viles tan realistas como el usuario necesite. Una vez que llevas un dise\u00f1o de Adobe XD a Justinmind, puedes seleccionar inmediatamente cualquier capa y <a href=\"https:\/\/www.justinmind.com\/es\/soporte\/eventos-interacciones\">a\u00f1adirle eventos.<\/a> Si lo que quieres es simular elementos responsive, es decir, que uno de los elementos vectoriales se ajuste a la anchura de toda la pantalla, por ejemplo, tendr\u00e1s que hacer clic con el bot\u00f3n derecho en el elemento vectorial y seleccionar primero \u00abRuta &#8211; Convertir en &#8211; imagen\u00bb. Luego, en la paleta Propiedades, podr\u00e1s establecer las propiedades de tama\u00f1o como porcentajes. <\/p>\n<h2><a id=\"interactive-forms-adobexd\"><\/a>Hacer interactivos los formularios de entrada de Adobe XD<\/h2>\n<p>Una forma sencilla de aprovechar la integraci\u00f3n entre Justinmind y Adobe XD es hacer interactivos formularios de entrada ya dise\u00f1ados para probarlos. Trae tu formulario de entrada dise\u00f1ado desde Adobe XD utilizando la opci\u00f3n \u00abCopiar c\u00f3digo SVG\u00bb. A continuaci\u00f3n, p\u00e9galo en Justinmind y haz clic con el bot\u00f3n derecho del rat\u00f3n en el dise\u00f1o de un campo de entrada. Selecciona la opci\u00f3n &#8216;Ruta &#8211; Convertir en &#8211; Campo de texto de entrada&#8217;. Ejecuta la simulaci\u00f3n y comprueba c\u00f3mo ese dise\u00f1o funciona ahora como un campo de entrada real, pero manteniendo su aspecto. Puedes convertir cualquier elemento vectorial en cualquiera de los campos de formulario de entrada predefinidos en Justinmind.     <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hay dos formas de importar tu trabajo de Adobe XD a Justinmind. Copiar y pegar el c\u00f3digo SVG Para llevar cualquier elemento, grupo de elementos o&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8431,8458],"tags":[],"class_list":["post-124715","post","type-post","status-publish","format-standard","hentry","category-guia-del-usuario","category-integraciones"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124715"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124715"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124715\/revisions"}],"predecessor-version":[{"id":125126,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124715\/revisions\/125126"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}