더 빠른 워크플로를 위한 11가지 유용한 Figma 단축키

Figma는 강력한 디자인 도구이며 대부분의 UX/UI 디자이너가 디자인 프로그램으로 가장 먼저 선택하는 프로그램입니다. Figma 내에서 많은 것을 만들 수 있으며 배우기 쉬운 프로그램입니다.

디자이너로서 우리는 종종 시간을 절약하려고 합니다. 그래서 우리는 메뉴를 뒤지는 것보다 좋은 작품을 만드는 데 귀중한 시간을 보냅니다. 워크플로우를 간소화할 유용한 Figma 단축키 목록을 작성했습니다.

1. 스케일 도구 선택

이 간단한 원키 단축키를 사용하면 항목의 크기를 빠르게 조정할 수 있습니다. K 키를 누른 다음 크기를 조정해야 하는 개체를 선택합니다. 하나의 기준점을 클릭하고 드래그하기만 하면 원하는 대로 크기를 조정하는 동안 개체의 크기가 유지됩니다.

2. 프레임 도구 선택

프레임 도구는 프로토타입 디자인을 위해 여러 프레임 보드를 만들 때 Figma에서 많이 사용되는 도구입니다. 키보드에서 F 를 누르면 탭 한 번으로 도구가 나타나 프레임을 빠르게 그리거나 크기를 조정할 수 있습니다.

커서를 클릭하고 드래그하여 프레임을 직접 그리거나 프레임 도구를 선택한 후 오른쪽 프레임 메뉴의 치수 상자에 원하는 크기를 입력할 수 있습니다.

3. 디자인 모드와 프로토타입 모드 간 전환

Shift + E 단축키를 사용하면 디자인 모드와 프로토타입 모드 사이를 전환할 수 있습니다 . 시작하고 전환하는 모드에 관계없이 동일한 단축키가 작동합니다. 이러한 모드 간의 차이점을 알아보려면 Figma 초보자 가이드를 참조하세요.

또는 이 목적을 위한 보다 구체적인 바로 가기가 있습니다. Alt (Windows) / Option (Mac) + 8 은 프로토타입 모드에서 디자인 모드로 전환하는 데 사용할 수 있으며 Alt (Windows) / Option (Mac) + 9 는 디자인 모드에서 다시 프로토타입 모드로 전환합니다. 분명히 Shift + E 가 더 쉽지만 옵션이 있다는 것이 좋습니다.

4. 한 번의 클릭으로 가장 안쪽 요소 선택(Deep Select)

여러 레이어 또는 포함된 이미지로 디자인할 때 하나의 요소를 빠르게 선택하기 어려울 수 있습니다. 맨 아래 레이어를 선택하기 위해 열두 번 클릭하는 것처럼 느껴지는 시간을 절약하려면 대신 이 단축키를 사용하세요.

Mac에서는 Cmd 를 누른 상태에서 요소를 클릭 하고 Windows에서는 Ctrl + 를 클릭 합니다. 하나의 간단한 키를 사용하면 맨 아래 레이어 요소를 선택하기 위해 아무 생각 없이 클릭하는 시간을 절약할 수 있습니다.

5. 가장 안쪽 요소를 선택한 후 레벨 밖으로 이동

디자인의 가장 안쪽 요소를 선택했으면 한 단계 더 가까운 요소를 쉽게 선택하고 싶다는 생각이 들 것입니다. 가장 안쪽 요소를 찾으면 Shift + Enter 를 눌러 한 단계 뒤로 이동합니다. 모든 수준에서 이 작업을 수행할 수 있습니다.

6. 모든 레이어 축소

Figma에서 디자인할 때 레이어 패널이 확장되기 시작하고 특히 HTML을 Figma 디자인으로 변환할 때 약간 지저분해 보일 수 있습니다. 레이어를 축소하려면 Alt + L (Windows) 또는 Option + L (Mac)을 누르기만 하면 됩니다.

