피그마 강의1 (Figma Lecture 1)_11.27

안녕하세요~ 루에요

오늘은 2주차 첫날이에요

이번주에는 피그마를 배울 예정인데요

피그마를 배우기 전에 피그마의 특징에 대해 한번 짚고 넘어가는 것이 좋겠죠?

 

피그마? 과연 무슨 툴인가요?

피그마는 어도비 산하의 웹 기반 UI/UX 디자인 및 프로토타이핑이자 협업툴이에요!

그렇다면 피그마는 어떤 특징을 가지고 있을까요?

 

과거의 워크 프로세스는 디자이너따로, 개발자 따로, 협력사 따로 제각기의 업무를 분담해서 커뮤니케이션이 각자의 영역에서 이루어졌어요

그렇기 때문에 커뮤니케이션이 원활하지 않았던것이 큰 문제였죠

서로가 사용하는 프로그램에 대한 언어와 도구의 이해가 부족했기 때문이에요

피그마의 특징은 이러한 부분을 협업에 적합한 형태로 워크프로세스 변화시켰다는 것에 있어요!

피그마의 주요 특징

• Figma는 제작, 협업, 프로토타입 제작 및 전달을 위한 온라인 UI 도구
• SaaS(Software as a Service) 사용으로 클라우드 기반의 서비스형 소프트웨어 형식
• 실시간 협업 : 버전 관리나 서로의 작업을 같은 파일에서 동시 작업
• 항상 최신 버전: 모두가 항상 최신 디자인 파악
• 멀티플레이어 편집 : 여러 사람이 동시 또는 비동기적으로 파일을 보고 편집 가능
• 상황별 피드백 : 코멘트를 통해 디자인과 프로토타입에 대한 소통
• 프로토타이핑 : 상호작용 및 User Flow 미리보기
• 라이브 챗팅 : 슬래시 키(/)를 클릭하면 말풍선이 활성화되어 메시지 작성
• 음성 챗팅 : 우측 상단 헤드셋 아이콘 클릭 시 팀원과 음성 채팅
• Dev mode : 개발자를 위한 모드 (Export, Inspect, 개발자 플러그인)

이러한 특징이 있어요 

 

 

그러면 피그마를 사용하기 위해서는 어떠한 기본 개념을 알아두어야 할까요?

그건 바로 DPI 입니다

DPI 개념

DPI란 무엇인가요?

dpi는 Dot Per Inch로 1인치에 들어가는 픽셀을 나타내는 단위로 100 dpi는 1인치당 픽셀이 100개가 포함됨을 의미합니다

(개수가 많을수록 고밀도를 의미하기도 하지요)

 

 

[Android의 기준 dpi]

• 기준 dpi는 160 dpi
• 160 dpi인 PX과 경우 픽셀 독립단위 dp가 같은 크기

[Android에서의 dpi 종류]

• mdpi: 160dpi (기준점)
• hdpi: 240dpi
• xhdpi: 320dpi
• xxhdpi: 480dpi
• xxxhdpi: 640dpi

하단은 윗 설명에 대한 예시 이미지입니다.

 

그러면 과연 우리는 어떻게 작업해야 하는걸까요?

 

⭐️ 피그마 1배율 작업 

피그마에서는 1배율 해상도로 작업 후 배율을 키워 내보내는 작업 방식 권장합니다

1배율 작업 시 향후 3배율 및 4배율 등의 전환에 적합하고 1배율 작업 시 용량 관리에 적합하기 때문이에요

또한 1배율로 작업을 하게되면  소수점 문제 완화가 가능해요

 

피그마에서 지원하는 배율 종류는 아래와 같아요

🅐 0.5x, 0.75x, 1x, 1.5x, 2x, 3x, 4x, 512w, 512h

확장자 종류

🅑 PNG, JPG(5≥ JPEG), SVG*, PDF*

* SVG와 PDF는 Figma에서 1x의 배율만 지원합니다

해상도에 따른 배율 디자인

 

디스플레이의 발전

• 고밀도 디스플레이의 등장으로 디바이스 해상도가 발전
• 같은 크기의 물리적 공간 안에 더 많은 픽셀(px)을 넣을 수 있게 되면서 더 선명한 화면 표현 가능
• 픽셀(px)크기는 정해진 크기가 아니라, 픽셀 밀도가 높아지면 픽셀 크기는 작아짐

밀도 독립적 픽셀(dp)의 등장

• 좌측 이미지처럼 같은 1픽셀(px)인데, 크기가 차이나는 현상이 발생
• 픽셀 개념으로 디자인되었을 때 발생하는 현상을 방지하기 위해
• dp가 등장

 

픽셀(px), 밀도 독립적 픽셀(dp)의 개념

 

픽셀 기준으로 디자인하는 경우

