シェア
Kumi
2022年1月30日 02:18
# はじめに- About ProtoPie Tips# ProtoPie Tips の対象読者- ProtoPie でなんとなく動く画面（紙芝居）が作れる方- プロトタイピングスキルを上げたい方- ユーザーテスト用に動的なプロトタイプを作りたい方- Figma などUI作成ツールが使える方ある程度 ProtoPie の操作に慣れている方を対象にしています。# Foundatio
2022年1月30日 02:21
ProtoPieである程度動的なプロトタイプを作る時、変数の理解が必要になってきます。 ProtoPieの変数は難しいものではないので、使えるようにしておきましょう。変数とは？変数とは名前を付けて値を保存しておけるものです。変数に保存した値は、時間経過や画面タップなどのトリガーに応じてインタラクティブに書き換えることが可能です。ProtoPieの変数は初心者でも扱い易くなっていますので、複
2022年1月30日 02:24
ProtoPieの変数について少しでも良いので理解できたら、実際に変数を使って変数の中身を表示してみましょう。今回は変数のテキスト型を使って、画面に文字列を表示させます。1. 変数の中身を表示するテキストを用意する画面にテキストボックスを配置します。ここで表示されているテキストは変数の中身に置き換わるので、空欄でも構いません。2. 変数を定義する左側のレイヤーパネル下の変数エ
2022年1月30日 02:25
動的プロトタイプを作るとき、ステータス管理という手法を用いるとより複雑な条件分岐を管理できるようになります。今回は簡単な例を用いて説明していきます。ステータス管理とは？プロトタイプを実際に操作するユーザーの操作状態を管理することを指します。ユーザーの操作状態は、例えば以下のようなものがあります。・ユーザーが選択したもの（項目など）・ユーザーアクション（タップした/しない など）
2022年1月30日 04:48
ProtoPieを使って簡単なプロトタイプを作りましょう。まずは、ボタンを押すことで画面遷移していくプロトタイプを作ってProtoPieに慣れましょう。今回はFigmaで作成した画面を使ってプロトタイプを作成します。FigmaのプラグインをインストールProtoPieにはFigmaから直接ProtoPieに画面を読み込めるプラグインがありますので、事前にインストールしておきましょう。
2022年4月17日 18:55
前回の記事でステータス管理についてどんなものか簡単にご説明しました。説明を読んで直感的に理解できない部分もあると思いますので、今回は実際に簡単なステータス管理を実装して理解します。実装するものユーザーが選択したボタンの番号によって、次の画面で番号の英表記を表示するプロトタイプ1. 2つのシーンを用意するお好きなデバイスサイズでシーンを2つ用意します。1つは、ユーザーが選択するボタ
2022年4月17日 19:24
Scroll Containerの作り方Protopie でスクロールを実装するときは「Scroll Container」を使用します。↑ Scroll Container を選択し、スクロールさせたいエリア(可動域)を作成します。↑ スクロールさせたいエリアを作成したら、コンテナの下階層にスクロールさせたいコンテンツを入れます。↑ Scroll Container を選択し、右ナビ
2022年4月17日 20:48
OSのSystem Dialogなど、PopUpでDialogを表示するシーンはプロトタイプを作るときに良く登場します。変数を使わない簡単な設定で実装できますので、覚えておきましょう。用意する要素Dialog 表示のTriggerとなるUI画面をカバーするフルスクリーンのOverlayDialogのUI実装方法↑ Dialogをコンテンツの上に表示したいので、レイヤー構成は、ov
