본문 바로가기
닫기

Figma tutorial: Auto layout navigation menu

Figma Figma

구독

Figma is free to use. Sign up here: http://bit.ly/2NeTyr7 Auto Layout can be added to Frames to create dynamic Frames and Components that respond to the size of their child objects, such as a button that grows with the length of its label. In this video we'll teach you more advanced Auto Layout techniques to create a navigation menu using the button we created in the previous video. Tripma Design File: http://bit.ly/3nWIgV5 Learn more on our Help Center: Create dynamic designs with Auto Layout: http://bit.ly/2vXWMXB Behind the feature: the making of the new Auto Layout: http://bit.ly/3nYwkm2 Timestamps: 0:00 Auto-Layout For Navigation Menus 0:20 Creating List Item 0:40 Creating A Row 0:50 Space Between Property 1:07 Direction Property 1:27 Adding Another List Item 1:41 Adding A New Item 2:03 Changing An Item's Position 2:26 Adding An Avatar 2:45 Hiding The Avatar 3:35 Adding The Logo 3:44 The Tripma Design File 4:01 Alignment Flyout Menu 4:24 Changing to Fixed Width 5:01 Changing from Packed to Space Between 5:52 Adjusting The Padding 6:01 Using The Design 6:19 Constraints and Resizing Properties 7:00 Conclusion 7:13 The Next Video 7:21 The Tripma Design File #Figma #FigmaTutorial #AutoLayout Music: Mitsubachi by Smith The Mister https://smiththemister.bandcamp.com Smith The Mister https://bit.ly/Smith-The-Mister-YT Free Download / Stream: http://bit.ly/mitsubachi Music promoted by Audio Library https://youtu.be/0IgndUb1YQI

더보기