• 디바이스의 픽셀 밀도(dpi= linch 공간에 표시되는 픽셀 수)로 인해 의도한 것과 다르게 작거나 크게 표시될 수 있음

 

Android의 사용 단위

• 어떤 화면에서도 같은 크기로 보이도록 밀도 독릭접 픽셀(dp) 사용

 

dp를 사용하지 않았을 때의 문제점

• 픽셀로 크기를 정의하면 디바이스 화면 크기에 따라 픽셀 밀도가 달라져 같은 개수의 픽셀이라도 디바이스가 다르면 실제 크기가 달라짐

 

4px그리드

 

4dp 그리드란?

• 4의 배수로 간격을 통일시키는 것

4dp 그리드의 사용 이유

• 다양한 배율(0.5X, 1.5X ..)에서의 Export 할 때 픽셀 틀어짐을 방지
• 필요에 따라 그리드 확장 및 축소하여 디바이스 크기와 해상도에
  적용 가능
• 개발자가 디자인을 구현할 때 일관성 유지 및 오류를 줄일 수 있음

4dp 그리드를 사용하지 않았을 때 문제점

• Export 할 때 픽셀 틀어짐과 소수점이 발생하여 개발자 업무에 지장

 

2dx 그리드로 다양한  디바이스에 채용

 

디바이스 환경에 배율 설정

🅐 4dp 그리드로 작업하는 경우 1.5X로 배율을 키워 Export해도 픽셀이 틀어지지 않음

🅑 dp 그리드로 작업하는 경우 1.5X로 배율을 키워 Export 할 경우 픽셀이 틀어짐 발생

 

 

 

✨2. 피그마 인터페이스 이해

 2. Design Mode Inerface

 

(1) 피그마 인터페이스 이해 개요

• File 내 Can edit 권한에서 보이는 일반적인 화면
• 피그마 File을 선택하거나 공유된 링크로 접솏 보이는 화면

(2) 상단 툴바

• File 내 Can edit 권한에서 보이는 일반적인 화면
• 상단 툴바의 종류

(3) Layer(레이어) 패널01 - 속성 명칭

• 캔버스에 추가된 모든 프레임, 그룹 또는 개체 레이어 패널이 표시
• 프레임, 그룹, 개체는 다양한 속성이 부여
• 최근 만들어진 개체가 레이어 상단 위치
• Can View 권한에서는 레이어만 나타나고 Assets는 볼 수 없음

 

(3) Layer(레이어) 패널02 - 속성 별 분류

• 레이어 속성을 구역 설정 요소, 컨테이너 요소, 재사용 가능 요소, 콘텐츠 요소로 분류 

 

(3) Layer(레이어) 패널03 - 속성 명칭

• 캔버스에 추가된 모든 프레임, 그룹 또는 개체가 레이어 패널에 표시
• 캔버스 자체 또는 레이어 패널에서 레이어 선택
• 프레임, 그룹, 개체는 다양한 속성이 부여
• 중첩된 개체를 자식 개체라고 하고, 이 개체가 중첩된 프레임 또는 그룹을 부모 개체라고 분류

 

 

(4) Assets (에셋) 패널

• 에셋 패널은 등록된 라이브러리, 컴포넌트가 모여 있는 보관소
• 피그마에서 생성한 컴포넌트, 외부에서 공유한 라이브러리 등의 에셋들이 모여 있음
• 필요에 따라 대상을 선택해서 작업 영역으로 드래그하면, 라이브러리에 연결된 인스턴스를 생성하는 방식으로 작업 영역에 배치 가능

(5) Design (디자인) 패널- 캔버스에서 아무것도 선택하지 않은 경우

• 디자인 패널에서는 디자인 내 개체의 속성을 확인, 추가, 제거 또는 변경 가능

[캔버스에서 아무것도 선택하지 않을 경우]

1. 캔버스의 배경색 업데이트
2. 파일로 로컬인 스타일 및 베리어블에 액세스
3. 전체 페이지 내보내기

(5) Design (디자인) 패널 - 캔버스에서 레이어를 선택 한 경우

• 디자인 패널의 프로퍼티스 영역에서는 디자인 내 개체의 속성을 확인, 추가, 제거 또는 변경 가능
• 프로퍼티스 영역은 선택한 대상에 따라 사용 가능한 설정이 바뀌는 가변형임

 

1. 도형 선택 시 우측 프로퍼티스의 모습
2. 텍스트 선택 시 우측 프로퍼티스의 모습
3. 이미지 선택 시 우측 프로퍼티스의 모습

 

3. Dev Mode Interface

(1) Dev Mode (데브 모드) Off 상태 인터페이스

