본문 바로가기
닫기
필터

Page of 9
  • Build it in Figma: Designing a book app, visual design explorations [Part 2]

    Join Rogie as he designs an app for designers, centered around discovering useful books for leveling up as a designer.

    Build it in Figma: Designing a book app, visual design explorations [Part 2]

  • Build it in Figma: Designing a book app for designers

    Join Rogie as he designs an app for designers, centered around discovering useful books for leveling up as a designer. In the first part of this 3 part series, we'll ideate and wireframe out ideas for the app.

    Build it in Figma: Designing a book app for designers

  • Build it in Figma: Design a responsive website navigation [Part 1]

    Part 1/3. See how Rogie uses constraints and components to build a navigation that scales from mobile to desktop. Figma Community file used in this livestream: https://www.figma.com/community/file/860571905509515081/Build-it-in-Figma%3A-A-Responsive-Website-Navigation

    Build it in Figma: Design a responsive website navigation [Part 1]

  • Build it in Figma: Create a Design System — Foundations

    Create your style guide, type scale, and brand color scheme and turn them into shared styles, grids, and typography to kick off designing a design system from scratch. Figma is free to use. Sign up here: https://bit.ly/2WRIe6s Figma File: https://www.figma.com/community/file/867135839870202854

    Build it in Figma: Create a Design System — Foundations

  • Figma For Beginners: Prepare for Handoff (4/4)

    Figma is free to use. Sign up here: https://bit.ly/32YMGmV Get a copy of the Petma design file: https://bit.ly/3qkUR6X In this series, we walk you through Figma fundamentals while building an app. This video will cover preparing your files for handoff and exporting assets. Learn more on our Help Center: https://bit.ly/3pH2DI5 #Figma #FigmaTutorial #FigmaForBeginners Timestamps: 0:00 Prepare for Handoff 0:45 Custom thumbnails 1:39 Inviting and Permissions 2:06 Embeds 2:17 View only Editor 2:54 Inspect Panel 3:26 Export assets 4:25 What we've learned

    Figma For Beginners: Prepare for Handoff (4/4)

  • Figma For Beginners: Build prototypes (3/4)

    Figma is free to use. Sign up here: https://bit.ly/2ULGcDa Get a copy of the Petma design file: https://bit.ly/3qkUR6X In this series, we walk you through Figma fundamentals while building an app. This video will cover building an interactive prototype in Figma. Learn more on our Help Center: https://bit.ly/3pH2DI5 #Figma #FigmaTutorial #FigmaForBeginners Timestamps: 0:00 Prototyping 1:00 Create prototype connections 2:23 Animation 4:56 Feedback 5:58 View comments 6:11 Incorporate feedback 7:12 What We Learned 7:22 In the next video...

    Figma For Beginners: Build prototypes (3/4)

  • Figma For Beginners: Create designs (2/4)

    Figma is free to use. Sign up here: https://bit.ly/3nDt3IN Get a copy of the Petma design file: https://bit.ly/3qkUR6X In this series, we walk you through Figma fundamentals while building an app. This video will cover designing in Figma. Learn more on our Help Center: https://bit.ly/3pH2DI5 #Figma #FigmaTutorial #FigmaForBeginners Timestamps: 0:00 Create Design 0:32 Pages and set up 1:24 Measuring and Layout Grids 2:33 Corner Radius and Place Image 3:40 Text properties and Styles 5:40 Plugins, color, and accessibility 7:23 Auto Layout 10:20 Create Components 11:37 Clip Content 12:20 Overrides 13:06 Vector networks and boolean operations 16:04 Boolean operations 16:38 Create a navigation bar 18:13 Floating Action Button (FAB) 19:18 Scrolling and Fix Position 20:53 Let's recap

    Figma For Beginners: Create designs (2/4)

  • Figma For Beginners: Explore ideas (1/4)

    Figma is free to use. Sign up here: https://bit.ly/32ZdMdr Get a copy of the Petma design file: https://bit.ly/3qkUR6X Get a copy of the wireframe kit: https://www.figma.com/community/file/900479694578549256 In this series, we walk you through Figma fundamentals while building an app. This video will cover wireframing and exploring ideas. Learn more on our Help Center: https://bit.ly/3pH2DI5 #Figma #FigmaTutorial #FigmaForBeginners Timestamps: 0:00 Figma for Beginners 0:41 Create an Account and Team 1:06 Free Education account 1:14 Teams and Invite members 1:35 Wireframe an app and our app idea, Petma 2:05 The Editor (where you design) 2:30 Frames 3:20 Pan and Zoom 3:56 Creating new Layers 4:30 Layer's panel hierarchy 4:57 Add an avatar 5:45 Stroke and Fill 6:28 Alignment and text 7:15 Placeholder Icons (rectangles) 7:45 Duplicating layers 8:11 Group Layer 9:13 Components and Libraries 10:03 Figma Community 11:38 Instances 12:00 Constraints 12:40 Additional Screens 13:28 Copy and paste between frames 13:48 Iterations and feedback 15:28 In the next video...

    Figma For Beginners: Explore ideas (1/4)

  • What's Figma?

    Figma is free to use. Sign up here: http://bit.ly/2q7OwRV Figma is where teams design together. Bring ideas to life in a design, wireframe, or prototype. Partner with teammates from content creation to design implementation. Get better feedback from your stakeholders. Figma gets everyone on the same page—literally.

    What's Figma?

  • Figma Tutorial: Device Frames and Scrolling

    Figma is free to use. Sign up here: http://bit.ly/figma-device-frames-scrolling If you have questions along the way head over to our user forum (https://spectrum.chat/figma) and connect with other Figma users. In this video, we’ll teach you how to make your Prototypes more immersive through the use of scrolling and device frames. 0:00 - What is prototyping? 0:40 - How to scroll in a prototype 1:45 - How to fix elements in a prototype 2:45 - How to add horizontally scrolling to a prototype 4:55 - How to zoom in on Figma prototype 5:52 - Using devices frames in a Figma prototype

    Figma Tutorial: Device Frames and Scrolling

라이브러리에 저장

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

닫기