Tag: Framer

10 Dec

Introducing Framer Motion

by TBSCategories: News

In this article, we’ll take a closer look at how Framer Motion helps us in creating awesome animations. We’ll learn how motion components work and learn how to chain animations together. We’ll look into how to make gesture-triggered, timed, and scroll animations with Framer motion. Along the way, we’ll use the things we learn to build five demo applications I’ve set up to show us how we can integrate Framer Motion into real-world applications.

This tutorial will be beneficial to readers who are interested in integrating animations in their React application.

Note: This article requires a basic understanding of React and CSS.

What Is Framer Motion?

Framer Motion is an animation library that makes creating animations easy. Its simplified API helps us abstract the complexities behind animations and allows us to create animations with ease.

Motion Components

These are the building blocks of Framer motion. Motion components are created by prefixing motion to your regular HTML and SVG element (e.g, motion.h1). Motion components can accept several props, with the basic one being the animate prop. This prop takes in an object where we define the properties of that component we want to animate. The properties we define will be animated when the component mounts in the DOM.

Let’s animate an h1 text using Framer Motion. First, we install the framer-motion library and import motion. 

npm i framer-motion import { motion } from 'framer-motion';

Then we convert the h1 into a motion component.

<motion.h1    animate={{x: 20, y: -20}}>   This is a motion component </motion.h1>

This will cause the h1 to slide 20px to the right and move 20px up when it loads. When units aren’t added, calculations are done using pixels. However, you can explicitly set the units you want the calculations to be based on, animate={{x: "20rem", y: "-20rem"}}>.

By default, a motion component will be animated from the state defined from its styles to those in the animate prop. However, if we wanted to, we could hijack and define the initial animation state of the component using the initial prop. While the animate prop is used to define the behavior of components when they mount, the initial prop defines their behavior before they mount.

If we want our h1 to come in from the left, we control that using the initial prop.

<motion.h1     initial={{x: -1000}}     animate={{x: 20}}>    This is a motion component </motion.h1>

Now, when the h1 mounts, it slides in from the left.

We are not limited to a single animation. We can define a series of animations called keyframes in an array of values. Each value will get animated in sequence.

<motion.h1     initial={{x: -1000}}     animate={{x: [20, 50, 0, -70, 40] }}>    This is a motion component </motion.h1>

The transition prop allows us to define how the animations occur. With it, we define how values animate from one state to another. Among other things, we can define the duration, delay, and type of animation using this prop.

<motion.h1     initial={{ x: -1000 }}     animate={{ x: 0 }}     transition={{         type: "tween",         duration: "2",         delay: "1"     }}>     This is a motion component </motion.h1>

Say we were to animate several motion components simultaneously, like in the code snippet below.

<div className="App">       <motion.h1         initial={{ x: -1000 }}         animate={{ x: 0 }}         transition={{           type: "tween",           duration: "2",           delay: "1"         }}>         This is a motion h1       </motion.h1>       <motion.h2           initial={{ y: -1000 }}         animate={{ y: 0 }}         transition={{           type: "tween",           duration: "1",           delay: ".4"         }}>This is a motion h2       </motion.h2>       <motion.h3        initial={{ x: 100, opacity: 0 }}        animate={{ x: 0, opacity: 1 }}>          This is a motion h3       </motion.h3>       <motion.h4        initial={{ scale: 0.7 }}        animate={{ scale: 1.7 }}        transition={{          type: "tween",          duration: "2",          delay: "1"        }}>          This is a motion h4       </motion.h4>     </div>

While this works, the variants prop in Framer Motion enables us to extract our animation definitions into a variants object. Not only do variants make our code cleaner, but they allow us to create even more powerful and complex animations.

Extracting our animation definitions into variants objects, we have this:

const H1Variants = {   initial: { x: -1000 },   animate: { x: 0 },   transition: {     type: "tween",     duration: 2,     delay: 1   } }  const H2Variants = {   initial: { y: -1000 },   animate: { y: 0 },   transition: {     type: "tween",     duration: 1,     delay: .4   } } const H3Variants = {   initial:{ x: 100, opacity: 0 },   animate:{ x: 0, opacity: 1 } } const H4Variants = {   initial:{ scale: 0.7 },   animate:{ scale: 1.7 },   transition:{     type: "tween",     duration: "2",     delay: "1"   } }

Instead of passing the animation definitions into a component’s initial and animate props directly, we extract these definitions into standalone variant objects. In the variant objects, we define variant names that describe each animation’s name as variants.

<div className="App">       <motion.h1       variants={H1Variants}       initial='initial'       animate='animate'       >         This is a motion h1       </motion.h1>       <motion.h2           variants={H2Variants}         initial='initial'         animate='animate'        >         This is a motion h2       </motion.h2>       <motion.h3         variants={H3Variants}         initial='initial'         animate='animate'        >          This is a motion h3       </motion.h3>       <motion.h4         variants={H4Variants}         initial='initial'         animate='animate'        >          This is a motion h4       </motion.h4> </div>

In the variants prop, we pass in the name of the variant objects for each motion component and then pass in the animations to the initial and animate props.

We can take our current setup with variants further to reduce repetition. Using variants, we can propagate animation attributes down through the DOM from a parent motion component. For this to work, we create variants for the parent motion.div with similar animation names in its variant object as its children. By doing this, we won’t have to pass the animation names’ to each child component. Behind the scenes, the parent element handles that for us.

const ContainerVariants = {   initial: {},   animate: {} }; const H1Variants = {   initial: { x: -1000 },   animate: { x: 0 },   transition: {     type: "tween",     duration: 2,     delay: 1   } }; //more variants below  <motion.div       className="App"       variants={ContainerVariants}       initial="initial"       animate="animate"     >       <motion.h1 variants={H1Variants}>This is a motion h1</motion.h1>       <motion.h2 variants={H2Variants}>This is a motion h2</motion.h2>       <motion.h3 variants={H3Variants}>This is a motion h3</motion.h3>       <motion.h4 variants={H4Variants}>This is a motion h4</motion.h4> </motion.div>

Now we have a cleaner code with no repetitions. We turned the container div to a motion component so we could pass in the ContainerVariants object we defined. Since we don’t define any animations on the container, we pass in empty objects to initial and animate. Your animation names must be the same in every variant object for the propagation to work.

Now we understand the basics of Framer Motion. Let’s begin building our fist of 5 demo applications.

Icon Shop

We can create interactive animations based on gestures. Motion components are currently able to listen for hover, tap, pan, and drag gesture detection. We’ll be building this Icon Shop app using the whileHover prop.

Components

  • App.js: this holds the heading texts.
  • Card.jsx: here, we define the animations for the icon cards.
  • CardContainer.jsx: we import and loop through the icons.
  • styles.js: create, style, and export the motion components. I used styled-components for styling the components.

Let’s start with App.js.

import { H1, H2 } from "./Styles"; import CardContainer from "./CardContainer";    return (     <div>       <H1          initial={{ y: -100 }}          animate={{ y: 0, transition: { delay: 1 } }}>         Icon Shop       </H1>       <H2          initial={{ x: -1000 }}          animate={{ x: 0, transition: { delay: 1 } }}>         Hover over the cards to see the motion magic       </H2>       <CardContainer />     </div>   );

We import the H1 and H2 motion components we created in the Styles.js file. Since they are motion components, we use the initial and animate props to define their behavior before and when they mount. Here, we also import and display the CardContiner component.

Now, the CardContainer.js.

import { Container } from "./Styles"; import Card from "./Card"; import { ReactComponent as AddIcon } from "./assets/add.svg"; import { ReactComponent as AirplaneIcon } from "./assets/airplane.svg"; import { ReactComponent as AlarmIcon } from "./assets/alarm.svg"; //more svg imports below...  const icons = [   <AddIcon />,   <AirplaneIcon />,   <AlarmIcon />,   //more icons below ];  const CardContainer = () => {   return (     <Container initial={{ x: -1000 }} animate={{ x: 0 }}>       {icons.map((icon) => (         <Card icon={icon} />       ))}     </Container>   ); };

Here, we import the SVGs, the Container motion component, and the Card component.

Similar to H1 and H2 in App.js, we define animations of the Container using the initial and animate props. When it loads, it will create a cool effect of sliding in from the left of the browser.

Now, Card.js

import { CardBox, IconBox } from "./Styles"; const CardVariants = {   beforeHover: {},   onHover: {     scale: 1.1   } }; const IconVariants = {   beforeHover: {     opacity: 0,     y: -50   },   onHover: {     opacity: 1,     y: 0,     scale: 1.5,     transition: {       type: "tween"     }   } };  const Card = ({ icon }) => {   console.log(icon);   return (     <CardBox variants={CardVariants} initial="beforeHover" whileHover="onHover">       <IconBox variants={IconVariants}>{icon}</IconBox>     </CardBox>   ); };

Here, we create two variant objects with beforeHover and onHover animations. In the CardVariants object, we don’t want to do anything initially, so beforeHover is an empty object. onHover we increase the scale of the card box.

In the IconVariants object, we define the initial state of the IconBox in its beforeHover. We set its opacity to 0 and push it upwards by 50px. Then, in onHover, we set the opacity back to 1, push it back to its default position, and change the transition type to tween. Then we pass in the variants to their respective motion components. We make use of the propagation, so we don’t need to explicitly set the initial and animate props to the IconBox component.

Animated Navbar

We’ll build a simple Navigation component, and we’ll see how we can create timing relationships between parent and children motion components.

Components

  • App.js: this holds the heading texts.
  • Styles.js: create, style, and export the motion components. The components are styled using styled-components.

Let’s take a look at the App.js file.

import { Header, Nav, Link, SvgBox } from "./Styles";  function App() {   const [isOpen, setIsOpen] = useState(false);   const iconVariants = {     opened: {       rotate: 135     },     closed: {       rotate: 0     }   };   const menuVariants = {     opened: {       top: 0,       transition: {         when: "beforeChildren",         staggerChildren: 0.5       }     },     closed: {       top: "-90vh"     }   };   const linkVariants = {     opened: {       opacity: 1,       y: 50     },     closed: {       opacity: 0,       y: 0     }   };

We create an isOpen state that will be used to check if the Navbar is open or not. We create 3 variant objects, iconVariants, menuVariants, and linkVariants where we define the animations for the SvgBox, Nav, and Link motion components respectively. The iconVariants is used to rotate the SvgBox 135deg when it’s hovered over. We don’t need to add “deg” to the value. In the menuVariants, we control the top position of the Nav like you would using the position property in CSS. We toggle the top position of the Nav based on the isOpen state.

With variants, we can create timing relationships between parent and children motion components. We define the relationship between parent Nav and its child, Link using the when property in the transition object. Here, set it to beforeChildren, so the parent component’s animations will finish before the child’s animation begins.

Using the staggerChildren property, we set a timing order for each link. Each link will take 0.5 seconds to appear one after the other. This creates a nice visual cue when the Nav is opened. In the linkVariants we animate the opacity and the vertical position of each link.

<div className="App">       <Header>         <SvgBox           variants={iconVariants}           animate={isOpen ? "opened" : "closed"}           onClick={() => setIsOpen(!isOpen)}         >           <svg             width="24"             height="24"             viewBox="0 0 24 24"             fill="none"             xmlns="http://www.w3.org/2000/svg"           >             <path               d="M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z"               fill="#fff"             />           </svg>         </SvgBox>       </Header>       <Nav         initial={false}         variants={menuVariants}         animate={isOpen ? "opened" : "closed"}       >         <Link variants={linkVariants}>home</Link>         <Link variants={linkVariants}>about</Link>         <Link variants={linkVariants}>gallery</Link>       </Nav> </div>

Here, we pass in the variants to their respective components. In the SvgBox, we toggle the state of isOpen whenever it’s clicked, then conditionally animate it based on the state. Like the SvgBox, we conditionally animate the Nav and the Links based on isOpen‘s state.

Animated Modal

We’ll build a modal component and learn about Framer Motion’s AnimatePresence, and how it allows us animate elements as they leave the DOM.

Components:

  • App.js: we set up the showModal state here.
  • Modal.jsx: the actual animation work takes place here.
  • Styles.js: create, style, and export the motion components. The components are styled using styled-components.

Let’s look into App.js

import { ToggleButton, Container } from "./Styles"; import Modal from "./Modal";  function App() {   const [showModal, setShowModal] = useState(false);   const toggleModal = () => {     setShowModal(!showModal);   };   return (     <Container>       <ToggleButton         initial={{ x: -700 }}         animate={{           x: 0,           transition: { duration: 0.5 }         }}         onClick={toggleModal}       >         Toggle Modal       </ToggleButton>       <Modal showModal={showModal} />     </Container>   ); }

We create a showModal state that will be used to conditionally render the modal. The toggleModal function will toggle the state whenever the ToggleButton is clicked. ToggleButton is a motion component, so we can define animations for it. When it mounts, it slides in from the left. This animation runs for 0.5 seconds. We also pass in the showModal state to the Modal through props.

Now, Modal.jsx

import { AnimatePresence } from "framer-motion"; import { ModalBox, ModalContent, Container } from "./Styles";  <Container>   <AnimatePresence>     {showModal && (       <ModalBox         initial={{ opacity: 0, y: 60, scale: 0.3 }}         animate={{           opacity: 1,           y: 0,           scale: 1,           transition: { type: "spring", stiffness: 300 }         }}         exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.6 } }}         >         <ModalContent           initial={{ y: -30, opacity: 0 }}           animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}         >            Modal content!!!!         </ModalContent>       </ModalBox>     )}   </AnimatePresence> </Container>

We import AnimatePresence from framer-motion. It allows us to set exit animations for components when they leave DOM. We conditionally render the Modal based on the showModal state. We define the animations for the ModalBox and ModalContent through their initial and animate props. There’s also a new prop here, exit. Having AnimatePresence as a wrapper allows us to add exit animations to ModalBox in the exit prop.

Scroll Animation

We’ll use a combination of the useAnimation hook and react-intersection-observer to create scroll-triggered animations.

Components

  • App.js: we set up the animations for the Box component and render it in App
  • Styles.js: create, style, and export the motion components. The components are styled using styled-components.
import React, { useEffect } from "react"; import { useAnimation } from "framer-motion"; import { useInView } from "react-intersection-observer"; import { Container, H1,StyledBox } from "./Styles";  const BoxVariants = {   visible: { opacity: 1, x: 0, transition: { duration: 1 } },   hidden: { opacity: 0, x: 300 }, };  const Box = () => {   const controls = useAnimation();   const [ref, inView] = useInView();   useEffect(() => {     if (inView) {       controls.start("visible");     }   }, [controls, inView]);   return (     <StyledBox       ref={ref}       animate={controls}       initial="hidden"       variants={BoxVariants}     />   ); };

The useAnimation hook allows us to control the sequences in which our animations occur. We have access to controls.start and controls.stop methods that we can use to manually start and stop our animations. We pass in the initial hidden animaton to StyledBox. We pass in the controls we defined with the start method to StyledBox animate prop.

react-intersection-observer’s useInView hook allows us to track when a component is visible in the viewport. The useInView hook gives us access to ref, which we pass to the component we want to watch, and the inView boolean, that tells us if that element is inView or not. We use the useEffect to call controls.start whenever the element we’re watching, StyledBox is in view. We pass in controls and inView as useEffect’s dependencies. Also, we pass in the variants we defined, BoxVariants to StyledBox.

Hero Animation

We’ll build a cool hero banner animation using the useCycle hook. We’ll understand how useCycle allows us to cycle through animations.

import React, { useEffect } from "react"; import { useCycle } from "framer-motion"; import { Container, H1, HeroSection, Banner, TextBox } from "./Styles"; import { ReactComponent as BannerIllustration } from "./bighead.svg";  const H1Variants = {   initial: { y: -200, opacity: 0 },   animate: { y: 0, opacity: 1, transition: { delay: 1 } }, }; const TextVariants = {   initial: { x: 400 },   animate: { x: 0, transition: { duration: 0.5 } }, }; const BannerVariants = {   animationOne: { x: -250, opacity: 1, transition: { duration: 0.5 } },   animationTwo: {     y: [0, -20],     opacity: 1,     transition: { yoyo: Infinity, ease: "easeIn" },   }, };

We define 3 variants, H1Variants, TextVariants, and BannerVariants. However, our focus is BannerVariants. We define 2 animations, animationOne and animationTwo in BannerVariants. These are the animations we pass into the useCycle to cycle through.

const [animation, cycleAnimation] = useCycle("animationOne", "animationTwo");   useEffect(() => {     setTimeout(() => {       cycleAnimation();     }, 2000);   }, []);

useCycle works similar to the useState hook. In the destructured array, animation represents the animation that is active, whether animationOne or animationTwo. The cylceAnimation function that cycles between the animation we defined. We pass in the animations we want to cycle through into useCycle and call cylceAnimation after 2 seconds in useEffect.

<div className="App">       <Container>         <H1 variants={H1Variants} initial="initial" animate="animate">           Cool Hero Section Anmiation         </H1>         <HeroSection>           <TextBox variants={TextVariants} initial="initial" animate="animate">             Storage shed, troughs feed bale manure, is garden wheat oats at             augers. Bulls at rose garden cucumbers mice sunflower wheat in pig.             Chainsaw foal hay hook, herbs at combine harvester, children is             mallet. Goat goose hen horse. Pick up truck livestock, pets and             storage shed, troughs feed bale manure, is garden wheat oats at             augers. Lamb.           </TextBox>           <Banner variants={BannerVariants} animate={animation}>             <BannerIllustration />           </Banner>         </HeroSection>       </Container>     </div>

At the end of everything, we pass in the variants to their respective components and watch the magic happen. With this, the Banner will initially slide in from the right based on the animations we defined in animationOne, and after 2 seconds, cycleAnimation will be called which will trigger animationTwo.

As a wise Pig once said, “that’s all folks.”

Conclusion

We’ve gone through the basics of Framer Motion and seen some demo projects that give us a glimpse of the range of animations we can create. However, you can do so much more with it. I encourage you to dive into the docs and go wild.

Resources

Articles on Smashing Magazine — For Web Designers And Developers

01-how-to-start-using-sketch-and-framer-x-22
13 Jun

How To Start Using Sketch And Framer X

by TBSCategories: News

How To Start Using Sketch And Framer X

How To Start Using Sketch And Framer X

Martina Pérez

When it comes to showing the transition, interaction and animation of elements in the user interface, a prototyping tool like Framer X can make a difference in the way you communicate your vision to the team and stakeholders and as a result, boost your efficiency as a designer.

With the following example, I will illustrate how you can add interaction to static designs. To profit the most from this tutorial, some basic experience with Framer X are welcome.

To get started, you will need the following tools and assets:

Note: This tutorial is for designers using MacOS, as Framer X is for Mac (although this may change in the near future), and Sketch app is also only for Mac.

Bringing Your Designs From Sketch

We will bring our designs from Sketch into Framer X. You might also create your designs in Framer X as there is a full bunch of layout tools to do so, but there are some reasons whereby you can be interested in continuing designing your interfaces in Sketch:

  • You are used to Sketch and not willing to learn a new design tool.
  • You have already some designs in Sketch and you want to build the interaction for them.
  • Sketch works much better with large files. Framer X seems to have some problems when moving elements around.
  • Framer X is still in his early stages as a design tool and there are not many tutorials about how to create some elements of design. On the other hand, there are plenty of tutorials about Sketch and also many plugins such as the Craft plugin for Sketch which allows you to speed up your design process.
  • You will find many more web design resources for Sketch than for Framer X.
  • There is still a lack of tutorials about some of the options available in Framer X, especially about how to use the Code components.

So first of all, let’s create a new file in Framer X. The first thing we will do is to bring the design screen we have in Sketch into Framer X. To do so, just copy the Static artboard from Sketch and paste it in Framer X.

Layout in Sketch and the same layout in Framer X, once imported.
Copy your designs from Sketch and paste them into Framer X. (Large preview)

As you can see in the Layers panel, we’ve got the same layers we had in Sketch.

Note: Sometimes, when bringing your designs into Framer X, some properties may be lost — in this case, it’s the border radius of the thumbnails. This is because we used a Mask in Sketch and Framer X doesn’t recognize it. To solve this, you can either select the Group in Sketch and Flatten it to Bitmap before pasting it into Framer X, or once you have brought the design into Framer X, double-click to reach the Frame element and manually change the Radius in the Properties panel.

Organize The Layout In Framer

To work on the interaction of the elements in Framer X, we need to create a new Frame.

Note: A frame is similar to an Artboard in Sketch (or to the HTML <div> element), but is more powerful. Frames act more like containers as a frame can contain other frames.

To create a new Frame, go to the Layout tool panel, select Frame and drag and drop in any part of the canvas; or simply press F.

To create a Frame, select Frame and drag and drop in the canvas.
To create a new Frame, select Frame in the Layout tool panel. (Large preview)

Second, we will set a device for the Frame. Select the Frame and in the Properties panel, Device, choose Apple MacBook Pro.

Select a Frame, Device in the Properties panel and choose Apple MacBook Pro.
To set a device for a Frame, select a Device in the Properties panel. (Large preview)

Take a look at the Static frame we’ve imported. We will build the following interactions:

  • Header: Fade in when scrolling through the content.
  • Floating Action Button (FAB): Default, hover and pressed states.
  • Nav: It is displayed from right to left when clicking the FAB.
  • Content: It is resized when clicking the FAB.
Highlighting the elements we will build the interaction for: header, nav, FAB and content.
We will build interactions for the header, nav, FAB, and content. (Large preview)

First, create new Frames on top of the layers in such a way that you end up having one Frame for each of the abovemention interaction elements. For instance, we will add a new Frame to group all the layers that are part of the Header (Cmd + Enter) and name the Frame as header.

Select the elements of the header and add a Frame on top of them.
Group the layers to have one Frame for each of our interactive elements. (Large preview)

For the sake of clarity, change the name of the Apple MacBook Pro frame to Interactive. In the following section we will create a Scroll component.

Scroll Through The Content

First, we will duplicate (Cmd + D) the Content frame and take it out of the Static frame. Change the name of the new frame to i_content.

Content Frame has to be out of the Static frame.
Duplicate the Content frame and take it out of the Static frame. (Large preview)

Secondly, we will create a Scroll component in our Interactive frame. To do so, go to the Interactive tool panel and select Scroll. Drag and drop in any part of the Interactive frame.

In addition to that, modify the width of the Scroll component to 1141px (same as the Content) and position it in the same coordinates as the Content is on the Static frame (left: 149px, top: 140px). Apart from that, increase the height of the Scroll component as it reaches the bottom of the Interactive frame.

Position the Scroll component where it was on the Static frame.
Modify the width and height of the Scroll component and position it in the same coordinates as the Content frame. (Large preview)

Next, we will connect the Scroll component to our i_content. To do so, click on the connector and connect it to i_content.

Connect the Scroll component to the i_content.
Connect the Scroll component to the i_content. (Large preview)

Lastly, select the Interactive frame and Cmd + P to enter the Preview Mode. You should be able to scroll through the content now.

Scrolling through the page on Preview Mode.
To access to Preview Mode, press Cmd + P. (Large preview)

Next, I will explain how to position the Header and the FAB (Floating Action Button) button to make them fixed while scrolling with no need for any special coding.

Fixed Elements

We will position the elements so as they remain fixed when scrolling through the page. To that end, duplicate the Header frame and position it in the Interactive frame. As before, change the name to i_header. Do the same with the Floating Action Button button. Your Layers panel should look like this.

i_fab and i_header are in the Interactive frame.
Duplicate the Header and the FAB frames and position them within the Interactive frame. (Large preview)

As the Header and the FAB are out of the Scroll component, they will remain fixed while scrolling.

In Preview mode, Scroll through the content, whereas the header and FAB remain fixed.
You can scroll through the content, whereas the header and FAB remain fixed. (Large preview)

In the next section, I will explain how to build the transition of the Header.

Header Transition

To build the transition of the Header we will make use of the Scroll away component created by Lukas Guschlbauer. To start using this component, go to the Framer Store, search for Scroll and install the Scroll Away component.

Framer store where you can search the Scroll Away component.
Search for ‘Scroll’ in the Framer Store and install the Scroll Away component. (Large preview)

Next, go to the the Components panel, click the Scroll Away and drop it onto the canvas. Take the Header frame out of the Interactive frame and position the Scroll away component where the Header was. Change the component size as to be the same as the Header (1440x80px).

