Framer Crash Course – Design, Code, and Collaborate
- 1.5 hours on-demand video
- 13 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Students will learn the basics of Framer, an amazing design and prototyping tool
- Interface design, the way it’s meant to be.
- Bring designs to live with easy to learn code.
- Create beautiful prototypes using advanced gestures and interactions
- Convert designs from static to motion, real quick.
- Share your designs and preview on native devices.
- You will need to have the latest version of Framer installed. There's a 15 day trial that you can download on their website.
- You need to have a Mac computer
- Some basic knowledge of other design tools like Sketch would be useful, but not necessary
- There's basic coding in this course. Any beginner would do fine.
July 18th, 2017
- Creating a Floating Action Button: 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.
July 4th 2017
- Published a lecture on adding sounds to your projects and how to trigger them with events and animations.
- Added a quiz on the third section. Test your knowledge!
· · · · · · · · · · · · · · · · · · · · · · · · · · · ·
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:
- Auto-sequencing with artboards.
- Insert and manipulate shapes.
- Advanced text tools.
- Automated layer nesting.
- A canvas that adapts across all devices
- Icon management panel.
- Layer clipping.
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:
- Insert layers, animations, events and snippets.
- Full-featured code editor.
- Smart auto-complete.
- In-app documentation.
- Error inspector.
- Position layers directly on the canvas.
- Visual property editing.
- Device picker.
- Detachable canvas.
- Real-time canvas syncing.
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.
- Designers wanting to use an advanced prototyping tool
- Designers who are looking for an all-in-one design workflow
- Designers that want to create responsive layouts and stunning interactions
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.
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.
- In Framer, artboards work great with different device sizes.
- You can add an artboard on the design tab by pressing A or selecting the Artboards tool on the toolbar
- If you add your artboards in Framer your design will translate into code perfectly. Every artboard is set up to be the parent of all the layers placed in it and change according to the size of the ar
- Targeting an artboard in the code will automatically also target all of its child layers. Let’s setup a Flow Component interaction where we go from one artboard to the other.
- First we target the artboards on the design panel.
- Then we can add a flow component in the code tab.
- Don’t worry about not knowing the code right now, we’ll get into it later. We just want to see what’s possible.
- Inserting a layer is as simple as drawing something in the design tab.
- To be able to use your layers in the code tab, you have to add a target to them. When you do this, you are ready to start coding.
- To target a layer simply insert its name followed by the behavior you want to add to it.
- Layers have many types of properties that you can edit on the code. You can change its color, its position, scale it, hide it
- A great way to explore all layer properties is by using Auto Code. Simply click animate and select the layer you want to edit. The Auto Code panel will automatically show up for you to drag around the layer directly in the preview window and edit its value.
- You can override this values in the code
- And you can also go back to the Auto Code panel by clicking on the edit icon.
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.
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