Flux Academy
Flux Academy
  • 1 836
  • 52 582 754
Framer 3D Transforms
How to create 3D animations using Framer’s new 3D tools.
Demo 👉 runwithfriends.framer.website/
Download the assets and follow along 👉 bit.ly/4dJDEN8
CHAPTERS
0:00 Thoughts on 3D in web design
1:31 Walkthrough 3D properties
7:09 Create animation
Learn to design jaw-dropping websites with ease on our Framer Masterclass 👉 bit.ly/3QOwqh3
📱 Find us on SOCIAL MEDIA
Matt Jumper’s UA-cam channel 👉 @mattjumper
Matt Jumper’s X (Twitter) 👉 mattjumper
Flux Academy's Instagram 👉 flux.academy
Flux Academy’s TikTok 👉 www.tiktok.com/@fluxacademy
Переглядів: 2 288

Відео

10 ways to add depth to your web design
Переглядів 8 тис.9 годин тому
If you want to add visual interest to lifeless layouts, try adding depth. Here’s 28 (!) live website examples to demonstrate ten different techniques that you can use to give the perception of depth on a flat screen. Learn to create beautiful designs with our Core Design Skills course 👉 bit.ly/4aq6e3f CHAPTERS 0:00 Intro 0:19 Flat layers 1:36 Shadows 3:34 Transparency 4:57 Blend modes 6:30 Blur...
Advanced responsive website in Figma
Переглядів 5 тис.19 годин тому
In this tutorial, Maddy demonstrates how to design a beautiful, responsive website in Figma. Download the starter file and follow along 👉 bit.ly/3yfsoIn CHAPTERS 0:00 Intro 0:45 Desktop version 28:49 Scrolling animation 30:30 Tablet version 35:45 Mobile version Learn Figma for Web Design 👉 bit.ly/4dwIddP 📱 Find us on SOCIAL MEDIA Maddy’s UA-cam channel 👉 @MaddyBeard Flux Academy's Instagram 👉 i...
Copy these 21 Hero Section Designs
Переглядів 19 тис.День тому
The hero section is the most important part to get right because it’s the first thing people see on your website, before they start to scroll. With these examples from real websites, Matt shows us why these layouts are successful and gives us some new ideas to try out. 🤩 FREE Resources Improve on any composition with this free handbook. Download the Principles of Layout here 👉 bit.ly/3wgvZp0 En...
Auto Layout for Beginners (crash course)
Переглядів 7 тис.14 днів тому
If you’re not using auto-layout in Figma, you’re missing out on a huge time saver! The good news is, auto-layout is actually very simple and intuitive once you wrap your head around it. This crash course with Maddy shows you everything you need to start making the most of this feature. 🎓 LEARN Figma for web designers. Master Figma the right way with hands-on experience and 1:1 mentor feedback. ...
5 Amazing Framer Websites For Inspiration
Переглядів 7 тис.14 днів тому
Your ability to tell good design from bad, and continually elevate your standards, is what will separate you as a web designer. So join Matt for this walkthrough of five beautifully designed websites, all built in Framer. Want to learn to build websites like these? Join The Framer Masterclass 👉 bit.ly/49XGcV1 CHAPTERS 0:00 Intro 0:17 Oleg Masnyy 2:21 i-D 3:52 Lóvi AI 6:32 Slides Agency 9:59 Bro...
Web Design with Relume AI & Webflow - Full Course
Переглядів 25 тис.21 день тому
In this course we’re going to be building a fun website for a Sneaker Museum! I’m going to show you exactly how I think and work, so that you can not only improve the quality of your web designs but also increase your efficiency and get the work done faster. CHAPTERS 0:00 Intro 1:18 Turn brief to moodboard 9:45 Create wireframes with Relume 23:40 Design the website in Figma 46:43 Build in Webfl...
Easy animations with Lottie
Переглядів 4,1 тис.21 день тому
Animation can elevate a website from uninspiring to delightful, but motion design has traditionally been complex, time-consuming, and produced huge files that increase load times. So in this video, Matt gives you a crash course in Lottie Files and Lottie Creator. Tools which not only radically simplify the process of editing or creating vector animations but also make it easy to incorporate the...
Don't make these rookie mistakes in Framer
Переглядів 6 тис.28 днів тому
Watch out for these common mistakes that many beginners make when building responsive websites in Framer. Framer makes it possible for you to build jaw-dropping websites fast! The Framer Masterclass will teach you how. Enroll here 👉 bit.ly/3vYuUBX CHAPTERS 0:00 Overview of mistakes 2:36 Using frames with absolute positioning 8:21 Fixed sizing 14:15 Neglecting the page structure 19:14 How breakp...
I built a portfolio in 1-hour, 10-hours, 100-hours! (Using Webflow)
Переглядів 44 тис.Місяць тому
Enroll in Ran’s FREE WORKSHOP to see how the 100-hour portfolio was built 👉 bit.ly/3VVMIYR Learn to build websites like these with Webflow. Enroll in our Webflow Masterclass 👉 bit.ly/4aW4v6N I haven’t updated my portfolio in six years! My challenge is to get my new portfolio online in just 1-hour. Then I’ll do a better portfolio in 10-hours. Finally, I’ll commit 100-hours to creating an award-w...
The only 6 fonts web designers need (and they’re free!)
Переглядів 17 тис.Місяць тому
Stop trawling through thousands of fonts online to find the perfect one. Matt has six typefaces for you that might be all you ever need! Even better, these fonts are all available for free. 📗 Get your free download of our ebook: ‘The Best Google Fonts for Every Mood’ 👉 bit.ly/3vJWWku CHAPTERS AND LINKS: 0:22 BDO Grotesk 👉 uncut.wtf/sans-serif/bdo-grotesk/ 1:36 Outfit 👉 fonts.google.com/specimen...
1-to-1 Portfolio Website Review (Office Hours sneak peek)
Переглядів 4,6 тис.Місяць тому
In this snippet from a recent Office Hours session, Ran gives live feedback on a web design agency website by one of our Flux Academy students. 🙌 Download our Perfect Landing Page Figma template and you’ll never be stuck with a blank screen again. Grab it here for free 👉 bit.ly/4cI3Gjy Join the Flux Academy “All Access” program to participate in Office Hours sessions, get feedback from Flux men...
Multi-editing in Figma
Переглядів 4,3 тис.Місяць тому
Multi-editing in Figma
5 Must Have Ai Tools for Designers in 2024
Переглядів 39 тис.Місяць тому
5 Must Have Ai Tools for Designers in 2024
How to create a sitemap (for any website) in 2024
Переглядів 13 тис.Місяць тому
How to create a sitemap (for any website) in 2024
Vertical, Sticky, and Horizontal Scrolling in Figma
Переглядів 10 тис.Місяць тому
Vertical, Sticky, and Horizontal Scrolling in Figma
Learn Framer in 38 minutes! (Crash Course)
Переглядів 15 тис.2 місяці тому
Learn Framer in 38 minutes! (Crash Course)
Re-designing Coca-Cola's Website in Figma
Переглядів 10 тис.2 місяці тому
Re-designing Coca-Cola's Website in Figma
Why he switched to Framer from Webflow
Переглядів 15 тис.2 місяці тому
Why he switched to Framer from Webflow
How to build an award-winning Webflow agency (w/ Nkenna Amadi)
Переглядів 5 тис.2 місяці тому
How to build an award-winning Webflow agency (w/ Nkenna Amadi)
My Figma to Framer Process
Переглядів 25 тис.2 місяці тому
My Figma to Framer Process
Amateur vs Pro Website Design (with examples)
Переглядів 12 тис.2 місяці тому
Amateur vs Pro Website Design (with examples)
Using Webflow AND Framer to build a successful agency
Переглядів 22 тис.2 місяці тому
Using Webflow AND Framer to build a successful agency
Why these websites won awards
Переглядів 12 тис.2 місяці тому
Why these websites won awards
Is your website accessible? (Beginners Guide)
Переглядів 6 тис.3 місяці тому
Is your website accessible? (Beginners Guide)
Figma Tutorial for Beginners (2024): Website Design
Переглядів 57 тис.3 місяці тому
Figma Tutorial for Beginners (2024): Website Design
#17 - Ran Segall on luck, motivation, and what’s next (interviewed by Kaleb Jae)
Переглядів 1,3 тис.3 місяці тому
#17 - Ran Segall on luck, motivation, and what’s next (interviewed by Kaleb Jae)
Learn Web Design For Beginners - Full Course (2024)
Переглядів 1,1 млн3 місяці тому
Learn Web Design For Beginners - Full Course (2024)
One free design app does everything? (Modyfi demo)
Переглядів 93 тис.3 місяці тому
One free design app does everything? (Modyfi demo)
Designing a brand identity for a real client
Переглядів 17 тис.3 місяці тому
Designing a brand identity for a real client

