The style of alll the HTML elements is position: absolute

[tianxiuali]

This is my Figma prototype:

https://www.figma.com/file/PhoprUwbK2cJM2BIjyLIKk/Edu-Conference?type=design&mode=design&t=SePaRDEaaMqJhrbS-0

I want to generate HTML code, and I got like this:

The style of alll the HTML elements is like this: position: absolute; top: XXXpx; left: XXXpx;.

It is not standard layout. It's hard to extend.

How can I get better code, like flex, grid or just normal layout?

[bernaferrari]

Have you tried using AutoLayout in Figma? On 9 Jan 2024 09:02 -0300, Chengxin @.***>, wrote:

This is my Figma prototype: https://www.figma.com/file/PhoprUwbK2cJM2BIjyLIKk/Edu-Conference?type=design&mode=design&t=SePaRDEaaMqJhrbS-0 I want to generate HTML code, and I got like this: image.png (view on web) The style of alll the HTML elements is like this: position: absolute; top: XXXpx; left: XXXpx;. It is not standard layout. It's hard to extend. How can I get better code, like flex, grid or just normal layout? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.***>

[bernaferrari]

Try something like this:

https://www.figma.com/file/1R7vnw6IhsdZk0J7JX7YMy/Untitled?type=design&node-id=1%3A49&mode=design&t=7euK5G9lCH0GUNrT-1

You can use like one or two items, then you make a function in React/whatever and replicate them only changing the data. On 9 Jan 2024 10:41 -0300, Bernardo Ferrari @.***>, wrote:

Have you tried using AutoLayout in Figma? On 9 Jan 2024 09:02 -0300, Chengxin @.***>, wrote:

This is my Figma prototype: https://www.figma.com/file/PhoprUwbK2cJM2BIjyLIKk/Edu-Conference?type=design&mode=design&t=SePaRDEaaMqJhrbS-0 I want to generate HTML code, and I got like this: image.png (view on web) The style of alll the HTML elements is like this: position: absolute; top: XXXpx; left: XXXpx;. It is not standard layout. It's hard to extend. How can I get better code, like flex, grid or just normal layout? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.***>

[tianxiuali]

Try something like this: https://www.figma.com/file/1R7vnw6IhsdZk0J7JX7YMy/Untitled?type=design&node-id=1%3A49&mode=design&t=7euK5G9lCH0GUNrT-1 You can use like one or two items, then you make a function in React/whatever and replicate them only changing the data. … On 9 Jan 2024 10:41 -0300, Bernardo Ferrari @.>, wrote: Have you tried using AutoLayout in Figma? On 9 Jan 2024 09:02 -0300, Chengxin @.>, wrote: > This is my Figma prototype: > https://www.figma.com/file/PhoprUwbK2cJM2BIjyLIKk/Edu-Conference?type=design&mode=design&t=SePaRDEaaMqJhrbS-0 > I want to generate HTML code, and I got like this: > image.png (view on web) > The style of alll the HTML elements is like this: position: absolute; top: XXXpx; left: XXXpx;. > It is not standard layout. It's hard to extend. > How can I get better code, like flex, grid or just normal layout? > — > Reply to this email directly, view it on GitHub, or unsubscribe. > You are receiving this because you are subscribed to this thread.Message ID: @.***>

Thanks! It's really better than before. But it's still written in the inline-style. Is that supported written in classNames?

[bernaferrari]

I'm not sure I understand your question, but you could select a single item component, get the react code, then select everything, add some data, and use the item.

[tianxiuali]

I generate the code in the Figma you provide:

https://www.figma.com/file/1R7vnw6IhsdZk0J7JX7YMy/Untitled?node-id=1%3A49&mode=dev

And the code looks like:

Most of style is written in flex layout. That's great.

But my point is, it's still inlint-style. How to change it to class style? Just like HTML+CSS.

[bernaferrari]

I still don't support that :(

I would use Tailwind because it is more beautiful and easier

On Wed, Jan 10, 2024, 00:25 Chengxin @.***> wrote:

I generate the code in the Figma you provide:

https://www.figma.com/file/1R7vnw6IhsdZk0J7JX7YMy/Untitled?node-id=1%3A49&mode=dev http://url

And the code looks like:

image.png (view on web) https://github.com/bernaferrari/FigmaToCode/assets/17540361/9e3a8e85-1fe0-4395-9712-3f229913ae07

Most of style is written in flex layout. That's great.

But my point is, it's still inlint-style. How to change it to class style? Just like HTML+CSS.

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

[tianxiuali]

OK, Thanks!