Adobe Design System "React Spectrum"때문에 소개합니다.

React Spectrum


🚀 Super excited to announce:♿️ React Aria — Accessible UI primitives for your design system.👑 React Stately — State and core logic for your design system.🌈 React Spectrum — Adobe’s design system.Learn more: https://t.co/ucVguh3rqp Github: https://t.co/e8aOfLgCVK — Devon Govett (@devongovett) July 15, 2020

7월 15일 Adobe의 디자인 시스템react-spectrum이 발표되었습니다.

디자인도 훌륭하지만 다른 부분의 퀄리티는 개인적으로 충격적이어서 소개해 드리려고 합니다.p>

어디 대단해?


  • 논리와 UI를 완전히 분해하여 논리적인 부분을 재활용할 수 있는 곳
    • 자신·자사의 디자인 시스템을 제작하고자 하는 경우 논리만 빌려 설치할 수 있다

  • 논리 부분의 질이 너무 높다(cross-platform,accessibility, 다중 언어는 1년 반 이상의 시간을 들여 개발·테스트를 한다)
  • 보통 UI가 예뻐요.

제목은 react-spectrum 대단하지만 실제로는 이 논리적인 부분이다p>



  • react-aria 맞춤형 Hooks를 이용하여 플랫폼과 장치에 따라 다양한 동작을 유니버설
    • 예를 들어, onClick 비헤이비어는 마우스를 사용하지 않는 다른 장치에서는 들리지 않을 수 있지만 onPress 이벤트를 통해 통합됩니다

  • react-stately 사용자 인터페이스에 의존하지 않는 복잡한React 구성 요소의 논리 제공
    • DatePicker, Table, Search, Navigation, Toast, Virtualizer 등

  • 조합 논리 부분을 통해 보조 기능이 높은 좋아하는 구성 요소를 쉽게 만들 수 있다
  • 아직 개발 중인 구성 요소가 있는 것 같습니다.

TailwindCSS 사용 예



논리적 측면 의뢰react-ariareact-stately,tailwindCSS에만 조형을 설치한 예.1시간 동안 많은 구성 요소가 설치된 것 같아서 생산성이 매우 높은 것 같다p>

紹介動画


動画のリンク .


↑ 개발의 경과와 무엇을 할 수 있는지,

시간 있으신 분들은 꼭 보셔야 돼요.p>

ドキュメント


React Spectrum

https://react-spectrum.adobe.com/index.html


Repository

https://github.com/adobe/react-spectrum


最後に


어제 트위터에서 큰 힘이 돼서 공유했어요.p>

써봤는데 디자인 시스템을 만들고 싶은 사람, 구성 요소 라이브러리를 찾는 사람 외에는 수요가 없는 것 같아서... (울며)



현재 업무에서도 사용되는 디자인 시스템,

다양한 플랫폼에 대응하는 논리적인 부분을 만드는 등 힘들고 미묘합니다.

그곳의 개축에도 큰 도움이 되리라 기대된다p>
개인적으로도 제가 디자인한 구성 요소 라이브러리를 만들고 싶은 욕심이 있어서 여러 가지를 해보고 싶어요.p>

좋은 웹페이지 즐겨찾기