Introducing ProtoPie

Getting Started

Making Your First Prototype

ProtoPie Ecosystem

ProtoPie Studio Interface

Import

Getting Started

Importing From Adobe XD

Importing From Figma

Importing From Sketch

ProtoPie Genie

Basic Elements

Containers

Devices

Layers

Preview Window

Scenes

Scroll/Paging

Shortcuts

System Status Bar

Triggers & Responses

Easing

Annotations

Responses

Timelines

Triggers

Formulas

Getting Started

Functions

Layer Properties

Syntax

Formulas Use Cases

Variables

Getting Started

Variables

Predefined Variables

Variables Use Cases

AI

Getting Started

AI Interaction Creation

AI Document Q&A

AI Panel Interface

Tips for Best Results

Auto Layout

Getting Started

Auto Layout Properties

Components

Getting Started

Component Guides

Editing Components

Nested Components

Send & Receive Messages

Interaction Libraries

Getting Started

Managing Interaction Libraries

Managing Library Members

Voice Prototyping

Getting Started

Listen Response

Speak Response

Use Cases

Voice Command Trigger

Connecting Devices

Connecting blokdots

Connecting Mobile Devices

ProtoPie Cloud

Getting Started

Managing Prototypes

Managing Storage

Sharing Prototypes

ProtoPie Player

Testing Prototypes

Managing Fonts

Offline Testing

ProtoPie Player for Wear OS

Teams

Getting Started

Editors & Viewers

Onboarding Your Team

Projects

Team Owner & Team Admin

Handoff

Getting Started

Creating Interaction Recordings

Managing Interaction Recordings

Recording Page

User Testing

Getting Started

Overview

Creating Test Rooms

External Integrations

Managing Test Sessions

Test Results & Analysis

User Testing on ProtoPie Cloud

ProtoPie Connect

Getting Started

API Plugin

Arduino Plugin

blokdots Plugin

Connect Embedded

Custom Layer Integrations

Custom Plugins

Connect Devices

Gamepad Plugin

IFTTT Plugin

Logitech G29 Steering Wheel Plugin

Testing Prototypes

Feature Comparison

Unity Plugin

ProtoPie Enterprise

Getting Started

Organization Settings

Service Admin

Single Sign-On (SSO)

Security

Overview

Access Control

Data Transit, Storage & Backup

Incident Response

Network & ProtoPie Player App Security

Physical Security

Risk Management

Menu

Introducing ProtoPie

Getting Started

Making Your First Prototype

ProtoPie Ecosystem

ProtoPie Studio Interface

Import

Getting Started

Importing From Adobe XD

Importing From Figma

Importing From Sketch

ProtoPie Genie

Basic Elements

Containers

Devices

Layers

Preview Window

Scenes

Scroll/Paging

Shortcuts

System Status Bar

Triggers & Responses

Easing

Annotations

Responses

Timelines

Triggers

Formulas

Getting Started

Functions

Layer Properties

Syntax

Formulas Use Cases

Variables

Getting Started

Variables

Predefined Variables

Variables Use Cases

AI

Getting Started

AI Interaction Creation

AI Document Q&A

AI Panel Interface

Tips for Best Results

Auto Layout

Getting Started

Auto Layout Properties

Components

Getting Started

Component Guides

Editing Components

Nested Components

Send & Receive Messages

Interaction Libraries

Getting Started

Managing Interaction Libraries

Managing Library Members

Voice Prototyping

Getting Started

Listen Response

Speak Response

Use Cases

Voice Command Trigger

Connecting Devices

Connecting blokdots

Connecting Mobile Devices

ProtoPie Cloud

Getting Started

Managing Prototypes

Managing Storage

Sharing Prototypes

ProtoPie Player

Testing Prototypes

Managing Fonts

Offline Testing

ProtoPie Player for Wear OS

Teams

Getting Started

Editors & Viewers

Onboarding Your Team

Projects

Team Owner & Team Admin

Handoff

Getting Started

Creating Interaction Recordings

Managing Interaction Recordings

Recording Page

User Testing

Getting Started

Overview

Creating Test Rooms

External Integrations

Managing Test Sessions

Test Results & Analysis

User Testing on ProtoPie Cloud

ProtoPie Connect

Getting Started

API Plugin

Arduino Plugin

blokdots Plugin

Connect Embedded

Custom Layer Integrations

Custom Plugins

Connect Devices

Gamepad Plugin

IFTTT Plugin

Logitech G29 Steering Wheel Plugin

Testing Prototypes

Feature Comparison

Unity Plugin

ProtoPie Enterprise

Getting Started

Organization Settings

Service Admin

Single Sign-On (SSO)

Security

Overview

Access Control

Data Transit, Storage & Backup

Incident Response

Network & ProtoPie Player App Security

Physical Security

Risk Management

Importing From Sketch

There are two ways to import your designs from Sketch into ProtoPie.

  • Plugin (recommended): Install the ProtoPie plugin for Sketch and open the plugin in Sketch.

  • Legacy: Open the Sketch file that you would like to use for importing and open ProtoPie Studio. Select Import from the file menu in ProtoPie.

ProtoPie Plugin for Sketch

Download and install the ProtoPie plugin for Sketch, which requires ProtoPie 7.0 or higher. Learn more about installing plugins for Sketch.

With the ProtoPie plugin for Sketch, you have lightning speed and flexibility at your fingertips. Import your designs from Sketch into ProtoPie, all done locally–without any latency.

Control what you import. Import artboards as scenes, and objects with the same layer hierarchy, positioning, and constraints as in Sketch.

