業務システム向け量産型
デザインシステム

Fixel Design Systemは、日本の業務システムで良く使われるコンポーネントを デザインからコードまでオールインワンで提供します。

FDS UI Kit Open in Figma

コードを確認する UXHub UXHub Preview

launch

(*)Figmaは、FIGMA, INC.の
商標または登録商標です

強力なデザインパートナー、 UI Kit

開発チームにデザイナーが居ませんか?
FDS UIKitは、日本の業務システムで良く使われる
UI部品と画面のレイアウト、使用例を含めたガイドも記載されているので、デザインに悩む事なくUIを作成する事ができます。

FDS UI Kit Open in Figma

FDS Ui Kitには、業務システムで良く使われるレイアウトパターンが予め用意されており、 DrawerやHeader のタイプなど、画面の土台を選ぶところから作業がスタートします。

① 豊富で柔軟なレイアウト

グリッドやサイズに迷う事もありません。UI Kitのテンプレートに、必要なUIをドロップ・あるいはスワップする事で、誰でも素早く均整のとれた画面レイアウトを組む事ができます。

② ドラッグ&ドロップで画面作成

配置したUIコンポーネントは簡単に入れ替える事ができ、複数の画面をスピーディに作成する事ができます。厳選されたUIコンポーネントは、プロパティパネルでプロパティ設定できるようになっています。

③ 厳選されたUIでカスタマイズも簡単に

プラグインによる
テーマ作成と
トークン管理

FDS Design Tokens Pluginを使えば、色彩の知識が無くても美しい配色パレットを作る事ができます。
新しく作成したテーマはデザイントークンとしてバージョン管理をしたり、エクスポートして抽出してシステムに反映できます。

FDS Design Tokens Plugin マニュアルサイト

launch

キーカラーを選ぶだけで、プラグインが自動で最適なテーマを作成します。 ImageMappingのダミー画面を見ながら操作すれば、プロダクトの配色イメージを確認しながら、色の検討をする事もできます。

① キーカラーを選んでテーマ変更

個別設定モードでは、カラースケールを変更したり、例えばHoveredだけ特別な色にしたりと、自由に個性的なテーマを作る事ができます。

② 細かいカスタマイズも可能

プラグインを使う事で、ひとつのUI Kitから複数のテーマを作り出す事ができます。

③ テーマのバージョン管理もできます

デザインと
コードを繋ぐ
UXHub

FDS UI Kitで定義したデザイントークンを読込むと、即座にデザインシステムへスタイルが反映されます。UXHub上でトークンを直接編集し、FDS UI Kitへ読込み、デザイン検証する事も可能です。
困った時にはコミュニティーによる日本語サポートが充実しているところも特徴です。必要な場合はプロフェッショナルサービスのセクションを設け、デザインシステムの構築と運用に対する全般的な支援を経験豊富なデザイナーとエンジニアで行います。

業務システムのUIデザインに対する
ノウハウが詰まっています Fixelが14年間を通じて蓄積した、業務システムにおけるUX/UIデザインのベストプラクティスが凝縮されたFDS UI Kitと
それをReactやVue.jsなどの汎用的なコードで実装した、日本の業務システムに最適なUIコンポーネントの両方を使うことで
日本の業務システムに最適なUIデザインとフロントエンドの実装が、誰にでも実現できます。