Figleaf for Framer

Create graphic objects enriched with fine random variations.

→ Lire en version Française

What is Figleaf?

Figleaf is a package to be installed in the Framer environment (web or desktop version). It allows the designer to create graphic objects whose shapes, colours and proportions are animated with fine random variations, similar to the shapes observed in nature.

Figleaf makes it possible to produce an infinite variety of shapes and textures and to finely and completely manage their random variations.

Figleaf is structured around five basic, easy-to-use components:

• Circle component named Circle,
• Rectangle component named Rectangle,
• Color component named Color_Frame,
• Texture generator named Texture_Frame,
• Perlin Noise component named Perlin_Frame.

→ View the gallery of examples

Circle and Rectangle components

Figleaf allows you to create, thanks to the Circle and Rectangle components, circles and rectangles whose formal characteristics are partially determined using random variables :

• Background colour or gradient,
• Contour colour,
• Size, proportion and deformation.

Figleaf makes it possible to generate an infinite number of random variations from the same shape and to precisely define the intensity of the variations that will be applied to each of its instances and to animate them :

• Hue, saturation and luminosity for colours and gradients,
• Width, height or diameter for object proportions,
• Point coordinate shift for object deformations,
• Animation by morphosis of all the variations.

Color_Frame component

The Color_Frame component allows you to create a simple Frame whose background color or gradient is partially determined using random variables:

• Hue, Saturation and Luminosity

Component Texture

Figleaf allows you to create, thanks to the Texture component, 3 types of textures whose characteristics are partially determined using random variables :

• Linear textures,
• Textures by image repetition (“wallpaper” type).

Linear textures

Linear textures allow to generate random variations based on a regular distribution of vertical lines and to define precisely the intensity of the variations that will be applied to each of its instances:

• Hue, saturation and brightness of the line colours,
• Line thickness of the lines,
• Irregularity of the gap and bias between the lines.

Textures by image repetition

Textures by image repetition allow to generate random variations on the basis of regular repetition — such as “wallpaper” — of the same image (jpeg, gif, or png) and to precisely define the intensity of the variations that will be applied to each of its instances:

• Image resizing,
• Image rotation,
• Horizontal and vertical image shift.

Perlin noise

Figleaf allows to create, thanks to the Perlin component, a Perlin Noise [Wikipedia article] whose formal characteristics are adjustable:

• Frequency
• Octave

RGBA effects

RGBA color remapping effects are associated with the Perlin component in order to visually vary its appearance in 2 modes:

• Discrete and Table

→ Learn more about these effects [MDN Web Docs]

Why Figleaf?

Meditation on a vine leaf

At the moment it is autumn in Bordeaux (Fr). The Virginia creeper that runs along the garden walls is adorned with your fawns and strews the ground with its leaves. Although each of these countless leaves is individually recognisable as a vine leaf, each one is different. Differences linked to the ageing of each leaf, to its exposure, to its proximity to other leaves, to the set of conditions that forge it all contribute to shaping its appearance like an infinite game of chance, constantly renewed. Winter will soon be here. The tender green leaves of spring are now only a memory.

The idea that the observer contemplating this diversity can have of what a “Vine Leaf” is is necessarily approximate, vague, inaccessible, both the sum and the average of all the leaves he has seen. Vine leaves are like just about everything in nature. A richness of shapes, variations of nuances, roughness that gives this whole and the unique of each of its elements all its value.

Autumn leaves

Spring leaves

Is there a generic, ideal model of its vine leaves?
Obviously not. There is no generic vine leaf shape or any other shape in general in nature. The idea of a vine leaf can never be reduced to an idea and remains nothing more than an accumulation of experience. In the same way, no form in nature replicates itself on the exact basis of a defined model without variations, which are themselves the fruit of a form of chance, even if these are sometimes minute or difficult to perceive.

