How to check the suitability of mockups for texts of different lengths
A GUI containing texts (yes, there are also icons only) implies changing those texts. Well, it should. Well there is no such thing as an interface that never changes. That’s already a dead interface.
To change the texts in the interface, it would be good to do without a designer and mockup. For this purpose, in the mockup, which were given to the development, should already be present all the rules of behavior in case of text changes. Configured autolayout in Figma, text trimming, maximum number of lines etc. — all this is transferred together with the mockup.
Even if you have to contact a designer, let this process be simple: copy-paste the text and it’s done.
In order for the interface not to crash when changing texts in Figma, the text layer should be configured with widths, autolayouts, behavior when texts don’t fit, etc.
You should check if everything is set up correctly. It takes a long time to change texts manually. That’s why Flyphant uses two techniques:
- Translation into other languages
- Text generation plugin
Translation
Translation can be done either by third-party plugins or by the built-in translator from Figma AI Beta. How it works: select one or more frames, choose a language and translate. All text fields will be automatically modified. Texts in another language will certainly be of a different length. Such a check will help you to check the suitability of the mockup for texts of different lengths, and to try on translations, for example, into Russian. For long words, I advise you to use Polish and German.
Let’s try an example:
Found a couple weak spots:
Turns out the price is slightly at risk. And the button doesn’t have an icon margin. This can be easily corrected.
Plugin
And then there are plugins that swap texts for a predefined theme. For example, they can fill all selected text fields with email addresses. I was looking for one that replaces all texts in the selected frame with random ones. The closest was the Faker plugin:
https://www.figma.com/community/plugin/833836762121994814
Faker replaces texts with the selected type. And can also change to random sentences, so that the text becomes not that slightly different length, but completely unpredictable. I recommend it.
Let’s try it on an example:
Single sentence. A couple more places found:
It turned out that the dialog box is not suitable for texts of different lengths, which will complicate its support and therefore increase its cost.
Try these two methods in Figma. If the mockup breaks, it means that there is something to be improved.
I am Sasha Tikhonov, co-founder and art director at Flyphant.
We are Flyphant. Mobile applications and web development, graphic design, motion graphics — this is all that we are not only able of but also love doing.
flyphant.com · twitter · facebook · instagram
