{"id":124731,"date":"2018-03-15T09:36:33","date_gmt":"2018-03-15T08:36:33","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/sketch-and-justinmind-integration\/"},"modified":"2025-02-03T16:43:51","modified_gmt":"2025-02-03T15:43:51","slug":"sketch-and-justinmind-integration","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/sketch-and-justinmind-integracion","title":{"rendered":"Integraci\u00f3n de Justinmind con Sketch"},"content":{"rendered":"<p>Justinmind est\u00e1 integrado con el editor de gr\u00e1ficos vectoriales y herramienta de dise\u00f1o Sketch. Hay dos formas de llevar dise\u00f1os de Sketch a Justinmind, una es utilizar la opci\u00f3n \u00abCopiar a SVG\u00bb y la otra es utilizar el plugin de Justinmind para Sketch. <\/p>\n<h2><a id=\"copy-and-paste-svg-sketch\"><\/a>Copiar y pegar el c\u00f3digo SVG<\/h2>\n<p>Para llevar cualquier elemento, grupo de elementos o mesas de trabajo de Sketch a Justinmind, s\u00f3lo tienes que seleccionarlos en Sketch y seleccionar la opci\u00f3n \u00abCopiar c\u00f3digo SVG\u00bb con el bot\u00f3n derecho del rat\u00f3n. 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. Del mismo modo, si tienes alg\u00fan elemento vectorial en Justinmind creado con la herramienta \u00abPluma\u00bb, puedes llevarlo a Sketch para seguir edit\u00e1ndolo. Haz clic con el bot\u00f3n derecho en el elemento vectorial en Justinmind y selecciona \u00abCopiar c\u00f3digo SVG\u00bb; a continuaci\u00f3n, abre Sketch y p\u00e9galo. La estructura de capas del elemento vectorial creado en Justinmind se mantiene en Sketch.  <\/p>\n<p>Puedes avanzar y retroceder utilizando Copiar y Pegar tantas veces como necesites.<\/p>\n<h2><a id=\"setting-up-your-justinmind-plugin-for-sketch\"><\/a>Configurar tu plugin Justinmind para Sketch<\/h2>\n<p>Tambi\u00e9n puedes utilizar el plugin Justinmind para Sketch. Para empezar a utilizar el plugin Justinmind para Sketch: <\/p>\n<ol>\n<li><a href=\"https:\/\/download.justinmind.com\/prototyper-plugins\/justinmind_sketch_plugin.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Descargar el plugin<\/a><\/li>\n<li>Una vez descargado, descompr\u00edmelo y haz doble clic en el archivo \u00ab.sketchplugin\u00bb para instalarlo.Ten en cuenta que necesitar\u00e1s una cuenta de Sketch operativa y Sketch descargado en tu ordenador para poder utilizar esta integraci\u00f3n.<video style=\"max-width:820px; width:100%; padding:20px 0px\" class=\"lazyload\" preload=\"auto\" muted=\"\" width=\"100%\" height=\"100%\" loop=\"\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/sketch-plug-in-install.png\" playsinline=\"\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/sketch-plug-in-install.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/sketch-plug-in-install.png\" alt=\"Instalaci\u00f3n del plug-in de sketch\">Instalaci\u00f3n del plug-in de sketch<\/source><\/video><\/li>\n<li>Para empezar a utilizar el plugin Justinmind en Sketch, abre el programa Sketch y ve a la opci\u00f3n de men\u00fa Plugins de la barra de herramientas principal. Selecciona la opci\u00f3n \u00abJustinmind\u00bb y elige entre las siguientes opciones:\n<ul>\n<li><strong>Exportar capas de mesas<\/strong> de trabajo: selecciona esta opci\u00f3n para trabajar en mesas de trabajo con capas separadas (cada mesa de trabajo de Sketch se exportar\u00e1 como una pantalla independiente, y cada capa tambi\u00e9n se exportar\u00e1 individualmente). Puedes elegir exportar todas las mesas de trabajo o seleccionarlas individualmente <\/li>\n<li><strong>Exportar<\/strong> mesas de <strong>trabajo como im\u00e1genes<\/strong>: selecciona esta opci\u00f3n para trabajar en tus mesas de trabajo en Justinmind como una sola capa. Esta opci\u00f3n funciona mejor cuando has completado la fase de dise\u00f1o visual y s\u00f3lo quieres a\u00f1adir funcionalidad a tu dise\u00f1o en Justinmind <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13107\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/export-artboards.png\" alt=\"exportar mesas de trabajo\" width=\"755\" height=\"425\"><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h4>Exportar capas de mesas de trabajo<\/h4>\n<p>Si quieres exportar las mesas de trabajo como capas:<\/p>\n<ol>\n<li>Haz clic en la opci\u00f3n \u00abExportar capas de mesas de trabajo\u00bb:<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13108\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/export-artboards-layers.png\" alt=\"exportar capas de mesas de trabajo\" width=\"755\" height=\"425\"><\/li>\n<li>Aparecer\u00e1 el siguiente cuadro de di\u00e1logo:<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13109\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/export-artboards-layers-dialog.png\" alt=\"exportar capas de mesas de trabajo\" width=\"755\" height=\"425\">\n<ol class=\"image-bullet\">\n<li>Selecciona una mesa de trabajo individual para exportar<\/li>\n<li>Marca \u00abExportar todo\u00bb para exportar todas las mesas de trabajo<\/li>\n<li>Elige un dispositivo prototipo al que exportar tus mesas de trabajo. Las opciones vertical y horizontal tambi\u00e9n est\u00e1n disponibles para dispositivos m\u00f3viles y tabletas. <\/li>\n<\/ol>\n<\/li>\n<li>Una vez hecha tu selecci\u00f3n, haz clic en \u00abExportar\u00bb para exportar tu(s) mesa(s) de trabajo a Justinmind.<\/li>\n<li>Elige una ubicaci\u00f3n dentro de tus carpetas para guardar tu(s) mesa(s) de trabajo exportada(s). El tipo de archivo ser\u00e1 \u00ab.vp\u00bb, un archivo Justinmind. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13110\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/export-artboards-folder.png\" alt=\"exportar carpeta artboards\" width=\"755\" height=\"425\"><\/li>\n<li>Aparecer\u00e1 el siguiente cuadro de di\u00e1logo, inform\u00e1ndote de que tu(s) mesa(s) de trabajo est\u00e1(n) siendo exportada(s):<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13111\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/artboards-being-exported-dialog.png\" alt=\"di\u00e1logo de mesas de trabajo exportadas\" width=\"755\" height=\"425\"><\/li>\n<li>Por \u00faltimo, aparecer\u00e1 el siguiente cuadro de di\u00e1logo cuando tu(s) mesa(s) de trabajo se haya(n) exportado correctamente:<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13112\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/artboards-exported-successfully.png\" alt=\"mesas de trabajo exportadas correctamente\" width=\"755\" height=\"425\"><\/li>\n<li>Localiza tu archivo .vp y haz doble clic en \u00e9l para abrirlo en Justinmind.<\/li>\n<\/ol>\n<h2><a id=\"adding-interaction-sketch\"><\/a>A\u00f1adir interacciones a los dise\u00f1os de Sketch<\/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 lleves un dise\u00f1o de Sketch a Justinmind, puedes seleccionar inmediatamente cualquier capa y <a href=\"\">a\u00f1adirle eventos.<\/a> Si lo que quieres es simular elementos responsivos, 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 \u00abTrayectoria &#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-sketch\"><\/a>Hacer interactivos los formularios de entrada de Sketch<\/h2>\n<p>Una forma sencilla de aprovechar la integraci\u00f3n entre Justinmind y Sketch es hacer que los formularios de entrada ya dise\u00f1ados sean interactivos con fines de test. Trae tu formulario de entrada dise\u00f1ado desde Sketch utilizando la opci\u00f3n \u00abCopiar c\u00f3digo SVG\u00bb o el plugin de Justinmind para Sketch. 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;Trayectoria &#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>Justinmind est\u00e1 integrado con el editor de gr\u00e1ficos vectoriales y herramienta de dise\u00f1o Sketch. Hay dos formas de llevar dise\u00f1os de Sketch a Justinmind, una es&#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-124731","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\/124731"}],"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=124731"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124731\/revisions"}],"predecessor-version":[{"id":126140,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124731\/revisions\/126140"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}