Figma para devs: Auto Layout y Neumorphism (Parte 1)

:3

Algunos comandos básicos para ahorrar tiempo en Figma:

• Para crear un Frame solo oprime la tecla F.
• Para crear un rectángulo solo oprime la tecla R (si deseas un cuadrado perfecto oprime las teclas Shift + Option mientras arrastras el mouse, de esta forma crear un cuadrado en vez de un rectángulo)
• Para crear un circulo perfecto oprime la tecla O
• Para alinear un elemento en el centro del FRAME (de todo el frame, no del contenedor) oprime Option + H
• Para alinear en el centro del Frame de forma vertical oprime Option + V
• Si desea cambiar el nombre de varios elementos al tiempo (Si te das cuenta en el panel izquierdo los elementos son nombrados como Rectangle 1, Rectangle 2, o Ellipse 1, Ellipse 2… Ellipse 9, etc y quizás tu los quieras llamar music button o player buttons) solo los seleccionas (puede ser dentro directamente en el Frame de diseño o seleccionas las capas en el panel izquierdo) y oprimes Command + R, de esta forma puedes renombrar muchos elementos al tiempo.

Muy sencillo el reto en Figma. Solo hay que centrar el alignment and padding en el centro

Rayos, son demasiadas diapositivas 😕

Me fui para el curso de figma, tome 10 clases, me di cuenta que soy programador y no diseñador y regrese a acabar este curso xD

Acá esta la herramienta con la que puedes arreglar la posicion de los items ♥

Después de leer mucho sobre el tema “Neumorphism”, considero lo siguiente:

• Creo que primero tenemos que investigar a profundidad las necesidades de nuestro usuario, o cliente.
• Considero que, es necesario estudiar a profundidad los aspectos sobre accesibilidad ( ya no podemos dejar aún lado éste tema).
• En lo personal, lo usaría pero, en proyectos personales ( me gustó mucho sus paletas de color).
• Por último, considero mucho apoyarnos de las métricas ( las tienes).
  Yo, llevó apenas dos años estudiando sobre desarrollo web, diseño de experiencais, y diseño ( no tengo muchas experiencia dentro de una empresa).

les comparto un post super interesante sobre figma ! - by Adrian Twarog

https://www.freecodecamp.org/news/ui-ux-design-tutorial-from-zero-to-hero-with-wireframe-prototype-figma/

espero sea de su agrado!

Esta muy interesante todo el curso y esta clase en especial me cae como anillo al dedo, ya que necesito diseñar una interfaz para un sitio web y esta es mi gran debilidad 🙈🙈🙈

excelente curos pero demasiadas diapositivas cansa realmente, es mi opinión

Existen varias formas de centrarlo verticalmente. Una de las más sencillas es seleccionado la opción encerrada en verde 👇. ¿A que no adivinan como se llama la opción? Sí, tal cual: Align Vertical Center. También se puede hacer con Alt + V

También pueden utilizar Adobe XD

Cuando se tiene un Auto Layout, se puede pulsar en el botón de Alineamiento y padding (Alignment and padding) para escoger cómo alinear los elementos.
https://help.figma.com/hc/en-us/articles/360040451373-Create-dynamic-designs-with-Auto-layout#Alignment

Les dejo el curso de Figma que hay en la plataforma: Curso de Figma

Perrmiso voy al curso de figma y regreso que no me salen los frames xD

Podemos manipular en que posición queremos en este caso nuestros botones del reproductor es sencillo de hacerlo.

Lo que yo hice para alinear los elementos fue esto:

Luego seleccioné el contenedor verde y alineé horizontal y verticalmente el frame de los botones con Alt+V y Alt+H

Antes de continuar debo decir que al principio si pensaba que estos dos cursos eran muy teóricos, pero realmente al momento de desarrollar he usado ciertos tips y entiendo un poco mejor el flujo y la orientación que debo seguir al diseñar/desarrolar. Debo decir que lo que más me contagia es el carisma de la profesora. !

Aqui; Figma Community

llevaba mucho rato trabajando en figma y no sabía lo de frame : 0

Gracias Estefany, estos primeros pasos de introducción a Figma me emocionaron bastante.

constraints and resizing es la propiedad que permite reposicionar los elementos. Figma, sencillo e didactico para usar

Se pueden seleccionar cada uno de los ítems y alinearlos con la herramienta “alinear al medio”.

Me encanto esta clase aunque no sea un diseñador, este tipo de clases son las que me mantienen despierto por horas en la noche muy practicas y entretenidas.

Mi opinión personal es que no deberíamos pasar a depender de herramientas de paga, peor aun de pagos periódicos.

