묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
스타일 및 텍스트박스 관련 문의드립니다.
안녕하세요 에릭님! 수업을 듣다 질문이 있어 문의남깁니다.오랫만에 다시 들으며 질문이 생겨서 남기는것인데, 혹시 다른 강의에서 설명해주셨던 부분이면 죄송합니다^^;우선 첫번째로는, 아래 첨부한 이미지와 같이 텍스트를 입력하고 여백을 잴 때 텍스트박스 기준으로 사이즈를 재게 되는데, out stroke처리를 하는것과 텍스트박스 크기를 조정하는것에서 여백 차이가 발생합니다.이럴때 처음에는 텍스트 박스로 작업을 하더라도, 최종 개발자에게 넘겨주기 전에는 스트로크 처리를 한 뒤에 여백이나 정렬을 다시 정리해야 하는걸까요?두번째 질문은, 스타일 가이드를 잡을 때 보통 몇개정도의 스타일 가이드를 잡고 진행하는것이 좋을까요?예를들어서 같은 26사이즈에, bold와 26사이즈 light가 있으면 각각 스타일을 등록해놔야 하는것인지그리고 버튼에 들어가는 텍스트 스타일은 Heading이나 Body외에 Button으로 별도 스타일 네이밍을 해야하는것인지 궁금합니다. 같은 사이즈나 굵기여도, 글씨체가 달라진다면 그것도 별도 스타일로 지정해야하나요? 마지막으로 개발자에게 작업 시안을 넘길 때 현업에서 필수로 넘기는 정보가 있을까요? 예를들어 padding, margin값을 알 수 있는지 문의가 들어왔었는데, 이런것 외에도 색상코드나 텍스트 사이즈같은걸 사전에 스타일로 잡으면서 값을 다 정리해놓고 개발자분에게 전달해야하는것인지..? 궁금합니다. ^^처음에 강의를 들을땐 다 알것만 같았는데, 다시 실제 실습이나 작업을 해보며 강의를 재수강하니 까먹었던것이나 당시에 100%이해하지 못하고 넘어갔던것을 다시 학습하게 되어 좋기도 하고, 귀찮게 질문드려 죄송한 마음도 드네요.좋은 강의와 답변에 늘 감사한 마음드립니다. 감사합니다!!
-
해결됨디자인 시스템 with 피그마
다른 피그마 파일에서 토큰 불러왔는데 라이트/다크모드 적용이 안될 경우엔 어떻게 해야되나요?
안녕하세요! 라이트/다크모드 적용한 파일을 토큰 저장 후 다른 피그마에서 불러왔는데 FigmaTokens에서 작업한내용은 그대로 있는데 라이트/다크모드 on, off 시에는 반응이 없습니다ㅠㅠ 이럴 경우에는 어떻게 하면 되나요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
오토 레이아웃 질문입니다
오토 레이아웃은 각 아이템의 크기가 동일해야 사용할수있나요?여러개의 버튼을 만들고 오토 레이아웃으로 정렬을 하려고 했는데 두개를 같이 묶을땐 오른쪽에 오토 레이아웃이 활성화되는데 세개나 그이상을 묶으면 사라져버립니다, 개수나 형식에 따라 제한이 있는지요?+아래 질문글에 올려주신 예제파일에서 메인버튼 5개를 묶으니 오토레이아웃이 뜨는데 제가 도형으로 만든 버튼은 안뜨네요
-
해결됨디자인 시스템 with 피그마
Uber(started) 피그마 링크가 finished로 연결 되는 것 같습니다.
Uber (started) 링크로 들어왔는데finished 링크로 연결되고요finished 링크는 아예 없는 것으로 나오는데요.수업을 그냥 들어도 되는 것인가요?
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
fixde문제인가요?
마지막 goods- detail페이지 문의인데요 아래와 보시다 시피 fixed주고나서 저렇게 뛰어나왔어요 box-sizing: border-box 줘도 안먹히고요 width:값을 335px로 줄이면 딱맞는데 원래 fixed 주고 box-sizing: border-box 안먹히는건가요 ??html도 아래 good-order-info는 goods-detail-content밖으로 밖으로 잘 분리되어 있는데요~~ .goods-order-info { background-color: #fff; border-radius: 10px 10px 0 0; box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.05); padding: 20px; position: fixed; bottom: 0; width: 375px; border: 1px solid red; box-sizing: border-box; } .goods-order-info
-
해결됨디자인 시스템 with 피그마
bit.ly/figma_started이 finished 로 연결됩니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. started 링크가 finished 피그마로 연결되어 있어서 피그마 네이티브가 이미다 지정이 되어있는 것 같습니다.
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
카테고리 accordion효과 custom.js에서 siblings 안먹히는거 같아요
안녕하세요. 선생님유익한 강의 잘 듣고 있습니다~그런데 카테고리 페이지 코딩 작업중에 custom.js 에서 다른건 다 잘 작동되는거 같은데siblings 선택자로 메뉴 열리고 닫히는 것, active 클래스 제거되는게 작동이 안되는데왜그러는걸까요;;
-
해결됨디자인 시스템 with 피그마
composition tokens에 대한 질문입니다
안녕하세요.피그마 토큰을 사용하여 디자인 토큰을 만들다 궁금한 점이 있습니다.만약, 폰트 크기가 16px이고 폰트 굵기가 regular 인 타이포그래피를 body.md 라고 정의한다고 했을 때 body.md에 텍스트 데코레이션으로 밑줄(underline)을 주고자 할 때 토큰을 어떻게 설정할 수 있을까요?처음에 생각했던 방법은 아래와 같습니다.body.md.default (font-size: 16, font-weight: regular)body.md.underline (font-size: 16, font-weight: regular, text-decoration: underline)이렇게 했을 경우, 피그마 토큰에서 텍스트 데코레이션 여부에 따라 토큰을 만들어서 피그마에 로컬 스타일로 내보낼 수 있지만, 같은 폰트 크기와 굵기를 사용하는 경우 수많은 토큰이 생성되는 문제가 있습니다 (body.sm.default / body.sm.underline / body.sm.line-through 등)제가 원하는 방향은 조금 더 깔끔한 디자인 시스템을 만드는 것입니다. (body.sm / body.md / body.lg 등)그래서 찾은 방법은 pro 요금제에서 지원하는 composition tokens을 활용해봤습니다.composition tokens에서 typography.test 토큰을 만들어서 body.md(font-size: 16, font-weight: regular) + text.decoration(underline) 두개의 토큰을 속성으로 추가했습니다.문제는 composition tokens 으로 만든 토큰을 피그마 로컬로 내보냈을 때(creat styles) 로컬 토큰에 test 토큰이 생성되지 않는 문제가 생겼습니다.composition 토큰으로 타이포그래피를 만들었을 때 로컬 스타일로 내보내는 방법이 없을까요?그리고 타이포그래피마다 텍스트 데코레이션을 다양하게 주고 싶을 때 디자인 시스템에서 어떻게 해결할 수 있을까요?
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
절대주소 문의
쌤!프로젝트 단독으로 모바일웹할때는 절대주소라고 말씀하셨는데 다른 학생이 한 것에는 상대주소로 되어있었잖아요 포폴이라서 그런거라고 말씀하셨는데요몇번들어도 그부부분이 이해가 되지않아서요 ~모바일에 웹에 목업을 할꺼라서 그런건가요??
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
텍스트박스 크기변경할때
안녕하세요.1번과 같이 텍스트박스를 선택하고옵션+쉬프트키를 누르고 크기를 조절하려고 하면텍스트박스가 자꾸 저렇게 됩니다ㅠㅠ고정을 센터로 했는데 어떤문제일까요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
하단 홈바 픽스드포지션 할 때
하단 홈바 픽스트포지션 할 때 안에 있는 오브젝트들(홈,카테고리 등 텍스트와 아이콘)은 픽스드포지션을 하지 않아도 탭바 사각형을 따라서 고정이 되는걸가요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
도형을 축소할때 도형내부요소들도 같은 비율로 축소가 가능한가요?
안녕하세요첨부된 그림과 같이 흰색배경의 그래프 배경을 그리고 그 안에 펜툴로 그래프를 그렸습니다정밀한 작업을 위해 처음에 그래프를 크게 그리고 그 다음 실제 UI디자인 크기에 맞춰 축소시켜 사용하려고 하는데요 이때 그래프 배경은 의도대로 축소되었지만 그래프 내부 요소들은 축소되지 않고 그대로 남아있습니다그래프 배경과 그래프 내부요소들이 원래와 같은 비율을 유지하면서 동시에 축소시킬 수 있는 방법이 있을까요? 감사합니다
-
해결됨디자인 시스템 with 피그마
코드화 관련 질문입니다. 선생님~!!
안녕하세요.강의 너무 잘 봤습니다. 감사합니다.혹시 완성된 페이지를 html 및 css로 코드화 하실때, 플러그인을 이용하시는지이용하신다면 어떤 플러그인을 통해 코드화 하시는지,아니면 직접 다시 코딩하시는지 등의 정보를 좀 여쭐 수 있을까요?
-
해결됨디자인 시스템 with 피그마
aos에서의 line height 관련 질문드립니다
안녕하세요 선생님. 좋은 강의 감사합니다. 1.토큰 스튜디오를 통해 Line height 토큰을 만들었는데요! AOS의 경우 android:lineSpacingExtra 를 행간에 사용하고, 피그마와 동일 수치를 입력할 시 뷰에 적용된 모습에는 차이가 있는 상황입니다. 현재는 임의로 위아래에 패딩을 추가해 개발하고 있어요. 그래서 하나의 Line height 토큰을 aos에 적용할 시 피그마 시안과 달라 보이는 문제가 생기는데 이런 문제는 어떻게 해결할 수 있을까요? 2. 칩버튼 만들 때 boxradius를 세로값의 50%를 주면 된다는 답변을 보았는데, 세로값이 고정이 아니고 변수일 경우 토큰 플러그인의 계산식 등록을 어떻게 해야 할까요? {height} /2 는 적용이 안 되네요... 감사합니다.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
프로토타입 프레젠트 부분에서 문제가 있습니다.
프레젠트 버튼을 누르면 한 화면씩 나오는게 아니라 작업 대지까지 전체 화면이 나와버리네요..제가 어떤 실수를 하고 있는 걸까요? ㅜㅜ
-
해결됨디자인 시스템 with 피그마
Chips 타입의 Radius 값 관련해서 문의드립니다!
범쌤님 좋은 강의 만들어 주셔서 감사합니다!아예 둥근 Chips 형태의 경우엔 Radius 값을 주는 기준이 있을까요? 보통 큰 값을 입력하여 둥근 형태가 될 수 있게 하는데 기준이 없다보니 컴포넌트마다 적용되는 Radius 값이 상이하여 질문드리게 되었습니다.
-
해결됨디자인 시스템 with 피그마
헤더 오토레이아웃 관련 질문드립니다.
범쌤님 좋은 강의해주셔서 감사합니다.오토레이아웃과 베리언츠 기능을 활용하여 헤더의 GNB 영역을 제작하는데 궁금한 점이 있어 여쭤봅니다.기업정보~기사지원 원자 메뉴를 컴포넌트로 만들때는 오토레이아웃[오토레이아웃[텍스트 영역] + 아이콘] 구성이고, 랭기지 메뉴는 오토레이아웃[[텍스트] + 아이콘]으로 구성되어있습니다. 같은 텍스트인데 단독으로 오토레이아웃을 해주거나, 안해주거나 그 기준이 무엇인지 궁금합니다.*평소엔 텍스트면 따로 오토레이아웃 하지않고 그냥 사용했기 때문에 어떤 방법이 더 일반적으로 사용되는지도 궁금합니다.
-
해결됨디자인 시스템 with 피그마
그룹으로 묶인 경우 아래 텍스트만 드래그로 선택하는 법
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.텍스트부분만 쭉 드래그해서 한번에 선택하셨는데, 컬러 팔레트가 그룹으로 묶여있어 통으로 색상이 변경됩니다. (color, mode, negaive 이렇게 한 세트)선생님이 선택하신 것처럼 그룹과 관계없이 한번에 선택하는 방법이 있을까요?
-
해결됨디자인 시스템 with 피그마
컬러팔레트 관련 질문드립니다!
안녕하세요! 라이트/다크 모드로 디자인 시스템 작업을 해야되는데 파운데이션 컬러 primary와 secondary를 브랜드 컬러로 하고 thema / black 또는 black, white 라고 이름을 바꿨는데 라이트/다크모드 적용이 되지 않더라고요ㅠㅠ primary, secondary라고 꼭 해줘야 적용이 되는 걸까요?? 그렇다면 primary / dark , primary / light 라고 하면 되는 걸까요?? 개발자분께 전달 드릴 때 primary 컬러로 시작하는 게 많아서 헷갈리거나 그렇지는 않겠지요?
-
해결됨디자인 시스템 with 피그마
토큰 저장 관련
안녕하세요 선생님 수강 중 질문 드립니다.토큰 플러그인 종료 후 재시작시 기존 설정했던 내용들이 다 없어지고 아무것도 없는 새창으로 뜨는데요임시저장 버튼을 검색해봐도 찾기 어려워 질문 드립니다..