Figma 통합을 위한 Webflow 플러그인

Figma 파일 살펴보기 Hero 및 navbar 구조를 자세히 살펴보십시오.

중대한: 당사 고객 지원팀은 플러그인에 대해 직접적인 지원을 제공할 수 없습니다. 모든 문의 사항이나 제안 사항은 다음 담당자에게 문의하시기 바랍니다. Webflow 연구소 커뮤니티 전체 Webflow 커뮤니티(직원 포함)가 추가 지원과 자원을 제공할 수 있는 곳입니다.

Figma에서 초기 사이트 청사진을 생성한 다음 이를 Webflow 사이트 구축을 위한 로드맵으로 활용하시겠습니까? 이제 각 요소를 힘들게 다시 만들 필요 없이 Figma 디자인을 Webflow에 원활하게 붙여넣을 수 있습니다. 또한 Figma to Webflow 앱을 활용하여 Figma 구성 요소 및 변수를 Webflow 사이트와 동기화하여 간단한 클릭만으로 즉시 업데이트할 수 있습니다.

메모: Figma to Webflow 플러그인은 내부 크리에이티브 팀인 Webflow Labs에서 개발하고 출시했습니다. Webflow Labs에서 소개한 제품은 표준 채널을 통한 지원이 제한되어 있으며 실험적으로 설계되었으므로 기능이 발전할 수 있습니다. 플러그인은 언제든지 제거될 수도 있습니다. 귀하의 재량에 따라 사용하십시오. 우리는 당신을 간절히 기다리고 있습니다 여기에서 생각, 의견, 피드백을 확인하세요..

이 튜토리얼에서는 다음에 대한 통찰력을 얻을 수 있습니다.

1. Figma에서 Webflow 플러그인에 대한 이해
2. Figma를 Webflow 플러그인에 설치하고 인증하는 과정
3. Figma를 Webflow 플러그인으로 활용하는 방법
4. 플러그인 기능 이해
5. Figma에서 Webflow 플러그인 제거
6. 플러그인 문제 해결 가이드
7. 플러그인에 대한 피드백 공유

Figma to Webflow 플러그인의 기능은 무엇입니까?

이 플러그인은 Figma 레이어를 해당 HTML 및 CSS 코드로 변환합니다. 이는 사이트를 시각적으로 디자인할 때 Webflow에서 생성된 코드입니다.

플러그인에서 지원하는 현재 번역은 다음과 같습니다.

• 자동 레이아웃
• 타이포그래피 스타일
• 테두리 스타일
• 그림자 스타일
• 배경 이미지 및 선형 그라데이션
• 벡터 및 모양을 SVG로 변환
• 이미지
• 불투명
• 절대 위치 지정

메모: Figma는 전용 웹 제작 도구가 아니기 때문에 일부 번역이 지원되지 않습니다.

메모: Figma to Webflow 플러그인은 현재 Safari 브라우저의 Figma와 호환되지 않습니다. Chrome 또는 Figma 데스크톱 앱을 활용하는 것이 좋습니다.

Figma를 Webflow 플러그인에 설치하고 인증하는 방법

Figma에서 Webflow 플러그인을 사용하려면 먼저 다음을 수행해야 합니다. Figma 계정 등록. 완료되면 플러그인 설치를 위해 다음 단계를 따르십시오.

1. 방문하다 Figma에서 Webflow 플러그인 페이지로
2. 클릭 다음에서 열다… 새로운 Figma 디자인 파일에 액세스하고 플러그인 모달 창을 열려면
3. 선택하다 달리다 플러그인 모달 창 내에서
4. 딸깍 하는 소리 계정 연결

아직 Webflow에 로그인하지 않은 경우 Webflow 자격 증명을 사용하여 로그인하라는 메시지를 표시하는 새 브라우저 탭이 열립니다. 그러면 Webflow 계정으로 플러그인을 승인하고 해당 기능에 액세스할 수 있는 앱 승인 페이지로 이동하게 됩니다.

