ProtoPie MCP ベータ版を提供開始!詳しくはこちら。

ProtoPie MCPのベータ版が提供開始!

Introducing ProtoPie

始める

Making Your First Prototype

ProtoPie Ecosystem

ProtoPie Studio Interface

Import

始める

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

始める

Functions

Layer Properties

Syntax

Formulas Use Cases

Variables

始める

Variables

Predefined Variables

Variables Use Cases

AI

始める

AI Interaction Creation

AI Document Q&A

AI Panel Interface

Tips for Best Results

ProtoPie MCP

Getting Started

Studio MCP 概要

Studio MCP インストールとセットアップ

Code MCP 概要

Code MCP インストールとセットアップ

Dev View

Auto Layout

시작하기

Auto Layout Properties

Components

始める

Component Guides

Editing Components

Nested Components

Send & Receive Messages

Interaction Libraries

始める

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

始める

Managing Prototypes

Managing Storage

Sharing Prototypes

ProtoPie Player

Testing Prototypes

Managing Fonts

Offline Testing

ProtoPie Player for Wear OS

Teams

始める

Editors & Viewers

Onboarding Your Team

Projects

Team Owner & Team Admin

Handoff

始める

Creating Interaction Recordings

Managing Interaction Recordings

Recording Page

User Testing

始める

Overview

Creating Test Rooms

External Integrations

Managing Test Sessions

Test Results & Analysis

User Testing on ProtoPie Cloud

ProtoPie Connect

始める

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

始める

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

始める

Making Your First Prototype

ProtoPie Ecosystem

ProtoPie Studio Interface

Import

始める

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

始める

Functions

Layer Properties

Syntax

Formulas Use Cases

Variables

始める

Variables

Predefined Variables

Variables Use Cases

AI

始める

AI Interaction Creation

AI Document Q&A

AI Panel Interface

Tips for Best Results

ProtoPie MCP

Getting Started

Studio MCP 概要

Studio MCP インストールとセットアップ

Code MCP 概要

Code MCP インストールとセットアップ

Dev View

Auto Layout

시작하기

Auto Layout Properties

Components

始める

Component Guides

Editing Components

Nested Components

Send & Receive Messages

Interaction Libraries

始める

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

始める

Managing Prototypes

Managing Storage

Sharing Prototypes

ProtoPie Player

Testing Prototypes

Managing Fonts

Offline Testing

ProtoPie Player for Wear OS

Teams

始める

Editors & Viewers

Onboarding Your Team

Projects

Team Owner & Team Admin

Handoff

始める

Creating Interaction Recordings

Managing Interaction Recordings

Recording Page

User Testing

始める

Overview

Creating Test Rooms

External Integrations

Managing Test Sessions

Test Results & Analysis

User Testing on ProtoPie Cloud

ProtoPie Connect

始める

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

始める

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

数式

数式と変数を使えば、本当に命を吹き込んだようなプロトタイプを作成できます。数式は、インタラクションにロジックを追加できる式です。パスワードの検証からショッピングカート内の商品数のカウント、さらには口座残高の合計計算まで、数式があればすべて実現できます。

ProtoPieの数式機能を使えば、レイヤープロパティにアクセスし、計算を行い、文字列操作や高度な数学などのタスクに幅広い関数を利用できます。

数式は数式入力フィールドを使って追加します。必要に応じて、レイヤープロパティ、関数、変数を入力するだけです。すぐに参照したいですか? + アイコンをクリックして、利用可能なレイヤーと変数を確認できます。


{'_type': 'localeString', 'en': 'formulaInput'}

ヒント: Labs改良された数式入力フィールド を有効にすると、数式内で使われている変数がローカルかグローバルかをすばやく判別できます。ローカルはアクティブなシーンでのみ使用できることを意味し、グローバルはすべてのシーンで使用できることを意味します。


{'_type': 'localeString', 'en': 'An icon indicating the variable scope appears when typing out a variable name.'}

数式は初めてですか?心配いりません。ProtoPieの数式を最大限活用するためのリソースをご紹介します。

  • 構文 — どんな言語にもルールと原則があるように、数式にも独自のルールと原則があります。構文を学んで、自信を持って最初の数式を作成しましょう。

  • レイヤープロパティ — 幅広いレイヤープロパティを使って、インタラクションに命を吹き込みましょう。レイヤープロパティを使いこなすことは、動的なプロトタイプを作る第一歩です。

  • 関数 — 特定のタスクを実行するあらかじめ用意された数式を活用しましょう。関数はデータを処理して結果を返し、プロトタイプをさらに強力にします。

  • ユースケース — 数式を効果的に使う実践例を見てみましょう。実際のシナリオから学び、その知識を自分のプロジェクトに活かしてください。

数式と変数の違い

数式と変数は連携して、プロトタイプをさらに高めます。ここで、その関係を簡単に説明します。

変数: 変数は値を保持する便利な「かご」のようなものです。データを保存して取り出せるため、プロトタイプ全体で情報を再利用しやすくなります。変数は単独でも、数式と組み合わせても使用できます。たとえば、変数に保存された値を取得するために数式を使います。

数式: 数式は結果を計算して「返す」式です。動的なインタラクションを作成するための強力なツールです。数式を使えば、計算、テキスト操作、さまざまなタスクを実行できます。数式には、保存された値にアクセスするための変数を含めることもできます。

数式と変数の相乗効果により、プロトタイプを次のレベルへ引き上げることができます。変数には数式で利用できる値を保存でき、数式自体も変数内に保存して、シーンをまたいで再利用できます。

要するに、数式と変数は互いを補完し、プロトタイプ開発の柔軟性と効率を高めます。

詳しく見るで変数について学びましょう。

基本を学ぶ

数式は難しそうに見えるかもしれませんが、思うよりずっと取り組みやすいものです。ほんの少しの数式で、誰でも動的なインタラクションを作成できます!

このビデオチュートリアルでは、ProtoPieを使って魅力的なインタラクションを作成する方法を学びます。シーンのどこにあっても、ある長方形レイヤーを別の長方形レイヤーの位置へ移動する様子をご覧ください。

レイヤープロパティについて、また簡単な計算の方法について学びましょう。

例で練習する

タブバーを作る

動的に反応させるには、固定値ではなく数式を使います。このビデオチュートリアルでは、数式を使ってシンプルなタブのインタラクションをアニメーション化する方法を紹介します。

レイヤープロパティについて、また簡単な計算の方法について学びましょう。


{'_type': 'localeString', 'en': 'formula menu'}

入力レイヤーのテキストを使う

変数に保存されたテキスト情報を表示するためにも数式を使えます。このビデオチュートリアルでは、シンプルな数式を使ってテキストを入力し、別の場所に表示する方法を紹介します。

入力レイヤーレイヤープロパティについて学びましょう。


{'_type': 'localeString', 'en': 'formula input'}

実践的なユースケースをお探しですか? 詳しく見るで数式の実践的なユースケースをご覧ください。