Now, select the Scroll Away component and connect it to your i_header frame. You can change multiple properties of the component such as alignment, effect, direction, easing or timing in the Properties panel. We will change the effect to Fade Move. Once that is done, the options below will change accordingly.

Applying the Fade Move effect in the Scroll Away component.
Take the Header frame out of the Interactive frame and change the effect to Fade Move. (Large preview)

For the effect to work, we need one more thing. Select the Scroll Away Component and click the Override in the Properties panel. Click File and select New File. Then, click Override and select useScrollData. Next, click the Scroll component of your Interactive frame. Click Override again and select getScrollData in Override. To preview the result, press Cmd + P.

Note: Overrides are a unique concept to Framer X. Code overrides are functions that allow components to communicate with each other. You can write them yourself in code and apply them to any Frame or component on your canvas. These functions allow you to override visual properties like opacity and fill, and allow for interactivity and animation. Code overrides can live in any code file in your project. Framer X interprets these based on the type. You can apply any code override to any Frame or component on the canvas by selecting Override from the Properties panel.

There is a white space at top when scrolling through the content in Preview Mode
The transition of the Header works, but there is a white space at the top. (Large preview)

The transition works, but you will notice that there is a white space at the top. This is because the Scroll component is positioned at y: 140. Let’s change this. Increase the height of the Scroll component to occupy the whole height of the Interactive frame. Next, go to your i_content frame and position the elements 140px from the top of the frame.

Positioning the content 140px from top in the i_content frame.
In the i_content frame, position the content 140px from top. (Large preview)

Your interaction should be now similar to this one.

Header goes away with Fade Move effect while scrolling through the content in Preview Mode.
Header transition when scrolling through the content. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to change the state of a button when interacting with it.

States For Buttons

In this section, we will work on the different states for the Floating Action Button (FAB). We will make use of the Magic Move component created by Henrique Gusso. So first of all, go to the Framer store and install this component. In the Components panel, select the component and drop it on the canvas.

At first, select the Floating Action Button frame and take it out of the Interactive frame. Next, position the Magic Move component where the FAB was. Change its size to 72×72px.

The i_fab is out of the Interactive frame and the Magic Move component is where the FAB was.
Take the FAB out of the Interactive frame and position the Magic Move component where the FAB was. (Large preview)

For some reason, the graphic imported from Sketch doesn’t work with this component, so we will create our own circle. In the i_fab frame, remove the frame that contains the graphic and create a circle with the same color and properties instead.

Detail of the layers of the i_fab frame.
Remove the graphic imported from Sketch and create your own circle. (Large preview)

For the different states of the FAB, we need to create a Master and three Instances (default, hover, and pressed states). To do so, select the i_FAB, right-click on it, and select Create component.

Right click on the i_fab, Create component to get a Master of the element.
To create a Master, select the i_fab frame, right-click, Create component. (Large preview)

Note: Design Components are similar to Symbols in Sketch. So if you want to create reusable components for your Design System this is a very useful tool. To change the properties of your instances all at once, just select the Master and modify the properties you want. For further information, take a look at the Framer X guide to create Design Components.

Now, duplicate the i_fab Master frame 3 times to get the instances. Change the name of the new frames to i_fab_default, i_fab_hover, and i_fab_pressed.

The Master and the three instances of the i_fab: default, hover and pressed.
To create the Instances for the states of the button, duplicate the Master 3 times. (Large preview)

Next, we need to connect the Magic Move component to the instances. Connect Initial to i_fab_default, Hover Start to i_fab_hover, Tap to i_fab_pressed and Hover End to i_fab_default.

Connect the Magic Move component in the Interactive frame to the instances: default, hover and pressed.
Connect the Magic Move component to the instances. (Large preview)

Finally, we have to go into each one of the states and change the color and scale. Go into the i_fab_hover and change its color to #2244BF. To do so, double click until you see the Fill option in the Properties panel. Next, go into the i_fab_pressed, reduce its size to 56px and change its color to #172E80. Check the result in the Preview Mode.

Note: If you see a black screen in the Preview Mode, check the compatibility of the component with your Framer Library Version. To do so, go to the page of the component in the Framer Store. If the package is not compatible with your version you will see a warning message. To change your Framer Library, navigate to File → Framer Library Version.

Different states of the FAB in Preview Mode while hovering and clicking it.
To access the Preview mode, press Cmd + P. (Large preview)

In the next section I will explain how to display the nav from right to left by clicking the FAB button.

Note: If you need it, download the source file for this step.

Open The Nav When Clicking A Button

Now, we will work on the interaction to display the Nav when clicking the FAB button. We will make use of the Link to and the Magic Move component again for the transition.

Go to the Static frame and duplicate the Nav frame. Position it in any part of the canvas and change its name to i_nav.

i_nav is out of the Static frame.
Duplicate the Nav frame, take it out of the Static frame and change its name to i_nav. (Large preview)

Now, we need to create two different states for the Nav. First, the initial state (no nav is shown) and second state, the nav is displayed. To do so, create a new Master with the i_nav (right-click and select Create component, or use the shortcut Cmd + K). Once you have the Master, duplicate two times to get the Instances. Name them i_nav_default and i_nav_displayed.

The master of i_nav with the two instances: default and displayed.
Duplicate the Master to get the instances of i_nav. (Large preview)

Next, position the elements of the i_nav_default out of the frame (Right: -80px).

i_nav_default is positioned out of the frame.
Position the i_nav_default out of the frame. (Large preview)

So, the Nav will be displayed automatically from right to left when clicking the FAB. To build this animation, we need to create a new Frame. Duplicate the Interactive frame. Change the name of the new Frame to Interactive02.

Interactive frame and its duplicate: Interactive02 frame.
Duplicate the Interactive frame. (Large preview)

To display the Nav in this new Frame we will create a new Magic Move component. The size (80x392px) and the position (Top: 140, Right: 0) need to be the same as the Nav.

Magic Move component in the Interactive02 frame.
Add a new Magic Move component in the Interactive02 frame. (Large preview)

Next, go to Interactive02 frame, select the Magic Move Component and connect it to the instances. i_nav_default to the Initital state and i_nav_displayed to the Automatic state. By doing so, when entering on this second Frame, the Nav will be displayed automatically.

Connect the Magic Move component in Interactive02 frame to the instances of the i_nav.
Connect the Magic Move component to the instances. (Large preview)

Now, we will build the interaction between screens by linking the Frames. Go to the Interactive frame, select the FAB, right-click → Add Frame. Change the name of the new frame to interactive_fab. Press L (Link to) and connect it to the Interactive02 frame.

Linking the FAB to Interactive02 frame.
On the Interactive frame, add a new Frame on top of the FAB and press L to connect it to the Interactive02 frame. (Large preview)

Change the transition to Instant and preview it. You can change the transition effect between screens in the Properties panel.

Select the FAB and changing the transition to Instant.
Change the transition to Instant. (Large preview)

If you go to Preview Mode you will see that the Nav is shown when clicking the FAB button, but we need to reverse the interaction when clicking again on it. To do so, duplicate the Interactive02 frame (give the name Interactive03 to the new Frame).

On Interactive03 frame, select the Magic Move component and assign i_nav_displayed to the Initial State and i_nav_default to the Automatic State.

Assigning states of the i_nav to the Magic Move Component on Interactive03 frame.
Assign i_nav_displayed to the Initial State and i_nav_default to Automatic state on Interactive03 frame. (Large preview)

Finally, press L (Link to) the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 frame to the Interactive02 frame. Remember to change the transition effect in the Link properties to Instant.

Linking screens with the FAB in Interactive02 frame and Interactive03 frame.
Link the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 to the Interactive02 frame. (Large preview)

Preview the interaction from the Interactive frame. The result should be as the one below:

When clicking the FAB button, the Nav is displayed from right to left.
When clicking the FAB button, the Nav is displayed from right to left. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to resize the content when clicking the FAB button.

Resize The Content When The Nav Is Displayed

To resize the content when the Nav is displayed we will write some React code. We will use Playground (a code editor integrated in Framer X) that allows you to play with some React and HTML code to build advanced animations.

Note: If you are not familiar with React, you may be interested in taking a look at some React tutorials.

So first, go to each of the interactive frames, select the Scroll component and add a Frame on top of it.

A Frame was added on top of the Scroll component.
Add a Frame on top of each of the Scroll components. (Large preview)

Next, go to the Properties panel and click Override. On File, select App. If you don’t see it, select New file. Then, click Edit Code. The Playground will be opened automatically.

Make sure your App file has the following line at the top. If not, add it:

import { Data, animate, Override, Animatable } from "framer"

Note: (*) This code works with Framer v. 25 and the latest API version v. 1.0.7. While this code works, keep in mind that Framer is now encouraging users to use React Hooks functions instead of class components. Learn more at the new Framer API documentation pages.

We will declare a variable called contentScaleValue and indicate that it can be animated. Also, we will set the default toggle state as true.

//Value by default const contentScaleValue = Animatable(1); let toggle = true;

Then, we will create a function ResizeContent for the Content to be scaled when clicking the FAB. Besides that, we have to set its originX and originY as so it scales from top left.

//Assign to content export const ResizeContent: Override = props => {  return {    scale: contentScaleValue,    originX: 0,    originY: 0  }; };

Next, we will create a second function togglePosition for the FAB. We will say that onTap, if toggle is true, Content will be rescaled and the toggle state will change to false. Otherwise, do the reverse animation.

//Assign to FAB export const togglePosition: Override = props => {  return {    onTap: () => {      if (toggle) {        animate.ease(contentScaleValue, 0.9, {duration: 0.2});        toggle = false;      } else {        animate.ease(contentScaleValue, 1, {duration: 0.2});        toggle = true;      }    }  }; };

After writing this code, select the Frame you created on top of your Scroll components, go to the Override section in the properties panel and select File: App, Override: ResizeContent. Next, select the FAB, File: App, Override: togglePosition.

The Override is set to ResizeContent on the Scroll component. The Override is set to togglePosition on the FAB component.
Select the Frame on top of your Scroll components and set the Override as ResizeContent. Select the FAB and set the Override to togglePosition. (Large preview)

Check that the result works as the following.

The Content is resized when clicking the FAB in Preview Mode.
To preview the interaction, press Cmd + P. (Large preview)

Note: If you need it, download the source file for this step.

Prototyping

Go to the the Sketch file and import (copy and paste) the User profile artboard into Framer X. Once in Framer, duplicate the Frame. Give it the name Interactive_user_profile.

User profile artboard in Sketch and once imported in Framer X.
Copy your User profile artboard in Sketch and paste it into Framer X. Then duplicate your frame and give it the name ‘Interactive_user_profile’. (Large preview)

We will build automatic transitions for the right sidebar, the boxes at top and the content. Take each of the Frames out of the Interactive_user_profile frame.

Highlighting the elements that we will build the interaction for: right sidebar, boxes at top and content.
We will build automatic transitions for the right sidebar, the boxes at top and the content. (Large preview)

Create a Magic Move component for each of the elements and position them in the Interactive_user_profile frame.

Magic Move components for the elements are in Interactive_user_profile frame.
Create a Magic Move component for the elements to be animated. (Large preview)

Next, create a Master and two instances for each of the components. For the sidebar, position the first instance out of the Frame. For the boxes and the content, change the opacity of the first instance to 0.

A Master and two instances for each of the components. The opacity of the second instance is set to 0.
Create a Master and two instances for each of the components. (Large preview)

Connect the Magic Move component to each of the instances. Assign the first instance to the Initial State and the second instance to the Automatic State.

The Magic Move components are connected to the instances of the elements.
Connect the Magic Move components to the instances. (Large preview)

In the Properties panel, you can change the delay of each of the Move Magic components to set up the order to be shown. Assign the next delays:

  • Sidebar: no delay
  • First box: 0.4 delay
  • Second box: 0.6 delay
  • Third box: 0.8 delay
  • Content: 1 delay.
Selecting one of the boxes and setting a delay of 0.4.
Change the delay of the components in the Properties panel. (Large preview)

Go to the Interactive03 frame, select the header and Link to the Interactive_user_profile frame. In this frame, select the header and Link to Interactive frame. Remember to change the transition between the screens to Instant. Check the results.

Linking Interactive03 frame to Interactive_user_profile frame.
Prototyping with the Link tool. (Large preview)

Note: If you need it, download the source file for this step.

Clicking on the header leads you to User profile frame where the elements are displayed with an automatic animation.
Cmd + P to check the result. (Large preview)

Sharing The Prototype

To share the prototype, click File → Export Web Preview (Cmd + E). To see the prototype, open the index.html. It will launch the prototype in a web browser.

Conclusion And Takeaways

If you are looking for a design tool specialized in interaction, Framer X is the perfect one. Framer X allows you to build simple transitions between screens, micro interactions, but also to design complex interactions making use of React code.

By using Framer X, you will speed up your design process and will be able to better communicate the interaction of your designs to the team and stakeholders.

  • You can still design the interface in Sketch and paste your designs into Framer X to build the interaction of the elements there.
  • For this tutorial, I have have been using a design imported from Sketch, but you can create your layouts in Framer X as well.
  • There are multiple UI kits available in the Framer Store to help you build your design systems.
  • There is no single approach on how to build an interaction in Framer X. Experiment and learn.
  • To build some quick interactions faster, make use of the pre-built components in the Framer Store.
  • You just need a minimal coding knowledge in order to start building complex interactions in Framer X and there are multiple tutorials available online to start learning how to do it.
Smashing Editorial (mb, yk, il)


Articles on Smashing Magazine — For Web Designers And Developers

12 Jun

How To Start Using Sketch And Framer X

by TBSCategories: News

How To Start Using Sketch And Framer X

How To Start Using Sketch And Framer X

Martina Pérez

When it comes to showing the transition, interaction and animation of elements in the user interface, a prototyping tool like Framer X can make a difference in the way you communicate your vision to the team and stakeholders and as a result, boost your efficiency as a designer.

With the following example, I will illustrate how you can add interaction to static designs. To profit the most from this tutorial, some basic experience with Framer X are welcome.

To get started, you will need the following tools and assets:

Note: This tutorial is for designers using MacOS, as Framer X is for Mac (although this may change in the near future), and Sketch app is also only for Mac.

Bringing Your Designs From Sketch

We will bring our designs from Sketch into Framer X. You might also create your designs in Framer X as there is a full bunch of layout tools to do so, but there are some reasons whereby you can be interested in continuing designing your interfaces in Sketch:

  • You are used to Sketch and not willing to learn a new design tool.
  • You have already some designs in Sketch and you want to build the interaction for them.
  • Sketch works much better with large files. Framer X seems to have some problems when moving elements around.
  • Framer X is still in his early stages as a design tool and there are not many tutorials about how to create some elements of design. On the other hand, there are plenty of tutorials about Sketch and also many plugins such as the Craft plugin for Sketch which allows you to speed up your design process.
  • You will find many more web design resources for Sketch than for Framer X.
  • There is still a lack of tutorials about some of the options available in Framer X, especially about how to use the Code components.

So first of all, let’s create a new file in Framer X. The first thing we will do is to bring the design screen we have in Sketch into Framer X. To do so, just copy the Static artboard from Sketch and paste it in Framer X.

Layout in Sketch and the same layout in Framer X, once imported.
Copy your designs from Sketch and paste them into Framer X. (Large preview)

As you can see in the Layers panel, we’ve got the same layers we had in Sketch.

Note: Sometimes, when bringing your designs into Framer X, some properties may be lost — in this case, it’s the border radius of the thumbnails. This is because we used a Mask in Sketch and Framer X doesn’t recognize it. To solve this, you can either select the Group in Sketch and Flatten it to Bitmap before pasting it into Framer X, or once you have brought the design into Framer X, double-click to reach the Frame element and manually change the Radius in the Properties panel.

Organize The Layout In Framer

To work on the interaction of the elements in Framer X, we need to create a new Frame.

Note: A frame is similar to an Artboard in Sketch (or to the HTML <div> element), but is more powerful. Frames act more like containers as a frame can contain other frames.

To create a new Frame, go to the Layout tool panel, select Frame and drag and drop in any part of the canvas; or simply press F.

To create a Frame, select Frame and drag and drop in the canvas.
To create a new Frame, select Frame in the Layout tool panel. (Large preview)

Second, we will set a device for the Frame. Select the Frame and in the Properties panel, Device, choose Apple MacBook Pro.

Select a Frame, Device in the Properties panel and choose Apple MacBook Pro.
To set a device for a Frame, select a Device in the Properties panel. (Large preview)

Take a look at the Static frame we’ve imported. We will build the following interactions:

  • Header: Fade in when scrolling through the content.
  • Floating Action Button (FAB): Default, hover and pressed states.
  • Nav: It is displayed from right to left when clicking the FAB.
  • Content: It is resized when clicking the FAB.
Highlighting the elements we will build the interaction for: header, nav, FAB and content.
We will build interactions for the header, nav, FAB, and content. (Large preview)

First, create new Frames on top of the layers in such a way that you end up having one Frame for each of the abovemention interaction elements. For instance, we will add a new Frame to group all the layers that are part of the Header (Cmd + Enter) and name the Frame as header.

Select the elements of the header and add a Frame on top of them.
Group the layers to have one Frame for each of our interactive elements. (Large preview)

For the sake of clarity, change the name of the Apple MacBook Pro frame to Interactive. In the following section we will create a Scroll component.

Scroll Through The Content

First, we will duplicate (Cmd + D) the Content frame and take it out of the Static frame. Change the name of the new frame to i_content.

Content Frame has to be out of the Static frame.
Duplicate the Content frame and take it out of the Static frame. (Large preview)

Secondly, we will create a Scroll component in our Interactive frame. To do so, go to the Interactive tool panel and select Scroll. Drag and drop in any part of the Interactive frame.

In addition to that, modify the width of the Scroll component to 1141px (same as the Content) and position it in the same coordinates as the Content is on the Static frame (left: 149px, top: 140px). Apart from that, increase the height of the Scroll component as it reaches the bottom of the Interactive frame.

Position the Scroll component where it was on the Static frame.
Modify the width and height of the Scroll component and position it in the same coordinates as the Content frame. (Large preview)

Next, we will connect the Scroll component to our i_content. To do so, click on the connector and connect it to i_content.

Connect the Scroll component to the i_content.
Connect the Scroll component to the i_content. (Large preview)

Lastly, select the Interactive frame and Cmd + P to enter the Preview Mode. You should be able to scroll through the content now.

Scrolling through the page on Preview Mode.
To access to Preview Mode, press Cmd + P. (Large preview)

Next, I will explain how to position the Header and the FAB (Floating Action Button) button to make them fixed while scrolling with no need for any special coding.

Fixed Elements

We will position the elements so as they remain fixed when scrolling through the page. To that end, duplicate the Header frame and position it in the Interactive frame. As before, change the name to i_header. Do the same with the Floating Action Button button. Your Layers panel should look like this.

i_fab and i_header are in the Interactive frame.
Duplicate the Header and the FAB frames and position them within the Interactive frame. (Large preview)

As the Header and the FAB are out of the Scroll component, they will remain fixed while scrolling.

In Preview mode, Scroll through the content, whereas the header and FAB remain fixed.
You can scroll through the content, whereas the header and FAB remain fixed. (Large preview)

In the next section, I will explain how to build the transition of the Header.

Header Transition

To build the transition of the Header we will make use of the Scroll away component created by Lukas Guschlbauer. To start using this component, go to the Framer Store, search for Scroll and install the Scroll Away component.

Framer store where you can search the Scroll Away component.
Search for ‘Scroll’ in the Framer Store and install the Scroll Away component. (Large preview)

Next, go to the the Components panel, click the Scroll Away and drop it onto the canvas. Take the Header frame out of the Interactive frame and position the Scroll away component where the Header was. Change the component size as to be the same as the Header (1440x80px).

Now, select the Scroll Away component and connect it to your i_header frame. You can change multiple properties of the component such as alignment, effect, direction, easing or timing in the Properties panel. We will change the effect to Fade Move. Once that is done, the options below will change accordingly.

Applying the Fade Move effect in the Scroll Away component.
Take the Header frame out of the Interactive frame and change the effect to Fade Move. (Large preview)

For the effect to work, we need one more thing. Select the Scroll Away Component and click the Override in the Properties panel. Click File and select New File. Then, click Override and select useScrollData. Next, click the Scroll component of your Interactive frame. Click Override again and select getScrollData in Override. To preview the result, press Cmd + P.

Note: Overrides are a unique concept to Framer X. Code overrides are functions that allow components to communicate with each other. You can write them yourself in code and apply them to any Frame or component on your canvas. These functions allow you to override visual properties like opacity and fill, and allow for interactivity and animation. Code overrides can live in any code file in your project. Framer X interprets these based on the type. You can apply any code override to any Frame or component on the canvas by selecting Override from the Properties panel.

There is a white space at top when scrolling through the content in Preview Mode
The transition of the Header works, but there is a white space at the top. (Large preview)

The transition works, but you will notice that there is a white space at the top. This is because the Scroll component is positioned at y: 140. Let’s change this. Increase the height of the Scroll component to occupy the whole height of the Interactive frame. Next, go to your i_content frame and position the elements 140px from the top of the frame.

Positioning the content 140px from top in the i_content frame.
In the i_content frame, position the content 140px from top. (Large preview)

Your interaction should be now similar to this one.

Header goes away with Fade Move effect while scrolling through the content in Preview Mode.
Header transition when scrolling through the content. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to change the state of a button when interacting with it.

States For Buttons

In this section, we will work on the different states for the Floating Action Button (FAB). We will make use of the Magic Move component created by Henrique Gusso. So first of all, go to the Framer store and install this component. In the Components panel, select the component and drop it on the canvas.

At first, select the Floating Action Button frame and take it out of the Interactive frame. Next, position the Magic Move component where the FAB was. Change its size to 72×72px.

The i_fab is out of the Interactive frame and the Magic Move component is where the FAB was.
Take the FAB out of the Interactive frame and position the Magic Move component where the FAB was. (Large preview)

For some reason, the graphic imported from Sketch doesn’t work with this component, so we will create our own circle. In the i_fab frame, remove the frame that contains the graphic and create a circle with the same color and properties instead.

Detail of the layers of the i_fab frame.
Remove the graphic imported from Sketch and create your own circle. (Large preview)

For the different states of the FAB, we need to create a Master and three Instances (default, hover, and pressed states). To do so, select the i_FAB, right-click on it, and select Create component.

Right click on the i_fab, Create component to get a Master of the element.
To create a Master, select the i_fab frame, right-click, Create component. (Large preview)

Note: Design Components are similar to Symbols in Sketch. So if you want to create reusable components for your Design System this is a very useful tool. To change the properties of your instances all at once, just select the Master and modify the properties you want. For further information, take a look at the Framer X guide to create Design Components.

Now, duplicate the i_fab Master frame 3 times to get the instances. Change the name of the new frames to i_fab_default, i_fab_hover, and i_fab_pressed.

The Master and the three instances of the i_fab: default, hover and pressed.
To create the Instances for the states of the button, duplicate the Master 3 times. (Large preview)

Next, we need to connect the Magic Move component to the instances. Connect Initial to i_fab_default, Hover Start to i_fab_hover, Tap to i_fab_pressed and Hover End to i_fab_default.

Connect the Magic Move component in the Interactive frame to the instances: default, hover and pressed.
Connect the Magic Move component to the instances. (Large preview)

Finally, we have to go into each one of the states and change the color and scale. Go into the i_fab_hover and change its color to #2244BF. To do so, double click until you see the Fill option in the Properties panel. Next, go into the i_fab_pressed, reduce its size to 56px and change its color to #172E80. Check the result in the Preview Mode.

Note: If you see a black screen in the Preview Mode, check the compatibility of the component with your Framer Library Version. To do so, go to the page of the component in the Framer Store. If the package is not compatible with your version you will see a warning message. To change your Framer Library, navigate to File → Framer Library Version.

Different states of the FAB in Preview Mode while hovering and clicking it.
To access the Preview mode, press Cmd + P. (Large preview)

In the next section I will explain how to display the nav from right to left by clicking the FAB button.

Note: If you need it, download the source file for this step.

Open The Nav When Clicking A Button

Now, we will work on the interaction to display the Nav when clicking the FAB button. We will make use of the Link to and the Magic Move component again for the transition.

Go to the Static frame and duplicate the Nav frame. Position it in any part of the canvas and change its name to i_nav.

i_nav is out of the Static frame.
Duplicate the Nav frame, take it out of the Static frame and change its name to i_nav. (Large preview)

