피그마 기초 강좌 |

[@yeonjung-figma]

* 회원 가입 및 figma 데스크톱 앱설치 : designer-story.tistory.com/34... * 새파일 생성하는 방법 : designer-story.tistory.com/38 * 피그마 시작 가이드 #인터페이스: designer-story.tistory.com/40

[@rebehayan]

강의 너무 좋은데요? 짧고 간략 핵심만 바로!! 꿀팁!

[@amjkim135]

재밌어용 감사합니다!!!!!!

[@Koshick]

지나가는 개발자입니다. 덕분에 잘 배우고 갑니다!

[@gracew2175]

피그마를 처음시작하는 디자이너인데요 ㅠㅠ 정말 도움이 됩니다~ 감사합니다!

[@twO_One128]

figma 처음 시작하는데 많은 도움이 됐습니다. 감사합니다^^

[@뿌잉뿌-x7d]

우와 choose image만 좋다고 생각했는데 unsplash 플러그인 진짜 좋네요!!

[@antiphramine]

처음부터 정주행 하고 있었는데 이쯤에서 다시 기초 복습하는 기분이라 이번 영상도 잘봤습니다. 감사합니다 ♥

[@peachpink5336]

연정님 강의 모두 수강하고 복습 예정입니다~🙋‍♀ 아자아자~~💪👏🙌🙌👩‍💻

[@csunk0104]

차분한 목소리로 차근차근 알려주셔서 너무 쉽고 재밌게 따라하게되네요 좋은 영상 강의 너무 감사합니다 ꈍ◡ꈍ

[@noxmov]

와.. 회사들어갔는데,, 피그마를 사용하고 있어서.... 감사합니다.... 제발 피그마 장인이 되고싶다...

[@UIMotionEffects]

갑자기 피그마가 필요해서 보게됐네요. 강의 구성을 꼼꼼하게 잘 하셨네요. 감사하게 잘 봤습니다.

[@ironship]

웹개발 포트폴리오 만드는데 디자인 문외한이라,, 정말 많이 도움 됩니다! 좋아요 1000번 눌러드리고 싶어요! 힘드셔도 유튜브 꾸준히 해주세요 선생님

[@liljazivert]

이 누나 영어 발음하시는 거 너무 귀엽다... 천우희 같아요... Getting Started = 게팅 스타티드 ㅎㅎㅎ

[@호엥-e4f]

따라하기 좋은 예제인데 너무 빠르네용! 동작을 잘게 쪼개서 한 동작이 끝난 다음에 자막과 음성을 넣어주시면 좋을거 같아요! 영상 감사합니다!!

[@바림-h4j]

감사합니다. 구독했어요 uiux디자이너인데 원래 xd와 스케치만 쓰다가 이직하면서 피그마의 중요성을 파악하고 기능을 살펴보던차에 영상을 보게되었어요 정말 잘설명이 되어있네요 생각보다 xd와 스케치랑은 좀 다른 느낌이 있어도 덕분에 금방 적응할거 같습니다..!!! 감사합니다

[@더쿠더쿠-o8e]

12:02 file > Save as fig가 제 피그마 화면에서 안보여요ㅠㅠ

[@gummm6553]

고퀄영상,,감사합니다!!

[@blackblackblackblack4444]

영상감사합니다 다만 Linear 라이너 x 리니어 o

[@dododo-g7z]

너무 친절하세요 감사합니다!!쉽고 빠르게 잘 배우고 가요

[@asdasdyun2873]

#1 중앙배치 단축키 Frame 선택한 상태에서 단축키 (Shift + 2)를 클릭 #2 이름변경 단축키 Frame 선택한 상태에서 (Ctrl + R) 클릭 #3 Frame Selection 지정한 프레임의 상위 그룹 프레임을 생성한다 단축키는 (Ctrl + Alt + G) #4 위 Frame Selection 의 상위 그룹 프레임을 지우고싶다면 Ungroup ( Shift + Alt + G ) 를 해주면 된다 #5 Contains란? 지정 오브젝트를 (혹은 다른것?) 상위 프레임의 크기 혹은 위치에 반응해서 움직이게 해준다. #6 이미지 불러오기 Design --> Fill --> Solid 를 Image로 변경후 불러오기 (Ctrl + Shift + K) 클릭하여 이미지를 불러올 수 있다. 원하는 영역에 클릭하여 이미지 붙여넣기 가능. 여러장 가능. #7 플러그인 사용하기 아무곳이나 우클릭하여 Plugins --> Manage Plugin #8 플러그인 (Unplash) Unplash를 사용하여 자신이 필요한 이미지를 기존에 있던 이미지와 교체해보자. #9 오토 레이아웃 ( Shift + A )

