Descubre qu茅 ha cambiado en nuestro medio

1

Todo sobre el dise帽o de p谩ginas web acaba de cambiar

Conceptos que forman parte del dise帽o en CSS

2

La importancia de recordar las herramientas existentes

3

Flujo normal del documento: display block, inline e inline-block

4

Contextos de formato: Formato de Contexto de Bloque (BFC)

5

Posicionamiento + Din谩mica: 驴C贸mo se ver铆a?

驴Flexbox o CSS Grid?

6

Diferencias entre Flexbox y CSS Grid

7

Similitudes entre Flexbox y CSS Grid

8

驴Puedo trabajar con Flexbox y CSS Grid al tiempo?

9

Din谩mica: 驴Qu茅 usar铆as? (Parte 1)

10

Din谩mica: 驴Qu茅 usar铆as? (Parte 2) + Reto

11

驴Cu谩ndo usar Flexbox y cu谩ndo usar CSS Grid?

Modern Layouts con CSS Grid

12

驴Qu茅 son los Modern CSS Layouts?

13

Patrones para usar como punto de partida

14

Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout

15

Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect

Dise帽o web para desarrolladores

16

Din谩mica: No puedo dejar de ver

17

Design System y detalles visuales a tener en cuenta

18

Tendencias de dise帽o UI/UX: Fase de inspiraci贸n y creatividad

19

Wireframes y comunicaci贸n visual simple, intuitiva y atractiva

20

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

21

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

Del dise帽o al c贸digo

22

Primeros pasos y estructura inicial

23

Ubicaci贸n y creaci贸n de elementos

El futuro de CSS Grid

24

Entendiendo las versiones de CSS: 驴existir谩 CSS4?

25

CSS Subgrid

26

Native CSS Masonry Layout

27

CSS feature queries: @supports

28

Nosotros y el futuro de la web: tips para seguir aprendiendo y mantenerse al d铆a

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

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

20/28
Recursos

Aportes 67

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.


: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 鈥淣eumorphism鈥, 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!

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

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 馃檲馃檲馃檲

Tambi茅n pueden utilizar Adobe XD

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

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. !

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 鈥渁linear 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 ).

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 鈥渁pp鈥 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

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!

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 馃檰鈥嶁檧锔忦煠p煠p煠

馃憦馃憦馃憦 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.