Figma에서 Webflow 앱으로

이 강의에서는 다음 내용을 학습합니다.

1. Figma to Webflow 앱을 실행하는 방법
2. 변수 및 구성 요소를 동기화하고 가져오는 방법
3. 이전에 가져온 구성요소를 동기화하는 방법
4. 충돌이 있는 구성 요소에 대한 업데이트를 검토하는 방법
5. 이전에 가져온 변수를 동기화하는 방법

Figma to Webflow 앱을 실행하는 방법

먼저 Webflow 사이트를 열고 다음에서 앱을 실행하세요. 앱패널. 그 다음에:

1. Figma 플러그인으로 이동
2. 로 이동 디자인 시스템 동기화 탭
3. 드롭다운에서 올바른 사이트가 선택되었는지 확인하세요(즉, Figma 플러그인을 동기화하는 사이트). 

플러그인이 연결되었음을 표시하면 변수 및/또는 구성요소를 동기화할 수 있습니다.

변수 및 구성 요소를 동기화하고 가져오는 방법

숫자 변수의 전역 단위 설정

숫자 변수에 사용되는 단위를 전체적으로 변경하려면 Figma 플러그인 모달에서 변경할 수 있습니다. 그러면 모든 변수는 Webflow에 동기화할 때 지정된 단위를 사용합니다.

1. Figma to Webflow 플러그인 모달 창으로 이동
2. 로 이동 디자인 시스템 동기화 탭
3. 오른쪽 상단 옆에 있는 아이콘을 클릭하세요. 디자인 시스템 동기화‍
4. 딸깍 하는 소리 플러그인 설정‍
5. 사용 숫자변수 단위 숫자 변수에 대한 전역 단위(예: px, em 또는 rem)를 설정하는 드롭다운
6. 다음으로 돌아가세요. 디자인 시스템 동기화 탭
7. 딸깍 하는 소리 Webflow에 동기화

그런 다음 Webflow로 돌아가서 다음을 클릭하여 앱 모달 창에서 새 숫자 변수 단위를 동기화할 수 있습니다. 변수 가져오기 및 업데이트. 현재 캔버스에서 사용 중인 모든 변수는 새로운 숫자 변수 단위로 조정됩니다.

메모: Figma는 변수를 픽셀 단위로만 표시하므로 가져온 디자인은 Figma에서와 Webflow에서 다르게 보일 수 있습니다.

변수 동기화 및 가져오기

동기화하고 가져올 변수를 선택하려면:

1. 로 이동 디자인 시스템 동기화 탭
2. “를 클릭하세요.변수 모드오른쪽 상단에 있는 ” 아이콘
3. 동기화하려는 변수를 선택하세요.
4. 딸깍 하는 소리 Webflow에 동기화

그런 다음 Webflow로 돌아가 앱 모달 창에서 변수를 가져올 수 있습니다. 가져올 변수를 선택하려면 상자를 선택하거나 선택 취소할 수 있습니다. 그런 다음 클릭하세요. 변수 가져오기. 변수를 가져온 후에는 해당 변수가 변수 탭.

구성요소 동기화 및 가져오기

동기화할 구성요소를 선택하려면:

1. 로 이동 디자인 시스템 동기화 탭
2. “를 클릭하세요.모드 선택오른쪽 상단에 있는 ” 아이콘
3. 다음을 사용하여 Figma 캔버스에서 하나 이상의 구성 요소를 선택합니다. 옮기다 + 딸깍 하는 소리
4. 딸깍 하는 소리 Webflow에 동기화

플러그인이 구성 요소를 동기화하면 Webflow 사이트로 이동하여 Figma에서 Webflow 앱에 대한 업데이트를 검토할 수 있습니다. 

1. 딸깍 하는 소리 새 구성요소 가져오기 새로 동기화된 구성 요소를 검토하려면
2. Webflow 사이트로 가져올 구성요소를 선택하세요.
3. 딸깍 하는 소리 구성요소 가져오기

