All Collections
Popular Articles
Using Breakpoints in Component code inspect
Using Breakpoints in Component code inspect

Here you'll learn how to use Anima's latest Breakpoints feature to generate and export fully responsive code from multiple screens

Leonardo Hurovich avatar
Written by Leonardo Hurovich
Updated over a week ago

Until now we had the Breakpoints feature available only in our Full Flow, when syncing a full project to Anima. Now, in addition to enjoying all of Anima's component code inspect features, you can also set breakpoints to your screens, in order to get a fully responsive components / screens with multiple breakpoints with just some clicks! Let's see how we can do it πŸ˜‰

If you're using Figma's Edit Mode, you can find Anima in the "Plugins" (if you don't have it installed, simply search for "Anima" in the plugins' search bar):

  1. Make sure you have opened Anima in the component code inspect mode. It should look like this:

  2. Select the screens corresponding to each of the breakpoints you want your exported code to have:

  3. Click the "Breakpoints" button:

  4. Next, you should see that a new Responsive page is created. Here you can remove / add Breakpoints, as well as rename your pages. Whenever you're finished, just click "Save page":

  5. Now, when you click and preview any of the screens that were previously set as Breakpoints and generate the code, you should see that the generated code is responsive:

  6. In addition to opening it in Playground, you can also download the project and run it locally in your browser or open in your code editor:

Alternatively, if you're using Figma's Dev Mode, you can access Anima under "Plugins":

New to Anima?

Learn More

Did this answer your question?