Now, we need to create two different states for the Nav. First, the initial state (no nav is shown) and second state, the nav is displayed. To do so, create a new Master with the i_nav (right-click and select Create component, or use the shortcut Cmd + K). Once you have the Master, duplicate two times to get the Instances. Name them i_nav_default and i_nav_displayed.

The master of i_nav with the two instances: default and displayed.
Duplicate the Master to get the instances of i_nav. (Large preview)

Next, position the elements of the i_nav_default out of the frame (Right: -80px).

i_nav_default is positioned out of the frame.
Position the i_nav_default out of the frame. (Large preview)

So, the Nav will be displayed automatically from right to left when clicking the FAB. To build this animation, we need to create a new Frame. Duplicate the Interactive frame. Change the name of the new Frame to Interactive02.

Interactive frame and its duplicate: Interactive02 frame.
Duplicate the Interactive frame. (Large preview)

To display the Nav in this new Frame we will create a new Magic Move component. The size (80x392px) and the position (Top: 140, Right: 0) need to be the same as the Nav.

Magic Move component in the Interactive02 frame.
Add a new Magic Move component in the Interactive02 frame. (Large preview)

Next, go to Interactive02 frame, select the Magic Move Component and connect it to the instances. i_nav_default to the Initital state and i_nav_displayed to the Automatic state. By doing so, when entering on this second Frame, the Nav will be displayed automatically.

Connect the Magic Move component in Interactive02 frame to the instances of the i_nav.
Connect the Magic Move component to the instances. (Large preview)

Now, we will build the interaction between screens by linking the Frames. Go to the Interactive frame, select the FAB, right-click → Add Frame. Change the name of the new frame to interactive_fab. Press L (Link to) and connect it to the Interactive02 frame.

Linking the FAB to Interactive02 frame.
On the Interactive frame, add a new Frame on top of the FAB and press L to connect it to the Interactive02 frame. (Large preview)

Change the transition to Instant and preview it. You can change the transition effect between screens in the Properties panel.

Select the FAB and changing the transition to Instant.
Change the transition to Instant. (Large preview)

If you go to Preview Mode you will see that the Nav is shown when clicking the FAB button, but we need to reverse the interaction when clicking again on it. To do so, duplicate the Interactive02 frame (give the name Interactive03 to the new Frame).

On Interactive03 frame, select the Magic Move component and assign i_nav_displayed to the Initial State and i_nav_default to the Automatic State.

Assigning states of the i_nav to the Magic Move Component on Interactive03 frame.
Assign i_nav_displayed to the Initial State and i_nav_default to Automatic state on Interactive03 frame. (Large preview)

Finally, press L (Link to) the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 frame to the Interactive02 frame. Remember to change the transition effect in the Link properties to Instant.

Linking screens with the FAB in Interactive02 frame and Interactive03 frame.
Link the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 to the Interactive02 frame. (Large preview)

Preview the interaction from the Interactive frame. The result should be as the one below:

When clicking the FAB button, the Nav is displayed from right to left.
When clicking the FAB button, the Nav is displayed from right to left. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to resize the content when clicking the FAB button.

Resize The Content When The Nav Is Displayed

To resize the content when the Nav is displayed we will write some React code. We will use Playground (a code editor integrated in Framer X) that allows you to play with some React and HTML code to build advanced animations.

Note: If you are not familiar with React, you may be interested in taking a look at some React tutorials.

So first, go to each of the interactive frames, select the Scroll component and add a Frame on top of it.

A Frame was added on top of the Scroll component.
Add a Frame on top of each of the Scroll components. (Large preview)

Next, go to the Properties panel and click Override. On File, select App. If you don’t see it, select New file. Then, click Edit Code. The Playground will be opened automatically.

Make sure your App file has the following line at the top. If not, add it:

import { Data, animate, Override, Animatable } from "framer"

Note: (*) This code works with Framer v. 25 and the latest API version v. 1.0.7. While this code works, keep in mind that Framer is now encouraging users to use React Hooks functions instead of class components. Learn more at the new Framer API documentation pages.

We will declare a variable called contentScaleValue and indicate that it can be animated. Also, we will set the default toggle state as true.

//Value by default const contentScaleValue = Animatable(1); let toggle = true;

Then, we will create a function ResizeContent for the Content to be scaled when clicking the FAB. Besides that, we have to set its originX and originY as so it scales from top left.

//Assign to content export const ResizeContent: Override = props => {  return {    scale: contentScaleValue,    originX: 0,    originY: 0  }; };

Next, we will create a second function togglePosition for the FAB. We will say that onTap, if toggle is true, Content will be rescaled and the toggle state will change to false. Otherwise, do the reverse animation.

//Assign to FAB export const togglePosition: Override = props => {  return {    onTap: () => {      if (toggle) {        animate.ease(contentScaleValue, 0.9, {duration: 0.2});        toggle = false;      } else {        animate.ease(contentScaleValue, 1, {duration: 0.2});        toggle = true;      }    }  }; };

After writing this code, select the Frame you created on top of your Scroll components, go to the Override section in the properties panel and select File: App, Override: ResizeContent. Next, select the FAB, File: App, Override: togglePosition.

The Override is set to ResizeContent on the Scroll component. The Override is set to togglePosition on the FAB component.
Select the Frame on top of your Scroll components and set the Override as ResizeContent. Select the FAB and set the Override to togglePosition. (Large preview)

Check that the result works as the following.

The Content is resized when clicking the FAB in Preview Mode.
To preview the interaction, press Cmd + P. (Large preview)

Note: If you need it, download the source file for this step.

Prototyping

Go to the the Sketch file and import (copy and paste) the User profile artboard into Framer X. Once in Framer, duplicate the Frame. Give it the name Interactive_user_profile.

User profile artboard in Sketch and once imported in Framer X.
Copy your User profile artboard in Sketch and paste it into Framer X. Then duplicate your frame and give it the name ‘Interactive_user_profile’. (Large preview)

We will build automatic transitions for the right sidebar, the boxes at top and the content. Take each of the Frames out of the Interactive_user_profile frame.

Highlighting the elements that we will build the interaction for: right sidebar, boxes at top and content.
We will build automatic transitions for the right sidebar, the boxes at top and the content. (Large preview)

Create a Magic Move component for each of the elements and position them in the Interactive_user_profile frame.

Magic Move components for the elements are in Interactive_user_profile frame.
Create a Magic Move component for the elements to be animated. (Large preview)

Next, create a Master and two instances for each of the components. For the sidebar, position the first instance out of the Frame. For the boxes and the content, change the opacity of the first instance to 0.

A Master and two instances for each of the components. The opacity of the second instance is set to 0.
Create a Master and two instances for each of the components. (Large preview)

Connect the Magic Move component to each of the instances. Assign the first instance to the Initial State and the second instance to the Automatic State.

The Magic Move components are connected to the instances of the elements.
Connect the Magic Move components to the instances. (Large preview)

In the Properties panel, you can change the delay of each of the Move Magic components to set up the order to be shown. Assign the next delays:

  • Sidebar: no delay
  • First box: 0.4 delay
  • Second box: 0.6 delay
  • Third box: 0.8 delay
  • Content: 1 delay.
Selecting one of the boxes and setting a delay of 0.4.
Change the delay of the components in the Properties panel. (Large preview)

Go to the Interactive03 frame, select the header and Link to the Interactive_user_profile frame. In this frame, select the header and Link to Interactive frame. Remember to change the transition between the screens to Instant. Check the results.

Linking Interactive03 frame to Interactive_user_profile frame.
Prototyping with the Link tool. (Large preview)

Note: If you need it, download the source file for this step.

Clicking on the header leads you to User profile frame where the elements are displayed with an automatic animation.
Cmd + P to check the result. (Large preview)

Sharing The Prototype

To share the prototype, click File → Export Web Preview (Cmd + E). To see the prototype, open the index.html. It will launch the prototype in a web browser.

Conclusion And Takeaways

If you are looking for a design tool specialized in interaction, Framer X is the perfect one. Framer X allows you to build simple transitions between screens, micro interactions, but also to design complex interactions making use of React code.

By using Framer X, you will speed up your design process and will be able to better communicate the interaction of your designs to the team and stakeholders.

  • You can still design the interface in Sketch and paste your designs into Framer X to build the interaction of the elements there.
  • For this tutorial, I have have been using a design imported from Sketch, but you can create your layouts in Framer X as well.
  • There are multiple UI kits available in the Framer Store to help you build your design systems.
  • There is no single approach on how to build an interaction in Framer X. Experiment and learn.
  • To build some quick interactions faster, make use of the pre-built components in the Framer Store.
  • You just need a minimal coding knowledge in order to start building complex interactions in Framer X and there are multiple tutorials available online to start learning how to do it.
Smashing Editorial (mb, yk, il)


Articles on Smashing Magazine — For Web Designers And Developers

12 Jun

How To Start Using Sketch And Framer X

by TBSCategories: News

How To Start Using Sketch And Framer X

How To Start Using Sketch And Framer X

Martina Pérez

When it comes to showing the transition, interaction and animation of elements in the user interface, a prototyping tool like Framer X can make a difference in the way you communicate your vision to the team and stakeholders and as a result, boost your efficiency as a designer.

With the following example, I will illustrate how you can add interaction to static designs. To profit the most from this tutorial, some basic experience with Framer X are welcome.

To get started, you will need the following tools and assets:

Note: This tutorial is for designers using MacOS, as Framer X is for Mac (although this may change in the near future), and Sketch app is also only for Mac.

Bringing Your Designs From Sketch

We will bring our designs from Sketch into Framer X. You might also create your designs in Framer X as there is a full bunch of layout tools to do so, but there are some reasons whereby you can be interested in continuing designing your interfaces in Sketch:

  • You are used to Sketch and not willing to learn a new design tool.
  • You have already some designs in Sketch and you want to build the interaction for them.
  • Sketch works much better with large files. Framer X seems to have some problems when moving elements around.
  • Framer X is still in his early stages as a design tool and there are not many tutorials about how to create some elements of design. On the other hand, there are plenty of tutorials about Sketch and also many plugins such as the Craft plugin for Sketch which allows you to speed up your design process.
  • You will find many more web design resources for Sketch than for Framer X.
  • There is still a lack of tutorials about some of the options available in Framer X, especially about how to use the Code components.

So first of all, let’s create a new file in Framer X. The first thing we will do is to bring the design screen we have in Sketch into Framer X. To do so, just copy the Static artboard from Sketch and paste it in Framer X.

Layout in Sketch and the same layout in Framer X, once imported.
Copy your designs from Sketch and paste them into Framer X. (Large preview)

As you can see in the Layers panel, we’ve got the same layers we had in Sketch.

Note: Sometimes, when bringing your designs into Framer X, some properties may be lost — in this case, it’s the border radius of the thumbnails. This is because we used a Mask in Sketch and Framer X doesn’t recognize it. To solve this, you can either select the Group in Sketch and Flatten it to Bitmap before pasting it into Framer X, or once you have brought the design into Framer X, double-click to reach the Frame element and manually change the Radius in the Properties panel.

Organize The Layout In Framer

To work on the interaction of the elements in Framer X, we need to create a new Frame.

Note: A frame is similar to an Artboard in Sketch (or to the HTML <div> element), but is more powerful. Frames act more like containers as a frame can contain other frames.

To create a new Frame, go to the Layout tool panel, select Frame and drag and drop in any part of the canvas; or simply press F.

To create a Frame, select Frame and drag and drop in the canvas.
To create a new Frame, select Frame in the Layout tool panel. (Large preview)

Second, we will set a device for the Frame. Select the Frame and in the Properties panel, Device, choose Apple MacBook Pro.

Select a Frame, Device in the Properties panel and choose Apple MacBook Pro.
To set a device for a Frame, select a Device in the Properties panel. (Large preview)

Take a look at the Static frame we’ve imported. We will build the following interactions:

  • Header: Fade in when scrolling through the content.
  • Floating Action Button (FAB): Default, hover and pressed states.
  • Nav: It is displayed from right to left when clicking the FAB.
  • Content: It is resized when clicking the FAB.
Highlighting the elements we will build the interaction for: header, nav, FAB and content.
We will build interactions for the header, nav, FAB, and content. (Large preview)

First, create new Frames on top of the layers in such a way that you end up having one Frame for each of the abovemention interaction elements. For instance, we will add a new Frame to group all the layers that are part of the Header (Cmd + Enter) and name the Frame as header.

Select the elements of the header and add a Frame on top of them.
Group the layers to have one Frame for each of our interactive elements. (Large preview)

For the sake of clarity, change the name of the Apple MacBook Pro frame to Interactive. In the following section we will create a Scroll component.

Scroll Through The Content

First, we will duplicate (Cmd + D) the Content frame and take it out of the Static frame. Change the name of the new frame to i_content.

Content Frame has to be out of the Static frame.
Duplicate the Content frame and take it out of the Static frame. (Large preview)

Secondly, we will create a Scroll component in our Interactive frame. To do so, go to the Interactive tool panel and select Scroll. Drag and drop in any part of the Interactive frame.

In addition to that, modify the width of the Scroll component to 1141px (same as the Content) and position it in the same coordinates as the Content is on the Static frame (left: 149px, top: 140px). Apart from that, increase the height of the Scroll component as it reaches the bottom of the Interactive frame.

Position the Scroll component where it was on the Static frame.
Modify the width and height of the Scroll component and position it in the same coordinates as the Content frame. (Large preview)

Next, we will connect the Scroll component to our i_content. To do so, click on the connector and connect it to i_content.

Connect the Scroll component to the i_content.
Connect the Scroll component to the i_content. (Large preview)

Lastly, select the Interactive frame and Cmd + P to enter the Preview Mode. You should be able to scroll through the content now.

Scrolling through the page on Preview Mode.
To access to Preview Mode, press Cmd + P. (Large preview)

Next, I will explain how to position the Header and the FAB (Floating Action Button) button to make them fixed while scrolling with no need for any special coding.

Fixed Elements

We will position the elements so as they remain fixed when scrolling through the page. To that end, duplicate the Header frame and position it in the Interactive frame. As before, change the name to i_header. Do the same with the Floating Action Button button. Your Layers panel should look like this.

i_fab and i_header are in the Interactive frame.
Duplicate the Header and the FAB frames and position them within the Interactive frame. (Large preview)

As the Header and the FAB are out of the Scroll component, they will remain fixed while scrolling.

In Preview mode, Scroll through the content, whereas the header and FAB remain fixed.
You can scroll through the content, whereas the header and FAB remain fixed. (Large preview)

In the next section, I will explain how to build the transition of the Header.

Header Transition

To build the transition of the Header we will make use of the Scroll away component created by Lukas Guschlbauer. To start using this component, go to the Framer Store, search for Scroll and install the Scroll Away component.

Framer store where you can search the Scroll Away component.
Search for ‘Scroll’ in the Framer Store and install the Scroll Away component. (Large preview)

Next, go to the the Components panel, click the Scroll Away and drop it onto the canvas. Take the Header frame out of the Interactive frame and position the Scroll away component where the Header was. Change the component size as to be the same as the Header (1440x80px).

Now, select the Scroll Away component and connect it to your i_header frame. You can change multiple properties of the component such as alignment, effect, direction, easing or timing in the Properties panel. We will change the effect to Fade Move. Once that is done, the options below will change accordingly.

Applying the Fade Move effect in the Scroll Away component.
Take the Header frame out of the Interactive frame and change the effect to Fade Move. (Large preview)

For the effect to work, we need one more thing. Select the Scroll Away Component and click the Override in the Properties panel. Click File and select New File. Then, click Override and select useScrollData. Next, click the Scroll component of your Interactive frame. Click Override again and select getScrollData in Override. To preview the result, press Cmd + P.

Note: Overrides are a unique concept to Framer X. Code overrides are functions that allow components to communicate with each other. You can write them yourself in code and apply them to any Frame or component on your canvas. These functions allow you to override visual properties like opacity and fill, and allow for interactivity and animation. Code overrides can live in any code file in your project. Framer X interprets these based on the type. You can apply any code override to any Frame or component on the canvas by selecting Override from the Properties panel.

There is a white space at top when scrolling through the content in Preview Mode
The transition of the Header works, but there is a white space at the top. (Large preview)

The transition works, but you will notice that there is a white space at the top. This is because the Scroll component is positioned at y: 140. Let’s change this. Increase the height of the Scroll component to occupy the whole height of the Interactive frame. Next, go to your i_content frame and position the elements 140px from the top of the frame.

Positioning the content 140px from top in the i_content frame.
In the i_content frame, position the content 140px from top. (Large preview)

Your interaction should be now similar to this one.

Header goes away with Fade Move effect while scrolling through the content in Preview Mode.
Header transition when scrolling through the content. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to change the state of a button when interacting with it.

States For Buttons

In this section, we will work on the different states for the Floating Action Button (FAB). We will make use of the Magic Move component created by Henrique Gusso. So first of all, go to the Framer store and install this component. In the Components panel, select the component and drop it on the canvas.

At first, select the Floating Action Button frame and take it out of the Interactive frame. Next, position the Magic Move component where the FAB was. Change its size to 72×72px.

The i_fab is out of the Interactive frame and the Magic Move component is where the FAB was.
Take the FAB out of the Interactive frame and position the Magic Move component where the FAB was. (Large preview)

For some reason, the graphic imported from Sketch doesn’t work with this component, so we will create our own circle. In the i_fab frame, remove the frame that contains the graphic and create a circle with the same color and properties instead.

Detail of the layers of the i_fab frame.
Remove the graphic imported from Sketch and create your own circle. (Large preview)

For the different states of the FAB, we need to create a Master and three Instances (default, hover, and pressed states). To do so, select the i_FAB, right-click on it, and select Create component.

Right click on the i_fab, Create component to get a Master of the element.
To create a Master, select the i_fab frame, right-click, Create component. (Large preview)

Note: Design Components are similar to Symbols in Sketch. So if you want to create reusable components for your Design System this is a very useful tool. To change the properties of your instances all at once, just select the Master and modify the properties you want. For further information, take a look at the Framer X guide to create Design Components.

Now, duplicate the i_fab Master frame 3 times to get the instances. Change the name of the new frames to i_fab_default, i_fab_hover, and i_fab_pressed.

The Master and the three instances of the i_fab: default, hover and pressed.
To create the Instances for the states of the button, duplicate the Master 3 times. (Large preview)

Next, we need to connect the Magic Move component to the instances. Connect Initial to i_fab_default, Hover Start to i_fab_hover, Tap to i_fab_pressed and Hover End to i_fab_default.

Connect the Magic Move component in the Interactive frame to the instances: default, hover and pressed.
Connect the Magic Move component to the instances. (Large preview)

Finally, we have to go into each one of the states and change the color and scale. Go into the i_fab_hover and change its color to #2244BF. To do so, double click until you see the Fill option in the Properties panel. Next, go into the i_fab_pressed, reduce its size to 56px and change its color to #172E80. Check the result in the Preview Mode.

Note: If you see a black screen in the Preview Mode, check the compatibility of the component with your Framer Library Version. To do so, go to the page of the component in the Framer Store. If the package is not compatible with your version you will see a warning message. To change your Framer Library, navigate to File → Framer Library Version.

Different states of the FAB in Preview Mode while hovering and clicking it.
To access the Preview mode, press Cmd + P. (Large preview)

In the next section I will explain how to display the nav from right to left by clicking the FAB button.

Note: If you need it, download the source file for this step.

Open The Nav When Clicking A Button

Now, we will work on the interaction to display the Nav when clicking the FAB button. We will make use of the Link to and the Magic Move component again for the transition.

Go to the Static frame and duplicate the Nav frame. Position it in any part of the canvas and change its name to i_nav.

i_nav is out of the Static frame.
Duplicate the Nav frame, take it out of the Static frame and change its name to i_nav. (Large preview)

Now, we need to create two different states for the Nav. First, the initial state (no nav is shown) and second state, the nav is displayed. To do so, create a new Master with the i_nav (right-click and select Create component, or use the shortcut Cmd + K). Once you have the Master, duplicate two times to get the Instances. Name them i_nav_default and i_nav_displayed.

The master of i_nav with the two instances: default and displayed.
Duplicate the Master to get the instances of i_nav. (Large preview)

Next, position the elements of the i_nav_default out of the frame (Right: -80px).

i_nav_default is positioned out of the frame.
Position the i_nav_default out of the frame. (Large preview)

So, the Nav will be displayed automatically from right to left when clicking the FAB. To build this animation, we need to create a new Frame. Duplicate the Interactive frame. Change the name of the new Frame to Interactive02.

Interactive frame and its duplicate: Interactive02 frame.
Duplicate the Interactive frame. (Large preview)

To display the Nav in this new Frame we will create a new Magic Move component. The size (80x392px) and the position (Top: 140, Right: 0) need to be the same as the Nav.

Magic Move component in the Interactive02 frame.
Add a new Magic Move component in the Interactive02 frame. (Large preview)

Next, go to Interactive02 frame, select the Magic Move Component and connect it to the instances. i_nav_default to the Initital state and i_nav_displayed to the Automatic state. By doing so, when entering on this second Frame, the Nav will be displayed automatically.

Connect the Magic Move component in Interactive02 frame to the instances of the i_nav.
Connect the Magic Move component to the instances. (Large preview)

Now, we will build the interaction between screens by linking the Frames. Go to the Interactive frame, select the FAB, right-click → Add Frame. Change the name of the new frame to interactive_fab. Press L (Link to) and connect it to the Interactive02 frame.

Linking the FAB to Interactive02 frame.
On the Interactive frame, add a new Frame on top of the FAB and press L to connect it to the Interactive02 frame. (Large preview)

Change the transition to Instant and preview it. You can change the transition effect between screens in the Properties panel.

Select the FAB and changing the transition to Instant.
Change the transition to Instant. (Large preview)

If you go to Preview Mode you will see that the Nav is shown when clicking the FAB button, but we need to reverse the interaction when clicking again on it. To do so, duplicate the Interactive02 frame (give the name Interactive03 to the new Frame).

On Interactive03 frame, select the Magic Move component and assign i_nav_displayed to the Initial State and i_nav_default to the Automatic State.

Assigning states of the i_nav to the Magic Move Component on Interactive03 frame.
Assign i_nav_displayed to the Initial State and i_nav_default to Automatic state on Interactive03 frame. (Large preview)

Finally, press L (Link to) the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 frame to the Interactive02 frame. Remember to change the transition effect in the Link properties to Instant.

Linking screens with the FAB in Interactive02 frame and Interactive03 frame.
Link the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 to the Interactive02 frame. (Large preview)

Preview the interaction from the Interactive frame. The result should be as the one below:

When clicking the FAB button, the Nav is displayed from right to left.
When clicking the FAB button, the Nav is displayed from right to left. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to resize the content when clicking the FAB button.

Resize The Content When The Nav Is Displayed

To resize the content when the Nav is displayed we will write some React code. We will use Playground (a code editor integrated in Framer X) that allows you to play with some React and HTML code to build advanced animations.

Note: If you are not familiar with React, you may be interested in taking a look at some React tutorials.

So first, go to each of the interactive frames, select the Scroll component and add a Frame on top of it.

A Frame was added on top of the Scroll component.
Add a Frame on top of each of the Scroll components. (Large preview)

Next, go to the Properties panel and click Override. On File, select App. If you don’t see it, select New file. Then, click Edit Code. The Playground will be opened automatically.

Make sure your App file has the following line at the top. If not, add it:

import { Data, animate, Override, Animatable } from "framer"

Note: (*) This code works with Framer v. 25 and the latest API version v. 1.0.7. While this code works, keep in mind that Framer is now encouraging users to use React Hooks functions instead of class components. Learn more at the new Framer API documentation pages.

We will declare a variable called contentScaleValue and indicate that it can be animated. Also, we will set the default toggle state as true.

//Value by default const contentScaleValue = Animatable(1); let toggle = true;

Then, we will create a function ResizeContent for the Content to be scaled when clicking the FAB. Besides that, we have to set its originX and originY as so it scales from top left.

//Assign to content export const ResizeContent: Override = props => {  return {    scale: contentScaleValue,    originX: 0,    originY: 0  }; };

Next, we will create a second function togglePosition for the FAB. We will say that onTap, if toggle is true, Content will be rescaled and the toggle state will change to false. Otherwise, do the reverse animation.

//Assign to FAB export const togglePosition: Override = props => {  return {    onTap: () => {      if (toggle) {        animate.ease(contentScaleValue, 0.9, {duration: 0.2});        toggle = false;      } else {        animate.ease(contentScaleValue, 1, {duration: 0.2});        toggle = true;      }    }  }; };