플러그인을 승인하려는 모든 사이트와 작업공간(즉, Figma 디자인을 붙여넣으려는 모든 사이트)을 선택하세요. 마지막으로 다음을 클릭하세요. 앱 승인 앱 인증 페이지에서

중대한: Figma에서 Webflow로 설계를 정확하게 전송하려면 올바른 사이트를 선택했는지 확인하십시오. 특정 사이트에 대한 플러그인 승인을 잊어버린 경우 지침에 따라 새 사이트에 대한 플러그인을 승인하세요.

특정 사이트에 대한 플러그인을 승인하면 해당 사이트의 설정에서만 플러그인을 제거할 수 있다는 점을 기억하세요. 반면에 작업공간에 대한 플러그인을 승인하면 해당 플러그인이 귀하의 계정에서 제거됩니다. 작업공간 설정. 플러그인 제거에 대한 자세한 내용을 확인할 수 있습니다.

메모: 이 애플리케이션을 승인함으로써 귀하는 다음 사항에 동의하게 됩니다. Webflow 연구소 서비스 약관 그리고 개인 정보 정책.

플러그인 인증에서 사이트 추가 또는 제거

새 사이트에 플러그인 승인을 추가하거나 기존 사이트에서 플러그인 승인을 취소하려면 다음 단계를 따르세요.

1. 플러그인 모달 창에서 "햄버거 메뉴"에 액세스합니다.
2. 선택하다 로그 아웃
3. 플러그인 모달의 지침을 따라 진행하세요.
4. 딸깍 하는 소리 계정 연결
5. 플러그인 인증을 추가하거나 제거하려는 사이트를 선택하세요

메모: 플러그인에서 로그아웃하면 이전에 승인된 모든 사이트 및 작업공간에서 해당 플러그인의 승인이 취소됩니다. 플러그인 사용을 재개하려면 사이트 또는 작업공간에 대한 플러그인을 다시 인증하세요.

Figma to Webflow 플러그인 활용

플러그인 사용을 시작하려면 Figma로 돌아가서 다음을 클릭하세요. 시작하자 모달 창에서. 여기에서 다음을 수행할 수 있습니다.

• Figma에서 처음부터 디자인 시작
• Webflow 플러그인 레이아웃에 Figma 사용
• Webflow 플러그인 구조에 Figma 활용
• 복사-붙여넣기를 사용하여 텍스트 및 색상 스타일 전송

Figma에서 처음부터 디자인하기

Figma에서는 처음부터 디자인을 만들 수 있습니다(즉, 플러그인의 사전 구축된 레이아웃이나 구조를 활용하지 않고). 자동 레이아웃을 활용하세요. 반응형 디자인의 경우 포장하다 그리고 최소/최대 너비 상위 프레임에. 반응형 Figma 디자인 제작에 대한 더 많은 통찰력을 찾을 수 있습니다. 여기.

중첩된 프레임을 포함한 모든 프레임이 자동 레이아웃을 활용하는지 확인하세요. 추가적으로 필요한 경우,별도의 구성 요소 인스턴스 Webflow에서 설계를 수정할 수 있는지 확인하세요. 버튼을 눌러 인스턴스를 빠르게 분리할 수 있습니다. 옵션 + 명령 + 비 (Mac의 경우) 또는 제어 + 비 (윈도우즈에서).

전문가를 위한 팁: 활용하실 수 있습니다 옵션 + 명령 + 씨 (Mac의 경우) 또는 제어 + Alt + 씨 (Windows의 경우) 레이어 속성을 복제한 다음 적용합니다. 옵션 + 명령 + V (Mac의 경우) 또는 제어 + Alt + V (Windows의 경우) 선택한 다른 레이어로 전송합니다. 이 단축키는 채우기, 획 및 텍스트 속성을 복제하는 데 유용합니다.

자동 레이아웃을 사용하여 디자인한 후에는 플러그인을 사용하여 이를 Webflow로 전송할 수 있습니다.

