Adobe XD에서 버튼을 만드는 방법

여기에서는 Adobe XD에서 단색 채우기와 일부 텍스트로 간단한 버튼을 만드는 단계를 안내합니다. 이 간단한 단계를 따르십시오.

사각형 도구를 선택하고 클릭하고 드래그하여 대지에 원하는 크기의 사각형을 만듭니다.
이 예에서는 표준 iPhone 6 템플릿이 선택되었습니다.

사각형이 여전히 활성화된 상태에서 너비 텍스트 상자에 200을 입력하고 높이 텍스트 상자에 70을 입력합니다. 값을 확인하려면 각각을 입력한 후 Tab 키를 누릅니다.

솔리드 채우기 적용

여기에서 도형에 단색 채우기 색상을 추가합니다.

직사각형이 여전히 선택되어 있는지 확인하십시오. 속성 패널에서 채우기 왼쪽에 있는 흰색 상자를 클릭하여 색상 선택기를 엽니다.

색조 슬라이더를 클릭하고 끌어 색상을 스크롤합니다. 원하는 색조 색상을 입력한 후 색상 패널에서 색상을 클릭하여 사각형에 적용합니다.

색상 선택기 하단에 있는 색상 견본 저장 더하기 기호를 클릭하여 자주 사용하는 색상을 저장할 수 있습니다.

색상 선택기 창의 오른쪽에 있는 슬라이더를 사용하여 채우기에 투명도를 적용할 수 있습니다.

사각형 주위의 획을 제거하려면 테두리 왼쪽에 있는 확인란의 선택을 취소합니다.

색상 선택기로 색상을 적용합니다. 색상 견본 저장 + 기호를 클릭하여 색상을 저장합니다.

모서리를 둥글게 하기

모서리를 정사각형으로 두거나 다음 단계 중 하나에 따라 모양의 모서리를 둥글게 할 수 있습니다.

• 직사각형 모서리 내부의 모서리 위젯을 클릭하고 끌어 모서리를 시각적으로 둥글게 할 수 있습니다.

  모서리 위젯을 클릭하고 끌어 모서리를 둥글게 만듭니다.

Alt(Windows) 또는 Option(Mac OS) 키를 누른 상태에서 모서리 반경 하나를 드래그하여 독립적인 값으로 만듭니다.

• 속성 패널의 모서리 라디오 텍스트 상자에 값을 입력하여 모서리 반경 값을 입력할 수도 있습니다.

  속성 패널에 값을 입력하여 모서리 반경에 다양한 크기를 추가합니다.

버튼에 텍스트 추가

이제 버튼에 텍스트를 추가합니다.

도구 패널에서 문자 도구를 선택한 다음 버튼 내부를 클릭합니다. 텍스트 커서가 나타납니다. 나중에 이동할 수 있으므로 텍스트 상자의 정확한 위치에 대해 걱정하지 마십시오.

제출이라는 단어를 입력한 다음 Ctrl+A(Windows) 또는 Command+A(Mac)를 눌러 텍스트를 선택합니다.

단어를 선택한 상태에서 속성 패널의 텍스트 영역에서 속성을 변경하여 원하는 글꼴과 글꼴 크기를 선택합니다. 왼쪽 맞춤, 가운데 또는 오른쪽 맞춤 버튼을 선택하여 맞춤을 변경할 수도 있습니다.

글꼴 크기 텍스트 상자에서 현재 글꼴 크기를 선택하고 위쪽 또는 아래쪽 화살표를 눌러 글꼴 크기를 늘리거나 줄일 수 있습니다.

채우기 상자를 클릭하여 텍스트 색상을 변경합니다.

속성 패널의 텍스트 섹션을 사용하여 유형 속성을 선택합니다.