15. Bubble Figma Import (초급) : 피그마에서 디자인 가져오기, Figma 디자이너와 쉽게 협업하기

Figma 디자인 버블에서 가져오기

Figma에서 가져오기

이 기능은 Figma 디자인을 Bubble 앱으로 가져옵니다.

 
: 두 플랫폼의 차이로 인해 가져오기가 100% 충실하지는 않지만 , 디자인을 Bubble로 가져올 수 있다는 장점은 앱 디자인 프로세스에서 유리한 출발을 할 수 있습니다.

 

(1) Figma 파일을 가져오는 방법

1. 메인 페널의 좌측 메뉴 settings(설정) > general(일반)으로 이동하여 "Design import (디자인 가져오기)" 섹션까지 아래로 스크롤합니다.
2. Figma 계정 설정으로 이동하여 다음의 위치에서 Figma API 키를 찾을 수 있습니다. Figma 대시보드 페이지에서 왼쪽 상단에 있는 이름을 클릭한 다음, 토큰이 아직 없는 경우 "새 개인 액세스 토큰 만들기"를 클릭합니다. 이것이 API 키입니다.
3. Figma에서 파일을 열 때 URL을 보고 Figma 파일 ID를 찾을 수 있습니다.
4. URL은 figma.com/file/{임의 문자} 또는 figma.com/file/{임의 문자}/[조금 더 읽기 쉬운 이름] 형식이어야 합니다. 파일 ID는 {임의의 문자}입니다.
5. "import (가져오기)"를 클릭하면 가져오기가 시작되며 대용량 Figma 파일의 경우 몇 분 정도 걸릴 수 있습니다.

 

(2) import (가져오기) 작동 방식

 

1. 페이지

• Figma 파일의 모든 페이지에 있는 모든 최상위 프레임을 Bubble 앱의 새 페이지로 가져옵니다.
• Figma의 보이지 않는 항목(레이어 사이드바에서 보이지 않음)은 가져오지 않습니다.

 

2. 요소

• Bubble은 Figma에서 가능한 한 많이 가져오려고 시도하여 Figma 요소를 가장 가까운 종류의 Bubble 요소에 매핑합니다.
• Bubble은 Figma에서 그룹화된 요소 그대로 그룹을 생성합니다.
• Figma의 요소이름도 Bubble로 복사됩니다.(가져온 이름에는 문자 제한이 있으며 Bubble은 중복 이름을 방지함)

 

3. 스타일

• Bubble은 Figma의 스타일과 일치하는 스타일을 만들려고 시도하지만 더 복잡한 상황(예: 한 텍스트에 여러 스타일)에서 Bubble은 적용할 스타일에 대해 임의의 가정을 하거나 텍스트에 서식 있는 텍스트 마크업(bbcode)을 사용할 수 있습니다.
• Figma의 모든 종류의 벡터는 앱에서 이미지로 가져옵니다.
  • 벡터만 포함하는 Figma의 모든 그룹은 전체 이미지로 가져옵니다(하위 그룹이 있으면 벡터만 있는 경우에도 이 규칙이 트리거 되지 않음)

 

4. 이미지

• 이미지는 Figma의 서버에 업로드된 이미지를 소싱합니다.
  • 즉, 이미지는 Bubble 앱에 자동으로 업로드되지 않습니다.

 

5. 주의사항

• *Bubble은 어떤 요소가 Repeating Group(반복 그룹)인지 가정하지 않습니다.
• 모양이나 프레임에 보이지 않는 채우기가 있는 경우 투명 채우기로 전달됩니다.

 

Tip:

가져오는 동안 Bubble은 두 이미지가 기술적으로 서로의 사본인 경우에도 모든 이미지를 별도의 이미지로 취급합니다. 또한 Figma 파일에 큰 이미지(예: 큰 내장 PNG가 포함된 SVG)가 있는 경우 Bubble은 여전히 충실하게 해당 (매우 큰) 이미지를 가져오려고 시도합니다!

 

(3) 알려진 제한 사항

이것은 일회성의 가져오기 활동이며 Bubble 페이지와 Figma 프레임 사이의 링크를 유지하지 않습니다. 가져오기를 다시 트리거하면 각 최상위 Figma 프레임에 대해 새로운 버블 페이지가 다시 생성됩니다.

 

• 가져오기를 시도할 때 "네트워크 오류"가 발생하는 경우:먼저 Figma의 API에 대한 호출을 차단할 수 있는 광고 차단/추적 방지 소프트웨어를 확인하세요. 그리고 잠시 후에 다시 시도하십시오. 이 현상이 지속적으로 발생하면 버그로 신고하십시오.

 