1. 선택하다 Figma 캔버스의 디자인(모든 레이어 포함)
2. 디자인을 삽입하고 싶은 Webflow 사이트를 선택하세요. Webflow 사이트 선택 플러그인 모달 창의 드롭다운
3. 딸깍 하는 소리 Webflow에 복사 Figma에서 Webflow 플러그인 모달 창으로
4. 플러그인에서 메시지가 표시되면 Webflow로 복사를 확인하세요.
5. 별도의 창에서 Webflow Designer를 실행하세요.
6. 디자인을 Webflow Designer 캔버스에 붙여넣기

알림: Webflow 사이트는 다음에서 한 번만 선택하면 됩니다. Webflow 사이트 선택 쓰러지 다. 그 후 Figma 파일의 다양한 디자인을 복제하여 Webflow에 붙여넣을 수 있습니다.

Figma를 Webflow 플러그인 레이아웃에 활용

플러그인은 탐색, 주요 섹션, 양식, 바닥글 및 기타 다양한 공통 디자인 요소에 대한 디자인 프로세스를 가속화하기 위해 사전 디자인된 반응형 레이아웃을 제공합니다.

중요한: 플러그인은 자동 레이아웃 프레임을 Webflow의 디자이너가 해석할 수 있는 형식으로 변환하여 작동합니다. Webflow는 웹 개발을 지향하기 때문에 우리는 독점적으로 지원할 수 있습니다. 프레임 자동 레이아웃을 사용하는 것입니다.

Figma에서 Webflow로 레이아웃을 복제하려면:

1. 다음으로 이동하세요. 복사 붙여 넣기 플러그인 모달 창에서 탭을 선택하고 선택하세요. 레이아웃 드롭다운에서
2. 선택하세요 공들여 나열한 것
3. 선택하다 Figma 캔버스의 레이아웃
4. 레이아웃을 삽입하려는 Webflow 사이트를 다음에서 선택하세요. Webflow 사이트 선택 플러그인 모달 창의 드롭다운
5. 딸깍 하는 소리 Webflow에 복사 플러그인 모달 창에서
6. 플러그인에서 메시지가 표시되면 Webflow로 복사를 확인하세요.
7. 별도의 창에서 Webflow Designer를 실행하세요.
8. 레이아웃을 Webflow Designer 캔버스에 붙여넣기

Webflow 사이트는 다음에서 한 번만 선택하면 됩니다. Webflow 사이트 선택 쓰러지 다. 그런 다음 Figma 파일의 여러 레이아웃을 복제하여 Webflow에 붙여넣을 수 있습니다.

알림: 레이아웃 내의 특정 요소만이 아니라 전체 레이아웃을 선택해야 합니다. 전체 레이아웃을 선택하지 않으면 복사 문제가 발생하여 Webflow Designer에 붙여넣지 못할 수 있습니다.

Webflow 플러그인 구조에 Figma 사용

플러그인에는 디자인을 위한 프레임워크를 제공하는 사전 디자인된 구조도 포함되어 있습니다. Figma에서는 이러한 구조가 비어 있지만 Webflow에서는 응답성을 유지하므로 콘텐츠 컨테이너로 사용할 수 있습니다. 해당 항목과 해당 콘텐츠를 Webflow에 붙여넣으면 구조는 중단점 전반에 걸쳐 응답성을 유지합니다.

Figma에서 Webflow로 구조를 복제하려면:

1. 액세스 복사 붙여 넣기 플러그인 모달 창에서 탭을 선택하고 구조 드롭다운에서
2. 선택하세요 구조
3. 선택하다 Figma 캔버스의 구조
4. 구조를 삽입하려는 Webflow 사이트를 다음에서 선택하세요. Webflow 사이트 선택 플러그인 모달 창의 드롭다운
5. 딸깍 하는 소리 Webflow에 복사 플러그인 모달 창에서
6. 플러그인에서 메시지가 표시되면 Webflow로 복사를 확인하세요.
7. 별도의 창에서 Webflow Designer를 실행하세요.
8. 구조를 Webflow Designer 캔버스에 붙여넣기