[@chanhee-jang]

피그마 야매로 쓰다가 강좌 보니 참 좋네요 히히 감사합니다!

[@yeonjung-figma]

2021년 버전 영상도 꼭 보시길~ ㅎㅎ

[@bej8046]

기초 강의인데 새문서를 만드는 법 부터 알려주셔야 하는것 아닌가요?...

[@yeonjung-figma]

사람마다 생각하는 기초가 다른 점을 제가 놓친거 같습니다. 우선 제영상을 모두 보실 경우, 전반적인 피그마 사용법을 익히실 수 있도록 영상을 기획했습니다. designer-story.tistory.com/38 기본 초기 사용법에 관한 보충 설명은 저의 공식 블로그를 참고하시면 도움이 되실거에요. 그리고 이 영상의 경우 작년에 만든 영상이어서 2021년 버전도 참고하시길 추천드립니다. 피그마의 인터페이스 및 사용 방법이 다른 툴들에 비해 굉장히 빠르게 업데이트되고 있다는 점도 참고 부탁드립니다. [기본 가이드] * 회원 가입 및 figma 데스크톱 앱설치 : designer-story.tistory.com/34?category=978073 * 새파일 생성하는 방법 : designer-story.tistory.com/38

[@임엘리-i8e]

피그마 프로그램 시작하려고 하는 디자이너 인데 많은 도움이 되었습니다. 감사합니다,^^

[@yeonjung-figma]

ㅎㅎ 도움이 되었니 기쁘네요. 좋은 툴이죠~ 알면 알 수록 빠져 들거에요.

[@이동석-d1y]

감사해요~~~ 많이 배웁니다~~!!!!!

[@kennygo5053]

그런데 오토레이아웃은 뭐하는데 쓰면 좋아요?

[@ysj5876]

우클릭해도 MANAGE PLUGIN이 안뜨는 경우는 어떡하죠?

[@yjkim-lp9is]

자세히 알려주셔서 감사합니다! 설명이 잘되어있어서 이해하기 쉬웠어요!!

[@도토리-l7n]

감사합니다!

[@asdasdyun2873]

Clip Content 는 정확히 무슨역할을 수행해주는 장치인가요?

[@yeonjung-figma]

프레임 영역 밖의 영역을 보여줄지 말지 선택하는 옵션이에요. clip content를 체크한 경우를 css 로 옮긴다면 overflow: hidden; // 해석: 지정한 영역 밖의 것(넘치는 것)에 대해 보여주지 않기에 해당됩니다. 최근 업데이트한 card component, 온보딩 영상에서도 사용한 기능이니 보시면 참고가 될거에요~

[@asdasdyun2873]

@@yeonjung-figma 감사합니다!

[@뿡야뿌웅]

왜 이렇게 수치를 변경하는지, 왜 이런 선택을 했는지에 대해서 설명이 있으면 더 좋을 것 같습니다..!

[@바림-h4j]

사실 해당 툴은 디자인 툴이기 때문에 수치변경과 선택에 대한 내용은 강의를 위해 임의로 보여주신것 뿐 툴을 실제로 사용하실때는 해당 수치나 선택은 작업자의 주관으로 판단하셔서 사용하시면 됩니다.

[@명시온]

너무너무 감사합니다 이런 영상 만들어주셔서ㅠㅠ!

[@파테-y8w]

figma에 관련된 기초 영상들이 없어서 처음 배우는게 너무 힘들었는데... 올려주신 영상 정말 이해하기 쉽네요!! 구독하고 업로드 영상 자주 보겠습니다 :)

[@yeonjung-figma]

보람차네요~ ㅎㅎ figma가 요즘 열심히 기능 업데이트 중이라 올릴 콘텐츠가 줄지를 않네요 ㅎㅎ 부지런히 시간날때마다 작업중입니다. 화이팅!!

