jangmisoon

gayengy0404 님 질문주셔서 감사합니다.베리언츠 프로퍼티를 추가하시려면 현재 선택하신 것처럼 베리언츠 자체를 선택하시는 것이 아닌,안쪽 컴포넌트를 선택하시면 베리언츠 프로퍼티를 추가하실 수 있습니다.베리언츠를 선택했을 때의 디자인패널 모습 : 현재 설정되어 있는 프로퍼티를 보여줍니다.<img src="https://cdn.inflearn.com/public/files/posts/44747983-a77d-459e-94be-f32025245354/9d0f8061-f912-4e88-a49a-5374591d4134.png" media-type="img" alt="image.png" title="image.png" width="659" height="376">&nbsp;베리언츠 안의 컴포넌트를 선택했을 때 : 프로퍼티를 설정할 수 있는 메뉴가 나옵니다.<img src="https://cdn.inflearn.com/public/files/posts/3f304827-f181-43fa-a7f9-dcc60ae9ce87/8fa0baf1-fe2b-4499-8f67-6d71f10eff4d.png" media-type="img" alt="image.png" title="image.png" width="659" height="353">&nbsp;또한 베리언츠 프로퍼티를 설정하시기 위해서는 안쪽 컴포넌트가 특정 기준으로 묶일 수 있는 옵션이 존재해야 하는데요, 그러려면 컴포넌트가 2개 이상이어야 하고 2개 이상의 컴포넌트들이 어떤 성격으로 묶이는지를 파악해주셔야 합니다. 현재는 컴포넌트 세트 안에 컴포넌트가 한 개 뿐이어서, 옵션을 줄 수 없는 상황이네요!&nbsp;

섹션 5. 컴포넌트 파고들기 관련 질문

안녕하세요 정환님! 질문 주셔서 감사합니다. 오른쪽 하단의 ? 를 누르시면 메뉴중에 go back to previous UI 라는 메뉴가 보이실까요? 이 메뉴를 사용하시면 업데이트 이전 버전으로 돌아가며, 언제든지 업데이트 버전의 UI로 되돌릴 수 있습니다.인터페이스 업데이트가 된 직후이고 현재의 UI는 베타버전이기 때문에 해당 메뉴를 계속 제공할 것으로 보이니, 일단 예전 메뉴UI로 학습하시고 익숙해지신 후 다시 현재버전 UI로 비교하시며 공부해보시는 것을 추천드립니다.<img src="https://cdn.inflearn.com/public/files/posts/8f46bc0f-fe36-4479-92e3-6a12129061a2/a9e0d15b-8a2a-45e6-979b-e339ec3c26c4.png" media-type="img" alt="image.png" title="image.png" width="462" height="916">&nbsp;

피그마 업데이트?

dndkfk44 님 안녕하세요! 말씀주신 아웃라인 스트록은 섹션 2. 기본기능 이해와 활용의 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.inflearn.com/course/lecture?courseSlug=%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%9E%85%EB%AC%B8-%EC%9D%B8%ED%94%84%EB%9F%B0-%EC%98%A4%EB%A6%AC%EC%A7%80%EB%84%90-2024&unitId=198676&tab=curriculum">아이콘 마무리</a> 의 내용입니다. 핸드오프 관련 내용들은 거의 대부분 섹션 2에서 다시 찾아보실 수 있을 것입니다. 감사합니다!

핸드오프를 위해 디자이너가 지키면 좋은 것들 강의 듣고있는데...

eyagi_11님 안녕하세요! 무료 플랜에서도 2차 변수까지는 추가 가능합니다. 강의에서는 1차 변수(컬러 고유이름으로 네이밍, 변하지 않는 원 소스의 값), 2차변수(1차 변수를 값으로 하는 시멘틱 컬러)를 써보고 1차 변수에서 연결짓는 부분까지 실습 가능하실 것 같습니다. 변수의 value를 추가하여 컬러 모드를 만들어 보시려면 유료 플랜으로 전환이 필요합니다.😭 강의에서 플랜에 대한 설명을 빠뜨려 혼란을 드렸네요.

