{"id":124720,"date":"2021-06-08T22:20:31","date_gmt":"2021-06-08T20:20:31","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/justinminds-integration-with-figma\/"},"modified":"2025-02-03T16:44:36","modified_gmt":"2025-02-03T15:44:36","slug":"justinminds-integration-with-figma","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/figma-and-justinmind-integration","title":{"rendered":"Integraci\u00f3n de Justinmind con Figma"},"content":{"rendered":"\n

Justinmind se integra perfectamente con la mayor\u00eda de las herramientas de dise\u00f1o vectorial y permite una transici\u00f3n fluida de una herramienta a otra. Nuestra integraci\u00f3n con Figma es una potente funci\u00f3n que te permite exportar a Justinmind todo tu proyecto Figma o s\u00f3lo los marcos de dise\u00f1o seleccionados. <\/span><\/p>\n

<\/a>C\u00f3mo utilizar el plugin Figma<\/h2>\n

Para empezar a utilizar el plugin Figma para Justinmind<\/span>:<\/p>\n

    \n
  1. Busca y abre el plugin Figma to Justinmind en tu navegador web. \"Consigue<\/span><\/li>\n
  2. En Figma, busca el plugin Justinmind en tus recursos de Plugins. \"selecciona Ten en cuenta que necesitar\u00e1s una cuenta Figma operativa y Justinmind descargado en tu ordenador para hacer uso de esta integraci\u00f3n.<\/span><\/li>\n
  3. Selecciona y ejecuta el plugin de Figma a Justinmind. Aparecer\u00e1 el siguiente cuadro de di\u00e1logo:\"\"Selecciona los fotogramas y secciones individuales que quieras exportar, o marca \u00abSeleccionar todo\u00bb para exportarlos todos (cada fotograma Figma se exportar\u00e1 como una pantalla independiente). <\/span><\/li>\n
  4. Una vez hecha tu selecci\u00f3n, haz clic en \u00abExportar\u00bb para exportar tu(s) Marco(s) a Justinmind.<\/br> Aparecer\u00e1 el siguiente cuadro de di\u00e1logo, inform\u00e1ndote de que tu(s) Marco(s) est\u00e1(n) siendo exportado(s):
    \"Di\u00e1logo<\/span><\/li>\n
  5. Una vez finalizada la exportaci\u00f3n, haz clic en \u00abGuardar\u00bb para guardar tu nuevo archivo Justinmind en tu escritorio.\"Guarda Elige una ubicaci\u00f3n dentro de tus carpetas para guardar tu(s) Fotograma(s) exportado(s). El archivo se guardar\u00e1 como un archivo Justinmind \u00ab.vp\u00bb. <\/span><\/li>\n
  6. Localiza tu archivo .vp y haz doble clic para abrirlo en Justinmind.<\/span><\/li>\n<\/ol>\n

    <\/a>Copiar y pegar el c\u00f3digo SVG<\/h2>\n

    Alternativamente, puedes llevar cualquier elemento, grupo de elementos o mesas de trabajo de Figma a Justinmind. Simplemente haz la selecci\u00f3n en Figma, luego haz clic con el bot\u00f3n derecho y selecciona \u00abCopiar c\u00f3digo SVG\u00bb. A continuaci\u00f3n, abre Justinmind y selecciona la opci\u00f3n del men\u00fa principal \u00abEdici\u00f3n – Pegar\u00bb para traer todos los elementos vectoriales con la misma estructura y nombres de capa que ten\u00edan en Figma. A continuaci\u00f3n, puedes seleccionar cada elemento vectorial individual y modificarlo como quieras. <\/p>\n

    De forma similar, si tienes alg\u00fan elemento vectorial en Justinmind creado con la \u00abherramienta Pluma\u00bb, puedes llevarlo a Figma 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 Figma y p\u00e9galo. La estructura de capas del elemento vectorial creado en Justinmind se mantiene en Figma. <\/p>\n

    Puedes avanzar y retroceder utilizando Copiar y Pegar tantas veces como necesites.<\/p>\n

    <\/a>A\u00f1adir interacciones a los dise\u00f1os Figma<\/h2>\n

    Justinmind es especialmente potente para hacer dise\u00f1os interactivos y simular aplicaciones web y m\u00f3viles con el realismo que el usuario necesita. Una vez que lleves un dise\u00f1o de Figma a Justinmind utilizando la funci\u00f3n \u00abCopiar c\u00f3digo SVG\u00bb, puedes seleccionar inmediatamente cualquier capa y a\u00f1adirle eventos.<\/a> <\/p>\n

    Si lo que quieres es simular elementos con capacidad de respuesta, 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 del rat\u00f3n sobre el elemento vectorial y seleccionar primero \u00abRuta – Convertir en – imagen\u00bb. Luego, en la paleta Propiedades, podr\u00e1s establecer las propiedades de tama\u00f1o como porcentajes. <\/p>\n

    <\/a>Hacer interactivos los formularios de entrada de Figma<\/h2>\n

    Una forma f\u00e1cil de aprovechar la integraci\u00f3n entre Justinmind y Figma es utilizarla para a\u00f1adir interacciones a tus dise\u00f1os de formularios de entrada existentes y tenerlos listos para el test de usuario. Para traer tu formulario de entrada desde Figma utiliza la opci\u00f3n \u00abCopiar c\u00f3digo SVG\u00bb, luego p\u00e9galo en Justinmind y haz clic con el bot\u00f3n derecho en un campo de entrada y selecciona la opci\u00f3n \u00abRuta – Convertir en – Campo de texto de entrada\u00bb. Inicia la simulaci\u00f3n y comprueba c\u00f3mo ese dise\u00f1o funciona ahora como un verdadero campo de entrada interactivo, manteniendo su aspecto original. Puedes convertir cualquier elemento vectorial en cualquiera de los campos de formulario de entrada predefinidos en Justinmind. <\/p>\n\n\n\n

    <\/p>\n","protected":false},"excerpt":{"rendered":"

    Justinmind se integra perfectamente con la mayor\u00eda de las herramientas de dise\u00f1o vectorial y permite una transici\u00f3n fluida de una herramienta a otra. Nuestra integraci\u00f3n con…<\/p>\n","protected":false},"author":5,"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-124720","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\/124720"}],"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\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124720"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124720\/revisions"}],"predecessor-version":[{"id":126167,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124720\/revisions\/126167"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}