Figma Agency Website Design Tutorial
HTML-код
- Опубликовано: 2 июн 2024
- See NordPass Business in action now with a 3-month free trial with code CALEREDWARDS at nordpass.com/caleredwards
Get 2 years of NordPass with 1 month free for a personal account at www.nordpass.com/calernord with code CALERNORD.
Agency/Portfolio Web Design Figma Tutorial.
Chapters:
0:00 Starting with the Hero Section
8:33: Video Block & Our Work Sections
12:26 Awards/Client Work Section
15:04 CTA & Footer Sections
Clash Display Font: www.fontshare.com/fonts/clash...
-
Sign up for Figma:
psxid.figma.com/kh2feohwvmqd
Become a Member (Access to Completed Project Files):
/ @caleredwards
Sign up for Webflow:
webflow.grsm.io/caleredwards
Get 30% Off ProtoPie with Code: "CALER"
bit.ly/ProtoPie-Caler
My Desk Setup for Design & RUclips:
kit.co/caleredwards/my-setup
-
Visit my website:
caleredwards.com
Find me on Instagram:
Instagram: / caleredwards
-
Disclaimer: This video and description may contain affiliate links. By using any of my affiliate links, I receive a very small commission at no extra cost to you. Thank you for supporting the channel!
Music: Epidemic Sound
Figma Agency Website Design Tutorial
#figma #figmatutorial #uidesign
See NordPass Business in action now with a 3-month free trial with code CALEREDWARDS at nordpass.com/caleredwards
Or Get 2 years of NordPass with 1 month free for a personal account at www.nordpass.com/calernord with code CALERNORD.
Hope you enjoyed todays video :D
Finally someone that does buttons with autolayout instead of using a rectangle in the back of the text 😅
auto layout is life!
This looks so cool! Love this palette you chose, it's really different.
Thank you so much!!
waiting for more ! these types of videos are stunning
More to come! Thank you :D
i think i can make a wordpress template from this design!
So how would you turn a Figma design into a fully functioning website? Would someone else need to code it? Or is there an existing program to generate one? Great video thanks!
Nice tutorial! However, when resizing the frame height, remember to hold the Ctrl key, as other elements may also resize.
Good tip!
Thanks, Caler, for such a brilliant tutorial based on fresh and modern web design practices. I have a few basic questions; how you decide colors at first place, I mean do you use any sort of tool for that to come up with pleasing color or its just an idea and the second thing is I saw you went off grid when placing little logo boxes so it's fine to go off grid? I am moving forward with the mobile version ;-)
For designs I do for RUclips videos I just use whatever works and looks good for colors. I often use the grid as a rough guide, it is up to you if you want to stick to them (I probably could have adjusted the 12 col gap to fit what I needed, instead of going off grid to begin with). But, I was using multiples of 8pt for most of the spacings so in that case I thought it was fine. Thanks for the comment, hope that helped :D
@@CalerEdwards Many thanks for clarifying. I have tagged you on Instagram for my web version I gave it a little spin. Please check ;-)
🍵 Great, it would be grate if you provide link of this design for design inspiration ⚡
maybe I can convert it into actual webpage
Great video, would love to participate in your challenge.
Go for it! :D
🔵🔵🔵🔵