9

Interactive components: less wiring, more inspiring

 3 years ago
source link: https://www.figma.com/blog/prototyping-updates-and-interactive-components/?ref=sidebar
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Interactive components: less wiring, more inspiring

Nikolas Klein
Product Designer, Figma
October 26, 2021

Design isn’t just about how something looks. It’s equally important to nail down how it feels and works. This process can be time-consuming and expensive without a way to quickly experiment and align on solutions. Fortunately, we have prototyping—a low-risk, high-reward way to try out interactive ideas during the design process.

But compared to visual design, it’s still hard to explore and iterate on interactivity. Because you have to switch tools or manually wire up a prototype, you might skip this step altogether, resulting in extra development time or missed goals.

Today in Figma, we’re launching interactive components and a handful of smaller improvements to make it easier for teams to create, edit, and share interactive ideas, closing the gap between visual and interactive design workflows.

Bring your designs to life with interactive components

We are thrilled to announce that interactive components are now out of beta and available for everyone to use.

Interactive components allow you to define interactions and animations between variants in a component set, so instances are immediately “alive” in prototyping mode. Having reusable interactive elements cuts down on time spent prototyping, and helps you reach higher levels of fidelity for better feedback and testing. With interactive components, you can:

Reduce prototype complexity

What used to require many frames now takes one, making prototypes easier to build and edit. For example, you can select multiple checkboxes or open an accordion menu without additional frames.

“[Interactive components] have been a game changer for prototyping, as they allow for minimizing the number of frames while building all UI states and interactions. On some projects, the number of frames has dropped by 10x or more.”

— Denis Vacher, Amazon Web Services (AWS)

Speed up prototype creation

To allow you to stay in the flow when you’re creating a prototype, you can edit all states of an interactive component directly next to where it’s used. And if you want to try out a different version, just duplicate to iterate.

“I can focus on building user flows, not wasting time making sure 100+ buttons have a working hover state.”

— Jack Fagan, Capital One

Scale prototyping across your team

Since interactive components are shareable through libraries, your whole team can add interactive elements into their designs with just a single click.

“[Interactive components] have made it so much easier to empower people to build prototypes using our design system. A lot of interactivity is baked into the library, so folks who aren’t as familiar with Figma can easily build a quick prototype with minimal help.”

— Sara Dubuque, Atlassian

Since we announced interactive components in beta earlier this year, we’ve made major performance improvements, addressed load times and stability issues, and even added new functionality like support for observation mode and auto layout.

We have come a long way since beta launch, due in large part to our community’s participation and feedback. We are blown away by the incredible examples people have created during the beta (animated robots, a music notation prototype, or just good old bubble wrap) and love to see that the feature is not only impacting day-to-day workflows, but encouraging teams to think outside the box.

If you’re interested in trying out interactive components, check out our playground file to get started.

Speeding up your day-to-day

In addition to interactive components, we’re introducing some new features to encourage a more dynamic and iterative workflow in Figma.

Edit quickly without losing context

We have a new keyboard shortcut (⇧ Shift + E) to toggle between the design and prototyping tabs. Designers can quickly transition from editing objects to interactions, helping them think about how people will experience designs as they are created.

Clean up the canvas

When you create a prototype interaction in Figma, a blue arrow appears on the canvas (which we affectionately call a “noodle”). The more interactions in a prototype, the more noodles appear, and the harder it becomes to interpret what's going on.

We are making prototypes easier to understand at first glance by hiding interactions on instances “inherited” from main components. Complex prototypes will remain legible for quicker editing and smoother handoff. Learn more here.

Copy and paste prototype interactions

You can now also copy prototype interactions and paste them into frames, reducing the amount of repetitive work involved with building prototypes.

Help others understand your interactive ideas

Lastly, we're also making some improvements to help you better communicate interactive ideas to your team.

Share the big picture with developers

While many designers send prototypes to developers during handoff, we’ve also heard that it’s helpful to share the interactions in the design file, like a pathway for the user experience. We have made it so file viewers are now able to see and explore interactions on the canvas. Help your developers understand functionality without having to click through frames.

Conduct more realistic user tests

It can be confusing when a prototype interaction doesn’t match up with real functionality. You can now disable keyboard navigation when viewing prototypes, so arrow keys match the functionality in your app—especially useful for testing gaming devices, media player apps, and more.

We hope that you’re as excited about these updates as we are, and we can’t wait to see what interactive ideas you explore. To learn more about prototyping in Figma, visit our Help Center.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK