Short piece

Building a simpler way to create Flo screens

I designed and built a Figma plugin that lets PMs and content designers generate nine types of Flo screens from a simple form.

They needed screens for copy tests and stakeholder reviews, but existing templates still required knowledge of components, variants and nested instances.

The plugin assembled screens using four of Flo’s published libraries. I built the first version in one month and shipped it in 2026.

Simplifying the workflow

I replaced manual screen assembly with a form that asked only for the decisions users needed to make.

Mapping the system

To simplify the workflow, I first mapped how Flo’s screens and their variants fit together.

Seven Flo screens broken into their parts — APP screens on the left, WEBAPP on the right — each one exploded into its status bar, header, option list, primary button and title block.

Keeping screens connected

I used Flo’s published components so generated screens stayed connected to the design system.

A grid of Flo’s published design-system components in purple — a banner, a selection block, the type ramp, a headline-and-button block, browser chrome, an icon on its construction grid — the same parts the plugin assembles screens from.

Feedback

What the team said:

“I am an avid user of the Screen Creator Tool - can I put in a couple of feature requests?”

- Arden Rubens (Senior Content Designer)

“Was playing around with your screen-creator plugin - great tool!”

- Denis Artyuhovich (Director of Engineering)

“I love your screen creator tool”

- Ellie Spencer-Failes (Senior Content Designer)

“This is so cool, like really 9/10”

- Bohdan Lopatiy (Senior Product Manager) → and a hard man to impress haha