제로베이스 콘텐츠 마케팅 스쿨 | 스터디 노트_8 | FIGMA (2)

01_그래픽 스타일의 활용

Fill을 활용한 컬러

Fill 탭을 활용한 채색

• Hex  / RGB / CSS / HSL / HSB 옵션을 선택하여 코드로 색상 지정이 가능
• On this page에서 현재 작업창에서 사용중인 색상 선택이 가능
• 하나의 오브젝트에 대해 투명도 조절을 활용한 컬러 믹스가 가능 (컬러 믹스 결과물을 스포이드(단축키: I)로 단일 추출 가능)
• 자주 사용하는 컬러 등록: Fill 탭 우측의 점 네개 클릭 → + 클릭 →  Style → 이름 설정 → Createa style
• 등록한 컬러 사용: 아무것도 선택하지 않은 상태에서 Design 패널 → Color styles
• 등록한 컬러 사용 후 컬러 변환: Fill탭 컬러 우측 Detach style 클릭 후 수정
• 등록한 컬러 변경: Color styles에 등록한 컬러 우측 Edit style 아이콘 클릭 후 수정 (Color style을 수정하면 해당 색 사용한 오브젝트의 색상이 일괄적으로 변경)

Tip. 스타일 등록 과정에서 이름 지정시 그룹명/스타일명을 입력하면 그룹안에 스타일 생성 가능

 

그라디언트 (Gradient)

그라디언트의 4가지 유형 좌측부터 Linear, Radial, Angular, Diamond

 

• 기본값으로 한쪽 알파값이 0으로 되어있음 → 양쪽 알파값 100%로 수정 후 진행
• 색상 범위 추가: 중간 라인 클릭 / 색상 범위 삭제: 컬러 박스 선택 후 Delete
• 컬러 조정 창이 떠있는 경우 오브젝트 선택이 불가능

Tip. 컬러와 동일한 방식으로 그라디언트도 Color style 등록이 가능하다

 

도형과 이펙트

이펙트의 상세 속성

 

Inner shadow: 레이어 안쪽에 그림자를 생성

Drop shadow: 레이어 바깥에 그림자를 생성 (기본 설정)

Layer blur: 레이어 가장자리에 흐림 효과를 적용 (경계선이 흐릿해짐)

Background blur: 레이어 자체에 흐림 효과를 적용 (레이어 뒤에 있는 이미지가 흐릿해짐. 투명도 조절이 필요하다)

 

• 그림자는 검정색보다 오브젝트의 주요색을 참고해 어둡게 넣는 것이 좋음
• 이펙트는 중복 적용이 가능
• Effects 탭 우측 점 네개 → + 클릭 → 이름 설정 → Create style을 통해 Color style처럼 Effect style 등록이 가능
• 오브젝트 전체 속성 복사 단축키: Ctrl + Alt + C → Ctrl + Alt + V

 

이미지와 플러그인

이미지 파일 불러오기 방법

1. Drag & Drop 으로 간편하게 이미지 불러오기
2. Place image (Ctrl + Shfit + K)로 이미지 불러오기 

Place image에서 (= Ctrl + Shift + K를 누른 상태에서)

• 드래그 + Shift 눌러서 비율 유지하며 필요한 크기로 이미지 불러오기 가능
• 도형을 클릭하면 도형 안에 이미지가 들어감 (해당 도형에 다른 이미지를 불러오면 변경 가능)
• Fill → Crop에서 이미지 배치 변경 가능

이미지의 블렌드 모드 (Blend Mode)

블렌드 모드 옵션

 

Fill → Image → 우측 상단 물방울 모양 아이콘 클릭 후 블렌드 모드 적용 가능

포토샵의 블렌딩 모드와 같은 기능

플러그인

우클릭 →  Plugins 에서 원하는 플러그인 사용 가능 (Community에서 다양한 플러그인 설치 가능)

 

UI Faces 플러그인: UI 작업에 필요한 인물 이미지를 빠르게 생성할 수 있는 플러그인