[@파테-y8w]

@@yeonjung-figma 마지막에 인스타랑 페이스북 디자인 작업하시는 부분이 다른 추천동영상 뜨는 화면때문에 가려지더라구요 ㅎㅎㅎ 추천 동영상을 다른위치에 보여지게 하는게 좋을것같아요!

[@yeonjung-figma]

@@파테-y8w 오!! 피드백 감사용♡

[@yeonjung-figma]

@@파테-y8w 엔딩 타이밍 변경했습니다. 영상을 끝까지 시청해주셔서 감사합니다. ^^b 참고로 다음 영상에서는 머터리얼 아이콘을 기준으로 도형 툴 및 펜툴을 활용해서 아이콘을 제작하는 방법과 컴포넌트를 활용하는 방법에대해 준비중입니다. 다음주 화요일 8시 에 오픈 예정이니 참고해주세요.

[@서울촌년-l6x]

전 xd사용자인데도 이강의가 왜 어렵다고 생각될까여? 0.5배속으로 들어도 매우 빠르고 작업을 하실때 왜 이걸 하는지를 알려주셔야될 것 같아여 -_-;;;;

[@yeonjung-figma]

예전 영상이라 부족한 부분이 많은게 사실이에요. 피그마가 또 동시에 쉬운 툴은 아니고여 ㅎㅎ

[@김소민-l6y]

너무 좋은 강의 만들어주셔서 감사합니다 피그마 기초강의라는 점이 좋았지만 용어 정리가 잘 안되는것같아서 무슨 의미인지 정확히 못알아듣는 경우가 좀 있었습니다

[@yeonjung-figma]

용어라면 어떤 용어인가요? 다음 영상 제작 시에도 참고하겠습니다.

[@hyosimko373]

감사합니다~ 협업툴 로 사용 중 이여서 배우는 단계인데..이 강의 듣고 바로 디자인 접목시킬수 있겠어요 !

[@돌봉이-f7u]

개발자인데 좋은 강의 감사합니다 기획할일이 생겨서요...

[@yeonjung-figma]

아이쿠.. 제가 재직중인 회사도 기획자가 없어서 개발자분들이랑 디자이너가 협업해서 기획 같이하고 있어요 ㅎㅎ

[@yeonjung-figma]

Figma Kits 샘플 모음 #ux #figma #wireframe - designer-story.tistory.com/m/5 이 링크 참고하시면 무료로 피그마 에셋 활용하실 수 있어요~ (피그마 공식 커뮤니티에서 검색) 다음 링크도 강추요. { figma에 의한 디자인 시스템 구축 사례 및 개념 정의 - designer-story.tistory.com/m/14 }

[@Sjin214]

감사해용~~ 덕분에 배워갑니다

[@사자-q2u]

두 달 정도 BXBI 프로젝트 하고 왔더니 피그마를 완전 다 까먹었는데, 너무 구세주 같아요...! 감사합니다!

[@yeonjung-figma]

ㅎㅎㅎㅎ

[@8JeongHoon5]

정말 쉽게 잘 설명 해주셨네요!! 하루에 1개 강의씩 봐야겠네요 구독 좋아요 했습니다! 힘찬 한주 시작하세요!

[@yeonjung-figma]

감사합니다. 오토레이아웃 기능 영상 추천 드려요~ㅎㅎ

[@YongssKim]

안녕하세요. 잘 보고 있습니다. 도움 많이 돼요ㅠㅠㅠ ..질문 하나 드립니다. Unsplash 등록하려는데 Manage plugins 는 없고 Find more plugins만 나오는데 그냥 등록 없이 써야하는 걸까요.?

[@혜원진-f7g]

연정님! 혹시 피그마는 포토샵처럼 듀얼 창으로 못쓰나요? 작업창여러개 탭에 켜지는건 좋은데, 바로 옆에서 비교해서 보고 싶을 때가 있거든요ㅠㅠ 그리고 강의덕에 회사에서 피그마 잘 사용하고 있어요!! 감사해요!

[@yeonjung-figma]

