- Видео 11
- Просмотров 10 906
yoongood Figma
Добавлен 9 июл 2013
Figma prototyping tool design & Figma playground
[피그마 오토레이아웃 리스트 만들기] auto layout list ui with figma (음성추가)
안녕하세요. 피그마 디자인 리스트 제작 설명 영상입니다. 영상 설명이 필요하신 분들은 블로그를 참고 부탁드립니다. : )
이전 영상에 음성만 추가하였습니다. 감사합니다.
블로그 : figma-play.tistory.com/3
이전 영상에 음성만 추가하였습니다. 감사합니다.
블로그 : figma-play.tistory.com/3
Просмотров: 338
Видео
![[피그마 로컬파일 저장 후 불러오는 방법] Saving and importing local files with figma](http://i.ytimg.com/vi/4h9KxY0TC3E/mqdefault.jpg)
![[피그마 로컬파일 저장 후 불러오는 방법] Saving and importing local files with figma](/img/tr.png)
[피그마 로컬파일 저장 후 불러오는 방법] Saving and importing local files with figma
Просмотров 61410 месяцев назад
안녕하세요. 이번 영상은 1분 17초의 짧은 영상입니다. 피그마는 클라우드 저장을 기본적으로 지원하지만 여러 사람들이 편집하게 되면 히스토리를 쓰더라도 누락되는 경우가 있어 로컬 파일 저장을 권장합니다. 피그마 로컬 파일을 저장하고 간단히 불러오는 방법을 안내하는 영상입니다. 봐주셔서 감사합니다.
![[피그마 네비게이션 바 예시2 만들기]Create Navigation Bar type2 with figma](http://i.ytimg.com/vi/-tGYubysImE/mqdefault.jpg)
[피그마 네비게이션 바 예시2 만들기]Create Navigation Bar type2 with figma
Просмотров 61311 месяцев назад
안녕하세요. 지난번 네비게이션바 타입1에 이어서 네비게이션바 타입2 영상 업로드하였습니다. 아이콘 컴포넌트화, 이름변경, 컴포넌트 속성(베리언츠, 텍스트, 인스턴스스와이프) 오토레이아웃 활용해서 제작하였습니다. 시청해주셔서 감사합니다. : )
![[피그마 네비게이션 바 예시1 만들기]Create Navigation Bar type1 with figma](http://i.ytimg.com/vi/ifZTst4DpFs/mqdefault.jpg)
[피그마 네비게이션 바 예시1 만들기]Create Navigation Bar type1 with figma
Просмотров 1,9 тыс.Год назад
안녕하세요. 네비게이션바 디자인부터 프로토타이핑까지 구현한 영상입니다. 현재 모든 동영상은 음성이 없는 영상으로 추후 기회가 된다면 음성을 동시 녹음하도록 하겠습니다. 끝까지 시청해주셔서 감사합니다.
![[피그마 프로토타이핑 없이 텍스트 화면 이동 방법] How to Move Positions with Text Links Without Prototyping with figma](http://i.ytimg.com/vi/2lPpEI5sicw/mqdefault.jpg)
[피그마 프로토타이핑 없이 텍스트 화면 이동 방법] How to Move Positions with Text Links Without Prototyping with figma
Просмотров 257Год назад
안녕하세요. 피그마 디자인 파일에서 프로토타이핑 없이 텍스트 링크로 위치 이동하는 방법에 대한 영상입니다. 활용 방법은 다양하니 직접 아이디어를 내서 진행해 보셔도 좋겠습니다. 봐주셔서 감사합니다. 건강하세요. : )
![[피그마 인터렉션 복사 붙여넣기] Interaction Copy Paste with figma](http://i.ytimg.com/vi/lS5OrT0Y3jc/mqdefault.jpg)
[피그마 인터렉션 복사 붙여넣기] Interaction Copy Paste with figma
Просмотров 550Год назад
안녕하세요. 인터렉션 속성 및 애니메이션을 동일하게 유지한 상태로 복사, 붙여넣기 하는 방법을 알려드릴게요. 너무 간단해서 영상이 짧아요. 주의할 점은 인터렉션을 잘 선택하셔야해요. 자칫하면 인터렉션이 삭제되어 버립니다. 잘 선택 하셔야 합니다. 추후 피그마가 이 부분 업데이트 해주길 바랍니다. 봐주셔서 감사합니다.
![[피그마 컴포넌트 불리언, 인스턴스 스와이프, 텍스트 프로퍼티&카드 리사이징] Add component boolean, instance swipe, text properties](http://i.ytimg.com/vi/DxsgaZeps1Q/mqdefault.jpg)
[피그마 컴포넌트 불리언, 인스턴스 스와이프, 텍스트 프로퍼티&카드 리사이징] Add component boolean, instance swipe, text properties
Просмотров 1 тыс.Год назад
지난 영상에서 만들었던 카드UI를 활용해서 베리언트 후 불리언, 인스턴스 스와이프, 텍스트 속성을 추가했습니다. 카드를 반드시 이렇게 만들 필요는 없으니 참고로 봐주세요~ : ) 블로그 : figma-play.tistory.com/9
![[피그마 컴포넌트의 속성 베리언트 추가 방법] How to Add Variants to Components with Figma](http://i.ytimg.com/vi/kzterlwm5Bk/mqdefault.jpg)
[피그마 컴포넌트의 속성 베리언트 추가 방법] How to Add Variants to Components with Figma
Просмотров 1,8 тыс.Год назад
안녕하세요. 피그마 컴포넌트에 베리언트 추가 방법을 영상을 통해 확인 해보세요. 나머지 속성 활용은 다음 영상에 올리도록 하겠습니다. 블로그를 보시면 텍스트로 설명글 남겼습니다. 시청해주셔서 감사합니다. : ) figma-play.tistory.com/8
![[피그마 단일 컴포넌트 프로퍼티 추가하기] Component Property with Figma](/img/1.gif)
[피그마 단일 컴포넌트 프로퍼티 추가하기] Component Property with Figma
Просмотров 659Год назад
안녕하세요. 컴포넌트는 만들기만 해도 활용도가 높지만 컴포넌트의 속성을 추가하면 더욱더 강력해집니다. 이번 영상은 단일 컴포넌트에 프로퍼티 추가하는 방법입니다. 봐주셔서 감사합니다. : )
[피그마 디자인 리사이징 반응형 카드 만들기] auto layout Resizing with Figma
Просмотров 1,9 тыс.Год назад
이번엔 오토 레이아웃의 리사이징 속성을 알아보고 반응하는 카드 UI를 만들어 보도록 해요. 이를 이해하기 위해서 부모-자식 개념에 대해 블로그에 업데이트하였습니다. 내용 먼저 읽어보시고 영상 보는걸 추천해 드립니다. 봐주셔서 감사합니다. : ) 블로그 : figma-play.tistory.com/5
[피그마 디자인 반응형 카드 만들기] card ui design with Figma
Просмотров 1,3 тыс.Год назад
안녕하세요. 오토 레이아웃을 활용한 리사이징하는 카드를 카드를 만들어 보려고 합니다. 카드는 단일 주제의 내용을 컨테이너 영역에 담아 빠르게 탐색하기에 좋은 UI입니다. 방법은 다양하니 참고만 하시고 나만의 카드를 만들어보세요. 봐주셔서 감사합니다. 블로그 figma-play.tistory.com/4
최고의 따라하기 강의네요! 감사합니다.
원래 소리가 없나요?
세상에..이걸 왜 지금 알았을까요ㅠㅠ오토레이아웃 설명해주는 다른 영상들보다 훨씬 이해 잘 돼요! 사운드가 없으니 초집중 하게 되고 레이어에 부모, 자식 네이밍으로 설명해주시니 이해 쏙쏙 대박! 제일 궁금한 오토레이아웃으로 반응형 웹/앱 디자인 하는 것도 알려주세용❤❤❤
전체적으로 좋은 강의들지만 모든 영상 목소리 설명이 없고 화면만 나오니 너무 불편합니다. 기존영상들 말이 나오거나 자막이 나오게 해주시면 감사드리겠습니다.
피그마 오토 레이아웃에 대한 강의 영상에서 빼놓지 않고 등장하는 부모-자식 개념을 알 것 같다가도 막상 작업해보면 적용이 잘 안되서 어려웠어요. 음성이 없어도 이해가 쏙쏙 됩니다. 감사해요!
2023-0802 대규모 패치 이후부터인지 컴포넌트 내부에서 컴포넌트 요소끼리 작동 안됨. 화살표 전체 선택 및 수정은 가능
어떤 부분이 안되는걸까요? 지금 테스트 해봤는데 컴포넌트 베리언츠에서도 인터렉션 복사 붙여넣기는 잘됩니다 : )
@@yoongood1020 저도 동일하게 인터렉션(화살표) 클릭하고 복붙했어요. 근데 복사되는건 인터렉션이 연결되어있던 컴포넌트 요소가 복사되네요 ㅠ 물론 프로토타입 수정 모드이고, 상관이 있을까 싶은데 m1 맥북 사용중입니다.
@@yoongood1020 글구 일반 프레임끼리는 to요소에는 박히는데 for요소가 복사되면서 박히네요
@user-hm1eq9ir2f 화살표클릭이 아니라 우측 프로토타입 패널 인터렉션 파란색으로 선택된 상태에서 커멘드C 하고 복사할 곳에 커멘드V 하시면 됩니다. 도달하는 위치는 변경하셔야해용
thanks a lot!
영상 잘봤습니다~ 질문이 있는데, 컴포넌트 프로퍼티 설정까지 하고서, Choose instance를 통해 인스턴스의 아이콘을 바꿔줄 때, 컴포넌트에서 설정된 색이 아닌 기존 아이콘 색으로만 고정되는데, 컴포넌트에서 지정한 색으로 적용되게 어떻게 할 수 있을까요?
질문 감사합니다. 위 영상과 동일하게 했는데도 안되는 경우는 아이콘의 벡터의 이름을 모두 vector로 레이어수도 동일해야합니다
@@yoongood1020 말씀대로 하니까 해결됐어요 :) 몇시간동안 쩔쩔맸는데.. ㅎㅎ 정말 감사합니다~
댓글을 처음 달아보네요. 정말 좋은 강의 감사합니다. 도움이 많이 되고 있어요.
정말 대단해요😊