This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Lachezar Petkov Petkov
Posted Aug 03 - Read on Facebook

Hi,
Is there a way to integrate Framer Design and for loops? If I make an element in Design (say, a single item for a list), can I duplicate/repeat it using a loop in Code? Thanks!

9 Comments

Andrew Nalband

Here's a handy little makeGrid function that will do just that for you. It takes a layer that you want to copy (just insert the name of the target you made in the design view), then pass it a margin and a number of rows and columns. You can make lists and grids with this.

https://framer.cloud/XJLHS

Lukas Guschlbauer

I'm currently working on a "symbols"-module, that creates a class from something you create in design-mode. It even allows to design different states. It still needs some work but I'm gonna post it here when I'm ready! :)

Lachezar Petkov Petkov

Thank you both, great stuff!

Lachezar Petkov Petkov

Andrew Nalband - I tried combining this function with Dynamic Type, and I got this weird result where the first row/column's template tag gets ignored, and not replaced with the template string. Could this be a bug, or am I doing something wrong here?

Lachezar Petkov Petkov

Here's a simplified version of this, the same thing happens:

Tiffany Kosa

Yes. I did it last night. I'll upload my project in a few hours.

Lukas Guschlbauer

Yo guys! Here's what I have so far for my Symbol-module :)
https://github.com/der-lukas/framer-Symbols

Andrew Nalband

Lachezar Petkov Petkov there are a couple of things to watch out for in the two examples above:

1. In both screenshots, you want to set the template text before you copy the layer. You'd want to move your line "test_string.template" to appear before layer.copy()

2. In the first example in addition to moving the template text assignment to before you copy the layer, you want to indent the line "test_string.template" once more, so that it's running inside of the column generating for-loop.

Here's an example:

https://framer.cloud/weeAO

Lachezar Petkov Petkov

Andrew Nalband oh.. I thought I was missing something silly and simple! thank you so much! Lukas Guschlbauer -- thanks for that too, I'll try it out today!

Read the entire post on Facebook