Make Figma Designs Come Alive in Wappler

Showcase
#1

Hi everyone, following my short demo in today’s meet up where I took a Figma design and generated Wappler code for it. Here’s the video tutorials as promised.

Make Figma Designs Come Alive Using Impress and Wappler:

How to set up Impress (to use Figma designs in Wappler):

(If the video’s are blurry it’s because YouTube is still processing them)

You can play with the living design at:
https://taskmanager.impress.dev

If you want to go solo and try it yourself, then go to https://impress.dev

For those of you familiar with Figma, there’s a couple of rules you need to follow:

  1. Always use Frames and not Groups
  2. Always set your Frames to use AutoLayout
  3. Don’t use any of the items in these panels:
    image

IMPORTANT: if you stray from the above then your designs may not import correctly.

It’s in beta, so there’ll be bugs. Questions are welcome as always.

Huge thanks to DStudio who gave me their permission to use their design that inspired the Figma design used in these videos.The original design can be found here: https://dribbble.com/shots/20642095-Web-App-UI

Have a great weekend.

16 Likes
Figma for Wappler
Hi all! New here and have some questions
#2

Cool. Best of luck!

1 Like
#3

Very impressive @scottclee! :wink:

#4

That looks great and interesting @scottclee
I see that the impress app itself is built on Wappler. Are you using custom modules to connect to Git and Figma? Also, if you don’t mind sharing, what are you using for running tasks when pressing the play button?

We work with a Figma designer, and the setup for impress would mean a learning curve for someone who does not really know about HTML or Wappler. I too, as a Wappler dev, would like to know a bit more about how this would interact with existing projects/files. Do you have any docs in works?

#5

HI @sid, thanks for the great questions. Answers are below.

“I see that the impress app itself is built on Wappler. Are you using custom modules to connect to Git and Figma? Also, if you don’t mind sharing, what are you using for running tasks when pressing the play button?”

  • One answer will cover both these questions. When an impress job is submitted (by pressing play) an entry is written to a job queue (in the impress database). Another service (the impress engine) is monitoring the queue, which picks up jobs and runs them. Interaction with Figma and Git is managed via the impress engine, which is written in Python.

“We work with a Figma designer, and the setup for impress would mean a learning curve for someone who does not really know about HTML or Wappler.”

  • Your Figma designer doesn’t need to care about HTML. What they do need to do, is religiously use autolayout across their designs. By doing this, impress will translate the autolayout data into the corresponding Flexbox code in css. Your designer will not need to know anything beyond autolayout in Figma for this to work. Though, there are a few more Figma restrictions they need to adhere to as listed in the original post above. If your designer then wanted to add back-end “plumbing” to the translated designs then they would of course need to know how to use Wappler to do this.

“I too, as a Wappler dev, would like to know a bit more about how this would interact with existing projects/files.”

  • If your existing project files adhere to the rules mentioned above, then all you need to do to bring them into Wappler is add [desktop], [tablet] or [mobile] to the name of the Frames for each page of your app. i.e. if you have a page called ‘index’ in your design, then rename it to ‘index [desktop]’ and point impress at it for processing.

“Do you have any docs in works?”

  • I have no specific direction for the next docs or videos and am looking for steer from users such as yourself as to which ones I create next.
2 Likes
#6

Thanks for the reply.

I will have to check with the designer if they know about this. :sweat_smile:

They most certainly do not. Lot of complex things. But, I think if I even create like a secondary repo to just get the Wappler HTML part, a copy paste is definitely much faster than doing the complete design.

If I do get around to testing this out and using it, will definitely share my experience.

One more question, about Figma. Is there like a central theme/design-reference which can be built so that it converts to reusable CSS classes in impress? Or how does the CSS part work out?

#7

Hi @sid,

“One more question, about Figma. Is there like a central theme/design-reference which can be built so that it converts to reusable CSS classes in impress? Or how does the CSS part work out?”

  • Impress currently generates individual css elements for each Figma item. Combining these into reusable CSS classes is certainly something that could be done. However, with its current workflow, you can use a Design System in Figma across your design(s) and as long as any changes to the styling are kept within Figma then Impress will pick up those changes when you next run it.
1 Like
#8

A heads up to you all… Google has deemed the impress.dev website as Deceptive. It’s not completely clear why, but until I resolve it, it may be unaccessible.

If anyone has experience in resolving this typing of issue then advice would be very much appreciated.

#9

No warning here, all displaying fine. Had it in the past where an I.P we assigned was abused and we had inherited it along with its history. Swapped out the I.P for another and the warning cleared up.

#10

I’m getting the deception warning (both Chrome and Safari on Mac). Hopefully you can speak to Google and get it sorted.

#11

I’m believe this is how I resolved this on a newly created site as well. Mine was a new DO droplet, with a new ip address, so I got a new ip and haven’t seen since.

#12

We recently purchased an additional 20 IP’s from our provider and the majority have terrible history. Thankfully our account manager looked in to the IP pool and manually selected replacements for us. Is a real problem and especially with regards to mail server reputation. Unfortunately I don’t think its a problem that most are aware of, and thus end up chasing a multitude of false leads in trying to rectify issues such as that being suffered by @scottclee.

#13

Hmmm, I suspect this might be the cause. I’ll try switching out the IP and hope I get a safer one!

#14

Hi all, I’m pleased to say that impress.dev has passed the Google security review and is now functioning as normal!

Not exactly sure what happened as I’ve managed to stick with the IP address I previously had. I did however, do a little cleanup on the site to remove some unnecessary includes, so maybe this helped.

Enjoy your Sunday!

#15

Well played Scott. I think Google has their own list of ‘dodgy’ sites which they either establish themselves (manually or automatically) or responding to someone else flagging it to them. I reckon their automatic systems wrongly set it as dodgy and you contacted them has allowed them to verify it’s all fine.

Glad it’s working again and even better that you were able to keep the IP address otherwise you’d be forever worried it might happen again.

1 Like
#16

Hey Scott, this looks pretty impressive.

If this works well (as in, not too many constraints) this might be a really big upgrade to our workflow.

I’ll try this out soon.

What are your plans?
Is this something you want to build out and start charging for soon? Or is it a small side project

#17

Hi @karh, thanks for great feedback. My intention is to build it into a chargeable product (with a free usage tier always available). Right now it’s still in beta and I’m looking for early adopters to give me feedback and to help harden the platform.

I’ll be putting out a new release in the next week and will be giving a demo at the next Wappler monthly MeetUp on Friday 7th June.

If you sign up for an account on https://impress.dev then you’ll get also added to a distribution email through which I’ll provide information about new releases.

1 Like
#18

Sounds good! I’ll help you out with some feedback.

How do you want it, email/dm?

#19

Hi @karh,

Feedback would be awesome. I’ll send you my email address in a dm.

Thanks!
Scott

#20

This a game changer! Well done. Big fan of this