본문 바로가기

컴포넌트

(3)
[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 → 코드까지 연결하기📌 예정디자인 시스템..