'분류 전체보기' 카테고리의 글 목록

본문 바로가기

패스트캠퍼스 피그마강의 챌린지 참여 후기 한달여간 패스트 캠퍼스에서 피그마 강의를 수강하였다. 강의는 모바일 UI 디자인 by 스케치&피그마 올인원 패키지 Online 강의이고, 맨 아래 링크를 달아 둘 테니 관심 있는 사람들은 한번 보면 좋을 듯 하다. 우선 패스트 캠퍼스는 원래 다른 강의 때문에 가입했었는데 강의를 하나 두개 사서 보다보니 벌써 3~4개 정도의 강의가 쌓여있다. SNS 광고에서 자주 나오기 때문에 가끔 한번씩 들어가다가 환급 이벤트를 하길래 평소에 관심이 있었던 UI 강의를 들어보게 되었다. 내가 제일 처음에 패스트 캠퍼스를 가입하고 한 일이 중고 맥북을 구입하는 일이었다. IT쪽이나 디자인쪽 강의들을 보면 맥북을 이용하는 경우가 많았고 꼭 강의 때문은 아니지만 맥을 구입하게 되었다. 물론 요즘 프로그램들이 맥과 윈도우를 다..

[패스트캠퍼스 수강 후기] 피그마강의 100% 환급 챌린지 28회차 미션 피그마에서 패스트 캠퍼스 홈페이지를 만들려면 어떻게 만들면 되는가? 스케치에서 했듯이 스크린 샷을 찍어서 뒤에 배경처럼 해놓고 사이즈를 맞춘다음 그 위에 이제 하나하나 영역도 잡아주고 색깔도 뽑아오고 똑같이 만드는 것을 진행하는 강의였다. Alt를 누르면 마진을 확인할 수 있다. 패스트캠퍼스는 noto sans 폰트를 사용하고 있어서 따로 폰트를 찾을 일이 없었다. 피그마의 고질 적인 버그인데 한글과 영어를 섞어 치다보면 글자가 씹히는 경우가 있다. 효율적인 실무 에셋 관리법 컴포넌트 인스턴스 효율적인 부분 이번 연습 할 때는 하나 하나 다 배껴서 만들었는데 이제 똑같이 반복되는 규칙이 있다면 컴포넌트로 하나 만들어놓게 되면 그 다음부터는 컴포넌트에서 불러와서 인스턴스에 개별적인 수정을 하거나 필요할 경..

[패스트캠퍼스 수강 후기] 피그마강의 100% 환급 챌린지 27회차 미션 Code mode 피그마는 안드로이드, IOS, CSS 코드를 볼 수 있다. 개발을 할 때 도움받아 사용할 수 있을 듯 하다. 스케치는 지원 안하는 기능인 듯 하여 이것은 피그마의 장점이 아닌가 싶다 ㅎㅎ 자주쓰는 단축키 Windows : ctrl, Mac : cmd 1. File & Properties Ctrl+Shift+E 출력(저장) Export Ctrl+Alt+S 히스토리 저장 Save to Version History Ctrl+Shift+K 이미지 삽입 Place Image 2. Edit Ctrl+C 복사 Copy Ctrl+X 잘라내기 Cut Ctrl+V 붙여넣기 Paste Ctrl+Shift+V 선택 위에 붙여넣기 Paste Over Selection Alt+drag 중심점 중심으로 사이즈 조..

[패스트캠퍼스 수강 후기] 피그마강의 100% 환급 챌린지 26회차 미션 우측패널 이해하기 우측 패널에서는 조금 더 세심하게 다듬고 값이 어떻게 늘어나는지 볼 수 있다. Share and Viewing 지난번에 기능을 볼 때 봤던 공유 기능 모두에게 공개, invite - 링크를 통해 공유하는 것이 아닌 아예 모두에게 오픈이 가능하다 - 개별적으로 이메일을 통해 권한을 주고 초대할 수 있다. (보안이 중요한 파일의 경우 공개가 아닌 invite를 이용하면 좋다) 지금 봐줬으면 하는 것, 공유할 때 그 페이지를 바로 불 수 있게 지정해서 공유가 가능하다. 프로토 타입을 실행할 수 있는 버튼이 있고 (나중에 프로토타입 부분에서 다룬다) 그 오른쪽에는 view 관련 버튼들이 있다. (보기 관련 메뉴) Shift + E 포커스 된 것만 확힐하게 줌해서 볼 수 있음 Pixel Prev..

