Creando tu primera mesa de trabajo en Sketch

    Al final de este tema, tendrá una mesa de trabajo Sketch para una pantalla de registro utilizando el sistema Indigo.Design. Si utiliza Adobe XD para diseñar, vaya a este tema. Si usa Figma para el diseño, vaya a este tema.

    What you need

    Si la fuente web Titillium no está instalada en su computadora, hágalo antes de comenzar. Todos los textos del sistema Indigo.Design lo utilizan.

    Step by step

    1. Add the Indigo.Design System as a Library.

    1. Descargue el sistema Indigo.Design.

      Contiene un archivo Sketch con 26 páginas en la sección Páginas que se distinguen por tres tipos de iconos:

      • 🎨 ~ páginas de estilo: todos los recursos de estilo, como íconos de materiales, colores, tipografía, elevación e ilustraciones, se pueden encontrar en las cinco páginas superiores.

      • 🧩 Página de componentes: un amplio conjunto de componentes para diseñar sus ideas de diseño. A través de varios ajustes preestablecidos disponibles en el menú Insert y anulaciones de estados y diseños para configurar en el panel derecho de Sketch UI, puede crear diseños compatibles con Ignite UI for Angular y nuestro motor de generación de código.

      • 🌆 ~ páginas de patrones: los componentes dan forma a patrones significativos para el diseño de aplicaciones productivas que se pueden encontrar repartidos en las páginas restantes.

    2. Abra la aplicación Sketch en su Mac, haga clic en Sketch en el menú de la aplicación y seleccione Preferencias.

    3. En el cuadro de diálogo, seleccione la pestaña Libraries y haga clic en el botón Agregar biblioteca....​

    4. Navegue hasta la carpeta donde descargó la biblioteca.

    5. Selecciónelo y haga clic en Open.

    6. Asegúrese de que aparezca en la lista del cuadro de diálogo Preferences y de que esté marcado.

    Es posible que hayas notado que en la imagen de arriba, la biblioteca también parece estar presente en mi nube Sketch y, como alternativa, puedes usar este mecanismo si estás ejecutando la versión 57 o posterior. La configuración es muy sencilla, sólo necesita abrir el archivo Sketch Indigo.Design y guardarlo en su nube Sketch. Puede encontrar una explicación detallada de cómo configurar Indigo.Design como una biblioteca en la nube en esta publicación de Medium. Una vez que haya agregado la biblioteca con éxito, aparecerá en la sección Symbols del menú Insert.

    Note

    Si ya tiene el sistema Indigo.Design configurado en Sketch y desea actualizar a una versión más nueva, abra sus preferencias Sketch, elimine la biblioteca actual e instale la nueva siguiendo los pasos anteriores. Asegúrese de volver a aplicar cualquier tema y personalización a través del complemento Indigo.Design y tenga en cuenta que es posible que deba vincular algunos componentes o anulaciones en sus archivos de diseño manualmente a los símbolos en la nueva biblioteca si Sketch no lo hace automáticamente por usted.

    2. Create an artboard.

    1. En la aplicación Sketch de tu Mac, crea un nuevo archivo.
    2. Seleccione el tamaño de la mesa de trabajo.
      Presione la tecla A y seleccione el tamaño de la mesa de trabajo en el panel de la derecha.
      Este ejemplo es para un iPhone 11 en orientación vertical (414x896). Si no ve esta mesa de trabajo preestablecida, elija Dispositivos Apple en el menú desplegable en la parte superior del panel.

    3. Add and customize components.

    Usaremos el menú Insert para agregar componentes de la Biblioteca de diseño de Indigo y luego los personalizaremos usando el panel de la derecha.

    Warning

    Los símbolos y componentes designados como_Overrides no se deben insertar en las mesas de trabajo, ya que proporcionan estados de componentes y no representan un componente completo por sí solo.

    Estos son los pasos para recrear la pantalla del ejemplo.

    1. Agrega la barra de navegación.

      1. En el menú Insert, seleccione Símbolos / Indigo.Design / Navegación / Barra de navegación / Elevado.
      2. Colóquelo en la parte superior de la mesa de trabajo y estírelo para ocupar todo el ancho disponible.
      3. En la sección Cambiar tamaño del panel de la derecha, fíjelo a la parte superior de la mesa de trabajo y fije su altura.
      4. En la sección Anulaciones, establezca la Acción izquierda en ~Sin símbolo y luego establezca el Título en "Registrarse". Después de eso, establezca el 1 | Icono, 2 | Icono y 3 | Icono para ~Sin símbolo.

    2. Agrega el color de fondo.
      Presione la tecla R y arrastre una forma rectangular, asegurándose de que tenga el tamaño adecuado para llenar el área disponible debajo de la barra de navegación y que también esté debajo como una capa. Con el rectángulo seleccionado, en el panel derecho, debajo de Apariencia, encontrará un menú desplegable de Estilo de capa. Ábrelo y elige Indigo.Design / Color / Fill / primario.100.

    3. Añade el fondo del formulario.

      1. Presione la tecla R nuevamente y arrastre una forma rectangular con un tamaño de 280x378.
      2. Asígnale el siguiente estilo Indigo.Design / Color / Fill / white.
      3. Colóquelo en el centro de la mesa de trabajo.

    4. Agregue el título del formulario.

      1. Presione la tecla T para agregar un elemento de texto encima del rectángulo blanco y escriba "Iniciar presupuesto" en él.
      2. Asígnale el siguiente estilo de tipografía de manera similar a como se asignó un color a un rectángulo arriba, pero en Apariencia encontrarás un menú desplegable Estilo de texto. Ábrelo y elige Indigo.Design / Título H4 / Centro / Activo.
      3. Colócalo en la parte superior del rectángulo blanco, con un espacio de 16 píxeles en la parte superior.

    5. Agregue las entradas para el nombre y apellido.

      1. En el menú Insert, seleccione Símbolos / Indigo.Design / Entrada / Simple / Línea / Habilitado.
      2. En la sección Anulaciones, establezca el Estado en ~Rellenado.
      3. Establezca el contenedor de prefijo y el contenedor de sufijo en ~Sin símbolo.
      4. Establezca la etiqueta en "Nombre" y el valor en "Eliza".
      5. Colóquelo debajo del título. Deja 16px a la izquierda y arriba.
      6. Establece su ancho en 116px.
      7. Duplica esta entrada.
      8. Coloca el nuevo a la derecha del primero, con un espacio de 16px entre los dos.
      9. En la sección Anulaciones, establezca la Etiqueta en "Apellido" y el Valor en "Morales".

    6. Agregue las entradas para el nombre de usuario y la contraseña.

      1. Duplique una de las entradas de Nombre dos veces para crear dos entradas más para Nombre de usuario y Contraseña.
      2. Colócalos uno debajo del otro con un espacio vertical de 16px entre sí y con los del paso anterior.
      3. Estírelos en todo el ancho con un espacio de 16 píxeles en ambos lados.
      4. En la sección Anulaciones, establezca sus Etiquetas en "Nombre de usuario" y "Contraseña" y sus Valores en "Leaellynasaura" y "************".
      5. Mientras que también establece el Tipo de contenido de la entrada Contraseña en Contraseña.

    7. Agregue el botón de registro.

      1. En el menú Insert, seleccione Símbolos / Indigo.Design / Botón / Contenido / Habilitado.
      2. Colóquelo debajo de las entradas, estírelo en todo su ancho dejando 16 píxeles a la izquierda, a la derecha y desde las entradas de arriba.
      3. En la sección Anulaciones, establezca el icono Antes y el icono Después en ~Sin símbolo.
      4. Configure el Texto en "REGISTRARSE" y actualice su Estilo a ~Blanco.
      5. Actualice el fondo a ~info.

    8. Agregue el texto de aceptación de los términos.

      1. Presione la tecla T para agregar otro elemento de texto debajo del botón y escriba "Al hacer clic en el botón" REGÍSTRESE "arriba, acepta nuestros Términos de uso".
      2. Asígnale el siguiente estilo Indigo.Design / Caption / Center / Inactive.
      3. Cambie su tamaño para que haya un espacio de 16 píxeles a la izquierda, derecha y arriba.

    9. Haga que la mesa de trabajo responda.

      1. Seleccione las capas de texto, las entradas, el botón y el rectángulo blanco, y agrúpelos.
      2. Fije el ancho y el alto del grupo y fíjelo en la parte superior desde las opciones de Cambio de tamaño en el panel de la derecha.

    Additional Resources

    Temas relacionados:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.