Importing From Figma

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

ProtoPie Plugin for Figma

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

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

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

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

Supported Properties

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

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

Differences Between the Plugin and Legacy Import

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

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

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

[object Object]
Import Objects

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

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

[object Object]
Import as SVG

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

Import Text Layers

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

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

Legacy Figma Import

프로토파이는 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에서 삭제된 레이어가 있다면 프로토파이에서도 삭제합니다.

panel impor figma

FAQs

  • Why does it take so long to import my designs from Figma?

    UPDATE: try out the ProtoPie plugin for Figma, a revamped import experience to boost productivity.

    If you still use the legacy Figma import, see below.

    The fact that Figma is a browser-based interface design tool brings its own set of challenges. Hence, importing a frame from Figma into ProtoPie takes longer than importing from Sketch and Adobe XD. Possible reasons for this are affected latency as well as your own internet connection.

    Make sure you have a fast internet connection with enough bandwidth for the best performance.

  • Why have some layers been imported from Figma incorrectly?

    UPDATE: try out the ProtoPie plugin for Figma, a revamped import experience to boost productivity.

    If you still use the legacy Figma import, see below.

    When a frame contains text layers, mask layers, and rotated layers, it is possible that they appear differently after importing due to technical limitations of Figma's API.

    You could work around this issue by doing the following:

    1. Add a frame in Figma covering all layers that have been imported incorrectly before.
    2. If these layers have visual effects such as shadow and blur, make sure the frame is big enough to contain the aforementioned layers.
    3. Put the aforementioned layers into the frame.
    4. Mark the frame as exportable.
    5. Re-import your frame into ProtoPie after selecting the "Only layers marked for export" option.
    6. The frame that you just re-imported will appear as one layer in ProtoPie.

    If this workaround does not work for you, it would probably be due to technical limitations of Figma's API. We recommend that you contact Figma directly.

Back To Top