search

bernaferrari / FigmaToCode

Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
https://www.figma.com/community/plugin/842128343887142055
GNU General Public License v3.0
3.66k stars 279 forks source link

Better Responsive Preview #116

Open davestewart opened 1 month ago

davestewart commented 1 month ago

Hey,

Just wondering what the purpose of the responsive preview is.

It doesn't seem to simulate anything that might be relatable (i.e. phones, screens, etc) in the real world that I can tell.

And it cannot simulate the result of any of the targets other than HTML.

Am I missing something?

bernaferrari commented 1 month ago

The idea is to show how your components are rendered in different screen sizes so you can see if your AutoLayout choices make sense. I don't know how to make it work with Tailwind, that's why it is html only.

davestewart commented 1 month ago

What would you think of something like this?

CleanShot 2024-07-13 at 15 46 19

It's giving me a bit more value whilst trying to get the wrap stuff working.

Would be cool to get it working with Tailwind (can pass the markup, just need to get the classes in there) and think it would make sense to hide for Swift and Flutter.

bernaferrari commented 1 month ago

Looks good. The idea overall was to have a way to see if layout is responsive before copying the code, without any interaction. Flutter and swiftui kind of follows the same recipe with some limitations, so I don't know.

On Sat, Jul 13, 2024, 11:58 Dave Stewart @.***> wrote:

What would you think of something like this?

CleanShot.2024-07-13.at.15.46.19.gif (view on web) https://github.com/user-attachments/assets/dffe20f6-549f-41bb-97dd-4c4e0cfa8212

It's giving me a bit more value whilst trying to get the wrap stuff working.

Would be cool to get it working with Tailwind, and think it would make sense to hide for Swift and Flutter.

— Reply to this email directly, view it on GitHub https://github.com/bernaferrari/FigmaToCode/issues/116#issuecomment-2226941977, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACVXFOPQ4PQ64WY2YJFL6DZME6BDAVCNFSM6AAAAABK2C7AISVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRWHE2DCOJXG4 . You are receiving this because you commented.Message ID: @.***>