Prototype your app in Figma! 🖌️

💬 Show the Community!
1

Quickly and easily design your app with the Streamlit Design system

Posted in Tutorial, October 27 2022

Hey, community! 👋

My name is Jessi Shamis, and I’m a designer at Streamlit.

When making apps, I was constantly trying to figure out their design before coding them. I wanted an extra step between coming up with an app idea and jumping straight into code. So I took the open-source library (most of st.commands) and made it into Figma components.

Now I could prototype my apps before deciding how to build them! 🎉

In this post, I’ll show you how to build a Streamlit app in Figma step-by-step:

  1. Visit our Streamlit Community page on Figma to see our Design System
  2. Click on Streamlit Design System and make yourself a copy
  3. Go to the “Assets” tab to find all your Streamlit components
  4. Type “App Base” in your search assets bar
  5. Start adding components!

If you want to check it out right away, here's our Streamlit Design System in Figma. Go ahead and start building!

Step 1

Visit our Streamlit Community page on Figma to see our Design System. Follow us to learn about new designs, new components, and other new updates. 💙

🤫

SPOILER ALERT: We’ll be releasing a companion plugin soon. Hope you’ll like it!!

Step 2

Click on Streamlit Design System and make a copy. It will appear in your personal Figma account so you can play with it as you wish:

streamlit-components.png1894×1454 155 KB

👉

NOTE: The file will open in the draft folder of your personal account. You can play with the System (your local assets) or go to the top middle and click “Publish styles and components” so that anyone in your organization can use your components.

Step 3

Go to the “Assets” tab to find all your streamlit components:

Step 4

Building your app is super simple! Just type “App Base” in your search assets bar:

Once you have the base, follow the instructions to detach the instance. Start dragging and dropping components to your heart’s desire. And use the app base for the perfect layout (simply decide what you want to put in it).

Step 5

Start adding components! They’re labeled by their Streamlit Python command (i.e., st.text_input). Unsure what to add? Pick one component from the library on the third page of the Design System: 🧱 Streamlit Components—Build your app (learn more about our widgets in our docs).

Wrapping up

This is a passion project and a work-in-progress that will continue to evolve. We’ve been using it to prototype concepts and innovate around app creation. Please try it out and comment on our Figma community page. We’d love to hear your feedback.

If you have questions, leave them in the comments below or message me on LinkedIn.

Happy designing and building! 🎨

P.S.: This post is Part 1 of the series on empowering designers to build their own apps. Stay tuned for more. 😉

This is a companion discussion topic for the original entry at https://blog.streamlit.io/prototype-your-app-in-figma/
6 Likes
2

Hi There! Thanks for building this :slight_smile:

For me there is one dealbreaker. The colors. They seem to be in a separate library which is not accessible. Without them in the file, visual adaptions not really useful in my opinion.

Thanks & Best, Flo

3

Hi!
Sorry for my late reply! Thank you so much for this feedback - its so helpful and glad to hear that you were trying it out:) This is something we are working for the new, updated version of the design system. It should be released in the next couple months! PLEASE keep the feedback coming and let us know if you have any other requests that would be helpful for you to use the library!

Thank you!

  • Jess
3 Likes
4

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.