[Solux] Figma Seminar ; 피그마로 만드는 자연스러운 UI

* 기록에 앞서 해당 포스트는 솔룩스 내에서 진행된 세미나의 수강기록이며, 저작권은 발표를 담당해주셨던 세미나부원께 있음을 밝힙니다. 

* 4월달에 진행된 세미나로, 제가 최근 KIBWA 프로젝트에서 피그마를 사용할 일이 생겨 당시 수강한 기록을 정리하는 포스트임을 밝힙니다.

---

섹션1

1.1 피그마 소개

​피그마란 ?

• 웹 기반 ui / ux 디자인 프로토타이핑 툴
• 실시간 협업 가능
• 무료 사용 가능
• 사용량이 점점 증가하는 추세

​웹이나 앱 기획 단계에서 디자인을 위해 많이 사용하는 툴

프로토타이핑 툴: 반응형 웹 디자인을 위해 동적인 시안을 만들 수 있는 디자인 툴

​

1.2 피그마 생성하기

​

https://www.figma.com/

Figma: The Collaborative Interface Design Tool

+ Create new team --> Team name --> Create Team --> Add your collaborators --> Skip for new --> Starter

Team project --> New design file

​

​

섹션 2

2.1 피그마 프로그램 기능

​Move tools > Move, Scale

Frame (말하자면 도화지. 디자인을 담는 바탕) > Frame, Section, Slice

Frame > Desktop > Desktop 삽입

도형 > Rectangle, Line, Arrow, Ellipse, Polygon, Star, Place image/video...

사진을 선택하면 각 도형에 사진을 넣을 수 있다.​

Pen > Pen, Pencil

​

2.2 화면 제작 실습해보기

​Frame > Phone > Android Large

도형 > Rectangle

도형 > Place image/video... > 아까 만든 도형에 드롭, 클릭 > 오브젝트의 좌표, 넓이, 높이, 회전각도, 곡률 설정 가능, 곡률 

사진 더블클릭 or 클릭 > Fill > Image로 사진 조정 가능 > Fill, Fit, Crop, Tile

​

배너 만들기

Frame > Frame

도형보다 프레임을 활용하는 것이 편하다

프레임 클릭 > Fill > 색상 선택

​도형 > Rectangle 생성

텍스트 생성, 입력

​

왼쪽에 각 요소들의 리스트를 보면 프레임의 경우는 텍스트박스가 프레임 안에 담겨있는 반면, 직사각형과 텍스트박스는 독립적인 요소로 존재한다. 요소가 많아질수록 상하위 항목 등을 헷갈릴 수 있으므로 프레임을 만들어 활용하는 것이 좋다.

반응형 웹 디자인을 다루기에도 프레임이 훨씬 낫다.

​차선책으로 직사각형과 텍스트박스를 드래그하여 동시 선택한 다음 우클릭하여 Group Selection을 하여 그룹핑하는 방법도 있다. 그룹핑을 하게 되면, 한 번의 선택으로 두 가지 요소를 움직일 수 있게 된다.

​

프레임을 클릭하면 사진처럼 위치와 모양 등을 조정하는 창이 있고, Constraints 창이 있는데 이는 어떤 장소(?)를 기준으로 오브젝트를 조정할지 정하는 창이다.그러면 프레임 크기를 조정해도 Constraints에서 정한 기준에 따라서 오브젝트가 해당 부분에서 간격이 일정한 것을 볼 수 있다.

​

프레임을 선택해서 하단 바를 만든다

Frame > 하단 바 생성, 클릭 > Constraints = Left, Bottom

- Fill에서 Hex에서 색상 코드를 입력하거나, 스포이드로 색을 옮겨올 수도 있다. 좀 자주 쓰는 것들은 자주 쓰는 색상으로 등록도 가능하다. 

- %는 투명도

색상 메뉴 : Solid(단색), Linear, Radial, Angular, Diamond, Image, Video

Fill > 메뉴 버튼 > Name : main_pink로 색상 등록

​

2.3 반응형 웹 디자인 만들어보기

​

Frame > Desktop > Desktop 생성

Frame 생성, 클릭 > Stroke > Custom : 오른쪽 = 5, 아래쪽 = 3

Frame : 곡룰 = 30

Text = hello Solux!

