<aside>

Enhance your visual work - Plan first. Create better.

A free AI assistant that supports graphic designers to plan, create, edit, combine, and improve visual content using practical graphic-design guidance and controlled image-generation workflows.

Without replacing human judgment or creative control.

</aside>

<aside> ➡️

Open AI Graphic Designer

</aside>

<aside>

🔵 Step-by-Step: How to Modify the resulting flat Images with Vectorizer + Figma

</aside>

<aside>

Part 1: How to Vectorize Your Logo with Vectorizer.ai

</aside>

Turning a flat image into a vector file ensures Figma can edit every single piece perfectly, which is especially useful if, for example, the image has gradients and detailed artwork. [1]

  1. Go to the Website: Open your browser and go to Vectorizer.ai.
  2. Upload Your Image: Drag and drop your original flat image (PNG or JPEG) into the upload box on the screen.
  3. Wait for Processing: The AI will automatically trace your graphic, smooth out any gradients, and convert the pixels into clean, adjustable shapes.
  4. Download the Vector: Click the Download button at the top of the preview window.
  5. Choose the Format: Make sure the file format is set to SVG (Scalable Vector Graphics). Keep the default settings and click Download to save it to your computer. [1, 2, 3]

<aside>

Part 2: How to Create Multiple Image Variations in Figma

</aside>

Now that you have your SVG file, open Figma in your browser or desktop app and follow these steps to build your design variations side-by-side.

Step 1: Import and Prepare Your Image

  1. Start a New File: Open a blank design file in Figma.
  2. Import Your SVG: Drag and drop your newly downloaded SVG graphic file directly onto the Figma canvas.
  3. Ungroup the Pieces: Click on your graphic, then press Ctrl + Shift + G (Windows) or Cmd + Shift + G (Mac). This ungroups the artwork so you can click on individual shapes, lines, colors, and internal details. [1, 2, 3]

Step 2: Set Up Your Layouts (Square & Wide Canvas)

  1. Create the Square Frame: Press the F key. Click and drag on the canvas to draw a box. On the right sidebar, set W (Width) to 1000 and H (Height) to 1000.
  2. Create the Wide Canvas Frame: Press the F key again and draw a long rectangle next to the square. On the right sidebar, set W to 1200 and H to 630.
  3. Place Your Original Graphic: Drag your ungrouped artwork inside the Square Frame. Align it right in the center. [1]

Step 3: Create Variation #1 (Changing the Color Palette)

  1. Duplicate the Frame: Click the name text ("Frame 1") sitting just above your square frame. Press Ctrl + D (Windows) or Cmd + D (Mac). This clones your entire layout right next to the original.
  2. Change the Palette: Click on this new duplicated frame. Look at the right-hand sidebar under the Selection Colors panel. You will see all your color properties listed (including gradient color stops, if your image has them). Click any color box to change it. Your shapes will update instantly.

Step 4: Create Variation #2 (Swapping Internal Shapes and Details)

  1. Duplicate Again: Click the frame name of your first color variation and press Ctrl + D to create a third square canvas.
  2. Delete Old Elements: Click directly on any specific shapes or individual components inside this new image that you want to replace and press Delete.
  3. Bring in New Elements: Drag in a new graphic, icon, or illustration (from Figma's built-in Iconify plugin, or another external SVG file).
  4. Resize & Recolor: Use the Selection Colors panel to match the new element's color to your new palette, and place it exactly where the old details used to be.

Step 5: Create the Resized Wide Version

  1. Group Your Graphic: Go back to your favorite finished square artwork variation. Select all of its broken-up vector pieces and press Ctrl + G to lock them into a single group.
  2. Copy to Wide Canvas: Hold Alt (Windows) or Option (Mac) and drag a copy of that grouped image over to your long Wide Canvas Frame.
  3. Shrink Perfectly: Click the artwork inside the wide frame. Press the K key on your keyboard to activate the Scale Tool. Click and drag the corner of the graphic inward to shrink it down neatly without breaking or distorting any of its visual properties.
  4. Reposition: Move your small, scaled-down image over to the side of the wide canvas layout.

Step 6: Export Everything

  1. Hold Shift and click the names of all your different layout frames to select them all at once.
  2. Scroll to the bottom of the right-hand sidebar and click the Export panel.
  3. Choose PNG as your format and click Export. Figma will instantly download all your unique graphic variations and your wide layout as separate, high-quality image files.