포토샵처럼 듀얼은 안되는 거 같고, 저의 경우는 캔버스 내에서 프레임 단위로 비교를 하거나 파일 의 페이지 기준으로 비교 시엔 듀얼 모니터로 별도 웹 브라우저 창을 띄우고 작업한 적은 있어요.

[@혜원진-f7g]

@@yeonjung-figma 저도 그렇게 사용하고 있었는데, 요 방법이 베스트 인가봐요 ㅠㅠ 답변 감사합니다!

[@ssssksss]

강의 잘 들었습니다. 감사합니다.

[@yeonjung-figma]

Part2 영상은 채널 토론 페이지에도 공지 드렸듯이, 머터리얼 디자인 가이드를 기준으로 Pen & Shape툴을 활용한 아이콘 제작 방법에 대해 업데이트 예정입니다.

[@louislee8528]

완전 기대 중 입니다!

[@yeonjung-figma]

* 피그마 로그인 후 기본 화면 가이드: designer-story.tistory.com/38 * Figma 유료 결제 시 유의사항 (Feat. 회원가입 후 기본 설정) designer-story.tistory.com/35 [영상 목차] 00:08 frame & constraints 01:49 이미지 불러오기 (다중 이미지 import 포함) 02:50 Plugin 설치하여 이미지 변경하기 #unsplash 03:57 이미지 오버레이 06:12 텍스트 편집 07:28 오토 레이아웃 (Auto Layout) 09:21 Drop Shadow Effects 11:36 Export 기능 (png, jpg, pdf, fig) [블로그] designer-story.tistory.com/12

[@하다애]

연정님 감사해요 회사에서 피그마를 사용해서ㅎㅎ 배워야 했는데 기초부터 차근차근 알려주셔서 잘 배웠습니다. 다음 2탄 들으러 갑니당 (너무 빠르게 진행된다고 생각하시는분들은 0.75배해서 보세용>_< 아주 속도 잘 맞고 좋아요❤)

[@yeonjung-figma]

2탄 뒤에 오토 레이아웃 영상을 보는 걸 추천 드려요~!! ㅎㅎ 화이팅!!

[@냐냐냐-y7e]

질문이요 figma에 표만드는 법은 어느 영상 참고하면 될까요?

[@yeonjung-figma]

아쉽게도 표만들기는 저의 영상에서 다룬적이 없어요. 오토레이아웃 기능을 응용해서 만드는걸 권장 드려요. 피그마 커뮤니티에 가시면 샘플 확인도 가능해요.

[@arnebet8261]

👍👍

[@사자-q2u]

기초 강좌라서 너무 좋아요!!! 제가 처음 피그마 접했을 때 알았으면 더 좋았겠지먼ㅠㅠㅠ 저는 개발세발로 배워서 조금씩 '이런 단축키가 있었다니?!' 하는 것들이 있어서 좋았어요! ㅎㅎ

[@yeonjung-figma]

단축키 특집으로 영상 하나 만들까하고 정리 중이에요. ㅎㅎ

[@SLACKER_YU]

혹시 프레임 사이즈를 1440px로 작업하는 이유가 있을까요? 웹페이지는 1920px로 작업하지 않나요?? 순수하게 궁금합니다.

[@yeonjung-figma]

이 영상의 경우 웹디자인과는 별개일 수 있지만 실무에서 반응형웹을 주로 디자인하다보니 상황에 따라 다르게 작업했던 거 같아요. 예를 들면 1600에 안에 콘텐츠는 1400으로 max 로 한 경우도 있었고 최근 대시보드 서비스 작업의 경우는 1920으로 했어요 ~ 1920으로 하더라도 모바일이나 태블릿 사이즈도 고려해야하므로 경우에따라 1024나 768 그외 기타 가로 사이즈도 작업했습니다.😀

[@예경-m2y]

우와 감사합니다 ㅠㅠ 디자인 전공인 학생인데 학교에선 ui쪽을 아직 배우지 않아 어떻게 공부하나 막막했는데.. 이거 틀어두고 따라해봤더니 정말 많은 도움 되었어요!! 영상 올려주셔서 감사합니다 🥺💕다음 영상도 차근차근 잘 따라해보겠습니다!!

[@yeonjung-figma]

figma 관련해서 포스팅할 블로그 개설했습니다. 많이 애용해주세요. designer-story.tistory.com/pages/About

