피그마로 그림자를 만들다 보면 기본 그림자 효과로는 충분히 심미적으로 만족스러운 결과를 만들기가 어려울 때가 있습니다. 이럴 때에 활용할 수 있는 플러그인인 '뷰티풀 쉐도우(Beautiful Shadows)'를 소개드립니다. 해당 플러그인은 그림자의 크기와 색깔 거리 각도 등을 마우스를 드래그하여 쉽게 구성할 수 있게 도와 줍니다. 또한 최근 가장 보편적으로 아름다운 형태로 받아들여지는 그림자 형태를 기본값으로 제공하여 큰 노력 없이도 근사한 그림자 효과를 추가할 수 있도록 도와줍니다.
뷰티풀쉐도우 플러그인 다운받기
피그마의 플러그인 메뉴를 활성화한 후 'Beautiful Shadows'를 키워드로 검색하여 동일한 이름의 플러그인을 발견하면 실행하도록 합니다. 해당 플러그인은 무료로 제한 없이 사용이 가능합니다. 별도 다운로드 링크는 포스트 하단에 별도 첨부해 놓았으니, 참고 바랍니다.
뷰티풀쉐도우 활용방법 및 효과
사용법은 매우 간단합니다. 그림자를 적용할 개체를 선택한 후에 플러그인을 실행하여 자신이 생각하는 의도에 맞게 색상 및 그림자 크기 등을 마우스로 움직이면서 조절해 주면 됩니다. 숫자를 통한 상세값 조정 도한 가능합니다. 원하는 디자인이 나왔으면 'Apply'를 눌러 효과를 적용합니다. 효과가 적용되면 'Effect' 탭에 여러 그림자 효과가 추가된 것을 확인할 수 있습니다.
아래 그림처럼 기본 피그마 제공 그림자 효과와 비교해 봤을 때 더욱 자연스러운 효과 적용이 가능한 것을 확인할 수 있습니다.
뷰티풀쉐도우 적용안 코드로 복사하는 방법
피그마의 데브모드가 유료로 전환되면서 디자인을 개발 소스코드로 핸드오프하는 데에 금전적 부담이 생긴 것은 사실입니다. 특히 회사가 아닌 소규모로 진행하는 사이드프로젝트의 경우에는 더더욱 그런데요. 뷰티풀쉐도우를 통해 적용되는 그림자처럼 CSS 등 개발용 코드로 치환이 힘든 요소의 경우 해당 레이어를 선택한 이후에 마우스우클릭을 통해서 'Copy > Copy as code' 메뉴를 눌러 번거로운 절차 없이 한번에 소스코드를 얻을 수 있습니다.
뷰티풀쉐도우 다운로드 링크
Beautiful Shadows | Figma
Create smooth and beautiful shadows. The plugin allows you to create beautiful shadows by simply dragging a 'light source' which casts a shadow on selected elements. The plugin outputs valid box-shadow CSS styles. Grab the CSS values from the Figma Inspect
www.figma.com
'UX 디자인 > 피그마 - 무료 플러그인' 카테고리의 다른 글
| 피그마(Figma) 로 윅스 홈페이지 만드는 무료 플러그인 ‘Figma to Wix Studio’ (0) | 2024.06.29 |
|---|---|
| 피그마(Figma) 배경 제거(누끼 따기) 무료 플러그인(Plugin) ‘아이콘8 백그라운드 리무버(Icons8 Background Remover)’ (0) | 2024.06.15 |
| 피그마(Figma) 블롭(아메바 형상, blob) 생성 무료 플러그인(Plugin) ‘메이크블롭(Make blob)’ (0) | 2024.06.01 |
| [피그마 무료 플러그인] 홈페이지(웹페이지)를 피그마에 그대로 가져오기 (html.to.design) (0) | 2023.11.12 |
| 피그마(Figma) 아이콘 다운로드 무료 플러그인(Plugin) ‘아이코니파이(Iconify)’ (0) | 2023.06.08 |
