Тёмный

Designing the new Dive website in Figma + Framer 

Ridd
Подписаться 7 тыс.
Просмотров 25 тыс.
50% 1

#figma #productdesign
This tutorial shows how I use components to speed up my workflow in Figma. I also talk about visual design principles and how I approach UI design in Figma. Lastly we’ll see how easy it is to go from Figma to Framer to published website.
🎨 Ready to become a better product designer? 👉 www.figma.academy
🐦 Discover more design deep dives on Twitter 👉 Ridderingand

Опубликовано:

 

5 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 53   
@victorbelo9027
@victorbelo9027 Год назад
I don't even have words to say how pleasant it has been to study figma. especially when I find content like this. Thank you very much. I've never taken any software courses, but I've been working as an art director for almost five years. always studying alone, looking, trying, making mistakes. Anyway, I just wanted to express my gratitude. you are a professional reference. thanks for the content! Hugs from Brazil
@andyhsu2708
@andyhsu2708 Год назад
Being able to see the behind the scene is so valuable! I learned so much from this, thank you Ridd! (and hope there's more to come 🤞🏼)
@ridd
@ridd Год назад
Planning on it!
@enyipreshious
@enyipreshious Год назад
The tutorial was an eye-opener, I love it. The Framer transition is helpful too
@ridd
@ridd Год назад
Glad it was helpful!
@bionicashish
@bionicashish Год назад
Greate Video! I also use auto layout from the get go but making it a component from the beginning was something new to me. Definitely going to introduce that practice in my workflow
@ridd
@ridd Год назад
It's fast but it's also kinda fun to see it all come to life like that too 😅
@sainteleven6880
@sainteleven6880 Год назад
This was pleasure to watch, workflow is jawdropping
@ridd
@ridd Год назад
Glad you liked it!
@gavin-hall
@gavin-hall Год назад
This was very insightful thank you. I needed more insight about that last outline issue.
@megaroeny
@megaroeny Год назад
Glad I’m not the only one to make a component right off the bat 😂❤
@igo2054
@igo2054 Год назад
Great stuff, I am not a fun of using auto-layout so much but you have used it here in a very efficient way
@mdqmatias
@mdqmatias Год назад
That card, omg, looks incredible!
@NavesNiche
@NavesNiche 10 месяцев назад
Awesome video! I like your personality
@DenisJeliazkov
@DenisJeliazkov Год назад
Absolutely love it! Glad to see some Of the ways you are thinking, def need to include in my workflow
@nishanthb2327
@nishanthb2327 Год назад
After seeing this video i realized that i know 1%of figma !!! thank you
@pouyapj1jan122
@pouyapj1jan122 Год назад
Great but that would be awesome that you could type in Shortcuts description and in the Video to learn
@julianTrichardson
@julianTrichardson Год назад
I love the way you teach. Thank you bro.
@AtomicPixels
@AtomicPixels Год назад
🤣i love how he emphasizes that components UPDATE EVERYWHERE when they change 🤣. It almost beats the Blackhole repeat-recycle-repeat-reveal that "not even light can escape", like dewddd neeeeeuuuu wayyyy breeeeeeehhhhh never hurrrrrddddd
@codingwithdidem
@codingwithdidem Год назад
Please make more of these videos its goldd
@ridd
@ridd Год назад
Trying 😅❤️
@sarahigbinosa3004
@sarahigbinosa3004 Год назад
Thank you so much Ridd, this is really helpful.
@ridd
@ridd Год назад
Good I'm glad :)
@jinn7821
@jinn7821 Год назад
Whoah!!! What an awesome video. Thanks for sharing the knowledge. How did you design the active status of the menu item in the nav bar?
@ridd
@ridd Год назад
It's a triangle vector shape with a bit of a layer blur :)
@bhaveshgavhankar
@bhaveshgavhankar 11 месяцев назад
How did you design the selected state of course in nav menu it’s so good
@0xGast
@0xGast Год назад
the programmers will be going crazy after seeing this design XD
@AhmedMagdy-lf4nr
@AhmedMagdy-lf4nr Год назад
Very nice.. can you build that with framer tutorial?
@skyler.schain
@skyler.schain Год назад
Super cool Ridd! What is the benefit of pinning the blur layer and noise layer?
@ridd
@ridd Год назад
Allows me to have everything else in an auto layout so I need to absolutely position that since they are stacked on top of each other and kind of independent of the rest of the layout 👍
@shicka52
@shicka52 Год назад
Love the new website! I was wondering, which tool are you using for screen recording & video?
@ridd
@ridd Год назад
All in Descript!
@stvvjbs
@stvvjbs Год назад
What's that music cover background? looks so dope!
@Loulou71150
@Loulou71150 7 месяцев назад
What is the pros to use Figma then Framer ? Why not use Framer directly for the whole process ? Is it because Figma allows more personnalisation ?
@milosmiljanovic
@milosmiljanovic Год назад
This is so sick!
@DatboiToro
@DatboiToro 11 месяцев назад
Can u please drop the layout link or something? I'm actually working on my first project for a university.. I can't make something like this yet.. I really think they would like this layout and design thanks..
@-ct-celcomtechniques2566
@-ct-celcomtechniques2566 Год назад
Gold !
@SzabatDesign
@SzabatDesign Год назад
Thank you RU-vid algoritm for show me Ridd on main scren. 1 MORE SUBSCRIBTION! FIRE! 💪🔥
@ridd
@ridd Год назад
😇🙌
@jgerber6955
@jgerber6955 Год назад
Not sure for what you actually need figma anymore
@merisimamovic965
@merisimamovic965 Год назад
What happened at 10:15 when this selection popped up? Thanks!
@AS-ld5mz
@AS-ld5mz Год назад
why don't you design in framer from the start? is there any draw backs?
@ridd
@ridd Год назад
I'm just 10x faster in Figma so I do my initial exploring/building there and then move into Framer once it's time to start fine-tuning
@alejandrogalvan8456
@alejandrogalvan8456 Год назад
when the Framer course?
@ridd
@ridd Год назад
Soon :) Jump on the waitlist on dive.club if you haven't already!
@diegolanzani4766
@diegolanzani4766 Год назад
@@ridd Thas is awesome! any expected day for the realise?
@ridd
@ridd Год назад
@@diegolanzani4766 pretty tbd still
@des7638
@des7638 Год назад
Dope
@notyetforkliftceritified373
how do you keep your playground frame fixed but the items are scrollable?
@alvinrumbaoa
@alvinrumbaoa Год назад
Man i love framer more
@IStMl
@IStMl Год назад
Hi how did you create the noise?
@ridd
@ridd Год назад
There are some nice noise plugins in the Figma community!
Год назад
9:30 just “[“ works for me
Далее
How to design with REAL data in Figma
7:00
Просмотров 14 тыс.
My Figma to Framer Process
16:30
Просмотров 49 тыс.
ВЫЖИЛ В ДРЕВНЕМ ЕГИПТЕ!
13:09
Просмотров 241 тыс.
Bro's Using 3 Weapons
00:36
Просмотров 3,4 млн
Creating Lottie animations in Figma
6:45
Просмотров 42 тыс.
The Google UX Design Project that got me HIRED at IBM
18:51
Why I switched to Framer from Webflow
12:17
Просмотров 164 тыс.
Framer Crash Course
34:49
Просмотров 44 тыс.
4 Tricks For Best Figma To Framer Export
10:14
Просмотров 32 тыс.
10 Things To Do Before Publishing a Framer Website
8:45
From Figma to Real Website With Framer | No Code
11:21
Iterate 2x faster in Figma
8:41
Просмотров 2,8 тыс.