Soda Design は、ProtoPioneersコミュニティ にいる才能ある ProtoPie ユーザーの一人です。彼女の楽しいチュートリアルでは ProtoPie の基本を学べるほか、初めてのユーザーが重要な UI インタラクションを作成できるよう、わかりやすい手順も紹介しています。
はじめに
Soda Design は、自分に合ったプロトタイピングツールを見つけるまでの道のりを紹介します。この動画では、最終的に ProtoPie を選んだ理由を説明しています。
基本機能
ProtoPie を初めて使う方は、基本機能が何かを知っておくと役立ちます。Soda Design が、以下の動画でそれらを案内します。
このチュートリアルでは、以下を学びます。
インポート
Figma からデザインをインポートするには?
ご注意:このチュートリアルでは従来のインポートを使用しています。2020年12月に、ProtoPie Plugin for Figma を導入しました。
メディア
画像、動画、音声、Lottie などのメディアを追加するには?
保存と共有
プロトタイプを保存するには?
プロトタイプを共有するには?
このチュートリアルでは、以下を学びます。
デバイス
デバイスを選択するには?
デバイスフレームを有効/無効にするには?
背景色を変更するには?
システムステータスバーを使用するには?
レイヤー
レイヤーのプロパティはどのように機能しますか?
コンテナー
コンテナーとは?
iOS の背景ぼかし
iOS 背景ぼかしを追加するには?
この動画では、特にテキストレイヤーと入力レイヤーを取り上げます。これらの使い方を学びましょう。
テキストレイヤー
テキストレイヤーのプロパティには何がありますか?
入力レイヤー
入力レイヤーのプロパティには何がありますか?
キーボードを変更するには?
基本機能に慣れたら、基本的なインタラクションの作成に進みましょう。
基本的なインタラクション パート 1
ここでは、Soda Design が、私たちの概念モデルに基づいた基本的なインタラクションの作成方法を説明します。
基本的なインタラクション パート 2
第2部では、次の内容を使って高度なインタラクションの作成方法を学びます。
Soda Design のヒントやチュートリアルをもっと見たい方は、YouTube チャンネルをご覧ください。また、さらにインスピレーションを得るために、Twitter と Instagram もフォローしてください。
*また、私たち独自の ProtoPie School (https://learn.protopie.io/)*では、ProtoPie の使い方を A から Z まで学べる無料の学習コンテンツをご利用いただけます。




