[인프런 워밍업 스터디 1기 디자인] 1주차 발자국
시작
4주 동안 잘 해보자.
피그마의 기능/장점을 이애하지 못하고 '빠르게 제작/수정 여럿이서 공동작업이 용이한 툴' 정도로 사용하고 있었다. 그러다 이 강의를 신청하고 동료와 스터디를 하려고 하던 참에 인프런 워밍업 스터디 클럽이 진행된다고 해서 신청했다.
무료버전만 사용하다 보니 variable을 안써봤는데 교육용으로 계정을 준다고 한다.
네이밍 짓기 너무 어려운데 알려준다고 한다.
4주 열심히 따라가다 보면 완강도 할 수 있을 거 같았다.
이런 이유로 나는 워밍업 클럽을 신청하게 됐다.
수업 노트
Libraries Color 만들기
tailwind color palettes 를 이용해서 색을 만들어줍니다.
color style guide를 이용해서 등록된 라이브러리 색을 가이드화 시켜줍니다.
만들어진 스타일 가이드에서 필요한 색만 남기고 삭제 해주고 사용하세요.
컨버스에 있는 컬러팔레트와 스타일가이드는 지워주세요.
플러그인 -> color style guide 를 실행시켜줍니다.
variable collection 만드는 순서
primitive Collection를 만들어서 hex 코드를 넣어주세요.
semantic Collection 을 만들어서 libraries 에서 색상을 찾아서 연결 시켜주세요.
primitive
blue, green, yellow, red, gray ...
색의 원시값(Hex)을 저장해 놓은 디자인 언어의 기본 값
blue 100/500, red 100 등 이렇게 등록
theme
brand, success, danger, info, warning, neutral ...
상황에 맞게 등록 함
semantic
text, icon, bg, border
의미에 맞게.
Color Scoping: 색의 범위를 지정해 줌.
bg : frame 선택
icon: shape 선택
text: text 선택
border: stroke 선택
배리어블을 다 등록한 후에는 local에 있는 스타일은 지워주세요.
Icons
단색 아이콘은 vector->union 으로 합쳐주세요. 그러면 Fill로 색상을 바꾸기 좋아요.
Plugin
Autometic Style Guides: Generate Swatches from Variables 배리어블에 만들어진 내용들을 스타일 가이드 형식으로 만들어줘요.
Foundation color generator: dd
Tailwind Color Palettes: 색을 만들어준다. (필요 없는 색은 지워준다.)
Color Style Guide : 등록된 라이브러리 색을 가이드화 시켜주자.
typography style guide: 글자 스타일을 등록했다면 스타일 가이드를 만들자.
Batch styler: 스타일 등록할 때 글자 지정을 잘 못했다면 일일이 바꾸지 말고 플러그인을 쓰자.
Grid
Frame 에서 Auto Layout 적용 후 반응형 Min-width / Max-width 지정할 수 있어요.
회고
Variable 등록하기는 자면서 들었나봐요.
미션1은 자면서 들었나 싶을 정도로 엉뚱하게 제출. 튜터 볼드님의 코멘트를 보고 수업 노트 적어가며 강의를 다시 들었다. 다른 학습자분들이 올려주신것도 보면서 미션을 수행하니 이해가 잘 됐다.
토요일 저녁 8시 특강
때 궁금했던 점 알려주시고 새로운 내용도 알게 되어 정말 좋았다. 네이밍 할 때 늘 고민되던 것들을 다른 사람들은 어떻게 사용하는지 어디서 찾아볼 수 있는지 팁도 알게되어 알찬 시간이였다.
막 사용하던 피그마는 그만
이미 피그마를 '막'사용하고 있어서 강의 내용이 쉬울거라 생각했었는데, 정말로 막 사용하고 있었다. ㅠ-ㅠ
기초부터 차근차근 배워가고 있다. 프로젝트 진행 시 시스템 가이드를 만들어 '이거 수정 해주세요' 했을 때 파일들 다 열어서 수정하지 않고, 한번에 '수정-적용-배포' 할 수 있는 모습을 그리며, 남은 3주도 잘 따라가보자.
답변 0