Hi Streamlit and Figma lovers! 👋🏻

My name is Juan, and I’m a designer and developer here at Streamlit. Remember last week we shared with you our Streamlit Design System in Figma? Today, I want to unveil…

Our complementary Figma plugin!

Prototype and code your apps easier than ever by turning components into code automatically, without leaving Figma. Pretty awesome, right?

In this post, you’ll learn:

• How to install the plugin
• How to use it
• How to contribute to the plugin’s development

Want to check it out right away? Head on to our community profile and give it a try. Or strap yourself in and follow along with me!

How to install the plugin

Installing the plugin is super easy. Just follow these steps:

1. Go to our Figma community profile, open the plugin, and hit Try it out.
2. Go to Figma and run it from the Plugins tab.

How to use it

As mentioned above, this plugin is complementary to our Streamlit Design System. Drag and drop a component, tweak its props and values, hit See my code, and get a code snippet to use in your app!

Need help creating an app to test the code? Check out our docs on Getting started or use Yuichiro Tachibana’s amazing stlite sharing template. Just copy the plugin’s snippet, paste it into the code editor on the left, and click 💾 Save. The app on the right will update and show the generated output automagically!

Here is what it’ll look like:

Last but not least, if you need a refresher on how to use our Design System library to prototype your app, make sure to check out last week’s post! And if you have any issues, check out our troubleshooting section on GitHub.

How to contribute to the plugin’s development

This plugin is an experiment, which means we’re still developing it.

As of this writing, it supports:

• Text elements (except for st.latex and st.markdown)
• Input widgets (except for st.select_slider)
• Native Chart elements (st.line_chart, st.bar_chart, and st.area_chart)

In the future, we plan to have it support:

• More widgets: Media elements, Progress and Status, Data display elements, Layout and Containers, and Control flow.
• More variants/features: recognizing bold, italic and strikethrough formatting; label_visibility on input widgets; optional properties and global page configuration; plugin settings to tweak the code output to better suit your needs.
• Internal improvements: code refactoring, type annotations, automatic data import, example callbacks, and more!

Want to help us out with the plugin’s development? See the instructions on how to contribute to the codebase. Thank you! 🙏

Wrapping up

That’s pretty much it, folks.

We hope you enjoy playing with this new plugin. If you find any errors or have any ideas on how to improve it, please file an issue, and we’ll get back to you as soon as we can. Better yet, help us build those features yourself by contributing to the codebase.

Happy Figma-to-Streamlit-ing! 🎈