Figma Plugin

Get Some Ipsum is a simple, flexible lorem ipsum plugin for Figma that I designed and coded from scratch. Some of my primary goals and motivations for the project included:

• Providing additional functionality above and beyond what other, similar plugins offer. For example, options that make the generated text more suitable for headlines
• Fixing some of the annoying bugs that I’ve run into using other plugins. For example, getting one word sentences in the text output
• Additionally, it served as a good introduction to designing and building plugins for Figma because it’s entirely self-contained and doesn’t rely on external APIs.

To wrap my head around all the steps required to get from launching the plugin to generating text, I put together the following user flow:

A simple user flow visualizing primary decision points

When the user launches the plugin, if no text is currently selected on the page, they will be shown a prompt asking you to select at least one text frame. The prompt includes a hand-coded SVG animation to draw attention to and reinforce the prompt.

Animated prompt to make sure the user has selected a text frame

Once the user selects at least one text layer, they are able to choose between two generation modes: Auto and Custom. Depending on the resize setting of the frame(s), Auto Mode will intelligently generate text based on either the current amount of text in the frame or the total size of the text frame. To ensure that the generated ipsum looks as much like proper sentences as possible, the plugin uses custom logic to construct the text based on a predefined set of requirements.

Auto Mode intelligently generates text based on the selected frame(s)

Custom Mode, on the other hand, allows users to generate a specific amount of text based on a desired number of characters, words, or paragraphs. To improve the user experience of this flow, I included sensible defaults for each output type (2 paragraphs, 25 words, or 150 characters), which are automatically applied based on the current selection as long as the user has not yet modified the number input.

Custom mode allows for complete control over the generated text

In either mode, you can choose whether you want to include periods in the generated text, and if you want the generated text to be set in title case — two options that are intended to make the plugin easier to use for headlines. Once the text is successfully generated, the user receives a toast message confirming the total number of updated text layers.

Toast message indicating the number of textboxes modified

To be respectful of and responsive to users' needs and preferences, the plugin is fully keyboard accessible, including focus states, and features built-in support for both dark and light mode.

Side-by-side comparison of light and dark themes

This was my first Figma plugin, which I built from the ground up using Svelte as my front end framework for templating and state management and Tailwind as my CSS framework for managing styles. It's real, and you can check it out here in the Figma community, here on Github, or wherever you get your plugins (a.k.a. the Resources panel at the top of your Figma file).