スマホやWebページでよく見かけるUIコンポーネントのデザインと実装コードの無料ライブラリ -Eva Design System

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コンポーネントのライブラリです。

サイトのキャプチャ

Eva Design System

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

サイトのキャプチャ

Eva Icons

Eva Design Systemのダウンロード

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

サイトのキャプチャ

Eva Design System

Eva Design Systemのデモ

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

サイトのキャプチャ

Nebular -Components

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

サイトのキャプチャ

UI Kitten - Demo

Eva Design SystemのUIコンポーネントを使用したReact Nativeアプリ。

Eva Design SystemのUI素材

UIコンポーネントのデザイン素材をいくつか見てみましょう。
Sketch用ですが、Adobe XDも利用できます。

Eva Design SystemのUI素材

素材の使い方

Eva Design SystemのUI素材

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

Eva Design SystemのUI素材

画像のオーバーレイ

Eva Design SystemのUI素材

タイポグラフィ

Eva Design SystemのUI素材

シンボル

Eva Design SystemのUI素材

シンボル

Eva Design SystemのUI素材

コンポーネント

Eva Design SystemのUI素材

アイコン

sponsors

top of page

©2019 coliss