00:00 intro 00:24 웹상의 이미지 피그마에 붙여 넣기 00:52 Place Image 로컬 이미지 여러개를 피그마로 가져오는 방법 01:17 이미지 사이즈 조정 01:32 텍스트 입력 01:52 텍스트 복사 & 붙여넣기 02:15 오토 레이아웃 기능으로 텍스트 그룹핑 02:35 피그마의 레이어명 변경하기 02:52 텍스트 복제하기 03:00 객체간의 간격 확인하기 03:06 오토 레이아웃 설정 가이드 03:38 텍스트 스타일 수정하기 03:51 Uppercase 영문 텍스트 모두 대문자로 표기하는 설정 05:03 Auto Layout 단축키 Shift + A 05:49 텍스트를 프레임 기준으로 리사이징하는 방법 1 07:10 오토 레이아웃 프레임에 컬러 지정 07:23 오토 레이아웃 프레임의 여백 지정 07:57 텍스트를 프레임 기준으로 리사이징하는 방법 2 08:50 오토 레이아웃 프레임의 Corner Radius가 적용되지 않는 경우 해결 방법 09:45 이미지를 프레임 기준으로 리사이징하는 방법 10:01 Card 컴포넌트 생성하기 10:37 인스턴스가 아닌 컴포넌트를 수정해야하는 이유 10:50 인스턴스를 수정하는 방법 Override 11:37 다음 영상 예고 *연관 링크 * 투둠 : www.netflix.com/tudum * 오토 레이아웃 기초 영상: ua-cam.com/video/sAvdvB0vXQg/v-deo.html
좋은 질문 감사합니다. 저는 %를 권장드려요. 퍼블리싱을 할때도 px 대신 %를 사용합니다. 보다 개발 친화적이고 유저 친화적인 방법입니다. (좀 더 상세한 방법은 구글 검색을 하시면 아주 자세히 나와 있습니다. 함께 참고해 주세요.) 한 예로 만약 폰트 크기가 16px일때 행간을 150% 대신 24px로 line-height로 정의를 했다고 가정을 했을 시, 폰트 크기를 18로 조정을 했을 경우, 행간이 글씨 크기 대비 작기 때문에 가독성이 떨어지게 됩니다. 이때 다시 행간을 조정해야 하는 경우가 발생해요. 만약 퍼센트로 정의 했더라면 불필요한 단계가 추가 되는 것이죠. 즉, 피그마나 퍼블리싱에서 px 단위 대신 퍼센트로 정의를 하는 이유는 상대값을 고려하고자 위함입니다. (폰트 대비 행간 크기)
이전 영상도 잘 봤는데, 신규 영상 올라와서 반가워요! 차근차근 잘 알려주셔서 많은 도움이 되었습니다. 감사해요! 이번 영상 끝부분에 원형아이콘 추가하는 방법은 설명이 생략되었는데, 오토레이아웃 설정되어있는 프레임 위에 아이콘을 겹쳐서 올리는게 안돼서 끝까지는 못했어요ㅠㅠ.. 오토레이아웃에서 컨텐츠를 겹치는건 어떻게 하나요?
와 정말 대박이에요~ 이전에 올려주신거 다 볼 예정이지만 빨리 2022 버전 동영상이 업데이트 되면 좋겠네요 😁 말씀하시는 속도가 적당해서 배속 없이 보기 좋아요. 하나하나 초보자가 처음 작업한다고 생각하고 나올 수 있는 문제 상황에 대한 대처법을 알 수 있어서 너무 좋아요. 그러면서 자연스럽게 기능도 익히게 되구요. 확실히 피그마가 UI 디자인 툴이라 그런지 논리적인 방식의 디자인이 가능하네요. 포토샵처럼 붕 떠있는 레이어을 그냥 픽셀 단위로 배치하는게 아니라 HTML, CSS 퍼블리싱 하듯 디자인 할 수 있다는게 굉장히 접근하기 쉬워보여요. 앞으로도 열공하겠습니다
연정님 감사합니다. 덕분에 피그마 하나씩 배워가고 있네요. 빨리 포토샵만큼 익숙해지기를.. 한가지 여쭐께요,, 마지막에 검은색 메뉴 원형 버튼을 추가했는데 오토레이아웃 안에 포함되서 이미지와 텍스트 사이에 배치하는 것이 어렵네요, 제가 뭔가 잘못하고 있는 것 같은데 팁 부탁드립니다
이깍쟁님, 안녕하세요~ 이깍쟁님이 궁금한 점은 다른 분들도 왠지 궁금해 하실거 같네요~ 이 부분을 이미 알고 계시다면 그 분은 피그마 고수일거라 짐작되네요. ㅎㅎ 마침 다음 영상에 이 부분도 다뤄볼 예정이에요. 힌트는 frame입니다. 버튼 컴포넌트 영상에도 그 힌트가 숨겨져 있어요~(조금 다르지만) 말로만 설명 드리기 어려운 부분이라 다음 영상에서 설명 드릴게요 ! 시청해 주셔서 감사해요 😍
그때 그때 다른거 같아요. 순서의 차이~ 처음 부터 텍스트의 설정을 Auto width 가 아닌 auto height 로 하고 시작했거나 가로나 세로 사이즈를 임의로 변경하지 않았을 경우 설정 순서가 다른것처럼 마지막 셋팅이 무엇이었는 지에 따라 경우의 수가 천차 만별 다를 수 있어요. (저 영상의 경우 리사이징이 되지 않는 경우에 대한 해결방법을 알려드리리 위해 가로 사이즈를 변경해서 결과적으로 여러번 수정을 하게 된 거 같아요. 오토 레이아웃의 개념을 모를 경우 사실 더 수정 이슈가 자잘하게 발생하니다. ㅎㅎ ) 여러가지로 실험도 해보시고 시행착오를 겪어보며 오토 레이아웃을 마스터 해보세요~
영상 너무나도 잘 보았습니다ㅎ.ㅎ 피그마 초보자인데 정말 많은 도움이 되었어요. 진심으로 감사드립니다! 영상을 보며 한가지 궁금한 점이 생겼는데, 스페이스나 직접적인 텍스트 간격을 조정하여 배열이나 크기를 조절하지 않고, Resizing 의 Fill container 로 조정을 하는 이유는, 후에 자유롭게 Override를 하기 위함인가요?
네 맞아요~ 포토샵과 피그마의 큰 차이점 이기도 합니다. 오토 레이아웃 세팅 시엔 여러모로 고려해야 하는 부분이 있어서 그 과정에서 시행착오를 겼을 수 있지만 여러 예외 케이스를 고려해서(문장이 한 줄일 경우, 두 줄일 경우 등의 다양한 케이스)컴포넌트를 생성 시, 시안을 수정을 하는 수고를 덜 수 있고 작업 시간도 절약 할 수 있습니다. 이전 업데이트 영상인 ua-cam.com/video/WC9FhdOltA4/v-deo.html 을 보시면 그 차이를 아실 수 있을거에요~
안녕하세요 연정님! 수업보면서 피그마를 배워가고있습니다! 이런 강의를 유튜브에 올려주신 점 너무 감사하게 생각하고 거의 모든 영상을 정주행하고 있습니다! 다만 제작 중에 궁금한 점이 생겼는데요~! 예시로 들어주신 카드는 썸네일 이미지 사이즈의 세로 폭을 고정해두셨는데, 저는 정방형 썸네일로 제작하고 싶어서요~! 반응형으로 늘어나고 줄어들 때도 썸네일은 항상 정방형으로 늘어나도록 설정이 가능할까요,,? (가로 폭에 맞추어 세로도 자동으로 늘어났으면합니다..) 스케일로 해도, 필 컨테이너로해도 모두 실패해서 ㅜㅜ 2개월 전 영상이라 확인하실지는 모르겠지만요..! 결국 질문남겨둡니다..
@@yeonjung-figma 답변감사합니다!! 조언해주신 대로 해봤지만 잘 안되네용 ㅜㅜ 예시 영상에서 처럼 이미지에 선택 가능한 옵션이 fixed와 fill 만 있고 hug가 없네요.. ㅜㅜ 우선 여기저기 다 적용해보고 빼보고 하고있지만 여전히 가로만 늘어나고 세로는 자동으로 늘어나지는 않습니다 ㅜ
hug로 해서 정비율로 늘어나려면 이미지 자체가 정방형으로 늘어나는 옵션(?) 같은 게 있어야하지 않나 싶은데 피그마에는 가로만 잡고 늘렸을 때 세로도 같이 늘어나는 constraints 옵션이 없어서 아예 불가능한 것인가.. 싶어서 질문 드렸었습니다.. ㅜㅜ 여기저기 찾아봐도.. 썸네일만 정방형 유지하면서 늘어나게 하는 예시는 안보이네요 ㅜㅜ
연정님, 안녕하세요. 영상 잘 보고 있습니다~!피그마 작업 중에서 궁금한 부분이 있는데요. 같은 계정으로 다른 팀에 속한 라이브러리를 내부에 연결하여 사용 중이였는데요. 갑자기 라이브러리 목록에서 사라져버렸습니다. 왜그런지 알 수 있을까요? 팀2군데 모두 유료로 사용 중이였습니다ㅠㅠ
일시적인 오류가 아니라면 누군가가 해당 라이브러리를 unpublish 해서일거에요. 그 경우 라이브러리 목록에서 사라집니다. 다른팀의 기존 라이브러리 파일을 다시 publish 하면 보이실거요. (공유를 설정에서 중지 했을 수도 있고요) 일시적인 오류라면 피그마를 다시 실행해보시는걸 권장드려요.
최신 영상을 보시면 변경된 위치 확인이 가능해요~ 오토 레이아웃 기능이 최근에 리디자인 되서 위치가 변경되었습니다. (가로 세로 사이즈 조정하는 영역 밑으로) 피그마 강좌ㅣNew 오토 레이아웃 기본 익히기 #figma핵심기능 #Card컴포넌트 ua-cam.com/video/y-RnSm7VWVI/v-deo.html
만약 그 폰트를 컴퓨터에 설치했다면, 설치후 피그마를 다시 실행해야 그 폰트가 피그마 텍스트 패널에 표시돼요~ 이렇게 설치한 로컬 폰트를 피그마 앱이 아닌 웹 브라우저에서 작업하시려면 피그마 공식 사이트에서 폰트 인스톨러도 별도 설치가 필요해요~ (피그마 데스크톱 앱 다운로드 페이지에 있음) 참고 링크 : figma에서 Font Awesome Icon 사용하기 - designer-story.tistory.com/m/48
00:00 intro
00:24 웹상의 이미지 피그마에 붙여 넣기
00:52 Place Image 로컬 이미지 여러개를 피그마로 가져오는 방법
01:17 이미지 사이즈 조정
01:32 텍스트 입력
01:52 텍스트 복사 & 붙여넣기
02:15 오토 레이아웃 기능으로 텍스트 그룹핑
02:35 피그마의 레이어명 변경하기
02:52 텍스트 복제하기
03:00 객체간의 간격 확인하기
03:06 오토 레이아웃 설정 가이드
03:38 텍스트 스타일 수정하기
03:51 Uppercase 영문 텍스트 모두 대문자로 표기하는 설정
05:03 Auto Layout 단축키 Shift + A
05:49 텍스트를 프레임 기준으로 리사이징하는 방법 1
07:10 오토 레이아웃 프레임에 컬러 지정
07:23 오토 레이아웃 프레임의 여백 지정
07:57 텍스트를 프레임 기준으로 리사이징하는 방법 2
08:50 오토 레이아웃 프레임의 Corner Radius가 적용되지 않는 경우 해결 방법
09:45 이미지를 프레임 기준으로 리사이징하는 방법
10:01 Card 컴포넌트 생성하기
10:37 인스턴스가 아닌 컴포넌트를 수정해야하는 이유
10:50 인스턴스를 수정하는 방법 Override
11:37 다음 영상 예고
*연관 링크
* 투둠 : www.netflix.com/tudum
* 오토 레이아웃 기초 영상: ua-cam.com/video/sAvdvB0vXQg/v-deo.html
와..진짜 피그마는 개 쩌는 툴이야..
연정스 피그마 최고당❤
이정도 속도감으로 초보자 배려하면서 하는 곳은 여기 밖엥벗는듯
Xd랑 비슷하다생각햇는데 피그마는 너무너무 좋은기능이 많아서 좋기도하지만 다 익히는게 헷갈리네요..! 영상보고 열심히 해볼게요 감사합니다ㅜㅜ
이분 완벽하네..
설명잉너무 빠릅ㄴㄱ다
6:10쯤 프레임기준으로 리사이징할때 폰트를선택해도 리사이징이 안나오면 어디서봐야하나요? 프레임서보는건가유
디테일한 설명 감사합니다!
와 영상 보고 또 보고 ㅠㅠ 똑같이 따라하고 있다고 생각했는데 헷갈려서 지우고 다시하고 반복했어요 ㅠㅠ 그래도 나름 비슷한 결과물이 나왔슴다,, 감사합니다 연정님🥹❤️❤️
파이팅 !!
피그마 천재....... 만재.......
ㅇ
예제 하나 잡고 따라만들어 보니 더 좋네요! 좋은 강의 영상 감사합니다!
인스턴스에서 아무리 추가하려해도 안되길래 잘못한줄 알았는데 영상 보고 원래 안된다는거 알았습니다…. 정말 없는게 없는 연정님 강의 최고예요 👍🏾
오토레이아웃 옵션이 저렇게 안나오는데 버전문제일까요? 오토레이아웃하고 상하좌우 패딩 옵션이 없어요.....
기다렸어요!! 왤컴백 연정님 ㅎㅎ 오늘도 정성스런 강의 감서합니다
오랫만이네요~ 안식님 프로필 이미지 보고 저도 반갑더라구요 ㅎㅎ
개발자인데,, 이 영상을 보고 마음의 안식을 얻었습니다.. 왜 외주 디자이너들은 피그마를 제대로 사용하지 않는가...
정확하게 요소 분리하고, 가이드 라인이 명확하게 보이는 컴포넌트를 만드는걸 보니 너무 편안하네요.
같이 일하는 개발자들이 편안하겠습니다.ㅜㅜ
와~ 작업하면서 나는 이게왜 안되지 할수 있는 부분까지 넣어서 영상만들어 주셔서 감사합니다. 👍👍👍 큰 도움이 되었어요 ♥
👍👍👍
다음영상이 기대되어 잠이 안올 것 같아요ㅠㅠ 카드에 있는 아이콘이 오토레이아웃으로 인해 사이에 쏙들어가는게 어렵네요 강의 진짜 잘보고있어요! 감사합니다!
ㅎㅎ 주말에 제작할 예정이에요~ 다음주 화요일 ~수요일 쯤 업로드 하려고요~ 시청해주셔서 감사요🥰
@@yeonjung-figma 언제 업로드 되나요?ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ
연정님! 강의 너무 잘보고 있어요~
한가지 궁금한게 있는데요. line-height %로 정의해야하나요?
좋은 질문 감사합니다.
저는 %를 권장드려요. 퍼블리싱을 할때도 px 대신 %를 사용합니다. 보다 개발 친화적이고 유저 친화적인 방법입니다. (좀 더 상세한 방법은 구글 검색을 하시면 아주 자세히 나와 있습니다. 함께 참고해 주세요.)
한 예로
만약 폰트 크기가 16px일때 행간을 150% 대신 24px로 line-height로 정의를 했다고 가정을 했을 시, 폰트 크기를 18로 조정을 했을 경우, 행간이 글씨 크기 대비 작기 때문에 가독성이 떨어지게 됩니다. 이때 다시 행간을 조정해야 하는 경우가 발생해요. 만약 퍼센트로 정의 했더라면 불필요한 단계가 추가 되는 것이죠.
즉, 피그마나 퍼블리싱에서 px 단위 대신 퍼센트로 정의를 하는 이유는 상대값을 고려하고자 위함입니다. (폰트 대비 행간 크기)
@@yeonjung-figma 연정님! 강의 예제하고 있었는데 ~빠르게 궁금증을 해소해주셔서 너무 감사드려용. 항상 너무 잘 보고 있습니다. 😁👍🏼
크..감사해요!!!
독학으로 공부중인데 감사합니다 ♥♥
이전 영상도 잘 봤는데, 신규 영상 올라와서 반가워요! 차근차근 잘 알려주셔서 많은 도움이 되었습니다. 감사해요!
이번 영상 끝부분에 원형아이콘 추가하는 방법은 설명이 생략되었는데, 오토레이아웃 설정되어있는 프레임 위에 아이콘을 겹쳐서 올리는게 안돼서 끝까지는 못했어요ㅠㅠ.. 오토레이아웃에서 컨텐츠를 겹치는건 어떻게 하나요?
ㅎㅎ 다음 영상에서 알려드릴 예정입니다. 힌트는 # frame입니다.
@@yeonjung-figma 앗 역시, 못할걸 알고계셨군요ㅎㅎ 기다릴게요❣️
@@DerSpaziergang 목이 아파서 다음편 녹화를 못하고 있네요~ 목이 다 나으면 빠른 시일내에 업데이트 할게요!! 시청해주셔서 감사합니다 😍
꿀팁 영상들 감사합니다~! 항상 잘 보고 있어요^^
강의 너무 좋네요 하나하나 따라하면서 감탄했어요 (피그마의 기능과 깔끔한 설명에...) 도움 크게 받고 갑니다!!!!
uxui공부해야 될 부분만 꼭 찝어서 가르쳐 주셔서 너무 감사하게 듣고 있습니다. 연정님 수업듣고 동영상 주제별 키워드로 정보 찾아서 다시 공부하는 패턴으로 공부하고 있습니다. 바쁘실텐데 따로 시간내어서 이런 소중한 내용 만들어주셔서 너무 고맙습니다.
감사 및 문의 댓글 또는 좋아요가 항상 저에게 다음 영상을 만들게 하는 원동력이 됩니다. 감사해요~🥰
혹시 text를 선택했는데 우측에 text패널이 보이지 않는다면 이건 어떤 경우인가요? ㅜㅜ
상위 패널이 디자인 패널이 선택되어 있나요?
피그마... 정말 두렵네요
쉬운 접근성에 압도적 퍼포먼스 XD가 아니라 피그마 써야겠네요 이젠
잘봤습니다! 감사해요!!!
🥰
와 정말 대박이에요~ 이전에 올려주신거 다 볼 예정이지만 빨리 2022 버전 동영상이 업데이트 되면 좋겠네요 😁
말씀하시는 속도가 적당해서 배속 없이 보기 좋아요.
하나하나 초보자가 처음 작업한다고 생각하고 나올 수 있는 문제 상황에 대한 대처법을 알 수 있어서 너무 좋아요. 그러면서 자연스럽게 기능도 익히게 되구요.
확실히 피그마가 UI 디자인 툴이라 그런지 논리적인 방식의 디자인이 가능하네요.
포토샵처럼 붕 떠있는 레이어을 그냥 픽셀 단위로 배치하는게 아니라 HTML, CSS 퍼블리싱 하듯 디자인 할 수 있다는게 굉장히 접근하기 쉬워보여요. 앞으로도 열공하겠습니다
ㅎㅎ 컴포넌트 기능은 코딩을 아시는 분들이 보시면 굉장히 재미있을 거에요 ㅎㅎ 정말이지 개발에 최적화된 툴이죠!!
안녕하세요!
유튜브에서 마땅한 피그마 강의가 없어서 답답했었는데 정말 잘 가르쳐 주시는 것 같아요~
강의보면서 따라하고 있는데 리사이징패널이 안나오네요.. 왜 이런걸까요
좋은 강의 감사합니다!
오른쪽 패널 상단에 가로 사이즈 세로 사이즈 밑에 있어요!
피그마 처음 시작하려고하는데 재생목록 처음에 있어서 이거 처음으로 들을라고 하는데요. 예시는 어떻게 끌어와요...? 다른강좌부터 들어야하나요?
2022 온보딩 영상부터 시작하시는 거 추천 드려요. 샘플은 제공하지 않아요.
연정님 항상 영상 감사합니다! 오늘도 유익한 내용이었어요! 😭💚 너무 감사함당
댓글 감사요 🥰😍
연정님 감사합니다.
덕분에 피그마 하나씩 배워가고 있네요. 빨리 포토샵만큼 익숙해지기를..
한가지 여쭐께요,, 마지막에 검은색 메뉴 원형 버튼을 추가했는데 오토레이아웃 안에 포함되서 이미지와 텍스트 사이에 배치하는 것이 어렵네요,
제가 뭔가 잘못하고 있는 것 같은데 팁 부탁드립니다
최근 업데이트된 New 오토 레이아웃 영상을 보시면 그 답을 얻으실 수 있어요. 여러 방법이 있지만 absolute position 이란 기능을 활용하시면 보다 더 쉽게 배치가 가능합니다.
앱솔루트 포지션- ! ㅎㅎ 확인했습니닷 ㅎ
감사합니다!
안녕하세요 연정님..!
보면서 피그마 공부하고있는데, 마스터컴포넌트를 해제하는 방법은 없을까요??
안녕하세요~ 메인 컴포넌트를 해제 하는 방법은 없어요(삭제 외엔) / 삭제해도 인스턴스가 남아 있으면 복구 가능합니다.
*인스턴스랑 메인 컴포넌트랑 연결을 해제하는 방법 : 마우스 우클릭 > detach instance
네 ㅜ 구글링해도 없길래 혹시하고 여쭤봤는데 역시 없군요 ㅠ 흑답변 감사합니다!
우와!
연정님, 안녕하세요,. 항상잘보고 있습니다. 영상보고 작업하다가 궁금한점이 있는데 아이콘은 오토레이이아웃 정렬때문에 카드컴포넌트위쪽으로 정렬이 안되네요..ㅠㅠ 이럴경우 카드컴포넌트 외 추가요소로 아이콘작업을 해야하는걸까요?
이깍쟁님, 안녕하세요~ 이깍쟁님이 궁금한 점은 다른 분들도 왠지 궁금해 하실거 같네요~ 이 부분을 이미 알고 계시다면 그 분은 피그마 고수일거라 짐작되네요. ㅎㅎ 마침 다음 영상에 이 부분도 다뤄볼 예정이에요. 힌트는 frame입니다. 버튼 컴포넌트 영상에도 그 힌트가 숨겨져 있어요~(조금 다르지만) 말로만 설명 드리기 어려운 부분이라 다음 영상에서 설명 드릴게요 ! 시청해 주셔서 감사해요 😍
영상처럼 card원본 자료는 어디서 얻나요??
해당 영상은 제공되는 자료가 없습니다😅
감사합니다 잘 보고 따라하였습니다. 근데 오토레이아웃(기존-자식이될)에 오토레이웃(부모)을 설정할 때마다 계속 설정이 바뀌는 걸까요?
그때 그때 다른거 같아요. 순서의 차이~ 처음 부터 텍스트의 설정을 Auto width 가 아닌 auto height 로 하고 시작했거나 가로나 세로 사이즈를 임의로 변경하지 않았을 경우 설정 순서가 다른것처럼 마지막 셋팅이 무엇이었는 지에 따라 경우의 수가 천차 만별 다를 수 있어요. (저 영상의 경우 리사이징이 되지 않는 경우에 대한 해결방법을 알려드리리 위해 가로 사이즈를 변경해서 결과적으로 여러번 수정을 하게 된 거 같아요. 오토 레이아웃의 개념을 모를 경우 사실 더 수정 이슈가 자잘하게 발생하니다. ㅎㅎ )
여러가지로 실험도 해보시고 시행착오를 겪어보며 오토 레이아웃을 마스터 해보세요~
@@yeonjung-figma 네네 이것저것 해봐야겠어요 답변 갑사합니다
영상 너무나도 잘 보았습니다ㅎ.ㅎ 피그마 초보자인데 정말 많은 도움이 되었어요. 진심으로 감사드립니다!
영상을 보며 한가지 궁금한 점이 생겼는데, 스페이스나 직접적인 텍스트 간격을 조정하여 배열이나 크기를 조절하지 않고, Resizing 의 Fill container 로 조정을 하는 이유는, 후에 자유롭게 Override를 하기 위함인가요?
네 맞아요~
포토샵과 피그마의 큰 차이점 이기도 합니다.
오토 레이아웃 세팅 시엔 여러모로 고려해야 하는 부분이 있어서 그 과정에서 시행착오를 겼을 수 있지만 여러 예외 케이스를 고려해서(문장이 한 줄일 경우, 두 줄일 경우 등의 다양한 케이스)컴포넌트를 생성 시, 시안을 수정을 하는 수고를 덜 수 있고 작업 시간도 절약 할 수 있습니다. 이전 업데이트 영상인 ua-cam.com/video/WC9FhdOltA4/v-deo.html 을 보시면 그 차이를 아실 수 있을거에요~
연정님 맨 마지막에 검정색 아이콘 위로 올리고싶은데... 오토레이아웃 때문에 위에 안올라가고 상단이미지/하얀색 텍스트 박스랑 분리된 상태로 들어가는데 어떻게 올리는건가요?
저는 리사이징 이 안되는데요, 그 리사이징 패널도 안나오는 것 같고 아예 리사이징이라는 메뉴 자체를 못찾겠습니다. 혹시 개인용 무료에는 제공되지 않는지요? 오늘도 좋은 영상으로 공부잘 했습니다. 피그마 쉽지 않네요. ㅎㅎ 감사합니다. 선생님.
리사이징 옵션 위치가 사이즈 변경 위치로 최근에 이동이 되었어요~ 최근 업데이트 영상 New 오토 레이아웃 영상 참고하시면 확인이 가능해요~
이렇게 실습으로 따라해보니까 더 쉽게 감이 잡혀서 좋네요~ 꼼꼼한 강의 감사해요! 더 많이 올려주세요!!
안녕하세요 연정님! 수업보면서 피그마를 배워가고있습니다! 이런 강의를 유튜브에 올려주신 점 너무 감사하게 생각하고 거의 모든 영상을 정주행하고 있습니다!
다만 제작 중에 궁금한 점이 생겼는데요~! 예시로 들어주신 카드는 썸네일 이미지 사이즈의 세로 폭을 고정해두셨는데, 저는 정방형 썸네일로 제작하고 싶어서요~!
반응형으로 늘어나고 줄어들 때도 썸네일은 항상 정방형으로 늘어나도록 설정이 가능할까요,,? (가로 폭에 맞추어 세로도 자동으로 늘어났으면합니다..)
스케일로 해도, 필 컨테이너로해도 모두 실패해서 ㅜㅜ 2개월 전 영상이라 확인하실지는 모르겠지만요..! 결국 질문남겨둡니다..
안녕하세요~ 세로 리사이즈 옵션을 fixed가 아닌 hug content로 하시면 돼요~ ✨
@@yeonjung-figma 답변감사합니다!!
조언해주신 대로 해봤지만 잘 안되네용 ㅜㅜ
예시 영상에서 처럼 이미지에 선택 가능한 옵션이 fixed와 fill 만 있고 hug가 없네요.. ㅜㅜ 우선 여기저기 다 적용해보고 빼보고 하고있지만 여전히 가로만 늘어나고 세로는 자동으로 늘어나지는 않습니다 ㅜ
hug로 해서 정비율로 늘어나려면 이미지 자체가 정방형으로 늘어나는 옵션(?) 같은 게 있어야하지 않나 싶은데 피그마에는 가로만 잡고 늘렸을 때 세로도 같이 늘어나는 constraints 옵션이 없어서 아예 불가능한 것인가.. 싶어서 질문 드렸었습니다.. ㅜㅜ
여기저기 찾아봐도.. 썸네일만 정방형 유지하면서 늘어나게 하는 예시는 안보이네요 ㅜㅜ
6:21 리사이징
혹시 수업에 진행되는 피그마 파일은 커뮤니티에서 받을 수 있는건가요? ?
아니요. 제공하지 않는 파일입니다.
@@yeonjung-figma 감사합니다! 좋은 강의 덕분에 이 시간까지 공부 할 수 있어서요 😆
연정님, 안녕하세요. 영상 잘 보고 있습니다~!피그마 작업 중에서 궁금한 부분이 있는데요.
같은 계정으로 다른 팀에 속한 라이브러리를 내부에 연결하여 사용 중이였는데요. 갑자기 라이브러리 목록에서 사라져버렸습니다. 왜그런지 알 수 있을까요? 팀2군데 모두 유료로 사용 중이였습니다ㅠㅠ
일시적인 오류가 아니라면 누군가가 해당 라이브러리를 unpublish 해서일거에요. 그 경우 라이브러리 목록에서 사라집니다. 다른팀의 기존 라이브러리 파일을 다시 publish 하면 보이실거요. (공유를 설정에서 중지 했을 수도 있고요)
일시적인 오류라면 피그마를 다시 실행해보시는걸 권장드려요.
@@yeonjung-figma 답변 감사합니다ㅠㅠ 공유를 설정에서 중지하는 권한은 누가 갖을수 있을까요?
피그마 재설치 해도 해결이 안되며 pulishing은 되어 있어서요
제화면에서는 리사이징이 보이지 않는데 어떻게 해야될까요?ㅠㅠㅠ
최신 영상을 보시면 변경된 위치 확인이 가능해요~ 오토 레이아웃 기능이 최근에 리디자인 되서 위치가 변경되었습니다. (가로 세로 사이즈 조정하는 영역 밑으로)
피그마 강좌ㅣNew 오토 레이아웃 기본 익히기 #figma핵심기능 #Card컴포넌트
ua-cam.com/video/y-RnSm7VWVI/v-deo.html
06:09 저는 Resizing 영역이 없는데 왜 그럴까요ㅠ
5/11 이후 위치가 변경되었어요~ size 조정하는 영역 근처로 이동 되었습니다. 최신 오토 레이아웃 영상을 참고해주세요~
연정 님 혹시 텍스트 종류 없는게 있어서 다운받아서 쓸 수 있는 방법 있을까요 ㅠㅠㅠ....
폰트는 검색하시면 무료로 받으실 수 있어요~
@@yeonjung-figma 커뮤니티에서 검색해서 받았는데 새파일에서 텍스트로 쓰면 리스트에 안나와서요 ㅠㅠㅠ...
만약 그 폰트를 컴퓨터에 설치했다면, 설치후 피그마를 다시 실행해야 그 폰트가 피그마 텍스트 패널에 표시돼요~ 이렇게 설치한 로컬 폰트를 피그마 앱이 아닌 웹 브라우저에서 작업하시려면 피그마 공식 사이트에서 폰트 인스톨러도 별도 설치가 필요해요~ (피그마 데스크톱 앱 다운로드 페이지에 있음)
참고 링크 : figma에서 Font Awesome Icon 사용하기 - designer-story.tistory.com/m/48
@@yeonjung-figma 감사합니다~~