Make Figma Designs Come Alive in Wappler

Showcase
21

Would you be able to use pre existing figma templates? Or would those templates utilise components that you mentioned we shouldn’t use?

22

Hi @daves88, at the moment it will use any existing Figma template as long as it only uses Frames with auto layout. Anything outside of this may not work.

However, I have just made it a priority to attempt to expand support outside of just using auto layout. So watch this space!!

2 Likes
23

Hi @daves88, considerable progress has been made to support all Figma design features. It should now support the majority of pre-existing templates. Please do give it another try and let me know how it goes.

I speak about it in the recent Wappler MeetUp (see 6 minutes 52 seconds into this video): https://www.youtube.com/watch?v=Kg5bJEs2qGw

24

Thanks Scott, great work. I am still very interested in using predesigned figma templates as creating my own is too time consuming (and I lack the creative skillset).

3 questions that come to mind.

  1. How does impress handle bootstrap? Or let me be clearer - I love how Wappler uses bootstrap framework and would like to continue using bootstrap with a figma design. Is this possible or are figma designs and impress purely custom css without the bootstrap framework?

  2. How does impress/figma setup interfere with Wappler custom theme colors?

  3. Does Figma and impress allow you to create menu dropdown design/functionality that will work after syncing figma design with Wappler? For example, on a responsive page when the menu converts to a hamburger button, do you have to manually create the dropwdown functionality or does it work directly from figma design?

25

Sorry for the delay. Here’s some answers to your questions:

  1. How does impress handle bootstrap? Or let me be clearer - I love how Wappler uses bootstrap framework and would like to continue using bootstrap with a figma design. Is this possible or are figma designs and impress purely custom css without the bootstrap framework?

For any page that you use Figma/Impress, you will not be able to use bootstrap. This does not prevent you from building some pages with Bootstrap and some with Figma/Impress. It’s just that Figma is not aware of Bootstrap layouts and therefore Impress is not able to generate them (as it just mirrors the layout you build in Figma).

  1. How does impress/figma setup interfere with Wappler custom theme colors?

It does not use / ignores the Wappler custom theme colors. Instead it creates css files that directly correspond to the styling used in Figma. Basically Figma becomes the golden source of truth for your app design and styling.

  1. Does Figma and impress allow you to create menu dropdown design/functionality that will work after syncing figma design with Wappler? For example, on a responsive page when the menu converts to a hamburger button, do you have to manually create the dropwdown functionality or does it work directly from figma design?

If you have a burger menu then you can simply create a Figma page link to the side nav bar componen that you want to appear. Then flag the side nav bar with [sidenav] and Impress will generate the code for making it appear when the burger menu is clicked on.

Hope this answers your questions. Let me know if you have any more.

Thanks,
Scott

1 Like