About The Writer

Paul Hanaoka is a Design Supervisor at Liferay, based mostly within the suburbs of Los Angeles, and serving the North American groups. His ardour is on the intersection of …
Extra about Paul

Whether or not you’re a designer or developer, it may be difficult to remain present on this fast-paced world the place it looks like new instruments are Product Hunted on a weekly foundation. In case you’re working in a bigger staff, and particularly in case you’re working in an enterprise or b2b (business-to-business) context, having the ability to make even small enhancements in effectivity can result in large will increase within the effectiveness of your design group.

This text might be about how massive groups can profit from utilizing extra open, collaborative tooling and learn how to make adoption and migration possible and nice. Additionally, in case you didn’t guess from the title of the article simply but, lots of will probably be about Figma and the way we succeeded at adopting this design instrument in our staff.

The meant viewers is skilled designers working in bigger groups with design methods, builders or product managers trying to enhance the way in which cross-functional groups work of their group.

I’ve been utilizing design instruments in an expert setting for over ten years and am all the time making an attempt to make groups I’m serving work extra effectively and extra successfully. From scripting and actions in Photoshop, to widget libraries in Axure, to Sketch plugins, and now with Figma — I’ve helped design groups keep on the leading edge with out leaving builders or product managers behind.

The State of Design Instruments 2015. (Giant preview)

Fundamental information of design methods and instruments might be useful, however not obligatory as I hope to share particular examples and likewise “excessive degree” ideas and strategies that you could adapt to your staff or context.

Our Design Workflow Circa 2015

Our main instrument in 2015 was Sketch, and that’s just about the place the commonalities stopped. All of us had totally different strategies of prototyping, exporting, and sharing designs with stakeholders (InVision, Axure, Marvel, Google Slides, and even the antiquated Adobe PDF) and builders (Avocode, Zeplin, plugins with out standalone apps like Measure). On uncommon events, we may ship recordsdata on to the engineers who have been fortunate sufficient to have the uncommon mixture of a MacBook and a Sketch license.

When InVision launched the Craft plugin, we have been overjoyed — having the ability to prototype and add screens from Sketch into InVision, sharing elements and kinds in nascent libraries throughout recordsdata — it was the designer’s dream come true.

A peek into our InVision initiatives. (Giant preview)

Ultimately, all of us converged on the InVision platform. We created and documented the processes that helped scale back a lot of the friction in stakeholder collaboration and developer handoff. But, because of the advanced permissions construction, InVision remained a closed ecosystem — in case you weren’t a designer, there was an approval chain that made it troublesome to get an InVision account, and as soon as you bought an account, you needed to be added to the precise teams.

Manually managing variations and recordsdata, storing and organizing them in a shared drive, and coping with sync conflicts have been only a few of the issues that brought on us many complications.

Getting Began in Figma. (Giant preview)

May we actually have an all-in-one instrument that had all one of the best options of Sketch and InVision, with the real-time collaboration and communication options present in Google Docs? Along with lowering overhead from context switching, we may additionally doubtlessly simplify from three instrument subscriptions (for mockups, prototyping, and developer handoff), to just one.

The Course of

The primary designers from our staff to undertake Figma began experimenting with it when the primary Figma beta was launched in 2016. The options have been restricted however coated 80% of what we wanted. Sketch import was buggy, however we nonetheless discovered immense worth in having the ability to collaborate in real-time and most significantly, we may do 90% of the design work for a challenge inside a single instrument. Stakeholder suggestions, revisions, and developer handoff improved exponentially.

By 2017, we had just a few designers utilizing it for many of their work, and one of many Lexicon designers (Liferay’s design system), Emiliano Cicero, was rapidly changing into an evangelist — which turned out to be a key think about convincing the remainder of the staff to make the change.

When Figma 2.zero debuted in the summertime of 2017 with prototyping options added and large enhancements to the developer handoff capabilities, we knew this may very well be a viable instrument for our world staff. However how do you persuade 20+ designers to desert instruments and workflows they love and have used comfortably for years?

I may write a sequence on that topic, however I’ll summarize by saying the 2 greatest issues have been: beginning small, and making a strong infrastructure.

Beginning Small

Within the fall of 2017, we began our first trial of Figma with a product staff distributed between the US and Brazil. We have been lucky to have a week-long kickoff collectively in our Los Angeles workplace. Designing flows and wireframes collectively in Figma was a lot quicker and extra environment friendly. We have been capable of divide up duties and share recordsdata and elements with out having to fret about continuously syncing a folder or a library.

At our world gathering in January 2018, we formulated a plan to slowly undertake Figma, utilizing this staff’s experiences to assist kind the infrastructure we’d want for the remainder of the group in order that migration can be as seamless as attainable.

The most important problem we confronted was a good deadline — it didn’t make any sense for us to remodel our evaluation and handoff course of because of the scale of the challenge with a number of engineering groups and product managers distributed around the globe. Regardless that the tip end result would have been higher, the timing wasn’t proper. One other issue was Figma’s lack of a dependable offline design expertise (extra on that later), and for these causes, the staff determined to make use of Sketch and Figma for wireframes and mockups, however any prototyping or evaluation needed to be carried out in InVision.

A DAM presentation from Design Week 2018. (Giant preview)

Making a strong Figma construction

One of many first steps was formulating tough pointers for the challenge, file, and element group. The muse for this stuff was began by two junior (on the time) designers, Abel Hancock and Naoki Hisamoto, who by no means developed the dangerous layer-naming habits that appear to come back from designers who lower their enamel in Photoshop. This technique for group, coupled with a yr spent growing a small library of elements for Liferay.com properties, was vital to setting the remainder of the worldwide staff up for fulfillment.

An early organizational enchancment created by one in every of our Liferay.com designers, impressed by Ben’s tweet, was our system of covers.

Figma challenge covers, by Abel Hancock. (Giant preview)

We’ve made this file accessible in case you’d like to repeat it, in any other case it’s a reasonably simple hack:

  1. Create a single body within the first web page of your file that’s 620×320.
  2. Add your design. If in case you have textual content, we discovered that the minimal dimension is ~24, the titles in our examples are set at 48.
  3. Take pleasure in!

Observe: There’ll all the time be a slight margin round your cowl, however in case you set the web page canvas the identical colour as the cardboard, it’s going to scale back the looks of this margin.

This helped rework our library, not only for designers, however for challenge and product managers and engineers who’re looking for issues rapidly. The search performance was already actually good, however the covers helped individuals slim issues down even quicker, plus it allowed us to immediately talk the standing of any given file.

Sparking Pleasure with Figma Covers (Giant preview)

Previous to utilizing Figma, along with a ‘Grasp’ design system Sketch file, most designers had base recordsdata they’d developed over time with issues like wireframing parts and fundamental elements. As we coalesced right into a single sample, we began to mix every thing and refined them right into a single library. Since we have been doing wireframes, mockups, and prototypes in Figma, we additionally began to desert move apps like Lucidchart, as a substitute of constructing our personal job move elements in Figma.

Different utilities that we developed over time have been redline elements for making exact handoff specs, sticky notes for affinity diagrams (and absolutely anything), and move nodes.

Liferay Design’s redline, move, and affinity elements. (Giant preview)

One of many greatest advantages of doing this in Figma, was that enhancements to any of those elements that any designer made may simply be pulled into the library after which pushed out to all cases. Having this in a centralized place additionally makes upkeep rather a lot simpler, as anybody on the staff can contribute to enhancements with a comparatively easy course of.

A redline doc is for making it simpler for the developer to know the size, visible specs, and different properties of a UI element or a set of elements. In case you’re within the matter, you can too verify Dmitriy Fabrikant’s article about design blueprints.

Some suggestions to bear in mind when creating elements:

  1. Use of overrides and masters for highly effective base elements (extra on that right here);
  2. Set up a constant sample for naming (we use the atomic mannequin);
  3. Doc and label every thing — particularly layers.

