[📝TIL 02_4]10월 마무리, Figma 활용법(1) 마무리

|  2024년 10월 31일 목요일 TO DO  |

✔️ 디자인 카타 : 웹사이트

✔️ Figma 활용법(1) 4주 차 강의 듣기

✔️ 4주 차 숙제 작성 후 제출하기

✔️ 자기개발 스터디 : 목표 세우기

---

 

Figma 활용법(1) 4주 차 강의

컴포넌트

✨ 컴포넌트

어떤 것을 만들기 위한 재료나 구성품이라는 뜻으로,

디자인에서 컴포넌트는 파운데이션의 조합을 쌓고쌓아 만들어지는 구성품을 말한다.

 🔎 왜 컴포넌트는 모양이 아닌 기능이 중요할까? 

버튼마다 형태나 색상의 차이가 있음에도 우리는 같은 버튼으로 인식하고 있다.
그 이유는 버튼의 생김새를 기준으로 구분하지 않고, 버튼의 하는 일을 기준으로 생각하기 때문이다.
따라서, UI의 목적과 기능에 초점을 잡아야한다.

 

컴포넌트의 종류는 크게 6가지로 나눌 수 있다.

ⓐ 액션 

ⓑ 인풋 

ⓒ 인포메이션 

ⓓ 컨테이너 

ⓔ 내비게이션 

ⓕ 컨트롤 

 

의사 상태 Pseudo-state

✨ 의사상태

가상의, 가짜의 라는 뜻으로, 컴포넌트의 가상 상태를 표시할 때 사용한다.

 

🚨

컴포넌트마다 쓸 수 있는 것과 없는 것이 있다.

따라서, 컴포넌트에 의사 상태를 적용하기 위해서는 구현 할 개발자와 많은 소통을 해야한다.

 

컴포넌트와 인스턴스

✨ 마스터 컴포넌트

피그마에서 마스터 컴포넌트는 반복적인 디자인을 빠르고 쉽게 적용시킬 수 있다.

디자인을 복사하여 사용할 수 있고, 복사된 디자인들을 한 번에 수정하거나 편집 할 수 있다.

 

✨ 인스턴스

마스터 컴포넌트의 복제본을 말한다.하지만 연결을 해제하면 마스터 컴포넌트와 분리되고, 일반적인 프레임으로 변한다.

 

배리언츠와 프로퍼티

✨ 배리언츠

변화와 관련된 뜻으로, 컴포넌트가 또 다른 모습으로 만들 수 있게 해주는 기능을 말한다.

컴포넌트의 가상 상태를 만들 때 사용한다.

ex 마우스를 올렸을 때, 버튼을 누를 수 없을 때

 

✨ 프로퍼티

속성이란 뜻으로, 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용한다.ex 기본 상태 +아이콘의 글자나 아이콘 스타일이 바뀌는 경우

 

버튼 컴포넌트

✨ 버튼 컴포넌트

버튼의 구조

버튼의 구조

 

 

 

버튼 만들어보기

같은 요소 한 번에 선택하기

 

텍스트 선택 > Edit 선택 > Selet matching layers 선택

똑같은 구조의 컴포넌트라면 같은 요소들이 다 선택 된다.

 

🔗 버튼 컴포넌트 참고자료

머티리얼 디자인

우버 디자인 시스템

라이트닝 디자인 시스템

카본 디자인 시스템

 

텍스트필드 컴포넌트

✨ 텍스트필드 컴포넌트

컴포넌트의 종류 중 인풋은 사용자가 무언가를 입력할 수 있게 하는 컴포넌트를 말한다.

텍스트필드 컴포넌트 역시 인풋에 해당하는 컴포넌트이며, 그 중에서 가장 대표적인 UI이다.

 

🔗 텍스트필드 컴포넌트 참고자료

머티리얼 디자인

우버 디자인 시스템

라이트닝 디자인 시스템

카본 디자인 시스템

---

너무 피곤해서 많은 걸 못한 것 같다.

집중력이 살짝 흐려져서 중간중간 스트레칭을 하며 풀어주었으나..🥹

점심시간이나 저녁시간에 잠깐 산책을 해봐야겠다.

오늘 남은 시간에 많이 진행해보고 늦게 자는거로,,

내일도 화이팅🥲🔥