Fontive

Inspiration

Designing text styles can be slow and repetitive, especially when trying to explore new creative directions quickly. We wanted a faster and more visual way to experiment.

What it does

Fontive instantly generates and previews new font, color, and effect combinations for any selected text, helping designers explore different styles with just a click. Users can also save favorite styles.

How we built it

We built a Figma plugin using TypeScript for the core logic and a Preact UI for the interface. We used message passing between the UI and Figma canvas to sync text changes and live previews in real time.

Challenges we ran into

• Handling font loading across many different font styles and font families
• Getting the changes in the live preview to be in sync with the selected text
• Balancing randomness and design quality so the results feel intentional instead of chaotic

Accomplishments that we're proud of

• A smooth one-click "mutation" workflow for generating style variations
• UI and a live preview that reflects the changes on the text instantly
• Delivered a tool that fits into existing workflows seamlessly

What we learned

• We learned how to work with the Figma Plugin API
• How to structure the communication between UI and plug in code using message passing
• Working with image export (exportAsync) to generate live previews

What's next for Fontive

• Add a sensitive-text detection and redaction feature to help prevent accidental exposure of private information (emails, passwords, phone numbers, etc.) in design files
• Have a saved/favorites tab that allows you to simply select to reuse past styles
• More font styles, families, colors, and effects included in combinations

Built With

• figma
• html
• javascript