25 Oct 2019

Goodbye Sketch...

Hi, I'm Sam Hainsworth, Design Lead at Catch, and I want to tell you about our Creative Team's recent move from Sketch to Figma and the benefits it has brought us in creating a more collaborative and efficient work process.

It wasn’t so long since that if you asked a designer what software they used to create just about anything, the answer would more likely have included the word ‘Adobe’.

Today, there are so many options to bring creativity to life, that a big question more often than not is: what’s the best design software out there right now? And the answer for a while was Sketch, but not anymore. 

Our hearts have been stolen by Figma.

What’s Figma you ask? In many ways, it’s exactly like Sketch…Invision, Principle, Craft, Google Drive, and Dropbox. It may sound like a Frankenstein's mess of a platform, but it’s possibly the greatest design eco-system ever built to date (my own views here...!)

Figma at heart is a web app - yes, no software needed other than a web browser - that allows Designers, Developers, and Clients to collaborate together to make beautiful creations of any kind. It's the first piece of software that has managed to combine a design tool, prototyping, and animation that allows teams to be able to work together with ease.

For the sake of this article, I’ve split it into 2 key areas (designing and prototyping ) on why we think Figma is the king.


Designing with Figma

As a design tool, Figma is A LOT like Sketch. They’ve certainly done a great job at making the transition from Sketch to Figma easy for us: the interface feels the same, we still have symbols, artboards, etc. But there are some pretty important differences.

Real-time collaboration 

Remember the first time you opened Google Docs and saw someone else typing in real-time, deep down thinking “wow, we really are in the future”, well Figma has taken the idea of real-time collaboration and applied it within their software, allowing multiple people to work on one project at once.

It might sound like you could have the classic hovering Creative Director watching your every movement from the comfort of their own seat, but it becomes such a useful tool. No more do you have 2 Designers working on multiple files and then merging their creative 2 hours later to find they’ve used different fonts weights or having to export assets for each other. This real-time collaboration lets designers have a single source of truth for each project and collaborate in tandem, rather than in silos.

Connected design systems

With many concurrent projects in an agency, one thing that can be a real struggle to keep is consistency. Over the years, projects grow and with that so do the components and styles that build these websites, apps, platforms, etc. Design systems within Sketch (or any other design tool for that matter) are static files that can often get forgotten about or duplicated along the way, creating chaos.

These systems, within Figma, act as your hymn sheet for each client; letting you store reusable assets that can be shared across the design team and projects. Figma transforms these static design systems into live breathing sources of truth (sounds a big deal, well it really is!) that can be worked on together and pulled across many different projects.

 

File management 

Now, this may sound boring, but this truly is such a game-changer: How many times have you been looking for the final creative you worked on 3 months ago, only to find 4 files all with the word ‘FINAL’ at the end of it. Or to not even be able to find where it was saved in the first place?

With Figma, all files are saved within their own cloud eco-system; allowing you to access all your files anywhere, at any time; and with their neat interface, ways of organising and sorting, it's so much easier to access the whole teams’ files.

 

Version history

Last, but by no means least, we have version history: which is again a real lifesaver and means you don’t need to create hundreds of duplicate files anymore. Figma allows you to go back in time and see how your designs have progressed, giving you the option to create key milestones in the project. 

 

Prototyping with Figma

This is where Figma gets really interesting. In the past, prototyping meant uploading your designs to Invision, Marvel, etc. and then adding interactions and repeating every time you got feedback. Figma takes that pain away and lets you prototype and present directly. Essentially, letting you create a clickable prototype and show off fully animated interactions.

Inline commenting

This feature allows anyone to comment inline with the designs you're working on, which sounds like both a blessing and a curse, but it takes the pain out of amends. Now being able to read a comment directly in your design means no more missing feedback and once the amend is done, that’s it: no need to re-upload your prototype, it’s all right there.

Animation

If prototyping wasn’t enough, Figma has recently added ‘Smart Animation’ to the mix, allowing you to quickly create smooth animations and transitions giving your prototypes that extra layer of finish and finesse.

Goodbye Sketch, it’s been emotional

Ok, we still like Sketch and it does still do a few things better than Figma, but right now Figma is in its early days and rolling out features like no tomorrow and we couldn’t be happier with where they’re taking this amazing tool.

