In the fourth class of the Introduction to Figma course, we are going to learn to create texts and insert images and we are going to know their properties and characteristics.
We are going to see the different options that there are to create and edit texts and the possibilities that we have to format the texts in Figma.
In Figma, images are a fill mode for vectors. We will see what advantages this is, we will learn several ways to insert images in Figma and how we can configure the properties of the images. Let’s see it:
You have seen that with Figma we can compose the texts and images of our websites and apps in a very simple way. To put it into practice, I propose the following exercises:
- Create a text box that is 600px wide and 900px tall. Copy or write a multi-paragraph text and set the following text settings (Text):
- Source: Literata, Italic.
- Size: 24
- Line spacing (Line Height): 150%
- Space between paragraphs (Paragraph Spacing): 36.
- Change the color to #333333.
- Underline some words (change Decoration to Underline), accessing the advanced options from the button with three dots (Type Details), located at the bottom right in the Text options of the properties panel.
- Create a star and insert an image into it, changing the fill of the layer. To do this, select the layer and, in the fill properties panel (Fill), click on the color picker. The fill properties panel will open and on the top left you will find the dropdown menu to change from Solid to Image. From there you can choose the image you want to insert, which will be inserted as the fill of the layer you had selected.
- Insert an image in real size. To do this, drag the image directly from a folder on your computer (less than 4096 pixels wide, which is what Figma supports). In the Fill properties panel, switch to Tile mode and set each image repetition to be 15% of the original image size. Also, set the Saturation of the image to 0, moving the slider all the way to the left, so that the mosaic of grayscale images is visible.
You see, Figma offers a lot of possibilities for text and image processing, so imagination is the limit 😀
If you have any questions, please, leave me a message on the intranet support form. Let’s go to the next topic, to see the properties of the layers and how to organize them.
Remember that if you will have access to everybody the courses and you can also enjoy everything from .
Facebook Comments
Disqus