Import

ProtoPie는 몇 번의 클릭만으로 Sketch, Adobe XD, Figma에서 디자인한 작업물을 가져올 수 있습니다. 계속적으로 더 쉽고 빠른 임포트를 지향하고 있고, 추후에는 레거시 임포트가 아닌 플러그인 서비스로 전환될 예정입니다.

FigmaAdobe XD 플러그인은 현재 이용 가능하며, Sketch 플러그인 서비스도 곧 제공될 예정입니다.

Get Started

  • 레거시: 임포트 하려는 Sketch 혹은 Figma 파일을 열고 ProtoPie Studio를 실행합니다. ProtoPie 내 파일 메뉴에서 "Import..."를 선택합니다.

  • 플러그인: Figma 혹은 Adobe XD의 ProtoPie 플러그인을 설치한 후, 임포트 하려는 툴에서 플러그인을 실행합니다.

Figma Import (Plugin)

Figma용 ProtoPie플러그인을 통해 더욱 쉽고 빠른 임포트를 경험할 수 있습니다. 기존 레거시 임포트와는 달리 Figma에서 작업한 내용 그대로 ProtoPie에 가져올 수 있습니다.

  • 한개 혹은 여러 개의 Frame과 Object를 임포트할 수 있습니다.

  • Top-level frame을 Scene으로 임포트할 수 있습니다.

  • 원하는 요소들을 선택하여 임포트할 수 있습니다.

  • 벡터 레이어를 SVG로 임포트할 수 있습니다.

  • 텍스트 레이어를 변환 가능한 SVG로 임포트할 수 있습니다.

  • Contraints를 그대로 임포트할 수 있습니다.

최적의 환경에서 작업하기 위해서는 Figma를 실행시킨 후 임포트를 진행하는 것이 좋습니다.

해당 서비스를 이용하기 위해서는 ProtoPie 5.2 이상의 버전이 필요합니다. 플러그인이 처음이시라면, 예제를 참고해주십시오.

Import As Scenes

Figma의 Top-level frame을 ProtoPie의 Scene으로 임포트할 수 있습니다. 한 개 혹은 여러 개의 프레임을 한번에 가져올 수 있으며, 이 때 레이어 순서는 그대로 유지됩니다.

Import Objects

Figma의 Object를 ProtoPie에 그대로 임포트할 수 있습니다. 한 개 혹은 여러 개의 오브젝트를 한번에 가져올 수 있으며, 이 때 속성(Constraints, 레이어 순서, 포지션 등)은 그대로 유지 됩니다. Top-level frame이 아닌 요소들은 모두 Scene에서 레이어 혹은 컨테이너로 나타납니다.

Figma의 Componenet와 Component instance는 ProtoPie의 Container로 임포트 됩니다. ProtoPie에서도 컴포넌트로 유지하려면 이를 변환하는 작업이 필요합니다. 컴포넌트에 대한 더 자세한 내용은 다음 링크를 참고해주시기 바랍니다.

Import as SVG

Figma의 벡터 레이어를 ProtoPie의 SVG (Scalable Vector Graphics)로 임포트할 수 있습니다. 속성을 편집하기 위해서는 이를 도형으로 변환해야 합니다. ProtoPie가 현재 SVG의 모든 속성을 지원하지는 않습니다. SVG 레이어와 관련한 더 자세한 내용은 다음 링크를 참고해주시기 바랍니다.

Import Text Layers

Figma의 텍스트 레이어를 ProtoPie의 SVG로 임포트할 수 있습니다. ProtoPie에서도 편집할 수 있으려면 이를 텍스트 레이어로 변환해야 합니다. 관련한 더 자세한 내용은 다음 링크를 참고해주시기 바랍니다.

Re-Import

기본적으로 Figma에서 Frame이나 Object를 편집한 후 다시 임포트하면, 이전에 임포트된 요소가 업데이트 됩니다. 그러나 다음과 같은 상황에서는 리임포트 되지 않습니다.

  • 임포트된 Object의 속성을 ProtoPie에서 편집했을 경우 리임포트 되지 않습니다.

  • 임포트 후 레이어 순서를 바꾼 경우 리임포트 되지 않습니다. 예를 들어, 새로 생성한 스크롤 컨테이너에 임포트한 레이어를 추가했을 때 리임포트 되지 않습니다.

  • 삭제된 임포트 레이어는 리임포트 되지 않습니다. 단 해당 레이어가 유일하게 임포트된 요소라면 리임포트할 수 있습니다.

  • Scene이나 Object의 사본을 만들기 위해서는 임포트 후 복사하면 됩니다. 예를 들어 Figma의 Top-level frame을 ProtoPie에서 2개의 Scene으로 만들고 싶다면, 한번만 임포트를 한 후 복사하여 추가적인 Scene을 생성합니다.

