Перейти к содержимому

НеобруталистReact UI Figma kit

Figma-кит в стиле необрутализма с соответствием 1:1 React-компонентам — 300+ компонентов с variants, auto-layout и аннотациями классов Tailwind. Светлые и тёмные токены в комплекте; Pro открывает кит.

Figma комплект
300+ компонентов
  • 300+ компонентов Figma
  • Варианты и auto-layout
  • Tailwind аннотации классов
  • Преобразует 1:1 в код
  • Светлые и тёмные жетоны
  • Входит в состав набора Pro
  • Встроенные токены тем
  • Разработка → поставка
  • Дизайн в стиле необрутализма
  • v1.3 комплект

Масштаб Проектирование и Разработка

Система в стиле необрутализма, представленная на сайтах Figma и React, включает в себя компоненты, варианты, систему автоматической верстки и токены, согласованные с набором кода, что позволяет предотвратить расхождение между дизайном и разработкой.

01

Каждый базовый компонент, являющийся компонентом Figma

Кнопки, используемые в диалоговых окнах и за их пределами, поставляются в виде полноценных компонентов Figma с различными вариантами. Разрабатывайте интерфейс на основе той же библиотеки, которую устанавливает ваше приложение, а не на основе разового макета, который инженеры создают заново с нуля.

Components
Панель компонентов в Figma-ките Neobrutalism.com
02

Tailwind классы на каждом уровне

Слои снабжены аннотациями, указывающими, с какими утилитами в коде они сопоставляются. Передача данных осуществляется путем копирования и вставки имен классов, а не визуального подбора с учетом этого отступа.

Tailwind classes
Панель классов Tailwind в Figma-ките Neobrutalism.com
03

Достаточно выбрать тему один раз — и всё остальное последует само собой

Светлые и тёмные значки отражают тематику кода. Достаточно поменять местами основные элементы, поверхности и шрифты в наборе, и все экземпляры обновятся — точно так же, как переменные CSS позволяют изменить стилистику сайта.

Theme tokens
Панель токенов темы в Figma-ките Neobrutalism.com

Figma комплект · v1.3

Разработайте свой следующий яркий продукт

Любят разработчики, дизайнеры
и креаторы

  • Наткнулся на ваш UI-кит и сразу забрал. Новый, активно поддерживается и постоянно улучшается — отличная работа! 🤘

    Ziv Reich, Разработчик ПО
  • Просто хочу сказать: neobrutalism.com — отличная работа. Правда нравится. С дизайном у меня беда, так что это просто спасение. Поставил на свой личный сайт.

    Paul Bratslavsky, Автор канала Coding With Paul
  • Наконец-то пересобрал свой личный сайт на Neobrutalism.com — весёлая библиотека, очень легко стартовать!

    Cameron Blackwood, Контент-креатор
  • Neobrutalism.com — одна из моих любимых библиотек UI-компонентов в ретро-стиле: компоненты, которые реально можно ship’ить.

    Zhengyang Hou, Индихакер
  • одна из моих любимых ui-библиотек для веба. классная работа, Ариф. Надеюсь, у проекта всё сложится по-крупному.

    Taseen Tanvir, Основатель и дизайнер
  • Попробовал Neobrutalism.com Pro — UI-кит, который не похож на всё остальное. Необруталистские блоки 🔥 ускорили прототипы странных макетов.

    Nitesh Padghan, Гострайтер
  • Красивый дизайн лендинга с идеальным балансом и ритмом. Цветовая палитра вместе с анимациями создаёт исключительный пользовательский опыт.

    Alan Obeng-Peprah, Senior Designer @ NativeXAI
  • Я по-настоящему впечатлён дизайном, который они сдали. Итоговый продукт совпал с тем, что я себе представлял.

    Desmond, Сооснователь @ VectorlabsVentures
  • Как владелец агентства я обычно трачу недели на доводку макетов лендингов для клиентов. С Neobrutalism.com я подключаю шаблон, правя copy — и готов к релизу.

    Duke Opoku Amankwah, Основатель @ Midas
  • Шаблоны не только визуально сильные, но и невероятно хорошо структурированы. Сэкономили нам недели разработки.

    Abiola Braimah, Разработчик @ Studio IX
  • Выдающееся качество и внимание к деталям. Адаптивный дизайн безупречно работает на всех устройствах.

    Acromond X., Сооснователь @ VectorlabsVentures
  • Интеграция этих шаблонов в наш workflow заметно сократила цикл разработки. Отличная работа.

    Raquib S., Backend-разработчик
  • Эти шаблоны стали нашим основным ресурсом. Код чистый, хорошо документирован и легко кастомизируется.

    Hallic M., Разработчик @ AtlasLabs
  • Шаблоны Neobrutalism.com находят идеальный баланс между эстетикой и функциональностью. Настоящий game-changer для наших проектов.

    Ibrahim S., Frontend Lead @ ScaleUp
  • Отличная поддержка и шаблоны премиум-качества. ROI этих шаблонов феноменален.

    Kevin K., CEO @ WebCraft
  • Шаблоны Neobrutalism.com полностью изменили наш подход к клиентским проектам. Качество кода исключительное, а дизайны — действительно world-class.

    Danny G., Основатель DevStack
  • Я пользовался многими библиотеками шаблонов, но Neobrutalism.com выделяется вниманием к оптимизации производительности и чистой архитектуре кода.

    Ian D., CTO в Wavelength
  • Анимации и микроинтеракции в этих шаблонах абсолютно потрясающие. Лучшая инвестиция для нашей design-команды.

    Ben S., Lead Designer в PixelPerfect
  • Как нетехнический основатель, шаблоны Neobrutalism.com помогли нам запустить MVP в рекордные сроки без компромиссов по качеству дизайна. Наши инвесторы были в восторге.

    Matthew I., Основатель стартапа
  • Мне нравится, насколько модульны и хорошо документированы эти компоненты. Мы без трения смешиваем куски из разных шаблонов.

    Garrett P., Frontend Lead в TechFusion
  • ROI шаблонов Neobrutalism.com невероятен. Мы резко сократили время разработки и при этом отдаём клиентам сайты более высокого качества.

    Xavier C., Владелец агентства

Набор Figma
FAQ

Система дизайна файлов.fig Pro, представленная на этой странице: содержание файлов, загрузка с ограниченным доступом, аннотации Tailwind и их взаимосвязь с кодом.

Figma Проблема с доступом к набору? Напишите нам по электронной почте[email protected]