[240104]Figma 활용1_4주차(강의정리/HW)

1/4

*4주차 강의에서 가져갈 것*

 

file->select matching layers: 같은 위계의 레이어 모두 선택해줌

 

• [컴포넌트]
  컴포넌트란 파운데이션의 조합을 쌓고 쌓아 만들어지는 구성품
  컴포넌트는 모양이 아니라 기능이 중요하다! UI의 목적, UI의 기능에 초점을 둘 것!
  
  종류 6가지
  
  1. 액션 : 사용자가 중요한 행동을 수행할 때 사용해요.
  2. 인풋 : 사용자의 입력을 받을 때 사용해요.
  3. 인포메이션 : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용해요.
  4. 컨테이너 : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트에요.
  5. 내비게이션 : 사용자가 페이지를 이동할 때 사용해요.
  6. 컨트롤 : 사용자가 설정이나 값을 수정할 때 사용해요.
• [의사상태]
  컴포넌트의 가상의 상태이다.
  버튼에 커서를 올렸을 때, 버튼을 눌렀을 때, 누를 수 없을 때 등등
  But, 컴포넌트마다 쓸 수 있는 것/없는 것 있음->버튼인데 체크된 상태, 체크 박스인데 링크인 것
• [마스터, 인스턴트 컴포넌트]
  마스터를 수정하면 복제된 인스턴트 컴포넌트도 같이 수정 된다. 반대의 경우는 수정 x
  
  
• [배리언츠와 프로퍼티]
  인스턴트 컴포넌트가 상태값을 가질 때 형태가 변화할 수 있음, 요소도 바뀔 수 있음
  ->배리언츠와 프로퍼티가 이 기능을 해줌
  배리언츠: 파운데이션 요소인 색상, 간격, 폰트 등이 바뀌면 배리언츠
  프로퍼티: 파운데이션 값이 바뀌지 않으면 프로퍼티로 조정
  
  종류 3가지
  1) 👁️ Boolean
  2) ◇ Instance swap
  3) 𝐓 Text
  
  
• [버튼 컴포넌트]
  

  

• [텍스트 컴포넌트]
  상태: Default, input, focused, filled, disable
  

  

  라벨, 플레이스홀더, 헬퍼 텍스트

 

*4주차 HW*
어려웠던 점: 아이콘이 있을 때와 없을 떄 박스 사이즈가 바뀌었다.
해결 방법: 아이콘과 텍스트의 행간 사이즈가 맞지 않았었기에 텍스트 행간을 조절하였다.
->사소한 부분이었지만 확인하고 넘어갈 것!