With the superior styling options launched firstly of June 2017, the methods staff completed a whole model of our Lexicon library in between our massive product releases in July and the ramp-up in August. This was the ultimate piece we wanted to help the worldwide staff. Designers working in Advertising and marketing and different departments had already been utilizing Figma for a while, however by final Fall nearly all the different product groups had finalized the transfer over to Figma.

As of immediately, a lot of the product designers are solely utilizing Figma, there are additionally a few designers which are working in legacy methods with a number of present, sophisticated Sketch prototypes that aren’t price importing to Figma. One other exception is just a few designers that sometimes use apps like Precept or Adobe After Results for extra superior animation that wouldn’t make sense to do in Figma. We also have a few designers exploring Framer X for much more strong prototypes, particularly with work that requires leveraging any sort of information at scale. Whereas there are some designers utilizing a number of instruments on a semi-regular foundation, 80% of our product designers are utilizing Figma for all of their design and prototyping work.

Steady Enhancements

We’re all the time engaged on methods to work extra successfully, and one of many present issues we’re iterating is finest practices for naming pages. At first, we named pages based on the web page identify, however that proved problematic, plus, as we improved our libraries, the necessity for bigger recordsdata with a number of pages was diminished.

Presently, we’re utilizing a numbering system inside recordsdata, with the top-most web page being what’s delivered to the builders. The following part we’re discussing these days is making the variations extra significant with specific labels (wireframes, mockups, breakpoints, and so on.) and making higher use of Figma’s built-in versioning, establishing finest practices for when and learn how to save variations.

The evolution of web page group inside a Figma file. (Giant preview)

Final_Final_Last_2 — No Extra!

I usually hate to make use of the time period ‘game-changer’, however when Figma launched naming/annotating to the model historical past final March, it dramatically modified the way in which we organized our recordsdata. Beforehand, all of us had other ways of saving iterations and variations.

Often we’d create new pages inside a single file, typically with massive recordsdata we’d duplicate them and add a letter on the finish of the filename to sign an iteration. In case you have been going to make drastic adjustments, then you definately would possibly create a brand new file and append a model quantity. This was very pure, coming from the Photoshop/Sketch paradigm of managing a number of recordsdata for every thing.

Model historical past timeline view (Giant preview)

The power to work, periodically pausing to call and annotate a cut-off date might be very acquainted for anybody who has used a model management like Git earlier than. You possibly can even take a look at the entire file historical past, and go into previous snapshots, decide one out and identify and annotate it.

If you wish to return and revert to a previous model, you possibly can restore it and work on that file from that time within the historical past. The most effective half is that you simply didn’t lose any of the work as a result of the model you ‘restored’ wasn’t deleting something; it was merely copying that state and pasting it on the prime.

Git it? (Giant preview)

On this illustration, the designer arrives at ultimate three.zero after restoring ultimate 1.1, however the file model historical past continues to be fully seen and accessible.

In instances the place you’re beginning a brand new challenge, or need to make some actually dramatic adjustments to the file, it may be obligatory so that you can ‘fork’ the file. Figma permits you to duplicate a file at any given level within the historical past, however it’s vital to notice that the file historical past will not be copied.

We’ve discovered that a great way to work on this versioned system is to make use of your file historical past in an analogous solution to how a developer makes use of git — consider a Figma model as a commit or pull-request, and identify and annotate them as such. For extra, smarter ideas on this, I like to recommend Seth Robertson’s Commit Typically, Good Later, Publish As soon as: Git Finest Practices — it is a good common philosophy for learn how to work in a version-controlled ecosystem. Additionally, Chris Beams’s Write a Git Commit Message is a superb information to writing significant and helpful notes as you’re employed.

Some sensible ideas we’ve found:

  1. Preserve titles to 25 characters or much less.

    Longer titles are clipped and you must double-click on the observe within the model historical past to open up the ‘Edit Model Data’ modal to learn it.
  2. Preserve your description to 140 characters or much less.

    The complete description is all the time proven, so holding it to the purpose helps preserve the historical past readable.
  3. Use the crucial temper for the title.

    This offers the long run you a clearer thought of what’s going to occur while you click on on that cut-off date, e.g. “altering button colours to blue” vs. “change buttons to blue.”
  4. Use the outline to elucidate ‘what’ and ‘why’ versus ‘how’.

    Answering the ‘why’ is a vital a part of any designers job, so this helps you give attention to what’s vital as you’re working in addition to present higher info for you sooner or later.

