[콘텐츠 마케팅 초단기 스쿨 스터디 노트] #5

[CHAPTER 04 그래픽 스타일의 활용]

1. 컬러와 스타일
제품이나 서비스를 구현하는 작업에서 일관성있는 색상적용을 위한 작업 

HEX값: RGB와 투명도00%

설정한 도형을 다음에도 사용하기 위해 스타일 저장하는 방법: Fill 오른쪽에 점4개클릭/Stroke 오른쪽 점4개클릭 -> +클릭->style에서 색상 이름적고 creat style 클릭하면 등록됨(Description은 어떤 용도로 사용할지 적는건데 생략가능)
color style-> 컬러이름 오른쪽 edit 혹은 컬러이름 클릭->Properties에서 색상 변경가능(설정되어 있는 도형들의 색이 한번에 모두 바뀜)
컬러 이름 오른쪽에 Detach style누르면 설정해제되고 자유롭게 설정가능

Material 디자인2에서 프라이머리단계와 세컨더리단계의 툴을 제공 하고 있음
color palettes에서 원하는 색상의 단계들을 볼 수 있음
컬러색상이름을 ex) primary/500 로 작성하면 Primary폴더에서 색상500으로 저장됨.
색상단계만들기: 도형그리고 색상지정-> 왼쪽상단에서 손바닥툴 왼쪽꺼 클릭-> plugin에서 tail wind검색해서 'tailwind color generator'플러그인 생겨남-> 기존색상적고 check눌러 있는지확인->create->오른쪽 레이어바에서 색상단계생성된거 확인할 수 있음

2.스타일과 토큰
개발자와 핸드오프과정을 거치기위해 많이 사용함

토큰: 색상의 코딩 생성
도형그리고 색상 넣은 후 색상단계 만들기-> plugin에서 Tokens studio 실행
토큰에서는 이름첫글자 대문자 작성

3.타이포그래피
텍스트툴: 1)클릭하기 2)드래그하기(텍스트박스 크기지정됨)

글자사이즈는 특정한 배수를 주는 것이 좋음

토큰->sizing, font family, font weight, line height, font size, 타이포그라피에서 설정

피그마에서 제공하지 않는 글자사이즈를 일정하게 활용할 수 있음

 

Typescale.com 에서 글자사이즈 확인할 수 있음. 
기본 body 사이즈: 16
scale: 1.333배수의 크기 가장 많이 사용

 

4.그라디언트의 활용
도형그리기->Fill에서 색상눌러 컬러패널열기->custom아래 2번째아이콘 그라디언트 클릭해 2개이상의 색상 설정하기

5.도형과 이펙트
도형그린 후 면과 선 색상설정하기->오른쪽바에서 아래 Effects에서 그림자 설정

Effects +를 클릭해 효과 추가 가능(하나의 값이 아닌 2~3개 겹쳐진 값)

ctrl+alt+c =도형, 문자의 속성 복사
ctrl+alt+v= 도형, 문자의 속성 붙여넣기

6.이미지와 플러그인
ctrl+shift+k= 이미지불러오기
1)클릭하기 2)드래그하기(일부영역보이지 않을 수 있음) 3)shift+드래그

도형을 그리기-> 이미지불러와 도형위에서 클릭 = 도형안에 이미지 들어감
Fill->도형안 위치 옮기기, 회전, 타일형식, 밝기 등 변경 가능

무료이미지사이트: Pexels

ctrl+D=이미지 복제
2개의 동일한 이미지를 빗겨지게 배치->이미지패널->물방울모양 클릭 = 블랜드모드 설정

plugin추천: Material Design Icons, unsplash, Contant Reel, LottiFiles

도형으로 필요한 이미지의 크기를 그려두고 삽입하기

[CHAPTER 05 정렬과 레이아웃]

1.프레임과 레이어
ctrl+d =프레임 복사해 여러화명만들기
ctrl+0=중앙을 중심으로 1:1화면비율
프레임위에서 스페이스누르면 화면 옮기기
shift+1= 화면에 꽉차는크기로 1개의 프레임보임

