figma4 #10 피그마로 '카카오뱅크' 앱 UI 만들기 2 오늘은 피그마를 익히는 마지막 날이다. 어제 만들었던 카카오뱅크 UI에 몇 페이지를 더 추가해 완성할 것이다. 확실히 이런 뭔가 만드는 류(?)의 실습을 좋아해서 그런지 빠르게 만들 수 있어 뿌듯했다. 오늘 할 부분은 다른 계좌로 송금했을 때 뜨는 화면이다. 어제 만들었던 부분과 프로토타입까지 모두 추가하고 나면 아래의 결과가 나온다. ※ 해당 카테고리는 서울경제진흥원과 에이블런에서 주최하는 에 대한 기록입니다. 2023. 7. 7. #9 피그마로 '카카오뱅크' 앱 UI 만들기 // 프로토타입 설정 방법 피그마의 디자인에 대한 기본적인 기능은 모두 익혔다. 오늘은 프로토타입(Prototype) 기능에 대해 배우고 실제 앱 UI를 따라 만들어보자. ※ 가장 좋은 UI 디자인 레퍼런스 사이트는 WWIT-윗 https://wwit.design/ Lifeplus 한국의 UI/UX 모바일 패턴을 수집합니다. wwit.design 1. 프로토타입(Prototype) 1) 체크 박스 설정 - 빈 체크박스와 채워진 체크박스 두개 만들기 - 각 체크박스를 컴포넌트 설정 -> combine variable -> change to 설정 - 만약 전체동의가 필요하다면 -> 피그마가 연쇄작용은 안됨, 보여주기 위함이니 모두 체크된 페이지를 따 만들면 됨 2) 스크롤 (Scroll) - Prototype -> scroll beh.. 2023. 7. 6. #8 피그마 실습 // 유용한 무료 플러그인 오늘은 피그마툴을 배우는 두번째 시간이다. 플러그인을 찾아보고, 목업을 배우기 위해 앱 페이지를 똑같이 따라해보았다. 어제 알게 되었던 기능들을 응용하게 되는 시간이었다. 1. 플러그인(Plugin) : 커뮤니티를 통해 다양한 추가 기능들을 사용할 수 있음 · 유용한 무료 플러그인 추천 - emogify: 다양한 이모티콘 - Content reel: 예시 사진, 텍스트 등을 더미로 가져올 수 있음 (임의로 채워 넣는 것이 가능) - Unsplash: 다양한 무료 사진 - Remove BG: 누끼 따기, 배경 제거 ※ API키 필요, remove bg 사이트 들어가서 회원가입하고 받아오면 됨, 피그마에서 쓰고 있는 구글 아이디로 로그인해야 받아올 수 있음 2. 실습 - 행간: auto말고 최소 130%~1.. 2023. 7. 5. #7 피그마(Figma) 기초 배우기 // 단축키, 컴포넌트, 기능 피그마를 처음으로 시작한 날이다. XD, 어도비, 포토샵과 마찬가지로 다양한 UI와 프로토타입을 만들 수 있다. 오늘은 피그마가 무엇인지, 기능, 단축키에 대해서 알아보자. https://www.figma.com/ Figma: The Collaborative Interface Design Tool Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform. www.figma.com 1. 피그마의 장점 - 무료(개인 사용에 한하여) - 실시간 동시 협업 가능 - 자동 저장 - 플.. 2023. 7. 4. 이전 1 다음
