* 회원 가입 및 figma 데스크톱 앱설치 : designer-story.tistory.com/34... * 새파일 생성하는 방법 : designer-story.tistory.com/38 * 피그마 시작 가이드 #인터페이스: designer-story.tistory.com/40
감사합니다. 구독했어요 uiux디자이너인데 원래 xd와 스케치만 쓰다가 이직하면서 피그마의 중요성을 파악하고 기능을 살펴보던차에 영상을 보게되었어요 정말 잘설명이 되어있네요 생각보다 xd와 스케치랑은 좀 다른 느낌이 있어도 덕분에 금방 적응할거 같습니다..!!! 감사합니다
@@파테-y8w 엔딩 타이밍 변경했습니다. 영상을 끝까지 시청해주셔서 감사합니다. ^^b 참고로 다음 영상에서는 머터리얼 아이콘을 기준으로 도형 툴 및 펜툴을 활용해서 아이콘을 제작하는 방법과 컴포넌트를 활용하는 방법에대해 준비중입니다. 다음주 화요일 8시 에 오픈 예정이니 참고해주세요.
#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 )
레이어 구조 및 constains의 옵션을 다음과 같이 설정을 혹시 하셨나요?: frame(이미지를 감싸는 frame) > image(이미지의 constraints 옵션: scale, scale), 이미지 위에 네모 박스 객체(constraints 옵션: center, center)
퍼블리싱을 할때 블럭(block)요소에 대해 div 태그로 요소들을 그룹핑 하는 것과 같은 원리입니다 피그마에서 그룹화 시키는 요소가 3가지가 있는데 일반 group(command +g), frame(f), auto layout frame(shift+a)입니다. 케이스 바이 케이스이지만 일반적으로 group 보다는 일반 frame 및 auto layout frame 을 더 많이 사용하는데, 반응형 요소들을 컴포넌트화 할 경우 이 두 frame을 사용합니다.
Figma Kits 샘플 모음 #ux #figma #wireframe - designer-story.tistory.com/m/5 이 링크 참고하시면 무료로 피그마 에셋 활용하실 수 있어요~ (피그마 공식 커뮤니티에서 검색) 다음 링크도 강추요. { figma에 의한 디자인 시스템 구축 사례 및 개념 정의 - designer-story.tistory.com/m/14 }
프레임 영역 밖의 영역을 보여줄지 말지 선택하는 옵션이에요. clip content를 체크한 경우를 css 로 옮긴다면 overflow: hidden; // 해석: 지정한 영역 밖의 것(넘치는 것)에 대해 보여주지 않기에 해당됩니다. 최근 업데이트한 card component, 온보딩 영상에서도 사용한 기능이니 보시면 참고가 될거에요~
너무나 좋은 영상 감사해요 근데 처음부터 막히네요 피그마 생초짜인데 렉탱글 만들고 오른쪽 마우스키 누르는데 연정님과 같은 리스트가 안나오고 copy / plug in만 나오네요 플러그인을 뭐 깔아야 하나요? ㅜㅜ 무슨 일 때문인지 이미지 불러오기 하는데도 이미지가 안들어오고 그대로 타일모양에서 변함이 없어요
@@user-le1dz6ub4u 넵 드림이님이 편한 방향으로 해도 됩니다~ 이미지를 불러오고 Masking 해도 되고요~ 제가 강좌에서 알려드리는 부분은 누하우를 전하고 툴을 익히게하기 위함이지 반드시 이렇게 해야한다고 정의하는 부분은 아닙니다~ ^^ 이미지를 불러오는 방법에도 4가지 이상이 있기 때문에 상황에 맞게 편한 방법을 채택하시면 될거같아요~ 시작이 반입니다 ㅎㅎ 이 영상을 보셨다면, Auto layout 영상도 꼭 보세요. 추천드립니다. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WC9FhdOltA4.html
이 영상의 경우 웹디자인과는 별개일 수 있지만 실무에서 반응형웹을 주로 디자인하다보니 상황에 따라 다르게 작업했던 거 같아요. 예를 들면 1600에 안에 콘텐츠는 1400으로 max 로 한 경우도 있었고 최근 대시보드 서비스 작업의 경우는 1920으로 했어요 ~ 1920으로 하더라도 모바일이나 태블릿 사이즈도 고려해야하므로 경우에따라 1024나 768 그외 기타 가로 사이즈도 작업했습니다.😀
안녕하세요~ 이미지 및 pdf는 figma plugin(TinyImage-Compressor)을 활용하면 줄일 수 있어요~ www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor (초반엔 무료이고 유료로 전환된다고 하네요) pdf로 변환시, 아주 유용하게 잘 썼어요~ / 그외 pdf 압축 수단Adobe Acrobat(일주일 정도 무료)
사람마다 생각하는 기초가 다른 점을 제가 놓친거 같습니다. 우선 제영상을 모두 보실 경우, 전반적인 피그마 사용법을 익히실 수 있도록 영상을 기획했습니다. designer-story.tistory.com/38 기본 초기 사용법에 관한 보충 설명은 저의 공식 블로그를 참고하시면 도움이 되실거에요. 그리고 이 영상의 경우 작년에 만든 영상이어서 2021년 버전도 참고하시길 추천드립니다. 피그마의 인터페이스 및 사용 방법이 다른 툴들에 비해 굉장히 빠르게 업데이트되고 있다는 점도 참고 부탁드립니다. [기본 가이드] * 회원 가입 및 figma 데스크톱 앱설치 : designer-story.tistory.com/34?category=978073 * 새파일 생성하는 방법 : designer-story.tistory.com/38
안녕하세요 궁금한 사항있어서 댓글남깁니다. 피그마로 작업해 이름표를 출력하려는데 작업하고자 하는 이름표 사이즈가 17cm X 6.5cm 인데 단위가 cm라 픽셀단위로 된 피그마에서 프레임 단위를 어떻게 cm로 바꿔서 작업해야 되는지 여기저기 찾아도 알 수가 없어서 여쭤봅니다! 답변 부탁드려요!
저는 맥을 쓰고 있어서 command + z 로 되는데 혹시 한글키가 활성화 되었는지 여부 확인, 또는 윈도우 창을 끄고 다시 열어서 재시도를 해보세요~ 참고로 피그마는 자동 저장 기능이 있어서 Version History 기능으로 특정 구간으로 복구 가능합니다. (인터페이스 Header 중앙의 타이틀 오른쪽 화살표를 클릭 하시면, Dropdown 메뉴에서 Version History 메뉴 확인 가능합니다. 또한 특정 구간을 이름을 지정하여 저장하고자 할 경우 맥의 경우 option + command + S 윈도우의 경우 alt + ctrl + s 단축키로 저장가능합니다.
포토샵은 우선 UI 제작툴이 아니라는 점을 안내드리고 싶습니다. 가능은 하지만 굉장히 비효율적입니다. adobe에 있는 xd 도 피그마와 유사한 툴이라고 할 수 있습니다. 스케치나 피그마를 사용한 뒤 부터는 포토샵은 이미지 편집 시에만 사용하고 있습니다. 포토샵과 다르게 피그마는 html 및 css에 대한 기본 지식이 있어야 이해가 가는 툴이기도 하고요. 주변 분들에게 피그마 쓰면 왜 좋은지 물어보는 것도 좋은 방법일 거 같아요. 제 블로그에 가면 그와 비슷한 글이 있습니다. 참고해주세요~
* 피그마 로그인 후 기본 화면 가이드: 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
