Weblify Figma 플러그인 설치

1. 아무 Figma 파일이나 여세요.
2. Figma 하단 툴바에서 Actions 아이콘을 클릭하세요.
3. Plugins & Widgets 탭을 클릭해 Figma 플러그인만 표시되도록 결과를 필터링하세요.
4. 검색창에서 Weblify를 검색하세요.
5. 검색 결과에서 Weblify를 클릭하세요.
6. Save 버튼을 클릭해 Weblify 플러그인을 설치하세요.

Figma Organization에 속한 Figma 사용자는 승인된 플러그인만 설치할 수 있을 수도 있어요. 특정 Figma 플러그인을 설치할 수 없다면 회사의 Figma 조직 관리자에게 Weblify 플러그인 승인을 요청해 주세요.

Weblify Figma 플러그인 실행

Weblify Figma 플러그인을 설치했다면, Figma 파일에서 다음과 같이 플러그인을 실행하세요.

1. Figma 파일의 페이지 캔버스 아무 곳에서나 마우스 오른쪽 버튼을 클릭하세요.
2. Plugins ▶ 메뉴 항목 위에 마우스를 올리세요.
3. Saved plugins ▶ 메뉴 항목 위에 마우스를 올리세요.
4. Weblify 플러그인 메뉴 항목을 클릭하세요.

Figma 파일에서 Weblify 플러그인을 한 번 실행하고 나면, Figma 오른쪽 열(Plugin 소제목 아래)의 Weblify 아이콘을 클릭해 빠르게 다시 실행할 수 있어요.

Figma 파일에 Edit 권한이 있는 Figma 사용자만 해당 파일에서 Figma 플러그인을 실행할 수 있어요. View 권한만 있다면 그 파일에서는 Figma 플러그인을 실행할 수 없어요.

Weblify 설치 및 활성화

Figma 플러그인 설치 및 실행

Figma에서 Weblify를 실행하는 방법

Weblify Pro 활성화

Pro 라이선스 키를 구매하고 사용하는 방법

Weblify 사용하기

웹사이트 만들기

템플릿, 섹션, 요소로 편집 가능한 웹사이트 페이지 만들기

웹사이트 가져오기

무료 Chrome 확장 프로그램으로 페이지나 선택한 요소 복사하기

검사 및 내보내기

정적 HTML·CSS 웹사이트를 검증하고 다운로드하기

Figma 레이어 코드 검사

선택한 레이어로 HTML, Tailwind, React, Vue 코드 생성하기

자주 묻는 질문

Weblify 문제 해결

자주 발생하는 문제와 해결 방법

Weblify 보안

Weblify의 작동 방식 자세히 알아보기

영수증

이메일 영수증과 PDF 인보이스 찾기

결제

Pro 구독 관리

라이선스 시트 관리

라이선스 키에 연결된 Figma 사용자 관리

Weblify 무료와 Pro 비교

무료 기능과 Pro 기능 비교

Weblify 기능

• 템플릿, 섹션, 요소, 반응형 레이아웃으로 편집 가능한 웹사이트 페이지를 만들어요.
• 무료 Chrome 확장 프로그램으로 공개 웹사이트나 로그인이 필요한 웹사이트를 Figma에 복사해요.
• 생성된 웹사이트 결과물을 다양한 뷰포트 너비에서 미리 봐요.
• Weblify 페이지를 검사하고 정적 HTML·CSS 웹사이트로 내보내요.
• 선택한 Figma 레이어를 HTML/CSS, Tailwind, React, Vue 코드로 검사해요.
• 생성된 코드를 복사하거나, 이미지 에셋이 포함된 컴포넌트 ZIP을 다운로드해요.
• Figma Auto Layout, 줄 바꿈(wrap), 최소/최대 레이아웃 속성과 함께 작동해요.
• Figma Dev Mode에서 Weblify의 코드 검사 도구를 사용해요.