マガジンのカバー画像

Protopie Tips

9
本
ProtopieのTipsをまとめています
運営しているクリエイター
Kumi
Kumi

Kumi

About ProtoPie Tips

About ProtoPie Tips

ProtoPie Tips は社内のUIUXデザイナーのプロトタイピングスキル向上に繋がれば良いなという思いから、ノウハウ共有を目的として始めました。

noteに公開することで、他の誰かのお役にたてれば嬉しいです。

Special Thanks to Gina!!
Thank you for introducing me to ProtoPie.

Kumi

Kumi

ProtoPieの変数

ProtoPieの変数

ProtoPieである程度動的なプロトタイプを作る時、変数の理解が必要になってきます。 ProtoPieの変数は難しいものではないので、使えるようにしておきましょう。

変数とは？変数とは名前を付けて値を保存しておけるものです。
変数に保存した値は、時間経過や画面タップなどのトリガーに応じてインタラクティブに書き換えることが可能です。
ProtoPieの変数は初心者でも扱い易くなっていますので、複

もっとみる
Kumi

Kumi

変数の中身を表示する

変数の中身を表示する

ProtoPieの変数について少しでも良いので理解できたら、実際に変数を使って変数の中身を表示してみましょう。

今回は変数のテキスト型を使って、画面に文字列を表示させます。

1. 変数の中身を表示するテキストを用意する

画面にテキストボックスを配置します。
ここで表示されているテキストは変数の中身に置き換わるので、空欄でも構いません。

2. 変数を定義する

左側のレイヤーパネル下の変数エ

もっとみる
Kumi

Kumi

ステータス管理

ステータス管理

動的プロトタイプを作るとき、ステータス管理という手法を用いるとより複雑な条件分岐を管理できるようになります。

今回は簡単な例を用いて説明していきます。

ステータス管理とは？プロトタイプを実際に操作するユーザーの操作状態を管理することを指します。

ユーザーの操作状態は、例えば以下のようなものがあります。

・ユーザーが選択したもの（項目など）
・ユーザーアクション（タップした/しない など）

もっとみる
Kumi

Kumi

はじめてのProtoPie

はじめてのProtoPie

ProtoPieを使って簡単なプロトタイプを作りましょう。
まずは、ボタンを押すことで画面遷移していくプロトタイプを作ってProtoPieに慣れましょう。

今回はFigmaで作成した画面を使ってプロトタイプを作成します。

FigmaのプラグインをインストールProtoPieにはFigmaから直接ProtoPieに画面を読み込めるプラグインがありますので、事前にインストールしておきましょう。

もっとみる
Kumi

Kumi

ProtoPie Tips

ProtoPie Tips

# はじめに- About ProtoPie Tips

# ProtoPie Tips の対象読者- ProtoPie でなんとなく動く画面（紙芝居）が作れる方
- プロトタイピングスキルを上げたい方
- ユーザーテスト用に動的なプロトタイプを作りたい方
- Figma などUI作成ツールが使える方

ある程度 ProtoPie の操作に慣れている方を対象にしています。

# Foundatio

もっとみる