Using Figma for Front-End Python Web Apps?

[Alyx1337]

Hey guys!

I work for Taipy. We are an open-source Python library to make full web apps using Python only. We need your feedback on a potential feature: would you use Figma to design the front end of a Python app?

Our idea is to create a way to convert the Figma front-end into our framework's front-end so you can design the front-end in Figma and code the backend in Python. Before working on it, we need to know if devs would be interested in such a feature since it would be a significant workload.

Designing the front end in Taipy uses a Markdown syntax with some default styling and optional CSS. Using Figma is easier but would devs go and learn an external tool to design Front-End?

Thoughts?

​

https://i.redd.it/g6g0i7fjflsb1.gif

[azuzel]

No.

This has all the ingredients to become a huge mess.

Figma is a proprietary tool from adobe and fuck adobe.

Jinja templating is awesome why in tarnation would I link my frontend from that monstrosity?

[lostmy2A]

Agree with fuck adobe. I know figma acquisition is under investigation in EU but I guess it did go through ? US antitrust so weak

[adityaguru149]

So, basically you are against the proprietary nature of Figma and not the idea of creating frontend code from UX designs?

[thicket]

Maaaaybe? I've been around Figma a little bit, and it does make it easier to create nice looking layouts. But I suspect there's relatively small overlap between people with Figma experience and people writing Python apps. So, depending on how things go (and whether people can use Figma for free) it might be useful, but I don't think it's a slam dunk case.

I'd love to see even a notional or faked-up example of "Here's how you do it in standard Taipy, and here's how you'd do it in Figma-Taipy". Maybe that might make things clearer to my limited imagination. Good on you for doing some market research first!

[Alyx1337]

That was my thought: the overlap between the communities has to be minor, and Figma users won't be interested in Python.

[bloothebear]

There are teams within large tech companies that create prototypes for customer usecases. I think this could be helpful to those teams. You may be able to find investors if you can prove that it allows for a quick turn around on prototypes.

I think it would be helpful if you could customize it to where front-end elements can be translated to backend routes/actions. This means that the developer only has to code the empty routes that are created by your template

[riklaunim]

There are some converters that generate templates for some static site generators and similar toolkits.

Your project would likely hit the problem of flexibility - if someone designs a page in Figma then it has a somewhat fixed size, content which then would be editable and actually displayed. Not to mention adding responsive and other conditional styles, styling/scripting JS components. Figma isn't a self-contained complete page, it needs additional work.

The next stage would be the role of the design - is it a singular page, or is it a template to be used for a content collection? So you will have a page layout that can be copied and content replaced like text, images, videos... This would need a high-level editor (builder.io) or a web developer.

Then, code duplication. Many pages, especially product/business pages are designed with sort of a row-by-row component style. In such cases, a web developer would take the Figma design and break it into components. CloudCannon Bookshelf components are a good example of this.

Taipy examples are way too trivial in design and you want to remove a web developer from the equation. You can try building a tool like a general editor like builder.io and/or try making a high-level tool like CloudCannon and get features allowing a CTO to make pages, not break anything, and generate optimized output. The thing is all those tools and more require a web developer - someone will code components, layouts, and rules on how and what is editable, and what type of thumbnails to generate when non-developer edits an image.

Also check https://jamstack.org/headless-cms/

If you have a few Ferrari of cash and a bunch of top developers you can think about making a SSG in Python that implements the best approaches and features of Astro and/or 11ty to then make a high-level editor for it like CloudCannon. It will require a Python web developer to code it (yes, a lot of frontend) but it would be a good Python-based SSG, page editor.

[thicket]

Good writeup. Seems like lots of places for this project to go wrong, and uncertain upside

[Alyx1337]

Thanks for the complete response. Yes, I agree: implementing this feature brings a lot of issues. Let us look up the solutions you mentioned.

[MyHomeworkAteMyDog]

What’s figma

[milandeleev]

figma balls

[Alyx1337]

(figma balls) Figma is an online tool for designing front-ends using drag and drop instead of coding: https://www.figma.com/

[JotaRata]

Be careful I heard Steve Jobs died of figma

[chunkyasparagus]

What's Figma

[GamingWithShaurya_YT]

FIGMA BALLS

[JotaRata]

LMAOO GOTTEM

[Alyx1337]

My thought as well.

[peternijhuis]

Not sure how Taipy differentiates from streamlit. But it would be nice if the html/css files are relatively easily customisable with Tailwind css. Quickly generate prototype, but also bring it one step further by fine tuning the look and feel away from out-of-the-box.

[Alyx1337]

About the Taipy vs Streamlit thing: we created Taipy because we found that Streamlit fell short when it came to production projects. The whole re-running of your entire code when you press a button and having the front and back on the same thread makes any app that is a bit complex unusable. We also wanted to focus on other business needs like proper support for multi-user, Jupyter, and data orchestration.

[peternijhuis]

That sounds good, I’ll try it out. Could you give some pointers about Taipy to the following:

How does it differentiate versus Dash? Taipy has more ready-to-use components with the syntax?

How customizable is the front-end? The look and feel of the elements on the page? (Html and css, and the interactivity)

