Figuras e imágenes en Figma

Me gusta mucho este cuso, dejo mi aporte Saludos

Me esta gustando mucho este curso

para agilizar un poco el proceso de poner una imagen en un objeto no es necesario cambiar la propiedad del objeto en sí, basta con seleccionarlo y apretar ctrl+v y listo la imagen aparece en el interior de el objeto.
espero que les ayude a ahorrar unos cuantos segundos 😄

Figuras, efectos e imágenes en Figma

Las figuras, efectos e imagenes son otros elementos que son complementarios
al texto para que la interfaz cobre vida. Estos elementos nos ayudan a
complementar el mensaje y la experiencia que se esta creando.

Crear tu primera figura
Para crear nuestra primera figura podemos acceder a los siguientes atajos del teclado:

• r - Rectangulo
• o - Ovalo
• l - Linea

Cada uno de esos elementos tiene sus propiedades.

Propiedades de una figura
Las propiedades de una figuran afectan el estado y forma. Todas las figuras tiene:

• Alineacion
• Tamaño
• Posicion
• Rotacion
• Radio de bordes
• Constraints
• Opacidad
• Relleno (Color, Gradient, Imagen)

Organizar los objetos

• (alt / option) Calcular la distancia de un objeto
• Guias inteligentes
• Smart selection
• Padding entre elementos
• Mostrar / Ocultar
• Escalar con v o con k

Restricciones - Constraints

Todos los elementos contenidos dentro de un frame son objetos “hijos” del contenedor
que los soporta. Asi pues, sus restricciones funcionan con base en el comportamiento de
su “padre”.

Y asi va mi diseño:

Vamos que vamos…

Mis imágenes en Figma

En mi laptop windows, el ctrl + g es shitf + g 😃

Crea tu primera figura

• R - rectángulo
• O - para óvalo
• L - para línea

Pienso que aprender Figma me hara mejor frontend developer.

Estoy aprovechando para aprender desarrollar un proyecto.

los simpson costeños

Yo hice una infografía de otro curso que estoy llevando.

Mi aporte con lo aprendido en esta clase c:

Hola, dejo mi aporte, gracias

Miren esta página: https://www.pttrns.com/

Información resumida de esta clase
#EstudiantesDePlatzi

• Algunas de las propiedades que tienen la figura son: Alineación, tamaño, posición, rotación, opacidad, relleno, etc.

• Es importante que aprendamos y utilicemos las herramientas que nos ofrece Figma para la alineación de los objetos

• Cuando quiero escalar un objeto puedo utilizar la tecla “V” para mantener la proporción

• R = Rectángulo, O = Ovalo, L = Lineal

• Todos los objetos en Figma tienen una posición en “X” y “Y”

• Puedo editar el border radius, esto le da cierta curvatura a la figura

• Constrains = Restricciones y nos dice como funciona el objeto respecto al objeto padre que lo contiene

• La propiedad de Fill es donde modificamos el color

• Puedo poner una imagen dentro de una figura

Mi aporte con figma

Mi aporte hasta ahora.

Para seleccionar elementos individuales, por ejemplo, un icono dentro de un grupo, utilizo Ctrl + Click derecho (en Windows). Es súper útil!

• Figuras e imágenes en Figma

  Inserta Figuras

  1. Selecciona la herramienta de forma en la barra de herramientas a la izquierda de la pantalla.
  2. Haz clic en la forma que deseas crear, como un rectángulo, un círculo o un triángulo.
  3. Haz clic y arrastra en el lienzo para crear la forma del tamaño que desees.

  Propiedades de una figura

  1. Utiliza las propiedades de las formas para ajustar según sea necesario, como cambiar el tamaño o la posición de los puntos de control.

  Restricciones Padre -hijo

  Todos los elementos contenidos dentro de un frame son objetos “hijos del contenedor que los soporta

  • Así pues sus restricciones funcionan con base en el comportamiento de su padre

  Insertar imagen en la forma

  1. Copiamos la imagen

  2. Damos clic en en la propiedad de color Stroke y cambiamos la opción de Solid a Imagen

  3. Pegamos dentro de la forma la imagen

  4. cambiamos las propiedades a para trabajar con la imagen

