{"id":124611,"date":"2018-02-22T16:44:55","date_gmt":"2018-02-22T15:44:55","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/ui-widget-libraries\/"},"modified":"2025-02-03T16:43:40","modified_gmt":"2025-02-03T15:43:40","slug":"ui-widget-libraries","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/ui-widget-libraries","title":{"rendered":"Bibliotecas de widgets de UI"},"content":{"rendered":"

Adem\u00e1s de los elementos b\u00e1sicos de la barra de herramientas, hay miles de otros activos prefabricados que puedes a\u00f1adir a Justinmind de forma gratuita. Tambi\u00e9n puedes crear tus propias bibliotecas compartibles personalizadas para definir sistemas de dise\u00f1o de marca coherentes. <\/p>\n

<\/a>Activos prefabricados Justinmind<\/h2>\n

Bibliotecas preinstaladas<\/h3>\n

El equipo de Justinmind ha creado decenas de bibliotecas de widgets interactivos que puedes incluir en tus prototipos. Es f\u00e1cil a\u00f1adirlos a tu interfaz Justinmind: <\/p>\n

    \n
  1. Mira en la paleta Bibliotecas. Puede que encuentres algunas bibliotecas ya listadas aqu\u00ed, dependiendo del dispositivo para el que est\u00e9s creando el prototipo. \"Ver<\/li>\n
  2. Haz clic en el enlace de texto \u00abM\u00e1s bibliotecas\u00bb, que abrir\u00e1 una lista emergente de bibliotecas, como Iconos iOS, Diagramas y Componentes Web. Marca las casillas de verificaci\u00f3n de las bibliotecas que quieras a\u00f1adir y haz clic en \u00abAceptar\u00bb. Se importar\u00e1n a la paleta Bibliotecas.
    \n\"Haz
    \nAhora puedes arrastrar y soltar elementos de esas bibliotecas en tus prototipos. Desmarca las casillas de verificaci\u00f3n de la ventana emergente para eliminar las bibliotecas de la paleta. <\/li>\n<\/ol>\n

    Bibliotecas descargables<\/h3>\n

    Hay incluso m\u00e1s bibliotecas que puedes importar a Justinmind de forma gratuita:<\/p>\n

      \n
    1. Haz clic en el enlace de texto \u00abM\u00e1s bibliotecas\u00bb y toca el bot\u00f3n \u00abDescargar m\u00e1s bibliotecas de widgets\u00bb de la ventana emergente, que abrir\u00e1 un navegador web cargado con una lista de kits de UI.<\/li>\n
    2. Descarga la biblioteca que quieras utilizar.\"Encuentra<\/li>\n
    3. De nuevo en la ventana emergente \u00abM\u00e1s bibliotecas\u00bb, haz clic en el bot\u00f3n \u00abImportar biblioteca\u00bb. Selecciona el archivo de biblioteca (.jpl) que has descargado para importarlo desde el explorador de archivos. <\/li>\n
    4. Marca la casilla de la biblioteca para a\u00f1adirla a la paleta Bibliotecas.<\/li>\n<\/ol>\n

      <\/a>Bibliotecas y sistemas de dise\u00f1o personalizados<\/h2>\n

      Crea bibliotecas de elementos personalizadas y comp\u00e1rtelas con tus compa\u00f1eros de equipo para crear una \u00fanica fuente de verdad para tus dise\u00f1os. Combinado con Plantillas y Maestros, puedes desarrollar y mantener f\u00e1cilmente una marca unificada con bibliotecas compartidas personalizadas. <\/p>\n

      Crear una biblioteca personalizada<\/h3>\n
        \n
      1. Ve a la paleta Bibliotecas y haz clic en el bot\u00f3n \u00ab+\u00bb para crear una nueva biblioteca de widgets. Ponle un t\u00edtulo y una descripci\u00f3n y haz clic en \u00abAceptar\u00bb. Ver\u00e1s tu nueva biblioteca en la paleta Bibliotecas.
      2. Las bibliotecas tienen cuatro categor\u00edas diferentes que puedes definir: Colores, Estilos de Texto, Componentes y Activos. Las secciones siguientes explican c\u00f3mo a\u00f1adir y utilizar el contenido de esas categor\u00edas. <\/li>\n<\/ol>\n

        A\u00f1adir y utilizar colores en una biblioteca<\/h3>\n
          \n
        1. Para a\u00f1adir un conjunto de colores a una biblioteca, esa biblioteca tiene que estar en \u00abModo edici\u00f3n\u00bb. Entras en el \u00abModo Edici\u00f3n\u00bb inmediatamente despu\u00e9s de crear una biblioteca, pero tambi\u00e9n puedes activar ese modo haciendo clic en el icono de engranaje de una biblioteca y seleccionando \u00abEditar biblioteca\u00bb. <\/li>\n
        2. Hay dos formas de a\u00f1adir colores a una biblioteca. Una es hacer clic en el icono \u00ab+\u00bb situado junto a la palabra \u00abColores\u00bb. Aparecer\u00e1 un selector de colores y podr\u00e1s utilizarlo para seleccionar el color que quieras y darle un nombre. <\/li>\n
        3. Tambi\u00e9n puedes a\u00f1adir colores a una biblioteca arrastrando un elemento del lienzo a la secci\u00f3n \u00abColores\u00bb. Los colores utilizados por ese elemento se a\u00f1adir\u00e1n autom\u00e1ticamente a la lista. <\/li>\n
        4. Una vez que tengas colores en la secci\u00f3n \u00abColores\u00bb, podr\u00e1s utilizarlos con los elementos del lienzo. Hay dos formas de asignar un color de la biblioteca a un elemento del lienzo. Una es arrastrar el color encima del elemento. Aparecer\u00e1 una ventana emergente para seleccionar qu\u00e9 parte del elemento quieres colorear. La otra forma es hacer clic en cualquier selector de color de la paleta \u00abPropiedades\u00bb. En el selector de color que aparece, ver\u00e1s la lista de todos los colores de las bibliotecas que est\u00e1s utilizando listados al final del di\u00e1logo. Son los que tienen un peque\u00f1o rect\u00e1ngulo blanco. <\/li>\n
        5. Una vez que has utilizado un color en la biblioteca con un componente en el lienzo, ese elemento queda vinculado a ese color. As\u00ed que si en alg\u00fan momento cambias ese color en la biblioteca (haciendo doble clic sobre \u00e9l o haciendo clic con el bot\u00f3n derecho y eligiendo \u00abEditar\u00bb), todos los elementos del prototipo que estuvieran utilizando ese color, cambiar\u00e1n autom\u00e1ticamente. <\/li>\n<\/ol>\n

          A\u00f1adir y utilizar estilos de texto en una biblioteca<\/h3>\n
            \n
          1. Para a\u00f1adir un conjunto de estilos de texto a una biblioteca, esa biblioteca tiene que estar en \u00abModo edici\u00f3n\u00bb. Entras en \u00abModo edici\u00f3n\u00bb inmediatamente despu\u00e9s de crear una biblioteca, pero tambi\u00e9n puedes activar ese modo haciendo clic en el icono de engranaje de una biblioteca y seleccionando \u00abEditar biblioteca\u00bb. <\/li>\n
          2. Hay dos formas de a\u00f1adir estilos de texto a una biblioteca. Una es hacer clic en el icono \u00ab+\u00bb situado junto a la palabra \u00abEstilos de texto\u00bb. Aparecer\u00e1 un cuadro de di\u00e1logo que puedes utilizar para definir el estilo de texto que desees y darle un nombre. <\/li>\n
          3. Tambi\u00e9n puedes a\u00f1adir estilos de texto a una biblioteca arrastrando un elemento con texto desde el lienzo a la secci\u00f3n \u00abEstilos de texto\u00bb. El estilo de texto utilizado por ese elemento se a\u00f1adir\u00e1 autom\u00e1ticamente a la lista. <\/li>\n
          4. Una vez que tengas estilos de texto en la secci\u00f3n \u00abEstilo de texto\u00bb, podr\u00e1s utilizarlos con los elementos con texto del lienzo. Hay dos formas de asignar un estilo de texto de la biblioteca a un elemento del lienzo. Una es arrastrar el estilo de texto sobre el elemento. La otra es hacer clic en el desplegable que dice \u00abSin estilo de texto\u00bb en la paleta \u00abPropiedades\u00bb. Ese desplegable listar\u00e1 todos los estilos de texto de las bibliotecas que est\u00e9s utilizando. <\/li>\n
          5. Una vez que has utilizado un estilo de texto de la biblioteca con un componente del lienzo, ese elemento queda vinculado a ese estilo de texto. As\u00ed que si en alg\u00fan momento cambias ese estilo de texto en la biblioteca (haciendo doble clic sobre \u00e9l o haciendo clic con el bot\u00f3n derecho y eligiendo \u00abEditar\u00bb), todos los elementos del prototipo que estuvieran utilizando ese estilo de texto, cambiar\u00e1n autom\u00e1ticamente. <\/li>\n<\/ol>\n

            A\u00f1adir y utilizar componentes en una biblioteca<\/h3>\n
              \n
            1. Dise\u00f1a un elemento o grupo de elementos en el Lienzo. Tambi\u00e9n puedes a\u00f1adir interacciones como efectos de Rat\u00f3n sobre<\/strong> y Deslizar<\/strong>. <\/li>\n
            2. Para a\u00f1adir un elemento a una biblioteca, arr\u00e1stralo desde el Lienzo a la secci\u00f3n \u00abComponentes\u00bb de la biblioteca en la paleta Bibliotecas. Tambi\u00e9n puedes hacer clic con el bot\u00f3n derecho en un elemento, ir a \u00abA\u00f1adir a la biblioteca de widgets\u00bb y seleccionar la biblioteca. \"Arrastra
              \nA continuaci\u00f3n, escribe un nombre y una descripci\u00f3n para el elemento y haz clic en \u00abAceptar\u00bb.<\/li>\n
            3. Ahora puedes arrastrarlo y soltarlo desde la biblioteca al Lienzo para utilizarlo en tus prototipos.<\/li>\n<\/ol>\n

              A\u00f1adir y utilizar recursos gr\u00e1ficos en una biblioteca<\/h3>\n
                \n
              1. Los activos gr\u00e1ficos o ‘Activos’ son archivos de imagen que se pueden utilizar en el prototipo como im\u00e1genes o im\u00e1genes de fondo. Para a\u00f1adir activos gr\u00e1ficos a una biblioteca, \u00e9sta debe estar en \u00abModo edici\u00f3n\u00bb. Entras en \u00abModo edici\u00f3n\u00bb inmediatamente despu\u00e9s de crear una biblioteca, pero tambi\u00e9n puedes activar ese modo haciendo clic en el icono de engranaje de una biblioteca y seleccionando \u00abEditar biblioteca\u00bb. <\/li>\n
              2. Hay dos formas de a\u00f1adir un activo gr\u00e1fico a una biblioteca. Una es hacer clic en el icono \u00ab+\u00bb situado junto a la palabra \u00abActivos\u00bb. Aparecer\u00e1 un di\u00e1logo de archivo y podr\u00e1s utilizarlo para seleccionar un archivo de imagen de tu ordenador. <\/li>\n
              3. Tambi\u00e9n puedes a\u00f1adir activos a una biblioteca arrastrando una imagen, una ruta o varias rutas a la secci\u00f3n \u00abActivos\u00bb.<\/li>\n
              4. Una vez que tengas activos en la secci\u00f3n \u00abActivos\u00bb, podr\u00e1s utilizarlos con los elementos del lienzo. Puedes arrastrar un activo al lienzo y se crear\u00e1 una imagen en el prototipo utilizando ese activo. Si arrastras el activo sobre otra imagen, la imagen ser\u00e1 sustituida por la arrastrada. Si lo arrastras encima de otro tipo de elemento, el activo se utilizar\u00e1 como imagen de fondo para ese elemento. <\/li>\n
              5. Una vez que has utilizado un recurso de la biblioteca con el prototipo, ese recurso queda vinculado a todos los lugares en los que se ha utilizado. As\u00ed que si en alg\u00fan momento cambias ese recurso en la biblioteca (haciendo doble clic sobre \u00e9l o haciendo clic con el bot\u00f3n derecho del rat\u00f3n y seleccionando \u00abEditar\u00bb), todos los lugares del prototipo en los que se estaba utilizando el recurso cambiar\u00e1n autom\u00e1ticamente. <\/li>\n<\/ol>\n

                Organizar la informaci\u00f3n de tu biblioteca<\/h3>\n

                Puedes organizar los elementos de las distintas secciones de una biblioteca en grupos.<\/p>\n

                  \n
                1. Carga la biblioteca en la paleta, haz clic en el icono \u00abengranaje\u00bb y selecciona \u00abEditar biblioteca\u00bb.<\/li>\n
                2. Vuelve a hacer clic en el engranaje y selecciona \u00abNuevo grupo de widgets\u00bb.<\/li>\n
                3. Aparecer\u00e1 un di\u00e1logo para seleccionar a qu\u00e9 categor\u00eda quieres a\u00f1adir el grupo y cu\u00e1l es el nombre del nuevo grupo.<\/li>\n
                4. El nuevo grupo aparecer\u00e1 en la secci\u00f3n seleccionada. Arrastra los elementos de esa secci\u00f3n al grupo para a\u00f1adirlos a \u00e9l. <\/li>\n<\/ol>\n

                  Editar una biblioteca ya existente<\/h3>\n
                    \n
                  1. Haz clic en el bot\u00f3n \u00abengranaje\u00bb situado junto al nombre de la biblioteca en la paleta Bibliotecas y selecciona \u00abEditar biblioteca\u00bb.<\/li>\n
                  2. Haz clic con el bot\u00f3n derecho en un elemento que quieras editar y selecciona \u00abEditar detalles\u00bb para cambiar su nombre y descripci\u00f3n o \u00abEditar contenido\u00bb para cambiar su aspecto y contenido. Ver\u00e1s que el elemento se abre en una nueva pesta\u00f1a del Lienzo, donde podr\u00e1s realizar los cambios. \"Haz<\/li>\n
                  3. Haz clic en el bot\u00f3n \u00abGuardar\u00bb de la pesta\u00f1a Lienzo del elemento para guardar tus cambios en la biblioteca.\"Haz<\/li>\n<\/ol>\n

                    Puedes abrir todos los elementos para editarlos seleccionando \u00abEditar todos los widgets\u00bb en la ventana emergente del bot\u00f3n \u00abengranaje\u00bb. Ed\u00edtalos individualmente o ve al men\u00fa Editar y selecciona \u00abReemplazar estilos\u00bb para editar las propiedades de cada elemento en bloque. Haz clic en \u00abGuardar todos los widgets\u00bb en la ventana emergente del bot\u00f3n \u00abengranaje\u00bb para guardar los cambios en todos los widgets. <\/p>\n

                    Compartir una biblioteca personalizada<\/h3>\n

                    Puedes compartir una biblioteca personalizada con tus compa\u00f1eros de equipo con s\u00f3lo dos clics: Haz clic en el bot\u00f3n \u00abengranaje\u00bb situado junto al nombre de tu biblioteca en la paleta Bibliotecas y toca \u00abCompartir\u00bb.<\/p>\n

                    \"Haz
                    \nAhora tus compa\u00f1eros de equipo pueden a\u00f1adir tu biblioteca para utilizarla en sus prototipos en la ventana emergente \u00abM\u00e1s bibliotecas\u00bb. Elimina el acceso de otros a tu biblioteca haciendo clic en el bot\u00f3n \u00abengranaje\u00bb y seleccionando \u00abDescompartir\u00bb.<\/p>\n

                    Confirmar cambios en la biblioteca<\/h3>\n

                    Pulsa el bot\u00f3n \u00abengranaje\u00bb y selecciona \u00abConfirmar\u00bb en la ventana emergente para cargar los cambios de tu biblioteca. Los compa\u00f1eros de equipo pueden hacer clic en \u00abActualizar\u00bb en la ventana emergente del bot\u00f3n \u00abengranaje\u00bb para que la biblioteca descargue esas actualizaciones.
                    \n\"Haz<\/p>\n

                    <\/a>Generar un sistema de dise\u00f1o con un clic<\/h2>\n

                    Las bibliotecas no s\u00f3lo pueden utilizarse como una forma estupenda de crear dise\u00f1os coherentes r\u00e1pidamente, sino tambi\u00e9n como una gran herramienta de comunicaci\u00f3n con los desarrolladores. Ofrecer a los desarrolladores una forma de visualizar toda la informaci\u00f3n definida en una biblioteca, puede ayudar a crear coherencia y precisi\u00f3n en la UI de los proyectos de software de esa organizaci\u00f3n. Justinmind ofrece una forma de generar y personalizar una vista previa de tu biblioteca con un solo clic. <\/p>\n

                      \n
                    1. Carga la biblioteca que quieras en la paleta Bibliotecas.<\/li>\n
                    2. Haz clic en el icono \u00abengranaje\u00bb situado junto al nombre de la biblioteca y selecciona \u00abGenerar sistema de dise\u00f1o\u00bb.<\/li>\n
                    3. Se crear\u00e1 un nuevo archivo de prototipo con toda la informaci\u00f3n de la biblioteca (las descripciones de los colores, los estilos de texto definidos, los componentes con sus descripciones y la lista de activos).<\/li>\n
                    4. Como es un archivo Justinmind, puedes cambiar cualquier cosa en \u00e9l como har\u00edas con cualquier otro prototipo o dise\u00f1o. Tambi\u00e9n puedes publicarlo y compartirlo con desarrolladores u obtener un enlace y hacerlo p\u00fablico en un sitio web. <\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

                      Adem\u00e1s de los elementos b\u00e1sicos de la barra de herramientas, hay miles de otros activos prefabricados que puedes a\u00f1adir a Justinmind de forma gratuita. Tambi\u00e9n puedes…<\/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":[8418,8419],"tags":[],"class_list":["post-124611","post","type-post","status-publish","format-standard","hentry","category-formacion","category-como-empezar"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124611"}],"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=124611"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124611\/revisions"}],"predecessor-version":[{"id":126122,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124611\/revisions\/126122"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}