Protipado 3

How to create multiple actions in Figma?

Welcome to the world of advanced prototyping in Figma! If you're already here, it's because you've mastered the basics and are ready to move up a level. In this lesson, we'll explore how to use components, variants, and variables to create multiple actions in a prototype. Get ready to take your design skills to amazing heights and experience more fluid and natural interactions.

How to set up multiple interactions in a button?

A common case when designing interfaces is wanting a single click to trigger multiple actions. Imagine you have a button that not only saves a path, but also displays a confirmation notification.

// Assuming you have a component with two variants:'saved' and 'unsaved'const botonGuardar = document.getElementById('botonGuardar');// First action: switch from 'unsaved' to 'saved'botonGuardar.addEventListener('click', () => { changeButtonState('saved'); showToast('SavedPath');});function showToast(message) { const toast = document.createElement('div'); toast.innerText = message; document.body.appendChild(toast); setTimeout((() => { toast.remove(); }, 1200); // Time for message to disappear}

In this example, the button triggers a state change and displays a Toast message, all with a single click. Note that the time for the Toast to appear can be adjusted to provide a better user experience.

How to apply variables and states to components?

Variables allow you to dynamically manage the state of prototype elements. Suppose you are working with a filter that shows or hides paths that have or don't have trees.

// Using boolean variables to change visibilitylet showTreesOnly = true;function toggleFilterTrees() { showTreesOnly = !showTreesOnly; updatePathVisibility();}function updatePathVisibility() { const paths = document.querySelectorAll('.path'); paths.forEach((path) => { if (path.classList.contains('noTrees') && !showTreesOnly) { path.style.display = 'none'; } else { path.style.display = 'block'; } } } );} }

Thus, you can manage the visibility of trails by toggling between showing all or only those with trees, improving the interactivity and usability of your application.

How to integrate states and variables for a more dynamic experience?

By merging component states with variables, you can achieve a high level of control over interactions. Consider a scenario where clicking on a filter not only changes its graphical state, but also modifies a variable that controls which elements are visible.

// Generalizing a function that changes the state and sets a variablefunction changeStateAndVariable(button, variable, value) { button.addEventListener('click', () => { variable = value; updateInterface(); });}const filterTreesBtn = document.getElementById('filterTrees');changeStateAndVariable(filterTreesBtn, showOnlyWithTrees, true);function updateInterface() { // Updates elements according to the new value of variables // Here are functions that update the visibility of paths and change the graphical state of the filter updatePathVisibility();}

This code implements complex interactions that bring realism to the interactive simulation. With each click, the prototype responds to give more veracity to the user experience, simulating the operation of a real application.

Figma becomes, in your hands, a powerful tool that transcends from static to dynamic design, making tangible any interactive idea you can imagine.