SPIDERPLUS Tech Blog

建設SaaS「スパイダープラス」のエンジニアとデザイナーのブログ

プロトタイプの出来栄えが劇的に変わるUXPinとは?


こんにちは、UI/UX部でデザインエンジニアをしている中田です。

デザインも開発も、もっとスムーズに連携したいと思いませんか?

弊社では現在、Figmaを使ってデザインを進めていますが、エンジニアとの連携や意図がうまく伝えられないといった課題を抱えています。

そこで今回紹介したいのがUXPinです。

UXPinなら、デザインシステムとシームレスに連携できて、開発スピードもアップ!

しかも、高精度なプロトタイプで、クライアントやエンジニアへのプレゼンもバッチリです。

UXPinとは?

UI自体は他のデザインツールと似たような感じです。

UXPinの特徴

メリット
  1. 高度なプロトタイピング
    シンプルなユーザー操作に合わせたアニメーションだけでなく、条件分岐などのロジックを設定することで、高度なインタラクションを表現できます。
    これは実際に触ってみてシンプルなものだと簡単にボタンをポチポチするだけでアニメーションを設定出来るので非常に使いやすいと感じました。

    以下のリンク先をクリックしてすぐに表示される動画をご参照ください。

    www.uxpin.com

  2. デザインシステムとのシームレスな統合
    デザイナーがデザインシステムで定義されたコンポーネントを直接使用し、プロトタイプを作成できます。
    これにより、デザインと開発の連携が強化され、両チームが共通の言語でコミュニケーションできるようになります。

  3. 他ツールとの連携
    Figma、Sketch、Adobe XDなど、様々なデザインツールとの連携が可能です。
    ただし、Figmaとの連携においては、コンポーネントの引き継ぎ時にレイアウトが崩れるなどの課題が見られました。
    複雑なコンポーネントをそのまま流用するのは難しいかもしれません。
デメリット
  1. 学習コスト
    多機能であるため、習得に時間がかかる場合があります。
    無料トライアル中はUXPinの方がオンラインデモをしてくれたり手厚いサポート自体はあるのでうまく活用できれば学習コストは抑えられるかもしれません!

  2. モバイルプロトタイプの制限
    デスクトップアプリのプロトタイプ作成には優れていますが、モバイルアプリに関しては、ProtoPieなどの他のツールがより適している場合があります。
    例えばモバイルではよくあるコンポーネントをドラッグ操作等もプロトタイプ上で表現は出来ませんでした。

  3. 日本語未対応
    ツール自体は2024年9月時点では日本語に対応していません。
競合ツールとの比較
  • デザイン機能
    UXPinはインタラクティブなプロトタイプ作成に特化しており、デザイン機能だけでみると他のデザイン特化のツールに比べるとはFigmaにやや劣ります。
  • プロトタイピング機能 
    UXPinは高度なプロトタイピング機能を備えており、実際のアプリのような動きを表現できます。
  • 価格
    無料プランでは機能が制限され、本格的に利用するには有料プランの契約が必要となります。

まとめ

UXPinは、高度なプロトタイプ作成機能やデザインシステムとのシームレスな統合が魅力のツールです。
特に、インタラクティブなプロトタイプを作成したい場合や、デザインシステムを構築したい場合におすすめです。
ただし、学習コストや日本語未対応といった点も考慮する必要があります。
無料トライアルで、UXPinがあなたのデザインプロセスをどのように効率化できるか、ぜひご自身で体験してみてください!


皆さんもデザインツールを見直してみませんか。プロトタイプに革命が起きるかもしれませんよ!
なお、スパイダープラスでは仲間を募集中です。
革命後の世界を生きている同士はもちろん、やってみたいけど今ひとつ勇気が出なかったなどなど、UXPin活用やスパイダープラスにちょっと興味が出てきたなという方がいらっしゃったらお気軽にご連絡ください。

 

※本記事はあくまで個人的な見解であり、製品の推奨を目的としたものではありません。