Streaming live at 10am (PST)

Design v Development (webflow both or separate)

Hi all,

I am currently learning WF to setup my freelancing business.

I read a lot of people use software such as Figma, sketch etc to first design the website and then develop it after on WF or wherever.

Now, I can see a point in this if coding from scratch or using another complex development method but WF to me from what I’ve seen seems prettt much like it’s capable of both design and dev? Am I missing something? I just don’t see the point in learning something like Figma when I can do it all in WF.

Thanks for any advice,
Dean

I used to use Webflow as the design tool along with the development tool. It was a great way of learning Webflow however not very practical.

Using Figma or similar application allows you to design at a faster rate allowing for any changes that need to be made a lot quicker too.

Imaging you have a client and you design everything in Webflow, and show them the website.
They want to change about 30% of what you have created.
With those changes there are alot of class that are linked and a lot of repeat designs.
Instead of you having to re class elements just to redesign them in some way. especially if there are animations linked.
In figma, you can just change the layout style or sizing by simply dragging elements around etc.

Once you have got the final design agreed, then you will find that the build in webflow will be very quick anyway.

bit cliche but, time is money. You will want to complete jobs quick so you can get on to the next one.
Or, if you work for a company, boss’ and managers like to see efficiency.

If you are still learning webflow, just like I did maybe continue in the designer to design and produce a whole site. it will get your skills up rather quickly because you will learnt on the way and also knead out bad habits that you notice you pick up. once you are competent, try moving to figma to design.

This took me 2 hours to design and then 1 hour to build in webflow.
where as I think if it were two years ago. then it would have taken me the whole day doing it all in webflow.

webflow read only site

When I started with Webflow I too started designing directly in the designer. But here’s the thing. This is what I was doing:

In Webflow you throw in a section, set it to 100vh. Make it flex, centre it, throw in a div, give it a class, throw in a text block, make it an H2 just in case you forget, change the font, change the colour, add a class (just in case you forget), duplicate it, change it do H3 just in case you forget, add a class, change the font, change the colour, change the size. Duplicate the heading again. Decide to make it white so turn it into a combo class. Decide it looks all wrong, so shift the flex box alignment to the right. Decide to add some padding to make it look better but had forgotten I had used the class for the original div on multiple other pages and now they all look wrong. Add a button: but was the class name for buttons CTA_button_black or CTA_button_blk? Go to another page to check. But find something wrong on that page that needs fixing and you start fixing that. Forget why you came to that page in the first place. Go back to the original page, remember, go back to the other page, apply the class name to the button, thinks it looks wrong so aligns it to the right of the page FORGETTING that I’ve just now realigned all the other buttons on the website. REMEMBERS. Turns it into a combo class. :: sighs ::

OR.

You can use Figma, or Adobe XD (which I use). Throw in a rectangle. Throw in some text. Play with it until you find a design that you are happy with. THEN start building, starting with a style guide and then building from there.

I’ve found the latter process to both be quicker and more efficient, AND much more rewarding. It was just much more satisfying to build and tweak the design on “paper”, get it approved by the client, then go into Webflow and systematically build it to best practice and having the end result look exactly the same as the original design. All done in about a quarter of the time.

In some cases Figma is much better than Webflow, but it seems that developers do not care about feedback with their users. Some software applications have features, that you cannot even find at the first glance. It’s much better when developers care about their users so much, that they explain everything about their products. There are hundreds of software companies out there, but one of the most trustful is Miquido, in my opinion. You can visit here and take a look at their services, and what they offer about software development.

I have used both of them.

They’re quite different.

What do you do – user interface design or web development?

Webflow uses a GUI to build HTML/CSS. So the same limitations that apply to building in the browser apply here. For example, you can’t freely move objects around how you would in say Sketch or Figma (think Dreamweaver).

Figma is a user interface design tool where it’s all about manipulating shapes, dealing with layers etc (think Sketch, or even Photoshop to some extent).

I’ve used both, we use Figma at my work as it allows us more creative freedom and quicker iterations on UI designs in the early stages of projects.