A Designer’s Balancing Act: Staying Inventive and Organized in Figma

The important thing to attaining each the experimentation and collaboration objectives is to stability the exploratory nature of design with logical group in your shared work. A chaotic mess of good designs is meaningless and not using a useful file construction however an excessive amount of construction early on would possibly stifle your crew’s inspiration.

Sho Kuwamoto, Director of Product at Figma, not too long ago shared his ideas on freeform vs. structured design (try his Schema 2021 speak right here). The premise is that designers want the precise instruments to maneuver fluidly between exploring ideas freely with out getting slowed down by the small print and including construction when needed. He shared an instance of utilizing the eyedropper device: you rapidly choose a coloration from elsewhere within the file utilizing the device as an alternative of making use of an outlined coloration model. Since you’re simply exploring, proper?

What about when your teammates want to leap into your file? With the correct quantity of construction, as counterproductive as it could really feel to early freeform explorations, you may construct belief together with your crew and allow them to do their finest work. Constructing on Sho’s insights, this idea additionally simply extends to the way in which designers can arrange their information as nicely. Including a little bit of construction to your design file can enhance collaboration as a result of it’s going to give your friends sufficient context to ask questions, focus on, and supply their factors of view confidently. They don’t must marvel which display screen is which or what concepts have already been explored.

Construction helps folks digest and soak up concepts extra richly. Have you ever ever had somebody anticipate you to know precisely what they’re considering or feeling with out having an actual speak about it? That’s the way it can really feel while you’re attempting to type by another person’s mess of screens and shorthand notes. Being human-centric, which is who we’re as designers, additionally means contemplating the opposite stakeholders within the design course of. 

Ask your self: 

• Have you ever created an open and alluring area that permits collaborators to make their very own explorations and discoveries?

• Does your UX author must replace the identical piece of copy on each single display screen or is there a part that they’ll replace simply as soon as? 

• Do your engineering counterparts must continuously ask you which ones designs are the newest or is there a method for them to see that are probably the most up-to-date?

You needn’t redline your designs each time you share work with teammates. That may very well be an excessive amount of construction while you’re nonetheless exploring. As an alternative, use just a few techniques to verify everybody understands what is going on on throughout the design course of. Perhaps early on you simply rearrange your screens to get your crew speaking. Later, you would possibly spend time annotating flows or constructing out a selected web page for parts. Relying on the place you and your crew are within the design course of, completely different strategies will assist save time and facilitate a easy workflow. 

Listed below are just a few techniques which may spark some inspiration: 

Create a sandbox

Exploratory concepts will be messy, so create a selected part or web page inside your file to deal with all of your diverging concepts and inspiration. When sharing with the broader crew, think about pulling out just a few key screens or iterations into a brand new web page to get rid of distractions and spotlight the precise areas the place you’d like suggestions. The sandbox acts as your playground to leap out and in of whereas additionally retaining an archive of the concepts you’ve tried earlier than. Give it a reputation, like “Design playground” or “Carly’s sandbox”. 

Inform a narrative 

I work from Connecticut however I’ve teammates across the globe, so async communication is vital. Ask your self, might somebody taking a look at this file perceive it with out me speaking them by it? If not, add headers to create digestible sections. Add statuses or a changelog to indicate progress from the final assembly or dialogue. I examine the present and future states aspect by aspect to present folks leaping into the file sufficient context of the place we have been and the place we’re going. When a design has plenty of info, annotate key options or make call-outs for particular questions or suggestions. This manner, you may rapidly get the enter you want from the precise folks with out overwhelming them.

Hit report

You may create fast voice-guided walkthroughs or movies for teammates utilizing instruments like Loom or Figma’s new widget, Voice Memos. This manner, they’ll perceive the designs at their very own tempo, have time to assume and ask questions, and refer again to them later if wanted. That is particularly useful for giving clear context about new concepts asynchronously. Simply make sure you maintain them brief and candy — round 3-5 minutes, in any other case folks aren’t going to wish to watch. 

Make it a crew sport 

To determine what works finest on your distinctive crew, maintain a design retro. That is the place you establish what labored and what may very well be higher. Within the spirit of continuous enchancment, I requested just a few of my colleagues what they want from a design file to make sure they’ll contribute and do their finest work.

Amna Saeed, Product Supervisor:

I actually admire a well-organized design file as a result of it helps me perceive the designer’s intent rapidly and clearly. Particularly, it is useful when diffs and questions are clearly labeled, the present state is offered for context, and non-happy path states (error messages, empty states) are included.

These are some options I like to see in a design file:

• Labels to indicate how screens relate to at least one one other, corresponding to an arrow connecting a CTA from one display screen to a ensuing state change in one other display screen

• Notation when two screens characterize two completely different design choices

• Labels calling out the proposed updates and modifications

• Labels for open questions, and, when related, who they’re meant for (e.g. PM vs. Engineers)

Candice Roe, Senior UX Author:

Elements are probably the most magical a part of a design file for content material designers/UX writers. I replace as soon as, within the clearly-named “parts” web page of the design file, and the textual content populates in all places. This protects me a ton of time, and helps me rely much less on the product designer to regulate textual content field sizes and padding points which will come up from updating something that’s not a part. 

And that brings me to autolayout. Autolayout is tremendous useful once I wish to go in and add UI copy, corresponding to inline textual content or authorized copy, and even take away copy that’s not wanted with out having to ask the product designer for assist. 

The final and most necessary factor I search for in a design file is area to collaborate. That is the “messy” a part of the file. It’s the area the place I can discover options alongside the product designer, the place we riff off one another, remark in real-time, and are available collectively to discover a answer. That is the web page that ultimately will get referenced time and time once more when product stakeholders ask us if we tried one thing, and we are able to say “sure” and present them this web page with all of the collaborative explorations.

David Ko, Net Engineer II: 

In a design file, I hope to see adherence to the design system for frequent parts. The extra specific the affiliation with the design system, corresponding to labeling of particular parts/types, the higher. For customized parts, it’s useful to see a complete illustration of all of the legitimate states, in addition to how a consumer is predicted to work together with this part. I additionally hope to see a extra cohesive approach to talk and depart suggestions.

To be able to create the perfect experiences for our customers, we’ve to contemplate the wants of our collaborators. By spending a while bringing readability to the design file itself, you may construct up the relationships among the many entire crew and create an area to dig into the work that’s most significant. As designers, we ought to be strategic about our construction and explorations, in addition to how we share our work. Doing these items will assist everybody on the crew come into alignment, discover gaps within the collective understandings, and problem assumptions, all with the aim of making high-quality experiences.