No tienes acceso a esta clase

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

Curso B谩sico de Figma

Curso B谩sico de Figma

Santiago Camargo

Santiago Camargo

Creaci贸n de textos y estilos

4/26
Recursos

Aportes 102

Preguntas 12

Ordenar por:

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

Para previsualizar en Windows es con: (Shif + G)

apuntes de comandos b谩sicos de Figma

  • F: para entrar a la herramienta Frame
  • V: para entrar a la herramienta Move
  • T: para entrar a la herramienta Text
  • ctrl 贸 cmd + B: Bold 贸 Negrita
  • ctrl 贸 cmd + I: Italic 贸 cursiva
  • ctrl 贸 cmd + U: Underline 贸 subrayado
  • scroll: mover hacia arriba o abajo
  • shift + scroll: mover a izquierda o derecha
  • ctrl 贸 cmd + scroll: acercar o alejar

Envio mi trabajo

鈥 Texto(t):
o Bloque fundamental en cualquier interfaz.
o Propiedades: Fuente-Espaciado-Alineaci贸n.
o Comandos:
飩 Ctrl + b: negra
飩 Ctrl+ i: italizado
飩 Ctrl + u: subrayar
飩 Shift+g: previsualizar.
o Estilo de texto:
飩 Propiedad global que puede ser reutilizable a lo largo de archivos y proyectos.
鈥 Proyecto:
o Creamos el texto de contenido y creamos el estilo texto 00.
o Y para el t铆tulo creamos el estilo de t铆tulo 00.
o El t铆tulo se ve mejor en 30 y el texto NUNCA PUEDE SER MENOR A 14.
o Trabaja con el tama帽o de cajas de texto m煤ltiplos de 8 porque los px van de 8 en 8.

Para los Keyboard Shortcuts presionar el boton de la esquina inferior derecha con el simbolo (?) y darle a la opcion 鈥淜eyboard Shortcuts鈥

Team, Recuerden que para deshacer una accion el gran CONTROL + Z cuando se equivoquen y volver al paso anterior鈥

CONTROL + Y para volver a lo que se deshizo.

Creaci贸n de textos y estilos

Bloque fundamental de cualquier interfaz es el texto

Un objeto de texto tiene diferentes propiedades

  • Texto
    • Fuente
    • Espaciado
    • Alineacion
  • Color

Atajos para la creacion y de edicion de texto
ctrl 贸 cmd + B: Bold 贸 Negrita
ctrl 贸 cmd + I: Italic 贸 cursiva
ctrl 贸 cmd + U: Underline 贸 subrayado

Que es un estilo?
Son propiedades globales de los elementos que pueden
ser reutilizables a lo largo de varios archivos o proyectos.

Si no tienes idea de que texto de relleno agregar en tu ejercicios, puedes usar los famosos 鈥渓orem ipsum鈥 En esta p谩gina https://www.lipsum.com/ puedes generar p谩rrafos, palabras, listas, etc. Espero te sea de ayuda. 馃槑

Asi vamos鈥 Datico, para poner imagenes en este chat de Platzi, toca guardar la imagen en tu PC como jpg y arrastras la imagen a este cuadrito鈥

Informaci贸n resumida de esta clase
#EstudiantesDePlatzi

  • El texto es el bloque principal sobre la interfaz

  • El objeto texto tiene 2 propiedades que son el texto como tal y el color

  • Dentro de la propiedad texto podemos modificar la fuente, espaciados, alineaci贸n, entre otros m谩s

  • Existen comandos r谩pidos para mayor velocidad

  • Figma me permite crear estilos que puedo reutilizar a lo largo de mi proyecto

  • El objeto texto puede ser muy editable al manipular todas las propiedades que nos deja Figma

  • Con la tecla Alt puedo observar las medidas de los espaciados que van quedando

  • Parece que es recomendable trabajar sobre m煤ltiplos de lo que definimos nuestra grilla

  • Puedo utilizar valores en porcentaje para definir las propiedades

  • Lo recomendable es crear estilos para usarlos de manera m谩s r谩pida en un futuro

  • Ctrl + B = Negrilla, Ctrl + U = Subrayado, Ctrl + i = Italizado

Les dejo mi avance y de paso la pueden hacer 馃槃

驴Como va todo chicos?

Utilice un texto desde wikipedia para probar los diferentes estilos de texto.

Saludos.

Mi primer aporte 馃グ馃グ

