# Optimizely help centre --- > Guides, steps, tips and common questions for Optimizely, in full. Landing page: https://raiken.io/kb/optimizely --- # Shrink heavy images inside a Figma file > On the Compression tab, set a maximum size per image and Optimizely scales down every larger image fill in your selection, or everywhere that image is used. ## Goal Make a slow Figma file lighter by reducing oversized photos and screenshots that were pasted in at full resolution. ## Before you start - Layers with image fills selected on the canvas (images inside frames and groups count too). ## Steps 1. **Select the images** Select the image layers, or frames that contain them, and open the Compression tab. Each image gets a card; one image used in several places shows how many. 2. **Set the maximum size** Move Max Size to the largest size an image may have, from 0.01 to 2 MB (1.00 MB by default). Images already at or below it are left alone. 3. **Choose where the change applies** Leave Compress Source Image off to replace the image only in the layers you selected. Turn it on to replace the image everywhere it is used in the file, on every page, including components and copies. 4. **Compress** Click Compress & Optimize Images. A progress window shows Images Processed, Space Saved and Size Reduction, and for each image its Original, Compressed and Saved size. Click Done. ## Tips - Compress Source Image rewrites the image in the whole file. Undo (Ctrl/Cmd+Z) reverts it, so check the result right away. - Compression changes the images in your Figma file; to make smaller files for the web, use the Export tab instead. ## Result Lighter image fills in your Figma file, so it opens, scrolls and saves faster. ## If something goes wrong - **"Select layers with image fills to compress"** -> The selection has no image fills. Select the layers that show the photos, or the frames around them. - **"Image already within size limit"** -> That image is already smaller than Max Size. Lower Max Size if you want it smaller. - **A JPEG photo did not get much smaller.** -> Compression reduces the image's pixel dimensions and saves it as PNG, which can be larger than a JPEG for photos. Try a lower Max Size, and check the result in the progress window. ## Common questions ### How does Optimizely compress an image? It scales the image down in pixel size until it should fit under Max Size and saves it as PNG. There is no format or quality choice, and the result is not guaranteed to be under the target. ### Does compression change my exported images? Only in that later exports start from the smaller image. Exports from the Export tab have their own format and scale settings. ### Can I undo a compression? Yes, with Figma's Undo (Ctrl/Cmd+Z) straight after. ## Related guides - [Export Figma layers as WebP, PNG, JPG or SVG](https://raiken.io/kb/optimizely/optimizely-export-images): Select layers, pick a format and scale in Optimizely's Export tab, and download them as files or one ZIP. --- Source: https://raiken.io/kb/optimizely/optimizely-compress-images (Optimizely help centre). Reviewed: 2026-10-30. --- # Turn Figma frames or a prototype into an animated GIF, WebP, APNG, WebM or SVG > Select frames in order, or one frame of a prototype flow, choose a format and transitions on the Animation tab, preview it, and export. ## Goal Show a flow, a loading state or a micro-interaction as one animated file you can put in a README, a ticket, a slide or a web page. ## Before you start - Two or more frames, or one frame that starts a prototype flow with Navigate to or Swap connections. ## Steps 1. **Select the frames** Select the frames in the order they should play. Or select a single frame of a prototype: Optimizely follows its first Navigate or Swap connection from frame to frame and takes over the delays, transitions and easing. 2. **Pick a format** On the Animation tab, choose GIF, WebP, APNG, WebM or SVG (the default). Each format brings its own starting values, such as 12 fps for GIF and 30 fps for WebM. 3. **Set the timing** Under Defaults, choose a transition (Instant, Dissolve, Smart or Slide), a Curve, the Duration of each transition and a Pause on each frame. For pixel formats set FPS (1 to 60) and Per frame. Use a frame's ⚙ button to give just that frame its own settings. 4. **Order and preview** Drag frames by ⠿ to reorder them, or × to remove one. Play the preview, zoom with Ctrl/Cmd + and −, and click Lock so selecting other layers does not rebuild the animation. 5. **Choose options** Under Options: Loop (on), Boomerang to play back and forth, and Transparency. Under Optimize: Quality, Use every frame or every 2nd to 5th, and for GIF the Palette size. Pick a Scale from 0.5× to 4×. 6. **Export** Click Export Animation. The file downloads as animation- with the format's extension; APNG files end in .png. ## Tips - WebM is recorded in real time, so the export takes about as long as the animation plays. - Include Frames + JSON (pixel formats) adds a second ZIP with every frame as PNG and the timing as JSON. - For SVG, First-Frame SVG + JSON downloads a package with the animation, a player page and a short guide. ## Result An animated file of your frames with the transitions and timing you set. ## If something goes wrong - **"Select at least 2 frames to create an animation"** -> Select two or more frames, or one frame that has prototype connections to the next screens. - **I got a ZIP of PNG frames instead of my animation.** -> The encoder for that format failed in this browser, so Optimizely saved the frames as a PNG sequence instead. Try another format, such as GIF. - **The animation changed when I clicked on the canvas.** -> The tab follows your selection. Click Lock in the preview before you select anything else. ## Common questions ### Can I export a Figma prototype as a GIF? Yes. Select the first frame of the flow, choose GIF and click Export Animation. Optimizely follows the first connection of each frame, so branches beyond the first are left out. ### Which format should I choose? GIF plays everywhere but has at most 256 colors. WebP and APNG keep full color and transparency. WebM is a video file for the web. SVG stays sharp at any size and uses Smart Animate. ### Does the preview speed change the export? No. The 0.5×, 0.25× and 0.1× speeds are only for checking the preview. ## Related guides - [Export Figma layers as WebP, PNG, JPG or SVG](https://raiken.io/kb/optimizely/optimizely-export-images): Select layers, pick a format and scale in Optimizely's Export tab, and download them as files or one ZIP. --- Source: https://raiken.io/kb/optimizely/optimizely-create-animation (Optimizely help centre). Reviewed: 2026-10-30. --- # Export favicons and app icons for web, iOS, Android, Windows and macOS > Pick a platform preset on the Icons & Sprites tab and get a ZIP with every PNG size, plus a combined favicon.ico or AppIcon.icns where the platform uses one. ## Goal Turn one icon in Figma into all the sizes a website or app needs, without exporting each size by hand. ## Before you start - A square icon or logo layer in Figma, ideally at least 1024 × 1024 px for app icons. ## Steps 1. **Select the icon** Select the frame or component that holds your icon and open Optimizely's Icons & Sprites tab. 2. **Choose a preset** Pick the platform in the preset list. The sizes it makes are listed below it. For example PWA Complete (the default) makes 16, 32, 180, 192 and 512 px, Apple Touch Icons 120 to 180 px, iOS App ten sizes up to 1024 px, and Android App 48 to 512 px. 3. **Keep the combined file** Presets marked .ico or .icns show a Combined .ico, Combined .icns or Combined .ico + .icns switch, on by default. It adds one favicon.ico (16 to 256 px) or AppIcon.icns (16 to 1024 px) with every size inside. 4. **Export** Click Export Icons. Optimizely downloads one ZIP named after the preset, with files such as icon-180x180.png. 5. **Rename for your platform** The PNGs use generic names. Rename the ones your project expects, for example icon-180x180.png to apple-touch-icon.png. ## Tips - Select several frames of different sizes, for example a detailed 512 px icon and a simplified 16 px one, and the combined .ico or .icns uses each frame for the size it matches. - Captions can list extra items such as maskable or 1024x500; only the numbered square sizes are exported. ## Result A ZIP with your icon in every size the platform needs, plus a combined .ico or .icns file where the preset includes one. ## If something goes wrong - **All Platforms downloads nothing.** -> That preset does not export in the current version. Run the platform presets you need one after another instead. - **The icons are stretched or not square.** -> Icons are rendered by width, so a layer that is not square gives PNGs that are not square either. Put the icon in a square frame and export that frame. - **site.webmanifest or favicon-tags.html is almost empty.** -> The web.manifest and HTML link tags files do not list the icons yet. Write those few lines yourself, pointing at the PNGs in the ZIP. ## Common questions ### Which sizes does a favicon need? Basic Favicons makes 16 and 32 px PNGs plus a favicon.ico. PWA Complete adds 180 px for Apple devices and 192 and 512 px for installable web apps. ### Can Optimizely make an .icns file for macOS? Yes. The macOS App and Electron App presets add AppIcon.icns when Combined is on. ### Does it create Xcode's Contents.json or Android's adaptive icon XML? Not in the current version. The switches for them are shown, but those files are not generated. ### How many icon exports are free? 6 a day on the Icons & Sprites tab, counted per selected layer. Pro removes the limit. ## Related guides - [Make a sprite sheet with JSON or CSS coordinates, or an SVG sprite](https://raiken.io/kb/optimizely/optimizely-sprite-sheet): Pack selected icons into one image with a JSON or CSS file of their positions, or export them as SVG files and an SVG symbol sprite. - [Export Figma layers as WebP, PNG, JPG or SVG](https://raiken.io/kb/optimizely/optimizely-export-images): Select layers, pick a format and scale in Optimizely's Export tab, and download them as files or one ZIP. --- Source: https://raiken.io/kb/optimizely/optimizely-export-icons (Optimizely help centre). Reviewed: 2026-10-30. --- # Export Figma layers as WebP, PNG, JPG or SVG > Select layers, pick a format and scale in Optimizely's Export tab, and download them as files or one ZIP. ## Goal Get web-ready image files from Figma in a modern format such as WebP, which is usually much smaller than PNG. ## Before you start - Optimizely installed from Figma Community. - The layers or frames you want to export, selected on the canvas. ## Steps 1. **Select the layers** Select one or more frames, groups, components, shapes or text layers on the canvas. Only the layers you select directly count, not layers nested inside them. 2. **Open the Export tab** Run Optimizely. The Export tab shows a card for each layer; layers that share the same image are combined into one card with a count such as 3×. 3. **Choose format and scale** Pick PNG, JPG, WebP (the default) or SVG, and a scale of 0.5x, 1x (the default), 2x or 3x. Scale does not apply to SVG. Older versions also list AVIF, which saves PNG data under an .avif name: use WebP instead. 4. **Pick the cards** Every card starts selected. Click a card to leave it out, or use the export button on a card to export just that one. 5. **Export** Click Export Selected Images. One layer downloads as a single file, several as a ZIP called export-.zip. When it is done, Optimizely says "Export completed! N items exported successfully." ## Tips - After an export, the layers get an Open Optimizely button in Figma's right panel to reopen the plugin. ## Result Image files named after your layers, for example Hero Image becomes hero_image.webp. ## If something goes wrong - **The WebP files in my ZIP are as big as PNGs or will not open as WebP.** -> In the current version, a ZIP of several items holds PNG data even when the files end in .webp. Export WebP images one at a time with each card's own export button until this is fixed. - **"Exported as PNG fallback"** -> The conversion to WebP failed for that layer, so Optimizely saved it as PNG instead. - **Two files are missing from the ZIP.** -> Files are named after their layers, so layers with the same name overwrite each other. Give them different names and export again. - **Some cards are locked with "That's a wrap for today".** -> The free plan exports 6 items a day; the rest unlock tomorrow, or with Pro. ## Common questions ### Why export WebP instead of PNG? WebP files are usually much smaller than PNG at a similar look, so pages load faster. Every current browser shows WebP. ### Can Optimizely export PDF? No. The formats are PNG, JPG, WebP and SVG. ### How are the files named? After the layer, in lower case, with spaces and other special characters replaced by underscores. The scale is not added to the name. ### How many images can I export for free? 6 items a day on the Export tab; the count starts again the next day. Pro removes the limit. ## Related guides - [Export favicons and app icons for web, iOS, Android, Windows and macOS](https://raiken.io/kb/optimizely/optimizely-export-icons): Pick a platform preset on the Icons & Sprites tab and get a ZIP with every PNG size, plus a combined favicon.ico or AppIcon.icns where the platform uses one. - [Shrink heavy images inside a Figma file](https://raiken.io/kb/optimizely/optimizely-compress-images): On the Compression tab, set a maximum size per image and Optimizely scales down every larger image fill in your selection, or everywhere that image is used. --- Source: https://raiken.io/kb/optimizely/optimizely-export-images (Optimizely help centre). Reviewed: 2026-10-30. --- # Make a sprite sheet with JSON or CSS coordinates, or an SVG sprite > Pack selected icons into one image with a JSON or CSS file of their positions, or export them as SVG files and an SVG symbol sprite. ## Goal Ship many small icons as one file for a game, a web page or an icon system. ## Before you start - The icons as separate layers or frames, selected on the canvas. ## Steps 1. **Choose Whole Sprite Sheet** On the Icons & Sprites tab, pick Whole Sprite Sheet (PNG/WebP/JPG) in the preset list. 2. **Set the options** Output Format: PNG or JPEG. Metadata Format: JSON, CSS or JSON + CSS. Icon Padding: 0 to 32 px between icons (2 by default). Packing: Grid (Recommended), Auto (Smart) or Shelf (Horizontal). Turn on Power-of-2 dimensions if your engine needs sizes like 512 or 1024 px. 3. **Export the sheet** Click Export Icons. Optimizely downloads the sprite image and its metadata as separate files, and a message tells you how many icons the sheet holds and its size in pixels. 4. **Match the file name** The JSON and CSS refer to the image as sprite.png (or sprite.jpg), but the download is called sprite--icons-.png. Rename the image to sprite.png, or change the name in the metadata. 5. **Or export an SVG sprite** Pick Modern Favicons, switch from Pixel Icons to SVG, then choose SVG Sprite Sheet. With two or more icons you get one .svg of elements; use an icon with . Individual SVGs exports one file per icon instead. ## Tips - Each icon keeps its own width in the sheet (at least 24 px), so size the icons in Figma the way you want them in the sprite. - The JSON lists every icon's name, x, y, width and height; the CSS gives each icon a class with its background position. ## Result One sprite image plus coordinates for every icon, or an SVG sprite you can reference by icon name. ## If something goes wrong - **My WebP sprite sheet is really a PNG.** -> The WebP option writes PNG data in the current version. Choose PNG, and convert the sheet to WebP afterwards if you need it. - **A frame called sprite_ flashed on the canvas.** -> Optimizely builds the sheet in a temporary frame and deletes it after the export. Nothing is left behind. ## Common questions ### What is a sprite sheet? One image that holds many small images side by side, plus a list of where each one sits. Games and websites load the single file and show the part they need. ### Does a sprite sheet count towards the daily limit? Yes. On the free plan, each icon in the sheet counts as one of the 6 daily icon exports. ## Related guides - [Export favicons and app icons for web, iOS, Android, Windows and macOS](https://raiken.io/kb/optimizely/optimizely-export-icons): Pick a platform preset on the Icons & Sprites tab and get a ZIP with every PNG size, plus a combined favicon.ico or AppIcon.icns where the platform uses one. - [Export Figma layers as WebP, PNG, JPG or SVG](https://raiken.io/kb/optimizely/optimizely-export-images): Select layers, pick a format and scale in Optimizely's Export tab, and download them as files or one ZIP. --- Source: https://raiken.io/kb/optimizely/optimizely-sprite-sheet (Optimizely help centre). Reviewed: 2026-10-30.