Figma는 텍스트 상자 주위에 더 엄격한 제약을 허용하기 때문에 Bubble은 텍스트 요소의 높이와 너비를 추가하여 Figma 디자인에 더 가깝게 만듭니다.

 

Figma에서 가능하지만 현재 Bubble에서 가능하지 않은 스타일은 가져오지 않습니다.

 
* 일반적으로 복잡한 스타일을 구현하기 위한 해결 방법이 존재하지만 다음의 재약사항이 있습니다.

• 텍스트 하단 세로 정렬이 없습니다.
• 요소당 하나의 그림자만 가질 수 있습니다.
• 그러데이션에 최대 3가지 색상을 사용할 수 있습니다.
• 동시에 여러 채우기를 지원하지 않음 — Bubble은 개체의 첫 번째 채우기만 수행합니다.
• 0px 둥근 테두리가 재정이 됩니다.

 

*아직 업데이트되지는 않지만 향후 릴리스에서 제공될 수 있는 몇 가지 다른 스타일 속성이 있습니다.

• 예를 들면 요소의 다른 면에 다른 테두리 스타일 지정프레임에서 위쪽 또는 왼쪽으로 이동하는 요소
• 또한 상당히 크고 복잡한 Figma 파일을 가져오려고 하면 가져오기 시간이 초과될 수 있습니다(이는 컴퓨터 리소스에 따라 다름). 이 제한에 부딪히는 경우 Figma 파일을 더 작은 파일로 나누고 대신 개별적으로 가져오십시오.

 

(4) Figma 파일 설정 팁

 

1. 프레임

• import 기능은 Figma 파일의 각각의 모든 프레임을 가져오기 때문에, 주어진 페이지의 변형이 많은 매우 큰 Figma 파일이 있는 경우, 프레임의 하위 집합을 새 파일로 복사하여 가져오기에 사용할 수 있습니다.
• 모든 최상위 프레임은 항상 새로운 페이지로 가져오고 가져오기는 일회성 링크라는 점을 기억하십시오. 따라서 Figma에서 일정 그룹을 디자인하고 정기적으로 import(가져오기)를 수행하여 새로운 그룹을 Bubble로 가져오는 것을 고려할 수 있습니다.

 

2. 모바일 페이지

• 모바일 페이지를 만들고 애플리케이션에 직접 추가하는 좋은 방법입니다.
• Bubble 애플리케이션을 빌드하는 동안 쉽게 복사/붙여 넣기 할 수 있도록 모든 Figma프레임에 번들로 포함된 Figma 파일에서 컴포넌트(component) 가져오기를 시험해 볼 수 있습니다.
• 문제없이 element(요소)를 획으로 윤곽을 그릴 수 있습니다. 이들은 정상적으로 작동, 전송됩니다.

 

3. 이미지

• 마스킹된 요소를 가져오려면 마스킹된 요소만으로 그룹(프레임 아님)을 만듭니다.
  • 그룹의 요소 중 마스크가 적용된 요소가 있는지 확인하기 위해 그룹을 살펴봅니다. 마스크 된 요소가 발견되면 전체 그룹을 이미지로 가져옵니다.
• 이미지를 가져오는 데 문제가 있는 경우:
  • 프레임의 이미지 채우기(image fill)가 아닌 이미지 개체(image object)를 사용하고 있는지 확인하세요.
  • 현재 우리는 이미지 개체(image object)(예: Figma에서 "이미지 배치"를 클릭할 때)만 지원하며 필요에 따라 다른 개체로 마스킹할 수 있습니다.
• 배경 채우기를 가져오는 데 문제가 있는 경우:
  • 프레임을 페이지로 가져올 때 현재 해당 페이지에 대한 채우기(fill)를 지원하지 않습니다.
  • 개체(object), 내부 프레임 등에 채우기가 표시되지 않는 경우 여러 채우기(multiple fills)가 없는지 확인하고 확인하십시오.
  • Bubble은 모든 요소에 대해 단일 채우기(single fill)만 지원하므로 하나만 선택해야 합니다.

 

(5) 문제 해결

• "네트워크 오류"가 발생하거나 Bubble이 API 키 및 파일 ID가 유효한 것으로 간주하지 않는 경우 먼저 Figma 계정에서 새 API 키를 재생성해 보십시오
• 역시 작동하지 않으면 활성 상태일 수 있는 광고/추적 차단기를 해제해 보십시오.