피그마(Figma) 학원수강 3회차

 

2024.10.14

피그마 학원수강 3회차

 

학원 수강 노트 

 

Shift+방향키 : 10px씩 이동
(값이 10씩 이동이 안될 경우, 좌측 피그마 아이콘 클릭 -> Preferences -> Nudge amount... -> 값을 10으로 변경)

 

젤 위로 이동 : ]
젤 아래로 이동 : [
텍스트 입력 후 끝내기 : Ctrl+엔터

Ctrl+선택 -> 해당 레이어만 선택

Assets창에서 원하는 컨포넌트 선택 후 드래그 해서 가져오기
alt 눌러서 복사 한 후, 한번 더 복사 할땐 ctrl+d

 

 

<실습 - 녹생생활 배너 만들기>

 

 

레이어 폴더명을 작성할 때, '/'를 작성하면 폴더를 생성해 그 안에 이미지가 들어간다.

ex) icon/car -> icon이라는 폴더안에 car라는 이미지가 생성

 

각각의 아이콘들을 만들어 컴포넌트로 등록을 하고 폴더명을 알맞게 적용을 해두면 컴포넌트를 적용할 때 드래그 해서 가져가도 되지만, 왼쪽 패널에 Assets에서 불러올 수 있다.

 

 

만들어둔 컴포넌트를 Assets에서 불러와서 배치하고 텍스트 변경

 

<실습 - 써브웨이 영상목록>

아까 같이 만들어본 녹색생활 배너를 참고하여 써브웨이 영상목록을 만들어보기

 

우측 바에서 Local styles에 컬러 등록을 해서 사용할 수 있음
Local styles에서 +를 누르고 color를 선택한 후, name, properties를 설정 후 create color를 누르면 끝

 

추가한 컬러를 사용할 때는 fill 혹은 stroke에서 색상박스를 클릭 후, 젤 하단에 on this page를 local colors로 변경하면

아까 추가한 색상이 하단에 뜬다.

 

삼각형, 오각형 등 도형의 경우, 바운딩박스안에 도형이 여백이 발생하는데

이 여백을 없앨경우, 도형 선택 후, 오른쪽 마우스 버튼 클릭 후, outline stroke를 눌러주면 여백이 사라진다.

컴포넌트를 만들고 인스턴스로 사용할 경우, 값을 변경하지 않았다면 원본 컴포넌트의 영향을 받는다.
하지만 fill값이던지 텍스트 변경이던지 값이 변경된 경우는 영향을 받지 않는다.

 

 

1. 예제 이미지를 참고하여 컴포넌트 구성을 어떻게 해야할지 생각해보기

2. 재생버튼, 정지버튼, 일시정지버튼 3가지로 만들어서 각각을 컴포넌트로 등록하기

3. 더 보기 버튼을 만들어서 컴포넌트 등록하기

4. 영상 썸네일과 제목을 하나로 묶어서 컴포넌트로 등록하기

 

 

네모박스에 스트록을 주고 안에 이미지를 넣고 fill 컬러를 하나 추가해서 블랙색상 opacity값을 주었다.

이렇게 만든 컴포넌트들을 사용하여 영상목록을 만들었다.