5 ms·

Show HN: I've made a Figma plugin that converts design to HTML with TailwindCSS

43 points by candylifter 5y ago

yawnxyz 5y ago
Wow that's super cool! I love how it just opens up codesandbox. Thanks for putting this together and sharing it – I just got into Tailwind and it's been so amazing!
- candylifter 5y ago
  You’re welcome! :)
tsejerome97 5y ago
This is quite nice. The problem I usually see with Figma converting to HTML plugins is that, there are too many nested divs! This might not be friendly for weak devices and is not that SEO friendly. If you are trying to solve this problem, it would be awesome!
- ImpressiveWebs 5y ago
  The nested divs themselves would not affect SEO. The problem may be caused by divs being used in place of proper semantic tags, which may have an effect. But even then, the affect would be minimal. And I’m not sure what you mean by certain “weak devices” being affected. I’ve been writing and blogging about HTML for 15 years and have never heard of that.
- candylifter 5y ago
  Thanks! Maybe one day as an optimization step. Right now focus is to generate code that is closest to the design as possible.
- john-doe 5y ago
  The problem is not divitis but the lack of semantic elements. For example, this would be a correct way to markup the quote in the screenshot: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ci...
Jefro118 5y ago
Nice work in that the output looks pretty close and it's super convenient to open it in CodeSandbox. Unfortunately it still has the same issue as all other plugins that try to do this in that the code is nothing like how it would be written by a developer and isn't responsive. Anyone reading this whose looking for the holy grail solution of Figma to code that's written like a developer wrote it, I'm working on this (should be ready soon!) and would love to talk to you - please email me on emile@pygma.app (note that the current public version isn't very good and suffers from the same problems as all the others).
- candylifter 5y ago
  It is responsive as long as you use auto layout. Every other code generation plugin in Figma community is either paid or doesn't work anymore. I've tried Pygma and I just couldn't get it to work, it crashes when I'm trying to use it. Also, in contrast to Pygma, you don't need an account to generate code :)
  - Jefro118 5y ago
    I'm still getting absolute position output with auto-layout - it seems to be a mix of both. Yes the current public version of Pygma is no good - I've just been heads down trying to get the complete version working and haven't really been attending to the current plugin.
    - candylifter 5y ago
      Yeah, that will happen if not every frame is in auto layout. Hats off to you if you manage to solve it for mixed modes with just flex layouts!

43 points by candylifter 5y ago

Wow that's super cool! I love how it just opens up codesandbox. Thanks for putting this together and sharing it – I just got into Tailwind and it's been so amazing!

candylifter 5y ago
You’re welcome! :)

tsejerome97 5y ago

This is quite nice. The problem I usually see with Figma converting to HTML plugins is that, there are too many nested divs! This might not be friendly for weak devices and is not that SEO friendly. If you are trying to solve this problem, it would be awesome!

ImpressiveWebs 5y ago
The nested divs themselves would not affect SEO. The problem may be caused by divs being used in place of proper semantic tags, which may have an effect. But even then, the affect would be minimal. And I’m not sure what you mean by certain “weak devices” being affected. I’ve been writing and blogging about HTML for 15 years and have never heard of that.
candylifter 5y ago
Thanks! Maybe one day as an optimization step. Right now focus is to generate code that is closest to the design as possible.
john-doe 5y ago
The problem is not divitis but the lack of semantic elements. For example, this would be a correct way to markup the quote in the screenshot: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ci...

Jefro118 5y ago

Nice work in that the output looks pretty close and it's super convenient to open it in CodeSandbox. Unfortunately it still has the same issue as all other plugins that try to do this in that the code is nothing like how it would be written by a developer and isn't responsive. Anyone reading this whose looking for the holy grail solution of Figma to code that's written like a developer wrote it, I'm working on this (should be ready soon!) and would love to talk to you - please email me on emile@pygma.app (note that the current public version isn't very good and suffers from the same problems as all the others).

candylifter 5y ago
It is responsive as long as you use auto layout. Every other code generation plugin in Figma community is either paid or doesn't work anymore. I've tried Pygma and I just couldn't get it to work, it crashes when I'm trying to use it. Also, in contrast to Pygma, you don't need an account to generate code :)
- Jefro118 5y ago
  I'm still getting absolute position output with auto-layout - it seems to be a mix of both. Yes the current public version of Pygma is no good - I've just been heads down trying to get the complete version working and haven't really been attending to the current plugin.
  - candylifter 5y ago
    Yeah, that will happen if not every frame is in auto layout. Hats off to you if you manage to solve it for mixed modes with just flex layouts!