Design Study

값 변경하기 마우스 휠을 누른채 마우스를 좌-우로 움직이면 수치를 변경할 수 있습니다. 예시 이미지로 색상값 조절하는 칸을 넣었지만 숫자가 들어간 칸(width, height, rotation....등)은 모두 이 방법으로 값을 조절 할 수 있습니다. 마우스 휠을 누른채 좌우로 마우스를 움직여 값을 조절해보세요.

피그마에서 auto-layout Spacing 기능을 사용하면 요소별 간격을 편하게 설정할 수 있습니다. spacing은 packed와 space between 2가지 모드가 있는데 packed를 사용하면 지정한 간격으로 차례대로 쌓이고 space between을 사용하면 너비에 맞춰 균등한 간격으로 배치됩니다. 이런 Spacing mode의 모드를 변경하는데 2가지 방법을 사용할 수 있습니다. 1. 직접 설정 피그마의 오른쪽 메뉴에서 Auto layout의 [...] 더 보기 메뉴를 눌러 Spacing mode를 찾아 직접 변경할 수 있습니다. 2. 값 입력으로 변경 간격을 입력하는 창에 숫자를 넣으면 paced 모드로 입력한 값만큼 간격이 띄워집니다. auto를 넣어주면 space between 모드..

피그마에서는 오브젝트를 CSS, SVG, PNG 형태로 복사하는 기능을 지원합니다. PPT나 포토샵 등에 피그마에서 만든 오브젝트를 사용하고 싶다면 파일로 저장해 다른 프로그램에서 열어 사용하는 것이 아니라 이 기능을 사용해 복사해 붙여넣어 편하게 사용할 수 있습니다. 1. 오브젝트 복사하기 방법은 간단합니다. 복사하려는 오브젝트를 선택한다. 마우스 오른쪽 버튼을 누른다. Copy/Paste as 메뉴에서 원하는 방식을 선택한다. 포토샵, 일러스트, PPT 등에 피그마에서 작업한 것을 그대로 사용하려할 때 SVG나 PNG로 복사하는 기능을 사용하면 편합니다.

디자인 작업을 하다 보면 같은 효과를 다른 곳에도 쓸 일이 생깁니다. 이럴 때 해당 레이어를 복사한 뒤 일부 수정해서 쓸 수도 있지만 이미 디자인이 거의 완성된 경우에 쓰기 번거로운 방법입니다. 효과만 복사해서 쓰고 싶을 때 사용하는 방법입니다. 특히 그림자와 같이 수치 값을 여러 개 지정해 줘야 하는 효과를 쓸 경우 편합니다. 1. 효과(Effect) 선택 복사하고자 하는 효과가 있는 요소를 준비합니다. 복사할 효과의 레이어 앞 부분(붉은색 원으로 표시한 부분)이나 맨 뒷부분을 누르면 해당 효과 레이어가 선택됩니다. 이때 Ctrl+C 를 해주면 효과가 복사됩니다. 효과를 붙여넣을 요소를 선택한 뒤 Ctrl+V 를 해주면 효과가 적용됩니다.

피그마에서 프레임 안에 프레임을 넣는 경우가 종종 있습니다. 이때 내부 프레임의 요소를 수정하려면 해당 요소를 선택해야 하는데요. 선택할 수 있는 방법은 여러 가지가 있습니다. 그중에서 손가락을 좀 더 편하게 할 수 있는 방법을 소개합니다. 1. ⌘ Command + 클릭 ⌘ Command + 클릭 혹은 ⌘Command + Shift + 클릭 을 해서 선택할 수 있습니다. 2. ⌘ Command + 드래그 ⌘ Command + 드래그 를 사용하면 여러 개의 요소를 한 번에 쉽게 선택할 수 있습니다.