🐾 첫번째 발자국

워밍업 스터디 클럽 1기를 들었지만 그동안 피그마 UI3로 업데이트 되면서 인터페이스를 익히며 복습할 겸으로 이번 스터디 클럽을 듣게 되었다. 개인 사정으로 일정상 OT를 참여하지 못 해서 매우 아쉬웠지만 그래도 이번주 내에 모든 미션을 마무리 할 수 있어서 다행이다.

📚 배운 점

피그마가 업데이트 된 부분을 강의를 들으며 새로 알 수 있게 되었다.

• i를 누른채로 command+shift+클릭을 하면 배리어블/스타일 등록을 빠르게 가능하다.

• 배리어블에서 edit 아이콘으로 syntax를 사용하여 개발자들이 데브모드에서 보는 Web, Android, iOS 디바이스 별로 요구하는 이름을 만들 수 있다.

• 배리어블 창에서 데이터 입력 시 탭으로 이동이 가능하다.

미션1

• 코드 신택스(Code syntax)를 배울 수 있었다.

• 배리어블 창에서 Primitive, Theme 색상은 컬러스코프에서 모두 숨겨준다.

• Print Variables 플러그인으로 우리가 등록한 배리어블들을 모두 볼 수 있다.

미션2

• Type scales 플러그인으로 타이포그래피 기본 뼈대를 만들고 Heading은 4의 배수로, Body는 2의 배수로 수정한다.

• 타이포그래피 스타일 등록은 Styler 플러그인을 사용하여 한번에 등록한 뒤 Typography Style Guide 플러그인으로 등록된 스타일을 확인한다.

   

• 시맨틱 타이포그래피 배리어블 등록 시에 폰트 패밀리를 헤딩과 바디를 다르게 적용할 수 있다.

미션3

• Measurement 값을 Primitive에 기본 unit을 등록하고 Semantic에서 간격, 보더(radius, width)로 구분해준다.

• 그림자 같은 경우 퍼지는 cast과 가장 어두운 core로 나눠서 값을 만든다.

• 그리드 만들때 프레임을 만들고 오토레이아웃을 걸어서 min-width, max-width 값을 지정해줄 수 있다.

• 그리드 스타일 추가 할 때 디스크립션으로 범위 값을 넣어주면 스타일 지정 시 디스크립션을 툴팁으로 확인할 수 있다.

😊 좋았던 점

• 마우스 포인터 주변에 원형 하이라이터가 되고 중요한 부분이 줌인되어 강의를 보는데 전보다 더 편해졌다.

• 강의가 업데이트 되면서 실습을 통해 피그마 UI3를 익힐 수 있었다.

• 전과 달리 Color, Typography, Measurement를 각각 Primitive와 Semantic으로 상세하게 나눠서 배리어블을 관리 할 수 있다는 것을 알게되었다.

😭 아쉬웠던 점

• Print Variables 플러그인이 잔잔한 버그가 많아서 몇가지 배리어블 값을 표시할 수 없었다.

• Typography 배리어블은 일일히 지정해줘야 하는 값이 많아서 만드는 데에 시간이 많이 걸렸다.