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

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

OT부터 1주 차 스터디, 그리고 첫 온라인 중간 점검까지 마치고 남기는 첫 발자국!

역시 나는 강제성(?)같은 동기가 부여되어야 하는 사람임을 다시 느꼈다. 🙄>

짜여진 커리큘럼과 그에 맞는 미션이 설계되어 있어서 따라가기 너무 좋았고,

강사님께서 노션과 강의 요약본까지 정리해두셔서 더 편리하게 할 수 있었다. 쵝오...👍


강의는 무작정 "자, 일단 따라 해봅시다!"가 아닌 기초 개념부터 쌓아 올려가는 방식이라 너무 좋았고, 설명에 맞는

시각적 예시까지 곁들여주셔서 따라가기 너무 좋았다. 유용한 사이트와 플러그인 정보도 유익한 건 덤~(WOW)~

아직 아날로그 인간이라 강의를 손으로 필기하는데, 그중 몇 개를 아래에 간단하게 적어 회고를 해보고자 한다!


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

  • 디자인 시스템을 만들어야 하는 이유

     

    ✧ 커뮤니케이션(공감대 형성)

  • 스타일, 배리어블?

     

    ✧ 기본 디자인 토근 관리를 위해서는 배리어블

     

    ✧ 다수의 디자인 요소의 결합은 스타일

     

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

✦ 색상 베리어블 세팅

✧ border의 경우 너무 두꺼우면 텍스트와 잘 부딪히니 색을 빼주어 구분을 해주자. 

✧ icon은 텍스트와 주로 같이 간다.

✦ 그리드

✧ 4-point grid는 작은 단위로 레이아웃 정렬에 용이하다. 

✧ gutter/columns의 개념 헷갈리지 않기.

✧ fluid의 경우 margin 값을 필수로 넣어주어야 한다.

✧ fixed와 fluid의 constraits 각각의 차이 기억하기.

✦ 기타 베리어블

✧ ex)stroke 배리어블 버튼이 안보일때 우 클릭&apply variable or shift+왼쪽 클릭

✧ opacity의 경우 fill이 아닌 layer에서 적용시키기.

 

미션

✦ 놓치는 부분이 없는지, 적용이 잘 되었는지 더블의 더블 체크 해주기.

✦ 생각보다 어려워서 난항을 겪었던 미션 4

▸ 참고한 템플릿은 크게 두 가지 범정부UIUX_디자인스타일가이드n컴포넌트 / Wanted Design Library

▸ 컬러 부분이 상당히 오래 걸렸는데, 맘에 드는 플러그인을 찾기 어려웠고 요소가 많은데 그 안에서도 최대한 구분이

되어 보이기를 바라며 구성하였다.

-Theme의 경우 각 변수의 수가 똑같기 때문에 가로 정렬

-Sementic의 경우 각 변수의 차이가 약간 있고 내용이 많아 세로 정렬로 진행해 주었다.


마치며, 2주 차 다짐

📍아직까지는 따라가기 바쁘다, 복습은 필수.

📍커리큘럼대로만 잘 따라가자, 부지런해져라(제발🥺)

 

댓글을 작성해보세요.

채널톡 아이콘