실습을 보고 2차변수를 추가하려는데 유료버전만 되는 거 같습니다.

<img src="https://cdn.inflearn.com/public/files/posts/5b4b63ef-5b54-4c89-a3e9-d45be092c92f/image.png" alt="image" title="image">안녕하세요! 질문 주셔서 감사합니다. 작성해 주신 내용을 봤을 때 두 가지를 테스트 해보시면 될 것 같은데요! 먼저 말풍선 자체의 auto layout 크기 제한을 걸 때, 말풍선 안에 있는 text의 리사이징을 말풍선 사이즈의 가로사이즈에 꽉 채우도록 filled로 해보시면 사이즈 조절할 때 프레임 바깥으로 잘리지 않을 것 같습니다. 리사이징 옵션을 계속 바꿔보신 상태에서 아마 텍스트의 리사이징이 fixed로 되어있는 것이 아닐까 합니다! 또 한가지는 말풍선+시간을 감싼 오토레이아웃은 가장 바깥 프레임(디바이스 사이즈의 프레임) 바로 아래에 들어가 있어서, constraints를 left and right로 설정해주시면 될 것 같습니다!

채팅 ui 속성) 말풍선 크기 최대최소 조정 문제

안녕하세요 Seolhee Lee님!
오토 레이아웃을 설정했다가 제거하면 오토레이아웃으로 정렬됐던 형태 그대로 프레임으로 감싸지기 때문에
캡쳐이미지처럼 정렬되어 있는 게 정상입니다!
프레임으로만 묶여 있기 때문에, 프레임 안에 있는 바 요소들을 원하시는 가로형으로 다시 정렬해 주시면 되겠습니다!
그리고 오토레이아웃이 계속해서 세로형으로 될 때는 방향을 변경해주시면 되는데요,
디자인 패널의 오토레이아웃에서 화살표가 아마도 세로방향으로 되어 있을 것입니다.
<img src="https://cdn.inflearn.com/public/comments/bbb8d58e-e559-4a57-b79e-fe93cd22886e/blob" alt="" />
아래와 같이 가로 화살표를 클릭해주시면 가로형 오토레이아웃으로 변경됩니다! <img src="https://cdn.inflearn.com/public/comments/a16bd7f8-9933-4665-980a-6e11c74791ec/blob" alt="" />
&nbsp;
감사합니다.

뮤직 플레이바 오토레이아웃 세로

안녕하세요 서만석 님!
피그마는 가이드를 잠그는 기능을 별도로 제공하지 않습니다.
그대신 가이드를 생성하면 가이드라인 잠김상태가 기본이 되어 일러스트레이터처럼 가이드라인을 드래그하거나 다른 오브젝트와 같이 선택할 수는 없고
가이드라인만 직접 클릭하여 선택 또는 드래그하는 것은 가능하도록 되어 있습니다!
감사합니다.
&nbsp;
&nbsp;

가이드선을 잠그는 기능은 없나요?

