[Figma] Figma 주요 기능별 사용법 - 아이콘 및 이미지 추가

이제 4단계인 아이콘 및 이미지 추가를 진행하겠습니다. 이 단계에서는 아이콘을 사용하고 이미지를 추가하는 방법을 배워보겠습니다.

4. 아이콘 및 이미지

4.1 아이콘 사용

주요 기능:

• 아이콘은 시각적 요소를 추가하여 디자인을 보완합니다.

사용법:

1. 아이콘 라이브러리 검색: 피그마 커뮤니티에서 Components 탭을 클릭하고 Icons를 검색하여 무료 아이콘 라이브러리를 찾습니다.
2. 아이콘 추가: 원하는 아이콘을 선택하고 프로젝트에 추가합니다.

예시:

• 네비게이션 바에 사용할 아이콘을 추가합니다.

실습:

1. 피그마 커뮤니티에서 Icons를 검색하여 무료 아이콘 세트를 찾습니다.
2. 원하는 아이콘을 선택하고 Homepage 프레임에 추가합니다.

실습 단계별 스크린샷:

1. 아이콘 라이브러리 검색:

   • 피그마 상단 메뉴에서 Assets 탭을 클릭합니다.
   • Community 탭을 클릭하고 검색 창에 Icons를 입력하여 무료 아이콘 라이브러리를 검색합니다.

2. 아이콘 추가:

   • 원하는 아이콘 세트를 선택하여 프로젝트에 추가합니다.
   • 네비게이션 바에 사용할 아이콘을 선택하고 Homepage 프레임에 드래그하여 추가합니다.

4.2 이미지 추가

주요 기능:

• 이미지는 웹 페이지의 시각적 매력을 높입니다.

사용법:

1. 이미지 추가: 드래그 앤 드롭으로 이미지를 추가하거나, 상단 메뉴에서 File > Place Image를 선택하여 이미지를 추가합니다.
2. 이미지 크기 조정 및 배치: 이미지를 선택하고 크기를 조정하며 원하는 위치에 배치합니다.

예시:

• 헤더 섹션에 배경 이미지를 추가합니다.

실습:

1. 헤더 섹션에 배경 이미지를 추가합니다.
2. 이미지를 프레임 크기에 맞게 조정합니다.

실습 단계별 스크린샷:

1. 이미지 추가:

   • 로컬 파일에서 이미지를 드래그 앤 드롭하여 피그마 캔버스에 추가합니다.
   • 또는 상단 메뉴에서 File > Place Image를 선택하여 이미지를 추가합니다.

2. 이미지 크기 조정 및 배치:

   • 추가한 이미지를 선택하고 크기를 조정하여 헤더 섹션에 맞게 배치합니다.
   • 이미지 크기를 프레임 크기에 맞게 조정하려면 이미지의 가장자리를 드래그합니다.

예시 및 실습 결과

예시:

• 네비게이션 바에 홈 아이콘, 검색 아이콘, 사용자 아이콘을 추가합니다.
• 헤더 섹션에 배경 이미지를 추가하여 시각적으로 돋보이게 만듭니다.

실습 결과:

1. Homepage 프레임의 네비게이션 바에 아이콘이 추가됩니다.
2. 헤더 섹션에 배경 이미지가 추가되어 웹 페이지의 시각적 매력이 향상됩니다.

이제 네 번째 단계가 완료되었습니다. 다음 단계로 진행하면서 네비게이션 설계 방법을 배워보겠습니다.