• 데브 모드 Off 상태 즉, 디자인 모든 상태에서 확인할 수 있는 인터페이스

 

  주요 기능

  A.   Dev Mode로 전환하는 버튼

  B.   프레임, 그룹 및 레이어 패널 표시

  C.   디자인, Export, Comment, Properties 확인

 

 

✨3. 피그마 기본 기능 이해

 

1. 프레임(Frame)

(1)  피그마 프레임 정의

    [프레임의 정의와 역할]

• 아이폰, 갤럭시 안드로이드폰과 같은 기기, 혹은 웹사이트 디자인시 화면의 크기를 지정할 경우, 프레임을 사용하여 그 안에 디자인을 진행함
• 프레임은 디자인의 요소들(레이어, 오브젝트, 이미지, 텍스트 등)이 포함되는 컨테이너의 역할
• 이 외, 레이아웃 그리드 적용이나 오토 레이아웃, 프로토타이핑과 같은 추가적인 기능 사용시 프레임에서만 동작함 (일반적으로 사용하는 그룹(Group)에서는 해당 기능 사용 불가)

    [프레임 특징]

• 포토샵, 일러스트레이터와 달리, 프레임 안에 다른 프레임을 삽입하여 사용 가능
• 프레임 안에 삽입된 프레임은 오토 레이아웃, 컨스트레인트 등의 기능을 사용하여 좀 더 다양한 UI GUI 디자인을 진행할 수 있게 함

 

(2) 프레임 중첩 사용의 이해

    [프레임 내 프레임 삽입 (중첩)]

• 프레임에 다양한 기능을 적용함으로서 디자인에 편리한 여러 기능이 적용된 인터페이스 구축 가능

     [중첩으로 나타나는 새로운 계층 구조 (역할)]

• 최상위 프레임 : 캔버스에 위치한 프레임 = 화면의 틀 역할
• 삽입(중첩)된 프레임 : 프레임 내 삽입된 프레임 = 기능적 요소로 동작 (오토 레이아웃, 컨스트레인츠..)

(3) 프레임의 사용 예시

 

    [최상위 프레임]

• 프레임을 사용하여 여러 기능이 적용된 인터페이스 구축

    [리소스 관리]

• 프레임내 프레임을 삽입(중첩)해 디자인 리소스 관리
• 오토 레이아웃

(4) 프레임 생성 방법

    [생성 방법과 단축키]

• 피그마 상단 툴 바에서 Frame 아이콘 선택
• 단축키 : F

(5) 프레임 종류 확인

•  프레임 선택 시 우측 디자인 패널에서 확인 가능

 

    [프레임 종류]

1. Phone
2. Tablet
3. Desktop 
4. Presentation
5. Watch
6. Paper
7. Social media
8. Figma Community
9. Archive

(6) 프레임 상세 설정 01

    [프레임 크기 설정]

1. 버튼 클릭을 통해 세로 • 가로 변경 가능
2. 프레임의 크기를 직접 변화 가능

2. 쉐입(Shape)

(1) 쉐입 생성 위치 및 종류 확인

 

    [생성 방법]

• 상단 툴바에서 쉐입 아이콘 생성 가능

    [쉐입 종류와 단축키]

• Rectangle (단축키 : R)
• Line (단축키 : L)
• Arrow (단축키 : Shift + L)
• Elipse (단축키 : 0)
• Polygon
• Star
• Place image/video (단축키 : Shift + Ctrl or Cmd + K)

 

(2) 쉐입 조합 위치 및 종류 확인

    [쉐입 조합 방법]

1. 조합할 쉐입 2개 이상 선택
2. 상단 툴바 중앙의 쉐입 조합 버튼 선택

    [쉐입 조합 종류]

• Union selection
• Subtract selection
• Intersect selection
• Exclude selection

(3) 쉐입 조합 모습 확인

• 쉐입 조합된 모습 확인

 

3. 컬러와 텍스트

(1) 색상 모델 종류

    [종류와 특징]

• HEX, HSB, HSL, CSS, RGB의 5가지 색상 모델 제공
• 색상 모델 간 전환은 Figma가 색상을 설명하는 방식에만 영향을 미치며, Figma가 색상을 렌더링하는 방식에는 영향을 주지 않음

(2) 컬러 설정

• 기본적인 채움(Solid)외 그라디언트(Gradient)를 통항 색 설정 가능

 

✨4. 피그마 협업 & 문서화

1. 코멘트

(1) 코멘트 사용

• 코멘트는 수정이 필요한 작업물의 위치에 표기할때 실시간으로 사용
• 코멘트는 전체 작업자, 특정 작업자, 드래그를 통해 영역을 지정 후 작성 가능

 

단축키

Ctrl + Shift + Slash : 단축키 나타내기

 

불법으로 가져가시거나 공유하시는 행위는 일절 금지입니다.

필요하시다면 댓글로 말씀을 물어주세요☺️