FIgma 기본 기능

평소 UX/UI에 관심이 많았던지라 FIgma에 대해서도 알고 있었다 하지만 간단한 이미지 수정 외엔 딱히 사용하지 않았는데

이참에 제대로 공부 해보고자 한다

 

Figma란?

Figma는 UX / UI 디자인을 할 때 유용한 디자인 프로그램이다 Adobe XD, Sketch처럼 UI 디자인을 할 수 있는 유용한 도구이다

Figma 특징

• 협업기능
• 여러 명이 실시간으로 작업을 공유하고 편집이 가능한 협업 기능을 제공한다
• Mac, Windows 운영체제를 지원한다
• 벡터 기반의 프로그램이다 그래서 깨지는 현상이나 용량을 효율적으로 관리할 수 있다
• 인터넷에 연결만 되어있다면 작업을 하면서 자동으로 저장이 되는 기능을 제공한다(최대 30일)
• Figma는 앱 뿐만 아니라 웹에서도 동작한다

첫 회원가입을 진행하고 홈으로 돌아오면 두가지 파일 중 하나를 골라 작업을 진행해야한다

만약 UX/UI 디자인, 프로토타입핑, 디자인 시스템과 연관이 있다면 "New dssign file"을 선택하고,

UX 리서치, 유저 플로우 제작, 아이디어 수집 드을 목적으로 Figma를 사용한다면 "New Figgam file"를 사용합니다

좌측 메뉴에 "Drafs"혹은 "Team project"를 클릭하여 두가지 파일중 한가지를 선택할 수 있습니다

 

파일 삭제 혹은 복구 할 수 있는 방법

혹여라도 Delete를 눌러서 파일을 삭제헀더라도 다시 복구 할 수 있는 방법이 있습니다

파일을 삭제하면 아래 내용이 뜨고 Undo를 눌러서 복구 할 수 있습니다 다만 10초 가량 지나가면 사라지니 재빠르게 클릭하셔야 합니다

만약 그럼에도 Undo를 누르지 못하였어도 괜찮습니다

상단에 "Deleted" 메뉴를 클릭해서 삭제한 파일을 확인하고 복구할 수 있습니다

복구 할 파일을 우클릭 한 뒤에 "Restore"를 선택합니다

모바일 디자인 시 기준 해상도 지정하기

현재 회색으로 지정된 앞으로 우리가 작업할 영역은 캔버스라고 부릅니다

먼저 Frame 해상도를 지정해야합니다

Frame 단축키인 F 를 누르면 Frame 기능으로 변경됩니다

오른쪽 빨간박스에 있는 곳이 디자인 패널입니다 여기서 프레임을 추가하겠습니다

저는 iPohne 13 mini를 선택했습니다 해상도는 375x812입니다 디자인패널에서 확인할 수 있습니다

(2021년 기준 모바일 해상도 점유율 1위라고 합니다)

디자인 패널 상단에 "Prototype" 메뉴를 선택한 뒤에 "Show prototype settings" 를 클릭합니다

그리고 Divece 타입을 iPohne 13 mini 으로 지정합니다

캔버스에 있는 Frame와 동일한 사이즈로 셋팅을 했습니다

디자인 패널 상단에 보면 재생버튼이 있습니다 재생버튼은 Present 버튼이라고 불리며 프레젠테이션 뷰를 확인할 수 있습니다

UI Kit 활용

앞으로 FIgma를 사용하면 컴포넌트 라는 단어를 많이 사용하게 됩니다

FIgma에서 컴포넌트란, 재사용이 가능한 UI 구성요소를 말합니다

현재 우리는 아이폰 해상도에 맞게 제작해야하니 화면 뷰도 아이폰과 흡사하게 제작해야합니다

먼저 핸드폰 최상단에 있는 시간, 데이터 와이파이 배터리 bar, Tab bar 같은 컴포넌트를 가져옵니다

컴포넌트는 커뮤니티 UI Kit로부터 내 파일로 복제를 해보겠습니다

상단에 홈 아이콘을 클릭해서 홈 화면으로 되돌아갑니다

Community를 클릭합니다

검색에서 ios 15 ui kit Design을 검색합니다

여기서 Joey Banks 라는 사람의 파일을 클릭합니다

상단에 "Duplicate" 버튼을 클릭해서 복제를 진행합니다

복제를 하면 이렇게 나오게됩니다

왼쪽 최상단에 Layers 버튼과 Assets 버튼이 있습니다 Assets 버튼을 눌러서 검색창에서 Status 컴포넌트를 검색합니다

여기서 Status 컴포넌트를 선택하면 캔버스 영역의 일부에서 Focus 됩니다

여기서 줌 확대 기능을 사용하여 Focus 된 Status Main 컴포넌트로 이동할 수 있습니다

키보드 단축키인 쉬프트 + 2 를 선택합니다

이 상태에서 상단에 Layers 버튼을 클릭하면 Layer 명 앞에 네모 다이아 같은 아이콘이 있습니다 이 해당 아이콘은

Main 컴포넌트를 의미합니다

하위 컴포넌트들을 보면 Dark mode, 시간, 카메라 등 여러 컴포넌트를 캔버스에서 확인할 수 있습니다

굵게 써진 Status Bar & Home Indicator를 클릭 하면 전체 컴포넌트를 클릭할 수 있게되고

감싸고 있는 가이드 Frame 전체를 단축키 Cmd(ctrl) + C 로 복사합니다

상단에 내가 만든 페이지를 클릭한 뒤에

+ 버튼을 선택해서 Pages를 하나 만들어줍니다

복사한 StatusBar Frame를 Cmd(ctrl) + v 로 붙여넣습니다

이렇게 해서 외부의 컴포넌트들을 내 파일에 복제했습니다

아까 진행했던 방식으로 이제 로컬에서도 마음대로 컴포넌트를 추가할 수 있게되었습니다

다시 사이트로 돌아와서 Tab Bar, Alerts, safari 컴포넌트를 복사해왔습니다

복사 완료

컴포넌트 전체를 선택한 상태에서 오른쪽 상단에 Tidy up 옵션을 사용합니다 Frame간의 간격을 일정하게 조정했습니다

조정한 화면

Frame 간의 간격을 화면처럼 마우스로 드래그해서 조정이 가능합니다

드래그해서 조정할 때 분홍색 O이 보이는데 O을 잡고 드래그해서 순서를 바꾸는 것도 가능합니다