For the best performance, keep Sketch open and visible on your desktop while importing your designs into ProtoPie.

First time? Try the ProtoPie plugin for Sketch with this example file.

Supported Properties

  • Visibility

  • Lock

  • Position

  • Size

  • Rotation

  • Opacity

  • Constraints

  • Fill (solid color & image)

  • Borders

  • Shadow

Learn more about layer properties in ProtoPie.

Differences Between the Plugin and Legacy Import

The ProtoPie plugin for Sketch allows you to:

  • Import one or multiple artboards and objects.

  • Import artboards as scenes.

  • Import what you selected.

  • Import vector layers as SVG.

  • Import text layers as SVG that can be converted to text layers.

  • Import constraints as constraints.


Importing as Scenes

Import an artboard in Sketch as a scene in ProtoPie while keeping the same name. It's possible to import one or multiple artboards as scenes at once. Importing artboards as scenes is based on Sketch's layer hierarchy.


{'_type': 'localeString', 'en': 'sketch import plugin import as scenes'}
Importing Objects

Import objects with the same layer hierarchy, positioning, and constraints as in Sketch. It's possible to import one or multiple objects at once.

Components and component instances in Sketch are imported as containers. Convert them to components to keep them as components in ProtoPie. Learn more about components.


{'_type': 'localeString', 'en': 'sketch import plugin import objects'}
Importing as SVG

Import vector layers in Sketch as SVG (Scalable Vector Graphics) in ProtoPie. To make their properties editable, just convert them to shapes after importing. ProtoPie does not support all SVG properties yet. Learn more about SVG layers.

Importing Text Layers

Import text layers in Sketch as SVG in ProtoPie. To make their properties editable, convert them to text layers after importing. Learn more about text layers.

Reimporting

Generally, reimported artboards and objects from Sketch would replace what was imported before. However, there are some exceptions to consider.

  • If you changed some properties of an imported object in ProtoPie, reimporting would not affect this particular object.

  • If you changed the layer hierarchy after importing, reimporting would not affect this adjusted layer hierarchy. For example, you added an imported layer to a newly created scroll container.

  • A deleted imported layer would not be reimported, unless you select only this specific layer in Sketch and import this into ProtoPie.

  • If you want to have duplicates of a scene or object, just import it once and duplicate it. For example, you want an artboard from Sketch as 2 scenes in ProtoPie. Import this once and duplicate the scene to create a second one.

Importing as Scenes

Import an artboard in Sketch as a scene in ProtoPie while keeping the same name. It's possible to import one or multiple artboards as scenes at once. Importing artboards as scenes is based on Sketch's layer hierarchy.


{'_type': 'localeString', 'en': 'sketch import plugin import as scenes'}
Importing Objects

Import objects with the same layer hierarchy, positioning, and constraints as in Sketch. It's possible to import one or multiple objects at once.

Components and component instances in Sketch are imported as containers. Convert them to components to keep them as components in ProtoPie. Learn more about components.


{'_type': 'localeString', 'en': 'sketch import plugin import objects'}
Importing as SVG

Import vector layers in Sketch as SVG (Scalable Vector Graphics) in ProtoPie. To make their properties editable, just convert them to shapes after importing. ProtoPie does not support all SVG properties yet. Learn more about SVG layers.

Importing Text Layers

Import text layers in Sketch as SVG in ProtoPie. To make their properties editable, convert them to text layers after importing. Learn more about text layers.

Reimporting

Generally, reimported artboards and objects from Sketch would replace what was imported before. However, there are some exceptions to consider.

  • If you changed some properties of an imported object in ProtoPie, reimporting would not affect this particular object.

  • If you changed the layer hierarchy after importing, reimporting would not affect this adjusted layer hierarchy. For example, you added an imported layer to a newly created scroll container.

  • A deleted imported layer would not be reimported, unless you select only this specific layer in Sketch and import this into ProtoPie.

  • If you want to have duplicates of a scene or object, just import it once and duplicate it. For example, you want an artboard from Sketch as 2 scenes in ProtoPie. Import this once and duplicate the scene to create a second one.

Legacy Sketch Import

The legacy Sketch import allows you to import all layers, or only the layers that have been marked as exportable, from your Sketch files.

Artboard

Select the artboard from Sketch that will be imported

Import Size

Set the magnification factor for layers. This can be changed based on the size of the selected artboard in Sketch

All layer structure

All layers from an artboard are imported in a folder structure

Exportable layers

Only layers that have been set to "exportable" are imported

Overwrite positions of layers

Overwriting position values of layers when re-importing an artboard from Sketch

Overwrite sizes of layers

Overwriting size values of layers when re-importing an artboard from Sketch

Update layer orders and grouping structure

Update layer orders and grouping structure when re-importing an artboard from Sketch

Remove layers deleted in Sketch

Remove layers that have been deleted in Sketch when re-importing an artboard from Sketch

Artboard

Select the artboard from Sketch that will be imported

Import Size

Set the magnification factor for layers. This can be changed based on the size of the selected artboard in Sketch

All layer structure

All layers from an artboard are imported in a folder structure

Exportable layers

Only layers that have been set to "exportable" are imported

Overwrite positions of layers

Overwriting position values of layers when re-importing an artboard from Sketch

Overwrite sizes of layers

Overwriting size values of layers when re-importing an artboard from Sketch

Update layer orders and grouping structure

Update layer orders and grouping structure when re-importing an artboard from Sketch

Remove layers deleted in Sketch

Remove layers that have been deleted in Sketch when re-importing an artboard from Sketch