[@knyatom2296]

피그마에서 특정 화면페이지로 이동하는 기능이 있나요????

[@yeonjung-figma]

링크 기능을 활용하면 될거 같네요. (텍스트 입력후 텍스트를 선택 후 링크 연결 가능하고요. 해당 기능은 텍스트 선택 시 화면 중앙 상단에 연관 툴 🔗이 표시되요) 화면 또는 프레임 단위 링크 추출 방법은 파일 공유 영상을 참고하시면 도움이 되실 거 같아요.

[@열정맨-q3f]

피그마에서 이렇게 작업하는거보다 포코샵에서 작업하고 여기로 가져와도 되는거죠?

[@yeonjung-figma]

포토샵은 우선 UI 제작툴이 아니라는 점을 안내드리고 싶습니다. 가능은 하지만 굉장히 비효율적입니다. adobe에 있는 xd 도 피그마와 유사한 툴이라고 할 수 있습니다. 스케치나 피그마를 사용한 뒤 부터는 포토샵은 이미지 편집 시에만 사용하고 있습니다. 포토샵과 다르게 피그마는 html 및 css에 대한 기본 지식이 있어야 이해가 가는 툴이기도 하고요. 주변 분들에게 피그마 쓰면 왜 좋은지 물어보는 것도 좋은 방법일 거 같아요. 제 블로그에 가면 그와 비슷한 글이 있습니다. 참고해주세요~

[@dahyekim8130]

현재버전 피그마에서는 save as figma 메뉴가 없는데 사라진 메뉴인가요. 아니면 유료버전 가능한건가요??

[@yeonjung-figma]

질문을 너무 늦게 보았네요. 메뉴명이 바뀐 것 뿐이고 무료에서도 가능합니다. (변경된 메뉴명: file > save local copy)

[@ramen293df]

혹시 피그마는 단축키 설정을 못바꾸나요? 검색해도 안나와서요 ㅠㅠ

[@yeonjung-figma]

안될거에요~ 혹시 찾으시면 공유 부탁드려요~

[@ramen293df]

@@yeonjung-figma 네! ㅠㅠ 일단 실무친구한테 물어봐도 안된다고 하네요..흑흑..ㅠ

[@Palconf]

피그마기능5가지랑설명좀부탁해요 ㅜㅜ

[@염희경-c4o]

영상 감사합니다. 너무 도움되었어요 ^^

[@user-hr6jc5nj3m]

실수했을대 그전으로 되돌리는 단축키 뭔가요?

[@yeonjung-figma]

ctrl(command) + z 입니다. Tip. 그외 버전 히스토리 기능을 활용하는 방법도 있습니다.

[@피린이-t9v]

안녕하세요 피그마로 앱화면을 만든다음에 오른쪽 상단에 재생버튼을 눌렀는데.. 저는 왜 폰 화면(?)목업(?) 같은게 안나오고 그냥 폰 모양없이 페이지만 덩그러니 나오는데.. . 이유를 알 수 있을까용?

[@yeonjung-figma]

#1 피그마 강좌 l 연정's figma 온보딩 2022 kzbin.info/www/bejne/r3uoco2XaJmVe6s (06:46) 이 영상에 셋팅 방법 안내되어 있어요~ 디바리스 관련해서 별도 셋팅이 필요해요!

[@sang-eunlee6217]

강의 잘 보고 있습니다. 감사합니다. 질문이 있는데요, 중간에 이미지 영역 위에 네모박스 그리고 정렬할 때, 그 이미지를 중심으로 가운데 정렬이 되어야 하는 건데 저는 그 이미지박스가 아니라 프레임 기준으로 가운데 정렬이 되더라고요.. 어떻게 해야 하나요?ㅠㅠ

[@yeonjung-figma]

레이어 구조 및 constains의 옵션을 다음과 같이 설정을 혹시 하셨나요?: frame(이미지를 감싸는 frame) > image(이미지의 constraints 옵션: scale, scale), 이미지 위에 네모 박스 객체(constraints 옵션: center, center)

[@구아바-o7s]

저도 계속 이미지 scale로 변경하고 프레임기준로 정렬되는데 어떻게 해야하나요? ㅠㅠ

