[Figma] Figma 주요 기능별 사용법 - 타이포그래피

이제 2단계인 타이포그래피를 진행해보겠습니다. 이 단계에서는 텍스트를 추가하고 텍스트 스타일을 설정하는 방법을 배우게 됩니다.

2. 타이포그래피

2.1 텍스트 추가

주요 기능:

• 텍스트는 웹 페이지의 주요 콘텐츠를 전달합니다.

사용법:

1. 텍스트 도구 선택: T 키를 눌러 텍스트 도구를 선택합니다.
2. 텍스트 상자 생성: 캔버스를 클릭하여 텍스트 상자를 생성하고 텍스트를 입력합니다.

예시:

• 웹 페이지의 제목과 본문 텍스트를 추가합니다.

실습:

1. Homepage 프레임에서 T 키를 눌러 텍스트 상자를 생성합니다.
2. "Welcome to My Website"라고 입력합니다.

실습 단계별 스크린샷:

1. 텍스트 도구 선택:

   • 피그마에서 T 키를 눌러 텍스트 도구를 선택합니다.
   • 커서가 텍스트 입력 모드로 변경됩니다.

2. 텍스트 상자 생성:

   • Homepage 프레임 안에 클릭하여 텍스트 상자를 생성하고 "Welcome to My Website"라고 입력합니다.
   • 입력한 텍스트가 화면에 나타납니다.

2.2 텍스트 스타일 설정

주요 기능:

• 일관된 텍스트 스타일을 설정하여 가독성을 높입니다.

사용법:

1. 텍스트 스타일 변경: 텍스트 상자를 선택한 상태에서 오른쪽 속성 패널에서 폰트, 크기, 두께, 색상 등을 설정합니다.
2. 텍스트 스타일 저장: 오른쪽 패널에서 Styles 섹션을 찾고 + 아이콘을 클릭하여 스타일을 추가합니다.

예시:

• 제목 텍스트는 32px, 본문 텍스트는 16px로 설정합니다.

실습:

1. "Welcome to My Website" 텍스트를 선택합니다.
2. 오른쪽 패널에서 폰트를 Roboto, 크기를 32px로 설정합니다.
3. 텍스트 스타일을 Heading으로 저장합니다.

실습 단계별 스크린샷:

1. 텍스트 스타일 변경:

   • "Welcome to My Website" 텍스트를 선택합니다.
   • 오른쪽 속성 패널에서 폰트를 Roboto, 크기를 32px로 설정합니다.

2. 텍스트 스타일 저장:

   • 오른쪽 패널에서 Styles 섹션을 찾습니다.
   • + 아이콘을 클릭하여 스타일을 추가합니다.
   • 스타일 이름을 Heading으로 지정하여 저장합니다.

예시 및 실습 결과

예시:

• 제목 텍스트는 Roboto 폰트, 32px 크기, 굵게 설정합니다.
• 본문 텍스트는 Roboto 폰트, 16px 크기로 설정합니다.

실습 결과:

1. Homepage 프레임에 "Welcome to My Website" 텍스트가 추가되고, Roboto 폰트, 32px 크기로 스타일링됩니다.
2. 텍스트 스타일이 Heading으로 저장되어 일관된 스타일을 쉽게 적용할 수 있습니다.

이제 두 번째 단계가 완료되었습니다. 다음 단계로 진행하면서 색상 사용과 아이콘 및 이미지를 추가하는 방법을 배워 나가겠습니다.