![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/Bb2Kp/btsrTpshNDD/lwmFAMdzXjmPk1o0osTp51/img.png)
안녕하세요 찐망고입니다. 오늘은 NH농협리츠운용모바일 사이트를 클론디자인해서 네비게이션에 인터렉션을 걸어볼겁니다. 일단 피그마는 디자인패널과 프로토타입 패널로 나누어지고, 프로토타입에서 인터렉션을 걸 수 있어요. Interractions에 더하기 아이콘을 클릭하면 이벤트와 애니메이션을 각각 고를 수 있는 메뉴가 뜨는데요 원하는 이벤트와 애니메이션을 찾아 골라주면 끝이긴 한데 디테일한 인터렉션을 걸어주려면 프레임작업을 조금 해주는게 좋아요 오늘은 간단하게 네비를 보였다 숨겼다 정도만 해볼게요 오픈오버레이는 현재 프레임위에 새프레임을 위로 올리는 건데. 위치값을 지정할 수 있어요 Overlay settings에서요 저는 메인프레임과 네비프레임이 같으므로 센터로 정렬을 했고, 오른쪽에서 왼쪽으로 보이기 위해 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/yHRtB/btsrqxqwjbN/npQqK4N2xJboslKfmQxGT0/img.png)
안녕하세요 찐망고 입니다. 오늘은 디자인 관련 피그마 플러그인을 추천해볼건데요.. Iconify나 Unsplash처럼 엄청 자주쓰는건 아니지만 그래도 있으면 나름 쓸만한 플러그인들입니다. 이전 발행글도 참고해주세요~ 2023.07.14 - [UIUX디자인/피그마] - 피그마 추천 플러그인 피그마 추천 플러그인 안녕하세요 찐망고입니다. 벌써 5번째 카테고리인 플러그인 포스팅으로 넘어왔네요 저는 피그마 플러그인을 많이 사용하는 편은 아닌데요. 그래도 있으니까 편하다 하는 것들 위주로 포스팅 해 uiweb.tistory.com ARC - Bend your type! 텍스트를 먼저 쓰고 난 뒤 해당 플러그인을 실행시키면 밴드형태로 모양을 바꿀 수 있는데요. 글씨가 각각 하나씩 분리가 되고, 원형태도 가능해서 편..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/JYUNX/btsnrsNCmmK/nJhU1Eptxe8RDdrgms8A71/img.png)
안녕하세요 찐망고입니다. 벌써 5번째 카테고리인 플러그인 포스팅으로 넘어왔네요 저는 피그마 플러그인을 많이 사용하는 편은 아닌데요. 그래도 있으니까 편하다 하는 것들 위주로 포스팅 해볼게요. 일단 이전글.. 0. styles등록 (text, color) - 이전글 참조 2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기 피그마 ui-스타일가이드, 스타일 등록하기 안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESH uiweb.tistory.com 1. Layout grid 2023.07.05 - [피그마] - 피그마 Layout grid..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/csvwtl/btsnfrI5b2F/KF7pgY6xVRN5LkGpB5lPJK/img.png)
안녕하세요 찐망고입니다 오늘은 피그마의 Component와 Variants에 대해서 포스팅 해볼까 해요 일단 피그마 이전글들을 참고해주시구요 0. styles등록 (text, color) - 이전글 참조 2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기 피그마 ui-스타일가이드, 스타일 등록하기 안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESH uiweb.tistory.com 1. Layout grid 2023.07.05 - [피그마] - 피그마 Layout grid 피그마 Layout grid 안녕하세요 찐망고입니다. 할게 많은 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/EndAC/btsnaSkZBm1/WUEntajZkDL2LXful0Spok/img.png)
안녕하세요 찐망고입니다 오늘은 피그마의 Constraints에 대해서 포스팅 해볼까 해요 일단 피그마 이전글들을 참고해주시구요 0. styles등록 (text, color) - 이전글 참조 2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기 피그마 ui-스타일가이드, 스타일 등록하기 안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESH uiweb.tistory.com 1. Layout grid 2023.07.05 - [피그마] - 피그마 Layout grid 피그마 Layout grid 안녕하세요 찐망고입니다. 할게 많은 와중에 피그마 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cumELW/btsmIhThLHU/qrXp25LZb7If9VxXJPtx7k/img.png)
안녕하세요 찐망고입니다 오늘은 피그마의 Auto Layout에 대해서 포스팅 해볼까 해요 엄청 편리하고 좋은 기능이라 생각합니다요!! 일단 피그마 이전글들을 참고해주시구요 0. styles등록 (text, color) - 이전글 참조 2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기 피그마 ui-스타일가이드, 스타일 등록하기 안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESH uiweb.tistory.com 1. Layout grid 2023.07.05 - [피그마] - 피그마 Layout grid 피그마 Layout grid 안녕하..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bzLjvo/btsmqKoNvib/nuz2p6ICOypk9Yl6Aqos81/img.png)
안녕하세요 찐망고입니다. 할게 많은 와중에 피그마 포스팅 중이고 피그마는 진짜 딱 몇개의 키워드만 공부하시면 끝나는 그만큼 기능은 적지만 알찬 프로그램이에요. 참고로 너무 많은 기능을 지원하는데 그런건 나중에 따로 썰 풀도록 하고 0. styles등록 (text, color) - 이전글 참조 2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기 피그마 ui-스타일가이드, 스타일 등록하기 안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESH uiweb.tistory.com 1. Layout grid 2023.07.05 - [피그마] - 피그..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/etc7Kh/btsmr2PgWqf/hAJjUGLouH35cynTxNjyoK/img.png)
안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESHWAY사이트를 작업하면서 기본적인 스타일가이드도 만들어보았습니다. 스타일가이드가 필요한 이유는 앞으로 진행될 디자인과 마크업(퍼블리싱)때문인데요. 특히 퍼블리싱할땐 자주 사용하는 컬러와 폰트, 폰트사이즈를 미리 CSS로 셋팅해놓고 작업을 하면 아주 편리하기 때문에 디자인과 따로 이렇게 가이드를 만들어주면 좋습니다. 포토샵으로 디자인을 하다가 피그마로 디자인을 하면 참 편한게 일단 피그마는 텍스트 선택시 폰트의 정보가 바로 뜨는데요. Headline/30px Title Bold라고 되어있는 부분은 이런식으로 피그마에..
- Total
- Today
- Yesterday
- uxdesign
- Slick
- 웹표준
- JavaScript
- 웹디자인
- css
- css4
- 코딩교육
- 프로그래밍기초
- 크로스브라우징
- 포토샵합성
- 디자인팁
- css그리드
- boxmodel
- 스마트폰해상도
- JavaScriptTips
- slickAPI
- 피그마플러그인
- 시멘틱마크업
- 웹접근성
- uiux
- margin
- Border
- UI디자인
- 반응형웹
- CSS3
- uidesign
- 자바스크립트숫자카운트
- 슬라이드플러그인
- padding
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |