[샘플파일] www.figma.com/community/file/1181033239638925044 *자막 표시 여부는 별도로 설정(권장)하셔야 한글 자막으로 시청 가능해요. [목차] 00:00 Intro 00:49 작업 환경 설정 01:36 파일 커버 디자인 수정 후 업데이트 01:52 파일 위치 변경하는 방법 02:38 한글 폰트 다운로드 링크 03:03 Font Installers 설치 링크 03:09 팀 라이브러리 기능 *영상에 사용된 기능 중 팀라이브러리 기능은 유료 플랜에서 이용 가능합니다. 03:29 팀 라이브러리 창 여는 단축키 option(alt) + 3 04:02 파일에 특정 팀 라이브러리를 연결하는 방법 04:26 Drafts에 새 파일 추가 시 자동으로 필수 팀 라이브러리 연결하게 하는 설정 05:26 피그마의 버전 히스토리 저장 기능 05:57 피그마 버전 히스토리 저장 내역 확인하는 방법 06:23 파일간 컴포넌트 이동 또는 리소스 분리 방법 07:34 Change Log 관리 07:44 시안 바로가기 링크 연결하는 방법 08:54 파일 정리를 위한 페이지 간 컴포넌트 이동 09:53 Outro 연관 링크 1. font download : spoqa.github.io/spoqa-han-sans/#download 2. figma Desktop App & 폰트 인스톨러: www.figma.com/downloads/
궁금한게 있는데요 팀-프로젝트-디자인파일 이순서에서 보통 프로젝트단위는 [인스타그램 앱디자인]이 하나의 프로젝트 인가요? 디자인파일 하나의 기준은 연정님처럼 페이지별로 만드는건가요?(로그인페이지, 메인페이지, 서브페이지, 설정페이지 …) 와이어프레임 워크플로우는 어디다 만드는거죠? 이것도 하나의 디자인파일로 만드는건가요? 디자인시스템은 하나의 디자인파일이라는건 알겠어요 약간 뭔가 파일 정리에 대한 궁금증이 많아요 😂😂 설명해주는 곳이 없어서… 연정님 항상 잘보고있어요!!
좋은 질문 감사합니다~ 🥰 딱히 정답은 없지만 프로젝트 규모에 따라 또는 상황에 따라 계획하시면 될듯해요~ 무엇보다 동료들 모두가 담당 디자이너가 부재중이더라도 원하는 파일을 빠르게 찾을 수 있도록 프로젝트와 파일을 나누는걸 추천드립니다. 디자인 시스템 파일은 시간이 지날 수록 무거워지므로 가급적 따로 관리하는 것이 나중을 위해서 권장드리고 싶어요. (디자이너 여러명이 협업을 해야 한다면 더더욱) 물론 프로젝트의 크기가 반응형 랜딩페이지 정도의 작은 규모라면 하나의 파일로도 충분해요. 그 안에서 페이지 단위로 나눠 관리 할 수 있기 때문이죠. 와이어프레임은 버전별로 관리할 계획이라면 별도의 파일로 프로젝트 내 개별 파일로 나눠도 무관하다고 생각해요. 인스타그램 서비스 정도의 규모라면 파일을 카테고리 단위로 파일을 쪼개서 관리할 거(ex. home, 마이페이지, 검색, 로그인 등 하위 내비게이션을 기준으로) 같습니다. 처음부터 메인시안과 디자인 시스템을 분리해서 작업하는 것은 라이브러리를 업데이트하느라 자잘하게 시간을 많이 소비하게 되므로 비권장드리고요, 메인이 어느정도 확정된(컬러, 폰트, 공통 컴포넌트가 윤곽이 잡힌 시점) 시점에 제가 이 영상에서 알려드린 방법으로 디자인 시스템과 시안을 분리하는게 효율측면에서 낫습니다. 😀 제가 마지막에 담당했던 서비스를 예로 들면 트윕(Twip)이라는 서비스의 경우 트윕이 메인이 되어 랜딩, 스트리머용 대시보드, 후원 페이지, 마이페이지 등으로 분리된 대규모 프로젝트 였는데요. 디자인 시스템 파일의 규모도 상당하다보니 디자인 시스템만 관리 가능하도록 프로젝트로 빼서 관리하고 나머지 대시보드를 별도의 프로젝트, 후원페이지를 별도의 프로젝트로 나눠서 분리했습니다. 제가 업데이트한 영상 중 팀라이브러리 영상을 참고하시면 확인가능해요. 참고 영상: ruclips.net/video/UQB-2H7vWjk/видео.html > 피그마 실무 사용 사례 > Gocre ( 08 : 30 )
안녕하세요, 피그마에서 MUI를 활용해 디자인을 하고있는데요. 배울수있는곳이 없어서 찾아보다가 연정님 피그마 강의를 듣게됐습니다. 혹시 MUI를 사용법을 알 방법이 영어로된 MUI 공식 유튜브 외에 다른방법이 있는지 궁금합니다.(너무 어려워요😂) MUI 외에 Blueprit, Ant Design등 React UI 라이브러리를 피그마로 제작하려합니다.
아쉽게도 제가 도움을 드릴 수 있는 부분이 아닌 거 같네요. muI는 저도 어렵습니다🥲. 양이 방대할 뿐아니라 다른 라이브러리들처럼 비 정기적으로 버전이 업데이트되다보니 가이드라인을 다 숙지하기가 힘들죠. 다른 매체를 통해 최신버전 습득하기에는 한계가 있어요. (독학이 나음) ant design은 반응형에 취약해서 특정 플랫폼을 개발하고자할 때, 사용하는 걸 추천이요(ex. 모바일 따로, 데스크톱 버전 따로) 즉 “용도”에 따라 선택하시길 권장드려요.//개발자와 논의 필수!
@@yeonjung-figma Pre-Build Component는 수정하는게 원래 어려운지... ㅠ 간단한 side네비게이션 만드는데 List Item 추가하는것도 힘드네요... 아이콘 크기 늘리고 줄이는것도 잘 안돼고..(Constraint때문인지, Autolayout때문인지몰라도 어떤 제약이 있어서 직접만든 로고 넣으려니 사이즈 조절이 안되더라구요...) 기존에 만들어놓은걸 수정한다는게 쉬울줄알았는데 생각보다 어렵네요... 기존에 컴포넌트 제가 만든걸 끼워넣는법도 모르겠구ㅠ 아무튼 영상 잘볼게요!! 감사합니다ㅠ(푸념글이 됐네요..)
안녕하세요 연정님 ~ 질문하나 드립니다! 다른 디자이너와 협업하여 작업할 경우 라이브러리도 공유를 할 수 있는지요? (공유할 수 있다면 어떻게 하는지 알려주세요 ㅠㅠ) 만약 라이브러리를 공유하지 못할 경우 작업파일은 share의 can edit 권한을 줘서 진행해야 되는건지 문의드립니다!
안녕하세요, 이 영상에서 안내된 방법으로 '팀 라이브러리'로 팀멤버 및 초대된 사람들에 한해서, 파일과 파일간의 라이브러리를 공유 할 수 있습니다. 다만 해당 프로젝트에 다른 디자이너를 이메일로 초대하여야 하고 그 디자이너에게 편집 권한(can edit)을 부여해야 해요. *파일 또는 프로젝트로 외부인 또는 팀원 초대 방법: 공유하려는 해당 파일 우측 Share 버튼 또는 프로젝트 페이지 우측 상단에 Share 버튼을 통해 상대방 이메일로 초대 및 권한 부여 가능해요. *주의사항: 편집자 1명을 추가하는 것이므로 다음 월 정기 결제일에 15달러(프로페셔널 플랜의 경우)가 부과 될 수 있어요. 월 정기 결제일 전에 관리자가 초대된 사람에 대해 편집권한을 View restricted로 변경 시 부과는 안됩니다. (이는 owner 또는 admin 권한이 있는 분이 확인 가능)
draft는 팀에 공유하기 전 내문서에 해당하고요, 즉 파일을 공유하기 전에는 다른이가 접근불가. 팀 생성시 생성한 project에 있는 파일들은 공유파일들이라고 보심될거 같아요. 예를 들어 회사에서 동료들에게 공유하는 파일이면서 파일공유 주소를 별도로 공유하지 않아도 피그마에 초대된 팀멤버 누구나가 로그인후 접근할 수 있는 파일입니다.
선생님 오랫만에 다시 질문을 드립니다. 그전에 좋은 강의를 공개하여 주셔서 다시 한 번 감사드립니다^^. 제가 궁금한 것은 특정한 크기의 프레임에서 다양한 요소(버튼...)의 크기가 프레임의 크기 변경에 따라서 변화가 있어야만 할 것으로 생각되는데 처음 요소의 크기를 결정할 때 이 부분을 고려하는 방법이 있을까요? 아니면 벡터 기반이므로 현재 프레임을 기준으로 크기와 위치를 설정하면 반응형 웹처럼 크기와 위치의 비율이 적절하게 재 설정되는 것인지 잘 모르겠습니다^^;; 답글을 부탁드립니다. (_ _)
ruclips.net/video/WOQ48AL1_Rk/видео.html 오토레이아웃 기능으로 버튼 생성하기 이 영상 혹시 보셨나요? 추가로 가장 최근에 업데이트한 AutoLayout 으로 카드 컴포넌트 만드는 영상(ruclips.net/video/y-RnSm7VWVI/видео.html)을 보시면 도움(반응형 프레임안에 요소 크기 정의)이 될듯하네요~ 번외로, 이번에 피그마 컨피그 2023에서 업데이트된 새로운 기능 Variables > 여백에 대해 변수화를 하여 디자인 시스템을 더욱 체계화 할 수 있습니다. //이건 참고만!
@@yeonjung-figma 말씀하신 선생님 영상도 2번 정도 보았는데 제가 오해(착각)를 한 것 같습니다^^; 이제 피그마에서 작성한 디자인 요소는 해결이 된 것 같고, 문제는 반응형 디자인에서 벡터 방식이 아닌 이미지의 경우인데 이러한 경우에는 프레임의 크기를 데스크 탑 화면 크기처럼 큰 수치의 프레임을 기준으로 설정하여 이미지를 위치시키면 그 화면을 작은 화면에서 보는 경우에 문제가 없다...라고 생각하면 될까요? 바쁘실텐데 죄송합니다 ㅎㅎ;;
안녕하세요! 항상 좋은 강의 감사합니다. 이 영상을 보면서 따라하고 있는데, 팀 라이브러리를 활용해 publish해서 로그인 페이지로 컴포넌트가 뜨게 하는 것이 아예 되지가 않습니다. 직접 클릭을 해서 이동하는데도 13개 정도는 아예 unable 하다고 뜨고, 몇개는 직접 선택해서 publish 했는데 로그인 페이지에서 뜨지가 않네요ㅜ 무료버전이라 그런건지.. 다른 방법을 찾아야 하는 지 궁금합니다!
선생님 안녕하세요. 정말 유용한 강의를 공개하여 주셔서 감사합니다. 그런데 한 가지 질문이 있습니다. Fifma에서 작업하는 파일의 용량이 무료 버전의 경우에 무제한이 아닌 것으로 생각되는데 이 부분이 정확이 어떤 내용인지 잘 모르겠습니다. 현재 500M의 제한이 설정되어 있는 것이 맞나요? 수고하세요^^
용량 제한 기준은 모르겠으나, 만약 피그마 무료 플랜을 사용할 경우, 한 팀당 파일 개수 및 파일 내 페이지 개수 제한이 있어요. 다만, 팀이 아닌 Drafts 탭(내문서)에 생성된 파일의 경우, 파일 내 페이지 개수 제한이 없습니다. (참고로 무료플랜은 팀 라이브러리 기능도 사용할 수 없습니다.) 용량의 경우, 컴포넌트 개수, 프레임위 개수 등 레이어가 많아 질 수록 무거워졌어요.
안녕하세요 연정쌤 ! 저는 IT 관련 학과에 재학 중인 대학생입니다. 이번 겨울방학에 동기들과 함께 모바일 유저를 겨냥한 웹앱 제작 프로젝트에 디자인파트를 담당해, 공부 및 UIUX 제작에 몰두하고 있습니다. 어쩌다보니 연정쌤의 여러가지 강의영상을 보고 많은 도움을 받았고 정말 감사하다는 말씀을 먼저 드리고 싶습니당 ㅎㅎ . 질문이 있습니다! Q1. 저희 팀프로젝트는 지금 Wireframe과 UserFlowDiagram까지 제작을 한 상태입니다. 이제 Hifi 디자인으로 넘어갈 차례인데 팀장님이 프레임 사이즈를 가장 작은 iPhone SE 사이즈로 만들고 이후에 다른 디바이스 사이즈에 따라 반응하는 디자인을 만드는 것이 맞다고 합니다. 이 말이 맞나요? Q2. 위의 내용을 바탕으로 SE 프레임사이즈에서 iPhone 14 프레임으로 변경하면 텍스트 사이즈가 변경이 안됩니다. 물론 텍스트를 Outline Stroke 기능으로 도형 취급 후 스케일을 변경하면 프레임에 따라 달라지지만, 이렇게 하면 가로가 길어지는 정도에 비해 세로로 길어지는 정도가 커서 텍스트가 세로로 늘려져서 보이는 현상이 발생합니다 ㅠㅠ 혹은 단축키 K를 사용하는 스케일 변경 키로 비율에 맞게 텍스트와 프레임을 조정할 수 있는 사실 또한 알고있지만, SE 사이즈에서 이 자동적으로 스케일에 따라 변경이 가능하지는 않더라고요.. 제가 궁금한 점은.. 텍스트 크기 자체도 반응형으로 디자인하나요? 아니면 고정된 사이즈의 UI와 텍스트를 정해진 웹이나 모바일 디바이스 프레임에 맞춰서 제작하나요? 너무 길어져서 죄송합니다... 도와주세요.>!!
A1. 맞다 틀리다 정답은 없지만 최근까지 모바일 시안 대응으로 실무에서 375*812 해상도로 기본 해상도로 진행을 했습니다. 프로토타입핑도 이 해상도로 진행을 했어요. A2. 반응형에 의해 해상도별 폰트 사이즈가 변경이 되어야 할 경우엔 해당 디바이스 해상도(ex. 320, 태블릿 해상도) 시안을 별도로 제공하거나 코멘트로 가이드 제공했어요. 레이아웃은 일반 오토 레이아웃을 활용하면 다양한 해상도에 대응이 가능해서 오토 레이아웃으로 시안을 구성하는 것을 권장드려요.
피그마 웹에서 플러그인 없이 파일 검색은 안되나요? 사실상 피그마에서 작업하는건 거의 모르는데, 가끔씩 다른분이 피그마에 올리는걸 제 영상에 써야할 때가 있어서 질문합니다. 아무리 사이트를 다 뒤져봐도 흔히 검색할 때 보이는 돋보기 버튼이나 키워드 입력창이 없더라고요. 키워드로 파일 검색하고 싶은데 말이죠.
피그마와는 별개로 이 영상을 어떤 프로그램으로 어떻게 만들었는지 궁금합니다. 하나의 주요 콘텐츠를 소개하는 영상을 만들고 있는데, 저같은 경우는 OBS로 캡쳐하고 프리미어, 에프터이펙트로 작업해왔습니다. 전체적인 느낌은 이와 비슷하게 만들었고, 이 영상처럼 부분적으로 확대하는 연출도 있는데, 문제는 제 경우엔 기존에 캡쳐한 영상이나 이미지를 확대하면 깨지는게 티가 난다는 겁니다. (작은거 늘리면 깨지는건 당연합니다만,) 제가 의도한 화면사이즈까지 하면서도 안 깨지게 하고싶은데 말이죠. 간단한 모션그래픽을 줄 뿐인데도 렌더링이 버벅거리고 화질이 깨집니다. 그리고 마우스가 모양이 자연스럽게 바뀌거나 커지는 연출도 이 영상에 있는데, 그런 부분은 어떻게 하셨는지 궁금합니다. 게다가 4K에 화질 열화가 없는데도 다운받아보니 이 영상은 한 13메가바이트정도 했습니다. (정확히는 다른분이 다운받는걸 봤습니다만,) 제 영상은 H264로 했음에도 최소 100메가에서 1기가까지 가는데 말이죠. 그래서 이 영상 제작을 어떻게 하셨는지도 궁금합니다. 또, 피그마는 검색 어떻게 하나요?
@@yeonjung-figma 마지막은 인코딩을 어떻게 하신건지도 궁금합니다. 유튜브에서 이 영상을 다운받아봤을 때 약 13~15 정도 MB로 나옵니다.(정확한 수치는 잊었습니다.) 4K에 10분이 넘으면서, 화질이 좋으면서도 저용량 파일로 만든 방법이나 설정이 궁금합니다.
연정님 안녕하세요! 평소에 피그마 강의 너무 잘 보고 있어 감사한 마음이에요 저는 서비스기획자로 일하고 있는데요, 이번에 이직한 회사에 디자인팀이 없어서;;;; 이전에 외주업체에서 작업한 원본이 없어서 제가 서비스를 보면서 직접 피그마로 옮겨놓아야하는데요.. 실서비스를 그대로 옮기는 역디자인 하는 방법 또는 과정 팁이 있으시면 부탁드려도 될까요? ㅠㅠ 도움청할 곳이 없어 문의드립니다,,
이 영상에서 언급된 샘플파일의 리펙토링 버전의 샘플 파일은 이 링크에서 확인 가능합니다. www.figma.com/@yeonjung
감사합니다.
감사합니다 ❤❤❤❤❤❤❤
[샘플파일] www.figma.com/community/file/1181033239638925044
*자막 표시 여부는 별도로 설정(권장)하셔야 한글 자막으로 시청 가능해요.
[목차]
00:00 Intro
00:49 작업 환경 설정
01:36 파일 커버 디자인 수정 후 업데이트
01:52 파일 위치 변경하는 방법
02:38 한글 폰트 다운로드 링크
03:03 Font Installers 설치 링크
03:09 팀 라이브러리 기능
*영상에 사용된 기능 중 팀라이브러리 기능은 유료 플랜에서 이용 가능합니다.
03:29 팀 라이브러리 창 여는 단축키 option(alt) + 3
04:02 파일에 특정 팀 라이브러리를 연결하는 방법
04:26 Drafts에 새 파일 추가 시 자동으로 필수 팀 라이브러리 연결하게 하는 설정
05:26 피그마의 버전 히스토리 저장 기능
05:57 피그마 버전 히스토리 저장 내역 확인하는 방법
06:23 파일간 컴포넌트 이동 또는 리소스 분리 방법
07:34 Change Log 관리
07:44 시안 바로가기 링크 연결하는 방법
08:54 파일 정리를 위한 페이지 간 컴포넌트 이동
09:53 Outro
연관 링크
1. font download : spoqa.github.io/spoqa-han-sans/#download
2. figma Desktop App & 폰트 인스톨러: www.figma.com/downloads/
피그마로 버전관리를 할 수 있다니! 유용한 기능입니다. 개발과 비슷한 면이 있네요.
git 처럼 branch 기능도 있어요. (org 유료플랜 부터 가능)
@@yeonjung-figma 오 신기하네요. 협업하기에 좋아지고 있는 것 같네요. 답글 감사합니다. :) 남은 영상도 감사히 보겠습니다.
정말 오랜만입니다 !
🫡
@@yeonjung-figma 영상 업로드 계속 가능하신가요
늘 많은 도움 받고 있습니다! 다음 강의 업로드는 언제쯤 될까요?🥰
개인 사정으로 강의 업로드가 늦어지고 있어요. 최근 들어 다음 강의 업로드 및 구독자 2만 기념 초보자를 위한 기초 강의 영상을 기획 중입니다.
@@yeonjung-figma 감사합니다! 강의기다릴게요
와우. 피그마레전드 연정스 피그마 웰컴백❤❤
그리웠어요🥲
돌아와주셔서 감사합니다.
🫡
커뮤니티에서 받은 페이지로는 As is 와 UI Base만 보이고 보여주시는 To Be는 안보이는데요? ㅠㅠ
www.figma.com/@yeonjung 여기에서 최신 버전 확인 가능해요!
궁금한게 있는데요 팀-프로젝트-디자인파일 이순서에서 보통 프로젝트단위는 [인스타그램 앱디자인]이 하나의 프로젝트 인가요?
디자인파일 하나의 기준은 연정님처럼 페이지별로 만드는건가요?(로그인페이지, 메인페이지, 서브페이지, 설정페이지 …) 와이어프레임 워크플로우는 어디다 만드는거죠? 이것도 하나의 디자인파일로 만드는건가요? 디자인시스템은 하나의 디자인파일이라는건 알겠어요
약간 뭔가 파일 정리에 대한 궁금증이 많아요 😂😂 설명해주는 곳이 없어서… 연정님 항상 잘보고있어요!!
좋은 질문 감사합니다~ 🥰
딱히 정답은 없지만 프로젝트 규모에 따라 또는 상황에 따라 계획하시면 될듯해요~ 무엇보다 동료들 모두가 담당 디자이너가 부재중이더라도 원하는 파일을 빠르게 찾을 수 있도록 프로젝트와 파일을 나누는걸 추천드립니다.
디자인 시스템 파일은 시간이 지날 수록 무거워지므로 가급적 따로 관리하는 것이 나중을 위해서 권장드리고 싶어요. (디자이너 여러명이 협업을 해야 한다면 더더욱) 물론 프로젝트의 크기가 반응형 랜딩페이지 정도의 작은 규모라면 하나의 파일로도 충분해요. 그 안에서 페이지 단위로 나눠 관리 할 수 있기 때문이죠.
와이어프레임은 버전별로 관리할 계획이라면 별도의 파일로 프로젝트 내 개별 파일로 나눠도 무관하다고 생각해요.
인스타그램 서비스 정도의 규모라면 파일을 카테고리 단위로 파일을 쪼개서 관리할 거(ex. home, 마이페이지, 검색, 로그인 등 하위 내비게이션을 기준으로) 같습니다. 처음부터 메인시안과 디자인 시스템을 분리해서 작업하는 것은 라이브러리를 업데이트하느라 자잘하게 시간을 많이 소비하게 되므로 비권장드리고요, 메인이 어느정도 확정된(컬러, 폰트, 공통 컴포넌트가 윤곽이 잡힌 시점) 시점에 제가 이 영상에서 알려드린 방법으로 디자인 시스템과 시안을 분리하는게 효율측면에서 낫습니다. 😀
제가 마지막에 담당했던 서비스를 예로 들면 트윕(Twip)이라는 서비스의 경우 트윕이 메인이 되어 랜딩, 스트리머용 대시보드, 후원 페이지, 마이페이지 등으로 분리된 대규모 프로젝트 였는데요. 디자인 시스템 파일의 규모도 상당하다보니 디자인 시스템만 관리 가능하도록 프로젝트로 빼서 관리하고 나머지 대시보드를 별도의 프로젝트, 후원페이지를 별도의 프로젝트로 나눠서 분리했습니다. 제가 업데이트한 영상 중 팀라이브러리 영상을 참고하시면 확인가능해요.
참고 영상: ruclips.net/video/UQB-2H7vWjk/видео.html > 피그마 실무 사용 사례 > Gocre ( 08 : 30 )
오와 마침 찾아헤메었는데 오늘 올라오다니! 너무감사합니다 :)
🤩
연정님 다음강의 목빠지게 기다리고있어요!! 좋은 강의 감사합니다!
감사합니다. 스마트폰 화면을 여러장 그렸는데 그것을 ppt처럼 화면한장에 4한장으로 pdf로 출력할수있나요? 현재 출력하면 한 페이지에 모든 화면이 출력되서요
플러그인 사용하면 편해요. Tiny Image Compressor
@@yeonjung-figma 오오 빠른 답변 너무나 감사해요! 엄청난 팁이네요!! 참 그리고 제가 무료버젼을 사용중인데, 프로젝트는 무한대 생성할수 있지만 한 프로젝트 안에 페이지만 3개까지만 제한되는거 맞죠?
질문이 하나더 생겼는데요 ^^; 6:39 에서 왜 ctrl c가 아닌 ctrl x로 오려내기를 해야하나요?
목적이 복제가 아닌 옮기는 것이기 때문입니다.😀
와 오랜만이십니다!
🫡
영상 하나 보고 배우는게 많아요 이런 알차고 친절한 강의 감사합니다
안녕하세요, 피그마에서 MUI를 활용해 디자인을 하고있는데요. 배울수있는곳이 없어서 찾아보다가 연정님 피그마 강의를 듣게됐습니다. 혹시 MUI를 사용법을 알 방법이 영어로된 MUI 공식 유튜브 외에 다른방법이 있는지 궁금합니다.(너무 어려워요😂) MUI 외에 Blueprit, Ant Design등 React UI 라이브러리를 피그마로 제작하려합니다.
아쉽게도 제가 도움을 드릴 수 있는 부분이 아닌 거 같네요.
muI는 저도 어렵습니다🥲. 양이 방대할 뿐아니라 다른 라이브러리들처럼 비 정기적으로 버전이 업데이트되다보니 가이드라인을 다 숙지하기가 힘들죠. 다른 매체를 통해 최신버전 습득하기에는 한계가 있어요. (독학이 나음)
ant design은 반응형에 취약해서 특정 플랫폼을 개발하고자할 때, 사용하는 걸 추천이요(ex. 모바일 따로, 데스크톱 버전 따로)
즉 “용도”에 따라 선택하시길 권장드려요.//개발자와 논의 필수!
@@yeonjung-figma
Pre-Build Component는 수정하는게 원래 어려운지... ㅠ 간단한 side네비게이션 만드는데 List Item 추가하는것도 힘드네요...
아이콘 크기 늘리고 줄이는것도 잘 안돼고..(Constraint때문인지, Autolayout때문인지몰라도 어떤 제약이 있어서 직접만든 로고 넣으려니 사이즈 조절이 안되더라구요...)
기존에 만들어놓은걸 수정한다는게 쉬울줄알았는데 생각보다 어렵네요...
기존에 컴포넌트 제가 만든걸 끼워넣는법도 모르겠구ㅠ 아무튼 영상 잘볼게요!! 감사합니다ㅠ(푸념글이 됐네요..)
@@촉광 넵 피그마로 디자인 시스템 구성하기가 쉬운게 아니죠! 공감합니다. 피그마는 퍼블리싱에 대한 기초가 탄탄하게 잡혀있어야 제대로 사용할 수 있어요. 한편으로 그게 피그마의 매력이기도 해요. 😀
@@yeonjung-figma 그런거 같아요. 그래도 그나마 퍼블리싱을 좀 배워서(HTML, CSS) 활용도가 매우매우 높은거 같아요. 리액트로 바로 제작이 가능하고. 신세계인듯해요.
첫 입문할 때 넘 쉽게 잘 설명해주셔서 실무 잘 활용하고 있어요. 오랫만의 영상이 반가워서 댓글 남깁니다 :-)
저는 앞서 알려주신 것까진 다 똑같이 했는데, 04:02 파일에 특정 팀 라이브러리를 연결하는 방법 👉이 부분에서 'Include 4 missing libraries'가 뜨는데 왜 그럴까요? ㅠㅠ 'guide-header' 이런 것들이 뜹니다.
혹시 스크린샷 이미지 링크 공유 가능하신가요?
@@yeonjung-figma 링크를 달면 댓글이 자동 삭제되어서 계속 답글이 안 달렸던 거네요 ㅠㅠ 어떻게 전달드리면 될까요?
@@yeonjung-figma 아 혹시 연정님 추가로 강의를 듣다가 보니 알게된 사실이라 무료계정에서는 라이브러리 연결이 안 되기 때문에 문의드린 문제가 생기는 걸까요?
넵 라이브러리 기능은 유료플랜에서만 이용가능해요~ 무료에서는 디자인 토큰만 퍼블리시 가능합니다.
@@yeonjung-figma 그래서 그랬던 거 였군요 ㅠㅠ 답변 감사드립니다!
프로토타입을 영상추출은 안되나요? 검색하면 피시/모바일에서 자체 녹화하는 것만 보여서... 혹시 mp4/mov등 영상파일로 추출은 할 수 없는지. 알고 싶어여 : )
안돼요~ 하지만 플러그인은 혹시 있을지 모르니 검색해보세요😀 저는 맥전용 프로그램인 퀵타임 앱으로 보통 녹화합니다.
@@yeonjung-figma 아네네 답변 감사합니다. 좋은 하루되세요.
안녕하세요 연정님 ~ 질문하나 드립니다! 다른 디자이너와 협업하여 작업할 경우 라이브러리도 공유를 할 수 있는지요? (공유할 수 있다면 어떻게 하는지 알려주세요 ㅠㅠ) 만약 라이브러리를 공유하지 못할 경우 작업파일은 share의 can edit 권한을 줘서 진행해야 되는건지 문의드립니다!
안녕하세요,
이 영상에서 안내된 방법으로 '팀 라이브러리'로 팀멤버 및 초대된 사람들에 한해서, 파일과 파일간의 라이브러리를 공유 할 수 있습니다. 다만 해당 프로젝트에 다른 디자이너를 이메일로 초대하여야 하고 그 디자이너에게 편집 권한(can edit)을 부여해야 해요.
*파일 또는 프로젝트로 외부인 또는 팀원 초대 방법: 공유하려는 해당 파일 우측 Share 버튼 또는 프로젝트 페이지 우측 상단에 Share 버튼을 통해 상대방 이메일로 초대 및 권한 부여 가능해요.
*주의사항: 편집자 1명을 추가하는 것이므로 다음 월 정기 결제일에 15달러(프로페셔널 플랜의 경우)가 부과 될 수 있어요. 월 정기 결제일 전에 관리자가 초대된 사람에 대해 편집권한을 View restricted로 변경 시 부과는 안됩니다. (이는 owner 또는 admin 권한이 있는 분이 확인 가능)
다음영상 기다리고 있겠습니다!! 연정님 항상 감사합니다 😍
바로가기 링크를 심는 과정은 알겠는데,링크용으로 만들어진 파란 ‘바로가기’텍스트는 어떻게 만드는지 알수있을까요?
입문하면서 많은 도움 받고있습니다~! 그런데 draft에 있는 프로젝트를 꼭 project로 옮겨야하나요? 팀이 없어서 옮길수가 없다고 뜨네요ㅠ draft와 project의 차이점은 무엇일까요? 감사합니다!
draft는 팀에 공유하기 전 내문서에 해당하고요, 즉 파일을 공유하기 전에는 다른이가 접근불가.
팀 생성시 생성한 project에 있는 파일들은 공유파일들이라고 보심될거 같아요. 예를 들어 회사에서 동료들에게 공유하는 파일이면서 파일공유 주소를 별도로 공유하지 않아도 피그마에 초대된 팀멤버 누구나가 로그인후 접근할 수 있는 파일입니다.
@@yeonjung-figma 빠른답변 정말 감사드립니다..ㅠㅠ!! 계속 열심히 공부해볼게요!!
안녕하세요 ! 스타트업 1인 디자이너입니다, 친절한 강의 정말 감사드립니다.
선생님 오랫만에 다시 질문을 드립니다. 그전에 좋은 강의를 공개하여 주셔서 다시 한 번 감사드립니다^^. 제가 궁금한 것은 특정한 크기의 프레임에서 다양한 요소(버튼...)의 크기가 프레임의 크기 변경에 따라서 변화가 있어야만 할 것으로 생각되는데 처음 요소의 크기를 결정할 때 이 부분을 고려하는 방법이 있을까요? 아니면 벡터 기반이므로 현재 프레임을 기준으로 크기와 위치를 설정하면 반응형 웹처럼 크기와 위치의 비율이 적절하게 재 설정되는 것인지 잘 모르겠습니다^^;; 답글을 부탁드립니다. (_ _)
ruclips.net/video/WOQ48AL1_Rk/видео.html 오토레이아웃 기능으로 버튼 생성하기 이 영상 혹시 보셨나요? 추가로 가장 최근에 업데이트한 AutoLayout 으로 카드 컴포넌트 만드는 영상(ruclips.net/video/y-RnSm7VWVI/видео.html)을 보시면 도움(반응형 프레임안에 요소 크기 정의)이 될듯하네요~
번외로, 이번에 피그마 컨피그 2023에서 업데이트된 새로운 기능 Variables > 여백에 대해 변수화를 하여 디자인 시스템을 더욱 체계화 할 수 있습니다. //이건 참고만!
@@yeonjung-figma 말씀하신 선생님 영상도 2번 정도 보았는데 제가 오해(착각)를 한 것 같습니다^^; 이제 피그마에서 작성한 디자인 요소는 해결이 된 것 같고, 문제는 반응형 디자인에서 벡터 방식이 아닌 이미지의 경우인데 이러한 경우에는 프레임의 크기를 데스크 탑 화면 크기처럼 큰 수치의 프레임을 기준으로 설정하여 이미지를 위치시키면 그 화면을 작은 화면에서 보는 경우에 문제가 없다...라고 생각하면 될까요? 바쁘실텐데 죄송합니다 ㅎㅎ;;
안녕하세요! 항상 좋은 강의 감사합니다. 이 영상을 보면서 따라하고 있는데, 팀 라이브러리를 활용해 publish해서 로그인 페이지로 컴포넌트가 뜨게 하는 것이 아예 되지가 않습니다. 직접 클릭을 해서 이동하는데도 13개 정도는 아예 unable 하다고 뜨고, 몇개는 직접 선택해서 publish 했는데 로그인 페이지에서 뜨지가 않네요ㅜ 무료버전이라 그런건지.. 다른 방법을 찾아야 하는 지 궁금합니다!
팀 라이브러리 기능은 유료플랜에서 사용 가능해요. 참고 링크: 피그마의 팀 라이브러리 기능 - designer-story.tistory.com/m/49
@@yeonjung-figma 역시 그렇군요.. 감사합니다!
연정님강의 모두 다봤습니다! 연정님의 이력서 템플릿은 봤는데 포트폴리오는 어떻게 만드셨는지 너무 궁굼해요 연정님의 발자취를 말씀하시는 영상도 부탁드려요🙏🏻
선생님 안녕하세요. 정말 유용한 강의를 공개하여 주셔서 감사합니다. 그런데 한 가지 질문이 있습니다. Fifma에서 작업하는 파일의 용량이 무료 버전의 경우에 무제한이 아닌 것으로 생각되는데 이 부분이 정확이 어떤 내용인지 잘 모르겠습니다. 현재 500M의 제한이 설정되어 있는 것이 맞나요? 수고하세요^^
용량 제한 기준은 모르겠으나, 만약 피그마 무료 플랜을 사용할 경우, 한 팀당 파일 개수 및 파일 내 페이지 개수 제한이 있어요. 다만, 팀이 아닌 Drafts 탭(내문서)에 생성된 파일의 경우, 파일 내 페이지 개수 제한이 없습니다. (참고로 무료플랜은 팀 라이브러리 기능도 사용할 수 없습니다.) 용량의 경우, 컴포넌트 개수, 프레임위 개수 등 레이어가 많아 질 수록 무거워졌어요.
@@yeonjung-figma 네...말씀 감사합니다. 고맙습니다^^
피그마 공부하다가 알게됐는데 지난 강의로도 충분히 만족하고있었는데 새강의가 올라와서 반갑네요. 감사합니다.
ㅎㅎ 제가 분발해야겠네요~
영상 편집은 뭐로 하셨나요?
안녕하세요! Restore default thumbnail이게 뭐하는건지 여쭤봐도 될까요? 피그마 최선버전 썜 찾는 중입니다.. ㅎ
파일마다 파일에 대한 미릭보기 썸네일 이미지를 등록하거나 해제할 수 있는데, restore default thumnail을 선택하면 말그대로 수정된 썸네일 이미지를 복구 하는 기능입니다.( 기존 파일 썸네일 이미지를 수정한 버전으로 업데이트)
안녕하세요 연정쌤 ! 저는 IT 관련 학과에 재학 중인 대학생입니다. 이번 겨울방학에 동기들과 함께 모바일 유저를 겨냥한 웹앱 제작 프로젝트에 디자인파트를 담당해, 공부 및 UIUX 제작에 몰두하고 있습니다. 어쩌다보니 연정쌤의 여러가지 강의영상을 보고 많은 도움을 받았고 정말 감사하다는 말씀을 먼저 드리고 싶습니당 ㅎㅎ .
질문이 있습니다!
Q1. 저희 팀프로젝트는 지금 Wireframe과 UserFlowDiagram까지 제작을 한 상태입니다.
이제 Hifi 디자인으로 넘어갈 차례인데 팀장님이 프레임 사이즈를 가장 작은 iPhone SE 사이즈로 만들고
이후에 다른 디바이스 사이즈에 따라 반응하는 디자인을 만드는 것이 맞다고 합니다.
이 말이 맞나요?
Q2. 위의 내용을 바탕으로 SE 프레임사이즈에서 iPhone 14 프레임으로 변경하면 텍스트 사이즈가 변경이 안됩니다.
물론 텍스트를 Outline Stroke 기능으로 도형 취급 후 스케일을 변경하면 프레임에 따라 달라지지만, 이렇게 하면 가로가 길어지는 정도에 비해 세로로 길어지는 정도가 커서 텍스트가 세로로 늘려져서 보이는 현상이 발생합니다 ㅠㅠ
혹은 단축키 K를 사용하는 스케일 변경 키로 비율에 맞게 텍스트와 프레임을 조정할 수 있는 사실 또한 알고있지만, SE 사이즈에서 이 자동적으로 스케일에 따라 변경이 가능하지는 않더라고요..
제가 궁금한 점은.. 텍스트 크기 자체도 반응형으로 디자인하나요? 아니면 고정된 사이즈의 UI와 텍스트를 정해진 웹이나 모바일 디바이스 프레임에 맞춰서 제작하나요?
너무 길어져서 죄송합니다... 도와주세요.>!!
A1. 맞다 틀리다 정답은 없지만 최근까지 모바일 시안 대응으로 실무에서 375*812 해상도로 기본 해상도로 진행을 했습니다. 프로토타입핑도 이 해상도로 진행을 했어요.
A2. 반응형에 의해 해상도별 폰트 사이즈가 변경이 되어야 할 경우엔 해당 디바이스 해상도(ex. 320, 태블릿 해상도) 시안을 별도로 제공하거나 코멘트로 가이드 제공했어요. 레이아웃은 일반 오토 레이아웃을 활용하면 다양한 해상도에 대응이 가능해서 오토 레이아웃으로 시안을 구성하는 것을 권장드려요.
피그마 웹에서 플러그인 없이 파일 검색은 안되나요?
사실상 피그마에서 작업하는건 거의 모르는데, 가끔씩 다른분이 피그마에 올리는걸 제 영상에 써야할 때가 있어서 질문합니다.
아무리 사이트를 다 뒤져봐도 흔히 검색할 때 보이는 돋보기 버튼이나 키워드 입력창이 없더라고요. 키워드로 파일 검색하고 싶은데 말이죠.
피그마와는 별개로 이 영상을 어떤 프로그램으로 어떻게 만들었는지 궁금합니다.
하나의 주요 콘텐츠를 소개하는 영상을 만들고 있는데, 저같은 경우는 OBS로 캡쳐하고 프리미어, 에프터이펙트로 작업해왔습니다.
전체적인 느낌은 이와 비슷하게 만들었고, 이 영상처럼 부분적으로 확대하는 연출도 있는데, 문제는 제 경우엔 기존에 캡쳐한 영상이나 이미지를 확대하면 깨지는게 티가 난다는 겁니다. (작은거 늘리면 깨지는건 당연합니다만,)
제가 의도한 화면사이즈까지 하면서도 안 깨지게 하고싶은데 말이죠. 간단한 모션그래픽을 줄 뿐인데도 렌더링이 버벅거리고 화질이 깨집니다.
그리고 마우스가 모양이 자연스럽게 바뀌거나 커지는 연출도 이 영상에 있는데, 그런 부분은 어떻게 하셨는지 궁금합니다.
게다가 4K에 화질 열화가 없는데도 다운받아보니 이 영상은 한 13메가바이트정도 했습니다. (정확히는 다른분이 다운받는걸 봤습니다만,) 제 영상은 H264로 했음에도 최소 100메가에서 1기가까지 가는데 말이죠.
그래서 이 영상 제작을 어떻게 하셨는지도 궁금합니다.
또, 피그마는 검색 어떻게 하나요?
www.telestream.net/screenflow/overview.htm screenflow라는 유료 프로그램을 이용하고 있습니다. 4k 화질로 촬영했고요 촬영도 이 프로그램을 활용합니다.(확대해도 깨짐 현상 적음)
마지막 질문은 제가 이해를 못했네요.🥲
@@yeonjung-figma 마지막은 인코딩을 어떻게 하신건지도 궁금합니다.
유튜브에서 이 영상을 다운받아봤을 때 약 13~15 정도 MB로 나옵니다.(정확한 수치는 잊었습니다.)
4K에 10분이 넘으면서, 화질이 좋으면서도 저용량 파일로 만든 방법이나 설정이 궁금합니다.
@@yeonjung-figma 윈도우즈에서도 가능한가요?
상담 가능하신가요
😅
연정님 안녕하세요! 평소에 피그마 강의 너무 잘 보고 있어 감사한 마음이에요
저는 서비스기획자로 일하고 있는데요, 이번에 이직한 회사에 디자인팀이 없어서;;;;
이전에 외주업체에서 작업한 원본이 없어서 제가 서비스를 보면서 직접 피그마로 옮겨놓아야하는데요..
실서비스를 그대로 옮기는 역디자인 하는 방법 또는 과정 팁이 있으시면 부탁드려도 될까요? ㅠㅠ 도움청할 곳이 없어 문의드립니다,,