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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

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

20/28
Recursos

Aportes 56

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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 😕

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!

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

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

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

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

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

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 🙆‍♀️🤣🤣🤣

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