안녕하세요 Baee님!
예 아무래도 업데이트가 굉장히 자주 되다보니 피그마 인터페이스도 계속해서 변화가 일어나고 있네요. 익스포트할 때 이미지, 텍스트 등 익스포트 하려는 요소의 종류에 따라 옵션이 다르게 나타납니다.
<ul>
<li>Ignore overlapping layers 이것은 선택한 영역에 겹쳐있는 레이어들을 같이 익스포트할 것인지, 아니면 현재 선택한 레이어만 익스포트할 것인지를 체크하는 메뉴입니다.&nbsp; 예를들어 아래 별모양을 투명 png로 내보낼 때 이 메뉴를 체크하면, 별모양 선택 영역에 겹쳐진 붉은 원은 같이 익스포트 되지 않게 하겠다는 뜻입니다. 체크를 풀면 붉은 영역까지 같이 익스포트 됩니다. <img src="https://cdn.inflearn.com/public/comments/8223a0b2-fa3a-49b0-843c-994f67a8da7f/blob" alt="" /><img src="https://cdn.inflearn.com/public/comments/222f999f-1106-42e4-961d-ffef9e6546d8/blob" alt="" /></li>
<li>include bounding box 이것은 텍스트를 익스포트 할 때 바운딩박스를 포함할것인지를 체크하는 것입니다. 바운딩박스는 텍스트를 선택했을 때의 박스로 표시되는 영역을 뜻하는데요, 이 옵션을 체크하면 박스 영역까지 포함한 사이즈로 익스포트 됩니다.&nbsp;</li>
<li>include "id" Attribute&nbsp; 이것은 svg 코드로 익스포트 될 때 코드 안에 id 값을 넣을수 있는 자리를 만들 것인지 선택하는 항목입니다. 개발 협업에서 아이콘 등에 svg를 사용할 때 id attribute 가 필요한지 개발자 분과 논의 후 체크하시면 됩니다.</li>
<li>Simplify Stroke 스트록이 들어가 있는 아이콘 등을 svg로 내보낼 때 스트록을 svg에서 지원하는 center stroke으로 고쳐서 내보내겠다는 뜻입니다. 디자인할 때 stroke 을 inside 나 outside 로 설정했더라도 이 옵션을 체크하면 center 로 바뀌어서 내보내집니다. 의도적으로 inside나 outside로 스트록 지정을 하셨다면 익스포트하기 전에 outline stroke 을 하신 후 익스포트하시는 게 좋습니다.&nbsp;</li>
</ul>

리소스 Export 질문입니다.

안녕하세요 gim515600님!
프로필 화면의 resources에서 explore로 뜬다면
resources 탭으로 진입하신 거면 이미 gim515600님의 커뮤니티 프로필로 들어오신 것입니다.
explore 버튼을 클릭하셔서 커뮤니티로 이동하시면 다른 파일의 좋아요나 복제가 가능하고
작업중인 파일에서 오른쪽 상단의 share버튼을 눌렀을 때 팝업에서 publish to community 탭이 활성화되시나요? 그러면 가입이 된 것입니다.&nbsp; figma.com/@ 뒤에 gim515600님의 아이디가 이미 만들어져 있는 것 같습니다.

[커뮤니티 베타 가입하기]

안녕하세요 gim515600님!
ios 14 beta 버전을 애플 사이트에서 다운받으시면 dmg 파일의 맥 전용 설치파일로 다운로드가 되는데요,
1. 맥 사용자이신 경우
dmg 파일을 실행하시면 iOS14 sketch 폴더 안에 sketch 파일이 있습니다. 스케치 파일을 다운로드 하지 않고 피그마에서 바로 이 폴더에 있는 스케치파일을 임포트 해 주시면 됩니다.
<img src="https://cdn.inflearn.com/public/comments/c7519f2d-65da-4a54-95e0-582f3f4e3813/blob" alt="" />
<img src="https://cdn.inflearn.com/public/comments/16eefae0-f56b-4e3a-8b57-7e4423898f7d/blob" alt="" />
2. 윈도우 사용자이신 경우 dmg 파일을 실행할 수 없기 때문에
피그마 커뮤니티에서 키트를 검색하셔서 받으시는 것이 더 좋은 방법 같습니다.
<a href="https://www.figma.com/community/file/874932189028169917/Official-iOS-14-(Beta)-Design-Templates-%2B-UI-Elements-%2B-Guides" target="_blank" rel="noopener noreferrer">https://www.figma.com/community/file/874932189028169917/Official-iOS-14-(Beta)-Design-Templates-%2B-UI-Elements-%2B-Guides</a>
또는 일부 압축프로그램으로 dmg 파일을 확인하는 방법도 있는데요, 아래 링크를 참고부탁드려요!
<a href="https://seogilang.tistory.com/539" target="_blank" rel="noopener noreferrer">https://seogilang.tistory.com/539</a>&nbsp;

jangmisoon

Posts