디자인시스템 및 컴포넌트 피그마 작업

[ymj307]

디자인시스템 및 컴포넌트 피그마 작업

컴포넌트 구조맵 가이드와 기타 레퍼런스를 기반으로 실제 적용될 디자인 시스템을 피그마 상에서 작업합니다. 작업 순서는 다음과 같습니다. 작업 진행 상황을 해당 이슈에 답글로 공유합니다.

1. 가장 다양한 컴포넌트가 활용된 페이지의 기본 디자인 작업을 진행합니다.
2. 작업한 페이지를 기준으로 각 컴포넌트의 스펙을 설정합니다.
3. 컴포넌트의 스펙을 피그마 variables, styles로 지정합니다.
4. varibales, styles 등을 활용해 컴포넌트화 작업을 진행, 요소 별 속성을 지정합니다.
5. 각 요소 별 스타일 가이드를 문서화해 개발팀과 공유합니다.
6. 컴포넌트화 작업을 완료한 컴포넌트들을 조합해 화면을 디자인합니다.

관련 담당자

• 기획 및 디자인 팀 : @ymj307
• 프론트팀 : @Seong-Myeong @Bangdayeon

[ymj307]

250917 현황 공유

• 페이지 디자인 작업 진행
  • 채팅페이지/답변 생성 완료/상세패널 열림/사이드 네비게이션 닫힘 페이지 디자인 작업 진행 중

[ymj307]

250924 현황 공유

• 페이지 디자인 작업 진행 완료
  • 채팅페이지/답변 생성 완료/상세패널 열림/사이드 네비게이션 닫힘 페이지 디자인 작업 진행 완료
• 색상 스케일 지정 완료

[ymj307]

251001 현황 공유

• Tokens Studio for Figma 플러그인 설치
• 색상 스케일 Style 등록
• 색상 스케일 플러그인에 토큰화

[ymj307]

251015 현황 공유

• 타이포그래피(이하 타이포) 정리
• 타이포 styles로 등록
• 타이포 플러그인에 토큰화
• spacing 작업 진행 중

[ymj307]

251022 현황 공유

• 디자인 토큰 구조 설계 진행 중

  • color, typo, number raw value
  • color, typo, number primitive token
    

• 토큰 및 토큰네이밍 구조 공부

  • 레퍼런스
    • KRDS 디자인 토큰
    • [KRDS 디자인 토큰 전체보기## 251022 현황 공유

• 디자인 토큰 구조 설계 진행 중

  • color, typo, number raw value
  • color, typo, number primitive token
    

• 토큰 및 토큰네이밍 구조 공부

  • 레퍼런스
    • KRDS 디자인 토큰
    • KRDS 디자인 토큰 전체보기
    • 3단계로 완성하는 유연한 디자인 시스템

[ymj307]

251029 현황 공유

• 컴포넌트화 작업 진행
  • 버튼(기본 버튼, 아이콘버튼, 텍스트버튼)
  • 아이콘
  • 메뉴 아이템(사이드 네비게이션 메뉴)
  • 토스트알림(상황 별 컬러 시스템 추가, 컴포넌트 제작)
  • 탭 메뉴
  • 구분선

[ymj307]

251105 현황 공유

• 컴포넌트화 작업 진행
  • 뱃지
  • 그리팅 메시지
  • 팝오버 아이템
  • 토스트 알림 버튼 on/off 수정
  • 버튼 추가 및 수정(secondary, teritary)
• 복합 컴포넌트 진행 예정
  • 링크 카드
  • 팝오버
  • 모달