Figma에서 버튼을 만드는 방법

작성자: Lee StantonLee Stanton 저자 Lee Stanton은 온라인 기술은 물론 모바일 및 데스크톱 애플리케이션을 모두 다루는 소프트웨어 분야에 집중하는 다재다능한 작가입니다. 더 읽기• 편집자: Evan GowerEvan Gower 편집자 디지털 출판 분야에서 10년 이상의 경험을 보유하고 있습니다. Evan은 새로운 기술 동향에 대한 예리한 안목으로 우리 팀을 이끌고 있습니다. 자세히 보기2023년 8월 17일

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

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

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

다음은 버튼 생성에 대한 단계별 가이드입니다.

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

버튼 내의 텍스트 색상은 검정색 배경과 흰색 배경 중 어느 쪽과 더 잘 대비되는지에 따라 달라집니다. 두 옵션을 모두 사용하여 어느 것이 가장 효과적인지 확인할 수 있습니다. 옵션이 마음에 들지 않으면 버튼 스타일과 색상을 조정할 수 있습니다.

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

기본 버튼은 검정색 또는 흰색 텍스트가 포함된 단색입니다. 이 버튼은 사용자가 앱을 사용하는 동안 사용자를 끌어들입니다. 생성하는 방법은 다음과 같습니다.

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

3차 버튼은 처음 두 버튼만큼 중요하지 않습니다. 링크, 구독 취소 또는 뒤로 버튼 역할을 할 수 있습니다. 보통 일반 텍스트로 되어 있으며 어떤 경우에는 밑줄이 그어져 있을 수도 있습니다.

기본 또는 보조 버튼과 유사한 3차 버튼을 만들 수 있습니다. 가시성을 높이기 위해 획 너비를 변경할 수도 있습니다.

플랫폼의 도구를 사용하면 자동 레이아웃 및 텍스트 도구를 직접 사용해 볼 수 있습니다. 단계별 지침을 사용하면 버튼을 만드는 것이 상대적으로 간단해집니다. 버튼을 만들려면 텍스트 레이어를 만들고, 텍스트 레이어를 자동 레이아웃 프레임으로 변환하고, 버튼 스타일을 지정해야 합니다.

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

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

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

자동 레이아웃을 적용하여 레이어를 프레임으로 변환하거나 기존 프레임으로 변환할 수 있습니다. 기존 프레임에 레이아웃을 적용하려면 텍스트 레이어를 선택한 다음 "Shift" "A" 단축키를 누르세요. 레이아웃이 적용되면 몇 가지 변경 사항을 확인할 수 있습니다.

색상을 추가하는 것으로 시작할 수 있습니다.

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

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

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