Design system 에 관하여

Design system, 처음부터 만들어나가야 한다면?


- style guide가 있다면 참고해서 만들기.

- wireframe library를 이용해서 만들수도 있음. - Figma

- 혹은 다른 가이드라인을 참고하기

    e.g.) Google Material Design, Atlassian Design System, shopify's Polaris



colors

60% Primary / 30% Secondary / 10% Accent



Accessibility


color contrast

- Check with WCAG (Web Content Accessibility Guidelines)

    A / AA / AAA

- think about those with assistive Technologies

- Not everybody sees and distinguishes colors to the same extent(정도).



Typography

for consistency, personality and readability across products.



Type Scale





spacing








팀원들과 공유하기 위해 Documentation도 중요함.

(Visual styles, colors, typography, components 등 두루두루 포함)


- for large teams: Figma

- for small teams: Notion might be good enough





* 모든 프로젝트마다, 팀마다 꼭 디자인 시스템이 필요한 것은 아니다.




* 참고

https://help.figma.com/hc/en-us/articles/14552740206743-Lesson-2-Define-your-design-system

댓글 쓰기

다음 이전