Figma desde cero

FIGMA desde cero

Si lo puedes imaginar, lo puedes programar Sesión 1

agenda sesión 1

Trazado y relleno.

Saludo y bienvenida.

Socializando en Paddlet.

Activándonos.

Normas de convivencia.

Kahoot.

Asistencia.

¿Qué es Figma?

¿Qué me llevo?.

10

Formas en Figma.

Tema 1

Saludo & bienvenida

SALUDO Y BIENVENIDA

Hablemos de la industria de los videojuegos.

+ INFO

Tema 2

ACTIVÁNDONOS

activador

Storytelling

Globos

Tema 3

nORMAS DE CONVIVENCIA

NORMAS DE CONVIVENCIA

JHEYSON eDUARDO gALVIS VALENCIA 3167417556

Tema 4

¿qué es figma?

¿Sabes qué es figma?

Escribe un subtítulo genial aquí

Nothing great is made alone

Nada grandioso ha sido creado solo.

Figma permite

+ INFO

Trabajo en tiempo real en equipo.

+ INFO

Tema 5

Formas en figma

Paso 01

Ingresamos a figma.com

Una vez dentro de figma.com hacemos el proceso de registro en caso de ser necesario y posteriormente hacemos clic en el botón New Design File.

Paso 02

Para agregar un rectángulo haremos clic en el ícono de formas y luego en la primera opción Rectangle.

Paso 03

Ahora, trazas el rectángulo a tu gusto como se ve en la imágen.

Paso 04

Antes

Puedes cambiar el color del rectángulo en la parte derecha como se ve en la imagen.

Después

Paso 05

Si mantienes presionada la tecla ALT mientras generas una figura, el diseño que hagas partirá del centro, de lo contrario partirá de la esquina superior izquierda.

Paso 06

Si utilizas shift sostenido mientras generas tu figura geométrica, se va a crear una forma perfecta, en este caso te sería imposible hacer un rectángulo más no un cuadrado.

Paso 07

Si ahora generas un elipse lo podrías insertar de la forma que desees pero si por el contrario pulsas shift mientras generas ese elipse se formaría un círculo perfecto.

Paso 08

Si quieres dibujar una forma perfecta desde el centro puedes utilizar shift y alt al mismo tiempo.

Paso 09

Eliminaremos todas las figuras previas creadas haciendo clic sobre ellas y pulsando suprimir, posteriormente, insertaremos un círculo, un cuadrado y un polígono de forma perfecta pulsando las teclas shift y alt al mismo tiempo.

Paso 10

Podríamos aumentar los lados de nuestro polígono a 4, 5 o 6.

Paso 11

Como puedes observar, la figura geométrica posee dos círculos, el primero de ellos es para redondear las esquinas.

Paso 12

Inclusive, podrías redondear las esquinas del rectángulo para que se vea un poco más estético.

Paso 13

Como notarás, el polígono tiene otra bolita, que si la arrastras puedes reducir o aumentar los lados.

Paso 14

Vamos ahora a insertar una estrella con shift sostenido para que no vaya a quedar deforme. Notarás que esta estrella tiene tres puntitos. El primer punto superior al centro es para reducir los bordes de la estrella y el borde a la esquina derecha es para la cantidad de puntas de la estrella.

Paso 15

El puntito interno es para el radio de la estrella, nos permitirá que ésta quede más fina o más rellenita.

Paso 16

En la esquina superior derecha podemos mover las figuras geométricas en X o en Y a veces esto sirve para mover exactamente a una cantidad muy específica de pixeles. En este caso, moveré el cuadrado a una posición de 100 en X.

Paso 17

La W es el prefijo de width que en españo el ancho y H es el prefijo de high que en español es alto. Voy a dar un ancho a mi figura de 200. Como puedes ver, al poner 200 en W automáticamente H también recibe esos 200, debo entonces hacer clic en la cadenita para desmarcar las restricciones proporcionadas.

Paso 18

Es importante saber que estos campos también soportan operaciones. Por ejemplo pondré en el ancho 200*1.5

También, puedo rotar la figura.

Paso 19

También tenemos justo al lado de la rotación las esquinas redondeadas. Entonces, vamos a darle 0 de rotación y 14 en esquinas redondeadas.

Paso 20

Si hacemos clic en el ícono que acompaña las esquinas redondeadas, podríamos personalizar cada esquina y de esa manera dar un redondeado específico a cada una de las esquinas.

Paso 21

Vamos a observar el elipse que dibujamos previamente, y notaremos que el elipse tiene un puntito.

Haremos clic en ese puntito y eso nos permitirá crear un arco.

Paso 22

El puntito que acompaña a la salida de la boca (que tiene dentro un puntito) nos permitirá rotar y el otro puntito que no tiene nada por dentro es para agrandar o disminuir el arco.

Paso 23

El puntito interno nos permitirá modificar el radio

Paso 24

Ahora con CTRL + D vamos a duplicar este arco haciendo clic sobre el puntito que tiene un puntito en el centro para rotarlo.

Paso 25

Puedes seleccionar todos los elementos que conforman el elipse y hacer clic derecho Agrupar o simplemente CTRL + G para que todos los elementos queden agrupados.

Paso 26

Ahora, puedes seleccionar la figura que desees exportar y dar clic en el botón Export Group.

Dato de interés

Cuando desees escalar una figura o elemento en Figma debes dar clic sobre el elemento y presionar la tecla K o hacer clic en la parte superior opción escalar , lo anterior para que el elemento no pierda su proporción.

