Figma에서 디자인 가져오기

동영상/이미지 1: 내보내기

내보내기 버튼을 클릭할 때의 동작은 선택한 대상과 선택한 내보내기 유형(Scene, Object 또는 Flattened)에 따라 다릅니다.

예를 들어, 프레임을 선택하고 Scene 내보내기 유형을 선택하면 해당 섹션의 구조가 ProtoPie scene으로 변환됩니다. ProtoPie가 완전히 지원하지 않는 속성은 SVG 레이어로 가져옵니다.

참고: 지원되지 않는 속성으로 인해 가져온 디자인이 Figma와 다르게 보이는 경우, 보다 시각적으로 정확한 결과를 위해 Export as Flattened 옵션을 사용하여 다시 가져와 보세요.

납작하게 병합된 레이어 가져오기

시각적 완성도를 높이기 위해 Figma에서 레이어를 병합한(flatten) 후 ProtoPie로 내보낼 수 있습니다.

옵션 2: Flattened로 내보내기

Flattened 내보내기 유형을 사용하면 디자인을 단순화되고 병합된 이미지로 ProtoPie에 가져올 수 있습니다. 이는 레이어 수준의 세부 정보보다 시각적 완성도가 더 중요할 때 특히 유용합니다.

가져오기 전에 개별 레이어를 병합하거나 여러 레이어를 하나로 결합할 수 있습니다. 이를 통해 Studio에서 인터랙션을 관리하고 시각적 일관성을 유지하기가 더 쉬워집니다.

병합된 이미지의 최종 해상도는 ProtoPie의 밀도(density) 설정을 따릅니다.

Scene으로 가져오기

ProtoPie에서는 동일한 이름을 유지하면서 하나 또는 여러 개의 최상위 프레임을 Scene으로 동시에 가져올 수 있습니다. 최상위 프레임을 Scene으로 가져오는 것은 Figma의 레이어 계층 구조를 기반으로 합니다.

개체(Object) 가져오기

Figma와 동일한 레이어 계층 구조, 위치 및 제약 조건을 가진 개체들을 하나씩 또는 대량으로 가져올 수 있습니다. 최상위 프레임이 아닌 모든 개체는 Scene 내에서 레이어 또는 컨테이너로 표시됩니다.

Figma의 컴포넌트(Component) 및 컴포넌트 인스턴스(Instance)는 컨테이너로 가져옵니다. 이들을 ProtoPie에서 컴포넌트로 유지하려면 컴포넌트로 변환하세요. 컴포넌트에 대해 자세히 알아보세요.

컴포넌트 모드(Component Mode)

플러그인에서 컴포넌트 모드를 활성화하면 Figma 컴포넌트를 ProtoPie에서 재사용 가능한 연결된 컴포넌트로 가져올 수 있습니다.

컴포넌트 모드 켜짐(ON)

컴포넌트 모드가 활성화된 경우:

• 메인 컴포넌트가 ProtoPie 로컬 라이브러리(Library)로 직접 내보내집니다.

• 인스턴스는 라이브러리 컴포넌트에 대한 연결된 참조로 캔버스에 남아있습니다.

• 베리언트(Variant)는 완전한 베리언트 지원과 함께 별도의 컴포넌트로 가져옵니다.

• 선택 항목 내의 모든 중첩된 컴포넌트가 자동으로 가져와지며, 계층 구조와 연결 관계가 유지됩니다.

컴포넌트 모드 꺼짐(OFF)

컴포넌트 모드가 비활성화된 경우:

• 모든 레이어가 Scene 또는 Object로 가져와집니다.

• 컴포넌트는 보존되지 않으며 일반 컨테이너로 취급됩니다.

• ProtoPie에서 Figma 컴포넌트를 사용하려면 가져온 후 컨테이너를 수동으로 컴포넌트로 변환해야 합니다.

참고: 컴포넌트 모드는 Scene 및 Object 내보내기 유형에서 작동합니다. Flattened 내보내기에는 적용되지 않습니다.

SVG로 가져오기

Figma의 벡터 레이어를 ProtoPie의 SVG(Scalable Vector Graphics)로 가져옵니다. 가져온 후 모양(Shape)으로 변환하면(Object → Make Editable) 속성을 편집할 수 있습니다. ProtoPie는 아직 모든 SVG 속성을 지원하지는 않습니다. SVG 레이어에 대해 자세히 알아보세요.

텍스트 레이어 가져오기

