Figma에서 그라디언트를 만드는 방법

2023/08/28

한 가지 색상을 결정할 수 없을 때 그라데이션은 탁월한 선택입니다. Figma에서는 다양한 그라데이션 배경을 만들고, 모양과 텍스트에 그라데이션을 추가하고, 획 그라데이션을 만드는 등의 작업을 수행할 수 있습니다. 흐림 효과나 Figma 커뮤니티 메시 그라데이션 플러그인을 사용하여 메시 그라데이션을 만들 수도 있습니다.

Figma에는 그라디언트를 생성하는 다양한 방법이 있으므로 새로운 사용자는 처음부터 모든 방법을 이해하는 데 어려움을 겪을 수 있습니다. 물론 실험은 모두 학습 과정의 일부이지만 모든 지침을 한곳에 두는 것이 훨씬 쉽습니다. 그리고 이 기사는 바로 그것을 제공합니다.

Figma에서 다양한 그라데이션 스타일을 만드는 방법

Figma는 캔버스의 배경이나 개체를 여러 색상으로 채우는 데 사용할 수 있는 다양한 그라데이션 스타일을 제공합니다.

선형: 선형 그라데이션에는 직선으로 함께 혼합되는 두 가지 색상이 있습니다.
방사형: 방사형 그래디언트를 사용하면 첫 번째 색상이 단일 지점에서 시작하여 모든 방향에서 다른 색상과 혼합됩니다.
각도: 각도 그라데이션에서는 각도를 추가하여 그라데이션이 이동하는 방향을 결정할 수 있습니다. 3D 이미지를 생성하는 데 탁월한 옵션입니다.
다이아몬드: 이름에서 알 수 있듯이 다이아몬드 그라데이션은 한 지점에서 시작하여 다이아몬드 모양으로 퍼집니다.

이러한 그라디언트 스타일을 만드는 단계는 동일합니다. 유일한 차이점은 선택한 스타일에 있습니다. Figma에서 그라데이션 디자인을 만드는 방법은 다음과 같습니다.

빈 Figma 파일을 엽니다.
왼쪽 도구 모음에서 “사각형 도구”를 누릅니다.
도구를 사용하여 캔버스에 그라데이션 참조로 사용할 직사각형을 그립니다.
생성된 직사각형을 선택합니다.
오른쪽 패널의 “채우기”에서 현재 색상을 클릭하여 색상 선택기를 엽니다.
드롭다운 메뉴를 누르고 기본 “단색”을 원하는 그라데이션 스타일로 변경하세요. 두 가지 색상 중단점 또는 상자가 나타납니다.
각 색상 정지점을 선택하고 그라디언트에 추가할 색상을 선택합니다.
그라디언트를 스타일로 저장하려면 ‘채우기’ 옆에 있는 점 4개를 탭하세요.

그런 다음 투명도 값을 조정하고, 한 색상을 끝내고 두 번째 색상을 시작하려는 위치에 색상 정지점을 배치하고, 다른 색상 정지점을 추가하고, 캔버스에서 이동하거나, 그라데이션 각도를 변경할 수 있습니다. 조정이 끝나면 그라디언트를 다시 저장합니다(8단계).

참고: 추가한 색상 정지점을 삭제하려면 정지점을 선택하고 키보드에서 “삭제” 또는 “백스페이스”를 누르십시오.

이제 원하는 개체에 그라데이션 스타일을 적용할 수 있습니다.

Figma에서 메시 그라디언트를 만드는 방법

메쉬 그래디언트는 대기업과 브랜드에서 인기가 높습니다. 인스타그램을 자주 사용하는 분이라면 앱의 로고를 매일 보실 수 있습니다. 따라서 이를 만드는 방법을 아는 것은 프로젝트에 흥미를 더해야 하는 상황에서 유용할 수 있습니다.

앞서 언급한 대로 메시 그래디언트는 Figma 커뮤니티에서 제공하는 플러그인을 사용하여 생성할 수 있습니다. 하지만 외부 도구 없이도 캔버스의 원하는 위치에 여러 색상을 추가할 수 있는 보다 간단한 방법이 있습니다.

Figma에서 메시 그래디언트를 만드는 방법은 다음과 같습니다.

새로운 Figma 파일을 입력하세요.
프레임을 만듭니다.
오른쪽 패널의 “콘텐츠 클립” 상자를 선택하면 프레임 외부에 있는 모든 내용이 잘립니다.
다양한 모양을 추가하거나 프레임 내부의 “펜” 도구를 사용하여 자신만의 개체를 만들어 보세요.
각 새 양식의 “채우기”를 변경하여 나머지 양식과 다르게 만듭니다.
모든 도형을 선택하세요.
“효과”에서 드롭다운 메뉴를 누르고 “레이어 흐림”을 선택합니다.
“레이어 흐림” 설정을 열고 모양 사이의 경계가 더 이상 명확하지 않을 때까지 값을 늘립니다.
위와 같이 스타일을 저장하고 다른 개체에 사용하십시오.