So, for now, goodbye Sketch, it’s been emotional.

30 Oct 2015

Tweet our pumpkin #CatchHalloween

It’s Halloween [*insert all manner of ghoulish GIFs and eerie sound effects*]. And, courtesy of Founding Partner/MD Jonathan, we’ve been challenged to a classic pumpkin carving competition! But as is the nature of a digital agency, some spectacular creations have materialised… (some a little less so). But one pumpkin in particular, by UX Designer Euan Mackie, has been stealing a significant proportion of the limelight...

We’ll let Euan give you the gory details:

Intro

After receiving our to-be-carved pumpkins, I had a little google for inspiration. While browsing lots of artistic designs, I knew I wanted to do something slightly different, so I challenged myself to see how I could add some tech.

Background

A few weeks ago I brought a Photon - a development board from a company called Particle. It’s a little computer designed for making and creating objects connected to the internet.

The term Internet of Things (IoT) represents a world of interconnected devices and smarter living, where, for example, light bulbs can react to you putting your key in the door. The IoT movement has been growing in popularity, with products such as Amazon dash, Google’s Nest thermostat and Philips hue light bulbs entering the mainstream.

The usual approach for prototyping these projects involves a product called Arduino. We love it because of its open source background and the variety of components you can plug into it (more about that here). But I wanted to use the Photon as it simplifies this whole process. It’s just one match box sized board and that is all you need to get started.

The Challenge

I wanted this to be a rapid project, I knew the pumpkin carving would take time and I only had a few spare hours. So, I set myself a time limit: A working IoT pumpkin within 2 hours - something fun AND worthwhile. Because why do a prototype if it doesn't bring delight to those using it!

Getting Started

The photon board comes in a nicely designed little box with enough extra components to make your first project. The board came into it’s own with the setup. Usually with Arduino there’s a lot to set up and learn, It can be a tough onboarding experience for those brand new to hobby electronics. (There are lots of helpful tutorials, though!)

The Photon board is totally different; just power it up though USB, open the app on your phone and you’re already away. A quick entry of your WiFi settings and it’s set up ready for your first project. Using the supplied LED, you can use your phone to make the circuit and light up the LED. I had success within 5mins of opening the packaging. The App shows how and why this happens, really great for those starting to learn the fundamentals behind development.

Ideas

After few more tutorials under my belt, I started thinking about using twitter and Instagram hashtags to turn the pumpkin lights on. A fairly simple approach, however, I knew it would easily showcase the power of IoT without being over complicated.

The Plan

I’m a big fan of If this then that ( IFTTT ). It’s an online service using logic if THIS happens then make THAT happen. I knew IFTTT would be a simple and quick way of searching Twitter and Instagram for a particular hashtag, the ‘THIS’. I started looking into what ‘THAT’ I could use for my Photon board. I saw some options, however, they were mostly slightly more technical than I had the time and skills for. I’d have loved to use a node.js app or MQTT, however that was a little out of my reach. So I just used the pre built ‘THAT’.

Getting IFTTT to talk to the Photon this way is very simple, it’s mostly handled by magic*. All I needed to do was make sure everything was named correctly and I’d copied and pasted the correct bits of code. I told the Photon to power up a chosen section of the board when a tweet arrives.

The photon comes with a breadboard, this is basically a quick and easy way to connect electronics together without the need to solder anything together. I added few LED’s to the selected section with resistors, taken from their tutorial, and I was ready to test it all out.

*Yes I know it’s not actual magic.. It’s a mix of hosted code repo’s and online developer environments…

How it all turned out

After a bit of trial and error, I managed to get it working. Result! Every tweet or Instagram with #CatchHalloween made the LED’s light up. In less than two hours, I’d gone from a novice with the board, to a real working prototype. Not too bad.

One of the downsides to IFTTT is how long it takes to search and return tweets. Sometimes up to every 15mins. This isn’t ideal when people are sending tweets and expecting an instant light up. From my earlier discovery, I know it’s possible in few different ways, the most logical being node.js. The light strength isn’t ideal in a very bright studio, but It’s noticeable (we know if you’ve tweeted!).

If you’ve got any questions, thoughts or advice on a project like this then get in touch!

Start a conversation

0207 494 3554
or
newbiz@catchdigital.com