brunch

You can make anything
by writing

C.S.Lewis

by 송여빈 May 07. 2021

진작 알았으면 좋았을 피그마 트릭 10개

당신이 한 번도 들어본 적 없을 피그마 꿀팁

해당 글은 Danny Sapio에 의해 4월 20일에 작성된 기사를 번역한 글입니다.  




나는 Figma에 반영된 모든 유용한 기능에 지속해서 놀라곤 한다. 스케치에서 번거롭게 작업하던 것이 Figma에선 해결되어 있다. 


나는 우연히 시간을 절약해주는 기능을 발견하고 내가 더 빨리 알았으면 했다. 바라건대, 이 중 일부 기능은 내가 이 기능을 발견했을 때 그랬던 것처럼 당신도 흥미로울 것이다.



1. 당신이 만들어본 것 중 가장 쉬운 프로그래스 링 (Progress Ring)

나만 그런 걸 수도 있지만, arc 툴을 우연히 드래그해보고 놀라기 전까지는 이 툴에 대해 전혀 모르고 있었다. Arc 툴은 정말 간단하고 아름다운 프로그래스 링을 만드는 것을 도와준다.



2. 왜곡을 피하기 위한 Scale 툴

스케일 툴을 사용해 당신의 디자인 픽섹을 완벽하게 유지해보자. 간단하게 크기를 변경하고 싶은 항목을 선택하고, 키보드에서 K를 누르고 드래그해라. 


예전에는 항상 무언가가 깨지고 다시 수정을 해야 했기에, 나는 디자인의 크기를 변경하는 것을 꺼렸다. 그러나 스케일 툴의 도움으로 이제 이런 걱정은 더는 없다. 모든 것은 재작업 필요 없이, 원래 비율을 유지하고, 크기를 완벽하게 변경할 수 있다. 



3. 오브젝트를 프레임 안에 유지하면서, 밖으로 드래그하기

오브젝트를 컨테이너 내부에 유지하고 싶다면, 스페이스 바를 누른 채로 오브젝트를 프레임 밖으로 드래그해라. 오브젝트를 포함하는 프레임의 “clip contents”를 해제하게 되면 오브젝트가 컨테이너 외부에 있어도 계속 볼 수 있다. Command (CTRL) + Y를 눌러 아웃라인을 볼 수 있다.



4. 정리하기, 위치 바꾸기, 그리드 정리하기

당신의 디자인을 정리하기 위해 배열에서 여러 개의 오브젝트를 선택하고 나서 모서리에 생기는 그리드 아이콘을 선택해라. 이렇게 하면 모든 오브젝트 사이의 간격을 동일하게 만들고, 오브젝트를 드래그해서 재배치하고 공간을 조정할 수 있게 한다.



5. 마지막 액션을 복사하기

Command + D를 눌러서 이전의 액션을 복사해보자. Command + D는 오브젝트, 프레임이나 그 외 것들도 복사해줄 것이다.



6. 스포이드로 색상 미리보기

스포이드 툴 (i) 를 사용할 때 탭핑말고 계속 누르고 있다면 다른 색상들을 미리 적용해 볼 수 있다.



7. Command + / 모든 오브젝트 잠금 해제

Command + /은 당신의 워크플로우에서 시간을 절약시켜줄 매우 다양하고 유용한 빠른 기능을 가지고 있다. 만일 이를 사용하고 있지 않다면, 나는 메뉴에 어떤 것이 가능한지 보길 강하게 추천한다. 내가 자주 사용하는 액션은 모든 오브젝트의 잠금을 해제하는 것과 폰트를 변경하는 것이다.



8. 플레이스 홀더 도형에 쉽게 이미지 배치하기

Command + Shift + K를 사용해 여러 개의 이미지를 도형이나 프레임 안에 대체해서 채울 수 있다.



9. 스페이스바를 활용한 더 많은 트릭

선택할 영역을 드래그한 뒤 스페이스 바를 누른 채로 선택한 영역의 사이즈를 키울 수 있다.


만약 당신이 도형을 만들고 있다면, 스페이스 바를 눌러서 오브젝트를 만들면서 이동할 수 있다.


이 정도로 충분하지 않은 경우, 당신은 피그마가 오브젝트를 프레임이나 auto-layouts에 자동으로 포함하는 것을 스페이스 바를 눌러 무효화시킬 수 있다 – 스페이스바는 매우 편리하다.



10. Content Reel + Unsplash

Content Reel 과 Unsplash는 시간을 아끼고, “John Doe”처럼 내가 항상 사용자 이름으로 사용하는 이름을 피하기 위한 두 개의 필수적인 플러그인이 되었다. Content Reel을 사용하면, 당신은 아바타, 로렘입숨, 이름, 주소, 그리고 다른 것들은 한 번의 클릭으로 당신의 디자인에 넣을 수 있다. Unsplash는 무료로 사용 가능한 높은 품질의 그래픽 라이브러리이다. 



11. 보너스! 행간 즉시 바꾸기

만일 당신의 행간이 불안정해 보이지만 당신이 특정한 값을 모른다면 행간 필드에 “auto”를 입력하거나, 모든 내용을 삭제하고 enter 키를 눌러봐라. 그렇다면 행간은 마법처럼 자동으로 조정될 것이다. 





원본 글 링크:

https://uxdesign.cc/10-figma-tricks-i-wish-i-knew-earlier-698e66a893f8

작가의 이전글 테스크 플로우를 분석하는 간단한 방법

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari