Typist

Typist helps make your prototypes look so so real by turning text layers into animated, typing text components. No more super-fake janky forms! Bring that chat interface you're working on to life!

What Typist does

Typist generates components for you from text layers in your Figma file. These can help dial up the realism on your presentations and can be indispensable for stress-testing text-based chat UI. The components that Typist generates are animated based on your preferences, and all you have to do is drop them into your prototype to get some of your very own RAD TEXT TYPING ACTION.

How to use Typist

1. Select one or more text layers in your Figma file and run the plugin.
2. Specify how you want the typing animation to look.
3. Hit the "Create component" button to generate components from your selected text layers.
4. Use those components as you wish in your prototypes.

Typist tips n' tricks

First of all, Typist respects your text layers' width settings. If you create a component from a text layer set to Auto Width, the component will resize horizontally. If you create one from a text layer set to Auto Height, it'll resize vertically.

• Auto width text fields are better for single line forms, cause you can put them into an Auto Layout with a cursor gif and it looks cool
• Auto height text fields are better for multiple-turn chat animations that build up vertically, because you can wrap the whole thing in an Auto Layout and it'll manage it's own height
• Examples of both of these most common use cases are in the Playground file, pls enjoy

The "Type by"setting tells Typist whether you want to animate individual letters, words, or chunks of text. It's basically the first of two speed controls.

• The default setting, Type by Word, works pretty well for a paragraph or two of text, like you might see as a response when you're chatting with an AI.
• If you want to simulate form input or a single line of text, Type by Letter will get you there.
• If you have a TON of text you can try Type by Multiple Words so you're not waiting around all day.

The"Speed" setting controls the timing between animation steps.

And "Randomness" will apply a little staggery swagger to the generated component. It's less noticeable at faster speed values.

Enjoy!

~ Jay