디자인시스템 (5) 썸네일형 리스트형 [Figma : design system #5] 디자인 시스템의 마지막 단계 문서화 하는 이유 디자인 시스템에서 문서화는 아주 중요한 마지막 단계입니다.시스템을 구성하는 Foundation, Components, Patterns 등 모든 요소는 문서화 되어야만 팀 내에서 일관성 있게 사용될 수 있습니다. 잘 문서화된 시스템은 팀원들이 쉽게 이해하고 활용할 수 있게 하며, 새로운 팀원들이 빠르게 익힐 수 있도록 돕습니다.목차1Figma : Design System #1 - 디자인 시스템 구축하는 이유, 구축 단계를 알아보자✔️ 완료2Figma : Design System #2 - Foundation 구축, 시스템의 뿌리를 다지자✔️ 완료3Figma : Design System #3 - UI 컴포넌트 설계, 재사용 가능한 구조 만들기✔️ 완료4Figma : Design System #4 - 패턴과 사.. [Figma : Design System #4] 디자인 패턴으로 일관성 있는 UI 구축하기 - Patterns 작업하는 법 디자인 시스템을 구성하다 보면 어느 순간 질문이 생긴다.“버튼도 만들고, 카드도 정리했는데... 이제 뭘 더 해야 하지?”그때 등장하는 개념이 바로 Patterns(패턴) 이다.패턴은 단순한 컴포넌트가 아니라, 실제 화면을 구성하는 '반복 가능한 구조 조합' 이다.이 글에서는 패턴이 뭔지, 왜 중요한지, Figma에서 어떻게 구성하는지를 정리해본다.목차1Figma : Design System #1 - 디자인 시스템 구축하는 이유, 구축 단계를 알아보자✔️ 완료2Figma : Design System #2 - Foundation 구축, 시스템의 뿌리를 다지자✔️ 완료3Figma : Design System #3 - UI 컴포넌트 설계, 재사용 가능한 구조 만들기✔️ 완료4Figma : Design Syst.. [Figma : design system #3] Buttons부터 Modals까지, 컴포넌트 구성 총정리 Design System 구축에서 Foundation 단계(컬러, 타이포그래피, 간격 등 기본 요소)를 정의했다면, 다음으로 넘어갈 단계는 바로 Components(컴포넌트) 입니다. 이 단계는 실제 UI를 구성하는 구체적인 요소들을 만들고 관리하는 핵심 작업입니다. 목차1Figma : Design System #1 - 디자인 시스템 구축하는 이유, 구축 단계를 알아보자✔️ 완료2Figma : Design System #2 - Foundation 구축, 시스템의 뿌리를 다지자✔️ 완료3Figma : Design System #3 - UI 컴포넌트 설계, 재사용 가능한 구조 만들기 ✔️ 완료 4Figma : Design System #4 - 패턴과 사용자 흐름 정의하기📌 예정5Figma : Design .. [Figma : design system #1] 디자인 시스템 구축하는 이유, 구축 단계를 알아보자 안녕하세요, gamjoko입니다.디자인 시스템을 Figma로 구축하면서, 컬러 및 타이포그래피 시스템을 어떻게 효율적으로 관리하는지에 대해 A to Z로 풀어보려고 합니다.목차번호제목상태1Figma : Design System #1 - 디자인 시스템 구축하는 이유, 구축 단계를 알아보자✔️ 완료2Figma : Design System #2 - Foundation 구축, 시스템의 뿌리를 다지자 📌 예정 3Figma : Design System #3 - UI 컴포넌트 설계, 재사용 가능한 구조 만들기📌 예정4Figma : Design System #4 - 패턴과 사용자 흐름 정의하기📌 예정5Figma : Design System #5 - 실무 적용: Figma → 코드까지 연결하기📌 예정디자인 시스템.. [CSS: 반응형] 반응형 웹을 위한 CSS 단위 쉽게 정리! - 단위(px, rem, em) 완벽 가이드 1. CSS 단위 설명 🔍px절대 크기. 화면 크기에 상관없이 고정.버튼 테두리, 작은 아이콘rem루트(html)의 폰트 크기 기준. 전체 디자인에 통일감 있게 설정할 때 유용.본문 폰트, 여백em자기 자신 또는 부모 폰트 크기 기준. 상속 구조에서 유용.버튼 내부 간격%부모 요소 기준 비율. 유동 레이아웃 만들기 좋음.이미지, 박스 크기vw / vh뷰포트 너비/높이 기준. 화면 크기에 따라 자동 조정.큰 타이틀, 풀스크린 영역 2. 반응형 디자인을 위한 레이아웃 설정 방법 📍상위 요소에서 Flexbox와 Grid 사용Flexbox와 CSS Grid는 반응형 레이아웃을 만들 때 매우 유용한 레이아웃 모델입니다. width, height 값은 상대적인 단위로 설정하여 유동적으로 크기를 조정할 수 있습니.. 이전 1 다음
