피그마 중급

■ 피그마 Local file로 변경

- xxx.fig 파일로 로컬형태로 저장 가능

 

 

 

 

■ 피그마 협업 및 Icon

○ 많이 사용하는 Plug in

○ 피그마 협업

- Team project : 1개의 팀 프로젝트에 4개의 Design 파일을 제작 가능

그 이상은 유료

 

- Share를 눌러서 공유할 수 있으며

이메일을 통해 Invite 초대할 수 있다.

Can view, Can edit으로 사용가능함

 

 

○ 아이콘 및 플러그인 추가

Community profile을 활용 검색하여 Icon 및 기타 플러그인 추가 가능

Preview 를 활용하여 문제 없이 제공하는지 확인 필요

 

 

 

 

■ 피그마 컴포넌트

디자인에서 반복적으로 사용되는 요소를 한 번만 정의해두고,

다양한 곳에서 재사용할 수 있는 기능

컴포넌트를 사용하면 디자인의 일관성을 유지하고, 변경 사항을 쉽게 적용

 

○ Component (Master, Instance)

- Master : 컴포넌트의 원본이 되는 요소

- Instance : 원본 컴포넌트로 복제한 요소

- Master 컴포넌트를 변경하면 Instance를 같이 변경가능

- 변경된 Instance는 Master가 변경되도 변경안됨.

- 변경된 Instance의 속성을 제외하고는 변동됨

 

 

- 등록한 Component는 Asset에서

Local assets에서 Instance로 가져올수 있음

 

- Instance의 속성을 Master와 맞추려면

마우스 오른쪽 눌러서 Reset All Changes 클릭

 

- Instance 의 Component 해제로 일반 요소로 사용하던지

새로운 Master Component로 제작시

오른쪽 마우스 메뉴에서 Detach instance 사용

 

- Master component 이동 및

Instance로 변경한 요소로 Master component 변경

 

- Component는 제작후 해제 할 수 없지만

Instance를 만들어서 Instance를 Master와 연결을 끊어

일반 프레임으로 만드는 방법은 있음

 

 

 

○ Component 활용 버튼 만들기

- 1개의 Master를 수정하면 모든 Instence를 변경할 수 있다.

- Button 형태를 만들때는 버튼을 Auto Layout 으로 작성하는 것이 좋다.

 

○ 여러개의 Component를 한번에 등록하기

- 여러개를 선택한 상태에서 Multiple Components

 

○ Instance Swap 

- 인스턴스 컴포넌트에서 다른 컴포넌트를 변경하기 위해서는

이름을 눌러주면 Swap Instance나와서 컴포넌트를

눌러주면 변경되며

다른쪽 컴포넌트를 사용하기 위해서는

Local Components를 눌러 주면됨

 

 

 

○ Component와 한글더미 사용하기

- 한글더미를 사용하면 일일이 텍스트를 입력할 필요없이

글자들을 만들어 준다. 디자인을 위해 글자 배치시 많이 사용됨

plugin에서 추가해서 사용하면 됨

 

 

 

■ 피그마 컴포넌트의 프로퍼티

컴포넌트를 여러개를 작성하여 쉽게 변경시킬 수 있는

여러가지 속성

 

 

 

○ Varient

- 여러 상태에 대한 변화되는 요소를 만들어

빠르게 어떠한 상태로 인스턴스 요소를 변경한다.

 

- 컴포넌트를 누르고 프로퍼티를 누르면 메뉴가 뜨고

Variant를 누르면 배리언트를 추가시키는 매뉴가 뜬다.

 

 

- 추가를 하고 요소의 속성을 변경한 후

우측에서 이름을 지정 해 줄 수 있다.

 

 

- 새로운 인스턴스를 만든 후 인스턴스에서 프로퍼티를

선택해 주면 적용할 수 있다.

 

 

- 여러가지 유형을 만들어서 한번에 만드는 방법

먼저 여러가지 유형의 프레임을 만들고

둘다 선택후 Create component set 이용

 

 

- 크기 변경 및 여러가지 형태 만들기

 

 

○ Boolean

- 참과 거짓으로 두가지 형태만 가지고 있음

맞고 아님만을 뜻함 (있고 없음)

컴포넌트를 선택한 후 블린을 넣으면 이름과 현재를 어떤 값으로 지정할지 선택

 

- 메인 컴포넌트에서 사라지게 할 요소를 선택한 후 모양에서 블린의 이름을 클릭

 

 

- 인스턴스 요소에서 끄고 킬것들을 선택하고 이름이 지정된 블린을 체크 및 체크 해제

 

 

 

○ Instance swap

- 여러 컴포넌트들을 등록해 놓고

새로운 화면을 작성할때 이전에 등록한 하나의 컴포넌트에 대해서

인스턴스화 하여 같이 작성하여 손쉽게 여러 컴포넌트들을 사용

 

- 여러 컴포넌트 제작

 

- 새로운 화면 구성 구성시 인스턴스 컴포넌트 작성

 

 

- 화면에서 인스턴스 스웹 클릭 이름 입력

 

