After months of deliberation and research, the design team at Deliveroo has decided to move away from Sketch and welcome our new friend . As a designer, it’s exciting to start working on a cloud-based platform that will contribute towards an open design ecosystem and empower us to move away from the many types of third-party software we use.

It’s been fun, Sketch

Sketch has been a fantastic tool — it’s intuitive, fast, comfortable and has played a substantial part in the evolution of design. Having said that, Sketch is now bursting at the seams and has been slow to iterate on what they have created. Figma, on the other hand, knows what it wants and has developed a platform with the sole intention of enabling team collaboration. Traditional design applications weren’t built to allow multiple designers to work on one file and have forced teams to use third-party software and plugins as workarounds. Google is an example of a company that quickly realised that team collaboration is crucial to its success; by setting a precedent for real-time document editing, it seems only natural for design platforms to follow.

A few reasons I’m excited about using Figma

Live commenting and editing
Figma enables the sharing of files via a URL, allowing anyone with permissions to add comments in a manner similar to how Wake and Invision work.

Content designer Harry Homan-Green working his magic while I work on UI.

Figma has been built with the ability to create interactive prototypes within the design document — no more updating and syncing various files using Invision or Marvel.

Switching between Design tab and Prototype tab
Linking screens and transitions is now possible without exporting into third-party software.

Developer hand-over
No need to jump into Zeplin — engineers are now able to inspect elements and access code and assets all from a URL at no extra cost!

To bridge the gap between design and development, Figma has created the concept of Frames. Frames are inspired by `div` tags in HTML and enable designers to create efficient layouts that reflect a realistic structure of how the final code may look.

Frames are similar to Artboards in Sketch but allow you to nest frames inside one another. Grouping frames together creates a parent and a child frame, and any elements within the frames are positioned relative to it.

Components are UI elements that can be reused throughout your designs, empowering you to make changes quicker and more easily. Components are similar to Symbols in Sketch, but copying a Component creates an Instance. Instances allow you to override properties without affecting the master file, resulting in fewer duplicated UI elements and a faster workflow.

Use alt-key and drag to create an Instance from your Component.
Changes made to the Component reflect all changes in the Instances.
Editing an Instance only changes the one you are editing. Unlike in Sketch, you don’t have to break the symbol to change its values.

5 quick tips to get you 

1. Create cover backgrounds
With so many projects in your team, finding the one you want can sometimes be confusing. To help us find the right project we organise our projects by adding a cover page that displays the project title and description. To set this page up, we have found using a single frame that is 620x320px is the best fit.

2. Use shortcuts
Shortcuts are a great way to speed up your workflow and save your wrist from unnecessary clicks. A lot of shortcuts work similar to Sketch, so the transition won’t be too uncomfortable. One of my favourite shortcuts is to edit embedded elements by using (⌘) and clicking directly onto the item you wish to select.

View a shortcut guide here
Credit: Chris Michell

3. Layout Grids
Layout Grids are the perfect way to help you align your elements within Frames, especially when building web layouts. Tip: You can copy and paste Layouts onto other Frames, but if you’re unable to view your Layout it may be because you don’t have the Frame selected.

4. Spacing and alignment
Use the alignment tool to create perfect spacing between your elements. Select the objects you wish to align and click the alignment tools to produce a perfect result.

5. Exporting assets
Just like Sketch, you are easily able to export your JPGs, PNGs and SVGs by clicking on the Export tab. Select your size and click Export to output your assets.

Improving our workflow
I recently worked on a project with Harry — a content designer at Deliveroo — and was excited to see how well we worked together using Figma. Instead of repeatedly updating documents that quickly became out of date, Harry and I worked together in sync on the same file, bouncing ideas off each other while in the designs. This momentum speeds up the whole process from ideation to shipping live products and brings us closer to creating the open design ecosystem we are aiming for.

Designers at Deliveroo have a lot of autonomy with their work, but we regularly meet up for Design Critiques to gather feedback from other team members. Some designers may dial in for these meetings so having the ability for all members to view, comment and edit one file will drastically improve our workflow.

Source link—-eb297ea1161a—4


Please enter your comment!
Please enter your name here