Hay dos formas de realizar el Reto:

• Si no se presionó SHift + A se pueden usar las opciones de centrado que están al principio de la barra de Design.

• Si se presionó SHift + A ver la figura

Lenguaje Devtuliano 😎😎😎

Les recomiendo este video. Está en inglés pero cuenta con subtítulos (en inglés y traducidos). Por si queiren profundizar más sin tener que hacer todo un curso completo

La página los ayudará mucho ( https://material.io/ ).
Ésta la uso para saber de medidas ( https://www.mydevice.io/#compare-devices ).

Yo hice estas cards fácilmente con figma!

![](

En auto layout hacemos un align center.

Asi me quedó:

![](

Vaya aunque habia escuchado de figma me asombra lo que puede hacer, este es mi intento

vamos con figma!

No entiendo nada, demasiadas diapositivas y no entiendo cuando pasa de un punto a otro, tendre que hacer el curso de figma y regresar en una semana.

![](

Pueden alinearse con el Auto layout o con los botones alingn vertical/ horizontal centers. Todo dependerá de lo que desees crear

Resolví el reto a nivel Figma diciéndole al Auto layout de los botones (Frame 2) Center alignment. 💪😀💻

Estoy llegando a la entendiendo que hacer layouts demasiados bonitos solo es parte de un arte informático, más no para ser aplicado en un contexto real.

¿Por qué?

En el minuto 1:26-1:30 aparece una imagen de una “app” con temática de starbucks. Esos diseños son demasiados hermosos y considero que estaría poca maíz poder tenerlos en la verdadera app. Pero nos encontramos que no, la app oficial tiene un diseño simple.

Entonces y no por ser flojo, pero me voy a dedicar más a diseñar cosas sencillas y fáciles de apreciar y usar.

Como aporte me sorprendió que se pudieron usar los mismos comando que adobe photohop o illustrator, si necesitas hacer un círculo perfecto con shift y escalándolo lo logras
Con alt puedes duplicar cualquier elemento
con shift y moviéndolo lo puede mover perfectamente en el eje que desees para que quede alineado.

En cuanto al reto solo es colocar los circulos,y con el autolayaout y los botones de alienación lo lograras.

Un reto interesante, se hace, maquetar en figma se me hace muy simple.

Por favor agregar contenido que mencionan.

Solucion reto:
En el panel de alineacion, seleccionar la quinta opcion los dos ejes verticales atravesados de manera central por un unico eje x.

Figma es muy intuitivo por su aspecto visual muy dado a resumir textos con imagenes sencillas.

Tengo un video que quiero compartirles para complementar el uso de figma Figma designing tutorial

Usando shift+ A: creamos una coleccion de elementos que podemos denominar como deseemos. Esto con el fin de crear un conjunto de elementos que se comporten como hijos de este nueva coleccion o caja.

Recomendacion:
Velocidad de reproduccion 1.25x

Reto:
Reto en figma

Genial la implementación de Figma, pero sería mejor que la profesora no solo se limite mostrar slides, sino que vaya haciendo el diseño en tiempo real, así se entiende mejor. Es tedioso solo ver imágenes de pantallazos!

https://freefrontend.com/css-neumorphism-examples/

https://neumorphism.io/

Van dos clases que ella dice que deja los enlaces y no aparecen, solo aparece el de preguntas o clases y la presentación.

Comparto mis resultados:

Reto Completado 💚
Super importante aprender a usar Auto Layout en Figma.

Leguaje Devtuliano 🙆‍♀️🤣🤣🤣

👏👏👏 Excelente curso el de Santiago, los que no lo han hecho recomiendo que vayan ahora mismo y vuelvan. 🚀

Para los que aprendimos a usar Adobe XD antes que Figma, les recomiendo leer este artículo para saber cuál es el que más se apega a sus gustos y necesidades. https://webdesign.tutsplus.com/es/articles/figma-vs-adobe-xd-in-2020--cms-34224
En mi casi me gusta más Adobe XD, aunque áun tiene un par de bugs, es más fácil y sencillo para mis necesidades, pero Figama tampoco es mala, es genial para colaborar entre varios equipos.

:3

Es esta opción:

Asa se pondría todo centrado

Los centré ajustando el padding en autolayout a center.

excelente herramienta la firma, entenderlo no cuesta nada, super descriptible, una gran forma de llamarnos la atención para adentrarnos mas en cuanto diseño

En figma existen al lado derecho propiedades donde podemos establecer hacia que lado queremos que se alineen los elementos. Para el caso del quiz podemos usar el boton de alineación inferior, es realmente sencillo.