00:00 intro 00:34 피그마 사각형 도형툴 단축키 R 00:53 피그마텍스트 단축키 T 01:00 option(alt) + shift + 드래그하여 객체 복제 01:25 피그마 텍스트 편집 01:46 Auto Layout으로 그룹핑하기 02:06 오토 레이아웃 중간 패딩 설정 02:29 오토 레이아웃 중간 패딩 8px 단위로 조정하는 방법 02:37 figma Big Nudge amount 8px로 조정하는 방법 02:57 오토 레이아웃 패딩 기본 설정 03:02 오토 레이아웃 independent paddings 기능 03:14 오토 레이아웃 사면 동시 패딩 조절 단축키 Shift + option(alt) 03:22 오토 레이아웃 좌우 또는 상하 패딩 조절 단축키 option(alt) 03:30 피그마 레이어 이름 변경하는 3가지 방법 03:55 오토 레이아웃 패딩 한 번에 수정하는 방법 04:10 피그마 캔버스 화면 100%로 보기 단축키 04:40 오토 레이아웃 캔버스 컨트롤 (여백 조정) 05:03 Selection colors 컬러 편집 05:13 텍스트 컬러 투명도 변경 05:45 오토 레이아웃 리사이징 옵션 fill container 06:03 오토 레이아웃 정렬 옵션 06:27 컴포넌트 에셋 위젯으로 컴포넌트 import 단축키 Shift. + I 06:44 New 버튼 컴포넌트 샘플 맛보기 06:46 Go to Main component 07:35 New 버튼 컴포넌트 Variants 커스텀 08:20 방향키로 오토 레이아웃 내 아이템 순서 이동 08:25 오토 레이아웃 프레임 내 버튼 컴포넌트 리사이징 1 08:35 Corner radius (Rounded) 09:25 figma config 2022 이후의 버튼 컴포넌트 아이콘 Swap 기능 09:33 figma config 2022 이후의 버튼 컴포넌트 Label 오버라이드 기능 10:07 오토 레이아웃 프레임 내 버튼 컴포넌트 리사이징 2 11:16 오토 레이아웃 프레임의 clip content 옵션 13:15 오토 레이아웃의 새 기능 Advanced position 16:17 피그마 플러그인으로 더미 이미지 & text 생성 #contentReel 17:17 오토 레이아웃의 새 기능 마이너스 패딩 #negativeSpacing 17:40 오토 레이아웃의 새 기능 캔버스 스태킹 #canvasStaking 17:48 오토 레이아웃의 Auto 중간 여백 or Spacing mode Space between 18:30 다음 영상 예고 이 영상은 제작 당시 업데이트된 기능인 컴포넌트 property 기능을 활용하는 방법 소개 + 주요 목적이 오토레이 아웃 기능의 업데이트 된 신규 기능을 소개하는 영상이기에 단순히 따라하기 보다 컴포넌트 variants 사용 원리를 이해하는데 초점을 둔 영상이라 할 수 있습니다. 따라서 샘플 파일은 제공 하지 않았습니다. 양해부탁드립니다
연정님 강의 보면서 피그마 독학 진행고있습니다! 참된영상 감사드립니당.. 빛과소금쓰..S2 다름아니라 혹시 매 강의 내 샘플은 디자인요소들 따로 다운 받을 수 있는게 있는 건가요..?ㅠㅠ 블로그랑, 강의 다 보고있는데 찾아지지가 않아서요.. 죄송합니다! 항상 좋은 강좌 제공해주셔서 정말 감사드립니다!!😉
안녕하세요~ 영상의 샘플은 피그마의 업데이트 된 기능을 어떻게 활용 가능한지 이해를 돕기 위해 제가 만든 자료로 별도로 공유를 하고 있지는 않아요~ 버튼 컴포넌트가 없더라도 임시로 더미를 만들어서 오토 레이아웃 프레임 내에 리사이징 테스트해볼 수 있구요~! 또는 이 영상 뒤에 업데이트한 두 영상을 참고하시면 버튼 컴포넌트를 제작하실 수 있어요~ 시청해주셔서 감사합니다!
이번 영상도 감사드립니다! :) 덕분에 auto layout은 항상 어떻게 써야하나 배워도 헷갈렸는데 정말 잘 이해가 되었어요! 근데 올려주신 button은 다음 연관 영상을 봐도 똑같은 건 없어서 혼자 응용해서 하긴 했는데요..! properties에서 text/showicon/swapicon 오른쪽에 뜨는 속성들이 따로 안 보이더라구요..! 음.. 이런 경우는 어떤 게 문제일까요..?
안녕하세요. 반응형 웹 디자인을 해야 하는데 연정님 강의보면서 많이 배우고 있습니다! 혹시 강의 맨 마지막 17:50 에 Spacing mode를 Space between으로 설정했다가 2개 중 한개를 삭제하면 가운데 정렬되고, 좌우 16간격을 주어 좌측정렬로 맞추는 것을 보았습니다. 해당 부분을 카드 예제에 적용하여 텍스트 + 프로필 버전, 텍스트만 있는 버전 두 벌로 만들어야 한다면, 텍스트+프로필은 Space between로 설정하고 텍스트만 있는 건 좌우 간격을 주어 좌측정렬로 값을 다르게 주어 제작하실까요?
안녕하세요. 피그마 config(2022) 5/11 이후에 순서가 좀 꼬였습니다 ㅜㅡ 온보딩 영상도 새로 만들어야 할만큼 피그마가 많이 바뀌었어요. 이번 업데이트 영상은 초보자가 따라하기에 개념적으로 난이도가 있을 수 있는데요. 원래 순서라면 (현재기준)온보딩 영상 먼저 보시고 이 영상 보시는거 추천드려요. 그 다음에 부족한 부분은 다른 영상에서 보충하시면 도움이 되실거에요. 결론은 금일 이후론 답은 딱히 없습니다 🥹
최근에는 4 또는 2배수 그리드도 사용되고 있습니다.😀 특히 모바일 및 태블릿 등 디바이스 환경에 최적화된 디자인을 하려면 홀수 단위는 지양, 8 또는 4 grid 규칙을 지향하는 것을 권장 드려요. 반응형 웹 버젼도 이 규칙을 적용하시면 보다 개발 친화적이고 일관성있는 시안을 제작하실 수 있어요~ * 연관 가이드 문서: m2.material.io/design/layout/spacing-methods.html#baseline-grid
안녕하세요 연정님 UI/UX 디자이너를 꿈꾸는 학생입니다! 다름이 아니라 현재 제 공부 구상에는 UI/UX뿐만이 아닌 Html / CSS / JS가 있는데 이러한 코딩쪽 공부를 해놓고 취직을 준비한다면 다른 UI/UX 디자이너보다 +a가 있는지 궁금합니다 ㅠㅠ.. 다른업계 선배님들은 그냥 차라리 하나만 파라.. 어중간하게 할빠에 이런식 조언도 들어서 갈피가 안잡히는 상태입니다. 저도 제가 천재가 아닌걸 알고있기에 UI/UX 를 획기적으로 잘 해낼 자신이 없어서 저는 이런저에게 코딩이라는 기술을 접목시키면 무조건 이득이라 생각하는데.. 연정님 생각은 어떠신지 여쭤보고 싶어요..!
안녕하세요 배우면 무조건 이득은 맞습니다. 다만 파도파도 배울 것이 많아요. 배우는 시간도 많이 소요됩니다. 시작하는 단계에선 ui/ux 디자인 공부가 우선이되 겸해서 html, css, js 기초를 이해하는 정도로 공부하시는 걸 추천드려요. 피그마도 html, css, 자바스크립트 지식이 있으면 유리해요. 개발자와 소통하기 좋고 구현을 고려해서 디자인과 기획을 할 수 있습니다. 그리고 공부하다 보면 코딩이 적성에 맞는지도 알 수 있기 때문에 시작은 해보시라고 적극 권장드리고 싶네요.
안녕하세요. 영상 잘보고있습니다. 외국포럼이며 관련글 아무리 찾아봐도 해결이안되서 실례를 무릅쓰고 댓글드립니다. 페이지 공유하기관련 궁금점이 있습니다. 한개 프로젝트안에 한개의 페이지만 공유하고 싶습니다. 고객사에게 미리보기용으로 전달할건데 작업중인 다른 페이지가 보이면 안됩니다. Pages - icons - component - draft 이 중 draft만 share로 공유하고 싶은데 방법이 있나요? draft 우클릭후 'copy link to page'로 링크를 생성하니 icons, componet까지 모두 보입니다. ;;;; draft만 링크로 공유해서 볼 수 있는 방법이 있을까요?
안녕하세요. 단순히 공유가 목적이라면 파일 복제 후 공유하려는 페이지만 남기고 공유하시는 걸 추천 드려요. 특정 페이지만 공유하는 것은 불가능해요~ 만약 프로페셔널 플랜 사용자일 경우엔 프로토타입핑 버전으로 해당 페이지만 제한적으로 공유 가능해요. (공유 옵션 : prototype only)
컴포넌트가 있어야 검색이 되요~ 버튼 컴포넌트를 생성하는 영상은 최근에 업데이트된 버튼 컴포넌트 만들기 영상을 참고하시면 되고요~ 다만 이 영상에서는 프로필 이미지나 버튼이 꼭 필수 요소는 아니기 때문에 더미(프로필 이미지: 원형 도형툴로 , 버튼 : 사각형 툴로 > 배치) 로 대체하셔도 되요.
열정에 감사하며 열심히 듣을께요~~
넘 멋진 업데이트라 빨리 공유드리고 싶었어요~
오래된 영상에서 좋은 정보 얻어가네요 감사합니다
강의 넘 감사해요 🥹💛 혼자 잘 안될때마다 다시 와서 배우고 있어요!
❤️❤️❤️
오늘도 감사합니다 연정님 ❤️❤️❤️
좋은 강의 만들어주셔서 감사합니다. 재사용 가능한 컴포넌트를 만들 수 있는 좋은 기능이라는 생각이 듭니다. 지금까지 피그마를 잘못 쓰고 있었네요ㅠ
강의 감사합니다~! 잘 들었습니다!
정말 도움 많이 됐습니다. 오토레이아웃 개념을 이해못해서 figma를 photoshop처럼 사용할뻔 했네요.
긴 영상 만들어 주셔서 감사합니다. 너무 잘 보고 배워갑니다 😋
감사합니다 ! 혼자 독학하는 스타트업 디자이너인데 큰 도움이 되었어요 !
피그마 이제 배우는 디자이너 입니다. 개발자에게 전달시 이수준? 까지 작업을 해서 전달해야 하는지요...포토샵처럼 디자인만 해서 넘기면 되겠다 하다가 이강의 보니 머리가 터져버릴꺼같아요..ㅎ
😅
00:00 intro
00:34 피그마 사각형 도형툴 단축키 R
00:53 피그마텍스트 단축키 T
01:00 option(alt) + shift + 드래그하여 객체 복제
01:25 피그마 텍스트 편집
01:46 Auto Layout으로 그룹핑하기
02:06 오토 레이아웃 중간 패딩 설정
02:29 오토 레이아웃 중간 패딩 8px 단위로 조정하는 방법
02:37 figma Big Nudge amount 8px로 조정하는 방법
02:57 오토 레이아웃 패딩 기본 설정
03:02 오토 레이아웃 independent paddings 기능
03:14 오토 레이아웃 사면 동시 패딩 조절 단축키 Shift + option(alt)
03:22 오토 레이아웃 좌우 또는 상하 패딩 조절 단축키 option(alt)
03:30 피그마 레이어 이름 변경하는 3가지 방법
03:55 오토 레이아웃 패딩 한 번에 수정하는 방법
04:10 피그마 캔버스 화면 100%로 보기 단축키
04:40 오토 레이아웃 캔버스 컨트롤 (여백 조정)
05:03 Selection colors 컬러 편집
05:13 텍스트 컬러 투명도 변경
05:45 오토 레이아웃 리사이징 옵션 fill container
06:03 오토 레이아웃 정렬 옵션
06:27 컴포넌트 에셋 위젯으로 컴포넌트 import 단축키 Shift. + I
06:44 New 버튼 컴포넌트 샘플 맛보기
06:46 Go to Main component
07:35 New 버튼 컴포넌트 Variants 커스텀
08:20 방향키로 오토 레이아웃 내 아이템 순서 이동
08:25 오토 레이아웃 프레임 내 버튼 컴포넌트 리사이징 1
08:35 Corner radius (Rounded)
09:25 figma config 2022 이후의 버튼 컴포넌트 아이콘 Swap 기능
09:33 figma config 2022 이후의 버튼 컴포넌트 Label 오버라이드 기능
10:07 오토 레이아웃 프레임 내 버튼 컴포넌트 리사이징 2
11:16 오토 레이아웃 프레임의 clip content 옵션
13:15 오토 레이아웃의 새 기능 Advanced position
16:17 피그마 플러그인으로 더미 이미지 & text 생성 #contentReel
17:17 오토 레이아웃의 새 기능 마이너스 패딩 #negativeSpacing
17:40 오토 레이아웃의 새 기능 캔버스 스태킹 #canvasStaking
17:48 오토 레이아웃의 Auto 중간 여백 or Spacing mode Space between
18:30 다음 영상 예고
이 영상은 제작 당시 업데이트된 기능인 컴포넌트 property 기능을 활용하는 방법 소개 + 주요 목적이 오토레이 아웃 기능의 업데이트 된 신규 기능을 소개하는 영상이기에 단순히 따라하기 보다 컴포넌트 variants 사용 원리를 이해하는데 초점을 둔 영상이라 할 수 있습니다. 따라서 샘플 파일은 제공 하지 않았습니다. 양해부탁드립니다
세심한 타임라인까지..! 감사합니다!
연정님 강의 보면서 피그마 독학 진행고있습니다! 참된영상 감사드립니당.. 빛과소금쓰..S2
다름아니라 혹시 매 강의 내 샘플은 디자인요소들 따로 다운 받을 수 있는게 있는 건가요..?ㅠㅠ
블로그랑, 강의 다 보고있는데 찾아지지가 않아서요.. 죄송합니다! 항상 좋은 강좌 제공해주셔서 정말 감사드립니다!!😉
안녕하세요~ 영상의 샘플은 피그마의 업데이트 된 기능을 어떻게 활용 가능한지 이해를 돕기 위해 제가 만든 자료로 별도로 공유를 하고 있지는 않아요~ 버튼 컴포넌트가 없더라도 임시로 더미를 만들어서 오토 레이아웃 프레임 내에 리사이징 테스트해볼 수 있구요~!
또는 이 영상 뒤에 업데이트한 두 영상을 참고하시면 버튼 컴포넌트를 제작하실 수 있어요~ 시청해주셔서 감사합니다!
연정님! 급 떠서 바로 보러왔어요!!
감사해요!
감사해요! ❤️🥰😍
나온지도모르고... 알람설정 해놨습니다 오늘 ㅠ
Absolute Position 기능이 추가되어 더 쉽게 할 수 있겠네요! ^^
잘 봤습니다~ 항상 좋은 영상 감사드려요 :)
저도 감사요🥹💕
이번 영상도 감사드립니다! :) 덕분에 auto layout은 항상 어떻게 써야하나 배워도 헷갈렸는데 정말 잘 이해가 되었어요!
근데 올려주신 button은 다음 연관 영상을 봐도 똑같은 건 없어서 혼자 응용해서 하긴 했는데요..!
properties에서 text/showicon/swapicon 오른쪽에 뜨는 속성들이 따로 안 보이더라구요..! 음.. 이런 경우는 어떤 게 문제일까요..?
좋은 강의 제작해주셔서 진심으로 감사드립니다!
실무 학습에 많은 도움이 되어 영상을 똑같이 따라하는 과정을 밟고 있는데, 이번 영상에 포함된 컴포넌트 세트 제작을 혼자하기가 미숙한 상태라서, 혹시 따로 제작해놓으신 영상이 있는지 여쭤봅니다!
안녕하세요. “피그마 강좌ㅣ재사용 가능한 버튼 컴포넌트 생성하기 #컴포넌트 #properties
ruclips.net/video/WOQ48AL1_Rk/видео.html ” 이 영상을 참고하시면 버튼 컴포넌트를 제작하는데 힌트를 얻으실 수 있어요. 직접 제작해 보는것을 추천 드립니다.😀
엄청나게 유용합니다..!
안녕하세요 연정님 좋은 영상 올려주셔서 너무 감사합니다!!!
그런데 혹시 Absolute Position 기능은 업데이트 되면서 사라진걸까요? 제 피그마에선 아이콘이 보이지가 않아서요 ㅠㅠ
다시한번 감사합니다!
안녕하세요. 반응형 웹 디자인을 해야 하는데 연정님 강의보면서 많이 배우고 있습니다!
혹시 강의 맨 마지막 17:50 에 Spacing mode를 Space between으로 설정했다가 2개 중 한개를 삭제하면 가운데 정렬되고, 좌우 16간격을 주어 좌측정렬로 맞추는 것을 보았습니다. 해당 부분을 카드 예제에 적용하여 텍스트 + 프로필 버전, 텍스트만 있는 버전 두 벌로 만들어야 한다면, 텍스트+프로필은 Space between로 설정하고 텍스트만 있는 건 좌우 간격을 주어 좌측정렬로 값을 다르게 주어 제작하실까요?
안녕하세요 연정님 영상 항상 잘보고있습니다~ 궁금한게 있어서 댓글드립니다! 피그마 독학중인데 피그마 기초 강좌 재생목록을 순차적으로 보면되는건가요 아니면 최근에 올라온 온보딩만 봐도 될까요? 재생목록 순차적으로 보고있는데 간혹 순서가 안맞는거같아서 질문드립니다!!
안녕하세요. 피그마 config(2022) 5/11 이후에 순서가 좀 꼬였습니다 ㅜㅡ 온보딩 영상도 새로 만들어야 할만큼 피그마가 많이 바뀌었어요. 이번 업데이트 영상은 초보자가 따라하기에 개념적으로 난이도가 있을 수 있는데요. 원래 순서라면 (현재기준)온보딩 영상 먼저 보시고 이 영상 보시는거 추천드려요. 그 다음에 부족한 부분은 다른 영상에서 보충하시면 도움이 되실거에요. 결론은 금일 이후론 답은 딱히 없습니다 🥹
@@yeonjung-figma 감사합니다! !
안녕하세요 많은 도움 받고 있습니다~! 영상에는 상단쪽만 다루었는데 상단 밑에 2단으로 왼쪽/오른쪽 정렬로 나눠진 컨텐츠 부분 제작도 궁금한데 그 부분도 올려주실 수 있을까요? 반응형으로 하고 있는데 2단이 쉽지 않네요ㅠ
안녕하세요 올려주신 영상이 피그마 독학에 정말 많은 도움이 되고 있습니다 감사합니다 !
혹시 여러개의 화면을 동시에 export 할 때 압축파일(zip)이 아닌 일반 파일로 내보낼 수 있는 설정이 따로 있는지 궁금합니다!
답변 주시면 많은 도움이 될 것 같습니다 ~
감사합니다!!
감사합니다~
저도요~~🥰
감사합니다
👍🏻👍🏻👍🏻👍🏻
👍👍👍👍💕
12:44
height: 0;
position: absolute;
left: 50%
transform: translate(0, -50%);
엉엉...
2:49 8의 배수로 사용하는 이유가 있을까요? 반응형 해상도 때문에 그런건가요?
최근에는 4 또는 2배수 그리드도 사용되고 있습니다.😀 특히 모바일 및 태블릿 등 디바이스 환경에 최적화된 디자인을 하려면 홀수 단위는 지양, 8 또는 4 grid 규칙을 지향하는 것을 권장 드려요. 반응형 웹 버젼도 이 규칙을 적용하시면 보다 개발 친화적이고 일관성있는 시안을 제작하실 수 있어요~
* 연관 가이드 문서: m2.material.io/design/layout/spacing-methods.html#baseline-grid
가로 리사이징 버튼 filled 옵션이 안보일땐 어떡하면 되나요?
❤❤❤❤❤❤❤❤❤❤❤
우와ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ 피그마요정
ㅎㅎㅎㅎㅎ 요정은 과하지만 칭찬인걸로 ㅎㅎㅎㅎ
안녕하세요 연정님 UI/UX 디자이너를 꿈꾸는 학생입니다! 다름이 아니라 현재 제 공부 구상에는 UI/UX뿐만이 아닌 Html / CSS / JS가 있는데 이러한 코딩쪽 공부를 해놓고 취직을 준비한다면
다른 UI/UX 디자이너보다 +a가 있는지 궁금합니다 ㅠㅠ..
다른업계 선배님들은 그냥 차라리 하나만 파라.. 어중간하게 할빠에 이런식 조언도 들어서 갈피가 안잡히는 상태입니다.
저도 제가 천재가 아닌걸 알고있기에 UI/UX 를 획기적으로 잘 해낼 자신이 없어서 저는 이런저에게 코딩이라는 기술을 접목시키면 무조건 이득이라 생각하는데..
연정님 생각은 어떠신지 여쭤보고 싶어요..!
안녕하세요
배우면 무조건 이득은 맞습니다. 다만 파도파도 배울 것이 많아요. 배우는 시간도 많이 소요됩니다. 시작하는 단계에선 ui/ux 디자인 공부가 우선이되 겸해서 html, css, js 기초를 이해하는 정도로 공부하시는 걸 추천드려요. 피그마도 html, css, 자바스크립트 지식이 있으면 유리해요. 개발자와 소통하기 좋고 구현을 고려해서 디자인과 기획을 할 수 있습니다.
그리고 공부하다 보면 코딩이 적성에 맞는지도 알 수 있기 때문에 시작은 해보시라고 적극 권장드리고 싶네요.
@@yeonjung-figma 감사합니다!
1:30 이 부분에서 행간 100 동일하게 적용하면 결과값이 너무 크게 출력되는데 뭐가 문제일까요 ㅠ 다른 예제들 따라해봐도 유튜브 디자이너님들 화면상의 행간 자간보다 작거나 크게 입력되는거같은데 ㅠㅠ..
@설유화 혹시 100%가 아닌 100으로 입력하셨나요? 100으로 입력하면 100px로 반영되여.
@@yeonjung-figma 헉 다시 확인해보니 그 부분을 세팅을 안했네요 ㅠ.ㅠ 사랑합니다 주인장님
💚
안녕하세요 강의 감사합니다
근데 all padding 단축키 안먹는데 사라졌나요? ㅠ
cmd(ctrl)이요. 안바뀌었어요
안녕하세요. 영상 잘보고있습니다.
외국포럼이며 관련글 아무리 찾아봐도 해결이안되서 실례를 무릅쓰고 댓글드립니다.
페이지 공유하기관련 궁금점이 있습니다.
한개 프로젝트안에 한개의 페이지만 공유하고 싶습니다.
고객사에게 미리보기용으로 전달할건데 작업중인 다른 페이지가 보이면 안됩니다.
Pages
- icons
- component
- draft
이 중 draft만 share로 공유하고 싶은데 방법이 있나요?
draft 우클릭후 'copy link to page'로 링크를 생성하니 icons, componet까지 모두 보입니다. ;;;;
draft만 링크로 공유해서 볼 수 있는 방법이 있을까요?
안녕하세요. 단순히 공유가 목적이라면 파일 복제 후 공유하려는 페이지만 남기고 공유하시는 걸 추천 드려요. 특정 페이지만 공유하는 것은 불가능해요~
만약 프로페셔널 플랜 사용자일 경우엔 프로토타입핑 버전으로 해당 페이지만 제한적으로 공유 가능해요. (공유 옵션 : prototype only)
shift+i로 검색해도 버튼이나 프로필이미지가 검색되지않아요 ㅜㅜ
컴포넌트가 있어야 검색이 되요~ 버튼 컴포넌트를 생성하는 영상은 최근에 업데이트된 버튼 컴포넌트 만들기 영상을 참고하시면 되고요~ 다만 이 영상에서는 프로필 이미지나 버튼이 꼭 필수 요소는 아니기 때문에 더미(프로필 이미지: 원형 도형툴로 , 버튼 : 사각형 툴로 > 배치) 로 대체하셔도 되요.
도형 오브젝트로 대치해 실습해보았습니다. 답변 감사합니다.
유의미한 영향력이 있는 강의였습니다 💚
피그마에서 상 주셔야 할 거 같아요!
감사합니다 👏
👍저도요✨
감사합니다