Figma에서 버튼을 만드는 방법

2023/08/17

Figma의 디자인 버튼은 플랫폼의 구성 요소 및 자동 레이아웃 속성을 활용하여 다양한 방식으로 만들 수 있습니다. 따라서 레이블, 크기 및 아이콘을 사용하여 단추를 사용자 지정할 수 있습니다. Figma에서 버튼을 만드는 방법을 잘 모르겠다면 잘 찾아오셨습니다.

이 기사에서는 버튼을 만드는 방법과 Figma를 최대한 활용하는 방법을 설명합니다.

버튼 만들기

버튼은 기능적인 사용자 인터페이스를 디자인할 때 사용되는 공통 요소입니다. Figma 디자인에서 버튼을 만들 수 있습니다. Figma를 처음 사용하는 경우 먼저 기본 사항을 파악해야 합니다.

버튼 생성을 위한 단계별 가이드는 다음과 같습니다.

새로운 Figma 디자인을 만듭니다.
키보드에서 F 키를 눌러 프레임을 추가한 다음 “데스크탑” 또는 “전화”를 선택합니다.
키보드 R 키를 사용하여 높이 50px, 너비 200px 크기의 직사각형을 추가합니다.
키보드에서 “T”를 눌러 텍스트를 추가합니다. 텍스트가 가로 및 세로로 텍스트 상자의 중앙에 오도록 텍스트를 중앙에 배치합니다.
이 텍스트 상자를 사각형 중앙에 놓습니다.
구성 요소를 원하는 대로 그룹화합니다.

색상 선택기를 사용하여 색상을 만들어 추가하거나 인터넷에서 16진수 색상에 액세스할 수 있습니다.

차이

버튼 내의 텍스트 색상은 배경이 검정색인지 흰색인지에 따라 달라집니다. 두 옵션을 모두 사용하여 가장 적합한 옵션을 확인할 수 있습니다. 옵션이 마음에 들지 않으면 버튼 스타일과 색상을 조정할 수 있습니다.

기본 버튼 만들기

Figma에서 만들 수 있는 세 가지 기본 버튼이 있습니다.

기본 버튼

기본 버튼은 검정색 또는 흰색 텍스트가 있는 단색입니다. 이 버튼은 앱을 사용하는 사용자를 그립니다. 다음과 같이 만들 수 있습니다.

버튼의 색상을 선택합니다.
사각형을 선택한 다음 선택한 색상을 적용합니다.
더 나은 대비에 따라 흰색 또는 검정색의 컬러 텍스트.

보조 버튼

일반적으로 흰색 버튼이지만 선택한 색상으로 윤곽선이 표시됩니다. 버튼 텍스트도 같은 색상을 가질 수 있습니다. 이것은 여러분이 만들 수 있는 두 번째로 중요한 버튼입니다. 또한 사용자의 시선을 끌어야 합니다.

