강의 요약 📝

섹션1. 피그마 배리어블과 디자인 토큰

피그마 배리어블과 디자인 토큰의 개념을 이해하고 필요성에 대해 배우는 시간이었다. 디자인 토큰 개념은 이해하고있었는데 디자인 토큰의 특징 중에 참조 기능이 있다는 것은 처음 알았다.

섹션2. 배리어블과 파운데이션 세팅하기

색상 배리어블 구조를 이해하고 이름 규칙을 정해서 색상 배리어블을 직접 설정해보았다. 또 타이포그래피, 아이콘, 그림자, 그리드 기준점까지 디자인할 때 기본이 되는 부분들을 하나씩 차근차근 만들었다. 실무 프로젝트에서도 매번 시안 만들기에 바빠서 스타일 가이드를 제대로 작업하지않은 경우도 있었는데 이번 강의를 들으면서 아무리 바쁘더라도 기본을 잘 다져둬야 추후에 디자인의 일관성을 유지하면서 확장성있게 사용할 수 있다는 점을 확실하게 배웠다.

- 스타일 가이드 제작할 때 유용한 플러그인

• Apply variables : 적용하지않았거나 누락된 스타일의 베리어블을 찾아서 바꿔줌

• Typescales : 타이포그래피 스타일을 사이즈별로 생성해줌

• Styler : 설정한 스타일을 local style에 자동으로 등록해줌

• Batch styler : 스타일을 수정하고 싶은 컴포넌트를 선택해서 변경 가능함

• Typorahy style guide : 타이포그래피 스타일 가이드 문서를 제작해줌

• Frame all : 컴포넌트 각각의 프레임을 만들어줌

  
  
  - 유용한 단축키 정리

• control+shift+enter : 베리어블 추가

• control+ r : 선택된 레이어 이름 수정

• 부모의 컴포넌트를 클릭하고 enter를 누르면 자식 컴포넌트만 선택됨

   

   

회고 ✨

😆 Liked (좋았던 점) : 강의를 듣고 직접 만들어보면서 배리어블 개념, 용어, 피그마 단축키 등을 한번 더 정리해 볼 수 있는 시간을 가질 수 있어서 좋았다. 그리고 이번주에 진행되었던 특강 내용도 너무 좋았다!!

😅 Lacked (아쉬웠던 점, 부족한 점) : 스터디 첫 주였는데 계획했던것처럼 매일매일 강의를 듣지못했다..

🧐 Learned (배운 점) : 이번주는 배리어블을 활용해서 스타일 가이드를 만드는 방법을 배웠다! 그동안 배리어블 개념에 대해서 대략적으로만 알고있어서 실무에서 활용하는게 쉽지않았는데 배리어블을 참조해서 새로운 배리어블을 만들고 활용하는 방법과 이름 정하는 규칙에 대한 구체적인 예시를 알려주셔서 실무에서 유용하게 적용해볼 수 있을 것 같다!

🤩 Longed for (앞으로 바라는 것) : 다음주 부터는 조금씩이라도 매일 공부하고 계획한대로 미션을 수행할 수 있도록 노력해보자!