들어가기 전
완전 기초적인 사용방법을 정리하는 게시글은 아닙니다. 개인의 강의와 공부를 통해 배운 것들을 정리하는 게시글입니다.
Figma란?
시간과 장소에 관계없이, 인터넷과 컴퓨터만 있으면 곧바로 자유롭게 사용할 수 있는 디자인 툴. 현재 모든 UX 디자인 툴 중 가장 핫함.
Figma의 특징
온라인에서 사용할 수 있는 디자인 툴로, UX/UI 디자인 및 프로토타입 제작을 위한 기능들을 제공.
웹・앱・인터페이스 디자인 등 다양한 분야에서 사용되며, 여러 협업 기능을 지원.
누구나 무료로 사용할 수 있음. 무료 버전에서 제공하는 기본적인 기능만으로도 대부분의 디자인 작업이 가능.
웹 브라우저에서 작동하기 때문에 별도의 프로그램 설치없이 공유 링크 URL 하나로 어디서든 파일을 열람하고 작업할 수 있음.
스타일(Styles)
색상이나 서체 등 반복적으로 사용되는 스타일 속성에 대해서 특정 속성을 지정하여 저장하고, 다른 작업 때 바로 찾아서 적용할 수 있게 함.
이미지와 같이 + 버튼 왼쪽 버튼을 클릭해준다.
해당 창에 X 왼쪽 + 버튼을 클릭해주면 Style을 만들 수 있다.
Style name을 원하는 이름으로 해주면 아래와 같은 Color style이 만들어지게 된다.
아래와 같은 방식으로도 styles을 만들 수 있다.
셀렉션 컬러 (Selection colors)
선택한 요소들 안에서 같은 색을 가진 모든 요소들의 색을 한 번에 쉽게 바꿀 수 있음.
요소를 선택하게 되면 Selection colors에 다음과 같이 사용된 색 정보가 모두 표시된다. 이를 선택하여 값을 변경해주면, 해당 색상 요소가 한 번에 변경되게 된다.
다음과 같은 요소를 선택했다고 할 때, Selection colors는 다음과 같다.
이 중 #6E2ADD의 값을 #F14336으로 바꾸게 되면
아래와 같이 해당 색상의 요소들이 한 번에 색이 바뀌게 된다.
컴포넌트 (Components)
재사용할 수 있는 UI의 묶음
재사용하려는 요소를 오른쪽 마우스로 클릭하여 Create component를 선택해준다. (단축키 : Ctrl+Alt+K)
레이어 패널에 다음과 같은 모양이 나타나게 되는데 이 아이콘이 컴포넌트를 의미한다.
컴포넌트를 Alt+드래그를 통해 복사해주게 되면 새로만들어진 요소는 다음과 같은 모양으로 나타나게 되는데, 이것은 인스턴스를 의미한다.
인스턴스는 컴포넌트가 변할 때 따라서 변하게 된다.
인스턴스에 색상, 텍스트 등을 덮어씌워줄 수 있다. 덮어쓴 영역은 메인 컴포넌트를 수정하여도 변하지 않는다. (덮어쓴 부분만 변하지 않음!)
인스턴스와 컴포넌트간의 연결을 끊기 위해서는 다음과 같이 Detach instance를 클릭해주면 됨.
Reset all changes를 클릭할 경우 모든 변경사항을 초기화하고 컴포넌트와 똑같은 상태로 돌아가게 됨.
Nested Instance
특정 컴포넌트의 인스턴스를 또 다른 컴포넌트 안에 넣음.
예를 들어 아래와 같은 버튼을 만들고자 할 때, 컴포넌트를 만들어 사용하고자 한다. 텍스트는 변경이 가능하지만, 구글 아이콘을 페이스북 아이콘으로 바꿀 수 있는 방법이 없다.
이럴 때 사용하는 것이 Nested Instance.
먼저 아이콘을 컴포넌트화 해준다.
버튼 컴포넌트를 만들어준다.
다음과 같이 Alt+드래그를 통해 인스턴스를 만들어준다.
아이콘을 클릭하게 되면 프로퍼티 채널에 다음과 같이 나타나게 된다. 여기서 드롭다운 버튼을 클릭해주게 되면
Swap instance에 컴포넌트화해준 아이콘들이 나타나게 된다. 여기서 원하는 아이콘을 선택해주면 된다.
스마트 셀렉션 (Smart Selection)
일정 간격을 유지하는 오브젝트를 효과적으로 관리할 수 있게 함.
정렬이 된 상태에서만 가능하므로, Tidy up을 이용해 정렬을 해준 뒤 사용 가능. (Tidy up은 아래에 정리)
정렬이 된 요소들에 마우스를 오버하게 되면, 다음과 같은 분홍색 선들이 나타나게 된다.
분홍색 선(|)을 클릭하고 간격을 넓히거나 좁혀주면 다른 간격들도 일정하게 변경된다.
분홍색 동그라미(○)를 클릭하고 위치를 바꿔주면 간격을 유지하면서 순서를 변경할 수 있다.
Tidy Up
행과 열을 한번에 정리해주는 기능
아래와 같이 정리되지 않은 요소들이 있을 때 행과 열을 정리해주는 방법이다.
해당 요소를 모두 선택하게 되면 우측 하단에 파란색 버튼이 생기게 된다.
버튼을 클릭해주면 아래와 같이 행과 열이 정리된다.
오토 레이아웃 (Auto Layout)
디자인 요소를 자동으로 배열하고 정렬하는 기능.
요소 정렬 : 요소를 수평 또는 수직으로 정렬.
크기 조절 : 요소의 크기를 자동으로 조절.
자동 스크롤 : 요소가 공간을 벗어날 시 자동으로 스크롤 생성.
반응형 디자인 : 디자인이 유동적으로 변할 수 있기 때문에 다양한 디바이스 크기나 내용에 맞게 디자인을 조절.
다운로드 버튼을 만들고자 할 때, 버튼에 필요한 아이콘과 텍스트를 입력한다.
두 요소를 선택한 후, Shift+A를 눌러주게 되면 오토 레이아웃이 생성된다. (오른쪽 버튼을 클릭하여 Add auto layout을 클릭해줘도 됨) 아래와 같이 오토 레이아웃이 생성될 때 오토 레이아웃 프레임 안에 요소가 들어있는 걸 확인할 수 있다.
디자인 패널에 다음과 같이 나타나게 되는데 화살표부터 아래 순으로 설명하면, 화살표는 direction을 의미하고, 그 아래는 요소들 간의 간격, 마지막은 padding(왼쪽부터 세로, 가로, 가로/세로 순)을 의미한다.
아래 설정은 레이아웃을 늘리거나 줄일 때 기준이 되는 정렬 위치를 결정할 수 있다.
다음과 같이 설정해주면,
아래와 같은 버튼을 만들 수 있게 된다. (배경은 Fill을 이용함)
HUG
오토 레이아웃이 적용된 프레임에서 생기는 상태로 너비와 높이가 고정되어 있지 않고 내부의 요소들에 따라 유동적으로 변하는 상태
Fixed로 변경하여 고정된 너비나 높이를 가지도록 설정해줄 수도 있다.
다음과 같은 요소들이 있을 때를 예를 들어보자.
- 각각의 요소들을 모두 선택해주고 너비를 Fill container로 변경해주게 되면
프레임의 크기(또는 간격)가 변경될 때마다 요소들의 크기가 설정한 규칙에 따라 바뀌게 된다.
A를 Fixed로 설정하고 B,C를 Fill container로 변경해주면 A의 크기는 고정되고, B와 C의 크기만 변하게 된다.
- 아이템 간 간격을 auto로 설정(space-between)해주게 되면 프레임의 크기가 fixed, 요소들의 너비도 fixed로 변경되게 된다.
이 경우, 프레임의 너비(또는 요소의 너비)가 간격이 바뀔 때마다 간격이 유동적으로 변하게 된다.
- 간격을 auto로 설정하지 않고 너비를 fixed로 설정해주면, 프레임/요소 너비, 요소 간격 등을 바꿔줘도 영향을 받지 않게 된다.
참고 자료
