design system (3) 썸네일형 리스트형 컴포넌트 합성 : 서브 컴포넌트의 모든 것 원문 : https://medium.com/eightshapes-llc/subcomponents-753ce9f6600a Subcomponents Relinquish control, offer parts, and let implementers compose medium.com TL;DR 재사용성을 고려한 컴포넌트를 만들기 위해서... 모든 것의 제어를 포기하고 (inversion of control) 부픔(서브컴포넌트)를 제공하고 구현하는 개발자가 컴포넌트를 합성하도록 합니다 디자인 시스템의 모든 사용 사례를 컴포넌트화 하는 것은 어리석은 일입니다만, 실무에서는 기존 피그마 컴포넌트를 작게 분리하는 것을 싫어하는 경향이 있습니다. 그리고 개발자는 바닥부터 컴포넌트를 다시 만드는 것을 싫어하죠. 컴포넌트 라.. Stitches와 Radix를 이용해 디자인 시스템 만들기 Radix(Radix)라이브러리의 메인테이너가 디자인 시스템 컴포넌트를 만드는 방법에 관해 작성한 글이 있어서 요약 정리해 봤습니다. 원문 링크 Pedro Duarte Why I Build Design Systems with Stitches and Radix ped.ro 저는 Scss, CSS ,Sass, Stylus, css-modules, styled-components와 같은 기술을 사용하여 디자인 시스템을 구축해본 경험이 있습니다. BEM, scoped CSS, atomic CSS, 커스텀 컨벤션 등의 스타일 규칙도 사용해 보았습니다. 하지만 제가 사용한 기술들이 좋다고 생각한 적이 별로 없었습니다. 어떤 것들은 너무 생산성이 떨어지고 오류가 많았으며, 어떤 것들은 성능이 별로거나 독단적이서 커스.. 디자인 시스템 만들기 시리즈 1편 : 디자인 토큰 소개 원문 : https://www.michaelmang.dev/blog/introduction-to-design-tokens Introduction to Design Tokens Design tokens are being used by companies like Amazon and Adobe to solve the pitfalls of coding a design system. I provide an introduction to design tokens. www.michaelmang.dev TLDR: CSS는 스타일 시트 스펙의 원자가 아닙니다. 원자는 바로 딕셔너리의 필드 : 밸류 한 쌍입니다. css 클래스는 스펙(사양)이 아닙니다. color : 'black' 한 쌍입니다. 코드에서 사용할 수 있는 사.. 이전 1 다음