[@cmk0830]

ㅠㅠ저도 똑같은 조건을 갖췄는데도 1번 프레임 기준으로 정렬이됩니당....

[@dmdrk2222]

저도 그렇습니다ㅠ

[@YejinLee-sr8pw]

01:31 저도 여기서 좀 헷갈렸는데 박스를 감싼 #left frame 레이어로 선택한 상태에서 width값을 1440/2 해야지 가로세로 정렬이 적용되요. 스케일설명하시다가 갑자기 01:44 여기서 1440/2로 바꾸라고하셔서 헷갈렸음..

[@estherpark4504]

텍스트끼리 선택해서 auto layout만들면 밑에 있는 텍스트가 왼쪽으로 이동하는데 왜그런걸까요??

[@yeonjung-figma]

시스템상 오토레이아웃 기본값이 왼쪽 탑 정렬이기 때문입니다. 수동으로 매번 조정을 해줘야해요.

[@uiopo2]

안녕하세요! 강의 따라하고 있는데 매니지 플러그 들어갔을때 강의와 똑같은 사이트처럼 나오지 않고 lnstalled 와 ln development 가 있는 창이 뜹니다 ..! 아예 생 초보라 이게 무엇인지 모르겠네요 ㅜ ㅠ

[@yeonjung-figma]

피그마 커뮤니티(피그마>죄측 메뉴>community)에서 검색하시면 돼요~

[@yeonjung-figma]

참고 영상 : kzbin.info/www/bejne/Y5SqiWxsdqpkqrs [파일 공유 영상의 0:27]

[@sowonbaek7943]

너무나 좋은 영상 감사해요 근데 처음부터 막히네요 피그마 생초짜인데 렉탱글 만들고 오른쪽 마우스키 누르는데 연정님과 같은 리스트가 안나오고 copy / plug in만 나오네요 플러그인을 뭐 깔아야 하나요? ㅜㅜ 무슨 일 때문인지 이미지 불러오기 하는데도 이미지가 안들어오고 그대로 타일모양에서 변함이 없어요

[@versatiledeer6811]

7:28에 단축키가 안먹는데 윈도우에서는 어떻게해야하나요? alt누르면 복제가 됩니당.. 방향키역시 그냥 이동만 되구 폰트사이즈가 안변하는데 어디서 잘못된 걸까용!

[@yetgut23]

앗 선생님..요거 보고 따라하고 있는중에 플러그인 위치가 달라진것 같아요.. 제가 돈내지않고 사용해서 그런걸까요ㅠㅠ 플러그인이 쉽게 안보이는 위치로 바뀌어서 혹시 이거보고 당황하시는분들 왼쪽메뉴쪽에서 Community[beta]로 들어가셔야해요~!

[@yeonjung-figma]

커뮤니티에 가입하고 승인이 된 분들은 커뮤니티 베타로 보이고, 가입을 안하신 분들은 플러그인으로 표시 될거에요~ 참고요 ^^

[@yeonjung-figma]

help.figma.com/hc/en-us/articles/360040450413-Find-and-install-plugins#Install_a_Plugin 최신 정보는 이곳에서~

[@ktseo41]

잘봤습니다 감사합니다.

[@wongyuseo3878]

linear 발음하실때 라이너가 아니라 리니어로 해주세요~

[@yeonjung-figma]

👌

[@kjm6574]

영상 감사합니다! 다만, 설명을 좀 더 천천히 해주시면 좋을 것 같습니다

[@yeonjung-figma]

피드백 감사합니다~ ^^ 노력해 보겠습니다.

[@kjm6574]

연정's Figma 감사합니다:-) 근데 한가지 궁금한 부분은 피그마에서 뒤로가기 기능은 없는건가요?ㅠㅠㅠ

[@yeonjung-figma]

@@kjm6574 command(Ctrl) + z / Version History 기능으로 가능요 Part 3 영상 참고하시면 도움이 되실거 같아요. 앞 부분에 있습니다.

[@narai17]

이미지 불러오거나 색상 넣었는데 색이 탁하게 되는건 어떻게 고치나요?

[@billiejeong]

