[인프런 워밍업 스터디 1기 디자인] 4주차 발자국

[4주차 스터디 내용]베리어블 모드 활용 해보기통합 브랜드 구현반응형 1. 베리어블에 컬렉션 생성 2. desktop/tablet/mobile3가지 모드 추가 3. 각각 최대값/최소값을 입력 4. 프레임에 베리어블 모드 적용다중언어컴포넌트 조합해서 페이지 만들기 B2B이커머스 어드민 페이지 (다크모드, 반응형, 멀트브랜드 구현)B2C이러닝 페이지 (실제데이터 입력해서 반응형으로 프로토타이핑)모바일 OTT서비스 페이지 [미션]베리어블 모드 실습B2B 이커머스 어드민 페이지 만들기B2C 이러닝 페이지 만들기모바일 OTT 서비스 페이지 만들기 [회고]진행률 100% 😂드디어 완강을 했다~ 왕뿌듯 피그마를 독학으로 공부하다가 부족함을 느껴 이 강의를 신청했는데,완강을 하고 느낀 점은 역시나 정말 나에게 필요했던 강의였다.앞으로 베리어블이나 컴포넌트를 만들 때, 미리 계획하는 과정을 꼭 넣어야겠다.무엇보다 열정적인 볼드님과 인프런 워밍업 클럽 덕분에 더 열심히 수업을 들을 수 있었던 것 같다. 🔥

[인프런 워밍업 스터디 1기 디자인] 3주차 발자국

[3주차 스터디 내용]피드백 컴포넌트 만들기알림/경고 메시지토스트스켈레톤/로딩 스피너프로그레스바슬롯활용한 모달네비게이션 컴포넌트 만들어보기링크브레드크럼프네비게이션/모바일 하단 네비게이션페이지네이션사이드 네비게이션헤더이미지 캐러셀베리어블 모드 색상테마 적용해보기 (라이트/다크)브랜드 아이덴티티 놓치지않기접근성 고려하기[미션]피드백 컴포넌트 만들어보기 네비게이션 컴포넌트 만들어보기 베리어블 모드 적용해보기 [회고]이번주는 피드백과 네비게이션 컴포넌트를 만들어보았다.베리어블 모드 적용해보는 미션이 있었는데, 배우고 싶던 내용이라 그런지 재밌었다.이번주는 색상만 적용해보았는데, 반응형이나 다중언어 모드도 베리어블로 빨리 만들어보고 싶다.다음주 강의 듣고 만들어봐야지!

[인프런 워밍업 스터디 1기 디자인] 2주차 발자국

[2주차 스터디 내용]컴포넌트 만드는 순서1. 싱글 컴포넌트를 만든 후 프로퍼티(Boolean/Text/Instance swap) 추가2. 복제 후 테스트 하기3. 상태, 사이즈 등 베리언츠 프로퍼티 등록해주기4. 플러그인을 사용해 웹 접근성 체크해주기[미션]피그마 입력 컴포넌트 만들어 보기버튼 / 체크박스 / 라디오버튼 / 스위치버튼 / 라벨 / 텍스트 필드 / 텍스트 상자 / 셀렉트 디스플레이 컴포넌트 만들어보기아바타 / 아코디언 / 뱃지 / 툴팁 / 구분선 / 칩 / 카드 / 테이블컴포넌트 웹 접근성 체크하고 수정해보기 (Contrast) [회고]이번 미션에 있는 컴포넌트들은 대부분 만들어 보았던 컴포넌트였는데,내가 그동안 얼마나 주먹구구 식으로 컴포넌트를 만들어 왔는지 깨달았다.이전에는 컴포넌트를 만들 때 베리어블을 사용하지 않았었다. (쓸줄 몰랐기때문...🥲)스타일, 파운데이션을 베리어블로 체계적으로 등록한 상태에서 컴포넌트를 만드는게훨씬 효율적이고, 관리나 수정도 쉽다는 걸 느꼈다.

[인프런 워밍업 스터디 1기 디자인] 1주차 발자국

피그마 베리어블을 활용한 디자인 시스템 구축하기피그마 베리어블을 제대로 이해하고 ,사용하고 싶어서 이 강의를 듣게 되었다.하지만 몇달이 지나도록 진도율 5%.... 😭그러던 중 인프런 워밍업 스터디 1기를 모집한다는 공지를 보게되었다.강제성..그래 지금 나에게 필요한거야!소박하게.. 완주를 목표로....시작하게 되었다. [1주차 스터디 내용]베리어블로 디자인 시스템을 만들기 위해 색상/타이포/아이콘 등을 베리어블에 등록하는 내용이었다.색상 베리어블 계층 구조(primitive/semantic/theme)를 이해할 수 있어서 좋았다.아직은 초기 단계라 수업만 잘 들으면 미션을 하는데에 큰 어려움은 없었지만 다음주부터는 살짝 걱정이...😂그리고 미션하다가 막힐 때? 강의 요약본이 유용했다! [회고]커리큘럼대로 스터디하니..벌써 진도율 27% 달성!진도율 100%가 되는 그날까지...나 자신 화이팅! 🔥