![](

Comparto mi actividad de la clase!

隆Qu茅 emoci贸n! Mi primera nota en Figma. Decid铆 que todas las notas de mi App ser谩n mis canciones favoritas 馃槂

As铆 qued贸 mi trabajo. 馃槄


Mi primer ejemplo usando figma馃殌

En mi caso, trabajo desde mac y command + G para mostrar la grilla no funciona, se debe usar SHIFT + G, no s茅 si solo me pasa a mi, pero por si trabajan en mac y les est谩 pasando ensayen con SHIFT y ver谩n que les funciona.

Mi primera nota =)

No pares de aprender!

As铆 va mi nota.

Mi aporte :

Les comparto mi ejercicio realizado en esta clase.

Mi ejercicio:

Proceso de lo que voy realizando

Con la tecla Tab en Windows, pueden ir navegando por cada una de las cajas de Texto

Dejo por aqu铆 mi primer aporte; me emociona lo practica que es la clase; espero seguir aprendiendo.

Si no tienes ideas sobre que escribir, te recomiendo utilizar el Lorem Ipsum como una forma eficiente de rellenar provisionalmente el contenido y centrarte en el dise帽o.

Mi aporte

Les comparto mi resultado de esta clase

Si aun no tienes claro el texto a usar en tu proyecto, puedes usar el plugin CONTENT REEL y all铆 encontraras el texto por default 鈥淟orem Ipsum鈥, entre otros 馃槂

Crear estilos de texto es importante, especialmente cuando tenemos muchos bloques de texto en nuestras interfaces, ya que as铆 podemos acudir al estilo creado y unificaremos f谩cilmente de acuerdo a su jerarqu铆a (p谩rrafo principal, t铆tulos, encabezados, subt铆tulos, p谩rrafo secundario, notas, citas textuales, etc.).