[패스트캠퍼스 수강 후기] 피그마강의 100% 환급 챌린지 25회차 미션 Path Text Hand Comment Path - 새로운 그림을 그릴 때 유용한 툴 마우스를 클릭하면 점을 찍고, 클릭 후 드래그 하면 각도를 조절해준다. 펜슬 툴, 펜툴을 적절히 활용하면 일러스트레이션을 활용하기에 좋다. Pencil 툴은 그림그릴 때 사용 Text 툴, 큰 기능은 없고 입력할 수 있는 상자를 만드는 것 줄간격, 행간 등등 텍스트 스타일을 설정할 수 있다. copy link 누르면 자동으로 클립보드에 복사가 됨 나중에 ctrl + v만 하면 링크로 공유를 할 수 있음 링크나 아이디로 공유할 수 있고 권한을 줄 수 있음 보기만 가능하게 하거나 수정까지 가능하게 그리고 그 공유된 사람이 어떤 작업을 하고 있는지 마우스 커서까지 볼 수 있음 디자이너의 경우 모든 기능을 활용 할 수 있고 ..

[패스트캠퍼스 수강 후기] 피그마강의 100% 환급 챌린지 24회차 미션 좌측 패널 이해하기 피그마 왼쪽에 있는 UI Page1 - Default 피그마 파일 내 페이지가 있고, 레이어가 있고, 이 파일에서 사용하는 에셋은 무엇인지 위치, 구조와 관련이 깊음 그런 것들을 왼쪽에 모아둔 것 어떤 오브젝트를 생성을 하면 레이어가 하나씩 생김 레이어 탭에 생성된 순서에 따라 위 아래가 정해짐 묶어서 컴포넌트로 만들 수 있고 그 컴포넌트는 또 불러와서 쓸 수 있음 페이지를 추가해서 새로운 페이지를 만들 수 있음 컴포넌트는 페이지2에서도 불러와서 사용할 수 있음 컴포넌트를 수정하면 페이지1, 2에서 모두 수정된 상태로 바뀜 Material Baseline Design Kit 불러와서 만져보기 좌상단 마우스툴 이해하기 (1) Webview에서 사용했을 때 메뉴의 사용을 편리하게 사용하기..

[패스트캠퍼스 수강 후기] 피그마강의 100% 환급 챌린지 23회차 미션 링크 공유 방식 오른 쪽 상단 share 버튼 copy link 누르면 자동으로 클립보드에 복사가 됨 나중에 ctrl + v만 하면 링크로 공유를 할 수 있음 링크나 아이디로 공유할 수 있고 권한을 줄 수 있음 보기만 가능하게 하거나 수정까지 가능하게 그리고 그 공유된 사람이 어떤 작업을 하고 있는지 마우스 커서까지 볼 수 있음 디자이너의 경우 모든 기능을 활용 할 수 있고 view only, 즉 뷰어는 볼 수만 있음 필요한 에셋이 어떤 값을 가지고 있는지 볼 수 있음 이미지 파일로 내보내기 할 수 있음 URL만 있으면 어떤 환경에서든 인터넷에만 접속 할 수 있다면 피그마의 모든 기능을 사용할 수 있음. 수정을 하다보면 굉장히 많은 파일들이 생길 수 있는데 오프라인 온라인 파일도 구분 가능 피그마는 데스..

[패스트캠퍼스 수강 후기] 피그마강의 100% 환급 챌린지 22회차 미션 오늘은 처음으로 피그마를 배워 보았다. Figma를 활용한 모바일 UI 디자인 100% 피그마를 통해서 수업이 이루어진다. 1. 피그마의 기능이 강력해서 2. 제한된 시간동안 피그마와 최대한 친숙해지기 위함 스케치를 사용해봤으면 조금 친숙하게 느껴진다. 1. 피그마가 왜 좋은 툴인지, 어떤부분에서 강점이 있는지 2. 기초적인 인터페이스 이해하기 3. 효율적인 디자인 에셋 관리는 어떻게 하는지 4. 디자인 시스템 5. 다른 직군과의 협업 피그마란? 내 생각을 가장 잘 표현 할 수 있게 해주는 툴 디자인 툴이긴 하지만, 협업을 위한 툴이고 개발자이나 다른 여러 사람들과의 협업을 할 때 아주 유용하다. 1. 운영체제마다 열리고 안열리고 2. 프로그램을 깔아야 열린다... 3. 라이센스가 만료되었다. 피그마는 ..

이전 1 2 3 4 ··· 6 다음

티스토리툴바