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

What is Framer? Join the Community
Return to index
Julio Caunedo
Posted Dec 16 - Read on Facebook

Hi All, I am starting with framerjs... getting familiar with everything and trying to understand the best practice. In the example I am sharing I am trying the change the color of imported shapes (the icons) on a click event. I have few questions:

1. Can I change the color of an imported shape?
2. How I can pass a LayerID through a function in order to manipulate it?
3. On this case I was starting to create a function to change layer.visible (true/false) between gray and red icons, having red as the current/active one.
4. Point 3 is the right way to do this? or I should create Layer States?

http://share.framerjs.com/3lqmujy0x5p9/

Thank you very much in advance!!!

J.

5 Comments

Jorn van Dijk

Hey Julio, welcome to the group! There are many ways to do this. Here's how I'd set this up → http://share.framerjs.com/ulft06mxsv3i/

Some pointers to help you understand what's going on.
1. I've set up the icons in Sketch in color, and make them gray (with opacity) in Framer. I then give them all an active state.
2. To keep track of what tab needs to do what, I use a simple function that switches states between default and active.
3. If you set up the indicator as a layer in Framer, you can switch colors, for an additional cool effect (not sure if you want this).

The for loop and function in this prototype are slightly advanced, but cool to know about. Hope this helps! Here are the files including the Sketch import file → http://cl.ly/e5Cl

Jorn van Dijk

Couldn't stop and turned it in a Dribbble shot :) https://dribbble.com/shots/2407081-Switching-Tabs-with-Framer

Julio Caunedo

Pretty nice! Thank you very much specially for your time doing this. It is helping me a lot understanding the best way to work... I am starting getting in love with Framerjs....

Julio Caunedo

A quick question, just to confirm:

Julio Caunedo

You use this in your example:
sketch = Framer.Importer.load "imported/tabs"
{rect, star, poly, tria, bar, screen} = sketch

But I am using this:
sketch = Framer.Importer.load "imported/tabs"
Utils.globalLayers(sketch)

The output is the same, right?

Read the entire post on Facebook