まずは手元に残る資料を確認
画面の画像だけでなく、元の編集ファイル、画面遷移、過去のコメントや仕様も確認します。移行先で必要になる資料から順に整理すると、作業範囲を決めやすくなります。
元の編集ファイルを探す
Sketchなどで作成した元ファイルと、書き出した画像を分けて整理します。編集可能なデータが残っているかによって、移行方法が変わります。
操作と状態を記録する
ログインや予約などの主要な操作フローを確認し、通常時だけでなくエラーや空の状態も記録します。再現が必要な動作を先に決めておきましょう。
共通の部品を整理する
ボタン、フォーム、文字や色のルールを整理します。旧ファイルにある部品をそのまま移すか、現在の仕様に合わせて作り直すかをチームで決めます。
Pixsoで制作とレビューをまとめる
ブラウザで画面を編集し、プロトタイプを共有してチームと検討できます。代表的な画面を一つ移し、作成から開発への共有までの流れを試しましょう。
画面とプロトタイプを同じファイルで管理
UIを作成したら、画面をつないでクリックやタップに応じた遷移を設定します。デザインと操作の流れを同じ場所で確認できるため、修正対象をチームで共有しやすくなります。
無料で始める
コンポーネントで共通部分を再利用
コンポーネントのバリアントでサイズや状態を管理し、自動レイアウトで内容の変化に対応できます。移行時に共通部分を整理すると、その後の画面追加や修正にも活用できます。
無料で始める
| 確認する作業 |
 Pixsoで進める作業
|
 旧InVisionの資料整理
|
|
|---|---|---|---|
| {{key}} |
{{item}}
|
||
既存のデザインファイルを活用
Figma
.fig
Sketch
.sketch
Axure
.zip
XD
.xd
対応する形式のファイルを取り込んだら、フォント、画像、コンポーネント、画面遷移を確認します。チームで必要な画面から移行し、デザインとプロトタイプ、開発者向けの情報を整理しましょう。
Pixsoへの移行でよくある質問
1. 共有ファイルの編集権限は設定できますか？
ファイルの共有時に、閲覧または編集の権限を設定できます。チームの役割に合わせて共有範囲を選び、不要になったアクセス権限は見直しましょう。
2. コンポーネントのバリアントは何に使いますか？
サイズや状態が異なる部品をまとめて管理する機能です。ボタンなら「大・中・小」や「通常・ホバー・無効」などのプロパティを用意し、配置した画面で必要な値に切り替えられます。
3. 既存のデザインファイルを移すにはどうすればよいですか？
Pixsoのワークスペースから対応形式のファイルを取り込みます。まず代表的なファイルで、フォント、コンポーネント、画像、プロトタイプの再現を確認し、必要な修正範囲を把握してください。
4. チームからのフィードバックはどう集めますか？
共有したデザインの該当箇所にコメントを残せます。メンションで担当者に知らせ、どの画面の何を変更するかを同じファイル上で確認できます。
5. 組織のデータ管理要件は相談できますか？
共有権限や運用ルールに加え、プライベート環境への導入についても相談できます。保存環境、利用人数、システム連携などの要件を整理してお問い合わせください。
移行先は、普段の画面を使って比較しましょう。必要なフォントと部品を扱えるか、レビューする人が開けるか、開発者が仕様を確認できるかを、同じ作業で試すと判断しやすくなります。
移行時に確認するポイント