HTML to Figma (OPADOG)
오파독 HTML to Figma (무제한 무료)
Plugin 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
| Version | 1 |
|---|---|
| Created | September 15, 2026 |
| Last Updated | September 16, 2026 |
| Category | editing & effects plugins |
| Creator | 김서영 |
| Stats | 30 installs, 1 likes |
| Pricing | Free |
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:
- *
More Like This
Discover other plugins in the editing & effects plugins category.