Unsplash 플러그인: 무료로 퀄리티 높은 다양한 이미지를 빠르게 사용할 수 있는 플러그인

---

02_정렬과 레이아웃

프레임과 레이어

• Page ⊃ Frame 개념 (Page 생성 후 그에 해당하는 Frame들을 만들기)
• 프레임 안에 프레임을 만들 수 있다.
• 오브젝트가 안에 있을 때 프레임을 선택하기 위해선 프레임 이름을 클릭
• 우측 Frame 속성 → Clip Content를 활성화 시켜 놓아야 오브젝트가 프레임을 벗어나도 프레임에 귀속 가능 (켜두는 것을 추천)
• Rename (Ctrl + R): 레이어 이름 수정 가능 (여러개를 한 번에 변경도 가능)

정렬과 스마트 셀렉션

정렬

정렬의 옵션

 

오브젝트와 오브젝트, 오브젝트와 프레임 사이의 좌/중/우 정렬 기능을 제공

 

Tidy up: 3개 이상의 오브젝트에서 가장 넓은 사이 간격에 맞춰 간격을 정렬

Distribute vertical spacing: 가장 위/아래에 있는 것은 고정하고, 사이 간격을 동일하게 정렬

Distribute horizontal spacing: 가장 왼쪽/오른쪽에 있는 것은 고정하고, 사이 간격을 동일하게 정렬

 

스마트 셀렉션 (Smart Selection)

스마트 셀렉션 화

 

오브젝트가 2개일 때는 간격 상관 없이, 3개 이상일 때는 오브젝트간 간격이 동일하면 사용 가능한 기능

 

도형 안쪽에 있는 분홍색 원을 클릭하고 드래그 해서 오브젝트의 위치 변경 가능

도형 사이의 분홍색 선을 클릭하고 드래그 해서 각 오브젝트의 간격 변경 가능

 

컨스트레인트 (Constraint)

Constraint 설정 화면 (좌) / Prototype의 Scroll behavior 설정 옵션 (우)

 

반응형 디자인에서 주로 활용

프레임의 크기가 바뀔 때, 프레임의 좌/중/우측 경계나 상/중/하단부 경계에 맞춰 오브젝트가 배치 되도록 하는 기능

 

프로토타입 (Prototype) 탭 → Scroll behavior 탭에서 Fixed (stay in place)를 설정하면 스크롤 여부에 상관없이 오브젝트가 화면 내부에서 계속 표시되게끔 할 수 있다.

 

오토레이아웃 (Auto Layout)

오토 레이아웃 설정 화면

 

오토 레이아웃 설정 단축키: Shift + A

오토 레이아웃 해제 단축키: Alt + Shift + A

 

프레임 안의 오브젝트끼리의 관계를 정하여, 자동으로 레이아웃을 맞춰주는 기능

 

Tip. 들어갈 오브젝트가 받아줄 오브젝트보다 클 때는 Ctrl 키를 누르고 드래그

 

레이아웃 그리드 (Layout Grid)

안드로이드와 데스크톱 기준 Columns 레이아웃그리드 작업 예시 (좌) / Layout grid 설정 옵션 화면 (우)

 

웹이나 모바일 화면 설계에 있어서 필수가 되는 설정

 

Layout grid 탭 우측 네 점을 클릭 → +아이콘 클릭 → 이름 설정 → Create style을 통해 grid style 저장 가능

 

Tip. http://gridcalculator.dk 사이트에서 그리드 계산 가능

Lorem ipsum 플러그인을 사용해서 손쉽게 더미 텍스트 입력 가능

---

소감

피그마에서 가장 핵심이 되는 기능인 오토레이아웃을 비롯해 다양한 기능을 배울 수 있었다.

 

사전 강의에서 공부했을 때부터

포토샵이나 일러스트와는 또 다른 강점이 있는 툴이라고 생각했다.

 

아직은 낯설지만 더 익숙해질 필요성이 있는 툴인 것 같다.

남은 피그마 강의도 열심히 들어볼 생각이다.

 

 

* 이 글은 제로베이스 강의 자료를 발췌해 작성되었습니다.