Auto Layout 기능 및 디자인 시스템으로 로그인 화면구성하기 #figma #properties #디자인시스템 #autolayout #variables #반응형UI [목차] 재생시간 20분 00:00 Intro 00:24 작업 환경 설정 02:16 오토 레이아웃의 리사이징 옵션 3가지 05:59 컴포넌트 속성 편집 'Properties, Nested Instance' 08:07 피그마 컴포넌트 Properties의 역할 10:50 Absolute Position 17:14 Min Width, Max Width 17:48 Wrap 기능 *** 영상 주요내용 *** 1. 반응형 레이아웃 제작을 위한 Auto Layout 기능 및 디자인 시스템 활용 2. 2023 Auto Layout 신규 기능 소개 및 실습 3. 피그마 컴포넌트 Properties 사용사례 소개 ** Auto Layout 기능 및 디자인 시스템 활용하여 개발 친화적인 UI를 제작하는데 도움이 되는 영상입니다. [강의자료] figma Community @@yeonjung * 피그마 파일 링크: www.figma.com/community/file/1260476622953189095 ✅ 아래 사항에 대해 정정합니다. 17:00 absolute position 테스트 시 contents layer 에 max-width(400) 값이 들어간 상태로 테스트가 되었네요.😢 → contents 영역이 좌우 마진 24가 유지된 상태로 반응형이 되어야 합니다.
연정님 안녕하세요! 늘 좋은 강의 감사히 잘 보고 있습니다! 진심으로 감사드립니다. 연정님께서는 앱 혹은 웹 디자인 하실 때 모든 요소들을 오토레이아웃으로 묶으시는지 궁금해요! 아니면 프레임위에 필요한 것들만 묶어서 배치하시는지 궁금합니다. 각각 장단이 있는것 같은데, 보통 어떻게 하시는지 공유해주실 수 있으실까요 👀💙 + 만약 프레임에다가 필요한 부분만 오토레이아웃걸어서 올리는 경우 묶여있지 않은 부분들의 spacing은 어떻게 일정하게 조절하시는지도,,궁금합니다..!
안녕하세요. 좋은 질문 감사합니다. 영상에 사용된 예제파일에 알 수 있듯이 저는 95프로 이상을 오토레이아웃을 사용해여. 오토레이아웃 대신 일반 프레임만을 사용하는 경우는 아이콘 컴포넌트 생성 시나 고정된 사이즈 안에서 화면 구성(ex. ppt)을 하는 경우 등 극히 드물어요. group 기능(cmd+g)도 레이아웃 안에서는 거의 사용하지 않아요. 오토레이아웃의 장점은 수정이 용이하고 반응형 UI 제작이 가능한 점. 그리고 무엇보다도 개발친화적인 부분이 매력이죠. 프레임이나 그룹은 그 반대라고 할 수 있어요. (일부 경우 제외) 개발자에게 전달할 UI 시안 작업은 오토레이아웃으로 작업하는 것이 개발자 입장에서도 선호하는 부분일거에요.
연정님, 답변 진심으로 감사드립니다 저도 연정님처럼 fully 오토레이아웃을 선호하는데, 또 어디선가는 개발 시 오토레이아웃은 display:flex + padding을 div태그에 주는 거라서, 모든 곳에 오토레이아웃을 주면 개발자가 더 어려움을 겪는다(?)고 하여 공부를 해보던 참이었습니다! 개인적으로는 오토레이아웃으로 다 묶는게 작업할때 편하다고 느껴졌었눈데(너무 프레임안에 프레임이 여러겹 생기는걸 제외한다면) 연정님께서도 비슷한 방식으로 작업한다고 하시니 조금 더 용기를 내어 제 방식으로 계속 작업해보아야 겠네요💜💜 늦은 시간 답변 넘 감사드립니다!!!
선생님 안녕하세요! 다름이 아니고 피그마에서 핸드드로잉 느낌을 내고싶어 플러그인을 찾아보던중 결국엔 못 찾고 포기를 했는데 작업물 순서 정리하다가 보니까 핸드드로잉 느낌의 스트로크와 그 안에 필이 핸드드로잉으로 채운듯한 느낌의 사각형이 생성된것을 발견했습니다 거즘 한시간째 찾고있는데 어떻게 만들어진건지 알 수 가없네요 ㅠㅠ 어떤 플러그인을 썻길래 핸드드로잉 느낌의 사각형이 만들어져 있었을까요..?
Tip. 오토레이아웃(2022년 버전 추천), 컴포넌트 기능 관련(버튼 생성하기 2021년 버전 추천) 영상은 필수 영상이니 기본 개념을 익히기 위해서라도 주제별로 신구(최신 또는 구버전)영상 구분 없이 모두 보시면 좋아요. ****다만 어렵더라도 이 영상을 시청하시면 피그마로 이런걸 할 수 있네. 피그마 정말 좋은 툴이네 정도는 파악하실 수 있어요. (동기부여에 도움)**** 고등학생이시라면, 오래된 영상 -> 최신 영상 순으로 보면 피그마 기능에 대한 개념을 익히기 좋고여. 다만 옛날 영상은 편집 및 녹음상태가 지금보다 좋지 않아요. 하지만 감안하고 시청하시면 내용 만큼은 알찹니다. 처음부터 영상 속의 예제를 따라하면서 습득하는 것보다는(그럼 지칠 수 있어요..) 앞에서 뒤로 스킵하지 마시고 순차적으로 영상을 모두 시청하시되 두 번째 다시 시청 시 예제를 응용해보며 영상의 예제를 따라해 보는걸 추천드려요. 프로토타입 관련 영상은 구버전이기 때문에 현재로선 추천드리기 어려워요. 나중에 최신 버전으로 업데이트해야해요. 그리고 피그마가 매년 기능이 업그레이드 되면서 피그마 인터페이스가 많이 바뀌었습니다. 이점도 참고해 주세요. 하지만 있었던 기능이 없어진 경우는 드물기 때문에 ‘아, 이런 기능이 있네. 이 기능이 나중에 이렇게 발전했네. ’ 즉 2018년도 즈음엔 피그마의 기능이 지금보다는 단순해서 배우기 쉬웠는데 요즘들어 많이 복잡해졌어요. 그래서 피그마 초보자가 최신 영상부터 시청하게되면 어렵게 느껴질 수 있어요. ****결론: 만약 컴포넌트 개념을 모르는 피그마 초보자라면, 제 채널 > ‘동영상’ 카테고리에서 업데이트순으로 영상을 시청하는걸 추천드려요. ****
연정님 티스토리 보다가 궁금증에 댓글답니다..! 혹시 회사 디자인팀내에서 사용할건데 결제를 프로페셔널로 진행하면 되는건가요? ㅠㅠ 이 부분이 너무 헷갈려요.. 프로젝트를 진행하려고 하는데 기업으로 결제를 해야하는지 아니면 한사람당 프로페셔널 계정으로 한명씩 결제를 하면 되는지요...
@@EEOHSE 결제는 owner 계정으로만 편집자 수만큼 결제가 진행돼요. (예를들어 $45*3(편집자 수)) 중요 Tip. 피그마의 어떤 유료플랜이든 결제일이 곧 앞으로의 월 정기 결제일이 되기 때문에 월마다 추가로 발생하는 금액이 있는지 여부에 대해 체크가 필요해요. 이는 owner 계정을 가진 분의 피그마 팀 > 결제 페이지에서 실시간으로 확인 가능하고요 결제 몇일 전에 메일로도 안내가 될거에요~
제 영상 중 컴포넌트의 property 기능을 사용한 버튼생성하기 영상을 참고하시면 참고가 되실거 같아요~ 용도에 따라 어디에 쓰이느냐의 따라 중요도에 따라 버튼을 색상으로 구분하고 사이즈를 제한하여 적시적소에 사용했어요. 즉 버튼 사이즈를 표준화 해서 일관성을 유지하는데 도움을 줍니다. 예를들어 프로젝트에 참여하는디자이너가 여러명일 경우 디자인의 일관성 유지가 힘이 드는데, 이를 가이드화 해서 관리했습니다.
연정님 저도 너무 너무 감사합니다. 답답한 부분들이 하나씩 열릴거 같아 셀레기 까지 합니다. 꾸벅
무료로 이런 강의를 볼 수 있다는 게 너무 감사해요!! 정말 큰 도움을 받고 있어요. 다른 영상 먼저 봤다가 감사한 마음이 커서 조금이지만 감사의 인사를 전합니다!! 아이 낳으셨다는 글 봤는데, 몸조리 잘 하시고, 잠도 잘 주무시길 바랄게요!
🥰감사합니다!! 언젠가 좋은 영상으로 다시 찾아뵐게요!!
연정님 항상 좋은 강의 감사드립니다! 사수없는 환경에서 이해쉽게 설명해주셔서 도움이 너무 많이 되어요ㅠㅠ! 감사드립니다!
연정님 소중한 강의 정말 하나라도 놓치지 않으려고 열심히 봤습니다. 😍 피그마강의 중에서 단연 최고입니다.!!👍👍
🥹감사합니다 💕
정말 위대합니다 선생!
칭찬 감사합니다😮
감사합니다! 헷갈려서 계속 해맸는데 차분히 설명해주셔서 이해할 수 있었어요ㅎㅎ 좀 여러번 영상을 보고 다른곳에도 활용을 해봐야겠어요!!
감사합니다 !!!
소중한 영상 강의 너무 감사합니다 :)
좋은 영상으로 또 찾아뵐게요! 💕
진짜 최고의 강의!!! 일러, 스케치, XD만 쓰다가 이제야 피그마로 넘어왔는데 완전히 개념이 새롭네요. 아트보드에서 그려내는게 아니라 컴포넌트에서 프레임을 만든다는 점에서 장벽이 조금 높아지긴 했지만, 핸드오프가 꽤 수월해질 것 같아요. 소중한 강의 감사합니다!
Auto Layout 기능 및 디자인 시스템으로 로그인 화면구성하기
#figma #properties #디자인시스템 #autolayout #variables #반응형UI
[목차] 재생시간 20분
00:00 Intro
00:24 작업 환경 설정
02:16 오토 레이아웃의 리사이징 옵션 3가지
05:59 컴포넌트 속성 편집 'Properties, Nested Instance'
08:07 피그마 컴포넌트 Properties의 역할
10:50 Absolute Position
17:14 Min Width, Max Width
17:48 Wrap 기능
*** 영상 주요내용 ***
1. 반응형 레이아웃 제작을 위한 Auto Layout 기능 및 디자인 시스템 활용
2. 2023 Auto Layout 신규 기능 소개 및 실습
3. 피그마 컴포넌트 Properties 사용사례 소개 **
Auto Layout 기능 및 디자인 시스템 활용하여
개발 친화적인 UI를 제작하는데 도움이 되는 영상입니다.
[강의자료] figma Community @@yeonjung
* 피그마 파일 링크: www.figma.com/community/file/1260476622953189095
✅ 아래 사항에 대해 정정합니다.
17:00 absolute position 테스트 시 contents layer 에 max-width(400) 값이 들어간 상태로 테스트가 되었네요.😢 → contents 영역이 좌우 마진 24가 유지된 상태로 반응형이 되어야 합니다.
감사합니다!
👍✨✨✨
영상도 나레이션도 너무너무 깔끔해서 연정님꺼밖에 못봐요ㅠ 앞으로도 좋은 강의 부탁드려요!
좋은 영상 감사합니다. ^^! 4:45부터의 영상에서 그룹핑을 왜 계속 해주는 건지 이해가 안가요ㅠ(완전초보) 설명부탁드릴게요..
와
덕분에 피그마 열공중입니다~ 감사합니다.
그리고 한가지 궁금한 점이 있는데요.
피그마에서 화면분할을 비율%로 분할 할 수 있는 방법도 있을까요?
1:8:1 이런식으로 비율을 정할수도 있는지 궁금합니다.
분명 집중해서들었는데 하나도 모르겠어요😢😢😢
연정님 안녕하세요!
늘 좋은 강의 감사히 잘 보고 있습니다! 진심으로 감사드립니다.
연정님께서는 앱 혹은 웹 디자인 하실 때
모든 요소들을 오토레이아웃으로 묶으시는지 궁금해요!
아니면 프레임위에 필요한 것들만 묶어서 배치하시는지 궁금합니다.
각각 장단이 있는것 같은데, 보통 어떻게 하시는지 공유해주실 수 있으실까요 👀💙
+ 만약 프레임에다가 필요한 부분만 오토레이아웃걸어서 올리는 경우
묶여있지 않은 부분들의 spacing은 어떻게 일정하게 조절하시는지도,,궁금합니다..!
안녕하세요. 좋은 질문 감사합니다. 영상에 사용된 예제파일에 알 수 있듯이 저는 95프로 이상을 오토레이아웃을 사용해여.
오토레이아웃 대신 일반 프레임만을 사용하는 경우는 아이콘 컴포넌트 생성 시나 고정된 사이즈 안에서 화면 구성(ex. ppt)을 하는 경우 등 극히 드물어요. group 기능(cmd+g)도 레이아웃 안에서는 거의 사용하지 않아요.
오토레이아웃의 장점은 수정이 용이하고 반응형 UI 제작이 가능한 점. 그리고 무엇보다도 개발친화적인 부분이 매력이죠. 프레임이나 그룹은 그 반대라고 할 수 있어요. (일부 경우 제외)
개발자에게 전달할 UI 시안 작업은 오토레이아웃으로 작업하는 것이 개발자 입장에서도 선호하는 부분일거에요.
연정님, 답변 진심으로 감사드립니다
저도 연정님처럼 fully 오토레이아웃을 선호하는데, 또
어디선가는 개발 시 오토레이아웃은 display:flex + padding을 div태그에 주는 거라서, 모든 곳에 오토레이아웃을 주면 개발자가 더 어려움을 겪는다(?)고 하여 공부를 해보던 참이었습니다!
개인적으로는 오토레이아웃으로 다 묶는게 작업할때 편하다고 느껴졌었눈데(너무 프레임안에 프레임이 여러겹 생기는걸 제외한다면) 연정님께서도
비슷한 방식으로 작업한다고 하시니
조금 더 용기를 내어 제 방식으로 계속 작업해보아야 겠네요💜💜
늦은 시간 답변 넘 감사드립니다!!!
2:44 여기서 꼭 인스타그램 로고랑 가로 길이를 맞춰야하나요? 로고는 변하지 않아서 안해도 될줄 알았어서요!
안녕하세요! 덕분에 피그마 독학 수월하게 하고 있습니다 감사합니다:)!! 질문이 하나 있는데 중간에 input_text에서 글씨 바꾸는 부분에서 아무리 따라해도 글씨가 안바뀌네요 ㅠㅠ 혹시 이유를 알 수 있을까요?
선생님 안녕하세요! 다름이 아니고 피그마에서 핸드드로잉 느낌을 내고싶어 플러그인을 찾아보던중 결국엔 못 찾고 포기를 했는데 작업물 순서 정리하다가 보니까 핸드드로잉 느낌의 스트로크와 그 안에 필이 핸드드로잉으로 채운듯한 느낌의 사각형이 생성된것을 발견했습니다 거즘 한시간째 찾고있는데 어떻게 만들어진건지 알 수 가없네요 ㅠㅠ 어떤 플러그인을 썻길래 핸드드로잉 느낌의 사각형이 만들어져 있었을까요..?
안녕하세요 연정님! 자물쇠같은 이모지의 경우는 다운을 받으시나요? 아니면 이모지를 지원해주는 폰트가 있는지요? ..
아~ 시스템 이모지에요. 맥 단축키는 control + cmd + spaceBar ~ 속성명 정의할때 앞에 붙였어여 ㅎㅎ
@@yeonjung-figma 정말 궁금했는데 ㅎㅎ 너무 감사합니다!!
안녕하세요! 선생님의 유튜브 영상으로 피그마를 독학하려는 고등학생입니다. 2022 피그마 온보딩 영상 시청 후 제시해주신 순서대로 따라가려고 하는데 완전 생초보인 제가 선생님의 강의를 수강해도 괜찮을까요? 그리고 유료 강의도 하고 계신지 알려주시면 감사드리겠습니다.
Tip. 오토레이아웃(2022년 버전 추천), 컴포넌트 기능 관련(버튼 생성하기 2021년 버전 추천) 영상은 필수 영상이니 기본 개념을 익히기 위해서라도 주제별로 신구(최신 또는 구버전)영상 구분 없이 모두 보시면 좋아요.
****다만 어렵더라도 이 영상을 시청하시면 피그마로 이런걸 할 수 있네. 피그마 정말 좋은 툴이네 정도는 파악하실 수 있어요. (동기부여에 도움)****
고등학생이시라면, 오래된 영상 -> 최신 영상 순으로 보면 피그마 기능에 대한 개념을 익히기 좋고여. 다만 옛날 영상은 편집 및 녹음상태가 지금보다 좋지 않아요. 하지만 감안하고 시청하시면 내용 만큼은 알찹니다.
처음부터 영상 속의 예제를 따라하면서 습득하는 것보다는(그럼 지칠 수 있어요..) 앞에서 뒤로 스킵하지 마시고 순차적으로 영상을 모두 시청하시되 두 번째 다시 시청 시 예제를 응용해보며 영상의 예제를 따라해 보는걸 추천드려요.
프로토타입 관련 영상은 구버전이기 때문에 현재로선 추천드리기 어려워요. 나중에 최신 버전으로 업데이트해야해요. 그리고 피그마가 매년 기능이 업그레이드 되면서 피그마 인터페이스가 많이 바뀌었습니다. 이점도 참고해 주세요.
하지만 있었던 기능이 없어진 경우는 드물기 때문에 ‘아, 이런 기능이 있네. 이 기능이 나중에 이렇게 발전했네. ’ 즉 2018년도 즈음엔 피그마의 기능이 지금보다는 단순해서 배우기 쉬웠는데 요즘들어 많이 복잡해졌어요. 그래서 피그마 초보자가 최신 영상부터 시청하게되면 어렵게 느껴질 수 있어요.
****결론: 만약 컴포넌트 개념을 모르는 피그마 초보자라면, 제 채널 > ‘동영상’ 카테고리에서 업데이트순으로 영상을 시청하는걸 추천드려요. ****
연정님 티스토리 보다가 궁금증에 댓글답니다..! 혹시 회사 디자인팀내에서 사용할건데 결제를 프로페셔널로 진행하면 되는건가요? ㅠㅠ 이 부분이 너무 헷갈려요.. 프로젝트를 진행하려고 하는데 기업으로 결제를 해야하는지 아니면 한사람당 프로페셔널 계정으로 한명씩 결제를 하면 되는지요...
편집자가 세명 이상이면 org 플랜을 추천 드리고 싶고여, 두명 이하면 프로페셔널 추천이요. 팀에서 대표 한명이 owner 일테고 그분이 팀에 다른분들 초대해서 편집권한을 부여하면 편집자 수만큼 owner 권한 있는 분 계정으로 결제가 진행될거에요.
@@yeonjung-figma 답변 감사합니다 연정님! ㅠㅠ 편집자가 세명일 거 같은데 org플랜으로 구매하면 팀 대표 한명이 구매하면 다른 사람은 추가요금을 안내도 되는건가요? 아니면 프로페셔널 요금으로 내야하는건가요..?
@@EEOHSE 결제는 owner 계정으로만 편집자 수만큼 결제가 진행돼요. (예를들어 $45*3(편집자 수))
중요 Tip. 피그마의 어떤 유료플랜이든 결제일이 곧 앞으로의 월 정기 결제일이 되기 때문에 월마다 추가로 발생하는 금액이 있는지 여부에 대해 체크가 필요해요. 이는 owner 계정을 가진 분의 피그마 팀 > 결제 페이지에서 실시간으로 확인 가능하고요 결제 몇일 전에 메일로도 안내가 될거에요~
피그마신 대연정
안녕하세욤 혹시 버튼 스타일 가이드 만들때요 높이값을 56 /48/ 48 /32 이런식으로 만드는 이유가 뭔가요?이게 좀 헷갈려서 질문 드려욤
8의 배수요~
아 죄송합니다 제 말은 어떤 용도로 버튼 사이즈를 저렇게 만드는지 해서요 똑같은 스타일인데 높이값만 저렇게 다르게 설정해서 스타일 가이드를 만들길래 왜 저렇게 만들지 궁금하더라구욤 -_ㅜ@@yeonjung-figma
제 영상 중 컴포넌트의 property 기능을 사용한 버튼생성하기 영상을 참고하시면 참고가 되실거 같아요~ 용도에 따라 어디에 쓰이느냐의 따라 중요도에 따라 버튼을 색상으로 구분하고 사이즈를 제한하여 적시적소에 사용했어요. 즉 버튼 사이즈를 표준화 해서 일관성을 유지하는데 도움을 줍니다.
예를들어 프로젝트에 참여하는디자이너가 여러명일 경우 디자인의 일관성 유지가 힘이 드는데, 이를 가이드화 해서 관리했습니다.