질문사항
안녕하세요 개발자 도구에 있는 그라데이션 코드를 피그마에 바로 적용할 수는 없나요?
레퍼런스 체크 중에 발견한 예쁜 버튼.
영-롱한 그라디언트가 너무 마음에 들어서 내 디자인에도 한 번 적용해보고 싶어졌습니다.
개발자 도구를 통해서 어떻게 버튼이 디자인되어있는지 확인해볼까?
이게 무슨 소리지…? 이게 그라디어언트 코드인 것 같긴 한데… 어떻게 봐야하는지 모르겠고 피그마에는 어떻게 해야 똑같이 적용되나요?
답변
하나씩 풀어서 설명해 드리겠습니다!
복잡하게 생겼어도, 하나씩 뜯어보면 쉬워요.
순서대로 알려드릴게요.
1.
그라디언트의 모양 속성
그라디언트를 어떤 모양으로 보여줄 것인지를 정하는 부분입니다.
직선형이면 linear-gradient, 타원형이면 radial-gradient, 나선형이면 conic-gradient로 표기 되어있습니다.
2.
그라디언트의 각도
그라디언트의 각도를 정해주는 부분입니다. 버튼에서 그라디언트가 세로로 전개되면 90deg, 가로로 전개되면 180deg가 됩니다.
어떤 수치를 입력하냐에 따라 대상과 알맞는 자연스러운 그라디언트를 만들 수 있겠죠?
3.
그라디언트의 시작 색상
그라디언트가 시작되는 부분의 색상을 정하는 부분입니다.
여기서 색상에 이런식으로 RGB 컬러 수치 옆에 별도의 소수점 숫자가 붙어있거나,
헥스코드가 6자리가 아니라 8자리라면?
색상에 투명도가 입력되어 있는겁니다! 피그마에서는 색상별로 투명도를 주시면 동일하게 구현할 수 있습니다.
4.
색상의 위치
색상 별로 일직선 상에서 어디에 위치해 있는지를 정하는 부분입니다.
적절히 위치를 변경하면서 원하는 그라디언트 느낌을 내줄 수 있습니다.
단, 피그마에선 위치값을 입력할 때 소수점 입력은 안됩니다! ㅠ
5, 6. 그라디언트의 중간 색상과 끝 색상
묶어서 이야기해도 아시겠죠? 그라디언트의 중간 색상과 끝 색상을 표시하는 부분입니다.
추가로 알면 좋을 팁
웹에서 그라디언트 레퍼런스를 보다 보면, 색상이 RGB값으로 입력된 경우가 왕왕 있습니다. 이럴 때, 헥스코드 값으로 변경해서 보는 방법이 있는데요!
색상 코드에서 각 색상의 컬러칩에 마우스를 올리면, 컬러칩이 살짝 호버되는게 보이시죠? 그대로 눌러보면
이렇게 컬러피커가 나옵니다. 여기서 헥스코드 옆에 화살표를 누르시면 색상 표기 방식을 선택할 수 있는 창이 나옵니다. 맨 위 헥스코드를 눌러주시면 헥스코드로 값이 변경돼요!
