July 18th, 2017
July 4th 2017
· · · · · · · · · · · · · · · · · · · · · · · · · · · ·
Let's learn Framer!
Framer is a tool for drawing, prototyping, coding, and sharing projects across teams. It combines the familiarity of visual editing with the flexibility of code. It gives you an entire design workflow in one smart interface.
With Framer you can deliver end-to-end experiences. Framer allows you to perfect and validate interaction, animation, and flow before handing off your work to engineers.
Framer bridges this gap between design and development, making it the tool of choice for product teams worldwide like Dropbox, Facebook, Google, Disney, and Uber.
Interface design, in a stunning way.
With Framer Design you get the familiarity of your favorite graphics tools, with a twist. Framer's intuitive auto-layout and smart grouping algorithms make responsive design a breeze. Draw with pixel perfect precision on device-specific screens, then turn on targeting to animate. Framer is a design tool engineered for interaction work.
You can insert artboards, draw layers, add text and images. Every new layer added to the canvas responds to the environment around it. It's responsiveness is so good that it feels like magic. Here's some things that make designing with Framer different and fun:
Interaction design, quick and easy!
Framer makes it easy to get into coding, even if you're a beginner. You only need one-click to insert an animation with Auto-Code. Customize further with simple slider controls and direct manipulation. You can use the components to add premade native interactions and multi-screen app flows. It’s the simplicity of WYSIWYG, backed by the power of code.
Auto-Code makes bringing your designs to life as simple as inserting an animation or event. Style using the slider controls or by editing directly in the canvas. No matter how you like to work, Framer always keeps your code intact for you. Here are some of the things you can easily implement:
Framer makes designing and prototyping easy.
With Framer you can design in a smarter way, you can bring your screens to life with simple code, and you can collaborate with your team or clients via seamless sharing.
In this section, we’ll give you an overview of the Design tab in Framer, the perfect complement to the Code part of our product. Engineered specifically for responsive design work, it’s possible to dream up an idea and create a mockup in Design before turning it into a high-fidelity prototype in Code.
Layers in Framer respond to the environment around them, adapting to layout and hierarchy intuitively.
You can insert, manipulate and style rectangles, oval, text, and images using the sidebar toolkit. Or use shortcuts like R for rectangle and T for text to speed up your workflow.
Layers in Framer have been programmed to auto-size or lock to boundaries and hierarchy.
To make the layers you designed in Framer usable in the code tab you have to enable targeting. Only the layers that have targeting enabled will be targetable in the code and show up in the layer list in the code tab. Don't create targets for layers that you won't use on the code.
To enable targeting click the target icon on the right of a layer in the layer list or right click 'Rename to Target'.
When you place a layer on the canvas in Framer, it is smart enough to guess the layer’s hierarchy based on its visual position. This sequencing will also be noted in the order displayed in the layer panel.
Parent & Child
It is important to understand the concept of this relationship. For example, placing a circle inside of a rectangle makes the rectangle the parent of the circle.
In this lesson we cover some of the additional tools available in Framer Design. You can access this set of features by right clicking on your layers in the layer list, on the canvas or the canvas itself.
We’ll also learn some nifty shortcuts:
A · Artboard
R · Rectangle
O · Oval
T · Text
Z · Zoom
⌘+ · Zoom In
⌘- · Zoom Out
⌘0 · Actual Size
⌘1 · Center Canvas
To add animation to designs you have set up in external graphics tools, simply import into Framer by clicking the Import icon in the bottom left sidebar of the cod tab. Currently, you can only import a design into Code to start animation. Framer has integration with Sketch, Figma, and Photoshop.
Let's see if you remember the stuff we learned about layers, artboards, hierarchy, and the design tab!
Framer recommends setting up your designs directly in the Design tab.
It has been optimized for code-based interaction design work so it is highly intuitive and responsive.
On the code side of Framer, you’ll see a preview window that gives you real-time visual feedback on any changes you make in Code or Design. You can also drag, drop and resize layers directly in this window.
It offers real-time feedback on designs made in either the Design or Code tab. To replay animations, simple hit CMD + R to reload.
To view your design on multiple screens, simply select from the dropdown menu of devices in the top navigation bar of the preview window.
In Framer, artboards are more than placeholders. They have been engineered to account for responsive device work.
Almost every layer property can be animated. Multiple properties can be animated at once. You can then continue to define the curve, time, delay and many more custom animation options.
States allow you to define the different appearance options of a layer. A layer can have multiple states, each with a different set of properties. States can then be cycled through, with or without animation.
Events are things that can happen to layers, often triggered by user interaction. With events, you can animate layers based on these interactions. From simple taps and swipes to advanced multi-touch gestures.
Let's test your skills on the basics of code and workflow!
Draggable layers include physics and many customizable properties that open up new creative possibilities. By accounting for things like the speed and the direction, you can take greater control over dragging interactions.
Pinchable layers can be scaled and rotated with two fingers. This multi-touch gesture is often seen in maps and photo apps, to zoom and navigation content
The FlowComponent helps you quickly transition between multiple screens. It’s especially useful for turning static screens into fully interactive flows
With the scroll component you can create smooth scrolling typical of mobile apps. You can make any layer or group scrollable by adding a scroll component.
With the PageComponent, piecing together multiple static screens into a single, interactive prototype is a breeze. It handles all of the calculations, allowing you to focus on the experience
Sliders can be used to show progress, change the volume, adjust photos, define a price range and more. With the SliderComponent, you can build adaptable designs without having to start from scratch.
Upload, share and get feedback on your designs with Framer Cloud and the Framer Native App
Quiz on draggable layers, pinching, components, and sharing :)
In this lecture, we’ll learn how to add sounds to our projects using Framer's snippets. They included Facebook's Sound Kit in the default sounds but you can add your own too. You can also trigger sounds with events, which is great for giving UI auditory feedback!
In this lesson, we'll learn how to recreate a floating action button (like Material Design) on Framer. We'll design it using the icon library and code it by switching between two states with a spring curve.
Hello, I'm Pablo Stanley. I'm a San Francisco based product designer. I'm the designer and cofounder of a healthcare startup in San Francisco called Carbon Health. I love solving design puzzles, making silly illustrations, composing geeky music, creating colorful animated gifs, munching veggie burgers, and writing punny comics.
Mentoring is one of my new found passions. I want to learn and teach as much as I can and Udemy is the best platform for it.
I also write a comic series called “The Design Team”.