Figma-Weweb converter

Hi,

I’m trying Figma to Weweb converter plugin

For what I can read it converts the FIgma file into code that can then be imported. If that is the case the only way I can use it is through a paid plan right?

Hey @FREDRIKK :wave:

First note: the Figma to WeWeb plugin is still very early so you may not get great results with it. We are iterating on it but it’s not top priority so it may take a while before results are consistently good :slight_smile:

Now for your question, the import HTML feature is currently available to beta testers only. We are going to release it to the public but we haven’t yet decided if it will be available on the free plan or not.

1 Like

Any updates on this? How can we sign up to beta?

The plugin is estimated to be released by the end of September

Send an email to luka@weweb.io if you’d like to test before that

Hi Luka,

A member of our team emailed you!

Hey Luka - I am curious if there is any guidance that can be given to designers working in Figma (on designs for a WeWeb project) that will achieve best results with the converter.

There are three basic things:

  • Use as much as auto-layout as possible
  • Avoid groups/rectangles as they are not supported
  • Mark buttons/inputs/other as such using the plugin interface

If you have a particular screen you’re struggling with feel free to email me. If you provide me with the Figma file I can make a Loom for you explaining the steps to achieve better results

Hello !
One simple feedback I have in mind right now would be to have the font that is also converted (only if figma font & weweb are exactly the same and open source )

Don’t know if planned or difficult but having also the state of a button for example from figma would be nice

Anyway cool plugin looking forward to see the progress !

(Also another thing if a weweb project has added in the rest api the GET request , would be incredible that weweb auto detect it and make fidelity even better

We are working on another feature in the plugin that will export your styles to WeWeb styles as the easiest solution

We might make a data source plugin in the future that will use the api from figma

Fonts will be added soon as well

3 Likes

That was my “top-tier” dream feature from WeWeb to have as datasource Figma API :smiling_face_with_three_hearts:

btw i can send you the current QreamUI Figma Kit if it can help understand how an user build a complete design system, with figma variables etc !

Hi @luka we did some testing - but at the moment to limited to properly export Figma design to WeWeb. Indeed the styles, but stuff like tabs cannot be exported. Another point is the naming of flexboxes; in our design we give them proper names of better readability - but when converted they are just “flexboxes”.

Very eager to test / learn more on this.

I came across Locofy - not sure if there is inspiration to take from that one.

2 Likes

Hello Community,

I just finished designing my App in Figma (with auto layout, components, resonsive designs) and will now start re-building in WeWeb. I’ve checked the Figma to WeWeb Plugin, but it does not really seem to be very helpful.

Before I start building everything from scratch, is there any new best practice when it comes to importing Figma designs? I’ve watched @Joyce `s Academy Video and it seems like manual rebuilding this is the way to go. Great videos in general, btw @Joyce ! They are really helpful and I’ve learned so much already. :pray:

I have a paid Figma plan with access to their Dev Mode, if that helps somehow.

1 Like

Like @chaefner I’m about to embark on a Figma rebuild in WeWeb and likewise curious if there are any updates on best practices, or if the plugin described here has been updated: https://www.youtube.com/watch?v=YTo__Os0hpE