Paso 27

Estando seleccionada la forma, vamos a hacer clic en el menos, para quitar el color veremos como la figura desaparecerá, pero, si trazamos con el mouse, notaremos que la figura no se ha ido, simplemente le quitamos el color:

Dato de interés 2

Cada forma que dibujamos en Figma tiene relleno y trazado. En el panel derecho tendremos las opciones Fill y stroke siendo Fill el relleno

Tema 06

Trazado y relleno

Paso 28

Estando seleccionada la forma, haremos clic en el ícono (+) de Fill y automáticamente la forma tomará un color blanco. Podríamos pintar de cualquier color la forma, yo le daré ésta tonalidad.

Paso 28

Estando seleccionada la forma, haremos clic en el ícono (+) de Fill y automáticamente la forma tomará un color blanco. Podríamos pintar de cualquier color la forma, yo le daré ésta tonalidad.

Paso 29

Se recomienda trabajar con el modo de color HSL porque H representa todos los colores posibles. El número 0 representa la H, la s en mi caso sería el 67 y representa la saturación (intensidad del color), la L en mi caso sería el 39 implica Luz

Paso 30

Vamos a seleccionar el tipo de relleno Linear el cual es un degradado de línea

Paso 31

Puedo seleccionar el segundo cuadrito y aplicar una tonalidad al degradado de abajo.

Paso 32

Puedo hacer clic para generar un tercer cuadrito y otro color al medio.

Paso 33

Puedo girar y mover el degradado a la posición que desee.

Paso 34

También tengo la posición Radial que me permite generar este tipo de efectos que ves en el ejemplo. La barra que dá afuera representa la extensión del círulo y la de adentro representa el centro. La otra representa el radio.

Paso 35

También tengo degradado angular, qué es lo mismo pero con un tipo de degradado de forma angular.

Paso 36

Degradado en diamante.

Paso 37

Degradado en imágen, que me permite importar una imágen desde mi pc:

Paso 38

En Figma podemos tener varios rellenos, así que haremos clic en (+) para traer un nuevo relleno.

Paso 39

Podemos aplicar entonces el nuevo relleno explorando en el Fill como en mi caso apliqué el verde.

Paso 40

Le podríamos cambiar la transparencia.

Paso 41

También podríamos aplicar un efecto linear:

Paso 42

Podemos entonces poner en diagonal el efecto Linear como se vé en pantalla y jugar con los colores.

Paso 43

Si queremos eliminar hacemos clic en el (-) y si quieremos ocultar o desocultar en el ojito. La ventaja es que el ojito no elimina capas, sólo las oculta.

Paso 44

Para hablar del Stroke seleccionaremos la figura de la estrella y aplicaremos un color al gusto. Posteriormente, el borde le pondremos 16 como se vé en pantalla.

Paso 45

Los trazados pueden tener tres formas: Inside: Dentro de la forma. Outside: Fuera de la forma. Center: Justo en el centro.

Paso 46

En estos tres puntitos hay más opciones para tus líneas. Tenemos Solid que es lo común o Dash que son segmentos.

Paso 47

Podríamos poner 30 de cada segmento y 6 de cada hueco (o espacio).

Paso 48

Podríamos también cambiar la forma en circular.

Paso 49

Dibujaremos una línea haciendo clic en formas, arrow

Paso 50

Con las propiedades de Stroke le pondremos un borde de 20 y el color será amarillo.

Paso 51

Podemos configurar que el inicio de línea sea una flecha triángula y el final una flecha lineal.

Paso 52

Para separar el relleno del trazado hacemos clic derecho sobre la forma y seleccionamos la opción Outline stroke

Paso 53

Eso nos permite convertir al trazado en una nueva forma, puedes sacar el trazado aparte.

Paso 54

Al trazado le puedes dar otro color.

Paso 55

El trazado podría tener su propio stroke.

Socializando

en paddlet

Asistencia

¿qué me llevo?

FIGMA desde cero Sesión II

"El fracaso es algo que debemos aceptar; si no cometes los suficentes errores, no estás tomando riesgos". Debbie Millman

agenda sesión 2

Organización de documentos.

Saludo y bienvenida.

Socializando en Padlet.

Activándonos.

Operaciones con formas.

Kahoot.

Asistencia.

Atajos de teclado.

¿Qué me llevo?.

Frames (o artboard-mesas de trabajo) y grids.

10

Tema 1

Saludo & bienvenida

SALUDO Y BIENVENIDA

"Es en la intersección de conocimientos donde podemos aportar verdadero valor a la empresa"

+ INFO

Tema 2

ACTIVÁNDONOS

Activándonos

¿Puede una red neuronal reconocer tus dibujos?

+ INFO

Tema 3

Operaciones con formas

Paso 01

Vamos a crear un nuevo documento en figma. Ya sabemos que para crear una forma pulsamos la R y trazamos un cuadrado o simplemente buscamos dentro de las figuras y trazamos el cuadrado. Nota: Recuerda que para duplicar una forma es CTL + D.

Paso 02

Haremos clic en stroke para que la forma tome un borde color negro. Otra forma de copiar es con ALT sostenido sobre la forma y arrastramos.

Paso 03

Teniendo una de las dos formas seleccionadas, vamos a notar que en la parte superior se habilitarán unos botones:

De izquierda a derecha sus nombres son: editar objeto, crear componente, usar una máscara.

