⭐️ Note: Anima now has a native solution for React Breakpoints in the new codegen!
You can request access to it here.
Check out this video tutorial to learn how to add media queries to your exported React code so your design will be responsive using breakpoints.
Here are the steps described in the video:
Add Breakpoints to your design
Make sure components are added as such in Figma (buttons, for example)
Sync your design to the Anima
Export project into React code, and run it locally
In Terminal, run
npm install, then
You'll get a link to localhost that you can open in browser
Open the project in VS Code, where you should see a Router on App.jsx
What's a Router?
React is a single page application, which uses the same Java Script and HTML to run multiple pages. In order to have links, you need a router
React-router-dom for example is a popualr open source router
Your different breakpoints, including the default one will display in the code, in order to show both versions, use Fireship: Media Query Hook
useMediaQuery.jsxfile to your project, under 'Hooks'
Go back to the router on App.jsx and import
isDesktopas in the screenshot
Change default path and delete other Route
Add a condition based on
When you shrink the browser, it should render the correct breakpoint accordingly!