같이 보면 좋은 강좌

  • 프로토타입핑 Part 3/4 - figma에서 스크롤 기능 구현하는 방법 #팀라이브러리 #scroll #피그마

    프로토타입핑 Part 3/4 - figma에서 스크롤 기능 구현하는 방법  #팀라이브러리 #scroll #피그마

  • [번외편] figma에서 프로토타입핑 어디까지 될까? (왓챠 APP #case-study) # prototyping #피그마

    [번외편] figma에서 프로토타입핑 어디까지 될까? (왓챠 APP #case-study) # prototyping #피그마

  • 피그마 기초 강좌 - Part3 #디자인시스템 #LocalStyle #버전관리 #figma

    피그마 기초 강좌 - Part3 #디자인시스템 #LocalStyle #버전관리 #figma

  • Figma 파일 브라우저

    Figma 파일 브라우저

  • 프로토타입핑 Part 4/4 - figma에서 Overlay 구현하는 방법 #Overlays #오버레이 #피그마

    프로토타입핑 Part 4/4 - figma에서 Overlay 구현하는 방법  #Overlays #오버레이 #피그마

  • figma 회원가입 가이드 #무료편집 #피그마

    figma 회원가입 가이드  #무료편집 #피그마

  • 프로토타입핑 Part 2/4 - figma에서 스마트 애니메이션 기능 구현 #Prototyping #smart-animate #피그마

    프로토타입핑 Part 2/4 - figma에서 스마트 애니메이션 기능 구현  #Prototyping #smart-animate #피그마

  • Figma 계정 / 플랜

    Figma 계정 / 플랜

  • 피그마 기초 강좌 - Part4 #컴포넌트 #팀라이브러리 #디자인시스템 #figma

    피그마 기초 강좌 - Part4 #컴포넌트 #팀라이브러리 #디자인시스템 #figma

  • 피그마 기초 강좌 - Part2 #figma #아이콘제작

    피그마 기초 강좌 - Part2 #figma #아이콘제작

  • Figma 도구란?

    Figma 도구란?

  • 피그마 기초 강좌 - Figma 빠르게 훑어보기

    피그마 기초 강좌 - Figma 빠르게 훑어보기

  • 프로토타입핑 Part 3/4 - figma에서 스크롤 기능 구현하는 방법 #팀라이브러리 #scroll #피그마

    프로토타입핑 Part 3/4 - figma에서 스크롤 기능 구현하는 방법  #팀라이브러리 #scroll #피그마

  • [번외편] figma에서 프로토타입핑 어디까지 될까? (왓챠 APP #case-study) # prototyping #피그마

    [번외편] figma에서 프로토타입핑 어디까지 될까? (왓챠 APP #case-study) # prototyping #피그마

  • 피그마 기초 강좌 - Part3 #디자인시스템 #LocalStyle #버전관리 #figma

    피그마 기초 강좌 - Part3 #디자인시스템 #LocalStyle #버전관리 #figma

  • Figma 파일 브라우저

    Figma 파일 브라우저

  • 프로토타입핑 Part 4/4 - figma에서 Overlay 구현하는 방법 #Overlays #오버레이 #피그마

    프로토타입핑 Part 4/4 - figma에서 Overlay 구현하는 방법  #Overlays #오버레이 #피그마

  • figma 회원가입 가이드 #무료편집 #피그마

    figma 회원가입 가이드  #무료편집 #피그마

  • 프로토타입핑 Part 1/4 - figma로 프레젠테이션 제작하는 방법 #case-study #youtube-ui #피그마

    프로토타입핑 Part 1/4 -  figma로 프레젠테이션 제작하는 방법 #case-study #youtube-ui #피그마

  • 피그마 기초 강좌 - Part1 #figma #무료툴

    피그마 기초 강좌 - Part1 #figma #무료툴

  • 프로토타입핑 Part 2/4 - figma에서 스마트 애니메이션 기능 구현 #Prototyping #smart-animate #피그마

    프로토타입핑 Part 2/4 - figma에서 스마트 애니메이션 기능 구현  #Prototyping #smart-animate #피그마

  • Figma 계정 / 플랜

    Figma 계정 / 플랜

  • 피그마 기초 강좌 - Part4 #컴포넌트 #팀라이브러리 #디자인시스템 #figma

    피그마 기초 강좌 - Part4 #컴포넌트 #팀라이브러리 #디자인시스템 #figma

  • 피그마 기초 강좌 - Part2 #figma #아이콘제작

    피그마 기초 강좌 - Part2 #figma #아이콘제작

Build it in Figma

youtube.com

Build it in Figma

Join Rogie as he designs apps, sites, icons and more.

수도꼭지

Create a Design System in Figma

youtube.com

Create a Design System in Figma

Free course for learning how to use Figma to create a beautiful layout and a powerful design system for your team.

수도꼭지

Figma : Office hours

youtube.com

Figma : Office hours

수도꼭지

New Figma 기초 강좌

youtube.com

New Figma 기초 강좌

Figma를 처음 접하는 분들을 위한 기초 강좌 영상입니다.

AriRaNg

Tutorials: Prototype while you design

youtube.com

Tutorials: Prototype while you design

Learn how to create interactive prototypes to present ideas and test with users.

수도꼭지

Figma 기초부터 활용까지

youtube.com

Figma 기초부터 활용까지

피그마의 기본 툴 사용법과 기능 학습과 실습을 통한 활용 강좌

수도꼭지

피그마 활용과 팁

youtube.com

피그마 활용과 팁

피그마의 다양한 기능에 대한 강좌와 활용 방법

AriRaNg

New to Figma? Get started with

youtube.com

New to Figma? Get started with "Figma for beginners" tutorials

If you’re brand new to Figma or design tools, check out this playlist for a quick tour of key features as we take you through a rough approximation of the design process, and design a mobile app together. We move quickly and keep things at a high level, so search help.figma.com for more in-depth guides.

수도꼭지

피그마 프로토타입핑 강좌 (30분)

youtube.com

피그마 프로토타입핑 강좌 (30분)

30분이면 프로토타입핑 마스터!!

AriRaNg

Figma 툴 테크닉

youtube.com

Figma 툴 테크닉

Figma 도구 사용법 영상 강의

수도꼭지

Tutorials: Explore design features in Figma

youtube.com

Tutorials: Explore design features in Figma

Dive into Figma features and learn how to speed up your design workflow.

수도꼭지

피그마로 모바일 웹 만들기

youtube.com

피그마로 모바일 웹 만들기

수도꼭지

Build it in Figma

youtube.com

Build it in Figma

Join Rogie as he designs apps, sites, icons and more.

수도꼭지

Create a Design System in Figma

youtube.com

Create a Design System in Figma

Free course for learning how to use Figma to create a beautiful layout and a powerful design system for your team.

수도꼭지

Figma : Office hours

youtube.com

Figma : Office hours

수도꼭지

New Figma 기초 강좌

youtube.com

New Figma 기초 강좌

Figma를 처음 접하는 분들을 위한 기초 강좌 영상입니다.

AriRaNg

Tutorials: Prototype while you design

youtube.com

Tutorials: Prototype while you design

Learn how to create interactive prototypes to present ideas and test with users.

수도꼭지

Figma 기초부터 활용까지

youtube.com

Figma 기초부터 활용까지

피그마의 기본 툴 사용법과 기능 학습과 실습을 통한 활용 강좌

수도꼭지

피그마 활용과 팁

youtube.com

피그마 활용과 팁

피그마의 다양한 기능에 대한 강좌와 활용 방법

AriRaNg

New to Figma? Get started with

youtube.com

New to Figma? Get started with "Figma for beginners" tutorials

If you’re brand new to Figma or design tools, check out this playlist for a quick tour of key features as we take you through a rough approximation of the design process, and design a mobile app together. We move quickly and keep things at a high level, so search help.figma.com for more in-depth guides.

수도꼭지

피그마 프로토타입핑 강좌 (30분)

youtube.com

피그마 프로토타입핑 강좌 (30분)

30분이면 프로토타입핑 마스터!!

AriRaNg

Figma 툴 테크닉

youtube.com

Figma 툴 테크닉

Figma 도구 사용법 영상 강의

수도꼭지

Tutorials: Explore design features in Figma

youtube.com

Tutorials: Explore design features in Figma

Dive into Figma features and learn how to speed up your design workflow.

수도꼭지

피그마로 모바일 웹 만들기

youtube.com

피그마로 모바일 웹 만들기

수도꼭지

이 강좌가 포함된 라이브러리

+ 더보기

신고하기

회원님의 소중한 의견은 amoo에서 올바른 지식/교육 콘텐츠를 제공하는 데 사용됩니다.

0 / 130

커뮤니티 가이드를 위반한 계정은 제재를 받게 되며 심각하거나 반복적인 위반 행위에 대해서는
계정 해지 조치가 취해질 수 있습니다.

닫기

라이브러리에 저장

좋아하는 강좌들을 수집하고 관리하고 공유하세요

닫기