피그마 자동화 툴 Automator : 한 번의 클릭으로 디자인하기
지난 글에 소개했던 Diagram 만든 피그마 플러그인 Automator 를 사용해 본 후기이다.
아래 사이트에서 일부(1개의 액션)를 무료로 사용해 볼 수 있다.
Automator for Figma
Automate your Figma tasks in one click.
automator.design
Automator 사용 방법
Automator 플러그인을 다운받는다. 위 사이트 또는 피그마 상단바에서 바로 다운받을 수 있다.
처음 시작하면 버튼을 통해 automation을 추가할 수 있다. 아래 설명과 같이 1개의 액션까지 무료로 사용 가능하고, 그 이후는 구독을 통한 업그레이드가 필요하다. (요금은 글 하단 참고)
사용해 보기위해 만들 예제는 블로그에 동일한 레이아웃으로 보여지고 있는 썸네일 레이아웃을 제작해보려고 한다.
👇 아래가 완성작
'Add action'을 누르면 피그마 기능들이 쭉 나열되어있는데 실제 디자인하듯이 클릭하면 된다.
일단 전체를 차지하는 Frame을 생성해보자.
Name은 프레임 레이어의 이름, 사이즈, 좌표와 컬러도 필요에 따라 입력해준다.
(배경색은 바꿔가며 사용할 것이므로 흰색으로 두었다.)
다음으로 로고를 넣어줄 프레임을 다시 추가한다.
'플레이' 버튼을 눌러보면 왼쪽과 같이 생성되는데, 이름이 겹쳐있는걸로 보니 프레임 안에 프레임이 있지 않고, 개별로 생성되었다.
내가 원하는 건 thumbnail 안에 Image인데 😱
해결 방법은 간단하다. 드래그를 통해 원하는 레이어에 귀속시킬 수 있다.
그럼 아래와 같이 실제 레이어 화면과 동일하게 계층 구조가 보인다.
이미지도 추가하고 나머지 효과들도 넣어준다. 가운데 정렬과 radius, shadow 등등..
메뉴가 일렬로 되어있어서 찾기가 생각보다 힘들었다. 🧐
실행해보면 순식간에 생성이 된다!!
이제 배경색과 이미지는 블로그의 내용에 맞게 넣어주면 된다.
컴포넌트 생성과 플로우까지 등록할 수 있어서 어떻게 사용하느냐에 따라서 사용 범위가 무궁무진할 것같다.
추가로 액션에 대한 정보를 입력하고 보기 쉽게 라벨링 할 수도 있다.
JSON으로 내보낼 수 있지만 아마 설정한 액션들을 다른 기기로 옮기거나 누군가에게 전송도 가능한 것 같다. (아마도?)
이렇게 자동화 도구인 Automator를 이용해 디자인 작업을 쉽게 할 수 있다는 것을 알아보았다.
다양한 액션들을 조합하여 자동화 작업을 설정 할 수 있고, 사용법도 비교적 간단한 편!
하지만, 실무에서 어떻게 활용할 수 있는지는 더 고민해봐야 할 필요가 있다. 실제로 작업하다가 "아 정말 이건 꼭 자동화가 필요하다"는 느낌을 받지 못해서 그런 것 같다.
이 플러그인은 이미 디자인된 UI를 반복적으로 구현이 필요할 때 유용해보인다.
사용하기전에 구글에 아무리 검색해봐도 automator에 대한 후기도 없고 정보가 부족해서 정~말 간단한 테스트만 해봤다.
요금은 글 작성 시간 기준 할인 중 이여서 월 9달러 정도이며, 유용하게 사용하는 사람에겐 저렴하지만 한번 써보고 싶은 사람에게는 쉽게 결제할 금액 또한 아닌 것 같다. (나처럼.. 🙃)
끝으로
현재 실무에서 시간을 절약하고 효율적으로 작업하는 방법을 찾고 계시다면 한번 사용해 보시는걸 추천드립니다!
