ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Chakra UIというのはReact向けに開発されているシンプルなUIコンポーネントです。Reactではコードの中にHTML構造が入り込んでいるので、デザイナーにとっては作業しづらいイメージがあります。

そこで使ってみたいのがOpenChakraです。ドラッグ&ドロップでChakra UIを使ったデザインを行えます。

OpenChakraの使い方

左側にあるパーツをドラッグ&ドロップしてデザインします。

プロパティを使って細かな調整も行えます。

作成したデザインはCodeSandboxで試せます。

OpenChakraを使えばChakra UIにあるUIコンポーネントを閲覧しつつ、デザインを進められます。コンポーネントも多数あるので、それが一覧になっていると分かりやすいでしょう。OpenChakraを使えばプログラマーであってもデザインがさくさく進められそうです。

OpenChakraはTypeScript製のオープンソース・ソフトウェア(MIT License)です。

OpenChakra

premieroctet/openchakra: ⚡️ Visual editor for Chakra UI

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2