In this case, why apply this unnatural model to an interface environment? Why consider the “similar” from the systematic angle of the “identical”?
There are of course practical reasons for this. Indeed, in the context of a programmed digital environment where one copies/pastes, where elements are easily duplicated, where everything is an object or a class, where replication is so perfect and so easy, there is no reason to deprive oneself of it.
On the contrary, everything pushes towards this logic, from practical to ergonomic reasons. Should we recall the Gestalt theory and the rules of similarity (shape, size, colour)?

In the same way, the creation of generic components, visually identical and grouped together in the form of charters, libraries, GUI or Design system are the most striking expressions of this.

Extreme leaves

Need for roughness

What about the deep human feelings about this visual cloning of digital design? Isn’t there a risk of cerebral weariness, a risk of disinterest, a loss of the individual’s attention caused by a certain plastic rigidity: the loss of the richness of the world’s natural roughness?

Anyone who considers arithmetic methods to produce random numbers is committing a sin.
John von Neumann.

Have we not taken the arithmetic principles of information science at face value in order to naively define the visual paradigm of digital environments that our brain does not handle arithmetically?

It is in this sense and to answer this question that I created Figleaf, in order to explore the interface from the angle of random variations of shapes rather than that of a fixed numerical model.

I hope that everyone will find meaning, inspiration, “poetic rebellion”, where, but it is only a personal feeling: the perfect repetition bores, worries and dehumanises our experience of the world.

Start with Figleaf

Installing the Figleaf package from Framer web

1. If you have not already done so: create an account and access Framer web
2. Click New to create a new document.
3. Click Create to create a new project.
4. In the search bar “Find components…”, type “Figleaf” and click on Fileaf.
5. Click Install to load Figleaf into your document.
6. Click on Show to see the contents of the package.
7. The “Circle” component is selected by default, click on Insert to insert it in your document.
8. Figleaf is ready to use.
9. At the bottom left, in the “Components” panel, you can unfold the Figleaf panel in order to access all the components.

Installing the Figleaf package on Framer desktop version

1. If not already done, download and install Framer Desktop (Pro & Mac OS X account only)
2. Start Framer Desktop and create a new document.
3. Click Insert from the Framer toolbar.
4. In the search bar of the Packages panel, type “Figleaf” in the Search field.
5. Click Show to see the contents of the package.
6. The “Circle” component is selected by default, click Insert to insert it into your document.
7. Figleaf is ready to use.
8. At the bottom left, in the “Components” panel, you can unfold the Figleaf panel in order to access all the components.

Using the Circle component

1. Drag the Circle component onto the worktop to create an instance of the component.
2. Change the value (from 1% to 50%) of the ~diameter field of the circle to set the level of random resizing of the circle.
3. Change the value (from 0.1% to 10%) of the ~distortion field of the circle to set the level of random distortion of the circle.
4. If desired, change the diameter of the circle using the Diameter field to adjust its reference diameter.
   Nb: If you enlarge the circle, it may be necessary to enlarge the dimensions of the block containing it so as not to hide it.
5. Preview the rendering.
6. Each time the preview is refreshed via the Reload icon, a new circle is generated.

Using the Rectangle component

1. Drag the Rectangle component on the worktop to create an instance of the component.
2. Change the value (from 1% to 50%) of the ~width or ~height fields of the rectangle to set the level of random resizing of the width or height of the rectangle.
3. Change the value (from 0.1% to 10%) of the ~distortion field to set the level of random distortion of the rectangle.
4. You can disable the random distortion of some sides of the rectangle by clicking Yes in front of Undo side and then clicking ~top, ~right, ~bottom or ~left depending on the side(s) you want to disable.
5. Modify, if you wish, the dimensions of the rectangle via the Width or Height field in order to adjust its reference width or height.
   Nb: If you enlarge the rectangle, it may be necessary to enlarge the dimensions of the block containing it so as not to hide it.
6. Preview the rendering using the Command+P shortcut.
7. At each refresh via the Reload icon, a new rectangle is generated.

