figma·Jul 8, 2019·2 min readCurated summary

Bring your Figma prototypes to life with GIFs | Figma Blog

Figma introduced animated GIF support in prototypes, allowing designers to add motion, video elements, and subtle animations without leaving the prototyping workflow. GIFs remain static in the editor but animate when users click “Present.” The update also adds customizable cover frames, improved momentum scrolling, and touch cursors for mobile prototypes. ## Using GIFs in Figma Prototypes - Add a GIF to a Figma file using tools such as ScreenFlow, LICEcap, Principle, or After Effects. - Click **Present** to view the animation in the prototype. - GIFs appear as static images in the editor. - Designers can open the GIF properties modal and scrub to select a representative cover frame. - Custom cover frames are useful for GIFs with blank opening frames or multiple similar animations. ## Improvements for Mobile Prototypes - Mobile prototypes now include OS-aware momentum scrolling. - New touch cursors make interactions feel more like a real mobile device. ## Design Inspiration The article highlights several effective uses of animation: - **Uber:** Animated splash screens serve as both welcome moments and loading states. - **Slack:** Rotating loading quotes make waiting more engaging. - **Material Design:** Simple linear and circular progress indicators communicate activity clearly. - **Headspace:** Illustrative onboarding animations help explain the product and maintain user attention. - **Hyperlapse:** Video-based onboarding demonstrates practical product scenarios. - **Mapbox:** A looping hero animation shows the capabilities of its location technology. - **Mailchimp:** Subtle animated illustrations add texture and personality to web pages. Designers can experiment with Figma’s starter file or consult the support article for setup instructions.

Read original(opens in new tab)

Mobile UiFigmaUser ExperiencePrototyping+2

figma·May 25, 2017·2 min readCurated summary

Tips for using Constraints in your workflow

Figma’s constraints feature helps designers build layouts that adapt across different screen sizes and contexts. By anchoring elements to edges, centers, or grids, designs can remain structurally consistent instead of requiring separate manual adjustments. The post presents five practical applications, from simple button placement to flexible navigation bars, table cells, and playful illustrations. ## Pinning Buttons to Corners - Set an action button’s constraints to the bottom and right sides of its parent frame. - This keeps floating action buttons in a consistent location as the screen expands. ## Combining Components and Constraints - Constrain important elements within a frame, then convert the frame into a reusable component. - Duplicate the component for different screen sizes. - Changes to the original—such as colors or text sizes—propagate to all instances, making responsive variations easier to manage. ## Building Flexible Navigation Bars with Grids - Nest a navigation bar frame at the bottom of a phone-screen frame. - Set its constraints to **left & right** and **bottom** so it stretches with the screen. - Apply a layout grid with the **stretch** type. - Place buttons in grid columns and center-constrain them so they reposition as the screen changes. ## Creating Reusable Table Cells - Group related content, such as an avatar and text, and constrain it to the center-left of the cell. - Group action text and a rounded rectangle into a button, then constrain it to the center-right. - The cell’s contents remain attached to their intended sides across different frame widths. ## Experimenting with Illustrations - Horizontal and vertical constraints can also be applied creatively to illustrations. - Stretching constrained artwork can produce humorous distortions and playful effects. Constraints are most useful when combined with components and grids. Setting them thoughtfully allows one design to adapt across many screen sizes while reducing repetitive layout work.

Read original(opens in new tab)

Mobile UiFigmaUser InterfaceResponsive Design+3