Figma의 텍스트 레이어를 ProtoPie의 SVG로 가져옵니다. 속성을 편집 가능하게 만들려면 가져온 후 텍스트 레이어로 변환하세요. 텍스트 레이어에 대해 자세히 알아보세요.

인터랙션 가져오기

Figma에서 프레임 간에 설정한 프로토타입 인터랙션을 번거로움 없이 ProtoPie로 가져오세요.

ProtoPie는 가져올 때 Figma의 프레임 간 인터랙션을 자동으로 Jump 반응으로 변환합니다. 더 복잡한 인터랙션을 추가하기 전에 ProtoPie에서 Scene 간의 전환 효과를 다시 만들 필요가 없습니다.

프레임에 Smart Animate 전환 효과가 포함되어 있는 경우, ProtoPie는 이를 Smart 전환이 적용된 Jump 반응으로 가져옵니다.

여기에서 Jump 반응에 대해 자세히 알아보세요.

오토 레이아웃(Auto Layout) 가져오기

ProtoPie는 Figma의 기본 오토 레이아웃 속성을 가져오는 것을 지원합니다. 원본 디자인과 일치하도록 고급 설정도 함께 가져옵니다. 그러나 ProtoPie Studio에서 이러한 설정을 편집하면 설정이 초기화되어 레이아웃에 영향을 미칠 수 있습니다.

회전 값이 0이 아닌 개체의 경우, ProtoPie는 정확한 위치 지정을 위해 가져오는 동안 기준점(origin)을 (50, 50)으로 설정합니다.

디자인 다시 가져오기

Figma에서 프레임이나 개체를 다시 가져올 때 대부분의 레이어는 자동으로 업데이트됩니다. 그러나 ProtoPie 내부에서 변경한 사항은 보존되며 덮어쓰이지 않습니다.

다시 가져올 때 업데이트되지 않는 항목:

• ProtoPie에서 수정한 개체(예: 크기, 위치, 스타일).

• 레이어 패널 내에서 이동한 레이어(예: 스크롤 컨테이너에 추가된 레이어).

• 삭제된 레이어 - Figma에서 해당 레이어를 다시 선택하고 가져오지 않는 한 업데이트되지 않습니다.

• ProtoPie에서 수행한 컴포넌트 재정의(override) 값 (컴포넌트 모드를 사용하는 경우).

추가 팁:

• Scene이나 개체의 복제본을 만들려면 한 번만 가져온 다음 ProtoPie에서 복제하세요.

• 다시 가져오기는 항상 가장 최근의 내보내기 유형(Scene, Object 또는 Flattened)을 따릅니다.

• 디자인이 예상대로 나타나지 않으면 Flattened 옵션을 사용하여 다시 가져와 보세요.

컴포넌트 모드 사용 시 재내보내기 동작:

• Figma에서 다시 내보낼 때 Studio에서 레이어를 편집하지 않은 경우에만 ProtoPie가 컴포넌트의 시각적 속성(크기, 위치, 채우기, 선, 텍스트, 레이어 순서)을 업데이트합니다. 라이브러리 컴포넌트에 대한 인스턴스 링크는 다시 가져올 때 유지됩니다.

ProtoPie가 가져온 레이어를 추적하는 방법:

• Figma에서 가져온 각 개체에는 고유한 내부 ID가 부여됩니다.

• 동일한 파일 및 기존 가져오기를 거친 개체만 다시 가져와 업데이트할 수 있습니다.

• 내보내기 유형을 변경하면(예: Scene에서 Flattened로) 이전 가져오기 본이 새 형식으로 대체됩니다.

프레임

Figma에서 가져올 프레임을 선택합니다

가져오기 크기

레이어의 배율을 설정합니다. 이는 Figma에서 선택한 프레임의 크기에 따라 변경될 수 있습니다

모든 레이어 구조

프레임의 모든 레이어가 폴더 구조로 가져오기 됩니다

일괄 내보내기로 표시된 레이어만

Figma에서 "내보내기(export)"로 표시된 레이어만 가져옵니다

레이어 위치 덮어쓰기

Figma에서 프레임을 다시 가져올 때 레이어의 위치 값을 덮어씁니다

레이어 크기 덮어쓰기

Figma에서 프레임을 다시 가져올 때 레이어의 크기 값을 덮어씁니다

레이어 순서 및 그룹화 구조 업데이트

Figma에서 프레임을 다시 가져올 때 레이어 순서 및 그룹화 구조를 업데이트합니다

Figma에서 삭제된 레이어 제거

Figma에서 프레임을 다시 가져올 때 Figma에서 삭제된 레이어를 제거합니다