Importing From Adobe XD

Adobe XD에서 작업한 디자인을 다음 두 가지 방법으로 ProtoPie에 가져올 수 있습니다.

ProtoPie Plugin for Adobe XD

플러그인 파일을 다운로드 및 설치하십시오. 해당 서비스를 이용하기 위해서는 ProtoPie 5.3 이상의 버전이 필요합니다.

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

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

플러그인이 처음이시라면, 예제를 참고해주십시오.

Supported Properties

  • Visibility
  • Lock
  • Position
  • Size
  • Rotation
  • Opacity
  • Constraints
  • Fill (solid color & image)
  • Borders
  • Shadow

레이어 속성과 관련한 더 자세한 사항은 다음 링크를 참고해주십시오.

Differences Between the Plugin and Legacy Import

레거시 임포트와 달리 플러그인을 이용하면 다음 기능들을 이용할 수 있습니다:

  • 한개 혹은 여러 개의 아트보드와 오브젝트를 임포트할 수 있습니다.
  • 아트보드를 Scene으로 임포트할 수 있습니다.
  • 원하는 요소들을 선택하여 임포트할 수 있습니다.
  • 벡터 레이어를 SVG로 임포트할 수 있습니다.
  • 텍스트 레이어를 변환 가능한 SVG로 임포트할 수 있습니다.
  • Contraints를 그대로 임포트할 수 있습니다.
[object Object]
Importing as Scenes

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

[object Object]
Importing Objects

Adobe XD의 오브젝트를 ProtoPie에 그대로 임포트할 수 있습니다. 한 개 혹은 여러 개의 오브젝트를 한번에 가져올 수 있으며, 이 때 속성(Constraints, 레이어 순서, 포지션 등)은 그대로 유지 됩니다.

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

[object Object]
Importing as SVG

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

Importing Text Layers

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

Reimporting
  • 기본적으로 Adobe XD에서 아트보드나 오브젝트를 편집한 후 다시 임포트하면, 이전에 임포트된 요소가 업데이트 됩니다. 그러나 다음과 같은 상황에서는 리임포트 되지 않습니다.
  • 임포트된 오브젝트의 속성을 ProtoPie에서 편집했을 경우 리임포트 되지 않습니다.
  • 임포트 후 레이어 순서를 바꾼 경우 리임포트 되지 않습니다. 예를 들어, 새로 생성한 스크롤 컨테이너에 임포트한 레이어를 추가했을 때 리임포트 되지 않습니다.
  • 삭제된 임포트 레이어는 리임포트 되지 않습니다. 단 해당 레이어가 유일하게 임포트된 요소라면 리임포트할 수 있습니다.
  • Scene이나 오브젝트의 사본을 만들기 위해서는 임포트 후 복사하면 됩니다. 예를 들어 Adobe XD의 아트보드를 ProtoPie에서 2개의 Scene으로 만들고 싶다면, 한번만 임포트를 한 후 복사하여 추가적인 Scene을 생성합니다.

Legacy Adobe XD Import

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

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

Artboard

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

Import Size

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

All layer structure

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

Only layers marked for batch export

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

Overwrite positions of layers

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

Overwrite sizes of layers

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

Update layer orders and grouping structure

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

Remove layers deleted in Adobe XD

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

panel import xd

FAQs

Back To Top