Figma part 6: More actions, constraints and scrolling
In a series of tutorials, Simon explores various aspects of Figma's functionality. He begins by introducing constraints for responsive design layouts, then demonstrates scrolling triggers and actions. Moving on, he covers scrolling within frames to create interactive elements like carousels, and finally summarises the implemented features, including fixed headers, footers, and scrolling panels, along with a button for returning to the top of the content.
Revise overlay action and swap overlay
In this tutorial, Simon explores the overlay feature in Figma, particularly focusing on creating a delete button that triggers an overlay confirming the deletion of a task. He demonstrates how to set up interactions to manage the overlay and its actions effectively, including closing the overlay and swapping overlays for smoother transitions, offering practical insights for Figma users.
Constraints
In this tutorial, the focus is on understanding constraints in Figma, which are layout tools enabling responsive and adaptive designs. Simon demonstrates how to use constraints by building a simple layout, showcasing how elements stick to specified positions when the frame is resized, enhancing design versatility across different screen sizes and contexts.
Scrolling part 1
In this video, Simon delves into the concept of scrolling. He demonstrates how to set up scrolling behaviours within a layout, ensuring elements like headers and footers remain fixed while content scrolls, and concludes by adding a button to smoothly scroll back to the top of the content, enhancing the user experience.
Scrolling part 2
In this part of the tutorial, Simon demonstrates scrolling within frames in Figma, enabling the creation of interactive elements like scrolling panels or carousels. He sets up a frame to showcase a collection of staff profiles, allowing horizontal scrolling, and then adds a map element within another frame, showcasing both vertical and horizontal scrolling capabilities.
