Blog / Design
How to use isometric illustrations in Figma, Framer and Webflow
Most designers do not draw isometric art from scratch; they start from a library and adapt it. Here is how to bring SVG illustrations into Figma, Framer and Webflow and make them look like your brand.
By Abdullah NomanOctober 13, 20263 min read
All three tools handle SVG well, but each has its own quirks. The workflow is the same everywhere: set your colours first, bring in the SVG, keep it vector, and check it in dark mode.
Before you start: set your colours
Recolouring in the tool works, but it is faster to download files already in your brand colours. In the Liniqo library, set the accent and line colour once and every download and copy uses them. Pick light or dark to match the section you are designing.
Figma
- Copy SVG in the library and paste into Figma, or drag the downloaded
.svgfile onto the canvas. It arrives as editable vector layers. - Use Selection colors in the right panel to swap any colour across the whole illustration at once.
- Turn the illustration into a component if you reuse it, so changes update everywhere.
- Scale with constraints set to Scale (or hold K) so strokes scale with the drawing and keep their proportions.
Framer
- Paste the SVG directly onto the canvas; Framer keeps it as a vector graphic.
- For large files, upload the
.svgas an image instead, which keeps the page lighter. - For dark mode, place light and dark versions and show each with your theme variants, or use one inline SVG with colours that follow your theme.
- Add a simple appear effect on scroll if you want motion; keep it to one or two places.
Webflow
- Upload the
.svgto Assets and place it with an Image element. Webflow serves it as a file, so set width and height. - To recolour with CSS or animate the lines, paste the SVG code into an Embed element instead, so the page CSS can reach inside it.
- For CMS pages, add an image field for the illustration and keep all illustrations at the same aspect ratio.
Keep them sharp and light
- Use SVG wherever possible; it stays crisp on every screen.
- If a tool needs PNG, export at 2x the display size.
- Remove unused hidden layers before export to keep files small.
Plugins on the way
Liniqo plugins for Figma, Framer and Webflow are in development, so you will be able to search and place illustrations without leaving the editor. Until then, copy and paste works in all three. Developers can use the React components or let an AI tool place them over MCP.
Questions
How do I import an SVG illustration into Figma?
Paste copied SVG code onto the canvas or drag the .svg file in. It becomes editable vector layers.
How do I change illustration colours in Figma?
Select the illustration and use Selection colors in the right panel to swap each colour across the whole drawing.
Can I recolour an SVG in Webflow?
Only if the SVG is placed as code in an Embed element. An SVG uploaded as an image asset cannot be styled by page CSS.
Does Liniqo have a Figma plugin?
Plugins for Figma, Framer and Webflow are in development. For now, copy SVG from the library and paste it in.