Paso 04

Pero si selecciono dos objetos a la vez, vamos a notar que aparecerá una opción llamada Boolean groups (operaciones con grupos).

Paso 05

Vamos a cambiar el color del segundo cuadrado:

Luego pondremos una forma sobre la otra así:

Paso 06

Seleccionaremos con el mouse ambas figuras y escogeremos la primera opción llamada union selection:

Esto producirá que se cree una sóla forma combinándolas a ambas:

Paso 07

Si ahora vamos al lado izquierda en el panel de capas veremos la unión y podemos desplegar (salen los dos rectángulos).

Si por ejemplo hacemos clic en Rectangle 3 podríamos cambiar la posición del rectángulo (es una libertad que en otros programas de diseño no tenemos). Incluso podríamos hacer doble clic para entrar a ese elemento y cambiarlo de posición.

Paso 08

Con clic sostenido tomaremos el Rectangle 3 y el Rectangle 2 y los pondremos sobre Union para sacarlos de ahí, luego eliminaremos Union:

Paso 09

Ahora seleccionamos los dos elementos y elegiremos la opción substracción:

Paso 10

Como puedes ver el que está encima es el que manda, en este caso la figura que está encima es la que le cortó un pedazo a la que estaba detrás:

Paso 11

Vamos a dar CTL + Z para regresar un paso atrás:

Paso 12

A la primera figura le haremos clic derecho y escogeremos la opción Bring to front o el atajo del teclado es }

Paso 13

Haremos lo mismo, seleccionados los dos objetos escogeremos la opción Substract

Paso 14

Otra opción que tenemos es intersección que es justamente la parte en que los dos coinciden. Entonces primero haremos CTL + Z para poder visualizar los dos objetos y luego seleccionamos la opción Intersect selection:

Paso 15

La última opción que tenemos es exclusión que es lo opuesto a la intersección, es decir, todo menos la parte en que los dos coinciden. Entonces primero haremos CTL + Z para poder visualizar los dos objetos y luego seleccionamos la opción exclusión:

Paso 16

Vamos a dibujar un corazón. Para ello dibujaremos un rectángulo o un cuadrado perfecto: con alt y shift sostenido. Le pondremos que sea 400 x 400 así:

Paso 17

Dibujaremos también dos círulos que sean 400 x 400 así:

Paso 18

Vas a poner el círculo sobre el rectángulo y notarás que figma tiene unas guías invisibles que te orientan e indicas que justo estás en el centro:

Paso 19

Vamos a hacer lo mismo con el segundo círculo así:

Paso 20

Seleccionamos todas las figuras y en la parte superior escogemos la opción union:

Paso 21

Ahora vamos a girar la figura como se ve en pantalla:

Paso 22

Si quisieras que la figura rote con ciertos ángulos podrías presionar shift a medida que rotas la misma:

Paso 23

Directamente también podrías hacer girar la figura a 45°:

Paso 24

Dibujaremos un rectángulo al cual le daremos esquinas redondeadas. Puedes presionar ALT sostenido para dibujar el rectángulo más no shift porque eso generaría un cuadrado perfecto:

Paso 25

Ahora, dibujaremos un polígono (triángulo) justo al lado del rectángulo:

Paso 26

Pondremos el triángulo sobre el rectángulo así:

Paso 27

Ahora, seleccionamos ambas figuras y escogemos en la parte superior la opción de union así:

Paso 28

Aplicamos color verde o cualquier otro color que te guste:

Paso 29

Vamos a dibujar una luna menguante. Para ello insertaremos un círculo perfecto (con shift y alt) luego le haremos una copia con alt o CTL + D y finalmente pintaremos de color amarillo así: de color amarillo y lo dupublicaremos así:

Paso 30

Seleccionaremos las dos figuras y escogeremos la opción de sustracción así:

Paso 31

Si deseas puedes girar un poco la figura de la luna:

Paso 32

Vamos a seleccionar la figura que está por detrás:

Paso 33

Dentro del panel de Effects haremos clic en el + para desplegar las opciones:

Paso 34

Desplegaremos y escogeremos la opción Layer blur:

Paso 35

Haremos clic en el solesito y le pondremos 20.

Paso 36

Si deseas puedes cambiar el fondo del lienzo, esto se hace haciendo clic fuera de cualquier figura y en la parte superior derecha aparecerá la opción background, yo escogí negro. Ahora si, ponemos la figura sobre la que tiene el efecto para dar una apariencia así:

Paso 37

Si deseas puedes cambiar el fondo del lienzo, esto se hace haciendo clic fuera de cualquier figura y en la parte superior derecha aparecerá la opción background, yo escogí negro. Ahora si, ponemos la figura sobre la que tiene el efecto para dar una apariencia así:

Paso 38

Cambiaré el color de ambas lunas a blanco para que resalte mejor sobre el lienzo oscuro y ahora si, sobre la figura escogeré la opción Group selection para agrupar ambas formas:

Paso 39

Ya estando agrupado así se vería nuestro resultado final:

Paso 40

Dibujaremos un rectángulo con ALT sostenido y le daremos esquinas completamente redondeadas:

Paso 41

Insertaremos un par de elipces, no tienen que ser elipces perfectos:

Paso 42

Seleccionamos todas las figuras y escogemos la primera opción Union selection:

Paso 43

Pintaremos la nube de color azul:

Paso 44

Duplicaremos la nube y escogeremos la opción Flatters selection

