Using Figma As A Design Tool

I have been experimenting with this over a couple of days… to build my own developer portfolio. Although, some tools either I don’t know how to use, or aren’t implemented… I find designing efficient and organized.

I would like to hear some feedback on this. And how important is designing a website before coding? Is it worth it spending 4-5 hrs to design a webpage and then beginning coding? :sweat_smile: :grin:

2 Likes

Figma is pretty good. Planning a page before you build it is a good idea, but you often may not need anything that fancy. My design models vary anywhere from quick Sharpie sketches to interactive models like Figma can create.

3 Likes

I have been learning to use Figma in the last two days and it has been a fantastic tool to use. My advice is to find a good video tutorials on youtube, especially tutorials where you can get to design a web design layout, but make sure you find one where they teach you how to the user interface tools first.

Also, another advice is while I understand everyone is different, I have the desktop app and I prefer it so much more than the browser app, so give that a go and see how it is. :slight_smile:

I wish you all the best and hope you enjoy it :slight_smile:

1 Like

Do you have experience with animation for websites / apps? Do you have a favorite software for (or mutliple) for that?

I would say that depends on the scope of the project and your preference. For example some people like to go straight to designing in the browser, others prefer to start with mood boards or follow an approach called content first. Some emphasize the benefits of considering animation from the start and big projects might require considerable thought regarding information architecture.

1 Like

Hello @michaelsndr,

The only experience I would say I have for websites is doing animation with CSS (which is becoming more easier).

I wouldn’t exactly say I have experience doing animation with software. But, I was having a conversation with my relative about animation in web design and he said he really likes Adobe Animate and used it to create elements like banners and modals. He even showed me a video of his project where he created an animated form for a web application. It was definitely impressive and I could safely recommend it. Even I will give it a try in my free time. :slight_smile:

1 Like

Hello @shaux

I somehow misread your thread (sorry about that), so I hope this will answer your question.

So, how important is designing a website before coding? Well, that depends on who is creating the website and what is the situation. This is a question where the answer isn’t really straightforward.

It is not important(ish) if you only code and that’s it (whether this is in a professional environment or not). It is very unlikely that you will use a design software as well. But, it is beneficial to know the very basic of some design such as layout since you will need to work with it in coding

However, to answer how important it is to design before coding if you are in a situation where the design aspect will be involved actually lead to more questions.

Are you the person who can visually see how the website should look and able to deliver that vision without using the design software.

Even if you answer the above question yes. Maybe that is the case when it comes to creating a simple design layout. Like myself with my tribute page project, I only needed a paper and pen and draw it all out roughly because that was a simple design layout.

But, are you able to do this on a higher level of artistic designs such as where it will involve illustrations and customisable button designs?

In conclusion, it is up to the individual to design before coding as long they are aware of if they have that ability to create a successful web layout.

I hope this will answer your question? :slight_smile:

1 Like

Yep! Thanks for all the advice! :sweat_smile:

1 Like

I think that using a design software to create a mockup is important if you are building a website/software for someone else.
It will allow you to identify what the customer wants in the very early phases of the process, where it won’t cost you much to correct the design.
Also, some of those tools allow you to share the mock-up with your team/customer so that it’s easier to receive feedbacks.

2 Likes

Figma also shares live embed code snippets to paste an iFrame in third-party tools. For example, if Confluence is used to display embedded mockup files, those files are not “updated” by saving a Figma file—those embedded files ARE the Figma file.
The effect of this feature on the UX process is illustrated in the following diagram:

Before Figma, several other tools were used to facilitate the exchange of design mockups and updates. The iteration cycle was a series of back and forth file updates, so teams could review and implement the current design.

After Figma, third-party tools are no longer necessary (but could be used if desired). Since Figma handles the functionality of the third-party tools described previously, there is only one step in the process—move from sketches to Figma and all groups have the latest mockups. There is no “handoff” in the strictest sense of the word.