 Bueno, y ahora vamos a ver a Mario Germán Reyes, nos va a hablar de Figma. Figma es una herramienta para crear interfaces y esto lo que puede ser el futuro de WordPress y quién mejor que Mario, que es precisamente especializado en WordPress en interfaces de usuario. Hola qué tal, cómo está? Yo soy Mario Germán, arrobo a Majer19 en las redes sociales y en esta corta charla te voy a enseñar cómo crear este prototipo de portafolio para tus proyectos personales en Figma y de paso vamos a aprender las nociones básicas para el manejo de esta herramienta. Si no conoces Figma, Figma es una aplicación para diseñar interfaces que se ejecuta en el navegador aunque también tiene app y que es posiblemente la mejor aplicación para desarrollo de proyectos, diseño de elementos e interfaces de manera colaborativa. En su sitio Figma.com simplemente puedes ingresar, loguearte y vas a tener acceso a todo lo que nos brinda la herramienta. Cuando creamos un documento nuevo ya logueados en Figma nos encontramos ante esta imagen, tenemos nuestro espacio de trabajo totalmente en blanco y dispuesto para empezar a trabajar, tenemos en la parte superior una barra de herramientas, en la parte de la izquierda nuestra parte de organización, nuestro panel de organización, tenemos en el centro nuestro canvas o nuestro espacio en blanco para comenzar a trabajar y en la parte derecha tenemos el panel de propiedades, prototipos y código. Realmente este es el entorno principal que vamos a encontrar y el principal elemento con el que vamos a trabajar es frames que lo vas a encontrar en la parte de region tools, frame o pulsando la tecla F. Al presionar sobre el frame nos van a aparecer en la parte derecha, panel de propiedades, una cantidad de options de frames que se pueden crear desde celulares, tablets, desktop e igual otros elementos. Vamos a crear por ahora para ir comenzando a trabajar el frame de un MacBook Pro y como vemos es un espacio en blanco. Si tenemos presionado la tecla command o alt en windows y presionamos la rueda o el scroll de nuestro mouse vamos a poder hacer un zoom sobre el elemento que acabamos de crear. Lo que voy a hacer es cambiarle el nombre a este frame dando doble clic en el nombre y escribiendo wireframe y vemos que a la izquierda nuestro panel de organización ya tenemos algo creado. Este símbolo de numeral o de cuatro líneas entre las hadas son los frames, así que vamos a organizar un poco nuestro trabajo para ver cómo podemos trabajar con frames que va a ser el componente principal de nuestro trabajo en Figma. Como toda herramienta de creación de interfaces con vectores o con formas tenemos unas herramientas básicas que las desplegamos de esta zona y tenemos un rectángulo en el cual tenemos presionado clic y podemos ir arrastrando si tenemos la tecla shift presionada vamos a hacer que sea simétrico. Si la soltamos pues vamos a poder modificar a nuestro antono. Tenemos el rectángulo, tenemos otras formas básicas como la línea, unas flechas, las elipses o los círculos que funcionan de la misma manera y vamos a aprovecharte una vez para introducir el panel de propiedades. Si ustedes notan si yo selecciono el elemento que acabo de crear que en este caso es un cuadrado a la derecha nuestro panel de propiedades sea activado antes estaba vacío o tenía muy pocas opciones y ahora al darle clic se activa y nos muestra una barra de alineaciones con esto podemos alinear en diferentes posiciones nuestro rectángulo. Tenemos el posicionamiento en x, en y, el ancho del alto, la inclinación y las esquinas que podemos redondear bien sea todas o bien sea una a una. Encontramos con strains que lo vemos en esta Sony que no lo vamos a mencionar en esta charla al final de la misma le podía dar un listado de temas que deberían investigar para poder llevar a buen término su trabajo en Figma. Pero si venimos a relleno a la zona donde podemos encontrar un color que ya se ha seleccionado por defecto y damos clic allí vamos a poder seleccionar cualquier color de una paleta de color es bastante amplia y bastante modificable a nuestro gusto con opacidades, con tonos, con profundidad de color. En sí es una herramienta muy potente y que nos va a permitir trabajar con el color que queramos. Encontramos también la opción de borde, algunos efectos como tal y la opción de exportar. Pero algo muy curioso es que si en este momento seleccionamos el círculo vemos que las herramientas cambian y difieren porque son elementos distintos para el rectángulo tenemos bordes de inclinación rotación para este no tenemos ya lógicamente el tema de los bordes pero sí tenemos las otras que son generales entonces allí aprendemos que en Figma hay propiedades generales y propiedades exclusivas de cada uno de los objetos. ¿Qué sucede con el texto? Bueno para eso tenemos la herramienta de texto que vemos en la parte superior o podemos habilitarla con la tecla T vamos a arrastrar manteniendo presionado el tamaño que queremos para nuestro texto y simplemente pues hacemos nuestro proceso de escritura. Si lo seleccionamos y venimos a la parte derecha vemos que nuestro panel de propiedades ya nos ha habilitado la opción de poder cambiar la letra, la fuente, vamos a poder cambiar el tamaño por unos predefinidos o por algunos que queramos, vamos a poder decirles si es bold, si es regular, si es italic, vamos a poder jugar de muchas maneras con él. Listo algo muy interesante que quería mostrarles antes de pasar al speed design de nuestro portafolio es que si seleccionamos un nuevo frame y seleccionamos por ejemplo un iPhone 8, vemos que este se coloca al lado del que ya teníamos, vamos a pasar este elemento para acá y si presionando nuestro frame vamos a prototype a la opción de show prototype settings, vamos a poder seleccionar el prototipo del dispositivo que seleccionamos, vamos a decirle que nos muestra el goal, vamos a darle presentación para que comience a cargar, nos muestra el prototipo con el elemento que tenemos allí. Una última cosa que quería mostrarles es la posibilidad de crear, vamos a cambiar esto un poco para que sean distintos, prototipos que se puedan ver y que se puedan emular comportamientos, si venimos a la opción seleccionando nuestro frame, la opción de prototype y seleccionamos un elemento estando en prototype nos va a dejar crear un ancla hacia otro frame como tal para que si nosotros damos clic en la presentación vamos a hacer la transición hacia este frame, simplemente le vamos a colocar una interacción on tap, así que vamos a ir con nuestro frame seleccionado a presentación, tocamos, tocamos el elemento y vemos que hubo un cambio de frame y podíamos hacer lo mismo de vuelta y cuando toquen el verde regrese hacia este, vamos al primero vamos a darle atrás aquí, si tocamos hacia el rojo va hacia el verde y el verde debería regresar hacia el rojo, con esto les he dado las nociones básicas de lo que tiene Figma para ofrecernos, en una charla de 10 minutos pues será bastante difícil mostrar todos los comportamientos y las propiedades que tiene, ahora lo que voy a proceder es en estos pocos minutos que quedan crear el portafolio que les mostré inicialmente en speed design para que puedan ver cómo quedaría y que la herramienta funciona bien, ya queda de cada uno de ustedes el poder practicar un poco y el estudiar lo que queda falta.