Paso 45

Notaremos como a la imágen que le aplicamos Flatters selection le aparecerán unos nodos que hacen parte del diseño vectorial

Paso 46

Vamos a dibujar una estrella y la duplicaremos:

Paso 47

Vamos a dibujar una estrella y la duplicaremos:

Paso 48

Haremos clic derecho y escogeremos la opción Flatters podríamos entonces comparar las opciones entre una figura con y sin Flatters.

Tema 4

Atajos del teclado

Paso 49

Observa como al lado de cada herramienta aparece al lado su atajo como Mover V Escalar K

Paso 50

Y así, cada una de las herramientas tiene a su pararelo el atajo del teclado correspondiente como Rectángulo R etc...

Paso 51

Dentro de las opciones de Main Menú observaremos Quick actions y haremos clic ahí:

Paso 52

Puedes buscar cualquier herramienta y ésta te arrojará el nombre y su atajo del teclado:

Paso 53

Podríamos ir a archivo, edición y copiar una imágen como png

Paso 54

Vamos al menú y dentro de Help and account escogeremos la opción Keyboard shortucts:

Paso 55

Dentro del Cursos podríamos escoger la herramienta Flip horizontal shift H esto generar una apariencia de espejo:

Paso 56

shift V sería una posición espejo en vertical:

Paso 57

Dentro del Cursos podríamos escoger la herramienta Flip horizontal shift H esto generar una apariencia de espejo:

Paso 58

Si queremos editar la opacidad podríamos presionar números como 1, 5, 0 teniendo seleccionada la figura:

Tema 5

Frames (o artboard-mesas de trabajo) y grids.

Paso 59

Para generar un frame (contenedor) vamos a pulsar F en la parte derecha escogeremos dentro de la lista de opciones iphone 13 Pro Max:

Paso 60

Notaremos que el frame tiene su nombre en la parte superior y en la parte izquierda un frame estará acompañado por el símbolo de #

Paso 61

Podríamos cambiar el nombre del Frame haciendo clic sobre su nombre, yo borraré -1 y lo dejaré así:

Paso 62

Insertaremos un rectángulo que simbolizará un banner, su altura será de 43 y su color en exadecimal de FF7777

Paso 63

Para hacer zoom al documento podríamos hacer CTL sostenido y la bolita del mouse:

Paso 64

Para hacer zoom al documento podríamos hacer CTL sostenido y la bolita del mouse:

Paso 65

Insertaremos tres rectángulos para simular un menú hamburguesa, sus dimensiones serán 39 de ancho x 7.5 de alto así:

Paso 66

Con shift sostenido seleccionaremos los tres rectángulos:

Paso 67

En la parte superior derecha escogeremos más opciones, distribuir verticalmente teniendo seleccionados los tres cuadritos del menú hamburguesa:

Paso 68

Cambiaremos a blanco el color del menú hamburguesa:

Paso 69

Es importante saber que un frame puede existir dentro de otro frame:

Paso 70

Al seleccionar nuestro Frame iPhone 13 Pro Max notaremos en sus opciones que tenemos habilitado Clip content. Esto significa que todo lo que salga del frame va a ser invisible:

Paso 71

Vamos a simular un carrusel y es que este efecto del clip content nos permite exactamente esto, dar la impresión de que un elemento se pone invisible:

Paso 72

Presionaremos nuevamente F y dentro de Frames elegiremos la opción Twitter post

Paso 73

La aplicaremos cualquier color:

Paso 74

Haremos clic en el Frame Iphone 13 Pro Max y elegiremos la opción de prototipo:

Paso 75

Haremos clic en el + para agregar una interacción:

Paso 76

Observaremos que en la figura aparecerá una bolita:

Paso 77

Indicaremos con la flechita que al dar clic en el cuadrito seríamos redirigidos al banner de Twitter:

Paso 78

Hagamos clic en reproducir de la parte superior derecha:

Paso 79

Pulsaremos la F y trazaremos un Frame que contenga 851 de ancho y 513 de alto:

Paso 80

En la parte derecha tenemos la sección Layout grid ésto nos permitirá agregar cuadriculas, columnas o filas al frame:

Paso 81

Al dar clic en el + nos dirá que hemos creado un grid de 10px