Figma Import (Legacy)

프로토파이는 Figma를 임포트하기 위한 다양한 옵션을 제공합니다. 작업 방식에 따라 모든 Figma 내의 모든 레이어를 가져오거나 exportable설정된 레이어만 가져올 수도 있고, re-import 할 때 프로토파이에서 변경한 포지션과 사이즈를 유지하면서 나머지 변경사항만을 가져올 수도 있습니다.Figma에서 exportable 설정하는 방법은 여기서 확인 할 수 있습니다.

Frame

Figma 파일 내에서 임포트할 프레임을 선택합니다

Import Size

레이어의 배율을 설정합니다. Figma에서 작업한 프레임의 사이즈에 따라서 바뀔 수 있습니다

All layer structure

Figma 프레임 내의 모든 레이어를 폴더구조를 유치한채로 가져옵니다

Only layers marked for batch export

Figma 프레임 내의 레이어 중 exportable설정 되어있는 레이어만 가져옵니다

Overwrite positions of layers

Re-Import할 때 Figma 레이어의 포지션 값을 덮어 씌웁니다.

Overwrite sizes of layers

Re-Import할 때 Figma 레이어의 스케일 값을 덮어 씌웁니다.

Update layer orders and grouping structure

Re-Import할 때 Figma 레이어의 순서와 구조를 덮어 씌웁니다.

Remove layers deleted in Figma

Re-Import할 때 Figma에서 삭제된 레이어가 있다면 프로토파이에서도 삭제합니다.

Sketch Import

프로토파이는 스케치임포트를 하기 위한 다양한 옵션을 제공합니다. 작업 방식에 따라 모든 스케치 내의 모든 레이어를 가져오거나 exportable설정된 레이어만 가져올 수도 있고, re-import 할 때 프로토파이에서 변경한 포지션과 사이즈를 유지하면서 나머지 변경사항만을 가져올 수도 있습니다.

Artboard

스케치 파일 내에서 임포트할 아트보드를 선택합니다

Import Size

레이어의 배율을 설정합니다. 스케치에서 작업한 아트보드의 사이즈에 따라서 바뀔 수 있습니다

All layer structure

스케치 아트보드 내의 모든 레이어를 폴더구조를 유치한채로 가져옵니다

Exportable layers

스케치 아트보드 내의 레이어 중 exportable설정 되어있는 레이어만 가져옵니다

Overwrite positions of layers

Re-Import할 때 스케치 레이어의 포지션 값을 덮어 씌웁니다.

Overwrite sizes of layers

Re-Import할 때 스케치 레이어의 스케일 값을 덮어 씌웁니다.

Update layer orders and grouping structure

Re-Import할 때 스케치 레이어의 순서와 구조를 덮어 씌웁니다.

Remove layers deleted in Sketch

Re-Import할 때 스케치에서 삭제된 레이어가 있다면 프로토파이에서도 삭제합니다.

Adobe XD Import (Plugin)

Adobe XD용 ProtoPie 플러그인을 통해 더욱 쉽고 빠른 임포트를 경험할 수 있습니다. 기존 레거시 임포트와는 달리 Adobe XD에서 작업한 내용 그대로 ProtoPie에 가져올 수 있습니다.

  • 한개 혹은 여러 개의 Artboard와 Object를 임포트할 수 있습니다.

  • Artboard를 Scene으로 임포트할 수 있습니다.

  • 원하는 요소들을 선택하여 임포트할 수 있습니다.

  • 벡터 레이어를 SVG로 임포트할 수 있습니다.

  • 텍스트 레이어를 변환 가능한 SVG로 임포트할 수 있습니다.

  • Contraints를 그대로 임포트할 수 있습니다.

최적의 환경에서 작업하기 위해서는 Adobe XD를 실행시킨 후 임포트를 진행하는 것이 좋습니다.

해당 서비스를 이용하기 위해서는 ProtoPie 5.3 이상의 버전이 필요합니다. 플러그인이 처음이시라면, 예제를 참고해주십시오.

Import as Scenes

Adobe XD의 Artboard를 ProtoPie의 Scene으로 임포트할 수 있습니다. 한 개 혹은 여러 개의 프레임을 한번에 가져올 수 있으며, 이 때 레이어 순서는 그대로 유지됩니다.

