PIXSO デザインシステム
チームで育てるデザインシステムツール
同じコンポーネントとスタイルを、チーム共通の土台に。柔軟に使えるUIライブラリを作成し、変更を複数のプロジェクトへ共有。独自のデザインシステムをPixso AIでも活用できます。
ブラウザで作成し、チームと共有。
使えるデザインを繰り返し活用
共有コンポーネントとスタイルを組み合わせて、画面を作成できます。
更新を無理なく管理
ライブラリの変更を公開し、各ファイルに適用するタイミングを選べます。
チームのデザインをAIにも
AIの利用を許可したライブラリから、編集可能な画面を生成できます。
チーム共通の土台
必要な要素が見つかり、すぐに使える
デザイン中にそのまま使えるコンポーネントライブラリを、チームの手元に。ボタン、入力欄、ナビゲーションを、プロダクトの印象を統一する色や文字スタイルとまとめて管理できます。
繰り返し使うUIをコンポーネントに
既存のレイヤーからコンポーネントを作成し、必要な場所にインスタンスを配置。説明を添えれば、チームメンバーにも使い方が伝わります。
一度決めたスタイルを、複数の画面で
色、テキスト、エフェクト、レイアウトグリッドをスタイルとして保存。コンポーネントと一緒に公開すれば、別のファイルでも同じデザインルールを使えます。
一貫性と柔軟性を両立
ひとつのコンポーネントを、さまざまな場面に
使いやすいコンポーネントは、ひとつの例だけでは終わりません。サイズや状態をバリアントとして整理し、必要な選択肢を用意。基本のデザインを作り直さずに使い分けられます。
関連する状態をひとつのセットに
ボタンのサイズや状態をコンポーネントセットに整理。画面を組み立てながら、サイズや状態などの名前付きプロパティでバリアントを切り替えられます。
変更する部分だけを操作しやすく
テキストの編集、レイヤーの表示・非表示、入れ子のインスタンスの差し替えをプロパティとして設定。同じコンポーネントを使いながら、必要な部分を調整できます。
チームで使うライブラリ
プロジェクトの一貫性を、更新の管理から
元のファイルでコンポーネントを改善し、変更をライブラリに公開。利用しているファイルには更新が通知されるため、各チームのタイミングで変更を取り込めます。
変更内容と、その背景を共有
追加・修正したコンポーネントやスタイルを、説明付きで公開。チームメンバーは変更されたリソースをまとめて確認でき、別々のコピーを比べて差分を探す手間を減らせます。
必要な更新だけでも、まとめてでも
ライブラリの更新一覧から、項目ごと、または一括で変更を適用できます。同じファイル内のメインコンポーネントを変更した場合は、紐づくローカルインスタンスへ直接反映されます。
独自のデザインシステムをPixso AIで
チームらしいデザインから、新しい画面へ
ライブラリは、デザイナーだけでなくAIの土台にもなります。公開済みライブラリでAIの利用を許可し、Pixso AIで選択。作りたい画面を言葉で伝えられます。
作りたい画面に合う土台をAIに
ダッシュボード用のライブラリなら、その画面に適したコンポーネントとスタイルをPixso AIに渡せます。用途に合うライブラリを選び、キャンバス上に編集可能なデザインを生成できます。
生成した後も、そのまま編集
生成されたレイヤーを編集し、プロダクトに合わせて調整。必要なモジュールがライブラリにない場合は、無関係なコンポーネントを当てはめるのではなく、AIがその部分を生成できます。
ライブラリを支える機能
デザインシステムを日々の制作に
オートレイアウト
内側の余白、要素間の間隔、配置を設定し、文字やコンテンツの変化に対応するレイアウトを作成できます。
ファイルのインポート
Figma、Sketch、Adobe XDのファイルをPixsoに取り込み、既存のデザインから制作を始められます。
デザインに添えるコメント
コンポーネントのそばで意見を交わし、メンバーをメンション。フィードバックを該当箇所に残せます。
閲覧・編集権限
制作、レビュー、デザインファイルの利用など、役割に合った権限でメンバーを招待できます。
バージョン履歴
重要な節目に名前を付けてバージョンを保存。デザインを振り返ったり、以前の状態へ戻したりできます。
開発への引き継ぎ
開発者向けの表示を共有し、寸法やスタイル情報の確認、書き出し用に用意した素材のダウンロードにつなげられます。