Figma Workflow: Complete Website Design

We're working on a full in-depth Figma course! Join the waitlist: flux-academy.typeform.com/to/...
Need a new Figma account? - psxid.figma.com/s8z3306bhq0h
In this video I’ll walk you through step-by-step on how I would replicate the Linear’s website.
Check out my workflow and learn how I go about creating styles, components, wire framing and so much more.
📽️ CHAPTERS
00:00 - Intro
00:24 - Creating styles & components
15:34 - Wire-framing
23:17 - Adding design elements
39:05 - Final result
Let me know what you’d like to see next! 💬
Subscribe to Tim's UA-cam Channel 👉 / timgabedesign
Tim Gabe’s Instagram 👉 timgabe.des...
📱 Find us on SOCIAL MEDIA
Flux Academy's Instagram 👉 / flux.academy
#figma #webdesign #freelancewebdesigner #figmatips #design

[@teaman7v]

Title a little misleading. This video contains nothing about design. This is a tutorial on how to layout someone else's design in figma. Skillfully done, with some info on how to use figma, but not to be confused with design.

[@VisionCS2]

Awesome stuff! So cool to see your thought process

[@LenaGuayroso]

This video is AWESOME! Thank you so much for it

[@voxus4239]

You guys provide such crazy value it's 🤯🤯 Could you guys make a video on coming up with these types of designs?

[@1deplatt]

Figma is also a prototyping tool and also needs to be handed off to devs. I would love to see a complete workflow

[@AP-lw9ll]

100% agree

[@capoeiristaua1420]

It's easy: you just create a thousand autolayouts inside of autolayouts, and make the component out of everything that repeats, and they're going wild.
Oh, and maybe name everything with that camelCase to finish them completely.

[@GraveRave]

Tim Gabe is the man!

[@michelepaludetti]

I suggest to use the Inspect option in the browser to quickly know what is the font family and size, instead of manually overlap the titles. Thera are also plugins for chrome that help you extract the css easily.

[@luisPerez-xg2hg]

hi, What kind of pluging ?

[@michelepaludetti]

@@luisPerez-xg2hg I’ve used CSS Peeper, but there are many others

[@kavineesh12]

Hey awesome stuff just want to see how can we do the same prototyping in Figma

[@Fostit]

Great video! Figma is a great tool, I used to work with Illustrator for mock-ups but now I feel like a dinosaur, I need an upgrade :)

[@petermckinnon386]

Fantastic.

[@derekbrunelle8915]

Very informative video for someone like me who is just learning Figma. How was Linear's page copied into Figma?

[@emmanueloladipojohnson890]

How did you make the screenshot into one single image?

[@bySterling]

Curious, since Figma isn’t a working website builder wouldn’t it make more sense to design w front end Elementor on a WP site?

[@jeeboombaa4734]

Bro how to run in online, how to convert figma design to real website?

[@danyalalam1544]

Great! Its Nice Stuff
Can you create a tutorial for Trending UI Design using some help from AI Tools such as (Dall e, mid-journey, and Chat gpt, )

[@CronYcK1]

Great

[@maixanixo9246]

How do I just hire you guys to do my website omg

[@tetianaserbinenko9285]

It will be nice to see how you create website from zero

[@shaileshhon5914]

make your figma design animated like the original one

[@ideasunravelstudio151]

This is a great tutorial but all this can be done with a plugin in 30 seconds only!

[@filetmignon9978]

I'll say that the title is really misleading. Clicking on this I thought this would be a complete website design as the title suggests, but there isn't any designing going on in the video. Instead it shows a workflow of redoing something in Figma that's already been fully designed.
The title should refer to how tools should be used, or the workflow of using figma, and not make it seem like the content will be a website design, let alone a complete one.
Lastly, who would actually do this in the real world? The workflow of making a design like this is not what the video shows, and taking time to replicate a finished design which is what the video shows, isn't something a designer will hardly ever do. The content is fine, but I think that the title should definitely be redone.

[@sowmocoding5740]

This is not even a tutorial. You just fetched the designed system from already built website, like what we get to learn about designing something new here?

[@akane8615]

Off topic but you're handsome.

[@madnad9634]

why are you tracing the design, why not starting from scratch? just follow your Instinct! well, not a good idea though.

[@xxxxdddddss]

”complete website design” lmao nice joke