After writing this code, select the Frame you created on top of your Scroll components, go to the Override section in the properties panel and select File: App, Override: ResizeContent. Next, select the FAB, File: App, Override: togglePosition.

The Override is set to ResizeContent on the Scroll component. The Override is set to togglePosition on the FAB component.
Select the Frame on top of your Scroll components and set the Override as ResizeContent. Select the FAB and set the Override to togglePosition. (Large preview)

Check that the result works as the following.

The Content is resized when clicking the FAB in Preview Mode.
To preview the interaction, press Cmd + P. (Large preview)

Note: If you need it, download the source file for this step.

Prototyping

Go to the the Sketch file and import (copy and paste) the User profile artboard into Framer X. Once in Framer, duplicate the Frame. Give it the name Interactive_user_profile.

User profile artboard in Sketch and once imported in Framer X.
Copy your User profile artboard in Sketch and paste it into Framer X. Then duplicate your frame and give it the name ‘Interactive_user_profile’. (Large preview)

We will build automatic transitions for the right sidebar, the boxes at top and the content. Take each of the Frames out of the Interactive_user_profile frame.

Highlighting the elements that we will build the interaction for: right sidebar, boxes at top and content.
We will build automatic transitions for the right sidebar, the boxes at top and the content. (Large preview)

Create a Magic Move component for each of the elements and position them in the Interactive_user_profile frame.

Magic Move components for the elements are in Interactive_user_profile frame.
Create a Magic Move component for the elements to be animated. (Large preview)

Next, create a Master and two instances for each of the components. For the sidebar, position the first instance out of the Frame. For the boxes and the content, change the opacity of the first instance to 0.

A Master and two instances for each of the components. The opacity of the second instance is set to 0.
Create a Master and two instances for each of the components. (Large preview)

Connect the Magic Move component to each of the instances. Assign the first instance to the Initial State and the second instance to the Automatic State.

The Magic Move components are connected to the instances of the elements.
Connect the Magic Move components to the instances. (Large preview)

In the Properties panel, you can change the delay of each of the Move Magic components to set up the order to be shown. Assign the next delays:

  • Sidebar: no delay
  • First box: 0.4 delay
  • Second box: 0.6 delay
  • Third box: 0.8 delay
  • Content: 1 delay.
Selecting one of the boxes and setting a delay of 0.4.
Change the delay of the components in the Properties panel. (Large preview)

Go to the Interactive03 frame, select the header and Link to the Interactive_user_profile frame. In this frame, select the header and Link to Interactive frame. Remember to change the transition between the screens to Instant. Check the results.

Linking Interactive03 frame to Interactive_user_profile frame.
Prototyping with the Link tool. (Large preview)

Note: If you need it, download the source file for this step.

Clicking on the header leads you to User profile frame where the elements are displayed with an automatic animation.
Cmd + P to check the result. (Large preview)

Sharing The Prototype

To share the prototype, click File → Export Web Preview (Cmd + E). To see the prototype, open the index.html. It will launch the prototype in a web browser.

Conclusion And Takeaways

If you are looking for a design tool specialized in interaction, Framer X is the perfect one. Framer X allows you to build simple transitions between screens, micro interactions, but also to design complex interactions making use of React code.

By using Framer X, you will speed up your design process and will be able to better communicate the interaction of your designs to the team and stakeholders.

  • You can still design the interface in Sketch and paste your designs into Framer X to build the interaction of the elements there.
  • For this tutorial, I have have been using a design imported from Sketch, but you can create your layouts in Framer X as well.
  • There are multiple UI kits available in the Framer Store to help you build your design systems.
  • There is no single approach on how to build an interaction in Framer X. Experiment and learn.
  • To build some quick interactions faster, make use of the pre-built components in the Framer Store.
  • You just need a minimal coding knowledge in order to start building complex interactions in Framer X and there are multiple tutorials available online to start learning how to do it.
Smashing Editorial (mb, yk, il)


Articles on Smashing Magazine — For Web Designers And Developers

12 Jun

How To Start Using Sketch And Framer X

by TBSCategories: News

How To Start Using Sketch And Framer X

How To Start Using Sketch And Framer X

Martina Pérez

When it comes to showing the transition, interaction and animation of elements in the user interface, a prototyping tool like Framer X can make a difference in the way you communicate your vision to the team and stakeholders and as a result, boost your efficiency as a designer.

With the following example, I will illustrate how you can add interaction to static designs. To profit the most from this tutorial, some basic experience with Framer X are welcome.

To get started, you will need the following tools and assets:

Note: This tutorial is for designers using MacOS, as Framer X is for Mac (although this may change in the near future), and Sketch app is also only for Mac.

Bringing Your Designs From Sketch

We will bring our designs from Sketch into Framer X. You might also create your designs in Framer X as there is a full bunch of layout tools to do so, but there are some reasons whereby you can be interested in continuing designing your interfaces in Sketch:

  • You are used to Sketch and not willing to learn a new design tool.
  • You have already some designs in Sketch and you want to build the interaction for them.
  • Sketch works much better with large files. Framer X seems to have some problems when moving elements around.
  • Framer X is still in his early stages as a design tool and there are not many tutorials about how to create some elements of design. On the other hand, there are plenty of tutorials about Sketch and also many plugins such as the Craft plugin for Sketch which allows you to speed up your design process.
  • You will find many more web design resources for Sketch than for Framer X.
  • There is still a lack of tutorials about some of the options available in Framer X, especially about how to use the Code components.

So first of all, let’s create a new file in Framer X. The first thing we will do is to bring the design screen we have in Sketch into Framer X. To do so, just copy the Static artboard from Sketch and paste it in Framer X.

Layout in Sketch and the same layout in Framer X, once imported.
Copy your designs from Sketch and paste them into Framer X. (Large preview)

As you can see in the Layers panel, we’ve got the same layers we had in Sketch.

Note: Sometimes, when bringing your designs into Framer X, some properties may be lost — in this case, it’s the border radius of the thumbnails. This is because we used a Mask in Sketch and Framer X doesn’t recognize it. To solve this, you can either select the Group in Sketch and Flatten it to Bitmap before pasting it into Framer X, or once you have brought the design into Framer X, double-click to reach the Frame element and manually change the Radius in the Properties panel.

Organize The Layout In Framer

To work on the interaction of the elements in Framer X, we need to create a new Frame.

Note: A frame is similar to an Artboard in Sketch (or to the HTML <div> element), but is more powerful. Frames act more like containers as a frame can contain other frames.

To create a new Frame, go to the Layout tool panel, select Frame and drag and drop in any part of the canvas; or simply press F.

To create a Frame, select Frame and drag and drop in the canvas.
To create a new Frame, select Frame in the Layout tool panel. (Large preview)

Second, we will set a device for the Frame. Select the Frame and in the Properties panel, Device, choose Apple MacBook Pro.

Select a Frame, Device in the Properties panel and choose Apple MacBook Pro.
To set a device for a Frame, select a Device in the Properties panel. (Large preview)

Take a look at the Static frame we’ve imported. We will build the following interactions:

  • Header: Fade in when scrolling through the content.
  • Floating Action Button (FAB): Default, hover and pressed states.
  • Nav: It is displayed from right to left when clicking the FAB.
  • Content: It is resized when clicking the FAB.
Highlighting the elements we will build the interaction for: header, nav, FAB and content.
We will build interactions for the header, nav, FAB, and content. (Large preview)

First, create new Frames on top of the layers in such a way that you end up having one Frame for each of the abovemention interaction elements. For instance, we will add a new Frame to group all the layers that are part of the Header (Cmd + Enter) and name the Frame as header.

Select the elements of the header and add a Frame on top of them.
Group the layers to have one Frame for each of our interactive elements. (Large preview)

For the sake of clarity, change the name of the Apple MacBook Pro frame to Interactive. In the following section we will create a Scroll component.

Scroll Through The Content

First, we will duplicate (Cmd + D) the Content frame and take it out of the Static frame. Change the name of the new frame to i_content.

Content Frame has to be out of the Static frame.
Duplicate the Content frame and take it out of the Static frame. (Large preview)

Secondly, we will create a Scroll component in our Interactive frame. To do so, go to the Interactive tool panel and select Scroll. Drag and drop in any part of the Interactive frame.

In addition to that, modify the width of the Scroll component to 1141px (same as the Content) and position it in the same coordinates as the Content is on the Static frame (left: 149px, top: 140px). Apart from that, increase the height of the Scroll component as it reaches the bottom of the Interactive frame.

Position the Scroll component where it was on the Static frame.
Modify the width and height of the Scroll component and position it in the same coordinates as the Content frame. (Large preview)

Next, we will connect the Scroll component to our i_content. To do so, click on the connector and connect it to i_content.

Connect the Scroll component to the i_content.
Connect the Scroll component to the i_content. (Large preview)

Lastly, select the Interactive frame and Cmd + P to enter the Preview Mode. You should be able to scroll through the content now.

Scrolling through the page on Preview Mode.
To access to Preview Mode, press Cmd + P. (Large preview)

Next, I will explain how to position the Header and the FAB (Floating Action Button) button to make them fixed while scrolling with no need for any special coding.

Fixed Elements

We will position the elements so as they remain fixed when scrolling through the page. To that end, duplicate the Header frame and position it in the Interactive frame. As before, change the name to i_header. Do the same with the Floating Action Button button. Your Layers panel should look like this.

i_fab and i_header are in the Interactive frame.
Duplicate the Header and the FAB frames and position them within the Interactive frame. (Large preview)

As the Header and the FAB are out of the Scroll component, they will remain fixed while scrolling.

In Preview mode, Scroll through the content, whereas the header and FAB remain fixed.
You can scroll through the content, whereas the header and FAB remain fixed. (Large preview)

In the next section, I will explain how to build the transition of the Header.

Header Transition

To build the transition of the Header we will make use of the Scroll away component created by Lukas Guschlbauer. To start using this component, go to the Framer Store, search for Scroll and install the Scroll Away component.

Framer store where you can search the Scroll Away component.
Search for ‘Scroll’ in the Framer Store and install the Scroll Away component. (Large preview)

Next, go to the the Components panel, click the Scroll Away and drop it onto the canvas. Take the Header frame out of the Interactive frame and position the Scroll away component where the Header was. Change the component size as to be the same as the Header (1440x80px).

Now, select the Scroll Away component and connect it to your i_header frame. You can change multiple properties of the component such as alignment, effect, direction, easing or timing in the Properties panel. We will change the effect to Fade Move. Once that is done, the options below will change accordingly.

Applying the Fade Move effect in the Scroll Away component.
Take the Header frame out of the Interactive frame and change the effect to Fade Move. (Large preview)

For the effect to work, we need one more thing. Select the Scroll Away Component and click the Override in the Properties panel. Click File and select New File. Then, click Override and select useScrollData. Next, click the Scroll component of your Interactive frame. Click Override again and select getScrollData in Override. To preview the result, press Cmd + P.

Note: Overrides are a unique concept to Framer X. Code overrides are functions that allow components to communicate with each other. You can write them yourself in code and apply them to any Frame or component on your canvas. These functions allow you to override visual properties like opacity and fill, and allow for interactivity and animation. Code overrides can live in any code file in your project. Framer X interprets these based on the type. You can apply any code override to any Frame or component on the canvas by selecting Override from the Properties panel.

There is a white space at top when scrolling through the content in Preview Mode
The transition of the Header works, but there is a white space at the top. (Large preview)

The transition works, but you will notice that there is a white space at the top. This is because the Scroll component is positioned at y: 140. Let’s change this. Increase the height of the Scroll component to occupy the whole height of the Interactive frame. Next, go to your i_content frame and position the elements 140px from the top of the frame.

Positioning the content 140px from top in the i_content frame.
In the i_content frame, position the content 140px from top. (Large preview)

Your interaction should be now similar to this one.

Header goes away with Fade Move effect while scrolling through the content in Preview Mode.
Header transition when scrolling through the content. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to change the state of a button when interacting with it.

States For Buttons

In this section, we will work on the different states for the Floating Action Button (FAB). We will make use of the Magic Move component created by Henrique Gusso. So first of all, go to the Framer store and install this component. In the Components panel, select the component and drop it on the canvas.

At first, select the Floating Action Button frame and take it out of the Interactive frame. Next, position the Magic Move component where the FAB was. Change its size to 72×72px.

The i_fab is out of the Interactive frame and the Magic Move component is where the FAB was.
Take the FAB out of the Interactive frame and position the Magic Move component where the FAB was. (Large preview)

For some reason, the graphic imported from Sketch doesn’t work with this component, so we will create our own circle. In the i_fab frame, remove the frame that contains the graphic and create a circle with the same color and properties instead.

Detail of the layers of the i_fab frame.
Remove the graphic imported from Sketch and create your own circle. (Large preview)

For the different states of the FAB, we need to create a Master and three Instances (default, hover, and pressed states). To do so, select the i_FAB, right-click on it, and select Create component.

Right click on the i_fab, Create component to get a Master of the element.
To create a Master, select the i_fab frame, right-click, Create component. (Large preview)

Note: Design Components are similar to Symbols in Sketch. So if you want to create reusable components for your Design System this is a very useful tool. To change the properties of your instances all at once, just select the Master and modify the properties you want. For further information, take a look at the Framer X guide to create Design Components.

Now, duplicate the i_fab Master frame 3 times to get the instances. Change the name of the new frames to i_fab_default, i_fab_hover, and i_fab_pressed.

The Master and the three instances of the i_fab: default, hover and pressed.
To create the Instances for the states of the button, duplicate the Master 3 times. (Large preview)

Next, we need to connect the Magic Move component to the instances. Connect Initial to i_fab_default, Hover Start to i_fab_hover, Tap to i_fab_pressed and Hover End to i_fab_default.

Connect the Magic Move component in the Interactive frame to the instances: default, hover and pressed.
Connect the Magic Move component to the instances. (Large preview)

Finally, we have to go into each one of the states and change the color and scale. Go into the i_fab_hover and change its color to #2244BF. To do so, double click until you see the Fill option in the Properties panel. Next, go into the i_fab_pressed, reduce its size to 56px and change its color to #172E80. Check the result in the Preview Mode.

Note: If you see a black screen in the Preview Mode, check the compatibility of the component with your Framer Library Version. To do so, go to the page of the component in the Framer Store. If the package is not compatible with your version you will see a warning message. To change your Framer Library, navigate to File → Framer Library Version.

Different states of the FAB in Preview Mode while hovering and clicking it.
To access the Preview mode, press Cmd + P. (Large preview)

In the next section I will explain how to display the nav from right to left by clicking the FAB button.

Note: If you need it, download the source file for this step.

Open The Nav When Clicking A Button

Now, we will work on the interaction to display the Nav when clicking the FAB button. We will make use of the Link to and the Magic Move component again for the transition.

Go to the Static frame and duplicate the Nav frame. Position it in any part of the canvas and change its name to i_nav.

i_nav is out of the Static frame.
Duplicate the Nav frame, take it out of the Static frame and change its name to i_nav. (Large preview)

Now, we need to create two different states for the Nav. First, the initial state (no nav is shown) and second state, the nav is displayed. To do so, create a new Master with the i_nav (right-click and select Create component, or use the shortcut Cmd + K). Once you have the Master, duplicate two times to get the Instances. Name them i_nav_default and i_nav_displayed.

The master of i_nav with the two instances: default and displayed.
Duplicate the Master to get the instances of i_nav. (Large preview)

Next, position the elements of the i_nav_default out of the frame (Right: -80px).

i_nav_default is positioned out of the frame.
Position the i_nav_default out of the frame. (Large preview)

So, the Nav will be displayed automatically from right to left when clicking the FAB. To build this animation, we need to create a new Frame. Duplicate the Interactive frame. Change the name of the new Frame to Interactive02.

Interactive frame and its duplicate: Interactive02 frame.
Duplicate the Interactive frame. (Large preview)

To display the Nav in this new Frame we will create a new Magic Move component. The size (80x392px) and the position (Top: 140, Right: 0) need to be the same as the Nav.

Magic Move component in the Interactive02 frame.
Add a new Magic Move component in the Interactive02 frame. (Large preview)

Next, go to Interactive02 frame, select the Magic Move Component and connect it to the instances. i_nav_default to the Initital state and i_nav_displayed to the Automatic state. By doing so, when entering on this second Frame, the Nav will be displayed automatically.

Connect the Magic Move component in Interactive02 frame to the instances of the i_nav.
Connect the Magic Move component to the instances. (Large preview)

Now, we will build the interaction between screens by linking the Frames. Go to the Interactive frame, select the FAB, right-click → Add Frame. Change the name of the new frame to interactive_fab. Press L (Link to) and connect it to the Interactive02 frame.

Linking the FAB to Interactive02 frame.
On the Interactive frame, add a new Frame on top of the FAB and press L to connect it to the Interactive02 frame. (Large preview)

Change the transition to Instant and preview it. You can change the transition effect between screens in the Properties panel.

Select the FAB and changing the transition to Instant.
Change the transition to Instant. (Large preview)

If you go to Preview Mode you will see that the Nav is shown when clicking the FAB button, but we need to reverse the interaction when clicking again on it. To do so, duplicate the Interactive02 frame (give the name Interactive03 to the new Frame).

On Interactive03 frame, select the Magic Move component and assign i_nav_displayed to the Initial State and i_nav_default to the Automatic State.

Assigning states of the i_nav to the Magic Move Component on Interactive03 frame.
Assign i_nav_displayed to the Initial State and i_nav_default to Automatic state on Interactive03 frame. (Large preview)

Finally, press L (Link to) the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 frame to the Interactive02 frame. Remember to change the transition effect in the Link properties to Instant.

Linking screens with the FAB in Interactive02 frame and Interactive03 frame.
Link the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 to the Interactive02 frame. (Large preview)

Preview the interaction from the Interactive frame. The result should be as the one below:

When clicking the FAB button, the Nav is displayed from right to left.
When clicking the FAB button, the Nav is displayed from right to left. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to resize the content when clicking the FAB button.

Resize The Content When The Nav Is Displayed

To resize the content when the Nav is displayed we will write some React code. We will use Playground (a code editor integrated in Framer X) that allows you to play with some React and HTML code to build advanced animations.

Note: If you are not familiar with React, you may be interested in taking a look at some React tutorials.

So first, go to each of the interactive frames, select the Scroll component and add a Frame on top of it.

A Frame was added on top of the Scroll component.
Add a Frame on top of each of the Scroll components. (Large preview)

Next, go to the Properties panel and click Override. On File, select App. If you don’t see it, select New file. Then, click Edit Code. The Playground will be opened automatically.

Make sure your App file has the following line at the top. If not, add it:

import { Data, animate, Override, Animatable } from "framer"

Note: (*) This code works with Framer v. 25 and the latest API version v. 1.0.7. While this code works, keep in mind that Framer is now encouraging users to use React Hooks functions instead of class components. Learn more at the new Framer API documentation pages.

We will declare a variable called contentScaleValue and indicate that it can be animated. Also, we will set the default toggle state as true.

//Value by default const contentScaleValue = Animatable(1); let toggle = true;

Then, we will create a function ResizeContent for the Content to be scaled when clicking the FAB. Besides that, we have to set its originX and originY as so it scales from top left.

//Assign to content export const ResizeContent: Override = props => {  return {    scale: contentScaleValue,    originX: 0,    originY: 0  }; };

Next, we will create a second function togglePosition for the FAB. We will say that onTap, if toggle is true, Content will be rescaled and the toggle state will change to false. Otherwise, do the reverse animation.

//Assign to FAB export const togglePosition: Override = props => {  return {    onTap: () => {      if (toggle) {        animate.ease(contentScaleValue, 0.9, {duration: 0.2});        toggle = false;      } else {        animate.ease(contentScaleValue, 1, {duration: 0.2});        toggle = true;      }    }  }; };

After writing this code, select the Frame you created on top of your Scroll components, go to the Override section in the properties panel and select File: App, Override: ResizeContent. Next, select the FAB, File: App, Override: togglePosition.

The Override is set to ResizeContent on the Scroll component. The Override is set to togglePosition on the FAB component.
Select the Frame on top of your Scroll components and set the Override as ResizeContent. Select the FAB and set the Override to togglePosition. (Large preview)

Check that the result works as the following.

The Content is resized when clicking the FAB in Preview Mode.
To preview the interaction, press Cmd + P. (Large preview)

Note: If you need it, download the source file for this step.

Prototyping

Go to the the Sketch file and import (copy and paste) the User profile artboard into Framer X. Once in Framer, duplicate the Frame. Give it the name Interactive_user_profile.

User profile artboard in Sketch and once imported in Framer X.
Copy your User profile artboard in Sketch and paste it into Framer X. Then duplicate your frame and give it the name ‘Interactive_user_profile’. (Large preview)

We will build automatic transitions for the right sidebar, the boxes at top and the content. Take each of the Frames out of the Interactive_user_profile frame.

Highlighting the elements that we will build the interaction for: right sidebar, boxes at top and content.
We will build automatic transitions for the right sidebar, the boxes at top and the content. (Large preview)

Create a Magic Move component for each of the elements and position them in the Interactive_user_profile frame.

Magic Move components for the elements are in Interactive_user_profile frame.
Create a Magic Move component for the elements to be animated. (Large preview)

Next, create a Master and two instances for each of the components. For the sidebar, position the first instance out of the Frame. For the boxes and the content, change the opacity of the first instance to 0.

A Master and two instances for each of the components. The opacity of the second instance is set to 0.
Create a Master and two instances for each of the components. (Large preview)

Connect the Magic Move component to each of the instances. Assign the first instance to the Initial State and the second instance to the Automatic State.

The Magic Move components are connected to the instances of the elements.
Connect the Magic Move components to the instances. (Large preview)

In the Properties panel, you can change the delay of each of the Move Magic components to set up the order to be shown. Assign the next delays:

  • Sidebar: no delay
  • First box: 0.4 delay
  • Second box: 0.6 delay
  • Third box: 0.8 delay
  • Content: 1 delay.
Selecting one of the boxes and setting a delay of 0.4.
Change the delay of the components in the Properties panel. (Large preview)

Go to the Interactive03 frame, select the header and Link to the Interactive_user_profile frame. In this frame, select the header and Link to Interactive frame. Remember to change the transition between the screens to Instant. Check the results.

Linking Interactive03 frame to Interactive_user_profile frame.
Prototyping with the Link tool. (Large preview)

Note: If you need it, download the source file for this step.

Clicking on the header leads you to User profile frame where the elements are displayed with an automatic animation.
Cmd + P to check the result. (Large preview)

Sharing The Prototype

To share the prototype, click File → Export Web Preview (Cmd + E). To see the prototype, open the index.html. It will launch the prototype in a web browser.

Conclusion And Takeaways

If you are looking for a design tool specialized in interaction, Framer X is the perfect one. Framer X allows you to build simple transitions between screens, micro interactions, but also to design complex interactions making use of React code.

By using Framer X, you will speed up your design process and will be able to better communicate the interaction of your designs to the team and stakeholders.

  • You can still design the interface in Sketch and paste your designs into Framer X to build the interaction of the elements there.
  • For this tutorial, I have have been using a design imported from Sketch, but you can create your layouts in Framer X as well.
  • There are multiple UI kits available in the Framer Store to help you build your design systems.
  • There is no single approach on how to build an interaction in Framer X. Experiment and learn.
  • To build some quick interactions faster, make use of the pre-built components in the Framer Store.
  • You just need a minimal coding knowledge in order to start building complex interactions in Framer X and there are multiple tutorials available online to start learning how to do it.
Smashing Editorial (mb, yk, il)


Articles on Smashing Magazine — For Web Designers And Developers

11 Jun

How To Start Using Sketch And Framer X

by TBSCategories: News

How To Start Using Sketch And Framer X

How To Start Using Sketch And Framer X

Martina Pérez

When it comes to showing the transition, interaction and animation of elements in the user interface, a prototyping tool like Framer X can make a difference in the way you communicate your vision to the team and stakeholders and as a result, boost your efficiency as a designer.

With the following example, I will illustrate how you can add interaction to static designs. To profit the most from this tutorial, some basic experience with Framer X are welcome.

To get started, you will need the following tools and assets:

Note: This tutorial is for designers using MacOS, as Framer X is for Mac (although this may change in the near future), and Sketch app is also only for Mac.

Bringing Your Designs From Sketch

We will bring our designs from Sketch into Framer X. You might also create your designs in Framer X as there is a full bunch of layout tools to do so, but there are some reasons whereby you can be interested in continuing designing your interfaces in Sketch:

  • You are used to Sketch and not willing to learn a new design tool.
  • You have already some designs in Sketch and you want to build the interaction for them.
  • Sketch works much better with large files. Framer X seems to have some problems when moving elements around.
  • Framer X is still in his early stages as a design tool and there are not many tutorials about how to create some elements of design. On the other hand, there are plenty of tutorials about Sketch and also many plugins such as the Craft plugin for Sketch which allows you to speed up your design process.
  • You will find many more web design resources for Sketch than for Framer X.
  • There is still a lack of tutorials about some of the options available in Framer X, especially about how to use the Code components.

So first of all, let’s create a new file in Framer X. The first thing we will do is to bring the design screen we have in Sketch into Framer X. To do so, just copy the Static artboard from Sketch and paste it in Framer X.

Layout in Sketch and the same layout in Framer X, once imported.
Copy your designs from Sketch and paste them into Framer X. (Large preview)

As you can see in the Layers panel, we’ve got the same layers we had in Sketch.

Note: Sometimes, when bringing your designs into Framer X, some properties may be lost — in this case, it’s the border radius of the thumbnails. This is because we used a Mask in Sketch and Framer X doesn’t recognize it. To solve this, you can either select the Group in Sketch and Flatten it to Bitmap before pasting it into Framer X, or once you have brought the design into Framer X, double-click to reach the Frame element and manually change the Radius in the Properties panel.

Organize The Layout In Framer

To work on the interaction of the elements in Framer X, we need to create a new Frame.

Note: A frame is similar to an Artboard in Sketch (or to the HTML <div> element), but is more powerful. Frames act more like containers as a frame can contain other frames.

To create a new Frame, go to the Layout tool panel, select Frame and drag and drop in any part of the canvas; or simply press F.

To create a Frame, select Frame and drag and drop in the canvas.
To create a new Frame, select Frame in the Layout tool panel. (Large preview)

Second, we will set a device for the Frame. Select the Frame and in the Properties panel, Device, choose Apple MacBook Pro.

Select a Frame, Device in the Properties panel and choose Apple MacBook Pro.
To set a device for a Frame, select a Device in the Properties panel. (Large preview)

Take a look at the Static frame we’ve imported. We will build the following interactions:

  • Header: Fade in when scrolling through the content.
  • Floating Action Button (FAB): Default, hover and pressed states.
  • Nav: It is displayed from right to left when clicking the FAB.
  • Content: It is resized when clicking the FAB.
Highlighting the elements we will build the interaction for: header, nav, FAB and content.
We will build interactions for the header, nav, FAB, and content. (Large preview)

First, create new Frames on top of the layers in such a way that you end up having one Frame for each of the abovemention interaction elements. For instance, we will add a new Frame to group all the layers that are part of the Header (Cmd + Enter) and name the Frame as header.

Select the elements of the header and add a Frame on top of them.
Group the layers to have one Frame for each of our interactive elements. (Large preview)

For the sake of clarity, change the name of the Apple MacBook Pro frame to Interactive. In the following section we will create a Scroll component.

Scroll Through The Content

First, we will duplicate (Cmd + D) the Content frame and take it out of the Static frame. Change the name of the new frame to i_content.

Content Frame has to be out of the Static frame.
Duplicate the Content frame and take it out of the Static frame. (Large preview)

Secondly, we will create a Scroll component in our Interactive frame. To do so, go to the Interactive tool panel and select Scroll. Drag and drop in any part of the Interactive frame.

In addition to that, modify the width of the Scroll component to 1141px (same as the Content) and position it in the same coordinates as the Content is on the Static frame (left: 149px, top: 140px). Apart from that, increase the height of the Scroll component as it reaches the bottom of the Interactive frame.

Position the Scroll component where it was on the Static frame.
Modify the width and height of the Scroll component and position it in the same coordinates as the Content frame. (Large preview)

Next, we will connect the Scroll component to our i_content. To do so, click on the connector and connect it to i_content.

Connect the Scroll component to the i_content.
Connect the Scroll component to the i_content. (Large preview)

Lastly, select the Interactive frame and Cmd + P to enter the Preview Mode. You should be able to scroll through the content now.

Scrolling through the page on Preview Mode.
To access to Preview Mode, press Cmd + P. (Large preview)

Next, I will explain how to position the Header and the FAB (Floating Action Button) button to make them fixed while scrolling with no need for any special coding.

Fixed Elements

We will position the elements so as they remain fixed when scrolling through the page. To that end, duplicate the Header frame and position it in the Interactive frame. As before, change the name to i_header. Do the same with the Floating Action Button button. Your Layers panel should look like this.

i_fab and i_header are in the Interactive frame.
Duplicate the Header and the FAB frames and position them within the Interactive frame. (Large preview)

As the Header and the FAB are out of the Scroll component, they will remain fixed while scrolling.

In Preview mode, Scroll through the content, whereas the header and FAB remain fixed.
You can scroll through the content, whereas the header and FAB remain fixed. (Large preview)

In the next section, I will explain how to build the transition of the Header.

Header Transition

To build the transition of the Header we will make use of the Scroll away component created by Lukas Guschlbauer. To start using this component, go to the Framer Store, search for Scroll and install the Scroll Away component.

Framer store where you can search the Scroll Away component.
Search for ‘Scroll’ in the Framer Store and install the Scroll Away component. (Large preview)

Next, go to the the Components panel, click the Scroll Away and drop it onto the canvas. Take the Header frame out of the Interactive frame and position the Scroll away component where the Header was. Change the component size as to be the same as the Header (1440x80px).

Now, select the Scroll Away component and connect it to your i_header frame. You can change multiple properties of the component such as alignment, effect, direction, easing or timing in the Properties panel. We will change the effect to Fade Move. Once that is done, the options below will change accordingly.

Applying the Fade Move effect in the Scroll Away component.
Take the Header frame out of the Interactive frame and change the effect to Fade Move. (Large preview)

For the effect to work, we need one more thing. Select the Scroll Away Component and click the Override in the Properties panel. Click File and select New File. Then, click Override and select useScrollData. Next, click the Scroll component of your Interactive frame. Click Override again and select getScrollData in Override. To preview the result, press Cmd + P.

Note: Overrides are a unique concept to Framer X. Code overrides are functions that allow components to communicate with each other. You can write them yourself in code and apply them to any Frame or component on your canvas. These functions allow you to override visual properties like opacity and fill, and allow for interactivity and animation. Code overrides can live in any code file in your project. Framer X interprets these based on the type. You can apply any code override to any Frame or component on the canvas by selecting Override from the Properties panel.

There is a white space at top when scrolling through the content in Preview Mode
The transition of the Header works, but there is a white space at the top. (Large preview)

The transition works, but you will notice that there is a white space at the top. This is because the Scroll component is positioned at y: 140. Let’s change this. Increase the height of the Scroll component to occupy the whole height of the Interactive frame. Next, go to your i_content frame and position the elements 140px from the top of the frame.

Positioning the content 140px from top in the i_content frame.
In the i_content frame, position the content 140px from top. (Large preview)

Your interaction should be now similar to this one.

Header goes away with Fade Move effect while scrolling through the content in Preview Mode.
Header transition when scrolling through the content. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to change the state of a button when interacting with it.

States For Buttons

In this section, we will work on the different states for the Floating Action Button (FAB). We will make use of the Magic Move component created by Henrique Gusso. So first of all, go to the Framer store and install this component. In the Components panel, select the component and drop it on the canvas.

At first, select the Floating Action Button frame and take it out of the Interactive frame. Next, position the Magic Move component where the FAB was. Change its size to 72×72px.

The i_fab is out of the Interactive frame and the Magic Move component is where the FAB was.
Take the FAB out of the Interactive frame and position the Magic Move component where the FAB was. (Large preview)

For some reason, the graphic imported from Sketch doesn’t work with this component, so we will create our own circle. In the i_fab frame, remove the frame that contains the graphic and create a circle with the same color and properties instead.

Detail of the layers of the i_fab frame.
Remove the graphic imported from Sketch and create your own circle. (Large preview)

For the different states of the FAB, we need to create a Master and three Instances (default, hover, and pressed states). To do so, select the i_FAB, right-click on it, and select Create component.

Right click on the i_fab, Create component to get a Master of the element.
To create a Master, select the i_fab frame, right-click, Create component. (Large preview)

Note: Design Components are similar to Symbols in Sketch. So if you want to create reusable components for your Design System this is a very useful tool. To change the properties of your instances all at once, just select the Master and modify the properties you want. For further information, take a look at the Framer X guide to create Design Components.

Now, duplicate the i_fab Master frame 3 times to get the instances. Change the name of the new frames to i_fab_default, i_fab_hover, and i_fab_pressed.

The Master and the three instances of the i_fab: default, hover and pressed.
To create the Instances for the states of the button, duplicate the Master 3 times. (Large preview)

Next, we need to connect the Magic Move component to the instances. Connect Initial to i_fab_default, Hover Start to i_fab_hover, Tap to i_fab_pressed and Hover End to i_fab_default.

Connect the Magic Move component in the Interactive frame to the instances: default, hover and pressed.
Connect the Magic Move component to the instances. (Large preview)

Finally, we have to go into each one of the states and change the color and scale. Go into the i_fab_hover and change its color to #2244BF. To do so, double click until you see the Fill option in the Properties panel. Next, go into the i_fab_pressed, reduce its size to 56px and change its color to #172E80. Check the result in the Preview Mode.

Note: If you see a black screen in the Preview Mode, check the compatibility of the component with your Framer Library Version. To do so, go to the page of the component in the Framer Store. If the package is not compatible with your version you will see a warning message. To change your Framer Library, navigate to File → Framer Library Version.

Different states of the FAB in Preview Mode while hovering and clicking it.
To access the Preview mode, press Cmd + P. (Large preview)

In the next section I will explain how to display the nav from right to left by clicking the FAB button.

Note: If you need it, download the source file for this step.

Open The Nav When Clicking A Button

Now, we will work on the interaction to display the Nav when clicking the FAB button. We will make use of the Link to and the Magic Move component again for the transition.

Go to the Static frame and duplicate the Nav frame. Position it in any part of the canvas and change its name to i_nav.

i_nav is out of the Static frame.
Duplicate the Nav frame, take it out of the Static frame and change its name to i_nav. (Large preview)

Now, we need to create two different states for the Nav. First, the initial state (no nav is shown) and second state, the nav is displayed. To do so, create a new Master with the i_nav (right-click and select Create component, or use the shortcut Cmd + K). Once you have the Master, duplicate two times to get the Instances. Name them i_nav_default and i_nav_displayed.

The master of i_nav with the two instances: default and displayed.
Duplicate the Master to get the instances of i_nav. (Large preview)

Next, position the elements of the i_nav_default out of the frame (Right: -80px).

i_nav_default is positioned out of the frame.
Position the i_nav_default out of the frame. (Large preview)

So, the Nav will be displayed automatically from right to left when clicking the FAB. To build this animation, we need to create a new Frame. Duplicate the Interactive frame. Change the name of the new Frame to Interactive02.

Interactive frame and its duplicate: Interactive02 frame.
Duplicate the Interactive frame. (Large preview)

To display the Nav in this new Frame we will create a new Magic Move component. The size (80x392px) and the position (Top: 140, Right: 0) need to be the same as the Nav.

Magic Move component in the Interactive02 frame.
Add a new Magic Move component in the Interactive02 frame. (Large preview)

Next, go to Interactive02 frame, select the Magic Move Component and connect it to the instances. i_nav_default to the Initital state and i_nav_displayed to the Automatic state. By doing so, when entering on this second Frame, the Nav will be displayed automatically.

Connect the Magic Move component in Interactive02 frame to the instances of the i_nav.
Connect the Magic Move component to the instances. (Large preview)

Now, we will build the interaction between screens by linking the Frames. Go to the Interactive frame, select the FAB, right-click → Add Frame. Change the name of the new frame to interactive_fab. Press L (Link to) and connect it to the Interactive02 frame.

Linking the FAB to Interactive02 frame.
On the Interactive frame, add a new Frame on top of the FAB and press L to connect it to the Interactive02 frame. (Large preview)

Change the transition to Instant and preview it. You can change the transition effect between screens in the Properties panel.

Select the FAB and changing the transition to Instant.
Change the transition to Instant. (Large preview)

If you go to Preview Mode you will see that the Nav is shown when clicking the FAB button, but we need to reverse the interaction when clicking again on it. To do so, duplicate the Interactive02 frame (give the name Interactive03 to the new Frame).

On Interactive03 frame, select the Magic Move component and assign i_nav_displayed to the Initial State and i_nav_default to the Automatic State.

Assigning states of the i_nav to the Magic Move Component on Interactive03 frame.
Assign i_nav_displayed to the Initial State and i_nav_default to Automatic state on Interactive03 frame. (Large preview)

Finally, press L (Link to) the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 frame to the Interactive02 frame. Remember to change the transition effect in the Link properties to Instant.

Linking screens with the FAB in Interactive02 frame and Interactive03 frame.
Link the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 to the Interactive02 frame. (Large preview)

Preview the interaction from the Interactive frame. The result should be as the one below:

When clicking the FAB button, the Nav is displayed from right to left.
When clicking the FAB button, the Nav is displayed from right to left. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to resize the content when clicking the FAB button.

Resize The Content When The Nav Is Displayed

To resize the content when the Nav is displayed we will write some React code. We will use Playground (a code editor integrated in Framer X) that allows you to play with some React and HTML code to build advanced animations.

Note: If you are not familiar with React, you may be interested in taking a look at some React tutorials.

So first, go to each of the interactive frames, select the Scroll component and add a Frame on top of it.

A Frame was added on top of the Scroll component.
Add a Frame on top of each of the Scroll components. (Large preview)

Next, go to the Properties panel and click Override. On File, select App. If you don’t see it, select New file. Then, click Edit Code. The Playground will be opened automatically.

Make sure your App file has the following line at the top. If not, add it:

import { Data, animate, Override, Animatable } from "framer"

Note: (*) This code works with Framer v. 25 and the latest API version v. 1.0.7. While this code works, keep in mind that Framer is now encouraging users to use React Hooks functions instead of class components. Learn more at the new Framer API documentation pages.

We will declare a variable called contentScaleValue and indicate that it can be animated. Also, we will set the default toggle state as true.

//Value by default const contentScaleValue = Animatable(1); let toggle = true;

Then, we will create a function ResizeContent for the Content to be scaled when clicking the FAB. Besides that, we have to set its originX and originY as so it scales from top left.

//Assign to content export const ResizeContent: Override = props => {  return {    scale: contentScaleValue,    originX: 0,    originY: 0  }; };

Next, we will create a second function togglePosition for the FAB. We will say that onTap, if toggle is true, Content will be rescaled and the toggle state will change to false. Otherwise, do the reverse animation.

//Assign to FAB export const togglePosition: Override = props => {  return {    onTap: () => {      if (toggle) {        animate.ease(contentScaleValue, 0.9, {duration: 0.2});        toggle = false;      } else {        animate.ease(contentScaleValue, 1, {duration: 0.2});        toggle = true;      }    }  }; };

After writing this code, select the Frame you created on top of your Scroll components, go to the Override section in the properties panel and select File: App, Override: ResizeContent. Next, select the FAB, File: App, Override: togglePosition.

The Override is set to ResizeContent on the Scroll component. The Override is set to togglePosition on the FAB component.
Select the Frame on top of your Scroll components and set the Override as ResizeContent. Select the FAB and set the Override to togglePosition. (Large preview)

Check that the result works as the following.

The Content is resized when clicking the FAB in Preview Mode.
To preview the interaction, press Cmd + P. (Large preview)

Note: If you need it, download the source file for this step.

Prototyping

Go to the the Sketch file and import (copy and paste) the User profile artboard into Framer X. Once in Framer, duplicate the Frame. Give it the name Interactive_user_profile.

User profile artboard in Sketch and once imported in Framer X.
Copy your User profile artboard in Sketch and paste it into Framer X. Then duplicate your frame and give it the name ‘Interactive_user_profile’. (Large preview)

We will build automatic transitions for the right sidebar, the boxes at top and the content. Take each of the Frames out of the Interactive_user_profile frame.

Highlighting the elements that we will build the interaction for: right sidebar, boxes at top and content.
We will build automatic transitions for the right sidebar, the boxes at top and the content. (Large preview)

Create a Magic Move component for each of the elements and position them in the Interactive_user_profile frame.

Magic Move components for the elements are in Interactive_user_profile frame.
Create a Magic Move component for the elements to be animated. (Large preview)

Next, create a Master and two instances for each of the components. For the sidebar, position the first instance out of the Frame. For the boxes and the content, change the opacity of the first instance to 0.

A Master and two instances for each of the components. The opacity of the second instance is set to 0.
Create a Master and two instances for each of the components. (Large preview)

Connect the Magic Move component to each of the instances. Assign the first instance to the Initial State and the second instance to the Automatic State.

The Magic Move components are connected to the instances of the elements.
Connect the Magic Move components to the instances. (Large preview)

In the Properties panel, you can change the delay of each of the Move Magic components to set up the order to be shown. Assign the next delays:

  • Sidebar: no delay
  • First box: 0.4 delay
  • Second box: 0.6 delay
  • Third box: 0.8 delay
  • Content: 1 delay.
Selecting one of the boxes and setting a delay of 0.4.
Change the delay of the components in the Properties panel. (Large preview)

Go to the Interactive03 frame, select the header and Link to the Interactive_user_profile frame. In this frame, select the header and Link to Interactive frame. Remember to change the transition between the screens to Instant. Check the results.

Linking Interactive03 frame to Interactive_user_profile frame.
Prototyping with the Link tool. (Large preview)

Note: If you need it, download the source file for this step.

Clicking on the header leads you to User profile frame where the elements are displayed with an automatic animation.
Cmd + P to check the result. (Large preview)

Sharing The Prototype

To share the prototype, click File → Export Web Preview (Cmd + E). To see the prototype, open the index.html. It will launch the prototype in a web browser.

Conclusion And Takeaways

If you are looking for a design tool specialized in interaction, Framer X is the perfect one. Framer X allows you to build simple transitions between screens, micro interactions, but also to design complex interactions making use of React code.

By using Framer X, you will speed up your design process and will be able to better communicate the interaction of your designs to the team and stakeholders.

  • You can still design the interface in Sketch and paste your designs into Framer X to build the interaction of the elements there.
  • For this tutorial, I have have been using a design imported from Sketch, but you can create your layouts in Framer X as well.
  • There are multiple UI kits available in the Framer Store to help you build your design systems.
  • There is no single approach on how to build an interaction in Framer X. Experiment and learn.
  • To build some quick interactions faster, make use of the pre-built components in the Framer Store.
  • You just need a minimal coding knowledge in order to start building complex interactions in Framer X and there are multiple tutorials available online to start learning how to do it.
Smashing Editorial (mb, yk, il)


Articles on Smashing Magazine — For Web Designers And Developers

11 Jun

How To Start Using Sketch And Framer X

by TBSCategories: News

How To Start Using Sketch And Framer X

How To Start Using Sketch And Framer X

Martina Pérez

When it comes to showing the transition, interaction and animation of elements in the user interface, a prototyping tool like Framer X can make a difference in the way you communicate your vision to the team and stakeholders and as a result, boost your efficiency as a designer.

With the following example, I will illustrate how you can add interaction to static designs. To profit the most from this tutorial, some basic experience with Framer X are welcome.

To get started, you will need the following tools and assets:

Note: This tutorial is for designers using MacOS, as Framer X is for Mac (although this may change in the near future), and Sketch app is also only for Mac.

Bringing Your Designs From Sketch

We will bring our designs from Sketch into Framer X. You might also create your designs in Framer X as there is a full bunch of layout tools to do so, but there are some reasons whereby you can be interested in continuing designing your interfaces in Sketch:

  • You are used to Sketch and not willing to learn a new design tool.
  • You have already some designs in Sketch and you want to build the interaction for them.
  • Sketch works much better with large files. Framer X seems to have some problems when moving elements around.
  • Framer X is still in his early stages as a design tool and there are not many tutorials about how to create some elements of design. On the other hand, there are plenty of tutorials about Sketch and also many plugins such as the Craft plugin for Sketch which allows you to speed up your design process.
  • You will find many more web design resources for Sketch than for Framer X.
  • There is still a lack of tutorials about some of the options available in Framer X, especially about how to use the Code components.

So first of all, let’s create a new file in Framer X. The first thing we will do is to bring the design screen we have in Sketch into Framer X. To do so, just copy the Static artboard from Sketch and paste it in Framer X.

Layout in Sketch and the same layout in Framer X, once imported.
Copy your designs from Sketch and paste them into Framer X. (Large preview)

As you can see in the Layers panel, we’ve got the same layers we had in Sketch.

Note: Sometimes, when bringing your designs into Framer X, some properties may be lost — in this case, it’s the border radius of the thumbnails. This is because we used a Mask in Sketch and Framer X doesn’t recognize it. To solve this, you can either select the Group in Sketch and Flatten it to Bitmap before pasting it into Framer X, or once you have brought the design into Framer X, double-click to reach the Frame element and manually change the Radius in the Properties panel.

Organize The Layout In Framer

To work on the interaction of the elements in Framer X, we need to create a new Frame.

Note: A frame is similar to an Artboard in Sketch (or to the HTML <div> element), but is more powerful. Frames act more like containers as a frame can contain other frames.

To create a new Frame, go to the Layout tool panel, select Frame and drag and drop in any part of the canvas; or simply press F.

To create a Frame, select Frame and drag and drop in the canvas.
To create a new Frame, select Frame in the Layout tool panel. (Large preview)

Second, we will set a device for the Frame. Select the Frame and in the Properties panel, Device, choose Apple MacBook Pro.

Select a Frame, Device in the Properties panel and choose Apple MacBook Pro.
To set a device for a Frame, select a Device in the Properties panel. (Large preview)

Take a look at the Static frame we’ve imported. We will build the following interactions:

  • Header: Fade in when scrolling through the content.
  • Floating Action Button (FAB): Default, hover and pressed states.
  • Nav: It is displayed from right to left when clicking the FAB.
  • Content: It is resized when clicking the FAB.
Highlighting the elements we will build the interaction for: header, nav, FAB and content.
We will build interactions for the header, nav, FAB, and content. (Large preview)

First, create new Frames on top of the layers in such a way that you end up having one Frame for each of the abovemention interaction elements. For instance, we will add a new Frame to group all the layers that are part of the Header (Cmd + Enter) and name the Frame as header.

Select the elements of the header and add a Frame on top of them.
Group the layers to have one Frame for each of our interactive elements. (Large preview)

For the sake of clarity, change the name of the Apple MacBook Pro frame to Interactive. In the following section we will create a Scroll component.

Scroll Through The Content

First, we will duplicate (Cmd + D) the Content frame and take it out of the Static frame. Change the name of the new frame to i_content.

Content Frame has to be out of the Static frame.
Duplicate the Content frame and take it out of the Static frame. (Large preview)

Secondly, we will create a Scroll component in our Interactive frame. To do so, go to the Interactive tool panel and select Scroll. Drag and drop in any part of the Interactive frame.

In addition to that, modify the width of the Scroll component to 1141px (same as the Content) and position it in the same coordinates as the Content is on the Static frame (left: 149px, top: 140px). Apart from that, increase the height of the Scroll component as it reaches the bottom of the Interactive frame.

Position the Scroll component where it was on the Static frame.
Modify the width and height of the Scroll component and position it in the same coordinates as the Content frame. (Large preview)

Next, we will connect the Scroll component to our i_content. To do so, click on the connector and connect it to i_content.

Connect the Scroll component to the i_content.
Connect the Scroll component to the i_content. (Large preview)

Lastly, select the Interactive frame and Cmd + P to enter the Preview Mode. You should be able to scroll through the content now.

Scrolling through the page on Preview Mode.
To access to Preview Mode, press Cmd + P. (Large preview)

Next, I will explain how to position the Header and the FAB (Floating Action Button) button to make them fixed while scrolling with no need for any special coding.

Fixed Elements

We will position the elements so as they remain fixed when scrolling through the page. To that end, duplicate the Header frame and position it in the Interactive frame. As before, change the name to i_header. Do the same with the Floating Action Button button. Your Layers panel should look like this.

i_fab and i_header are in the Interactive frame.
Duplicate the Header and the FAB frames and position them within the Interactive frame. (Large preview)

As the Header and the FAB are out of the Scroll component, they will remain fixed while scrolling.