КОМЕНТАРІ

  • @SS-il3ki
    @SS-il3ki 24 хвилини тому

    hello please answer me this question, so, this method is so far free, but if a decide to buy a domain I need to pay just for the domain or they will require me to buy a monthly membership? if so how can I do it all fro free thank you in advance

  • @SK-ii9qw
    @SK-ii9qw 48 хвилин тому

    this was super confusing.

  • @applemusic2135
    @applemusic2135 Годину тому

    I came here to write this unique line he got bitten by a duck but someonewritten already i'm fucked shit!!!!.

  • @diffuusio4852
    @diffuusio4852 3 години тому

    For those that care, I would advice not using Figma with Firefox.

  • @anacostecmedia
    @anacostecmedia 3 години тому

    I love your video and I also enjoyed your teaching. Question: a what type of website is created for music download?

  • @ihuomakings8298
    @ihuomakings8298 4 години тому

    The download links arent working

  • @matioz9125
    @matioz9125 8 годин тому

    Vb

  • @intelligentbodymassage.com7472
    @intelligentbodymassage.com7472 10 годин тому

    is this generating for web flow via figma ?

  • @chinedunwafor3793
    @chinedunwafor3793 13 годин тому

    Please how can i get the starting files i really want to follow along already clicked on the help, also wrote my email address but have not gotten any feed back

  • @alicia-fhh
    @alicia-fhh 19 годин тому

    Your content deeply resonates with viewers! - "Self-belief is the cornerstone of your strength.."

  • @tresvecesdos
    @tresvecesdos 21 годину тому

    Súper Ran

  • @user-pv3ot4kx8s
    @user-pv3ot4kx8s 22 години тому

    My company uses WorkTime and it works great! It is a very delicate and effective tool (no screenshots or video recording).

  • @cmdaltctr
    @cmdaltctr 22 години тому

    Auto layout = Flexbox! That's it FIgma! Why reinvent it with a stupid name. Purely marketing purpose and confuses everyone. Explain it as a flexbox is, in the end IT IS A Flexbox. Thanks Flux Academy!

  • @user-wi6yg8vf3y
    @user-wi6yg8vf3y 23 години тому

    Yeah, program for designers... Not serious project. Useless

  • @alexsandrkhaladzhy6386
    @alexsandrkhaladzhy6386 День тому

    very cool video!

  • @hussam24
    @hussam24 День тому

    4:45

  • @terrynicholls1991
    @terrynicholls1991 День тому

    I don't usually like detailed logos but you did really well with this

  • @kamiG74
    @kamiG74 День тому

    Thanks for this video ! I guess we need subscribe to shopify as well? And i don’t understand very well the Framer e commerce on licence plan : if the price is for just one site lifetime but need to add shopify subs. At this Time can we have access to shopify apps , or the basics like upsell, downsell, or crossell?

  • @SwingZuguine
    @SwingZuguine День тому

    Very good Tutorial. Toda raba!

  • @StevenGSamuel
    @StevenGSamuel День тому

    How did he open the section with the motion text in it?

  • @Nishitha_Jay
    @Nishitha_Jay День тому

    This video is really inspirational! keep up!

  • @alicekerketta4230
    @alicekerketta4230 День тому

    Wow this is brilliant. 🤩

  • @edwardamaral6819
    @edwardamaral6819 День тому

    Guys this is the worst advice and example ever!!!! He's giving you graphic design advice. He's not even looking into how they are telling the story of the project. Project scope, personas, use cases, the challenges, the problem, the solution and finally impact!. These are all graphic and visual designers. I mean everyone is using cookie cutter templates that already makes the visual and graphic design and typography look good. You can't judge a product design portfolio with graphic design insights. This guy himself is obviously a graphic and web designer. Ugggggh.

  • @edwardamaral6819
    @edwardamaral6819 День тому

    You are not a real product and or UX designer. You're looking at these like a graphic and brand communications designer. You can't just look at this shit and say it looks good. That first guy... most of that looks like cookie cutter designers stolen from templates and UI kits. Typography is not something that a product design ever focuses on, because of design systems and pre chosen typefaces for branding. You my friend are a graphic designer turned web designer calling himself a product designer who knows nothing of real product or user experience design. Just like that guy something Doe. lol.

  • @lemonlimelukey
    @lemonlimelukey День тому

    it was looking more accurately perspectivedized (my new word) better on everywhere but the sign you put it on lmaooo

  • @ibroraheem3854
    @ibroraheem3854 День тому

    sir please add to it how we can add a responsive page to each bottom

  • @ibroraheem3854
    @ibroraheem3854 День тому

    best i have ever seen

  • @zariachenshui7386
    @zariachenshui7386 День тому

    Please use lip balm.

  • @satyam3169
    @satyam3169 День тому

    That was some great editing.. also I have just started learning web designing and now i have got a yt channel to learn from..

  • @Erwin_t
    @Erwin_t День тому

    You’re freaking amazing man!

  • @Mr_wolf162
    @Mr_wolf162 День тому

    ❤😌

  • @EthanSuero
    @EthanSuero 2 дні тому

    I built the FOREVER website, thanks for the shout out!

  • @MrVuittonDon
    @MrVuittonDon 2 дні тому

    Whats wrong with free generators?

  • @sandrinonapeelingsikat
    @sandrinonapeelingsikat 2 дні тому

    Wyf! Awesome🎉

  • @klavive
    @klavive 2 дні тому

    i tried it. But on my 4k (3840 × 2160 Pixel) Display the mountain is over the Headline. How can i fix this?

  • @Queziam31
    @Queziam31 2 дні тому

    Thank you for the video!! I`m an enginner and currently I`m trying to change carrer. My initial plan was to switch to graphic design but with the progress of AI it`s king of demotivating. Second though was UI/UX design but I see now a lot of people not encouraging this field. I`m back to have a feeling that I`m lost and stuck with something I really don`t like doing :/

  • @samagramishra5885
    @samagramishra5885 2 дні тому

    👍🏼

  • @sakalpaul
    @sakalpaul 2 дні тому

    Nice video :D i was waiting for it. will learn a lot

  • @tn8880
    @tn8880 2 дні тому

    I've never been this early

  • @user-su4rd3ml8b
    @user-su4rd3ml8b 2 дні тому

    first

  • @gwapingdriver2688
    @gwapingdriver2688 2 дні тому

    Fantastic

  • @salemnaouai6105
    @salemnaouai6105 2 дні тому

    Can't access to the workshop ? It says put your email but there is no space to put it! Can you fix it please ? I adore the work and i want to learn how to do like this

    • @FluxAcademy
      @FluxAcademy 2 дні тому

      Sorry you’re having trouble accessing this resource. Can you try reloading the page? If you still have trouble with it, please click "Help" on our website (bottom right corner) and a member of our team will assist you.

  • @CupcakeChan2611
    @CupcakeChan2611 2 дні тому

    What i did to make it different pages i designed 4 websites and interlinked it to make it look like a website with a navigation that takes you through different pages rather than it scrolling down as a scroll site

  • @davisdragneel1308
    @davisdragneel1308 2 дні тому

    Quick question does the free alternatives works as good as the paid softwares?

  • @hxxzxtf
    @hxxzxtf 2 дні тому

    🎯 Key Takeaways for quick navigation: 00:00 *🔄 Duplicating and modifying designs repeatedly wastes time, which components in Figma help avoid.* 00:25 *📖 Components are templates for reusable design elements like buttons, icons, etc.* 00:52 *🖼️ Components are managed in the Assets panel and can be dragged onto the canvas.* 01:47 *🌓 Variants allow a single component to have multiple states (e.g. default, hover).* 02:54 *⚙️ Component properties minimize the need for variants by allowing dynamic changes.* 04:16 *✍️ Demonstrates creating a button component with default and hover variants.* 06:17 *📝 Shows adding a text property to dynamically change button text.* 07:21 *👁️ Adds a boolean property to show/hide the button text.* 08:56 *🖼️ Adds a boolean property to show/hide an icon in the button.* 09:49 *🔃 Demonstrates using an instance swap property to change the button icon.* Made with HARPA AI

  • @sanikadesign
    @sanikadesign 2 дні тому

    Cant thank you enough Ryan. I always felt that web design is super complex and hard. I have been working as a brand designer and was not able to provide the web design service, not even the design basics let alone the development. Thanks for sharing and teaching that too for free

  • @marexibinsa2915
    @marexibinsa2915 2 дні тому

    What a brilliant video. Great advice, simple and practical.

  • @bhagyalakshmi-gv2hg
    @bhagyalakshmi-gv2hg 2 дні тому

    Thank you for this

  • @augustoschndr
    @augustoschndr 2 дні тому

    We just get started.. right now the creative process is faster and you still can go deep if you want. 2024 is the Manifesting Year. Don’t loose the wave ~

  • @franknyambe3965
    @franknyambe3965 2 дні тому

    I'm finding it very hard to work with shapes on photopea. I cant make a shape then start another one, it keeps on making changes to the same current one, or sometimes the previous shape somehow disappears