메시 그래디언트를 만드는 또 다른 방법은 각도 스타일을 사용하는 것입니다. 첫 번째 튜토리얼과 마찬가지로 약간 다르지만 똑같이 흥미로운 결과를 제공합니다.

수행해야 할 작업은 다음과 같습니다.

빈 캔버스를 엽니다.
원하는 모양을 사용하여 캔버스에 추가하세요.
“Fill”에서 “Solid”를 “Angular”로 변경합니다.
그라데이션 색상을 선택합니다.
그라디언트의 각도와 기타 측면을 조정합니다.
다른 모양, 바람직하게는 “Eclipse”(예: 원)를 추가합니다.
캔버스의 다른 모양 위에 올려 놓습니다.
선형 그라디언트를 추가하고 나머지 색상과 잘 어울리는 색상으로 변경하세요.
“효과”에서 “레이어 흐림” 효과를 사용하고 새 모양의 선을 흐리게 하여 첫 번째 모양과 혼합합니다.

Figma에서 이미지를 그라데이션하는 방법

그라디언트를 만드는 것 외에도 기존 이미지에 그라디언트를 오버레이하여 일부 차원을 추가할 수도 있습니다. 이는 “페이드” 효과 또는 외부에서 이미지를 비추는 보이지 않는 광원의 환상을 제공합니다.

Figma에서 이미지에 그라디언트를 추가하는 방법은 다음과 같습니다.

Figma에서 새 파일을 엽니다.
그라디언트를 추가하려는 이미지를 캔버스에 드래그 앤 드롭하세요.
상단의 이미지 크기에 맞는 도형을 추가합니다.
“채우기” 섹션에서 그라데이션 스타일을 선택합니다.
색상 선택기에서 그라데이션 색상을 선택합니다.
불투명도, 각도 등을 조정합니다.

“펜” 도구를 사용하여 그라데이션을 적용하려는 영역에 모양을 그릴 수도 있습니다.

Figma에서 텍스트를 그라데이션하는 방법

Figma에서 텍스트에 그라디언트를 만드는 것은 다른 모양에 대한 그라디언트를 만드는 방법과 매우 유사합니다. 단계는 다음과 같습니다.

Figma에서 새 캔버스를 엽니다.
왼쪽 툴바에서 “텍스트” 도구를 누릅니다.
캔버스의 아무 곳이나 클릭하고 쓰기를 시작하세요.
텍스트를 선택하고 “채우기”로 이동하세요.
그라데이션 스타일을 선택하세요.
각 색상 상자를 누르고 그라디언트에 추가하려는 색상을 찾으세요.

자주 묻는 질문

Figma의 그라디언트에 몇 가지 색상을 추가할 수 있나요?

표준 및 메시 Figma 그라디언트 스타일 모두에서 원하는 만큼 많은 색상을 추가할 수 있습니다. 하지만 너무 지나치지 않도록 노력하세요. 그라디언트에는 여러 가지 전환 색상이 있으므로 메쉬 그라디언트의 경우에도 5개 이상이면 너무 많을 수 있습니다.

Figma에 그라디언트를 가져올 수 있나요?

원하는 그래디언트를 Figma로 가져올 수 있습니다. 예를 들어, “코드” 패널을 열고 코드를 붙여넣으면 CSS(Cascading Style Sheets)의 코드를 붙여넣을 수 있습니다. Adobe Illustrator에서 그라디언트를 가져올 수도 있습니다.

무료 Figma 그라디언트를 어디서 찾을 수 있나요?

Figma 커뮤니티 에서 무료 및 유료 Figma 그라디언트를 찾을 수 있습니다 . Figma 사용자가 만든 화려하고 독특한 디자인이 많이 포함되어 있습니다. 플러그인, 파일, 위젯별로 필터링할 수 있습니다. 상단 검색창에 “그라디언트”를 입력하고 원하는 것을 찾으세요.

다채로운 그라데이션으로 펑키해지세요

그라데이션은 디자인을 독특하고 개인화하는 훌륭한 방법입니다. 그리고 Figma를 사용하면 선택한 두 개 이상의 색상 사이를 부드럽게 전환할 수 있습니다. 그러나 과용하지 마십시오. 서로 잘 어울리는 색상을 혼합하고 동일한 색상 팔레트 내에 유지되도록 노력하십시오.

이미 Figma에서 그라디언트를 만들어 보셨나요? 어떤 그라디언트 스타일을 사용했고 어떤 용도로 사용했는지 아래 댓글로 알려주세요.