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

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

 

워밍업 스터디에 참여하게된 이유


작년 여름, 배리어블 업데이트 이후 많은 사람들이 해당 기능을 필수로 알아야한다고 했지만

토큰에 대한 개념이 부족하기도하였고, 기존에 사용하던 스타일을 통해서도 충분히 작업이 가능했기 때문에 쉽사리 사용하지 못했다.

시간이 생긴 지금, 개념을 정확히 알고 배리어블을 사용해보고싶었다.

인스타 팔로우하던 볼드님이 강의를 진행한다고 하셔서 바로 신청하게되었고 신청하길 정말 잘한 것 같다.

강의를 보며 공부하면.. uiux 직군으로 이직하길 마음먹고 독학으로 피그마를 공부하던 시절과 함께 회사에 사수가 없어 혼자서 고군분투하며 작업하던 나날들이 떠오른다 .. ㅠㅠ 더 열심히 공부해야하는 이유가 늘 떠오른다.

이직할때는 개념을 완벽히 이해하고 다양한 기능을 사용하여 더 빠르게 작업 할 수 있는, 스킬업이 되어있는 상태였으면 좋겠다.

 

 

 

기억하고 싶은 부분들


  1. 색상 배리어블의 구조

    1. Primitive : 색의 원시값을 저장해 놓은 디자인 언어의 기본 값

    2. Theme : 시멘틱 칼라로 브랜드 모드를 적용하기 위한 목적

    3. Semantic : 시맨틱 칼라로 라이트/다크 모드를 적용하기 위한 목적

  2. 색상 배리어블 등록시

    1. border의 색상은 text와 색상이 겹치기 때문에 색상이 살짝 빠진 색상으로 선택해준다.

       

  3. 스타일은 지우기

     

    1. 색상 배리어블 등록 후 적용하려보면, 스타일 목록과 함께 노출되기 때문에 원하는 색상을 찾을때 너무 복잡하기때문에 등록된 스타일은 지우는 것이 좋다.

  4. 플러그인

    1. apply variables

      1. 혹여나 배리어블을 적용하지 못했다면, 하나하나 눌러서 확인하지 말고 해당 플러그인을 사용하여 자동으로 적용시킬 수 있음

    2. styler

      1. 한번에 text styles 등록 가능

    3. frameall

      1. 선택한 layer들에 fram이 씌워짐

  5. 색상이 있는 아이콘을 다른 아이콘으로 변경하는 경우, 전체 색상이 변하지 않는 이유

image

A는 1개의 vector가 색상 1개만 먹히기 때문에 B의 2개의 vector중 1개만 색상이 변함image[해결 방법]

B의 vector를 union을 사용하여 하나로 만들어주면됨 ** 대신 이름은 동일한 이름으로 변경해줘야함
합치기 전에는 stroke에 색상이 채워졌었는데, 합친 후에는 fill로 색상이 채워짐

image

댓글을 작성해보세요.

채널톡 아이콘