​

말풍선 Component화

프레임&텍스트 드래그해서 동시 선택 > 프레임 요소 우클릭 > Create component

​

상단 메뉴바 > Components에서 컴포넌트가 등록된 것을 볼 수 있는데, 이러면 똑같은 컴포넌트를 복제해오는 것이 매우 쉬워진다. 요소 리스트에서 사각형이 채워져 있는 문양이 원본 컴포넌트이고 비워져 있는 것이 복제된 인스턴스이다.

​

반응형으로 만들기 위해 auto layout으로 만들기

​

바탕 프레임을 auto frame화 하기

바탕 프레임 우클릭 > Add auto layout OR 바탕 프레임 클릭 > Auto layout 클릭

Frame > Hug : 프레임 안의 요소를 빈틈없이 "안고" 있다. 요소의 폭이나 높이가 길어지면 프레임도 같이 늘어난다.

Frame > Fixed Width : 말풍선과 프레임의 크기는 아무 상관이 없다는 것으로 크기를 조정해도 영향을 미치지 않는다.

​

Auto layout

컴포넌트가 정렬되는 방향 : 수직 정렬, 수평 정렬

아래의 세 요소는 padding을 조정하는 항목이다

padding은 요소와 요소간의 거리 또는 요소와 프레임 간의 거리를 뜻한다.

요소와 요소 간의 거리 = 50

좌우 패딩 = 30

상하 패딩 = 60

요소의 정렬 위치 : 프레임이 Fixed로 설정되어있을 때 쓴다.

Hug는 정렬 위치가 필요하지 않으며, 이미 꽉 채워져있는 상태에서 정렬할 빈 틈이 남아있지 않은 상태이다.

프레임을 Hug에서 Fixed로 바꿔주면 요소의 정렬 위치로 좌상단, 우상단, 센터, 등으로 설정할 수 있다.

​

말풍선 하나를 auto layout으로 만들기

​

말풍선 하나 우클릭 > Add auto layout

말풍선 프레임 안에서 글씨를 쓰면 당연히 전체 프레임도 길이에 따라 늘어나게 된다.

Hug로 바꾸면 각 패딩은 유지된 채, 내용 길이에 따라 크기가 바뀌는 것을 확인할 수 있다.

​또한, 패딩이나 상하좌우 정렬의 개념이 웹프론트를 구현할 때 쓰이는 CSS와 유사한 점이 매우 많음을 알 수 있다. 

​

​

​

섹션3

​3.1 실제로 사용되고 있는 웹 화면 구현해보기(1) ; 아이폰 화면 기준

​상단바 맨 왼쪽 > File > Place image...

Frame > Phone > iPhone 14​

이미지를 조정할 때 Shift 키를 누르며 조정하면 비율이 고정된 상태로 크기 조정이 가능하다

​

Frame으로 상단바, 하단바 만들기

상단바 > Constraints Top 고정 / Stroke : Bottom

하단바 > Constraints Bottom 고정 / Stroke : TOP

 

상단바에 글씨 추가 > Text 크기 = 22, 굵기 = Semi Bold

플러그인 : 미리 만들어져 있는 요소(아이콘 등)

상단바 메뉴 > Plugins > 검색 : Material Desing Icons > Run > Search : arrow, search, menu, bell, home, paper, place, chat, person

​​

배너 만들기

Frame 생성 > Fill로 색 변경, Frame 곡률 = 10

텍스트 삽입

Frame으로 버튼 삽입

​

3.2 실제로 사용되고 있는 웹 화면 구현해보기(2)

​

물건 하나를 담고 있는 프레임 생성

프레임 삽입 > Stroke 하단에만 테두리 굵기 = 2

도형 삽입 > 크기 = 115x115, 곡률 = 5 > Place image/video...로 사진 드롭

텍스트 삽입 > 굵기 = Medium, 크기 = 15 / 굵기 = Medium, 크기 = 12 / 굵기 = Bold, 크기 = 15

블록 컴포넌트화한 후 해당 프레임 우클릭 > Create component

 

버튼 생성

프레임 > 곡률 = 50 > Effects : Drop shadow

텍스트 삽입 > 굵기 = Semi Bold, 크기 = 20

​

Export함으로써 파일 저장 & 생성하고 마무리 :)