Figma is a great tool for web designers. With this program, even amateur designers can create simple leadpages or product prototypes. Of course, it is impossible to make designs like on Netflix or https://tonybet.ke/sw/live, but you can still use it for any business niche. To improve your Figma performance, use these tools.
Add Number to Text
The tool has an extension for the content part. Let’s say you need to list product features when filling out a product card, in this case you need the “Add number to text” plugin. It can easily create numbered or alphabetical lists.
It works like this: first you need to create a certain number of fields, the number depends on how many characteristics are in one card. Let’s add a name, then select all the fields, right-click and select “Add number to text” in the drop-down list.
A pop-up window will appear and, using special characters, you can make changes there.
Here are lists:
- $n – numbered.
- $a – alphabetical, if you specify a capital letter – the alphabet will be uppercase.
- $r – Roman numerals.
- $& – specify the original name without change.
Extra commands are arithmetic formulas, when you use them you can calculate a certain value. There are mathematical functions such as random and round.
Change Text
This plugin finds and replaces words. When you run it opens a popup window with two fields. In the first we set the word you want to find, in the second, you write the new value, then click Update and automatic replacement will happen, the algorithm will find similarity with the first query and will change it to the second. If you want to make a substitution in several text fields, then select them with the mouse and proceed the same way.
Text Counts
This tool counts characters and shows how many letters, words and number of spaces. To get the statistics you need to go inside the layer, select text and then use the plugin.
Typograf
Typograf transforms sentences into nice typographic text and substitutes some characters. For example, if you write two consecutive minuses and then use Typograf, you get a long dash.
Typograf works in the background; there is no settings menu, just choose the description you want to typographically alter and use the context menu to call Typograf. After that, some characters will be replaced with the special characters.
Font Scale
If you’re a beginner, feel free to use this plugin. It will generate for you the size of your font. If you can’t do it by eye, Font Scale is what you need.
Lorem Ipsum
If you need to quickly pick up the description in the containers, you can use Lorem, it knows how to add small paragraphs in layers. This plugin exists in two types: “normal” and “Generator”. In the first case, you need to create text fields to generate content there, and the “Generator” does it automatically. To use both tools, you need to go to the menu and select them.
Content Reel
Content Reel fills the blocks with different information, it can be pictures, names, phones, numbers and icons. To apply the Content Reel function, you need to select one or more objects, right click the mouse and click on Content Reel, then a window will appear where you have to go to one of the four tabs.
Unsplash
When you want to diversify the interface with images, Unsplash is helpful. It has a useful feature to generate images, it can change the usual gray squares and add an illustration. This saves a lot of time during development, in case you need to create a gallery or make a header. Regardless of the size of the canvas workspace, the image will fully occupy the space.
Icon Resizer
A simple plugin allows you to change the size of the frame. It’s much more convenient to work if the icons are the same size. The operation is pretty easy – select one or more frames, then use Icon resizer, set the size and tap “Run”.
Map Maker
When you need to show the office driveway, there is this plugin for that. Now you don’t have to go to google.maps to generate the area of your city. Map maker can do this instead of Google, just type the address to see the result.
Figmoji
Figmoji inserts emoji in SVG format into the design. It’s convenient if you don’t want to search where you can download and paste emoji in this format.
Fig Motion
Fig Motion creates a motion effect for objects in the project. Object settings are used to move objects. To move an element along an axis, you must change the x,y parameter and also change the width, height, opacity, border radius, rotation, fill color, stroke width and stroke color properties.
Figma to HTML
After you finish development, you can convert your project into an html document, click on the appropriate plugin and a pop up window will appear with the settings, which displays code with a few buttons. Here are the main ones:
- HTML – save the document in HTML format.
- CSS – the same with styles, only with the extension CSS.
- Download – loads the entire project, including the images that were added during development.