• Comando para importar imagen en figma
  Ctrl/Cmd + Shift + K

• Recuerda mantener “shift” al momento de escalar la imagen para mantener sus proporciones correctas.

Este es mi aporte, estoy disfrutando mucho este curso 😃

Este es mi aporte 😃 Cartagena de indias con foto.png

Cuadrado: R
Línea: L
Círculo: O

Alineación
Tamaño
Posición
Rotación
Radio de bordes* cambia las esquinas (vertices) de figuras con si lo aumentas se pone más redondo
Constrains (Restricciones. Contracción - expansión y como afecta un frame padre a un hijo)
Opacidad
Relleno (Color, Gradiente, Imagen)

Organización de los objetos (Composición)
Alt Option para distancias
Guías inteligentes
Smart selection
Pagging entre elementos
Mostrar / Ocultar
Escalar con V o con K

Restricciones padre-hijo
En Constrains Left and rigth, permanencia de proporciones de objetos hijos.

Aquí esta mi pequeño aporte.

Para hacer la opción de distancias, a mí en MAC también me funcionó con ALT.

–

Vean por favor este recurso ->https://youtu.be/gnscqweM_NU
Está en la parte de abajo del video de la clase, pero igual lo dejo aquí.

Interesante el curso, este fue mi resultado de la clase

atajos de teclado para crear figuras en Figma en Windows

Para seleccionar la herramienta “Formas”, presiona “F”.

Para seleccionar una forma específica, utiliza los siguientes atajos de teclado:

1. Cuadrado: “K”

2. Círculo: “O”

3. Triángulo: “Y”

4. Línea: “L”

• Para crear una figura de forma predeterminada, presiona “Shift” + clic en el lienzo.

• Para dibujar una figura de un tamaño específico, presiona “Control” mientras arrastras el cursor.

• Para crear una forma simétrica, presiona “Shift” mientras arrastras el cursor.

• Para duplicar una forma, selecciónala y presiona “Control” + “D”.

• Para alinear varias formas, selecciónalas y presiona “Control” + “A” para seleccionar todo, luego presiona uno de los siguientes atajos:

• Alinear a la izquierda: “Shift” + “Control” + “Alt” + “L”

• Alinear al centro: “Shift” + “Control” + “Alt” + “C”

• Alinear a la derecha: “Shift” + “Control” + “Alt” + “R”

• Alinear arriba: “Shift” + “Control” + “Alt” + “T”

• Alinear al centro vertical: “Shift” + “Control” + “Alt” + “M”

• Alinear abajo: “Shift” + “Control” + “Alt” + “B”

Que buen profesor !!!

Crear figura

• R para rectángulo
• O para ovalo
• L para línea

Figura: propiedades

• Alineación
• tamaño
• Posición
• Rotación
• Radio de bordes
• Constraints
• Opacidad
• Relleno (color, gradiente, imagen)

Organizando Objetos

• Alt/ Option para distancia
• Guas inteligentes
• Smart Selection
• Padding entre elementos
• Mostrar / Ocultar
• Escalar en V o con k

Relación Padre hijo

• Todos los elementos contenidos dentro de un frame son objetos hijos del contenedor que los soporta

Mi trabajo.![](

Me gusta mucho el curso hasta ahora

miren chicos, ya se usar figma :V

Todo está yendo de maravilla:'D

Mi aporte 😄

No pares de aprender!

![](

Comparto como todos, mi primer project en Figma. No busqué tanto cuidar el diseño, sólo mezclar un poco el contenido de todo lo que se viene realizando en el curso. Esoero que sea del agrado

Se está poniendo bueno este curso!!

Excelente clase

Shitf + G —> windows 11