콘텐츠로 건너뛰기

네오브루탈리즘React UI Figma 키트

React 컴포넌트와 1:1로 대응하는 네오브루탈리즘 Figma 키트입니다. variants·auto-layout·Tailwind 클래스 주석이 있는 300+ 컴포넌트. 라이트·다크 토큰 포함; Pro로 키트를 잠금 해제합니다.

Figma 키트
300+ 컴포넌트
  • 300+ Figma 컴포넌트
  • 변형 및 auto-layout
  • Tailwind 클래스 어노테이션
  • 1:1를 코드로 매핑
  • 밝은 토큰과 어두운 토큰
  • Pro에 포함된 내용
  • 내장된 테마 토큰
  • 설계 → 출하
  • 디자인 측면에서 네오브루탈리즘 양식
  • v1.3 키트

규모 디자인 및 개발

Figma와 React에 구현된 네오브루탈리즘 시스템 — 코드 키트와 연동되는 구성 요소, 변형, 자동 레이아웃 및 토큰을 통해 디자인과 엔지니어링 간의 괴리를 해소합니다.

01

모든 기본 구성 요소는 Figma 구성 요소로서

대화상자 및 그 외 요소에 포함된 버튼은 변형이 포함된 실제 Figma 컴포넌트로 제공됩니다. 엔지니어링 팀이 처음부터 다시 구축해야 하는 일회성 모크가 아닌, 앱에 설치된 것과 동일한 라이브러리를 기반으로 디자인하세요.

Components
Neobrutalism.com Figma 키트의 컴포넌트 패널
02

Tailwind 모든 레이어의 클래스

레이어에는 코드 내에서 해당 레이어가 매핑되는 유틸리티가 주석으로 표시되어 있습니다. 인계 작업은 클래스 이름을 복사하여 붙여넣는 것이지, 눈대중으로 패딩을 맞추는 것이 아닙니다.

Tailwind classes
Neobrutalism.com Figma 키트의 Tailwind 클래스 패널
03

테마 하나만 정하면 — 나머지 모든 것이 따라옵니다

밝은 색상과 어두운 색상의 토큰은 코드 테마를 반영합니다. 키트에서 기본 색상, 표면, 글꼴을 변경하면 모든 인스턴스가 업데이트되는데, 이는 CSS의 변수가 사이트 테마를 재설정하는 방식과 동일합니다.

Theme tokens
Neobrutalism.com Figma 키트의 테마 토큰 패널

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에서는 템플릿을 끼워 넣고 카피만 다듬으면 바로 출시할 수 있습니다.

    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 주석, 그리고 코드와의 연계 방식.

Figma 키트 이용 문제? 이메일[email protected]