- Видео 12
- Просмотров 1 748
예피디:예제로피그마디자인
Южная Корея
Добавлен 17 окт 2024
예제로 피그마 디자인, 예피디와 함께 UX디자인을 공부합니다
피그마 리스트 컴포넌트 : Android와 IOS 리스트 구조 파악, 스타벅스 예제(2-5)
#피그마 #피그마리스트 #컴포넌트 #베리언트 #오토레이아웃 #피그마업데이트 #피그마UI3 #figma #figmatutorial #autolayout #components #variant #property
-
Android와 IOS 리스트 구조를 파악하고,
리스트 컴포넌트와 베리언트를 생성해서,
전체 리스트 레이아웃을 잡아 봅니다.
-
Android와 IOS 리스트 구조를 파악하고,
리스트 컴포넌트와 베리언트를 생성해서,
전체 리스트 레이아웃을 잡아 봅니다.
Просмотров: 10
Видео
피그마 단축키 : 스타벅스 카드 컴포넌트,베리언트,단축키 이해 (2-4)
Просмотров 80День назад
피그마 카드디자인으로 단축키와 2줄 오토레이아웃/컴포넌트/베리언트/불린/텍스트프로퍼티(속성)를 이해합니다. *자료 figma.com/@yepd - #피그마 #피그마단축키 #오토레이아웃 #컴포넌트 #베리언트 #피그마업데이트 #피그마UI3 #figma #figmatutorial #autolayout #components #property
피그마 그리드 : 구글 앱, 데스크탑 8배수/4배수 그리드와 레이아웃 (1-2)
Просмотров 15814 дней назад
피그마 강의 그리드 : 구글 모바일 앱, 데스크탑의 8배수/4배수 그리드와 레이아웃 잡아보기 - #피그마 #그리드 #구글 #UX디자인 #UI디자인 #figma #google #UXdesign #UIdesign #figmatutorial
피그마 베리언트 : 올리브영 버튼 컴포넌트,베리언트,불린,오토레이아웃 심화 이해 (2-3)
Просмотров 212Месяц назад
피그마 컴포넌트 베리언트 / 오토레이아웃 / 이커머스 버튼만들기 / property 속성 추가 / 불린 / 인스턴스 *자료 figma.com/@yepd - 00:00 피그마 UI 변경내용 00:13 이커머스 올리브영 주문버튼 개요 02:07 버튼 16종 만들기 08:40 컴포넌트 (Component) 만들기 09:09 베리언트 속성 (Variant proprety) 추가 11:13 텍스트 속성 (Text proprety) 추가 12:58 불린 속성 (Boolean proprety) 추가 13:51 인스턴스 적용하기 15:33 오토레이아웃 적용하여 버튼그룹 만들기 17:47 요약 및 컴포넌트 수정하기 - #피그마 #베리언트 #컴포넌트 #인스턴스 #오토레이아웃 #UX디자인 #UI디자인 #올리브영 #figm...
피그마 컴포넌트 : 올리브영 버튼 만들기, 불린, 베리언트, 인스턴스스왑 (2-2)
Просмотров 346Месяц назад
#피그마 업데이트, UI가 개편되어 바뀐 부분 남깁니다. 1)Text속성 추가 - 속성패널상단 텍스트영역 호버 - 육각형 클릭 - [ ] 2)Boolean속성 추가 - Appreance - 육각형 클릭 - [ ] - 피그마 컴포넌트 / 버튼만들기 / 속성(property) 추가하기 / 불린 / 베리언트 / 인스턴스스왑 / 컴포넌트 가져오기 *파일(figma.com/@yepd) *파일 [Open in Figma]할 경우, 에셋 가져오기창에서 속성을 적용하는 방식은 [유료플랜]만 가능 - 00:00 컴포넌트 개요 04:18 버튼 컴포넌트 만들기 06:50 불린 속성 (Boolean proprety) 추가 08:54 텍스트 속성 (Text proprety) 10:06 베리언트 속성 (Variant propr...
피그마 오토레이아웃 : Auto-layout 이해, 컬리 메뉴바 실습(2-1)
Просмотров 186Месяц назад
피그마 업데이트 오토레이아웃, 컬리 메뉴바를 만들면서 이해합니다. *자료 figma.com/@yepd - 00:00 오토레이아웃 개요 01:01 오토레이아웃 구조 이해 04:35 마켓컬리 메뉴바 UI 실습 11:26 최종요약 - #피그마 #오토레이아웃 #피그마업데이트 #피그마UI3 #figma #figmatutorial #autolayout
피그마 기초: 피그마 UI3 설치, 아이콘, 오토레이아웃 기초강의(1-1)
Просмотров 299Месяц назад
피그마 UI3 업데이트 버전으로 피그마기초를 익힐 수 있습니다. - 00:00 인트로 00:18 피그마 설치 및 실행하기 01:20 UI3 개요 03:15 레이어, 정렬, 아이콘 만들기 09:53 프레임&섹션 11:16 이미지 가져오기 14:15 이미지 텍스트 오토레이아웃 21:25 단축키 - #피그마 #피그마업데이트 #피그마기초 #피그마UI3 #figmatutorial #figmatutorialforbeginners #figma
정말 감사합니다
완전 유용한 강의입니다!! 앞으로 다른 강의도 기다려볼게요..!! 피그마 >< / 색상 컬러 팔레트 설정은 어떤식으로 써야 유용한지 궁금해요!..
❤❤❤❤
진짜 짱이에요!! 혹시 다른 사이트에서 유료 강의도 있나요? 유튜브 영상만 보려니 아쉽 ㅠㅠ
없습니다;;
오늘구독눌렀어요...콜로소랑 다른분들꺼 강의봤는데 버전이 예전버전의 강의라서 조금힘든데 위영상은 최신업데이트된거데로 설명해주네요 감사합니다.
응원합니다~
평소에 궁금했던 컴포넌트나 베리언트 관리 같은 내용들 이번 강의에서 정말 많이 배웠습니다. 한가지 궁금한게 5:00 쯤에 Boolean과 Variant의 작업방식의 차이가 있을까요? 단순히 선택의 문제인지 아니면 확실히 각각의 경우를 써야 하는 구분되는 이유나 상황이 있을까요? 오늘도 초특급실전강의 너무 감사합니다!!
베리언트를 활용해서 Bealean기능을 적용할 수 있음을 알려드린겁니다^^
@@yepd_class 아.. 감사합니다. 이번엔 단축키가 또 변경된거죠? shift+\ 에서 cmd+shift + \로~
패널축소/확대 'shift+\'이고, 패널숨김/보임 'Cmd+\' 입니다. 이 부분을 말씀하시는걸까요?
오.. 컬럼 외에도 그리드가 의외로 유용하네요.
제가 찾던 피그마 영상이에요!! 사랑해요 💗
이 영상을 먼저 봤어야 하는데ㅠㅠ 너무 감사합니다 저장해두고 수시로 보겠어요!
화이팅입니다!
예피디님 피그마 강의 구독하고 잘보고 있습니다. 09초에 나오는 주황색 박스 그려주시는 프로그램 좀 알려주시면 감사하겠습니다.
맥에서 'ProMouse'라는 앱입니다.^^
예피디님 피그마 강의 정주행할거 찾았는데 넘 좋네요 구독 좋댓구알요...09초부터 나오는 주황색 화살표 나오는 프로그램 좀 알려주세요
맥에서 'ProMouse'라는 앱입니다.^^ 'pointer'검색해서 찾았던거 같네요
진짜 제가 원하는 진행속도 입니다. 급하게 설계기획해야해서 피그마 어찌저찌 알아서 이용중인데 자세한 툴 설명 정말 감사드립니다ㅠㅠ 프로토타입도 좀 부탁드려요ㅠㅠ
감사드리고, 응원합니다~
안그래도 프로퍼티 부분 ui가 바뀌어 당황했는데 그것까지 반영되어 있어서 좋네요 좋은 강의 잘봤습니다!
도움이 되셨다니 다행입니다. 🙏🏻
혼자서 만들어 보기 대성공!
@@secretgarden4982 멋져요👍
너무 잘 보고 있습니다. 구독했어요 ㅎㅎ
저도 최근 버전 강의 찾고 있었는데 진짜 감사합니다.
아 그리고 하나더 여쭤 볼께요~^^ 화면 확대 축소 단축키가 컨트럴+스페이스바를 자주 쓰는데요 근데 어떤 상황인지는 모르겠는데 이 단축키가 않먹힐때가 있더라구요. 그럴땐 Z 키를 눌러서 확대축소를 활성화 시켜서 합니다. 어떤 상황에서 컨트럴+스페이스바가 안먹힐까요?
PC기준 화면 확대 Ctrl+[+], 축소Ctrl+[-], 100%보기는 Ctrl+[숫자0]입니다. 단축키는 우측하단 [?물음표] > Keyboard Shorcuts에서 확인할 수 있습니다.
@@yepd_class 친절한 답변 감사 합니다
좋은 강의 감사합니다. 저는 오토레이아웃을 하면 상단에 프레임이 생기네요, 왜 그럴까요?
A,B를 오토레이아웃하면 묶어주는 레이어가 생기는게 맞습니다. 프레임이 생긴다는게 이런 의미인가요? 제가 작업한 피그마 파일과 좌측 레이어패널을 비교헤보세요~
@@yepd_class 답변 감사합니다. 프레임을 만들면 좌측 상단에 프레임 명이 생기잔아요. 그렇게 된다는 말씀을 드렸습니다.
피그마 ui 바뀌니 헷갈려서 기초부터 다시 보려고 강의 찾고 있었는데 너무 좋네요 잘 보겠습니다!
기본버튼스타일 하나를 복합적으로 쓸수 있는 베어리언트로 만드는 순서와 과정을 하나씩 설명해주시니 개념정립이 확 되네요!! 특히 사이즈와 스타일 2가지 기준으로 베리치는 기준을 잡으니 너무 쉽게 정리가 되네요. 실전강의 그 자체 너무 감사합니다.
속성 정의 할때 화면UI가 미묘하게 달라서 엄청 헤멨네요. 7:22와 9:08 에서 패널 UI가 미세하게 다르고 기능도 다르네요. 텍스트 속성같은 경우는 타이포그래피 창이 아닌 제일 상단에서만 추가할수 있는데 이렇게 선생님 화면과 다른 이유가 무료와 유료버전의 차이일까요???
피그마 UI가 그 사이 개편되었습니다. 1)Text속성 추가 - 속성패널상단 텍스트영역 호버 > 육각형 클릭 > [+] 2)Boolean속성 추가 - Appreance > 육각형 클릭 > [+] 올리브영 버튼2탄에서 개편된 UI로 강의를 진행하니 참고해주세요~
@@yepd_class 아. 강의 영상에서 또 변경되었나보군요. 자세한 설명 감사합니다.
우와 첫 개요부분 텍스트와 컬러 사용하시는것만 봐도 차별화된 내공이 느껴집니다.
다른 강의보다 쉽게 잘 가르쳐 주셔서 감사합니다. 앞으로도 잘 따라가 볼께요
그리고 예제를 클릭 후 오픈 인 피그마 클릭하면 웹용 피그마가 뜨더라구요 저는 설치를 했거든요 설치용 피그마가 뜨도록 하는 방법이 있나요?
웹에서 [open in Figma]를 하시면 웹에서 열립니다. 피그마 데스크톱앱 - 상단탭 - [지구아이콘]을 누르시면 [커뮤니티]로 이동하니, 그렇게 실행해보시기 바랍니다~
예제 다운 받고 에셋에서 쌤과 똑같이 했는데 가입버튼 에셋이 쌤처럼 변경할 수 있도록 구동이 않되네요? 왜 그럴까요?
알려주셔서 감사합니다~ 제가 테스트를 해보니 커뮤니티에서 가져온 파일은 [유료플랜]일 경우 에셋 가져오기창에서 속성을 구현할수있습니다~
@@yepd_class 쌤은 유료 버전이고 전 무료라서 그렇군요