Changing the background colour of a component instance

1. Select the instance of the Rectangle or Circle component that you want to modify.
2. Click the Color field to change the reference background colour.
3. Change the value (from 1° to 360°) of the ~hue field to set the level of random variation in the hue of the background colour.
4. Change the value (1% to 100%) of the ~saturation field to set the amount of random variation in the saturation of the background colour.
5. Change the value (1% to 100%) of the ~luminosity field to set the amount of random variation in the brightness of the background colour.

Adding a background gradient to a component instance

1. Select the instance of the Rectangle or Circle component that you want to modify.
2. Select Gradient from the Background drop-down menu.
3. Two reference colours are now displayed : Color takes the background colour as the first reference colour of the gradient and Stop-color as the second reference colour. You can change them and set the level of their random ~hue, ~saturation and ~luminosity variations (see: Changing the background colour at a component instance).
4. By clicking on Radial, in front of Type you can transform the linear gradient into a circular gradient and vice versa by clicking on Linear.

Setting a linear background gradient

1. Make sure that you are on a Linear type gradient. (see: Adding a background gradient to a component instance)
2. Adjust the x1, x2, y1 and y2 values to determine the orientation and colour distribution of the linear gradient.

Setting a circular background gradient

1. Make sure that you are on a Radial type gradient. (see: Adding a background gradient to a component instance)
2. Adjust the cx, cy, fx, fy and r (radius) values to determine the orientation and colour distribution of the circular gradient.

Adding a background image to a component instance

1. Select the instance of the Rectangle or Circle component that you want to modify.
2. Select Image from the Background drop-down menu.
3. Click the Choose button in front of Img file to choose the background image for your shape.

Adding a border to a component instance

1. Select the instance of the Rectangle or Circle component that you want to modify.
2. Click Yes in front of Border.
3. Change the Size value to change the thickness of the border.
4. Click the Color Field in front of Color to change the reference background colour.
5. Change the value (from 1° to 360°) of the ~hue field to set the level of random variation of the background colour hue.
6. Change the value (1% to 100%) of the ~saturation field to set the amount of random variation in the saturation of the background colour.
7. Change the value (1% to 100%) of the ~luminosity field to set the amount of random variation in the brightness of the background colour.

Morphically animate a component instance

Figleaf allows you to morph an instance of a component from a random state a of the instance to a random state b. This state is determined according to the set of random variables applied to the concerned instance: deformation, size, outline colour, background colour and background colour gradient. This animation runs in a loop with a configurable duration.

1. Select the Rectangle or Circle component instance you wish to modify.
2. Click Yes in front of Morph.
3. Modify the value (from 0.1 to 180 seconds) of the Duration field in order to define the duration of the animation loop.

Using the Online Texture component

1. Drag the Texture component on the worktop to create an instance of the component.
2. Change the Gap value to adjust the gap between lines.
3. Change the ~gap value to adjust the level of random variation in the line spacing.
4. Change the Border value to adjust the thickness of the lines.
5. Change the ~border value to adjust the amount of random variation in line thickness.
6. Change the Color value to adjust the colour of the lines.
7. Modify the ~hue, ~saturation and ~luminosity values to adjust the level of random variation in the hue, saturation and brightness of the lines.

Using the Texture component with an image

1. Drag the Texture component on the worktop to create an instance of the component.
2. Select Image from the Type drop-down menu.
3. Click the Choose file button to choose an image (.png, .gif, .jpg, .jpeg).
4. Change the Scale value to adjust the scale of the images.
5. Change the ~scale value to adjust the level of random variation in image scale.
6. Change the Rotation value to adjust the tilt of the images.
7. Change the ~rotation value to adjust the amount of random variation in the tilt of images.
8. Change the X gap and Y gap values to adjust the horizontal and vertical gap between images.
9. Change the ~x gap and ~y gap value to adjust the amount of random variation in the horizontal and vertical gap between frames.