도형을 여러개 그린 후 왼쪽바 폴더에서 좌물쇠누르면 프레임 잠김.-> 이후 도형은 프레임에 귀속되지 않게 그려짐.

오른쪽 바에서 clip contant: 프레임 밖의 모습 보이게할지 말지 체크표시하면 됨 (못찾겠다 😭😭😭)

ctrl+shift+L = 여러개의 프레임 또는 도형 잠금 설정
ctrl+shift+H= 프레임 또는 도형 안보이게 설정

피그마 연습1

   

             
2.정렬과 스마트 셀렉션

 

 

 

도형 그린 후 오른쪽 바 상단에서 다양한 위치 정렬 설정 가능

 

 

 

 

 

여러개 도형 정렬 설정

 

 

 

 

 

 

 

 

스마트셀렉션기능으로 편리하게 사용가능

수평이동시 자동 이동

상하이동은 자리차지함

도형내부의 점을 shift를 누른상태에서 연속적으로 선택한 후 높이, 크기, 간격을 변경할 수 있음

 

 

피그만 연습2

 

3.컨스트레인트

반응형그리드와 유사함

머트리얼디자인 가이드에서 스펙으로 제공하고있는 사이즈 체크해 도형 배치하기
뒤로가기버튼: 넓이와높이는 24, 위 아래 왼쪽 간격은 16
도형간 간격:24

하단의 푸터영역: 주소, 전화번호 등 들어감

왼쪽바의 constraints: 도형의 왼쪽, 오른쪽, 상하 중 어디를 고정시킬 것인지 설정. 프레임 이동시 함께 늘어나거나 이동함.

컨셉을 잘 보여줄 수 있는 이미지넣기

 

피그마 연습3

4.오토레이아웃
프레임에 자동으로 간격을 만들어 프레임을 콘텐츠에 동적으로 반응하도록 만들어줌
모바일 ui를 구현해내 많이 사용하는 기능

오른쪽 바에서 오토레이아웃 설정
여러개도형드래그 후 오른쪽 클릭해서 설정
단축기: shift+A ->많이 사용함
오브젝트의 프레임 안 위치 선택가능
가로정렬된 도형들을 세로 또는 사각형 등으로 재정렬할 수 있음

ctrl+shift+G=그룹해제
ctrl+R=여러게 도형 셀렉후 단축기 누르면 도형 이름 지정가능

도형클릭후 도형간 간격사이 클릭후 좌우로 움직여 간격 수정 가능 or 오른쪽바에 오토레이아웃에서 숫자 수정에 설정가능
오토는 프레임의 크기에따라 자동간격설정됨

5.레이아웃 그리드
머트리얼디자인2->아이코노그래피->시스템아이콘= 선과 간격에따라 만들어진 자료들 볼 수 있음

shift+R=테두리에 자 나타남

프레임에 그리드 생성 후 도형이 8간격씩 이동할 수 있게 설정하는 방법

모바일에서의 컬럼 설정 예시. 컨텐츠의 양의 따라 마진값 16~24 설정하기

[CHAPTER 06 컴포넌트와 베리언트]

1.컨포넌트와 인스턴트
컨퍼넌트 등록하기: 도형에서 오른쪽클릭-> create component(ctrl+alt+k)->보라색 라인으로 바뀜

컨퍼넌트도형 복사해 생성한 인스턴스도형들도 함께 변경사항 적용되나, 개별적으로 바뀐 후로는 영향받지 않음

오른쪽바에서 클립 컨텐트 아래 점3개클릭-> 디테치 인스탠트->해제상태

프로젝트가 끝나고 컨퍼넌트 페이지 끄지 않기

2.베리언트의 활용
하나의 컨퍼넌트를 등록해 다양한 방식으로 베리에이션하여 사용하는 방식

 

 

 

 

 

 

 

 

 

“이 글은 제로베이스 콘텐츠 마케팅 스쿨의 강의 자료 일부를 발췌하여 작성되었습니다.”