Search for tag: "design"

Figma Demo: Flipping Cards

In this demo, we are creating a card that flips when you click it. Note: if you are doing this with a design that raw text, you need to Flatten it before being able to squish.

From  Lukas Emory 0 likes 3 plays 0  

Figma Demo: Adding a Fade to Scrollable Content

In this demo, we use the Linear fill of rectangle to create a gradient fill so your content can be previewed before scrolling into it.

From  Lukas Emory 0 likes 3 plays 0  

Figma Demo: Moving Decorations / Characters

In this demonstration, we use the Smart Animate transition to create moving decorations on a page.

From  Lukas Emory 0 likes 3 plays 0  

Figma Demo: Filling Out A Form

In this demonstration, we use simple components and variants to simulate filling out a form.

From  Lukas Emory 0 likes 8 plays 0  

Figma Demo: Color Selector with Swatch Preview

In this demonstration, we build a color selector bar that shows you a preview of the swatch while you are dragging along the bar. Note: If you want this to be a horizontal bar, you must do this…

From  Lukas Emory 0 likes 1 plays 0  

Figma Demo: Simple Selector Bar (Color Selector)

In this demonstration, we learn how to create a draggable selection bar for color swatches. You can also use this for any type of input bar.

From  Lukas Emory 0 likes 3 plays 0  

Figma Demo: Dots for Automatic Rolling Image Gallery

In this demonstration, we build dots to align with the automatic scrolling/rolling image gallery so users know how many images are in the gallery.

From  Lukas Emory 0 likes 5 plays 0  

Figma Demo: Dropdown Selections

In this demo, we learn how to build a dropdown selection panel that changes what is shown as the selection.

From  Lukas Emory 0 likes 6 plays 0  

Figma Demo: On-Click/Tap Popup

In this demonstration, we use the Overlay feature to create a popup.

From  Lukas Emory 0 likes 16 plays 0  

Figma Demo: Automatic Scrolling/Rolling Image Gallery

In this demo, we build a horizontal image gallery that automatically rolls from one image to the next.

From  Lukas Emory 0 likes 16 plays 0  

Updated Figma Demo: Content with a Horizontal Scroll

This demonstration provides a 2023 updated method of giving sections their own horizontal scroll.

From  Lukas Emory 0 likes 9 plays 0  

Figma Demo: Fixing Components With Different Sizes or Shapes

In this demo, we learn how to correct two components that need to interact with each other but are not the same shape or size.

From  Lukas Emory 0 likes 2 plays 0  

Figma Demo: Creating Animations with "After Delay"

In this demo, we use the After Delay interaction to create animations with component variants.

From  Lukas Emory 0 likes 7 plays 0  

Figma Demo: Time Activated or Mouse Enter Activated Popups

In this demo, we learn how to launch popups after a delay or after the mouse enters a specific part of the page.

From  Lukas Emory 0 likes 2 plays 0  

Updated Figma Demo: Content With a Fixed Position

April 2023: Figma has recently updated the method for fixing content while scrolling. In this demo, we learn how to stick content to a specific part of the screen and have it appear at all times.…

From  Lukas Emory 0 likes 5 plays 0  

Figma Demo: Loading Screen Progress Ring

In this demo, we use the ellipse tool to create a ring that animates to become a loading progress bar.

From  Lukas Emory 0 likes 6 plays 0