안녕하세요 궁금한 사항있어서 댓글남깁니다. 피그마로 작업해 이름표를 출력하려는데 작업하고자 하는 이름표 사이즈가 17cm X 6.5cm 인데 단위가 cm라 픽셀단위로 된 피그마에서 프레임 단위를 어떻게 cm로 바꿔서 작업해야 되는지 여기저기 찾아도 알 수가 없어서 여쭤봅니다! 답변 부탁드려요!

[@yeonjung-figma]

음 아쉽게도, 저도 그부분은 해본적이 없어서 답변 드릴 수 가 없을거 같아요~ 만약 저라면 figma에서 일러스트나 포토샵으로 svg 파일로 옮긴다음 원하는 사이즈로 출력할거 같아요~

[@삐로리띠로리]

커맨드 r 단축키 눌러도 이름 변경이 안되는데 따로 설정해야 하는 건가요?

[@yeonjung-figma]

선택한 레이어 명에 대해서 적용되는 단축키입니다~ 페이지 명 변경시엔 안되더라구요. 플러그인 중에 rename it 이 있는데 추천드려요~

[@삐로리띠로리]

답변 감사합니다~!! ^^

[@귤껍데기-w3l]

안녕하세요, 혹시 properties pannel의 x,y,w,h position 바로가기 단축키가 뭔지 알 수 있을까요? 스케치는 opt+tab인데 피그마는 모르겠어요. 좋은 영상 항상 감사합니다

[@yeonjung-figma]

아쉽게도 찾아봤지만 못찾았어요~ 생각을 못했는데 그런 단축키가 있으면 편할거 같네요~ ^^

[@yjw8657]

7:46 저번에 답변주신거 감사합니다! 두 텍스트 사이가 박스사이즈가 달라서인지 5로하면 너무 멀고 -20 이렇게 줘야 영상처럼 나오더라구요 ㅠㅠ 텍스트 박스 크기를 어떻게 변경해야할까요??

[@yjw8657]

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ저번 질문이랑 상통하는 부분이네요 ㅠㅠ 그냥 행각을 120이 아니라 120%로 넣음 해결되네요 ㅠㅠㅠㅠㅠㅠㅠ

[@yeonjung-figma]

figma 강좌 4 - Text Styling & 실무에서 유용한 텍스트 편집 노하우 #피그마 #Type 이 영상 아직 안 보셨다면 추천드려요~

[@nomonomo7063]

안녕하세요 오늘 처음으로 강의를 듣게 되었는데요, 텍스트를 클릭해서 텍스트를 쓰면 텍스트박스 세로값이 0이 나와요. 이래도 되는건가요? 아니면 제가 뭘 실수 한걸까요?

[@yeonjung-figma]

폰트 종류에 따라 기본값이 달라서 인거 같아요. 폰트 종류가 무엇이죠?

[@박나림-k4w]

너무 빨라요 ㅠㅠㅠㅠㅠㅠ

[@yeonjung-figma]

😭

[@mayshin9275]

피그마는 뒤로가기 ctrl+z 가 단축키가 다른가요? ㅠㅠ 뒤로가기가 안되유....

[@yeonjung-figma]