사각형의 색상을 흰색(#FFFFFF)으로 변경합니다.
직사각형에 획을 추가합니다. 여기에서 원하는 색상을 선택할 수 있습니다.
텍스트 색상을 텍스트와 동일한 색상으로 변경하십시오.

3차 버튼

3차 버튼은 처음 2개만큼 중요하지 않습니다. 링크, 구독 취소 또는 뒤로 버튼으로 작동할 수 있습니다. 그들은 종종 일반 텍스트로 되어 있으며 경우에 따라 밑줄이 그어질 수 있습니다.

획이 없는 사각형을 흰색으로 만듭니다.
텍스트 색상을 원하는 대로 변경합니다.

기본 또는 보조 버튼과 유사한 세 번째 버튼을 만들 수 있습니다. 더 나은 가시성을 얻기 위해 획 너비를 변경할 수도 있습니다.

텍스트, 자동 레이아웃 및 색상을 사용하여 버튼 만들기

플랫폼의 도구를 사용하면 자동 레이아웃 및 텍스트 도구를 사용하여 실습 경험을 얻을 수 있습니다. 단계별 안내를 통해 버튼을 만드는 것은 상대적으로 간단해야 합니다. 버튼을 만들려면 텍스트 레이어를 만들고 텍스트 레이어를 자동 레이아웃 프레임으로 변환하고 버튼 스타일을 지정해야 합니다.

텍스트 레이어 만들기

이 단계에서는 텍스트 도구가 사용됩니다.

툴바에서 텍스트 도구를 탭하거나 문자 “T”를 누릅니다.
텍스트 도구가 활성화되면 캔버스를 탭하고 “버튼”이라는 단어를 입력합니다. 텍스트 레이어 이름은 레이어 패널 내에서 수동으로 변경하지 않는 한 캔버스에 입력한 내용과 일치합니다.
레이어 이름을 변경해야 하는 경우 왼쪽 사이드바를 두 번 클릭한 다음 선택한 새 이름을 입력합니다.

이제 글꼴 크기를 늘리거나 줄여서 놀 수도 있습니다.

텍스트 레이어를 선택합니다.
오른쪽 사이드바로 이동하여 “텍스트” 섹션에서 글꼴 크기를 변경합니다. 글꼴을 변경하거나 기본 옵션을 고수할 수도 있습니다.

텍스트 레이어를 자동 레이아웃 프레임으로 변환

이 시점에서 버튼을 더 화려하게 보이도록 조정해야 합니다. 자동 레이아웃을 사용하면 좀 더 멋지게 꾸밀 수 있습니다. 자동 레이아웃은 Figma의 강력한 기능이며 반응형 디자인에 적용할 수 있습니다. 이러한 디자인은 콘텐츠 크기, 개체 배치 및 장치 유형과 같은 변경 사항에 자동으로 적응합니다.

자동 레이아웃을 적용하여 레이어를 프레임으로 또는 기존 프레임으로 전환할 수 있습니다. 기존 프레임에 레이아웃을 적용하려면 텍스트 레이어를 선택한 다음 “Shift” “A” 단축키를 누르십시오. 레이아웃이 적용되면 일부 변경 사항을 알 수 있습니다.

텍스트 레이어는 프레임 안에 있습니다. 자동 레이아웃은 구성 요소와 프레임에만 적용되므로 Figma는 새 프레임 내에 텍스트 레이어를 자동으로 배치합니다. 프레임에 채우기 색상이 없습니다. 이것은 버튼 스타일링 단계에서 적용됩니다.
프레임을 선택하면 오른쪽 사이드바에 자동 레이아웃 설정이 표시됩니다. 자동 레이아웃은 더 조정할 수 있습니다.
텍스트가 변경됨에 따라 프레임이 줄어들고 커지는 것을 알 수 있습니다. 이러한 동적 요소를 사용하면 다양한 장치에서 보거나 다른 언어로 번역된 콘텐츠를 디자인하는 데 걸리는 시간을 절약할 수 있습니다.

버튼 스타일링

색상을 추가하여 시작할 수 있습니다.

프레임 레이어를 선택한 다음 오른쪽 사이드바에서 “채우기 설정”을 선택합니다. 그러면 색상이
자동으로 채워집니다. 색상 선택기가 색상을 변경합니다.
텍스트 레이어를 선택하고 채우기를 #FFFFFF로 조정합니다.
프레임을 다시 선택한 다음 오른쪽 사이드바 설정을 사용하여 모서리 반경을 조정합니다.

다음은 프레임 패딩을 수정하는 것입니다. 문자 텍스트가 자동 프레임 레이아웃으로 변환된 후 텍스트와 프레임 경계 사이에 패딩이 자동으로 추가됩니다. 이 시점의 패딩은 모든 면에서 동일하게 나타납니다. 아래쪽 및 위쪽 패딩을 오른쪽 및 왼쪽 패딩보다 작게 변경할 수 있습니다.

원하는 대로 패딩을 업데이트할 수 있습니다. 아래의 단축키를 사용하여 왼쪽 및 오른쪽 패딩 또는 상단 및 하단 패딩을 동시에 변경할 수 있습니다.

<⌥ Option> 또는 <Alt> 키를 누른 상태에서 패딩 영역을 클릭하여 반대쪽 패딩 값을 입력합니다.
<⌥ Option> 또는 <Alt> 키를 누른 상태에서 핸들을 드래그하면 반대쪽 패딩을 변경할 수 있습니다.

이 시점에서 버튼은 좋아 보이지만 여전히 레이블을 업데이트할 수 있습니다. 편집을 허용하려면 텍스트를 두 번 클릭해야 합니다. “등록”이라는 단어를 입력합니다. 입력하면 버튼의 크기가 조정됩니다. 이것은 자동 레이아웃 및 텍스트 도구를 사용하여 버튼을 디자인하는 방법입니다. 이제 버튼을 구성 요소로 바꾸거나 변형을 추가하는 등 새로운 것을 시도할 수 있습니다.

클릭 가능한 버튼 만들기

Figma는 Uber, Facebook, Google 및 Netflix와 같은 회사에서 사용합니다. 클릭 가능한 버튼 기능을 사용하면 이러한 회사의 디자이너가 대화형 및 클릭 가능한 버튼을 보다 쉽게 만들 수 있습니다. 버튼을 사용하면 이러한 플랫폼에서 훨씬 쉽게 탐색할 수 있습니다.

Figma에서 이러한 버튼을 개발하는 방법은 다음과 같습니다.