요즘 디자인을 도와주는 무료 프로그램이 너무 많아요. 많은 사람들이 사용하고 있는 미리 캔버스, 캠바(Canva)부터 픽슬러(Pixlr)와 같은 도구까지 쉽고 다양한 프로그램들이 많이 있습니다. 저는 얼마 전 프론트엔드 개발 쪽 공부를 하다가 우연히 알게 된 툴이 바로 피그마(Figma)였습니다. 현업 디자이너 분들이 많이 사용하는 툴로 알려져 있습니다. 최근에는 어도비에 28조원에 인수되었습니다. 어도비 입장에서도 그만큼 강력한 기능으로 무장한 라이벌이었고, 그래서 인수하게 된 것으로 알려져 있습니다. 저는 디자이너가 아니라서 “그냥 무료로 편하게 쓸 수 있는 낙서장” 정도의 용도로 사용하고 있는데 어떻게 사용하는지 한번 말해보려고 합니다. Figma.com 에 접속하셔서 등록하시면 바로 이용하실 수 있습니다. 정상적으로 로그인 하시면 아래 그림과 같이 초기화면이 나옵니다. 상단에 새로운 디자인 파일 또는 Figjam 파일을 시작할 수 있는 메뉴가 있고 하단에는 각종 템플릿과 작업한 결과를 볼 수 있습니다. 요즘 디자인을 도와주는 무료 프로그램이 너무 많아요. 많은 사람들이 사용하고 있는 미리 캔버스, 캠바(Canva)부터 픽슬러(Pixlr)와 같은 도구까지 쉽고 다양한 프로그램들이 많이 있습니다. 저는 얼마 전 프론트엔드 개발 쪽 공부를 하다가 우연히 알게 된 툴이 바로 피그마(Figma)였습니다. 현업 디자이너 분들이 많이 사용하는 툴로 알려져 있습니다. 최근에는 어도비에 28조원에 인수되었습니다. 어도비 입장에서도 그만큼 강력한 기능으로 무장한 라이벌이었고, 그래서 인수하게 된 것으로 알려져 있습니다. 저는 디자이너가 아니라서 “그냥 무료로 편하게 쓸 수 있는 낙서장” 정도의 용도로 사용하고 있는데 어떻게 사용하는지 한번 말해보려고 합니다. Figma.com 에 접속하셔서 등록하시면 바로 이용하실 수 있습니다. 정상적으로 로그인 하시면 아래 그림과 같이 초기화면이 나옵니다. 상단에 새로운 디자인 파일 또는 Figjam 파일을 시작할 수 있는 메뉴가 있고 하단에는 각종 템플릿과 작업한 결과를 볼 수 있습니다.
먼저 “New design file”을 클릭해서 새로운 작업 화면을 만들어 보도록 하겠습니다. 먼저 “New design file”을 클릭해서 새로운 작업 화면을 만들어 보도록 하겠습니다.
새 작업 파일이 생성되었습니다. 좌측 상단에 다양한 툴이 표시되고 중앙에는 타이틀을 지정할 수 있으며 우측 사이드에는 요소별 디자인 속성 탭이 있습니다. 먼저 왼쪽 상단의 상점(우물가) 아이콘을 클릭하여 흰색 도화지(프레임)를 만듭니다. 우측 사이드바에 다양한 사이즈의 프레임이 존재하는데 용도에 맞게 적당한 것을 선택합니다. 블로그 썸네일에서 사용한다면 Instagram post(1080×1080)가 적당하다고 생각합니다. 새 작업 파일이 생성되었습니다. 좌측 상단에 다양한 툴이 표시되고 중앙에는 타이틀을 지정할 수 있으며 우측 사이드에는 요소별 디자인 속성 탭이 있습니다. 먼저 왼쪽 상단의 상점(우물가) 아이콘을 클릭하여 흰색 도화지(프레임)를 만듭니다. 우측 사이드바에 다양한 사이즈의 프레임이 존재하는데 용도에 맞게 적당한 것을 선택합니다. 블로그 썸네일에서 사용한다면 Instagram post(1080×1080)가 적당하다고 생각합니다.
인기글
하얀 도화지가 나타났습니다. 여기에 다양한 툴을 이용하여 디자인을 시작하시면 됩니다. 각종 툴이나 속성의 사용법은 다음의 포스트에서 다루도록 합니다. 하얀 도화지가 나타났습니다. 여기에 다양한 툴을 이용하여 디자인을 시작하시면 됩니다. 각종 툴이나 속성의 사용법은 다음의 포스트에서 다루도록 합니다.
시작하면서 이것만은 꼭 추가해야 할 것이 있습니다. Unsplash 무료 이미지를 바로 가져오는 Unsplash 플러그인 추가입니다. 추가해볼게요. Unsplash 플러그인 추가작업 화면내에서 적당히 우클릭하여 Plugins > Find more plugins··· 메뉴를 클릭한 후, 시작하면서 이것만은 꼭 추가해야 할 것이 있습니다. Unsplash 무료 이미지를 바로 가져오는 Unsplash 플러그인 추가입니다. 추가해볼게요. Unsplash 플러그인 추가작업 화면내에서 적당히 우클릭하여 Plugins > Find more plugins··· 메뉴를 클릭한 후,
Unsplash를 검색하여 설치를 진행합니다. Unsplash를 검색하여 설치를 진행합니다.
설치가 완료되면 마우스 오른쪽 버튼을 클릭하여 아래 경로에서 Unsplash를 실행할 수 있습니다. 설치가 완료되면 마우스 오른쪽 버튼을 클릭하여 아래 경로에서 Unsplash를 실행할 수 있습니다.
figma를 검색해보니 이미지가 몇 개 나오네요. figma를 검색해보니 이미지가 몇 개 나오네요.
이 중에서 적당한 거 골라보면··· 이 중에서 적당한 거 골라보면···
프레임에 마음대로 들어갑니다. (프레임이라기 보다는 현재 선택된 요소에 자동으로 들어갑니다.) 다시 해보겠습니다. 프레임 위에 도형 도구 중에서 원을 선택해서 Shift+드래그를 합니다. 그러면 타원이 아니라 올바른 원이 만들어집니다. 프레임에 마음대로 들어갑니다. (프레임이라기 보다는 현재 선택된 요소에 자동으로 들어갑니다.) 다시 해보겠습니다. 프레임 위에 도형 도구 중에서 원을 선택해서 Shift+드래그를 합니다. 그러면 타원이 아니라 올바른 원이 만들어집니다.
여기서 unsplash를 실행하고, 이미지를 선택하면 ~~ 짜잔 여기서 unsplash를 실행하고, 이미지를 선택하면 ~~ 짜잔
오늘은 처음이라 여기까지 하겠습니다. 피그마는 디자인 도구이기 때문에 당연히 많은 편리하고 유용한 기능이 있습니다. 저도 잘 모르겠지만 다음 포스팅에서 유용한 몇 가지 기능을 소개하는 시간을 갖도록 하겠습니다. 그럼 이만 ~~1. 디자이너가 아니어도 괜찮아 – 피그마(Figma) 사용법2. 피그마 사용법- 주요 단축키3. 디자이너가 아니어도 괜찮아 – 피그마 참신한 플러그인 오늘은 처음이라 여기까지 하겠습니다. 피그마는 디자인 도구이기 때문에 당연히 많은 편리하고 유용한 기능이 있습니다. 저도 잘 모르겠지만 다음 포스팅에서 유용한 몇 가지 기능을 소개하는 시간을 갖도록 하겠습니다. 그럼 이만 ~~1. 디자이너가 아니어도 괜찮아 – 피그마(Figma) 사용법2. 피그마 사용법- 주요 단축키3. 디자이너가 아니어도 괜찮아 – 피그마 참신한 플러그인