Webflow 사이트는 다음에서 한 번만 선택하면 됩니다. Webflow 사이트 선택 쓰러지 다. 그런 다음 Figma 파일의 여러 구조를 복제하여 Webflow에 붙여넣을 수 있습니다.

알림: 구조 내의 특정 요소만이 아니라 전체 구조를 선택해야 합니다. 전체 구조를 선택하지 않으면 복사 문제가 발생하여 이를 Webflow Designer에 붙여넣지 못할 수 있습니다.

텍스트 및 색상 스타일을 복제하여 붙여넣습니다.

Figma 파일에 텍스트 및 색상 스타일이 있는 경우 사이트 디자인 과정에서 쉽게 액세스할 수 있도록 이를 Webflow에 복제할 수 있습니다. 텍스트와 색상 스타일을 정리하려면 Webflow에 스타일 가이드 페이지를 구축하는 것이 좋습니다. 개별 텍스트 스타일, 색상 스타일 또는 모든 텍스트와 색상 스타일을 동시에 복제할 수 있습니다.

복제에 사용할 수 있는 텍스트 및 색상 스타일은 다음과 같습니다.

• 현지화된 Figma 텍스트 및 색상 스타일
• Figma 라이브러리의 텍스트 및 색상 스타일 (현재 Figma 페이지에 적용된 경우)

텍스트 및 색상 스타일은 사전 정의된 "스타일 가이드" 템플릿을 사용하여 Webflow에 복제됩니다.

텍스트 스타일

Figma에서 텍스트 스타일을 복사하려면:

1. '에 액세스하세요.햄버거 메뉴" 플러그인 모달 창에서
2. 선택하다 텍스트 스타일 복사
3. Webflow 사이트에 지정된 스타일 매뉴얼 페이지(설립된 경우) 또는 Webflow 사이트의 다른 페이지로 이동합니다.
4. 때리다 제어 + V (Mac의 경우) 또는 명령 + V (Windows의 경우) 로컬 텍스트 스타일을 삽입하려면

텍스트 스타일은 미리 정의된 "스타일 가이드" 템플릿을 사용하여 Webflow에 삽입됩니다. 텍스트 스타일은 텍스트 스타일 부분. 각 텍스트 스타일은 Figma의 텍스트 스타일에서 지정된 이름을 가진 클래스를 얻습니다(예: Figma에서 텍스트 스타일을 "Tahoma Bold"로 지정한 경우 해당 Webflow 클래스 이름은 "Tahoma Bold"가 됩니다).

색상 스타일

Figma에서 색상 스타일을 복제하려면:

1. “를 클릭하세요.햄버거 메뉴" 플러그인 모달 창에서
2. 선택하다 색상 스타일 복사
3. Webflow 사이트에서 지정된 스타일 가이드 페이지(만든 경우) 또는 Webflow 사이트의 다른 페이지로 이동하세요.
4. 때리다 제어 + V (Mac의 경우) 또는 명령 + V (Windows의 경우) 로컬 색상 스타일을 붙여넣습니다.