Haremos clic en el ícono y le pondremos 20, 16 u 8 (recuerda que en diseño IU se trabaja de 8 en 8.

Paso 82

También podríamos cambiar el color de la línea a azul:

Paso 83

Con el + podríamos crear otra cuadrícula y pedirle que sea roja y de tamaño 48:

Paso 84

Haciendo clic en los ojitos podríamos ocultar las grillas reciéntes y luego clic en + para agregar por columnas:

Stretch significa que el ancho no lo voy a determinar yo:

Paso 85

Explorearemos las opciones center, left y right para notar los efectos y le pondremos 60 así:

Gutter significa separación:

Paso 86

Cuando escogemos la opción Sketch Figma automáticamente hace el cálculo por nosotros. Aplicaremos las dimensiones que se ven en pantalla:

Paso 87

Explorearemos las opciones center, left y right para notar los efectos y le pondremos 60 así:

Paso 88

Podríamos dibujar entonces un rectángulo que mida tres columnas en la primera fila y duplicarlo así:Luego uno que mida dos columnas así:

Paso 89

Podríamos dibujar entonces un rectángulo que mida tres columnas en la primera fila y duplicarlo así:Luego uno que mida dos columnas así:

Paso 90

Vamos a duplicar el header en el footer y en el footer le pondremos otro color así:

Paso 91

En el Layout grid le pondremos estas propiedades:

Paso 92

En la esquina inferior izquierda voy a generar un frame porque deseo poner el ícono de una casita, entonces trazaré un rectángulo:

Paso 93

La medida de mi rectángulo es 27 de ancho y 20 de alto. La medida de mi triángulo es 44 de ancho y 21 de alto. Posteriormente hacemos clic en centrar:

Paso 94

Finalmente hacemos clic en Union selection:

Paso 95

Hacemos clic en Stroke y le ocultamos el Fill:

El Stroke será blanco y de dos:

Paso 96

Como el Stroke está dentro del frame lo vamos a centrar respecto al frame:

Paso 97

Podríamos duplicar así:

Tema 6

Organización de documentos

Paso 98

En Figma online todo queda guardado automáticamente, los drafts son archivos privados que sólamente tu puedes ver:

Paso 99

Cuando borras algún archivo puedes recurrir a Deleted:

Paso 100

Si hago clic derecho sobre algún archivo puedo abrirlo, borrarlo, editarlo, etc:

Paso 101

Por ejemplo en una campaña podrías crear una página que sea la Landing Page (osea los diseños para la web). Otra página que sea los diseños para redes sociales, etc

Vamos a entrar al último archivo trabajado. Es importante saber que los archivos internamente se clasifican por páginas:

Paso 102

Dentro del zoom vamos a hacer clic en en pixel preview y habilitaremos por un momento las opciones 1 y 2 luego lo desabilitaremos nuevamente:

Tema 7

Socializando en padlet

Paso 103

Comparte en figma una, toda o varias de las figuras y/o frames que hayas realizado durante la sesión de hoy:

Asistencia

¿qué me llevo?

FIGMA desde cero Sesión III

"El fracaso es algo que debemos aceptar; si no cometes los suficentes errores, no estás tomando riesgos". Debbie Millman

agenda sesión III

Socializando en Padlet.

Saludo y bienvenida.

Kahoot.

Activándonos.

Moverse por el lienzo.

Asistencia.

Editar propiedades de objetos.

¿Qué me llevo?.

Textos en Figma.

Tema 1

Saludo & bienvenida

SALUDO Y BIENVENIDA

¿Qué hacen los expertos en usabilidad?

+ INFO

Tema 2

ACTIVÁNDONOS

SALUDO Y BIENVENIDA

Semi-conductor

Tema 3

Moverse por el lienzo

Paso 01

Dibujaremos un rectángulo y luego nos moveremos lejos y dibujaremos otro rectángulo (para moverte en lienzo es con la barra espaceadora). El atajo del teclado para activar la manito es la tecla H.

Paso 02

La manera más fácil de acercarte al lienzo es con CTL y ruedita del mouse hacia arriba o hacia abajo.

Paso 03

Para seleccionar objetos puedes pulsar V.

Paso 04

En la parte superior derecha tenemos algunas propiedades del zoom:

Paso 05

Para mostrar las reglas pulsaremos shift + R.Las reglas sirven para sacar líneas guías.

Paso 06

Dibujaremos dos frames y soltaremos sobre el área vacía nuestra línea guía así:

Paso 07

Es importante recordar que Figma es una herramienta de diseño vectorial (es decir que trabaja por vectores más no por píxeles). Dibujaremos un círculo y junto a él insertaremos una imágen:

Paso 08

Si bien el círculo es un vector, nos muestra Figma que el círculo tiene un ancho y alto en píxeles.

Paso 09

En la parte superior derecha tenemos opciones como pixel preview (ver el gráfico en píxeles). inclusive esportarlo.

Paso 10

Pixel grid me permite ver la cuadrícula de píxeles cuando por ejemplo hago zoom a la forma:

Paso 11

La opción snap to pixel grid me permite pegar a los pixels la forma:

Paso 12

Si ahora desmarcamos la opción snap to pixel grid no estaremos limitados a la cuadrícula de píxeles para mover nuestra figura.

Paso 13

También tenemos la opción Layout grid para ocultar o desocultar los grids.

Paso 14

Vamos a generar tres frames y cada una la pintaremos de un color diferente. Para movernos entre frames vamos a pulsar la tecla N y para retroceder entre Frames shift + N. (pruébalo en modo presentación).

Tema 4

editar propiedades de objetos

Paso 15

Generaremos dos frames, uno lo pintaremos de rojo y el otro de verde:

Paso 16

Dentro del primer Frame pondremos una estrella:

Con stroke le daremos un borde de dos píxeles a la forma de la estrella:

Paso 17

Es importante saber que cuando un elemento está dentro de un Frame, las posiciones en X y en Y se calculan respecto a ese Frame. El alto y el ancho de la estrella será ahora de 149 x 149 y veremos que al poner la estrella en la parte superior izquierda su posición en x y en y será de 0 y 0.

Paso 18

Si ahora tomamos la estrella y la sacamos del frame, notaremos que su posición en X y en Y se calculará frente a todo el lienzo:

Paso 19

Si hacemos ctl + c y luego ctl + v desde la estrella al siguiente frame, notaremos que la estrella se copiará en la misma posición y con las mismas coordenadas en X y Y.

Paso 20

si hago CTL + C y luego CTL + V en la estrellita, ella se va a copiar exactamente encima:

Paso 21

Descarguemos el logo de Figma desde internet (png) a Figma online:

Luego arrastramos manualmente ese logo a Figma online:

Paso 22

Con shift y con alt sostenido vamos a generar un cuadrado perfecto al lado de la figura de Figma:

Paso 23

Haremos CTL + C sobre la figura de Figma y luego sobre el cuadrado haremos anti clic y seleccionamos la opción paste to replace así:

Paso 24

Ajustaremos el tamaño del logo de Figma a 149 x 149 ó al mismo tamaño que tengas la estrella:

Paso 25

Haré CTL + C sobre la figura del logo de Figma.

Luego con shift sostenido seleccionaré las dos estrellas sin que esté seleccionado el logo de figma:

Paso 26

Hacemos clic derecho y seleccionamos la opción paste to replace:

Paso 27

Dibujaremos un cuadrado, le daremos un relleno rojo y un contorno color amarillo con un stroke de 3. Luego, dibujaremos una estrellita al lado pero sin relleno ni contorno:

Paso 28

Haremos anti clic sobre el cuadrado que tiene el relleno rojo y el contorno amarillo, copy paste as y seleccionaremos la opción copy propieties o el atajo del teclado CTL + ALT + C

Paso 29

Vamos a hacer clic derecho sobre la estrella y seleccionamos la opción paste propieties:

Paso 30

Es entonces cómo de esa manera te puedes llevar las propiedades:

Paso 31

Pulsaremos el atajo del teclado T para redactar un texto que diga: Bienvenidos al Servicio Nacional de Aprendizaje SENA

Paso 32

Aumentaremos el tamaño de ese texto a 40 px.

Le aplicaremos Bold.

Y que sea de color rojo:

Paso 33

Ahora vamos a escribir un texto que diga: Yo soy otro texto:

La tipografía será Jolly Lodger, le subiremos el tamaño y le pondremos un color amarillo opaco:

Paso 34

Copiaremos las propiedades del primer texto (el que está en rojo)

Paso 35

Le pegaremos esas propiedades al segundo texto:

Paso 36

Así se verían ambos textos:

Paso 37

Haremos clic sobre el cuadrado y luego nos dirijimos al menú de Figma (parte superior izquierda) y seleccionamos las opciones Object, vajamos a la última opción Swap fill and stroke esto nos permitirá invertir el relleno y el stroke.

Paso 38

El atajo del teclado esshift + X.

Paso 39

Buscaremos en internet ésta imágen de finish, la descargamos y la incorporamos a Figma.

Paso 40

Estando seleccionada la imágen vamos a seleccionar shift + H para aplicar el efecto reflejo. shift + V en vertical:

Paso 41

Recuerda que cuando ser transparente es que deja pasar la luz y opaco es que no la deja pasar.Dibujaremos una estrella al lado de la imágen y veremos que en layer (opacidad) tiene 100, le vajaremos a 50

Paso 42

Ahora que la estrella está con un 50% de opacidad, la moveremos sobre el texto FINISH:Esa opacidad se puede cambiar con atajos del teclado, 1 es 10% y así sucesivamente.

Paso 43

Podemos ir al menú principal de Figma y en la sección de Preferences elegir la opción Use number keys for opacity sin embargo, te recomiendo desactivar ésta opción ya que los números están configurados para el zoom, por ejemplo 1 es zoom total sobre una forma desde lo lejos.

Paso 44

Volveremos a poner la opacidad de la forma en 100%.

Paso 45

Lo que haremos será pintarla de verde:

Paso 46

Bajaremos a un 60% la opacidad pero del color:

Paso 47

Le daremos un stroke de 10 píxeles y un rojo del 50% también en stroke

Paso 48

Ahora subiremos el verde a un 100% nuevamente.Como podemos notar, el borde (rojo) está inside es decir, por dentro de la forma, le haremos clic y lo cambiaremos a fuera outside:

Paso 49

En conclusión, se puede aplicar opacidad a toda la capa o a todo el relleno, o sólamente al relleno o sólamente al trazado:

Tema 5

textos en figma

Paso 50

Tenemos dos formas de insertar un texto en Figma, la primera es pulsar la tecla T en el teclado y luego escribidmos Bienvenidos al curso de Figma:

Paso 51

Otra forma para generar un texto es pulsar la herramienta T del panel de herramientas y trazar con el mouse el rectángulo que permitirá generar un texto:

Paso 52

Escribimos dentro de la forma:

Paso 53

Observa que si ahora quieres escribir en la primer línea "en el SENA" el texto seguirá de largo:

Paso 54

Podríamos hacer enter para forzar un salto de línea pero ésto no es recomendable, lo que se sugiere siempre es generar cuadros de texto como se ve en el segundo párrafo:

Paso 55

Éste comportamiento es conocido como Rezise es decir "cómo se comporta el texto y la caja que lo envuelve".Cuando un texto está seleccionado se habilitarán sus propiedades:

Paso 56

La primera propiedad que analizaremos es Auto width. Vamos a poner el texto de la cajita de ésta manera:

Paso 57

Cuando presionemos en Auto width notaremos que el texto se extenderá así:

Ahora vamos a acomodar el primer texto así: Luego pulsaremos el botón Auto heigh para que el alto se ajuste automáticamente:

Paso 58

Generemos una caja de texto pequeñita y empecemos a escribir. Como vemos, el texto se ha salido de la caja de texto porque es muy pequeña. Entonces nuevamente vamos al botón de Auto Height

Paso 59

Un texto también puede tener relleno (fill) y contorno (stroke) para éste caso en relleno le pondremos un verde:

Paso 60

Le daré un contorno de color blanco a grosor de 6:

Paso 61

Haremos clic derecho sobre el texto y lo convertiremos en vector seleccionando la opción Flatten así:

Paso 62

Si haces doble clic y te acercas mucho al texto puedes visulizar los vectores:

Paso 63

Por ejemplo voy a jugar con los vectores de la letra L:

Paso 64

Así se vería mi texto:

Paso 65

Escribiremos un nuevo texto que diga "Bienvenidos al SENA". Notaremos que en el panel derecho se habilitarán las propiedades de la herramienta texto:

Paso 66

Cambiaré la tipografía a Oswald.

Paso 67

Escribiremos el texto que aparece a continuación y el interlineado lo pondremos a 40 como se vé a continuación, luego se recomienda ampliar el interlineado a 150% por buenas prácticas.

Paso 68

Haremos enter entre "Bienvenidos al mejor curso de" y "Figma en español con el SENA". También vamos a aplicar letter spacing para ampliar el espacio entre letras.

Paso 69

Aplicaremos la herramienta de párrafo para hacer espacio entre párrafos.

Paso 70

Escribiremos nuevamente "Bienvenidos al SENA" y notaremos los botones para alinear.

Ampliaremos la caja que envuelve el texto y jugaremos con los botones para alinear:

Paso 71

Haremos clic en los puntitos y elegiremos trincate, ésta herramienta nos parte el texto cuando no entra (al reducirlo de los laterales).

Paso 72

Tenemos las opciones uppercast para mayúsculas sostenidas. También el Lowercaste para todo en minúsculas:

Paso 73

No todas las fuentes son variables, pero si cambiamos la tipografía a Roboto Flex y damos clic en los tres puntitos podremos notar que es posible modificar detalles a través de un nuevo botonsito llamado Variable:

Tema 6

SOCIALIZANDO EN PADLET

padlet

Comparte en el Padlet evidencia de las actividades realizadas el día de hoy:

Tema 7

kahoot

Asistencia

¿qué me llevo?

FIGMA desde cero Sesión IV

"El fracaso es algo que debemos aceptar; si no cometes los suficentes errores, no estás tomando riesgos". Debbie Millman

agenda sesión IV

Imágenes.

Saludo y bienvenida.

Kahoot.

Activándonos.

Asistencia.

Fuentes en Figma.

Agrupación y aplicación de elementos.

¿Qué me llevo?.

Alineación y distribución.

Tema 1

Saludo & bienvenida

SALUDO Y BIENVENIDA

Con Figma tu cliente podría tener una persepción exacta del diseño y la programación web o móvil del producto.

+ INFO

Tema 2

ACTIVÁNDONOS

ACTIVÁNDONOS. CARAMELO

Tema 3

FUENTES EN FIGMA

HablemosDE fuentes

EMPEZAR

1/3 Pregunta número 1

01

Atajo del teclado para generar un texto

PREGÚNTA NÚMERO 2

02

¿CUÁL ES LA DIFERENEICA ENTRE FUENTE Y TEXTO

Np hay diferencia

Las fuentes son los tipos de letra y el texto es la herramienta para escribir textos.

pregunta número 3.

03

Los diferentes tipos de letra se llaman:

fuentes

CSS3

pregunta número 4

04

La ciencia que estudia las diferentes formas de diseñar el texto se llama: ​

Tipografía

Joomla

Pregunta número 5

05

Es un error común llamarles tipografías a las

Lenguas de señas

Fuentes

pregunta número 6

06

Podríamos afirmar que las familias tipográficas son

FUENTES SIMILARES

MOUSES

PREGUNTA NÚMERO 07

07

Si estás en Windows, hay un set de fuentes que ya vienen con el sistema operativo (S.O). Además de todas las fuentes del S.O. Figma trae incorporadas todas las fuentes de Google Fonts

Falso

Verdadero

PREGUNTA NÚMERO 08

08

¿Se pueden importar fuentes que no estén en Google Fontos hacia Figma?

Verdadero

Falso como tu ex

FELICIDADES LA INTRODUCCIÓN DE LA SESIÓN DE HOY HA SIDO COMPLETADA

¡MUY BIEN!

Lorem ipsum dolor sit amet

FIGMA

Paso 01

Haremos clic en el menú, vamos a plugins y buscaremos hacer clic en la opción Find more plugins...

Paso 02

En el buscador escribiremos Missing Fonts Finder:

Paso 03

Haremos clic en el botón Better Font Picker:

Paso 04

Esto nos va a permitir previsualizar el tipo de fuente a escoger, ya que Figma por defecto no permite previsualización:

ENTREGABLE 01

Propone una imágen donde enseñes a través de un ejemplo sencillo el manejo o uso de una técnica, comparte evidencia en el padlet, aquí un ejemplO:

Tema 4

AGRUPACIÓN Y APILACIÓN DE ELEMENTOS

Paso 06

Dibujaremos un cuadrado, una estrella y un círculo en Figma.Le pondremos los colores amarillo, azul y rojo respectivamente. Luego seleccionamos todos los elementos y hacemos clic derecho agrupar así:

Paso 07

De ésta manera ya puedes trabajar con todos como si fueran un único elemento:

Paso 08

Si deseas editar algún color, en la parte derecha puedes directamente seleccionar y cambiar:

Paso 09

Dibujaé un círculo y presionaré la tecla i para con el cuenta gotas elegir un color con qué rellenar la nueva figura:

Paso 10

Para que la nueva figura haga parte del grupo, puedes arrastrar desde el panel de capas así:

DESPUÉS

Antes

Paso 11

Si ahora cambio el color de la estrella, observa cómo a su vez el color del elipse también se va a modificar:

Paso 12

Si deseas seleccionar una figura dentro de un grupo, pulsas control sostenido y haces clic sobre dicha figura:

Paso 13

Si quieres cambiar el orden de una figura, puedes hacerlo en la parte izquierda y cambiarla de posición:

Antes

después

Paso 14

También, puedes seleccionar el objeto (con control sostenido y clic del mouse) y en el menú de opciones seleccionar objeto y moverlo al frente, atrás etc así:

Tema 5

ALINEACIÓN Y DISTRIBUCIÓN

Paso 15

Dibujaremos seis cuadros de diferentes colores así:

Paso 17

Si queremos dejar igual de espacio entre un cuadro y el otro, observa como Figma a través de sus guías inteligentes te va a mostrar:

Paso 18

Si seleccionamos dos figuras podemos que su separación también podría modificarse al tiempo:

Paso 19

Inclusive, en la parte superior derecha también puedes editar su separación:

Paso 20

Ajustaremos el tamaño de los cuadros y jugaremos con estos dos botones: (alinear hacia arriba y hacia abajo).

Paso 21

Dibujaremos 5 cuadrados y seleccionaremos la opción tidy up eso generará una organización inteligente:

Paso 22

Así sería el resultado de tidy up no obstante, Figma no te podrá ayudar mucho si tienes tus figuras demasiado desordenadas, no confundas a Figma.

Paso 23

Así sería el resultado de tidy up no obstante, Figma no te podrá ayudar mucho si tienes tus figuras demasiado desordenadas, no confundas a Figma.

Paso 24

Ahora, organiza todos los elementos de una manera que no queden los mismos espacios entre uno y el otro y luego selecciona la opción de distribuir ordenadamente de forma horizontal.

Paso 25

Cuando todos los elementos están seleccionados notarás que tienen una figurita al medio, esa figurita ayuda a cambiarlos de posición

Paso 26

Seleccionaremos los tres cuadrados que hicimos previamente, vamos al menú , Arrange, Pack horizontal. Pack horizontal traduce (empaquétame todo en horizontal).

Paso 27

No obstente, si lo deseas, podrías generar una separación de elementos en la parte superior derecha:

Paso 28

Generemos ahora esta persepción de que los elementos se encuentran separados así y escojamos la opción Arrange, horizontal:

Tema 6

IMÁGENES

Paso 29

Es importante saber que Figma acepta imágenes .jpg .png .gif .webp entre otras. Hay dos formas de cargar una imágen en Figma, la primera es arrastrar la imágen y la segunda es hacer clic en File y seleccionar la opción place image o el atajo del teclado es CTL + SHIFT + K

Paso 30

Al hacer CTL + SHIFT + K podrías dibujar tu imágen a tu gusto:

Dibujaremos un rectángulo, un cuadrado angosto y una estrella posteriormente, hacemos CTL + SHIFT + K

Paso 31

Se insertarán entonces las imágenes:

Escribiremos un texto que diga SENA y con la ayuda de CTL + SHIFT + K insertaremos la imágen de GOKÚ dentro del texto.

Paso 32

Es importante saber que las imágenes son relleno para Figma. Exposición: Es para la luz. Contrast: Para que los colores sean más vivos o no. Saturación: Aumentar los colores. Temperature: Va de cálido (amarillo) a Frío (azul). Tint: Tinte, cambia el tono completamente de los colores. Highlights: Tonos claros. Shadows: Tonos oscuros.

Paso 33

Si deseas rotar la imágen puedes hacer clic en el botonsito que está en la parte superior derecha:

Paso 34

Otras opciones que tenemos son: Fill: Significa (rellenar) completamente el cuadro. Fit: Que toda la imágen entre en el cuadro así sobre un espacio (agrega un fondo rojo para notar el efecto. Crop: Recortar la imágen. Tile: Hacer un mosaico con la misma imágen.

Paso 35

Haremos un rectángulo gris y fuera de él un título que diga Casa de playa y debajo, un subtítulo que diga: 3 Habitaciones, piscina y vista directa al mar. Así:

Paso 36

Ahora le pondremos un Frame a lo que hicimos, teniendo que cambiar el color texto para que se vea, así:

Paso 37

Cobra mucho sentido entonces, que cuando yo redimencione la imagen ésta no se ponga más pequeña sino que se va cortando:

Paso 38

Descargaremos 5 imágenes y luego, dibujaremos 5 cuadrados en Figma, posteriormente con ctl + shift + k iremos dando clic a cada cuadro y veremos como se van insertando las 5 figuras.

Paso 39

Vamos a internet, y copiemos una imágen sin descargarla sino que directamente hacemos clic derecho sobre ella y seleccionamos la opción Copiar imágen.

Paso 40

Dibujaremos una estrella en Figma y hacemos clic derecho sobre ella, posteriormente seleccionamos la opción Paste here así:

Paso 41

En conclusión, tienes varias formas de pegar una imágen dentro de una forma de Figma.

Tema 7

kahoot

Asistencia

¿qué me llevo?