이 단축키를 사용하는 동안 선택한 요소가 있으면 해당 요소가 있는 레이어가 열린 상태로 유지됩니다. 아트보드의 아무 곳이나 선택하여 모든 요소를 ​​선택 취소하고 단축키를 사용하여 모든 레이어를 접습니다.

7. 레이아웃 그리드 표시 또는 숨기기

레이아웃 그리드를 사용하는 것은 디자인이 특정 비율에 도달하고 다양한 장치에 맞게 올바르게 크기를 조정할 수 있도록 하는 가장 좋은 방법입니다. 도움이 되지만 항상 그리드가 표시되는 것을 원하지는 않습니다.

레이아웃 격자를 켜고 끄는 것은 Windows와 Mac에서 다릅니다. Mac에서는 Ctrl + G 를 눌러 켜거나 끕니다. Windows를 사용하는 경우 세 개의 키 바로 가기입니다. 컨트롤 + 시프트 + 4 . 그들은 다르지만 같은 일을합니다.

8. 한 번에 여러 장의 사진 배치

이미지에 대한 자리 표시자 모양이 있는 레이아웃을 디자인한 경우 이미지를 하나씩 삽입하는 것이 어려울 수 있습니다. 이 단축키를 사용하면 여러 장의 사진을 배치하고 자리 표시자를 선택하거나 대지의 아무 곳이나 선택하여 각 개별 사진을 배치할 수 있습니다.

Mac 사용자의 경우 Cmd + Shift + K 를 눌러 대화 상자 창을 열어 이미지를 찾으십시오. Windows에서는 Ctrl + Shift + K 로 Figma 디자인에서 여러 사진을 찾아 배치할 수 있습니다. Figma에서 마스터 템플릿을 만드는 경우 이것은 사용하기에 좋은 바로 가기입니다.

9. 모든 이미지를 PNG로 복사

Figma 디자인에서 이미지를 사용할 때 다양한 파일 형식이 있을 수 있지만 클라이언트에 PNG가 필요할 수 있습니다. 원본 형식에 관계없이 모든 이미지를 PNG로 복사할 수 있습니다.

선택한 이미지를 선택하고 Mac에서는 Cmd + Shift + C , Windows에서는 Ctrl + Shift + C 를 눌러 PNG로 복사합니다. 특히 Figma로 프레젠테이션을 만드는 경우 이 바로 가기를 쉽게 사용하여 높은 표준 이미지 형식을 보장할 수 있습니다.

10. 어디에서나 색상을 스포이드

색상 스포이드 기능은 디자인의 한 부분에서 다른 부분으로 색상을 가져올 때 편리한 기능입니다. 이 빠른 키보드 단축키를 사용하면 순식간에 스포이드를 당겨 아트보드의 어느 곳에서나 색상을 견본으로 볼 수 있습니다.

Mac에서는 Ctrl + C 를 누르고 Windows에서는 문자 키 I 입니다. 키보드 단축키를 누른 후 사용하려는 색상 위로 스포이드 대상을 이동하고 한 번 클릭하여 색상을 확인합니다.

11. 리소스 탭 열기

리소스 탭은 구성 요소, 플러그인 및 위젯 메뉴의 홈입니다. 이러한 메뉴를 개별적으로 여는 바로 가기는 없지만 리소스 바로 가기는 Shift + I 와 같이 여전히 시간을 절약 합니다. 플러그인을 사용하여 모형을 만들고 Figma 디자인에 추가할 수 있습니다.

Figma 바로 가기로 시간 절약

디자이너는 일반적으로 시간과 에너지를 절약하기 위해 작업에 바로 가기를 사용하며 Figma에서 작업하는 것도 마찬가지입니다. 이러한 Figma 바로 가기는 프로그램에서 사용할 수 있는 바로 가기의 표면만 긁습니다.

이러한 바로 가기는 명확하지 않거나 쉽게 찾을 수 없으므로 Figma에 대한 새로운 학습을 가져오고 많은 디자이너가 알아내는 데 몇 달 또는 몇 년이 걸리는 정보를 즐기십시오.