Design & UX
Article
By Alex Walker

Finch.io: A Visual Tool for Finding and Fixing Design Bugs

By Alex Walker

Finch.io illustration

When you’re beginning a brand-new design project, you probably start at the same place every time.

  • On blank paper and pencil…
  • Or maybe a wireframing/mock-up tool

Sketches turn into wireframes. Wireframes turn into prototypes. Prototypes turn into fleshed out designs.

But what happens during that final 10% of the project? The site is working but margins, padding, text alignment, fonts and colors all need bug-fixing and adjusting. It raises a good question.

How do you communicate small design changes to an existing design?

  • Do you send screenshots back and forth with arrows?
  • Do you start a new Trello card?
  • Do you stick yellow sticky notes to a developer’s monitor?
  • Do you file a new Github issue?

And let’s be clear: We’re not talking about glamorous, rock-star design changes. These tweaks are the layer of polish that gives a product finished appeal.

  • Increase that title bottom margin.
  • That H2 is the wrong font.
  • Scale up the subheadings to 2em.

They’re all small, but often important bug-fixes and tweaks, and there are often a lot of them. How do they get implemented?

Today we’re going to look at a new tool that takes a very different approach to this challenge.

What is Finch.io?

Finch.io is an app that imports a copy your live page and provides a ‘Sketch-like’ UI for you to make changes to what you see. When you’re done, it then lets you share your changes/edits with your developer/team.

Let’s take it for a quick test-drive.

Getting Started

There isn’t a lot to look at on opening Finch.io. There are no tools and very few UI options to be seen – just a search box and a demo project.

Finch projects

Finch project view

Type a URL into the search bar and you’ll see your website load. So…umm… is this just a web browser?

SitePoint loaded in Finch.io

But start clicking around the page and things get more interesting. All page elements react to your cursor and become clickable. Click on an item and a ‘Sketch-like’ properties editor panel will bounce out of the right of screen.

Making Edits

As you might guess, clicking on a page element makes it editable – either via the properties panel or by directly dragging and resizing the handles. You’re now working with a live visual editor. The UI panel is neatly organized into three main sections: Position, Type, and Box.

Finch.io UI

Finch.io UI

Adding Comments

Clicking the note icon switches you to comments mode. Clicking any page element allows you (or anyone else signed-in) to attach an explanatory note or instructions to your changes.

Comments

Adding comments

Listing your changes

This is the interesting bit. Click on the far-right icon and you’ll see a detailed list of your page edits.

  • Click on a list item to jump-to and highlight that change.
  • Click on the ‘eye’ icon to toggle between the original element and your change.

Itemizing changes

Does it work?

It certainly does for design tweaks. Finch.io is a different kind of application so it took me a little while to get my head around it. It is important to understand Finch is a tool designed to work with your CSS, so I don’t think there’s any way to make design changes that require HTML markup alterations.

Neverthless, I can see it being a very fast, effective way of cataloging and passing on design tweaks in that last stage before a project launch – and even the period just after.

Finch.io is currently in limited beta and is slated for launch in August. It’s a cool concept. Keep an eye out for it.

  • This is really neat.

  • Vimal Raj

    Hi @janisvegis:disqus , can’t we have a offline standalone application which can does the samething. Just curious to know if you have any plans to support.

    • I haven’t tested it, but are you saying Finch.io doesn’t currently work with local:dev set-ups, @disqus_VtaxgAEfrn:disqus

    • Janis Vegis

      Hey @disqus_VtaxgAEfrn:disqus
      Can you please elaborate on this? 🤔

  • Thanks @janisvegis:disqus Finch is a nifty idea but did take me a little while to really understand where it fitted. As far as I tell, it’s in its own category of application.

  • Gotcha. Thanks for the clarification. @rgravis:disqus

Recommended
Sponsors
Get the latest in Design, once a week, for free.