- Value값 입력시 기본 컴포넌트 선택

 

 

 

- +눌러서 변경이 쉽게 인스턴스들을 등록

 

 

 

- 메인이 되는 컴포넌트 화면에서

내부 인스턴스 컴포넌트를 선택하고

Apply instance swap property 선택

 

 

 

- 화면구성한 컴포넌트의 인스턴스를 클릭하여

Instance메뉴에서 어떠한 컨포넌트를 사용할지 지정

 

 

 

 

 

 

 

 

 

■ 변수 Variables

일관된 디자인을 위해 사용하는 값을 저장 및 변경할 수 있는 기능

변수 : 변할 수 있는 수 (값)으로

특정 값에 이름을 붙여놓고 이름으로서 값을 불러올 수 있다.

 

장점 : 디자인 요소들을 쉽게 변경하고 일관성을 넣어 줄 수 있다. 

 

 

○ 변수의 사용가능 타입

 

- Color : Fill, Stroke, Effects

- Number : Width & Height, Padding, Margin, Gap, Corner Radius, Stroke

- String : Text

- Boolean : True or False

 

○ Color

색을 저장할수 있고 Hex 값, 변수 이름등을 넣어 줄 수 있다.

 

- collection 만들기

여러 변수의 묶음으로 관리 할 수 있다.

이름도 지정 가능 

 

- 변수 만들고 값 넣어주기

Name은 변수의 이름을 지정하고 Value에 값을 지정함

 

 

- 요소에 색 넣어 주기

색에서 Libraries에 넣어준 색이 있음

 

 

- 변수의 값 변경

변수의 값을 변경하면 동일한 변수명으로 지정된 요소의 색을 변경한다.

 

- 변수의 값을 변수로 지정 가능

 

 

- 옵션

 

- New Group

변수를 그루핑 해준다.

그룹 이동은 클릭 드래그

 

- Edit Variables

변수 편집 , Scope 기능을 사용하여 특정한 곳에서면 사용 가능하도록 체크 해 줄수 있다.

 

 

- Duplicate Variables

동일한 색을 복제 해준다

 

 

- Delete Variables

변수를 삭제한다.

 

 

○ Number

많이 사용하는 수치값을 하나의 변수로 지정하고

변수값을 변경하면 연동되서 모두 변경됨

 

 

○ String

문자를 변수로 저장해 두고 변수 내용을 수정 하면 한번에 수정이 가능

 

○ Boolean

Boolean이 False면 안보이고 True면 보이게함

Apperance 눈에서 Shift 클릭

 

 

 

■ 프로토타입 Prototype

디자인 요소와 화면 간의 상호작용을 시뮬레이션하고

시각화 하는 기능을 제공 디자인의 동작을 검토하는 형태

 

○  Prototype 기본

- page별로 Prototype을 지정하고 사용할 수 있다.

기본 Settings을 해주면 그대로 화면 조절 가능

 

- No device는 기본 Frame 크기로 보여 준다.

 

○  Interaction (상호작용)

 

○  Triger

상호작용을 하기 위한 사용자의 행동을 정의함

 

 

- On click

마우스로 클릭하거나 손가락으로 터치 했을때 실행

 

- On Drag

오브젝트를 드래그할 때 실행

 

- While hovering

마우스 커서가 있을때 실행 (빠지면 액션 취소)

 

- While pressing

길게 누르거나 터치 하는 동안 실행

 

- Mouse enter

마우스 커서가 들어가는 순간 실행(마우스가 없어도 액션이 취소 안됨)

 

- Mouse leave

마우스 커서가 사라지면 실행

나머지는 유사

 

- After delay

일정시간이 지나면 자동 실행

 

 

○  Action

상호작용 하는 방식을 지정

 

- Navigate to

대상으로 지정한 프레임으로 이동

 

- Back

이전 프레임으로 이동

 

- Scroll to

지정된 오브젝트로 스크롤로 이동

 

- Open link

외부 Url연결

 

- Open overlay

프레임 위로 띄우기

 

- Swap overlay

열려 있는 오버레이를 다른 오버레이와 교체

 

- Close overlay

오버레이를 닫음

 

 

○  Destination

상호작용이 끝나는 지점

 

 

○ Animation

상호작용이 실행되는 움직임을 설정

 

- instance

상호작용이 즉시 실행

 

- Dissolve

서로 교차되며 서서히 전환

 

- Smart animate

같은 이름을 가지고 있는 오브젝트 속성 변경내용인식

움직임을 선형으로 표현

 

- Move

기존 프레임 위로 밀어 넣거나 밀어냄 (기존 프레임은 고정)

 

- Push

새로운 프레임이 기존 프레임을 밀어내며 전환

 

- Slide

기존 프레임 위로 밀어 넣거나 밀어냄 (기존 프레임을 서서히 이동)

 

 

○ Scroll

- 보여지는 화면을 구성하는 것으로

화면을 넘어서는 프레임을 만들고

프레임을 감싸는 프레임에 보여질 화면 만큼 크기조절

Clip contents를 체크하여 내부가 보이지 않게 조절

Prototype에서 Scroll 조절