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

  • Importing from Adobe XD encountered a problem. What should I do?

    This only applies to the legacy Adobe XD import available in ProtoPie 5.2 or lower.

    If you receive the error message "Importing from Adobe XD encountered a problem" while importing a file from Adobe XD into ProtoPie on macOS, try the following.

    ProtoPie must have access to Adobe XD's data folder in order for the import to work. You need to verify that the folder's read and write permission is set up correctly in your system.

    To do so, click on the Spotlight icon in the top right corner of your screen to run queries.

    spotlight-icon

    Enter "~/Library/Application Support" in the search bar and open the Application Support folder. Right-click on it and press Get Info.

    adobe-xd-integration-doesnt-work-02

    At the bottom of the Info window, you may find the Sharing & Permissions section. Expand this section and click on the [+] button in the left bottom corner to add permission. If needed, click on the lock icon to unlock the permissions settings (this would require an administrator name and password).

    adobe-xd-integration-doesnt-work-04

    From the list of Users & Groups, please select the username you are currently logged in with on macOS and press Select to add it to the permission list.

    Click on the gear icon and select "Apply to enclosed items…". Press OK to apply the permissions to all enclosed items.

    adobe-xd-integration-doesnt-work-06

    Close the info window and restart both ProtoPie Studio and Adobe XD.

    Contact us if you need more help.

Back To Top