저는 맥을 쓰고 있어서 command + z 로 되는데 혹시 한글키가 활성화 되었는지 여부 확인, 또는 윈도우 창을 끄고 다시 열어서 재시도를 해보세요~ 참고로 피그마는 자동 저장 기능이 있어서 Version History 기능으로 특정 구간으로 복구 가능합니다. (인터페이스 Header 중앙의 타이틀 오른쪽 화살표를 클릭 하시면, Dropdown 메뉴에서 Version History 메뉴 확인 가능합니다. 또한 특정 구간을 이름을 지정하여 저장하고자 할 경우 맥의 경우 option + command + S 윈도우의 경우 alt + ctrl + s 단축키로 저장가능합니다.

[@hwison4193]

그라디언트 적용할때 위아래 연결된 라인이 안나와서 그라데이션 시작 위치 변경이 안되는데 왜그럴까요..? ㅜㅜ

[@yeonjung-figma]

그라디언트 오브젝트를 선택하고 오른쪽 Design 패널의 Fill의 색상 미리보기 영역을 클릭해도 같은 현상일까요?

[@indes1004]

안녕하세요 영상 너무 감사해요 ^ 질문이 있는데요! 프레임 안에 또 프레임을 만드신 후 작업하신 이유가 무엇인가요? 편하게 관리하기 위함일까요? (기능에 따라 화면이 많아져 레이아웃 패널이 복잡해질 수 있기 때문에 그룹화 작업을 한 것)

[@yeonjung-figma]

퍼블리싱을 할때 블럭(block)요소에 대해 div 태그로 요소들을 그룹핑 하는 것과 같은 원리입니다 피그마에서 그룹화 시키는 요소가 3가지가 있는데 일반 group(command +g), frame(f), auto layout frame(shift+a)입니다. 케이스 바이 케이스이지만 일반적으로 group 보다는 일반 frame 및 auto layout frame 을 더 많이 사용하는데, 반응형 요소들을 컴포넌트화 할 경우 이 두 frame을 사용합니다.

[@indes1004]

친절한 답변 정말 감사합니다 ㅎㅎ 👏👏

[@드림이-k9m]

안녕하세요! 초보라서 하나 여쭤보고 싶은게 있는데요.. 영상 처음 부분에 프레임을 만들고(#1) 다시 사각형그리고 이걸 다시 Frame selection을 해서 프레임으로 만들고(LEFT) 크기를 조정하시는데, 처음부터 프레임의 크기 조절을 통해서 그리면 안되나요?ㅠ

[@yeonjung-figma]

물론 그래도 됩니다. 그 화면은 가로 full 사이즈 기준 50프로 사이즈로 left 박스의 사이즈로 변경하는 방법(/ + - * 연산)에 대해 알려 드리려고 의도한 화면입니다.

[@드림이-k9m]

@@yeonjung-figma 선생님 그러면 일반적으로는 그냥 frame에서 그리고 바로 이미지 불러오고 이렇게 작업하면 되는거죠? 말씀해주신 left 박스 사이즈로 변경하는 경우가 보통 어떨 때 일지 감이 안와서 여쭤봅니다ㅠ

[@yeonjung-figma]

@@드림이-k9m 넵 드림이님이 편한 방향으로 해도 됩니다~ 이미지를 불러오고 Masking 해도 되고요~ 제가 강좌에서 알려드리는 부분은 누하우를 전하고 툴을 익히게하기 위함이지 반드시 이렇게 해야한다고 정의하는 부분은 아닙니다~ ^^ 이미지를 불러오는 방법에도 4가지 이상이 있기 때문에 상황에 맞게 편한 방법을 채택하시면 될거같아요~ 시작이 반입니다 ㅎㅎ 이 영상을 보셨다면, Auto layout 영상도 꼭 보세요. 추천드립니다. kzbin.info/www/bejne/jXScd5uahNGnd5Y

[@webloom-v5c]

안녕하세요 애청자입니다! 혹시 피그마 상에서 텍스트 스타일 말고 텍스트 자체만 복사하고 싶은데 방법이 없을까요? 빠른 답변 부탁드립니다.

[@yeonjung-figma]

design 패널 우측 inspect 패널(스타일 뷰)이 활성화 된 상태에서 해당 텍스트 선택하시면, 패널에서 텍스트만 카피 가능해요.

[@webloom-v5c]

@@yeonjung-figma 감사합니다! ㅠㅠㅠ

[@hotzzi]

친절한 가이드 감사드려요! figma 로 이미지 export 하니까 파일 용량이 엄청 크게 나오는데 포토샵처럼 파일 사이즈 조절하는 방법이 있을까요?

[@yeonjung-figma]

안녕하세요~ 이미지 및 pdf는 figma plugin(TinyImage-Compressor)을 활용하면 줄일 수 있어요~ www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor (초반엔 무료이고 유료로 전환된다고 하네요) pdf로 변환시, 아주 유용하게 잘 썼어요~ / 그외 pdf 압축 수단Adobe Acrobat(일주일 정도 무료)

[@yjw8657]

피그마에서 텍스트 자간이 퍼센트로 나와요 ㅜㅜㅜㅜ 어떻게 바꾸는지 아시나요?

[@yeonjung-figma]

픽셀로 변환하길 원하시면 0.5px로 또는 -0.5px 처럼 px 단위로 입력하시면 됩니다.