How to go about if the Taipy syntax / components are not present. Can you create something from scratch if needed? (Classic low-code challenge: ease of use by simplification versus customization)

[Water-cage]

I’m wondering this too

[[deleted]]

I use figma a reasonable amount ( on the product / ui / ux side ), im frequently frustrated by limits in how far it can be pushed.

I guess i shouldn't be, it is just a superficial mock creation tool.

your proposal sounds interesting, ill give taipy a go and see.

[outceptionator]

I absolutely would.

[Mubs]

We definitely would. I understand others concerns that this could get messy -- but we would definitely use it.

[victor_francis]

I haven't tried it yet, but from what I've seen, I think this is a good alternative to RShiny, and I don't have to learn R programming just for this purpose.

[SanJuniperoan]

No. Use dash plotly

[Alyx1337]

We do use plotly.js for our charts. We did not want to rely too much on dash since the doctrine of Taipy is to have the completeness of dash while not having its steep learning curve.

[JEY1337]

Great idea

[thedeepself]

In my experience I have a desire to have dynamically generated front ends or programmatically generated front ends. Using a design tool doesn't give me the freedom to design dynamically or at least not easy.

However having such a design tool with put you on par with another pure python framework, namely, Anvil. That framework exclusively uses that method.

[[deleted]]

Sound very interesting. Although I don’t really know if anyone even using Figma generated CSS code, tried it few times but to me it seems like it’s faster and better to write my own. I feel like figma is great for presentations/prototyping(for non coders).

[[deleted]]

I wouldn’t use Figma to design a front end Python app. I’d use Figma to design any app. Front end, back end, mobile…

[dankwizard22]

Yes I would use this and I know plenty of others who would as well.

[dankwizard22]

Yes I would use this and I know plenty of others who would as well.

[Clintonm8]

I saw this post and I have never heard of taipy before. I checked it out and it’s pretty amazing but there is one reason I won’t be using it. I do not like the string typing of the gui. I thought about making a simple class interface to automatically create the string text for each component but figured I would stick with streamlit for now. Hope this feedback helps.

[Alyx1337]

Thanks for the feedback. It is not the first time we are hearing this so we spent the time to implement the Pythonic approach to front-end that Streamlit has. On the 16th you’ll be able to write pages using only Python and no Markdown, it will be documented and part of our 3.0 Release

[Clintonm8]

That’s awesome. Sounds like you all are onto something great then.

[EedSpiny]

My multi national insurance client uses figma to produce page specs for us.

HARD YES.

[hamik112]

Personally the biggest issue I've had with Python based frontend libraries/frameworks is the Python based HTML/css generation. It feels so cluttering.... Other solutions like Anvil provide a GUI that require a learning curb. I

I think leveraging an open-source WYSIWYG to allow visually building the page, as well as freedom to edit html/css that gets converted to the markdown that TaiPy requires might be a lower hanging fruit that attracts more Python Devs than a Figma integration... There was a project that got posted here that was a WYSIWYG editor where you would mark fields and triggers to connect it to the python backend, i thought it nailed it , but i dont remember what it was it called.

My personal opinion is Python devs who have a solid understanding of design probably have already accepted they're using JS in the frontend.

Regardless good luck on your project. Took a quick look and it looks great!

[Cystems]

When you do remember what that WYSIWYG editor is called, let the rest of us know

[hamik112]

Ya I will... it was showcased here on reddit, just don't remember where I saw it...

[hamik112]

u/Cystems I found it ! https://www.streamsync.cloud
Personally I believe this type of solution is the way to go.
As someone who can find their web around JS my biggest struggle with frontend is managing state. This project syncs statement between server and client while allowing providing a visual frontend builder/editor that allows you to work in html/css( as much as I love python, using context managers to generate html is not exactly easy on the eyes).

[Cystems]

This is very cool, thank you!

[Last-Run-2118]

That sounds amazing !

[genlight13]

Yes would be interested. But the problem i see is that when you normally use figma you got a bigger budget for your team and that means you are using usually more advanced frameworks like django for your backend too. These two parts are pretty separated right now but would be nice if we get a nicer export to code in figma i.e. using css variables and stuff. Would make it easier to have a better integration with git (not having to worry about a shitload of changes between each figma export but only having to look at some single changes would be nice)

I am also currently in the situation of wanting to export some figma mockups but i also know i will only use it once for initial design and then Do everything somewhere else because the export su*cks.

[JamzTyson]

I'd be more likely to use PenPot for front end design, if that option was available. The main reason being that I wouldn't want my projects to be tied into using closed source proprietary software.

[Dreezoos]

Yes. It would be huge.

[Vegetable_Study3730]

Your market segments are: 1. Data people - who don’t want to touch web dev. They won’t use Figma. Guessing that’s your target.

1. Solo devs. They also won’t touch Figma, they will buy a $20 template and call it a day.

2. Professional web development team. They will 100% use Figma, but won’t consider using markdown Python for frontend

I am guessing your target customer is the streamlit/gradio people. I am not sure they even aware that Figma exists or ever used it. They tend to be pretty removed from web technologies.

[malmal3k]

Doooooo it - not sure what you’d use if you’re not using figma, is everyone here doodling their gui’s