.
selección herramientas para prototipado
GA6-220501096-AA3-EV01
Luis Felipe Barrios Rocha
Centro De Gestión Y Desarrollo Sostenible Sur Colombiano Sena Pitalito.
Tecnólogo En Análisis Y Desarrollo De Software
Instructor: Herley Antonio Puentes Peñaloza
INTRODUCCION:
En el presente documento se ha seleccionado Figma como la herramienta de
prototipado principal, destacada por su versatilidad y enfoque colaborativo en tiempo
real. Figma no solo permite la creación de interfaces de usuario (UI) de alta calidad,
sino que también facilita la interacción continua entre diseñadores y desarrolladores, lo
que optimiza los flujos de trabajo y acelera los procesos de validación y entrega.
A lo largo del documento, se presentan pantallazos que ilustran sus funcionalidades
más relevantes, tales como la creación de prototipos interactivos, la utilización de
componentes reutilizables y las opciones de diseño responsivo. Asimismo, se incluyen
ejemplos prácticos que permiten visualizar el potencial de esta herramienta en la
creación de interfaces eficientes y visualmente atractivas. Con esta guía se busca
proporcionar una comprensión integral de Figma, enfatizando su impacto positivo en
proyectos de diseño y desarrollo digital.
OBJETIVO
El objetivo principal de este trabajo es explorar y comprender los elementos básicos la
herramienta Figma, enfocándonos en su estructura, capacidades y funcionalidades
esenciales. A través del uso práctico de la plataforma, se busca no solo familiarizarnos
con las herramientas básicas que ofrece, sino también adquirir las competencias
necesarias para diseñar interfaces de usuario (UI) funcionales, atractivas y alineadas
con las tendencias actuales de diseño.
Además, se pretende fomentar habilidades que permitan crear prototipos interactivos,
trabajar de forma colaborativa en proyectos digitales y optimizar flujos de trabajo en
equipos multidisciplinarios.
Creación de una pantalla en Figma
1. Añadir un marco (Frame):
Para comenzar, seleccionamos la herramienta de marco haciendo clic en el
icono del rectángulo resaltado en el círculo rojo. Luego, arrastramos con el
mouse para definir el tamaño del marco según las necesidades de nuestro
diseño.
2. Agregar texto:
Hacemos clic en el icono de texto (resaltado en el círculo verde) para insertar un
campo de texto en la pantalla. Posteriormente, podemos convertir este elemento
en un frame utilizando la combinación de teclas CTRL + ALT + G. debemos
asegurarnos de darle un nombre significativo para mantener una buena
organización.
Recomendación: Aunque es posible agrupar los elementos en un frame a medida que
los creamos, es mejor primero diseñar toda la interfaz y, al finalizar, agrupar los
componentes en marcos según su función. Esto facilita la gestión y optimización del
diseño.
Agregar una imagen de fondo y crear un formulario en Figma
1. Agregar una imagen de fondo:
Si tenemos la imagen guardada en nuestro equipo, simplemente la buscamos,
copiamos y pegamos dentro de un rectángulo que hayamos creado
previamente. Ajustamos la imagen dentro del rectángulo para que encaje
correctamente. Luego, seleccionamos la opción "Send to Back" para enviar la
imagen al fondo y usarla como fondo del proyecto.
Crear campos de formulario:
Para diseñar los campos del formulario, utilizamos rectángulos como contenedores y
la herramienta Texto (T) para añadir etiquetas o descripciones a cada campo. Esto nos
ayuda a estructurar de forma clara los elementos de la pantalla.
Aplicar estilo a los elementos:
Para darle estilo a cualquier elemento, seleccionamos el campo que deseamos
modificar. Luego, accedemos a la pestaña Custom, ubicada en el panel derecho de la
pantalla.
Ajuste de color: Haciendo scroll hasta encontrar el selector de color correspondiente.
Cambiamos el tono usando la barra tipo arcoíris o arrastrando directamente el control
hasta el color deseado.
Opacidad: Si queremos que el rectángulo tenga un estilo más sutil, ajustamos la
opacidad usando la barra inferior. Esto nos permite equilibrar el contraste entre el fondo
y el texto.
Texto visible: debemos asegurarnos de que el color del texto sea claro y legible sobre
el fondo. Por ejemplo, en este caso, seleccionamos blanco para garantizar la visibilidad.
Para hacerlo(esto porque estamos aplicando un fondo oscuro a el campo del texto),
hacemos clic en el campo de texto y luego elegimos el color deseado desde la paleta.
Aplicar efecto blur al fondo:
Para darle un toque más estético al diseño, utilizamos el efecto Blur de Figma para
desenfocar ligeramente el fondo. Esto nos permite destacar los elementos del
formulario sin perder armonía en el diseño y la imagen de fondo.
Agrupar elementos:
Una vez finalizado el diseño del campo de registro, puedemos agrupar los elementos
para facilitar su gestión. Seleccionamos los componentes manteniendo presionada la
tecla Shift mientras hacemos clic en cada uno. Cuando hayamos seleccionado todos
los elementos que deseamos agrupar, soltamos la tecla Shift y presionamos CTRL + G
para crear el grupo.
Para crear una interacción que redirija al usuario al hacer clic en los botones “Ya tengo
cuenta” o “Registrarme”, seguimos estos pasos:
1. Seleccionamos la pestaña Prototype en Figma, ubicada en la parte superior
derecha.
2. Hacemos clic en el botón del que queremos activar la interacción (en este caso,
“Registrarme” o “Ya tengo cuenta”).
3. Desde el círculo azul que aparece junto al botón seleccionado, arrastramos una
línea hacia la pantalla o el frame al que deseamos que redirija (por ejemplo, la
pantalla de Login).
Con esto, al hacer clic sobre cualquiera de los botones, el prototipo simulará la
navegación hacia la pantalla correspondiente. Este proceso facilita la creación de
transiciones fluidas entre las diferentes vistas del diseño, dando la sensación de una
aplicación real en funcionamiento.
