피그마 소개 영상입니다.
https://youtu.be/E5obZUuPtlc
소개 영상의 피그마 파일 url 입니다.
https://www.figma.com/file/rJU7dNWQjfxQ8Ax2X9Ff27/20180969-%EA%B9%80%EB%AF%BC%ED%95%98-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%ED%94%BC%EA%B7%B8%EB%A7%88?node-id=0%3A1
참고하면 좋은 사이트
프로젝트 디자인에 유용한 사이트 모음집(디자인,컬러,CSS)
레퍼런스, 색조합, 폰트 아이콘, svg사이트 모아둔 벨로그 글입니다.
https://velog.io/@seunghw/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%94%94%EC%9E%90%EC%9D%B8%EC%97%90-%EC%9C%A0%EC%9A%A9%ED%95%9C-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%AA%A8%EC%9D%8C%EC%A7%91%EB%94%94%EC%9E%90%EC%9D%B8%EC%BB%AC%EB%9F%ACCSS
Material Symbols Figma plugin
메테리얼 디자인 피그마 플러그인으로 사용 가능
https://m3.material.io/styles/icons/overview
UI 메테리얼 디자인 메뉴얼 구글
https://material.io/components/buttons
네비게이션바에서 버튼, 텍스트 필드 등의 요소를 선택하여 사용자가 사용하기 편한 디자인 법을 배울 수 있습니다.
피그마란
최근 가장 핫하게 떠오르는 화면구성을 위한 디자인 툴로, 디자이너와 개발자가 협업하고 소통하기 좋은 도구입니다. url을 기반으로 하기 때문에 어느 운영체제에서도 작업할 수 있고, 공유가 쉽습니다. 졸업작품을 준비하시거나 기획하실 때 정말 유용하게 사용하실 수 있는 툴입니다.
피그마 사용법
회원가입 및 로그인
피그마 프로젝트를 편집하고 저장하기 위해서는 로그인이 필요합니다.
로그인 뒤 Figma Basics에서 상세한 튜토리얼을 보실 수 있습니다.
New design file 을 눌러 작업을 시작해주세요.
저는 기존의 작업물에서 말씀드리겠습니다.
프레임 설정하기
피그마에서 가장 먼저 할 작업은 최종적으로 프로젝트를 구현할 환경에 맞춰 화면 사이즈를 정하는 일입니다.
왼쪽 상단 3번째 드롭다운은 프레임 툴입니다.
오른쪽 바에서 데스크탑, 안드로이드, 아이폰 등 기종에 따른 사이즈 선택이 가능합니다. 저는 안드로이드 라지 사이즈로 작업했습니다.
컴포넌트화
재사용하는 것들을 묶어 컴포넌트화 시킬 수 있습니다.
사용자의 이미지, 닉네임, 게시 시간 등은 게시글 작성, 댓글 작성 등에 재사용되므로 컴포넌트로 묶어 편리하게 다시 쓸 수 있습니다.
(그룹화 하는 방법을 보여드리겠습니다. shift로 여러개를 선택하고 오른쪽 마우스를 눌러 그룹화합니다.이름을 게시글 정보로 바꿔보겠습니다. 쉽게 다시 쓸 수 있습니다.)
플러그인 사용
피그마에는 정말 다양한 플러그인이 호환됩니다. svg 벡터 이미지도 일일이 구글링할 필요가 없습니다.
메뉴바 오른쪽에서 세번째 아이콘은 여러 플러그인을 검색하여 실행시킬 수 있습니다.
iconify나 google font 에서 제공하는 Material Symbols, font awesome 같은 플러그인을 사용하면 필요한 svg 파일을 쉽게 찾을 수 있습니다. (직접 보여주기)
단축키
피그마는 직관적이고 쉬운 툴입니다. 단축키를 알아두시면 더욱 빠른 작업이 가능합니다. 대표적인 단축키로ctrl + 대괄호[대과로] 로 레이어를 앞으로 가져오거나 뒤로 둘 수 있습니다.
버튼 만들기
UI 메테리얼 디자인 메뉴얼 구글
https://material.io/components/buttons
위 url로 구글 디벨로퍼에서 제공하는 버튼 디자인의 다양한 자료를 확인할 수 있습니다.
저는 사각형을 하나 그리고 모서리를 깎고 fill에서 채움색을, stroke에서 테두리 색을 바꾸는 식으로 만듭니다.
이미지 가져오기
도형을 하나 그려 넣고, file에서 이미지를 가져오면 도형 사이즈에 맞춰 이미지를 넣을 수 있습니다.
피그마 정렬법, 반응형 웹 만드는 방법, 단축키, 플로그인을 많이 서치해보시는 것을 추천드립니다. 감사합니다.
