연정님이 마지막에 X, Y 축을 변경하신 것이 제 화면상에는 그렇게 구현이 되진 않았습니다. 그래서 저는 Absoultion Postion 기능이 Frame란에 있길래 그걸로 X,Y축을 옮기게 되었는데요. 아직 저도 잘 모르고 연정님때매 많은 도움을 얻고 있습니다만, 저 처럼 새싹 피그마들에게는 이런 경로로 해결 했단걸 알아주시면 좋을 것 같습니다. 혹여 이게 나중에 발등을 잡을 지 모르니.. 한번 점검을 해주십사 하는 겁니다..^^ 늘 좋은 강의 감사드립니다. 유료로 내라해도 할말이 없습니다 ^^
@@yeonjung-figma 아 그렇습니까, 새벽에 댓글을 보았을 때 흐릿해서그런건지.. 연정님 강의에서 있으셨던 기능 중 하나를 제가 배웠다가 깜빡잊어서 다시 지적받는줄 알았는데,,, 음.. 이거 아이러니하게 기쁘군요(?) 제가 이해한게 맞길 바랍니다. ㅋㅋ 무튼 강의 잘보고 있습니다. 모두 정독하고나서 하나하나 제게 필요한거 빼서 보고있습니다.. : ) 디자인과 학생인데 많은 도움이 됩니다.
[목차] 00:00 5/11 Keynote 발표 - 리디자인된 Auto Layout 기능 #figma_config2022 00:51 Intro 01:25 피그마 아이콘 플러그인 설치 02:04 피그마 Material Symbols 플러그인 실행 02:22 피그마에서 더미 아이콘 컴포넌트 생성하는 방법 05:52 Frame 리사이징 옵션 Constraints 07:04 오토 레이아웃 프레임 위에 아이콘을 겹쳐서 올리는 방법 07:27 오토 레이아웃 내 객체 이동 07:37 Frame Selection 08:00 피그마에서 프레임의 높이를 0으로 정의하는 방법 06:38 피그마 coner radius 999 09:06 🥹 Outro
기본 개념으로는 frame = 틀, 뼈대, 레이아웃 (Html 로 비유하면 div 태그에 해당) 입니다. 한편으로 피그마에서 프로토타입핑을 만들때 한 장면을 구분하는 요소가 되기도 하는데요. 상황에 따라 사실 복합적인 기능을 가진 피그마의 가장 기본이 되는 툴입니다. 밥 먹는 것을 비유하면 밥을 기본적으로 그릇에 담아 먹는다고 정의 할때, 밥은 아이콘과 같은 요소, 그릇이 프레임에 해당됩니다. ㅎㅎ 규격이 일정하지 않은 아이콘 요소들을 시스템 아이콘의 기본 사이즈인 24*24 frame에 담아 일정한 사이즈로 관리를 할 수 있는 것이죠. 조금이라도 이해하는데 도움이 될까하여 생각나는데로 코멘트 드립니다. ㅎㅎ
t : 텍스트추가 f : 프레임추가 도형탭 > place image > shift + 이미지 선택 : 이미지 원하는 곳에 넣기 shift : 이미지 비율유지 사이즈 조절 shift cmd v : 스타일 유지 붙여넣기 cmd R : 프레임 이름 변경 alt 마우스hover : 간격 보기 cmd D : 복사 & 붙여넣기 shift A : 오토레이아웃👍 radius 값 적용 안될때 > clip content 체크 되어있는지 확인 resizing > fill container : 프레임에 맞춰서 리사이징 상단 create component > shift option : 인스턴스컴포넌트로 복제
요즘은 개발자도 피그마 필수 시대죠! 제꺼 보고 공부하라 권하세요 ㅎㅎ(이건 농담 이구요) 사실 디자이너 하기 나름인거 같고요. ex. 개발자가 알아보기 쉽게, 이미지 한꺼번에 export 가능하도록 가이드 드리는 것, 컴포넌트 및 이미지 네이밍 규칙도 일관성이 있어야 하죠. 컬러 및 텍스트 스타일이 모두 토큰화되서 시안에 연결이 되어 있어야 합니다. 저는 회사 입사자 분들에게는 요청하시는 분들만 온보딩 드리고있고여. 기본적인 가이드는 문서화해서 공유하고 있습니다. 플랫폼이 웹이냐 앱이냐에 따라 차이도 있는 거 같습니다. 먼저 개발자에게 물어보는 걸 추천 드려요. 요구사항이 다 다르더라구요 ㅎ
@@songs-296 온보딩 문서는 컨풀르언스에 상시로 업데이트 하고 있어요.(자주 묻는 질문 Q&A 식으로 심플하게 문서화 했어요). 즉 수단은 정하기 나름인거 같고요 정답은 없습니다. 다만 보는 사람입장에서 알아보기 쉬운 문서여야 하기 때문에 개발자와의 소통이 필요해요. 그외 스타일 가이드 문서라고 검색하시면 도움이 될만한 레퍼런스 찾으실 수 있을 거에요. 대신 디자이너의 손이 많이 가는 작업이죠. 피그마로 개발자와 협업하기 #inspect패널 #codeView - designer-story.tistory.com/m/46 참고가 되었으면 좋겠네요.
마지막에 프레임 안에 아이콘을 넣고서 위치를 조정할 때 Frame Selection을 하게 된 아이디어를 어떻게 떠올린건지 궁금합니다! 컴포넌트는 그 자체가 파일이라 x y 축이라 이동을 못시키는데 프레임은 그 안의 에셋들을 x y 변경이 가능해서 그런걸까요?? 제가 이제 막 피그마를 입문하느라 프레임, 컴포넌트 각각의 특성부터 공부해봐야겠네요.
과거 html, css 퍼블리싱을 했던 경험때문이기도 해요~ (x, y 좌표 position > 절대값 absolute, 상대값 relative에 대한 개념) 무엇보다도 피그마가 개발 친화적이기 때문이기도 하고요~ 퍼블리싱 기초의 대한 이해도 도움이 되실거에요. 이번에 리디자인된 된 오토 레이아웃 버전부터는 더 간단하게 오토레이아웃 내에 객체에 대한 배치가 더 쉬워졌더라구요. 다음 영상에서 그 부분을 다뤄볼 예정입니다.
![[강의 소개] 디자인 시스템 with 피그마, Figma Tokens Plugin | 인프런 | 미리보기 | Figma](http://i.ytimg.com/vi/A3S-fStYYSM/mqdefault.jpg)
연정님이 마지막에 X, Y 축을 변경하신 것이 제 화면상에는 그렇게 구현이 되진 않았습니다.
그래서 저는 Absoultion Postion 기능이 Frame란에 있길래 그걸로 X,Y축을 옮기게 되었는데요.
아직 저도 잘 모르고 연정님때매 많은 도움을 얻고 있습니다만, 저 처럼 새싹 피그마들에게는 이런 경로로 해결 했단걸 알아주시면 좋을 것 같습니다.
혹여 이게 나중에 발등을 잡을 지 모르니.. 한번 점검을 해주십사 하는 겁니다..^^
늘 좋은 강의 감사드립니다.
유료로 내라해도 할말이 없습니다 ^^
absolute 포지션 기능은 이 영상이 제작된 이후에 업데이트된 기능입니다. 스스로 찾아서 방법을 찾으셨다니 기쁘네요.
@@yeonjung-figma 아 그렇습니까, 새벽에 댓글을 보았을 때 흐릿해서그런건지..
연정님 강의에서 있으셨던 기능 중 하나를 제가 배웠다가 깜빡잊어서 다시 지적받는줄 알았는데,,,
음.. 이거 아이러니하게 기쁘군요(?) 제가 이해한게 맞길 바랍니다. ㅋㅋ
무튼 강의 잘보고 있습니다. 모두 정독하고나서 하나하나 제게 필요한거 빼서 보고있습니다.. : )
디자인과 학생인데 많은 도움이 됩니다.
정말 너무 좋은 영상... 정말 유익하네요!! 실무를 많이 하셔서 그런지 정말 필요하고 궁금했던 부분을 많이 강의해주셔서 계속 기대가 됩니다. 좋은 영상 정말 감사드립니다.
다른 강의 여러개 듣고 모자라서 또 듣는 중이에요ㅠㅠ 소금과 빛같은 강의 감사합니다
xd, 스케치에 이어 뒤늦게 피그마를 접하게 된 학생입니다. 독학으로 피그마 공부하고 있는데 연정님의 강의가 정말 제겐 큰 도움이 되고 있습니다. 정말 필요한 강의 만들어 주셔서 감사합니다.
[목차]
00:00 5/11 Keynote 발표 - 리디자인된 Auto Layout 기능 #figma_config2022
00:51 Intro
01:25 피그마 아이콘 플러그인 설치
02:04 피그마 Material Symbols 플러그인 실행
02:22 피그마에서 더미 아이콘 컴포넌트 생성하는 방법
05:52 Frame 리사이징 옵션 Constraints
07:04 오토 레이아웃 프레임 위에 아이콘을 겹쳐서 올리는 방법
07:27 오토 레이아웃 내 객체 이동
07:37 Frame Selection
08:00 피그마에서 프레임의 높이를 0으로 정의하는 방법
06:38 피그마 coner radius 999
09:06 🥹 Outro
저도 매번 감사합니다! 좋은 강의 영상 볼 수 있어서 행운이에요!😍
플레이, 스탑, 플레이, 스탑 하면서 열심히 따라 하고 있습니다! 정말 좋은 강의 감사합니다.
감사해요
이번에도 보고 또 봤지만 그래도 잘 만들게 되었어요!! 정말 감사합니다 연정님🥰🥰
연정님~! 5:03분에 notes 아이콘 인스턴스를 frame selection으로 선택하는 이유가 무엇인가요?? 인스턴스에 배경 칠하는 것이랑 프레임으로 감싸서 배경 칠하는 것 차이가 있는 것인가요?? ㅜ.ㅜ
항상 감사드려요! ❤💚💙💜🤍👏🏻👍🏻
개발자인데 디자인 공부하고 있어요 ㅎㅎ 도움이 많이 됩니다 ㅎㅎ
너무너무 X10000000 기다렸던 영상입니다.^0^ 프레임을 활용하여 만들다니..프레임으로 만든후의 과정도 연정님의 영상이 아니였으면 생각도 못했을꺼에요,, ㅜㅜ 실무자들에게 정말 찐!으로 도움되는 영상이였습니다. 너무감사합니다 쵝오❤️ 피그마 컨피그때 업데이트된 내용들도 함다뤄주시면 너무좋을것같아요 ㅋㅋㅋ >_< 여튼 실무하시느랴 영상올리시느랴 바쁘실텐데 감사합니다~ 시간이 오래걸린다해도 연정님의 영상 항상 기다리고있겠습니다 ~ 좋은하루되세요~~
덕분에 힘이 나네요 ㅎㅎ 영상 시청해 주셔서 감사합니다!
연정님 덕분에 피그마를 하나하나 잘 배워가고 있습니다 :-)) 감사합니다! 이 분야에 대해 알고 있는게 없어서 왜 프레임을 만드는지는 알 수가 없으나 하나하나 따라 해볼게요 :-)) 감사해요!
기본 개념으로는 frame = 틀, 뼈대, 레이아웃 (Html 로 비유하면 div 태그에 해당) 입니다. 한편으로 피그마에서 프로토타입핑을 만들때 한 장면을 구분하는 요소가 되기도 하는데요. 상황에 따라 사실 복합적인 기능을 가진 피그마의 가장 기본이 되는 툴입니다.
밥 먹는 것을 비유하면 밥을 기본적으로 그릇에 담아 먹는다고 정의 할때, 밥은 아이콘과 같은 요소, 그릇이 프레임에 해당됩니다. ㅎㅎ
규격이 일정하지 않은 아이콘 요소들을 시스템 아이콘의 기본 사이즈인 24*24 frame에 담아 일정한 사이즈로 관리를 할 수 있는 것이죠.
조금이라도 이해하는데 도움이 될까하여 생각나는데로 코멘트 드립니다. ㅎㅎ
좋은 강의 감사드립니다!!
t : 텍스트추가
f : 프레임추가
도형탭 > place image > shift + 이미지 선택 : 이미지 원하는 곳에 넣기
shift : 이미지 비율유지 사이즈 조절
shift cmd v : 스타일 유지 붙여넣기
cmd R : 프레임 이름 변경
alt 마우스hover : 간격 보기
cmd D : 복사 & 붙여넣기
shift A : 오토레이아웃👍
radius 값 적용 안될때 > clip content 체크 되어있는지 확인
resizing > fill container : 프레임에 맞춰서 리사이징
상단 create component > shift option : 인스턴스컴포넌트로 복제
오토 레이아웃 프레임 위에 아이콘을 겹쳐서 올리는 방법 !
5분 57초에 까만 배경 사이즈가 24에서 32로 늘었는데.. 32로 늘리려면 어디서 하는건가요?
5:55 이 다음화면에서 어떻게 갑자기 사이즈가 24에서 32로 늘어났나요? 박스크기를 32로 키우면 안에 아이콘도 같이 늘어납니다. 패딩값을 따로 준것 같지는 않은데 .. notes아이콘 사이즈는 그대로 유지한채 icon_box크기만 32로 늘리는 방법이 궁금합니다
frame의 constraints 속성 옵션(scale이 아닌 center, center) 때문입니다. 영상에 해당 부분 설명에 나와 있으니 혹시 놓친 부분이라면 참고해주세요.
@@yeonjung-figma 네 순서의 문제였습니다 먼저 센터로 바꾸고 크기를 늘린다음에 변경하니까 되더라고요
영상에서는 그부분이 안나와있고 바로 사이즈가 커저있어서 저처럼 의아하신분들이 있는것 같아요
7:52 여기서 아이콘을 한번더 프레임으로 감싸주는 이유는 무엇인가요?😢
다른 댓글에도 언급한 부분인데요, 이 영상 이후 업데이트된 피그마의 오토레이아웃의 abosolute position 기늘을 사용하시면 한번 거 프레임을 감싸지 않아도 됩니다~ 당시엔 그 방법이 유일했었어여.
마지막 부분 쯤에서 icon을 component에 적용한 뒤 instance에도 적용이 되었는데, icon에도 rescaling효과가 적용이 되어 카드의 크기가 변경될 때마다 icon의 위치가 바뀝니다. icon의 위치를 고정시키는 방법은 어떻게 해야되는건가요?
해당 화면을 캡처해서 봐야 확실히 알 수 있을 듯한데, 아이콘의 constraints 설정 옵션에 의한 현상이라고 추측이 되네요. 08:52
icon wrap은 왜 추가하나요? 또한 icon box 상태에서 Absoultion Postion로 위치 잡아주는 것은 안되나요?
넵 맞아요.😀 absolute position 기능은 당시 없던 기능이에요. 그 당시 대안입니다.
@@yeonjung-figma 그럼 absolute position 이 기능을 쓴다면 icon wrap을 할 필요도 없는거 맞나요?!
왜 똑같이 따라해도 아이콘 모양이 다르게 나올까요 ㅠ
저는 notes 3줄이 연정님보다 프레임 공간을 더 차지해요 ...
🥲
혹시 저와 같은 이유라면.. notes의 constraints를 센터로 바꾸시고 아이콘박스의 크기를 32로 변경하세요. 그다음에 다시 scale로 바꾸시면 아이콘 사이즈는 그대로 유지됩니다.
안녕하세요 연정님! 저는 Install이 아니라 Try it out으로 뜨는데요..! 이게 제가 유료 버전이 아닌 무료 버전으로 사용하고 있어서 그런걸까요?ㅠㅠ
최근에 방식이 변경이 되어서 그래요~ 현 버전 기준 정상입니다.
@@yeonjung-figma 아 그렇군요 답변 감사합니다..!! 혹시 하나만 더 여쭤봐도 될까요!! Unsplash에 나와있는 이미지들은 제가 그 이미지를 팔게 아니라 단순 웹사이트 제작에 갖다쓰는 용도라면 써도 되는 것일까요??
@@dope_thatsme 언스플래쉬의 이미지들은 대부분 무료입니다~ 다만, 이미지 별 저작권 안내(제한 사항)는 사이트를 참고하시길 권장드려요~ 구글에 플러그인과 동일한 스펠링으로 검색하시면 웹 서비스로도 이용가능합니다.
아이콘이 카드에 안들어가는데 왜 일까요 ㅠㅠ
혹시 인스턴스에 넣으셨나요?
@@yeonjung-figma 넵 ㅠㅠ 다시 해볼게요~!
피그마를 사용하지 않는 개발자에게 제 디자인을 넘겨주는 방법.. 모든 익스포트 방법에 대해 궁금합니다.
요즘은 개발자도 피그마 필수 시대죠! 제꺼 보고 공부하라 권하세요 ㅎㅎ(이건 농담 이구요)
사실 디자이너 하기 나름인거 같고요.
ex. 개발자가 알아보기 쉽게, 이미지 한꺼번에 export 가능하도록 가이드 드리는 것, 컴포넌트 및 이미지 네이밍 규칙도 일관성이 있어야 하죠. 컬러 및 텍스트 스타일이 모두 토큰화되서 시안에 연결이 되어 있어야 합니다.
저는 회사 입사자 분들에게는 요청하시는 분들만 온보딩 드리고있고여. 기본적인 가이드는 문서화해서 공유하고 있습니다.
플랫폼이 웹이냐 앱이냐에 따라 차이도 있는 거 같습니다. 먼저 개발자에게 물어보는 걸 추천 드려요. 요구사항이 다 다르더라구요 ㅎ
@@yeonjung-figma 가이드를 문서화해서 공유한다는게 워드나 ppt파일에 이미지캡쳐해서 붙여넣고 설명써서 공유한다는 뜻인가요? ㅜ
편집디자이너로 십수년 일하다 웹디자인으로 전향하려하는데 너무 초보티 내기도싫고..연정님 강의들으면서 많이 배우고 준비중입니다. 질문이 넘 기초가 안돼있어서 죄송해요ㅜ
@@songs-296 온보딩 문서는 컨풀르언스에 상시로 업데이트 하고 있어요.(자주 묻는 질문 Q&A 식으로 심플하게 문서화 했어요). 즉 수단은 정하기 나름인거 같고요 정답은 없습니다. 다만 보는 사람입장에서 알아보기 쉬운 문서여야 하기 때문에 개발자와의 소통이 필요해요. 그외 스타일 가이드 문서라고 검색하시면 도움이 될만한 레퍼런스 찾으실 수 있을 거에요. 대신 디자이너의 손이 많이 가는 작업이죠.
피그마로 개발자와 협업하기 #inspect패널 #codeView - designer-story.tistory.com/m/46 참고가 되었으면 좋겠네요.
@@yeonjung-figma 😲 정말 감사합니다!!!
마지막에 프레임 안에 아이콘을 넣고서 위치를 조정할 때 Frame Selection을 하게 된 아이디어를 어떻게 떠올린건지 궁금합니다!
컴포넌트는 그 자체가 파일이라 x y 축이라 이동을 못시키는데 프레임은 그 안의 에셋들을 x y 변경이 가능해서 그런걸까요??
제가 이제 막 피그마를 입문하느라 프레임, 컴포넌트 각각의 특성부터 공부해봐야겠네요.
과거 html, css 퍼블리싱을 했던 경험때문이기도 해요~ (x, y 좌표 position > 절대값 absolute, 상대값 relative에 대한 개념) 무엇보다도 피그마가 개발 친화적이기 때문이기도 하고요~ 퍼블리싱 기초의 대한 이해도 도움이 되실거에요. 이번에 리디자인된 된 오토 레이아웃 버전부터는 더 간단하게 오토레이아웃 내에 객체에 대한 배치가 더 쉬워졌더라구요. 다음 영상에서 그 부분을 다뤄볼 예정입니다.
@@yeonjung-figma 오오 그렇군요! 답변해주셔서 감사드립니다.