Arrow Down Arrow Right Arrow Down Arrow Right Arrow Arrow Down Arrow Left Arrow Right Articles Case Study Close Facebook GitHub Google+ Menu Information Link LinkedIn x five Interview Location Code Snippet Twitter Tick Timer Users Card Discount Magnifier Time Quote

How we used Figma to reconstruct our website

by Lubos Kmetko on December 14, 2017
Published in Design, UI, UX Add Comment

Figma can streamline various types of design projects. In this case study I’ll show you how Figma helped us with a partial reconstruction of our website.

It’s been two years since we have rebranded our company to Xfive and launched this website. During that time our business has evolved and some parts of our website didn’t represent what we do and how we do it anymore.

Defining problems

We wanted to solve the website’s issues but we didn’t want to do a complete redesign at this point, since that would take us a lot more time. We also wanted to test some ideas for the future redesign first, so we decided to do a partial reconstruction of the website and keep some parts as they are.

The Home page reflected most of the issues. Check out the image below or the previous version in the web archive.

The main home page issues from a perspective of potential client

  • the main navigation contained a prominent Submit a project button; however, our offer already consisted of two main types of cooperation – a project based and renting a team.
  • the two main CTAs under the hero section didn’t reflect our offer; one of them led to the About us page.
  • What we can do for you section was a services list with links to various landing pages. This could be quite confusing because we also had this prominent Submit a project landing page. It’s easy to get lost in the land of landing pages!
  • Clients we have worked for didn’t represent our current client base. Sure, having big names in a portfolio is great and we are proud we worked for them at some point, but our potential clients could hardly relate to these, especially if we couldn’t disclose details of such cooperation.

Another problem was our Work page. It was an interesting concept with some neat animations but it didn’t provide us with enough flexibility to add and describe the work we did.

The old Work page – when form wins over the function

Finding solutions

Once we outlined the problems, we set up a simple Google Document to discuss potential solutions, which were:

  • replace Submit a project page with a new page Work with us which will serve as a crossroad to our two main landing pages – Start a project and Rent a Team
  • don’t link to other landing pages like Figma to HTML from the regular website navigation. We will only use these landing pages in campaigns or to naturally position them in search engine result pages
  • replace the services list with smaller and more versatile Our Skills component which could be used on the landing pages too. The skills will match technologies we list on the work examples.
  • replace the layout on the Work page with an existing zig-zag pattern which would allow us to add more works and display websites’ screenshots
  • replace Clients we have work with us with a featured client or a featured project which we could use on various places across the site
  • update Testimonials layout and reuse new layout in the featured client or project component
  • update About us page layout and add a video overlay

This phase helped us to get on one page regarding planned features. Next we proceeded to the design phase.

Designing in Figma

We did design of our website using a Photoshop / InVision combination over two years ago. We did a lot of small updates to the website in the meantime so the original design files didn’t match the website anymore.

Because of my positive experience with Figma, I wanted to try it for this project.

Since we would be designing new parts of the website in the context of the existing ones, the  question was how we can handle this in Figma. Turned out it was without a problem – I made a screenshot of a certain part of our website which remained unchanged, eg. footer, and copy & paste it to Figma. Then I converted each such part to a component so we can reuse them later.

Screenshot of footer from the existing website, copied & pasted, and converted to a component

The rest of the design process was pretty straightforward and in the line with Figma’s capabilities.

There is one small detail I like about Figma –  before, I used to export designs as JPGs and display them in a browser when I wanted to get a more realistic view of the design. In Figma you can easily switch between the tabs similarly as in a browser (⌘ / CTRL + 1, ⌘ / CTRL + 2, etc.). I open a prototype next to the design and switch between them to get a feel of real website.

Minor obstacles

One of the hurdles I come across in Figma quite often is that you cannot override the size and position of the objects inside instances of components. I’m not sure why it isn’t possible because you can change other object’s properties, like fill or color. I’ve heard that this behavior may change in the future.

For now, this limitation makes working with components counterintuitive sometimes. Take a look at the following example: to achieve such zig-zag pattern, you cannot simple position image to left or right in the instances, you have to duplicate objects inside component and switch then on / off in the instances.

You cannot change position or size of object inside the instance (notice inactive align buttons on the top right)

It’s useful to learn this “state” technique anyway – design all states in your component and then show / hide states in the instances – because you’ll end up using it a lot in Figma. Suppose you have a component with a changing icons  – if the icons are PNGs, you could swap images easily in the instances. However, this is not possible if your icons are stored as SVGs – you have to place all icons in the master component and show / hide them in the instances.

“State” technique – display and hide icons in instances

Prototyping & Collaboration

After I designed a concept of the first page, I could invite the team to review it and comment on it. It was as simple as adding their emails to the file. Reviewers don’t need a paid account, so the entry barrier for collaboration is very low.

If someone just would like to see the design, they can do it even without creating an account, by opening a preview link. Later when we had more pages connected via prototyping, I usually just sent out a preview link to the new page in the prototype.

At the time, there weren’t pages in Figma yet, so to avoid confusing the team with the work in progress, I created a different file for new pages. Of course, this isn’t ideal because, unless you have a team account (if you do any serious design work, you should), you cannot share your components across the files. Now with pages, I could create new pages for the work in progress and move completed designs to the main page later.

Development

Figma is best for designer-developer cooperation and during this project it has proved again. Instead of sending files to developers, I can just share design with them and be sure they always have up-to-date version.

I wrote about how our website is built in detail here. Interestingly enough even after two years, the development workflow still works and redoing the website parts and adding new features was quite easy. It confirms that our bet on, for us then new, approaches like Timber and ITCSS was correct. After all, they are now an integral part of Chisel, which is our custom development tool for creating easy to maintain and fast websites.

Conclusion

Creating UX / UI works best when it’s a collaborative effort. Figma makes cooperation with other people easier and it allows you to focus on solving design problems instead of workflow incompatibilities.

Figma allows you to focus on solving design problems rather than workflow incompatibilities.

It’s not only about designers or design reviewers – stakeholders, copywriters, proofreaders, developers or even potential users – they all can get an easier access to your design and can contribute to them.

In the same way Google Docs changed the way we collaborate on documents and spreadsheet a few years ago, Figma now changes the way we collaborate on design. There is no way back – as Microsoft had to adapt with Office 365, other designs tools will eventually have to adapt too.

About the author

Lubos Kmetko

Lubos Kmetko started to work for Xfive (formerly XHTMLized) as a front-end developer in 2006. He currently helps with business operations and writes for the Xfive blog.

More articles from Lubos

Comments

Would you like to add something?

All fields are required. Your email address will not be published.

More from the blog

Work with us