IP Library Granted Patent US 12,266,043
Granted Patent B2
US 12,266,043 · App. 18/144,093 · Granted Apr 1, 2025

Graph feature for configuring animation behavior in content renderings

Inventors: Nikolas Klein (San Francisco, CA); William Wu (San Francisco, CA); Ricky Rajani (San Francisco, CA); Sho Kuwamoto (San Francisco, CA); Rachel Miller (San Francisco, CA)
Assignee: FIGMA, INC.
G06T13/80G06F3/04847G06T2200/24
View Patent ↗
Loading inventors, assignments & file history…
Monitor This Case
Get email alerts when status or documents change.
Order Certified Copies
Most orders are placed with the USPTO same day — all within 24 business hours.
Order via The Patent Place →
Pre-filled with this patent's details
Quick Facts
Patent No.
US 12,266,043
App. No.
18/144,093
Granted
Apr 1, 2025
Kind
B2
Abstract

A computing system to generate an interactive animation interface, including a graph feature that is manipulatable to enable a user to specify one or more parametric values to configure an animation behavior of an associated content rendering. The computing system generates the animation behavior for the content rendering based on the one or more parametric values specified by the user.

Claims (33)

1. A network computer system comprising:

a memory sub-system to store a set of instructions;

one or more processors that operate to communicate the set of instructions to one or more user devices, wherein the set of instructions include instructions that when executed by each of the one or more user devices, cause the user device to perform operations that include:

generating an interactive animation interface, the interactive animation interface including a graph feature that is manipulatable to enable a user to specify one or more parametric values for configuring an animation behavior of a content rendering based on a spring equation, wherein the one or more parametric values represent one or more characteristics of spring motion, including one or more characteristics selected form a group that includes stiffness, damping, mass, initial velocity, and acceleration.

2. The network computer system of claim 1 , wherein the operations include generating the animation behavior for the content rendering based on the one or more parametric values specified by the user.

3. The network computer system of claim 1 , wherein the graph feature is manipulatable by the user to enable the user to specify at least two parametric values that at least partially define the animation behavior.

4. The network computer system of claim 1 , wherein generating the interactive animation interface includes generating a knob in association with a line segment of the graph feature, the knob being moveable to affect a profile of the line segment, and wherein the one or more characteristics are based at least in part on the profile.

5. The network computer system of claim 4 , wherein the operations include:

continuously altering the profile of the line segment based on a movement of the knob in one or more directions; and

continuously determining the one or more parametric values based on the profile of the line segment.

6. The network computer system of claim 5 , wherein the operations include:

continuously displaying the one or more parametric values in conjunction with the graph feature.

7. A non-transitory computer-readable medium that stores instructions, including instructions that, when executed by one or more processors of a computing device, cause the computing device to perform operations to:

generating an interactive animation interface, the interactive animation interface including a graph feature that is manipulatable to enable a user to specify one or more parametric values for configuring an animation behavior of a content rendering based on a spring equation, wherein the one or more parametric values represent one or more characteristics of spring motion, including one or more characteristics selected form a group that includes stiffness, damping, mass, initial velocity, and acceleration.

8. The non-transitory computer-readable medium of claim 7 , wherein the operations include generating the animation behavior for the content rendering based on the one or more parametric values specified by the user.

9. The non-transitory computer-readable medium of claim 7 , wherein the graph feature is manipulatable by the user to enable the user to specify at least two parametric values that at least partially define the animation behavior.

10. The non-transitory computer-readable medium of claim 7 , wherein, wherein generating the interactive animation interface includes generating a knob in association with a line segment of the graph feature, the knob being moveable to affect a profile of the line segment, and wherein the one or more characteristics are based at least in part on the profile.

11. The non-transitory computer-readable medium of claim 10 , wherein the operations include:

continuously altering the profile of the line segment based on a movement of the knob in one or more directions; and

continuously determining the one or more parametric values based on the profile of the line segment.

12. The non-transitory computer-readable medium of claim 11 , wherein the operations include:

continuously displaying the one or more parametric values in conjunction with the graph feature.

13. A method for operating a computing device, the method comprising one or more processors and comprising:

providing instruction to cause a computer device to perform operations including generating an interactive animation interface, the interactive animation interface including a graph feature that is manipulatable to enable a user to specify one or more parametric values for configuring an animation behavior of a content rendering based on a spring equation, wherein the one or more parametric values represent one or more characteristics of spring motion, including one or more characteristics selected form a group that includes stiffness, damping, mass, initial velocity, and acceleration.

14. The method of claim 13 , further comprising:

generating the animation behavior for the content rendering based on the one or more parametric values specified by the user.

15. The method of claim 13 , wherein the graph feature is manipulatable by the user to enable the user to specify at least two parametric values that at least partially define the animation behavior.

16. The method of claim 13 , wherein generating the interactive animation interface includes generating a knob in association with a line segment of the graph feature, the knob being moveable to affect a profile of the line segment, and wherein the one or more characteristics are based at least in part on the profile.

17. The method of claim 16 , wherein the method include:

continuously altering the profile of the line segment based on a movement of the knob in one or more directions; and

continuously determining the one or more parametric values based on the profile of the line segment.

18. The method of claim 17 , wherein the method includes:

continuously displaying the one or more parametric values in conjunction with the graph feature.

Assignments (1)
ASSIGNMENT OF ASSIGNOR'S INTEREST Recorded Mar 28, 2024
From: KLEIN, NIKOLAS; KUWAMOTO, SHO; MILLER, RACHEL; RAJANI, RICKY; WU, WILLIAM
To: FIGMA, INC.
Reel/Frame 066940/0430 →
Continuity (2)
Provisional Application 63339814 · May 9, 2022
Related Publication 20230386118A1 · Nov 30, 2023
References Cited (59)
US 7752559B1 · Szpak · 2010 [cited by applicant]
US 8209657B1 · Sawyer et al. · 2012 [cited by applicant]
US 8312416B2 · Freund · 2012 [cited by applicant]
US 8726228B2 · Ravindran et al. · 2014 [cited by applicant]
US 10114733B1 · Varghese · 2018 [cited by applicant]
US 10181059B1 · Brewton · 2019 [cited by applicant]
US 10521197B1 · Ciolfi et al. · 2019 [cited by applicant]
US 10997217B1 · Nielsen · 2021 [cited by applicant]
US 11829689B1 · Kottamadal et al. · 2023 [cited by applicant]
US 11853690B1 · Zhang et al. · 2023 [cited by applicant]
US 20070006136A1 · Hirschberg · 2007 [cited by examiner]
US 20080036776A1 · Niles · 2008 [cited by examiner]
US 20100017695A1 · Palmieri · 2010 [cited by applicant]
US 20130086529A1 · Singh et al. · 2013 [cited by applicant]
US 20130239001A1 · Maloney et al. · 2013 [cited by applicant]
US 20140071133A1 · Chu · 2014 [cited by examiner]
US 20140356822A1 · Hoque · 2014 [cited by examiner]
US 20160048388A1 · Eksten · 2016 [cited by applicant]
US 20160274776A1 · Scheff · 2016 [cited by applicant]
US 20160371312A1 · Ben-Aharon et al. · 2016 [cited by applicant]
US 20180174346A1 · Fratarcangeli · 2018 [cited by examiner]
US 20180268608A1 · Schneider · 2018 [cited by examiner]
US 20180308276A1 · Cohen · 2018 [cited by examiner]
US 20190035149A1 · Chen · 2019 [cited by examiner]
US 20190325626A1 · Tao · 2019 [cited by applicant]
US 20220012071A1 · Kim · 2022 [cited by applicant]
US 20220083316A1 · Andersson · 2022 [cited by applicant]
US 20220101582A1 · Uzgin et al. · 2022 [cited by applicant]
US 20220245618A1 · King et al. · 2022 [cited by applicant]
US 20230306667A1 · Hopkins · 2023 [cited by examiner]
US 20230400971A1 · Tai · 2023 [cited by examiner]
US 20230418562A1 · Andersson · 2023 [cited by applicant]
US 20240143869A1 · Klein · 2024 [cited by applicant]
EP 3719752 · 2020 [cited by applicant]
JP 2008021221A · 2008 [cited by applicant]
WO WO2022061027 · 2022 [cited by applicant]
WO WO2023219970 · 2023 [cited by applicant]
WO WO2024091964 · 2024 [cited by applicant]
Bezier Animations, UI Elements to Flutter Widgers (Part 1), by Kamalesh Basu, Published in TheBrand.app on Jan. 29, 2020. 25 pages. [cited by applicant]
International Search Report and Written Opinion mailed Aug. 12, 2024 in PCT/US2024/034867 (UP-036-3WO). [cited by applicant]
International Search Report and Written Opinion mailed Aug. 20, 2024 in PCT/US2024/034864 (UP-036-2WO). [cited by applicant]
International Search Report and Written Opinion mailed Sep. 4, 2024 in PCT/US2024/034855 (UP-036-1WO). [cited by applicant]
Prototyping Easing Curves, The Wayback Machine by Figma Help Center. Found at:https://web.archive.org/web/20240000000000*/Prototyping%20Easing%20Curves7 pages. [cited by applicant]
Written Opinion of the International Preliminary Examining Authority mailed Sep. 16, 2024, for related PCT/US2023/0076500, filed Oct. 10, 2022, 6 pages. [cited by applicant]
Written Opinion of The International Preliminary Examining Authority mailed Sep. 18, 2024, for related PCT/US2023/0077671, filed Oct. 24, 2023, 8 pages. [cited by applicant]
International Search Report and The Written Opinion of The International Searching Authority mailed Dec. 22, 2021, for related PCT/US2021/050734 filed Sep. 16, 2021, 66 pages. [cited by applicant]
Paper by WeTransfer—Simple Sketch App, “Creativity at your fingertips” URL:https://web.archive.org/web/20220121205009/https://wetransfer.com/paper, 9 pages. [cited by applicant]
Jarzabek et al., “XVCL: XML-based Variant Configuration Language”, IEEE, pp. 1-2 (Year: 2003). [cited by applicant]
Kriouile et al., “Towards Flexible and Reusable SaaS for Multi-tenancy”, IEEE, pp. 1-7 (Year: 2014). [cited by applicant]
International Search Report and The Written Opinion of The International Searching Authority mailed Aug. 23, 2023, for related PCT/US2023 filed May 8, 2023, 11 pages. [cited by applicant]
Written Opinion of The International Preliminary Examining Authority mailed Apr. 10, 2024, for related PCT/US2021/050734, filed Sep. 16, 2021, 7 pages. [cited by applicant]
International Preliminary Report on Patentability mailed Jul. 2, 2024, for related PCT/US2021/050734, filed Sep. 16, 2021, 8 pages. [cited by applicant]
International Search Report and The Written Opinion of The International Searching Authority mailed Feb. 16, 2024, for related PCT/US2023/077671, filed May 2, 2024, 11 pages. [cited by applicant]
Paper by Figma—“Guide to Prototyping in Figma”, URL https://web.archive.org/web/2022102202/0956, https://help.figma.com/hc/en-us/articles/360040314193 “Flows and Starting Points” “Create Connections”, Oct. 22, 2022, 8 p… [cited by applicant]
Bibliographic information for “Figma Tutorial: Build and present interactive prototypes”, https://www.youtube.com/watch?v=X5qiBwqptek, Feb. 5, 2024, 2 pages. [cited by applicant]
Bibliographic information for “Figma Tutorial: Prototyping”, https://www.youtube.com/watch?v=sAAa-CCOcg, Feb. 27, 2024, 2 pages. [cited by applicant]
Paper by Figma—“Frames in Figma”, URL https://web.archive.org/web/20221004002738/ https://help.figma.com/hc/en-us/articles/360041539473-Frames-in-Figma , Oct. 10, 2022, 11 pages. [cited by applicant]
Kravchuck-Kirilyuk, “Persimmon: Nested Family Polymorphism with Extensible Variant Types”, ACM, pp. 1-27 (Year: 2024). [cited by applicant]
Akerholm et al., “A Model for Reuse and Optimization Software of Embedded Software Components,” IEEE, pp. 567-572. Year: 2007. [cited by applicant]