Figmapedia
목록으로 돌아가기

[디자인>html로 변환하는 🧩플러그인]

안녕하세요!좋은 아침입니다😄 오늘은 내 디자인을 html로 변환해주는 플러그인들을 소개해 드립니다. 막상 쓰려고 보니 제대로 것들은 유료가 많더라는🥲 몇 가지 정리해 드릴테니 참고해보세요!

📍 Figma to HTML https://www.figma.com/community/plugin/851183094275736358/figma-to-html -리액트와 HTML 코드를 컨버팅

  • 코드 파일 다운로드 가능 -정확도: 중하

    • 📍 HtmlGenerator

    https://www.figma.com/community/plugin/753195897635985866/htmlgenerator

  • Hthml, css, font에 대한 코드제공
  • 프리뷰 제공
  • 정확도: 중하

    • 📍 Anima (유료, 월 $39)

    https://www.figma.com/community/plugin/857346721138427857/anima-figma-to-code-react-html-css-tailwind-mui-devmode-inspect-react-html-vue-css

  • html, css, style guide까지 확인 가능.
  • css 다운은 pro 요금제를 써야함($39)
  • 정확도: 상

    • 🍯 추가로 알면 좋은 팁

    👉🏻 html.to.design

    https://www.figma.com/community/plugin/1159123024924461424/html-to-design-by-divriots-import-websites-to-figma-designs-web-html-css 사이트 url을 입력하면 편집 가능한 디자인 형태로 불러오기 해줍니다. 오카방에도 몇 번 올라왔었는데 레퍼런스 쓸 때 참고해보세요!