2022 업데이트 된 피그마 기능 및 단축키
실무자 추천 피그마 업데이트 기능 및 단축키 공유
들어가며
출처: https://uxtools.co/survey-2021/UX design tool 1위를 굳건히 지키던 Sketch를 제치고 어느새 Figma 피그마는 UX 디자이너뿐 아니라 기획자, 개발자가 가장 많이 사용하는 UX 툴로 급부상하였다.
나 또한 피그마를 사용한 이후로 포토샵이나 일러스트레이터 툴을 사용하는 횟수가 현저히 줄었고,
따로 재플린을 연결하여 공유할 필요 없이 기획, 디자인, 개발 공유까지 피그마 하나의 툴로 사용하고 있다.
한번 피그마를 사용하면 빠져나올 수 없다는 말이 있을 정도로 편리한 기능을 제공하고 있는 피그마.
피그마는 매번 업데이트될 때마다 "아니 이런 기능까지?"라고 생각될 정도로 소소하지만 굉장히 유용한 기능들이 업데이트 하고 있다.
오늘은 새롭게 업데이트 된 기능 중 써보고 가장 좋았고 또 많이 사용하고 있는 기능들을 공유한다.
단축키를 확인하세요* 맥과 윈도우의 단축키가 다르기 때문에 위에 이미지를 꼭 확인하세요.
cmd → ctrl / option → alt / ⇧ → shift
1. 특정 페이지 링크 공유 하기(cmd + L)
피그마에서 파일별, 페이지별 링크를 공유하는 것 말고 이제는 특정 화면의 링크를 복사하여 공유할 수 있다.
특정 페이지, 프레임 또는 요소들을 선택하고 cmd + L을 누르면 링크가 복사된다.
전체 화면위에 이미지처럼 전체 파일을 공유하는 게 아니라 이 중에서 특정한 화면에 대해 공유하고 피드백을 받고 싶을 때 해당 프레임을 누르고 cmd + L을 눌러 링크를 복사, 공유하면
링크 클릭 시 바로 보이는 화면이렇게 내가 공유하고자 했던 화면이 자동 포커싱 되어 공유된다.(굿굿!)
2. 마우스 휠로 색상 값/투명도 변환
컬러를 선택하고 마우스 휠을 위아래로 움직이면 hue 값만 변환되면서 색상값이 변경된다.
HEX 값을 보면 채도 값만 변경되고 나머지 명도 밝기는 유지된 상태임을 확인할 수 있다.
여기에 alt를 누르고 휠을 움직이면 지정된 색상에 투명도를 변경할 수 있다.
3. Nudge 설정으로 간격, 폰트, line-height 값 변경하기
나는 8px 간격 원칙을 보다 쉽게 하기 위해 Nudge 기능을 적극 사용하고 있다.
Nudge 값을 4, 8등 원하는 수치로 설정해 두면 객체를 이동할 때 해당 값의 간격으로 움직일 수 있다.
피그마 디폴트 값으로 설정된 값은 10이다.
Nudge 값은 Figma →Preferences → Nudge amount를 눌러 설정할 수 있다.
Nudge amount를 누르면 아래와 같은 팝업창이 나오는데 small amount는 1px 그대로 두고
Big amount를 원하는 수치로 변경하여 사용하면 된다. 나는 8px로 변경하였다.
Nudge amount 설정이렇게 Nudge를 설정해 두면 객체를 움직일 때 일일이 방향키를 여러 번 누르면서 이동할 필요 없이
Shift + 방향키를 누르면 내가 설정해둔 Big nudge만큼 객체가 움직인다.
위 영상을 보면 객체 선택 후 Shift + 방향키 ⇨를 누를 시 8px씩 이동하는 것을 볼 수 있다.
이 기능은 폰트 크기와 줄 간격(Line height) 값 변경에도 적용할 수 있다.
⇧(shift)+option(alt) 키를 누르고 마우스를 라인 헤이트와 폰트 크기에 가져가면 마우스 커서가 양옆 화살표 모양으로 변경된다.
이때 마우스 휠을 위아래로 움직이면 설정해 둔 넛지 값만큼 값이 변경된다.
⭐️⭐️4. 추출(export) 없이 바로 PNG로 복사하여 붙여 넣기
은근히 작업한 프레임을 png로 추출하여 다시 사용해야 하는 경우가 많다.
이제는 일일이 export 하여 png로 추출한 후 다시 불러오기 할 필요 없아 바로 해당 페이지/프레임을 png로 복사하여 붙여 넣을 수 있게 되었다.
⇧(shift) + command + c를 누르게 되면 해당 페이지가 바로 png 형태로 복사된다.
마우스 오른쪽 버튼을 눌러도 해당 기능을 사용할 수 있다.
Copy/Paste as → Copy as PNG
PNG 형태로 복사하기5. 스크린샷 바로 figma에 붙이기
기존 스크린샷을 했던 단축키(command + shift + 4)에 +ctrl을 추가하면 끝!
shift+ctrl+cmd+4( 전체 화면을 캡쳐하고 싶다면 +spacebar을 추가로 누른다)를 누르고 스크린 캡쳐를 하면 이 스크린 샷은 데스크탑이 아닌 클립보드에 저장이 된다.
그래서 따로 데스크탑에서 피그마로 불러올 필요 없이 피그마에 붙여 넣기를 하면 cmd+v 스크린샷이 바로 붙여진다.
디자인을 하다 보면 스크린샷을 할 때가 많이 있는데 그때마다 스크린샷한 파일들이 데스크탑에 쌓여 파일 정리가 되지 않고 다시 피그마로 불러와야 하는 번거로움을 한 번에 해결할 수 있는 기능이다.
7. 이미지도 스타일로 만들기
이미지도 컬러 스타일로 스타일을 지정하여 관리할 수 있다.(컬러 스타일 지정 방법과 동일)
아래처럼 이미지를 스타일로 만들면 타이포에도 적용할 수 있다.
이미지를 컬러 스타일로 지정했을 때8. 기타 시간을 아껴주는 단축키
디자인 화면과 프로토타입 화면을 빠르게 이동하는 단축키 shift + E
공동 작업 중 다른 사람들의 커서를 보고 싶지 않다면 alt + cmd + /
또는 view→multiplayer cursors 해제
피그마 멀티 커서 해제마치며
알쓸신잡이라는 말이 딱 맞는 이번 글 ㅎ.ㅎ
엄청 다이나믹하게 추가되거나 달라진 기능은 아니지만 피그마를 사용하고 있는 유저라면 너무나 편안하게 사용할 기능들이 추가되었다. 그야말로 실용적인 기능들
이밖에도 업데이트된 좋은 기능들이 많지만 실제로 그 많은 기능 중에 내가 사용하는 기능들은 그리 많지 않아서(공감하시는 분들 계시죠?) 실무자가 사용하기 좋은 업데이트 기능들만을 정리하였다.
도움이 되셨길 바라며!
-끝-
