En la cuarta clase del curso de Iniciación a Figma, vamos a aprender a crear textos e insertar imágenes y vamos a conocer sus propiedades y características.
Vamos a ver las distintas opciones que hay para crear y editar textos y las posibilidades que tenemos para dar formato a los textos en Figma.
En Figma, las imágenes son un modo de relleno de los vectores. Veremos qué ventajas tiene que esto sea así, aprenderemos varias maneras de insertar imágenes en Figma y cómo podemos configurar las propiedades de las imágenes. Vamos a verlo:
Habéis visto que con Figma podemos componer los textos e imágenes de nuestras webs y apps de manera muy sencilla. Para ponerlo en práctica, os propongo los siguientes ejercicios:
- Cread una caja de texto de 600 píxeles de ancho y 900 píxeles de alto. Copiad o escribid un texto de varios párrafos y estableced las siguientes configuraciones de texto (Text):
- Fuente: Literata, Italic.
- Tamaño: 24.
- Interlineado (Line Height): 150%
- Espacio entre párrafos (Paragraph Spacing): 36.
- Cambiad el color a #333333.
- Subrayad algunas palabras (cambia Decoration a Underline), accediendo a las opciones avanzadas desde el botón con tres puntos (Type Details), situado abajo a la derecha en las opciones de Texto del panel de propiedades.
- Cread una estrella e inserta una imagen en ella, cambiando el relleno de la capa. Para ello, seleccionad la capa y, en el panel de propiedades de relleno (Fill), haced clic en el selector de color. Se abrirá el panel de propiedades de relleno y arriba a la izquierda encontraréis el menú desplegable para cambiar de Solid a Image. Desde allí podréis elegir la imagen que desees insertar, que se insertará como relleno de la capa que habíais seleccionado.
- Insertad una imagen a tamaño real. Para ello, arrastrad la imagen directamente desde una carpeta de vuestro ordenador (que mida menos de 4096 píxeles de ancho, que es lo que admite Figma). En el panel de propiedades de relleno (Fill), cambiad a modo mosaico (Tile) y estableced que cada repetición de la imagen tenga un tamaño del 15% de la imagen original. Además, estableced la saturación (Saturation) de la imagen a 0, llevando el deslizador a la izquierda del todo, para que se vea el mosaico de imágenes en escala de grises.
Ya lo veis, Figma ofrece un montón de posibilidades para tratamiento de textos e imágenes, con lo que la imaginación es el límite :D
Si tenéis alguna duda, por favor, dejadme un mensaje en el formulario de soporte de la Intranet. Vamos al siguiente tema, para ver las propiedades de las capas y cómo organizarlas.
Todos los capítulos de este curso:
- Curso Figma #1. Introducción
- Curso Figma #2. Entorno de trabajo
- Curso Figma #3. Formas y herramientas
- Curso Figma #4. Textos e imágenes
- Curso Figma #5. Capas
- Curso Figma #6. Auto Layout, Constraints y Layout Grids
- Curso Figma #7. Componentes y estilos
- Curso Figma #8. Prototipado y exportar
- Curso Figma #9. Team Library
- Curso Figma #10. La comunidad de Figma