ネオブルータリズムReact UI Figma キット
React コンポーネントと 1:1 で対応するネオブルータリズム調の Figma キット。variants・auto-layout・Tailwind クラス注釈付きの 300+ コンポーネント。ライト／ダークのトークン付き。Pro でキットがアンロックされます。
- 300+ Figmaコンポーネント
- バリアントとauto-layout
- Tailwind クラスのアノテーション
- 1:1をコードに変換します
- 光と闇のトークン
- Proに同梱されています
- 組み込みのテーマトークン
- 設計 → 出荷
- ネオブルータリズムを基調としたデザイン
- v1.3 キット
スケール デザインと
開発
Figma および React に掲載されているネオブルータリズムスタイルのシステムです。コンポーネント、バリエーション、自動レイアウト、およびコードキットと整合するトークンが用意されており、デザインとエンジニアリングの乖離を防ぐことができます。
すべての基盤コンポーネントは、Figmaコンポーネントとして
ダイアログ内やそれ以外の場所にあるボタンは、バリアントを備えた本物のFigmaコンポーネントとして提供されます。アプリがインストールするライブラリに基づいて設計を行ってください。エンジニアリングチームが一から再構築するような、その場限りのモックではなく、実際のライブラリを活用してください。
Tailwind すべてのレイヤー上のクラス
各レイヤーには、コード内で対応するユーティリティが注釈として付されています。引き継ぎの際は、クラス名をコピー＆ペーストするだけでよく、目視でパディングを合わせる必要はありません。
テーマを一度設定すれば、セット全体がそれに従います
明るいトークンと暗いトークンは、コードのテーマを反映しています。キット内のプライマリ、サーフェス、タイプを入れ替えると、すべてのインスタンスが更新されます。これは、CSSの変数がサイトのテーマを変更するのと同じ仕組みです。
大好き。 開発者にもデザイナーにも、
クリエイターにも。
たまたま UI キットを見つけて即ゲット。新しくて活発にメンテされ、どんどん改善されてるのが最高。すごい仕事だ！🤘
Ziv Reich, ソフトウェア開発者 neobrutalism.com、ほんとよくできてるって言いたかっただけ。すごく気に入ってる。デザインが苦手だから、これは本当に助かった。自分の個人サイトで使わせてもらったよ。
Paul Bratslavsky, Coding With Paul 運営 ようやく Neobrutalism.com で個人サイトを作り直した。楽しいライブラリで、始めやすい！
Cameron Blackwood, コンテンツクリエイター Neobrutalism.com はお気に入りのレトロ系 UI コンポーネントライブラリのひとつ。ちゃんと ship できるコンポーネント。
Zhengyang Hou, インディーハッカー Web で一番好きな UI ライブラリのひとつ。いい仕事してる。これからもっともっと伸びていくといいな。
Taseen Tanvir, 創業者 & デザイナー Neobrutalism.com Pro を試したけど、他とかぶらない UI キットで新鮮。ネオブルータリズムのブロック 🔥 で変なレイアウトの試作がずっと速くなった。
Nitesh Padghan, ゴーストライター バランスと流れが完璧な、美しいランディングページデザイン。カラーパレットとアニメーションが組み合わさり、卓越したUXを生み出しています。
Alan Obeng-Peprah, Senior Designer @ NativeXAI 納品されたデザインに本当に感心しました。最終成果物は想像していたものとぴったり一致していました。
Desmond, 共同創業者 @ VectorlabsVentures 代理店オーナーとして、クライアントのランディングレイアウトを磨き込むのに通常は数週間かかります。Neobrutalism.comならテンプレートを差し込み、コピーを整えればすぐに出荷できます。
Duke Opoku Amankwah, 創業者 @ Midas テンプレートは見た目が優れているだけでなく、構造も非常によくできています。開発期間を何週間も短縮できました。
Abiola Braimah, 開発者 @ Studio IX 品質が突出していて細部へのこだわりもすごい。レスポンシブデザインはすべてのデバイスで完璧に動作します。
Acromond X., 共同創業者 @ VectorlabsVentures これらのテンプレートをワークフローに組み込んだことで、開発サイクルが大幅に短縮されました。素晴らしい仕事です。
Raquib S., バックエンド開発者 これらのテンプレートは私たちの定番リソースになりました。コードはクリーンでドキュメントも充実しており、カスタマイズも容易です。
Hallic M., 開発者 @ AtlasLabs Neobrutalism.comのテンプレートは美観と機能性の完璧なバランスを取っています。私たちのプロジェクトにとって本当のゲームチェンジャーです。
Ibrahim S., Frontend Lead @ ScaleUp サポートが優れ、テンプレートの品質もプレミアム。これらのテンプレートのROIは驚異的です。
Kevin K., CEO @ WebCraft Neobrutalism.comのテンプレートは、新規クライアント案件への取り組み方を完全に変えました。コード品質は傑出しており、デザインもまさにワールドクラスです。
Danny G., DevStack創業者 多くのテンプレートライブラリを使ってきましたが、Neobrutalism.comはパフォーマンス最適化とクリーンなコードアーキテクチャへのこだわりで際立っています。
Ian D., WavelengthのCTO これらのテンプレートのアニメーションとマイクロインタラクションは本当に素晴らしい。デザインチームにとって最高の投資です。
Ben S., PixelPerfectのリードデザイナー 技術職ではない創業者として、Neobrutalism.comのテンプレートのおかげでデザイン品質を犠牲にせずMVPを記録的な速さでローンチできました。投資家も驚いていました。
Matthew I., スタートアップ創業者 これらのコンポーネントがどれだけモジュール化され、ドキュメント化されているかを高く評価しています。異なるテンプレートの部品をスムーズに組み合わせられました。
Garrett P., TechFusionのフロントエンドリード Neobrutalism.comテンプレートのROIは信じられないほどです。開発時間を大幅に削減しつつ、より高品質なサイトをクライアントに届けています。
Xavier C., 代理店オーナー
Figma キット
FAQ
このページで紹介しているProの.figデザインシステムについて――ファイルの内容、アクセス制限付きダウンロード、Tailwindの注釈、およびコードとの連携方法について解説します。