In Preview mode, Scroll through the content, whereas the header and FAB remain fixed.
You can scroll through the content, whereas the header and FAB remain fixed. (Large preview)

In the next section, I will explain how to build the transition of the Header.

Header Transition

To build the transition of the Header we will make use of the Scroll away component created by Lukas Guschlbauer. To start using this component, go to the Framer Store, search for Scroll and install the Scroll Away component.

Framer store where you can search the Scroll Away component.
Search for ‘Scroll’ in the Framer Store and install the Scroll Away component. (Large preview)

Next, go to the the Components panel, click the Scroll Away and drop it onto the canvas. Take the Header frame out of the Interactive frame and position the Scroll away component where the Header was. Change the component size as to be the same as the Header (1440x80px).

Now, select the Scroll Away component and connect it to your i_header frame. You can change multiple properties of the component such as alignment, effect, direction, easing or timing in the Properties panel. We will change the effect to Fade Move. Once that is done, the options below will change accordingly.

Applying the Fade Move effect in the Scroll Away component.
Take the Header frame out of the Interactive frame and change the effect to Fade Move. (Large preview)

For the effect to work, we need one more thing. Select the Scroll Away Component and click the Override in the Properties panel. Click File and select New File. Then, click Override and select useScrollData. Next, click the Scroll component of your Interactive frame. Click Override again and select getScrollData in Override. To preview the result, press Cmd + P.

Note: Overrides are a unique concept to Framer X. Code overrides are functions that allow components to communicate with each other. You can write them yourself in code and apply them to any Frame or component on your canvas. These functions allow you to override visual properties like opacity and fill, and allow for interactivity and animation. Code overrides can live in any code file in your project. Framer X interprets these based on the type. You can apply any code override to any Frame or component on the canvas by selecting Override from the Properties panel.

There is a white space at top when scrolling through the content in Preview Mode
The transition of the Header works, but there is a white space at the top. (Large preview)

The transition works, but you will notice that there is a white space at the top. This is because the Scroll component is positioned at y: 140. Let’s change this. Increase the height of the Scroll component to occupy the whole height of the Interactive frame. Next, go to your i_content frame and position the elements 140px from the top of the frame.

Positioning the content 140px from top in the i_content frame.
In the i_content frame, position the content 140px from top. (Large preview)

Your interaction should be now similar to this one.

Header goes away with Fade Move effect while scrolling through the content in Preview Mode.
Header transition when scrolling through the content. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to change the state of a button when interacting with it.

States For Buttons

In this section, we will work on the different states for the Floating Action Button (FAB). We will make use of the Magic Move component created by Henrique Gusso. So first of all, go to the Framer store and install this component. In the Components panel, select the component and drop it on the canvas.

At first, select the Floating Action Button frame and take it out of the Interactive frame. Next, position the Magic Move component where the FAB was. Change its size to 72×72px.

The i_fab is out of the Interactive frame and the Magic Move component is where the FAB was.
Take the FAB out of the Interactive frame and position the Magic Move component where the FAB was. (Large preview)

For some reason, the graphic imported from Sketch doesn’t work with this component, so we will create our own circle. In the i_fab frame, remove the frame that contains the graphic and create a circle with the same color and properties instead.

Detail of the layers of the i_fab frame.
Remove the graphic imported from Sketch and create your own circle. (Large preview)

For the different states of the FAB, we need to create a Master and three Instances (default, hover, and pressed states). To do so, select the i_FAB, right-click on it, and select Create component.

Right click on the i_fab, Create component to get a Master of the element.
To create a Master, select the i_fab frame, right-click, Create component. (Large preview)

Note: Design Components are similar to Symbols in Sketch. So if you want to create reusable components for your Design System this is a very useful tool. To change the properties of your instances all at once, just select the Master and modify the properties you want. For further information, take a look at the Framer X guide to create Design Components.

Now, duplicate the i_fab Master frame 3 times to get the instances. Change the name of the new frames to i_fab_default, i_fab_hover, and i_fab_pressed.

The Master and the three instances of the i_fab: default, hover and pressed.
To create the Instances for the states of the button, duplicate the Master 3 times. (Large preview)

Next, we need to connect the Magic Move component to the instances. Connect Initial to i_fab_default, Hover Start to i_fab_hover, Tap to i_fab_pressed and Hover End to i_fab_default.

Connect the Magic Move component in the Interactive frame to the instances: default, hover and pressed.
Connect the Magic Move component to the instances. (Large preview)

Finally, we have to go into each one of the states and change the color and scale. Go into the i_fab_hover and change its color to #2244BF. To do so, double click until you see the Fill option in the Properties panel. Next, go into the i_fab_pressed, reduce its size to 56px and change its color to #172E80. Check the result in the Preview Mode.

Note: If you see a black screen in the Preview Mode, check the compatibility of the component with your Framer Library Version. To do so, go to the page of the component in the Framer Store. If the package is not compatible with your version you will see a warning message. To change your Framer Library, navigate to File → Framer Library Version.

Different states of the FAB in Preview Mode while hovering and clicking it.
To access the Preview mode, press Cmd + P. (Large preview)

In the next section I will explain how to display the nav from right to left by clicking the FAB button.

Note: If you need it, download the source file for this step.

Open The Nav When Clicking A Button

Now, we will work on the interaction to display the Nav when clicking the FAB button. We will make use of the Link to and the Magic Move component again for the transition.

Go to the Static frame and duplicate the Nav frame. Position it in any part of the canvas and change its name to i_nav.

i_nav is out of the Static frame.
Duplicate the Nav frame, take it out of the Static frame and change its name to i_nav. (Large preview)

Now, we need to create two different states for the Nav. First, the initial state (no nav is shown) and second state, the nav is displayed. To do so, create a new Master with the i_nav (right-click and select Create component, or use the shortcut Cmd + K). Once you have the Master, duplicate two times to get the Instances. Name them i_nav_default and i_nav_displayed.

The master of i_nav with the two instances: default and displayed.
Duplicate the Master to get the instances of i_nav. (Large preview)

Next, position the elements of the i_nav_default out of the frame (Right: -80px).

i_nav_default is positioned out of the frame.
Position the i_nav_default out of the frame. (Large preview)

So, the Nav will be displayed automatically from right to left when clicking the FAB. To build this animation, we need to create a new Frame. Duplicate the Interactive frame. Change the name of the new Frame to Interactive02.

Interactive frame and its duplicate: Interactive02 frame.
Duplicate the Interactive frame. (Large preview)

To display the Nav in this new Frame we will create a new Magic Move component. The size (80x392px) and the position (Top: 140, Right: 0) need to be the same as the Nav.

Magic Move component in the Interactive02 frame.
Add a new Magic Move component in the Interactive02 frame. (Large preview)

Next, go to Interactive02 frame, select the Magic Move Component and connect it to the instances. i_nav_default to the Initital state and i_nav_displayed to the Automatic state. By doing so, when entering on this second Frame, the Nav will be displayed automatically.

Connect the Magic Move component in Interactive02 frame to the instances of the i_nav.
Connect the Magic Move component to the instances. (Large preview)

Now, we will build the interaction between screens by linking the Frames. Go to the Interactive frame, select the FAB, right-click → Add Frame. Change the name of the new frame to interactive_fab. Press L (Link to) and connect it to the Interactive02 frame.

Linking the FAB to Interactive02 frame.
On the Interactive frame, add a new Frame on top of the FAB and press L to connect it to the Interactive02 frame. (Large preview)

Change the transition to Instant and preview it. You can change the transition effect between screens in the Properties panel.

Select the FAB and changing the transition to Instant.
Change the transition to Instant. (Large preview)

If you go to Preview Mode you will see that the Nav is shown when clicking the FAB button, but we need to reverse the interaction when clicking again on it. To do so, duplicate the Interactive02 frame (give the name Interactive03 to the new Frame).

On Interactive03 frame, select the Magic Move component and assign i_nav_displayed to the Initial State and i_nav_default to the Automatic State.

Assigning states of the i_nav to the Magic Move Component on Interactive03 frame.
Assign i_nav_displayed to the Initial State and i_nav_default to Automatic state on Interactive03 frame. (Large preview)

Finally, press L (Link to) the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 frame to the Interactive02 frame. Remember to change the transition effect in the Link properties to Instant.

Linking screens with the FAB in Interactive02 frame and Interactive03 frame.
Link the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 to the Interactive02 frame. (Large preview)

Preview the interaction from the Interactive frame. The result should be as the one below:

When clicking the FAB button, the Nav is displayed from right to left.
When clicking the FAB button, the Nav is displayed from right to left. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to resize the content when clicking the FAB button.

Resize The Content When The Nav Is Displayed

To resize the content when the Nav is displayed we will write some React code. We will use Playground (a code editor integrated in Framer X) that allows you to play with some React and HTML code to build advanced animations.

Note: If you are not familiar with React, you may be interested in taking a look at some React tutorials.

So first, go to each of the interactive frames, select the Scroll component and add a Frame on top of it.

A Frame was added on top of the Scroll component.
Add a Frame on top of each of the Scroll components. (Large preview)

Next, go to the Properties panel and click Override. On File, select App. If you don’t see it, select New file. Then, click Edit Code. The Playground will be opened automatically.

Make sure your App file has the following line at the top. If not, add it:

import { Data, animate, Override, Animatable } from "framer"

Note: (*) This code works with Framer v. 25 and the latest API version v. 1.0.7. While this code works, keep in mind that Framer is now encouraging users to use React Hooks functions instead of class components. Learn more at the new Framer API documentation pages.

We will declare a variable called contentScaleValue and indicate that it can be animated. Also, we will set the default toggle state as true.

//Value by default const contentScaleValue = Animatable(1); let toggle = true;

Then, we will create a function ResizeContent for the Content to be scaled when clicking the FAB. Besides that, we have to set its originX and originY as so it scales from top left.

//Assign to content export const ResizeContent: Override = props => {  return {    scale: contentScaleValue,    originX: 0,    originY: 0  }; };

Next, we will create a second function togglePosition for the FAB. We will say that onTap, if toggle is true, Content will be rescaled and the toggle state will change to false. Otherwise, do the reverse animation.

//Assign to FAB export const togglePosition: Override = props => {  return {    onTap: () => {      if (toggle) {        animate.ease(contentScaleValue, 0.9, {duration: 0.2});        toggle = false;      } else {        animate.ease(contentScaleValue, 1, {duration: 0.2});        toggle = true;      }    }  }; };

After writing this code, select the Frame you created on top of your Scroll components, go to the Override section in the properties panel and select File: App, Override: ResizeContent. Next, select the FAB, File: App, Override: togglePosition.

The Override is set to ResizeContent on the Scroll component. The Override is set to togglePosition on the FAB component.
Select the Frame on top of your Scroll components and set the Override as ResizeContent. Select the FAB and set the Override to togglePosition. (Large preview)

Check that the result works as the following.

The Content is resized when clicking the FAB in Preview Mode.
To preview the interaction, press Cmd + P. (Large preview)

Note: If you need it, download the source file for this step.

Prototyping

Go to the the Sketch file and import (copy and paste) the User profile artboard into Framer X. Once in Framer, duplicate the Frame. Give it the name Interactive_user_profile.

User profile artboard in Sketch and once imported in Framer X.
Copy your User profile artboard in Sketch and paste it into Framer X. Then duplicate your frame and give it the name ‘Interactive_user_profile’. (Large preview)

We will build automatic transitions for the right sidebar, the boxes at top and the content. Take each of the Frames out of the Interactive_user_profile frame.

Highlighting the elements that we will build the interaction for: right sidebar, boxes at top and content.
We will build automatic transitions for the right sidebar, the boxes at top and the content. (Large preview)

Create a Magic Move component for each of the elements and position them in the Interactive_user_profile frame.

Magic Move components for the elements are in Interactive_user_profile frame.
Create a Magic Move component for the elements to be animated. (Large preview)

Next, create a Master and two instances for each of the components. For the sidebar, position the first instance out of the Frame. For the boxes and the content, change the opacity of the first instance to 0.

A Master and two instances for each of the components. The opacity of the second instance is set to 0.
Create a Master and two instances for each of the components. (Large preview)

Connect the Magic Move component to each of the instances. Assign the first instance to the Initial State and the second instance to the Automatic State.

The Magic Move components are connected to the instances of the elements.
Connect the Magic Move components to the instances. (Large preview)

In the Properties panel, you can change the delay of each of the Move Magic components to set up the order to be shown. Assign the next delays:

  • Sidebar: no delay
  • First box: 0.4 delay
  • Second box: 0.6 delay
  • Third box: 0.8 delay
  • Content: 1 delay.
Selecting one of the boxes and setting a delay of 0.4.
Change the delay of the components in the Properties panel. (Large preview)

Go to the Interactive03 frame, select the header and Link to the Interactive_user_profile frame. In this frame, select the header and Link to Interactive frame. Remember to change the transition between the screens to Instant. Check the results.

Linking Interactive03 frame to Interactive_user_profile frame.
Prototyping with the Link tool. (Large preview)

Note: If you need it, download the source file for this step.

Clicking on the header leads you to User profile frame where the elements are displayed with an automatic animation.
Cmd + P to check the result. (Large preview)

Sharing The Prototype

To share the prototype, click File → Export Web Preview (Cmd + E). To see the prototype, open the index.html. It will launch the prototype in a web browser.

Conclusion And Takeaways

If you are looking for a design tool specialized in interaction, Framer X is the perfect one. Framer X allows you to build simple transitions between screens, micro interactions, but also to design complex interactions making use of React code.

By using Framer X, you will speed up your design process and will be able to better communicate the interaction of your designs to the team and stakeholders.

  • You can still design the interface in Sketch and paste your designs into Framer X to build the interaction of the elements there.
  • For this tutorial, I have have been using a design imported from Sketch, but you can create your layouts in Framer X as well.
  • There are multiple UI kits available in the Framer Store to help you build your design systems.
  • There is no single approach on how to build an interaction in Framer X. Experiment and learn.
  • To build some quick interactions faster, make use of the pre-built components in the Framer Store.
  • You just need a minimal coding knowledge in order to start building complex interactions in Framer X and there are multiple tutorials available online to start learning how to do it.
Smashing Editorial (mb, yk, il)


Articles on Smashing Magazine — For Web Designers And Developers

11 Jun

How To Start Using Sketch And Framer X

by TBSCategories: News

How To Start Using Sketch And Framer X

How To Start Using Sketch And Framer X

Martina Pérez

When it comes to showing the transition, interaction and animation of elements in the user interface, a prototyping tool like Framer X can make a difference in the way you communicate your vision to the team and stakeholders and as a result, boost your efficiency as a designer.

With the following example, I will illustrate how you can add interaction to static designs. To profit the most from this tutorial, some basic experience with Framer X are welcome.

To get started, you will need the following tools and assets:

Note: This tutorial is for designers using MacOS, as Framer X is for Mac (although this may change in the near future), and Sketch app is also only for Mac.

Bringing Your Designs From Sketch

We will bring our designs from Sketch into Framer X. You might also create your designs in Framer X as there is a full bunch of layout tools to do so, but there are some reasons whereby you can be interested in continuing designing your interfaces in Sketch:

  • You are used to Sketch and not willing to learn a new design tool.
  • You have already some designs in Sketch and you want to build the interaction for them.
  • Sketch works much better with large files. Framer X seems to have some problems when moving elements around.
  • Framer X is still in his early stages as a design tool and there are not many tutorials about how to create some elements of design. On the other hand, there are plenty of tutorials about Sketch and also many plugins such as the Craft plugin for Sketch which allows you to speed up your design process.
  • You will find many more web design resources for Sketch than for Framer X.
  • There is still a lack of tutorials about some of the options available in Framer X, especially about how to use the Code components.

So first of all, let’s create a new file in Framer X. The first thing we will do is to bring the design screen we have in Sketch into Framer X. To do so, just copy the Static artboard from Sketch and paste it in Framer X.

Layout in Sketch and the same layout in Framer X, once imported.
Copy your designs from Sketch and paste them into Framer X. (Large preview)

As you can see in the Layers panel, we’ve got the same layers we had in Sketch.

Note: Sometimes, when bringing your designs into Framer X, some properties may be lost — in this case, it’s the border radius of the thumbnails. This is because we used a Mask in Sketch and Framer X doesn’t recognize it. To solve this, you can either select the Group in Sketch and Flatten it to Bitmap before pasting it into Framer X, or once you have brought the design into Framer X, double-click to reach the Frame element and manually change the Radius in the Properties panel.

Organize The Layout In Framer

To work on the interaction of the elements in Framer X, we need to create a new Frame.

Note: A frame is similar to an Artboard in Sketch (or to the HTML <div> element), but is more powerful. Frames act more like containers as a frame can contain other frames.

To create a new Frame, go to the Layout tool panel, select Frame and drag and drop in any part of the canvas; or simply press F.

To create a Frame, select Frame and drag and drop in the canvas.
To create a new Frame, select Frame in the Layout tool panel. (Large preview)

Second, we will set a device for the Frame. Select the Frame and in the Properties panel, Device, choose Apple MacBook Pro.

Select a Frame, Device in the Properties panel and choose Apple MacBook Pro.
To set a device for a Frame, select a Device in the Properties panel. (Large preview)

Take a look at the Static frame we’ve imported. We will build the following interactions:

  • Header: Fade in when scrolling through the content.
  • Floating Action Button (FAB): Default, hover and pressed states.
  • Nav: It is displayed from right to left when clicking the FAB.
  • Content: It is resized when clicking the FAB.
Highlighting the elements we will build the interaction for: header, nav, FAB and content.
We will build interactions for the header, nav, FAB, and content. (Large preview)

First, create new Frames on top of the layers in such a way that you end up having one Frame for each of the abovemention interaction elements. For instance, we will add a new Frame to group all the layers that are part of the Header (Cmd + Enter) and name the Frame as header.

Select the elements of the header and add a Frame on top of them.
Group the layers to have one Frame for each of our interactive elements. (Large preview)

For the sake of clarity, change the name of the Apple MacBook Pro frame to Interactive. In the following section we will create a Scroll component.

Scroll Through The Content

First, we will duplicate (Cmd + D) the Content frame and take it out of the Static frame. Change the name of the new frame to i_content.

Content Frame has to be out of the Static frame.
Duplicate the Content frame and take it out of the Static frame. (Large preview)

Secondly, we will create a Scroll component in our Interactive frame. To do so, go to the Interactive tool panel and select Scroll. Drag and drop in any part of the Interactive frame.

In addition to that, modify the width of the Scroll component to 1141px (same as the Content) and position it in the same coordinates as the Content is on the Static frame (left: 149px, top: 140px). Apart from that, increase the height of the Scroll component as it reaches the bottom of the Interactive frame.

Position the Scroll component where it was on the Static frame.
Modify the width and height of the Scroll component and position it in the same coordinates as the Content frame. (Large preview)

Next, we will connect the Scroll component to our i_content. To do so, click on the connector and connect it to i_content.

Connect the Scroll component to the i_content.
Connect the Scroll component to the i_content. (Large preview)

Lastly, select the Interactive frame and Cmd + P to enter the Preview Mode. You should be able to scroll through the content now.

Scrolling through the page on Preview Mode.
To access to Preview Mode, press Cmd + P. (Large preview)

Next, I will explain how to position the Header and the FAB (Floating Action Button) button to make them fixed while scrolling with no need for any special coding.

Fixed Elements

We will position the elements so as they remain fixed when scrolling through the page. To that end, duplicate the Header frame and position it in the Interactive frame. As before, change the name to i_header. Do the same with the Floating Action Button button. Your Layers panel should look like this.

i_fab and i_header are in the Interactive frame.
Duplicate the Header and the FAB frames and position them within the Interactive frame. (Large preview)

As the Header and the FAB are out of the Scroll component, they will remain fixed while scrolling.

In Preview mode, Scroll through the content, whereas the header and FAB remain fixed.
You can scroll through the content, whereas the header and FAB remain fixed. (Large preview)

In the next section, I will explain how to build the transition of the Header.

Header Transition

To build the transition of the Header we will make use of the Scroll away component created by Lukas Guschlbauer. To start using this component, go to the Framer Store, search for Scroll and install the Scroll Away component.

Framer store where you can search the Scroll Away component.
Search for ‘Scroll’ in the Framer Store and install the Scroll Away component. (Large preview)

Next, go to the the Components panel, click the Scroll Away and drop it onto the canvas. Take the Header frame out of the Interactive frame and position the Scroll away component where the Header was. Change the component size as to be the same as the Header (1440x80px).

Now, select the Scroll Away component and connect it to your i_header frame. You can change multiple properties of the component such as alignment, effect, direction, easing or timing in the Properties panel. We will change the effect to Fade Move. Once that is done, the options below will change accordingly.

Applying the Fade Move effect in the Scroll Away component.
Take the Header frame out of the Interactive frame and change the effect to Fade Move. (Large preview)

For the effect to work, we need one more thing. Select the Scroll Away Component and click the Override in the Properties panel. Click File and select New File. Then, click Override and select useScrollData. Next, click the Scroll component of your Interactive frame. Click Override again and select getScrollData in Override. To preview the result, press Cmd + P.

Note: Overrides are a unique concept to Framer X. Code overrides are functions that allow components to communicate with each other. You can write them yourself in code and apply them to any Frame or component on your canvas. These functions allow you to override visual properties like opacity and fill, and allow for interactivity and animation. Code overrides can live in any code file in your project. Framer X interprets these based on the type. You can apply any code override to any Frame or component on the canvas by selecting Override from the Properties panel.

There is a white space at top when scrolling through the content in Preview Mode
The transition of the Header works, but there is a white space at the top. (Large preview)

The transition works, but you will notice that there is a white space at the top. This is because the Scroll component is positioned at y: 140. Let’s change this. Increase the height of the Scroll component to occupy the whole height of the Interactive frame. Next, go to your i_content frame and position the elements 140px from the top of the frame.

Positioning the content 140px from top in the i_content frame.
In the i_content frame, position the content 140px from top. (Large preview)

Your interaction should be now similar to this one.

Header goes away with Fade Move effect while scrolling through the content in Preview Mode.
Header transition when scrolling through the content. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to change the state of a button when interacting with it.

States For Buttons

In this section, we will work on the different states for the Floating Action Button (FAB). We will make use of the Magic Move component created by Henrique Gusso. So first of all, go to the Framer store and install this component. In the Components panel, select the component and drop it on the canvas.

At first, select the Floating Action Button frame and take it out of the Interactive frame. Next, position the Magic Move component where the FAB was. Change its size to 72×72px.

The i_fab is out of the Interactive frame and the Magic Move component is where the FAB was.
Take the FAB out of the Interactive frame and position the Magic Move component where the FAB was. (Large preview)

For some reason, the graphic imported from Sketch doesn’t work with this component, so we will create our own circle. In the i_fab frame, remove the frame that contains the graphic and create a circle with the same color and properties instead.

Detail of the layers of the i_fab frame.
Remove the graphic imported from Sketch and create your own circle. (Large preview)

For the different states of the FAB, we need to create a Master and three Instances (default, hover, and pressed states). To do so, select the i_FAB, right-click on it, and select Create component.

Right click on the i_fab, Create component to get a Master of the element.
To create a Master, select the i_fab frame, right-click, Create component. (Large preview)

Note: Design Components are similar to Symbols in Sketch. So if you want to create reusable components for your Design System this is a very useful tool. To change the properties of your instances all at once, just select the Master and modify the properties you want. For further information, take a look at the Framer X guide to create Design Components.

Now, duplicate the i_fab Master frame 3 times to get the instances. Change the name of the new frames to i_fab_default, i_fab_hover, and i_fab_pressed.

The Master and the three instances of the i_fab: default, hover and pressed.
To create the Instances for the states of the button, duplicate the Master 3 times. (Large preview)

Next, we need to connect the Magic Move component to the instances. Connect Initial to i_fab_default, Hover Start to i_fab_hover, Tap to i_fab_pressed and Hover End to i_fab_default.

Connect the Magic Move component in the Interactive frame to the instances: default, hover and pressed.
Connect the Magic Move component to the instances. (Large preview)

Finally, we have to go into each one of the states and change the color and scale. Go into the i_fab_hover and change its color to #2244BF. To do so, double click until you see the Fill option in the Properties panel. Next, go into the i_fab_pressed, reduce its size to 56px and change its color to #172E80. Check the result in the Preview Mode.

Note: If you see a black screen in the Preview Mode, check the compatibility of the component with your Framer Library Version. To do so, go to the page of the component in the Framer Store. If the package is not compatible with your version you will see a warning message. To change your Framer Library, navigate to File → Framer Library Version.

