문과생으로 살아남기

오토 레이아웃이란 프레임과 컴포넌트에 활용할 수 있는 속성으로, 크리에 맞춰 늘어나거나 줄어들게 해 줍니다. 또한 내용이 변경됨에 따라 텍스트가 차지하는 공간을 조정하는 등의 기능을 제공해 주어서 사용자가 하나하나 지정하지 않아도 알잘딱깔센으로 디자인을 자연스럽게 변경해 줍니다. 오토 레이아웃을 만드는 방법은 여러 가지가 있습니다. 오른쪽 사이드 바를 활용하셔도 되고 마우스 우클릭, 혹은 단축키를 활용하셔도 됩니다. 가장 편하신 방법으로 실행하시면 될 것 같습니다. 하나 참고하실 것은, 오토 레이아웃으로 묶이면 '프레임'으로 변한다는 것입니다. 가장 간단한 예시인 버튼을 만들어 보겠습니다. 사용하시는 앱이나 웹 서비스를 보시면 보통 버튼의 컬러는 2~3가지 정도 입니다. 모튼 버튼을 하나하나 길이에 따라..

피그마에는 텍스트 '리사이징'이라는 속성이 3가지 있습니다. 텍스트 리사이징이란, 딱 보기에는 텍스트의 크기를 설정하는 건가? 싶겠지만, 텍스트 레이어를 설정하는 속성입니다. 피그마에서 텍스트를 생성하기 위해 Text 버튼을 누르고 캔버스에 클릭해 보시면, 파란색 테두리의 사각형이 텍스트를 감싸는 것을 보실 수 있습니다. 이것이 텍스트 레이어고, 텍스트 리사이징은 텍스트가 늘어나고 줄어듦에 따라 텍스트 레이어가 작아지거나 커지는 방식을 제어하는 것입니다. 리사이징의 속성에는 3가지가 있습니다. 1. Auto width : 텍스트를 작성하면 그에 따라 자동으로 텍스트 레이어의 가로(width) 길이가 늘어납니다. 2. Auto height : 텍스트를 작성하면 그에 따라 자동으로 텍스트 레이어의 세로(he..

이렇게 다양한 객체(혹은 레이어)가 있을 때, 정렬을 쉽게 할 수 있는 방법을 피그마는 제공하고 있습니다. ​ 오른쪽 사이드바의 'Design'탭에서 할 수 있는 기능 중 '정렬'에 대해서 정리해 보겠습니다. 해당 기능은 객체를 클릭했을 때 보이므로, 아무것도 클릭하지 않은 상태에서는 보이지 않는 것이 정상입니다. 제일 상단에 있는 이미지를 기준으로 이런저런 정렬을 할 예정이기 때문에, 위의 이미지를 캡처하셔서 어떻게 변하는지 확인하시는 게 볼 때 편할 겁니다. (물론, 중간중간 저도 원본을 보여드리긴 하겠지만요.) 빨간색 표시한 곳의 왼쪽부터 순서대로 Align left Align horizontal centers Align right Align top Align bottom More options 이..

기존에 코멘트 기능으로 소통을 하는 방법에 대해서는 알고 있었는데, 피그마에서 또 다른 소통 방식을 제공하는 것을 이번에 알게 되었습니다. '커서챗'이라는 기능인데요. 코멘트처럼 저장되는 게 아니라, 일정 시간만 노출되고 사라지는 인스턴트 메시지의 성격을 가지고 있습니다. 사용 방법 1. 키보드에서 슬래시(/) 누르기 2. 오른쪽 마우스 클릭 후 'Cursor chat' 선택하기 두 방법 중 하나를 선택해서 커서챗 기능을 활성화하게 되면, 커서 바로 옆에 텍스트를 입력할 수 있는 영역이 호출되고 원하는 텍스트를 입력하게 되면 몇 초동안 유지되었다가 바로 사라집니다. 팀원들과 같은 화면을 보고 있으면서 실시간으로 소통할 때 유용하게 사용할 수 있을 것 같습니다. 내용 초기화 노출되고 있는 커서챗을 지우고 ..

프로젝트 내에서 파일 관리할 때 썸네일을 지정해두면 이렇게 굳이 해당 파일을 들어가서 보지 않아도 한 눈에 무슨 내용인지 파악할 수 있어서 편합니다. ​ 피그마 썸네일 설정 방법 1. 썸네일로 지정할 프레임을 만듭니다. 2. 해당 프레임을 썸네일 용도로 사용하기 위해서는 1600x960 사이즈를 권장합니다. (피그마에서 공식적으로 권장하는 사이즈 가이드입니다.) 3. 우측 마우스를 클릭하여 'Set as thumbnail'을 클릭합니다. 4. 선택한 프레임이 아래와 같은 'custom thumbnail' 아이콘으로 변경되는 것을 확인할 수 있습니다. 5. 이미 지정한 썸네일을 되돌리고 싶다면 썸네일로 지정된 프레임을 우클릭하여 'Restore default thumbnail'을 클릭해주시면 됩니다. 이렇..

1년 전에 피그마를 맛보기로 살펴보았을 때는 없던 기능이 최근에는 생겼더라고요. 최근 이직 준비하면서 공고문에 자주 나와있는 우대/요구사항 중에 하나가 피그마라 다시 공부하고 있는데, 빨간색으로 동그라미 친 부분에 돋보기 아이콘이 생겼습니다. 돋보기 아이콘 클릭 Ctrl + F 단축키 이용 ​ 위의 두 가지 방법 중에 하나를 사용하시면 찾기(검색) 기능을 사용하실 수 있습니다. 찾고자 하는 단어를 입력하면 아래의 그림과 같이 노란색으로 강조되어 표시됩니다. 그리고 검색창의 오른쪽 설정 아이콘을 클릭하면 Replace(대치) 기능도 사용하실 수 있습니다. 'Relplace'를 클릭하면 아래와 같이 기존의 단어를 어떤 단어로 변경할지 입력하는 항목이 활성화됩니다. 또한, 모든 속성(?)에 대해서 figma ..

피그마에서는 텍스트에 링크를 삽입해서 피그마 내부에서 이동하거나, 피그마 외부의 문서(사이트)로 이동할 수 있습니다. 다른 피그마 파일 그리고 프로토타입에도 링크를 걸 수 있는데, 제가 아직 프로토타입까지는 만들어보지 않아서 비교적 간단한 텍스트 링크 삽입만 해보겠습니다. 1. 텍스트에 프레임 링크 삽입 1) 원하는 프레임을 선택하고, 마우스 우측을 클릭합니다. 2) Copy/Paste as > Copy link를 클릭합니다. 3) 복사한 링크를 붙여넣을 텍스트를 클릭하면 상단의 툴바에 링크아이콘('Create link')을 클릭합니다. 4) Type or paste URL이라는 곳에 복사한 프레임의 링크를 붙여 넣습니다. 5) 링크를 붙여 넣으면 위의 사진처럼 밑줄이 그어지며, 마우스를 올려놓게 되면 ..