スマホやWebページでよく見かけるUIコンポーネントのデザインと実装コードの無料ライブラリ -Eva Design System
Post on:2019年7月16日
Webサイト・スマホアプリ用のさまざまなUIコンポーネントのデザイン素材とそれを実装するコード、480醜類のSVGアイコンなどがすべてセットになったWebコンポーネントライブラリを紹介します。
UIコンポーネントを使用したReact NativeアプリやAngular UIライブラリもあり、オープンソースでさまざまなプロジェクトに利用できます。

Eva Design System
Eva Design System -GitHub
Eva Design Systemの特徴
Eva Design Systemはデザイン素材もコードもMITライセンスで、個人でも商用のプロジェクトでも利用できるUIコンポーネントのライブラリです。

Webサイト・スマホアプリ用のさまざまなUIコンポーネントのデザイン素材とそれを実装するコード、SVGアイコンなどが揃っています。

Eva Design Systemのダウンロード
ダウンロードは、下記ページから。
Sketchのデザイン素材、コード、アイコンがそれぞれダウンロードできます。

Eva Design Systemのデモ
デモではWebサイト・スマホアプリでの動作を確認できます。

40以上のUIコンポーネント、4つのビジュアルテーマ、認証およびセキュリティモジュールを備えたEva Design Systemの仕様に基づいたAngular UIライブラリ。

Eva Design SystemのUIコンポーネントを使用したReact Nativeアプリ。
Eva Design SystemのUI素材
UIコンポーネントのデザイン素材をいくつか見てみましょう。
Sketch用ですが、Adobe XDも利用できます。

素材の使い方

テーマカラー、ダークモードもあります

画像のオーバーレイ

タイポグラフィ

シンボル

シンボル

コンポーネント

アイコン
sponsors