2.1Basics of Figma

버튼, 내비게이션, 레이아웃 등 기본 요소 만들기

버튼 만들기

t를 눌러 텍스트를 입력한다.
shift + a로 Auto Layout 프레임을 만든다. Auto Layout은 요소들을 자동으로 배치하고, 간격을 조절할 수 있게 해준다.
오른쪽 사이드바의 fill 영역에서 +를 눌러 배경색을 추가한다. 이 때, i를 눌러 스포이트 툴을 통해 reference로 가져온 이미지의 색을 배경색으로 추가할 수 있다.
오른쪽 사이드바에서 height, padding을 지정한다.
Width, Height 설정시 옵션
- Hug: 지정한 padding을 그대로 안고 간다. 글씨나 컨텐츠가 추가되면 padding은 유지된 상태로 전체 크기가 커진다.
- Fixed: 전체 크기가 고정되어, 글씨나 컨텐츠가 추가되면 프레임을 벗어난다.
border radius를 추가한다.

아래 actions 패널(cmd + k)의 plugins & widgets에서, materials icon 등의 plugin 안의 Icon 등을 찾아 추가한다.
프레임에 넣으면 자동으로 합쳐지는데, Auto Layout에는 어떤 방향으로 이들을 배치할지, 서로의 간격을 어떻게 조절할지를 결정할 수 있다.

t로 텍스트 입력하거나 네비게이션 링크 만들고, cmd + d로 복사(duplicate)한다.
전체 선택 후, shift + a로 Auto Layout 프레임을 만들어준다. 이렇게 하면 사이사이 간격(gap)을 오른쪽 사이드바에서 한번에 조정할 수 있다.
로고를 링크들 왼쪽에, 로그인 버튼 등을 오른쪽에 놓고 shift + a로 한번 더 Auto Layout 프레임을 만든다.
다만 이렇게 하면 responsive하지 않은데, Direction + Gap 패널에 gap을 숫자 대신 Auto로 하면 responsive하게 만들 수 있다. 여기에 padding도 추가한다면 보다 자연스러운 Navigation Bar를 만들 수 있다.

텍스트 입력 후 shift + a로 Auto Layout 적용 후, 오른쪽 사이드바의 Resizing의 width에서 Fill을 선택하면 컨테이너를 벗어나지 않고 컨테이너 사이즈에 맞춰 텍스트가 줄바꿈을 한다.

Unsplash 같은 곳에서 이미지 복사 한 후, Frame 선택해 붙여넣으면 이미지가 적용된다. 여기서, 레이어에서 순서를 조절해 뒤로 빼야 다른 컴포넌트들이 보인다.

여기서, Fill에 Image가 있는것을 볼 수 있는데 +를 눌러 opacity가 있는 배경, linear가 있는 gradient를 추가해 다른 효과를 줄 수도 있다.

여러 요소들에 shift + a로 Auto Layout을 적용하는 것이 핵심이다. 이렇게 하면 요소들의 배치, 균일한 간격, responsiveness를 모두 잡을 수 있다.

이 때, 어떤 요소들은 길이가 제한된 채로 responsive해야하는데, max-width 등을 지정하여 일정 크기까지는 늘어나고, 이후에는 줄바꿈 등이 유지된 상태로 늘어나지 않게 조절이 가능하다.