[Figma] Figma 주요 기능별 사용법 - 색상 사용

이제 3단계인 색상 사용을 진행해보겠습니다. 이 단계에서는 색상 팔레트를 설정하고 그라데이션을 추가하는 방법을 배우게 됩니다.

3. 색상 사용

3.1 컬러 팔레트 설정

주요 기능:

• 색상 팔레트를 설정하여 디자인의 일관성을 유지합니다.

사용법:

1. 색상 선택기 사용: 요소를 선택한 상태에서 오른쪽 패널에서 색상 선택기를 사용하여 원하는 색상을 선택합니다.
2. 색상 스타일 저장: 자주 사용하는 색상을 Styles로 저장하려면 색상 선택기에서 + 아이콘을 클릭하여 스타일을 추가합니다.

예시:

• 주 색상을 #FF5733으로 설정합니다.

실습:

1. "Welcome to My Website" 텍스트를 선택합니다.
2. 오른쪽 패널에서 색상 선택기를 열어 #FF5733 색상을 선택합니다.
3. 색상 스타일을 Primary Color로 저장합니다.

실습 단계별 스크린샷:

1. 텍스트 선택:

   • Homepage 프레임에서 "Welcome to My Website" 텍스트를 선택합니다.

2. 색상 선택기 사용:

   • 오른쪽 패널에서 색상 선택기를 클릭합니다.
   • 색상 선택기에서 #FF5733 색상을 입력하여 선택합니다.

3. 색상 스타일 저장:

   • 오른쪽 패널의 Styles 섹션에서 + 아이콘을 클릭합니다.
   • 스타일 이름을 Primary Color로 지정하여 저장합니다.

3.2 그라데이션 추가

주요 기능:

• 그라데이션은 디자인에 깊이와 다채로움을 추가합니다.

사용법:

1. 그라데이션 설정: 색상 선택기에서 Linear, Radial, 또는 Angular 그라데이션 옵션을 선택하여 그라데이션을 설정합니다.
2. 그라데이션 색상 조정: 그라데이션 핸들을 드래그하여 색상 전환을 조정하고, 색상 선택기를 사용하여 각 포인트의 색상을 설정합니다.

예시:

• 헤더 배경에 그라데이션을 적용하여 시각적으로 돋보이게 만듭니다.

실습:

1. Homepage 프레임에서 헤더 영역을 선택합니다.
2. 오른쪽 패널에서 색상 선택기를 열고, Linear 그라데이션 옵션을 선택합니다.
3. 시작 색상을 #FF5733, 끝 색상을 #FFC300으로 설정합니다.

실습 단계별 스크린샷:

1. 헤더 영역 선택:

   • Homepage 프레임에서 헤더 영역을 선택합니다. (헤더 영역이 없다면 사각형 도구를 사용해 새로 만듭니다.)

2. 그라데이션 설정:

   • 오른쪽 패널에서 색상 선택기를 클릭합니다.
   • 그라데이션 옵션에서 Linear를 선택합니다.

3. 그라데이션 색상 조정:

   • 시작 색상을 #FF5733으로 설정합니다.
   • 끝 색상을 #FFC300으로 설정합니다.
   • 그라데이션 핸들을 드래그하여 색상 전환을 조정합니다.

예시 및 실습 결과

예시:

• 헤더 배경에 Linear 그라데이션을 적용하여 #FF5733에서 #FFC300으로 자연스럽게 전환되도록 설정합니다.

실습 결과:

1. Homepage 프레임의 헤더 영역에 그라데이션 배경이 적용됩니다.
2. 그라데이션 색상은 #FF5733에서 #FFC300으로 전환되며, 시각적으로 매력적인 효과를 제공합니다.

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