UX/UI 디자인 협업 툴
Figma 툴 기초 사용법 정리
지난 글에서 Figma에 가입하고 실행까지 해봤습니다.
Figma에서 제공하는 기본 인터페이스를 살펴보고, 제공하는 툴 사용법에 대해서 살펴보겠습니다.
윈도우에서 그림판을 사용해 보신 분들이라면 쉽게 따라 하실 수 있습니다.
Figma 기본 인터페이스 알아보기
Figma에서는 새로운 파일을 Draft라고 합니다.
new File, new Project 같은 느낌입니다.
우측 상단에서 Design file을 눌러서 Drafts 버튼을 누르면 바로 생성이 되면서 페이지로 이동합니다.
화면 구성은 크게 4가지로 구분할수 있습니다.
- 화면 상단의 Tool Bar: 디자인을 위한 도구들의 모음
- 화면 왼쪽의 Layer 패널: Layer와 컴포넌트 관리 및 이동에 사용
- 화면 중간의 Canvas: 직접 디자인이 이루어지는 화면
- 화면 우측의 Design 패널: 폰트, 색, 사이즈 등 디자인 관리에 사용
이 상태에서는 아무것도 생선된게 없고 새로운 drafte 페이지만 만들어진 상태입니다.
가운데 Canvas에 Frame을 생성하고 간단한 디자인을 해봅시다.
Tool Bar에서 우물정, # 처럼 생긴 버튼을 눌러서 원하는 Frame 사이즈를 선택하면 Frame이 생성됩니다.
다양한 디바이스의 Frame을 지원하는데, Desktop - Desktop을 선택해서 1440x1024 사이즈로 Frame을 만들어 봤습니다.
좌측 Layer 패널에 Page1 페이지에 방금 선택한 Desktop-1이라는 Frame이 생성되었습니다.
우측 Design 패널에는 생성한 Frame의 크기, 위치, 색상 등 디자인 정보를 확인할 수 있습니다.
Tool Bar에서 사각형 모양의 아이콘을 눌러서 Rectangle 을 선택해, Frame위에 사각형 도형을 만들어 보겠습니다.
마우스로 드래그해서 Canvas 가운데 사각형을 하나 만들었습니다.
좌측 Layer 패널을 보면 Desktop-1 프레임 아래에 Rectangle-1이 추가되었습니다.
간단한 UI 디자인 형태를 위해서 사각형 2개를 더 추가했습니다.
그리고 Text를 넣기 위해서 Tool bar에서 T 버튼을 눌러서 Text를 작은 사각형 위에 추가했습니다.
도형에 비해서 글자가 너무 작아서 우측의 Design 패널에서 글자 크기를 변경해 보겠습니다.
우측의 Design 패널의 Text에서 글자 크기를 48로 크게 변경했습니다.
버튼 2개에 각각 Text를 넣기 위해서 확인이라는 Text를 복사해서 우측 상자에 이동시켜 보겠습니다.
Text만 복사해서 그대로 이동시켰는데 글자가 상자 뒤에 가려져서 보이지 않습니다.
좌측의 Layer 패널을 보시면 추가한 Rectangle3, 확인, 확인, Rectangle2, Rectangle1이 순서대로 보이는데, 상단에 있는 컴포넌트가 가장 위에 보이게 됩니다.
Text인 확인이 Rectangle3보다는 뒤에 있지만, Rectangle2와 Rectangle1보다는 위에 있어서 글자가 Rectangle3에 가려져 보이고 있습니다.
마우스로 좌측 Layer 패널에서 컴포넌트의 위치를 이동시켜 보겠습니다.
Text 확인을 Rectangle 3위로 옮기니 글자가 상자 앞으로 와서 잘 보입니다.
아래 상자들은 하나는 확인 버튼, 나머지는 취소 버튼을 생각하고 디자인해본 것이라 Text를 취소로 변경해 봅시다.
그리고 Text를 마우스로 이동시키면 Figma에서는 좌측의 Text와 Rectangle 위치를 비교해서 가이드를 해줍니다.
간단하게 버튼 2개의 디자인이 끝났습니다.
처음 생성한 가운데 큰 Rectangle의 색상을 변경해 보겠습니다.
가운데 Rectangle을 클릭해서 선택하고 우측의 Design 패널에서 색상 버튼을 눌러서 원하는 색으로 변경해 보겠습니다.
Figma에서 간단한 디자인을 해보면서 기초 사용법에 대해 알아보았습니다.
UI/UX 디자인 툴로서 많은 장점을 가지고 있으니 차근차근 사용해 보면서 기능을 익히면, 훨씬 예쁘고 화려한 디자인을 할 수 있을 거라 생각합니다.
'지식 이야기' 카테고리의 다른 글
| 윈도우 그림판 활용! 간편하게 이미지에 모자이크 넣는 방법 소개 (0) | 2024.01.30 |
|---|---|
| 해외 설문조사하고 달러 보상 받기(ft. Surveytime) (1) | 2024.01.18 |
| Figma 기초 사용법 정리 - 1 (0) | 2024.01.05 |