Working Offline

Disclaimer: That is based mostly on our personal expertise, and lots of it’s our greatest guess as to the way it works.

As I discussed earlier than, offline help in Figma is tenuous. If you have already got a file open earlier than going offline, you possibly can proceed engaged on the file. It looks as if every change you make is timestamped. Within the case of another person engaged on the similar file whilst you have been offline, then the most recent change would be the one rendered when you do come again on-line.

When Cat got here again on-line, her button place change was made, and merged with the Nerd’s colour adjustments. (Giant preview)

On this easy instance, it doesn’t look like too massive of a deal — however in actual life, this could get actually messy, actually quick. Along with the excessive chance of somebody overriding your work, frames and teams may get stacked on prime of each other.

Our workflow is to duplicate the web page earlier than (or after) going offline, after which do your work in that replicate. That manner will probably be untouched while you come again on-line, and you are able to do any obligatory merges manually.

“F” Is For Future

Adopting a brand new instrument is rarely simple, however ultimately, the advantages might far outweigh the prices.

The most important areas of enchancment our staff has skilled are:

  • Collaboration

    It’s a lot simpler to share our work and enhancements with the staff and group.
  • Transparency

    A system that’s open by default is of course extra inclusive to individuals exterior of the sector of design.
  • Evolution

    Eradicating the “layers” between designers and engineers, enabling us to take the following step in design maturity.
  • Operations

    Adopting a single instrument for wireframes, mockups, prototypes, and developer handoffs makes life simpler for accounting, IT, and administration.

Decreasing the general variety of subscriptions was actually useful for our staff, however as prices can range from ‘free’ to over $500 per yr this may not make sense to your particular context and desires. For a full breakdown, see Figma’s pricing web page.

Develop And Get Higher

In fact, no instrument is ideal, and there’s all the time room for enhancements. Some issues that have been lacking from earlier instruments we used are:

  1. No plugin ecosystem.

    Sketch’s extensibility was an enormous think about making the change from Photoshop a no brainer. Figma does have a internet API, however at present, there isn’t any ‘write’ performance. For now, Sketch stays the market chief with its vibrant group of extensions and plugins. (In fact, issues would possibly change sooner or later in case Figma opens the stage for plugin growth as properly.)
  2. Importing internet, or JSON information in prototypes.

    It could be rather a lot simpler for us to design with actual information. Sketch not too long ago launched a “Information” characteristic in v.52, InVision’s Craft plugin continues to be very a lot the gold normal in terms of simply addxing massive quantities of various information — and for now, we’re caught manually populating textual content fields.
  3. Extra movement.

    The Precept integration is good (when you’ve got Precept), however having fundamental animation and superior prototyping options in Figma can be rather a lot higher.
  4. A smoother offline expertise

    As talked about beforehand, so long as you have got the Figma file open earlier than going offline, you’re nice. That is in all probability OK for most individuals — however in case you prefer to shut down your pc each night time, it may be painful while you open it within the morning on a practice or airplane and understand you forgot to depart Figma open.

Open-Supply Design

A couple of months in the past, the all the time controversial Dann Petty not too long ago tweeted about builders having GitHub, photographers having Unsplash — however designers not having a platform for sharing issues without cost. Design Twitter™️ swooped in and he deleted his tweet earlier than I may get a screengrab, however one factor I’d like to say is that what we’re very obsessed with at Liferay, is open supply. To that finish, we’ve created a Figma challenge for sources to share with the design group.

Open sourced recordsdata from Liferay.Design. (Giant preview)

To entry any of those recordsdata, try liferay.design/sources/figma, and keep tuned as we develop and share extra!

Additional Studying

Different Sources

(mb, yk, il)