New

One Year With Figma — Smashing Magazine

Practical Suggestions To Improve Usability Of Landing Pages With Animation From Slides — Smashing Magazine

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 the event you’re working in a bigger workforce, and particularly when you’re working in an enterprise or b2b (business-to-business) context, with the ability to make even small enhancements in effectivity can result in big will increase within the effectiveness of your design group.

This text might be about how giant 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, a number of will probably be about Figma and the way we succeeded at adopting this design device in our group.

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

I’ve been utilizing design instruments in knowledgeable 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.

Logos from products like Sketch, Principle, Invision, and more loosely tied togetherThe State of Design Instruments 2015. (Giant preview)

Primary information of design methods and instruments might be useful, however not crucial as I hope to share particular examples and in addition “excessive degree” ideas and strategies you could adapt on your group or context.

Our Design Workflow Circa 2015

Our main software 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 might ship information 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 — with the ability to prototype and add screens from Sketch into InVision, sharing elements and types in nascent libraries throughout information — it was the designer’s dream come true.

A variety of screens in Liferay’s 'My Projects' InVision dashboardA peek into our InVision tasks. (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 complicated permissions construction, InVision remained a closed ecosystem — for those who 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 correct teams.

Manually managing variations and information, storing and organizing them in a shared drive, and coping with sync conflicts have been just some of the issues that prompted us many complications.

A screenshot from Figma’s 'Getting Started' video on YouTubeGetting Began in Figma. (Giant preview)

Might we actually have an all-in-one software 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 decreasing overhead from context switching, we might additionally probably simplify from three device subscriptions (for mockups, prototyping, and developer handoff), to just one.

The Course of

The primary designers from our workforce 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 would have liked. Sketch import was buggy, however we nonetheless discovered immense worth in with the ability to collaborate in real-time and most significantly, we might do 90% of the design work for a undertaking inside a single device. Stakeholder suggestions, revisions, and developer handoff improved exponentially.

By 2017, we had a couple of designers utilizing it for many of their work, and one of many Lexicon designers (Liferay’s design system), Emiliano Cicero, was shortly turning into an evangelist — which turned out to be a key think about convincing the remainder of the group 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 might be a viable device for our international group. However how do you persuade 20+ designers to desert instruments and workflows they love and have used comfortably for years?

I might write a collection on that topic, however I’ll summarize by saying the 2 largest 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 group distributed between america 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 information and elements with out having to fret about continuously syncing a folder or a library.

At our international gathering in January 2018, we formulated a plan to slowly undertake Figma, utilizing this staff’s experiences to assist type 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 decent deadline — it didn’t make any sense for us to transform our evaluation and handoff course of because of the scale of the venture with a number of engineering groups and product managers distributed all over the world. Regardless that the top outcome 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 assessment needed to be carried out in InVision.

A slide with about Liferay’s Digital Asset Management structureA DAM presentation from Design Week 2018. (Giant preview)

Making a strong Figma construction

One of many first steps was formulating tough tips for the undertaking, file, and element group. The inspiration 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 return from designers who reduce their tooth in Photoshop. This technique for group, coupled with a yr spent creating a small library of elements for Liferay.com properties, was essential to setting the remainder of the worldwide workforce 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.

A screenshot showing Liferay’s system for organizing Figma projectsFigma venture covers, by Abel Hancock. (Giant preview)

We’ve made this file out there 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 measurement 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 should you set the web page canvas the identical colour as the cardboard, it is going to scale back the looks of this margin.

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

An animated image a Figma project before and after the cover systemSparking Pleasure with Figma Covers (Giant preview)

Previous to utilizing Figma, along with a ‘Grasp’ design system Sketch file, most designers had base information that they had developed over time with issues like wireframing parts and primary elements. As we coalesced right into a single sample, we began to mix the whole lot and refined them right into a single library. Since we have been doing wireframes, mockups, and prototypes in Figma, we additionally began to desert stream apps like Lucidchart, as an alternative of creating our personal activity 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 movement nodes.

A screenshot showing Liferay’s reusabile utility components for redlining, and creating flows and affinity diagramsLiferay Design’s redline, movement, and affinity elements. (Giant preview)

One of many largest advantages of doing this in Figma, was that enhancements to any of those elements that any designer made might simply be pulled into the library after which pushed out to all situations. Having this in a centralized place additionally makes upkeep lots simpler, as anybody on the workforce 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 the event you’re within the matter, you can too examine Dmitriy Fabrikant’s article about design blueprints.

Some suggestions to remember 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 all the things — particularly layers.

With the superior styling options launched at the start of June 2017, the techniques workforce completed an entire 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 would have liked to help the worldwide workforce. Designers working in Advertising and different departments had already been utilizing Figma for a while, however by final Fall virtually all the different product groups had finalized the transfer over to Figma.

As of at this time, a lot of the product designers are solely utilizing Figma, there are additionally a few designers which might be working in legacy methods with a lot of present, difficult Sketch prototypes that aren’t value importing to Figma. One other exception is a couple of 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 type of knowledge 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 greatest practices for naming pages. At first, we named pages in response to the web page identify, however that proved problematic, plus, as we improved our libraries, the necessity for bigger information with a number of pages was lowered.

At present, we’re utilizing a numbering system inside information, with the top-most web page being what’s delivered to the builders. The subsequent part we’re discussing these days is making the variations extra significant with specific labels (wireframes, mockups, breakpoints, and so forth.) and making higher use of Figma’s built-in versioning, establishing greatest practices for when and find out how to save variations.

Two screenshots showing different ways to name Figma pagesThe 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 best way we organized our information. Beforehand, all of us had alternative ways of saving iterations and variations.

Often we might create new pages inside a single file, typically with giant information we might duplicate them and add a letter on the finish of the filename to sign an iteration. For those who have been going to make drastic modifications, then you definitely may 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 information for all the things.

A screenshot showing what Figma’s version history timeline looks likeModel historical past timeline view (Giant preview)

The power to work, periodically pausing to call and annotate a time limit shall 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’ll be able to 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.

A diagram showing how restoring past versions of a Figma file worksGit it? (Giant preview)

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

In instances the place you’re beginning a brand new venture, or need to make some actually dramatic modifications to the file, it may be essential so that you can ‘fork’ the file. Figma lets you duplicate a file at any given level within the historical past, nevertheless it’s essential to notice that the file historical past won’t 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 option 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 Greatest Practices — this can be a good common philosophy for tips on how to work in a version-controlled ecosystem. Additionally, Chris Beams’s Methods to 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. Maintain titles to 25 characters or much less.
    Longer titles are clipped and you need to double-click on the notice within the model historical past to open up the ‘Edit Model Info’ modal to learn it.
  2. Maintain your description to 140 characters or much less.
    The complete description is all the time proven, so protecting it to the purpose helps maintain the historical past readable.
  3. Use the crucial temper for the title.
    This provides the longer term you a clearer concept of what is going to occur if you click on on that time limit, 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 important a part of any designers job, so this helps you concentrate on what’s essential 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 like every change you make is timestamped. Within the case of another person engaged on the identical file when you have been offline, then the newest change would be the one rendered when you do come again on-line.

A series of screenshots showing how offline editing worksWhen Cat got here again on-line, her button place change was made, and merged with the Nerd’s colour modifications. (Giant preview)

On this easy instance, it doesn’t appear to be too massive of a deal — however in actual life, this will get actually messy, actually quick. Along with the excessive risk of somebody overriding your work, frames and teams might 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 means it is going to be untouched if you come again on-line, and you are able to do any vital merges manually.

“F” Is For Future

Adopting a brand new device isn’t straightforward, however in the long run, the advantages might far outweigh the prices.

The most important areas of enchancment our workforce 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 outdoors of the sector of design.
  • Evolution
    Eradicating the “layers” between designers and engineers, enabling us to take the subsequent step in design maturity.
  • Operations
    Adopting a single software 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 group, however as prices can range from ‘free’ to over $500 per yr this won’t make sense on your particular context and wishes. For a full breakdown, see Figma’s pricing web page.

Develop And Get Higher

In fact, no device 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 an 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 may change sooner or later in case Figma opens the stage for plugin improvement as nicely.)
  2. Importing net, or JSON knowledge in prototypes.
    It will be quite a bit simpler for us to design with actual knowledge. Sketch lately launched a “Knowledge” function in v.52, InVision’s Craft plugin continues to be very a lot the gold commonplace in relation to simply addxing giant quantities of various knowledge — and for now, we’re caught manually populating textual content fields.
  3. Extra movement.
    The Precept integration is good (if in case you have Precept), however having primary animation and superior prototyping options in Figma can be so much 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 wish to shut down your pc each night time, it may be painful once you open it within the morning on a practice or airplane and understand you forgot to go away Figma open.

Open-Supply Design

A number of months in the past, the all the time controversial Dann Petty just lately tweeted about builders having GitHub, photographers having Unsplash — however designers not having a platform for sharing issues without spending a dime. Design Twitter™️ swooped in and he deleted his tweet earlier than I might get a screengrab, however one factor I’d like to say is that what we’re very keen about at Liferay, is open supply. To that finish, we’ve created a Figma undertaking for assets to share with the design group.

A screenshot of Liferay’s open source Figma projectOpen sourced information from Liferay.Design. (Giant preview)

To entry any of those information, take a look at liferay.design/assets/figma, and keep tuned as we develop and share extra!

Additional Studying

Different Assets

Smashing Editorial(mb, yk, il)