Animate Mode

Importing files into Linearity Move is quite simple.

When you open Linearity Move, or when you click File → Open, you’ll see the Home screen. From here, you can select the Import tab.

Here, you can import files from Linearity Curve, Sketch, and Adobe Illustrator, as well as PDF files. You can also connect to you Figma account and open your Figma files directly in Linearity Move.

You can also click on File → Open from your Mac to open files directly from your device storage.

Crafting your Figma file to animate in Linearity Move

Animating your Figma designs in Linearity Move is a breeze with the Auto Animate feature when you know how to prep your files. Follow these steps to turn your static designs into dynamic animations.

1. Prepare your file in Figma
   Begin by organizing your Figma layers and naming them clearly for easy identification. Use our sample Figma file as a reference to see an example of well-structured layers.
2. Import your file into Linearity Move
   Upload the objects in SVG or the entire Figma file into Linearity Move.
3. Adjust your animation in Linearity Move
   Using Auto Animate, Linearity Move will automatically create the animation based on the differences in consecutive frames/artboards in a scene. Adjust the keyframes and edit elements in Linearity Move to achieve the perfect result.

Let's dive into the details.

Step 1: Prepare your file in Figma

Plan your scenes. Start by visualizing the animation sequence you want to create. Think of each significant movement or transformation as a separate scene in your storyboard.

Consider designing your final scene first and then work backward to define the preceding steps. This reverse design can often simplify the animation planning process and enhance the end result.

Maintain structural consistency. Ensure that each individual object maintains a consistent name across all scenes for seamless Auto-Animation.

Keep objects on-canvas. Place objects within the frame boundaries in Figma. Make sure that all the elements are touching the inside of the frame (for example, one element can be half outside the frame and half inside).

Adjustments to animate elements disappearing or appearing from the outside of frame/canvas can be made more easily within Linearity Move in Design Mode.

Link your image library. If you plan to use images for your animation, you can upload them directly within Linearity Move, or use to Photos tab in the Library sidebar to link your device image Library directly to Linearity Move.

Add object properties. Apply Opacity, Scale, Position, and Rotation settings to the elements of your design for the most impactful Auto Animation results. Other properties, such as shadows, blend modes, etc. have limitations with the Auto Animate feature and require manual refinement within Linearity Move.

Step 2: Import your file into Linearity Move

With your Figma file prepared, it's time to bring it into Linearity Move. You have a few different import options.

Import your file. Bring in your entire Figma file to start animating. In Linearity Move, navigate from the Home screen to Import > Connect to Figma. If you’ve previously connected your Figma account to Linearity Move, you'll see your recent Figma files, making it easy to import.

Alternatively, you can create a new Linearity Move document and choose Import from Figma, which functions the same way. You can also create a new blank scene in Linearity Move and import directly from Figma.

Importing the entire Figma file brings in all pages. If you have multi-page projects in Figma, consider preparing a separate file with only the selected frames or copy-pasting frames individually into Linearity Move. Text imported from Figma will set to default Helvetica font that you can easily adjust in Design Mode in Linearity Move.

Select and drag your desired frames into Linearity Move scenes. Once imported, the scenes appear on your timeline, and the Auto-Animate magic happens.

Import objects. For individual objects, copy them as SVG in Figma (right-click > copy as SVG), then paste into your Linearity Move scene in Design Mode (⌘ + V).

When you copy individual objects or frames as SVG, they are converted into outlines (paths). This means that text objects will also be converted into outlines, making them uneditable as text.

Step 3: Adjusting your animation in Linearity Move

Initial review. Upon importing, Linearity Move will create automatic animations (read more about Auto Animate) based on the differences between consecutive artboards/frames in a scene. Play through the initial animation to see what's been created.

Fine-tuning. Now, dive into the details:

• Adjust keyframes. Modify the timing and duration of movements by dragging keyframes on the timeline.
• Edit elements. Open individual elements to refine their animations, ensuring each movement aligns perfectly with your vision.

By incorporating these steps and tips into your workflow, your transition from Figma designs to Linearity Move animations will be seamless.

Sample Figma file

To help you get started, we've prepared a sample Figma file showcasing an example of well-organized layers. Feel free to upload this file to your Figma account and experiment with importing it into Linearity Move.

This hands-on experience will give you a clearer understanding of how to prepare your designs for smooth animation transitions.