안녕하세요. 강의 보다가 궁금한 점이 있어서 질문드립니다. 3:36 bullet이라는 이름의 아이콘은 어떻게 제작하신 걸까요? 그냥 원형툴 이용해서 만든다음 텍스트와 shift+A사용하면 위치가 달라지더라구요.. 자체 패딩 값을 가지고 있는 듯 하게 보이는데 제가 만든건 텍스트 값 자체가 위아래 여백이 살짝 있어서 아이콘 위치와 높이가 틀어집니다 ㅜㅜ 도움 부탁드려요..
* 강좌 요약 2:11 1/5 텍스트 편집의 체계화를 위한 Text Styling 기능 3:36 2/5 Text Style Guide 제작 노하우, px 단위를 rem으로 변환 하는 방법 5:53 3/5 Auto Layout & Text option 셋팅에 의한 반응형 텍스트 8:41 4/5 Text Detail Option Tip 10:40 5/5 Text Scale & Text를 Shape로 변환 하는 방법 [영상에서 언급된 샘플 파일 figma url] www.figma.com/file/sEzcbf6sRjWZT6HmA5ENRI/Text-Styling_Before?node-id=0%3A1 [샘플 파일 복제하는 방법] designer-story.tistory.com/16
안녕하세요 항상 잘 보고 있습니다. 텍스트 관련 질문이 하나 있는데요. 지인들에게 물어봐도 잘 모르길래 혹시 아실까 하고 여쭙니다.. 2줄 이상의 텍스트를 써야 할 경우 1. 텍스트박스가, 피그마에서 보이는것과 동일하게 개발시 실 구현이 될까요?(행간 변경시 글줄 사이 여백만 변화하는 것이 아닌 텍스트박스의 위/아래 여백도 변하는 문제) 2. 안된다면 2줄의 경우, 행간을 pt가 아닌 %로, 즉 100%로 입력하여 2개의 텍스트박스를 만들고 간격을 조정하여 행간을 조절한 효과를 내야할까요? 1줄인 경우 고민없이 100%행간을 사용하고 있으나, 이대로 2줄을 쓰면 당연히 지나치게 행간이 밀착되기 때문에 그렇습니다.. 아마도 차선책으로 2번이 정답일 것 같은데 혹 다른 방법이 있을까 여쭤봅니다. 정말 많은 도움 얻고 있습니다. 감사합니다!
1. 피그마에서 보이는 것과 동일하게 행간(lign-height), 자간(letter-spacing), 정렬(align), 개발 시 구현 가능합니다(O) 2. 두 줄의 경우 %단위로 행간을 조정하는 것이 폰트 크기에 구애 받지 않고 행간을 유연하게 조정 할 수 있습니다. (권장) 줄바꿈이 없는 타이틀로 쓰이는 텍스트(h1~h6, title: 행간 100%)와 줄바꿈이 되는 문장으로 쓰이는 텍스트(body, paragraph: 130%~160%) 로 구분하여 용도별로 폰트를 스타일화 하여 사용하고 있습니다.(피그마의 create style 기능사용) 또한 버튼의 경우는 줄바꿈이 되는 경우가 없으므로 lign-height를 100%로 기본 셋팅을 하고 있어요.
기획일을 하고 있는 구독자입니다. 질문 하나만 드릴게요. 텍스트박스 height값은 어떻게 지정하는게 좋은 선택인지 조언 좀 부탁드립니다. 그냥 텍스트 한줄이면 크게 문제가 없을거 같은데, 아래/위 요소와 여백을 지정하는 부분에서 텍스트박스 높이값에 따라 달라지는거 같아서요(초보는 웁니다. ^^;) 예를들어 font-size가 16이면 텍스트박스도 동일하게 16을 지정하는게 좋은 선택인지 나중에 시간 나시면 조언 부탁드립니다. 코로나 시국에 건강 잘 챙기세요~
텍스트 박스 높이는 auto로 해주되 행간(line-height)의 설정은 px 기준 보다 %로 기입하는 것이 폰트 사이즈 수정 시 시간을 절약할 수 있어요. 폰트 사이즈가 16이라면 줄바꿈이 없을 한 줄일 경우엔 행간을 100%로, 줄바꿈이 있는 텍스트의 경우 130%~ 160%정도로 해야 가독성 면에서 좋아요(폰트 종류 & 사이즈에 따라 적정 %는 다를 수 있음)~ 이때 %에 따라 텍스트 박스 높이는 자동으로 조정됩니다. 텍스트 박스 높이 사이즈는 가급적 임의로 조정 안하는 걸 권장 드려요. (특히 오토레이아웃을 사용 할 경우)
피그마에서 첨자(위첨자, 아래첨자, ℃ 같은)를 사용하려면 어떻게 해야 하나요? 폰트 세팅창 띄워서 [Numbers - Position]에서 선택하는 거 맞죠? 근데 선택한 텍스트에 적용할 수 없다 거나 해당 폰트는 첨자를 지원하지 않는다라는 메시지만 보이고 첨자는 아예 비활성화네요;
쌤 늘 잘 보고 있는 중 질문이 있습니다. 만들고 있는 프로젝트에서 공통적으로 사용되는 텍스트 스타일이 있는 반면, 단 한 군데에서만 사용되는 텍스트 스타일(예를 들어 letter spacing이 약간 조절된)이 있는 경우 어떻게 해야 할까요? 이 경우에도 디자인시스템에 추가하는게 맞는지, 이름은 어떻게 가져가면 좋을지 고민이 많습니다 ㅠ
음, 한 번만 사용한 스타일이라면 당장은 스타일을 정의하지 않아도 된다고 보고요~ 저라면 폰트 크기가 동일한 비슷한 케이스의 기존꺼를 수정해서 재사용하거나(추천), 두 번 이상 사용될 타이밍에 스타일을 추가 할 거 같아요~ 사실 답은 없고 추후 수정이 쉽게 셋팅하는게 장기적으로 좋을 거 같아요. ㅎㅎ 제품이 완성될때까지 계속 수정하게 되더라구여 🥹 말해 놓고 보니 스타일을 만들어 놓는 편이 낫겠네요 ㅎㅎ
구두로 설명 드리기 좀 힘든 답변이지만 일단 답변을 드리자면, Layer 패널에서 해당 오토레이아웃 프레임을 선택하고, 오른쪽 Design 패널에서 Auto layout 옵션을 찾으시고요~ 우측에 "-" 버튼이 보일거에요. 이 버튼 밑에 있는 정렬 아이콘 버튼을 선택하신 다음 디폴트로 left & top으로 되어 있는 부분을 left & center 상태로 변경 하시면 Auto Layout안에 있는 객체들에 대한 정렬을 수정 할 수 있습니다. 또는 정렬은 그대로 유지하고 상하좌우 Padding 값을 변경하여 텍스트의 위치를 변경 할 수 있습니다.
방금 테스트로 X, Y에 20% 라고 입력하니 연산이 되네요. 또 다른 방법엔 픽셀 기준으로 수치 입력란 300/2, 10*2 처럼 연산해서 값을 조정할 수는 있습니다. 예를들어 y position이 0인 위치에 박스를 그렸다면 y position에 300/2를 입력하고 엔터를 하면 연산해서 150으로 가는거죠 질문에 대한 답이 되었을까요?
![[피그마강좌] #09. 스타일등록 및 복사 - color, text, effect 등록](http://i.ytimg.com/vi/WUqzBy421wM/mqdefault.jpg)
![[피그마] Figma Auto Layout Playground 새로워진 피그마의 오토 레이아웃 알아보기](/img/1.gif)
뭔가 피그마는 공통적으로 사용해야하는 디자인 작업에 정말 최강인거같아요..
너무짱이다
포샾쟁이는 충격먹고 피그마와 사랑에 빠졌어요
오토레이아웃 기능 너무 사랑햄
영상 너무 잘보고있어용 감사합니당
감사합니다! 적게 일하시고 많이 받으세요 돈도 복도
적게 일하기는 이번 생애 틀린거 같아요. ㅋㅋ일복은 타고나서... 덕담 감사합니다 ㅎㅎ
덕분에 피그마 공부 잘 하고 있습니다!! 항상 감사합니다!! 조금이나마 힘이 되시길 바라는 마음으로 이렇게 댓글 남깁니다 !!
강의가 감동적입니다 !☆
안녕하세요^^ 6월 부터 영상을 업데이트 하려고 계획중입니다. 혹시 가장 알고 싶은 기능은 무엇인가요? 추후 영상 제작시 참고하여 제작하려 합니다.
@@yeonjung-figma 피그마 강의도 너무 좋았고 그외 해상도별 작업방식, 기준 등을 잡는 ui작업시 기본적인 팁 등도 더 많았으면 좋을 것 같습니다!
감사합니다. 한번다 보고 또 보고 있어요 ^^*
안연정님 강의 너무 감사합니다.
너무나 유익한 강의 감사합니다. 여러 피그마 튜토리얼 영상중 가장 좋은 강의에요 ! 더 심도있는 피그마 강의 앞으로도 부탁드립니다
감사합니다~ 이직 이후 바빠서 두 달째 다음 영상을 못 올리고 있네요~ 빠른 시일 내에 더 좋은 영상으로 다시 찾아뵐 수 있도록 여유가 생기는 날을 기대해 봅니당 ㅜㅡ
연정 디자이너님 미친 일잘러,,, 진짜 너무 많이 배우고 갑니다 ㅠㅜ 감사합니다~!~!~!~!~!~!
정성이 많이 들어간 영상이라 배우는 사람이 쉽게 받아 들일 수 잇는 것 같습니다. 유익한 영상 제작해 주셔서 감사합니다. 👍
연정님 정말 감사히보고있습니다
ㅎㅎ 열심히 봐주셔서 너무 감사해요!! 파이팅💕
이제 막 피그마를 혼자 스스로 공부중인데 선생님 덕분에 많이 배워가고 있습니다! 감사합니다!
이렇게 값진강의를 듣다니 복받으실거에요! 감사합니다💚
연정님 정말 감사합니다!!!! 연정님 기초 강의는 거의 다 본 거 같아요!! 너무 유익해요ㅋㅋ 연정님 아니었음 오토레이아웃, 스타일링, 컴포넌트 다 몰랐을거에요...
좋은 강의 감사합니다 :) !!
bold와 medium를 사용할 예정인데 , 이부분은 어떻게 표기하고 어떤식으로 나누면 좋을까요?
이렇게 좋은 수업 받을 수 있어서 너무 고맙습니다.
좋은 강의 감사합니다 몰랐던 기능 하나 배웠네요 ㅎㅎ 자막도 같이 있으면 더 좋을거 같습니다. 고생하셨어요
latte님 피드백 항상감사합니다♡ latte님이 몰랐던 기능은 어떤 것이었는지 궁금하네용~ ㅎㅎ 보람있군용 ~
@@yeonjung-figma 피그마에서는 행간 가격을 %로 정의가능하더라구요 이부분은 몰랐던건데 영상보고 알았습니다 ㅎㅎ
아하!! ㅎㅎ 퍼블리싱 할땐 퍼센트가 더 유연해서, 피그마에서도 퍼센트로 ~
@@yeonjung-figma 그츄~
안녕하세요. 강의 보다가 궁금한 점이 있어서 질문드립니다. 3:36 bullet이라는 이름의 아이콘은 어떻게 제작하신 걸까요? 그냥 원형툴 이용해서 만든다음 텍스트와 shift+A사용하면 위치가 달라지더라구요.. 자체 패딩 값을 가지고 있는 듯 하게 보이는데 제가 만든건 텍스트 값 자체가 위아래 여백이 살짝 있어서 아이콘 위치와 높이가 틀어집니다 ㅜㅜ 도움 부탁드려요..
오토레이아웃 관련 최신 영상을 보시면 도움이 되실 거 같아요. 버튼 만들기 part 2 영상입니다.
올려주신 파일 열었는데 디자인 패널이 안뜨는 이유는 뭔가요..?ㅠㅠ comment 패널로 뜨네요..!
항상 강의 잘 보고 있습니다. 감사합니다! 제가 샘플 파일을 다운 받을려고 하는데 아직 피그마 초보라 어떻게 해야 할 지 잘 모르겠습니다ㅜ 시간이 괜찮으시면 댓글로 가르쳐 주시면 안될까요?
designer-story.tistory.com/16 여기에 답변과 관련하여 포스팅하였습니다.
@@yeonjung-figma 앗 친절히 댓글 달아주셔서 정말 감사합니다!!!!
* 강좌 요약
2:11 1/5 텍스트 편집의 체계화를 위한 Text Styling 기능
3:36 2/5 Text Style Guide 제작 노하우, px 단위를 rem으로 변환 하는 방법
5:53 3/5 Auto Layout & Text option 셋팅에 의한 반응형 텍스트
8:41 4/5 Text Detail Option Tip
10:40 5/5 Text Scale & Text를 Shape로 변환 하는 방법
[영상에서 언급된 샘플 파일 figma url] www.figma.com/file/sEzcbf6sRjWZT6HmA5ENRI/Text-Styling_Before?node-id=0%3A1
[샘플 파일 복제하는 방법] designer-story.tistory.com/16
강의 잘들었습니다. 궁금한게 있는데 Outline stock과 scale로 크기 변환하는게 똑같은거 같은데 무슨 차이가 있을까요?
안녕하세요 항상 잘 보고 있습니다. 텍스트 관련 질문이 하나 있는데요. 지인들에게 물어봐도 잘 모르길래 혹시 아실까 하고 여쭙니다..
2줄 이상의 텍스트를 써야 할 경우
1. 텍스트박스가, 피그마에서 보이는것과 동일하게 개발시 실 구현이 될까요?(행간 변경시 글줄 사이 여백만 변화하는 것이 아닌 텍스트박스의 위/아래 여백도 변하는 문제)
2. 안된다면 2줄의 경우, 행간을 pt가 아닌 %로, 즉 100%로 입력하여 2개의 텍스트박스를 만들고 간격을 조정하여 행간을 조절한 효과를 내야할까요? 1줄인 경우 고민없이 100%행간을 사용하고 있으나, 이대로 2줄을 쓰면 당연히 지나치게 행간이 밀착되기 때문에 그렇습니다..
아마도 차선책으로 2번이 정답일 것 같은데 혹 다른 방법이 있을까 여쭤봅니다.
정말 많은 도움 얻고 있습니다. 감사합니다!
1. 피그마에서 보이는 것과 동일하게 행간(lign-height), 자간(letter-spacing), 정렬(align), 개발 시 구현 가능합니다(O)
2. 두 줄의 경우 %단위로 행간을 조정하는 것이 폰트 크기에 구애 받지 않고 행간을 유연하게 조정 할 수 있습니다. (권장)
줄바꿈이 없는 타이틀로 쓰이는 텍스트(h1~h6, title: 행간 100%)와 줄바꿈이 되는 문장으로 쓰이는 텍스트(body, paragraph: 130%~160%) 로 구분하여 용도별로 폰트를 스타일화 하여 사용하고 있습니다.(피그마의 create style 기능사용) 또한 버튼의 경우는 줄바꿈이 되는 경우가 없으므로 lign-height를 100%로 기본 셋팅을 하고 있어요.
@@yeonjung-figma 답장 너무 감사합니다. 저만 모르나 하고 알아봤는데, 이상하리만치 이 줄바꿈 부분이 회색영역이더라구요. 언젠가 뵐 날이 있으면 좋겠습니다. 항상 행복하세요.
기획일을 하고 있는 구독자입니다. 질문 하나만 드릴게요.
텍스트박스 height값은 어떻게 지정하는게 좋은 선택인지 조언 좀 부탁드립니다.
그냥 텍스트 한줄이면 크게 문제가 없을거 같은데, 아래/위 요소와 여백을 지정하는 부분에서 텍스트박스 높이값에 따라 달라지는거 같아서요(초보는 웁니다. ^^;)
예를들어 font-size가 16이면 텍스트박스도 동일하게 16을 지정하는게 좋은 선택인지 나중에 시간 나시면 조언 부탁드립니다.
코로나 시국에 건강 잘 챙기세요~
텍스트 박스 높이는 auto로 해주되 행간(line-height)의 설정은 px 기준 보다 %로 기입하는 것이 폰트 사이즈 수정 시 시간을 절약할 수 있어요. 폰트 사이즈가 16이라면 줄바꿈이 없을 한 줄일 경우엔 행간을 100%로, 줄바꿈이 있는 텍스트의 경우 130%~ 160%정도로 해야 가독성 면에서 좋아요(폰트 종류 & 사이즈에 따라 적정 %는 다를 수 있음)~ 이때 %에 따라 텍스트 박스 높이는 자동으로 조정됩니다. 텍스트 박스 높이 사이즈는 가급적 임의로 조정 안하는 걸 권장 드려요. (특히 오토레이아웃을 사용 할 경우)
@@yeonjung-figma 아 바쁘신데 빠른 댓글 감사합니다. 내일 출근하면 해봐야겠어요 ~
댓글 일부 수정했습니다.
@@yeonjung-figma 너무 감사합니다!
피그마 강의 잘 보고 있습니다! 감사합니다. 강의 보면서 따라해보는데 텍스트 스타일 만들기가 에러 메세지 나오면서 적용이 안되네요 ㅠㅠ 해결 방법이 있을까요?
안녕하세요. 강의 너무 잘듣고 있어요. 궁금한게 있는데 디자인 시스템 만들때 텍스트 스타일에 line-height 값도 정의 해주는게 좋은가요? 버튼제작할때나 한줄쓸때, 글자가 가지고 있는 여백이 늘어나게 되어서 고민이 됩니다.
최근 업데이트 영상 버튼 컴포넌트 제작 영상을 보시면 궁금증을 해소 하실 수 있어요~
피그마에서 첨자(위첨자, 아래첨자, ℃ 같은)를 사용하려면 어떻게 해야 하나요? 폰트 세팅창 띄워서 [Numbers - Position]에서 선택하는 거 맞죠? 근데 선택한 텍스트에 적용할 수 없다 거나 해당 폰트는 첨자를 지원하지 않는다라는 메시지만 보이고 첨자는 아예 비활성화네요;
감사합니다 연정님. 덕분에 피그마 잘 배우고 있습니다!! 궁금한게 TEXT style에서 상품의 금액을 표시할 때 취소선의 높이나 굵기를 조절할 수 있는 방법이 있을까요?
넵 피그마에서 취소선 가능하고요~ 굵기도 조정 가능합니다. 단 이텔릭체 처럼 기울이는 옵션은 별도로 없어요~
선생님 질문있습니다 ㅠㅠ 컴퓨터에 설치한 글꼴을 피그마로 가져가는법이 궁금합니다 ㅠㅠ
쌤 늘 잘 보고 있는 중 질문이 있습니다.
만들고 있는 프로젝트에서 공통적으로 사용되는 텍스트 스타일이 있는 반면, 단 한 군데에서만 사용되는 텍스트 스타일(예를 들어 letter spacing이 약간 조절된)이 있는 경우 어떻게 해야 할까요? 이 경우에도 디자인시스템에 추가하는게 맞는지, 이름은 어떻게 가져가면 좋을지 고민이 많습니다 ㅠ
음, 한 번만 사용한 스타일이라면 당장은 스타일을 정의하지 않아도 된다고 보고요~ 저라면 폰트 크기가 동일한 비슷한 케이스의 기존꺼를 수정해서 재사용하거나(추천), 두 번 이상 사용될 타이밍에 스타일을 추가 할 거 같아요~
사실 답은 없고 추후 수정이 쉽게 셋팅하는게 장기적으로 좋을 거 같아요. ㅎㅎ 제품이 완성될때까지 계속 수정하게 되더라구여 🥹
말해 놓고 보니 스타일을 만들어 놓는 편이 낫겠네요 ㅎㅎ
@@yeonjung-figma 빠른 답변 감사합니다! 참고해서 진행해 보겠습니다~~
연정님! 영상 너무 잘보고 있습니다 ㅎㅎ 한가지 질문있는데요
혹시 윗첨자, 아래첨자와 같은 텍스트 설정은 어디서 할까요? type detail 에서 이것저것 만져봤지만 작동하질 않아서요 ㅜ
type detail 옵션들이 최근에 많이 개편되어 있네요. 😅
테스트 해보니, type detail > Numbers 영역에서 Fraction 활성화 하시고 Style 수정하면 되는거 같습니다.
@@yeonjung-figma 아, 숫자 확인했습니다. 답변너무감사드려요!
숫자외에 괄호나 한글은윗첨자설정이 불가능할까요? 문서 주석을 달고싶어서 ^^
혹시 아직은 피그마에서 지원하지않을수도 있으니 ㅎㅎ 그래도답변 너무 감사합니다!
안녕하세요! 강의가 너무 알찹니다! 감사합니다..!! 그런데 텍스트 스타일 지정할 때 피그마에서는 컬러는 저장할 수 없나요? 스케치에서는 컬러까지 스타일에 지정이 되었는데 피그마는 따로 그 기능이 없는 것 같아요. 제가 잘 몰라서 못 찾고 있는 것일까요?
ruclips.net/video/SiCrUYop13Y/видео.html 이 영상 참고 부탁드려요 ~
@@yeonjung-figma 감사합니다💗
6:10 부터 동그라미와 텍스트를 오토레이아웃 하게되면 동그라미의 위치가 임의로 바뀌면서 텍스트 경계 만큼 위로 올라가서 고정이 되버리는데 혹시 해결방법이 있을까요..?
구두로 설명 드리기 좀 힘든 답변이지만 일단 답변을 드리자면, Layer 패널에서 해당 오토레이아웃 프레임을 선택하고, 오른쪽 Design 패널에서 Auto layout 옵션을 찾으시고요~ 우측에 "-" 버튼이 보일거에요. 이 버튼 밑에 있는 정렬 아이콘 버튼을 선택하신 다음 디폴트로 left & top으로 되어 있는 부분을 left & center 상태로 변경 하시면 Auto Layout안에 있는 객체들에 대한 정렬을 수정 할 수 있습니다. 또는 정렬은 그대로 유지하고 상하좌우 Padding 값을 변경하여 텍스트의 위치를 변경 할 수 있습니다.
참고 영상 공유 드려요. ruclips.net/video/TyaGpGDFczw/видео.html
xd로 작업하다가 피그마 배우고 있는중인데 헷갈리는 점이 있어 질문 남깁니다! xd에서는 자간 -25, 행간 40 이런식으로 입력했었는데 피그마는 %로 되어 있어서 어떻게 입력해야 자간 -25, 행간 40을 적용할 수 있는건가요?
숫자 + px -> ex. -25px, 40px 입력하시면 되요~ 하지만 행간의 경우 px 보단 %쓰는 걸 권장드리고 싶네요~ 😀
감사합니다! 질문 하나만 더 드리면 그럼 1px는 몇%인가요?
@@뀽-s6c ㅎㅎ 그건 직접 연구해 보시길!! 폰트 크기에 따라 다를 거 같네요.
6:19 오토레이아웃시에 앞에있는 도형이 위로 정렬이 되버리던데 이런경우엔 어떻게 하나요?
오토레이아웃의 옵션(맨 끝에 위치한 옵션 Alignment and padding 아이콘 버튼)을 선택하여 조정 가능합니다. 자세한 튜토리얼은 제 영상 중 버튼 생성하기 시리즈 오토레이아웃 튜토리얼 영상에서 확인 가능해요~
피그마에서 픽셀단위로 나오는거를 %단위로
바꾸는법 알수있을까요??
김동욱 어디에 대한 단위죠?
@@yeonjung-figma 만약에 네모를 그려놓았으면 그 네모의 left랑 top이요.
방금 테스트로 X, Y에 20% 라고 입력하니 연산이 되네요.
또 다른 방법엔 픽셀 기준으로 수치 입력란 300/2, 10*2 처럼 연산해서 값을 조정할 수는 있습니다.
예를들어 y position이 0인 위치에 박스를 그렸다면 y position에 300/2를 입력하고 엔터를 하면 연산해서 150으로 가는거죠
질문에 대한 답이 되었을까요?
피그마 스크롤 만드는 방법 알려주실 수 있나요?;ㅁ;
넵 가능합니다~ 다음 영상 스크롤로 할게용~
제가 최근 회사를 이직해서 적응 중이라 다음 영상이 늦어지고 있습니다. ㅜㅡ 이미 찾아 보셨겠지만 제가 참고했던 영상을 첨부드립니다. ruclips.net/video/ST6DOO11zuA/видео.html