Different states of the FAB in Preview Mode while hovering and clicking it.
To access the Preview mode, press Cmd + P. (Large preview)

In the next section I will explain how to display the nav from right to left by clicking the FAB button.

Note: If you need it, download the source file for this step.

Open The Nav When Clicking A Button

Now, we will work on the interaction to display the Nav when clicking the FAB button. We will make use of the Link to and the Magic Move component again for the transition.

Go to the Static frame and duplicate the Nav frame. Position it in any part of the canvas and change its name to i_nav.

i_nav is out of the Static frame.
Duplicate the Nav frame, take it out of the Static frame and change its name to i_nav. (Large preview)

Now, we need to create two different states for the Nav. First, the initial state (no nav is shown) and second state, the nav is displayed. To do so, create a new Master with the i_nav (right-click and select Create component, or use the shortcut Cmd + K). Once you have the Master, duplicate two times to get the Instances. Name them i_nav_default and i_nav_displayed.

The master of i_nav with the two instances: default and displayed.
Duplicate the Master to get the instances of i_nav. (Large preview)

Next, position the elements of the i_nav_default out of the frame (Right: -80px).

i_nav_default is positioned out of the frame.
Position the i_nav_default out of the frame. (Large preview)

So, the Nav will be displayed automatically from right to left when clicking the FAB. To build this animation, we need to create a new Frame. Duplicate the Interactive frame. Change the name of the new Frame to Interactive02.

Interactive frame and its duplicate: Interactive02 frame.
Duplicate the Interactive frame. (Large preview)

To display the Nav in this new Frame we will create a new Magic Move component. The size (80x392px) and the position (Top: 140, Right: 0) need to be the same as the Nav.

Magic Move component in the Interactive02 frame.
Add a new Magic Move component in the Interactive02 frame. (Large preview)

Next, go to Interactive02 frame, select the Magic Move Component and connect it to the instances. i_nav_default to the Initital state and i_nav_displayed to the Automatic state. By doing so, when entering on this second Frame, the Nav will be displayed automatically.

Connect the Magic Move component in Interactive02 frame to the instances of the i_nav.
Connect the Magic Move component to the instances. (Large preview)

Now, we will build the interaction between screens by linking the Frames. Go to the Interactive frame, select the FAB, right-click → Add Frame. Change the name of the new frame to interactive_fab. Press L (Link to) and connect it to the Interactive02 frame.

Linking the FAB to Interactive02 frame.
On the Interactive frame, add a new Frame on top of the FAB and press L to connect it to the Interactive02 frame. (Large preview)

Change the transition to Instant and preview it. You can change the transition effect between screens in the Properties panel.

Select the FAB and changing the transition to Instant.
Change the transition to Instant. (Large preview)

If you go to Preview Mode you will see that the Nav is shown when clicking the FAB button, but we need to reverse the interaction when clicking again on it. To do so, duplicate the Interactive02 frame (give the name Interactive03 to the new Frame).

On Interactive03 frame, select the Magic Move component and assign i_nav_displayed to the Initial State and i_nav_default to the Automatic State.

Assigning states of the i_nav to the Magic Move Component on Interactive03 frame.
Assign i_nav_displayed to the Initial State and i_nav_default to Automatic state on Interactive03 frame. (Large preview)

Finally, press L (Link to) the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 frame to the Interactive02 frame. Remember to change the transition effect in the Link properties to Instant.

Linking screens with the FAB in Interactive02 frame and Interactive03 frame.
Link the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 to the Interactive02 frame. (Large preview)

Preview the interaction from the Interactive frame. The result should be as the one below:

When clicking the FAB button, the Nav is displayed from right to left.
When clicking the FAB button, the Nav is displayed from right to left. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to resize the content when clicking the FAB button.

Resize The Content When The Nav Is Displayed

To resize the content when the Nav is displayed we will write some React code. We will use Playground (a code editor integrated in Framer X) that allows you to play with some React and HTML code to build advanced animations.

Note: If you are not familiar with React, you may be interested in taking a look at some React tutorials.

So first, go to each of the interactive frames, select the Scroll component and add a Frame on top of it.

A Frame was added on top of the Scroll component.
Add a Frame on top of each of the Scroll components. (Large preview)

Next, go to the Properties panel and click Override. On File, select App. If you don’t see it, select New file. Then, click Edit Code. The Playground will be opened automatically.

Make sure your App file has the following line at the top. If not, add it:

import { Data, animate, Override, Animatable } from "framer"

Note: (*) This code works with Framer v. 25 and the latest API version v. 1.0.7. While this code works, keep in mind that Framer is now encouraging users to use React Hooks functions instead of class components. Learn more at the new Framer API documentation pages.

We will declare a variable called contentScaleValue and indicate that it can be animated. Also, we will set the default toggle state as true.

//Value by default const contentScaleValue = Animatable(1); let toggle = true;

Then, we will create a function ResizeContent for the Content to be scaled when clicking the FAB. Besides that, we have to set its originX and originY as so it scales from top left.

//Assign to content export const ResizeContent: Override = props => {  return {    scale: contentScaleValue,    originX: 0,    originY: 0  }; };

Next, we will create a second function togglePosition for the FAB. We will say that onTap, if toggle is true, Content will be rescaled and the toggle state will change to false. Otherwise, do the reverse animation.

//Assign to FAB export const togglePosition: Override = props => {  return {    onTap: () => {      if (toggle) {        animate.ease(contentScaleValue, 0.9, {duration: 0.2});        toggle = false;      } else {        animate.ease(contentScaleValue, 1, {duration: 0.2});        toggle = true;      }    }  }; };

After writing this code, select the Frame you created on top of your Scroll components, go to the Override section in the properties panel and select File: App, Override: ResizeContent. Next, select the FAB, File: App, Override: togglePosition.

The Override is set to ResizeContent on the Scroll component. The Override is set to togglePosition on the FAB component.
Select the Frame on top of your Scroll components and set the Override as ResizeContent. Select the FAB and set the Override to togglePosition. (Large preview)

Check that the result works as the following.

The Content is resized when clicking the FAB in Preview Mode.
To preview the interaction, press Cmd + P. (Large preview)

Note: If you need it, download the source file for this step.

Prototyping

Go to the the Sketch file and import (copy and paste) the User profile artboard into Framer X. Once in Framer, duplicate the Frame. Give it the name Interactive_user_profile.

User profile artboard in Sketch and once imported in Framer X.
Copy your User profile artboard in Sketch and paste it into Framer X. Then duplicate your frame and give it the name ‘Interactive_user_profile’. (Large preview)

We will build automatic transitions for the right sidebar, the boxes at top and the content. Take each of the Frames out of the Interactive_user_profile frame.

Highlighting the elements that we will build the interaction for: right sidebar, boxes at top and content.
We will build automatic transitions for the right sidebar, the boxes at top and the content. (Large preview)

Create a Magic Move component for each of the elements and position them in the Interactive_user_profile frame.

Magic Move components for the elements are in Interactive_user_profile frame.
Create a Magic Move component for the elements to be animated. (Large preview)

Next, create a Master and two instances for each of the components. For the sidebar, position the first instance out of the Frame. For the boxes and the content, change the opacity of the first instance to 0.

A Master and two instances for each of the components. The opacity of the second instance is set to 0.
Create a Master and two instances for each of the components. (Large preview)

Connect the Magic Move component to each of the instances. Assign the first instance to the Initial State and the second instance to the Automatic State.

The Magic Move components are connected to the instances of the elements.
Connect the Magic Move components to the instances. (Large preview)

In the Properties panel, you can change the delay of each of the Move Magic components to set up the order to be shown. Assign the next delays:

  • Sidebar: no delay
  • First box: 0.4 delay
  • Second box: 0.6 delay
  • Third box: 0.8 delay
  • Content: 1 delay.
Selecting one of the boxes and setting a delay of 0.4.
Change the delay of the components in the Properties panel. (Large preview)

Go to the Interactive03 frame, select the header and Link to the Interactive_user_profile frame. In this frame, select the header and Link to Interactive frame. Remember to change the transition between the screens to Instant. Check the results.

Linking Interactive03 frame to Interactive_user_profile frame.
Prototyping with the Link tool. (Large preview)

Note: If you need it, download the source file for this step.

Clicking on the header leads you to User profile frame where the elements are displayed with an automatic animation.
Cmd + P to check the result. (Large preview)

Sharing The Prototype

To share the prototype, click File → Export Web Preview (Cmd + E). To see the prototype, open the index.html. It will launch the prototype in a web browser.

Conclusion And Takeaways

If you are looking for a design tool specialized in interaction, Framer X is the perfect one. Framer X allows you to build simple transitions between screens, micro interactions, but also to design complex interactions making use of React code.

By using Framer X, you will speed up your design process and will be able to better communicate the interaction of your designs to the team and stakeholders.

  • You can still design the interface in Sketch and paste your designs into Framer X to build the interaction of the elements there.
  • For this tutorial, I have have been using a design imported from Sketch, but you can create your layouts in Framer X as well.
  • There are multiple UI kits available in the Framer Store to help you build your design systems.
  • There is no single approach on how to build an interaction in Framer X. Experiment and learn.
  • To build some quick interactions faster, make use of the pre-built components in the Framer Store.
  • You just need a minimal coding knowledge in order to start building complex interactions in Framer X and there are multiple tutorials available online to start learning how to do it.
Smashing Editorial (mb, yk, il)


Articles on Smashing Magazine — For Web Designers And Developers

10 Jun

How To Start Using Sketch And Framer X

by TBSCategories: News

How To Start Using Sketch And Framer X

How To Start Using Sketch And Framer X

Martina Pérez

When it comes to showing the transition, interaction and animation of elements in the user interface, a prototyping tool like Framer X can make a difference in the way you communicate your vision to the team and stakeholders and as a result, boost your efficiency as a designer.

With the following example, I will illustrate how you can add interaction to static designs. To profit the most from this tutorial, some basic experience with Framer X are welcome.

To get started, you will need the following tools and assets:

Note: This tutorial is for designers using MacOS, as Framer X is for Mac (although this may change in the near future), and Sketch app is also only for Mac.

Bringing Your Designs From Sketch

We will bring our designs from Sketch into Framer X. You might also create your designs in Framer X as there is a full bunch of layout tools to do so, but there are some reasons whereby you can be interested in continuing designing your interfaces in Sketch:

  • You are used to Sketch and not willing to learn a new design tool.
  • You have already some designs in Sketch and you want to build the interaction for them.
  • Sketch works much better with large files. Framer X seems to have some problems when moving elements around.
  • Framer X is still in his early stages as a design tool and there are not many tutorials about how to create some elements of design. On the other hand, there are plenty of tutorials about Sketch and also many plugins such as the Craft plugin for Sketch which allows you to speed up your design process.
  • You will find many more web design resources for Sketch than for Framer X.
  • There is still a lack of tutorials about some of the options available in Framer X, especially about how to use the Code components.

So first of all, let’s create a new file in Framer X. The first thing we will do is to bring the design screen we have in Sketch into Framer X. To do so, just copy the Static artboard from Sketch and paste it in Framer X.

Layout in Sketch and the same layout in Framer X, once imported.
Copy your designs from Sketch and paste them into Framer X. (Large preview)

As you can see in the Layers panel, we’ve got the same layers we had in Sketch.

Note: Sometimes, when bringing your designs into Framer X, some properties may be lost — in this case, it’s the border radius of the thumbnails. This is because we used a Mask in Sketch and Framer X doesn’t recognize it. To solve this, you can either select the Group in Sketch and Flatten it to Bitmap before pasting it into Framer X, or once you have brought the design into Framer X, double-click to reach the Frame element and manually change the Radius in the Properties panel.

Organize The Layout In Framer

To work on the interaction of the elements in Framer X, we need to create a new Frame.

Note: A frame is similar to an Artboard in Sketch (or to the HTML <div> element), but is more powerful. Frames act more like containers as a frame can contain other frames.

To create a new Frame, go to the Layout tool panel, select Frame and drag and drop in any part of the canvas; or simply press F.

To create a Frame, select Frame and drag and drop in the canvas.
To create a new Frame, select Frame in the Layout tool panel. (Large preview)

Second, we will set a device for the Frame. Select the Frame and in the Properties panel, Device, choose Apple MacBook Pro.

Select a Frame, Device in the Properties panel and choose Apple MacBook Pro.
To set a device for a Frame, select a Device in the Properties panel. (Large preview)

Take a look at the Static frame we’ve imported. We will build the following interactions:

  • Header: Fade in when scrolling through the content.
  • Floating Action Button (FAB): Default, hover and pressed states.
  • Nav: It is displayed from right to left when clicking the FAB.
  • Content: It is resized when clicking the FAB.
Highlighting the elements we will build the interaction for: header, nav, FAB and content.
We will build interactions for the header, nav, FAB, and content. (Large preview)

First, create new Frames on top of the layers in such a way that you end up having one Frame for each of the abovemention interaction elements. For instance, we will add a new Frame to group all the layers that are part of the Header (Cmd + Enter) and name the Frame as header.

Select the elements of the header and add a Frame on top of them.
Group the layers to have one Frame for each of our interactive elements. (Large preview)

For the sake of clarity, change the name of the Apple MacBook Pro frame to Interactive. In the following section we will create a Scroll component.

Scroll Through The Content

First, we will duplicate (Cmd + D) the Content frame and take it out of the Static frame. Change the name of the new frame to i_content.

Content Frame has to be out of the Static frame.
Duplicate the Content frame and take it out of the Static frame. (Large preview)

Secondly, we will create a Scroll component in our Interactive frame. To do so, go to the Interactive tool panel and select Scroll. Drag and drop in any part of the Interactive frame.

In addition to that, modify the width of the Scroll component to 1141px (same as the Content) and position it in the same coordinates as the Content is on the Static frame (left: 149px, top: 140px). Apart from that, increase the height of the Scroll component as it reaches the bottom of the Interactive frame.

Position the Scroll component where it was on the Static frame.
Modify the width and height of the Scroll component and position it in the same coordinates as the Content frame. (Large preview)

Next, we will connect the Scroll component to our i_content. To do so, click on the connector and connect it to i_content.

Connect the Scroll component to the i_content.
Connect the Scroll component to the i_content. (Large preview)

Lastly, select the Interactive frame and Cmd + P to enter the Preview Mode. You should be able to scroll through the content now.

Scrolling through the page on Preview Mode.
To access to Preview Mode, press Cmd + P. (Large preview)

Next, I will explain how to position the Header and the FAB (Floating Action Button) button to make them fixed while scrolling with no need for any special coding.

Fixed Elements

We will position the elements so as they remain fixed when scrolling through the page. To that end, duplicate the Header frame and position it in the Interactive frame. As before, change the name to i_header. Do the same with the Floating Action Button button. Your Layers panel should look like this.

i_fab and i_header are in the Interactive frame.
Duplicate the Header and the FAB frames and position them within the Interactive frame. (Large preview)

As the Header and the FAB are out of the Scroll component, they will remain fixed while scrolling.

In Preview mode, Scroll through the content, whereas the header and FAB remain fixed.
You can scroll through the content, whereas the header and FAB remain fixed. (Large preview)

In the next section, I will explain how to build the transition of the Header.

Header Transition

To build the transition of the Header we will make use of the Scroll away component created by Lukas Guschlbauer. To start using this component, go to the Framer Store, search for Scroll and install the Scroll Away component.

Framer store where you can search the Scroll Away component.
Search for ‘Scroll’ in the Framer Store and install the Scroll Away component. (Large preview)

Next, go to the the Components panel, click the Scroll Away and drop it onto the canvas. Take the Header frame out of the Interactive frame and position the Scroll away component where the Header was. Change the component size as to be the same as the Header (1440x80px).

Now, select the Scroll Away component and connect it to your i_header frame. You can change multiple properties of the component such as alignment, effect, direction, easing or timing in the Properties panel. We will change the effect to Fade Move. Once that is done, the options below will change accordingly.

Applying the Fade Move effect in the Scroll Away component.
Take the Header frame out of the Interactive frame and change the effect to Fade Move. (Large preview)

For the effect to work, we need one more thing. Select the Scroll Away Component and click the Override in the Properties panel. Click File and select New File. Then, click Override and select useScrollData. Next, click the Scroll component of your Interactive frame. Click Override again and select getScrollData in Override. To preview the result, press Cmd + P.

Note: Overrides are a unique concept to Framer X. Code overrides are functions that allow components to communicate with each other. You can write them yourself in code and apply them to any Frame or component on your canvas. These functions allow you to override visual properties like opacity and fill, and allow for interactivity and animation. Code overrides can live in any code file in your project. Framer X interprets these based on the type. You can apply any code override to any Frame or component on the canvas by selecting Override from the Properties panel.

There is a white space at top when scrolling through the content in Preview Mode
The transition of the Header works, but there is a white space at the top. (Large preview)

The transition works, but you will notice that there is a white space at the top. This is because the Scroll component is positioned at y: 140. Let’s change this. Increase the height of the Scroll component to occupy the whole height of the Interactive frame. Next, go to your i_content frame and position the elements 140px from the top of the frame.

Positioning the content 140px from top in the i_content frame.
In the i_content frame, position the content 140px from top. (Large preview)

Your interaction should be now similar to this one.

Header goes away with Fade Move effect while scrolling through the content in Preview Mode.
Header transition when scrolling through the content. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to change the state of a button when interacting with it.

States For Buttons

In this section, we will work on the different states for the Floating Action Button (FAB). We will make use of the Magic Move component created by Henrique Gusso. So first of all, go to the Framer store and install this component. In the Components panel, select the component and drop it on the canvas.

At first, select the Floating Action Button frame and take it out of the Interactive frame. Next, position the Magic Move component where the FAB was. Change its size to 72×72px.

The i_fab is out of the Interactive frame and the Magic Move component is where the FAB was.
Take the FAB out of the Interactive frame and position the Magic Move component where the FAB was. (Large preview)

For some reason, the graphic imported from Sketch doesn’t work with this component, so we will create our own circle. In the i_fab frame, remove the frame that contains the graphic and create a circle with the same color and properties instead.

Detail of the layers of the i_fab frame.
Remove the graphic imported from Sketch and create your own circle. (Large preview)

For the different states of the FAB, we need to create a Master and three Instances (default, hover, and pressed states). To do so, select the i_FAB, right-click on it, and select Create component.

Right click on the i_fab, Create component to get a Master of the element.
To create a Master, select the i_fab frame, right-click, Create component. (Large preview)

Note: Design Components are similar to Symbols in Sketch. So if you want to create reusable components for your Design System this is a very useful tool. To change the properties of your instances all at once, just select the Master and modify the properties you want. For further information, take a look at the Framer X guide to create Design Components.

Now, duplicate the i_fab Master frame 3 times to get the instances. Change the name of the new frames to i_fab_default, i_fab_hover, and i_fab_pressed.

The Master and the three instances of the i_fab: default, hover and pressed.
To create the Instances for the states of the button, duplicate the Master 3 times. (Large preview)

Next, we need to connect the Magic Move component to the instances. Connect Initial to i_fab_default, Hover Start to i_fab_hover, Tap to i_fab_pressed and Hover End to i_fab_default.

Connect the Magic Move component in the Interactive frame to the instances: default, hover and pressed.
Connect the Magic Move component to the instances. (Large preview)

Finally, we have to go into each one of the states and change the color and scale. Go into the i_fab_hover and change its color to #2244BF. To do so, double click until you see the Fill option in the Properties panel. Next, go into the i_fab_pressed, reduce its size to 56px and change its color to #172E80. Check the result in the Preview Mode.

Note: If you see a black screen in the Preview Mode, check the compatibility of the component with your Framer Library Version. To do so, go to the page of the component in the Framer Store. If the package is not compatible with your version you will see a warning message. To change your Framer Library, navigate to File → Framer Library Version.

Different states of the FAB in Preview Mode while hovering and clicking it.
To access the Preview mode, press Cmd + P. (Large preview)

In the next section I will explain how to display the nav from right to left by clicking the FAB button.

Note: If you need it, download the source file for this step.

Open The Nav When Clicking A Button

Now, we will work on the interaction to display the Nav when clicking the FAB button. We will make use of the Link to and the Magic Move component again for the transition.

Go to the Static frame and duplicate the Nav frame. Position it in any part of the canvas and change its name to i_nav.

i_nav is out of the Static frame.
Duplicate the Nav frame, take it out of the Static frame and change its name to i_nav. (Large preview)

Now, we need to create two different states for the Nav. First, the initial state (no nav is shown) and second state, the nav is displayed. To do so, create a new Master with the i_nav (right-click and select Create component, or use the shortcut Cmd + K). Once you have the Master, duplicate two times to get the Instances. Name them i_nav_default and i_nav_displayed.

The master of i_nav with the two instances: default and displayed.
Duplicate the Master to get the instances of i_nav. (Large preview)

Next, position the elements of the i_nav_default out of the frame (Right: -80px).

i_nav_default is positioned out of the frame.
Position the i_nav_default out of the frame. (Large preview)

So, the Nav will be displayed automatically from right to left when clicking the FAB. To build this animation, we need to create a new Frame. Duplicate the Interactive frame. Change the name of the new Frame to Interactive02.

Interactive frame and its duplicate: Interactive02 frame.
Duplicate the Interactive frame. (Large preview)

To display the Nav in this new Frame we will create a new Magic Move component. The size (80x392px) and the position (Top: 140, Right: 0) need to be the same as the Nav.

Magic Move component in the Interactive02 frame.
Add a new Magic Move component in the Interactive02 frame. (Large preview)

Next, go to Interactive02 frame, select the Magic Move Component and connect it to the instances. i_nav_default to the Initital state and i_nav_displayed to the Automatic state. By doing so, when entering on this second Frame, the Nav will be displayed automatically.

Connect the Magic Move component in Interactive02 frame to the instances of the i_nav.
Connect the Magic Move component to the instances. (Large preview)

Now, we will build the interaction between screens by linking the Frames. Go to the Interactive frame, select the FAB, right-click → Add Frame. Change the name of the new frame to interactive_fab. Press L (Link to) and connect it to the Interactive02 frame.

Linking the FAB to Interactive02 frame.
On the Interactive frame, add a new Frame on top of the FAB and press L to connect it to the Interactive02 frame. (Large preview)

Change the transition to Instant and preview it. You can change the transition effect between screens in the Properties panel.

Select the FAB and changing the transition to Instant.
Change the transition to Instant. (Large preview)

If you go to Preview Mode you will see that the Nav is shown when clicking the FAB button, but we need to reverse the interaction when clicking again on it. To do so, duplicate the Interactive02 frame (give the name Interactive03 to the new Frame).

On Interactive03 frame, select the Magic Move component and assign i_nav_displayed to the Initial State and i_nav_default to the Automatic State.

Assigning states of the i_nav to the Magic Move Component on Interactive03 frame.
Assign i_nav_displayed to the Initial State and i_nav_default to Automatic state on Interactive03 frame. (Large preview)

Finally, press L (Link to) the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 frame to the Interactive02 frame. Remember to change the transition effect in the Link properties to Instant.

Linking screens with the FAB in Interactive02 frame and Interactive03 frame.
Link the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 to the Interactive02 frame. (Large preview)

Preview the interaction from the Interactive frame. The result should be as the one below:

When clicking the FAB button, the Nav is displayed from right to left.
When clicking the FAB button, the Nav is displayed from right to left. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to resize the content when clicking the FAB button.

Resize The Content When The Nav Is Displayed

To resize the content when the Nav is displayed we will write some React code. We will use Playground (a code editor integrated in Framer X) that allows you to play with some React and HTML code to build advanced animations.

Note: If you are not familiar with React, you may be interested in taking a look at some React tutorials.

So first, go to each of the interactive frames, select the Scroll component and add a Frame on top of it.

A Frame was added on top of the Scroll component.
Add a Frame on top of each of the Scroll components. (Large preview)

Next, go to the Properties panel and click Override. On File, select App. If you don’t see it, select New file. Then, click Edit Code. The Playground will be opened automatically.

Make sure your App file has the following line at the top. If not, add it:

import { Data, animate, Override, Animatable } from "framer"

Note: (*) This code works with Framer v. 25 and the latest API version v. 1.0.7. While this code works, keep in mind that Framer is now encouraging users to use React Hooks functions instead of class components. Learn more at the new Framer API documentation pages.

We will declare a variable called contentScaleValue and indicate that it can be animated. Also, we will set the default toggle state as true.

//Value by default const contentScaleValue = Animatable(1); let toggle = true;

