Back to Plugins
HTML to Figma (OPADOG)

HTML to Figma (OPADOG)

오파독 HTML to Figma (무제한 무료)

Plugin Preview

HTML to Figma (OPADOG) preview

About this plugin

HTML 코드나 파일을 붙여넣으면 실제 브라우저로 렌더링한 뒤, Figma에서 그대로 편집할 수 있는 레이어로 변환합니다.■ 무엇이 만들어지나요· 텍스트 → 진짜 텍스트 레이어 (폰트·굵기·정렬까지 그대로)· 인라인 SVG, .svg 이미지 → 편집 가능한 벡터 패스· img·background-image → 이미지 레이어· 배경·그라디언트·테두리·라운드·그림자·블러 → Figma 네이티브 속성■ 사용법1. 코드를 붙여넣거나 HTML 파일을 선택합니다.2. 렌더 폭을 디자인 기준(1440 / 1080 / 375 등)으로 맞춥니다.3. 변환 버튼을 누릅니다.이미지가 포함된 작업물은 폴더째 선택하면 상대경로가 자동으로 연결됩니다.■ 특징· 횟수 제한 없이 무료입니다.· 변환은 전부 사용자 컴퓨터에서 처리되며, 서버로 전송되는 데이터가 없습니다.· 한 줄 텍스트는 자동 폭으로 들어가 폰트가 달라져도 줄바꿈이 깨지지 않습니다.· Pretendard 등 Figma에 없는 웹폰트는 Noto Sans KR로 자동 치환됩니다.■ 알아두실 점· ::before / ::after 가상요소, clip-path는 지원하지 않습니다.· JS로 그려지는 화면은 '스크립트 실행 허용' 옵션을 켜 주세요.

Plugin Details

Version1
CreatedSeptember 15, 2026
Last UpdatedSeptember 16, 2026
Categoryediting & effects plugins
Creator김서영
Stats30 installs, 1 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Network Access:

    The plugin renders user-supplied HTML. That markup can reference stylesheets, images and web fonts on any domain, so the list cannot be known in advance. Nothing is uploaded — the plugin only loads resources the user's own markup references, and all conversion happens locally.

  • Editor Types:
    figma
  • Allowed Domains:
    • *