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):
Make sure you have opened Anima in the component code inspect mode. It should look like this:
Select the screens corresponding to each of the breakpoints you want your exported code to have:
Click the "Breakpoints" button:
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":
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:
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?