Then, we will create a function ResizeContent for the Content to be scaled when clicking the FAB. Besides that, we have to set its originX and originY as so it scales from top left.

//Assign to content export const ResizeContent: Override = props => {  return {    scale: contentScaleValue,    originX: 0,    originY: 0  }; };

Next, we will create a second function togglePosition for the FAB. We will say that onTap, if toggle is true, Content will be rescaled and the toggle state will change to false. Otherwise, do the reverse animation.

//Assign to FAB export const togglePosition: Override = props => {  return {    onTap: () => {      if (toggle) {        animate.ease(contentScaleValue, 0.9, {duration: 0.2});        toggle = false;      } else {        animate.ease(contentScaleValue, 1, {duration: 0.2});        toggle = true;      }    }  }; };

After writing this code, select the Frame you created on top of your Scroll components, go to the Override section in the properties panel and select File: App, Override: ResizeContent. Next, select the FAB, File: App, Override: togglePosition.

The Override is set to ResizeContent on the Scroll component. The Override is set to togglePosition on the FAB component.
Select the Frame on top of your Scroll components and set the Override as ResizeContent. Select the FAB and set the Override to togglePosition. (Large preview)

Check that the result works as the following.

The Content is resized when clicking the FAB in Preview Mode.
To preview the interaction, press Cmd + P. (Large preview)

Note: If you need it, download the source file for this step.

Prototyping

Go to the the Sketch file and import (copy and paste) the User profile artboard into Framer X. Once in Framer, duplicate the Frame. Give it the name Interactive_user_profile.

User profile artboard in Sketch and once imported in Framer X.
Copy your User profile artboard in Sketch and paste it into Framer X. Then duplicate your frame and give it the name ‘Interactive_user_profile’. (Large preview)

We will build automatic transitions for the right sidebar, the boxes at top and the content. Take each of the Frames out of the Interactive_user_profile frame.

Highlighting the elements that we will build the interaction for: right sidebar, boxes at top and content.
We will build automatic transitions for the right sidebar, the boxes at top and the content. (Large preview)

Create a Magic Move component for each of the elements and position them in the Interactive_user_profile frame.

Magic Move components for the elements are in Interactive_user_profile frame.
Create a Magic Move component for the elements to be animated. (Large preview)

Next, create a Master and two instances for each of the components. For the sidebar, position the first instance out of the Frame. For the boxes and the content, change the opacity of the first instance to 0.

A Master and two instances for each of the components. The opacity of the second instance is set to 0.
Create a Master and two instances for each of the components. (Large preview)

Connect the Magic Move component to each of the instances. Assign the first instance to the Initial State and the second instance to the Automatic State.

The Magic Move components are connected to the instances of the elements.
Connect the Magic Move components to the instances. (Large preview)

In the Properties panel, you can change the delay of each of the Move Magic components to set up the order to be shown. Assign the next delays:

  • Sidebar: no delay
  • First box: 0.4 delay
  • Second box: 0.6 delay
  • Third box: 0.8 delay
  • Content: 1 delay.
Selecting one of the boxes and setting a delay of 0.4.
Change the delay of the components in the Properties panel. (Large preview)

Go to the Interactive03 frame, select the header and Link to the Interactive_user_profile frame. In this frame, select the header and Link to Interactive frame. Remember to change the transition between the screens to Instant. Check the results.

Linking Interactive03 frame to Interactive_user_profile frame.
Prototyping with the Link tool. (Large preview)

Note: If you need it, download the source file for this step.

Clicking on the header leads you to User profile frame where the elements are displayed with an automatic animation.
Cmd + P to check the result. (Large preview)

Sharing The Prototype

To share the prototype, click File → Export Web Preview (Cmd + E). To see the prototype, open the index.html. It will launch the prototype in a web browser.

Conclusion And Takeaways

If you are looking for a design tool specialized in interaction, Framer X is the perfect one. Framer X allows you to build simple transitions between screens, micro interactions, but also to design complex interactions making use of React code.

By using Framer X, you will speed up your design process and will be able to better communicate the interaction of your designs to the team and stakeholders.

  • You can still design the interface in Sketch and paste your designs into Framer X to build the interaction of the elements there.
  • For this tutorial, I have have been using a design imported from Sketch, but you can create your layouts in Framer X as well.
  • There are multiple UI kits available in the Framer Store to help you build your design systems.
  • There is no single approach on how to build an interaction in Framer X. Experiment and learn.
  • To build some quick interactions faster, make use of the pre-built components in the Framer Store.
  • You just need a minimal coding knowledge in order to start building complex interactions in Framer X and there are multiple tutorials available online to start learning how to do it.
Smashing Editorial (mb, yk, il)


Articles on Smashing Magazine — For Web Designers And Developers

10 Jun

How To Start Using Sketch And Framer X

by TBSCategories: News

How To Start Using Sketch And Framer X

How To Start Using Sketch And Framer X

Martina Pérez

When it comes to showing the transition, interaction and animation of elements in the user interface, a prototyping tool like Framer X can make a difference in the way you communicate your vision to the team and stakeholders and as a result, boost your efficiency as a designer.

With the following example, I will illustrate how you can add interaction to static designs. To profit the most from this tutorial, some basic experience with Framer X are welcome.

To get started, you will need the following tools and assets:

Note: This tutorial is for designers using MacOS, as Framer X is for Mac (although this may change in the near future), and Sketch app is also only for Mac.

Bringing Your Designs From Sketch

We will bring our designs from Sketch into Framer X. You might also create your designs in Framer X as there is a full bunch of layout tools to do so, but there are some reasons whereby you can be interested in continuing designing your interfaces in Sketch:

  • You are used to Sketch and not willing to learn a new design tool.
  • You have already some designs in Sketch and you want to build the interaction for them.
  • Sketch works much better with large files. Framer X seems to have some problems when moving elements around.
  • Framer X is still in his early stages as a design tool and there are not many tutorials about how to create some elements of design. On the other hand, there are plenty of tutorials about Sketch and also many plugins such as the Craft plugin for Sketch which allows you to speed up your design process.
  • You will find many more web design resources for Sketch than for Framer X.
  • There is still a lack of tutorials about some of the options available in Framer X, especially about how to use the Code components.

So first of all, let’s create a new file in Framer X. The first thing we will do is to bring the design screen we have in Sketch into Framer X. To do so, just copy the Static artboard from Sketch and paste it in Framer X.

Layout in Sketch and the same layout in Framer X, once imported.
Copy your designs from Sketch and paste them into Framer X. (Large preview)

As you can see in the Layers panel, we’ve got the same layers we had in Sketch.

Note: Sometimes, when bringing your designs into Framer X, some properties may be lost — in this case, it’s the border radius of the thumbnails. This is because we used a Mask in Sketch and Framer X doesn’t recognize it. To solve this, you can either select the Group in Sketch and Flatten it to Bitmap before pasting it into Framer X, or once you have brought the design into Framer X, double-click to reach the Frame element and manually change the Radius in the Properties panel.

Organize The Layout In Framer

To work on the interaction of the elements in Framer X, we need to create a new Frame.

Note: A frame is similar to an Artboard in Sketch (or to the HTML <div> element), but is more powerful. Frames act more like containers as a frame can contain other frames.

To create a new Frame, go to the Layout tool panel, select Frame and drag and drop in any part of the canvas; or simply press F.

To create a Frame, select Frame and drag and drop in the canvas.
To create a new Frame, select Frame in the Layout tool panel. (Large preview)

Second, we will set a device for the Frame. Select the Frame and in the Properties panel, Device, choose Apple MacBook Pro.

Select a Frame, Device in the Properties panel and choose Apple MacBook Pro.
To set a device for a Frame, select a Device in the Properties panel. (Large preview)

Take a look at the Static frame we’ve imported. We will build the following interactions:

  • Header: Fade in when scrolling through the content.
  • Floating Action Button (FAB): Default, hover and pressed states.
  • Nav: It is displayed from right to left when clicking the FAB.
  • Content: It is resized when clicking the FAB.
Highlighting the elements we will build the interaction for: header, nav, FAB and content.
We will build interactions for the header, nav, FAB, and content. (Large preview)

First, create new Frames on top of the layers in such a way that you end up having one Frame for each of the abovemention interaction elements. For instance, we will add a new Frame to group all the layers that are part of the Header (Cmd + Enter) and name the Frame as header.

Select the elements of the header and add a Frame on top of them.
Group the layers to have one Frame for each of our interactive elements. (Large preview)

For the sake of clarity, change the name of the Apple MacBook Pro frame to Interactive. In the following section we will create a Scroll component.

Scroll Through The Content

First, we will duplicate (Cmd + D) the Content frame and take it out of the Static frame. Change the name of the new frame to i_content.

Content Frame has to be out of the Static frame.
Duplicate the Content frame and take it out of the Static frame. (Large preview)

Secondly, we will create a Scroll component in our Interactive frame. To do so, go to the Interactive tool panel and select Scroll. Drag and drop in any part of the Interactive frame.

In addition to that, modify the width of the Scroll component to 1141px (same as the Content) and position it in the same coordinates as the Content is on the Static frame (left: 149px, top: 140px). Apart from that, increase the height of the Scroll component as it reaches the bottom of the Interactive frame.

Position the Scroll component where it was on the Static frame.
Modify the width and height of the Scroll component and position it in the same coordinates as the Content frame. (Large preview)

Next, we will connect the Scroll component to our i_content. To do so, click on the connector and connect it to i_content.

Connect the Scroll component to the i_content.
Connect the Scroll component to the i_content. (Large preview)

Lastly, select the Interactive frame and Cmd + P to enter the Preview Mode. You should be able to scroll through the content now.

Scrolling through the page on Preview Mode.
To access to Preview Mode, press Cmd + P. (Large preview)

Next, I will explain how to position the Header and the FAB (Floating Action Button) button to make them fixed while scrolling with no need for any special coding.

Fixed Elements

We will position the elements so as they remain fixed when scrolling through the page. To that end, duplicate the Header frame and position it in the Interactive frame. As before, change the name to i_header. Do the same with the Floating Action Button button. Your Layers panel should look like this.

i_fab and i_header are in the Interactive frame.
Duplicate the Header and the FAB frames and position them within the Interactive frame. (Large preview)

As the Header and the FAB are out of the Scroll component, they will remain fixed while scrolling.

In Preview mode, Scroll through the content, whereas the header and FAB remain fixed.
You can scroll through the content, whereas the header and FAB remain fixed. (Large preview)

In the next section, I will explain how to build the transition of the Header.

Header Transition

To build the transition of the Header we will make use of the Scroll away component created by Lukas Guschlbauer. To start using this component, go to the Framer Store, search for Scroll and install the Scroll Away component.

Framer store where you can search the Scroll Away component.
Search for ‘Scroll’ in the Framer Store and install the Scroll Away component. (Large preview)

Next, go to the the Components panel, click the Scroll Away and drop it onto the canvas. Take the Header frame out of the Interactive frame and position the Scroll away component where the Header was. Change the component size as to be the same as the Header (1440x80px).

Now, select the Scroll Away component and connect it to your i_header frame. You can change multiple properties of the component such as alignment, effect, direction, easing or timing in the Properties panel. We will change the effect to Fade Move. Once that is done, the options below will change accordingly.

Applying the Fade Move effect in the Scroll Away component.
Take the Header frame out of the Interactive frame and change the effect to Fade Move. (Large preview)

For the effect to work, we need one more thing. Select the Scroll Away Component and click the Override in the Properties panel. Click File and select New File. Then, click Override and select useScrollData. Next, click the Scroll component of your Interactive frame. Click Override again and select getScrollData in Override. To preview the result, press Cmd + P.

Note: Overrides are a unique concept to Framer X. Code overrides are functions that allow components to communicate with each other. You can write them yourself in code and apply them to any Frame or component on your canvas. These functions allow you to override visual properties like opacity and fill, and allow for interactivity and animation. Code overrides can live in any code file in your project. Framer X interprets these based on the type. You can apply any code override to any Frame or component on the canvas by selecting Override from the Properties panel.

There is a white space at top when scrolling through the content in Preview Mode
The transition of the Header works, but there is a white space at the top. (Large preview)

The transition works, but you will notice that there is a white space at the top. This is because the Scroll component is positioned at y: 140. Let’s change this. Increase the height of the Scroll component to occupy the whole height of the Interactive frame. Next, go to your i_content frame and position the elements 140px from the top of the frame.

Positioning the content 140px from top in the i_content frame.
In the i_content frame, position the content 140px from top. (Large preview)

Your interaction should be now similar to this one.

Header goes away with Fade Move effect while scrolling through the content in Preview Mode.
Header transition when scrolling through the content. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to change the state of a button when interacting with it.

States For Buttons

In this section, we will work on the different states for the Floating Action Button (FAB). We will make use of the Magic Move component created by Henrique Gusso. So first of all, go to the Framer store and install this component. In the Components panel, select the component and drop it on the canvas.

At first, select the Floating Action Button frame and take it out of the Interactive frame. Next, position the Magic Move component where the FAB was. Change its size to 72×72px.

The i_fab is out of the Interactive frame and the Magic Move component is where the FAB was.
Take the FAB out of the Interactive frame and position the Magic Move component where the FAB was. (Large preview)

For some reason, the graphic imported from Sketch doesn’t work with this component, so we will create our own circle. In the i_fab frame, remove the frame that contains the graphic and create a circle with the same color and properties instead.

Detail of the layers of the i_fab frame.
Remove the graphic imported from Sketch and create your own circle. (Large preview)

For the different states of the FAB, we need to create a Master and three Instances (default, hover, and pressed states). To do so, select the i_FAB, right-click on it, and select Create component.

Right click on the i_fab, Create component to get a Master of the element.
To create a Master, select the i_fab frame, right-click, Create component. (Large preview)

Note: Design Components are similar to Symbols in Sketch. So if you want to create reusable components for your Design System this is a very useful tool. To change the properties of your instances all at once, just select the Master and modify the properties you want. For further information, take a look at the Framer X guide to create Design Components.

Now, duplicate the i_fab Master frame 3 times to get the instances. Change the name of the new frames to i_fab_default, i_fab_hover, and i_fab_pressed.

The Master and the three instances of the i_fab: default, hover and pressed.
To create the Instances for the states of the button, duplicate the Master 3 times. (Large preview)

Next, we need to connect the Magic Move component to the instances. Connect Initial to i_fab_default, Hover Start to i_fab_hover, Tap to i_fab_pressed and Hover End to i_fab_default.

Connect the Magic Move component in the Interactive frame to the instances: default, hover and pressed.
Connect the Magic Move component to the instances. (Large preview)

Finally, we have to go into each one of the states and change the color and scale. Go into the i_fab_hover and change its color to #2244BF. To do so, double click until you see the Fill option in the Properties panel. Next, go into the i_fab_pressed, reduce its size to 56px and change its color to #172E80. Check the result in the Preview Mode.

Note: If you see a black screen in the Preview Mode, check the compatibility of the component with your Framer Library Version. To do so, go to the page of the component in the Framer Store. If the package is not compatible with your version you will see a warning message. To change your Framer Library, navigate to File → Framer Library Version.

Different states of the FAB in Preview Mode while hovering and clicking it.
To access the Preview mode, press Cmd + P. (Large preview)

In the next section I will explain how to display the nav from right to left by clicking the FAB button.

Note: If you need it, download the source file for this step.

Open The Nav When Clicking A Button

Now, we will work on the interaction to display the Nav when clicking the FAB button. We will make use of the Link to and the Magic Move component again for the transition.

Go to the Static frame and duplicate the Nav frame. Position it in any part of the canvas and change its name to i_nav.

i_nav is out of the Static frame.
Duplicate the Nav frame, take it out of the Static frame and change its name to i_nav. (Large preview)

Now, we need to create two different states for the Nav. First, the initial state (no nav is shown) and second state, the nav is displayed. To do so, create a new Master with the i_nav (right-click and select Create component, or use the shortcut Cmd + K). Once you have the Master, duplicate two times to get the Instances. Name them i_nav_default and i_nav_displayed.

The master of i_nav with the two instances: default and displayed.
Duplicate the Master to get the instances of i_nav. (Large preview)

Next, position the elements of the i_nav_default out of the frame (Right: -80px).

i_nav_default is positioned out of the frame.
Position the i_nav_default out of the frame. (Large preview)

So, the Nav will be displayed automatically from right to left when clicking the FAB. To build this animation, we need to create a new Frame. Duplicate the Interactive frame. Change the name of the new Frame to Interactive02.

Interactive frame and its duplicate: Interactive02 frame.
Duplicate the Interactive frame. (Large preview)

To display the Nav in this new Frame we will create a new Magic Move component. The size (80x392px) and the position (Top: 140, Right: 0) need to be the same as the Nav.

Magic Move component in the Interactive02 frame.
Add a new Magic Move component in the Interactive02 frame. (Large preview)

Next, go to Interactive02 frame, select the Magic Move Component and connect it to the instances. i_nav_default to the Initital state and i_nav_displayed to the Automatic state. By doing so, when entering on this second Frame, the Nav will be displayed automatically.

Connect the Magic Move component in Interactive02 frame to the instances of the i_nav.
Connect the Magic Move component to the instances. (Large preview)

Now, we will build the interaction between screens by linking the Frames. Go to the Interactive frame, select the FAB, right-click → Add Frame. Change the name of the new frame to interactive_fab. Press L (Link to) and connect it to the Interactive02 frame.

Linking the FAB to Interactive02 frame.
On the Interactive frame, add a new Frame on top of the FAB and press L to connect it to the Interactive02 frame. (Large preview)

Change the transition to Instant and preview it. You can change the transition effect between screens in the Properties panel.

Select the FAB and changing the transition to Instant.
Change the transition to Instant. (Large preview)

If you go to Preview Mode you will see that the Nav is shown when clicking the FAB button, but we need to reverse the interaction when clicking again on it. To do so, duplicate the Interactive02 frame (give the name Interactive03 to the new Frame).

On Interactive03 frame, select the Magic Move component and assign i_nav_displayed to the Initial State and i_nav_default to the Automatic State.

Assigning states of the i_nav to the Magic Move Component on Interactive03 frame.
Assign i_nav_displayed to the Initial State and i_nav_default to Automatic state on Interactive03 frame. (Large preview)

Finally, press L (Link to) the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 frame to the Interactive02 frame. Remember to change the transition effect in the Link properties to Instant.

Linking screens with the FAB in Interactive02 frame and Interactive03 frame.
Link the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 to the Interactive02 frame. (Large preview)

Preview the interaction from the Interactive frame. The result should be as the one below:

When clicking the FAB button, the Nav is displayed from right to left.
When clicking the FAB button, the Nav is displayed from right to left. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to resize the content when clicking the FAB button.

Resize The Content When The Nav Is Displayed

To resize the content when the Nav is displayed we will write some React code. We will use Playground (a code editor integrated in Framer X) that allows you to play with some React and HTML code to build advanced animations.

Note: If you are not familiar with React, you may be interested in taking a look at some React tutorials.

So first, go to each of the interactive frames, select the Scroll component and add a Frame on top of it.

A Frame was added on top of the Scroll component.
Add a Frame on top of each of the Scroll components. (Large preview)

Next, go to the Properties panel and click Override. On File, select App. If you don’t see it, select New file. Then, click Edit Code. The Playground will be opened automatically.

Make sure your App file has the following line at the top. If not, add it:

import { Data, animate, Override, Animatable } from "framer"

Note: (*) This code works with Framer v. 25 and the latest API version v. 1.0.7. While this code works, keep in mind that Framer is now encouraging users to use React Hooks functions instead of class components. Learn more at the new Framer API documentation pages.

We will declare a variable called contentScaleValue and indicate that it can be animated. Also, we will set the default toggle state as true.

//Value by default const contentScaleValue = Animatable(1); let toggle = true;

Then, we will create a function ResizeContent for the Content to be scaled when clicking the FAB. Besides that, we have to set its originX and originY as so it scales from top left.

//Assign to content export const ResizeContent: Override = props => {  return {    scale: contentScaleValue,    originX: 0,    originY: 0  }; };

Next, we will create a second function togglePosition for the FAB. We will say that onTap, if toggle is true, Content will be rescaled and the toggle state will change to false. Otherwise, do the reverse animation.

//Assign to FAB export const togglePosition: Override = props => {  return {    onTap: () => {      if (toggle) {        animate.ease(contentScaleValue, 0.9, {duration: 0.2});        toggle = false;      } else {        animate.ease(contentScaleValue, 1, {duration: 0.2});        toggle = true;      }    }  }; };

After writing this code, select the Frame you created on top of your Scroll components, go to the Override section in the properties panel and select File: App, Override: ResizeContent. Next, select the FAB, File: App, Override: togglePosition.

The Override is set to ResizeContent on the Scroll component. The Override is set to togglePosition on the FAB component.
Select the Frame on top of your Scroll components and set the Override as ResizeContent. Select the FAB and set the Override to togglePosition. (Large preview)

Check that the result works as the following.

The Content is resized when clicking the FAB in Preview Mode.
To preview the interaction, press Cmd + P. (Large preview)

Note: If you need it, download the source file for this step.

Prototyping

Go to the the Sketch file and import (copy and paste) the User profile artboard into Framer X. Once in Framer, duplicate the Frame. Give it the name Interactive_user_profile.

User profile artboard in Sketch and once imported in Framer X.
Copy your User profile artboard in Sketch and paste it into Framer X. Then duplicate your frame and give it the name ‘Interactive_user_profile’. (Large preview)

We will build automatic transitions for the right sidebar, the boxes at top and the content. Take each of the Frames out of the Interactive_user_profile frame.

Highlighting the elements that we will build the interaction for: right sidebar, boxes at top and content.
We will build automatic transitions for the right sidebar, the boxes at top and the content. (Large preview)

Create a Magic Move component for each of the elements and position them in the Interactive_user_profile frame.

Magic Move components for the elements are in Interactive_user_profile frame.
Create a Magic Move component for the elements to be animated. (Large preview)

Next, create a Master and two instances for each of the components. For the sidebar, position the first instance out of the Frame. For the boxes and the content, change the opacity of the first instance to 0.

A Master and two instances for each of the components. The opacity of the second instance is set to 0.
Create a Master and two instances for each of the components. (Large preview)

Connect the Magic Move component to each of the instances. Assign the first instance to the Initial State and the second instance to the Automatic State.

The Magic Move components are connected to the instances of the elements.
Connect the Magic Move components to the instances. (Large preview)

In the Properties panel, you can change the delay of each of the Move Magic components to set up the order to be shown. Assign the next delays:

  • Sidebar: no delay
  • First box: 0.4 delay
  • Second box: 0.6 delay
  • Third box: 0.8 delay
  • Content: 1 delay.
Selecting one of the boxes and setting a delay of 0.4.
Change the delay of the components in the Properties panel. (Large preview)

Go to the Interactive03 frame, select the header and Link to the Interactive_user_profile frame. In this frame, select the header and Link to Interactive frame. Remember to change the transition between the screens to Instant. Check the results.

Linking Interactive03 frame to Interactive_user_profile frame.
Prototyping with the Link tool. (Large preview)

Note: If you need it, download the source file for this step.

Clicking on the header leads you to User profile frame where the elements are displayed with an automatic animation.
Cmd + P to check the result. (Large preview)

Sharing The Prototype

To share the prototype, click File → Export Web Preview (Cmd + E). To see the prototype, open the index.html. It will launch the prototype in a web browser.

Conclusion And Takeaways

If you are looking for a design tool specialized in interaction, Framer X is the perfect one. Framer X allows you to build simple transitions between screens, micro interactions, but also to design complex interactions making use of React code.

By using Framer X, you will speed up your design process and will be able to better communicate the interaction of your designs to the team and stakeholders.

  • You can still design the interface in Sketch and paste your designs into Framer X to build the interaction of the elements there.
  • For this tutorial, I have have been using a design imported from Sketch, but you can create your layouts in Framer X as well.
  • There are multiple UI kits available in the Framer Store to help you build your design systems.
  • There is no single approach on how to build an interaction in Framer X. Experiment and learn.
  • To build some quick interactions faster, make use of the pre-built components in the Framer Store.
  • You just need a minimal coding knowledge in order to start building complex interactions in Framer X and there are multiple tutorials available online to start learning how to do it.
Smashing Editorial (mb, yk, il)


Articles on Smashing Magazine — For Web Designers And Developers

Newer postsOlder posts
×

Powered by WhatsApp Chat

WhatsApp Chat is free, download and try it now here!

× Chat with Us