Import Objects

Adobe XD의 Object를 ProtoPie에 그대로 임포트할 수 있습니다. 한 개 혹은 여러 개의 오브젝트를 한번에 가져올 수 있으며, 이 때 속성(Constraints, 레이어 순서, 포지션 등)은 그대로 유지 됩니다. Top-level frame이 아닌 요소들은 모두 Scene에서 레이어 혹은 컨테이너로 나타납니다.

Adobe XD의 Componenet와 Component instance는 ProtoPie의 Container로 임포트 됩니다. ProtoPie에서도 컴포넌트로 유지하려면 이를 변환하는 작업이 필요합니다. 컴포넌트에 대한 더 자세한 내용은 다음 링크를 참고해주시기 바랍니다.

Import SVG

Adobe XD의 벡터 레이어를 ProtoPie의 SVG (Scalable Vector Graphics)로 임포트할 수 있습니다. 속성을 편집하기 위해서는 이를 도형으로 변환해야 합니다. ProtoPie가 현재 SVG의 모든 속성을 지원하지는 않습니다. SVG 레이어와 관련한 더 자세한 내용은 다음 링크를 참고해주시기 바랍니다.

Import Text Layers

Adobe XD의 텍스트 레이어를 ProtoPie의 SVG로 임포트할 수 있습니다. ProtoPie에서도 편집할 수 있으려면 이를 텍스트 레이어로 변환해야 합니다. 관련한 더 자세한 내용은 다음 링크를 참고해주시기 바랍니다.

Re-Import

기본적으로 Adobe XD에서 Artboard나 Object를 편집한 후 다시 임포트하면, 이전에 임포트된 요소가 업데이트 됩니다. 그러나 다음과 같은 상황에서는 리임포트 되지 않습니다.

  • 임포트된 Object의 속성을 ProtoPie에서 편집했을 경우 리임포트 되지 않습니다.

  • 임포트 후 레이어 순서를 바꾼 경우 리임포트 되지 않습니다. 예를 들어, 새로 생성한 스크롤 컨테이너에 임포트한 레이어를 추가했을 때 리임포트 되지 않습니다.

  • 삭제된 임포트 레이어는 리임포트 되지 않습니다. 단 해당 레이어가 유일하게 임포트된 요소라면 리임포트할 수 있습니다.

  • Scene이나 Object의 사본을 만들기 위해서는 임포트 후 복사하면 됩니다. 예를 들어 Adobe XD의 Artboard를 ProtoPie에서 2개의 Scene으로 만들고 싶다면, 한번만 임포트를 한 후 복사하여 추가적인 Scene을 생성합니다.

Adobe XD Import (Legacy)

ProtoPie 5.2 이하의 버전에서 작동합니다.

프로토파이는 Adobe XD CC를 임포트하기 위한 다양한 옵션을 제공합니다. 작업 방식에 따라 모든 Adobe XD CC 내의 모든 레이어를 가져오거나 exportable설정된 레이어만 가져올 수도 있고, re-import 할 때 프로토파이에서 변경한 포지션과 사이즈를 유지하면서 나머지 변경사항만을 가져올 수도 있습니다.Adobe XD CC에서 exportable 설정하는 방법은 여기서 확인 할 수 있습니다.

Artboard

Adobe XD CC 파일 내에서 임포트할 아트보드를 선택합니다

Import Size

레이어의 배율을 설정합니다. Adobe XD CC에서 작업한 아트보드의 사이즈에 따라서 바뀔 수 있습니다

All layer structure

Adobe XD CC 아트보드 내의 모든 레이어를 폴더구조를 유치한채로 가져옵니다

Only layers marked for batch export

Adobe XD CC 아트보드 내의 레이어 중 exportable설정 되어있는 레이어만 가져옵니다

Overwrite positions of layers

Re-Import할 때 Adobe XD CC 레이어의 포지션 값을 덮어 씌웁니다.

Overwrite sizes of layers

Re-Import할 때 Adobe XD CC 레이어의 스케일 값을 덮어 씌웁니다.

Update layer orders and grouping structure

Re-Import할 때 Adobe XD CC 레이어의 순서와 구조를 덮어 씌웁니다.

Remove layers deleted in Sketch

Re-Import할 때 Adobe XD CC에서 삭제된 레이어가 있다면 프로토파이에서도 삭제합니다.

FAQ

Back To Top