Figma에서 구성 요소를 가져오면 Webflow가 해당 구성 요소에 연결됩니다. 나중에 Figma에서 동일한 구성 요소를 다시 가져오고 Webflow에서 직접 설계 업데이트를 검토할 수 있습니다. 요소 위치와 스타일만 업데이트됩니다. 속성이나 바인딩이 있는 경우 Webflow에 유지됩니다.

메모: 구성 요소 변형은 동기화할 때 선택을 취소하지 않는 한 중복 구성 요소로 Webflow 사이트에 가져옵니다.

이전에 가져온 구성요소를 동기화하는 방법

이전에 Webflow 사이트로 가져온 구성 요소를 동기화하려면 먼저 Figma로 이동하여 플러그인 창을 엽니다. 그 다음에:

1. 드롭다운에서 올바른 사이트(예: 구성요소를 동기화하려는 사이트)가 선택되었는지 확인하세요. 
2. “를 클릭하세요.모드 선택오른쪽 상단에 있는 ” 아이콘
3. Figma 캔버스에서 구성요소를 선택하세요.
4. 딸깍 하는 소리 계속하다 플러그인 모달 창에서
5. 딸깍 하는 소리 Webflow에 동기화
6. Webflow 사이트에서 Figma to Webflow 앱을 엽니다.
7. 딸깍 하는 소리 구성 요소 업데이트 앱 모달 창에서

그런 다음 각 구성요소를 클릭하면 다음을 볼 수 있습니다.

• 변경된 스타일(예: 색상, 글꼴 등)
• 구성요소에 추가되거나 업데이트된 변수
• 구성 요소에 새 요소가 추가되었습니다.

클릭하시면 됩니다 구성요소 스타일 및 변수 업데이트 미리보기에서 단일 구성요소를 업데이트하려면 모든 구성요소 업데이트 ~로부터 구성 요소 업데이트 검토 페이지. 구성 요소의 모든 인스턴스는 Webflow 사이트 전체에서 업데이트됩니다.

충돌이 있는 구성 요소에 대한 업데이트를 검토하는 방법

이전에 가져온 구성 요소의 충돌은 Figma의 구성 요소에서 하나 이상의 요소를 제거했는데 해당 요소가 Webflow에 여전히 존재할 때 발생합니다. 충돌이 있는 구성요소에 대한 업데이트를 검토하려면 충돌이 있는 구성 요소 업데이트 앱 모달 창에서. 그런 다음 각 구성요소를 클릭하여 누락된 요소를 볼 수 있습니다. 

여기에서는 다음 세 가지 옵션이 있습니다.

• 누락된 요소 삭제 — 평소와 같이 Webflow에 있는 구성 요소의 모든 인스턴스를 업데이트합니다(이렇게 하면 제거하다 구성 요소의 요소)
• 동기화되지 않은 구성요소로 가져오기 — 구성요소를 있는 그대로 Webflow로 가져옵니다. 향후에는 구성 요소를 Figma에서 Webflow로 동기화할 수 없습니다.
• Figma의 변경 사항 되돌리기 — Figma로 돌아가서 제거된 요소를 구성 요소에 다시 추가하면 충돌이 제거됩니다.

이전에 가져온 변수를 동기화하는 방법

이전에 Webflow 사이트로 가져온 변수를 업데이트하려면 먼저 Figma로 이동하여 플러그인 창을 엽니다. 그 다음에:

1. “를 클릭하세요.변수 모드오른쪽 상단에 있는 ' 아이콘
2. 딸깍 하는 소리 계속하다
3. 동기화하려는 변수를 선택하세요.
4. 딸깍 하는 소리 변수를 Webflow로 동기화

Figma에서 업데이트되고 Webflow에 동기화된 모든 변수는 앱 모달 창에 표시됩니다. 창에는 변수의 초기 값과 새 값이 표시됩니다. 가져올 변수를 선택한 다음 변수 업데이트.