Hola! Alguien sabe por que figma me tomo un margen de 10 y no de 16 como indico el profe para crear texto? tampoco me deja mover la caja desde donde empieza (o sea desde los 10dp) ![](https://static.platzi.com/media/user_upload/image-124cebc9-e464-4533-a0b3-384b0eab1476.jpg)
As铆 va la cosa! ![](https://static.platzi.com/media/user_upload/image-db992b53-89c5-45dd-be17-5becb7e03cb7.jpg)
En la clase se uso el Ctrl + G para ocultar o ver el Layout grid, si est谩s en Windows usa: **Control + Shift + 4** 馃槃.
Buenas Noches :) ![](https://static.platzi.com/media/user_upload/image-cc33ac3b-5f9e-467c-8527-0bba914dbf5d.jpg)
Mi primer aporte en este curso: ![](https://static.platzi.com/media/user_upload/image-03c23d6a-7365-4153-a76c-33090869a79c.jpg)![](https://static.platzi.com/media/user_upload/image-dce05f07-ea62-46f6-8246-f30067b72217.jpg)![]()
Para revisar cuanto espacio hay hacia arriba y hacia la izquierda en Windows es con: (alt gr)
![](https://static.platzi.com/media/user_upload/image-9305827a-9046-4886-bc0f-dbc037edc689.jpg)
Envio mi trabajo ![](https://static.platzi.com/media/user_upload/image-d7e6461b-b597-4566-bf4b-c45db8cd392e.jpg)

Creaci贸n de textos y estilos

Texto : sus propiedades

  • Fuente
  • Espaciado
  • Alineaci贸n
  • Color

Estilo : Propiedades globales de los elementos que pueden ser reutilizables

Crear un estilo

  1. Insertamos un Texto

  2. Cambiamos sus propiedades

  3. Damos clic en los 4 Puntos y despu茅s en el bot贸n +

Me gusta que siempre da los atajos de teclado.

Para previsualizar en Windows es con: (Shif + G)

He podido lograrlo! excelente clase.![](

![](

![](

Hola a todos chicos! es una clase genial. sin embargo profe Santiago o cualquier compa帽ero que me pueda ayudar no me deja crear el nuevo estilo de texto.![](

![](

Crear un estilo de texto para reutilizar.

Para revisar la m茅trica de espacios de cada elemento con respecto a otros o al contenedor padre, se presiona moment谩neamente ALT.

CTRL+G es para ver la interfaz com estar谩 en producci贸n.

Texto

Comparto mi primera nota!!

Me hab铆a encantado Adobe XD, pero creo que Figma lo desplaz贸 jejeje, es m谩s creo que a Adobe InDesign tambi茅n 馃槃

alguien sabe como puedo crear un estilo? parece que figma no me deja, no me da esta opci贸n鈥

crear estilos de texto

  • Selecciona un elemento de texto que deseas utilizar como modelo para crear un estilo de texto.

  • En la secci贸n 鈥淭exto鈥 del panel de propiedades a la derecha, haz clic en el bot贸n 鈥淐rear estilo鈥.

  • Aparecer谩 un cuadro de di谩logo donde puedes darle un nombre a tu nuevo estilo de texto.

  • Haz clic en 鈥淐rear鈥 y se agregar谩 un nuevo estilo de texto a tu biblioteca de estilos.

  • Para aplicar el estilo de texto a otro elemento, simplemente selecciona el elemento de texto y haz clic en el nombre del estilo de texto que deseas aplicar en el panel de estilos de texto.

  • Puedes editar un estilo de texto existente haciendo clic en el nombre del estilo de texto en el panel de estilos de texto y haciendo los cambios necesarios en la secci贸n 鈥淭exto鈥 del panel de propiedades.

  • Tambi茅n puedes actualizar todos los elementos de texto que utilizan un estilo de texto determinado al hacer cambios en el estilo de texto. Simplemente haz clic derecho en el estilo de texto en el panel de estilos de texto y selecciona 鈥淎ctualizar instancia鈥.

Crear estilos de texto en Figma te permite ahorrar tiempo y mantener la coherencia en tus dise帽os.

Aqu铆 hay una lista de atajos de teclado para editar texto en Figma en Windows:

  • Seleccionar texto: Haga clic en el texto o utilice la herramienta de selecci贸n para seleccionar el elemento de texto.

  • Activar modo de edici贸n de texto: Haga clic en el texto o seleccione el elemento de texto y presione 鈥淓nter鈥 o 鈥淩eturn鈥. Tambi茅n puedes usar el atajo de teclado 鈥淐trl + T鈥 para activar el modo de edici贸n de texto.

  • Seleccionar palabra: Haga doble clic en la palabra que deseas seleccionar o mant茅n presionada la tecla 鈥淎lt鈥 mientras haces clic en la palabra.

  • Seleccionar l铆nea: Haz triple clic en una l铆nea de texto para seleccionarla.

  • Copiar y pegar texto: Usa los atajos de teclado 鈥淐trl + C鈥 para copiar el texto seleccionado y 鈥淐trl + V鈥 para pegarlo.

  • Deshacer y rehacer: Usa los atajos de teclado 鈥淐trl + Z鈥 para deshacer la 煤ltima acci贸n y 鈥淐trl + Shift + Z鈥 para rehacer la acci贸n previamente deshecha.

  • Cambiar fuente: Selecciona el texto y presiona 鈥淐trl + Shift + F鈥 para abrir el panel de fuentes y selecciona la fuente deseada.

  • Cambiar tama帽o de fuente: Selecciona el texto y presiona 鈥淐trl + Shift + >鈥 o 鈥<鈥 para aumentar o disminuir el tama帽o de la fuente.

  • Cambiar estilo de fuente: Selecciona el texto y presiona 鈥淐trl + B鈥 para aplicar negrita, 鈥淐trl + I鈥 para aplicar cursiva y 鈥淐trl + U鈥 para subrayar.

  • Alinear texto: Selecciona el texto y presiona 鈥淐trl + Shift + L鈥 para alinear a la izquierda, 鈥淐trl + Shift + E鈥 para centrar y 鈥淐trl + Shift + R鈥 para alinear a la derecha.

Cuando se habla de tipograf铆a no puedo dejar de recomendar la serie de Netflix -Abstract-, por favor vayan y vean los episodios de Jonathan Hoefler y Paula Scher, seguramente terminaran enamorados de este mundo y nunca volver谩n a ver ni tratar la tipograf铆a de la misma manera .

Ctrl+ scroll =zoom

Un Indesign online, LOL, esto me recuerda las veces que trabaje editorial en la escuela de dise帽o y sufr铆a porque no tenia el h谩bito de crear los estilos de fuente y de textos, esos mismos estilos que me salvaron en muchos trabajos despu茅s.

Env铆o la pr谩ctica!

Me est谩 gustando mucho Figma 馃槂

Los comandos de Mac son similares a los de linux, comand vendr铆a a ser ctrl

Asi va mi primera nota:

Excelente clase, me agrada mucho la manera tan clara en que explica y que no da por sentado que ya te sabes algo, simplemente lo explica hasta el m铆nimo detalle, lo de las teclas por ejemplo que muchos no sabemos.

Excelente clase

馃槃 excelente clase, yo lo aline茅 a texto justificado:

(

Asi quedo mi nota probe distintos estilos, cualquier feedback es bien recibido

Mis notas

(

F谩cil, pero muy buena clase.