デザイナーと開発者が同じプロジェクトで一貫したUI設計が出来るよう配慮されたReact.js向けUIフレームワーク・「Atomize React」

Atomize React

Atomize ReactはオープンソースのReact.js向けUIフレームワークです。デザイナーと開発者が同じプロジェクトで作業するにあたって一貫したUIを設計できるよう配慮されているそうです。

アトミックデザインを導入する事でデザイナーの指示に細部まで即座に対応可能になっており、スタイルガイドに沿ったテーマ設計を徹底する事で一貫したUI設計をしやすいように工夫してある他、カスタマイズやコンポーネントの追加も出来るようになっています。

当然ですが、最低条件として開発者はアトミックデザインを理解している必要があります。

サンプル

サンプルのソート機能付き検索ボックスです。

import {
  Button,
  Div,
  Text,
  DefaultTheme,
  StyleReset
} from "atomize";

使いたいコンポーネントをimportしてセッティングします。

const buttons = [
  {
    title: "Search",
    icon: "Search",
    bg: "warning700",
    hoverBg: "warning600",
    color: "white"
  },
  {
    title: "Bookmark",
    icon: "BookmarkSolid",
    bg: "info700",
    hoverBg: "info600",
    color: "white"
  }
];

コンポーネントは他にもいろいろあるので見てみてください。ライセンス名は明記ありませんがライセンスファイルがあるのでご確認の上でご利用を。

Atomize React