Type Tool in Figma: Adding and Styling Text for UI/UX Design
Use the Type tool to create either:
- Point text: a single line of text;
- Area text: text confined within a defined area.
Typography settings
- Font name/Typeface: select from all fonts or specific collections (e.g., Google Fonts);
- Font weight: adjust the thickness of the font;
- Font style: apply styles like italic;
- Font size: change the size of the text;
- Line height (Leading): adjust spacing between lines of text;
- Letter spacing (Tracking): modify spacing between characters.
You've also got some alignment options for paragraphs (left, center, right, etc.).
Advanced text settings
Some advanced text settings can be accessed through a popup window with a Preview box. The window usually has three tabs:
- Basics tab: to apply further font changes. Bullet points and numbering options are also available;
- Details tab: offers advanced settings for characters, numbers, and more;
- Variable tab: allows manual adjustments to slant, italic styles, and font weight (availability depends on the font).
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 2. Kapitel 7
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 2.78Type Tool in Figma: Adding and Styling Text for UI/UX Design
Svep för att visa menyn
Use the Type tool to create either:
- Point text: a single line of text;
- Area text: text confined within a defined area.
Typography settings
- Font name/Typeface: select from all fonts or specific collections (e.g., Google Fonts);
- Font weight: adjust the thickness of the font;
- Font style: apply styles like italic;
- Font size: change the size of the text;
- Line height (Leading): adjust spacing between lines of text;
- Letter spacing (Tracking): modify spacing between characters.
You've also got some alignment options for paragraphs (left, center, right, etc.).
Advanced text settings
Some advanced text settings can be accessed through a popup window with a Preview box. The window usually has three tabs:
- Basics tab: to apply further font changes. Bullet points and numbering options are also available;
- Details tab: offers advanced settings for characters, numbers, and more;
- Variable tab: allows manual adjustments to slant, italic styles, and font weight (availability depends on the font).
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 2. Kapitel 7