색상 스타일은 사전 설정된 "스타일 가이드" 템플릿을 사용하여 Webflow에 붙여넣어집니다. 색상 스타일은 색상 스타일 부분. 모든 색상 스타일에는 색상 견본으로 표시하는 클래스와 Figma의 색상 스타일에서 지정된 이름이 할당됩니다(예: Figma에서 색상 스타일의 이름이 "Pink"인 경우 Webflow 클래스 이름은 "Color Swatch / Pink"입니다. "). 색상의 16진수 코드는 Webflow 캔버스의 로컬 스타일 옆에서 보거나 스타일 패널 > 배경으로 이동한 다음 색상에 인접한 색상 견본을 선택하여 볼 수 있습니다.

이러한 색상 스타일은 Webflow 색상 변수로 자동 생성되지 않으므로 이러한 변수를 수동으로 생성하여 사이트 전체에 색상을 적용하는 것이 좋습니다.

모든 텍스트와 색상 스타일을 동시에 복제하는 방법

복제하려면 모두 Figma의 텍스트 및 색상 스타일, 

1. “를 클릭하세요.햄버거 메뉴" 플러그인 모달 창에서
2. 선택하다 모든 텍스트 및 색상 스타일 복사
3. Webflow 사이트에서 지정된 스타일 가이드 페이지(만든 경우) 또는 Webflow 사이트의 다른 페이지로 이동하세요.
4. 때리다 제어 + V (Mac의 경우) 또는 명령 + V (Windows의 경우) 로컬 스타일을 삽입하려면

스타일은 사전 설정된 "스타일 가이드" 템플릿을 사용하여 Webflow에 삽입됩니다.

플러그인 작동

Figma에서 Webflow 플러그인을 사용할 때 다음 측면에서 몇 가지 주요 요소를 고려해야 합니다.

• 자동 레이아웃
• 특수 글꼴
• 카테고리
• 결합 수업
• 제도법
• HTML 요소
• 배경
• 적응성
• 향상된 플러그인 기능

또한 Figma에서 Webflow까지 구성요소와 변수를 원활하게 통합하려면 Figma to Webflow App을 활용하세요.

자동 레이아웃

다음을 활용하여 레이어를 복제하고 붙여넣기만 할 수 있습니다. 자동 레이아웃. 이는 Figma에서 Webflow로 복사할 때 최적의 변환을 보장합니다.

메모: Figma 디자인에 자동 레이아웃이 없는 레이어가 있는 경우, 레이어를 Webflow에 붙여넣기 전에 레이어를 자동 레이아웃으로 변환하라는 알림이 플러그인 모달에 표시됩니다. 모달에서 노란색 주의 삼각형을 클릭하면 자동 레이아웃으로 변환해야 하는 모든 레이어를 선택할 수 있습니다.

특수 글꼴

Figma 디자인에 사용자 정의 글꼴이 사용된 경우 올바른 글꼴 전송을 위해 Figma 디자인을 전송하기 전에 해당 글꼴을 Webflow 사이트에 업로드하십시오. Webflow에 사용자 정의 글꼴을 추가하지 않으면 전송 중에 해당 글꼴이 손실될 수 있습니다. Webflow 사이트에 사용자 정의 글꼴을 업로드하는 과정을 알아보세요.

묘사와 상징

Figma는 묘사, 기호 및 벡터 로고를 생성할 수 있는 벡터 소프트웨어입니다. 대부분의 묘사는 Figma 및 기타 벡터 도구에 고유한 다양한 벡터 레이어로 구성되어 있어 플러그인이 처리하기 어렵고 종종 시간 초과 오류가 발생합니다.

만일 거기에 벡터 레이어 디자인에서 플러그인은 "벡터 래퍼"라는 새로운 벡터 상위 레이어를 자동으로 생성합니다. 이 래퍼는 SVG 내보내기를 위해 벡터 레이어를 캡슐화합니다. 복사 프로세스 후 플러그인은 Figma에서 이 레이어를 제거하지만 Webflow에서는 유지됩니다.

Figma를 활용하신다면 구성 요소 벡터 레이어 내에서 다음을 수행해야 할 수도 있습니다. 인스턴스 분리 레이어를 복제하기 전에 필요한 경우 플러그인에서 인스턴스를 분리하라는 메시지를 표시합니다.

인스턴스 분리는 다음을 눌러 신속하게 수행할 수 있습니다. 옵션 + 명령 + 비 (Mac의 경우) 또는 제어 + 비 (윈도우즈에서).

카테고리

Figma에서 Webflow로 디자인을 복사하면 모든 Figma 레이어 이름이 클래스로 변환됩니다.

어울리는 이름, 다양한 스타일

두 개의 Figma 레이어가 같은이름 하지만 가지고 다니세요 대조되는 스타일, 플러그인은 클래스 이름에 숫자를 추가하여 해당 클래스의 이름을 자동으로 바꿉니다. 예를 들어 Figma의 두 레이어 이름이 서로 다른 스타일로 "컨테이너"로 지정된 경우 플러그인은 이를 Webflow Designer 캔버스에 붙여넣을 때 한 레이어에 "컨테이너" 클래스를 할당하고 두 번째 레이어에 "컨테이너 2" 클래스를 할당합니다.

마찬가지로 사이트에 기존 클래스 이름이 있는 Webflow 캔버스에 레이어를 붙여넣으면 클래스 이름이 증가된 숫자로 표시됩니다. 예를 들어, 사이트에 이미 "Button" 클래스가 있고 "Button"이라는 Figma 레이어를 Webflow Designer 캔버스에 붙여넣은 경우 레이어 클래스는 선택기 필드에서 "Button 2"로 표시됩니다. 또는 기존 Webflow 클래스 스타일을 적용하여 Figma 레이어를 Webflow에 붙여넣거나 기존 Webflow 클래스 스타일을 Figma 레이어 스타일로 변경할 수 있습니다.

전문가 팁: Webflow에 동일한 레이아웃을 자주 복사할 경우 바람직하지 않은 클래스 과잉이 발생하여 웹 사이트 성능이 저하될 수 있습니다. 깔끔한 클래스 구조를 유지하려면("버튼 234986"과 같은 어수선함을 피하려면) Webflow 사이트에서 불필요한 레이아웃이나 요소를 제거하고 스타일 관리자에서 스타일을 정리하세요. 이렇게 하면 클래스 과부하를 일으키지 않고 Figma 디자인을 Webflow에 붙여넣을 수 있습니다.

Figma와 Webflow 간 디자인 교환

Figma 레이어와 Webflow 클래스 간에 스타일을 공유하기 위한 2개의 키보드 단축키가 있습니다.

• 명령 + 옮기다 + V (Mac의 경우) 또는  제어 + 옮기다 + V (Windows) - 이 특정 단축키를 사용하면 Figma 레이어를 붙여넣고 기존 Webflow 클래스를 사용하여 스타일을 적용할 수 있습니다. 계속 진행하려면 Figma에서 레이어를 복사한 다음 다음을 활용하여 Webflow에 붙여넣기만 하면 됩니다. 명령 + 옮기다 + V (Mac의 경우) 또는 제어 + 옮기다 + V (윈도우즈에서). 그러면 기존 클래스의 스타일이 이미 적용된 상태로 레이어가 Webflow에 붙여넣어집니다. 예를 들어 Figma에 빨간색 배경의 "Button" 레이어가 있지만 Webflow의 "Button" 클래스에 녹색 배경이 있는 경우 "Button" 레이어는 녹색 배경의 Webflow에 붙여넣어집니다.
• 명령 + 옵션 + V (Mac의 경우) 또는 제어 + 옵션 + V (Windows의 경우) — 이 특정 단축키를 사용하면 Figma 레이어를 붙여넣고 기존 Webflow 클래스를 Figma의 스타일과 일치하도록 조정할 수 있습니다. 이 프로세스에는 Figma의 레이어를 복사하고 다음을 사용하여 Webflow에 붙여넣는 작업이 포함됩니다. 명령 + 옵션 + V (Mac의 경우) 또는 제어 + 옵션 + V (윈도우즈에서). 이후 Webflow 클래스의 기존 스타일이 Figma 레이어의 스타일에 맞게 수정됩니다. 예를 들어, Figma에 빨간색 배경의 "Button" 레이어가 있고 Webflow의 일치하는 "Button" 클래스가 녹색 배경을 가지고 있는 경우 Webflow의 "Button" 클래스의 배경색은 빨간색으로 전환됩니다.

동일한 스타일, 독특한 클래스

두 개의 Figma 레이어 또는 Figma 레이어와 Webflow 요소가 동일한 스타일을 공유하지만 클래스 이름이 다른 경우 플러그인은 해당 클래스를 통합합니다. 이 작업은 Webflow에서 중복 클래스 인스턴스 수를 줄이는 데 도움이 됩니다.

예를 들어, Figma에 동일한 CSS 스타일을 공유하지만 이름이 다른 2개의 레이어가 있는 경우(예: 하나의 제목은 "Navbar"이고 다른 하나의 레이블은 "Cool navbar"), Webflow는 동일한 "Navbar" 클래스를 할당하여 이를 간소화합니다. 둘 다 Webflow 캔버스에 붙여넣은 후입니다.

결합 수업

추가 기능은 슬래시 뒤에 클래스 이름을 추가하여 Figma 레이어에 결합 클래스를 생성하는 것입니다(예: "기본 클래스/콤보 클래스/두 번째 콤보 클래스").

일러스트레이션

이미지가 포함된 디자인을 붙여넣으면 해당 이미지가 Webflow의 자산 패널에 업로드됩니다. 다음에서 적절한 사이트를 선택했는지 확인하십시오. Webflow 사이트 선택 플러그인 모달 창 내의 드롭다운; 그렇지 않으면 이미지가 자산 패널에 업로드되지 않을 수 있습니다.

메모: 자산 패널에 업로드된 이미지를 보려면 Webflow 디자이너를 새로 고쳐야 할 수도 있습니다.

마크업 요소

플러그인은 지정된 기준에 따라 각 Figma 레이어에 적합한 HTML 태그를 추론하려고 노력합니다.

• 앵커 태그: 레이어 이름에 &quot;버튼&quot;이 포함되어 있으면 레이어가 HTML 앵커 태그로 변환됩니다(예: &quot;<a>&quot;)
• 단락 태그: 레이어 이름에 &quot;설명&quot;, &quot;텍스트&quot;, &quot;단락&quot;이 포함된 경우 레이어를 HTML 단락 태그(예: &quot;<p>&quot;)
• 제목 태그: 레이어 이름에 &quot;heading&quot;이 통합되면 HTML H1 태그로 변경됩니다(예: &quot;<h1>&quot;)

그러나 플러그인에서 사용되는 HTML 태그를 변경하려는 경우 수동 구성이 가능합니다.

HTML 태그 수동 결정

레이어 이름을 바꾸고 대괄호로 묶인 태그 이름과 하이픈 2개를 추가하여 각 Figma 레이어에 대한 HTML 태그를 지정할 수 있습니다(예: “[H1]–레이어 이름”).

메모: 태그의 첫 글자가 대문자인지 확인하세요.

플러그인은 다음 HTML 태그를 수용합니다.

1. H1
2. H2
3. H3
4. H4
5. H5
6. H6
7. 피
8. ㅏ
9. 사업부

배경 옵션

플러그인은 자동 레이아웃 레이어 및 텍스트 레이어에 대해 단색, 선형 및 이미지 배경을 지원합니다.

메모: 플러그인을 사용하여 복사하여 붙여넣은 후 배경 이미지가 Webflow에 표시되지 않는 경우 디자이너 페이지를 새로 고치시기 바랍니다.

적응성

또한 Figma 레이어가 수직 스택으로 전환되는 중단점을 유연하게 결정하여 디자인의 응답성을 더 효과적으로 제어할 수 있습니다. 플러그인은 선택할 수 있는 4가지 중단점 대안을 제공합니다.

• 태블릿 — 레이어가 태블릿 중단점에서 수직 스택으로 전환됩니다(폭 991px ~ 767px 범위).
• 모바일 환경 — 레이어는 모바일 가로 중단점(너비 767px~478px)에서 수직 스택으로 변환됩니다.
• 모바일 초상화 — 레이어는 모바일 세로 중단점(478px에서 0px 너비 범위)에서 수직 스택으로 전환됩니다.
• 응답하지 않음 — 레이어는 뷰포트 너비에 관계없이 수평 스택을 유지합니다. 그러나 수동으로 설정할 수 있습니다. 포장하다 그리고 최소/최대 너비 디자인이 반응하는지 확인하기 위해 상위 프레임에 있습니다.

메모: 레이어 너비가 478px 미만이거나 레이어가 이미 수직 스택에 있는 경우 반응형 드롭다운에서 레이어의 응답성을 구성할 수 없습니다.

레이어의 응답성을 관리하려면 다음을 수행하십시오.

1. 레이어를 선택하세요
2. 로부터 반응형 플러그인 모달의 드롭다운에서 레이어가 수직 스택으로 전환되어야 하는 중단점을 선택하세요.

향상된 플러그인 기능

플러그인은 선택한 Figma 레이어를 분석하고 해당 스타일과 레이아웃을 HTML 태그 및 CSS 속성으로 변환합니다. 자동 레이아웃 요소만 허용하면 이러한 변환 정밀도가 보장됩니다.

메모: 안타깝게도 Figma to Webflow 플러그인은 현재 Safari 브라우저의 Figma와의 호환성이 부족합니다. 결과적으로 Safari 브라우저에서 Figma를 사용하는 경우 플러그인이 작동하지 않습니다. 대신 Chrome이나 Figma 데스크톱 앱을 사용하는 것이 좋습니다.

Figma에서 Webflow 플러그인 제거

작업 공간이나 사이트 중 하나에서 Figma to Webflow 플러그인을 제거하려면 처음에 플러그인 액세스 권한을 부여한 위치를 확인해야 합니다. Workspace 인증을 받으려면 다음 단계에 따라 플러그인을 제거하세요. 사이트별 승인을 받으려면 사이트에서 플러그인을 제거하는 단계를 진행하세요.

작업공간에서 플러그인 제거

작업공간에서 Figma to Webflow 플러그인을 제거하려면:

1. 액세스 계정 탐색바의 드롭다운
2. 클릭 작업공간
3. 플러그인을 제거하려는 작업공간을 선택하세요.
4. 로 이동 작업공간 설정 > 통합 탭 > 승인된 신청서
5. 선택 취소 "Webflow from Figma to Site" 애플리케이션용

사이트에서 플러그인 제거

사이트에서 Figma to Webflow 플러그인을 제거하려면:

1. 귀하의 계기반
2. “를 클릭하세요.공개 점 3개” 원하는 사이트 옆
3. 로 이동 설정
4. 로 진행 사이트 설정 > 통합 탭 > 승인된 신청서
5. 클릭 보다
6. 선택하다 계정 통합 설정
7. 방문하다 계정 설정 >  승인된 신청서
8. 클릭 취소 "Webflow from Figma to Site" 애플리케이션용

플러그인 문제 해결

플러그인이 디자인을 정확하게 복사하지 못하는 경우 먼저 지원되는 브라우저를 사용하고 있는지 확인하세요. 플러그인이 지원되는 브라우저에는 Chrome 및 Figma 데스크톱 앱이 포함됩니다. 특히 이 플러그인은 현재 Safari 브라우저의 Figma와 호환되지 않습니다.

문제가 지속되면 다음 조치를 시도해 보십시오.

• 자동 레이아웃을 활용하여 단일 사전 구축된 레이아웃, 사전 구축된 구조 또는 텍스트 레이어를 복사하고 Webflow에 붙여넣습니다. — 프레임이 올바르게 복사되어 붙여넣어지면 플러그인이 작동하는 것입니다. 프레임이 올바르게 복사되지 않으면 규정된 문제 해결 단계를 진행하십시오.
• 탐구하다 우리의 솔루션 Webflow 연구소 커뮤니티
• 관계를 맺다 에서 Webflow 연구소 커뮤니티 질문을 함으로써

위의 문제 해결 단계를 수행한 후에도 문제가 지속되면 문제가 있는 프레임이 포함된 새 Figma 파일을 생성하여 Webflow Labs 팀과 공유하십시오. [email protected]. 그들은 귀하의 우려 사항을 즉시 해결해 드릴 것입니다.

피드백 제공

우리는 이 플러그인을 개선하는 데 도움이 될 귀하의 생각, 의견 및 피드백을 간절히 기다리고 있습니다. 귀하의 통찰력을 우리와 함께 친절하게 기여해 주십시오. Webflow 연구소 커뮤니티.