Figma Agency Website Design Tutorial

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 & KZbin:
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

[@CalerEdwards]

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

[@BrialMusic]

Finally someone that does buttons with autolayout instead of using a rectangle in the back of the text 😅

[@CalerEdwards]

auto layout is life!

[@ldmun]

This looks so cool! Love this palette you chose, it's really different.

[@CalerEdwards]

Thank you so much!!

[@sharifahamed145]

waiting for more ! these types of videos are stunning

[@CalerEdwards]

More to come! Thank you :D

[@VaibhavShewale]

i think i can make a wordpress template from this design!

[@lizzyb7947]

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!

[@UmairUlhaque]

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 ;-)

[@CalerEdwards]

For designs I do for KZbin 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

[@UmairUlhaque]

@@CalerEdwards Many thanks for clarifying. I have tagged you on Instagram for my web version I gave it a little spin. Please check ;-)

[@rajlanjewar]

🍵 Great, it would be grate if you provide link of this design for design inspiration ⚡ maybe I can convert it into actual webpage

[@shivendrapawar9618]

Nice tutorial! However, when resizing the frame height, remember to hold the Ctrl key, as other elements may also resize.

[@CalerEdwards]

Good tip!

[@bijaysh]

Great video, would love to participate in your challenge.

[@CalerEdwards]

Go for it! :D

[@da7knachat21]

🔵🔵🔵🔵