피그마(figma) 시작하기

일전에 figma.com의 피그잼(figjam)에 대해 간단히 소개한 포스팅이 있었는데요, 피그마 사이트에서는 피그마가 기본이겠죠. 피그마는 웹디자인 등 디자인 분야에서 협업툴로 현재 각광받고 있는 툴입니다. 최근에는 어도비에 28조원에 인수되었죠. 어도비 입장에서도 그만큼 강력한 기능으로 무장한 경쟁자였고, 그래서 인수하게 된 것으로 알려져있습니다.

​

저는 디자이너는 아닌 관계로 "그냥 무료로 편하게 사용할 수 있는 낙서장" 정도의 용도로 사용하고 있습니다만, 어떻게 사용하는지 한번 말해볼까 합니다.

​

시작하기

Figma.com에 접속하여 등록을 하면 곧바로 사용할 수 있습니다. 정상적으로 로그인이 되었으면 아래 그림과 같이 초기 화면이 나타납니다. 상단에 새 디자인파일 또는 Figjam파일을 시작할 수 있는 메뉴가 있고, 아래쪽으로는 각종 템플릿이나 작업하던 결과물들을 볼 수 있습니다.

우선 "New design file"을 클릭해서 새 작업화면을 만들어보겠습니다.

새 작업파일이 생성되었습니다. 왼쪽 상단에 여러가지 툴들이 보이고, 중앙에는 제목을 지정할 수 있으며, 오른쪽 사이드로는 요소별 디자인 속성탭이 있습니다.

​

가장 먼저 좌상단의 샵(우물정) 아이콘을 클릭하여 흰색 도화지(프레임)를 만들어줍니다. 오른쪽 사이드바에 여러가지 사이즈의 프레임들이 존재하는데, 용도에 맞게 적당한 것을 고릅니다. 블로그 썸네일로 사용할거면 Instagram post(1080 X 1080)이 적당할 것 같네요.

​

흰색 도화지가 나타났습니다. 여기에다가 여러가지 툴들을 이용해서 디자인을 시작하면 됩니다. 각종 툴이나 속성 사용법은 다음 포스트에서 다루도록 하겠습니다.

​

시작하면서 이것만은 꼭 추가해야하는 것이 있습니다. 바로 Unsplash의 무료 이미지를 바로 불러오는 Unsplash 플러그인 추가인데요. 추가해보겠습니다.

​

Unsplash 플러그인 추가

작업화면 내 적당히 우클릭을 하고 Plugins > Find more plugins... 메뉴를 클릭한 후,

​

Unsplash를 검색해 설치를 진행합니다.

​

설치가 완료되면 마우스 우클릭해서 아래의 경로로 Unsplash를 실행할 수 있습니다.

​

universe를 검색해보니 이미지 몇개가 나오네요.

이 중 적당한 녀석을 골라보면...

프레임에 알아서 들어갑니다.(프레임이라기 보다는 현재 선택된 요소에 자동으로 들어갑니다.)

​

한번만 더 해보겠습니다. 프레임 위에 도형툴 중에 원을 골라서, Shift + 드래그 해줍니다. 그러면 타원 아닌 바른 원이 만들어집니다.

​

여기서 unsplash 를 실행하고, 말(horse)을 검색해서 적당한 이미지를 고르면~~

​

짠~~~

​

​

---

​

소개글은 여기까지만 하겠습니다.

감사합니다~~