チームで使うUIのルールをひとつに
プロダクトに合ったライブラリを作成
ボタンや入力欄をコンポーネントにし、共通の色や文字設定をスタイルとして管理できます。プロダクトに合った部品とルールをまとめ、チームで使えるデザインシステムを育てましょう。
色とテキストスタイルを共通化
ブランドカラーや見出し・本文の文字設定をスタイルとして保存できます。画面ごとに同じ設定を繰り返す手間を減らし、配色やタイポグラフィを揃えられます。
必要な部品をライブラリから再利用
チームのライブラリからコンポーネントを選び、作業中のファイルで使えます。更新内容をライブラリに公開することで、別のファイルを使うメンバーにも変更を共有できます。
状態やサイズをまとめて管理
コンポーネントとバリアントを作成
ボタンの通常時・ホバー時やサイズ違いを、バリアントとしてひとつのセットにまとめられます。プロパティを切り替えることで、画面に必要な状態を選べます。
チームライブラリに公開して共有
作成したコンポーネントとスタイルをチームライブラリに公開できます。共通の部品を使うことで、メンバーごとに似た要素を作り直す手間や、画面間のばらつきを減らせます。
部品を再利用して画面を組み立てる
同じコンポーネントを複数の画面に配置し、必要なテキストや画像を調整できます。共通部分を再利用すれば、レイアウトや操作の流れを検討する時間を確保できます。
デザインシステムを日々の制作に活かす
コミュニティの素材を制作の出発点に
オートレイアウトで部品を柔軟に
開発者とデザインの仕様を共有
同じファイルで共同編集とレビュー
制作と運用を支える機能
ベクターデザイン
ペンツールや図形、ブール演算を使い、アイコンやイラストを作成できます。パスを調整して、画面に合う形に仕上げられます。
スマート選択
複数のレイヤーを行や列に整列し、間隔を調整できます。カード一覧やアイコンのグリッドを整理するときに役立ちます。
ファイル互換性
SketchやAdobe XDのファイルをインポート・エクスポートできます。SVGも取り込んで編集でき、既存のデザイン素材を制作に活かせます。
テンプレートの活用
テンプレートを出発点に、レイアウトや要素のスタイルを調整できます。共通の画面構成を用意しておけば、新しい画面の制作も始めやすくなります。
アクセス権限
ファイルを共有する前に、閲覧と編集の権限を設定できます。共同編集するメンバーとレビュー担当者のアクセス範囲を分けられます。
開発者への引き渡し
開発者は共有されたデザインから寸法、色、文字設定、コード情報を確認できます。必要なアセットを取得し、実装の参考にできます。
ゲストモード
共有リンクを受け取った人は、設定された権限の範囲でデザインを確認できます。外部のレビュー担当者に見せる際は、ファイルの公開範囲を選べます。
バージョン履歴
作業の節目に名前を付けてバージョンを保存できます。履歴から以前の状態を確認し、必要なバージョンに戻せます。