# Hypermatic

> Hypermatic makes purpose-built Figma plugins for design automation, production exports, content operations, presentations, feedback, secure sharing, file conversion, image optimization, and developer handoff.

## Key facts

- Official website: https://www.hypermatic.com/
- Documentation: https://docs.hypermatic.com/
- Publisher: Hypermatic
- Founder: Adam Brock
- Product category: Figma plugins and design workflow software
- Pricing reference: https://www.hypermatic.com/pricing.md
- Machine-readable catalog: https://www.hypermatic.com/products.json
- Dataset and methodology: https://www.hypermatic.com/figma-plugin-workflow-data/

## Products

- [TinyImage](https://www.hypermatic.com/tinyimage.md): Export compressed JPG, PNG, SVG, WebP, AVIF, GIF, MP4, and PDF files from Figma, reducing file sizes by up to 95% with one click.
- [Pitchdeck](https://www.hypermatic.com/pitchdeck.md): Magically turn your Figma designs into animated presentable slide decks, or export them to PowerPoint, PDF, Keynote or Google Slides.
- [Convertify](https://www.hypermatic.com/convertify.md): Export Figma to Sketch, XD, Photoshop, After Effects, InDesign or import XD, Photoshop, InDesign, Illustrator, Google Docs, PDF to Figma.
- [Emailify](https://www.hypermatic.com/emailify.md): Easily create and export responsive, production ready HTML emails (eDMs) from Figma.
- [CopyDoc](https://www.hypermatic.com/copydoc.md): Everything you need to easily export, import, localize and update text in your Figma designs.
- [Bannerify](https://www.hypermatic.com/bannerify.md): Animate and export production ready banners from Figma to HTML, GIFs and Videos, in seconds.
- [Crypto](https://www.hypermatic.com/crypto.md): Securely share your Figma designs and prototypes as password protected URLs or PDF files.
- [Favvy](https://www.hypermatic.com/favvy.md): Export production ready favicons (with code) for your website or PWA from Figma in seconds.
- [Pixelay](https://www.hypermatic.com/pixelay.md): Compare and visually QA your Figma designs against real website URLs using smart overlays.
- [HyperCrop](https://www.hypermatic.com/hypercrop.md): Batch crop/resize multiple images into multiple sizes with presets, smart cropping and face detection.
- [Commentful](https://www.hypermatic.com/commentful.md): Supercharge your Figma comments and gather external feedback from stakeholders.
- [Weblify](https://www.hypermatic.com/weblify.md): Inspect your Figma layers as clean HTML, Tailwind, React or Vue code in one click.

## Learning resources

- [Articles](https://www.hypermatic.com/articles/): Workflow guides, comparisons, and practical explanations
- [Tutorials](https://www.hypermatic.com/tutorials/): Step-by-step Figma plugin tutorials with video transcripts
- [Documentation index](https://docs.hypermatic.com/llms.txt): Concise documentation map
- [Complete documentation corpus](https://docs.hypermatic.com/llms-full.txt): Full product documentation in Markdown

## Additional machine-readable resources

- [Complete marketing corpus](https://www.hypermatic.com/llms-full.txt): Product features, articles, and tutorials
- [Pricing](https://www.hypermatic.com/pricing.md): Current individual-plugin and bundle prices
- [Product catalog](https://www.hypermatic.com/products.json): Structured product, pricing, and canonical URL data


---

## Plugin feature reference

### Figma banner animation — Bannerify

Create polished banner animations without code, preview every frame in Figma, and choose between presets, custom timelines, or supported Figma Motion keyframes.

- URL: https://www.hypermatic.com/bannerify/figma-banner-animation/
- Plugin: Bannerify
- Capabilities: Animation presets; Custom timelines; Figma Motion keyframes
- Workflow: Select the banner frames to animate; Apply presets or tune the timeline; Preview and export every animation
- Documentation: https://docs.hypermatic.com/bannerify/animation/figma-motion

### CSV and XLSX banner variants — Bannerify

Connect CSV or XLSX data to one Figma banner set, then generate the localized, personalized, or resized versions required for the campaign.

- URL: https://www.hypermatic.com/bannerify/csv-banner-variants/
- Plugin: Bannerify
- Capabilities: CSV and XLSX data; Dynamic copy, media, and visibility; Multi-format batch exports
- Workflow: Connect each spreadsheet column to a layer; Preview the data-driven variants; Export every market, offer, or placement
- Documentation: https://docs.hypermatic.com/bannerify/design/variants

### Rich-media HTML5 banners — Bannerify

Add video or Lottie animation to a Figma banner, preview the result, and export the finished HTML5 creative from Bannerify.

- URL: https://www.hypermatic.com/bannerify/rich-media-banners/
- Plugin: Bannerify
- Capabilities: Video embeds; Lottie animation; HTML5-compatible creative
- Workflow: Design the static banner in Figma; Attach the video or Lottie media; Preview and export the rich-media banner
- Documentation: https://docs.hypermatic.com/bannerify/overview/quickstart

### Banner preview and approval pages — Bannerify

Put an entire animated banner campaign on one review page, then publish it to Vercel, Cloudflare, or Netlify for stakeholder approval.

- URL: https://www.hypermatic.com/bannerify/banner-preview-pages/
- Plugin: Bannerify
- Capabilities: One-page campaign previews; Animated banner playback; Vercel, Cloudflare, and Netlify publishing
- Workflow: Select the banners for review; Generate the presentation page; Publish one link for stakeholder approval
- Documentation: https://docs.hypermatic.com/bannerify/export/preview

### Figma comment task board — Commentful

Turn scattered Figma comments into a Kanban board with priorities, deadlines, assignees, and exports for the next review or AI coding session.

- URL: https://www.hypermatic.com/commentful/figma-comment-task-board/
- Plugin: Commentful
- Capabilities: Comment Kanban board; Priorities and assignees; CSV, Markdown, and AI-ready exports
- Workflow: Collect the comments from your file; Prioritize and assign each action; Export or complete the review backlog
- Documentation: https://docs.hypermatic.com/commentful/reviews/export-review-feedback

### Client feedback without a Figma account — Commentful

Send clients a secure browser link where they can review and comment on Figma designs. They do not need a Figma account or license.

- URL: https://www.hypermatic.com/commentful/client-feedback-without-figma/
- Plugin: Commentful
- Capabilities: No Figma account required; Password-protected reviews; Automatic review versions
- Workflow: Choose the frames for review; Create and share a secure link; Bring the feedback back into Figma
- Documentation: https://docs.hypermatic.com/commentful/overview/quickstart

### Browser-based design comments — Commentful

Let stakeholders open a review link in any modern browser, view the selected Figma frames, and leave comments in context.

- URL: https://www.hypermatic.com/commentful/browser-design-comments/
- Plugin: Commentful
- Capabilities: Browser-based review; Frame-level comments; One link for every reviewer
- Workflow: Publish the selected designs; Invite reviewers with one link; Collect comments in a shared review
- Documentation: https://docs.hypermatic.com/commentful/overview/quickstart

### Apply review feedback to Figma — Commentful

Apply approved text and image changes to the matching Figma layers instead of copying each stakeholder edit by hand.

- URL: https://www.hypermatic.com/commentful/apply-feedback-to-figma/
- Plugin: Commentful
- Capabilities: One-click text updates; Image replacement; Changes applied to matching layers
- Workflow: Review the requested change; Approve the feedback item; Apply the update to the matching Figma layer
- Documentation: https://docs.hypermatic.com/commentful/overview/quickstart

### Design feedback integrations — Commentful

Send new comments and replies to Slack, Make, Zapier, spreadsheets, email, or task tools as soon as review activity happens.

- URL: https://www.hypermatic.com/commentful/design-feedback-integrations/
- Plugin: Commentful
- Capabilities: Real-time Figma sync; Slack notifications; Make and Zapier webhooks
- Workflow: Choose the review events to share; Connect the destination tool; Route every new comment or reply automatically
- Documentation: https://docs.hypermatic.com/commentful/reviews/zapier-integration

### Figma file converter — Convertify

Move editable design work between Figma, Sketch, Adobe apps, Canva, and motion tools while preserving supported structure for the destination.

- URL: https://www.hypermatic.com/convertify/figma-file-converter/
- Plugin: Convertify
- Capabilities: Figma and Adobe formats; Canva handoff; Editable layers where supported
- Workflow: Select the source frames or file; Choose the destination format; Continue editing in the destination tool
- Documentation: https://docs.hypermatic.com/convertify/export/canva

### Local Figma file conversion — Convertify

Convert confidential design files on your computer. Client work and proprietary assets stay out of external conversion services.

- URL: https://www.hypermatic.com/convertify/local-file-conversion/
- Plugin: Convertify
- Capabilities: Local processing; No cloud upload; Direct file downloads
- Workflow: Open the source file on your computer; Run the conversion locally; Download the converted result
- Documentation: https://docs.hypermatic.com/convertify/overview/quickstart

### Adobe XD to Figma migration — Convertify

Import Adobe XD files into Figma while preserving supported layers, styles, components, and prototype details instead of rebuilding years of design work manually.

- URL: https://www.hypermatic.com/convertify/adobe-xd-to-figma/
- Plugin: Convertify
- Capabilities: XD file imports; Editable Figma layers; Styles and component migration
- Workflow: Choose the Adobe XD file; Convert the supported layers, styles, and components; Review and continue editing in Figma
- Documentation: https://docs.hypermatic.com/convertify/overview/quickstart

### Design-system file migration — Convertify

Preserve supported components, color styles, typography, and prototype structure when moving a design system into Figma or another creative tool.

- URL: https://www.hypermatic.com/convertify/design-system-file-migration/
- Plugin: Convertify
- Capabilities: Component migration; Color and typography styles; Supported prototype structure
- Workflow: Audit the source design system; Convert the reusable components and styles; Verify the migrated library in Figma
- Documentation: https://docs.hypermatic.com/convertify/overview/quickstart

### Figma to After Effects — Convertify

Send Figma artboards to Adobe After Effects with supported layer structure intact, ready for a motion designer to animate.

- URL: https://www.hypermatic.com/convertify/figma-to-after-effects/
- Plugin: Convertify
- Capabilities: After Effects export; Layer-aware handoff; Motion-ready design files
- Workflow: Prepare the artboards in Figma; Export the selected design layers; Open and animate them in After Effects
- Documentation: https://docs.hypermatic.com/convertify/overview/quickstart

### Import creative and business documents to Figma — Convertify

Bring Illustrator, Photoshop, InDesign, PDF, PowerPoint, Word, Google Docs, and spreadsheet content into Figma as usable layers where the source format allows it.

- URL: https://www.hypermatic.com/convertify/import-documents-to-figma/
- Plugin: Convertify
- Capabilities: Adobe creative file imports; PDF and Office imports; Editable text where supported
- Workflow: Choose the legacy creative or document file; Convert supported content into Figma layers; Clean up and continue the design in Figma
- Documentation: https://docs.hypermatic.com/convertify/import/pdf

### MP4 to GIF layers in Figma — Convertify

Turn MP4 video into an animated GIF layer that can be placed inside Figma designs for product demonstrations, testimonials, and presentation mockups.

- URL: https://www.hypermatic.com/convertify/mp4-to-gif-in-figma/
- Plugin: Convertify
- Capabilities: MP4 input; Animated GIF output; Figma layer placement
- Workflow: Choose the MP4 video; Convert it to an optimized GIF; Place the animated layer in the Figma design
- Documentation: https://docs.hypermatic.com/convertify/overview/quickstart

### Image-to-SVG vectorization — Convertify

Convert JPG, PNG, or WebP artwork into scalable SVG paths that can be edited, recolored, and resized directly in Figma without pixelation.

- URL: https://www.hypermatic.com/convertify/image-to-svg-in-figma/
- Plugin: Convertify
- Capabilities: JPG, PNG, and WebP input; Editable SVG paths; Scalable vector output
- Workflow: Select the raster image; Generate the vector paths; Edit and resize the SVG in Figma
- Documentation: https://docs.hypermatic.com/convertify/overview/quickstart

### Bulk-edit Figma text — CopyDoc

Export Figma text to Excel, edit hundreds of values in one place, and sync the updates back into the matching layers without repetitive copy and paste.

- URL: https://www.hypermatic.com/copydoc/bulk-edit-figma-text/
- Plugin: CopyDoc
- Capabilities: Text export to Excel; Bulk spreadsheet editing; Layer-aware text import
- Workflow: Export the selected Figma text; Edit the copy in the spreadsheet; Sync the revised values back to Figma
- Documentation: https://docs.hypermatic.com/copydoc/overview/quickstart

### Local Figma content processing — CopyDoc

Process confidential copy locally in Figma. Sensitive text and proprietary content stay out of third-party content services.

- URL: https://www.hypermatic.com/copydoc/local-figma-content-processing/
- Plugin: CopyDoc
- Capabilities: Local processing; No external content storage; Direct file import and export
- Workflow: Keep the source content on your computer; Process it with CopyDoc in Figma; Save the updated design or spreadsheet locally
- Documentation: https://docs.hypermatic.com/copydoc/overview/quickstart

### Spreadsheet-to-Figma content sync — CopyDoc

Populate Figma copy, images, component variants, styles, visibility, and repeated layouts from Google Sheets, Airtable, CSV, or XLSX data.

- URL: https://www.hypermatic.com/copydoc/spreadsheet-to-figma/
- Plugin: CopyDoc
- Capabilities: Google Sheets and Airtable; Components, images, and styles; Automatically repeated layouts
- Workflow: Structure the source rows and columns; Map data fields to Figma layers; Generate or re-sync every design variation
- Documentation: https://docs.hypermatic.com/copydoc/sync/structure-spreadsheet

### Shared Figma content library — CopyDoc

Store approved product copy, legal text, campaign messaging, and reusable snippets in a content library that designers can insert across Figma files.

- URL: https://www.hypermatic.com/copydoc/figma-content-library/
- Plugin: CopyDoc
- Capabilities: Shared copy libraries; Google Sheets and Airtable sources; Fast snippet insertion
- Workflow: Organize the approved reusable content; Connect or create the shared library; Insert and refresh snippets in any Figma file
- Documentation: https://docs.hypermatic.com/copydoc/library/google-sheets

### Figma design localization — CopyDoc

Translate and localize Figma designs with AI assistance or an XLSX export and import, while keeping every language tied to the original design system.

- URL: https://www.hypermatic.com/copydoc/localize-figma-designs/
- Plugin: CopyDoc
- Capabilities: AI-assisted translation; XLSX export and import; Multi-language Figma content
- Workflow: Export or select the source-language content; Translate it with the chosen method; Generate and review the localized designs
- Documentation: https://docs.hypermatic.com/copydoc/overview/quickstart

### Find and replace Figma text — CopyDoc

Search for a word, phrase, product name, or typo across Figma, then replace the approved matches in one pass.

- URL: https://www.hypermatic.com/copydoc/find-and-replace-figma-text/
- Plugin: CopyDoc
- Capabilities: Multi-layer search; Bulk text replacement; Brand and terminology updates
- Workflow: Enter the text to find; Review the matching Figma layers; Replace the approved instances in one pass
- Documentation: https://docs.hypermatic.com/copydoc/overview/quickstart

### Figma spell checker — CopyDoc

Scan Figma text for spelling mistakes in more than 40 languages and correct errors before designs reach a client, stakeholder, or production handoff.

- URL: https://www.hypermatic.com/copydoc/figma-spell-checker/
- Plugin: CopyDoc
- Capabilities: 40+ languages; Multi-layer spelling scan; One-click corrections
- Workflow: Select the frames or text to check; Review each detected spelling issue; Apply corrections before sharing the design
- Documentation: https://docs.hypermatic.com/copydoc/overview/quickstart

### Password-protected Figma links — Crypto

Select Figma frames and generate a secure, password-protected preview URL without configuring extensions, API keys, or a separate sharing application.

- URL: https://www.hypermatic.com/crypto/password-protected-figma-links/
- Plugin: Crypto
- Capabilities: Direct Figma upload; Custom frame ordering; Password-protected URLs
- Workflow: Select and order the frames; Set the sharing password; Generate and send the protected link
- Documentation: https://docs.hypermatic.com/crypto/overview/quickstart

### Versioned design preview pages — Crypto

Present static Figma designs on a clean browser-based preview page with version history, navigation, dark mode, fullscreen viewing, and video recording.

- URL: https://www.hypermatic.com/crypto/versioned-design-preview-pages/
- Plugin: Crypto
- Capabilities: Versioned browser previews; Dark mode and fullscreen; Presentation recording
- Workflow: Publish the selected frames; Share the browser preview; Update the version as the design evolves
- Documentation: https://docs.hypermatic.com/crypto/overview/quickstart

### Password-protected Figma prototypes — Crypto

Place a password-protected sharing layer in front of a Figma prototype embed so stakeholders use one controlled URL to access the interactive design.

- URL: https://www.hypermatic.com/crypto/password-protect-figma-prototypes/
- Plugin: Crypto
- Capabilities: Prototype embedding; Password-gated access; Shareable browser URL
- Workflow: Prepare the Figma prototype embed; Create the protected wrapper link; Send the controlled URL to reviewers
- Documentation: https://docs.hypermatic.com/crypto/overview/quickstart

### Password-protected PDFs from Figma — Crypto

Export compressed, password-protected PDF files directly from Figma when a confidential design needs to be shared offline or attached to email.

- URL: https://www.hypermatic.com/crypto/password-protected-pdf-from-figma/
- Plugin: Crypto
- Capabilities: PDF password protection; Built-in PDF compression; Offline secure sharing
- Workflow: Select the Figma pages or frames; Choose the PDF password; Export and share the protected document
- Documentation: https://docs.hypermatic.com/crypto/overview/quickstart

### Figma email component library — Emailify

Build branded email campaigns from more than 500 customizable, email-ready Figma components instead of starting every layout from a blank canvas.

- URL: https://www.hypermatic.com/emailify/email-component-library/
- Plugin: Emailify
- Capabilities: 500+ email components; 20+ complete templates; Reusable branded layouts
- Workflow: Choose a component or template; Customize the content and styling in Figma; Combine approved sections into a complete email
- Documentation: https://docs.hypermatic.com/emailify/design/templates

### AI email designer for Figma — Emailify

Give Codex or Claude Code an approved Emailify component library and a campaign brief, then bring the validated, editable email designs back into Figma.

- URL: https://www.hypermatic.com/emailify/ai-email-designer/
- Plugin: Emailify
- Capabilities: Codex and Claude Code support; Validated Emailify output; Production-ready responsive HTML emails
- Workflow: Package the approved component library; Generate the campaign from the brief; Create and review the editable emails in Figma
- Documentation: https://docs.hypermatic.com/emailify/design/ai-designer

### Responsive email previews in Figma — Emailify

Preview and fine-tune how an HTML email responds across phones, tablets, and desktop widths directly in Figma without editing code.

- URL: https://www.hypermatic.com/emailify/responsive-email-preview/
- Plugin: Emailify
- Capabilities: Mobile, tablet, and desktop previews; Mobile-specific design adjustments; No-code responsive testing
- Workflow: Design the desktop email; Preview it at each target width; Apply mobile-specific adjustments before export
- Documentation: https://docs.hypermatic.com/emailify/overview/quickstart

### Email localization in Figma — Emailify

Translate and localize Figma email designs with AI assistance or an XLSX export and import while keeping each market tied to the same approved design.

- URL: https://www.hypermatic.com/emailify/email-localization-in-figma/
- Plugin: Emailify
- Capabilities: AI-assisted translation; XLSX export and import; Multi-language email designs
- Workflow: Select or export the source copy; Translate it with the chosen method; Review every localized email before export
- Documentation: https://docs.hypermatic.com/emailify/overview/quickstart

### Figma-to-HTML email export — Emailify

Turn an approved Figma email design into responsive, production-ready HTML for Gmail, Outlook, Apple Mail, and other email clients.

- URL: https://www.hypermatic.com/emailify/figma-to-html-email/
- Plugin: Emailify
- Capabilities: Responsive HTML export; Broad email-client compatibility; One-click production files
- Workflow: Complete the email design in Figma; Run Emailify validation and preview; Export the production-ready HTML package
- Documentation: https://docs.hypermatic.com/emailify/overview/quickstart

### Email platform integrations — Emailify

Export Emailify templates from Figma for Klaviyo, Mailchimp, HubSpot, Salesforce, Braze, Customer.io, and dozens of other email platforms.

- URL: https://www.hypermatic.com/emailify/email-platform-integrations/
- Plugin: Emailify
- Capabilities: 40+ platform-specific exports; Email platform compatibility; Export directly from Figma
- Workflow: Choose the destination email platform; Apply any platform-specific settings; Export the compatible HTML template
- Documentation: https://docs.hypermatic.com/emailify/overview/quickstart

### Favicon size preview — Favvy

Preview a favicon at 16px, 32px, and other real-world sizes before export so small details remain crisp and recognizable in browsers and shortcuts.

- URL: https://www.hypermatic.com/favvy/favicon-size-preview/
- Plugin: Favvy
- Capabilities: Real-size favicon previews; Small-size legibility checks; Edit the master icon in Figma
- Workflow: Select the master icon; Inspect it at each required size; Refine the artwork before generating files
- Documentation: https://docs.hypermatic.com/favvy/overview/quickstart

### Favicon HTML code generator — Favvy

Generate the favicon link markup for a website, then copy the ready-to-paste HTML into the document head.

- URL: https://www.hypermatic.com/favvy/favicon-html-code/
- Plugin: Favvy
- Capabilities: Ready-to-paste HTML; Correct favicon file references; Developer handoff
- Workflow: Generate the favicon package; Copy the supplied HTML snippet; Paste it into the website head
- Documentation: https://docs.hypermatic.com/favvy/overview/quickstart

### Figma favicon and PWA generator — Favvy

Generate a production-ready favicon package with website icons, Apple touch icons, PWA assets, required sizes, formats, and implementation files.

- URL: https://www.hypermatic.com/favvy/figma-favicon-generator/
- Plugin: Favvy
- Capabilities: Website favicon files; Apple touch icons; PWA assets and manifests
- Workflow: Choose the finished Figma icon; Generate every required size and format; Hand the complete package to development
- Documentation: https://docs.hypermatic.com/favvy/overview/quickstart

### Batch crop images in Figma — HyperCrop

Create every required crop from a batch of source images in Figma, then review the framing before export.

- URL: https://www.hypermatic.com/hypercrop/batch-crop-images-in-figma/
- Plugin: HyperCrop
- Capabilities: Multi-image batch cropping; Multiple output sizes; Smart crop assistance
- Workflow: Select the source images; Add every required output dimension; Review and export the generated crops
- Documentation: https://docs.hypermatic.com/hypercrop/overview/quickstart

### Precision image cropping in Figma — HyperCrop

Fine-tune image framing down to the pixel when an automatic crop needs art direction for a hero image, campaign placement, or important subject.

- URL: https://www.hypermatic.com/hypercrop/manual-image-cropping-in-figma/
- Plugin: HyperCrop
- Capabilities: Pixel-level crop control; Manual focal-point adjustment; Separate framing for each size
- Workflow: Open the generated crop; Reposition and scale the source image; Approve the exact final framing
- Documentation: https://docs.hypermatic.com/hypercrop/overview/quickstart

### Social-media image size presets — HyperCrop

Generate current image sizes for Facebook, Google Ads, Instagram, LinkedIn, Pinterest, Snapchat, Twitch, X, YouTube, and other platforms from one source.

- URL: https://www.hypermatic.com/hypercrop/social-media-image-sizes/
- Plugin: HyperCrop
- Capabilities: Popular platform presets; Multiple sizes per source image; Batch campaign exports
- Workflow: Choose the target platforms; Add the relevant preset sizes; Generate and review every placement
- Documentation: https://docs.hypermatic.com/hypercrop/overview/quickstart

### Image export naming and folders — HyperCrop

Apply consistent file names and folder structures to large batches of cropped assets so teams and clients can identify every platform, size, and variation.

- URL: https://www.hypermatic.com/hypercrop/image-export-file-naming/
- Plugin: HyperCrop
- Capabilities: Dynamic file names; Custom export folders; Repeatable delivery structure
- Workflow: Define the naming pattern; Choose the folder organization; Export every crop into the structured package
- Documentation: https://docs.hypermatic.com/hypercrop/overview/quickstart

### Figma slide animation — Pitchdeck

Animate Figma presentation layers with real-time previews, reusable presets, and a custom timeline built for the deck you already designed.

- URL: https://www.hypermatic.com/pitchdeck/figma-slide-animation/
- Plugin: Pitchdeck
- Capabilities: Animation presets; Custom presentation timeline; Real-time Figma previews
- Workflow: Select a slide layer; Apply a preset or custom timing; Preview the complete animated sequence
- Documentation: https://docs.hypermatic.com/pitchdeck/overview/quickstart

### Media embeds in Figma presentations — Pitchdeck

Embed GIFs, MP4 video, YouTube, Vimeo, websites, documents, audio, Lottie animation, and other live content into Figma presentation layers.

- URL: https://www.hypermatic.com/pitchdeck/embed-media-in-figma-presentations/
- Plugin: Pitchdeck
- Capabilities: Video and GIF embeds; Website and document embeds; Audio and Lottie content
- Workflow: Select the presentation layer; Paste the media or embed URL; Preview the interactive slide content
- Documentation: https://docs.hypermatic.com/pitchdeck/overview/quickstart

### Password-protected presentation links — Pitchdeck

Publish Figma slides as a password-protected browser presentation or self-host the generated HTML on a custom domain for controlled stakeholder access.

- URL: https://www.hypermatic.com/pitchdeck/password-protected-presentation-links/
- Plugin: Pitchdeck
- Capabilities: Protected presentation URLs; Browser-based presenting; Self-hosted HTML option
- Workflow: Select and order the slides; Configure access and presentation settings; Publish or self-host the presentation
- Documentation: https://docs.hypermatic.com/pitchdeck/overview/quickstart

### Scrollable Figma presentations — Pitchdeck

Present long website mockups, portfolio pieces, and tall Figma frames as naturally scrollable slides instead of shrinking the entire design to fit.

- URL: https://www.hypermatic.com/pitchdeck/scrollable-figma-presentations/
- Plugin: Pitchdeck
- Capabilities: Scrollable slide frames; Long-page mockups; Portfolio and client presentation support
- Workflow: Add the tall frame to the deck; Choose the scrollable slide behavior; Present the design at a readable scale
- Documentation: https://docs.hypermatic.com/pitchdeck/overview/quickstart

### Presentation analytics — Pitchdeck

Measure presentation engagement at a deck and session level, create viewer-specific links, and export the resulting analytics to CSV.

- URL: https://www.hypermatic.com/pitchdeck/presentation-analytics/
- Plugin: Pitchdeck
- Capabilities: Deck and session analytics; Custom viewer links; CSV analytics exports
- Workflow: Create a trackable share link; Send it to the intended viewer; Review and export the engagement data
- Documentation: https://docs.hypermatic.com/pitchdeck/overview/quickstart

### Figma to PowerPoint, Keynote, and Google Slides — Pitchdeck

Export editable Figma presentation files for PowerPoint, Google Slides, Keynote, or Canva so recipients can continue in the tools they already use.

- URL: https://www.hypermatic.com/pitchdeck/figma-to-powerpoint-and-slides/
- Plugin: Pitchdeck
- Capabilities: Editable PowerPoint export; Google Slides and Keynote handoff; Canva-compatible package
- Workflow: Prepare the presentation frames; Choose the destination presentation format; Export and continue editing outside Figma
- Documentation: https://docs.hypermatic.com/pitchdeck/export/canva

### Figma presentation PDF export — Pitchdeck

Export a complete Figma presentation as one PDF with optional clickable links and password protection for email, Slack, or confidential delivery.

- URL: https://www.hypermatic.com/pitchdeck/figma-presentation-to-pdf/
- Plugin: Pitchdeck
- Capabilities: Multi-slide PDF export; Clickable presentation links; Optional password protection
- Workflow: Select the presentation slides; Configure PDF and security settings; Export the complete shareable deck
- Documentation: https://docs.hypermatic.com/pitchdeck/overview/quickstart

### PowerPoint and Markdown to Figma — Pitchdeck

Import PPTX, Markdown, or Deckset presentations into Figma or Figma Slides with editable text, images, tables, notes, links, and supported diagrams.

- URL: https://www.hypermatic.com/pitchdeck/import-presentations-to-figma/
- Plugin: Pitchdeck
- Capabilities: PPTX import; Markdown and Deckset import; Editable Figma slide layers
- Workflow: Choose the source presentation; Import its supported structure; Continue editing the slides in Figma
- Documentation: https://docs.hypermatic.com/pitchdeck/design/import-markdown

### Pitchdeck for Figma Slides — Pitchdeck

Run Pitchdeck in a regular Figma design file or in Figma Slides, with the supported presentation and export tools available in both.

- URL: https://www.hypermatic.com/pitchdeck/pitchdeck-for-figma-slides/
- Plugin: Pitchdeck
- Capabilities: Figma Design support; Figma Slides support; The same tools in both editors
- Workflow: Open the deck in Figma or Figma Slides; Launch Pitchdeck from the file; Use the supported export and presentation tools
- Documentation: https://docs.hypermatic.com/pitchdeck/overview/quickstart

### Compare Figma designs to a website — Pixelay

Overlay a Figma design on the corresponding website to spot spacing, alignment, typography, sizing, and implementation differences before launch.

- URL: https://www.hypermatic.com/pixelay/compare-figma-to-website/
- Plugin: Pixelay
- Capabilities: Design-to-website overlay; Pixel-level visual QA; Fast implementation review
- Workflow: Choose the Figma design; Load the matching website URL; Inspect and document every visible difference
- Documentation: https://docs.hypermatic.com/pixelay/overview/quickstart

### Website visual comparison modes — Pixelay

Switch between overlay, split-screen, difference detection, and four other views as you compare a website with its Figma design.

- URL: https://www.hypermatic.com/pixelay/website-visual-comparison-modes/
- Plugin: Pixelay
- Capabilities: Seven comparison modes; Full-page website review; Difference highlighting
- Workflow: Load the design and website together; Switch between comparison modes; Inspect each page and breakpoint
- Documentation: https://docs.hypermatic.com/pixelay/overview/quickstart

### QA staging and private websites — Pixelay

Run visual design QA against live, staging, local, or private website environments so implementation checks are not limited to publicly accessible pages.

- URL: https://www.hypermatic.com/pixelay/qa-staging-and-private-websites/
- Plugin: Pixelay
- Capabilities: Live and staging URLs; Private environment support; Pre-launch visual QA
- Workflow: Open the target environment; Pair it with the Figma design; Compare the implementation before public release
- Documentation: https://docs.hypermatic.com/pixelay/overview/quickstart

### Target file-size compression — TinyImage

Set a maximum file size in KB for each Figma export. TinyImage runs multiple compression passes to get close to the limit while preserving quality.

- URL: https://www.hypermatic.com/tinyimage/target-file-size-compression/
- Plugin: TinyImage
- Capabilities: Exact KB targets; Per-image overrides; JPG, PNG, SVG, WebP, and AVIF
- Workflow: Set the shared or per-image size targets; Run the batch compression; Review and export the optimized files
- Documentation: https://docs.hypermatic.com/tinyimage/tutorials/compress-figma-image-exports-to-file-size-targets

### Local image compression in Figma — TinyImage

Compress confidential images locally within Figma. Product, campaign, and client visuals stay out of external optimization services.

- URL: https://www.hypermatic.com/tinyimage/local-image-compression/
- Plugin: TinyImage
- Capabilities: Local image processing; No cloud upload; Direct optimized downloads
- Workflow: Keep the source image in Figma; Run TinyImage compression locally; Download the optimized file to your computer
- Documentation: https://docs.hypermatic.com/tinyimage/overview/quickstart

### Downsize oversized Figma image fills — TinyImage

Resize oversized image fills to the dimensions their Figma layers actually need, reducing file weight without manually replacing every source image.

- URL: https://www.hypermatic.com/tinyimage/downsize-figma-image-fills/
- Plugin: TinyImage
- Capabilities: Automatic fill discovery; Layer-size-aware downsizing; Lighter Figma files
- Workflow: Scan the page for oversized fills; Choose the target scale; Replace the wasteful source images
- Documentation: https://docs.hypermatic.com/tinyimage/overview/quickstart

### Figma GIF and video export — TinyImage

Turn Figma designs into optimized GIF, MP4, WebM, APNG, or animated WebP files with custom timing, transitions, and effects.

- URL: https://www.hypermatic.com/tinyimage/export-figma-to-gif-and-video/
- Plugin: TinyImage
- Capabilities: GIF, MP4, and WebM export; APNG and animated WebP; Custom timing and transitions
- Workflow: Select and order the source frames; Configure timing and animation settings; Preview and export the chosen format
- Documentation: https://docs.hypermatic.com/tinyimage/overview/quickstart

### Production image export settings — TinyImage

Convert formats, assign ICC profiles, protect files, and name exports as TinyImage writes production assets from Figma.

- URL: https://www.hypermatic.com/tinyimage/figma-image-export-settings/
- Plugin: TinyImage
- Capabilities: On-export format conversion; ICC color profiles; Dynamic files, folders, and protection
- Workflow: Choose the production requirements; Configure format, color, and naming settings; Export the organized asset package
- Documentation: https://docs.hypermatic.com/tinyimage/settings

### Print-ready PDF export from Figma — TinyImage

Create custom print pages in Figma and export compressed PDFs with CMYK color, ICC profiles, bleed, crop marks, links, and password protection.

- URL: https://www.hypermatic.com/tinyimage/print-ready-pdf-from-figma/
- Plugin: TinyImage
- Capabilities: CMYK and ICC profiles; Bleed and crop marks; Compressed and protected PDF output
- Workflow: Create the print pages and margins; Configure color, bleed, and security; Review the generated frames and export the PDF
- Documentation: https://docs.hypermatic.com/tinyimage/pdf-print

### Figma to HTML, Tailwind, React, and Vue — Weblify

Select a Figma layer and inspect generated HTML, Tailwind, React, or Vue beside the design, then copy or download the implementation.

- URL: https://www.hypermatic.com/weblify/figma-to-html-tailwind-react-vue/
- Plugin: Weblify
- Capabilities: HTML and CSS inspection; Tailwind output; React and Vue output
- Workflow: Select the Figma layer or component; Choose the target framework; Copy or download the generated implementation
- Documentation: https://docs.hypermatic.com/weblify/overview/quickstart

### Live code preview in Figma — Weblify

Render the generated web code at different viewport sizes inside Weblify, then check the result before handoff or download.

- URL: https://www.hypermatic.com/weblify/live-code-preview-in-figma/
- Plugin: Weblify
- Capabilities: Live browser rendering; Responsive viewport previews; Preview beside the Figma design
- Workflow: Inspect the chosen Figma layer; Open the live rendered preview; Check the result at each target width
- Documentation: https://docs.hypermatic.com/weblify/overview/quickstart

### Figma Dev Mode code inspection — Weblify

Give developers access to Weblify code inspection through Figma Dev Mode without requiring edit access to the underlying design file.

- URL: https://www.hypermatic.com/weblify/figma-dev-mode-code-inspection/
- Plugin: Weblify
- Capabilities: Figma Dev Mode integration; View-only developer access; HTML, Tailwind, React, and Vue
- Workflow: Open the design in Dev Mode; Select the layer to inspect; Use Weblify without changing the source design
- Documentation: https://docs.hypermatic.com/weblify/overview/quickstart

### Private Figma code inspection — Weblify

Inspect Figma layers and download generated files while the source design data stays inside Weblify.

- URL: https://www.hypermatic.com/weblify/private-figma-code-inspection/
- Plugin: Weblify
- Capabilities: No external design storage; Inspection inside Figma; Direct local downloads
- Workflow: Keep the source design in Figma; Inspect the layer inside Weblify; Copy or download the result directly
- Documentation: https://docs.hypermatic.com/weblify/overview/quickstart

---

## Complete article and tutorial corpus

---
type: tutorial
title: How to export GIFs from Figma layers using TinyImage
description: Create and export animated GIFs from Figma layers with TinyImage, including frame order, timing, scaling, looping, quality, and transparency.
datePublished: 2020-12-31T00:00:00.000Z
dateModified: 2026-07-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-gi-fs-from-figma-layers-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-gi-fs-from-figma-layers-using-tiny-image.md
---

# How to export GIFs from Figma layers using TinyImage

#### Video Transcript

For the current controls and export options, keep the [TinyImage GIF export documentation](https://docs.hypermatic.com/tinyimage/gif-export) open alongside this walkthrough. You can also compare GIFs with the other formats in our [Figma export format workflow guide](/articles/tinyimage-figma-export-format-workflow-for-static-motion-and-pdf-assets/).

Today I'm going to be showing you how to export animated GIFs from Figma using the TinyImage Figma plugin.

The first thing we need to do is go to the Figma Community and install the TinyImage Figma plugin, if you haven't already. You can do that by searching for the term "TinyImage" in the search bar and under the "Plugins" tab you'll see a result pop up called "TinyImage Compressor", and if you haven't already done so, there'll be an "Install" button on the right hand side; just click on that, and once it says "Installed" you'll be ready to go.

Now that we've got that installed, we can go back to our project and run the Figma plugin just by right-clicking anywhere, going down to "Plugins" and then clicking on "TinyImage Compressor"; and that's just going to fire up the Figma plugin that we just installed.

To create a GIF, we need to click on this button in the top of the Figma plugin that says "Create a GIF"; just click on that once, and it will prompt you to select some layers on your page that you want to use as the frames for your GIF. You can actually select those frames before you click the button and that will automatically load them in, or you can just click the button first like we've just done, and we can select them now. I'll show you what that looks like; just go to your Figma canvas and select as many layers as you want, and these will make up the frames for your GIF and they'll be the ones that we're going to be animating in a second. In my case, I'm just going to be selecting all of the six frames or photos that I've got in my Figma file. You can see down here the button has changed to say "Use Selected Layers" and it's got "6" in the the brackets to tell us how many we've selected. Now I've selected those, I'm just going to click on the "Use Selected Layers" button here and that's just loaded up a preview with all of our layers that we've selected.

I've already used this before, so there's a couple of preset values in here, but I'll go through all of these with you now so you can understand what's going on. The first thing to see is we've just got our little preview up here; this is just playing back what the GIF is going to look like, and what the speed looks like, and the ordering looks like in real time. You can change the order of these by changing the drag and drop feature here; you just click on any of the frame thumbnails and drag them along and you'll be able to manually reorder those frames in the order that they get played back here. The other way you can order your frames is by clicking on this little drop down box here, and you'll see some preset options to do ordering; we can order by the frame layer order and that will order them the way that they're ordered in your layers panel, you can order them visually, so if you want to sort the frames from left to right we can just click on that and you can see here it's going from top to bottom and then left to right; we can do that in columns, as this one is, or we can do it by row, so if we do the row version it's going to sort it from the top all the way across and then go to the next row and then sort all the way across to the bottom. That's the way we can visually order it.

The other thing we can do is change the pause and play state of the preview. I can click "Pause" and that just stops it wherever it is, and then I can manually navigate using these arrows; that's just a really nice way of double checking all the ordering or just pausing the animation to see what's going on. You can also restart the animation to the front just by clicking this reset button, and you can also do that while the animation is playing; if you want to reset it during the animation back to the start to see what it looks like back at the start, that's the quickest way to do that.

The other option we have is changing the speed; if we click the "play" button again, we can actually change the speed in real time. If I change this from one second per frame down to 500 milliseconds per frame, you can see here that it's going much faster than it was before. I can even speed that up again, so I can do it to 100 milliseconds and that's much, much faster again, or I can do the other extreme and slow it right down; if I want to each frame at two seconds each, that's the way I can do it there, I just set the timer to 200 milliseconds, which is two seconds, and you'll get a two second delay per frame now.

The other thing that we can do is individually override those timings as well; if I want frame two and frame four to both be 500 milliseconds, I can do that, and that will override those two frames. You can see here it's jumping over those in half a second, those two specific frames, but all of the other frames are still inheriting the two second delay that we've set down here. That's just a really nice way of overriding those frames if you do want to have a certain frame go quicker or stay on longer than any of the other frames; you can do that manually using those controls there.

The other option that we have is to loop or playback the GIF. By default, it's just set to "infinite", so it will just loop forever, but you can uncheck that option and overwrite it. If we want the GIF to play back only four times and then stop, we can uncheck "infinite" and change that playback value to "4" or I can make it go twice, or I can make it go 10 times, it's really up to you. In my case, I'm just going to leave it on
"infinite" and just have the GIF loop over and over.

The next section we have is the sizing. By default, it will pre-populate the size with whatever the first Figma frame that you've selected is. In our case, we've got the frames here; you can see it's "1711" by "1142", and that's been pre-populated down here, so you don't need to worry about pre-filling that. Of course, you can change those sizes as well, so if we wanted to change that to "500" let's say, you can change that, and we can see the preview instantly update there, or we can actually set that to something different where we've got "500" by "1711", or "500" by "500", and that's just going to change that to a square ratio instead of the more landscape version that we had a second ago. I'm just going to undo that now and put that back to where we had it.

The other thing I did want to show you was the scaling; we've got scaling, and currently it's set to half. By default, it gets set to "@1x" and you can see over here it's giving us a preview of what the actual pixel size is going to be exported as when we save our GIF. At "@1x" it's always going to replicate whatever we've got here, but we can easily halve that or double that or quarter it just by clicking on these presets. If we check "@0.5x", that's going to halve it, if we check "@2x", that's going to double it, and it gives us a preview in pixels of what that's actually going to get saved out as. In my case, I'm just going to leave it as half, I'm going to do "@0.5x".

The other option that we have is to do a background color. Currently we can't see a background because we've got our image filling up the entire frame, but if we change this "cover" option to "contain", and then we change our sizing down to "500", let's say. You can see here, by using the "contain" image option, it's actually making sure that all of the image content always remains in the frame, and it does that by adding in some blank space at the top and the bottom, or the left and the right, depending on the ratio that you've selected. If we change "contain" back to "cover", you can see the cover option will always make sure that the entire frame is covered by the image content, and in that case it will crop off wherever it needs to crop off to make sure that it all fits; but if we do use "contain", that's the option where the background color comes into play.

If we wanted to change this from the default black background to a white background, we can add a hex code for white, so we can do "#fff"; that will change it to the white hex code, and we can see in the preview it's just updating to show us what that would look like if we would export it. You can put any hex code you want in there, and if you are using the "contain" option and you are getting these bars on the left and the right of the top and the bottom, you can change the background color manually just by changing that field there.

The other option we can we can do is transparency; you can make the background transparent if you've got those gaps in there, or more importantly if you're using transparent SVGs, or transparent PNGs, as part of your layers. If you're doing a sprite animation or something along those lines, then the transparent background option can be really handy for exporting a GIF with transparent edges. If you're using character animations, or using transparent GIFs, SVGs or PNGs as your source material; in my case I'm going to leave that off and I'm just going to revert that back, so I'm going to make this just a completely square image and I'm going to set that to "cover".

In this case I'm going to select the image quality to be pretty high, so I'm just going to leave it at 90. It's pretty safe to leave it up there, it's not going to blow out the file size too much compared to something really low with the GIF files in particular; you can leave that somewhere around 80 to 90 and you'll be you'll be pretty safe.

The very last option is dithering; by default no dithering is added. If you are familiar with some of these dithering options and presets, and you know what is going on there, feel free to play around with those; but for almost all cases you can just leave it on "No Dithering", and that's just going to leave the image looking how it's pretty much meant to look.

Okay, now that we've got all of our settings configured the way that we want, and we've got our GIF playing back the way that we like it, all we need to do now is finally click on the button that says "Export GIF" that's just in the top little header up here. I'm going to click on that now and this is going to add all of the frames and render a GIF from Figma for us. It's just finished; I'm just going to click on "Save", as we're prompted to save it to our computer. I'm just going to save it to the desktop, click on "Save", and if I preview that now you can see here it's giving us our GIF file just the way that we saw it in the Figma plugin. We can go ahead and upload this on our website, or we can send it to our team via Slack, or really use it for whatever you want; this is your your exported GIF from Figma. You can basically send it around or share it or upload it anywhere you want, and that will work as expected.

There we go, that's the process of exporting animated GIFs from Figma. This is an updated tutorial of one that we had out a while ago, just because the interface and the features have been updated in the TinyImage Figma plugin quite a lot since that first tutorial, so if you've come from that tutorial, this is a more updated one which will reflect much closer to what you'll see in the the Figma plugin if you download it today. I hope you've enjoyed watching this Figma tutorial, and I hope if you're creating GIFs with Figma then this has been helpful for you. Please let me know if you have any feedback or questions, always happy to help; and until next time, thank you again for watching.

---

---
type: tutorial
title: How to import Adobe Illustrator files to Figma with one click using Convertify
description: Import Adobe Illustrator .ai files into Figma with Convertify, compare bitmap and editable vector imports, and understand text-layer limitations.
datePublished: 2023-03-17T00:00:00.000Z
dateModified: 2026-07-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-import-adobe-illustrator-files-to-figma-with-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-import-adobe-illustrator-files-to-figma-with-one-click-using-convertify.md
---

# How to import Adobe Illustrator files to Figma with one click using Convertify

#### Video Transcript

Before importing a large library, use our [Illustrator to Figma preparation checklist](/articles/convertify-illustrator-to-figma-file-preparation-checklist/) and review the [Convertify import and export documentation](https://docs.hypermatic.com/convertify/) for current format support.

Today I'm going to be showing you how to automatically import Adobe Illustrator (.ai) files directly into Figma using the Convertify Figma plugin.

The first thing to do to get started is if you go to the "Resources" icon at the top of your Figma file, click on that, and then search for "Convertify", and under the Figma "Plugins" tab, you'll see Convertify pop-up. To run it, all you need to do is either click on this "Run" button here, or I'd recommend clicking on this little "More options" icon and clicking on the "Save Figma plugin" item to automatically save that to your Figma plugins list for later.

I've already gone ahead and done that, so I'm going to right click on my Figma canvas, I'm going to go down to "Plugins" then I'm going to go down to "Saved Plugins", I'm just going to click on the "Convertify" item and that's just going to run the Figma plugin that we just saved a second ago. Once the Figma plugin runs, you'll notice that there's a little drop down box here, and by default it's set to "Export Figma to Sketch", but we're going to change that today; if we click on that and then scroll down to the "Import to Figma" group and then go ahead and click on the "Import Adobe Illustrator to Figma" item and that's going to change the context to automatically import Adobe Illustrator (.ai) files into Figma by dropping an .ai file into this little drop zone.

The first thing I'm going to show you is just with this setting turned off, which is actually the default; this setting is to import Adobe Illustrator artboards as vector layers. I'll show you what this looks like in a moment, but to get started I just wanted to show you what it looks like first by importing them as JPG layers or bitmap layers. I'm going to go to my folder on my desktop over here, I've just got a handful of Adobe Illustrator designs, so we're going to try and import each of these into Figma automatically and see what it looks like using the Figma plugin. The first one we can try out is just this little bear illustration, if I drag and drop this Adobe Illustrator (.ai) file into the Figma plugin, I'm just going to drop it into this little drop zone and that's basically going to automatically import that in for me as an image.

Remember, because we've got this little toggle turned off at the moment, this is actually getting imported as a bitmap. You can see here if I zoom in, we've got a bunch of pixels here; it's importing the Adobe Illustrator (.ai) file and it's doing it as a bitmap, but as we know Adobe Illustrator (.ai) files are vector, we lose some of that sharpness by having it as a bitmap. That's okay, what we can do is we can enable this BETA option which, is currently in BETA, but we can turn it on anyway and use it; we're going to check the "Import artboards as vector layers" option and we're going to drop that .ai file in one more time. I'm going to drop in the bear.ai file again, and if we drop it into the Figma plugin, this time you can see it's done it a bit differently; we've got instead of an image, we've actually got this group here. If we open up that group, we can see that these are actually vectors, so if I zoom in now, you'll notice there's a very big difference between the JPG and the SVG version. 

If we go back to the other page and zoom in, you can see that the detail around the face is obviously much more pixelated, whereas the one that we just imported as a vector is much sharper. We've got vector layers, which means we can actually edit these, so that means we can do things like change colors; if we wanted to change the color of this particular bear to be purple for some reason, we can do that, so we can do change him to a different color and this is all editable. We can actually edit the content inside of Figma now, we can remove this background if we want, I'll just find where that layer is that's the frame; we'll just hide the frame background and you can see there that we've basically got our vector from Adobe Illustrator.

I'll show you a few more files, we've got a couple of other ones to go through; there's another one which is just this flyer, again, if we show what that looks like just as a bitmap, drop that .ai file in and that's going to add it as a bitmap, then we can do it again as a vector to see what the difference is. I'm just going to drop that .ai file in, and once this finishes importing the vector; import will take a little bit longer than the the other one, that's just something to be mindful of, but it should import as well. If we zoom in, you can see that this is quite sharp, the only downside to importing vectors that contain text is that the text actually gets imported as vector shapes as well. 

Unfortunately, these aren't actually editable text blocks, these are basically individual vector items. You can see here every letter is basically its own vector shape, so if you did want to make this editable, you'd probably have to just go in and remove these layers and then add your own text layer on top of it. That's just something to flag if you're wondering why the text isn't actually a Figma text layer, the whole thing's just basically individual vectors, and because this feature is still in BETA, this is a bit unoptimized at the moment. I think in a future version it'll have less of these groups and things like, that but for now that's what it looks like.

We'll keep going through, we've got another one which is just this travel template, which is a bunch of templates for some sort of travel campaign. We can drop that in see what that looks like, and you can see here this is the vector version; it's quite sharp, and again, we can see what that looks like just as a JPG as well, drop that .ai file in, and that's just the JPG version as well. 

Finally, we've got this other animals illustration, so we can see what that looks like by dropping that .ai file in; again, it's just a JPG and we'll enable the vector option, and drop that .ai file in one more time, and there we go; let's zoom in, and it's much sharper as you can see. These are obviously editable as well, so this is mostly going to be better for things that don't require text, just because text is going to be broken down into those individual vector layers, but for things like illustrations or things where you've got mostly just paths rather than text layers or things like that, this option is going to be a lot better to use the vector import for.

That's basically what it looks like; as I said, this feature to convert Illustrator files into vector layers is still in BETA, but that should improve over time. As you can see, the quality of the import is actually quite good, and you can edit these shapes, edit all of these vector layers as you would expect, as if you were editing them in Adobe Illustrator. I just wanted to keep this Figma tutorial really quick for today, we don't have to go into too much more detail, and I think those four examples are enough to give you the idea of what the Figma plugin can do for importing Adobe Illustrator (.ai) files into your Figma file.

We'll leave it there for today, and I hope that's been helpful if you've been wondering how to get your Adobe Illustrator (.ai) files or vectors from Adobe Illustrator into Figma automatically this is probably going to be the quickest way to do it I know that you can also copy paste layers from Adobe Illustrator into Figma but that may have different results; yeah feel free to give this a try and hopefully it works with your Adobe Illustrator to Figma workflow; thank you as always for watching and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: Creative Fatigue Banner Refresh Workflow for Paid Media Teams
description: Refresh tiring display-ad creative without changing so many variables that the next performance result becomes impossible to interpret.
datePublished: 2026-07-24T00:00:00.000Z
dateModified: 2026-07-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-creative-fatigue-banner-refresh-workflow-for-paid-media-teams/
markdownUrl: https://www.hypermatic.com/articles/bannerify-creative-fatigue-banner-refresh-workflow-for-paid-media-teams.md
---

# Creative Fatigue Banner Refresh Workflow for Paid Media Teams

When display performance declines, “make new banners” is not a useful brief.

The drop may come from audience saturation, a stale visual hook, a repeated opening frame, an offer that no longer feels timely, or a landing page that has drifted away from the ad promise. If design changes everything at once, the campaign may improve—but nobody learns which change mattered.

[Bannerify](/bannerify/) lets teams animate banner families in Figma and export production-ready HTML, GIF, MP4, and platform-specific packages. That makes it a good production layer for controlled creative refreshes, where the goal is to introduce meaningful novelty without rebuilding the entire campaign system.

This differs from [Evergreen Banner Refresh Workflow for Growth Teams](/articles/bannerify-evergreen-banner-refresh-workflow-for-growth-teams/) and [Multi-Offer Banner Test Matrix Workflow](/articles/bannerify-multi-offer-banner-test-matrix-workflow/). Evergreen refreshes update dates, offers, or seasonal treatment; offer matrices compare propositions. Creative-fatigue work begins with performance decay and asks which creative signal should change while the rest stays interpretable.

## Confirm fatigue before briefing design

Performance decline is not proof of creative fatigue.

Before asking for a refresh, paid media should check:

- audience frequency
- time in market
- spend and delivery changes
- placement mix
- landing-page changes
- tracking or attribution issues
- offer availability

Then give design a brief that includes evidence:

> Frequency increased while click-through rate declined across the same placements. The offer and landing page are unchanged. Refresh the opening visual and motion hook while preserving the proposition and CTA.

That is far more actionable than “the banners are tired.”

## Choose one refresh layer

Banner creative has several layers:

- visual concept
- first-frame hook
- headline
- offer
- CTA
- motion sequence
- brand treatment
- product proof

Choose the primary layer to change in each refresh family.

For example:

- Family A changes the opening visual.
- Family B changes the headline framing.
- Family C changes the motion reveal.

Keep the offer, CTA destination, size set, and core brand system stable unless the test is explicitly about them.

This creates useful variation without turning the campaign into a pile of unrelated ads.

## Design the first frame for recognition and novelty

Fatigued users may recognize the old ad before they read it.

The refreshed first frame should change the campaign’s visual signal quickly:

- a different product angle
- a new crop or composition
- a contrasting background family
- a new proof point
- a different motion entrance

But novelty should not destroy message continuity. If the landing page still leads with the same offer, the banner needs to feel new while making the same promise.

[Banner to Landing Page Message Match Workflow](/articles/bannerify-banner-to-landing-page-message-match-workflow-for-performance-teams/) is the right companion check.

## Build one master before multiplying sizes

Start with one representative placement.

Use Bannerify’s timeline in Figma to establish:

- opening-frame dwell time
- sequence order
- headline reveal
- product or proof moment
- CTA arrival
- final-frame duration

Only after that story works should the team adapt it across the size family.

The smallest and widest placements may need different composition, but they should preserve the same idea. If one size requires an entirely different sequence, record it as an exception instead of pretending automation solved the creative problem.

## Keep a control

Do not replace every old banner at once.

Preserve a control set with:

- the existing creative
- the same audience logic
- comparable placements
- consistent measurement windows

The refresh needs a baseline. Otherwise, improvements or declines may be attributed to creative when delivery conditions changed at the same time.

Design should also keep the old and refreshed families side by side in Figma. That makes it easier to see whether the new work is genuinely different or merely a color swap.

## QA fatigue variants as a family

Controlled testing does not reduce production risk.

Check every export for:

- correct campaign and variant naming
- consistent click-through destination
- approved CTA and offer
- readable first and final frames
- animation timing that still works in small sizes
- file-weight and platform constraints
- correct fallbacks

The [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/) covers the downstream package in more detail.

Also review the variants together on a preview page. A single ad can look fresh in isolation while the full set still feels nearly identical to the control.

## Document what the result teaches

After the test, do not archive the result as “blue won.”

Record the change as a creative principle:

- product-led opening outperformed abstract brand animation
- immediate benefit copy beat a suspense reveal
- customer proof extended performance in high-frequency audiences
- motion changes did not overcome an exhausted offer

Those notes make the next refresh smarter.

Bannerify speeds up producing the family, but the value compounds when the team also preserves the reasoning behind it.

## Creative-fatigue refresh checklist

Before launch, confirm:

- media evidence supports the fatigue hypothesis
- each refresh family has one primary changed layer
- the proposition and landing-page promise still match
- a control remains live
- all sizes preserve the same creative idea
- variant naming maps cleanly to reporting
- platform packages and fallback assets passed QA
- the team knows what outcome would support or reject the hypothesis

## Where Bannerify helps

[Bannerify](/bannerify/) removes the need to hand-code each animated refresh after the idea has been established in Figma.

It cannot diagnose fatigue from campaign data or design a valid experiment on its own. Paid media and creative teams still need to agree on the hypothesis, control, and measurement.

Use Bannerify to make disciplined variation operationally affordable. The best fatigue refresh is not the loudest redesign. It is a controlled creative change that gives the audience something new and gives the team a result it can actually learn from.

---

---
type: article
title: Turn PDF Ad Specifications into Editable Figma Templates
description: Convert publisher media specs into practical Figma templates without trusting a PDF import more than the source document deserves.
datePublished: 2026-07-24T00:00:00.000Z
dateModified: 2026-07-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-pdf-ad-specification-to-editable-figma-template-workflow/
markdownUrl: https://www.hypermatic.com/articles/convertify-pdf-ad-specification-to-editable-figma-template-workflow.md
---

# Turn PDF Ad Specifications into Editable Figma Templates

Media specifications often arrive as a PDF that was written for trafficking teams, not designers.

One page lists desktop sizes. Another contains mobile placements. Footnotes define safe areas, animation limits, fallback requirements, and maximum file weights. The production team then has to translate that document into Figma frames before a single ad can be designed.

[Convertify](/convertify/) can import PDF files into Figma as image-based references or vector content. That makes it useful for recovering the specification, but it does not turn publisher rules into a trustworthy template automatically. The real workflow is import, interpret, rebuild the important constraints, and validate them against the current source.

This is different from [PDF Design File Extraction Workflow](/articles/convertify-pdf-design-file-extraction-workflow/) and [Figma Import Cleanup Checklist](/articles/convertify-figma-import-cleanup-checklist/). Those cover extracting design material or cleaning imported files generally. This article is specifically about converting an ad-specification PDF into an operational template that designers and media teams can safely use.

## Treat the PDF as evidence, not a component library

An imported specification page may look editable while still being structurally useless.

Common import results include:

- dimensions represented as text rather than real frame sizes
- diagrams broken into many vector fragments
- tables with inconsistent grouping
- fonts substituted during import
- footnotes separated from the placements they qualify
- old and new requirements appearing equally authoritative

Do not distribute that import as the finished template.

Keep one page named `Source specification` and place the imported PDF there. Add the publisher, document title, version, and date retrieved. That page is your evidence trail. The working template should be rebuilt beside it with deliberate Figma structure.

## Extract the rules into a placement matrix

Before creating frames, turn the document into a small matrix.

For each placement, record:

- placement name
- width and height
- accepted format
- maximum file size
- maximum animation duration or loop rule
- click-through requirement
- fallback requirement
- safe-area or logo constraint
- source page number

This forces ambiguous language into the open.

If the PDF says “standard display sizes” but gives file-weight limits in a separate appendix, link those rules explicitly. If two pages conflict, flag the placement rather than choosing whichever value is easier.

The matrix is also the right point to involve the media buyer or trafficking owner. Designers should not have to infer whether an old PDF is still current.

## Build frames from actual dimensions

Create one Figma frame per approved placement using the exact pixel dimensions from the validated matrix.

Name frames consistently:

`publisher_campaign_placement_widthxheight`

For example:

`exampleco_spring-leaderboard_728x90`

Inside each frame, add only the guidance designers need:

- safe-area guides
- persistent logo or legal zones
- a note for maximum copy length when the format demands it
- a placement identifier

Keep technical rules in a nearby annotation component instead of placing them inside the exportable artwork. This reduces the risk of a note or red guide accidentally shipping in the final creative.

## Separate universal rules from publisher-specific rules

Most production teams already have internal banner conventions:

- campaign naming
- clickTag QA
- fallback generation
- review stages
- legal approval
- archive structure

The publisher PDF adds a second layer:

- special file limits
- custom safe areas
- restricted animation behavior
- unusual backup-image requirements

Do not merge those layers into a single unexplained checklist.

Mark rules as:

- `team standard`
- `publisher requirement`
- `campaign decision`

When something changes, the owner can update the correct layer instead of cloning an entirely new template family.

## Validate the template with an impossible test

Before production starts, deliberately stress the template:

- add the longest approved headline
- use the widest logo lockup
- include the full legal line
- test the smallest placement
- try the heaviest realistic asset

If the template only works with placeholder copy and a compact logo, it is not ready.

This test also reveals where the specification itself is incomplete. A PDF may define dimensions and file size but say nothing about how legal copy fits. That is a campaign decision the team needs to make, not a gap the designer should discover during final exports.

## Keep version changes visible

Publisher requirements change. The template needs a refresh path.

Record:

- source PDF filename
- retrieved date
- approved template version
- owner who confirmed ambiguous rules
- placements added, removed, or changed

When a new PDF arrives, import it onto a new source page and compare the placement matrix before updating frames. Do not silently overwrite the old reference; teams need to know whether an existing campaign was built against a different specification.

## Handoff checklist

Before the template is used, confirm:

- every frame matches a validated pixel dimension
- each rule points back to a source page or named team standard
- publisher-specific constraints are clearly marked
- safe-area guides cannot be exported accidentally
- the smallest placement survives realistic copy and branding
- conflicting or ambiguous requirements have an owner
- the source document and retrieval date are recorded
- the trafficking team has reviewed the final matrix

The tutorial on [importing PDF files to Figma with Convertify](/tutorials/how-to-import-pdf-files-to-figma-with-one-click-using-convertify/) is useful for understanding the image and vector import options before starting.

## Where Convertify helps

[Convertify](/convertify/) removes the worst first step: manually recreating every page of a specification just to get the information into Figma.

It cannot certify that a publisher PDF is current, resolve contradictory footnotes, or decide which restrictions apply to a campaign. Those remain human decisions.

Use the imported PDF as a traceable reference, turn its rules into a verified placement matrix, and build clean frames from that interpretation. The result is not merely an editable PDF. It is a template the production team can use without repeatedly translating the same media document under deadline.

---

---
type: article
title: Cookie Consent Copy Governance Workflow in Figma
description: Keep cookie banner, preference-center, and privacy-setting copy aligned across product designs, legal review, and implementation.
datePublished: 2026-07-24T00:00:00.000Z
dateModified: 2026-07-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-cookie-consent-copy-governance-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-cookie-consent-copy-governance-workflow-in-figma.md
---

# Cookie Consent Copy Governance Workflow in Figma

Cookie consent copy rarely lives in one place.

The banner is in a website file. The preference center is in another page or component library. Mobile behavior may have its own frames. Legal reviews wording in a document, while engineering maintains the strings that actually ship.

That fragmentation creates familiar drift:

- the banner calls a category “Analytics” while settings call it “Performance”
- button labels change between desktop and mobile
- a legal update reaches the policy but not the preference-center description
- the Figma design shows choices that the implemented interface no longer offers

[CopyDoc](/copydoc/) helps teams export, review, update, find, replace, and synchronize Figma text through spreadsheet-based workflows. For consent copy, that makes Figma easier to govern as part of a wider system rather than treating every text layer as an isolated design detail.

This topic is different from [Form Microcopy Review Workflow in Figma](/articles/copydoc-form-microcopy-review-workflow-in-figma/) and [Word Doc Review Workflow for Figma Legal Copy](/articles/copydoc-word-doc-review-workflow-for-figma-legal-copy/). Those cover consent within forms or document-based legal review generally. Here, the job is keeping one consent vocabulary aligned across banner, preference center, settings, breakpoints, and implementation states.

This is a content-operations workflow, not legal advice. The appropriate choices and wording still need review by the organization’s qualified privacy or legal owner.

## Inventory every consent surface

Do not start by rewriting the banner.

First list the surfaces where consent language appears:

- first-visit banner
- expanded preference center
- cookie category descriptions
- save-confirmation state
- privacy settings inside the product
- consent withdrawal flow
- mobile and embedded variants
- regional or language variants
- error and unavailable states

Export the relevant Figma text with CopyDoc or collect it in a spreadsheet with one row per string. Include the frame, component, state, locale, and owner.

The inventory often reveals that several “small wording issues” are actually one terminology problem repeated across the system.

## Define a controlled vocabulary

Consent language becomes hard to review when the same concept has several labels.

Create a short vocabulary table:

| Concept | Approved label | Avoid |
| --- | --- | --- |
| required storage | Strictly necessary | Essential, Required cookies |
| measurement category | Analytics | Performance, Insights |
| choice confirmation | Save preferences | Confirm, Apply settings |

The actual terms will depend on the product and legal guidance. The important thing is to choose them explicitly.

With CopyDoc, a terminology update can be reviewed as text and then applied across relevant Figma layers instead of relying on designers to find each occurrence manually.

## Keep button labels tied to real behavior

Consent interfaces are especially vulnerable to label drift.

For every action, write down what the product actually does:

- accept all categories
- reject every optional category
- save the current selection
- close without saving
- reopen or withdraw consent

Then compare that behavior with the visible label.

“Continue” is not a substitute for saying what will happen. “Manage” should not silently save a choice. A close icon should not be treated as consent unless that behavior has been deliberately approved.

Copy review cannot replace implementation review, but it can expose where a design label and product behavior are no longer describing the same action.

## Test the full copy set, not ideal desktop strings

Consent copy often expands after legal review and expands again in translation.

Stress-test:

- the longest category description
- the narrowest mobile viewport
- increased text size
- a locale with longer labels
- missing or unavailable category details
- error messages when preferences cannot be saved

Do not shorten a legally significant explanation merely to preserve a tidy card height. If the layout cannot handle the approved copy, the layout needs to change.

CopyDoc’s spreadsheet workflow is useful here because reviewers can compare variants and translations without clicking through every Figma frame.

## Make approval status visible

Consent copy may pass through product, design, privacy, legal, localization, and engineering.

Add simple status fields to the text inventory:

- draft
- privacy review
- legal approved
- localized
- implemented
- verified

Also record the approval date and owner for language that is sensitive or region-specific.

This avoids a dangerous assumption: that because text appears in the polished Figma component, it has been approved for use.

## Re-import carefully

After review, re-import or update the approved text in Figma and inspect:

- wrapping and component height
- button hierarchy
- mobile stacking
- category alignment
- hidden states and variants
- any instance that detached from the source component

Do not treat a successful spreadsheet import as visual signoff.

If a terminology change affects the wider product, pair this workflow with [Figma Terminology Audit Workflow](/articles/copydoc-figma-terminology-audit-workflow/) so the consent interface does not become the only place using the new term.

## Compare Figma with the implementation

Consent governance is incomplete until somebody checks what shipped.

Verify:

- category names match
- descriptions are current
- buttons perform the behavior their labels promise
- regional variants load correctly
- withdrawal language matches the initial choice language
- the preference center and privacy policy use compatible terminology

Record implementation differences back in the inventory. Otherwise, the next design update may start from a Figma source that was never reconciled with production.

## Consent-copy signoff checklist

Before release, confirm:

- every consent surface is represented in the inventory
- one controlled vocabulary is used across banner and settings
- action labels describe actual behavior
- approved legal wording is traceable to an owner and date
- mobile and translated variants survive realistic copy length
- Figma was reviewed after re-import
- the production interface was compared against the approved strings
- future updates have a named content owner

## Where CopyDoc helps

[CopyDoc](/copydoc/) makes the text inside Figma portable enough for serious review and repeatable enough for bulk updates.

It does not determine which consent model is lawful, approve legal wording, or prove that the implementation stores preferences correctly. Those responsibilities remain with privacy, legal, and engineering teams.

What it can do is stop consent language from becoming invisible design-file debris. Export the full system, govern the vocabulary, update Figma from approved text, and verify the implementation. That gives every reviewer a clearer source of truth for one of the most sensitive pieces of copy on the site.

---

---
type: article
title: Security Alert Email Workflow for SaaS Products
description: Design security alert emails that help users assess risk, take the right action, and trust the message before HTML production.
datePublished: 2026-07-24T00:00:00.000Z
dateModified: 2026-07-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-security-alert-email-workflow-for-saas-products/
markdownUrl: https://www.hypermatic.com/articles/emailify-security-alert-email-workflow-for-saas-products.md
---

# Security Alert Email Workflow for SaaS Products

A security alert email has to persuade a cautious user to click without looking like a phishing email.

That tension makes these messages different from ordinary transactional email. A new-login alert, password-change confirmation, suspicious-session warning, or recovery notice must feel urgent enough to act on but calm enough to trust.

[Emailify](/emailify/) helps teams design responsive HTML emails in Figma and move approved modules into production. For security messages, the important work comes before export: defining the event, showing enough evidence, giving the user a safe action, and testing every state that dynamic account data can create.

This article is narrower than [Transactional Email Design Workflow in Figma](/articles/emailify-transactional-email-design-workflow-in-figma/) and [HTML Email Compliance Review Workflow](/articles/emailify-html-email-compliance-review-workflow/). Those cover system messages or compliance broadly. Here, the focus is the trust problem created when an email says “something happened to your account” and asks the recipient to respond.

## Start with the event, not the template

Write one sentence that describes why the email exists:

> Tell the account owner that a new device signed in and let them secure the account if it was not them.

That sentence should determine the hierarchy.

The message needs to answer:

- What happened?
- When did it happen?
- Where or on which device?
- Does the user need to act?
- What happens if they do nothing?
- Where can they verify the event without trusting the email link?

Avoid turning the email into a generic security campaign. Product announcements, upgrade prompts, and unrelated tips weaken the signal.

## Show evidence without exposing more data

Security emails need enough context for recognition, but not a dump of sensitive account information.

Useful details may include:

- approximate time
- browser or device type
- approximate location
- account or workspace name
- the kind of change made

Review each field for both usefulness and privacy. An exact location may be misleading or unnecessarily specific. A full email address may reveal more than needed in a forwarded message. An IP address may help technical users but confuse everyone else.

In Figma, test the module with realistic extremes: long device names, unfamiliar locations, missing location data, and translated dates.

## Separate “no action needed” from “secure your account”

Many alert emails need two paths.

If the user recognizes the event, say clearly that no action is required. If they do not, provide one dominant recovery action such as:

- review account activity
- secure the account
- reset the password
- revoke the session

Do not present several equal buttons for a stressed reader to interpret.

The recovery destination should explain the event again after the click. A user should not land on a generic settings page and wonder whether the email was legitimate.

## Make the email verifiable without clicking

Add a plain-language route such as:

> You can also open the app directly and go to Settings → Security → Recent activity.

This is one of the strongest trust signals a security email can provide. It gives cautious users a way to act without relying on the link in the message.

The sender name, reply behavior, support domain, and footer should also match the product’s normal security communications. A beautifully designed alert sent from an unfamiliar address is still suspicious.

## Design the module for urgency without panic

Urgency should come from clear language and hierarchy, not alarm styling everywhere.

Use:

- a direct event title
- a concise summary
- a readable event-details block
- one obvious action
- a restrained warning treatment

Avoid:

- vague subjects like “Important notice”
- red backgrounds across the entire message
- countdown language unless a real deadline exists
- claims that the account is compromised when the event is merely unrecognized

The visual system should help the user think.

## Build the family, not one perfect alert

Security communication becomes inconsistent when each event is designed separately.

Create reusable variants for:

- new sign-in
- password changed
- email address changed
- recovery method changed
- multi-factor authentication updated
- suspicious activity requiring action

Share the same structural modules, but do not force every event into identical urgency. A successful password-change confirmation and a suspected takeover warning should feel related without sounding equivalent.

[Figma Email Design System Checklist](/articles/emailify-figma-email-design-system-checklist/) is a useful companion for governing those shared modules.

## Review the HTML like an attacker would

Before export and ESP upload, check:

- link destinations use the expected secure domain
- visible URLs and linked URLs do not conflict
- the message still makes sense with images blocked
- the primary action is text, not image-only
- dark mode does not hide warnings or details
- long dynamic values do not break the layout
- the plain-text version preserves the event and recovery path
- the footer does not introduce unrelated promotional links

Then send real test messages. A Figma frame cannot show sender identity, inbox preview text, link inspection behavior, or how the alert feels beside genuine phishing attempts.

## Security alert signoff

The final approval should include product security, support, and whoever owns email production.

Confirm:

- the event definition is accurate
- the email does not overstate the threat
- users can recognize the event from limited, safe details
- one recovery action is dominant
- a no-click verification route is provided
- support knows what the recipient will see
- HTML and plain-text versions agree

For production handoff mechanics, use the [HTML Email Handoff Checklist for Designers and Marketers](/articles/emailify-html-email-handoff-checklist-for-designers-and-marketers/).

## Where Emailify helps

[Emailify](/emailify/) helps keep the security-alert family inside the same Figma system as the product team’s approved components, then exports responsive HTML for production.

It does not decide the security policy, generate trustworthy event data, or validate the final sender configuration. Those need product and engineering ownership.

Use Emailify after the team has made the trust decisions explicit. A good security alert is not the loudest email in the inbox. It is the one that lets the user understand what happened, verify it safely, and take the right action without hesitation.

---

---
type: article
title: Design Portfolio Presentation Workflow for Job Interviews
description: Build a focused Figma portfolio deck that explains decisions clearly, survives interview detours, and can be shared in the right format afterward.
datePublished: 2026-07-24T00:00:00.000Z
dateModified: 2026-07-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-design-portfolio-presentation-workflow-for-job-interviews/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-design-portfolio-presentation-workflow-for-job-interviews.md
---

# Design Portfolio Presentation Workflow for Job Interviews

A portfolio presentation is not a scrolling case study with a microphone attached.

In an interview, the reviewer interrupts. They ask why research changed the direction, want to revisit an early concept, or skip ahead to the outcome. You may have 30 minutes instead of 45. The deck has to support a conversation while still making your contribution unmistakable.

[Pitchdeck](/pitchdeck/) lets designers create presentations in Figma, add notes and interactive content, present from a browser, and export to PowerPoint, Google Slides, Keynote, or PDF. For portfolio interviews, that range matters because the live presentation and the leave-behind should not necessarily be the same artifact.

This topic is distinct from [How to Build Client Presentations in Figma](/articles/pitchdeck-how-to-build-client-presentations-in-figma/) and [Presentation Handoff Checklist for Designers](/articles/pitchdeck-presentation-handoff-checklist-for-designers/). Client presentations seek approval, while general handoff focuses on reliable delivery. A portfolio deck has a different job: help an interviewer understand how you think, what you owned, and what changed because of your work.

## Choose evidence before polishing slides

Start by writing the questions your deck must answer:

- What problem was the team solving?
- What was your specific role?
- Which constraint materially shaped the work?
- What decision did you make, and what evidence supported it?
- How did the final result differ from the starting point?
- What would you change now?

Then gather evidence for those answers.

Useful evidence may include:

- an early flow that exposed a bad assumption
- a research pattern that changed priorities
- two competing design directions
- the system or component decision behind the final screens
- a measurable result, when you can substantiate it
- a candid reflection on what did not work

Do not fill the deck with every polished screen you produced. A smaller set of evidence with clear reasoning is more persuasive than a gallery that leaves the interviewer to infer your contribution.

## Give each case study one argument

A strong case-study section usually has one memorable claim:

> I simplified a confusing setup flow by changing the information model before redesigning the interface.

or:

> I helped a campaign team produce local variants without fragmenting the visual system.

That claim becomes the filter for what belongs in the deck.

If a slide does not help establish the problem, decision, evidence, or outcome, move it to an appendix. This is especially important when several designers contributed to the project. The deck should not imply sole ownership, but it also should not hide your actual work behind “we” on every slide.

## Design for interruption

Interview decks need stronger navigation than linear conference talks.

Build obvious section markers for:

- context
- your role
- the key decision
- the final direction
- outcome and reflection

Keep an appendix for detailed flows, research artifacts, and alternate explorations. If an interviewer asks a deep question, you can jump there without derailing the main story.

Pitchdeck supports clickable links and web presentations, which makes this kind of non-linear navigation practical. Use it sparingly. The interviewer should feel that you are answering their question, not operating a complicated prototype.

## Use speaker notes for the facts you might blur under pressure

Do not put every detail on the slide.

Speaker notes are useful for:

- the exact scope of your contribution
- dates or team composition
- a concise definition of an internal term
- the source of a result or metric
- a reminder of what is confidential
- the transition to the next point

Notes are not a script. If every sentence is written out, delivery often becomes stiff. Use them to protect accuracy and keep the story moving.

## Decide what the interviewer receives

The live deck may contain:

- animated transitions
- embedded video
- speaker-led context
- appendix routes
- details covered by your verbal explanation

The leave-behind has to stand alone.

Choose the format based on the recipient:

- A web link is useful when you want controlled sharing and a polished browser experience.
- PDF is dependable for a compact, read-only follow-up.
- PowerPoint, Keynote, or Google Slides exports make sense only when the recipient has a reason to edit or present the material.

[Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/) goes deeper on that decision.

Before sharing, remove hidden notes, confidential appendix material, internal links, and anything that depended on your narration to avoid being misleading.

## Rehearse three versions

Prepare the same case study at three lengths:

- **two minutes:** problem, role, decision, outcome
- **eight minutes:** enough evidence to show your reasoning
- **fifteen minutes:** the full version with tradeoffs and reflection

This prevents the common failure where the first project consumes the whole interview.

When rehearsing, test the transitions created by questions:

- Can you jump to the final result early?
- Can you return to the narrative without confusion?
- Can you explain your ownership in one sentence?
- Can you finish cleanly if time is cut?

The deck should make those moves easy.

## Portfolio deck signoff checklist

Before the interview, confirm:

- every case study has one clear argument
- your role is explicit and accurate
- confidential material is removed or masked
- results are sourced and not overstated
- key screens are readable on a shared video-call window
- videos have a static fallback
- section navigation and appendix links work
- the leave-behind makes sense without narration
- a local PDF exists in case the network fails

## Where Pitchdeck helps

[Pitchdeck](/pitchdeck/) is valuable because a portfolio deck has to work in several modes: prepared story, interrupted conversation, browser presentation, and post-interview follow-up.

The plugin handles presentation and export mechanics without requiring the designer to rebuild the work outside Figma. The designer still has to make the harder choices: what evidence matters, how ownership is described, and which details the audience can safely receive.

Build the deck around those choices first. Then use Pitchdeck to make the conversation flexible, the delivery dependable, and the follow-up appropriate for the person reviewing your work.

---

---
type: article
title: Cookie Consent Banner Visual QA Workflow from Figma
description: Compare implemented cookie banners and preference centers with Figma across breakpoints, content states, and real page contexts.
datePublished: 2026-07-24T00:00:00.000Z
dateModified: 2026-07-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-cookie-consent-banner-visual-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-cookie-consent-banner-visual-qa-workflow-from-figma.md
---

# Cookie Consent Banner Visual QA Workflow from Figma

A cookie banner can pass functional testing and still ship with broken hierarchy.

The buttons work. Preferences save. The script records a choice. But on the actual site, the banner covers a checkout action, the secondary option looks disabled, translated copy overflows, or the preference center no longer resembles the approved design.

[Pixelay](/pixelay/) compares Figma frames with real websites, including staging, localhost, and private environments. That makes it useful for consent UI because these components need to be reviewed in the page context where they interrupt the user, not only as isolated design-system frames.

This is distinct from [Modal and Drawer QA Workflow from Figma](/articles/pixelay-modal-and-drawer-qa-workflow-from-figma/) and [Responsive Website QA from Figma](/articles/pixelay-responsive-website-qa-from-figma/). Those cover overlay components or responsive implementation broadly. This workflow focuses on consent-specific states: first visit, preference expansion, saved choice, withdrawal, localization, and interaction with the page beneath.

This is a visual implementation review, not a legal or consent-management audit. Privacy and engineering owners still need to verify the lawful model, stored choice, scripts, and regional behavior.

## Map the states before opening the overlay

One Figma frame is not enough.

List the implemented states that need a matching design:

- first-visit compact banner
- expanded preference center
- category toggles
- save confirmation
- error or unavailable state
- returning-user privacy settings
- withdrawal or change-consent state
- mobile layout
- translated variants

Also record the conditions needed to reproduce them. Consent UI often depends on region, browser storage, feature flags, and previous choices.

Without that map, reviewers repeatedly clear cookies and hope the right screen appears.

## Stabilize the environment

Visual comparison is only useful when the page and design represent the same conditions.

Before reviewing:

- use the intended viewport
- reset the consent state
- load the correct regional variant
- disable unrelated experiments
- wait for fonts and page content
- use representative translation strings
- note any browser UI affecting the viewport

For staging or local environments, Pixelay can compare the real URL directly with the Figma frame. If the site requires authentication or private access, use the same setup your team uses for other protected QA flows.

## Compare the banner in real page contexts

Consent UI rarely exists on a blank background.

Test it over:

- a landing-page hero
- a long article
- a form or checkout
- a dark page section
- a mobile screen with sticky navigation

Look for:

- insufficient contrast against the page
- important content covered by the banner
- page controls competing with consent actions
- shadows or dividers disappearing on certain backgrounds
- fixed elements stacking above the preference center
- mobile browser height making actions unreachable

The design-system component may be correct while its site integration is not.

## Review action hierarchy

Overlay or difference modes can reveal spacing drift, but consent QA also needs a semantic visual check.

Ask:

- Is the intended primary action actually most prominent?
- Does the secondary action still look interactive?
- Are category toggles aligned with their labels and descriptions?
- Is the close control present only where designed?
- Does focus styling match the approved accessible state?

A two-pixel difference is less important than an implemented button hierarchy that changes how users understand their choices.

Classify findings so the team does not treat every mismatch equally:

- `choice clarity`
- `blocked content`
- `responsive failure`
- `accessibility presentation`
- `cosmetic drift`

## Stress-test copy and localization

Consent copy is unusually prone to late changes.

Compare the implementation with:

- longest approved heading
- longest category description
- narrowest supported width
- increased browser text size
- a long translated locale
- error messages

Watch for fixed-height panels, clipped descriptions, buttons wrapping inconsistently, and scroll areas whose final action is hard to reach.

If the copy needs its own governance workflow, [Cookie Consent Copy Governance Workflow in Figma](/articles/copydoc-cookie-consent-copy-governance-workflow-in-figma/) covers the source-of-truth problem. Pixelay’s role here is verifying what the browser actually rendered.

## Check the page after a choice

The review should not end when the banner disappears.

After each path:

- confirm the overlay is fully removed
- check that page scroll is restored
- look for layout jumps
- verify sticky elements return to the correct position
- reopen preferences and compare the saved state
- make sure the page does not retain a stray backdrop or focus trap

These are partly functional issues, but they often reveal themselves visually first.

## Run a compact breakpoint matrix

You do not need every possible width. Choose breakpoints that expose different layouts:

- narrow mobile
- wide mobile or small tablet
- desktop
- one short-height viewport

For each, compare the compact banner and expanded preferences.

Short-height testing matters because a consent panel that fits on a tall phone can trap the save action below the fold on a laptop or mobile browser with reduced vertical space.

## Consent UI visual signoff

Before release, confirm:

- every implemented state has an approved reference
- the correct regional and storage conditions were tested
- banner and preference-center hierarchy match the design
- page content and sticky controls are not obstructed
- long copy and translated variants remain usable
- focus, hover, disabled, and selected states are visible
- the page recovers cleanly after the user chooses
- mobile width and short-height layouts passed comparison
- legal and functional checks have separate owners

## Where Pixelay helps

[Pixelay](/pixelay/) makes consent UI review concrete by placing the real browser implementation against the approved Figma design.

It does not prove that scripts respect the user’s choice or that the consent model is compliant. It helps answer a narrower but important question: did the interface users actually receive preserve the hierarchy, states, and responsive behavior the team approved?

Review the component on real pages, reproduce the full state family, and prioritize mismatches that affect choice clarity. Consent UI is too consequential to approve from one tidy desktop frame.

---

---
type: article
title: How to Downsize Large Image Fills in Figma Without Softening the Design
description: Reduce oversized image data inside Figma files while keeping the visible layers sharp enough for design, review, and export.
datePublished: 2026-07-24T00:00:00.000Z
dateModified: 2026-07-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-downsize-large-image-fills-in-figma/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-downsize-large-image-fills-in-figma.md
---

# How to Downsize Large Image Fills in Figma Without Softening the Design

A 4,000-pixel photo inside a 160-pixel card does not make the card four times sharper. It mostly makes the Figma file heavier.

This happens quietly. Designers place original photography into frames, crop it with image fills, duplicate the component across a page, and move on. The visible result looks fine, so nobody notices that a small UI element is still carrying a full-resolution source image.

After enough of those decisions, the file becomes slow to open, awkward to duplicate, and unnecessarily heavy to export.

[TinyImage](/tinyimage/) can downsize oversized image fills directly in Figma. The useful workflow is not “compress everything and hope.” It is to identify where the source resolution exceeds the layer’s real job, reduce that excess deliberately, and keep the few assets that genuinely need more headroom.

This is different from [Original Image Fill Export Workflow from Figma](/articles/tinyimage-original-image-fill-export-workflow-from-figma/), which explains how to recover untouched source images for reuse, and [Figma Export File Size Mistakes](/articles/tinyimage-figma-export-file-size-mistakes/), which focuses on final exported files. Here, the problem is excess image data living inside the working Figma document.

## Why image fills become oversized

Image fills usually start with sensible intentions:

- use the highest-quality product photo available
- preserve flexibility for later crops
- avoid hunting for the original again
- keep one source image across several components

The problem appears when “preserve flexibility” becomes the default for every asset.

A headshot displayed at 64 by 64 pixels rarely needs a 3,000-pixel source embedded in that layer. A thumbnail inside a dense dashboard does not need the same resolution as a full-bleed landing-page hero. An image may also have been copied from a large marketing frame into a much smaller component without its underlying data changing.

The visible bounds changed. The source did not.

## Start with the layer’s largest realistic use

Do not downsize based only on how a layer looks in the current frame.

First ask:

- Is this component used at larger sizes elsewhere?
- Will the frame be exported at 2x?
- Does the image need to survive zooming in a presentation or PDF?
- Is the current crop likely to change?
- Is this Figma file also serving as the only practical source archive?

Those questions separate genuine resolution requirements from accidental bloat.

For a stable UI thumbnail, sizing around the largest intended display density is usually enough. For a flexible campaign component that may become a hero next week, keeping more source data may be sensible. The point is to choose rather than inherit the decision.

## Work from a copy when the source is irreplaceable

Downsizing a fill changes what remains available inside the Figma file. If the only copy of an original client photograph is embedded in that fill, preserve it before reducing anything.

A safe sequence is:

1. confirm the original exists in an asset library or shared storage
2. extract the original fill when it does not
3. label the recovered source clearly
4. then downsize the working layer

This is where the original-image workflow and the downsizing workflow complement each other. One protects the reusable source; the other makes the live design file appropriate for its actual purpose.

## Downsize by page or component family

Running a broad cleanup without context makes review difficult. A better approach is to work through coherent groups:

- avatar and profile components
- article cards and thumbnails
- product gallery images
- testimonial portraits
- documentation screenshots
- presentation or PDF image frames

Select one group, use TinyImage to reduce large fills, and review that family before moving on.

This gives you a meaningful visual comparison. If every testimonial portrait has the same size and treatment, you can quickly tell whether one now looks softer than the others. It also makes it easier to reverse or replace a specific class of assets instead of wondering which of hundreds of images changed.

## Review at the size people will actually see

The wrong QA method is zooming to 800% and inspecting individual pixels.

Review the result at:

- normal Figma canvas zoom
- the intended browser or app size
- the expected export scale
- any presentation or PDF context where the image will appear

Check fine detail that matters to the design: small UI text inside screenshots, hair and facial detail in portraits, subtle product edges, and gradients that can reveal compression artifacts.

If the image looks identical at its real use size, the extra source pixels were not helping the design.

## Keep deliberate exceptions

Some fills should remain large:

- hero photography reused across responsive breakpoints
- images that will be animated with a zoom
- detailed product shots users may inspect closely
- frames intended for high-resolution print
- reusable source compositions with unsettled crops

Mark those exceptions rather than letting them disappear into the general cleanup. A short layer note or a dedicated source-assets page is enough.

The goal is not the smallest possible Figma file. It is a file whose weight reflects the work it actually needs to do.

## A practical image-fill cleanup checklist

Before calling the cleanup complete, confirm:

- original source files are recoverable
- each image was judged against its largest realistic use
- repeated component families were reviewed together
- 2x exports still look sharp where required
- screenshots with small text remain readable
- intentional high-resolution exceptions are documented
- the file was reopened or duplicated to confirm the workflow feels lighter

For PDF-heavy work, the tutorial on [compressing large PDF presentation exports by downsizing Figma image fills](/tutorials/how-to-compress-large-pdf-presentation-exports-from-figma-using-pitchdeck/) shows the same underlying problem in an export context.

## Where TinyImage helps

[TinyImage](/tinyimage/) turns this from a manual replace-and-recrop exercise into a controlled cleanup pass inside Figma.

Manual judgment still matters. The plugin cannot decide whether a 400-pixel portrait will become a full-width campaign image later. But once the team has separated reusable sources from working assets, TinyImage can remove resolution that is doing nothing except slowing the file down.

Treat oversized fills as design-file debt: preserve what is valuable, reduce what is accidental, and review the result at the size that users will really see.

---

---
type: article
title: Webinar Registration Banner Workflow for Demand Gen Teams
description: Create webinar registration banner sets in Figma so demand gen teams can launch coordinated HTML5, GIF, and video ads without message drift.
datePublished: 2026-07-16T00:00:00.000Z
dateModified: 2026-07-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-webinar-registration-banner-workflow-for-demand-gen-teams/
markdownUrl: https://www.hypermatic.com/articles/bannerify-webinar-registration-banner-workflow-for-demand-gen-teams.md
---

# Webinar Registration Banner Workflow for Demand Gen Teams

Webinar banner campaigns look simple until the campaign starts multiplying.

One team needs banners for prospecting. Another wants retargeting creative. Someone else asks for partner versions. The registration page headline changes. The presenter lineup changes. Legal wants one more note. Now every size needs an update and the launch window is getting shorter.

That is why webinar banner production needs a workflow, not just a few ad sizes.

[Bannerify](/bannerify/) is a strong fit because the plugin page already emphasizes creating animated HTML, MP4, GIF, and WebM banner exports for major ad platforms directly from Figma. For demand gen teams, the advantage is not only faster export. It is keeping the campaign system together while the event message evolves.

This article is intentionally different from nearby Bannerify content like [Banner Variant Review Workflow for Campaign Teams](/articles/bannerify-banner-variant-review-workflow-for-campaign-teams/), [Localized Banner Campaign Workflow](/articles/bannerify-localized-banner-campaign-workflow/), and [Retail Media Display Ad Workflow for Ecommerce Teams](/articles/bannerify-retail-media-display-ad-workflow-for-ecommerce-teams/). Those cover variant governance, localization, or retail-media campaigns. This one is about webinar registration banners, where the creative has to sell a time-bound event without letting last-minute updates break the ad set.

## Webinar banners are promise-first ads

The banner usually has one job:

convince the right person that this event is worth their time.

That means the ad needs to establish quickly:

- what the webinar is about
- why the audience should care
- when it is happening, if timing matters in the unit
- what the next action is

This is different from product-story banners that can lean on repeated brand familiarity or product UI. Webinar banners usually live or die on message clarity and urgency.

## Lock the campaign spine before resizing everything

Demand gen teams often rush into asset production before the campaign spine is stable.

For webinar banners, I like to lock:

- event title or value proposition
- audience framing
- presenter or brand proof, if used
- registration CTA language
- deadline or date treatment

Once that spine is stable, resizing becomes faster and safer.

If the team starts generating variants before those pieces are agreed, the campaign ends up with:

- inconsistent headlines
- mismatched dates
- different CTA verbs across sizes
- one size selling the speaker and another selling the topic

That inconsistency hurts registration performance because the campaign stops feeling coordinated.

## Decide early whether the creative is date-led or topic-led

Not every webinar banner should foreground the same thing.

Some campaigns win by emphasizing immediacy:

- live next week
- limited seats
- register before the deadline

Others win by emphasizing the learning value:

- practical framework
- specific workflow problem
- strong speaker expertise

That choice shapes the layout.

If the banner tries to lead with both equally, small sizes become crowded and the message weakens. Make a deliberate call about which idea carries the first impression, then let the rest support it.

## Use motion to clarify, not to decorate

Animated webinar banners are easy to overdesign.

Because the event already has several information points, extra motion can make the message harder to absorb. Strong motion usually does one of these jobs:

- reveal the value proposition in sequence
- bring the date or CTA into emphasis
- support a speaker or proof transition

Weak motion usually:

- delays the core message
- makes the CTA feel late
- over-rotates through too many text blocks
- turns the ad into a mini slideshow

If the first few seconds do not tell the viewer what the event is and what to do next, the animation is probably too clever for the placement.

## Build one reusable registration system, not one banner per size

The event may only happen once, but the banner system should still be modular.

Define reusable pieces like:

- core headline block
- supporting proof or speaker row
- date badge or timing module
- CTA module
- legal or host line if needed

That makes it much easier to update the campaign when:

- the event title changes
- a speaker gets added
- the CTA switches from "Register" to "Watch on demand"
- the webinar date moves

This is where [Bannerify](/bannerify/) is especially helpful. Keeping the structure in Figma makes campaign-wide updates much less painful than editing disconnected ad files in separate tools.

## Treat the post-registration pivot as part of the workflow

Webinar campaigns often change state quickly.

Before the event:

- register now
- save your seat
- join live

After the event:

- watch on demand
- view the recording
- get the recap

If the banner system does not anticipate that change, demand gen teams end up rebuilding creative right when they should be extending campaign value. The smarter move is to plan which elements stay constant and which convert cleanly into on-demand messaging.

That is one reason webinar banners benefit from their own workflow instead of borrowing generic campaign templates.

## A practical QA checklist for webinar banner sets

Before launch, check:

- the same event promise appears across all major sizes
- date and CTA language are consistent
- motion reveals the message quickly
- the smallest units still communicate the core value
- speaker or proof elements do not overwhelm the registration action
- the set can pivot to on-demand creative without total rebuild

For broader trafficking and platform review, [HTML5 Banner QA Matrix by Ad Platform](/articles/bannerify-html5-banner-qa-matrix-by-ad-platform/) and [Display Ad QA Checklist Before Launch](/articles/bannerify-display-ad-qa-checklist-before-launch/) are strong companion reads.

## Where Bannerify helps most

[Bannerify](/bannerify/) is useful for webinar campaigns because these ads combine all the annoying parts of time-sensitive creative:

- changing event details
- lots of size variants
- multiple export formats
- a narrow launch window

When teams manage that with disconnected files, message drift is almost guaranteed. When they build one campaign system in Figma and export the formats they need from there, updates stay much calmer. That is the real payoff: the banners stay aligned to the event story instead of falling apart every time the registration details change.

---

---
type: article
title: Partner Datasheet Migration Workflow from Word and PDF to Figma
description: Move partner-facing product sheets from Word and PDF into a reusable Figma workflow so channel teams can update them without rebuilding every version.
datePublished: 2026-07-16T00:00:00.000Z
dateModified: 2026-07-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-partner-datasheet-migration-workflow-from-word-and-pdf-to-figma/
markdownUrl: https://www.hypermatic.com/articles/convertify-partner-datasheet-migration-workflow-from-word-and-pdf-to-figma.md
---

# Partner Datasheet Migration Workflow from Word and PDF to Figma

Partner datasheets are rarely stored in one clean format.

There is usually:

- a Word file with the latest approved messaging
- a PDF that sales actually sends
- an older layout file somebody can no longer edit safely
- a folder of logos, diagrams, or screenshots in mixed formats

Then a new launch, pricing change, or partner request arrives and the team has to update the sheet fast without recreating the whole thing from scratch.

That is where a migration workflow matters more than another one-off clean-up sprint.

[Convertify](/convertify/) is a strong fit because the plugin page explicitly covers import and export between Figma, Word Docs, PDFs, PowerPoint, Illustrator, InDesign, and other design formats. For partner datasheets, the point is not to convert every file blindly. It is to recover one editable Figma source that channel, product marketing, and design can actually maintain.

This article is intentionally different from nearby Convertify pieces like [Word Doc to Figma Proposal Workflow for Agencies](/articles/convertify-word-doc-to-figma-proposal-workflow-for-agencies/), [Trade Show Collateral Migration Workflow for Marketing Teams](/articles/convertify-trade-show-collateral-migration-workflow-for-marketing-teams/), and [PDF Design File Extraction Workflow](/articles/convertify-pdf-design-file-extraction-workflow/). Those cover proposals, broader event kits, or PDF recovery in general. This one is about recurring partner datasheets, where the copy source, sendable PDF, and reusable design system often drift apart.

## The goal is not "convert the file"

The goal is:

- preserve the latest approved messaging
- rebuild enough editability for future updates
- keep the visual system stable across partner variants
- stop channel teams from living off exported PDFs forever

That distinction matters.

If you treat the job as simple conversion, you will judge success too early. A file that looks right on import but is painful to update next quarter is not a good migration outcome.

## Start by identifying the authoritative source for each layer

Most datasheet migration projects fail because the team assumes one source file is authoritative for everything.

Usually it is not.

For partner-facing sheets, I like to classify the material into three layers:

### Messaging source

This is often the newest Word document or approved copy brief. It tells you:

- which features are still current
- how the product is positioned now
- which disclaimers or partner references changed

### Layout reference

This is often the PDF. It tells you:

- what the partner or sales team has actually been sending
- which sections were considered final enough to circulate
- how the information was grouped visually

### Reusable asset source

This can include logos, diagrams, illustrations, charts, or screenshots from separate files that need to remain replaceable later.

When you split the sources this way, the migration gets calmer. The team stops arguing about which single file is "the real one" and starts using each source for what it is best at.

## Decide what must stay editable in the next revision cycle

Not every piece of a partner datasheet needs the same cleanup effort.

Ask:

- which sections change every quarter?
- which partner-specific blocks get swapped most often?
- what content needs non-designer edits later?
- which tables, screenshots, or proof points are likely to change first?

For many partner sheets, the answer is:

- headline or positioning lines
- pricing or packaging summaries
- proof logos or customer examples
- CTA or next-step language
- local partner branding blocks

Those are the areas where editability matters most. Recover them first.

If a decorative background shape is slightly messy after import but never changes, that matters less than whether the feature table is easy to update next month.

## Use Word for copy truth and PDF for send-truth

This is the core workflow shift.

The Word file may be the cleanest source of approved messaging.

The PDF may be the clearest evidence of what was actually used externally.

You need both.

Rely only on Word and you may rebuild a layout that sales no longer recognizes.

Rely only on PDF and you may preserve outdated language because the circulated document lagged behind the latest approvals.

[Convertify](/convertify/) helps because it gives the team a faster bridge from both directions back into Figma, where the real long-term maintenance should live.

## Rebuild the datasheet as a reusable system, not a rescued artifact

Once the content is visible in Figma, pause before polishing every page detail.

First ask whether the file structure will support the next ten partner updates.

A healthier datasheet system usually includes:

- reusable section patterns for overview, proof, and CTA blocks
- clean styles for feature bullets and benefit summaries
- a predictable spot for partner-specific branding
- image and screenshot areas that can be swapped safely
- text that stays selectable and reasonably editable

This is where a migration becomes valuable. The project stops being "we recovered an old PDF" and becomes "we now have a partner-facing sheet we can maintain."

## Be realistic about what to rebuild manually

Some imported elements are worth preserving closely.

Others are faster to redraw or retypeset cleanly.

Good candidates for rebuild:

- brittle comparison tables
- flattened icons or diagrams that need future edits
- inconsistent typography from legacy office files
- tiny charts that will be updated regularly

Good candidates for closer preservation:

- already-approved section ordering
- stable proof blocks
- brand marks that imported cleanly
- partner-specific structure that sales relies on

That judgment is where the real quality comes from. Migration is not about worshipping the old file. It is about getting to the next stable source of truth faster.

## A practical workflow for partner datasheet recovery

Here is the sequence I would standardize:

1. inventory the Word, PDF, and supporting asset files
2. decide which source is authoritative for copy, layout, and reusable visuals
3. mark the content blocks most likely to change next quarter
4. import the source materials into a Figma-centered workflow with [Convertify](/convertify/)
5. clean the high-change sections first so future edits are easy
6. rebuild only the brittle pieces that will otherwise keep causing maintenance pain

If your team often inherits even messier cross-format source bundles, [Agency Workflow for Mixed Design File Formats](/articles/convertify-agency-workflow-for-mixed-design-file-formats/) is a useful adjacent article because it covers broader intake discipline.

## What to validate before calling the migration done

Do not stop at "the datasheet looks roughly right."

Check whether:

- the latest approved copy actually made it in
- key tables and callouts remain editable
- partner branding areas can be swapped safely
- the PDF layout logic survived where it still matters
- the file structure makes sense to the next person updating it

That last point matters more than teams expect. Partner collateral usually changes under deadline pressure, often by someone who did not do the migration. The file has to help them, not punish them.

## Where Convertify helps most

[Convertify](/convertify/) is especially valuable for partner datasheet work because these documents often live in the least healthy part of a content system: half marketing asset, half sales leave-behind, half brand artifact.

The result is predictable drift between Word, PDF, and whatever design file survives.

When you recover the sheet into Figma deliberately, using Word for messaging truth and PDF for send-truth, the team gets back to one maintainable source instead of three partially trusted ones. That is the real operational win.

---

---
type: article
title: Incident Status and Outage Message Alignment Workflow in Figma
description: Keep outage banners, status updates, support screenshots, and product copy aligned so incident messaging does not drift across teams.
datePublished: 2026-07-16T00:00:00.000Z
dateModified: 2026-07-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-incident-status-and-outage-message-alignment-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-incident-status-and-outage-message-alignment-workflow-in-figma.md
---

# Incident Status and Outage Message Alignment Workflow in Figma

Incident communication drifts faster than almost any other product copy.

That is not because teams are careless. It is because incidents create parallel message streams at the same time:

- a product banner
- a help-center or status explanation
- support macros
- screenshots for customer updates
- post-incident UI clean-up

Within a few hours, those messages often stop matching.

One screenshot still shows the old status text. A help article uses different terminology from the in-product banner. Support copies a workaround line that product already replaced. Nobody is trying to create confusion, but confusion appears anyway.

That is why incident messaging needs alignment workflow, not just strong writing.

[CopyDoc](/copydoc/) is a strong fit because the plugin page centers on exporting, importing, syncing, and updating Figma text from structured sources instead of relying on scattered copy-paste edits. During incident response, that matters because the message is moving quickly and multiple teams need one source of truth they can review together.

This article is intentionally different from nearby CopyDoc content like [Help Center and UI Copy Alignment Workflow in Figma](/articles/copydoc-help-center-and-ui-copy-alignment-workflow-in-figma/), [Release Notes Copy Alignment Workflow in Figma](/articles/copydoc-release-notes-copy-alignment-workflow-in-figma/), and [Error Message and Empty State Review Workflow in Figma](/articles/copydoc-error-message-and-empty-state-review-workflow-in-figma/). Those cover ongoing documentation alignment, release communication, or product-state messaging more generally. This one is specifically about incidents and outages, where language changes fast and inconsistency costs trust immediately.

## Incident messaging is a multi-surface problem

Teams often review the main status copy and assume the job is done.

It is not.

During an outage or degraded-service event, the customer may encounter the message in several places:

- inside the product
- inside a support reply
- inside a screenshot shared by support or marketing
- on a temporary landing or help page
- in a follow-up email

If those surfaces use different issue names, different timelines, or different workaround wording, the incident starts to feel less under control.

That is why I like to think of incident messaging as one language set spread across many surfaces, not as a few unrelated strings.

## Start with a controlled message spine

Every incident does not need perfect prose. It does need stable message components.

At minimum, define:

- issue name or summary
- affected audience
- current customer impact
- current workaround, if any
- next update expectation

Once those pieces are explicit, the team can adapt them per surface without reinventing the facts.

For example:

- the product banner may only need the issue name and workaround
- the support screenshot caption may need affected audience and next update
- the help article may need fuller scope and context

But the underlying spine should stay the same.

## Review screenshots as copy artifacts, not just visual artifacts

This is the step many teams skip.

During incidents, screenshots often travel faster than the interface itself. Support might paste a screenshot into a reply, ops might share it in a thread, or marketing may use it in a customer update.

That means screenshot text is not just visual decoration. It is live communication.

Check that screenshots:

- use the same issue wording as the current banner or notice
- do not preserve outdated timestamps or claims
- do not crop away the clarifying line that makes the message usable
- still make sense if forwarded out of context

If your team regularly updates screenshots during urgent messaging, [Product Marketing Screenshot Copy Workflow](/articles/copydoc-product-marketing-screenshot-copy-workflow/) is a useful adjacent read because the same review discipline applies even though the context is calmer there.

## Keep support wording and UI wording close together

Support and product teams often diverge because they are optimizing for different goals.

Support wants empathy and specificity.

Product wants brevity and UI fit.

Both are reasonable.

The problem starts when they use different core terms:

- one says "service disruption"
- another says "degraded performance"
- one says "sync delay"
- another says "processing backlog"

Customers interpret those differences as uncertainty, even when the teams mean roughly the same thing.

This is where [CopyDoc](/copydoc/) helps operationally. Exporting the relevant text for a short structured review makes it easier to align the wording before it splinters across surfaces.

## Separate temporary incident language from permanent product language

One hidden risk in outage communication is that temporary emergency copy sneaks into longer-term assets.

Examples:

- a temporary workaround line remains in a support screenshot after resolution
- a banner variant gets copied into a later release
- a help article keeps the outage naming convention after the issue is over

That is why incident language needs cleanup ownership too.

I like to mark incident-specific text clearly so teams know:

- what should be removed after resolution
- what should be converted into permanent help content
- what belongs only in support or status history

Without that separation, the cleanup phase becomes guesswork and stale incident language lingers longer than it should.

## A practical alignment loop for outage messaging

This is the sequence I would standardize:

1. define the current incident message spine
2. export the affected Figma text and related support-facing copy with [CopyDoc](/copydoc/)
3. review the wording across banner, screenshot, help, and support surfaces together
4. re-import the approved wording so the live design sources match
5. assign cleanup ownership for anything temporary

That sounds heavier than it is. In practice, it is often a short review that prevents several days of drift and clarification tickets.

## What to check before an incident message ships

Before the next update goes out, confirm:

- the issue name is consistent across surfaces
- the workaround language matches the current guidance
- screenshots do not preserve outdated claims
- timestamps or "next update" wording are still accurate
- temporary copy is marked for later cleanup

If the incident also includes customer email communication, [Incident Update Email Workflow for SaaS Teams](/articles/emailify-incident-update-email-workflow-for-saas-teams/) is a strong companion article because the inbox version should follow the same facts even if the HTML format is different.

## Where CopyDoc helps most

[CopyDoc](/copydoc/) is valuable here because incident messaging usually fails through coordination, not creativity.

The team already knows what happened. What they need is a way to keep the evolving language aligned across the places customers actually encounter it.

If outage communication keeps creating follow-up confusion, do not only rewrite the banner. Build a lightweight alignment system in Figma, treat screenshots and support text as part of the same message family, and use one reviewed source of truth while the incident is live.

---

---
type: article
title: Payment Failure Email Workflow for Subscription Teams
description: Design clearer failed-payment emails in Figma so subscription teams can recover revenue without sending brittle, confusing HTML notices.
datePublished: 2026-07-16T00:00:00.000Z
dateModified: 2026-07-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-payment-failure-email-workflow-for-subscription-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-payment-failure-email-workflow-for-subscription-teams.md
---

# Payment Failure Email Workflow for Subscription Teams

Failed-payment emails sit in an awkward middle ground.

They are operational, but they still affect brand trust.

They are revenue-related, but they cannot read like pressure tactics.

They often contain billing detail, support guidance, and account actions in one message, which means the layout and wording can get messy fast.

That is why payment failure notices deserve their own workflow.

[Emailify](/emailify/) is a strong fit because the plugin page already centers on exporting responsive HTML emails from Figma that work across major email clients and platforms. For failed-payment messaging, the real value is not flashy design. It is having a clean, reviewable HTML path for emails that need to be calm, accurate, and easy to act on.

This article is intentionally different from nearby Emailify content like [Renewal Reminder Email Workflow for SaaS Teams](/articles/emailify-renewal-reminder-email-workflow-for-saas-teams/), [Incident Update Email Workflow for SaaS Teams](/articles/emailify-incident-update-email-workflow-for-saas-teams/), and [Transactional Email Design Workflow in Figma](/articles/emailify-transactional-email-design-workflow-in-figma/). Those cover active-customer billing reminders, operational outages, or system email patterns more broadly. This one is specifically about recovering failed payments, where the message has to reduce confusion and friction before avoidable churn sets in.

## The customer is trying to answer one question first

Before they care about your design system, they want to know:

What exactly do I need to do?

That means a failed-payment email should make these things obvious quickly:

- what failed
- whether service is affected yet
- what action the customer needs to take
- where they can take that action
- who to contact if the message looks wrong

If those basics are buried, the email turns into support load instead of recovery help.

## Treat failed-payment emails as trust messages

Teams often over-index on urgency here.

They add loud warning colors, multiple buttons, or vague "your account is at risk" phrasing that tries to create pressure but mainly creates anxiety.

A stronger pattern is to design the email like an operational notice with one clear action.

That usually means:

- a direct subject and heading
- a short explanation in plain language
- one primary CTA
- supporting billing context only where it helps
- secondary support contact information that does not compete with the action

The job is not to scare the customer into updating their card. The job is to remove uncertainty so recovery is easy.

## Separate billing fact from recovery path

Failed-payment emails often become cluttered because teams mix explanation, policy, and action in the same block.

I like to separate the message into three parts:

### Billing fact

What happened?

Examples:

- the latest payment did not go through
- the card on file needs attention
- the invoice could not be completed

### Recovery path

What should the customer do next?

Examples:

- update the payment method
- review the invoice owner or billing contact
- retry with a different card

### Consequence or timeline

What happens if the issue is not resolved?

Examples:

- no immediate interruption
- service changes on a specific date
- a follow-up reminder will be sent

This structure lowers support friction because the customer does not have to decode the email to figure out which part is informational and which part is actionable.

## Keep the first viewport brutally clear

Failed-payment emails are often opened on mobile, inside other account-management conversations, or by someone forwarding the issue internally.

So the top of the email should establish:

1. the payment issue
2. the required action
3. the primary CTA

Everything else is secondary.

If the first viewport contains a decorative hero, multiple account-management links, or a long paragraph before the CTA, the workflow has already gone off track.

[Emailify](/emailify/) is especially useful here because the team can review mobile and desktop behavior before the HTML reaches the ESP and starts accumulating platform-specific edits.

## Be precise about timing and account impact

This is where a lot of failed-payment emails lose credibility.

Vague lines like "please update your information as soon as possible" are weak if the account actually has a defined grace period or renewal date.

Likewise, overly hard language is risky if service is not changing yet.

The layout should make room for timing details such as:

- next retry date
- grace period end date
- whether access remains active for now
- whether the email went to the billing owner or a broader account contact

Those details do not need to dominate the design, but they do need to be accurate and easy to spot.

## Keep support and finance review close to the template

Failed-payment emails are one of those flows where tiny wording choices have outsized consequences.

Support cares because unclear emails generate tickets.

Finance cares because billing language and timing need to match reality.

Lifecycle or CRM teams care because the sequence has to stay consistent across reminders.

That is why I would review these emails with:

- one owner for billing accuracy
- one owner for support clarity
- one owner for HTML production and deliverability handling

The Figma source should make those reviews easier, not push them into separate screenshots, exports, and half-edited code fragments.

## A practical payment-failure workflow

For subscription teams, this sequence is usually enough:

1. define a failed-payment email family separate from renewal or promotional sends
2. structure the message around fact, action, and timeline
3. review the first viewport on mobile before export
4. confirm the CTA destination and billing language with the actual account workflow
5. export the responsive HTML with [Emailify](/emailify/) only after support and billing owners approve the same version

That keeps the message calm and operational instead of letting it drift into generic dunning copy.

## Common mistakes to avoid

- hiding the required action below the fold
- stuffing invoice policy text ahead of the recovery CTA
- using vague urgency instead of clear dates
- treating support contact info as a visual afterthought
- copying renewal-email modules into a failed-payment template without adjusting the tone

These mistakes happen because teams assume "billing email" is one category. It is not. Renewal, failed payment, invoice delivery, and plan-change messaging each have different emotional and operational jobs.

## What to validate before shipping

Before the email goes live, check:

- the customer can tell what happened immediately
- the recovery action is obvious
- the timing language is accurate
- mobile review did not bury key account information
- support contact information is present but not distracting
- the exported HTML still reflects the approved message structure

If the sequence includes follow-up reminders, make sure the first email feels like the beginning of a coherent recovery path rather than a one-off warning.

## Where Emailify helps most

[Emailify](/emailify/) is valuable for failed-payment workflows because these emails live where brand, billing, support, and lifecycle operations all collide.

They need to be production-ready, responsive, and easy to review, but more importantly, they need to make the next customer action feel obvious and safe.

If your payment recovery emails keep generating unnecessary tickets or soft churn, the fix is usually not "more urgency." It is a better-designed workflow in Figma that turns a tense billing message into a clear operational handoff.

---

---
type: article
title: Internal Business Case Deck Workflow for SaaS Champions
description: Build internal approval decks in Figma so software champions can explain value, rollout risk, and next steps without stitching together outdated slides.
datePublished: 2026-07-16T00:00:00.000Z
dateModified: 2026-07-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-internal-business-case-deck-workflow-for-saas-champions/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-internal-business-case-deck-workflow-for-saas-champions.md
---

# Internal Business Case Deck Workflow for SaaS Champions

Most software buying processes do not stall because the champion lacks enthusiasm.

They stall because the champion has to explain the purchase internally with weak materials.

There is a pricing screenshot from the vendor site. A few copied bullets in a doc. One security slide from a previous deal. Some vague ROI claims in an email. Then the champion gets asked to summarize the recommendation for finance, leadership, operations, or procurement and ends up rebuilding the story in PowerPoint the night before the meeting.

That is where a dedicated internal business case deck helps.

[Pitchdeck](/pitchdeck/) is a strong fit because the source deck can stay in Figma while the output can still match the audience: PDF for a locked approval pack, PowerPoint for light internal edits, Google Slides for collaborative comments, or a hosted web deck when multiple stakeholders need to review asynchronously.

This article is intentionally different from nearby Pitchdeck pieces like [Mutual Action Plan Deck Workflow for Enterprise Sales Teams](/articles/pitchdeck-mutual-action-plan-deck-workflow-for-enterprise-sales-teams/), [Security Review Deck Workflow for B2B SaaS Teams](/articles/pitchdeck-security-review-deck-workflow-for-b2b-saas-teams/), and [QBR Deck Workflow for Customer Success Teams](/articles/pitchdeck-qbr-deck-workflow-for-customer-success-teams/). Those focus on deal coordination, diligence, or account review. This one is about the internal buying story a champion needs when they are trying to help their own organization say yes.

## A business case deck is a translation layer

The champion already understands the pain.

The rest of the organization may not.

That means the deck has to translate between:

- the user problem
- the financial argument
- the implementation risk
- the approval path

It is not enough to prove that the product looks good. The deck needs to help other people answer:

- why now?
- why this tool?
- what changes for the team?
- what does the organization get in return?
- what are the obvious risks and how are they managed?

When that story is missing, approval conversations drag out because every stakeholder starts asking a different version of the same basic question.

## Separate the buyer story from the vendor story

This is where many internal decks go wrong.

The champion forwards vendor slides that were built for selling, not for internal decision-making. The result usually leans too hard on product features and not enough on operational relevance.

A better internal business case deck usually includes:

- the team's current workflow problem
- what manual work or delay is disappearing
- expected savings in time, risk, or coordination overhead
- the rollout scope and ownership
- any legal, security, or procurement dependencies
- a clear recommendation and next step

That structure makes the deck feel like a decision document instead of a repackaged sales presentation.

## Keep the deck short enough to circulate

An internal approval deck often gets forwarded.

That matters.

The person reading it may not have attended a demo. They may only spend a few minutes with the file. So the deck should survive circulation without live narration.

I like approval decks that answer the core case in six to ten slides:

1. current workflow and cost of staying put
2. what the tool changes
3. expected benefit for the team
4. rollout scope and ownership
5. risk, security, or procurement notes
6. recommendation and approval ask

Anything more detailed can live in an appendix or linked resource.

If the main story becomes too long, the approval path gets harder because stakeholders stop seeing the throughline.

## Use one slide for the cost of inaction

Champions often over-focus on the tool and under-explain the current pain.

That is a mistake.

Internal stakeholders usually approve software faster when the deck makes the current cost legible:

- time lost to manual work
- extra review rounds
- file-version chaos
- fragile handoffs
- dependency on specialists for repeatable work

The point is not to dramatize. It is to make the existing burden concrete enough that "doing nothing" feels like a real choice with real cost.

This is usually the slide that earns attention from managers who are not close to the workflow day to day.

## Show rollout confidence without pretending rollout is trivial

An internal business case deck gets stronger when it acknowledges the adoption path clearly.

Stakeholders want to know:

- who will use the tool first
- whether rollout is team-wide or narrow
- what the success milestone looks like
- how long the evaluation period should last
- whether there are dependencies on design, marketing, or engineering

Do not present rollout as magic.

A short, honest rollout slide often does more for approval confidence than another feature slide. It signals that the team has thought beyond purchase into actual use.

If the evaluation path includes a formal diligence pack, connect the deck to the supporting materials rather than trying to stuff everything into the main story. That keeps the approval slides readable while still respecting procurement and security needs.

## Pick the export format based on the approval behavior

This is where [Pitchdeck](/pitchdeck/) is particularly useful.

Different internal buyers use the deck differently:

- leadership may want a fixed PDF they can forward
- a department head may want PowerPoint so they can trim slides for their own meeting
- cross-functional reviewers may prefer Google Slides comments
- the original champion may want a hosted version they can send around asynchronously

Choosing that path before the last minute changes the deck structure.

A file that will be forwarded as PDF needs stronger standalone framing.

A file that will be lightly edited in PowerPoint needs layouts that can absorb small changes without collapsing.

A hosted deck can benefit from clearer step-by-step sequencing because viewers may read it without the champion present.

## A practical structure for a champion-ready approval deck

This is the version I would standardize:

- `Problem`: what is slowing the team down now?
- `Workflow`: where the existing process breaks or gets expensive
- `Solution`: what changes with the tool in practical terms
- `Impact`: time saved, risk reduced, or speed gained
- `Rollout`: who uses it first and how success gets measured
- `Decision`: what needs approval today

That sequence works because it stays close to internal decision language. It avoids turning the deck into either a product demo or a procurement appendix.

## What to review before sharing the deck

Before the champion sends it around, confirm:

- the current pain is concrete, not generic
- the benefit is tied to a real workflow
- rollout ownership is visible
- risk notes are acknowledged without dominating the story
- the approval ask is specific
- the chosen export format matches how the file will circulate

If those basics are clear, the deck becomes much easier for other stakeholders to carry into their own meetings.

## Where Pitchdeck helps most

[Pitchdeck](/pitchdeck/) is useful here because internal approval decks sit in a messy zone between polished design work and practical organizational communication.

They need enough structure to look credible, enough flexibility to adapt to different internal audiences, and enough export control to survive being forwarded around a company.

If software champions keep winning enthusiasm in meetings but losing momentum afterward, the business case deck is usually the missing bridge. Build that deck in Figma, treat it as a reusable decision asset rather than a one-off slide scramble, and internal approvals get a lot less fragile.

---

---
type: article
title: Billing Portal QA Workflow from Figma
description: Compare billing portals against Figma designs so pricing, invoices, payment updates, and plan-change flows stay trustworthy after implementation.
datePublished: 2026-07-16T00:00:00.000Z
dateModified: 2026-07-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-billing-portal-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-billing-portal-qa-workflow-from-figma.md
---

# Billing Portal QA Workflow from Figma

Billing portals create a specific kind of design QA risk.

They often look straightforward in Figma, but once implemented they start accumulating tiny trust-breaking differences:

- invoice rows wrap awkwardly
- plan cards lose hierarchy
- payment-method forms feel cramped on smaller screens
- cancellation or downgrade messaging drifts from the approved wording
- confirmation states look more improvised than the rest of the product

None of these issues feels dramatic on its own. Together, they make the most trust-sensitive part of the product feel less reliable.

That is why billing surfaces deserve their own QA workflow.

[Pixelay](/pixelay/) is a strong fit because the plugin page already emphasizes comparing Figma designs against real sites, staging environments, localhost builds, and logged-in pages directly in the browser. Billing portals are one of the clearest cases for that workflow because the difference between "technically working" and "actually trustworthy" is often visual and contextual.

This article is intentionally different from nearby Pixelay pieces like [Pricing Page QA Workflow from Figma](/articles/pixelay-pricing-page-qa-workflow-from-figma/), [Account Settings QA Workflow from Figma](/articles/pixelay-account-settings-qa-workflow-from-figma/), and [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/). Those cover marketing pricing pages, general settings surfaces, or logged-in review more broadly. This one is about billing portals, where plan changes, payment actions, invoices, and account trust all collide.

## Billing QA is trust QA

Customers do not open a billing portal to admire the interface.

They open it because they need certainty:

- what plan am I on?
- what happens if I change it?
- where is my invoice?
- which card is being charged?
- how do I fix a billing issue?

That means visual drift in billing is more expensive than drift in a low-stakes surface.

If the hierarchy is weak or the forms feel cramped, users do not just think "this spacing is off." They think "I hope I do not break something important."

## Map each billing state before you compare it

Billing QA often gets reduced to one "account" screenshot.

That misses the real work.

I prefer to list the important states first:

- current plan overview
- payment method update
- invoice history
- upgrade or downgrade confirmation
- failed-payment or grace-period notice
- cancellation or renewal timing state

Once each state is mapped to an approved Figma frame, the comparison gets much more useful. The review stops being vague and starts asking:

- does the invoice table match the approved reading rhythm?
- does the payment-method form preserve the intended hierarchy?
- does the downgrade warning still feel proportionate?

That level of specificity is where [Pixelay](/pixelay/) earns its keep.

## Logged-in billing flows need environment discipline

Because billing portals are usually authenticated, comparison quality depends on setup.

Before reviewing, stabilize:

- the test account state
- viewport size
- currency or regional settings, if relevant
- seeded invoice or plan data
- any banners, alerts, or feature flags unrelated to billing

The goal is not a fake-perfect environment. The goal is a comparison that highlights real implementation drift instead of random account noise.

If your team is still getting comfortable with authenticated comparisons in general, [How to compare websites behind a login with Figma designs using Pixelay](/tutorials/how-to-compare-websites-behind-a-login-with-figma-designs-using-pixelay/) is the right tutorial to keep nearby.

## Review table readability, not just alignment

Billing portals often include rows, amounts, dates, statuses, and actions in compact spaces.

So one of the most important questions is not "is it aligned?" It is:

Can a user scan this without hesitation?

Check:

- whether amounts and dates are easy to distinguish
- whether invoice actions are visually subordinate or dominant in the right way
- whether status labels wrap awkwardly
- whether row density changed the intended hierarchy

A billing table that is technically on-grid but hard to scan is still a QA failure.

## Plan-change and cancellation states need special attention

This is where high-stakes copy and visual hierarchy meet.

In these states, the portal often needs to communicate:

- what changes now
- what changes later
- whether charges change immediately
- where the user can reverse course

Small visual mismatches become larger trust problems here. A warning that feels too quiet, a confirmation panel that collapses the timing detail, or a CTA order that looks different from the approved Figma frame can all create uncertainty.

That is why I like to classify findings in billing QA as:

- `trust risk`
- `readability issue`
- `visual drift`
- `environment-only noise`

That classification helps the team focus fixes where user confidence is most fragile.

## Mobile review matters more than teams expect

Billing updates do not always happen at a desk.

People open invoice emails on mobile, tap into account portals from support links, or update a card while traveling. So mobile QA should check:

- whether plan cards still compare cleanly
- whether amount lines wrap awkwardly
- whether payment forms remain easy to complete
- whether warning or confirmation panels push key actions too low

If the desktop portal is polished but the mobile billing experience feels cramped or confusing, the portal is not really ready.

## A practical billing-portal review loop

This is the workflow I would standardize:

1. identify the real billing states that need review
2. match each state to its approved Figma frame
3. open the logged-in implementation with Pixelay before broad signoff
4. fix trust-risk issues first, then general spacing and polish
5. rerun the comparison on mobile and desktop before release

That review is usually much faster than debugging billing confusion later through support tickets and cancellation feedback.

## What to check before signoff

Before the billing portal ships, confirm:

- plan, invoice, and payment states match the intended hierarchy
- high-stakes warnings still feel clear and proportionate
- tables remain readable with real data
- mobile layouts do not bury important timing or action details
- authenticated environment noise is not being mistaken for real design drift

If the portal also includes adjacent account settings, it is worth pairing this pass with [Account Settings QA Workflow from Figma](/articles/pixelay-account-settings-qa-workflow-from-figma/) so the handoff between billing and settings does not feel like two different products.

## Where Pixelay helps most

[Pixelay](/pixelay/) is valuable for billing portals because these surfaces need more than general visual polish. They need credibility.

Users have to trust what they are seeing when money, plans, invoices, and service state are involved. Comparing the implemented portal against the approved Figma design before release makes that trust much easier to preserve.

If your billing area keeps shipping with "small" UI issues that later turn into support friction, move it into its own design QA loop. Billing portals deserve the same precision teams usually reserve for marketing launches, if not more.

---

---
type: article
title: Software Directory Screenshot Workflow from Figma
description: Prepare sharper, lighter product screenshots for software directories and review sites without creating a separate export mess outside Figma.
datePublished: 2026-07-16T00:00:00.000Z
dateModified: 2026-07-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-software-directory-screenshot-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-software-directory-screenshot-workflow-from-figma.md
---

# Software Directory Screenshot Workflow from Figma

Software directory screenshots have an annoying habit of looking worse after upload than they did in the design file.

The product UI was crisp in Figma. The crop felt balanced. The text was readable. Then the listing goes live and one of three things happens:

- the screenshot is heavier than it needs to be
- the interface text softens once the directory recompresses it
- the image set feels inconsistent because every crop was exported slightly differently

That is why directory screenshots deserve a workflow of their own.

[TinyImage](/tinyimage/) is a strong fit because the plugin page already emphasizes compressed export for JPG, PNG, SVG, WebP, AVIF, GIF, MP4, and PDF files directly from Figma. For directory listings, the point is not just file-size reduction. It is getting to a repeatable export path for screenshots that still look trustworthy after a third-party site resizes, recompresses, and displays them inside a template you do not control.

This article is intentionally different from nearby TinyImage pieces like [Browser Extension Store Screenshot Export Workflow from Figma](/articles/tinyimage-browser-extension-store-screenshot-export-workflow-from-figma/), [App Store and Play Store Screenshot Export Workflow from Figma](/articles/tinyimage-app-store-and-play-store-screenshot-export-workflow-from-figma/), and [Case Study Screenshot Workflow for B2B Marketing Teams](/articles/tinyimage-case-study-screenshot-workflow-for-b2b-marketing-teams/). Those focus on extension marketplaces, mobile app listings, or narrative proof screenshots. This one is about software directories and review sites, where the screenshots need to summarize the product fast inside somebody else's layout rules.

## Directory screenshots are really comparison assets

On your own landing page, a screenshot can rely on surrounding copy, motion, and layout to explain itself.

On a directory page, the screenshot is usually doing a more compressed job:

- show what category of product this is
- make the UI feel credible at a glance
- support comparison against competing listings
- reduce anxiety for a buyer who has not clicked through yet

That changes the export priorities.

A directory screenshot does not need cinematic storytelling. It needs legibility, restraint, and consistency across the full set.

If the screenshot pack feels improvised, the product listing feels improvised too.

## Choose the screenshot set before you choose the format

Teams often export directory screenshots too early.

First decide what each screenshot is meant to prove. A good listing set usually covers a small spread like:

1. the core working view
2. a distinct workflow or feature area
3. proof that the product handles a realistic, non-empty state
4. one supporting screen that helps a buyer imagine adoption

That is enough for most directory contexts.

The wrong move is exporting six variations of the same mostly empty dashboard because they happened to be easy to grab. The screenshots should do different jobs, even if the visual system stays consistent.

## Crop for comprehension, not for design-file completeness

Directory visitors do not inspect screenshots patiently. They skim.

That means a screenshot should answer quickly:

- what kind of interface is this?
- where is the main interaction?
- is the UI dense, simple, visual, text-heavy, or data-heavy?

This is why "show the whole screen" is often the wrong default.

If the live UI includes a lot of navigation chrome, a left rail, and a toolbar that does not help the listing story, a more focused crop may communicate better. But the crop cannot become so tight that the product loses context.

The best screenshot crop usually preserves:

- enough framing to identify the screen type
- one obvious focal area
- readable text at listing size
- consistent spacing across the whole set

If your team is still deciding which format belongs to which destination more generally, [Figma Export Format Workflow for Static, Motion, and PDF Assets](/articles/tinyimage-figma-export-format-workflow-for-static-motion-and-pdf-assets/) is the best companion read.

## Expect the directory to recompress your images

This is the mistake that creates a lot of "why does it look blurrier after upload?" frustration.

Many software directories:

- resize screenshots into fixed containers
- generate thumbnails
- apply additional compression
- show screenshots on retina and non-retina displays in inconsistent ways

So the goal is not to export the biggest possible PNG and hope for the best.

The goal is to export a screenshot that survives a second round of handling.

That usually means:

- avoiding unnecessarily huge dimensions
- keeping text sharp before upload
- compressing deliberately instead of leaving the directory to do all the damage later
- checking whether lighter formats preserve quality well enough for the actual UI

[TinyImage](/tinyimage/) helps because you can test lighter exports directly from the Figma source instead of bouncing every variation through a separate image tool.

## Standardize the visual treatment across the set

Software directory screenshots should feel like one family.

Check:

- the same corner treatment or background logic
- the same scale relationship between screens
- similar padding around each crop
- consistent device framing, if any
- similar contrast handling from shot to shot

What usually breaks the set is not one technically bad image. It is mixed treatment:

- one screenshot has a heavy shadow
- another is edge-to-edge
- one is much more zoomed in
- another uses a different background color

Once the screenshots sit side by side, those differences make the product feel less mature.

## Review the images at actual listing size

This matters more than pixel-peeping the exported file at 200%.

Directory screenshots are often rendered smaller than teams expect. So before finalizing:

- view them at realistic thumbnail or gallery size
- confirm the main UI labels are still readable enough
- check that charts, tables, or screenshot annotations are not too fine
- make sure no important proof is hiding in the edges

If the listing size makes the UI feel too dense, the fix is usually a better crop, not just a heavier file.

## A practical export checklist for directory listings

Before you ship the screenshot pack, confirm:

- each image proves something different
- the set feels visually consistent
- crops were reviewed at actual listing size
- the files are compressed intentionally, not left oversized
- key UI text still survives after export
- the product looks credible without surrounding marketing copy

It is also worth doing one sanity check after upload. Some directories add just enough extra compression to change the result, and that final inspection tells you whether the source export needs a small adjustment for the next revision.

## Where TinyImage helps most

[TinyImage](/tinyimage/) is especially useful for software directory screenshots because these assets sit in a strange middle ground.

They are not marketing-hero images. They are not full documentation screenshots. They are comparison-oriented listing assets that need to look clean after another platform gets hold of them.

When teams treat them like ordinary exports, quality drifts fast. When they treat them as a repeatable screenshot family with deliberate compression and real-size review, the listing becomes much easier to trust. That is the real win: fewer bloated uploads, fewer blurry surprises, and a screenshot set that helps the product look serious before the buyer ever reaches your site.

---

---
type: article
title: Homepage Takeover Banner Workflow for Media Teams
description: Plan and export coordinated homepage takeover banners from Figma so media teams can launch multi-slot campaigns without mismatched timing, copy, or packaging.
datePublished: 2026-07-10T00:00:00.000Z
dateModified: 2026-07-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-homepage-takeover-banner-workflow-for-media-teams/
markdownUrl: https://www.hypermatic.com/articles/bannerify-homepage-takeover-banner-workflow-for-media-teams.md
---

# Homepage Takeover Banner Workflow for Media Teams

Homepage takeovers look impressive when they work.

They also create a special kind of production chaos.

One campaign may need a hero unit, side rails, companion placements, mobile variants, fallback assets, and coordinated timing across several creative surfaces. The design concept can be strong and still collapse in production if the team treats each unit like an isolated banner instead of one synchronized system.

That is why takeover work deserves a different workflow from ordinary display variants.

[Bannerify](/bannerify/) is a strong fit because the plugin is already built around turning Figma creative into production-ready HTML, GIF, MP4, and related banner outputs directly from the design source. For takeover campaigns, the value is not only export speed. It is keeping the multi-slot creative system close enough together that message hierarchy, timing, and packaging do not fragment before launch.

This article is intentionally different from nearby Bannerify content like [Figma Banner Ad Variant Production Workflow](/articles/bannerify-figma-banner-ad-variant-production-workflow/), [HTML5 Banner QA Matrix by Ad Platform](/articles/bannerify-html5-banner-qa-matrix-by-ad-platform/), and [Rich Media Banner Workflow with Video and Lottie](/articles/bannerify-rich-media-banner-workflow-with-video-and-lottie/). Those cover generic variant production, destination-specific QA, or richer media units. This one is specifically about homepage takeover campaigns where several placements must feel like one coordinated idea.

## Treat the takeover as a campaign system, not a set of placements

The failure mode is easy to spot:

- the hero unit tells one story
- the side rail repeats it awkwardly
- the mobile cutdown loses the key offer
- the fallback asset uses different timing or copy
- the trafficking package names do not clearly map to the takeover set

That usually happens because teams review the creative by size instead of by role.

A better starting point is to define the system:

- anchor unit
- support units
- fallback units
- mobile simplifications

Once each piece has a role, the review becomes much easier.

## Decide where the main narrative lives

Every takeover needs a primary storytelling surface.

Usually that is:

- the masthead or homepage hero unit
- the largest rich-media slot
- the first visible placement in the page sequence

That anchor unit should carry the clearest version of:

- the offer
- the visual hook
- the motion hierarchy
- the CTA direction

Smaller companion units should support that story, not try to replay the whole thing in miniature.

This matters because takeover campaigns often get crowded. When every unit tries to explain everything, the creative starts feeling repetitive instead of coordinated.

## Build a message ladder across the set

I like to write a simple message ladder before animating anything:

- anchor unit: core promise
- support unit: proof, urgency, or product angle
- mobile unit: reduced message that still preserves the campaign cue
- fallback asset: simplest possible version of the same story

That gives designers, media teams, and stakeholders a shared logic for why the units differ.

Without it, feedback often devolves into "make them all match more," which usually produces weaker creative because the team confuses consistency with duplication.

## Coordinate motion rules before producing all sizes

Motion drift is one of the quietest problems in takeover work.

The animations are approved on the hero unit, but then:

- the side unit runs too fast
- the fallback MP4 feels disconnected
- the smaller format loses legibility because timing was copied instead of adapted

Set a few motion rules early:

- which entrance cues are shared across the set
- which units can shorten the animation
- when looping is acceptable
- what must remain readable even without sound or hover

That does not mean every banner must animate identically. It means the motion language should feel intentionally related.

If your creative process starts earlier with concepting and sequence planning, [Animated Banner Storyboard Workflow in Figma](/articles/bannerify-animated-banner-storyboard-workflow-in-figma/) is the best companion article.

## Plan packaging and fallback expectations before batch export

Takeover campaigns are especially vulnerable to late trafficking surprises.

Before export, confirm:

- which units need HTML5
- which units can ship as GIF or MP4 fallback
- whether the publisher or platform has naming or packaging expectations
- how the mobile set differs from desktop
- which units are mandatory versus optional if a placement changes

This is where the creative system meets ad-ops reality. A beautiful takeover can still fail if the team exports the wrong artifact mix for the actual media plan.

## Use naming that preserves the set logic

Because takeover campaigns involve multiple coordinated placements, file names should expose the campaign relationship clearly.

Include at least:

- campaign name
- unit role
- size
- format
- market or language if relevant

For example:

- `summer-launch-anchor-970x250-html5`
- `summer-launch-sidekick-300x600-html5`
- `summer-launch-mobile-320x100-mp4`

That makes it much easier for trafficking and QA teams to understand the system without reverse-engineering the creative intent from thumbnails alone.

## A practical takeover workflow

Here is the workflow I would standardize for media teams:

1. Define the anchor unit and the role of every companion placement.
2. Write a message ladder so each unit supports the same campaign without repeating it blindly.
3. Set a small number of shared motion rules before scaling the sizes.
4. Confirm packaging and fallback expectations against the actual media plan.
5. Export a representative subset first and review the system, not only the individual files.
6. Batch export the approved set from Figma with clear naming.
7. Run a final QA pass on message match, timing, and file/package completeness before trafficking.

That sequence prevents the common failure where each placement is technically finished but the takeover still feels disjointed in the wild.

## What to review before trafficking

Before the campaign leaves design, confirm:

- the main narrative clearly belongs to one anchor unit
- companion placements support rather than duplicate the story
- motion timing feels related across the set
- fallback outputs preserve the campaign cue
- filenames clearly show campaign, role, and size
- the export mix actually matches the media plan

If ad-ops review is part of the process, this is also a good moment to pair the set review with [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/) or [HTML5 Banner QA Matrix by Ad Platform](/articles/bannerify-html5-banner-qa-matrix-by-ad-platform/) depending on where the campaign is headed.

## Where Bannerify helps most

[Bannerify](/bannerify/) helps because takeover campaigns create too much repeated production work for manual banner building to stay sane. The team needs one design source, coordinated exports, and a workflow that can handle HTML5 plus fallback outputs without splitting the creative system into unrelated files.

If your team keeps producing homepage takeovers that look coordinated in review but drift by the time they are trafficked, the fix is usually not "better banners." It is a better system for how the units are planned, exported, and checked together. That is exactly where Bannerify is most useful.

---

---
type: article
title: Google Sheets to Figma Comparison Table Workflow for Marketing Teams
description: Turn spreadsheet-based pricing, feature, or competitor data into editable Figma comparison tables without rebuilding every row by hand.
datePublished: 2026-07-10T00:00:00.000Z
dateModified: 2026-07-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-google-sheets-to-figma-comparison-table-workflow-for-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/convertify-google-sheets-to-figma-comparison-table-workflow-for-marketing-teams.md
---

# Google Sheets to Figma Comparison Table Workflow for Marketing Teams

Marketing comparison tables almost never start in design.

They start in spreadsheets.

Product marketing tracks plan differences in Google Sheets. Sales wants a competitor table for a landing page. Somebody shares a sheet with updated feature availability by market. Then design is asked to make it "look polished in Figma" without losing the ability to update it when the spreadsheet inevitably changes again next week.

That is where the work gets expensive. A team can spend hours rebuilding rows, restyling text, cleaning pasted cells, and checking whether the finished table is still editable enough for later updates.

[Convertify](/convertify/) is useful when spreadsheet-based source material needs to come into Figma as a cleaner starting point instead of being recreated manually. The plugin page and import surface are built around cross-format conversion and editable imports, which makes it a strong fit for turning structured source files into maintainable design assets.

This article is intentionally different from nearby Convertify content like [Google Docs to Figma Wireframing Workflow](/articles/convertify-google-docs-to-figma-wireframing-workflow/), [Figma Import Cleanup Checklist](/articles/convertify-figma-import-cleanup-checklist/), and [Client Design File Intake Checklist](/articles/convertify-client-design-file-intake-checklist/). Those focus on document-first wireframes, post-import review, or general file intake. This one is specifically about comparison-table work where the source of truth lives in a spreadsheet and the main risk is losing editability during the handoff into design.

## Why comparison tables are harder than they look

A comparison table sounds simple until several teams need to touch it.

The marketer wants the copy updated.
The designer wants the layout to scan cleanly.
The PMM wants a new competitor column.
Legal wants an asterisk on one row.
Regional teams want a localized version.

At that point, the table is no longer a static graphic. It is a structured content system.

That is why a manual copy-paste approach breaks down. It introduces three problems fast:

- the design becomes slow to update
- the source spreadsheet and the Figma file drift apart
- reviewers stop trusting whether the visible table is actually current

## Clean the sheet before the import

The best table imports start before Convertify is used.

Review the sheet for:

- one clear header row
- consistent row naming
- no merged cells unless they are absolutely necessary
- normalized symbols like checkmarks, dashes, or yes/no values
- notes or footnotes separated from the main comparison data

The goal is to make the sheet legible as structure, not only as content.

If the sheet is messy, Figma will inherit that mess in a more expensive form. A fifteen-minute cleanup in Sheets is usually cheaper than an hour of layout repair afterward.

## Decide what the design needs to preserve

Not every comparison table wants the same output.

Before import, ask:

- Does this table need to stay close to spreadsheet structure for future updates?
- Is this a one-time marketing visual or a recurring asset family?
- Will it be localized later?
- Does the table need icons, badges, or section grouping after import?
- Is the final use case web, sales PDF, or in-product documentation?

That decision affects what "good enough" means.

For a recurring pricing or competitor table, editability matters more than visual flourish on day one. For a one-off sales asset, the team may accept heavier cleanup after import.

## Use the import as a structured draft, not as the final design

This is the most useful expectation to set with teams.

Convertify should not be judged by whether it produces the final polished comparison table in one click. It should be judged by whether it gets the spreadsheet data into Figma in a way that keeps the structure reusable.

That means the first imported result should be treated as:

- a structured draft
- a layout starting point
- a faster alternative to rebuilding rows manually

Once the content is in Figma, the team can:

- convert the header style to the page system
- create section dividers
- align badges or icons
- set column widths based on scanning priority
- establish reusable row patterns

That is much better than building the whole thing from scratch with stale spreadsheet data.

## Review editability before you polish the visuals

Teams often reverse the order. They make the table pretty first, then discover that future edits are awkward.

After import, review:

- is each cell still easy to update?
- did any formatting flatten the content into something fragile?
- are repeated row styles reusable?
- will a new competitor column break the structure?
- can long cell content wrap predictably?

If the answer is no, fix the structure before refining the presentation.

This is where [Figma Import Cleanup Checklist](/articles/convertify-figma-import-cleanup-checklist/) becomes the right companion process. The imported file can look fine visually and still be painful to maintain unless the structure is checked on purpose.

## Design the table for scanning, not for spreadsheet fidelity

A spreadsheet is optimized for storing data. A marketing comparison table is optimized for scanning and persuasion.

Those are not the same job.

Once the structure is stable in Figma, refine for:

- clear row grouping
- obvious primary column hierarchy
- enough white space around dense cells
- visual distinction between must-have and secondary criteria
- callouts that support the page message without distorting the facts

Do not let the imported grid dictate the final hierarchy blindly. The sheet provides the truth. The design still needs judgment.

## Plan for the next update while the first version is being built

Comparison tables almost always change.

That is why I like documenting three things in the Figma file immediately:

- which sheet or export was used
- which team owns the next content update
- which parts of the table are safe to redesign versus keep structurally stable

Without that, the imported table becomes a beautiful dead end. Six weeks later someone asks for new plan rows or another competitor and the team starts over.

## A practical spreadsheet-to-table workflow

Here is the version I would standardize:

1. Clean the Google Sheet so the structure is consistent.
2. Decide whether the imported table needs recurring editability or only one-time polish.
3. Import the spreadsheet content into Figma with Convertify as a structured draft.
4. Review editability and row logic before styling heavily.
5. Adapt the layout for scanability, not raw spreadsheet fidelity.
6. Create reusable row and header patterns if the table will evolve.
7. Document the content source so the next update does not become guesswork.

That sequence is what turns an import into a workflow instead of a shortcut that only works once.

## Where this matters most

This workflow is especially useful for:

- SaaS pricing pages
- competitor comparison pages
- sales enablement one-pagers
- partner feature matrices
- regional feature availability tables

In all of those cases, the expensive part is not drawing the table. It is keeping the design aligned with changing structured data.

## Where Convertify helps most

[Convertify](/convertify/) helps because it reduces the most annoying part of comparison-table production: moving structured source material into Figma without forcing the team to rebuild the whole thing manually.

That does not remove the need for layout decisions, copy review, or QA. It simply makes those steps happen on top of a real imported structure instead of on top of a hand-built approximation.

If your marketing team keeps managing comparison content in Google Sheets but presenting it in Figma, this is the workflow to standardize. The goal is not just faster import. The goal is a table that can survive the next update without becoming another expensive redesign.

---

---
type: article
title: Onboarding Tour Copy Review Workflow in Figma
description: Review tooltip tours, checklists, and first-run guidance in Figma so onboarding copy stays clear across product, design, and growth teams.
datePublished: 2026-07-10T00:00:00.000Z
dateModified: 2026-07-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-onboarding-tour-copy-review-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-onboarding-tour-copy-review-workflow-in-figma.md
---

# Onboarding Tour Copy Review Workflow in Figma

Onboarding tours are tiny pieces of copy with outsized consequences.

The wording has to teach without overwhelming. The tooltip has to fit the real UI. The checklist has to feel motivating, not bureaucratic. The empty state has to make sense even when the feature is gated or incomplete. And because the experience is often designed across many frames, it is easy for copy quality to get reviewed too late.

That is why onboarding copy deserves its own workflow.

[CopyDoc](/copydoc/) is a strong fit because onboarding tours usually involve repeated text changes across Figma frames, reviewer comments from multiple teams, and frequent alignment work between product, design, and growth. The plugin is built around managing, syncing, exporting, and reviewing Figma text at scale, which is exactly what these first-run experiences need once they stop being a one-screen mockup.

This article is intentionally different from nearby CopyDoc content like [Signup Flow Copy QA Workflow in Figma](/articles/copydoc-signup-flow-copy-qa-workflow-in-figma/), [UI Character Limit Review Workflow in Figma](/articles/copydoc-ui-character-limit-review-workflow-in-figma/), and [Realistic Prototype Content Workflow in Figma](/articles/copydoc-realistic-prototype-content-workflow-in-figma/). Those cover registration flows, character constraints, or realistic placeholder content. This one focuses on tooltip tours, onboarding checklists, and first-run product guidance where sequence, brevity, and context all matter at once.

## Why onboarding copy breaks down

Most teams do not struggle because they lack ideas for onboarding text.

They struggle because the experience is fragmented across several owners:

- product wants activation clarity
- design wants the tour to feel light
- growth wants the checklist to move users toward key actions
- support wants to reduce preventable confusion
- engineering wants text that still fits the actual UI

Without a structured review pass, the copy starts drifting:

- one tooltip becomes too long
- checklist labels sound inconsistent
- the tone shifts between frames
- a step assumes a feature is available when it is actually permission-gated
- the mobile layout no longer supports the approved wording

The result is not just awkward copy. It is a weaker first-run experience.

## Review the sequence as a narrative, not only as individual frames

This is the biggest mindset shift.

A tooltip can read well in isolation and still fail in sequence.

Before polishing individual strings, review the onboarding flow as a story:

- what does the user understand at step one?
- what changes after step two?
- what can be skipped?
- what needs proof versus instruction?
- where does the user need confidence, not explanation?

That prevents the common pattern where every tooltip tries to do too much because nobody decided what each step uniquely needs to accomplish.

## Export the copy for review before last-minute rewrites start

Onboarding tours attract many small wording opinions. That is not inherently bad, but it gets expensive when the only review surface is the Figma file itself.

I like to export the tour copy into a reviewable structure with columns such as:

- step name
- UI surface
- headline
- body copy
- CTA label
- notes or constraints

That gives product, UX writing, support, and growth teams a faster way to review logic without forcing everyone to annotate frames manually.

This is where CopyDoc becomes especially useful. Instead of treating each tooltip as a one-off text layer, the team can manage the wording like real content with a reviewable source.

## Audit for action clarity, not only tone

Pleasant onboarding copy is not enough. The text has to help the user act.

For each step, ask:

- does the user know what to do next?
- is the action label specific?
- is the benefit clear enough to justify the interruption?
- does the copy assume knowledge the user probably does not have yet?

This is where many tours quietly fail. They sound polished but do not actually reduce uncertainty.

A sentence like "Customize your workflow here" may feel fine in isolation. It is much stronger if the copy clarifies what changes and why the user should care now.

## Check edge cases that onboarding teams forget

Onboarding text often gets approved against an ideal state.

Review these less glamorous scenarios too:

- role or permission restrictions
- empty states before setup is complete
- long translated strings
- mobile or narrow-width overlays
- partially complete checklists
- disabled or unavailable features

Those states matter because they are often the first moments where users feel confused. If the copy only works for the fully enabled happy path, the onboarding experience will feel brittle.

If the tour is part of a broader content-governance problem, [Figma Content Source of Truth Strategy](/articles/copydoc-figma-content-source-of-truth-strategy/) is a strong companion article.

## Standardize terminology before the tour is localized

Onboarding experiences usually introduce product vocabulary for the first time.

That makes terminology consistency more important than usual.

Decide early:

- what the feature is called
- whether the UI says "workspace," "project," or "account"
- whether tasks are "steps," "actions," or "checklist items"
- which verbs are used for setup versus completion

If those terms drift across the tour, the user notices even when stakeholders do not.

And if localization comes later, inconsistent English terms become more expensive to translate coherently.

## A practical onboarding-copy workflow

Here is the workflow I would standardize:

1. Map the onboarding sequence and the job of each step.
2. Export the copy into a structured review surface before broad feedback starts.
3. Review for action clarity, not only tone.
4. Check edge states such as permissions, narrow layouts, and incomplete setup.
5. Standardize terminology before the final pass.
6. Re-import or update the approved text back into Figma for final design review.
7. Do one last sequence read-through inside the real frame order.

That sequence keeps the copy review grounded in the product experience while still giving cross-functional reviewers a manageable way to participate.

## What to catch before signoff

Before shipping onboarding copy, confirm:

- each step has one clear job
- CTA labels are specific
- recurring product terms are consistent
- text fits real tooltip, modal, or checklist constraints
- edge states and permission states were reviewed
- the full sequence still reads like one experience rather than several unrelated micro-lessons

That final point is easy to underestimate. Users do not experience onboarding one string at a time. They experience it as momentum.

## Where CopyDoc helps most

[CopyDoc](/copydoc/) helps because onboarding tours are one of those workflows where "it is only a few strings" becomes dozens of text decisions spread across many frames and reviewers.

Once the text is treated as structured content instead of scattered text layers, review quality improves fast. Product gets cleaner approvals. Design gets fewer last-minute rewrites. Growth gets clearer activation messaging. Support inherits fewer confusing first-run moments.

If your team keeps redesigning onboarding but still arguing about tooltip copy at the end, start by fixing the review workflow. That is the part that makes the experience coherent before it ever reaches production.

---

---
type: article
title: Abandoned Cart Email Workflow for Ecommerce Teams
description: Design and review abandoned cart emails in Figma so ecommerce teams can ship branded recovery flows without rebuilding them in the ESP under deadline.
datePublished: 2026-07-10T00:00:00.000Z
dateModified: 2026-07-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-abandoned-cart-email-workflow-for-ecommerce-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-abandoned-cart-email-workflow-for-ecommerce-teams.md
---

# Abandoned Cart Email Workflow for Ecommerce Teams

Abandoned cart emails are rarely just one email.

They are a sequence with timing, dynamic product data, discount logic, fallback states, mobile constraints, and a lot of pressure from revenue teams who want the flow live fast.

That is exactly why they become messy.

One person designs the email in Figma. Another person rebuilds it in the ESP. Someone adds personalized product blocks. The legal footer changes. The discount copy gets revised. Mobile review happens late. By the time the flow is ready, the team is no longer sure whether the final email still matches the approved design.

[Emailify](/emailify/) is a strong fit here because it keeps the email design and export workflow inside Figma while still supporting production-ready HTML exports and ESP-oriented handoff. That is especially useful for ecommerce flows, where the pressure to move fast often leads to sloppy rebuilds right at the point where performance and consistency matter most.

This article is intentionally different from nearby Emailify content like [Weekly Merchandising Email Workflow for Ecommerce Teams](/articles/emailify-weekly-merchandising-email-workflow-for-ecommerce-teams/), [Localized Email Review Workflow Before HTML Export](/articles/emailify-localized-email-review-workflow-before-html-export/), and [Figma Email QA Before ESP Upload](/articles/emailify-figma-email-qa-before-esp-upload/). Those cover recurring promo sends, localization review, or general pre-upload QA. This one is specifically about abandoned cart flows where dynamic cart content, sequence logic, and recovery messaging all have to stay coherent together.

## Treat the cart flow as a sequence, not as a single template

The fastest way to weaken a recovery flow is to design only the first email.

Even a simple abandoned cart program usually needs decisions around:

- first reminder timing
- whether the second email changes the message
- whether incentives appear immediately or only later
- what happens when the cart data is incomplete
- how product blocks behave on mobile

The design work should reflect that sequence logic from the start.

I like to frame the flow in three layers:

- message sequence
- dynamic content behavior
- export and QA path

If any one of those is treated as "we will figure it out later," the rebuild risk climbs fast.

## Design with real cart states in mind

Abandoned cart emails often look fine in a pristine mockup and fall apart with real data.

Review at least these states before final export:

- one-item cart
- multi-item cart
- long product title
- missing or broken image scenario
- discounted versus non-discounted item
- empty fallback state if the platform cannot populate data

That is what separates a branded email from a reliable workflow.

The point is not to overcomplicate the design. The point is to avoid approving a layout that only works for the happy path.

If your team already relies on dynamic product blocks, the tutorial [How to create a Klaviyo abandoned cart flow custom HTML email template in Figma using Emailify](/tutorials/how-to-create-a-klaviyo-abandoned-cart-flow-custom-html-email-template-in-figma-using-emailify/) is the most direct implementation companion to this article.

## Keep the recovery message stronger than the discount logic

Ecommerce teams sometimes jump too quickly to incentive thinking.

That can make every abandoned cart email feel interchangeable.

A stronger workflow asks:

- what hesitation is the email addressing?
- what proof or reassurance belongs in the first reminder?
- when should urgency appear?
- when should shipping, returns, or stock cues be introduced?

That does not mean writing long-form copy. It means giving the flow a progression instead of repeating the same email with a different subject line.

For some brands, the first email should feel like a helpful reminder.
For others, the second or third email may justify a stronger offer or urgency cue.

The key is that those decisions should be visible in Figma before HTML export, not improvised inside the ESP.

## Make the dynamic areas explicit for reviewers

One reason abandoned cart emails create confusion is that some sections are stable and some are event-driven.

Mark those zones clearly in the design:

- fixed brand header
- dynamic cart product block
- dynamic price or discount fields
- fixed reassurance section
- fixed footer and compliance block

That clarity helps design, lifecycle, and engineering-minded reviewers understand what is being approved.

Otherwise, a stakeholder may approve the visual design without realizing the real email will render very different product counts, text lengths, or image proportions.

## Prioritize mobile review earlier than usual

Cart emails are often opened quickly on mobile. That makes mobile review more important than many teams expect.

Check:

- product image scale
- spacing between line items
- CTA prominence
- coupon or pricing clarity
- subject and preheader pairing
- footer length once compliance copy is included

If the dynamic cart block becomes visually heavy on smaller screens, solve that in the design system before export rather than hiding the problem in the ESP editor later.

For broader mobile review guidance, [Mobile Email QA Workflow Before Export](/articles/emailify-mobile-email-qa-workflow-before-export/) is the closest supporting article.

## Decide early how much the ESP will be allowed to edit

This is a surprisingly important governance choice.

Some teams export from Figma and then let the ESP editor make frequent layout tweaks. Others want the HTML to stay closer to the approved design.

For abandoned cart flows, I prefer to keep that boundary explicit:

- what can lifecycle marketers update safely?
- what requires a Figma source change first?
- which dynamic blocks are owned by platform configuration rather than design?

That reduces the classic drift where the live recovery flow slowly stops matching the approved design after several "quick" ESP edits.

## A practical abandoned cart email workflow

Here is the sequence I would standardize:

1. Map the full recovery sequence before designing the first message.
2. Build the email using real cart states, not placeholder-perfect content.
3. Label dynamic versus fixed sections clearly in Figma.
4. Review the mobile experience before finalizing desktop polish.
5. Export the HTML from Figma and connect it to the target ESP flow.
6. Test with real or realistic event data before making the flow live.
7. Document what future edits belong in Figma versus in platform configuration.

That workflow keeps the design, the data, and the sending logic closer together.

## What to review before launch

Before the abandoned cart flow goes live, confirm:

- the sequence messaging changes intentionally across steps
- dynamic product blocks were reviewed with realistic content
- empty or edge states were considered
- compliance, footer, and unsubscribe areas are final
- mobile layout still feels credible under real cart data
- the live ESP version still matches the approved Figma design closely enough

This is where [Emailify](/emailify/) helps most. It reduces the gap between the approved email design and the HTML that enters the sending platform, which matters a lot when the flow is revenue-critical and prone to rushed edits.

Abandoned cart programs do not usually underperform because the team forgot to send a reminder. They underperform because the workflow between design, content, and the ESP is fragile. Once the sequence is designed and reviewed as a real system, the team can move faster without treating every recovery email like a one-off rebuild.

---

---
type: article
title: Proof of Concept Recap Deck Workflow for Presales Teams
description: Turn scattered demo notes, screenshots, and next steps into a clean proof-of-concept recap deck that sales and solutions teams can actually reuse.
datePublished: 2026-07-10T00:00:00.000Z
dateModified: 2026-07-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-proof-of-concept-recap-deck-workflow-for-presales-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-proof-of-concept-recap-deck-workflow-for-presales-teams.md
---

# Proof of Concept Recap Deck Workflow for Presales Teams

Proof-of-concept work creates a strange kind of deck pressure.

The meeting is over. The solution engineer has notes in three places. The account executive wants a recap by tomorrow. Product screenshots changed during the pilot. Somebody promised a slide on architecture. Somebody else wants the next-step timeline added before procurement joins the thread.

So the team does what teams usually do: clone an old PowerPoint, paste in some screenshots, rewrite a few bullets, and hope the deck still tells a coherent story.

That approach works once. It does not scale.

[Pitchdeck](/pitchdeck/) is a strong fit for proof-of-concept recap workflows because the source deck can stay in Figma while the output can still match the reviewer: PowerPoint for customer edits, PDF for locked summaries, Google Slides for comments, or a hosted web presentation when several stakeholders need to review asynchronously.

This article is intentionally different from nearby Pitchdeck pieces like [RFP Response Deck Workflow for B2B Sales Teams](/articles/pitchdeck-rfp-response-deck-workflow-for-b2b-sales-teams/), [Security Review Deck Workflow for B2B SaaS Teams](/articles/pitchdeck-security-review-deck-workflow-for-b2b-saas-teams/), and [Product Demo Deck Workflow in Figma](/articles/pitchdeck-product-demo-deck-workflow-in-figma/). Those focus on formal proposals, procurement scrutiny, or live demo storytelling. This one is about what happens after the proof of concept, when the team has to convert messy evidence into a deck that moves the opportunity forward.

## A good POC recap deck answers five questions fast

Most recap decks become bloated because they try to retell the whole pilot.

Buyers usually need something simpler:

1. What problem did we test?
2. What did the team prove?
3. What is still open or risky?
4. What needs to happen next?
5. Who owns the next decision?

If the deck does not answer those quickly, it becomes a historical artifact instead of a commercial tool.

That is the first mindset shift: a proof-of-concept recap deck is not a transcript. It is a decision document.

## Separate evidence from narrative

Presales teams usually accumulate more material than the final deck should contain:

- workshop notes
- screenshots from test environments
- integration diagrams
- customer-specific requirements
- objection-handling language
- success criteria
- technical risks

Do not drop all of that directly into slides.

I like to split the workflow into two layers:

Evidence layer:

- raw screenshots
- technical notes
- stakeholder questions
- risk items
- detailed validation steps

Narrative layer:

- executive recap
- what was demonstrated
- what was validated
- what remains open
- commercial next steps

That separation makes the deck easier to maintain. The evidence still exists, but the slides stay readable.

## Use a stable slide spine across deals

Proof-of-concept decks often feel custom, but the structure usually repeats. That is a good thing.

A reusable slide spine might look like:

- customer objective and pilot scope
- success criteria
- what the team demonstrated
- environment or workflow proof
- validation highlights
- open items and assumptions
- recommended next step

Not every customer needs every section, but using a stable skeleton keeps the team from rebuilding the story from scratch each time.

This is also how you reduce deck drift between AEs, solutions engineers, and customer-facing leaders. When the structure is stable, the team can focus on evidence quality instead of slide archaeology.

If broader deck governance is the bigger problem, [Pitch Deck Version Control for Startups](/articles/pitchdeck-pitch-deck-version-control-for-startups/) and [Presentation Handoff Checklist for Designers](/articles/pitchdeck-presentation-handoff-checklist-for-designers/) are useful adjacent reads.

## Show enough product truth without turning the deck into a product tour

This is a common failure point.

Because POC work often includes lots of screenshots, teams keep adding them until the recap becomes a mini-demo deck. That usually weakens the message.

A stronger recap uses screenshots selectively:

- one screenshot to prove a core workflow
- one screenshot to support a technical validation point
- one screenshot to show the final-state experience if it matters to the buyer

Every screenshot should answer a buyer question. If it only proves that the team did work, it probably belongs in backup material instead of the main story.

## Pick the export format based on how the customer will act on the deck

This decision changes the review workflow more than most teams expect.

Use PDF when:

- the recap should stay fixed after approval
- the team wants one clean source for the account record
- the audience is mainly executive or procurement-facing

Use PowerPoint when:

- the account team will tailor next steps per stakeholder
- customer-facing reps need small edits after export
- the recap will be stitched into a broader account narrative

Use Google Slides when:

- collaborative comments matter more than polish
- several internal reviewers need to mark up the deck quickly

Use a hosted web presentation when:

- the team wants to see whether stakeholders actually reviewed the material
- the same recap will be shared asynchronously across multiple contacts
- links, embeds, or presentation analytics add real value

That is where Pitchdeck is especially helpful. The master deck can stay in Figma while the output changes based on the commercial need, not on who had the last copy of PowerPoint open.

## Make open items visible without making the team look unprepared

POC recap decks should not pretend every question is closed.

In fact, they become more credible when open items are handled cleanly.

I prefer one dedicated section for:

- unresolved integrations
- data dependencies
- environment assumptions
- security or procurement follow-up
- owner and due date

The wrong move is scattering these caveats across slides where they feel accidental. The better move is to present them as a managed list of next decisions.

That shifts the deck from "we have some loose ends" to "here is the path to completion."

## A practical recap workflow for presales teams

Here is the version I would operationalize:

1. Capture the raw evidence immediately after the POC while details are fresh.
2. Sort the material into customer objective, validated proof, open risks, and next steps.
3. Build the recap on a stable deck spine rather than on an old ad hoc file.
4. Use screenshots only where they support a buyer decision.
5. Choose the export destination before the final review.
6. Mark customer-specific edits clearly so the field team knows what can change safely.
7. Finalize one approved recap before it spreads into email attachments and follow-up versions.

That process is much lighter than rebuilding the deck later from Slack messages and meeting notes.

## What to review before sending the deck

Before the recap goes out, confirm:

- the deck answers what was tested, proved, and left open
- screenshots are current and purposeful
- the next-step ask is explicit
- open items have owners instead of vague caveats
- the chosen export format matches how the customer will use the file
- field-editable slides are clearly distinguishable from locked narrative slides

If the POC regularly flows into executive or security review, it is worth linking the recap workflow with related deck types early. That keeps the pilot story, the commercial story, and the procurement story from splitting into separate contradictory artifacts.

## Where Pitchdeck helps most

[Pitchdeck](/pitchdeck/) is useful in proof-of-concept recaps because these decks sit right between design polish and operational sales work.

They need structure, speed, version control, and flexible export. They also need to stay close to the source of truth rather than fragment into customer-specific copies too early.

If your presales team keeps finishing strong POCs but struggling to package the outcome clearly, standardizing the recap deck in Figma is a high-leverage fix. It turns the follow-up deck from a rushed afterthought into a repeatable asset that helps the deal move instead of merely documenting that the pilot happened.

---

---
type: article
title: Account Settings QA Workflow from Figma
description: Compare account settings pages against Figma so permissions, billing states, forms, and destructive actions do not drift in production.
datePublished: 2026-07-10T00:00:00.000Z
dateModified: 2026-07-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-account-settings-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-account-settings-qa-workflow-from-figma.md
---

# Account Settings QA Workflow from Figma

Settings pages are where product teams quietly accumulate UX debt.

The rest of the product gets design attention because it drives growth, acquisition, activation, or shiny demos. Settings pages get changed by necessity: a new permission toggle, an added billing panel, a longer legal explanation, another integration card, another confirmation modal.

Individually, those edits seem harmless.

Collectively, they create one of the easiest places for the built product to drift away from the approved Figma design.

[Pixelay](/pixelay/) is a strong fit because settings-page QA depends on comparing real implemented states against the intended design in the browser, not just checking that fields exist. The plugin helps teams compare Figma with staging sites, live sites, preview environments, and local builds directly in context, which is especially useful for settings surfaces where state complexity hides visual regressions.

This article is intentionally different from nearby Pixelay content like [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/), [Role-Based Dashboard QA Workflow from Figma](/articles/pixelay-role-based-dashboard-qa-workflow-from-figma/), and [Modal and Drawer QA Workflow from Figma](/articles/pixelay-modal-and-drawer-qa-workflow-from-figma/). Those cover broader logged-in workflows, dashboards, or overlay components. This one is specifically about account settings pages where permissions, forms, destructive actions, and billing-related content create their own QA pattern.

## Why settings pages drift faster than teams expect

Settings screens change through many kinds of work:

- billing updates
- permission model changes
- new integrations
- compliance text additions
- form validation tweaks
- feature flag rollouts

That means the page is constantly exposed to layout pressure.

Common drift looks like:

- helper text wraps in ways the design never anticipated
- toggles lose alignment after new states are added
- destructive actions become visually understated
- billing or permissions cards feel denser than the rest of the UI
- confirmation modals no longer match the spacing or hierarchy of the source design

These are not always dramatic bugs. They are often credibility leaks.

## QA the settings page by state families

The most useful approach is to stop reviewing settings pages as one static screen.

Instead, group the QA by state family:

- default settings view
- edited but unsaved form state
- validation error state
- success confirmation state
- restricted or permission-limited state
- destructive action confirmation state

That grouping helps reviewers catch mismatches that would never show up if the team only compares the calm, empty default screen.

## Permissions deserve their own visual review

Settings pages often carry role complexity in subtle ways.

One user can edit. Another can view only. A third sees billing but not integrations. An admin sees destructive controls that members never see.

That makes permissions both a product-logic issue and a design QA issue.

Review:

- which controls disappear entirely
- which controls remain visible but disabled
- how explanatory text changes by role
- whether section hierarchy still makes sense when permissions remove content

This is where Pixelay becomes especially useful. The browser comparison makes it easier to see when role-based states are technically correct but visually unbalanced compared with the approved Figma layout.

## Treat destructive actions like trust surfaces

Teams usually test whether delete buttons function.

They are less consistent about reviewing whether destructive states still feel trustworthy.

Check:

- visual separation from ordinary actions
- confirmation modal spacing and emphasis
- clarity of the irreversible consequence
- warning text density on mobile
- whether the cancel path is visually obvious

If a destructive action looks too similar to a benign preference save, the issue is not only stylistic. It affects confidence.

## Review forms with realistic content lengths

Settings screens are full of small content traps:

- long team names
- multi-line helper copy
- legal or compliance notes
- billing address fields
- API key labels
- connected-app descriptions

A form can look perfect with placeholder text and fall apart with realistic values.

That is why I like reviewing settings pages with real or representative content before signoff. The browser comparison is far more useful when the live state reflects the density the user will actually see.

## Separate implementation drift from product-change intent

Settings pages often change for real product reasons. That does not mean every visual difference is a bug.

When using Pixelay, label findings clearly:

- `intended product change`
- `implementation drift`
- `new state needs design update`

This helps avoid unproductive debates.

Sometimes the code is wrong.
Sometimes the product changed and the Figma source needs to catch up.
Sometimes the team added a new state that never had a full design pass.

The goal is to route the issue correctly, not to pretend every mismatch means engineering made a mistake.

## A practical settings-page QA workflow

Here is the review flow I would standardize:

1. Choose the Figma frame or set of frames that represent the current intended settings experience.
2. Compare the real build in Pixelay across the main settings state families.
3. Review permission variants separately instead of assuming the admin view covers everything.
4. Check destructive actions and confirmation surfaces as trust-critical UI.
5. Test the page with realistic content lengths and helper copy.
6. Label findings as implementation drift, intended change, or missing design coverage.
7. Re-run the comparison after fixes, especially on mobile breakpoints.

That process is much more reliable than a one-time screenshot review in Slack.

## What to check first on account settings pages

If time is tight, start with:

- page hierarchy after role-based sections appear or disappear
- alignment of toggles, inputs, and action buttons
- spacing around helper text and validation errors
- billing, plan, or subscription information density
- confirmation modals for destructive actions
- mobile stacking for long labels and notes

These are the places where settings-page drift becomes visible fastest.

If billing or pricing-related surfaces are particularly important, it is also worth pairing this with [Pricing Page QA Workflow from Figma](/articles/pixelay-pricing-page-qa-workflow-from-figma/) for consistency across the broader account-management experience.

## Where Pixelay helps most

[Pixelay](/pixelay/) helps because settings pages are hard to QA from memory. People know the page "feels a bit off," but they do not always have a fast way to prove where the drift happened.

Comparing the real implementation against the approved Figma source inside the browser makes those differences much easier to triage. That matters on settings pages more than most teams realize, because trust, permissions, and account management are the parts of the product where visual sloppiness quietly erodes confidence.

If your product team keeps shipping clean headline features while settings pages slowly decay, this is the workflow to standardize. It gives the team a repeatable way to keep one of the most state-heavy parts of the product aligned with design instead of letting it drift between release cycles.

---

---
type: article
title: Localized Product Screenshot Workflow for Global Landing Pages
description: Prepare lighter, consistent product screenshots for regional landing pages so localization does not wreck file size, cropping, or visual trust.
datePublished: 2026-07-10T00:00:00.000Z
dateModified: 2026-07-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-localized-product-screenshot-workflow-for-global-landing-pages/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-localized-product-screenshot-workflow-for-global-landing-pages.md
---

# Localized Product Screenshot Workflow for Global Landing Pages

Regional landing pages usually start with a simple request.

"Can we swap the screenshots into German?"
"Can we show the Japanese dashboard instead?"
"Can we launch the French version this week without redesigning the whole page?"

Then the hidden work shows up. Headlines get longer. UI labels wrap differently. Crops stop matching. File sizes creep up because every region exports its own oversized PNG set. Somebody manually renames assets at the last minute and nobody is fully sure which screenshot belongs to which locale.

That is not only a localization problem. It is an asset workflow problem.

[TinyImage](/tinyimage/) is a strong fit when the screenshots still start in Figma but need to leave as production-ready assets for multiple landing pages. The plugin helps with compressed PNG, JPG, WebP, AVIF, GIF, MP4, and PDF exports directly from Figma, but the real win comes from deciding how regional screenshot work should be reviewed before those files hit the CMS.

This article is deliberately narrower than nearby TinyImage pieces like [Product Screenshot Export Workflow for SaaS Landing Pages](/articles/tinyimage-product-screenshot-export-workflow-for-saas-landing-pages/), [Social Share Image Export Workflow from Figma](/articles/tinyimage-social-share-image-export-workflow-from-figma/), and [Knowledge Base Screenshot Localization Workflow](/articles/tinyimage-knowledge-base-screenshot-localization-workflow/). Those focus on general screenshot production, social previews, or documentation localization. This one is specifically about regional landing pages where design consistency, file weight, and message credibility all move together.

## Why localized landing-page screenshots go wrong

A landing-page screenshot is carrying several jobs at once:

- show the right product capability
- support the local headline and value proposition
- feel visually aligned with the rest of the page
- load fast enough to avoid becoming a performance tax

Teams often localize the words but not the screenshot workflow.

That creates predictable problems:

- the English crop no longer works once the interface text expands
- one region exports WebP while another ships heavy PNGs
- a mobile screenshot is updated in the product, but the desktop screenshot is not
- screenshots lose naming consistency, so the CMS upload turns into guesswork
- a regional team swaps in a sharper image that is much heavier than the original asset budget

The page may still launch, but it becomes harder to maintain and easier to mistrust.

## Start with screenshot intent, not export format

Before anyone exports, clarify what each screenshot needs to prove on the page.

For regional landing pages, I like to label screenshots by job:

- hero proof screenshot
- feature section screenshot
- workflow step screenshot
- trust or detail zoom
- mobile companion screenshot

That sounds small, but it helps the team avoid a common mistake: replacing one screenshot with another that is technically localized but no longer supports the section's message.

If the page headline says speed, the screenshot should support speed.
If the section is about collaboration, the screenshot should show the collaborative surface.

Localization should not break message match.

## Build one export matrix before the regional versions branch out

The easiest time to control screenshot sprawl is before the locale work multiplies.

Create a simple matrix for every screenshot family:

| Screenshot | Page section | Required locales | Aspect ratio | Preferred format | Weight target |
| --- | --- | --- | --- | --- | --- |
| hero-dashboard | hero | EN, DE, FR, JP | 16:10 | WebP or PNG | under agreed hero budget |
| feature-automation | feature block | EN, DE, FR | 4:3 | WebP | lighter than hero |
| mobile-proof | mobile section | EN, JP | phone crop | PNG or WebP | optimized for mobile |

The important part is not the table itself. It is forcing the team to choose format, crop, and weight expectations before every region invents its own export habits.

If your broader website team already uses a budget mindset, pair this with [Website Asset Compression Budget for Design Teams](/articles/tinyimage-website-asset-compression-budget-for-design-teams/).

## Review crop safety after localization, not only before it

Localized screenshots fail most often at the crop layer.

What looked balanced in English can fall apart when:

- table columns get wider
- side navigation labels wrap
- buttons become longer
- charts or tags expand with translated labels

The fix is not always "show more of the UI." Sometimes that makes the screenshot harder to scan.

Instead, review crop safety with three questions:

1. Is the important proof still visible?
2. Does the crop still feel intentional at the target breakpoint?
3. Did localization create visual noise that should be redesigned rather than merely exported?

That last question matters. TinyImage can help export the asset cleanly, but it should not be used as a bandage for screenshots that no longer communicate clearly.

## Choose lighter formats only when they survive the real page context

For regional landing pages, format decisions should be practical, not ideological.

WebP or AVIF may be great when:

- the page is screenshot-heavy
- several locales reuse the same layout
- the marketing team cares about page-speed budgets
- image softness is still acceptable in the actual browser context

PNG may still be the better choice when:

- text sharpness inside the screenshot is critical
- the crop contains UI details that suffer from aggressive compression
- the screenshot will be reused in sales PDFs or partner kits

The trap is deciding format from habit instead of from the page itself.

That is why I like exporting a representative sample and checking it in the real page module before batch export. If the lighter asset still looks right where it will actually render, keep it. If it degrades the proof too much, adjust the format or compression target.

For teams comparing web formats more directly, [WebP vs AVIF for Figma Exported Images](/articles/tinyimage-webp-vs-avif-for-figma-exported-images/) is the best companion read.

## Treat naming as localization infrastructure

File naming becomes much more important once screenshots branch across languages.

Use names that expose:

- page or module
- locale
- viewport or device
- version when needed

For example:

- `hero-dashboard-en-desktop`
- `hero-dashboard-de-desktop`
- `feature-automation-fr-tablet`

That naming discipline helps in three places:

- design review
- CMS upload
- future updates when one locale changes before the others

Without it, screenshot maintenance quickly becomes a scavenger hunt.

## A practical localized screenshot workflow

Here is the workflow I would standardize for regional landing-page teams:

1. Lock the message and screenshot job for each page section.
2. Duplicate or localize the Figma screenshots with real regional content.
3. Review crop safety after the translation is visible, not only before.
4. Pick the lightest acceptable format for each screenshot family.
5. Export a representative sample and check it in the actual landing-page layout.
6. Batch export the approved locale set with consistent names.
7. Spot-check the live page for loading weight, sharpness, and message fit.

That sequence prevents the classic failure mode where localization is treated as a late-stage asset swap instead of a real design review.

## What to catch before the files reach the CMS

Before handoff, confirm:

- every localized screenshot still supports the section message
- the crop is clean at the target breakpoint
- file names clearly identify locale and placement
- image weight stays within the page's budget
- the chosen format survives the real browser context
- any mobile-specific crops were reviewed separately from desktop

This is where [TinyImage](/tinyimage/) helps most. It keeps the screenshot optimization step close to the Figma source, which reduces the usual round-trip through random compression tools and last-minute export fixes.

Regional landing pages do not usually fail because the team forgot to translate the headline. They fail because the supporting assets no longer feel intentional after localization. Once the screenshot workflow is standardized, those launches become much easier to scale without turning every locale into its own performance and QA problem.

---

---
type: article
title: Hardcore Data
description: A mid-year, independence day update on what we've been up to in 2026 so far, and what's on the horizon.
datePublished: 2026-07-04T00:00:00.000Z
dateModified: 2026-07-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hardcore-data/
markdownUrl: https://www.hypermatic.com/articles/hardcore-data.md
---

# Hardcore Data

As with the last mid-year update, this [Hardcore Data](https://www.youtube.com/watch?v=68h_vVlrQr4) update also falls on July 4th. Even though Hypermatic is based in Australia, and not the United States (or Japan, as some seem to think, based on the design of this website), I do like the idea of doing these mid-year updates on Independence Day, and re-focusing it on continuing to declare our independence from legacy design/development workflows.

### Plugin update highlights in 2026 (so far)

There are multiple updates and small fixes shipped to multiple Figma plugins on a daily basis, but here are some cool highlights from the first half of 2026:

- Added [120 pre-built email layouts](https://x.com/hypermatic/status/2071391855020064842) to Emailify
- Added [Canva exports](https://x.com/hypermatic/status/2065305411973185781) to Convertify
- Added [Adobe InDesign exports](https://x.com/hypermatic/status/2051547384707248163) to Convertify
- Added [Adobe InDesign imports](https://x.com/hypermatic/status/2050401670266597801) to Convertify
- Added [Customer.io API integration](https://x.com/hypermatic/status/2049997134980874694) to Emailify
- Added [Lottie file imports](https://x.com/hypermatic/status/2049368322618322986) to Convertify
- Added [Live GIF Timeline Previews](https://x.com/hypermatic/status/2039549551263248809) to Bannerify
- Added [Split Text Animations](https://x.com/hypermatic/status/2038818437716463836) to Bannerify
- Added [Column Background Images](https://x.com/hypermatic/status/2037406985331884436) to Emailify
- Added [CSV Variant Exports](https://x.com/hypermatic/status/2035944481569329448) to Bannerify
- Added [Preview Wall Mode](https://x.com/hypermatic/status/2035477376461951393) to Bannerify
- Added [AMP Email support](https://x.com/hypermatic/status/2035242858996015370) to Emailify
- Added [Synced Timeline Animation Previews](https://x.com/hypermatic/status/2034853718735347858) to Bannerify
- Added [Automated ChatGPT Translations](https://x.com/hypermatic/status/2032611077562016109) to Emailify
- Added [Selective Slide Loading](https://x.com/hypermatic/status/2032327481609634238) to Pitchdeck
- Added [custom HTML preview window resizing](https://x.com/hypermatic/status/2031908977039306999) to Emailify
- Added [Adobe Photoshop PSD exports](https://x.com/hypermatic/status/2030136466333114571) to Convertify
- Added [Scrollable Text Layers](https://x.com/hypermatic/status/2027246563354169816) to Bannerify
- Added [Bulk Edit Mode for Layer Settings](https://x.com/hypermatic/status/2025728145220047136) to Emailify
- Added [a Persistent Settings Panel](https://x.com/hypermatic/status/2024641839249445280) to Emailify
- Added [AI Prompt Animation Generator](https://x.com/hypermatic/status/2024250431741055471) to Bannerify
- Added [Real-Time Live HTML Previews](https://x.com/hypermatic/status/2023882416881066028) to Emailify
- Added [Adobe Photoshop PSD imports](https://x.com/hypermatic/status/2023518580659417558) to Convertify
- Added [HTML generation performance upgrades](https://x.com/hypermatic/status/2023263105221038464) to Emailify
- Added [Live Layer Animation Previews](https://x.com/hypermatic/status/2021748971170148769) to Bannerify
- Added [Multi-Scene Banner Support](https://x.com/hypermatic/status/2021388784420651118) to Bannerify
- Added [Grouped Animation Sliders](https://x.com/hypermatic/status/2021070598055887116) to Bannerify
- Added [clickable links for PDF exports](https://x.com/hypermatic/status/2019572961020456971) to Emailify
- Added [Animated GIF Previews](https://x.com/hypermatic/status/2019216786890322132) to Emailify
- Added [500+ new email components](https://x.com/hypermatic/status/2018843130267943261) to Emailify
- Added [PPTX Shapes Support](https://x.com/hypermatic/status/2014529675398463539) to Pitchdeck
- Added [Airtable text export/re-import support](https://x.com/hypermatic/status/2014172698163683579) to CopyDoc
- Added [20+ new email templates](https://x.com/hypermatic/status/2011969318884618288) to Emailify
- Added [Zapier integration](https://x.com/hypermatic/status/2011630094029373504) to Emailify
- Added [Zapier integration](https://x.com/hypermatic/status/2007964778694914373) to Bannerify

### AI Ops Melbourne Meetup

Earlier this year, in February 2026, I started the [AI Ops - Melbourne Meetup](https://aiops.lol) to bring together designers, developers, founders, marketers and other people in Melbourne who are optimistic about AI, and who are already using it to automate real work.

The meetup has been a useful forcing function for thinking more clearly about what AI is actually changing in small companies like Hypermatic.

The most obvious answer is "tools", but I don't think that is the right level of abstraction.

#### AI Ops is not about tools. It is about workflows.

AI Ops means turning repeatable business processes into reliable AI agent workflows, supported by clear context, rules, tools, judgment and feedback loops.

The model is important, but the model is not the whole system. The system is everything around it: the instructions, the examples, the files, the tools, the review process, the way tasks get broken down, and the way the human operator decides what is good enough to ship.

#### AI multiplies the company you already have.

AI does not magically fix broken systems, bad culture, unclear priorities, or bureaucracy. It tends to amplify whatever is already there.

A simple, self-serve, low-friction company gets more leverage from AI because there are fewer layers for the work to pass through. A company that is already drowning in meetings, approvals and process will probably use AI to generate more meetings, approvals and process.

That has been one of the biggest lessons for me this year. AI is not just a productivity upgrade. It is also an organizational mirror.

#### Context is infrastructure.

Files like `AGENT.md`, `DESIGN.md`, reusable skills, product notes, support examples and internal checklists are becoming the new operating manuals.

They teach agents how the business works, how the product should feel, what trade-offs matter, and how repeatable tasks should be done.

In the past, a lot of this context lived implicitly in someone's head. Now, the more of it you can make explicit, the more useful your agents become.

#### Workflows become assets.

As models improve, the valuable thing is not just the model itself. It is the repeatable workflow you have built around it.

Customer support, bug fixes, docs, billing, compliance, marketing, research, release notes, internal tooling - these are all workflows that can be gradually improved, systematized and reused.

The workflow is the asset. The model is the engine that keeps getting better underneath it.

#### The operator still owns the judgment.

Agents can investigate, write code, summarize logs, draft emails, update docs and propose fixes. But the human still verifies, deploys and takes responsibility.

That part has not gone away. If anything, it matters more now, because one person can suddenly move much faster and make much bigger changes.

The simplest practical rule I keep coming back to is this: if you do something more than twice, consider turning it into a reusable skill, checklist, prompt, script or agent workflow.

### Figma plugins in the age of generative AI

A couple of weeks ago, at Config 2026, Figma announced a new native feature called "Generative Plugins", which lets users prompt the Figma agent to build custom plugins inside their design files.

The basic idea is that you no longer need to understand code or technical terminology. You describe what you want, and the Figma agent builds a plugin for you.

One of the examples in Figma's documentation is a prompt to build a complete accessibility checker plugin. That is interesting, because accessibility checking is already something many existing Figma plugins from the community can do, including some paid plugins.

So the obvious question for anyone making Figma plugins is: what happens when users can generate their own?

I think the answer depends heavily on the type of task the plugin is automating, and how much complexity is hiding underneath the surface.

Some plugins make perfect sense to generate. Anything with a low surface area of inputs and outputs is a good candidate.

#### Modifying Figma layers

- Rename layers by editing the layer `name` property
- Tidy layers by editing the layer `x` and `y` position properties
- Apply a small set of rules across a selected group of layers

#### Creating Figma layers

- Generate a soundwave visualiser
- Create mockups of designs inside device frames
- Draw a simple set of placeholder components

For that kind of task, generative plugins are a great fit. They give designers a faster way to create small, custom utilities for their own files.

But there is still no such thing as a free lunch. Everything has trade-offs, and everything has a cost.

For tasks that are not a simple one-to-one input/output transformation, the complexity grows quickly. The number of edge cases grows with it. The plugin no longer just needs to do one thing once. It needs to do the right thing repeatedly, across messy real-world files, weird layer structures, different team conventions, changing platform APIs and export formats that all have their own quirks.

That might be fine for teams with a dedicated AI Ops person or someone technical who enjoys debugging generated tools. But realistically, most designers, developers and marketers using Figma are already a day behind their deadline, stuck in meetings, and trying to maximize the small amount of actual work time they get each week.

They do not necessarily want to become maintainers of a custom-generated plugin. They want to get the work exported, delivered and approved.

### What this means for Hypermatic

I have no delusions that AI agents, generative plugins and the broader shift toward more custom software will have no impact on Hypermatic.

I am sure we have already lost customers for certain plugins because they can now vibe-code a smaller version that fits their specific use case. Especially if they only needed a small subset of a plugin's functionality in the first place, and that's okay.

It is also not entirely new. Hypermatic has 12 different Figma plugins, each tackling a different use case. Over the years, plenty of plugin features have eventually become native to Figma itself, including password protection, spell check, Figma Slides, Figma Dev Mode and many more.

Whether a feature becomes native to Figma, gets replaced by a generated plugin, or gets rebuilt internally by a team using AI, the outcome is similar: the lowest-complexity parts of the software market become more abundant and less valuable over time. That has always been true. AI just makes it happen faster. The important question is not "can someone generate a plugin that does this?" The better question is: "do they want to own everything that comes after generating it?"

### Software as a Service

When people talk about SaaS, they usually focus on the software part. That is understandable, especially with all the headlines about the impending "SaaSpocalypse". The basic argument is that if anyone can vibe-code software with AI agents, the value of software companies falls off a cliff, because every customer will simply clone all the SaaS products they currently pay for and bring them in-house.

That will be true in some cases. There will be plenty of internal tools, dashboards, workflows, scripts and small utilities that no longer need to be bought from an external vendor. If the thing is simple enough, specific enough and low-risk enough, it probably should be generated internally. 

But I think the bigger argument throws out the baby with the bathwater. In many cases, you are not just paying for the software itself. You are paying for everything that comes with the software.

You are paying for:

- A dedicated company and team behind the product
- Customer support when something breaks or needs explaining
- Years of edge cases that someone else has already found and fixed
- Documentation, examples and onboarding material
- Ongoing maintenance when APIs, platforms and file formats change
- Infrastructure, hosting, security and uptime
- Someone else to care about the boring details forever

A lot of software is valuable precisely because you do not have to think about it anymore.

### Things I would still rather buy

If we flip this around, there are plenty of things I would not want to create, own, maintain or run as vibe-coded versions myself.

For example:

- Payment rails or anything to do with finance
- Servers, hosting and infrastructure
- SMTP servers or anything to do with sending and receiving email
- Real-time messaging apps like Slack or WhatsApp
- Design tools like Figma and Canva
- LLMs or code harnesses like OpenAI or Anthropic products
- Video editing and rendering tools
- Anything that processes or stores sensitive data

All of these products have many years, and in some cases decades, of thought, design, robustness and edge case handling built into them.

The idea that I would choose to vibe-code my own version of any of these from scratch, then run a critical part of my business on it, just to save $100/month while burning thousands of dollars in tokens and future maintenance time, feels like the wrong trade-off. AI makes it easier to build software. It does not make all software free to own.

### Where I think this lands

AI agents are leverage. In the same way that you could always code your own internal tools before, you can now spin up the first version of those tools much faster. That is genuinely useful, and it will change which products people choose to buy. But the first version was never the hard part of software. The hard parts are everything after that: handling edge cases, supporting customers, maintaining compatibility, improving the workflow, updating the product as platforms change, and making sure it keeps working when people rely on it.

That is where I think Hypermatic still fits. The easy parts of software are becoming cheaper every month. The difficult parts - understanding messy real-world workflows, handling accumulated edge cases, earning trust, and continually improving products over many years - are becoming more important. That is the direction we are continuing to build toward. Smaller company. Better workflows. More leverage. Less backlog.

---

---
type: tutorial
title: How to export Figma slides to Canva with one click using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-07-04T00:00:00.000Z
dateModified: 2026-07-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-slides-to-canva-with-one-click-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-slides-to-canva-with-one-click-using-pitchdeck.md
---

# How to export Figma slides to Canva with one click using Pitchdeck

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how you can automatically export your slide deck presentations from Figma into Canva using the Pitchdeck presentation Figma plugin in Figma. To get started, all we need to do is go to our Figma file, go to the little resources icon down here at the bottom, and if you click on that and then search for Pitchdeck. Under the Figma plugins tab, if you just click on the Pitchdeck item, you can run the Figma plugin by either clicking on this run button down here, or I'd recommend clicking on the save icon next to that. That will let you run the Figma plugin from your Figma plugins list. I've already clicked on the save icon, so I'm going to go back to my Figma canvas and just right-click anywhere. Then go down to plugins, go down to saved plugins, and then click on the Pitchdeck item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically treats any parent-level Figma frames or components on your page as slides, and then you can load those slides into the Figma plugin and create presentations. In this case, I'm just going to load up all of my slides. I've already pre-designed all of these slides, so I'm not going to go through how I designed them. I'm just going to assume that you've already got your slide deck designed in Figma and you just want to export it out to use in Canva.

To do that, all we need to do is go to the export button in the Figma plugin at the top right here. By default, it's going to be on the Pitchdeck presentation option, which basically uploads the presentation to a web URL that you can share. But in this tutorial, we want to use the Canva option. We're going to open up the presentation format dropdown, and we're going to go down to the bottom here under the static deck options, and we're going to click on the Canva option. Just go ahead and click on Canva. You can see here that it's basically going to export the deck as PSD because Canva natively supports PSD imports. This is going to allow us to retain all of the layers and everything like that.

You've got a few different options here. You can compress the images, you can make sure they're 2x retina images, and you can downsize Figma fills. In this case, I'm just going to keep it really simple and I'm going to turn on retina images and also compress the images. Downsizing large Figma fields basically just automatically downscales any really large assets to 2x their layer size. If you do need to do that, feel free to enable that as well. But for today, I'm just going to keep it really simple and enable these settings. Then I'm just going to click on export for Canva. That's essentially going to go through all of your slides or all of your Figma frames. It's going to compress any images down, and then it's going to bundle all of that up into a PSD file. Canva has a 300 MB file size limit for PSD imports. If the deck happens to be bigger than 300 megabytes, it will split it into multiple PSD files and zip those up. In this case, it's just going to be a single PSD file.

Once that finishes, just go ahead and click on the download your PSD file button. Then you can just save that anywhere. In this case, I'm just going to save it to my desktop. Once that's saved, you can just go to your browser and then go to canva.com and log into your own Canva account. All you need to do on the homepage here is just grab the PSD file that we just exported from the Figma plugin. Drag and drop it into here, and you'll see it'll say drop items to upload. Just let go of the mouse on that, and that's going to automatically upload the PSD file into your Canva account. Once that finishes uploading, we're going to be able to open that up and we're going to be able to edit it in our Canva account.

It's just finished uploading that, so you can see here we've got the little thumbnail. If I click on the project here, you can see it's just loaded up that in Canva. We can zoom in and take a look at our designs here. You can see that all of the frames have been imported, and because these are all layers, we can actually edit that. We can edit the text, we can style that if we need to in Canva, and obviously we can also move around images and reformat things like that in our slides as well. This basically makes it really easy to edit your slides in Canva after you've already exported them from your Figma designs.

If you need to get them out of Figma and into Canva, you can do this really easily using the Pitchdeck export feature. As I mentioned, that does have a 300 MB file size limit. I also just wanted to note that PSD files also have a canvas size limit. You'll notice that the Figma plugin is automatically arranging these into the grid that is going to maximize the amount of canvas space. You'll notice that my layout here is a little bit different; I've got three rows of three. In this case, when we open it up in Canva, you'll notice that the grid has been extended to maximize that available width just to make sure that it doesn't have to split up the PSD files when it's not necessary. I just wanted to flag that as well, but it's nothing you really have to worry about. If you do get a zip file with multiple PSDs, you can just upload both of those PSDs into Canva, and you'll be able to edit both of those as you'd expect, just like this.

I just want to keep this really quick for today and show you this new export feature in case you've been wondering how to get your slide decks or your presentations out of Figma and into your Canva account. This is going to be a really easy way to do it without having to rebuild those slides or just import them as images. This way, you'll be able to continue editing your designs or slides in Canva. We'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: SafeFrame QA Workflow for HTML5 Banner Campaigns
description: Review Bannerify HTML5 exports the way managed ad placements actually load them, so scaling, click behavior, and fallback assumptions are checked before trafficking.
datePublished: 2026-07-03T00:00:00.000Z
dateModified: 2026-07-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-safeframe-qa-workflow-for-html5-banner-campaigns/
markdownUrl: https://www.hypermatic.com/articles/bannerify-safeframe-qa-workflow-for-html5-banner-campaigns.md
---

# SafeFrame QA Workflow for HTML5 Banner Campaigns

An HTML5 banner can look perfect in a local preview and still behave differently once it lands inside a managed publisher environment.

That is the trap teams fall into with SafeFrame-style delivery and other controlled iframe-based placements. The creative review happens in one environment. The ad actually runs inside another. If the team only checks the "open the exported banner in a browser tab" version, they can miss problems that do not show up until trafficking.

[Bannerify](/bannerify/) helps teams export production-ready HTML5 banners from Figma quickly, but it does not remove the need for environment-aware QA. The point of a SafeFrame-focused workflow is to check the assumptions around scaling, exits, fallbacks, and managed delivery before the campaign reaches ad ops.

If you need a broader platform comparison first, start with [HTML5 Banner QA Matrix by Ad Platform](/articles/bannerify-html5-banner-qa-matrix-by-ad-platform/). This article is narrower. It is for the moment when the destination environment itself changes how the banner should be reviewed.

## What SafeFrame-style placements change in practice

The technical details vary by publisher and ad stack, but the workflow implication is consistent:

the banner may be loaded inside a more controlled container than the designer or reviewer used during creative approval.

That can affect:

- perceived scaling behavior
- click handling ownership
- font or asset loading assumptions
- overflow expectations
- fallback behavior if richer media does not behave as expected

You do not need every designer to become an ad-serving expert. You do need the team to stop assuming that a clean open-in-browser preview equals traffic-ready behavior in every managed placement.

## Ask these trafficking questions before export, not after

Before the team batch-exports the campaign, someone should confirm:

- Is this placement expecting HTML5, or would GIF or MP4 be safer?
- Will the banner run in a managed iframe or wrapper environment?
- Who owns click tracking or exit behavior?
- Is any fallback asset expected?
- Are there size or packaging expectations beyond the visual design itself?

Those questions sound operational because they are operational. The point is to surface them while the creative is still easy to adjust.

This is especially important for campaigns with many variants. If the assumption is wrong on one representative banner, it is usually wrong on all of them.

## Use a representative package for the first QA pass

Do not start with the full batch.

Pick one banner size that is representative of the campaign and run the deeper QA pass there first. A 300x250 or whichever unit best reflects the animation, CTA, and asset complexity is usually enough to reveal the important issues early.

That first-pass QA should check:

- initial load behavior
- animation timing
- visible scaling inside the managed container
- click and interaction expectations
- whether the fallback story is acceptable if rich behavior is constrained

Only after that sample package is understood should the team scale to the rest of the sizes and variants.

If your workflow also involves lots of offer or audience variations, [Banner Variant Review Workflow for Campaign Teams](/articles/bannerify-banner-variant-review-workflow-for-campaign-teams/) is a strong companion article because it helps keep the content side organized while this environment-specific QA happens.

## Review scaling assumptions separately from design intent

A common failure mode is that the banner looks "off" in placement, but nobody has separated the reasons clearly.

Ask:

- Is the design itself wrong?
- Is the animation pacing wrong?
- Or is the managed environment changing how the banner is displayed?

That distinction matters. A clean Figma file and a clean Bannerify export can still behave differently if the placement wraps or scales the result in a more constrained way than the local preview suggested.

The right response is usually not panic-rebuilding the creative. It is checking whether:

- the destination really wants this export type
- the placement environment changes the expectations
- a simpler fallback output would be safer for that buy

That is why SafeFrame-oriented QA belongs before full trafficking, not after the campaign is already multiplied into dozens of files.

## Keep click-behavior review separate from CTA review

Creative teams are good at reviewing whether the CTA text is persuasive.

That is not the same as reviewing how exits are handled in the actual destination workflow.

For managed placements, the team should confirm:

- whether click behavior is embedded in the package or added downstream
- whether the trafficker expects a particular setup
- whether the final destination URL logic is owned by design, media, or ad ops

This is exactly where HTML5 banner review gets muddled. Someone says "the button works in preview," but that only proves one narrow thing.

For deeper click-specific review patterns, [HTML5 Ad Click Tag Checklist](/articles/bannerify-html5-ad-click-tag-checklist/) is the best adjacent article in the current library.

## Treat fallback planning as part of launch readiness

SafeFrame-style QA is not only about whether the HTML5 package works in the happy path. It is also about what happens if the managed environment or trafficking process needs a simpler alternative.

That is why the team should decide up front:

- Do we need a fallback image or alternate asset?
- Would MP4 or GIF be safer for certain placements?
- Are there richer behaviors that are nice to have but not essential to the message?

This is one of the most practical uses of [Bannerify](/bannerify/). The same Figma source can support different output types when the media plan requires more than one delivery path.

The important thing is to make that decision intentionally. Do not discover during trafficking that one placement should never have received the most complex version.

## A practical SafeFrame QA workflow

This is the sequence I would standardize:

1. Confirm whether the destination is a managed iframe-style placement and what output it expects.
2. Export one representative HTML5 package from the Figma source.
3. Review the banner in the closest available managed context, not only as a standalone local preview.
4. Check scaling, first-frame clarity, click-handling ownership, and any fallback expectations.
5. Let trafficking or ad ops validate the package shape before the campaign is batch-exported.
6. Scale the rest of the campaign only after the representative package passes that environment-aware review.

That fifth step is where a lot of wasted production time disappears. The team does not need a perfect simulation of every publisher environment. It does need one clear checkpoint where the managed-delivery assumptions become real.

If the question is broader than SafeFrame and includes output-type choice, [When to Use HTML5 vs GIF vs MP4 Banner Exports](/articles/bannerify-when-to-use-html5-vs-gif-vs-mp4-banner-exports/) is the best follow-up.

## Common mistakes this workflow prevents

- approving the creative only in a standalone browser tab
- exporting every size before validating one representative package
- assuming click behavior is covered because the CTA looks correct
- discovering too late that a simpler output type would have fit the placement better
- treating fallback planning as a post-problem reaction instead of a pre-launch decision

Those are not code-quality mistakes. They are workflow mistakes. And they are exactly the kind that keep recurring if the team does not add one environment-specific QA gate.

## Where Bannerify helps most

[Bannerify](/bannerify/) gives design and creative ops teams a fast path from Figma to HTML5 banner production. That speed matters. But on managed placements, speed only helps if the team is reviewing the right thing.

A SafeFrame-aware QA workflow is really about honesty:

- the local preview is useful
- but it is not the only reality that matters

Once the team validates the banner the way it is more likely to be delivered, campaign handoff gets calmer and trafficking surprises get smaller. That is the point of the workflow.

---

---
type: article
title: Mixed Deck Source Recovery Workflow for Agencies
description: Recover an editable Figma presentation workflow when a client only has a mix of old PowerPoint files, PDFs, Word docs, and scattered visual assets.
datePublished: 2026-07-03T00:00:00.000Z
dateModified: 2026-07-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-mixed-deck-source-recovery-workflow-for-agencies/
markdownUrl: https://www.hypermatic.com/articles/convertify-mixed-deck-source-recovery-workflow-for-agencies.md
---

# Mixed Deck Source Recovery Workflow for Agencies

Agencies often inherit presentation work in the worst possible state.

The client says they "have the deck," but what they actually have is:

- last quarter's PowerPoint
- a polished PDF sent to prospects
- a Word document with updated messaging
- a few charts in separate files
- old logos or brand assets exported from Illustrator

The work is not starting from zero, but it is also not safely editable. That is where teams lose days reconstructing slides instead of improving them.

[Convertify](/convertify/) is useful in exactly this kind of recovery job because it can bring multiple file types and legacy design assets back into a Figma-centered workflow. The point is not to import everything blindly. The point is to rebuild one useful source of truth from a messy bundle of old materials.

If your team is still solving the earlier intake problem, read [Client Design File Intake Checklist](/articles/convertify-client-design-file-intake-checklist/) first. This article starts one step later, once the client has already handed you a mixed bag of deck-source files and expects a clean redesign or update.

## The first goal is not conversion. It is source triage.

Teams get into trouble when they rush straight into importing files without deciding what each file is actually good for.

A deck recovery project usually includes four asset types:

- editable slides that still contain reusable structure
- static exports that are visually useful but not deeply editable
- text documents that contain the newest approved messaging
- brand assets that need to be cleaned up or replaced

Treat those as different classes of source material.

For example:

- a PowerPoint may be best for slide order and rough content blocks
- a PDF may preserve the most accurate visual layout of a later revision
- a Word doc may hold the latest approved messaging even if it has no design value
- Illustrator or PDF logos may be the only surviving vector brand assets

That triage step is what keeps the project from becoming a giant import-and-cleanup mess.

## Build a recovery plan around what must stay editable

The most important question is:

What does the client need to keep editing after this project?

If the answer is:

- future deck copy
- headline swaps
- case-study slides
- KPI screenshots
- charts or tables

then those areas deserve the most careful conversion and cleanup effort.

If the answer is only:

- present a polished deck next week

then some parts of the source may not need the same level of recovery.

That distinction matters because not every imported artifact deserves the same treatment. A background image that will never change does not need the same recovery effort as a reusable proof slide the sales team updates every month.

This is where [Convertify](/convertify/) is most helpful as a workflow tool rather than a one-click magic trick. It gives the team a faster path back into Figma, but the project still needs a decision about where editability matters most.

## Recover in layers, not file by file

I would approach a mixed deck recovery in this order:

### 1. Recover structure

Use the most editable source you have to recover slide order, section logic, and repeated layout patterns.

Often that is an old PowerPoint or another slide-format file, even if the content is dated.

### 2. Recover the most current messaging

Use the Word or document source to identify:

- updated positioning
- new product claims
- revised proof points
- new CTA language

Do not assume the prettiest deck contains the newest copy.

### 3. Recover high-value visuals

Use PDFs, legacy design exports, or brand files to recover:

- charts worth rebuilding
- diagrams worth redrawing
- approved illustrations or icons
- logos and lockups that should stay consistent

### 4. Rebuild the reusable deck system in Figma

Once the parts are visible, the goal becomes creating a clean Figma structure the client can keep using:

- title slides
- proof slides
- section dividers
- comparison slides
- appendix templates

That is the moment the project stops being a rescue job and becomes a usable design workflow again.

## Use the PDF as evidence, not only as a final artifact

Teams sometimes treat PDFs as dead ends. In recovery projects, they are often the clearest evidence of what the client actually approved.

That does not mean a PDF should become the editable master.

It means the PDF can help answer:

- which version had the final visual direction?
- which charts or callouts survived to the last circulated deck?
- which slide details need to be matched during cleanup?

If the PDF is the best surviving reference, let it guide the rebuild while more editable sources drive structure and content. [PDF Design File Extraction Workflow](/articles/convertify-pdf-design-file-extraction-workflow/) is the closest related article if the PDF is doing most of the heavy lifting.

## Keep the copy workflow separate from the slide cleanup workflow

One of the most avoidable agency mistakes is mixing copy decisions and visual cleanup into the same pass.

When that happens:

- designers polish outdated text
- strategists rewrite copy after layout is already tuned
- PMs send corrected messaging after the deck has been "finished"

A better recovery workflow separates the tasks:

- first recover the candidate copy sources
- then identify which source is authoritative
- then clean the visuals around approved content

If the client has a recent Word document or narrative brief, use it deliberately. It may be the cleanest path to accurate messaging even if it has no design value on its own.

This is especially important for proposal, sales, and board-style decks where the copy goes stale faster than the layout.

## Decide what to rebuild and what to preserve

Agencies waste time when they treat every legacy element as sacred.

Ask of each slide component:

- does this still support the new message?
- will the client need to edit it again?
- is it faster to clean up, or faster to rebuild cleanly?

For example:

- a clean title slide from PowerPoint may be worth preserving
- a flattened chart from a PDF may be better rebuilt in Figma
- an outdated diagram may be easier to redraw than repair
- a reusable appendix layout may justify careful cleanup because it will be used for months

That judgment is where the project quality comes from. Importing is only the first move.

## A practical workflow for rebuilding a client deck from mixed files

Here is the sequence I would standardize:

1. Inventory every source file by type and likely value.
2. Mark which assets are best for structure, copy, approved visuals, and brand recovery.
3. Decide which slide families must remain editable after delivery.
4. Import and recover those high-value elements first.
5. Build a clean Figma deck system around the recovered material instead of preserving every artifact exactly.
6. Run a post-conversion cleanup pass on typography, spacing, image quality, and repeated components.

If the project also includes broader cross-format cleanup, [Agency Workflow for Mixed Design File Formats](/articles/convertify-agency-workflow-for-mixed-design-file-formats/) and [Legacy Design File Cleanup After Migration](/articles/convertify-legacy-design-file-cleanup-after-migration/) are the most relevant supporting articles.

## What to review before calling the recovery complete

Do not stop at "the slides are visible in Figma."

Check whether:

- text remains selectable and reasonably editable where it needs to be
- repeated layouts are actually reusable instead of copy-pasted chaos
- brand assets are the correct, current versions
- charts and tables are legible enough to update next quarter
- filenames and page organization make sense for the next team

That final check is what turns a recovered deck into an operational asset instead of a prettier archive.

## Where Convertify helps most

[Convertify](/convertify/) is valuable here because agencies rarely receive one tidy source file. They receive fragments of past work in whatever format survived the last project, team change, or client handoff.

The real job is not conversion for conversion's sake. It is recovering just enough structure, copy, and visual fidelity to give the client one editable Figma-centered deck system again.

When that workflow is done well, the agency stops spending energy on archaeology and starts spending it on the actual presentation strategy.

---

---
type: article
title: Product Rename Rollout Workflow in Figma
description: Run a product or feature rename across Figma screens, support visuals, and review documents without letting old terminology linger in high-visibility surfaces.
datePublished: 2026-07-03T00:00:00.000Z
dateModified: 2026-07-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-product-rename-rollout-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-product-rename-rollout-workflow-in-figma.md
---

# Product Rename Rollout Workflow in Figma

A terminology audit tells you where the old name still exists. A rename rollout is what happens next.

That difference matters because product teams often celebrate the naming decision too early. The new term gets approved in strategy docs, maybe even on the website, but the working design surfaces still contain a trail of the old language:

- settings screens use the old label
- empty states use the new one
- help center screenshots still show the old wording
- release notes bridge both terms awkwardly
- support and product demos start drifting in different directions

This is where [CopyDoc](/copydoc/) becomes especially useful. It does not just help you spot terminology drift. It helps you move approved copy changes across the Figma surfaces that still need to be updated.

If you have not yet identified the inconsistent language, begin with [Figma Terminology Audit Workflow](/articles/copydoc-figma-terminology-audit-workflow/). This article assumes the naming decision is already made and the real job is rollout: updating the source designs, screenshot surfaces, and review documents without creating new confusion.

## Treat the rename as a release, not a copy edit

The rename workflow gets risky when the team frames it as "just a text update."

A product or feature rename usually affects:

- navigation labels
- feature descriptions
- onboarding and empty states
- billing, pricing, or permissions copy
- help center or release-note screenshots
- support macros or demo artifacts

That means the work has owners, sequencing, and edge cases just like a feature rollout does.

The first practical decision is scope:

- Is this a full replacement of the old term?
- Is the old term still valid in legacy or migration contexts?
- Are there temporary bridge phrases the team wants to use?
- Which surfaces are customer-visible first?

Without those answers, the rename becomes a string hunt with inconsistent judgment.

## Decide the canonical language before touching the screens

Before anyone starts bulk-updating text in Figma, define:

- the new canonical term
- approved variants or exceptions
- phrases that should not be changed automatically
- surfaces that need contextual wording rather than direct replacement

For example, if "project" becomes "workspace," the team may still want old migration docs or import instructions to reference the legacy term in a sentence like:

"If you previously used Projects, they are now called Workspaces."

That is a rollout rule, not a terminology-audit finding.

This is why I like using a small change table with columns for:

- old term
- new term
- exact exception cases
- owner
- affected surfaces

Once that table exists, the rollout gets much safer.

## Export the affected copy into one review surface

A rename is hard to manage when every discussion stays trapped inside the canvas.

CopyDoc helps because it can export Figma text into structured formats, which makes it easier to:

- group screens by flow
- search for the outgoing term
- review repeated strings together
- assign decisions before re-importing updates

That is especially useful when the rename crosses several product areas.

A good review grouping might be:

- primary navigation and IA
- onboarding and upgrade flows
- settings, billing, and permissions
- help and support surfaces
- screenshot or demo artifacts

That grouping helps the team answer a more useful question than "Where does the old word appear?"

It helps answer:

"Where will customers notice inconsistency first?"

## Separate direct replacements from contextual rewrites

This is where rename rollouts often go off the rails.

Some strings can be updated safely with near-direct replacement.
Others need rewriting because the sentence no longer makes sense after the term changes.

Examples:

- `Manage project access` might become `Manage workspace access` directly.
- `Invite your team to this project` might need a fuller rewrite if the new concept changes ownership, hierarchy, or permissions.

That is why the team should classify affected strings into:

- direct replacement
- needs rewrite
- exception

Once those three buckets are visible, the rollout becomes much easier to manage without over-editing.

## Do not forget screenshot surfaces and support artifacts

Rename projects often fail in the obvious places and linger in the high-visibility supporting surfaces:

- product marketing screenshots
- onboarding visuals
- help center illustrations
- release-note walkthroughs
- support-team screenshots or macros

That is one reason I see rename work create trust gaps. The live UI may be updated, but the screenshot in the help article still teaches the old word.

If your team is especially exposed to that problem, [Help Center and UI Copy Alignment Workflow in Figma](/articles/copydoc-help-center-and-ui-copy-alignment-workflow-in-figma/) is the best adjacent article. It covers the cross-surface review pattern that rename rollouts often need.

## A good rename rollout has a freeze and reopen point

Teams often underestimate the coordination value of a temporary copy freeze.

For any meaningful rename, define:

- when the term is frozen for change review
- when updated text is approved for rollout
- when new designs should stop using the legacy term entirely

That prevents the frustrating middle state where:

- one designer uses the new term
- another still ships a frame with the old term
- support writes an article using a bridge phrase
- product marketing is already screenshotting the renamed UI

Even a short freeze window can prevent weeks of cleanup later.

## A practical workflow for running the rename inside Figma

This is the sequence I would standardize:

1. Define the canonical replacement term and exception rules.
2. Export the affected Figma text and group it by flow or surface area.
3. Mark strings as direct replacement, rewrite, or exception.
4. Update the approved strings and re-import them into the design files.
5. Review the updated frames visually for truncation, hierarchy shifts, and leftover legacy wording.
6. Run a screenshot and support-surface pass before announcing the rename as complete.

That fifth step is important because renames often change text length in ways that create new design issues:

- tabs wrap
- buttons overflow
- helper text becomes denser
- cards no longer balance visually

If the team also needs a focused text-editing aid during cleanup, [How to find and replace Figma text content using CopyDoc](/tutorials/how-to-find-and-replace-figma-text-content-using-copy-doc/) is a practical companion tutorial.

## What good and bad handoff look like

Good handoff:

- a shared rename table exists
- direct replacements and rewrites are separated
- support, marketing, and product all know the approved term
- screenshots and design surfaces are reviewed together

Bad handoff:

- someone says "we renamed it already"
- a few visible screens are updated
- everyone assumes the other team will catch the rest
- legacy wording keeps surfacing for another month

The difference is not grammar quality. It is rollout discipline.

## Where CopyDoc helps most

[CopyDoc](/copydoc/) is strongest here because a rename rollout is really a structured text-governance problem hiding inside a design workflow.

Figma is where the customer-visible screens live, but it is not the easiest place to audit, classify, approve, and then push a coordinated naming change at scale. CopyDoc closes that gap.

For teams that keep tripping over "we changed the name, but the product still looks inconsistent," this is the workflow worth standardizing. A rename should feel like a clean transition, not a long trail of almost-updated screens.

---

---
type: article
title: Shared Footer and Disclaimer Workflow for Multi-Brand Email Teams
description: Keep legal footers, unsubscribe logic, and brand-specific disclaimer blocks consistent when one Figma email system supports multiple brands or regions.
datePublished: 2026-07-03T00:00:00.000Z
dateModified: 2026-07-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-shared-footer-and-disclaimer-workflow-for-multi-brand-email-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-shared-footer-and-disclaimer-workflow-for-multi-brand-email-teams.md
---

# Shared Footer and Disclaimer Workflow for Multi-Brand Email Teams

Multi-brand email teams rarely break campaigns in the hero section. They break them in the footer.

The layout is approved. The headline is on-brand. The promo module is correct. Then someone notices:

- the wrong sender entity is in the footer
- a required disclaimer is missing for one region
- the unsubscribe logic was reviewed on one brand but not another
- the legal block wraps badly on mobile
- a local team copied an older footer module because it was easier than rebuilding the right one

That is why footer and disclaimer governance deserves its own workflow.

[Emailify](/emailify/) is a strong fit for this because it keeps the email system inside Figma while still exporting responsive HTML and supporting platform-oriented email workflows. But the plugin does not solve footer drift automatically. The team still needs a structure that makes shared compliance-sensitive blocks easy to maintain and hard to misuse.

If your team needs a broader legal review process, start with [HTML Email Compliance Review Workflow](/articles/emailify-html-email-compliance-review-workflow/). If the main challenge is brand architecture, [Multi-Brand Email Template Workflow in Figma](/articles/emailify-multi-brand-email-template-workflow-in-figma/) is the nearest companion article. This piece sits at the intersection: one email design system, multiple brands or regions, and shared footer logic that keeps causing avoidable risk.

## Separate what is locked from what is local

The fastest way to create footer chaos is to treat the whole bottom section as one editable design block.

A better model is to split footer content into two categories:

### Locked shared elements

These are the pieces that should rarely change without central review:

- company identity wording
- unsubscribe or preference-management structure
- legal entity references
- base privacy or compliance language
- recurring compliance formatting rules

### Local brand or regional elements

These are the parts that may vary:

- brand-specific sender naming
- market-specific addresses or registration details
- regional disclosures
- local promotional conditions
- translated legal wording that still follows the shared structure

That distinction makes review faster because the team can see which parts are meant to be reused and which parts are meant to be customized.

## Do not review disclaimers only as copy

Legal copy problems in email are often layout problems too.

A disclaimer block can be technically present and still fail the real review because:

- it becomes unreadably small on mobile
- it is visually disconnected from the offer it qualifies
- the line length becomes hard to scan in one locale
- dark mode or low contrast makes it easy to miss

This is one reason [Emailify](/emailify/) is helpful. The team can review the actual HTML path and previews instead of assuming the Figma design alone tells the whole story.

For repeated client-level rendering checks, [How to test HTML emails in different clients with exports from Figma using Emailify](/tutorials/how-to-test-html-emails-in-different-clients-with-exports-from-figma-using-emailify/) is still the best hands-on tutorial. But the larger workflow decision comes earlier: organize the footer so those checks are consistent in the first place.

## Build footer modules like governance components, not decoration

Most teams already think in terms of reusable headers, hero blocks, product rows, and CTA modules. The footer deserves the same discipline.

For multi-brand systems, define a small set of footer module types, such as:

- standard promotional footer
- transactional footer
- region-specific regulated footer
- partner or co-marketing footer
- local-language variation of a core footer

The point is not to create endless variants. The point is to reduce improvisation.

When someone opens a Figma email file, they should be able to tell:

- which footer family belongs in this campaign
- what text can be edited locally
- what must be reviewed centrally before export

That is much safer than copying the footer from "the last send that looked close enough."

## Keep disclaimer ownership visible before export

The more brands or regions involved, the more likely it is that nobody fully owns the final legal block.

I would assign visible ownership for:

- campaign owner
- legal or compliance reviewer
- CRM or lifecycle owner
- design system owner for the email modules

That ownership split matters because footer problems often happen between teams, not inside one team.

Marketing assumes legal already approved the wording.
Legal assumes CRM inserted the correct preference logic.
CRM assumes design used the correct module.
Design assumes the footer copy was already final.

A shared footer workflow works best when the review question is explicit:

"Which footer module is this campaign using, and who approved that choice?"

## Review the footer in the same order a subscriber experiences the send

One useful practice is to review the lower part of the email as a subscriber journey rather than as a design component.

Check:

1. the final CTA or conversion block
2. any qualifying offer language
3. the disclaimer text that changes how the offer should be read
4. sender identity and company details
5. unsubscribe or preference controls

That flow catches a lot of subtle mismatches:

- the offer says "free" but the qualifier is hidden or unclear
- one region's address rules are correct but the sender name is not
- the promotional body is translated but the legal detail is still in the wrong language
- the footer is technically valid but clearly not the intended brand

The design system should make those issues easier to see, not harder.

## A practical workflow for multi-brand footer control

This is the sequence I would standardize:

1. Define the shared footer families your email program actually uses.
2. Mark which lines are centrally controlled and which are localizable or brand-specific.
3. Build those modules into the Figma system so campaign designers are choosing rather than inventing.
4. Review the footer in HTML preview on desktop and mobile before export.
5. Confirm the correct platform-specific or ESP-specific structure for unsubscribe and footer behavior.
6. Export only after the campaign owner, legal reviewer, and CRM owner have approved the same footer version.

That fifth step matters more than teams expect. A footer that is visually right but mismatched to the target email platform still creates manual cleanup later.

If your team is repeatedly patching output after export, [Figma Email QA Before ESP Upload](/articles/emailify-figma-email-qa-before-esp-upload/) is another useful follow-up because it covers the wider handoff before the email reaches the platform.

## Common mistakes that create footer drift

- storing the most important disclaimer block as a flattened image instead of editable text
- creating one "master footer" that is too generic to satisfy regional or brand-specific requirements
- letting local teams duplicate and edit old footer modules without a review trail
- approving the footer in Figma but not in the actual HTML preview
- treating unsubscribe logic as a CRM implementation detail instead of part of the design-system workflow

All of those mistakes come from the same assumption: that the footer is a minor detail at the bottom of the file. In a multi-brand email program, it is often the most governance-heavy area in the whole template.

## Where Emailify helps most

[Emailify](/emailify/) is valuable because it lets the team keep modular email production close to the Figma source while still reviewing the real exported experience across clients and platforms.

That matters for footer governance because the risk is rarely creative. The risk is operational inconsistency:

- one brand uses an outdated disclaimer
- one region inherits the wrong sender details
- one reviewer approves a different version than the one actually exported

Once the footer is treated like a governed module family instead of an afterthought, multi-brand email production gets much calmer. And calmer is exactly what you want from the part of the workflow most likely to create compliance cleanup under deadline pressure.

---

---
type: article
title: Board Pre-Read Deck Workflow for Startups
description: Build a board pre-read deck in Figma without losing control of sensitive updates, appendix slides, or final export choices before the meeting.
datePublished: 2026-07-03T00:00:00.000Z
dateModified: 2026-07-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-board-pre-read-deck-workflow-for-startups/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-board-pre-read-deck-workflow-for-startups.md
---

# Board Pre-Read Deck Workflow for Startups

Board decks rarely fail because the slides look bad. They fail because the workflow around the slides gets messy.

The numbers change late. Someone needs a safe PDF for the pre-read. A founder wants a lighter live-presenting version for the actual meeting. Finance adds appendix slides at the last minute. Then the team starts exporting multiple versions from multiple tools and nobody is fully sure which file is now the real one.

That is exactly the kind of presentation workflow [Pitchdeck](/pitchdeck/) is well suited for. It lets a team keep the deck source in Figma while still exporting to PowerPoint, Google Slides, PDF, Keynote, or a hosted presentation. But a board pre-read still needs more structure than a normal internal update deck.

If your team is still deciding between output types in general, read [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/) first. This article is for a narrower problem: the high-pressure, version-sensitive deck that gets sent before a board meeting.

## Treat the board pre-read as its own artifact

One common mistake is treating the pre-read as "the board deck, but earlier."

It is usually more specific than that.

A board pre-read often needs:

- a slower, more self-explanatory narrative
- more context in the appendix
- cleaner labels on charts and KPIs
- fewer live-presenter assumptions
- a safer circulation format

The live meeting deck may overlap heavily, but it is not always identical.

That means the workflow should define three things explicitly:

1. the source deck in Figma
2. the pre-read export
3. the live-meeting version, if it differs

Once those are named clearly, it becomes much easier to handle last-minute changes without creating confusion.

## Decide what the board actually needs to do with the file

Before anyone polishes transitions or layout details, answer the practical question:

- Is the board mostly reading this asynchronously before the meeting?
- Do directors need a stable artifact that should not drift?
- Will someone outside the design team need to make edits after signoff?
- Is the deck safer as a PDF than as an editable file?

For most startup board pre-reads, the safest default is a PDF because it preserves layout and reduces accidental edits. But that does not mean the Figma source cannot also generate a separate live deck later.

The key is deciding early which output owns which job:

- PDF for the circulated pre-read
- Figma source for design control
- optional PowerPoint or hosted deck for live presenting, if the team truly needs it

This sounds like a file-format question, but it is really a governance question.

## Build the deck in layers: narrative, metrics, appendix

The fastest way to lose control of a board pre-read is to let everything sit in one undifferentiated stack of slides.

I like organizing the source deck in three clear sections:

### 1. The narrative layer

This is the story the board should understand without a presenter in the room:

- company context
- major wins and misses
- progress against goals
- key risks and decisions

These slides need stronger written clarity than a typical live sales or conference deck.

### 2. The metrics layer

This is where KPIs, chart labeling, period definitions, and benchmark notes need to be exceptionally consistent. If a number might be challenged, the deck should already make the context easy to understand.

### 3. The appendix layer

This is where most board workflows become fragile. Teams either:

- bury critical detail in the main narrative
- or keep appendix slides so disconnected that last-minute updates break the thread

A better approach is to treat the appendix as a deliberate support layer: supporting financial detail, segment views, deeper operational metrics, and backup slides that may never be shown live but matter to the pre-read.

That separation makes it easier to export a stable pre-read without constantly guessing which detail belongs where.

## Lock the ownership of late changes

Sensitive decks drift when several people can change them indirectly.

For board pre-reads, assign clear ownership across:

- content owner for the final story
- data owner for KPI accuracy
- design owner for layout and readability
- executive approver for the release decision

That sounds formal, but it is usually faster than the alternative.

The dangerous workflow is:

- leadership reviews screenshots in chat
- finance updates a number in one slide
- ops updates the appendix elsewhere
- a founder exports a new PDF from an older version

Even when everyone is competent, the process can still produce a mismatched artifact.

If your team already feels deck sprawl during investor or fundraising work, [Pitch Deck Version Control for Startups](/articles/pitchdeck-pitch-deck-version-control-for-startups/) is the closest adjacent article. The board pre-read workflow is a more specific, recurring version of that same risk.

## What should be reviewed before export

Board decks need a different review lens from customer-facing or sales presentations.

Check these before final export:

- do slide titles make sense without spoken context?
- are month, quarter, and year labels explicit on every chart that needs them?
- are any metrics rounded in a way that hides meaningful movement?
- does the appendix answer the predictable follow-up questions?
- is confidential detail included only where it should be?
- will a PDF preserve the intended reading order and hierarchy?

The biggest board-deck mistake is not visual ugliness. It is ambiguity.

A board member should not have to guess:

- what changed
- why it changed
- whether the team thinks it is good or bad
- what decision or discussion point matters most

## Keep the live meeting deck lighter than the pre-read when needed

Not every team should use the exact same deck for both jobs.

If the board pre-read is dense, detailed, and appendix-heavy, the live version may work better with:

- fewer backup slides in the main sequence
- clearer talk-track transitions
- less on-slide text
- optional navigation or interaction for presenting

That does not mean rebuilding the whole deck elsewhere. It means deciding which frames are part of the circulated packet and which are part of the presented flow.

This is one of the practical reasons [Pitchdeck](/pitchdeck/) is useful. The same Figma-controlled source can support different outputs without forcing the team back into a PowerPoint-first workflow every month.

## A concrete board pre-read workflow that holds up under deadline pressure

Here is the sequence I would standardize:

1. Build the board narrative, metrics, and appendix as separate sections in the Figma source.
2. Mark which slides belong in the pre-read and which are only for the live meeting.
3. Freeze KPI ownership before final layout polish starts.
4. Run an async clarity review from the perspective of a director reading alone.
5. Export the pre-read as PDF once the numbers and appendix are locked.
6. If the live meeting needs a different format, generate that from the same approved source rather than editing a second deck manually.

That fifth step matters. The pre-read should become a named, stable artifact, not a moving target that keeps being replaced in inboxes.

For teams that still need clickable navigation or presentation-style exports for another audience, [How to export clickable interactive PDFs from Figma using Pitchdeck](/tutorials/how-to-export-clickable-interactive-pd-fs-from-figma-using-pitchdeck/) is a useful companion resource. It is just not the first priority for the typical board pre-read.

## Common mistakes that make board decks feel risky

- exporting the pre-read too early, then patching a later version by hand
- letting the appendix become a clutter pile instead of a support layer
- choosing editability over stability when the board mostly needs a clean read
- circulating a deck with chart labels that require presenter narration
- treating every late change as harmless because "it is only one number"

The reason those mistakes matter is trust. Board decks are often used to make or frame consequential decisions. A workflow that creates ambiguity forces leadership to spend attention on the artifact instead of the discussion.

## Where Pitchdeck helps most

[Pitchdeck](/pitchdeck/) is strongest here when the team wants one controlled Figma source for a sensitive, recurring deck that may still need multiple output paths.

The real benefit is not "we exported a PDF." Any tool can do that.

The real benefit is keeping the pre-read, live meeting version, and supporting exports tied closely enough to the same source that late changes do not create silent drift.

For startups running monthly or quarterly board cycles, that is the workflow worth formalizing. A calmer board-prep week is usually not about prettier slides. It is about fewer version mistakes.

---

---
type: article
title: Role-Based Dashboard QA Workflow from Figma
description: Compare admin, manager, and limited-access dashboard states against Figma designs so one route does not hide three different QA problems.
datePublished: 2026-07-03T00:00:00.000Z
dateModified: 2026-07-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-role-based-dashboard-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-role-based-dashboard-qa-workflow-from-figma.md
---

# Role-Based Dashboard QA Workflow from Figma

Dashboard QA gets messy fast when the route is the same but the role is not.

An admin sees revenue totals, extra actions, and dense tables. A manager sees a trimmed version. A limited-access user sees fewer controls, different empty states, or a locked panel instead. The engineering team may say "the dashboard is built," but design QA still has several different screens to review hiding behind one URL.

That is where [Pixelay](/pixelay/) is useful. It lets teams compare Figma designs against live sites, staging environments, localhost builds, and logged-in flows visually. For role-based dashboards, the biggest win is not only spotting pixel drift. It is making each permission state reviewable as its own artifact.

If your team is still solving the broader private-environment setup problem, start with [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/). If the main screen type is already clear and the issue is dashboard complexity by role, this article is the tighter workflow.

## One route can hide several review targets

Teams often say "the dashboard" as if it is one screen.

In practice, it may include different role states such as:

- admin overview
- team manager view
- individual contributor or member view
- read-only client view
- no-data or first-time-user dashboard

Those states may share the same layout skeleton while differing in:

- visible modules
- metric cards
- action buttons
- filters and table columns
- permission messages
- empty or locked states

That is why route-based QA alone is too blunt for dashboard work. The real review unit is the role-state combination.

## Build a role matrix before you start comparing

The cleanest way to review a role-based dashboard is to define a matrix like this first:

| Role | Expected Figma frame | Required data state | Main risk |
| --- | --- | --- | --- |
| Admin | Full dashboard frame | Populated account | Information density and action hierarchy |
| Manager | Team summary frame | Mixed real data | Filter behavior and partial permissions |
| Member | Reduced-access frame | Standard account | Missing modules and empty states |
| Read-only | Restricted frame | Stable fixture | Messaging around limited access |

That sounds operational, but it makes QA much faster.

Without the matrix, reviewers keep rediscovering basic questions:

- which account should I use?
- is this module missing because of a bug or because of the role?
- which Figma frame is this supposed to match?

With the matrix, the comparison becomes much more objective.

## Keep the data state stable enough to make visual review meaningful

Role-based dashboards are especially noisy because different permissions often combine with different datasets.

If the team wants reliable design QA, it helps to define:

- the test account for each role
- what seeded or representative data should appear
- which modules are expected to be empty
- which alerts, banners, or tooltips should be suppressed if they create noise

The goal is not to fake the product. The goal is to stop meaningless data variance from hiding the real implementation issues.

For example, a dashboard comparison becomes much more useful when everyone knows:

- the admin account includes enough records to show the full table layout
- the member account intentionally shows one restricted widget and one empty-state panel
- the read-only account should display a specific permission explanation

That is how Pixelay comparisons stay focused on design drift instead of environment randomness.

## Review the shared skeleton first, then the role-specific differences

One reliable workflow is to split the QA pass into two layers.

### Layer 1: shared layout skeleton

Check the things that should be consistent across roles:

- page spacing
- card rhythm
- typography hierarchy
- side navigation alignment
- header behavior
- breakpoint handling

### Layer 2: role-specific divergence

Then check what should differ by role:

- hidden or visible modules
- permission messages
- table columns
- empty-state language
- action affordances
- dashboard density

This two-layer review is helpful because some issues are true implementation bugs, while others are logic bugs about who sees what.

The team should not file both with the same level of vagueness.

## Dashboards fail more often in the edges than in the hero numbers

When role-based dashboard QA is rushed, the main metric cards usually get the most attention and the edge conditions get missed.

Pay special attention to:

- long filter values
- truncated table labels
- cards disappearing and leaving awkward gaps
- CTA priority shifting when permissions change
- empty-state visuals that feel inconsistent with the populated state
- helper text or access messaging that wraps badly in constrained panels

That is where design QA has real leverage. Functional QA may confirm that permissions are working, but Pixelay-style visual comparison is what catches whether the resulting interface still feels deliberate and trustworthy.

If your team is already doing a broader analytics or operations review, [Dashboard QA Workflow from Figma](/articles/pixelay-dashboard-qa-workflow-from-figma/) is the nearest related article. The added challenge here is that the dashboard is not one visual system state. It is several.

## Capture evidence by role so engineers can act on it quickly

The most useful bug report for dashboard drift is not:

"The dashboard looks off."

It is:

- role used
- data state used
- compared Figma frame
- exact module or region that differs
- visual evidence showing the mismatch

That structure matters because engineers may only reproduce one role easily. If the issue only affects the manager view, the ticket should make that obvious immediately.

A good naming pattern for evidence is something simple like:

- `dashboard-admin-summary-card-spacing`
- `dashboard-member-empty-state-copy`
- `dashboard-readonly-permission-panel-width`

That is much easier to triage than a long screenshot thread with no clear role context.

## A practical workflow for role-based dashboard review

This is the sequence I would standardize:

1. Define the dashboard roles and the Figma frame that represents each one.
2. Prepare stable test accounts or fixtures for those role states.
3. Compare the shared dashboard skeleton across roles first.
4. Review each role-specific module set against its intended frame.
5. Capture visual evidence with the exact role and state in the ticket.
6. Re-run the same comparison after the fix instead of switching to a different account or state.

That sixth step is easy to skip, but it matters. A fix that looks correct on the admin account may still leave the manager or member version misaligned.

If the dashboard sits behind authentication and the team still needs the setup path, [How to compare websites behind a login with Figma designs using Pixelay](/tutorials/how-to-compare-websites-behind-a-login-with-figma-designs-using-pixelay/) is the most relevant tutorial in the current library.

## Common mistakes this workflow avoids

- reviewing only the highest-permission account and assuming lower roles are fine
- comparing a dashboard with unstable data and mistaking noise for design drift
- filing tickets without naming the role or account state used
- treating missing modules as visual bugs when they are actually permission rules
- fixing the shared layout while leaving role-specific edge states visually broken

These mistakes happen because role-based dashboards compress several interfaces into one route. The workflow has to compensate for that complexity.

## Where Pixelay helps most

[Pixelay](/pixelay/) is powerful for dashboard QA because it turns a fuzzy review problem into a visual comparison workflow the team can repeat.

For role-based products, that repeatability matters more than perfection. The team needs a way to say:

- this is the admin state
- this is the member state
- this is what changed from the design
- this is what we verified after the fix

Once that loop is defined, dashboard QA stops being a subjective "something feels different" conversation and becomes a calmer, faster part of shipping product changes.

---

---
type: article
title: Figma Export Format Workflow for Static, Motion, and PDF Assets
description: Choose the right TinyImage export format for screenshots, icons, animations, and review PDFs before your Figma handoff turns into avoidable cleanup.
datePublished: 2026-07-03T00:00:00.000Z
dateModified: 2026-07-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-figma-export-format-workflow-for-static-motion-and-pdf-assets/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-figma-export-format-workflow-for-static-motion-and-pdf-assets.md
---

# Figma Export Format Workflow for Static, Motion, and PDF Assets

Teams usually do not choose the wrong export format because they are careless. They choose it because the real decision happens too late.

The designer exports a default PNG because the layout is approved. Then marketing needs a lightweight hero image, support wants a short looping animation for the help center, product wants a PDF for review, and engineering asks whether the icons can be SVG instead. Suddenly one approved Figma file turns into a pile of last-minute re-exports.

That is the workflow problem [TinyImage](/tinyimage/) is best at removing. It gives teams compressed JPG, PNG, SVG, WebP, AVIF, GIF, MP4, and PDF exports directly from Figma, but the bigger win is deciding which format belongs to which job before the deadline gets close.

If you already know you only need static website imagery, start with [SVG vs PNG vs WebP for Figma Exports](/articles/tinyimage-svg-vs-png-vs-webp-for-figma-exports/) or [WebP vs AVIF for Figma Exported Images](/articles/tinyimage-webp-vs-avif-for-figma-exported-images/). This article is broader. It is for teams juggling static assets, motion assets, and review artifacts from the same design source.

## Start with the downstream job, not the format menu

Before exporting anything, list the actual deliverables. In a typical launch batch, that might look like:

- SVG logos and icons for implementation
- compressed hero and feature images for the website
- short GIF or MP4 loops for release notes or support docs
- a PDF for stakeholders who want a review artifact
- a few lossless PNGs for screenshots that still need annotations

That exercise usually makes the correct format choices much clearer.

The useful question is not "Which format is best?"

It is:

- Which asset needs to stay crisp at any size?
- Which asset needs the lightest possible web payload?
- Which asset needs motion?
- Which artifact is only for approval, not production?

Once those questions are answered, the export decision gets much less emotional.

## A practical format map

Use this as the first-pass decision guide:

| Deliverable | Best first choice | Why |
| --- | --- | --- |
| Simple icons, logos, line illustrations | SVG | Scales cleanly and stays editable for developers |
| UI screenshots, transparent product shots, annotated visuals | PNG | Reliable when crisp detail matters and transparency is required |
| Marketing images for modern websites | WebP or AVIF | Better compression for web delivery when your publishing stack supports it |
| Photography-heavy social or campaign images | JPG | Often lighter than PNG when transparency is not needed |
| Short looping product moments | GIF for broad simplicity, MP4 for lighter motion delivery | Depends on whether you need universal loop convenience or better file efficiency |
| Review decks, one-pagers, signoff packs | PDF | Stable layout for approvals and circulation |

That table is not a law. It is a way to stop defaulting to PNG for everything.

## How to separate static, motion, and review exports in one Figma file

One of the easiest ways to reduce export chaos is to split the frames by output purpose before you export:

1. Put developer-facing graphics in one section.
2. Put website or CMS images in another.
3. Put motion-ready frames in another.
4. Keep approval-only frames together for PDF output.

This matters because each section usually needs a different review lens.

For developer-facing graphics, the questions are:

- should this stay vector?
- do we need transparent background support?
- is naming clean enough for implementation?

For website imagery, the questions are:

- what page is this for?
- what is the file-size budget?
- does the image still look good after compression?

For motion assets, the questions are:

- does the loop need to feel seamless?
- is file size more important than perfect frame fidelity?
- will the destination support video, or does it need a GIF?

For review PDFs, the questions are:

- does the stakeholder only need layout approval?
- do comments happen outside the exported file?
- do we need one polished artifact instead of many loose images?

Teams get into trouble when those four jobs are mixed together and reviewed like they are the same deliverable.

## The static-asset decision most teams should make earlier

Static assets usually break down into two buckets:

- implementation assets
- publishing assets

Implementation assets are what developers or no-code builders use directly. These often benefit from SVG, carefully compressed PNG, or a modern web image format with a clear filename and placement context.

Publishing assets are what marketing or content teams upload into a CMS, help center, release note, email, or marketplace listing. These usually need a format decision tied to the destination:

- PNG when transparency or text sharpness matters
- JPG when the image is photographic and lightweight delivery matters
- WebP or AVIF when the site can support them cleanly

If your team keeps revisiting these tradeoffs page by page, create a simple export note in the Figma file itself:

- `icons -> SVG`
- `screenshots -> PNG`
- `homepage marketing -> WebP`
- `approval packet -> PDF`
- `motion callouts -> MP4`

That tiny planning step prevents a lot of avoidable Slack questions later.

## When GIF is still the right answer and when MP4 is cleaner

Motion exports are where teams waste surprising amounts of time.

A GIF is still useful when:

- the asset needs to drop quickly into documentation or chat
- the receiving tool handles GIF more easily than video
- silent looping is the whole point

An MP4 is usually better when:

- file size is getting out of control
- the animation is longer than a tiny loop
- the destination accepts video cleanly
- you want smoother playback for product walkthrough moments

A common mistake is choosing GIF because it feels universally safe, then discovering the file is far too heavy for the page or doc where it needs to live. If the workflow can accept video, MP4 is often the cleaner delivery format.

For teams making this choice repeatedly in launch or support documentation, [How to export animated MP4 videos from Figma using TinyImage](/tutorials/how-to-export-animated-m-p4-videos-from-figma-using-tiny-image/) and [How to export GIFs from Figma layers using TinyImage](/tutorials/how-to-export-gi-fs-from-figma-layers-using-tiny-image/) are the two most useful follow-ups.

## PDF should be treated as a review artifact, not a fallback

PDF gets chosen late because it feels like the easiest escape hatch. That is backwards.

PDF is strongest when the team knows upfront that the artifact is for:

- executive review
- client approval
- offline circulation
- archiving a versioned design snapshot

It is weaker when people actually need editable production assets afterward.

That is why it helps to decide early whether the PDF is:

- the final approval artifact
- a leave-behind summary
- a sales or internal review packet

If the answer is yes, structure the frames for PDF on purpose instead of exporting the entire working canvas and hoping it reads well. [How to reduce large file sizes for heavy PDF exports from Figma using TinyImage](/tutorials/how-to-reduce-large-file-sizes-for-heavy-pdf-exports-from-figma-using-tiny-image/) is the right companion tutorial when the review pack starts getting bloated.

## Common format mistakes that create rework

These are the issues I see most often:

- exporting raster screenshots as PNG when the destination really wants a lighter web image format
- sending developers flattened PNGs for assets that should have stayed SVG
- using GIF for long or heavy motion when MP4 would have been much smaller
- exporting a PDF as the only artifact even though the next team needs implementation-ready assets too
- naming files by frame number instead of use case, which forces the receiving team to guess

The pattern behind all of them is the same: the export happened before the handoff plan was clear.

## A simple pre-export checklist for mixed asset batches

Before running the final TinyImage export, check:

- Which assets are for implementation, publishing, motion, and review?
- Which of those need vector fidelity, transparency, or modern web compression?
- Does each asset have a file-size expectation based on where it will live?
- Are GIF and MP4 being chosen intentionally rather than by habit?
- Is the PDF set up as a readable review artifact instead of a random canvas dump?
- Will the filenames make sense to the next person without a meeting?

That checklist sounds basic, but it is exactly what prevents a "quick export task" from turning into several rounds of cleanup.

## Where TinyImage helps most

[TinyImage](/tinyimage/) is not only valuable because it compresses aggressively. It is valuable because it lets one Figma source produce the right mix of static images, motion assets, and PDFs without leaving the design workflow.

That matters most when the real problem is not one image. It is an asset batch with different destinations, different budgets, and different reviewers.

If your team keeps shipping the right design but the wrong file type, do not start with more export discipline. Start with a clearer asset map. Once the downstream job is obvious, the right TinyImage format choices usually become obvious too.

---

---
type: article
title: Countdown-Style Banner Workflow for Flash Sale Campaigns
description: Plan countdown-style banner campaigns in Figma so ecommerce and performance teams can ship urgent sale creative across sizes without breaking timing, readability, or trafficking handoff.
datePublished: 2026-06-26T00:00:00.000Z
dateModified: 2026-06-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-countdown-style-banner-workflow-for-flash-sale-campaigns/
markdownUrl: https://www.hypermatic.com/articles/bannerify-countdown-style-banner-workflow-for-flash-sale-campaigns.md
---

# Countdown-Style Banner Workflow for Flash Sale Campaigns

Flash sale banners create a special kind of panic because the design problem is not only visual.

The campaign has a real deadline. The creative needs urgency without becoming unreadable. Every size has to preserve the same message. Media teams still need sane file names and launch notes. If the countdown concept is unclear, the banner can look frantic without actually helping the shopper understand when the offer ends.

That is why countdown-style campaigns need a workflow, not just a louder color palette.

[Bannerify](/bannerify/) is a strong fit because the plugin page is built around designing in Figma and exporting production-ready banner assets in HTML, MP4, GIF, and platform-ready formats. For flash sale work, the key benefit is keeping the timing concept, the variant set, and the export handoff close together instead of rebuilding urgency creative across separate tools.

This article is intentionally different from nearby Bannerify content like [Banner Ad Animation Timing Guidelines](/articles/bannerify-banner-ad-animation-timing-guidelines/), [HTML5 Banner File Size Reduction Checklist](/articles/bannerify-html5-banner-file-size-reduction-checklist/), and [Retargeting Banner Workflow for Ecommerce Teams](/articles/bannerify-retargeting-banner-workflow-for-ecommerce-teams/). Those cover timing craft, payload discipline, or broader ecommerce retargeting. This one is about countdown-style sale creative, where urgency, schedule coordination, and multi-size consistency all have to hold at once.

## Decide what the "countdown" really means

This is the first decision that saves the team from a lot of confusion later.

Many campaigns say they want a countdown banner when they actually mean one of three different things:

- creative that visually emphasizes a short deadline
- a set of scheduled variants such as "48 hours left" and "ends tonight"
- a richer execution that behaves more like a live timer concept

Those are not the same production job.

The safest workflow is agreeing on the countdown behavior before anyone animates the first frame. If the campaign only needs urgency messaging, the creative system can stay much simpler. If the team wants scheduled time-based variants, naming and trafficking become more important. If a more advanced execution is needed, that should be defined clearly instead of implied by the word "countdown."

## Keep the urgency message readable at the smallest size first

Countdown-style creative fails when the concept works only on the largest placement.

The team might love the wide leaderboard version, but if the smallest size cannot clearly communicate:

- the offer
- the deadline
- the action

then the countdown idea is not really portable yet.

That is why I like designing the smallest meaningful placement early, not at the end. It forces the campaign to reveal which elements are essential:

- the time cue
- the discount or offer
- the CTA
- the product or brand anchor

Everything else is optional decoration until those survive.

## Build the campaign around timed message states

One practical way to organize flash sale banners is treating them as a sequence of message states rather than a pile of independent sizes.

For example:

- `sale live`
- `24 hours left`
- `ends tonight`
- `last chance`

That structure helps the creative team and the media team stay aligned. It also prevents a common problem where one placement quietly runs old urgency language while another has already moved to the final-day message.

If the campaign needs many placement sizes, the message states should be locked before the export batch begins. Otherwise the team ends up revisiting copy and timing decisions while also trying to finish production.

## Review motion for urgency, not for decoration

Flash sale banners can easily drift into over-animation.

A pulsing timer, bouncing CTA, sliding product card, and flashing discount may all look exciting in isolation. Together they often make the banner feel cheaper and harder to read.

The useful question is:

Does the motion help the viewer understand the deadline and offer faster?

If not, it is probably noise.

That is where a countdown-style workflow differs from a general animation exercise. The job is not to prove the banner can move. The job is to make urgency legible without hurting message clarity.

If your team is tuning animation behavior more broadly, [Banner Ad Animation Timing Guidelines](/articles/bannerify-banner-ad-animation-timing-guidelines/) is the best supporting article nearby.

## Prepare trafficking notes at the same time as the exports

Countdown campaigns usually have more trafficking risk than evergreen creative because timing matters outside the design file too.

The media team may need to know:

- when each message state goes live
- when the next variant replaces it
- which sizes belong to each state
- whether fallback assets are included
- which click destination matches each offer

If those instructions live only in chat messages, the chance of launch mistakes goes up quickly.

That is why I like bundling simple trafficking notes with the export set:

- variant name
- timing window
- destination URL
- any special launch notes

The design work and the trafficking work stay closer together, which makes urgent campaign swaps much less fragile.

For teams already formalizing handoff, [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/) is the closest companion article.

## Watch the usual failure points before launch

Countdown-style banners tend to break in familiar places:

- the smallest size loses the deadline language
- the final-day message uses a stale export
- animation distracts from the CTA
- one placement points to the wrong landing page
- the asset set becomes heavier than the campaign can comfortably ship

That last point matters more than teams expect. Urgency creative often adds extra frames, more copy states, or more visual emphasis. Without a file-discipline pass, the countdown concept can create technical problems that weaken the launch.

For that reason, a final QA pass should check:

- readability across the full size set
- timing-message consistency
- click behavior
- asset weight
- version naming

## A practical workflow for flash sale creative

For countdown-style campaigns, this sequence works well:

1. Decide what kind of countdown behavior the campaign actually needs.
2. Design the smallest placement early so the urgency message stays honest.
3. Lock timed message states before bulk export starts.
4. Review animation for clarity, not visual drama.
5. Package trafficking notes with the asset set.
6. Run a final launch check on message timing, click behavior, and payload weight.

[Bannerify](/bannerify/) helps most when flash sale creative has to move quickly across many placements without drifting into timing errors or handoff chaos.

That is the real workflow win.

The countdown concept stays coherent from Figma through export and trafficking instead of becoming a frantic last-minute banner scramble.

---

---
type: article
title: EPS Export Workflow for Print Vendors from Figma
description: Export Figma artwork to EPS with a cleaner handoff process so packaging, signage, and print vendors get usable files without forcing teams to rebuild the design in another app first.
datePublished: 2026-06-26T00:00:00.000Z
dateModified: 2026-06-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-eps-export-workflow-for-print-vendors-from-figma/
markdownUrl: https://www.hypermatic.com/articles/convertify-eps-export-workflow-for-print-vendors-from-figma.md
---

# EPS Export Workflow for Print Vendors from Figma

The request usually arrives late and sounds harmless:

"Can you send the artwork as an EPS?"

If your team designs in Figma, that one sentence can turn into an annoying scramble. Somebody wonders whether the printer really means EPS. Another person duplicates the design into a different tool just to satisfy the request. A vendor flags missing outlines or odd scaling. Suddenly a simple deliverable is eating half a day.

That is why EPS handoff deserves its own workflow.

[Convertify](/convertify/) is a strong fit here because the plugin page is built around moving design work between Figma and other formats without forcing teams to recreate the file manually. For print-vendor requests, the real win is not abstract "compatibility." It is reducing the distance between the approved Figma artwork and the format an outside vendor is still asking for.

This article is intentionally different from nearby Convertify pieces like [Figma to Illustrator Workflow for Marketing Teams](/articles/convertify-figma-to-illustrator-workflow-for-marketing-teams/), [Trade Show Collateral Migration Workflow for Marketing Teams](/articles/convertify-trade-show-collateral-migration-workflow-for-marketing-teams/), and [Figma Export Format Comparison for Agencies](/articles/convertify-figma-export-format-comparison-for-agencies/). Those cover broader design-tool handoff, campaign collateral migration, or format selection. This one is specifically about the vendor-facing EPS request, where the job is to prepare the file cleanly and review it with print realities in mind.

## First, confirm that EPS is actually the requirement

Not every vendor asking for EPS truly needs EPS.

Sometimes the request is shorthand for one of these:

- vector artwork
- outlined text
- a file their older workflow can ingest
- a format they know how to archive

Before exporting, ask a few plain questions:

- Is EPS required, or would PDF or AI also work?
- Does the vendor need text outlined?
- Are linked images acceptable, or should the art stay as simple vectors?
- Do they need one file per size or one source file with variations?

That short clarification can prevent needless cleanup. It also keeps the design team from solving the wrong problem because "EPS" sounded more specific than the print workflow actually is.

## Prepare the Figma source like a handoff file, not a working canvas

The messiest EPS exports usually come from Figma files that were still optimized for live design exploration:

- hidden exploratory versions
- half-retired layers
- duplicate artboards
- notes sitting beside final artwork
- oversized placed images that were never cleaned up

That is fine while the file is still a workspace. It is not fine at the export boundary.

Before the export pass, create a cleaner handoff area:

- keep only the approved artwork versions in scope
- name the frames or assets the way the vendor will understand them
- remove obviously unused surrounding clutter
- make sure the final dimensions are explicit

This is the same discipline that helps in broader migration work, but it matters even more for a vendor handoff because the person opening the file is not part of your internal context.

## Distinguish vector-safe elements from image-heavy elements

EPS requests often become painful when nobody stops to separate the parts of the design that should stay crisp vectors from the parts that are really image assets living inside the composition.

That distinction matters for:

- logos
- icons
- line art
- packaging marks
- text-based layouts
- placed product renders or photos

If the artwork is mostly vector, the EPS request is usually straightforward. If the design relies heavily on photography, effects, or large raster content, the team should review whether EPS is still the best end format or whether the vendor simply needs a reliable print-ready file.

That is also why I like reviewing one representative asset first instead of exporting the whole batch blindly.

## Review one sample export before doing the full set

The safest EPS workflow is not "export everything and hope."

It is:

1. choose one representative file
2. export it
3. inspect the result
4. note what needs adjustment
5. then process the rest

That sample reveals whether the vendor-sensitive details are holding up:

- text treatment
- line weights
- page bounds
- placed imagery
- naming

If the sample is clean, the rest of the batch becomes much lower risk. If it is not, you find out before duplicating the issue across twenty deliverables.

For the tutorial-level export step itself, the nearest companion is [How to export Figma to EPS files in one click using Convertify](/tutorials/how-to-export-figma-to-eps-files-in-one-click-using-convertify/).

## Treat vendor notes as part of the workflow, not as rework

Print vendors often come back with requests that sound irritating but are actually useful signals:

- "please outline the text"
- "please separate each size"
- "please remove the unused crop area"
- "please confirm exact dimensions"

Those are not always signs the export failed. Often they mean the file crossed from design context into production context and now needs one extra round of vendor-specific cleanup.

What matters is capturing those rules so the next EPS request gets easier instead of starting from zero again.

I like keeping a simple internal checklist per vendor or printer:

- preferred format
- size naming
- whether text should stay live or be outlined
- whether linked images are acceptable
- whether bleeds, marks, or separate versions are expected

The workflow gets much calmer once those expectations are documented.

## Keep manual judgment where it belongs

[Convertify](/convertify/) helps remove the painful format barrier. It does not eliminate judgment about print production.

The team still needs to decide:

- whether EPS is the right output
- whether the artwork should be simplified before handoff
- whether the vendor will need multiple versions
- whether the exported result is good enough to ship as-is

That is a good thing. The plugin should handle the repetitive conversion step so the team can spend its attention on the few vendor-specific decisions that actually matter.

## A practical EPS handoff checklist

Before sending the file to a print vendor, confirm:

- the vendor really needs EPS
- the approved Figma artwork is isolated cleanly
- dimensions and asset names are obvious
- one representative sample export has been reviewed
- vector-heavy elements stayed dependable
- any vendor-specific requirements are written down for the next request

If you are regularly comparing options beyond EPS, [Figma Export Format Comparison for Agencies](/articles/convertify-figma-export-format-comparison-for-agencies/) is the best supporting article nearby.

[Convertify](/convertify/) helps most when an EPS request would otherwise force the team into a manual rebuild or a panicked detour through another tool.

That is the real benefit.

The vendor gets the format they need, and the design team keeps the source of truth where it already lives.

---

---
type: article
title: A/B Test Copy Review Workflow in Figma
description: Review experiment copy in Figma with a clearer control-versus-variant workflow so growth teams stop shipping mismatched headlines, buttons, and disclaimers across test designs.
datePublished: 2026-06-26T00:00:00.000Z
dateModified: 2026-06-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-ab-test-copy-review-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-ab-test-copy-review-workflow-in-figma.md
---

# A/B Test Copy Review Workflow in Figma

Growth experiments rarely fail because somebody forgot to come up with a hypothesis.

They fail because the control and the variant stop matching the plan somewhere between strategy, design review, and implementation. One button label changes in the hero but not in the sticky CTA. The treatment headline gets updated in one frame but not the mobile version. Legal copy is reviewed on the control only. Everybody assumes someone else checked the details.

That is why experiment copy deserves its own workflow.

[CopyDoc](/copydoc/) is a strong fit because the product page is built around exporting, importing, syncing, and managing Figma text without the copy-paste grind. For A/B test work, the biggest advantage is not only bulk editing. It is making control and treatment copy easier to review side by side before those differences become production bugs.

This article is intentionally different from nearby CopyDoc pieces like [Figma Copy Approval Workflow for Cross-Functional Teams](/articles/copydoc-figma-copy-approval-workflow-for-cross-functional-teams/), [Feature Flag Copy Rollout Workflow in Figma](/articles/copydoc-feature-flag-copy-rollout-workflow-in-figma/), and [Figma Copy QA Checklist for Product Teams](/articles/copydoc-figma-copy-qa-checklist-for-product-teams/). Those cover broader approval and rollout discipline. This one is about experiment variants specifically, where the job is to review what changed, what must stay matched, and what would quietly break the test if it drifts.

## Start by naming the experiment clearly inside the design file

The first failure mode is confusion.

If the design file only contains frames called:

- `homepage final`
- `homepage final new`
- `homepage final final alt`

then the copy review is already in trouble.

A test-ready file should make the experiment obvious:

- control
- variant A
- variant B
- mobile versions
- supporting states if they are truly part of the test

That naming clarity matters because copy review depends on knowing which text is intentionally different and which text should remain shared.

## Separate changed copy from unchanged copy

Not every text layer in an experiment needs equal attention.

I like sorting copy into three buckets:

- text that must stay identical across variants
- text that is intentionally different
- text that is conditionally different because the layout or audience changed

This sounds simple, but it prevents a classic problem: reviewers spend all their time debating the headline while a supporting CTA, tooltip, legal line, or empty-state message drifts accidentally between versions.

The goal is to make the real experimental changes visible while protecting the surrounding text from unplanned mutation.

## Review the experiment as a matrix, not as isolated screens

Copy review goes faster when the team can see the experiment horizontally.

Instead of reading one screen, approving it, and then moving to the next, review the test as a matrix:

- desktop control beside desktop variant
- mobile control beside mobile variant
- entry state beside follow-up or confirmation state

That layout makes it much easier to answer:

- what changed on purpose?
- what stayed the same?
- where did accidental drift appear?

For teams already using spreadsheets as part of design review, CopyDoc becomes especially useful because it reduces the friction of moving text out for structured review and then bringing approved changes back into the Figma source.

If you need the tutorial-level companion for that sync process, [Sync CSV spreadsheet content to Figma using CopyDoc](/tutorials/sync-csv-spreadsheet-content-to-figma-using-copy-doc/) is the closest nearby tutorial.

## Protect legal, trust, and expectation-setting copy

Experiment teams often focus on top-of-funnel language and forget the copy that sets user expectations.

That includes things like:

- billing explanation
- disclaimers
- password or security language
- promo conditions
- cancellation language

Those layers are easy to miss because they usually sit lower on the page or inside secondary states. They are also the layers most likely to create user confusion if one variant changes meaning accidentally.

That is why I like giving them their own review question:

Did any non-headline copy become riskier, less clear, or inconsistent across variants?

For pricing or sensitive flow changes, [Pricing and Billing Copy Review Workflow in Figma](/articles/copydoc-pricing-and-billing-copy-review-workflow-in-figma/) is a useful supporting read.

## Keep one comment thread per decision, not one thread per frame

Experiment reviews become noisy when the same copy decision gets debated in multiple places.

For example:

- headline feedback on the desktop frame
- a different interpretation of the same headline on mobile
- a new suggestion on a duplicated variant

The cleaner move is grouping review around decision points:

- headline direction
- CTA wording
- proof-point emphasis
- disclaimer language

That makes the approval trail easier to follow and reduces the chance that one frame gets updated while another keeps the old decision.

## Re-import approved copy before implementation starts

This is the part teams skip when deadlines get tight.

Someone says the changes are "basically approved," engineering starts from one variant, and then the final wording gets patched manually in a screenshot or a ticket comment. That is how the source of truth dies.

The safer workflow is:

1. review the experiment copy outside or alongside the design if needed
2. approve the exact wording
3. sync the approved text back into Figma
4. use the updated frames as the implementation reference

That keeps the design artifact useful to both product and engineering instead of turning it into a stale suggestion.

## A practical experiment review checklist

Before handing off an A/B test design, confirm:

- the experiment names are explicit inside the file
- intended changes and unintended changes are clearly separated
- control and variant views have been reviewed side by side
- supporting copy and disclaimers still match the test plan
- approval decisions are grouped by issue, not scattered by frame
- the approved wording is back inside the Figma source

If your team is also managing broader launch discipline around release timing, [Copy Freeze Workflow for Figma Product Launches](/articles/copydoc-copy-freeze-workflow-for-figma-product-launches/) is the closest related article.

[CopyDoc](/copydoc/) helps most when experiment copy needs to move fast without becoming sloppy.

That is the real benefit.

The test stops being "a few changed words on a couple of screens" and becomes a reviewable system where the control, the variant, and the final approved text all stay aligned.

---

---
type: article
title: Account-Based Nurture Email Workflow for B2B Marketing Teams
description: Plan account-based nurture emails in Figma so marketing and sales teams can reuse proven modules, review message changes clearly, and export production-ready HTML without rebuilding every sequence from scratch.
datePublished: 2026-06-26T00:00:00.000Z
dateModified: 2026-06-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-account-based-nurture-email-workflow-for-b2b-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-account-based-nurture-email-workflow-for-b2b-marketing-teams.md
---

# Account-Based Nurture Email Workflow for B2B Marketing Teams

Account-based nurture emails tend to inherit the worst habits of both sales decks and lifecycle campaigns.

The team wants relevance, so every sequence starts turning custom. Sales wants edits for one segment, then another stakeholder asks for a different proof point, then marketing duplicates the design and promises they will "clean up the modules later." A month passes and the nurture program is now a pile of near-matching emails with no obvious source of truth.

That is why account-based nurture work needs a workflow, not just a template.

[Emailify](/emailify/) is a strong fit because the plugin page is built around designing email in Figma and exporting production-ready HTML for major email clients and platforms. For B2B nurture teams, the bigger advantage is keeping design, copy review, and export close together when different target accounts need slightly different emphasis without a full rebuild every time.

This article is intentionally different from nearby Emailify content like [Lifecycle Email Workflow for Marketing Ops Teams](/articles/emailify-lifecycle-email-workflow-for-marketing-ops-teams/), [Partner Campaign Email Workflow for B2B Marketing Teams](/articles/emailify-partner-campaign-email-workflow-for-b2b-marketing-teams/), and [HTML Email Handoff Checklist for Designers and Marketers](/articles/emailify-html-email-handoff-checklist-for-designers-and-marketers/). Those cover broad lifecycle systems, co-marketing sends, or handoff discipline. This one is about account-based nurture, where one sequence must stay modular enough for segment variation without becoming a copy-and-paste mess.

## Build around repeated buying questions, not around calendar slots

Many nurture programs start from the send schedule:

- email one
- email two
- email three

That is a weak starting point for account-based work because different target accounts are usually working through different objections.

The better starting point is the question the account still needs answered:

- Why should we care now?
- Can your product solve our specific problem?
- Is there proof from a team like ours?
- Will procurement or security block this?
- What happens after we book the call?

Once those questions are clear, the design work gets cleaner because each email module serves a real decision instead of merely filling the next send slot.

## Design the sequence as reusable modules

This is where account-based nurture either becomes operationally calm or operationally awful.

I like breaking the sequence into modules that can be reused across segments:

- hero or opener
- problem framing block
- proof block
- product capability block
- case study or quote block
- CTA block
- footer and compliance section

The point is not to make every email look identical. The point is to make targeted variation happen in a controlled way.

For example:

- one industry may need a different proof block
- one buyer type may need a stronger objection-handling block
- one sequence may need a softer CTA for earlier-stage accounts

If those changes happen inside modules, the team can adapt the nurture path without cloning the whole email system repeatedly.

That also aligns nicely with nearby Emailify strengths around reusable components. If your team is still building that foundation, [Modular Email Template Workflow in Figma](/articles/emailify-modular-email-template-workflow-in-figma/) is the closest related article.

## Separate stable brand elements from segment-specific message elements

This sounds obvious, but it is where many nurture sequences lose maintainability.

Stable elements should stay stable:

- brand header treatment
- spacing patterns
- typography hierarchy
- footer structure
- standard legal or preference language

Segment-specific elements should be easy to swap:

- social proof
- featured use case
- CTA tone
- supporting imagery
- pain-point framing

When the team does not separate those layers, a simple message change suddenly turns into an accidental redesign. The nurture sequence slows down because every update feels riskier than it should.

## Review message drift before worrying about export

In account-based work, the biggest quality risk is often not the HTML. It is message drift.

The sequence may start coherent and then slowly diverge:

- one email starts talking to product teams
- another suddenly sounds written for procurement
- one variant uses a formal CTA while the next is much more casual
- proof points repeat too early or contradict each other

That is why I like reviewing the sequence horizontally before the final export round.

Ask:

- does each email advance the conversation?
- are we repeating the same claim with new wording?
- do the modules still ladder up to one account story?
- would a salesperson understand when to use this sequence and for whom?

That review is what keeps account-based nurture from becoming "several emails we happened to send to similar companies."

## Keep personalization realistic

Personalization is where many B2B nurture programs overreach.

It is tempting to design every possible branch into the email. Usually that produces a fragile system that becomes hard to review and even harder to maintain.

The practical move is choosing a few personalization layers that matter:

- segment or industry proof
- role-relevant outcome framing
- one or two dynamic or variable content areas

If the team needs a companion tutorial for more dynamic content ideas, [How to add dynamic personalized content to HTML emails in Figma using Emailify](/tutorials/how-to-add-dynamic-personalized-content-to-html-emails-in-figma-using-emailify/) is the closest nearby tutorial.

The goal is not infinite variation. The goal is targeted relevance that the team can still manage confidently.

## Run the review with sales before the export handoff

Account-based nurture breaks when marketing and sales align too late.

Sales usually knows:

- which proof points resonate
- which objections appear in live conversations
- where the CTA feels too early
- which emails are being forwarded internally

That makes sales review more valuable than a late copy-polish round from someone outside the buying conversation.

I like using one structured review pass with sales that focuses on:

- audience fit
- objection coverage
- CTA realism
- forwardability inside the target account

After that, the team can move into client and inbox QA with far fewer strategic edits still floating around.

## Export for delivery, but keep the Figma source authoritative

This is where [Emailify](/emailify/) earns its keep.

The sequence should be designed and reviewed in a way that keeps the approved source in Figma, then exported into the actual email platform once the message is settled. That helps the team avoid the classic drift where last-minute changes happen inside the ESP and never make it back to the source design.

If the team wants a stronger pre-upload review step, [Figma Email QA Before ESP Upload](/articles/emailify-figma-email-qa-before-esp-upload/) is the best nearby companion article.

## A practical checklist for account-based nurture

Before exporting the sequence, confirm:

- each email answers a specific buying question
- reusable modules are clearly separated from segment-specific sections
- personalization is selective rather than chaotic
- the sequence reads consistently from first send to last send
- sales has reviewed the story before final HTML export
- the approved Figma version remains the source of truth

[Emailify](/emailify/) helps most when B2B marketing teams want relevance without operational sprawl.

That is the real workflow win.

The nurture program stays modular, reviewable, and exportable instead of turning into a graveyard of one-off campaign files.

---

---
type: article
title: All-Hands Deck Workflow for Internal Comms Teams
description: Build company all-hands presentations in Figma so internal comms teams can keep leadership updates, metrics, and follow-up resources organized without rebuilding slides every month.
datePublished: 2026-06-26T00:00:00.000Z
dateModified: 2026-06-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-all-hands-deck-workflow-for-internal-comms-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-all-hands-deck-workflow-for-internal-comms-teams.md
---

# All-Hands Deck Workflow for Internal Comms Teams

All-hands decks have a strange reputation. They look routine from the outside, but they are one of the easiest presentation types to let drift into chaos.

Leadership wants strategic updates. People teams want culture and recognition slides. Product wants launches and roadmap progress. Operations wants the metrics to land cleanly. Someone misses the live meeting and needs the deck afterward. Another team wants to reuse two slides in a manager briefing three days later.

That is not one presentation job. It is several.

[Pitchdeck](/pitchdeck/) is well suited to this because the plugin page is built around designing presentations in Figma, then exporting them to PowerPoint, Google Slides, PDF, Keynote, or hosted web presentations. For internal comms, that means the visual source can stay in one place even when the deck has to serve both live presentation and async follow-up.

This article is intentionally different from nearby Pitchdeck pieces like [Internal Training Deck Workflow in Figma](/articles/pitchdeck-internal-training-deck-workflow-in-figma/), [Quarterly Roadmap Deck Workflow in Figma](/articles/pitchdeck-quarterly-roadmap-deck-workflow-in-figma/), and [Customer Advisory Board Deck Workflow in Figma](/articles/pitchdeck-customer-advisory-board-deck-workflow-in-figma/). Those cover education, roadmap storytelling, or external stakeholder settings. This one is about recurring company all-hands decks where multiple departments contribute to one shared update and the deck has to remain useful after the live meeting ends.

## The first mistake is treating the audience like one group

An all-hands deck rarely has one reader.

It usually has at least four:

- the live employee audience
- managers who need to recap the message later
- executives who want the deck to stay on-message
- people who missed the meeting and only see the deck asynchronously

That changes how the deck should be structured.

A slide that works well when a presenter is narrating it can feel abrupt or vague when it is viewed later without context. Internal comms teams do better when they plan for both moments from the start instead of bolting on a recap version later.

The useful question is:

What should still make sense if somebody opens this deck cold tomorrow morning?

## Build the deck in repeatable modules

All-hands decks get easier when they stop being "the monthly presentation" and become a system of reusable modules.

Common modules might include:

- company wins
- business metrics or operating updates
- product milestones
- customer highlights
- recognition moments
- upcoming priorities
- FAQ or resource slides

That does not mean every month should feel identical. It means the structure should be stable enough that contributors know where their material belongs.

When the modules are consistent, the comms team can spend less time rearranging slides and more time improving the clarity of the story.

## Separate presenter slides from reference slides

This is the move that saves the most friction later.

Not every slide needs the same density.

Presenter-first slides are built for the live moment:

- short headlines
- strong visual rhythm
- one clear takeaway

Reference-first slides are built for later reuse:

- supporting detail
- links
- timelines
- extra context people may revisit after the meeting

Trying to make every slide serve both jobs equally often produces bloated slides that satisfy neither. Instead, keep the main presentation paced for the live audience and then include a small set of reference slides the async viewer can use afterward.

That approach also makes exports more flexible. A web presentation can stay clean for the live meeting, while the handoff version can include the extra resource slides people will want later.

## Decide the follow-up format before the deck is "finished"

Internal comms teams often wait until the last minute to decide whether the deck will be shared as:

- a hosted presentation
- a PDF
- a PowerPoint file
- a Google Slides file

That decision should happen much earlier because it affects how the deck is written.

If the team expects a lot of async viewing, a hosted or shareable version with links can be more useful than a static export. If leaders want the deck archived in a familiar format, PDF may be enough. If teams frequently reuse slides in their own briefings, editable exports may matter more.

Pitchdeck is valuable here because the source presentation can stay in Figma while the delivery format changes according to what the company actually needs this month.

For teams comparing those options more explicitly, [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/) is the closest supporting article.

## Speaker support matters more than slide polish

All-hands decks break down when the presenters do not feel supported.

That usually shows up as:

- one executive freelancing the narrative
- inconsistent emphasis across departments
- too much detail crammed onto slides "just in case"
- handoffs between speakers feeling abrupt

So before the final export round, review the deck as a speaking tool:

- does each section have one obvious point?
- are transitions between sections clear?
- do leaders know what the audience should remember?
- are any slides carrying information that belongs in notes or follow-up instead?

This is where a Figma-based presentation workflow helps internal comms teams stay more deliberate. The deck source stays collaborative without forcing everyone to rewrite the actual presentation in a separate slide app.

## Keep the metrics stable and the story current

All-hands decks often repeat on a monthly or quarterly rhythm, which creates a subtle risk: the visuals stay clean while the narrative becomes autopilot.

I like using a simple review lens:

- which slides are structurally recurring?
- which slides must materially change this cycle?
- which numbers need source verification?
- which leadership messages are new enough to deserve real emphasis?

That protects the deck from becoming a ritual artifact instead of a communication tool.

The visual system should feel familiar. The story should still feel specific to the moment.

## A useful all-hands workflow

For internal comms teams, this sequence works well:

1. Define the recurring modules before slide design starts.
2. Distinguish live presenter slides from reference slides.
3. Decide the post-meeting sharing format early.
4. Review the deck for presenter clarity, not just visual polish.
5. Update the recurring metrics carefully so the story stays current.

If the team also wants to measure how deck views continue after the live meeting, [How to use the Analytics Dashboard and Link Tracking for Figma Presentations using Pitchdeck](/tutorials/how-to-use-the-analytics-dashboard-and-link-tracking-for-figma-presentations-using-pitchdeck/) is the best nearby tutorial.

[Pitchdeck](/pitchdeck/) helps most when all-hands presentations need to do two jobs at once: support a live company moment and remain useful as an organized update afterward.

That is the real internal comms advantage.

The deck stops being a rushed monthly artifact and becomes a repeatable communication system that leadership, managers, and employees can actually use.

---

---
type: article
title: Error State and Empty State QA Workflow from Figma
description: Compare empty states, no-results views, and failure screens against Figma so product teams catch the UI drift that usually slips past happy-path design reviews.
datePublished: 2026-06-26T00:00:00.000Z
dateModified: 2026-06-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-error-state-and-empty-state-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-error-state-and-empty-state-qa-workflow-from-figma.md
---

# Error State and Empty State QA Workflow from Figma

Most product teams review the happy path thoroughly.

The dashboard loads. The search works. The checkout completes. The core layout is close enough to the mock. Everyone relaxes.

Then users hit the screens nobody looked at carefully:

- no search results
- empty dashboards
- expired links
- loading failures
- permission errors

These states are usually less polished, less consistent, and less reviewed than the main flow. They are also where product trust gets damaged fastest.

That is why error and empty states deserve their own QA workflow.

[Pixelay](/pixelay/) is a strong fit because the plugin page is built around comparing Figma designs with real websites and app surfaces in multiple visual modes before issues reach customers. For edge-state review, the gain is not generic pixel-perfect checking. It is making the low-frequency screens visible and reviewable instead of letting them hide behind the main journey.

This article is intentionally different from nearby Pixelay pieces like [Search Results and Filter State QA Workflow from Figma](/articles/pixelay-search-results-and-filter-state-qa-workflow-from-figma/), [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/), and [Modal and Drawer QA Workflow from Figma](/articles/pixelay-modal-and-drawer-qa-workflow-from-figma/). Those cover filters, private product flows, or transient UI containers. This one is about empty and failure states specifically, where product teams often have designs but do not verify the real implementation with the same discipline as the primary path.

## Start by inventorying the states nobody naturally visits

The first obstacle is simple: many teams are not sure how many empty or failure states actually exist.

Make a short inventory before the visual review starts:

- zero-data states
- no-results states
- expired or invalid-link states
- permission or access-denied screens
- fetch or server error states
- deleted-content fallbacks

This matters because edge-state QA often fails before the first comparison even happens. The team reviews only the screens they can reach naturally and assumes the rest are "probably fine."

They usually are not.

## Recreate the real conditions, not a guessed approximation

An empty-state review is only useful if the real implementation is actually showing the state you designed.

That means the review setup should deliberately trigger the condition:

- remove all items from the test account
- search for a string that returns no results
- use a staging flag that forces the error view
- open the expired or invalid route intentionally

Without that setup, the team ends up comparing the wrong screen and calling it close enough.

This is where [Pixelay](/pixelay/) becomes especially practical. Once the true URL or environment is available, the design-vs-build review becomes concrete instead of hypothetical.

## Look for hierarchy problems before pixel problems

When teams review empty and error states, they often jump straight to spacing or alignment.

Those details matter, but the bigger failures usually happen one layer earlier:

- the headline does not explain what happened
- the primary action is weak or missing
- the empty illustration dominates the screen
- the recovery path is visually buried
- the hierarchy implies the wrong next step

So the review should start with structure:

- Can the user understand the state immediately?
- Is the recovery action obvious?
- Does the design still feel part of the product, not like a forgotten fallback?

After that, the pixel-level comparison gets much more useful.

## Review across breakpoints, not just desktop

Empty and error states often look acceptable on desktop and strange on smaller screens.

Common issues include:

- oversized illustrations pushing the CTA below the fold
- long explanatory copy wrapping awkwardly
- support links becoming visually detached
- stacked actions losing their priority order

That is why breakpoint review matters even for states the team considers "secondary." In many products, empty or failure states are exactly the views users hit while on mobile, in a hurry, or after something has already gone wrong. The tolerance for confusion is lower, not higher.

If responsive comparison is already a known problem area for your team, [Responsive Website QA from Figma](/articles/pixelay-responsive-website-qa-from-figma/) is the closest supporting article.

## Treat consistency as part of trust

Users notice when fallback states feel like they were designed by a different team.

That inconsistency shows up in small but cumulative ways:

- different icon style
- different button radius
- different spacing rhythm
- different tone of voice
- different loading or empty-state treatment across similar screens

The issue is not only aesthetics. It affects trust. A user who lands on an empty state that feels improvised is more likely to assume the product is broken, incomplete, or unreliable.

That is why I like reviewing these screens as part of the same design system standard as the main product flow.

## Turn the review into actionable bug reports

Once the team identifies drift, the next job is making fixes easy to assign.

Edge-state QA gets stuck when feedback sounds like:

- "this feels off"
- "the error page looks weird"
- "not quite like Figma"

Instead, capture issues with concrete comparisons:

- the Figma source frame
- the real URL or app state
- the breakpoint
- the visual mismatch
- the user-impact note

That makes implementation much faster because developers do not have to reverse-engineer what the reviewer meant.

For broader bug-report discipline, [Visual Bug Report Workflow for Frontend Teams](/articles/pixelay-visual-bug-report-workflow-for-frontend-teams/) is the closest companion article nearby.

## A practical edge-state checklist

Before signing off on empty and error states, confirm:

- every important edge state was intentionally triggered
- the real implementation matches the intended hierarchy
- the recovery action is visually obvious
- the state holds up on smaller breakpoints
- the styling still feels native to the rest of the product
- each issue is documented with a concrete source-to-build comparison

[Pixelay](/pixelay/) helps most when the team wants to bring the same rigor to awkward fallback states that it already brings to the happy path.

That is the real win.

The empty and error screens stop being the forgotten corners of the product and become part of a reviewable, shippable design standard.

---

---
type: article
title: Ebook PDF Export Workflow from Figma
description: Export lead magnets and downloadable guides from Figma as lighter PDFs that still feel polished when marketing teams share them by email, ads, or landing pages.
datePublished: 2026-06-26T00:00:00.000Z
dateModified: 2026-06-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-ebook-pdf-export-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-ebook-pdf-export-workflow-from-figma.md
---

# Ebook PDF Export Workflow from Figma

An ebook looks simple right up until the team tries to ship it.

The designer has a polished Figma file. The content marketer wants the PDF on a landing page by this afternoon. Paid media wants to use the same asset in retargeting emails. Someone exports the file, and suddenly the "downloadable guide" weighs far more than it should. Screenshots look soft, charts feel muddy, and the attachment becomes awkward to share.

That is why downloadable PDFs need their own export workflow instead of being treated like a one-click afterthought.

[TinyImage](/tinyimage/) is a strong fit here because the product page centers on compressed exports directly from Figma, including PDF. For ebook and lead-magnet work, that matters less as a generic "compression" promise and more as a way to keep the source design in Figma while still producing a file that is pleasant to download, forward, and open on ordinary devices.

This article is intentionally different from nearby TinyImage pieces like [Sales One-Pager PDF Export Workflow from Figma](/articles/tinyimage-sales-one-pager-pdf-export-workflow-from-figma/), [Figma PDF Compression](/articles/tinyimage-figma-pdf-compression/), and [PDF Review Workflow for Client Approvals](/articles/tinyimage-pdf-review-workflow-for-client-approvals/). Those focus on one-page leave-behinds, general PDF compression, or approval rounds. This one is about multi-page ebooks and lead magnets where readability, screenshot quality, and download friction all matter at once.

## Start with the distribution path, not the export button

Before exporting anything, answer one practical question:

Where will this PDF actually be consumed?

That changes the right tradeoffs immediately.

If the ebook will be:

- downloaded from a landing page
- attached to a sales follow-up email
- linked from a nurture sequence
- re-shared internally by prospects

then the PDF has to balance polish with portability. A beautiful file that feels heavy, slow, or fragile in inboxes is still a bad deliverable.

This is why I like setting an editorial rule early:

- prioritize legibility first
- keep visual flourish only when it earns its weight
- treat large screenshots as a design decision, not a default

That keeps the team from discovering at the end that the guide was designed more like a print brochure than a digital lead magnet.

## Design the page with compression in mind

The easiest PDF to optimize is the one that never became bloated in the first place.

Ebooks usually get heavy for predictable reasons:

- every screenshot is exported larger than the reading experience needs
- full-page gradients or photo backdrops sit behind dense text
- charts are embedded as oversized raster images
- duplicate visuals appear across multiple pages

When the team knows the goal is a downloadable PDF, it helps to design pages around a few simple constraints:

- use cropped screenshots instead of entire product windows when only one panel matters
- keep decorative imagery secondary to the reading column
- reuse layout patterns so each page does not introduce a completely different visual treatment
- preserve enough whitespace that the PDF still feels readable after compression

That is not about making the ebook boring. It is about avoiding a design style that only works while the file is still sitting inside Figma.

## Treat screenshots and diagrams as the first place to save weight

In most ebooks, the screenshots do most of the damage.

That is why I think of them as a separate mini-workflow:

1. Decide what the screenshot needs to teach.
2. Crop to the teaching area, not the full UI.
3. Remove visual clutter that does not help the explanation.
4. Export only as large as the PDF layout actually needs.

This is especially important for content teams repurposing product visuals from demos, release notes, or help-center assets.

If the screenshots are doing most of the educational work, [Documentation Screenshot Workflow for Support Teams](/articles/tinyimage-documentation-screenshot-workflow-for-support-teams/) and [Case Study Screenshot Workflow for B2B Marketing Teams](/articles/tinyimage-case-study-screenshot-workflow-for-b2b-marketing-teams/) are useful companion reads. The difference is that those workflows support web content first. Ebook PDFs need to survive as one bundled file.

## Review the ebook like a reader, not like the designer who made it

The most common PDF export mistake is checking only whether the file looks good on a large monitor.

That misses the real consumption behavior. Ebook PDFs often get opened:

- in browser tabs
- inside email clients
- on smaller laptops
- in split-screen reading mode
- after being forwarded several times

So the review needs to ask:

- Does body text still feel comfortable when the PDF is viewed at ordinary zoom levels?
- Do screenshots remain readable without pinching or extreme zoom?
- Does the first page load quickly enough to feel lightweight?
- Would a prospect hesitate before downloading this on a normal connection?

That last question matters more than many teams admit. A lead magnet is part of the conversion path. If it feels annoying to access, the polish does not rescue it.

## Use one export round for layout correctness and another for file discipline

I prefer separating these checks instead of blending them into one vague final review.

### Round one: layout correctness

Check:

- page breaks
- image crops
- typography consistency
- link behavior
- heading rhythm

### Round two: file discipline

Check:

- overall PDF size
- whether screenshots are heavier than they need to be
- whether visual quality stayed acceptable after compression
- whether the file opens quickly from the actual delivery surfaces

That split is useful because teams often stop after the first round. The guide looks correct, so they assume it is ready. But for downloadable assets, visual correctness and delivery quality are not the same thing.

If you need a closer tutorial-level companion for the export step itself, [How to compress PDF files in Figma using Tiny Image](/tutorials/how-to-compress-pdf-files-in-figma-using-tiny-image/) is the most relevant nearby tutorial.

## Keep one fallback version for sales and customer-facing reuse

Marketing teams rarely use ebook PDFs in just one place.

The same guide often becomes:

- a gated landing-page download
- a follow-up attachment from a sales rep
- a customer-success leave-behind
- a resource linked inside a newsletter

That means the exported file should be easy to identify and safe to reuse. I like creating a naming convention that makes the asset obvious at a glance:

- `2026-b2b-onboarding-guide-web.pdf`
- `saas-roi-checklist-download-v2.pdf`
- `security-review-prep-guide-customer-facing.pdf`

This sounds trivial, but it prevents the classic problem where the team has three PDFs with almost identical names and nobody knows which one is the lighter web-ready version.

## Know when the PDF should stay a PDF

Not every long-form asset belongs in a downloadable file.

Sometimes the better move is:

- publishing the content as an article
- breaking the guide into a page series
- keeping the PDF as a secondary "save and share" version

That choice becomes easier once the export workflow is clear. If the team keeps fighting the PDF to make it acceptable, the format itself may be the wrong delivery choice. If the guide works well and just needs a disciplined export pass, then the PDF can stay.

## A practical checklist before publishing

Before shipping an ebook PDF from Figma, confirm:

- the file is designed for digital reading, not just for visual drama
- screenshots are cropped to the lesson, not the full interface
- charts and diagrams still read clearly after compression
- the PDF size feels reasonable for landing-page and email sharing
- the file opens cleanly on ordinary devices
- the filename makes the approved version obvious

[TinyImage](/tinyimage/) helps most when the team already knows what the ebook needs to do: look polished, stay readable, and avoid becoming an oversized attachment nobody wants to forward.

That is the real workflow win.

The PDF stops being the part everybody dreads at the end of the project and becomes a dependable downloadable asset the team can publish with confidence.

---

---
type: article
title: HTML5 Banner QA Matrix by Ad Platform
description: QA Figma banner exports differently for Google Ads, DV360, AdForm, and publisher-direct placements so campaigns stop failing for avoidable packaging reasons.
datePublished: 2026-06-23T00:00:00.000Z
dateModified: 2026-06-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-html5-banner-qa-matrix-by-ad-platform/
markdownUrl: https://www.hypermatic.com/articles/bannerify-html5-banner-qa-matrix-by-ad-platform.md
---

# HTML5 Banner QA Matrix by Ad Platform

A banner can look approved, animate correctly, and still be the wrong package for the platform that needs to run it.

That is one reason display teams keep reliving the same launch pain. Creative review signs off on the idea. Banner export happens. Then the media or ad-ops team discovers a mismatch around click handling, fallback expectations, naming, or platform-specific upload assumptions.

The banner did not fail because the concept was bad. It failed because the QA process treated every destination as if it wanted the same artifact.

[Bannerify](/bannerify/) is useful here because the plugin page and tutorial library are already built around exporting HTML5, GIF, MP4, WebM, and platform-oriented banner packages from Figma. The practical gain is not only faster output. It is letting design and ad ops review the right package shape before the campaign reaches the stressful part of launch.

This article is intentionally different from nearby Bannerify content like [Display Ad QA Checklist Before Launch](/articles/bannerify-display-ad-qa-checklist-before-launch/), [HTML5 Ad Click Tag Checklist](/articles/bannerify-html5-ad-click-tag-checklist/), and [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/). Those cover broad launch QA, click-tag specifics, or delivery handoff. This one is about comparing QA expectations by destination platform so the team stops assuming one HTML5 review pass covers every upload target.

## The same creative can need different QA questions

The safest workflow is to stop asking only:

- Does the banner look right?

and start asking:

- Does this exported package match the platform we are sending it to?

That second question changes the review.

For one placement, the biggest risk may be click behavior.
For another, it may be file organization.
For another, it may simply be whether the media team wanted HTML5 at all.

That does not mean designers need to memorize every platform rule. It means the QA pass should expose the variables that tend to change by destination.

## A practical QA matrix

Use this as the conversation starter before final export and handoff:

| Destination | Main QA focus | Questions to answer before handoff |
| --- | --- | --- |
| Google Ads or similar self-serve HTML5 upload | Package simplicity and click behavior | Did we choose the right export preset, confirm the expected click handling, and keep the package lean enough for media review? |
| DV360 or other programmatic-managed workflow | Naming and trafficking consistency | Does the package naming reflect audience, size, and variant clearly enough for the buying workflow? |
| AdForm, Sizmek, or publisher-managed HTML5 | Delivery expectations and fallback assumptions | Has the ad-ops team confirmed whether any fallback image, alternate package, or special handling is expected? |
| Flashtalking or more managed rich-media workflow | Ownership of advanced behavior | Are interactions, exits, and any richer behaviors approved by the trafficking team rather than assumed by design alone? |
| Publisher-direct or custom IAB delivery | Exact upload instructions | Has someone confirmed the target environment wants this exact HTML5 package rather than GIF, MP4, or a different delivery method? |

The key is not pretending this table replaces platform docs. The key is using it to stop the most common workflow failure: exporting first and clarifying the destination second.

## Review the export preset as part of creative QA

Teams often treat export settings as an admin detail. They are not.

If the destination changes from:

- standard HTML5 upload
- to Google Ads
- to DV360
- to a publisher-direct placement

the team should re-check the export path instead of assuming the earlier package still fits.

That is especially important on fast campaigns where:

- one concept becomes many placements
- formats expand late
- the media plan changes after creative review

The design may remain valid while the packaging assumptions no longer do.

## Platform QA should happen before the variant explosion

This matters more than it seems.

A team may start with one approved banner concept, then quickly multiply into:

- six sizes
- three audiences
- two languages
- two offers

If the platform expectations are still fuzzy at that point, the campaign becomes expensive to correct.

That is why I like running the platform QA conversation before full batch export:

1. confirm destinations
2. confirm required output types
3. confirm click-handling ownership
4. confirm fallback expectations
5. only then scale the variant production

If your workflow is still earlier than that and you are mapping placements or variants, [Banner Variant Review Workflow for Campaign Teams](/articles/bannerify-banner-variant-review-workflow-for-campaign-teams/) and [Spreadsheet-Driven Banner Variant Workflow](/articles/bannerify-spreadsheet-driven-banner-variant-workflow/) are the best adjacent reads.

## File naming becomes more important as platforms multiply

Platform-specific QA is not only technical. It is operational.

Once several destinations are involved, filenames need to expose the logic clearly:

- campaign
- audience
- market
- size
- format or platform grouping

If the package naming is vague, the media team has to reconstruct intent from context. That creates unnecessary launch risk even when the exported code is fine.

This is one reason platform QA and trafficking QA overlap. If the package is going to different systems, the package needs to say what it is.

For deeper naming guidance, [Display Ad Asset Naming Convention for Agencies](/articles/bannerify-display-ad-asset-naming-convention-for-agencies/) is the closest companion article.

## Keep click-tag review separate from message review

Creative teams often check the CTA message and assume click behavior is covered.

It is not.

A good platform-aware QA pass separates:

- Is the CTA message right?
- Is the click behavior implemented the way the destination expects?

That distinction becomes especially important when:

- there are multiple exits
- the ad-ops team inserts or manages click logic
- the destination page changes late
- the campaign uses several trafficking systems

The banner can be visually perfect and still be operationally wrong if the ownership of click handling was never confirmed.

## Choose the simplest acceptable output when the platform allows it

Some placements truly need HTML5. Some do not.

If the goal can be met with a lighter asset type for a particular destination, the team should say so early instead of forcing HTML5 everywhere out of habit.

That is not a Bannerify limitation. It is exactly where Bannerify becomes more useful:

- HTML5 where the placement benefits from it
- GIF or MP4 where the workflow is simpler
- consistent production from the same Figma source either way

The review question is not "Can we export HTML5?" It is "Should this destination receive HTML5?"

That is the same kind of judgment behind [When to Use HTML5 vs GIF vs MP4 Banner Exports](/articles/bannerify-when-to-use-html5-vs-gif-vs-mp4-banner-exports/), but this article focuses on QA ownership by destination rather than format choice alone.

## A practical platform-aware QA flow

Before exporting the full campaign, I would standardize this sequence:

1. List the actual destinations in the media plan.
2. Confirm the expected output type for each destination.
3. Review click ownership, fallback expectations, and package naming by destination.
4. Export a representative sample package first.
5. Let ad ops or the trafficking owner validate the package shape before batch export.
6. Scale the campaign only after the destination assumptions are real.

That sample-package step saves a huge amount of cleanup. It is much better to find out one 300x250 package needs a different workflow than to discover it after exporting seventy files.

## Where Bannerify helps most

[Bannerify](/bannerify/) gives teams a fast way to keep the banner source, animation logic, and export workflow inside Figma. That speed is valuable. But speed creates more leverage only when the team is exporting the right package for the right destination.

That is the real point of a platform-aware QA matrix.

Campaigns do not usually fail because nobody reviewed the colors. They fail because the destination workflow was treated as an afterthought. Once the platform questions are pulled into the QA pass early, the creative review becomes much more likely to survive contact with launch reality.

---

---
type: article
title: Component Library Migration Workflow from Sketch and XD to Figma
description: Move legacy Sketch or XD libraries into Figma with a workflow that protects reusable components, naming, and cleanup priorities before the team migrates every screen.
datePublished: 2026-06-23T00:00:00.000Z
dateModified: 2026-06-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-component-library-migration-workflow-from-sketch-and-xd-to-figma/
markdownUrl: https://www.hypermatic.com/articles/convertify-component-library-migration-workflow-from-sketch-and-xd-to-figma.md
---

# Component Library Migration Workflow from Sketch and XD to Figma

Many teams say they are "migrating to Figma" when the real problem is narrower and more dangerous:

their old component library still lives in Sketch or XD.

That changes the job completely.

Importing a few screens into Figma is one thing. Migrating the reusable library that feeds those screens is another. Buttons, fields, nav patterns, cards, color styles, icon sets, and old naming habits all travel differently from finished mockups. If the library migration is rushed, the team imports history without importing coherence.

[Convertify](/convertify/) is a strong fit here because the product page is explicit about importing XD, Illustrator, PDF, PowerPoint, Word, Google Docs, and other design assets into Figma, while also exporting Figma work into other formats when teams still need cross-tool handoff. For library migration work, that matters because the goal is not only "get the file open." It is shortening the path from legacy source file to a Figma system the team can actually maintain.

This article is intentionally different from nearby Convertify pieces like [Adobe XD to Figma Migration Workflow for Product Teams](/articles/convertify-adobe-xd-to-figma-migration-workflow-for-product-teams/), [How to Preserve Editability When Converting Legacy Design Files to Figma](/articles/convertify-how-to-preserve-editability-when-converting-legacy-design-files-to-figma/), and [Figma File Migration Checklist](/articles/convertify-figma-file-migration-checklist/). Those cover broader product migrations, editability expectations, or general conversion hygiene. This one is specifically about library migration, where reusable components and naming systems matter more than any single imported screen.

## Separate library migration from screen migration on purpose

This is the first decision that makes the rest easier.

If the team imports every old screen before understanding the component system, it usually preserves too much noise:

- abandoned variants
- duplicate button styles
- outdated icon families
- old brand colors
- one-off exceptions that became fake standards

The library should migrate before the long tail of screens does.

That does not mean rebuilding the entire design system by hand from scratch. It means treating the reusable parts as their own conversion project with their own review criteria.

## Inventory what the old library is actually doing

Before importing anything, write down the library categories that really matter:

- navigation
- form controls
- buttons and CTAs
- cards and containers
- type styles
- icon sets
- spacing patterns
- status states

Then mark each category with one of three labels:

- `must preserve`
- `can simplify`
- `should retire`

That one step prevents a very common migration mistake: assuming everything in the old file deserves equal respect.

Often it does not.

Some of the old library is real system logic. Some of it is historical clutter that became normal through repetition.

## Test the library on a representative subset first

Do not begin with the biggest file in the archive.

Choose a smaller but realistic subset:

- one primary button family
- one input family
- one navigation pattern
- one card or list pattern
- one icon set

Run that subset through the import path first.

The goal is to learn:

- what survives cleanly
- what keeps useful structure
- what becomes visually accurate but operationally awkward
- what needs manual cleanup in Figma after import

That test is especially important when the old library relied on conventions that made sense in Sketch or XD but do not map neatly to how the Figma team wants to work later.

If your team is migrating whole product files as well, the broader companion article [Adobe XD to Figma Migration Workflow for Product Teams](/articles/convertify-adobe-xd-to-figma-migration-workflow-for-product-teams/) is the best next read. The library pass should happen first.

## Preserve naming logic before polishing visuals

A migration can look visually successful while still failing operationally.

That usually happens when:

- layers come through with confusing names
- variants lose their grouping logic
- the icon set becomes harder to search
- old component labels and new Figma naming collide

That is why I care about naming earlier than most teams do.

When reviewing imported library pieces, ask:

- Can another designer find the right component quickly?
- Do the names explain purpose rather than old-tool history?
- Are states and variants visible in the naming?
- Does the naming scale once more screens are migrated?

Visual accuracy matters, but a reusable library also has to be navigable.

## Decide which old complexity should stay out of Figma

This is where judgment becomes more important than conversion success.

Legacy libraries often contain patterns that were only there because of the previous tool or team:

- duplicate styles that solved old export problems
- nested structures nobody understands anymore
- symbols or component branches preserved only for backward compatibility
- platform-specific exceptions that should now live elsewhere

A good migration does not blindly carry all of that forward.

If the team already knows a pattern is obsolete, retire it during migration rather than polishing it lovingly in a new tool.

That is one reason library migration is a workflow problem, not a one-click miracle. The converter gets the system into Figma faster. The team still has to decide what deserves a future.

## Use one or two real screens to pressure-test the imported library

Once the imported library subset looks workable, apply it to a couple of real screens.

Not dozens. Just enough to answer:

- Do the imported components feel reusable in Figma?
- Are the spacing and text behaviors practical?
- Do old states map cleanly to live product needs?
- Does the library support both design work and future cleanup?

This is where imported components reveal whether they are truly library-ready or only conversion-ready.

For example, a button family may look correct in isolation but become frustrating once used across a dense settings screen. An icon set may import cleanly but remain too inconsistent to merge into the team's Figma component library.

That is useful information. Catch it while the migration scope is still small.

## Document cleanup rules before the wider rollout

Once the library subset is validated, define the cleanup rules the team will follow during broader migration:

- naming convention in Figma
- which legacy components get replaced instead of preserved
- which imported styles are canonical
- how deprecated library items are marked
- who approves merged or rewritten variants

Without those rules, the team tends to import more files and solve the same cleanup argument over and over.

The migration then becomes slower precisely because the tool made importing easier.

## A practical rollout sequence

For Sketch or XD library migration, I would use this order:

1. Inventory the real library categories and decide what must stay.
2. Import a representative subset instead of the full archive first.
3. Review naming, structure, and reusability before visual polish.
4. Pressure-test the imported pieces on a few real screens.
5. Define cleanup and replacement rules inside Figma.
6. Migrate the wider screen library only after the reusable foundation is stable.

That order keeps the team from mistaking "the file opened" for "the library is ready."

## Where Convertify helps most

[Convertify](/convertify/) is valuable here because it removes the slowest part of library migration: getting Sketch or XD system assets into Figma in a form the team can inspect and refine. That does not eliminate manual judgment, but it does keep the migration closer to the original source instead of turning it into a full manual rebuild.

For teams moving design systems into Figma, that distinction matters a lot.

The goal is not preserving every historical quirk. The goal is recovering the reusable parts of the old library, cleaning them up intentionally, and giving the team a Figma-native foundation it can actually trust going forward.

---

---
type: article
title: Feature Deprecation Copy Workflow in Figma
description: Plan feature sunset and deprecation messaging in Figma so notices, settings screens, and support-facing copy stay aligned before the change goes live.
datePublished: 2026-06-23T00:00:00.000Z
dateModified: 2026-06-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-feature-deprecation-copy-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-feature-deprecation-copy-workflow-in-figma.md
---

# Feature Deprecation Copy Workflow in Figma

Teams spend plenty of time designing new features. They often improvise when removing them.

That is how deprecation copy turns chaotic fast.

The billing page uses one date. The settings screen uses another. A banner says "ending soon" while the modal says "migrating now." Support writes a macro explaining a different next step than the product actually offers. Screenshots in launch materials still show the retiring feature as if nothing changed.

This is not only a writing problem. It is a coordination problem.

[CopyDoc](/copydoc/) is a strong fit because the plugin helps teams export, review, update, and re-import text across Figma designs without relying on scattered manual edits. For deprecation work, that matters because the same message usually appears across many surfaces and states at once.

This article is intentionally different from nearby CopyDoc pieces like [Feature Flag Copy Rollout Workflow in Figma](/articles/copydoc-feature-flag-copy-rollout-workflow-in-figma/), [Figma Terminology Audit Workflow](/articles/copydoc-figma-terminology-audit-workflow/), and [Pricing and Billing Copy Review Workflow in Figma](/articles/copydoc-pricing-and-billing-copy-review-workflow-in-figma/). Those cover staged releases, terminology drift, or pricing-language consistency. This one is about deprecation and sunset messaging, where the core challenge is guiding users through a disappearing workflow without contradictions between product, support, and design.

## Treat deprecation as a timeline, not a single message

This is the mistake I see most often.

Teams write one announcement and assume it can do every job.

In reality, feature retirement usually needs at least three message phases:

### 1. Early awareness

The user learns:

- what is changing
- roughly when
- why it matters

### 2. Action period

The user learns:

- what they must do
- what happens if they do nothing
- where to go next

### 3. Post-removal state

The user learns:

- what replaced the feature
- what is no longer available
- where to get help if they still need the old outcome

If those phases are blurred together, the copy becomes vague because it is trying to sound permanent and transitional at the same time.

## Inventory every surface before rewriting anything

Deprecation work becomes painful when the team only updates the obvious screens.

Start by exporting or collecting the text across:

- in-app banners
- settings pages
- upgrade or billing screens
- confirmation modals
- empty states after removal
- screenshot-heavy support or marketing mockups

The goal is to see all the user-facing language in one review object before making decisions.

That is exactly where CopyDoc helps. The team stops hunting screen by screen and can review the message system as a connected set of strings rather than isolated surprises.

## Separate factual copy from emotional copy

Deprecation messages have two jobs:

- explain the operational truth
- reduce panic and confusion

Those are not the same sentence.

Factual copy usually includes:

- the date or timing
- the affected feature or plan
- the replacement path
- whether data, access, or behavior changes

Emotional copy usually includes:

- reassurance
- acknowledgment of disruption
- support path
- clarity about what to do next

When teams try to squeeze both into one dense paragraph, users skim past the important part.

The better approach is to keep the factual layer explicit and let the supportive layer do a different job around it.

## Name the states so the review file stays sane

Deprecation work often contains multiple versions of almost the same message:

- `30 days remaining`
- `7 days remaining`
- `feature removed`
- `legacy plan still active`
- `migrated successfully`

If those states are not named clearly in the review workflow, people approve the wrong version by accident.

Use labels that expose timing and context directly:

- `banner_pre_sunset_30d`
- `modal_deprecation_confirm_last_week`
- `empty_state_removed_feature`
- `billing_notice_plan_rename_post_launch`

That may feel more like systems work than copywriting, but it is what keeps the Figma source, spreadsheet review, and later re-import aligned.

## Review the migration path, not only the warning text

A good deprecation message does not only announce loss. It directs behavior.

So the review should ask:

- What should the user do now?
- Where do they go instead?
- Is the replacement workflow named consistently?
- Do screenshots and labels match the new reality?
- Does support describe the same path?

This is where deprecation work often exposes hidden terminology problems. The product may say "move to workspace permissions" while support says "switch to team access controls." Users do not experience those as minor wording differences. They experience them as uncertainty.

If the team already expects broader naming cleanup, [Figma Terminology Audit Workflow](/articles/copydoc-figma-terminology-audit-workflow/) is the best companion article.

## Re-import only after dates, states, and owners are final

Deprecation copy tends to attract drive-by edits.

Someone updates the timing in Slack.
Someone softens the banner language in the doc.
Someone changes the button label in the design.

That is exactly how inconsistent rollout copy happens.

CopyDoc works best here when the team uses one explicit rule:

Do not re-import until the timeline, replacement path, and final wording owners are settled.

Otherwise the Figma file becomes a half-updated preview of an unresolved plan.

## Always do a post-import visual review for overflow and state drift

Deprecation messages are often longer than the copy they replace.

That creates predictable UI issues:

- warning banners become two lines taller than expected
- side panels lose hierarchy
- buttons wrap into weaker CTA phrasing
- empty states become visually heavy
- screenshots no longer match the current product state

That is why re-import is not the final step.

After the approved copy returns to Figma, review:

- layout pressure
- mobile wrapping
- emphasis hierarchy
- consistency across states
- screenshot and annotation accuracy

If the state labels are not clear in the design after re-import, the rollout team will feel the ambiguity later.

## A practical deprecation workflow

For product and content teams, this sequence works well:

1. Map the deprecation into awareness, action, and post-removal phases.
2. Export copy from every affected product state before rewriting.
3. Label each message by timing and state, not just by screen name.
4. Review facts, next steps, and terminology as one coordinated system.
5. Re-import only after dates, owners, and replacement language are final.
6. Run a visual QA pass on the updated Figma states before launch.

[CopyDoc](/copydoc/) helps most when the team is managing repeated text changes across a lot of screens and cannot afford to rely on manual paste-back work. Deprecation projects create exactly that kind of pressure.

The real goal is not elegant warning copy in isolation.

It is making sure the product, the support narrative, and the visible interface all tell the same truth while the feature is changing underneath them.

---

---
type: article
title: Partner Campaign Email Workflow for B2B Marketing Teams
description: Plan co-marketing and partner-launch emails in Figma so shared branding, approval paths, and HTML handoff stay organized before the send.
datePublished: 2026-06-23T00:00:00.000Z
dateModified: 2026-06-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-partner-campaign-email-workflow-for-b2b-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-partner-campaign-email-workflow-for-b2b-marketing-teams.md
---

# Partner Campaign Email Workflow for B2B Marketing Teams

Partner emails look simple until two brands have to approve the same send.

Now the hero needs two logos. The CTA may point to a webinar page one team owns and a follow-up flow another team owns. The footer and unsubscribe structure must match the sender's platform, not both brands at once. One partner wants a more promotional tone. The other wants tighter legal review. Suddenly a "quick co-marketing email" turns into a messy approval relay between design, demand gen, partner marketing, and email ops.

That is why partner campaigns need a workflow of their own.

[Emailify](/emailify/) is useful here because it keeps the design, responsive HTML preview, and export path inside Figma while still supporting the email handoff that marketing teams actually need. The value is not just faster HTML. It is keeping the shared campaign artifact closer to one source of truth while several stakeholders are trying to change it.

This article is intentionally different from nearby Emailify content like [Multi-Brand Email Template Workflow in Figma](/articles/emailify-multi-brand-email-template-workflow-in-figma/), [Event Email Workflow for Field Marketing Teams](/articles/emailify-event-email-workflow-for-field-marketing-teams/), and [HTML Email Preview Link Approval Workflow for Stakeholder Signoff](/articles/emailify-html-email-preview-link-approval-workflow-for-stakeholder-signoff/). Those cover internal brand systems, event campaign operations, or general approval mechanics. This one is about partner campaigns where two organizations influence the content but only one real send pipeline should own the final HTML.

## Decide who owns the actual send before design gets polished

This is the most important rule.

Two brands may shape the message, but one workflow needs to own the send.

That owner determines:

- which ESP or platform the email is exported for
- which unsubscribe and footer structure applies
- which destination links are final
- who controls merge tags, list setup, and scheduling

If the campaign treats both brands as equal send owners all the way through, the design review gets blurry and the production handoff usually breaks late.

The easiest way to stabilize the process is to write this down early:

- `brand owning send`
- `brand approving message`
- `shared campaign goal`

Once those are clear, the rest of the design choices get easier.

## Split the email into shared zones and owner zones

Partner emails get noisy when every section becomes a negotiation.

A better approach is to define the zones explicitly.

### Shared zones

Usually include:

- campaign headline
- value proposition
- speaker or product proof
- date, offer, or event details
- primary CTA logic

### Owner zones

Usually include:

- sender identity
- footer and unsubscribe structure
- platform-specific legal requirements
- merge tags
- preference or account links

That split removes a lot of unnecessary argument. The partner team can still approve the message without accidentally taking ownership of the production email infrastructure.

## Build the design around one campaign promise

Co-marketing emails often become cluttered because both brands want equal airtime.

The result is familiar:

- two logos
- three proof blocks
- two CTA ideas
- one overworked hero

That usually weakens the send.

The better question is not "How do we represent both brands equally?" It is "What single promise is this email making to the recipient?"

Examples:

- join the webinar
- download the joint guide
- see the product integration
- register for the partner event

Once that promise is fixed, the email has a much easier job. The second brand becomes supporting context instead of competing structure.

## Review with real footer and link logic, not idealized mocks

This is where partner workflows often drift apart from production reality.

Someone shares a beautiful mockup for approval, but the final email still needs:

- the real sender footer
- the right unsubscribe language
- correct tracking links
- accurate destination ownership
- mobile behavior that still works once partner logos and legal text are real

That means the approval-ready Emailify file should already contain:

- the actual sender-owned footer structure
- real placeholder or final URLs
- realistic partner names
- correct event dates, product names, and offer language

If the partner approves one mockup and email ops later swaps in a different footer, different CTA destination, or different legal section, the process has already broken.

For the later-stage production pass, [HTML Email Handoff Checklist for Designers and Marketers](/articles/emailify-html-email-handoff-checklist-for-designers-and-marketers/) is the best adjacent article.

## Run approval in the order risk appears

Partner campaigns usually go faster when approval follows this order:

1. message and campaign promise
2. brand usage and hierarchy
3. CTA destination and ownership
4. footer and platform-specific requirements
5. mobile and client preview review

That order works because not all edits are equally expensive.

If the partner objects to the core message, it is better to learn that before design polishes spacing or email ops starts platform prep. If the campaign promise is already approved, the later review rounds become much narrower.

## Watch for the failure points partner emails create

These are the problems I would check intentionally:

- two logos competing for primary attention
- a CTA that is clear for one brand but vague for the other audience
- footer language that implies the wrong sender relationship
- tracking links owned by different teams but not reconciled
- mobile stacking that buries one partner's proof block or legal line
- a preview that looks aligned on desktop but crowded on mobile

Partner sends are especially prone to "everything fits technically, but the email feels politically negotiated instead of clearly designed." The fix is usually message discipline, not more layout cleverness.

## Use the preview as the shared truth

Static design review is usually too forgiving for partner emails.

These campaigns benefit from stakeholders seeing something closer to the real output because:

- the mobile stack matters
- footer length matters
- logo balance matters
- CTA hierarchy matters

That is one reason [Emailify](/emailify/) is a strong fit. The HTML preview creates a better review object than a polished mockup alone, especially when several non-design stakeholders need to decide whether the email still feels trustworthy and clear once it behaves like a real message.

If the approval chain itself is the recurring bottleneck, [HTML Email Preview Link Approval Workflow for Stakeholder Signoff](/articles/emailify-html-email-preview-link-approval-workflow-for-stakeholder-signoff/) is the best companion piece.

## A practical partner-campaign workflow

For B2B marketing teams, this sequence usually works well:

1. Define the send owner before design polish starts.
2. Split the email into shared campaign zones and sender-owned production zones.
3. Build around one campaign promise instead of equal brand airtime.
4. Review the email with real footer, link, and sender logic already in place.
5. Approve message first, then production details, then preview behavior.
6. Export only after partner marketing and email ops have approved the same version.

[Emailify](/emailify/) helps most when the problem is not creating a single pretty campaign, but coordinating repeated design-to-production work without forcing the team to rebuild the email in a separate tool every time someone changes wording or approvals.

That is exactly what partner campaigns need.

The smoother workflow is not the one where both brands get everything they want on every screen. It is the one where the campaign stays clear, the send ownership stays explicit, and the final HTML still matches what everyone thought they approved.

---

---
type: article
title: Monthly Client Reporting Deck Workflow for Agencies
description: Build recurring client performance decks in Figma so agencies can refresh metrics, preserve brand control, and still hand off editable slides when clients need them.
datePublished: 2026-06-23T00:00:00.000Z
dateModified: 2026-06-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-monthly-client-reporting-deck-workflow-for-agencies/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-monthly-client-reporting-deck-workflow-for-agencies.md
---

# Monthly Client Reporting Deck Workflow for Agencies

Monthly client reporting decks look repetitive from a distance. In practice, they are one of the easiest presentation workflows to make messy.

The metrics change every month. The story should stay consistent. The account team wants something editable. The strategist wants stronger commentary. The designer wants the deck to stop drifting every time a client asks for "just one small tweak" in PowerPoint five minutes before the review call.

That is why reporting decks deserve a workflow of their own.

[Pitchdeck](/pitchdeck/) is a strong fit because the plugin page is built around designing presentations in Figma and exporting them to PowerPoint, Google Slides, PDF, Keynote, or hosted web presentations. For agencies, that means the visual source can stay in one place even when the client-facing delivery format changes from account to account.

This article is intentionally different from nearby Pitchdeck pieces like [QBR Deck Workflow for Customer Success Teams](/articles/pitchdeck-qbr-deck-workflow-for-customer-success-teams/), [How to Build Client Presentations in Figma](/articles/pitchdeck-how-to-build-client-presentations-in-figma/), and [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/). Those cover customer-success reviews, broader client deck construction, or export decisions across many deck types. This one is about recurring monthly reporting, where the real job is refreshing data and insight without rebuilding the deck structure every cycle.

## Treat the deck like a recurring system, not a monthly file

Agencies get into trouble when each reporting deck becomes a new presentation.

That creates predictable drift:

- one strategist rewrites the headline structure
- one designer changes chart styling for a single month
- the account lead duplicates last month's deck and edits inside PowerPoint
- a client comment gets applied in the exported file instead of the Figma source

After a few cycles, the deck may still look acceptable, but the workflow is brittle.

The better model is:

- one Figma reporting system
- one recurring story structure
- one clear refresh path for monthly data and commentary

That keeps the monthly work focused on the changing parts instead of reopening the whole design every time.

## Separate reusable narrative slides from changing metric slides

This is the biggest structural decision.

Most monthly reporting decks contain two different slide families:

### Reusable narrative slides

These barely change:

- cover
- agenda
- methodology
- channel definitions
- reporting period notes
- "what changed this month" structure

### Variable slides

These change every cycle:

- KPI summary
- campaign performance
- channel deep dives
- experiment outcomes
- next-step recommendations

When those two families are mixed together carelessly, updates become much slower than they should be. A copy refresh suddenly affects layout decisions that should have stayed stable.

If the data itself needs regular chart refreshes, [How to automatically create Charts in Figma from CSV file data using Pitchdeck](/tutorials/how-to-automatically-create-charts-in-figma-from-csv-file-data-using-pitchdeck/) is the best tutorial-level companion to this article.

## Decide who needs edit control after the agency presents

Monthly reporting decks often serve more than one moment:

- the live client call
- the leave-behind file
- the internal recap
- the client's own redistribution inside their team

Those are not the same job.

Before polishing the deck, answer:

- Will the agency present live from the browser?
- Does the client expect a PowerPoint they can keep editing?
- Is the deck mainly an async PDF artifact?
- Will the client want Google Slides comments between meetings?

That decision should happen before final cleanup, not after.

If the client frequently edits the deck internally, PowerPoint or Google Slides may be the better handoff. If the agency wants tighter design control, a hosted web deck or PDF may be cleaner. Pitchdeck works well here because one Figma source can support multiple output styles without forcing the agency to redesign the deck from zero.

## Build slide modules for commentary, not just charts

A weak monthly reporting deck usually has a data problem that is actually a storytelling problem.

The chart is present, but the slide does not explain:

- what changed
- why it changed
- what matters
- what the client should do next

That is why reusable slide systems should include commentary patterns, not only visual layout patterns.

For example, standardize modules like:

- `metric summary + takeaway`
- `trend chart + interpretation`
- `campaign snapshot + decision`
- `risk / blocker / next action`

Those patterns make monthly refreshes faster because the strategist is filling a known structure instead of improvising every slide in a blank text box.

## Lock the reporting rhythm before the design polish round

Agencies often waste time polishing slides that will be restructured anyway because the reporting rhythm was never agreed on.

I like to define the recurring sequence early:

1. Executive summary
2. KPI scorecard
3. Channel or initiative breakdown
4. Wins and underperformance
5. Experiments or changes made
6. Recommendations for next month

That rhythm can flex by account, but keeping it stable is what makes the deck feel professional and easier to maintain.

Clients do not need a surprise every month. They need a format that makes it easy to compare progress.

## Refresh data and proof before rewriting the story

A common monthly mistake is writing the client narrative before the real metrics, screenshots, or examples are fully updated.

That creates contradictions:

- the summary says paid social improved, but the slide still shows last month's chart
- the recommendation mentions a landing-page issue, but the screenshot is outdated
- the performance commentary assumes one audience won, but the exported deck still displays the earlier test result

The better order is:

1. refresh data sources and examples
2. update the affected Figma slides
3. review what actually changed
4. write the month-specific narrative

That makes the commentary more honest and reduces rework.

## Use one export rule for live presentation and another for handoff

Agencies often blur these moments together.

The live presentation needs:

- confidence
- clean pacing
- working links or embedded content if relevant
- presenter-friendly flow

The handoff file needs:

- editability if the client expects it
- stable formatting
- low-friction sharing
- no ambiguity about what version is final

Those are different requirements.

For example:

- present live from a hosted web deck
- send a PDF summary afterward
- provide PowerPoint only when the client truly needs to keep editing it

That is often healthier than defaulting every monthly deck to PowerPoint and letting the source of truth drift away from Figma.

If you are standardizing those rules more broadly, [Presentation Handoff Checklist for Designers](/articles/pitchdeck-presentation-handoff-checklist-for-designers/) is the closest supporting article.

## Add a final review for repetition, not only accuracy

Because these decks repeat monthly, another risk appears: sameness.

A recurring structure is good. A copy-pasted story is not.

Before exporting, review:

- whether the summary reflects this month rather than last month
- whether the recommendation slide contains an actual decision
- whether charts are ordered by relevance, not habit
- whether screenshots or proof points match the current discussion
- whether the client-facing language still sounds deliberate

That last pass protects the deck from becoming a ritual instead of a communication tool.

## A practical agency workflow

For monthly client reporting decks, this sequence works well:

1. Maintain one Figma reporting system per account.
2. Separate stable narrative slides from monthly variable slides.
3. Refresh real data, screenshots, and proof before rewriting the story.
4. Keep commentary modules reusable so insights stay structured.
5. Decide the delivery format before the final export round.
6. Present and hand off from the same approved Figma source.

[Pitchdeck](/pitchdeck/) helps most when the agency wants both control and flexibility. The designer can keep the deck system clean in Figma, the strategist can refresh the real story each month, and the account team can still deliver the deck in the format the client actually needs.

That is the real win in reporting work.

The deck stops being a monthly rebuild project and becomes a repeatable client communication system that gets faster, sharper, and easier to trust over time.

---

---
type: article
title: Resource Center and Blog Template QA Workflow from Figma
description: Compare editorial templates against Figma so article pages, content hubs, sidebars, and card grids stay polished as content teams keep publishing.
datePublished: 2026-06-23T00:00:00.000Z
dateModified: 2026-06-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-resource-center-and-blog-template-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-resource-center-and-blog-template-qa-workflow-from-figma.md
---

# Resource Center and Blog Template QA Workflow from Figma

Editorial pages are easy to under-review because they rarely look like "high-risk UI."

There is no checkout button. No onboarding flow. No pricing calculator. Just article cards, author bios, featured blocks, sticky sidebars, table-of-contents links, sign-up modules, and long-form content layouts that seem harmless until the live page quietly starts feeling sloppy.

That is exactly why resource centers and blog templates deserve design QA.

[Pixelay](/pixelay/) is a strong fit because the plugin is built around comparing Figma designs to real websites across live, staging, localhost, and protected environments. On editorial surfaces, that matters because the drift usually shows up in real browser behavior and real content density, not in isolated screenshots.

This article is intentionally different from nearby Pixelay content like [Documentation Site QA Workflow from Figma](/articles/pixelay-documentation-site-qa-workflow-from-figma/), [Post-Launch Content Drift Review Workflow for Marketing Sites](/articles/pixelay-post-launch-content-drift-review-workflow-for-marketing-sites/), and [Search Results and Filter State QA Workflow from Figma](/articles/pixelay-search-results-and-filter-state-qa-workflow-from-figma/). Those cover documentation layouts, ongoing post-launch drift, or product-like search/filter states. This one is about editorial and content-hub templates where cards, article bodies, sidebars, metadata, and promotional modules need to stay coherent as the publishing team keeps adding new content.

## Review the template system, not just one article page

This is the first mindset shift that helps.

Most editorial QA problems are not page-specific bugs. They are template problems revealed by different content.

For example:

- one long title breaks the article-card rhythm
- a missing author image collapses the metadata row
- the sticky sidebar overlaps the article body at one breakpoint
- the featured-post module looks balanced with curated content but awkward with real excerpts

That means the review should start with the template families:

- listing page
- featured content block
- article page
- related-post cards
- sidebar or in-article CTA modules
- author and metadata components

If the team only reviews a single polished article, it can miss the structural weaknesses that appear the moment the next ten pieces are published.

## Use real content extremes during review

Editorial templates usually fail at the edges, not the average case.

So the QA pass should deliberately include:

- a very long headline
- a short headline
- an excerpt that wraps longer than expected
- a post without an image or with a tall image
- a dense article with a table of contents
- a lighter article with only a few sections

That is where Pixelay becomes especially useful. The browser comparison makes it much easier to judge whether the live template still respects the intended Figma rhythm once the content stops behaving perfectly.

## Compare the parts of the page that publishing teams change most often

On resource-center and blog pages, I would prioritize these areas first:

- card titles and excerpt lengths
- tag or category rows
- author metadata
- featured-image crops
- sticky table of contents or signup modules
- inline promo blocks
- related-content sections

Those are the places where editorial teams, CMS users, or marketers most often make changes without realizing they are affecting the design system.

The live page may still "work," but the hierarchy starts loosening:

- cards lose alignment
- metadata becomes uneven
- a sidebar feels heavier than intended
- the page looks more crowded than the approved design

That is not catastrophic, but it is exactly the kind of quiet quality erosion that compounds over time.

## Separate editorial drift from frontend drift

This distinction keeps the follow-up sane.

Some template issues are clearly implementation problems:

- spacing token mismatch
- sticky behavior broken
- wrong font sizing
- image aspect ratio handled incorrectly

Others are editorial-content problems:

- headline too long for the module
- excerpt standards are inconsistent
- authorship fields are missing
- the CMS image selection is visually weaker than the design expected

Pixelay helps reveal both. But the review should still label them differently so the fix goes to the right owner.

Without that distinction, frontend teams get blamed for content governance issues and content teams get surprised by layout bugs that actually belong in code.

## Review the article body like an editorial layout, not a landing page

Long-form pages deserve a different eye.

What matters most on article templates is often:

- line length
- heading hierarchy
- spacing between sections
- how callouts or promo blocks interrupt the reading flow
- whether the table of contents feels helpful instead of unstable
- whether code blocks, quotes, or embeds distort the layout rhythm

This is one place where the difference from a general marketing-page QA pass matters. A landing page can survive with a few rough edges if the CTA still lands. An editorial page loses trust through reading friction.

That is why [Documentation Site QA Workflow from Figma](/articles/pixelay-documentation-site-qa-workflow-from-figma/) is a useful adjacent article, but the focus here is more editorial: article cards, content hubs, and reading flow rather than instructional docs structure.

## Use one hub page and one article page as your recurring review anchors

If the team publishes often, do not reinvent the QA scope every time.

Choose:

- one representative content hub or listing page
- one representative article template

Use those as the recurring comparison anchors whenever:

- the CMS structure changes
- a new content module launches
- the card system is updated
- promotional blocks are added
- editorial design gets refreshed

That creates a lighter review rhythm than checking every article individually while still catching the high-signal template drift.

## Watch mobile harder than the desktop team wants to

Editorial layouts often look respectable on desktop while quietly degrading on mobile.

Typical failures:

- author rows wrap awkwardly
- category chips push key content too far down
- featured images dominate the viewport
- sticky modules become jumpy or intrusive
- related-content cards lose hierarchy

Because these are not "broken" in a functional sense, they are easy to tolerate. But for content-heavy pages, that softness makes the site feel less intentional and can make reading harder than it needs to be.

If content updates continue after launch, [Post-Launch Content Drift Review Workflow for Marketing Sites](/articles/pixelay-post-launch-content-drift-review-workflow-for-marketing-sites/) is the best follow-up article because editorial surfaces are especially vulnerable to that kind of quiet ongoing drift.

## A practical editorial-template QA loop

For content and frontend teams, this sequence works well:

1. Choose one hub page and one article page as recurring QA anchors.
2. Review template families, not only one example page.
3. Test the design against real content extremes.
4. Label findings as editorial drift or implementation drift.
5. Check mobile layouts as seriously as desktop layouts.
6. Re-run the comparison after meaningful CMS or module changes.

That is enough process to keep quality high without turning every content publish into a design fire drill.

## Where Pixelay helps most

[Pixelay](/pixelay/) is valuable on editorial surfaces because it gives the team a fast way to compare the intended Figma layout to the actual browser experience readers get. That matters more than it sounds. Resource centers and blog templates are often some of the most frequently edited parts of a site, which makes them unusually prone to subtle drift.

The goal is not pixel perfection for its own sake.

It is making sure the content system stays readable, deliberate, and trustworthy even after dozens of articles, card updates, and CMS edits have passed through the same templates. Pixelay makes that drift visible while the fixes are still small.

---

---
type: article
title: Animated Help Center Asset Workflow from Figma
description: Export GIF, MP4, or APNG help-center visuals from Figma so docs teams can explain product changes without bloating every article.
datePublished: 2026-06-23T00:00:00.000Z
dateModified: 2026-06-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-animated-help-center-asset-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-animated-help-center-asset-workflow-from-figma.md
---

# Animated Help Center Asset Workflow from Figma

A static screenshot is often enough for a help center article. Until it isn't.

The moment a support team needs to explain a hover state, a drag interaction, a multi-step setting change, or a subtle animation in the product, still images start doing awkward work. The article gets longer because the writer has to explain timing in words. The reader has to infer what changed between step 2 and step 3. Someone exports a giant GIF to make it clearer, and now the page loads like it is dragging a piano uphill.

That is why animated documentation assets deserve their own workflow.

[TinyImage](/tinyimage/) is useful here because it keeps GIF, MP4, APNG, PDF, WebP, and compressed image export inside Figma. The gain is not only "more formats." It is giving documentation and support teams a way to choose the lightest moving asset that still teaches the interaction clearly.

This article is intentionally different from nearby TinyImage content like [Documentation Screenshot Workflow for Support Teams](/articles/tinyimage-documentation-screenshot-workflow-for-support-teams/), [Knowledge Base Screenshot Localization Workflow](/articles/tinyimage-knowledge-base-screenshot-localization-workflow/), and [Release Note GIF and MP4 Workflow from Figma](/articles/tinyimage-release-note-gif-and-mp4-workflow-from-figma/). Those cover still screenshots, multilingual screenshot libraries, or release-note media. This one is specifically about help-center and support content where the moving asset has to teach a task, not just show that a feature exists.

## Start by deciding whether motion is actually necessary

Not every tutorial becomes better when it moves.

Use an animated asset when at least one of these is true:

- the order of actions matters
- a hover, reveal, or transition changes meaning
- the interaction is easier to understand by watching than by comparing before-and-after screenshots
- the support article is about reducing confusion for first-time users

Do not use motion just because it looks richer. If a single cropped screenshot teaches the step cleanly, motion only adds weight and distraction.

The useful question is:

Would the reader understand this faster from one moving asset than from two or three still frames?

If the answer is no, stay with screenshots.

## Choose the output format by reading experience, not personal preference

Docs teams often default to GIF because it feels universally safe. That is understandable, but it is rarely the best default.

Here is a practical decision guide:

| If the asset needs... | Better first choice |
| --- | --- |
| Broad compatibility and very short looping motion | GIF |
| Better quality at lower file size for embedded article motion | MP4 |
| Cleaner transparency or UI motion in a compact package | APNG |
| A static fallback for narrow layouts, PDFs, or email replies | PNG or JPG |

What matters is the delivery surface.

If the asset sits inline inside a long help article, MP4 is often the better choice because it can preserve readability without punishing page weight. If the clip needs transparency or a simpler loop, APNG can be a better fit. If the support team needs something dead simple to drop into many systems, GIF may still win even when it is heavier.

The mistake is treating one format as the answer for every support surface.

## Design the motion around one teaching moment

Animated help assets usually get worse when they try to show the whole workflow.

A reader does not need a cinematic tour. They need one clear answer:

- where to click
- what changed
- what to expect next

That means the source Figma frames should stay tightly scoped.

Good animated help assets usually have:

- one task per clip
- a short loop
- one obvious focus area
- enough pause time for the eye to catch the result
- no decorative motion that competes with the instruction

If the interaction takes ten seconds to explain, it may be two assets instead of one. For example:

- clip one: open the menu and choose the setting
- clip two: confirm the result on the updated screen

That is much easier to absorb than one overloaded loop containing the entire product.

## Keep the export dimensions closer to the reading column

Many docs assets become heavy because they are exported closer to "full product screenshot" size than "article teaching aid" size.

That usually creates three problems at once:

- the file is heavier than the article needs
- the user still cannot tell what matters in the frame
- the narrow mobile layout shrinks the UI until the text becomes useless

For help-center motion, I prefer choosing the crop based on the instructional area first:

- the panel
- the dropdown
- the modal
- the chart section
- the settings row

Then export only enough surrounding UI to orient the reader.

This is the same discipline that makes [Documentation Screenshot Workflow for Support Teams](/articles/tinyimage-documentation-screenshot-workflow-for-support-teams/) useful for still assets. The difference is that moving assets punish sloppy framing even more because every extra pixel adds weight on every loop.

## Build a docs-ready asset set, not just one clip

The best workflow usually produces a small bundle:

- the primary animated asset
- one fallback still image
- a clear file name tied to the article or task
- optional locale or product-version variants if needed

That bundle matters because support content rarely lives in one place only.

The same interaction might appear in:

- the public help center
- an internal support macro
- a changelog article
- a customer-success reply
- a PDF guide

If the docs team only exports one unnamed GIF and hopes everyone remembers what it is, the asset library becomes untrustworthy very quickly.

I like names that expose the job clearly:

- `settings-billing-update-payment-method.mp4`
- `docs-workspace-members-invite-loop.apng`
- `kb-export-report-confirmation-fallback.png`

That sounds operationally boring, but it is what keeps the library reusable.

## Review the motion in the live article layout before publishing

This is where many animated docs workflows quietly fail.

The exported clip looks fine in isolation. Then it gets embedded into the actual help-center template and one of these happens:

- the article column shrinks the UI until labels are unreadable
- autoplay feels distracting next to long text
- the first frame loads too late, leaving a blank box
- the loop restarts too aggressively and pulls attention away from the instructions

So the review should happen in the real page context.

Check:

- readability at the exact article width
- behavior on mobile
- whether the first frame is meaningful before motion starts
- whether the motion speed helps learning or creates noise
- whether the surrounding paragraph now says less because the clip does more

That last point matters. A good animated asset should simplify the writing around it, not force the writer to narrate the clip anyway.

## Use a lightweight editorial rule for when motion belongs

Support teams move faster when they do not have to re-debate the format every time.

A simple rule set is often enough:

- still screenshot for static UI or simple confirmation
- animated asset for motion-dependent behavior or multi-step interaction
- fallback still image whenever the clip may be reused outside the help center

Once that rule exists, the export process gets easier because the team is choosing from a system instead of improvising every article.

## A practical publishing checklist

Before shipping an animated help asset from Figma, confirm:

- the clip teaches one action clearly
- the crop matches the instructional focus
- the format fits the delivery surface
- a fallback still image exists if the asset will be reused
- the filename is reusable and descriptive
- the embedded version is readable in the real article layout
- the loop is short enough to feel helpful, not noisy

[TinyImage](/tinyimage/) helps most when the support team has already decided what the asset needs to do. It removes the repetitive export and compression cleanup that usually sits between "the interaction is designed" and "the help article is publishable."

That is the real workflow win.

Animated documentation should not feel like special production every time a product interaction changes. With a tighter export process, it becomes another dependable part of shipping clearer help content from the same Figma source the team already maintains.

---

---
type: article
title: Banner-to-Landing-Page Message Match Workflow for Performance Teams
description: Review HTML5 banner creative against the destination landing page before launch so performance teams stop shipping ads that promise one thing and land on another.
datePublished: 2026-06-22T00:00:00.000Z
dateModified: 2026-06-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-banner-to-landing-page-message-match-workflow-for-performance-teams/
markdownUrl: https://www.hypermatic.com/articles/bannerify-banner-to-landing-page-message-match-workflow-for-performance-teams.md
---

# Banner-to-Landing-Page Message Match Workflow for Performance Teams

A banner can be perfectly traffickable and still perform badly because the message falls apart after the click.

The ad says "See the live dashboard."
The landing page opens on a generic homepage hero.
The banner emphasizes a limited-time bundle.
The destination page buries the offer halfway down.
The creative highlights one use case.
The post-click page defaults to a broader story with no matching proof.

That is not only a conversion problem. It is a workflow problem.

[Bannerify](/bannerify/) is a strong fit here because the product page already supports exporting production-ready HTML, MP4, GIF, and platform-specific banner outputs directly from Figma. For performance teams, the bigger opportunity is using that speed to review the ad and the destination experience together before trafficking hardens the campaign. The banner should not be approved in isolation if the click path is where the promise gets judged.

This article is intentionally different from nearby Bannerify content like [Banner Preview Link Workflow for Approvals](/articles/bannerify-banner-preview-link-workflow-for-approvals/), [HTML5 Ad Click Tag Checklist](/articles/bannerify-html5-ad-click-tag-checklist/), and [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/). Those focus on creative review mechanics, click-tag implementation, or handoff to ad ops. This one is specifically about message match between the banner and the landing page, where performance risk often appears before any trafficking problem does.

## Message match is a conversion issue disguised as creative QA

Teams often treat the banner and landing page as separate jobs:

- designers finish the banner family
- growth or media confirms the destination URL
- the landing page is "already live"

But post-click trust is built in the handoff between those two surfaces.

If the banner promises:

- a specific offer
- a specific workflow
- a specific audience outcome
- a specific visual proof cue

then the landing page has to continue that thread quickly.

Otherwise the user experiences friction that is hard to diagnose later. The campaign may simply look weaker in performance data, even though the real problem was expectation mismatch.

## Define the banner promise in one sentence

Before reviewing the landing page, force the team to write down one sentence:

What is this banner asking the user to expect after the click?

Good examples:

- "See how the product turns Figma slides into editable PowerPoint files."
- "Claim the limited-time ecommerce banner template bundle."
- "Compare pricing plans for design teams running multi-seat campaigns."

Weak examples:

- "Learn more"
- "Explore the platform"
- "Check out our solution"

That one-sentence promise becomes the review anchor.

Once it exists, the team can judge whether the landing page actually fulfills it in the first screen or two.

## Review the first post-click screen before the full page

Most banner clicks are judged very quickly.

That means the first useful review question is not "is the destination page generally good?"

It is:

Does the first screen continue the promise the banner made?

Check:

- headline continuity
- offer clarity
- proof alignment
- screenshot or visual consistency
- CTA logic

If the banner highlights a free template and the landing page opens with a generic company hero, the campaign is already creating extra cognitive work. If the banner is targeted at one use case but the page opens on a broad multi-product message, the user has to re-orient immediately.

That is where message-match review pays for itself.

## Use Bannerify previews to review the ad in its real behavior

A static frame is not enough for this kind of QA.

The landing page has to be compared against what the banner actually says in motion:

- which headline lands first
- when the CTA appears
- whether the offer resolves on frame one or frame three
- which proof cue is most memorable by the end of the loop

This is why [Banner Preview Link Workflow for Approvals](/articles/bannerify-banner-preview-link-workflow-for-approvals/) is a useful companion process. A live banner preview makes the post-click review much more honest than a screenshot pasted into a slide deck.

The destination page should be reviewed against the lived banner experience, not against what the team thinks the ad communicates.

## Classify message-match failures so the right team fixes them

These issues usually fall into four buckets:

### Creative mismatch

The banner emphasizes the wrong angle.

### Landing-page mismatch

The page is fine, but not for this campaign promise.

### Offer mismatch

The promotion, qualifier, or CTA expectation changes after the click.

### Proof mismatch

The ad cues one kind of evidence, but the page opens on another.

That classification matters because not every problem should be solved by revising the banner. Sometimes the correct fix is a dedicated page variant, a stronger above-the-fold proof block, or a CTA rewrite on the destination.

## Check the visual handoff as well as the copy handoff

Message match is not only wording.

It also includes:

- product screenshot continuity
- offer card styling
- logo or partner context
- pricing-frame consistency
- whether the destination still feels like the same campaign

For example, if the banner uses a crisp product interface crop and the landing page opens with a stock-photo hero, the campaign can feel disconnected even if the copy technically matches.

The goal is not aesthetic sameness. It is continuity strong enough that the click feels rewarded instead of redirected.

## Use one simple pre-launch review ritual

For performance teams, this can be lightweight:

1. Open the live banner preview.
2. Write the one-sentence promise.
3. Click through to the exact landing page variant.
4. Review the first screen for promise continuity.
5. Note whether the fix belongs to creative, page, offer, or proof.

This takes far less time than repairing weak performance after launch while everyone argues about whether the audience, bid strategy, or creative is at fault.

## A short checklist before trafficking

Before the campaign is locked, confirm:

- the banner promise is explicit
- the destination URL reflects that promise
- the first landing-page screen continues the same story
- any offer or qualifier is consistent after the click
- the proof style feels continuous enough to build trust
- the fix owner is clear if message match is weak

## Why this workflow matters

Banner production usually gets judged on the asset package: sizes, click tags, previews, and final ZIPs.

That operational layer matters. But many campaigns underperform long before ad ops has done anything wrong. They underperform because the banner and the landing page were never reviewed as one experience.

[Bannerify](/bannerify/) makes it easier to produce and preview the banner side quickly from Figma. The next step is using that speed to validate the click path while changes are still cheap. That is how performance teams stop shipping ads that look right in review and feel wrong after the click.

---

---
type: article
title: Logo Asset Recovery Workflow from PDF and Illustrator to Figma
description: Recover reusable logo files from old PDFs and Illustrator exports so brand teams can rebuild a clean Figma source instead of tracing outdated assets by hand.
datePublished: 2026-06-22T00:00:00.000Z
dateModified: 2026-06-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-logo-asset-recovery-workflow-from-pdf-and-illustrator-to-figma/
markdownUrl: https://www.hypermatic.com/articles/convertify-logo-asset-recovery-workflow-from-pdf-and-illustrator-to-figma.md
---

# Logo Asset Recovery Workflow from PDF and Illustrator to Figma

Logo recovery is one of those jobs that sounds trivial until the source files show up.

Someone sends an old PDF brand sheet. Another folder contains Illustrator files with inconsistent naming. There are flattened exports on the desktop, a partner one-pager with the only usable lockup, and three different versions of the same mark in unknown states of approval.

Then the design team gets asked to "just put the logos into Figma."

That request is rarely about moving one file. It is about recovering a trustworthy logo system from scattered historical assets.

[Convertify](/convertify/) is useful here because the product page already supports importing PDFs, Illustrator files, and other external design formats into Figma. For logo recovery, the practical goal is not magical one-click perfection. It is bringing the best source material into Figma quickly enough that the team can rebuild a clean reusable logo library instead of redrawing marks from screenshots.

This article is deliberately different from nearby Convertify pieces like [Brand Guidelines PDF to Figma Workflow](/articles/convertify-brand-guidelines-pdf-to-figma-workflow/), [Rebrand Design Archive Migration Workflow](/articles/convertify-rebrand-design-archive-migration-workflow/), and [Illustrator Icon Library Migration Workflow to Figma](/articles/convertify-illustrator-icon-library-migration-workflow-to-figma/). Those cover broader brand documents, archive cleanup, or icon-set migration. This one is specifically about recovering logo assets from mixed historical files where the main risk is rebuilding the wrong source or preserving a messy one.

## Treat logo recovery as source triage first

The worst way to start is by importing everything and cleaning it later.

Logo libraries accumulate a lot of noise:

- outdated marks
- unofficial lockups
- flattened exports
- partner-specific treatments
- color variations with no approval context

Before importing, sort the candidate sources into three buckets:

- `likely authoritative`
- `possibly useful`
- `reference only`

Likely authoritative sources usually include:

- original Illustrator logo packages
- official brand-guide pages
- vector PDFs exported from a trustworthy source

Possibly useful sources include:

- one-pagers containing a missing lockup
- sales collateral with a rare but approved mark
- old presentation slides where the vector survived

Reference-only sources include:

- screenshots
- compressed JPG logos
- low-resolution web exports

That triage saves hours because the team stops treating every found logo as equally important.

## Import Illustrator and PDF sources with different expectations

Illustrator assets and PDFs do not usually create the same cleanup problems.

Illustrator files are more likely to preserve useful vectors, but may arrive with:

- strange artboard organization
- old color swatches
- hidden variants
- duplicated marks

PDF sources are more likely to help when:

- the official AI file is missing
- the only approved lockup lives inside a brand sheet
- the team needs to recover spacing or pairing rules from a reference document

If you need the direct mechanics for those imports, the tutorials on [how to import Adobe Illustrator files to Figma with one click using Convertify](/tutorials/how-to-import-adobe-illustrator-files-to-figma-with-one-click-using-convertify/) and [how to import PDF files to Figma with one click using Convertify](/tutorials/how-to-import-pdf-files-to-figma-with-one-click-using-convertify/) are the most useful operational companions.

## Recover the minimum viable approved set first

Do not begin with every historical variation.

Start with the smallest set that the team actually needs to use:

- primary horizontal logo
- primary stacked logo
- symbol-only mark if it exists
- monochrome or reversed version if it is truly approved

This is the set that should become the first clean Figma page.

Why this matters:

- it establishes which version is current
- it lets brand and marketing approve the core assets early
- it stops the file from turning into an archaeological dig

Once the core set is stable, then recover secondary marks, event lockups, or campaign-specific variants if they are still relevant.

## Rebuild the organization, not just the vectors

A recovered logo that technically looks correct can still be operationally useless.

The usual problems are:

- no one knows which lockup is current
- black, white, and color versions are mixed randomly
- file names reflect old folders instead of actual usage
- the artboard contains exports, references, and master assets together

A better recovered Figma file usually needs clear sections like:

- `Approved Primary Logos`
- `Approved Monochrome Variants`
- `Legacy Reference`
- `Needs Decision`
- `Partner or Contextual Lockups`

That separation is what turns a recovered asset dump into a real working source.

If your imports often arrive visually intact but structurally messy, [Figma Import Cleanup Checklist](/articles/convertify-figma-import-cleanup-checklist/) is the best adjacent article in the current library.

## Validate spacing and alignment from the source, not from memory

Logo recovery often goes wrong when the team assumes it can eyeball the final lockup.

That is risky for:

- symbol-to-wordmark spacing
- vertical centering
- exclusion zones
- small-cap or letter-spacing details
- stacked lockups where proportions matter

This is where the imported source is valuable even if the final asset still needs cleanup. The goal is to preserve the approved relationships, not just the general shape.

A clean recovery pass should answer:

- Is this the approved mark?
- Is this spacing intentional or accidental?
- Is this variation still in active use?
- Does this version match the official brand reference?

If the answer is unclear, keep the candidate in a decision bucket instead of silently promoting it to "approved."

## Watch for false vector confidence

A converted logo can be vector and still be wrong.

Common traps:

- too many unnecessary nested groups
- broken compound shapes
- color values that do not match approved brand tokens
- a flattened shadow or outline accidentally preserved from print collateral
- a wordmark that looks right but uses outlines from an outdated file

This is why the goal is not "vectorize everything." The goal is "recover a reusable, trustworthy set."

Sometimes the right move is to clean the imported vector.
Sometimes it is to rebuild one variation carefully from the best source.
Sometimes it is to keep a source as reference-only while the team waits for approval.

Convertify gets the team to that decision point faster, which is the real leverage.

## Finish with one usage-oriented verification pass

Before the recovered logos are handed to the rest of the team, check them in the kinds of places they will actually be reused:

- landing-page logo rows
- partner announcement graphics
- presentation title slides
- email headers
- one-pagers or PDFs

That pass catches practical issues like:

- lines that look too thin at small sizes
- reversed marks that need a better background treatment
- lockups that feel too wide for common layouts
- monochrome versions that lose recognition

The best recovery workflow does not stop at "the vectors imported." It stops when the team can actually use the assets confidently.

## A reliable recovery sequence

For most brand teams, this sequence is enough:

1. Triage candidate sources by authority.
2. Import the strongest PDF and Illustrator files with Convertify.
3. Recover the minimum viable approved logo set first.
4. Separate approved assets from legacy references and undecided variants.
5. Clean structure, naming, and spacing before wider reuse.
6. Validate the recovered marks in real downstream contexts.

That is what turns a scattered pile of old files into a Figma-ready logo source instead of one more temporary patch job.

---

---
type: article
title: Trust Center and Security FAQ Copy Alignment Workflow in Figma
description: Keep trust-center pages, security FAQs, and product security copy aligned in Figma so teams stop shipping contradictory reassurance across marketing and product surfaces.
datePublished: 2026-06-22T00:00:00.000Z
dateModified: 2026-06-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-trust-center-and-security-faq-copy-alignment-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-trust-center-and-security-faq-copy-alignment-workflow-in-figma.md
---

# Trust Center and Security FAQ Copy Alignment Workflow in Figma

Security copy rarely breaks in one dramatic place.

It drifts quietly.

The trust-center page says one thing about data retention. The product settings screen says something softer. A sales screenshot still shows an old control name. The help article uses a different phrase again. By the time a prospect or customer reads across those surfaces, the company looks less trustworthy than it actually is.

That is why security and trust content needs its own alignment workflow.

[CopyDoc](/copydoc/) is a strong fit here because the product page already supports exporting, importing, syncing, and reviewing Figma text systematically instead of relying on scattered manual edits. For trust-center work, the real value is not only faster copy changes. It is being able to keep policy-adjacent wording consistent across product screens, marketing pages, screenshots, and FAQ layouts before those differences become buyer friction.

This article is intentionally different from nearby CopyDoc pieces like [Word Doc Review Workflow for Figma Legal Copy](/articles/copydoc-word-doc-review-workflow-for-figma-legal-copy/), [Help Center and UI Copy Alignment Workflow in Figma](/articles/copydoc-help-center-and-ui-copy-alignment-workflow-in-figma/), and [Settings and Permissions Copy Review Workflow in Figma](/articles/copydoc-settings-and-permissions-copy-review-workflow-in-figma/). Those focus on formal legal review, support documentation alignment, or product settings language. This one is specifically about trust-center and security FAQ consistency, where credibility depends on several public and product-facing surfaces reinforcing the same message.

## Trust copy should be treated as a system, not a page

Most teams think they are updating one asset.

In reality they are often updating a cluster:

- trust-center page
- security FAQ or knowledge-base article
- screenshot-based sales or product marketing assets
- product settings or admin screens
- approval decks or one-pagers

That cluster is why inconsistencies show up so easily.

A phrase like "customer data retention controls" may appear in:

- a marketing reassurance block
- a settings-page label
- an FAQ answer
- a screenshot caption
- a sales proof slide

If those versions drift, the problem is not just wording. It is perceived confidence.

## Start with the claim inventory, not the design polish

Before editing text in Figma, identify the actual claims the company is making.

Typical trust-center claims include:

- how data is stored
- who can access what
- retention or deletion controls
- export and backup behavior
- review or approval workflows
- support or response expectations

Then ask:

- Which of these claims appear publicly?
- Which are product-surface labels?
- Which appear in screenshots or sales visuals?
- Which terms must stay exact?

This inventory is what keeps the review from becoming a vague copy-editing pass.

If the product renamed a setting from "Delete workspace data" to "Retention policy," that is not a minor label tweak. It affects every surface that references the control.

## Group copy by promise, not by file

This is the biggest operational improvement.

Instead of reviewing one page at a time, group the copy around trust promises such as:

- access control
- data retention
- auditability
- privacy and sharing
- admin visibility

Then compare how each promise appears across screens.

For example, the `data retention` group might include:

- trust-center FAQ answer
- admin settings label
- screenshot annotation
- support article heading
- product-tour callout

That grouping makes contradictions much easier to spot than a traditional "page by page" review.

## Make screenshot copy part of the security review

Teams often forget that screenshots are part of trust communication.

A beautifully updated trust-center page can still be undermined by:

- a sales screenshot with an old toggle name
- a product demo showing retired terminology
- a help image with outdated permission labels

That is why CopyDoc is helpful in this workflow. The plugin keeps the text surfaces closer together, which makes it easier to treat screenshots and UI states as copy-bearing artifacts instead of purely visual assets.

This is especially important when product marketing uses screenshots as proof. If the screenshot language lags behind the current FAQ wording, the company starts looking inconsistent right where reassurance matters.

## Define which words are controlled vocabulary

Trust and security content usually needs a tighter vocabulary layer than general product marketing copy.

Examples of phrases that should not drift casually:

- data retention
- workspace access
- private link
- admin approval
- export data
- delete permanently

That does not mean every sentence has to sound robotic. It means the terms that anchor product and security understanding should remain stable unless there is a deliberate change.

[Figma Terminology Audit Workflow](/articles/copydoc-figma-terminology-audit-workflow/) is the best adjacent process when the language problem is broader than one trust-center initiative. In practice, the terminology audit and trust-copy alignment workflows reinforce each other.

## Review with three audiences in mind

Trust-center content usually serves several readers at once:

- prospects doing lightweight diligence
- customers looking for a specific operational answer
- internal teams who will reuse the language elsewhere

That means every answer should be checked for:

- accuracy
- consistency with product labels
- clarity outside the product context

A sentence can be accurate but still weak if it uses product language the public page never explains. A settings label can be correct inside the product but still undermine the FAQ if the wording implies something slightly different.

This is why cross-surface review matters more than line-edit perfection.

## A useful review package for this work

One practical CopyDoc review package might include:

- the trust-center page copy
- the matching FAQ answers
- the product settings or admin labels referenced by those answers
- any screenshot captions or annotations that repeat the same claims

Then review the package with questions like:

- Are we making the same promise everywhere?
- Are the product labels consistent with the public explanation?
- Are any screenshots still showing old wording?
- Would a customer reading these surfaces together feel reassured or confused?

That package is usually more useful than sending security copy through a generic marketing review loop.

## Final alignment checklist

Before shipping updates, confirm:

- core trust claims were inventoried first
- copy was grouped by promise, not only by page
- screenshots were included in the review scope
- controlled vocabulary stayed consistent
- product labels and FAQ wording reinforce each other
- support, marketing, and product surfaces are not contradicting the same promise

## What this workflow prevents

The goal is not to make trust-center copy sound more polished.

The goal is to stop the subtle contradictions that make a company feel less reliable than it is. [CopyDoc](/copydoc/) helps because it gives teams a structured way to review and update the Figma-based surfaces where those contradictions often begin. When trust language is treated like a system, security copy becomes easier to maintain and much harder to accidentally undermine.

---

---
type: article
title: Winback Email Workflow for SaaS Teams
description: Design clearer winback emails in Figma so SaaS teams can re-engage inactive users without mixing desperate offers, stale screenshots, and brittle HTML.
datePublished: 2026-06-22T00:00:00.000Z
dateModified: 2026-06-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-winback-email-workflow-for-saas-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-winback-email-workflow-for-saas-teams.md
---

# Winback Email Workflow for SaaS Teams

Winback emails get weird faster than most lifecycle messages.

The team wants urgency, but not panic. They want to mention value, but not repeat the same onboarding copy from six months ago. They want to include an offer, but not train every inactive user to wait for discounts. And they usually want to build the email quickly because it feels like "just another retention send."

That is exactly how winback sequences become muddled.

[Emailify](/emailify/) is a strong fit for this workflow because the product page already supports designing reusable email modules in Figma and exporting production-ready HTML that works across major email clients. For winback campaigns, the real benefit is not only the HTML export. It is being able to review message, hierarchy, and module choices before the campaign becomes a last-minute mix of stale screenshots, recycled components, and fragile personalization.

This article is intentionally different from nearby Emailify content like [Lifecycle Email Workflow for Marketing Ops Teams](/articles/emailify-lifecycle-email-workflow-for-marketing-ops-teams/), [Trial Expiration Email Workflow for SaaS Teams](/articles/emailify-trial-expiration-email-workflow-for-saas-teams/), and [Renewal Reminder Email Workflow for SaaS Teams](/articles/emailify-renewal-reminder-email-workflow-for-saas-teams/). Those cover broader journey systems, trial endings, or active-customer renewal timing. This one is specifically about bringing inactive or drifting users back, where the tone, offer logic, and proof structure need their own workflow.

## Winback emails should start with the reason for reactivation

Too many teams start with the discount block.

That is backward.

The first question is:

Why would this user come back now?

Common winback reasons include:

- a meaningful product improvement
- a simplified setup path
- a new workflow the user previously could not do
- a time-sensitive but relevant incentive
- a reminder of unfinished value

Those reasons should shape the email structure.

For example, a product-improvement winback may need:

- a short "what changed" summary
- one supporting screenshot
- a low-friction CTA

An incentive-led winback may need:

- clear eligibility
- clean deadline language
- explicit next-step logic

If the team does not name the reactivation reason first, the email usually collapses into generic "we miss you" copy with scattered proof.

## Separate reactivation message types before designing

Winback emails often look similar in a CRM calendar, but they are not the same job.

I like to split them into three types.

### Product-led reactivation

Best when the user left because the workflow did not feel complete or compelling enough.

Useful ingredients:

- new feature or workflow proof
- updated screenshot
- simple CTA into the product

### Offer-led reactivation

Best when the user already understood the value but hesitated on cost or timing.

Useful ingredients:

- clear offer framing
- guardrails around deadlines or terms
- minimal distraction around the CTA

### Assistance-led reactivation

Best when the user stalled because setup, migration, or adoption felt hard.

Useful ingredients:

- fast path back in
- support or onboarding help
- reassuring copy instead of aggressive urgency

That classification makes module design much easier. One winback system can support all three, but the message hierarchy should not pretend they are interchangeable.

## Reuse modules carefully because winback tone is fragile

This is where teams usually make the campaign feel wrong.

They drop in a standard lifecycle hero, a generic testimonial block, and a CTA from a nurture email. Technically the email is fine. Emotionally it feels tone-deaf.

Winback modules need a slightly different bar.

Good candidates:

- a short reason-to-return headline
- one focused value block
- one proof element
- one primary CTA
- one support or fallback path

Weak candidates:

- stacked promotional badges
- several competing CTAs
- long feature lists
- dense testimonial carousels
- screenshot galleries that feel like a product-tour email

If your base system is already component-driven, [Modular Email Template Workflow in Figma](/articles/emailify-modular-email-template-workflow-in-figma/) is the closest supporting read. The key difference is that winback modules need stronger restraint.

## Use screenshots only when they prove the reason to return

This is an easy place to add weight without adding persuasion.

A screenshot in a winback email should show one of two things:

- a changed workflow
- a regained outcome

It should not exist just because the product team wants the email to look richer.

Ask:

- Does this screenshot make the updated value more believable?
- Is the UI current enough to avoid trust damage?
- Will the key detail survive mobile width and image blocking?

If not, a stronger text hierarchy may outperform the image entirely.

When screenshots are useful, keep them surgical. One focused interface crop usually works better than a wide dashboard montage stuffed into a narrow inbox column.

## Plan the fallback path before export

A good winback email does not trap every inactive user into the same CTA.

Some users are ready to restart.
Some want to look first.
Some need reassurance or support.

That means the email should define:

- the primary reactivation action
- the secondary low-friction action
- the support path for stuck users

Examples:

- `Resume setup`
- `See what's new`
- `Book a quick walkthrough`

This matters because winback emails often over-rely on one CTA while the audience is actually mixed. A softer secondary path can improve relevance without making the email feel cluttered.

## Review urgency and compliance together

Winback campaigns are risky because teams tend to stretch wording when results matter.

Review these carefully:

- deadline claims
- discount conditions
- cancellation or billing language
- feature-availability claims
- reactivation promises that imply support or migration effort

If the email includes an offer, [HTML Email Compliance Review Workflow](/articles/emailify-html-email-compliance-review-workflow/) is the best supporting process in the current library. Winback campaigns are exactly where fuzzy deadline language and incomplete offer notes can become expensive.

## Run QA like a retention email, not like a newsletter

The final review should focus on winback-specific failure modes:

- does the reason to return appear immediately?
- is the message consistent with current product reality?
- does the CTA match the user's likely level of readiness?
- are old screenshots, claims, or pricing references still lurking?
- does the email still make sense if images are blocked?
- does the incentive read as intentional instead of desperate?

This targeted review is more useful than a generic template QA pass.

For the final export layer, [Figma Email QA Before ESP Upload](/articles/emailify-figma-email-qa-before-esp-upload/) is the natural final checkpoint.

## A practical winback production rhythm

For SaaS teams, this rhythm usually holds up:

1. Define the reactivation reason before designing the message.
2. Choose the winback type: product-led, offer-led, or assistance-led.
3. Build only the modules needed to support that reason.
4. Use screenshots sparingly and only when they prove change.
5. Review urgency, offer logic, and fallback paths together.
6. Export HTML only after the tone and compliance details are settled.

## Why this is worth tightening

Winback emails are easy to underestimate because they look like a single send.

In practice they sit at the intersection of retention, product truth, and campaign production. That makes them unusually sensitive to stale assets and muddled structure. [Emailify](/emailify/) helps by keeping the design and export workflow inside Figma, where the team can review the message as a system before the HTML goes out. The result is a winback email that feels intentional instead of improvised.

---

---
type: article
title: Analyst Briefing Deck Workflow for Product Marketing Teams
description: Build analyst briefing decks in Figma that product marketing teams can update quickly without losing message control across live and follow-up presentation formats.
datePublished: 2026-06-22T00:00:00.000Z
dateModified: 2026-06-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-analyst-briefing-deck-workflow-for-product-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-analyst-briefing-deck-workflow-for-product-marketing-teams.md
---

# Analyst Briefing Deck Workflow for Product Marketing Teams

Analyst briefings fail for a different reason than sales decks.

The problem usually is not design polish. It is narrative discipline.

A product marketing team wants to explain the market, the roadmap, and the product story. An analyst wants to understand what actually changed, what matters, and how the company thinks about the category. If the deck turns into a long product tour or a generic company overview, the briefing becomes forgettable fast.

[Pitchdeck](/pitchdeck/) is a good fit for this workflow because the product page explicitly supports building presentations in Figma, then exporting them to PowerPoint, Google Slides, PDF, Keynote, or hosted web presentations with analytics. For analyst work, that flexibility matters because one briefing often needs several lives: internal prep, the live session, and a more standalone follow-up version afterward.

The current library already covers nearby Pitchdeck topics like [Executive Briefing Deck Workflow for Enterprise Sales Teams](/articles/pitchdeck-executive-briefing-deck-workflow-for-enterprise-sales-teams/), [Presentation Brand Control for Figma Teams](/articles/pitchdeck-presentation-brand-control-for-figma-teams/), and [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/). Those focus on revenue storytelling, broader brand governance, or output decisions. This article is specifically about analyst briefings, where the deck has to communicate strategic clarity without drifting into either sales mode or product-demo mode.

## Start with the analyst question set, not the slide library

The most common mistake is starting from an existing launch deck.

That usually produces too much:

- too many screenshots
- too much product detail
- too much background history
- too many proof slides with weak strategic relevance

An analyst briefing should usually answer a tighter set of questions:

- What market or workflow shift is worth paying attention to?
- What does the company believe that others are missing?
- What changed in the product or category since the last briefing?
- Where is the company focused next?
- What evidence or customer behavior supports that story?

That question set becomes the deck skeleton.

When product marketing gets this right early, the deck stops feeling like a trimmed-down sales asset and starts feeling like an actual briefing.

## Build the deck in layers: thesis, evidence, detail

I like analyst briefings when they are designed in three layers.

### Layer one: thesis

These slides explain the point of view:

- what workflow is changing
- what pressure teams are feeling
- what design or product bottleneck is becoming more important

### Layer two: evidence

These slides support the thesis:

- product examples
- customer patterns
- adoption signals
- category comparisons

### Layer three: optional detail

These are not the main narrative, but they help in live discussion:

- supporting examples
- extra screenshots
- backup slides for nuanced questions

That structure matters because analyst briefings often move non-linearly. The main story should stand on its own, while the detail exists without bloating the visible deck.

## Keep screenshots selective and high-signal

Product marketing teams often over-invest in showing every feature surface.

Analysts usually do not need that many slides.

They need enough product evidence to understand:

- what kind of workflow is being solved
- how the product feels different in practice
- whether the company understands the operational problem deeply

That means the best screenshots are usually the ones that reveal:

- workflow compression
- system-level design thinking
- reduced tool switching
- clearer handoff or production outcomes

If the deck is screenshot-heavy just because the product team wants everything represented, the message gets weaker.

This is one area where working in Figma helps. You can design screenshots, supporting callouts, and simple comparative layouts as one system before export decisions muddy the story.

## Decide the live-versus-follow-up split before rehearsal

Analyst briefings often need two versions even when the design starts from one source.

The live version can assume context from the presenter. The follow-up version usually cannot.

That means the team should decide early:

- which slides are discussion prompts
- which slides need more standalone explanation
- whether the follow-up will be a PDF, PowerPoint, or hosted link
- whether speaker notes carry useful nuance or internal-only reminders

For example, a live slide might show:

- a workflow problem
- one product example
- one supporting proof point

The follow-up version might need a slightly fuller annotation or backup appendix to make sense outside the room.

If you postpone that choice until after the briefing, the team usually sends the wrong artifact and then spends another round rebuilding it.

## Use speaker notes for context analysts should hear, not read

Speaker notes are especially useful in analyst briefings because not every nuance belongs on-slide.

Good note content includes:

- where a claim needs careful framing
- which roadmap caveats should be spoken rather than published
- the transition between market framing and product evidence
- short reminders about terminology or competitor references

Bad note content:

- whole paragraphs that should have been simplified
- dense product explanations the deck should not depend on
- internal-only details that might get copied thoughtlessly into follow-up files

Pitchdeck is helpful here because the notes stay close to the presentation source instead of drifting into separate prep documents.

## Treat version control as message control

Analyst decks tend to fork quietly.

One product marketer updates the headline framing. Someone from leadership wants a new company-intro slide. A PM adds a roadmap screenshot. Another stakeholder edits a PowerPoint export directly. Two weeks later, no one is fully certain which wording represents the current company view.

That is why the workflow needs one explicit source in Figma and deliberate exports afterward.

Useful naming:

- `analyst-briefing_master-q2`
- `analyst-briefing_live-2026-06-22`
- `analyst-briefing_followup-pdf`
- `analyst-briefing_backup-slides`

If the deck becomes a recurring program, that naming discipline matters as much as the design itself.

## Rehearse for interruption, not only for sequence

Analyst briefings are conversational.

That means rehearsal should test more than slide order.

Check:

- whether the first three slides establish the thesis quickly
- whether the narrative still holds if questions arrive early
- whether backup detail is easy to reach
- whether screenshots are understandable without over-explaining them
- whether the chosen export format fits the actual meeting environment

This is one reason a hosted web presentation or well-prepared live deck can be more useful than blindly defaulting to PowerPoint. The best format is the one that supports the briefing style without forcing late conversion chaos.

## A practical production rhythm

For product marketing teams, this tends to work well:

1. Define the analyst question set before touching the slide library.
2. Build a deck around thesis, evidence, and optional detail.
3. Keep screenshots selective and tied to the category story.
4. Decide the live and follow-up artifact paths early.
5. Rehearse for discussion flow, not just presentation order.
6. Export intentionally from one maintained Figma source.

## Why this workflow is worth standardizing

Analyst briefings are high-leverage moments. They shape how the market story gets repeated later in research notes, buyer conversations, and category framing.

That is exactly why cloned deck chaos is so costly here. [Pitchdeck](/pitchdeck/) helps product marketing teams keep the source presentation in Figma, protect message consistency, and still hand people the output format they need afterward. The win is not only faster export. It is keeping the company's point of view sharper while the deck evolves.

---

---
type: article
title: Dashboard QA Workflow from Figma
description: Compare live dashboards against Figma designs so tables, cards, charts, filters, and sticky controls stay readable when dense product surfaces ship.
datePublished: 2026-06-22T00:00:00.000Z
dateModified: 2026-06-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-dashboard-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-dashboard-qa-workflow-from-figma.md
---

# Dashboard QA Workflow from Figma

Dashboards are where visual drift hides in plain sight.

A landing page bug is often obvious. A dashboard bug can be functionally correct while still feeling noticeably worse than the design. The table rows are tighter than intended. The chart legend wraps awkwardly. A sticky filter bar pushes key data below the fold. The empty state looks fine in isolation but breaks the rhythm of the whole screen when real cards load around it.

That is why data-dense product surfaces need a different QA workflow from simpler marketing pages.

[Pixelay](/pixelay/) is a strong fit here because the product page already supports comparing Figma designs against live sites, staging environments, localhost builds, and other real URLs directly in the browser. For dashboards, the value is not only spotting one-off misalignment. It is being able to review dense interfaces where the interaction between cards, tables, charts, filters, and real data makes visual quality much harder to judge from screenshots alone.

This article is intentionally different from nearby Pixelay pieces like [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/), [Preview Environment Design QA Workflow for Frontend Teams](/articles/pixelay-preview-environment-design-qa-workflow-for-frontend-teams/), and [White-Label Product QA Workflow from Figma](/articles/pixelay-white-label-product-qa-workflow-from-figma/). Those cover broader logged-in reviews, branch previews, or multi-brand product surfaces. This one is specifically about dashboard-style interfaces, where density and scannability are the main QA risks.

## Dashboard QA should optimize for scan rhythm, not just pixel overlap

People do not read dashboards the same way they read landing pages.

They scan:

- headline metrics
- filter states
- chart relationships
- table anomalies
- empty or warning states

That means a dashboard can be technically aligned and still feel wrong because the rhythm is off.

Typical problems:

- cards crowd each other under real data
- number formatting changes the visual hierarchy
- filter chips wrap in ways the design never modeled
- sticky toolbars steal more vertical space than expected
- column widths shift enough to damage scanability

This is why dashboard QA needs to evaluate the information structure as rendered, not only the pixel geometry.

## Stabilize the data state before comparing

Dense product surfaces are only reviewable when the underlying data state is predictable enough to trust.

Before opening Pixelay, define:

- which account or seed data set to use
- which filter state should be active
- whether empty, partial, or loaded states are being reviewed
- which breakpoint matters first

Without that setup, teams end up comparing the design against accidental noise:

- unusually long labels
- missing data cards
- environment-specific banners
- seeded charts that do not match the intended state

The goal is not to make the dashboard artificial. It is to make the comparison meaningful.

## Compare one state at a time

Dashboard screens often include too many states to review casually in one pass.

Break them into slices such as:

- default loaded state
- filtered state
- empty or no-results state
- warning or error state
- table with long-row content
- mobile or tablet collapse state

That gives each review pass a clear job.

For example, a loaded-state review may focus on:

- card spacing
- hierarchy of key metrics
- chart and legend rhythm
- table header behavior

An empty-state review may focus on:

- instruction clarity
- CTA prominence
- whether surrounding chrome overwhelms the missing-content state

This is one reason dashboards are easy to under-review. The visual problems are different in each state even when the route is the same.

## Prioritize vertical space and fold pressure

Dashboard drift often shows up in height rather than width.

Common culprits:

- sticky headers growing after implementation
- filter rows wrapping unexpectedly
- banner alerts pushing metrics below the first useful viewport
- chart titles and helper text creating extra stacked height

That matters because dashboards usually have an implied first scan path. Users expect to see the most important metrics or decisions without digging.

When the implemented screen burns too much vertical space on chrome, the dashboard feels slower and noisier even if every component technically exists.

Pixelay is especially helpful here because the live comparison reveals how much of the real screen is consumed before the actual data begins.

## Review tables and charts as reading tools

This is the part screenshot review often misses.

A table is not just a block of aligned cells. It is a reading tool.

Ask:

- Are row heights consistent enough to scan quickly?
- Do sticky columns or headers feel anchored correctly?
- Does the density match the intent in the Figma design?
- Are key values still visually dominant after real content loads?

For charts:

- Are axis labels crowding the chart area?
- Does legend wrapping weaken comparison?
- Are helper labels now competing with the data itself?
- Does the chart still feel like the intended focal point?

These are product-quality issues, not merely visual niceties. A dashboard that becomes harder to read under real data is functionally worse, even if no one file a bug about spacing.

## Use Pixelay before dashboard bugs turn into vague feedback

Dashboard review gets expensive when the bug report sounds like:

- "The analytics page feels cramped"
- "The filters seem kind of messy"
- "The table is harder to read than the mock"

Those comments are directionally true but hard to fix quickly.

Pixelay improves the conversation by turning that vagueness into visible comparison:

- the sticky filter bar is 24px taller than designed
- the KPI cards lose hierarchy because secondary labels wrap
- the chart legend pushes the plot lower than intended
- the table row spacing is too dense once badges and helper text render together

That evidence makes dashboard QA calmer and much easier to act on.

## A practical dashboard review loop

For frontend and product teams, this sequence works well:

1. Choose a stable account or seeded data state.
2. Match each dashboard state to the right Figma frame.
3. Review loaded, filtered, and empty states separately.
4. Focus first on fold pressure, scan rhythm, and density.
5. Capture findings with state and viewport explicitly named.

If the dashboard sits behind auth or complex environment setup, [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/) is the best companion process. The main difference here is that dashboard QA should lean much harder on density and readability.

## Final checklist for dashboard signoff

Before shipping, confirm:

- data state and filter state were stabilized for review
- loaded and empty states were both checked
- card and metric hierarchy still match the Figma intent
- tables remain scannable with real content
- charts keep their focal role under implemented labels and legends
- sticky controls are not consuming too much of the viewport
- findings are tied to exact states and breakpoints

## Why this workflow pays off

Dashboard issues rarely trigger dramatic launch failures.

They do something more subtle: they make the product feel heavier, less clear, and less trustworthy over time. [Pixelay](/pixelay/) helps teams catch that drift by comparing the real dashboard to the approved design while the implementation is still easy to improve. When dense product surfaces get their own QA rhythm, the shipped interface feels much closer to what the design was trying to accomplish in the first place.

---

---
type: article
title: Logo Strip Optimization Workflow for SaaS Landing Pages
description: Export customer logo strips from Figma with cleaner sharpness, lighter file sizes, and fewer mobile layout problems on SaaS landing pages.
datePublished: 2026-06-22T00:00:00.000Z
dateModified: 2026-06-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-logo-strip-optimization-workflow-for-saas-landing-pages/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-logo-strip-optimization-workflow-for-saas-landing-pages.md
---

# Logo Strip Optimization Workflow for SaaS Landing Pages

Logo strips look simple right up until they go live.

The page is otherwise polished, but the customer logos feel soft on retina screens, the row turns gray and muddy on mobile, or the proof section becomes heavier than it should be for a piece of UI most visitors only scan for a second.

That happens because teams often treat logo rows like decorative filler. They export one image quickly, drop it into the page, and move on.

For SaaS landing pages, that is usually the wrong workflow.

[TinyImage](/tinyimage/) is a strong fit here because the product page already supports compressed JPG, PNG, SVG, WebP, AVIF, GIF, MP4, and PDF export directly from Figma. For logo strips, the real value is not just smaller files. It is being able to standardize one export pass for proof sections that need to look crisp, neutral, and trustworthy without sending the asset through a second cleanup tool afterward.

This article is intentionally narrower than nearby TinyImage pieces like [Hero Image Optimization Workflow for Landing Pages](/articles/tinyimage-hero-image-optimization-workflow-for-landing-pages/), [CMS Image Publishing Workflow from Figma](/articles/tinyimage-cms-image-publishing-workflow-from-figma/), and [Webflow Image Optimization Workflow from Figma](/articles/tinyimage-webflow-image-optimization-workflow-from-figma/). Those cover broader page imagery, CMS publishing, or site-wide asset handling. This one is specifically about social-proof logo rows, where clarity, neutrality, and lightweight delivery matter more than visual drama.

## A logo strip has a different job from a hero image

A hero image has to persuade.

A logo strip usually has to reassure.

That changes the export priorities.

The logo row is there to answer a quiet question in the visitor's head:

- Are credible companies already using this?
- Does this product feel established?
- Is there enough social proof here to keep reading?

The strip fails when the logos are:

- too small to recognize
- inconsistent in contrast
- compressed into mush
- visually louder than the rest of the proof section
- so heavy that they slow down the page for almost no narrative gain

That is why logo-strip workflow should optimize for recognition and restraint, not for maximum visual detail.

## Decide whether the row should stay vector or become raster

This is the first real decision.

Many logo-strip problems come from choosing the export format by habit instead of by structure.

If the strip is made of clean vector logos with no texture, gradients, or photographic treatment, SVG is often the best default because it stays sharp across screen densities and usually weighs less than a large raster image.

If the strip includes:

- textured brand marks
- screenshots embedded inside logo tiles
- non-vector effects
- shadows or background treatments

then PNG or WebP may be more realistic.

The important part is being explicit.

Do not export a raster strip just because it feels familiar if the whole row could have stayed vector. And do not force SVG if the proof block now includes treatment that will make the output brittle.

If your team is still deciding between static image formats in general, [SVG vs PNG vs WebP for Figma Exports](/articles/tinyimage-svg-vs-png-vs-webp-for-figma-exports/) is the best companion read.

## Normalize the logos before you export them

Visitors will forgive imperfect logos less than teams expect.

Not because they inspect them closely, but because messy logo rows make the whole page feel less curated. One mark looks too dark. Another is vertically off-center. A third is wider than the rest and dominates the row. The section starts feeling accidental instead of credible.

Before export, normalize:

- visual height, not just bounding-box height
- padding inside each logo cell
- grayscale or reduced-contrast treatment if the page uses a quieter proof style
- background behavior for dark, light, or tinted sections
- whether marks should appear as isolated logos or inside consistent tiles

This is also where the team should decide whether every logo really belongs in the same strip. If one customer mark is highly detailed or colorful while the rest are simple wordmarks, that brand may need its own treatment or a separate proof block.

## Test the row at scan speed, not zoomed-in designer speed

Logo strips are rarely consumed one logo at a time.

They are scanned.

That means the correct review questions are:

- Can someone recognize at least a few logos immediately?
- Does the section feel balanced from left to right?
- Does one mark overpower the rest?
- Does the row still feel intentional on mobile?

Designers often review this asset too close. At high zoom, small sharpness issues feel dramatic. On the live page, the bigger issue is usually hierarchy.

If the strip is below the fold or tucked between testimonial cards and a CTA, it needs to stay legible at the exact rendered size where visitors will skim it. That rendered-size review matters more than pixel-peeping the original export.

## Plan for mobile collapse before compression

Most proof rows break on mobile because the layout logic was never decided.

A six-logo desktop strip might become:

- a two-row mobile stack
- a horizontally scrollable band
- a tighter centered grid
- a reduced subset of the strongest logos

Each option changes the export job.

If the mobile layout needs fewer logos per row, the original strip may not be the right final asset. If the site collapses the row into small stacked tiles, each logo needs more breathing room than the desktop strip suggested. If the section scrolls horizontally, the logos may need slightly stronger contrast to stay identifiable while people swipe quickly.

This is why the workflow should answer the mobile arrangement first. Compression is easier once the live shape of the section is clear.

## Use TinyImage for proof-specific export presets

A practical TinyImage workflow here is to treat logo strips as their own asset family instead of lumping them in with screenshots or hero graphics.

That means setting a predictable export approach for:

- SVG-first logo rows
- lightweight PNG or WebP rows when raster is required
- dark-background proof sections
- high-density displays where softness is especially obvious

Useful names:

- `homepage-customer-logos.svg`
- `product-proof-strip-dark.webp`
- `case-study-logo-row-mobile.png`
- `enterprise-proof-logos-light.svg`

This matters because proof sections tend to get reused across:

- homepage variants
- pricing pages
- feature landing pages
- partner pages
- sales one-pagers

Once the export logic is stable, the team stops rediscovering the same softness and file-size issues on every page.

## Review the logos as a trust element, not just an image

A logo strip is one of those assets where "technically correct" is not enough.

The question is whether the row makes the product feel more credible.

Look for:

- logos that fade too far into the background
- overly compressed edges on thin letterforms
- inconsistent baseline rhythm
- excessive whitespace that makes the strip feel sparse
- a row that visually competes with nearby testimonials or proof stats

If the proof block feels timid or messy, visitors will not articulate why. They will just feel slightly less convinced.

## A simple final checklist

Before shipping the page, confirm:

- the strip format matches the logo structure
- vector rows stayed vector where possible
- raster rows were reviewed at real rendered size
- desktop and mobile versions both feel balanced
- the logos are recognizable without overpowering the page
- the file weight is reasonable for a secondary proof asset
- the live implementation was checked once in the browser

## The real win

Logo strips should be one of the easiest trust sections on the page.

They become annoying only when the team treats them like an afterthought and ends up re-exporting them every time the page changes. [TinyImage](/tinyimage/) makes it easier to keep that export work inside Figma, give the proof row its own lightweight standard, and ship social proof that looks deliberate instead of improvised.

---

---
type: article
title: Rich Media Banner QA Checklist Before Trafficking
description: QA video and Lottie-heavy HTML5 banner exports before trafficking so rich media units stay readable, compliant, and easier for ad ops to launch.
datePublished: 2026-06-21T00:00:00.000Z
dateModified: 2026-06-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-rich-media-banner-qa-checklist-before-trafficking/
markdownUrl: https://www.hypermatic.com/articles/bannerify-rich-media-banner-qa-checklist-before-trafficking.md
---

# Rich Media Banner QA Checklist Before Trafficking

Rich media banners often get approved too early.

The animation looks polished. The preview feels impressive. The team assumes the hard part is over.

Then ad ops opens the exported files and the real risks show up:

- the first frame is too vague
- the call to action fights the motion
- the fallback does not communicate enough on its own
- one size works while another becomes hard to read
- the placement needs a cleaner handoff than the creative review ever considered

That is why rich media needs its own QA checklist instead of riding on the same review pass as a simple animated banner.

[Bannerify](/bannerify/) is a good fit for this workflow because it supports HTML, GIF, MP4, WebM, preview links, video, and Lottie-driven banner production directly from Figma. For trafficking teams, the real value is being able to review the moving creative before it becomes a late-stage launch problem.

This article is intentionally different from nearby Bannerify content like [Display Ad QA Checklist Before Launch](/articles/bannerify-display-ad-qa-checklist-before-launch/), [Rich Media Banner Workflow with Video and Lottie](/articles/bannerify-rich-media-banner-workflow-with-video-and-lottie/), and [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/). Those cover broad QA, creative planning, or final handoff. This one is specifically about the QA pass rich media units need before trafficking, when motion, fallback behavior, and readability have to survive real delivery constraints.

## Rich media units create a second QA layer

A standard HTML5 banner already needs checks for:

- size
- timing
- file weight
- click behavior
- legibility

Rich media adds another layer:

- does the motion help the message or bury it?
- does the first frame stand on its own?
- does the richer media element loop gracefully?
- does the CTA stay visible while the banner is moving?
- can ad ops explain what they are trafficking without reverse-engineering the creative?

This is why rich media should never skip straight from creative approval to launch packaging.

## Check the first frame before admiring the full animation

One of the most common rich-media problems is that the banner only makes sense after the motion finishes.

That is too late.

The first frame should already make the unit feel intentional:

- the offer or message is recognizable
- the brand is present
- the CTA zone is understandable
- the viewer is not waiting for the banner to explain itself

This matters even more when the campaign also needs simpler companion formats. If the opening frame is weak, the fallback or static representation usually becomes weak too.

## Review the fallback as its own deliverable

Rich media teams sometimes talk about fallback like it is a formality.

It is not.

The fallback may be the only version some reviewers or placements actually inspect first. Treat it like a real creative output:

- does it communicate the core offer?
- does it preserve the most important frame of the story?
- is the CTA still obvious?
- does the visual hierarchy still make sense without motion?

If the banner uses video or Lottie, the fallback should not feel like an accidental freeze-frame. It should look like a deliberate companion asset.

If your team is still defining why the richer media is there in the first place, read [Rich Media Banner Workflow with Video and Lottie](/articles/bannerify-rich-media-banner-workflow-with-video-and-lottie/) before running this checklist.

## QA motion with sound off and patience off

Banner viewers do not give a rich media unit the same attention they would give a product video.

That means the QA pass should assume:

- sound is absent
- attention is short
- the message has to land quickly

Check:

- whether the headline is readable while the motion plays
- whether the motion steals attention from the CTA
- whether any loop feels awkward or distracting
- whether the unit still makes sense on the first glance

The question is not "is the animation cool?" It is "does the banner still communicate under ad-viewing conditions?"

## Review every size as its own communication problem

Rich media rarely scales down gracefully by default.

The same video, Lottie, or layered motion treatment can behave very differently across sizes:

- a wide placement may feel spacious
- a compact unit may feel overloaded
- a headline that fits one size may dominate another
- the CTA may hold its position in one slot and get lost in another

Do not assume that if the hero size works, the rest of the set is safe.

Check each exported size for:

- message clarity
- CTA prominence
- motion balance
- fallback quality

If the campaign includes many variants, [Banner Variant Review Workflow for Campaign Teams](/articles/bannerify-banner-variant-review-workflow-for-campaign-teams/) is a useful adjacent process.

## Use preview links before the trafficking handoff

Static signoff is especially risky for rich media.

Stakeholders and ad ops should review a moving preview when possible, not just storyboard frames or exported ZIP names.

This is where Bannerify preview workflows earn their keep. A live preview helps the team catch:

- awkward loops
- timing that hides the CTA
- motion that looks heavier than intended
- units that technically work but feel unclear

If your approval path still depends heavily on static review, [Banner Preview Link Workflow for Approvals](/articles/bannerify-banner-preview-link-workflow-for-approvals/) is the best supporting article.

## Turn QA into trafficking-ready notes

Rich media QA is most useful when it leaves ad ops with something actionable, not just a thumbs-up.

Before the handoff, capture:

- which files are approved per size
- which version is the fallback companion
- what behavior should be expected in preview
- any specific placement notes the trafficker should know

The goal is not to dump more documentation on the team. It is to stop trafficking from becoming a guessing game around similarly named rich media exports.

## A practical rich-media QA checklist

Before trafficking, confirm:

- the first frame communicates without needing the full animation
- the fallback works as a real banner, not just a frozen artifact
- the CTA stays legible and prominent during motion
- loops feel intentional rather than distracting
- every required size was reviewed independently
- preview links or moving exports were checked before handoff
- ad ops received clear file-level approval notes

## Where Bannerify helps most

[Bannerify](/bannerify/) is valuable here because rich media creative gets harder precisely where normal banner workflows start to break down:

- more motion
- more format decisions
- more review ambiguity
- more launch risk

Keeping the creative, preview, and export path inside a Figma-based workflow makes the QA much more concrete. Instead of discovering rich-media problems after trafficking has already begun, teams can catch them while the banner is still easy to improve.

That is the practical win. Rich media should feel deliberate, not fragile. Bannerify makes it much easier to reach that point before the files leave the creative team.

---

---
type: article
title: Illustrator Icon Library Migration Workflow to Figma
description: Move legacy Illustrator icon sets into Figma with a workflow that protects editability, naming, and component readiness instead of importing a messy vector archive.
datePublished: 2026-06-21T00:00:00.000Z
dateModified: 2026-06-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-illustrator-icon-library-migration-workflow-to-figma/
markdownUrl: https://www.hypermatic.com/articles/convertify-illustrator-icon-library-migration-workflow-to-figma.md
---

# Illustrator Icon Library Migration Workflow to Figma

Illustrator icon libraries are one of the easiest legacy assets to underestimate.

At first glance they seem simple: a set of vectors, probably already polished, probably easy to import. Then the migration starts and the real problems show up:

- naming is inconsistent
- artboards are mixed sizes
- strokes behave differently than expected
- old labels sit inside the file as outlined text
- the team needs editable Figma icons, not a frozen archive

That is why icon-library migration deserves its own workflow instead of living inside a generic "import the AI file" step.

[Convertify](/convertify/) is a strong fit because it can import Illustrator files into Figma directly, which saves teams from manually rebuilding the icon library one symbol at a time. The practical win is not just speed. It is getting the source artwork into Figma fast enough that the team can spend its time on real cleanup and governance instead of raw re-drawing.

This article is intentionally different from nearby Convertify content like [Illustrator to Figma File Preparation Checklist](/articles/convertify-illustrator-to-figma-file-preparation-checklist/), [Figma Import Cleanup Checklist](/articles/convertify-figma-import-cleanup-checklist/), and the tutorial on [importing Adobe Illustrator files to Figma with one click using Convertify](/tutorials/how-to-import-adobe-illustrator-files-to-figma-with-one-click-using-convertify/). Those are about preparation, broad cleanup, or the mechanics of import. This one is specifically about icon libraries, where editability, naming, size consistency, and component readiness matter more than a one-time visual conversion.

## Icon libraries fail differently than posters or layouts

A migrated poster can survive as a mostly visual file.

An icon library usually cannot.

The receiving team needs the icons to work as design-system assets:

- easy to find
- sized consistently
- editable when needed
- visually consistent at small sizes
- ready to turn into Figma components or component sets

That means the migration should be judged less by "did the file open?" and more by "can the design team actually maintain this library after import?"

## Audit the source library before the first import

Before opening Convertify, inspect the Illustrator source with an icon-library mindset.

Look for:

- whether icons live on separate artboards or in one large canvas
- whether naming is attached to the assets in a reusable way
- whether multiple icon sizes or styles are mixed together
- whether strokes, fills, masks, or effects vary unexpectedly
- whether old documentation labels or notes are embedded in the artwork

This is where teams discover if they are importing:

- a true library
- a marketing asset pack
- a half-organized archive

Those are very different migration jobs.

If the library includes many linked files, unusual masking, or decorative effects, read [Illustrator to Figma File Preparation Checklist](/articles/convertify-illustrator-to-figma-file-preparation-checklist/) first. But for icons specifically, the highest-value audit questions are around consistency and future maintainability.

## For icon libraries, vector editability usually matters more than visual convenience

The Convertify Illustrator tutorial shows an important choice: importing as a bitmap layer or importing artboards as vector layers.

For icons, the answer is usually clear.

Choose the path that preserves vector editability whenever the team expects to:

- recolor icons
- resize them across product surfaces
- normalize stroke weights
- merge the assets into a design system

Bitmap imports can still be useful for quick reference or archival review. They are usually the wrong destination for an icon library the product team intends to keep using.

That does not mean every part of the imported file will be perfect. It does mean the team keeps the most important asset characteristic alive: editable vector structure.

## Clean the structure before turning anything into components

One common mistake is converting imported icons into components too early.

The better workflow is:

1. import the source file
2. inspect what arrived
3. normalize the structure
4. only then turn approved icons into reusable components

Important cleanup work often includes:

- removing leftover labels or background shapes
- confirming each icon sits in a consistent frame
- separating filled and stroked styles when they should not mix
- fixing naming so search and reuse will make sense later
- checking whether overly complex groups can be simplified

This is also the moment to decide whether the Figma library should preserve the original Illustrator taxonomy or adopt a new naming system that better matches the current product and design-system conventions.

## Review icons at the sizes they will actually ship

An icon set can look excellent at 400 percent zoom and still fail in the UI.

After import, test the icons in the contexts that matter:

- small navigation or toolbar sizes
- settings pages
- marketing comparison tables
- data-dense product surfaces
- light and dark backgrounds when relevant

Watch for:

- uneven optical weight
- corners or strokes that feel inconsistent
- tiny detail that disappears at real size
- imported complexity that slows down edits without improving clarity

This is where migration decisions become product decisions. Sometimes the imported icon is technically accurate to the Illustrator source but still wants simplification before it becomes a durable Figma asset.

## Create a migration lane for exceptions

No Illustrator icon library arrives perfectly.

Some assets will import cleanly and move straight into Figma components. Others will need manual work because:

- the paths are too complex
- the original naming is broken
- outlined labels came along for the ride
- compound shapes no longer feel easy to edit
- old icons should be retired instead of preserved

The team should explicitly separate:

- approved icons ready for componentization
- icons that need cleanup
- icons that should stay as archive reference only

That prevents the new Figma library from inheriting every piece of legacy clutter by default.

## A practical Convertify workflow for icon migration

For most design teams, this sequence works well:

1. audit the Illustrator icon source for structure, style consistency, and naming quality
2. import the library into Figma with editability as the default goal
3. normalize frame size, grouping, and naming before creating components
4. review icons at real UI sizes, not only at zoom
5. separate production-ready icons from assets that still need manual cleanup
6. publish or hand off only the cleaned Figma-ready set

If you still need the underlying import steps, the tutorial on [importing Adobe Illustrator files to Figma with one click using Convertify](/tutorials/how-to-import-adobe-illustrator-files-to-figma-with-one-click-using-convertify/) is the best procedural companion.

## Before the library is considered migrated, confirm

- the import path preserved vector editability where it mattered
- icon names are usable for search and handoff
- the frame system is consistent enough for component creation
- small-size readability was checked in realistic UI contexts
- archive-only assets are not mixed into the production library by accident

## Where Convertify helps most

[Convertify](/convertify/) is valuable here because legacy icon libraries often get stuck in an awkward middle state: too important to abandon, too tedious to rebuild manually, and too messy to move over casually.

Convertify removes the slowest part of the job by getting the Illustrator source into Figma quickly. The team can then spend its attention on the work that actually matters:

- deciding what stays editable
- normalizing the library
- preparing assets for design-system reuse

That is the real migration win. A successful icon-library import is not just a file conversion. It is a handoff from legacy vectors to a Figma library the team can actually live with.

---

---
type: article
title: Cancellation Flow Copy Review Workflow in Figma
description: Review cancellation, downgrade, save-offer, and final-confirmation copy together in Figma so retention flows stay clear without becoming manipulative or inconsistent.
datePublished: 2026-06-21T00:00:00.000Z
dateModified: 2026-06-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-cancellation-flow-copy-review-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-cancellation-flow-copy-review-workflow-in-figma.md
---

# Cancellation Flow Copy Review Workflow in Figma

Cancellation flows are where product language gets tested hardest.

The words have to do several jobs at once:

- explain consequences honestly
- protect trust
- present save offers clearly
- stay aligned with billing behavior
- avoid turning a sensitive moment into a confusing one

That is why cancellation copy drifts so easily. One team owns the settings page. Another owns the downgrade modal. Support writes the help article. Lifecycle owns the follow-up email. Growth tweaks the save offer. By the time the flow ships, the language can feel defensive, vague, or just inconsistent.

[CopyDoc](/copydoc/) is especially useful for this kind of work because it helps teams export, review, update, and re-import Figma text systematically instead of auditing each modal, screen, and message by hand.

This article is intentionally different from nearby CopyDoc content like [Pricing and Billing Copy Review Workflow in Figma](/articles/copydoc-pricing-and-billing-copy-review-workflow-in-figma/), [Signup Flow Copy QA Workflow in Figma](/articles/copydoc-signup-flow-copy-qa-workflow-in-figma/), and [Settings and Permissions Copy Review Workflow in Figma](/articles/copydoc-settings-and-permissions-copy-review-workflow-in-figma/). Those cover buying, joining, or governing access. This one is about leaving, pausing, downgrading, or canceling, where tone and consequence clarity matter more than almost anywhere else in a subscription product.

## A cancellation flow is not one modal

That is the first mistake to correct.

The visible "Cancel subscription" screen is usually only one moment in the flow.

The real copy system often includes:

- settings-page entry point
- downgrade or pause options
- save-offer screen
- confirmation modal
- consequence summary
- survey or reason capture
- final success state
- follow-up email or account message

If those surfaces are reviewed separately, the user experiences several different voices during one sensitive decision.

That is a trust problem, not just a writing problem.

## Inventory the flow by user question

The cleanest review starts by mapping the cancellation journey around what the user wants to know:

- what happens if I continue?
- when does access change?
- can I pause or downgrade instead?
- what happens to my data, seats, or billing state?
- can I come back later?

That inventory is more useful than grouping screens only by UI location because it exposes where the copy is not answering the user's next obvious question.

For example:

- the settings page may sound simple, but the confirmation modal may introduce surprise consequences
- the save offer may use different pricing language than the billing page
- the success state may imply an immediate cancel when the product actually behaves differently

Those gaps are hard to spot when the copy is reviewed screen by screen.

## Separate clarity from persuasion

Cancellation copy gets messy when teams try to persuade before they explain.

The user first needs clear information:

- what choice they are making
- what changes immediately
- what changes later
- what alternatives exist

Only after that should the flow present:

- pause options
- downgraded plans
- temporary discounts
- support routes

When the persuasion layer shows up too early, the experience starts feeling manipulative. When it shows up too late or too vaguely, the team misses legitimate retention opportunities.

The right sequence is:

1. explain the state clearly
2. present realistic alternatives honestly
3. confirm the user's actual choice in plain language

## Review save offers and billing language in the same pass

Many products treat save-offer copy like a growth experiment and billing copy like an operations concern.

In practice, users see both as one flow.

That means the cancellation review should compare:

- plan names
- downgrade wording
- pause language
- renewal or end-date explanations
- discount or trial references
- confirmation text

If the save offer uses different packaging language than the pricing or billing surfaces, the flow feels slippery fast.

That is why [Pricing and Billing Copy Review Workflow in Figma](/articles/copydoc-pricing-and-billing-copy-review-workflow-in-figma/) is the most useful companion article for this topic. Cancellation is where packaging and trust collide.

## Pull support and lifecycle messages into the same review surface

One subtle problem is that the product flow may be corrected while the follow-up messages stay outdated.

That creates mismatches like:

- the success state says one thing, the email says another
- the help article uses different terminology for pause or downgrade
- the support macro explains a different outcome than the confirmation screen

CopyDoc is useful here because exported text can be reviewed as one language set before being pushed back into the Figma source. The goal is not to turn every support or lifecycle artifact into a design file. It is to make sure the user does not hear three different explanations of the same cancellation outcome.

If the help-center and UI language often drift, [Help Center and UI Copy Alignment Workflow in Figma](/articles/copydoc-help-center-and-ui-copy-alignment-workflow-in-figma/) is worth pairing with this process.

## Stress-test tone on the most sensitive states

Cancellation flows are where tone misfires become expensive.

Review the copy in the moments where users are most likely to react emotionally:

- the first cancel click
- the save-offer pitch
- the consequence summary
- the final confirmation
- the "you are canceled" state

Questions worth asking:

- does the language sound defensive?
- does it hide the actual consequence?
- does it guilt the user instead of helping them decide?
- does it explain alternatives without sounding evasive?
- would support be comfortable defending this wording directly?

This is one of the few product-copy workflows where emotional tone and operational accuracy matter equally.

## Bring layout constraints back into the review after approval

Cancellation copy often sits in compact, high-pressure UI:

- settings rows
- stacked modal bodies
- save-offer cards
- radio-button lists
- confirmation summaries

That means approved wording can still create product problems when:

- alternatives become too wordy
- the consequence summary turns into a wall of text
- buttons lose clarity when shortened
- mobile stacking makes the "best" alternative look accidental

The copy review is not finished until the approved text is checked back in the real Figma layouts.

## A practical cancellation-flow review routine

For most SaaS teams, this process is enough:

1. inventory every cancellation-related surface across product, lifecycle, and support-adjacent states
2. group the copy by user question, not only by screen
3. align the explanation layer before tuning persuasion or save offers
4. review billing, downgrade, and pause language in the same pass
5. re-import the approved text into Figma
6. confirm the final layouts still communicate clearly on desktop and mobile

That is much safer than letting separate teams refine tiny pieces of the flow independently.

## Before the flow is considered copy-safe, confirm

- the team reviewed the whole cancellation journey, not one modal
- consequence language is clearer than the persuasion layer
- downgrade, pause, and billing terms match the rest of the product
- follow-up states do not contradict the in-product flow
- final approved wording still fits the real layouts

## Where CopyDoc helps most

[CopyDoc](/copydoc/) is valuable here because cancellation quality depends on coordination more than clever phrasing.

The words are scattered, sensitive, and easy to update inconsistently. CopyDoc gives product, growth, billing, support, and content teams a cleaner way to review the entire flow as one language system.

That is the practical outcome to aim for. A user may still cancel, pause, or downgrade. The flow should make that decision feel clear and respectful, not confusing or adversarial. CopyDoc makes it much easier to keep the whole experience aligned before that sensitive moment reaches production.

---

---
type: article
title: Event Email Workflow for Field Marketing Teams
description: Plan invitation, confirmation, reminder, and follow-up emails in Figma so event campaigns stay coherent from first RSVP to post-event follow-up.
datePublished: 2026-06-21T00:00:00.000Z
dateModified: 2026-06-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-event-email-workflow-for-field-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-event-email-workflow-for-field-marketing-teams.md
---

# Event Email Workflow for Field Marketing Teams

Event email campaigns look lighter than they really are.

The first send may be a simple invitation. Then the workflow expands:

- registration confirmation
- calendar and logistics reminders
- last-minute agenda changes
- venue details or join links
- follow-up emails after the event

What makes field-marketing email work hard is not just the number of sends. It is that each email has a different practical job while still needing to feel like one campaign.

[Emailify](/emailify/) is useful here because it keeps design, responsive review, preview, and HTML export close to the Figma source. For event teams, that matters a lot. Field marketing campaigns often move quickly, pick up late operational details, and need production-ready HTML without rebuilding every send inside a separate email builder.

This article is intentionally different from nearby Emailify content like [Webinar Email Sequence Workflow for Product Marketing Teams](/articles/emailify-webinar-email-sequence-workflow-for-product-marketing-teams/), [Product Launch Email Workflow in Figma](/articles/emailify-product-launch-email-workflow-in-figma/), and [Weekly Merchandising Email Workflow for Ecommerce Teams](/articles/emailify-weekly-merchandising-email-workflow-for-ecommerce-teams/). Those cover webinars, launches, or recurring promotions. This one is about field-marketing events, where venue logistics, timing clarity, and last-minute updates shape the production workflow just as much as the visual design does.

## Event email work is half campaign design, half operational communication

That is why event emails often become messy.

The invitation wants energy and persuasion. The reminder wants clarity. The day-before send may need parking details, arrival time, or a virtual join link. The follow-up email should feel connected to the event without repeating the whole registration pitch.

The campaign usually includes some combination of:

- invite
- confirmation
- one-week reminder
- one-day reminder
- day-of update
- post-event thank-you or replay follow-up

If those emails are designed as isolated one-offs, subscribers feel the seams immediately. The campaign starts reading like a stack of unrelated sends instead of one event journey.

## Map the event sequence before designing modules

The most useful early step is a message map.

For each send, clarify:

- what the reader needs to do next
- what new information appears here
- what details should repeat across the sequence
- what should be omitted to keep the message focused

Example:

- the invite sells relevance
- the confirmation reduces uncertainty
- the reminder restores attention
- the day-of email removes friction
- the follow-up extends the relationship after the event

This keeps teams from stuffing every email with the full agenda, every speaker bio, venue instructions, and backup information all at once.

Event campaigns feel calmer when each send has one job.

## Build a shared event-email system with controlled variation

Field marketing sequences benefit from reusable structure more than many teams expect.

Good shared modules often include:

- header treatment
- event identity block
- primary CTA style
- speaker or host section
- footer and compliance structure
- recurring logistics layout

Then vary only what actually changes:

- subject and preheader
- timing and urgency
- venue or join details
- agenda emphasis
- follow-up CTA

That balance keeps the campaign coherent without making every email feel duplicated.

If your team is still maturing the reusable layer first, [Modular Email Template Workflow in Figma](/articles/emailify-modular-email-template-workflow-in-figma/) is the nearest supporting article.

## Logistics should become clearer as the event gets closer

This is one of the biggest event-email mistakes.

The invite and the reminder often carry the same visual weight and almost the same content, even though the reader's needs have changed completely.

As the event approaches, the email should usually become:

- shorter
- easier to scan
- more specific
- more operational

The day-before or day-of send should answer practical questions fast:

- when does this start?
- what timezone matters?
- where should the reader go?
- what is the one action that matters now?

If the reminder still behaves like a broad promotional email, the campaign adds friction right when the subscriber needs clarity most.

## Review the event sequence in chronological order

Static approvals hide continuity problems.

Before export, review the campaign in the same order a subscriber will experience it:

1. invitation
2. confirmation
3. reminder
4. day-of message
5. follow-up

Ask:

- does the campaign still feel like one event?
- does urgency increase logically?
- are the practical details easier to find as the event gets closer?
- does the follow-up feel like a continuation instead of a new campaign?

This is especially useful for event teams because several stakeholders often own different sends. Chronological review catches tone and hierarchy drift that isolated reviews miss.

## Mobile review matters more for event emails than teams think

Event emails are frequently opened in situations where the reader is already moving:

- commuting
- walking into the venue
- between meetings
- checking a reminder on the phone

That means mobile scanning matters a lot.

Common event-email failures:

- the main CTA sits too low
- venue details are buried under decorative content
- agenda blocks become too long
- reminder copy becomes harder to scan than the original invitation

If mobile clarity is a recurring problem, pair this workflow with [Mobile Email QA Workflow Before Export](/articles/emailify-mobile-email-qa-workflow-before-export/).

## Do not make the email carry every event asset itself

Field marketing teams often overstuff reminder emails because they worry the subscriber will miss something important.

That usually makes the message harder to use.

A better approach is to decide which information belongs:

- in the email
- on the registration or event page
- in the follow-up flow

For example, the email may need the core time, location, and CTA, while long FAQs, maps, or supporting material can live behind a clear destination link.

That keeps the HTML email focused and easier to review, while still giving the subscriber a path to the deeper information when they need it.

If your team also sends a simpler text-first operational follow-up, [Plain Text and HTML Email Workflow for Lifecycle Teams](/articles/emailify-plain-text-and-html-email-workflow-for-lifecycle-teams/) is a good adjacent model.

## A practical event-email production rhythm

For most field-marketing teams, this sequence is enough:

1. map the full event sequence before designing the first send
2. define shared modules that create continuity across the campaign
3. assign one clear job to each email
4. review the sequence in chronological order
5. run the mobile pass before final export
6. preview and export through Emailify once the message and logistics are stable

That workflow is much more reliable than building the invitation first and improvising the rest as the event date approaches.

## Before the campaign is considered event-ready, confirm

- each send has one clear purpose
- the sequence feels visually and verbally connected
- reminder emails prioritize practical clarity over decoration
- mobile readers can find the key action fast
- detailed event assets are linked deliberately instead of stuffed into every email

## Where Emailify helps most

[Emailify](/emailify/) is valuable here because event campaigns compress a lot of production stress into a short window.

The design team needs:

- one visual system
- fast edits
- responsive review
- previewable HTML
- reliable export into the real sending workflow

Keeping that path close to Figma makes it much easier for field-marketing teams to run invitations, reminders, and follow-up as one coherent event sequence instead of a scramble of unrelated sends.

---

---
type: article
title: Sales Kickoff Deck Workflow for Revenue Enablement Teams
description: Run sales kickoff deck production in Figma so enablement, design, and leadership can update one shared system instead of rebuilding every session in PowerPoint.
datePublished: 2026-06-21T00:00:00.000Z
dateModified: 2026-06-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-sales-kickoff-deck-workflow-for-revenue-enablement-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-sales-kickoff-deck-workflow-for-revenue-enablement-teams.md
---

# Sales Kickoff Deck Workflow for Revenue Enablement Teams

Sales kickoff decks do not break because teams forget how to make slides.

They break because the event creates too many slide owners at once.

Leadership wants a keynote. Product marketing wants launch slides. Revenue operations needs current numbers. Enablement wants breakout-session materials. Regional leaders need their own variations. Then the team still has to present live, export deck files, and keep the final story looking like one event instead of twelve unrelated presentations.

That is where [Pitchdeck](/pitchdeck/) fits well. It keeps the source deck in Figma while still supporting web presentation, PowerPoint export, Google Slides export, PDF export, Keynote export, notes, media, and analytics. For kickoff planning, the real benefit is not just export flexibility. It is having one central presentation system while multiple stakeholders are editing their own parts of the event.

This article is intentionally different from nearby Pitchdeck content like [Figma Sales Deck Workflow for Revenue Teams](/articles/pitchdeck-figma-sales-deck-workflow-for-revenue-teams/), [QBR Deck Workflow for Customer Success Teams](/articles/pitchdeck-qbr-deck-workflow-for-customer-success-teams/), and [Presentation Handoff Checklist for Designers](/articles/pitchdeck-presentation-handoff-checklist-for-designers/). Those cover evergreen sales decks, recurring customer reviews, or broader handoff discipline. This one is about sales kickoff, where a time-bound internal event creates more version pressure than most normal deck workflows.

## A kickoff deck is really a deck system

The first mindset shift is simple:

A sales kickoff is not one presentation.

It is usually a system of presentations that need to feel connected:

- opening keynote
- company strategy section
- product roadmap section
- breakout tracks
- regional or role-specific sessions
- workshop decks
- closing recap

If each session owner builds their section as a standalone file, brand drift and version chaos appear fast. If everything lives in one place with no structure, the deck becomes hard to govern.

The useful middle ground is a Figma-based system with:

- shared slide patterns
- session-specific sections
- clearly owned modules
- one final presentation standard

That is why Pitchdeck works well here. It supports a centralized design source without forcing the team to stay locked inside one export format.

## Separate the master narrative from the session modules

Kickoff production gets calmer when the team distinguishes between:

### Event-wide slides

- title and opener
- strategy framing
- company narrative
- recurring visual language
- closing and CTA slides

### Session-owned slides

- product deep dives
- regional examples
- role-specific workflows
- live-demo support sections
- team-specific breakout material

This matters because only some parts of the event should be editable by many people.

If every presenter can change the opening narrative, the kickoff stops feeling unified. If nobody can adapt their session details, the content becomes too rigid to be useful.

The master deck should define the event grammar. The modules should give presenters room to adapt inside that grammar.

## Decide presentation mode before final slide polish

Kickoff teams often leave export format decisions too late.

That creates preventable problems:

- speaker notes are missing in the real presentation view
- embedded media is reviewed in one environment and presented in another
- printable handouts are created from a layout that was designed only for live delivery
- regional leads ask for editable deck files after the freeze

Choose the primary mode for each session early:

- browser presentation for the live event
- editable PowerPoint for downstream regional reuse
- PDF for handouts or follow-up
- Google Slides when another internal team must keep collaborating after kickoff

If your team is unsure which route makes sense for a specific audience, [Which Figma Presentation Export Format Should You Use](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/) is the best companion article.

The point is not that every session should use the same output. It is that the session owner should know the real destination before the deck is treated as finished.

## Treat speaker notes and transitions as production assets

Kickoff decks are usually delivered by several people, not one polished presentation owner.

That means the deck needs more than attractive slides. It needs presenter support:

- notes for transitions between sections
- clear links between breakout flows
- obvious markers for handoff moments
- slide naming that makes rehearsal less chaotic

Pitchdeck is especially useful here because it supports web presentation behavior more directly than a static design mock. Kickoff decks are not just meant to be admired. They are meant to be delivered cleanly on a deadline, often by presenters who did not design the deck themselves.

If you are already using media-heavy decks for demos or walkthroughs, [Product Demo Deck Workflow in Figma](/articles/pitchdeck-product-demo-deck-workflow-in-figma/) is a useful adjacent model.

## Build a freeze process, not just a deadline

Most kickoff deck stress comes from last-minute change requests.

Some are necessary:

- a number changed
- a launch moved
- a customer quote got approved late
- an executive wants one slide rewritten

The workflow still needs a visible freeze process:

1. content freeze for session owners
2. design cleanup pass
3. rehearsal pass in presentation mode
4. export pass for secondary formats
5. final distribution

Without that structure, teams keep editing while someone else is already rehearsing or exporting.

Kickoff decks do not need perfect bureaucracy. They do need a moment where the deck stops behaving like a living brainstorm and starts behaving like an event asset.

## Plan variants deliberately instead of letting copies multiply

Sales kickoff content often creates variant pressure:

- executive version
- sales version
- CS version
- regional version
- partner-facing summary version

The wrong move is letting each stakeholder fork the entire deck.

A better move is deciding which sections are intentionally variant-friendly:

- metrics slides
- regional customer examples
- market-specific messaging
- breakout tracks by persona

Keep the base slide system stable. Let the narrative layer change where it actually needs to.

If your team already struggles with too many deck copies, [Pitch Deck Version Control for Startups](/articles/pitchdeck-pitch-deck-version-control-for-startups/) is worth adapting to the kickoff context.

## Rehearse the event in the environment that will actually be used

Kickoff decks are especially vulnerable to fake confidence.

They can look complete inside the design file while still failing during the real event because:

- a presenter expects notes that are not there
- a transition between sections feels abrupt
- a media element behaves differently in the final mode
- exported slides no longer match the live-delivery flow

That is why the review should happen in the actual presentation context, not only inside Figma frames.

Run at least one rehearsal that answers:

- can each presenter navigate their section comfortably?
- are section boundaries obvious?
- do the exported formats still meet the needs of the teams receiving them later?
- does the deck still feel like one event from beginning to end?

## A practical sales kickoff deck workflow

For most revenue enablement teams, this sequence is enough:

1. define the event narrative and shared slide grammar
2. split the deck into master sections and owned modules
3. decide the real delivery mode for each session
4. gather presenter notes and section transitions early
5. freeze content before the final polish pass
6. rehearse in the environment the presenters will actually use
7. export only the formats the downstream audience truly needs

That workflow does not remove kickoff complexity. It does stop the complexity from turning into random deck sprawl.

## Where Pitchdeck helps most

[Pitchdeck](/pitchdeck/) is valuable here because sales kickoff is exactly the kind of presentation problem that exposes weak slide systems.

The event needs:

- design control
- fast updates
- multiple owners
- flexible exports
- confident live delivery

Keeping the deck source in Figma while using Pitchdeck for presentation and export gives revenue enablement teams a cleaner center of gravity. Instead of rebuilding keynote sections in PowerPoint and chasing copies across presenters, the team can run kickoff from one shared deck system and only branch where the event actually demands it.

---

---
type: article
title: Header and Navigation QA Workflow from Figma
description: Compare sticky headers, mobile menus, announcement bars, and active navigation states against Figma so site navigation feels deliberate across real breakpoints.
datePublished: 2026-06-21T00:00:00.000Z
dateModified: 2026-06-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-header-and-navigation-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-header-and-navigation-qa-workflow-from-figma.md
---

# Header and Navigation QA Workflow from Figma

Navigation drift is one of the fastest ways for a polished site to start feeling slightly off.

The page body may match the design closely, but the header tells a different story:

- spacing shifts once the header becomes sticky
- the logo sits a little higher than intended
- the announcement bar squeezes the nav rhythm
- the mobile menu looks like it came from another system
- active states or current-page indicators do not behave the way the design promised

These are small differences, but visitors experience them on every page.

[Pixelay](/pixelay/) is a strong fit for this workflow because it compares Figma designs against real sites, staging URLs, preview environments, localhost builds, and authenticated routes directly in the browser. Navigation QA benefits from that because the drift often appears only when the header becomes interactive or responsive in a real environment.

This article is intentionally different from nearby Pixelay content like [Responsive Website QA from Figma](/articles/pixelay-responsive-website-qa-from-figma/), [Modal and Drawer QA Workflow from Figma](/articles/pixelay-modal-and-drawer-qa-workflow-from-figma/), and [Website QA Checklist from Figma to Production](/articles/pixelay-website-qa-checklist-from-figma-to-production/). Those cover broader responsive review, overlay behavior, or full-site QA. This one is specifically about headers and navigation, where sticky states, mobile menus, and page-to-page consistency create their own category of visual drift.

## Navigation is a system of states, not one component

That is the mindset shift that improves review quality fastest.

A header is not only:

- logo
- links
- CTA button

It is also:

- default top-of-page state
- sticky or scrolled state
- announcement-bar state
- mobile collapsed state
- mobile expanded menu state
- current-page or active-link state

If the team compares only the default desktop header, the real navigation behavior stays largely unreviewed.

## Collect the real header states before comparing anything

Before opening Pixelay, list the states the site actually uses:

- homepage header before scroll
- header after scroll
- internal-page header
- page with announcement bar
- mobile menu closed
- mobile menu open
- active navigation state
- any CTA or account state that changes by route

This is the step that stops reviewers from saying "the header looks fine" when they have only seen one easy scenario.

Navigation bugs usually hide in the state changes, not the starting state.

## Compare hierarchy, not just alignment

Pixel-perfect review does not only mean checking whether every element sits in the right place.

For headers, hierarchy matters just as much:

- does the logo still feel anchored correctly?
- is the primary CTA clearly dominant?
- do nav links still read as one set?
- does the sticky state still feel lighter or denser in the way the design intended?
- does the mobile menu preserve the right emphasis order?

A header can be only a few pixels off and still feel much more wrong because the visual hierarchy changed.

This is especially common when:

- sticky behavior adds a shadow or background
- the announcement bar changes total header height
- the active link becomes too subtle or too loud
- the CTA button spacing drifts between breakpoints

## Review announcement bars and sticky states as combined systems

One easy mistake is reviewing the announcement bar as separate from the header.

In real use, the visitor experiences them together.

That combination can create subtle problems:

- the header feels too tall before scroll
- the sticky transition becomes jumpy
- the nav links sit too close to the announcement copy
- the CTA loses breathing room
- the mobile header becomes crowded before the menu even opens

If your site uses promotional or compliance bars frequently, the combined state deserves its own comparison pass. A clean header can still become visually clumsy once the extra layer appears.

## Mobile navigation should be reviewed like a product surface

Teams often treat the mobile menu like a secondary implementation detail.

It is not.

For many visitors, the mobile navigation is the first strong interaction on the site.

Check:

- spacing around the logo, menu trigger, and CTA
- rhythm of grouped nav items
- separation between page links and secondary actions
- behavior of long labels
- whether the expanded menu still matches the design system tone

This is where navigation review starts touching overlay review. If your mobile menu behaves like a drawer or full-screen panel, [Modal and Drawer QA Workflow from Figma](/articles/pixelay-modal-and-drawer-qa-workflow-from-figma/) becomes the best supporting process.

## Check navigation across real page types

Headers often drift because only one page template was compared carefully.

Run the navigation pass across the page families that matter most:

- homepage
- product page
- pricing page
- docs or blog page
- authenticated area if relevant

Why?

Because the header may be technically shared while the surrounding content changes how it feels. A nav that looks balanced above a sparse hero may feel cramped above a dense documentation layout.

This is one reason Pixelay is useful. The comparison can happen in the real browser context rather than in isolated component review.

## Turn navigation mismatches into precise implementation notes

Navigation bugs are easy to report vaguely:

- "header feels off"
- "mobile menu spacing is wrong"

Better notes are specific:

- "At 390px wide, the sticky header background starts earlier than the Figma design and visually compresses the CTA against the menu button."
- "The announcement bar plus header stack is 12px taller than the approved design, which pushes the hero content lower and changes the first-screen hierarchy."
- "The current-page state in the docs nav has lower contrast than the Figma reference and no longer reads as the active item at first glance."

That level of precision helps frontend teams fix the real issue faster.

## A practical navigation QA routine

For most teams, this sequence is enough:

1. list the real header and navigation states that exist in production
2. compare default, sticky, and mobile states against the Figma source
3. review hierarchy as well as raw positioning
4. check the combined behavior of announcement bars and sticky transitions
5. compare the nav on several real page types
6. log differences with exact breakpoint and state context

That routine catches a surprising amount of visible polish drift before it becomes "one of those little site issues" nobody owns.

## Before the header is considered visually safe, confirm

- all meaningful navigation states were reviewed
- sticky and announcement-bar behavior were checked together
- mobile-menu rhythm still matches the design intent
- the nav was tested on more than one page type
- bug reports describe the exact state and visual consequence

## Where Pixelay helps most

[Pixelay](/pixelay/) is valuable here because header drift often feels too small to justify a full review and too visible to ignore once users see it.

Comparing the real site against the Figma source gives teams an efficient way to inspect sticky states, mobile menus, active navigation, and route-to-route consistency before those small differences accumulate into a site that feels less considered than it should.

That is the practical win. Navigation should feel like the calmest, most intentional part of the interface. Pixelay makes it much easier to keep it that way.

---

---
type: article
title: Hero Image Optimization Workflow for Landing Pages
description: Prepare sharper, lighter landing page hero images from Figma so the first screen loads fast without weakening the story the page needs to tell.
datePublished: 2026-06-21T00:00:00.000Z
dateModified: 2026-06-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-hero-image-optimization-workflow-for-landing-pages/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-hero-image-optimization-workflow-for-landing-pages.md
---

# Hero Image Optimization Workflow for Landing Pages

Hero images create more launch drama than most design teams expect.

They sit at the top of the page, consume a large share of the visual budget, and often become the largest image the browser has to load before the page feels complete. If the hero is too heavy, the page feels slow. If the compression is too aggressive, the screenshot, illustration, or product shot that should build trust starts looking soft.

That is why hero-image work needs its own process instead of living inside a generic "export the assets" step.

[TinyImage](/tinyimage/) is a strong fit for this job because it keeps compression, format conversion, GIF and MP4 export, and PDF export close to the Figma source. For landing page teams, the real benefit is not only smaller files. It is giving design and marketing a repeatable way to ship the first visual on the page without asking developers to reprocess every asset afterward.

This article is intentionally narrower than nearby TinyImage content like [Website Asset Compression Budget for Design Teams](/articles/tinyimage-website-asset-compression-budget-for-design-teams/), [How to optimize Figma exports for page speed](/articles/tinyimage-how-to-optimize-figma-exports-for-page-speed/), and [Product Screenshot Export Workflow for SaaS Landing Pages](/articles/tinyimage-product-screenshot-export-workflow-for-saas-landing-pages/). Those cover broader budgets, page-speed thinking, or screenshot-heavy sections. This one is specifically about the hero image, where performance, cropping, and storytelling all collide on the first screen.

## Hero images are not just bigger versions of other assets

A feature screenshot halfway down the page can be imperfect and still survive.

A hero image usually cannot.

It has to do several jobs at once:

- attract attention immediately
- support the main message instead of competing with it
- stay readable behind or beside headline copy
- crop well across desktop and mobile
- load fast enough that the page does not feel stalled

That combination is what makes hero-image workflow different from general web-image workflow.

There are usually three hero-image types:

- product-led hero visuals with interface screenshots
- brand-led photography or illustration
- hybrid hero compositions mixing UI, device frames, diagrams, or supporting graphics

Each type creates different export risks. Product-led heroes need text and UI details to stay sharp. Brand-led images can often compress more aggressively. Hybrid compositions usually fail on cropping before they fail on quality.

## Decide what the hero has to prove before exporting anything

The most useful question is not "PNG or WebP?"

It is "what is this hero proving to the visitor?"

Common answers:

- this product is real and polished
- this workflow is easier than the old one
- this campaign or service feels premium
- this page has a concrete visual point of view

Once that job is clear, you can export around it.

If the hero exists to prove product credibility, the crop needs to protect the interface detail that makes the product believable.

If the hero exists to create atmosphere, the composition can prioritize mood and motion more than tiny UI fidelity.

If the hero mixes marketing copy with a screenshot, the focal area needs to survive even when the layout compresses on tablet or mobile.

Hero optimization gets easier the moment the team stops treating every landing page hero like the same kind of image.

## Build the crop system before the compression pass

Many "image-quality" problems are actually crop problems.

A hero can look beautiful in Figma and still ship badly because the live layout:

- hides the part of the image that explains the product
- pushes important details behind the headline block
- crops away the visual anchor on mobile
- leaves too much decorative empty space relative to file weight

Before export, define:

- the desktop focal area
- the mobile-safe focal area
- whether the hero needs separate desktop and mobile variants
- whether the page overlay text will sit on top of the image or next to it

This is where teams save the most time. When the crop rules are clear early, compression becomes much more predictable. When the crop rules stay vague, designers keep exporting "better" files that still feel wrong in production.

If your hero includes product UI and supporting screenshots, [Responsive Image Handoff from Figma](/articles/tinyimage-responsive-image-handoff-from-figma/) is a good companion process.

## Choose the format by hero behavior, not habit

Many teams still default to PNG because it feels safe.

For hero images, that often means carrying far more weight than the page needs.

A better approach:

- use PNG when the hero includes important UI text, crisp line detail, or transparency that should stay very clean
- use WebP when you want a lighter hero asset without falling back to JPG by default
- use AVIF when your site stack already supports it cleanly and the image benefits from smaller modern delivery
- use MP4 or GIF only when the hero genuinely needs motion to explain the product, not because animation feels more premium by itself

The main point is that the format should match the visual job of the hero.

If the hero is a UI-heavy product shot, visual clarity often matters more than squeezing out every last byte.

If the hero is a soft photo or illustration, lighter modern formats usually earn their keep faster.

If your team is still standardizing modern image choices in general, [WebP vs AVIF for Figma Exported Images](/articles/tinyimage-webp-vs-avif-for-figma-exported-images/) is the closest related read.

## Review the hero at rendered size, not only on a designer monitor

This is where many hero exports get approved too early.

On a large screen at high zoom, both versions may look fine. On the actual landing page slot, one version will usually reveal the truth.

Review each candidate hero by asking:

- does the image still feel sharp at the real rendered size?
- is the page headline easier or harder to scan beside it?
- does the crop still communicate on mobile?
- is the file weight justified by what the image contributes?

Hero visuals are one of the few places where a slightly heavier file can still be the right decision. But that should be a deliberate tradeoff, not an accidental default.

The team should be able to say, "Yes, this hero deserves more weight because it is the main proof asset on the page," or "No, this decorative background can compress harder without hurting the story."

## Run a landing-page-specific export pass in TinyImage

The export routine should be simple enough that the team can repeat it across launches.

One practical sequence:

1. Isolate the approved hero variants in Figma.
2. Name them by page and breakpoint, not by internal design shorthand.
3. Export a quality-first version and a lighter alternative.
4. Compare them in the real layout or a realistic preview slot.
5. Keep the version that preserves the intended story without wasting weight.

Useful names:

- `homepage-hero-dashboard.webp`
- `product-hero-mobile.png`
- `campaign-hero-illustration.avif`
- `feature-launch-hero.mp4`

TinyImage is especially useful here because the designer does not need to bounce between Figma, a separate compression tool, and a naming cleanup pass. The hero can move from approved design to optimized export with fewer handoff gaps.

## A hero-image checklist before launch

Before the landing page ships, confirm:

- the hero has one clear job on the page
- desktop and mobile crops were reviewed separately when needed
- the chosen format matches the image content
- UI-heavy hero details stayed readable after compression
- decorative space is not inflating file weight without helping the story
- filenames are clear enough for implementation handoff
- the live page was checked once the hero was implemented

## Where TinyImage helps most

[TinyImage](/tinyimage/) does not decide whether the page should lead with a screenshot, a product montage, or an illustration. That is still a marketing and design call.

What it does remove is the messy middle:

- exporting an oversized file
- compressing it somewhere else
- discovering the crop is wrong
- exporting it again under deadline

Landing page heroes deserve more care than a generic asset-export step. When the team gives hero images their own workflow, the page feels faster, cleaner, and more deliberate from the first screen. TinyImage makes that workflow much easier to keep inside Figma instead of turning it into a manual cleanup routine after design approval.

---

---
type: article
title: Video Fallback Workflow for HTML5 Banner Campaigns
description: Plan video fallback behavior for HTML5 banner campaigns so motion-rich creatives still feel intentional when autoplay or platform behavior gets in the way.
datePublished: 2026-06-20T00:00:00.000Z
dateModified: 2026-06-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-video-fallback-workflow-for-html5-banner-campaigns/
markdownUrl: https://www.hypermatic.com/articles/bannerify-video-fallback-workflow-for-html5-banner-campaigns.md
---

# Video Fallback Workflow for HTML5 Banner Campaigns

Video can make a banner feel dramatically more alive.

It can also make the campaign brittle.

A creative team approves a motion-rich HTML5 banner with embedded video. The preview looks great. Then the live environment behaves differently: autoplay is restricted, the first frame looks awkward, a fallback state feels unfinished, or the banner sits in a placement where the moving creative does not load the way reviewers expected.

That is why video banners need a fallback workflow, not just a final export.

[Bannerify](/bannerify/) helps because it keeps design, animation, and export inside Figma while supporting production-ready HTML outputs. For video-heavy campaigns, that is valuable only if the team also plans what should happen when the ideal motion path is unavailable or degraded.

This article is intentionally different from nearby Bannerify content like [Fallback Asset Workflow for HTML5 Banner Campaigns](/articles/bannerify-fallback-asset-workflow-for-html5-banner-campaigns/), [Rich Media Banner Workflow with Video and Lottie](/articles/bannerify-rich-media-banner-workflow-with-video-and-lottie/), and [When to Use HTML5 vs GIF vs MP4 Banner Exports](/articles/bannerify-when-to-use-html5-vs-gif-vs-mp4-banner-exports/). Those cover broader fallback packaging, rich media creative planning, or format choice. This one is specifically about video fallback behavior inside HTML5 banner campaigns, where autoplay, first-frame quality, and degraded motion states can decide whether the ad still feels polished in real placements.

## A video banner should still communicate if the motion path weakens

This is the core principle.

If the whole creative depends on perfect autoplay to make sense, the campaign is fragile.

The fallback question is not only "what happens if video fails completely?" It is also:

- what happens before playback starts?
- what happens if playback is delayed?
- what happens if the environment suppresses certain behavior?
- what happens if the viewer only catches the first second?

A strong video banner still communicates the offer, brand, and CTA even in those weaker states.

## Design the poster state like a real creative, not a placeholder

The most overlooked part of video-banner planning is the first visible state.

Too many teams treat it as a technical artifact instead of part of the ad.

That first frame or fallback state may be the only thing some viewers ever really notice. It should already answer:

- what is being offered?
- who is it for?
- what should the viewer do next?

Weak first states usually have one of these problems:

- the CTA appears too late
- the brand is unclear without motion
- the product or offer only makes sense after several animated beats
- the frame looks like a loading artifact rather than an intentional design

If the static opening moment would make a poor display ad by itself, it is probably not a safe fallback state.

## Separate storytelling motion from required information

This distinction helps a lot.

Some motion is additive:

- subtle reveal of product beauty
- secondary feature sequencing
- ambient movement

Some motion is carrying critical information:

- the only appearance of the CTA
- the only readable pricing
- the only explanation of the offer
- the only proof that the ad is interactive

Critical information should not depend entirely on later playback states. If the ad needs motion to be understood at all, the fallback plan is under-designed.

I like to keep the minimum viable banner visible in the initial or degraded state, then let motion improve persuasion rather than create basic comprehension from nothing.

## Build fallback behavior at the campaign level, not banner by banner

One placement can mislead the whole team if it is reviewed in isolation.

Most campaigns include several banner sizes, and video behavior may feel different across them because:

- the visible crop changes
- the text density changes
- the CTA takes more room
- the poster frame emphasizes different elements

That is why fallback should be reviewed as a campaign system:

- which message must survive everywhere
- which layouts need a different first frame
- which sizes can safely support richer motion
- which sizes need simpler behavior

The goal is not identical execution across every unit. The goal is consistent clarity when the motion path is not ideal.

## Review fallback states with media and trafficking teams early

Creative teams often review the best-case experience only.

Ad ops and media teams are more likely to surface the operational questions:

- is the first frame strong enough?
- do we need a separate fallback asset in this placement?
- will the initial state still read on smaller sizes?
- is the click area obvious before motion begins?

That feedback matters because video banners cross several handoffs before launch. The more fallback expectations are settled inside the Figma stage, the less rework shows up right before trafficking.

If your team still needs the broader handoff checklist after creative review, pair this workflow with [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/).

## Use preview review to catch awkward fallback moments

Fallback problems often look small in theory and obvious in preview.

Things to watch for:

- a visible flash before the creative settles
- a poster frame that crops the product badly
- a CTA that only arrives after the banner already feels skippable
- text that relies on motion timing to become readable
- a "frozen" state that looks broken instead of intentional

[Bannerify](/bannerify/) is helpful here because the preview path makes it easier to review the campaign like a real output instead of only a timeline inside the design source.

## When video is the wrong center of gravity

Sometimes the best fallback workflow is deciding not to make video the primary behavior for a specific unit.

That is usually true when:

- the offer must be understood instantly
- the size is too small for the motion to breathe
- the placement environment is too constrained
- the first frame consistently underperforms the simpler static idea

This is not a failure. It is good campaign judgment.

Some banner sets should use video in the hero placements, then fall back to cleaner HTML5 or alternate motion approaches in the smaller or more constrained units. The point is not maximum motion everywhere. The point is the strongest dependable creative system.

## A practical fallback review checklist

Before exporting the campaign, confirm:

- the first visible state works as a credible ad on its own
- the CTA is not entirely dependent on later playback
- critical offer information appears early enough
- smaller sizes still communicate if motion weakens
- media or trafficking stakeholders understand the fallback plan
- preview review did not reveal awkward frozen or delayed states

## Where Bannerify helps most

[Bannerify](/bannerify/) makes it much easier to create motion-rich banners directly from Figma. That is a major speed advantage. But the real campaign quality comes from treating fallback as part of the creative, not as an afterthought that appears once the ad leaves design review.

If your HTML5 banners increasingly rely on video, design the degraded path with the same care as the ideal path. The best video banner campaigns still feel intentional when autoplay is imperfect, timing is delayed, or the viewer only catches the opening state.

---

---
type: article
title: Annual Report PDF to Figma Redesign Workflow
description: Turn flat annual report PDFs into editable Figma working files so brand, comms, and investor teams can refresh layouts without rebuilding every page from scratch.
datePublished: 2026-06-20T00:00:00.000Z
dateModified: 2026-06-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-annual-report-pdf-to-figma-redesign-workflow/
markdownUrl: https://www.hypermatic.com/articles/convertify-annual-report-pdf-to-figma-redesign-workflow.md
---

# Annual Report PDF to Figma Redesign Workflow

Annual report redesigns often begin with the wrong assumption.

The team says the old report is "done in PDF," which really means the original editable source is missing, outdated, or trapped in somebody else's system. Brand wants a refresh. Investor relations wants cleaner charts. Marketing wants to repurpose sections for the website. The easiest-looking option is to rebuild everything from scratch in Figma.

That is usually a very expensive decision.

[Convertify](/convertify/) is helpful here because it gives teams a faster path from legacy document formats into editable Figma working files. For annual report projects, that matters less as a magical one-click finish and more as a serious head start for restructuring dense report pages without manually redrawing every element from zero.

This article is intentionally different from nearby Convertify content like [InDesign to Figma Migration Workflow for Editorial Teams](/articles/convertify-indesign-to-figma-migration-workflow-for-editorial-teams/), [PDF Design File Extraction Workflow](/articles/convertify-pdf-design-file-extraction-workflow/), and [Legacy Design File Cleanup After Migration](/articles/convertify-legacy-design-file-cleanup-after-migration/). Those cover broader editorial migration, generic PDF extraction, or cleanup after import. This one is specifically about annual report redesign work, where the input is often a flat PDF, the layout is long and repetitive, and the team needs an editable Figma system for the next reporting cycle rather than another static archive.

## The point is not to preserve the PDF perfectly

This mindset matters.

If the team expects a flat annual report PDF to become a perfectly structured modern design system with no judgment required, the project starts in the wrong place.

A better goal is:

- recover usable structure
- preserve enough layout logic to accelerate redesign
- identify what must still be rebuilt or rationalized by hand

That is a much more realistic brief.

Annual reports are full of elements that vary in difficulty:

- cover and section opener pages
- leadership letters
- multi-column narrative spreads
- data tables
- chart-heavy pages
- footnotes and disclosure blocks

Some of those import cleanly enough to reuse as a base. Others need selective cleanup or rethinking inside Figma. The win is not perfection. The win is avoiding unnecessary blank-canvas work.

## Audit the report before importing it

Do not treat every report page the same.

Before importing the PDF, mark the pages by job:

### Rebuild-light pages

These are pages where the layout logic is clear and the import mainly saves time.

Examples:

- opener pages
- simple text-and-image spreads
- section dividers
- straightforward charts

### Cleanup-heavy pages

These need more attention after import.

Examples:

- dense financial tables
- pages with long footnotes
- disclosure-heavy layouts
- pages with old chart styles or inconsistent spacing

### Reference-only pages

These may be better treated as visual source material instead of direct editable foundations.

Examples:

- legally finalized pages that will be rebuilt from approved copy anyway
- highly decorative legacy spreads
- pages where the design language is being replaced wholesale

This audit changes the whole workflow. Instead of importing a 90-page PDF and hoping for a miracle, the team knows which sections are meant for reuse, which are meant for cleanup, and which are simply there to inform the redesign.

## Use the PDF as a transition artifact, not the final source of truth

For annual reports, the PDF is often the only complete artifact everybody can agree on. That makes it useful, but not sufficient.

The imported file should become a transition workspace where the team can:

- extract reusable page patterns
- identify recurring layout modules
- recover chart and table structure
- decide which legacy visual habits should be retired

That is a much better use of the import than trying to preserve every old quirk.

If a report contains five versions of the same statistics layout, use the import to spot the repeating pattern and normalize it in Figma. If a disclosure section appears in slightly different forms across the report, use the import to consolidate it into one cleaner component pattern for the redesign.

## Annual reports are really systems, not one-off documents

This is why Figma can be such a strong destination once the legacy PDF is pulled in.

A report is rarely just one document anymore. Teams usually need to spin parts of it into:

- investor summary slides
- press kits
- website highlights
- social graphics
- executive briefings
- regional or board-ready excerpts

That means the redesign should not only recover last year's layout. It should create a more reusable structure for next year's reporting and all the satellite assets around it.

[Convertify](/convertify/) helps start that system faster because the imported PDF gives the team something concrete to organize, normalize, and extend inside Figma.

## Be intentional about charts, tables, and disclosures

These are the pages where annual report migrations usually get painful.

For charts, ask:

- is this chart style still right for the new report?
- does it need to become a reusable Figma pattern?
- will the data be refreshed several times before publication?

For tables, ask:

- is the imported structure clean enough to edit?
- should this become a component pattern instead?
- does the layout need simplification for readability?

For disclosures and footnotes, ask:

- what is purely archival wording?
- what will legal or finance reapprove anyway?
- which spacing and hierarchy rules should be standardized now?

The answer will often be mixed. That is fine. The value of the import is that it helps the team separate recoverable structure from content that still deserves careful manual review.

## Set cleanup expectations early with stakeholders

One quiet risk in annual report redesigns is stakeholder expectation drift.

Someone hears "we can import the PDF into Figma" and assumes the report is effectively finished. That is almost never true.

Be explicit about what the import gives you:

- a faster starting point
- preserved page relationships
- reusable layout clues
- less manual reconstruction

Also be explicit about what still needs design judgment:

- typography refinement
- chart restyling
- component normalization
- data updates
- legal review
- accessibility or readability improvements

That framing protects the team from overselling the migration step and keeps the redesign conversation grounded.

## A practical annual report migration workflow

Here is the workflow I would use:

1. Audit the PDF by page type before import.
2. Import the report into Figma with Convertify.
3. Classify pages into reuse, cleanup, or reference buckets.
4. Extract repeating layout patterns into cleaner Figma structures.
5. Rebuild only the pages that genuinely need fresh treatment.

If your team later needs broader cleanup principles after the import, [Legacy Design File Cleanup After Migration](/articles/convertify-legacy-design-file-cleanup-after-migration/) is the best companion article in the library.

## Before calling the working file ready, confirm

- key report sections are editable enough to move redesign forward
- repeating patterns have been identified instead of left page-by-page
- charts and tables have a clear cleanup plan
- stakeholders understand the difference between imported structure and finished redesign
- the new Figma file is better suited to next year's updates than the flat PDF was

## Where Convertify helps most

[Convertify](/convertify/) is not a substitute for editorial judgment, reporting accuracy, or careful visual cleanup.

What it does remove is the worst part of annual report redesign work: rebuilding obvious structure from a static PDF simply because the old editable file is gone or unusable. By pulling that structure closer to Figma, the team can spend more of its effort on improving hierarchy, readability, and reuse instead of tracing the past one page at a time.

That is what makes the workflow worthwhile. The imported PDF is not the destination. It is the bridge that gets the redesign moving much faster.

---

---
type: article
title: Demo Data Sanitization Workflow for Figma Screenshots
description: Replace sensitive names, numbers, and account details in Figma screenshots so sales, marketing, and support teams can reuse product visuals safely.
datePublished: 2026-06-20T00:00:00.000Z
dateModified: 2026-06-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-demo-data-sanitization-workflow-for-figma-screenshots/
markdownUrl: https://www.hypermatic.com/articles/copydoc-demo-data-sanitization-workflow-for-figma-screenshots.md
---

# Demo Data Sanitization Workflow for Figma Screenshots

Product screenshots get reused everywhere.

The same dashboard image may appear in a sales deck, pricing page, webinar slide, release note, support article, onboarding email, or app listing. The problem is that the original screenshot often contains the wrong kind of realism:

- internal test company names
- real customer names
- unreleased features
- fake numbers that look suspicious
- outdated plan labels
- region-specific copy that no longer matches the current product

That is where a demo data sanitization workflow matters.

[CopyDoc](/copydoc/) is a strong fit because it helps teams manage text at scale inside Figma instead of manually hunting through every screenshot, mockup, and supporting visual one layer at a time. For screenshot-heavy teams, the real value is not only changing copy faster. It is making product visuals safe and reusable without flattening everything into generic placeholder junk.

This article is intentionally different from nearby CopyDoc pieces like [Product Marketing Screenshot Copy Workflow](/articles/copydoc-product-marketing-screenshot-copy-workflow/), [Stale Product Copy Audit Workflow in Figma](/articles/copydoc-stale-product-copy-audit-workflow-in-figma/), and [App Store Screenshot Localization Workflow in Figma](/articles/copydoc-app-store-screenshot-localization-workflow-in-figma/). Those focus on marketing screenshot planning, stale UI language, or localized store visuals. This one is specifically about sanitizing screenshot data for safe reuse, where the challenge is balancing credibility, consistency, and privacy across many exported visuals.

## Sanitized demo data should still feel believable

The easiest bad fix is replacing everything with obvious filler:

- `Company Name`
- `User Name`
- `1234`
- `Lorem ipsum`

That protects the screenshot, but it also destroys trust.

Viewers can tell when the product visual is fake in the unhelpful way. The screenshot stops proving the workflow and starts looking like an unfinished mockup.

A better sanitized screenshot does three things:

- removes sensitive or misleading details
- keeps the UI coherent
- still feels like a real working product state

That means choosing replacement content intentionally, not randomly.

## Decide what needs sanitization before you touch the copy

Different screenshot sets carry different risks.

I like to review screenshots through four categories:

### Private data

- customer names
- email addresses
- phone numbers
- billing details
- support ticket IDs

### Commercially risky data

- unreleased feature names
- draft pricing
- internal roadmap labels
- non-public sales figures

### Credibility problems

- fake metrics that make no sense
- inconsistent product terminology
- outdated plan names
- impossible timestamps or statuses

### Localization or reuse blockers

- one region's language inside a global screenshot pack
- one-off campaign wording that cannot be reused elsewhere

That review prevents the team from either over-sanitizing everything or missing the one field that actually creates risk.

## Treat screenshot copy like a dataset, not a one-off visual tweak

This is where teams lose time.

They open one mockup, replace three strings, export it, then discover the same account name appears across:

- empty states
- table rows
- sidebar navigation
- modal headers
- CSV exports shown in the screenshot
- follow-up visuals on another page

That is exactly the kind of repetitive work [CopyDoc](/copydoc/) is good at reducing. When screenshot text is managed as a structured content pass instead of random visual cleanup, the team can update the whole screenshot set more consistently.

For example, a sanitization sheet can define:

- approved demo company names
- approved sample currencies
- approved product or plan labels
- approved role names
- approved support or lifecycle terminology

Once that system exists, screenshots stop drifting between "real-ish" and "completely fabricated."

## Build reusable demo content that matches the product's tone

Sanitized screenshots should not sound like they came from a legal review tool.

If your product normally speaks in a plain B2B tone, the screenshots should too. If the UI is more technical, the demo data should still reflect plausible technical usage.

Helpful replacements often include:

- believable company names
- realistic but non-sensitive metrics
- sample plans or account states that match the current packaging
- table values that imply real use without exposing live customer data

What usually weakens the screenshot:

- inconsistent fake company naming across screens
- obviously random revenue or usage values
- one sanitized screen using old terminology while another uses current labels
- generic filler that makes the whole UI feel staged

The visual looks safer, but the brand looks less mature.

## Keep demo data aligned across all screenshot destinations

This is the part people underestimate.

A screenshot pack rarely lives in one place. The same sanitized state may later power:

- homepage proof blocks
- comparison pages
- onboarding docs
- sales decks
- blog images
- product update emails

If the team sanitizes one source file but forgets the others, the product starts telling different stories in different places. That hurts trust because viewers notice when:

- the screenshot says `Growth Plan`
- the modal says `Team`
- the support article still shows the old navigation label
- the deck uses a different fake customer dataset from the website

Sanitization is really a governance workflow.

If screenshot reuse is part of your marketing process, this article pairs well with [Figma Copy Approval Workflow for Cross-Functional Teams](/articles/copydoc-figma-copy-approval-workflow-for-cross-functional-teams/), because the real challenge is often coordination rather than editing speed.

## Review screenshots with the final export use in mind

A number that looks harmless in the original frame may become much more visible after cropping.

A sidebar label that seems fine in a wide app screenshot may become the focal point in a tighter hero image. A demo table row that looked believable on desktop may feel suspicious when isolated in a sales slide.

That means sanitization review should not stop at the Figma source. Check how the content reads in the actual visual treatment:

- full screenshot
- cropped card image
- annotated product proof block
- deck slide
- documentation image

Sometimes the right fix is not rewriting more text. It is choosing a different crop or simplifying the proof moment so the screenshot says less but feels more credible.

## A practical sanitization workflow for screenshot teams

I would run it like this:

1. Inventory the screenshot set and mark sensitive or misleading fields.
2. Create an approved demo-data source for names, values, labels, and statuses.
3. Update the Figma text systematically instead of manually fixing screenshots one by one.
4. Review the sanitized screens in their final export contexts.
5. Reuse the approved demo-data set for future screenshot batches.

That last step matters. The goal is not merely to clean this week's screenshots. It is to make the next screenshot request much faster and safer.

## Before exporting a sanitized screenshot pack, confirm

- private or risky fields are removed
- replacement data still feels plausible
- terminology matches the current product
- repeated screenshots use the same demo-data system
- cropped exports do not accidentally elevate the wrong details
- the screenshot remains useful as proof, not just safe as decoration

## Where CopyDoc helps most

[CopyDoc](/copydoc/) is valuable here because screenshot sanitization is rarely one string in one frame. It is usually a repeated content problem hiding inside design work.

The more screenshots your team publishes, the more expensive manual cleanup becomes. CopyDoc gives teams a better way to manage those changes at the text layer, which makes it easier to keep screenshots safe, believable, and consistent across all the places they get reused.

That is the real benefit. Good demo data should protect the business without making the product look fake.

---

---
type: article
title: Incident Update Email Workflow for SaaS Teams
description: Design incident update emails in Figma so support, ops, and product teams can send clearer HTML status messages under pressure.
datePublished: 2026-06-20T00:00:00.000Z
dateModified: 2026-06-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-incident-update-email-workflow-for-saas-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-incident-update-email-workflow-for-saas-teams.md
---

# Incident Update Email Workflow for SaaS Teams

Incident emails are written in the least forgiving conditions.

Something is broken. Support is already getting tickets. Product is still validating scope. Engineering needs time. Legal or leadership may want wording review. Meanwhile the customer inbox is where trust either holds or starts to slip.

That is why incident updates deserve their own workflow instead of being treated like a generic lifecycle email.

[Emailify](/emailify/) is useful here because it keeps design, responsive review, and production-ready HTML export closer together inside Figma. For incident communication, that matters because the team does not have time for a loose design file, a hand-coded email rebuild, and three conflicting review rounds once the update already needs to go out.

This article is intentionally different from nearby Emailify content like [Transactional Email Design Workflow in Figma](/articles/emailify-transactional-email-design-workflow-in-figma/), [HTML Email Compliance Review Workflow](/articles/emailify-html-email-compliance-review-workflow/), and [Lifecycle Email Workflow for Marketing Ops Teams](/articles/emailify-lifecycle-email-workflow-for-marketing-ops-teams/). Those cover broader system emails, compliance-heavy review, or recurring lifecycle programs. This one is about incident communication, where the message has to be calm, precise, fast to approve, and easy to read on mobile when customers are already frustrated.

## Incident emails are operational, not promotional

The design priorities are different from a normal campaign.

Customers opening an incident update usually want answers to practical questions:

- what is happening?
- who is affected?
- what should I do right now?
- when will I hear more?
- where can I get the latest status?

That means the email should feel more like a trusted service update than a branded marketing send with a status paragraph dropped into it.

Weak incident emails often fail in predictable ways:

- the headline hides the actual issue
- the first paragraph is too vague
- the CTA competes with the message instead of supporting it
- mobile layout pushes the key action too low
- multiple teams keep editing the wording until the email loses clarity

The job is not to make the message pretty. The job is to make the update useful under stress.

## Build one incident email framework before the next incident happens

This is the part teams skip until they regret it.

If the first serious outage is also when the team invents the email structure, everything becomes harder:

- design starts from scratch
- support asks for wording changes late
- legal wants disclaimers after layout is already set
- product wants different versions for different audiences
- the export path gets improvised at the worst possible moment

Create a reusable framework in Figma first.

For most SaaS teams, that framework should support a few common incident states:

- initial acknowledgement
- ongoing update
- resolved notice
- follow-up with preventive next steps

That does not mean the copy should be generic. It means the structure should already know where key information goes.

## The first viewport should answer the urgent questions

The opening screen of the email needs discipline.

I like incident emails to establish, in order:

1. what happened
2. who is affected
3. what the customer should do next
4. where the live status source is

That sounds obvious, but many teams bury one of those elements below a decorative hero image, a long apology paragraph, or a brand-heavy header that does not help the reader.

If the incident update includes a CTA, it should usually support one of these actions:

- view the live status page
- review a temporary workaround
- contact support if the issue persists

It should not compete with the message by trying to sell something, cross-promote content, or create visual noise.

## Write for scan speed, not rhetorical completeness

Incident emails create a strange writing temptation. The team wants to explain everything in one send.

That usually makes the message worse.

A better structure is:

- short issue summary
- affected scope
- immediate guidance
- update timing
- support or status destination

If deeper technical explanation is needed later, send it later or publish it on the status page. The inbox version should optimize for comprehension first.

This is also where HTML email layout matters. Dense paragraphs that feel fine in a desktop draft can become exhausting on mobile, especially when the customer is already trying to resolve a problem quickly.

## Use design cues that lower stress instead of escalating it

Good incident email design is not only about information density. It is also about emotional control.

That means:

- clear section breaks
- restrained emphasis
- consistent icon or alert treatment
- obvious timestamps
- enough spacing that the message does not feel like a wall of text

What usually hurts:

- oversized warning styling everywhere
- multiple accent colors competing at once
- decorative imagery unrelated to the issue
- CTA treatment that feels more urgent than the actual guidance

The customer already has urgency. The email does not need to manufacture more of it.

## Mobile review matters more than usual here

Incident emails get opened wherever the customer first notices the issue:

- on mobile during a commute
- from a support thread
- inside an executive inbox
- during a meeting

That is why [Emailify](/emailify/) is a strong fit. Teams can review responsive behavior inside the Figma workflow before exporting the HTML.

For incident sends, check:

- whether the issue summary is still obvious in the first mobile viewport
- whether the status CTA stays visible enough
- whether timestamps or workaround steps wrap awkwardly
- whether support or footer content overwhelms the operational message

An incident email that reads cleanly on desktop but becomes cluttered on mobile is not actually ready.

## Separate content approval from final HTML handling

Incident communication gets slower when every reviewer edits the final email version directly.

A healthier workflow is:

### Content owners decide

- issue wording
- affected scope
- next update timing
- workaround or resolution language

### Design/ops owners enforce

- structure
- readability
- mobile behavior
- final HTML export path

That split prevents late-stage chaos. The team can discuss meaning without constantly destabilizing the production-ready template.

If your organization also sends adjacent account notices like renewals or trial endings, [Renewal Reminder Email Workflow for SaaS Teams](/articles/emailify-renewal-reminder-email-workflow-for-saas-teams/) is a useful contrast. The commercial and operational goals are very different, and the templates should reflect that.

## A practical incident email workflow

I would standardize it like this:

1. Maintain one incident-update framework in Figma with the key sections already defined.
2. Draft the live message inside that structure instead of starting from a blank email.
3. Review the send in mobile and desktop layouts before export.
4. Confirm the status-page or support destination before final HTML generation.
5. Export only after message ownership, update timing, and CTA purpose are settled.

That rhythm keeps the process fast without making it chaotic.

## Before sending an incident update, confirm

- the issue and affected scope are obvious near the top
- the reader knows what to do next
- the email points to the right live-status source
- mobile review did not bury the key information
- support, product, and ops agree on the wording
- the layout feels calm and credible under pressure

## Where Emailify helps most

[Emailify](/emailify/) does not decide what your incident policy should say. The team still needs operational judgment, clear ownership, and honest messaging.

What it does improve is the production path between an approved incident update in Figma and a responsive HTML email that customers can actually read when they need it. That is a real advantage, because incident emails break trust fastest when they are delayed, cluttered, or inconsistent.

If your team keeps improvising service updates at the worst possible moment, make incident communication a designed workflow. The calmer the structure is before the next outage, the more credible the message will feel when it matters.

---

---
type: article
title: Mutual Action Plan Deck Workflow for Enterprise Sales Teams
description: Build mutual action plan decks in Figma so enterprise sales teams can align stakeholders, dates, and next steps without slide-version chaos.
datePublished: 2026-06-20T00:00:00.000Z
dateModified: 2026-06-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-mutual-action-plan-deck-workflow-for-enterprise-sales-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-mutual-action-plan-deck-workflow-for-enterprise-sales-teams.md
---

# Mutual Action Plan Deck Workflow for Enterprise Sales Teams

Enterprise deals rarely stall because one slide looked slightly off-brand.

They stall because nobody is aligned on the path to signature.

The champion thinks security review is done. Legal still has redlines. Procurement wants dates in writing. The account team has a spreadsheet somewhere, a mutual action plan in a shared doc somewhere else, and a copied deck from the last deal that no longer reflects what this buyer actually needs.

That is where [Pitchdeck](/pitchdeck/) fits well. It lets the team keep the mutual action plan in Figma while still exporting the format the buying group needs, whether that is PowerPoint, Google Slides, PDF, or a browser-based presentation link for structured live review.

This article is intentionally different from nearby Pitchdeck content like [RFP Response Deck Workflow for B2B Sales Teams](/articles/pitchdeck-rfp-response-deck-workflow-for-b2b-sales-teams/), [Security Review Deck Workflow for B2B SaaS Teams](/articles/pitchdeck-security-review-deck-workflow-for-b2b-saas-teams/), and [QBR Deck Workflow for Customer Success Teams](/articles/pitchdeck-qbr-deck-workflow-for-customer-success-teams/). Those cover formal response decks, diligence-heavy security narratives, or post-sale account reviews. This one is about the deal-closing path itself, where the presentation has to coordinate dates, owners, approvals, and buying momentum without turning into another forgotten sales artifact.

## A mutual action plan deck should reduce ambiguity, not add another document

Many teams already have a mutual action plan of some kind. The problem is that it often lives in the wrong format for stakeholder alignment.

Common failure patterns:

- the plan is trapped in a spreadsheet only the account team reads
- the dates are copied into slides once and never updated again
- next steps are scattered across call notes, emails, and procurement portals
- the executive sponsor sees a summary deck with none of the real timeline detail
- the buyer gets a document that feels operationally vague

A good mutual action plan deck is not a pitch deck with a timeline slide shoved in at the end. It is a deal-coordination asset.

Its job is to make four things obvious:

- what has to happen
- who owns each step
- when it needs to happen
- what risk is blocking progress

## Separate persuasion slides from commitment slides

This is the structure choice that keeps MAP decks useful.

Most enterprise deals still need persuasive narrative: value, business case, implementation confidence, proof. But the mutual action plan section has a different job. It turns interest into coordinated motion.

I like to separate the deck into two layers:

### Narrative layer

- why this matters
- why now
- why your team

### Commitment layer

- decision milestones
- stakeholder roles
- dependencies
- approval path
- target signature or go-live dates

When these layers are blended carelessly, the deck becomes hard to use. Sales wants the narrative. The buyer wants the plan. Procurement wants clarity. Leadership wants a status snapshot. The structure needs to support all of them without making the deck feel like a random slide pile.

## Build the plan around buying events, not internal sales tasks

This is where MAP decks often lose buyer trust.

The slide says:

- internal pricing review
- prepare updated order form
- schedule follow-up

Those may be real tasks, but they are not the most important buying events from the customer's point of view.

A stronger MAP deck frames the journey around shared milestones:

- success criteria agreed
- security review completed
- legal review completed
- pilot or proof accepted
- procurement approved
- contract signed
- kickoff scheduled

That language feels collaborative instead of seller-centric. It also makes the plan more usable in multi-stakeholder meetings because everyone can see how their part connects to the final outcome.

## Give every milestone an owner and a decision trigger

The fastest way for a mutual action plan to become decorative is to leave responsibilities fuzzy.

Each milestone should answer:

- who owns the next move
- what output proves the step is done
- what could block it

For example, "security review" is too vague by itself.

A better framing is:

- owner: customer security lead plus vendor security contact
- done when: questionnaire resolved and follow-up call completed
- blocker: missing architecture answers or data-flow clarifications

That level of specificity keeps the deck actionable without making it unreadable. If the team needs a deeper diligence narrative, pair the deck with [Security Review Deck Workflow for B2B SaaS Teams](/articles/pitchdeck-security-review-deck-workflow-for-b2b-saas-teams/).

## Use one source deck for live review and offline follow-through

Enterprise deals involve different reading modes:

- live deal calls
- internal champion forwarding
- executive review
- procurement circulation
- legal follow-up

That is why format flexibility matters.

With [Pitchdeck](/pitchdeck/), the team can keep the source deck in Figma and choose the right output for the moment:

- web presentation for live walkthroughs
- PDF when a locked summary is needed
- PowerPoint when field edits are unavoidable
- Google Slides when comments from several stakeholders matter most

This is one of the clearest ways to prevent version sprawl. Instead of rebuilding the mutual action plan in three separate tools, the team maintains one master system and exports intentionally.

## Keep dates credible and update cadence obvious

A weak mutual action plan deck usually fails in one of two ways:

- the dates are too vague to help
- the dates are too specific to stay true for more than two days

The better approach is to show meaningful deadlines while also making the update rhythm explicit.

For example:

- target procurement review week
- target legal turnaround window
- target signature range
- target implementation kickoff date

Then clarify how the plan will be maintained:

- updated after each steering call
- revised after security review changes
- reissued when procurement timing moves

That creates realism. Buyers are usually comfortable with a living plan. What they hate is a polished timeline that quietly stops matching reality.

## Treat the deck like a shared operating surface

The MAP deck should not only be for the AE.

It needs to help:

- sales leadership see deal motion
- solutions or implementation teams prepare dependencies
- the buyer champion align internal stakeholders
- procurement and legal understand where they fit

That changes how the slides should read.

Helpful habits:

- title slides with a real decision or milestone
- avoid jargon only your sales team uses
- keep owner labels explicit
- show open risks without theatrical urgency
- make the next step visible on every milestone-heavy slide

The deck should feel like a calm coordination tool, not a disguised closing-pressure tactic.

## A practical MAP deck workflow in Figma

Here is the workflow I would standardize:

1. Map the buying milestones before designing the timeline.
2. Separate narrative slides from commitment slides.
3. Assign an owner and completion signal to each milestone.
4. Choose the export format based on how the buyer will actually use the deck.
5. Update the source deck after each meaningful deal shift instead of patching copies.

That workflow is much healthier than sending a one-off slide summary after every call and hoping everyone is still looking at the same version.

## Before sharing the mutual action plan deck, confirm

- the milestones reflect buyer events, not only internal seller tasks
- each major step has an owner
- completion criteria are visible enough to guide action
- the timeline is specific without pretending certainty you do not have
- export format matches the real stakeholder workflow
- the deck still works when forwarded asynchronously

## Where Pitchdeck helps most

[Pitchdeck](/pitchdeck/) is valuable here because mutual action plans are not purely presentation work and not purely spreadsheet work. They sit between narrative, coordination, and delivery format.

The team needs one source that can stay structured in Figma while still moving cleanly into browser presentations, PDFs, PowerPoint files, or Google Slides when the deal requires it. That reduces version chaos and makes it far easier to keep stakeholders aligned on the actual path to signature.

That is the real win. A mutual action plan deck should not be a ceremonial slide. It should be the clearest shared view of how the deal gets done.

---

---
type: article
title: Documentation Site QA Workflow from Figma
description: Compare live documentation pages against Figma so docs teams can catch layout drift, unreadable code blocks, and broken content hierarchy before readers do.
datePublished: 2026-06-20T00:00:00.000Z
dateModified: 2026-06-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-documentation-site-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-documentation-site-qa-workflow-from-figma.md
---

# Documentation Site QA Workflow from Figma

Documentation sites fail differently from marketing pages.

A docs page can be technically published, fully searchable, and even factually correct while still feeling harder to use than the designed version. The left nav wraps badly. Code blocks crowd the layout. Callout styles drift. Table spacing breaks on smaller screens. An embedded video pushes the page rhythm off. No single issue looks catastrophic, but the page becomes tiring to read and harder to trust.

That is why documentation QA deserves its own workflow.

[Pixelay](/pixelay/) is a strong fit because it compares Figma designs against real live sites, staging environments, and local builds directly in the browser. For docs teams, that is especially helpful because documentation layouts often degrade through dozens of small implementation and CMS changes rather than one obvious launch bug.

This article is intentionally different from nearby Pixelay content like [Figma to Web Build QA for Marketing Sites](/articles/pixelay-figma-to-web-build-qa-for-marketing-sites/), [Modal and Drawer QA Workflow from Figma](/articles/pixelay-modal-and-drawer-qa-workflow-from-figma/), and [Preview Environment Design QA Workflow for Frontend Teams](/articles/pixelay-preview-environment-design-qa-workflow-for-frontend-teams/). Those focus on marketing surfaces, late-stage overlays, or broader preview-environment review. This one is specifically about documentation sites, where typography density, navigation behavior, code formatting, and instructional hierarchy carry more of the user experience than flashy hero sections ever will.

## Docs QA is really readability QA plus implementation QA

That is what makes it different.

On a marketing page, the team may be judging persuasion, hierarchy, and visual polish. On a documentation page, the questions are often more practical:

- can the reader find the next step quickly?
- are headings, code blocks, and notes clearly separated?
- does the layout still feel calm on long pages?
- does the implemented page preserve the instructional hierarchy from the design?

The damage from drift is subtler, but real:

- readers miss steps
- embedded examples feel harder to parse
- navigation confidence drops
- the docs look less maintained than they really are

That is why docs QA should not be reduced to "the page basically matches."

## Review the parts of docs pages that change the reading experience most

Documentation layouts have a few high-risk zones that deserve extra attention:

- left navigation and current-page state
- heading rhythm
- paragraph width and spacing
- code blocks
- tables
- tabbed examples
- callout boxes
- embedded video or media

If any of those feel slightly wrong, the whole page can become harder to use even when the text is accurate.

For example:

- a code block with cramped line height feels harder to trust
- a warning callout that blends into body text loses urgency
- a crowded table makes configuration differences harder to compare
- a sticky table of contents that shifts at the wrong breakpoint makes long pages feel unstable

These are not only design details. They shape whether the documentation actually helps.

## Compare real content states, not ideal empty shells

Docs pages are often reviewed too early or too cleanly.

The design file may show:

- short code examples
- tidy headings
- one compact callout
- perfect-length navigation labels

The live page may contain:

- longer commands
- denser notes
- two stacked alerts
- generated table content
- version labels or badges

That means Pixelay review is most valuable when the page includes realistic documentation content, not only the simplest example state. Otherwise the team approves the layout and misses the very things that cause the implemented page to strain under real usage.

## Docs drift often comes from content, not just CSS

This is a useful distinction to make during QA.

Some docs issues are clearly implementation problems:

- wrong spacing tokens
- broken breakpoint behavior
- inconsistent heading sizes
- code styling regressions

Others come from content pressure:

- headings got longer
- the command sample expanded
- an extra warning note was added
- a table gained more columns
- translated labels made the side nav wrap

[Pixelay](/pixelay/) helps reveal the mismatch either way, but the fix path changes depending on the cause. Calling everything a "frontend bug" usually slows docs teams down because many issues are really content-layout coordination problems.

## Check breakpoints where docs pages quietly get worse

Documentation pages often degrade in more subtle ways than marketing pages on smaller screens.

Typical examples:

- side navigation becomes harder to scan
- code blocks force awkward horizontal scrolling
- tab labels wrap unpredictably
- admonitions dominate the page width
- tables lose readability faster than expected

The page may still be technically usable, but the reading experience becomes heavier.

This is exactly where overlay comparison is valuable. Instead of relying on memory or subjective comments like "the mobile docs feel a bit off," the team can compare the built page against the intended Figma layout and spot where hierarchy or density changed.

If your documentation also has localized variants, combine this review with [Localized Website QA Workflow from Figma](/articles/pixelay-localized-website-qa-workflow-from-figma/) so translated nav labels, headings, and callouts get checked intentionally.

## Review navigation and wayfinding as part of visual QA

Docs teams sometimes treat nav behavior as purely informational and separate from layout review.

That is a mistake.

Wayfinding is one of the most important visual jobs in documentation:

- active states
- section grouping
- breadcrumb rhythm
- anchor link clarity
- table of contents depth

If the design gave the page a clean wayfinding system and the implementation weakens it, the documentation becomes harder to use even when every paragraph remains intact.

Pixelay is especially helpful here because nav drift is often visible long before it becomes a reported user complaint.

## A practical docs-site QA workflow

I would run it like this:

1. Compare the implemented docs page against the intended Figma design in Pixelay.
2. Start with reading-critical zones: nav, headings, code blocks, tables, and callouts.
3. Review one realistic long-content state, not only the ideal short example.
4. Check key responsive breakpoints where density or hierarchy may degrade.
5. Label each mismatch as implementation drift, content pressure, or intentional divergence.

That keeps the review operational. The team learns what changed, why it changed, and who should fix it.

## Before signing off a documentation page, confirm

- navigation still feels clear and scannable
- heading rhythm matches the intended hierarchy
- code blocks remain readable at real content length
- tables and callouts do not overpower the page at smaller breakpoints
- realistic docs content still fits the layout well
- differences are categorized instead of dumped into one vague QA bucket

## Where Pixelay helps most

[Pixelay](/pixelay/) does not replace editorial review or technical accuracy checks. Documentation still needs correct content.

What Pixelay improves is the visual side of documentation quality: the part where a correct page can still become harder to use through small implementation drifts, cramped code treatment, weaker hierarchy, or changing content density. Those are exactly the issues that accumulate quietly when docs evolve over time.

If your docs team already designs helpful documentation in Figma, do not stop QA at "the page is live." Use Pixelay to compare the real implementation against the intended reading experience, and the documentation will stay clearer as the library grows.

---

---
type: article
title: Knowledge Base Screenshot Localization Workflow
description: Prepare localized help center screenshots from Figma without bloating docs pages or shipping mismatched UI images across languages.
datePublished: 2026-06-20T00:00:00.000Z
dateModified: 2026-06-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-knowledge-base-screenshot-localization-workflow/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-knowledge-base-screenshot-localization-workflow.md
---

# Knowledge Base Screenshot Localization Workflow

Knowledge base screenshots get messy the moment a help center grows beyond one language.

The English article ships first. Then support needs French next week, German after that, and Japanese before the next release. Suddenly the team is not only translating copy. It is also managing screenshot crops, annotation text, file names, CMS uploads, and page-weight issues across several locales at once.

That is where [TinyImage](/tinyimage/) helps. It keeps screenshot export, compression, and format decisions inside the Figma workflow instead of forcing docs teams into a second pass of manual image cleanup after the localized article is already written.

This article is intentionally different from nearby TinyImage pieces like [Documentation Screenshot Workflow for Support Teams](/articles/tinyimage-documentation-screenshot-workflow-for-support-teams/), [CMS Image Publishing Workflow from Figma](/articles/tinyimage-cms-image-publishing-workflow-from-figma/), and [Image Compression Handoff Checklist for Developers](/articles/tinyimage-image-compression-handoff-checklist-for-developers/). Those focus on general documentation visuals, broader CMS publishing, or developer-facing handoff. This one is specifically about multilingual knowledge base libraries, where every screenshot has to stay accurate across locales without quietly making the docs heavier and harder to maintain.

## Localization screenshots fail when the team treats them like ordinary exports

The usual failure mode is simple.

Someone duplicates the English screenshots, swaps in translated UI, exports a new batch, uploads them manually, and hopes the article still feels coherent. That can work for one page. It breaks down fast when the library includes:

- setup guides
- settings walkthroughs
- billing articles
- troubleshooting steps
- product-update notes
- admin permissions flows

The screenshot set starts drifting because each locale introduces slightly different pressure:

- longer navigation labels
- translated button widths
- different date or currency formats
- region-specific legal copy
- alternate support or billing wording

The goal is not to produce "the same image in another language." The goal is to preserve the same instructional value after the UI has changed shape.

## Decide which screenshots truly need localization

Not every help center image deserves a fully localized version.

Before exporting anything, split the screenshots into three buckets:

### 1. UI-critical screenshots

These must usually be localized because the reader needs the visible labels to match the article instructions.

Examples:

- settings panels
- menu navigation
- onboarding steps
- billing or subscription screens
- permission dialogs

### 2. Conceptual screenshots

These may not need full localization if the image is mainly proving layout or product context.

Examples:

- dashboard overviews
- hero screenshots in overview articles
- generic product architecture visuals

### 3. Decorative or repeated screenshots

These are the first place to reduce duplication. If five locales all show the same soft-background product shot with no readable labels, one lighter shared asset may be enough.

This triage matters because localized screenshot libraries get expensive fast. The most maintainable docs teams localize only where image-language alignment actually helps the reader complete the task.

## Crop for the translated UI, not the original English layout

This is the most common screenshot localization mistake.

The English crop is approved first, so the team keeps reusing it even when translated labels change the balance of the interface. Then the localized image feels cramped, clipped, or strangely empty.

A better rule is:

- preserve the instructional focus
- not the exact crop rectangle

If the German settings label is longer, the crop may need more room. If a Japanese modal has shorter text, the crop may be tightened. If a translated tooltip changes where the eye lands, the screenshot should adapt.

That is why localization review should happen in the Figma source first. The team can compare the translated UI state and export the version that best teaches the step, instead of blindly reproducing the English composition.

## Build filename rules that survive multiple locales

Knowledge base screenshot chaos is often a naming problem before it is a quality problem.

If the CMS or docs repo receives files named:

- `settings-final.png`
- `settings-final-2.png`
- `billing-new-fr.png`
- `screenshot-4.png`

the library becomes unmaintainable almost immediately.

Use names that expose three things:

1. article or flow
2. step or screenshot purpose
3. locale

For example:

- `account-security_2fa-settings_en`
- `account-security_2fa-settings_fr`
- `billing-update_payment-method_de`
- `workspace-invite_accept-dialog_ja`

This is where [TinyImage](/tinyimage/) is especially useful. Compression, format choice, and export settings can stay consistent while the naming system stays deliberate across the localized batch.

## Optimize for docs reading conditions, not design-file sharpness alone

Localized screenshots usually end up inside narrow article columns, accordion panels, or help center cards. That changes what "good quality" means.

The key questions are:

- can the translated labels still be read at article width?
- is the image light enough for long pages with many step visuals?
- does the screenshot still feel sharp after the docs platform touches it?
- is the format appropriate for this kind of UI detail?

For most help center screenshots, the real decision is not "maximum quality versus maximum compression." It is "what is the lightest export that still preserves instructional clarity in the translated UI?"

That tradeoff matters even more for languages where the screenshot includes:

- denser side navigation
- wrapped button text
- multi-line form hints
- longer plan names or compliance labels

If the screenshot only looks readable in the design file at 200 percent zoom, it is not ready for the docs page.

## Review screenshot and article text together

Many localization issues are not strictly inside the image.

The mismatch happens between the screenshot and the article step text:

- the image shows a renamed button
- the article still uses the English label
- the screenshot reflects a newer UI state than the translated instructions
- a caption refers to a callout that was cropped out

That is why docs localization should include one pass where the reviewer sees:

- the localized screenshot
- the translated instruction
- the final article layout

Without that combined view, teams often approve translation and screenshot assets separately, then discover the page reads awkwardly only after publishing.

## Keep annotated screenshots rare and intentional

Localized annotations are expensive.

Every arrow label, callout chip, and highlighted instruction creates more text to translate and more layout to manage across locales. If the team annotates too aggressively, the screenshot workflow becomes fragile.

I would only annotate when the image would otherwise be ambiguous.

Good candidates:

- one important control inside a dense settings panel
- one warning state that the reader must not miss
- one step indicator in a complex sequence

Bad candidates:

- labeling every region of the screen
- adding paragraph-length callouts inside the image
- translating commentary that would read better as article text underneath

For multilingual docs, fewer in-image words usually means a more durable system.

## A practical export rhythm for localized help center screenshots

This is the workflow I would standardize:

1. Identify which screenshots truly require locale-specific exports.
2. Review the translated UI state in Figma before approving crops.
3. Export with locale-aware filenames and consistent format rules.
4. Check compression against the actual docs-column width, not just the original frame.
5. Review screenshot, caption, and instruction text together before upload.

That process is slower than random batch export, but much faster than repairing broken screenshot libraries across five languages a month later.

## Before publishing a localized screenshot set, confirm

- each screenshot exists for a real instructional reason
- the crop reflects the translated UI, not the old English layout
- filenames identify purpose and locale clearly
- image weight stays reasonable for docs pages with multiple screenshots
- translated labels remain readable at final article width
- screenshots and article instructions still use the same UI terminology

## Where TinyImage fits best

[TinyImage](/tinyimage/) does not solve localization strategy on its own. The team still needs good translation review and smart content decisions.

What it does remove is the messy export bottleneck between a localized Figma screen and a web-ready help center image. That matters because docs teams rarely fail from lack of screenshot intent. They fail from repetitive cleanup, inconsistent exports, and image libraries that get harder to trust with every new locale.

If your help center is expanding internationally, treat screenshot localization like a real production workflow. Use TinyImage to keep the export side disciplined, so the documentation can stay clear without becoming heavier and harder to maintain.

---

---
type: article
title: App Install Banner QA Workflow for Performance Teams
description: QA app install banners from Figma before launch by checking deep-link paths, store badges, CTA logic, animation pacing, and small-size readability.
datePublished: 2026-06-19T00:00:00.000Z
dateModified: 2026-06-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-app-install-banner-qa-workflow-for-performance-teams/
markdownUrl: https://www.hypermatic.com/articles/bannerify-app-install-banner-qa-workflow-for-performance-teams.md
---

# App Install Banner QA Workflow for Performance Teams

App install banners fail in ways that normal campaign banners do not.

The creative is small. The destination logic is touchy. The CTA may need to behave differently on iOS and Android. Store badges, legal copy, and offer language compete for very little space. And if the team is running multiple sizes, the concept that looked fine in the hero placement can fall apart almost instantly in the smaller inventory.

That is where [Bannerify](/bannerify/) fits well. It keeps animation, export, preview, and packaging inside Figma, which is especially helpful when the creative team and performance team need to review the same asset family before ad trafficking begins.

This article is intentionally different from nearby Bannerify content like [Display Ad QA Checklist Before Launch](/articles/bannerify-display-ad-qa-checklist-before-launch/), [HTML5 Ad Click Tag Checklist](/articles/bannerify-html5-ad-click-tag-checklist/), and [When to Use HTML5 vs GIF vs MP4 Banner Exports](/articles/bannerify-when-to-use-html5-vs-gif-vs-mp4-banner-exports/). Those cover general launch QA, click-tag handling, or format choice. This one is about app install banners, where destination logic, store treatment, and mobile-first persuasion create a more specific review problem.

## App install creative has two jobs at once

A normal banner may only need to drive a click.

An app install banner usually needs to:

- communicate the app value quickly
- make the destination feel trustworthy

That second job is where many teams slip.

The user is not only deciding whether the offer is interesting. They are also deciding whether tapping the creative will take them somewhere expected and legitimate. Small mistakes in badge treatment, CTA wording, or destination logic can damage that trust fast.

## Define the destination path before final creative review

This should happen earlier than many teams expect.

Before QA, the team should know:

- whether the banner points to an app store listing, a mobile landing page, or a deferred deep-link flow
- whether iOS and Android use different destinations
- who owns the final URL or deep-link mapping
- whether the platform injects the destination at serve time

These are not ad-ops-only details. They influence the creative review itself.

For example, a banner saying "Download the app" may be fine for a store destination. A banner saying "Open the app" implies a different experience. If the destination logic is unsettled, the creative language is more likely to drift into vague territory.

## Review the smallest sizes first

App install banners often pass in the large placements and fail in the compact ones.

That is because the small units force the real prioritization question:

- app name
- product value
- visual proof
- store badge
- CTA

You cannot maximize all of them equally.

A strong QA pass should start by asking whether the smallest size still communicates:

- what the app is
- why the user should care
- what the next action is

If the answer requires squinting, the large-size version may be over-designed relative to the underlying concept.

## Keep store badges and platform cues intentional

Store badges can help trust, but they also consume scarce space.

Use them deliberately.

Check:

- whether the badge is necessary in every size
- whether iOS and Android variants need distinct treatment
- whether the badge competes with the primary CTA
- whether the app icon or UI proof already carries enough recognition

The point is not to blindly include every app-install convention. The point is to decide which trust signals matter most in the specific placement family you are shipping.

## QA the CTA against the actual install state you are promising

App install banners often borrow lazy CTA language:

- Get started
- Learn more
- Try now

That can work for upper-funnel campaigns, but it often weakens performance or creates ambiguity when the banner is clearly install-oriented.

Check whether the CTA matches the real user outcome:

- install app
- download on iPhone
- get the Android app
- open app offer
- view in app store

The exact wording depends on the platform and destination, but it should not feel generic just because the banner is small.

## Animation pacing matters more than teams think

App install banners often use short motion to reveal:

- brand
- app UI
- offer
- CTA

The mistake is treating those as equal beats.

In many app install units, the UI proof and the CTA deserve more emphasis than decorative movement. If the first few seconds are spent on flourish and the app benefit appears too late, the banner wastes its most valuable attention window.

Bannerify is especially useful here because the team can preview the creative timing in the same workflow used to prepare the export. That keeps the motion review close to the original Figma concept instead of discovering pacing problems after packaging.

## Separate stakeholder preview assets from trafficking assets

Performance teams, designers, and media buyers often need different things.

Stakeholders may need:

- preview links
- simplified review exports
- a quick sense of the concept family

Ad ops may need:

- final ZIP packages
- click behavior clarity
- destination notes
- fallback or alternate format decisions

Keeping those jobs separate reduces late-stage confusion. A stakeholder preview should not be mistaken for the trafficking-ready package, and the trafficking-ready package should not carry unresolved creative questions.

If your team needs a stronger handoff rhythm after QA, [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/) is the best supporting process.

## Check app install logic across size families, not one by one

A family-level review is important because app install creative often contains:

- several dimensions
- OS-specific versions
- localized text variants
- promotional date or pricing variations

That means one late update can quietly break only part of the set.

Look for:

- one size using the wrong CTA
- one variant losing the store cue
- one localized version pushing the CTA below the fold
- one OS version pointing to the wrong expectation

These are exactly the kinds of issues that survive when every banner is reviewed in isolation.

## A practical app install banner QA routine

For most performance and creative teams, this is enough:

1. Define the install destination logic before final creative review.
2. Review the smallest placements before celebrating the hero sizes.
3. Check whether store badges and app cues help trust more than they hurt clarity.
4. Match CTA wording to the real install outcome.
5. Preview animation timing with the app value and CTA in mind.
6. Separate stakeholder-preview assets from trafficking-ready packages.

## Before the campaign is ready, confirm

- the banner promise matches the destination path
- the smallest sizes still communicate the app and next action clearly
- store or OS cues are intentional, not automatic clutter
- CTA wording fits the install state being promised
- motion does not delay the persuasive part of the message
- family-level review caught variant drift before trafficking

## Where Bannerify helps most

[Bannerify](/bannerify/) helps because app install campaigns are rarely one creative and one export. They are a coordinated banner family with timing, packaging, and QA decisions that need to stay close to the design source.

That is the real advantage. Instead of discovering deep-link ambiguity, CTA drift, or small-size weakness after export, the team can resolve those issues earlier while the Figma source is still easy to adjust.

---

---
type: article
title: Packaging Artwork Migration Workflow from Illustrator to Figma
description: Move packaging artwork from Illustrator into Figma with a workflow that protects linked assets, preserves editable content where possible, and speeds up brand refreshes.
datePublished: 2026-06-19T00:00:00.000Z
dateModified: 2026-06-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-packaging-artwork-migration-workflow-from-illustrator-to-figma/
markdownUrl: https://www.hypermatic.com/articles/convertify-packaging-artwork-migration-workflow-from-illustrator-to-figma.md
---

# Packaging Artwork Migration Workflow from Illustrator to Figma

Packaging files are often where brand work gets trapped.

The consumer brand has a product refresh coming. Marketing wants updated visuals. Product wants the on-pack hierarchy reflected in new web assets. Design wants to reuse the existing artwork instead of redrawing every label and carton from scratch. But the source files live in old Illustrator packages with linked images, print-specific clutter, and file structures nobody wants to touch casually.

That is where [Convertify](/convertify/) can help. It gives teams a practical way to bring Illustrator-based artwork into Figma so packaging refreshes can happen closer to the rest of the brand workflow.

This article is intentionally different from nearby Convertify content like [Illustrator to Figma File Preparation Checklist](/articles/convertify-illustrator-to-figma-file-preparation-checklist/), [Figma to Illustrator workflow for marketing teams](/articles/convertify-figma-to-illustrator-workflow-for-marketing-teams/), and [Brand Guidelines PDF to Figma Workflow](/articles/convertify-brand-guidelines-pdf-to-figma-workflow/). Those pieces cover prep checks, general cross-tool workflow, or reference-document migration. This one is specifically about packaging artwork, where print history, linked assets, and variant-heavy label systems create different risks.

## Packaging migration is usually a reuse problem, not a blank-canvas problem

Most packaging teams are not trying to reinvent every label.

They usually need to:

- update claims or legal text
- refresh hierarchy for a rebrand
- adapt one product family across variants
- repurpose the artwork for web, retail, or sales collateral
- bring print-era assets into a faster collaborative design environment

That changes the migration goal.

The real win is not "convert everything perfectly." It is "recover enough editability and structure that the next brand update is no longer painful."

## Collect the real source package before you import

Packaging files fail early when the team starts from the wrong file.

Before moving anything, confirm:

- which Illustrator file is current
- whether linked images or fonts are missing
- whether dielines, regulatory marks, or printer notes are in the same file
- which product variants share a common structure

This step matters because packaging archives are often messy. The prettiest AI file in the folder may not be the operationally correct one.

If the brand has multiple SKUs, it also helps to decide whether you are migrating:

- one hero SKU as the master
- one entire range
- only the shared label structure

Trying to import every variant before understanding the system usually creates cleanup work with very little strategic value.

## Separate print-only artifacts from reusable brand structure

A packaging file often contains two kinds of information:

### Reusable design structure

- typography hierarchy
- panel layout
- color coding
- product naming
- iconography
- brand marks

### Print-production baggage

- dielines
- trim guides
- technical printer marks
- old revision notes
- disconnected asset fragments

Both may be important, but they do not need the same treatment inside Figma.

The faster the team separates those layers conceptually, the cleaner the migration becomes. Often the most useful outcome is not one perfect imported file. It is one Figma-ready packaging source plus a lighter reference layer for print-specific details that still need to be consulted.

## Decide where editability matters most

One of the biggest migration mistakes is pretending every element needs the same level of editability.

For packaging refresh work, the highest-value editable areas are usually:

- product name
- flavor or variant naming
- claims and legal copy
- badges and callouts
- core layout blocks

Some decorative vectors or archival background effects may matter much less if the goal is speed and operational reuse.

That is why [Convertify](/convertify/) is useful in this workflow. It gives teams a bridge into Figma, but the team still needs to decide which parts should become living design elements and which parts can remain closer to reference art.

## Migrate one representative SKU before the full range

If the packaging system spans many products, do not start with a batch conversion mentality.

Pick one representative file that includes:

- real copy density
- one or two linked images
- the standard variant structure
- any tricky badges, seals, or nutrition panels

That single migration tells you a lot:

- how much cleanup the artwork needs
- whether text remains usable enough
- which linked assets were fragile
- what the post-import naming and grouping should look like

Once that master pattern is stable, the wider range becomes much easier to handle.

## Use the import as the start of cleanup, not the end of it

Successful packaging migration always has a post-import cleanup phase.

After the artwork reaches Figma, review:

- text layers that should stay editable
- grouped objects that need clearer naming
- masks or clipping constructs that came across awkwardly
- images that need relinking or replacement
- repeated elements that could become shared components

This is where the migration becomes strategically useful. The point is not only getting the artwork into Figma. It is turning that imported structure into something the broader team can actually maintain.

If the packaging refresh will later influence other channels, this is also a good moment to align with reference assets from [Brand Guidelines PDF to Figma Workflow](/articles/convertify-brand-guidelines-pdf-to-figma-workflow/).

## Review packaging copy and variant logic early

Packaging files often hide content drift:

- outdated claims
- retired SKU names
- mismatched measurement units
- inconsistent benefit ordering
- legal copy that no longer matches the current rules

That is why packaging migration should not be treated as purely technical. Once the art is inside Figma, use the move as an opportunity to inspect:

- what text should be standardized across variants
- what can become a tokenized or reusable pattern
- which product-specific differences need stronger documentation

The import is often the first time the team can see the packaging system cleanly enough to make those decisions.

## Keep web and print expectations separate

Another common failure mode is expecting one migrated packaging file to satisfy both digital reuse and print production instantly.

Sometimes that is possible. Often it is not.

A practical rule is:

- use the migrated Figma artwork to accelerate design collaboration, brand refreshes, and digital adaptation
- keep a deliberate boundary where print-vendor signoff or technical prepress work still needs specialist review

That boundary is healthy. It prevents the team from overclaiming what the migration solved while still capturing the major operational benefit.

## A practical packaging migration rhythm

For most in-house brand or packaging teams, this sequence works well:

1. Gather the real Illustrator source package and linked assets.
2. Choose one representative SKU or label family first.
3. Separate reusable design structure from print-only artifacts.
4. Import into Figma with Convertify.
5. Clean up the imported file around editability, naming, and reusable parts.
6. Expand to the wider range only after the first migrated file proves the pattern.

## Before calling the migration useful, confirm

- the source package was the current operational file
- linked assets and major text areas survived well enough to edit
- print-only clutter is not dominating the Figma version
- reusable packaging structure is clearer than it was before
- the first migrated SKU created a repeatable pattern for the range
- the team knows which print-specific checks still require manual judgment

## Where Convertify helps most

[Convertify](/convertify/) is valuable here because packaging artwork rarely needs a perfect theoretical conversion. It needs a practical path out of tool lock-in.

If your brand team keeps delaying packaging refreshes because the Illustrator archive feels too brittle or too isolated, a packaging migration workflow through Convertify can turn those files back into usable working assets. That is usually the real bottleneck worth removing.

---

---
type: article
title: Push Notification and In-App Message Copy Review Workflow in Figma
description: Review notification and in-app message copy in Figma so short-form lifecycle messages stay clear across character limits, states, and mobile surfaces.
datePublished: 2026-06-19T00:00:00.000Z
dateModified: 2026-06-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-push-notification-and-in-app-message-copy-review-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-push-notification-and-in-app-message-copy-review-workflow-in-figma.md
---

# Push Notification and In-App Message Copy Review Workflow in Figma

Short-form lifecycle copy looks easy right up until it is live.

A push notification truncates the real message. An in-app banner promises the wrong next step. A toast uses a different product term than the email that led into it. A modal headline says one thing while the compact reminder on mobile says another. None of these issues feel large in isolation, but together they make the product feel less coordinated than it should.

That is exactly the kind of workflow where [CopyDoc](/copydoc/) helps. The plugin makes it much easier to export, review, update, and re-import Figma text when the message system spans many tiny surfaces instead of one long page.

This article is intentionally different from nearby CopyDoc content like [Form Microcopy Review Workflow in Figma](/articles/copydoc-form-microcopy-review-workflow-in-figma/), [UI Character Limit Review Workflow in Figma](/articles/copydoc-ui-character-limit-review-workflow-in-figma/), and [Signup Flow Copy QA Workflow in Figma](/articles/copydoc-signup-flow-copy-qa-workflow-in-figma/). Those focus on forms, general length constraints, or onboarding journeys. This one is specifically about notifications and in-app lifecycle messages, where brevity, sequencing, and consistency matter more than long-form explanation.

## Notification systems drift because the messages live in too many places

A team may have all of these at once:

- push notifications
- in-app banners
- inline prompts
- toasts
- dismissible upgrade notices
- reminder modals

They often share one campaign or product event, but the copy gets reviewed separately because each surface sits in a different frame, product area, or handoff file.

That fragmentation creates predictable problems:

- different verbs for the same action
- inconsistent product names
- mismatch between short and long versions of the same message
- CTA labels that do not match the destination
- locale or character-limit breakage appearing late

## Start by grouping messages by event, not by screen

The most helpful review pattern is event-based.

Instead of reviewing one frame at a time, group the copy by the user moment it belongs to:

- trial ending soon
- comment received
- report ready
- payment failed
- feature now available
- teammate invited you

Then gather the surfaces that support that moment:

- push notification
- notification center item
- in-app banner
- modal or detailed follow-up state

This immediately reveals whether the system sounds coherent or accidental.

For example, if the push says "Upgrade now," the banner says "Choose a plan," and the modal says "Continue to billing," the team may have a naming problem rather than three independent copy tasks.

## Review notification copy as a sequence, not as standalone lines

Notification text is usually part of a chain.

One message leads to another action, which leads to another state. That is why these strings should be reviewed in sequence:

1. trigger message
2. action label
3. destination state
4. confirmation or follow-up message

If the chain is not coherent, the product feels sloppy even when each individual line is grammatically fine.

[CopyDoc](/copydoc/) is especially useful here because the strings can be exported into a format product, lifecycle, and UX writing teams can inspect together instead of manually hopping between dozens of Figma frames.

## Treat brevity as a product constraint, not a writing style preference

Push and in-app messages do not get the luxury of long explanation.

That means every line has to answer:

- what happened
- why it matters
- what the user should do next

but only with the space the surface actually allows.

That is why notification review should deliberately check:

- compact versions
- longer fallback versions
- CTA length
- truncation risk
- keyword clarity

If your team already uses CopyDoc for broader character-limit work, [UI Character Limit Review Workflow in Figma](/articles/copydoc-ui-character-limit-review-workflow-in-figma/) is the right adjacent process. Notifications often expose those issues more brutally than full-page UI because they have almost no spare room.

## Build a message hierarchy before editing individual lines

A useful notification system usually has three levels of detail:

### Level 1: glance message

The fastest summary:

- "Your report is ready"
- "Payment failed"
- "Trial ends tomorrow"

### Level 2: action framing

The next-step guidance:

- "View the report"
- "Update billing details"
- "Choose a plan to keep access"

### Level 3: expanded context

Shown only on the larger in-app surface if needed:

- what changed
- why the message matters
- what the consequence is if the user ignores it

When the team does not define these levels, the short-form copy tries to carry too much and becomes cluttered. The expanded surface then has nothing unique to add.

## Review notification language against the destination screen

This is one of the most overlooked checks.

A push or banner can sound perfectly reasonable until the user taps through and lands on a screen using different language entirely.

Check whether:

- the CTA uses the same term as the destination page
- plan names or feature names match exactly
- urgency levels feel consistent
- the follow-up state confirms the promise the notification made

If the message says "Review invoice" and the next screen says "Billing history," that may be workable. If the product says "Resume subscription" and the destination says "Upgrade plan," trust starts to erode.

## Localize and variant-check earlier than feels necessary

Notification systems break fast under localization pressure.

The short surfaces that felt neat in English often become cramped or ambiguous after translation. The same applies when one campaign needs:

- multiple plan names
- regional pricing references
- different product nouns
- different CTA wording by platform

That is why I like reviewing notification sets with their likely variants before the final strings are declared done. Short-copy surfaces do not tolerate last-minute expansion gracefully.

## Use a single review table for notification families

For teams doing this repeatedly, one review sheet or exported text table helps enormously.

Columns might include:

- event
- surface
- message
- CTA
- destination
- character risk
- locale or variant notes

That simple structure turns scattered UI text into a manageable system. It also makes approvals easier because reviewers can comment on the family of messages together instead of evaluating isolated screenshots.

## A practical notification-copy workflow

For most product and lifecycle teams, this is enough:

1. Group messages by user event rather than by frame.
2. Review the push, banner, and follow-up surfaces as one sequence.
3. Define glance, action, and expanded layers of message detail.
4. Check compact-copy constraints before polishing longer explanatory text.
5. Compare notification wording against the destination screen language.
6. Stress-test likely localization and variant cases before re-importing the final copy.

## Before the message system ships, confirm

- each event has one coherent set of surface-specific messages
- short and long versions do not contradict each other
- CTAs match the destination language exactly enough
- the most important messages survive character pressure
- likely variants or locales were checked early
- the review happened as a system, not one screenshot at a time

## Where CopyDoc helps most

[CopyDoc](/copydoc/) helps because notification systems create a disproportionate amount of content drift for how little text they contain. The problem is not long-form writing. It is coordination across many small, stateful surfaces.

If your team keeps finding lifecycle copy issues only after messages are live, a stronger notification-review workflow inside CopyDoc can bring those problems forward into the design stage, where they are much cheaper to fix.

---

---
type: article
title: Renewal Reminder Email Workflow for SaaS Teams
description: Design and export renewal reminder emails from Figma with clearer billing messaging, mobile review, and approval steps before they reach customers.
datePublished: 2026-06-19T00:00:00.000Z
dateModified: 2026-06-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-renewal-reminder-email-workflow-for-saas-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-renewal-reminder-email-workflow-for-saas-teams.md
---

# Renewal Reminder Email Workflow for SaaS Teams

Renewal reminder emails are one of the highest-trust messages a SaaS company sends.

The customer is already paying. The relationship is real. The billing date matters. The wording matters. A vague or sloppy renewal email can create avoidable churn, support tickets, and finance friction even when the product itself is doing fine.

That is where [Emailify](/emailify/) can help. It lets teams design and export production-ready HTML email workflows directly from Figma, which is especially useful when billing, lifecycle, product, and brand concerns all need to be reviewed in one place before send.

This article is intentionally different from nearby Emailify content like [Trial Expiration Email Workflow for SaaS Teams](/articles/emailify-trial-expiration-email-workflow-for-saas-teams/), [Lifecycle Email Workflow for Marketing Ops Teams](/articles/emailify-lifecycle-email-workflow-for-marketing-ops-teams/), and [HTML Email Compliance Review Workflow](/articles/emailify-html-email-compliance-review-workflow/). Those cover pre-conversion messaging, broader lifecycle systems, or compliance checks across campaigns. This one is specifically about renewal reminders, where the message has to balance clarity, billing accuracy, and customer trust.

## Renewal emails are not just another lifecycle template

The workflow is different because the customer is already in an active commercial relationship.

A renewal reminder usually needs to answer practical questions fast:

- what is renewing
- when it renews
- what happens next
- whether action is required
- where the customer can check plan or billing details

That means fluffy copy, generic CTA wording, or unresolved billing ambiguity costs more here than it does in a softer nurture campaign.

If the product team treats renewal emails like ordinary promotional sends, the result often feels too marketing-led when the customer really wants operational certainty.

## Separate informational reminders from intervention moments

Not every renewal email has the same job.

The cleanest workflows distinguish between:

### Reminder emails

These are mainly informational:

- your plan renews on this date
- your current plan or seat count is this
- here is where to review billing details

### Action-trigger emails

These ask the customer to do something:

- update payment method
- confirm plan changes
- review invoice owner or seat count
- contact support before renewal if something is wrong

This distinction matters because the design, copy, and CTA should change with the job.

An informational reminder should feel calm and precise. An intervention email needs a clearer action hierarchy and stronger next-step signaling.

## Bring billing, product, and lifecycle owners into one review pass

Renewal reminders often get awkward because every team reviews them separately.

Marketing checks tone.
Product checks screenshots or account references.
Finance checks wording later.
Support discovers the confusion after launch.

A stronger workflow puts the risky elements together inside the Figma review:

- subject line and preheader
- renewal date language
- plan naming
- seat or billing-frequency references
- primary CTA
- fallback support path
- footer or policy clarifications if needed

[Emailify](/emailify/) is useful here because the design system, responsive layout, and production export path stay connected while those teams review one source.

## Design the message around the billing question the customer will ask first

Every good renewal email should make the first customer question easy to answer.

Usually that question is one of these:

- "Am I being charged automatically?"
- "On what date?"
- "For which plan?"
- "Do I need to change anything before then?"

That means the core message block should not get buried under decorative storytelling.

For most renewal reminders, the layout works best when the first viewport clearly establishes:

- what is renewing
- when it is renewing
- whether action is required

Everything else is secondary.

If the design starts with brand flourish and reaches the billing reality too late, the email feels evasive even when the information is technically present.

## Review mobile layout as if the customer is skimming under time pressure

Renewal emails are often opened quickly on mobile.

That changes the QA standard.

You should check whether:

- the renewal date is visible early
- key billing information wraps cleanly
- the CTA still makes sense without extra context
- support or account links are reachable without hunting
- dense legal or policy text is not overwhelming the main action

If your team already has a strong mobile review rhythm, [Mobile Email QA Workflow Before Export](/articles/emailify-mobile-email-qa-workflow-before-export/) is the best companion process here.

## Pair the HTML design with a plain-text mindset

Even when the final email is HTML, renewal reminders benefit from plain-text discipline.

Ask:

- if all styling disappeared, would the message still be unmistakably clear?
- does the CTA language explain the action without relying on button styling?
- are dates, plan names, and support paths easy to parse?

That mindset makes the HTML version better because it forces the content to carry the message honestly.

If your lifecycle team needs both formats in production, [Plain Text and HTML Email Workflow for Lifecycle Teams](/articles/emailify-plain-text-and-html-email-workflow-for-lifecycle-teams/) is the closest related article.

## Watch for quiet drift in plan names and billing rules

Renewal reminders often expose a deeper content-governance problem.

Common issues include:

- retired plan names surviving in older modules
- inconsistent billing-frequency wording
- screenshots showing outdated packaging
- support links pointing to the wrong account path
- different teams using different terms for the same account state

That is why renewal reminder QA should happen close to the real product and billing surfaces, not as a copied send from an old lifecycle file.

This is also a good reason to keep renewal modules simple and intentionally reusable. The more custom fragments a team invents, the more opportunities there are for drift.

## Build a sequence, not only a single template

Many SaaS teams need more than one renewal reminder:

- early heads-up
- one-week reminder
- payment-failure fallback
- final reminder before a plan change

Those should feel like part of one system, not four unrelated campaigns.

It helps to standardize:

- date presentation
- plan naming
- action hierarchy
- support language
- module ordering

That way the lifecycle team can adapt urgency without reinventing the core structure every time.

## A practical renewal reminder workflow

For most SaaS teams, this sequence is enough:

1. Define whether the email is informational or action-oriented.
2. Pull billing-critical strings into one shared design review.
3. Make the renewal date, plan, and next step obvious in the first viewport.
4. Review the email on mobile with skim-reading behavior in mind.
5. Stress-test the message with plain-text clarity, even if the final send is HTML.
6. Check plan names, screenshots, and support paths against the current product reality before export.

## Before the email is ready to export, confirm

- the customer can tell what renews and when
- the CTA matches whether action is actually required
- mobile review did not hide key billing information
- the wording stays clear without relying on decorative layout
- plan names and billing details match current product language
- the template fits the broader renewal sequence instead of standing alone awkwardly

## Where Emailify helps most

[Emailify](/emailify/) helps because renewal reminders sit right at the intersection of brand, lifecycle, and operational trust. The team needs the email to look polished, but more importantly, it needs the message to stay accurate and easy to ship.

That is the real value. A renewal reminder should feel calm, clear, and production-ready long before it reaches the ESP. Keeping the design and export workflow together inside Emailify makes that much easier to achieve.

---

---
type: article
title: Customer Advisory Board Deck Workflow in Figma
description: Build customer advisory board decks in Figma with clearer version control, discussion flow, follow-up exports, and stakeholder-ready presentation formats.
datePublished: 2026-06-19T00:00:00.000Z
dateModified: 2026-06-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-customer-advisory-board-deck-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-customer-advisory-board-deck-workflow-in-figma.md
---

# Customer Advisory Board Deck Workflow in Figma

Customer advisory board decks are easy to underestimate.

They are not purely sales decks. They are not exactly product launch decks. They are not the same as board presentations either. A good CAB deck has to brief customers, spark useful discussion, protect sensitive roadmap context, and still leave the team with something reusable after the session ends.

That is where [Pitchdeck](/pitchdeck/) fits well. It lets teams keep the source presentation inside Figma while still exporting to PowerPoint, Google Slides, Keynote, PDF, or a hosted web presentation depending on how the session will run.

This article is intentionally different from nearby Pitchdeck content like [Board Deck Workflow for Figma Teams](/articles/pitchdeck-board-deck-workflow-for-figma-teams/), [QBR Deck Workflow for Customer Success Teams](/articles/pitchdeck-qbr-deck-workflow-for-customer-success-teams/), and [Product Launch Deck Workflow for Product Marketing Teams](/articles/pitchdeck-product-launch-deck-workflow-for-product-marketing-teams/). Those cover executive governance, account reviews, or broad launch storytelling. This one is about advisory-board sessions where the presentation has to guide a conversation, not just deliver information.

## A CAB deck needs stronger discussion design than a normal status deck

The workflow changes when the goal is feedback instead of one-way narration.

A CAB deck usually needs to do all of this in one session:

- orient customers quickly
- establish the current product context
- show roadmap or concept material without overcommitting
- create space for reactions and priorities
- leave behind a version the internal team can reuse

That means the deck structure should not feel like a long investor narrative or a polished webinar script. It should feel deliberate, but breathable.

If every slide is dense and final-looking, customers tend to react less candidly. If every slide is too rough, the session feels underprepared. CAB decks work best in the middle.

## Split the deck into three layers before designing details

I like to think of advisory board decks as three stacked layers.

### Orientation layer

This gets everyone into the same room mentally:

- agenda
- goals for the session
- quick recap of what changed since the last meeting
- any framing needed around confidentiality or feedback scope

### Discussion layer

This is the actual heart of the meeting:

- product themes
- workflow concepts
- roadmap directions
- decision tradeoffs
- customer prompts

### Follow-up layer

This is what the team needs after the live meeting:

- summary slides
- export-friendly recap pages
- decision notes or next-step placeholders

When teams skip this separation, they often build one dense master deck that is awkward both live and afterward.

## Treat the live session format as a real product decision

Before finalizing slides, decide how the meeting will actually run.

Ask:

1. Will someone present continuously, or will the deck pause often for discussion?
2. Do attendees need a browser-presented experience, a PDF afterward, or an editable file internally?
3. Will the team want analytics on which follow-up deck was reopened later?
4. Are any slides too sensitive for the version that leaves the room?

Those questions matter because CAB decks often have two lives:

- the live discussion artifact
- the post-session recap artifact

[Pitchdeck](/pitchdeck/) helps because those outputs do not have to come from different tools. The same Figma source can support a live presentation, a shared web version, and a follow-up export without rebuilding everything elsewhere.

If your team is still deciding how those outputs differ, [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/) is the closest supporting read.

## Design slides to invite reaction, not just approval

This is where CAB decks often go wrong.

Teams polish the deck so heavily that every slide implies the decision is already made. That makes customers less likely to say what they really think.

A stronger discussion slide usually makes one thing clear:

- what you are proposing
- what tradeoff exists
- what feedback would actually help

For example, a roadmap-concept slide is more useful when it frames:

- the customer problem
- the proposed direction
- the open question

instead of pretending the feature is already settled.

That does not mean the deck should look unfinished. It means the slide logic should make room for response.

## Keep reusable modules for recurring CAB sections

Customer advisory programs usually repeat.

That is why CAB deck production benefits from reusable slide patterns:

- agenda
- meeting goals
- "since last time"
- concept overview
- prioritization exercise
- feedback capture or summary slide

These modules help the team stay consistent from session to session without copying an old deck forward blindly.

That matters even more when multiple teams contribute content. Product may own concept slides, research may add supporting evidence, and customer success may want account context. A modular Figma source is much easier to govern than several presentation files drifting apart in different tools.

## Protect the deck from version sprawl before the meeting starts

Advisory board decks invite version chaos because so many people touch them late:

- product marketing
- PMs
- design
- leadership
- customer success
- sometimes legal or security reviewers

The safest rhythm is:

1. keep one clear master deck in Figma
2. define which pages are optional or audience-specific
3. create named variants only when they serve a real output
4. avoid side edits in exported PowerPoint or PDF files

Good variant naming helps a lot:

- `cab-master`
- `cab-live-session`
- `cab-follow-up-recap`
- `cab-internal-notes`

This keeps the team from losing the source of truth the moment the first export goes out.

## Plan the follow-up deck before the meeting, not after it

One common mistake is treating the recap as a separate problem for later.

That usually creates a rushed PDF or a messy exported deck with discussion slides that made sense live but not asynchronously.

A better approach is to identify in advance:

- which live slides should survive into the follow-up
- which pages are only presenter scaffolding
- where discussion notes or summary statements will land
- whether the customer-facing recap should be lighter than the live deck

This is where CAB decks differ sharply from one-off internal workshops. The post-meeting artifact often matters just as much as the room itself.

## Review the deck for sensitivity and clarity at the same time

Advisory boards often touch roadmap material, customer examples, or strategic framing that needs judgment.

Before sharing, check:

- whether any slides imply promises the team has not actually made
- whether screenshots or metrics belong only in the live version
- whether exported formats remove speaker context that made a slide safe in the room
- whether the recap version still makes sense without narration

That review should happen before export, not after. Export choice is part of governance here, not just convenience.

## A practical CAB deck workflow

For most teams, this sequence is enough:

1. Build the CAB master deck in Figma.
2. Separate orientation, discussion, and follow-up layers.
3. Design feedback-friendly slides that show open questions clearly.
4. Define the live format and recap format before exporting.
5. Keep one source deck and create only deliberate named variants.
6. Review the shared version for both clarity and sensitivity.

## Before the deck is ready, confirm

- the meeting goal is visible in the slide structure
- discussion slides invite response instead of only passive approval
- the live session version and recap version are intentionally different where needed
- exported formats match what attendees actually need
- late edits did not fork the source of truth
- sensitive slides are only in the versions that should contain them

## Where Pitchdeck helps most

[Pitchdeck](/pitchdeck/) is useful here because customer advisory boards produce more deck complexity than they first appear to. The team needs design control, export flexibility, and a way to keep one coherent source while different versions circulate.

That is the real operational win. A CAB deck should not become three disconnected presentation files and a confusing PDF thread. It should stay one governed system that helps the conversation in the room and the follow-up afterward.

---

---
type: article
title: Search Results and Filter State QA Workflow from Figma
description: Compare live search, filtering, sorting, and no-results states against Figma so product discovery pages stay coherent across real data and responsive breakpoints.
datePublished: 2026-06-19T00:00:00.000Z
dateModified: 2026-06-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-search-results-and-filter-state-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-search-results-and-filter-state-qa-workflow-from-figma.md
---

# Search Results and Filter State QA Workflow from Figma

Search and filtering pages are where polished product UIs quietly unravel.

The default page may match the design nicely. Then real inventory arrives. A long filter label wraps. The selected-chip state looks heavier than intended. Sorting shifts the density of the grid. A no-results state collapses awkwardly. Mobile opens a filter drawer that never really got the same design attention as the desktop panel.

That is exactly where [Pixelay](/pixelay/) helps. The plugin compares Figma designs against real URLs, staging environments, localhost builds, and authenticated product flows directly in the browser, which is especially valuable when the fragile part of the experience only appears once real data and real state combinations are involved.

This article is intentionally different from nearby Pixelay content like [Responsive Website QA from Figma](/articles/pixelay-responsive-website-qa-from-figma/), [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/), and [Modal and Drawer QA Workflow from Figma](/articles/pixelay-modal-and-drawer-qa-workflow-from-figma/). Those cover breakpoint review, broader logged-in journeys, or overlay-specific QA. This one is about search results, filters, sorting, and discovery states that depend heavily on live content behavior.

## Discovery pages create more states than teams usually design explicitly

That is the core reason they drift.

Even a simple search or listing surface may need:

- default results state
- filtered state
- multi-filter state
- sorted state
- empty or no-results state
- loading or partial-content state
- mobile filter entry point

If only one or two of those states were designed carefully, implementation drift is almost guaranteed.

Search QA gets much easier once the team admits it is not checking one page. It is checking a small state machine.

## Collect representative states before you compare anything

Pixel-perfect comparison is only useful if the team is looking at the right live states.

Before starting, define which states matter most:

- most common default results
- one heavily filtered view
- one edge-case filter combination
- one sorted state
- one no-results state
- one mobile state

This matters because search surfaces often behave differently under realistic content pressure. The design might look great with clean demo data and fall apart when:

- labels get long
- chips multiply
- cards have inconsistent heights
- filters collapse awkwardly
- results count messaging changes

The more realistic the chosen states, the more useful the QA pass becomes.

## Map Figma frames to live query states explicitly

Search QA gets fuzzy fast when reviewers say things like:

- "the filters feel off"
- "the results layout looks heavier"
- "mobile search seems crowded"

A better approach is to map the comparison clearly:

- `desktop / default results`
- `desktop / category + price filters applied`
- `desktop / no-results state`
- `mobile / filter drawer open`
- `mobile / sorted results with chips`

If the live product uses query params or saved states, capture those directly in the QA workflow. Pixelay becomes much more effective when the comparison is tied to specific live conditions rather than a generic route.

## Review hierarchy, not only spacing

Search pages often fail visually because the hierarchy changes under state pressure.

Look at:

- whether selected filters overpower the results themselves
- whether result counts still read as supporting information
- whether sort controls compete too much with filtering
- whether the empty state feels intentional or accidental
- whether active chips create noise or clear orientation

These issues are not always obvious in static inspection. They show up when the real state is open in a browser and the team can compare it directly to the Figma intent.

## Treat no-results and sparse-results states as first-class QA targets

Many teams still treat no-results states like a side case.

That is a mistake.

Search surfaces often create trust through recovery, not only through success. If the user applies several filters and lands on zero results, the product should still feel controlled:

- the explanation should be readable
- selected filters should stay legible
- the reset path should be obvious
- the page should not collapse into visual emptiness

This is one place where discovery QA overlaps nicely with content review. If your product also needs copy alignment on those states, [Error Message and Empty State Review Workflow in Figma](/articles/copydoc-error-message-and-empty-state-review-workflow-in-figma/) is a useful complementary read from the content side.

## Check filter density under real combinations, not only single selections

One filter chip often looks fine. Four may not.

That is why a meaningful search QA pass should include:

- one single-filter state
- one multi-filter state
- one state with long labels or values

This often reveals:

- inconsistent chip padding
- wrapping that breaks vertical rhythm
- filter bars that crowd the page title
- selected-state styling that feels too loud

These problems are especially common on product discovery, ecommerce, and analytics pages where the combinations are more realistic than the clean demo frame.

## Review mobile filter behavior as part of the search state, not as a separate component

Search filters on mobile often live inside drawers, sheets, or compact bars. That makes them feel like a component problem, but the real issue is how they affect the whole discovery flow.

Check:

- how the entry point to filters looks before opening
- how much context remains visible when filters are open
- whether active filter chips still feel manageable afterward
- whether sorting and filtering remain distinguishable

If the mobile surface uses an overlay treatment, [Modal and Drawer QA Workflow from Figma](/articles/pixelay-modal-and-drawer-qa-workflow-from-figma/) is the closest related workflow. But the core job here is still search-state coherence, not overlay polish alone.

## Turn mismatches into state-specific bugs

Search QA findings are easy to describe too vaguely.

"Filters are cramped" is not enough.

Better reports look like:

- "With three active filters on 390px width, the chip row wraps earlier than the Figma design and pushes the results count below the fold."
- "The no-results state uses tighter vertical spacing than the approved design, so the reset action feels visually disconnected from the explanation."
- "When sorted by newest, cards with longer titles produce a denser second row than the Figma state intended, which makes scan rhythm feel uneven."

That kind of report is much easier for frontend teams to act on because it names the state, the condition, and the consequence.

## A practical search-state QA routine

For most product and frontend teams, this is enough:

1. Pick representative live search and filter states before opening the comparison.
2. Map each live state to a specific Figma frame deliberately.
3. Review hierarchy and density, not just raw spacing differences.
4. Give no-results and sparse-results states their own pass.
5. Stress-test multi-filter and long-label combinations.
6. Log bugs with state and breakpoint context instead of generic page-level comments.

## Before the search experience is considered visually safe, confirm

- realistic live states were used instead of only default demo data
- the Figma-to-live mapping is explicit for each compared state
- filters, chips, counts, and sort controls still preserve the intended hierarchy
- no-results behavior feels designed, not accidental
- mobile filter behavior was reviewed as part of the discovery flow
- bug reports describe the exact state that broke, not just the route

## Where Pixelay helps most

[Pixelay](/pixelay/) is especially useful here because search and filter experiences are rarely wrong in one obvious screenshot. They drift across states, content combinations, and breakpoints.

Seeing the real browser state against the original Figma intent makes those differences much easier to reason about. That is the real value. Search pages should feel coherent no matter how messy the data and filter logic become, and Pixelay helps teams review that coherently instead of guessing from memory.

---

---
type: article
title: Press Kit Asset Export Workflow from Figma
description: Prepare logos, product screenshots, founder headshots, and supporting images from Figma so press kits stay polished without shipping bloated downloads.
datePublished: 2026-06-19T00:00:00.000Z
dateModified: 2026-06-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-press-kit-asset-export-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-press-kit-asset-export-workflow-from-figma.md
---

# Press Kit Asset Export Workflow from Figma

Press kits usually break in quiet, avoidable ways.

The product launch is ready. The founder bio is approved. The screenshots look sharp in Figma. Then somebody assembles the downloadable media folder with enormous PNGs, mismatched aspect ratios, and filenames that make no sense to a journalist opening the package for the first time.

That is where [TinyImage](/tinyimage/) fits well. The plugin keeps compression and export decisions inside the design workflow instead of turning press kit prep into a separate cleanup project in three other tools.

This article is intentionally different from nearby TinyImage content like [Social Share Image Export Workflow from Figma](/articles/tinyimage-social-share-image-export-workflow-from-figma/), [Case Study Screenshot Workflow for B2B Marketing Teams](/articles/tinyimage-case-study-screenshot-workflow-for-b2b-marketing-teams/), and [Browser Extension Store Screenshot Export Workflow from Figma](/articles/tinyimage-browser-extension-store-screenshot-export-workflow-from-figma/). Those pieces focus on link previews, narrative proof screenshots, or marketplace listings. This one is about downloadable press-kit assets, where the job is packaging brand and product visuals so other people can reuse them without creating a quality mess.

## A press kit is not one image export job

Most media kits contain several asset families with very different needs:

- transparent or flat-background logos
- product screenshots
- founder or team headshots
- supporting UI detail shots
- product mockups or launch visuals

When teams export all of those the same way, the package gets sloppy fast.

The logo may need transparency. The headshot may benefit from a lighter compressed JPG. The product screenshot may need sharper text preservation than the lifestyle image next to it. The problem is not that the assets come from Figma. The problem is that they get treated like one generic batch.

## Start by defining the asset matrix

Before exporting anything, list the actual reusable files the press kit needs.

For most software or plugin launches, that means something like:

- `logo-dark`
- `logo-light`
- `founder-headshot`
- `product-ui-overview`
- `workflow-detail-screenshot`
- `launch-hero-visual`

That simple matrix prevents the most common failure mode: exporting every plausible frame and hoping the person downloading the press kit figures it out.

It also forces the team to distinguish between:

- assets meant for download and reuse
- assets meant only for a webpage
- assets that still need a tighter crop or alternate background

If a screenshot only works inside a carefully laid-out launch page, it may not belong in the raw press kit at all.

## Decide which files need transparency and which need weight reduction

Press kits often accumulate unnecessary file weight because teams default to full PNG exports for everything.

That is sometimes correct, especially for:

- logos with transparency
- crisp UI shots with small type
- flat illustration assets where edge fidelity matters

But it is often unnecessary for:

- headshots
- lifestyle imagery
- large product mockups used mostly for editorial coverage

The goal is not to compress every file aggressively. It is to give journalists, partners, and directory editors a package that opens quickly and still looks trustworthy.

[TinyImage](/tinyimage/) is useful here because you can make those tradeoffs deliberately inside the Figma-based export workflow instead of pushing every file through an inconsistent second pass later.

## Export two classes of assets, not ten ad hoc versions

A clean media kit usually benefits from two output classes:

### 1. Reuse-ready originals

These are the assets someone might place into an article, slide, or directory listing.

They should prioritize:

- clarity
- sensible dimensions
- proper transparency when needed
- filenames that describe the asset plainly

### 2. Web-friendly distribution copies

These are the versions used on the press page itself or inside a downloadable ZIP that should not feel painfully heavy.

They should prioritize:

- lighter file sizes
- predictable dimensions
- fast download
- no obvious visible degradation in the important detail areas

This is a much better system than making five barely different exports called `logo-final`, `logo-final2`, and `logo-new`.

## Review the details that outsiders will notice first

The people opening your press kit are not staring at the Figma source.

They are checking whether:

- the logo has the right background treatment
- the product screenshot looks current
- the founder photo feels usable immediately
- the filenames tell them what they are looking at
- the package opens without friction

That changes what you should review before export.

For logos, inspect edge crispness and transparency.

For screenshots, zoom in on the text or UI detail doing the credibility work. A screenshot that looks "mostly fine" can still undermine trust if the product labels or controls go muddy.

For photos and mockups, the question is often whether the file still feels polished after compression rather than whether every pixel is preserved.

## Name files for recipients, not for the design team

Internal layer names are rarely good press-kit filenames.

A journalist or partnership manager should not need your project context to understand the package. Good names make reuse easier:

- `hypermatic-logo-black.png`
- `hypermatic-logo-white.png`
- `hypermatic-founder-adam-brock.jpg`
- `hypermatic-product-screenshot-workflow.png`
- `hypermatic-press-kit-hero-visual.jpg`

If the kit contains multiple product visuals, include the asset job in the filename rather than relying only on size or sequence numbers.

This is especially helpful when the press page and the downloadable ZIP may both be referenced weeks later by people who were not in the original launch thread.

## Build the ZIP around use, not around source folders

One subtle mistake is mirroring the design file structure in the download.

The press recipient does not care about your internal sections, pages, or explorations. They care about finding:

- logos
- photos
- screenshots
- brand visuals

If the package is larger, simple folders can help:

- `logos`
- `headshots`
- `product-screenshots`
- `campaign-visuals`

But only add folders when they reduce confusion. Over-structuring a tiny kit can be just as annoying as dumping every file flat into one directory.

The real test is whether somebody new can open the ZIP and know what to use in under a minute.

## Check the assets in the actual press-page context too

The downloadable files matter, but so does the hosted press page or media page that introduces them.

Before publishing, review whether:

- the thumbnail previews load quickly
- screenshots still look sharp in the page layout
- heavier PNGs are not dragging down the experience
- the download bundle feels intentional rather than improvised

If the same visuals will also appear in launch articles or linked coverage pages, pair this workflow with [Social Share Image Export Workflow from Figma](/articles/tinyimage-social-share-image-export-workflow-from-figma/) so the preview-card assets do not inherit the wrong export rules from the download kit.

## A simple press-kit export routine

For most teams, this is enough:

1. Define the exact asset matrix before exporting.
2. Separate transparency-critical files from compression-friendly files.
3. Create one reuse-ready version and one web-friendly version where needed.
4. Review crispness on logos and UI details, not only overall composition.
5. Rename files for outside recipients, not internal design context.
6. Check the downloadable bundle and hosted press page as two related but different outputs.

## Before the press kit ships, confirm

- every file has a clear reuse job
- logos and screenshots use the right format for the asset type
- compressed versions were reviewed on the details people will actually inspect
- filenames are plain enough for someone outside the team
- the downloadable package is organized around asset use
- the hosted press page still feels fast and polished

## Where TinyImage helps most

[TinyImage](/tinyimage/) does not decide which visuals belong in the story of the launch. That still requires judgment from marketing, design, or comms.

What it improves is the production layer between "the assets are approved in Figma" and "the media kit is genuinely usable." That is usually where teams lose time through oversized files, inconsistent formats, and last-minute compression hacks.

If your team regularly prepares launch assets, founder kits, or product screenshots for outside reuse, a tighter press-kit workflow inside TinyImage can save more embarrassment than it saves clicks. And that is often the more valuable win.

---

---
type: article
title: Co-Branded Display Ad Workflow for Partner Campaigns
description: Plan dual-logo banner campaigns in Figma so partner approvals, offer variants, and trafficking assets stay organized before launch.
datePublished: 2026-06-18T00:00:00.000Z
dateModified: 2026-06-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-co-branded-display-ad-workflow-for-partner-campaigns/
markdownUrl: https://www.hypermatic.com/articles/bannerify-co-branded-display-ad-workflow-for-partner-campaigns.md
---

# Co-Branded Display Ad Workflow for Partner Campaigns

Co-branded display campaigns look simple until two companies have to approve the same banner.

Now every creative decision has a second owner. The partner wants logo prominence. Your team wants message clarity. Legal wants the right disclaimer. Media wants consistent filenames and trafficking assets. Performance marketing wants multiple sizes and offer variants. Suddenly a normal banner job turns into a coordination problem disguised as ad production.

[Bannerify](/bannerify/) is useful here because it keeps the animation, export, and preview workflow inside Figma while producing HTML, GIF, or video banner outputs for campaign teams. That matters a lot when co-branded creative needs many versions and many approvers.

This article is intentionally different from nearby Bannerify content like [Banner Variant Review Workflow for Campaign Teams](/articles/bannerify-banner-variant-review-workflow-for-campaign-teams/), [Banner Preview Link Workflow for Approvals](/articles/bannerify-banner-preview-link-workflow-for-approvals/), and [Display Ad Asset Naming Convention for Agencies](/articles/bannerify-display-ad-asset-naming-convention-for-agencies/). Those cover general family review, preview links, or file naming. This one is about partner campaigns, where brand ownership and approval complexity shape the production workflow from the start.

## Co-branded campaigns fail when ownership is vague

The design usually is not the first thing that breaks.

What breaks first is uncertainty around questions like:

- whose logo leads
- whose offer is primary
- whose CTA language is allowed
- whose legal text wins if space is tight
- who approves each variant before trafficking

If those rules are unclear, the banner family becomes a loop of polite rework. The team keeps exporting new versions without ever stabilizing the system.

That is why the workflow needs an ownership map before it needs motion polish.

## Set the co-branding rules before building sizes

Before producing variants, define the partnership rules in one short brief:

- logo order
- minimum spacing or safe-zone requirements
- message priority
- color or background restrictions
- disclaimer expectations
- destination URL ownership

This does not need to be a giant document. It just needs to stop the banner family from becoming a guessing game.

For example, a campaign can look fine in one 970x250 layout and collapse in a 300x250 unit because the partner-logo rule was never stress-tested at small sizes. Getting the rules clear early prevents that kind of size-specific chaos.

## Build one reusable hierarchy, then adapt it by placement

Co-branded banners tend to get crowded because both brands want visible representation.

The best approach is usually not "make everything equally loud." It is "define one hierarchy that survives across placements."

Most partner banners need a clear order:

- primary message or offer
- proof or context
- supporting brand
- CTA
- legal or disclosure layer if required

That hierarchy may shift slightly by size, but it should not reinvent itself on every frame. Otherwise the 300x250 tells a different story from the 728x90, and review becomes subjective.

This is where Bannerify helps creatively. Once the source structure is stable in Figma, resizing and exporting the family becomes much less fragile than rebuilding every placement by hand.

## Treat dual-logo handling as a layout system, not a decoration problem

The most common co-branded creative mistake is treating the second logo like an add-on.

It is not. It affects:

- spacing
- focal balance
- CTA room
- disclaimer room
- animation timing

Good questions to answer before finalizing:

- do the logos need equal emphasis or different emphasis?
- can one logo appear in the opening frame while the second resolves later?
- does the smaller size need a simplified lockup?
- does the background treatment help both brands stay legible?

If the answer changes from one size to another, document the exception clearly. A co-branded set needs predictable rules more than it needs visual improvisation.

## Align offer variants and partner variants separately

Many teams accidentally mix two kinds of changes together:

- the campaign offer changes
- the partner context changes

Those are not the same thing.

One banner family may need:

- two offers
- three sizes
- two partner logos
- one localized disclaimer variation

If the naming and review process do not separate those dimensions, the campaign becomes impossible to QA calmly.

This is why a co-branded workflow benefits from the same discipline as a variant matrix, but with one extra layer: partner identity. If the family is getting large, pair this process with [Banner Variant Review Workflow for Campaign Teams](/articles/bannerify-banner-variant-review-workflow-for-campaign-teams/) so size, message, and partner states are all reviewed deliberately.

## Use preview links before trafficking conversations harden

Partner campaigns produce more subjective feedback than solo-brand campaigns.

People comment on:

- logo prominence
- brand balance
- tone
- CTA fairness
- animation feel
- legal comfort

That feedback is much easier to resolve before the ad-ops packaging phase starts.

Preview links are especially valuable here because they let both sides review real motion and real layout behavior instead of static assumptions. If approvals happen too late, the team ends up changing the creative after filenames, click tags, and fallback assets are already being prepared.

[Banner Preview Link Workflow for Approvals](/articles/bannerify-banner-preview-link-workflow-for-approvals/) is the best supporting process if your partner team reviews asynchronously or across time zones.

## Keep legal and destination details tied to the right variant

Co-branded campaigns create hidden risk when the creative and the destination drift apart.

Common failure modes:

- the banner mentions one offer but links to a generic page
- the partner logo is present but the landing page does not match the partnership context
- one size keeps an outdated disclaimer
- fallback assets and HTML exports do not use the same final wording

This is why the approval pass should confirm not only visual correctness but campaign truth:

- correct destination
- correct ownership cues
- correct legal language
- correct asset pairing across formats

Design quality alone does not make a co-branded banner safe to ship.

## Name the assets so both companies can survive the handoff

Co-branded campaigns usually touch more teams:

- your design team
- your growth or paid-media team
- partner marketing
- ad ops or trafficking
- sometimes legal or account teams

That means filenames and package clarity matter more than usual.

At minimum, the final assets should expose:

- campaign
- partner
- size
- format
- offer variant
- version

If you need a stronger naming framework, [Display Ad Asset Naming Convention for Agencies](/articles/bannerify-display-ad-asset-naming-convention-for-agencies/) is the right adjacent article.

## Before shipping a co-branded banner family, confirm

- ownership rules were set before size production began
- logo hierarchy survives across the full placement set
- offer changes and partner changes are tracked separately
- partner approvals happened before packaging hardened
- legal, URL, and fallback details match the final creative
- filenames are clear enough for both organizations to trust

## Where Bannerify helps most

[Bannerify](/bannerify/) is valuable here because co-branded campaigns create complexity through multiplication. More owners, more sizes, more review cycles, more export needs.

Keeping the source creative inside Figma while generating the production outputs from one controlled system reduces a lot of that chaos. It gives partner teams something much better than a folder of semi-related files and subjective review notes.

That is the real win. Co-branded display ads should feel coordinated, not negotiated. Bannerify makes it much easier to produce partner campaign creative that stays organized all the way from concept to trafficking.

---

---
type: article
title: Trade Show Collateral Migration Workflow for Marketing Teams
description: Move old booth graphics, one-pagers, and event materials into Figma so campaign teams can update collateral without rebuilding every asset from scratch.
datePublished: 2026-06-18T00:00:00.000Z
dateModified: 2026-06-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-trade-show-collateral-migration-workflow-for-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/convertify-trade-show-collateral-migration-workflow-for-marketing-teams.md
---

# Trade Show Collateral Migration Workflow for Marketing Teams

Trade show collateral has a funny way of surviving far beyond the event it was made for.

The booth backdrop from last year is still in an InDesign package. The partner one-pager lives as a PDF. The tabletop handout exists in Illustrator. The event sales deck was edited in PowerPoint by three different people. Now a new launch is coming up, the team wants the whole event kit refreshed in Figma, and nobody wants to rebuild every asset from scratch.

That is where [Convertify](/convertify/) becomes useful. The plugin is built around moving work between Figma and other formats so teams can stop treating older files as dead ends.

This article is intentionally different from nearby Convertify content like [Brand Guidelines PDF to Figma Workflow](/articles/convertify-brand-guidelines-pdf-to-figma-workflow/), [Agency Takeover Workflow for Inherited Client Design Files](/articles/convertify-agency-takeover-workflow-for-inherited-client-design-files/), and [InDesign to Figma Migration Workflow for Editorial Teams](/articles/convertify-indesign-to-figma-migration-workflow-for-editorial-teams/). Those cover brand books, inherited accounts, or editorial layouts. This one is about event collateral, where many file types have to be recovered quickly enough for a marketing deadline.

## Start by separating reusable source files from dead-end deliverables

Event libraries usually contain a mix of assets:

- editable source files
- flattened PDFs
- printer exports
- deck files with inconsistent edits
- logos and diagrams copied between formats

Do not treat them all the same.

Before importing anything into Figma, sort the library into three groups:

- reusable source candidates
- reference-only files
- assets that should be redesigned instead of migrated

That one step saves a lot of cleanup later.

For example, a layered brochure file may be worth importing because the structure is still useful. A flattened show-floor map screenshot may only be worth keeping as reference. An old event flyer with outdated messaging may not deserve cleanup time at all.

Migration works best when the team is honest about which old materials still contain real design value.

## Inventory the event system, not just the individual files

Marketing teams get into trouble when they import one asset at a time without understanding the event set.

A typical trade show kit can include:

- booth or backdrop graphics
- one-pagers
- sales sheets
- tabletop signs
- presentation slides
- demo callouts
- partner leave-behinds

Those pieces often share the same core ingredients:

- logo lockups
- campaign headlines
- screenshots
- value-prop bullets
- proof statistics
- CTA language

If the team migrates those ingredients thoughtfully, the later asset refresh becomes much faster. If every file is imported as an isolated emergency, the design system never really gets recovered.

## Import by asset family, then standardize the reusable pieces

This is where [Convertify](/convertify/) helps most.

Instead of thinking "we need this one PDF in Figma," think:

- we need the booth graphics family
- we need the one-pager family
- we need the deck family
- we need the partner leave-behind family

That framing helps the team identify what to normalize after import:

- text styles
- common sections
- image treatments
- icon sets
- recurring layout patterns

If a booth panel, flyer, and slide deck all use the same outdated product proof, that is not three separate content problems. It is one reusable proof block that should be rebuilt once and reused everywhere.

## Expect cleanup after import and budget for it deliberately

Migration is rarely magic, especially with event collateral.

You may need to repair:

- broken text hierarchy
- grouped layout fragments
- image crops
- spacing rhythm
- missing style consistency
- outdated proof or pricing

That is normal.

The point of the migration is not to avoid all cleanup. The point is to avoid pointless recreation. Converting an old InDesign handout into a usable Figma starting point is still a big win, even if the final polish needs human judgment.

If the biggest pain is one giant document family, [InDesign to Figma Migration Workflow for Editorial Teams](/articles/convertify-indesign-to-figma-migration-workflow-for-editorial-teams/) is the best companion read. Event collateral behaves differently from magazines or reports, but the cleanup mindset is similar: recover structure first, then improve it intentionally.

## Rebuild the shared messaging layer while the assets are open

Trade show materials often drift because each piece was updated in a different quarter by a different owner.

Once the files are in Figma, use the migration window to fix shared messaging problems:

- retired product names
- outdated screenshots
- old logo sets
- inconsistent CTA language
- stale proof numbers
- duplicate or conflicting headlines

That is one of the highest-value parts of the workflow.

Teams often think the task is "convert the files." The more strategic task is "convert the files while rebuilding one coherent event system." If the new Figma source still contains five generations of messaging drift, the migration did not actually solve the production problem.

## Design the new event kit around update speed

Trade show assets are notorious for last-minute edits:

- booth number changes
- partner logos arrive late
- CTA copy changes after a launch update
- screenshots need swapping
- value props shift for a regional event

That is why the Figma rebuild should prioritize update speed, not only visual cleanliness.

Ask:

- which copy blocks appear across multiple assets?
- which screenshots or proof panels will change most often?
- which layout sections can become reusable components or patterns?
- which outputs need region or partner variants later?

Convertify gets the material into Figma. The smarter system design makes the next event cycle less painful.

## Use the migrated files to prevent repeat format chaos

Many marketing teams fall back into the same problem a few months later because nobody defines the new source-of-truth rule.

After migration, make the operating model explicit:

- Figma is the working source for refreshed event assets
- legacy files are reference or fallback only
- updates happen in the new system, not by editing old exports again

Without that rule, the team ends up with fresh Figma files plus a new stack of side edits happening in PDF or PowerPoint, which recreates the same mess by the next event season.

If you also inherit messy source files from external partners or previous agencies, [Agency Takeover Workflow for Inherited Client Design Files](/articles/convertify-agency-takeover-workflow-for-inherited-client-design-files/) is the closest related process in the library.

## A practical migration sequence for event teams

For most trade show refreshes, this sequence works well:

1. inventory the full event kit
2. label files as reusable, reference-only, or redesign
3. import the strongest source files into Figma
4. normalize shared styles, screenshots, and proof blocks
5. rebuild the recurring asset sections around fast updates
6. designate the new Figma source as the working system for future events

This turns migration from a one-time rescue task into the start of a healthier production workflow.

## Before calling the migration ready, confirm

- the team knows which old files were worth reusing
- shared messaging was cleaned up, not just copied forward
- repeated asset sections are reusable in Figma
- event-specific variants can be updated without redoing the whole system
- the working source of truth is now clear

## Where Convertify helps most

[Convertify](/convertify/) is useful here because trade show collateral almost never lives in one clean format. Marketing teams inherit PDFs, slide decks, Adobe files, and exported assets that all need to be refreshed under deadline.

Convertify removes a large part of the format barrier, which gives teams a chance to focus on the real work: deciding what is worth preserving, cleaning up what still matters, and turning scattered event files into a reusable Figma-based system.

That is the real payoff. A trade show refresh should not feel like archaeological reconstruction every quarter. Convertify makes it much easier to recover the old work and build a better event library from it.

---

---
type: article
title: Signup Flow Copy QA Workflow in Figma
description: Review signup, verification, password, consent, and welcome-state copy together in Figma so activation flows feel clear from first click to first session.
datePublished: 2026-06-18T00:00:00.000Z
dateModified: 2026-06-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-signup-flow-copy-qa-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-signup-flow-copy-qa-workflow-in-figma.md
---

# Signup Flow Copy QA Workflow in Figma

Signup flow copy rarely breaks in one dramatic place.

It frays a little at every step.

The landing page says "Start free." The form says "Create account." The confirmation email says "Activate your workspace." The password screen uses a different product name. The welcome state introduces a term the user has never seen before. Nothing is individually disastrous, but the combined effect makes the first-run experience feel less trustworthy and more complicated than it should.

That is where [CopyDoc](/copydoc/) earns its keep. The plugin helps teams export, review, update, and re-import Figma copy systematically instead of checking each form, modal, and onboarding frame by hand.

This article is intentionally different from nearby CopyDoc content like [Form Microcopy Review Workflow in Figma](/articles/copydoc-form-microcopy-review-workflow-in-figma/), [Error Message and Empty State Review Workflow in Figma](/articles/copydoc-error-message-and-empty-state-review-workflow-in-figma/), and [Pricing and Billing Copy Review Workflow in Figma](/articles/copydoc-pricing-and-billing-copy-review-workflow-in-figma/). Those cover form fields broadly, state messages, or purchase language. This one is about the full signup journey, where the copy has to stay coherent from first click through first success state.

## Stop reviewing signup as a single form

The biggest copy QA mistake is pretending signup is one screen.

In most products, the flow includes several moments:

- pre-signup CTA or landing section
- account-creation form
- password rules or SSO branching
- consent or legal language
- email verification or code entry
- welcome state
- first-run guidance after account creation

If those moments are reviewed separately by different people, the language drifts fast. Terms get renamed. Promises change tone. Button labels stop matching the user's mental model.

The workflow gets much better once the team treats signup as one language system instead of a pile of UI states.

## Build a flow inventory by user moment

Before editing any copy, map the flow by what the user is trying to do:

- decide whether to start
- understand what is required
- complete the form confidently
- recover from errors
- verify ownership
- understand what happens next

That inventory helps the team catch language gaps that screen-by-screen review often misses.

For example:

- Does "workspace" appear before it is explained?
- Does "free trial" become "plan" too early?
- Does the welcome state assume setup is complete when it is not?
- Does the verification step sound like security or like friction?

These are copy issues, but they are really comprehension issues. A flow inventory makes them easier to spot.

## Review commitments and consequences with the same care as labels

Signup copy is full of small promises:

- no credit card required
- cancel anytime
- invite your team later
- get started in seconds
- verify your email to continue

Those promises often drift because they live in different parts of the flow.

One of the most valuable QA passes is checking whether the flow keeps those commitments consistent:

- if the CTA promises speed, do later steps introduce surprise friction?
- if the form says no credit card is needed, does the welcome state imply billing too early?
- if the user can sign up with Google, does the fallback password language still make sense?

This is where signup copy starts feeling trustworthy or slippery. The user does not need perfect prose. They need the system to mean one thing all the way through.

## Pull error, validation, and help text into the same review

Teams often polish the happy path and ignore the moments where confusion really spikes:

- invalid email
- weak password
- expired verification code
- taken workspace name
- unsupported domain or SSO mismatch
- consent missing

These are not secondary states. They are core comprehension moments.

If the team already has a broader error-state review process, [Error Message and Empty State Review Workflow in Figma](/articles/copydoc-error-message-and-empty-state-review-workflow-in-figma/) is the best supporting article. For signup, the key is making sure those messages are reviewed alongside the core flow instead of weeks later as a QA afterthought.

## Export the flow copy for one structured review pass

This is the part CopyDoc makes much easier.

Signup flows often span:

- landing screens
- app frames
- email mockups
- success states
- hidden edge cases

Trying to review that language directly on canvas can work for a tiny product. It gets fragile fast once the flow has multiple variants or locales.

A structured export lets the team review:

- labels
- helper text
- button copy
- validation messages
- state headlines
- explanatory blurbs

in one pass, with comments that focus on the flow rather than one isolated frame.

That does not replace visual review. It just makes the language review much more coherent before the text comes back into the design.

## Check layout pressure after the copy is approved

Signup flows are especially vulnerable to text-length problems because they often contain:

- compact forms
- narrow mobile layouts
- stacked legal text
- inline validation
- small supporting instructions

The approved wording might be correct and still create UX issues if:

- the password rule list becomes too dense
- the consent line wraps into a visual mess
- the CTA label becomes ambiguous when shortened
- the welcome headline pushes the next step too low

That is why the copy review needs a second pass inside Figma after the text is settled. Copy QA is not complete until the approved language has survived the actual layout.

If character pressure is a recurring problem in your product surfaces, [UI Character Limit Review Workflow in Figma](/articles/copydoc-ui-character-limit-review-workflow-in-figma/) is the most useful adjacent process.

## Align marketing and product vocabulary before launch

Signup is where marketing language and product language meet in public.

That means common drift points show up fast:

- homepage says "Start free trial"
- product says "Create workspace"
- onboarding says "Set up your account"
- billing or upgrade later says "Choose a plan"

None of those phrases are automatically wrong, but the transitions have to feel intentional. Otherwise the user experiences the flow as a series of small context resets.

A good signup QA pass checks:

- what term introduces the journey
- what noun identifies the account or workspace
- what success looks like after completion
- what language is reserved for billing versus activation

That is one reason signup copy deserves its own review discipline. It shapes the user's first interpretation of the product.

## A practical signup copy QA sequence

For most teams, this process is enough:

1. inventory every user-visible signup moment
2. export the copy for a structured flow review
3. align promises, labels, and consequence language
4. review edge-case and validation states in the same pass
5. re-import the approved copy
6. confirm the real layout still works on the final designs

That sequence is much more reliable than letting each designer or PM tweak isolated screens independently.

## Before the flow is considered copy-safe, confirm

- every signup state was included, not just the form
- promises made early in the flow still hold later
- validation and recovery messages were reviewed with the happy path
- approved copy was checked back inside the real layouts
- marketing and product vocabulary feel like one system

## Where CopyDoc helps most

[CopyDoc](/copydoc/) is valuable here because signup copy quality is mostly a coordination problem.

The words are scattered across forms, verification steps, emails, success states, and supporting guidance. Exporting and reviewing them systematically gives product, design, content, and growth teams a cleaner way to align before the flow reaches users.

That is the practical win. Signup should feel like the first confident step into the product, not the first place the language starts contradicting itself. CopyDoc makes it much easier to keep the whole flow speaking with one voice.

---

---
type: article
title: Trial Expiration Email Workflow for SaaS Teams
description: Design clearer trial ending emails in Figma so lifecycle teams can explain urgency, plan limits, and upgrade paths without sending panic-inducing clutter.
datePublished: 2026-06-18T00:00:00.000Z
dateModified: 2026-06-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-trial-expiration-email-workflow-for-saas-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-trial-expiration-email-workflow-for-saas-teams.md
---

# Trial Expiration Email Workflow for SaaS Teams

Trial-ending emails are easy to underestimate.

They are not as promotional as a launch campaign and not as purely functional as a password reset. But they carry real commercial pressure. The message has to create urgency, explain what changes, preserve trust, and make the upgrade path obvious without sounding like a threat.

That is why trial-expiration emails often become messy. Product wants accuracy. Lifecycle marketing wants conversion. Legal wants clarity. Support wants to prevent confused replies. By the time the email is ready, the design has become dense and the HTML review has turned into a last-minute scramble.

[Emailify](/emailify/) is a strong fit for this workflow because it keeps the design, review, and export path inside Figma instead of forcing lifecycle teams to jump between mockups and production email builders before the content is stable.

This article is intentionally different from nearby Emailify content like [Lifecycle Email Workflow for Marketing Ops Teams](/articles/emailify-lifecycle-email-workflow-for-marketing-ops-teams/), [Transactional Email Design Workflow in Figma](/articles/emailify-transactional-email-design-workflow-in-figma/), and [HTML Email Preview Link Approval Workflow for Stakeholder Signoff](/articles/emailify-html-email-preview-link-approval-workflow-for-stakeholder-signoff/). Those cover broad lifecycle systems, system-style emails, or approval mechanics. This one is specifically about trial-expiration emails, where urgency and trust have to coexist.

## Trial-ending emails sit between lifecycle and transactional logic

This is the first decision to get right.

If the team treats the email like a generic promotional blast, it becomes too fluffy. If the team treats it like a dry account notice, it often misses the persuasion the moment deserves.

A good trial-expiration email usually needs to answer five questions fast:

- What is changing?
- When is it changing?
- What will the user lose, if anything?
- What plan or action is available next?
- Where can they get help if they are unsure?

That is more specific than a general nurture email and more emotionally charged than a routine system message. The copy and layout should reflect that middle ground.

## Design the sequence, not just the final email

One reason trial-expiration emails feel chaotic is that teams review the "trial ended" message in isolation.

In reality, users often see a sequence:

- trial ending soon
- final reminder
- trial ended
- grace-period or follow-up message

When those emails are designed separately, the tone and hierarchy drift. One message sounds urgent. The next sounds vague. Another introduces pricing language that was never explained earlier.

Inside Figma, it is much healthier to review the sequence together and decide:

- where urgency begins
- when feature-limit language appears
- how pricing or plan framing changes across the sequence
- when support or fallback guidance becomes more prominent

That sequence view is where Emailify helps. The team can design the system as a set of related states instead of pretending the conversion moment lives in one isolated send.

## Put the account state above the marketing polish

The user opening a trial-ending email is usually asking one practical question:

What happens to my account now?

That means the hierarchy should prioritize state clarity before decorative persuasion.

The top of the email should make it obvious:

- how much time is left or whether the trial has ended
- what the primary next action is
- whether the user keeps access, loses features, or moves to a limited state

This is not the place for a clever hero that delays the answer.

You can still make the message feel polished and on-brand, but the first screen should reduce uncertainty, not add suspense. Trial emails often underperform simply because the real status is buried under generic marketing language.

## Explain plan limits in human language

Trial-expiration emails often get too abstract when they describe what changes next.

Phrases like:

- upgrade to continue
- access may be limited
- your trial is ending

are not wrong, but they are often incomplete.

Users usually want the next sentence:

- Which features stop working?
- Can I still log in?
- Will my data still be there?
- Is there a grace period?
- Who should I contact if I need more time?

That does not mean dumping policy text into the main body. It means making the consequence legible enough that the call to action feels fair.

If the pricing and entitlement language is still shifting, coordinate the email review with [Pricing and Billing Copy Review Workflow in Figma](/articles/copydoc-pricing-and-billing-copy-review-workflow-in-figma/). Trial emails break trust quickly when the plan names or access rules do not match the product or pricing page.

## Design the primary CTA for hesitation, not only intent

Not every recipient is ready to upgrade the moment the email lands.

Some are:

- trying to get internal approval
- unsure which plan applies
- waiting on a teammate
- evaluating whether the workflow is worth it

That is why the email should make the main next step obvious without acting like there is only one kind of reader.

A practical structure is:

- one clear primary CTA for upgrade or plan selection
- one short supporting line that explains what happens next
- one lower-friction fallback path, such as contacting support or learning more

This is especially helpful for B2B or team products where the person using the trial is not always the person approving the spend.

## Review on mobile before anyone debates the visuals

Trial-expiration emails are often opened quickly on mobile, especially when they are sent close to the end state.

That makes scannability more important than extra module complexity.

Check:

- whether the status line is visible early
- whether the CTA lands above the fold reasonably
- whether plan or entitlement language wraps awkwardly
- whether the footer or support path competes with the main action

If mobile layout is a recurring problem in your email workflow, [Mobile Email QA Workflow Before Export](/articles/emailify-mobile-email-qa-workflow-before-export/) is the best companion process. Trial emails are exactly the kind of state-heavy message that can look clear on desktop and tense on mobile.

## Keep the HTML review tied to real state content

The most common QA failure here is reviewing the layout with placeholder language that is shorter and cleaner than the real account-state copy.

Trial emails should be checked with:

- real plan names
- real deadlines
- real support wording
- real fallback or grace-period language

Otherwise the approved design can collapse once the true content arrives.

This matters even more if the team localizes or runs different account states for different customer segments. The email can be visually approved and still fail the moment real legal or pricing strings expand in production.

## A practical sequence for trial-expiration email design

For SaaS teams, this workflow is usually enough:

1. map the full trial-ending sequence in Figma
2. define the exact account-state message for each send
3. prioritize clarity over decorative hero treatment
4. make plan limits and next actions explicit
5. review the HTML-ready design on mobile with real copy
6. export only after the state language is settled

This is much calmer than designing one "upgrade now" email and discovering later that nobody agreed on what actually happens when the timer runs out.

## Before the sequence is ready, confirm

- the sequence was reviewed as a system, not one isolated email
- the first screen explains the user's account state clearly
- the CTA supports hesitant readers as well as ready buyers
- plan and entitlement language matches the real product rules
- mobile review used real content, not optimistic placeholders

## Where Emailify helps most

[Emailify](/emailify/) is valuable here because trial-expiration emails live in the uncomfortable space between product state, revenue pressure, and production email constraints.

Keeping the workflow inside Figma gives lifecycle teams more control while the message is still being shaped. That reduces the chance that crucial clarity issues only appear after the email has been exported or uploaded into an ESP.

That is the real advantage. Trial-ending emails should feel clear, trustworthy, and commercially sharp all at once. Emailify makes it much easier to design and review that balance before the sequence reaches production.

---

---
type: article
title: Webinar Deck Workflow for Product Marketing Teams
description: Build webinar slides in Figma that are easier to present live, repurpose afterward, and export for follow-up without rebuilding in PowerPoint.
datePublished: 2026-06-18T00:00:00.000Z
dateModified: 2026-06-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-webinar-deck-workflow-for-product-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-webinar-deck-workflow-for-product-marketing-teams.md
---

# Webinar Deck Workflow for Product Marketing Teams

Webinar decks usually look simple from the outside.

It is "just slides." Until the team has to support the live presenter, the registration audience, the replay page, the follow-up PDF, the speaker notes, and the inevitable last-minute screenshot swap a few hours before the event starts.

That is why webinar presentations often become a messy hybrid of design file, speaking script, and post-event content package.

[Pitchdeck](/pitchdeck/) is a strong fit here because the product already supports building presentations in Figma and exporting them to PowerPoint, Google Slides, PDF, Keynote, or web presentations. For webinar teams, that flexibility matters because one deck almost always has to survive more than one context.

This article is intentionally different from nearby Pitchdeck content like [Conference Speaker Deck Workflow in Figma](/articles/pitchdeck-conference-speaker-deck-workflow-in-figma/), [Product Demo Deck Workflow in Figma](/articles/pitchdeck-product-demo-deck-workflow-in-figma/), and [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/). Those focus on stage talks, demo storytelling, or export choices broadly. This one is about the webinar workflow specifically, where live delivery and post-event reuse need to be planned together.

## A webinar deck has at least three jobs

Treating the webinar deck like a normal presentation is where the trouble starts.

Most webinar decks actually need to do three separate jobs:

- guide a live presenter through a timed story
- support audience understanding during the event
- generate assets that still work after the event ends

Those jobs overlap, but they are not identical.

For example, a live presenter may not need every explanatory sentence on screen because they can say it out loud. A replay viewer or follow-up reader often does. If the deck is designed only for one context, the team ends up rebuilding the same material again later.

## Start with the event structure, not the slide style

Before polishing layouts, lock the webinar shape:

- what question the webinar is answering
- who the primary audience is
- which sections are teaching, proving, or selling
- where live transitions happen
- what the CTA is at the end

This matters because webinar decks often bloat in the middle. Product marketing adds context. Sales wants proof. Customer marketing wants a case study. Product wants roadmap hints. Suddenly the deck has too many narrative jobs and the presenter starts skipping slides live.

A better workflow is to assign each section a clear purpose:

- open the problem
- frame the workflow or use case
- demonstrate the solution
- reinforce with proof
- close with one next step

That creates a deck the presenter can actually pace instead of surviving on improvisation.

## Build the live deck and the follow-up deck as siblings

One helpful mindset shift is to stop pretending the live deck and the post-event asset are the same file.

They come from the same source, but they do not need the same density.

The live version can prioritize:

- cleaner slide rhythm
- stronger visual emphasis
- shorter on-screen copy
- presenter-led explanation

The follow-up version may need:

- slightly more context on certain slides
- more explicit CTA language
- links or resource references
- a fixed export for sharing internally

Keeping both versions close in Figma is much healthier than rebuilding the follow-up artifact in PowerPoint after the webinar ends. Pitchdeck is especially useful here because the team can keep the source presentation in Figma while still exporting the format that each downstream audience wants.

## Plan for live interaction before the day of the event

Webinars frequently include more than linear slides:

- agenda jumps
- chapter links
- resource buttons
- embedded videos
- product screenshots that need a close reading
- bonus slides for common questions

If those interaction choices are decided late, the presenter workflow gets fragile fast.

This is where Pitchdeck's interactive web-presentation model becomes helpful. The question is not whether every webinar needs fancy interaction. It is whether the team can support the presenter and the audience without turning the deck into a maze.

My rule is simple:

- use interaction when it helps navigation or comprehension
- skip it when it only adds novelty

For webinars, useful interaction often means:

- fast section jumps for moderators
- links to resources or demos
- optional appendix branches for common objections

That is much more valuable than adding movement or complexity just because the deck technically can.

## Decide the export path before rehearsal

One of the most preventable webinar mistakes is leaving the output question until the end.

Ask early:

- will the presenter deliver from a web deck, PowerPoint, or another environment?
- will a PDF follow-up be sent after the event?
- does the internal team need an editable file for regional variants?
- will a replay landing page use screenshots or slide exports from the deck?

The best answer depends on the team, but the wrong answer is discovering these needs after final signoff.

If the event team still needs help deciding, [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/) is the right companion article. Webinar teams especially benefit from choosing the distribution format early because they usually have more downstream reuse than one-off presentations do.

## Treat speaker notes as part of production, not an afterthought

Webinar notes are often where the real knowledge lives:

- transition cues
- audience prompts
- timing reminders
- backup talking points
- moderation or handoff instructions

That means the deck workflow should support notes intentionally instead of hoping the presenter remembers everything from rehearsal.

Even when the slides look polished, a webinar feels shaky if the presenter is guessing:

- where the demo setup begins
- what to say while a video loads
- how to handle audience questions that arrive mid-section
- which slide to jump to for a backup explanation

Notes are not a nice extra. They are often the difference between a confident webinar and an awkward one.

## Rehearse the real delivery stack

This is the step teams skip when they are short on time, and it is usually the one that saves the event.

Do not just review the pretty slides in Figma. Rehearse the real delivery stack:

- the actual export or presentation mode
- the actual speaker device
- the actual video embeds or links
- the actual handoff between moderator and presenter
- the actual CTA slide and follow-up plan

A webinar deck fails differently from a normal internal deck. A dead link, unreadable small label, or awkward speaker transition becomes visible to a live audience immediately.

If the content leans heavily on a walkthrough, compare it against [Product Demo Deck Workflow in Figma](/articles/pitchdeck-product-demo-deck-workflow-in-figma/). Demo-heavy webinars need extra discipline about what gets shown live versus what stays in backup slides.

## Plan the post-event asset while the content is still fresh

Once the webinar ends, the deck usually gets reused as:

- a PDF follow-up
- a sales enablement asset
- a replay page visual source
- a regional adaptation template
- a speaking base for future webinars

That is why a good webinar workflow includes a short post-event pass:

1. remove truly live-only slides
2. tighten CTA language for async readers
3. export the intended follow-up format
4. label the reusable master clearly

Without that step, the team either sends the live deck blindly or starts a second rebuild cycle later when they want to reuse the material.

## Before the webinar deck is considered ready, confirm

- the deck has one audience and one event goal
- the live story and the follow-up artifact were planned separately
- interaction is there to help navigation, not show off
- the export destination was chosen before rehearsal
- speaker notes were reviewed like production content
- the real delivery stack was rehearsed, not just the source design

## Where Pitchdeck helps most

[Pitchdeck](/pitchdeck/) is valuable for webinars because the deck does not have to stop being a Figma-native design asset the moment the team needs a presenter-friendly output.

That reduces one of the biggest webinar headaches: rebuilding the same story in multiple tools for live delivery, follow-up, and reuse. Keeping the source inside Figma while exporting the right format for the event gives product marketing teams much more control over quality, timing, and repurposing.

That is the practical win. A webinar deck should not become less useful the moment the event ends. Pitchdeck makes it much easier to build one system that supports the whole lifecycle.

---

---
type: article
title: Modal and Drawer QA Workflow from Figma
description: Compare live modals, drawers, consent bars, and promo overlays against Figma so late-stage UI layers do not break the polished parts of the product.
datePublished: 2026-06-18T00:00:00.000Z
dateModified: 2026-06-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-modal-and-drawer-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-modal-and-drawer-qa-workflow-from-figma.md
---

# Modal and Drawer QA Workflow from Figma

The most frustrating UI bugs often are not on the main page.

They hide in the layers that appear on top of it.

A signup modal shifts the close button off rhythm on mobile. A side drawer clips the legal text. A cookie banner overlaps the CTA. A promo overlay uses the wrong spacing token and suddenly makes the whole experience feel cheaper than the underlying page.

These issues often survive longer than they should because teams review the base screens carefully and the overlays casually.

[Pixelay](/pixelay/) is a strong fit for this workflow because it compares Figma designs against real URLs, staging builds, localhost environments, and authenticated flows directly in the browser. For modals and drawers, that matters because the visual problem usually appears only in the live interaction context.

This article is intentionally different from nearby Pixelay content like [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/), [Responsive Website QA from Figma](/articles/pixelay-responsive-website-qa-from-figma/), and [Visual Bug Report Workflow for Frontend Teams](/articles/pixelay-visual-bug-report-workflow-for-frontend-teams/). Those cover broader logged-in QA, responsive review, or reporting. This one is specifically about overlays like modals, drawers, consent bars, and popups that often get added late and reviewed too lightly.

## Overlay UI creates a second layout system

That is the mindset shift that helps most.

A modal or drawer is not just a component sitting on top of the page. It creates its own rules for:

- spacing
- focus hierarchy
- edge alignment
- scrolling behavior
- background dimming
- close affordances
- mobile stacking

When those rules drift from the design, the interface feels less polished immediately, even if the main page underneath is technically correct.

This is why overlay QA deserves its own pass. The base layout can be perfect while the UI still feels wrong the moment an important surface opens.

## Collect the real trigger states before comparing anything

One reason overlay bugs survive is that the review never reaches the real state.

Teams compare:

- the page before the modal opens
- the default drawer state instead of the populated one
- the empty consent shell instead of the live legal copy
- the marketing popup without the real offer text

That is not enough.

Before running Pixelay, gather the real states that matter:

- default open state
- populated content state
- long-content or overflow state
- mobile state
- error or validation state if relevant

For overlays, state realism matters more than almost any other kind of UI review. The design might align beautifully in the empty state and break the moment production content arrives.

## Compare the open state, not just the component shell

When overlay QA is shallow, reviewers look only at the panel itself:

- width
- padding
- corner radius
- shadow

Those are worth checking, but the more important question is how the overlay behaves in the full page context.

Look at:

- where the overlay sits relative to the background content
- whether the dimmed layer feels correct
- whether fixed headers or sticky bars interfere visually
- whether the modal frame competes with background UI
- whether the focus area is obvious immediately

An overlay that is technically styled correctly can still feel wrong if the full page context makes it hard to understand where attention should go.

## Give long-copy and edge-case states a dedicated pass

This is where many overlay bugs hide.

Real production overlays often contain:

- longer legal text
- validation messages
- upsell comparisons
- billing details
- multi-step onboarding copy
- regional or consent language

Those states introduce layout pressure that the neat design mock rarely shows.

A strong Pixelay review should ask:

- does the drawer still breathe with real content?
- does the close control remain easy to find?
- does the primary action stay visually dominant?
- does the overlay start to feel cramped before the team notices?

If the product team ships long-copy overlays often, connect this review with the content workflow that owns the strings. Visual QA becomes much faster when the design and the production copy are checked together instead of on separate timelines.

## Review breakpoints where overlays feel least forgiving

Overlays usually get more fragile at narrow widths than full pages do.

Typical failure modes:

- the modal height pushes the primary CTA too low
- the drawer header and body spacing collapse
- the dimmed background makes the page feel cluttered
- consent text overwhelms the visible action
- the safe area around the close target becomes too small

This is why [Responsive Website QA from Figma](/articles/pixelay-responsive-website-qa-from-figma/) is a useful companion article. Overlays behave like mini layouts inside responsive layouts. They deserve their own breakpoint review, especially on mobile.

## Check overlay timing after late-stage growth or compliance changes

Some of the most damaging overlay regressions arrive late:

- growth adds a promotional popup
- legal updates consent text
- product adds a new upsell state
- engineering changes a form field count
- marketing swaps in a longer offer

These changes often happen after the base page already passed QA.

That is why Pixelay is so useful here. The comparison can happen against the real build without pretending the original design review is still enough. Overlay QA should be re-triggered whenever a meaningful late change affects the layer itself, not only when the page shell changes.

## Turn overlay mismatches into precise bug reports

Overlay issues are easy to describe badly.

"The modal looks off" does not help anyone.

Better reports look like:

- "At 390px wide, the drawer title wraps earlier than the Figma design and pushes the primary action below the first viewport."
- "The consent bar background is darker than the approved Figma overlay, which makes the page content compete more aggressively with the acceptance CTA."
- "The close button in the upgrade modal sits lower than the design on mobile and visually merges with the heading block."

This is where [Visual Bug Report Workflow for Frontend Teams](/articles/pixelay-visual-bug-report-workflow-for-frontend-teams/) becomes the right supporting process. Overlay bugs get fixed faster when the report names the exact state, breakpoint, and visual consequence.

## A simple overlay QA routine

For product and frontend teams, this is usually enough:

1. identify the real overlay states that matter
2. open the live, staging, or local build with those states
3. compare the full page context, not just the panel shell
4. review long-copy and mobile variants deliberately
5. log precise visual mismatches with state and breakpoint context

That routine catches a surprising number of issues that broader page QA misses.

## Before an overlay is considered visually safe, confirm

- the review used the real trigger state and real content
- the overlay felt correct in context, not only in isolation
- mobile and long-copy variants were checked separately
- late-stage copy or compliance changes triggered a fresh pass
- bug reports describe the exact mismatch and consequence

## Where Pixelay helps most

[Pixelay](/pixelay/) is valuable here because overlays are where polished interfaces quietly unravel. They often ship late, change often, and behave differently in real browsers than they do in static mocks.

Comparing the live interaction state against the Figma source makes those differences concrete. That gives designers and frontend teams a much faster way to catch the visual drift before users experience it.

That is the practical win. Modals, drawers, and overlays should feel like part of the product system, not the rushed layer sitting on top of it. Pixelay makes it much easier to keep them aligned.

---

---
type: article
title: Case Study Screenshot Workflow for B2B Marketing Teams
description: Export sharper, lighter case study visuals from Figma so customer story pages can prove the product without slowing the page down.
datePublished: 2026-06-18T00:00:00.000Z
dateModified: 2026-06-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-case-study-screenshot-workflow-for-b2b-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-case-study-screenshot-workflow-for-b2b-marketing-teams.md
---

# Case Study Screenshot Workflow for B2B Marketing Teams

Case study pages usually start with good intentions and end with oversized screenshots.

Product marketing wants real interface proof. Design wants the screenshots to look polished. Content wants annotations that explain the moment quickly. Then the story page goes live with heavy PNGs, inconsistent crops, and image blocks that look softer in the CMS than they did in Figma.

That is where [TinyImage](/tinyimage/) fits well. The plugin keeps compression and export choices inside the Figma workflow instead of forcing a second cleanup pass in outside tools after the page is already designed.

This article is intentionally different from nearby TinyImage content like [Product Screenshot Export Workflow for SaaS Landing Pages](/articles/tinyimage-product-screenshot-export-workflow-for-saas-landing-pages/), [CMS Image Publishing Workflow from Figma](/articles/tinyimage-cms-image-publishing-workflow-from-figma/), and [Social Share Image Export Workflow from Figma](/articles/tinyimage-social-share-image-export-workflow-from-figma/). Those cover homepage proof, general CMS publishing, or Open Graph-style assets. This one is about long-form customer stories, where the screenshots need to carry more narrative weight without turning the page into a performance problem.

## Case study screenshots do a harder job than landing page screenshots

On a landing page, one screenshot often just needs to support a headline.

In a case study, the visuals usually need to prove:

- what the customer actually used
- which workflow changed
- where the before-and-after difference lives
- why the result feels believable

That means the screenshots are often denser. They may include:

- dashboards with small labels
- filtered states
- reporting tables
- onboarding steps
- settings panels
- annotated interface details

If the export is too heavy, the page drags. If the compression is too aggressive, the proof gets muddy. The right goal is not "smallest possible image." It is "light enough for the story page, sharp enough for the proof."

## Choose the proof moments before you export anything

The most common case study screenshot mistake is exporting everything the team has.

That usually creates a long page full of similar interface blocks that readers skim past. A stronger workflow starts by deciding which moments are actually doing narrative work.

For most B2B case studies, that means picking screenshots that answer one of these questions:

- What did the customer manage before this workflow existed?
- What changed in the product?
- What result became easier or faster?
- What screen would a buyer remember after the story ends?

When those jobs are clear, the screenshot set gets smaller and better.

A useful structure is:

1. one "hero proof" screenshot near the outcome section
2. one workflow detail screenshot that explains how the product works
3. one supporting screenshot tied to the measured result or team process

That is usually more persuasive than dumping six near-identical UI frames into the page.

## Crop for understanding, not for artistic symmetry

Case studies reward disciplined cropping.

A beautiful full-product screenshot can still be the wrong screenshot if the real point is one filtered report, one automation state, or one approval panel. The crop should help the reader find the evidence quickly.

Good questions to ask in Figma before export:

- Where would a reader look first if they had ten seconds?
- Is the value in the whole page or one module?
- Does the crop keep enough surrounding UI to make the screen feel real?
- Would a callout or highlight do more than a wider frame?

If the answer is "the proof is inside one dense table row," do not keep extra chrome just because it looks balanced on the canvas. Crop for comprehension.

This is especially important on customer-story pages because readers often scroll faster than they would through documentation or a product tour.

## Keep annotations useful enough to earn their pixels

Annotated screenshots are common in case studies because the team wants to point at what changed.

The problem is that annotations can easily make the file heavier while also making the image harder to read. Every arrow, callout badge, and label has to justify itself.

I like to keep annotation use narrow:

- one callout when the change is small but important
- one label when the UI is unfamiliar
- one sequence marker when the workflow has an order

What usually hurts:

- labeling every visible region
- using large colored blocks that fight the UI
- shrinking the real interface too much to make room for commentary

If the screenshot only becomes understandable after five callouts, the better fix may be choosing a simpler proof moment.

## Export by reading context, not by design-tool habit

Case study visuals get consumed in several contexts:

- inside the story page body
- in repurposed snippets for sales follow-up
- in linked blog summaries
- in screenshots quoted by product marketing or founder posts

That does not mean one master export has to do every job. It means the team should know which version belongs to the page itself.

For the in-article version, the key checks are:

- does the screenshot still look credible at content-column width?
- are small labels readable without zooming?
- does the image load quickly enough for a long page with several proof blocks?
- does the export feel consistent with the rest of the page visuals?

[TinyImage](/tinyimage/) is helpful here because it lets teams compare lighter export options inside the source workflow instead of treating performance as an afterthought.

## Review sharpness where the buyer's trust actually lives

For case studies, trust usually lives in the detailed areas:

- chart labels
- tab names
- status badges
- segmentation controls
- numbers inside tables
- interface states that show the product is real

That is where to review compression decisions.

It is easy to approve an image because the overall composition looks fine, while missing that the one number or filter state doing the proof work now looks muddy. When testing compressed exports, zoom in on the detail that carries credibility, not just the whole page.

If the case study also needs clean teaser images for sharing, pair the body-image process with [Social Share Image Export Workflow from Figma](/articles/tinyimage-social-share-image-export-workflow-from-figma/). The long-form proof image and the share-preview image should not be forced into the same job.

## Hand off a screenshot set, not a pile of files

Case study image handoff breaks when marketing, content, and web teams all grab different versions.

Use a simple asset set that makes the intended use obvious:

- `case-study_hero-proof`
- `case-study_workflow-detail`
- `case-study_supporting-result`

If the page also needs smaller derivatives for card layouts or newsletter recaps, name those as separate outputs instead of trusting the CMS to improvise. That prevents quiet quality loss later when someone reuses the wrong export in a tighter slot.

The handoff note should answer:

- where each image belongs on the page
- whether it was exported for desktop-width article use or a smaller module
- which proof detail should remain readable after upload

That is a much better system than a folder full of `final-final-v2` screenshots.

## Review the images in the real story layout

Before calling the screenshot pass done, check them inside the actual page or staging layout if possible.

Case study visuals that looked strong in Figma can weaken once:

- the body column narrows them
- the caption adds extra visual weight
- two image blocks stack too closely
- the CMS compresses or transforms them again

This is where the article workflow and the web workflow finally meet. If the screenshot feels too soft or too tall inside the real content block, fix the export intentionally instead of hoping the reader will not notice.

## Before publishing a case study screenshot set, confirm

- each screenshot has one narrative job
- the crop favors proof over decoration
- any annotation earns its space
- compression was reviewed on the densest proof areas
- naming makes the intended page placement obvious
- the exported images were checked in the real article layout

## Where TinyImage helps most

[TinyImage](/tinyimage/) is not what makes a case study persuasive. The customer story, outcome, and proof strategy still do that.

What TinyImage removes is the repetitive, fragile cleanup between a strong Figma proof image and a web-ready export. Instead of dragging screenshots through a separate compression toolchain and hoping nothing gets lost, the team can make deliberate tradeoffs while the design source is still in front of them.

That is the real win for B2B case studies. The visuals should make the story feel more credible, not heavier, blurrier, or harder to ship.

---

---
type: article
title: Retail Media Display Ad Workflow for Ecommerce Teams
description: Plan retailer-specific display banners in Figma so pricing, product proof, and placement variants stay consistent across fast-moving marketplace campaigns.
datePublished: 2026-06-17T00:00:00.000Z
dateModified: 2026-06-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-retail-media-display-ad-workflow-for-ecommerce-teams/
markdownUrl: https://www.hypermatic.com/articles/bannerify-retail-media-display-ad-workflow-for-ecommerce-teams.md
---

# Retail Media Display Ad Workflow for Ecommerce Teams

Retail media banners look close enough to normal display ads that teams underestimate the workflow difference.

Then the campaign starts.

Now the creative has retailer-specific placements, different product sets, pricing that changes late, brand rules from the merchant partner, and a deadline that leaves very little room for rebuilding assets size by size. The team is no longer just making banner ads. It is managing a matrix of commerce-driven creative variants.

[Bannerify](/bannerify/) is a strong fit for that kind of work because it keeps motion, preview, and export tied to the Figma source instead of forcing every placement update through separate production steps.

This article is intentionally different from nearby Bannerify content like [Retargeting Banner Workflow for Ecommerce Teams](/articles/bannerify-retargeting-banner-workflow-for-ecommerce-teams/), [Banner Variant Review Workflow for Campaign Teams](/articles/bannerify-banner-variant-review-workflow-for-campaign-teams/), and [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/). Those focus on audience-stage retargeting, general variant review, or downstream ad ops handoff. This one is about retail media creative, where product detail, pricing accuracy, and retailer-specific requirements drive the production system.

## Retail media changes the banner brief

A general brand campaign can often lead with mood, product story, or broad offer framing.

Retail media usually has tighter constraints:

- a specific product or SKU set
- price or discount visibility
- retailer-specific proof requirements
- fast campaign refresh cycles
- more scrutiny on the final promotional details

That means the banner system should be planned around the commerce decision, not just the brand look.

If the core creative does not clearly show:

- what is being sold
- why it matters now
- where the user is going next

then the team ends up compensating with more variants, more copy, or late review rounds that slow everything down.

## Build a placement matrix before designing motion

Retail media campaigns multiply quickly because the same concept may need to change by:

- placement size
- retailer or merchant partner
- product assortment
- offer window
- output format

That is why the first useful artifact is a matrix, not a banner canvas.

At minimum, define:

- which placements share the same message
- which elements are global
- which elements are retailer-specific
- which prices or promo details can change late
- which outputs need separate QA because of platform constraints

Once the matrix exists, the design system gets easier to control. The team can stop pretending each banner is a fresh creative exercise and start treating the campaign like a structured family.

## Keep product proof separate from retailer-specific overlays

One of the easiest ways to make retail media creative brittle is baking every retailer-specific detail directly into the base design logic.

A better split is:

global layer
- product visual treatment
- animation rhythm
- CTA hierarchy
- brand styling

retailer-specific layer
- pricing callouts
- retailer badge or merchant context
- legal copy if required
- partner-specific copy variations
- destination or promotion nuance

This separation makes late changes much less painful. If the pricing or retailer detail moves, the team does not have to rethink the whole animation structure.

Bannerify helps a lot here because the base animation system can stay stable in Figma while the variant-specific details are adjusted before export.

## Price and promo-date QA deserve their own review pass

Retail media banners often fail on tiny details that are commercially important:

- the wrong sale price
- an expired promo date
- mismatched product count
- a missing qualifier
- a CTA that no longer matches the destination

Those are not "small copy issues." They are campaign risk.

That is why I like a dedicated proof review that asks:

- does every size show the current price correctly?
- do end dates or promo windows match the brief?
- are retailer-specific details applied only where they should be?
- did one late product swap break the final frame?

If the campaign also has many size and offer combinations, [Banner Variant Review Workflow for Campaign Teams](/articles/bannerify-banner-variant-review-workflow-for-campaign-teams/) is a strong companion read.

## Choose format families early, not after approvals

Retail media work often needs more than one output path:

- HTML5 for richer placements
- GIF or MP4 for lighter review or alternate delivery needs
- preview-friendly versions for stakeholders before trafficking

The mistake is waiting until the campaign is approved to decide how each placement will be delivered.

That delay creates rework because format constraints can change:

- file-weight tolerance
- animation pacing
- readability of small price text
- final-frame dwell time

Bannerify is useful here because the export choices stay close to the Figma source. The team can preview and package the correct creative family before ad ops starts chasing missing variants.

## Review the small placements first, not last

Retail media creative often feels fine in the hero size and weak everywhere else.

That is because the small placements reveal whether the concept is actually disciplined:

- does the price stay legible?
- does the product remain identifiable?
- does the CTA still feel intentional?
- does the animation reach the offer in time?

If those answers are weak, the team should simplify the message instead of piling on more exceptions.

This is also where [Display Ad QA Checklist Before Launch](/articles/bannerify-display-ad-qa-checklist-before-launch/) becomes a useful companion process. Retail media banners still need the same launch discipline as broader display campaigns, but with extra pressure on product and promo accuracy.

## Use naming that matches how the campaign will be trafficked

Retail media handoff gets messy when filenames describe design drafts instead of campaign logic.

Use naming that reflects the actual trafficking structure:

- retailer or partner
- product family
- offer window
- size
- output type

That keeps the last-mile handoff much calmer because ad ops can understand what each file is for without consulting the original designer.

If the campaign is already approaching trafficking, [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/) is the next step after creative QA.

## Before the campaign leaves design, confirm

- the placement matrix is defined before variant production expands
- global creative logic is separated from retailer-specific details
- pricing and promo-date details received a dedicated review pass
- format families were chosen before final packaging
- small placements were checked for legibility and timing
- filenames reflect trafficking logic instead of revision history

## Where Bannerify helps most

[Bannerify](/bannerify/) is valuable here because retail media campaigns are rarely blocked by the first creative concept. They are blocked by the repeated production work that follows every product swap, pricing update, and placement request.

Keeping animation, preview, and export close to the Figma source gives ecommerce teams a cleaner system. They can control the base concept, adapt retailer-specific details without rebuilding everything, and produce launch-ready banner families faster.

That is what makes the workflow practical. Retail media banners should feel like a controlled campaign system, not a pile of emergency variants. Bannerify makes that much easier to achieve.

---

---
type: article
title: Agency Takeover Workflow for Inherited Client Design Files
description: Turn Sketch, XD, PDF, PowerPoint, and document-based client files into an editable Figma starting point when your agency inherits an account midstream.
datePublished: 2026-06-17T00:00:00.000Z
dateModified: 2026-06-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-agency-takeover-workflow-for-inherited-client-design-files/
markdownUrl: https://www.hypermatic.com/articles/convertify-agency-takeover-workflow-for-inherited-client-design-files.md
---

# Agency Takeover Workflow for Inherited Client Design Files

Taking over a client account is rarely a clean greenfield moment.

The new agency gets a folder full of inherited files. Some are in Figma. Some are old PDFs. A slide deck lives in PowerPoint. Product flows are still in Adobe XD. Brand rules are trapped in documents. The client expects momentum next week, not a month of format archaeology.

That is exactly the kind of transition [Convertify](/convertify/) is built to make less painful. The plugin helps agencies move legacy assets and mixed design files into an editable Figma workflow so the new team can start shipping instead of rebuilding everything from screenshots.

This article is intentionally different from adjacent Convertify pieces like [Client Design File Intake Checklist](/articles/convertify-client-design-file-intake-checklist/), [Agency Workflow for Mixed Design File Formats](/articles/convertify-agency-workflow-for-mixed-design-file-formats/), and [Client Offboarding Source File Workflow for Agencies](/articles/convertify-client-offboarding-source-file-workflow-for-agencies/). Those cover intake discipline, ongoing mixed-format collaboration, or final delivery. This one is about the takeover phase, when a new agency inherits messy source material and needs a working Figma system fast.

## The first goal is continuity, not perfect migration

Agency takeovers go wrong when the team tries to normalize every file before stabilizing the live work.

Usually there is already an urgent queue:

- launch assets that still need edits
- product screens that marketing is reusing
- proposal or deck pages that sales keeps sending
- brand collateral that the client expects to refresh immediately

That means the right first question is not "how do we migrate everything?" It is:

which files must become editable in Figma first so the new team can keep work moving?

Continuity comes before archive perfection.

## Classify inherited files by future use, not by file extension

The incoming folder often looks overwhelming because it is grouped by format instead of by business value.

A much better takeover map is:

`active production assets`
- current landing pages
- current product screens
- current campaign collateral

`reusable source material`
- templates
- deck shells
- illustration libraries
- editable brand assets

`reference-only files`
- archived concepts
- outdated exports
- legacy deliverables nobody will edit again

This classification tells the team where Convertify should be used first. If a file will not be edited again, it probably does not deserve the same migration effort as an active customer-facing asset.

## Rebuild the source of truth around Figma, not around the old folder structure

Inherited accounts often come with several partial truths:

- the previous agency's design tool
- the client's internal edits
- exported PDFs used in real workflows
- written guidelines in Word or Google Docs

Trying to preserve that exact sprawl inside the new agency's process is a mistake.

The better move is to establish one Figma-centered source of truth and pull the necessary upstream material into it.

That may include:

- importing editable design files into Figma
- pulling supporting content from Word or Google Docs
- extracting usable page structures from PDFs
- bringing decks or proposal slides into a format the new team can revise safely

Convertify is useful because it reduces the rebuild tax on that transition. The team still needs judgment, but it does not need to redraw every inherited layout by hand.

If you need a broader prep model, [Client Design File Intake Checklist](/articles/convertify-client-design-file-intake-checklist/) is the right companion process.

## Start with one live deliverable instead of a giant migration project

The safest takeover rhythm is:

1. choose one active deliverable
2. convert the source material needed for that deliverable
3. clean it into a usable Figma structure
4. ship one real update from the new system

Why this order?

Because it validates the migration model under real pressure.

Maybe the client urgently needs a sales deck refresh. Maybe the website hero needs new messaging. Maybe a product flow must be updated for screenshots. That first successful update shows whether the converted file structure is actually good enough to support live work.

Mass conversion before that proof step often creates a beautiful archive that nobody trusts in production.

## Preserve provenance while you convert

One frustration in takeovers is losing track of where an asset came from.

That makes later review difficult:

- was this screenshot sourced from the approved PDF or from the old XD file?
- which slide deck is the client still sharing?
- is this the brand-guideline version legal approved or a later export?

A practical transition system keeps provenance visible:

- note the original source format
- label migrated sections by business use
- keep old and new filenames traceable
- flag anything that was imported for reference instead of full editability

That small layer of documentation saves a huge amount of guesswork when the client later asks, "Can we also update the version we used last quarter?"

## Build the first Figma file for takeover speed, not library elegance

The new agency can clean up the system later.

The first migration-ready Figma file should prioritize:

- clear page grouping
- usable text layers
- obvious asset ownership
- dependable screenshot or slide boundaries
- enough naming consistency that the team can iterate without confusion

It does not need to become the final design-ops masterpiece on day one.

This is the same logic behind [How to Preserve Editability When Converting Legacy Design Files to Figma](/articles/convertify-how-to-preserve-editability-when-converting-legacy-design-files-to-figma/): preserve the parts that keep the next round of work efficient.

## Review the migration by editing something real

The fastest QA pass for a takeover file is not only visual comparison. It is live editing.

Check whether the team can:

- update headings without layout collapse
- swap screenshots or artwork predictably
- edit core text blocks without unexpected breakage
- duplicate reusable sections for new variants
- export the next required output from the migrated file

That is what tells you whether the new Figma source is operationally useful.

If a migrated file looks accurate but still forces the team to flatten or rebuild every update, the takeover is not done yet.

## Before the agency declares the takeover stable, confirm

- active production assets were prioritized before archive cleanup
- inherited files were classified by future use, not only by format
- one clear Figma-centered source of truth now exists
- provenance of key assets is still understandable
- at least one real deliverable was shipped from the converted workflow
- the client-facing next step no longer depends on reopening the old tool stack

## Where Convertify helps most

[Convertify](/convertify/) is at its best when an agency takeover is blocked by format mismatch rather than by design skill.

The plugin does not replace the need for cleanup, prioritization, or client context. What it does remove is the wasted labor of recreating inherited work from scratch just to get started in Figma. Agencies can convert the files that matter, establish a new working source of truth faster, and prove the takeover with real deliverables instead of migration theater.

That is the practical win. A takeover should create momentum quickly. Convertify makes it much easier for the new team to inherit complexity without inheriting weeks of avoidable rebuild work.

---

---
type: article
title: Release Notes Copy Alignment Workflow in Figma
description: Keep UI labels, changelog screenshots, help callouts, and support-ready wording aligned when a shipped feature needs to be explained everywhere at once.
datePublished: 2026-06-17T00:00:00.000Z
dateModified: 2026-06-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-release-notes-copy-alignment-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-release-notes-copy-alignment-workflow-in-figma.md
---

# Release Notes Copy Alignment Workflow in Figma

Shipping the feature is usually the easy part.

Explaining it everywhere is where the copy starts drifting.

The new label is correct in the product UI. The changelog screenshot still shows the old button. The help article uses a halfway-updated term. Support macros lag behind the release notes. Product marketing grabs a screenshot from an outdated mock. Nobody made one catastrophic mistake, but the combined effect makes the release feel less polished than it is.

[CopyDoc](/copydoc/) is a strong fit for this moment because the plugin sits right at the point where Figma text, screenshots, review files, and spreadsheet-driven updates need to stay synchronized instead of relying on manual copy-paste.

This article is intentionally different from adjacent CopyDoc content like [Feature Flag Copy Rollout Workflow in Figma](/articles/copydoc-feature-flag-copy-rollout-workflow-in-figma/), [Help Center and UI Copy Alignment Workflow in Figma](/articles/copydoc-help-center-and-ui-copy-alignment-workflow-in-figma/), and [Product Marketing Screenshot Copy Workflow](/articles/copydoc-product-marketing-screenshot-copy-workflow/). Those cover staged rollout states, ongoing help-center consistency, or screenshot-specific governance. This one is about the release-notes moment, when a shipped change needs one consistent explanation across UI, visuals, support, and documentation.

## Start with a release language pack, not scattered edits

Release communication gets messy when every surface is updated independently.

A cleaner workflow starts with one small release language pack that defines:

- the approved feature name
- the retired wording that should disappear
- the short one-line explanation
- the screenshot caption or changelog phrasing
- any supporting help-center terminology
- support-facing wording for common questions

This does not need to be a giant system. It just needs to exist before people start editing Figma frames one by one.

Once the pack exists, CopyDoc can help the team update structured text across the relevant design surfaces instead of relying on memory and Slack messages.

## Map the release by user moment

The most useful way to review release-note copy is not by page. It is by user moment.

Typical moments include:

- seeing the new feature in-product
- reading the changelog or release note
- opening a supporting help article
- viewing screenshots in launch materials
- contacting support after the change

That matters because the explanation should feel consistent across those moments, even when the detail level changes.

For example, the UI might use the shortest label, while the release notes use a more descriptive phrase. That is fine. What breaks trust is when the wording implies the team is talking about three different features.

## Update screenshots and captions from the same source of truth

A lot of release-note inconsistency is actually screenshot inconsistency.

The feature name changes in the interface, but the visible visuals still show:

- the old navigation term
- the old settings label
- the outdated empty state
- a stale tooltip or helper line

That is why release-note copy and screenshot copy should be reviewed together.

If the shipped change is visible in the UI, make sure the screenshot set answers:

- which frame represents the released state?
- which caption explains the change?
- which old screenshot must be retired?
- which downstream assets reuse this same visual?

If screenshot management is the bigger pain point, pair this process with [Product Marketing Screenshot Copy Workflow](/articles/copydoc-product-marketing-screenshot-copy-workflow/).

## Review support wording before the announcement goes live

This is the part many teams skip.

Support usually receives the consequences of inconsistent release language first:

- "I cannot find the old menu item"
- "Is this the same thing as the feature you renamed last week?"
- "Your release notes say one thing but the screen says another"

That is why support-ready wording should be reviewed in the same pass as the release-note copy.

Useful questions:

- what old term are users most likely to search for?
- what is the shortest correct explanation support can reuse?
- which screenshots should support attach if users are confused?
- does the help article use the same core language as the changelog?

The release is not fully explained until the team can answer those questions consistently.

## Treat help-callout copy as part of the launch surface

Release-note workflows often overlook the small explanatory text that appears around a new feature:

- onboarding callouts
- inline hints
- empty-state guidance
- "what changed" panels
- linked help references

These surfaces can easily drift because they feel secondary. But they are often the first contextual explanation users actually read inside the product.

This is where [Help Center and UI Copy Alignment Workflow in Figma](/articles/copydoc-help-center-and-ui-copy-alignment-workflow-in-figma/) becomes a strong companion article. The release-note moment is time-sensitive, but the alignment habit should extend beyond the launch week.

## Keep one post-ship errata list

Even careful teams discover wording issues after release:

- one screenshot stayed outdated
- one help title uses the old term
- one support macro still references the pre-launch label

Instead of treating those as random cleanup tasks, keep one short post-ship errata list tied to the release. That gives the team a controlled way to finish the communication layer without losing track of what was fixed later.

This also improves the next launch because the team can see where copy drift usually starts:

- screenshots
- support surfaces
- secondary empty states
- help-center cross-links

That feedback loop is what turns one clean launch into a repeatable release process.

## Know when this is not a release-notes problem

Sometimes the copy mess is not about the launch announcement at all.

If two product states must coexist for a while, the better workflow is [Feature Flag Copy Rollout Workflow in Figma](/articles/copydoc-feature-flag-copy-rollout-workflow-in-figma/). If the problem is broader stale wording across the product, [Stale Product Copy Audit Workflow in Figma](/articles/copydoc-stale-product-copy-audit-workflow-in-figma/) is the better model.

That distinction matters because release-note alignment assumes the new language is now the language the business intends to keep.

## Before the release copy is considered aligned, confirm

- one release language pack defines the approved terms
- UI text, screenshots, and release-note captions all reflect the shipped state
- help-callout and support wording were reviewed in the same pass
- outdated visuals and phrases were explicitly retired
- post-ship cleanup items have one visible errata list instead of scattered reminders

## Where CopyDoc helps most

[CopyDoc](/copydoc/) is valuable here because release communication problems usually come from synchronization failure, not from weak writing alone.

The team often knows what the feature should be called. The hard part is getting that language applied consistently across the Figma source, screenshots, and adjacent support assets before the release spreads through several channels. CopyDoc makes those updates much easier to coordinate without turning launch week into a copy-paste cleanup marathon.

That is the practical win. Release notes should make a shipped feature feel clearer, not more fragmented. CopyDoc helps teams keep the language, visuals, and supporting explanations moving together while the change is still fresh.

---

---
type: article
title: Webinar Email Sequence Workflow for Product Marketing Teams
description: Plan registration, reminder, last-chance, and follow-up emails in Figma so webinar campaigns ship as one coherent HTML sequence instead of isolated sends.
datePublished: 2026-06-17T00:00:00.000Z
dateModified: 2026-06-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-webinar-email-sequence-workflow-for-product-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-webinar-email-sequence-workflow-for-product-marketing-teams.md
---

# Webinar Email Sequence Workflow for Product Marketing Teams

Webinar email campaigns rarely fail because one email looks bad.

They fail because the sequence feels disconnected.

The registration email uses one promise. The reminder email uses another. The day-of send buries the join link. The replay email looks like it came from a different template. Then the team still has to export real HTML, review mobile behavior, and get everything into the ESP without rebuilding each send from scratch.

That is where [Emailify](/emailify/) is useful. It keeps the design, responsive structure, preview path, and HTML export closer together inside Figma, which makes it much easier to treat the webinar campaign like one system instead of four unrelated sends.

This article is deliberately different from nearby Emailify content like [Product Launch Email Workflow in Figma](/articles/emailify-product-launch-email-workflow-in-figma/), [Lifecycle Email Workflow for Marketing Ops Teams](/articles/emailify-lifecycle-email-workflow-for-marketing-ops-teams/), and [Weekly Merchandising Email Workflow for Ecommerce Teams](/articles/emailify-weekly-merchandising-email-workflow-for-ecommerce-teams/). Those cover launches, automated lifecycle journeys, or recurring promo sends. This one is about webinar sequences, where timing, continuity, and attendance behavior shape the production workflow.

## Webinar email work is a sequence problem first

Most teams start by designing the registration email because it is the visible kickoff asset.

That is understandable, but it hides the real workflow problem.

A webinar campaign usually includes at least:

- invitation or registration email
- confirmation email
- reminder email
- day-of or last-chance email
- replay or follow-up email

Each send has a different job, but the subscriber should still feel like they are in one coherent experience.

If the sequence is designed one send at a time with no shared structure, the campaign loses trust quickly. The reader should not feel like a different team showed up at every stage.

## Lock the message map before modules start multiplying

Webinar campaigns get noisy when every stakeholder tries to add their favorite detail to every send.

Before building the sequence in Figma, define:

- the one webinar promise
- who the session is for
- what the subscriber should do next at each stage
- which details repeat across the sequence
- which details are unique to one send

For example:

- the invitation sells relevance
- the confirmation removes uncertainty
- the reminder restores attention
- the day-of send reduces friction
- the replay email extends the value window

Once that map exists, design decisions get easier. The team no longer debates whether every email needs the full speaker bio, full agenda, and every proof point all over again.

## Build one sequence system with controlled variation

Webinar emails benefit from a shared base more than many teams realize.

Useful shared elements include:

- consistent header treatment
- stable CTA styling
- recurring speaker or host block
- visual rhythm for agenda or proof sections
- footer and compliance structure

Then vary only what truly changes:

- subject and preheader
- main message
- urgency level
- CTA copy and destination
- supporting proof for that stage

That balance keeps the sequence coherent without making every send feel cloned.

If you are still refining reusable email foundations, [Modular Email Template Workflow in Figma](/articles/emailify-modular-email-template-workflow-in-figma/) is the best adjacent article to read first.

## Reminder emails are where production discipline matters most

The invitation email usually gets the most creative attention.

The reminder emails usually create the most operational risk.

That is because they have to answer practical questions clearly:

- when is the webinar?
- what timezone should the reader care about?
- where does the join link live?
- what should someone do if they missed registration earlier?
- how much copy is actually needed now?

Reminder sends often break when the layout treats them like mini launch emails. The closer the event gets, the more the email should prioritize clarity over persuasion.

That means:

- shorter message blocks
- a more obvious CTA
- less decorative imagery
- fewer repeated proof sections
- stronger mobile scanning

The real risk is not blandness. It is friction.

## Review the sequence in order, not as separate files

This is the step that keeps webinar campaigns from feeling fragmented.

Before export, review the emails in the order a subscriber would actually receive them:

1. invitation
2. confirmation
3. reminder
4. day-of message
5. replay or follow-up

Ask:

- does the promise stay consistent?
- does the visual system still feel like one campaign?
- does urgency increase logically?
- does the CTA become simpler as the event gets closer?
- does the replay email feel like a continuation instead of an afterthought?

That review catches continuity issues that are invisible when each email is approved in isolation.

## Approve real HTML behavior before the sequence reaches the ESP

Webinar teams often approve designs as screenshots and only later discover the production friction:

- button spacing collapses on mobile
- stacked agenda blocks become too tall
- the reminder email pushes the join CTA too far down
- footer or compliance text crowds the replay email

That is why [HTML Email Preview Link Approval Workflow for Stakeholder Signoff](/articles/emailify-html-email-preview-link-approval-workflow-for-stakeholder-signoff/) fits so well beside this process. Webinar campaigns benefit from stakeholders seeing something close to the real email rather than only looking at static mocks.

If mobile rendering is a recurring issue, pair this workflow with [Mobile Email QA Workflow Before Export](/articles/emailify-mobile-email-qa-workflow-before-export/).

## Do not forget the plain-text and post-event layer

Many webinar workflows focus entirely on the pre-event HTML sends and then improvise the follow-up.

That is a missed opportunity.

The replay email, no-show follow-up, or next-step nurture message should be considered during the same planning pass. Even if the exact copy lands later, the team should know:

- whether a replay asset will exist
- whether the sequence branches by attended versus missed
- whether a plain-text companion version is required
- which CTA matters after the event

If your team handles both styled HTML and simpler operational follow-ups, [Plain Text and HTML Email Workflow for Lifecycle Teams](/articles/emailify-plain-text-and-html-email-workflow-for-lifecycle-teams/) is a useful companion model.

## Before exporting the webinar sequence, confirm

- the campaign was planned as one sequence rather than isolated sends
- the message map defines what each email must do
- shared modules create continuity without forcing every send to be identical
- reminder and day-of emails prioritize clarity over decoration
- the full sequence was reviewed in order
- stakeholders approved behavior close to the real HTML output

## Where Emailify helps most

[Emailify](/emailify/) is valuable here because webinar campaigns create repeated design-to-production handoffs in a very short window.

Instead of designing one send in Figma and rebuilding the rest later in an ESP, teams can keep the sequence structure, responsive review, and HTML export path much closer together. That makes it easier to ship campaigns that feel coherent, stay on-brand, and still handle the practical realities of reminders, join links, and post-event follow-up.

That is the real goal. Webinar emails should feel like one coordinated journey. Emailify makes it much easier to build that journey without turning every send into a separate production scramble.

---

---
type: article
title: RFP Response Deck Workflow for B2B Sales Teams
description: Build repeatable RFP response decks in Figma so sales and presales teams can tailor proposals fast without rebuilding slides in PowerPoint.
datePublished: 2026-06-17T00:00:00.000Z
dateModified: 2026-06-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-rfp-response-deck-workflow-for-b2b-sales-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-rfp-response-deck-workflow-for-b2b-sales-teams.md
---

# RFP Response Deck Workflow for B2B Sales Teams

RFP decks create a very specific kind of presentation chaos.

The request arrives with a fixed deadline. Sales wants a polished narrative. Presales needs room for technical detail. Product marketing wants the deck to stay on-brand. Someone digs up an old PowerPoint response from a similar deal, copies six slides into a new file, and quietly restarts the version-sprawl problem all over again.

[Pitchdeck](/pitchdeck/) is a strong fit here because it lets the master response live in Figma while still giving the team several delivery options at the end: PowerPoint for field edits, PDF for locked review, Google Slides for comments, or a hosted web version when sharing control matters.

This article is deliberately different from neighboring Pitchdeck content like [Security Review Deck Workflow for B2B SaaS Teams](/articles/pitchdeck-security-review-deck-workflow-for-b2b-saas-teams/), [Executive Briefing Deck Workflow for Enterprise Sales Teams](/articles/pitchdeck-executive-briefing-deck-workflow-for-enterprise-sales-teams/), and [Figma Sales Deck Workflow for Revenue Teams](/articles/pitchdeck-figma-sales-deck-workflow-for-revenue-teams/). Those cover security diligence, senior-stakeholder storytelling, or broader sales narratives. This one is specifically about RFP responses, where the deck has to answer structured buyer questions without becoming a slide dump.

## An RFP deck is a response system, not a generic sales deck

The mistake many teams make is starting with the standard pitch deck and trying to stretch it until it sort of matches the request.

That usually creates predictable problems:

- required questions get buried in persuasive slides
- duplicate information appears in slightly different wording
- the account team cannot tell which slides are mandatory
- technical detail gets added too late and breaks the structure
- every custom request feels like a new deck instead of a controlled variant

A better model is to treat the deck like a response system with two layers:

- a reusable answer bank
- a deal-specific adaptation layer

That structure keeps the team fast without making every response feel generic.

## Map the RFP questions before you touch layout

RFP requests often arrive as a spreadsheet, portal form, document, or long email thread.

Before opening the design file, translate the request into a deck map:

- what questions must be answered visually
- what answers belong in appendix slides
- what proof needs screenshots, diagrams, or tables
- what content already exists and is still approved
- which sections need customer-specific tailoring

This is the point where many teams discover that not every answer deserves a headline slide. Some items are better handled as:

- one focused proof slide
- one comparison table
- one appendix cluster
- one customer-specific architecture or rollout view

If the team skips this mapping step, the final deck tends to swing between two bad outcomes: too shallow to answer the RFP, or too bloated to be usable in a real review meeting.

## Separate fixed answers from account-specific slides

RFP response decks work best when the stable material is clearly separated from the variable layer.

Fixed layer examples:

- company overview
- product capability summary
- implementation model
- governance or support process
- repeatable proof points

Variable layer examples:

- customer-specific objectives
- tailored rollout steps
- architecture or environment details
- industry-specific proof
- buyer-specific objections or evaluation criteria

This separation matters because sales teams often need to revise the variable layer quickly without putting the approved core narrative at risk.

If your team also fields deeper security or procurement questions, keep this workflow paired with [Security Review Deck Workflow for B2B SaaS Teams](/articles/pitchdeck-security-review-deck-workflow-for-b2b-saas-teams/). The RFP deck can introduce the answer set, while the security deck handles the heavier diligence path.

## Design for scanning first, presenting second

Some RFP decks are never formally presented.

They are:

- emailed to a buying committee
- uploaded to a procurement portal
- reviewed asynchronously by technical evaluators
- forwarded internally without the account team present

That means the slides must survive scanning.

Useful habits:

- make slide titles answer a real question
- keep diagrams labeled plainly
- use tables only when comparisons genuinely matter
- avoid decorative motion or clever transitions that do not improve understanding
- keep each slide anchored around one clear evaluation point

An RFP reviewer should not have to infer what the slide is supposed to prove. The structure should do that work immediately.

## Decide the export path before late-stage edits begin

RFP responses get messy when the format decision happens at the end.

Use a simple rule:

- export to PDF when the submission needs a locked artifact
- export to PowerPoint when the field team still needs final customer tailoring
- export to Google Slides when comment-driven internal review matters most
- share a hosted web version when controlled access or engagement visibility helps the team

If the team argues about this after the deck is nearly finished, it usually means the workflow was not aligned to the buyer process early enough.

[Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/) is the best companion article when the answer is not obvious.

## Build one ownership model for redlines

RFP decks collect feedback from several directions at once:

- account executives
- solutions engineers
- product marketing
- legal or procurement stakeholders
- leadership reviewers

Without one redline owner, the deck becomes a patchwork of partially approved changes.

A cleaner review model is:

1. one owner consolidates content feedback
2. core slides are protected from random field edits
3. deal-specific slides absorb the tailored changes
4. final export happens only after the response map is complete again

That sounds procedural, but it saves time. RFP decks break more from uncontrolled edits than from lack of design effort.

## Treat the appendix as part of the system, not as overflow

The appendix is where a lot of RFP value lives:

- deeper capability details
- extra workflow diagrams
- rollout or onboarding structure
- evaluation-specific supporting material

The mistake is dumping everything there without rules.

A better appendix should be:

- grouped by question type
- easy for sales to navigate
- easy to remove when the buyer does not need it
- designed with the same formatting discipline as the main deck

If the appendix is chaotic, the whole response feels less reliable even when the core slides are strong.

## Before the response deck is exported, confirm

- required RFP questions map to specific slides or appendix sections
- fixed and variable content are clearly separated
- slide titles answer buyer questions directly
- the export destination matches the actual review process
- one owner resolved cross-functional feedback before final export
- the appendix supports the response instead of hiding unresolved clutter

## Where Pitchdeck helps most

[Pitchdeck](/pitchdeck/) is valuable here because RFP decks usually fail at the handoff between a strong Figma narrative and the messy reality of delivery formats, field edits, and deadline pressure.

Keeping the response system in Figma while exporting the final format the buyer needs gives teams a calmer model. They can maintain an approved answer bank, tailor only the deal-specific layer, and avoid rebuilding the response from stale PowerPoint fragments every time a new request arrives.

That is what makes the workflow scalable. The goal is not to make RFP decks flashy. It is to make them accurate, adaptable, and much less painful to produce.

---

---
type: article
title: Pricing Page QA Workflow from Figma
description: Compare pricing page builds against Figma before launch so plan hierarchy, comparison tables, and trust cues do not drift in production.
datePublished: 2026-06-17T00:00:00.000Z
dateModified: 2026-06-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-pricing-page-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-pricing-page-qa-workflow-from-figma.md
---

# Pricing Page QA Workflow from Figma

Pricing pages create a special kind of visual risk.

They do not usually break in dramatic ways. They drift in quiet, expensive ways.

The plan cards are technically there, but the hierarchy feels flatter than the design. The annual billing toggle wraps awkwardly. The comparison table becomes harder to scan at one breakpoint. A reassurance block slips lower and the whole page feels less trustworthy right where the user is making a buying decision.

That is why pricing-page QA should not be treated like a generic landing-page pass.

[Pixelay](/pixelay/) is a strong fit because pricing pages often live on staging URLs, CMS previews, experiment branches, and production variants where the real browser implementation matters much more than a static mock. Comparing the live page against the Figma source makes the hidden drift much easier to see before launch.

This article is deliberately different from adjacent Pixelay content like [Checkout Flow QA Workflow from Figma](/articles/pixelay-checkout-flow-qa-workflow-from-figma/), [Frontend QA Checklist for Landing Pages](/articles/pixelay-frontend-qa-checklist-for-landing-pages/), and [A/B Test Variant QA Workflow from Figma](/articles/pixelay-ab-test-variant-qa-workflow-from-figma/). Those cover checkout, broader landing-page checks, or experiment review. This one is specifically about pricing pages, where information hierarchy and trust cues are the conversion system.

## Start with a pricing-state map before opening the overlay

Pricing pages are rarely just one page state.

They often include:

- monthly versus yearly billing
- highlighted recommended plan
- comparison table sections
- FAQ or reassurance blocks
- localized or region-specific pricing
- experiment variants
- sticky CTAs or in-page navigation

That means the first useful QA artifact is a state map:

| State | URL or variant | Matching Figma frame | Main risk |
| --- | --- | --- | --- |
| desktop default | pricing page main | desktop pricing | plan hierarchy |
| desktop annual | annual toggle | annual pricing | savings clarity |
| mobile stacked | mobile pricing | mobile pricing | card scan order |
| table section | comparison block | comparison frame | readability |

This map keeps the review objective. The team is not asking whether the build "basically matches." It is checking whether specific pricing states still preserve the intended decision path.

## Prioritize the trust-critical areas first

A pricing page does not need perfect visual fidelity everywhere to perform well.

But some areas deserve immediate attention:

- plan-card hierarchy
- price and billing cadence wording
- discount or savings presentation
- comparison-table readability
- CTA prominence
- trust or reassurance sections near the decision point

Those are the areas where visual drift becomes commercial drift.

For example:

- a weaker recommended-plan treatment can flatten the choice architecture
- crowded annual-savings messaging can create doubt
- misaligned comparison rows can make features harder to evaluate
- a reassurance block pushed too low can reduce confidence before the click

Pixelay is useful because it reveals these issues as real visual differences, not just abstract design complaints.

## Review comparison tables as scanning systems

Comparison tables are where many pricing pages quietly degrade in implementation.

The desktop version might look fine in a screenshot, but the live build can still introduce problems:

- row spacing feels tighter than intended
- checkmarks or labels lose alignment
- long feature names wrap inconsistently
- the sticky header or first column behaves awkwardly

The team should review the table like a scan system:

- can the reader compare plans quickly?
- is the feature grouping still obvious?
- are visual dividers helping or cluttering?
- does the mobile or tablet behavior still support comparison?

If the page uses experiments or localized copy that change row length, pair this process with [A/B Test Variant QA Workflow from Figma](/articles/pixelay-ab-test-variant-qa-workflow-from-figma/) or [Localized Website QA Workflow from Figma](/articles/pixelay-localized-website-qa-workflow-from-figma/) when relevant.

## Pricing toggles and sticky elements need intentional breakpoint checks

Pricing pages often include behavior-heavy UI that looks stable until the wrong width:

- billing toggles
- sticky CTA bars
- anchored navigation
- expandable FAQs
- comparison-table controls

These elements deserve targeted breakpoint review because the visual problem is often not obvious on desktop.

Common issues:

- the billing toggle wraps or crowds the heading
- the sticky CTA overlaps nearby content
- FAQ spacing becomes uneven after expansion
- the recommended plan badge shifts awkwardly on smaller widths

This is where Pixelay-based comparison is especially helpful. The reviewer can capture the exact width and state where the design starts drifting instead of filing vague feedback like "mobile pricing feels off."

## Separate content drift from layout drift

Pricing pages change frequently:

- plan names evolve
- feature bullets are updated
- discounts come and go
- trust language gets rewritten

That means some QA findings are content changes that were intended, while others are implementation drift that was not.

Label the findings clearly:

`content change, visually acceptable`
- the wording changed, but the layout still supports the decision path

`layout drift, needs fix`
- spacing, hierarchy, or emphasis no longer match the Figma intent

`state mismatch`
- the compared design frame and live variant are not actually the same pricing state

That classification keeps design QA useful instead of turning it into a general pricing debate.

## Turn findings into fix-ready issues

Pricing-page discussions can get subjective fast because everyone has an opinion about what converts.

The best way to keep the QA pass actionable is to document:

- exact URL or experiment variant
- exact breakpoint
- exact compared Figma frame
- specific area of drift
- reason it matters to hierarchy, scanability, or trust

That turns the feedback from "the page feels less polished" into "the annual toggle wraps at 1024px and weakens the savings message compared with the approved design."

If the page still sits in a broader staging pass, [Compare Staging Sites to Figma Designs](/articles/pixelay-compare-staging-sites-to-figma-designs/) is a useful companion workflow.

## Before the pricing page ships, confirm

- the main pricing states were mapped before comparison began
- plan hierarchy and CTA emphasis still match the Figma source
- comparison tables were reviewed for scanability, not only presence
- billing toggles and sticky elements were checked at meaningful breakpoints
- findings separate content changes from layout drift
- QA tickets contain enough evidence for developers to fix the right issue quickly

## Where Pixelay helps most

[Pixelay](/pixelay/) is valuable here because pricing pages often look "close enough" until small browser-level differences start changing how the decision feels.

Overlaying the live implementation against the Figma source gives teams a sharper way to catch those differences before they become revenue-facing friction. The result is not merely tighter visual polish. It is a pricing page that preserves the intended hierarchy, clarity, and trust at the exact point where users decide whether to buy.

That is the real win. Pricing QA should protect the decision experience, not just the pixels. Pixelay makes that much easier to do while fixes are still cheap.

---

---
type: article
title: Sales One-Pager PDF Export Workflow from Figma
description: Export lighter, readable sales one-pagers from Figma so account teams can send polished PDFs without attachment bloat or blurry charts.
datePublished: 2026-06-17T00:00:00.000Z
dateModified: 2026-06-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-sales-one-pager-pdf-export-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-sales-one-pager-pdf-export-workflow-from-figma.md
---

# Sales One-Pager PDF Export Workflow from Figma

Sales one-pagers have a habit of becoming much heavier than the job requires.

An account executive needs something polished after a call. Product marketing wants current screenshots. Someone adds a comparison table, a quote block, and three proof logos. Then the PDF becomes too large to send comfortably, the charts go soft after compression, and the team starts exporting "final-v6-really-final" copies from Figma under deadline.

That is where [TinyImage](/tinyimage/) fits well. The plugin keeps PDF export and compression close to the design source so teams can make deliberate tradeoffs instead of turning the last ten minutes of sales enablement into a file-size emergency.

This article is intentionally different from nearby TinyImage content like [PDF Review Workflow for Client Approvals from Figma](/articles/tinyimage-pdf-review-workflow-for-client-approvals/) and [CMS Image Publishing Workflow from Figma](/articles/tinyimage-cms-image-publishing-workflow-from-figma/). Those focus on stakeholder review packages or web publishing. This one is about sales collateral that needs to stay compact, readable, and easy to circulate after calls or before meetings.

## A sales one-pager has a forwarding problem, not just a design problem

The one-pager is rarely opened in ideal conditions.

It may be:

- attached to an outbound follow-up email
- dropped into a CRM sequence
- forwarded internally by a buyer
- opened on a phone between meetings
- reviewed quickly by someone who never joined the original call

That changes what "good export quality" means.

The file does not need maximum theoretical fidelity. It needs to open fast, feel trustworthy, and make the offer legible without asking the reader to zoom around a dense layout. If the PDF is annoyingly large or the key proof areas look muddy, the collateral starts working against the sales conversation.

## Decide what the one-pager is proving before you export it

Most weak one-pagers try to serve too many jobs at once.

Before the export pass, clarify whether this asset is mainly for:

- first-call follow-up
- champion sharing inside the buyer's team
- procurement or budget justification
- product overview before a live demo
- partner or reseller enablement

That choice affects the layout and the export review.

For example, a first-call follow-up one-pager usually needs a sharper headline, one or two screenshots, and lightweight proof. A procurement-oriented one-pager may need denser comparison or security language, which makes text clarity and table readability much more important than decorative imagery.

If the team does not decide this first, the PDF tends to accumulate extra sections that bloat the file while making the story less clear.

## Treat charts, screenshots, and logos as separate compression risks

Sales one-pagers often mix several image types in one file:

- UI screenshots
- diagrams or charts
- customer logos
- product photography
- icons and simple brand shapes

Those assets do not all respond to compression the same way.

The most common mistake is reviewing only the overall file size and missing that the real damage happened in one proof-heavy block. A chart that loses label clarity, or a screenshot that softens key UI text, makes the document feel less credible even if the PDF shrinks nicely.

A stronger TinyImage workflow is:

1. export the near-final PDF from the approved Figma layout
2. create one lighter compressed version
3. compare both versions at realistic reading sizes
4. inspect the most detailed proof areas before approving the lighter file

The practical question is not "which file is smallest?" It is "what is the lightest version that still keeps the proof believable?"

If your team also sends broader design-review PDFs, [PDF Review Workflow for Client Approvals from Figma](/articles/tinyimage-pdf-review-workflow-for-client-approvals/) is the best companion process.

## Build the layout around scan zones

Sales collateral is usually scanned, not read top to bottom like an article.

That means the most important areas should survive a fast glance:

- headline and subhead
- the main product proof screenshot
- one evidence block such as results, benefits, or social proof
- the CTA or next-step area

When these zones are too visually dense, compression problems feel worse because the reader is already working harder.

A good test inside Figma before export is to zoom out and ask:

- can a buyer understand the category in two seconds?
- is the strongest screenshot still readable when reduced?
- does the proof section feel like proof or like a wall of labels?
- is the CTA visually discoverable without hunting?

This is partly a content problem and partly an export problem. TinyImage helps most when the underlying page already has clean scan zones worth protecting.

## Plan for attachment limits before the sales team asks for them

Many teams only think about file weight when someone says, "Can you send a smaller version?"

That is too late.

Sales one-pagers often get reused in:

- outbound email tools
- shared drive folders
- Slack threads
- partner portals
- CRM attachment fields

The asset should have a default export that travels comfortably across those contexts. That does not mean optimizing for the lowest possible number. It means avoiding the embarrassing moment where the account team has to choose between a bloated "high quality" file and a compressed version that makes the product look fuzzy.

If the document includes strong brand color areas, product screenshots, or gradient blocks, pair the PDF review with [Color Profile Checklist for Figma Exports](/articles/tinyimage-color-profile-checklist-for-figma-exports/) so the lighter file still feels on-brand.

## Keep one-pager versions tied to the audience, not to revision chaos

One-pagers multiply quickly because the core layout gets adapted for:

- a vertical market
- a partner audience
- a region
- a product line
- a specific enterprise account

If naming is sloppy, the team ends up re-exporting the wrong file or sending an outdated proof set.

Use simple, audience-first naming:

- `one-pager_saas-platform_overview.pdf`
- `one-pager_enterprise-security.pdf`
- `one-pager_partner-enablement.pdf`

If a lighter distribution version exists, label that deliberately instead of burying it in draft history.

The goal is to make the export system easy for non-designers to trust. Sales should not have to guess which PDF is current.

## Review the PDF in the same context where it will be used

This is the underrated part.

Before calling the export done:

- open it at normal reading size
- preview it from an email attachment if possible
- check the pages on a laptop and a smaller screen
- make sure the densest screenshot and smallest chart labels still hold up

A PDF that looks fine at 200 percent zoom inside a designer workflow can still feel awkward when opened quickly by a prospect or forwarded internally by a buyer.

If the one-pager is paired with a web landing page using the same screenshots, [Product Screenshot Export Workflow for SaaS Landing Pages](/articles/tinyimage-product-screenshot-export-workflow-for-saas-landing-pages/) is a useful companion read so the visual story stays consistent across both channels.

## Before the file goes to sales, confirm

- the one-pager has one clear job and audience
- the densest screenshot and proof areas were checked after compression
- the file feels lightweight enough for normal sharing workflows
- scan zones stay readable without zooming
- naming reflects audience and purpose, not draft history
- the approved file is the one sales will actually attach

## Where TinyImage helps most

[TinyImage](/tinyimage/) will not decide what belongs in the one-pager. That is still a messaging and enablement call.

What it does remove is the repetitive production friction between a strong Figma layout and a sales-friendly PDF. Teams can keep the export loop inside Figma, compare lighter versions quickly, and ship one-pagers that are easier to send without making the product look cheap.

That is the real win. Good sales collateral should travel easily. TinyImage makes it much easier to keep the file small without sacrificing the clarity that earns trust.

---

---
type: article
title: Evergreen Banner Refresh Workflow for Growth Teams
description: Refresh proven banner campaigns in Figma with new offers, dates, and creative hooks without rebuilding every HTML5 size from scratch.
datePublished: 2026-06-16T00:00:00.000Z
dateModified: 2026-06-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-evergreen-banner-refresh-workflow-for-growth-teams/
markdownUrl: https://www.hypermatic.com/articles/bannerify-evergreen-banner-refresh-workflow-for-growth-teams.md
---

# Evergreen Banner Refresh Workflow for Growth Teams

Most campaign teams do not start every banner set from zero.

They reuse the creative that already worked.

The real job is to refresh it: new offer, new date, new CTA, maybe a new product shot or seasonal visual hook, but the same basic size family and performance logic that already proved itself.

That sounds efficient until the refresh touches twenty sizes, three ad platforms, two fallback formats, and one rushed approval cycle that somehow turns "just update the sale" into a full production sprint.

[Bannerify](/bannerify/) is useful here because it turns those Figma updates back into production-ready HTML, GIF, MP4, and ad-platform outputs without forcing the team to rebuild each size by hand.

This topic is deliberately different from [Spreadsheet-Driven Banner Variant Workflow](/articles/bannerify-spreadsheet-driven-banner-variant-workflow/), [Multi-Offer Banner Test Matrix Workflow](/articles/bannerify-multi-offer-banner-test-matrix-workflow/), and [Banner Variant Review Workflow for Campaign Teams](/articles/bannerify-banner-variant-review-workflow-for-campaign-teams/). Those focus on variant generation, offer testing, or review structure. This one is about refreshing a proven evergreen campaign set when the team wants new creative energy without resetting the whole production system.

## Refresh work fails when the team edits the outputs instead of the system

The usual bad pattern looks like this:

- export last quarter's winning set
- open individual sizes
- change the date or price one by one
- patch layouts where the new line breaks differently
- forget one old CTA or landing URL
- discover late that the seasonal visual only works in half the sizes

That is not a refresh workflow. It is a manual rewrite of a system that already existed.

The cleaner approach is to go back to the master Figma structure, define what is changing, and treat the refresh as a controlled update to a banner family.

## Decide what stays evergreen and what changes this round

Before touching the design, sort the campaign into two buckets.

Stable:

- size set
- motion structure
- primary layout logic
- placement-specific constraints
- known file-format requirements

Refreshable:

- offer or discount
- dates and urgency language
- imagery or seasonal art treatment
- CTA language
- landing URL
- disclaimer details when relevant

That distinction keeps the team from accidentally redesigning the whole campaign while pretending it is a quick refresh.

It also surfaces whether the new concept really fits the old system. If the refreshed message needs totally different hierarchy, that is a redesign, not a refresh.

## Stress-test the smallest size first

The fastest way to know whether the refresh is real or fake is to test the least forgiving size.

If the new offer, date, or CTA breaks the smallest placement, the rest of the set is probably at risk too.

Check the hard cases first:

- longest promo line
- biggest percentage or currency treatment
- densest disclaimer
- most seasonal visual treatment
- smallest or most crowded size

This keeps the team from approving a desktop-friendly concept that quietly fails across the actual banner family.

If file-size pressure is part of the refresh, [HTML5 Banner File Size Reduction Checklist](/articles/bannerify-html5-banner-file-size-reduction-checklist/) is the right supporting article to pair with this step.

## Keep the refresh source organized around campaign intent

A simple production structure helps a lot:

- one master page for the approved evergreen family
- one clearly labeled refresh pass for the new offer cycle
- one note on what changed and what must not change

That makes reviews much easier because stakeholders can compare:

- original high-performing concept
- refreshed campaign direction
- exact places where the new round differs

It also makes future refreshes cheaper. The team is building a lineage, not improvising from exported remnants.

## Use preview and approval as part of the refresh, not only the end

Refresh work often gets underestimated because people think the banner "already exists."

In reality, fresh offers introduce fresh risk:

- the new CTA may overpromise
- the destination URL may have changed
- the refreshed visual hook may feel off-brand
- disclaimers may need re-checking
- animation pacing may feel wrong with the new copy rhythm

That is why preview matters.

Bannerify is especially helpful when the team needs to present the refreshed family as real outputs instead of static mockups. If the approval loop is part of the bottleneck, [Banner Preview Link Workflow for Approvals](/articles/bannerify-banner-preview-link-workflow-for-approvals/) is the best companion article.

## Do one refresh-focused QA pass before the final export

The QA pass for a refresh is different from the QA pass for a brand-new concept.

You are looking for drift between the old reliable system and the new campaign details.

Check:

- every size reflects the new offer and dates
- stale copy from the previous round is gone
- landing URLs match the refreshed campaign
- disclaimer updates are consistent
- animation still supports the revised message
- fallback outputs match the refreshed family

That last point matters. A refresh often updates the HTML5 banners correctly while the MP4, GIF, or preview fallback still carries old messaging because nobody checked the whole export set.

## A practical refresh checklist

Before shipping the refreshed campaign, confirm:

- the team updated the master banner system, not only individual outputs
- the smallest size survived the longest realistic copy
- stable campaign rules stayed stable across the refresh
- approvals reviewed the refreshed output, not assumptions based on the old winner
- stale URLs, offers, and disclaimers were fully removed
- the fallback and platform-specific exports match the new round

If your team also runs more aggressive experimentation across offers or messaging, [Multi-Offer Banner Test Matrix Workflow](/articles/bannerify-multi-offer-banner-test-matrix-workflow/) is the better adjacent piece. This article is for the common case where one proven banner family needs a fast but disciplined new campaign pass.

## Where Bannerify helps most

[Bannerify](/bannerify/) is valuable here because growth teams win by reusing what already performs, but they still need each new campaign round to feel intentional and production-ready.

That means the refresh workflow has to preserve the system while updating the message.

If your team keeps turning "just refresh the banners" into a manual rebuild exercise, move the process back into Figma, refresh the master family deliberately, and let Bannerify handle the real output generation. That is how a proven evergreen system stays fast instead of becoming technical debt in creative form.

---

---
type: article
title: Client Offboarding Source File Workflow for Agencies
description: Prepare final client design deliverables from Figma when the receiving team needs Sketch, XD, Photoshop, InDesign, or other editable source files.
datePublished: 2026-06-16T00:00:00.000Z
dateModified: 2026-06-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-client-offboarding-source-file-workflow-for-agencies/
markdownUrl: https://www.hypermatic.com/articles/convertify-client-offboarding-source-file-workflow-for-agencies.md
---

# Client Offboarding Source File Workflow for Agencies

Agency projects rarely end with "thanks, looks great."

They usually end with a handoff request.

The client wants the final source files. Their internal team still works in Sketch. Their regional partner needs Photoshop files. The print vendor asked for InDesign. Someone on procurement expects everything archived in the format the company already uses.

That is where a lot of otherwise clean Figma projects become awkward.

[Convertify](/convertify/) is a strong fit for this moment because it gives agencies a way to export or convert work out of Figma into the formats downstream teams actually requested, without manually rebuilding the project one deliverable at a time.

This article is different from adjacent Convertify pieces like [Client Design File Intake Checklist](/articles/convertify-client-design-file-intake-checklist/), [Agency Workflow for Mixed Design File Formats](/articles/convertify-agency-workflow-for-mixed-design-file-formats/), and [Figma Export Format Comparison for Agencies](/articles/convertify-figma-export-format-comparison-for-agencies/). Those focus on intake, ongoing mixed-format collaboration, or choosing formats during production. This one is specifically about the final offboarding phase, when the project is done and the client needs a usable source-file package.

## Offboarding gets messy when the format question is asked too late

The biggest mistake is waiting until project close to discover what the client actually expects.

That creates predictable pain:

- layers are named for the agency's internal process, not the client's
- linked assets are scattered
- the Figma source contains drafts or deprecated pages
- the client expects editable files in a non-Figma format
- nobody agreed which deliverables are final, editable, or archival

The real problem is not the conversion itself. It is the lack of handoff rules.

That is why a good offboarding workflow starts before the final export button gets pressed.

## Define the handoff package before cleanup begins

Ask the client or receiving team for a concrete list:

- which file formats are required
- whether they need editable or archive-only files
- whether they need presentation, print, motion, or marketing collateral included
- whether fonts, linked assets, and image libraries are part of the package
- who will verify the deliverables after receipt

This matters because one project can legitimately end in several outputs:

- Figma for the agency archive
- Sketch or XD for an internal design team
- Photoshop for retouching or raster workflows
- InDesign for print or editorial continuation
- Canva or PowerPoint for marketing adaptation

Convertify helps with the conversion layer, but the package definition is what prevents confusion.

## Clean the Figma source like someone else has to live in it

Before exporting anything, clean the source file with handoff empathy.

That usually means:

- removing duplicate exploration pages
- naming final pages and sections clearly
- surfacing the approved versions of key assets
- separating reusable components from one-off concepts
- flagging anything that is intentionally flattened or approximate

The client does not need a museum of every creative decision. They need a working source package.

This is the same principle behind [Figma File Migration Checklist](/articles/convertify-figma-file-migration-checklist/), but the offboarding context adds a new question: will the receiving team understand what they got without your internal project context?

## Match the export format to the next owner's real job

A final file is only "successful" if the next team can use it for the work they actually need to do.

Here is a practical way to think about it:

- use Sketch or XD when the receiving design team still maintains interface work there
- use Photoshop when the next owner needs raster editing or layered image treatment
- use InDesign when the continuation work is print-heavy or editorial
- use Canva or PowerPoint when the goal is marketing adaptation rather than design-system maintenance

The key question is not "what can we technically export?" It is "what will this team realistically update next month?"

That distinction is how agencies avoid handing over a file that is technically delivered but operationally useless.

## Create a format-specific QA pass instead of trusting the export blindly

Every converted handoff should get a short review before it leaves the project.

Check:

- page structure
- obvious text editability
- missing images or fonts
- layer grouping logic
- expected artboards or slide boundaries
- print or raster edge cases if the format is production-facing

If the package includes several converted formats, do not review them all with the same expectations.

A Photoshop handoff may need layered asset sanity checks.
A Sketch file may need symbol or component continuity review.
An InDesign-style continuation package may need closer page-layout inspection.

That is what keeps conversion from becoming a blind faith step.

If your team frequently inherits messy source files too, [How to Preserve Editability When Converting Legacy Design Files to Figma](/articles/convertify-how-to-preserve-editability-when-converting-legacy-design-files-to-figma/) is a useful reverse-direction companion article.

## Add a receiving-team note with the package

This is a small step, but it saves a lot of follow-up email.

Include a simple note that says:

- what is included
- which files are intended for editing
- which files are best treated as archival references
- any known limitations from the conversion
- who to contact if something critical is missing

That note turns the handoff from "here are some files" into an actual operational transition.

It is especially helpful when the receiving team was not part of the whole design process and only appears at the end of the project.

## Keep the archive separate from the client-facing package

Agencies often mix these two ideas together.

Internal archive package:

- preserves working context
- may include drafts, alternates, and notes
- exists to protect the agency's project history

Client-facing handoff package:

- contains approved deliverables only
- is labeled for external use
- is optimized for clarity, not total completeness

That separation prevents awkward moments where the client receives files that create confusion instead of continuity.

## A practical offboarding checklist

Before sending the final package, confirm:

- the required file formats were agreed in advance
- the Figma source was cleaned for external use
- the converted formats match the receiving team's next job
- each export got a format-appropriate QA pass
- the client-facing package excludes internal drafts and noise
- the receiving team note explains what is editable and what is archival

If the agency also needs to standardize initial file intake, pair this workflow with [Client Design File Intake Checklist](/articles/convertify-client-design-file-intake-checklist/). The two processes work best together: one defines how external files come in, the other defines how finished source files go out.

## Where Convertify fits best

[Convertify](/convertify/) does not remove the need for a clean project or a thoughtful handoff plan. What it does remove is the manual rebuild trap that often appears when a client needs deliverables outside the agency's native Figma workflow.

That is a big difference.

If your agency keeps closing projects with awkward last-minute file requests, build an offboarding workflow around Convertify instead of improvising the final package every time. The result is a cleaner exit, fewer follow-up corrections, and a handoff the receiving team can actually work with.

---

---
type: article
title: Help Center and UI Copy Alignment Workflow in Figma
description: Keep product screens, support screenshots, and help-center language aligned so updated UI terms do not drift away from the documentation users rely on.
datePublished: 2026-06-16T00:00:00.000Z
dateModified: 2026-06-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-help-center-and-ui-copy-alignment-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-help-center-and-ui-copy-alignment-workflow-in-figma.md
---

# Help Center and UI Copy Alignment Workflow in Figma

Users notice copy drift faster than most teams expect.

The product says "Workspace access."
The help center still says "Team permissions."
Support macros use the older term.
The screenshot in the setup guide shows a label that no longer exists.

None of those issues seems huge in isolation. Together, they make the product feel harder to trust.

[CopyDoc](/copydoc/) is a strong fit for this problem because it helps teams pull text out of Figma, review it systematically, and sync approved changes back into the design surfaces that support, docs, and product marketing all keep reusing.

This angle is intentionally different from [Stale Product Copy Audit Workflow in Figma](/articles/copydoc-stale-product-copy-audit-workflow-in-figma/), [Figma Terminology Audit Workflow](/articles/copydoc-figma-terminology-audit-workflow/), and [Product Marketing Screenshot Copy Workflow](/articles/copydoc-product-marketing-screenshot-copy-workflow/). Those cover release-driven stale strings, broader terminology cleanup, or marketing visuals. This article is specifically about keeping UI copy and help-center language aligned so support content does not drift away from the current product experience.

## Documentation drift usually starts with one legitimate product change

Most teams do not wake up and decide to confuse users.

Drift begins because something real changed:

- a feature got renamed
- navigation labels were simplified
- a settings flow moved
- onboarding copy was clarified
- the support team adopted friendlier language than the UI

Then the update lands unevenly.

The live product changes first. The Figma source changes later. The screenshot guide changes after that. The help article changes eventually. Internal support docs may never catch up.

That is why the fix cannot be just proofreading. It has to be a workflow.

## Start by mapping the surfaces that share the same language

Before reviewing any copy, decide which surfaces actually need alignment.

Typical groups include:

- UI screens in Figma
- onboarding or setup screenshots
- help-center article callouts
- support macros or saved replies
- product marketing screenshots used in docs-like contexts

Not every sentence needs to be identical across all of them. But the key terms should not fight each other.

For example, a help article might use more plain-language explanation than the UI, while still keeping the current control names intact. That is very different from the help article using old labels that send users looking for a button that no longer exists.

## Export the relevant UI text before reviewing the docs language

This is where CopyDoc becomes especially useful.

Figma is where the source screens live, but it is not the best place to compare terms across a whole support workflow by memory alone.

A practical loop looks like this:

1. export the UI strings or relevant frame text from Figma
2. group them by flow or feature area
3. compare them against the help-center terminology already in use
4. flag differences as intentional, outdated, or needs decision
5. sync the approved copy back into the screens and derivative assets

Once the text is outside the canvas, the drift becomes much easier to spot.

That is also the best moment to catch places where support language may actually be better than the product label. Sometimes the docs team has already found the term users understand more quickly. The alignment workflow should surface that signal instead of hiding it.

## Separate real problems from helpful adaptation

Good support documentation is not always word-for-word identical to the UI.

That means the review should classify differences carefully:

- `current and aligned`
- `outdated and misleading`
- `plain-language adaptation`
- `needs product decision`

That prevents two bad outcomes:

- letting outdated labels survive because "the docs wording is different on purpose"
- flattening helpful support explanation just to force artificial consistency

The goal is not robotic sameness. The goal is helping users connect the help article to the current product confidently.

## Screenshots deserve the same copy review as the text article

A lot of teams update the written help article but forget the screenshots embedded in it.

That creates one of the most confusing user experiences:

- the article body uses the new label
- the screenshot still shows the old one
- the user assumes the product has changed again or the guide is wrong

That is why screenshot review should sit inside the same workflow, not as a separate visual task.

If your support or docs team frequently exports instructional images from Figma, [Documentation Screenshot Workflow for Support Teams](/articles/tinyimage-documentation-screenshot-workflow-for-support-teams/) is a useful adjacent process from the TinyImage library.

## Prioritize the flows users are most likely to search in frustration

Not every docs page needs the same urgency.

Start with the areas where copy drift creates immediate confusion:

- onboarding and setup
- account access and permissions
- billing and plan management
- settings and configuration
- troubleshooting steps tied to renamed controls

Those are the pages where a user is often following instructions while also trying to complete a task quickly. A mismatched term costs more there than it does in a background explainer article.

This priority model is similar to the one in [Settings and Permissions Copy Review Workflow in Figma](/articles/copydoc-settings-and-permissions-copy-review-workflow-in-figma/), but the focus here is cross-surface alignment between product and support content, not only the UI itself.

## Give support a way to flag language that no longer matches the product

Support teams usually spot the drift first because they see the confused replies:

- "I do not see the button your article mentions."
- "The setting is named something else in my account."
- "Your screenshot does not match what I see."

That is valuable signal.

A good alignment workflow gives support one simple path to flag:

- the old term they saw
- the current product term
- the affected help article or screenshot
- whether the mismatch is cosmetic or blocking

Those flags can feed the next CopyDoc review cycle instead of disappearing into chat threads.

## A practical alignment checklist

Before publishing or re-publishing a help flow, confirm:

- the current UI terms were exported from the actual Figma source
- help-center wording uses the current control names where users need them
- screenshots match the same terminology as the article body
- any plain-language explanation is intentional, not accidental drift
- support feedback on confusing labels has been reviewed
- approved changes were pushed back into the Figma source and derivative assets

If your team also manages ongoing release-driven copy change, [Feature Flag Copy Rollout Workflow in Figma](/articles/copydoc-feature-flag-copy-rollout-workflow-in-figma/) is a strong companion process.

## Where CopyDoc fits best

[CopyDoc](/copydoc/) helps because this is mostly a visibility and coordination problem. Teams do not need more vague reminders to "keep docs updated." They need a clean way to pull the current UI language out of Figma, compare it against support-facing content, and update the real source files without manual hunting.

That is what turns help-center alignment into a repeatable habit.

If your support docs keep drifting away from the product faster than anyone notices, standardize an alignment pass around CopyDoc and treat UI terms, screenshots, and help content as one connected language system instead of three separate cleanup tasks.

---

---
type: article
title: Weekly Merchandising Email Workflow for Ecommerce Teams
description: Run recurring promo and product-feature email campaigns from Figma without rebuilding each send from scratch before it reaches the ESP.
datePublished: 2026-06-16T00:00:00.000Z
dateModified: 2026-06-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-weekly-merchandising-email-workflow-for-ecommerce-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-weekly-merchandising-email-workflow-for-ecommerce-teams.md
---

# Weekly Merchandising Email Workflow for Ecommerce Teams

Weekly ecommerce emails are not hard because the team lacks ideas.

They are hard because the work repeats.

Every send needs a headline update, product swaps, offer changes, mobile review, final proofing, stakeholder approval, and an export path that does not force the team to rebuild the campaign in another email builder at the last minute.

That is why merchandising email work deserves its own production system.

[Emailify](/emailify/) is a strong fit for this job because it keeps responsive email design, reusable components, previews, and platform-ready exports inside Figma. The real value is not just shipping one good campaign. It is making the fifth weekly send calmer than the first.

This topic is deliberately different from nearby Emailify content like [Product Launch Email Workflow in Figma](/articles/emailify-product-launch-email-workflow-in-figma/), [Lifecycle Email Workflow for Marketing Ops Teams](/articles/emailify-lifecycle-email-workflow-for-marketing-ops-teams/), and [Multi-Brand Email Template Workflow in Figma](/articles/emailify-multi-brand-email-template-workflow-in-figma/). Those cover launches, lifecycle programs, or brand governance. This one is about recurring merchandising sends where product assortment, offer timing, and repeated production speed are the real constraints.

## Merchandising emails break when each send starts from a blank campaign

The common pattern looks familiar:

- duplicate last week's email
- manually replace the hero
- swap product cards one by one
- change the offer in three different places
- realize the mobile crop no longer works
- rebuild a section because the new CTA text is longer
- export late because approval happens on screenshots, not the real email

That is not a design problem. It is a system problem.

The team is treating a recurring production workflow like a series of isolated creative tasks.

## Start with a module library built for repeat sends

The core of a strong merchandising workflow is a reusable set of sections that the team can trust.

Typical modules include:

- promotional hero
- product grid
- editorial feature block
- sale or urgency banner
- social proof or review strip
- footer or service reminder block

Each module should already account for the way merchandising emails actually change:

- headline length shifts
- product imagery changes weekly
- pricing badges appear and disappear
- some sends lead with one featured collection while others need several offers

If the system only works with one ideal content case, the team will keep breaking it during normal campaign work.

If you are still building the foundation, [Modular Email Template Workflow in Figma](/articles/emailify-modular-email-template-workflow-in-figma/) and [Figma Email Components](/articles/emailify-figma-email-components/) are the best companion reads.

## Define a send cadence that separates content decisions from layout work

Merchandising emails move faster when the team stops mixing every decision together.

A simple cadence works well:

1. merchandising selects the products, offers, and narrative
2. content confirms the headline, CTA, and legal copy
3. design updates the approved modules in Figma
4. email ops reviews responsiveness and export readiness
5. the final HTML moves to the ESP

That separation matters because the layout should not be rediscovered each week. The variable part is the assortment and message, not the entire production structure.

## Treat product imagery as part of the email system

Product-heavy sends often fall apart because the image workflow is handled separately and too late.

Before the campaign reaches final export, confirm:

- product imagery uses consistent crops
- sale badges or overlays are predictable across tiles
- comparison blocks still feel balanced when product mixes change
- mobile stacking does not bury the strongest products

This is especially important when one send mixes categories or brands. The design system has to absorb real assortment variety, not only the neat sample set from the template stage.

If the team frequently struggles with image weight or supporting campaign graphics, [TinyImage](/tinyimage/) can be a useful adjacent workflow for preparing the visual assets before they land in the final email design.

## Build one review pass for mobile before stakeholder approval

Many weekly merchandising emails look "approved" on desktop screenshots and then quietly degrade on mobile.

The usual trouble spots are:

- crowded product cards
- CTA buttons that wrap awkwardly
- stacked modules that bury the main offer
- hero imagery that loses the focal point
- long promotional copy that turns one tidy block into a scroll wall

That is why mobile should be reviewed before broad stakeholder approval, not after.

The goal is to approve a real campaign layout, not a desktop-only approximation of one.

The existing article [Mobile Email QA Workflow Before Export](/articles/emailify-mobile-email-qa-workflow-before-export/) is the best supporting process if this is already a recurring pain for your team.

## Use data-driven sections when they genuinely reduce rebuild work

Not every merchandising block needs to be fully manual.

Some teams benefit from dynamic or spreadsheet-like inputs for:

- product tables
- localized pricing
- region-specific featured collections
- personalized modules in lifecycle-adjacent sends

The important part is choosing this on purpose. Use dynamic structures where repetition and accuracy matter. Use manual creative treatment where storytelling or merchandising judgment matters more than automation.

If your workflow leans heavily on ecommerce platform data, the tutorial [How to add dynamic Klaviyo product feeds to custom HTML email designs in Figma using Emailify](/tutorials/how-to-add-dynamic-klaviyo-product-feeds-to-custom-html-email-designs-in-figma-using-emailify) is a useful tactical companion.

## Approve the real email, not just a static mockup

Stakeholder approval gets much easier when the team reviews something close to the final output.

That means the approval step should answer:

- does the offer hierarchy feel right?
- are the right products featured first?
- does the CTA language match the promotion?
- does the mobile version still support the merchandising goal?
- are the links, footer requirements, and platform constraints ready for export?

When teams only approve screenshots, they often miss the production realities that will matter once the campaign is live.

That is why [HTML Email Preview Link Approval Workflow for Stakeholder Signoff](/articles/emailify-html-email-preview-link-approval-workflow-for-stakeholder-signoff/) fits so well beside this workflow.

## A practical weekly merchandising checklist

Before exporting the campaign, confirm:

- the send uses trusted reusable modules instead of ad hoc layout patches
- the product assortment and offer hierarchy were decided before layout tweaks started
- imagery is consistent across hero and product modules
- the mobile version was reviewed intentionally
- approvals happened on a near-real output, not only screenshots
- the final export path to the ESP is already known

## Where Emailify helps most

[Emailify](/emailify/) is useful here because recurring merchandising sends are rarely blocked by creativity alone. They are blocked by the friction between design, content, responsiveness, and production handoff.

Keeping the campaign system in Figma while exporting production-ready HTML gives ecommerce teams a cleaner operating model. Instead of rebuilding every weekly send in a separate builder, they can reuse a working structure, review the real campaign earlier, and ship faster with fewer last-minute surprises.

If your ecommerce team is still treating weekly email production like a fresh start every time, build the workflow around Emailify and turn those sends into a repeatable system instead of a recurring scramble.

---

---
type: article
title: Security Review Deck Workflow for B2B SaaS Teams
description: Build repeatable security and procurement presentation decks in Figma so enterprise sales teams can answer risk questions without rebuilding slides in PowerPoint.
datePublished: 2026-06-16T00:00:00.000Z
dateModified: 2026-06-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-security-review-deck-workflow-for-b2b-saas-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-security-review-deck-workflow-for-b2b-saas-teams.md
---

# Security Review Deck Workflow for B2B SaaS Teams

Enterprise deals do not slow down only because the product is complex.

They slow down because somebody asks for the security deck, the architecture deck, the procurement deck, the customer data slide, the hosting slide, the incident slide, and the one "just send me the deck you used last quarter" file that no longer matches what the team currently says.

That is not really a presentation problem. It is a governance problem.

[Pitchdeck](/pitchdeck/) is a strong fit for this workflow because the master narrative can stay in Figma while the team still exports the format that each reviewer needs: PowerPoint for last-mile edits, PDF for locked review, Google Slides for comments, or hosted web links when controlled sharing and analytics matter.

This article is not another generic sales-deck guide. The closest nearby pieces are [Executive Briefing Deck Workflow for Enterprise Sales Teams](/articles/pitchdeck-executive-briefing-deck-workflow-for-enterprise-sales-teams/), [Presentation Localization Workflow for Global Sales Teams](/articles/pitchdeck-presentation-localization-workflow-for-global-sales-teams/), and [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/). This one is specifically about security, compliance, and procurement conversations where accuracy, version control, and review flexibility matter more than animation polish.

## Treat the security deck as an operational asset

The mistake most teams make is treating every security review deck as an ad hoc sales artifact.

That usually leads to:

- outdated claims about hosting or data handling
- screenshots that no longer match the product
- slides copied from old customer requests without context
- one version in Figma and another one drifting in PowerPoint
- no clear rule for what can be edited in the field

The better model is to treat the deck like a reusable operational asset.

That means the file needs:

- a stable master narrative
- clear ownership
- approved slides for high-frequency questions
- a process for customer-specific additions
- a chosen export path for different reviewers

## Separate the permanent story from customer-specific proof

Security review decks are rarely one-size-fits-all, but they should not be fully custom either.

I like to separate the deck into two layers.

Core layer:

- company and product summary
- deployment model
- security program overview
- access controls
- monitoring and incident processes
- standard procurement FAQ slides

Customer-specific layer:

- integration diagrams
- data-flow details for the customer use case
- region or hosting nuance
- procurement-specific wording
- required legal or vendor management attachments

That structure is what keeps the deck reusable without making it vague.

If a slide belongs in every enterprise conversation, it probably belongs in the core layer. If it changes based on customer architecture or buyer objections, label it clearly as customer-specific from the start.

## Design the deck for scrutiny, not only for storytelling

A product launch deck can get away with strong visuals and lighter detail density.

A security review deck cannot.

Reviewers need to inspect the details, not merely feel good about the brand.

That changes the design priorities:

- slide titles should say exactly what the slide answers
- diagrams should use consistent labels
- tables must survive export and zooming
- footnotes or assumptions should be readable
- screenshots should support the point, not decorate it

Pitchdeck helps because the source stays in Figma, which is often the cleanest place to maintain diagram consistency and deck structure. But the deck should still be designed with the eventual review format in mind.

If a slide will be read as a PDF in procurement, it needs to survive that format. If an account team will personalize it in PowerPoint, it needs a layout that can absorb small edits without collapsing.

## Decide the export destination before the final review

Security and procurement stakeholders often want different things from the same narrative.

Use this decision rule early:

- use PDF when the deck must stay locked after approval
- use PowerPoint when field teams will tailor customer-specific details
- use Google Slides when comment-driven review matters more than presentation polish
- use hosted web presentation when controlled sharing and engagement visibility are useful

That last path is especially interesting when several reviewers will open the same deck asynchronously. Pitchdeck's share-link and analytics model can show whether the key stakeholders actually viewed the material, which is helpful when a deal team is trying to understand where the process is stuck.

If your team still debates file format late in the workflow, read [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/) alongside this article.

## Build a slide bank for repeat questions

Most security reviews ask variations of the same questions.

That means the team should not rebuild these slides from memory every quarter:

- authentication and access model
- customer data boundaries
- logging and monitoring
- environment or hosting overview
- incident response process
- third-party dependency explanation
- procurement and legal handoff notes

The slide bank does not need to be huge. It just needs to be trustworthy.

What matters is that each slide has:

- a clear owner
- an approved wording baseline
- a known update trigger
- a matching export-friendly layout

That is how the deck becomes repeatable instead of tribal knowledge.

## Customer-specific edits should be visibly intentional

Security decks become risky when last-minute edits are made invisibly.

I prefer a lightweight annotation or naming system inside the master file:

- `core-approved`
- `customer-adaptable`
- `needs-security-review`
- `remove-before-export`

That helps sales, solutions, product, and security reviewers understand what is safe to personalize and what must remain tightly controlled.

It also reduces the classic problem where a field seller edits a core claim because it seems harmless, then the revised phrasing survives into the next deal cycle.

## Review the deck with the people who own the claims

This is not only a design or enablement review.

Before final export, the deck usually needs a pass from:

1. security or engineering owner for technical accuracy
2. legal or procurement-facing owner for wording sensitivity
3. sales enablement or GTM owner for usability in the field
4. design owner for visual clarity and export readiness

That sounds heavy, but it is still lighter than fixing contradictory slides after a customer notices them.

The real goal is simple: every slide should answer a question the team is willing to stand behind.

## A practical checklist for security review deck prep

Before shipping a security deck, confirm:

- the core narrative is separated from customer-specific proof
- every high-frequency question has an approved slide or section
- diagrams, tables, and footnotes are readable in the intended export format
- the team decided early whether the deck is headed to PDF, PowerPoint, Google Slides, or a hosted web link
- all customer-specific edits are deliberate and visible to the reviewers
- technical and commercial owners both approved the final claims

If your team is also trying to control field-level deck sprawl more broadly, [Pitch Deck Version Control for Startups](/articles/pitchdeck-pitch-deck-version-control-for-startups/) offers a useful adjacent model even though the audience there is broader than enterprise procurement.

## Where Pitchdeck helps most

[Pitchdeck](/pitchdeck/) is valuable here because security review decks live in the uncomfortable middle between design, policy, sales enablement, and export logistics.

You need one trustworthy source, but several possible delivery formats. You need consistency, but also some room for deal-specific detail. You need slides that can be inspected closely, not just presented beautifully.

That is exactly why keeping the master deck in Figma while still exporting to stakeholder-friendly formats is so useful. If your enterprise team keeps answering the same security questions with slightly different decks, standardize the workflow around Pitchdeck and turn the next review cycle into maintenance instead of reinvention.

---

---
type: article
title: Signup Flow QA Workflow from Figma
description: Compare registration and account-creation flows against Figma before launch so conversion-critical layout drift gets caught before users hit the form.
datePublished: 2026-06-16T00:00:00.000Z
dateModified: 2026-06-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-signup-flow-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-signup-flow-qa-workflow-from-figma.md
---

# Signup Flow QA Workflow from Figma

Signup flows create a strange kind of risk.

They are often simpler than a logged-in product experience, but much more sensitive than a generic marketing page. A small mismatch in spacing, hierarchy, reassurance, progress cues, or error treatment can quietly reduce confidence right where a visitor is deciding whether to continue.

That is why signup QA deserves its own workflow.

[Pixelay](/pixelay/) is a strong fit for this job because registration flows usually live on real browser routes, preview deployments, staging environments, or localhost builds where the implemented experience matters more than a design screenshot in isolation.

The existing library already covers adjacent areas like [Checkout Flow QA Workflow from Figma](/articles/pixelay-checkout-flow-qa-workflow-from-figma/), [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/), and [Responsive Website QA from Figma](/articles/pixelay-responsive-website-qa-from-figma/). This article is specifically about signup, where the core question is whether the acquisition flow still feels clear and trustworthy in the real build.

## Map the signup states before you compare anything

The most common QA mistake is reviewing one "happy path" screen and assuming the signup flow is covered.

Even simple registration experiences usually include several states:

- default empty form
- partially completed state
- validation error state
- password or SSO choice state
- mobile layout
- success or confirmation step
- any plan or offer context attached to signup

That means the comparison should be state-aware, not just page-aware.

A lightweight map is enough:

| State | Route or environment | Matching Figma frame | Main risk |
| --- | --- | --- | --- |
| desktop default | staging signup | signup desktop | hierarchy and reassurance |
| desktop errors | staging signup with invalid inputs | signup error state | validation clarity |
| mobile default | mobile staging signup | signup mobile | spacing and field rhythm |
| confirmation | post-submit state | confirmation frame | trust and next step clarity |

Once that exists, Pixelay becomes much more objective. The reviewer is comparing a known implementation state against the right design state instead of eyeballing "close enough."

## Prioritize the conversion-critical areas first

Signup flows rarely fail because one corner radius changed.

They fail because the real implementation weakens the moments that help a visitor continue.

Focus first on:

- page hierarchy around the headline, subhead, and form
- field spacing and scan rhythm
- CTA prominence
- trust and reassurance content
- error message placement
- social or SSO option grouping when present
- mobile spacing near the first visible action

These are the parts that affect clarity and confidence immediately.

Overlay-based review is useful here because it shows whether the live build preserved the intended hierarchy or subtly flattened it. A CTA that drops too low, a reassurance block that competes with the form, or error text that breaks the rhythm can all change the feel of the page before product analytics ever explain why.

## Stabilize the environment before opening the overlay

Signup flows can be noisier than they look.

Depending on the project, the live route may include:

- experiment banners
- tracking or consent UI
- autofill behavior
- password manager prompts
- third-party auth buttons that render slightly differently
- offer or pricing context based on campaign source

If the environment is unstable, the visual differences become harder to interpret.

A short setup pass helps:

- use a known viewport and zoom level
- confirm which experiment or campaign version is active
- disable noise that is not part of the design review when possible
- make sure the Figma frame matches the actual signup variant being tested
- review desktop and mobile separately instead of assuming one predicts the other

If the flow changes heavily by experiment, [A/B Test Variant QA Workflow from Figma](/articles/pixelay-ab-test-variant-qa-workflow-from-figma/) is the best adjacent process.

## Treat validation and error states as first-class design surfaces

This is where many signup flows quietly drift.

The default state looks close to the Figma frame, but the error state introduces:

- stacked helper text
- misaligned inputs
- crowded spacing around the CTA
- broken rhythm between form fields
- odd jumps on mobile once the keyboard and inline messages appear

Those issues matter because users encounter them precisely when confidence is already fragile.

For Pixelay-based review, that means you should intentionally compare:

- at least one invalid field state
- the densest realistic error combination
- mobile behavior where vertical space is tighter

That evidence is much more useful than a vague note that "validation feels messy."

## Review signup as a path, not only a page

Many signup experiences are short journeys, not one screen.

Even when the UI is simple, users may move through:

- marketing page to signup
- signup to email confirmation
- signup to plan selection
- signup to first-run onboarding

The design review should check whether the visual handoff between those steps still feels coherent.

Does the confirmation state feel like the same product?
Does the post-submit step preserve the intended hierarchy?
Does the next action stay obvious after account creation?

That is why comparing only the first form state is not enough.

## Turn findings into evidence the team can fix quickly

Signup QA moves faster when every issue includes:

- the exact route or environment
- the viewport or breakpoint
- the matching Figma frame
- a description of the visual mismatch
- why it matters to clarity or trust

For example:

"At 390px wide, the inline password requirement block pushes the primary CTA below the first comfortable viewport, which weakens the intended action hierarchy in the mobile signup design."

That is much more actionable than:

"Mobile signup spacing looks off."

If your team also needs a clean reporting structure after the review, [Visual Bug Report Workflow for Frontend Teams](/articles/pixelay-visual-bug-report-workflow-for-frontend-teams/) is the right companion piece.

## A practical signup QA checklist

Before launch, confirm:

- the main signup states were mapped to specific Figma frames
- the team reviewed desktop and mobile separately
- validation and error states were compared intentionally
- CTA, reassurance, and field hierarchy still match the design intent
- experiment or campaign-specific variants were reviewed in the right environment
- every flagged issue includes route, state, width, and evidence

## Where Pixelay helps most

[Pixelay](/pixelay/) is valuable here because signup flows sit at the point where visual drift and conversion risk meet. The code may function correctly, but if the real page feels more confusing, more crowded, or less trustworthy than the approved design, the business impact shows up fast.

Using Pixelay to compare the real implementation against Figma gives teams a clearer, more objective way to catch those issues while the flow is still on staging or preview and the fixes are still cheap.

If your product keeps shipping signup experiences that are technically done but visually weaker than the design intended, standardize a signup QA pass with Pixelay and treat the flow like a conversion surface, not just another form page.

---

---
type: article
title: Email Image Optimization Workflow for CRM Teams
description: Prepare lighter Figma image exports for email campaigns so hero graphics, promo blocks, and fallback assets stay sharp without inflating the send.
datePublished: 2026-06-16T00:00:00.000Z
dateModified: 2026-06-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-email-image-optimization-workflow-for-crm-teams/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-email-image-optimization-workflow-for-crm-teams.md
---

# Email Image Optimization Workflow for CRM Teams

Email campaigns often get treated like a copy and HTML problem.

Then launch day comes around and the message is full of heavy hero graphics, blurry sale badges, oversized fallback images, and product collages that looked fine in Figma but feel clumsy once they hit the inbox.

That is why CRM teams need an image workflow, not just an email template.

[TinyImage](/tinyimage/) is useful here because it keeps compression, format decisions, batch exports, and file-size review inside Figma. The gain is not only smaller assets. It is making sure the visual layer of the campaign is ready before the handoff reaches the ESP or the final HTML build.

This article is different from nearby TinyImage pieces like [Website Asset Compression Budget for Design Teams](/articles/tinyimage-website-asset-compression-budget-for-design-teams/), [Responsive Image Handoff from Figma](/articles/tinyimage-responsive-image-handoff-from-figma/), and [Documentation Screenshot Workflow for Support Teams](/articles/tinyimage-documentation-screenshot-workflow-for-support-teams/). Those focus on site assets, responsive web delivery, or docs screenshots. This one is about campaign images that have to survive email client constraints and repeated send cycles.

## Email images fail for different reasons than website images

Website image workflows usually optimize for page speed, responsive loading, and CMS reuse.

Email images have a different pressure profile:

- they often sit inside fixed-width layouts
- they may be repeated across several campaign variants
- they need to look acceptable in constrained inbox environments
- they are frequently reviewed by non-technical stakeholders as screenshots before send
- they are often rebuilt too late if the file sizes are wrong

That means the image review should happen before the HTML export or upload, not after.

If the team waits until the final email test to realize the hero image is too heavy or the fallback PNG is fuzzy, the campaign is already in the expensive part of the workflow.

## Decide which images are doing real work in the message

Not every email image deserves the same handling.

I like to sort campaign visuals into four roles:

- `hero`: the primary branded visual or announcement block
- `product`: screenshots, product shots, or offer tiles that need detail
- `supporting`: divider artwork, icons, badges, or simple texture
- `fallback`: images used when a richer email module or live content source is unavailable

That classification helps the team make better export decisions.

A hero image may deserve more visual quality even if the file is slightly heavier. A supporting badge usually does not. A product collage may need careful sharpness checks if text is embedded in the image. A fallback image should be judged against the narrowest client or layout it will realistically appear in.

## Start the campaign with an image budget, not a guessing game

The simplest way to stop bloated email imagery is to define an asset budget at the same time you approve the design.

You do not need a complicated spreadsheet. You just need a few rules everyone can remember:

- hero image target range
- product tile target range
- thumbnail or badge target range
- which assets must preserve fine text detail
- which assets can accept more aggressive compression

This keeps the team from arguing about quality in the abstract.

Instead of "can we compress this more?", the better question becomes "is this asset still doing its job at the target weight?"

If your broader campaign system also lives in Figma, [Emailify](/emailify/) is the natural companion product because it keeps the design and export workflow together. But even when another build path handles the HTML, TinyImage can still clean up the image layer before handoff.

## Choose the export format by asset type

Email teams often default to PNG for everything because it feels safe.

That safety comes with a cost.

For many campaigns, a better rule is:

- use JPG for photographic or textured hero visuals where small savings matter
- use PNG when edge sharpness or embedded text has to stay crisp
- use WebP only when the downstream email workflow definitely supports the way the image will be delivered
- avoid treating one format as the answer for every module

TinyImage helps because you can compare those options without leaving the Figma workflow.

The goal is not theoretical compression purity. The goal is a campaign asset pack that stays visually credible in the inbox without becoming an avoidable weight problem.

If your team is still standardizing format choices more broadly, [SVG vs PNG vs WebP for Figma Exports](/articles/tinyimage-svg-vs-png-vs-webp-for-figma-exports/) is the best adjacent read.

## Review the images at the widths the campaign will actually use

This is where a lot of CRM teams get misled.

The artboard looks generous in Figma, so the export seems fine. But once the asset is rendered in the actual email width, the text gets softer, the product crop feels cramped, or the supporting image no longer reads clearly on mobile.

Before you lock the export set, check:

- the main desktop email width
- the narrowest mobile presentation that matters
- any repeated product grid or card treatment
- the fallback version if a richer live module is unavailable

That last point matters more than people expect. Teams often optimize the best-looking version of the campaign but forget the backup imagery that actually ships more often.

## Build one boring export pass for every send

A repeatable image workflow should feel unglamorous.

That is a good sign.

Here is a practical pass:

1. isolate the final email image frames in Figma
2. name them by campaign, module, and variant
3. export a first pass at quality-first settings
4. compare the assets at real email widths
5. compress until each asset still looks trustworthy in context
6. package the approved set for the HTML or ESP handoff

Useful filenames:

- `summer-sale-hero-desktop.jpg`
- `summer-sale-hero-mobile.jpg`
- `summer-sale-product-grid-tile-01.png`
- `summer-sale-fallback-offer-badge.png`

TinyImage removes a lot of the wasted time between steps three and five because the team does not have to export from Figma, upload to a separate compressor, compare versions, and repeat that loop manually.

## QA the campaign images like a CRM operator, not only like a designer

The final review should focus on what matters in a send:

- Does the hero still look sharp in the inbox width?
- Are product details readable enough to support the offer?
- Did any text baked into the image become softer than expected?
- Are repeated tiles visually consistent across variants?
- Did the team accidentally keep decorative whitespace that adds weight without helping the message?

This is also the moment to be honest about what should stay as live HTML text instead of imagery. TinyImage can optimize exports, but it should not be used to hide copy that would be more maintainable as real email text.

If the team also handles the full Figma-to-email production path, [Figma Email QA Before ESP Upload](/articles/emailify-figma-email-qa-before-esp-upload/) is a strong follow-up read from the Emailify library.

## A practical checklist before the asset handoff

Before the campaign moves to final build or send prep, confirm:

- every email image has a defined role
- the biggest assets meet the agreed weight targets
- the chosen format matches the asset type
- the exports were checked at real email widths
- embedded text still reads comfortably
- fallback visuals were reviewed, not only the primary layout
- filenames are clear enough for the handoff owner

## Where TinyImage helps most

[TinyImage](/tinyimage/) does not tell a CRM team which offer deserves the hero slot or whether a product tile should be redesigned. That still takes campaign judgment.

What it does remove is the repetitive export-and-compress scramble that happens right before a send.

If your team keeps shipping email campaigns with heavy images, inconsistent sharpness, or last-minute asset cleanup, build a proper email image pass around TinyImage instead of treating every campaign as a one-off export problem. The result is faster production, more reliable handoff, and cleaner inbox visuals without extra tooling.

---

---
type: article
title: Multi-Offer Banner Test Matrix Workflow
description: Plan banner ad experiments in Figma with a clear offer matrix so control and treatment variants stay reviewable across sizes before export.
datePublished: 2026-06-15T00:00:00.000Z
dateModified: 2026-06-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-multi-offer-banner-test-matrix-workflow/
markdownUrl: https://www.hypermatic.com/articles/bannerify-multi-offer-banner-test-matrix-workflow.md
---

# Multi-Offer Banner Test Matrix Workflow

Banner tests get expensive when the team confuses "more variants" with "better experimentation."

A growth lead wants to test three offers. The media team needs four sizes. Marketing wants one urgency version and one proof-led version. Legal needs slightly different wording in one market. Suddenly the creative system has exploded into dozens of files, and nobody is sure which combinations are real test cells versus leftover production branches.

That is why banner experimentation needs a matrix before it needs export.

[Bannerify](/bannerify/) is a strong fit for this workflow because it keeps design, animation, preview, and output inside Figma instead of forcing the team to turn every test idea into a separate manual production project.

The current library already covers adjacent Bannerify workflows like [Figma Banner Ad Variant Production Workflow](/articles/bannerify-figma-banner-ad-variant-production-workflow/), [Display Ad QA Checklist Before Launch](/articles/bannerify-display-ad-qa-checklist-before-launch/), and [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/). This article is narrower. It is about setting up a multi-offer test matrix before the banner family becomes a chaotic pile of near-duplicate ads.

## The matrix should define what is actually being tested

Teams often say they are "testing multiple banners" when they are really changing too many variables at once.

Before the first banner is animated, the team should know:

- which offer is being tested
- what stays constant across the test
- which CTA language is part of the experiment
- whether size adaptations are allowed to change the narrative
- which placements need HTML5 versus GIF or MP4 exports

That is the matrix.

A practical matrix usually has columns like:

- offer family
- audience or funnel stage
- size group
- format
- landing page or destination
- notes about required proof, pricing, or disclaimer treatment

Once that structure exists, the team can tell the difference between a real experiment and an accidental creative fork.

## Build control and treatment as reusable message systems

The fastest way to lose experimental clarity is to let every banner size reinvent the story.

Instead, define the control and treatment at the message-sequence level first.

For example:

`control`
- product shown first
- benefit line second
- CTA third

`treatment`
- pain or urgency first
- offer second
- CTA third

Now the question becomes whether each size can preserve that sequence cleanly.

That is much more useful than designing ten unrelated banners and calling them a test. Bannerify is helpful here because the team can work inside one Figma system while still preparing exportable banner outputs later.

## Do not force every size to carry every idea

One reason banner experiments become noisy is that small placements are asked to do the job of full-size creative.

The 160x600 or 300x250 placement may not be able to carry:

- long proof language
- a full pricing message
- multiple benefit lines
- a strong CTA and a legal note all at once

That does not mean the test is impossible. It means the matrix needs adaptation rules.

Decide early:

- which message elements are mandatory in every size
- which supporting elements can drop away on smaller placements
- which sizes require a shorter treatment rather than a cramped clone

If that decision is postponed until export day, the test stops being a test. Each banner becomes its own improvisation.

## Review the highest-risk cells before expanding the family

The matrix should not be built evenly.

Start with the cells most likely to break:

- the smallest sizes
- the longest offers
- the versions carrying disclaimers
- the formats that need the most motion or pacing discipline

If the experiment works there, the rest of the family usually follows with less drama.

This is also where [Bannerify](/bannerify/) earns its keep operationally. Because design, animation, and output sit close together, the team can validate the test structure earlier instead of discovering during trafficking that one treatment simply does not survive the smaller placements.

If your campaign is already nearing final export, [Display Ad QA Checklist Before Launch](/articles/bannerify-display-ad-qa-checklist-before-launch/) is the best companion article for the downstream review pass. This matrix article is earlier in the process. It is about defining the experiment well enough that the finished banner family is still learnable.

## Use naming that preserves the experiment logic

Creative experiments get harder to learn from when the files stop reflecting the actual test.

Good naming should tell the team:

- the offer cell
- the size
- the audience or placement
- the format

For example:

- `offer-a_300x250_html`
- `offer-b_300x250_html`
- `offer-a_160x600_gif`
- `offer-b_160x600_gif`

That sounds basic, but it prevents several common problems:

- exporting the wrong version
- mixing control and treatment in approval threads
- losing track of which cells were intentionally excluded
- confusing "localized version" with "new experiment variant"

If the matrix is spreadsheet-driven, the naming logic should be agreed before any batch export starts.

## Keep the review focused on experimental integrity

Once the banners exist, the review should not devolve into generic art direction feedback.

The key questions are:

- does the control still feel like the control across all sizes?
- does the treatment express one distinct idea rather than several?
- are smaller placements still testing the same message in condensed form?
- are disclaimers, offers, and CTAs aligned with the intended landing experience?

That review discipline is what keeps the test learnable.

Without it, a "multi-offer test" becomes a bundle of creative differences too messy to interpret. The campaign may still run, but the team learns less because the variables were not controlled well enough.

## A practical launch sequence

For most growth and campaign teams, this is enough:

1. Define the offers and what is truly being tested.
2. Create the control and treatment message systems first.
3. Apply adaptation rules for smaller placements.
4. Build the highest-risk matrix cells before the full family.
5. Export only the approved cells, not every imaginable combination.

If trafficking risk is high afterward, [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/) is the natural next read. The test matrix should make trafficking simpler, not dump unresolved creative ambiguity into ad ops.

## Before the experiment goes live

Check that:

- the matrix defines one real experiment rather than several overlapping ones
- control and treatment differ intentionally, not accidentally
- smaller placements follow explicit adaptation rules
- naming makes the test cells obvious
- excluded cells are documented so nobody assumes they were forgotten
- approval happened on the test family, not only on isolated banners

## Where Bannerify fits best

[Bannerify](/bannerify/) does not replace experiment strategy. What it does do is make the creative side of that strategy much easier to operationalize inside Figma.

That matters because banner experiments often fail long before launch, at the moment the team loses track of what the test actually is.

If your campaign variants keep multiplying faster than the team can reason about them, define the matrix first and let Bannerify support that system. The real benefit is not just faster export. It is keeping the experiment coherent enough to learn from.

---

---
type: article
title: Rebrand Design Archive Migration Workflow
description: Move legacy brand assets into Figma before a rebrand so teams can update real source files instead of rebuilding old collateral from scratch.
datePublished: 2026-06-15T00:00:00.000Z
dateModified: 2026-06-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-rebrand-design-archive-migration-workflow/
markdownUrl: https://www.hypermatic.com/articles/convertify-rebrand-design-archive-migration-workflow.md
---

# Rebrand Design Archive Migration Workflow

Rebrands rarely start with clean files.

They start with a messy archive:

- old Illustrator logos
- half-editable PDFs
- InDesign one-pagers
- Photoshop campaign assets
- PowerPoint decks that marketing still uses
- partner collateral living in whatever format happened to get approved two years ago

The design team wants to move fast, but the archive keeps pulling everyone backward. People waste days asking which file is current, which asset can still be edited, and whether a "quick update" actually means rebuilding the entire thing from scratch.

[Convertify](/convertify/) is useful here because it gives rebrand teams a practical way to bring legacy design assets into Figma without treating every historical file as a manual reconstruction project.

The existing Convertify library already covers adjacent workflows like [Design Tool Migration Plan for Figma](/articles/convertify-design-tool-migration-plan-for-figma/), [Agency Workflow for Mixed Design File Formats](/articles/convertify-agency-workflow-for-mixed-design-file-formats/), and [Brand Guidelines PDF to Figma Workflow](/articles/convertify-brand-guidelines-pdf-to-figma-workflow/). This article is narrower. It is about archive migration during a rebrand, where the real challenge is deciding which old materials should become editable Figma sources before the new identity starts spreading everywhere.

## Do not migrate the whole archive blindly

The archive usually feels bigger than it really is.

That is because it contains three very different categories of files:

`must become editable`
- core sales collateral
- active product marketing assets
- current brand guidelines
- deck templates the team reuses constantly

`use as reference only`
- old campaign examples
- retired concepts
- visual inspiration the team may want to preserve

`safe to retire`
- outdated logo explorations
- assets tied to discontinued products
- duplicate exports with no operational value

If you try to convert everything, the rebrand turns into an archaeology project. If you convert nothing, the team keeps rebuilding approved assets by hand under deadline pressure.

The right move is to decide which files actually need to live again as working assets.

## Start with the materials that multiply work downstream

In rebrand projects, some files matter far more than others.

Ask which assets create repeated downstream requests when they stay trapped in legacy formats.

Usually that means:

- presentation decks reused by sales or leadership
- one-pagers or PDFs that keep getting updated
- partner materials with regional variants
- templates used by marketing ops or customer teams
- brand documentation referenced across teams

Those files deserve first attention because every week they stay non-editable creates more manual cleanup later.

This is why [Convertify](/convertify/) is so useful in a rebrand workflow. The goal is not only file conversion. The goal is to stop the new brand system from being built on top of stale or brittle source material.

## Map the archive by editability risk, not just by file type

File type matters, but editability matters more.

Before converting, label each asset by the kind of change the rebrand will require:

- logo replacement
- typography update
- color-system replacement
- layout update
- screenshot swap
- messaging rewrite

That tells you how much value you get from a converted source file.

For example:

- a PDF that only needs logo swapping may be lower priority
- an InDesign brochure that needs new typography, proof, and screenshots is high priority
- an old PowerPoint deck used weekly by the sales team is urgent even if the visuals seem "good enough"

This framing also prevents the team from over-investing in low-value conversions just because the file type looks dramatic.

## Convert the archive into working batches

A rebrand archive should move in batches, not in random one-off rescues.

Good batch groupings are usually based on use:

- sales enablement batch
- product marketing batch
- brand-system documentation batch
- partner collateral batch
- customer success deck batch

Each batch should answer one question: if we convert these files now, which team becomes unblocked fastest?

That keeps the migration tied to operational value instead of aesthetics.

If you need a broader pre-conversion intake discipline, [Client Design File Intake Checklist](/articles/convertify-client-design-file-intake-checklist/) is still useful even for internal archives. Rebrand teams often inherit their own historical mess the same way an agency inherits a client's.

## Cleanup after conversion should focus on brand leverage first

Converted files are rarely ready to reuse immediately.

But the cleanup pass during a rebrand should not try to perfect everything at once. Focus on the elements that determine brand consistency:

- replace outdated logos everywhere
- normalize the new type scale
- remove legacy color values that will keep sneaking back in
- flag image and screenshot placeholders that still reflect the old product story
- fix reusable master layouts before polishing one-off slides

This is where rebrand teams either gain momentum or lose it.

If the converted files are cleaned around the new system, the archive becomes leverage. If the cleanup stays partial and ambiguous, the archive becomes a new source of brand drift.

## Use the migration to decide what the brand system actually owns

Rebrands expose a governance problem as much as a design problem.

Once legacy files land in Figma, you can finally answer questions like:

- which decks are canonical?
- which one-pagers are still approved?
- where should partners pull their latest files from?
- which assets belong in a reusable library versus a historical folder?

That is why archive migration should end with a structure decision, not just a pile of converted files.

At minimum, the team should know:

- which files are active working sources
- which files are reference-only
- which assets were intentionally retired
- who owns updates for each major batch

Without that step, the team may successfully convert the archive and still recreate the same confusion under a new brand.

## A practical sequence for rebrand teams

For most internal rebrands, this order works well:

1. Inventory the archive by operational value.
2. Prioritize files that create the most repeated downstream work.
3. Group conversions into functional batches.
4. Clean the converted files around the new brand system.
5. Publish a clear ownership and archive structure after migration.

That sequence is less glamorous than jumping straight into visual redesign, but it is what keeps the new identity from being supported by old-file chaos.

## What to check before you call a batch done

Before a converted archive batch is considered usable, confirm:

- the files that matter most are actually editable
- outdated logos, colors, and typography are not still embedded in reusable masters
- the team knows which converted file is now canonical
- archived reference files are separated from live working files
- high-frequency assets are easier to update than they were before conversion

If the team is also migrating active design tools more broadly, [How to Preserve Editability When Converting Legacy Design Files to Figma](/articles/convertify-how-to-preserve-editability-when-converting-legacy-design-files-to-figma/) is a strong supporting article. This rebrand workflow is specifically about archive triage and leverage, not only technical conversion quality.

## Where Convertify fits best

[Convertify](/convertify/) helps rebrand teams because it turns old formats into something the new system can actually work with.

That sounds obvious, but it is strategically important. Rebrands slow down when teams are forced to rebuild previously approved assets from scratch just to make small updates. They speed up when the archive becomes editable enough to carry real work forward.

If your rebrand is about to touch decks, brochures, partner collateral, PDFs, and legacy campaign assets all at once, use Convertify early. The value is not merely that the old files can come into Figma. The value is that the new brand no longer has to inherit old-file paralysis.

---

---
type: article
title: Feature Flag Copy Rollout Workflow in Figma
description: Manage staged copy changes in Figma so flagged product updates, screenshots, and support-facing text stay aligned before release.
datePublished: 2026-06-15T00:00:00.000Z
dateModified: 2026-06-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-feature-flag-copy-rollout-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-feature-flag-copy-rollout-workflow-in-figma.md
---

# Feature Flag Copy Rollout Workflow in Figma

Feature flags make product launches safer. They also make copy governance messier.

A single release can leave teams juggling:

- old and new button labels
- onboarding states that differ by account
- paywall text that changes by experiment or rollout stage
- screenshots that reflect the future version while support still needs the current one
- help center, CRM, and product marketing language moving on different timelines

That is why staged releases need a copy workflow, not just an implementation plan.

[CopyDoc](/copydoc/) is well suited to this because it already sits at the point where Figma content, spreadsheets, reviews, and updates need to stay synchronized. The plugin page emphasizes importing, exporting, localizing, syncing, and updating text without manual copy-paste. Feature-flag rollouts are exactly where those capabilities matter.

The current library already covers adjacent CopyDoc angles like [Copy Freeze Workflow for Figma Product Launches](/articles/copydoc-copy-freeze-workflow-for-figma-product-launches/), [Figma Content Source of Truth Strategy](/articles/copydoc-figma-content-source-of-truth-strategy/), and [Product Marketing Screenshot Copy Workflow](/articles/copydoc-product-marketing-screenshot-copy-workflow/). This article is narrower. It is about staged copy rollout, where two or more valid versions of the interface can exist at the same time and the risk is silent inconsistency rather than obvious missing text.

## Map the rollout by flag, not by screen

Teams often start by reviewing screens one by one.

That feels sensible, but it misses the real structure of the problem.

A flag usually changes a set of strings that travel together across:

- navigation
- empty states
- settings labels
- upgrade flows
- help text
- product screenshots

So the first useful artifact is not a page list. It is a flag map.

For each feature flag, note:

- what user state triggers it
- which copy changes with it
- which screenshots or supporting assets change too
- who owns final wording
- whether the old version must stay shippable during rollout

That turns the review from "did we update this frame?" into "did we update every surface affected by this change?"

## Keep old and new strings intentionally side by side

Flagged launches create ambiguity because both versions may be valid for a while.

That is why one of the most useful CopyDoc habits is maintaining paired content deliberately:

- current label
- flagged label
- current helper text
- flagged helper text
- current screenshot caption
- flagged screenshot caption

When teams skip this structure, they start editing Figma directly and lose track of which wording belongs to which rollout state. Support docs drift. Marketing screenshots get updated too early. Engineers ship the new button label while a related error message still reflects the old flow.

This is exactly the kind of manual confusion [CopyDoc](/copydoc/) helps remove. The team can keep structured text closer to a spreadsheet or source file instead of letting the design file become the only place where the truth half-exists.

## Review the risky states, not only the obvious happy path

Feature flags rarely break the clean primary screen first. They usually break the awkward states around it.

Look closely at:

- empty states
- error states
- confirmation banners
- settings descriptions
- upgrade prompts
- transitional UI where old and new behavior can both appear

For example, a flagged billing change might update the primary pricing screen correctly while leaving:

- an old plan name in the cancel-flow modal
- outdated trial language in a settings description
- legacy wording in a product screenshot
- stale terminology in a support-facing mockup

That is why the rollout review should deliberately include the unglamorous states. They are where users notice inconsistency fastest.

## Connect product copy changes to screenshot ownership

Feature-flag rollouts are not just text problems.

They often affect:

- product marketing screenshots
- app store or store-listing visuals
- onboarding diagrams
- support documentation images
- sales enablement visuals

If the rollout changes a navigation label, CTA, or settings panel, then any screenshot containing that UI may need a flagged and unflagged version too.

This is where teams get caught. The product interface is updated, but the screenshot system still shows the old state for weeks. The launch feels fragmented because the words and the visuals are no longer telling the same story.

If screenshot coordination is a bigger pain point than UI-string management, [Product Marketing Screenshot Copy Workflow](/articles/copydoc-product-marketing-screenshot-copy-workflow/) is the best companion article to pair with this process.

## Give support and product the same vocabulary before rollout day

One underrated benefit of a structured feature-flag copy workflow is vocabulary alignment.

Before the new wording ships, product, support, marketing, and QA should already agree on:

- the final label
- the retired label
- any temporary transition language
- which terminology should appear in docs, tickets, and release notes

That matters because support conversations often lag behind the product rollout. If the UI says "Workspace access" but the help center and internal macros still say "Team permissions," users feel the disconnect immediately.

CopyDoc helps here because it makes export and re-import style workflows practical. The same string set can be reviewed outside Figma, approved, then synchronized back into the designs that everyone is using as visual references.

## A rollout checklist that works in practice

When a flagged copy change is heading toward release, I like to answer six questions:

1. What exactly changes when the flag is on?
2. Which states still need the old wording while rollout is partial?
3. Which screenshots or docs surfaces are affected?
4. Who approves the final terminology?
5. Where will support see the new language first?
6. What is the signal that the old copy can be fully retired?

That last question matters more than people expect. Teams are often good at introducing new copy and bad at removing the old version from the system once the rollout is complete.

## Before the rollout ships

Check that:

- every flagged string is mapped to a real user state
- old and new copy versions are not being confused inside the design file
- awkward states were reviewed, not just the main screen
- screenshots and related assets were updated where the flag changes visible UI
- support and product teams are using the same terminology
- there is a clear cleanup step once the flag becomes permanent

If the launch is broader and needs a final stabilization step, [Copy Freeze Workflow for Figma Product Launches](/articles/copydoc-copy-freeze-workflow-for-figma-product-launches/) is the best downstream follow-up. This feature-flag workflow is earlier and messier by design because the interface may still be living in two realities at once.

## Where CopyDoc fits best

[CopyDoc](/copydoc/) does not decide whether a staged rollout is the right product strategy. What it does do is make the copy layer much less fragile while that strategy is unfolding.

That matters because feature flags create more than engineering complexity. They create parallel-language complexity.

If your product team keeps shipping flagged UI changes while screenshots, docs, and secondary states lag behind, put CopyDoc at the center of the rollout process. The win is not merely faster text updates in Figma. It is making sure the product speaks consistently while the release is still in motion.

---

---
type: article
title: HTML Email Preview Link Approval Workflow for Stakeholder Signoff
description: Share real HTML email previews from Figma so stakeholders can sign off on layout, copy, and link behavior before the campaign reaches the ESP.
datePublished: 2026-06-15T00:00:00.000Z
dateModified: 2026-06-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-html-email-preview-link-approval-workflow-for-stakeholder-signoff/
markdownUrl: https://www.hypermatic.com/articles/emailify-html-email-preview-link-approval-workflow-for-stakeholder-signoff.md
---

# HTML Email Preview Link Approval Workflow for Stakeholder Signoff

Email signoff gets messy when reviewers are approving the wrong artifact.

A Figma design is useful for early direction. A screenshot is useful for quick discussion. But neither of those answers the most important late-stage question:

what will the actual HTML email feel like when someone opens it?

That is why preview-link approval matters so much in real email production.

[Emailify](/emailify/) already makes it possible to design emails in Figma and export production-ready HTML. It also supports workflows where that HTML can be shared as a preview link before it is pushed into the sending platform. That is a much better signoff surface for stakeholders because they can review the thing that is closest to the final experience instead of guessing from a static mock.

The current library already covers nearby Emailify topics like [Wireframe Email Approval Workflow Before Final Design](/articles/emailify-wireframe-email-approval-workflow-before-final-design/), [Figma Email QA Before ESP Upload](/articles/emailify-figma-email-qa-before-esp-upload/), and the tutorial on [uploading preview links for HTML emails from Figma to Netlify using Emailify](/tutorials/how-to-upload-preview-links-for-html-emails-from-figma-to-netlify-using-emailify/). This article is specifically about the approval layer in between: after the design is real, before the ESP upload becomes the new source of complexity.

## Signoff should happen on the real HTML, not on a guessed version of it

Late-stage feedback often lands too late because the review artifact is too abstract.

Common examples:

- the stakeholder approved the Figma frame but never saw the mobile stack
- legal signed off on copy, but not on how the disclaimer actually sits in the email
- marketing liked the hero, but the live spacing made the CTA feel weaker
- a reviewer assumed link behavior was obvious because the button looked correct in the mock

The closer the approval artifact is to the sent experience, the more useful the feedback becomes.

That does not mean preview links replace full QA. They do not. But they are the right place to answer signoff questions around:

- message hierarchy
- desktop and mobile layout
- image and copy balance
- CTA clarity
- basic link and footer expectations

## Give each stakeholder a narrower review brief

Preview-link approval works best when people are told what to approve.

Otherwise everyone comments on everything, and the review turns into a vague mix of taste, caution, and late-stage rewrites.

I like splitting the signoff this way:

`marketing or CRM`
- subject and preheader relevance
- message order
- CTA prominence
- offer clarity

`legal or compliance`
- required footer language
- claim wording
- disclaimers near sensitive statements
- unsubscribe or preference-path visibility

`product or content owner`
- screenshot accuracy
- feature descriptions
- terminology consistency

`design`
- desktop and mobile rhythm
- spacing hierarchy
- visual emphasis
- whether the preview still feels like the intended campaign

This makes the approval conversation calmer because people are not inventing review criteria on the fly.

## Package the preview link with just enough context

A preview link alone is not a process.

The signoff package should usually include:

- the hosted preview link
- subject line and preheader
- campaign objective
- audience or segment
- any areas that are intentionally still variable
- a deadline for consolidated feedback

That context matters because stakeholders often review quickly and asynchronously. If they do not know what changed or what is still open, they will either over-comment or miss the actual decision.

One useful trick is to frame the request in plain language:

- approve the message and layout
- flag legal or factual issues
- do not request net-new modules unless the campaign goal is wrong

That kind of constraint protects the team from last-minute "while we're here" scope creep.

## Preview-link approval is where layout truth becomes visible

A lot of email debates disappear or intensify the moment people see the actual HTML preview.

That is a good thing.

Some problems only become obvious in the preview:

- a hero image dominates more than expected
- body copy becomes denser on mobile
- a CTA that felt clear in Figma gets visually buried
- a disclaimer pushes key content lower than planned
- a long subject and preheader pairing weakens the opening impression

This is why preview-link approval should happen before ESP upload. Once the campaign is inside the email platform, teams start dealing with platform-specific settings, tests, and production pressure. Structural feedback is still possible, but it becomes much more expensive.

## Keep signoff separate from final QA

This distinction matters.

Approval answers:

- is this the right email to send?
- is the message and layout acceptable?
- are the visible claims and links conceptually correct?

QA answers:

- does the HTML still behave correctly across clients?
- did the ESP alter anything?
- are tracking parameters, personalization, and platform rules correct?

If those stages blur together, the team either signs off too early or treats every approval review like a full client-render test.

The better workflow is:

1. approve on the preview link
2. resolve feedback while the campaign is still easy to change
3. move to ESP upload
4. run final QA before scheduling

That is also why [Figma Email QA Before ESP Upload](/articles/emailify-figma-email-qa-before-esp-upload/) is the right companion article after this stage.

## Use preview links to force consolidated feedback

One of the biggest operational wins from preview links is not technical. It is behavioral.

Because the review happens on one shared artifact, the team can ask for one consolidated approval pass instead of scattered comments across:

- Figma comments
- screenshots in Slack
- copied HTML files
- email threads with contradictory asks

If multiple stakeholders are involved, give them one deadline and one owner who resolves conflicts before the design team starts revising. That keeps signoff from becoming a sequence of partial approvals that contradict each other.

## A practical signoff checklist

Before the campaign moves past preview-link approval, confirm:

- the preview reflects the real HTML structure, not just the Figma mock
- desktop and mobile views were both reviewed
- the subject line and preheader are included with the request
- each stakeholder knows what they are approving
- legal or compliance-sensitive areas were reviewed explicitly
- feedback was consolidated before revisions started
- the campaign is moving next into QA, not directly into send

If your team wants a stronger structural approval step before this stage, [Wireframe Email Approval Workflow Before Final Design](/articles/emailify-wireframe-email-approval-workflow-before-final-design/) is the best upstream companion. That earlier workflow is about message sequence. This one is about approving the real HTML experience before the ESP complicates the picture.

## Where Emailify fits best

[Emailify](/emailify/) is valuable here because it keeps the design source and the previewable HTML close together. The team does not need one tool for the mock, another for the preview artifact, and a third mental model for what will actually be sent.

That continuity is what makes stakeholder signoff cleaner.

If your email approvals still depend on static screenshots or comments on a design file alone, moving the signoff step onto an Emailify preview link is one of the simpler ways to get more useful feedback earlier. The real win is not just convenience. It is approving the campaign that will actually be felt by the recipient, not a flatter approximation of it.

---

---
type: article
title: Partner Enablement Deck Workflow for Channel Sales Teams
description: Create partner-ready decks in Figma that channel teams can localize, update, and present without breaking the story or the brand.
datePublished: 2026-06-15T00:00:00.000Z
dateModified: 2026-06-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-partner-enablement-deck-workflow-for-channel-sales-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-partner-enablement-deck-workflow-for-channel-sales-teams.md
---

# Partner Enablement Deck Workflow for Channel Sales Teams

Channel sales decks are harder than normal sales decks.

A direct sales team usually knows the product, the story, and the brand rules. A partner or reseller audience often needs more flexibility and more guardrails at the same time. They may need to swap a logo, localize a case study, update pricing context, or remove a slide for a specific region. If the deck is too locked, it becomes useless. If it is too loose, the message drifts and the design quality collapses fast.

That is where [Pitchdeck](/pitchdeck/) fits unusually well.

The existing Pitchdeck library already covers adjacent territory like [Figma Sales Deck Workflow for Revenue Teams](/articles/pitchdeck-figma-sales-deck-workflow-for-revenue-teams/), [Presentation Brand Control for Figma Teams](/articles/pitchdeck-presentation-brand-control-for-figma-teams/), and [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/). This article is specifically about partner enablement: the awkward middle ground where a deck has to stay on-brand while still being editable enough for outside teams to use in the real world.

## Start by separating the core story from the partner-change layer

Most partner decks go wrong because the whole file is treated as equally editable.

It is better to divide the deck into three layers:

`core story`
- positioning
- problem framing
- key proof points
- brand narrative

`partner-adaptable`
- regional proof
- customer examples
- market-specific terminology
- localized screenshots or references

`presentation-only extras`
- speaker notes
- appendix slides
- optional use-case detail

This framing changes the design process. Instead of asking whether the partner can "edit the deck," the team asks a better question: which parts should they be able to adapt without weakening the main message?

That alone prevents a lot of downstream chaos.

## Design slide families, not one-off hero slides

Partner decks often get updated by non-designers under deadline pressure. That means a beautiful one-off slide system is less useful than a resilient slide family.

The most helpful patterns to build in Figma are:

- one clear opening slide style
- one problem or challenge slide style
- one proof or capability slide style
- one customer or case-study slide style
- one CTA or next-step slide style

The point is not to make the deck feel templated. It is to make later edits safer.

If a partner swaps a customer logo, replaces a quote, or inserts a regional use case, the layout should still hold together. Pitchdeck is especially helpful when the deck starts in Figma because the design team can get the slide logic right before export decisions start muddying the process.

## Choose the export model before partner requests begin

This is one of the easiest places to lose time.

A partner enablement deck may need to become:

- an editable PowerPoint file
- an editable Google Slides deck
- a hosted web presentation
- a safe PDF fallback

Each of those serves a different downstream need.

If the partner team presents live and edits frequently, editable output matters. If the channel manager needs visibility into who actually opened the deck, a hosted web presentation may be smarter. If brand control is the highest priority, a PDF can still be the right fallback for certain handoffs.

That is why I like to make the export decision part of deck planning, not the final step after design signoff.

If your team needs the broader format tradeoffs, [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/) is the best companion article. For partner workflows, the key is that one source deck may support multiple outputs, but the partner should still know which version is the operational default.

## Build edit boundaries into the deck on purpose

Partners usually do not need "full creative freedom." They need safe places to adapt the message.

Good edit boundaries often include:

- clearly marked slides that are safe to localize
- sections where logos or customer examples can be replaced
- notes on which screenshots must stay current
- speaker notes indicating what can be shortened or skipped
- one appendix area for regional additions instead of ad hoc slide duplication

This is where a partner enablement deck becomes more than a deck. It becomes a governance system.

Without boundaries, every reuse request turns into a mini redrafting exercise. With boundaries, the channel team can customize the deck without reopening the full brand debate every time.

## Use speaker notes as partner training, not just presenter memory

One underrated part of the workflow is the note layer.

In a partner deck, speaker notes can do more than remind the presenter what to say. They can explain:

- the intended emphasis of a slide
- which proof points are optional
- where region-specific examples can be inserted
- what claim language should not be changed casually

That is especially useful when a partner understands the product broadly but not with the same nuance as the internal sales team.

Pitchdeck supports presentation workflows where the content, presentability, and export behavior stay connected to the Figma source. That continuity makes notes more valuable because the story structure is not being rebuilt separately in another deck tool.

## Review partner decks for drift before you export the "final" version

The main failure mode in partner decks is quiet drift, not dramatic breakage.

Typical examples:

- the CTA gets softened by a regional edit
- a partner inserts too many slides before the value is clear
- a screenshot is replaced with an outdated product view
- one localized proof point overpowers the actual product story

So before the deck is exported, do one review specifically for partner use:

- if this slide gets edited, what is most likely to break?
- if a partner shortens this section, does the story still work?
- if this becomes a PowerPoint or Google Slides file, which slides are structurally fragile?
- what is the fallback if the deck must be sent as PDF instead?

This is also where [Presentation Brand Control for Figma Teams](/articles/pitchdeck-presentation-brand-control-for-figma-teams/) becomes helpful. Brand control in partner workflows is less about strict lockdown and more about designing safe flexibility.

## A practical rollout rhythm for channel teams

For most partner programs, a simple operating loop works well:

1. Maintain one canonical deck in Figma.
2. Mark slides that are safe for localization or proof swaps.
3. Export the default partner format intentionally.
4. Keep a PDF fallback for high-risk situations.
5. Review significant partner-customized versions before they spread further.

If the deck is reused often, it also helps to set a refresh cadence. Partner enablement decks get stale quickly when screenshots, integrations, or claims evolve faster than the channel material does.

## What to check before handoff

Before a partner deck is distributed, confirm:

- the core story is distinct from the editable layer
- slide families are resilient enough for non-designer edits
- the default export format matches how the partner will actually use the deck
- speaker notes explain emphasis, not just script fragments
- brand-sensitive claims and visuals are not left ambiguous
- a PDF fallback exists for locked or procurement-heavy sharing

If the deck also needs broader sales-team reuse, [Presentation Handoff Checklist for Designers](/articles/pitchdeck-presentation-handoff-checklist-for-designers/) is a useful related read. That article is broader; this one is specifically about keeping partner flexibility from turning into partner drift.

## Where Pitchdeck fits best

[Pitchdeck](/pitchdeck/) is not just useful because it exports presentations from Figma. Its real strength in partner enablement is that it lets the design team keep the presentation source close to the story, the notes, and the export decisions instead of splitting that workflow across disconnected tools.

That matters when the deck will keep changing after design handoff.

For channel sales teams, the goal is not to create a "perfect" deck that nobody can touch. It is to create a deck that partners can actually use without breaking what made it persuasive in the first place. Pitchdeck makes that balance much easier to manage.

---

---
type: article
title: White-Label Product QA Workflow from Figma
description: Compare branded product builds against their matching Figma designs so white-label launches do not ship with quiet theme drift.
datePublished: 2026-06-15T00:00:00.000Z
dateModified: 2026-06-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-white-label-product-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-white-label-product-qa-workflow-from-figma.md
---

# White-Label Product QA Workflow from Figma

White-label products create a special kind of QA fatigue.

The core application may be stable. The layout system may already be live. But each branded rollout introduces a new combination of:

- logos
- color tokens
- navigation labels
- landing screens
- screenshots
- client-specific content blocks

No single change looks dramatic. Together, they create plenty of room for visual drift.

That is why white-label QA should not be treated like one more generic pre-launch check.

[Pixelay](/pixelay/) is a strong fit because it compares Figma designs against real websites in the browser across live sites, preview environments, localhost setups, and authenticated flows. For white-label launches, that matters because the real issue is usually not whether one component exists. It is whether a branded build still behaves like the intended design once shared components, custom content, and theme overrides all collide.

The current library already covers adjacent Pixelay workflows like [Localized Website QA Workflow from Figma](/articles/pixelay-localized-website-qa-workflow-from-figma/), [Design System Rollout QA Workflow for Frontend Teams](/articles/pixelay-design-system-rollout-qa-workflow-for-frontend-teams/), and [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/). This article is narrower. It is about multi-brand or white-label product rollouts where the same application logic appears under different visual and content rules.

## White-label QA starts with a brand map, not a page list

The mistake most teams make is opening one environment and reviewing screens at random.

A better starting point is a brand map that answers:

- which parts of the product are shared across every brand
- which parts are brand-specific
- which screens have client-specific content density
- which environments or URLs correspond to each branded design set

That gives the QA pass structure.

Without that map, the team ends up capturing symptoms:

- "the header feels off here"
- "this page is not matching the mock"
- "brand B looks tighter than brand A"

Those notes are directionally true, but they do not help much unless the team knows whether the problem comes from shared code, one theme override, or one custom content module.

## Compare the shared surfaces first

Every white-label rollout has a few surfaces where drift is most likely to reveal system problems:

- global navigation
- login or welcome screens
- dashboard headers
- buttons and form controls
- empty states
- settings or billing screens

If those shared surfaces are already off, the later page-by-page review will mostly rediscover the same problem.

So the first pass should ask:

- do the theme tokens behave correctly?
- does logo treatment hold up across responsive states?
- are button hierarchies still consistent?
- did one brand override create spacing or contrast issues?

This part of the workflow is closely related to [Design System Rollout QA Workflow for Frontend Teams](/articles/pixelay-design-system-rollout-qa-workflow-for-frontend-teams/), but the white-label angle is different. The risk is not only a system change. It is the interaction between a shared system and brand-specific overrides.

## Then review the brand-specific stress points

Once shared surfaces are stable, move to the places where white-label products usually diverge most:

- hero or welcome copy
- screenshots or product illustrations
- plan cards or pricing-style modules
- embedded proof sections
- custom navigation items
- client-specific dashboards or labels

These are the areas where a build can feel "mostly right" while still being visibly wrong for the specific brand.

Common issues include:

- a longer client name breaking header rhythm
- a custom screenshot crop feeling off against the approved mock
- one brand color reducing button contrast
- an injected content block creating uneven spacing on smaller screens
- a partner-specific plan name pushing cards out of alignment

Pixelay is useful here because the comparison happens in the actual environment rather than in a static screenshot workflow. That matters when the content and layout react differently in the browser than they do in the design file.

## Review each brand at the breakpoints most likely to fail

White-label builds are especially vulnerable on narrower screens.

Why? Because brand-specific additions often increase text length or visual complexity without changing the underlying layout assumptions.

Examples:

- a longer navigation label wraps
- a larger logo changes header balance
- a proof module with denser content overwhelms a card layout
- a screenshot caption becomes too tall on mobile

So the review should not stop at the default desktop width.

At minimum, check:

- the primary desktop view
- the most commercially important tablet or laptop width if relevant
- the mobile breakpoint where content starts stacking tightly

If the rollout includes authenticated product areas, [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/) is the best supporting article to pair with this process. White-label products often combine branding drift with logged-in state complexity.

## Separate shared bugs from brand-specific bugs immediately

This is the operational habit that saves the most time.

Each QA finding should be labeled as one of these:

`shared implementation issue`
- affects multiple brands
- likely caused by common code or tokens

`brand override issue`
- specific to one theme or client config
- likely caused by one color, asset, or content override

`intentional difference`
- approved deviation from the base design
- should not be "fixed" later by someone unaware of the decision

That classification keeps the fix path clean.

Otherwise, a shared bug may get patched brand by brand, or a deliberate exception may keep reappearing in later QA cycles as a mysterious defect.

## Use one reference pair per branded flow

The comparison becomes much easier when each live flow maps to one clear Figma counterpart.

For example:

- `brand-a-dashboard` -> preview URL A
- `brand-b-dashboard` -> preview URL B
- `brand-a-billing` -> preview URL A billing path
- `brand-b-billing` -> preview URL B billing path

The point is not fancy naming. It is making sure the team always knows which design is the source of truth for which environment.

This is especially important when a base design has been duplicated into several brand variants. If reviewers start comparing a brand B environment against the brand A frame by accident, the findings become noisy and credibility drops fast.

## A practical white-label QA loop

For most SaaS or product teams, this sequence works well:

1. Build a map of shared and brand-specific surfaces.
2. Compare shared UI first to catch system-level drift.
3. Review brand-specific stress points in the real browser.
4. Check the breakpoints where brand overrides are most likely to fail.
5. Label each issue as shared, brand-specific, or intentional.

That keeps the QA pass focused on the problems white-label rollouts actually create, rather than turning it into a generic visual scavenger hunt.

## Before launch, confirm

- each branded environment maps to the correct Figma frames
- shared navigation, forms, and buttons are stable across brands
- custom screenshots, logos, and content blocks were reviewed in the browser
- narrow breakpoints were checked where brand-specific text can wrap
- issues are clearly separated into shared and brand-specific buckets
- intentional deviations are documented

If the rollout also includes region-specific copy differences, [Localized Website QA Workflow from Figma](/articles/pixelay-localized-website-qa-workflow-from-figma/) is a strong companion process. Localization and white-labeling create similar drift patterns, but the ownership model is different.

## Where Pixelay fits best

[Pixelay](/pixelay/) is valuable in white-label QA because it lets teams compare design intent against the real branded implementation without flattening the problem into screenshots and opinions.

That is exactly what multi-brand launches need.

If your product team keeps finding brand-specific visual issues only after a client preview or soft launch, move the comparison earlier and make it browser-based. Pixelay will not choose the right brand strategy, but it will make it much easier to see when the live build has drifted away from the approved design for that specific brand.

---

---
type: article
title: Browser Extension Store Screenshot Export Workflow from Figma
description: Prepare sharper, lighter browser extension listing screenshots from Figma so storefront assets stay readable across review threads, browser themes, and compressed uploads.
datePublished: 2026-06-15T00:00:00.000Z
dateModified: 2026-06-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-browser-extension-store-screenshot-export-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-browser-extension-store-screenshot-export-workflow-from-figma.md
---

# Browser Extension Store Screenshot Export Workflow from Figma

Browser extension screenshots look simple until the listing is almost ready to ship.

The product team has a good set of desktop UI mocks in Figma. Marketing wants the screenshots to feel polished. The browser-store listing needs a clean sequence. Someone notices that the text in one screenshot looks soft after upload. Someone else points out that dark browser chrome makes the product UI harder to read. Then the team starts exporting fresh versions one by one, compressing them manually, and losing track of which set is actually approved.

That is exactly the kind of workflow [TinyImage](/tinyimage/) helps clean up.

The current library already covers nearby TinyImage jobs like [App Store and Play Store Screenshot Export Workflow from Figma](/articles/tinyimage-app-store-and-play-store-screenshot-export-workflow-from-figma/), [Product Screenshot Export Workflow for SaaS Landing Pages](/articles/tinyimage-product-screenshot-export-workflow-for-saas-landing-pages/), and [Color Profile Checklist for Figma Exports](/articles/tinyimage-color-profile-checklist-for-figma-exports/). This article is narrower. It is about browser extension storefront screenshots, where the UI is usually desktop-sized, the listing is judged quickly, and small export mistakes can make a capable extension look sloppy.

## Treat the listing as a sequence, not as a folder of screenshots

An extension-store visitor usually decides fast whether the product looks credible.

That means each screenshot should do one job in the sequence:

- `overview`: show the extension in context so the product feels real
- `proof`: show the key workflow or automation clearly
- `detail`: zoom in on the part that differentiates the extension
- `trust`: show settings, output quality, or workflow depth

When every screenshot tries to do all four jobs, the listing gets noisy. A browser extension UI often has toolbars, side panels, configuration states, and output previews competing for attention. The team ends up shipping screenshots that are technically accurate but hard to understand in one glance.

If you decide the role of each screenshot first, the export work becomes easier. The overview image can stay slightly wider. The proof image can crop tighter around the extension panel. The trust image can preserve more detail because the viewer is already interested by that point.

## Browser extension screenshots need a desktop-specific crop discipline

The biggest difference from app-store screenshots is not just screen size. It is browsing behavior.

Desktop extension screenshots often contain:

- browser chrome
- tabs
- side panels
- settings controls
- dense text labels
- output previews sitting next to the source UI

That is a lot of visual material for one listing image.

So instead of exporting the entire desktop frame by default, ask:

- what must the viewer understand in the first second?
- which part proves the extension is doing real work?
- what browser chrome is useful context versus dead weight?
- does the crop still make sense if the listing UI shrinks the image?

For example, if the extension value lives inside a sidebar or modal, the crop should probably favor that area instead of giving equal weight to the full webpage behind it. If the extension creates an output file, the screenshot may need a side-by-side composition that makes the input and result relationship obvious.

The goal is not to hide context. It is to keep the extension itself from becoming visually secondary inside its own screenshot.

## Build one master screenshot set, then create storefront variants deliberately

Extension listings often spread into more than one review path.

You may have:

- one screenshot set for the primary store listing
- localized variants for selected markets
- alternate crops for review decks or launch posts
- sharper versions kept for press kits or documentation

The cleanest workflow is to build one master set in Figma and only branch when the use case genuinely changes.

I like a structure like this:

1. Create the canonical screenshot sequence.
2. Lock copy and visual hierarchy in the master set.
3. Duplicate variants only when a listing or market truly needs different framing.
4. Keep naming tied to sequence and purpose, not draft history.

Example naming:

- `extension-store_01-overview.png`
- `extension-store_02-proof.png`
- `extension-store_03-detail.png`
- `extension-store_04-trust.png`

This makes later review much easier because everyone can see whether the change affected the sequence, the locale, or just one isolated asset.

## Compression decisions should protect UI trust first

Extension screenshots are often more sensitive to compression than lifestyle marketing graphics.

Why? Because the viewer is usually judging software quality through:

- sharp labels
- legible panels
- crisp charts or settings
- believable output previews

If those details turn mushy, the product feels less trustworthy even when the feature itself is strong.

A practical TinyImage export pass looks like this:

1. Export a sharp baseline version from the final Figma frames.
2. Create one lighter alternative for each screenshot.
3. Compare both versions at the size reviewers will actually see.
4. Keep the lightest version that still feels fully readable.

That last step matters. Storefront screenshots do not need maximal theoretical quality. They need enough clarity to make the software feel legitimate.

If the screenshot contains dense UI text or a detailed panel, be more conservative. If it is a cleaner overview shot with stronger shapes and less tiny copy, you can usually push compression further.

TinyImage is useful here because the comparison loop stays close to Figma instead of turning into a manual export-compress-reopen cycle in several tools.

## Watch out for dark-mode and browser-frame distractions

Extension screenshots can look inconsistent fast because the surrounding browser context changes the perceived contrast.

Common problems:

- the product UI blends into a dark browser frame
- the active area is too small inside a very large page
- one screenshot uses a different browser treatment from the rest
- text looks readable on a designer monitor but soft in an actual listing preview

This is where consistency matters almost as much as compression.

Decide early whether the set will:

- show full browser framing consistently
- use a minimal browser shell treatment
- rely on clean background isolation around the extension UI

What you want to avoid is half the set feeling like product screenshots and the other half feeling like random desktop captures.

## Review the listing in sequence before anyone approves file sizes

One reason screenshot export work becomes tedious is that the team reviews assets individually and only later realizes the sequence is repetitive or confusing.

Do one sequence review before final handoff:

- does screenshot one explain the core job fast?
- does screenshot two deepen the story instead of repeating the first?
- are the tight crops placed where detail actually matters?
- is there one screenshot carrying too much explanatory burden?
- does the last screenshot strengthen trust instead of trailing off?

This is also the moment to catch images that are technically fine but strategically weak. Sometimes the issue is not compression at all. It is that the screenshot order makes the extension look more complicated than it is.

## A practical storefront checklist

Before the screenshot set is handed off, check:

- each screenshot has one clear communication role
- the extension UI stays readable at listing-preview size
- browser chrome is consistent across the sequence
- tighter crops are used where the workflow detail matters most
- filenames match the final order
- compressed versions were reviewed visually, not only by file weight
- the full set was reviewed in sequence, not as isolated exports

If your team also needs color accuracy across review devices, pair this workflow with [Color Profile Checklist for Figma Exports](/articles/tinyimage-color-profile-checklist-for-figma-exports/). If the same product UI is also heading to a website launch page, [Product Screenshot Export Workflow for SaaS Landing Pages](/articles/tinyimage-product-screenshot-export-workflow-for-saas-landing-pages/) is the best companion process.

## Where TinyImage fits best

[TinyImage](/tinyimage/) does not decide which screenshot will sell the extension. That still depends on the story the team chooses to tell.

What it does remove is the repetitive production mess between approved Figma frames and a listing-ready screenshot set: lighter exports, faster comparison, cleaner batch handling, and less manual cleanup when the sequence changes late.

For browser extension teams, that is a real win. Storefront screenshots should feel deliberate, not like whatever happened to be exported last. TinyImage makes it much easier to keep that discipline inside Figma while the listing is still evolving.

---

---
type: article
title: Banner Variant Review Workflow for Campaign Teams
description: Review banner variants together before trafficking so timing drift, offer mismatches, and size-specific issues get caught while the campaign is still easy to fix.
datePublished: 2026-06-14T00:00:00.000Z
dateModified: 2026-06-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-banner-variant-review-workflow-for-campaign-teams/
markdownUrl: https://www.hypermatic.com/articles/bannerify-banner-variant-review-workflow-for-campaign-teams.md
---

# Banner Variant Review Workflow for Campaign Teams

A banner set can fail without any single banner being obviously broken.

That is what makes variant review so slippery.

The 300x250 looks great. The 160x600 is technically fine. The retargeting version has the right CTA. The localized headline fits. But when the media team or client sees the whole campaign together, the problems show up instantly:

- one size reveals the offer too late
- one market uses older pricing
- one animation feels noticeably slower
- one legal line dominates the layout
- one fallback choice makes the whole campaign feel inconsistent

That is why banner variant review needs to happen as a set, not as a series of isolated asset checks.

[Bannerify](/bannerify/) is well suited to this because it keeps the design, animation, preview, and export workflow inside Figma instead of forcing the team into a separate production tool. The existing library already covers neighboring topics like [Figma Banner Ad Variant Production Workflow](/articles/bannerify-figma-banner-ad-variant-production-workflow/), [Display Ad QA Checklist Before Launch](/articles/bannerify-display-ad-qa-checklist-before-launch/), and [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/). This article is narrower: it is about how campaign teams should review the full family of variants together before trafficking starts.

## Review the family before the individual asset

Most teams do this backward.

They inspect one banner closely, approve it, and assume the rest are mostly formatting work.

But campaign systems usually break in the differences between variants:

- size differences
- audience differences
- market differences
- format differences
- offer differences

That is why I like to start with a variant map instead of a file browser.

Lay out the campaign by:

- placement size
- audience or funnel stage
- language or market
- format type such as HTML5, GIF, or MP4
- offer or CTA family

Once the set is organized that way, the review becomes comparative instead of accidental. People stop asking "does this banner look okay?" and start asking "does this variant still behave like the same campaign?"

## Compare the smallest and busiest placements first

The easiest way to find structural weakness is to review the banners under the most pressure.

That usually means:

- small placements
- long-copy variants
- markets with longer translations
- banners carrying legal lines
- rich-media or product-heavy versions

If the campaign logic survives those placements, the larger or simpler sizes usually follow more easily.

This is one reason [Bannerify](/bannerify/) is helpful for real production teams. The exported preview experience makes it much easier to compare the variants in context instead of opening ZIP files one by one and relying on memory.

The nearby tutorial on [bulk exporting Figma banner variants from a spreadsheet to HTML or Video/GIF using Bannerify](/tutorials/how-to-bulk-export-figma-banner-variants-from-a-spreadsheet-to-html-or-video-gif-using-bannerify/) is also useful when the review set is large and content-driven.

## Look for timing drift, not only visual drift

Variant review is not just a design consistency check.

It is also a pacing check.

Two banners can share the same visual system and still communicate very differently because one variant:

- reaches the offer too late
- reveals the CTA too briefly
- rushes the legal copy
- holds on the first scene too long
- loops at a more awkward point than the rest

This is why reviewing variants together is so valuable. Small timing differences are hard to feel when banners are viewed in isolation. They become obvious when the family is played and compared as a set.

If the campaign still needs help at the narrative stage, [Animated Banner Storyboard Workflow in Figma](/articles/bannerify-animated-banner-storyboard-workflow-in-figma/) is the most relevant upstream article. Variant review works best when the underlying message sequence is already clear.

## Separate creative inconsistency from trafficking readiness

A variant review session gets noisy fast when every issue lands in the same bucket.

I prefer sorting findings into three groups:

`campaign consistency`
- does the message still feel like the same campaign?
- are the offer hierarchy and CTA emphasis aligned?

`size or market adaptation`
- did this placement need a legitimate structural change?
- did a translated line force a better or worse compromise?

`production or trafficking risk`
- missing click behavior notes
- wrong export format for the placement
- unclear fallback or packaging decisions

That separation matters because some differences are healthy. A narrow placement may need a shorter sequence than a wide placement. A localized version may need a different proof line. The review should distinguish intentional adaptation from unintentional drift.

## Use the review to reduce debate later

A strong variant review does more than find problems.

It creates shared confidence before the campaign reaches ad ops, media buyers, clients, or legal reviewers.

That confidence usually comes from a short review package:

- the campaign map
- the variant groupings
- the preview set
- a note about which differences are intentional
- a list of fixes that still need to land before export is final

Once that package exists, downstream reviewers do not have to infer whether one odd-looking size is a bug, a translation concession, or an audience-specific choice. The team has already made that reasoning visible.

## A practical variant-review sequence

For high-volume campaigns, this loop is usually enough:

1. Group banner variants by size, audience, market, and format.
2. Review the smallest and highest-risk placements first.
3. Compare timing, message order, and CTA emphasis across the set.
4. Mark which differences are intentional adaptations versus real inconsistencies.
5. Only after the family feels coherent should trafficking packaging move forward.

Before launch, confirm:

- every variant still feels like the same campaign
- long-copy or localized versions do not break the narrative sequence
- smaller placements are not hiding the core offer
- format decisions still match the placement needs
- the review notes explain unusual differences before downstream teams ask

Campaign teams rarely lose time because one banner is impossible to export.

They lose time because the variant family was never reviewed as a system. [Bannerify](/bannerify/) reduces a lot of the manual production burden, but the operational win is even bigger when teams use that speed to compare the whole campaign earlier. If your banner sets keep looking consistent in design review and chaotic in final approvals, shift the review upstream and compare the variants together before trafficking starts.

---

---
type: article
title: Adobe XD to Figma Migration Workflow for Product Teams
description: Move Adobe XD product files into Figma with a cleaner plan for libraries, screens, shared styles, and post-import cleanup.
datePublished: 2026-06-14T00:00:00.000Z
dateModified: 2026-06-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-adobe-xd-to-figma-migration-workflow-for-product-teams/
markdownUrl: https://www.hypermatic.com/articles/convertify-adobe-xd-to-figma-migration-workflow-for-product-teams.md
---

# Adobe XD to Figma Migration Workflow for Product Teams

Adobe XD to Figma migration looks simple from a distance.

Open the old file. Import it. Keep moving.

The real pain starts after that first win. The team discovers duplicate components, missing fonts, flattened patterns, unclear ownership, old prototype screens nobody trusts, and a pile of imported pages that technically exist in Figma but do not yet behave like a real working system.

That is why XD migration needs a workflow, not just a converter.

[Convertify](/convertify/) is a strong fit here because the product page explicitly supports importing Adobe XD files into Figma alongside other legacy formats. The tutorial on [how to convert and import Adobe XD to Figma in seconds using Convertify](/tutorials/how-to-convert-and-import-adobe-xd-to-figma-in-seconds-using-convertify/) covers the mechanics. This article is about the operational side for product teams: how to decide what to migrate, how to structure the imported result, and how to stop the migration from creating a second mess inside Figma.

## Do a small audit before the import

The wrong opening move is dragging the biggest XD file into Figma and hoping the output teaches you the plan.

A quick preflight is usually enough:

- Which files are still active product work versus archived history?
- Which screens depend on shared components or styles?
- Which fonts, linked assets, or brand resources are required?
- Which flows are still business-critical?
- Which pages are already obsolete?

That last question is worth taking seriously.

Legacy design systems often contain years of abandoned branches. If the team imports everything without pruning anything, the migration preserves confusion instead of reducing it.

For product teams, I like to divide the XD estate into three buckets:

- migrate now because the screens are still live or immediately relevant
- migrate later because the file is valuable but not urgent
- do not migrate because the material is obsolete or better rebuilt cleanly

This keeps the migration focused on current product value instead of archaeology for its own sake.

## Separate library migration from screen migration

One of the biggest reasons migrations feel chaotic is that teams try to solve two jobs at once:

- move the UI library
- move the product screens

Those are related, but they are not the same.

If you import a huge XD product file and only afterward start asking which components are canonical, the team ends up reverse-engineering its own system from a noisy artifact. It is usually cleaner to identify:

- foundational components or repeated patterns
- the most business-critical screen flows
- any one-off experimental pages that can wait

For a product team, a useful sequence is often:

1. migrate one representative XD file or flow
2. inspect the repeated components and naming patterns
3. define the Figma-side structure for the new source of truth
4. migrate the next wave with that structure in mind

This makes the move feel like controlled adoption instead of a giant data dump.

If you need a broader planning lens across many file types, [Design Tool Migration Plan for Figma](/articles/convertify-design-tool-migration-plan-for-figma/) is the best supporting article.

## Import a representative slice before the full library

The best early migration target is not the easiest file.

It is the file that reveals the most about the real risks.

For example:

- a settings-heavy product flow with dense UI
- a dashboard with repeated cards and tables
- a checkout or onboarding path with multiple states
- a marketing page that mixes typography, imagery, and components

That representative slice will show you whether the bigger risks are:

- naming inconsistency
- asset packaging
- component sprawl
- text reflow
- page organization
- missing cleanup rules after import

Once that first slice lands in Figma, review it the way the product team will actually use it later. Do not only ask whether it "looks close." Ask whether it can be edited safely by the next designer without losing structure.

That is the point where migration becomes credible.

## Rebuild ownership rules immediately

A converted file is not yet a source of truth.

Someone still needs to decide:

- where canonical components now live
- which imported styles are approved
- which pages are reference-only
- which prototype flows are worth preserving
- how future changes get made

Without those rules, the imported XD file becomes a temporary holding zone that quietly turns permanent. Teams keep editing inside the imported artifact, new files fork off it, and the Figma workspace inherits the same drift that existed in XD.

This is why the migration should produce not only files, but ownership:

- one home for reusable UI patterns
- one clear location for active product screens
- one documented rule for what stays reference-only

If the team needs help with the cleanup phase after a successful import, [Figma Import Cleanup Checklist](/articles/convertify-figma-import-cleanup-checklist/) is the closest companion piece.

## Preserve editability where it matters most

Some teams judge migration success by visual resemblance alone.

That is not enough.

For product teams, editability is what determines whether the imported file will still be useful next quarter. The highest-value review areas are usually:

- recurring components
- screen titles and labels
- long-form settings or help text
- image-heavy empty states
- layouts likely to be localized or extended later

If those areas remain practical to update, the migration has real operational value. If they only look correct in static review, the team will still end up rebuilding the important parts later.

That is why [How to Preserve Editability When Converting Legacy Design Files to Figma](/articles/convertify-how-to-preserve-editability-when-converting-legacy-design-files-to-figma/) matters so much in adjacent workflows. The imported result needs to survive real product iteration, not only a demo.

## A practical XD-to-Figma migration loop

For active product teams, this lighter loop is usually enough:

1. Audit the XD files and choose the current, high-value flows first.
2. Import one representative slice with [Convertify](/convertify/).
3. Review editability, repeated components, and naming quality before scaling up.
4. Separate reusable library patterns from one-off screen history.
5. Rebuild ownership rules in Figma immediately so the migration does not fork again.
6. Migrate the next wave only after the first wave has a trustworthy home.

Before calling the job complete, confirm:

- the imported files represent current product reality, not only historical clutter
- repeated patterns have a clear canonical home in Figma
- obsolete screens are marked or retired instead of silently carried forward
- the team can edit the important flows without redoing the migration
- future work will happen in Figma, not bounce back into the old XD archive

The best XD-to-Figma migration is not the one that ports the most screens in one afternoon.

It is the one that gives the product team a clean place to keep working afterward. [Convertify](/convertify/) removes the slowest part of the move by getting Adobe XD content into Figma without manual reconstruction. The bigger payoff comes when the team treats that import as the beginning of system cleanup, ownership, and modernization instead of the end of the project.

---

---
type: article
title: Settings and Permissions Copy Review Workflow in Figma
description: Review settings, roles, and permissions copy in Figma so account controls stay clear before users make high-stakes changes.
datePublished: 2026-06-14T00:00:00.000Z
dateModified: 2026-06-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-settings-and-permissions-copy-review-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-settings-and-permissions-copy-review-workflow-in-figma.md
---

# Settings and Permissions Copy Review Workflow in Figma

Settings screens usually look calm.

That is why teams underestimate them.

A permissions label is off by one word. A destructive action warning sounds too mild. A toggle description tells the user what the control is called but not what changes after they click it. Three different screens use "admin," "owner," and "workspace manager" as if those mean the same thing. Nobody notices during the happy-path review because the UI is tidy and the copy is short.

Then support tickets arrive.

That is why settings and permissions copy deserves its own review workflow.

[CopyDoc](/copydoc/) is a strong fit here because the risky language is rarely concentrated in one frame. It is scattered across account settings, role management, notification preferences, access dialogs, billing ownership states, and confirmation modals. Exporting that copy for structured review is much safer than trying to inspect it piecemeal in Figma. The current library already covers nearby issues like [Form Microcopy Review Workflow in Figma](/articles/copydoc-form-microcopy-review-workflow-in-figma/), [UI Character Limit Review Workflow in Figma](/articles/copydoc-ui-character-limit-review-workflow-in-figma/), and [Figma Terminology Audit Workflow](/articles/copydoc-figma-terminology-audit-workflow/). This article is narrower: it is about settings and permissions, where the consequence of unclear language is usually user confusion, accidental misconfiguration, or support load.

## Group the copy by decision type, not by screen

The easiest way to miss the real problem is to review one settings page at a time.

That hides the patterns.

I prefer grouping settings copy into decision families:

- roles and permission labels
- destructive actions and confirmations
- notification or preference explanations
- access requests and sharing states
- billing or workspace ownership notices
- integration and security settings

Once the strings are visible together, mismatches become obvious much faster.

For example:

- one screen says "Only admins can edit this"
- another says "Workspace owners can change these settings"
- a modal says "Contact your account manager"

Those may all be correct in isolation. They may also reflect an inconsistent permission model that the product UI is currently teaching badly.

This is where [CopyDoc](/copydoc/) is useful operationally. The team can export the relevant strings, review them together in a spreadsheet or document, and then reapply the approved wording systematically instead of fixing each screen ad hoc.

## Review what the user is deciding, not only what the interface is naming

A settings screen is full of hidden consequences.

That is what makes the copy hard.

The label on a toggle may be short, but the user still needs to understand:

- what changes when it turns on
- what stops happening when it turns off
- whether the change affects only them or the whole workspace
- whether the action is reversible
- whether another person or role is involved

This is why settings copy often fails even when it is concise. It names the control without explaining the consequence.

The best review questions are usually:

- Does this help the user predict the outcome?
- Does it identify who is affected?
- Does it warn proportionally when the action is high risk?
- Does it still make sense out of context in a text export?

That last test matters because vague settings copy often sounds acceptable when paired with a polished layout but collapses immediately when reviewed as plain text.

## Roles and permissions need a vocabulary standard

Permissions copy drifts faster than most product language because many teams touch it:

- product
- design
- security
- support
- billing or admin surfaces

Once the role vocabulary drifts, the UI becomes harder to trust.

I like to define a tiny permissions glossary during review:

- the canonical name of each role
- what each role can broadly do
- which adjacent terms are not interchangeable

Without that glossary, teams create phrasing like:

- "admins can manage members"
- "owners can manage billing"
- "editors can update workspace details"
- "workspace managers can invite users"

Maybe all four are valid. Maybe two of them refer to the same real role. The user should not have to decode that.

This is why [Figma Terminology Audit Workflow](/articles/copydoc-figma-terminology-audit-workflow/) is such a strong adjacent process. Settings screens are one of the fastest places for terminology drift to become visible and expensive.

## Stress-test the copy with realistic lengths and ugly cases

Settings UI often breaks under very ordinary real-world conditions:

- a long workspace name
- a long role label
- a translated warning
- a multiline helper text explanation
- a destructive action that needs one more clarifying clause

These are not edge cases. They are the real product.

That is why the settings review should not stop at wording accuracy. It also needs one visual pass with realistic content lengths in place. If the approved language pushes a permissions row into awkward wrapping or makes a destructive-action modal harder to scan, the team needs to see that before release.

For layout-sensitive cleanup, [UI Character Limit Review Workflow in Figma](/articles/copydoc-ui-character-limit-review-workflow-in-figma/) is the closest supporting article.

## Decide who owns the final word on risky settings

Not every settings string needs the same reviewer.

Some need product clarity first.
Some need support input.
Some need legal or security review.

That ownership should be visible before the review round starts, especially for:

- billing responsibility language
- consent or data retention controls
- destructive actions
- access and invite logic
- security and authentication settings

If the review loop is fuzzy, settings copy becomes one of those surfaces that keeps getting "small tweaks" without ever receiving a real signoff. That is how confusing language survives launch.

## A practical review loop for settings copy

For teams already designing these surfaces in Figma, the workflow can stay light:

1. Export settings, roles, and permissions strings with [CopyDoc](/copydoc/).
2. Group them by decision type instead of reviewing screen by screen.
3. Approve a shared vocabulary for roles, warnings, and ownership language.
4. Re-import the approved copy and run one visual pass with realistic lengths.
5. Escalate only the genuinely high-risk strings to legal, security, or billing owners.

Before release, confirm:

- role names are consistent everywhere
- helper text explains consequences, not only labels
- destructive actions sound proportionate to the risk
- settings rows still scan well with real copy lengths
- ownership language is clear when an action affects other users or the whole workspace

Settings and permissions copy is not glamorous work.

It is trust work.

That is why [CopyDoc](/copydoc/) helps so much here. It gives teams a structured way to gather, review, and reapply language that would otherwise stay scattered across quiet corners of the UI. If your account settings keep generating avoidable confusion, the fix is usually not a smarter sentence on one page. It is a better cross-screen review system that treats roles, permissions, and consequences as one connected language set.

---

---
type: article
title: Gmail Clipping Prevention Workflow in Figma
description: Design and export HTML emails from Figma with a workflow that reduces the risk of Gmail clipping long campaigns before they reach subscribers.
datePublished: 2026-06-14T00:00:00.000Z
dateModified: 2026-06-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-gmail-clipping-prevention-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/emailify-gmail-clipping-prevention-workflow-in-figma.md
---

# Gmail Clipping Prevention Workflow in Figma

Gmail clipping is one of those email problems that feels mysterious until it happens to your team twice.

The campaign looks approved.
The preview seems fine.
The HTML uploads successfully.
Then a subscriber opens the email in Gmail and sees a truncated message with a "View entire message" link. Sometimes the damage is mostly cosmetic. Sometimes the cutoff lands near legal copy, footer content, or a key closing CTA and turns a polished send into something much less trustworthy.

That is why Gmail clipping is not just a code problem. It is a workflow problem.

[Emailify](/emailify/) is a strong fit because it keeps email design and export close to the Figma source. That makes it easier to catch the structural causes of oversized emails before the HTML has already been shipped into the ESP. The current library already covers nearby topics like [Modular Email Template Workflow in Figma](/articles/emailify-modular-email-template-workflow-in-figma/), [Mobile Email QA Workflow Before Export](/articles/emailify-mobile-email-qa-workflow-before-export/), and [HTML Email Handoff Checklist for Designers and Marketers](/articles/emailify-html-email-handoff-checklist-for-designers-and-marketers/). This article is specifically about reducing clipping risk in Gmail-heavy workflows.

## Treat clipping as a content-system warning, not a last-mile accident

Teams often respond to clipping only after export:

- strip a few lines
- remove one section
- resend a test

That can work once.

It does not solve the pattern.

Clipping risk usually comes from the way the campaign was assembled:

- too many repeated modules
- several near-duplicate sections for segmentation or personalization
- verbose intro copy that could have been shorter
- oversized footers or disclosure blocks
- campaigns trying to do five jobs at once

The fastest fix is often editorial, not technical.

If one email is carrying a launch announcement, feature education, cross-sell promotion, customer story, and three product cards, the problem started before export.

## Design one deliberate message, not every possible variation

This is where Figma discipline matters more than people expect.

A Gmail-safe campaign usually gets simpler when the team asks:

- What is the one primary action?
- Which modules are essential to earn that action?
- Which sections are nice to have but not necessary?
- Which repeated patterns should be replaced by a clearer single section?

That does not mean every email must be short. It means every section must justify its weight.

Campaigns that are especially likely to clip are often the ones built from a "just add one more module" mindset. A reusable component system is valuable, but the library should not pressure the team into using every available block in one send.

This is one reason the modular approach in [Emailify Modular Email Template Workflow in Figma](/articles/emailify-modular-email-template-workflow-in-figma/) matters so much. Modular systems are strongest when they help teams choose intentionally, not when they encourage longer and longer emails by default.

## Watch the highest-risk sections first

Not every part of the email contributes equally to clipping risk.

The most common troublemakers are:

- repeated product grids
- stacked testimonial or content cards
- long legal or regional footer variations
- duplicated desktop and mobile treatments that could be simplified
- dense navigation or multi-offer promo headers

That does not mean those modules are always wrong. It means they deserve more scrutiny than teams usually give them.

For example, a lifecycle email may truly need several content blocks. But it may not need:

- a second intro paragraph
- a full secondary hero
- duplicate reminder text before every CTA
- a long "just in case" footer explanation that belongs on the landing page instead

If the email must carry heavy content, be stricter about what stays visible versus what belongs in the follow-up destination.

## Reduce duplication before you reduce polish

When teams panic about clipping, they often remove the prettiest content first because it feels easiest.

That is not always the right tradeoff.

Start by looking for repetition:

- two sections saying nearly the same thing
- separate modules for desktop emphasis and mobile emphasis
- repeated brand reassurance copy
- redundant footer explanations
- stacked product cards that should be linked to a single collection page

Once that repetition is gone, the email often gets much leaner without losing persuasion.

Only after that would I cut genuinely useful content or important visual structure. A clearer message usually beats a more complete message when inbox space and Gmail behavior are both working against you.

## Review the exported HTML before the ESP upload

[Emailify](/emailify/) removes a lot of hand-coding pain, but it does not remove the need to inspect the final artifact before send.

For clipping risk, the pre-upload review should include:

- opening the exported email in the browser preview
- checking whether the campaign feels longer than it needs to be
- reviewing whether hidden or duplicate sections were added for layout reasons
- testing the HTML in the actual Gmail-related QA path your team uses

If Gmail is a critical client for the campaign, it is worth pairing this workflow with the testing steps from [how to test HTML emails in Gmail with exports from Figma using Emailify](/tutorials/how-to-test-html-emails-in-gmail-with-exports-from-figma-using-emailify/).

The key here is not chasing a perfect technical threshold in the abstract. It is making clipping risk visible before the email disappears into the ESP and becomes harder to reason about.

## Build a clipping-prevention rule into campaign planning

This is the habit that makes the biggest difference over time.

If your team sends:

- long newsletters
- product roundups
- multi-offer promos
- heavy lifecycle digests
- multi-brand campaigns with several footer variants

then Gmail clipping should be part of the campaign planning checklist, not an emergency QA note.

I like to add one planning question near the start:

"If this message gets too large, which section leaves first?"

If nobody can answer that, the campaign probably has not been prioritized clearly enough yet.

## A practical anti-clipping workflow

For teams designing in Figma and exporting with [Emailify](/emailify/), this sequence is usually enough:

1. Define the one primary goal of the send before assembling modules.
2. Remove repeated or low-value sections while the campaign is still in Figma.
3. Review high-risk areas like long footers, stacked cards, and duplicate layout treatments.
4. Export and inspect the final HTML before uploading it into the ESP.
5. Run a Gmail-oriented QA pass when the campaign is close to clipping territory.

Before shipping, confirm:

- the email has one clear narrative instead of several competing ones
- the footer and compliance sections are necessary, not inflated
- repeated modules have been collapsed where possible
- the HTML preview still feels intentional rather than overstuffed
- Gmail-heavy campaigns have been reviewed with clipping risk in mind

Gmail clipping is frustrating because it shows up late and feels arbitrary.

In reality, it usually reflects earlier choices about scope, duplication, and discipline. [Emailify](/emailify/) gives teams a better place to make those decisions while the email is still a design system and not yet a rushed export artifact. If your campaigns keep getting clipped in Gmail, do not only trim the final HTML. Tighten the message architecture upstream in Figma and the problem gets much easier to control.

---

---
type: article
title: Legacy PowerPoint Deck Redesign Workflow in Figma
description: Bring old PowerPoint decks into Figma so teams can modernize the story, rebuild reusable slide patterns, and still hand back editable presentations.
datePublished: 2026-06-14T00:00:00.000Z
dateModified: 2026-06-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-legacy-powerpoint-deck-redesign-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-legacy-powerpoint-deck-redesign-workflow-in-figma.md
---

# Legacy PowerPoint Deck Redesign Workflow in Figma

Most old PowerPoint decks are not actually dead.

They are undead.

They keep resurfacing for board meetings, sales calls, partner pitches, fundraising updates, internal briefings, or conference submissions. Everyone agrees the deck looks dated. Nobody wants to recreate it from scratch. So the team clones the least embarrassing version, edits a few slides, and quietly makes the problem worse.

That is why legacy deck redesign is its own workflow.

[Pitchdeck](/pitchdeck/) is especially useful here because it is not only about exporting polished Figma presentations outward. The tutorial library also shows how to import older slide files into Figma, which makes it practical to recover the usable structure from an inherited PowerPoint before redesign begins. If you need the mechanical import step, [how to import PowerPoint (.pptx) to Figma Slides using Pitchdeck](/tutorials/how-to-import-power-point-pptx-to-figma-slides-using-pitchdeck/) is the most direct walkthrough. This article is about what to do after that import so the redesign becomes a durable presentation system instead of a prettier one-off file.

## Decide whether the deck needs a redesign, a cleanup, or a rebuild

The first mistake is treating every stale deck like the same job.

Some decks mostly need:

- typography cleanup
- better hierarchy
- updated charts
- consistent image treatment
- export flexibility

Other decks have deeper problems:

- the narrative is outdated
- the slide order no longer matches the actual conversation
- the design system is inconsistent
- the proof points are duplicated across disconnected versions

Those are different levels of work. If you do not classify the problem first, the team either over-designs a deck that only needed hygiene or under-designs one that needs a real structural reset.

I like to ask three questions before the redesign starts:

1. Which slides still carry real narrative value?
2. Which slide patterns repeat often enough to deserve reusable components?
3. Which output formats will stakeholders still require after the redesign?

That last question matters a lot. If the final deck still needs to become PowerPoint, PDF, and a shareable web presentation, the redesign has to protect those outcomes from the beginning instead of treating them as a final export inconvenience.

## Import the old deck to recover structure, not to preserve every habit

Inherited PowerPoint usually contains more signal than teams admit.

Not visual signal, necessarily. Structural signal.

There may already be:

- a workable section rhythm
- recurring proof patterns
- a familiar agenda sequence
- common objections the deck answers well
- slide titles that reflect how the audience actually thinks

That is worth recovering.

What is not worth protecting blindly:

- cramped layouts designed for a different brand era
- decorative filler slides
- redundant executive-summary pages
- charts nobody trusts anymore
- copied appendix material that should be modular instead

The import step is helpful because it lets the team start from the real legacy material instead of manually retyping or screenshotting the old file. But the redesign should still behave like a selective salvage job, not like a museum restoration.

## Separate the stable deck spine from the volatile slides

This is the biggest operational win in most redesigns.

A legacy deck usually contains two layers:

The stable spine:
- intro or context slides
- narrative framing
- product or company overview
- repeated proof structures
- closing or next-step patterns

The volatile layer:
- metrics
- logos
- customer examples
- roadmap snapshots
- account-specific context
- pricing or packaging details

When teams redesign both layers with the same level of polish and rigidity, the deck becomes fragile again immediately. Somebody changes one number, one customer story, or one meeting audience, and the carefully redesigned file begins drifting on day two.

[Pitchdeck](/pitchdeck/) works best when the stable spine becomes a reusable Figma system and the volatile slides stay deliberately easy to refresh.

This is one reason [Presentation Handoff Checklist for Designers](/articles/pitchdeck-presentation-handoff-checklist-for-designers/) is a useful companion piece. Legacy redesign is not finished once the slides look better. The deck still needs to survive edits by people who were not part of the redesign.

## Rebuild patterns before polishing individual slides

The temptation is to start beautifying the ugliest slide first.

That usually produces one great slide and a messy deck.

It is more effective to identify the slide patterns that repeat:

- full-bleed statement slides
- two-column comparison slides
- quote or proof slides
- chart slides
- agenda or section divider slides
- product screenshot slides
- appendix reference slides

Once those patterns are rebuilt intentionally in Figma, the rest of the redesign gets much faster and much more consistent. The deck starts behaving like a system instead of a stack of heroic one-off layouts.

This is also where the old PowerPoint becomes useful again. It shows which patterns the team actually uses in practice, not only which patterns look nice in a template library.

## Choose the final delivery mode before the redesign is "done"

Legacy decks tend to break during handoff, not during design.

One stakeholder wants a hosted link.
Another wants an editable PowerPoint.
Finance asks for a PDF.
An executive wants to tweak one slide five minutes before the meeting.

Those are not edge cases. They are normal presentation reality.

That is why the team should decide early whether the redesigned deck needs to support:

- live web presentation
- PowerPoint handoff
- PDF leave-behind
- Google Slides collaboration
- presenter notes or analytics

If you are weighing those tradeoffs, [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/) is the most relevant follow-up.

## A cleaner redesign rhythm for inherited decks

When an old PowerPoint deck needs to become a maintainable Figma-based system, this sequence usually works well:

1. Import the existing `.pptx` to recover structure and real content.
2. Mark which slides are worth keeping, combining, or retiring.
3. Separate stable narrative patterns from volatile proof or data slides.
4. Rebuild the repeated slide types first.
5. Modernize the visual system only after the structural patterns are clear.
6. Test the final handoff path in the format the team will actually need afterward.

Before closing the redesign, confirm:

- outdated slides are retired instead of merely hidden
- the most frequently edited slides are easy to update safely
- the final deck has one obvious source of truth in Figma
- export needs were planned before handoff
- the new design system improves the next deck, not just this one

Old PowerPoint decks do not become manageable because someone spends a weekend making them prettier.

They become manageable when the team uses the redesign to create a better operating model for presentations. That is where [Pitchdeck](/pitchdeck/) earns its keep. It gives teams a way to recover legacy slide value, move the deck into Figma, and still hand back the formats stakeholders expect. If your organization keeps recycling tired PowerPoints because nobody has time to rebuild them well, this is the workflow that turns redesign into infrastructure instead of decoration.

---

---
type: article
title: Checkout Flow QA Workflow from Figma
description: Compare checkout implementations against Figma before launch so trust-critical layout drift gets caught while fixes are still cheap.
datePublished: 2026-06-14T00:00:00.000Z
dateModified: 2026-06-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-checkout-flow-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-checkout-flow-qa-workflow-from-figma.md
---

# Checkout Flow QA Workflow from Figma

Checkout pages punish small mistakes harder than most interfaces do.

A minor spacing issue on a marketing page can be annoying.
A minor spacing issue next to the order total, trust badges, coupon state, or payment CTA can feel risky.

That is why checkout QA should not rely on "looks close enough."

[Pixelay](/pixelay/) is a strong fit for this kind of review because checkout flows usually live on staging environments, preview links, or authenticated routes where the real browser implementation matters more than a static screenshot. The existing library already covers adjacent workflows like [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/), [Pull Request Design QA Workflow for Frontend Teams](/articles/pixelay-pull-request-design-qa-workflow-for-frontend-teams/), and [Visual Bug Report Workflow for Frontend Teams](/articles/pixelay-visual-bug-report-workflow-for-frontend-teams/). This article is specifically about checkout, where hierarchy, reassurance, and state changes directly affect conversion and trust.

## Build a state map before opening the overlay

The fastest way to make checkout QA confusing is to compare one live state against one ideal design frame and assume the job is done.

Checkout is usually a matrix of states:

- empty or incomplete step
- valid form step
- validation error state
- discount or promo state
- mobile layout
- logged-in versus guest flow
- different cart contents or plan selections

That does not mean every state needs a full design-review ceremony. It does mean the team should define which states are critical enough to compare intentionally.

I like to create a simple map:

| Checkout state | URL or route | Matching Figma frame | Risk note |
| --- | --- | --- | --- |
| desktop default | staging checkout | checkout desktop | main hierarchy |
| mobile default | staging checkout mobile | checkout mobile | sticky CTA and spacing |
| validation error | checkout error state | error frame | field messaging |
| coupon applied | checkout with discount | discount frame | totals and alignment |

Once that map exists, Pixelay comparisons become much more objective. The reviewer is no longer asking "does this feel roughly right?" They are checking whether a known implementation state matches a known design state.

## Prioritize the trust-critical areas first

Not every checkout mismatch deserves the same urgency.

The highest-value review areas are usually:

- order summary hierarchy
- price, discount, or renewal messaging
- CTA prominence
- error placement and readability
- spacing around payment or confirmation controls
- trust, security, or reassurance blocks

Those are the elements that influence confidence while the user is making a high-stakes choice.

This is why overlay-based QA is so useful for checkout. Pixelay makes it easier to see whether the real implementation preserved the intended emphasis or quietly shifted it. A summary card that moves lower, a button that visually weakens, or an error message that collapses the field spacing can all change how safe the flow feels even if the code is technically working.

## Stabilize the browser state before comparing

Checkout flows are noisy by default.

They may include:

- prefilled account data
- region-specific copy
- sticky elements
- experimental banners
- analytics or support widgets
- dynamic totals

If the browser state is unstable, the overlay becomes less useful because the visual differences are mixed with environment noise.

A short stabilization pass helps a lot:

- use a repeatable test account or seeded cart
- lock the browser zoom and viewport
- disable non-essential overlays when possible
- confirm the same promo or pricing conditions as the Figma frame
- choose the exact breakpoint that matters

If the flow sits behind login or needs seeded state, the setup guidance from [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/) is the best companion process.

## Mobile checkout deserves its own review, not a derivative one

Desktop checkout can look excellent while mobile quietly degrades the trust layer.

The most common mobile risks are not dramatic. They are subtle:

- totals pushed too far below the fold
- cramped field labels
- error text colliding with inputs
- sticky summary behavior that covers key content
- CTA spacing that feels accidental near the safe-area edge

This is why I do not treat mobile as a resized version of desktop review. It is a separate state with different pressure points.

For Pixelay-based review, that means:

- compare against the real mobile Figma frame
- test the narrow breakpoint the team actually ships
- capture evidence at the specific width where the issue appears

That last part matters because vague tickets like "mobile checkout feels off" waste everybody's time.

## Turn checkout findings into evidence, not opinion

Checkout disagreements can get emotional quickly because they sit close to conversion, trust, and revenue.

The best way to keep the discussion productive is to make the findings concrete:

- exact route or step
- exact breakpoint
- exact checkout state
- matching Figma frame
- overlay or evidence screenshot
- why the mismatch matters

For example:

"The applied-coupon state pushes the order total below the original visual grouping at 390px wide, which makes the purchase summary feel less stable right before the CTA."

That is much more actionable than:

"Checkout spacing seems weird on mobile."

If your team already has a noisy fix queue, [Visual Bug Report Workflow for Frontend Teams](/articles/pixelay-visual-bug-report-workflow-for-frontend-teams/) is the best follow-up resource.

## A practical checkout QA loop

For most product teams, this is enough:

1. Define the important checkout states and map each to a Figma frame.
2. Stabilize the browser context with repeatable test data.
3. Use [Pixelay](/pixelay/) to compare the real checkout at the exact breakpoint that matters.
4. Prioritize trust-critical differences before cosmetic ones.
5. Capture evidence with route, state, width, and rationale before filing fixes.

Before launch, confirm:

- key checkout states have each been compared against the right Figma frame
- totals, discounts, and CTA hierarchy still match the design intent
- mobile checkout has been reviewed as its own experience
- error states do not break rhythm or reassurance
- every flagged issue includes enough evidence to fix quickly

Checkout QA gets expensive when it happens too late and too vaguely.

[Pixelay](/pixelay/) gives teams a better way to make that review visual, state-aware, and evidence-based while the flow is still on staging and the fix is still cheap. If your checkout pages keep shipping with "small" design drift that somehow feels bigger in production, treat the flow like a trust surface, map the states deliberately, and compare the real implementation against Figma before the release is locked.

---

---
type: article
title: Webflow Image Optimization Workflow from Figma
description: Prepare Webflow-ready images from Figma with clearer export budgets, sharper crops, and less trial-and-error after upload.
datePublished: 2026-06-14T00:00:00.000Z
dateModified: 2026-06-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-webflow-image-optimization-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-webflow-image-optimization-workflow-from-figma.md
---

# Webflow Image Optimization Workflow from Figma

Webflow makes it deceptively easy to publish images.

That is part of the problem.

A designer exports a hero image from Figma, a marketer uploads it into Webflow, the page goes live, and nobody notices the damage until later: the LCP image is too heavy, the CMS card crops the screenshot awkwardly, a logo strip turns soft on high-density screens, or the rich text article quietly accumulates a pile of oversized PNGs.

That is why a Webflow image workflow needs more than "export and upload."

[TinyImage](/tinyimage/) is a strong fit here because it keeps the compression and export decisions close to the Figma source instead of turning every Webflow publish into a second cleanup pass. The nearby article on [CMS Image Publishing Workflow from Figma](/articles/tinyimage-cms-image-publishing-workflow-from-figma/) covers the broader process. This article is narrower: it is specifically about preparing images for Webflow, where responsive layouts, CMS collections, and marketing ownership often collide.

## Start with the Webflow slot, not the original canvas

The most useful question is not:

"How big is the Figma frame?"

It is:

"Where will this image live in Webflow?"

A homepage hero, a collection card, a blog inline image, a testimonial headshot, and a product screenshot carousel all behave differently after upload. If the team exports everything from Figma at the same quality and dimension, Webflow does not magically fix the mismatch.

I like to define image groups based on the real destination:

- hero and feature-section images
- CMS thumbnail or card images
- inline blog or docs visuals
- product screenshots
- logos, icons, and simple graphics

That grouping makes export decisions much easier. A card thumbnail does not deserve the same file weight as a homepage hero. A product screenshot may need more detail than a decorative section divider. A logo strip may be better handled as SVG than as raster output at all.

If your team is still deciding between file types, [SVG vs PNG vs WebP for Figma Exports](/articles/tinyimage-svg-vs-png-vs-webp-for-figma-exports/) is the best companion read.

## Define budgets around real Webflow components

Teams often talk about "compressed enough" as if it were a feeling.

That is how pages get heavy.

For Webflow, it is more helpful to assign a target budget to each image family before export. Not because every image must land on the exact same number, but because the budget creates a useful default.

For example:

- a large marketing hero may justify a higher file size than a CMS card
- a product screenshot may need extra detail around text or UI chrome
- a decorative background image should usually be much lighter than teams expect

The point is not perfection. The point is preventing every uploader from improvising the tradeoff differently.

[TinyImage](/tinyimage/) helps because the compression choice can happen while the designer still has the original asset context in front of them. That is much better than discovering the problem after somebody has already uploaded a bloated export into Webflow and embedded it across half the site.

## Prepare crops for Webflow behavior, not only for Figma balance

Figma compositions often feel generous.

Webflow components often feel stricter.

That is especially true for:

- collection list cards
- side-by-side feature sections
- mobile stacks
- author or customer portraits
- screenshots inside fixed-ratio wrappers

An image that looks nicely centered in the design file may become awkward once the browser resizes the container or the CMS swaps in longer adjacent text.

This is where teams should review the crop intent explicitly:

- What must never be cropped out?
- Which whitespace is expendable?
- Does the image still make sense when the card gets shorter?
- If the image contains UI text, is that text still readable once the component shrinks?

This is one reason the existing [Product Screenshot Export Workflow for SaaS Landing Pages](/articles/tinyimage-product-screenshot-export-workflow-for-saas-landing-pages/) remains relevant. Product screenshots are unusually sensitive to soft text, bad crops, and oversized files. Webflow tends to expose those mistakes quickly because the same screenshots often get reused across multiple layouts.

## Make naming carry publishing context

The export file name should help the person publishing into Webflow, not only the person who designed it.

That usually means including enough context to answer:

- which page or collection this belongs to
- which section or block it supports
- whether it is desktop-specific, mobile-safe, or general-purpose
- whether it is a final marketing asset or a temporary placeholder

When teams export assets with vague names like `hero-final-2.png`, the confusion shows up later in the CMS. Someone uploads the wrong version, duplicates an old asset, or leaves obsolete images attached to a collection because nobody can tell which file is current.

If the team already handles more general website budgets across many templates, [Website Asset Compression Budget for Design Teams](/articles/tinyimage-website-asset-compression-budget-for-design-teams/) is the closest neighboring article.

## Review the uploaded result in Webflow before you batch the rest

One of the most common mistakes is exporting twenty images perfectly consistently and only then realizing the first upload still behaves badly in the live component.

Do a live spot check early.

Upload one representative example for each image family and confirm:

- the crop still feels intentional
- the image does not soften important UI or typography
- the section still loads quickly
- mobile layouts do not make the asset feel cramped
- any CMS card variants still look balanced once real copy is present

That last point matters a lot in Webflow because CMS-driven layouts often reveal the messiest combinations: a long title, a short summary, and a card image that was only reviewed against the ideal example.

## A practical Figma-to-Webflow rhythm

For teams publishing from Figma into Webflow every week, a lightweight rhythm is usually enough:

1. Group images by their real Webflow destination.
2. Assign a default file budget to each image family.
3. Export with [TinyImage](/tinyimage/) using the right format and compression for that destination.
4. Upload one representative example into Webflow before bulk publishing the rest.
5. Fix crop or budget issues once in the preset instead of relearning them asset by asset.

Before shipping a batch, confirm:

- hero images are not carrying the whole page weight by themselves
- CMS card thumbnails still read well at smaller sizes
- screenshots remain sharp enough to teach or sell
- decorative graphics are not heavier than functional product visuals
- filenames make sense to the person publishing in Webflow

Webflow is fast when the assets arriving in it are already intentional.

That is the real value of using [TinyImage](/tinyimage/) in this workflow. It does not remove judgment about crops, formats, or hierarchy. It moves those decisions upstream, while the team still has the design source open and the fix is still easy. If your Webflow pages keep accumulating heavy uploads and inconsistent image quality, standardize the export rules in Figma first. The site will feel sharper, faster, and much less improvised.

---

---
type: article
title: Fallback Asset Workflow for HTML5 Banner Campaigns
description: Prepare backup images, proof videos, and final HTML5 exports from one Figma banner system so ad ops and reviewers get the right asset for each stage.
datePublished: 2026-06-13T00:00:00.000Z
dateModified: 2026-06-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-fallback-asset-workflow-for-html5-banner-campaigns/
markdownUrl: https://www.hypermatic.com/articles/bannerify-fallback-asset-workflow-for-html5-banner-campaigns.md
---

# Fallback Asset Workflow for HTML5 Banner Campaigns

HTML5 banners are often treated like the only deliverable in the campaign package.

Then the real handoff begins and everybody asks for something else:

- a backup image for the platform workflow
- a proof video for stakeholders who will not open HTML previews
- a lightweight review asset for Slack or email
- a clean fallback for placements or vendors with stricter rules

That is why banner campaigns get messy even when the creative itself is solid. The problem is not only how to build the HTML5 ad. It is how to package the supporting assets without redoing the work manually.

[Bannerify](/bannerify/) is a strong fit here because the product page and tutorial library already cover HTML, GIF, MP4, preview-link, platform-export, and trafficking workflows directly from Figma. The nearby articles [When to Use HTML5 vs GIF vs MP4 Banner Exports](/articles/bannerify-when-to-use-html5-vs-gif-vs-mp4-banner-exports/) and [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/) cover format choice and ad-ops delivery. This article is narrower: it is about creating a fallback asset system around the HTML5 campaign so review, approval, and upload do not all depend on the same file type.

## Start by separating asset roles

The biggest mistake is treating every extra file as a generic "backup."

Different supporting assets do different jobs:

- `primary delivery`: the HTML5 banner package used for trafficking
- `fallback still`: a static backup image where the workflow requires one
- `proof asset`: a video or simple preview for quick stakeholder review
- `reference asset`: a screenshot or contact sheet showing the approved variant

Once those roles are clear, the export decisions get easier.

A stakeholder review clip does not need the same packaging as the ad-ops upload. A backup still should not be chosen with the same criteria as a performance-minded HTML5 export. When teams mix those jobs together, they either overproduce assets or send the wrong thing to the wrong person.

## Plan the fallback strategy while the banner is still being designed

Fallback assets work best when the banner system anticipates them.

That means asking early:

- Which frame of the animation could stand alone as a static still?
- If the HTML cannot be previewed easily, should the reviewer get an MP4 proof?
- Do all variants communicate the offer clearly in a static frame as well as in motion?
- Does legal or disclaimer copy remain readable in the fallback state?

This matters a lot for:

- platform-sensitive media buys
- approvals that happen over email or Slack
- campaigns with many localized or audience-specific variants
- teams where media and design are separate functions

If the static fallback is treated as an afterthought, the chosen frame is often the wrong one: midway through an animation, before the CTA settles, or before the legal language is actually readable.

## Pick one "proof moment" per variant

A useful fallback workflow starts with a deliberate proof moment.

For each banner variant, identify the state that best answers:

What should a stakeholder understand if they only see one frame?

That frame usually needs:

- the offer visible
- the brand recognizable
- the CTA legible
- any critical disclaimer present if required

This is different from asking which frame is visually prettiest. The prettiest frame is often not the most operationally useful proof asset.

For disclaimer-heavy work, the related [Regulated Display Ad Disclaimer Workflow](/articles/bannerify-regulated-display-ad-disclaimer-workflow/) is worth reviewing so the fallback choice does not quietly undermine the compliance requirement.

## Match the supporting asset to the stage of the workflow

Different people in the process need different levels of fidelity.

### Stakeholder approval

Usually needs:

- quick proof videos
- preview screenshots
- one simple asset they can view without platform friction

### Ad ops or media trafficking

Usually needs:

- the final HTML5 package
- clearly named variants
- any fallback stills required by the media workflow
- short notes on click handling or destination URLs

### Internal archive or future reuse

Usually needs:

- one reference bundle showing what actually launched
- predictable naming by size, market, and variant

The asset plan should reflect those differences. If the only proof asset is the final HTML5 zip, too many reviewers will either skip the review or review the wrong thing.

## Keep the naming consistent across primary and fallback files

Supporting assets only reduce confusion if the naming makes the relationships obvious.

Examples:

- `summer-sale_us_300x250_html5.zip`
- `summer-sale_us_300x250_fallback.jpg`
- `summer-sale_us_300x250_proof.mp4`
- `summer-sale_us_300x250_reference.png`

That naming system answers four questions immediately:

1. Which campaign is this for?
2. Which market or variant does it belong to?
3. Which placement is it for?
4. What role does this file play?

Without that structure, the package degenerates into vague files like `final-approved-v2.mp4`, which is how fallback assets stop helping and start causing rework.

## QA the fallback asset as a real deliverable

Teams often QA the HTML carefully and barely review the supporting files.

That is backwards.

The fallback still or proof clip may be the only asset some stakeholders ever see. It needs its own checks:

- does it reflect the approved offer?
- is the CTA present and readable?
- does the proof clip show enough of the animation to make the concept clear?
- does the fallback still avoid mid-transition awkwardness?
- do the asset names match the HTML package exactly?

This is especially important for localized campaigns and spreadsheet-driven variants. One mislabeled still can create the impression that the wrong market creative was approved even if the HTML itself is correct.

If your team is already managing a lot of size and message variation, [Spreadsheet-Driven Banner Variant Workflow](/articles/bannerify-spreadsheet-driven-banner-variant-workflow/) is the closest supporting article.

## A practical asset matrix for campaign teams

For most campaigns, the workflow can be formalized into a small matrix:

- `HTML5 zip`: final trafficking asset
- `proof MP4`: quick stakeholder review
- `fallback still`: included only where required by workflow
- `reference image`: optional archive or QA proof

Not every campaign needs every output, but deciding that intentionally is much better than improvising after export.

For example:

- internal review-heavy campaign: HTML5 + proof MP4
- platform-sensitive campaign: HTML5 + fallback still + proof MP4
- simple social adaptation: MP4 or GIF may be enough without HTML5 at all

The point is not to produce more files. It is to produce the right supporting files once.

## Common mistakes that break the fallback workflow

The same problems show up repeatedly:

- choosing a static frame that does not communicate the offer
- forgetting that the fallback still needs readable disclaimers too
- naming proof assets differently from the HTML package
- sending the proof clip to ad ops instead of the final trafficking package
- assuming a backup asset is optional until a vendor asks for it at the last minute

These failures are small, but they create exactly the sort of launch-day scramble that makes campaign teams hate banner production.

## Where Bannerify helps most

[Bannerify](/bannerify/) is valuable here because the design, animation, and multi-format export workflow can stay inside Figma instead of splintering across several tools.

That creates a real opportunity: one creative system can produce the HTML5 campaign, the proof asset, and the fallback support files without manual recreation. But that only works if the team defines each output's job clearly.

If your banner launches keep getting slowed down by ad-ops requests, unclear proofs, or last-minute backup assets, build a fallback asset workflow around Bannerify. Decide the proof moment early, match each supporting file to a real stage of the process, and package the outputs so nobody has to guess which file is meant for what.

---

---
type: article
title: Figma to Photoshop Handoff Workflow for Retouching Teams
description: Hand off Figma layouts to Photoshop retouchers with clearer layer intent, asset prep, and export expectations so nobody has to rebuild the composition by hand.
datePublished: 2026-06-13T00:00:00.000Z
dateModified: 2026-06-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-figma-to-photoshop-handoff-workflow-for-retouching-teams/
markdownUrl: https://www.hypermatic.com/articles/convertify-figma-to-photoshop-handoff-workflow-for-retouching-teams.md
---

# Figma to Photoshop Handoff Workflow for Retouching Teams

Not every design workflow ends inside Figma.

Sometimes the layout, copy, and approvals all happen in Figma, but the next step still belongs to a retoucher. Maybe the photography needs compositing. Maybe the shadows and masks need more precise treatment. Maybe a brand team wants the final ad polished in Photoshop before it goes to print or paid media.

That handoff gets ugly fast when the only asset design sends is a flat export.

[Convertify](/convertify/) is a strong fit for this workflow because the product page explicitly supports exporting Figma files to Photoshop alongside Sketch, XD, InDesign, Canva, and other creative formats. The tutorial on [exporting Figma to Adobe Photoshop PSD files with one click using Convertify](/tutorials/how-to-export-figma-to-adobe-photoshop-psd-files-with-one-click-using-convertify/) covers the mechanics. This article is about the operational side: how to prepare the Figma file, what to clarify before export, and how to stop the retouch step from becoming a rebuild step.

## The real question is not "can we export a PSD?"

The real question is:

What does the retouching team need to keep editable?

That answer changes the preparation work.

Sometimes the retoucher mainly needs:

- clean background photography
- isolated image areas for color work
- layered headline and CTA regions
- separate art elements for compositing

Other times they need a closer translation of the layout because the final file will keep evolving outside Figma.

If nobody defines that expectation up front, the export gets judged against the wrong standard. Design thinks the handoff was done. Retouching thinks they were handed a visual reference instead of a workable file.

## Figma-to-Photoshop handoff is best for specific downstream jobs

This workflow makes the most sense when Photoshop is still the best place for the final polish:

- campaign key art that needs detailed image treatment
- ecommerce hero banners with heavy compositing
- paid social creative that still requires PSD delivery
- print or out-of-home assets where retouchers own the finishing pass
- brand-photo layouts where image adjustments matter more than code handoff

It is a different job from legacy migration. If you are trying to recover old source files into a durable Figma working system, [Legacy Design File Cleanup After Migration](/articles/convertify-legacy-design-file-cleanup-after-migration/) is the closer article. This workflow is about a live production handoff from a Figma-designed composition to a Photoshop finisher.

## Prep the Figma file around edit intent, not canvas neatness

The most helpful export is not always the visually tidiest one. It is the one that makes downstream editing obvious.

Before export, define:

- which layers are fixed and should not move
- which images are likely to be retouched or swapped
- whether text is still likely to change
- which masks or overlays are only reference treatment
- which parts of the design are optional production notes, not final art

That sounds procedural because it is. A retoucher should not have to reverse-engineer design intent from a gorgeous but ambiguous file.

Practical prep steps:

1. Replace temporary placeholders with the best available source assets.
2. Give important layers human names.
3. Remove exploratory duplicates that are no longer part of the approved direction.
4. Group elements by composition role, not by whatever history produced them.
5. Mark anything that is reference-only before export.

If the file started from mixed incoming formats or old vendor assets, [Client Design File Intake Checklist](/articles/convertify-client-design-file-intake-checklist/) is another good companion workflow.

## Agree on what "editable" means for this handoff

This is where teams get into trouble.

"Editable PSD" can mean very different things:

- the retoucher can tweak the imagery
- the copy remains easy to update
- the layout can still be adjusted by production
- the file is only editable enough for a finishing pass

Those are not the same promise.

I like to settle three questions before export:

1. Will Photoshop be the final source of truth after this handoff?
2. Is the retoucher expected to make layout changes or only image changes?
3. Does the file need to come back to design for another approval round?

Once that is clear, the exported PSD becomes easier to judge fairly. If the goal is finishing and polish, the file does not need to behave like a permanent multi-team design system artifact. It needs to be practical for the next production step.

## Package the export like a production delivery, not a favor

The retouch handoff usually needs more than the converted file.

A useful package often includes:

- the exported PSD
- linked or accompanying source assets if the team needs them separately
- a flat reference export showing the approved Figma composition
- notes on fonts, replacements, or non-negotiable layout areas
- one sentence about the goal of the retouch pass

That final note matters more than people think.

Examples:

- "Retouch photography only, keep layout locked."
- "Polish product shadows and background texture, headline may still change."
- "Final print prep will happen in Photoshop, Figma file is approved for structure only."

Without that clarity, the receiving team starts making assumptions. Those assumptions are where the rework usually comes from.

## Review the Photoshop handoff from the retoucher's point of view

Before sending the package, spot-check the deliverable with the questions the next team will ask:

- Can I tell which layers matter?
- Are the images I need actually usable?
- Am I supposed to preserve this exact composition?
- Is there a reference showing the approved look?
- What is still allowed to change?

That is a more valuable QA pass than staring at the file and declaring that "the export worked."

The handoff is only successful if the next team can start the real production step without opening a clarification thread first.

## Common failure modes in this workflow

The same mistakes repeat:

- exporting a flat reference when the retoucher needed an editable working file
- exporting before placeholder assets were replaced
- leaving layer names so vague that the file has to be re-interpreted
- assuming Photoshop is just a last-mile tweak when the downstream team actually owns major finishing decisions
- forgetting to include a visual reference of the approved Figma composition

That last one is especially painful. Even when the converted file is workable, production teams still need to know what "correct" looked like before they started modifying it.

## A reliable handoff rhythm

For recurring Figma-to-Photoshop work, this sequence is usually enough:

1. Lock the approved Figma composition.
2. Clarify the retouch team's editing scope.
3. Clean up layer naming and replace temporary assets.
4. Export to Photoshop with Convertify.
5. Bundle the converted file with a flat approved reference and any needed notes.
6. Run one final review from the receiver's point of view.

It is a lightweight workflow, but it prevents the most expensive kind of confusion: the kind that only appears after the retoucher is already deep into the file.

## Where Convertify helps most

[Convertify](/convertify/) matters here because it removes the brute-force redraw step between Figma and Photoshop. That alone saves time. But the bigger payoff comes when teams treat the export as part of a real handoff system instead of a magic button.

If your designers build compositions in Figma and your finishing team still lives in Photoshop, formalize the handoff. Define the edit intent, clean the file for the receiver, ship a reference with the export, and let Convertify bridge the format gap without forcing anybody to rebuild the layout from scratch.

---

---
type: article
title: Pricing and Billing Copy Review Workflow in Figma
description: Review pricing pages, upgrade modals, checkout states, and billing screens in Figma so plan names, trial language, and subscription copy stay consistent before launch.
datePublished: 2026-06-13T00:00:00.000Z
dateModified: 2026-06-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-pricing-and-billing-copy-review-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-pricing-and-billing-copy-review-workflow-in-figma.md
---

# Pricing and Billing Copy Review Workflow in Figma

Pricing copy almost never lives in one place.

A SaaS team changes a plan name, updates the trial terms, adds an annual-discount callout, and tweaks the upgrade CTA. Now that same change has to survive across:

- the public pricing page
- comparison tables
- upgrade modals
- checkout screens
- billing settings
- plan badges in product UI
- promotional screenshots used by marketing and sales

That is why pricing and billing copy goes stale so easily. The language is short, sensitive, and scattered across surfaces owned by different teams.

[CopyDoc](/copydoc/) is especially useful here because the plugin helps teams export, review, update, and re-import Figma text systematically instead of checking each plan card or billing modal by hand. The closest related articles in the library are [Form Microcopy Review Workflow in Figma](/articles/copydoc-form-microcopy-review-workflow-in-figma/), [UI Character Limit Review Workflow in Figma](/articles/copydoc-ui-character-limit-review-workflow-in-figma/), and [Word Doc Review Workflow for Figma Legal Copy](/articles/copydoc-word-doc-review-workflow-for-figma-legal-copy/). This article is narrower: it is about keeping subscription, pricing, and billing language aligned before users, finance, or legal expose the mismatch.

## Pricing copy breaks trust faster than most UI copy

An inconsistent empty state is annoying.

Inconsistent pricing language is more dangerous.

If one screen says:

- "Start free trial"

and another says:

- "Pay now"

and the billing modal quietly says:

- "Renews automatically after 14 days"

the problem is not only wording polish. It is expectation-setting.

Users are deciding whether to start a trial, upgrade, add seats, or commit budget. They need the language to line up across the whole path. Small wording differences create avoidable support tickets, internal confusion, and unnecessary purchase anxiety.

## Build one pricing-copy inventory before you rewrite anything

Reviewing pricing language screen by screen hides the actual problem.

A better workflow is to gather all pricing-related strings into one review surface:

- plan names
- plan descriptions
- monthly and yearly labels
- discount callouts
- trial language
- CTA buttons
- footnotes and billing disclaimers
- upgrade and downgrade confirmation copy
- seat-based pricing explanations
- billing-page helper text

Once those strings sit next to each other, the drift becomes obvious.

You can spot:

- two names for the same plan
- different explanations of the billing cycle
- inconsistent verbs around upgrade, subscribe, and start trial
- footnotes that explain different rules in different places
- screenshots or mocks still using retired packaging

This is one of the strongest cases for CopyDoc because the review needs breadth more than clever writing.

## Judge each string by the job it has to do

Pricing copy should not be evaluated with only a brand-tone lens. It needs to perform operational work.

I like to review each string against five jobs:

### 1. Identify the offer clearly

Can the user tell what the plan or state actually is?

Weak:

- "Pro"

Better when context is limited:

- "Pro plan"
- "Annual Pro plan"
- "Team plan for up to 10 users"

### 2. Set expectation honestly

Does the copy explain what happens next?

This is where trial and renewal language matters most. Ambiguity around billing is expensive, even when the interface looks polished.

### 3. Stay consistent across surfaces

If the checkout screen, pricing page, and in-product upgrade modal use different phrases for the same concept, the team has a governance problem, not a one-off copy issue.

### 4. Survive layout constraints

Pricing copy often sits in tight spaces:

- plan cards
- badges
- toggle labels
- checkout summaries
- billing tables

That is why short wording changes can break hierarchy or cause mobile wrapping issues surprisingly fast.

### 5. Reduce support burden

The best billing copy answers the obvious next question before the user asks support.

For example:

- when the trial starts
- when charges begin
- whether seats are per user
- whether billing is monthly or annual
- what happens after cancelation or downgrade

## Pricing changes need shared review, not design-only review

This is the main workflow mistake.

Pricing and billing language usually touches:

- product marketing
- product design
- growth or monetization
- finance or operations
- legal
- support

If design reviews the copy in isolation, the team may ship language that fits the card beautifully but misstates the billing reality. If legal reviews it too late, the UI may have to be reworked to fit required qualifiers.

CopyDoc helps here because exported text can move into a spreadsheet or document review loop without losing the connection back to the Figma designs. That makes it much easier to get approval on the language before somebody manually edits dozens of screens.

## Stress-test the risky strings, not just the final approved wording

Pricing copy deserves a stress test before launch.

Check what happens when:

- the annual savings callout gets longer
- the plan name changes
- the locale expands the string
- the trial message needs an added qualifier
- the legal note becomes one line longer than expected

These are the places where pricing UI often breaks:

- CTA buttons wrapping awkwardly
- toggle labels becoming ambiguous
- price rows losing hierarchy
- plan comparison bullets no longer aligning
- mobile billing modals pushing critical information below the fold

If this is a recurring problem, pair the review with the related [UI Character Limit Review Workflow in Figma](/articles/copydoc-ui-character-limit-review-workflow-in-figma/).

## Keep screenshots and marketing surfaces in the same review loop

One subtle problem: pricing copy often changes in product UI first and marketing visuals later.

That means outdated wording keeps leaking through:

- homepage screenshots
- launch graphics
- sales deck captures
- app store images
- onboarding mockups

The public pricing page may be corrected while the surrounding proof still shows old packaging or retired plan names. That damages credibility because it makes the business feel less coordinated than it is.

This is another reason to review pricing strings as a system rather than as isolated screen copy.

## A practical pricing review rhythm

For subscription-heavy products, this is the workflow I would standardize:

1. Export all pricing and billing strings from the relevant Figma surfaces.
2. Group them by plan, state, and funnel stage.
3. Review for consistency, expectation-setting, and legal accuracy.
4. Stress-test high-risk strings for length and mobile fit.
5. Re-import the approved copy back into the Figma source.
6. Do one final visual pass on pricing cards, checkout, and billing settings.

That rhythm is much calmer than trying to catch copy drift during a late-stage growth review or after support notices users are misreading the plan terms.

## A checklist before release

Before shipping a pricing or billing update, confirm:

- plan names match across marketing and product surfaces
- trial language describes the same billing behavior everywhere
- CTA verbs reflect the real next action
- annual, monthly, and seat-based wording is consistent
- footnotes and billing disclaimers are accurate and visible
- long strings still fit in plan cards, modals, and mobile states
- screenshots and supporting mockups no longer show retired copy

## Where CopyDoc helps most

[CopyDoc](/copydoc/) is valuable here because pricing copy drift is not a writing problem first. It is a coordination problem.

The strings are too scattered, too sensitive, and too easy to update inconsistently by hand. CopyDoc gives teams a way to pull that language together, review it in one place, and push the approved copy back into Figma without turning the cleanup into a manual hunt.

If your pricing page and billing UI keep falling out of sync, formalize the review. Treat plan language like a governed system, not a set of tiny one-off edits, and use CopyDoc to make that review fast enough to happen before launch instead of after confusion starts.

---

---
type: article
title: Email Platform Migration Workflow for Marketing Ops Teams
description: Move email templates between ESP workflows by keeping Figma as the source of truth so platform migration does not turn into a full redesign project.
datePublished: 2026-06-13T00:00:00.000Z
dateModified: 2026-06-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-email-platform-migration-workflow-for-marketing-ops-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-email-platform-migration-workflow-for-marketing-ops-teams.md
---

# Email Platform Migration Workflow for Marketing Ops Teams

An ESP migration sounds like a tooling project until the email team starts rebuilding templates one by one.

The platform changes from Mailchimp to Klaviyo. Or Braze to Salesforce Marketing Cloud. Or a startup outgrows one automation stack and moves to another. Suddenly the "migration" is not just about audiences, triggers, and reporting. It is about whether the team can preserve its email system without redoing every campaign layout under deadline.

That is why design-source discipline matters so much during email platform changes.

[Emailify](/emailify/) is a strong fit here because the product page and tutorial library cover a wide range of HTML email export destinations from Figma. The real advantage is not only that you can export to many platforms. It is that the core email design system can stay inside Figma while the delivery platform changes around it.

The current content library already covers adjacent workflows like [Email Template Governance for Marketing Teams](/articles/emailify-email-template-governance-for-marketing-teams/), [Figma Email QA Before ESP Upload](/articles/emailify-figma-email-qa-before-esp-upload/), and [Modular Email Template Workflow in Figma](/articles/emailify-modular-email-template-workflow-in-figma/). This article is specifically about migrations, where the risk is that platform switching quietly turns into months of template drift and manual recreation.

## The migration usually breaks at the template layer first

Teams often plan the operational parts carefully:

- audience migration
- sender domains
- automation logic
- deliverability setup
- analytics and attribution

Then they realize the template system itself is brittle.

Common problems:

- old modules only worked because of quirks in the previous ESP
- legal or footer blocks are inconsistent across campaigns
- image hosting assumptions changed
- merge-tag syntax is platform-specific
- nobody knows which email variants are canonical anymore

That is why the safest migration posture is to treat Figma as the source of truth for structure and content intent, then adapt the export and platform details around it.

## Start with a template inventory, not a redesign

The worst migration instinct is to say:

> Since we are changing platforms, maybe we should refresh all the email designs too.

That usually creates two hard projects instead of one.

Instead, begin with an inventory of what already exists:

- campaign templates
- lifecycle emails
- transactional or semi-transactional patterns
- shared headers and footers
- offer modules
- social proof or testimonial blocks
- legal sections
- region-specific variants

Then decide what belongs in each bucket:

- `keep as-is`
- `clean up during migration`
- `retire instead of migrating`

That decision keeps the project honest. Some templates should not be preserved forever just because they exist. But the migration should not become an excuse to rebuild everything by hand either.

## Separate platform-specific tokens from layout decisions

This is the critical step.

Most email systems mix three different layers:

- visual structure
- copy and content logic
- ESP-specific syntax

When those get tangled together, every platform migration feels bigger than it is.

For each template, identify:

- which copy blocks are universal
- which modules are recurring design patterns
- which merge tags, dynamic blocks, or URLs are platform-dependent

That makes it easier to preserve the valuable parts of the system while swapping the destination-specific details later.

If your team already struggles with recurring component sprawl, [Figma Email Design System Checklist](/articles/emailify-figma-email-design-system-checklist/) is a useful supporting read before the migration accelerates.

## Use one Figma system to pilot the hardest templates first

Do not start with the easiest newsletter.

Start with the templates most likely to expose migration pain:

- a lifecycle email with conditional or personalized sections
- a multi-module marketing campaign
- a template with several legal or footer requirements
- a mobile-sensitive layout with stacked content

Why start there?

Because the migration risks usually hide in:

- token replacement
- module behavior
- mobile rendering
- approval flow

If the hardest template works cleanly from the Figma source, the simpler ones usually follow with much less drama.

Emailify is helpful here because the design team can stay in Figma while iterating on exports for the new platform instead of bouncing between several builders and hoping the system still feels coherent.

## Review assumptions the old platform was hiding

Every email platform quietly teaches the team habits.

Some examples:

- image-hosting defaults nobody documented
- fallback text patterns that only worked in one builder
- button or spacing workarounds normalized by the old ESP
- merge-tag syntax baked into copied modules
- proofing habits tied to one preview tool

Migration is the right time to expose those assumptions instead of carrying them forward invisibly.

This is especially important for mobile review, dark mode, and legal or footer behavior. The design may still be sound, but the operational assumptions around it may need rewriting.

If mobile risk is high for your templates, [Mobile Email QA Workflow Before Export](/articles/emailify-mobile-email-qa-workflow-before-export/) is the closest companion article.

## Build a migration matrix the team can actually use

One lightweight spreadsheet or doc can save the project:

- template name
- owner
- send type
- old platform location
- Figma source file or module reference
- new-platform status
- token updates needed
- QA status

That prevents the common migration problem where five people assume the same template is someone else's responsibility.

Even better, it keeps the Figma system connected to the platform rollout. Without that link, design and marketing ops drift apart and start solving the same template problem in different places.

## Compare the new export to the old live output, not just to the canvas

This is where teams catch the subtle issues.

A migration QA pass should compare:

- Figma source
- old sent or approved version
- new platform-ready export

That reveals whether the gap is actually caused by the new platform, by the export logic, or by old inconsistencies nobody noticed before.

Look closely at:

- section spacing
- button treatment
- footer completeness
- image behavior
- merge-tag placement
- preheader handling
- long content stress on mobile

Once the export looks good, finish with the broader handoff checks in [Figma Email QA Before ESP Upload](/articles/emailify-figma-email-qa-before-esp-upload/).

## A migration checklist worth formalizing

Before calling a template successfully migrated, confirm:

- the Figma source reflects the current approved design
- platform-specific tokens are updated for the new ESP
- footer, legal, and preference-link requirements are correct
- the mobile layout still holds up with real content
- deprecated modules were retired instead of ported blindly
- ownership is clear for future edits
- the new platform version has been reviewed as a real sending artifact

That last point matters. A template is not "migrated" just because it exists in the new ESP. It is migrated when the team trusts it enough to use it repeatedly.

## Where Emailify helps most

[Emailify](/emailify/) is valuable in an ESP migration because it gives the team a calmer center of gravity. The destination platform can change. The email system does not have to dissolve with it.

If your migration plan currently assumes reworking every template manually in the new builder, stop and recentre the workflow around the Figma source. Preserve the design system, isolate the platform-specific pieces, test the hardest templates first, and let Emailify shorten the distance between the approved Figma layout and the new sending environment.

---

---
type: article
title: Executive Briefing Deck Workflow for Enterprise Sales Teams
description: Build executive briefing decks in Figma that sales teams can tailor quickly for high-stakes enterprise meetings without rebuilding the presentation in PowerPoint.
datePublished: 2026-06-13T00:00:00.000Z
dateModified: 2026-06-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-executive-briefing-deck-workflow-for-enterprise-sales-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-executive-briefing-deck-workflow-for-enterprise-sales-teams.md
---

# Executive Briefing Deck Workflow for Enterprise Sales Teams

Enterprise executive briefings are rarely the same as normal sales decks.

The meeting is shorter. The audience is less patient. The account context changes at the last minute. A field seller wants one version, a solutions consultant wants another, and somebody always asks for an editable file after design thought the deck was already done.

That is why a generic "sales presentation workflow" usually breaks down at the executive-briefing stage.

[Pitchdeck](/pitchdeck/) is a strong fit here because the product page explicitly supports building presentations in Figma and exporting them to PowerPoint, Google Slides, PDF, Keynote, or hosted web decks with analytics. For enterprise briefings, that flexibility matters because one source deck often has to support live presenting, internal review, and follow-up distribution to stakeholders who were not in the room.

The existing content library already covers nearby ground like [Figma Presentation Workflow for Sales Teams](/articles/pitchdeck-figma-presentation-workflow-for-sales-teams/), [QBR Deck Workflow for Customer Success Teams](/articles/pitchdeck-qbr-deck-workflow-for-customer-success-teams/), and [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/). This article is narrower: it is about enterprise briefings where the goal is to align senior stakeholders quickly around one customer-specific opportunity.

## Executive briefings fail when teams over-explain

Most enterprise decks become bloated because teams dump every useful slide they have into one file.

Executives usually do not want:

- every product detail
- a full feature tour
- every case study the company owns
- ten backup slides masquerading as the main narrative

They want:

- why this meeting matters
- what problem is worth solving
- why your approach is credible
- what decision or next step is being asked of them

That is a different job than a general-purpose sales deck. The structure has to be tighter, the customer context has to be more explicit, and the edit cycle has to stay fast enough for real account work.

## Build a reusable spine, then swap account-specific overlays

The best executive briefing decks are not rebuilt from scratch each time. They are assembled from two layers.

### The reusable spine

This is the stable structure that should rarely change:

- company or team introduction
- market or workflow problem framing
- product approach
- proof patterns
- next-step framework

### The account-specific overlay

This is what changes for each meeting:

- customer context
- relevant industry examples
- tailored screenshots or use cases
- stakeholder-specific priorities
- implementation or rollout framing

That split matters because enterprise sales work creates endless deck drift. Without a reusable spine, every AE or solutions engineer starts cloning old decks and making ad hoc edits until nobody knows which file is the trustworthy version anymore.

With Pitchdeck, design can keep that core narrative in Figma while revenue teams still get the export formats they need afterward.

## Design for the meeting conversation, not only the follow-up file

An executive briefing should survive after the meeting, but it should be optimized for the meeting first.

I like to judge every slide by one question:

What decision or discussion should this slide trigger?

If the answer is unclear, the slide is probably doing too much.

Useful slide jobs in an executive briefing:

- establish the business problem
- show why the problem matters now
- connect the workflow pain to measurable risk or opportunity
- demonstrate credibility with one relevant proof point
- make the next step feel concrete

Weak slide jobs:

- "show everything we can do"
- "cover every product feature just in case"
- "include this because it was in the QBR deck"

That discipline is especially important in enterprise meetings because the senior audience often redirects the conversation quickly. The deck should support that movement without collapsing into a pile of hidden context.

## Keep sensitive variants under control

Executive briefings often include account-specific details that should not spread casually:

- tailored pricing assumptions
- implementation timing
- internal rollout plans
- customer-specific workflows
- competitive framing

That is why this deck type needs clearer version control than a marketing presentation.

My rule is simple:

- one master Figma source for the reusable structure
- one clearly named account variant for the live briefing
- one deliberate export per audience

Good naming beats clever naming here.

Examples:

- `acme-exec-briefing_master-q3`
- `acme-exec-briefing_live-review-2026-06-13`
- `acme-exec-briefing_followup-pdf`

If the team has to localize or adapt the deck for regional stakeholders, [Presentation Localization Workflow for Global Sales Teams](/articles/pitchdeck-presentation-localization-workflow-for-global-sales-teams/) is the best follow-up read.

## Choose the export destination before the day of the meeting

Enterprise briefing decks often get stuck because nobody decided what happens after the design is approved.

Common needs:

- a presenter wants PowerPoint because the field team edits speaker notes
- an account team wants Google Slides for lightweight collaboration
- an executive sponsor wants a PDF leave-behind
- a wider stakeholder group wants a hosted web deck they can view asynchronously

Pitchdeck helps precisely because the export surface does not have to be guessed at the last second. But the workflow is still better when the destination is chosen early.

A practical way to decide:

- Use PowerPoint when the file will keep changing in the field.
- Use a hosted web deck when async sharing and view analytics matter.
- Use PDF when the meeting follow-up needs a fixed leave-behind.
- Use Google Slides when several non-design teammates need to collaborate directly.

The wrong move is designing as if there is only one output, then scrambling once three different stakeholders ask for three different artifacts.

## Rehearse the live version, not just the pretty version

This is the overlooked step.

Before the briefing, someone should test:

- slide order
- speaker-note coverage
- embedded media or links if used
- readability at presentation size
- backup format availability if the live environment fails

Executive meetings are exactly where small deck issues feel bigger than they are. A missing speaker note, broken link, or slide that only makes sense with verbal context can make the team look less prepared than it really is.

If the briefing will be shared afterward, it is also worth asking whether the deck can stand on its own. Some live decks need a follow-up cut with slightly more explanatory context for people who were not in the room.

## A simple workflow that scales across account teams

For repeatable enterprise briefings, this is the system I would formalize:

1. Maintain one reusable executive-briefing spine in Figma.
2. Duplicate only the account-specific variant for each live meeting.
3. Tailor proof, screenshots, and next steps to that account.
4. Decide the follow-up format before final export.
5. Rehearse the exact live version the presenter will use.
6. Export the post-meeting version intentionally instead of forwarding the live file blindly.

That keeps design from becoming a last-minute deck rescue team while still giving sales teams the flexibility they actually need.

## Where Pitchdeck helps most

[Pitchdeck](/pitchdeck/) is valuable here because executive briefings sit right in the messy overlap between design quality, account specificity, and export flexibility.

Design wants one trustworthy source. Revenue teams want fast tailoring. Stakeholders want the deck in whatever format matches their workflow. Pitchdeck makes those demands less contradictory.

If your enterprise deck process keeps degenerating into cloned PowerPoints and late-night file surgery, move the executive briefing system back into Figma, keep the reusable spine stable, and let Pitchdeck handle the output formats afterward. That is how the deck stays sharp without becoming a maintenance burden.

---

---
type: article
title: Preview Environment Design QA Workflow for Frontend Teams
description: Use branch preview environments to compare Figma designs against in-progress frontend work before stakeholder review or staging signoff.
datePublished: 2026-06-13T00:00:00.000Z
dateModified: 2026-06-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-preview-environment-design-qa-workflow-for-frontend-teams/
markdownUrl: https://www.hypermatic.com/articles/pixelay-preview-environment-design-qa-workflow-for-frontend-teams.md
---

# Preview Environment Design QA Workflow for Frontend Teams

Preview environments are one of the best places to catch visual drift, and many teams barely use them for design QA.

By the time a page reaches shared staging, the branch is usually bigger, the review thread is longer, and the engineer who made the key layout choices has already switched context. Localhost review helps earlier, but it is not always easy to share. Preview deployments sit in the middle: close enough to the implementation branch to keep fixes cheap, but shareable enough for cross-functional review.

That makes them ideal for visual comparison.

[Pixelay](/pixelay/) is especially useful here because it compares Figma designs against real live sites, staging environments, localhost builds, and password-protected pages directly in the browser. The current library already covers nearby workflows like [Localhost Design QA Workflow for Frontend Developers](/articles/pixelay-localhost-design-qa-workflow-for-frontend-developers/), [Pull Request Design QA Workflow for Frontend Teams](/articles/pixelay-pull-request-design-qa-workflow-for-frontend-teams/), and [Staging Site Design Review Checklist](/articles/pixelay-staging-site-design-review-checklist/). This article is about the step in between: branch or preview environments that exist before merge but after the work is shareable.

## Preview environments solve a different problem from localhost and staging

Each comparison surface is good at something different.

### Localhost

Best for:

- fast solo iteration
- pre-PR fixes
- early responsive checks

### Preview environment

Best for:

- sharing a branch with design or PM
- reviewing implementation with real deployment conditions
- checking a linkable version without waiting for staging
- isolating branch-specific changes before they mix with other work

### Shared staging

Best for:

- integrated release review
- broader cross-team signoff
- environment-level validation

When teams skip preview QA, they often jump from localhost straight to staging. That makes staging noisy, because people are reviewing both branch-level visual issues and environment-level issues at the same time.

## Map the preview URL to the exact Figma frames first

Preview review gets messy when the route is shareable but the comparison target is vague.

Before opening Pixelay, note:

- which preview URL corresponds to which design frame
- which breakpoint is being reviewed
- which state is supposed to be visible
- whether the preview includes placeholder or real content

That prevents fuzzy review comments like:

- "hero feels slightly off"
- "mobile card stack looks weird"
- "pricing page spacing changed somewhere"

A better review target is explicit:

- `/pricing` desktop hero against frame `Pricing / Desktop / Approved`
- `/product` mobile feature grid against frame `Product / Mobile / v4`
- `/signup` error state against frame `Signup / Validation / Tablet`

The more precise the mapping, the more useful the Pixelay comparison becomes.

## Stabilize the preview before comparing

Preview deployments often include the same noise sources as staging:

- feature flags
- analytics or consent overlays
- rotating CMS content
- injected preview banners
- logged-out vs logged-in differences
- environment-specific data

That does not mean preview QA is unreliable. It means the review needs a little setup.

Try to control:

- viewport size
- test account or content state
- browser zoom
- any irrelevant banners or debug overlays
- known environment toggles that change layout

The goal is not a fake-perfect environment. The goal is enough stability that the comparison highlights real design drift instead of random preview artifacts.

## Use preview QA before the long comment thread begins

One of the biggest advantages of a preview environment is timing.

It is late enough that:

- the page is deployed
- teammates can open the same URL
- layout issues are visible in a realistic environment

But early enough that:

- the branch is still isolated
- the engineer still remembers the implementation choices
- fixing spacing or hierarchy issues does not require untangling merged work

That is why preview comparison works best before a broad stakeholder review explodes into dozens of comments. A quick Pixelay pass can strip out the obvious visual mismatches before design, PM, or leadership ever sees them.

## Classify findings by owner while you review

Preview environments often expose several kinds of mismatch at once:

- `implementation issue`: spacing, sizing, hierarchy, alignment
- `content issue`: headline too long, screenshot crop wrong, missing copy update
- `environment issue`: preview-only banner, missing data, feature-flag artifact
- `intentional change`: approved difference from the original design

That classification matters because preview review is often cross-functional. If every mismatch becomes "frontend bug," the review gets noisy and defensive. If findings are sorted by source, the follow-up becomes much faster.

Pixelay helps because the evidence is visual. But the label still needs to be explicit so the team knows whether the next step belongs to code, content, design, or environment setup.

## Preview QA is especially strong for branch-specific risk areas

Some work benefits from preview comparison more than others:

- redesigned hero or pricing sections
- new CMS-driven landing pages
- navigation or layout refactors
- component-library updates touching several routes
- experiment variants that deserve design review before merge
- screenshot-heavy or content-dense pages

These are exactly the kinds of changes that are shareable enough for preview review but too branch-specific to wait for staging.

If the branch includes a flow behind auth or seeded data, you may still need the stronger setup described in [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/). But for most page-level review, preview environments are a sweet spot.

## A practical preview review loop

For frontend teams, this sequence works well:

1. Deploy the branch to a preview environment.
2. Match each important preview route to an approved Figma frame.
3. Open Pixelay against the preview URL before broad review starts.
4. Fix the highest-signal layout and hierarchy issues while the branch is still isolated.
5. Share the preview link after the visual basics are already in place.

That one habit improves the quality of later PR and staging review because the team is not wasting energy on obvious issues that could have been caught earlier.

## What to focus on in preview environments

Prioritize the things preview deployments are especially good at revealing:

- spacing rhythm under real deployment CSS
- typography scale and line-height in the actual browser environment
- screenshot or image crops in the deployed layout
- sticky headers, nav bars, or footers behaving differently than local
- component states affected by real CMS or preview content
- mobile or tablet breakpoints on a linkable build

Preview environments are often more trustworthy than localhost for these checks because the page is already closer to the conditions other reviewers will see.

## Where Pixelay helps most

[Pixelay](/pixelay/) is valuable here because it turns a vague "can you take a look at the preview?" moment into a real, evidence-based design QA step.

Preview environments are already part of many frontend teams' workflow. The missing piece is using them intentionally for design comparison instead of treating them as just another link to skim. Once the team maps the preview routes to Figma frames and reviews them before the bigger comment cycle begins, visual drift gets fixed when it is still cheap.

That is the real opportunity. Preview QA does not replace localhost or staging review. It makes both of them better by catching branch-level design issues in the brief window where the implementation is deployed, shareable, and still easy to correct.

---

---
type: article
title: Original Image Fill Export Workflow from Figma
description: Recover original image assets from Figma layer fills so developers, marketers, and vendors get reusable source files instead of flattened screenshots.
datePublished: 2026-06-13T00:00:00.000Z
dateModified: 2026-06-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-original-image-fill-export-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-original-image-fill-export-workflow-from-figma.md
---

# Original Image Fill Export Workflow from Figma

Sometimes the thing your teammate needs is not the frame you designed. It is the original asset buried inside the frame.

A developer asks for the untouched product photo so they can generate responsive crops. A marketer needs the clean hero image for a CMS card. A vendor wants the original logo file that was dropped into a mocked-up layout months ago. What they do not want is a flattened screenshot of the final composition with shadows, text, and chrome baked into it.

That is where an original-image export workflow matters.

[TinyImage](/tinyimage/) is especially useful here because the plugin already covers compression, format conversion, PDFs, GIFs, video exports, and batch workflows directly inside Figma. It also has a highly relevant tutorial on [bulk exporting original image files from Figma layer fills](/tutorials/how-to-bulk-export-original-image-files-from-any-figma-layer-fills-from-figma-using-tiny-image/). This article is about when that workflow is the right choice, how to package the results properly, and how to avoid turning one embedded asset into three different handoff problems.

## Exporting the frame and extracting the source are different jobs

Teams often blur these together.

Exporting the frame is right when the final composition is the deliverable:

- a launch graphic
- a product screenshot
- a social preview image
- a help center illustration

Extracting the original image fill is right when the image itself needs to live another life downstream:

- developers need to create their own responsive crops
- a CMS editor needs a reusable source asset
- a motion designer needs the clean background plate
- a vendor needs the photography without UI overlays
- a content team wants to repurpose the same asset in several layouts

If you hand off a flattened frame when the next person really needed the source image, they usually have two bad options: ask design to export it again or start screenshotting and rebuilding from the mockup. Both waste time.

## The best use cases are usually hidden inside normal design work

This workflow matters most when Figma has become the staging ground for a lot of embedded assets:

- SaaS landing page mockups full of product photography and screenshots
- ecommerce campaign files with dozens of merch images
- presentation or deck files with vendor-supplied assets
- documentation layouts with repeated UI stills
- banner or email concepts where art direction starts in Figma but final production happens elsewhere

The existing TinyImage library already covers adjacent workflows like [CMS Image Publishing Workflow from Figma](/articles/tinyimage-cms-image-publishing-workflow-from-figma/) and [Responsive Image Handoff from Figma](/articles/tinyimage-responsive-image-handoff-from-figma/). This article is narrower. It is about recovering the original inputs cleanly before somebody downstream is forced to work from a composed export.

## Build an extraction list before you start exporting

The messiest original-asset handoffs happen when people export reactively.

Someone Slacks:

> Can you send me all the source images from that page?

Then design starts clicking random layers and exporting whatever looks relevant.

A better workflow starts with an extraction list. I like to group the assets by purpose:

- `developer assets`: images engineering needs for implementation
- `content assets`: files a CMS or content team will publish directly
- `vendor assets`: logos, photos, or plates needed by an external partner
- `archive assets`: originals worth preserving for future reuse

That quick categorization helps answer the important follow-up question: does the recipient need the untouched original, or do they need a reviewed derivative that is already compressed, resized, or renamed for a specific slot?

Not every source asset should move downstream untouched. Some should. Some absolutely should not.

## Separate original assets from approved production variants

This is the most important rule in the workflow.

Do not mix:

- untouched source images pulled from layer fills
- final web-ready exports
- alternate crops
- preview mockups

Those are different artifacts with different owners.

A clean delivery usually looks like this:

- `originals/`: extracted source images from Figma fills
- `derived/`: approved cropped or compressed versions for shipping
- `references/`: optional mockups or screenshots showing where each asset was used

That structure prevents a common failure mode where engineering or marketing uploads the wrong file because the source and the production variant share a nearly identical name.

If the original files are going to be reused on the web, pair this extraction workflow with a follow-up compression pass instead of assuming the source images are ready to publish as-is.

## Name assets by role, not by visual guesswork

If extracted files keep their mystery-filename origin, the handoff is only half solved.

Bad:

- `image-4.png`
- `hero-new-final.jpg`
- `asset-copy-2.webp`

Better:

- `pricing-page-hero-background-original.jpg`
- `feature-grid-customer-photo-original.png`
- `docs-settings-panel-screenshot-original.png`

The point is not elegance. It is traceability.

Anyone receiving the bundle should be able to answer:

1. Where did this asset come from?
2. What part of the design used it?
3. Is this the original or a prepared derivative?

If you need to preserve both kinds of files, say so in the filename itself. That one small habit saves a surprising amount of back-and-forth.

## Review the recovered assets before handing them off

Pulling originals out of Figma does not guarantee they are the files the next team actually wants.

Check for:

- unexpectedly low-resolution source files
- outdated photography that was replaced visually but still exists in the mockup
- logos or screenshots with the wrong background treatment
- duplicate images used in several places under different layer names
- source files that still need compression, cropping, or format conversion

This is also where you catch a subtle but important issue: sometimes the image embedded in Figma was already a compromise. It may have been downscaled, lightly edited, or swapped temporarily during design exploration. If you skip the review, the receiving team may assume the extracted asset is the approved master when it is really just the nearest convenient placeholder.

## A practical Figma-to-handoff rhythm

For teams doing this regularly, the workflow can stay simple:

1. Mark which layers contain assets that need to be recovered.
2. Export the original image fills with TinyImage.
3. Sort the files into originals and production-ready derivatives.
4. Rename them by placement and purpose.
5. Add one lightweight reference image or note when context matters.
6. Run a quick QA pass for resolution, duplication, and version accuracy.

That is enough for most developer, CMS, and vendor handoffs.

If the destination team also needs web-ready files, follow with the right compression workflow instead of expecting them to do the cleanup themselves. That is exactly where TinyImage earns its keep: one tool can support the recovery step and the optimization step without forcing the team out of Figma.

## Where teams usually go wrong

The most common mistakes are:

- exporting the whole frame when the recipient needed the source image
- sending source images without saying they are source images
- mixing originals with optimized derivatives in one folder
- assuming extracted assets are automatically publish-ready
- keeping filenames tied to internal layer chaos rather than real page roles

Those mistakes are small individually, but together they create the familiar design-handoff pattern where the same asset gets re-requested three times by three different people.

## Where TinyImage fits best

[TinyImage](/tinyimage/) is not just for making files smaller. In this workflow, it is valuable because it helps teams recover original assets from Figma cleanly instead of treating every mockup like a dead-end composition.

That matters anytime the design file is also an asset staging area, which is increasingly most product, marketing, and content work.

If your Figma files keep becoming accidental asset graveyards, standardize an original-image export workflow. Extract what needs to be reused, label it clearly, keep it separate from shipping variants, and let TinyImage handle the recovery step before downstream teams start improvising from flattened exports.

---

---
type: article
title: Spreadsheet-Driven Banner Variant Workflow
description: Generate banner variants from one Figma system by using spreadsheet-ready offers, URLs, and market copy instead of rebuilding every size by hand.
datePublished: 2026-06-12T00:00:00.000Z
dateModified: 2026-06-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-spreadsheet-driven-banner-variant-workflow/
markdownUrl: https://www.hypermatic.com/articles/bannerify-spreadsheet-driven-banner-variant-workflow.md
---

# Spreadsheet-Driven Banner Variant Workflow

Banner production gets expensive long before animation starts.

The first concept is usually manageable. The pain begins when the campaign needs twenty sizes, four offers, three markets, two CTA sets, and a late-night destination URL update that somehow touches every file. That is when teams realize they are not really producing one banner set. They are maintaining a content system disguised as creative production.

[Bannerify](/bannerify/) is a strong fit for this problem because it turns Figma designs into production-ready HTML, GIF, MP4, and ad-platform exports. For high-variant work, the real opportunity is using Bannerify as the final export layer for a spreadsheet-driven workflow instead of manually rebuilding every headline, offer, and CTA inside the design file.

## Variant production breaks when content is treated like decoration

A lot of banner teams still approach variants as if each one is a separate design.

That does not scale well once the campaign includes:

- market-specific prices
- localized headlines
- different landing URLs
- audience-specific CTAs
- retailer or partner name changes
- disclaimer variants

At that point, the creative system is carrying structured data whether the team acknowledges it or not.

The closest related articles in the current library are [Figma Banner Ad Variant Production Workflow](/articles/bannerify-figma-banner-ad-variant-production-workflow/), [Localized Banner Campaign Workflow](/articles/bannerify-localized-banner-campaign-workflow/), and [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/). This article is specifically about the operating model where spreadsheet-managed content drives a large banner family inside one Figma-based production workflow.

## Start by defining what is allowed to vary

This is the step that keeps the system sane.

Before building the variant file, decide which fields can change safely without redesigning the creative:

- headline
- subhead
- CTA
- offer or price
- destination URL
- locale or market code
- disclaimer
- retailer or partner name

That list becomes the contract for the campaign.

If a field is not safe to vary inside the master layout, that should be obvious early. Maybe the plan price can change but the body copy cannot. Maybe the CTA can change length within reason, but the headline pattern only supports one line. Maybe localized disclaimers need their own layout family instead of pretending one size fits all.

Getting honest here saves a lot of late-stage chaos.

## Build master banner layouts that can absorb real data

Spreadsheet-driven production only works if the creative is designed with content stress in mind.

That means the master banner system should be tested against:

- the longest headline
- the longest CTA
- the densest disclaimer
- the least forgiving size
- the biggest price or offer delta

If the file only works with the shortest English copy and the most generous layout, the spreadsheet will expose the weakness quickly.

Design the layout family for the hard case first. Then the lighter cases become easy.

This is especially important for:

- compact mobile sizes
- leaderboard formats with tight safe areas
- disclaimer-heavy campaigns
- co-branded or retailer-specific creative

## Structure the spreadsheet like a production source, not a brainstorm doc

The spreadsheet should make export safer, not noisier.

A practical variant sheet usually needs clean columns such as:

- campaign name
- size
- variant ID
- headline
- body or supporting line
- CTA
- offer
- URL
- locale
- disclaimer
- status

The exact columns depend on the campaign, but the principle stays the same: one row should describe one exportable creative variant clearly enough that the team can review it without guessing.

This also makes approvals easier. Stakeholders can comment on rows and values rather than vague screenshots with "change this one slightly."

## QA the system in families, not one row at a time

A spreadsheet can create scale. It can also create scale for mistakes.

That is why QA needs to happen at three levels:

### 1. Layout family QA

Does the underlying banner system survive the longest and shortest realistic content cases?

### 2. Content family QA

Do price, headline, CTA, and disclaimer combinations remain accurate and consistent across the sheet?

### 3. Export QA

Do the final outputs preserve animation, click behavior, sizing, and file constraints for the real platform destination?

Bannerify helps most in the third layer, but the first two are what keep the export process from multiplying bad input at scale.

## Keep approval comments tied to the source data

One of the worst failure modes in variant work is getting feedback on static exports while the actual source values keep changing somewhere else.

A cleaner workflow is:

1. approve the layout family
2. approve the spreadsheet values
3. generate the variants
4. run a focused export QA pass

That order reduces churn. If a stakeholder wants the CTA rewritten across twenty sizes, the right place to change it is in the source values, not in a pile of individual banners.

This also makes late campaign refreshes much easier. A merch or lifecycle team can update offer data, and the creative system can be regenerated without reinventing the layout logic.

## Plan the handoff package before the last export

Spreadsheet-driven production still ends in a trafficking handoff.

So before the final Bannerify export, confirm:

- naming rules are stable
- destination URLs are final
- disclaimers match the market and size
- the team knows which rows are approved, paused, or deprecated
- file format expectations are clear for each platform

That last point matters because a variant system can include several delivery needs at once. One campaign may require HTML5 for one buy, MP4 for another, and GIF for preview or backup use. The data source should not hide those operational differences.

## A practical rhythm for campaign refreshes

For recurring campaign teams, this cadence works well:

1. maintain the master creative in Figma
2. maintain variant-ready fields in the spreadsheet
3. test the stress cases before full generation
4. update the sheet when offers or URLs change
5. regenerate and export with Bannerify
6. run one trafficking-focused QA pass on the output set

That is much more durable than treating every seasonal refresh like a new manual design sprint.

## Where Bannerify fits best

[Bannerify](/bannerify/) does not replace the need for disciplined campaign data. What it does is give the creative team a way to turn that structured content into real production-ready banner outputs without collapsing into manual rebuild work.

That is the important distinction.

If your team keeps producing large banner sets with small content changes, a spreadsheet-driven workflow is usually the cleanest way to scale. Bannerify becomes the final production engine, while the spreadsheet becomes the controlled source of variation. Together, they turn banner variants from repetitive file labor into a repeatable campaign system.

---

---
type: article
title: Lottie to Figma Animation Review Workflow
description: Import Lottie animations into Figma so design and product teams can review motion behavior, context, and handoff before implementation.
datePublished: 2026-06-12T00:00:00.000Z
dateModified: 2026-06-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-lottie-to-figma-animation-review-workflow/
markdownUrl: https://www.hypermatic.com/articles/convertify-lottie-to-figma-animation-review-workflow.md
---

# Lottie to Figma Animation Review Workflow

Lottie animations usually arrive at the exact moment a team realizes motion does not fit neatly into the normal design review process.

The animation exists. It may have come from a motion designer, a contractor, a previous app build, or a Lottie library. But now product, design, and engineering need to decide whether it actually works in context. Does it fit the screen? Does it loop too aggressively? Does it feel on-brand? Does it still make sense beside the surrounding UI?

That is where teams often resort to screenshots, browser tabs, and vague comments instead of a real workflow.

[Convertify](/convertify/) is helpful here because the product page already supports importing Lottie files into Figma. For review work, the value is not "turn Lottie into a magical editable motion system." It is giving the team a way to bring the animation back into the design environment where layout, product context, and handoff decisions can happen more clearly.

## Lottie review problems are usually context problems

A standalone animation preview rarely tells the whole story.

The motion might look great on a dark website and feel distracting inside a quiet empty state. A loading loop might be technically smooth but too large for the target card. An illustration might feel polished in isolation and clash badly with the product's spacing, copy, or timing once it sits in the real interface.

That is why reviewing Lottie in the same place as the UI matters.

The closest existing workflow in the library is [Figma to After Effects Handoff Workflow for Motion Teams](/articles/convertify-figma-to-after-effects-handoff-workflow-for-motion-teams/). That article is about sending design concepts into motion production. This one is the reverse problem: bringing finished or semi-finished motion back into Figma so the broader team can review it in context.

If you need the import mechanics first, the most direct setup guide is [how to import Lottie file animations to Figma with one click using Convertify](/tutorials/how-to-import-lottie-file-animations-to-figma-with-one-click-using-convertify/).

## Import the animation into the screen where it will actually live

The most useful review starts with placement, not polish.

Before anyone debates timing curves or loop count, place the imported Lottie in the actual interface pattern it belongs to:

- onboarding illustration
- empty state
- success state
- loading state
- marketing hero
- tooltip or support surface

That immediately makes the real questions easier to answer:

- Is the animation too visually dominant?
- Does it compete with the main CTA?
- Is the crop still readable at the intended size?
- Does it feel too playful, too busy, or too slow for the surrounding UI?

Without that context, teams often approve animation that looked good in preview but feels misplaced in product.

## Review the animation against six specific questions

Once the Lottie is in Figma, I like to run the review against six lenses.

### 1. Purpose

What job is the animation doing?

Is it teaching, celebrating, signaling progress, or purely decorative? If the team cannot answer that quickly, the motion may not deserve to ship.

### 2. Size and layout

Does the animation still work at the exact dimensions the product will use? A Lottie that looks elegant at 400 pixels wide may become noisy at 96 pixels inside a compact panel.

### 3. Loop behavior

Should it loop continuously, play once, or wait for a trigger? Endless motion is one of the easiest ways to make a polished interface feel stressful.

### 4. Contrast and theme fit

Does it work on the real background, with the real surrounding colors, and alongside the real copy? Motion assets often get approved on a neutral preview surface that hides theme clashes.

### 5. Density

Is there too much detail for the user to process quickly? Small interface animations usually need fewer moving parts than marketing visuals.

### 6. Handoff risk

Does the implementation team know exactly which version, size, and trigger behavior is approved? If not, review clarity is still incomplete.

That checklist is much more useful than a vague "looks good to me" pass.

## Create comparison frames, not just one approved version

Animation decisions get easier when the team can compare alternatives side by side.

In Figma, that can mean setting up a small review board with frames for:

- original imported motion
- reduced-size version
- dark background version
- static fallback state
- alternate placement in the UI

This matters because a lot of motion debates are really placement or emphasis debates. Once two versions are visible side by side, the decision is usually obvious. The team can see whether the smaller version feels calmer, whether the fallback still communicates the point, or whether the background needs adjusting.

Convertify helps by making the animation import itself less of a barrier. The real workflow win comes from what the team does once the asset is reviewable inside the product context.

## Decide what should stay imported and what should be rebuilt

Not every imported animation should remain a permanent black-box asset.

After review, ask:

- Is this final enough to ship as-is?
- Does the surrounding layout need to adapt around it?
- Should a simplified static fallback exist too?
- Would the team be better off recreating a lighter version for this UI?

That distinction matters operationally.

If the animation is a polished external asset, keep the focus on approval and handoff. If it is really a rough starting point, say so early and treat the import as reference material, not the final deliverable.

The mistake is pretending every imported motion asset is equally ready for production once it appears in Figma.

## Add implementation notes while the review is fresh

Motion handoff gets expensive when details are left to memory.

Once the team approves the Lottie in context, capture the notes right away:

- intended size
- background expectations
- play/loop behavior
- trigger conditions
- fallback behavior
- approved filename or source reference

That turns the review into something engineering can actually build from.

Without those notes, the same motion gets reopened later in Slack, email, or ticket comments, and the team repeats decisions it already made during design review.

## A practical Lottie review sequence

For most teams, this sequence works well:

1. Import the Lottie into Figma with Convertify.
2. Place it inside the real UI or marketing frame.
3. Review purpose, size, loop behavior, contrast, density, and handoff risk.
4. Compare at least one alternate placement or scale.
5. Decide whether the asset is final, needs adaptation, or should be rebuilt.
6. Record the approved implementation notes before the file moves on.

That process keeps motion review grounded in the product instead of drifting into abstract animation opinions.

## Where Convertify fits best

[Convertify](/convertify/) is valuable here because it removes the friction of getting Lottie assets back into the team's real working environment. Once the animation is visible inside Figma, review becomes clearer, decisions get faster, and implementation guidance becomes easier to document.

That is the difference between "we have an animation file somewhere" and "we have an approved motion asset that actually fits the product."

If your team reviews more motion assets than it ships, standardizing a Lottie-to-Figma review workflow is one of the easiest ways to reduce confusion. Convertify gets the asset into place. The team can then make better decisions while the animation is still connected to the interface it is supposed to improve.

---

---
type: article
title: UI Character Limit Review Workflow in Figma
description: Check buttons, tabs, plan names, errors, and settings labels for character-limit risk before product copy breaks layouts or translations.
datePublished: 2026-06-12T00:00:00.000Z
dateModified: 2026-06-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-ui-character-limit-review-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-ui-character-limit-review-workflow-in-figma.md
---

# UI Character Limit Review Workflow in Figma

A surprising amount of UI copy breaks not because the writing is wrong, but because the space assumptions were wrong.

A tab label gets a little longer. A pricing plan name changes. An error message needs one extra clause. A translated button stops fitting. A settings row that looked calm in the design file suddenly wraps awkwardly in build or truncates in mobile.

Those are character-limit problems, but they rarely get reviewed like a real workflow.

[CopyDoc](/copydoc/) is a strong fit here because it lets teams export, inspect, organize, and re-import Figma text without manually checking every frame one layer at a time. For character-limit work, the win is not only spotting long strings. It is turning a vague layout risk into a structured review pass before the issue reaches development or localization.

## Character-limit issues are usually system issues

Most teams notice these problems late because the long string only appears after something else changes:

- product renaming
- pricing or packaging updates
- localization
- legal or compliance additions
- responsive layout tightening
- reuse of one component in a denser context

That means the workflow should not be "wait until the design visibly breaks." It should be "review the risky string types before they get there."

The closest existing articles in the library are [Figma Microcopy Review Workflow](/articles/copydoc-figma-microcopy-review-workflow/), [Form Microcopy Review Workflow in Figma](/articles/copydoc-form-microcopy-review-workflow-in-figma/), and [Localization Planning for Figma Product Screenshots](/articles/copydoc-localization-planning-for-figma-product-screenshots/). This article is more specific: it is about text-length risk across UI surfaces, not general copy quality or localization planning alone.

## Start with the surfaces that are least forgiving

Not all UI copy deserves the same character-limit scrutiny.

Review the tightest, highest-risk elements first:

- buttons
- tabs and segmented controls
- plan names and pricing labels
- table headers
- settings rows
- navigation labels
- helper text attached to compact forms
- error messages inside constrained containers

These are the places where a few extra characters can change the layout fast.

Longer content areas like body paragraphs or onboarding screens still matter, but they usually fail more gradually. Compact UI labels fail immediately.

## Export the strings into a reviewable list

This is the point where a lot of teams either succeed or give up.

Looking for character-limit risk directly on the canvas is slow and unreliable. The better move is to export the relevant strings and review them outside the frame grid.

That makes it much easier to sort by:

- component type
- product area
- language
- likely truncation risk

Once the strings are visible as a set, patterns appear quickly. You can see that all secondary CTA labels are drifting longer, one plan family is inconsistent, or translated settings labels are likely to break a reusable row.

CopyDoc helps because it keeps that review connected to the actual Figma source instead of turning it into a disconnected spreadsheet exercise.

If your team needs the mechanics first, tutorials like [how to count words and characters in Figma text layers using CopyDoc](/tutorials/how-to-count-words-and-characters-in-figma-text-layers-using-copy-doc/) and [how to export and re-import selected text layers in Figma using CopyDoc](/tutorials/how-to-export-and-re-import-selected-text-layers-in-figma-using-copy-doc/) are the direct setup references.

## Review by component family, not by screen

This is one of the highest-leverage changes teams can make.

Instead of opening every screen and asking whether anything looks too long, group the review by reusable UI family:

- primary buttons
- secondary buttons
- dialog titles
- tabs
- pricing labels
- error callouts
- settings list items

Why?

Because character-limit issues are usually component issues. If one button pattern only works with 16 characters, the team should know that once and apply it everywhere instead of relearning the lesson on five screens.

This also helps create better decisions:

- shorten the copy
- allow wrapping
- widen the component
- create a shorter alternate label
- redesign the layout for this class of content

Those are product decisions and design decisions together, not just writing tweaks.

## Distinguish between copy fixes and layout fixes

When a string feels too long, teams often jump straight to "make the copy shorter."

Sometimes that is right. Often it is incomplete.

A useful review asks:

1. Is the string too long for the current container?
2. Is the container unrealistically tight for the real product need?
3. Will localization make this worse?
4. Is the component meant to support only one short label type, or was that an accidental assumption?

Examples:

- A vague button like "Continue to the next step" may simply need tighter wording.
- A plan name that always becomes long may signal the pricing card needs a more tolerant layout.
- A settings row that breaks in German or French may need both shorter text and better spacing behavior.

That is why character-limit review works best as a cross-functional pass between content, product, and design.

## Treat localization as the stress test, even before translation starts

Even if the product is shipping in one language first, localization is a useful proxy for text stress.

Ask which strings are most likely to grow when translated:

- CTAs
- legal links
- plan labels
- explanatory helper copy
- validation and error messages

If those strings already feel close to the edge in English, they are not really stable.

This is especially important for UI kits and shared components. One fragile component can multiply the problem across dozens of product surfaces.

## Build a lightweight limit reference for the team

Once the risky component families are clear, capture the learning somewhere practical.

That might mean documenting:

- preferred button label length ranges
- tab label expectations
- which error styles can expand safely
- which pricing labels need special handling
- which components require a layout review when copy changes

The goal is not to create a giant writing rules document. It is to stop the same compact layout from failing in the same way every release.

CopyDoc supports this well because it turns string review into something repeatable instead of purely visual guesswork.

## A practical review sequence

For most product teams, this sequence works well:

1. scope the component families most likely to fail
2. export the relevant strings from Figma
3. group them by component type
4. flag labels that are already tight or likely to grow
5. decide whether the fix is shorter copy, a layout change, or both
6. push approved updates back into the design source

That sequence is much calmer than discovering truncation problems halfway through engineering QA.

## What to check before signoff

Before approving the UI copy pass, confirm:

- button and tab labels still fit comfortably
- pricing and settings labels do not depend on lucky short wording
- error messages can expand without wrecking the layout
- the most localization-sensitive strings were reviewed intentionally
- component families that need layout tolerance were flagged
- the fixes were applied in the Figma source, not only in a notes doc

## Where CopyDoc helps most

[CopyDoc](/copydoc/) is useful here because character-limit review is really a visibility and coordination problem. Teams need a way to see strings as a system, decide which ones are risky, and update the actual design source without manual layer-hunting.

That is what turns "this might get too long" from a vague anxiety into a workflow.

If your product UI keeps breaking when labels evolve, pricing changes, or translation starts, add a character-limit review pass to your normal CopyDoc workflow. It is one of the cheaper ways to prevent layout drift before it turns into bug tickets, rushed rewrites, or awkward compromises in build.

---

---
type: article
title: Dark Mode Email Review Workflow in Figma
description: Review dark mode risks in Figma before HTML export so logos, buttons, backgrounds, and legal copy stay readable across inbox themes.
datePublished: 2026-06-12T00:00:00.000Z
dateModified: 2026-06-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-dark-mode-email-review-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/emailify-dark-mode-email-review-workflow-in-figma.md
---

# Dark Mode Email Review Workflow in Figma

Dark mode email problems usually show up too late.

The campaign is approved. The HTML is exported. Someone opens a preview in Gmail or Outlook dark mode and suddenly the logo disappears, the CTA loses contrast, the divider lines vanish, or the footer becomes harder to read than anybody expected.

At that point, the team is trying to solve a design problem during a production step.

[Emailify](/emailify/) is a strong fit for avoiding that trap because it keeps email design and HTML export in the same Figma-centered workflow. The biggest benefit is not that dark mode becomes automatic. It is that teams can review dark mode risk earlier, while the design is still easy to change.

## Dark mode is not a single visual style

This is the first thing teams need to align on.

Dark mode in email is not a neat theme toggle where every client faithfully follows your preferred design. Different inboxes, devices, and clients can reinterpret colors, backgrounds, and imagery in different ways.

That means the design review should focus on resilience, not perfection.

A useful dark mode question is not:

"Will this email look identical everywhere?"

A better question is:

"Which parts of this design are most likely to become unreadable, confusing, or off-brand when the inbox changes the presentation?"

That shift immediately makes the workflow more practical.

The closest existing articles in the library are [Email Accessibility Checklist for Figma Designers](/articles/emailify-email-accessibility-checklist-for-figma-designers/), [Mobile Email QA Workflow Before Export](/articles/emailify-mobile-email-qa-workflow-before-export/), and [Outlook Email Rendering Checklist for Figma Designers](/articles/emailify-outlook-email-rendering-checklist-for-figma-designers/). This article is specifically about the design-stage dark mode review before export, not the broader accessibility, mobile, or client-rendering pass.

## Audit the highest-risk modules first

Not every email section deserves the same dark mode attention.

I would start with the modules most likely to break visually:

- logos with dark wordmarks or transparent backgrounds
- hero sections with dark photography or tinted fills
- buttons that rely on subtle border contrast
- icons that disappear on inverted backgrounds
- dividers or cards that use light gray boundaries
- footers, disclaimers, and preference links

Those are the places where dark mode issues become immediately obvious to readers, even if the rest of the layout survives well.

If the team only reviews the hero image and headline, it can miss the small but important places where trust gets damaged, like a legal footer that becomes muddy or an unsubscribe link that is technically there but visually buried.

## Separate dark mode decisions into three buckets

This keeps the review grounded.

For each module, decide whether it should be treated as:

- `safe as-is`
- `needs alternate styling`
- `needs a fallback design choice`

Examples:

- Plain text on a clean solid background may be safe as-is.
- A button that depends on a light border may need alternate styling.
- A dark transparent logo on a darkened background may need a fallback logo variant or a different container treatment.

The value of this system is speed. Instead of debating every section equally, the team can focus on the parts that actually need intervention.

## Review the email in the order that dark mode problems surface

I like this review order better than simply scrolling top to bottom:

1. Brand marks and header
2. Hero and first CTA
3. Section boundaries and cards
4. Iconography and supporting graphics
5. Footer, legal copy, and utility links

Why this order?

Because brand and action clarity usually matter first. A dark mode issue that hides the logo or weakens the first CTA is more damaging than a minor tonal mismatch in a decorative icon later in the email.

This also helps the team make tradeoffs. If time is tight, fix the trust-critical and conversion-critical problems first.

## Design for contrast relationships, not only exact colors

Dark mode review is easier when the team thinks in relationships.

Ask:

- does this text remain clearly separate from the background?
- does this button still look tappable?
- do section boundaries still feel intentional?
- does this illustration still support the message instead of turning muddy?

That is usually more useful than arguing over whether the exact background should be slightly lighter or slightly darker.

A good Figma review pass can catch most of the obvious risk:

- black logos that need light treatment
- thin gray borders that will disappear
- dark hero images that need a container or padding rethink
- body copy that is barely readable on tinted sections
- legal text that will become too low-contrast

These are cheap fixes in design and expensive fixes after export.

## Keep imagery honest

Emails that rely heavily on imagery often look fine in design review and fragile in dark mode.

Common problems:

- transparent PNG logos disappear
- screenshots with dark edges blend into dark backgrounds
- illustrations lose contrast against newly darkened sections
- badges or trust marks become harder to distinguish

The answer is not "never use images."

The answer is to review whether the image still communicates clearly when the surrounding environment changes. Sometimes the right fix is a lighter asset. Sometimes it is a subtle container. Sometimes it is deciding that the module should lean more on text and less on image-dependent meaning.

## Use Figma to plan alternate treatments before HTML export

This is where Emailify helps most.

Because the workflow starts in Figma, the team can design alternate dark mode-safe treatments before worrying about final HTML. That might mean:

- testing a reversed logo variant
- simplifying a tinted card treatment
- thickening a border-dependent button style
- adding background support behind an illustration
- revising footer contrast

The goal is not to rebuild the whole email twice. It is to identify where a small visual decision now prevents a larger production problem later.

If the campaign has several reusable modules, it can also be helpful to mark which components are already dark mode-safe and which need special review every time they are used.

## Treat post-export previews as validation, not discovery

You should still preview after export. Dark mode email behavior is too variable to skip final testing.

But the post-export step should confirm design choices, not uncover them for the first time.

That means the best workflow is:

1. run a dark mode risk review in Figma
2. approve alternate treatments where needed
3. export with Emailify
4. validate in the inbox preview tools your team relies on

That sequencing keeps the stressful part later and the fixable part earlier.

## A practical dark mode checklist

Before exporting a campaign from Figma, check:

- logos remain visible on darker backgrounds
- buttons still read as buttons when contrast shifts
- dividers, cards, and iconography keep enough separation
- body and legal text remain readable
- image-dependent modules still make sense if the inbox darkens the surrounding surface
- alternate treatments are defined for the highest-risk sections

## Where Emailify fits best

[Emailify](/emailify/) does not remove the need for inbox testing, but it does create a better place to make dark mode decisions while they are still design decisions. That is the real advantage.

If your team keeps discovering dark mode issues after HTML export, move that review upstream. Use Emailify as part of a pre-export workflow where dark mode is reviewed alongside hierarchy, accessibility, and mobile behavior instead of as a last-minute rendering surprise.

---

---
type: article
title: Quarterly Roadmap Deck Workflow in Figma
description: Keep quarterly roadmap presentations aligned across product, design, and leadership without rebuilding the deck in PowerPoint every planning cycle.
datePublished: 2026-06-12T00:00:00.000Z
dateModified: 2026-06-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-quarterly-roadmap-deck-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-quarterly-roadmap-deck-workflow-in-figma.md
---

# Quarterly Roadmap Deck Workflow in Figma

Quarterly roadmap decks have a bad habit of becoming outdated before the meeting even happens.

A priority slips. A launch moves. A dependency appears. Leadership wants a new framing. Product wants more detail. Sales wants customer context. Then somebody asks for an editable PowerPoint five minutes before the review, and the deck that looked clean in Figma suddenly turns into a file-maintenance problem.

[Pitchdeck](/pitchdeck/) is a good fit for this workflow because it keeps the roadmap story in Figma while still supporting PowerPoint, Google Slides, PDF, Keynote, and hosted web presentations. That matters for quarterly planning because the deck usually has to do several jobs at once: align the internal team, support discussion, and leave behind something stakeholder-friendly afterward.

## Roadmap decks fail differently from investor or launch decks

An investor deck tries to tell one convincing story.

A roadmap deck has to do something messier:

- summarize the current quarter honestly
- show what is moving next
- explain why priorities changed
- surface risks and dependencies
- support live discussion without collapsing into a wall of text

That is why roadmap decks become fragile when teams treat them like polished one-off presentations. The content keeps changing, the audiences are mixed, and the export needs are usually inconsistent.

The closest related articles in the current library are [Board Deck Workflow for Figma Teams](/articles/pitchdeck-board-deck-workflow-for-figma-teams/) and [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/). This article is narrower: it is about recurring quarterly roadmap reviews where the deck has to survive frequent updates without constant rebuilding.

## Build the roadmap as a deck family, not a single file

The easiest way to make roadmap reviews painful is to keep one giant presentation where every quarter becomes a lightly edited copy of the last one.

A better system is to think in deck layers:

- `core narrative`: how the team explains product direction
- `quarter-specific updates`: what changed this quarter
- `audience cuts`: leadership, cross-functional, customer-facing, or team-internal

That structure lets you keep recurring slides stable while updating only the parts that actually changed.

Common stable slide families:

- strategy overview
- product pillars or bets
- roadmap principles
- recurring KPI or adoption context
- delivery risks and dependencies

Common quarter-specific slides:

- now / next / later views
- launches that moved
- new bets added mid-quarter
- de-scoped work
- cross-functional requests or blockers

If the deck family is organized this way in Figma, Pitchdeck can export the right version without turning each quarter into a rebuild project.

## Design for discussion, not only for documentation

A roadmap presentation is usually reviewed live.

That means the slides need to support decision-making, not just archive information.

Three patterns help a lot:

1. Keep each slide focused on one planning question.
2. Show confidence, dependency, or status signals consistently.
3. Reserve detailed implementation notes for speaker notes or linked supporting material.

For example, one slide can answer "What are the top bets this quarter?" while another answers "What is most at risk?" Trying to answer both questions on the same crowded slide usually produces a deck that nobody can scan quickly.

This is where Figma is useful as the design source. The team can define recurring visual patterns for themes like:

- planned
- in progress
- at risk
- needs decision
- slipped

Once those patterns are stable, the quarterly refresh becomes an update exercise instead of a redesign exercise.

## Make change visible on purpose

Roadmap reviews get chaotic when attendees cannot tell what is genuinely new.

I like to build each quarter's deck around explicit change markers:

- new this quarter
- changed since last review
- removed or deferred
- blocked by dependency

That does two things.

First, it reduces meeting time spent rediscovering what changed. Second, it gives the presenter a cleaner narrative arc: here is the core plan, here is what moved, and here is why.

Without those markers, the team ends up explaining the same deltas verbally every quarter while the deck itself remains vague.

## Decide the output format before the review cycle starts

This step saves more pain than people expect.

Different roadmap audiences want different artifacts:

- leadership may want editable PowerPoint
- cross-functional peers may prefer Google Slides comments
- async stakeholders may be best served by a hosted web deck
- archived planning material may need a stable PDF

If that choice waits until the final day, the team often designs one deck and discovers too late that the handoff format does not match the real use case.

Pitchdeck helps because the same Figma source can produce different outputs, but the deck should still be planned with the destination in mind.

Simple guidance:

- Use hosted web presentation when async review and shareability matter most.
- Use PowerPoint when stakeholders will keep editing the content after signoff.
- Use Google Slides when comments and collaboration speed matter more than polish.
- Use PDF when the team needs a locked record of the quarter's plan.

## Use speaker notes for nuance that should not clutter the slide

Roadmap decks often become overloaded because product teams are afraid of losing the caveats.

The result is slides full of qualifiers, dependencies, and meeting-language that nobody can read quickly.

A better split is:

- slides carry the primary decision or update
- speaker notes carry nuance, caveats, and presenter guidance

That is especially useful for:

- launch timing uncertainty
- internal dependency detail
- tradeoff explanations
- suggested talking points for team leads presenting the deck later

The slide stays readable. The context still exists. The exported presentation remains useful for whoever presents it next.

## Run the review as a quarterly refresh workflow, not a one-time deck sprint

A practical rhythm looks like this:

1. Update the core roadmap source in Figma as planning decisions harden.
2. Refresh only the quarter-specific slide modules.
3. Mark net-new, changed, and removed items clearly.
4. Choose the export format for each audience before distribution.
5. Export with Pitchdeck once the review deck is stable.

That sequence keeps the deck tied to the planning process instead of turning it into a separate presentation project that starts late and drains time.

It also reduces a common product-ops problem: the "real roadmap" lives in one system, but the deck everyone shares was manually recreated elsewhere and immediately starts drifting.

## What to check before the deck goes out

Before sharing the roadmap deck, confirm:

- the slide order reflects the current planning conversation
- changed priorities are visibly marked
- recurring roadmap states use one visual system
- sensitive detail is in the right version of the deck
- the chosen export format matches the audience
- speaker notes carry nuance that should not live on-slide
- filenames or shared links reflect the quarter and audience clearly

If the same deck will be reused across several meetings, test one export early. Editability issues are much cheaper to catch before the final review cycle.

## Where Pitchdeck helps most

[Pitchdeck](/pitchdeck/) is valuable here because quarterly roadmap communication is rarely just a design problem. It sits between planning, alignment, presentation, and file handoff.

Keeping the roadmap source in Figma gives the team a cleaner center of gravity. Export flexibility then becomes a downstream advantage instead of the whole job. That is the real win.

If your product organization rebuilds roadmap decks every quarter from scratch, move the recurring structure into a Figma-first system and use Pitchdeck to deliver the right artifact afterward. The result is less version chaos, clearer planning conversations, and a roadmap deck that actually keeps up with the quarter it is supposed to explain.

---

---
type: article
title: Localhost Design QA Workflow for Frontend Developers
description: Compare unfinished local builds against Figma before opening a pull request so layout drift gets fixed while context is still fresh.
datePublished: 2026-06-12T00:00:00.000Z
dateModified: 2026-06-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-localhost-design-qa-workflow-for-frontend-developers/
markdownUrl: https://www.hypermatic.com/articles/pixelay-localhost-design-qa-workflow-for-frontend-developers.md
---

# Localhost Design QA Workflow for Frontend Developers

A lot of visual QA happens later than it should.

The code is already pushed. A staging URL exists. Designers start leaving comments. Engineers now have to reconstruct what they changed two days ago while also trying to separate real design issues from environmental noise.

That is expensive.

[Pixelay](/pixelay/) is especially useful before that point because it can compare Figma designs against live, staging, localhost, and protected environments directly in the browser. For frontend developers, localhost review is where the cheapest visual fixes usually live. The implementation context is still fresh, the branch is still local, and nobody has started a long feedback thread yet.

## Localhost QA solves a different problem from staging QA

Staging review is important, but it is not the same thing.

Staging is where the team validates:

- integrated content
- environment-specific behavior
- merged changes
- team review and signoff

Localhost QA is better for:

- catching spacing drift while the code is still in your head
- checking a route before opening a pull request
- validating a responsive fix immediately
- confirming a component refactor did not quietly change alignment

The existing library already covers nearby workflows like [Pull Request Design QA Workflow for Frontend Teams](/articles/pixelay-pull-request-design-qa-workflow-for-frontend-teams/), [Responsive Website QA from Figma](/articles/pixelay-responsive-website-qa-from-figma/), and [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/). This article is narrower: it is about using Pixelay on local development builds before the branch leaves your machine.

## Pick the routes that deserve comparison before you start coding

Local design QA gets faster when the review set is defined early.

Before diving too deep into implementation, note:

- which Figma frame maps to which route
- which breakpoints matter most
- which states are hardest to reproduce
- which sections are most likely to drift during the work

That sounds obvious, but it prevents a common mistake: opening Pixelay only after the page is "basically done" and then realizing the important state was never easy to compare in the first place.

For example, if the work touches:

- a hero section with responsive screenshot crops
- a pricing card with dense bullets
- a modal behind a login state
- a long settings page with sticky navigation

those details should be part of the local QA target upfront, not an afterthought.

## Compare the build while the implementation choices are still fresh

The best moment for localhost review is usually after the first real pass works, not at the very end.

That gives you time to fix:

- spacing that drifted during refactor
- typography that feels slightly off
- image crops that do not match the design intent
- layout behavior that looked acceptable in code but clearly feels wrong in comparison

This is where Pixelay helps more than memory-based QA. You do not have to wonder whether the padding used to be tighter or whether the card alignment only feels off because you have stared at it too long. The comparison makes the mismatch concrete.

## Review real stress cases, not just the prettiest state

A localhost review is only useful if it uses realistic content and states.

That means checking more than the clean happy path:

- longer headlines
- real button text
- dense pricing copy
- empty or loading states if they are part of the work
- mobile breakpoints
- a likely browser width for the target audience

If the page only matches Figma with placeholder-perfect content, the review is incomplete.

This matters especially for marketing pages and app UI that inherit real CMS text or dynamic content. Small content differences often create the visual bugs that later show up on staging.

## Capture issues in developer language

One of the best parts of local QA is that you can write sharper notes because you already know the implementation.

Instead of vague reminders like "hero feels off," the findings can become:

- CTA container is 8px too low at 1280px width
- screenshot crop is using the tablet asset in desktop layout
- feature card gap collapses after the second row wraps
- mobile header line-height does not match the approved design

That is much easier to act on than a generic design comment days later.

Even if nobody else sees those local notes, they make the fix loop faster because the evidence is specific and tied to the code you are already touching.

## Know what should wait for staging

Localhost QA is powerful, but it is not the final source of truth for everything.

Some issues are better left for staging or team review:

- content that only appears with production-like data
- integrations that need a shared environment
- cross-browser differences your local setup cannot represent well
- auth or permissions cases that require seeded accounts

The goal of localhost review is not to replace later QA. It is to remove the cheap visual problems before they reach that stage.

If the branch can leave your machine with the obvious spacing, hierarchy, and responsive issues already resolved, staging review becomes much more valuable.

## A simple local review loop

For most frontend developers, this workflow is enough:

1. map the Figma frames to the local routes you are changing
2. get the first credible implementation working
3. compare in Pixelay on localhost before opening the PR
4. fix the highest-signal mismatches while the code context is fresh
5. leave only the environment-dependent questions for staging

That is a much healthier loop than waiting for the full team review to surface issues you could have caught in ten minutes alone.

## What to focus on during the comparison

Prioritize:

- spacing rhythm
- typography scale and line-height
- image or screenshot cropping
- card and section alignment
- CTA prominence
- responsive behavior at key breakpoints
- whether the page still communicates the same hierarchy as the Figma design

Those are the issues that are easiest to fix locally and most frustrating to revisit after the branch is already in review.

## Where Pixelay helps most

[Pixelay](/pixelay/) is valuable here because it makes local design QA objective without forcing a slower team ritual. You can compare the real build to the approved design before the work leaves your machine, fix the obvious drift immediately, and open a pull request that is already much closer to the intended result.

That changes the tone of later review.

Instead of using design QA to discover the basics, the team can use it to catch the genuinely subtle issues that deserve a second set of eyes. If you want fewer visual nitpicks in PR review and less backtracking after staging, localhost comparison is one of the simplest Pixelay habits to standardize.

---

---
type: article
title: Release Note GIF and MP4 Workflow from Figma
description: Export lighter, clearer product update GIFs and MP4 clips from Figma so release notes, changelogs, and in-app announcements show the change without bloating the page.
datePublished: 2026-06-12T00:00:00.000Z
dateModified: 2026-06-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-release-note-gif-and-mp4-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-release-note-gif-and-mp4-workflow-from-figma.md
---

# Release Note GIF and MP4 Workflow from Figma

Release note media has a deceptively small job.

It does not need to sell the whole product. It does not need to feel like a polished campaign ad. It needs to show one change clearly enough that a customer, teammate, or stakeholder immediately understands what is new.

That is exactly why a lot of changelog visuals miss the mark. Teams reuse heavy marketing exports, record oversized screen captures, or publish looping GIFs that are either too blurry to teach anything or too large to load comfortably in a help center, email, or in-app update.

[TinyImage](/tinyimage/) is a strong fit for this workflow because it keeps compression, image export, GIF export, MP4 export, and PDF/image cleanup inside Figma. For release-note work, the real value is not only smaller files. It is being able to standardize one repeatable export pass for product updates without re-recording or re-compressing every clip in separate tools.

## Release note motion has a different job from marketing motion

Teams often treat changelog media like a miniature ad.

That usually creates the wrong output.

Release note visuals should prioritize:

- showing the exact UI change
- making the before-and-after obvious
- loading quickly inside docs, changelog pages, or customer emails
- staying readable at small embedded sizes

They usually should not prioritize:

- long ambient motion
- decorative transitions
- wide cinematic framing
- extra scenes that bury the actual update

The closest related article in the existing library is [Social Share Image Export Workflow from Figma](/articles/tinyimage-social-share-image-export-workflow-from-figma/). That article is about card previews and distribution surfaces. This one is narrower: it is about product update clips whose job is explanation, not promotion.

## Start by deciding whether the update needs a GIF or an MP4

This choice should come before the export.

For release notes, a simple rule works well:

- Use GIF when the loop is very short and the publishing surface expects silent inline motion.
- Use MP4 when the motion is longer, more detailed, or likely to become too heavy as a GIF.

Here is the practical difference.

A tiny interaction like "new hover state," "button loading animation," or "expanded filter panel" can often work as a GIF if the loop is tight and the crop is focused. A longer product update like "new onboarding flow," "multi-step settings change," or "dashboard interaction" usually benefits from MP4 because the file can stay lighter while preserving more visual quality.

If the team starts with "we always use GIFs," the result is often a giant file that still looks soft. If the team starts with "we always use video," the embedded changelog may feel heavier than it needs to be. Choose based on the length and teaching goal of the update.

## Show one change per clip

Most weak release-note media tries to demonstrate too much at once.

One clip should usually answer one question:

- what moved?
- what became easier?
- what new option appeared?
- what result should the user expect?

That means the source frame sequence in Figma should be ruthlessly simple.

Good examples:

- opening the new settings panel and changing one option
- showing the old state, then the updated state
- demonstrating one new shortcut or shortcut result
- previewing one revised export or share flow

Less helpful examples:

- combining three unrelated improvements in one loop
- starting far away from the changed area
- showing the full interface when only one module matters
- using motion so fast that the viewer cannot tell what changed

If the change needs a long explanation, use multiple clips with short labels instead of one overloaded export.

## Crop for recognition, not for atmosphere

A common release-note mistake is exporting the whole application window because it "looks more real."

Usually that just makes the change harder to see.

For update clips, the crop should help the viewer answer two questions fast:

1. Where in the product am I looking?
2. What changed here?

That often means keeping enough surrounding UI to orient the user while removing everything unrelated to the change. If a settings update only touches one sidebar section, do not make the viewer process the entire dashboard chrome. If the update affects a modal, keep the modal and the triggering context, but do not pad the frame with dead space.

This is the same mindset that improves still-image documentation too, which is why [Documentation Screenshot Workflow for Support Teams](/articles/tinyimage-documentation-screenshot-workflow-for-support-teams/) is a useful companion read when your release notes also feed help center content.

## Build a release-note export pass instead of exporting ad hoc

Once the sequence is approved, the export process should be predictable.

A strong pass usually looks like this:

1. Finalize the exact frames or animation states for each update.
2. Name them by feature and version, not by draft language.
3. Export the first pass at clarity-first quality.
4. Compare the result at the real embedded size in the changelog or email layout.
5. Compress only until the clip still explains the update comfortably.

Example filenames:

- `release-2026-06-settings-presets.mp4`
- `release-2026-06-bulk-export-toggle.gif`
- `release-2026-06-new-compare-mode.mp4`

TinyImage helps because the team can stay inside Figma for the export and compression pass instead of juggling a browser recorder, a GIF compressor, and another file optimizer afterward. That is especially useful when release-note assets also get reused in email, docs, app notifications, or social posts.

## Review the clip where it will actually live

This is where a lot of teams stop too early.

A release-note clip can look fine in isolation and still fail in context because:

- the embedded card renders smaller than expected
- the loop restarts before the user notices the key change
- text inside the UI becomes unreadable in a narrow column
- the file loads too slowly in a long changelog page
- the surrounding page background makes the cropped clip feel muddy

So do one live-context review before publishing.

Check it:

- in the changelog layout
- in the release email if it will be reused there
- in mobile width if the docs surface is responsive
- alongside the caption or explanation text that introduces it

This matters because release-note media is usually consumed quickly. If the change is not obvious in a glance, the clip is not doing enough work.

## Keep the written caption and the motion aligned

The media should not have to carry the whole explanation.

The strongest update entries pair the motion with a caption that tells the viewer what to notice:

- "Save custom export presets for repeated handoff jobs."
- "Preview the new comparison mode before publishing."
- "Switch between campaign variants without reopening the file."

That reduces cognitive load. The clip shows the change. The caption names the value.

Without that pairing, readers have to reverse-engineer the point of the motion. That is fine for a product demo reel. It is not fine for release communication.

## A practical checklist for changelog media

Before shipping a release-note GIF or MP4 from Figma, check:

- the clip demonstrates one change clearly
- the crop keeps the changed area readable
- GIF versus MP4 was chosen based on length and weight, not habit
- the file is reviewed at the real embedded size
- the caption tells the viewer what to notice
- the loop length is short enough to teach without feeling frantic
- the exported asset is named clearly for reuse in docs or email

## Where TinyImage helps most

[TinyImage](/tinyimage/) does not decide which product changes are worth showing. That still takes judgment from product, design, and marketing. What it removes is the repetitive production layer between "we should show this update" and "the media is clean enough to publish everywhere."

That is what makes the workflow durable.

If your team publishes changelogs, release emails, or in-app announcements often, standardize a dedicated release-note export pass inside TinyImage instead of treating every update as a one-off screen recording task. The result is clearer product communication, lighter files, and fewer last-minute media fixes every time something ships.

---

---
type: tutorial
title: How to export Figma to Canva with one click using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-06-12T00:00:00.000Z
dateModified: 2026-06-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-canva-with-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-canva-with-one-click-using-convertify.md
---

# How to export Figma to Canva with one click using Convertify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how you can automatically export your designs from Figma to Canva using the Convertify Figma plugin. To get started, all you need to do is go to your Figma file, go down to the little actions icon down here at the bottom of the toolbar, and if you search for Convertify under the Figma plugins tab, if you click on the Convertify item, you can run that Figma plugin by either clicking on the run button down here, or I'd recommend clicking on the save icon next to that. That will let you run the Figma plugin from your Figma plugins list. I've already clicked on the save icon here. I'm just going to go to my Figma file, right-click anywhere, go down to plugins, and then go down to saved plugins, and click on Convertify. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically gives you a bunch of export and import options. Today we're just going to be focusing on the export from Figma options, and we're going to select the export Figma to Canva option. With that option selected, all you need to do is either click on the export this page button, which will export all of the frames on your current page out for importing into Canva. Or if you only want one or two or just a handful, you can select the frames that you want and then you can click on the export selected frames button to just export those. Just to keep it simple, I'm going to export this whole page. I'm going to click on export this page, and that's going to start the Canva conversion process.

This is basically going to take every layer from our Figma frames in Figma here, and it's going to convert all of those out to a file that we can then import into Canva. Because Canva imports PSD files, this is actually generating a Canva-specific PSD file with a bunch of fixes and tweaks in it to make it ready for importing into Canva. Once that wraps up, depending on how many layers you've got and how many images you've got, it's going to bundle that PSD file up. Once that finishes, it's going to allow us to download it directly to our computer. You can see here it's telling us that the file is ready. All we need to do is click on the download PSD for Canva button down here. Once you click on that, just go ahead and save it anywhere on your computer. I'm just going to save it to the desktop. Then you'll have a PSD file on your desktop.

You can see here that we've now got this PSD file that we've just exported from the Figma plugin. All we need to do now is go to our browser and open up canva.com. If you sign into your own Canva account, you'll just be on the homepage here. All you need to do is drag and drop that file that we just exported, the PSD file from your desktop, into the browser window while you're on your Canva homepage. That's going to automatically upload the item. You can see that it's uploading the item into Canva now. Depending on your internet speed, this is going to take a few seconds or maybe even up to a minute. Okay, that's just finished uploading now. You can see here we've got a little thumbnail preview. It's uploaded the file correctly, and you can see that's just been put in our uploads folder.

Now that we've got that uploaded, all we need to do is click on the item. You can rename it if you want, but I'm just going to click on the thumbnail here. That's going to take me to the edit page. You can see here if I zoom in, this is all editable content. We can change this content. We can move it around because these are individual layers. This is going to allow us to edit our layers from Figma directly in the Canva editor. We've basically exported all of those layers from our Figma file into Canva, and now we can edit them in here if you need to get it into the Canva platform for any reason.

I'm going to show you one more example just to catch an edge case that you might run into. You notice down here that it says that Canva has an import limit. Canva supports PSD imports up to 300 megabytes in size. If it's bigger than that, Canva basically won't import the file. You'll notice here that the one we exported is under that; it's about 220 megabytes. But for larger pages or pages with larger image assets and things like that, like this one here, it's going to come out above 300 megabytes. What we can do is run the Figma plugin again. I'm just going to right-click on the canvas, go down to plugins, and go down to saved plugins and click on Convertify. That's just going to run the Figma plugin in this new Figma file here.

In this case, you can see that we've got an option down here, this toggle option after we've selected the export Figma to Canva option. We've got this option down here to split exports into separate PSD files. What this does is it basically takes each frame on your current Figma page and splits each of those out into their own PSD file rather than bundling them all together into a single file. I'm going to enable that option now, and I'm going to click on the export this page, and that's going to export the page. But this time, as we just saw, we've enabled that toggle. It's going to export the PSD files individually rather than bundling all the frames up into a single file.

You can see here it's just bundling those last files. It's packaging them up into a zip file. All we need to do this time is click on the download zip button. I'm just going to click on that now. Again, I'm just going to save that to my desktop. If I go down here, you'll see that we've now got a zip file instead of a single PSD file. This contains all of our PSD files that we just exported. If we open up that folder, you can see here that there's a PSD file for each of these frames. Each of these frames has been included in the file names, so you know which one's which.

Now all we need to do is the same process. We just need to take whichever files we want to upload or import into Canva and go back to our homepage here. You can import multiple files at the same time just by selecting them all and dragging them into the browser. Today, I'm just going to keep it simple and drop in just the first one and show you what that looks like just for the sake of time. That's just finished uploading the file, and you can see here again it's swapped out the thumbnail. All we need to do again is just click on that thumbnail here. That's going to take us to the Canva editor. You'll notice again we've got individual layers. We can click on these layers. We can edit that content here. Again, the images and other layers are all editable as well.

That's basically it. I just wanted to show you a quick tutorial on how you can export your Figma designs directly from Figma and import those into Canva. This is going to be a really easy way of doing it. It also gets around the issue of not being able to import Figma files natively, as Canva likes to suggest exporting the files as SVGs or just static images and doing it that way. This way allows you to keep all of the layers intact, and you don't have to compromise with SVG paths and weird layer structures that aren't going to really match up exactly with your Figma designs. Hopefully, that helps. If you're using Canva and Figma and need to pull your assets out of Figma and into Canva for any reason, this is hopefully going to make that process a lot easier for you. We'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Retargeting Banner Workflow for Ecommerce Teams
description: Plan, adapt, and export retargeting banner sets from Figma so ecommerce teams can refresh offers, audiences, and sizes without rebuilding every ad by hand.
datePublished: 2026-06-11T00:00:00.000Z
dateModified: 2026-06-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-retargeting-banner-workflow-for-ecommerce-teams/
markdownUrl: https://www.hypermatic.com/articles/bannerify-retargeting-banner-workflow-for-ecommerce-teams.md
---

# Retargeting Banner Workflow for Ecommerce Teams

Retargeting banners look repetitive from the outside. Inside the workflow, they are where campaign complexity starts multiplying.

The same product may need one message for product viewers, another for cart abandoners, another for discount-sensitive shoppers, and another for previous customers. Then every concept has to exist in several sizes, possibly several formats, and still reach ad ops with naming and click behavior that make sense.

That is why retargeting creative is not just "make more banner sizes." It is a variant management and production workflow problem.

[Bannerify](/bannerify/) is a strong fit because the plugin keeps animation, preview, and export close to the Figma source. For ecommerce teams, the real benefit is being able to adapt one campaign system across audience stages without sending every variation through a separate hand-coding or rebuild loop.

## Retargeting creative should change by audience intent

One weak retargeting pattern shows the same banner to everyone who touched the site.

That wastes the one advantage retargeting has:

the audience already told you something.

A stronger Figma workflow starts by separating the audience stages. Common groups include:

- product viewers who did not add to cart
- cart abandoners
- category browsers
- repeat customers
- lapsed customers returning during a promotion

Those groups do not always need totally different layouts, but they often do need different emphasis.

For example:

- product viewers may need reassurance and clarity
- cart abandoners may need friction-removal or urgency
- repeat customers may respond better to familiarity than discounting

If every banner variant uses the same message, the production workflow is working harder than the strategy.

## Build a master creative system before duplicating sizes

The easiest way to lose control is to start with final banner sizes and treat each one as a separate artboard to solve manually.

Instead, define a master retargeting system first:

- headline logic
- offer hierarchy
- product image rules
- CTA treatment
- animation rhythm
- end-frame structure

Then ask which parts stay global and which parts change by audience.

Global:

- brand styling
- product visual language
- animation structure
- layout logic

Audience-specific:

- headline copy
- promotional framing
- urgency level
- CTA wording
- destination URL when needed

This is the point where [Bannerify](/bannerify/) helps most. The team can keep the design and motion system together in Figma, then export the final banners to HTML5, GIF, MP4, or other supported outputs once the audience variants are approved.

If your team already manages many production variants, [Figma Banner Ad Variant Production Workflow](/articles/bannerify-figma-banner-ad-variant-production-workflow/) is the closest supporting read.

## Keep retargeting motion useful, not busy

Retargeting banners often over-animate because the team wants the ad to feel more persuasive than it actually is.

That usually backfires.

The audience already knows the product or offer. The banner's job is usually to reintroduce relevance, not to explain everything from zero.

That means animation should support:

- message order
- product focus
- CTA visibility
- final frame readability

Not:

- constant motion with no pause
- multiple competing effects
- transitions that delay the actual offer

This matters even more in smaller placements where the viewer only gives the ad a moment of attention. If the animation sequence spends that time showing generic brand motion, the retargeting message arrives too late.

For teams still tightening their motion rules, [Banner Ad Animation Timing Guidelines](/articles/bannerify-banner-ad-animation-timing-guidelines/) is a useful companion.

## Match formats to the placement plan

Retargeting sets often need several output types depending on the campaign mix:

- HTML5 banners for richer display placements
- GIF or MP4 when simpler motion assets are enough
- alternate formats for review, approvals, or platform constraints

The mistake is deciding on the format only after the creative is finished.

Instead, ask early:

- which networks or placements need HTML5?
- where is a lighter video or GIF asset acceptable?
- which placements have stricter file-size limits?
- who needs preview links before trafficking?

This is where Bannerify helps operationally. The export choice stays near the design source, so the same Figma creative system can produce the formats the media workflow actually needs.

If the format decision is still unclear, [When to Use HTML5 vs GIF vs MP4 Banner Exports](/articles/bannerify-when-to-use-html5-vs-gif-vs-mp4-banner-exports/) is the best supporting article in the current library.

## Standardize naming by audience, size, and offer

Retargeting assets become hard to manage when the file names only describe size.

A stronger naming pattern includes:

- campaign
- audience group
- size
- offer version
- locale if relevant

For example:

- `summer-retargeting-product-viewer-300x250-v1`
- `summer-retargeting-cart-abandoner-728x90-v2`
- `summer-retargeting-repeat-customer-160x600-v1`

That naming discipline matters during QA and trafficking because people should not need to open the file to understand what it is supposed to do.

If naming is already painful in your team, [Display Ad Asset Naming Convention for Agencies](/articles/bannerify-display-ad-asset-naming-convention-for-agencies/) is worth applying even if you are working in-house.

## QA the campaign as an audience matrix

Retargeting banners should not be reviewed one file at a time in isolation.

Review them as a matrix:

- every required audience has coverage
- every required size exists for that audience
- the correct offer appears in the correct group
- CTAs match the intended landing experience
- final frames remain readable
- exports stay within the required size budgets

This is where teams often discover that the cart-abandoner set accidentally inherited the generic product-viewer CTA, or that the repeat-customer offer is still using the wrong landing URL.

Those are not just creative details. They are performance and operations issues.

If your team tends to discover these problems too late, pair this workflow with [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/) before final delivery.

## A practical retargeting production loop

For recurring ecommerce campaigns, this rhythm works well:

1. Define the audience groups and what message each one needs.
2. Build one shared retargeting system in Figma before duplicating sizes.
3. Adjust copy and offer hierarchy by audience, not by random banner frame.
4. Apply restrained motion that supports the message order.
5. Export the final set in the formats each placement plan requires.
6. QA the matrix of audience x size x offer before trafficking.

That loop scales much better than rebuilding every banner family by hand each time the promotion changes.

## Why Bannerify fits this workflow

[Bannerify](/bannerify/) is useful because retargeting production sits right at the point where creative intent and operational complexity collide.

The team needs to keep:

- one design source of truth
- multiple audience variants
- multiple banner sizes
- multiple output formats
- one clean handoff to ad ops

That is exactly where a Figma-first banner workflow becomes valuable.

If your ecommerce team keeps reworking retargeting creative in scattered files or handing variants off for separate rebuilds, moving the system into Bannerify is one of the clearer ways to make the campaign faster to adapt without making QA and trafficking more chaotic.

---

---
type: article
title: Brand Guidelines PDF to Figma Workflow
description: Turn brand guideline PDFs into more usable Figma working files so teams can reuse logos, colors, layouts, and reference assets without starting from screenshots.
datePublished: 2026-06-11T00:00:00.000Z
dateModified: 2026-06-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-brand-guidelines-pdf-to-figma-workflow/
markdownUrl: https://www.hypermatic.com/articles/convertify-brand-guidelines-pdf-to-figma-workflow.md
---

# Brand Guidelines PDF to Figma Workflow

Brand guidelines often arrive in the least editable format possible.

You get a PDF from a client, a newly acquired company, a partner, or an internal brand team. It contains logos, color rules, typography, spacing examples, social templates, and maybe a few interface references. It looks polished, but the moment a designer needs to actually use any of it inside Figma, the workflow falls apart.

People start copying screenshots, retyping hex values, and redrawing simple assets from scratch. That is wasted effort, especially when the PDF already contains structure worth recovering.

[Convertify](/convertify/) is useful here because the product page already covers importing PDFs and other external design formats into Figma. For brand systems, the practical job is not "make the PDF editable in one magical step." It is turning the useful parts of the PDF into a working Figma source that the team can actually build with.

## Decide whether the PDF is reference material or a rebuild starting point

Not every brand guidelines PDF needs the same treatment.

Before importing anything, decide what the team really needs:

- a reference file to consult while designing
- editable brand assets like logos and icons
- reusable text styles, color tokens, and layout patterns
- a starting point for building a real Figma brand kit

That decision matters because it changes how much cleanup is worth doing.

If the PDF only needs to be available as a visual reference, a lighter import and organization pass may be enough. If the goal is to operationalize the system inside Figma, the team needs a more deliberate extraction workflow.

The closest current article in the library is [PDF Design File Extraction Workflow](/articles/convertify-pdf-design-file-extraction-workflow/). That article covers PDFs broadly. This one is specifically about brand guidelines, where the value comes from turning static standards into reusable working assets.

## Import the PDF with realistic expectations

A brand book PDF may contain:

- live text
- flattened imagery
- vector logos
- charts or diagrams
- page backgrounds
- tightly grouped layout elements

Some of those import cleanly. Some will need repair.

That is why the right mindset is extraction, not blind conversion.

After import, review each page with four questions:

1. Which elements are already usable?
2. Which elements are recoverable with light cleanup?
3. Which elements are better rebuilt in Figma?
4. Which pages should remain reference-only?

This prevents a lot of low-value cleanup work. If a decorative timeline page is not going to be reused, do not spend an hour making it perfect. Save the effort for logos, type rules, color systems, and key template pages.

If your team needs the import step itself documented more directly, [how to import PDF files to Figma with one click using Convertify](/tutorials/how-to-import-pdf-files-to-figma-with-one-click-using-convertify/) is the most relevant tutorial to pair with this workflow.

## Extract the brand primitives first

The fastest way to make PDF cleanup useful is to pull out the pieces that will be reused everywhere.

Start with:

- logos and lockups
- color swatches and supporting colors
- typography hierarchy
- icon families
- grid or spacing references
- recurring UI or social layout patterns

Do not start by perfecting every PDF page. Start by building a clean Figma foundation from the most reusable material.

For example:

- reconstruct the main logo set onto one dedicated page
- turn color values into named styles or variables
- rebuild the headline and body hierarchy as real text styles
- isolate icon assets that can become components

Once those primitives exist, the imported PDF pages stop being the main asset. They become source material supporting a better Figma-native system.

## Separate editable assets from reference pages

One mistake teams make is mixing cleaned assets and raw imported pages together with no distinction.

That creates confusion later. Designers cannot tell whether:

- a page is the original imported reference
- the asset has already been approved for reuse
- a logo was rebuilt or only copied visually
- a page still contains broken text groups or missing fonts

A better file structure is:

- `Reference PDF Pages`
- `Extracted Logos`
- `Brand Tokens`
- `Typography`
- `Reusable Layouts`
- `Needs Cleanup`

That structure lets the team use the imported file immediately while still making it obvious what is safe to build from.

If import cleanup is already a recurring problem, [Figma Import Cleanup Checklist](/articles/convertify-figma-import-cleanup-checklist/) is the best supporting article in the current library.

## Rebuild what the team will touch often

Brand systems usually contain a few assets that deserve real reconstruction instead of endless patching.

These often include:

- logo lockups
- button patterns
- social card layouts
- cover templates
- slide covers
- simple brand diagrams

Why rebuild them?

Because repeated use is where messy imports become expensive. A half-editable logo or broken text stack might survive one internal task. It becomes a problem when twenty designers start reusing it across campaigns, slides, emails, or landing pages.

Convertify helps recover the starting material, but manual judgment still matters. The best workflow asks:

What should stay as source evidence, and what deserves to become a proper Figma object?

That is the real handoff from conversion to design operations.

## Watch for fonts, spacing, and false precision

Brand PDFs can look precise while hiding fragile implementation details.

Common issues after import include:

- substituted fonts changing the rhythm
- paragraph groups splitting unexpectedly
- logos importing with too many nested vector layers
- faux spacing created by manual positioning instead of true layout logic
- gradients or imagery that look right visually but are hard to edit

That is why it helps to validate the extracted system against the original PDF, but not worship it page by page.

If the imported logo is technically editable but contains thirty unnecessary groups, clean it.
If the imported typography hierarchy looks close but is not practical to reuse, rebuild it.
If the imported page layout is clear enough as a reference but not worth reconstructing, keep it as reference.

The goal is a working brand system, not archaeological perfection.

## Turn the cleaned file into an intake asset for the rest of the team

The final output should help other people, not just the designer who did the cleanup.

A useful Figma brand working file should make it easy for teammates to find:

- approved logos
- standard colors
- headline and body text styles
- sample compositions or cover frames
- any imported pages that still matter for context

This is where many PDF-to-Figma efforts fail. The conversion technically happens, but nobody turns the result into something operationally clear.

If the file still feels like a dump of imported pages, the workflow has only solved half the problem.

## A practical extraction sequence

For most teams, this sequence works well:

1. Import the brand guidelines PDF with Convertify.
2. Review each page for reusable versus reference-only material.
3. Extract the brand primitives first.
4. Rebuild frequently reused assets as proper Figma styles or components.
5. Separate cleaned assets from raw imported pages.
6. Run one comparison pass against the original PDF before sharing the file.

That last review matters because brand work often gets reused far beyond the original request. A sloppy first cleanup can quietly spread into decks, websites, ads, and onboarding materials.

## Why Convertify fits this job well

[Convertify](/convertify/) is helpful because the team does not have to begin with screenshots and retyping. The plugin can bring the PDF into Figma as something the team can actually inspect, recover from, and organize.

The important nuance is that a brand guidelines PDF is rarely the final working asset by itself. It is the source material for one.

That is why the strongest workflow is:

- import deliberately
- extract selectively
- rebuild what matters
- keep the final file useful for the next person

If your team regularly inherits brand books as PDFs, standardizing this Convertify workflow is one of the easier ways to turn static brand documentation into a practical Figma system instead of a pile of screenshots and guesswork.

---

---
type: article
title: Copy Freeze Workflow for Figma Product Launches
description: Lock product launch copy in Figma more reliably so marketing pages, screenshots, UI states, and review files stop drifting in the final stretch before release.
datePublished: 2026-06-11T00:00:00.000Z
dateModified: 2026-06-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-copy-freeze-workflow-for-figma-product-launches/
markdownUrl: https://www.hypermatic.com/articles/copydoc-copy-freeze-workflow-for-figma-product-launches.md
---

# Copy Freeze Workflow for Figma Product Launches

The most dangerous copy changes do not usually happen early.

They happen late, when the launch is almost ready and everyone feels pressure to "just tweak one more line." The headline changes on the landing page. A button label gets shortened in the app modal. A screenshot still shows the previous wording. Support documentation inherits an older variant. Then launch day arrives and nobody is fully sure which version is supposed to be final.

That is not really a writing problem. It is a copy freeze problem.

[CopyDoc](/copydoc/) is useful here because the plugin already supports exporting, importing, localizing, syncing, and updating Figma text from structured sources. For launch work, the most important value is operational: giving teams a controlled way to freeze approved language, apply it consistently, and verify that nothing drifted before the release ships.

## A copy freeze is not "nobody can touch words anymore"

A healthy copy freeze does not mean the text becomes untouchable forever.

It means:

- there is one clearly approved version
- any changes after that point are visible exceptions
- the design team is not applying last-minute edits from memory
- screenshots, modals, marketing pages, and supporting assets are all aligned to the same source

That distinction matters because launch teams often resist the phrase "freeze" when what they really fear is rigidity. The real goal is not rigidity. It is traceability.

This article is narrower than [Figma Copy Approval Workflow for Cross-Functional Teams](/articles/copydoc-figma-copy-approval-workflow-for-cross-functional-teams/). That article covers broad approval motion. This one is specifically about the final launch window, where approved copy needs to stop drifting across multiple Figma surfaces.

## Freeze by launch surface, not by giant document

One reason freezes fail is that the scope is too broad.

Instead of trying to freeze every possible string in one pass, group the launch into real surfaces:

- marketing landing page
- pricing or upgrade flow
- onboarding modals
- release screenshots
- email announcements
- help or support references

Then decide which surfaces must be locked together.

For example, if the launch headline appears in:

- the homepage hero
- a product screenshot
- an onboarding modal
- a release email

those pieces should be frozen as one cluster. Otherwise the wording can drift in exactly the places users notice most.

## Export the freeze set before final approval comments scatter

The easiest way to lose control is to let the last review round happen across screenshots, Slack replies, docs comments, and remembered conversations.

Use CopyDoc to export the actual launch copy set before the final review round fragments. The exact format can vary, but the key is that reviewers are looking at one authoritative set rather than half a dozen disconnected artifacts.

That review package should make it obvious:

- which strings are in scope
- which screen or asset each string belongs to
- what still needs approval
- which copy is already considered final

If the team also needs a bulk audit mindset, [Stale Product Copy Audit Workflow in Figma](/articles/copydoc-stale-product-copy-audit-workflow-in-figma/) is a strong companion article before the freeze starts.

## Define an exception path for post-freeze edits

This is the step most teams skip.

A copy freeze without an exception path usually turns into secret edits.

Create one rule:

If copy changes after freeze, it must be labelled as one of these:

- critical bug fix
- legal or compliance correction
- product change that affects meaning
- low-priority polish that will wait until after launch

That rule changes the tone of the final stretch. The team no longer debates every line as if all changes carry the same weight.

It also protects design and engineering time. A late wording tweak that forces screenshot regeneration, layout updates, and QA should be visible as a real tradeoff, not as a casual suggestion.

## Re-import approved copy in one controlled pass

Once the freeze set is approved, apply it back into Figma deliberately.

Do not:

- copy and paste from ad hoc notes
- patch only the obvious screen
- trust that repeated strings will be remembered later

Instead, use CopyDoc to bring the final approved text back into the design from the structured review source. That keeps the update closer to a system action than a memory test.

This matters most when one phrase appears in multiple places:

- CTA text
- modal titles
- screenshot captions
- pricing notes
- support references

The visual design may make each surface look different, but the copy decision still needs to stay unified.

## Always run a post-freeze visual QA pass

The freeze is not complete just because the text is approved.

After re-import, check:

- truncation in buttons and tabs
- hierarchy shifts from longer or shorter headlines
- outdated screenshots or diagrams
- mismatched terminology between marketing and product UI
- states that still contain the pre-freeze wording

This is where [Figma Copy QA Checklist for Product Teams](/articles/copydoc-figma-copy-qa-checklist-for-product-teams/) becomes essential. Approval answers "is this the right copy?" Launch QA answers "did that approved copy survive the design system, the states, and the final artifacts?"

Both are required.

## Keep the freeze visible to every downstream owner

Launch copy rarely stops inside one Figma file.

Other teams may still need to touch:

- product screenshots
- release emails
- blog imagery
- internal enablement assets
- app store graphics

That is why the frozen version needs a clear label and a clear handoff moment.

If support, marketing, or growth teams are still referencing an older export, the freeze has not actually worked no matter how tidy the Figma file looks.

One helpful practice is to treat the freeze set as a dated milestone:

- approved copy version
- approval date
- owner of any post-freeze exceptions

That gives later reviewers a way to ask the right question:

"Is this newer because it was intentionally changed, or because we lost track of the frozen version?"

## A practical launch-week rhythm

For most product launches, this sequence is enough:

1. Group the in-scope launch surfaces.
2. Export the launch copy set from Figma for final review.
3. Mark approved versus unresolved text clearly.
4. Freeze the approved set and define the exception path.
5. Re-import the final text back into Figma in one controlled pass.
6. Run a visual QA check across screenshots, UI states, and launch assets.
7. Share the frozen version with downstream teams so they stop working from older exports.

It is not glamorous, but it is the difference between a clean launch and a launch where five surfaces quietly say five slightly different things.

## Why CopyDoc is a strong fit here

[CopyDoc](/copydoc/) is helpful because launch copy drift is mostly a coordination problem disguised as a writing problem.

The plugin gives teams a better way to:

- export the real in-scope text from Figma
- review it outside the design canvas when needed
- re-import approved changes without manual paste chaos
- keep repeated strings aligned across multiple screens

That does not remove judgment from the process. Teams still need to decide what should change, who can approve it, and when exceptions are worth the risk.

What CopyDoc improves is the reliability of the freeze itself. And in the final days before launch, reliability matters a lot more than cleverness.

---

---
type: article
title: Plain Text and HTML Email Workflow for Lifecycle Teams
description: Ship HTML emails from Figma with a cleaner plain text companion workflow so lifecycle campaigns remain readable, compliant, and easier to deliver across platforms.
datePublished: 2026-06-11T00:00:00.000Z
dateModified: 2026-06-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-plain-text-and-html-email-workflow-for-lifecycle-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-plain-text-and-html-email-workflow-for-lifecycle-teams.md
---

# Plain Text and HTML Email Workflow for Lifecycle Teams

HTML gets most of the attention in email design. Plain text quietly decides whether the workflow is actually complete.

That matters more than many teams expect. Lifecycle campaigns are often reviewed only in their polished visual form, but the final send still has to survive platform requirements, accessibility expectations, rendering weirdness, and deliverability-sensitive environments where a plain text version is either recommended or mandatory.

When the plain text step is left until the end, one of two things happens:

- the platform auto-generates a weak fallback that reads awkwardly
- someone manually rewrites the email outside the design workflow

Neither outcome is great if the goal is a reliable production system.

[Emailify](/emailify/) is a strong fit because the plugin already exports production-ready HTML from Figma and supports plain text output alongside it. The practical opportunity is to treat plain text as part of the lifecycle email workflow from the start instead of as an afterthought after the HTML has already been approved.

## Plain text is not just a backup file

For lifecycle teams, plain text often matters in three situations:

- the ESP expects a text version for the campaign
- some subscribers or clients rely on a text-first experience
- the team wants a cleaner fallback for testing, review, or deliverability-sensitive flows

That means the plain text version should not be thought of as a broken copy of the HTML. It is a companion format with its own job:

- preserve the message
- preserve the hierarchy as much as possible
- make links understandable
- stay readable without visual design doing the heavy lifting

This article is narrower than [Lifecycle Email Workflow for Marketing Ops Teams](/articles/emailify-lifecycle-email-workflow-for-marketing-ops-teams/). That piece is about the broader operational system. This one focuses on making sure the plain text companion is deliberate, useful, and production-ready.

## Start by writing emails that survive without decorative structure

The easiest way to get a poor plain text output is to design an email whose meaning depends entirely on layout.

Lifecycle emails usually perform better when they already have:

- one obvious primary message
- clear section order
- descriptive link language
- button copy that still makes sense without the button style
- supporting copy that does not rely on columns or visual ornament to feel coherent

This is useful for HTML too, not just plain text. But plain text exposes weak content structure immediately.

If the message stops making sense once the image, background color, and spacing are gone, the email probably needed a content cleanup anyway.

## Decide which campaigns need special text attention

Not every email needs the same level of plain text review.

The highest-value candidates are usually:

- onboarding or welcome sequences
- activation nudges
- password resets and account notices
- billing reminders
- product announcements with multiple links
- winback or retention campaigns

These emails often contain enough important context that a generic auto-generated text version can become confusing.

For example, a lifecycle email with three CTAs may look obvious in HTML because the buttons are visually separated. In plain text, those same three actions can collapse into a wall of links unless the content structure is intentional.

If your work leans more transactional, [Transactional Email Design Workflow in Figma](/articles/emailify-transactional-email-design-workflow-in-figma/) is the closest adjacent article to read alongside this one.

## Build the HTML with text conversion in mind

The plain text version gets dramatically better when the HTML source is structured thoughtfully.

Inside the Figma design, pay attention to:

- heading order
- short paragraph blocks
- CTA wording that can stand alone
- labels that still make sense without icons
- lists that read logically in sequence

Good button copy:

- `View your account`
- `Complete setup`
- `Confirm your email`

Weak button copy:

- `Click here`
- `Learn more`
- `Go`

Those weak labels are not only a plain text problem. They just become much more obvious there.

The same rule applies to images. If an email depends on an image to carry the main message, the plain text version will feel hollow. Important meaning should already exist in the text layers themselves.

## Review links as content, not just as interactions

Plain text output changes how links are experienced.

In HTML, a button can look clear because it has size, contrast, spacing, and surrounding structure. In plain text, the same action often appears as linked copy with a visible URL or other fallback structure.

That means reviewers should check:

- whether the CTA wording still feels explicit
- whether repeated links are confusing
- whether the order of links matches the order of importance
- whether support, unsubscribe, or preference links are still distinguishable

This is especially important for lifecycle teams running many experiments or variants. A strong visual email can still turn into an unclear plain text asset if five links are stacked with almost identical wording.

## Do not wait until ESP upload to discover the text version is bad

One common failure mode is approving the design and HTML, uploading to the ESP, then discovering the platform's plain text view is hard to read.

That creates last-minute manual work and introduces a new place for content drift.

The better workflow is:

1. design the email in Figma with plain-language structure
2. export HTML and plain text together
3. review the plain text before upload
4. only then move into the ESP-specific send flow

If the team already uses platform-specific tutorials, the existing tutorial on [how to export plain text emails from Figma using Emailify](/tutorials/how-to-export-plain-text-emails-from-figma-using-emailify/) is the best practical next step. It shows the export behavior directly. This article is about when that feature matters and how to fit it into a better review system.

## Use plain text review to catch content issues early

A useful side effect of plain text review is that it exposes copy problems the HTML can hide.

Watch for:

- vague or duplicate CTA wording
- headline and body text that repeat the same thought
- legal or support copy buried too late
- sections that feel disconnected without visual separators
- overlong intros before the real action appears

For lifecycle teams, that makes the plain text pass more than a compliance box. It becomes a fast clarity audit.

If the campaign has multiple locales or brand variants, this pass becomes even more valuable because text-only review makes it easier to spot which version is structurally strongest before the visual polish distracts from the message itself.

## A simple workflow that scales across recurring sends

For most teams, this is enough:

1. Design the email in Figma with a clear text hierarchy.
2. Keep CTA labels and section headings explicit.
3. Export both HTML and the plain text companion from Emailify.
4. Review the text version as its own artifact, not as a broken HTML preview.
5. Upload or sync both versions into the target platform where supported.
6. Send a final test and confirm that the message still works in both formats.

This matters most in recurring systems like onboarding, nurture, activation, and retention. Once a team has a reliable pattern, every future campaign becomes easier to ship.

## Where Emailify fits best

[Emailify](/emailify/) does not magically make weak email content readable in plain text. What it does is remove the excuse for treating the plain text version as someone else's problem.

The team can:

- design in Figma
- export production-ready HTML
- keep the plain text companion tied to the same source workflow
- reduce manual cleanup before the send

That is what makes the process operationally cleaner.

If your lifecycle program already runs from Figma and the text version is currently being auto-generated, manually patched, or ignored, adding a real plain text review step through Emailify is one of the easier upgrades you can make. The result is not only better fallback rendering. It is a stronger content system overall.

---

---
type: article
title: Customer Onboarding Deck Workflow for Implementation Teams
description: Build onboarding decks in Figma that implementation, customer success, and clients can all use without rebuilding slides every time a new customer goes live.
datePublished: 2026-06-11T00:00:00.000Z
dateModified: 2026-06-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-customer-onboarding-deck-workflow-for-implementation-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-customer-onboarding-deck-workflow-for-implementation-teams.md
---

# Customer Onboarding Deck Workflow for Implementation Teams

The customer onboarding deck sits in an awkward place inside most teams.

It is not quite a sales deck, not quite a training deck, and not quite a one-off project artifact. It has to explain timeline, ownership, milestones, configuration steps, success criteria, and next actions clearly enough that both your team and the customer can keep referring back to it after kickoff.

That is why onboarding presentations often become messy faster than people expect. One version lives in Figma, another gets copied into PowerPoint, a PDF gets emailed after the call, and then the implementation manager keeps editing a stale file three weeks later.

[Pitchdeck](/pitchdeck/) is a strong fit for this workflow because the source design can stay in Figma while the final output can still be shared as a web presentation, PDF, PowerPoint, Google Slides, or Keynote file depending on what the customer needs. The practical gain is not only faster export. It is having one onboarding deck system that survives reuse across many accounts.

## Treat onboarding like a reusable operating asset

An onboarding deck is recurring infrastructure.

Most implementation teams need the same core sections again and again:

- welcome and team introductions
- implementation scope
- responsibilities on both sides
- timeline and milestones
- technical prerequisites
- training or enablement plan
- success criteria and next check-in

Only part of that should change per customer.

If the team rebuilds all of it every time, quality drops and version drift grows. If the team over-templates it, the deck becomes generic and unhelpful.

The better approach is to separate what should remain stable from what should change intentionally.

## Split the deck into stable modules and account modules

Inside Figma, create two layers of deck structure.

Stable modules:

- brand intro
- onboarding process explanation
- implementation phases
- support and escalation guidance
- recurring CTA or next-step patterns

Account modules:

- customer goals
- use-case screenshots
- account-specific configuration notes
- customer stakeholders and owners
- integration steps
- launch dates

This makes the deck easier to duplicate safely. The shared parts stay consistent. The customer-specific parts get real attention.

If your team already manages recurring stakeholder decks, [QBR Deck Workflow for Customer Success Teams](/articles/pitchdeck-qbr-deck-workflow-for-customer-success-teams/) is the closest companion piece. QBRs and onboarding decks serve different moments, but both work better as reusable systems than as fresh slide files each time.

## Design for clarity during the live call

An onboarding deck usually gets used in two modes:

- during a kickoff or implementation call
- afterward as a reference artifact

That means the slides need to work for presentation and for re-reading.

A few rules help:

- keep one main point per slide
- use timelines and ownership lists more than dense paragraphs
- make screenshots explain a step, not merely decorate the slide
- use speaker notes for nuance that should not clutter the visible slide

This is where Figma-first presentation work is helpful. Designers can keep the deck visually consistent, while Pitchdeck adds the practical presentation behavior and export flexibility that implementation teams still need.

## Decide early which export format is primary

Implementation decks get messy when the delivery format is only decided at the end.

Different customers need different things:

- PDF for easy circulation
- PowerPoint if the customer's PM or services team wants to edit it
- Google Slides if collaboration and comments matter
- web presentation if your team wants a cleaner live delivery experience

The mistake is treating all four outcomes as equally important all the time.

Choose the primary mode first, then support the others deliberately.

For example:

- If the deck is mainly for live kickoff, the web presentation may be primary.
- If the customer wants to annotate next steps internally, PDF may be the better default.
- If a partner or implementation agency will keep updating it, editable export matters more.

Pitchdeck is useful precisely because the team does not have to abandon Figma just to satisfy one of those downstream needs.

## Make status-heavy slides easy to update

Onboarding decks tend to rot where they contain the most operational detail.

That usually means:

- milestone tables
- owner assignments
- configuration checklists
- environment setup notes
- open questions and dependencies

The layout should expect change.

That means avoiding brittle slide designs that only work when every status line is the same length. It also means keeping enough whitespace for project reality. Customer onboarding almost always gains a new note, caveat, or dependency after the first call.

One useful test is this:

if the slide has to absorb one delayed milestone, one added stakeholder, and one technical prerequisite, does it still feel controlled?

If not, the deck is too decorative for the job.

## Use notes and links to reduce follow-up chaos

Implementation teams often repeat the same explanations after the kickoff:

- where the docs live
- which environment the customer should use
- what the next approval step is
- what dependencies are blocking launch

Pitchdeck helps here because the presentation can include notes, links, and a cleaner browser-based review flow without forcing every useful detail into the visible slide surface.

That means the deck can act as a hub instead of a static artifact.

For example, the onboarding presentation can point the customer toward:

- setup documentation
- a shared project plan
- support or escalation channels
- a sandbox or staging environment
- training resources for admins or end users

That is much better than expecting the kickoff deck and a follow-up email to do completely separate jobs.

## Review the deck as an implementation tool, not just as design work

Before shipping the deck, check:

- can a new implementation manager present it without guessing what the slide means?
- are responsibilities obvious on both sides?
- does the timeline reflect reality instead of ideal conditions?
- can the customer reuse the exported file afterward without losing context?
- are any slides too sales-heavy for a post-sale environment?

That last point matters. Onboarding decks often inherit too much sales language. Once the deal is closed, the deck should optimise for alignment, trust, and forward motion rather than persuasion theater.

If your team also needs a stronger final review flow, [Presentation Handoff Checklist for Designers](/articles/pitchdeck-presentation-handoff-checklist-for-designers/) is a useful support article before export.

## A practical onboarding deck workflow

For recurring customer launches, this is usually enough:

1. Maintain a reusable onboarding master in Figma.
2. Duplicate only the account-specific modules for each new customer.
3. Update goals, stakeholders, milestones, and technical dependencies first.
4. Add any implementation screenshots or product walkthrough slides second.
5. Review the deck in presentation mode, not only in design view.
6. Export to the format that best matches the customer's working style.
7. Keep the Figma source as the controlled master instead of letting exported copies become the new truth.

This is the step most teams skip:

the source of truth has to remain obvious after the kickoff.

Without that rule, the onboarding deck becomes just another asset that forks into five versions.

## Why this workflow is worth standardizing

Customer onboarding is one of the most repeated cross-functional presentation jobs inside SaaS and agency teams. It sits between design, implementation, customer success, and operations. That makes it exactly the kind of workflow that drifts unless the system is intentional.

[Pitchdeck](/pitchdeck/) gives implementation teams a cleaner middle path:

- design control stays in Figma
- presentations still export to practical client formats
- live delivery can feel more polished
- reusable modules stop being rebuilt from scratch

If your onboarding decks are currently scattered across copied PowerPoints, static PDFs, and old kickoff files, standardizing the flow around Pitchdeck is one of the easier ways to create a deck system that actually survives real customer work.

---

---
type: article
title: Localized Website QA Workflow from Figma
description: Compare translated websites against their Figma designs so locale-specific spacing, screenshots, and layout drift get caught before global pages go live.
datePublished: 2026-06-11T00:00:00.000Z
dateModified: 2026-06-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-localized-website-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-localized-website-qa-workflow-from-figma.md
---

# Localized Website QA Workflow from Figma

Localization bugs often hide in designs that were technically translated correctly.

The headline is in the right language, but the card layout wraps badly. The CTA becomes vague once it is shorter or longer in another locale. A screenshot still shows English UI. The German page uses the right copy but the spacing no longer supports the hierarchy. Then the team launches five markets and only notices the drift after customers or regional teammates point it out.

That is why localized website QA needs to be treated as its own workflow rather than as a quick post-translation glance.

[Pixelay](/pixelay/) is a strong fit here because it compares Figma designs against live websites, staging builds, localhost environments, and browser-based states. For localization work, that matters because the most important problems usually appear only when the real translated page is rendered in the browser, not while the source design still looks neat in Figma.

## Localized QA is not just "does the text fit?"

Text expansion is part of the problem. It is not the whole problem.

A good localized review should also check:

- hierarchy changes caused by different line lengths
- component spacing under longer labels
- screenshot or product-image mismatches
- locale-specific legal or pricing blocks
- visual balance changes between languages
- whether the page still feels native instead of translated second-hand

This is what makes localized QA different from a basic responsive pass. The page can be technically functional and still feel off because the translated experience no longer matches the design intent.

If your team already runs visual review on general builds, [Responsive Website QA from Figma](/articles/pixelay-responsive-website-qa-from-figma/) is the closest supporting article. This workflow adds the extra review layer that global pages need.

## Pair each locale build with the right Figma source

One easy way to make localized QA noisy is to compare a translated site against only the English design.

That can be helpful for structural reference, but it is rarely enough for final review.

Instead, try to keep:

- one approved source frame per locale where possible
- clear naming for locale-specific design variants
- explicit notes for intentional regional differences

Those intentional differences might include:

- alternate screenshots
- market-specific product claims
- different legal blocks
- different pricing presentation
- different call-to-action wording

Without that mapping, reviewers end up debating whether a difference is a bug or a deliberate localization choice.

Pixelay becomes much more useful once the team knows exactly which Figma frame is the right comparison target for each locale.

## Review page sections in order of localization risk

Not every section is equally fragile.

Start with the areas most likely to break:

- hero headlines and CTAs
- pricing or packaging blocks
- comparison tables
- feature cards with fixed-height layouts
- testimonial or quote modules
- screenshots with embedded UI text
- forms and validation messages

These are usually where translation changes create the most visible drift.

For example, a longer feature headline might push every card in a row out of alignment. A translated pricing label might force the monthly billing toggle into an awkward wrap. A localized screenshot caption may fit, but the actual screenshot still shows English UI and creates trust friction immediately.

That is why localization QA should be prioritized like design QA, not treated as a random skim through the page.

## Compare the browser, not only exported screenshots

Localized pages often appear acceptable in static screenshots and worse in the live browser.

The browser reveals:

- real text rendering
- actual responsive wrapping
- dynamic spacing between components
- hover, sticky, or interactive states
- language-dependent overflow that the static crop hid

This is where Pixelay helps most. The overlay and comparison modes make it much easier to see whether the localized build still reflects the intended design or whether the page has accumulated subtle layout compromises.

For staging environments or pages behind auth, the same workflow can still hold. If the localized surface is private, [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/) is the right companion process.

## Treat screenshots and imagery as localization artifacts too

Teams often localize copy and forget that screenshots are also content.

Common misses include:

- browser UI still in the wrong language
- product screenshots showing English labels
- notification toasts mismatched with the locale
- image-based text surviving from the default market
- supporting diagrams not updated even though the surrounding page was translated

Those issues are especially noticeable on product marketing pages, docs surfaces, and onboarding flows.

This is another reason Figma-to-browser comparison matters. Reviewers can line up the localized design intent against the live implementation and catch where non-text assets fell out of sync.

## Use breakpoint review deliberately

Localization bugs often get worse on smaller breakpoints.

A page section that survives desktop may fail on tablet or mobile once:

- the translated headline wraps to three lines
- the CTA grows
- the card stack becomes taller
- screenshot captions collide with surrounding spacing

That means localized QA should explicitly include at least the breakpoints that matter most for the page, not just the default desktop view.

One practical rule:

if a locale pushes a layout close to its limit on desktop, review mobile immediately instead of assuming it will be fine.

The language change is already telling you where the layout is brittle.

## Capture locale-specific bugs with enough context to fix them

Localized QA findings get harder to action when the report says only "German page spacing is off."

A more useful bug report includes:

- the locale
- the page URL
- the breakpoint
- the matching Figma frame
- the exact issue type
- whether it is a translation problem, a design issue, or an implementation bug

Examples:

- French pricing toggle wraps and shifts the plan cards off baseline on tablet
- Japanese hero screenshot still shows English UI labels
- German CTA label is correct, but button width collapses at mobile
- Spanish testimonial cards need a taller layout or shorter excerpt treatment

Pixelay is helpful here because the visual evidence is already part of the comparison workflow instead of being recreated later from memory.

If your team wants a stronger reporting habit, [Visual Bug Report Workflow for Frontend Teams](/articles/pixelay-visual-bug-report-workflow-for-frontend-teams/) is the best supporting article.

## A practical localized QA sequence

For most global page launches, this sequence is enough:

1. Map each locale build to the correct Figma frame.
2. Review the highest-risk sections first.
3. Compare the real browser output, not just screenshots.
4. Check both text and non-text localized assets.
5. Run the comparison at the breakpoints most likely to fail.
6. File findings with locale, breakpoint, and evidence attached.

That approach keeps the team focused on meaningful differences instead of drowning in general "this feels slightly off" feedback.

## Why Pixelay fits this workflow

[Pixelay](/pixelay/) is useful because localization drift happens in the gap between approved translated design and real rendered page behavior.

The team needs a way to compare:

- locale-specific Figma intent
- real browser output
- responsive states
- visual evidence that engineers and marketers can both act on

That is exactly the kind of job Pixelay handles well.

If your team launches multilingual marketing pages, docs, or product surfaces from Figma, a dedicated localized QA pass with Pixelay is one of the easier ways to catch drift before the wrong screenshot, awkward wrap, or half-localized component reaches production.

---

---
type: article
title: Social Share Image Export Workflow from Figma
description: Create lighter, sharper Open Graph and social share images from Figma so blog posts, launch pages, and docs links preview cleanly without extra export cleanup.
datePublished: 2026-06-11T00:00:00.000Z
dateModified: 2026-06-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-social-share-image-export-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-social-share-image-export-workflow-from-figma.md
---

# Social Share Image Export Workflow from Figma

Social share images are one of those assets that look easy until they keep failing in small, expensive ways.

The preview crops the headline too tightly. The blog card is soft on retina displays. The launch image looks fine on the page itself but becomes unreadable when pasted into Slack or LinkedIn. Then someone exports a heavier PNG, someone else recompresses it in another tool, and the content team ends up with three slightly different versions of the same preview card.

That is why social preview images deserve their own workflow instead of being treated like generic website graphics.

[TinyImage](/tinyimage/) is a strong fit here because the plugin already supports compressed JPG, PNG, SVG, WebP, AVIF, GIF, MP4, and PDF exports directly from Figma. For social cards, the practical value is not only smaller files. It is being able to standardize one reliable export pass for blog posts, feature launches, changelog entries, case studies, and documentation shares without leaving Figma to do cleanup afterward.

## Social cards have a different job from page images

A hero image on the site can rely on surrounding copy. A social preview image usually cannot.

It has to communicate enough on its own when someone sees:

- a link preview in Slack
- a post on LinkedIn or X
- a shared changelog entry in a customer email
- a bookmark card in a team wiki

That changes the design rules.

A good social share image usually needs:

- one message, not three competing messages
- a safe crop that survives different preview containers
- contrast strong enough for small thumbnail contexts
- export settings that keep text crisp without creating unnecessarily heavy files

The closest related article in the current library is [CMS Image Publishing Workflow from Figma](/articles/tinyimage-cms-image-publishing-workflow-from-figma/). That piece is broader and covers website publishing in general. This workflow is specifically about images that need to sell the click before the reader even reaches the page.

## Start with the preview context, not the canvas

Before designing or exporting anything, decide where the image will actually appear.

Ask:

- Is this mainly for article links, product launches, or support content?
- Will most people see it in a wide card, a tighter mobile preview, or both?
- Does the image need product UI, a title, a subtitle, or only one strong line?
- Is the preview promoting a page with a long shelf life, or a time-sensitive campaign?

This matters because social share images fail when teams try to cram page-level detail into a preview slot.

If the goal is "show the whole landing page," the image usually becomes cluttered. If the goal is "make the value obvious fast," the card gets much easier to export and review.

## Design with a crop-safe center

The fastest way to make preview images fragile is to place critical text or UI right at the edge.

Different platforms, chat tools, and internal knowledge systems do not always render the card the same way. Even when the image itself is technically correct, the visible crop may shift enough to break the composition.

That is why it helps to design the preview card around a safe center:

- keep the main headline away from the outer edge
- do not let logos sit in a corner that can be clipped
- avoid tiny UI details that only work when the image is shown large
- treat decorative edges as expendable and the central message as protected

This is especially important for product launch cards and article previews that include screenshots. A miniature screenshot with five annotations may look thoughtful inside Figma and still fail completely in a link preview.

If the card does need product UI, simplify it. Show one recognisable state, not the entire interface.

## Use format decisions that match the asset, not habit

Many teams export every social image as a full-quality PNG because it feels safe. That is often heavier than needed.

For most social preview workflows:

- use PNG when text sharpness is the highest priority
- consider WebP or AVIF when the publishing stack supports them and weight matters
- keep JPG as a practical fallback when the destination is less format-flexible

The right answer depends on the design.

A typography-led preview card may deserve PNG. A more photographic launch card may compress cleanly in another format. The important thing is deciding based on the card's actual content, not on a one-size-fits-all export default.

If your team is still standardizing broader image choices, [WebP vs AVIF for Figma Exported Images](/articles/tinyimage-webp-vs-avif-for-figma-exported-images/) and [Color Profile Checklist for Figma Exports](/articles/tinyimage-color-profile-checklist-for-figma-exports/) are good supporting reads.

## Build an export set for recurring content types

Social share image production becomes much easier when the team stops designing each one from zero.

Inside Figma, it helps to keep a few repeatable source patterns:

- article preview card
- product launch card
- changelog or release note card
- case study or customer story card
- support or documentation share card

Then standardize:

- headline character discipline
- screenshot treatment
- safe margins
- export naming
- compression presets

TinyImage is useful here because the export step stays close to the design system. The team can batch export approved cards instead of sending final artwork through a second tool just to reduce size or change format.

That becomes especially valuable when a launch includes multiple surfaces:

- the article link preview
- the changelog preview
- the docs preview
- the social post image

Those assets may look related, but they should not all be the exact same crop without review.

## Review the card where people will actually encounter it

One of the biggest mistakes in social preview work is approving the image only at full size.

Before signing off, review:

- the card at a smaller thumbnail-like size
- whether the main message still reads quickly
- whether the screenshot still earns its space
- whether brand elements are visible but not dominating
- whether compression softened the type too much

The test is simple:

if someone pastes the link into a team chat or sees the preview in a feed, will the card still communicate the right thing in a second or two?

That is a different standard from "does this look polished at 1600 pixels wide on my monitor?"

## A practical workflow for social share exports

For most teams, this is enough:

1. Define the preview's job before designing it.
2. Build the layout around one message and a crop-safe center.
3. Keep screenshots simple and readable at small sizes.
4. Export with TinyImage using the format that best suits the asset.
5. Compare the compressed result at realistic preview sizes.
6. Save the final file with a name that reflects the page or campaign it supports.

Example filenames:

- `product-launch-og-image.png`
- `feature-announcement-share-card.webp`
- `blog-post-social-preview.png`
- `docs-update-link-preview.png`

That naming matters more than it seems. Once the page is live, the social image becomes part of a publishing workflow, not just a design file.

## Where TinyImage fits best

[TinyImage](/tinyimage/) does not decide what message belongs in the card. That still requires judgment from design, content, or marketing teams.

What it improves is the production layer between "the preview card is approved" and "the preview image is actually ready to publish." That is the part where teams usually lose time through oversized files, repeated recompression, and muddy versioning.

If your team publishes blogs, changelogs, docs, or campaign pages from Figma regularly, standardizing social preview images around TinyImage is one of the easiest ways to make those assets more reliable. The result is not just lighter files. It is cleaner previews, fewer last-minute export fixes, and a publishing workflow that does not keep re-learning the same lesson.

---

---
type: article
title: Rich Media Banner Workflow with Video and Lottie
description: Use video and Lottie intentionally in Figma banner production so rich media banners stay readable, reviewable, and ready for export.
datePublished: 2026-06-09T00:00:00.000Z
dateModified: 2026-06-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-rich-media-banner-workflow-with-video-and-lottie/
markdownUrl: https://www.hypermatic.com/articles/bannerify-rich-media-banner-workflow-with-video-and-lottie.md
---

# Rich Media Banner Workflow with Video and Lottie

Most banner teams do not struggle to make rich media banners because they lack motion ideas.

They struggle because rich media creates three new risks at once:

- the creative gets harder to review
- the message gets easier to bury
- the export and QA process gets more fragile

That is why "just add video" or "let's use a Lottie" is usually not enough as a workflow.

[Bannerify](/bannerify/) is well positioned for this because the product page already frames the plugin as more than a basic HTML5 exporter. It supports HTML, GIF, MP4, WebM, preview links, plus richer media behavior through video and Lottie support. The useful question is not whether Bannerify can export richer banners. It is how to decide when rich media is worth the extra production complexity.

If you need the mechanics first, the tutorials on [adding video embeds](/tutorials/how-to-add-video-embeds-to-figma-banner-exports-using-bannerify/) and [adding Lottie animations](/tutorials/how-to-add-lottie-animations-to-figma-banner-exports-using-bannerify/) are the direct setup guides. This article is about the workflow around them.

## Start with the message, not the media type

Rich media only helps when it makes the message easier to understand or more persuasive within the constraints of the placement.

That usually means one of these jobs:

- show product motion that static frames cannot explain
- create a premium brand feel without adding too much copy
- animate a small moment like a loader, sparkle, chart, or icon
- add depth to a product demo or before-and-after concept

It does not mean:

- adding motion everywhere because the team can
- replacing hierarchy with spectacle
- making the call to action harder to notice

If the banner is a basic offer-led placement, a clean timeline animation may outperform richer media simply because the message lands faster.

## When to use native animation, Lottie, or video

This decision is where a lot of teams lose time.

### Use Bannerify's native timeline first when:

- text, shapes, and layout are doing most of the storytelling
- the motion is simple
- speed and clarity matter more than novelty

### Use Lottie when:

- the motion is graphic, icon-based, or illustrative
- you need cleaner vector-style movement than a GIF feel
- the animation should stay lightweight and loop elegantly

### Use video when:

- the asset is inherently video-based
- you need product footage, real-world movement, or UI recording
- flattening the sequence into simple layer animation would lose too much information

The mistake is treating Lottie and video as interchangeable upgrades. They solve different problems. Lottie is often better for controlled motion graphics. Video is better when the source is truly cinematic or screen-based.

## Keep the rich media isolated to one job in the banner

The more useful rich-media banners usually have one clear media role:

- the background video sets atmosphere
- the Lottie explains the feature
- the motion icon draws attention to the CTA

They do not ask rich media to carry every part of the banner at once.

If the video is competing with the headline, the product shot, and the CTA, the result often feels expensive but unfocused.

A good rule:

If you cannot explain in one sentence why the Lottie or video is there, it is probably decorative complexity.

## Review readability earlier than usual

Rich media creates a false sense of progress because the preview feels exciting quickly.

That is exactly when teams miss the real problems:

- the offer only becomes readable on the second loop
- the CTA loses contrast over moving footage
- the Lottie distracts from the actual product claim
- one size works beautifully while another becomes cramped

This is where a preview-first workflow matters. [Banner Preview Link Workflow for Approvals](/articles/bannerify-banner-preview-link-workflow-for-approvals/) is especially useful alongside rich media because stakeholders need to review the actual moving output, not a static frame approximation.

## Build fallbacks and export expectations into the brief

Rich media should not be a surprise to media or ad ops.

Before the team goes too far, answer:

- which output format is the real destination?
- does the campaign need HTML, MP4, GIF, or more than one?
- are there placement or platform restrictions?
- what should the fallback look like if the richer version is not usable?

This is important because a rich banner may still need simpler companions:

- an MP4 version for social or internal review
- an HTML version for interactive placements
- a GIF fallback when the platform is more constrained

If the export path is fuzzy until the end, rich media turns into late-stage rework very quickly.

## QA rich media like a production asset, not a concept

Once the rich banner works creatively, run a tighter QA pass than you would for a simple animated unit.

Check:

- first-frame clarity
- headline readability over motion
- CTA prominence throughout the timeline
- whether the Lottie or video loops awkwardly
- whether the banner still communicates with sound absent
- size-by-size consistency
- export behavior in the actual delivery format

The "sound absent" check matters even when the creative started as a video idea. Banner viewers usually do not get a patient, cinematic viewing context. The message still has to land visually and quickly.

## A good workflow for campaign teams

For most banner teams, this sequence keeps rich media under control:

1. define the one job the rich media element should do
2. choose native animation, Lottie, or video based on that job
3. build the banner around message hierarchy first
4. preview the moving output early
5. QA readability and format behavior by size
6. export the final assets in the formats the placement actually needs

That keeps the media choice in service of the campaign instead of turning it into a mini production experiment with no clear owner.

## Where Bannerify fits best

[Bannerify](/bannerify/) is strongest when the team wants to explore richer motion without dropping into a separate code-heavy banner build process.

That includes:

- product demo ads
- premium campaign launches
- motion-led brand banners
- explainer-style placements where subtle animation is not enough

The key is staying disciplined about why the richer media is there. Video and Lottie can absolutely make banner creative stronger. They can also make it noisier, harder to QA, and slower to launch if the workflow stays vague.

Use Bannerify to keep that complexity inside a reviewable Figma-based process, and rich media becomes a deliberate creative choice instead of a last-minute complication.

---

---
type: article
title: Word Doc to Figma Proposal Workflow for Agencies
description: Turn approved Word documents into cleaner Figma proposal layouts so agency teams can redesign proposals without retyping the entire document.
datePublished: 2026-06-09T00:00:00.000Z
dateModified: 2026-06-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-word-doc-to-figma-proposal-workflow-for-agencies/
markdownUrl: https://www.hypermatic.com/articles/convertify-word-doc-to-figma-proposal-workflow-for-agencies.md
---

# Word Doc to Figma Proposal Workflow for Agencies

Agency proposal work often begins long before design gets involved.

A strategist writes the scope in Word. Someone adds pricing notes. Legal revises a clause. The account lead cleans up the narrative. By the time a designer touches the project, the proposal already exists as a real document, but the visual version still has to be rebuilt from scratch in Figma.

That is where a lot of waste hides.

The problem is not creativity. The problem is transcription. Teams burn hours retyping headings, rebuilding tables, and manually recreating content that was already approved well enough to move forward.

[Convertify](/convertify/) is a strong fit for this handoff because the product page explicitly supports importing Word Doc files into Figma alongside PowerPoint, PDF, Illustrator, InDesign, and other legacy formats. That makes it useful for proposal production, not just design-tool migration.

This is different from [Google Docs to Figma Wireframing Workflow](/articles/convertify-google-docs-to-figma-wireframing-workflow/). That article is about content-first page design and early wireframes. This one is about agency proposals and statements of work where the document is already part of the commercial process and the design team needs a faster way to turn it into a polished deliverable.

## The goal is not to automate taste

A Word document is not a finished proposal design.

Importing it into Figma does not remove the need to:

- structure the narrative
- improve pacing
- create hierarchy
- simplify dense sections
- make pricing and proof easier to scan

What it does remove is the dumbest part of the job: rebuilding text and basic structure from scratch before the real design work can even begin.

That matters most when proposals are:

- long
- revised by multiple stakeholders
- reused across services or verticals
- expected to go through another approval round after design

## Clean the document before import

The best proposal imports start with a boring editorial pass.

Before bringing the Word file into Figma, remove anything that only makes sense in the drafting environment:

- unresolved tracked changes
- duplicate paragraphs
- internal writing notes
- comments that should not travel into design
- pricing versions that are no longer real options

Then make the structure explicit.

At minimum, separate:

- cover or intro note
- problem or opportunity framing
- project scope
- deliverables
- timeline
- team or process
- pricing
- terms
- next steps

If the Word file is still a wall of text, importing it into Figma just gives you a better-looking wall of text.

## Treat the first import as a content recovery step

When the document lands in Figma, the first win is not beauty. It is recovery.

You can quickly answer:

- did the hierarchy come through clearly enough to work with?
- which sections feel too long once they become visual?
- which blocks should become reusable proposal modules?
- which pages are really appendix material and should not compete with the core story?

This is why agency proposal work benefits so much from import. The team can start making editorial and layout decisions using the real content rather than placeholder lines or partial screenshots.

## Build proposal page types, not one-off pages

Once the content is in Figma, look for repeatable proposal patterns.

Common page types include:

- opener or summary page
- challenge and context page
- approach page
- deliverables matrix
- timeline page
- team page
- pricing or options page
- legal or assumptions appendix

If you design these as reusable page types instead of styling every imported page independently, future proposal work gets much faster.

This is the quiet operational value of a Word-to-Figma workflow. One imported proposal can seed a better proposal system for the next ten.

## Be careful with tables, pricing blocks, and dense text

Proposal content often breaks visual rhythm in three places:

- pricing tables
- long assumptions or exclusions
- terms and legal copy

Those sections are where the imported structure helps most, but they still need active design judgment.

For example:

- a pricing table may need to become a card layout
- a dense assumptions section may need bullets and grouping
- a legal page may need simpler hierarchy without pretending it is marketing copy

The mistake is assuming the document should map one-to-one onto the final Figma layout. Sometimes it should. Often it should not.

## Decide what stays editable after import

This is the handoff question that saves the most pain later:

Where do proposal edits live after the import?

Choose one of these intentionally:

- the Word doc remains the text source and the Figma file is a visual branch
- the imported Figma file becomes the active working source for the next round
- commercial sections stay in Word while design-heavy sections move fully into Figma

Without that rule, proposal teams create three truths:

- the Word version
- the Figma version
- the version someone emailed to the client

That is how teams end up fixing a pricing note in the wrong place two hours before a pitch.

## A realistic agency workflow

For most agencies, this sequence works well:

1. Finalize the proposal draft enough that the structure is stable.
2. Clean the Word file before import.
3. Import it into Figma with Convertify.
4. Identify the core proposal page types.
5. Redesign for hierarchy and readability using the real content.
6. Decide where subsequent edits will be owned.
7. Export or present the final proposal in the format the client actually needs.

That final format might still be PDF, PowerPoint, or another document artifact. The point is that the design work no longer begins with manual re-entry.

## Where Convertify fits best

This workflow is strongest when the document already contains approved or near-approved thinking:

- services proposals
- discovery proposals
- onboarding packs
- strategic recommendations
- branded statements of work

If the team is still inventing the structure, a looser wireframing workflow may be better. But if the Word document is already carrying real commercial content, [Convertify](/convertify/) can save the design team from doing clerical work under the disguise of craft.

That is the value here. Not "push button, get finished proposal." More like: recover the usable structure, move it into Figma quickly, and spend design time on the parts clients actually notice.

---

---
type: article
title: Word Doc Review Workflow for Figma Legal Copy
description: Export Figma screens to Word for legal and policy review without losing the structure designers need to reapply approved copy back in context.
datePublished: 2026-06-09T00:00:00.000Z
dateModified: 2026-06-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-word-doc-review-workflow-for-figma-legal-copy/
markdownUrl: https://www.hypermatic.com/articles/copydoc-word-doc-review-workflow-for-figma-legal-copy.md
---

# Word Doc Review Workflow for Figma Legal Copy

Legal and compliance review often breaks the Figma workflow for one simple reason:

the people who need to approve the copy usually do not want to review it in Figma.

They want a familiar document. Something they can comment on, redline, circulate, and archive. Designers, meanwhile, need the text to stay connected to the screen context so the approved wording can go back into the right modals, settings pages, banners, consent flows, and billing screens.

When teams solve that mismatch badly, they end up with screenshots pasted into docs, disconnected comments in email threads, and one exhausting reconciliation pass where nobody is fully sure which version was approved.

[CopyDoc](/copydoc/) is useful because the product page already supports exporting Figma text and even full frames into formats like Word and Excel, then bringing structured text changes back into the workflow. That makes it a natural bridge when reviewers need a document artifact but the design team still needs a reliable path back to Figma.

This article is narrower than [Figma Copy Approval Workflow for Cross-Functional Teams](/articles/copydoc-figma-copy-approval-workflow-for-cross-functional-teams/). That piece is about broader approval coordination. This one is for the specific case where legal, policy, or compliance stakeholders prefer a Word document review flow and the design team needs to preserve context without drowning in manual copy-paste.

## Use Word review when visual context matters

Not every copy review needs the same export shape.

If the legal team only needs a raw string inventory, a spreadsheet export can be enough. But Word review becomes much more useful when the wording depends on where it appears.

Examples:

- consent checkboxes next to a CTA
- trial or billing notices in pricing flows
- privacy copy in signup and onboarding
- disclaimers in checkout or upgrade modals
- regulated product copy inside app screens

These are the situations where legal feedback changes depending on spacing, emphasis, adjacency, and order. A plain text export can lose too much context. A Word-friendly review artifact gives non-Figma reviewers something more usable without forcing the design team into screenshot chaos.

## Decide what kind of review artifact the stakeholder actually needs

Before exporting anything, ask one practical question:

Does the reviewer need screen context, string context, or both?

### Use frame export when they need:

- to see where the copy sits in the UI
- to compare multiple screens in order
- to review density, emphasis, or adjacency

### Use text export when they need:

- to edit many repeated strings quickly
- to compare terminology across flows
- to review copy in bulk without layout distraction

In some flows, the best answer is both:

- Word or frame export for context
- structured text export for batch edits

That combination is often cleaner than trying to force one artifact to do everything.

## Scope the review before export

Legal review gets slower when the document is too broad.

Instead of exporting the entire product file, define one review package:

- pricing and upgrade flow
- signup and consent flow
- onboarding privacy flow
- account settings and billing flow

Then order the exported frames the same way a user would encounter them.

That makes the review easier for non-designers because the document reads like a journey instead of a random pile of screens.

## Add a short review brief at the top

This is an underrated step and it saves a lot of rework.

At the start of the Word review file, include:

- what this review covers
- what changed since the last review
- which strings are highest risk
- what kind of feedback is needed
- the deadline for approval

Without that brief, legal reviewers often spend time commenting on low-signal wording while the team still lacks answers on the actual risky text.

Good prompt examples:

- "Please confirm whether billing disclosure language is sufficient before CTA tap."
- "Please review trial renewal wording across all three surfaces for consistency."
- "Please flag any copy that must be localized differently by market."

That kind of framing makes Word review much more actionable.

## Keep repeated legal text grouped together

A lot of legal review pain comes from repeated strings drifting.

For example:

- one upgrade modal says "cancel anytime"
- another says "cancel whenever you like"
- the billing page says "renews automatically"
- the checkout CTA implies immediate payment but the modal describes a trial

CopyDoc helps because once the content is exported out of Figma, repeated text becomes easier to compare intentionally. This is especially helpful if your team also uses a terminology audit workflow. [Figma Terminology Audit Workflow](/articles/copydoc-figma-terminology-audit-workflow/) is the best supporting read when the issue is less about one screen and more about inconsistent wording across the product.

## Reconcile legal feedback back into Figma systematically

This is where teams usually lose hours.

Do not apply Word edits ad hoc from memory.

Instead:

1. mark which feedback is approved as-is
2. note where a comment affects multiple screens
3. resolve terminology changes once, not one frame at a time
4. update the Figma source in a controlled pass
5. re-export if the review materially changed the wording

The critical thing is mapping one legal decision to every place it matters.

For example, if "trial renews monthly" becomes the approved phrase, that may affect:

- pricing cards
- checkout details
- trial reminder banners
- upgrade confirmation modals
- settings or billing pages

If you only update the screen that received the original comment, the workflow has still failed.

## Common mistakes in Word-based legal review

The pattern is usually the same:

- screenshots are exported without selectable text
- the wrong frame version is sent for review
- reviewers comment on copied text that no longer matches the Figma source
- legal approves a phrase that only gets updated in one location
- the team exports too much and hides the real risk

The easiest fix is tighter packaging, not more meetings.

A smaller, ordered, well-briefed Word review file is far more effective than sending an entire design system to legal and hoping the right screens get attention.

## A simple workflow that holds up under deadline

For most product teams, this is enough:

1. define the exact flow under review
2. export the relevant Figma frames to a Word-friendly artifact with CopyDoc
3. add a brief that explains the review goal
4. collect redlines in one place
5. map repeated wording changes across every affected screen
6. update the Figma source and do one verification pass

If the review also changes product or marketing terminology, pair this with [Figma Copy QA Checklist for Product Teams](/articles/copydoc-figma-copy-qa-checklist-for-product-teams/) so the final pass catches truncation, stale labels, and layout fallout before release.

## Where CopyDoc fits best

[CopyDoc](/copydoc/) does not remove the need for legal judgment. What it improves is the operational layer between legal review and product design.

That is the layer that usually creates the mess:

- how the copy gets out of Figma
- how reviewers can work in a familiar format
- how approved language gets back into the right screens

If your legal or policy stakeholders live in Word documents, stop fighting that preference with pasted screenshots and disconnected comments. Use CopyDoc to create a real review artifact, keep the scope tight, and make the path back to Figma explicit from the beginning.

---

---
type: article
title: Multi-Brand Email Template Workflow in Figma
description: Manage shared email modules across multiple brands in Figma without cloning a separate HTML email system for every brand variation.
datePublished: 2026-06-09T00:00:00.000Z
dateModified: 2026-06-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-multi-brand-email-template-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/emailify-multi-brand-email-template-workflow-in-figma.md
---

# Multi-Brand Email Template Workflow in Figma

Single-brand email systems are hard enough.

Multi-brand email systems are where teams start making expensive compromises.

One product line needs a quieter tone. A partner sub-brand has different legal footer requirements. A franchise network wants local hero images. Marketing duplicates the "master" email file three times to move faster, and six months later nobody knows which button component is actually approved.

That is why multi-brand email work needs a different workflow from ordinary template governance.

[Emailify](/emailify/) is a strong fit because the product page already centers reusable Figma components, responsive previews, production-ready HTML export, and delivery into dozens of email platforms. The missing piece for many teams is not basic template creation. It is managing variation without turning every brand into its own isolated system.

This article is the companion to broader pieces like [Modular Email Template Workflow in Figma](/articles/emailify-modular-email-template-workflow-in-figma/) and [Email Template Governance for Marketing Teams](/articles/emailify-email-template-governance-for-marketing-teams/). Those are important foundations. This guide is specifically about what changes when one email system has to serve multiple brands, regions, business units, or franchise operators.

## The real risk is not inconsistency

The real risk is duplication.

Once each brand gets its own copy of the template file, teams start duplicating entire systems just to accommodate:

- different color tokens
- alternate logos
- market-specific footer language
- regional image libraries
- brand-specific CTA wording

That feels efficient for a sprint or two. Then every global update becomes a scavenger hunt:

- which brands have the new footer?
- which header block still uses the old spacing?
- which unsubscribe copy was updated in one file but not the others?

The cost compounds quietly because HTML email systems are already fragile. Duplicating them multiplies the review surface immediately.

## Start by separating shared modules from brand overrides

Before you design anything, classify every module in the email system.

I like three buckets:

### Shared across every brand

Examples:

- layout grid
- button construction
- spacing rules
- common image ratios
- responsive behavior

### Shared structurally, different visually

Examples:

- headers with brand-specific logos
- product cards with different accent colors
- testimonial blocks with different typography pairings

### Brand-exclusive

Examples:

- regulated footer language
- local contact blocks
- offer modules specific to one region or product family

That one categorization step prevents a lot of accidental cloning. Most teams discover that far more of the system can stay shared than they assumed.

## Use one master system unless compliance forces a split

If the brands still share the same technical email rules, keep one master Figma email system and manage the differences intentionally.

That gives you:

- one place to update responsive behavior
- one place to fix rendering problems
- one component logic model
- one QA process for common modules

The main reason to break into separate systems is when the brands are operationally different enough that shared governance creates confusion, especially around:

- legal requirements
- sender identity
- layout rules that no longer match
- different ESP or delivery constraints

If those differences are only cosmetic, splitting the system usually creates more work than clarity.

## Design brand variation at the module level

This is the critical workflow choice.

Do not create Brand A Template, Brand B Template, and Brand C Template first.

Create shared modules first, then define where brand variation is allowed inside them.

For example:

- same hero structure, different visual styling
- same promo block logic, different CTA tone
- same footer layout, different legal copy slots

That keeps the system maintainable because the design team is changing one module family instead of rebuilding whole emails every time the brand team wants a new seasonal campaign.

## Build a review matrix before the first export

Multi-brand email production breaks when nobody knows what must be checked for every brand and what only needs spot review.

A simple matrix helps:

| Review area | Shared once | Review per brand |
| --- | --- | --- |
| Responsive layout behavior | Yes | Only if a module changes |
| Core button behavior | Yes | Only for visual contrast checks |
| Legal footer text | No | Yes |
| Brand imagery and logos | No | Yes |
| Link tracking and ESP setup | Depends | Usually yes |

This keeps the QA loop proportional. Otherwise the team either over-tests everything or under-tests the risky differences.

If your team already localizes campaigns heavily, [Localized Email Review Workflow Before HTML Export](/articles/emailify-localized-email-review-workflow-before-html-export/) is a strong follow-up because localization multiplies the same brand-variation problems.

## Keep naming brutally clear

Multi-brand systems need cleaner naming than single-brand systems.

Examples of useful names:

- `hero-shared`
- `footer-brand-a-regulated`
- `product-grid-shared-2col`
- `cta-secondary-brand-b`

Examples of dangerous names:

- `final footer`
- `new header`
- `client version`
- `promo block 2`

HTML email production is already high-friction under deadline. Ambiguous component names are how teams accidentally export the wrong module and only discover it during preview or ESP upload.

## Preview brand differences before they become HTML problems

Emailify is valuable here because the preview step can happen while the work is still close to the Figma source.

Before export, check the brand variants that are most likely to fail:

- dark brand palette with button contrast issues
- long legal footer variants
- logo sizes that change header balance
- CTA wording that wraps differently
- region-specific product imagery that changes vertical rhythm

The point is not to admire the mockup. It is to expose which brand differences create real production risk.

## A practical launch rhythm for multi-brand campaigns

For recurring teams, this is usually enough:

1. maintain one master system for shared modules
2. document allowed brand-level overrides
3. assemble the campaign using shared building blocks first
4. swap in brand-specific modules only where the system expects them
5. preview the highest-risk brand variants
6. export the final HTML only after the variant pass is clean

That is much healthier than branching the full file every time a campaign needs a new color, region, or footer.

## Where Emailify fits best

[Emailify](/emailify/) does not magically solve brand governance. It does give teams a practical bridge from one Figma-based email system to real responsive HTML across many delivery platforms.

That makes it especially useful when the operational challenge is variation, not invention.

If your team is managing more than one brand and the email system keeps drifting into duplicated files, use Emailify as the production layer for a shared module workflow instead. The big win is not only faster exports. It is that the next global update does not turn into a archaeology project across five almost-identical template libraries.

---

---
type: article
title: Interactive Workshop Deck Workflow in Figma
description: Build Figma workshop decks that are easier to present, share, and update when sessions rely on embeds, links, exercises, and follow-up resources.
datePublished: 2026-06-09T00:00:00.000Z
dateModified: 2026-06-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-interactive-workshop-deck-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-interactive-workshop-deck-workflow-in-figma.md
---

# Interactive Workshop Deck Workflow in Figma

Workshop decks are not normal presentation decks with a few more sticky notes.

A sales deck mostly needs persuasion. An investor deck needs compression and confidence. A workshop deck has a messier job: it has to guide live facilitation, hold supporting material, survive detours, and still be useful after the session ends.

That is exactly where standard slide tools start creating friction. The deck becomes half presentation, half resource hub, and the facilitator ends up juggling slides, docs, links, forms, and prototypes across too many tabs.

[Pitchdeck](/pitchdeck/) is unusually well suited to this because its product page is not only about exporting slides. It supports browser-based sharing, analytics, embedded docs and media, scrollable slides, clickable links, and exports to formats like PowerPoint, Google Slides, Keynote, and PDF when needed. That makes it a strong fit for workshops where the deck has to act like a guided workspace, not just a polished sequence.

This article is for product teams, agencies, enablement leads, and consultants running workshops from Figma. If your use case is closer to a static handoff deck, start with [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/) or [Presentation Handoff Checklist for Designers](/articles/pitchdeck-presentation-handoff-checklist-for-designers/). This guide is specifically about interactive session design.

## What makes a workshop deck different

A workshop deck usually needs to do at least four jobs:

- guide the room
- hold live references
- capture or direct action
- stay useful after the meeting

That leads to different content than a standard presentation:

- agenda and ground rules
- breakout instructions
- embedded docs or sheets
- prototypes or product screenshots
- follow-up resources
- next-step slides with owners and dates

If those elements live outside the deck, the facilitator spends the session context-switching. If they are jammed into static slides, the deck becomes bloated and hard to navigate.

The better move is to design the workshop deck as a facilitation system.

## Start with a deck map, not slide polish

Before you animate anything, define the deck in sections:

1. setup
2. context
3. exercises
4. discussion artifacts
5. decisions
6. follow-up

That sounds obvious, but it changes what the deck has to contain.

For example, an exercise slide is not just a title and three bullets. It may need:

- a time box
- instructions
- a link to the working doc
- a prompt for what good output looks like
- a fallback path if the room stalls

Pitchdeck helps here because the Figma file can remain the visual source while the deck becomes more interactive during delivery.

## Use embeds where they remove tab chaos

One of the easiest ways to make a workshop smoother is to reduce tool-switching during the session.

Pitchdeck already has tutorial coverage for embedding:

- [Google Docs](/tutorials/how-to-embed-google-docs-in-figma-presentations-using-pitchdeck/)
- [Google Sheets](/tutorials/how-to-embed-google-sheets-in-figma-presentations-using-pitchdeck/)
- [Google Forms](/tutorials/how-to-embed-google-forms-in-figma-presentations-using-pitchdeck/)
- [Figma prototypes](/tutorials/how-to-embed-figma-prototypes-in-figma-presentations-using-pitchdeck/)
- [scrollable slides](/tutorials/how-to-add-scrollable-slides-to-figma-presentations-using-pitchdeck/)

That matters for workshop design because not every resource should be flattened into a screenshot.

Good embed candidates:

- live workshop notes
- reference spreadsheets
- intake forms
- product flows
- long frameworks that are unreadable when compressed into one slide

Bad embed candidates:

- anything likely to break because of access permissions
- content that must be usable offline
- resources that participants should not edit live

The goal is not to turn every slide into an app. The goal is to remove the moments where the facilitator has to say, "hang on, let me find that other tab."

## Design facilitation slides differently from reading slides

Workshop slides should be optimized for use, not admiration.

That usually means:

- stronger slide labels than in a normal brand deck
- obvious time-box callouts
- a visible "what happens now" cue
- fewer decorative transitions between sections
- more explicit links between activity and outcome

For example, instead of a vague slide like `Group Exercise`, make it operational:

- `Exercise 2: Prioritize The Top 5 Friction Points`
- time box: `12 minutes`
- output: `one ranked list in the embedded sheet`
- owner: `product lead facilitates, PM captures decisions`

That level of specificity lowers facilitation overhead. It also makes the deck much easier for another presenter to pick up later.

## Decide early how live the deck needs to be

The biggest workshop format mistake is deciding export style at the very end.

For interactive sessions, the most useful first question is:

Will this deck be presented as a live browser experience, exported as a file, or both?

### Use a hosted or browser-first deck when:

- embedded resources matter
- participants need clickable paths
- the workshop is highly guided
- async review or replay matters afterward

### Use PDF when:

- the session artifact is mostly for circulation
- editability is not required
- you want a stable leave-behind

### Use PowerPoint or Google Slides when:

- the client or internal team insists on editing the file later
- the workshop materials will be adapted repeatedly outside the design team

For many workshop teams, the best pattern is not choosing one forever. It is designing the source in Figma, presenting through Pitchdeck, and then exporting a cleaner recap format afterward.

## Plan for the after-workshop deck on purpose

This is where workshop decks often fail. The session ends, people want the material, and the only artifact is a facilitator-oriented deck full of half-useful live prompts.

Instead, decide which slides are meant for:

- live facilitation only
- participant follow-up
- stakeholder recap
- future reuse

Then structure the deck accordingly.

Examples:

- live instruction slides can be hidden or removed from the recap export
- resource slides can be kept and reorganized into an appendix
- decision slides can be grouped into a short summary deck

Because Pitchdeck supports multiple delivery formats, it is much easier to treat one Figma deck as the source for more than one workshop outcome.

## A lightweight QA checklist before the session

Interactive workshop decks need a slightly different QA pass:

- every embed loads for the actual audience permissions
- fallback links exist for anything sensitive
- scrollable slides are readable on the presenting screen
- navigation links go where you expect
- presenter notes or prompts are visible in the right place
- time-box slides are consistent
- the chosen export or presentation mode has been tested once end to end

This kind of review catches more real workshop pain than typography tweaks on slide 37.

## When Pitchdeck helps most

[Pitchdeck](/pitchdeck/) is strongest when the session needs to stay close to the Figma source while acting like more than a normal deck.

That includes:

- product discovery workshops
- onboarding and enablement sessions
- agency strategy workshops
- customer training sessions
- design walkthroughs with live references

It is less about "making slides in Figma" and more about reducing the gap between design, facilitation, and follow-up.

If your workshop decks keep devolving into static slides plus a forest of tabs, Pitchdeck gives you a cleaner center of gravity. The payoff is not only polish. It is that the session runs with fewer interruptions, the facilitator looks more in control, and the output is easier to reuse after the meeting is over.

---

---
type: article
title: A/B Test Variant QA Workflow from Figma
description: Compare experiment variants against their matching Figma designs before launch so growth tests do not ship with avoidable visual drift.
datePublished: 2026-06-09T00:00:00.000Z
dateModified: 2026-06-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-ab-test-variant-qa-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-ab-test-variant-qa-workflow-from-figma.md
---

# A/B Test Variant QA Workflow from Figma

A/B tests create a design QA problem that normal launch review does not fully solve.

The control may already be approved. The new variant may only change a hero, pricing layout, social proof block, or CTA. Because the change feels "small," teams often skip design QA or only look at one desktop screenshot before launch.

That is how experiment variants end up shipping with problems that have nothing to do with the hypothesis:

- the new headline wraps badly on mobile
- the CTA alignment drifts from the approved design
- the test variant uses the wrong screenshot crop
- spacing changes make the pricing section feel less trustworthy

Those are not good experiment results. They are preventable implementation noise.

[Pixelay](/pixelay/) is a strong fit here because its product page emphasizes comparing Figma designs against real websites across live, staging, localhost, and protected environments. That makes it useful not only for full-page QA, but for pre-launch experiment review where each variant needs to match its own design source rather than the original control.

This is related to [Post-Launch Content Drift Review Workflow for Marketing Sites](/articles/pixelay-post-launch-content-drift-review-workflow-for-marketing-sites/), but the timing is different. That article is about ongoing drift after launch. This one is specifically about experiment variants before traffic starts.

## The first mistake is comparing variant B to the control design

This sounds obvious, but it happens all the time.

Someone compares the live variant to the original control comp and logs differences that are actually intentional. Then another reviewer over-corrects. Then the growth team loses time arguing about whether the hero is "wrong" when the only real issue was that nobody anchored the review to the correct variant.

For A/B test QA, every variant needs:

- its own approved Figma frame
- its own review URL
- its own breakpoint expectations

If the experiment has three variants, there should be three explicit design references. Otherwise the QA pass becomes subjective immediately.

## Treat experiment QA as hypothesis protection

The purpose of the QA pass is not cosmetic purity for its own sake.

It is to protect the test from accidental variables.

For example, if the hypothesis is about:

- a new headline
- a different testimonial structure
- an alternate CTA
- a pricing comparison layout

then the QA process should remove unrelated issues like:

- broken spacing
- inconsistent button states
- awkward image scaling
- mobile wrapping problems
- misaligned form fields

Otherwise the variant is testing both the intended change and a bunch of visual errors at the same time.

## Build one review package per variant

Before opening Pixelay, prepare a simple matrix:

| Variant | Figma frame | URL | Key change |
| --- | --- | --- | --- |
| Control | Homepage A | staging URL A | existing hero |
| Variant B | Homepage B | staging URL B | new testimonial block |
| Variant C | Homepage C | staging URL C | pricing CTA rewrite |

This makes the QA pass much faster because reviewers know exactly what is supposed to differ and what is not.

It also helps when experiment names drift between design, product, and growth teams. `Variant 2` is a bad label. `Pricing CTA Test - monthly emphasis` is much better.

## Review the risky zones first

Most experiments do not need a full-site forensic pass.

Start with the sections most likely to create misleading test noise:

- hero content and heading wraps
- CTA alignment and prominence
- social proof and testimonials
- pricing cards
- lead forms
- screenshots or product imagery

These are the parts most likely to shift because of copy length, component branching, or rushed implementation.

If the experiment only changes one section, that does not mean only that section needs checking. A hero rewrite can still push the next section below the fold on smaller screens, which changes the user experience in a way the design team never intended.

## Always review mobile for experiment variants

This is the most common skipped step.

Because growth experiments are often set up quickly, mobile issues slip through more easily than on a full redesign:

- longer copy wraps differently
- badges or labels stack awkwardly
- CTA buttons become uneven
- screenshots crop differently
- section spacing gets compressed

Pixelay is helpful here because the comparison is grounded in the actual browser rendering, not in what the team thinks the variant "probably" looks like after the CSS update.

If responsive review is already a recurring pain, [Responsive Website QA from Figma](/articles/pixelay-responsive-website-qa-from-figma/) is the best adjacent article in the library.

## Label differences as intentional or accidental

Experiment QA moves faster when every finding fits one of three buckets:

- `intended test difference`
- `variant-specific bug`
- `shared implementation bug`

Examples:

- Variant B uses a new testimonial layout: intended test difference
- Variant B button wraps because the new CTA is too long on mobile: variant-specific bug
- All three variants have the same misaligned pricing bullets after a shared CSS change: shared implementation bug

This framing prevents the review from becoming a generic list of screenshots with no ownership model.

## Use protected or staging URLs when needed

Many experiments are not publicly accessible before launch. That is fine. Pixelay still fits well because the review does not depend on the page being live to everyone.

Good use cases include:

- staging URLs behind auth
- preview environments
- local builds for experiment implementation
- CMS preview links

The important thing is that the reviewed environment matches what will actually ship. If the experiment is assembled differently in production than in staging, the QA pass may still miss the real issue.

## A lean signoff flow for growth teams

This is usually enough:

1. approve one Figma frame per experiment variant
2. map each frame to the correct URL
3. review desktop and mobile in Pixelay
4. label findings as intended, variant-specific, or shared
5. fix the high-signal mismatches before traffic starts

That kind of signoff is much lighter than a full redesign review, but it is still enough to keep the experiment from being polluted by preventable visual drift.

## Where Pixelay fits best

[Pixelay](/pixelay/) is not only for "pixel-perfect websites" in the abstract. It is especially useful when the team needs objective comparison during fast-moving frontend changes, and A/B tests are one of the clearest examples of that.

Growth teams often move quickly enough that design QA becomes optional by accident. The result is not just a rougher page. It is a weaker experiment.

If your team runs frequent landing page or pricing tests, use Pixelay to compare each variant against its matching Figma frame before launch. That keeps the hypothesis cleaner, the implementation more trustworthy, and the results easier to interpret afterward.

---

---
type: article
title: Color Profile Checklist for Figma Exports
description: Use the right color profile for Figma exports so screenshots, PDFs, and marketing assets do not shift unexpectedly between review, web, and print.
datePublished: 2026-06-09T00:00:00.000Z
dateModified: 2026-06-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-color-profile-checklist-for-figma-exports/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-color-profile-checklist-for-figma-exports.md
---

# Color Profile Checklist for Figma Exports

Most teams only notice color profiles after something looks wrong.

The product screenshot feels flatter on the landing page than it did in Figma. The print proof comes back duller than the approved mockup. A reviewer opens the PDF on a different display and starts asking whether the brand color changed. By that point, the design is usually fine. The export workflow is what broke trust.

That is why color profile decisions deserve their own checklist instead of getting buried under "final export settings."

[TinyImage](/tinyimage/) is especially useful here because it goes beyond simple compression. The plugin page and tutorials already cover ICC color profiles for PNG exports plus CMYK, RGB, and grayscale options for PDFs. That means teams can make color-management choices directly from Figma instead of exporting first and trying to patch the problem later in another tool.

If you need the step-by-step mechanics, the tutorials on [custom PNG color space profiles](/tutorials/how-to-export-pn-gs-with-custom-color-space-profiles-from-figma-using-tiny-image/) and [CMYK PDF exports](/tutorials/how-to-export-compressed-pd-fs-in-cmyk-from-figma/) are the best technical companions. This article is about deciding when those settings matter and how to review them before they surprise someone downstream.

## First, separate compression problems from color problems

These issues often get mixed together because they both show up after export.

Compression problems look like:

- visible artifacts
- blurry text in screenshots
- flattened gradients
- overly aggressive quality reduction

Color profile problems look like:

- reds or oranges appearing less vibrant in print
- screenshots looking different on wide-gamut displays
- a PDF proof looking "off" even though the layout is correct
- exported files matching one viewer but not another

That distinction matters because the fix is different. Lowering file size will not solve a profile mismatch. Changing the color profile will not solve an over-compressed screenshot.

## The useful question is not "which profile is best?"

The useful question is:

What surface will this file actually live on after export?

That usually leads to one of four practical cases.

### Case 1: The file is for normal web delivery

Think:

- SaaS landing page screenshots
- blog images
- CMS uploads
- documentation screenshots

In this case, consistency and broad compatibility usually matter more than maximum display richness. A web-safe RGB workflow is often the calmer choice because the image is likely to be viewed across mixed devices, browsers, and CMS pipelines.

### Case 2: The file is for high-fidelity screen review

Think:

- premium product screenshots
- keynote visuals shown on newer Apple displays
- image-heavy launch assets where subtle color differences matter

This is where a wider-gamut profile can be worth testing. The point is not to make everything "more saturated." The point is to preserve the intended appearance on the display class your audience is actually using.

### Case 3: The file is for print

Think:

- one-pagers
- proposals
- brochures
- presentation leave-behinds

This is where CMYK becomes operational, not academic. If the file is going to a printer or print vendor, approving it only as an RGB screen export is often how teams end up arguing over whether the brand color changed when in reality the output medium changed.

### Case 4: The file is for a constrained downstream tool

Think:

- marketplace screenshots
- partner portals
- print-shop upload tools
- client delivery requirements with explicit specs

In these cases, the best profile is the one the receiving system expects. TinyImage is helpful because you can match the requested export behavior in the Figma stage instead of improvising after rejection.

## A practical pre-export checklist

Before touching the TinyImage settings, confirm these five things:

1. Where will this asset be viewed first?
2. Is the file meant for screen, print, or both?
3. Does the recipient have a stated profile requirement?
4. Is color fidelity more important than broad compatibility for this asset?
5. Who will approve the export, and on what kind of display or proof?

That last question is easy to skip and causes a lot of confusion.

If one person approves on a wide-gamut MacBook and another reviews on a standard office monitor, "looks good" can stop meaning anything. The export workflow needs one declared approval reference, especially for campaign assets and print work.

## How I would handle three common scenarios

### Scenario: marketing screenshots for a launch page

Use the profile that matches the real web publishing environment, then review the exports at the actual rendered size on the page.

What to check:

- headline colors still feel right after export
- gradients do not shift in a way that makes the interface look older or muddier
- screenshots still feel consistent with the rest of the site imagery

Related read: [How to optimize Figma exports for page speed](/articles/tinyimage-how-to-optimize-figma-exports-for-page-speed/)

### Scenario: app screenshots for premium devices

If the brand or UI relies on richer color, test the export on the kinds of devices your audience actually uses. Do not approve only from the design canvas.

What to check:

- bright accents do not become unnaturally loud
- dark surfaces do not lose separation
- repeated screenshots across the set still feel consistent

### Scenario: print-ready proposal PDFs

Treat this as a print workflow, not a screen workflow with a PDF extension.

What to check:

- CMYK export is used when the printer expects it
- DPI and PDF settings match the purpose of the document
- the proof is reviewed as a print-oriented artifact, not just an attachment in an inbox

Related read: [PDF Review Workflow for Client Approvals from Figma](/articles/tinyimage-pdf-review-workflow-for-client-approvals/)

## Where teams usually go wrong

The most common mistakes are surprisingly boring:

- exporting one version and reusing it for both screen and print
- naming files in a way that hides which profile was used
- approving from Figma instead of from the exported file
- comparing two files in different viewers and blaming the design
- treating ICC or CMYK settings as "advanced extras" instead of workflow choices

The naming issue is worth fixing immediately. If you are exporting multiple profile variants, label them clearly. A file named `homepage-hero-final-final.png` is how teams end up uploading the wrong asset with total confidence.

## A simple review rhythm that holds up

For teams doing this often, the workflow can stay lightweight:

1. Identify the output surface before export.
2. Export one realistic test file in TinyImage.
3. Review the exported file on the real viewing surface or proof type.
4. Lock the chosen profile for that asset batch.
5. Batch export the rest only after the test passes.

This is much better than batch exporting everything, spotting a color issue, and then rerunning the whole set while people wonder which files are now valid.

## Where TinyImage fits best

[TinyImage](/tinyimage/) does not decide your color strategy for you. It does make the color-management step much easier to keep inside the Figma workflow, which is exactly where most teams need it.

That matters because color-profile work is rarely creative work. It is production work. It is the sort of quiet detail that nobody celebrates when it goes right and everybody notices when it goes wrong.

If your exports keep looking inconsistent between Figma, browser review, and print, do not treat it like a mystery. Add a color profile checklist to the workflow, use TinyImage's profile controls intentionally, and approve the exported file on the surface that actually matters.

---

---
type: article
title: Banner Preview Link Workflow for Approvals
description: Share live banner preview links from Figma so clients, marketers, and media teams can review animation and click behavior before trafficking starts.
datePublished: 2026-06-08T00:00:00.000Z
dateModified: 2026-06-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-banner-preview-link-workflow-for-approvals/
markdownUrl: https://www.hypermatic.com/articles/bannerify-banner-preview-link-workflow-for-approvals.md
---

# Banner Preview Link Workflow for Approvals

HTML5 banner approvals get messy fast when the only review artifact is a ZIP file.

Design likes the visuals in Figma. Media wants to know whether the package will traffic cleanly. Clients want to see the animation in motion. Account managers need something easy to forward. And nobody wants to download a folder of files just to answer whether the second frame lingers too long.

That is why preview links are so useful in banner production.

[Bannerify](/bannerify/) already helps teams export animated HTML, GIF, MP4, and other banner outputs directly from Figma. One of the most practical workflows around it is generating reviewable preview links before trafficking begins. That turns approval from a file-management problem into a shared viewing problem, which is much easier for non-technical stakeholders to handle.

## ZIP files are good for trafficking, not for early approval

The trafficking package still matters later.

But early review usually needs something else:

- a fast way to see the animation
- confidence that the click behavior is right
- visibility into loop timing and readability
- an artifact that can be opened by clients without setup

A ZIP file fails at most of those tasks. It is technically correct, but operationally clumsy.

That is why teams often end up doing approvals through:

- recorded screen captures
- GIF exports that do not reflect the real HTML
- static screenshots
- vague comments on the Figma timeline

All of those lose information the moment the banner's interactive or timing behavior matters.

## A preview link changes what reviewers can actually approve

Once the banner is viewable as a live link, the approval question gets clearer.

Reviewers can check:

- the first frame message
- whether the key offer appears soon enough
- animation pacing
- final-frame clarity
- clickable behavior
- how variants compare across sizes

That is much closer to the real experience than a design mock or a video capture.

It is especially useful when multiple teams are involved:

- clients care about message and brand feel
- marketers care about offer clarity
- media or ad ops care about readiness
- designers care about motion and layout integrity

Putting all of them in front of the same live preview reduces a surprising amount of feedback churn.

## Create a review package before the trafficking package

One of the better Bannerify habits is separating the review phase from the final handoff phase.

The review package can be lightweight:

- one preview link per banner set
- obvious naming by campaign and size
- destination URL or click-through note
- a short review brief that says what needs approval

For example:

- Spring promo 300x250 preview
- Spring promo 160x600 preview
- Spring promo 728x90 preview

That naming sounds basic, but it saves reviewers from guessing which banner they are looking at or whether two versions are actually different.

If your team wants the mechanics for hosting those previews, the tutorial on [uploading preview links for HTML banners from Figma to Netlify using Bannerify](/tutorials/how-to-upload-preview-links-for-html-banners-from-figma-to-netlify-using-bannerify/) is the most direct implementation guide.

## Decide what each reviewer should focus on

Approval gets better when stakeholders are not all asked to review "everything."

For a preview-link pass, useful review scopes look like this:

Client or brand team:

- message clarity
- visual hierarchy
- brand alignment
- final-frame strength

Marketing team:

- offer prominence
- CTA timing
- variant consistency
- market or audience relevance

Media or ad ops:

- destination URLs
- whether the preview corresponds to the right size and variant
- whether any fallback or trafficking notes are still needed

Design:

- motion smoothness
- frame-to-frame readability
- pacing across different placements

This is how preview links become operationally useful instead of just convenient.

## Review animation timing in context, not in isolation

Many banner problems are not visible until someone watches the whole loop.

Common issues include:

- the logo arrives too late
- the offer disappears too fast
- the CTA only becomes clear on the second loop
- the tall unit reads differently from the wide unit
- the final frame feels cramped on smaller placements

Those issues are easy to miss if the review happens only on the Figma timeline or only as a static frame export.

A live preview forces the team to judge the banner as an ad, not just as design work.

This is also why preview links are especially valuable for variant-heavy campaigns. The 300x250 may work beautifully while the 160x600 version feels rushed. That difference is much easier to spot when both can be opened and watched directly.

## Use preview links to resolve feedback before launch notes get complicated

One underrated benefit of preview links is that they pull feedback earlier in the workflow, before trafficking metadata and packaging work make everything harder to change.

That means you can resolve:

- message disagreements
- CTA changes
- timing adjustments
- animation simplification
- missing disclaimers

before the team is already building the final delivery bundle.

This is much calmer than discovering those problems after click tags, backup images, destination URLs, and platform-specific packaging are already being finalized.

The related article [Display Ad QA Checklist Before Launch](/articles/bannerify-display-ad-qa-checklist-before-launch/) is the right follow-up once the creative itself is approved and the team is preparing for go-live.

## A practical approval rhythm for campaign teams

For multi-size campaigns, this flow works well:

1. Finish the design and animation logic in Figma.
2. Export previewable HTML versions with Bannerify.
3. Share live preview links grouped by campaign and size.
4. Ask each reviewer to focus on the specific questions they own.
5. Resolve message and timing feedback before trafficking prep starts.
6. Freeze approved creative, then build the final handoff package.

This keeps review and packaging from tripping over each other.

## Where Bannerify fits best

Bannerify does not remove the need for a trafficking-ready ZIP package. That still matters when the campaign reaches ad ops.

What it does do is make the earlier approval stage much more realistic. Instead of asking people to imagine motion from static frames or trust a one-off screen recording, you can let them review something much closer to the actual banner.

If your team regularly produces HTML5 campaigns with several reviewers in the loop, standardizing a preview-link pass around [Bannerify](/bannerify/) is one of the easier ways to reduce approval friction, tighten animation feedback, and reach trafficking with fewer surprises.

---

---
type: article
title: Regulated Display Ad Disclaimer Workflow
description: Build disclaimer-heavy HTML5 banner campaigns in Figma without letting legal copy, timing, or file-size constraints derail production.
datePublished: 2026-06-08T00:00:00.000Z
dateModified: 2026-06-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-regulated-display-ad-disclaimer-workflow/
markdownUrl: https://www.hypermatic.com/articles/bannerify-regulated-display-ad-disclaimer-workflow.md
---

# Regulated Display Ad Disclaimer Workflow

Some display campaigns are mostly a design problem.

Regulated campaigns are never only a design problem.

If you are building banners for finance, insurance, healthcare, education, gambling, or any offer with strict legal wording, the creative has to do more than look good. It has to make room for disclaimers, timing rules, landing-page alignment, and review from people who care about risk more than animation polish.

That is exactly where banner production gets fragile. The visual design may be approved, but the disclaimer arrives late, does not fit the smaller sizes, pushes the package weight up, or changes the final frame timing enough to break the whole set.

[Bannerify](/bannerify/) is useful here because it keeps Figma-based animation, HTML export, preview generation, and production packaging close together. The real win is not just exporting banners from Figma. It is giving creative, legal, and media teams a safer workflow for campaigns where the disclaimer is part of the asset, not an afterthought.

## Treat the disclaimer as core creative content

The biggest mistake in regulated display work is acting as if the disclaimer can be "added later."

It cannot.

The disclaimer affects:

- layout space
- text sizing
- final-frame readability
- animation pacing
- file size
- approval timing

That means disclaimer planning belongs at the concept stage, not after the English master banner already looks finished.

The closest related content in the current library is [Localized Banner Campaign Workflow](/articles/bannerify-localized-banner-campaign-workflow/), which covers adaptation across markets, and the tutorial on [adding scrollable text disclaimers with auto-scroll to HTML Figma banners using Bannerify](/tutorials/how-to-add-scrollable-text-disclaimers-with-auto-scroll-to-html-figma-banners-using-bannerify/). This article is narrower. It is about regulated campaigns where disclaimer handling is one of the main production constraints from the start.

## Decide which disclaimer job the banner actually has

Not every banner needs the same disclaimer behavior.

Usually the legal text is doing one of three jobs:

- `qualification`: clarifies limits around the claim or offer
- `disclosure`: communicates regulated information that must be present
- `redirect`: tells the viewer where to find fuller terms

That distinction matters because it changes the design system.

A short qualification line might fit in the final frame without much compromise. A dense disclosure may need a scrollable or popup treatment. A redirect may allow the banner to stay cleaner as long as the landing page relationship is accurate and approved.

If the team does not agree on which job the disclaimer is doing, the banner review turns into guesswork.

## Design the creative system around the tightest size, not the hero size

In disclaimer-heavy campaigns, the smallest banner often reveals the truth.

The larger format may look elegant. The 300x250 or 320x50 size shows whether the system is actually viable.

That is why I like to design regulated banner systems with the hardest placement in mind:

- where will disclaimer text be least readable?
- which size has the tightest balance between message and legal copy?
- where is animation timing least forgiving?

Once the tightest size works, larger placements become easier. If the team designs around the easiest size first, the smaller units often require awkward rescue work later.

This is one of the biggest reasons Bannerify helps. It keeps the export and preview cycle close enough that those tougher placements can be tested early rather than discovered during trafficking.

## Separate promotional message from legal support text

A strong regulated banner usually has two clear layers:

- the promotional message
- the legal support layer

Those layers should not fight for the same visual rhythm.

Questions to decide early:

- does the disclaimer live on the initial frame or only the final frame?
- does it remain visible throughout?
- does the user need to scroll or click to read more?
- is the final CTA still readable once the disclaimer is present?

The goal is not to bury the legal text. The goal is to make both layers legible without pretending they are the same kind of message.

Teams often ruin this balance by shrinking the disclaimer too far or letting it crowd the primary promise. Neither outcome is good. One creates risk. The other creates weak creative.

## Review timing as a compliance issue, not only an animation issue

In ordinary banner work, timing is usually about polish and clarity.

In regulated banner work, timing can also affect whether required information is meaningfully perceivable.

That means review should include:

- when the disclaimer appears
- how long it stays visible
- whether the final frame pauses long enough
- whether the user can interact with the legal layer if needed

If the main headline animates beautifully but the disclaimer arrives too late or disappears too quickly, the campaign may still fail review even if the asset exports correctly.

For general timing discipline, [Banner Ad Animation Timing Guidelines](/articles/bannerify-banner-ad-animation-timing-guidelines/) is the nearest companion article. In regulated campaigns, that discipline becomes even less optional.

## Use preview links to speed up cross-functional approval

Regulated banners usually need input from more than designers.

Common reviewers include:

- brand or creative leads
- legal or compliance
- media or ad ops
- the client or internal marketing owner

That review loop gets painful if each person has to download ZIP files or interpret design frames instead of seeing the working output.

Bannerify's preview workflow matters here because it gives reviewers something closer to the actual creative experience. That makes feedback more specific:

- "The disclaimer needs to appear earlier."
- "The final frame is too dense in 300x250."
- "The scrollable legal area is acceptable, but the CTA needs more separation."

That is a much better conversation than a late-stage note that simply says "legal text needs revision."

## Watch the file-size impact of legal treatments

Disclaimer-heavy campaigns can quietly gain weight.

Reasons include:

- extra background layers for readability
- more text states
- richer overlays or popup treatments
- additional fallback assets

That is why legal-safe does not automatically mean production-safe. The team still has to protect package size and trafficking requirements.

A good review checks both:

- can the disclaimer be read?
- does the final asset still meet the platform's technical limits?

If size starts creeping up, [HTML5 Banner File Size Reduction Checklist](/articles/bannerify-html5-banner-file-size-reduction-checklist/) is the best existing supporting article to pair with this workflow.

## A practical workflow for regulated banner campaigns

For most teams, this sequence is enough:

1. Define the disclaimer's actual job in the campaign.
2. Design around the tightest required size first.
3. Separate the promotional message from the legal support layer.
4. Review timing with legal visibility in mind, not only visual polish.
5. Generate previews for compliance and media review before trafficking.
6. Check file weight after the final legal treatment is applied.
7. Export only once the smallest, hardest placements are approved.

That workflow dramatically reduces the common failure mode where the creative looks finished until the disclaimer makes the system collapse.

## Where Bannerify fits best

[Bannerify](/bannerify/) does not replace legal review, and it should not. What it improves is the production path between concept and compliant, exportable banner packages.

That matters because regulated display work punishes weak workflow discipline fast.

If your team regularly builds campaigns where legal text changes layout, pacing, or packaging, stop treating the disclaimer like a late-stage overlay. Build the whole system around it inside Bannerify, and the export step becomes much less fragile for everyone involved.

---

---
type: article
title: Figma to After Effects Handoff Workflow for Motion Teams
description: Move Figma concepts into After Effects with a cleaner handoff so motion designers inherit usable layers instead of a visual reference they have to rebuild.
datePublished: 2026-06-08T00:00:00.000Z
dateModified: 2026-06-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-figma-to-after-effects-handoff-workflow-for-motion-teams/
markdownUrl: https://www.hypermatic.com/articles/convertify-figma-to-after-effects-handoff-workflow-for-motion-teams.md
---

# Figma to After Effects Handoff Workflow for Motion Teams

The hardest part of a Figma-to-motion workflow is usually not the animation itself.

It is the handoff.

A product marketer wants a launch teaser. A designer lays out frames in Figma. A motion designer receives the file and discovers that the layer naming is vague, the grouped elements are not ready for animation, the intended pacing lives only in someone's head, and the "handoff" is really just a flattened visual reference with extra steps.

That is where a sharper workflow matters more than another export button.

[Convertify](/convertify/) is useful here because it supports Figma-to-After Effects export paths directly from Figma, keeping layer structure and visual hierarchy closer to the original design. The real value is not "we exported a file." It is giving motion designers a usable starting point instead of forcing them to rebuild the scene before animating it.

## This is a handoff problem before it is a conversion problem

Teams often search for Figma-to-After Effects help because they think the missing piece is technical compatibility.

Sometimes it is. More often, the bigger issue is that the design file was never prepared for motion work in the first place.

Motion teams need more than static fidelity. They need structure:

- which elements move independently
- which groups should stay locked together
- which layers matter as timing anchors
- which parts are likely to change late

The current library already has a shorter article, [Figma to After Effects](/articles/convertify-figma-to-after-effects/), plus the step-by-step tutorial on [exporting Figma to After Effects in one click using Convertify](/tutorials/how-to-export-figma-to-after-effects-in-one-click-using-convertify/). This article goes further upstream. It is about making the handoff usable for motion production, not only generating the export.

## Decide what belongs in Figma and what belongs in After Effects

The cleanest handoffs start with role clarity.

Figma is usually the right place for:

- layout
- hierarchy
- typography choices
- scene composition
- storyboard states
- static asset preparation

After Effects is usually the right place for:

- timing refinement
- easing
- transforms and compositing
- motion polish
- sequencing and final output logic

Problems start when the team expects one tool to behave like the other. If the Figma file is overloaded with pseudo-motion thinking but weak asset structure, the export may technically work while the handoff still wastes hours.

## Build storyboard states before building export frames

If the end goal is an animated explainer, launch teaser, social cutdown, or product UI reveal, the Figma source should show the motion intent clearly before export.

That usually means defining:

- opening state
- transition states
- reveal order
- final resting state
- any looping or repeated motifs

These do not need to be fully animated inside Figma. They do need to make the narrative obvious enough that the motion designer can understand what the scene is trying to do.

One practical rule: if someone unfamiliar with the project cannot tell what is entering, exiting, or being emphasized from the Figma file, the motion handoff is still too implicit.

## Prepare layer structure for animators, not only for designers

The most expensive handoff mistake is handing over beautiful frames with bad structure.

Before exporting with Convertify, clean up:

- layer names
- nested groups
- duplicate decorative shapes
- hidden layers that should not travel
- masks or complex structures that will confuse the animation setup

Ask a motion-oriented question for each group: would an animator know what this is supposed to do?

Examples of better naming:

- `hero-phone-shell`
- `stats-card-highlight`
- `cta-button-rest`
- `sparkline-accent`
- `logo-burst-bg`

That is much more useful than:

- `group 14`
- `final-final`
- `blue rectangle copy`

If you expect repeated iterations, this structure also helps later when design changes land mid-production. A stable layer map makes it much easier to replace or refresh parts of the exported scene without reinterpreting the entire composition.

## Separate reusable assets from scene-specific assets

Motion work gets cleaner when shared pieces are isolated early.

Examples:

- logos
- repeated product cards
- illustration elements
- button styles
- UI chrome that appears in several shots

When those assets live in a predictable area of the Figma file, the export becomes easier to reason about and the motion team spends less time pulling apart repeated visual material.

This is especially helpful for campaign work where one concept will later become:

- a launch video
- a short social teaser
- a looping website animation
- a product walkthrough cut

The more the visual system is reused, the more valuable a clean asset separation becomes.

## Treat text and typography as animation decisions too

Text is often where Figma-to-motion handoffs become unexpectedly messy.

Questions worth answering before export:

- should this headline animate word by word or as one unit?
- are there text blocks that must remain editable late?
- do line breaks need to stay consistent for timing reasons?
- is any copy likely to change after the motion work starts?

Convertify can help preserve enough structure to make the export more usable, but the team still needs to decide whether the text is a stable design element or a change-prone content layer.

If product marketing is still rewriting the headline every other day, the motion designer needs to know that before the animation system gets too far along.

## A practical handoff package for motion teams

The handoff should include more than the exported file itself.

At minimum, provide:

- the cleaned Figma source frames
- the Convertify export
- a note on intended motion order
- any reference clip or timing inspiration
- a short list of likely late-change areas

That is still lightweight, but it gives the motion designer enough context to animate intentionally instead of reverse-engineering the design story.

This is also where Convertify helps beyond pure conversion. It shortens the gap between the design source and the export package, which makes iteration less fragile later.

## Review the export for editability, not just visual similarity

A visually similar export can still be a poor handoff if the motion team cannot work with it efficiently.

After export, check:

- are the main animation targets separate enough?
- do names still make sense?
- did any complex grouping become harder to use?
- are the important assets easy to identify?

That is a different standard from a normal design review. The question is not only "does it look right?" It is "will this save or cost the animator time?"

If the answer is unclear, the design team should fix the structure in Figma before treating the workflow as solved.

## When this workflow matters most

This handoff discipline matters most when the output is:

- campaign-based and repeated
- shared between design and motion specialists
- likely to change midstream
- being adapted into several cuts or formats

One-off experimentation can survive with a looser process. Repeated production usually cannot.

## Where Convertify fits best

[Convertify](/convertify/) is not a substitute for motion direction. It does not decide how scenes should move or what timing best supports the story. What it does is remove one of the most tedious forms of waste in motion production: rebuilding already-designed scenes just to make them usable.

That is why the best Figma-to-After Effects workflow starts before the export button.

If motion designers on your team keep receiving pretty but structurally messy Figma files, standardize the handoff around Convertify and a motion-ready layer system. The result is not only faster export. It is better collaboration between the people designing the scene and the people bringing it to life.

---

---
type: article
title: Google Docs to Figma Wireframing Workflow
description: Turn content briefs and draft documents into editable Figma wireframes so content-heavy pages move faster without starting from blank frames.
datePublished: 2026-06-08T00:00:00.000Z
dateModified: 2026-06-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-google-docs-to-figma-wireframing-workflow/
markdownUrl: https://www.hypermatic.com/articles/convertify-google-docs-to-figma-wireframing-workflow.md
---

# Google Docs to Figma Wireframing Workflow

Some page projects do not start with a polished design file. They start with a Google Doc.

It might be a landing page brief, a product requirements doc, a long-form help article, a case study draft, or a rough deck outline that needs to become something visual. That is where teams often waste time. The content already exists, but designers still rebuild the structure manually from scratch just to get it into Figma.

[Convertify](/convertify/) is useful because it is not only for design-tool migration. It also helps bring content-heavy source material like Google Docs and Word documents into Figma as a starting point. That makes it much easier to move from approved language and rough hierarchy into editable wireframes without retyping everything by hand.

## This workflow is for content-first pages, not polished final design

The biggest mistake is expecting an imported document to become the final design automatically.

That is not the point.

This workflow is best when the team already has a structured content source and wants to accelerate the early layout stage for things like:

- landing pages
- product launch pages
- onboarding flows
- internal docs or help content
- case studies
- sales enablement pages

The goal is not to skip design thinking. The goal is to skip wasteful transcription.

Instead of staring at a blank canvas and manually pasting sections from a document, you start with real copy, real hierarchy, and a clearer sense of what the page needs to contain.

## Clean up the source document before import

The quality of the wireframe depends heavily on the quality of the source document.

Before bringing a Google Doc into Figma, tidy the structure:

- use real headings
- keep paragraphs grouped logically
- remove duplicate notes and dead sections
- separate optional content from required content
- label callouts, proof points, and CTAs clearly

This matters because import is much more useful when the document already reflects the actual content hierarchy.

For example, a launch page brief becomes much easier to design if the doc already distinguishes:

- hero headline
- supporting subheadline
- proof points
- feature sections
- CTA blocks
- FAQ content

If the source is a wall of text, the import will only preserve that confusion.

## Use document import to get to structure faster

Once the source doc is clean enough, Convertify can do the boring part: move the content into Figma so the designer is working with real material instead of placeholder boxes.

That helps in a few practical ways:

- content length becomes visible early
- layout problems surface before visual polish begins
- writers and designers can review the same actual wording
- product and marketing teams stop approving abstract wireframes with fake copy

This is one reason content-heavy pages often go sideways. The team approves a wireframe built from short placeholder lines, then discovers later that the real headline is twice as long, the proof section needs three extra bullets, or the CTA language changes the rhythm of the entire page.

Importing the actual document into Figma is not glamorous, but it makes the page more honest much earlier.

If you want the step-by-step mechanics, the tutorial on [importing Google Docs to Figma with Convertify](/tutorials/how-to-import-google-docs-to-figma-with-one-click-using-convertify/) is the best direct companion to this article.

## Treat the first imported file as a content map

After import, do not immediately jump to high-fidelity design.

Use the first pass as a content map:

- identify sections
- separate must-have content from optional detail
- group related blocks
- mark anything that still needs rewriting
- note where layout patterns will need to repeat

For example, if the imported content is a product launch page, you might label:

- hero
- problem statement
- product proof
- screenshots or demo section
- pricing or plan summary
- FAQ
- final CTA

This stage is where the imported doc becomes a real wireframing asset instead of a blob of text pasted onto the canvas.

## Design around real copy pressure

The biggest advantage of this workflow is not speed alone. It is that the design has to deal with real content pressure from the start.

That changes better decisions:

- long headlines get resolved before visual polish
- dense explanation blocks are broken into more readable sections
- screenshots or illustrations are planned where the content actually needs support
- repetitive sections become easier to standardize

Teams often think the design phase is where clarity begins. In reality, clarity starts when the wireframe stops lying about the amount of content.

That is why this workflow is especially strong for:

- narrative product pages
- comparison pages
- onboarding and education flows
- marketing pages with lots of proof
- docs-adjacent content that still needs a designed wrapper

## Keep ownership clear between the doc and the Figma file

One thing to decide early is where the content remains editable after the initial import.

That sounds small, but it prevents a lot of confusion.

Useful questions:

- Will writers continue editing in Google Docs?
- Does the design team now own the next round of text changes inside Figma?
- Is the imported file a starting point or an ongoing sync source?
- Who approves wording after the layout begins to constrain it?

If the answers stay vague, the team often ends up with parallel truths: one in the document, one in the wireframe, and one in Slack comments.

Convertify gets the content into Figma quickly, but the workflow still needs an explicit ownership rule afterward.

## Expect a cleanup pass after import

Imported content should save time, but it will still need cleanup.

That is normal.

Common cleanup work includes:

- re-grouping sections into frames
- fixing hierarchy where headings became visually ambiguous
- normalizing spacing
- converting repeated patterns into reusable blocks
- removing internal notes that were useful in the doc but not in the wireframe

If your team is importing from multiple formats regularly, [Figma Import Cleanup Checklist](/articles/convertify-figma-import-cleanup-checklist/) is a useful related article because the cleanup discipline matters even when the source is content rather than another design tool.

## A practical workflow for content-heavy teams

For most teams, this is enough:

1. Clean the source Google Doc so the hierarchy is explicit.
2. Import it into Figma with Convertify.
3. Use the imported result as a content map before visual design begins.
4. Break the material into real page sections and layout groups.
5. Resolve length and hierarchy issues while the work is still low fidelity.
6. Decide whether the source of truth remains the doc or moves into Figma.
7. Only then move into more polished design states.

This approach is especially helpful when the page content is already fairly mature but the design is not. Instead of rebuilding the narrative manually, the design team can focus on hierarchy, pacing, clarity, and conversion.

## Where Convertify fits best

Convertify does not replace content strategy or page design. It does remove one of the most annoying and unnecessary bottlenecks in content-heavy work: manually recreating approved language just to start the wireframe.

If your team frequently begins in Google Docs and ends in Figma, that bottleneck is large enough to deserve its own workflow. Standardizing the handoff through [Convertify](/convertify/) helps designers start with real structure, writers see their content in context earlier, and stakeholders review something closer to the truth before the page is already expensive to change.

---

---
type: article
title: Form Microcopy Review Workflow in Figma
description: Review labels, helper text, validation, consent copy, and CTA language in Figma before signup, checkout, and settings forms ship.
datePublished: 2026-06-08T00:00:00.000Z
dateModified: 2026-06-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-form-microcopy-review-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-form-microcopy-review-workflow-in-figma.md
---

# Form Microcopy Review Workflow in Figma

Teams usually notice broken forms when conversion drops or support tickets rise.

By then, the design work is already shipped and the copy problems have become user problems:

- the field label is too vague
- the error message sounds blaming instead of helpful
- the consent copy is hard to parse
- the CTA text promises the wrong next step
- the helper text explains the rule after the user has already failed it

That is why form copy deserves its own review workflow instead of getting folded into general UI polish.

[CopyDoc](/copydoc/) is a strong fit here because it helps teams export, review, update, and re-import Figma text systematically. For forms, that matters because the risky copy is usually scattered across flows: signup, checkout, onboarding, profile settings, billing, permissions, and preference screens.

## Form microcopy is where product logic meets user stress

Form copy is not decorative. It is the visible edge of product rules.

A field label tells the user what the system expects. Helper text explains how to succeed. Validation messages explain what went wrong. CTA text sets expectations for what happens next.

That means the copy is doing more than "sounding nice." It is carrying:

- compliance constraints
- security expectations
- data-format rules
- conversion intent
- trust

The closest existing content in the library is [Figma Microcopy Review Workflow](/articles/copydoc-figma-microcopy-review-workflow/) and [Error Message and Empty State Review Workflow in Figma](/articles/copydoc-error-message-and-empty-state-review-workflow-in-figma/). This article is more specific. It is about the copy inside forms, where clarity has to survive real user action, not just visual review.

## Review form copy as a system, not screen by screen

One of the biggest reasons form UX drifts is that teams review each screen in isolation.

That hides patterns like:

- one flow says "Work email" and another says "Business email"
- one password error is precise while another is generic
- checkout uses "Continue" when it really means "Pay now"
- consent language varies between near-identical forms

Instead, export or collect form text into one review surface grouped by function:

- labels
- placeholder text
- helper text
- validation messages
- consent and legal copy
- CTA labels
- success or confirmation states

CopyDoc makes that much easier because it turns scattered Figma strings into something product, design, marketing, and legal can review together without manually hunting through every frame.

## Start with the moments that carry the most risk

Not every form string deserves the same attention.

I like to review in this order:

1. primary CTA text
2. field labels for critical inputs
3. helper text for high-friction inputs
4. validation and error copy
5. consent, billing, or privacy language
6. confirmation text after submit

Why start there?

Because those are the areas most likely to affect either trust or completion.

For example:

- "Create account" and "Start free trial" are not interchangeable
- a vague password rule creates avoidable failure
- "We'll never spam you" may be friendly but legally unhelpful
- "Continue" can be a bad CTA if the next step charges the user

That kind of ambiguity often survives design review because the layout looks clean. A content-first review catches it earlier.

## Ask each string what job it is doing

Form copy gets better quickly when every line has to justify itself.

For each element, ask:

- Is this telling the user what to enter?
- Is it helping them avoid a mistake?
- Is it lowering anxiety?
- Is it making the next step more obvious?
- Is it communicating a real legal or system rule?

If the answer is "not really," the copy may be filler.

This is especially common in placeholder text and button labels. Teams often use placeholders where labels should do the real work, or they use generic CTAs because the surrounding design feels clear to the team that built it.

Users do not get that extra context. The form has to carry it on its own.

## Review validation copy before the flow reaches QA

Validation text is one of the easiest areas to under-review because it often lives in edge states the happy-path mockup does not show prominently.

But these states are exactly where clarity matters most.

A good validation review asks:

- does the user know what failed?
- does the message explain how to recover?
- is the tone calm enough for a high-stress action?
- does the wording remain clear under localization or long field names?

Weak:

- "Invalid input"

Better:

- "Use at least 8 characters, including one number."

The goal is not to turn every message into a paragraph. It is to turn the error into a usable next move.

If your team is already reviewing broader failure states, [Error Message and Empty State Review Workflow in Figma](/articles/copydoc-error-message-and-empty-state-review-workflow-in-figma/) is the best adjacent read.

## Treat legal and consent copy as part of UX, not only compliance

Forms often fail when compliance language gets bolted on late.

That creates problems like:

- unreadably dense consent text
- checkbox language that does not match the CTA promise
- billing caveats that appear too late
- privacy references that reassure nobody

A better workflow is to review legal and consent copy alongside the interaction itself.

Ask:

- does this text appear before the user commits?
- is the relationship between checkbox and CTA obvious?
- is important billing or subscription context hidden in secondary text?
- would support agree that this copy sets the right expectation?

This is not only about legal protection. It is about trust.

## Use realistic content lengths during review

Form microcopy often looks fine because the mockup is using short examples.

Then real content arrives:

- long organization names
- stricter billing warnings
- multi-line tax or address guidance
- localization expansion
- password or security requirements

That is when tidy forms become crowded forms.

Before final review, swap in realistic copy lengths for the highest-risk flows. Signup, checkout, and settings forms especially need that stress test because those are the places where one extra line can break hierarchy or push key information below the fold.

## A practical cross-functional workflow

For forms that matter to revenue, trust, or compliance, I like this split:

- product owns the action logic
- design owns hierarchy and readability
- content or UX writing owns clarity and tone
- legal reviews regulated or consent-heavy language
- support sanity-checks whether the wording matches real user confusion

CopyDoc is useful because it gives those people one shared way to review and update the strings without losing the connection back to the Figma source.

That is much healthier than collecting feedback in screenshots, docs, Slack threads, and memory.

## A form microcopy checklist worth standardizing

Before shipping a form, check:

- CTA text matches the actual next step
- labels describe what the system expects
- helper text appears where it prevents friction, not after it
- validation messages explain recovery clearly
- consent and legal text are visible enough to read
- important states have been reviewed with realistic content lengths
- cross-flow terminology is consistent

That last point matters because users often move between several forms across the same product. Inconsistent wording makes the system feel less trustworthy than it should.

## Where CopyDoc fits best

[CopyDoc](/copydoc/) does not write your UX strategy for you. It does not decide the right conversion promise or legal threshold. What it improves is the review layer that usually breaks first: collecting the right strings together, getting feedback on them systematically, and pushing approved updates back into Figma without manual copy-paste chaos.

That is exactly what form microcopy needs.

If your team keeps finding label, CTA, or validation issues late in the launch cycle, stop treating forms like tiny screens that only need visual QA. Build a dedicated review workflow around CopyDoc and let the form language get the same operational rigor as the layout.

---

---
type: article
title: Realistic Prototype Content Workflow in Figma
description: Replace lorem ipsum with believable product copy in Figma so prototype reviews, usability tests, and stakeholder approvals reflect the real experience.
datePublished: 2026-06-08T00:00:00.000Z
dateModified: 2026-06-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-realistic-prototype-content-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-realistic-prototype-content-workflow-in-figma.md
---

# Realistic Prototype Content Workflow in Figma

Lorem ipsum is one of the fastest ways to make a prototype lie.

The layout may look clean. The spacing may seem balanced. The flow may feel understandable. Then the real copy arrives and suddenly the navigation wraps, the form labels get ambiguous, the empty state sounds robotic, and the CTA stops making sense.

That is why realistic prototype content deserves its own workflow.

[CopyDoc](/copydoc/) helps because it is not only for localization or bulk text import. It is also useful much earlier, when the team needs believable content in Figma before final copy is fully approved. That makes design reviews, usability testing, and early stakeholder feedback much more representative of the real product.

## Placeholder text creates fake confidence

The problem with fake content is not just that it looks generic. It changes what the team thinks it has validated.

With placeholder text, teams often miss:

- headings that are too long in reality
- buttons that are too vague once the real action is named
- onboarding steps that need more explanation
- error messages that feel abrupt or confusing
- dense settings screens that become harder to scan with actual labels

These are not minor copy details. They affect hierarchy, comprehension, and trust.

A prototype filled with believable content gives a much better answer to questions like:

- Can users understand the next step?
- Is the page too dense?
- Does the empty state explain enough?
- Does the product language match the intended audience?

## Realistic content is especially useful before research and approvals

You do not need fully approved production copy for every prototype review.

You do need content that is realistic enough to reveal problems honestly.

This is most valuable when the team is preparing:

- usability tests
- stakeholder walkthroughs
- internal product reviews
- onboarding flow demos
- pricing or upgrade mockups
- support or education flows

The goal is not perfection. The goal is to stop testing or approving a fantasy version of the interface.

If your current Figma files are full of short headings like "Welcome title" and buttons like "Click here", the prototype is not helping anyone make confident decisions.

## Start by defining what "realistic enough" means

Not every layer needs final copy. But some layers should never stay fake for long.

High-risk content usually includes:

- page titles
- CTA buttons
- error messages
- onboarding guidance
- pricing language
- upgrade prompts
- legal or trust-sensitive text
- empty states

These are the strings that most strongly affect how users interpret the product.

For lower-risk areas, believable placeholders can be enough:

- names
- locations
- generic product data
- sample notifications
- dashboard rows

That is where CopyDoc can help a lot. Instead of dropping lorem ipsum everywhere, you can use more realistic content sources, placeholder libraries, or structured snippets that mimic the eventual product more closely.

The tutorial on [adding realistic placeholder text content in Figma using CopyDoc](/tutorials/how-to-add-realistic-placeholder-text-content-in-figma-using-copy-doc/) is a good place to start if the team wants a quick way to stop defaulting to fake Latin.

## Build a content kit for repeated prototype work

One of the best improvements a design team can make is creating a reusable prototype content kit.

That kit might include:

- sample customer names
- realistic account plans
- believable transaction or activity text
- onboarding prompts
- support messages
- empty-state examples
- notification patterns
- sample pricing or billing labels

Once these exist, prototype setup becomes much faster and much more consistent.

This is especially useful for product teams that revisit the same flows over and over. Instead of rewriting example content every sprint, they can populate the file with patterns that already feel close to the product's voice and domain.

If your team wants to keep that content in a more structured source, the tutorial on [using Google Sheets as a Figma text content library with CopyDoc](/tutorials/how-to-use-google-sheets-as-a-figma-text-content-library-using-copy-doc/) is a practical next step.

## Match prototype content to the review goal

The realism level should match what you are learning.

For usability tests:

- use believable user-facing language
- avoid obviously fake labels
- make product states feel plausible

For executive or stakeholder approvals:

- make pricing, claims, and plan labels realistic
- use feature names the business actually expects to ship
- keep screenshots and UI states aligned with the current direction

For UX writing review:

- make the prototype dense enough to expose tone and clarity issues
- include edge-case content, not only the happy path

For localization or international readiness:

- include longer strings
- vary lengths intentionally
- test layouts that are likely to stress the interface later

This is why "realistic content" is not a one-time substitution. It is part of designing the right test or review environment.

## Keep the content honest about what is provisional

One risk with believable content is that people start assuming it is final.

The answer is not going back to lorem ipsum. The answer is clearer labeling.

Good habits include:

- tagging obviously draft sections
- keeping a simple note on what is sample data
- separating approved copy from provisional copy sources
- naming frames or pages according to review status

That way the prototype can feel realistic without misleading internal teams about what has already been signed off.

## Where teams usually go wrong

There are three common failure modes:

1. Everything stays lorem ipsum too long.
2. One designer writes ad hoc fake content that does not reflect the real product.
3. Real copy arrives late and breaks the layout after stakeholders already approved the structure.

CopyDoc helps most with the second and third problems because it gives the team cleaner ways to populate, update, and re-use content across a Figma file without editing every layer manually.

If the team is already fighting wording consistency, [Figma Copy QA Checklist for Product Teams](/articles/copydoc-figma-copy-qa-checklist-for-product-teams/) is a useful companion article. This piece is earlier in the process. It is about making sure the prototype is honest enough to review well in the first place.

## A practical prototype content workflow

For most product teams, this sequence works well:

1. Identify the content layers that materially affect comprehension.
2. Replace lorem ipsum in those layers first.
3. Use a reusable content kit or sheet for believable names, plans, messages, and examples.
4. Review the prototype in the flows where content density matters most.
5. Update the content source as product language evolves instead of rewriting examples from scratch every time.

That last step is important. Once the team finds better example content, keep it. Prototype realism should improve over time, not reset every new project.

## Where CopyDoc fits best

CopyDoc does not make unapproved copy magically final. What it does do is help teams stop designing against nonsense text when the structure of the content already matters.

That is a meaningful difference. Better prototype content leads to better design critique, better research sessions, and fewer surprises when the real strings arrive.

If your team regularly runs product reviews or usability tests in Figma, standardizing a realistic-content pass around [CopyDoc](/copydoc/) is one of the easier ways to make those prototypes more truthful without creating a huge new process burden.

---

---
type: article
title: Product Launch Email Workflow in Figma
description: Plan launch announcement emails in Figma so product marketing, design, and email ops can move from concept to production HTML without rebuilding the campaign under deadline.
datePublished: 2026-06-08T00:00:00.000Z
dateModified: 2026-06-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-product-launch-email-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/emailify-product-launch-email-workflow-in-figma.md
---

# Product Launch Email Workflow in Figma

Product launch emails look simple from the outside.

There is a headline, a screenshot, a CTA, maybe a feature list, maybe a customer quote. Then the launch week arrives and the actual workflow appears: screenshots change, messaging gets tightened, legal wants a disclaimer, mobile spacing is suddenly awkward, and the team still needs real HTML that works in the inboxes people actually use.

That is why launch emails often become a rebuilding problem. The design gets approved in one place and the production version takes shape somewhere else under time pressure.

[Emailify](/emailify/) helps because it keeps the design and export path closer together inside Figma. That matters a lot for launches, where a "small last-minute change" often lands after the campaign is already halfway through review.

## Launch emails are different from ongoing campaign emails

A lifecycle email or recurring newsletter usually benefits from stable modules and repeatable structure.

A launch email is different. It often needs to combine:

- new product messaging
- fresh screenshots
- sharper hierarchy around the main announcement
- cross-functional review from product, design, marketing, and email ops
- a send deadline that does not move much even when the message does

The current Emailify content library already covers adjacent ground like [HTML Email Production Workflow for Marketing Teams](/articles/emailify-html-email-production-workflow-for-marketing-teams/), [HTML Email Handoff Checklist for Designers and Marketers](/articles/emailify-html-email-handoff-checklist-for-designers-and-marketers/), and [Figma Email QA Before ESP Upload](/articles/emailify-figma-email-qa-before-esp-upload/). This article is specifically about launch announcements where the message, product visuals, and approval cycle are all moving at once.

## Start with one launch story, not one email layout

The biggest launch-email mistake is jumping straight into modules.

Before building the email, clarify:

1. what is actually launching?
2. what is the one thing the reader should understand first?
3. what does the product screenshot need to prove?
4. what action should the reader take after opening?

That sounds obvious, but launch teams often try to say too much because the product update feels important internally. The inbox does not care about internal effort. It only rewards clarity.

In practical terms, most launch emails become stronger when the structure stays closer to:

- headline
- what changed
- why it matters
- one or two visual proofs
- one clear CTA

Instead of:

- every feature detail
- every edge case
- every stakeholder's favorite sentence

## Build the launch version with real content early

Launch emails are especially vulnerable to placeholder thinking.

If the team reviews a Figma email with fake headlines, temporary screenshots, or incomplete CTA wording, the real production problems remain hidden until late.

Before the main review starts, try to use:

- near-final subject line
- near-final preheader
- realistic screenshot states
- actual CTA text
- any required disclaimer or footer detail

This is where Emailify helps. Because the Figma design is already connected to the HTML export path, the team gets more value from reviewing real launch content early instead of pretending the final copy can be dropped in later without side effects.

## Treat screenshots as proof, not decoration

Launch emails often lean heavily on visuals, but not every screenshot earns its space.

The screenshot should do one of three things:

- prove that the product really changed
- make the benefit instantly concrete
- reduce the amount of explanatory copy required

If the screenshot only adds atmosphere, it may still be useful, but it should not dominate the email.

This matters even more on mobile. A beautiful screenshot that pushes the first CTA too far down or makes the core message harder to understand is not helping the launch.

For teams that need a stronger screenshot-export workflow upstream, [Product Screenshot Export Workflow for SaaS Landing Pages](/articles/tinyimage-product-screenshot-export-workflow-for-saas-landing-pages/) is a good companion read even though it lives in the TinyImage cluster.

## Review the launch email in the order readers experience it

Launch review gets much better when the team stops reviewing by design block and starts reviewing by inbox flow:

1. subject line and preheader
2. hero message
3. screenshot or proof section
4. primary CTA
5. supporting details
6. footer and compliance layer

Why this order?

Because launch emails succeed or fail early. If the first screenful is crowded, vague, or visually heavy, the rest of the build quality does not matter much.

This is also where cross-functional review becomes more manageable:

- product marketing owns the launch story
- design owns hierarchy and readability
- email ops owns platform fit and send readiness
- legal or compliance only reviews the areas that actually create risk

That is a healthier workflow than letting everyone comment on everything while nobody owns the final subscriber experience.

## Choose what must be reusable and what can stay launch-specific

A launch email does not need to behave like a permanent template, but it should still avoid pointless reinvention.

Reusable pieces may include:

- announcement header structure
- feature proof section pattern
- CTA block treatment
- footer structure
- mobile spacing rules

Launch-specific pieces usually include:

- headline
- screenshots
- positioning language
- proof or testimonial selection
- urgency or timing references

That separation helps the team move quickly without making the email feel generic. Emailify is especially strong when reusable Figma components can speed up production while the actual launch message still feels tailored.

If your team is standardizing modules more broadly, [Responsive Email Design System in Figma](/articles/emailify-responsive-email-design-system-in-figma/) is the nearest related article.

## Run the mobile pass before the export pass

Launch emails are one of the easiest places to discover too late that:

- the screenshot is too tall
- the CTA is buried
- the feature list wraps badly
- the disclaimer becomes hard to read
- the preheader no longer supports the actual message

Those are cheaper to fix in Figma than after the HTML is already being tested.

So the right sequence is usually:

1. final review of the launch content in Figma
2. mobile behavior review
3. Emailify HTML preview
4. client-specific testing where needed
5. export or direct ESP handoff

That keeps launch-email QA from turning into a late-stage rescue operation.

For teams that want the deeper mobile-specific version of this process, [Mobile Email QA Workflow Before Export](/articles/emailify-mobile-email-qa-workflow-before-export/) is the best supporting article in the current library.

## A practical launch email workflow

For most product marketing teams, this is enough:

1. clarify the one-message launch story
2. build the Figma email with real screenshots and near-final copy
3. review the first screenful for message clarity and CTA placement
4. tighten the supporting sections so the email does not sprawl
5. run the mobile review before HTML export
6. preview and export through Emailify
7. do final client or ESP testing only after the design and message are already stable

That sequence protects the team from the most common launch-week waste: discovering design problems inside the production environment while the send deadline is already close.

## Where Emailify fits best

[Emailify](/emailify/) does not decide how bold the launch headline should be or which screenshot tells the strongest product story. That is still product marketing and design work. What it improves is the fragile transition between approved concept and real sendable HTML.

That transition is exactly where launch emails tend to lose time.

If your announcement emails keep getting redesigned in one place and rebuilt in another, move the workflow back toward Figma and let Emailify handle the production path. That is how launch teams keep speed without accepting sloppy handoff as normal.

---

---
type: article
title: Wireframe Email Approval Workflow Before Final Design
description: Use grayscale email previews from Figma to get structure and content approved before the team spends time polishing the final campaign build.
datePublished: 2026-06-08T00:00:00.000Z
dateModified: 2026-06-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-wireframe-email-approval-workflow-before-final-design/
markdownUrl: https://www.hypermatic.com/articles/emailify-wireframe-email-approval-workflow-before-final-design.md
---

# Wireframe Email Approval Workflow Before Final Design

Email reviews go off the rails when too many things are being approved at once.

The team wants feedback on message order, CTA clarity, legal copy, and module structure. The stakeholder sees colors, imagery, and button styling first. Then the review turns into aesthetic debate before anyone agrees on the actual campaign logic.

That is why an early wireframe-style review can be so useful.

[Emailify](/emailify/) already helps teams design and export responsive HTML emails from Figma. One of the more underused parts of that workflow is using grayscale or wireframe-style previews to approve the structure before the final design gets locked in. That gives marketing, CRM, legal, and product stakeholders something simpler to react to, and it saves the design team from polishing a version whose content hierarchy was never really agreed on.

## What this workflow is actually trying to solve

This is not about making wireframes for the sake of process.

It is about separating two different approval questions:

1. Is this the right email?
2. Is this the right design treatment for the email?

When those questions get mixed together, feedback becomes noisy:

- "The button feels too aggressive" when the real issue is the CTA wording
- "Can we reduce the image size?" when the actual problem is that the proof section should appear earlier
- "This does not feel premium enough" when the reviewer really wants a different audience emphasis

A stripped-back preview helps stakeholders talk about sequence, emphasis, and content without getting distracted by the final art direction too early.

## Use wireframe review for campaigns with real approval complexity

This workflow matters most when several people need to approve an email before it goes live.

Examples:

- product launch announcements
- legal or compliance-sensitive lifecycle emails
- seasonal campaigns with multiple stakeholders
- localized or region-specific sends
- B2B nurture emails where product, sales, and CRM all have opinions

For a fast one-off newsletter, a grayscale approval pass may be unnecessary. For anything with real risk or internal politics, it can save hours.

Emailify's tutorial on [exporting grayscale wireframe previews from Figma](/tutorials/how-to-export-emails-from-figma-to-grayscale-wireframe-previews-using-emailify/) shows the mechanics. The more important decision is when to use that output strategically.

## Build the email structure before you decorate it

The early version of the email should answer structural questions clearly:

- What is the core message?
- What should the reader understand first?
- Which modules are essential?
- What can be cut if the email gets too long?
- Where do the CTA and proof belong?

This is easier to judge in a simplified preview than in a fully styled campaign.

For example, a launch email wireframe might include:

- subject line and preheader
- hero statement
- supporting explanation
- product proof block
- CTA
- FAQ or objection-handling section
- required legal footer

If the wireframe already feels too long or unfocused, the final design will not fix that. It will only hide it for a while.

## What each stakeholder should review in the wireframe stage

One reason early approvals fail is that every reviewer is looking for different things without being told what to check.

A wireframe preview works best when each stakeholder has a narrower review brief.

Marketing or CRM can review:

- campaign objective
- message order
- CTA clarity
- audience fit

Product can review:

- feature explanation accuracy
- screenshot or UI references
- claim precision

Legal or compliance can review:

- disclaimers
- footer requirements
- regulated copy
- unsubscribes or preference language

Design can review:

- whether the structure will still work once styled
- whether the email is putting too much burden on one section

This makes the meeting much calmer. People are responding to the same artifact, but not fighting over the same layer of the problem.

## Use grayscale previews to reduce false-final reactions

The value of grayscale or stripped-back previews is psychological as much as practical.

A polished email looks finished. That makes stakeholders hesitate to request structural changes, or worse, it makes them request visual tweaks because the design appears ready for that kind of feedback.

A wireframe preview signals that the team is still deciding:

- flow
- priority
- density
- copy rhythm
- module sequence

That creates better review behavior.

Stakeholders are more likely to say:

- "The offer should appear earlier."
- "This section is answering a question nobody asked yet."
- "The CTA comes before the proof."
- "The legal note needs to sit closer to the claim."

Those are useful comments. They are much harder to get once the email already looks final.

## Move to final design only after the content shape is stable

Once the wireframe preview is approved, the design pass becomes faster and more confident.

At that point, the team can spend energy on:

- imagery
- brand expression
- button treatment
- spacing rhythm
- mobile polish
- HTML export details

The big benefit is that the expensive kind of rework usually shrinks. You are less likely to redesign the hero or re-stack the whole campaign because the structural arguments were handled earlier.

That does not mean the final version skips QA. It still needs the usual checks around links, mobile rendering, personalization, and ESP behavior. The related article [Figma Email QA Before ESP Upload](/articles/emailify-figma-email-qa-before-esp-upload/) is the right next step once the campaign has moved past the approval stage.

## A practical approval rhythm for launch emails

Here is a workflow that works well for multi-stakeholder campaigns:

1. Build the email structure in Emailify with real copy and modules.
2. Export a grayscale or wireframe-style preview for early review.
3. Ask stakeholders to focus on message order, accuracy, and required content.
4. Resolve structural feedback before polishing the visuals.
5. Apply final styling only after the hierarchy is approved.
6. Export the final HTML and run the normal email QA process.

That sequence sounds slower on paper, but it is often faster overall because it prevents late-stage disagreements about the fundamentals.

## Where Emailify fits best

Emailify does not replace approval discipline. What it does do is make it easier to run both stages from the same Figma source:

- the early structural preview
- the final responsive HTML email

That continuity matters. The team does not need to invent one artifact for approval and another for production. It can move from wireframe review to final design and export without losing the thread.

If your team regularly gets launch emails stuck in cross-functional review, standardizing an early approval pass around [Emailify](/emailify/) is one of the better ways to reduce unnecessary polish work and get better feedback while the campaign is still easy to change.

---

---
type: article
title: Conference Speaker Deck Workflow in Figma
description: Build conference and event presentations in Figma with cleaner speaker notes, export choices, rehearsal flow, and backup plans for the actual stage.
datePublished: 2026-06-08T00:00:00.000Z
dateModified: 2026-06-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-conference-speaker-deck-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-conference-speaker-deck-workflow-in-figma.md
---

# Conference Speaker Deck Workflow in Figma

Conference decks are one of the easiest presentation formats to underestimate.

The slides may look simple on the surface, but the delivery environment is full of failure modes: unfamiliar stage computers, projector scaling, speaker notes that disappear at the wrong moment, videos that refuse to autoplay, and last-minute edits from an organizer who still wants a PowerPoint file.

That is why a conference talk needs a different workflow from a board deck or a sales deck.

[Pitchdeck](/pitchdeck/) is useful here because it lets the speaker keep the source design in Figma while still exporting to PowerPoint, PDF, Keynote, Google Slides, or a web presentation when the venue requires a different format. The real gain is not just flexibility. It is being able to design the talk once, then choose the safest delivery mode for the stage you are actually walking onto.

## Stage decks fail for operational reasons, not just design reasons

Most conference presentation problems are not about bad typography.

They come from operational gaps such as:

- no agreed primary delivery format
- videos or embeds tested only on the speaker's machine
- missing speaker notes in the final export
- font substitutions on venue hardware
- a deck that works live but has no acceptable backup

The strongest conference workflow plans around those risks before rehearsal starts.

That means the speaker should know:

- what machine they will present from
- whether the venue wants a file in advance
- whether the talk will be delivered in browser, PowerPoint, PDF, or another format
- whether embedded media is safe or should be replaced with fallback slides
- how the deck will behave if internet access is poor

If that sounds obvious, it is because everyone knows it in theory and still forgets it in practice.

## Start by choosing the primary delivery mode

Conference speakers often treat export format as a late decision. That is where unnecessary risk creeps in.

Choose the primary delivery mode before the deck is finalized:

- web presentation when you control the machine and want the cleanest presentation experience
- PowerPoint when organizers require editable files
- PDF when stability matters more than editability
- Keynote or Google Slides when the event ecosystem makes that unavoidable

There is no universally correct answer. The right answer depends on who controls the stage setup.

If you are delivering from your own machine, a browser presentation can be excellent because it keeps the deck closer to the original design and presentation behavior.

If the conference insists on collecting files days in advance and loading them onto shared machines, PowerPoint or PDF is often safer.

The closest companion piece here is [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/). Conference talks are one of the clearest cases where that decision changes the workflow materially.

## Design slides for a room, not only for a screen

Conference slides have to work from the back of the room, not just on a designer's monitor.

That changes what "good" looks like.

A slide that feels spacious in Figma can become unreadable on a projector if:

- supporting text is too small
- line lengths are too long
- screenshots contain tiny UI detail
- chart labels depend on close reading
- dark-on-dark contrast gets flattened by venue projection

This is where speaker decks diverge from internal presentations. A board meeting can support denser content because attendees are closer to the material. A conference talk usually rewards fewer ideas per slide and cleaner pacing.

One practical rule helps: if the point of the slide cannot be understood in two seconds, it probably asks too much of a stage audience.

## Build speaker support into the deck itself

Stage comfort matters more than many teams admit.

The speaker may know the talk well, but presentation mechanics still help:

- speaker notes for transitions and important numbers
- clear section dividers
- links or media cues where needed
- intentional pauses built into the slide sequence

Pitchdeck is especially useful when the deck needs presenter-friendly structure without pushing the speaker back into PowerPoint too early. That makes it easier to preserve the visual system in Figma while still designing for delivery.

For example, a conference deck often benefits from a clear sequence like:

1. opening problem
2. story or proof
3. framework
4. example
5. closing takeaway
6. CTA or discussion prompt

That sounds basic, but it prevents the very common mistake of designing a beautiful slide set that has no breathing rhythm once spoken aloud.

## Rehearse the deck in the format you will actually use

This is the step speakers skip most often.

They rehearse from the Figma frames, then export to another format at the end and assume everything will translate cleanly.

Rehearsal should happen in the real presentation mode:

- if you will present in browser, rehearse there
- if you will present from PowerPoint, rehearse that file
- if the venue only accepts PDF, rehearse the PDF sequence

This is how you catch the problems that do not show up in a design file:

- speaker notes missing after export
- awkward slide pacing
- broken links
- media that starts too slowly
- line breaks shifting in editable formats

If the talk includes embedded content, test whether that content is essential or just nice to have. Essential content should usually have a fallback slide or static equivalent.

## Prepare a backup stack, not just a backup file

The safest conference speakers do not rely on one artifact.

They prepare a backup stack:

- primary presentation format
- one static PDF fallback
- one shareable copy stored in cloud access they can reach quickly
- a version number or date in the file name

That stack matters because stage failures rarely give you much time. If the organizer says "the machine does not like the browser deck, can you send a PDF right now?" you should not be deciding which export is current.

For teams that already share presentations externally, the broader [Presentation Handoff Checklist for Designers](/articles/pitchdeck-presentation-handoff-checklist-for-designers/) is worth keeping nearby. Conference talks are narrower, but the handoff discipline is similar.

## A practical pre-event workflow

For most speakers, this sequence is enough:

1. Build the source deck in Figma.
2. Decide the primary stage format early.
3. Add speaker notes, links, and any media while the talk is still changing.
4. Rehearse the exported version, not only the design source.
5. Create one backup PDF and store it where you can access it quickly.
6. Send the organizer exactly the file they asked for, with a clear version name.
7. Run a final review the day before the event on the same hardware or aspect ratio if possible.

If the conference deck also needs to live on after the event, Pitchdeck makes that easier. The same source can become a shareable follow-up deck, a downloadable PDF, or an editable file for a content team that wants to repurpose the talk later.

## What conference teams usually get wrong

The most common failure pattern looks like this:

- the deck is designed beautifully
- the export is treated as a technical afterthought
- rehearsal happens in the wrong format
- backup planning is too vague

Then the speaker spends the first five minutes of the event dealing with logistics instead of the audience.

Using [Pitchdeck](/pitchdeck/) does not remove the need for judgment, rehearsal, or clear stage communication. What it does do is keep the design source, notes, sharing, and export options close together, so the team can choose the safest presentation path without rebuilding the talk in another tool.

If your organization already creates thought-leadership talks, partner presentations, or event keynotes in Figma, standardizing a conference deck workflow around Pitchdeck is one of the cleaner ways to reduce last-minute stage risk without compromising the look of the deck itself.

---

---
type: article
title: Product Launch Deck Workflow for Product Marketing Teams
description: Create launch decks in Figma that can support internal kickoff, customer-facing slides, and editable exports without rebuilding the same story in PowerPoint.
datePublished: 2026-06-08T00:00:00.000Z
dateModified: 2026-06-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-product-launch-deck-workflow-for-product-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-product-launch-deck-workflow-for-product-marketing-teams.md
---

# Product Launch Deck Workflow for Product Marketing Teams

Product launch decks usually start as one presentation and end up as five.

There is the internal launch kickoff. The sales enablement version. The customer webinar version. The executive summary version. Sometimes there is also a PDF recap or an editable deck that another team wants to reuse later.

That is where launch deck production starts breaking down. The core story may be solid, but the team keeps rebuilding the same slides in different places because each audience wants a slightly different format.

[Pitchdeck](/pitchdeck/) works well here because it lets product marketing teams keep the source design in Figma while still exporting to PowerPoint, Google Slides, PDF, Keynote, or a hosted web presentation. The real benefit is not just format flexibility. It is building one launch deck system instead of a string of disconnected slide files.

## A launch deck is a narrative system, not just a file

The most useful launch decks have to do several jobs at once:

- explain what changed
- show why it matters
- help internal teams talk about it consistently
- adapt to different audience depths
- survive follow-up sharing after the live presentation ends

That is why launch decks often drift faster than other deck types. More functions mean more versions. More versions mean more inconsistencies.

The closest related content in the current library is [Presentation Brand Control for Figma Teams](/articles/pitchdeck-presentation-brand-control-for-figma-teams/) and [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/). This article is narrower: it is about launch storytelling that needs multiple downstream audiences without rebuilding the deck every time.

## Split the deck into core story and audience layers

The cleanest launch workflow starts by separating what should stay fixed from what should flex.

Core story:

- problem or market context
- the new feature or release
- why it matters now
- proof, screenshots, or workflow examples
- the headline positioning

Audience layers:

- `internal kickoff`: deeper implementation or rollout detail
- `sales enablement`: objection handling and customer outcomes
- `customer webinar`: simpler narrative and clearer demo flow
- `executive recap`: concise progress and business framing

When teams skip this separation, every new version becomes a fork. That is how "launch-v7-final-final" deck culture starts.

Pitchdeck is strongest when Figma holds the reusable deck system and only the necessary audience pages branch from it.

## Start with the browser-presented version, not the export

One of the easiest mistakes in launch work is deciding too early that the deck is "for PowerPoint" or "for PDF."

Usually the better starting point is: what is the cleanest story we can present live?

That often leads to a stronger browser-based or Figma-native presentation first, because the team is not prematurely flattening the experience around editable constraints. Once the core story works, the export choices become much easier.

Ask these questions early:

1. Is the main launch moment live, asynchronous, or both?
2. Which audience actually needs editable slides?
3. Which audience only needs a polished view or downloadable recap?
4. Will the team want analytics on who viewed the deck afterward?

Launch decks are especially good candidates for Pitchdeck's hosted sharing and analytics because the launch rarely ends at the meeting. Teams often want to know which decks were revisited by sales, leadership, or prospects after the initial announcement.

If post-share engagement matters, [Figma Presentation Analytics for Sales Decks](/articles/pitchdeck-figma-presentation-analytics-for-sales-decks/) is the closest supporting read, even though the audience in that article is revenue teams rather than product marketing.

## Design launch slides for fast update cycles

Launch work changes late.

Pricing language shifts. Screenshots update. The demo flow changes. One slide suddenly needs the new navigation instead of the old one. If the deck system is fragile, every small change creates a cascade of cleanup.

A launch-ready Figma deck should make these updates easy:

- screenshots live in predictable modules
- product UI examples do not depend on overly complex masking tricks
- proof slides have room for copy growth
- comparison slides can handle a feature being added or removed late
- notes and speaking cues live close to the presentation source

The goal is not to make the deck generic. The goal is to make it resilient.

This is where product marketing often benefits from designing slide patterns instead of purely one-off slides. The repeated patterns are what keep internal launch, customer webinar, and follow-up export versions aligned.

## Decide which outputs deserve polish and which only need editability

Not every audience needs the same kind of deck.

For many launches:

- internal kickoff may work best as a hosted or browser deck
- sales may need editable PowerPoint or Google Slides
- executives may prefer PDF
- external webinars may need the cleanest presenter mode with notes

Those are different jobs, and Pitchdeck supports all of them. The mistake is trying to optimize every slide equally for every export path from the start.

A better rule:

- optimize the primary live delivery first
- then export for the secondary audiences that genuinely need different formats

That keeps the team from flattening good presentation choices just because one downstream audience might want editable text later.

## Use one launch deck to create several controlled variants

There is nothing wrong with variants. Uncontrolled variants are the problem.

For product launches, I like to define them deliberately:

- `launch-master`
- `launch-internal-kickoff`
- `launch-sales-enablement`
- `launch-exec-recap`
- `launch-customer-share`

Once those are explicit, the team can make smarter decisions about what belongs everywhere and what belongs only in one version.

This is especially useful when screenshots, roadmap detail, or competitive framing should not travel to every audience equally. Some launch slides are meant for internal clarity. Others are meant for market storytelling. Keeping those differences intentional reduces accidental oversharing and version confusion.

If your team already struggles with that kind of spread, [Pitch Deck Version Control for Startups](/articles/pitchdeck-pitch-deck-version-control-for-startups/) offers a strong parallel even though the stakeholder set is different.

## A practical launch deck production rhythm

For most product marketing teams, this sequence is enough:

1. Build the launch master deck in Figma.
2. Separate the core story from audience-specific add-ons.
3. Rehearse the deck in presentation mode before exporting anything.
4. Duplicate only the sections needed for each audience variant.
5. Choose export formats based on audience need, not habit.
6. Share hosted versions when post-launch analytics or browser viewing matter.
7. Export editable versions only for the teams that truly need them.

That rhythm creates much less waste than rebuilding the same launch narrative in PowerPoint, Google Slides, and PDF as separate starting points.

## What to review before the launch starts moving fast

Before the deck branches out, check:

- the launch story is clear without presenter improvisation
- screenshots and product states are current
- the first CTA or key takeaway appears early enough
- audience variants are named intentionally
- the primary presentation format is chosen in advance
- exports are tested only for the audiences that actually need them

This is also the moment to confirm whether the product launch deck will later become a reusable asset for onboarding, webinars, or sales follow-up. If the answer is yes, spending more care on the reusable structure is usually worth it.

## Where Pitchdeck helps most

[Pitchdeck](/pitchdeck/) does not decide what the launch message should be. That is still product marketing work. What it improves is the operational part that usually drags launches down: presenting, sharing, and exporting one Figma-based story into the formats real teams still need.

That matters because launch weeks already create enough chaos on their own.

If your launch decks keep splitting into separate tools and drifting by audience, move the system back toward Figma and let Pitchdeck handle the delivery layer. That is how one launch narrative stays coherent even when five different teams need it in five different ways.

---

---
type: article
title: Post-Launch Content Drift Review Workflow for Marketing Sites
description: Compare live marketing pages against Figma after CMS edits, experiments, and launch updates so visual drift does not quietly accumulate over time.
datePublished: 2026-06-08T00:00:00.000Z
dateModified: 2026-06-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-post-launch-content-drift-review-workflow-for-marketing-sites/
markdownUrl: https://www.hypermatic.com/articles/pixelay-post-launch-content-drift-review-workflow-for-marketing-sites.md
---

# Post-Launch Content Drift Review Workflow for Marketing Sites

Most visual QA workflows assume the biggest risk is before launch.

For marketing sites, that is only half true.

A page can launch beautifully and still drift later because the live site keeps changing. The CMS gets updated. A growth team runs an experiment. A marketer swaps screenshots. A pricing row changes length. A testimonial is replaced. No single edit looks dangerous on its own, but the page slowly moves away from the approved design system until the live experience feels looser, heavier, or less trustworthy than the original.

That is where post-launch design QA becomes its own workflow.

[Pixelay](/pixelay/) is a strong fit because it compares Figma designs against real live pages, staging environments, or local builds directly in the browser. For post-launch review, the value is not only catching bugs. It is making ongoing website drift visible before it turns into a permanent downgrade.

## Marketing pages drift differently from product UI

A logged-in product surface often changes through engineering releases.

A marketing page changes through a wider mix of actors:

- marketers using the CMS
- copy updates from product marketing
- design refreshes added halfway
- experimentation tools
- sales or SEO edits
- last-minute launch tweaks

That means drift often appears without a clear "release moment." The page simply gets edited until nobody remembers what the intended layout, spacing, or visual hierarchy used to be.

The existing library already includes related articles like [Figma to Web Build QA for Marketing Sites](/articles/pixelay-figma-to-web-build-qa-for-marketing-sites/), [Frontend QA Checklist for Landing Pages](/articles/pixelay-frontend-qa-checklist-for-landing-pages/), and [Staging Site Design Review Checklist](/articles/pixelay-staging-site-design-review-checklist/). This article is specifically about what happens after a page is already live and continues evolving.

## Treat the approved Figma file as a living reference, not a historical artifact

Post-launch review only works if the team knows what it is comparing against.

That does not mean the Figma file must freeze forever. It means the team should be clear about which Figma version represents the intended live experience for the current page.

Without that reference, post-launch QA becomes fuzzy:

- is this bigger headline a bug or a deliberate test?
- was the screenshot crop changed intentionally?
- did the legal note always wrap this way on mobile?

Pixelay helps by making the visual comparison concrete, but the team still needs one approved source of truth for the review to mean anything.

## Review change-prone sections first

On marketing pages, some areas drift far more often than others.

I would start with:

- hero sections
- pricing blocks
- screenshots and product proof panels
- forms and CTA modules
- testimonials and logos
- FAQ or comparison sections

Those are the places where CMS edits, experiment variants, or copy changes most often alter spacing, hierarchy, or credibility.

A long-form article body can usually absorb minor changes gracefully. A hero or pricing section often cannot.

## Separate content drift from implementation drift

This distinction matters a lot.

Some visual issues come from code:

- wrong spacing token
- broken responsive rule
- missing style update

Others come from content:

- headline became too long
- CTA wording changed and now wraps awkwardly
- a new screenshot uses a different crop or aspect ratio
- testimonial copy is much denser than the approved example

Those two problem types need different owners.

Pixelay is useful because it reveals the visual mismatch either way, but the review should still label the source clearly:

- `implementation drift`
- `content drift`
- `intentional experiment`

That makes the follow-up faster and less political. The goal is not to assign blame. It is to route the fix correctly.

## Use Pixelay after meaningful content changes, not only after code deploys

This is the mindset shift that helps most marketing teams.

Do not wait for a major redesign. Run a focused Pixelay review after changes like:

- homepage headline updates
- new product screenshots
- pricing copy changes
- campaign-specific CTA swaps
- major CMS image replacements
- test variants promoted to default

Those are exactly the edits that feel "small enough to skip QA" and later create a visibly weaker page.

If your team uses experimentation heavily, a short post-change review is especially valuable because the winning variant might still create layout compromises the original design never intended.

## Review responsive drift with real content, not remembered layouts

Marketing pages often look fine on desktop while quietly degrading on smaller screens after content updates.

Examples:

- a longer hero headline pushes the CTA too low
- a swapped screenshot becomes unreadable in a narrow card
- pricing bullets wrap inconsistently
- logo rows or social proof sections lose rhythm
- forms become visually unbalanced

This is where Pixelay is stronger than memory-based QA. The browser comparison makes the mismatch visible across real breakpoints instead of relying on "I think this used to look tighter."

If responsive behavior is a recurring issue for your team, [Responsive Website QA from Figma](/articles/pixelay-responsive-website-qa-from-figma/) is the best supporting article in the library.

## Turn drift findings into a maintenance queue, not a giant relaunch

One reason teams avoid post-launch QA is that it feels like opening a giant can of worms.

It does not have to work that way.

A good drift review usually buckets findings into:

- `fix now`: harms trust, clarity, or conversion
- `fix soon`: visible polish issue but not urgent
- `document as intentional`: approved difference from the original

That keeps the review operational instead of demoralizing.

Without those buckets, the team either ignores the findings or turns every drift note into a debate about whether the page needs a full redesign. Usually it does not. It just needs the highest-signal corrections.

## A practical post-launch review rhythm

For active marketing pages, I like this cadence:

1. keep one approved Figma reference for the live page
2. trigger a Pixelay pass after meaningful CMS or experiment changes
3. compare the highest-risk sections first
4. label each mismatch as content, implementation, or intentional
5. prioritize fixes by trust, clarity, and conversion impact

That is a much healthier model than doing one perfect pre-launch QA pass and assuming the page will stay aligned forever.

## What to check during a drift review

Focus on:

- headline wrapping and visual hierarchy
- screenshot crops and sharpness
- CTA prominence
- spacing rhythm between major sections
- form alignment and helper text density
- pricing and plan card balance
- testimonial or social proof consistency
- mobile stacking after content changes

These are the areas where marketing-site drift is most likely to quietly reduce quality without triggering obvious functional bugs.

## Where Pixelay fits best

[Pixelay](/pixelay/) does not decide whether the marketing team should change the page message. What it gives the team is a faster, more objective way to see when those changes have knocked the live experience out of alignment with the intended design.

That is exactly what post-launch pages need.

If your marketing site keeps changing after launch, stop treating design QA as a one-time gate. Use Pixelay as part of ongoing page maintenance, and visual drift becomes something you catch and manage instead of something you notice months later when the page already feels off.

---

---
type: article
title: Visual Bug Report Workflow for Frontend Teams
description: Turn Figma-to-browser mismatches into sharper frontend bug reports with exact URLs, breakpoints, overlay evidence, and clearer fix ownership.
datePublished: 2026-06-08T00:00:00.000Z
dateModified: 2026-06-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-visual-bug-report-workflow-for-frontend-teams/
markdownUrl: https://www.hypermatic.com/articles/pixelay-visual-bug-report-workflow-for-frontend-teams.md
---

# Visual Bug Report Workflow for Frontend Teams

Most visual bug reports are technically true and practically useless.

They say things like:

- "spacing feels off here"
- "the header is not like the design"
- "mobile looks weird"
- "button alignment seems broken"

That kind of report creates work, but not clarity. The developer still has to reproduce the issue, guess what "off" means, and work out whether the problem belongs to layout, typography, tokens, component logic, or content differences.

That is why design QA needs a better bug-report workflow, not just better eyes.

[Pixelay](/pixelay/) helps because it compares Figma designs against live sites, staging environments, localhost builds, and authenticated flows directly in the browser. That makes it much easier to capture visual differences as evidence instead of intuition. Once the evidence is clearer, the ticket gets easier to assign, easier to fix, and easier to verify after the change lands.

## The real problem is not finding differences

Most teams are already pretty good at noticing that something looks wrong.

The bottleneck is turning that observation into a ticket that answers the right questions:

- Which URL is wrong?
- At what viewport?
- Compared to which Figma frame?
- Is this a one-off screen issue or a shared component issue?
- What exactly should the engineer compare?

Without those answers, every visual bug becomes a mini investigation.

That is why Pixelay is especially valuable for frontend teams. It narrows the gap between "I can see the mismatch" and "I can explain the mismatch precisely enough for someone else to fix it."

## Every bug report should start with a reproducible context

Before writing anything down, lock the context:

- exact URL or environment
- exact Figma frame
- viewport or device width
- logged-in or logged-out state
- browser if relevant

This sounds simple, but it removes a huge amount of noise. A design mismatch at 1440 pixels on staging may not exist at 1280 pixels on localhost. A settings page behind auth may require seeded data to reproduce. A landing page bug may only appear once real CMS content loads.

Pixelay is useful here because the comparison happens in the browser context where the bug actually lives, not in a detached screenshot thread.

If your team often reviews private flows, [Design QA for Authenticated Product Flows](/articles/pixelay-design-qa-for-authenticated-product-flows/) is a strong companion article.

## Capture the mismatch as evidence, not just description

Once the context is stable, capture the visual difference in a way that reduces interpretation.

Useful evidence usually includes:

- the live URL
- the matching Figma frame name
- the viewport
- a screenshot or overlay view showing the mismatch
- one sentence describing the expected behavior

That is very different from writing "card spacing is off." A sharper version looks more like:

"On `/pricing` at 1280px, the plan cards sit 16px lower than the matching Figma frame, which breaks the row alignment with the section heading."

Now the engineer knows:

- where to look
- what to compare
- what kind of difference matters

That is a much better starting point than asking them to reconstruct the designer's mental model.

## Separate one-off issues from system issues early

One of the biggest wins in visual QA is recognizing when a bug is not actually page-specific.

Examples:

- one spacing token changed globally
- a button component regressed everywhere
- one breakpoint rule is affecting every card stack
- a typography style drifted across the product

If the report is written as a page bug, the team may fix it locally and miss the repeated cause.

This is why a good visual bug workflow includes a quick classification step:

- isolated page issue
- shared component issue
- token or style-system issue
- content-driven edge case

The classification does not have to be perfect. It just helps route the work to the right owner faster.

If your team is already dealing with larger fix queues, [Frontend Design QA Triage Workflow](/articles/pixelay-frontend-design-qa-triage-workflow/) is the best follow-up because it focuses on grouping and prioritizing those findings well.

## Write tickets that explain the consequence, not only the difference

Developers respond better when the report explains why the mismatch matters.

That does not mean overexplaining. It means giving the issue one concrete consequence:

- breaks alignment with adjacent cards
- makes the CTA look disabled
- pushes legal text below the fold on mobile
- makes the comparison table harder to scan
- creates a misleading visual hierarchy

This helps the engineer make a smarter fix, especially if the exact pixel difference is only part of the problem.

For example:

"The modal close button sits lower than the Figma position at 390px wide, which makes it visually merge with the heading and harder to spot quickly."

That is more useful than "close button 6px off."

## Keep the ticket format boring and repeatable

A lightweight template goes a long way. For example:

- URL/environment
- Figma frame reference
- viewport
- issue summary
- evidence screenshot or overlay
- expected result
- likely scope: page or shared component

Once a team uses this format consistently, visual QA stops feeling like subjective commentary and starts behaving more like normal frontend work.

This is where Pixelay helps most. It gives designers and engineers a common visual reference inside the actual browser environment instead of forcing one side to translate everything into words alone.

## Re-verify fixes in the same context

Visual bugs often get marked fixed after the code changes, but before anyone checks the original comparison context again.

That leads to two common problems:

- the fix solved one viewport but not the one the ticket referenced
- the adjustment improved the page but introduced drift somewhere nearby

The recheck should use the same ingredients as the original report:

- same URL or environment
- same Figma frame
- same breakpoint
- same state

This is also where Pixelay keeps the verification loop tight. The team can return to the comparison view that created the ticket instead of relying on memory or a standalone screenshot.

## A practical workflow for visual bug reporting

For most frontend teams, this sequence is enough:

1. Compare the live build against the matching Figma frame in Pixelay.
2. Lock the exact reproduction context.
3. Capture the mismatch as visual evidence.
4. Write the ticket with one clear consequence.
5. Classify whether the issue looks isolated or systemic.
6. Re-verify the fix in the same context once it ships.

That workflow does not remove taste from design QA. It just reduces the amount of time people spend arguing about what was meant.

## Where Pixelay fits best

Pixelay does not decide whether the design itself is good. It does make the conversation about implementation much more objective.

That matters because frontend teams do not need more vague visual criticism. They need better evidence, better routing, and faster confirmation when the fix is done.

If your design-to-build reviews still depend on screenshots, Slack messages, and comments like "looks a bit off here," standardizing a visual bug-report workflow around [Pixelay](/pixelay/) is one of the easier ways to make QA less subjective and much more actionable.

---

---
type: article
title: Documentation Screenshot Workflow for Support Teams
description: Export clearer, lighter documentation screenshots from Figma so help center articles stay readable without turning your docs into a slow image dump.
datePublished: 2026-06-08T00:00:00.000Z
dateModified: 2026-06-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-documentation-screenshot-workflow-for-support-teams/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-documentation-screenshot-workflow-for-support-teams.md
---

# Documentation Screenshot Workflow for Support Teams

Support screenshots look harmless until a documentation library starts growing.

One article needs six steps. Another needs annotated settings panels. A release note needs before-and-after UI states. A migration guide needs desktop and mobile examples. Very quickly, the help center turns into a pile of blurry exports, oversized PNGs, and inconsistent crops that make the product feel harder to use than it really is.

That is why documentation screenshots deserve a different workflow from homepage images or social assets. They have a different job. They need to teach.

[TinyImage](/tinyimage/) is a strong fit for that job because it keeps compression, format conversion, PDF export, and batch asset work inside Figma. The practical gain is not only lighter files. It is giving support, product marketing, and documentation teams a way to publish lots of screenshots without re-exporting and re-compressing every update by hand.

## Documentation screenshots are not marketing screenshots

A marketing screenshot can get away with mood and atmosphere. A documentation screenshot usually cannot.

Readers need to see:

- which part of the UI matters
- what changed between one step and the next
- whether the screenshot matches their current screen closely enough to trust the instructions

That changes the export rules.

For a docs image, the team is usually balancing four things at once:

1. text readability
2. clean crops around the relevant UI
3. reasonable file sizes for a long article
4. enough consistency that multiple screenshots feel like one guided flow

If you treat those screenshots like generic CMS images, the images may load fast but teach poorly. If you treat them like lossless design proofs, the article becomes unnecessarily heavy.

The closest existing article in the library is [CMS Image Publishing Workflow from Figma](/articles/tinyimage-cms-image-publishing-workflow-from-figma/). That article is broader. This one is specifically about instructional screenshots where legibility and step clarity matter more than visual atmosphere.

## Start by deciding what each screenshot has to teach

Before exporting anything, label the role of each screenshot in the tutorial.

I like four categories:

- `orientation`: shows the screen the reader should be on
- `action`: shows the control they need to click or change
- `result`: shows what success should look like afterward
- `comparison`: shows before and after states side by side

That one step sounds small, but it improves the whole workflow.

An orientation image can often be cropped wider because context matters. An action image should usually crop tighter so the reader does not hunt around the screen. A result image should emphasize the changed state, not the entire application shell.

Once the screenshot role is clear, format and compression choices get easier too.

## Design the screenshot set as a sequence, not as isolated exports

Documentation images become messy when every screenshot is captured independently.

Instead, build a repeatable capture system inside Figma:

- use the same browser chrome or frame treatment across the whole guide
- keep zoom levels consistent for comparable steps
- decide whether callouts, arrows, or highlights are part of the system
- remove distracting side panels or empty whitespace when they do not help the lesson

This is especially important for help center and onboarding articles. Readers do not consciously analyze screenshot consistency, but they do feel when a guide looks chaotic. Inconsistent crops make the instructions feel less reliable even if the words are correct.

One useful rule: if a screenshot needs extra explanation because the important area is too small to notice, the crop is probably doing too much.

## Choose formats by readability, not habit

A lot of documentation teams default to PNG for everything. That is understandable, but it is not always necessary.

Here is a more useful way to decide:

- Use PNG when UI text and fine details need the sharpest edges.
- Use WebP when the screenshot is wider, more visual, or repeated across long documentation pages where weight matters.
- Use SVG only for actual vector diagrams or UI illustrations, not ordinary screenshots.
- Keep JPG as a fallback only when the publishing stack requires it.

The goal is not to pick one universal format. It is to match the format to the screenshot's teaching job.

For example:

- a tiny settings tooltip screenshot often deserves PNG
- a large full-page orientation screenshot may work well as WebP
- a repeated sequence of admin dashboard steps may need a mix

If your team is still standardizing export choices more broadly, [SVG vs PNG vs WebP for Figma Exports](/articles/tinyimage-svg-vs-png-vs-webp-for-figma-exports/) is the best supporting article to review alongside this workflow.

## Crop for the task, not for the full interface

A common documentation mistake is exporting the entire screen even when only one panel matters.

That hurts clarity and file size at the same time.

When cropping docs screenshots, ask:

- what does the reader need to recognize first?
- what UI can be removed without losing context?
- does the screenshot still make sense on a narrow docs column or mobile view?
- is the highlighted action still visible without zooming?

For action screenshots, tighter is usually better. For result screenshots, a slightly wider crop can help confirm the user reached the right state.

If the guide covers a longer workflow, it also helps to repeat landmarks. For example, keeping the same left navigation visible across several steps can orient the reader without forcing a full-screen export every time.

## Build a lightweight export pass in TinyImage

Once the sequence is approved, the export process should be boring.

A good docs export pass usually looks like this:

1. isolate the final screenshot frames
2. name them by article step, not internal draft language
3. export a clarity-first version
4. compare it at the actual rendered docs width
5. compress only until the image remains comfortably readable

Example filenames:

- `create-workspace-step-01-open-settings.png`
- `create-workspace-step-02-add-domain.webp`
- `create-workspace-step-03-confirm-success.png`
- `billing-before-after-comparison.webp`

TinyImage helps because the team can batch export and compress directly from Figma instead of bouncing between export panels and browser-based compressors. That matters a lot once one tutorial turns into fifty updated screenshots after a product release.

## Review the screenshots like a support lead, not only like a designer

Before publishing, ask a different set of questions from the ones you would ask on a landing page.

- Can a frustrated user immediately see what they need to click?
- Are any labels or values too soft to read?
- Does each screenshot match the words in the step?
- Are important differences between consecutive screenshots obvious enough?
- If the article has ten images, are they all necessary?

That last question matters more than people think. Documentation often gets slower because teams publish too many screenshots, not too few. If three images all communicate the same point, keep the strongest one.

For long step-by-step articles, it can also help to create one denser PDF version for internal review or customer success handoff and then export lighter individual images for the live help center. TinyImage supports both kinds of output without forcing the team into separate tooling.

## A repeatable docs screenshot checklist

Before shipping a tutorial or help center update, check:

- every screenshot has one teaching role
- text is readable at the real article width
- crops emphasize the action, not extra UI noise
- file formats match the screenshot type
- filenames follow the article step order
- duplicate or low-value screenshots are removed
- the live article is checked once after upload

That final live check is how the workflow gets better over time. If one documentation template always softens UI text too much, or one screenshot family consistently ships heavier than expected, update the preset instead of relearning the lesson during the next release.

## Where TinyImage fits best

[TinyImage](/tinyimage/) does not decide which screenshots are worth keeping. That still takes judgment from support, product, or docs teams. What it removes is the repetitive production layer between "the screenshots are ready" and "the article is actually publishable."

That is exactly the part of documentation work that tends to waste time.

If your help center or onboarding library keeps growing, build a dedicated screenshot workflow around TinyImage instead of treating every docs image like a one-off export. The result is not only faster pages. It is clearer teaching, fewer screenshot mismatches, and less manual cleanup every time the product changes.

---

---
type: article
title: PDF Review Workflow for Client Approvals from Figma
description: Create lighter, cleaner PDF approval packages from Figma so clients can review the right pages without download friction or blurry exports.
datePublished: 2026-06-08T00:00:00.000Z
dateModified: 2026-06-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-pdf-review-workflow-for-client-approvals/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-pdf-review-workflow-for-client-approvals.md
---

# PDF Review Workflow for Client Approvals from Figma

Client approvals still end up in PDF more often than design teams want to admit.

The client may not have Figma access. Procurement may need a file attached to an email chain. A legal reviewer may want one static document they can annotate offline. A stakeholder may simply be more comfortable reading a PDF than clicking through frames in a browser.

That is why "just send the Figma link" is not a complete workflow. If the approval package is hard to open, too large to email, or full of pages the reviewer does not need, the review gets slower and the feedback gets worse.

[TinyImage](/tinyimage/) helps because it keeps PDF export and compression inside the same Figma workflow the team is already using. The real value is not only smaller files. It is being able to create a PDF that is easy for clients to open, easy for teams to version, and specific enough that the reviewer can focus on the actual decision.

## A client approval PDF has a different job from a source design file

The Figma file is the working environment.

The approval PDF is a communication artifact.

That difference matters because the client usually does not need:

- every exploration frame
- every component state
- every internal note
- every page version from earlier rounds

They usually need a curated review set:

- the current approved direction
- enough context to understand the flow
- obvious page ordering
- readable copy and interface details
- a file that opens quickly on ordinary hardware

When teams skip that curation step, they create the classic approval mess: a giant export, confusing page names, inconsistent crops, and feedback that refers to "the one after the other homepage concept."

## Start by deciding what kind of approval this really is

Not every PDF review asks the same question.

Before exporting anything, decide which of these the reviewer is actually approving:

- visual direction
- copy and claims
- final layout
- stakeholder-ready sequence
- print-friendly reference
- archival signoff

That choice affects what belongs in the PDF.

If the review is mainly about messaging, you may not need every responsive breakpoint. If the review is about final design signoff, you probably do need the full set of key screens. If the file is going to procurement or legal, clean pagination and file naming matter more than animation fidelity.

One simple rule helps here: only include the pages required for the current decision. Everything else creates noise.

## Build a review-specific page set in Figma

The easiest way to keep approvals clean is to assemble a review-specific page or section before export.

That review set should usually:

- remove abandoned options
- put screens in the order the reviewer will read them
- use explicit frame names
- include title or divider slides when the file covers multiple sections
- separate desktop and mobile views clearly when both matter

For example, a website approval PDF might be arranged like this:

1. cover page with project and date
2. homepage desktop
3. homepage mobile
4. pricing page desktop
5. pricing page mobile
6. appendix for supporting variants

That is much easier to review than a raw export of scattered working frames.

If your team needs to combine multiple frames into one compressed document, the tutorial on [merging frames into a compressed PDF from Figma](/tutorials/how-to-merge-frames-to-a-compressed-pdf-from-figma-using-tiny-image/) is a strong companion to this workflow.

## Optimize for legibility first, then for file size

This is where teams often overcorrect.

They know the PDF needs to be lighter, so they compress aggressively without checking whether type, form fields, charts, or table rows still read clearly. Then the client zooms to 200 percent, sees artifacts, and loses confidence in the work.

A better review pass asks two questions in order:

1. Is the PDF readable at the size the client will actually use?
2. Is it light enough to send and open comfortably?

That order matters. The file should not be bloated, but clarity comes first. A 4 MB PDF that opens instantly and reads well is often more useful than a 900 KB PDF that turns UI details into mush.

TinyImage works well here because you can export, compress, compare, and export again without leaving Figma for another app. That shortens the loop dramatically.

If file size is still getting out of hand, review:

- oversized full-page imagery
- duplicated visual pages that are not required for approval
- unnecessary appendices
- frames exported at larger dimensions than the review requires

The tutorial on [compressing PDF files in Figma using TinyImage](/tutorials/how-to-compress-pdf-files-in-figma-using-tiny-image/) is useful once the review set itself is already clean.

## Treat annotations and context as part of the package

A review PDF is not only images of screens. It is also a set of instructions for how to read them.

That does not mean covering the file in sticky notes. It means adding just enough context that the reviewer does not invent their own.

Useful context can include:

- version date
- what changed since the last review
- which sections are final versus still provisional
- where feedback should focus
- whether the mobile view is included for layout approval or only as a reference

Even a single cover page that says "Please review homepage structure, pricing hierarchy, and CTA copy only" can improve the quality of feedback.

Without that framing, clients often comment on the wrong layer of the work because the PDF looks more finished than the decision actually is.

## Keep one export for review and another for records

Many teams try to make one PDF serve every purpose:

- client approval
- internal archive
- legal record
- implementation reference

That usually creates a file that is too heavy and too broad for the actual reviewer.

A better pattern is to separate them:

- a client review PDF with only the required pages
- an internal archive PDF or Figma page with fuller context

This also makes version control easier. Instead of sending "final-v7-approved-really-final.pdf", you can store a predictable sequence:

- `acme-homepage-review-2026-06-08.pdf`
- `acme-homepage-archive-2026-06-08.pdf`

That naming discipline sounds minor, but it prevents a lot of confusion once approvals get forwarded through email threads.

## A practical checklist before you export

Before sending the file, check:

- the PDF only includes screens needed for the current approval
- frame names and page order are easy for a client to reference
- desktop and mobile views are clearly labeled
- small UI text and data tables remain readable
- file size is reasonable for email or shared-drive upload
- the cover page or intro makes the review goal explicit
- the file name includes project and date

If one stakeholder needs a broader reference pack and another only needs the current route, make two files. That is faster than managing confused feedback later.

## Where TinyImage fits best

TinyImage does not decide which screens belong in a review. That still takes judgment from design, account management, and whoever owns the approval step.

What it removes is the wasteful middle process where a team exports a raw PDF from Figma, opens another tool to compress it, renames it in Finder, rechecks it in Preview, and repeats the whole loop because the text got too soft.

If your team sends design approvals as PDFs more than once a month, that is enough reason to standardize the workflow around [TinyImage](/tinyimage/). The goal is not just "smaller PDFs." The goal is faster approvals with fewer misunderstandings and fewer bloated review packages.

---

---
type: article
title: Animated Banner Storyboard Workflow in Figma
description: Plan multi-scene HTML5 banners in Figma before animation starts so message order, pacing, and ad variants survive review.
datePublished: 2026-06-07T00:00:00.000Z
dateModified: 2026-06-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-animated-banner-storyboard-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/bannerify-animated-banner-storyboard-workflow-in-figma.md
---

# Animated Banner Storyboard Workflow in Figma

Banner production usually goes wrong before export.

Not because the team cannot animate, but because nobody agreed on the story first. The headline is too long for the first scene. The CTA arrives late. The legal line shows up only after the layout is already locked. One stakeholder expects a punchy three-second loop while another wants a mini product demo. By the time those disagreements surface, the team is already adjusting timelines, resizing variants, and pretending the banner is "basically done."

[Bannerify](/bannerify/) is strongest when the Figma file becomes the full production source, but the biggest leverage often happens one step earlier: the storyboard stage. A clearer storyboard workflow gives animation, review, and export a much better foundation.

## Think in scenes, not only in sizes

Banner teams often organize work by dimensions first:

- 300x250
- 728x90
- 160x600
- 1080x1080

That is necessary, but it is not the story.

Before reviewing variants, define the sequence the ad needs to communicate. For many HTML5 or motion banners, that means a short scene map such as:

- scene 1: hook or headline
- scene 2: product value or proof
- scene 3: CTA and brand close

Some campaigns need four or five beats. Many do not. The important thing is that the team agrees on the message progression before anyone obsesses over easing curves or export settings.

## Build the storyboard around the first three seconds

Animated banners do not get much time to explain themselves.

The opening sequence has to answer three questions quickly:

- what is this offer or message about
- why should the viewer care
- what should they do next

That is why a storyboard review should pay special attention to the first scene and the transition into the second one. If the message is unclear before the ad loops, better animation will not save it.

I like to review early storyboards with these checks:

- Can someone understand the campaign without audio or interaction?
- Is the first scene readable at the smallest placement?
- Does the CTA arrive early enough to matter?
- Is the product or offer visible before the viewer loses interest?

If the campaign also needs export tradeoff decisions later, [When to Use HTML5 vs GIF vs MP4 Banner Exports](/articles/bannerify-when-to-use-html5-vs-gif-vs-mp4-banner-exports/) is the right next read. But do not start there. Story first.

## Small placements should shape the storyboard

A scene order that works beautifully in a large hero placement can fall apart in a narrow skyscraper or small rectangle.

That does not always mean creating a different campaign narrative. It does mean pressure-testing the storyboard against the smallest or most constrained format early.

Look for these problems:

- copy that only fits in the largest size
- scene transitions that rely on empty space small units do not have
- product shots that become meaningless when cropped down
- legal or qualification text that appears too late to remain readable

The best time to catch those problems is before the animation is polished. Once the motion feels "finished," teams become much more reluctant to cut scenes or simplify message order.

## Storyboard review should include non-design stakeholders

One reason display campaigns get slowed down is that legal, media, or growth teams often join only after the creative already looks final.

A lighter storyboard review gives those stakeholders something easier to react to:

- message order
- CTA wording
- disclosure needs
- claim sensitivity
- platform expectations

That is a much healthier conversation than sending a nearly final HTML5 export and hearing, "Can we move the disclaimer earlier?" or "Can the brand appear sooner?" after all the sizes were animated.

Bannerify helps later with the export and variant production, but earlier review discipline is what keeps the campaign from absorbing endless revision loops.

## Use one storyboard system across all variants

Campaign teams often build the flagship size first and then improvise the rest.

A better approach is to define the storyboard system once:

- what scenes exist
- which elements are mandatory in every size
- which scenes can collapse together
- where the CTA must appear
- how legal text behaves when space gets tight

That gives the designer a rule set instead of a blank slate for every format.

For example:

- the first headline always appears within the opening beat
- the CTA always lands in the final scene
- proof points can be reduced to one stat in smaller units
- the legal line may shorten visually, but the approved disclosure path is still preserved

Once those rules are explicit, resizing becomes much less chaotic.

## Timing review belongs at the storyboard layer too

Animation timing is not only a post-design polish issue. It is part of the communication logic.

If the storyboard needs too many words to explain one scene, the timing problem is already visible before the timeline is tuned. If the CTA needs only half a second to appear before loop end, the structural issue is not the easing curve. It is the storyboard.

That is why I like to ask timing questions early:

- Which scene is carrying too much copy?
- Which transition is doing work that a simpler cut could do better?
- Is the final frame on screen long enough to be acted on?

For teams that are already deep in motion refinement, [Banner Ad Animation Timing Guidelines](/articles/bannerify-banner-ad-animation-timing-guidelines/) pairs well with this article.

## A practical storyboard review format

Before the team opens full export mode, review the campaign in this order:

1. Message order
2. Small-size readability
3. CTA visibility
4. Product or offer clarity
5. Disclosure placement
6. Variant simplification rules

That keeps the conversation grounded in outcomes instead of subjective reactions like "can we make this feel more dynamic?" when the real problem is that scene two is trying to do three jobs at once.

## Where Bannerify fits after the storyboard is approved

Once the story is stable, Bannerify becomes much more valuable because the production phase is no longer hiding unresolved communication problems.

That is when the team can move confidently into:

- animation timing
- HTML5 export
- GIF or MP4 fallback decisions
- variant generation
- platform-specific delivery

If the campaign needs multiple sizes and repeated creative changes, the tutorial on [creating multi-scene animated banners in Figma using Bannerify](/tutorials/how-to-create-multi-scene-animated-banners-from-figma-using-bannerify/) is a strong practical next step.

## Why this workflow is worth standardizing

Teams often think banner chaos comes from the export phase. In reality, it often starts with an unreviewed story.

Using [Bannerify](/bannerify/) as the production engine works much better when the Figma file already contains a clear storyboard system:

- the scenes are intentional
- the CTA timing is not accidental
- small placements were considered early
- stakeholders reacted before polish made changes expensive

That is how animated banner production starts feeling like a workflow instead of a rescue mission.

---

---
type: article
title: When to Use HTML5 vs GIF vs MP4 Banner Exports
description: Choose the right banner export format from Figma by matching HTML5, GIF, or MP4 to the placement, review process, and campaign goal.
datePublished: 2026-06-07T00:00:00.000Z
dateModified: 2026-06-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-when-to-use-html5-vs-gif-vs-mp4-banner-exports/
markdownUrl: https://www.hypermatic.com/articles/bannerify-when-to-use-html5-vs-gif-vs-mp4-banner-exports.md
---

# When to Use HTML5 vs GIF vs MP4 Banner Exports

A lot of banner production waste starts with the wrong export format.

The creative team finishes the design in Figma, someone asks for "all the versions," and the campaign suddenly accumulates HTML5 files, GIF previews, MP4 renders, and conflicting opinions about which one is actually supposed to run where.

HTML5, GIF, and MP4 banners can all come from the same core animation idea. They just do different jobs.

[Bannerify](/bannerify/) is useful precisely because it supports multiple export routes from the same Figma source. But that flexibility is only valuable when the team chooses the format intentionally instead of exporting everything by default and sorting it out later.

## The first question is not technical

Before you choose a format, ask:

- Where will this creative actually run?
- Does the placement need interaction or click handling?
- Is the asset for live media, client review, social distribution, or internal approval?
- Does the platform accept one format more naturally than the others?

That context matters more than personal preference.

An animation that works beautifully as a short MP4 teaser may be the wrong deliverable for a display placement that expects packaged HTML5. A GIF may be perfect for review or messaging approval while being a poor final format for a media buy that needs richer control.

## Use HTML5 when the banner needs to behave like an ad unit

HTML5 is usually the right choice when the banner is meant to run as real display creative.

It is strongest when the campaign needs:

- clickable ad behavior
- platform-ready packaging
- more controlled motion than a simple looping image
- better fidelity for designed ad layouts
- handoff into ad ops or trafficking workflows

This is the format to prioritize when the asset is part of a serious display campaign and the creative needs to function as an actual unit, not just look animated.

HTML5 is especially useful when the design includes timing, sequencing, or interaction cues that would feel weakened as a flat looping asset. It also fits best when ad ops needs the campaign organized around placements, click behavior, and upload-ready packages.

If your team needs more detail on the operational side after choosing HTML5, [HTML5 Banner Trafficking Handoff Checklist](/articles/bannerify-html5-banner-trafficking-handoff-checklist/) is the most useful next read.

## Use GIF when the job is simplicity and broad previewability

GIF still earns its place because it is easy to share and review.

A GIF is often the best choice when the team needs:

- quick client approval
- a lightweight visual preview in chat or email
- motion proof without ad-platform setup
- a simple looping asset for a context that does not need click behavior

GIF is not a modern answer to every banner need. It does not give you the same flexibility or production behavior as HTML5, and it can become a poor fit when the animation is detailed, text-heavy, or long.

In other words, GIF is great when the creative needs to be seen quickly and understood easily. It is less ideal when the asset needs to behave like production advertising infrastructure.

That is why I like to think of GIF as a communication format as much as a campaign format. It is often the best asset for approvals even when HTML5 is the best asset for launch.

## Use MP4 when the placement expects video, not an ad package

MP4 is the right answer when the creative is really functioning as video.

That usually applies to:

- social video placements
- CTV or video-friendly ad environments
- product loops for event screens
- internal promo or announcement assets
- other channels where autoplaying motion matters more than click-driven banner behavior

MP4 is especially useful when the team wants smoother motion than GIF and does not need the asset to carry HTML5-style package behavior.

The mistake is assuming MP4 is just "HTML5, but easier." It is a different category of output. It fits video contexts well, but it is not automatically the right handoff for display environments that expect packaged ad units or specific tracking behavior.

Bannerify supports MP4 directly, which is useful for teams that want to reuse the same Figma animation across both display and video-adjacent channels without rebuilding it somewhere else.

## Choose by campaign goal, not only by channel

Sometimes the placement alone does not settle the format choice. The campaign goal can break the tie.

Ask what matters most:

- maximum production control
- broad compatibility for review
- smooth motion for video-like distribution
- simplest possible handoff

In practice:

- choose HTML5 when control and placement readiness matter most
- choose GIF when speed of review and easy sharing matter most
- choose MP4 when the creative is closer to a short video asset than a classic banner

That framing helps when one campaign produces multiple related deliverables. The same core animation can become:

- HTML5 for the display buy
- GIF for internal approvals
- MP4 for paid social or a launch recap

The mistake is calling one of those "the real file" and the others accidental. They often serve different steps.

## Build one master animation and derive formats on purpose

The cleanest workflow is not creating separate creative logic per format. It is maintaining one master animation source in Figma and deriving the final outputs intentionally.

That means deciding:

- which animation moments must survive in every format
- which details only matter in HTML5
- whether the GIF needs a shorter loop for review clarity
- whether the MP4 needs a slightly different cut for video-first placements

When the master source stays clean, the campaign can branch without turning into format chaos.

This is one of the strongest reasons to use [Bannerify](/bannerify/) in the first place. The team can stay closer to the approved Figma source instead of rebuilding the same message in separate tools.

## Review the risks that are specific to each format

Each format creates different review questions.

For HTML5:

- Is the placement mapping clear?
- Does the trafficking team have what it needs?
- Are click expectations documented?
- Does the package fit the target platform workflow?

For GIF:

- Is the loop short and readable enough?
- Does the core message land without interaction?
- Does text remain legible throughout the motion?

For MP4:

- Does the animation still communicate without banner-style interaction?
- Is the pacing right for video consumption?
- Is this actually going to a video-appropriate placement?

Notice that none of these questions is purely about visual taste. They are operational questions tied to what the asset will need to do after export.

## A decision checklist for format choice

Before exporting, confirm:

- the team knows whether the asset is for live media, review, or video distribution
- the format matches the placement and handoff needs
- the campaign requires interaction or not
- the creative stays readable in the chosen format
- reviewers know which export is the final live asset versus a preview asset
- platform requirements are checked before final delivery

That last point matters because ad platform rules and delivery expectations change. The workflow can stay stable, but the current platform specifics should always be verified before launch.

If your team is still deciding whether the campaign should use custom HTML5 creative at all, [Responsive Display Ads vs HTML5 Banners](/articles/bannerify-responsive-display-ads-vs-html5-banners/) is the right broader decision article to read alongside this one.

## Where Bannerify fits best

Bannerify helps because format decisions become much easier when the same Figma creative can produce multiple output types without a rebuild.

That does not remove judgment. It makes judgment cheaper. The team can choose HTML5, GIF, or MP4 based on the real campaign need instead of based on whichever toolchain is least painful that day.

If your banner workflow keeps exporting "everything just in case," standardizing the decision around [Bannerify](/bannerify/) is a good way to make production faster and handoff cleaner. The best format is not the most impressive one. It is the one that matches the placement, the review path, and the job the creative has to do once it leaves Figma.

---

---
type: article
title: Figma to Canva Handoff Workflow for Marketing Teams
description: Move campaign designs from Figma into Canva more cleanly so marketers can edit approved assets without triggering a full rebuild.
datePublished: 2026-06-07T00:00:00.000Z
dateModified: 2026-06-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-figma-to-canva-handoff-workflow-for-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/convertify-figma-to-canva-handoff-workflow-for-marketing-teams.md
---

# Figma to Canva Handoff Workflow for Marketing Teams

A lot of design teams say they hate moving assets into Canva. What they usually hate is the rebuild.

The problem is rarely Canva itself. The problem is what happens when a polished Figma layout needs to become editable for a marketing team that works faster in Canva: text gets rebuilt manually, brand spacing drifts, screenshots flatten into awkward blocks, and every future edit raises the question of whether the Canva file or the Figma file is now the real source.

That is why a Canva handoff needs more structure than "export the design and hope it is editable."

[Convertify](/convertify/) is a useful fit here because it helps move Figma work into other formats without forcing a manual recreation step first. When the destination is Canva, the real goal is not only successful export. It is preserving enough editability and structure that marketers can safely update the asset without quietly breaking the design system.

## Decide whether the design should go to Canva at all

Not every Figma design belongs in a Canva workflow.

Canva handoff is usually a good fit when the marketing team needs to:

- swap headlines or CTA copy often
- localize or regionalize campaign assets
- update event dates, pricing, or offers quickly
- repurpose social, sales, or partner collateral without a designer every time

It is usually a worse fit when the design depends heavily on:

- intricate auto layout behavior
- tightly tuned interactive presentation behavior
- complex motion or prototype logic
- deeply componentized design-system relationships that the receiving team should not edit casually

That decision matters because the right handoff workflow depends on the actual job. A campaign one-sheet, webinar promo kit, or simple partner co-marketing asset is a very different Canva target from a product UI system or a deck with advanced presentation behavior.

## Treat editability as the success metric

Teams often judge the export by appearance first. That is understandable, but it misses the real failure mode.

A Canva handoff succeeds when the marketer can:

- update text without collapsing the layout
- replace screenshots or logos without surgery
- keep the approved visual hierarchy intact
- create sensible variants without improvising the system

That is why editability should be defined before export.

Ask:

- which text blocks must remain easily editable?
- which images are likely to change after handoff?
- which elements are safe to stay more fixed?
- what should the marketing team never modify without design input?

Without those answers, the exported file becomes either too fragile or too loose.

## Simplify the Figma source before you convert it

The best Figma-to-Canva exports start with cleanup in Figma, not after conversion.

Before handoff, review the source design for:

- repeated decorative layers that can be simplified
- unclear group names
- copy blocks that should stay separate instead of merged visually
- screenshots or brand assets that need cleaner replacement zones
- typography choices that create trouble when swapped later

This is the part teams like to skip because the design already looks approved. But cleanup is what makes the receiving file usable by someone who was not in the design critique.

I like to label the parts of the asset explicitly:

- `editable-copy`
- `replaceable-image`
- `locked-brand-element`
- `regional-proof`

Even if those labels do not travel perfectly into the destination file, the act of organizing the source makes the export much safer.

If your team handles multiple destination formats, [Figma Export Format Comparison for Agencies](/articles/convertify-figma-export-format-comparison-for-agencies/) is a useful higher-level companion article. Canva handoff is one branch of that broader decision.

## Protect the parts marketers will change most often

Most post-handoff changes are predictable.

They usually involve:

- headline and subhead
- CTA copy
- event or webinar details
- region-specific screenshots
- logo swaps
- price or offer updates

The file should be prepared around those expected edits, not around every possible edit.

For example, if the asset is a paid social variant set, the most important question may be whether the marketing team can update the offer and preserve spacing across size changes. If the asset is a partner one-pager, the key question may be whether logos, quotes, and proof sections can be replaced without the layout turning brittle.

The better the handoff anticipates those routine changes, the less likely the marketing team is to start rebuilding parts of the design just to get the job done.

## Use a post-export cleanup pass, not blind delivery

Even a good conversion should not be delivered without review.

Once the file is in Canva, check the parts most likely to break first:

1. headline and body copy boxes
2. buttons or CTA groups
3. screenshots and masks
4. logo placements
5. page-to-page consistency in multi-page assets

What you are really checking is whether the design still behaves like a system.

Can someone update the main message without odd spacing?
Can they replace an image without needing to dismantle the page?
Do brand elements stay consistent after a basic edit?

This is also where you should decide whether to leave a few deliberate constraints in place. Not every layer needs to invite editing. Sometimes the cleanest handoff is the one that makes brand-critical elements feel fixed while leaving campaign-critical fields flexible.

## Handoff notes matter more than people admit

The exported file alone is rarely enough.

A short handoff note can prevent a surprising amount of drift. It should tell the receiving team:

- what the asset is for
- which fields are expected to change
- which fields should stay locked unless design signs off
- where replacement screenshots or logos should come from
- whether the Figma master remains the source of truth

Example:

- Source of truth: Figma master remains canonical for layout
- Safe edits: headline, date, CTA, market-specific screenshot
- Ask design before changing: color system, brand lockup, pricing table structure
- Use approved logos folder for partner swaps

That kind of note turns the handoff into a workflow instead of a silent file drop.

## Keep the source-of-truth rule explicit

This is where many teams get into trouble.

After the first Canva edit, nobody knows whether future changes should happen in Canva or back in Figma first. Over time, the files diverge and approvals get murky.

A much safer model is:

- Figma owns the master design system and structural updates
- Canva owns controlled downstream adaptations

That way, if the team needs a new campaign family or a significant layout change, it returns to the Figma source instead of patching a derivative file further and further away from the approved design.

This matters even more when localized or partner variants multiply. Without a source-of-truth rule, the team eventually spends more time reconciling differences than making the next asset.

## A practical checklist for Figma-to-Canva handoff

Before delivery, confirm:

- the asset is actually a good candidate for Canva editing
- the Figma source was simplified around expected edits
- key copy and image zones remain easy to change
- brand-critical elements stay stable
- the exported file was reviewed in Canva, not only in Figma
- the handoff note explains what is safe to edit
- the team knows whether Canva is a derivative file or a new master

If your team is inheriting older files before this handoff even starts, [Legacy Design File Cleanup After Migration](/articles/convertify-legacy-design-file-cleanup-after-migration/) is another useful read. A messy source creates a messy destination no matter which tool comes next.

## Where Convertify helps most

Convertify is useful here because it removes the most frustrating part of cross-tool collaboration: manually rebuilding a design just so another team can work in the tool they prefer.

That does not mean the workflow becomes automatic. A clean Canva handoff still depends on defining editability, simplifying the source, and setting clear ownership after export. But once those rules exist, [Convertify](/convertify/) gives marketing and design a much better bridge between polished design work in Figma and flexible downstream editing in Canva.

That is the real goal. Not perfect tool purity. Just fewer rebuilds, fewer ambiguous files, and a handoff the next team can actually use.

---

---
type: article
title: InDesign to Figma Migration Workflow for Editorial Teams
description: Move brochures, reports, and editorial layouts from InDesign into Figma with cleaner prep, IDML packaging, and post-import cleanup.
datePublished: 2026-06-07T00:00:00.000Z
dateModified: 2026-06-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-indesign-to-figma-migration-workflow-for-editorial-teams/
markdownUrl: https://www.hypermatic.com/articles/convertify-indesign-to-figma-migration-workflow-for-editorial-teams.md
---

# InDesign to Figma Migration Workflow for Editorial Teams

Editorial teams usually do not migrate from InDesign to Figma because they are bored. They do it because the work around the file has changed.

Maybe marketing wants faster collaboration. Maybe product design now lives in Figma and print or editorial work needs to sit closer to the rest of the brand system. Maybe a team inherited a catalog, brochure set, annual report section, or partner one-pager library that keeps getting repurposed but is trapped in old InDesign files.

This is where [Convertify](/convertify/) is useful. It gives the team a practical way to bring InDesign work into Figma without manually rebuilding every page from scratch. But the valuable part is not pretending the migration is magic. The valuable part is knowing how to package, review, and clean the imported file so it becomes something the team can actually keep working with.

## Know what kind of editorial file you are migrating

Not every InDesign project should be treated the same way.

A simple one-pager and a multi-page annual report create very different risks.

Before importing anything, decide which of these situations you are in:

- a brochure or sell sheet that needs faster reuse in marketing
- an editorial layout that will become a digital-first design asset
- a legacy print file that mainly needs text and image recovery
- a repeated document type like case studies, event one-pagers, or product sheets

That answer changes how strict your cleanup pass needs to be. If the file is only a reference starting point, slight cleanup is fine. If it will become an actively maintained Figma asset, you need a much more deliberate review.

## What the import package needs to include

This is the simplest step, and it is still one of the easiest places to go wrong.

For an InDesign-to-Figma migration, the team should not just send over an `.indd` file and hope for the best. The import flow works best when the package includes:

- the `IDML` file
- the linked assets folder
- a zip package containing both

That sounds obvious, but it matters because editorial files often depend on placed images, logos, charts, or supporting artwork that live outside the layout document itself.

If your team needs the mechanical import steps, the tutorial on [importing Adobe InDesign IDML files to Figma with one click using Convertify](/tutorials/how-to-import-adobe-indesign-idml-files-to-figma-with-one-click-using-convertify/) covers that part directly. This article is more about making the result trustworthy afterward.

## Decide what really needs to stay editable

The wrong migration goal is "everything must look identical at any cost."

The better goal is "the important parts must become editable in the right way."

For editorial teams, that usually means:

- text remains editable
- linked images arrive intact
- page structure survives well enough to reorganize
- obvious decorative artifacts do not block reuse
- tables, dividers, and recurring modules are recoverable without total rebuild

You may not need every tiny line treatment or legacy print effect to migrate perfectly if the real objective is to bring the content and layout logic into Figma for future work.

That mindset helps the team avoid wasting hours chasing cosmetic perfection in places that are about to be redesigned anyway.

## Expect a cleanup pass immediately after import

This is the part that separates a usable migration from a misleading demo.

Once the file lands in Figma, review these first:

- font substitutions or missing type styles
- text reflow in narrow columns
- overset or clipped copy
- image placement and scale
- tables or structured content that may need regrouping
- decorative lines, masks, or background shapes that arrived as separate layers

Editorial files are especially sensitive to text reflow. A paragraph that shifts by a few characters can break an entire page rhythm. That is why the first review should focus less on "is every page pixel-identical?" and more on "did the migration preserve the structure we need to edit safely?"

If your broader concern is keeping the file workable rather than merely imported, [How to Preserve Editability When Converting Legacy Design Files to Figma](/articles/convertify-how-to-preserve-editability-when-converting-legacy-design-files-to-figma/) is the best related article.

## Separate recovery cleanup from design-system cleanup

Teams often mix these into one giant migration task and lose days.

Keep them separate.

### Recovery cleanup

This is the first pass. Its job is to confirm that the imported editorial file is understandable and not broken.

Typical tasks:

- regroup layers
- rename obvious page sections
- fix missing fonts
- repair text flow
- replace broken linked images
- remove stray artifacts from the import

### Design-system cleanup

This happens later if the file will live long term in the main Figma environment.

Typical tasks:

- convert recurring patterns into components
- align spacing and text styles with the current system
- replace outdated colors or assets
- rework grids to fit current digital usage

The team moves faster when it stops trying to solve both on day one.

## Use a page-by-page QA pattern for longer editorial files

A twelve-page brochure does not need the same review rhythm as a sixty-page report, but both benefit from a predictable pass.

For longer imports, I like this order:

1. Check that every page imported.
2. Compare headline hierarchy and major text blocks.
3. Confirm linked images and charts are present.
4. Check the pages with the most complex layouts first.
5. Flag pages that only need content recovery versus pages that deserve full visual fidelity.

That last distinction is important. Some pages only need to preserve copy and structure. Others, like cover pages, signature spreads, or reusable product sheets, may need much tighter cleanup because they will be customer-facing again quickly.

## Editorial migration gets easier when intake rules are clear

If this is a repeated workflow, define intake rules before the next file arrives.

For example:

- always request IDML, not only INDD
- require the links folder with the package
- ask whether missing fonts are acceptable or must be supplied
- note whether the goal is reuse, redesign, or archive recovery
- identify which pages are highest priority

That prevents the migration step from turning into a guessing game every time an old agency file or archived publication reappears.

For teams handling lots of incoming legacy files, [Client Design File Intake Checklist](/articles/convertify-client-design-file-intake-checklist/) is also worth adapting to this workflow.

## Where Convertify helps most

Convertify is most valuable when the file migration step is blocking collaboration or reuse.

It does not remove the need for editorial judgment. You still need to decide:

- which pages deserve precise cleanup
- where print-era layout choices should be modernized
- when a broken effect should be rebuilt instead of preserved
- whether the imported file belongs in the main Figma library or a separate migration workspace

What Convertify removes is the brute-force rebuild step that makes many teams avoid migrations altogether.

## A practical editorial migration checklist

Before declaring the file "migrated," check these:

- the IDML package included the linked assets
- editable text survived where it matters
- images, charts, and logos are still present
- text reflow has been reviewed on key pages
- recurring structures are clear enough to reuse
- the team knows whether the next step is recovery, redesign, or system alignment

If your editorial library is still split between old InDesign packages and current Figma work, [Convertify](/convertify/) is a much better bridge than manual reconstruction. The real gain is not only speed. It is giving the team a way to pull useful legacy material forward without turning every migration into a one-off rescue mission.

---

---
type: article
title: Figma Copy Approval Workflow for Cross-Functional Teams
description: Run copy approvals across product, marketing, legal, and support without losing the connection between the spreadsheet and the Figma design.
datePublished: 2026-06-07T00:00:00.000Z
dateModified: 2026-06-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-copy-approval-workflow-for-cross-functional-teams/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-copy-approval-workflow-for-cross-functional-teams.md
---

# Figma Copy Approval Workflow for Cross-Functional Teams

Copy approval looks simple right up until four teams need to sign off on the same screen.

Product wants the UX to stay clear. Marketing wants the promise to match campaign language. Legal wants the claim toned down. Support wants the terminology to match what customers will actually see later in docs and tickets. Meanwhile the designer is still trying to keep the Figma file current without manually copying edits back and forth from spreadsheets, docs, Slack threads, and screenshots.

That is where [CopyDoc](/copydoc/) becomes more than a text export tool. It gives the team a cleaner way to move copy out for review and bring it back into Figma without severing the link between approved language and the actual design.

## Approval breaks when the review object is unclear

A lot of teams say they are "reviewing the copy," but they are actually reviewing three different things at once:

- raw text in a spreadsheet or doc
- text as it appears in the UI
- downstream meaning across product, lifecycle, help content, or legal requirements

If those are mixed together too early, approvals get noisy fast. Comments contradict each other, the source of truth drifts, and nobody is sure which edit is final.

A stronger workflow separates the passes while keeping them connected.

## Pass 1: prepare a review-ready export

The first pass is not a meeting. It is preparation.

Before asking anyone to review, make sure the exported content is usable outside Figma:

- each string has a clear identifier or frame reference
- repeated strings are grouped intentionally
- context is obvious enough that reviewers are not guessing where a line appears
- placeholders and intentionally unfinished text are marked clearly
- the team knows which file is the one being reviewed

This is one reason CopyDoc is helpful. External reviewers often prefer working in spreadsheets, Word files, or structured text lists rather than living inside the Figma file. The export step gives them something editable without forcing the designer to manually reassemble changes later.

## Pass 2: split approval by responsibility

One giant "copy review" meeting is usually a trap.

The cleaner approach is to run targeted passes:

### Product and UX review

Focus on:

- clarity
- button labels
- error states
- empty states
- user flow consistency

### Brand and marketing review

Focus on:

- message hierarchy
- tone
- value framing
- campaign alignment
- CTA strength

### Legal or compliance review

Focus on:

- disclaimers
- claim wording
- risk-sensitive terms
- regulated language
- locale-specific requirements

### Support or success review

Focus on:

- terminology continuity
- help-center alignment
- setup instructions
- troubleshooting language

Those passes do not all need separate files, but they do need separate intent. Otherwise one team rewrites for tone while another is still trying to resolve factual language.

## Keep approval states visible, not implied

Cross-functional copy work gets messy when the status of a string lives in memory.

Use visible states such as:

- draft
- needs product review
- needs legal review
- approved
- approved with implementation check
- blocked for clarification

That may sound operationally boring, but it stops a very common failure mode: someone assuming a line is final because it was commented on, when it was never truly approved by the right owner.

If the team already struggles with consistency itself, [Figma Terminology Audit Workflow](/articles/copydoc-figma-terminology-audit-workflow/) is a good companion article because terminology drift is often what turns approval into a rerun.

## Re-import only the approved changes

This is where many teams lose trust in the workflow.

If every comment gets pasted back into the design manually, the Figma file becomes the place where mistakes are introduced:

- old text survives in one state
- legal wording is applied to only half the screens
- one button label changes but the associated tooltip does not
- the support screenshot used by another team is already outdated

CopyDoc helps because it can pull approved text back into the design in a more systematic way. But the team still needs one rule:

Do not re-import until the approvals are real.

That means the review file should clearly separate:

- suggestions
- unresolved comments
- final approved copy

If the file going back into Figma still mixes all three, you are just moving the confusion to another step.

## Always do a post-import visual review

Approval outside Figma is not the end of the process.

Once approved copy is back in the design, check:

- text expansion or truncation
- broken hierarchy from longer lines
- CTA wrapping
- caption overflow
- mismatch between visible copy and screenshots or diagrams

This is where [Figma Copy QA Checklist for Product Teams](/articles/copydoc-figma-copy-qa-checklist-for-product-teams/) becomes especially useful. Approval and QA are not the same thing. Approval answers "is this the right wording?" QA answers "did the wording survive implementation in the design?"

## Use the workflow differently for recurring versus one-off work

Cross-functional approvals happen in both of these situations, but the process should not be identical.

### One-off launches

Examples:

- pricing page redesign
- product launch landing page
- one-time onboarding revamp

In these cases, the approval flow can be more manual as long as ownership is clear.

### Recurring approval environments

Examples:

- monthly release screens
- lifecycle email copy sync
- app store screenshot updates
- seasonal campaign refreshes

These should use reusable identifiers, review templates, and a stable approval state model. Repeated work is where manual paste-back steps become really expensive.

## A practical approval rhythm

For most teams, this sequence works well:

1. Export the copy from Figma with enough context to review safely.
2. Run targeted review passes by function instead of one giant conversation.
3. Mark statuses explicitly so the difference between comment and approval is visible.
4. Re-import only the final approved text set.
5. Review the updated Figma screens for overflow, hierarchy, and state consistency.
6. Freeze the approved version so a new round of edits does not silently reopen old decisions.

## Where CopyDoc fits best

CopyDoc is most useful when the problem is not writing copy from zero, but managing the handoff between text review and design reality.

It gives the team a better way to:

- export copy for people who do not live in Figma
- preserve structure during review
- sync approved changes back into the design
- avoid repeated copy-paste cleanup

That does not eliminate judgment. Teams still need to decide who owns the final word, which comments matter, and when a copy change triggers a broader design or localization review.

What [CopyDoc](/copydoc/) improves is the reliability of the process. And in cross-functional approval work, reliability matters more than elegance. The best workflow is the one that lets the team finish with one approved version instead of five slightly different ones hiding in different tools.

---

---
type: article
title: Stale Product Copy Audit Workflow in Figma
description: Find outdated product copy in Figma before release so renamed features, old pricing, and retired claims do not leak into screenshots or shipped UI.
datePublished: 2026-06-07T00:00:00.000Z
dateModified: 2026-06-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-stale-product-copy-audit-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-stale-product-copy-audit-workflow-in-figma.md
---

# Stale Product Copy Audit Workflow in Figma

Stale product copy is one of the easiest ways for a polished release to feel unreliable.

The design looks current. The product works. The launch date is locked. Then someone notices a screenshot still uses the old plan name, a settings screen references a retired workflow, or a marketing mockup promises a feature that changed two sprints ago.

Those mistakes rarely happen because nobody cared. They happen because product language changes faster than the design surface gets audited.

[CopyDoc](/copydoc/) is useful here because it helps teams pull text out of Figma, review it systematically, and push approved changes back in without hunting through frames one by one. For stale copy work, that structure matters more than any clever line edit.

## Stale copy is usually a workflow failure, not a writing failure

When outdated strings survive in design files, the issue is often not that the copy team missed something. It is that the product change never had a clean path through every surface where the old wording lived.

Common triggers include:

- renamed features or navigation labels
- pricing or packaging changes
- refreshed positioning or value props
- retired integrations or workflows
- onboarding updates that leave old screenshots behind
- legal or compliance wording changes

The dangerous part is that stale copy hides in places teams do not review together. It can live in product UI, upgrade modals, onboarding sequences, help screenshots, sales visuals, and launch mocks all at once.

That is why this audit needs to be broader than a normal proofreading pass.

## Start with the change event, not the whole design library

The fastest way to make a stale-copy audit overwhelming is to review every screen equally.

A better approach is to anchor the audit to the actual change event.

Ask:

- What changed in the product or message?
- Which user journeys mention that concept?
- Which screenshots or flows are most likely to expose the old wording?
- Which downstream teams will reuse those designs soon?

If the change was a pricing rename, you probably care most about upgrade flows, pricing callouts, FAQs, and product marketing visuals. If the change was a feature rename, you probably care about navigation, settings, onboarding, empty states, and comparison screens.

That scoping step turns the audit into a practical release activity instead of an endless language cleanup project.

## Export the text into one review surface

This is where [CopyDoc](/copydoc/) becomes especially valuable.

Figma is a good place to design a screen. It is a bad place to spot outdated language across dozens of screens by memory alone.

A better audit loop looks like this:

1. export the relevant text from Figma
2. group it by flow, surface, or feature area
3. compare current wording against the latest approved terminology
4. flag anything outdated, ambiguous, or inconsistent
5. re-import the approved updates into the source frames

Once the strings are outside the canvas, the patterns become much easier to see. You can sort by term, by page type, or by flow. You can also separate real issues from approved exceptions instead of commenting vaguely on individual frames.

If your team is also cleaning up broader naming drift, [Figma Terminology Audit Workflow](/articles/copydoc-figma-terminology-audit-workflow/) is a strong companion article. This piece is narrower: it is about old language surviving after a known product or messaging change.

## Look for stale copy in the highest-risk surfaces first

Some stale-copy misses are embarrassing but harmless. Others actively confuse users or weaken revenue work.

I would prioritize these surfaces first:

- onboarding and activation flows
- pricing and upgrade screens
- empty states and help states
- product marketing screenshots
- lifecycle or transactional UI shown in mocks
- sales or customer-facing screenshots used in decks

Why these?

Because they either shape trust immediately or get reused widely. A retired plan name in a buried settings panel matters less than an outdated claim on a screenshot that appears in launch content, docs, and paid media.

The same rule applies to feature renames. If the user still sees the old label in the first-run flow, the rename did not really ship cleanly.

## Review for outdated meaning, not only outdated words

One stale-copy trap is focusing only on exact text matches.

Sometimes the words changed. Sometimes the meaning did.

For example:

- "Invite your team" may no longer fit if the product now calls them workspace members.
- "Start your free trial" may need different surrounding language after a pricing change.
- "Export to CSV" may technically still be true, but the workflow or destination may now need a more precise description.

That is why every flagged string should be reviewed with two questions:

1. Is the wording current?
2. Is the workflow it describes still current?

The second question catches a lot of outdated product screenshots and explanatory text that would survive a simple search-and-replace audit.

## Group findings by action type

Once the issues are visible, sort them into practical buckets:

- `replace directly`
- `needs product decision`
- `needs design review`
- `approved exception`

That keeps the audit operational.

Direct replacements are the easy wins. Product-decision items are where the team needs to confirm the new source-of-truth wording. Design-review items are cases where new copy length or meaning may require layout changes. Approved exceptions are important because they stop the team from "fixing" language that is intentionally different in a specific context.

Without those buckets, stale-copy audits can collapse into a debate about style instead of a release-ready list of actions.

## Do not forget screenshots and derivative assets

A lot of teams update the live product language but forget the derivative design surfaces built from earlier UI states.

That includes:

- launch page screenshots
- app store visuals
- investor or sales deck visuals
- help center illustrations
- comparison graphics

These often matter more than people expect because they travel. One outdated screenshot can get copied into multiple downstream assets after the product language has already moved on.

If your team produces product marketing visuals regularly, [Product Marketing Screenshot Copy Workflow](/articles/copydoc-product-marketing-screenshot-copy-workflow/) is the best adjacent article to pair with this one.

## A practical stale-copy checklist before release

Before a release or launch ships, check:

- renamed features no longer use old labels in high-traffic flows
- plan, pricing, and offer language matches the current commercial model
- screenshots and mocked UI match the approved product wording
- support or fallback states do not reference retired workflows
- legal or compliance-related strings reflect the latest approved version
- the audit results have been pushed back into the Figma source, not left in a spreadsheet only

The last point matters a lot. If the audit lives only as a review artifact, the next designer will start from the wrong source again.

## Where CopyDoc fits best

CopyDoc helps because stale-copy work is mostly a visibility problem. Teams do not need more opinions about wording. They need a reliable way to see where old language still lives, review it with the right people, and update the actual design files without wasting hours on manual edits.

That is what turns stale-copy cleanup from a last-minute scramble into a repeatable release habit.

If your product or pricing language changes often, standardize a stale-copy audit around [CopyDoc](/copydoc/) every time a meaningful rename, repositioning, or packaging update ships. The real win is not prettier copy. It is preventing old promises and old labels from quietly leaking into the next release.

---

---
type: article
title: Lifecycle Email Workflow for Marketing Ops Teams
description: Plan reusable welcome, onboarding, nurture, and winback emails in Figma so lifecycle campaigns are easier to review, localize, and export.
datePublished: 2026-06-07T00:00:00.000Z
dateModified: 2026-06-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-lifecycle-email-workflow-for-marketing-ops-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-lifecycle-email-workflow-for-marketing-ops-teams.md
---

# Lifecycle Email Workflow for Marketing Ops Teams

Lifecycle email work is where good teams quietly lose a lot of time.

Not because one email is especially hard, but because the sequence keeps expanding. A welcome email becomes three onboarding emails. Then product marketing needs a feature education branch. Then CRM adds a winback series. Then legal changes the footer. Then the localization team wants two languages live next week. Suddenly the "email template" is really a small system with states, rules, exceptions, and multiple owners.

[Emailify](/emailify/) fits well in that environment because it lets the team keep design and export inside Figma while still producing real HTML email output. But the bigger value is operational: lifecycle emails become easier to standardize, review, and maintain when the design source is organized for the sequence instead of only for a one-off campaign.

## Lifecycle emails should be planned as a sequence, not a pile

A lot of workflow pain starts before design.

Teams often open Figma and design the first email immediately, but lifecycle work is easier when the sequence is mapped before the first module is built.

A practical sequence map should answer:

- what triggers the email
- what job that message is doing
- what state the user is in
- which modules are reused later
- which personalization tokens or dynamic areas will be needed

For a SaaS onboarding sequence, that could mean:

- email 1: welcome and account setup
- email 2: first success milestone
- email 3: feature education
- email 4: activation nudge
- email 5: winback or support handoff

Once that map exists, the design work becomes more modular and less repetitive.

## Build reusable modules around message roles

Lifecycle campaigns usually become messy when each email is designed from zero.

The smarter move is to define a reusable set of modules with clear jobs:

- hero or intro block
- progress or milestone section
- product screenshot or feature explainer
- testimonial or trust block
- CTA band
- support or FAQ section
- legal footer

That does not mean every email should look identical. It means the team stops rebuilding known patterns every time a new branch or experiment appears.

If your team is still maturing the modular side of the system, [Modular Email Template Workflow in Figma](/articles/emailify-modular-email-template-workflow-in-figma/) is the best direct follow-up.

## Plan personalization and dynamic content before review

Lifecycle emails often fail late because the content looks finished in design but has not been planned for the real sending logic.

That usually shows up as:

- merge tags added after approval
- fallback copy that was never reviewed
- dynamic product or account data breaking a layout
- extra branches for trial users, paid users, or inactive users

Marketing ops teams save themselves a lot of pain by defining these content zones while the email is still in design:

- what copy is static
- what copy changes by segment
- what fields must be available in the ESP
- where fallback values are required
- which blocks are optional in certain journeys

That is especially important in lifecycle work because the exact same design may have to behave differently across several triggers.

## Review the sequence as a reader would experience it

One-off campaigns are usually reviewed email by email. Lifecycle systems need a second layer of review: sequence review.

Ask these questions across the full set:

- Do the messages repeat the same promise too many times?
- Is the CTA progression logical?
- Does each email move the user to a new action or understanding?
- Are screenshots, proof points, or explanations inconsistent between steps?
- Would a user who receives three of these in one week feel guided or spammed?

This is where Figma is a surprisingly useful planning surface. You can review the flow visually before worrying about HTML export details, which makes it easier to catch narrative repetition early.

## Keep QA tied to the exact lifecycle risk

Lifecycle emails deserve a more specific QA pass than a general newsletter.

For example:

### Welcome or onboarding emails

Focus on:

- first-impression clarity
- setup instructions
- app screenshot accuracy
- mobile readability

### Product education emails

Focus on:

- long explanatory copy blocks
- hierarchy between education and CTA
- image weight and alt text
- whether the feature shown still matches the product

### Winback or reactivation emails

Focus on:

- urgency language
- conditional offers
- compliance-sensitive claims
- whether old screenshots or promises slipped in

That targeted review is more useful than running the same generic checklist every time.

For the export and pre-send layer, [Figma Email QA Before ESP Upload](/articles/emailify-figma-email-qa-before-esp-upload/) is the natural partner article.

## Choose the export path by operational owner

Another place lifecycle workflows break is the handoff between design and marketing ops.

Before exporting, decide:

- who owns the final HTML upload
- who validates personalization syntax
- who confirms the sequence in the automation platform
- who signs off on the tested version

Emailify can get the team from Figma to production-ready HTML quickly, but the final operational owner still matters. A clean design export does not remove the need to confirm that the actual automation behaves correctly in the destination platform.

If the sequence is heading into multiple markets or teams, that owner question matters even more.

## Lifecycle systems also need localization discipline

It is common for lifecycle campaigns to be localized later than the original design. That can cause real trouble:

- longer copy breaks stacked mobile sections
- legal or support language changes by market
- screenshots or proof points no longer fit the region
- one branch gets updated while another lags behind

If localization is likely, design for it early:

- leave realistic copy room
- avoid fragile text-over-image sections
- name frames by journey step and locale intent
- keep reusable modules consistent across the sequence

When the workflow reaches that stage, [Localized Email Review Workflow Before HTML Export](/articles/emailify-localized-email-review-workflow-before-html-export/) becomes especially useful.

## A practical lifecycle production rhythm

For most teams, this rhythm holds up well:

1. Map the journey before designing any individual email.
2. Build the module library that the sequence depends on.
3. Design each email around its job in the journey, not around available empty space.
4. Review the whole sequence for repetition and progression.
5. Run QA by lifecycle risk, not just generic campaign rules.
6. Export to HTML only after the sequence logic and fallback content are settled.
7. Validate the real automation setup in the ESP before the journey goes live.

## Where Emailify is strongest in this workflow

Emailify is strongest when the team wants lifecycle email production to stay close to the design source instead of fragmenting across a builder, screenshots, code snippets, and scattered notes.

That does not remove manual judgment. You still need to decide what the sequence should say, how aggressive the cadence should be, and whether the narrative actually helps the user move forward.

What [Emailify](/emailify/) does change is the cost of maintaining the system. When lifecycle emails stop being a string of one-off rebuilds, marketing ops gets more time for testing, localization, and performance instead of wrestling with recurring production cleanup.

---

---
type: article
title: Localized Email Review Workflow Before HTML Export
description: Review localized email variants in Figma before export so longer strings, legal differences, and mobile layout changes do not break the final send.
datePublished: 2026-06-07T00:00:00.000Z
dateModified: 2026-06-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-localized-email-review-workflow-before-html-export/
markdownUrl: https://www.hypermatic.com/articles/emailify-localized-email-review-workflow-before-html-export.md
---

# Localized Email Review Workflow Before HTML Export

Email localization gets risky when teams assume the translated version is basically the original campaign with different words.

That is almost never true.

Localized email variants carry layout stress, mobile stacking changes, legal or footer differences, offer nuance, and sometimes completely different expectations around tone or CTA phrasing. If the team only checks whether the translation is accurate, the exported HTML can still be fragile by the time it reaches the ESP.

[Emailify](/emailify/) is especially useful in this workflow because it keeps the design and export path close together inside Figma. That gives teams a better chance to catch localization problems before the HTML is generated, not after the campaign is already moving through approval.

## Localization review is a separate stage, not a footnote

The usual failure pattern looks like this:

1. the base email is approved
2. strings are translated
3. the localized frame is glanced at quickly
4. the team exports and hopes the inbox tests catch the rest

By then, the expensive problems are already waiting:

- longer subject lines and preheaders feel awkward
- buttons wrap or lose hierarchy
- product names and prices stretch modules
- legal copy becomes unreadable on mobile
- right-to-left or locale-specific formatting shifts the rhythm of the layout

That is why the localized review needs its own workflow.

The goal is not only "does the translation fit?" It is "does this still feel like a finished, production-safe email for this audience?"

## Review the riskiest modules first

Some parts of a localized email are far more likely to break than others.

I would start with:

- subject line and preheader
- hero headline and body copy
- CTA labels
- product grids or promo cards
- pricing or offer language
- footer and compliance sections

Those areas usually contain the highest combination of length sensitivity and business risk.

If a translated body paragraph becomes slightly longer, the email may still survive. If the CTA label becomes vague, the hero copy wraps badly, or the localized unsubscribe area becomes cramped, the campaign is suddenly weaker in a much more important way.

This review order is also useful because it forces the team to look at the subscriber experience first instead of treating localization as a hidden technical pass.

## Separate content changes from market changes

Not every difference in a localized email is linguistic.

Some markets need actual campaign adaptation:

- different offer framing
- different legal language
- different product emphasis
- different customer proof
- different sender or footer requirements

That means the review should classify changes into two buckets:

- translation-only changes
- market-specific content changes

Why does this matter?

Because the first bucket usually needs layout review. The second bucket may need a deeper campaign review, including legal, CRM, or local marketing signoff.

If the team treats both kinds of changes as simple translation work, important differences get under-reviewed.

## Use the base email as a structural benchmark, not a design prison

One of the most helpful ways to review a localized variant is against the base email's intent, not its exact line lengths.

Ask:

- Is the hierarchy still equally clear?
- Is the first CTA still as visible?
- Did the proof sequence stay persuasive?
- Does any section now feel too heavy or too vague?

That matters because a localized email should still feel like the same campaign, but it should not be forced into a structure that only works well in the source language.

Sometimes the right answer is not squeezing the translation harder. It is adjusting spacing, stacking, or emphasis so the localized version feels designed instead of inherited.

If your team already runs a strong mobile review on single-language campaigns, [Mobile Email QA Workflow Before Export](/articles/emailify-mobile-email-qa-workflow-before-export/) is the closest companion article. Localization makes that mobile pass even more important.

## Stress-test the real content, not a partial translation

Localization review breaks down fast when the team is looking at half-finished inputs.

Before the Figma review, make sure the localized variant includes:

- final or near-final subject line
- final preheader
- real offer wording
- real button labels
- real footer or compliance copy
- any localized product names or feature terminology

Placeholder strings hide the real risk. They make the design look calmer than the final send will be.

This is especially relevant for promotional campaigns where the localized version may use longer pricing qualifiers or more explicit offer terms than the original. If those strings do not appear until after the design review, the review did not really happen.

## Review mobile behavior as part of localization, not after it

A localized desktop frame can still produce a weak mobile email.

Longer strings often create problems like:

- buttons stacking awkwardly
- hero text pushing the first CTA too far down
- product modules becoming too dense
- disclaimers visually separating from the offer they qualify
- footer sections turning into a wall of tiny text

This is why I like to make mobile the second review pass, not the last one:

1. confirm the localized desktop hierarchy
2. check the same variant for mobile readability and spacing
3. only then move into HTML preview and client-specific testing

That sequencing catches the cheaper design fixes before the team starts troubleshooting rendered HTML.

## Give localization reviewers clear roles

The review is smoother when each stakeholder owns a distinct job:

- localization reviewer checks language accuracy and idiom
- marketing reviewer checks campaign clarity and offer logic
- CRM or email ops checks platform fit, merge tags, and send readiness
- design checks layout, spacing, and mobile behavior

That sounds formal, but it prevents the most common waste: a group of people all commenting on wording while nobody owns whether the localized layout still works.

If your team is using Emailify's translation workflows already, [How to translate HTML email designs with localization in Figma using Emailify](/tutorials/how-to-translate-html-email-designs-with-localization-in-figma-using-emailify/) is the most directly relevant tutorial. This article is about what should happen after the strings exist but before export.

## A practical localized review loop

For recurring campaigns, I would standardize this loop:

1. duplicate the approved base email into locale-specific variants
2. import or apply the real localized strings
3. review the highest-risk modules first
4. check mobile behavior before export
5. confirm legal and footer differences by market
6. preview the HTML version
7. run client-specific testing where the campaign has known risk

That process is much more reliable than jumping straight from translation to export because it acknowledges that localization changes the email as a design artifact, not only as a text layer.

## A checklist for pre-export localization review

Before exporting localized emails, confirm:

- subject line and preheader are final enough to review honestly
- CTA labels still feel clear and strong in the target language
- pricing, promo, and disclaimer blocks remain readable
- mobile stacking still supports the intended hierarchy
- localized footer and compliance sections are correct for the market
- any right-to-left or locale-specific formatting has been checked
- the team reviewed the real localized content, not placeholders

One more rule is worth keeping: do not assume the base campaign's best screenshot, proof point, or module order is automatically the best one for every market. Localization sometimes needs editorial judgment, not just layout repair.

## Where Emailify fits best

Emailify helps because it reduces the distance between email design and the production-ready HTML path. That makes it much easier to review localized variants while the team still has leverage to improve them.

The biggest payoff is not only cleaner export. It is avoiding the shadow workflow where localization issues are discovered after HTML export, patched hurriedly, and never reflected cleanly back into the design source.

If your team sends multilingual campaigns regularly, make localized review a real stage inside [Emailify](/emailify/), not a quick glance between translation and send. That is how localized emails stop feeling like adapted copies and start feeling like finished campaigns.

---

---
type: article
title: Internal Training Deck Workflow in Figma
description: Build reusable onboarding and enablement decks in Figma, then hand trainers the right format without rebuilding slides in PowerPoint.
datePublished: 2026-06-07T00:00:00.000Z
dateModified: 2026-06-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-internal-training-deck-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-internal-training-deck-workflow-in-figma.md
---

# Internal Training Deck Workflow in Figma

Internal training decks have a weird reputation. Everyone agrees they matter, but they are often built from leftovers.

One team copies slides from an old kickoff deck. Another duplicates a customer webinar. Someone adds screenshots from the current product. Someone else rewrites half the narrative in PowerPoint because the trainer needs speaker notes and a leave-behind file. Two months later, the onboarding deck says one thing, the support enablement deck says another, and nobody is sure which version is current.

That is exactly the kind of drift [Pitchdeck](/pitchdeck/) can prevent when the team already works visually in Figma. The point is not only to make pretty training slides. It is to keep one controlled deck system that can present live in the browser, export when needed, and survive frequent updates without turning into a graveyard of copied files.

## Training decks behave differently from sales decks

A sales deck usually tells one persuasive story. A training deck has to teach, repeat, and stay usable by multiple presenters.

That means it usually needs:

- a stable structure across sessions
- room for screenshots and workflow updates
- speaker notes that are actually maintained
- flexible delivery for live training, async review, or documentation handoff
- a clean way to update one section without rewriting everything else

The most common failure is treating training material like a one-off presentation instead of an operating asset.

## Split the deck into a core system and session variants

The cleanest setup is to separate what stays the same from what changes session to session.

Your core system might include:

- the welcome slide
- learning objectives
- module dividers
- repeated feature layouts
- recap and next-step slides
- standard brand elements

Your session-specific layer might include:

- screenshots from the latest product release
- role-specific examples for support, CS, or sales
- customer or partner scenarios
- links to current docs or sandbox environments
- trainer-specific notes for a given audience

That split matters because enablement material changes constantly. If every update requires rebuilding slides in another tool, the deck becomes outdated faster than the team can maintain it.

Pitchdeck fits well here because the visual source stays in Figma, but the finished output can still match how the training is delivered.

## Design for the person presenting, not only for the person approving

Training decks tend to get reviewed visually and then handed to someone who has to actually teach from them.

That is where a lot of awkwardness shows up:

- the visual flow looks polished, but there are no speaker notes
- the screenshots are current, but there is no cue for where to pause
- the trainer needs a PPTX file, but the source was built like a static PDF
- the deck works for a live session, but not for async sharing afterward

When the deck is being built in Figma, decide early what the presenter needs:

- speaker notes for each slide
- timing cues for demos
- links to docs, product pages, or sandbox URLs
- slide order that supports questions and digressions
- an export path for the audience that will keep using the material later

If your team already needs a more general handoff standard, [Presentation Handoff Checklist for Designers](/articles/pitchdeck-presentation-handoff-checklist-for-designers/) is the closest companion.

## Choose the delivery mode before the deck gets too detailed

This is the decision that saves the most cleanup later.

An internal training deck usually lands in one of three modes:

### Browser presentation

Best when:

- the trainer is presenting live
- speaker notes matter
- links or media are part of the session
- you want a cleaner presenter view than a static file gives you

### Editable PowerPoint or Google Slides export

Best when:

- regional teams need to adapt the content
- enablement managers maintain local versions
- stakeholders insist on editing after handoff

### PDF leave-behind

Best when:

- the deck is mostly a reference artifact
- formatting must stay locked
- the audience only needs a clean post-session summary

The mistake is trying to support all three equally without naming a primary route. Training decks get easier to maintain when the team says, "This is designed first for live browser delivery, and secondarily exported as PPTX for local edits," or any other clear priority.

## Treat screenshots and examples like living training content

Enablement decks age faster than brand slides because examples go stale.

A strong training deck workflow makes screenshot refreshes easy:

- keep repeated product capture areas consistent
- use shared layouts for feature walkthroughs
- reserve space for annotations or callouts
- avoid dense text blocks that collapse when feature names change

The goal is not to freeze the deck. It is to keep updates cheap enough that the team does them before the next onboarding cycle instead of after someone notices contradictions in the room.

## Make version ownership obvious

One of the quiet advantages of keeping the master deck in Figma is that it becomes easier to answer one important question:

Where does the real edit happen?

Internal training content usually touches design, product marketing, enablement, customer education, and support. If the answer is "wherever the last presenter changed the file," the deck is already drifting.

A much better rule is:

- the master visual narrative lives in Figma
- session exports are generated from that source
- local edits outside the source are either temporary or pulled back into the master

That sounds basic, but it is the difference between a maintained training system and a pile of renamed deck copies.

## Use analytics as a training feedback loop

Pitchdeck's browser delivery and analytics are especially useful for training content because internal teams often want to know what happens after the session.

For example:

- Did new hires open the follow-up deck?
- Which module got revisited the most?
- Did partner teams spend time on setup slides or skip to feature walkthroughs?
- Did anyone actually open the "next steps" section?

That kind of signal can shape what you tighten next time. It also helps you separate material that looks important from material that is actually being used.

The tutorial on [using the analytics dashboard and link tracking for Figma presentations](/tutorials/how-to-use-the-analytics-dashboard-and-link-tracking-for-figma-presentations-using-pitchdeck/) is a strong follow-up if your team wants more than a simple export workflow.

## A practical rhythm for recurring training decks

For onboarding, support enablement, or partner training, this rhythm is usually enough:

1. Maintain one master training deck in Figma.
2. Break the deck into reusable modules, not one monolithic narrative.
3. Update screenshots, examples, and notes before each training cycle.
4. Review the deck in the actual delivery mode, not just the design canvas.
5. Export only the format the audience truly needs.
6. Fold important edits back into the master instead of leaving them trapped in exported copies.

## When Pitchdeck is the better fit

Pitchdeck is a strong fit when the team wants training material to stay close to the product design source instead of getting rebuilt in traditional presentation tools every quarter.

It is especially useful when:

- design owns the structure
- trainers need notes and cleaner delivery
- multiple teams reuse the same material
- exports still matter for broader distribution

If internal training decks keep decaying into half-maintained PowerPoint copies, [Pitchdeck](/pitchdeck/) gives you a cleaner center of gravity. The biggest benefit is not that every slide starts in Figma. It is that the deck stays teachable, editable, and current without a side workflow that slowly becomes its own job.

---

---
type: article
title: Presentation Localization Workflow for Global Sales Teams
description: Localize one Figma sales deck into regional versions without losing brand control, editability, or export flexibility.
datePublished: 2026-06-07T00:00:00.000Z
dateModified: 2026-06-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-presentation-localization-workflow-for-global-sales-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-presentation-localization-workflow-for-global-sales-teams.md
---

# Presentation Localization Workflow for Global Sales Teams

Global sales teams rarely struggle because they do not have a deck. They struggle because one good deck turns into six regional copies, three rushed edits, a mismatched PowerPoint, and a final PDF that no longer matches the approved story.

Localization is where presentation workflows usually get messy. Copy gets longer. Product names differ by market. Case studies need to change. Legal slides shift. Screenshots become outdated. Then the team still has to export something stakeholder-friendly for the people who actually present it.

[Pitchdeck](/pitchdeck/) is a strong fit for this problem because it keeps the master presentation in Figma while still supporting PowerPoint, Google Slides, PDF, Keynote, and hosted web presentation outputs. That flexibility matters a lot when regional teams need different deliverables from the same core narrative.

## Localization is not just translation

The common mistake is treating presentation localization as a text replacement exercise.

That is only part of the job.

A regional sales deck often changes in at least five ways:

- headline and body copy length
- customer logos or proof points
- pricing or packaging references
- screenshots or product examples
- legal, procurement, or implementation slides

If the team only plans for translated text, the deck becomes fragile fast. Layouts start collapsing, proof points stop matching the market, and presenters lose confidence because the deck feels like a copy of the "real" version instead of a finished artifact.

The better framing is this: localization creates regional deck variants, not regional text strings alone.

## Keep one master story and decide what is allowed to vary

The cleanest localization workflows start by separating the deck into two layers.

Global layer:

- the core positioning
- visual system
- recurring structure
- slide patterns
- universal product story

Regional layer:

- market-specific proof
- local customer examples
- pricing context
- sales objections
- legal or operational notes

This sounds simple, but it prevents a lot of drift. When the global layer is stable, regional teams can adapt what actually needs changing instead of forking the whole presentation.

For example, a slide about onboarding speed may stay global, while the customer example or implementation detail on the next slide becomes regional. A procurement slide for enterprise buyers in one market may not belong in another at all.

If your team still debates export format after the localization work is done, [Which Figma Presentation Export Format Should You Use?](/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/) is the best companion article. That decision gets easier when the deck structure is already organized.

## Design for copy expansion before the deck is translated

One of the fastest ways to create unnecessary localization pain is to approve a master deck with text boxes that only work in English.

Before your first regional pass, review the master deck for slides that are likely to break under longer copy:

- headline-led title slides
- dense comparison tables
- small footnotes
- product callout slides with tight annotations
- diagram slides where labels sit inside shapes

The goal is not to make every slide oversized. It is to remove obvious fragility. A deck that survives text expansion gracefully is much easier to reuse across markets and much less likely to require manual rescue during export week.

This is especially important if some markets will ultimately need editable PowerPoint or Google Slides outputs, because downstream edits tend to magnify weak spacing decisions.

## Regional proof should change on purpose, not accidentally

When localized decks go wrong, it is often because the story remained too generic or because the wrong proof survived from the original market.

A regional sales deck should answer:

- Which customer examples feel credible here?
- Which integrations or workflows matter in this market?
- Does the pricing story need reframing?
- Which buyer objections are common locally?
- Is this screenshot or metric still the best proof for this audience?

That does not mean every region needs a fully custom deck. It means the places where the buyer asks "is this relevant to me?" should be reviewed intentionally.

I like to label those slides in the master file as `regional-proof`, `regional-legal`, or `regional-example` so the team knows where adaptation is expected instead of improvisational.

## Choose the delivery format market by market

Not every regional team needs the same output.

Some teams want a hosted web presentation they can share as a URL. Some want editable PowerPoint because account executives personalize slides before the meeting. Some want PDF because legal or procurement needs a locked artifact. Others live in Google Workspace and want Google Slides for comments.

That is where Pitchdeck is especially practical. One Figma source does not force one final format.

A simple way to decide:

- Use hosted web presentation when shareability, analytics, and presenter control matter most.
- Use PowerPoint when local teams will keep editing details after design signoff.
- Use Google Slides when review speed and comments matter more than polish.
- Use PDF when the deck needs to stay stable after approval.

The mistake is waiting until the regional review is complete to ask which output each team actually needs. Decide early so the localization pass respects the real destination.

## Build a review loop with in-market reviewers

Presentation localization fails quietly when the people reviewing it only check whether the text is translated.

Regional review should also check:

- whether the examples feel relevant
- whether the tone fits the buyer conversation
- whether the screenshots and terminology match what the market expects
- whether any local compliance or legal nuance is missing

That means one in-market reviewer should own more than grammar. They should confirm business fit.

A simple review structure works well:

1. design checks layout integrity
2. localization or content checks wording
3. regional sales lead checks commercial relevance
4. final export owner checks the output format and presentation readiness

That loop is slower than sending one translated file around casually, but much faster than discovering during a live pitch that the wrong case study or packaging language survived from another region.

## Avoid version chaos with deliberate deck families

Once a team has more than two regional variants, version control becomes a real problem.

The safest pattern is to treat localized decks as a deck family:

- one master narrative source
- one folder or page structure for regional variants
- one naming system tied to region and audience
- one clear export owner per final deliverable

For example:

- `sales-master-global`
- `sales-emea-enterprise`
- `sales-apac-midmarket`
- `sales-latam-partner`

That structure makes it much easier to know which deck should inherit master story updates and which ones have legitimate local exceptions.

If the team already struggles with deck sprawl in non-localized contexts too, [Pitch Deck Version Control for Startups](/articles/pitchdeck-pitch-deck-version-control-for-startups/) is worth adapting to this workflow.

## A localization checklist for presentation teams

Before exporting regional decks, confirm:

- the global story and visual system are still aligned
- slides marked for regional proof were updated intentionally
- longer localized copy has been tested in real layouts
- screenshots, examples, and customer proof match the target market
- the team knows which output format each region actually needs
- in-market reviewers checked business relevance, not only language
- exports are named clearly by region, audience, and format

One more useful rule: if a regional team will keep editing the file after handoff, export and test that format earlier than you think you need to. Editability problems are cheaper to catch before the final review cycle.

## Where Pitchdeck helps most

Pitchdeck is valuable here because localized deck production is rarely only a design problem or only an export problem. It sits in the uncomfortable space between brand control, regional adaptation, and presentation logistics.

Keeping the source deck in Figma while still supporting flexible outputs gives teams a better center of gravity. Instead of rebuilding the same narrative across PowerPoint copies or browser tabs, they can maintain one design-led source and export the regional artifact that actually fits the meeting.

If your sales organization keeps turning one strong presentation into an unmanageable pile of regional duplicates, [Pitchdeck](/pitchdeck/) gives you a cleaner way to run localization without sacrificing either quality or speed.

---

---
type: article
title: Design System Rollout QA Workflow for Frontend Teams
description: Review design system updates against real pages before launch so shared component changes do not create hidden visual drift.
datePublished: 2026-06-07T00:00:00.000Z
dateModified: 2026-06-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-design-system-rollout-qa-workflow-for-frontend-teams/
markdownUrl: https://www.hypermatic.com/articles/pixelay-design-system-rollout-qa-workflow-for-frontend-teams.md
---

# Design System Rollout QA Workflow for Frontend Teams

Design system rollouts are where visual QA gets deceptive.

The component update looks small. A spacing token changes. A button style is refreshed. A card pattern gets rebuilt. Then the update touches thirty pages, five breakpoints, and a collection of edge cases nobody reviewed together.

That is why rollout QA needs a different workflow from one-page launch QA.

[Pixelay](/pixelay/) is useful here because it compares Figma designs against real sites, staging builds, localhost environments, and authenticated flows. For design system updates, that matters even more than usual. The real question is not whether one page matches Figma. It is whether a shared change created consistent improvement or scattered drift across the product.

## Rollout QA is not the same as page QA

Page QA usually starts with a screen.

Design system rollout QA should start with a shared change.

That shift is important because the risk is different. A page review asks, "Does this screen look right?" A rollout review asks:

- Which components changed?
- Which tokens or patterns changed with them?
- Where do those components appear in production?
- Which contexts are most likely to break first?

If the team jumps straight into page-by-page comparison without that map, it ends up capturing symptoms instead of causes.

## Start with a component and risk inventory

Before anyone begins comparing pages, list the actual rollout surface.

For example:

- primary and secondary buttons
- form fields and validation states
- cards and list rows
- spacing tokens for section rhythm
- heading scale adjustments
- navigation or tab treatments

Then ask where those pieces create the most user-visible risk:

- high-traffic landing pages
- signup or checkout flows
- dense settings screens
- tables and dashboards
- mobile states with tight spacing

This inventory helps the team choose meaningful review targets instead of opening random pages and hoping the important cases show up.

## Compare canonical states before full pages

One of the fastest ways to make rollout QA manageable is to compare the canonical component states first.

That means checking the shared building blocks before trying to inspect every page where they appear.

Examples:

- default, hover, active, and disabled button states
- empty, focused, error, and filled input states
- card layouts at the main supported breakpoints
- navigation states across desktop and mobile

This gives the team a clean baseline. If the component itself is wrong, every full-page review will just rediscover the same issue.

That is also why [Pixelay](/pixelay/) is useful here. Comparing the design source against the browser at the state level makes it easier to spot whether the problem belongs to one shared implementation or one isolated page.

## Use representative pages, not exhaustive page panic

After the canonical states are reviewed, move to representative pages.

The goal is not to inspect every screen with equal intensity. It is to choose pages that exercise the updated system in realistic combinations:

- a marketing page with hero, cards, and CTA structure
- a form-heavy flow
- a data-dense authenticated screen
- a mobile-first layout under spacing stress
- an edge-case screen with legacy structure or long content

These pages expose how the shared components behave in context. They also reveal where a correct component can still create a wrong page because of local overrides or older implementation assumptions.

If your team already uses Pixelay for broader launch review, [Frontend Design QA Triage Workflow](/articles/pixelay-frontend-design-qa-triage-workflow/) is the best follow-up for turning those findings into a manageable queue.

## Group findings by root cause, not by screenshot count

Design system rollouts can generate a discouraging number of visible differences. That is why grouping by root cause matters so much.

Common rollout buckets include:

- one token mismatch used everywhere
- one component state missing in code
- one breakpoint rule behaving differently from the design
- one legacy area not yet aligned to the new system
- one content pattern exposing unexpected spacing stress

This grouping changes the tone of the review. Instead of twenty tiny issues, the team may only have four real implementation problems plus two accepted legacy exceptions.

That makes the work much easier to prioritize and much less demoralizing for developers.

## Watch for false confidence from regression-style checks

Rollout teams sometimes assume that if the build is internally consistent, the rollout is fine.

That is not always true.

A design system update can be implemented consistently and still drift away from the intended design. That is why build-to-build regression thinking is not enough on its own. You still need design-to-build comparison for the new standard.

This is especially important when:

- a token changed subtly but globally
- a component library was refactored
- multiple engineers touched related surfaces in parallel
- old pages only partially adopted the new pattern

If your team is deciding how this differs from automated screenshot testing, [Visual Regression Testing vs Design QA](/articles/pixelay-visual-regression-testing-vs-design-qa/) explains that distinction well.

## Make rollout verification a two-pass process

The strongest rollout QA loops usually have two passes.

Pass one:

- compare canonical states
- review representative pages
- group issues by shared cause

Pass two:

- re-check the pages and states after fixes land
- confirm the fix improved every affected context
- note any intentional exceptions or deferred legacy areas

That second pass matters because design system fixes often solve one surface while creating a side effect elsewhere. A rollout is not done just because the first broken page looks better.

## A rollout checklist for frontend teams

Before signing off a design system update, confirm:

- the team identified the actual components and tokens that changed
- canonical states were reviewed before page-level panic started
- representative pages covered both common and edge-case contexts
- issues were grouped by root cause instead of tracked as isolated nits
- a second verification pass happened after fixes
- intentional exceptions were documented instead of left ambiguous

One more practical rule: if a legacy area is knowingly excluded from the rollout, label it explicitly. Otherwise it will show up in future QA cycles as an apparent bug with no clear owner.

## Where Pixelay fits best

Pixelay is helpful here because design system rollouts live in the gap between component intent and page reality. The team needs to compare the updated design against the actual browser behavior, across real environments, without turning every mismatch into a new argument.

That visibility is what makes the rollout manageable. Once the team can see the repeated pattern clearly, it can fix the right layer of the system instead of fighting the same bug on page after page.

If your frontend team is shipping shared component changes and still reviewing them mostly by spot checks or memory, standardizing the rollout pass around [Pixelay](/pixelay/) is one of the better ways to catch hidden drift before it compounds across the product.

---

---
type: article
title: Pull Request Design QA Workflow for Frontend Teams
description: Use staging URLs and Figma overlays to review design fidelity before merge instead of batching visual fixes at the end of a sprint.
datePublished: 2026-06-07T00:00:00.000Z
dateModified: 2026-06-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-pull-request-design-qa-workflow-for-frontend-teams/
markdownUrl: https://www.hypermatic.com/articles/pixelay-pull-request-design-qa-workflow-for-frontend-teams.md
---

# Pull Request Design QA Workflow for Frontend Teams

A lot of design QA happens too late.

The code is already merged, the release is close, and someone finally compares the staging build to the Figma file in a serious way. That is when spacing drift, missing states, broken breakpoints, and visual regressions suddenly become launch blockers instead of small pull request fixes.

[Pixelay](/pixelay/) is especially useful earlier than that. When a frontend team can compare a pull request preview or staging URL against the source design before merge, visual QA becomes a faster engineering habit instead of an end-of-sprint cleanup event.

## Not every PR needs design QA

The goal is not to create a heavyweight checkpoint for every tiny change.

Start by deciding which pull requests should trigger a visual review:

- new page sections or landing page modules
- major responsive layout changes
- component redesigns
- navigation, form, or pricing changes
- UI updates that touch high-visibility product flows

That keeps the process focused on the places where design drift is actually likely to cost the team time or credibility.

## Prepare the review package before opening the overlay

The review goes faster when the reviewer does not have to assemble context manually.

For each design-sensitive PR, collect:

- the preview or staging URL
- the exact Figma frame or state being implemented
- the viewport sizes that matter
- any content or auth setup needed to reach the right screen
- a short note if the implementation intentionally differs from design

That last point matters. Many arguments in design QA are not about bugs; they are about undocumented tradeoffs. If the code intentionally changed a spacing rule for accessibility or real content behavior, say that up front.

If your team needs the broader launch-oriented version of this practice, [Staging Site Design Review Checklist](/articles/pixelay-staging-site-design-review-checklist/) is the closest related article. This piece is narrower on purpose: one PR, one review cycle, before merge.

## Use a short pre-merge pass, not an endless polish session

Pull request design QA should be fast enough to repeat.

A good target is a short pass that checks the highest-signal areas first:

### Layout shell

Review:

- page width behavior
- grid alignment
- section spacing
- obvious overflow or clipping

### Typography and hierarchy

Review:

- heading scale
- line wrapping
- CTA prominence
- body copy density

### Component states

Review:

- hover or focus states
- empty or loading states
- inline validation or helper text
- icon alignment and padding

### Responsive behavior

Review:

- key breakpoints
- mobile stacking
- sticky or fixed elements
- layout collapse around real content

This is not about catching every future pixel difference in one go. It is about preventing obviously avoidable drift before the PR becomes part of the main branch.

## Use the PR review to catch systemic issues early

One of the biggest benefits of running design QA at pull request time is that it becomes easier to spot shared causes.

For example:

- a token change affected several cards
- a text style maps incorrectly across a new section
- one component variant is missing a state
- a breakpoint rule is wrong in a shared layout wrapper

Those are much cheaper to fix before merge than after several related PRs stack on top of the same mistake.

That is also why overlay-based review is so helpful. Pixelay makes it easier to see the implementation in the real browser environment rather than relying on memory or isolated screenshots.

## Turn findings into merge decisions, not just comments

A pre-merge QA pass is only useful if it drives a clear next action.

I like three buckets:

- `block before merge`
- `merge, then follow up`
- `intentional difference`

That forces the team to decide whether the issue really belongs on the current PR or is better handled separately.

Without those buckets, review comments pile up without changing the actual merge decision, which is how "helpful design QA" turns into friction nobody wants to repeat.

For teams that already have lots of findings and need a better prioritization system, [Frontend Design QA Triage Workflow](/articles/pixelay-frontend-design-qa-triage-workflow/) is the best follow-up.

## Keep evidence attached to the finding

If the reviewer catches a problem, the note should travel with enough context that the developer can fix it quickly.

At minimum, capture:

- URL
- viewport
- Figma reference
- short explanation of what is off
- why it matters

That avoids vague comments like "spacing feels wrong here" or "not quite matching design." The more review happens in the actual PR cycle, the more important precision becomes because the team is moving fast.

## Make intentional differences explicit

Some mismatches should absolutely remain.

Examples:

- real content required a taller card
- accessibility needed a larger tap target
- responsive behavior needed to prioritize usability over strict fidelity
- a shared component is being updated in a follow-up branch

The point of the review is not to shame those differences out of existence. It is to document them so nobody rediscovers the same mismatch later and assumes it was an oversight.

Explicit tradeoffs are healthy. Unclear tradeoffs are expensive.

## Run one final verification if the PR changes after review

This is the part that keeps the process honest.

If the design-sensitive part of the PR changes meaningfully after review, do one more focused pass before merge. Not a full ritual. Just enough to confirm the fix did not create a new mismatch somewhere nearby.

That is especially important for:

- responsive fixes
- spacing or token adjustments
- shared component corrections
- navigation or header/footer changes

Small visual fixes have a habit of moving the problem rather than ending it.

## A practical PR-level design QA checklist

Before merge, confirm:

- the preview URL matches the intended Figma state
- the highest-risk breakpoints were reviewed
- issues are bucketed by merge decision
- intentional differences are documented
- any fix pass was rechecked if the layout changed materially

## Why Pixelay works well at this stage

Pixelay is not only for end-of-project comparison. It is a strong fit for small, repeatable review loops where the team wants to compare the real browser build to the source design while the cost of fixing drift is still low.

That changes the emotional tone of QA:

- fewer late surprises
- fewer giant visual bug lists
- less blame around "who noticed this too late"
- more confidence merging UI work steadily

If your team keeps discovering design mismatches after the branch is already merged, move the comparison step forward. Using [Pixelay](/pixelay/) during pull request review will not make every interface perfect, but it does make visual quality a lot easier to protect while the code is still cheap to change.

---

---
type: article
title: App Store and Play Store Screenshot Export Workflow from Figma
description: Prepare sharper, lighter app store screenshots from Figma without losing readability across device sizes, locales, and listing layouts.
datePublished: 2026-06-07T00:00:00.000Z
dateModified: 2026-06-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-app-store-and-play-store-screenshot-export-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-app-store-and-play-store-screenshot-export-workflow-from-figma.md
---

# App Store and Play Store Screenshot Export Workflow from Figma

App store screenshots tend to get treated like a last export step. In practice, they are one of the more fragile marketing assets a product team ships.

The screenshots need to look polished enough to win trust in a crowded listing, but they also need to survive real constraints: multiple device ratios, localized copy, store crops, compressed upload workflows, and the uncomfortable fact that tiny UI text can fall apart fast when the export settings are careless.

[TinyImage](/tinyimage/) is useful here because it keeps compression, format conversion, and batch export decisions inside Figma. For app store work, the biggest win is standardizing how listing screenshots are prepared before the assets start branching into multiple sizes, markets, and review threads.

## App store screenshots are not the same as landing page screenshots

Product screenshots on a marketing site usually live inside a layout the team controls. App store screenshots do not. They appear inside store interfaces with their own crops, device framing, surrounding UI, and ranking pressure.

A landing page screenshot can support a paragraph. An app store screenshot often has to do most of the storytelling on its own. It needs to communicate:

- what the product is
- what the feature does
- why it matters quickly
- whether the interface feels trustworthy on a small screen

That is why export quality and composition have to be handled together. A technically correct file can still be a weak store asset if the key screen is too dense, the text is too small, or the crop gives equal weight to unimportant UI chrome and the actual value proposition.

If your team is already handling web screenshots from the same Figma source, [Product Screenshot Export Workflow for SaaS Landing Pages](/articles/tinyimage-product-screenshot-export-workflow-for-saas-landing-pages/) is the nearest related article. Store screenshots need a stricter version of that discipline.

## Start with screenshot roles before you worry about file settings

The easiest way to produce inconsistent store assets is to export every frame the same way.

I prefer to assign each screenshot a role first:

- `hook`: the first screenshot that explains the main promise
- `proof`: a screenshot that shows the core workflow or differentiator
- `detail`: a tighter shot that proves the UI is real and usable
- `trust`: a screenshot that supports credibility, such as analytics, automation, or reporting depth

Once the role is clear, the export decisions get easier.

The hook screenshot usually needs the simplest story and the cleanest focal point. A detail screenshot can tolerate more interface density, but only if the important text stays readable. Trust screenshots often benefit from more careful compression because charts, sidebars, and metrics can get mushy quickly.

Some screenshots should stay crisp at all costs. Others can compress more aggressively without losing meaning.

## Build one master set, then create store-specific variants intentionally

The strongest workflow is not "export a few frames and hope they fit everywhere." It is:

1. build a master screenshot set in Figma
2. define which frames are shared across stores
3. duplicate variants only where store layout or audience needs are meaningfully different

For example, the same product flow may work for both Apple and Google listings, but the supporting caption treatment, crop, or order may need to change. If your team localizes screenshots as well, a master-and-variant structure also makes review much easier because everyone knows which frames are global and which belong to a specific market.

If copy variants are part of the process, [App Store Screenshot Localization Workflow in Figma](/articles/copydoc-app-store-screenshot-localization-workflow-in-figma/) is a useful companion read. TinyImage solves the export side of the problem; that article is more about the copy and layout variation side.

## Choose compression based on readability, not habit

App store teams often default to PNG for everything because it feels safest. Sometimes that is correct. Sometimes it just creates heavier files without improving the listing.

The better question is: what in this screenshot must remain crisp?

PNG is usually the safer choice when the screenshot contains:

- small UI labels
- tabular data
- subtle dividers
- fine charts
- text overlays that have to stay sharp

JPG can be workable when the screenshot is more visual, more atmospheric, or less text-heavy, but it needs careful review because UI edges and small labels degrade faster than teams expect.

The workflow I like is simple:

1. export one sharp baseline version
2. export one lighter alternative
3. compare both at realistic store-preview size
4. keep the lightest version that still feels fully trustworthy

TinyImage helps because that comparison can happen without bouncing between Figma and separate compression tools. The faster the review loop, the more likely the team will actually compare quality instead of guessing.

## Design the crop for store browsing, not only for the full frame

A lot of store screenshot weakness is really crop weakness.

The team exports a full mobile screen, but the part that matters is one chart, one automation step, or one critical settings panel. On the listing, the eye gets pulled toward decorative areas instead of the product proof.

Before export, ask:

- What is the one thing this screenshot needs to prove?
- Is the focal area obvious in one second?
- Is there any dead space or shell UI stealing attention?
- Will the copy remain readable if the store UI visually shrinks the asset?

If you are adding overlay copy or device framing inside the design, do not let the important message sit too close to edges or rely on tiny details to carry the story. App store browsing is fast. The screenshot needs hierarchy before it needs cleverness.

## Review the sequence like a product page, not like a folder of images

A screenshot set is a narrative.

That means the review should not be "does each asset look okay?" It should be "does the sequence make the product easy to believe?"

A useful sequence review asks:

- Does screenshot one explain the value fast?
- Does screenshot two deepen the story instead of repeating it?
- Are we alternating promise and proof?
- Is one screenshot trying to do too much?
- Are there two screenshots that tell nearly the same story?

This is where teams often realize the file problem was never the real problem. The exports were fine. The set was just repetitive or visually noisy.

## A practical export pass in TinyImage

Once the frames are approved, the export pass should be boring.

My preferred routine is:

1. isolate the final screenshot frames for one store and locale
2. name them by sequence, market, and purpose
3. export a baseline high-fidelity pass
4. compress selectively based on readability
5. review the full set in order before delivery

Example naming:

- `ios_en-us_01-hook.png`
- `ios_en-us_02-proof.png`
- `android_en-us_03-detail.png`
- `android_fr-fr_04-trust.png`

That naming helps everyone downstream. Marketing knows the intended order, and reviewers know which asset changed.

## What to check before handoff

Before your team uploads the screenshot set, confirm:

- each screenshot has one clear communication job
- the most important UI text is readable at real listing size
- compression choices were reviewed visually, not only by file weight
- Apple and Google variants are separated where the narrative or crop changes
- localized versions have been reviewed for copy expansion
- filenames reflect sequence and market clearly
- the set has been reviewed in order, not as isolated images

One more rule: store requirements change over time. Keep the workflow stable, but always verify current platform specs before final upload.

## Where TinyImage fits best

TinyImage does not decide which screenshots will sell the product. What it improves is the production layer around that decision: lighter files, faster comparison loops, cleaner batch export, and less rework once the team has approved the story.

If your app store workflow still depends on exporting giant screenshots from Figma and then manually compressing, renaming, and comparing them elsewhere, standardizing the process around [TinyImage](/tinyimage/) is one of the cleaner ways to make the listing pipeline faster without making the assets sloppier.

The real goal is simple: every screenshot should be easy to review, easy to trust, and easy to ship more than once.

---

---
type: article
title: Ecommerce Product Image Export Workflow from Figma
description: Prepare product detail, collection, and promo images in Figma without shipping oversized files or inconsistent storefront assets.
datePublished: 2026-06-07T00:00:00.000Z
dateModified: 2026-06-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-ecommerce-product-image-export-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-ecommerce-product-image-export-workflow-from-figma.md
---

# Ecommerce Product Image Export Workflow from Figma

An ecommerce image rarely lives in just one place.

The same product visual might show up on a collection page, a product detail page, an email campaign, a paid social variant, and a CMS card that gets cropped differently on mobile. The design team approves the image once, but the production team inherits five different export problems: the hero is too heavy, the thumbnail is too soft, the zoom image is overkill, the filenames are unclear, and someone uploads the wrong version to the storefront.

That is the part [TinyImage](/tinyimage/) helps clean up. The win is not only smaller files. The win is turning product image export into a predictable step that fits the rest of the storefront workflow instead of a pile of last-minute asset fixes.

## Start by sorting images by storefront job

Most ecommerce teams get into trouble because they export by frame, not by purpose.

Before touching format or compression settings, label each image by the job it has to do:

- `pdp-hero`: the main product image or lifestyle visual on the product page
- `pdp-detail`: close-up texture, packaging, feature detail, or alternate angle
- `collection-thumb`: smaller product grid image that has to stay recognizable fast
- `promo-tile`: image used in homepage modules, category promos, or sale banners
- `email-asset`: an image that may be reused in a campaign where weight matters more

That small classification step solves a lot of downstream confusion. A product detail image should not be compressed the same way as a 180-pixel collection thumbnail, and a homepage promo tile does not need the same level of zoom-ready fidelity as a product page hero.

If your team already publishes approved assets into a CMS, [CMS Image Publishing Workflow from Figma](/articles/tinyimage-cms-image-publishing-workflow-from-figma/) is the best companion read.

## Decide what needs to stay sharp

Ecommerce visuals often mix photography with interface-like details:

- packaging text
- ingredient callouts
- spec cards
- before-and-after comparison labels
- small badges like "new," "limited," or "best seller"

Those details can fall apart quickly if the team chases file size without checking how the image will actually render.

A good rule is to ask one question for every export:

What part of this image would cost us money if it became hard to read?

Sometimes that answer is the product texture. Sometimes it is the label on the bottle. Sometimes it is the overlay text inside a promo module. Once the critical area is known, compression becomes much easier to judge.

## Use different format rules for different page roles

Treating every product image as a PNG is safe, but it is also one of the easiest ways to end up with bloated storefront pages.

My default approach looks more like this:

- Use PNG when the image has fine edges, embedded text, or transparent backgrounds that need to hold up cleanly.
- Use WebP when the image is photographic and appears in multiple merchandising placements where lighter weight helps.
- Use AVIF when the storefront stack already supports it cleanly and the team wants to push weight down further on image-heavy pages.
- Keep JPG only when the publishing stack or downstream retailer still expects it.

The point is not to sound modern. The point is to match the format to the real usage.

If format choice still feels fuzzy, [WebP vs AVIF for Figma Exported Images](/articles/tinyimage-webp-vs-avif-for-figma-exported-images/) is worth reviewing before you lock the team into one default.

## Build one export matrix before the launch rush

The easiest way to stop repeated Slack questions is to define the export matrix up front.

For one product launch, that might look like this:

- product page hero: higher fidelity, desktop and mobile variants
- product detail images: medium-to-high fidelity, prioritize readable detail
- collection thumbnails: lighter exports, optimize for fast grid loading
- homepage promo blocks: weight-conscious, but still brand-polished
- email campaign images: lighter again, because inbox performance matters

Once that matrix exists, the team can stop debating every single image individually.

TinyImage is useful here because the export pass can stay inside Figma instead of bouncing between Figma, an online compressor, a desktop app, and a CMS upload tab. That usually removes the most annoying part of the workflow: repeated re-exporting after someone realizes the first version was either too soft or too heavy.

## Review product images at the size customers will actually see

This is the step people skip when they are busy.

Do not only inspect exports zoomed in on a large display. Review them at realistic rendered sizes:

- a mobile product page width
- a desktop collection grid card
- a promo module inside a homepage layout
- an email slot if the same image will be reused in lifecycle or campaign sends

That review often changes decisions. An image that looks "fine" at 200 percent may feel muddy at real mobile width. A file that looks overly compressed on a retina display may be completely acceptable in a small collection card. Real slot review is where you stop optimizing in the abstract.

For teams exporting more interface-heavy images, [Product Screenshot Export Workflow for SaaS Landing Pages](/articles/tinyimage-product-screenshot-export-workflow-for-saas-landing-pages/) covers a similar review discipline from a different angle.

## Name exports like someone else has to upload them

Ecommerce asset handoff breaks surprisingly often because the file names are a mess.

Instead of names like `final-product-2-new.webp`, export files in a way that makes placement obvious:

- `olive-oil-pdp-hero-desktop.webp`
- `olive-oil-pdp-hero-mobile.webp`
- `olive-oil-collection-thumb.webp`
- `olive-oil-summer-sale-promo.png`

That matters because ecommerce teams usually upload in batches, and the person doing the CMS work is not always the same person who designed the image. Clear naming reduces accidental swaps, duplicate uploads, and mystery files that get reused months later in the wrong context.

## A practical TinyImage pass for a launch week asset set

When a launch is close, simplicity beats cleverness.

Here is the pass I would standardize:

1. Group approved product visuals by page role.
2. Remove unused whitespace or decorative padding that adds weight but no merchandising value.
3. Export one fidelity-first version for each critical asset.
4. Export one lighter alternative for grid and campaign usage.
5. Review both against the real slot size.
6. Keep only the version that protects the selling detail and meets the page-speed target.
7. Hand off with placement-based filenames and a short upload note if there are desktop/mobile variants.

## What TinyImage does not decide for you

TinyImage will not tell you which crop sells the product best, whether the detail shot should replace the lifestyle shot, or whether the thumbnail needs a different background treatment for the collection grid. That is still merchandising and design judgment.

What it does remove is the wasteful middle layer:

- exporting oversized files from Figma
- recompressing them one by one somewhere else
- guessing which version is approved
- discovering too late that the storefront asset budget got blown

When product image work is recurring, that middle layer is where a lot of time quietly disappears.

## A quick launch checklist

Before the assets leave design, check these:

- Every image has a page role, not just a frame name.
- Critical details stay readable at the real storefront size.
- Format choices follow usage, not habit.
- Desktop and mobile variants are separated when the crop changes meaningfully.
- Filenames tell the uploader exactly where the asset belongs.
- The final files are light enough that the storefront is not paying for unnecessary megabytes.

If ecommerce launches keep turning into an export cleanup job, standardizing around [TinyImage](/tinyimage/) is a good place to start. The real improvement is not flashy. It is that product images stop becoming a recurring production risk every time the catalog or campaign calendar changes.

---

---
type: article
title: HTML5 Banner Trafficking Handoff Checklist
description: Hand off HTML5 banner campaigns from Figma to ad ops with the files, naming, and launch notes media teams actually need.
datePublished: 2026-06-05T00:00:00.000Z
dateModified: 2026-06-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-html5-banner-trafficking-handoff-checklist/
markdownUrl: https://www.hypermatic.com/articles/bannerify-html5-banner-trafficking-handoff-checklist.md
---

# HTML5 Banner Trafficking Handoff Checklist

A banner campaign can look approved in creative review and still be completely unready for trafficking.

That is the handoff gap a lot of teams underestimate. Design signs off on the motion and messaging, but ad ops or media teams still need a practical delivery package: correct sizes, final destination URLs, clear filenames, export formats, fallback assets, version notes, and enough context to upload everything without guessing.

When that package is weak, the campaign slows down in the least fun place possible: right before launch.

[Bannerify](/bannerify/) helps because it turns Figma designs into production-ready HTML5, GIF, MP4, WebM, and other banner outputs without rebuilding the ads somewhere else. But even with faster export, trafficking handoff still needs its own checklist.

## Creative approval is not trafficking readiness

These are different questions.

Creative approval asks:

- Is the concept right?
- Is the messaging approved?
- Do the sizes and animations look good?

Trafficking readiness asks:

- Are these the final files?
- Which file belongs to which placement?
- Are the click destinations correct?
- Is the naming understandable?
- Does the upload package match platform requirements?
- Is there anything the ad ops team needs to modify or know before launch?

Many campaigns fail not because the banner is badly designed, but because the handoff package assumes the next team can infer too much.

## What the trafficking team actually needs

A clean handoff package usually includes more than the ZIPs themselves.

At minimum, prepare:

- final exported files for each size and format
- one clear naming convention
- destination URL or click-tag instructions
- platform or placement mapping
- any fallback image assets required by the media workflow
- a note about looping behavior, audio, or special interactions if relevant
- version or approval date

If multiple markets or message variants exist, that package should also make the variant logic obvious. Nobody trafficking the campaign should need to ask whether `v2-final-300x250-new.zip` is for prospecting, retargeting, or the French market.

The related article [Display Ad Asset Naming Convention for Agencies](/articles/bannerify-display-ad-asset-naming-convention-for-agencies/) goes deeper on naming standards if your team does this constantly.

## Build the handoff around placement logic

The most useful package is organized by how the campaign will actually be uploaded.

For example:

- by platform
- by audience segment
- by market
- by message variant
- by size family

That sounds obvious, but teams often organize exports around the design file instead. A Figma page structure may make sense for designers while being awkward for trafficking.

If the campaign includes multiple placements, I prefer names that expose the placement logic directly:

- `brand-awareness_us_300x250_html5.zip`
- `brand-awareness_us_728x90_html5.zip`
- `retargeting_uk_300x600_html5.zip`
- `retargeting_uk_300x600_fallback.jpg`

That structure makes approval, replacement, and troubleshooting much faster.

## The handoff details that cause the most rework

In my experience, these are the details most likely to bounce back from ad ops:

### Unclear click behavior

If the platform expects a click tag or specific exit handling, the package needs to say that clearly. Do not assume the next team knows the export defaults or intended setup.

### Missing fallback logic

Some workflows still need fallback images, preview assets, or alternate formats. Even when the HTML5 creative is the star, the campaign package may need more than one asset per size.

### File-size surprises

One oversized placement can block the launch even if every other banner is fine. File weight is not only a creative QA issue. It is a trafficking issue because it determines whether the package can actually be uploaded and served.

### Variant confusion

If localized copy, pricing, or CTA language changes across variants, the naming must reflect it. This gets especially messy when the campaign has both market variants and audience variants.

### Last-minute destination changes

Landing page URLs, UTMs, and deep links often change late. The handoff package should make URL ownership explicit so nobody assumes the wrong link is final.

## A practical trafficking-ready workflow in Figma

Here is the workflow I would formalize:

1. Lock the approved creative and variant list.
2. Confirm the required output formats per platform before export.
3. Export final files from Figma with Bannerify.
4. Organize the package by platform or trafficking group, not just by design page.
5. Add a short delivery note with URLs, approval date, and any special instructions.
6. Run one last spot-check on filenames, file weight, and click handling.

That delivery note can be extremely simple. It just needs to remove ambiguity.

Example:

- campaign: summer launch prospecting
- markets: US, UK
- formats: HTML5 plus JPG fallback
- click handling: platform-controlled
- approved date: 2026-06-05
- notes: 300x250 and 160x600 use alternate CTA copy

That kind of note saves a surprising amount of back-and-forth.

## A trafficking checklist you can actually use

Before handing the campaign to media or ad ops, confirm:

- every required size is present
- filenames reflect platform, variant, market, and size
- file weights are within platform limits
- click behavior or click-tag expectations are documented
- fallback files are included where needed
- the destination URLs are owned and confirmed
- the package only contains final approved outputs

If the team still needs a pre-export technical check, [HTML5 Ad Click Tag Checklist](/articles/bannerify-html5-ad-click-tag-checklist/) and [HTML5 Banner File Size Reduction Checklist](/articles/bannerify-html5-banner-file-size-reduction-checklist/) are the best companion reads.

## Where Bannerify helps most

Bannerify shrinks the slowest part of banner production by keeping the design, animation, and export workflow inside Figma. That is a major win. But launch friction often moves downstream if the trafficking handoff is informal.

Treat the delivery package as part of the campaign, not admin cleanup. When the files, names, and notes are clean, [Bannerify](/bannerify/) stops being just an export tool and becomes part of a faster ad production system from concept to launch.

---

---
type: article
title: Localized Banner Campaign Workflow
description: How to plan, adapt, QA, and export localized HTML5 banner campaigns from Figma without breaking layouts, timing, or trafficking handoff.
datePublished: 2026-06-05T00:00:00.000Z
dateModified: 2026-06-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-localized-banner-campaign-workflow/
markdownUrl: https://www.hypermatic.com/articles/bannerify-localized-banner-campaign-workflow.md
---

# Localized Banner Campaign Workflow

Localized banner campaigns are where "small creative assets" suddenly become operationally huge.

A single English banner set might already include ten sizes, multiple CTAs, several placements, and at least one late legal change. Add three languages, market-specific offers, and different disclaimer lengths, and the workload multiplies fast.

That is why localization is not just a translation step for display ads. It is a production workflow problem.

[Bannerify](/bannerify/) is useful here because it keeps animation, export, preview, and platform packaging inside Figma. That matters a lot once every language version needs the same motion logic, multiple output formats, and trafficking-ready files without a developer manually rebuilding each one.

## Localization breaks weak banner systems first

An English banner set can hide bad production habits.

For example:

- the headline only fits because English is short
- the CTA timing only works because the copy is compact
- the disclaimer is positioned too tightly for expansion
- the naming structure cannot distinguish market variants cleanly
- the export workflow assumes one destination URL and one legal line

The moment German, French, Spanish, or Japanese versions arrive, those assumptions fall apart.

That is why the best localized banner workflow starts before translation begins. The original Figma design has to make room for expansion, market variants, and approval checkpoints from the start.

## Separate what is global from what is local

Before duplicating banner frames, define which parts of the campaign should stay identical across markets and which parts are expected to change.

Usually the global layer includes:

- campaign concept
- layout system
- animation structure
- imagery
- logo treatment
- core brand styling

The local layer usually includes:

- headline and CTA copy
- product naming by market
- pricing or offer details
- disclaimer or legal copy
- destination URL
- language-specific typography adjustments

This separation sounds simple, but it prevents a lot of rework. If the team treats every market file as fully independent, it becomes much harder to maintain timing, QA, and version control across the set.

Bannerify is especially helpful once the team wants motion and export behavior to remain stable while the message layers adapt.

## Design the source banners for text expansion

Localized banner work gets painful when the original layout is too brittle.

Three rules help immediately:

1. Do not let every important line sit at the absolute edge of the layout.
2. Keep the final frame readable even if the translated headline gains 20 to 40 percent length.
3. Make sure the CTA still looks intentional when one language uses two words and another uses five.

This is not just about avoiding overflow. Longer copy can also change the pacing of the animation. A headline that was readable in 1.2 seconds in English may need longer exposure in another language. If the animation timing is too aggressive, the banner can technically export correctly and still fail the communication job.

For teams that already manage lots of variants, [Banner Ad Animation Timing Guidelines](/articles/bannerify-banner-ad-animation-timing-guidelines/) is a useful companion to this localization workflow.

## Keep translation review close to the real banner set

Translation review is much safer when reviewers can see the actual banner context instead of isolated strings in a spreadsheet.

The review needs to answer more than "is this translation correct?"

It also needs to answer:

- does the translated copy still fit the frame?
- does the CTA sound natural in the market?
- does any legal text need a different hierarchy?
- should this market get a different product shot or local proof point?

If your team already uses spreadsheet-driven copy updates, CopyDoc can help upstream with the text source. Bannerify then becomes the place where the localized banners get animated, previewed, and exported as production-ready creative.

The tutorial on [bulk exporting Figma banner variants from a spreadsheet to HTML or video/GIF using Bannerify](/tutorials/how-to-bulk-export-figma-banner-variants-from-a-spreadsheet-to-html-or-video-gif-using-bannerify/) is especially relevant when market variants are high volume.

## Treat disclaimers as design objects, not leftovers

Localized display work often falls apart on disclaimers because they are added late and positioned like afterthoughts.

A better workflow is to decide early:

- which markets require disclaimers
- whether the disclaimer changes by placement
- whether the legal line belongs in every size or only certain ones
- whether the animation needs to pause longer on the final frame for readability

Legal text that barely works in one language becomes unreadable very quickly once translated. Bannerify can export the final formats cleanly, but the creative system still needs to be built with those constraints in mind.

This is also where preview pages help. Bannerify's client-friendly preview output makes it easier for marketing, legal, and media teams to review all variants together instead of opening ZIP files one by one.

## Standardize naming before export

Localized creative becomes hard to traffic when filenames are vague.

The naming system should identify:

- campaign
- market or locale
- size
- variant
- format when relevant

For example:

- `summer-sale-en-us-300x250-v1`
- `summer-sale-fr-fr-300x250-v1`
- `summer-sale-de-de-728x90-v2`

This sounds administrative, but it saves real time during trafficking and QA. Media teams should not need to open every file to understand what it is.

If naming is already a recurring pain point, [Display Ad Asset Naming Convention for Agencies](/articles/bannerify-display-ad-asset-naming-convention-for-agencies/) is the closest related article to use alongside this workflow.

## QA localized banners as campaign families

Do not QA each banner in isolation. QA the localized set as a family.

Check:

- every required size exists in every required locale
- translations are applied to the correct variant
- CTAs go to the correct market URL
- disclaimers match the market and offer
- timing still allows the message to be read
- file sizes stay within platform limits after localization changes

That last point matters more than teams expect. Longer text, additional fallback assets, or changed imagery can push certain locales over weight limits even when the English version passed.

For weight-related cleanup, [HTML5 Banner File Size Reduction Checklist](/articles/bannerify-html5-banner-file-size-reduction-checklist/) is the best adjacent article in the current library.

## A practical localized production sequence

For global campaign teams, this is the simplest repeatable sequence:

1. Finalize the master English concept with localization-safe spacing.
2. Separate global layers from market-specific layers.
3. Translate the market copy with context, not isolated strings alone.
4. Adjust layout and timing only where the localized copy truly needs it.
5. Review disclaimers, URLs, and final-frame readability per locale.
6. Export localized banner packages from Bannerify in the required formats.
7. Share preview pages and trafficking packages with clear market naming.

This workflow is what keeps localization from becoming a separate rebuild exercise.

## Why Bannerify is a strong fit for this job

The real challenge in localized display production is not only exporting HTML5 banners. It is keeping the creative system coherent while the campaign multiplies across languages, sizes, and platforms.

[Bannerify](/bannerify/) helps because the animation and export logic stay close to the Figma source of truth. Designers can adjust copy, motion, preview, and packaging in one place instead of pushing every localized update into a second build workflow.

That is what makes localization manageable at campaign scale. The team is still doing thoughtful adaptation, but they are not rebuilding the machinery around the campaign every time a market changes.

---

---
type: article
title: How to Preserve Editability When Converting Legacy Design Files to Figma
description: Move old PSD, XD, Illustrator, PDF, or InDesign files into Figma without ending up with beautiful files that nobody wants to edit.
datePublished: 2026-06-05T00:00:00.000Z
dateModified: 2026-06-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-how-to-preserve-editability-when-converting-legacy-design-files-to-figma/
markdownUrl: https://www.hypermatic.com/articles/convertify-how-to-preserve-editability-when-converting-legacy-design-files-to-figma.md
---

# How to Preserve Editability When Converting Legacy Design Files to Figma

The easiest way to waste a file conversion project is to stop as soon as the design looks right.

That sounds backwards, but it is what happens all the time. A team imports a legacy PSD, XD, PDF, or InDesign file into Figma, opens the result, and feels relieved because the page looks mostly intact. Then the real work starts: text is flattened, masks are messy, assets are hard to replace, components do not exist, and every small content change feels like surgery.

If the converted file cannot support editing, localization, review, or future iteration, the migration is only half done.

[Convertify](/convertify/) helps because it moves design work between Figma and other formats without forcing a manual rebuild up front. The part that still needs human judgment is protecting editability so the converted file becomes a working design source instead of a static artifact.

## What "editable" actually means

Teams often say they want an editable Figma file, but they rarely define it.

In practice, a file is editable when a normal designer on the team can:

- update text without breaking layout
- replace images or logos cleanly
- reuse elements as components or patterns
- hand the file to another teammate without a custom explanation
- adapt the work for another screen, campaign, or language later

Visual fidelity matters, but editability is what determines whether the conversion creates leverage or just delays a rebuild.

## Audit the source file before you convert it

The best time to preserve editability is before the conversion begins.

Look for warning signs in the source:

- text converted to outlines
- linked images with missing originals
- overuse of clipping masks
- overly nested groups
- print-specific effects that do not translate well to digital editing
- inconsistent typography or paragraph styles
- pages that were clearly assembled for one-off output rather than reuse

That audit changes expectations. A clean XD file and an old agency-delivered PDF do not deserve the same plan.

If your team is still figuring out what to request from clients before the handoff, [Client Design File Intake Checklist](/articles/convertify-client-design-file-intake-checklist/) is the right companion article.

## Decide what has to stay editable

Not every layer deserves the same rescue effort.

Before you convert, mark the parts of the file that matter most for downstream editing:

- core text content
- recurring UI patterns
- brand assets
- charts or data-driven graphics
- product screenshots that will keep changing
- layout structures likely to become templates

This step is important because editability is not free. If you do not prioritize, the team can spend hours cleaning decorative details while ignoring the text and components people actually need to modify.

I like to divide content into three buckets:

- `must stay editable`
- `nice to keep editable`
- `safe to flatten or rebuild later`

That framing makes post-conversion cleanup much faster.

## Conversion is not the finish line

Once the file lands in Figma, do not start redesigning immediately. Run an editability pass first.

Here is the sequence I recommend:

1. Check live text for missing fonts, line-break changes, and outlined text.
2. Replace or relink image content that came in as awkward flattened blocks.
3. Untangle groups and masks where a small content change would otherwise be painful.
4. Promote repeated patterns into components.
5. Map colors and typography to local styles or variables where practical.
6. Rename critical layers so future edits are understandable.

That work is not glamorous, but it is what turns the converted file into something the team can keep using.

If you need a broader cleanup pass after import, [Figma Import Cleanup Checklist](/articles/convertify-figma-import-cleanup-checklist/) covers the general review.

## Where editability usually breaks first

The same trouble spots appear again and again:

### Text that only looks editable

Sometimes text technically imports as text, but the styles are so fragmented that updating one paragraph breaks spacing everywhere. Check paragraph spacing, line breaks, font substitution, and whether text boxes still behave predictably when content gets longer.

### Artwork that came in as one giant object

This is common with legacy print and PDF workflows. The design may look accurate, but every minor update requires replacing a whole block instead of editing one layer. That can be acceptable for archival assets, but it is a problem for active campaign or product work.

### Repeated elements that stayed as one-offs

Buttons, cards, badges, tables, callouts, and logos often arrive as repeated manual copies. If the file will live beyond a one-time handoff, that is the moment to rebuild reusable patterns as components.

### Layouts designed for a dead medium

A print-oriented layout converted into Figma may technically survive the import, but still be wrong for responsive, iterative digital work. Some sections should be preserved. Others are better treated as references for a smarter rebuild.

## When to clean up and when to rebuild

This is the decision teams often avoid.

You should keep cleaning the converted file when:

- the hierarchy is mostly intact
- text and assets can be restored without major surgery
- the file represents a pattern library or reusable system
- the team needs continuity more than reinvention

You should stop and rebuild portions when:

- most of the important content is flattened
- structural cleanup takes longer than remaking the section
- the original file was never organized for editing
- the destination workflow is fundamentally different from the source

Preserving editability does not mean preserving every old decision. Sometimes the best way to respect the source is to migrate the reusable truth and rebuild the fragile leftovers.

## A handoff checklist for usable converted files

Before you call the migration done, check:

- Can another designer change real text without layout chaos?
- Are key images replaceable without rebuilding the section?
- Are repeating patterns componentized where it matters?
- Do colors and type map to something consistent in Figma?
- Are filenames, pages, and major layers understandable?
- Does the file support the next likely job: localization, review, new campaign work, or dev handoff?

That last question matters most. A converted file is not successful because it resembles the original. It is successful because it supports the next round of work with less friction.

## Where Convertify helps most

Convertify removes the worst part of legacy file migration: the forced manual recreation step between tools. That is already valuable. But the payoff is much bigger when the team uses conversion as the start of a structured clean-up process rather than the end of one.

If your agency or internal team is inheriting old design files regularly, standardize an editability review around [Convertify](/convertify/) instead of treating every conversion as a one-off rescue mission. That is how imported files start becoming living design assets again.

---

---
type: article
title: PowerPoint to Figma Redesign Workflow
description: A practical workflow for bringing client PowerPoint decks into Figma as editable layers so teams can redesign them without rebuilding every slide from scratch.
datePublished: 2026-06-05T00:00:00.000Z
dateModified: 2026-06-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-powerpoint-to-figma-redesign-workflow/
markdownUrl: https://www.hypermatic.com/articles/convertify-powerpoint-to-figma-redesign-workflow.md
---

# PowerPoint to Figma Redesign Workflow

Agencies and in-house design teams get handed old PowerPoint decks all the time.

Sometimes it is a sales presentation that has drifted for three years. Sometimes it is a conference talk that needs a full visual refresh. Sometimes it is the only surviving source file for a customer's brand narrative. Whatever the case, the dangerous move is pretending that "we'll just rebuild it in Figma" is free.

It usually is not.

Rebuilding a 60-slide deck manually means recreating layouts, retyping text, re-exporting images, and hoping nobody misses the slide with the tiny disclaimer that only appears once. A better workflow is to bring the deck into Figma as editable structure first, then redesign from there.

That is where [Convertify](/convertify/) earns its keep. The plugin's product page is explicit about importing PowerPoint, Word docs, PDFs, Illustrator, Photoshop, and InDesign assets into Figma as editable layers. For presentation redesign work, that makes Convertify less about "conversion for its own sake" and more about shortening the path from legacy file to modern design system.

## The goal is not perfect import. The goal is salvageable structure.

If you approach PowerPoint-to-Figma work expecting one-click perfection, you will be disappointed.

The right expectation is better than that: editable text, recoverable layout structure, reusable imagery, and enough fidelity that the team can focus on redesign instead of reconstruction.

That distinction matters because the deck redesign job is usually not "preserve every pixel." It is:

- keep the content editable
- preserve enough hierarchy to move quickly
- extract the slides into a Figma-native workflow
- modernize the system without losing the source material

Convertify is valuable because it gets you to that starting line faster.

## Before importing, audit what is actually inside the deck

Not every PowerPoint file is the same. Some are well-structured slide systems. Others are visual junk drawers.

Before importing the file into Figma, check:

- whether the deck uses installed fonts or unknown fonts
- whether charts are editable or flattened into screenshots
- whether icons are vector or pasted bitmaps
- whether multiple master styles were mixed over time
- whether speaker notes or hidden slides matter to the project

This preflight step tells you how much of the redesign is content refresh versus real cleanup.

If your team regularly receives messy client assets, [Client Design File Intake Checklist](/articles/convertify-client-design-file-intake-checklist/) is the closest existing Convertify article to pair with this workflow.

## Import the deck to capture content, hierarchy, and layout

Once the source file has been audited, import the PowerPoint into Figma using Convertify.

The immediate goal is to answer four questions:

1. Did the slide order come through cleanly?
2. Is the text still editable?
3. Which assets are reusable as-is and which need replacement?
4. Which slides are templates versus one-off exceptions?

This is why editable import matters so much. If the deck arrives in Figma as meaningful layers instead of flat screenshots, you can:

- restyle copy globally
- rebuild recurring slide types faster
- upgrade imagery without losing structure
- separate good slides from bad slides without retyping everything

That is a very different workflow from screenshotting the deck and tracing it manually.

## Rebuild the deck system, not just the deck file

The best redesign projects do not only beautify the current presentation. They leave the team with a better system for the next one.

Once the import lands in Figma, identify the repeatable slide families:

- title or section divider slides
- agenda slides
- metric or chart slides
- product screenshot slides
- quote or proof slides
- closing CTA slides

Then turn those families into cleaner Figma patterns. Some imported slides will become direct cleanup jobs. Others should become references for brand-new slide components.

This is the moment to decide whether the imported deck should remain a one-off artifact or become the basis of a reusable Figma deck library.

In most real teams, the second option creates more value.

## Triage cleanup ruthlessly

After import, not every issue deserves the same effort.

Fix first:

- text that needs to stay editable
- broken hierarchy or layout logic
- off-brand typography and color
- flattened charts or screenshots that hide key information
- duplicated or obsolete slides

Fix later only if needed:

- tiny alignment quirks on low-priority slides
- decorative effects that will be redesigned anyway
- slide-specific polish before the content direction is approved

This is where teams waste time if they are not careful. They clean every imported imperfection before deciding which slides even survive the redesign.

If the deck is large, make three buckets:

- keep and polish
- rebuild with imported content
- archive and do not carry forward

That one decision often saves more time than the conversion itself.

## Preserve the content trail for stakeholder review

One big advantage of bringing the deck into Figma is that content, design revision, and approval can all happen in one environment.

That matters when:

- marketing wants to rewrite positioning
- leadership wants to tighten narrative flow
- sales needs customer-ready edits
- product wants screenshots updated

Instead of pushing partial deck edits back and forth between PowerPoint and design review tools, the imported content now lives where designers already work. The deck can evolve with comments, branches, and reusable styles around it.

If the old file is being modernized into a broader presentation workflow, [Pitchdeck](/pitchdeck/) may eventually become the better final export and sharing layer. But Convertify is what gets the legacy source material into a workable Figma state in the first place.

## Know when to stop "preserving" and start redesigning

There is a psychological trap in legacy deck refreshes: teams become loyal to the old slide structure because it was hard to import, so they keep too much of it.

Do not let the source file dictate the final outcome.

A better rule is:

- preserve what saves time
- discard what preserves bad thinking

If an old slide structure makes the story harder to follow, rebuild it.
If a chart layout still works and only needs new styling, keep it.
If a screenshot slide has the right content but ugly spacing, reuse the bones and redesign the rest.

Convertify helps you avoid manual reconstruction. It should not lock you into old presentation choices.

## A practical agency workflow

For agency or brand teams, this sequence usually works well:

1. Audit the client PowerPoint for fonts, charts, image quality, and hidden complexity.
2. Import the deck into Figma with Convertify.
3. Identify reusable slide families and one-off slides.
4. Turn the recurring slide types into a cleaner visual system.
5. Replace low-quality assets and obsolete screenshots.
6. Keep text editable so review rounds happen in Figma, not screenshots.
7. Export or hand off the refreshed deck in the format the client actually needs.

If your team frequently inherits mixed legacy assets beyond PowerPoint, [Move Legacy Design Files Into Figma](/articles/convertify-move-legacy-design-files-into-figma/) and [Legacy Design File Cleanup After Migration](/articles/convertify-legacy-design-file-cleanup-after-migration/) are both relevant follow-ups.

## Why this workflow is worth documenting

The value of [Convertify](/convertify/) in deck redesign work is not only that it opens a file. It removes a false choice:

- either tolerate the old PowerPoint forever
- or rebuild the entire thing by hand

Editable import gives you a third option: salvage the useful structure, move the work into Figma, and redesign from a stronger starting point.

That is especially useful when the deck is not the final destination. It might feed sales enablement, investor updates, customer onboarding, internal training, or conference content next. Once the material is living properly in Figma, the team can modernize it with less friction and less repeated labor every time the story changes.

---

---
type: article
title: Error Message and Empty State Review Workflow in Figma
description: Review product error messages and empty states in Figma before release so users get clarity instead of vague dead ends.
datePublished: 2026-06-05T00:00:00.000Z
dateModified: 2026-06-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-error-message-and-empty-state-review-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-error-message-and-empty-state-review-workflow-in-figma.md
---

# Error Message and Empty State Review Workflow in Figma

Teams usually notice polished copy on homepage heroes and onboarding screens. Users often remember the opposite moments: the error message that told them nothing, the empty state that felt abandoned, or the warning screen that made a normal problem feel worse.

Those states are risky because they hide in the corners of the product. They may appear only after a failed action, an unconfigured account, a permissions issue, or a missing data case. That makes them easy to skip during design review even though they shape trust, support volume, and product confidence.

[CopyDoc](/copydoc/) is useful here because it helps teams export, review, update, and re-import Figma text systematically instead of hunting through scattered screens one by one. For empty states and error messages, that structured review matters more than clever wording.

## Why these states deserve their own review

An error message is not just small UI copy. It is a product decision compressed into a sentence.

An empty state is not just a placeholder. It often carries onboarding, education, reassurance, and next-step guidance all at once.

That is why these states need a more focused review than a broad "copy QA" pass. The team is usually checking for different things:

- Can the user understand what happened?
- Can the user recover without contacting support?
- Does the tone reduce stress instead of increasing it?
- Does the message stay clear under localization or longer product names?
- Is the CTA or next action actually useful?

Existing broad reviews often catch whether the copy is consistent. They do not always catch whether the state helps the user move forward.

## Build an inventory before you rewrite anything

The first mistake is reviewing these states screen by screen. That hides patterns.

Instead, export or collect them into one working list:

- validation errors
- destructive-action warnings
- empty lists and dashboards
- no-results search states
- permissions and access messages
- disconnected integration states
- loading failures and retry prompts
- upgrade or plan-limit states

Once those live together, the problems become much easier to see. You can spot repeated phrasing, inconsistent CTA patterns, conflicting tone, and places where one team wrote supportive guidance while another wrote a dead-end sentence.

This is one of the strongest use cases for CopyDoc because it turns isolated Figma text into something the product, support, and content teams can review together.

## Review each state for four jobs

I like to judge every error or empty state against four jobs.

### 1. Explain the situation

What happened? Or what is not here yet?

Weak:

- "Something went wrong."

Better:

- "We could not publish this page because the hero image is missing."

The goal is not maximum technical detail. It is enough specificity that the user can form a mental model of the problem.

### 2. Lower confusion

A good state reduces panic. That can be as simple as showing whether the issue is temporary, fixable, or expected for a new workspace.

Weak:

- "Action failed."

Better:

- "Your draft is still here. Update the missing fields and try again."

### 3. Point to the next move

Many empty states fail because they describe the absence of content without telling the user what to do next.

Weak:

- "No campaigns found."

Better:

- "No campaigns yet. Create your first campaign or import one from a CSV."

### 4. Respect the edge case

Permissions, billing, data sync, and collaboration failures often involve more than one actor. Good copy should make that obvious when necessary.

Instead of pretending the user alone can fix everything, the message may need to say:

- ask an admin
- reconnect an integration
- wait for a sync
- contact support with a clear reason

## Empty states should teach, not just fill space

The best empty states do three things at once:

- confirm the system is working
- explain what belongs here
- offer the best next action

That means an empty dashboard for a new user should not sound like a failure, and an empty search result should not sound like the system is broken unless it actually is.

When reviewing empty states in Figma, ask:

- Is this a first-use moment or a problem moment?
- Does the state explain the value of filling this area?
- Is the next action the most helpful one, or just the easiest CTA to add?
- Would a support teammate agree that this guidance is accurate?

If the answer to that last question is unclear, the state probably needs cross-functional review before release.

## Error messages should be grouped by severity

Not every error needs the same tone.

I usually separate them into:

- `minor friction`: inline validation, field formatting, recoverable mistakes
- `blocked tasks`: publishing failures, missing permissions, failed uploads
- `high-risk actions`: destructive changes, billing consequences, compliance-sensitive warnings

That helps the team avoid the common mistake of giving every problem the same mild, generic voice. A typo in a form field and a failed billing setup should not feel identical.

## Where CopyDoc improves the workflow

This is where [CopyDoc](/copydoc/) becomes more than a text export tool.

It lets teams:

- pull scattered states into one review surface
- batch-edit problem patterns
- send copy out for review in spreadsheets or docs
- re-import approved changes without manual Figma editing

That matters because these states often live across dozens of frames, flows, and component variants. Without a structured system, teams either skip the review or do it once and never maintain it.

If you want a broader review lens after this focused pass, [Figma Microcopy Review Workflow](/articles/copydoc-figma-microcopy-review-workflow/) is the nearest related article.

## A release checklist for edge-case copy

Before shipping, check:

- Every error state says what happened in plain language.
- Every empty state offers the best next action, not a filler CTA.
- High-stress states sound calmer and more specific than low-stress states.
- Permissions, billing, and support escalations point to the right owner.
- Long strings and localized variants still fit the layout.
- Product and support teams agree the guidance is accurate.

## The real goal

The point of reviewing these states is not to make every sentence sound polished. It is to make the product feel dependable when something is missing, blocked, or broken.

That is why error messages and empty states deserve their own workflow. They are where trust either compounds or slips. A structured review with [CopyDoc](/copydoc/) gives teams a way to fix those moments before users or support tickets expose them the hard way.

---

---
type: article
title: Figma Terminology Audit Workflow
description: How product, marketing, and support teams can audit terms across Figma designs, fix inconsistent language, and keep approved wording in sync.
datePublished: 2026-06-05T00:00:00.000Z
dateModified: 2026-06-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-terminology-audit-workflow/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-terminology-audit-workflow.md
---

# Figma Terminology Audit Workflow

Teams notice tone problems quickly. They notice terminology drift much later.

That is why product interfaces end up with combinations like:

- "workspace" on one screen and "project" on another
- "customer" in onboarding and "member" in settings
- "trial ends" in lifecycle email copy but "subscription renews" in billing UI
- support docs using the old feature name six weeks after the product team renamed it

None of these issues looks dramatic in isolation. Together they make the product feel less trustworthy, harder to learn, and harder to support.

A terminology audit is the process of finding those mismatches before they spread further. And when the source designs live in Figma, [CopyDoc](/copydoc/) is one of the cleanest ways to run that audit without reading screens one by one and pasting text into ad hoc documents.

## This is not just copy editing

A terminology audit is different from a general copy QA pass.

Copy QA asks:

- is this string correct?
- is there a typo?
- does the button fit?
- is the empty state understandable?

A terminology audit asks:

- what concept are we naming?
- where else does that concept appear?
- do all teams use the same term?
- is the approved term actually the one shipping?

That difference matters because a perfectly written string can still be the wrong string if it uses the wrong product language.

If your team is still working through broader interface writing quality, [Figma Microcopy Review Workflow](/articles/copydoc-figma-microcopy-review-workflow/) is the closest adjacent article. This piece is narrower and more systemic.

## Where terminology drift usually comes from

Most teams do not create inconsistent language on purpose. It creeps in through ordinary work:

- PMs rename a feature, but older UI strings remain
- marketing adopts messaging that product has not fully implemented
- support invents simpler terms to explain confusing labels
- localization teams inherit multiple English source terms for the same idea
- new surfaces get designed by people who never saw the original naming decisions

The more cross-functional the company becomes, the easier it is for one concept to collect multiple names.

That is why a terminology audit should include more than the product UI. It should look across the design states that influence how users understand the product:

- onboarding
- settings and billing
- help or error messages
- lifecycle screens
- pricing or upgrade surfaces
- marketing screenshots or product tours

## Use CopyDoc to pull the language into one review surface

The hardest part of terminology work is not making decisions. It is seeing all the language together.

CopyDoc is useful because it can export Figma text into structured formats like Excel, Word, CSV, JSON, and more. Once the text is outside the canvas, you can audit terms across dozens of screens at once instead of relying on memory.

A practical audit setup looks like this:

1. Export the relevant Figma text from the target flows.
2. Group strings by feature area or user journey.
3. Add columns for approved term, current term, owner, and action.
4. Flag duplicates, synonyms, and old terminology.
5. Re-import the approved changes into Figma once the decisions are made.

That structure is far more useful than a comment thread that says "can we make this more consistent?" with no record of what "consistent" means.

## Decide the canonical term before fixing the screens

This step sounds obvious, but it is the one teams skip most often.

Before using find and replace or bulk updates, decide:

- what the canonical term is
- where it applies
- where it does not apply
- whether legacy docs or screenshots also need updating

For example, maybe "workspace" is the official term in the product, but "project" still makes sense in an import flow because that is what the external system calls it. That is not inconsistency. That is deliberate context.

The audit gets much better when every flagged mismatch becomes one of three things:

- approved change
- approved exception
- unresolved question with a named owner

Without that discipline, the audit becomes an opinion pile instead of a language system.

## Look for patterns, not just isolated bad strings

The most useful review questions are pattern questions:

- Do success messages, errors, and settings labels use the same term for the same object?
- Do onboarding and support language describe the same action differently?
- Did an old product rename leave behind fragments in upgrade flows, screenshots, or empty states?
- Are nouns consistent, but verbs inconsistent? For example, "publish" versus "share" versus "send."
- Are the marketing and product teams teaching the user different names for the same thing?

Those are the issues a screen-by-screen review often misses.

A good audit spreadsheet will also expose repeated strings that deserve to become approved snippets or content tokens. That is where CopyDoc's content library and reusable text workflow become helpful after the audit, not just during it.

## Bulk fixes are only safe when the scope is visible

One reason teams fear terminology audits is that they worry a bulk update will break nuance.

That fear is reasonable. If you replace a term everywhere without context, you can absolutely damage the copy.

The safer workflow is:

- export first
- review grouped occurrences
- decide scope
- then use bulk replacement where the wording is truly equivalent

CopyDoc is valuable here because it reduces the mechanical work once the decision is made. The team does not need to click into forty frames to replace one outdated term. But the judgment still comes first.

If your team is already using structured wording rules inside the design system, [Design System Copy Tokens in Figma](/articles/copydoc-design-system-copy-tokens-in-figma/) is a strong companion article to read after the audit.

## Close the loop across product, marketing, and support

A terminology audit is only useful if the decisions travel.

Once the approved wording is back in Figma:

- update the reference glossary or naming doc
- alert support to the changes
- flag marketing screenshot or lifecycle surfaces that still use old terms
- note any localization implications

This is especially important when support has invented simpler language to help real users. Sometimes that is a sign the product term is wrong. Sometimes it is just a sign the help center should explicitly bridge the two.

Either way, the audit should leave behind a clearer shared vocabulary, not only cleaner design files.

## A realistic terminology audit cadence

Most teams do not need a massive audit every month. What they do need is a trigger-based process.

Run one when:

- the product gets renamed or repositioned
- a major navigation or IA change ships
- billing and plan language changes
- multiple teams are shipping related surfaces at once
- localization quality is slipping because the English source is inconsistent

For lighter maintenance, a quarterly pass across the highest-traffic flows is usually enough to catch drift before it becomes entrenched.

## Why CopyDoc fits this job so well

[CopyDoc](/copydoc/) is not only useful for translation or spreadsheet sync. It is useful because terminology work depends on seeing text as a system.

Figma is a great place to design the interface. It is a terrible place to spot vocabulary drift across fifty frames by intuition alone.

CopyDoc gives the team a better loop:

- export the language
- audit it systematically
- approve the naming decisions
- push the fixes back into the actual designs

That is what makes a terminology audit worth standardizing. It turns "we should probably clean up our language" into a workflow that product, support, marketing, and localization can actually repeat without starting from zero every time.

---

---
type: article
title: HTML Email Compliance Review Workflow
description: A practical workflow for reviewing legal copy, unsubscribe requirements, link behavior, and rendering risks before exporting HTML emails from Figma.
datePublished: 2026-06-05T00:00:00.000Z
dateModified: 2026-06-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-html-email-compliance-review-workflow/
markdownUrl: https://www.hypermatic.com/articles/emailify-html-email-compliance-review-workflow.md
---

# HTML Email Compliance Review Workflow

Email review often gets described as "just one last proof." That is how teams end up approving the design while missing the parts that can actually block a send.

An HTML email can look polished in Figma and still fail where it matters:

- the unsubscribe link is wrong
- the footer is missing required company details
- claims language changed in one module but not another
- the mobile version makes the legal copy unreadable
- Outlook strips away a visual cue that compliance assumed would be visible

That is why compliance review for email should happen on the real HTML path, not on a static mockup alone.

[Emailify](/emailify/) is a strong fit here because it turns Figma email designs into responsive HTML, provides desktop and mobile previews, supports platform-specific exports, and includes ESP-oriented footer components for many downstream tools. But it does not remove the need for a review process. It makes the right review process easier to run.

## Treat compliance as part of production, not an external interruption

The most expensive review pattern is this:

1. design signs off visually
2. marketing exports the HTML
3. legal or CRM notices missing requirements
4. the team patches the file manually somewhere else

Once that happens, the approved design and the sent email are no longer the same artifact. The team loses trust in the workflow, and every future campaign gets slower.

A better approach is to make compliance review part of the same Figma-to-HTML process from the start.

That means the review must answer three questions before export:

- Is the content compliant?
- Is the required structure present?
- Will the important parts still read correctly in real email clients?

## Build a review-ready Emailify file first

Legal and compliance reviewers do not need a beautiful Figma file. They need a file that exposes the right decisions clearly.

Before sending the email for review:

- use real sender names, product names, offers, and dates
- replace placeholder links
- add the relevant footer or unsubscribe structure for the target ESP
- confirm the subject line and preheader are aligned with the email body
- use realistic disclaimer length, not "shortened for design"

This seems obvious, but many teams still review idealized mockups and assume the final send will sort itself out.

If your team needs a broader operational pass before export, [HTML Email Handoff Checklist for Designers and Marketers](/articles/emailify-html-email-handoff-checklist-for-designers-and-marketers/) is the closest adjacent article. This article is narrower: it is specifically about the compliance and approval layer.

## Review content that creates legal or trust risk

Not every campaign needs the same scrutiny, but these items should be deliberate every time:

- unsubscribe and preference language
- company address or sender identity requirements
- offer deadlines and terms
- discount, pricing, or availability claims
- testimonial, results, or performance language
- medical, financial, or regulated-industry disclaimers when relevant
- locale-specific wording for regional sends

In practice, that means reviewing the actual copy inside the HTML email structure, not a separate brief.

A strong rule is to check every place where the email promises something, implies urgency, or gives the subscriber a right to do something. Those are the places where "almost correct" tends to become a real problem.

## Do the review in the order the subscriber experiences it

One of the simplest improvements teams can make is changing the review order.

Do not review by design module. Review by subscriber experience:

1. subject line and preheader
2. hero message and main CTA
3. supporting proof or product claims
4. pricing or offer conditions
5. secondary links
6. footer, unsubscribe, and sender details

This catches contradictions that modular design review can miss. For example:

- the subject line promises one thing while the body says another
- the CTA implies a discount that the footer terms do not support
- the hero uses "free trial" language while the legal line describes a paid conversion path

Emailify's previews help because the review can stay close to the exported experience instead of living only in a layered design file.

## Check rendering risks that affect compliance, not only aesthetics

Some email QA issues are cosmetic. Some are compliance-adjacent because they change whether required information is visible or understandable.

Pay special attention to:

- tiny footer text on mobile
- light gray legal copy that loses contrast
- stacked mobile layouts that separate disclaimers from the related offer
- buttons whose hover or visual state is not the same in major clients
- dark mode behavior that reduces readability
- Outlook quirks that remove expected visual polish around required CTAs or notices

This is where a static screenshot stops being enough. Emailify's preview flow and the surrounding tutorial set make it easier to review the real HTML path. For client-specific rendering, [How to test HTML emails in Outlook with exports from Figma using Emailify](/tutorials/how-to-test-html-emails-in-outlook-with-exports-from-figma-using-emailify/) and [How to test HTML emails in different clients with exports from Figma using Emailify](/tutorials/how-to-test-html-emails-in-different-clients-with-exports-from-figma-using-emailify/) are the two most relevant follow-ups.

## Use platform-specific footers on purpose

A lot of compliance friction is not about design at all. It is about downstream platform rules.

Emailify's platform-specific export flow matters because different ESPs expect different footer tags, unsubscribe variables, or view-in-browser placeholders. If the team designs a beautiful footer that ignores the target platform's required syntax, somebody will end up patching the HTML manually later.

So the review checklist should include:

- which ESP or delivery platform is this for?
- is the correct footer pattern already in the design?
- do legal and CRM both agree that the required links are present?
- if the subject line or preheader is set in Emailify, does the team know whether it also needs to be set in the ESP?

Those questions remove a huge amount of last-minute uncertainty.

## A practical approval loop for marketing, legal, and CRM

The smoothest approval loops keep each stakeholder in their lane:

- marketing approves message and campaign goal
- legal or compliance approves terms, claims, and required structure
- CRM or lifecycle owner approves platform fit, merge tags, and send setup
- design approves layout and readability in the real HTML preview

That sounds formal, but it is often faster than letting everyone comment on everything.

The important part is that final approval references the same underlying email source. If legal approves one PDF, CRM uploads a different HTML package, and design checks a third version, the process is broken even if everyone was technically diligent.

## A review workflow worth standardizing

For recurring email programs, I would standardize this exact sequence:

1. Finalize real content in Figma, including subject and preheader decisions.
2. Add the correct Emailify footer or platform-specific structure.
3. Review the message in subscriber order, not module order.
4. Preview the email on desktop and mobile as real HTML.
5. Run client-specific rendering checks where the program actually has risk.
6. Export only after marketing, legal, and CRM have approved the same version.

If your team uses repeated templates, this workflow becomes even more valuable. The same footer logic, disclaimer placement, and approval criteria can carry from campaign to campaign instead of being rediscovered under deadline pressure.

## Where Emailify helps most

[Emailify](/emailify/) does not make compliance optional. It makes it easier to review the real deliverable while the work is still inside the design system the team already maintains.

That matters because compliant email production is not only about avoiding mistakes. It is about removing the shadow workflow where people secretly edit HTML after approval because the design review was not connected closely enough to the actual send artifact.

If your campaigns regularly involve offers, regulated messaging, or multiple reviewers, that is the real workflow problem to solve. Cleaner compliance review is not glamorous, but it is one of the clearest ways to ship faster without increasing risk.

---

---
type: article
title: Mobile Email QA Workflow Before Export
description: Review email layouts in Figma for mobile readability, tap targets, stacking, and content stress before exporting HTML.
datePublished: 2026-06-05T00:00:00.000Z
dateModified: 2026-06-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-mobile-email-qa-workflow-before-export/
markdownUrl: https://www.hypermatic.com/articles/emailify-mobile-email-qa-workflow-before-export.md
---

# Mobile Email QA Workflow Before Export

Most email teams know they should test after export. Fewer teams have a disciplined mobile QA pass before export, which is often where the cheaper fixes live.

That gap matters because many email failures are visible in the design long before HTML is generated. A button row is already too cramped. The product card stack already feels too dense. The disclaimer is already unreadable at mobile width. The subject line and preheader are already too long for the campaign promise.

By the time those issues are discovered in the ESP or an inbox preview tool, the team is fixing design problems inside a production deadline.

[Emailify](/emailify/) helps because it keeps email design and export inside Figma, but the best workflows use that convenience to review mobile behavior earlier, not later.

## Think of mobile QA as a content-and-layout stress test

Desktop review is where a campaign usually gets approved. Mobile review is where the campaign proves it can survive reality.

Instead of asking "does this look good on a phone?" ask:

- Can the reader understand the message in a few scrolls?
- Does the visual hierarchy still work after sections stack?
- Are tap targets easy enough to hit?
- Do long product names, prices, or localized strings break the layout?
- Is the design leaning too hard on imagery where mobile clients may clip or delay loading?

Those are not export questions. They are workflow questions, and they belong earlier.

## Review the parts of the email that fail on mobile first

I usually start with the sections most likely to create mobile pain:

- multi-column product rows
- side-by-side image and text modules
- button groups
- navigation-heavy headers
- long legal or preference sections
- price grids and comparison modules
- hero sections with text embedded in imagery

If one of those blocks is fragile in Figma, the HTML export will not magically make it stronger.

The goal is not to design the smallest possible email. The goal is to make each section survive narrow screens with the right emphasis intact.

## A better review order than "top to bottom"

For mobile QA, I like to review the email in this order instead:

1. Subject line and preheader
2. Hero message
3. First CTA block
4. Product or content modules
5. Secondary CTAs
6. Footer, legal, and unsubscribe area

Why this order?

Because a mobile reader may never reward the email for polishing lower sections if the first two screenfuls already feel crowded, unclear, or hard to act on.

That means a mobile QA pass should treat the early scroll depth as premium real estate. If the first CTA feels buried under oversized artwork or awkward spacing, the problem is strategic, not cosmetic.

## What to check inside the Figma file before export

Here is the practical pass I would formalize for teams working in Figma:

### 1. Read for compression, not only aesthetics

On mobile, every extra sentence costs more. Tighten headlines, CTA labels, eyebrow copy, and support text where possible. What reads as elegant on desktop can feel endless on a small screen.

### 2. Stress-test the real content

Do not review with short placeholder strings if the live campaign will have:

- long product names
- discount language
- promo codes
- personalized names
- localized copy
- price comparisons

Those are the strings that tend to break stacking and spacing.

### 3. Check button behavior as if your thumb is the QA tool

Buttons should be comfortably tappable, spaced clearly, and written with enough specificity that the reader does not need surrounding context to know what happens next.

### 4. Review image dependency honestly

If the email only makes sense when every image loads immediately, the mobile experience is fragile. That does not mean avoiding imagery. It means making sure the structure and copy still communicate the message when images load slowly or are partially blocked.

### 5. Look for dark corners in the footer

Teams often spend all their energy on the hero and forget the sections that create compliance or trust issues later. On mobile, legal copy, address blocks, unsubscribe language, and preference links can become tiny, cramped, or visually buried.

That is a bad place to discover a problem during ESP review.

## A useful way to split responsibilities

Mobile QA gets easier when ownership is explicit.

I like this split:

- Design owns hierarchy, spacing, readability, and section behavior.
- Marketing owns message clarity, offer order, and CTA logic.
- Email ops owns send-platform constraints, link correctness, and final test coverage.

That separation matters because not every mobile problem is visual. Some are really campaign strategy problems disguised as layout issues.

If your team wants a later-stage pre-send checklist as well, [Figma Email QA Before ESP Upload](/articles/emailify-figma-email-qa-before-esp-upload/) covers the handoff step after export.

## Common mobile problems that start in design

These are the patterns I would actively hunt for during review:

- two-column sections that become visually lopsided when stacked
- image-first modules that push the first CTA too far down
- secondary text that looks optional but contains critical context
- button labels that are vague once the surrounding layout collapses
- price or offer language that wraps into awkward multi-line blocks
- logo-heavy headers that spend too much vertical space before the message starts

Fixing those in Figma is almost always cheaper than discovering them in Outlook, Gmail, or the ESP preview layer.

## A compact mobile QA checklist

Before exporting with Emailify, check:

- The first screenful communicates the campaign promise clearly.
- The first CTA appears early enough on mobile.
- Any multi-column module still makes sense when stacked.
- Buttons are comfortably tappable and clearly labeled.
- Real content lengths have been tested.
- Footer and legal sections remain readable.
- The campaign still works if images are slower than expected.

## Where Emailify fits in the workflow

Emailify shortens the path from Figma to production-ready HTML, which is exactly why a pre-export mobile review becomes more valuable. Faster export should not mean later decisions. It should mean you can iterate on the right decisions while the campaign is still cheap to change.

If mobile performance matters to your audience, make mobile QA part of the design workflow, not a rescue step after export. Start with the stacking behavior, content stress, and CTA clarity inside [Emailify](/emailify/), then let final inbox testing confirm the decisions instead of uncovering them for the first time.

---

---
type: article
title: QBR Deck Workflow for Customer Success Teams
description: How customer success teams can build reusable QBR decks in Figma, refresh account data, and export stakeholder-ready presentations without rebuilding slides in PowerPoint.
datePublished: 2026-06-05T00:00:00.000Z
dateModified: 2026-06-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-qbr-deck-workflow-for-customer-success-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-qbr-deck-workflow-for-customer-success-teams.md
---

# QBR Deck Workflow for Customer Success Teams

Quarterly business reviews are one of those workflows that look straightforward from the outside and quietly eat hours every cycle.

The structure is predictable. The stakes are not. Every QBR deck needs to combine recurring story beats, fresh account data, product adoption evidence, roadmap context, and next-step recommendations. Then someone asks for a PDF, someone else wants editable PowerPoint, and the CSM still has to present the deck live without worrying about broken formatting.

That is exactly where [Pitchdeck](/pitchdeck/) fits well. It lets customer success teams keep the source design in Figma, present in the browser, and export to PowerPoint, Google Slides, Keynote, or PDF when the audience requires a different format. The benefit is not just speed. It is having one master deck system instead of a messy chain of copied files.

## A QBR deck is not just a presentation file

The most useful way to think about a QBR deck is as a recurring operating system for account communication.

It usually needs all of these at once:

- a repeatable structure for every account
- room for account-specific metrics and screenshots
- a presenter-friendly format for live delivery
- an export format that the customer can keep afterward
- some way to avoid version chaos when the same deck is reused every quarter

If that system lives in PowerPoint alone, design quality usually slips and updating shared sections becomes manual. If it lives only as static design frames, the handoff to stakeholders becomes clumsy.

Pitchdeck bridges that gap nicely because it is built for teams that want design control in Figma but still need real presentation outputs.

## Start by separating the permanent deck from the changing deck

The cleanest QBR setup is to split the content into two buckets.

Permanent sections:

- intro and agenda
- brand framing
- recap format
- roadmap structure
- CTA and next-step slides

Changing sections:

- usage metrics
- renewal context
- account wins
- blockers and risk areas
- product screenshots or examples
- quarter-specific roadmap relevance

This is the point where many teams get stuck. They treat every QBR as a net-new file instead of maintaining a reusable deck system with swappable sections.

Pitchdeck is strongest when the Figma file behaves like a library:

- shared slide patterns for recurring sections
- consistent layouts for charts and screenshots
- clear naming for account-specific variants
- presenter notes for the person actually delivering the review

If your team already runs executive decks in Figma, [Board Deck Workflow for Figma Teams](/articles/pitchdeck-board-deck-workflow-for-figma-teams/) is the closest neighboring article. QBR work is different, but the discipline around ownership and final delivery formats is similar.

## Design for refreshes, not only for polish

QBR decks often fail because they look good once and update badly afterward.

The design should make recurring data updates easy:

- reserve consistent areas for charts, benchmarks, and commentary
- keep text lengths realistic from the first version
- decide which screenshots are fixed proof points and which are meant to rotate
- avoid building overly decorative layouts that collapse when the story changes

Customer success teams usually have less time for layout repair than sales or design teams. That means the best QBR template is not the fanciest one. It is the one that survives new data without every slide needing manual rescue.

One practical test is this: if usage drops, if the customer added new seats, or if one slide has to show a very different product workflow this quarter, does the deck still hold together?

If the answer is no, the template is too fragile.

## Choose the delivery mode before the review starts

One reason QBR production gets messy is that the final format is treated as an afterthought.

Decide early whether this specific QBR is primarily:

- a live browser presentation
- a PDF readout
- an editable PowerPoint handoff
- a Google Slides share-out for the customer
- a mix of live presentation plus file export

Pitchdeck supports all of those routes, but the workflow changes depending on which one matters most.

If the team needs a strong live delivery, browser presentation with speaker notes and a cleaner presenter experience usually wins.

If the customer wants to circulate the deck internally after the call, PDF is often cleaner than editable slides.

If the customer expects their own team to keep editing or repurposing the deck, PowerPoint or Google Slides export matters more.

The mistake is trying to satisfy every output at the last minute without deciding which one is primary.

## Handle account variants deliberately

QBR decks are rarely one-size-fits-all. Enterprise stakeholders, day-to-day admins, and executive sponsors often need different emphasis.

Instead of forking a chaotic set of files, create deliberate variants:

- executive summary version
- operational deep-dive version
- renewal-risk version
- upsell or expansion version

Keep the shared slide foundations consistent, but let the narrative layer change.

This is where Figma is a better source environment than PowerPoint alone. You can keep reusable visual components together while still duplicating only the pages or sections that need account-specific adjustments.

If your team already struggles with version sprawl, [Pitch Deck Version Control for Startups](/articles/pitchdeck-pitch-deck-version-control-for-startups/) is worth adapting to a customer success context. The stakeholder type is different, but the "which version went where?" problem is almost identical.

## Use analytics after the meeting, not just during it

One underrated part of the Pitchdeck workflow is that the deck can be shared as a tracked web presentation. For customer success teams, that opens up a useful follow-through loop.

After the QBR, you can learn things like:

- which sections customers revisited afterward
- whether they spent time on the roadmap or the performance recap
- whether the executive sponsor opened the deck at all
- which version got shared internally

That does not replace the conversation. It does make follow-up more intelligent.

If the customer keeps revisiting the adoption metrics slide, your next email can speak directly to performance opportunities. If they skip the roadmap section entirely, your follow-up may need to make that value more explicit.

This is one of the biggest differences between a living presentation workflow and "emailing a deck and hoping."

## A practical QBR production rhythm

For most teams, this rhythm is enough:

1. Keep a reusable QBR master in Figma.
2. Duplicate only the account-specific pages needed for the quarter.
3. Refresh metrics, screenshots, and narrative sections first.
4. Review the deck in presentation mode, not only as design frames.
5. Confirm the final output format before export.
6. Export the customer-facing version to the format that best matches the audience.
7. Share the deck link or file and capture any post-meeting engagement signals.

If the deck also needs richer embeds or interactive references, the tutorial library around Pitchdeck's media, links, and exports becomes useful. The tutorial on [using the analytics dashboard and link tracking for Figma presentations](/tutorials/how-to-use-the-analytics-dashboard-and-link-tracking-for-figma-presentations-using-pitchdeck/) is a good next step for teams that want to turn follow-up into a more measurable process.

## Why this workflow is worth standardizing

Customer success teams tend to inherit deck chaos because presentations sit between design, revenue, product, and client communication. Nobody owns the whole system, so every quarter starts from partial leftovers.

Using [Pitchdeck](/pitchdeck/) for QBRs gives the team a cleaner center of gravity:

- Figma stays the visual source of truth
- exports stay flexible
- live delivery improves
- account variants stop multiplying in random places

That does not mean every customer should receive the exact same presentation. It means the team should stop rebuilding the mechanics of the QBR every single quarter.

If your organization already lives in Figma and QBR decks keep drifting across PowerPoint copies, browser tabs, and last-minute exports, this is one of the clearest cases for turning the review deck into a reusable system instead of a recurring scramble.

---

---
type: article
title: Which Figma Presentation Export Format Should You Use?
description: Choose between PowerPoint, Google Slides, PDF, Keynote, or a hosted web deck when your presentation starts in Figma.
datePublished: 2026-06-05T00:00:00.000Z
dateModified: 2026-06-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-which-figma-presentation-export-format-should-you-use/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-which-figma-presentation-export-format-should-you-use.md
---

# Which Figma Presentation Export Format Should You Use?

One of the most common deck mistakes is choosing the export format too late.

The team designs the presentation in Figma, everyone approves the visuals, and only then does someone ask whether the file needs to be editable in PowerPoint, easy to comment on in Google Slides, safe to share as a PDF, or better delivered as a hosted web deck. By that point, small format tradeoffs can become painful: broken fonts, flattened edits, missing speaker notes, weak analytics, or awkward last-minute rebuilds.

[Pitchdeck](/pitchdeck/) is useful because it lets one Figma deck support multiple outputs. But that does not mean every output is equally good for every situation. The better question is not "what can we export?" It is "what does this deck need to do once it leaves the design file?"

This guide is for that decision.

## The first question: who controls the deck after export?

Before you compare file types, define who needs control.

Usually the real owner after export is one of these:

- a presenter who only needs to deliver the deck confidently
- a sales or CS teammate who needs to edit details regularly
- an external stakeholder who needs a view-only file
- a founder or executive who needs a safe review artifact
- a marketing or design team that wants share analytics

That ownership question matters more than personal preference. A founder board update, a sales enablement deck, and a conference presentation can all start in Figma, but they often need different final formats.

## A simple decision table

Here is the fastest way to choose:

| If the deck needs... | Best first choice |
| --- | --- |
| Live presenting from a browser with links, embeds, and analytics | Hosted web presentation |
| Frequent non-designer edits by the receiving team | PowerPoint or Google Slides |
| Maximum visual control with minimum edit risk | PDF |
| Apple-heavy presenting workflow with light post-design editing | Keynote |
| Async review with low friction and easy commenting | Google Slides or hosted web deck |

That table is the shortcut. The rest of this article is how to make the choice more confidently when the situation is less obvious.

## When PowerPoint is the right answer

PowerPoint is still the safest choice when the receiving team expects a file they can keep editing after design signs off.

That often applies to:

- sales decks that get personalized by account
- QBR decks updated every quarter
- partner or reseller decks reused by non-design teams
- executive presentations that travel across departments

PowerPoint is strongest when the team values editability and organizational familiarity more than perfect fidelity. That tradeoff is usually worth it when the deck will have a long life after the initial design phase.

Choose PowerPoint when:

- the recipient lives in Microsoft Office
- multiple people will revise the copy later
- the deck must survive forwarding between organizations
- the presenter wants a familiar presenter view workflow

If that is your most common case, [Presentation Handoff Checklist for Designers](/articles/pitchdeck-presentation-handoff-checklist-for-designers/) is the best supporting article.

## When Google Slides wins

Google Slides is best when the deck needs lightweight collaboration, comments, and quick updates from a distributed team.

It is a strong fit for:

- internal review decks
- agency client review rounds
- workshop materials
- partnership or ops decks where comments matter more than polish

The advantage is not design control. The advantage is accessibility. Almost anyone can open it, comment on it, and suggest changes without installing anything special.

Choose Google Slides when:

- review speed matters more than presentation polish
- stakeholders are already working in Google Workspace
- comment threads are part of the approval loop
- the deck is likely to be duplicated and lightly adapted

If the question is specifically whether Figma should remain the design source while Google Slides becomes the collaboration layer, that is different from replacing Figma entirely. Pitchdeck helps bridge those roles instead of forcing one tool to do everything.

## When PDF is the smart choice

PDF is often underrated because it feels static. That is exactly why it is useful.

A PDF is the right choice when the goal is controlled viewing rather than active editing. Think:

- investor follow-up files
- board pre-read decks
- compliance-sensitive materials
- polished client proposals
- final leave-behinds after a live presentation

PDF reduces the risk of font shifts, accidental edits, and layout drift. It is also easier to archive and safer to circulate when you need people to see the deck exactly as approved.

Choose PDF when:

- the deck is already finalized
- editability is not a requirement
- the audience may open the file on unpredictable devices
- you want the cleanest review artifact with the fewest surprises

The tradeoff is obvious: once someone wants to edit the content meaningfully, a PDF stops being friendly.

## When a hosted web deck is better than any file export

Sometimes the deck is not really a file problem. It is a sharing problem.

Hosted web presentations are strongest when you care about:

- presenting from anywhere without worrying about local fonts
- interactive links and embedded content
- controlled sharing
- viewer analytics
- avoiding attachment chaos

This is especially useful for product demos, sales presentations, fundraising intros, and client walkthroughs where the deck behaves more like an experience than a document.

Choose a hosted web deck when:

- the team wants a single shared URL
- viewers are likely to open the deck asynchronously
- tracking engagement matters
- the deck includes media or interactions that feel limited in static exports

This is one of the clearest ways [Pitchdeck](/pitchdeck/) separates itself from a basic export-only workflow.

## When Keynote makes sense

Keynote is usually the niche choice in this set, but it is still the right one sometimes.

It tends to fit:

- founder-led presentations delivered from Apple devices
- conference or event presentations with a controlled machine setup
- teams that already present in Keynote and do not want to change

Choose Keynote when the presenting environment is known and stable. It is less about general collaboration and more about serving a specific delivery workflow.

## A practical format-selection workflow

If you want to stop revisiting this decision on every deck, standardize a simple workflow:

1. Define the audience and post-design owner.
2. Decide whether the deck must be editable after signoff.
3. Decide whether comments, analytics, or presenter control matter most.
4. Choose the export format before final layout polish starts.
5. Test one realistic export early, not on deadline day.

That fourth step saves a lot of pain. Editable outputs often need different design decisions from polished view-only outputs. For example, a deck that will live in PowerPoint may need stricter font discipline and more caution around layout density than a PDF or hosted deck.

## The real rule

There is no universally best export format. There is only the format that matches the job the deck has to do after it leaves Figma.

Use PowerPoint when the team needs editability.
Use Google Slides when collaboration is the main job.
Use PDF when stability matters more than flexibility.
Use Keynote when the presentation environment is Apple-first and controlled.
Use a hosted web deck when sharing, presenting, and analytics matter more than the file itself.

If your team keeps designing in Figma but still debates the output every time, make export format part of the brief, not the cleanup. [Pitchdeck](/pitchdeck/) gives you the flexibility, but the workflow gets faster when format choice happens early and intentionally.

---

---
type: article
title: Design QA for Authenticated Product Flows
description: How to compare logged-in product screens against Figma designs so private app flows can be reviewed visually before release.
datePublished: 2026-06-05T00:00:00.000Z
dateModified: 2026-06-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-design-qa-for-authenticated-product-flows/
markdownUrl: https://www.hypermatic.com/articles/pixelay-design-qa-for-authenticated-product-flows.md
---

# Design QA for Authenticated Product Flows

Marketing pages are easy compared to logged-in product screens.

A public page can usually be reviewed with one URL and one design frame. Authenticated flows are different. They depend on real data, permissions, user states, seeded accounts, modals, tabs, and edge cases that only appear after a login step. That is exactly why design QA often gets weaker once the product moves behind authentication.

Teams end up falling back to screenshots, Slack threads, or vague bug reports like "settings page feels off on staging."

[Pixelay](/pixelay/) is especially useful here because it can compare Figma designs against live sites, staging environments, localhost builds, and password-protected pages through the browser workflow. For private product work, that is a much more realistic QA path than exporting static mockups and hoping everyone sees the same thing.

## Why logged-in flows need a different QA process

Authenticated product UI has three qualities that make visual review harder:

- access is restricted
- the data state changes what the interface looks like
- the most important bugs often appear in edge states, not the happy path

That means a normal "compare the page to the Figma file" workflow is not enough.

You also need to know:

- which account to log into
- which role or permissions to use
- which data fixtures create the correct state
- whether the compared screen is stable enough to review

Without that setup, visual QA becomes inconsistent. One reviewer sees an empty table, another sees live customer data, and a third cannot access the environment at all.

## Start with a review-ready test account

The best authenticated QA workflows use deliberate review accounts, not random employee logins.

Create or maintain test accounts for the specific states that matter:

- new user
- active customer
- admin
- limited-permission user
- account with empty data
- account with realistic populated data

Then map those states back to the corresponding Figma frames.

This sounds operational because it is operational. Design QA for product flows is not only a visual problem. It is also a reproducibility problem.

Pixelay becomes much more useful once the team can reliably reopen the same private screen and compare it against the intended design instead of chasing whatever state happened to load that morning.

## Compare flows state by state, not route by route

A route is rarely the full unit of review in an authenticated app.

A single screen might need separate comparison for:

- empty state
- loading state
- success state
- validation error state
- permission-restricted state
- populated state with long real content

That is why route-level QA often feels incomplete even when the page technically "matches."

The most effective Pixelay workflow I have seen is to treat each meaningful state as its own review target. Publish or organize the relevant Figma frames the same way, then compare them one by one in the browser.

If your team is already doing broader responsive review, [Responsive Website QA from Figma](/articles/pixelay-responsive-website-qa-from-figma/) is the nearest related article. Authenticated flows add an extra layer because the correct state is part of the setup.

## Stabilize the environment before comparing

Private product UIs often include elements that create visual noise:

- toast notifications
- rotating data
- timestamps
- live charts
- user-specific avatars
- sticky support widgets

If possible, freeze or control those variables before review. The goal is not to make the app fake. The goal is to reduce meaningless diff noise so the review can focus on real implementation issues.

A stable comparison setup usually means:

- seeded or deterministic data where possible
- a known viewport size
- predictable browser zoom
- repeatable login steps
- temporary suppression of non-essential overlays or live widgets

Once those basics are stable, Pixelay's overlay and comparison modes become much more informative instead of overwhelming.

## What to review in authenticated screens

Private app flows often fail on details that are easy to miss in engineering QA:

- table spacing and density
- empty-state hierarchy
- field labels and helper text alignment
- error message placement
- button priority inside settings or billing screens
- modal padding and overflow
- side-nav states
- long customer names or values breaking layout

That is why Pixelay should not be used only for "pixel perfect" purity. It is also useful for catching practical drift that affects trust and usability in production software.

For example, a settings page can be functionally correct while still feeling unstable because the help text wraps badly, the destructive action is visually buried, or the success banner pushes critical content below the fold. A logged-in product review has to catch those issues too.

## Capture evidence in a way engineers can act on

The value of private-flow QA drops quickly if the output is just "looks different from Figma."

A useful report should show:

- the route or product area
- the authenticated state used
- the exact visual issue
- whether it is a bug, intentional drift, or open design question
- the evidence screenshot or overlay

Pixelay is particularly helpful here because it gives the team shared visual proof instead of long written descriptions. That matters even more for logged-in screens, where other reviewers may not be able to reproduce the exact state instantly.

If your process already uses issue trackers, attach the comparison image and note the test account or fixture used. That turns a fuzzy review comment into a fixable engineering task.

## Use private-flow QA before release, not only after surprise reports

The worst time to run authenticated design QA is after a customer reports that the app "feels broken."

Instead, make it part of the release rhythm for any work that changes:

- onboarding
- settings and billing
- navigation
- dashboards
- role-based access
- complex forms
- core account management flows

The team does not need to compare every possible screen for every release. But it should maintain a golden set of private flows that are important enough to review every time.

This becomes even more valuable after refactors, permission changes, or design system migrations, where subtle spacing and hierarchy drift can sneak in across many screens at once.

## A practical workflow for private product QA

This is the sequence I would standardize:

1. Define the logged-in states that matter and the accounts needed to access them.
2. Map each state to its approved Figma frame.
3. Open the private environment with a stable viewport and predictable data state.
4. Compare the screen in Pixelay using the most useful mode for that issue.
5. Capture evidence and classify the difference before filing the ticket.
6. Re-run the comparison after the fix, using the same account and state.

If your team still needs help getting private environments into the comparison flow, the tutorial on [how to compare websites behind a login with Figma designs using Pixelay](/tutorials/how-to-compare-websites-behind-a-login-with-figma-designs-using-pixelay/) is the most directly relevant resource in the current library.

## Why this workflow is worth formalizing

Authenticated product screens are often the most important parts of the product and the least consistently reviewed from a design perspective.

That is not because teams do not care. It is because private-state QA is harder to organize than public-page QA.

[Pixelay](/pixelay/) gives teams a better way to keep that review visual, objective, and repeatable across staging, localhost, and private environments. Once the login state, Figma frame, and evidence capture are all defined, design QA stops being a vague "final check" and becomes part of shipping the product with confidence.

---

---
type: article
title: Frontend Design QA Triage Workflow
description: Turn Figma-to-browser comparison findings into a manageable frontend QA queue instead of a demoralizing pile of visual nits.
datePublished: 2026-06-05T00:00:00.000Z
dateModified: 2026-06-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-frontend-design-qa-triage-workflow/
markdownUrl: https://www.hypermatic.com/articles/pixelay-frontend-design-qa-triage-workflow.md
---

# Frontend Design QA Triage Workflow

Overlay-based design QA is powerful right up until the team finds too many differences at once.

That is the moment when a useful comparison workflow can turn into a morale problem. Designers see dozens of mismatches. Developers see a wall of visual comments with no clear priority. Product sees launch risk without a simple answer to "what actually matters before release?"

The issue is usually not the comparison step. It is the triage step after comparison.

[Pixelay](/pixelay/) helps teams compare Figma designs against live, staging, local, and authenticated browser environments. Once those differences are visible, the next job is deciding what to fix now, what to group, what to accept intentionally, and how to keep the review from collapsing into screenshot chaos.

## Do not triage by raw screenshot count

One of the worst ways to run design QA is to let every mismatch become its own independent task immediately.

That creates:

- duplicate issues across breakpoints
- conflicting priorities
- long bug lists that hide the real patterns
- tension between polish work and actual blockers

A better rule is this: triage by impact pattern, not only by screenshot count.

For example, if a wrong spacing token affects eight cards across three pages, that is usually one system-level issue, not eight separate findings. If a missing hover state appears on five buttons created from one component, the real issue is the shared implementation, not five isolated QA notes.

## Start by sorting findings into four buckets

I like to sort Figma-to-browser differences into four buckets before assigning anything:

### 1. Blocking

These should be fixed before launch because they affect trust, usability, accessibility, compliance, or major visual correctness.

Examples:

- broken layouts at a key breakpoint
- unreadable text on important UI
- wrong CTA prominence
- major overflow or clipping
- critical spacing or alignment failures in high-visibility sections

### 2. Noticeable but shippable

These are visible and worth fixing, but they do not usually justify blocking the release on their own.

Examples:

- inconsistent icon spacing
- slightly off card padding
- non-critical border radius mismatches
- secondary text alignment differences

### 3. Intentional differences

Not every mismatch is a bug. Sometimes the browser implementation is intentionally different because of responsiveness, content reality, accessibility, or engineering tradeoffs.

These should be documented, not argued about from memory.

### 4. Needs design clarification

Some differences cannot be triaged confidently because the Figma file, state naming, or intended behavior is ambiguous.

That is not a development failure. It is a signal that the source of truth needs clarification before anyone spends time fixing the wrong thing.

## Give every finding enough evidence to be actionable

The best triage note is not the longest one. It is the one a developer can reproduce and fix without guesswork.

Each issue should include:

- the page or flow
- the viewport size
- the live, staging, or local URL
- the Figma frame reference
- one sentence explaining why the difference matters
- whether it is blocking, shippable, or intentional

Pixelay makes this much easier because the comparison can happen against the real browser state instead of relying on memory or separate screenshots taken at different times.

If your team needs a broader cross-functional handoff pattern, [Design QA Handoff Between Designers and Developers](/articles/pixelay-design-qa-handoff-between-designers-and-developers/) is the best companion article.

## Run triage in two passes, not one

A lot of teams mix issue discovery and prioritization into the same noisy meeting. That is where the process bogs down.

I prefer two passes:

### Pass one: capture differences fast

The goal is visibility. Do not debate every pixel yet. Group obvious duplicates and capture the evidence.

### Pass two: prioritize with product context

Now ask:

- Does this affect a high-traffic page or key product flow?
- Will users notice it?
- Could it hurt conversion, trust, or accessibility?
- Is the fix local or systemic?
- Can it be bundled with related work already in progress?

That second pass is where the QA list becomes a plan instead of a screenshot archive.

## Look for systemic implementation drift

The fastest wins often come from pattern detection.

When comparing Figma to the browser, check whether the issue comes from:

- one shared spacing token
- one typography scale mismatch
- one component state missing in code
- one responsive rule applied inconsistently
- one content constraint the design did not account for

Solving the pattern is much better than filing isolated tickets page by page. This is where browser-based overlays become especially useful: they help teams see the same kind of drift repeated across the interface instead of arguing about whether each page is a separate mistake.

## Decide what not to fix before launch

This is the part mature teams handle openly.

Some differences should not block launch because:

- the product value is not affected
- the user is unlikely to notice
- the fix introduces more risk than the mismatch
- the issue is tied to a broader refactor already planned

The important thing is that the choice is explicit. Untracked drift becomes future confusion. Intentional drift becomes a documented tradeoff.

That distinction reduces tension because the team stops treating every visible mismatch as either a crisis or a personal preference.

## A triage checklist for launch week

Before final signoff, check:

- blocking issues are separated from polish
- repeated issues are grouped by shared cause
- every issue has URL, viewport, and Figma context
- intentional differences are documented
- design ambiguities are resolved before engineering rework starts
- a second verification pass is scheduled after fixes land

For responsive implementation work, [Responsive Website QA from Figma](/articles/pixelay-responsive-website-qa-from-figma/) is another useful follow-up.

## Where Pixelay fits

Pixelay helps teams see design-to-build drift on real pages, which is the hard part many workflows never reach. Once that visibility exists, triage quality determines whether the process feels precise or exhausting.

If your team keeps ending design QA with a messy pile of findings, standardize the triage step around [Pixelay](/pixelay/). The real win is not spotting more differences. It is turning the right differences into faster decisions and cleaner launches.

---

---
type: article
title: CMS Image Publishing Workflow from Figma
description: A practical workflow for exporting, naming, reviewing, and publishing Figma images into a CMS without bloated files or messy handoff.
datePublished: 2026-06-05T00:00:00.000Z
dateModified: 2026-06-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-cms-image-publishing-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-cms-image-publishing-workflow-from-figma.md
---

# CMS Image Publishing Workflow from Figma

Publishing images to a CMS sounds easy until the same avoidable problems keep showing up: the hero is 4 MB, the mobile crop cuts off the product, the developer gets three different filenames for the same asset, and the content team is left guessing which format belongs where.

That is why "just export the images from Figma" is not really a workflow. If your team ships landing pages, changelog posts, case studies, blog content, help center screenshots, or CMS-driven product pages, you need a repeatable handoff from design to publishing.

[TinyImage](/tinyimage/) is useful here because it keeps image compression, format conversion, PDF export, GIF or video export, and batch processing inside Figma. But the real win is not only smaller files. The real win is giving whoever publishes the content a package they can use immediately without re-compressing, renaming, or second-guessing anything.

## What usually breaks between Figma and the CMS

A content editor or marketer does not care that the export looked good on the designer's desktop. They care that:

- the CMS accepts the file size
- the crop still works on the live template
- the filename is understandable
- the asset matches the right page section
- the upload does not slow the page down

The biggest mistake is handing off a pile of image files without context. The second biggest mistake is exporting one giant master file and expecting the browser or CMS to clean it up later.

If you have ever watched a marketing team re-run assets through TinyPNG, rename them in Finder, and manually guess which image belongs to which module, that is the gap this workflow is meant to close.

## Start with publishing roles, not export settings

Before touching TinyImage, decide what the CMS actually needs.

For each image set, answer five questions:

1. Who uploads the files: developer, marketer, content editor, or agency client?
2. Which template will use them: homepage hero, blog inline image, comparison table, help center screenshot, social preview, or docs asset?
3. Does that template need one crop or separate desktop and mobile variants?
4. Which formats are acceptable in the publishing stack: JPG, PNG, WebP, AVIF, SVG, PDF, GIF, or MP4?
5. Is the goal visual fidelity, smallest size, fastest publishing, or all three?

That sounds simple, but most CMS image confusion comes from skipping those decisions until after the exports already exist.

If your team is still deciding between formats, [SVG vs PNG vs WebP for Figma exports](/articles/tinyimage-svg-vs-png-vs-webp-for-figma-exports/) is a useful companion read before you standardize the workflow.

## Build an export package the CMS team can trust

A good CMS handoff package should feel boring in the best possible way. Nobody should need to ask what a file is for.

My preferred structure looks like this:

- one folder per page or campaign
- one subfolder per image role if the page is asset-heavy
- filenames that describe placement, not just design intent
- only the final variants, not every experiment

For example:

- `homepage-hero-desktop.webp`
- `homepage-hero-mobile.webp`
- `feature-grid-analytics-card.png`
- `case-study-quote-portrait.jpg`
- `docs-api-settings-screenshot@2x.png`

This is where TinyImage helps in a very practical way. You can compress inside Figma, batch export multiple assets, and use cleaner naming conventions before anything ever reaches the CMS. If your team already relies on folder-based exports, the tutorial on [exporting images with custom folder paths from Figma using TinyImage](/tutorials/how-to-export-images-with-custom-folder-paths-from-figma-using-tinyimage/) is worth standardizing.

## Pick formats by content type, not by habit

A common bad habit is exporting everything as PNG because it "feels safe." That usually creates larger files than you need.

Instead:

- Use WebP or AVIF for photographic or marketing imagery when the publishing stack supports them.
- Use PNG when transparency matters or when UI screenshots need lossless clarity.
- Use SVG for simple vector graphics and icons.
- Use JPG only when it is the most practical fallback for older workflows or CMS limitations.

The right answer depends on what the image is doing. A product screenshot inside documentation does not need the same treatment as a homepage lifestyle image. A chart image inside a blog post may need sharper text edges than a background photo.

TinyImage is strongest when the designer makes these choices deliberately instead of exporting first and optimizing later. If page speed is the main concern, [How to optimize Figma exports for page speed](/articles/tinyimage-how-to-optimize-figma-exports-for-page-speed/) is the nearest related article in the library.

## Handle crops before the handoff, not after upload

CMS teams often get blamed for "bad crops" that were inevitable from the source file. A single wide desktop asset rarely solves mobile, card, thumbnail, and inline usage at the same time.

If a subject, UI state, or text overlay matters, define that in Figma before export:

- mark the approved focal point
- create separate mobile-safe crops when needed
- avoid embedding essential text into imagery if the crop may change
- review screenshots at the actual aspect ratios used by the CMS template

This matters even more for product screenshots, SaaS changelog images, and help center visuals. The desktop shot that looks generous in Figma can become cramped or unreadable once a CMS card template squeezes it down.

## Review the upload like a publisher would

Before sending files onward, do one final pass that mirrors the real publishing environment.

Check:

- file size against the actual CMS or team budget
- image dimensions against the template's rendered slot
- filename clarity
- crop quality on desktop and mobile
- whether any screenshot text becomes soft after compression
- whether retina exports are truly needed or just assumed

This review is especially important if the same asset family will also be reused in ads, decks, or HTML emails. TinyImage can support all of those outputs, but the CMS package should still be curated for the CMS job first.

If the page uses many source images, it can also help to downsize oversized image fills in the Figma file before exporting. That reduces both Figma bloat and handoff confusion, not just final file weight.

## A repeatable publishing workflow

For teams that publish from Figma into a CMS every week, this is the simplest version of the workflow I would formalize:

1. Map each image to a real CMS slot before export.
2. Decide the final format per slot.
3. Create separate crops where mobile or thumbnails need them.
4. Compress and export with TinyImage in batches.
5. Name files by placement and content, not internal design jargon.
6. Deliver a clean folder package with only approved assets.
7. Spot-check the live page after upload and adjust presets if one template keeps causing trouble.

That last step is underrated. The first upload cycle should improve the next one. If the blog template always needs lighter inline screenshots, or the help center cards always soften text too much, update the preset instead of relearning the lesson next month.

## Where TinyImage fits best

This workflow is most useful for:

- marketing teams publishing frequent CMS updates
- agencies handing assets to non-technical clients
- design teams supporting Webflow, Shopify, Contentful, Sanity, Ghost, or custom CMS stacks
- product marketers maintaining changelogs, docs, and launch pages

TinyImage does not replace judgment about what the CMS should display. What it does is remove the wasteful middle step where good Figma assets become bloated, renamed, recompressed, and misfiled before they ever go live.

If your team wants a cleaner Figma-to-CMS handoff, start by standardizing the naming, crop rules, and format decisions around [TinyImage](/tinyimage/). Once those rules are visible, compression stops being a last-minute cleanup task and becomes part of a publishing workflow that actually scales.

---

---
type: article
title: Product Screenshot Export Workflow for SaaS Landing Pages
description: Export sharper, lighter product screenshots from Figma so SaaS landing pages load fast without turning UI details into mush.
datePublished: 2026-06-05T00:00:00.000Z
dateModified: 2026-06-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-product-screenshot-export-workflow-for-saas-landing-pages/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-product-screenshot-export-workflow-for-saas-landing-pages.md
---

# Product Screenshot Export Workflow for SaaS Landing Pages

Product screenshots look simple until they reach a real landing page. The UI text gets soft, the shadows disappear, the files are too heavy for the hero, and mobile crops cut off the part of the screen that actually sells the feature.

That is why "just export the screenshot from Figma" is usually the wrong workflow for a SaaS marketing team. Product screenshots sit in some of the most important parts of a page: hero sections, feature callouts, comparison blocks, changelog entries, and pricing explainers. They need to look crisp enough to support trust while staying light enough to protect page speed.

[TinyImage](/tinyimage/) helps because it keeps compression, format conversion, PDF export, video export, and batch asset work inside Figma. For screenshot-heavy landing pages, the real value is not only smaller files. It is making screenshot delivery predictable enough that marketing, design, and development stop reprocessing the same assets over and over.

## Why product screenshots are trickier than other marketing images

A screenshot is not a lifestyle image. It often contains:

- small text
- subtle borders and dividers
- chart detail
- empty space that turns blurry fast under aggressive compression
- UI states that need to stay readable on both desktop and mobile

That creates a different export problem from photography or illustration. The team is usually balancing three goals at once:

1. Keep interface text and controls sharp.
2. Avoid huge PNG files that slow the page down.
3. Make sure the crop still tells the story when the layout collapses on smaller screens.

If you treat product screenshots like generic web images, you usually lose on at least one of those three.

## Start with page roles, not export settings

Before you choose a format, decide what each screenshot is doing on the page.

The screenshot in a homepage hero has a different job from the screenshot inside a "how it works" card. One may need atmosphere and polish. The other may need literal readability because users are inspecting the interface.

I like to classify each screenshot into one of four roles:

- `hero`: visual proof that the product looks real and polished
- `feature`: supports a short explanation of one workflow
- `detail`: needs readable UI text or data
- `supporting`: decorative context that can compress more aggressively

Once the role is clear, the export decisions get easier. Hero and detail screenshots usually deserve more fidelity. Supporting screenshots can usually be lighter.

If your team is already managing multiple breakpoints and crops, [Responsive Image Handoff from Figma](/articles/tinyimage-responsive-image-handoff-from-figma/) is the closest companion article.

## Choose format by screenshot behavior

The default choice for many teams is still PNG, mostly because it feels safe. That often creates unnecessarily heavy files for landing pages.

A better way to decide:

- Use PNG when small text, UI chrome, or transparency needs to stay very clean.
- Use WebP when the screenshot is more visual and the page needs lighter assets.
- Use AVIF when you want the smallest possible modern format and the site stack already supports it cleanly.
- Keep JPG as a fallback only when the publishing stack or older workflow makes it necessary.

The important thing is to compare the export visually, not just numerically. A smaller file is not better if button labels, chart labels, or table rows become harder to read.

If your team is still standardizing formats more broadly, [SVG vs PNG vs WebP for Figma Exports](/articles/tinyimage-svg-vs-png-vs-webp-for-figma-exports/) is worth reviewing alongside this workflow.

## Build screenshots for the crop they will actually ship in

Many screenshot problems are really crop problems.

A desktop-sized dashboard screenshot might look perfect in Figma, but the live marketing layout may show only the center third of it on tablet. That means the important part of the story can disappear even if the image itself exported correctly.

Before exporting:

- mark the focal area for each screenshot
- create mobile-safe variants when the crop changes meaningfully
- remove UI chrome that does not support the story
- check whether browser bars, sidebars, or unused whitespace are adding weight without adding clarity

For example, if the point of the section is "view campaign analytics in one place," the screenshot should emphasize the chart and summary cards, not the entire application shell. Cropping with intent usually improves both clarity and file size.

## A practical export pass in TinyImage

Once the frames are ready, the export pass should be boring and repeatable.

My preferred sequence:

1. Duplicate or isolate the approved screenshot frames.
2. Name them by page section, not internal design shorthand.
3. Export a fidelity-first version and a lighter alternative.
4. Compare both at the rendered slot size, not just zoomed in on a large monitor.
5. Keep only the version that still reads clearly at real usage size.

Example names:

- `homepage-hero-dashboard.webp`
- `feature-automation-builder.png`
- `pricing-analytics-detail.png`
- `mobile-hero-dashboard.webp`

TinyImage is especially helpful here because it lets the designer compress and convert without leaving Figma. That shortens the loop where someone would otherwise export a giant PNG, run it through another tool, notice the quality dropped too far, and start again.

## Review screenshot quality like a marketer and a developer

The final review should answer two different questions.

From the marketing side:

- Does the screenshot make the product feel credible?
- Is the right feature or outcome obvious in two seconds?
- Does it still look premium on retina screens?

From the implementation side:

- Is the file size reasonable for the page slot?
- Does the image stay sharp at the rendered size?
- Are the filenames clear enough for handoff?
- Are desktop and mobile variants obvious?

That second part matters more than people think. Developers should not have to guess whether `final-v3-new.png` or `hero-sharp-2.png` is the approved asset. A clean handoff package saves more time than aggressive compression tweaks at the margin.

## A screenshot checklist for launch pages

Use this before shipping a page full of product screenshots:

- Each screenshot has one clear communication job.
- Critical UI text is readable at the real rendered size.
- Desktop and mobile crops are reviewed separately where needed.
- The format matches the screenshot content, not habit.
- Decorative interface chrome is removed if it adds weight but no value.
- File names match page placement.
- The page is checked after implementation so the export settings can improve next time.

## Where TinyImage fits in the handoff

TinyImage does not decide which part of the interface tells the best story. That still takes judgment from design and marketing. What it removes is the wasteful middle layer: manual recompression, format switching in separate tools, and avoidable back-and-forth after the first implementation pass.

If your landing pages rely on product visuals to sell the product, screenshot export deserves its own workflow. Start by standardizing the screenshot roles, crop rules, and file naming around [TinyImage](/tinyimage/), then refine the compression presets from real page results instead of guesswork.

For teams publishing screenshots into CMS-driven pages as well as landing pages, [CMS Image Publishing Workflow from Figma](/articles/tinyimage-cms-image-publishing-workflow-from-figma/) is the best next read.

---

---
type: tutorial
title: How to export Figma to Adobe InDesign (.idml) files with one click using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-05-05T00:00:00.000Z
dateModified: 2026-05-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-adobe-indesign-idml-files-with-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-adobe-indesign-idml-files-with-one-click-using-convertify.md
---

# How to export Figma to Adobe InDesign (.idml) files with one click using Convertify

#### Video Transcript

Today I'm going to be showing you a tutorial on how you can automatically export your designs from Figma to Adobe InDesign using the Convertify Figma plugin. 

To get started, all we need to do is go to our Figma file, go down to the actions icon down here. If you click on that and search for Convertify, under the Figma plugins tab, if you click on the Convertify item, you can run the Figma plugin by clicking on this run button down here. I'd recommend clicking on the save icon next to that, and then we can run the Figma plugin from our saved Figma plugins list. I've already clicked on that save icon, so I'm just going to go to my Figma canvas and right-click anywhere. Then go down to plugins, go down to saved plugins, and click on the Convertify item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically allows you to export your Figma files to other file formats, or you can also import other file formats into Figma. But for today, we're just going to be focusing on exporting our Figma designs to InDesign. We're just going to click on the select box here. Under the export from Figma heading, we're just going to click on the export Figma to Adobe InDesign option. That's going to allow us to export our frames from our Figma file out to an Adobe InDesign file that we can open up in our Adobe InDesign app. All I'm going to do, because I've just got one frame on this page, is click on the export this page button. That's going to automatically convert our design and allow us to download a zip package which contains the IDML file, which is the InDesign file, along with a links folder that contains our image assets.

I'm just going to go ahead and click on the download zip button, and then I'm going to click on the save button and just save that to my desktop. All you need to do is unzip the zip file and open that up. You can see we've got our IDML file here, which will open up in InDesign. I'm just going to double-click on that. When I open that up in InDesign, we've got our editable layers here. These are all editable text layers, and we've got our images that we had in our Figma file as well. You can see that this is all looking really good. We've got all of our content coming over automatically. All of the font styles and all of that stuff, all of the layouts are being migrated over. That's looking really good.

If you're using a page with multiple frames, like this other Figma file over here, we can also export that out to either include all the frames or just certain ones. I've already run the Figma plugin before in this file, so I'm just going to click on the Convertify shortcut in the sidebar here. I'm going to export this out to InDesign as well. Again, we're going to click on the select box. We're going to go down to the export Figma to Adobe InDesign option and select that one. What we can do is actually export selected frames as well. For example, if we only need these few different frames and we don't want the entire page, instead of clicking the export this page button, we can just highlight those parent frames and click on the export selected frames button instead.

If I go ahead and click on that, that's just going to take those four frames and package those up into a new InDesign package. Again, I'm just going to click on the download zip file, and I'm going to save that to my desktop again. If we unzip that zip file and open up the folder again, you'll see that we've got our InDesign file here along with the links folder, which does contain all of the image assets. Make sure you keep that links folder alongside the InDesign file, so those asset references are always accurate. We can double-click on the file to open it up in InDesign again. You can see here that we've got our frames, and you'll notice that it's only exported these four frames. Instead of clicking on the export this page button, which would basically export every single frame at the parent level, we were able to do that before because we just had the one frame in our Figma file. If you do only need a few frames, you can just go ahead and click on those frames, select them in Figma, click on the export selected frames button, and you'll end up with something like this.

That's looking really good as well. You can see we've got our image assets, and we've got all of our editable text in here as well. This is all being positioned to match up with our Figma layout. That's basically it. I just wanted to show you a really quick example of how you can use this export Figma to InDesign option in Convertify to automatically export your Figma designs or Figma layers and frames out of your Figma designs and into InDesign, just in case you needed to get it into that file format for some reason. Also, just a quick note that the Adobe InDesign export feature is currently in beta. While it does work quite well, especially for more basic layouts like this, if you do notice any issues with more complicated layers or more complicated properties, feel free to click on this link here to send an email, and you can attach a link to your Figma file, and we can help you resolve those issues with a Figma plugin update as well. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Take the pink pill
description: Why best practices can be useful, but certainly aren't always true, and why we need to get back to questioning them instead of blindly adopting them.
datePublished: 2026-05-04T00:00:00.000Z
dateModified: 2026-05-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/take-the-pink-pill/
markdownUrl: https://www.hypermatic.com/articles/take-the-pink-pill.md
---

# Take the pink pill

_(This article was adapted from a talk I gave at DesignOps Melbourne in August 2023 called [Take the Pink Pill: why Best Practices are dead ends](https://www.youtube.com/watch?v=4dXCy3XH6YM).)_

I've worked in digital and advertising agencies for a decade, and I was a designer and developer; sort of this weirdo that was really interested in both things when most people are kind of only interested in one or the other.

I used to co-run the DesignOps Melbourne meetup with Ch'an Armstrong, and then I quit the meetup. I quit my job the week after Figma plugins were announced, and decided to start a company building Figma plugins full-time.

That company is called Hypermatic. It used to be called Figmatic, which was named after Illmatic, my favorite Nas album, until I got a very nicely worded letter from the Figma legal team saying I had seven days to rebrand. So I spent seven days reading about ten books on branding, wrote this crazy script to work through all the possible name combinations for the domain, paid far too much money for hypermatic.com, and here we are.

The goal of Hypermatic is really to help designers spend less time crying and more time designing. To help them get out of the corner or under the table wanting to go home, and actually enjoy their job rather than doing all these meaningless tasks.

One reason I've been able to work this way is that there are no meetings, no investors, no Agile, no Jira boards, and basically no distractions. I get to work on whatever I think is most important, because I just say no to everything I don't like. It is amazing how much you can get done, even as a company of one, when you have hours of free time every day to work on whatever you want. You would never go back if you understood how good that reality is.

### Human-centered design without the humans

One thing I wanted to get a quick check on during the talk was how often designers are actually talking to real users.

I think this is a weird paradox. We always claim that we're human-centered designers, and yet I've found that consistently, designers barely talk to any humans. In a weird way, that's a little bit depressing. You could almost think of the sales and marketing team as being more human-centered than everyone else, because they are actually talking to users every day. They understand the intricacies of their problems. The support team probably knows more than any designer actually would, and I think that's a little bit strange.

Being the only person at my company, I've talked with thousands of Figma users from all over the world over the last few years, and I've learned a lot of stuff. The two key takeaways that are very consistent are that everyone is actually doing their best, and nobody has it all figured out yet. Even if you get a peek into all these huge companies that you know, the big tech companies, nobody actually has it quite figured out yet.

So this is the part where we dispense some red pills and follow the white rabbit into The Matrix.

Everyone is familiar with the Matrix: you take the red pill and see these uncomfortable truths, or you take the blue pill and go back to dreamland and wake up forgetting about it all. But if you upscale the 4K Blu-ray, you can see the contents of the blue pill, and it's not something we want to be ingesting. It's this sickly sweet file format that has been lingering around for the last 20 years, and even though we think we've purged it, it's still around in a different form.

What I mean by this blue pill analogy is that we've basically come to accept that drawing rectangles in Figma, which we then hand off to be recreated in a different medium, is normal. We almost don't even think twice about it anymore, and I think that's sort of disturbing.

If you look at The Truman Show analogy, we accept the reality of the world we're presented. A lot of people who are new to the industry just think, "that's the way we've always done it, so we might as well keep doing it that way." Unfortunately, I don't think this is going to be a good approach for the future.

### Best practices and dogma

Talking about best practices, I think you can think about it on two ends.

At one end, you've got extreme dogma, where nothing can be questioned because we know everything is certain. We've reached absolute truths, and there's no point questioning them. Then, on the other extreme, you've got doubt, where nothing can be certain. I'm not wearing this ridiculous uniform, you're not actually all here, and nothing can be certain at all.

Both ends of the extreme are dangerous. On one end, you can't question anything, so you don't do anything. On the other end, nothing can be certain, so why even bother?

I think best practices have gone way too far over to the dogma side, and we need to nudge them back the other way.

Ed Catmull from Pixar described this when they were working on Toy Story 2. "Trust the process" had become this mantra and this crutch that was distracting them from actually engaging with their problems. His position was that we should trust in people, not processes.

But a reason why we have best practices is because it's actually really hard to do new things inside and outside of companies. You barely have any time to do your job. It's unreal how much non-design work, or how much non-interesting work, we actually have to do at our jobs, let alone innovate or take any risk.

The risk factor is important. If you try something new and you fail, you're viewed as an idiot and you'll probably lose your job. Even if you succeed and try something new, you basically gain almost no credit. Whereas if you follow best practices and fail, you followed the best practice, so you're basically just seen as being unlucky and you get to keep your job. If you follow best practices and succeed, you also get to keep your job.

So the risk-reward asymmetry is totally out of whack if you're trying to incentivize people to try anything new.

I'm also interested in where these best practices even come from. We kind of inherit them and don't really think too much about them. This is a very short list, and you could go on forever, but I only had about 30 minutes, so I just briefly covered a few examples.

### What if the experts are wrong?

We can start with experts, and the question: what if they're actually wrong? What if we're just receiving all this wisdom from people we think have it all figured out, and actually they don't?

Flash back to 2000 and Y2K, and there was this internet article about the internet which claimed that it was probably just going to be this passing fad. Everyone was kind of giving up on it. It was only teenagers playing on Neopets, there was no commercial application whatsoever, newspapers would never go online, music would never go online, and so on.

The people who came up with this literally called themselves experts from the Virtual Society project, which was groups of people from 25 universities across the US and Europe. Dozens of people all agreeing that the internet was nothing to worry about, just a passing fad, teenagers playing Neopets or whatever.

In that case, if you had just bet the opposite of exactly everything they predicted would happen, you would be a billionaire.

This also applies to industry standards. We look at "the industry" and assume they must have it figured out. They must know the industry practice. One example of this is the Spotify Model.

Back when I was in agencies, it seemed like every second person I talked to at different agencies was about to adopt the Spotify Model, this tribes model. It was so dumb at the time, but in retrospect, the people who were part of it at Spotify ended up writing an article to clarify it because they got so sick of people copying the model.

They wrote an article saying Spotify doesn't use the Spotify Model, and neither should you. One of the key quotes was that even at the time they wrote it, they weren't doing it. So they put out this big thing on the Spotify Model, and they weren't even practicing it at the time.

That gets to the crux of what I'm trying to discredit about blindly following best practices. In this case, it didn't even exist. There was nothing to copy in the first place.

### Preference falsification and fitting in

Another piece of this is preference falsification.

Preference falsification is essentially misrepresenting your wants under perceived social pressures. What this results in is a public preference that is actually at odds with private preference, and there's no easy way to gauge it. It's slightly different from lying, but it's in the same ballpark.

This extends even further into things like the Asch conformity experiments, where they would take five or six people who were all paid actors, then hire one person who had no idea what was going on and put them at the end of the line. They would ask these basic, obvious questions, and the first five or six would deliberately answer the wrong way.

They would say, yes, that's definitely line C, and then you get to the person at the end who has no idea what's happening. They did this time and time again, and 75% of people knowingly gave at least multiple wrong answers. The reason they gave was that they just wanted to fit in. They didn't want to cause any trouble. They didn't want to be seen as stupid. They actually went against what they could see with their own eyes just to fit in.

I think there's this really weird dynamic with groups, where you go from the wisdom of crowds to the madness of crowds very quickly.

This also extends to innovation. We hear that it's a best practice to get a bunch of people in a room to innovate, as if sitting down for 30 minutes with 12 people is going to lead to anything. But there are all these factors at play that totally derail and sabotage it.

You've got a natural authority hierarchy, with junior people, senior people, maybe the CEO in the room. The meeting is always dominated by a few people who just won't shut up and won't let anyone else talk. There's the fear of social rejection. There's bike shedding, which is the idea that meetings always gravitate towards spending a disproportionate amount of time on the most trivial thing.

The example is that they'll be talking about building a nuclear power plant, and it's an hour meeting, and they spend the first 55 minutes talking about where to put the bike shed out the front. That's where the term comes from.

What ends up happening in these groups is that you actually end up with the average opinion of the average person.

### The average opinion of the average person

This is why every website at some point started looking the same. If you removed all the logos, you wouldn't know which website was which. They have absolutely no brand and no sense of self-identity, and I think this is a reflection of what happens in these brainstorming groups.

One of the strongest things I'm convinced of is that a lot of this can be described through this innate mimetic desire that we all share.

Rene Girard discovered that most of what we desire is actually mimetic and not intrinsic, and that imitation plays a far more pervasive role in our society than anyone else had openly acknowledged. People are intrinsically on autopilot to desire what other people are doing.

It leads to things like the exact same Instagram photos, Airbnbs and interior design that all look identical, car manufacturers that used to be defined by which country they were made in now all looking exactly the same, cafes all looking identical, and brands all falling into the same trap.

You can look at a bunch of toothbrush brands, for example, and every single one is a different brand but they all look the same. Are you telling me every single one of these brands got together, came up with these unique strategies independently of each other at different periods in time, and deployed them all at the same time? There's just no way. They're all copying each other, and this just happens every day.

We've kind of distracted ourselves with all these things to convince ourselves that everything is normal and we don't really have to do much. We've settled on all these absolute truths, so there's no point doing much more. We've got all these best practices that we've learned in university and in the workplace. We've got group consensus on everything, so there's not too much to worry about.

But I think we really do need to get back to the future, and I believe the way out is to accelerate.

We need to get away from the extreme of dogma and go back to the side of doubt, where we can start rethinking some of these things, because everything is not certain. We are not at the end of history.

### React, AI and the worst it will ever be

React kind of proves this.

If you remember when React came out, there was a very strong, visceral negative reaction in the developer community. It was seen as crazy. People were making jokes about Facebook rethinking established best practices, and now you'd be struggling to find a developer who doesn't agree that it was obviously the right direction to move in.

I was trying to talk about this in 2018 when I gave a talk called Insanely Inevitable. I was saying that machine learning, AI and automation were actually super underestimated in design. I remember talking to people afterwards, and half of them were laughing at me, and half of them didn't quite understand what I was saying.

Now I think it's happening.

I made the joke at the time that we really haven't done ourselves any favors to avoid the machines taking over when we basically design the same stuff over and over. All that's changed since then is that we just copy different things.

For example, every tech platform now looks like Linear. Obviously they all independently came up with this in their own group settings when they were innovating, and they all happened to ship it at the same time. Linear just got unlucky with the timing.

Even the reactionary movement to this sameness, the brutalist kind of ideas, in theory kind of works because you're doing the opposite. But you can't just add a negative sign in front of what we're not happy with, because what happens is they also copy each other, and they also all look the same. Again, this mimetic desire is inescapable.

I think AI will essentially be a forcing function to upend some of our best practices. This stuff is not going anywhere, and we can already see from the very early concepts that it's going to be a real game changer.

One example I showed was Galileo AI, founded by a few people from Facebook, where you describe an app UI you want, and it creates real Figma designs and code. You describe an onboarding flow with certain fields, and it gives you the UI. You describe a reading app featuring a certain author and a list of books, and the UI gets designed automatically.

I don't think we need to panic about this, but I do think it's worth acknowledging that we are not at the end. This stuff is coming, and we can't be complacent and expect that nothing is going to change.

This is also the worst that AI is ever going to be. Don't make the mistake of trying to cope with what the future might hold by looking only at what the tools can do right now. There was an article where an illustrator was showing their drawing next to an AI illustration and saying it was obviously a piece of junk, that it would never get better, and therefore it was impossible to create a professional and useful image from a text description.

That failed to see that progress is not linear. In that case, it was exponential. Six months later, you could do illustration, interior photorealistic shots, photorealistic portraits, grayscale sketches, and all this crazy stuff.

The point is that you have to think past the immediate and think about what the exponential version of what we're looking at might be.

AI could be applied to almost everything: UI design, documentation, vectors, design to code, accessibility, video and audio generation, self-improving A/B tests that you can let loose, user testing, insights and summarizing things, design linting, translations, localizations, and all this sort of stuff.

### The distance between design and production should be zero

That brings me to the part where I try to convince you to take the pink pill.

All this AI stuff is here. It's getting tons of investment, and there are lots of very smart people working on it. It's not all here right now, but it's trending in that direction. In the meantime, this is some of the stuff I've been doing.

I believe the distance between design and production should actually be zero.

None of this "bridge the gap" stuff. We don't need more red lines. We don't need diagrams showing where the padding needs to go. Developers don't like that stuff. Just give us the code. We don't want to do that.

We should never send a human to do a machine's job.

What I mean by that is not this idea of replacing jobs or taking over designers' jobs. I don't agree with that at all. I think AI and computers can be very complementary to what we need to do as creative people and as developers. We just want to take the parts that make sense for a computer to handle, and let humans do the creative side, working in a complementary fashion with each other.

This is the idea behind a lot of the Hypermatic plugins. Pitchdeck lets you turn Figma designs into presentations, or export them to PowerPoint, Keynote, Google Slides, PDF or a web presentation. The point is taking the same design from Figma and automatically doing the work that we want a machine to do instead. You can design in Figma, get the benefits of that, and send the result to people on your team who need PowerPoint or Google Slides so they can make content updates there.

Bannerify lets you animate and export production-ready banners from Figma to HTML, GIF or video formats. You can take your Figma frames, animate the banners directly in Figma, export them for platforms like Google Ads, and get production-ready code with the click tags, CSS, JavaScript, HTML and image assets. If you've ever worked on a banner campaign, you know they have about 7,000 rounds of changes. If you're a developer on the other end of that, changing layers around, re-exporting assets and figuring out new CSS positions is a nightmare. The whole point is to make that iteration fast enough that you can animate, export, change and re-export a banner campaign in about 90 seconds.

Commentful is about supercharging Figma comments and gathering feedback from stakeholders without them needing to use Figma. You can take native Figma comments and put them into a custom board, create review links, send them to stakeholders with no accounts or logins, and collect comments directly on the design. The useful part is that feedback is context-specific to the design, so you don't have to manually action all of it. You can apply text and image changes back into Figma instead of trawling through 50,000 Word documents with screenshots pasted into them.

Weblify lets you inspect Figma layers as HTML, Tailwind, React or Vue code with one click. If you're a developer, you don't want more handoff documents. You want to click the element and get the code, preview it, copy it, or download the assets.

Convertify lets you import and export designs into and out of Figma with one click, whether that's Adobe XD, Illustrator, After Effects, Google Docs or other formats. If you need to keep working with clients or teams using other tools, the point is to avoid manually rebuilding everything just because the file format changed.

Emailify is the plugin I'm probably most proud of, because it solves the pain I hated most when I was working in agencies. It lets you design and export responsive, production-ready HTML emails from Figma. Every email marketing platform is a nightmare in its own special way, and this integrates with all of them, which is why a lot of my support comes through that plugin. But the whole idea is the same: build the email in Figma, preview the real HTML, export it, or upload it automatically to email platforms through their APIs, without rebuilding the design somewhere else.

### Think different

To finish on the last shot of The Truman Show: best practices can be useful. We've touched on why they exist, why they can be useful, and why they're so hard to change.

But they certainly aren't always true.

I think we need to get back to being more on the side of questioning them, rather than blindly adopting them.

To take the famous Apple marketing line, we really need to think different.

---

---
type: tutorial
title: How to import Adobe InDesign (.idml) files to Figma with one click using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-05-01T00:00:00.000Z
dateModified: 2026-05-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-import-adobe-indesign-idml-files-to-figma-with-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-import-adobe-indesign-idml-files-to-figma-with-one-click-using-convertify.md
---

# How to import Adobe InDesign (.idml) files to Figma with one click using Convertify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how you can automatically import your files from Adobe InDesign into your Figma files using the Convertify Figma plugin. 

To get started, all we need to do is go to our Figma file, go down to the actions icon at the bottom here. If you click on that and search for Convertify, under the Figma plugins tab, if you click on the Convertify item, you can run the Figma plugin by either clicking on this little run button down here, or you can click on the save icon next to that and run it from your Figma plugins list. I've already clicked on the save icon here. I'm just going to go to my Figma canvas and right-click anywhere. Then go down to plugins, go down to saved plugins, and click on the Convertify item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically gives you a bunch of options to export files from Figma. You can export to different formats or import different files into Figma. All you need to do is click on the select box over here and just scroll down to the import to Figma section and select import Adobe InDesign to Figma, and then we'll be ready to go. Today I've just got two different InDesign files here. I've got a resume with a few different pages in it, and I've also got a brochure with a few different pages in it. We're going to import both of these files and get those into Figma and transfer them out of our InDesign file as editable Figma layers.

What we need to do is basically go to our InDesign files. I've saved these out as InDesign files and also IDML files. This is the important one you want to use. We're not going to be using the INDD files; we're going to be using the IDML files. Just make sure that you're saving out your InDesign files as IDML files. You can do that from the InDesign menu. You just want to go to file, save as, and then just make sure you're exporting it in the InDesign markup language or IDML file. Once you've done that, you basically want to zip up the IDML file along with the links folder. The links folder contains all of your assets. If you've got any image content, that's basically going to get exported into this links folder here. You can see that there's a few different assets in this file here. Those are basically just going to be included in the links folder.

To do that, just go ahead and click on the links folder along with the IDML file that you want to import. Just click on both of those, and then you just want to add those to a zip file. I'm just on Mac, so I'm just going to click on the compress menu item in the right-click menu. That's just going to give me a brand new zip file which contains our links folder and the IDML file. You can leave that as is or just rename it. I'm just going to rename it as resume.zip. Now we're ready to go. We can go back to the Figma file. You can see here it's asking us to drop in a zip file containing the IDML file and the links folder. Now that we've got that zipped up, we can just go ahead and drag and drop that zip file directly into this little drop zone area here and let go. That's going to automatically import all of your InDesign layers into Figma. You can see it was pretty quick. It imported the three pages in about 2 seconds, and we've got all of our content in here as editable Figma layers. You can actually edit this text content. These are all editable and movable. These are all individual layers that we can now manipulate inside of Figma. You can see it's gone ahead and carried all of those across. We've got all of the social icons, all of our content here, the backgrounds, and all that sort of stuff, along with the images that we had a look at a second ago. Those are all being imported really nicely.

That's a basic example of the resume template that we just looked at. Now I'm just going to show you one more file just to show you how to import it again with a few different examples in this one. This one has things like underlines and tables. You can see here there's a bit of a table element going on and reflowing text as well. We're going to import this file now and see what that looks like in Figma. Once again, I'm just going to repeat the same steps that we went through a second ago. This time instead of the resume folder, I'm just going to go to my brochure folder. Again, these have been saved out as IDML files. Importantly, you just want to make sure you've got the IDML, not INDD. You want the IDML file. You just want to zip up that IDML file along with the links folder. Again, this should be automatically included when you save out your InDesign files. Just make sure you've got the links folder there, which is going to include any image assets. Once again, click on the links folder and the IDML file. Zip those up using whatever method you prefer. I'm just going to use the native Mac compression option and zip those up. Then again, you're welcome to rename that if you like. I can just rename that as brochure so I know what it is.

One more time, we're just going to drag and drop that zip file directly into the Figma plugin here in Figma. I'm just going to let go of that. This is going to create a brand new page in Figma. It's going to scope all of those imports onto a new page so it doesn't clutter up the previous page. You can see it's gone ahead and imported all of those pages. You'll notice that it's kind of maintained the page layout. We've got in our InDesign file the first page on its own and then a double page here, double page here, and it's going through and automatically grouping those together. Once again, we can see that these are editable text layers. You can basically edit that content. You can style it however you like. That's just going to be a really easy way to keep editing the content from InDesign in Figma.

As I mentioned, we've got a few different elements here like this table element, which is being imported, and things like these underline elements which are all being imported. This is basically going through and importing all of those layers directly from the InDesign IDML file and then it's allowing you to bring those into Figma and work on them there or as a new starting point for carrying over any work that you've done in InDesign that you want to now load up into Figma and either keep editing or potentially exporting or using for some other purpose.

That's basically it. I just wanted to quickly run through that. This is a brand new feature and it's still in beta. If you do notice any weird quirks, oftentimes they're to do with the differences in supported elements or supported properties. One example of that might be here we've got this little contents panel. If you see the InDesign file, you'll notice that it's flush on the side with the page numbers along with the dotted underline here. The reason for that is it's because it's a native InDesign feature where you can actually have that kind of aligned page numbering going on in the list, whereas Figma doesn't support that exact same feature. You'll notice that it's not quite exactly aligned. It's doing its best to try and figure that out in a way that works in Figma. But again, this is a native feature in InDesign that just isn't going to quite get imported natively in Figma.

There are going to be a few bits and pieces that aren't 100% correct, but hopefully, it gives you a bit of a head start if you've been trying to get your InDesign files loaded up into Figma without manually recreating every single layer from scratch. This should hopefully at least get you 80 to 90% or hopefully more of the way there. We'll leave it there for today. I hope that's been helpful. If you are an Adobe InDesign user and you've been wanting to get your files out of InDesign and into Figma really quickly, this is hopefully an option that you can use to automate that workflow a little bit more and bridge the gap between InDesign and Figma. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Banner Ad Animation Timing Guidelines
description: Plan banner ad animation timing that communicates the offer quickly, respects platform limits, and avoids distracting loops.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-banner-ad-animation-timing-guidelines/
markdownUrl: https://www.hypermatic.com/articles/bannerify-banner-ad-animation-timing-guidelines.md
---

# Banner Ad Animation Timing Guidelines

Good banner animation is not about adding motion everywhere. It is about sequencing the message so the viewer understands the brand, offer, and action in a few seconds.

For teams working on HTML5 banner and display ad production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Bannerify is useful because it helps turn Figma work into animated HTML5, GIF, video, and ad platform-ready banner exports, but the quality still comes from a clear workflow.

### What to Check
- Show the brand and core message early enough that a quick glance still communicates the campaign.
- Keep the CTA visible on the final frame, not only during a short transition.
- Respect platform rules around animation length and loop behavior, including common 30-second limits.
- Use easing and delay intentionally so motion guides attention instead of slowing comprehension.
- Preview each size separately because tight placements may need simpler timing than larger units.

### Common Mistakes
- Beautiful animation that hides the offer until the end wastes the impression.
- Too many loops or constant motion can increase CPU use and create platform compliance risk.
- Copy that animates too quickly may be unreadable on smaller placements.

### A Practical Workflow
Bannerify makes timing easier to adjust inside Figma, so designers can tune animation while reviewing the actual campaign layout instead of rebuilding a timeline elsewhere.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Bannerify tutorial or product workflow, then review [Bannerify](/bannerify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Display Ad Asset Naming Convention for Agencies
description: Use a clearer naming convention for display ad sizes, variants, markets, and formats so campaign handoff is less chaotic.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-display-ad-asset-naming-convention-for-agencies/
markdownUrl: https://www.hypermatic.com/articles/bannerify-display-ad-asset-naming-convention-for-agencies.md
---

# Display Ad Asset Naming Convention for Agencies

Display ad production creates a lot of files very quickly. Without a naming convention, teams end up with final-final ZIPs, unclear sizes, missing variants, and stressful handoff to media buyers.

For teams working on HTML5 banner and display ad production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Bannerify is useful because it helps turn Figma work into animated HTML5, GIF, video, and ad platform-ready banner exports, but the quality still comes from a clear workflow.

### What to Check
- Include campaign name, size, format, language or market, variant, and version in the filename.
- Keep size formatting consistent, such as 300x250 rather than mixing 300-250, 300 by 250, and medium-rectangle.
- Separate source Figma frames, preview files, and trafficking ZIPs clearly.
- Use version numbers only when the team agrees what counts as a new version.
- Document any platform-specific suffixes, such as Google Ads, DCM, or publisher-direct packages.

### Common Mistakes
- File names that only make sense to the designer create handoff risk for media, account, and client teams.
- Changing naming conventions mid-campaign makes QA harder across dozens of assets.
- Ambiguous file names can lead to the wrong creative being uploaded or approved.

### A Practical Workflow
Bannerify can export many variants quickly, so naming needs to be treated as part of production quality rather than admin cleanup at the end.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Bannerify tutorial or product workflow, then review [Bannerify](/bannerify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: HTML5 Ad Click Tag Checklist
description: Prepare HTML5 banner ads with clearer click tag handling, exit behavior, and platform checks before campaign upload.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-html5-ad-click-tag-checklist/
markdownUrl: https://www.hypermatic.com/articles/bannerify-html5-ad-click-tag-checklist.md
---

# HTML5 Ad Click Tag Checklist

Click tags are one of the most common reasons HTML5 ads need revision. The banner may animate perfectly, but if the ad platform cannot detect or control the click-through URL, the creative is not ready to traffic.

For teams working on HTML5 banner and display ad production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Bannerify is useful because it helps turn Figma work into animated HTML5, GIF, video, and ad platform-ready banner exports, but the quality still comes from a clear workflow.

### What to Check
- Confirm the destination URL is controlled by the ad platform when the platform requires a click tag rather than a hard-coded link.
- Use one clear clickable area unless the campaign explicitly needs multiple exits and the platform supports them.
- Check whether the platform expects a specific click tag variable name, exit API, or Google Web Designer-style environment.
- Avoid opening links with custom JavaScript patterns that the ad server cannot track.
- Preview the exported ZIP and test that clicks register before sending the creative to media teams.

### Common Mistakes
- Hard-coded URLs can break tracking or get rejected by platforms that inject the destination at serving time.
- Multiple exits may not be allowed in simpler Google Ads HTML5 uploads.
- A transparent overlay can block hover states or other interactions if it is not tested carefully.

### A Practical Workflow
Bannerify keeps banner production inside Figma, but click behavior should still be checked against the destination ad platform’s rules before upload.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Bannerify tutorial or product workflow, then review [Bannerify](/bannerify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Programmatic Display Creative QA Workflow
description: QA programmatic display creative before launch by checking sizes, animation, file weight, click behavior, fallbacks, and platform requirements.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-programmatic-display-creative-qa-workflow/
markdownUrl: https://www.hypermatic.com/articles/bannerify-programmatic-display-creative-qa-workflow.md
---

# Programmatic Display Creative QA Workflow

Programmatic display campaigns often involve many placements, sizes, variants, and approval layers. A single missed requirement can delay trafficking or cause inconsistent creative across inventory.

For teams working on HTML5 banner and display ad production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Bannerify is useful because it helps turn Figma work into animated HTML5, GIF, video, and ad platform-ready banner exports, but the quality still comes from a clear workflow.

### What to Check
- Confirm every required ad size is present and named consistently.
- Check initial load weight, total package weight, local assets, and whether external references are allowed.
- Review animation duration, loop count, final frame, and whether important text is readable before the animation ends.
- Check click tags, backup images, fallback behavior, and preview screenshots for each size.
- Keep a trafficking-ready handoff package with ZIP files, preview links, destination URLs, and spec notes.

### Common Mistakes
- Programmatic specs vary by platform and publisher, so one “standard” HTML5 export may not fit every buy.
- Large images and web fonts can quietly push packages over size limits.
- A banner that passes design review can still fail media QA if tracking, packaging, or backup assets are wrong.

### A Practical Workflow
Use Bannerify to generate the creative variants, then run QA as a trafficking checklist rather than a purely visual design review.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Bannerify tutorial or product workflow, then review [Bannerify](/bannerify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Responsive Display Ads vs HTML5 Banners
description: Compare responsive display ads with custom HTML5 banners so marketing teams know when automation is enough and when designed creative matters.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-responsive-display-ads-vs-html5-banners/
markdownUrl: https://www.hypermatic.com/articles/bannerify-responsive-display-ads-vs-html5-banners.md
---

# Responsive Display Ads vs HTML5 Banners

Responsive display ads and HTML5 banners solve different problems. Responsive ads are fast and flexible, while custom HTML5 banners give designers more control over layout, sequencing, and campaign-specific storytelling.

For teams working on HTML5 banner and display ad production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Bannerify is useful because it helps turn Figma work into animated HTML5, GIF, video, and ad platform-ready banner exports, but the quality still comes from a clear workflow.

### What to Check
- Use responsive display ads when speed, reach, and simple asset mixing matter more than precise art direction.
- Use HTML5 banners when animation timing, brand control, exact layout, or complex creative variants matter.
- Compare production cost against expected campaign value and placement requirements.
- Consider whether legal, brand, or client approvals require exact previews of each size.
- Check whether the media plan includes placements that need fixed-size HTML5 packages.

### Common Mistakes
- Responsive ads can crop or combine assets in ways that feel off-brand.
- HTML5 banners take more production discipline, especially around file weight and platform specs.
- Choosing one format for every campaign can either waste design time or undercut creative quality.

### A Practical Workflow
Bannerify is strongest when the campaign needs designed HTML5 creative from Figma rather than platform-generated combinations of separate assets.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Bannerify tutorial or product workflow, then review [Bannerify](/bannerify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Async Design Review Workflow for Clients
description: Run asynchronous client design reviews with clearer review windows, feedback prompts, comment triage, and approval follow-up.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-async-design-review-workflow-for-clients/
markdownUrl: https://www.hypermatic.com/articles/commentful-async-design-review-workflow-for-clients.md
---

# Async Design Review Workflow for Clients

Async design review only works when clients know what kind of feedback to give, where to leave it, and when review closes. Otherwise it becomes a slower version of email chaos.

For teams working on design feedback and review around Figma files, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Commentful is useful because it helps turn Figma work into organized comments, external feedback, and clearer client approval loops, but the quality still comes from a clear workflow.

### What to Check
- Set a review window with a clear deadline and scope.
- Tell reviewers whether you want strategic feedback, copy edits, visual comments, or final approval.
- Keep review links simple for non-designers and avoid asking clients to learn internal design tooling.
- Triage comments into required changes, questions, preferences, and out-of-scope notes.
- Send a short resolution summary after updates are made.

### Common Mistakes
- Open-ended async review invites scattered comments and contradictory requests.
- Clients may comment on old versions if links and deadlines are unclear.
- Without a resolution step, approval remains ambiguous.

### A Practical Workflow
Commentful helps teams collect external feedback around Figma work without forcing every client reviewer into a complex design process.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Commentful tutorial or product workflow, then review [Commentful](/commentful/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Client Design Review Portal for Figma Work
description: Give clients a simpler design review portal for Figma work so feedback, approvals, and revisions do not scatter across tools.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-client-design-review-portal-for-figma-work/
markdownUrl: https://www.hypermatic.com/articles/commentful-client-design-review-portal-for-figma-work.md
---

# Client Design Review Portal for Figma Work

Clients do not always need full access to a design file. Often they need a focused review experience where they can see the work, leave feedback, and approve the direction.

For teams working on design feedback and review around Figma files, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Commentful is useful because it helps turn Figma work into organized comments, external feedback, and clearer client approval loops, but the quality still comes from a clear workflow.

### What to Check
- Share only the frames, flows, or deliverables that are ready for review.
- Use plain labels and review instructions so non-designers understand what they are looking at.
- Keep comments connected to the exact screen or element they reference.
- Make approval status visible instead of relying on a buried email reply.
- Keep old review rounds accessible when decisions need to be traced.

### Common Mistakes
- Giving clients too much design-file access can create confusion or accidental comments in the wrong place.
- Email feedback loses visual context quickly.
- Approval is risky when nobody can point to the reviewed version.

### A Practical Workflow
Commentful works as a lightweight review layer for clients who need to respond to Figma work without becoming Figma power users.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Commentful tutorial or product workflow, then review [Commentful](/commentful/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Design Feedback Triage Checklist
description: Triage design feedback by separating bugs, preferences, copy edits, strategic questions, and approval blockers before making changes.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-design-feedback-triage-checklist/
markdownUrl: https://www.hypermatic.com/articles/commentful-design-feedback-triage-checklist.md
---

# Design Feedback Triage Checklist

Not all design feedback has the same weight. Some comments identify real blockers, some are personal preferences, some are copy edits, and some belong in a future phase.

For teams working on design feedback and review around Figma files, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Commentful is useful because it helps turn Figma work into organized comments, external feedback, and clearer client approval loops, but the quality still comes from a clear workflow.

### What to Check
- Group comments by screen, reviewer, theme, and severity.
- Separate approval blockers from minor polish notes.
- Identify duplicate or conflicting feedback before designers start making changes.
- Turn vague comments into specific questions or decisions.
- Document what was accepted, rejected, deferred, or needs clarification.

### Common Mistakes
- Acting on every comment equally can damage the design and waste time.
- Conflicting stakeholder feedback needs a decision owner, not another design pass.
- Untriaged feedback makes handoff harder because nobody knows what changed or why.

### A Practical Workflow
Commentful can centralize comments, but triage turns feedback into an actionable design queue.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Commentful tutorial or product workflow, then review [Commentful](/commentful/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Design Review Meeting Alternatives
description: Reduce unnecessary design review meetings by using clearer async feedback workflows, comment prompts, and approval checkpoints.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-design-review-meeting-alternatives/
markdownUrl: https://www.hypermatic.com/articles/commentful-design-review-meeting-alternatives.md
---

# Design Review Meeting Alternatives

Design review meetings are useful when decisions need discussion. They are wasteful when the team only needs comments, approvals, or small corrections that could happen asynchronously.

For teams working on design feedback and review around Figma files, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Commentful is useful because it helps turn Figma work into organized comments, external feedback, and clearer client approval loops, but the quality still comes from a clear workflow.

### What to Check
- Use async review for straightforward feedback, copy edits, and approval of prepared options.
- Use meetings for ambiguous tradeoffs, conflicting stakeholder needs, or strategic decisions.
- Send review prompts that tell people what kind of feedback is useful.
- Time-box async feedback so projects do not wait indefinitely.
- Follow up with decisions, not another open-ended comment thread.

### Common Mistakes
- Replacing every meeting with async review can hide strategic disagreement.
- Keeping every meeting creates slow review cycles and vague feedback.
- Async comments need structure or they become as messy as meetings.

### A Practical Workflow
Commentful supports a calmer review process by making async comments easier to collect and act on inside the design workflow.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Commentful tutorial or product workflow, then review [Commentful](/commentful/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Stakeholder Comment Management in Figma
description: Manage stakeholder comments in Figma by organizing feedback, resolving duplicates, assigning decisions, and keeping approval moving.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-stakeholder-comment-management-in-figma/
markdownUrl: https://www.hypermatic.com/articles/commentful-stakeholder-comment-management-in-figma.md
---

# Stakeholder Comment Management in Figma

Stakeholder comments can help a design get better, but too many unmanaged comments can slow the project down. Comment management is the difference between useful collaboration and endless review loops.

For teams working on design feedback and review around Figma files, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Commentful is useful because it helps turn Figma work into organized comments, external feedback, and clearer client approval loops, but the quality still comes from a clear workflow.

### What to Check
- Assign an owner for comment triage before review starts.
- Tag or group comments by type: content, visual design, product behavior, legal, accessibility, or technical risk.
- Resolve duplicates and ask for clarification on vague comments.
- Escalate conflicting feedback to a decision owner quickly.
- Summarize resolved changes before asking for final approval.

### Common Mistakes
- Comments without owners become everyone’s problem and nobody’s responsibility.
- Late stakeholder feedback can reopen approved decisions if review windows are not clear.
- Resolved comments should not disappear without a record of the decision.

### A Practical Workflow
Commentful helps make stakeholder feedback easier to collect and organize around the Figma work being reviewed.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Commentful tutorial or product workflow, then review [Commentful](/commentful/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Figma Export Format Comparison for Agencies
description: Compare Figma export formats for agency delivery, including PDF, PowerPoint, Sketch, Adobe formats, images, and editable handoff needs.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-figma-export-format-comparison-for-agencies/
markdownUrl: https://www.hypermatic.com/articles/convertify-figma-export-format-comparison-for-agencies.md
---

# Figma Export Format Comparison for Agencies

Agency deliverables are not all the same. Some clients need editable design files, some need presentation decks, some need production assets, and some only need approved PDFs.

For teams working on design file conversion around Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Convertify is useful because it helps turn Figma work into imports and exports for legacy design files, PDFs, Adobe formats, Sketch, and XD, but the quality still comes from a clear workflow.

### What to Check
- Choose PDF for stable review documents and signoff packages.
- Choose editable design formats when the client or partner needs to continue design work.
- Choose image exports for previews, web assets, and documentation where editability is not needed.
- Choose presentation formats when the file will be presented or edited as slides.
- Document what will and will not remain editable after export.

### Common Mistakes
- Sending the wrong format can create extra revision cycles or client frustration.
- Some formats preserve appearance better than editability, and vice versa.
- Agencies should not promise perfect conversion between every design tool without reviewing the output.

### A Practical Workflow
Convertify gives agencies more format options around Figma, but the delivery choice should match what the client actually needs to do next.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Convertify tutorial or product workflow, then review [Convertify](/convertify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Figma Import Cleanup Checklist
description: Clean up imported design files in Figma by checking layers, fonts, components, images, masks, and editable structure after conversion.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-figma-import-cleanup-checklist/
markdownUrl: https://www.hypermatic.com/articles/convertify-figma-import-cleanup-checklist.md
---

# Figma Import Cleanup Checklist

Importing a file into Figma is only the beginning. Converted files often need cleanup before they become maintainable design sources for a real team.

For teams working on design file conversion around Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Convertify is useful because it helps turn Figma work into imports and exports for legacy design files, PDFs, Adobe formats, Sketch, and XD, but the quality still comes from a clear workflow.

### What to Check
- Check fonts, missing glyphs, line breaks, and text editability.
- Review layer names, groups, masks, clipping, image fills, and flattened artwork.
- Identify reusable elements that should become Figma components.
- Check whether colors and typography should map to local styles or variables.
- Compare the imported file against the original source for fidelity before making edits.

### Common Mistakes
- Imported files can look correct visually while being painful to edit.
- Flattened text or images may block localization, responsive edits, and developer handoff.
- Skipping cleanup can spread messy imported structures into the team library.

### A Practical Workflow
Convertify helps get design work into or out of Figma, and the cleanup checklist turns that conversion into a usable file.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Convertify tutorial or product workflow, then review [Convertify](/convertify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Illustrator to Figma File Preparation Checklist
description: Prepare Illustrator files for cleaner Figma import by checking artboards, fonts, outlines, linked assets, effects, and vector complexity.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-illustrator-to-figma-file-preparation-checklist/
markdownUrl: https://www.hypermatic.com/articles/convertify-illustrator-to-figma-file-preparation-checklist.md
---

# Illustrator to Figma File Preparation Checklist

Illustrator files can contain beautiful vector artwork, but not every AI file is ready to become an editable Figma design. Preparation improves the odds of a clean conversion.

For teams working on design file conversion around Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Convertify is useful because it helps turn Figma work into imports and exports for legacy design files, PDFs, Adobe formats, Sketch, and XD, but the quality still comes from a clear workflow.

### What to Check
- Organize artboards and remove unused artwork outside the intended export area.
- Package or embed linked images so the conversion does not lose assets.
- Decide whether text should stay editable or be outlined for visual fidelity.
- Simplify overly complex paths when editability and file performance matter.
- Check gradients, masks, clipping paths, and effects after the file reaches Figma.

### Common Mistakes
- Outlined text preserves appearance but removes copy editability.
- Extremely complex vectors can slow Figma files down.
- Missing linked assets can turn a promising import into a broken reference file.

### A Practical Workflow
Convertify helps bridge Illustrator and Figma, but file preparation determines how useful the imported design will be.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Convertify tutorial or product workflow, then review [Convertify](/convertify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: PDF Design File Extraction Workflow
description: Extract usable design assets from PDF files into Figma with realistic expectations for text, images, vectors, and layout cleanup.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-pdf-design-file-extraction-workflow/
markdownUrl: https://www.hypermatic.com/articles/convertify-pdf-design-file-extraction-workflow.md
---

# PDF Design File Extraction Workflow

PDFs are often the only source file a team receives, but a PDF is not the same as an editable design file. Extraction is about recovering useful structure from a delivery format.

For teams working on design file conversion around Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Convertify is useful because it helps turn Figma work into imports and exports for legacy design files, PDFs, Adobe formats, Sketch, and XD, but the quality still comes from a clear workflow.

### What to Check
- Identify whether the PDF contains live text, vector artwork, raster images, or scanned pages.
- Check font substitution, text grouping, image resolution, and page dimensions after import.
- Separate assets that need editing from pages that only need visual reference.
- Rebuild repeated elements as Figma components when the PDF is used as a starting point.
- Compare key pages against the original PDF before using the imported file downstream.

### Common Mistakes
- Scanned PDFs may behave like images, not editable design files.
- PDF text can import in fragmented lines or groups that need cleanup.
- Visual fidelity and editability often trade off, so choose based on the project goal.

### A Practical Workflow
Convertify can help pull PDF content into Figma, while cleanup turns the extraction into practical design material.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Convertify tutorial or product workflow, then review [Convertify](/convertify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: PSD to Figma Migration Workflow
description: Move Photoshop PSD design files into a Figma workflow with clearer expectations for layers, text, images, effects, and cleanup.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-psd-to-figma-migration-workflow/
markdownUrl: https://www.hypermatic.com/articles/convertify-psd-to-figma-migration-workflow.md
---

# PSD to Figma Migration Workflow

PSD to Figma migration is rarely perfect because Photoshop and Figma are built around different mental models. The goal is not only to preserve appearance; it is to recover a file the design team can work with.

For teams working on design file conversion around Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Convertify is useful because it helps turn Figma work into imports and exports for legacy design files, PDFs, Adobe formats, Sketch, and XD, but the quality still comes from a clear workflow.

### What to Check
- Audit PSD layers before conversion and remove obvious unused or hidden clutter when possible.
- Check editable text, smart objects, masks, blend modes, and raster effects after import.
- Decide which parts need to become components and which can remain static artwork.
- Replace Photoshop-specific effects with Figma-friendly equivalents where needed.
- Save the original PSD for reference until the Figma file passes review.

### Common Mistakes
- Raster-heavy PSDs may not become clean editable Figma structures automatically.
- Blend modes and effects can change subtly during conversion.
- A converted file may need design-system cleanup before it belongs in the main Figma library.

### A Practical Workflow
Convertify supports the migration step, while the team still needs a cleanup and QA workflow to make the resulting Figma file trustworthy.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Convertify tutorial or product workflow, then review [Convertify](/convertify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: App Store Screenshot Localization Workflow in Figma
description: Localize App Store and product listing screenshots in Figma with spreadsheet-ready copy, market variants, and layout QA.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-app-store-screenshot-localization-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-app-store-screenshot-localization-workflow-in-figma.md
---

# App Store Screenshot Localization Workflow in Figma

Localized app store screenshots are marketing assets, not just translated images. Each market may need different copy length, legal claims, device frames, badges, and product positioning.

For teams working on content management and localization inside Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” CopyDoc is useful because it helps turn Figma work into structured text exports, imports, localization updates, and copy review workflows, but the quality still comes from a clear workflow.

### What to Check
- Separate screenshot text from decorative design elements so translations can be managed cleanly.
- Prepare a spreadsheet with one row or column structure per locale, screen, and text field.
- Plan for text expansion, right-to-left languages, different currency formats, and regional claims.
- Review localized screenshots with native speakers before export.
- Keep device sizes and app store requirements visible in the Figma file.

### Common Mistakes
- Translated text can overflow a carefully balanced English layout.
- Screenshots may need market-specific proof or compliance wording, not literal translation.
- Manual copy-paste across dozens of screenshots creates avoidable errors.

### A Practical Workflow
CopyDoc can connect Figma screenshot text with spreadsheet-based localization review, making repeated screenshot updates less painful.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant CopyDoc tutorial or product workflow, then review [CopyDoc](/copydoc/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Design System Copy Tokens in Figma
description: Use copy tokens and reusable strings in Figma to keep labels, CTAs, messages, and product language more consistent.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-design-system-copy-tokens-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-design-system-copy-tokens-in-figma.md
---

# Design System Copy Tokens in Figma

Design systems usually focus on visual tokens, but product language benefits from reuse too. Copy tokens help teams standardize recurring strings such as CTAs, labels, empty states, and status messages.

For teams working on content management and localization inside Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” CopyDoc is useful because it helps turn Figma work into structured text exports, imports, localization updates, and copy review workflows, but the quality still comes from a clear workflow.

### What to Check
- Identify repeated strings that should not be rewritten every time, such as Save, Cancel, Upgrade, Learn more, or Contact support.
- Define where flexible copy is allowed and where consistent terminology matters.
- Document tone rules for system messages, destructive actions, errors, and upgrade prompts.
- Track approved strings separately from exploratory writing.
- Review copy tokens alongside components so language and UI behavior stay aligned.

### Common Mistakes
- Over-standardizing copy can make interfaces feel robotic where context matters.
- Under-standardizing copy creates inconsistent product language and localization overhead.
- Designers may detach or overwrite strings if the workflow is not easy to use.

### A Practical Workflow
CopyDoc can help teams export and maintain repeated Figma text so copy tokens become reviewable, reusable content rather than scattered layers.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant CopyDoc tutorial or product workflow, then review [CopyDoc](/copydoc/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Figma Microcopy Review Workflow
description: Review microcopy in Figma across buttons, empty states, tooltips, forms, errors, and onboarding screens before product launch.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-microcopy-review-workflow/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-microcopy-review-workflow.md
---

# Figma Microcopy Review Workflow

Microcopy shapes the experience in tiny moments: labels, helper text, error messages, confirmation states, empty states, and CTA wording. These strings are easy to overlook because they are scattered across the design.

For teams working on content management and localization inside Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” CopyDoc is useful because it helps turn Figma work into structured text exports, imports, localization updates, and copy review workflows, but the quality still comes from a clear workflow.

### What to Check
- Audit buttons, forms, errors, success messages, tooltips, settings labels, and onboarding copy together.
- Check whether tone stays consistent across high-stress and low-stress moments.
- Make error messages actionable, not just descriptive.
- Review copy length inside real component constraints and localized expansion scenarios.
- Confirm product, support, legal, and localization stakeholders have reviewed the strings they own.

### Common Mistakes
- Microcopy often gets reviewed screen by screen instead of as a system.
- A good-looking Figma mockup can hide copy that is confusing once the user is under pressure.
- Shorter copy is not automatically better if it removes context users need.

### A Practical Workflow
CopyDoc helps pull scattered Figma text into a structured review workflow, then push approved changes back into the design.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant CopyDoc tutorial or product workflow, then review [CopyDoc](/copydoc/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Product Marketing Screenshot Copy Workflow
description: Manage product marketing screenshot copy in Figma so launch pages, ads, docs, and app store assets stay accurate.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-product-marketing-screenshot-copy-workflow/
markdownUrl: https://www.hypermatic.com/articles/copydoc-product-marketing-screenshot-copy-workflow.md
---

# Product Marketing Screenshot Copy Workflow

Product marketing screenshots often carry claims, feature names, UI text, captions, and localized messages. If the copy is not managed, screenshots go stale quickly after product changes.

For teams working on content management and localization inside Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” CopyDoc is useful because it helps turn Figma work into structured text exports, imports, localization updates, and copy review workflows, but the quality still comes from a clear workflow.

### What to Check
- Keep screenshot source text separate from one-off decorative layers where possible.
- Track which screenshots belong to launch pages, ads, help docs, app stores, and sales decks.
- Review feature names, legal claims, pricing references, and dates before export.
- Plan variants for audiences, regions, personas, or campaign messages.
- Use realistic product states so screenshots do not misrepresent the experience.

### Common Mistakes
- Screenshots can outlive the launch and continue showing outdated UI or claims.
- Localized screenshot copy may need cultural adaptation, not just translation.
- Manual copy updates across assets almost always miss something.

### A Practical Workflow
CopyDoc makes screenshot copy easier to export, review, update, and re-import across a large set of Figma marketing assets.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant CopyDoc tutorial or product workflow, then review [CopyDoc](/copydoc/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: UX Copy Version Control in Figma
description: Manage UX copy changes in Figma with clearer version control, review ownership, approval status, and implementation handoff.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-ux-copy-version-control-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-ux-copy-version-control-in-figma.md
---

# UX Copy Version Control in Figma

UX copy changes are easy to lose when they happen directly inside design files. A button label changes, an error message gets rewritten, and nobody knows which version was approved.

For teams working on content management and localization inside Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” CopyDoc is useful because it helps turn Figma work into structured text exports, imports, localization updates, and copy review workflows, but the quality still comes from a clear workflow.

### What to Check
- Track the status of important strings: draft, reviewed, approved, implemented, or deprecated.
- Keep old copy visible long enough to understand what changed and why.
- Separate exploratory copy from final UI strings that developers should implement.
- Assign ownership for product, legal, localization, and brand-sensitive language.
- Export copy for review when the file contains too many strings to audit manually.

### Common Mistakes
- Comments are useful for discussion but weak as a long-term source of truth.
- Copy hidden in component instances can be easy to miss during review.
- Localization can reopen copy decisions if approved strings were not tracked clearly.

### A Practical Workflow
CopyDoc gives teams a structured way to export, review, update, and re-import Figma text so copy version control does not depend on memory.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant CopyDoc tutorial or product workflow, then review [CopyDoc](/copydoc/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Confidential Design File Sharing Workflow
description: Share confidential design files with clients, contractors, or stakeholders using clearer access, password, format, and review rules.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-confidential-design-file-sharing-workflow/
markdownUrl: https://www.hypermatic.com/articles/crypto-confidential-design-file-sharing-workflow.md
---

# Confidential Design File Sharing Workflow

Confidential design work needs a deliberate sharing workflow. The question is not only who can view it, but what they can download, forward, edit, screenshot, or misunderstand.

For teams working on secure sharing for Figma designs and prototypes, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Crypto is useful because it helps turn Figma work into password-protected links, secure review assets, and private design handoff flows, but the quality still comes from a clear workflow.

### What to Check
- Classify the work: public, internal, client-confidential, NDA, or highly sensitive.
- Choose the least-permissive format that still supports the review task.
- Use password protection where link forwarding risk matters.
- Share only the necessary frames, pages, or PDFs.
- Document when access should be removed and who owns that cleanup.

### Common Mistakes
- Over-sharing a full Figma file can expose unrelated client or roadmap work.
- PDFs can be safer for static review but worse for prototype fidelity.
- Security policies fail when they are too cumbersome for normal client review.

### A Practical Workflow
Crypto gives design teams a Figma-friendly secure sharing option when confidentiality matters but the review still needs to be easy.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Crypto tutorial or product workflow, then review [Crypto](/crypto/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Figma Access Control Checklist for Client Work
description: Review Figma access control before sharing client work, including permissions, reviewers, downloads, prototypes, PDFs, and cleanup.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-figma-access-control-checklist-for-client-work/
markdownUrl: https://www.hypermatic.com/articles/crypto-figma-access-control-checklist-for-client-work.md
---

# Figma Access Control Checklist for Client Work

Client work often passes through agencies, contractors, internal teams, and external stakeholders. Access control keeps that collaboration from turning into accidental oversharing.

For teams working on secure sharing for Figma designs and prototypes, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Crypto is useful because it helps turn Figma work into password-protected links, secure review assets, and private design handoff flows, but the quality still comes from a clear workflow.

### What to Check
- Review who has file access, project access, team access, and link access before sharing.
- Separate edit access from review access wherever possible.
- Check whether prototypes, PDFs, or password-protected links are safer than file access.
- Remove access for old reviewers, former contractors, or completed project phases.
- Document sharing decisions for NDA or procurement-sensitive clients.

### Common Mistakes
- Team-level permissions can expose more than one client project if files are organized poorly.
- Convenience links may outlive the review they were created for.
- Access cleanup is easy to forget after delivery unless someone owns it.

### A Practical Workflow
Crypto adds another sharing option when client review needs password protection without granting broad file access.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Crypto tutorial or product workflow, then review [Crypto](/crypto/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Password Protected Client Portal Alternative
description: Compare client portals with password-protected Figma design review links for simpler secure client handoff.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-password-protected-client-portal-alternative/
markdownUrl: https://www.hypermatic.com/articles/crypto-password-protected-client-portal-alternative.md
---

# Password Protected Client Portal Alternative

Client portals can be useful, but they may be too heavy for a focused design review. Sometimes the better workflow is a password-protected review link connected directly to the design asset.

For teams working on secure sharing for Figma designs and prototypes, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Crypto is useful because it helps turn Figma work into password-protected links, secure review assets, and private design handoff flows, but the quality still comes from a clear workflow.

### What to Check
- Use a portal when clients need many files, ongoing account access, billing, tickets, or long-term collaboration.
- Use a protected design link when the task is focused review, approval, or secure preview.
- Check whether reviewers need login accounts, passwords, download access, or only visual review.
- Consider how easy it will be to revoke access after the project ends.
- Keep the review experience simple enough that security does not block feedback.

### Common Mistakes
- A client portal can create friction for one-off design approvals.
- A simple link can be too loose for confidential work if it is not protected.
- The safest workflow is the one reviewers will actually use correctly.

### A Practical Workflow
Crypto works well when the team wants secure design sharing without building a full client portal around every review.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Crypto tutorial or product workflow, then review [Crypto](/crypto/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Secure PDF Review Workflow for Designers
description: Use secure PDF review workflows for design approvals that need password protection, controlled distribution, and stable visual output.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-secure-pdf-review-workflow-for-designers/
markdownUrl: https://www.hypermatic.com/articles/crypto-secure-pdf-review-workflow-for-designers.md
---

# Secure PDF Review Workflow for Designers

PDF review is useful when stakeholders need a stable snapshot of design work. It is especially useful when the design should not expose the whole Figma file or interactive prototype.

For teams working on secure sharing for Figma designs and prototypes, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Crypto is useful because it helps turn Figma work into password-protected links, secure review assets, and private design handoff flows, but the quality still comes from a clear workflow.

### What to Check
- Choose PDF when visual fidelity and a fixed review artifact matter more than interactivity.
- Add password protection when the PDF contains confidential or client-sensitive material.
- Include page numbers, version names, and review dates so comments refer to the right artifact.
- Share the PDF through a controlled channel and avoid forwarding unrestricted copies.
- Archive the reviewed PDF with the approval decision.

### Common Mistakes
- PDF review can hide responsive or interactive behavior that matters to the final product.
- A password-protected PDF is still only as secure as the password-sharing process.
- Reviewers may comment on an old PDF if versions are not clearly labeled.

### A Practical Workflow
Crypto can help when Figma designs need to become password-protected review assets without exposing the full design file.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Crypto tutorial or product workflow, then review [Crypto](/crypto/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Secure Prototype Sharing Checklist
description: Share Figma prototypes more securely by checking link access, reviewer scope, password protection, downloads, and NDA context.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-secure-prototype-sharing-checklist/
markdownUrl: https://www.hypermatic.com/articles/crypto-secure-prototype-sharing-checklist.md
---

# Secure Prototype Sharing Checklist

Prototype sharing can feel harmless because it is “just a preview,” but prototypes may still reveal product plans, client work, unreleased UI, pricing, data, or brand strategy.

For teams working on secure sharing for Figma designs and prototypes, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Crypto is useful because it helps turn Figma work into password-protected links, secure review assets, and private design handoff flows, but the quality still comes from a clear workflow.

### What to Check
- Limit the prototype to the flows reviewers actually need to see.
- Check who can open the link and whether access should be password-protected.
- Avoid exposing unrelated pages, internal notes, or hidden future work.
- Decide whether screenshots, PDFs, or a prototype are the safest review format.
- Remove or rotate access when the review period ends.

### Common Mistakes
- A prototype link can travel beyond the intended reviewer group.
- Internal comments or hidden frames may reveal more context than expected.
- Security review should happen before the link is shared, not after a concern appears.

### A Practical Workflow
Crypto gives teams a safer path for password-protected prototype sharing when standard link permissions are not enough.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Crypto tutorial or product workflow, then review [Crypto](/crypto/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Email Accessibility Checklist for Figma Designers
description: Design more accessible HTML emails in Figma by checking reading order, contrast, alt text, link clarity, and mobile legibility before export.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-email-accessibility-checklist-for-figma-designers/
markdownUrl: https://www.hypermatic.com/articles/emailify-email-accessibility-checklist-for-figma-designers.md
---

# Email Accessibility Checklist for Figma Designers

Accessible email design starts before the HTML is generated. If the Figma file is built as one giant image, uses low-contrast text, hides important content inside decorative graphics, or depends on tiny mobile copy, the exported email will inherit those problems.

For teams working on HTML email production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Emailify is useful because it helps turn Figma work into responsive, production-ready HTML email exports, but the quality still comes from a clear workflow.

### What to Check
- Write meaningful alt text for informative images and mark decorative images as empty or decorative where your sending workflow supports it.
- Avoid image-only emails for critical messages. Live text is easier to read, translate, search, and resize than flattened text inside a JPG or PNG.
- Check color contrast for body text, buttons, links, and legal copy, especially on tinted backgrounds and dark mode variants.
- Make link text descriptive. “View pricing” is clearer than “click here,” and it gives screen reader users more context.
- Keep the reading order logical from top to bottom. Multi-column desktop layouts should still make sense when stacked on mobile.

### Common Mistakes
- Tiny disclaimers that look acceptable in Figma can become unreadable on mobile email clients.
- Buttons made entirely from images can lose meaning if images are blocked.
- Dark mode can invert colors or backgrounds in ways that damage contrast, so do not rely on one screenshot preview.

### A Practical Workflow
Use Emailify after the accessibility decisions are clear in Figma: live text where possible, sensible image roles, readable hierarchy, and button/link states that do not depend on fragile visual tricks.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Emailify tutorial or product workflow, then review [Emailify](/emailify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Email Preheader Text Best Practices for Figma Campaigns
description: Plan email preheader text in Figma so subject lines, preview snippets, and campaign content work together before HTML export.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-email-preheader-text-best-practices-for-figma-campaigns/
markdownUrl: https://www.hypermatic.com/articles/emailify-email-preheader-text-best-practices-for-figma-campaigns.md
---

# Email Preheader Text Best Practices for Figma Campaigns

Preheader text is one of the most valuable pieces of email copy, but it is often added at the last minute outside the design process. That creates a mismatch between the subject line, inbox preview, and the actual campaign story.

For teams working on HTML email production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Emailify is useful because it helps turn Figma work into responsive, production-ready HTML email exports, but the quality still comes from a clear workflow.

### What to Check
- Write the preheader while designing the hero section, not after the email is already approved.
- Use it to extend the subject line rather than repeat it. The inbox preview should add context, urgency, or a reason to open.
- Keep the most important words near the front because preview length changes across email clients and devices.
- Avoid filler text such as “View this email in your browser” appearing before the real preheader.
- Review subject line, preheader, sender name, and hero headline together as one conversion path.

### Common Mistakes
- A strong Figma design cannot rescue an inbox preview that says nothing useful.
- Overly long preheaders get truncated, and truncation can change the meaning of a sentence.
- Hidden preview text should not create strange spacing or visible artifacts in the email body.

### A Practical Workflow
Treat preheader text as campaign UX copy. Emailify can handle the Figma-to-HTML production flow, but the copy decision belongs in the same review cycle as the email design.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Emailify tutorial or product workflow, then review [Emailify](/emailify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Email Template Governance for Marketing Teams
description: Keep Figma email templates consistent, approved, and production-ready with a simple governance workflow for marketing teams.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-email-template-governance-for-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-email-template-governance-for-marketing-teams.md
---

# Email Template Governance for Marketing Teams

Email template governance sounds heavier than it needs to be. In practice, it means everyone knows which modules are approved, who can change them, and how a campaign moves from Figma design to tested HTML.

For teams working on HTML email production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Emailify is useful because it helps turn Figma work into responsive, production-ready HTML email exports, but the quality still comes from a clear workflow.

### What to Check
- Define which Figma components are approved for production and which are experimental.
- Name modules by function, such as hero, product grid, testimonial, editorial block, footer, and legal section.
- Assign ownership for brand, copy, compliance, and final email testing.
- Keep a changelog for template updates so old campaigns do not accidentally use outdated modules.
- Document which email clients or platforms the template system is expected to support.

### Common Mistakes
- A shared Figma file is not governance by itself; without ownership, people duplicate and mutate modules anyway.
- Small module edits can create large rendering differences in HTML email clients.
- If nobody owns the template library, marketers eventually rebuild one-off layouts under deadline pressure.

### A Practical Workflow
Use Emailify as the production bridge after template governance is clear. Approved modules in Figma can then become repeatable HTML email building blocks instead of one-off designs.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Emailify tutorial or product workflow, then review [Emailify](/emailify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Figma Email QA Before ESP Upload
description: Run a practical email QA pass before uploading exported HTML from Figma into your ESP or marketing automation platform.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-figma-email-qa-before-esp-upload/
markdownUrl: https://www.hypermatic.com/articles/emailify-figma-email-qa-before-esp-upload.md
---

# Figma Email QA Before ESP Upload

The moment before an email is uploaded to an ESP is the worst time to discover broken links, missing alt text, unreadable mobile copy, or a layout that depends on unsupported styling. A pre-upload QA pass catches the obvious failures earlier.

For teams working on HTML email production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Emailify is useful because it helps turn Figma work into responsive, production-ready HTML email exports, but the quality still comes from a clear workflow.

### What to Check
- Confirm every CTA URL, image link, unsubscribe link, preference link, and legal link is final.
- Check image dimensions, file size, alt text, and whether any critical copy is embedded in an image.
- Preview mobile stacking, button tap targets, spacing around sections, and long subject/preheader combinations.
- Verify merge tags or personalization fields are correct for the destination ESP.
- Test the exported HTML in the email clients that matter most to your audience before scheduling.

### Common Mistakes
- ESP editors may rewrite or sanitize parts of the HTML, so do not assume the uploaded version still matches the export.
- A missing unsubscribe or preference link can be more serious than a visual bug.
- Personalization tokens can look fine in Figma and still fail in the sending platform if syntax is wrong.

### A Practical Workflow
Emailify helps create the HTML from Figma, but QA should continue through the ESP upload step. The final source of truth is the tested email in the sending environment.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Emailify tutorial or product workflow, then review [Emailify](/emailify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Transactional Email Design Workflow in Figma
description: Create transactional email designs in Figma with clearer hierarchy, reusable modules, fallback-safe layouts, and production-ready HTML constraints.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-transactional-email-design-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/emailify-transactional-email-design-workflow-in-figma.md
---

# Transactional Email Design Workflow in Figma

Transactional emails are not marketing blasts. Receipts, password resets, account alerts, and onboarding messages need to be clear, reliable, and easy to scan under pressure. That changes the design priorities in Figma.

For teams working on HTML email production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Emailify is useful because it helps turn Figma work into responsive, production-ready HTML email exports, but the quality still comes from a clear workflow.

### What to Check
- Lead with the user’s task: reset the password, confirm the order, verify the account, or understand the status change.
- Keep brand expression restrained. Transactional emails should feel trustworthy before they feel promotional.
- Design reusable modules for status labels, order summaries, support links, legal copy, and secondary CTAs.
- Plan dynamic content states such as long names, missing images, multi-item orders, or localized strings.
- Use plain, accessible button labels and make sure important information is not locked inside images.

### Common Mistakes
- Over-designed transactional emails can bury the action the user came for.
- Dynamic order data can break tidy static layouts if the Figma file only uses perfect sample content.
- Legal or support details often change, so they should be treated as maintainable content blocks.

### A Practical Workflow
Emailify is useful when the transactional email design system is already disciplined in Figma: reusable structure, realistic data, and HTML-friendly layout decisions before export.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Emailify tutorial or product workflow, then review [Emailify](/emailify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Dark Mode Favicon Workflow for Websites
description: Plan dark mode favicons and website icons with enough contrast, fallback thinking, and visual testing across browser themes.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-dark-mode-favicon-workflow-for-websites/
markdownUrl: https://www.hypermatic.com/articles/favvy-dark-mode-favicon-workflow-for-websites.md
---

# Dark Mode Favicon Workflow for Websites

A favicon that looks crisp on a light browser tab can disappear in dark mode, and the reverse is also true. Dark mode favicon planning is a small detail that affects brand polish.

For teams working on favicon and app icon production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Favvy is useful because it helps turn Figma work into favicon, app icon, manifest, and website icon packages, but the quality still comes from a clear workflow.

### What to Check
- Test the icon on light and dark browser UI backgrounds.
- Use enough contrast around the mark so it remains visible at 16x16 and 32x32 sizes.
- Consider whether SVG favicons, media queries, or separate assets make sense for the implementation.
- Check app icons and PWA icons separately because they may use backgrounds or masks differently.
- Keep fallback icons for contexts that do not support theme-aware favicon behavior.

### Common Mistakes
- A transparent dark logo can vanish on dark browser chrome.
- Adding a background shape improves contrast but can change brand feel.
- Theme-aware favicons need implementation support, not just design intent.

### A Practical Workflow
Favvy can generate the icon package from Figma, while the dark mode workflow helps decide whether the source artwork needs contrast, padding, or alternate variants.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Favvy tutorial or product workflow, then review [Favvy](/favvy/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Favicon Cache Busting Checklist
description: Fix stale favicons after a website icon update by checking browser cache, filenames, manifests, HTML links, and deployment paths.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-favicon-cache-busting-checklist/
markdownUrl: https://www.hypermatic.com/articles/favvy-favicon-cache-busting-checklist.md
---

# Favicon Cache Busting Checklist

Favicon updates are famous for looking broken even after the file has changed. Browsers, operating systems, pinned tabs, manifests, and search previews can all cache icons aggressively.

For teams working on favicon and app icon production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Favvy is useful because it helps turn Figma work into favicon, app icon, manifest, and website icon packages, but the quality still comes from a clear workflow.

### What to Check
- Change filenames or add versioned paths when replacing important favicon files.
- Update HTML link tags, manifest references, and any pinned-tab or platform-specific icon paths.
- Confirm the deployed files are in the expected public path and not only updated locally.
- Test in a private window, another browser, and a device that has not cached the old icon.
- Check PWA install icons separately from browser tab favicons.

### Common Mistakes
- Replacing favicon.ico alone may not update Apple touch icons, manifest icons, or pinned tabs.
- CDNs and service workers can cache old icon files even when the browser cache is cleared.
- Search engines and social previews may update on their own schedule.

### A Practical Workflow
Favvy can generate the updated icon package, but cache busting and path updates are what make the new favicon actually appear for users.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Favvy tutorial or product workflow, then review [Favvy](/favvy/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Maskable Icon Checklist for PWAs
description: Prepare maskable PWA icons with the right safe area, manifest purpose, sizes, backgrounds, and visual testing before launch.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-maskable-icon-checklist-for-pwas/
markdownUrl: https://www.hypermatic.com/articles/favvy-maskable-icon-checklist-for-pwas.md
---

# Maskable Icon Checklist for PWAs

Maskable icons help progressive web apps look better on Android devices because the system can crop the icon into different shapes. That only works if the artwork respects the safe area.

For teams working on favicon and app icon production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Favvy is useful because it helps turn Figma work into favicon, app icon, manifest, and website icon packages, but the quality still comes from a clear workflow.

### What to Check
- Create a high-resolution square source, commonly 512x512 or larger, before generating smaller sizes.
- Keep important artwork inside the maskable safe area so adaptive shapes do not crop it off.
- Add manifest icons with a purpose that includes maskable where the PWA needs adaptive icon support.
- Test the icon against circle, rounded square, squircle, and other mask previews.
- Use enough background or padding so the icon does not feel cramped on home screens.

### Common Mistakes
- A normal favicon can look broken when used as a maskable PWA icon.
- Using purpose: maskable without a regular fallback can create compatibility problems in some contexts.
- Tiny details in a brand mark often disappear at app icon sizes.

### A Practical Workflow
Favvy helps generate favicon and app icon packages from Figma, including the kinds of assets teams need to review for PWA install contexts.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Favvy tutorial or product workflow, then review [Favvy](/favvy/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Safari Pinned Tab Icon Workflow
description: Prepare Safari pinned tab icons from Figma with the right simplified shape, monochrome treatment, mask behavior, and site metadata.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-safari-pinned-tab-icon-workflow/
markdownUrl: https://www.hypermatic.com/articles/favvy-safari-pinned-tab-icon-workflow.md
---

# Safari Pinned Tab Icon Workflow

Safari pinned tab icons behave differently from standard favicons. They are typically treated as mask-style icons, so detailed full-color artwork may not translate well.

For teams working on favicon and app icon production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Favvy is useful because it helps turn Figma work into favicon, app icon, manifest, and website icon packages, but the quality still comes from a clear workflow.

### What to Check
- Start with a simplified vector mark that still reads clearly in one color.
- Avoid tiny interior details that disappear when rendered at small sizes.
- Test the icon as a silhouette, not only as a colored logo.
- Confirm the HTML metadata references the pinned tab icon and theme color correctly.
- Review the pinned tab appearance against the rest of the favicon package.

### Common Mistakes
- A colorful brand mark may become muddy or unrecognizable as a pinned tab mask.
- Padding that works for app icons may not work for a silhouette icon.
- Pinned tab icons are easy to forget because they are not visible in the normal browser tab path.

### A Practical Workflow
Favvy helps keep pinned tab icon production connected to the broader favicon workflow instead of treating it as a one-off developer task.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Favvy tutorial or product workflow, then review [Favvy](/favvy/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: SVG Favicon vs ICO vs PNG
description: Choose between SVG, ICO, and PNG favicons by understanding browser support, legacy fallbacks, crispness, transparency, and implementation needs.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-svg-favicon-vs-ico-vs-png/
markdownUrl: https://www.hypermatic.com/articles/favvy-svg-favicon-vs-ico-vs-png.md
---

# SVG Favicon vs ICO vs PNG

Favicon formats overlap, but they are not identical. Modern sites often use multiple icon formats because browsers, devices, pinned tabs, and manifests look for different assets.

For teams working on favicon and app icon production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Favvy is useful because it helps turn Figma work into favicon, app icon, manifest, and website icon packages, but the quality still comes from a clear workflow.

### What to Check
- Use ICO when legacy browser support or a traditional favicon.ico fallback matters.
- Use PNG for app icons, Apple touch icons, and manifest icons that need specific pixel sizes.
- Use SVG when scalable vector favicon support is desired and the artwork is simple enough.
- Keep a fallback path so older contexts do not rely only on SVG.
- Test the icon at tiny sizes, not just as a large source graphic.

### Common Mistakes
- SVG favicons are flexible but not a universal replacement for every icon context.
- ICO files can contain multiple sizes but are less convenient for app icon ecosystems.
- A detailed logo may fail as every format if the design is not simplified first.

### A Practical Workflow
Favvy helps designers generate the practical icon set from a Figma source instead of manually exporting every format and size.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Favvy tutorial or product workflow, then review [Favvy](/favvy/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Batch Resize Workflow for Product Launches
description: Batch resize product launch images in Figma for landing pages, email, paid ads, social posts, and ecommerce channels.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-batch-resize-workflow-for-product-launches/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-batch-resize-workflow-for-product-launches.md
---

# Batch Resize Workflow for Product Launches

Product launches create a burst of visual production. One set of source assets may need to become dozens of sizes for every channel involved in the launch.

For teams working on batch image cropping and resizing in Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” HyperCrop is useful because it helps turn Figma work into multi-size, multi-ratio image exports with reusable crop presets, but the quality still comes from a clear workflow.

### What to Check
- Start with a channel inventory: website, email, ads, organic social, marketplace, sales, and support assets.
- Define required aspect ratios and safe areas before resizing begins.
- Group assets by product, audience, region, or launch phase so review stays manageable.
- Use consistent export naming that identifies channel, size, product, and version.
- Run a visual QA pass across the full batch rather than approving one crop at a time.

### Common Mistakes
- Launch teams often underestimate the number of asset variants needed.
- Late copy changes can force every crop to be reviewed again.
- Manual resizing burns time exactly when launch deadlines are tightest.

### A Practical Workflow
HyperCrop turns repeated launch resizing into a preset-driven workflow inside Figma, which keeps the source creative and output variants closer together.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant HyperCrop tutorial or product workflow, then review [HyperCrop](/hypercrop/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Figma Image Cropping for Paid Social Ads
description: Crop paid social ad images from Figma with placement-specific safe areas, aspect ratios, text rules, and variant review.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-figma-image-cropping-for-paid-social-ads/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-figma-image-cropping-for-paid-social-ads.md
---

# Figma Image Cropping for Paid Social Ads

Paid social crops are not the same as general social crops. Creative has to survive placement rules, ad UI, fast scrolling, text overlays, and performance testing across variants.

For teams working on batch image cropping and resizing in Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” HyperCrop is useful because it helps turn Figma work into multi-size, multi-ratio image exports with reusable crop presets, but the quality still comes from a clear workflow.

### What to Check
- Prepare separate crops for feed, story, reel, square, vertical, and landscape placements when needed.
- Keep the product, offer, and CTA visible without relying on tiny text.
- Leave room for platform labels, captions, buttons, and profile elements.
- Create variant sets for offer, audience, and visual angle so testing is easier.
- Review crops at mobile scale, because most paid social impressions happen on phones.

### Common Mistakes
- A crop that looks good on desktop can fail completely in a mobile feed.
- Too much text inside the creative can reduce clarity and increase approval risk.
- Performance teams need clear naming so variants can be matched to results.

### A Practical Workflow
HyperCrop keeps paid social resizing close to the Figma source, which makes it faster to revise variants after creative review or performance feedback.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant HyperCrop tutorial or product workflow, then review [HyperCrop](/hypercrop/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Marketplace Image Crop Requirements Workflow
description: Prepare marketplace product image crops from Figma with consistent framing, aspect ratios, whitespace, and channel-specific requirements.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-marketplace-image-crop-requirements-workflow/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-marketplace-image-crop-requirements-workflow.md
---

# Marketplace Image Crop Requirements Workflow

Marketplace image requirements are strict because product photos need to look consistent in grids, search results, detail pages, and ads. Cropping decisions affect trust and conversion.

For teams working on batch image cropping and resizing in Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” HyperCrop is useful because it helps turn Figma work into multi-size, multi-ratio image exports with reusable crop presets, but the quality still comes from a clear workflow.

### What to Check
- Document each marketplace’s required dimensions, background rules, margin expectations, and file formats.
- Keep product scale consistent across a batch so one item does not appear smaller or cheaper than another.
- Preserve enough whitespace for marketplace previews and zoom behavior.
- Check thumbnails, not just full-size images, because buyers often see the crop in a grid first.
- Export variants for product page, ad, email, and social use when the same image has multiple jobs.

### Common Mistakes
- Manual cropping can slowly drift across a product catalog.
- A crop that works on a product page may fail in a search grid or paid ad.
- Marketplace rules may reject images with too much text, decoration, or background noise.

### A Practical Workflow
HyperCrop is useful when marketplace image production needs reusable crop presets rather than one-off manual resizing.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant HyperCrop tutorial or product workflow, then review [HyperCrop](/hypercrop/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Multi-Aspect-Ratio Creative Workflow
description: Create multi-aspect-ratio campaign creative in Figma without manually rebuilding every horizontal, square, and vertical asset.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-multi-aspect-ratio-creative-workflow/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-multi-aspect-ratio-creative-workflow.md
---

# Multi-Aspect-Ratio Creative Workflow

Modern campaigns rarely ship in one aspect ratio. The same idea may need horizontal website graphics, square social posts, vertical stories, mobile ads, thumbnails, and email crops.

For teams working on batch image cropping and resizing in Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” HyperCrop is useful because it helps turn Figma work into multi-size, multi-ratio image exports with reusable crop presets, but the quality still comes from a clear workflow.

### What to Check
- Design the master creative with flexible composition rather than locking everything to one ratio.
- Identify which elements are essential, optional, or removable in tighter crops.
- Create crop presets for common ratios such as 1:1, 4:5, 9:16, 16:9, and platform-specific sizes.
- Review each aspect ratio for focal point, text fit, and brand consistency.
- Keep naming consistent so downstream teams know which asset belongs to which placement.

### Common Mistakes
- Simply scaling one layout into every ratio creates weak compositions.
- Vertical crops need different hierarchy than wide hero graphics.
- Approval should happen on the full set because one bad crop can weaken the campaign.

### A Practical Workflow
HyperCrop helps designers create and adjust multiple aspect ratios from the same Figma source without rebuilding every asset manually.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant HyperCrop tutorial or product workflow, then review [HyperCrop](/hypercrop/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Safe Area Checklist for Social Media Crops
description: Crop social media graphics from Figma without hiding key text, faces, products, or CTAs behind platform UI safe areas.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-safe-area-checklist-for-social-media-crops/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-safe-area-checklist-for-social-media-crops.md
---

# Safe Area Checklist for Social Media Crops

Social media crops fail when important content lands under profile icons, captions, buttons, or interface overlays. Safe areas help designers keep the message visible after upload.

For teams working on batch image cropping and resizing in Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” HyperCrop is useful because it helps turn Figma work into multi-size, multi-ratio image exports with reusable crop presets, but the quality still comes from a clear workflow.

### What to Check
- Mark safe areas for stories, reels, feed posts, thumbnails, and paid placements separately.
- Keep faces, products, CTAs, prices, and legal notes away from platform UI overlays.
- Preview the crop with realistic captions, buttons, and profile metadata where possible.
- Test both organic and paid placements if the same asset will be reused.
- Save crop presets by channel and placement, not just by pixel dimension.

### Common Mistakes
- A technically correct aspect ratio can still hide the most important part of the creative.
- Safe areas change by platform, placement, and device context.
- Text-heavy designs are harder to crop safely across vertical, square, and landscape formats.

### A Practical Workflow
HyperCrop helps apply repeatable crop rules in Figma so social assets can be reviewed with safe areas before export.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant HyperCrop tutorial or product workflow, then review [HyperCrop](/hypercrop/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Board Deck Workflow for Figma Teams
description: Create board decks in Figma with a workflow for version control, sensitive data, chart updates, approvals, and final presentation export.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-board-deck-workflow-for-figma-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-board-deck-workflow-for-figma-teams.md
---

# Board Deck Workflow for Figma Teams

Board decks need to be polished, accurate, and controlled. They often include sensitive metrics, strategic updates, financial charts, and narrative sections that change until the last minute.

For teams working on presentation production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Pitchdeck is useful because it helps turn Figma work into PowerPoint, Keynote, Google Slides, PDF, and shareable presentation outputs, but the quality still comes from a clear workflow.

### What to Check
- Define the deck owner, data owner, and final approver before design begins.
- Separate reusable narrative slides from monthly or quarterly data slides.
- Use realistic chart data early so layout problems appear before the final numbers arrive.
- Keep sensitive slides in controlled Figma pages or files with deliberate access.
- Choose the final delivery format early: live presentation, PDF, PowerPoint, or a mix.

### Common Mistakes
- Exporting too late can reveal chart, font, or editability issues when there is no time left.
- Over-decorated board slides can make the data harder to trust.
- Copying an old deck forward without cleanup tends to preserve outdated assumptions.

### A Practical Workflow
Pitchdeck helps when the team wants Figma-level design control but still needs to export or present the deck in board-friendly formats.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Pitchdeck tutorial or product workflow, then review [Pitchdeck](/pitchdeck/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Figma Presentation Analytics for Sales Decks
description: Use presentation analytics to understand how prospects engage with Figma-designed sales decks after they are shared.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-figma-presentation-analytics-for-sales-decks/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-figma-presentation-analytics-for-sales-decks.md
---

# Figma Presentation Analytics for Sales Decks

Sales decks are often treated as static collateral, but they can reveal useful buyer signals. If prospects spend time on pricing, implementation, security, or comparison slides, the sales team should know.

For teams working on presentation production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Pitchdeck is useful because it helps turn Figma work into PowerPoint, Keynote, Google Slides, PDF, and shareable presentation outputs, but the quality still comes from a clear workflow.

### What to Check
- Decide which deck links are used for which prospect, account, or campaign.
- Track engagement by section, not just whether someone opened the deck.
- Watch for slides that get skipped, revisited, or forwarded internally.
- Use analytics to improve the deck narrative, not to overload sales with vanity metrics.
- Keep privacy and buyer expectations in mind when sharing trackable presentation links.

### Common Mistakes
- Analytics without a sales follow-up process quickly becomes noise.
- A long view time can mean interest, confusion, or internal sharing, so interpret it carefully.
- Do not let tracking replace a deck that clearly answers buyer objections.

### A Practical Workflow
Pitchdeck can turn Figma-designed sales decks into shareable presentations with useful engagement signals for follow-up and iteration.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Pitchdeck tutorial or product workflow, then review [Pitchdeck](/pitchdeck/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Pitch Deck Version Control for Startups
description: Keep startup pitch decks organized with clearer version control, investor variants, data updates, and export-ready Figma workflows.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-pitch-deck-version-control-for-startups/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-pitch-deck-version-control-for-startups.md
---

# Pitch Deck Version Control for Startups

Startup pitch decks change constantly. The problem is not only design polish; it is knowing which version went to which investor, which metrics changed, and which slides are safe to reuse.

For teams working on presentation production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Pitchdeck is useful because it helps turn Figma work into PowerPoint, Keynote, Google Slides, PDF, and shareable presentation outputs, but the quality still comes from a clear workflow.

### What to Check
- Name versions by audience, date, and purpose rather than vague labels like final or latest.
- Keep a changelog for metric updates, pricing changes, team changes, and traction slides.
- Separate public teaser decks from detailed investor decks with sensitive information.
- Track which slides are customized for specific investors or partner conversations.
- Export a fresh PDF or PowerPoint only after the source Figma version is approved.

### Common Mistakes
- Investors may forward old decks, so stale metrics and outdated positioning can linger.
- Custom investor variants become dangerous if they are not clearly named.
- A beautiful deck is less useful if the team cannot tell which version is current.

### A Practical Workflow
Pitchdeck supports a Figma-first deck workflow where the approved source can become the presentation or export format the startup needs next.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Pitchdeck tutorial or product workflow, then review [Pitchdeck](/pitchdeck/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Presentation Handoff Checklist for Designers
description: Hand off Figma-designed presentations with clearer expectations for editability, fonts, images, animations, speaker notes, and export format.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-presentation-handoff-checklist-for-designers/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-presentation-handoff-checklist-for-designers.md
---

# Presentation Handoff Checklist for Designers

Presentation handoff is different from handing off a static design. The recipient may need to present it live, edit text, reuse slides, or send it as a PDF after the designer is no longer involved.

For teams working on presentation production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Pitchdeck is useful because it helps turn Figma work into PowerPoint, Keynote, Google Slides, PDF, and shareable presentation outputs, but the quality still comes from a clear workflow.

### What to Check
- Confirm whether the final deck needs editable text or only visual fidelity.
- Check fonts, image resolution, chart editability, speaker notes, links, and embedded media.
- Document which slides are safe to edit and which should stay locked or unchanged.
- Export a test deck before the final deadline so format issues are visible early.
- Include a PDF fallback when the presentation format may vary across devices.

### Common Mistakes
- A deck that looks perfect in Figma may not be usable for the person presenting it.
- Font substitution can change line breaks and visual hierarchy.
- Editable decks require different design choices than pixel-perfect PDFs.

### A Practical Workflow
Pitchdeck is useful when the designer wants to keep the source in Figma while still delivering a deck that other people can present, share, or edit.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Pitchdeck tutorial or product workflow, then review [Pitchdeck](/pitchdeck/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Product Demo Deck Workflow in Figma
description: Build product demo decks in Figma with reusable screenshots, narrative flow, slide states, and export-ready presentation structure.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-product-demo-deck-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-product-demo-deck-workflow-in-figma.md
---

# Product Demo Deck Workflow in Figma

A product demo deck has to do more than show screenshots. It needs to explain the problem, guide the audience through the product, and stay current as the interface changes.

For teams working on presentation production from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Pitchdeck is useful because it helps turn Figma work into PowerPoint, Keynote, Google Slides, PDF, and shareable presentation outputs, but the quality still comes from a clear workflow.

### What to Check
- Create reusable screenshot frames so product updates can be swapped without redesigning each slide.
- Use a clear narrative structure: problem, current pain, product flow, proof, and next step.
- Show realistic data instead of empty UI states unless the empty state is the point.
- Decide which slides need to remain editable in PowerPoint or other presentation formats.
- Keep speaker notes, links, and embedded media expectations documented before export.

### Common Mistakes
- A screenshot dump is not a demo story.
- Static mockups can go stale quickly if nobody owns the screenshot refresh process.
- Animations or embeds that work in one context may not survive every export format.

### A Practical Workflow
Pitchdeck gives design teams a way to keep product demo decks visually sharp in Figma while still producing a usable presentation artifact.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Pitchdeck tutorial or product workflow, then review [Pitchdeck](/pitchdeck/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Design QA Handoff Between Designers and Developers
description: Create a better design QA handoff between designers and developers with clear comparison points, issue severity, and launch ownership.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-design-qa-handoff-between-designers-and-developers/
markdownUrl: https://www.hypermatic.com/articles/pixelay-design-qa-handoff-between-designers-and-developers.md
---

# Design QA Handoff Between Designers and Developers

Design QA can become tense when feedback arrives as vague “this feels off” comments. A better handoff gives developers specific visual differences, severity, and context.

For teams working on visual QA for websites built from Figma designs, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Pixelay is useful because it helps turn Figma work into Figma-to-browser comparison checks for live, staging, and local websites, but the quality still comes from a clear workflow.

### What to Check
- Agree which pages, components, and breakpoints need design QA before launch.
- Use screenshots or overlays to show the difference instead of describing it abstractly.
- Separate blocking issues from polish and future improvements.
- Include Figma links, browser URLs, viewport sizes, and reproduction notes in each issue.
- Close the loop with a second review after fixes land.

### Common Mistakes
- Designers may over-prioritize tiny differences while developers miss brand-critical details.
- Developers cannot fix what they cannot reproduce.
- Design QA should not become a surprise phase after everyone thinks the page is done.

### A Practical Workflow
Pixelay helps designers and developers talk about visible differences using the same Figma-to-browser comparison instead of relying on memory.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Pixelay tutorial or product workflow, then review [Pixelay](/pixelay/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Frontend QA Checklist for Landing Pages
description: QA landing pages against Figma designs by checking layout, responsive behavior, forms, CTAs, images, analytics, and visual polish.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-frontend-qa-checklist-for-landing-pages/
markdownUrl: https://www.hypermatic.com/articles/pixelay-frontend-qa-checklist-for-landing-pages.md
---

# Frontend QA Checklist for Landing Pages

Landing page QA needs more than checking whether the page loads. Small implementation differences can affect conversion, trust, form completion, and campaign performance.

For teams working on visual QA for websites built from Figma designs, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Pixelay is useful because it helps turn Figma work into Figma-to-browser comparison checks for live, staging, and local websites, but the quality still comes from a clear workflow.

### What to Check
- Compare hero layout, CTA placement, form styling, testimonial sections, pricing blocks, and footer content against Figma.
- Check desktop, tablet, and mobile breakpoints with realistic content and browser widths.
- Verify forms, validation messages, thank-you states, tracking events, and URL parameters.
- Check image crops, compression, alt text, and loading behavior.
- Prioritize differences that affect comprehension, conversion, accessibility, or brand trust.

### Common Mistakes
- A page can be functionally correct but visually weaker than the approved design.
- Campaign pages often launch with last-minute copy changes that break layout.
- Analytics and form QA are part of launch quality, not separate chores.

### A Practical Workflow
Pixelay helps teams compare the browser build against the Figma source so visual QA becomes concrete instead of subjective.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Pixelay tutorial or product workflow, then review [Pixelay](/pixelay/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Responsive Website QA from Figma
description: Check responsive website implementations against Figma designs across breakpoints, content lengths, spacing, and visual hierarchy.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-responsive-website-qa-from-figma/
markdownUrl: https://www.hypermatic.com/articles/pixelay-responsive-website-qa-from-figma.md
---

# Responsive Website QA from Figma

Responsive QA is where design drift often appears. A desktop page may match Figma closely while tablet or mobile layouts quietly lose hierarchy, spacing, or key content.

For teams working on visual QA for websites built from Figma designs, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Pixelay is useful because it helps turn Figma work into Figma-to-browser comparison checks for live, staging, and local websites, but the quality still comes from a clear workflow.

### What to Check
- Compare the implemented page against each Figma breakpoint or responsive reference frame.
- Check navigation, hero sections, forms, cards, grids, sticky elements, and modals at narrow widths.
- Use realistic copy lengths so wrapping and vertical rhythm are visible.
- Review image crops and focal points separately for mobile.
- Decide which pixel differences matter and which are acceptable responsive adaptations.

### Common Mistakes
- Responsive implementation is not just scaling desktop down.
- Missing tablet review can create awkward in-between layouts.
- Mobile QA should happen on real viewport sizes, not just a resized desktop browser.

### A Practical Workflow
Pixelay supports responsive website QA by making Figma-to-browser differences easier to inspect at the sizes that matter.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Pixelay tutorial or product workflow, then review [Pixelay](/pixelay/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Staging Site Design Review Checklist
description: Review staging websites against Figma before launch by checking design fidelity, content, assets, forms, responsive states, and approvals.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-staging-site-design-review-checklist/
markdownUrl: https://www.hypermatic.com/articles/pixelay-staging-site-design-review-checklist.md
---

# Staging Site Design Review Checklist

A staging site is the best moment to catch design implementation issues before real visitors arrive. The page is close enough to production to test, but still early enough to fix.

For teams working on visual QA for websites built from Figma designs, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Pixelay is useful because it helps turn Figma work into Figma-to-browser comparison checks for live, staging, and local websites, but the quality still comes from a clear workflow.

### What to Check
- Compare key templates and landing pages against the approved Figma designs.
- Check content accuracy, image quality, spacing, typography, interactions, and responsive states.
- Test forms, navigation, modals, downloads, video embeds, and dynamic content.
- Log design issues separately from functional bugs so ownership is clear.
- Get final design approval before staging is promoted to production.

### Common Mistakes
- Staging reviews often focus on functionality and miss visual drift.
- Designers may review too late if staging links are not shared until launch day.
- Unclear issue ownership causes design fixes to fall between product, engineering, and marketing.

### A Practical Workflow
Pixelay gives teams a visual comparison layer for staging review, which makes design feedback easier to explain and prioritize.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Pixelay tutorial or product workflow, then review [Pixelay](/pixelay/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Visual Regression Testing vs Design QA
description: Understand the difference between visual regression testing and design QA when checking websites against Figma designs.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-visual-regression-testing-vs-design-qa/
markdownUrl: https://www.hypermatic.com/articles/pixelay-visual-regression-testing-vs-design-qa.md
---

# Visual Regression Testing vs Design QA

Visual regression testing and design QA are related, but they are not the same. Regression tests compare a page against an earlier implementation; design QA compares the implementation against the intended design.

For teams working on visual QA for websites built from Figma designs, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Pixelay is useful because it helps turn Figma work into Figma-to-browser comparison checks for live, staging, and local websites, but the quality still comes from a clear workflow.

### What to Check
- Use visual regression testing to catch unexpected changes after code updates.
- Use design QA to verify whether the implementation matches the approved Figma design in the first place.
- Review whether differences are bugs, intentional changes, browser variations, or acceptable drift.
- Combine automated screenshots with human judgment for high-value pages.
- Decide which pages deserve ongoing regression coverage after launch.

### Common Mistakes
- A visual regression test can pass even if the original implementation never matched Figma.
- Design QA can be too subjective without a clear comparison method.
- Not every pixel difference is a product risk, but invisible design drift can still hurt trust.

### A Practical Workflow
Pixelay is especially useful for design QA because it compares the browser build to the Figma source rather than only comparing one build to another.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Pixelay tutorial or product workflow, then review [Pixelay](/pixelay/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Image Alt Text Handoff Checklist for Designers
description: Help designers hand off images with useful alt text guidance, decorative image decisions, and accessibility notes before development.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-image-alt-text-handoff-checklist-for-designers/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-image-alt-text-handoff-checklist-for-designers.md
---

# Image Alt Text Handoff Checklist for Designers

Alt text is often treated as a developer task, but designers usually understand the image’s intent best. A proper handoff tells developers whether an image is informative, decorative, functional, or redundant.

For teams working on optimized image export from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” TinyImage is useful because it helps turn Figma work into compressed image, SVG, PDF, GIF, MP4, WebP, and AVIF exports, but the quality still comes from a clear workflow.

### What to Check
- Mark decorative images so they do not receive noisy alt text.
- Write concise alt text for images that explain, sell, instruct, or replace nearby text.
- Describe the purpose of the image, not every visual detail.
- Identify image-based buttons, logos, charts, and screenshots that need special treatment.
- Keep alt text notes near the exported asset or in the handoff documentation.

### Common Mistakes
- Repeated decorative alt text can make a page worse for screen reader users.
- Charts and UI screenshots often need context beyond a simple filename.
- If the same image appears in different contexts, the alt text may need to change.

### A Practical Workflow
TinyImage can help designers own optimized image export, while the handoff checklist makes sure accessibility context travels with the asset.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant TinyImage tutorial or product workflow, then review [TinyImage](/tinyimage/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Responsive Image Handoff from Figma
description: Prepare responsive image variants from Figma with clearer crop, size, format, and breakpoint guidance for developers.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-responsive-image-handoff-from-figma/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-responsive-image-handoff-from-figma.md
---

# Responsive Image Handoff from Figma

Responsive images are not just smaller versions of the same export. Different breakpoints can need different crops, aspect ratios, focal points, and compression settings.

For teams working on optimized image export from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” TinyImage is useful because it helps turn Figma work into compressed image, SVG, PDF, GIF, MP4, WebP, and AVIF exports, but the quality still comes from a clear workflow.

### What to Check
- Identify which images need separate desktop, tablet, and mobile crops.
- Document focal points so important subjects are not cropped out on narrow screens.
- Export only the dimensions developers need, with sensible 1x and 2x decisions.
- Choose formats per image type rather than applying one format to everything.
- Name variants clearly by breakpoint, crop, and usage context.

### Common Mistakes
- Scaling a desktop hero down to mobile can hide the subject or make text unreadable.
- Supplying too many variants creates implementation confusion.
- Supplying one huge image forces the browser or developer to do avoidable cleanup.

### A Practical Workflow
TinyImage helps designers export optimized responsive variants from Figma, while the handoff notes tell developers which asset belongs where.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant TinyImage tutorial or product workflow, then review [TinyImage](/tinyimage/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Retina Image Export Workflow from Figma
description: Choose retina image export sizes from Figma without creating unnecessarily heavy website assets.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-retina-image-export-workflow-from-figma/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-retina-image-export-workflow-from-figma.md
---

# Retina Image Export Workflow from Figma

Retina exports are useful when images need to look sharp on high-density screens, but exporting everything at 2x or 3x can create oversized assets and slow pages down.

For teams working on optimized image export from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” TinyImage is useful because it helps turn Figma work into compressed image, SVG, PDF, GIF, MP4, WebP, and AVIF exports, but the quality still comes from a clear workflow.

### What to Check
- Start with the displayed CSS size, then decide whether a 2x asset is actually needed.
- Use 3x exports sparingly for tiny UI assets or contexts where the extra weight is justified.
- Prefer SVG for simple vector icons when appropriate, but test complexity and rendering.
- Compress retina raster images before handoff and compare the visual difference.
- Document whether developers need one asset or responsive variants for different breakpoints.

### Common Mistakes
- A 3x PNG can be dramatically heavier with little visible benefit.
- Large hero images need responsive handling, not just one giant retina export.
- Retina export naming should be clear enough for developers to use correctly.

### A Practical Workflow
TinyImage lets designers export and compress high-density image assets from Figma, which makes retina handoff more deliberate and less wasteful.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant TinyImage tutorial or product workflow, then review [TinyImage](/tinyimage/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: SVG vs PNG vs WebP for Figma Exports
description: Choose the right Figma export format by comparing SVG, PNG, and WebP for icons, illustrations, screenshots, and marketing images.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-svg-vs-png-vs-webp-for-figma-exports/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-svg-vs-png-vs-webp-for-figma-exports.md
---

# SVG vs PNG vs WebP for Figma Exports

The best image format depends on the asset. SVG, PNG, and WebP each solve different problems, and choosing the wrong one can create blurry visuals, bloated files, or awkward implementation.

For teams working on optimized image export from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” TinyImage is useful because it helps turn Figma work into compressed image, SVG, PDF, GIF, MP4, WebP, and AVIF exports, but the quality still comes from a clear workflow.

### What to Check
- Use SVG for simple vector artwork, logos, icons, and illustrations that need to scale cleanly.
- Use PNG for transparency, screenshots, UI captures, or cases where lossless output matters.
- Use WebP for compressed web imagery where browser support and workflow allow it.
- Check whether the asset includes complex shadows, masks, gradients, or embedded rasters before choosing SVG.
- Compare final file size and visual quality, not just the exported format name.

### Common Mistakes
- Complex SVGs can be heavier or harder to style than expected.
- PNG is reliable but can be far too heavy for large marketing images.
- WebP is usually efficient, but teams still need fallback thinking in older or constrained environments.

### A Practical Workflow
TinyImage supports multiple export formats from Figma, so designers can choose the right format instead of handing developers a pile of default PNGs.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant TinyImage tutorial or product workflow, then review [TinyImage](/tinyimage/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Website Asset Compression Budget for Design Teams
description: Set practical image file-size budgets for website sections so designers can export assets that fit performance goals.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-website-asset-compression-budget-for-design-teams/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-website-asset-compression-budget-for-design-teams.md
---

# Website Asset Compression Budget for Design Teams

Performance budgets are often owned by developers, but image weight usually starts in design. A compression budget gives designers a target before assets are exported.

For teams working on optimized image export from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” TinyImage is useful because it helps turn Figma work into compressed image, SVG, PDF, GIF, MP4, WebP, and AVIF exports, but the quality still comes from a clear workflow.

### What to Check
- Set different targets for icons, thumbnails, product images, editorial images, and hero graphics.
- Decide when visual quality matters enough to justify a heavier asset.
- Use real page context: a 300 KB image may be fine alone but not when repeated 20 times.
- Track total image weight for key pages such as home, pricing, product, and landing pages.
- Review the asset budget after design changes that add new photography, illustrations, or animations.

### Common Mistakes
- A single hero image can consume the entire page budget if nobody checks it.
- Designers may export at larger dimensions than the website ever displays.
- Compression targets should not flatten every image into poor quality; judgment still matters.

### A Practical Workflow
TinyImage helps design teams compress assets against a target before handoff, making performance a design responsibility instead of a cleanup surprise.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant TinyImage tutorial or product workflow, then review [TinyImage](/tinyimage/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: CSS Variable Handoff from Figma
description: Hand off Figma color, spacing, typography, and component decisions as CSS variable guidance developers can actually use.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-css-variable-handoff-from-figma/
markdownUrl: https://www.hypermatic.com/articles/weblify-css-variable-handoff-from-figma.md
---

# CSS Variable Handoff from Figma

CSS variable handoff works best when design tokens have semantic meaning. Developers do not just need the value; they need to know when and why that value should be used.

For teams working on developer handoff from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Weblify is useful because it helps turn Figma work into code-friendly HTML, CSS, React, Tailwind, Vue, and design token references, but the quality still comes from a clear workflow.

### What to Check
- Prefer semantic token names for implementation, such as color-background-primary, not only raw color names.
- Document aliases, modes, and fallback values when variables change by theme or state.
- Check whether Figma variable names are valid or need normalization for CSS.
- Separate global tokens from component-specific variables.
- Include examples of variables used in real component contexts.

### Common Mistakes
- Raw hex values copied from Figma often become hard-coded CSS that drifts from the design system.
- Token names that are too visual can become wrong when the design changes.
- Dark mode and brand modes need explicit mapping, not assumptions.

### A Practical Workflow
Weblify helps by exposing code-friendly design details from Figma, while the team’s token strategy keeps CSS variables maintainable.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Weblify tutorial or product workflow, then review [Weblify](/weblify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Figma Component Specs for Developers
description: Document Figma component specs for developers with props, variants, states, tokens, layout rules, and implementation notes.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-component-specs-for-developers/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-component-specs-for-developers.md
---

# Figma Component Specs for Developers

A component handoff should explain how a component behaves, not just how it looks in one static frame. Developers need to understand states, variants, props, constraints, and token usage.

For teams working on developer handoff from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Weblify is useful because it helps turn Figma work into code-friendly HTML, CSS, React, Tailwind, Vue, and design token references, but the quality still comes from a clear workflow.

### What to Check
- List required states: default, hover, active, disabled, focus, loading, error, and empty where relevant.
- Map Figma variants to implementation props or component options.
- Document spacing, min widths, max widths, wrapping, truncation, and responsive behavior.
- Include token references for color, typography, radius, shadow, and spacing.
- Flag assets, icons, copy slots, and accessibility requirements such as labels or focus states.

### Common Mistakes
- A polished component frame is not enough if states are missing.
- Variant names that make sense to designers may not map cleanly to code.
- Unclear truncation and wrapping rules cause bugs once real content arrives.

### A Practical Workflow
Weblify can help developers inspect component structure and code-friendly output, but the Figma file still needs a clear component contract.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Weblify tutorial or product workflow, then review [Weblify](/weblify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Figma Dev Mode Alternative for Frontend Teams
description: Compare Figma Dev Mode with code-oriented handoff workflows for frontend teams that need cleaner implementation context.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-dev-mode-alternative-for-frontend-teams/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-dev-mode-alternative-for-frontend-teams.md
---

# Figma Dev Mode Alternative for Frontend Teams

Figma Dev Mode gives developers useful inspection, measurements, variables, annotations, and ready-for-dev status. Some frontend teams still need a more code-oriented workflow around components, layout, and implementation examples.

For teams working on developer handoff from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Weblify is useful because it helps turn Figma work into code-friendly HTML, CSS, React, Tailwind, Vue, and design token references, but the quality still comes from a clear workflow.

### What to Check
- Use Dev Mode for native inspection, measurements, annotations, variable references, and handoff status.
- Look for alternatives when developers need HTML, CSS, React, Tailwind, Vue, or more implementation-shaped snippets.
- Check whether the team needs component-level handoff or page-section handoff.
- Compare token naming, responsive layout interpretation, and how much cleanup developers expect.
- Decide whether generated code is a starting point, documentation aid, or production candidate.

### Common Mistakes
- No handoff tool can fix a poorly structured Figma file.
- Generated snippets still need engineering judgment, accessibility, state handling, and data wiring.
- Teams can waste time comparing tools before agreeing what “good handoff” means.

### A Practical Workflow
Weblify is useful when frontend teams want to inspect Figma with code-shaped output alongside the usual design review process.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Weblify tutorial or product workflow, then review [Weblify](/weblify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Figma to Storybook Handoff Workflow
description: Connect Figma component design with Storybook implementation by documenting variants, states, props, and review expectations.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-to-storybook-handoff-workflow/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-to-storybook-handoff-workflow.md
---

# Figma to Storybook Handoff Workflow

Storybook is useful when design and engineering teams want a living view of implemented components. The handoff from Figma should make it clear what stories need to exist and how they map to design variants.

For teams working on developer handoff from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Weblify is useful because it helps turn Figma work into code-friendly HTML, CSS, React, Tailwind, Vue, and design token references, but the quality still comes from a clear workflow.

### What to Check
- Map each important Figma variant to a Storybook story or control.
- Document props, slots, content examples, responsive behavior, and state names.
- Include edge cases such as long labels, missing images, loading states, and error states.
- Decide whether designers review Storybook visually, behaviorally, or both.
- Link Figma components, implementation tickets, and Storybook stories together where possible.

### Common Mistakes
- Storybook can drift from Figma if nobody owns the review loop.
- Only documenting the happy path leaves developers guessing about real product states.
- Figma variants and code props often need translation rather than a one-to-one copy.

### A Practical Workflow
Weblify can support the Figma-to-code interpretation step before the component becomes a maintained Storybook story.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Weblify tutorial or product workflow, then review [Weblify](/weblify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Frontend Implementation Notes in Figma
description: Write better frontend implementation notes in Figma so developers understand behavior, constraints, states, and responsive details.
datePublished: 2026-04-30T00:00:00.000Z
dateModified: 2026-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-frontend-implementation-notes-in-figma/
markdownUrl: https://www.hypermatic.com/articles/weblify-frontend-implementation-notes-in-figma.md
---

# Frontend Implementation Notes in Figma

Implementation notes are most useful when they explain decisions that are not obvious from the pixels. Developers need to know what changes, what stays fixed, and what behavior is expected.

For teams working on developer handoff from Figma, the useful question is not just “which tool exports this?” It is “what has to be true before this asset, file, or review flow is safe to ship?” Weblify is useful because it helps turn Figma work into code-friendly HTML, CSS, React, Tailwind, Vue, and design token references, but the quality still comes from a clear workflow.

### What to Check
- Annotate responsive behavior, sticky elements, scroll areas, overlays, animations, and component state changes.
- Call out real content constraints such as long names, empty states, loading states, and permissions.
- Reference tokens, components, routes, API assumptions, and existing code patterns when known.
- Separate must-have requirements from nice-to-have design polish.
- Keep notes close to the relevant frame or component, not buried in a separate document nobody opens.

### Common Mistakes
- Too many notes can become noise if they restate visible details.
- No notes at all forces developers to guess at behavior and edge cases.
- Notes get stale if they are not updated when the design changes.

### A Practical Workflow
Weblify helps developers inspect Figma through a frontend lens, and good implementation notes fill the gaps that generated snippets cannot know.

Start by preparing the Figma source file with real content, clear naming, and the constraints that matter for production. Then run a focused review against the checklist above before exporting or sharing. That keeps the work from turning into a last-minute cleanup job.

### When This Matters Most
This matters most when the work is repeated, client-facing, compliance-sensitive, performance-sensitive, or likely to be reused by another team. One-off manual fixes can survive on memory. Repeatable production work needs a documented process.

### Next Step
Use this checklist alongside the relevant Weblify tutorial or product workflow, then review [Weblify](/weblify/) when you are ready to make this process faster inside Figma.

---

---
type: article
title: Brand Mark to Favicon Workflow
description: Turn a brand mark into a favicon and app icon system that still works at tiny sizes.
datePublished: 2026-04-29T00:00:00.000Z
dateModified: 2026-04-29T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-brand-mark-to-favicon-workflow/
markdownUrl: https://www.hypermatic.com/articles/favvy-brand-mark-to-favicon-workflow.md
---

# Brand Mark to Favicon Workflow

A full brand mark often has too much detail for favicon sizes. The workflow should simplify the mark without losing recognition.

For web designers and developers, this is really a favicon generation problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Test contrast, padding, silhouette, transparency, background color, simplified shapes, and small-size legibility before generating the final package.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Favvy helps because it can create complete favicon and app icon packages from Figma. It fits naturally into workflows involving website launch assets, PWA icons, brand icon handoff, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Favvy works as the final production step once the favicon artwork is ready.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Favvy tutorial or product page. You can also explore [Favvy](/favvy/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: tutorial
title: How to import Lottie file animations to Figma with one click using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-04-29T00:00:00.000Z
dateModified: 2026-04-29T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-import-lottie-file-animations-to-figma-with-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-import-lottie-file-animations-to-figma-with-one-click-using-convertify.md
---

# How to import Lottie file animations to Figma with one click using Convertify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how you can import Lottie animations into your Figma designs and prototypes in one click using the Convertify Figma plugin. 

To get started, all we need to do is go to our Figma file, go down to the actions icon in the toolbar down here, and if you just search for Convertify. Under the Figma plugins tab, if you click on Convertify, you can run the Figma plugin by either clicking on this run button down here, or I'd recommend clicking on the save icon next to that. Then you'll be able to run the Figma plugin from your Figma plugins list. I've already clicked on the save icon down here, so I'm just going to go to my Figma canvas and right-click anywhere. Then go down to plugins, go to saved Figma plugins, and then click on the Convertify item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it basically has a bunch of different options that allow you to export files from Figma, but also import files into Figma as well. That's what we're going to be looking at today. By default, the Figma plugin will open up with this export option selected. All you need to do is go to the select list here, click on that, and then just go down to the import to Figma section and click on the import Lottie as GIF to Figma option. This is going to let us drag and drop JSON files or files which we're going to download from the lottiefiles.com website. All you need to do is go to lottiefiles.com, and then if you go to the products tab, you can go to the free Lottie animation section or any of the other animation sections on the site, or you might have your own Lottie animation that you want to import, and that's also totally fine. For today, I'm just going to keep it simple and I've grabbed a few of these free animations. I've got this one here, another one which is this little loading animation, the Amazon logo animation, and also this Studio Ghibli animation as well. I've basically gone ahead and downloaded all of those, and you can either download them as Lottie files or the Lottie JSON files. It doesn't matter which one you download; they're both supported. You just have to download those to your computer by clicking on the download button here. You can see I've already downloaded those files. I've got two in JSON and two in Lottie.

I'm going to show you what that looks like now to upload or drag and drop into the Figma plugin. We're just going to go back to the Convertify Figma plugin. With that option selected, I'm just going to grab one of these files and drag and drop that into this little drop zone area here. When I let go, you can see that it's loading up the Lottie file, and it's basically adding that as an optimized GIF into our Figma file. That's already finished now. It only takes a few seconds, and you can see we've got this brand new image layer with a GIF in it. If I go to the fill, you can see here it's coming up as a GIF, and I can actually preview that inline inside of Figma. You can basically see the animation has been imported from the Lottie file, and we can now use that in our Figma file. That's basically what it looks like. I'll import those other files just to show you a few different examples.

We can do this one with the Lottie extension. It supports the Lottie format as well. Again, you just drag and drop that Lottie file into this drop zone area here and let go of that. It only takes a few seconds, and we've got our animated Lottie file imported into Figma. Again, we can click on play in here, and you can see that it's playing back as we'd expect. That's looking really good. Because these are imported as GIF fills, they'll also work in your Figma prototypes. If you're using prototyping and you want to use these animations in there, they will show up as playable GIFs in your Figma prototypes as well. That can be really handy if you want to enhance the prototype interactions and make them have a little bit more of an animated style on the hover states or success states. These can be really helpful for that.

I'll just import the last two to show you what they look like. I'm just going to again drag and drop the JSON file into this drop zone area. You can see it's added that animation as a GIF, and it's also optimizing the GIFs by default. You can see that it's got an optimize imported GIF file size toggle, which is enabled. It's slightly slower, but because the animations are usually so short, you won't really notice any difference anyway. It's just going to give you a more optimized, smaller file size in Figma, so it doesn't bog down your Figma files at all. We can see that that one's been imported as well. If I play that, we've got the walk cycle as we'd expect. That's looking really good. We'll do one more, which is the last one. We'll just do the Amazon logo that we looked at before. Again, going to drag and drop this final Lottie file into the Figma plugin over here. Drop that in, and that's going to automatically add those frames from our animation. Again, we've got the GIF fill over here. We can hit play on that one, and that's animating in those letters from our Lottie animation. That's looking really good there.

That's basically it. I just want to keep this one really short. If you've been wondering how to import animated Lottie files into your Figma designs or Figma prototypes, this is a really easy way to do it in one click without having to use any other tools or conversion methods. You can basically just drag and drop the Lottie files or the JSON Lottie files. As I mentioned, it supports both of those formats. You can just go ahead and drop those directly into your drag and drop area here in the Convertify Figma plugin. Just make sure you've got that import Lottie as GIF to Figma option selected, and you should be good to go. I hope that helps with your workflow. If you've been interested in using Lottie animations to enhance your Figma designs and prototypes, this should be a really interesting way of improving those and adding a bit more motion into your designs without having to manually use the animation tools in Figma. We'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Website Icon Package Handoff for Developers
description: Give developers a complete website icon package instead of a single logo export.
datePublished: 2026-04-26T00:00:00.000Z
dateModified: 2026-04-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-website-icon-package-handoff-for-developers/
markdownUrl: https://www.hypermatic.com/articles/favvy-website-icon-package-handoff-for-developers.md
---

# Website Icon Package Handoff for Developers

Developers need more than one square PNG. A complete website icon handoff includes files, paths, snippets, naming, and enough context to test the result.

For web designers and developers, this is really a favicon generation problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Include favicon files, app icons, manifest references, HTML snippets, folder paths, cache notes, and preview expectations.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Favvy helps because it can create complete favicon and app icon packages from Figma. It fits naturally into workflows involving website launch assets, PWA icons, brand icon handoff, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Favvy is the tool that turns Figma artwork into a developer-ready icon package.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Favvy tutorial or product page. You can also explore [Favvy](/favvy/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: PWA Icon Requirements Checklist
description: Prepare progressive web app icons from a Figma source design without missing required sizes.
datePublished: 2026-04-24T00:00:00.000Z
dateModified: 2026-04-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-pwa-icon-requirements-checklist/
markdownUrl: https://www.hypermatic.com/articles/favvy-pwa-icon-requirements-checklist.md
---

# PWA Icon Requirements Checklist

PWA icons need to work across install prompts, home screens, app switchers, and masked shapes. A logo that looks good at one size may fail in another context.

For web designers and developers, this is really a favicon generation problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Check icon sizes, maskable safe areas, contrast, transparency, manifest references, small-size legibility, and Android display behavior.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Favvy helps because it can create complete favicon and app icon packages from Figma. It fits naturally into workflows involving website launch assets, PWA icons, brand icon handoff, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Favvy works as the production step for exporting a complete PWA icon set.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Favvy tutorial or product page. You can also explore [Favvy](/favvy/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: RealFaviconGenerator Alternative for Figma Users
description: Compare RealFaviconGenerator with creating favicon packages directly from Figma.
datePublished: 2026-04-22T00:00:00.000Z
dateModified: 2026-04-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-realfavicongenerator-alternative-for-figma-users/
markdownUrl: https://www.hypermatic.com/articles/favvy-realfavicongenerator-alternative-for-figma-users.md
---

# RealFaviconGenerator Alternative for Figma Users

RealFaviconGenerator is useful, but Figma users often want the favicon workflow to stay closer to the source brand artwork.

For web designers and developers, this is really a favicon generation problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Compare source-file ownership, generated sizes, HTML snippets, previewing, developer handoff, and how often the brand icon changes.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Favvy helps because it can create complete favicon and app icon packages from Figma. It fits naturally into workflows involving website launch assets, PWA icons, brand icon handoff, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Favvy works as the cleaner workflow when the source artwork already lives in Figma.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Favvy tutorial or product page. You can also explore [Favvy](/favvy/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Favicon Launch Checklist for Websites
description: Check every favicon, app icon, manifest, and browser tab asset before a website launch.
datePublished: 2026-04-20T00:00:00.000Z
dateModified: 2026-04-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-favicon-launch-checklist-for-websites/
markdownUrl: https://www.hypermatic.com/articles/favvy-favicon-launch-checklist-for-websites.md
---

# Favicon Launch Checklist for Websites

A favicon launch checklist prevents the small brand details from being forgotten. Browser tabs, mobile shortcuts, pinned tabs, and app installs all need the right icon assets.

For web designers and developers, this is really a favicon generation problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Check ICO, PNG sizes, SVG support, Apple touch icons, manifest icons, maskable icon needs, paths, cache busting, and browser previews.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Favvy helps because it can create complete favicon and app icon packages from Figma. It fits naturally into workflows involving website launch assets, PWA icons, brand icon handoff, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Favvy is the Figma-native way to produce the complete icon package.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Favvy tutorial or product page. You can also explore [Favvy](/favvy/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Figma to Web Build QA for Marketing Sites
description: QA marketing pages against Figma designs before campaign traffic arrives.
datePublished: 2026-04-18T00:00:00.000Z
dateModified: 2026-04-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-figma-to-web-build-qa-for-marketing-sites/
markdownUrl: https://www.hypermatic.com/articles/pixelay-figma-to-web-build-qa-for-marketing-sites.md
---

# Figma to Web Build QA for Marketing Sites

Marketing pages often launch under deadline pressure, and tiny implementation differences can affect clarity, trust, and conversion.

For frontend and website teams, this is really a website QA problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Review hero layout, CTA visibility, testimonial sections, pricing blocks, form spacing, mobile breakpoints, image quality, and analytics-sensitive elements.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Pixelay helps because it can compare live or local websites against Figma designs with smart overlays. It fits naturally into workflows involving visual QA, frontend review, launch checks, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Pixelay works as the safety check before paid traffic or launch traffic hits the page.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Pixelay tutorial or product page. You can also explore [Pixelay](/pixelay/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Design Implementation Review Before Launch
description: Review design implementation quality before a website or product page ships.
datePublished: 2026-04-16T00:00:00.000Z
dateModified: 2026-04-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-design-implementation-review-before-launch/
markdownUrl: https://www.hypermatic.com/articles/pixelay-design-implementation-review-before-launch.md
---

# Design Implementation Review Before Launch

A design implementation review catches the details that make a page feel finished: alignment, spacing, type rhythm, image crops, content order, and responsive polish.

For frontend and website teams, this is really a website QA problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Prioritize differences that affect trust, conversion, accessibility, or brand quality. Not every pixel mismatch matters, but unexplained drift should be visible.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Pixelay helps because it can compare live or local websites against Figma designs with smart overlays. It fits naturally into workflows involving visual QA, frontend review, launch checks, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Pixelay works as a review tool, not just a screenshot overlay.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Pixelay tutorial or product page. You can also explore [Pixelay](/pixelay/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Visual QA Workflow for Frontend Teams
description: Create a repeatable visual QA workflow that compares frontend builds against Figma designs.
datePublished: 2026-04-13T00:00:00.000Z
dateModified: 2026-04-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-visual-qa-workflow-for-frontend-teams/
markdownUrl: https://www.hypermatic.com/articles/pixelay-visual-qa-workflow-for-frontend-teams.md
---

# Visual QA Workflow for Frontend Teams

Visual QA should not be a last-minute designer pass. Frontend teams can reduce rework by checking against Figma throughout implementation.

For frontend and website teams, this is really a website QA problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Define owner, compare major breakpoints, log meaningful differences, decide acceptable drift, and review again before launch.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Pixelay helps because it can compare live or local websites against Figma designs with smart overlays. It fits naturally into workflows involving visual QA, frontend review, launch checks, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Pixelay is the tool that makes design-to-build differences easier to see.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Pixelay tutorial or product page. You can also explore [Pixelay](/pixelay/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: PerfectPixel Alternatives for Figma Teams
description: Compare browser overlay and visual QA tools for teams working from Figma designs.
datePublished: 2026-04-11T00:00:00.000Z
dateModified: 2026-04-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-perfectpixel-alternatives-for-figma-teams/
markdownUrl: https://www.hypermatic.com/articles/pixelay-perfectpixel-alternatives-for-figma-teams.md
---

# PerfectPixel Alternatives for Figma Teams

Overlay tools help teams catch visual drift, but the right tool depends on how your team works with Figma, local builds, staging sites, and review comments.

For frontend and website teams, this is really a website QA problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Compare overlay setup, Figma awareness, local URL support, responsive checks, collaboration, and repeatability.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Pixelay helps because it can compare live or local websites against Figma designs with smart overlays. It fits naturally into workflows involving visual QA, frontend review, launch checks, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Pixelay works as a Figma-aware website QA option.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Pixelay tutorial or product page. You can also explore [Pixelay](/pixelay/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Website QA Checklist from Figma to Production
description: Check a live website against the approved Figma design before launch.
datePublished: 2026-04-09T00:00:00.000Z
dateModified: 2026-04-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-website-qa-checklist-from-figma-to-production/
markdownUrl: https://www.hypermatic.com/articles/pixelay-website-qa-checklist-from-figma-to-production.md
---

# Website QA Checklist from Figma to Production

Website QA often focuses on functionality while visual accuracy gets squeezed into a quick final review. Comparing the build to Figma makes the design intent visible again.

For frontend and website teams, this is really a website QA problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Check layout, spacing, type, imagery, breakpoints, content, interactions, sticky elements, forms, and any section that changed during implementation.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Pixelay helps because it can compare live or local websites against Figma designs with smart overlays. It fits naturally into workflows involving visual QA, frontend review, launch checks, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Pixelay is the practical tool for comparing the shipped page against the approved design.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Pixelay tutorial or product page. You can also explore [Pixelay](/pixelay/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Security Questions Before Sharing Figma Work
description: Ask these security questions before sending Figma work to clients, contractors, or stakeholders.
datePublished: 2026-04-07T00:00:00.000Z
dateModified: 2026-04-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-security-questions-before-sharing-figma-work/
markdownUrl: https://www.hypermatic.com/articles/crypto-security-questions-before-sharing-figma-work.md
---

# Security Questions Before Sharing Figma Work

Before sharing a Figma file or prototype, teams should pause long enough to decide what access is actually needed. Convenience is useful, but accidental oversharing is expensive.

For teams sharing confidential design work, this is really a secure design sharing problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Ask who needs access, whether they need edit rights, what can be downloaded, whether the work is confidential, whether PDF is safer, and how access will be revoked.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Crypto helps because it can share Figma designs and prototypes with password protection. It fits naturally into workflows involving NDA reviews, private client sharing, secure approvals, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Crypto works as the Figma-friendly answer when password-protected sharing is required.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Crypto tutorial or product page. You can also explore [Crypto](/crypto/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Password-Protected Design Review Alternatives
description: Compare ways to share confidential design work with password protection or controlled access.
datePublished: 2026-04-05T00:00:00.000Z
dateModified: 2026-04-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-password-protected-design-review-alternatives/
markdownUrl: https://www.hypermatic.com/articles/crypto-password-protected-design-review-alternatives.md
---

# Password-Protected Design Review Alternatives

There are many ways to share confidential design work: Figma permissions, password-protected PDFs, prototype links, client portals, document sharing tools, and secure plugin workflows.

For teams sharing confidential design work, this is really a secure design sharing problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Compare privacy, ease for reviewers, design fidelity, download control, password sharing, and cleanup after review.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Crypto helps because it can share Figma designs and prototypes with password protection. It fits naturally into workflows involving NDA reviews, private client sharing, secure approvals, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Teams should choose the level of protection that matches the sensitivity of the work.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Crypto tutorial or product page. You can also explore [Crypto](/crypto/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: NDA Design Review Workflow
description: Set up a secure design review workflow for NDA-protected projects.
datePublished: 2026-04-03T00:00:00.000Z
dateModified: 2026-04-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-nda-design-review-workflow/
markdownUrl: https://www.hypermatic.com/articles/crypto-nda-design-review-workflow.md
---

# NDA Design Review Workflow

NDA projects need more than a casual share link. The review workflow should make access deliberate, feedback traceable, and final delivery controlled.

For teams sharing confidential design work, this is really a secure design sharing problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Define reviewers, share only what is needed, use password protection where appropriate, choose prototype or PDF output, and record approval decisions.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Crypto helps because it can share Figma designs and prototypes with password protection. It fits naturally into workflows involving NDA reviews, private client sharing, secure approvals, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Crypto is the secure sharing layer for private Figma work.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Crypto tutorial or product page. You can also explore [Crypto](/crypto/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: DocSend Alternative for Design Review
description: Compare DocSend-style document sharing with Figma-first secure design review workflows.
datePublished: 2026-04-01T00:00:00.000Z
dateModified: 2026-04-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-docsend-alternative-for-design-review/
markdownUrl: https://www.hypermatic.com/articles/crypto-docsend-alternative-for-design-review.md
---

# DocSend Alternative for Design Review

DocSend-style sharing can be useful for documents, but design review often needs fidelity, prototypes, and context from the source design.

For teams sharing confidential design work, this is really a secure design sharing problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Compare analytics, password protection, prototype fidelity, PDF sharing, reviewer friction, and approval flow.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Crypto helps because it can share Figma designs and prototypes with password protection. It fits naturally into workflows involving NDA reviews, private client sharing, secure approvals, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Crypto works as the better fit when the thing being reviewed is Figma-native design work.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Crypto tutorial or product page. You can also explore [Crypto](/crypto/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: tutorial
title: How to add split text animations to Figma banners using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-04-01T00:00:00.000Z
dateModified: 2026-04-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-split-text-animations-to-figma-banners-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-split-text-animations-to-figma-banners-using-bannerify.md
---

# How to add split text animations to Figma banners using Bannerify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how you can add animated split text animations to your Figma banners, which will allow you to animate your text layers either character by character, word by word, or even line by line. 

To get started, all we need to do is go to our Figma file, click on the actions icon at the bottom here, and then if you just search for Bannerify. Under the Figma plugins tab, if you click on the Bannerify item, to run the Figma plugin, you can either click on this run button down here, or I'd recommend clicking on the save icon next to that. That'll let you save the Figma plugin to run from your Figma plugins list. I already clicked on that button, so I'm just going to go to my Figma canvas, right-click anywhere, and go down to plugins, then go down to saved plugins and click on the Bannerify item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically takes any frames on your current Figma page and treats those as banners that you can load into the Figma plugin. In this case, I've just got this one frame. I'm going to keep it simple and just load that one up by clicking on the load check banners button down here. Once it loads up, you'll notice that all of the content layers inside of the banner frame have automatically been loaded up into the Bannerify timeline, which will allow you to animate those layers using the tools in the Figma plugin. You can see that I've got a few animations already applied to the banner. In this case, I just want to add some new text animations, which are going to allow me to change these fade-in animations to split text animations. This is really easy to do.

Now, you can basically just find any text layer in your timeline. Go to the exit or entry animation options in the timeline settings here and just open either of those up. If you scroll down past all of these entrances, you'll come to a new section called split text. This is going to give you a bunch of different options for animating the text content into different kinds of animations. You can see here I've got a bunch that's animating the text characters individually. I've got some that's animating in the words, animating each word word by word. We've also got some that animate per line, animating per line. There are a few different options there.

All we need to do is basically just select any of these animations. In this case, I'm just going to click this one. Now, if we replay that, you'll see here that the text is animating in word by word. Similarly, I can use those animations for my exit animations as well. I can just click on this one here underneath that. If I scroll down to the split text group again, you can see that I've got those same animations, but basically just in reverse order. That's going to animate out the text instead of animating it in. I can just pick any of those right now and click on that. If I play that back in the timeline, you'll see that in the preview, it's animating that text out character by character in this case. That's looking really good. Again, if I play that all in one go, you can see it's animating it in word by word and then animating it out character by character.

Now that we've got these animations working really well, what we can do is export these out from the Figma plugin. There are a couple of different options you've got here. The first one is if you want to export it to GIF or video, you can do that. You can click on the export to GIF/video button. Select the format you want. You can either pick MP4, GIF, WebM, or any of these other animated formats here. In this case, I'm just going to pick MP4 and keep that selected. I'm just going to leave everything else default and then click on the export MP4 button. That's going to automatically go through and put together that animation into a video file that we can then download to the computer. I'm just going to click on the download your zip file button, save that to my desktop. In this case, I'm going to unzip that zip file and then open up the folder. You'll see here that we've got an MP4 file that we can then play. You can see our text animation is coming in really nicely there and fading out as we'd expect as well.

We've got a nice little preview page we can load up as well. If you've got multiple banners, this will automatically play all those back at the exact same time. That's a really nice way to share previews with clients and things like that. If you need to export it to HTML, you can do that as well. You can just click on the export to HTML button. Importantly, as you might have noticed in the options down here, it says GAP only in brackets when we see the split text options. GSAP basically means the GreenSock Animation Platform. This is a particular kind of library that needs to be loaded in for these text animations to work. By default, the platform is going to be selected to HTML and CSS. This one will not work with these particular split text animations. It'll work fine with all the other animations, but in this case, we've got these split text ones.

What we need to do is change this code output option from the default one to the HTML GAP/GreenSock option. You'll see this little cape icon here when you know that's the selected one that we want. Once you've got that GAP option selected, you can go ahead and click on the export banner button. That's going to automatically generate all of the HTML code, all of the JavaScript, all of the image assets, and then you can again just open that up, double-click on the zip file, and then you'll have your banners in here. I can now just drag that into the browser, and you can see the animations are working really well. That's going to include those split text animation layers and animate them really smoothly.

Just to reiterate, if you are using any of these split text animations which are now in the Bannerify Figma plugin, the only format you can use for HTML is the one with the GreenSock option included. Unfortunately, any of these platform options down here, for example, Google Ads and things like that, unfortunately, they're not going to currently support the GAP option. This might be something that's available in the future, but a lot of these platforms also block third-party libraries from being included as well. In the meantime, just be sure to select the HTML GreenSock Animation option in the code output settings when you export the banner from the Figma plugin. That's going to ensure that your HTML animations work really well with the new split text animation properties.

That's basically it. I just wanted to run through that really quickly. I know a bunch of people have been really interested in these types of animations where you can do split text either through characters, words, or even full lines. This is going to be a really easy way for you to apply those animations without needing to hand-code them yourself. Just to reiterate, this example is on multiple lines, but if you only need one line of text, for example, or two lines, this will work as well. Just make sure that you've got the text layer set to the same size as the actual text. In the layout options here, you just want to make sure those are kind of hugging the text rather than having something crazy like this where there's just a huge bounding box around the text. Just make sure it's nice and tight alongside the text for the best results. You can basically apply this to those as well. If we refresh this one, you'll notice that the words still come in perfectly and the characters will also be animated out. 

You can basically do this for multiple lines or single lines. It just depends on what kind of animation you're looking for, and you should hopefully be able to find an option that suits the kind of use case that you're looking for under this new split text animation setting option here. We'll leave it there for today. Keep that one a fairly quick one.

---

---
type: article
title: Secure Client Handoff Checklist for Figma Files
description: Share Figma designs, prototypes, and PDFs with clients while reducing privacy and access-control risk.
datePublished: 2026-03-29T00:00:00.000Z
dateModified: 2026-03-29T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-secure-client-handoff-checklist-for-figma-files/
markdownUrl: https://www.hypermatic.com/articles/crypto-secure-client-handoff-checklist-for-figma-files.md
---

# Secure Client Handoff Checklist for Figma Files

Secure handoff is not just a password. Teams need to think about who can open the work, what they can download, whether the project is under NDA, and how access changes after review.

For teams sharing confidential design work, this is really a secure design sharing problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Check link scope, reviewer list, password sharing, PDF versus prototype choice, download expectations, expiry needs, and final access cleanup.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Crypto helps because it can share Figma designs and prototypes with password protection. It fits naturally into workflows involving NDA reviews, private client sharing, secure approvals, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Crypto works as one way to keep private Figma sharing controlled.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Crypto tutorial or product page. You can also explore [Crypto](/crypto/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Client Proofing Tool for Design Teams
description: What design teams should look for in a client proofing tool for Figma work.
datePublished: 2026-03-27T00:00:00.000Z
dateModified: 2026-03-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-client-proofing-tool-for-design-teams/
markdownUrl: https://www.hypermatic.com/articles/commentful-client-proofing-tool-for-design-teams.md
---

# Client Proofing Tool for Design Teams

A good client proofing tool should reduce confusion for reviewers and reduce cleanup work for designers. It should not force every stakeholder into a complex design workflow.

For agencies and product teams, this is really a design review problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Evaluate account requirements, ease of commenting, approvals, notifications, privacy, feedback organization, and how comments map back to Figma.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Commentful helps because it can collect and organize design feedback around Figma work. It fits naturally into workflows involving client review, stakeholder feedback, approval workflows, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Commentful is the Figma-first option for teams that need simpler client proofing.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Commentful tutorial or product page. You can also explore [Commentful](/commentful/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Organize Figma Feedback Before Handoff
description: Turn messy Figma comments and external feedback into a cleaner handoff list.
datePublished: 2026-03-25T00:00:00.000Z
dateModified: 2026-03-25T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-organize-figma-feedback-before-handoff/
markdownUrl: https://www.hypermatic.com/articles/commentful-organize-figma-feedback-before-handoff.md
---

# Organize Figma Feedback Before Handoff

Design handoff gets risky when unresolved comments are scattered across screens. Developers need to know what changed, what was rejected, and what is still open.

For agencies and product teams, this is really a design review problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Group feedback by screen, resolve duplicate notes, separate bugs from preferences, document decisions, and turn approved changes into a clear handoff list.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Commentful helps because it can collect and organize design feedback around Figma work. It fits naturally into workflows involving client review, stakeholder feedback, approval workflows, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Commentful is the review layer that helps teams keep feedback attached to the right work.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Commentful tutorial or product page. You can also explore [Commentful](/commentful/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Design Approval Workflow for External Stakeholders
description: Create a design approval workflow for clients, managers, and non-designers reviewing Figma work.
datePublished: 2026-03-23T00:00:00.000Z
dateModified: 2026-03-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-design-approval-workflow-for-external-stakeholders/
markdownUrl: https://www.hypermatic.com/articles/commentful-design-approval-workflow-for-external-stakeholders.md
---

# Design Approval Workflow for External Stakeholders

External stakeholders usually want to react to the work, not learn a design tool. Approval workflows should make review easy while keeping feedback useful.

For agencies and product teams, this is really a design review problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Set review windows, explain what is ready for feedback, separate required changes from opinions, resolve duplicates, and capture final approval clearly.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Commentful helps because it can collect and organize design feedback around Figma work. It fits naturally into workflows involving client review, stakeholder feedback, approval workflows, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Commentful works as the way to make external review easier without losing Figma context.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Commentful tutorial or product page. You can also explore [Commentful](/commentful/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: tutorial
title: How to bulk export Figma banner variants from a spreadsheet to HTML or Video/GIF using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-03-22T00:00:00.000Z
dateModified: 2026-03-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-bulk-export-figma-banner-variants-from-a-spreadsheet-to-html-or-video-gif-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-bulk-export-figma-banner-variants-from-a-spreadsheet-to-html-or-video-gif-using-bannerify.md
---

# How to bulk export Figma banner variants from a spreadsheet to HTML or Video/GIF using Bannerify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how you can automatically export banner variants from your Figma files using data from a spreadsheet out to animated HTML banners or animated GIF or video banners using the Bannerify Figma plugin. 

To get started, all we need to do is go to our Figma file and just click on the actions icon down here. Then search for Bannerify. Under the Figma plugins tab, if you click on the Bannerify item, you can run that Figma plugin by clicking on the run button down here. Or you can click on the save button next to that, and then we can run it from our Figma plugins list. I'm just going to do that now by going to my canvas and right-clicking anywhere, going down to Figma plugins, and then going down to saved Figma plugins and clicking on the Bannerify item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically treats any parent level frames on your Figma page as potential banners, which you can then select here and load those banners into the Figma plugin timeline to animate the content layers inside of those and export them out to animated HTML or GIF or video banners. Today I'm not going to be going through all of the animation features in the Figma plugin. I'm going to assume that you've already got your design set up and you've got your animations all set up, and all you want to do is export multiple variations with different text or images automatically from a spreadsheet. You can basically just export batches of these banners with different copy and imagery from your initial banner set. I'm going to show you how to do that right now.

All we need to do is click on the variance button in the top menu of the Figma plugin. This is going to give us an area to load in a data source. In this case, we're going to be using a spreadsheet just using a CSV file. Importantly, you'll notice that I've matched up the header columns, the names of those columns with my Figma layers. For example, you can see this text layer here is named hashtitle, the same as this column here. Likewise with subtitle here, that's also named the same. We've also got a character image layer, which has been mapped up to this row D here. We've also got a CTA text named as button as well. All of these layers are mapping to our Figma banner layer content layers in terms of their names.

Now that we've got all those set up, I'm going to show you how to include images locally as well. If you don't need images, you don't need to worry about this step, and you can just drag and drop the CSV file directly. In my case today, I just want to show you how you can also include images. The way to do that is you basically have your spreadsheet file. In this case, I've got this banners.csv file. What you want to do if you need to include images is just make sure that the image names you've used in the spreadsheet are named the same as your images here. Then you just want to go ahead and zip up the CSV or Excel spreadsheet file along with the image assets that you want to include. In this case, I've already done that here. If I unzip a copy of the zip file, you'll see that inside of that zip file, we just have the same files, the CSV and then some PNG images.

Now, if I drag and drop this zip file into my Bannerify Figma plugin here, that should automatically load up a preview of the images and the content. Once I've dragged that in, you can see that it's loading up those three rows. I've loaded up all my content exactly, and it's also found those images and is loading a little preview there as well. Importantly, you can also customize the folder structure. If you want to use custom naming, you can check out the documentation if you click on that link there. That's going to give you just a bit more detail about all the different variables you can use. But today, I'm just going to leave that default.

Now that we've got all of that set up, we just go ahead and click on the close variance panel option. You can see here that it's picking up on that change. It's telling us that we got three variant rows selected. Now all you need to do is just export the banners as you normally would. You can just go ahead and click on export to HTML, for example. Select the platform you want to export the HTML for. Today I'm just going to leave it basic, just HTML and CSS. Then I'm going to go ahead and click on the export banners button, and that's going to load those 20 total variants and automatically swap out that content and the images as we're exporting it. You don't have to manually go through and update all of those content layers yourself.

Once it finishes, you can just go ahead and click on the download zip file button, save that anywhere to your computer, and then if you unzip that file, you'll see that we should have all of our banners exported. If I open up my banners folder, we've got all of these different variants in there. We can preview those all at once just by opening up the index.html file. In this case, you can see here it's loaded all those up. For each of the original designs, we've got all of these five banners here. For each of those, it's including those three other variants as well. You can see we've got one here, one here, one here, and likewise for all of the other sizes as well. That's looking really good. It's basically just loaded in the content. You can see all the different content we added and the different images. It's gone ahead and automatically swapped all of those layers out during that export process.

You can see that it's done it in a non-destructive way in Figma. All of our original Figma layers have been maintained. It basically just makes a copy of those temporarily, swaps out all the content, and then exports it to the final format. Likewise, you can export them to GIF or video as well. If you want to use that option, you just go ahead and click on the export to GIF or video button, select the format you want. If you need a GIF or an MP4, you just go ahead and do that. Clicking on the export button again will automatically export all of those variants from your spreadsheet out into that other video format or GIF format as well. That's basically what it looks like. It's the same process. You can just control it all through the variance panel up here, and then you'll be good to go.

Importantly, it's worth noting that because there's a file size limit on the data you can store in Figma, if you are running the Figma plugin and closing it off between sessions, you will just have to reimport that data back into the variance panel. For example, I've just reloaded the Figma plugin. Now, if I go to the variance panel, you'll notice that it's empty. Again, we just have to quickly drag and drop our asset back into there. It's going to load up the content again, and then you're ready to go. It's got the number three for three rows, and you can see it's linking up those bits of data here as well. That's going to automatically get included when we export the banners.

You can also temporarily turn it off. If you've loaded it in but you just need to export a banner batch without those variants, you can temporarily just toggle that off, and that will just turn off the exports for the time being. You can see it's disabled for export. Likewise, if you only want certain variants, you can just uncheck those, and that will automatically exclude or include any of the rows. If you have loaded in a spreadsheet and it's got a thousand rows or something crazy, and you actually only need the first few, you can just uncheck all of them and check the ones you need, and it'll tell you that two of the three are going to be included in the export.

As I said, there are a few more options that you can go through in the documentation. If you go ahead and open that up just using the link, you can see there's a bunch of different options you can use for the naming. You can include things like the row number, the layer name, the width and height, and things like that. That's going to give you really flexible naming. You can also use the forward slash character if you need to create folders as well. For example, you could have banners/row number or something like that, and that would automatically include those variables into your naming. It's totally up to you however you want to kind of go ahead and name those folders or have them exported. By default, it's just going to create its own kind of naming structure there.

That's basically it. As I said, there are way more options. If you want to go into detail with what you can do, just check out the documentation. There are all kinds of things you can do in terms of styling and showing and hiding layers and things like that. Make sure you go through and check that out, and you'll be able to figure out other things you can do with these settings. I'll leave it there for today. I just wanted to give you a quick overview of using this feature. If you've been wanting to create variants of your banner exports from a spreadsheet, this is going to be a really easy way to go about it. At the moment, it's just supporting CSV or Excel files, but Google Sheets and other platforms will be getting added in the future. You'll be able to select a different data source in this Figma plugin, but for now, I just wanted to give you the basic fundamentals of using it. That will also apply in the future if you do get to choose a different option instead of the CSV or Excel local files. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Figma Comments vs Client Proofing Workflow
description: Understand when native Figma comments are enough and when a client proofing workflow is better.
datePublished: 2026-03-21T00:00:00.000Z
dateModified: 2026-03-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-figma-comments-vs-client-proofing-workflow/
markdownUrl: https://www.hypermatic.com/articles/commentful-figma-comments-vs-client-proofing-workflow.md
---

# Figma Comments vs Client Proofing Workflow

Native Figma comments are great for design teams, but external clients may need a simpler review experience with clearer approval expectations.

For agencies and product teams, this is really a design review problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Compare account friction, notification clarity, comment organization, approval status, privacy, and how easily feedback returns to the design team.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Commentful helps because it can collect and organize design feedback around Figma work. It fits naturally into workflows involving client review, stakeholder feedback, approval workflows, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Teams should choose the right review workflow instead of assuming comments alone solve every client review.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Commentful tutorial or product page. You can also explore [Commentful](/commentful/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Client Feedback Workflow for Figma Agencies
description: Collect client feedback on Figma work without scattering notes across calls, screenshots, and email.
datePublished: 2026-03-19T00:00:00.000Z
dateModified: 2026-03-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-client-feedback-workflow-for-figma-agencies/
markdownUrl: https://www.hypermatic.com/articles/commentful-client-feedback-workflow-for-figma-agencies.md
---

# Client Feedback Workflow for Figma Agencies

Client feedback becomes hard to act on when notes are split across meetings, email threads, PDFs, screenshots, and Figma comments. A workflow gives feedback a single path.

For agencies and product teams, this is really a design review problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Define who reviews, what kind of feedback is useful, when review closes, how comments are triaged, and how approvals are recorded.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Commentful helps because it can collect and organize design feedback around Figma work. It fits naturally into workflows involving client review, stakeholder feedback, approval workflows, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Commentful works as the calmer path for external design review.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Commentful tutorial or product page. You can also explore [Commentful](/commentful/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Image Crop Approval Workflow for Marketing Teams
description: Review and approve multiple image crops before they ship across marketing channels.
datePublished: 2026-03-16T00:00:00.000Z
dateModified: 2026-03-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-image-crop-approval-workflow-for-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-image-crop-approval-workflow-for-marketing-teams.md
---

# Image Crop Approval Workflow for Marketing Teams

Image crop feedback is often vague because stakeholders review one channel at a time. A better approval workflow shows all critical crops together before launch.

For marketing designers and ecommerce teams, this is really a batch image resizing problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Review focal points, safe areas, text overlays, product visibility, channel requirements, and any crop that changes the meaning of the image.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

HyperCrop helps because it can batch crop and resize image assets from Figma with reusable presets. It fits naturally into workflows involving social asset resizing, ecommerce imagery, campaign image production, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

HyperCrop is the tool that helps teams revise and regenerate approved crops quickly.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant HyperCrop tutorial or product page. You can also explore [HyperCrop](/hypercrop/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Campaign Image Production from One Figma File
description: Create campaign image variants for ads, email, social, and landing pages from one Figma file.
datePublished: 2026-03-14T00:00:00.000Z
dateModified: 2026-03-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-campaign-image-production-from-one-figma-file/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-campaign-image-production-from-one-figma-file.md
---

# Campaign Image Production from One Figma File

Campaign visuals rarely ship in one size. The same idea may need social crops, ad sizes, email images, landing page graphics, and internal previews.

For marketing designers and ecommerce teams, this is really a batch image resizing problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Plan master creative, channel presets, approval previews, export names, crop QA, and ownership of final variants.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

HyperCrop helps because it can batch crop and resize image assets from Figma with reusable presets. It fits naturally into workflows involving social asset resizing, ecommerce imagery, campaign image production, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

HyperCrop turns campaign image production into a repeatable system when presets, crops, and approvals are defined upfront.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant HyperCrop tutorial or product page. You can also explore [HyperCrop](/hypercrop/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: tutorial
title: How to translate email designs in Figma with ChatGPT (automatically) using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-03-14T00:00:00.000Z
dateModified: 2026-03-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-translate-email-designs-in-figma-with-chatgpt-automatically-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-translate-email-designs-in-figma-with-chatgpt-automatically-using-emailify.md
---

# How to translate email designs in Figma with ChatGPT (automatically) using Emailify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how you can automatically translate your Figma email designs into multiple languages using ChatGPT in the Emailify Figma plugin. To get started, all we need to do is go to our Figma file, go down to the actions icon down here, and just search for Emailify. Under the Figma plugins tab, if you click on the Emailify item, you can run the Figma plugin by either clicking on this run button down here or clicking on the save icon next to that. Then we can run the Figma plugin from our Figma plugins list.

Now I'm just going to go to my Figma canvas. I'm going to right-click anywhere, just go down to plugins, and then go down to saved plugins and click on Emailify. That's just going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, the way that it works is it basically helps you to design HTML emails in Figma, which you can then export to production-ready HTML automatically from the Figma plugin. Today, I'm not going to be showing you the design process as such. I'm going to assume that you've already got your email design set up using the Emailify Figma plugin. Today, we're just going to be clicking on this localize option in the header here.

If we go ahead and click on localize, we're basically going to automatically translate this email design into multiple languages. I'm going to show you how to do that now. By default, the localization option is currently set to Excel, but we're going to go down and use the ChatGPT options. We have two different ChatGPT options. We can either use the ChatGPT API, which we're going to do in just a moment, and I'm also going to show you how to do it manually just by using a manual prompt as well. If you don't want to create API keys or don't want to do anything like that, we're also just going to use the regular ChatGPT interface, and I'm going to show you how to do it that way as well.

The first one I'm going to show you is the API method. What you want to do is basically select this dropdown list up here and just make sure the option is set to ChatGPT API. This is going to be under the AI translation API options. I'm going to click on the ChatGPT API option, and it's going to ask you for your API key. What you need to do is just click on this API key link here, and that's going to take you to the openai.com developers section. You just need to make sure you've got an account and you've got some billing set up, and then you can just create a new OpenAI API key. Go ahead and click on create new secret key, and you can then copy that directly into the Figma plugin here, and then we are basically ready to go.

It's going to allow you to choose a model. At the moment, it's just using the GPT 4.1 mini model, which is more of a faster, more cost-effective model. You can select the 4.1 model as well and other models in the future. I'm just going to make sure that's checked. Then all you need to do is just add the local languages you want to translate to. In this case, we might pick French, we might pick Korean, and we might pick German. We're just going to do these three for now. Because we've only got one email in our design, I'm just going to keep that one checked over here. If you've got more, you can check those ones as well. Then all you need to do is click on the translate and import button. That's basically going to load up all of the text content from our email, and then it's going to use that ChatGPT API key to connect with ChatGPT via API.

You notice we're not going into the browser; it's happening all through the Figma plugin. It's basically behind the scenes translating all of this content for each of these three locales that we added. It's done French; it's now doing Korean. In a moment, once it finishes that one, it will move on to German. Then we'll be able to automatically have those locales imported into our Figma file. It's just doing the last one now, and once that finishes, you'll see it automatically take all those translations that it just got back from the ChatGPT API. In a moment, it will automatically import all of those as brand new Figma designs using our original design and updating that content.

You can see here that we've just finished ChatGPT translating those three localizations from our original email. It says three locales created, and we can see that in here. What it's basically gone ahead and done is created a new page in our Figma file just calling it a translation frame. It's taken the original frame and made a copy of that, and that's called the global translation. Then we can see it's also gone ahead and created three new frames. We've got our French version, we've got our Korean version, and we've got our German version as well. Every single text layer has been translated, and that's all looking really good. Again, we didn't have to leave the file to do it; we could just do it directly via the API.

If you prefer not to use the API or you don't have a key or you just prefer to use the regular ChatGPT site at chatgpt.com, you can also do that as well. I'm going to show you how to do that now just by going back to our original page. I'm going to jump back there, and once again I'm going to click the localize button. Instead of using the ChatGPT API option, we're going to scroll down a bit further, and you can see there's another section down here called AI translations, and then it says manual in brackets. Instead of the ChatGPT API option that we had a second ago, we're going to now change that to ChatGPT prompt. This is a slightly different one. You'll notice that there's a new button up here. There's no API field; it's just saying generate prompt.

We've got our same three languages in there. I'm just going to click on generate prompt. That's going to automatically fetch all of the text content from our design. It's going to generate a custom prompt, which we can now copy to our clipboard. You notice this button wasn't there before. The first thing we need to do is click on generate prompt, which we just did. Then, we need to click on copy prompt to clipboard. I'm going to do that now. That's copied the prompt to the clipboard, and it's telling us to paste it into ChatGPT. Now I'm going to go back to ChatGPT in the browser, and I'm just going to click on the input field there and paste from my clipboard.

You'll notice that we did click that copy prompt to clipboard button. I've just gone ahead and pasted all that content into ChatGPT, just the regular ChatGPT window. Now I'm just going to send that off to ChatGPT. That's going to automatically go ahead and translate this using ChatGPT, and it's going to give it back to us in a format that we can then paste into the Figma plugin and translate those frames. You'll notice that it's going through and translating all of that content. Because this is a customized prompt specifically for email, it's telling the ChatGPT window exactly what format we expect and giving it very strict instructions about what to do and how we need that content brought back to us in the final response.

You can see it's going through and making all those translations. We're doing all three languages in one prompt. That's basically going to take a moment, and now it's just finished. Once it finishes, all we need to do is click on the copy response button in ChatGPT. That's now copied to our clipboard. We've basically just copied this entire CSV response. The third and final step in Emailify is we want to go down here to where it says paste the ChatGPT reply below. I'm going to click on that text field, paste the contents that we just copied out of ChatGPT. We pasted it into there, and finally, we just go ahead and click on translate Figma frame. I'm going to click on that now, and that's going to do the exact same process.

You can see it's imported the ChatGPT CSV translations. Once again, we've now got these translated Figma frames that have taken our original content, which we've run through the chatgpt.com window over here. We've pasted in that response, and the Figma plugin has taken that response and automatically generated three new translated versions of our email, and that's basically good to go. Those are the two different options you can use. If you're interested in automatically translating your email designs in Figma, you can use the ChatGPT API if you prefer that option and you have an API key already set up or you're willing to set that up.

The easier method is just to use the ChatGPT prompt option, and then you can just go straight to chatgpt.com. You don't even need an account; you can just drop it straight in there, get the response back, and manually copy-paste that back into this field here, and you'll get the same outcome. That's basically it. I hope that's been helpful if you've been wondering how to quickly localize and translate your Figma email designs in the Emailify Figma plugin. Once you've finished importing that, you can then preview these as real HTML in the Figma plugin.

We can see here that we've got our translated version all in HTML. If you want to export those out to HTML emails, you just go ahead and click on the export HTML button here. Then you just select the platform you want the export to go to. In this case, I'm just going to leave it default and click on export to HTML. That's going to automatically generate the HTML, the images, and all of the code that we need for each of those four emails in this case. Once that's finished, you just go ahead and click on download your zip file and just save that anywhere to your computer, or it might have been uploaded if you uploaded it to a platform. You'll basically just have access to all of your HTML code for each of those locales there.

We can load up the preview page just to show you what that looks like. If we open up that in a new window and drop that in, you can see here that we've got our emails all exported in those different translated versions. This is all HTML. If you're running a global campaign or running a campaign that needs to be in different languages, this is a really easy way to generate all of those different translations just by using the ChatGPT versions or ChatGPT API and prompt versions and then exporting it out to HTML from the Figma plugin. That's going to be it for today. I hope that's been helpful, and thank you as always for watching. We'll be back soon with more Figma tutorials like this one.

---

---
type: article
title: Photoshop Actions Alternative for Figma Image Teams
description: Compare Photoshop Actions with a Figma-first batch cropping and resizing workflow.
datePublished: 2026-03-12T00:00:00.000Z
dateModified: 2026-03-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-photoshop-actions-alternative-for-figma-image-teams/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-photoshop-actions-alternative-for-figma-image-teams.md
---

# Photoshop Actions Alternative for Figma Image Teams

Photoshop Actions are powerful, but they can feel disconnected when the campaign source assets already live in Figma. Figma-first teams often want the crop and resize workflow closer to the design file.

For marketing designers and ecommerce teams, this is really a batch image resizing problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Compare repeatability, designer ownership, source-file context, preset maintenance, and how easy it is to revise crops after feedback.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

HyperCrop helps because it can batch crop and resize image assets from Figma with reusable presets. It fits naturally into workflows involving social asset resizing, ecommerce imagery, campaign image production, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

HyperCrop works as an alternative for teams that do not want every batch resize to leave Figma.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant HyperCrop tutorial or product page. You can also explore [HyperCrop](/hypercrop/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Ecommerce Product Image Cropping Checklist
description: Prepare ecommerce product images for product pages, marketplaces, email, and ads.
datePublished: 2026-03-10T00:00:00.000Z
dateModified: 2026-03-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-ecommerce-product-image-cropping-checklist/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-ecommerce-product-image-cropping-checklist.md
---

# Ecommerce Product Image Cropping Checklist

Ecommerce image crops need consistency. Product framing, whitespace, aspect ratios, and marketplace rules all affect how trustworthy a product page feels.

For marketing designers and ecommerce teams, this is really a batch image resizing problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Check focal point, background, margins, aspect ratio, retina size, marketplace requirements, email crops, ad crops, and batch consistency.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

HyperCrop helps because it can batch crop and resize image assets from Figma with reusable presets. It fits naturally into workflows involving social asset resizing, ecommerce imagery, campaign image production, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

HyperCrop works as the way to apply repeatable crop rules from Figma.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant HyperCrop tutorial or product page. You can also explore [HyperCrop](/hypercrop/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Social Media Image Resizing Workflow in Figma
description: Resize campaign visuals for social channels from a single Figma source file.
datePublished: 2026-03-08T00:00:00.000Z
dateModified: 2026-03-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-social-media-image-resizing-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-social-media-image-resizing-workflow-in-figma.md
---

# Social Media Image Resizing Workflow in Figma

Social media asset production gets repetitive fast because every channel wants a different crop, aspect ratio, safe area, and text treatment.

For marketing designers and ecommerce teams, this is really a batch image resizing problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Start with a master visual, define channel presets, protect important focal points, check copy fit, preview each crop, and export final sizes with consistent naming.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

HyperCrop helps because it can batch crop and resize image assets from Figma with reusable presets. It fits naturally into workflows involving social asset resizing, ecommerce imagery, campaign image production, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

HyperCrop is the workflow tool that makes those presets repeatable.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant HyperCrop tutorial or product page. You can also explore [HyperCrop](/hypercrop/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: tutorial
title: How to export Figma to Adobe Photoshop (.psd) files with one click using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-03-07T00:00:00.000Z
dateModified: 2026-03-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-adobe-photoshop-psd-files-with-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-adobe-photoshop-psd-files-with-one-click-using-convertify.md
---

# How to export Figma to Adobe Photoshop (.psd) files with one click using Convertify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how you can export your designs from Figma to Photoshop PSD files with one click using the Convertify Figma plugin. 

To get started, all we need to do is go to our Figma file. Go down to the actions icon at the bottom here. If you click on that and search for Convertify under the Figma plugins tab, you can run the Figma plugin by either clicking on this run button down here or I'd recommend clicking on the save icon next to that, and that's just going to save it to your Figma plugins list. I've already clicked on the save icon, so I'm just going to go back to my Figma canvas. I'm just going to right-click anywhere and then go down to plugins, then go down to saved plugins and click on the Convertify item. That's just going to run the Figma plugin we saved a second ago.

By default, the Figma plugin will export Figma to Sketch files, but there's a whole bunch of other export from Figma options down here and also import to Figma options. Today we're just going to be focusing on this one down here, which is called export Figma to Adobe Photoshop. If you click on that, you can basically then have the option of exporting the entire page, so all of these artboards out to an Adobe Photoshop PSD file. Or if you only need selected artboards, you can just select those frames on your page and then click on the export selected frames button. For today, I'm just going to keep it simple and export the whole page. I'm just going to click on this export this page button with my export Figma to Adobe Photoshop option selected up here. I'm just going to go ahead and click on that now. That's going to go through every single layer in your page or in those artboards, and it's going to convert all of those into a single PSD file. You can see here it was pretty quick; there are only five artboards for this one. It's going to say that your converted PSD file is ready. You can just go ahead and click on the download PSD button in the footer down here. Click on that, and you can then save that anywhere to your computer directly. I'm just going to save that to my desktop. If I now double-click that PSD file, that's going to open it up in Adobe Photoshop.

You can see here we've got all of our artboards that have been exported from Figma. In our PSD file that we've just converted, you can see that we've got all of these as individual layers. We can resize and edit those. We can edit text; we can edit all of those content layers as you can see in our layers panel down here. Those are all being included. You'll notice that the icons have all been carried over, which is really great. We can edit those if we need to as well. These are all editable layers. Instead of manually recreating all those layers from Figma into PSD if you need to work with the designs in Photoshop for any reason, this is going to be a really easy way to get started. As you might have seen before, this feature is still in beta. Although it does work, there might be a few bits and pieces that aren't quite exactly right. You can see some of these tags over here; some of the measurements as far as these tags go are a little bit different. Some of these are just related to how Figma and Photoshop render certain things as well. In any case, this is going to get you very far with that import process, and then you can just tweak anything that you notice that isn't 100% correct.

Just to give another example, if we also wanted to do a bigger page like this landing page, for example, which is just a single frame, we can run the Figma plugin by just clicking anywhere, right-clicking on the page, going down to Figma plugins, and then going down to saved Figma plugins, and clicking on the Convertify item as well. That's going to fire up the Figma plugin one more time in this other Figma file. Again, we've only got one frame, one long artboard on this frame for this website mockup. We're just going to export that entire page. I'm just going to click on export this page. Once again, it's going to go through all of the layers. There are 584 layers in this particular frame. It'll give you an estimate, but often it's much quicker than the estimate. 

Once it finishes bundling the PSD file, it's going to tell us that the converted PSD file is ready. I'm just going to again click on the download PSD button here, save that to my desktop directly, and I'm going to double-click on that new PSD file on my desktop. That's going to open up a new tab in Photoshop. You can see here it's saying some of the text layers might need to be vectorized before they can be used as vector output. I'm just going to leave those off for now because I believe a lot of these text layers have a font that I don't have installed on this particular machine. You can see here it's got a little warning saying that the font isn't installed. I won't be able to edit those until I actually install the font. That's going to look a bit odd. You can see here it's rendering a little bit differently than in the Figma file. But all of the layers have been included. We can see we've got all of the content layers here. We've got all the image assets. We've got all these icons. All of those are being carried over from Figma as we'd expect. Again, you can see in the layers panel, these are all being reflected from the Figma layers down here. These are all being named the same. All of the content structure is going to be the same as far as the layers go. You've basically got direct access to all of those individual layers to edit however you like. Once again, this is just going to save you a whole bunch of time if you are needing to go from Figma out to Photoshop. This is going to be a really easy way of automatically doing that without having to manually recreate every single one of those layers in PSD, which would be quite painful.

That's basically it. I just wanted to run through a couple of really quick examples just to show you how to do that using the Convertify Figma plugin. It's literally just this one-click process now where you just open up your Figma file, select the export Figma to Photoshop option, and either click on the export this page button or if you only want to export a selection, just click on the parent level frames in Figma, select any of those, and you can just export those selected frames out on their own. I'll show you what that looks like really quickly, just to give you a full walkthrough. In this case, I'm just going to export these three frames. I'm just going to export those ones. I'm going to click on export selected frames this time with those three layers selected. This time, it's just going to take those three frames into account rather than doing the whole page. If I save that one last time to my desktop and open that up, you can see here that this time we've just got those three artboards that we exported from Figma. Because that's just reusing the position of those artboards from Figma, you can see that because we didn't include those middle two, those are being removed. Of course, you can rearrange that as needed in Photoshop as well. That's what it looks like to export a subset of the frames if you don't want to export an entire page in case you've got a massive amount of frames on the page and you just want a few of them into Photoshop. 

We'll leave it there for today. I hope that's been useful. If you or your team has been wondering how to automatically get your Figma designs into Photoshop as PSD files, this is an option you can now try out just by firing up the Convertify Figma plugin and using that new option in the export options. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Agency Workflow for Mixed Design File Formats
description: Handle mixed client design files across Figma, Sketch, XD, Photoshop, Illustrator, and PDF without slowing projects down.
datePublished: 2026-03-06T00:00:00.000Z
dateModified: 2026-03-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-agency-workflow-for-mixed-design-file-formats/
markdownUrl: https://www.hypermatic.com/articles/convertify-agency-workflow-for-mixed-design-file-formats.md
---

# Agency Workflow for Mixed Design File Formats

Agencies rarely get a perfect design handoff. A mixed-format workflow keeps client files moving without turning every project into a manual rebuild.

For agencies and design operations teams, this is really a file conversion problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Create a format intake process, decide what must become editable, convert the right files, clean up converted designs, and document limitations before delivery.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Convertify helps because it can move design files between Figma and other creative formats. It fits naturally into workflows involving legacy file migration, client file intake, cross-tool handoff, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Convertify is the product card for reducing the manual rebuild tax.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Convertify tutorial or product page. You can also explore [Convertify](/convertify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Legacy Design File Cleanup After Migration
description: Clean up converted design files after bringing legacy work into Figma.
datePublished: 2026-03-04T00:00:00.000Z
dateModified: 2026-03-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-legacy-design-file-cleanup-after-migration/
markdownUrl: https://www.hypermatic.com/articles/convertify-legacy-design-file-cleanup-after-migration.md
---

# Legacy Design File Cleanup After Migration

Converted files often need cleanup before they are useful. Layers may be grouped strangely, fonts may shift, components may be missing, and images may be flattened.

For agencies and design operations teams, this is really a file conversion problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Review typography, layer names, components, duplicated assets, auto layout opportunities, missing fonts, and export quality.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Convertify helps because it can move design files between Figma and other creative formats. It fits naturally into workflows involving legacy file migration, client file intake, cross-tool handoff, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

This cleanup pass fills the gap after conversion, which many tutorials skip.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Convertify tutorial or product page. You can also explore [Convertify](/convertify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Figma File Conversion Tools Compared
description: Compare options for converting design files into and out of Figma.
datePublished: 2026-03-01T00:00:00.000Z
dateModified: 2026-03-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-figma-file-conversion-tools-compared/
markdownUrl: https://www.hypermatic.com/articles/convertify-figma-file-conversion-tools-compared.md
---

# Figma File Conversion Tools Compared

There are several ways to convert files around Figma: native import/export, manual rebuilds, scripts, online converters, or dedicated plugins. Each has different tradeoffs.

For agencies and design operations teams, this is really a file conversion problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Compare fidelity, editability, speed, privacy, cleanup effort, supported formats, and repeatability.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Convertify helps because it can move design files between Figma and other creative formats. It fits naturally into workflows involving legacy file migration, client file intake, cross-tool handoff, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

This comparison helps teams decide when a dedicated tool like Convertify is worth using.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Convertify tutorial or product page. You can also explore [Convertify](/convertify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Client Design File Intake Checklist
description: Use this checklist when clients send Sketch, XD, PSD, Illustrator, PDF, or other design files.
datePublished: 2026-02-27T00:00:00.000Z
dateModified: 2026-02-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-client-design-file-intake-checklist/
markdownUrl: https://www.hypermatic.com/articles/convertify-client-design-file-intake-checklist.md
---

# Client Design File Intake Checklist

Agencies often receive whatever file format the client has, not the format the team wants. A good intake process reduces surprises before the project schedule depends on those files.

For agencies and design operations teams, this is really a file conversion problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Ask for source files, linked assets, fonts, export requirements, editable expectations, references, and approval of conversion limits.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Convertify helps because it can move design files between Figma and other creative formats. It fits naturally into workflows involving legacy file migration, client file intake, cross-tool handoff, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Convertify works as the practical way to bring many of those files into a Figma workflow.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Convertify tutorial or product page. You can also explore [Convertify](/convertify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: tutorial
title: How to add scrollable text disclaimers (with auto-scroll option) to HTML Figma banners using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-02-27T00:00:00.000Z
dateModified: 2026-02-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-scrollable-text-disclaimers-with-auto-scroll-to-html-figma-banners-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-scrollable-text-disclaimers-with-auto-scroll-to-html-figma-banners-using-bannerify.md
---

# How to add scrollable text disclaimers (with auto-scroll option) to HTML Figma banners using Bannerify

#### Video Transcript

Today I'm going to be showing you a quick Figma tutorial on how you can add scrollable text areas to your HTML animated banners in Figma using the Bannerify Figma plugin. To get started, all we need to do is go to our Figma file, go to the little actions icon down here, and if you click on that and search for Bannerify, under the Figma plugins tab, if you click on the Bannerify item, you can run the Figma plugin by either clicking on this run button down here, or I'd recommend clicking on the save icon next to that. That's going to let you run the Figma plugin from your Figma plugins list. I've already clicked on the save icon, so I'm just going to go to my Figma canvas, right-click anywhere, go down to plugins, and then go down to saved plugins, and click on the Bannerify item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it basically works is it treats any Figma frames on your current page as potential banners, which you can select in the Figma plugin here. Then it uses all of the content layers to create animatable layers in your timeline. In this case, I'm just going to load in all three of these banners on my page and click on the load check banners button. As you can see here, it's loaded in all of the content layers. I've got a bunch of different content layers here in this frame, and that's being added to the timeline in the Figma plugin. I'm not going to go through all of the animation features today in this tutorial. We've got some other tutorials that cover those in more detail, but basically all you do is just select the animation that you want for each layer, and then you can play around with the timings using the animation settings here.

I've already got a bunch of animations applied to these layers. Today, I'm going to be focusing mainly on how to add scrollable text content to your banners. Sometimes in certain industries, like education or pharmaceutical industries, they need these really long text disclaimers that need to be added to the banners, and they need to be scrollable because they're really long. To make this really easy, the Figma plugin has a feature where you can basically turn any text layer into a scrollable area by clicking on the text layer in your banner and then going over to the typography section in Figma, going to the settings panel, and then just going down to the truncate text option right down at the bottom here. We're going to change it from no truncation to the truncation enabled option. If I click on that, you can see here that we've now changed that to be a truncated text box, which means that if I expand and contract this, you can see that over here, it's basically adding three dots at the end for that overflow. That means we can resize the text without it overflowing over the edges. This is going to determine the size of our scrollable text area. For example, if I wanted to make it this high, I could easily just position that with the truncation option on. Once we export that in a second, I'll show you what that looks like.

Now that we've got the truncation option on, we just have to go to our layer with all of that text in our timeline. Go to the settings panel over here. If you open that up, you'll see that we've got this option here, which is called enable scrollable HTML text, but it's only available for those truncated layers. Because we just added this after the banners were refreshed, that wasn't showing up. You can refresh the banners by just clicking on the refresh icon here or refreshing all of the banners in here. If you reload that and then click on the settings icon again, you'll notice that the truncated text layer enable scrollable text option is now enabled. If I just go ahead and click on the enable scrollable text option, you can see we've now got this dropdown list of options where I can have it as a manually scrollable area, which means that the user has to scroll that in the HTML, which we're going to export in a moment, or we can also automatically scroll the layer. We can either do that when the layer first comes into view, or we can actually wait until the banner has completely finished playing and then start auto-scrolling. I'm going to show you all three of these options now.

For example, if we close this off and then we click on the export to HTML button over here and then just export that as HTML in this case. You can choose different options, of course, but I'm just going to keep it simple. Because we've got this scrollable version, I'm going to turn off the infinite loop for all the banners. I'm just going to make that play one time. I'm going to click on the export one banner button down here at the bottom. That's just going to export the banner that we just loaded up, and I'm going to download that to my desktop. I'm just going to click on the save button, save that to my desktop, and I'm going to unzip that. I've got this folder now because I've just unzipped the file that was downloaded from Figma. Then, I'm just going to load in this index HTML preview file into my browser. You can see over here I've now got this text layer which I can now scroll. This is a scrollable text layer. I can scroll through all of that disclaimer text, and it's not taking up too much space, which is great. Of course, you can adjust that if you want to make it a bit longer or a bit shorter. It's totally up to you. You can go ahead and customize that however you like.

I'll just show you what the automatic options look like as well. If we go back to the layer settings, I'm just going to click on this little shortcut to open up the layer settings. We're going to change this from manually scrollable to automatically scrolling on enter. This is going to start automatically scrolling that text as soon as the layer enters. If you look at the timeline here, it's entering just after 1 second. It'll automatically start scrolling after that. If I re-export the HTML, I'm just going to again click on the export banner button. I'm going to export that and download it to a zip file, a new one. Then I'm just going to open up that file and unzip the folder just here. Now, if we drag and drop that file into the browser again, you will see that this time it automatically starts scrolling the text. It's going to automatically scroll from the top to the bottom of all of that text after it started entering the timeline. You can see it stopped out there, and it scrolled from the top to the bottom automatically. You don't need to do anything there.

The last option I'll go through now is just changing that one more time. We're going to change it from auto scroll on layer enter to auto scroll on banner end. That basically means that it's only going to start scrolling after the entire timeline, which in this case is 5 seconds. It'll start playing after that 5-second mark. Importantly, if you've got the banners set to play multiple times, for example, if you set this to three, which means that it's going to play through the timeline three times before it stops animating things, then it's going to do that at the end of that three-tier cycle because it's going to repeat the banner each time. In this case, again, I'm just going to keep it really simple and set that to one playthrough. I'm going to click on export banner once again, and we're going to see what this looks like with that final option. I'm just going to save that to my desktop. I'm going to open up the zip. You can see I'm just going to get rid of these two folders so we don't get them confused. I've just unzipped that, and one last time, I'm just going to drag and drop the HTML preview file into the browser. You can see it's not scrolling. It's waiting for that 5-second mark, and then it's going to start scrolling. This can be really handy if you've got a longer banner which has to go through some multi-stage animation. Maybe you're showing off some different information with a few different frames, and it might be a 10 to 15-second banner, and you only want that disclaimer text to start scrolling at the end. This is going to be a really good option for doing that. You want to make it auto scroll on banner end. In other cases, it's probably just going to be easier to make it either auto-scroll when the layer shows up or the default option, which is just allowing the user to manually scroll through the disclaimer text whenever they like after it has entered the banner timeline.

That's basically what it looks like there. I only did this for one banner, but of course, once you've set it up for one, you can just copy and paste those layers. In this case, I'm just going to copy it into my other frames down here. Of course, these are different sizes, so we might want to readjust that. We can change that like this. Likewise, we can grab this one again. I'm just going to change the background width and grab those two layers and finally add it to this last frame. Again, we're probably just going to want to change the width of those just to make them fit the banner. Now, if we refresh all of the banners, I'm just going to click on the refresh all banners button up here, load all three of those frames in again. I'm just going to click on load all banners. If we load them in and scroll down to the other ones, you can see here that we've basically got those layers. Because we copied that original layer, which has the setting toggle already applied to it, if we scroll down here, you'll notice that that's already been pre-applied down here and to this one as well. That's basically good to go, which means that if we now click on the export to HTML button one final time and then click on the export three banners button on this export section here, we're going to download that to a zip file with all three banners now all having the scrollable text set up. I'm going to download that zip file again to my computer. Just go to my desktop again. I'm just going to delete the other folder and then open up this zip file. I'm going to drag and drop the index file into the window over here. We can see here that all three now have text. Because we enabled that setting, you can see that all of them are scrollable. We can scroll through the disclaimer text on all three independently, and that's looking really great. Again, you can customize this to your liking. You can change the font, size, color, line height, letter spacing, and all that sort of stuff. That's totally up to you. I just did a rough estimate of what it probably will look like with the smaller text. Of course, if you need more contrast, you can just edit the background layers as well. If you want to add a background layer to those and you want them to be a little bit more full of contrast, if we wanted them to be pure black in this case, we could just do that and then add that there. Again, you may or may not want to do this depending on your design. You can basically just export that however you like, and that's going to automatically flow through.

I'll show you what that looks like now. You can see this as a final example, again, just based on purely how you want to customize the design. I'll do this one last example and then we'll wrap up. I'm just going to save that to my desktop. This time we're going to have it with the new background layer instead of having the nice sort of gradient fill. Now that we've just unzipped that, we're just going to finally drag this last index.html file back into the browser. Load that up, and once again, you can see we've got the scrollable text, this time with a higher contrast solid background color. You can totally customize that however you like. I just wanted to show you there's a little bit of flexibility there in terms of the creative side as well. That's basically it. I hope that's been really helpful. If you've been wondering how to easily add scrollable HTML text to your animated HTML banners, this is going to be a really easy way to go about it. You just have to once again enable the text truncation option in Figma down here. Just make sure that's set to truncation enabled. That will then unlock the toggle here, so you can then enable the scrollable HTML text option. It's totally up to you what kind of scroll style you want. This is going to allow you to do it without writing a single line of code. You don't have to add any custom code options, which you can also do if you want to. You can add things like custom HTML, JavaScript, and CSS into your banners. Again, this is going to be a much more seamless way of doing it automatically. We'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Design Tool Migration Plan for Figma
description: Plan a cleaner migration from Sketch, Adobe XD, Illustrator, Photoshop, or PDF files into Figma.
datePublished: 2026-02-25T00:00:00.000Z
dateModified: 2026-02-25T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-design-tool-migration-plan-for-figma/
markdownUrl: https://www.hypermatic.com/articles/convertify-design-tool-migration-plan-for-figma.md
---

# Design Tool Migration Plan for Figma

Design tool migrations fail when teams treat conversion as the entire job. Getting a file into Figma is only the first step; the file still has to become usable.

For agencies and design operations teams, this is really a file conversion problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Audit source formats, fonts, images, components, legacy libraries, ownership, conversion expectations, and cleanup time.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Convertify helps because it can move design files between Figma and other creative formats. It fits naturally into workflows involving legacy file migration, client file intake, cross-tool handoff, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Convertify is the conversion layer, but the migration plan around it determines whether the final Figma file is actually useful.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Convertify tutorial or product page. You can also explore [Convertify](/convertify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Frontend Developer Review of Figma Files
description: Give developers a repeatable review process for checking Figma files before implementation.
datePublished: 2026-02-23T00:00:00.000Z
dateModified: 2026-02-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-frontend-developer-review-of-figma-files/
markdownUrl: https://www.hypermatic.com/articles/weblify-frontend-developer-review-of-figma-files.md
---

# Frontend Developer Review of Figma Files

Developer review should happen before build estimates are locked. A quick Figma file review can surface unclear states, missing assets, impossible layouts, and ambiguous component behavior.

For frontend developers and design systems teams, this is really a developer handoff problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Review layout structure, tokens, components, icons, imagery, copy, breakpoints, interaction notes, and dependencies.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Weblify helps because it can inspect Figma layers as code-friendly HTML, CSS, React, Tailwind, and Vue output. It fits naturally into workflows involving frontend handoff, design token translation, component implementation, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Weblify works as a way to inspect the file through a frontend lens.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Weblify tutorial or product page. You can also explore [Weblify](/weblify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Figma Auto Layout to Responsive Code
description: Understand how Figma Auto Layout decisions affect responsive frontend implementation.
datePublished: 2026-02-21T00:00:00.000Z
dateModified: 2026-02-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-auto-layout-to-responsive-code/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-auto-layout-to-responsive-code.md
---

# Figma Auto Layout to Responsive Code

Auto Layout can communicate design intent, but it does not automatically solve responsive frontend behavior. Developers still need to understand wrapping, constraints, min widths, and content changes.

For frontend developers and design systems teams, this is really a developer handoff problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Explain how frame structure, spacing, resizing rules, and component variants affect code translation. Include examples of Auto Layout choices that make implementation easier.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Weblify helps because it can inspect Figma layers as code-friendly HTML, CSS, React, Tailwind, and Vue output. It fits naturally into workflows involving frontend handoff, design token translation, component implementation, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

The workflow helps both designers preparing files and developers interpreting them.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Weblify tutorial or product page. You can also explore [Weblify](/weblify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: tutorial
title: How to import Adobe Photoshop (.psd) files to Figma with one click using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-02-20T00:00:00.000Z
dateModified: 2026-02-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-import-adobe-photoshop-psd-files-to-figma-with-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-import-adobe-photoshop-psd-files-to-figma-with-one-click-using-convertify.md
---

# How to import Adobe Photoshop (.psd) files to Figma with one click using Convertify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how you can import your Photoshop PSD files into Figma automatically with one click using the Convertify Figma plugin. 

To get started, all we need to do is go to our Figma file. If you just go down to the actions icon down here, you can click on that and then search for Convertify. Under the Figma plugins tab, if you click on the Convertify result, you'll be able to run the Figma plugin by either clicking on this run button down here, or I'd recommend clicking on the save icon next to that, and that will let you save the Figma plugin to your Figma plugins list. I already clicked on the save icon here, so I'm just going to go to my Figma file, right-click anywhere on the canvas, go down to plugins, then go down to saved plugins, and click on the Convertify item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically gives you a bunch of different options for importing and exporting different file formats from Figma or into Figma. This allows you to automatically convert a bunch of layers from one file type to another. But today, we're going to be focusing on clicking the select box here and then going down to the import to Figma section. We're going to click on the import Adobe Photoshop to Figma option. This is basically going to allow us to drag and drop a PSD file and import that PSD file into Figma.

I'm just going to show you three different examples of three different Adobe Photoshop PSD files. I'm going to import each of those into Figma and show you what that looks like for each of these different designs. We've got the one we just had a look at, this furniture website, which is quite a big long furniture website. We've got this one, which is more of a landing page. This is kind of a yoga website landing page. Then we've also got this more minimal portfolio site as well. I'm going to import all of these and show you how they look in Figma and show you what the process looks like now.

To get started, we'll just do this minimalist one first. I'm just going to drag and drop my PSD file directly into the drag and drop area in Convertify here with the import Adobe Photoshop to Figma option selected. That's going to load in the Photoshop file into the Figma plugin. Once it loads up, it's going to start importing those layers. You can see it's just finished. This is a pretty quick file. If we get the Figma plugin window over to the side here, it's gone ahead and imported all of those layers from Photoshop. We've got our image layers, we've got our text layers. These are all editable as you would expect. The image layers are all separated as well. You can see here this is an individual image layer that we've got here, and that's resizing and scaling up nicely. Of course, we've got some more text over here as you'd expect. Because these are all editable, we can move them around. We can change them just as we would in Photoshop. That's going to give us the flexibility of changing all of that design data in Figma without having to edit it all in Photoshop if we don't want to. That's basically what that looks like there.

Now I'm going to close off the file here and I'm just going to import a new one. We can actually just leave this page open, and I'm going to now drag and drop another file. I'm going to drag and drop the yoga PSD file into the Figma plugin as well. Again, it's going to load up the Photoshop file. It's going to create a brand new page in your Figma file and it's going to import that one as well. You can see that one was also quite quick. It's a fairly small Figma file as well. It's gone ahead and imported all of those PSD Photoshop layers into our Figma file here. We can edit those again as you'd expect. We can edit all of this content in Figma rather than having to do it in our Photoshop file. That's looking really good.

You'll notice there's a couple of small inconsistencies. For example, in the original PSD, you've got this button here with the text aligned more vertically. This one in Figma, just due to the different ways that the properties are rendered, the line height here might be throwing that off a little bit. You might just have to go through and tweak a few of those just to get them 100% pixel perfect, but it is going to go through and import all of those layers and give you a really strong starting point rather than migrating those files layer by layer from Photoshop into Figma.

The last one I'm going to show you is this longer, more detailed one, which is the furniture website that we just loaded up a preview of a second ago. This one's quite a bit bigger than these landing page style designs. I'm going to again just drag and drop the furniture.psd file into the Figma plugin. Just dragging and dropping it into this drop zone here. That's going to again load up the Photoshop file. It's going to create a new page in Figma. You can see it's importing all of the layers in real time automatically. You can see it pre-populating all those layers. We're done. It's now finished importing the Photoshop file. Because that was the last one, I'm just going to move this over to the side here and get that out of the way so we can zoom in and take a look.

Again, you can see that all of the content has been imported as individual content layers. Those are all looking really good. We can see we've got our icon layers here, and we can edit those. We can also see that these are all individually editable layers as well. We can move those around and change those as needed. Of course, we've also got the similar alignment issue that we saw a minute ago, just with the vertical alignment being a few pixels off. Again, just due to how Figma and Photoshop render text quite differently. You can see that this extra bit of space here in Figma is probably being accounted for differently in Photoshop. You might notice a few of those little things here and there, but again, it's importing every layer as a really strong starting point. You don't have to manually go through Photoshop and manually copy and paste each of those layers, copy and paste each of the text styles, font styles, colors, all that sort of stuff. You just get that all in one go, and you get a really strong import from the PSD file that you don't have to manually recreate.

That's looking really good. We can see all the layers here. Again, these are all editable individual layers, so you don't have to worry about reimporting those. Again down here, you've got all of this as editable text. These are all grouped based on their groupings in Photoshop. All of the layers from Photoshop are being imported with their layer names included, the structure included, all of the groups being included, and that structure is being imported layer by layer just to give you a really accurate representation of all that there.

That's basically it. I just wanted to run through a few different examples of importing these PSD files from Photoshop into Figma, which we can now do automatically with the new import Adobe Photoshop to Figma option under the import to Figma section in Convertify. You'll notice there's a little tip down here just saying that the Adobe Photoshop import feature is currently still in beta, as it's just been released. If you do notice any issues in your own imports, feel free to send an email and attach your PSD file. That'd be really helpful just to narrow down any edge cases or anything that could be improved with the imports because, as you would know, there are many different layer types in Photoshop and different properties, and they all kind of work a little bit differently to how they do in Figma. It'd be great to catch any of those and make the imports even closer to 100% perfect.

I hope that's helpful if you've been wondering how to import your PSD files that you might have laying around from Photoshop or if you're working with other stakeholders or other companies that you're just being forced to work with and they use Photoshop while you want to use Figma. This is a really easy way of getting those PSD files into Figma without having to manually wade through those layers in Photoshop and copy and paste those over. This is going to automate that, streamline it, and you can go ahead and start importing your PSD files into Figma starting from today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Design Token Handoff from Figma to CSS
description: Turn Figma design token decisions into CSS-friendly implementation guidance.
datePublished: 2026-02-19T00:00:00.000Z
dateModified: 2026-02-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-design-token-handoff-from-figma-to-css/
markdownUrl: https://www.hypermatic.com/articles/weblify-design-token-handoff-from-figma-to-css.md
---

# Design Token Handoff from Figma to CSS

Design tokens only help if developers understand how they map into real CSS, component libraries, and naming systems. A token handoff should explain both values and intent.

For frontend developers and design systems teams, this is really a developer handoff problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Cover color variables, typography, spacing, aliases, semantic names, fallbacks, and how tokens appear in implementation.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Weblify helps because it can inspect Figma layers as code-friendly HTML, CSS, React, Tailwind, and Vue output. It fits naturally into workflows involving frontend handoff, design token translation, component implementation, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Weblify appears as part of the inspection path from Figma decisions to frontend code.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Weblify tutorial or product page. You can also explore [Weblify](/weblify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: tutorial
title: How to generate custom animations using AI prompts in Figma (and export to HTML or video) using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-02-17T00:00:00.000Z
dateModified: 2026-02-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-generate-custom-animations-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-generate-custom-animations-using-bannerify.md
---

# How to generate custom animations using AI prompts in Figma (and export to HTML or video) using Bannerify

#### Video Transcript

Today I’m going to be showing you a quick Figma tutorial on how you can generate custom key frame animations for the Bannerify Figma plugin using your favorite AI tools like ChatGPT or Claude. To get started, all we need to do is go to our Figma file, and if you go down to the actions icon down at the bottom here and search for Bannerify.

Under the Plugins tab, if you just click on the Bannerify item, you can run that Figma plugin by either clicking on this Run button down here, or I’d recommend clicking on the Save icon next to that. That will let you run the Figma plugin from your saved Figma plugins list. I’ve already gone ahead and clicked on that Save icon.

I’m just going to go to my Figma canvas, right click anywhere, go down to Plugins, and then go down to Saved Plugins, and click on the Bannerify item. That’s going to run the Figma plugin that we just saved a second ago. If you’re new to the Figma plugin, the way that it works is it basically takes any frames that are on your Figma page and it treats those as potential banners, and then it takes each of the content layers from those banners and loads them into the Figma plugin, which we can then animate.

I’ve just got these two frames for today just to keep things really simple. I’m just going to go ahead and click on Load All Banners, and that’s going to load in the content layers from those two Figma frames. You can see it’s loaded up all of the layers into this animation timeline here.

You can see I’ve already applied a few different animations onto these layers. You can basically do that just by going through the animation settings down here and picking one of those. That will automatically apply the animation, and then you can adjust things like timings and things like that.

But for today, we might not want to use one of these preset animations. The Figma plugin does come with a ton of popular preset animations that you can just add with one click, but you might want to create something a little bit more custom, and I’m going to show you how to do that really easily by just prompting one of your favorite AI tools with the type of animation you want. Then we’re going to automatically import that into the Figma plugin, and we can use those animations for our layers.

To get started, all we need to do is click on the Custom Animations button in the Figma plugin here, and it’s going to open up this key frame generator here. You can actually go ahead and manually create key frame animations. You can go through and add key frames, select what kind of animations you want to apply to each of the key frames, and that will automatically create those there.

To save some time, and if you don’t want to go through those manually, we’ve got this new tool here where you can just click on this Ask AI link here, and that’s going to open up this page in your web browser. It’s just https://bannerify.hypermatic.com, and this is a totally free tool that you can use to help you create custom HTML or CSS animations that can be compatible with the Bannerify Figma plugin.

To give you an example, there are a couple of different ways we can get started. The first one we can do is take one of these existing animation presets and use that as a base for one of the prompts. For example, we could click on this one here. If we like this drop-in animation, we can click on this button that says Use as AI Prompt, and that’s going to prepopulate the animation description, which we can then take and generate into a custom animation.

If you want, you can use this as a preset and then customize this text to change it to be whatever you want. For today, I’m just going to leave this prompt as is. Then what you want to do is click on either the Open Prompt in ChatGPT button or the Open Prompt in Claude button, depending on which AI LLM service you prefer. Or you can just copy the entire prompt to the clipboard and paste it into your own LLM if you prefer.

Today I’m just going to go with ChatGPT. I’m going to click on the Open Prompt in ChatGPT button, and that’s going to prepopulate the prompt in GPT and automatically execute that.

You can see here it’s basically giving a predetermined prompt, which is giving some examples to ChatGPT for the kinds of output that we want to have, and that’s going to make sure it’s compatible with the Bannerify Figma plugin. You can see at the end here it’s added our prompt that we just added to this text area here. Again, you can describe that from scratch to whatever you want.

You can see here it’s given us this JSON response back, along with some instructions on how to add that in. I’m going to go through those right now. The first thing you want to do is copy the JSON code above. You can do that just by clicking on the Copy Code button here in ChatGPT. It’s just copied it to our clipboard.

What we want to do now, that we’re already in Figma and we’ve opened up Bannerify as it said, we’ve opened up the Custom Animations panel, which we’ve already done. Now all we need to do is paste in the JSON that we just copied into the field that says Paste generated JSON code here.

If we look in the Figma plugin, we can see that input here underneath the Ask AI link, and it says Paste generated JSON code here. I’m just going to go ahead and do that. I’m going to paste that in. You can see that it’s instantly just dropped in the heavy drop-in animation, and it’s automatically gone through and populated all of the key frames for that animation. We can see a preview of the animation down here.

Because it’s loaded it in for us, we can actually tweak that now if we wanted to. We can adjust some of these properties. If we wanted to make it a less crazy 300 pixel drop-in, we could tweak that to be something more like 200 and just make it a little bit less intense. You can see here it’s a little bit less intense. Or we can make it more intense and have it really come in from really high.

In this case, I’m just going to leave it as the 300-ish kind of level. Once you’re happy with that, you can click on Update Saved Animation. I’ve just updated that animation.

Now that we’ve got that animation saved, I can go to one of my layers. In this case, maybe I want to do it for this image here. I could go ahead and click on the Entry Animation, and you can see now we’ve got a section called Custom Animations. If I click on heavy drop-in, you can see a preview of that here when we hover over it.

I like that animation, so I’m going to click on the heavy drop-in animation. Now if we play that back in our timeline, you’ll see that we’ve got this heavy drop-in animation being included. Of course, you can adjust the timings of that. If you want it to be shorter, you can just decrease the speed. We can drop that in much quicker, or we can drag it out a little bit more and have that a little bit more eased in.

That’s basically how we can do it. You’ve got unlimited options here. You can really go nuts and just describe whatever kind of animation you’re thinking about. We could do something like rotate in 360 degrees and scale up and fade in and make it pop, and we can just have that as the prompt. Then we can click on Open Prompt in ChatGPT. Again, that’s going to open up a new prompt.

I’m just going to stay logged out in this case. You can see it’s again pre-populated the prompt and it’s added our prompt at the bottom here to make sure that it’s going to give the right output. You can see it’s pretty quick. It’s gone ahead and generated that for us.

Once again, we’re just going to take that output. This one’s called spin pop-in. It’s given it its own name. We’re going to go ahead and click on the Copy Code button in ChatGPT. We’re going to go back to Bannerify. We’re going to go to the Custom Animations panel again. Once again, we’re going to go to the Paste generated JSON code here and paste that straight in.

You can see we’ve now got a new animation called spin pop-in imported, and it’s gone ahead and animated that animation for us. All of the key frames have been generated for us. We’ve got the animation basically exactly as we described.

If we review what we actually prompted, we asked for an animation that rotates in 360 degrees, scaling up and fading in, and we wanted to make it pop. It’s kind of vague at the end there, but I think it’s gone ahead and basically done that effect. It’s done a little pop at the end. It’s scaling it in 360 degrees with a fade, and you’ve got that little pop at the end. I think that’s a pretty accurate representation of what we asked it to generate.

You can see again it’s gone ahead and generated all of the key frames here. We’re starting at negative 360 degrees rotation, and we end up with 0 degrees rotation. That’s exactly what we asked for. You can see it’s fading in from zero to 100 percent. In the middle here, we’ve just got a little bit of a bump where it’s scaling the scale property to get that little pop at the end. It’s looking really good. I’m not even going to update this one. I’m just going to close out of that and not even click on Update Saved Animation because we didn’t change anything. Of course, you can go through and change anything you want.

I’m just going to go back to my timeline, and in this case I’m going to apply it to the CTA. Maybe I want the CTA to be a little bit more eye-catching instead of just fading in. I’m going to click on the CTA button here, and this time I’m going to use the spin pop-in option. If we play that one, you can see here it’s now applying that to the button as well. You can see that applying, and again we can adjust that. If we wanted it to come in a bit later, we can easily do that, and that’s going to give us the animation that we’ve got there. We can apply these to all of the layers.

If we wanted to apply it to all of the CTA layers, we can just go ahead and click on Similar Layers. This will select any layers with the same name. In this case, we’ve got two different banner layers with CTA. I’m going to click on CTA there, and I’m going to choose that option. We’ve got the custom spin pop-in animation, and I’m going to set that to just start at half a second into the timeline and set it to a speed of one second. Then click on Apply Animations to Selected Layers.

You can see that’s gone ahead and applied that to both of our CTA layers. Now we’ve got it in this one as well. You can see that’s popping in as we’d expect. Same thing for the character. If we want to apply that other custom animation, we can just go ahead and do the heavy drop-in that we added. We can start that at the very beginning, bump that speed down a little bit, and apply the animation. Again, you can see here it’s just applied that to both layers. Now if we go ahead and play the animation again, you can see we’ve got the drop-in and the pop-in. Those are the two custom animations there.

Once you’re happy with your animation, if you want to export that out, you can do that by either clicking on the Export to GIF or Video button here. You can go ahead and select the format you want. If you need it in an MP4, you can click on the Export MP4 button. That’s going to automatically export your animations out to an MP4 video file for both banners, or as many banners as you’ve got loaded up in your timeline.

Once that finishes rendering, you’ll be able to click on this Download your zip file button here. If you go ahead and save that to your desktop or your computer, you can open that up and that’s going to automatically include a preview page. If we open up that preview page in the browser here, we’ll be able to see both of those videos at once. You can obviously go into the source material as well. We’ve got the raw MP4 files as well. That will give you the video files that you can upload or do anything you like with.

Alternatively, if you need HTML banners, you can click on the Export to HTML button in the Figma plugin. Again, you can select what kind of format or platform you need. If you’re using something like Google Ads, you can select that as the option. Then you just want to go ahead and click on the Export Banners button down here.

Once again, that’s going to generate all of the code, all of the images, and animations. Then we just go ahead and click the Download your zip file button and save that. If we unzip that file, we’ll get this folder here. You can see we’ve got another preview file here. I’m just going to drag that into my browser.

You can see both of those HTML banners are loading up nicely as well. As with the other ones, you can also go into the individual banners if you need the code and the image files, which are all located in here. Those are all included. All the code is ready to go. If you open that up and check that out, you’ll see all the source code in there.

You’ve also got the zips folder here, which you can upload to your platform like Google Ads or any other platform that you’ve exported it for, along with the backup images as well. You can upload those as backups too for the platforms that require those JPEG backups if the animation doesn’t load for whatever reason. That’s basically it. I’m just going to close these off now and go back to the Figma file.

That’s basically it. I just wanted to run through how you can use this new option or new feature to import custom animation key frames that you don’t have to manually tweak. You can just open up this link in your browser, go here and describe your animation, click on the Open Prompt in ChatGPT or Open Prompt in Claude, or copy the prompt to your clipboard and use it with your own AI model of choice. That’s going to give you the JSON that you can just instantly paste into this text field here and load up one of those custom animations, which you can then tweak a bit further if you want to.

I hope that’s helpful. If you’ve been wondering how to create longer or more complex animations without having to manually tweak each key frame, this is a really easy way to get started, and I think it’s going to be really helpful for people who want to take their animations to the next level. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Figma Inspect Alternatives for Frontend Teams
description: Compare Figma Inspect with richer handoff workflows for frontend teams.
datePublished: 2026-02-16T00:00:00.000Z
dateModified: 2026-02-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-inspect-alternatives-for-frontend-teams/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-inspect-alternatives-for-frontend-teams.md
---

# Figma Inspect Alternatives for Frontend Teams

Native Figma Inspect is useful, but frontend teams often need more than static measurements. They need code context, responsive structure, token clarity, and a faster way to understand layout decisions.

For frontend developers and design systems teams, this is really a developer handoff problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Compare native Inspect, manual specs, design tokens, code export tools, and Weblify-style inspection by accuracy, speed, and implementation usefulness.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Weblify helps because it can inspect Figma layers as code-friendly HTML, CSS, React, Tailwind, and Vue output. It fits naturally into workflows involving frontend handoff, design token translation, component implementation, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Teams should decide when native inspection is enough and when they need a richer handoff layer.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Weblify tutorial or product page. You can also explore [Weblify](/weblify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Figma to Code Handoff Checklist
description: Prepare Figma files for cleaner frontend handoff before developers start rebuilding UI.
datePublished: 2026-02-14T00:00:00.000Z
dateModified: 2026-02-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-to-code-handoff-checklist/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-to-code-handoff-checklist.md
---

# Figma to Code Handoff Checklist

Figma-to-code handoff works better when the file explains implementation intent. Developers need structure, naming, responsive behavior, components, and design tokens to be clear before build starts.

For frontend developers and design systems teams, this is really a developer handoff problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Check auto layout, constraints, components, variants, icons, typography, color tokens, responsive states, image exports, and interaction notes.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Weblify helps because it can inspect Figma layers as code-friendly HTML, CSS, React, Tailwind, and Vue output. It fits naturally into workflows involving frontend handoff, design token translation, component implementation, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Weblify turns Figma structure into code-friendly inspection output for developers who need more than static design specs.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Weblify tutorial or product page. You can also explore [Weblify](/weblify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Figma Content Source of Truth Strategy
description: Decide when Figma should be a content source of truth and when it should sync with spreadsheets or docs.
datePublished: 2026-02-12T00:00:00.000Z
dateModified: 2026-02-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-content-source-of-truth-strategy/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-content-source-of-truth-strategy.md
---

# Figma Content Source of Truth Strategy

Figma is often where copy becomes visible, but it is not always where copy should be governed. Teams need to decide which content lives in Figma and which content syncs from elsewhere.

For content, product, and localization teams, this is really a content operations problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Compare Figma, spreadsheets, docs, CMS tools, and localization platforms based on ownership, review, translation, and implementation needs.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

CopyDoc helps because it can manage, export, import, and localize Figma text content. It fits naturally into workflows involving copy QA, localization, content updates, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

This strategy naturally leads into CopyDoc workflows when teams need structured updates rather than one-off edits.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant CopyDoc tutorial or product page. You can also explore [CopyDoc](/copydoc/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: tutorial
title: How to use 500+ free HTML email components in your Figma designs using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-02-12T00:00:00.000Z
dateModified: 2026-02-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-use-500-free-html-email-components-in-your-figma-designs-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-use-500-free-html-email-components-in-your-figma-designs-using-emailify.md
---

# How to use 500+ free HTML email components in your Figma designs using Emailify

#### Video Transcript

Today I’m going to be showing you a quick tutorial on how you can import a bunch of premium email components into your Figma email designs and then export those out to production ready HTML code with one click using the Emailify Figma plugin. To get started, all we need to do is go to our Figma file, go down to the actions icon down here, and then just search for Emailify.

Under the Figma Plugins tab, if you click on the Emailify result, you can run the Figma plugin by either clicking on this Run button down here, or I’d recommend clicking on the Save icon next to that. That’s going to let you run the Figma plugin from your Figma plugins list. I’ve already clicked on the Save icon. I’m just going to go to my Figma canvas, right click anywhere, go down to Plugins, then Saved Plugins, and click on the Emailify item. That’s just going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, it basically helps you to design HTML emails in Figma, which you can then export out to HTML using the Figma plugin’s export feature. The first thing we need to do is add a new email frame, because we haven’t got any on our page yet. I’m going to call this one “template example,” and then click on the Add New Emailify Container button. If you’ve used the Figma plugin before or if you’re new to it, the main way you can add components through the Figma plugin itself is by browsing the tabs up here.

This will give you a bunch of different starter components that are really popular layouts, which you can then customize with your own content and redesign in the way that you’d like for your own emails. These are intentionally left very generic to make them easy to style and give you a plain version that you can swap out with your own content. If you’re interested in more premium components that have been taken from other email designs, you can browse the free online component library by clicking on the little component icon in the Figma plugin. That will open up the website we were just looking at a moment ago.

The website URL is https://emailify.hypermatic.com, and you can go there for free and browse hundreds of premium email components that are email ready, which you can copy paste into your email designs with a single click. For example, if you like this product display item, you can click on the Copy Figma Component button, and you’ll see it’s copied to your clipboard.

Then go back to Figma, and inside your Emailify frame, paste it in with Command V, or Control V if you’re on Windows. I’m currently on Mac. You’ll see it instantly pastes the component with all of the Figma layers intact, and they’re all email ready layers.

If we now click on the Preview button in the Figma plugin, you’ll notice we can see the exact layout from the design. It’s ready to go in production ready HTML. You can ignore the issues shown here. They’re just flagging that the URLs for these buttons don’t currently have links assigned. You can set those via the settings panel. For example, I’ll apply a quick link to these two buttons. Once we refresh, the warning disappears and the buttons are now clickable.

That’s just one example, but there are about 500 components available. You can filter them by brand or by the type of component you’re looking for. If you want something with pricing, click on the Pricing filter to see components that include price elements. You can also browse newsletter components or feature list components, depending on the kind of email design you’re creating.

For example, if we want this footer component from A24, we can copy it and paste it straight into our Emailify frame. It updates all of the layers automatically. You can edit the content just as you would normally in Figma. If you want to remove content, change styling, adjust colors, or swap layout elements, all of that will be reflected in the exported HTML.

For instance, we could swap these columns around and see that update immediately. Or we could replace an image by dragging in a different one from elsewhere in the design. Any changes you make visually will automatically carry through to the HTML output.

It really comes down to the type of design you want to create. These components are strong starting points for popular layouts that you might not want to build from scratch every time. You can copy them into your email frame and customize them to match your brand and content. This makes it easy to spin up new emails quickly using polished, premium design foundations.

I wanted to give you a quick overview of how this works, as it’s a newer option in the Figma plugin. You can access the component library anytime by clicking the component icon in the toolbar where it says “View Online Component Library.” That opens the website, which you can also bookmark or pin as a tab if you plan to use it regularly.

It’s a convenient way to browse for inspiration or grab ready made layout foundations without manually designing everything yourself. These components give you a strong base for more unique or interesting layouts that you can then adapt to suit your own branding and messaging.

We’ll leave it there for today. If you’re interested in exploring the Figma plugin further, including more advanced features like mobile overrides, those are covered in other tutorials on the YouTube channel. This was just a simple walkthrough of how to use the component library and copy components into your designs.

If you’d like to dive deeper into advanced concepts or explore more options in the settings panel, feel free to check out the other YouTube tutorials or visit the documentation site.

With that, I’ll leave you here for today. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: UX Writing Workflow Inside Figma
description: Give UX writers a cleaner way to review, update, and manage product copy inside Figma.
datePublished: 2026-02-10T00:00:00.000Z
dateModified: 2026-02-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-ux-writing-workflow-inside-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-ux-writing-workflow-inside-figma.md
---

# UX Writing Workflow Inside Figma

UX writers need design context, but they also need a manageable way to review many strings. Comments alone can become messy when copy changes across multiple screens.

For content, product, and localization teams, this is really a content operations problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Use structured exports, review columns, status tracking, design notes, and re-import checks so writers can edit without losing the visual context of Figma.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

CopyDoc helps because it can manage, export, import, and localize Figma text content. It fits naturally into workflows involving copy QA, localization, content updates, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

CopyDoc works as the operational layer for UX writing in design files.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant CopyDoc tutorial or product page. You can also explore [CopyDoc](/copydoc/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: tutorial
title: How to create multi-scene animated banners in Figma using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-02-10T00:00:00.000Z
dateModified: 2026-02-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-create-multi-scene-animated-banners-from-figma-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-create-multi-scene-animated-banners-from-figma-using-bannerify.md
---

# How to create multi-scene animated banners in Figma using Bannerify

#### Video Transcript

Today I am going to be showing you a quick tutorial on how to turn your Figma frames into animated banners with multiple scenes using the Bannerify Figma plugin.

To get started, all we need to do is go to our Figma file, go down to the little actions icon down here at the bottom, and search for Bannerify. Under the Plugins tab, click on the Bannerify item. You can run the Figma plugin by either clicking on the Run button down here, or I would recommend clicking on the Save icon next to that. That will save it to your plugins list for easy access later.

I have already clicked on that Save icon, so I am just going to go to my Figma file, right click anywhere, and go down to Plugins. Then I am going to go down to Saved plugins and click on the Bannerify item. That is going to run the Figma plugin we saved a second ago.

By default, the Figma plugin allows you to take any Figma frames on your current Figma page and load those into the plugin as individual banners. To show you what that normally looks like, I am going to click on the Load all banners button. You can see we have three different banners here that we can preview and animate in our timeline. I have already got a few animations applied to these, but I just wanted to show you how that normally looks, where you have three different frames getting treated as three different banners.

In this case, we actually want to take all three of these frames and turn them into one single banner. We are going to do that by creating a new section layer and then reloading these frames into the plugin.

What I am going to do first is take these existing three frames, assuming that I want all of these at the same dimensions and want them all as part of the same banner. I am going to highlight those three frames, right click on them, and then click on the Wrap in new section item here. In the Figma menu, click on Wrap in new section. That is going to create a brand new section layer in Figma. You can see that inside of that new section, we have our three individual frames.

You will notice that these have not done anything yet in the Figma plugin because we need to go back to the banner loading screen. We can do that by clicking on this little refresh icon at the top here where it says Refresh all banners. I am going to click on that, which will bring us back to the banner loading screen.

Again, you can see by default it is allowing us to load in those three frames separately. What we are going to do instead is enable this toggle here called Use Figma sections as multi scene banners. That changes the mode of the Figma plugin to look for section layers instead of frame layers on your page. It treats each of those sections, with multiple frames in them at the same size, as a single banner.

We have just got one section at the moment, so I am going to click on that one and click on Load checked banners with that toggle enabled. You can see this time we have Section 1 being loaded in, which is what we have named our Figma file here. In each of these layers, they are getting split up into scenes. We can see Scene 1, Scene 2, and Scene 3. It is taking each of these frame layers and treating them as different scenes, which we can now animate separately.

If I play this back right now, you can see all of these are getting played at the same time because I have not updated the timeline yet. What I am going to do is extend the timeline to be a bit longer. In this case, I am going to triple it, going from 5 seconds out to 15 seconds, and hit Update timeline length. That extends the timeline length by three.

Then I can quickly minimize these scene layers and start to adjust the timeline offsets to better align with this longer timeline. You will notice now when I preview it, we have Scene 1, Scene 2, and Scene 3 all playing in the same banner. If we play that through, it animates each of those individually, toggling in and out between the three elements. That is what that looks like.

If we want to export this, we can easily do that by clicking on the Export HTML button. Click on that, choose your platform options, and I am going to keep it simple with the HTML option for now. Export the banner, then click on Download your zip file. Save that to your desktop or anywhere you like. If you unzip that file and open the folder, you will be able to open that file in your web browser.

I am going to drag and drop the preview file here, and you can see that it has exported the HTML banner with those three scenes playing in order. That is looking really good.

Likewise, we can also do this for GIFs or videos. I can export this to an MP4, for example, and that will automatically output this entire banner again with the three scenes compounded into one banner. We do not have them as separate frames. This allows us to create one long banner with multiple scenes in it.

Once that is done, click on Download your zip file again and save it to your computer. If you unzip that file, you can load up the preview page in your browser. I am going to drag that in, and you can see we now have the video version. If you open up the Videos folder, you will also see the MP4 file there, which allows you to play that back as an MP4 video as well.

You can also do this for multiple banners. For example, if you have multiple sizes, you can duplicate that banner. I could take Section 1 and duplicate it a couple of times. If these have different dimensions, we could change those here. You could shift the dimensions to whatever you need. Maybe you have some longer banners, create a version where the banner frames are a little bit longer, and shift these elements down. That could be a different kind of creative.

This is not a great attempt visually, but it is just to show you what it looks like. If I refresh all my banners again, you will see I now have three different sections I can load in. If I click on Load all banners, that loads three different banners. You can see I now have a longer banner here with those three scenes. I am going to collapse all of these for ease of scrolling. You can see the others here, and Section 1 down here again, as expected.

You can also jump to these by clicking on any of these layers over here, which will automatically jump you to them.

One small thing to be mindful of is that all of the banner frames must be exactly the same size. For example, in this particular one, it is only loading in two scenes. The reason for that is the frames have different dimensions. You can see one is set to 269 width, another is 268, and another is 269 by 250. You want to make sure those are always the same size if you want them treated as the same banner.

In this case, if I set them all to 268 and refresh this banner, then reload it, you can see all three scenes are loading in as expected.

Finally, you can export multiple banners with multiple scenes. I am going to load in all banners again and export those to HTML. Click on Export to HTML and export three banners. This will generate the code and images for all three banners. Click on Download your zip file, save it to your desktop, open the zip file, and when we open the HTML file, we should see three different banners.

You can see we now have three completely different banners loaded in, all with different sizes. We have copies of all of those banners here, Section 1, Section 2, and Section 3, all loading as expected.

That is a nice way of stringing together scenes and exporting them into multiple banners with multiple dimensions. I will leave it there for today. Hopefully this has been helpful. If you have been wanting to create more complex or larger banners with multiple creatives in them without having to manage everything inside a single frame in Figma, this should make that process a lot more streamlined.

Thank you, as always, for watching, and we will be back with more Figma tutorials like this very soon.

---

---
type: article
title: Localization Planning for Figma Product Screenshots
description: Plan Figma screenshot localization before translations, layouts, and approvals become messy.
datePublished: 2026-02-08T00:00:00.000Z
dateModified: 2026-02-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-localization-planning-for-figma-product-screenshots/
markdownUrl: https://www.hypermatic.com/articles/copydoc-localization-planning-for-figma-product-screenshots.md
---

# Localization Planning for Figma Product Screenshots

Localized product screenshots are harder than swapping one string for another. Text expands, UI labels change, screenshots need regional review, and marketing claims may need different approvals.

For content, product, and localization teams, this is really a content operations problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Plan source text, translation columns, review ownership, image variants, layout expansion, and post-import QA before localization begins.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

CopyDoc helps because it can manage, export, import, and localize Figma text content. It fits naturally into workflows involving copy QA, localization, content updates, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Use this planning pass before moving into any specific CopyDoc translation workflow.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant CopyDoc tutorial or product page. You can also explore [CopyDoc](/copydoc/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Content Operations Workflow for Figma
description: Build a Figma content operations workflow for teams that manage lots of product and marketing copy.
datePublished: 2026-02-06T00:00:00.000Z
dateModified: 2026-02-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-content-operations-workflow-for-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-content-operations-workflow-for-figma.md
---

# Content Operations Workflow for Figma

When Figma files contain real marketing or product copy, content operations cannot live entirely in comments. Teams need structure for ownership, review, localization, and updates.

For content, product, and localization teams, this is really a content operations problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Create a content inventory, define owners, choose spreadsheet or document sources, plan review cycles, and decide how updates return to Figma.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

CopyDoc helps because it can manage, export, import, and localize Figma text content. It fits naturally into workflows involving copy QA, localization, content updates, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

CopyDoc becomes content infrastructure for design teams when copy review, updates, and localization need a repeatable path.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant CopyDoc tutorial or product page. You can also explore [CopyDoc](/copydoc/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Figma Copy QA Checklist for Product Teams
description: Review UX copy, product screenshots, and marketing text in Figma before launch.
datePublished: 2026-02-04T00:00:00.000Z
dateModified: 2026-02-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-copy-qa-checklist-for-product-teams/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-copy-qa-checklist-for-product-teams.md
---

# Figma Copy QA Checklist for Product Teams

Figma copy QA catches issues that are easy to miss in visual review: stale strings, inconsistent labels, placeholder content, legal claims, truncated text, and localization problems.

For content, product, and localization teams, this is really a content operations problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Review labels, headings, CTAs, disclaimers, screenshots, error messages, punctuation, line breaks, translation expansion, and source-of-truth ownership.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

CopyDoc helps because it can manage, export, import, and localize Figma text content. It fits naturally into workflows involving copy QA, localization, content updates, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

CopyDoc works as the way to export, review, and re-import text changes when QA finds problems.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant CopyDoc tutorial or product page. You can also explore [CopyDoc](/copydoc/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Design Team Image Optimization Workflow
description: Create a repeatable image optimization workflow for design teams using Figma.
datePublished: 2026-02-01T00:00:00.000Z
dateModified: 2026-02-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-design-team-image-optimization-workflow/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-design-team-image-optimization-workflow.md
---

# Design Team Image Optimization Workflow

Image optimization gets inconsistent when every designer exports assets differently. A team workflow turns compression, format choice, and handoff into repeatable defaults.

For designers and web teams, this is really a image optimization problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Define file-size budgets, export presets, naming rules, review ownership, format guidance, and developer handoff expectations.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

TinyImage helps because it can compress and export web-ready image files from Figma. It fits naturally into workflows involving web performance, asset compression, format selection, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

This workflow is especially useful for design leads who want fewer last-minute asset cleanup requests.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant TinyImage tutorial or product page. You can also explore [TinyImage](/tinyimage/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Figma Export File Size Mistakes
description: Common reasons Figma exports become too large and how to avoid them before handoff.
datePublished: 2026-01-30T00:00:00.000Z
dateModified: 2026-01-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-figma-export-file-size-mistakes/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-figma-export-file-size-mistakes.md
---

# Figma Export File Size Mistakes

Large Figma exports usually come from preventable choices: huge source frames, wrong file formats, uncompressed fills, hidden raster weight, or PDF/video settings that do too much.

For designers and web teams, this is really a image optimization problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Audit dimensions, flattening, image fills, transparency, format choice, vector complexity, and export presets before blaming the website or app build.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

TinyImage helps because it can compress and export web-ready image files from Figma. It fits naturally into workflows involving web performance, asset compression, format selection, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

TinyImage can be the practical fix, but the first step is spotting the cause of the heavy export.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant TinyImage tutorial or product page. You can also explore [TinyImage](/tinyimage/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Image Compression Handoff Checklist for Developers
description: Help designers hand off compressed Figma exports that developers can ship without reprocessing every asset.
datePublished: 2026-01-28T00:00:00.000Z
dateModified: 2026-01-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-image-compression-handoff-checklist-for-developers/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-image-compression-handoff-checklist-for-developers.md
---

# Image Compression Handoff Checklist for Developers

Developers should not have to guess which image is final, which format to use, or whether an asset has already been compressed. A good handoff makes those choices visible.

For designers and web teams, this is really a image optimization problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Document export dimensions, file format, compression target, naming, SVG/raster decisions, responsive variants, and where the asset should live in the codebase.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

TinyImage helps because it can compress and export web-ready image files from Figma. It fits naturally into workflows involving web performance, asset compression, format selection, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Image optimization works best as a shared design-development workflow, not a cleanup task developers inherit at the end.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant TinyImage tutorial or product page. You can also explore [TinyImage](/tinyimage/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: WebP vs AVIF for Figma Exported Images
description: Choose between WebP and AVIF when exporting website images from Figma.
datePublished: 2026-01-26T00:00:00.000Z
dateModified: 2026-01-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-webp-vs-avif-for-figma-exported-images/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-webp-vs-avif-for-figma-exported-images.md
---

# WebP vs AVIF for Figma Exported Images

WebP and AVIF both help reduce image weight, but they are not interchangeable in every workflow. The best choice depends on browser support, image type, transparency, compression expectations, and fallback strategy.

For designers and web teams, this is really a image optimization problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Use AVIF when smaller files matter and the browser/support context allows it. Use WebP when compatibility, workflow simplicity, and broad support are more important.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

TinyImage helps because it can compress and export web-ready image files from Figma. It fits naturally into workflows involving web performance, asset compression, format selection, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

This format decision works best when it links to TinyImage export tutorials for the exact workflow.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant TinyImage tutorial or product page. You can also explore [TinyImage](/tinyimage/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Web Image Performance Checklist for Figma Exports
description: Optimize Figma image exports for faster websites without making designers leave their source file.
datePublished: 2026-01-24T00:00:00.000Z
dateModified: 2026-01-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-web-image-performance-checklist-for-figma-exports/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-web-image-performance-checklist-for-figma-exports.md
---

# Web Image Performance Checklist for Figma Exports

Website performance often suffers before developers ever touch the image. Oversized exports, wrong formats, unnecessary transparency, and missing compression can all start in the design handoff.

For designers and web teams, this is really a image optimization problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Check final display size, retina requirements, file format, compression level, transparent backgrounds, SVG cleanliness, responsive image needs, and naming conventions.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

TinyImage helps because it can compress and export web-ready image files from Figma. It fits naturally into workflows involving web performance, asset compression, format selection, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

TinyImage works as the way designers can take more ownership of performance-ready assets.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant TinyImage tutorial or product page. You can also explore [TinyImage](/tinyimage/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Presentation Tool Comparison for Figma Designers
description: Compare Figma-first presentation workflows with traditional slide tools for design-led teams.
datePublished: 2026-01-22T00:00:00.000Z
dateModified: 2026-01-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-presentation-tool-comparison-for-figma-designers/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-presentation-tool-comparison-for-figma-designers.md
---

# Presentation Tool Comparison for Figma Designers

Designers often prefer Figma for layout control, but stakeholders often expect a real presentation file. The right workflow depends on whether design fidelity, editability, collaboration, or presenting experience matters most.

For designers and revenue teams, this is really a presentation production problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Compare Figma, PowerPoint, Google Slides, Keynote, Canva, and a Pitchdeck-supported workflow across design control, editing, animations, sharing, and final output.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Pitchdeck helps because it can turn Figma designs into polished presentation decks. It fits naturally into workflows involving sales decks, investor decks, client presentations, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

The best choice is decision-focused and honest about tradeoffs: no presentation workflow wins on design control, editability, animation, and handoff all at once.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Pitchdeck tutorial or product page. You can also explore [Pitchdeck](/pitchdeck/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Figma Deck Approval Workflow for Agencies
description: Use a cleaner approval workflow for agency presentations designed in Figma and delivered as client-ready decks.
datePublished: 2026-01-19T00:00:00.000Z
dateModified: 2026-01-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-figma-deck-approval-workflow-for-agencies/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-figma-deck-approval-workflow-for-agencies.md
---

# Figma Deck Approval Workflow for Agencies

Agency deck approvals can become chaotic when feedback happens in calls, PDFs, slide tools, and design files at the same time. A cleaner workflow defines where review happens and when the deck is ready to export.

For designers and revenue teams, this is really a presentation production problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Set up review milestones, version names, client previews, final copy approval, format expectations, and a final export checklist.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Pitchdeck helps because it can turn Figma designs into polished presentation decks. It fits naturally into workflows involving sales decks, investor decks, client presentations, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Keep the workflow focused on approval clarity before worrying about the final export format.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Pitchdeck tutorial or product page. You can also explore [Pitchdeck](/pitchdeck/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: tutorial
title: Export & re-import Figma text content via Airtable sync using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-01-19T00:00:00.000Z
dateModified: 2026-01-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/export-and-import-figma-text-content-with-airtable-sync-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/export-and-import-figma-text-content-with-airtable-sync-using-copy-doc.md
---

# Export & re-import Figma text content via Airtable sync using CopyDoc

#### Video Transcript

Today I’m going to be showing you a quick Figma tutorial on how to export your Figma designs’ text content to an Airtable spreadsheet, which you can then update in Airtable and then reimport the text updates back into your Figma designs automatically. And we’re going to do that using the CopyDoc Figma plugin.

To get started, all we need to do is go to our Figma file, go down to the little actions icon down here at the bottom. If you click on that and search for CopyDoc, and under the plugins tab, if you click on the CopyDoc item, you can run the Figma plugin by either clicking on this little run button down here, or I’d recommend clicking on the save icon next to that. And that’ll let you run the Figma plugin from your plugins list.

I’ve already clicked on this save button here, I’m just going to close off that panel and go to my canvas. Then just right click anywhere, go down to Plugins, then go down to Saved plugins and click on the CopyDoc item. And that’s just going to run the Figma plugin we saved a second ago.

You’ll notice that the Figma plugin has a bunch of different features, but today we’re just going to be focusing on the export Figma text layers feature and then the reimport text updates to Figma feature. We’re basically going to be touching on these two buttons: the export text layers button and then the import text layers button. I’m going to go through these step by step with you now.

To get started, all you need to do is click on the export text layers button. If you do that, you’ll notice that it brings up a panel showing all of the frames on your current Figma page, and it allows you to select which frames you want to export. By default, it just exports it to a local Excel spreadsheet file, directly to your computer.

If you click on that dropdown, you’ll notice that we have a few other different options as well. We can do Excel, CSV, JSON, Word docs, all sorts of things like that. But for today, we’re going to be focusing on this external API option, which is going to be the Airtable option.

If you go ahead and click on the Airtable option in the dropdown list, you’ll notice that the content over here changes. It’s now asking us for a few different fields. I’m going to show you exactly how to get all of these fields.

The first thing we need to do is actually paste in our Airtable URL. To do that, we just go to our web browser and log into your Airtable account. That’s just at airtable.com. If you go to your workspace, you can create a workspace, and underneath the workspace you can create a new Airtable by either clicking on this create button here or you can click on the blue create button on the left-hand side here.

I’m just going to go ahead and do that, and today I’m going to be using my CopyDoc workspace. That’s where I’m going to store my CopyDoc-related spreadsheet in this case. What you want to do next is click on the “build an app on your own” button, this option on the right here. Just go ahead and click on that. That’s going to start a fresh Airtable with no content in it.

You can see here it’s just called “untitled” at the moment. We can go ahead and rename that. We can call it something like “movie app content.” You can customize that to be whatever you want. Now that I’ve changed the name of that here, that’s ready to go.

You’ll notice that there’s no content in the table at all. I’m just going to close off this sidebar here to see that a bit better. We’re in the grid view, which is basically the default table view. This is perfect. This is just a blank new Airtable that we’re going to upload our Figma content into.

What we need to do, as asked for in the plugin, is paste in our Airtable URL. In this case, we’re going to paste in the Airtable URL that we just created. I’m going to copy that to my clipboard from the URL bar in the browser, and I’m going to paste that into the URL field here. That’s good to go. It’s telling us that it’s a valid Airtable URL, which means we’ve done it correctly.

The next thing we need to do is paste in our token. The token is what allows you to authenticate Airtable with the Figma plugin. In this case, I’m going to click on the token link here, which is going to take me to the Airtable tokens page. Because I’m already logged in, it’s brought us to the personal access tokens page.

All you need to do is click on the create token button. That’s going to allow us to create a brand new token. I would go ahead and name this something that’s relevant. In this case, we’re going to call it “CopyDoc Figma plugin token,” just so you can go back to it later and understand what the token was being used for.

Importantly, you’ll notice that in brackets here, it’s telling us that we need to add the schema bases and the schema record scopes. What that means is under this scopes option here, you have to click on the add a scope button, and then we want to add those scopes.

We want to do the data records read, data records write, and then the other one was schema and bases. We’re going to scroll down that list and find the schema option. You can see we’ve got schema bases read and also schema bases write. What this allows us to do is grant the token permission for the Figma plugin to both read and write to your Airtable.

That’s going to allow us to upload the text from Figma into Airtable and then read the updated content back into our Figma plugin. It’s quite important to make sure those are all selected.

The last thing you need to do is choose what tables or what workspaces you want to give this token access to in your Airtable. In this case, I’m just going to make sure it works across all workspaces. If you only want it to be authenticated with a specific table, you can customize that further as well. To keep it simple, I’m going to do that for now.

Then I’m going to click create token. Once that happens, you’ll only be shown the token once, make sure you copy it to your clipboard by clicking that button there. We can go ahead and paste that into our Figma plugin here. It might also be worth saving that somewhere else securely, like a password manager or something like that, but it’s totally up to you.

As long as you’ve copied it to your clipboard and pasted it into the plugin, that’s pretty much good to go. The last thing we need to do is give this a label. This label is what’s going to show up later, because we can add multiple Airtable links in our Figma plugin here. This is what’s going to make the dropdown option label.

In this case, I’m going to mirror that to what I’ve called my content over here. I’m just going to copy that title and use that for the same option here. I’m going to go ahead and click on save Airtable. That’s going to authenticate it and make sure it’s loaded. It looks like it’s just saved it.

Now we’ve got the movie app content as a saved table, which means it’s all working as expected. All we need to do now is click on the export Airtable button. I’m going to go ahead and do that now.

What that’s going to do is take all the text content from the frame we selected here and upload all of that to our Airtable that we just pasted into the plugin. This will just take a moment while it uploads all those rows.

It’s telling us that it’s synced 27 rows into Airtable, which means that if we now go back to our browser, you can see it’s looking good. We’ve got all of the content that we just exported from our Figma file.

I’ll run through this with you now, and then I’ll show you how to update this and reimport it back into the Figma file. You’ll notice here that we’ve got a few different fields. The ID is the layer ID of all of your text layers in Figma. These are very special values in the sense that they’re all unique and they all map to a very specific Figma layer.

This is the way that the Figma plugin can tell which text layers to update and what content is going to be updated for those text layers. Whatever you do, don’t change any of these ID values. Those need to stay the same.

Then we’ve got some information showing what frame it was under, what group it was under, the layer name, and the Figma text. What we can do is update things like the layer name. If we wanted to change this particular layer name, we could change that in here. For today, I’m just going to be focusing on making actual text content updates, and all of those are done under the Figma text column.

For example, if we wanted to change “No Time to Die” title, which is just showing up over here, we would edit this field over here and instead do something like “Casino Royale” and change that title. That would be one example.

We can also change any of these minutes. We could change this to something like four minutes, just to make it a bit obvious. You can go through and change whatever you want. We could call this one “The Avengers” and update a few of those different ones. If we called this one “Batman” or something like that, we can change all of these text contents.

Once you’re happy with these text edits in Airtable, we can go back into our Figma file, close off the export panel here, and as I mentioned before, click on the other option, which is the import text layers button.

Once that loads up, you’ll see that because we already selected the export format to be Airtable, it’s already syncing that option up in our import option. You can see that we’ve got the option of importing from a file. If we exported it from Excel to an Excel file locally, we could drag and drop those in. Today, we’re focusing on importing from an Airtable URL.

Because we’ve already added our option over here, we can make sure that’s selected. That’s going to be the Airtable that we’re going to load the content from. We’ve already got our key saved in there, you don’t need to paste that in again.

Now all we need to do is click on the load Airtable preview button here in the plugin. That’s going to fetch all of the content from Airtable and show us any content that has changed from the Figma file itself. It’s doing a summary of all the content that’s been updated since it was exported to Airtable and giving us a summary of those changes here.

We can go through those by clicking on this little text icon here. That’s automatically going to jump to all of the places where the text layers have been updated in the Airtable content. That allows you to go through each one and see exactly what content has been changed in Airtable, and then it’s up to you to pick which changes you want to accept.

In this case, I’m just going to change all four of these layers to show you how it works. I’m going to click on the update Figma text layers button over here. Once I click on that, you can see it’s saying it’s updated four Figma text layers.

We can verify that by going through those text layers. You can see that Black Widow has been changed to The Avengers over here. We’ve got No Time to Die updated to Casino Royale, Batman Returns here, and then this four-minute version of the movie runtime.

That’s basically it. I just wanted to show you that concept. If you’re an Airtable user and you’ve been wondering how to more easily sync your content between Figma and an Airtable spreadsheet or table, this is an easy way to automate that between your Figma file and your Airtable account.

This is a new integration in the CopyDoc plugin. If you’re using the Figma plugin and you’re using Airtable, feel free to give it a try. Hopefully it’s easy enough to follow. There are just a few initial steps that we went through, but once you’ve got it all hooked up, it’s quite easy. You’re basically just going back in, clicking the export button, and that will re-update the content.

For example, if I changed this to be something like June 3, and then changed the genre over here, if I called this adventure or something like that, and then exported to Airtable again, that’s gone ahead and reinserted those rows.

If we go back to Airtable, you’ll notice that the content is automatically updated. We’ve now got June 3 reflected in Airtable, and we’ve also got the adventure label added up here as well. It’s quite real time. It updates your Airtable content on the fly.

Again, we could repeat that process, change the content again, and then reimport that back into Figma over and over again. This is a really easy way of managing your content with external stakeholders, for things like legal reviews or anyone who prefers to edit their content outside of the Figma file.

We’ll leave it there for today. Hopefully that was simple and an easy way to set up your Airtable with Figma. Thank you, as always, for watching. We’ll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Presentation Brand Control for Figma Teams
description: Keep sales decks, client presentations, and internal slides closer to brand when the source design lives in Figma.
datePublished: 2026-01-17T00:00:00.000Z
dateModified: 2026-01-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-presentation-brand-control-for-figma-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-presentation-brand-control-for-figma-teams.md
---

# Presentation Brand Control for Figma Teams

Presentation brand control breaks down when teams copy old slides, resize logos manually, or rebuild layouts in separate tools. Figma can become the source of truth if the output workflow supports it.

For designers and revenue teams, this is really a presentation production problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Use shared slide systems, approved type styles, locked visual patterns, reusable sections, consistent imagery, and a clear export path for teams that still need PowerPoint, Keynote, Google Slides, or PDF.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Pitchdeck helps because it can turn Figma designs into polished presentation decks. It fits naturally into workflows involving sales decks, investor decks, client presentations, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Pitchdeck gives teams a practical way to keep brand control without trapping finished decks inside Figma.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Pitchdeck tutorial or product page. You can also explore [Pitchdeck](/pitchdeck/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Investor Deck Design Workflow in Figma
description: Plan an investor deck in Figma that can still become a usable presentation file when it is time to pitch.
datePublished: 2026-01-15T00:00:00.000Z
dateModified: 2026-01-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-investor-deck-design-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-investor-deck-design-workflow-in-figma.md
---

# Investor Deck Design Workflow in Figma

Investor decks need sharp storytelling and clean design, but they also need to be presented, revised, shared, and exported without last-minute rebuilding.

For designers and revenue teams, this is really a presentation production problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Plan the narrative, reusable slide layouts, chart treatment, data sources, speaker notes expectations, editable text needs, and final export format before design becomes too detailed.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Pitchdeck helps because it can turn Figma designs into polished presentation decks. It fits naturally into workflows involving sales decks, investor decks, client presentations, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Founders and designers should avoid creating a beautiful static deck that becomes painful to present or revise.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Pitchdeck tutorial or product page. You can also explore [Pitchdeck](/pitchdeck/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Figma Sales Deck Workflow for Revenue Teams
description: Help sales and marketing teams keep Figma-designed decks on-brand, editable, and easier to export.
datePublished: 2026-01-13T00:00:00.000Z
dateModified: 2026-01-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-figma-sales-deck-workflow-for-revenue-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-figma-sales-deck-workflow-for-revenue-teams.md
---

# Figma Sales Deck Workflow for Revenue Teams

Sales decks drift when every rep edits their own copy of a presentation. Figma gives designers more brand control, but the deck still has to become usable for the sales team.

For designers and revenue teams, this is really a presentation production problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Create approved slide patterns, define which sections reps can customize, keep product screenshots current, document export formats, and review the final deck before it reaches prospects.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Pitchdeck helps because it can turn Figma designs into polished presentation decks. It fits naturally into workflows involving sales decks, investor decks, client presentations, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Pitchdeck works as the bridge between brand-controlled Figma design and presentation-ready output.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Pitchdeck tutorial or product page. You can also explore [Pitchdeck](/pitchdeck/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Best HTML5 Banner Workflow for Agencies
description: A practical agency workflow for producing HTML5 banners from creative concept through final campaign handoff.
datePublished: 2026-01-11T00:00:00.000Z
dateModified: 2026-01-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-best-html5-banner-workflow-for-agencies/
markdownUrl: https://www.hypermatic.com/articles/bannerify-best-html5-banner-workflow-for-agencies.md
---

# Best HTML5 Banner Workflow for Agencies

Agencies need HTML5 banner workflows that are fast enough for campaign deadlines but controlled enough for client approvals. The process has to cover creative, specs, animation, QA, and delivery.

For campaign teams and agencies, this is really an HTML5 banner production problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Start with platform specs, design in Figma, animate with production constraints in mind, review variants with the client, package the final files, and archive reusable patterns for the next campaign.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Bannerify helps because it can animate and export production-ready banner ads from Figma. It fits naturally into workflows involving display ad production, campaign variant exports, HTML5 ad QA, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

This agency operations workflow uses Bannerify as the Figma-native production layer.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Bannerify tutorial or product page. You can also explore [Bannerify](/bannerify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Figma Banner Ad Variant Production Workflow
description: Create campaign banner variants in Figma without manually rebuilding every size and message.
datePublished: 2026-01-09T00:00:00.000Z
dateModified: 2026-01-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-figma-banner-ad-variant-production-workflow/
markdownUrl: https://www.hypermatic.com/articles/bannerify-figma-banner-ad-variant-production-workflow.md
---

# Figma Banner Ad Variant Production Workflow

Banner variant production becomes painful when every size, message, language, or offer is treated as a separate manual design task. A better workflow starts with a master creative system.

For campaign teams and agencies, this is really an HTML5 banner production problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Plan reusable frames, naming rules, size presets, approved copy variants, image crops, animation timing, and review passes before export.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Bannerify helps because it can animate and export production-ready banner ads from Figma. It fits naturally into workflows involving display ad production, campaign variant exports, HTML5 ad QA, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Variant production works best as a system, with Bannerify turning approved Figma creative into deliverable files.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Bannerify tutorial or product page. You can also explore [Bannerify](/bannerify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: HTML5 Banner File Size Reduction Checklist
description: Reduce HTML5 banner file size before campaign delivery without wrecking animation quality.
datePublished: 2026-01-07T00:00:00.000Z
dateModified: 2026-01-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-html5-banner-file-size-reduction-checklist/
markdownUrl: https://www.hypermatic.com/articles/bannerify-html5-banner-file-size-reduction-checklist.md
---

# HTML5 Banner File Size Reduction Checklist

HTML5 banner file size issues usually show up late, when a campaign package is already due. The fix is rarely one magic compression setting; it is a set of production decisions.

For campaign teams and agencies, this is really an HTML5 banner production problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Reduce oversized images, simplify heavy animation, avoid unnecessary font weight, reuse assets where possible, check video and GIF tradeoffs, and test the final exported package against platform limits.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Bannerify helps because it can animate and export production-ready banner ads from Figma. It fits naturally into workflows involving display ad production, campaign variant exports, HTML5 ad QA, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

This workflow is most useful when a team is facing rejected or overweight ad files and needs a clear path to reduce weight without starting again.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Bannerify tutorial or product page. You can also explore [Bannerify](/bannerify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: tutorial
title: How to export HTML emails from Figma to Zapier using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-01-05T00:00:00.000Z
dateModified: 2026-01-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-zapier-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-zapier-using-emailify.md
---

# How to export HTML emails from Figma to Zapier using Emailify

#### Video Transcript

Today I’m going to be showing you a quick tutorial on how to export your HTML emails from Figma to a Google Drive folder using Zapier with the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little actions icon down here, and then search for Emailify. Under the Plugins tab, if you click on the Emailify result, you can run the Figma plugin by clicking on this little Run button down here. Alternatively, I’d recommend clicking the Save icon next to that. Then we can run the Figma plugin from our Figma plugins list.

Because I’ve already clicked on the Save button, I’m just going to go back to my Figma canvas. I’ll right-click anywhere, go down to Plugins, then Saved plugins, and click on the Emailify item. That’s going to run the Figma plugin that we saved a second ago.

If you’re new to the Figma plugin, the way it works is that it helps you design HTML emails in Figma using some of the design tools in the plugin, which you can then automatically export to production-ready HTML code from this Export HTML button here. I’m not going to be going through all of the design features today. If you’re new to the Figma plugin, you can find some other tutorials on the YouTube channel for that, or you can spin up a template from the Browse Figma templates tab in here, which is what I’ve just done.

I basically duplicated one of these free Figma templates, which is Emailify-ready. You can see here, if I go to preview the email, I’m just going to click on Preview. This is going to load up an HTML preview of the email, so you can actually see what that’s going to look like in real HTML code.

Once we’re happy with that, we can export the code from the Figma plugin, which we’ll do right now. What you need to do is click on the Export HTML button in the Figma plugin. We want to change the default HTML email option, which just downloads a zip file to your computer. We want to change that option by scrolling all the way down to the bottom where it says Webhooks and changing the setting to Zapier.

If you click on the Zapier item here, that’s going to change the context over here and give us a new input field where we’ll be able to paste in a Zapier webhook. If you’re new to Zapier and webhooks, I’m going to show you exactly how to do that now.

What you want to do is go to zapier.com. If you create a free account there, or if you’ve already got an account, you can just log in. We want to create a new Zap, which is an automated workflow. You can go down here, or go up to the Create button and click on Create, then click on Zaps. That’s going to give you a new workflow builder that will allow us to set up this Zapier webhook, which we can then paste into the Emailify Figma plugin.

All you need to do first is click on the Trigger item. That’s going to be the webhook event that we’re setting up. The trigger is going to be the Webhooks option. Go over to the popular built-in tools and click on Webhooks. This sets up the trigger as a webhook, which allows us to send the content from our email exports in Figma over to Zapier. From there, we can trigger an action, which in our case will be uploading the zip file to a Google Drive folder.

We’re going to set the trigger event to Catch Hook. Select Catch Hook and click on Continue. You can leave the Pick child key field blank and click on Continue. Zapier will now give you a test tab where it generates the webhook URL. It says you’ll need to configure your application with this webhook URL.

Click on the Copy button in Zapier and copy that to your clipboard. Then go back to Figma and paste it in. You can see here that we’ve pasted it in and it’s saying it’s a valid webhook URL. We can click on the Upload to Zapier button to test the webhook.

Zapier is now listening for that webhook. What this does is generate the HTML email in the Figma plugin and upload the zip file to Zapier. You can see that it’s saying the Zapier upload has worked. If we go back to Zapier and click on Test trigger, it should find the record.

Down here, you can see it’s found the webhook request. The request we just made is showing up as Request A. You can click on that and see the contents of the request. You’ll see the file name and the file itself, which is the zip file. You can also download that zip file, and it will be an exact copy of what was sent to Zapier.

I’ve just unzipped that, and you can see we’ve got our HTML files in here, including the emails we just exported from Figma. The webhook is working perfectly. It’s capturing the file name and the file itself.

Now we can click on Continue with the selected record. That allows us to add the Google Drive step. I’m going to click on the Google Drive action.

After adding the Google Drive action, you’ll need to connect your Google Drive by signing into your Gmail account if you haven’t already done that. I’ve already connected mine, which is why it’s showing up here.

Now that Google Drive is connected, click on Choose an event. Scroll down to Upload File, which allows us to copy a file from another service into Google Drive. Click on Upload File and then Continue.

We can now specify the Google Drive settings. I’ll select my Google Drive. For the folder, I’m going to create a new folder in Google Drive called “Emailify template uploads.” This will be the folder where our uploads go.

Back in Zapier, click on the Folder field, choose a value, and select the Emailify template uploads folder. For the File field, press the slash key and select the File field coming from the webhook. That specifies the file being sent.

Set Convert to document to false. For File name, press the slash key again and select File name from the webhook data. That uses the file name coming from the Figma plugin. For File extension, you can leave it blank because the file name already includes .zip.

Click on Continue. You’ll now see the test step. Because we already sent test data from the Figma plugin, we can click on Test step. Zapier should now send that file to Google Drive.

You can see that it says a file was sent to Google Drive. If we go to Google Drive and open the folder we created, you’ll see the zip file from the Figma plugin sitting there. That means everything is working correctly.

We’ve exported a zip file from the Figma plugin, and it’s being automatically uploaded into our Google Drive folder via the Zapier webhook we just set up.

Now that the test is working, you can publish this automation in your Zapier account. You can rename it from “Untitled Zap” to something like “Emailify to Google Drive.” Once you hit Publish, the webhook goes live.

Back in your Figma file, with that webhook URL set up, anytime you export an email from the Emailify Figma plugin, it will be sent to Zapier and uploaded into your Google Drive folder automatically.

Zapier also supports many other integrations. You could, for example, send a message to Slack and attach the email zip file to notify your team or your client when a new email is exported from the Emailify plugin.

The Google Drive example is just an easy way to show the concept of catching zip file uploads from the Emailify plugin and doing something with them, in this case uploading them to a Google Drive folder.

I hope that’s been helpful. If you’ve been wondering how to use Zapier for your email workflows when exporting HTML emails from Figma with the Emailify Figma plugin, this is a really easy way to do it. Hopefully, it adds a bit of flexibility to your HTML email marketing workflows.

Thank you for watching, and we’ll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Google Web Designer vs Figma Banner Production
description: Compare Google Web Designer with a Figma-first Bannerify workflow for HTML5 banner production.
datePublished: 2026-01-04T00:00:00.000Z
dateModified: 2026-01-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-google-web-designer-vs-figma-banner-production/
markdownUrl: https://www.hypermatic.com/articles/bannerify-google-web-designer-vs-figma-banner-production.md
---

# Google Web Designer vs Figma Banner Production

Google Web Designer can be useful, especially when production happens outside the design team. But for teams already designing campaign creative in Figma, rebuilding banners in a separate app adds friction.

For campaign teams and agencies, this is really an HTML5 banner production problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Compare design ownership, animation control, variant production, client review, handoff, preview links, and ad platform packaging.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Bannerify helps because it can animate and export production-ready banner ads from Figma. It fits naturally into workflows involving display ad production, campaign variant exports, HTML5 ad QA, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

A fair comparison still makes the Figma-first workflow appealing for agencies and marketing teams that already design campaign creative in Figma.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Bannerify tutorial or product page. You can also explore [Bannerify](/bannerify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: tutorial
title: How to export HTML emails from Figma to SARE using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2026-01-04T00:00:00.000Z
dateModified: 2026-01-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-sare-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-sare-using-emailify.md
---

# How to export HTML emails from Figma to SARE using Emailify

#### Video Transcript

Today I’m going to be showing you a quick tutorial on how to export your HTML emails from Figma to the SARE email marketing platform using the Emailify Figma plugin.

To get started, all we’re going to do is go to our Figma file. If you click on the little actions icon down here at the bottom toolbar, just go ahead and click on that. If you search for Emailify, and then click on the Plugins tab, you’ll be able to load up the Emailify Figma plugin here.

To run the Figma plugin, all you need to do is either click on the little Run button down here, or you can click on the Save icon here, which I’ve already gone ahead and done. If you click on that Save icon, you can run the Figma plugin by going back to your Figma canvas, just right-clicking anywhere, going down to Plugins, then going down to Saved plugins, and clicking on the Emailify item. And that’s just going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma, which you can then export to production-ready code in one click. I’m not going to go through all of the design features in this tutorial today. If you’re interested in those, we do have a few more tutorials on the channel and in the documentation that will help you do that.

Today I’m just using one that’s already been designed, which I’ve taken from the templates. If you go to the new email section and browse the Emailify Figma templates, you’ll find a bunch of free templates here that you can clone into your own Figma account for free. I’ve just grabbed one of the PlayStation templates.

We can preview that by just going to the Preview button in the Figma plugin. That’s going to run the HTML preview and allow us to preview the real HTML inside of the Figma plugin before we actually upload it. I’m pretty happy with this. As I said, it’s already been designed and everything’s looking really good.

What I want to do now is export it and upload it to the SARE email platform. I’m going to do that by going to the Export HTML button in the Figma plugin. I’m just going to click on that now.

We’re going to change the default HTML option from HTML email here. We’re just going to go to the platform integration section down here and scroll all the way down to the letter S, and you’ll see the SARE option come up when you click on that. We’ve just got that selected now.

You can add things like subject line and preview text. At the moment, I’m just going to leave those blank just to keep things simple, but feel free to populate those as you need. Then I’m just going to click on the Export for SARE button here.

That’s going to automatically download all of the images and generate the HTML code for the email, and then we’re going to be able to download that to our computer. You can see that the email code for SARE is ready to download.

I’m just going to go ahead and click on the Download your zip file button here, and I’m going to save that to my desktop. If you just go ahead and click on Save and then unzip that file, basically just double-click on the zip file on your computer, you’ll end up with this folder here.

You can see I’ve got a previews page, which we can load up in the browser. For example, if I wanted to open that up, I can just drag and drop that into the browser. You can see I’ve got this nice preview page, which is going to show how it looks on mobile and desktop. That’s all looking really good.

To get it into the SARE platform, you’ll notice at the bottom here it’s basically telling us to please upload the zip file inside of the zips folder, which also has “for upload to SARE” in brackets. If we open up the unzipped folder that we just downloaded from the Figma plugin, you can see that folder here. It just says _zips for upload to SARE. If we open up that folder, you can see that the Emailify template zip file is in there, just named from the Figma frame in our file.

All we need to do now is log into the SARE platform. You just want to log into your own SARE account, then you just need to go down to Mailing. Open up the Mailing option here, then click on New.

We can now go over to the Import mailing template option, which allows us to import our own HTML code. I’m just going to click on that one. I’m going to give this a template name of Emailify template.

Now what we can do is upload the zip file that we just had a look at in our folder. I’m going to browse for that file. I’m going to go to my folder, go into that zips folder where it says for upload to SARE, find my email template zip, then I’m just going to click on the Open button. That’s basically going to select that zip file.

Once you’ve selected the zip file, just go ahead and click on Import. This is going to upload the HTML email template into the SARE platform, and in a moment we’ll be able to view that in the platform.

You can see here that now under the My templates section, under Mailing, My templates, it’s just added a brand new template called Emailify template. We can now check that out by clicking on this preview icon over here. That should load up the template as expected.

You can see we’ve got our HTML content in there as you’d expect, and all of the images are loading up. We can also check that out on mobile as well. You can see that it’s very nice and responsive and everything’s looking really good.

That’s basically it. I just wanted to show you a quick tutorial on how you can get your custom HTML email templates that you’ve exported from the Emailify Figma plugin into the SARE email marketing platform. You can now go ahead and use that custom HTML email template however you like, and that’s going to be looking really good.

The only small thing to note is that the SARE platform only allows email templates that are under 10 megabytes in total. In this case, we’ve got a really compact one. It’s just under 500 kilobytes. If you’re using heavy images or using a lot of things like GIFs, animated GIFs that are quite heavy, it may block you from uploading the email. Just make sure that the total size of all the images is under 10 megabytes, and then you should be good to go.

I hope that’s been helpful. If you are using the SARE email marketing platform to send out your email marketing newsletters, this is going to be a really easy way of getting your custom HTML emails designed in Figma and then exported to production-ready code to send out with one click.

Thank you for watching the tutorial, and we’ll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Display Ad QA Checklist Before Launch
description: A practical QA checklist for HTML5 display ads, animated banners, and campaign variants before they go live.
datePublished: 2026-01-02T00:00:00.000Z
dateModified: 2026-01-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-display-ad-qa-checklist-before-launch/
markdownUrl: https://www.hypermatic.com/articles/bannerify-display-ad-qa-checklist-before-launch.md
---

# Display Ad QA Checklist Before Launch

Display ad QA is easy to rush because every banner size looks like a small asset. In practice, each size has timing, file weight, click behavior, animation, fallback, and platform compliance risks.

For campaign teams and agencies, this is really an HTML5 banner production problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Check dimensions, file size, click tags, looping rules, animation duration, final frame readability, fallback frames, image compression, text legibility, and platform-specific specs.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Bannerify helps because it can animate and export production-ready banner ads from Figma. It fits naturally into workflows involving display ad production, campaign variant exports, HTML5 ad QA, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Use the checklist before opening the export workflow, then move into the relevant Bannerify tutorial when platform-specific steps are needed.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Bannerify tutorial or product page. You can also explore [Bannerify](/bannerify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Modular Email Template Workflow in Figma
description: Build modular Figma email templates that are easier to reuse, approve, and export with Emailify.
datePublished: 2025-12-31T00:00:00.000Z
dateModified: 2025-12-31T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-modular-email-template-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/emailify-modular-email-template-workflow-in-figma.md
---

# Modular Email Template Workflow in Figma

Modular email templates help teams move faster because campaigns can be assembled from approved blocks instead of redesigned from scratch. The trick is making those modules flexible without letting them become fragile.

For email designers and marketing teams, this is really an HTML email production problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Create reusable modules for headers, product rows, editorial content, promos, testimonials, CTAs, and legal footers. Define which modules can repeat, which can stack on mobile, and which should stay fixed.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Emailify helps because it can design and export responsive HTML emails directly from Figma. It fits naturally into workflows involving email design systems, responsive email QA, handoff to marketing platforms, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Focus on reusable production habits, not just component aesthetics.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Emailify tutorial or product page. You can also explore [Emailify](/emailify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: tutorial
title: Export animated HTML banners from Figma to Google Drive with Zapier using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-12-30T00:00:00.000Z
dateModified: 2025-12-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-banners-to-google-drive-from-figma-with-zapier-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-banners-to-google-drive-from-figma-with-zapier-using-bannerify.md
---

# Export animated HTML banners from Figma to Google Drive with Zapier using Bannerify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your animated HTML banners from Figma to a Google Drive using the Zapier integration inside the Bannerify Figma plugin.

To get started, all we're going to do is go to our Figma file. Just click down here on the little actions icon, and if you search for Bannerify, you can run the Figma plugin by either clicking on this run button down here or, I'd recommend clicking on the save icon next to that. That's going to let you run the Figma plugin from your saved Figma plugins list.

I've already clicked on the save icon here, so I'm just going to go back to my Figma canvas, right click anywhere, go down to Figma plugins, then go down to saved Figma plugins and click on the Bannerify item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically takes any Figma frames on your page and treats those as banners. In this case, I've got a bunch of different frame sizes. I'm just going to load all of those in by clicking on the load all banners button down here.

Once those load in, you'll notice that it takes each of the content layers inside of the frame and allows you to animate those inside of the Figma plugin. You can see here when I do a bit of a playback, I've already got some animations applied to those layers. But you can obviously design those layers and animate them however you like.

I'm not going to be going into detail about all of the animation features today. There's a bunch of other video tutorials on the channel if you're interested in learning more about that. Basically you can just go through them, select the animation styles you want, and adjust the timings, and you'll end up with something that looks a little bit like this.

Today, the main purpose of the tutorial is to take these finished animations, export them out to HTML, and automatically upload those into a Google Drive folder using the Zapier platform. I'll show you how to do that now.

We're going to go back to our Bannerify Figma plugin. We're going to click on the export to HTML button in the top right corner here. What you want to do is go down here to where it says upload preview page and make sure that toggle is enabled. By default, it's going to select the Netlify platform. We're not going to be using Netlify today. That is the other platform you can upload your banners to. We're going to change this Netlify option to Zapier instead.

I'm going to click on the Zapier option, and that's going to give us a new input field to paste in a Zapier web hook. If you don't know what that is, I'm going to show you what that looks like right now, so don't worry about that.

We can go back to our browser. What you want to do is create or log into your Zapier account at Zapier.com. Once you've logged into there, go down to the start from scratch section down here and click on the zap button. You can also go up to the create button up here and do it through there as well.

In this case, I'll just click on create. I'm going to click on zaps, which is an automated workflow. That's going to bring you to the Zapier workflow editor for creating these zaps, which is what they call the automations.

What we want to do first is set up the trigger. I'm just going to click on the trigger box here. Once that loads up, we can go over to the popular built in tools. In our case, we're going to select the web hooks option. If I click on the web hook option now, that's going to add that to my editor here.

What a web hook is, is basically a URL that you can post things to. In this case, we're going to post our banners to the web hook, and Zapier is going to receive that post or that content, and then we can go ahead and do something with that content, which we'll get to in a moment.

What we want to do is go over here, click on the trigger event, and click on the catch hook button. We want to check that the trigger event is set to catch hook. We're going to save that and then click on continue.

We can leave this field blank for the time being, then click on the continue button again. Where it says test here, it'll give you this web hook URL. You can see here I've now got a web hook URL. We can click on the copy button here, and that's going to copy it to our clipboard.

We just need to go back to our Bannerify Figma plugin, and in the field down here where it says paste in your Zapier web hook URL, I'm going to paste that in right there. You can see here it's telling us that our banners zip file will be uploaded to Zapier. I'm not going to click that just yet because we haven't finished setting up the Zapier automation.

Now that we've got the web hook trigger set up, the next thing we need to do is say what we want that to do once it receives the trigger. I'm going to go down here where it says action. This is selecting the event for the Zap to run when this trigger fires. I'm going to click on action.

In today's example, we're going to use Google Drive as a basic example. You'll notice there's over 7,000 different apps that you can integrate with. Uh, if you wanted to upload your banners into a Slack channel or do something like that, you could use a different integration. I'm going to keep it simple today and use the Google Drive integration.

We're going to click on the action event dropdown. I'm going to click on the choose event dropdown, then scroll down under the create section and go to where it says upload file. We're going to click on that upload file option.

Under the account section, you want to connect your Google Drive. This is going to ask you to sign in with your Google account. I'm going to go ahead and do that now. Once you sign in, you'll get a prompt that says Zapier wants to access your Google account and your Google Drive to create files. In this case, I know we're setting up that integration, so I'm going to agree to the permissions and click on the continue button.

Once that authenticates, you'll notice the account down here changes and populates with your Gmail address or Google account that you've signed in with. That's looking good. I'm going to click on the continue button.

We can now customize where this file is going to get uploaded. I can choose the drive. In this case, I'm just going to select my Google Drive. Because this is a fresh Google Drive, I'm going to create a brand new folder. I'm going to click on new, then click new folder. I'm going to name this one Bannerify uploads and then click on create.

You'll notice in a second that should pop up. We've got a brand new folder here in our Google Drive. I'm going to go back to Zapier, and under folder, click on the choose a value selector. We should now see our Bannerify uploads folder available. I'm going to click on Bannerify uploads. That's looking good.

At this point, we need to complete the web hook step to figure out what fields we're going to be sending from the Figma plugin. If you don't know what's going on here, just keep following along and we'll get there in a moment.

What we're going to do is send a test trigger from the Bannerify Figma plugin into the web hook in Zapier. I'm going to click on the export button here. That's going to export our HTML banners from Figma. Once it finishes, it's going to post that zip file to our Zapier web hook because we've got that enabled.

Because this is the first time we're doing it, Zapier is listening for the request. Once it's received, we'll be able to see what fields and data are coming through. You can see that the Zapier upload was completed and the HTML files were exported.

I'm going to click on the test trigger. When I click on the test trigger button, it's found the post that we just did. This is the request we just made from the Figma plugin. Because we posted the data from the Figma plugin, the Zapier integration has found that.

If we click on the request over here, you can see we've got our file that was uploaded and the file content as well. I'm going to click on continue with selected record after selecting that test request.

Now that we've got that data captured and Zapier knows what kind of data to expect, we can link that up with our Google Drive configuration. I'm going to click on continue again since we've already set up authentication.

Now we can map where the file is going to be coming from. To point the file we want to upload into Google Drive, all we need to do is click on this file input and press the slash button on your keyboard. That will give you suggestions of what field we want to map it to.

In this case, we want to map it to the file. You can see there's a field called file under the web hook notifications. I'm going to click on that file option. That's going to map the file to be uploaded into Google Drive.

I'm going to leave that as is. I'm not going to select convert to document. I'm going to leave that set to false. Under file name, we're going to do the same thing. Press slash, then pick file name. We're mapping the file name to the file name coming from the Figma plugin.

For file extension, I'm going to leave that blank because we're already passing the file name, which includes the .zip extension. There's no need to include it here.

I'm going to click on continue. You can see it's loading the test data. It's got the file content, the file name we mapped, and it's not converting it to a document.

Now I'm going to test this as well. I'm going to test the Google Drive integration step by clicking on the test step button. That will test the integration using the test data sent to the web hook. You can see we've got a check mark, which means it worked as expected.

If we go back to our Google Drive and open the Bannerify uploads folder, you can see the file that we uploaded from the Figma plugin through the Zapier web hook has been sent to Zapier, passed into the Google Drive step, and uploaded into our folder. We've got it there exactly as expected.

I can download it to my computer or share it with other people on my team. I don't need to manually upload it from my desktop. I can upload it directly into my Google Drive using the Zapier integration.

As mentioned, I wanted to keep this simple to show you how to set up the web hook and how to create the event that takes the data captured by Zapier whenever it's posted from the Figma plugin. You can then use that data to do whatever you like.

In this case, I've just got it uploading to a simple Google Drive folder. Of course you could do other things with that using the many integrations that Zapier offers.

I hope that's been helpful. As you might have seen, this was just running the test step to make sure the integration works. Once you're happy with it, you can publish it.

I'm going to remove this extra step here and leave it as a simple two step process, uploading into Google Drive. Once you're ready, you can click on publish. From then on, it will listen for any posts or requests sent to this URL from the Figma plugin.

Every time the export process happens from Bannerify with this web hook inserted and the toggle enabled, it will trigger that event and take the uploaded file and do whatever you've set it to do, in this case uploading it to Google Drive.

There's a lot of opportunity for automation here. I wanted to run through all of this in case you're new to Zapier or new to web hooks and automations. Hopefully this has been a good starting point or crash course on how you can post zip files or banners from the Bannerify Figma plugin to your Zapier account and then put them into Google Drive or any other automation you're interested in.

Thank you for bearing with me if you're new to this, and thank you as always for watching. We'll be back soon with more Figma tutorials like this one.

---

---
type: article
title: HTML Email Handoff Checklist for Designers and Marketers
description: Use this handoff checklist to move Figma email designs from design approval to production HTML with fewer surprises.
datePublished: 2025-12-29T00:00:00.000Z
dateModified: 2025-12-29T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-html-email-handoff-checklist-for-designers-and-marketers/
markdownUrl: https://www.hypermatic.com/articles/emailify-html-email-handoff-checklist-for-designers-and-marketers.md
---

# HTML Email Handoff Checklist for Designers and Marketers

Email handoff breaks when the design looks approved but the production details are still vague. Links, alt text, image exports, mobile rules, UTMs, legal text, and email client expectations all need ownership.

For email designers and marketing teams, this is really an HTML email production problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Before export, confirm final copy, link destinations, UTM rules, fallback fonts, image crops, tracking requirements, footer details, and who signs off after testing.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Emailify helps because it can design and export responsive HTML emails directly from Figma. It fits naturally into workflows involving email design systems, responsive email QA, handoff to marketing platforms, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

This checklist becomes a bridge into deeper Emailify tutorials after the broader handoff process is clear.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Emailify tutorial or product page. You can also explore [Emailify](/emailify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Figma Email Design System Checklist
description: Plan a reusable Figma email design system that can become production-ready HTML with Emailify.
datePublished: 2025-12-27T00:00:00.000Z
dateModified: 2025-12-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-figma-email-design-system-checklist/
markdownUrl: https://www.hypermatic.com/articles/emailify-figma-email-design-system-checklist.md
---

# Figma Email Design System Checklist

A Figma email design system is more than a set of attractive modules. It has to account for email client constraints, reusable content patterns, responsive behavior, and the way marketers will assemble future campaigns.

For email designers and marketing teams, this is really an HTML email production problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Plan reusable headers, heroes, product blocks, editorial sections, CTAs, footers, disclaimers, spacing rules, fallback fonts, image ratios, and mobile stacking behavior.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Emailify helps because it can design and export responsive HTML emails directly from Figma. It fits naturally into workflows involving email design systems, responsive email QA, handoff to marketing platforms, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Treat the email design system as a source of reusable production rules, not just a visual library.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Emailify tutorial or product page. You can also explore [Emailify](/emailify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Figma Email Builder vs Email Platform Builder
description: Compare designing emails in Figma with Emailify against building directly inside email platform editors.
datePublished: 2025-12-25T00:00:00.000Z
dateModified: 2025-12-25T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-figma-email-builder-vs-email-platform-builder/
markdownUrl: https://www.hypermatic.com/articles/emailify-figma-email-builder-vs-email-platform-builder.md
---

# Figma Email Builder vs Email Platform Builder

Many teams are split between two workflows: designers create the campaign in Figma, then marketers rebuild it inside an email platform. That works for simple newsletters, but it often creates duplicate work and weakens brand control.

For email designers and marketing teams, this is really an HTML email production problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Use the platform builder when the email is mostly text and speed matters more than layout. Use a Figma-first workflow when the design system, visual hierarchy, responsive structure, and approval process matter before the email is sent.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Emailify helps because it can design and export responsive HTML emails directly from Figma. It fits naturally into workflows involving email design systems, responsive email QA, handoff to marketing platforms, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

The right workflow depends on how much design control, reuse, and production speed the team needs.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Emailify tutorial or product page. You can also explore [Emailify](/emailify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: Outlook Email Rendering Checklist for Figma Designers
description: A practical checklist for making Figma email designs more likely to survive Outlook rendering quirks before export.
datePublished: 2025-12-23T00:00:00.000Z
dateModified: 2025-12-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-outlook-email-rendering-checklist-for-figma-designers/
markdownUrl: https://www.hypermatic.com/articles/emailify-outlook-email-rendering-checklist-for-figma-designers.md
---

# Outlook Email Rendering Checklist for Figma Designers

Outlook is where a lot of polished Figma email designs go to get humbled. A layout can look clean in the canvas and still fall apart when desktop Outlook interprets spacing, buttons, columns, and background colors differently from modern email clients.

For email designers and marketing teams, this is really an HTML email production problem. The design source usually starts in Figma, but the final output has to survive production constraints, stakeholder review, and handoff to the next person in the workflow.

### What to check first
Keep the design simple enough for table-based HTML, use fallback-safe buttons, avoid relying on background images for critical content, check image dimensions, and decide how columns should stack before export.

The mistake is waiting until the final export to discover these issues. A better workflow catches them while the design is still easy to adjust. That keeps the final output closer to the approved Figma file and reduces the amount of cleanup needed downstream.

### A better Figma workflow
Use Figma as the source of truth, then make the production rules visible before handoff. That means naming important frames clearly, keeping realistic content in the design, checking edge cases, and deciding who owns the final review.

Emailify helps because it can design and export responsive HTML emails directly from Figma. It fits naturally into workflows involving email design systems, responsive email QA, handoff to marketing platforms, especially when the team wants to stay close to the approved design instead of rebuilding the work somewhere else.

### Where teams go wrong
Most teams do not fail because they lack a tool. They fail because the workflow is unclear: nobody owns the final check, the output format is chosen too late, or small production constraints are ignored until launch pressure is high.

Use the checklist for practical risk reduction: understand why Outlook is difficult, check the design before export, and move into hands-on testing when the campaign is ready.

### Next step
If this is a recurring workflow for your team, standardize the checklist and link it to the relevant Emailify tutorial or product page. You can also explore [Emailify](/emailify/) when you are ready to turn the Figma source into production-ready output with fewer manual steps.

---

---
type: article
title: From Five to Six
description: Looking back on 2025 (and towards 2026) as we celebrate Hypermatic's sixth birthday.
datePublished: 2025-12-21T00:00:00.000Z
dateModified: 2025-12-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/from-five-to-six/
markdownUrl: https://www.hypermatic.com/articles/from-five-to-six.md
---

# From Five to Six

>“Even when I'm eatin', I be on alert. <br>I ain't with the frontin', I just make it work.” 

— [Larry June](https://www.youtube.com/watch?v=7tvHLQPMcck), The Good Kind

It's been exactly one year since posting an update for Hypermatic's 5th birthday ([From Four to Five](https://www.hypermatic.com/articles/from-four-to-five/)), so here's another annual recap to celebrate Hypermatic turning 6 years old today!

### Some numbers to celebrate from 2025

- **0** investors and **$0** funding (still happily bootstrapped/[default alive](http://www.paulgraham.com/aord.html))
- **17** new YouTube [tutorials](https://www.youtube.com/@hypermatic_tutorials) recorded
- **432** new product updates and improvements shipped
- **1,807,900+** users (up from 1,450,000 a year ago)

### Some new feature highlights shipped in the last 12 months (since January 2025)

Besides the usual bug fixes, customer requests, and other smaller enhancements, these were some of the other new features that made their way into the [@hypermatic](https://x.com/hypermatic) feed on X (which is mainly used to keep a record of these changes) over the last 12 months:

- Added [Multi-Platform HTML Exports](https://x.com/hypermatic/status/1998891605303111819) to Bannerify
- Added [Email Template Categories](https://x.com/hypermatic/status/1996355600289284573) to Emailify
- Added [Advanced Merge Tags](https://x.com/hypermatic/status/1995307072959987968) to CopyDoc
- Added [JPG/PNG Slide Exports](https://x.com/hypermatic/status/1993835260828897499) to Pitchdeck
- Added [Outlook Email Signature exports](https://x.com/hypermatic/status/1993484115145113735) to Emailify
- Added [Figma Buzz support](https://x.com/hypermatic/status/1981521197507694858) to CopyDoc
- Added [Figma Buzz support](https://x.com/hypermatic/status/1981510009256386903) to TinyImage
- Added [Placeholder Text Syncing](https://x.com/hypermatic/status/1966016573678014844) to CopyDoc
- Added [Animated PNG (APNG) Exports](https://x.com/hypermatic/status/1965568807021518880) to TinyImage
- Added [Saved Custom Code Presets](https://x.com/hypermatic/status/1965206855753630028) to Bannerify
- Added [Animated PNG (APNG) Exports](https://x.com/hypermatic/status/1964920575207645309) to Bannerify
- Added [Custom Filenaming Updates](https://x.com/hypermatic/status/1963073570814472329) to TinyImage
- Added [HTML Text Optimisations](https://x.com/hypermatic/status/1956191812055654665) to Emailify
- Added [PowerPoint Video Embeds](https://x.com/hypermatic/status/1952588795477700667) to Pitchdeck
- Added [Self-Hosted Web Presentations](https://x.com/hypermatic/status/1952205591360983551) to Pitchdeck
- Added [Component Variant Syncing](https://x.com/hypermatic/status/1950439982067568662) to CopyDoc
- Added [Login Page Customizations](https://x.com/hypermatic/status/1949622355342627039) to Pitchdeck
- Added [Divider Line Padding](https://x.com/hypermatic/status/1946762816767369538) to Emailify
- Added [Text Color Backgrounds](https://x.com/hypermatic/status/1946361988491411563) to Emailify
- Added [Text Padding](https://x.com/hypermatic/status/1946000512450793606) to Emailify
- Added [Export Presets](https://x.com/hypermatic/status/1944975502629908816) to Emailify
- Added [Video → GIF imports](https://x.com/hypermatic/status/1936990558024831155) to Convertify
- Added [Custom Image Hosting](https://x.com/hypermatic/status/1932665729683542517) to Emailify
- Added [new Figma UI3 style updates](https://x.com/hypermatic/status/1920249658577989823) to all Figma plugins
- Added [a Bento export option](https://x.com/hypermatic/status/1913372280643887555) to Emailify
- Added [Hybrid Previews](https://x.com/hypermatic/status/1913081378436223328) to Emailify
- Added [Figma Slides support](https://x.com/hypermatic/status/1912742156848259472) to TinyImage
- Added [Figma Slides support](https://x.com/hypermatic/status/1912344031285178798) to CopyDoc
- Added [a Yotpo export option](https://x.com/hypermatic/status/1905069257333121321) to Emailify
- Added [Figma Slides support](https://x.com/hypermatic/status/1896647392285614480) to Pitchdeck
- Added [Feedback Filtering](https://x.com/hypermatic/status/1894629965913886870) to Commentful
- Added [Split File Exports](https://x.com/hypermatic/status/1894193078371848363) to CopyDoc
- Added [BidTheatre exports](https://x.com/hypermatic/status/1892422424718671926) to Bannerify
- Added [Kanban Boards](https://x.com/hypermatic/status/1889185740959211987) to Commentful
- Added [Font Overrides for Google Slides](https://x.com/hypermatic/status/1887008505418408344) to Pitchdeck
- Added [Layer Hiding Spreadsheet Sync](https://x.com/hypermatic/status/1886620146602824113) to CopyDoc

### Skipping the 2025 mid-year update post

For the last six years, I've always done a mid-year "Independence Day" update on July 4th; and while I started drafting that for 2025 at the time, there was a bunch of other stuff going on that made it feel weird to post an update while I was so unsure about a bunch of things that were up in the air at the time. I will try to cover the entire year in the post below instead, with some personal and business updates, as both sides have influenced the direction of the company.

### Health scare (with another family member) in January 2025

At the very start of the year, without going into personal details, there was an unexpected and sudden health scare with a close immediate family member that very narrowly escaped death.

I think that this kind of set the tone for the rest of year, where I started thinking more about how I was spending my own time, and reflecting on some changes I wanted to make for myself personally, and also within the company going forward. You will see some of these things in the following sections below.

### Removing our Enterprise offering

Earlier this year, I made the decision to completely shut down our Enterprise offering. This was a very intentional decision to move away from the Enterprise space as a company-wide direction. 

Of course, this decision came at a pretty large financial cost, but the trade-offs have been worth it for how I want to run the company, rather than just following the well-known path that most software companies end up following, where they "double down on Enterprise sales"; and I don't want to do that, because it's not the right fit for Hypermatic.

Since then, this has meant turning down customers with requests for these services (at a higher price point), but staying on that path has helped us stay nimble, focused, and able to continue to offer lower pricing to all of our other customers on the self-serve Pro license.

>The most contrarian thing of all is not to oppose the crowd but to think for yourself.

— Peter Thiel, Zero to One

As some more context, for anyone who has not been through the Enterprise sales cycle, there's an accurate article called [Bending over: How to sell to large companies](https://blog.asmartbear.com/selling-to-large-companies/) that's a good introduction.

Basically, this is a very complex ongoing process that usually takes a minimum of 6 months per new customer, but can take as long as 18+ months (in more extreme cases) from the date of the first email enquiry to signing the final agreement.

We started supporting this earlier on in the company's history to try and help accommodate very specific requests from certain customers, but over time, this took up much more time, energy and bandwidth, and was (by far) the most de-motivating and unpleasant part of running the business.

The final straw that led to completely shutting down our Enterprise offering came after spending almost 12 months after doing all of the pre-work and onboarding requirements for a future Enterprise customer.

The process started with all of the usual things — filling out a bunch of forms to be onboarded into a vendor system/platform, sending/receiving dozens of documents, passing security questionnaires with hundreds of questions, completing various surveys about environmental impact, agreeing to diversity and inclusion quotas, and signing documents verifying that we are indeed against child slavery.

However, one of the later steps involved taking out a very specific insurance policy just for this one customer, only to be completely "ghosted" soon after, where we never heard back from them again.

While this particular example was an extreme case, in terms of its (non) outcome, the process itself of going through all those steps for multiple companies at the same time is not how we want to be using our energy.

It has been said that "You can just do things", and as the founder and CEO of Hypermatic, this is one thing I've decided to just do (or _not_ do, in this case), and I can confirm that it has been one of the best big directional decisions that I have made so far.

### _Not_ selling the company (and remaining 100% independent)

As I mentioned, and as you can probably tell from my extended "rant" above, the Enterprise side of things was really wearing me down earlier this year, to the point where, for the first time ever, I actually entertained the idea of selling Hypermatic as an alternative option during the middle of 2025.

We got all the way up to the stage of receiving a formal offer from one acquirer, but I felt in my gut that it wasn't going to be the right fit for the future home of Hypermatic, and so I graciously turned down the offer; once again, at a large financial opportunity cost (if you're picking up on a recurring pattern).

After deciding against selling, as it always had been prior to then, _Hypermatic remains 100% independent_, self-funded (bootstrapped), and has still never taken any outside investment to this day.

In the end, while the Enterprise side had worn me down and dampened my day to day enjoyment of running the business, I decided that I still love working on the company, our products, and our customers; so I realised that the goal should be trying to make the business the right "founder-fit" for me personally, and in turn, helping to continue deliver the most value to our customers as possible.

### Making our company-wide policies public

After deciding that I need to make some changes to ensure that I'm building the company that I personally want to work on every day, and cutting the Enterprise tier from our offerings, I also decided to draw a line in the sand for a bunch of other things, too.

Rather than having to decide on a case-by-case basis, or continually reply to the same enquiries (only to say that we can't help them with their request), I decided to actually write these down and formalise them as company-wide policies that are easily visible on our contact page, before we waste anyone's time with reaching out about them:

- We _don't_ have meetings
- We _don't_ jump on calls.
- We _don't_ offer discounts.
- We _don't_ fill out forms or surveys.
- We _don't_ go through vendor onboarding.
- We _don't_ accept bank transfers.
- We _don't_ white-label our products.
- We _don't_ do partnerships.
- We _don't_ do affiliate programs.

Similar to cutting our Enterprise tier, I have no doubt that these policies will cost us opportunities, but the trade-off is worth it. As I wrote [on our contact page](https://www.hypermatic.com/contact/#policies) below:

_"We're an independent calm company that likes to keep things really simple — we build excellent products and provide amazing customer service at a fair price — that's all we do. We only work with customers who share our values and who also like to keep things simple. If that's not you, we're not going to be a good fit for each other, no hard feelings!"_

Just because some customers would prefer us to do some of these things, doesn't mean we have to conform our own company culture to facilitate those things to fit their own company culture policies. 

There's no law that says you need to agree to a 1-hour meeting invite with half a dozen people for something that could easily be answered in an email, and I think everyone on both sides would be thrilled to have that hour of their finite life back, in any case.

>Not to get too deep before cocktail hour, but need I remind you of the finite nature of life?

— Roger Sterling, Mad Men

The reality is that it's incredibly easy to just say "yes" to every request, to the point where that ends up becoming the only things you spend your time on; if we agreed to every type request above, nothing would get done, because we'd be on Zoom calls or trapped in a SAP Ariba dashboard hellscape filling out 4,000 forms for months on end, and have no time or motivation to actually add value to our customers by building things they need, or providing them with excellent customer support.

### Claude Code joins the team

Another really big change that also influenced the future of the business was the release of [Claude Code](https://claude.com/product/claude-code) earlier this year. The short summary is that Claude Code is already so good (and getting better every month) that I will not be looking to hire any developers in the future to help with writing code. Despite what you may have heard, it is not just a "junior developer" or "good for small tasks", it is much closer to the experience of collaborating with some of the best human developers that I have ever worked with.

After giving a bunch of different AI enhanced coding tools a try over the last few years (Github Co-Pilot, Cursor, etc), it wasn't until I gave  a proper try earlier this year that it finally clicked, where I had the same feeling that I had seeing Figma for the very first time back in 2018. It is the feeling where you could instantly tell that this was clearly going to be the future of a workflow; in that case, it was the future for design, and in this case, it's the future of development.

Like any software company, there is always a list of features, improvements or customer requests that have taken a back seat; adopting Claude Code was the perfect tool to help with all of this, as it's very good as refactoring code, and working on very tightly scoped features or improvements. As of now (December 2025), with the help of Claude Code, I can say that the backlog that existed at the start of the year has almost been entirely completed.

There is lots of talk about an "AI bubble", which I won't speculate on here, but all I can say that is that Claude Code (and other coding agents) are a complete game-changer, and will be the default way that 99% of all code is written in the future.

It's interesting to still see so much skepticism, negativity, or outright hate in terms of these AI tools. It seems like there are some people who are totally blind to how good these tools are already (and how they will continue to improve in the future), because they have already positioned themselves as being opposed to them for other reasons. It makes me feel like I am living in a parallel reality when I read [articles like this](https://ethanmarcotte.com/wrote/against-stocking-frames/) from September 2025, that open with the paragraph below:

_"I think it’s long past time I start discussing “artificial intelligence” (“AI”) as a failed technology. Specifically, that large language models (LLMs) have repeatedly and consistently failed to demonstrate value to anyone other than their investors and shareholders. The technology is a failure, and I’d like to invite you to join me in treating it as such."_

At the same time, I have Claude Code completing features or code improvements _perfectly_ and autonomously, where I can review every line of code it added or updated, just like how you would review the code of another developer on your team before accepting their pull request and deploying the code (after testing it). 

In a world where you can already use natural human language to tell a tool like Claude Code on what you'd like it to do (just like you would describe to another human developer on your team), and have Claude Code complete that task as well as you (or your co-worker) could; it seems wild to say that this fails to demonstrate value to anyone besides investors or shareholder of AI companies, rather than the users of these AI tools, who can benefit from using them for _free_, or at very low cost.

Even more confusing is the final line of the article above:

_"'Artificial intelligence' is a failure. Let’s you and I make sure it stays that way."_

Again, this seems like a "tell" that this way of thinking it's less about the technology itself, and more about a certain worldview or identity that isn't compatible with AI succeeding; to the point where actively _ensuring_ the technology isn't allowed to succeed is the goal, rather than figuring out how to make it better.

If AI is truly a "failure" and doesn't work, at least in terms of LLMs for coding, why has Claude Code reached $1 billion in run-rate revenue in only 6 months? This is the fastest product in history to go from $0 to $1 billion, so it seems more likely that it does actually "work" (really well), and everyone who is voluntarily paying for it are getting way more value from it than the $20/month - $200/month it costs them.

I think betting against AI progressing and improving is not a great strategy. This is where much of the investment capital and talent is going; of course, just like the early internet dot-com bubble, there will be too much hype, maybe too much pre-mature build out, many companies who will not make it, and probably a "correction" in some of the AI related stocks. All that said, it seems obvious that AI will be one of the driving forces of progress in the coming decades, and I think being optimistic about all the positive things it will be able to do is much healthier than being too black-pilled and willfully ignorant about what's already happening right now, and it's only going to keep getting better.

### Migrating the marketing site to Astro

After using the [Gridsome](https://gridsome.org/) static site generator since 2019, which had its development stopped a few years ago, I decided to migrate this website to the [Astro](https://astro.build/) static site framework instead.

Because Gridsome was Vue.js based, and Astro uses its own `.astro` files (although you can use Vue if you prefer), I used Claude Code to help port the previous Vue components over to work natively in Astro and remove the Vue.js dependency entirely. After migrating all of the content, pages, styles, and interactivity over, the result is a new static HTML website that is even faster than Gridsome was. 

Migrating to Astro was also a the perfect opportunity to ensure all of the content was up to date, and do some re-design work in terms of typography, colors, image assets and copywriting.

### Spending time Taiwan and South Korea

After working on Hypermatic every day since December 2019 without a full day off, and not traveling during that time (partly due to Melbourne being in lockdown for over 2 years), I decided that after five years of building the business full-time in Australia, it was time to take advantage of remote work and step out of my comfort zone while I still have the time, health, and flexibility to do so.

>Life moves pretty fast. If you don't stop and look around once in a while, you could miss it.

— [Ferris Bueller](https://www.youtube.com/watch?v=vsYBtfQ3QDo), Ferris Bueller's Day Off

To force myself out of my comfort zone, I decided to visit Taiwan in March, and then South Korea in October. I had a really great time in both places, and I will certainly go back to visit both again in the future, as there's so much to see.

#### Taiwan (March 2025)

In March, I spent 3 weeks in Taiwan, where most cafes don't open until after 10:00am, so I would usually either work from my hotel, and then try a different specialty cafe to work from later in the morning. I still worked every day, but was able to see a lot of Taipei, Tainan and Kaohsiung.

Taiwan seems very underrated as a tourist destination. I barely hear anyone talking about going there, and it wasn't uncommon to go many days without seeing another western foreigners there, especially after leaving Taipei. 

Coming from Melbourne, which is well known for having great cafes and coffee, I was surprised to see how thriving the coffee scene was in Taiwan as well. I came away realising that Melbourne does not have the best coffee in the world (although it's usually quite good), as I previously assumed we did. 

There are many specialty coffee shops, and the owners clearly take an extreme level of care in making it for you. I think the best coffee I've ever had was at the [Simple Kaffa](https://share.google/JSf02ihS7QXjSmfid) flagship store in Taipei; I went there 3 different times during my stay, where they always let me work for most of the morning while having their regular coffee, along with trying some other options like infusing whiskey or Taiwanese tea, which were also excellent.

There is very little English spoken or printed on menus, but I was able to get around easily enough and try a bunch of popular food there: Beef Noodle Soup, Xiao Long Bao (soup dumplings), Hu Zhao Bing (pork pepper bun), Lu Rou Fan (braised pork rice), Gua Bao (pork belly bun), Cong Zhua Bing (scallion pancake), Danbing (egg pancake roll), Taiwanese shaved ice, and of course, Bubble Tea.

#### South Korea (October 2025)

In October, I spent 3 weeks in South Korea, where I was still working 3-4+ hours per day, also still working every day, but I still had more than enough time to explore Seoul and Busan during the day and evenings.

Compared with Melbourne, which has felt a bit like its on life support since 2020, being in Seoul (and around Hong-dae in particular) felt like what a city should feel like. There was a huge amount of energy, everyone was out and about, being social with others and seemed to generally be having a good time.

Being in South Korea, it was very striking how different the culture was compared to Australia. It seems somewhat nationalist and inwardly focused. It feels like there's very little outside influence or care about what other places are doing. Many of the brands you use (cars, electronics, etc) are all Korean, the advertising you see is all Korean, the music you hear everywhere is all Korean. Similar to Japan, everything is also very functional, and more modern. People there were super friendly and helpful.

Like in Taiwan, I was also very surprised at the scale and quality of the coffee scene in Korea. There are many coffee shops, apparently over 100,000 across South Korea, and over 20,000 in Seoul alone. Similar to my experience in Taiwan, it's clear that South Korea has also definitely surpassed Melbourne in taking coffee very seriously, at specialty shops and roasters, at least.

Overall, I think South Korea was my favourite trip out of the few places I have visited outside of Australia so far.

### Looking ahead to 2026 for Hypermatic

Looking back on my 2024 end of year update, I used ChatGPT to summarize the things I wanted to deliver in 2025 into the bullets below, which I've marked as a success or miss.

- ✅ Prioritise stability, quality, and improvement over feature creep and UI bloat
- ✅ Focus on behind-the-scenes upgrades, performance, and better defaults with minimal UI disruption
- ✅ Ship integrations and enhancements that fit naturally into existing Figma workflows
- ✅ Publish more free design resources that work out of the box with the plugins
- ✅ Create more free video tutorials to help users unlock deeper value
- ✅ Migrate the marketing site to a modern framework and audit/simplify content
- ✅ Improve and maintain backend systems and internal tools
- ❌ Explore a new tool for building sites and landing pages that exports production-ready, user-owned code
- ❌ Use LinkedIn more deliberately to increase awareness within your existing network
- ✅ Maintain a long-term, sustainable focus on product quality, trust, and real user problems

The theme for this year was about taking a pause on making radical changes to the Figma plugins, and focusing on improving the performance and quality of them, without causing too many UI changes.

Instead of continuing to bloat them with new features for the sake of it, I wanted to make the existing features more valuable by adding more platform integrations and quality of life improvements.

In terms of building a new plugin that would help users create websites and landing pages, after having this on my "wishlist" for many years, after seeing how Figma executed its "Figma Sites" product and its new "Figma Make" product, I just can't see a huge opportunity for being able to deliver additional value to what those two already offer natively.

I do have a few ideas for brand-new Figma plugins that I am keen to explore in 2026, and I think going back to our roots of shipping something early and figuring out what is going to deliver the most value (then doubling down on those) is still the right approach.

Besides that, there are still a bunch of other improvements and features for many of the existing Figma plugins that would be great to add over the next 12 months as well, and I'm always surprised to learn more new use cases from our customers (which lead to new improvements and features) every week, so I'm sure there are still many things to come in 2026 that I haven't even thought of yet.

Next year, Hypermatic will also be going to the Figma conference (Config 2026) in San Francisco,for the first time. It will be cool to meet some customers in person, learn about the new Figma product updates in real-time, and also just generally get a sense of how people are feeling about design and development in mid-2026, which can be hard to tell just by trying to track it online (on X or Reddit etc) or by chatting with customers via email.

All in all, after working on Hypermatic every single day for the last 6 years, since December 21st 2019, I am incredibly thankful that I still get to do this full-time. My simple (and somewhat naive) dream when I first started was to be able to build design automation tools as a small self-funded startup, and be profitable enough to pay for my living expenses and continue working on helping to solve these problems for customers indefinitely. My assumption was that there were other people out there who were facing similar workflow headaches to the ones that I had when I worked as a designer/developer for 10+ years, and that mostly turned out to be true.

With that said, thank you to everyone who has tried out any of the Figma plugins from Hypermatic over the years, and I hope it has helped ease or remove some of the pain that you would have otherwise felt in your own design workflows.

I will be sure to post a mid-year update next year, which will be published shortly after getting back to Australia from the Figma conference in San Francisco. Wishing everyone who made it reading this far down the post (all 3 of you) a great start to your 2026 in the meantime!

---

---
type: tutorial
title: Export animated HTML banners from Figma to multiple ad platforms with one click using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-12-11T00:00:00.000Z
dateModified: 2025-12-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-banners-to-multiple-ad-platforms-from-figma-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-banners-to-multiple-ad-platforms-from-figma-using-bannerify.md
---

# Export animated HTML banners from Figma to multiple ad platforms with one click using Bannerify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your animated banners from Figma to production-ready HTML for multiple ad platforms at once using the Bannerify Figma plugin. Those will include things like Google Ads, DoubleClick, Adform, and other platforms that we'll run through in a minute.

If you're new to the plugin, the way that you can get started is by going to your Figma file, just going down to the little resources icon or actions icon at the bottom of your toolbar. Then, if you search for Bannerify under the plugins tab and click on the Bannerify item, you can run the Figma plugin either by clicking on this run button down here, or I'd recommend clicking on the save icon next to it. Clicking on save allows you to run the Figma plugin from your plugins list.

I've already clicked on the save button, so I'm just going to go back to my Figma canvas. I’ll right-click anywhere, go down to Plugins, then go down to Saved Plugins, and click on the Bannerify item. That will run the Figma plugin we saved a moment ago.

As I mentioned, if you're new to the plugin, the way it works is it basically takes any frames on your Figma page and allows you to load those into the Figma plugin as banners that we can animate. You can see here I've got eight different frames, each with some content layers in them. We can load all of these into the plugin, which I'll do now, and then you can see we've got access to all of our content layers from the Figma file. We can then animate those to create animated banners, which we will be able to export in a moment.

You can see I've already got a bunch of animation set up on these layers here. I did that by using the animation tools in the UI over here. I'm not going to go through all the ways you can animate the banners. I’ll assume that you've already animated all of your banners and layers and adjusted the timings the way you want. If you're new to the plugin, I'd recommend checking out some of the other YouTube tutorials and Bannerify documentation to get a better understanding of how to set up your animations.

Today, I'm assuming you've already finalized all your animations and are happy with them, and you just want to export them to HTML for multiple ad platforms.

The way we can do that is by going to the top-right corner of the Figma plugin, where it says "Export to HTML." Under the code output settings, by default, it exports to plain HTML and JavaScript using CSS keyframes. You also have the option to export for various ad platforms. These include Adform, AdRoll, DoubleClick, DoubleClick Studio, Google Ads, and other Google properties.

If you're exporting for one format, you can use these existing options. For example, if you need to export a banner set for Google Ads, select the Google Ads option and click on the export button. That will generate HTML for all your banners, ready to upload to Google Ads.

If you need to export for multiple platforms, the Figma plugin now has an option at the very bottom called "Multiple Platforms." Scroll down in the platforms list, find the Multiple Platforms option, and click on it. You'll notice a new input called "Add Platforms." This allows you to specify multiple platforms by searching for them.

For example, I could click on Google Ads, then add DoubleClick, and also add Adform. Now we've got three sub-options selected. With the new Multiple Platforms option, we can add as many platforms as needed. This will automatically export the banners for all selected platforms in one go.

I'll leave the other banner options as default, but you can customize these. For example, if Google Ads has a 150-kilobyte size limit, you can enable that file size target. Today, I’ll leave those turned off for ease of use. You can also customize what's included in the zip files.

Click on the "Export Banners" button. You'll see it's generating Google Ads code for eight different banners—platform one of three. Now it's doing DoubleClick—platform two of three. In a moment, it will do Adform, the last platform selected.

Once all are exported, you'll see a confirmation message saying the HTML banners are ready to download. Click on "Download Your Zip File" and save it to your computer. The zip file needs to be unzipped. Once unzipped, you'll get a folder with all the content in it.

Since we selected Google Ads, DoubleClick, and Adform, there are three different folders inside the exported zip file. Each contains its own banner set. You can see under "Banners," we've got all the code for each banner for Adform, Google Ads, and DoubleClick. Each HTML file is different, depending on the platform requirements.

The Figma plugin automatically takes care of click tags, meta tags, and click handlers. You now have a folder of zip files under the "_zips" folder for each platform. To upload your banners to Google Ads, you can take the zip files inside the "_zips" folder and upload each to the respective platform.

You'll also notice a preview page. Open the index.html file in a browser to see all banners for each platform. This is useful for previewing banners before uploading or for internal or client approvals.

That’s it. This tutorial shows how to export your animated banners from Figma to HTML for multiple platforms. You don’t have to individually export each option and restart the export process. Selecting multiple platforms at once speeds up the workflow, and you’ll get a single zip file containing all platforms, ready to upload or share.

I hope this has been helpful. If you're using the Bannerify Figma plugin to create HTML banner ads and want to export them to multiple formats more easily, the new Multiple Platforms option should improve your workflow. Thank you, and we'll be back soon with more Figma tutorials like this one.

---

---
type: tutorial
title: How to export Figma slides to JPG/PNG images with one click using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-12-01T00:00:00.000Z
dateModified: 2025-12-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-slides-to-jpg-png-images-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-slides-to-jpg-png-images-using-pitchdeck.md
---

# How to export Figma slides to JPG/PNG images with one click using Pitchdeck

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your slides from Figma out to static JPG images or static PNG images from your Figma design files. Also from your Figma slides files as well. I'm going to show you both of those shortly.

To get started, all we need to do is go to our Figma file, go to the little actions icon at the bottom toolbar here, and then you just want to search for Pitchdeck. Under the Figma plugins tab, if you click on the Pitchdeck item, you can run the Figma plugin by either clicking on the save icon down here, or you can click on the run button over here, and that will run the Figma plugin.

Because I've already clicked on the save icon, I'm just going to go to my Figma canvas, right click anywhere, go down to Plugins, then go to Saved Plugins, and then I'm going to click on the Pitchdeck item. That's going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically treats any frames on your Figma file as slides, and then you can use the Figma plugin to construct a Pitchdeck presentation which you can then export to various formats. Today we're going to be focusing on exporting your slides out to PNG images and JPG images.

If you click on the export button, you'll notice that there's a bunch of different formats we can export including a web presentation. You can export to PowerPoint, Keynote, and Google Slides or a PDF. But today we're going to be focusing on this static option, and we're just going to change this option to JPG images here.

After you've clicked on that, you can go ahead and click on the Export to JPG button. That's going to run through and export all of the frames from your Figma slides as per their order in the Figma plugin. Once that's ready, you can click on Download Your Zip File, and you can save that anywhere to your computer.

If you double click on that zip file and open up that folder, you'll see that we've got all of our slides exported as JPGs. If we open these up, you'll notice that these have been exported at 2x retina resolution. They're going to stay super sharp. You can present those, make them full screen, and that's going to look really, really sharp when you go to present that.

That's in the JPG format. We can also export them to PNG if you need to use PNG format. Again, I'm just going up to the corner in the Figma plugin, the top right corner, and clicking on the blue export button. We're going to change this one more time to PNG images instead, and I'm going to click on the Export to PNG button.

That's again going to run through and export all of my slides to PNGs. These have some very light compression on them as well, just to make them slightly smaller than the native images that get exported from Figma. You're going to get that really good quality-to-size ratio balance.

Once it finishes exporting, again we're going to click on the Download Your Zip File button, save that again to our computer, and if we open up that zip file and open up the folder, you'll see that this time we've got PNG files. These have all been automatically named so that when you run through them, they're automatically going to be in the correct order. Again, we can open that up and you'll see it's very sharp. It's a 2x retina resolution. Again, if you're presenting this full screen just as JPG slides that you're running through with your keyboard, that's going to look really, really sharp.

That's basically how you can do it. I said we'll also look at the Figma Slides file. At the moment we're just in a normal Figma design file. But if you are using the Figma Slides file, which is a different file format in Figma, you can also use that to create presentations using the Figma Slides format. Again, we can run the Figma plugin from here as well.

All you need to do is, again, you can either go down here to the actions item or, because we've already saved the Figma plugin, I'm just going to right click on my Figma Slides canvas. I'm going to go down to Plugins. You'll see here under Recents we've got Pitchdeck, or we can go to Saved Figma Plugins and again click on the Pitchdeck item. That's going to run the Figma plugin inside of our Figma Slides file as well.

You'll notice the interface is the same. We've got all of our slides as expected, and this is going to use the ordering from the Figma Slides file. Compared to in the Figma design file, we can rearrange the ordering using this drop-down list here, and that's going to rearrange the order in there. But for Figma Slides, because all of the ordering is done using the Figma Slides interface, it's just going to mirror whatever we've already got in there. I just wanted to flag that really quickly.

Once you've finalized your slides in Figma Slides, we can do the exact same thing. We can go to the top right corner, click on the export button, and again we're going to change the presentation export format to either JPG or PNG. I'm just going to use JPG for this one. Click on JPG images, then click on Export to JPG.

Once again, that's going to go through all of our slides in our Figma Slides file. It's going to zip those up, and we can click on the Download Your Zip File button. I'm just going to save that to my desktop. I'm going to unzip that file just by double clicking on it. If I open that up, you'll see again we've got all of our slides exported in order using the JPG export.

If I open that up again, very sharp. It's a 2x retina export. That's going to look really good when you present it full screen or just send the images over for review or any other use case. It's going to look really good and you're not going to get any pixelation or anything like that.

I just wanted to run through that today to show you how to quickly export your slides from Figma design files and also Figma Slides files. If you want to really quickly export them out to static JPGs or static PNGs, this is a quick way of going about it. It's going to zip those up for you. It's perfect for sending via an email or sending via a Slack message or something like that if you want to get the raw slides out for someone to use or review in JPG or PNG format.

I'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to sync text (and rename Figma layers) using advanced merge tags in spreadsheet cells using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-12-01T00:00:00.000Z
dateModified: 2025-12-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-sync-figma-layers-with-advanced-merge-tags-in-spreadsheet-cells-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-sync-figma-layers-with-advanced-merge-tags-in-spreadsheet-cells-using-copy-doc.md
---

# How to sync text (and rename Figma layers) using advanced merge tags in spreadsheet cells using CopyDoc

#### Video Transcript

Today I’m going to be showing you a Figma tutorial on how to create advanced merge tags in our spreadsheet content, which is going to allow us to reference dynamic content between different rows in our spreadsheet. And then we’re going to be able to import that content into our Figma designs automatically and also do things like rename layers and update text and things like that. Bear with me if you’re a little bit confused about what that means. I’ll show you how to do this in just a moment.

The first thing we’re going to do is go into our Figma file and go down to our actions item down here. Click on that actions button, and then if you search for the word “CopyDoc” and click on the CopyDoc item under the Figma plugins tab, you can run the Figma plugin by either clicking on the save icon down here or clicking on the run button down here. But because I’ve already clicked on the save icon, I’m just going to go back to my Figma canvas, right-click anywhere, go down to Plugins, then go all the way down to Saved Plugins, and click on the CopyDoc item. That’s going to run the Figma plugin we saved a second ago.

The plugin has a bunch of different features that I’m not going to be covering in today’s Figma tutorial. Today we’re just going to be focusing on this Sync Content From Spreadsheet feature down the bottom here. This is going to allow us to take a spreadsheet, either from an Excel file or a Google Sheet, and take all of this content and automatically repeat it into our Figma file without having to manually update all of our text layers or manually rename the layers.

To get started, we’re first going to set up our Figma file to match our spreadsheet. I’m going to run through this in detail, just so you can see exactly what we’re going to be doing.

The first thing we want to do is name our frame based on what this content is here. What I want to do is, instead of having this frame called “login page,” I want to change this to automatically get renamed by our spreadsheet data. I’m going to make sure the name of my heading column up here matches the name I want to rename in Figma. In this case, I’m going to rename this login page frame, and I’m going to call it #Frame. I’ve got a little hash symbol there and “frame,” matching up with the header over here.

Then what I want to do is also rename or update some of this text content as well. For example, I can jump in here, and if I rename this text layer to match this heading over here, which is #firstName, if I rename that layer, this is automatically going to swap out that content when we sync it up in a moment.

Finally, we can also do something new, which I’ll be covering in this Figma tutorial. We can use this item over here. In this case, I’ve called this column “#Headline” and I’m going to copy that layer name and go down to this text layer over here and rename that one “#Headline.” We’ve got this one called “#Headline”.

And then we’ve also got a text layer down here, which I’m going to show you one last use case for. You’ll notice I’m covering a few use cases that we’re going to run through in more detail in a moment. In this one, I’m going to do a special little tag here, and I’m going to call this one #{firstName}. You’ll notice I’ve used the syntax that we’ve also used in our spreadsheet over here.

To explain what that does, it’s basically a placeholder or merge tag. When we use this special syntax of a hash, then a curly bracket, then the name, then another closing curly bracket, that’s going to always reference a column name. You can see we’ve got “Frame,” “#firstName,” “#lastName,” and #Headline.”

I’ll show you what this looks like now, but it’s going to automatically swap out the first name and last name with the values from the same row. If I go to my Figma file and click on the Sync Content button down here, I’m going to click on that now.

Now that we’ve set up our file the way that we want, I’m going to save that. I’ll just remove this for now so we can run through that in a moment. Once you’ve saved your Excel file, or if you’ve got a Google Sheet you can paste that in as well, I’m going to drag and drop my Excel file from my desktop over into this little drop zone area down here. You can see that’s loading a little preview. It’s showing us exactly what the content of our Excel file is in the Figma plugin.

What we can do is a quick example first with just one layer. I’m going to click on this frame layer. You’ll notice that all the layers have been updated in the various layers to what we want. If you pay attention to what’s going to change over here once I click on the Sync Rows With Layers button, you’ll notice that the content is updated.

A few things have happened here. I’ll walk through what actually happened when we clicked that button.

You’ll notice that the frame, which we previously had named #Frame, has been replaced with the first row of content. Because we used these special variable merge tags, it’s automatically grabbing the first name and last name values from the same row and inserting those dynamically into those little merge tag placeholders. In this case, you can see that the frame has been updated with “Frame - Adam Alias.” Instead of “Frame - #{firstName} ${lastName}” with the brackets, those brackets are being swapped out with the real content from the same layer.

Likewise with the headline. You’ll remember that we named this layer over here #Headline, which has still got the name there. You can see it has swapped out the content dynamically. Again, it’s used those variables from the same row and swapped those into the content here. That’s automatically getting swapped out too.

You’ll also remember that we used a special bit of placeholder content here as well, exactly like we did in our spreadsheet. Along with using these in your spreadsheet, you can also use them in your Figma content, so that when you update the content, so you’ll remember that we had it set to this: #{firstName}. What that’s done is it has checked for any layers in your frame with that little variable and then swapped out that content with the content here.

If I undo my manual update there, you’ll see that when I undo that, it has automatically gone ahead and swapped in that value again, taken from the first name there.

The other cool thing that we can do, if we just undo those changes to go back to what we had a second ago, you’ll notice I’ve reverted it back to the placeholder content, if we wanted to automatically take this frame and loop it based on the number of rows in the spreadsheet, we can optionally do that as well.

If you click on the Auto Repeat toggle here, you’ll notice the button has changed to say “Sync and Repeat Selected Layer.” I’m going to click on that button now that we’ve enabled the toggle. If I click on that, you’ll notice that it has gone ahead and looped that original frame. It has kept the original frame over here and created a new frame with a bunch of different copies of the frame. You’ll notice that all of the rows have been repeated and their content swapped out dynamically.

In this case, we’ve just got four rows, so it has duplicated that frame four different times and swapped out the content for each of those rows automatically. That’s pretty cool.

The other thing we can do, to show you a more advanced use case, is delete this layer here and go back to my spreadsheet. The other thing we can do is enhance this even further by specifying exactly what number row we want the content to be pulled in from dynamically.

As a quick example, in this case, if I want the Elbert row, so I’ve got the first name of Elbert, and if I don’t want it to automatically use the last name from the same row, I can add a special syntax, which is the dot symbol and then the row number of the spreadsheet. In this case, it’s going to reference row number two, which is going to use the last name “Alias.”

If I add that to my field over here as well, I’m going to do .2, and then I’ll do the same thing for my first name. Let’s say I want to swap out Adam for Michael. I can add .3 to my first name up here and do the same here. If I save that, we should now see what that looks like when we re-import the spreadsheet.

I’m going to drag and drop the Excel file that we just updated back into the Figma plugin. You can see here in our preview we’ve got the first name with the .3 and the last name with .2 for rows one and three. I’m going to click on that frame again, and with Auto Repeat still selected, I’m going to click on the Sync and Repeat Selected Layer button.

You’ll notice when I check out the updates, if we zoom in here, we can see that the changes have worked as expected. Just to run through what we did: we changed the first name placeholder merge tag in the first row here, which was previously set to Adam. We wanted to override that dynamic content to instead point to row three, which is Michael. As you can see, it has gone ahead and done that correctly. It has swapped out Adam for Michael. It’s done that in the layer name as well because we used that for the layer naming syntax. You can see it’s called “Michael Alias.” It has swapped out the first name and left the last name as the current row.

Similarly with this frame down here, we specified that the last name should change. Instead of “Woo,” it should be changed to “Alias” because we used row two. Row two has a last name of Alias. It has swapped out that content as expected. It has done the same thing for the frame name as well.

This is a really handy way of specifying overrides. If you want to pull in content from a certain other layer, you can do that by adding this little dot syntax, and it will work as expected.

That’s basically the rough formula. I wanted to show you how you can leverage these interpolated or mix-ins to your layers or your rows and your Figma layers to make these a little bit more dynamic. If you need to reuse data from some of your columns, you can now mix and match those into your content and have that dynamically update from the column data in the same row or, as we looked at, in the rows you’re overriding.

I hope that’s useful if you’re looking for more advanced usage of the CopyDoc sync feature when you’re syncing content from a spreadsheet into your Figma layers. Hopefully this adds another layer of flexibility with importing dynamic content in a repeatable way. This is going to make it a lot easier to structure dynamic content in your spreadsheets, and I think you’ll be able to put together a few really interesting concepts using this kind of mix-in or merge tag placeholder structure.

That’s basically it. I’ll leave it there for today. Please feel free to try this out in your own workflows, and hopefully it helps you out. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: HyperCrop vs Photoshop Actions
description: Comparing HyperCrop with Photoshop actions for teams that need reliable, multi-ratio image exports.
datePublished: 2025-11-22T00:00:00.000Z
dateModified: 2025-11-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-hypercrop-vs-photoshop-actions/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-hypercrop-vs-photoshop-actions.md
---

# HyperCrop vs Photoshop Actions

I spent the better part of a decade maintaining a graveyard of Photoshop actions that promised to automate cropping. They worked until they didn't—layer orders changed, specs shifted, or I simply forgot which hotkey triggered the right sequence. HyperCrop is the modern answer because it keeps the process tied to the actual Figma frames we are already reviewing.

### Reliability beats nostalgia
Photoshop actions are powerful, but they are brittle. If the canvas dimensions change, an action might slice content in the wrong place or fail entirely. HyperCrop reads the live frame, detects subjects automatically, and recalculates every crop on the fly. That is the reliability I need during a crunch.

### Context remains intact
With HyperCrop, there is no exporting a flattened PNG just to crop it elsewhere. The plugin keeps every export connected to the same component used in design reviews, so when feedback arrives, I update the design, rerun the preset, and ship new files. Photoshop requires branching off from that main file, which increases drift.

### When Photoshop still has a place
I am not uninstalling Photoshop—it is still unmatched for heavy retouching, masking, and compositing. But once those assets exist in Figma, HyperCrop wins the repurposing battle. It understands the intent of your layout, speaks in presets instead of action scripts, and never fails because you renamed a layer incorrectly.

So if you are debating HyperCrop vs Photoshop actions, ask yourself whether you want to maintain scripts or simply click “export” with confidence. I made my choice.

### Collaboration advantage
HyperCrop keeps the workflow visible to the whole team. Stakeholders can preview crops, request tweaks, and run exports themselves. Photoshop actions usually live on one person’s machine, which turns them into a bottleneck whenever they’re out of office.

### Maintenance reality
Specs evolve constantly. Updating a Photoshop action involves digging through GUI steps. Updating a HyperCrop preset takes seconds, and the change propagates to everyone instantly. That saves hours each quarter and keeps your process future-proof.

---

---
type: article
title: Figma AVIF Export
description: Export AVIF images directly from Figma using TinyImage for lightweight, high-quality assets.
datePublished: 2025-11-17T00:00:00.000Z
dateModified: 2025-11-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-figma-avif-export/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-figma-avif-export.md
---

# Figma AVIF Export

AVIF is becoming the default for high-performance sites, but exporting it usually means extra tooling. TinyImage adds AVIF support directly inside Figma. I can select any frame or component, choose AVIF, and get tiny files without sacrificing fidelity.

### Why AVIF matters
Compared to PNG or JPG, AVIF delivers smaller files and better color depth. That means faster load times, especially on image-heavy marketing sites or dashboards.

### TinyImage makes it painless
Pick AVIF in the export options, set quality or target file size, and preview the output. If you need fallbacks, export WebP/PNG versions at the same time.

### How I integrate it
1. Identify hero assets or UI screenshots that would benefit from AVIF.
2. Export them via TinyImage with a preset tuned to our performance budget.
3. Provide both AVIF and fallback formats to engineering for safe rollout.

It keeps us ahead of the curve without introducing another manual step.

### Implementation tip
Include a short README with each AVIF export explaining browser support and fallback order. When engineering knows how you expect the assets to load, they implement faster and avoid surprises in older browsers.

---

---
type: tutorial
title: How to export HTML emails from Figma to Intercom using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-11-16T00:00:00.000Z
dateModified: 2025-11-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-intercom-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-intercom-using-emailify.md
---

# How to export HTML emails from Figma to Intercom using Emailify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Intercom platform using the Emailify Figma plugin.

All we need to do is go to our Figma file, go down to the bottom toolbar here, and click on the Actions item. And if you click on that button, you can then search for Emailify. Under the Figma Plugins tab, you can run the Figma plugin by clicking on the Emailify item and then going down to this Run button down here. Or you can click on the Save button here, which will save it to your Figma plugins list. I've already clicked on that Save icon. I'm just going to go back to my Figma canvas, right-click anywhere, go down to Plugins, then go down to Saved Plugins, and click on the Emailify item. That's going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you to create HTML email designs in Figma, which will then automatically be exported to production-ready HTML from the Figma plugin. I've basically just grabbed one of the templates from the Templates tab over here just to show you a quick example. If you're new to the Figma plugin, you can basically spin up a brand new template and customize that using Figma. You can go through and pick from a bunch of different components which can all be totally customized based on your own brand.

But again, today I'm focusing on uploading an existing template to the Intercom platform, and I'm going to assume that you've already designed the template in your own time. If you are curious about how to dive into all of the design features, feel free to check out some of the other YouTube tutorials and the documentation for Emailify. But again, today I'm assuming you've got your email template ready to go and we're going to upload that into Intercom. Once you've got your template, you can preview it by clicking on the Preview button in the Figma plugin. That's going to show you what the real HTML is going to look like when we upload it to Intercom in a moment. You can see I've got this HTML email here. 

There are two things in the documentation from Intercom that we need to include. If you scroll down to this area here, you'll see that we need these two different tags. One is the unsubscribe URL. That's basically an unsubscribe link. The easiest way to add that is to go to the Figma Plugins Footer tab. If you click on Footer over here and then scroll down to the letter I, you'll find an Intercom footer option that you can click on. That's going to automatically include a navigation link that's pre-populated with the required unsubscribe URL for Intercom. That's the easiest way to include that into your template. Of course, you can customize the design and the content of the footer as well. That's totally up to you.

For today, I'm leaving that as is just to show you what that looks like there. I'm going to close that off. And we're now also including the second tag. The second tag that's required is this content tag. Content will basically swap out whatever text you've got in your email with this content tag. For example, if we add this placeholder here, whatever content you later add in your Intercom templates or your Intercom messages will automatically get injected into this placeholder. They do mention that even if you don't intend to customize the content of the email, you still need to include this tag.

What the Figma plugin does, if you decide you don't want to include a dynamic content section of text in your template, like this for example, is remove that. The Figma plugin will automatically inject that content tag as a hidden tag that won't show up anywhere, but it'll still be included to make it a valid upload. Today I'm leaving that empty. I'm going to remove that layer, and we're going to get that content tag automatically included when we upload the email. Let's do that now.

I'm going to click on the Export HTML button in the Figma plugin, and we're going to change the export option from HTML. We're going to go down to Platform Integrations, go down to the letter I, and find Intercom. I've just selected the Intercom option. You can put in your subject line and pre-header text here. For example, we might include this subject line to match the heading. The pre-header text can be whatever you like. I'm adding this little bit of content there. Then we want to click on the Export for Intercom button. I'm clicking on that now.

That's going to generate the HTML and upload any images. Once that's done, click on the Download Your Zip File button. I'm clicking on Save and putting that on my desktop. Once you've done that, you want to double-click on that zip file, open up the folder, and you'll see that there's a folder that matches your email name. We've got Emailify Template as our frame name in Figma. That's the folder we want to open. You'll see this index.html file. That's the one we want to use. I'm just going to drag and drop that into the browser. That's going to load up our HTML. You can see we've got our unsubscribe link here, all of the HTML content ready to go. 

Now that we've got that exported, I've opened up my Intercom dashboard. This is the first page I'm seeing after I log in to my Intercom account. Yours should look pretty similar. What you want to do is go down to the Settings tab down here on the left. Once that opens up, navigate to the Channels section and click on the Email option. I'm clicking on this Email button here.

Once that opens up, you want to click on the Email Settings tab at the top here. We're going to scroll down a fair bit until we come across this Signatures and Templates section. We want to go down to the Email Templates for Outbound Email section. Under that section, there's a button called Create or Manage Templates. I'm clicking on that now.

You want to click on the New Template button in the top right. It's going to give you the option to click on Create from HTML. I'm clicking on Create from HTML. This gives us an HTML editor window. It's got a placeholder HTML email in here that we're going to remove. I'm getting rid of all that content and deleting it.

It's asking us to enter our template HTML. What we need to do is go back to the index.html file we just exported from Figma, which we just opened up in the browser. The easiest way to get that code is to right-click anywhere, go down to View Page Source, and click on that. Then select all. I'm on a Mac, so I'm doing Command-A, and then I'm copying that to my clipboard. If you're on Windows, it would be Control-A and Control-C to copy it to your clipboard.

I'm grabbing all of that content. I'm going back to my Intercom account and pasting it into the Template HTML field. I'm pasting that in. You can see here we've got our HTML loading up nicely. That's looking really good. As I mentioned before, at the very bottom of the email, we've got that content snippet there. That's being included in a hidden element. We can't see that anywhere in the email, but it is being included just before the end of the email as a hidden element.

If we didn't have that content tag in there that the Figma plugin automatically added, it would give us an error. And again, you can add that content tag to your email beforehand and then it won't get added again. For example, you could basically add that here, and then later when you send out the email template from Intercom, any dynamic content or any dynamic message you add to your email will automatically get replaced into that little variable. I just wanted to flag that in case you're wondering what was going on there.

That's basically it. We've now got this added as an email template. We can customize the name of this. We can add the name of the email here. I'm popping that in. You can name that whatever you want. I'm calling that "Thanks for Trying Sketch" as my email template. Then I'm clicking on Save. That's gone ahead and saved it.

We've got our new template saved into Intercom. If we want to actually use that, we can use that as an available template, which is now saved in our emails. If we go back down to Manage Templates here, you can see that we've got this new template saved. If we click on that, you can see what that looks like there.

That's now in the Intercom platform. You can use this custom HTML email for custom outbound emails which can be sent from the Email Settings or the Email area for Intercom outbound messages. That's going to let you brand those as custom HTML emails from your Figma designs. I hope that's helpful if you've been wondering how to create or export HTML emails from Figma to use in the Intercom platform if you're using that for any outbound emails. This is a really easy way to go about it without having to manually code those up.

The final thing I'll mention is that you can also add dynamic variable content as well. For example, you can see there are some different elements here that are available to us. For example, you could add somebody's name dynamically if you're using that kind of content in your emails. We could add a fallback here, and that's going to automatically add this in. It would basically say "Thanks for trying Sketch" and then the person's first name. That would automatically swap out this placeholder with the person's name from Intercom based on who you're sending it out to. If that name doesn't exist, you can add a fallback value. Not that you'd probably include this one, but that's an example of what you can do with customization.

Feel free to grab any of these variables and add them as text in your Figma text layer and that will automatically get included in your HTML templates as well. A quick note with this: the Figma plugin automatically includes these data pre-mailer ignore tags and things like that. You don't need to worry about doing that either. The Figma plugin tries to take care of as much as possible in terms of making it Intercom-ready. The only one you really have to worry about is including your unsubscribe link as we just went through. As long as that's included, you're going to be good to go.

Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: NDA File Sharing
description: Share NDA-sensitive design files safely by wrapping them in Crypto’s encrypted delivery workflow.
datePublished: 2025-11-15T00:00:00.000Z
dateModified: 2025-11-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-nda-file-sharing/
markdownUrl: https://www.hypermatic.com/articles/crypto-nda-file-sharing.md
---

# NDA File Sharing

NDAs are only as strong as the tools you use to share files. Crypto ensures every deliverable—prototypes, PDFs, videos—stays encrypted, gated, and revocable. It gives legal teams confidence that confidential work won’t leak.

### Make compliance automatic
Add passwords, expiration dates, and view limits per recipient. Watermark previews with the viewer’s email so any leak can be traced instantly. Crypto records who accessed the files and when, which closes the loop for legal teams.

### Handoff routine under NDA
1. Publish the assets via Crypto.
2. Set per-client security profiles (password strength, expiry, watermarking).
3. Send the link, capture their feedback, and revoke access once the NDA deliverable is complete.

It’s the difference between hoping a PDF password is enough and actually securing your work.

### Keep records tidy
Export Crypto’s access logs at the end of each engagement and store them with the NDA paperwork. That way, if questions arise later, you have airtight evidence of who saw what. Legal teams love how simple that makes compliance tasks.

### Pro tips
- Create saved settings in Crypto for recurring clients so you can publish secure links in seconds.
- Pair Crypto links with e-signature confirmations so recipients acknowledge the NDA before viewing assets.
- Use multi-factor verification for particularly sensitive projects like unreleased hardware.

NDA file sharing should feel routine, not terrifying. Crypto makes it routine.

---

---
type: article
title: How marketing teams turn Figma into a production tool
description: How marketing teams use Figma for more than mockups by turning it into a practical production workflow.
datePublished: 2025-11-15T00:00:00.000Z
dateModified: 2025-11-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/how-marketing-teams-turn-figma-into-a-production-tool/
markdownUrl: https://www.hypermatic.com/articles/how-marketing-teams-turn-figma-into-a-production-tool.md
---

# How marketing teams turn Figma into a production tool

How marketing teams use Figma for more than mockups by turning it into a practical production workflow. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Emailify

[Emailify](/emailify/) is one of the more useful tools in this workflow. Emailify matters in this workflow because email work often gets rebuilt after design. Keeping layout, content, and export closer together removes a lot of duplicate effort from campaign production.

### Bannerify

[Bannerify](/bannerify/) is one of the more useful tools in this workflow. Bannerify is useful here because it keeps banner production inside Figma instead of pushing the team into a separate build step. For teams creating multiple ad sizes, motion variants, or late campaign revisions, that usually means less repetition and a cleaner review cycle.

### Pitchdeck

[Pitchdeck](/pitchdeck/) is one of the more useful tools in this workflow. Pitchdeck is helpful in this workflow because presentation work usually lives between design quality and practical delivery. Designing once in Figma and exporting to familiar deck formats is often the fastest middle ground.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Figma Preset Image Sizes
description: Stay on top of every required asset size in Figma by storing reusable presets inside HyperCrop.
datePublished: 2025-11-09T00:00:00.000Z
dateModified: 2025-11-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-figma-preset-image-sizes/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-figma-preset-image-sizes.md
---

# Figma Preset Image Sizes

Remembering which size belongs to which channel is almost as draining as creating the assets themselves. HyperCrop solves this with shareable presets that live right next to your design work. Instead of digging through internal docs, the specs live in the plugin, and anyone on the team can run them the moment a request appears.

### Turning specs into presets
Whenever I’m handed a list of dimensions, I build a HyperCrop preset on the spot. Each entry includes the target ratio, format, suffix, and whether smart detection should stay on. The preset becomes a living standard—if a marketplace updates its hero image rules, we tweak the preset once, and every subsequent export stays compliant.

### Onboarding becomes painless
New teammates only need two sentences of instruction: open HyperCrop, choose the preset that matches the project, and export. They do not have to memorize which channel needs 1200×628 versus 4:5. The preset enforces those nitty-gritty details so everyone ships the same level of quality from day one.

### Suggested preset rhythm
1. Start with your most used campaign spec sheet and translate it into a preset.
2. Save variations for evergreen flows (email, product releases, lifecycle) so they’re always ready.
3. Revisit presets monthly or after a big launch to capture any new sizes you introduced along the way.

Figma is powerful on its own, but once HyperCrop starts handling preset image sizes, the export process finally feels modern.

### Share across teams
Publish your HyperCrop presets to a central documentation page so marketing, product, and creative agencies all work from the same source. When everyone exports with the same recipes, asset reviews go faster and brand drift disappears.

### Automation idea
Combine preset exports with automation flows that rename files, upload them to cloud storage, and notify stakeholders. The preset becomes the trigger for an entire mini pipeline.

---

---
type: article
title: PowerPoint Alternative
description: Why Pitchdeck is my PowerPoint alternative when I want decks to stay in Figma without losing exports.
datePublished: 2025-11-07T00:00:00.000Z
dateModified: 2025-11-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-powerpoint-alternative/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-powerpoint-alternative.md
---

# PowerPoint Alternative

PowerPoint still dominates boardrooms, but building decks there means duplicating design work and losing visibility. Pitchdeck keeps everything in Figma while still exporting .pptx files for stakeholders who insist on them. When I compare it to PowerPoint, these are the criteria that matter.

### Criteria that matter
- Does it respect your Figma components and typography?
- Can you export to PowerPoint, Keynote, Google Slides, and PDF?
- Is there a hosted presentation option with analytics and link tracking?
- Can multiple teams (sales, product, exec) share templates without version chaos?

Pitchdeck nails all four, which is why I keep it installed.

### When PowerPoint still helps
If an exec needs to tweak slides minutes before presenting without touching Figma, exporting from Pitchdeck to PowerPoint still works. But for building, iterating, and sharing analytics-rich decks, I stay in Pitchdeck and only hand off PowerPoint files when absolutely necessary.

### Evaluation idea
Run a full campaign brief through every alternative. If the tool can’t export editable Keynote, PowerPoint, and browser-friendly decks in one go, or if it lacks analytics, it’s not really replacing Pitchdeck—just creating more work.

---

---
type: article
title: HTML Email Builder
description: Emailify is the HTML email builder that lets me stay inside Figma from concept to code.
datePublished: 2025-11-06T00:00:00.000Z
dateModified: 2025-11-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-html-email-builder/
markdownUrl: https://www.hypermatic.com/articles/emailify-html-email-builder.md
---

# HTML Email Builder

HTML email builders come in two flavors: drag-and-drop web apps or code editors. Emailify proves there’s a third path—build everything inside Figma and export code that’s ready for the inbox. It combines your design system with a bulletproof rendering engine.

### Why it works
Designers retain creative control, because they’re working on the same canvas as every other project. Emailify simply injects the table structures, inlined CSS, and responsive logic when it’s time to export. The result is code that passes QA without the traditional back-and-forth.

### Connected workflow
Need to send test emails to stakeholders? Emailify can deploy previews via Netlify, send to PutsMail, or hand off HTML to whatever QA stack you use. No extra copy/paste steps.

### Builder recipe
1. Assemble modules in Figma.
2. Run Emailify to configure settings (ESP, dark mode, link tracking, etc.).
3. Export or send tests straight from the plugin.

It’s the builder I wish existed a decade ago—and now it does.

### Scale operations
Once your team adopts Emailify, you can templatize the entire build process. Designers own the creative, marketing owns content, and Emailify stitches everything together. No more waiting for developer bandwidth or outsourcing to agencies for simple HTML updates.

### QA tip
Create a checklist page in the same Figma file covering things like alt text, fallback colors, and plain-text versions. Run through it before exporting and you’ll rarely encounter surprises downstream.

---

---
type: article
title: Secure Stakeholder Review
description: Manage stakeholder reviews securely by routing every deliverable through Crypto’s encrypted links.
datePublished: 2025-11-05T00:00:00.000Z
dateModified: 2025-11-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-secure-stakeholder-review/
markdownUrl: https://www.hypermatic.com/articles/crypto-secure-stakeholder-review.md
---

# Secure Stakeholder Review

Stakeholders need easy access; security teams need guarantees. Crypto satisfies both by letting you run reviews inside a protected environment. Share prototypes, decks, or exports with passwords and expirations, and keep the audit log handy for compliance.

### Calm stakeholder experience
Reviewers receive a polished web view with your prototype or file. They can leave notes, download allowed assets, and feel confident they’re seeing the latest version—all without touching your Figma account.

### Admin control behind the scenes
You decide who gets access, how long it lasts, and what they can do with the file. Crypto keeps records of every session, so you can prove exactly what happened if questions arise.

### Review cadence
1. Publish the material through Crypto before inviting stakeholders.
2. Configure the security profile for that group (marketing, execs, legal, etc.).
3. Share the link, collect feedback, and retire it once decisions are made.

It’s the modern way to run secure stakeholder reviews without slowing momentum.

### Tie into governance
Log Crypto access details in your project tracker so leadership can audit who reviewed what without digging through inboxes. When the project ships, attach the final log to your release notes for full transparency.

### Tips for adoption
- Provide stakeholders with a quick guide on what to expect when opening a Crypto link.
- Use custom branding so the review portal feels on-brand and trustworthy.
- Archive links after each milestone to keep the dashboard neat and avoid accidental reuse.

Secure stakeholder reviews build trust across the organization because everyone sees that security and collaboration can coexist.

---

---
type: article
title: Animated Banner Templates
description: Use Bannerify to build animated banner templates directly in Figma and keep every export aligned to ad network specs.
datePublished: 2025-11-03T00:00:00.000Z
dateModified: 2025-11-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-animated-banner-templates/
markdownUrl: https://www.hypermatic.com/articles/bannerify-animated-banner-templates.md
---

# Animated Banner Templates

Pre-built templates are handy until you need to deviate from them. Bannerify lets me build my own animated banner templates inside Figma, reuse them across campaigns, and export final HTML5, GIF, MP4, or WebM files without hiring a developer. Because everything lives on the canvas, the templates follow the same design system as the rest of our product work.

### Start with a reusable structure
I usually design a "base" frame that contains the hero lockup, CTA, logo, and any interchangeable content modules. Once that frame looks right, Bannerify turns it into a template I can clone for any dimension. Animations, easing, delays, and layers all stay intact, so it's easy to roll out a dozen banners that feel consistent instead of copy-pasted.

### Animation controls that stay flexible
Bannerify exposes a full animation timeline inside Figma. I can define entrance/exit sequences, loop timing, or even pause for legal copy. If a client wants faster pacing, I adjust the values and instantly preview the result. No separate After Effects file, no developer tweaking CSS by hand.

### Shipping templates across sizes
1. Build your master design using components so text and imagery stay in sync.
2. Run Bannerify and duplicate the template into the sizes you need (300x250, 160x600, 970x250, etc.).
3. Export the lot as production-ready packages matched to Google Ads, AdForm, DV360, or vanilla HTML.

Templates become a multiplier when they live in Figma. Bannerify turns that idea into a workflow anyone on the team can run.

### Why I build templates this way
Agency life taught me that "one off" requests never stay that way. A single promotion quickly becomes a quarterly campaign with localization, performance tests, and refreshed offers. Building templates in Bannerify keeps every variation rooted in the same foundation. Designers do not waste time re-animating a CTA, and developers are spared from re-exporting code each sprint. When metrics start rolling in, you can duplicate the top performer, tweak the copy, and deploy a fresh batch without slowing the release calendar.

### Collaboration stays transparent
Because the template exists in the same file as the rest of the brand system, reviewers can comment on specific layers, compare alternate concepts, and sign off before anything ships. The hosted previews generated by Bannerify double as QA references—media buyers, legal teams, and regional partners can scrub through the actual animation instead of guessing from a static PDF. When approvals hit, the exported packages already contain clickTags, polite loading scripts, and file-size reports, so nothing gets bounced by the ad network.

### Tips for keeping templates future-proof
- Document naming conventions for layers, variants, and exported files. Future teammates will thank you.
- Store go-to easing curves and timing values in a reference page so every template feels like part of the same family.
- Pair Bannerify with automation tools (Zapier, Netlify, Slack) to send preview links or uploads to the right owners automatically.

Animated banner templates earn their keep when they save time on the fifth revision just as much as the first. Bannerify’s editor makes that kind of longevity possible without asking designers to juggle extra software.

---

---
type: article
title: Design Review Software
description: Run design reviews with Commentful so every decision, approval, and revision stays organized.
datePublished: 2025-11-02T00:00:00.000Z
dateModified: 2025-11-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-design-review-software/
markdownUrl: https://www.hypermatic.com/articles/commentful-design-review-software.md
---

# Design Review Software

Calling Commentful "design review software" is accurate, but it also undersells how personal the workflow feels. It sits inside Figma and gives you the structure of a review tool without forcing the team to learn another platform.

### Curated review sessions
Publish only the frames you want feedback on, add context notes, and lock everything else. Reviewers see a focused journey rather than an overwhelming Figma file. You can even split work into sections (e.g., onboarding, pricing, lifecycle emails) to keep discussions tidy.

### Documented approvals
When a stakeholder approves a screen, it gets logged with timestamped context. Need to prove that legal signed off last week? The record is right there. If priorities shift later, you know exactly what changed and why.

### How I structure reviews
1. Prep the frames with any annotations or questions directly in Figma.
2. Publish to Commentful, set up permissions, and send the review invite.
3. Facilitate the session (live or async), capture feedback in the board, and resolve items as they get addressed.

Teams that treat reviews as a product deliverable tend to launch faster. Commentful gives you the tooling to do just that.

### Insights for retros
After a review cycle ends, export the board summary and look at trends: Which topics generated the most comments? Which stakeholders required the most follow-up? Use that information to adjust future sprints. Maybe you start looping in support earlier or invite marketing only once the core flow is locked.

### Tips for larger organizations
- Create separate boards per initiative within the same project so execs can drop in without wading through unrelated work.
- Use custom branding on portals to reassure clients that they’re in the right place.
- Link Commentful approvals back to your change-management system so compliance teams see the connection instantly.

Design review software should amplify your existing process, not replace it. Commentful is built with that philosophy from the ground up.

---

---
type: article
title: Export Animated GIFs from Figma with TinyImage
description: Create optimized GIFs from Figma with TinyImage’s animation exporter.
datePublished: 2025-10-30T00:00:00.000Z
dateModified: 2025-10-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-figma-gif-export/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-figma-gif-export.md
---

# Export Animated GIFs from Figma with TinyImage

Need an animated GIF for social or lifecycle emails? TinyImage handles it right from Figma. Select the frames, choose GIF export, and the plugin renders a loop with customizable dimensions, frame rates, and compression settings.

### Preview before sending
TinyImage shows you the GIF file size and visuals before you download it. Adjust quality sliders until you hit your target—no more guessing.

### Output multiple formats
While exporting GIFs, you can also grab MP4 or WebM versions for higher quality web embeds. TinyImage renders them in one pass, so you get every format stakeholders ask for.

### GIF export workflow
1. Animate your frames (either with a smart animate prototype or Frame-by-frame design).
2. Run TinyImage’s animation export and configure GIF options.
3. Download the assets and drop them wherever they’re needed.

The plugin makes GIF production as lightweight as exporting a PNG.

---

---
type: article
title: Figma workflow checklist for creative ops teams
description: A practical workflow checklist for creative ops teams managing repeated design production work.
datePublished: 2025-10-28T00:00:00.000Z
dateModified: 2025-10-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/figma-workflow-checklist-for-creative-ops-teams/
markdownUrl: https://www.hypermatic.com/articles/figma-workflow-checklist-for-creative-ops-teams.md
---

# Figma workflow checklist for creative ops teams

A practical workflow checklist for creative ops teams managing repeated design production work. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Commentful

[Commentful](/commentful/) is one of the more useful tools in this workflow. Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

### CopyDoc

[CopyDoc](/copydoc/) is one of the more useful tools in this workflow. CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

### Bannerify

[Bannerify](/bannerify/) is one of the more useful tools in this workflow. Bannerify is useful here because it keeps banner production inside Figma instead of pushing the team into a separate build step. For teams creating multiple ad sizes, motion variants, or late campaign revisions, that usually means less repetition and a cleaner review cycle.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Pitch Deck Templates
description: Maintain pitch deck templates in Figma and export them anywhere with Pitchdeck.
datePublished: 2025-10-28T00:00:00.000Z
dateModified: 2025-10-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-pitch-deck-templates/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-pitch-deck-templates.md
---

# Pitch Deck Templates

Pitch templates are only useful if people actually use them. Pitchdeck keeps templates alive by living where your team already works: Figma. Build a library of cover slides, traction charts, product tours, and financial overviews; Pitchdeck handles the exports, analytics, and live presentation modes.

### Template maintenance
When your metrics or messaging change, update the master components in Figma. Pitchdeck ensures every new export inherits the update, so nobody accidentally pitches an old roadmap.

### Distribution
Need PDF handouts, Keynote files, or interactive web links? Pitchdeck exports all three. You can even create role-specific variants (investor, sales, recruiting) from the same source file.

### How I roll it out
1. Create a “Pitchdeck Templates” page with locked components.
2. Duplicate the file for each new pitch and customize the content.
3. Export via Pitchdeck and track engagement to inform future revisions.

It’s a template system that actually matures with the business.

### Template governance
Assign an owner to each template who reviews metrics and keeps slides updated with the latest brand or product information. Pitchdeck makes publishing new versions simple, so there’s no excuse for outdated decks floating around.

### Sharing best practices
Pair each template with a cheat sheet covering talking points, optional modules, and recommended data sources. Store everything in the same Figma page so new team members ramp quickly.

---

---
type: article
title: Figma Slide Analytics
description: Pitchdeck adds slide analytics to your Figma presentations so you know what resonates.
datePublished: 2025-10-27T00:00:00.000Z
dateModified: 2025-10-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-figma-slide-analytics/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-figma-slide-analytics.md
---

# Figma Slide Analytics

Sending a deck and never knowing if someone read it is frustrating. Pitchdeck solves that with analytics tied to each slide. When you share a presentation link, Pitchdeck records who opened it, how long they spent on each section, and whether they clicked embedded links.

### Insights for product and sales teams
Marketing can learn which messaging points resonate. Product teams can see which feature slides gather interest. Sales gets notified when a prospect revisits the deck, helping them follow up at the right moment.

### Privacy-focused
Viewers can’t see the analytics; only the deck owner can. You can also disable tracking for internal decks if needed.

### How I use it
1. Export or share a hosted Pitchdeck link for stakeholders.
2. Monitor the analytics dashboard to see engagement.
3. Iterate on slides that underperform and double down on what works.

Data-backed presentations make iteration faster and more intentional.

### Share insights with the team
Export Pitchdeck’s analytics report and drop it into your weekly updates. Designers see which visuals resonate, copywriters learn which headlines hit, and leadership gets confidence that the deck is doing its job.

---

---
type: article
title: Photoshop Cropping Alternative
description: Why I use HyperCrop as my Photoshop cropping alternative when campaigns demand dozens of ratios.
datePublished: 2025-10-23T00:00:00.000Z
dateModified: 2025-10-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-photoshop-alternative/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-photoshop-alternative.md
---

# Photoshop Cropping Alternative

Photoshop actions used to be my go-to for batch crops, but they’re brittle and live outside the Figma workflow. HyperCrop keeps cropping inside the design file, so I treat it as my Photoshop alternative whenever marketing asks for thirty sizes overnight.

### Criteria worth caring about
If you are vetting alternatives, look for a plugin that can read live components, respect nested masks, and save presets that actually match your channels. Bonus points if it supports WebP, JPG, PNG, and keeps naming consistent across exports. Many resizers technically work, but they fracture the single source of truth because assets leave Figma midway through the process.

### Why I keep HyperCrop installed
Photoshop actions break when layer orders change or specs evolve. HyperCrop reads live components, applies smart detection, and updates presets instantly. TinyImage handles compression afterwards, so the whole pipeline stays in Figma—no exporting flattened PNGs just to re-import them.

### When Photoshop still fits
If you’re retouching RAW photography or compositing complicated scenes, Photoshop remains unmatched. But once assets move into Figma for layout, HyperCrop is faster for every subsequent resize. Benchmark both on a real campaign brief and note how long it takes to add a new ratio midstream—HyperCrop usually wins within a few clicks.

The best "alternative" is the process that keeps your team moving. For me, that remains HyperCrop.

### Evaluation checklist
- Can the alternative sync presets across teams?
- Does it offer smart focal detection, not just uniform crops?
- Are exports logged so you can trace which preset produced which asset?

Unless another plugin answers “yes” across the board, HyperCrop remains the safer bet.

---

---
type: article
title: Figma Component Code Generator
description: Generate component-ready code from Figma layers with Weblify’s smart exporter.
datePublished: 2025-10-21T00:00:00.000Z
dateModified: 2025-10-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-component-code-generator/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-component-code-generator.md
---

# Figma Component Code Generator

Components are only useful if engineers can implement them quickly. Weblify converts Figma components into code snippets that mirror your design system—complete with props, responsive behavior, and variant support.

### Works with modern stacks
Export as vanilla HTML/CSS, Tailwind, React, or Vue. Weblify names props based on your variant labels, so developers immediately understand how to toggle states or swap content.

### Keep libraries aligned
When you update a component in Figma, rerun Weblify and refresh the snippet in your codebase or documentation. It keeps design and engineering libraries marching in lockstep.

### Usage
1. Select the component master or variant in Figma.
2. Run Weblify to generate the desired code flavor.
3. Share the snippet or commit it to your component library repo.

It’s a fast path from Figma component to working code.

### Keep naming clean
Adopt consistent variant labels (`size`, `state`, `theme`) so Weblify’s generated props stay human-friendly. When designers and engineers speak the same language, documentation gets easier and mistakes drop quickly.

---

---
type: article
title: Figma Translation Plugin
description: Translate Figma content at scale by routing every locale through CopyDoc’s import/export tools.
datePublished: 2025-10-19T00:00:00.000Z
dateModified: 2025-10-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-translation-plugin/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-translation-plugin.md
---

# Figma Translation Plugin

Translation work explodes quickly: multiple languages, tone guidelines, short deadlines. CopyDoc handles it gracefully. Export source strings, send them to translators or an API, and bring the localized copy back without losing structure.

### Supports modern translation stacks
CopyDoc plays nicely with Lokalise, Crowdin, Phrase, and custom pipelines. It keeps IDs intact so translators know exactly where each string lives, and it re-imports the results into the right layers automatically.

### Layout testing becomes faster
Once translations are in Figma, you can quickly scan for truncation, line breaks, or RTL requirements. CopyDoc can even create separate frames per language to keep reviews clear.

### Translation recipe
1. Export strings (with IDs) via CopyDoc.
2. Translate them in your platform of choice.
3. Import the localized files back into Figma, review, and repeat as needed.

It’s the translation plugin I recommend to every team juggling more than one language.

### Quality control
Tag strings with reviewers’ initials or market owners as you approve them. CopyDoc tracks the entire history, so if a translator questions context later, you can point to the exact decision. Combine this with screenshot exports for even better clarity.

### Efficiency tips
- Batch similar experiences (marketing, lifecycle, product) into separate exports so translators aren’t overwhelmed.
- Use CopyDoc’s find/replace to update terminology across all locales instantly when brand guidelines change.
- Archive completed language files for reuse the next time a product update goes live in the same region.

CopyDoc makes translation workflows repeatable, even for lean teams.

---

---
type: article
title: TinyImage vs TinyPNG
description: How TinyImage stacks up against TinyPNG for teams working directly in Figma.
datePublished: 2025-10-17T00:00:00.000Z
dateModified: 2025-10-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-tinyimage-vs-tinypng/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-tinyimage-vs-tinypng.md
---

# TinyImage vs TinyPNG

TinyPNG is great for quick drag-and-drop compression, but it sits outside your design workflow. TinyImage lives inside Figma, supports more formats, and handles batch exports plus renaming. If you’re already designing in Figma, keeping the optimization step there saves a ton of time.

### Comparing workflows
TinyPNG requires exporting files first, uploading them, then downloading the optimized versions. TinyImage compresses layers in place, inserts results back into Figma if needed, and exports to your file system or shared drive directly.

### Format support
TinyImage handles PNG, JPG, WebP, AVIF, GIF, MP4, and PDF. TinyPNG (despite the name) primarily supports PNG and JPG. When you’re juggling marketing assets, having those extra formats matters.

### Choose based on your needs
If you occasionally need to shrink a screenshot, TinyPNG is fine. For production teams managing large batches and multiple formats, TinyImage wins due to convenience and depth.

---

---
type: article
title: Export MP4 Banner Videos from Figma with Bannerify
description: Create MP4 banner videos from your Figma designs with Bannerify’s built-in video exporter.
datePublished: 2025-10-15T00:00:00.000Z
dateModified: 2025-10-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-figma-mp4-export/
markdownUrl: https://www.hypermatic.com/articles/bannerify-figma-mp4-export.md
---

# Export MP4 Banner Videos from Figma with Bannerify

Some campaigns still prefer MP4 uploads—think CTV placements, LinkedIn video ads, or product screens for app stores. Bannerify handles MP4 exports directly. Animate in Figma, and the plugin renders an MP4 (plus optional WebM) ready for upload.

### No video editor required
Because Bannerify handles the rendering, I don’t need to rebuild the animation in After Effects. Timing, easing, and ordering stay consistent with what I set on the Figma canvas. If the team wants a quicker loop or a different transition, I update the animation and re-export within minutes.

### Export settings that match the brief
Bannerify lets you define duration, resolution, loop count, and background transparency before rendering the MP4. Need a muted version with no audio? Easy. Want to overlay narration or music? Add it in the plugin and preview everything before downloading.

### The workflow I follow
1. Animate the creative using Bannerify.
2. Choose the MP4 export option, configure resolution/looping/audio, and render.
3. Deliver the MP4 (and optional WebM) to the channel that requested it.

It’s a straightforward way to get motion content out of Figma without detouring through heavy video software.

### Where MP4s come in handy
Product walkthroughs, app store previews, trade-show loops, and internal announcements all benefit from video files. Bannerify lets me reuse the same animation across all of those channels. Need burnt-in captions for a silent autoplay feed? Duplicate the frame, add the overlay text, and export a second MP4 without touching a video editor.

### Keep file sizes under control
Video specs can be strict, especially for LinkedIn or CTV placements. Bannerify shows you the target bitrate and resulting weight before export. Adjust resolution, frame rate, or loop length until you hit the requirement, then render with confidence. Pair the MP4 with TinyImage if you want an extra layer of compression without visible quality loss.

With these controls, Figma genuinely becomes your production suite for every motion deliverable, MP4s included.

---

---
type: article
title: Favvy vs RealFaviconGenerator
description: Comparing Favvy with RealFaviconGenerator for teams creating icons directly in Figma.
datePublished: 2025-10-14T00:00:00.000Z
dateModified: 2025-10-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-favvy-vs-realfavicongenerator/
markdownUrl: https://www.hypermatic.com/articles/favvy-favvy-vs-realfavicongenerator.md
---

# Favvy vs RealFaviconGenerator

RealFaviconGenerator is a solid web app, but it requires you to upload assets outside of Figma. Favvy keeps everything in the file you’re already designing, which makes a big difference when revisions roll in.

### Design context stays intact
Favvy reads vector layers directly, so you can tweak the icon and re-export instantly. With web-based generators, you need to export PNGs first, then reupload them for every change.

### Integrated metadata
Favvy exports icons plus manifests and HTML snippets in one step. RealFaviconGenerator does this too, but you have to copy the code into Figma or your documentation manually. Favvy packages everything together, making it easier to store alongside your design system.

### When RealFaviconGenerator might make sense
If you’re working without Figma or need advanced reporting on deployed favicons, RealFaviconGenerator is helpful. But for Figma-first teams, Favvy removes more friction and keeps the workflow centralized.

### Collaboration edge
Favvy’s exports live alongside your design files, so product managers and engineers can preview updates without leaving Figma. RealFaviconGenerator requires sharing external links or zip files each time you iterate, which slows the feedback loop.

### Recommendation
If your entire design system already lives in Figma, stick with Favvy. If you’re in a tool-agnostic environment or managing assets outside Figma, RealFaviconGenerator can fill the gap. For most modern teams, Favvy’s integration advantage wins.

---

---
type: article
title: How to speed up campaign launches with Figma
description: How teams use Figma to speed up campaign launches across ads, emails, decks, and supporting assets.
datePublished: 2025-10-11T00:00:00.000Z
dateModified: 2025-10-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/how-to-speed-up-campaign-launches-with-figma/
markdownUrl: https://www.hypermatic.com/articles/how-to-speed-up-campaign-launches-with-figma.md
---

# How to speed up campaign launches with Figma

How teams use Figma to speed up campaign launches across ads, emails, decks, and supporting assets. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Emailify

[Emailify](/emailify/) is one of the more useful tools in this workflow. Emailify matters in this workflow because email work often gets rebuilt after design. Keeping layout, content, and export closer together removes a lot of duplicate effort from campaign production.

### Bannerify

[Bannerify](/bannerify/) is one of the more useful tools in this workflow. Bannerify is useful here because it keeps banner production inside Figma instead of pushing the team into a separate build step. For teams creating multiple ad sizes, motion variants, or late campaign revisions, that usually means less repetition and a cleaner review cycle.

### HyperCrop

[HyperCrop](/hypercrop/) is one of the more useful tools in this workflow. HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Programmatic Display Ad Builder
description: Build programmatic-ready display ads in Figma with Bannerify and export packages that slip straight into your media stack.
datePublished: 2025-10-10T00:00:00.000Z
dateModified: 2025-10-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-programmatic-display-ad-builder/
markdownUrl: https://www.hypermatic.com/articles/bannerify-programmatic-display-ad-builder.md
---

# Programmatic Display Ad Builder

Programmatic campaigns often feel like a black box, but at the end of the day they still need clean creative. Bannerify lets me build those ads without leaving Figma and ensures they meet the technical expectations of DSPs, ad servers, and QA teams.

### Templates that scale with the media plan
I start with a component-driven system: hero, offer, logo, CTA, legal. Bannerify duplicates those modules across every size, so the media plan’s long tail of dimensions is easy to satisfy. When the programmatic team asks for a new variation, I update the component and rerun the exports.

### Packages made for DSPs
Bannerify outputs HTML5 zips with clickTags, polite-loading scripts, and manifest files. You can select presets for Google Ads, DV360, AdForm, Sizmek, or standard IAB. Files pass QA the first time because they are structured consistently every export.

### Operational workflow
1. Map the media plan to Figma frames.
2. Animate the first banner, then propagate the same animation through your other sizes.
3. Export everything with Bannerify and deliver via hosted previews or zipped packages.

Programmatic display should be about creative strategy, not wrestling with specs. Bannerify keeps the creative process enjoyable while satisfying every technical checkbox.

### Plug into data feeds
Programmatic buys thrive on personalization. Combine Bannerify with spreadsheet-driven content or CopyDoc libraries so offers, pricing tiers, and CTAs update across hundreds of variants. Design once, tag the dynamic fields, and regenerate the entire creative set whenever merchandising refreshes the feed. Because the animation and layout stay identical, you can attribute performance differences to the content, not production errors.

### QA without headaches
DSPs enforce strict weight limits and require proof of clickTag behavior. Bannerify flags potential issues before export and logs every asset’s size so you can share a compliance report alongside the creative. Need to rerun a set after QA feedback? Update the Figma file, hit export, and hand the new package to trafficking teams without rebuilding anything.

Building programmatic display ads stops feeling mysterious when the tooling supports your process. Bannerify is that support system.

---

---
type: article
title: Export Animated GIF Banners from Figma with Bannerify
description: Export polished GIF banners straight from Figma with Bannerify’s animation timeline and built-in optimizations.
datePublished: 2025-10-09T00:00:00.000Z
dateModified: 2025-10-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-figma-gif-export/
markdownUrl: https://www.hypermatic.com/articles/bannerify-figma-gif-export.md
---

# Export Animated GIF Banners from Figma with Bannerify

Figma itself cannot export animated GIFs, but Bannerify fills the gap beautifully. I can animate layers frame-by-frame, tweak easing, and export looped GIFs for CRM, product marketing, or social placements without touching another app.

### Keep everything editable
Instead of building animations in Photoshop or After Effects, Bannerify works on the same Figma layers stakeholders already reviewed. Text stays editable, imagery swaps stay fast, and localization teams can translate copy without breaking the animation structure.

### Control size and quality
Bannerify lets you convert your animation into a GIF while adjusting frame rate, looping behavior, and palette size. That means we can hit strict file-size limits without sacrificing clarity. The export preview shows the exact weight before you download it, which keeps approval cycles tight.

### Steps I follow for GIF exports
1. Design the banner and animate it inside Bannerify’s timeline.
2. Choose the GIF export option, configure frame rate/looping, and preview the result.
3. Download the optimized GIF or send the hosted preview link for sign-off.

It’s the fastest way I know to go from a static Figma layout to a high-quality GIF without picking up another tool.

### Mix GIFs with other formats
Most campaigns need more than one asset type. Bannerify lets me export GIF, MP4, and WebM versions simultaneously, keeping color, timing, and naming consistent. CRM teams grab the GIF for legacy clients, while social or product folks use the higher fidelity MP4. Because all exports share the same source animation, performance tests become meaningful—you’re comparing creative, not production quirks.

### Tips for crisp GIF output
- Keep gradients and photo-heavy sections subtle; GIF’s 256-color palette favors flat colors.
- Use Bannerify’s onion skinning feature to align frame-by-frame animations when you need precise motion.
- Preview exports on both light and dark backgrounds to ensure transparent GIFs look intentional.

With a dialed-in workflow, Figma plus Bannerify becomes the only combo you need for motion assets across the entire marketing funnel.

---

---
type: article
title: Display Ad Automation
description: Automate display ad production by letting Bannerify animate, package, and deliver everything from Figma.
datePublished: 2025-10-07T00:00:00.000Z
dateModified: 2025-10-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-display-ad-automation/
markdownUrl: https://www.hypermatic.com/articles/bannerify-display-ad-automation.md
---

# Display Ad Automation

Display ad automation usually involves duct taping spreadsheets, scripts, and half-baked template systems together. Bannerify simplifies it: you design the banners once inside Figma, hook up animations, and let the plugin automate the exports. With Zapier support and hosted preview links, the workflow actually scales.

### Automation starts with good structure
Use Figma components for modules like logo lockups, headlines, and legal footers. Bannerify can then duplicate those components across sizes while maintaining relationships and animation timings. Swapping copy or languages becomes a one-click update instead of a rebuild.

### Integrations keep teams in sync
Bannerify generates hosted previews, so stakeholders can review animations in the browser. When everything is approved, export ad network-ready packages or trigger automations via Zapier—think uploading HTML5 zips straight to Google Drive, Dropbox, or Slack.

### Suggested automation cadence
1. Build your base designs and define the animation timeline once.
2. Duplicate into all sizes with Bannerify’s layout tools.
3. Run exports on demand or schedule them via automation so media teams always have the latest creative.

Automation is only useful when it saves time without sacrificing quality. Bannerify nails that balance.

### Layer in data sources
Automation shines when you incorporate content feeds. Pair Bannerify with CopyDoc or spreadsheet-driven text so localized offers, pricing, and CTAs populate automatically. Design the layout once, link the dynamic fields, and rerun the automation whenever merch or lifecycle teams update the source file. Bannerify re-exports the new creative with the latest content and animation intact.

### Measure and refine
Once your display program is humming, Bannerify’s consistent exports make testing straightforward. Swap imagery or timing for a single module, re-export, and ship a new batch with clear naming conventions. Because the animation logic and file weights stay consistent, performance differences actually reflect the creative decisions—not inconsistencies in production.

Display ad automation should feel like an extension of your design system, not a bolt-on process. Bannerify is the rare tool that respects that reality.

---

---
type: article
title: Favicon Package Download
description: Download complete favicon packages from Figma with Favvy’s one-click exporter.
datePublished: 2025-10-05T00:00:00.000Z
dateModified: 2025-10-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-favicon-package-download/
markdownUrl: https://www.hypermatic.com/articles/favvy-favicon-package-download.md
---

# Favicon Package Download

Designers shouldn’t be zipping icon folders by hand. Favvy wraps every required asset into a tidy download: `.ico`, PNGs, manifest, Safari pinned tab SVG, and ready-to-paste HTML. Share the zip with engineers, drop it into your repo, or attach it to a ticket.

### Predictable structure
Each package follows the same folder layout and naming conventions, so teams know exactly where to drop files in their build pipeline. No more digging through random exports named `icon (12).png`.

### Works across stacks
Whether you’re deploying a static site, React app, Shopify store, or documentation portal, the package contains everything required. Update the paths once and you’re done.

### Download routine
1. Run Favvy on your icon.
2. Choose the package preset (standard web, PWA, etc.).
3. Download the zip and share it wherever your build process expects assets.

It’s the tidy handoff you wish every asset request produced.

### Hand off with confidence
Attach the Favvy zip to Jira or Linear tickets so engineering has the assets plus a markdown snippet describing how to implement them. Because every package is identical, onboarding new developers takes minutes.

### Maintenance
When icons change, regenerate the package and update the ticket or repository with a new version number. Teams can always trace which release contains which icon set, reducing confusion during audits or rollbacks.

---

---
type: article
title: Figma Spreadsheet Sync
description: Sync spreadsheets with Figma text layers using CopyDoc so data stays accurate across every mockup.
datePublished: 2025-10-04T00:00:00.000Z
dateModified: 2025-10-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-spreadsheet-sync/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-spreadsheet-sync.md
---

# Figma Spreadsheet Sync

Spreadsheet-driven projects (pricing, onboarding flows, educational content) change constantly. CopyDoc keeps Figma in sync with Google Sheets, Excel, Airtable—anything that can export CSV or XLSX.

### Map once, reuse forever
Link spreadsheet columns to specific layers, save the mapping, and rerun it whenever the data changes. CopyDoc remembers your configuration, so recurring updates take seconds.

### Guardrails through previews
Before applying changes, CopyDoc shows what’s new or outdated. That helps catch errors (like misaligned IDs) before they make their way into your designs.

### Sync steps
1. Ensure the spreadsheet has stable IDs or unique layer names.
2. Import via CopyDoc, review the diff view, and confirm everything lines up.
3. Apply the update and keep designing with accurate data.

It’s the easiest way to keep product and marketing teams aligned on content.

### Automate with scripts
Pair CopyDoc with scheduled spreadsheet exports so designers receive new data on a predictable cadence. Whether it’s Airtable automations or Google Apps Script, the pipeline feeds CopyDoc-ready files straight into your workflow.

### Pro tip
Keep a “sandbox” page in Figma for testing imports. Run them there first, confirm mappings look right, then apply to production layouts. It’s a small step that avoids messy surprises on tight deadlines.

---

---
type: article
title: Figma to PowerPoint Converter
description: Use Convertify to turn Figma slides into editable PowerPoint decks for stakeholders who live in Office.
datePublished: 2025-10-02T00:00:00.000Z
dateModified: 2025-10-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-figma-to-powerpoint-converter/
markdownUrl: https://www.hypermatic.com/articles/convertify-figma-to-powerpoint-converter.md
---

# Figma to PowerPoint Converter

PowerPoint still dominates enterprise presentations. When leadership wants the deck in .pptx format, Convertify handles the conversion from Figma without flattening everything into images. Text stays editable, images stay linked, and slides map one-to-one.

### Keep storytelling consistent
I design the presentation in Figma where collaboration is easier. When it’s time to distribute, Convertify exports the frames into a PowerPoint file that mirrors the layout. Stakeholders can swap copy, add speaker notes, or duplicate slides without calling the design team.

### Notes for smoother conversions
1. Use Figma components for recurring modules—Convertify maps them nicely.
2. Stick to desktop-safe fonts if the receiving team can’t install custom ones.
3. After exporting, review the PPT for any minor alignment tweaks and hand it off with usage tips.

It’s the simplest way to keep execs happy without maintaining two separate files.

### Reuse across other channels
Once the PowerPoint file exists, marketing can repurpose slides for webinars or sales enablement. Convertify preserves individual elements, so they can tailor messages without pinging design for every update. When new product launches drop, update the Figma file and run Convertify again to keep everyone on the latest story.

### Helpful extras
- Include a “read me” slide at the front explaining how to duplicate layouts and which colors/notes to avoid changing.
- Pair the export with a PDF version for stakeholders who just need a quick read-through.
- Store both PPTX and source Figma links in the same documentation hub so there’s no confusion about where edits should happen.

Convertify is the bridge between collaborative design and Office workflows.

---

---
type: article
title: Figma Tailwind Plugin
description: Export Tailwind-ready markup from Figma components using Weblify.
datePublished: 2025-10-01T00:00:00.000Z
dateModified: 2025-10-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-tailwind-plugin/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-tailwind-plugin.md
---

# Figma Tailwind Plugin

Tailwind teams want class names, not CSS measurements. Weblify translates your Figma layers into Tailwind-friendly markup with the classes you already use. Configure the spacing scale, color tokens, and responsive breakpoints once, and Weblify will apply them to every export.

### Consistency guaranteed
Because Weblify maps directly to your Tailwind config, the generated code uses the same `px`, `py`, `bg`, and `text` utilities your engineers expect. That makes implementation a copy/paste job rather than a translation exercise.

### Rapid iteration
When the design changes, rerun Weblify and grab the updated snippet. You can even share it via your design system docs so engineers always have the freshest Tailwind code.

### Tailwind export workflow
1. Set up Weblify with your Tailwind tokens.
2. Select the component or layout you’re handing off.
3. Export the Tailwind snippet and ship it with your ticket or PRD.

It’s the missing link between Figma and utility-first codebases.

### Documentation shortcut
Drop Weblify’s Tailwind snippets into your Storybook or internal component catalog. When utility classes change, update the config in one spot, rerun Weblify, and your docs automatically reflect the new setup.

---

---
type: article
title: Crypto vs Password Protect PDF Tools
description: Comparing Crypto with traditional password-protected PDFs for sharing sensitive Figma work.
datePublished: 2025-09-29T00:00:00.000Z
dateModified: 2025-09-29T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-crypto-vs-password-protect-pdf-tools/
markdownUrl: https://www.hypermatic.com/articles/crypto-crypto-vs-password-protect-pdf-tools.md
---

# Crypto vs Password Protect PDF Tools

Password-protected PDFs used to be our default for "secure" design sharing. They technically work, but they strip away interactivity, comments, and any sense of real collaboration. Crypto keeps everything live while still satisfying security requirements.

### Real-time beats static files
With Crypto, reviewers see the actual Figma prototype or presentation. They can interact with flows and leave feedback without downloading anything. PDFs freeze the work in time and require resending files for every change.

### Security posture
Crypto encrypts the share link, enforces passwords, adds watermarks if needed, and logs every view. Password-protected PDFs rely on the honor system once the file leaves your hands; if someone forwards it, you lose control.

### When PDFs still play a role
If a client’s firewall blocks external links entirely, a password-protected PDF might be the only option. For everyone else, Crypto provides more security _and_ a better review experience.

If you care about both control and collaboration, Crypto wins this comparison by a mile.

### Audit trails vs. guesswork
Crypto gives you timestamps, IP information, and user identities for every access. Try getting that from a PDF—you can’t. When security teams ask for proof, Crypto’s logs tell the whole story. PDFs leave you shrugging.

### Productivity boost
Because Crypto keeps prototypes interactive, you avoid exporting dozens of flat screens after every change. That’s hours back each week, and stakeholders always review the freshest state of the project. Password-protected PDFs simply can’t keep up.

---

---
type: article
title: Figma vs Live Site Comparison
description: Compare Figma mocks to live sites with Pixelay’s diff modes and catch regressions instantly.
datePublished: 2025-09-28T00:00:00.000Z
dateModified: 2025-09-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-figma-vs-live-site-comparison/
markdownUrl: https://www.hypermatic.com/articles/pixelay-figma-vs-live-site-comparison.md
---

# Figma vs Live Site Comparison

It’s easy to assume a build matches the mock until you load it side-by-side. Pixelay automates that comparison. You can overlay any Figma frame onto the live site, explore diff visualizations, and document mismatches with a single screenshot.

### Perfect for regression testing
Releases often introduce subtle spacing or typography regressions. Pixelay’s diff view highlights them in bright colors, so you don’t need to squint at two tabs hoping to spot differences.

### Shareable evidence
Capture the overlay or diff as an image and drop it into Jira, Linear, or Slack. Engineers can see exactly what changed and why it matters.

### Comparison routine
1. Publish key Figma frames to Pixelay before QA begins.
2. After deployment, overlay them on the live site.
3. Capture any deviations and assign fixes.

It’s the fastest way to ensure your live experience actually matches your design system.

### Trend analysis
Log recurring discrepancies (fonts, spacing, color tokens) and feed them back into engineering retros. Pixelay makes it easy to prove patterns with screenshots rather than opinions, which accelerates systemic fixes.

---

---
type: article
title: Figma PDF Import
description: Convertify lets you import PDF files into Figma so you can edit content instead of tracing screenshots.
datePublished: 2025-09-27T00:00:00.000Z
dateModified: 2025-09-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-figma-pdf-import/
markdownUrl: https://www.hypermatic.com/articles/convertify-figma-pdf-import.md
---

# Figma PDF Import

PDFs haunt every designer—they contain vital content locked away from our tools. Convertify unlocks them. I can import a PDF straight into Figma, and the plugin converts pages into editable vectors and text wherever possible.

### Reuse instead of rebuild
Whether it’s a brand guideline, old keynote, or regulatory document, importing the PDF means I keep the original structure. That’s faster and less error-prone than redrawing everything.

### Best practices
1. Clean up the PDF beforehand if you can (flatten transparencies, embed fonts).
2. Import in batches if the document is huge to keep Figma responsive.
3. Once inside Figma, replace fonts with your system styles so future edits stay consistent.

PDF imports used to be painful. Convertify makes them routine.

### Extend the value
After a PDF lives in Figma, you can annotate it, link to related prototypes, or slice out sections for marketing materials. Need to localize a regulatory form? Duplicate the imported frame, plug in translations, and re-export to PDF with Convertify’s other workflows. The time savings compound quickly.

### Where this shines
- Updating investor decks stuck in PDF forever
- Modernizing onboarding manuals into interactive flows
- Pulling legal copy directly into product surfaces

Treat PDFs as starting points rather than dead ends by running them through Convertify.

---

---
type: article
title: Why creative teams keep rebuilding work outside Figma
description: Why so much design work gets rebuilt after approval, and how teams reduce that production waste.
datePublished: 2025-09-24T00:00:00.000Z
dateModified: 2025-09-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/why-creative-teams-keep-rebuilding-work-outside-figma/
markdownUrl: https://www.hypermatic.com/articles/why-creative-teams-keep-rebuilding-work-outside-figma.md
---

# Why creative teams keep rebuilding work outside Figma

Why so much design work gets rebuilt after approval, and how teams reduce that production waste. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Emailify

[Emailify](/emailify/) is one of the more useful tools in this workflow. Emailify matters in this workflow because email work often gets rebuilt after design. Keeping layout, content, and export closer together removes a lot of duplicate effort from campaign production.

### Bannerify

[Bannerify](/bannerify/) is one of the more useful tools in this workflow. Bannerify is useful here because it keeps banner production inside Figma instead of pushing the team into a separate build step. For teams creating multiple ad sizes, motion variants, or late campaign revisions, that usually means less repetition and a cleaner review cycle.

### Pitchdeck

[Pitchdeck](/pitchdeck/) is one of the more useful tools in this workflow. Pitchdeck is helpful in this workflow because presentation work usually lives between design quality and practical delivery. Designing once in Figma and exporting to familiar deck formats is often the fastest middle ground.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Pixelay vs Perfect Pixel
description: Comparing Pixelay and PerfectPixel for overlaying Figma designs on real websites.
datePublished: 2025-09-21T00:00:00.000Z
dateModified: 2025-09-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-pixelay-vs-perfect-pixel/
markdownUrl: https://www.hypermatic.com/articles/pixelay-pixelay-vs-perfect-pixel.md
---

# Pixelay vs Perfect Pixel

PerfectPixel popularized the idea of overlaying designs on a webpage. Pixelay builds on that concept with deeper Figma integration, collaboration tools, and analytics. If you need a modern workflow that supports teams, Pixelay is the upgrade.

### Integration matters
Pixelay pulls frames directly from your Figma account—no exporting images manually. It also supports prototypes behind logins, local environments, and responsive layouts. PerfectPixel requires uploading assets each time.

### Collaboration and evidence
Pixelay lets you comment, annotate, and share comparison links. PerfectPixel is more of a solo tool. When you’re collaborating across design, QA, and engineering, the ability to share context is priceless.

### Verdict
PerfectPixel still works for quick solo checks. For team-wide QA, Pixelay’s automated syncing, annotations, and diff modes save far more time. Once you try it, it’s hard to go back.

### Migration tip
If you’re moving from PerfectPixel, document your old processes and map them to Pixelay features (overlay, diff, annotation). Most teams realize they can retire several manual steps after a single sprint.

---

---
type: article
title: Export Figma Animations to MP4 with TinyImage
description: Render MP4 videos from Figma animations using TinyImage and skip extra editors.
datePublished: 2025-09-19T00:00:00.000Z
dateModified: 2025-09-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-figma-mp4-export/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-figma-mp4-export.md
---

# Export Figma Animations to MP4 with TinyImage

Product tours, motion mocks, and marketing videos often start in Figma. TinyImage lets you export those animations directly as MP4 files. It’s ideal for presentations, app store previews, or social ads that demand video formats.

### Customizable output
Set resolution, loop count, playback speed, and optional audio tracks. TinyImage handles encoding so the MP4 stays lightweight but crisp.

### Multi-format in one pass
Alongside MP4, TinyImage can output WebM and GIF versions simultaneously. That keeps every channel covered without rerendering the animation.

### Steps
1. Use Figma’s prototype or frame sequences to define motion.
2. Run TinyImage’s video export and configure MP4 settings.
3. Download and share the video wherever it’s needed.

No After Effects required for straightforward UI motion demos.

### Tip
Keep a library of outro bumps, logos, or lower thirds in Figma so you can drop them into any animation before exporting. TinyImage will bake them into the MP4, keeping branding consistent across videos without additional editing.

---

---
type: article
title: Favicon HTML Code Generator
description: Favvy writes the favicon HTML code for you so implementation is as easy as copy/paste.
datePublished: 2025-09-16T00:00:00.000Z
dateModified: 2025-09-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-favicon-html-code-generator/
markdownUrl: https://www.hypermatic.com/articles/favvy-favicon-html-code-generator.md
---

# Favicon HTML Code Generator

Half the battle with favicons is wiring them up correctly. Favvy not only exports the icons but also generates the `<link>` tags and meta declarations you need to paste into your HTML head. That means fewer DevOps pings and zero guesswork.

### Accurate metadata every time
Each export includes touch icons, Safari pinned tab colors, mask icons, and manifest references. Favvy outputs the code snippet alongside your zip file, customized with whatever file paths you choose.

### Integrates with your workflow
Store the snippet in your project docs or drop it straight into your framework’s layout file. Because it’s generated inside Figma, you can update it whenever the icon changes and stay confident the markup stays correct.

### Implementation workflow
1. Generate your icon set with Favvy.
2. Copy the provided HTML snippet and add it to your site.
3. Upload the exported icons/manifest to your static assets folder.

That’s the entire integration—no manual typing required.

### Avoid regressions
When QA reports missing icons, compare the deployed markup with Favvy’s snippet. Because the plugin tracks the code alongside the asset download, it’s easy to confirm whether implementation drifted. Update paths, redeploy, and you’re back in sync.

### Helpful habit
Store Favvy’s snippet in source control right next to the assets. Future developers will always know which markup matches which export, saving time during redesigns or rebrands.

---

---
type: article
title: Favicon Automation Workflow
description: Automate favicon production directly in Figma with Favvy’s preset packages and manifest builder.
datePublished: 2025-09-14T00:00:00.000Z
dateModified: 2025-09-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-favicon-automation-workflow/
markdownUrl: https://www.hypermatic.com/articles/favvy-favicon-automation-workflow.md
---

# Favicon Automation Workflow

Favicon requests always show up at the last minute. Favvy keeps them from derailing a launch by automating the entire workflow: export every required size, generate the HTML/JSON boilerplate, and bundle the files into a download you can hand to engineering.

### Start with a single design
Design your icon once on the canvas. Favvy reads that frame and renders all of the variants—classic desktop favicons, touch icons, pinned tabs, mask icons, and more. You can preview each output before exporting.

### Automation beats manual labor
Favvy remembers your color settings, backgrounds, and naming conventions. When another project needs favicons, run the preset again and you’ll get the same polished results without hunting down old Photoshop actions.

### Workflow checklist
1. Create the base icon in Figma (usually 1024×1024 or larger).
2. Run Favvy, choose the package that matches your needs (web, PWA, Windows tiles, etc.), and review the previews.
3. Download the zip with icons, `manifest.json`, and HTML tags ready to paste into your site.

That’s it. Favicon automation finally feels like part of the design system instead of an afterthought.

### Keep specs centralized
Document which Favvy preset each product surface uses and store it next to your brand guidelines. When teammates spin up a new microsite, they know exactly which preset to run. You get consistent results without answering the same questions repeatedly.

### Pro tip
Pair Favvy with automation tools (Git hooks, CI) to drop updated favicon packages into your repo whenever the source icon changes. Engineering gets notified automatically, and you never miss a release window.

---

---
type: article
title: UI Review Tool
description: Run UI reviews directly in the browser with Pixelay’s overlays and annotations.
datePublished: 2025-09-12T00:00:00.000Z
dateModified: 2025-09-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-ui-review-tool/
markdownUrl: https://www.hypermatic.com/articles/pixelay-ui-review-tool.md
---

# UI Review Tool

UI reviews shouldn’t require exporting screenshots into a slide deck. Pixelay lets you run the entire review in the browser. Overlay the Figma design, walk stakeholders through the build, and annotate any issues without leaving the page.

### Real-time collaboration
Share a Pixelay session and reviewers can see the same overlay you’re using. Toggle diff modes, adjust opacity, and discuss fixes live during standups or review meetings.

### Documentation baked in
Capture annotated screenshots and drop them into your project management tool. Pixelay keeps the reference to the exact frame and URL, so there’s no ambiguity later.

### Review cadence
1. Schedule UI reviews once the build hits staging.
2. Use Pixelay overlays to inspect each screen with relevant stakeholders.
3. Assign fixes immediately with attached screenshots.

It keeps reviews fast, visual, and grounded in the actual product.

### Follow-up strategy
After each review, export a summary from Pixelay and post it in your team channel. Include resolved items and outstanding questions so everyone knows what changed without attending every meeting.

---

---
type: tutorial
title: How to sync merge tags in Figma text layers from a spreadsheet using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-09-11T00:00:00.000Z
dateModified: 2025-09-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-replace-merge-tags-in-figma-text-layers-with-spreadsheet-files-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-replace-merge-tags-in-figma-text-layers-with-spreadsheet-files-using-copy-doc.md
---

# How to sync merge tags in Figma text layers from a spreadsheet using CopyDoc

#### Video Transcript

Today I'm going to be showing you how to sync placeholder merge tags in your Figma text layer content with data from any spreadsheet using the CopyDoc Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little actions icon at the bottom here, and then search for CopyDoc. Under the Figma plugins tab, if you click on the CopyDoc item, you can run the Figma plugin by either clicking on the run button down here, or I'd recommend clicking on the save button next to that, which is going to save it to your Figma plugins list for easy access later.

I've already clicked on the save button, so I'm just going to go to my Figma canvas. I'll right click anywhere, go down to Plugins, and then go down to Saved Plugins and click on the CopyDoc item. That's going to run the Figma plugin that we saved a second ago.

You'll notice in our designs, we've got these different text layers with these placeholder merge tags. You can see we've got placeholders for name, minutes, username, country, and we've also got an Excel file over here, which has those same names as the column headings for all of these rows. As you can see, we're naming these headings in the spreadsheet to match up with these placeholder merge tags in our Figma text layers, and then we're going to automatically sync each of these rows with each of these layers using the Figma plugin sync feature.

I'll show you how to do that now. We just have to go to the Figma plugin and click on the sync content button. Then you want to choose where you want to sync the content from. You can do it from a CSV or Excel file, a Google Sheets URL, or an Airtable URL.

Today, I'm going to keep it really simple and use an Excel spreadsheet file, which is an Excel XLSX file. I'm going to take this spreadsheet that I've created, drag and drop that into the Figma plugin, and you'll see we get a little preview of what the spreadsheet content is. It's matching up exactly with the spreadsheet here.

You'll notice I've also added an extra column called artwork. I've named each of these Figma layers with an image fill to match up with that. That's basically hash artwork, and you can see that's matching up with this. It's containing some links to image URLs, and those are going to get synced up as well.

Now that we've got all of our layers selected, all you need to do is highlight all of the frames that you want to sync up. In this case, I want to sync up each of these design frames, which contain my text layers. We're going to click on the sync rows with layers button up the top here. I'm going to click on that now.

You'll notice it's gone through and updated all those layers. It's quite quick. You can see it's swapped out those placeholder merge tags we had in our designs and updated them with the content from our spreadsheet. For example, it swapped out the username, the country, the name, and the minutes formatted as well. It's also swapped out the artwork and added each of those images as the image fills for those layers.

To go through what that just did, I'm going to undo those updates with CMD + Z. You can see here before it updated, the format that we're using is the hash symbol, then open curly bracket, then the name of your column, and then close curly bracket. You can use this format for any values that you want to sync up from a spreadsheet. You just put those into your spreadsheet content.

For example, we could add this multiple times. If we wanted to add name twice for some reason, we could do that. Then if we synced that up just with this one layer this time, you'd see that it swaps out that variable twice. Anywhere you put that variable, it's going to swap out those merge tags with the content from your spreadsheet.

You can also do this by automatically repeating layers. Let's say we've got this design over here and we don't want to sync up all six of these. We just want to take this one and automatically repeat it the number of times that we've got rows in our spreadsheet. You can click on the frame, make sure you've got the auto repeat toggle turned on, and then once you've got that single Figma layer selected with the auto repeat toggle enabled, you can click on the sync and repeat selected layer button.

That's going to go through and automatically take that layer and sync it with all of your rows from the spreadsheet. You can see here, it's taken our original layer, which we've still got, copied all of those into this new frame called CopyDoc row sync, and inside that, it's updated all of those rows with the contents from our design. It's taken all that same content, automatically repeated it in each of these copies of that frame, and now you've got a completely automated content workflow for these placeholder merge tags.

Those are the main two options that you can use. Finally, I just wanted to quickly touch on the fact that the regular functionality also still applies. If you've used the Figma plugin before, you'll know that you can typically use the naming conventions to swap out entire text layers.

For example, I could put in placeholder content here, and then if I rename the layer itself, in this case, I might want to use the username, I'm going to copy that into my Figma text layer name. That's the actual layer name rather than the content. What I can do now is click on that layer, turn the auto repeat off, and sync up this one selected layer.

You'll notice here I've got my username, and this is going to get swapped out with the username here. I'll show you what that looks like. If I click on that layer and then on the sync rows with layers button, you can see it's gone in, found that matching layer name, matched the layer name with the username heading, and swapped out all of that content with this username. It's also found the other layer here which isn't named, and it's looking for those variables that we set up a moment ago and swapping those out.

That's basically the alternate way you can update layers. But in this tutorial, I'm assuming you're already familiar with the layer name version. This is just showing you how to update content inside of a text layer if you need to have multiple bits of dynamic content swapped out while leaving other text alone. That's a really good option if you need that kind of workflow.

Otherwise, if you know you're just going to update the entire text layer content, feel free to just use the naming version where you name the Figma layer name to match up with your spreadsheet headings, and that's going to automatically update that content for you as well.

That's it for today. I just wanted to run through that new feature in the Figma plugin which now allows you to update inline placeholder text merge tags. That's going to be really helpful if you've got workflows where you need to update content in multiple places in the same text layer, in multiple elements for your frames, that you can now sync from the spreadsheet rows.

Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one in the near future.

---

---
type: article
title: Figma Sales Deck Template
description: Build and maintain sales deck templates in Figma with Pitchdeck’s export and analytics features.
datePublished: 2025-09-10T00:00:00.000Z
dateModified: 2025-09-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-figma-sales-deck-template/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-figma-sales-deck-template.md
---

# Figma Sales Deck Template

Sales decks live in a constant state of change. Pitchdeck gives GTM teams a central template in Figma so they can update messaging once and export new versions in minutes. Components keep the deck on-brand, and analytics reveal which slides prospects actually view.

### Template governance
Store your slides as components in a shared library—hero, value proposition, customer logos, pricing tables. Pitchdeck respects those components, so every exported deck inherits the latest approved design and copy.

### Enable the field team
Reps can request tailored versions. Designers duplicate the template, tweak a few frames, and export to PowerPoint, Keynote, or a hosted Pitchdeck link. Because the template lives in Figma, marketing can deploy updates globally without chasing down outdated files.

### Analytics for follow-ups
When you send a Pitchdeck link, you’ll see which slides the prospect lingered on. Use that data to tailor the next call or refine the template for future deals.

It’s the difference between static PDFs and a living sales asset.

### Keep messaging current
When pricing or positioning changes, update the master components in Figma and rerun Pitchdeck exports for each team. Because reps request decks as needed, they’re always pulling the freshest narrative without waiting for enablement to rebuild files.

### Analytics for coaching
Send Pitchdeck links instead of attachments and review which slides prospects linger on. Sales leaders can use that insight to coach reps on where to spend more time or which objections keep surfacing.

---

---
type: tutorial
title: How to export images with custom folder path names from Figma  using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-09-10T00:00:00.000Z
dateModified: 2025-09-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-images-with-custom-folder-paths-from-figma-using-tinyimage/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-images-with-custom-folder-paths-from-figma-using-tinyimage.md
---

# How to export images with custom folder path names from Figma  using TinyImage

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your image layers from Figma into customizable dynamic folder names using the TinyImage Figma plugin.

To get started, all we need to do is go to our Figma file, click on the actions icon at the bottom here, and then search for TinyImage. Under the Figma plugins tab, if you click on the TinyImage result, you can run the Figma plugin by either clicking on the "Run" button down here, or I'd recommend clicking on the "Save" button down here, which saves it to your Figma plugins list for easy access later.

I've already clicked on that button, so I'm going to go to my canvas, right-click anywhere, then go down to Plugins, go down to Saved Plugins, and click on the TinyImage item. That runs the Figma plugin we saved a second ago.

You'll notice the first time you run the plugin, if you don’t have any export settings applied to your layers, the plugin will basically be empty. We can quickly address that by selecting all the layers we want to export as compressed images from the TinyImage plugin. Select all those image layers, then go over to the right-hand side in Figma and click on the export button.

You've got this little export plus button, and you can add any formats you want. You can either just have one format, or if you need the assets in multiple formats and resolutions, you can also change that. I can change this to JPEG, have that as PNG, adjust the scale, and customize it however I want.

Once you've applied those, all we need to do is either click on the refresh button down here or the refresh icon up here. That loads up all of the assets we just made exportable. You can see we've got all the formats listed out there.

Now, we need to go to our settings panel so we can customize the folder names. I'm going to click on this little settings icon. You'll notice here there's a field called "Custom File Name Format." By default, that just exports the file name, meaning it exports the layer name as the file. That's the default option.

But because we want to customize the folder output, we can use dynamic variables to automatically take the layers we've got in our Figma file and include those as the folder structure in our exported assets. I'll show you what that looks like.

For example, if we want the folders of these sections as part of our exported file names, we can go down here, click on the section variable, and then do a slash and put in the name. That basically takes any of these sections and makes them folders, with the image name inside.

This will just be a quick example, and then we'll come back and add a few more fields. I'm going to close that off and click on the export button. That compresses all the images I marked as exportable. I'm saving that to my desktop, then unzipping the file.

You can see here, if I zoom in, we now have three folders. These match our section names that we just added in Figma. Because we enabled that in our settings, we said we wanted section slash name. Section becomes a folder, and the name is the file name, now matching up with our exported folders.

That's an easy way of using dynamic variables from your designs and including those as part of the folder structure.

We can play around with this in more detail. For example, down here we've got a couple of nested frame layers. We can account for that by inserting this frame variable. That creates a new folder when placed next to the section with a slash.

We can also add the format. If we want the format included, we just add that variable. I'm typing in "format" and adding a slash. Now we’ll get section/frame/format, so in this case, JPEG.

We can also add width and height. If we want those variables, we can insert them too. That dynamically adds the width and height of each layer into the folder structure. You can either have those as folders or as part of the file name.

For example, if I took out the slash and added a hyphen, that would make the width and height part of the file name instead of a folder. I'm going to leave it as a folder for now. We're going to do section/frame/format/width × height. The "x" is just a normal character. Then we get the name itself.

I'm exporting that now. Closing this off, clicking export, re-exporting all of those compressed images from Figma, and saving to a zip file on the desktop.

If I open that new folder, you'll notice it's even more organized than before. All of these now have multiple folders: frame, section, and format. We've got all the JPEG files in this format, and all the PNG files in that format. It's nicely organizing everything.

I added the width and height here just to demonstrate, but in this case, because all the images are the same size, it's not very useful. However, if you had assets in many different sizes for social media posts, it would be handy to have the dynamic width and height in your folders for easier organization.

You've got a lot of flexibility here. In the settings panel, you’ll see quite a few variables you can use. You can add the current date, the scale, the width and height, the suffix, and more.

Currently, there's no suffix set in Figma, but you can add something like 2x or 1x as the suffix in the export panel. That gets automatically injected if you add the suffix variable.

You can also add static variables. If you want a folder called "images," you can just type that in manually, and it works. Same thing if you want to mix and match. For example, section_assets would automatically add the section name, then underscore, then the hardcoded word "assets." That creates a dynamic version with a static addition.

You’ve got a lot of flexibility here. Hopefully this helps you if you need to export your image assets from Figma into dynamic file naming paths with variables.

We'll leave it there for today. I just wanted to show you an overview of using custom file name formats when exporting assets from Figma as compressed images using the TinyImage plugin.

Thank you for watching, and we'll be back soon with more Figma tutorials like this in the near future.

---

---
type: tutorial
title: How to export banners from Figma to animated PNG (APNG) images using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-09-09T00:00:00.000Z
dateModified: 2025-09-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-png-apng-files-from-figma-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-png-apng-files-from-figma-using-bannerify.md
---

# How to export banners from Figma to animated PNG (APNG) images using Bannerify

#### Video Transcript

Today I'm going to be showing you a quick Figma tutorial on how to export your animated banners from Figma to an animated PNG file using the Bannerify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little actions icon at the bottom here, and then search for Bannerify. Under the Figma plugins tab, if you click on the Bannerify result, you can run the plugin by either clicking on the run button down here, or I’d recommend clicking on the save icon down here. That’s going to save it to your Figma plugins list for easy access later.

I’ve already clicked on the save button, which is why it says “remove” now. I’m just going to go to my Figma canvas, right click anywhere, go down to plugins, then go down to saved plugins, and click on the Bannerify item. That’s going to run the Figma plugin we just saved.

If you’re new to the Figma plugin, the way that it works is it basically takes any frames on your page. These are just regular Figma frames, and it essentially treats those as banners. You can see here, I can load any of those into the Figma plugin. If I click on the “load banners” button, that’s going to load up all of my frames along with all of the child elements in those frames.

You can see we’ve got text layers, button layers, character layers, and these are all being reflected in the Bannerify timeline. I’ve already gone through and animated all of these layers, so I’m not going to be covering that in depth today. If you’re interested in how the animations work, which you can set by changing these options down here and adjusting the timeline features over here, you can check out some of the other videos on the YouTube channel or look at the documentation site.

For today, you can see I’ve got a bunch of frames that have been pre-animated with those animations I just mentioned. What we want to do now is export this out to an animated PNG file.

The way we do that is by going up to the “export to GIF/video” button up here. I’m going to click on that now. Then I’ll scroll down to the bottom where you’ll see the option called “export APNG,” which means “export animated PNG.” If we go ahead and click that button, you’ll notice we’re now exporting all of the banners we loaded in.

We’ve got five different banners, and it’s going through each of those, animating them frame by frame, and converting each of those frames into a PNG frame. Those frames then get exported as a single PNG file for each of the five banners. When this finishes up, we’ll be able to download them to our computer and check the output.

It’s just processing the last banner now. Once that finishes, it’s going to zip up all of those files. I’ll click on the “download your zip file” button, then click save, and unzip it on my desktop.

When I open that folder, you’ll see a folder called “APNG.” That’s where all of our animated PNG files are. Inside, we’ve got five PNG files. You’ll notice the extension is just a regular .png, but if we open any of those files, you’ll see they’re actually animated. It’s a single PNG file, but it’s an animated PNG file, a special type of PNG that you can use.

We can open them all at once in the browser. There’s a little index.html file in there. If we drag and drop that into a browser window, it’s going to load a preview of all those PNG files at once. That’s a nice way of getting a preview without having to open them individually. You can also send that page to your clients if you need approvals.

Alternatively, you can drag and drop the PNG files directly into the browser. You’ll see the image loading, it looks like a regular PNG, but it’s animated. That’s all the index page is doing: loading PNGs onto an HTML page to make previewing them easier.

This is an alternative to using some of the other export features in the plugin. As I mentioned, there are export options for GIF files, MP4 files, WEBP, WEBM, and of course, HTML as well. In this case, you might want to use the APNG format as an alternative to GIF because of its added benefits.

PNGs have a better color range than GIFs. GIFs have a limited 256-color palette, which makes them look washed out. With PNGs, you get a much wider range of colors, so the accuracy is much more noticeable if you export to PNG.

That’s something to consider if you’re exporting banners from Bannerify or Figma into an animated format. You can choose between GIF or animated PNG. By clicking the “export APNG” button, you’ll get all of those PNG files ready to use in whatever format you need for your banner ads.

I hope this has been helpful. If you’ve been wondering how to export your banners from Figma to the animated PNG format, this is a really easy way to do it with one click. You can now do that directly from the Bannerify Figma plugin.

Feel free to give that a try, and hopefully it helps with your animated banner workflow. If you’re interested in using the APNG format in your own campaigns, this should help automate that process.

We’ll leave it there for today. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export animated PNG (APNG) images from Figma using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-09-09T00:00:00.000Z
dateModified: 2025-09-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-png-apng-files-from-figma-using-tinyimage/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-png-apng-files-from-figma-using-tinyimage.md
---

# How to export animated PNG (APNG) images from Figma using TinyImage

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your images from Figma into an animated PNG file using the TinyImage Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little actions icon at the bottom here, and search for TinyImage. If you click on the plugins item and then click on the TinyImage result, you can run the Figma plugin by either clicking on this little run button here, or I'd recommend clicking on the save button over here. That’s going to save it to your plugins list for easy access later.

I've already clicked on the save button, which is why it says “remove.” I'm just going to go to my Figma canvas, right-click anywhere, go down to plugins, then go down to saved plugins, and click on the TinyImage item. That’s going to run the Figma plugin we saved a second ago.

For today's Figma tutorial, we're not going to be focusing on any of the regular compression features of the Figma plugin. We're going to be specifically focusing on how to export a number of selected layers out to an animated PNG file, sometimes called an APNG file, and export that directly from Figma. You can use it on a website or different application just like you would with a GIF file.

All you need to do is select the layers you want to export to an animated PNG. Select your Figma layers, I’m just selecting these six for now. Then you want to click on this button in the Figma plugin called “Create GIF/MP4.” By default, you'll see that it's selecting the animated GIF option up here. What we want to do is change this animated GIF option. Click on the drop-down list and change it to animated PNG. That’s going to set the export to APNG.

Now you can animate or customize the animation of your Figma frames. You can change the timing per frame, this is currently at half a second per frame. Adjust that to be longer or shorter, depending on your needs. You can change the scaling, for example, doubling the size or reducing it to half size compared to the current Figma layers.

You can also add transitions if you want some transition effects, but for today I’ll keep it simple and leave it as instant. There’s also a quality setting down here, which I’ll leave as default.

Next, click on the “Export APNG” button up here. That will go through my six Figma images, export those, generate an animated PNG file, and then allow me to save it directly to my computer. You can see it’s just finished exporting that PNG file. I’ll save it to my desktop, and you’ll notice it’s saving as a regular .png file. If I preview it on my computer, you can see we’ve got this PNG file animating just like a GIF.

The added benefit is that PNG files have a much larger color range. With GIFs, you’re limited to 256 colors, which can look washed out. Animated PNG files give you all the benefits of a regular PNG file along with animation.

Another benefit of PNGs is transparency. For example, if we wanted to export these icons, we can highlight our icon layers, click on the “Create GIF” button again, and by default, it has a black background. That’s coming from the default setting down here. You can change it to different colors, but in this case, we want transparency. Enable the transparent background option, and you’ll notice the previews change to show transparency.

Click on the “Export APNG” button again, save the file (for example, icon.png), and open it. Now we’ve got a transparent animated PNG file exported directly from our Figma layers. This is great because it gives us sharp-edge transparency. With transparent GIFs, you often get artifacts around the transparent areas. The animated GIF format isn’t ideal for transparency, whereas PNG maintains color range and sharpness.

That’s basically it, I just wanted to run through that process for you. You can use this with your own files. As I said, there are a bunch of settings you can tweak down here. For example, if you want lossless quality, you can enable that. It won’t apply any compression, giving you the full color range for your exported animated PNG files.

If you turn that off and adjust the slider, that changes the quality level by limiting the number of colors included in the PNG. At lower quality, it might set it to 256 colors, the same as a GIF color range. If you increase it, the file size will grow, but you’ll also increase quality with more colors included.

Feel free to play around with all those settings, but we’ll leave it there for today. I hope that’s been helpful. If you’ve been wondering how to create an animated PNG file directly from Figma, you can do that using the Export APNG feature in the TinyImage Figma plugin.

Again, all you have to do is go to the image format settings, change it from GIF to animated PNG, and export your animations just like you would a GIF, but in an animated PNG format instead. That might be more useful depending on your use case.

Feel free to try out the animated PNG feature, and hopefully it helps with your workflows and the assets you’re exporting from Figma. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Best Figma plugins for secure design sharing
description: The best Figma plugins for secure design sharing when access control and stakeholder review both matter.
datePublished: 2025-09-07T00:00:00.000Z
dateModified: 2025-09-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-secure-design-sharing/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-secure-design-sharing.md
---

# Best Figma plugins for secure design sharing

The best Figma plugins for secure design sharing when access control and stakeholder review both matter. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Crypto

[Crypto](/crypto/) is one of the more useful tools in this workflow. Crypto matters here because design sharing is not always public or lightweight. When security, password protection, or controlled access matters, a normal share link often is not enough.

### Commentful

[Commentful](/commentful/) is one of the more useful tools in this workflow. Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Password Protect Figma
description: Protect sensitive Figma work with Crypto’s password-protected links and encrypted storage.
datePublished: 2025-09-07T00:00:00.000Z
dateModified: 2025-09-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-password-protect-figma/
markdownUrl: https://www.hypermatic.com/articles/crypto-password-protect-figma.md
---

# Password Protect Figma

When leadership asks "Can we password-protect this Figma file?", the answer is Crypto. The plugin encrypts your selection, generates a unique link, and enforces any password policy you need.

### Beyond basic passwords
You can require multi-factor access, limit downloads, and automatically expire links after a review window. Crypto also lets you update or revoke access instantly if something changes.

### Implementation steps
1. Select the frames or prototype.
2. Publish through Crypto, set a strong password, and define any additional restrictions.
3. Share the link and monitor usage via the Crypto dashboard.

Password protection doesn’t need to be awkward—Crypto makes it feel native to Figma.

### Communicate clearly
Include password instructions within the Crypto link invite so stakeholders know why the extra step exists. When they see the audit logs and watermarks, they’ll understand that security is part of your process, not an afterthought.

### Rotate regularly
Set calendar reminders to refresh passwords throughout the project lifecycle. Crypto makes this painless: update the link, notify recipients, and keep building. No more relying on a single password that lingers for months.

---

---
type: article
title: Figma Marketing Email Workflow
description: Build a streamlined marketing email workflow in Figma by pairing your design system with Emailify.
datePublished: 2025-09-03T00:00:00.000Z
dateModified: 2025-09-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-figma-marketing-email-workflow/
markdownUrl: https://www.hypermatic.com/articles/emailify-figma-marketing-email-workflow.md
---

# Figma Marketing Email Workflow

Marketing emails are never “one and done.” They evolve through copy changes, localization, new offers, and QA. Emailify keeps that whole workflow housed inside Figma so no one is juggling five different tools.

### Plan
Start with a shared page of approved modules. Copywriters draft content directly in Figma or link in via CopyDoc. Designers assemble the story using Emailify components.

### Build
Animate hover states, add personalized sections, and preview how the email collapses on mobile. Emailify handles the responsive HTML and inline CSS—no extra dev work.

### Ship
Export directly to your ESP or grab a pre-tested HTML package. Share the hosted preview link for approvals, then send test emails through Emailify to make sure everything tracks in Gmail, Outlook, and mobile clients.

That’s my entire marketing email workflow condensed into a single plugin.

### Measure and iterate
Track which modules get the most conversions and record those insights on the template page. Next campaign, start with the proven pieces and tweak from there. Because Emailify exports consistent code, A/B tests focus on messaging rather than fixing markup issues.

### Collaboration checklist
- Hold weekly syncs where marketing, design, and CRM review the Emailify file together.
- Keep a “parking lot” page in Figma for upcoming ideas so nothing clutters live templates.
- Store ESP-specific notes (merge tags, quirks) alongside the components so designers never guess.

With Emailify, your marketing email workflow finally feels like a modern production line instead of a scramble.

---

---
type: article
title: Figma to Sketch Converter
description: Convertify converts Figma files to Sketch so partners on legacy workflows can keep iterating.
datePublished: 2025-08-31T00:00:00.000Z
dateModified: 2025-08-31T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-figma-to-sketch-converter/
markdownUrl: https://www.hypermatic.com/articles/convertify-figma-to-sketch-converter.md
---

# Figma to Sketch Converter

Some teams haven’t migrated off Sketch yet, and that’s okay. Convertify keeps collaboration possible by exporting Figma frames straight into .sketch files. Components become symbols, text styles stay mapped, and layout grids survive the trip.

### Respecting both ecosystems
Instead of forcing anyone to change tools, Convertify lets you meet them where they are. The exported Sketch file feels native, so they can continue maintaining their system while you stay in Figma.

### Export habits that help
1. Keep your Figma library tidy so symbols translate cleanly.
2. Include a cover page in the export that documents components and usage tips.
3. When possible, share the original Figma link alongside the Sketch export so folks can cross-reference.

This workflow removes a major blocker for cross-company collaboration.

### Iterate side by side
When partners send updated Sketch files back, you can import them into Figma via Convertify as well. That two-way bridge keeps both teams aligned even if their tooling choices differ. Nobody feels left behind, and your shared design system stays cohesive.

### Ideal for
- Agencies collaborating with corporate teams locked into Sketch
- Vendor handoffs where procurement mandates Sketch deliverables
- Transition periods when only part of the org has moved to Figma

Convertify makes multi-tool collaboration feel intentional rather than painful.

---

---
type: article
title: Export Figma to Google Slides
description: Pitchdeck turns your Figma deck into a fully editable Google Slides presentation in a few clicks.
datePublished: 2025-08-28T00:00:00.000Z
dateModified: 2025-08-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-export-figma-to-google-slides/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-export-figma-to-google-slides.md
---

# Export Figma to Google Slides

I build every deck in Figma, but stakeholders still want Google Slides for collaboration. Pitchdeck handles the conversion without flattening everything into images. Text stays editable, images remain linked, and slide layouts map perfectly to what you designed.

### Why it beats manual exports
Instead of exporting PNGs and rebuilding slides, Pitchdeck reads the Figma frames, packages each one into a Slides-friendly format, and preserves speaker notes along the way. The result uploads directly to Google Drive and behaves like any native deck.

### Workflow I follow
1. Design the presentation in Figma using components for repeated modules.
2. Launch Pitchdeck, select Google Slides as the destination, and configure fonts + backgrounds.
3. Download the .pptx or use the Google Slides export option to create the deck instantly in your Drive.

Handing off decks has never been faster.

### Keep iterations tidy
When stakeholders request changes, update the Figma source and rerun Pitchdeck. Because the conversion respects slide order and master layouts, Google Slides stays perfectly in sync without manual rebuilds. Share revision notes in the Slides comments so everyone sees context.

### Collaboration tip
Store both the Figma file and the generated Slides link in the same project hub (Notion, Confluence) so the team always knows where to access editable versions versus design polish references.

---

---
type: article
title: Google Web Designer Alternative
description: Why Bannerify is my Google Web Designer alternative inside Figma, plus the criteria I use when picking a replacement.
datePublished: 2025-08-27T00:00:00.000Z
dateModified: 2025-08-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-google-web-designer-alternative/
markdownUrl: https://www.hypermatic.com/articles/bannerify-google-web-designer-alternative.md
---

# Google Web Designer Alternative

Whenever someone asks for a Google Web Designer alternative, I point them to Bannerify. Google Web Designer is a powerful standalone tool, but it expects you to rebuild layouts outside Figma, manage timelines in a separate interface, and juggle exports manually. Bannerify keeps everything in the file the team already uses, so designers, copywriters, and reviewers stay in sync while still shipping HTML5, GIF, MP4, and WebM banners that meet ad-network specs.

### Features I need from a Google Web Designer alternative
- Direct Figma integration so layouts, components, and comments remain the source of truth
- Multi-format exports (HTML5, GIF, MP4, WebM, GSAP) with polite loading and clickTags baked in
- Hosted previews for stakeholders plus automation hooks for sharing zips with media teams
- Consistent file-size reporting so QA and trafficking teams trust every package

### Why Bannerify wins in daily production
Bannerify reads directly from my Figma components, so I duplicate frames for new sizes without rebuilding anything. Animations stay editable in the same timeline, and when the media team adds more placements, I update the preset and export again. Zapier integrations ship zips to Google Drive or Slack automatically, which keeps automation parity with what we previously scripted in Google Web Designer—minus the extra maintenance.

### When Google Web Designer still makes sense
If your campaign needs heavy 3D transforms, custom JavaScript, or bespoke WebGL experiences, Google Web Designer can still be handy. For everything else—performance ads, localized offers, CRM banners—Bannerify’s Figma-native workflow is faster. You design once, preview in context, and export full packages without hopping between apps.

### Put both tools through a real brief
When deciding between Bannerify and Google Web Designer, I run the same brief through each: multiple hero sizes, localization, strict weight limits, and a 24-hour turnaround. Bannerify finishes first because it reuses my Figma components and lets me keep comments, translations, and approvals in one place. Google Web Designer requires exporting assets, rebuilding timelines, and managing another file type—extra work that rarely adds value unless the brief truly demands it.

### Downstream impact matters
Your alternative choice touches media buyers, developers, analytics teams, and legal reviewers. Bannerify’s exports include manifests, clickTag documentation, and hosted previews, so everyone gets the context they need without reading a separate spec. Google Web Designer can deliver similar files, but only after you configure each project manually. When speed and predictability matter, sticking with the tool that lives in Figma is the better bet.

For my workflow, Bannerify isn’t just an alternative to Google Web Designer—it’s the upgrade that lets the entire team stay productive.

---

---
type: article
title: Reduce Figma Export File Size
description: Use TinyImage to shrink Figma export file sizes without sacrificing sharpness.
datePublished: 2025-08-22T00:00:00.000Z
dateModified: 2025-08-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-reduce-figma-export-file-size/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-reduce-figma-export-file-size.md
---

# Reduce Figma Export File Size

Oversized exports slow everything down—from email attachments to CMS uploads. TinyImage gives you precise control over file size so you can hit performance targets without destroying the visuals.

### File size targets
Set an exact kilobyte target, and TinyImage will dial in the compression automatically. You can preview the result and tweak the threshold if needed. It’s great for ad networks or CMS platforms that enforce strict limits.

### Smart optimization
TinyImage applies techniques like chroma subsampling, palette reduction, and WebP conversion depending on the format. You don’t have to know the technical details—it just delivers smaller files.

### File size workflow
1. Export the assets you need.
2. Drop them into TinyImage or run the plugin on the layers directly.
3. Enter your target file size and export the optimized versions.

Deadlines stay intact and performance budgets stay happy.

---

---
type: article
title: Best Figma plugins for content operations
description: The best Figma plugins for content operations when teams need copy updates, reviews, and content QA at scale.
datePublished: 2025-08-20T00:00:00.000Z
dateModified: 2025-08-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-content-operations/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-content-operations.md
---

# Best Figma plugins for content operations

The best Figma plugins for content operations when teams need copy updates, reviews, and content QA at scale. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### CopyDoc

[CopyDoc](/copydoc/) is one of the more useful tools in this workflow. CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

### Commentful

[Commentful](/commentful/) is one of the more useful tools in this workflow. Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Collect Design Feedback
description: Collect organized design feedback from any stakeholder using Commentful’s password-protected boards.
datePublished: 2025-08-20T00:00:00.000Z
dateModified: 2025-08-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-collect-design-feedback/
markdownUrl: https://www.hypermatic.com/articles/commentful-collect-design-feedback.md
---

# Collect Design Feedback

Collecting feedback is easy; collecting useful feedback is the hard part. Commentful gives designers a structured way to invite stakeholders, capture their notes, and track every edit through to completion without leaving Figma.

### Keep reviewers focused
Share a Commentful link that shows the exact frames or prototypes you want feedback on, nothing more. Reviewers can leave annotations directly on the work, attach files if needed, and even record approvals. Because the experience is curated, people stay on-topic.

### Follow-up becomes a workflow
Each note lives on a board with statuses like "New," "In progress," or "Ready for review." Assign owners, tag teammates, and let Commentful remind everyone what still needs attention. It beats combing through Slack history any day.

### A reliable loop for every sprint
1. Select the frames that need review and publish them through Commentful.
2. Invite stakeholders (clients, PMs, legal, whoever) using access-controlled links.
3. Work through the board until every card is resolved, then archive the round for your records.

Collecting design feedback should be structured, transparent, and fast. Commentful checks all three boxes.

### Close the feedback loop
Commentful stores resolved items so you can retrace conversations later. Tag decisions with categories (content, interaction, accessibility) and export the log when stakeholders ask why a change happened. That running history is invaluable during retros or when onboarding new teammates mid-project.

### Suggestions for better reviews
- Batch feedback rounds by topic (visual polish vs. UX) to prevent conflicting requests.
- Encourage stakeholders to attach screenshots or docs; Commentful keeps them linked to the original note.
- Use due dates on cards so reviewers see when their input is needed, keeping projects on schedule.

Once you experience structured review cycles, it is hard to go back to scattered comments. Commentful makes “collecting feedback” feel like a repeatable, team-friendly routine.

---

---
type: article
title: Favicon for Progressive Web App
description: Generate PWA-ready icons and manifests in Figma using Favvy.
datePublished: 2025-08-18T00:00:00.000Z
dateModified: 2025-08-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-favicon-for-progressive-web-app/
markdownUrl: https://www.hypermatic.com/articles/favvy-favicon-for-progressive-web-app.md
---

# Favicon for Progressive Web App

Progressive Web Apps need more than a single favicon—they require a full icon set plus a manifest that defines names, colors, and sizes. Favvy handles all of that inside Figma. I design the base icon, run Favvy’s PWA preset, and export a package that drops straight into the web repo.

### All required sizes covered
Favvy outputs launcher icons, splash screen assets, maskable versions, and the standard favicon sizes in one go. It also generates `manifest.json` with the correct references, so developers don’t have to guess file paths.

### Keep branding tight
Because I’m working in Figma, I can align the PWA icons with the rest of our design system. Favvy applies padding, background colors, and radius adjustments consistently across the entire set.

### Shipping a PWA icon set
1. Design the icon at a large resolution.
2. Launch Favvy, select the PWA option, and tweak metadata (app name, theme color, etc.).
3. Download the zip and hand it to engineering—they get icons plus manifest ready to deploy.

It’s the fastest way I’ve found to get PWA requirements checked off the launch list.

### Bonus coverage
Favvy also produces maskable icons, which Android requires for the best-looking homescreen shortcuts. Many teams forget about this until QA flags it; with Favvy’s preset you never miss it.

### Tips for collaboration
- Store the exported manifest alongside your design tokens so developers can compare theme colors easily.
- Annotate the Figma frame with instructions for when to rerun the preset (e.g., after seasonal color swaps).
- Use Favvy’s naming options to match your build pipeline without manual renaming.

PWA icon work stops being a chore once Favvy handles the heavy lifting.

---

---
type: article
title: Design to Code Tool
description: Weblify turns Figma designs into clean HTML, CSS, and component code without manual redlines.
datePublished: 2025-08-16T00:00:00.000Z
dateModified: 2025-08-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-design-to-code-tool/
markdownUrl: https://www.hypermatic.com/articles/weblify-design-to-code-tool.md
---

# Design to Code Tool

Design-to-code promises are everywhere, but Weblify actually delivers by sitting inside Figma. Select your frames, open the plugin, and it generates production-friendly HTML/CSS, React, Vue, or Tailwind snippets based on your design system tokens.

### Built for real teams
Weblify respects your layer structure, typography, color tokens, and auto layout rules. It outputs semantic markup with flexbox, CSS variables, and BEM or utility classes—whatever your team prefers. Developers get a head start instead of starting from a blank file.

### Feedback loop stays short
Because everything happens in Figma, designers and engineers can iterate together. Tweak spacing, rerun Weblify, and share the updated snippet immediately. No need to rewrite an entire handoff doc.

### Design-to-code workflow
1. Design using your existing components.
2. Highlight the sections you want code for and run Weblify.
3. Share the generated snippets via Git, Slack, or your documentation to keep engineers moving.

It’s the design-to-code bridge we’ve been wanting since Figma launched.

### Governance idea
Create a shared Git repo where Weblify exports live alongside component documentation. Engineers can submit pull requests with tweaks, and designers can rerun Weblify when a component evolves. That keeps your code and Figma library in lockstep.

---

---
type: article
title: Figma HTML5 Banner Exporter
description: Export HTML5 banners directly from Figma using Bannerify—no extra dev work required.
datePublished: 2025-08-15T00:00:00.000Z
dateModified: 2025-08-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-figma-html5-banner-exporter/
markdownUrl: https://www.hypermatic.com/articles/bannerify-figma-html5-banner-exporter.md
---

# Figma HTML5 Banner Exporter

Exporting HTML5 banners used to mean throwing design files over the fence to a developer. Bannerify removes that step. I animate everything in Figma, and the plugin outputs clean HTML, CSS, and JS bundles ready for Google Ads, DV360, AdForm, or a custom ad server.

### Pixel-perfect to production-ready
Bannerify keeps the layout true to the Figma design because it is literally using those layers. You control which assets become images versus CSS, define animation sequences, and the plugin wires up clickTags plus polite-loading scripts automatically.

### Compliance without guesswork
Ad platforms are strict about file sizes, asset naming, and manifest files. Bannerify handles those details, spits out a zipped package, and gives you a preview URL so stakeholders can approve everything before uploading. If specs change, update the design and re-export—no custom code edits.

### Typical export flow
1. Animate the banner inside Bannerify until it matches your storyboard.
2. Choose the HTML5 export format that aligns with your ad network.
3. Upload the provided zip file directly to the platform; it already contains the required manifests and clickTags.

The difference in speed is massive. Bannerify turns Figma into the HTML5 exporter we always wanted.

### Advanced controls when you need them
Need GSAP timelines or custom code hooks? Bannerify can inject them during export so developers can extend the animation with bespoke interactions. You can also add audio tracks, sprite sheets, and high-DPI assets without leaving the plugin. Everything stays organized inside the exported bundle, which keeps QA teams happy.

### Keep audits simple
Because Bannerify logs export settings, you always know which version shipped, which easing curves you used, and whether polite loading was enabled. That transparency helps when a partner requests proof of specs or when you need to replicate a winning campaign months later. No more digging through old email threads to reconstruct how a banner was built.

If “HTML5 banner exporter” means juggling extra software, it is time to streamline. Bannerify lets the Figma file become the source of truth from storyboards to final code.

---

---
type: article
title: Favicon Generator
description: Favvy is the favicon generator that lets you stay inside Figma from design to download.
datePublished: 2025-08-14T00:00:00.000Z
dateModified: 2025-08-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-favicon-generator/
markdownUrl: https://www.hypermatic.com/articles/favvy-favicon-generator.md
---

# Favicon Generator

Online favicon generators are fine for quick experiments, but real projects need control over padding, naming, and metadata. Favvy gives you all of that inside Figma. Select your icon, open the plugin, and it will render every required size along with the supporting HTML tags.

### Consistency matters
Favvy applies the same rounding, background color, and safe-area settings across the entire set. That keeps your favicon looking sharp on browser tabs, iOS home screens, Android launchers, and Windows tiles.

### Outputs you actually need
Beyond the `.ico` file, Favvy exports PNGs for each platform, maskable icons, and optional SVGs for pinned tabs. It even writes the `<link>` tags so developers can paste them into the site head.

### Generator steps
1. Design the icon as a square frame in Figma.
2. Run Favvy, review the previews, and adjust padding or background options.
3. Download the zip and drop the provided code snippet into your site repo.

It’s everything you need from a favicon generator—without leaving the file you’re already designing.

### Keep stakeholders aligned
Share Favvy’s preview grid with brand or product managers so they can sign off on how the icon appears on different devices. Once approved, export the package and log the decision for future refreshes.

### Maintenance tip
When your brand updates colors or logos, rerun Favvy and commit the new package to your repo with a clear message. Engineers know exactly what changed, and your sites stay consistent across releases.

---

---
type: article
title: Figma Bulk Text Update
description: Run bulk text updates in Figma with CopyDoc instead of manually editing hundreds of layers.
datePublished: 2025-08-12T00:00:00.000Z
dateModified: 2025-08-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-bulk-text-update/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-bulk-text-update.md
---

# Figma Bulk Text Update

Nothing derails a launch quite like a last-minute copy deck. CopyDoc is my go-to for bulk text updates because it respects the existing layout and applies changes intelligently.

### Structured imports
Drop in a CSV, JSON, Google Sheet, or DOCX export, map each column to the correct layers, and CopyDoc will highlight differences before replacing anything. That preview step has saved me countless mistakes.

### Versioning made simple
Need to revert? CopyDoc keeps snapshots of previous imports so you can roll back if a stakeholder changes their mind. You can also export the current state back into a spreadsheet for review.

### Bulk update workflow
1. Prep the copy deck with unique IDs or layer names.
2. Import through CopyDoc and review the diff view.
3. Apply changes in bulk and keep designing—no copy/paste marathons required.

It is the safety net every content-heavy project deserves.

### Keep teams aligned
Tag each import with a short note (“Pricing round 3” or “Legal update 5/12”) so reviewers know exactly which revision they’re looking at. CopyDoc stores that description, making it easy to track how many times content changed and why.

### Use cases
- Multi-language product launches
- CRM flows with dozens of variants
- Marketing sites where pricing or legal text changes weekly

CopyDoc turns “bulk text update” from a stress phrase into a one-click ritual.

---

---
type: article
title: Weblify vs Zeplin
description: How Weblify compares to Zeplin when your team wants real code, not just specs.
datePublished: 2025-08-11T00:00:00.000Z
dateModified: 2025-08-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-weblify-vs-zeplin/
markdownUrl: https://www.hypermatic.com/articles/weblify-weblify-vs-zeplin.md
---

# Weblify vs Zeplin

Zeplin popularized structured handoffs, but it focuses on specs and asset management. Weblify goes further by generating actual code snippets that reflect your design system. If your team wants to reduce implementation time, that difference matters.

### Specs vs code
Zeplin provides measurements and style guides. Weblify provides ready-to-use HTML/CSS/React/Vue/Tailwind output. Developers still appreciate Zeplin’s organization, but they finish work faster when they receive code.

### Integrating Weblify into handoffs
Weblify runs directly inside Figma—no exporting or syncing to another cloud workspace. Designers stay in their file, engineers get code, and updates happen faster.

### Hybrid approach
Many teams keep Zeplin for large documentation efforts but use Weblify for fast-moving squads that need code every sprint. If I had to choose one for speed, Weblify wins because it closes the last mile between design and implementation.

### Tip for coexistence
Use Zeplin as the style bible and Weblify as the code generator. Link Weblify snippets inside Zeplin projects so engineers can jump straight from specs to production-ready code.

---

---
type: article
title: Figma Content Library
description: Build a reusable Figma content library by storing snippets and variants inside CopyDoc.
datePublished: 2025-08-08T00:00:00.000Z
dateModified: 2025-08-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-content-library/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-content-library.md
---

# Figma Content Library

CopyDoc doubles as a content library. I store headlines, CTAs, disclaimers, and localized snippets right inside the plugin so designers can drag-and-drop approved text into any file.

### Organize by project or channel
Create folders for product surfaces, lifecycle emails, ads—whatever fits your workflow. Each snippet can include metadata (language, tone, status) so teams know when it’s appropriate to use.

### Sync with external docs
You can import snippets from CSV/JSON/Google Sheets and update them in place. CopyDoc keeps everything in sync, so when marketing changes a CTA globally, you update the snippet once and roll it out everywhere.

### Daily usage
1. Save frequently used text blocks as snippets within CopyDoc.
2. Tag them for quick searching (e.g., “checkout,” “upsell,” “legal”).
3. Insert them into Figma when building new flows, ensuring consistency from day one.

It’s a lightweight CMS tailored for designers who live in Figma.

### Governance made simple
Because CopyDoc maintains version history for each snippet, you can audit when language was approved or retired. That traceability helps marketing and legal sleep better at night while giving designers confidence they’re using the latest copy.

### Tips for adoption
- Host a short training for copywriters so they can contribute directly to the library.
- Use naming conventions like `Surface:Variant:Locale` to keep snippets tidy.
- Schedule quarterly cleanups to archive outdated messaging and highlight top performers.

Once the content library lives in CopyDoc, every new project starts with trustworthy building blocks.

---

---
type: article
title: Figma Developer Handoff
description: Weblify upgrades developer handoff by giving engineers real code, not just redlines.
datePublished: 2025-08-07T00:00:00.000Z
dateModified: 2025-08-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-developer-handoff/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-developer-handoff.md
---

# Figma Developer Handoff

Handoff shouldn’t mean spreadsheets of measurements. Weblify sits inside Figma and lets designers export HTML/CSS/React snippets that match the mock exactly. Engineers get a concrete starting point, and designers spend less time writing documentation.

### Reduce ambiguity
Weblify captures layout intent, spacing, fonts, and interactions. Engineers can inspect the generated preview, tweak as needed, and know they’re building the approved version. It cuts down on back-and-forth conversations about basic implementation details.

### Integrate with your workflow
Attach the Weblify snippet to tickets, share it in Slack, or paste it into your docs. Every snippet references the originating Figma frame, so anyone can trace it back.

### Handoff routine
1. Finalize the design and mark the sections ready for build.
2. Generate code snippets via Weblify.
3. Deliver them alongside the Figma link so engineers have both design context and code.

It’s the modern interpretation of “handoff” we’ve needed for years.

### Track changes
When design updates happen mid-sprint, rerun Weblify and note the new snippet version in your ticket. Engineers can diff the generated code to see exactly what changed, which reduces confusion and rework.

---

---
type: article
title: Bannerify vs Google Web Designer
description: A designer’s take on Bannerify vs Google Web Designer for shipping HTML5 campaigns straight from Figma.
datePublished: 2025-08-06T00:00:00.000Z
dateModified: 2025-08-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-bannerify-vs-google-web-designer/
markdownUrl: https://www.hypermatic.com/articles/bannerify-bannerify-vs-google-web-designer.md
---

# Bannerify vs Google Web Designer

Google Web Designer is powerful, but it expects you to learn another interface and rebuild your layout from scratch. Bannerify keeps everything inside Figma, which means we stay close to our design system, components, and collaboration workflows. When deadlines are tight, not switching tools is the difference between making the media flight or missing it.

### Design where the team already works
With Bannerify, the actual design lives in Figma—the place where stakeholders comment, content updates happen, and localization runs. Google Web Designer requires importing assets or recreating layouts manually. Every translation or tweak becomes a round-trip, and someone inevitably edits the wrong version.

### Production-ready exports without extra scripting
Bannerify exports HTML5 bundles (with clickTags ready to go), GIFs, MP4, and WebM videos, plus packages for Google Ads, DV360, AdForm, or Sizmek. Google Web Designer can do the same, but it expects you to manage the timeline and elements inside its own canvas. Bannerify lets me translate animation instructions into keyframes on top of my actual Figma layers.

### When to use each
If you need advanced 3D transforms or custom scripting, Google Web Designer still offers depth. But for most campaign work, Bannerify wins because it keeps the workflow consolidated. Try animating one frame in Bannerify, link it to your component library, and export every size at once—you’ll see how much overhead disappears.

### Collaboration and versioning
Figma already acts as our single source of truth. Bannerify leverages that by keeping comments, branches, and design tokens tied to the motion work. Google Web Designer lives off to the side, so you end up with parallel versions of the same creative floating around. When legal requests a tweak or localization needs another translation, it’s much faster to edit the Figma file everyone already understands than to re-open a separate project file.

### QA, approvals, and analytics
Bannerify’s hosted previews integrate with Slack and email so reviews happen in hours, not days. Google Web Designer requires exporting and hosting files elsewhere before stakeholders can see motion. Once live, Bannerify’s exports log clickTag usage and provide weight reports—small details that prevent rejections from ad networks. These touches may seem minor, but they compound into real time savings each quarter.

Ultimately the comparison boils down to control versus overhead. Bannerify lets you maintain control inside the environment you already love, while Google Web Designer asks you to maintain another toolchain. I know which option lets me ship faster.

---

---
type: tutorial
title: Export PowerPoint files with MP4 video embeds from Figma using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-08-05T00:00:00.000Z
dateModified: 2025-08-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/export-powerpoint-pptx-files-with-mp4-video-embeds-from-figma-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/export-powerpoint-pptx-files-with-mp4-video-embeds-from-figma-using-pitchdeck.md
---

# Export PowerPoint files with MP4 video embeds from Figma using Pitchdeck

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export a PowerPoint file from Figma with a video player MP4 embed using the Pitchdeck Presentation Studio Figma plugin.

To get started, all we need to do is go to our Figma file and just click on this little actions icon down the bottom here. What you want to do is search for Pitchdeck.

Under the plugins tab, if you click on the Pitchdeck item, you can run the Figma plugin by either clicking on this run button down here, or I'd recommend clicking on the save icon right next to it, which will save the Figma plugin to your Figma plugins list for easy access later. I've already done that.

I'm going to go back to my Figma canvas, just right click anywhere, go down to plugins, then go down to saved plugins, and then click on the Pitchdeck item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the plugin, the way that it works is it basically takes any Figma frames in your Figma file and treats those as slides in the Figma plugin, with any child layers in each slide as an individual layer that you can add animations and video embeds and links and things like that on.

For today, I'm just going to be showing you how to embed an MP4 video and export that to a PowerPoint file and be able to play that video in your PowerPoint file directly.

The first thing we need to do is set a thumbnail. This is going to basically be the static thumbnail image that's going to sit behind the play button in PowerPoint. I've basically just taken a thumbnail from this trailer over here. I've got this Dieter Rams documentary trailer. I've basically just taken a snapshot of this image here and I've added that to my Figma file as a regular image layer. Importantly, I've matched the aspect ratio of the image to the aspect ratio of the original video as well, just to make sure that all that matches up.

Now that we've got our video thumbnail, what we need to do is duplicate that. I'm literally just going to copy paste this layer here, and I'm going to rename this to "video embed." We've got our thumbnail and we've got our embed. I'm just going to change the fill for that embed to something solid so we know which one's which.

I'm just going to change this over here. You can make this whatever you want. This isn't actually going to show up in the PowerPoint file. This is going to get replaced with a video play button, and all you're going to see is a play button in PowerPoint. Your video thumbnail is going to be sitting behind that play button, but we need a placeholder layer here which is going to embed the video.

You can actually just make that something a bit transparent. You can do a semi-transparent sort of layer instead, but really it's just a placeholder.

Once you've added that video embed placeholder, I'm just going to refresh the layers over here by clicking on the refresh button. You can now see we've got these two layers here. We've got a video embed layer and a video thumbnail layer.

Just to make that a bit easier, I'm going to remove the prefix. I'm going to call this one "video" and I'm going to call this one "thumbnail," just so we've got a bit more of an easy-to-access label over here. We've got our thumbnail layer and our video layer sitting underneath it.

Now all we need to do is upload our MP4 file somewhere. I'd recommend using something like Dropbox. If you just go to dropbox.com and create a free account there, you'll be able to drag and drop your MP4 video file directly into Dropbox. That's just going to upload the video file into your Dropbox folder and allow you to copy a link to that file directly.

I'm going to click on this copy link button over here, and that's going to generate a link for me directly to that MP4 file in Dropbox and copy it to my clipboard. I've just got that link copied now to my clipboard.

I'm going to go back to the Figma plugin. This time, we're going to find the video layer. This is basically the placeholder layer we just created on top of the thumbnail. We're going to paste that URL from Dropbox directly into there.

Once that loads up, you should see the video. You can see it playing back here as a little bit of a preview, and that's looking really good.

Now that we've got that added in, I'm going to go to the export menu. We're going to go to the top right-hand side of the Figma plugin, click on this blue export button up here, and then we want to change the default presentation option from the web URL.

This format basically uploads a sharable web presentation that you can view in the browser and share that link with anyone. But for today, because we're going to be focusing on PowerPoint specifically, we're going to open up that export format dropdown box, go down to presentation apps, and click on the PowerPoint option.

Now we want to change one of the settings for our PowerPoint slides options. This option down here called "Include MP4 video URL embeds," which is currently off by default. If you leave that off, it'll basically just export this layer here as a static image, and you won't have the actual underlying video embed included. It'll just be a static image.

If you do want to include any URL embeds that you've added pointing directly to an MP4 file, like the one we just added, you can enable that toggle before you export your PowerPoint file.

Then you just want to click on "Export for PowerPoint." That's going to loop through each of the frames or slides inside of your Figma file. It's going to export all of the text as editable text. It's going to export each of the images in all of your frames. It's also going to download that entire video that you've just included and embed that directly inside of your PowerPoint file.

The video is actually going to be included in the PPTX file, and it's not going to have to get downloaded again by PowerPoint or anything like that. As we'll see, it's included directly in the file.

Once that's exported, you just want to click on the "Download your PPTX file" button here and save that to your computer. I'm going to save that to my desktop. All you need to do to open that is just double click on the file.

If you've got the Microsoft PowerPoint app installed, which supports the MP4 video embeds, go to your second slide or whichever slide you've added your video embed on. You'll now see that we've got this play button. This is something that PowerPoint adds automatically. It's this play overlay button.

You can see that it's basically taking the underlying thumbnail that we added here and adding that into the PowerPoint file. If we go back to our PowerPoint file over here, you can see that it's adding that in.

We can see that by the way this gets dragged and dropped. If you drag and drop that video overlay, you can see that it's got a slight transparent tint on it at the moment. This is basically the underlying thumbnail that we added.

Now, if we play that video, click on the play button down here, that's actually going to play the video directly in our PowerPoint file.

This is totally native to the Microsoft PowerPoint desktop app. This is something that it natively supports, and this is the easiest way to get your video embed from the Figma presentation that we added over here from the Dropbox MP4 file and export that directly out to this PowerPoint file.

I believe you can do some more modifications if you want to right-click on the video tag. You can do things like edit alt text or format the video itself. You can increase the brightness or darkness of the video. You can update things like the shape and solid lines and things like that.

For today, I'm just going to be leaving it as is. I kind of like it with the semi-transparent overlay. I think that's actually really nice. It's basically replicating the similar effect that we did over here when we added our little placeholder.

You may want to figure out what that looks like if you really want to get an accurate version of what that overlay transparency is. But at the end of the day, it doesn't really matter because that's something that PowerPoint just handles anyway.

This is again just a totally empty placeholder layer, and the only image that gets included is the one that you position directly underneath it there.

This is a purely native way of doing this. Just be mindful that this is only supported in the Microsoft PowerPoint app. It's not supported in Google Slides, and it's not supported in Keynote at the moment.

Just make sure you're exporting this specifically to be used in Microsoft PowerPoint. Otherwise, the video embed itself probably isn't going to work in many other different applications as well.

That's basically it. I hope that's helpful. If you've been wondering how to get embedded MP4 videos into your PowerPoint files, if you're designing your slides in Figma, using the Pitchdeck presentation Figma plugin is a really easy way to go about it.

You can upload your MP4 video file to something like Dropbox or another file hosting service of your choice.

The last thing I'll mention is again just to make sure that the aspect ratio matches up with your original video. Unfortunately, PowerPoint doesn't support cropping or covering.

For example, if I was to resize this video layer over here and take off the aspect ratio and resize that down to a square, essentially the video would get compressed down to this little inner size. The aspect ratio itself would stay the same. It would look something like this.

If we scale that down as an aspect ratio, the output in PowerPoint would actually look like that. If you're using a layer that's square and the video is in this aspect ratio, it's going to look something like that. The video is going to be contained within that larger Figma size when you go to export that to PowerPoint.

That's just a really small reminder to make sure that if you're exporting the videos for the PowerPoint format, you want to make sure that the aspect ratio of the embed—or the video layer in this case that we've named—matches up exactly with the aspect ratio of the original video, just to make sure there's no size differences.

It's worth being mindful that this only applies to the PowerPoint format. If you're using the web presentation format, you can size them differently and you can have a weird aspect ratio like this, and the video will cover the video. It will actually do something like that instead of containing it like this.

Because we're focusing on the PowerPoint files at the moment, I just wanted to flag that in case you were getting confused by using a different aspect ratio. That's going to be the reason why—PowerPoint just sadly doesn't support doing a fill-type cover for their video embeds.

I'll leave it there for today. Hopefully that's helpful and a quick way to get your MP4 videos out of Figma into a PowerPoint file that you can then play back inside of your PowerPoint presentations in a native way.

Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: Self-hosting your Figma presentation on a custom domain using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-08-04T00:00:00.000Z
dateModified: 2025-08-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/self-host-figma-presentation-embed-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/self-host-figma-presentation-embed-using-pitchdeck.md
---

# Self-hosting your Figma presentation on a custom domain using Pitchdeck

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your web presentations from the Pitchdeck Figma plugin to a custom HTML file that you can then host on your own server or custom domain name.

To get started, all we're going to do is open up our Figma file, go down to the little actions icon down the bottom here, and if you click on that and search for Pitchdeck, and under the Plugins tab, if you click on the Pitchdeck item, you can either run the Figma plugin by clicking on this little save icon down here, or you can click on this run button here to run the Figma plugin right away.

I've already clicked on the save icon, which is why it says "remove" there. If you just click on save, you'll be able to then go to your Figma canvas, just right-click anywhere, go down to Plugins > Saved plugins, and click on the Pitchdeck item. And that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically takes any frames in your Figma page and treats those as slides. And you can see it's automatically loading those in. And we've just got some simple text and image layers in there. And I've already preset some animations onto those slide layers. But you can also do things like embed videos and iframes and all those sorts of things that you'll get some more idea of if you click on this documentation link here.

And you can also do things like link to website URLs or link to other slides. And that's going to be exported as a web presentation, which we're going to be looking at today.

To export the presentation when you're happy with it, all you need to do is click on this little blue export button in the Figma plugin. I'm going to click on that now.

Just make sure that the presentation export format is set to Pitchdeck presentation web URL. You can also export it to things like PowerPoint files or a PDF, but today we're going to be looking at the web presentation format, which is going to include all of these animations that we set on the slides.

I'm just going to click on the export button. Make sure that option is selected. You can also customize the login login page if you want to do that. I'm just going to change that to a different pattern. And then what you want to do is just customize these to your liking.

Just in the interest of time, I'm just going to turn off image compression. And then I'm going to click on upload web presentation. And what that's going to do is it's basically going to go through each of the slides in your Figma file here. And it's going to upload those slides to the Pitchdeck web presentation format.

Once that finishes up in a moment, we're going to get a link to view that presentation in our browser without needing a Figma account or anything like that.

Usually when you upload this, as is the case now, it's going to upload that to the Pitchdeck presentation URL and that's going to be on the Hypermatic domain. But if you want to embed that into your own domain, I'm going to show you how to do that in just a second.

You can see that the presentation's just been exported. As I mentioned, you can see that it automatically uploads it to pitchdeck.hypermatic.com. You can just take that right away and you could basically load that up into your browser.

We could just load that up now and that would show the presentation as expected. That's basically good to go if you just want to use the default URL here and that will work just as you'd expect.

However, if you'd prefer to host this presentation on your own domain or host it on your own server somewhere, you can now do that by clicking on this little thing at the bottom that says "Get Embed Code (Self-Hosted)".

If you click on that, it's going to expand this little window here. And you can see it's telling us we can get our self-hosted iframe HTML page code below. This code here is basically that code.

If we take a look at that, I'm just going to copy that to my clipboard and go to the code editor here. And you can see that it's basically populated our HTML page title with the title of our Figma file here. And then it's basically populated this special embed link down here into this script. And that's going to automatically load up the presentation in this HTML file wherever we decide to put it.

The quickest way to grab that is just to click on the "Download HTML File", which I'm going to do here. I'm just going to click on that button and save it to my desktop.

If we open that up, you can see I'm just going to open up a new tab and drag that in. And if we open that up, you can see that the presentation has loaded up.

This is just being loaded from my desktop, but what we really want to do is host this somewhere. In the documentation link down here, if you click on that "Similar Platforms" link, you'll be directed to the Pitchdeck documentation. And there's a few different platforms here just as suggestions for some platforms you might consider dragging and dropping that HTML file to.

I'll just do a couple as a quick example at the moment. If we open up TinyHost, this is one that you can use. For example, I've just created a free account just to show you how it works. All I'm going to do is click on this "Upload File" button here while I'm logged into the TinyHost site. I'm just going to drag and drop the HTML file that we just exported a moment ago into this little drop zone area here.

You can customize that link name if you like. For example, we could call this "dieter-rams-presentation" and that would be my URL there. If you've got the paid plan, you can also add custom domains as well. In this case, I'm just using the free one to show you how it works.

I'm going to click on "Publish Now". And that should be pretty quick because it's just a single HTML file. You can see it's just finished creating that. If I click on this "View Site" button now, that's going to open up a brand new tab.

Because I'm on the free plan, I'm just going to dismiss this suggestion bar. You can see it's got this little bar at the bottom. You can get rid of that if you just upgrade to the paid one. You'll notice that the presentation is loading as expected.

If we grab our password from our Figma plugin here and paste that in, click on "Login", that will automatically load up the presentation as we'd expect. That's looking really good. Again, it's on this different domain now.

As I mentioned, if you want to add a custom domain, you can click on this link "Custom Domain" button. That's just going to ask you to upgrade if you want to do that. You don't have to, obviously. But that's just one option.

As I mentioned, there's a bunch of platforms you can do this for. I've just listed a few here that might be useful. There's another one called Netlify or Netlify Drop. This one allows you to drag and drop a folder.

To show you how this one works, it's basically the same. I'm just going to go to my desktop. Because this one requires a folder, I'm just going to add this one and just call it "presentation". You can call it whatever you like. It doesn't really matter.

I'm just going to drag and drop my index.html file that we downloaded from the Figma plugin into that folder. That's now going to allow me to drag and drop it. I'll show you what happens if I just drop the file. It'll tell me that it wants a folder containing an index.html file.

That's basically why that's being put into a folder. If you just drag and drop that folder with the file in it like this, that will work as expected. It's a bit strange that it doesn't just handle the file on its own, but I guess it's expecting a folder potentially of assets.

In this case, it's just the one file, so that's why it looks like that. That's basically done. I've already got a free Netlify account, which I'd recommend you do. It's automatically taken me to the dashboard in Netlify and it's just deployed that.

If I click on this link here again, we'll get a new link. This one's the Netlify link. You'll notice this one doesn't have a bar at the bottom or anything like that. As I mentioned, all of these services are quite different, so you can pick which one makes sense for you.

In this case, I've used Netlify as the example. Again, we've got this custom URL. With Netlify, you can also add a domain. All you have to do is step two here, which says "Set up a custom domain".

If you already own a domain name or you want to buy a domain, you can do that through here. That will allow you to link up your custom domain to this Netlify site and that will allow you to change this domain here to your own custom domain. That's an extra step that you can do if you want to. It's totally up to you.

All of these services here will give you an option to link up a custom domain name. You can have your own company name or portfolio site name, whatever you like, associated with the custom domain. But yeah, that's basically going to let you do that.

The other thing you can do is enable auto login. If you click on this little toggle here and enable auto login and then re-download your HTML file—just click on that, download it to your desktop again—that means you'll just have to re-upload the file.

For example, you can see here in this previous example, the URL didn't include an auto login parameter. But if we look at our new HTML file that we just downloaded, you'll notice that it's got a token built in, which will automatically log in for you.

If we open up this file here in our browser, it's going to automatically log in for us, and the user doesn't have to put in a password. If you prefer to do that, you can enable the auto login toggle here just by clicking on "Enable Auto Login" before you export your HTML.

Then, if you just re-upload that to your document or your domain, that's going to allow you to automatically log in. If we re-upload that file into here—for example, this is my new one here with the auto login—I'm just re-uploading it, in this case, into my TinyHost site.

I'm just going to click on "Publish", and I'm just going to say "Replace". I'm going to replace this existing URL with the new file, and that's going to automatically re-upload this new index.html file and it's going to let me have that auto login there.

The same is true if you're customizing the theming. For example, if you're changing the login theme and you're changing these kinds of settings here, that's also going to change what the link is—the embed link.

If you are making any changes to the login page customizations, you'll just have to make those changes, hit "Update Presentation", and then re-download the index.html file and just re-upload that to your service, whichever one you decide to use. That's going to let you do that.

We just re-uploaded the passwordless one. I'm just going to click on "View Site", and this should now automatically log us in. As you can see here—again, I'm just going to dismiss this free tier thing—you can update that if you want to get rid of that banner, in this case.

There we go. This is the auto login version, and that's working really nicely as well.

Yeah, that's basically it. I just wanted to run through a couple of examples of how you can self-host the index.html HTML file that you can now download from the Figma plugin. That's going to allow you to automatically host the Pitchdeck web presentation on your own domain or whatever kind of server that you have access to.

Again, if you've got a dev team or a technical team, they're going to be much better placed to help you with this. But yeah, it's pretty simple. It's just a single HTML file. It'll work literally anywhere. You just have to put that on a server somewhere, hook up a custom domain if you'd prefer to do that, and you'll be good to go.

I hope that's helpful. If you've been wondering how to self-host your own Pitchdeck web presentations that you've exported from Figma, this is now available in the Figma plugin. Please feel free to give it a try, and I hope that helps with your presentation workflow.

Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Best Figma plugins for image optimization
description: The best Figma plugins for image optimization when teams need lighter files, cleaner crops, and launch-ready assets.
datePublished: 2025-08-03T00:00:00.000Z
dateModified: 2025-08-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-image-optimization/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-image-optimization.md
---

# Best Figma plugins for image optimization

The best Figma plugins for image optimization when teams need lighter files, cleaner crops, and launch-ready assets. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### TinyImage

[TinyImage](/tinyimage/) is one of the more useful tools in this workflow. TinyImage matters in this workflow because production does not stop at design quality. Teams still need smaller files, cleaner exports, and faster pages. Keeping compression in Figma removes one more manual handoff.

### HyperCrop

[HyperCrop](/hypercrop/) is one of the more useful tools in this workflow. HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

### Favvy

[Favvy](/favvy/) is one of the more useful tools in this workflow. Favvy is useful here because favicon work looks tiny until it becomes a launch checklist item with too many formats and sizes. Turning that into a direct Figma workflow saves time and reduces omissions.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Batch Image Cropper
description: How I use HyperCrop as a reliable batch image cropper when marketing asks for dozens of sizes overnight.
datePublished: 2025-07-31T00:00:00.000Z
dateModified: 2025-07-31T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-batch-image-cropper/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-batch-image-cropper.md
---

# Batch Image Cropper

If you have ever opened a spec sheet for a launch and found twenty column requirements staring back at you, you already know why I keep HyperCrop close. Batch cropping is not fun work, but it is the difference between shipping polished assets and guessing. The plugin gives me the same confidence I used to get from a perfectly configured Photoshop action, except it works on top of the actual Figma frames that everyone else on the project already trusts.

### Batch cropping without the mess
HyperCrop's detection engine reads the contents of each selected frame and keeps important subjects centered while applying whatever padding rules I set in the preset. That means I can duplicate an approved layout, select an entire page worth of imagery, and run a single preset to spit out square, landscape, and portrait versions without flattening or detaching anything.

### Presets that match the real brief
Most batch cropper workflows fall apart because specs change. HyperCrop lets me save presets that literally match the spreadsheet from paid social, marketplace, or merch operations. Adding a new size later is as simple as editing the preset and re-running the batch, so last-minute asks do not derail the schedule.

### Practical checklist when running a big batch
1. Select the final frames or image components in the order you want them exported. It keeps the file naming predictable for downstream teams.
2. Load your preset, double-check the formats (PNG, JPG, WebP) and scaling, then enable smart focal detection so subjects stay in frame.
3. Let HyperCrop export the whole lot, and drop the ready-to-use folder straight into your shared drive or upload it to whatever DAM you are using.

The result is a clean, versioned set of crops without the usual "wait, which one did you use" confusion. HyperCrop is the only batch image cropper I trust when there's a deadline breathing down my neck.

### Keep approvals smooth
Export a low-res preview batch and drop it into Slack or your project tool. Stakeholders can mark any questionable crops before you run the final high-res export. When everything looks good, rerun HyperCrop at the final quality setting and deliver the polished files.

### Scaling tips
- Group presets by channel (paid social, CRM, marketplace) so new teammates know exactly which one to use.
- Version your presets with dates so you can revert if a network changes its spec sheet.
- Chain HyperCrop with TinyImage or automation scripts to compress and rename files before uploading them to your CMS.

---

---
type: tutorial
title: Sync component variants in Figma from a spreadsheet using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-07-30T00:00:00.000Z
dateModified: 2025-07-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/sync-figma-component-variants-from-a-spreadsheet-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/sync-figma-component-variants-from-a-spreadsheet-using-copy-doc.md
---

# Sync component variants in Figma from a spreadsheet using CopyDoc

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to sync component variants in Figma from a spreadsheet using the CopyDoc Figma plugin.

To get started, all we need to do is go to our little actions icon down at the bottom here and click on that. If you search for CopyDoc under the plugins tab, click on the CopyDoc item. You can either run the Figma plugin by clicking on this little "Run" button here, or I’d recommend clicking on the "Save" icon that's usually here. That will save it to your Figma plugins list.

I've already clicked on the save icon, so I'm just going to close this off and go to my canvas. Right-click anywhere, go down to "Plugins", then go down to "Saved Plugins", and click on the "CopyDoc" item. That’s going to run the Figma plugin that we saved a moment ago.

Shortly, we're going to be using this Sync Content feature over here to import this spreadsheet file that I've just set up in Microsoft Excel. We're going to be syncing a few different music artists and covers, along with swapping out a genre tag that we're going to create as a Figma variant-based component right now.

Before we do this syncing step, I'm going to help you set up this frame here, turn that into a component with variants in it, and then show you how we can automatically sync that up with different values from our spreadsheet into our Figma designs.

First things first, we just want to convert this frame into a component. I'm just going to right-click on that and click on Create Component. What I'm going to do is name this as "Tag" because it's going to be this little genre tag. We're going to populate that into our spreadsheet up here. We're just going to add the word "Tag" into our header to match up with this original layer. That’s going to be our first step.

Next, take this existing component here, right-click on it again, go down to "Main Component" in the options menu, and this time click on "Add Variant". You want to click on this little Add Variant option. What that does is convert that component into what Figma calls a component set. A component set is just a collection of nested components.

You can see here the name of the component is still "Tag," but now we have these variants. We’ve got a Default variant and this other one called Variant 2. You can keep adding more variants to this component by clicking on this little Add Variant icon down here. That allows you to create variants of the same component with slight differences.

In this example, I'm going to populate it with a few more genres. We've got a few music genres here, these are all electronic genres. I'm just going to show you how to customize this, and then we’re going to use these variants to populate our design and automatically set the variant via the spreadsheet to swap those.

Don’t worry if this doesn’t make sense right now. Everything’s going to be clear in just a moment.

What we're going to do is quickly style up these variants. I'm going to make them different colors just to make it easier to see what they look like when we swap them out. I'm just going to give them a few different colors, totally random, just to add those in.

Now that we've got our component set ready to go, we just need to make a few more tweaks. You'll notice over here in the Properties panel we've got these default properties: Property 1, then Default, Variant 2, Variant 3. This kind of matches up with these tags over here.

What we want to do is take the name. Click on any of the variants inside of your Component Variant Set, for example, click on the Default variant, and you can see over here we've got this thing called Property 1. We're going to rename that to "Genre" because in this use case we’re creating variants for different genres. You can call that whatever your variant is based on, it might be a title, an image, whatever you like, but I’m going to rename that to Genre.

Then we go through each of these variants and change the property names. You can see here we've got Default, Variant 2, Variant 3, Variant 4. We're going to change these to match up with our genres. I’m going to call this one Synthwave, this one Vaporwave, and I’m just going to copy-paste that text into the variant name over here. Go through those one by one and rename them.

You could technically leave them as Variant 3, Variant 4, as Figma names them, but that might be a little bit confusing if you're going to be populating your spreadsheet with these variants. You probably want to have a better idea of which one is which.

Now that we’ve populated those variant names, that’s all ready to go. We can now use this component. The way to do that is just to go to your Assets panel over here. You can see it’s showing the components we have available on this page. I’m just going to drag and drop this Tag component that we created, and that’s going to create a new component of that component set.

Now if we click on this component, we’ve got access to the Genre and those variants. We can swap them out manually using this little dropdown list, but what we want to do is sync this up automatically.

I'm going to create four different screens. I’ve got this little frame design here in Figma, it’s nothing complicated, just a frame with a few different layers in it. I'm going to create a few copies of that and drag and drop this little Tag into these components. I’m just going to copy it, paste it in, and put it wherever I like. You can have them all the same or put them in different spots, whatever you like.

Once I’ve finished doing that, we can go back to our spreadsheet and import these into Figma.

In my spreadsheet, I’ve got a few other fields. I’ve got my Tag field, which is the layer we just created here. That’s going to match up with these layers we just added. I’ve also got a field called Cover, which matches up with this image layer here. These are all named the same, #Cover. Underneath that, I’ve got links to JPEG files. When we sync this up, it’s going to swap out these images as well.

Also the Album and Artist, if I zoom in, we’ve got #Album and #Artist on the text layers. That’s what that looks like. That’s the Figma structure.

Now we’re going to sync up these variants. The way we do that is by double-clicking on the original variants over here. Go back to your component set and click on each of these layers, double-click on the layer name. You’ll see it changes to this format: Genre=Synthwave (which means "Property=Variant").

That only happens when I double-click on the layer, it's sort of this hidden naming that Figma has. You want to double-click the layer, copy that layer name, and paste it into the spreadsheet. I’m going to do that for all four of them and put them in different places.

You can see I’m just copying each of those names when I double-click on the Figma layer. For example, "Genre=Outrun", that’s the Figma variant property and the value of that property. The equal sign is added by the Figma app, that’s just the way Figma does it.

Now that we’ve added those, you can see under my Tag column in the spreadsheet that these are all named #Tag, just make sure the layer name matches what you’ve named it in your design.

Now that we've got all of those synced up, we're going to click on the Sync Content button in the CopyDoc Figma plugin. Make sure the Content tab is selected. Then drag and drop the Excel file we saved into the drop zone area here. You’ll notice it picks up all of those columns: artist, album, tag, and cover. It gives a little preview.

Now highlight the frames you want to sync up. I’m going to highlight all four frames. It’s probably easier to just drag your mouse over them. With those four selected, you’ll see it says four layers selected. We’re going to sync them in order from left to right.

Click the "Sync Rows with Layers" button and let that finish. I had to double-click the button twice because I think the images weren’t quite loaded the first time. But when I clicked that, it automatically went through and set each of those component variants to a different value based on what we set in our spreadsheet.

You can see we’ve got different labels based on each of the rows we set, and it went through one by one. It added those in the same order they appear in our spreadsheet. You could have many more of these if you want to do a big sync and update all different component variants, but in this case I just wanted to keep things simple and show exactly what it looks like.

That’s basically it. I wanted to walk through each of those steps. If you weren’t familiar with how Figma component sets work and how variants work, this is hopefully a bit of an intro to that concept, while also showing you how to populate your spreadsheet file and get it ready to sync up those rows when you re-import it into Figma and automatically swap out the component variants based on those little labels we looked at in the double-clicked layer names.

That’s going to be it for today. I’ll leave it there and hopefully keep things fairly simple. Feel free to play around with this in your own designs.

If you’ve been using Figma component variants and wondering if there’s an easier way to sync up a large number of them using a spreadsheet, you can now do that using the CopyDoc Figma plugin and the "Sync Content from Spreadsheet" feature.

Lastly, you can use different options. In this case I used a local Excel file, but you can also use a CSV file or a Google Sheets URL. If you wanted to paste in a public Google Sheet URL, you can do that and have it in the exact same format we just went through. Or you can use Airtable if you're using that platform as well.

Again, thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Magicul Alternative
description: Why Convertify is my Magicul alternative when I need fast, trustworthy Figma conversions.
datePublished: 2025-07-24T00:00:00.000Z
dateModified: 2025-07-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-magicul-alternative/
markdownUrl: https://www.hypermatic.com/articles/convertify-magicul-alternative.md
---

# Magicul Alternative

Magicul is a solid conversion service, but I prefer Convertify when timelines are tight and files are sensitive. Convertify lives inside Figma, covers the same long list of formats, and keeps everything local. Here’s how I compare the two.

### Accuracy matters more than buzzwords
Magicul relies on cloud processing and sometimes flattens tricky layers. Convertify keeps text, vectors, and components intact whenever the destination format allows it. If an export comes back as screenshots, I still have to rebuild it—defeating the point of automation.

### Speed and privacy
Convertify processes files locally inside Figma, so NDAs are easy to honor. Magicul uploads docs to its servers, which isn’t always acceptable for enterprise clients. Local processing also means exports finish in minutes instead of waiting for an email link.

### Workflow coverage
Both tools handle exports, but Convertify also imports PDFs, Google Slides, and Sketch files back into Figma. That round-trip capability keeps collaboration tidy. If you only need one-off conversions, Magicul might suffice; for continuous iteration, Convertify wins.

### Real-world testing advice
When you evaluate alternatives, don’t rely on marketing samples. Run a complex production file through the converter—components, nested auto layout, multiple fonts, interactive mockups. Convertify preserves the hierarchy, while many alternatives spit out flattened JPGs. If the tool cannot keep your design system intact, it will slow the team down.

### Cost of switching
Switching converters touches legal (data handling), IT (plugin approvals), and stakeholders who depend on reliable exports. Convertify’s local processing and long list of supported formats mean I rarely have to worry about surprise outages or missing features. An alternative would need a compelling advantage to justify that upheaval.

---

---
type: article
title: Compress Images for Web
description: Keep web performance budgets in check by compressing images directly from Figma with TinyImage.
datePublished: 2025-07-23T00:00:00.000Z
dateModified: 2025-07-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-compress-images-for-web/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-compress-images-for-web.md
---

# Compress Images for Web

Developers love when assets arrive at sane file sizes. TinyImage lets designers deliver optimized PNG, JPG, WebP, and AVIF files straight from Figma so the handoff never bottlenecks the build.

### Performance-first presets
Set target kilobytes or quality percentages per channel. I keep presets for marketing site hero images, product screenshots, and blog illustrations. TinyImage applies them automatically, so exports stay consistent.

### No extra round trips
Instead of exporting from Figma and re-uploading to another compressor, TinyImage keeps the work in one place. You can even reinsert optimized images back into the file to keep prototypes accurate.

### Web-ready workflow
1. Select the layers or exports destined for the web.
2. Use TinyImage to compress them according to your preset.
3. Deliver the optimized assets or sync them via your usual handoff tool.

It’s a simple step that protects page speed without slowing the design team.

### Keep a change log
Record which presets you use for each release so engineering can trace assets back to their compression settings. When a bug report surfaces, you’ll know exactly how the file was produced and whether a higher fidelity export is needed.

### Collaboration tip
Drop TinyImage’s before/after previews into Slack to explain why certain assets look different. Showing stakeholders the file size savings builds trust and reduces “can we get the uncompressed version?” requests.

---

---
type: article
title: Figma Favicon Plugin
description: Favvy is the Figma favicon plugin that exports every icon and manifest file your launch needs.
datePublished: 2025-07-20T00:00:00.000Z
dateModified: 2025-07-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-figma-favicon-plugin/
markdownUrl: https://www.hypermatic.com/articles/favvy-figma-favicon-plugin.md
---

# Figma Favicon Plugin

Figma didn’t ship a favicon workflow, so we built one. Favvy plugs directly into your file, reads the icon frame, and outputs all required assets from `.ico` to iOS/Android touch icons. Designers keep control, developers get consistent files, and everyone avoids last-minute fire drills.

### One plugin, full package
Favvy handles resizing, background fills, masking, metadata, and file compression. You can update everything in seconds whenever the brand team tweaks the logo.

### Handoff-friendly
Each export includes a README snippet that explains how to implement the icons. Attach it to Jira tickets or share it in Slack so engineering knows exactly what to do.

### Usage steps
1. Draw or paste the icon into a square frame.
2. Launch Favvy, choose the package type, and adjust settings if needed.
3. Download the zip and share it with whoever owns deployment.

It’s the small plugin that removes a surprisingly common blocker.

### Scale across brands
Save preset configurations for each product line or sub-brand. Favvy remembers background treatments, file paths, and manifest settings so multi-brand organizations can keep assets consistent without manual tweaks.

### QA helper
Use Favvy’s preview grid to validate icons on light and dark backgrounds, across browsers, and at various pixel densities. Share screenshots from that grid with stakeholders for faster approvals.

---

---
type: article
title: Best Figma plugins for file conversion
description: The best Figma plugins for file conversion when teams need migration, content reuse, and less rebuilding.
datePublished: 2025-07-17T00:00:00.000Z
dateModified: 2025-07-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-file-conversion/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-file-conversion.md
---

# Best Figma plugins for file conversion

The best Figma plugins for file conversion when teams need migration, content reuse, and less rebuilding. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Convertify

[Convertify](/convertify/) is one of the more useful tools in this workflow. Convertify helps in this workflow because format migration is usually expensive in all the wrong ways. A conversion-focused workflow makes legacy files easier to reuse without rebuilding everything from scratch.

### CopyDoc

[CopyDoc](/copydoc/) is one of the more useful tools in this workflow. CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Interactive Presentation Software
description: Build interactive presentations in Figma and deliver them with Pitchdeck’s hosted player and analytics.
datePublished: 2025-07-09T00:00:00.000Z
dateModified: 2025-07-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-interactive-presentation-software/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-interactive-presentation-software.md
---

# Interactive Presentation Software

Pitchdeck feels more like interactive presentation software than a traditional exporter. You can add hotspots, embed videos, wire up CTA links, and then share a hosted experience that behaves like a microsite—all powered by your Figma frames.

### Interactivity without code
Add overlays, tooltips, and navigation inside Figma. Pitchdeck converts those interactions into a web-based presentation that stakeholders can click through. Perfect for product demos, onboarding flows, or pitch decks that need more than static slides.

### Rich analytics
Because the presentation runs through Pitchdeck, you can track which sections people click, how long they linger, and whether they reach your CTA. That turns every deck into a measurable experience.

### Launch workflow
1. Design the interactive flow in Figma using prototyping links.
2. Publish through Pitchdeck, enabling presenter mode or shareable links.
3. Send the URL to stakeholders and monitor engagement from the dashboard.

Interactive storytelling should not require building a custom site. Pitchdeck makes it accessible to every design team.

### Tips for richer interactions
- Use Figma components to store hotspots and overlays so they stay consistent across slides.
- Embed live data or prototype flows directly in Pitchdeck for more immersive demos.
- Leverage link tracking to see which interactive elements get the most clicks and refine the story accordingly.

---

---
type: article
title: Responsive Email Generator
description: Generate responsive HTML emails from Figma using Emailify’s module library and export engine.
datePublished: 2025-07-08T00:00:00.000Z
dateModified: 2025-07-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-responsive-email-generator/
markdownUrl: https://www.hypermatic.com/articles/emailify-responsive-email-generator.md
---

# Responsive Email Generator

Responsive behavior is non-negotiable in email. Emailify bakes it into every module. When you generate an email with the plugin, it outputs code that handles mobile stacking, retina images, and dark-mode tweaks automatically.

### Preview before you export
Emailify’s panel shows desktop and mobile previews, so you can adjust padding or swap modules before exporting. You can even hide specific blocks on mobile or desktop with toggles.

### Export how you need
Choose from HTML, MJML, or dozens of ESP presets. Emailify optimizes assets, rewrites image paths, and bundles everything so you’re not patching code afterward.

### Generator routine
1. Outline the story: hero, content blocks, CTA, footer.
2. Drag in the corresponding modules and customize them in Figma.
3. Run Emailify, preview responsiveness, and export to your sending platform.

It’s a responsive generator that fits right into your existing workflow.

### Handle edge cases
Need different content for mobile users? Duplicate a module, target it to a breakpoint, and let Emailify handle conditional rendering. Want retina images without bloating the email? Enable high-density exports and the plugin adjusts widths automatically.

### Workflow tip
Keep device-specific feedback logged on a dedicated Figma page. When someone reports a mobile issue, tweak the module, re-export, and note the fix. Over time you’ll build a playbook for responsive optimizations unique to your brand.

---

---
type: article
title: Figma to Mailchimp Template
description: Turn Figma designs into Mailchimp templates with Emailify’s ESP-specific export settings.
datePublished: 2025-07-07T00:00:00.000Z
dateModified: 2025-07-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-figma-to-mailchimp-template/
markdownUrl: https://www.hypermatic.com/articles/emailify-figma-to-mailchimp-template.md
---

# Figma to Mailchimp Template

Mailchimp has its own merge tags, folder structure, and quirks. Emailify handles all of them. Design the email in Figma, pick Mailchimp as the export destination, and the plugin outputs a zip that uploads directly to your account.

### Merge tags included
Emailify supports Mailchimp’s personalization tokens, so you can drop in *|FNAME|* or conditional content without editing the code afterward. If you prefer to insert them in Figma, the plugin keeps them intact during export.

### Deployment-ready
The export includes the HTML file, images, and manifest Mailchimp expects. Upload it via Mailchimp’s template manager, and you’re ready to schedule a send.

### Conversion steps
1. Build the email using Emailify components in Figma.
2. Choose Mailchimp in the export dropdown and preview the final markup.
3. Download the zip, upload it to Mailchimp, and send yourself a test.

That’s the entire pipeline—no copy/pasting into another editor required.

### Keep modules synced
When brand guidelines change, update the Figma component and rerun the Mailchimp export. Your template library stays consistent across departments without hunting through Mailchimp’s editor for outdated modules.

### Helpful extras
- Store Mailchimp merge tag reference sheets in the same Figma file for quick access.
- Use Emailify’s hosted previews to collect approvals before uploading to Mailchimp’s template manager.
- Version template zips with dates or campaigns so growth teams can roll back if needed.

Going from Figma to Mailchimp with Emailify is truly a three-click routine.

---

---
type: article
title: Ditto Alternative
description: Why CopyDoc is my Ditto alternative when I need spreadsheet-friendly, localization-ready workflows.
datePublished: 2025-07-05T00:00:00.000Z
dateModified: 2025-07-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-ditto-alternative/
markdownUrl: https://www.hypermatic.com/articles/copydoc-ditto-alternative.md
---

# Ditto Alternative

Teams often try Ditto for content management, but once localization and spreadsheet syncs enter the picture, I switch to CopyDoc. It lives directly in Figma, respects the structures we already built, and handles the gnarly workflows that Ditto’s web app struggles with.

### Must-haves for any alternative
If a tool can’t sync CSV/JSON files, import Google Sheets, or push edits back to Word docs, it won’t survive long in production. Ditto shines at component reuse, but CopyDoc’s diff view and structured imports are what keep last-minute updates safe.

### Where CopyDoc stands out
CopyDoc treats text as data. I can link frames to spreadsheet rows, auto-translate content, and keep snippet libraries without leaving Figma. Ditto requires hopping into another UI, then syncing back down—fine for simple flows, painful for multi-market launches.

### When to mix tools
If you love Ditto’s developer handoff docs, keep it for that and let CopyDoc own high-volume content syncing. CopyDoc handles the messy spreadsheets; Ditto can remain the tidy reference site.

### Testing checklist
When evaluating alternatives, run through your hardest scenarios: large localization files, Markdown snippets, CSVs with merge tags. Most tools break somewhere along the way. CopyDoc handles them because it was built around spreadsheet-driven workflows from day one.

### Bonus benefit
CopyDoc’s audit history means you can see exactly who synced what and when. That transparency is critical when multiple writers touch the same file or when legal needs proof that their changes landed. If an alternative can’t provide that visibility, it’s not worth the switch.

---

---
type: article
title: Smart Image Cropping
description: Smart image cropping in Figma becomes painless when you let HyperCrop handle detection, presets, and exports.
datePublished: 2025-07-04T00:00:00.000Z
dateModified: 2025-07-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-smart-image-cropping/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-smart-image-cropping.md
---

# Smart Image Cropping

Smart image cropping is one of those requests that sounds simple during a meeting and becomes chaos the second you export the first asset. HyperCrop adds the automation we always wanted inside Figma: it reads the frame, understands where the subject sits, and reuses that logic across every size you need.

### Detection you can actually trust
I rely on HyperCrop when there is motion blur, off-center subjects, or UI overlays that would normally confuse an automated tool. The plugin’s detection keeps the focus where it belongs, and when it misses, I tweak the crop directly in the panel without editing the original design.

### Scale the same look everywhere
Whether I am prepping assets for marketplace listings or app store screenshots, I can chain HyperCrop presets to guarantee every crop shares consistent padding, color treatment, and naming. That consistency is what makes a campaign look cohesive across touchpoints.

### Rinse and repeat
1. Gather the frames with imagery that needs to travel across sizes.
2. Enable smart detection in HyperCrop and review each crop variant.
3. Export the files and, if needed, push them through TinyImage for compression before handoff.

Smart image cropping should be an invisible part of your workflow. HyperCrop makes it exactly that.

### Document learnings
Keep a running note of scenes where smart detection needed a manual override. Group them by subject type so you can build specialized presets later. HyperCrop evolves with you instead of forcing one-size-fits-all automation.

### Collaboration tip
Share the smart-crop previews with art directors during production meetings. Seeing how imagery flexes across breakpoints often influences shot selection long before design begins, saving time for everyone down the line.

---

---
type: article
title: Figma Presentation Plugin
description: Pitchdeck is the presentation plugin that keeps design, review, and delivery inside Figma.
datePublished: 2025-07-03T00:00:00.000Z
dateModified: 2025-07-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-figma-presentation-plugin/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-figma-presentation-plugin.md
---

# Figma Presentation Plugin

PowerPoint and Keynote still have their place, but building decks inside Figma is faster for collaborative teams. Pitchdeck is the plugin that makes this practical—it turns your frames into live presentations, exports to every major format, and adds analytics for when you share them.

### Design freedom
Because you’re working directly in Figma, you can use the same components, grids, and tokens from your product work. Pitchdeck respects those choices and exports them faithfully to slides, PDFs, or interactive links.

### Live presentation layer
Pitchdeck’s presenter mode includes speaker notes, timers, link tracking, and remote control support. You can host a full demo without leaving your browser, then send the follow-up deck via the same link.

### Using the plugin daily
1. Structure your deck as Figma frames (one frame per slide).
2. Launch Pitchdeck to preview transitions, add links, and configure outputs.
3. Export to the format stakeholders need or share the hosted presentation link directly.

It’s a modern presentation workflow built on top of the design tool we already use.

### Tips for large teams
- Keep Slide Masters as Figma components so updates cascade through every presentation.
- Use Pitchdeck analytics to prioritize which sections need polish before a big all-hands.
- Store presenter notes in the Figma file so any teammate can step in and deliver with minimal prep.

---

---
type: article
title: Encrypted Design Handoff
description: Use Crypto to run encrypted design handoffs so agency partners and vendors only access what they need.
datePublished: 2025-07-02T00:00:00.000Z
dateModified: 2025-07-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-encrypted-design-handoff/
markdownUrl: https://www.hypermatic.com/articles/crypto-encrypted-design-handoff.md
---

# Encrypted Design Handoff

When we hand off designs to vendors or agencies, we have to balance access with confidentiality. Crypto lets us share encrypted prototypes, PDFs, or download packages that require passwords and can be revoked instantly.

### Control who sees what
Publish only the frames needed for the handoff, lock them behind a password, and optionally watermark previews with the recipient’s email. Crypto ensures assets cannot be shared onward without leaving a trail.

### Keep feedback loops alive
Even with encryption, stakeholders can still leave comments or watch embedded video walkthroughs. That keeps collaboration high while the files stay protected.

### Handoff playbook
1. Prep the deliverables (prototypes, exports, documentation) inside Figma.
2. Publish through Crypto with the right security settings.
3. Share the link, gather feedback, and revoke access once the engagement moves forward.

It’s the modern replacement for emailing zip files under NDA.

### Track vendor compliance
Crypto’s logs show when vendors accessed files and whether they downloaded anything. Share that report with procurement or legal to prove you’re honoring contractual obligations. If a vendor leaves, revoke access immediately and archive the audit trail.

### Pro tips
- Segment deliverables into separate Crypto links for each agency to limit blast radius if credentials leak.
- Enable email verification so only approved domains can view your work.
- Include expiration dates tied to contract milestones to automate cleanup.

Encrypted handoffs no longer feel like a compromise—they feel like the default.

---

---
type: article
title: Best Figma plugins for presentation design
description: The best Figma plugins for presentation design when deck creation, sharing, and reviews all matter.
datePublished: 2025-06-30T00:00:00.000Z
dateModified: 2025-06-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-presentation-design/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-presentation-design.md
---

# Best Figma plugins for presentation design

The best Figma plugins for presentation design when deck creation, sharing, and reviews all matter. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Pitchdeck

[Pitchdeck](/pitchdeck/) is one of the more useful tools in this workflow. Pitchdeck is helpful in this workflow because presentation work usually lives between design quality and practical delivery. Designing once in Figma and exporting to familiar deck formats is often the fastest middle ground.

### Crypto

[Crypto](/crypto/) is one of the more useful tools in this workflow. Crypto matters here because design sharing is not always public or lightweight. When security, password protection, or controlled access matters, a normal share link often is not enough.

### Commentful

[Commentful](/commentful/) is one of the more useful tools in this workflow. Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Figma Inspect Alternative
description: Weblify is the Inspect alternative for teams who want real code instead of raw measurements.
datePublished: 2025-06-28T00:00:00.000Z
dateModified: 2025-06-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-inspect-alternative/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-inspect-alternative.md
---

# Figma Inspect Alternative

Figma’s Inspect panel is fine for measurements, but it doesn’t translate designs into production-quality code. Weblify fills that gap by generating HTML/CSS, React, Vue, or Tailwind snippets that engineers can use immediately.

### Why it matters
Inspect data still leaves engineers guessing about semantics, breakpoints, or component props. Weblify bakes those decisions into the export, so implementation details are clearer and feedback cycles shrink.

### Designer-friendly
You don’t have to change how you design. Weblify reads your existing frames and styles, meaning adoption is as simple as installing the plugin.

### Inspect vs Weblify in practice
- Inspect: measurements + raw CSS values.
- Weblify: semantic markup, class names, responsive logic, token mapping, plus the measurements if you want them.

For teams that value speed and fidelity, Weblify wins.

### Transition plan
Introduce Weblify snippets alongside Inspect screenshots in your documentation. After a sprint or two, engineers will gravitate toward the snippets because they include working code. At that point, you can retire redundant handoff steps.

---

---
type: article
title: WebP Converter
description: Convert Figma exports to WebP with TinyImage and keep performance budgets intact.
datePublished: 2025-06-26T00:00:00.000Z
dateModified: 2025-06-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-webp-converter/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-webp-converter.md
---

# WebP Converter

WebP hits the sweet spot between quality and weight. TinyImage converts any Figma layer or slice to WebP while letting you preview the impact. That means marketing and product teams can deliver modern formats without extra tooling.

### Set-and-forget presets
I maintain a WebP preset with 75% quality for marketing imagery and another at 90% for UI screenshots. TinyImage remembers those presets, so exports stay consistent even when multiple designers are contributing.

### Dual-format delivery
Need fallback PNGs? TinyImage can export both WebP and PNG versions simultaneously, naming them according to your pattern. That keeps developers happy when they need to serve multiple formats.

### WebP workflow
1. Select the assets destined for WebP.
2. Run TinyImage with your preset and review the previews.
3. Export the files and hand them off along with implementation guidance.

It’s the fastest way to modernize your image pipeline straight from Figma.

---

---
type: article
title: Figma Text Export
description: Export every string from your Figma file via CopyDoc to keep writers and translators in the loop.
datePublished: 2025-06-24T00:00:00.000Z
dateModified: 2025-06-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-text-export/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-text-export.md
---

# Figma Text Export

CopyDoc doesn’t just import text—it also exports it. I use the plugin to pull every string out of a file into CSV, JSON, DOCX, or Google Sheets. That export becomes the single source of truth writers and translators expect.

### Structured exports
You can include metadata like frame names, component IDs, and status flags. That gives downstream teams context, so they know where each string appears in the product or marketing journey.

### Keep reviews efficient
Share the exported file with stakeholders, let them propose edits, and then import those edits back via CopyDoc. No more annotating screenshots or juggling duplicate Figma files.

### Export process
1. Select the pages or frames you want to export from Figma.
2. Run CopyDoc’s export, choosing the format stakeholders prefer.
3. Share the file, gather feedback, and import the approved changes back into Figma when ready.

It’s a simple loop that keeps copy collaboration tight.

### Helpful add-ons
- Automate nightly exports for large projects so stakeholders always have fresh context.
- Use CopyDoc’s filters to export only specific sections (like onboarding flows) when teams don’t need the entire file.
- Attach exported files to Jira/Linear tickets so engineers can see the final copy alongside implementation details.

CopyDoc turns text exports into a service you can provide on demand rather than a manual chore.

---

---
type: tutorial
title: How to import an MP4 video to animated GIF layer in Figma with one click using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-06-23T00:00:00.000Z
dateModified: 2025-06-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-convert-an-mp4-to-gif-in-figma-with-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-convert-an-mp4-to-gif-in-figma-with-one-click-using-convertify.md
---

# How to import an MP4 video to animated GIF layer in Figma with one click using Convertify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to import MP4 video files to animated GIF layers in your Figma file with one click using the Convertify Figma plugin.

To get started, all we need to do is open up a new Figma file or your existing Figma file, go down to the little toolbar down here, and click on the actions icon. Then you just want to search for Convertify. Under the plugins tab, you'll see the Convertify item pop up. Just go ahead and click on that item.

What you want to do next is come down here, and you'll see a button that says "Save." If you click on Save, it'll save it to your plugins list automatically. I've already saved it to mine, so that's why it says "Remove" there. If you've saved it, you can go ahead and click on this "Run" button here. Or you can actually just right-click anywhere, go down to Plugins, go down to Saved Plugins, and then click on the Convertify item. That's just going to run the Figma plugin that we saved a second ago.

Today we're going to be showing how to import a video as a GIF layer in your Figma file. By default, this option here is going to be set to "Export Figma to Sketch." All you need to do when you run the Figma plugin for the first time is just click on the little dropdown item here, go down to the "Import to Figma" section, and find the "Import Video as GIF to Figma" option.

You can see here it's allowing us to drag and drop an MP4 video file. I've already grabbed a couple of MP4 video files from this site called Pixabay. It just has some free video files that you can download. You just pick a video, go down here to the download option, and you probably want to select the lower resolution one just to make the import a little bit faster and smaller. I've selected the 720p one, and you can see I've got that on my computer here.

We're just going to go back to Figma, and I'm going to drag and drop that MP4 file from my computer into this little window here. If you let that go, you can see here that it's going to start importing that video to a GIF. It's basically converting every single frame from the video and converting each of those frames into a GIF frame. Once it finishes, it's going to insert that GIF automatically into our Figma page.

I'll just speed this bit up so we can get through it much more quickly. You can see it's just finished converting the GIF. You'll notice here on our page, if we go to the fill, it says GIF over here. If we open that up, you can see it's loaded up the little preview window of the Figma fill. Because it's a GIF, we can click this play button here to see the GIF play back directly inside of Figma.

It's essentially converted, as I mentioned, every single frame of the video into a GIF. Now this Figma layer here is actually just a GIF layer. It's used the file name as the image name. You can see there's a little play icon there showing that it's a GIF video, and you can now use that in your Figma layers however you like. You can obviously resize that if you need to. You can just treat it as a normal Figma layer.

I'll just show you a couple more examples. I'll drag and drop another MP4 file in here, and you can see there's a little live preview of exactly which frame it's up to. You get a sense of how far the progress is, if you're familiar with the video. In this case, I'll just preview the video file as well. If we open up this folder here, you can see in the live preview this is the original MP4, and you can see the preview of that video in the Figma plugin as it's converting it. That just gives you a bit of a sense of where the video is being converted.

Once it's finished, it's going to add it to your Figma file automatically. Again, we can open up the Figma fill, and you can see down here with the play icon, we can just see what that looks like in there. The GIF is playing back as expected.

That's basically it. I'll just do one very last example to show this example of this jellyfish one. The reason I wanted to import that is just to call out another small thing to note. If I just drag that in, you'll notice here that it says this feature supports a maximum video length of 60 seconds. That's just something to be mindful of.

This is designed for much shorter clips. These are about 15 seconds long, but ideally, you want to keep them pretty short. As mentioned, you can basically import MP4 files up to 60 seconds in length. If they go longer than that, the GIFs are just going to be really, really, really big, and it's going to slow down your Figma file. You want to ideally keep those pretty short—between, you know, five to fifteen seconds would be ideal. But as it says, you can go up to 60 seconds if you don't care about the enormous file size that might result from that.

Again, we can preview this one in Figma. I'll just click on play, and that's going to load the MP4 video we just converted to an animated GIF. There we go. We've got three different MP4 video files that we've now imported as animated GIF layers in your Figma file, and you can use these basically however you like. You can use them in Figma prototypes, you can use them with certain plugins that support GIF exports, or a variety of other uses that you might have for implementing animated GIFs created from MP4 videos in your designs.

I hope that's helpful if you've been wondering how to get MP4 video files into your Figma files but as animated GIFs rather than videos. This is a really easy way to go about it, where you can just do it in one step rather than having to convert the video file to GIF outside of Figma and then import that GIF into Figma. You can just do it all in one step using the Convertify Figma plugin.

We'll leave it there for today. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Figma to After Effects
description: Send Figma designs to After Effects with Convertify and keep layers organized for motion teams.
datePublished: 2025-06-21T00:00:00.000Z
dateModified: 2025-06-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-figma-to-after-effects/
markdownUrl: https://www.hypermatic.com/articles/convertify-figma-to-after-effects.md
---

# Figma to After Effects

Motion designers love After Effects, but prepping files for them can be tedious. Convertify exports selected frames into .aep-friendly JSON/Lottie structures so animators can jump straight into their workflow. Typography, vectors, and hierarchy stay intact, which means less back-and-forth.

### Make motion-ready files
Before exporting, I tidy layers, name groups clearly, and outline any complex shapes. Convertify translates that structure into a format After Effects understands. Motion teams import it, and all the prep work is already done.

### Collaboration tips
1. Ask the motion designer which effects or expressions they plan to use so you can prep assets accordingly.
2. Include notes or references along with the export to explain timing, easing, or intent.
3. After they finish, you can even bring parts of the animation back into Figma via Lottie for prototyping.

Convertify makes the handoff feel more like teamwork and less like a file dump.

### Iterate without friction
When design changes land mid-production, update the frame in Figma and rerun Convertify. Motion designers receive an updated bundle with identical structure, so they can swap assets without rebuilding comps. That keeps timelines on track even when product teams keep iterating.

### Bonus: reusable libraries
Store commonly animated components (logos, illustration systems) in a shared Figma page and export them via Convertify whenever motion needs them. Everyone stays aligned on the latest art direction, and your After Effects projects stop accumulating outdated assets.

---

---
type: article
title: Figma Localization Plugin
description: Localize Figma designs with CopyDoc by syncing translations from spreadsheets or localization platforms.
datePublished: 2025-06-20T00:00:00.000Z
dateModified: 2025-06-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-localization-plugin/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-localization-plugin.md
---

# Figma Localization Plugin

Localization can feel like spinning plates when every market needs updates yesterday. CopyDoc streamlines the process by syncing translations from CSV, XLIFF, Google Sheets, or APIs into your Figma file, complete with language tags and variants.

### Keep languages organized
CopyDoc can duplicate frames per locale or swap text inline. I usually keep a base frame and create variants per language, letting CopyDoc handle the text swap so I can focus on layout adjustments for longer strings.

### Integrate with translation tools
The plugin supports workflows with Crowdin, Lokalise, Phrase, and other platforms. Export source strings, translate them, then import the results back into Figma without manual copy/paste.

### Localization cadence
1. Export your source copy via CopyDoc to share with translators.
2. Receive translated files (CSV/XLIFF/etc.) and import them using the same plugin.
3. Review each locale, adjust layout, and re-export for QA or engineering.

CopyDoc keeps localization humming even when you are juggling dozens of markets.

### Handle edge cases
Flag strings that require right-to-left support or special characters, and CopyDoc will maintain those nuances during import. Pair it with Figma’s auto layout to ensure new text lengths fit without manual nudging.

### Team workflows
- Localization managers can upload files directly into CopyDoc, reducing the back-and-forth with designers.
- Product teams can tag strings with release versions so QA knows which build they’re testing.
- Marketing can preview localized campaigns in context before sending them to ESPs or CMS platforms.

If localization is part of your roadmap, CopyDoc should be part of your toolkit.

---

---
type: article
title: Figma Image Crop Plugin
description: A look at how HyperCrop acts as my go-to Figma image crop plugin for multi-channel campaigns.
datePublished: 2025-06-16T00:00:00.000Z
dateModified: 2025-06-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-figma-image-crop-plugin/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-figma-image-crop-plugin.md
---

# Figma Image Crop Plugin

Figma already makes layout work collaborative, but image crops can still feel like solitary confinement. HyperCrop fills that gap. It is the image crop plugin I rely on when the team needs variants for web, mobile, paid media, and partner placements all at once. Everything stays inside the source file, and the plugin respects the layers, components, and masks we already built.

### Designed for real production workflows
HyperCrop does more than draw rectangles. It understands aspect ratios, keeps key subjects within safe areas, and lets me set exact formats, naming conventions, and resolutions. Because it reads straight from the canvas, I never need to detach components or export temporary files just to see how a crop might land.

### Collaboration stays in Figma
Reviewers can open the file, see the HyperCrop previews, and suggest tweaks before we bake exports. That replaces the usual “I’ll send an updated Dropbox folder tonight” routine with a transparent, in-document workflow. Once everything looks right, we export straight from the plugin and keep moving.

### Running HyperCrop on any project
1. Highlight the frames or components that hold the imagery you want to reuse.
2. Launch HyperCrop, dial in your preset (or build one from scratch), and preview the smart crops.
3. Export as JPG, PNG, or WebP, either directly to your machine or back into the Figma file as slices for reference.

For teams juggling multiple stakeholders, HyperCrop is the Figma image crop plugin that keeps everyone aligned and the asset factory humming.

### Keep training simple
Because HyperCrop lives where designers already work, onboarding new teammates is as easy as sharing a preset and a short Loom walkthrough. They can run exports confidently on day one without memorizing separate apps or scripts.

### Maintenance tips
- Store presets in a shared Figma library so they survive file duplication.
- Use HyperCrop’s naming tokens to include campaign or locale codes automatically.
- Pair the plugin with your DAM or CMS via automation so finished crops land exactly where they’re needed.

---

---
type: article
title: Frontend QA Automation
description: Automate frontend QA workflows with Pixelay’s overlays, diffs, and shareable evidence.
datePublished: 2025-06-14T00:00:00.000Z
dateModified: 2025-06-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-frontend-qa-automation/
markdownUrl: https://www.hypermatic.com/articles/pixelay-frontend-qa-automation.md
---

# Frontend QA Automation

Pixelay isn’t a traditional automated test runner, but it automates the visual QA steps that usually eat up time. By programmatically comparing designs to builds, it cuts down on human error and gives engineers actionable feedback.

### Repeatable checks
Create a QA checklist that pairs each route with a Figma frame. Pixelay can cycle through them quickly, letting you capture diffs and notes without rebuilding the context each time.

### Evidence for your issue tracker
Pixelay exports annotated screenshots with overlays or diff heatmaps. Attach those to Jira or Linear tickets, and engineers instantly understand the issue. No more writing paragraphs to describe a misaligned button.

### Automation-friendly workflow
1. Publish your final frames through Pixelay.
2. During QA, run through the list and capture any regressions.
3. Share the exported images or links directly with engineering, closing the loop faster.

It’s the visual QA automation we always wanted but never had in such a lightweight package.

---

---
type: article
title: Best Figma plugins for banner design
description: The best Figma plugins for banner design when teams need ad variants, resizing, and lighter exports.
datePublished: 2025-06-13T00:00:00.000Z
dateModified: 2025-06-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-banner-design/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-banner-design.md
---

# Best Figma plugins for banner design

The best Figma plugins for banner design when teams need ad variants, resizing, and lighter exports. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Bannerify

[Bannerify](/bannerify/) is one of the more useful tools in this workflow. Bannerify is useful here because it keeps banner production inside Figma instead of pushing the team into a separate build step. For teams creating multiple ad sizes, motion variants, or late campaign revisions, that usually means less repetition and a cleaner review cycle.

### HyperCrop

[HyperCrop](/hypercrop/) is one of the more useful tools in this workflow. HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

### TinyImage

[TinyImage](/tinyimage/) is one of the more useful tools in this workflow. TinyImage matters in this workflow because production does not stop at design quality. Teams still need smaller files, cleaner exports, and faster pages. Keeping compression in Figma removes one more manual handoff.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Figma Localization Workflow
description: Build a dependable localization workflow in Figma by letting CopyDoc orchestrate every text handoff.
datePublished: 2025-06-11T00:00:00.000Z
dateModified: 2025-06-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-localization-workflow/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-localization-workflow.md
---

# Figma Localization Workflow

Localization is a process, not a one-off task. CopyDoc gives that process structure by handling exports, imports, diffs, and approvals right inside Figma.

### Clear stages
I break localization into three steps: source extraction, translation, and reintegration. CopyDoc handles each one. Export the source strings with IDs, share them with translators, then import the finished copy and review it in context.

### QA with confidence
Because CopyDoc tracks every change, you know exactly when each locale was updated and by whom. If the German copy breaks layout, revert that specific set, tweak the design, and re-import once it’s ready.

### Operating rhythm
1. Kick off localization with CopyDoc’s export feature.
2. Manage translations in your preferred tool, keeping IDs intact.
3. Import the translated files, inspect each locale, and sign off.

It keeps chaos at bay when you are localizing marketing sites, product flows, and lifecycle emails simultaneously.

### Communicate status clearly
Use CopyDoc’s tagging to mark locales as “In translation,” “Ready for QA,” or “Approved.” Share the board with project managers so everyone knows where each language stands without pinging the design team.

### Extra tips
- Schedule regular syncs with localization partners to review tricky strings before they snowball.
- Attach screenshots to translation tickets straight from CopyDoc exports so translators understand context.
- Archive older versions of strings for compliance or historical reference.

With CopyDoc driving the workflow, localization becomes predictable instead of perpetual triage.

---

---
type: article
title: Secure Prototype Sharing
description: Crypto keeps Figma prototype sharing secure by layering encryption, passwords, and audit logs on top of your files.
datePublished: 2025-06-09T00:00:00.000Z
dateModified: 2025-06-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-secure-prototype-sharing/
markdownUrl: https://www.hypermatic.com/articles/crypto-secure-prototype-sharing.md
---

# Secure Prototype Sharing

Prototypes are often the most sensitive artifacts on a team—they show what’s coming next. Crypto makes sure only the right people see them. Wrap the prototype in an encrypted link, set a password, and track every view from the Crypto dashboard.

### Designed for external partners
Agencies, vendors, or beta customers can access the prototype without getting full visibility into your Figma account. If access should end, revoke the link instantly. It’s cleaner than cloning files just for a review.

### Layered controls
Enable two-factor email verification, limit the number of views, or add watermarks that include the viewer’s info. Those layers deter leaks and make it easy to trace them if they occur.

### Sharing sequence
1. Publish the prototype through Crypto.
2. Configure security settings that match the sensitivity of the project.
3. Share the link, gather feedback, and shut it down when the review period ends.

Secure prototype sharing becomes routine when you have tools built for it.

### Test without clones
Instead of creating duplicate files for every review, keep a single prototype and control access with Crypto. When a new partner needs in, generate a dedicated link. When the engagement ends, revoke it. Your design system stays cohesive, and you avoid version drift.

### Reporting benefits
Export view logs after each review cycle and attach them to launch docs. Product, security, and legal teams instantly see that the right people looked at the prototype—and no one else.

---

---
type: article
title: TinyPNG Alternative
description: Why I use TinyImage as my TinyPNG alternative when optimizing assets directly in Figma.
datePublished: 2025-06-06T00:00:00.000Z
dateModified: 2025-06-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-tinypng-alternative/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-tinypng-alternative.md
---

# TinyPNG Alternative

TinyPNG is great for dragging a file or two into a browser, but it lives outside the Figma workflow. TinyImage brings the same compression quality into the design file, adds WebP/AVIF/video support, and remembers presets. Here’s what I consider when choosing between them.

### Key differences
- TinyImage supports lossless and lossy modes with live previews; TinyPNG is lossy-only.
- TinyImage batch renames and exports directly from Figma pages; TinyPNG requires manual uploads/downloads.
- TinyImage handles GIF, MP4, and PDF compression in addition to PNG/JPG. TinyPNG stops at static images.
- TinyImage processes entire artboards with one click, which matters when launching campaigns.

### When TinyPNG still helps
If you just need to shrink a single screenshot outside of Figma, TinyPNG is fine. But for day-to-day design work where assets live in Figma and deadlines are tight, TinyImage is the obvious alternative.

---

---
type: article
title: Favicon Manifest Tool
description: Build or update your site’s favicon manifest directly from Figma using Favvy.
datePublished: 2025-06-02T00:00:00.000Z
dateModified: 2025-06-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-favicon-manifest-tool/
markdownUrl: https://www.hypermatic.com/articles/favvy-favicon-manifest-tool.md
---

# Favicon Manifest Tool

Web manifests can be annoying to maintain. Favvy keeps them in sync with your actual icons. When you export a package, the plugin writes `manifest.json` with the correct file paths, sizes, and theme colors drawn from your design.

### Keep metadata honest
No more guessing which icon is 512x512 or whether the maskable flag is set. Favvy’s manifest lists every asset accurately because it’s generated from the same export.

### Update without hassle
If your brand refreshes or you tweak the icon, rerun Favvy and replace the manifest + icons in your repo. The HTML snippet automatically references the new files.

### Manifest workflow
1. Design/update the icon.
2. Run Favvy, specify the short name, background color, and theme color.
3. Download the package, drop the manifest into your project, and commit.

It’s a painless way to keep your favicon metadata aligned with the design system.

### Collaboration tip
Share the generated manifest with developers via pull requests so they can review changes alongside icons. Because Favvy standardizes the format, diffs become easy to read and approve.

### Keep docs current
Include Favvy’s manifest output in your design system documentation. When future teams spin up microsites, they’ll know exactly which settings to reuse and how to regenerate assets without pinging the design org.

---

---
type: article
title: Emailify vs Bee Free
description: Comparing Emailify and BeeFree for teams who design in Figma but need production-ready HTML emails.
datePublished: 2025-05-31T00:00:00.000Z
dateModified: 2025-05-31T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-emailify-vs-bee-free/
markdownUrl: https://www.hypermatic.com/articles/emailify-emailify-vs-bee-free.md
---

# Emailify vs Bee Free

BeeFree is a solid standalone browser builder, but it expects you to recreate layouts there. Emailify keeps everything inside Figma, so you design once and export directly. If your team already runs reviews in Figma, that difference is massive.

### Collaboration inside the design file
Emailify lets designers, copywriters, and reviewers comment on the same Figma page they use for product work. BeeFree requires exporting assets, uploading them, and managing another login. Every extra step adds latency.

### Code quality
Both tools produce responsive HTML, but Emailify also exports ESP-specific packages, supports MJML, and handles personalization tags right inside the plugin. That means the engineering or CRM team spends less time fixing markup after the fact.

### When BeeFree might fit
If you do not touch Figma at all, BeeFree’s standalone builder works fine. For teams already living in Figma, Emailify removes an entire layer of redundancy.

### Migration considerations
Switching to BeeFree means rebuilding template libraries, retraining designers, and maintaining yet another approval pipeline. Emailify rides on top of your existing Figma practices—components, comments, version history. The operational cost of a standalone tool often outweighs any short-term savings.

### Recommendation
Use BeeFree if you’re starting from zero. Use Emailify if you want to keep your design system intact, collaborate with non-designers in real time, and produce HTML that plugs directly into your ESP without extra QA cycles.

---

---
type: article
title: Online Presentation Maker
description: Use Pitchdeck as your online presentation maker by combining Figma’s design power with hosted delivery.
datePublished: 2025-05-30T00:00:00.000Z
dateModified: 2025-05-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-online-presentation-maker/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-online-presentation-maker.md
---

# Online Presentation Maker

Most “online presentation makers” force you into walled gardens with limited design options. Pitchdeck does the opposite: it lets you build everything in Figma—where you already have components and brand assets—and then delivers those slides through a hosted experience with analytics and remote control.

### Fully web-based delivery
Share a link, and Pitchdeck streams the presentation with speaker notes, presenter view, and link tracking. You can hand the link to a teammate, run it on stage, or embed it in a microsite. No downloads required.

### Always up to date
If you change a slide in Figma, regenerate the presentation and the hosted link updates instantly. Everyone sees the latest version without juggling attachments.

### Maker workflow
1. Design the deck in Figma.
2. Use Pitchdeck to generate the hosted version or export to PowerPoint/Keynote/PDF if needed.
3. Present live, send the link, and watch analytics to learn what resonates.

It’s the online maker that still gives designers total control.

### Collaborate asynchronously
Stakeholders can leave comments on the hosted Pitchdeck link while designers keep iterating in Figma. Because there’s no file switching, feedback cycles shorten dramatically.

### Keep branding tight
Use Figma’s libraries for colors and type so every deck feels on-brand, even when multiple teams build in parallel. Pitchdeck respects those tokens, so exports never drift.

---

---
type: article
title: Client Feedback Software
description: Commentful is the client feedback software I trust when stakeholders need to review Figma work securely.
datePublished: 2025-05-29T00:00:00.000Z
dateModified: 2025-05-29T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-client-feedback-software/
markdownUrl: https://www.hypermatic.com/articles/commentful-client-feedback-software.md
---

# Client Feedback Software

Design reviews can go in circles when clients do not live in Figma. Commentful acts as the bridge: it creates a secure review space where clients can leave contextual feedback without touching the master file. That alone has saved more launches for me than any email thread ever could.

### Purpose-built for agencies and product teams
Commentful spins up branded portals where clients can walk through frames, drop annotations, and sign off when ready. You control permissions, passwords, and expiration dates, which keeps sensitive work safe while still being accessible.

### Feedback that turns into action
Every comment becomes a card on a kanban-style board. Assign it, set a status, and let the plugin sync the update back into Figma. No more guessing which edits are done or who owns what—Commentful keeps the entire team aligned.

### How I run reviews with Commentful
1. Publish the relevant frames to a Commentful board with the right access level.
2. Invite clients via secure links so they can leave notes or approvals without a Figma account.
3. Triage the incoming feedback on the board, apply changes directly in Figma, and mark each card resolved once it ships.

That’s client feedback software that respects both sides of the table: clients get transparency, and designers stay in the tool they use daily.

### Keep every decision auditable
Regulated clients love Commentful because it logs who viewed what, when approvals happened, and which files were shared. You can export the board history as a PDF or CSV and attach it to project closeouts or compliance reviews. That beats cobbling together proof from Slack screenshots, and it protects both your agency and the client if scope questions pop up later.

### Tips for smoother engagements
- Create a “review guide” inside each board outlining what stage the work is in and what type of feedback you’re seeking.
- Use internal-only notes to capture design rationale without exposing it to clients.
- Archive boards once a milestone closes so returning clients always start fresh with the latest files.

Client feedback software should feel like an extension of your process, not another inbox. Commentful nails that balance by living directly inside Figma.

---

---
type: article
title: Figma Copy Plugin
description: CopyDoc is the Figma copy plugin I rely on for localized, data-driven design work.
datePublished: 2025-05-28T00:00:00.000Z
dateModified: 2025-05-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-copy-plugin/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-copy-plugin.md
---

# Figma Copy Plugin

Designers juggle countless stakeholders: marketing, product, legal, localization. CopyDoc is the plugin that keeps us sane. It lets me sync text, run spell checks, replace merge tags, and maintain content libraries without opening any other software.

### Everything in one panel
Import/export text, run find & replace across files, apply markdown, attach snippets, and connect to spreadsheets—all without leaving Figma. That consolidated workflow is why our team can respond to copy updates within minutes.

### Designed for collaboration
CopyDoc keeps a record of changes, so you can see who imported what and when. If something goes sideways, revert to a previous snapshot. Stakeholders appreciate that level of control, which makes them more comfortable handing off source content.

### Getting started
1. Install CopyDoc and connect it to your preferred content source (Google Sheets, CSV, etc.).
2. Map each text layer once; the plugin remembers your configuration.
3. Update copy in bulk with confidence, knowing you can always roll back.

It’s a must-have for any team shipping content-heavy Figma work.

### Advanced moves
- Use CopyDoc’s markdown support to preview rich text emails or help center articles directly inside Figma.
- Replace merge tags or personalization tokens in bulk before sending files to engineering.
- Pair CopyDoc with automation tools to push approved copy into CMS platforms or translation services automatically.

The more you lean on CopyDoc as your Figma copy plugin, the more bandwidth you free up for actual storytelling instead of administrative work.

---

---
type: article
title: Best Figma plugins for HTML email design
description: The best Figma plugins for HTML email design when teams need cleaner production, copy updates, and lighter assets.
datePublished: 2025-05-26T00:00:00.000Z
dateModified: 2025-05-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-html-email-design/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-html-email-design.md
---

# Best Figma plugins for HTML email design

The best Figma plugins for HTML email design when teams need cleaner production, copy updates, and lighter assets. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Emailify

[Emailify](/emailify/) is one of the more useful tools in this workflow. Emailify matters in this workflow because email work often gets rebuilt after design. Keeping layout, content, and export closer together removes a lot of duplicate effort from campaign production.

### CopyDoc

[CopyDoc](/copydoc/) is one of the more useful tools in this workflow. CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

### TinyImage

[TinyImage](/tinyimage/) is one of the more useful tools in this workflow. TinyImage matters in this workflow because production does not stop at design quality. Teams still need smaller files, cleaner exports, and faster pages. Keeping compression in Figma removes one more manual handoff.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Bulk Banner Resizer
description: Resize animated banners in bulk with Bannerify instead of shuffling files through half a dozen tools.
datePublished: 2025-05-23T00:00:00.000Z
dateModified: 2025-05-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-bulk-banner-resizer/
markdownUrl: https://www.hypermatic.com/articles/bannerify-bulk-banner-resizer.md
---

# Bulk Banner Resizer

Bulk resizing banners is usually what burns the clock during a launch. Once the key visual is signed off, every network comes back asking for their favorite dimensions. Bannerify handles the resizing directly on the Figma canvas and keeps animations intact, so exporting 15 sizes feels no more stressful than exporting one.

### Component-driven banners
I start by building banners as components. Bannerify respects those components when duplicating layouts into new sizes, which means copy updates, illustration swaps, or color tweaks cascade everywhere. No more hunting through folders of detached files just to align a CTA.

### Resize, animate, export
Within Bannerify, I can clone an animated frame, change the artboard dimensions, and fine-tune keyframes within a single panel. When everything looks right, I export the batch as HTML5, GIF, MP4, or WebM and hand it to the media team. The exports remain lightweight because the plugin optimizes images along the way.

### A repeatable resizing loop
1. Define the base animation on the flagship size.
2. Duplicate that animation to the rest of the required dimensions inside Bannerify.
3. Preview the full set and export all final files with a single click.

That workflow saves hours every time we spin up a new campaign, and it keeps every banner consistent—exactly what you want from a true bulk resizer.

### When specs change mid-flight
Media plans are rarely static. Someone always adds a takeover unit, a skyscraper, or a custom app placement at the eleventh hour. Because Bannerify stores your animation timeline alongside the layout, responding to those requests is as simple as creating a new frame, pasting the existing animation settings, and exporting. The plugin recalculates easing and delays for the new size automatically, so you do not have to rebuild anything from scratch.

### Keep stakeholders looped in
Hosted previews help stakeholders compare sizes without downloading a dozen zip files. You can share one link that includes every dimension, invite comments, and push updates after each revision. If your team relies on automation, connect Bannerify to Zapier to drop new exports into a shared drive or ping a Slack channel when the batch is ready. QA teams get a predictable stream of files, and campaign managers never wonder if they’re launching the right version.

Bulk resizes will always be part of launching display work, but they do not have to consume your entire week. Bannerify turns the process into a series of predictable clicks.

---

---
type: article
title: Mailchimp Builder Alternative
description: Why I use Emailify as my Mailchimp builder alternative when I design emails in Figma.
datePublished: 2025-05-20T00:00:00.000Z
dateModified: 2025-05-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-mailchimp-builder-alternative/
markdownUrl: https://www.hypermatic.com/articles/emailify-mailchimp-builder-alternative.md
---

# Mailchimp Builder Alternative

Mailchimp’s native builder is fine for quick tests, but as soon as you want pixel control or reusable Figma components, it gets in the way. Emailify keeps design, content, and HTML exports inside Figma while still producing Mailchimp-ready packages. That mix is why I treat it as my Mailchimp builder alternative.

### What matters when comparing tools
- Does it support responsive layouts without extra work?
- Can you export to the ESP you actually use?
- Does the code pass Litmus or Email on Acid tests without hacks?
- Do designers get to stay in Figma instead of learning another editor?

Emailify checks all four boxes. That’s why it remains my default.

### Where Mailchimp’s builder falls short
Mailchimp forces you into rigid content blocks and doesn’t share a brain with your design system. Emailify lets you design freely, then export a Mailchimp-compatible zip with merge tags intact. You get the convenience of Mailchimp’s delivery with the flexibility of Figma.

Unless Mailchimp brings its builder into Figma, I’m sticking with Emailify for production work and using Mailchimp strictly for sending.

### Real-world vetting
When you evaluate alternatives, run your messiest campaign through them: conditional content, multiple locales, Outlook quirks. Emailify handles all of it because it’s built around table-based HTML and ESP presets. Most competitors crumble after the first edge case and leave you debugging code instead of shipping.

### Stakeholder experience
Emailify’s preview links and Netlify hosting let stakeholders see real HTML before handoff. Alternatives that require exporting ZIPs or asking developers to host drafts slow approvals. Keeping everything in one plugin keeps momentum high.

---

---
type: article
title: Figma Smart Cropping
description: Let HyperCrop handle smart cropping in Figma so every export keeps the subject in focus.
datePublished: 2025-05-18T00:00:00.000Z
dateModified: 2025-05-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-figma-smart-cropping/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-figma-smart-cropping.md
---

# Figma Smart Cropping

Smart cropping is the line between "good enough" and "why did we chop the product in half." HyperCrop brings computer vision into the Figma workflow, so the plugin can spot faces, logos, and key focal points before you ever export. I trust it for every campaign where we cannot afford sloppy framing.

### Smart detection built for designers
HyperCrop scans each frame, looks for the most important element, and anchors the crop around it. You still have manual overrides, but nine times out of ten the automatic result is exactly what you need. That keeps me from burning time nudging masks and gives stakeholders confidence that the hero stays intact across every ratio.

### Safe areas for every channel
Beyond the detection, I can define safe-area padding inside the preset. That means the plugin automatically keeps UI chrome, text overlays, or device frames from being trimmed, which is huge for app store screenshots and paid placements. Everything exports consistent and on-brand.

### Dialing in a smart-cropping workflow
1. Pick the frames that need multiple crops.
2. Launch HyperCrop with smart detection enabled and preview each ratio in the panel.
3. Adjust any edge cases manually, then export the entire batch as final files or slices back into the file.

Smart cropping should not require a separate round-trip through Photoshop. HyperCrop gives Figma the intelligence it was missing and helps every campaign ship faster.

### Keep learning from exports
When a crop requires manual tweaks, duplicate the preset and note why. Over time, you’ll build a library of special cases (close-up portrait, wide product lineups) that HyperCrop can apply automatically the next time you encounter them.

### Communication
Share the smart-crop previews with photographers or illustrators during planning sessions. They’ll understand how their work will be repurposed across breakpoints, which often influences art direction before production even begins.

---

---
type: article
title: Figma Email Templates
description: Kickstart campaigns with Figma email templates built in Emailify’s responsive library.
datePublished: 2025-05-15T00:00:00.000Z
dateModified: 2025-05-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-figma-email-templates/
markdownUrl: https://www.hypermatic.com/articles/emailify-figma-email-templates.md
---

# Figma Email Templates

Starting from a blank frame wastes time when all you need is a straightforward lifecycle email. Emailify’s template library gives you a running start: welcome flows, newsletters, receipts, digests, promotions—you name it. Each template is responsive out of the gate, so you can focus on storytelling instead of wrangling tables.

### Customize without compromise
Drop in your brand colors, typography, and imagery. Because these templates are regular Figma components, you can tweak them as much as you like. Emailify will still export bulletproof HTML.

### Build your own catalog
Once you tailor a template for your company, duplicate it into a shared "Templates" page. The next time someone needs a transactional update or seasonal promo, they can clone an existing template and ship faster.

### Template workflow
1. Browse Emailify’s template gallery and pick the closest match.
2. Customize copy, imagery, and layout in Figma.
3. Export via Emailify to your ESP of choice and share the browser preview for approvals.

It’s like having an internal agency ready to go for every email brief.

### Keep templates fresh
Schedule quarterly audits to retire outdated layouts and highlight top performers. Because everything lives in Figma, updating a template is as simple as editing a component. Designers, writers, and QA all work in the same file, so improvements roll out instantly.

### Tips for the library
- Tag templates by lifecycle stage or campaign type for quick discovery.
- Include annotations describing use cases and personalization ideas.
- Store performance metrics in a companion doc so teams know which templates convert best.

Emailify templates are more than a starting point—they’re the backbone of your email playbook.

---

---
type: article
title: Sketch to Figma Import
description: Bring Sketch files into Figma with Convertify so you can modernize legacy libraries without starting from zero.
datePublished: 2025-05-14T00:00:00.000Z
dateModified: 2025-05-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-sketch-to-figma-import/
markdownUrl: https://www.hypermatic.com/articles/convertify-sketch-to-figma-import.md
---

# Sketch to Figma Import

Migrating from Sketch to Figma can feel daunting when you are staring at years of legacy files. Convertify makes it painless: import a .sketch file, and the plugin recreates pages, symbols, and styles within Figma. It’s the fastest way I know to modernize libraries without rebuilding them manually.

### Retain your hard work
Convertify keeps symbols intact, translates shared styles, and preserves nested overrides. That gives you a faithful starting point for establishing a new Figma library or component system.

### After the import
1. Audit the converted file for naming conventions and restructure where necessary.
2. Replace Sketch-specific features (like text styles) with their Figma equivalents.
3. Publish reusable components to your Figma team library once everything looks right.

Importing this way lets teams evolve their workflows without sacrificing the design history they already invested in.

### Plan the migration
Break large libraries into smaller chunks—icons, UI patterns, marketing materials—and import them iteratively. After each batch, run Convertify’s export in reverse to share with teams still on Sketch until the transition completes. This staged approach keeps everyone productive throughout the migration.

### Helpful reminders
- Document any manual tweaks you made post-import for future reference.
- Use Figma’s branching features to experiment with reorganizing components without risking the original import.
- Communicate timelines with downstream teams so they know when to switch to the new library.

Convertify turns “Sketch to Figma import” from a dreaded migration to a manageable project plan.

---

---
type: article
title: Commentful vs Figma Comments
description: How Commentful compares to native Figma comments when you need structured reviews beyond the core team.
datePublished: 2025-05-10T00:00:00.000Z
dateModified: 2025-05-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-commentful-vs-figma-comments/
markdownUrl: https://www.hypermatic.com/articles/commentful-commentful-vs-figma-comments.md
---

# Commentful vs Figma Comments

Figma’s built-in comments are great for day-to-day collaboration, but they fall short when a project needs gated access, approvals, or a clear record of what changed. Commentful fills that gap without disrupting the design workflow.

### Permissions and security
Figma comments require a Figma login and full file access, which many clients or execs do not have. Commentful lets you publish curated boards with passwords, expiring links, and viewer limits. That keeps sensitive work safe and reduces the risk of someone editing the wrong page.

### From comments to tasks
Native Figma comments are transient. Once you resolve them, the audit trail is thin. Commentful turns feedback into cards you can assign, prioritize, and archive. It’s closer to a lightweight project manager designed specifically for design reviews.

### Choosing the right tool
I still use Figma comments for quick internal notes. When the review includes external partners, legal, or leadership, I switch to Commentful. It keeps the noise contained and gives everyone the visibility they expect before approving a launch.

Use both tools together and you get the best of each world: casual conversations in Figma, formal reviews in Commentful.

### Reporting and accountability
Commentful’s dashboards show which feedback items are open, who is responsible, and when they were last touched. That level of reporting is invaluable during sprint reviews or status meetings. Figma comments cannot provide that structure without manual copying into another tool. Commentful keeps everything tied to the design, making follow-up easy.

### Practical tips
- Start each Commentful board with a summary of what changed so reviewers have context beyond the bare design.
- Use tagging to differentiate design issues from content questions, then filter when it’s time to triage.
- Archive boards when a feature ships to keep the workspace tidy and to preserve a clean audit trail.

Commentful vs. Figma comments isn’t a competition—it’s about choosing the workflow that matches the level of formality your review requires.

---

---
type: article
title: Best Figma plugins for client feedback
description: The best Figma plugins for client feedback when reviews need to be clearer, more secure, and easier to approve.
datePublished: 2025-05-09T00:00:00.000Z
dateModified: 2025-05-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-client-feedback/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-client-feedback.md
---

# Best Figma plugins for client feedback

The best Figma plugins for client feedback when reviews need to be clearer, more secure, and easier to approve. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Commentful

[Commentful](/commentful/) is one of the more useful tools in this workflow. Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

### Crypto

[Crypto](/crypto/) is one of the more useful tools in this workflow. Crypto matters here because design sharing is not always public or lightweight. When security, password protection, or controlled access matters, a normal share link often is not enough.

### Pitchdeck

[Pitchdeck](/pitchdeck/) is one of the more useful tools in this workflow. Pitchdeck is helpful in this workflow because presentation work usually lives between design quality and practical delivery. Designing once in Figma and exporting to familiar deck formats is often the fastest middle ground.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Figma Content Sync
description: Keep Figma files synced with the latest copy decks by running everything through CopyDoc.
datePublished: 2025-05-09T00:00:00.000Z
dateModified: 2025-05-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-content-sync/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-content-sync.md
---

# Figma Content Sync

CopyDoc is the best way I know to sync content between stakeholders and designers. It treats text as data, which means updates flow in both directions.

### Bidirectional syncing
Import spreadsheets or DOCX files to update Figma, then export the updated content back out for legal, localization, or product marketing to review. The plugin handles the mapping so you are not guessing which string goes where.

### Confidence through comparison
Before applying changes, CopyDoc shows a diff view of what will change. Green for adds, red for removals. It’s the reassurance I need before clicking “Apply” on a hundred edits.

### Sync cadence
1. Establish a shared spreadsheet or doc as the source of truth.
2. Run CopyDoc imports whenever stakeholders share updates.
3. At milestones, export the in-file copy back to that doc to keep everything aligned.

That loop keeps everyone honest and makes localization far less chaotic.

### Automate reminders
Tie CopyDoc’s exports to reminders in your project management tool. When a sprint closes, everyone knows to sync the latest copy back upstream. That small habit prevents stale decks from lingering in shared folders.

### Ideal use cases
- Growth teams updating promotions weekly
- Product orgs coordinating release notes across apps
- Localization partners who need reliable context alongside strings

CopyDoc turns “content sync” into a reliable beat your entire organization can follow.

---

---
type: article
title: CopyDoc vs Frontify
description: Comparing CopyDoc with Frontify when your team needs fast copy updates inside Figma.
datePublished: 2025-05-08T00:00:00.000Z
dateModified: 2025-05-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-copydoc-vs-frontify/
markdownUrl: https://www.hypermatic.com/articles/copydoc-copydoc-vs-frontify.md
---

# CopyDoc vs Frontify

Frontify excels at brand governance and guidelines. CopyDoc lives inside Figma and focuses on the tactical work of updating copy. I often see teams try to use one tool for both jobs, which leads to frustration. Here’s how I think about it.

### Source of truth vs execution
Frontify stores tone, messaging rules, and approved snippets. CopyDoc applies those decisions to your actual design files. When product marketing hands off a spreadsheet, CopyDoc imports it, highlights differences, and updates the frames automatically. Frontify can host the underlying content, but it does not push directly into Figma.

### Workflow for both tools
1. Finalize messaging and snippets in Frontify (or wherever your guidelines live).
2. Export the content as CSV/JSON or connect via API to your translation platform.
3. Use CopyDoc to sync the text into Figma, keep localization variants organized, and export any updates back upstream.

Together they cover both governance and execution. Trying to replace CopyDoc with Frontify alone usually means more manual copy/paste work for designers.

### Reporting and accountability
Frontify gives leadership confidence that every word aligns with brand standards. CopyDoc provides the audit trail showing when each string entered the design, who approved it, and when it was pushed back to translation tools. Think of them as bookends on the same workflow, not competitors.

### Practical tip
Link CopyDoc exports back to the Frontify component or guideline snippet they came from. Writers instantly know the context, and designers always understand which canonical source to update when things change.

---

---
type: article
title: Image Compressor
description: TinyImage is the image compressor we rely on to keep files lean across every channel.
datePublished: 2025-05-07T00:00:00.000Z
dateModified: 2025-05-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-image-compressor/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-image-compressor.md
---

# Image Compressor

Image compression shouldn’t require a separate app. TinyImage handles it directly in Figma, letting us deliver optimized exports for web, mobile, and print in seconds. It supports PNG, JPG, WebP, AVIF, GIF, MP4, and even PDF compression.

### Flexible presets
Create presets for different teams—growth marketing, product, lifecycle emails—and share them with your teammates. TinyImage respects those presets, so everyone ships assets at the right quality level without guesswork.

### Integrates with other plugins
Pair TinyImage with HyperCrop for multi-size exports, then run everything through TinyImage to shrink the files. It’s a simple pipeline that keeps production humming.

### Routine
1. Select assets after design sign-off.
2. Apply the TinyImage preset that matches the destination.
3. Export and deliver with confidence that performance budgets stay intact.

It’s the compressor that finally feels like part of the design stack.

### Team coordination
Announce new presets in Slack or your design system documentation so everyone knows when standards change. Because TinyImage stores presets centrally, even contractors or agencies can follow the same compression rules without micromanagement.

---

---
type: article
title: Figma to PowerPoint
description: Pitchdeck exports Figma presentations to PowerPoint while keeping slides fully editable.
datePublished: 2025-05-06T00:00:00.000Z
dateModified: 2025-05-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-figma-to-powerpoint/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-figma-to-powerpoint.md
---

# Figma to PowerPoint

PowerPoint isn’t going anywhere, so I make peace with it by using Pitchdeck. The plugin converts Figma frames into .pptx files that look identical to the design. Text stays editable, notes carry over, and animations map to PowerPoint builds.

### Faster than rebuilding
Instead of rebuilding slides manually, I design once and export as many variations as stakeholders need: board decks, roadmap presentations, training materials. Pitchdeck handles the conversion and fonts, so there are no unpleasant surprises when the file opens on Windows.

### Export workflow
1. Finalize slides in Figma.
2. Open Pitchdeck, choose PowerPoint, and adjust any font substitutions.
3. Download the .pptx file and send it to whoever asked for it.

It’s a small step that saves hours every week.

### Keep PowerPoint templates aligned
Store the exported .pptx in your enablement hub alongside the master Figma file so stakeholders know where edits should happen. When they request changes, update the Figma source—not the PPT—and rerun Pitchdeck to keep everything consistent.

---

---
type: article
title: Figma Comments Alternative
description: Why I treat Commentful as the Figma comments alternative when reviews need security, structure, and audit trails.
datePublished: 2025-05-05T00:00:00.000Z
dateModified: 2025-05-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-figma-comments-alternative/
markdownUrl: https://www.hypermatic.com/articles/commentful-figma-comments-alternative.md
---

# Figma Comments Alternative

Figma’s native comments are perfect for quick chats, but they fall short when you invite clients, legal, or execs. Commentful is the alternative I rely on whenever reviews need security, structure, or audit trails. If you’re deciding whether to graduate from Figma comments, here’s the checklist I use.

### Non-negotiable features
You want password-protected links, expiration controls, annotations tied to the actual frame, and a board that tracks each piece of feedback from “new” to “approved.” Bonus if you can embed videos, attach files, and export an audit trail.

### Where Commentful still wins
Figma comments require full file access and have limited status tracking. Commentful publishes curated boards with passwords, expiring links, and kanban-style states. You can apply accepted changes directly from the plugin while keeping sensitive work hidden from curious collaborators.

### When to layer another tool
If your org mandates a separate approval system, you can still use Commentful for design feedback and mirror the final decision into that enterprise tool. Figma comments alone can’t provide the controlled access or reporting compliance teams expect.

Alternatives come and go, but the workflow of “share, review, resolve, ship” always remains. Commentful makes that flow repeatable without all the manual babysitting native comments require.

### Real-world evaluation tips
When testing alternatives, run the same review cycle through each. Include external stakeholders, localization updates, and a secure prototype. Commentful handles the entire flow without exporting a single static file. Many alternatives require stitching together PDFs, separate project boards, and email updates. If a tool can’t keep feedback tied to the original frame, it usually creates more work than it saves.

### Consider the cost of change
Switching tools impacts onboarding, permissions, and audit trails. Commentful’s close relationship with Figma means designers do not change their habits. They publish frames, collect notes, and merge text changes without leaving the file. Any alternative that introduces extra steps needs to justify the disruption. So far, none have.

---

---
type: article
title: Figma Email Plugin
description: Design, test, and ship HTML emails from Figma with the Emailify plugin.
datePublished: 2025-05-04T00:00:00.000Z
dateModified: 2025-05-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-figma-email-plugin/
markdownUrl: https://www.hypermatic.com/articles/emailify-figma-email-plugin.md
---

# Figma Email Plugin

Emailify is the plugin that finally lets me keep the entire email workflow in Figma. Design with modules, preview interactive states, export HTML, and even push tests to ESPs—all from the same panel.

### Design once, export anywhere
Build using Emailify blocks or your own components. When the content is ready, choose the output: raw HTML, MJML, Litmus-ready packages, or pre-configured exports for Klaviyo, Mailchimp, Braze, and dozens more.

### Integrated QA
Emailify can inline CSS, optimize images, and run quick previews so you know what the email will look like before sending it to QA tools. You can also generate shareable previews for stakeholders who just want to see it in a browser.

### Why it sticks
Keeping the workflow inside Figma means fewer files to maintain, no context switching, and faster iterations. Designers stay productive, and marketing teams get reliable HTML without waiting on developer bandwidth.

### Extras that save time
- Built-in Netlify uploads for quick preview links
- Click tracking parameters and UTM tagging baked into exports
- Dark mode toggles and mobile overrides without custom code

Emailify isn’t just a plugin; it’s the backbone of a modern Figma email workflow.

---

---
type: article
title: Design QA Tool
description: Pixelay is the design QA tool that keeps engineering builds honest by comparing them to Figma in the browser.
datePublished: 2025-05-03T00:00:00.000Z
dateModified: 2025-05-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-design-qa-tool/
markdownUrl: https://www.hypermatic.com/articles/pixelay-design-qa-tool.md
---

# Design QA Tool

Design QA usually happens when it’s already too late. Pixelay brings QA into the build process by letting you overlay Figma frames on live pages, local environments, or even behind-login prototypes. You can spot spacing issues, font mismatches, and missing states before launch day.

### Browser-native workflow
Install the Chrome extension, connect it to your Figma file, and you can load any frame as an overlay. Toggle between diff modes, adjust opacity, and capture screenshots to share with engineers.

### Collaboration features
Pixelay lets you add notes, highlight issues, and generate shareable links so QA, design, and engineering can resolve discrepancies quickly. It saves hours of “is this the latest build?” back-and-forth.

### QA checklist
1. Prepare a list of key flows in Figma.
2. Open Pixelay on the staging site and compare each frame.
3. Document issues with screenshots and send them as tasks to engineering.

It’s the design QA tool we always needed but never had until now.

### Reporting made easy
Export Pixelay’s annotated screenshots and attach them to tickets so engineers never wonder what needs fixing. Keep a shared QA log referencing each URL, frame, and timestamp so you can surface recurring issues during retros.

---

---
type: article
title: Figma to HTML Email
description: Export responsive HTML emails from Figma with Emailify in a couple of clicks.
datePublished: 2025-05-02T00:00:00.000Z
dateModified: 2025-05-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-figma-to-html-email/
markdownUrl: https://www.hypermatic.com/articles/emailify-figma-to-html-email.md
---

# Figma to HTML Email

Designing an email in Figma is easy; getting bulletproof HTML out of it usually isn’t. Emailify bridges that gap. Pick your frames, run the plugin, and you’ll get production-ready HTML tailored to whatever ESP you use.

### Built-in best practices
Emailify inlines CSS, supports dark-mode fallbacks, optimizes images, and wires up table-based layouts that pass Outlook’s quirky rendering engine. That alone saves days on every campaign.

### ESP-specific exports
Select Mailchimp, Braze, Klaviyo, Campaign Monitor, Marketing Cloud—Emailify adapts the export to their merge tags and folder structures. If you just need raw HTML or MJML, those are available too.

### Figma → HTML workflow
1. Assemble the email using components or templates.
2. Run Emailify, check the preview, and tweak responsive settings if needed.
3. Export the HTML package and upload it to your ESP or send directly via Emailify’s integrations.

It’s the smoothest path I’ve found from design to inbox.

### QA without drama
Because Emailify handles quirks like hybrid coding and VML buttons, QA cycles shrink dramatically. Instead of chasing random Outlook bugs, you focus on messaging. If you still run Litmus or Email on Acid tests, you’ll see how often Emailify passes on the first try.

### Bonus features
- Auto-generated text-only versions
- Built-in link tracking toggles
- Optional downloads for PNG or PDF previews to share with stakeholders

Emailify makes “Figma to HTML email” a one-click promise instead of a wish.

---

---
type: article
title: Compare Design to Website
description: Use Pixelay to overlay Figma designs on live websites and spot build issues instantly.
datePublished: 2025-04-30T00:00:00.000Z
dateModified: 2025-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-compare-design-to-website/
markdownUrl: https://www.hypermatic.com/articles/pixelay-compare-design-to-website.md
---

# Compare Design to Website

Design handoff is never perfect. Pixelay lets me overlay Figma frames on top of the actual website—live or staging—and see discrepancies in seconds. It’s faster than screenshot diffs and far more accurate than eyeballing.

### How it works
Connect Pixelay to your Figma file, open the browser extension, and choose the frame you want to compare. The plugin overlays it on the current page with adjustable transparency, diff modes, and pixel heatmaps. Even a 2px shift becomes obvious.

### Fix issues before QA escalates
Developers can check alignment themselves, product managers can review builds without hunting for differences, and designers get confidence that the shipped UI matches what was approved.

### Comparison workflow tip
1. Publish the frames through Pixelay.
2. Share the comparison link with engineering or open it yourself during QA.
3. Annotate any mismatches directly in Pixelay or capture screenshots for tickets.

It turns design-vs-build comparisons into a quick routine instead of a painful chore.

---

---
type: article
title: Visual Regression Testing
description: Use Pixelay for lightweight visual regression testing against your Figma source of truth.
datePublished: 2025-04-23T00:00:00.000Z
dateModified: 2025-04-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-visual-regression-testing/
markdownUrl: https://www.hypermatic.com/articles/pixelay-visual-regression-testing.md
---

# Visual Regression Testing

Full-blown visual regression suites can be heavy. Pixelay offers a lighter alternative by letting you compare the live site to your Figma mocks whenever you ship changes. It’s perfect for teams that want visual confidence without writing custom automation scripts.

### Manual precision with automated help
Pixelay handles the annoying parts—pulling the right frames, aligning them, and showing diffs. You still use your judgment to decide if a change is acceptable, which keeps the process flexible.

### Works across environments
Point Pixelay at production, staging, or local builds. That makes it easy to catch regressions before they impact customers.

### Regression routine
1. Build a checklist of high-risk screens.
2. After each release, overlay those screens using Pixelay and capture diffs.
3. If something looks off, file an issue with the attached screenshot and fix it immediately.

It’s visual regression testing that actually fits into a design team’s day-to-day rhythm.

### Combine with automation
Trigger Pixelay comparisons after CI deploys to staging. Designers get notified with a list of diffs to review, turning regression testing into a predictable ritual rather than a fire drill.

---

---
type: article
title: Email Template Builder
description: Design and export HTML email templates directly from Figma with Emailify’s component-driven builder.
datePublished: 2025-04-22T00:00:00.000Z
dateModified: 2025-04-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-email-template-builder/
markdownUrl: https://www.hypermatic.com/articles/emailify-email-template-builder.md
---

# Email Template Builder

Every email team has the same problem: design in one tool, build in another. Emailify collapses that gap by giving you a full email template builder inside Figma. Drag in responsive modules, tweak them with your design system, and export production-ready HTML in seconds.

### Component-first workflow
Emailify ships with modules for headers, hero sections, promotions, receipts, transactional summaries, and more. Swap images, copy, and colors just like you would with any Figma component. Once approved, export code that’s already tested across major clients.

### Exports made for real ESPs
Choose from dozens of email platforms (Klaviyo, Braze, Mailchimp, Campaign Monitor, etc.), or grab raw HTML/MJML if you prefer. Emailify optimizes images, inlines styles, and bundles assets so your development team doesn’t have to.

### My build process
1. Assemble the layout using Emailify’s components or your own.
2. Connect modules to data (prices, localized text) if needed.
3. Export directly to HTML, MJML, or your ESP and share the hosted preview link for review.

It’s equal parts design freedom and production discipline—the combination teams actually need.

### Iterate faster with data
Because Emailify runs in Figma, you can hook modules up to CopyDoc spreadsheets or variables. That makes personalization and localization straightforward. The email template builder becomes a living system where marketing teams swap offers without reinventing the wheel.

### Collaboration tips
- Create template libraries for lifecycle, product, and marketing emails so every team starts from proven layouts.
- Invite stakeholders to review the hosted previews; they can comment on real HTML instead of flat mocks.
- Keep a changelog page in Figma documenting which templates were updated and when so QA knows what to regression test.

Emailify shifts your email ops from brittle to resilient.

---

---
type: article
title: Figma ad creative workflow for agencies
description: A practical ad creative workflow for agencies managing campaign variants and production output in Figma.
datePublished: 2025-04-22T00:00:00.000Z
dateModified: 2025-04-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/figma-ad-creative-workflow-for-agencies/
markdownUrl: https://www.hypermatic.com/articles/figma-ad-creative-workflow-for-agencies.md
---

# Figma ad creative workflow for agencies

A practical ad creative workflow for agencies managing campaign variants and production output in Figma. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Bannerify

[Bannerify](/bannerify/) is one of the more useful tools in this workflow. Bannerify is useful here because it keeps banner production inside Figma instead of pushing the team into a separate build step. For teams creating multiple ad sizes, motion variants, or late campaign revisions, that usually means less repetition and a cleaner review cycle.

### HyperCrop

[HyperCrop](/hypercrop/) is one of the more useful tools in this workflow. HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Automated Image Cropping
description: A practical playbook for handling automated image cropping requests with HyperCrop without leaving Figma.
datePublished: 2025-04-21T00:00:00.000Z
dateModified: 2025-04-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-automated-image-cropping/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-automated-image-cropping.md
---

# Automated Image Cropping

Any time a launch starts to sprawl across channels, automated image cropping becomes the chore nobody wants to own. I am always surprised by how quickly a simple hero graphic multiplies into a dozen deliverables, each with its own aspect ratio, focus point, and file type rules. HyperCrop is the fastest way I have found to absorb those requests directly inside Figma. Instead of exporting versions and praying actions hold up, the plugin keeps every crop tied to the source frame so the team can keep iterating without worrying about production artwork drifting.

I lean on HyperCrop when schedules are compressed or when a campaign will clearly require future localization passes. Smart detection, reusable presets, and batch exporting make it feel like cheating compared to the Photoshop assembly line we all grew up with.

### HyperCrop makes automated crops predictable
HyperCrop reads the contents of each frame, finds the subject, and applies your safe area rules automatically. That removes the stress of hand-drawing focus boxes or guessing how much padding will be needed when the file lands in paid social. More importantly, every preset you create keeps the entire team honest about what "approved" sizes look like, so brand reviews stay calm even as requirements change.

### Build automation around the request, not the other way around
1. Label the frames or components that need alternate crops so they stay organized in the layers panel.
2. Choose or create a preset that mirrors the exact spec sheet from marketing, marketplace ops, or the growth team.
3. Skim the smart-crop previews, nudge any tricky frames, then export the full batch as PNG, JPG, or WebP without switching apps.

Once you have done this a couple of times, you can clone the preset for future launches or hand it to another teammate without needing to explain all the nuance again.

### Automate the boring parts, stay present for the creative ones
Automated image cropping should not be the thing that slows your team down the night before a release. HyperCrop keeps the repetitive slicing, renaming, and exporting in one repeatable flow so you can focus on the craft decisions that actually move a campaign forward. Pair it with TinyImage if you also want compression handled in the same sitting, and you will never dread the "we also need 20 more crops" message again.

### Keep stakeholders informed
Share HyperCrop’s preview grid with marketing or localization partners before exporting. They get to see how each ratio treats the subject, and you catch potential red flags without wasting a batch export. When approvals land, rerun the preset and drop the finished files into your shared drive.

### Tips for scaling
- Store presets in a shared Figma library so anyone on the team can run the same settings.
- Tag exports with campaign names right from HyperCrop’s naming options to keep asset folders organized.
- Pair HyperCrop with automation (Zapier, custom scripts) to upload finished crops to DAMs or ticketing systems automatically.

---

---
type: tutorial
title: How to export HTML emails from Figma to Bento using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-04-19T00:00:00.000Z
dateModified: 2025-04-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-bento-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-bento-using-emailify.md
---

# How to export HTML emails from Figma to Bento using Emailify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Bento email marketing platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little resources icon in the toolbar, and then search for "Emailify." Under the plugins tab, just click on the Emailify item. You can either run the Figma plugin by clicking on the little "Run" button, or I'd recommend clicking on the "Save" icon, which will allow you to save the plugin to your plugins list for easy access later.

I've already clicked on the save icon, so I'm just going to go to my Figma canvas, right-click anywhere, go down to "Plugins", then to "Saved Plugins", and click on Emailify. That’s going to run the plugin we saved a second ago.

If you're new to the plugin, the way that it works is it helps you to design HTML emails and then export those to production-ready code with one click. For example, we can just spin up a new frame by putting in a template name here, or you can browse the existing templates that come with the plugin and clone one of those into your Figma file.

We'll be having a look at one of those in a moment. But just as a really quick overview to get started, you can create a new Emailify frame, and that will allow you to start adding components and layers down here, which you can then customize to your own brand and drop in your own content and things like that.

It's a really quick way of building out an email. You can use these components and tools down here to design emails within a few minutes and get those spun up as reusable components. You can customize this however you like.

To do a nicer example today, I'm just going to grab one of the templates that we looked at and spin up the Figma plugin in this Figma file. Then we're going to preview that and upload it to Bento.

You can preview the emails in Figma by clicking on the little preview button in the Figma plugin. That’s going to spin up a real HTML preview inside Figma, so you can see what it’s going to look like on desktop and mobile. You can also view those at the same time. If you want to look at both of those next to each other, you can do that.

You can override the content. For example, if you wanted to add mobile overrides, you could do that for any of these layers. You can see here it’s updating the font size on mobile but leaving it on desktop.

I'm not going to go through all of the design features in detail today. If you're new to the plugin and want to learn more about how the design works and how the plugin works for designing emails, please check out some of the other YouTube tutorials on the channel.

For today, I'm going to assume that you've already got your design the way you want and now want to export it into the Bento email platform. We're going to do that now.

Before we do, the last thing we need to do is add a Bento footer. If you go to the Footers tab in the Figma plugin, you’ll see under the letter "B" there’s a Bento email footer. If we click on that, it adds a new component or row to our template. Of course, you can customize that design however you like, but the important thing is that the unsubscribe and view-in-browser links are pre-populated.

If we click on those link layers and check out the tag, we can see the clickable URL is set to the Bento unsubscribe link. This is a special Bento tag, and the same applies for the view-in-browser link. These are pre-populated, and you need that to be able to send out the email. If it doesn’t have an unsubscribe link like this, Bento will add its own, so you want to make sure to add your own. You can customize the design to your preference.

Now that we've got that set up and we've previewed the email and are happy with it, all we need to do is go to the Export HTML button in the plugin and click on that.

Change the option from "HTML Email" — which is the default export option that will download a zip to your computer — and go down to the Platform Integrations section to find Bento. Click on the Bento option.

You can enter your subject line and preheader text. The preheader text is what shows up after the subject line in your email client. Add that preheader text there. You can also toggle whitespace if you want to add extra space after the preview text so that the body content doesn’t show up. I always prefer to have that on, so I’ll leave it toggled.

Then click on "Export for Bento." This will automatically generate all the HTML code, upload all the images, and give us a nice zip file we can now download.

Once the export finishes, click on the "Download Your Zip File" button and then "Save." Once that’s saved to your desktop, open up the folder. You’ll see the Emailify template folder, which matches the Figma frame name.

Open that folder and find the index.html file. Drag that into your browser. You’ll see our HTML has been exported as expected.

Next, go to the Broadcasts page in the Bento platform. You can get there by going to the Emails section on the left, clicking on "Broadcasts," and then clicking "Create Broadcast" in the top right.

Click on "Create Broadcast." Once that loads up, give it a name. I’m just going to call this "Test Email." You can fill in all the recipient details and such. For today, I’ll leave that empty and click on "Save and Continue."

After clicking "Save and Continue," you’ll see a screen asking how you want to build your email. Go to the bottom right and click on "Code Mode." This allows us to paste our code into their code editor.

Click the Code Mode tile, which loads an empty code editor. Go back to your HTML file that we just opened from the zip folder — the index.html file. Open it in your browser, right-click anywhere, and choose "View Page Source." Select all of that and copy it to your clipboard.

Then go back to Bento. Delete anything in the HTML editor and paste in the code. You’ll see all of the code has been pasted in — this is the full HTML export from Emailify.

Click on "Save Changes." You can preview that by clicking on the "Preview" tab. This will load up the preview of the HTML we just pasted in. It’s looking really good.

Importantly, you can see that the unsubscribe and view-in-browser links are valid. In the bottom left of the browser window, you’ll see they are being pre-populated, and Bento recognizes them as valid tags. That’s all looking great.

You can send a preview to yourself if you want. Otherwise, you can click on "Leave Editor." That will show you what the email looks like and have it ready to send.

You’ll notice there’s no subject line in here. That’s because you need to add it manually again. You can see in the export settings, we added the subject line, and that populates the title tag. For example, if someone clicked on the view-in-browser link, the title tag you see at the top would be populated from the Emailify input.

You still need to copy that directly into the Bento platform manually. Just paste it in there. You don’t have to set the preview text again if you've already set it in Emailify. If not, feel free to paste it into Bento. But if you’ve already set it in Emailify, setting it in Bento will just duplicate it — use one or the other.

Anyway, that’s basically it. Once you’ve pasted everything in, the email is now ready to review and send as a custom HTML email — completely ready to be sent as a custom template from the Bento email marketing service.

If you're using Bento — bentonow.com is the domain — and you’ve been wondering how to get a custom HTML email designed with your brand and content into the platform to send out, this is a really easy way to do that. If you're already using Figma and want to spin up an email quickly, then export the code automatically to be uploaded into the Bento platform, this is the way to go.

I’ll leave it there for today. I just wanted to keep that really simple. Hopefully, that helps your workflow if you're a Figma and Bento user.

Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Pixel Perfect Comparison
description: Pixelay gives you pixel-perfect comparisons between Figma mocks and production builds.
datePublished: 2025-04-18T00:00:00.000Z
dateModified: 2025-04-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-pixel-perfect-comparison/
markdownUrl: https://www.hypermatic.com/articles/pixelay-pixel-perfect-comparison.md
---

# Pixel Perfect Comparison

If your team cares about pixel perfection, Pixelay is essential. Its diff view highlights even 1px differences, and its overlay tools make it obvious when fonts, spacing, or imagery drift from the spec.

### Tolerance controls
Set tolerance thresholds to ignore acceptable variations (e.g., anti-aliasing) while still surfacing real bugs. Pixelay’s heatmaps make it easy to spot areas that exceed your defined threshold.

### Cross-browser sanity checks
Because the comparison happens in the browser, you can test Chrome, Safari, Firefox, and even mobile web by scanning QR codes. That ensures parity across devices.

### Comparison habit
1. For each release, define which pages must be pixel-perfect.
2. Run Pixelay comparisons on those pages before sign-off.
3. Attach any diffs to your QA checklist and resolve them quickly.

Pixel perfection isn’t about being fussy; it’s about delivering trustworthy experiences. Pixelay keeps that bar attainable.

### Share wins
When a comparison passes with zero diffs, capture a screenshot and celebrate the engineering team. Positive reinforcement keeps folks invested in the process instead of viewing pixel perfection as a chore.

---

---
type: article
title: Favicon.io Alternative
description: Why Favvy is my Favicon.io alternative when I want favicon production to live inside Figma.
datePublished: 2025-04-11T00:00:00.000Z
dateModified: 2025-04-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-favicon-io-alternative/
markdownUrl: https://www.hypermatic.com/articles/favvy-favicon-io-alternative.md
---

# Favicon.io Alternative

Favicon.io is handy for quick experiments, but it forces you to upload assets outside Figma and rebuild work every time specs change. Favvy keeps favicon production inside the file you’re already designing, so brand changes cascade automatically. When I compare the two, I look at flexibility and workflow fit.

### Flexibility
Can the tool handle PWA manifests, Windows tiles, Safari pinned tabs, and maskable icons? Can you customize padding, background colors, and naming conventions? Favvy checks all of those boxes, while most alternatives stop at a single `.ico` file.

### Workflow fit
Favicon.io requires exporting PNGs manually, uploading them, and copying snippets back to your repo. Favvy runs on top of your master icon frame, exports every size, and generates manifest + HTML code without context switching. Future tweaks take seconds instead of another trip through the web app.

Unless another alternative matches that depth, I’m sticking with Favvy for every favicon request.

### Evaluation tip
Run an entire site launch through the alternative—multiple brands, PWA requirements, and platform-specific quirks. Favvy breezes through because presets store your configuration. Most online generators require starting from scratch each time, which wastes hours.

### Team benefits
Because Favvy exports manifest files and HTML snippets, engineers trust the output. Alternatives that only deliver images create more work downstream. Saving time for cross-functional partners is a good enough reason to keep Favvy in the stack.

---

---
type: article
title: Comment on Figma Without Account
description: Invite stakeholders to comment on Figma work without forcing them to create accounts by routing reviews through Commentful.
datePublished: 2025-04-08T00:00:00.000Z
dateModified: 2025-04-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-comment-on-figma-without-account/
markdownUrl: https://www.hypermatic.com/articles/commentful-comment-on-figma-without-account.md
---

# Comment on Figma Without Account

Clients and execs rarely want another login just to approve a design. Commentful lets them review Figma work without creating an account, but still keeps everything secure. Share a password-protected link, and stakeholders can leave notes, upload references, and approve changes from any browser.

### Secure access controls
Every Commentful board can be locked with passwords, expiration dates, and email whitelists. That keeps prototypes away from public share links while giving reviewers a frictionless way to participate.

### Turn comments into tasks
Unlike static PDFs, Commentful converts each note into a trackable item. You can assign it, update the status, and sync decisions back to Figma. Reviewers see progress in real time, which builds trust even if they never open Figma itself.

### Invite-only workflow
1. Publish selected frames to a Commentful board.
2. Send stakeholders the secure link so they can comment without accounts.
3. Resolve each note inside Commentful and keep the audit trail for future reference.

People should focus on feedback, not onboarding. Commentful delivers that experience while keeping the design team firmly in control.

### Keep stakeholders engaged
Because Commentful lives in the browser, stakeholders can review from phones, tablets, or locked-down corporate laptops where the Figma desktop app is not allowed. The interface walks them through the file, highlights changes, and reminds them when decisions are pending. No more waiting days for someone to request access just to reply.

### Best practices
- Use personalized messages when sending links so recipients know why they were invited and what to look for.
- Enable watermarking for especially sensitive work while still keeping the barrier to entry low.
- After reviews end, revoke access with one click to keep the file list tidy and secure.

Reviewing Figma work without accounts should feel effortless; Commentful makes that the default.

---

---
type: article
title: HTML5 Banner Maker
description: Bannerify doubles as an HTML5 banner maker inside Figma, giving designers total control over motion and exports.
datePublished: 2025-04-06T00:00:00.000Z
dateModified: 2025-04-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-html5-banner-maker/
markdownUrl: https://www.hypermatic.com/articles/bannerify-html5-banner-maker.md
---

# HTML5 Banner Maker

Calling Bannerify a “banner maker” undersells how much control you get. It lets me craft HTML5 banners exactly the way I want them, preview the motion in the same file stakeholders comment on, and export the final creative without waiting on engineering help.

### Craft first, automate second
I design each banner in Figma, then use Bannerify’s animation timeline to choreograph entrances, exits, and loops. The preview happens directly within the plugin, so I can iterate until it matches the storyboard. Once it does, exporting to HTML5 is literally clicking a button.

### Outputs that check every box
Bannerify generates standards-compliant HTML, injects clickTags, compresses assets, and packages everything neatly. Need GIF, MP4, or WebM versions too? Export them alongside the HTML so every channel receives the same creative treatment.

### Build once, ship everywhere
1. Lay out the creative using your usual Figma components.
2. Animate within Bannerify, cloning the animation across every required size.
3. Download the HTML5 packages and share the hosted previews for sign-off.

That’s how a banner maker should work in 2024: design, animate, export—all from the same interface.

### Teams who get the most value
In-house growth teams love Bannerify because it ties into their experimentation cadence. Agencies appreciate that every client can have a dedicated file with reusable components. Localization vendors can swap copy and re-export without poking at code. Everyone touches the same Figma source, which keeps brand consistency tight even when dozens of people contribute.

### Best practices for smooth production
- Establish a naming convention for frames and exports so campaign reporting stays organized.
- Save animation presets for common modules (hero, product carousel, testimonial) to keep pacing reliable.
- Use Bannerify’s asset optimization warnings to fix file weights before the media team escalates them.

When your “HTML5 banner maker” respects the way your team already collaborates, production becomes predictable and experimentation gets faster. That is exactly why Bannerify has a permanent spot in my toolkit.

---

---
type: article
title: Export ad variants from Figma
description: How to handle ad variants in Figma when one campaign needs many sizes and crops.
datePublished: 2025-04-05T00:00:00.000Z
dateModified: 2025-04-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/export-ad-variants-from-figma/
markdownUrl: https://www.hypermatic.com/articles/export-ad-variants-from-figma.md
---

# Export ad variants from Figma

How to handle ad variants in Figma when one campaign needs many sizes and crops. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Bannerify

[Bannerify](/bannerify/) is one of the more useful tools in this workflow. Bannerify is useful here because it keeps banner production inside Figma instead of pushing the team into a separate build step. For teams creating multiple ad sizes, motion variants, or late campaign revisions, that usually means less repetition and a cleaner review cycle.

### HyperCrop

[HyperCrop](/hypercrop/) is one of the more useful tools in this workflow. HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Figma to Illustrator Export
description: Export Figma work to Adobe Illustrator with Convertify when you need vector precision outside the browser.
datePublished: 2025-03-31T00:00:00.000Z
dateModified: 2025-03-31T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-figma-to-illustrator-export/
markdownUrl: https://www.hypermatic.com/articles/convertify-figma-to-illustrator-export.md
---

# Figma to Illustrator Export

Illustrator is still the lingua franca for many print and illustration teams. Convertify lets me export Figma frames straight into .ai files so those teams can continue refining artwork without starting over. The vectors remain editable, layers stay organized, and text remains live if the fonts are available.

### Why it beats SVG hacks
Exporting SVGs and opening them in Illustrator kind of works, but you lose layers, masks, and text formatting. Convertify keeps the structure intact, so designers can hit the ground running regardless of which tool they prefer.

### Export checklist
1. Name layers descriptively before exporting; those names carry over.
2. Outline text only when the receiving team doesn’t have the fonts installed—otherwise keep them live.
3. Share any color profiles or print specs alongside the file so nothing gets lost in translation.

When projects jump between teams, Convertify keeps everyone aligned without sacrificing quality.

### Iterate with confidence
Need to adjust a brand element after the Illustrator team provides feedback? Update the Figma source, rerun Convertify, and deliver a new .ai file in minutes. Because the structure stays consistent, the Illustrator designer can merge changes without losing their tweaks.

### Ideal situations
- Handoff to packaging vendors or printers
- Collaboration with illustrators who rely on Adobe brushes
- Creating press-ready assets while maintaining a single source of truth in Figma

Convertify makes “Figma to Illustrator export” a button press instead of a half-day chore.

---

---
type: article
title: Secure Design Sharing
description: Share confidential designs securely with Crypto instead of rolling dice on open Figma links.
datePublished: 2025-03-30T00:00:00.000Z
dateModified: 2025-03-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-secure-design-sharing/
markdownUrl: https://www.hypermatic.com/articles/crypto-secure-design-sharing.md
---

# Secure Design Sharing

Secure design sharing needs three things: encryption, access control, and an audit trail. Crypto delivers all three without forcing designers out of Figma. Select the work, publish through the plugin, and Crypto handles the rest.

### Protect prototypes, decks, and files
Crypto supports prototypes, PDFs, MP4 walkthroughs, and more. That means you can share every deliverable through the same secure channel instead of mixing tools.

### Transparency for admins
Admins can see which links exist, when they expire, and who accessed them. If something looks off, revoke the link instantly and issue a new one. That visibility is crucial when handling sensitive launches.

### Simple sharing pattern
1. Publish the material with Crypto.
2. Set permissions (passwords, view limits, watermarking).
3. Send the link and record feedback without ever making the file public.

It’s the upgrade we all needed once design work became business-critical.

### Integrate with workflows
Embed Crypto links inside project briefs, Jira tickets, or Notion docs. Stakeholders follow one link, and you maintain centralized control instead of scattering exports across email threads. When the project wraps, archive the link and attach the audit log to your records.

### Extra safety nets
- Enable download throttling for especially sensitive assets.
- Require viewers to agree to terms before seeing the file.
- Schedule automated reminders to review active links so nothing slips through the cracks.

Secure design sharing shouldn’t be an afterthought—it’s part of the craft. Crypto makes it seamless.

---

---
type: article
title: Batch Image Compressor
description: Compress entire batches of Figma exports in seconds with TinyImage.
datePublished: 2025-03-29T00:00:00.000Z
dateModified: 2025-03-29T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-batch-image-compressor/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-batch-image-compressor.md
---

# Batch Image Compressor

Designers ship dozens of assets per launch—hero images, marketing banners, app screenshots. TinyImage lets me compress them all from inside Figma without juggling external tools. Select the layers, run the plugin, and it churns out optimized files at the quality targets you set.

### Control without compromise
Pick between lossless and lossy modes, set target file sizes, and preview the results before exporting. TinyImage shows side-by-side comparisons so you know exactly how far you can push compression without visible artifacts.

### Batch rename and organize
While exporting, TinyImage can rename files, add suffixes, and drop them into neatly structured folders. That saves me from cleanup before handing assets to engineering or marketing.

### Batch compression workflow
1. Select the layers, slices, or components that need optimization.
2. Launch TinyImage, set your compression presets, and preview.
3. Export the batch as PNG, JPG, WebP, AVIF, GIF, or MP4—whatever the project requires.

It’s the batch compressor I wish every design file had built in.

---

---
type: tutorial
title: How to export HTML emails from Figma to Yotpo using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-03-27T00:00:00.000Z
dateModified: 2025-03-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-yotpo-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-yotpo-using-emailify.md
---

# How to export HTML emails from Figma to Yotpo using Emailify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Yotpo email marketing platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little resources icon, and search for Emailify. Under the "Plugins" tab, if you click on the "Emailify" item, you can run the Figma plugin by either clicking on the "Run" button here, or I'd recommend clicking on the "Save" icon to save it to your plugins list for easy access.

I've already clicked on the save icon, so I'm just going to go to my Figma canvas, right-click anywhere, go down to "Plugins", then go down to "Saved Plugins", and click on the Emailify item. That’s just going to run the Figma plugin we saved a second ago.

If you're new to the plugin, the way that it works is it helps you design HTML emails in Figma and then automatically export those to production-ready HTML directly from the plugin.

To get started, I'm just going to create a brand new template called "My Template" and click on "Add New Emailify Container." That’s going to add a little Emailify frame to your page that we can now start populating with components.

I'm not going to be going through all of the design features in the Figma plugin today, but if you're interested in learning more, I'd highly recommend checking out the other videos on the YouTube channel or going to the Emailify documentation site. Today I'm just going to be creating a really simple template using some of the components here, which I'm not going to be customizing too much. You can obviously go through and customize the design to your liking, but I’ll create a really simple one to show you how to upload it to the Yotpo platform.

Once you've got your email design ready to go, the last thing you need to do is go to the Footer tab. Underneath Platforms, scroll right down to the bottom and find the letter "Y" — you'll see the Yotpo footer option. Go ahead and click on that component, and it's going to populate the required links and the full address.

These are required fields in the Yotpo platform. You can see if I go to the navigation link, the unsubscribe URL is automatically pre-populated, along with the "View in Browser" link and the store full address variable, which is required as well. Make sure that's added. Again, you can customize this to your liking design-wise, but you just want to ensure you've got those footer links in there before exporting your template.

Once you've got that designed the way you'd like, you can preview the email by clicking on the little Preview icon in the plugin. That allows you to view the HTML rendered on desktop and mobile. This is real HTML — this is what the code is going to look like when it gets exported.

You can customize it further, including adding mobile overrides. If you go into the Settings panel, you can override things like font size or padding on mobile. I'm not going to be doing that today — I'll just be leaving everything as the default and using this template as-is.

Once your template is ready, click on the "Export HTML" button in the plugin. By default, it's set to the "HTML Email" option, which is the standard one. We want to scroll down to the "Platform Integration" section, find the Yotpo option, click on that, and now we can populate our subject line.

Type in something like "My Test Subject" and add your preheader text — this is the text that shows up next to or under the subject line in email clients. Add the preheader text here, and when you're ready, click on the "Export for Yotpo" button.

This will automatically generate all the HTML code, upload the images, and give you a button that says "Download Your ZIP File." Once that appears, click on it and save the ZIP file anywhere on your computer.

Once you've unzipped it, open up the folder and you'll see that your template has now been exported as an index.html file inside the folder you named. In this case, it's just called "My Template." You can preview it by opening the previews.html file, which gives you a preview on desktop and mobile — a nice preview page you can send to clients for approval and things like that.

For the email itself, it's the index.html file in that folder. This is your exported email, ready to go. Leave that open because we're going to grab the HTML code in a second.

Next, log into the Yotpo platform and navigate to the "Email Templates" page on the left-hand side. Underneath "Campaigns" in the menu, click on "Email Templates," which will load up the templates page.

Go to the "My Templates" tab and click on "Start From Scratch." We're not going to use the visual editor — instead, select the middle option called "HTML Editor." That allows us to paste in the custom code we just exported from Figma.

Click "Next," and once that loads, remove all the default code included. Highlight all of it and delete it. Then go back to your index.html file, right-click anywhere outside the email, and click "View Page Source." Select all of the source code — Command+A or Control+A — and copy it to your clipboard.

Go back to Yotpo and paste all of that code into the HTML editor. You'll see all of your exported HTML is now loaded into Yotpo. The unsubscribe links, view-in-browser links, and the full address variable are all added. You shouldn't run into any issues when saving.

Click on "Save and Close" at the top. Once that saves, you'll see your template is now included under your "My Templates" list. You can now use that to create a campaign or any other type of flow inside the Yotpo platform.

To preview it, you can click on the preview option. You’ll notice the unsubscribe link and the view-in-browser link at the bottom of the window are populated, which is exactly what we want.

Now that it's ready, you can use this to create a campaign. Click on the "Create" button, enter your email subject — the subject line you added earlier in Emailify will have been added to the title tag, so if someone clicks on the view-in-browser link, that's what shows up. You'll also want to paste the subject into the subject line field in Yotpo.

If you already added the preview text or preheader text in Emailify, you don’t need to re-enter it in Yotpo. Just leave that blank. If you enter it in both places, it will double up the text. If you didn’t add it in Emailify, then go ahead and add it in Yotpo instead — but again, only use one or the other.

Once you’re ready, you can schedule the email or send it right away. You can also run test sends beforehand — I recommend using a platform like Litmus or just sending a test to yourself.

That’s basically everything. I just wanted to quickly run through the end-to-end flow for designing and exporting HTML templates from Figma and getting those into the Yotpo platform as custom HTML templates. That’s going to be the best way to do it.

The platform doesn’t have an API to automate this at the moment, so you will need to copy and paste the code into your email templates. But once you've saved the template, you can reuse it as many times as you want. Just go back to "Email Templates," click on "My Templates," and go from there.

That’s basically it. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Figma Security Plugin
description: Crypto is the security plugin that locks down Figma prototypes, presentations, and exports with enterprise-grade controls.
datePublished: 2025-03-26T00:00:00.000Z
dateModified: 2025-03-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-figma-security-plugin/
markdownUrl: https://www.hypermatic.com/articles/crypto-figma-security-plugin.md
---

# Figma Security Plugin

Design files increasingly contain sensitive product plans. Crypto is the Figma security plugin that keeps those files safe while still letting stakeholders review them. You can encrypt share links, watermark previews, limit downloads, and collect NDA consent—all from the plugin panel.

### Built for teams with real requirements
SOC 2, HIPAA, GDPR—Crypto helps you meet the spirit of those frameworks by restricting who can see what and for how long. Logs are available for every link, making audits straightforward.

### Features I use most
- Password-protected prototype links
- Watermarks with viewer info
- Expiring downloads for PDFs and videos
- Screen recording tools for folks who can’t get access but still need a walkthrough

If security conversations are slowing your launches, Crypto gives you the talking points and tooling to keep moving.

### Deploy across the org
Roll out Crypto as part of your design system onboarding. Provide templates for access settings (internal review, external beta, executive preview) so designers know exactly which controls to enable. The consistency helps security teams trust the process and approve releases faster.

### Pairing recommendations
Combine Crypto with password managers or SSO policies so stakeholders never share secrets in chat threads. Store link metadata in your documentation hub (Notion, Confluence) for easy reference during audits.

Crypto is the rare security plugin that respects creative workflows instead of hindering them.

---

---
type: article
title: Figma to React
description: Export React components from Figma with Weblify and keep engineers focused on logic instead of layout.
datePublished: 2025-03-24T00:00:00.000Z
dateModified: 2025-03-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-to-react/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-to-react.md
---

# Figma to React

React teams want reusable components with props, not static HTML. Weblify converts Figma layouts into React components that mirror your variant names and design tokens. It’s the perfect starting point for building UI libraries or feature prototypes.

### Prop-aware exports
If you use variants for states (primary, secondary, disabled) or sizes, Weblify turns them into props inside the generated component. Engineers immediately see how to toggle states without digging through documentation.

### Hooks and structure
Weblify outputs functional components with optional hooks or context placeholders. Developers can wire up data quickly without rewriting the entire UI from scratch.

### React export workflow
1. Select the component or section inside Figma.
2. Run Weblify choosing the React export.
3. Drop the code into your project, add logic, and push to Git.

It makes React handoffs fast, consistent, and pleasant.

### Collaboration tip
Store Weblify’s React snippets in Storybook so product managers and QA can see live components without waiting for them to land in your main app. When the design evolves, rerun Weblify and refresh the story with updated props.

---

---
type: article
title: Pitchdeck vs Beautiful.ai
description: A Figma-first comparison of Pitchdeck and Beautiful.ai for designing modern presentations.
datePublished: 2025-03-21T00:00:00.000Z
dateModified: 2025-03-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-pitchdeck-vs-beautiful-ai/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-pitchdeck-vs-beautiful-ai.md
---

# Pitchdeck vs Beautiful.ai

Beautiful.ai automates layout decisions, which is handy if you don’t want to design. Pitchdeck, on the other hand, gives designers full control inside Figma and handles the rest—exports, analytics, presenter mode. If you already have a design system or need to match product UI precisely, Pitchdeck wins.

### Ownership vs automation
Beautiful.ai chooses layouts for you. Pitchdeck lets you decide everything, because you’re literally designing in Figma. That’s essential when brand fidelity matters or when you’re showcasing product screens that need to look real.

### Collaboration
Pitchdeck plays nicely with Figma comments, libraries, and versioning. Beautiful.ai lives in its own environment, so collaboration happens outside your design stack. For multidisciplinary teams, fewer tools usually equals fewer miscommunications.

### Recommendation
If you need an AI-powered template generator, Beautiful.ai is solid. If you care about pixel-level control, cross-export support, and analytics tied to your Figma files, stick with Pitchdeck.

### Hybrid workflows
Some teams design concept slides in Beautiful.ai to brainstorm but move to Pitchdeck once they need stakeholder-ready polish. Because Pitchdeck pulls directly from Figma, you keep ownership of the final assets and can export to any format with analytics intact.

---

---
type: article
title: Banner design workflow for marketing teams
description: How marketing teams can structure banner design and export workflows directly in Figma.
datePublished: 2025-03-19T00:00:00.000Z
dateModified: 2025-03-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-banner-design-workflow-for-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/bannerify-banner-design-workflow-for-marketing-teams.md
---

# Banner design workflow for marketing teams

How marketing teams can structure banner design and export workflows directly in Figma. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for banner design workflow for marketing teams when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Bannerify fits into the process

Bannerify is useful here because it keeps banner production inside Figma instead of pushing the team into a separate build step. For teams creating multiple ad sizes, motion variants, or late campaign revisions, that usually means less repetition and a cleaner review cycle.

With Bannerify, teams can usually:

- turn banner frames into production-ready ad outputs
- keep motion and copy changes inside the same Figma workflow
- export campaign variants faster when the brief changes late

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Bannerify](/bannerify/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If banner production is the real bottleneck, Bannerify is the most direct place to start. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: Figma Chrome Overlay
description: Overlay any Figma frame on a Chrome tab using Pixelay to validate builds without screenshots.
datePublished: 2025-03-19T00:00:00.000Z
dateModified: 2025-03-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-figma-chrome-overlay/
markdownUrl: https://www.hypermatic.com/articles/pixelay-figma-chrome-overlay.md
---

# Figma Chrome Overlay

Pixelay’s Chrome overlay is the fastest way to QA a build. Pick a Figma frame, layer it over the tab you’re inspecting, and scrub between the two views. No exports, no uploads—just direct Figma-to-browser comparisons.

### Ideal for responsive testing
Resize the browser window and watch how the overlay responds. You can align the design to specific breakpoints and ensure the real site matches. It beats juggling dozens of screenshots per viewport.

### Lightweight workflow
1. Install the Pixelay extension and sign in.
2. Navigate to your staging or production site.
3. Select the matching frame from Pixelay and overlay it instantly.

Designers, engineers, and QA folks can all run this workflow with minimal setup.

### Sharing tip
Capture overlay screenshots with annotations and drop them into Slack or Jira. Stakeholders see exactly what changed without hunting for the right environment, and engineers can jump straight to the offending section of code.

---

---
type: article
title: Figma Image Compression
description: Compress Figma images without leaving the file by using TinyImage’s one-click optimization.
datePublished: 2025-03-13T00:00:00.000Z
dateModified: 2025-03-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-figma-image-compression/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-figma-image-compression.md
---

# Figma Image Compression

Image-heavy files get unwieldy fast. TinyImage compresses images _inside_ your Figma document, so prototypes remain lightweight and exports stay efficient. It’s perfect for teams working on laptops or sharing files with clients who have slower connections.

### Keep files tidy
TinyImage can replace oversized fills with optimized versions while keeping the design visually identical. That means your collaborators aren’t waiting minutes for a file to load just because a background photo is 8 MB.

### Export smarter
When it’s time to ship assets, TinyImage applies the same compression rules, ensuring the files you hand off are already optimized for production.

### Routine
1. Periodically run TinyImage on large files to shrink embedded images.
2. Before handoff, select the frames you’re exporting and compress them with the appropriate preset.
3. Enjoy faster files and happier teammates.

It’s the maintenance mode every heavy Figma project needs.

### Tips for collaboration
Before sharing files externally, run TinyImage so clients with limited bandwidth can review designs smoothly. Mention in your handoff doc that assets were optimized in-file to set expectations about fidelity.

---

---
type: article
title: Figma Vue Export
description: Generate Vue components from Figma with Weblify and keep your design system in sync with code.
datePublished: 2025-03-12T00:00:00.000Z
dateModified: 2025-03-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-vue-export/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-vue-export.md
---

# Figma Vue Export

Vue teams deserve the same quality handoffs as React shops. Weblify exports Vue single-file components (SFCs) from your Figma frames, complete with `<template>`, `<script setup>`, and `<style>` sections. Tokens, responsive rules, and props map directly from your design.

### Works with Vue 2 or 3
Choose the syntax your app uses. Weblify adapts the export to match (Options API or Composition API), making it easy to slot into existing codebases.

### Variant-aware
Like the React export, Weblify converts Figma variants into props, so toggling states is straightforward for engineers.

### Export steps
1. Highlight the component/state combo in Figma.
2. Run Weblify, select Vue, and preview the generated SFC.
3. Paste it into your repo and hook up data.

Vue teams finally get a design-to-code path tailored to their stack.

### Automation idea
Add a script that drops Weblify’s exported SFCs into your component library repo whenever the Figma file updates. Engineers get notified via pull requests, and the design-to-code pipeline stays transparent.

---

---
type: article
title: Banner Ad Generator
description: Turn Figma layouts into animated banner ads with Bannerify’s generator instead of rebuilding everything in code.
datePublished: 2025-03-10T00:00:00.000Z
dateModified: 2025-03-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-banner-ad-generator/
markdownUrl: https://www.hypermatic.com/articles/bannerify-banner-ad-generator.md
---

# Banner Ad Generator

Traditional banner ad generators rarely match the flexibility designers need. Bannerify flips that script by making Figma itself the generator. You design the layout, add animation cues, and let the plugin export HTML5, GIF, video, or even GSAP bundles. No separate templating system, no fragile scripts.

### Why designers prefer this approach
Because Bannerify works inside Figma, it honors your component library, typography, and spacing. You control the design, and the plugin handles the repetitive export work. That means we can move from concept to production without a handoff doc in between.

### Automation without losing control
Bannerify turns each frame into a mini project. You can animate layer-by-layer, add easing curves, loop durations, and audio. When you’re happy, choose the output format: standard HTML, Google Ads, DV360, AdForm, GIF, MP4, or WebM. The plugin writes the code, compresses the assets, and hands you a zip file that’s ready for upload.

### Scaling with Bannerify
1. Create a set of master frames for each dimension.
2. Apply animations through Bannerify’s panel and preview everything in real time.
3. Export packages for every size in one go; share the hosted preview links with stakeholders for approvals.

Calling Bannerify a “generator” undersells it—it’s the workflow shift that lets design teams own banner production end-to-end.

### Handle data-driven campaigns
Most generators crumble once you add dynamic content or localization. Bannerify’s component-friendly approach means you can connect CopyDoc spreadsheets, swap in language variants, or drop in market-specific offers without touching the animation timeline. Duplicate the frame, update the text styles, and generate a new set of files in minutes. Because everything stays in Figma, you can even version-control the work with branches or comments for future audits.

### QA and delivery stay simple
Hosted previews make it easy for compliance and media teams to review the real creative before publishing. Need minor tweaks after QA? Update the Figma file, rerun the export, and the new preview link reflects the fix instantly. The generator keeps code consistent across every version, so developers never wonder which package is final. If your org leans on automation, Bannerify’s Zapier hooks can push approved zips straight to cloud storage or ping Slack channels the moment a new batch is ready.

The end result is a banner ad workflow that scales with your roadmap instead of slowing it down. Bannerify gives creatives the controls they need while removing all the tedious parts of production.

---

---
type: article
title: Design Feedback Tool
description: Why Commentful is my preferred design feedback tool for high-stakes Figma presentations.
datePublished: 2025-03-09T00:00:00.000Z
dateModified: 2025-03-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-design-feedback-tool/
markdownUrl: https://www.hypermatic.com/articles/commentful-design-feedback-tool.md
---

# Design Feedback Tool

Design feedback deserves more than scattered screenshots. Commentful gives me a single tool to gather reactions, debate trade-offs, and document approvals—all while keeping the master Figma file untouched. It’s lightweight enough for scrappy teams but structured enough for enterprise sign-offs.

### One link, one source of truth
Share a Commentful link and everyone sees the same curated set of frames. They can comment in context, mention teammates, and attach supporting documents. No guessing which artboard someone is referring to.

### Built-in accountability
Every piece of feedback gets a status, owner, and due date. Designers, PMs, and stakeholders can see what’s done and what’s outstanding. The transparency keeps projects moving even when you’re juggling multiple launches.

### Putting it into practice
1. Select the relevant Figma frames and publish them through Commentful.
2. Invite reviewers, set permissions, and guide them toward what kind of feedback you need.
3. Work through the board, resolving each card before archiving the project for reference.

Good design feedback tools reduce anxiety. Commentful does that by combining secure sharing with a clear, trackable workflow.

### Measure review health
Commentful’s activity log shows how long feedback sits idle, which teams engage quickly, and where bottlenecks occur. Use that data to refine your process—maybe legal gets earlier previews or leadership only weighs in once the structure is locked. Over time, you’ll see fewer late-breaking surprises.

### Pro tips
- Create templates for different review types (concept, copy polish, accessibility) so each board launches with presets.
- Encourage stakeholders to mark their own items as resolved once they’re satisfied; it gives them ownership and shortens loops.
- Pair Commentful with project trackers like Linear or Jira by linking card URLs so engineering can jump straight to the relevant feedback.

Treat Commentful as the heartbeat of your review process and you’ll spend less time chasing answers and more time improving the product.

---

---
type: article
title: Batch Instagram Post Resizer
description: Turn HyperCrop into your batch Instagram post resizer for feeds, Stories, and Reels with one repeatable workflow.
datePublished: 2025-03-07T00:00:00.000Z
dateModified: 2025-03-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-batch-instagram-post-resizer/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-batch-instagram-post-resizer.md
---

# Batch Instagram Post Resizer

Instagram never met an aspect ratio it did not want to invent. Reels, Stories, carousels, square feed posts, boosted placements—each one wants something a little different. HyperCrop is how I keep those requests sane without leaving Figma. Instead of duplicating artboards and nudging masks by hand, the plugin lets me resize entire sets of posts in minutes.

### Why Instagram resizes are tricky
Organic feeds might get by on a single square, but paid teams expect matching 1:1, 4:5, 9:16, and landscape variants. When you add localization or iterative testing on top of that, the asset list explodes. HyperCrop keeps every crop tied to the approved design so I am never guessing which elements should stay visible in each placement.

### My Instagram-first HyperCrop preset
I keep a preset called "IG Run" that includes every ratio Instagram supports, plus a few optional exports for Meta placements. The preset enforces safe areas, so product shots and faces never end up under UI chrome. Smart detection automatically pulls the focus to the subject, and any tricky frames can be nudged with manual overrides before exporting.

### Shipping the full set in one go
1. Select the hero frames, Story layouts, or component variants you want to repurpose.
2. Trigger HyperCrop, choose the "IG Run" preset (or build your own), and preview the crops side by side.
3. Export the optimized versions directly into folders named by placement so the media team can upload them to Ads Manager without renaming anything.

Because the process lives in Figma, the whole team can run another batch anytime Instagram tweaks a spec or a creative tests better than expected. HyperCrop quietly handles the grunt work while we keep experimenting with the message.

### Keep naming consistent
Use HyperCrop’s suffix options (`_story`, `_reel`, `_feed`) to keep exported files labeled by placement. That makes it easy for media buyers to drag the right assets into Ads Manager or Creator Studio without cross-checking spreadsheets.

### Lessons learned
- Add extra padding for Stories to account for IG UI chrome at top and bottom.
- Store your Instagram presets in a shared Figma library so contractors and interns can ship assets without oversight.
- Pair HyperCrop with a compression plugin to keep upload times fast when you’re delivering dozens of ratios.

---

---
type: article
title: Figma File Converter
description: Convertify is the Figma file converter I depend on whenever teams need Sketch, XD, PowerPoint, or Keynote versions.
datePublished: 2025-03-06T00:00:00.000Z
dateModified: 2025-03-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-figma-file-converter/
markdownUrl: https://www.hypermatic.com/articles/convertify-figma-file-converter.md
---

# Figma File Converter

Figma is my home base, but clients still ask for other formats. Convertify is the Swiss Army knife that converts those files without flattening them. Sketch, Adobe XD, Keynote, PowerPoint, After Effects, PDF, Google Slides—you name it, Convertify covers it.

### Preserve structure, not screenshots
The plugin keeps layers intact instead of exporting images, which means whoever opens the converted file can edit text, move elements, and keep components linked. That makes collaboration a lot smoother.

### Importing back into Figma
Convertify also works inbound. Need to import a PDF deck, Google Slides presentation, or Sketch file into Figma? The plugin handles that too, so you can keep everything centralized.

### Conversion routine
1. Select the frames or pages you need to export.
2. Launch Convertify, choose the target format, and let it process.
3. Share the converted file with your partner team, plus any notes about fonts or components.

It’s the simplest way to keep everyone happy without maintaining duplicate design systems.

### Centralize communication
Keep a short change log inside the Convertify export folder so teams know which version matches which milestone. When updates roll out, rerun the converter and update the log—no more confusion about whether “final_FINAL_v3” is truly the latest.

### Bonus: automate handoffs
Pair Convertify with cloud storage or documentation tools. After exporting, drop the files into shared drives or attach them to tickets so engineering, marketing, and vendors always know where to look. The converter does the heavy lifting; you just click “export” and focus on the strategic work.

---

---
type: article
title: Figma Password Protected Links
description: Generate password-protected Figma links with Crypto so sensitive work stays private.
datePublished: 2025-03-05T00:00:00.000Z
dateModified: 2025-03-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-figma-password-protected-links/
markdownUrl: https://www.hypermatic.com/articles/crypto-figma-password-protected-links.md
---

# Figma Password Protected Links

Figma’s native share links are either public or limited to a team. Crypto adds the missing middle ground: encrypted, password-protected links you can hand to stakeholders outside the org without exposing everything else.

### Passwords plus more
You can set a unique password, expiration date, download permissions, and even require email verification. Crypto encrypts the content end-to-end so the link is useless without the key.

### Launch-ready workflow
1. Select the file or prototype in Figma.
2. Publish via Crypto and configure the password + settings.
3. Share the secure link and keep track of views in the Crypto dashboard.

It’s a small change that dramatically raises the security bar for client work and internal launches.

### Rotate access with ease
When projects move to the next phase, update the password or expire the link entirely. Crypto keeps a history of every link you’ve shared, so you can audit who still has access and shut down anything stale.

### Best practices
- Use phrase-based passwords for easier sharing on calls, then rotate them afterwards.
- Enable watermarking to discourage screenshots.
- Combine password protection with download restrictions so sensitive assets never leave the portal.

Password-protected Figma links are table stakes for modern teams; Crypto makes them effortless.

---

---
type: article
title: Compliant Design Review
description: Run compliant design reviews in Figma with Crypto by wrapping every share link in encryption and access controls.
datePublished: 2025-03-04T00:00:00.000Z
dateModified: 2025-03-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-compliant-design-review/
markdownUrl: https://www.hypermatic.com/articles/crypto-compliant-design-review.md
---

# Compliant Design Review

Highly regulated teams cannot just drop a public share link in Slack. Crypto solves that by encrypting review links, forcing passwords, and logging every access. It keeps design reviews compliant without turning the workflow into an IT ticket.

### Meeting security requirements
Crypto lets you set unique passwords per stakeholder, require email verification, and add watermarks or expiration timers. Those features map directly to the policies you’ll find in finance, healthcare, or enterprise SaaS security playbooks.

### Maintain an audit trail
Every view or download gets logged. If compliance asks who saw a prototype before launch, the Crypto dashboard answers in seconds. That history is invaluable during SOC 2 or ISO audits.

### Compliant review checklist
1. Publish the frames through Crypto instead of Figma’s public link.
2. Configure access rules (password, expiration, watermark) based on the project sensitivity.
3. Share the secure URL, collect feedback, and revoke access when the review wraps.

Compliance should protect teams, not slow them down. Crypto proves it’s possible.

### Integrate with governance tools
Export Crypto’s access logs and attach them to Jira, ServiceNow, or your change-management platform. When auditors request evidence, you already have timestamped records showing who reviewed the work and when.

### Extra precautions
- Use per-review watermarks so leaks can be traced instantly.
- Require two-factor email verification for VIP stakeholders.
- Schedule automatic link expiration to ensure access ends as soon as the review period closes.

Crypto turns compliant design reviews into a repeatable playbook.

---

---
type: article
title: How to build display ads in Figma
description: A practical workflow for building display ads in Figma and exporting real campaign outputs.
datePublished: 2025-03-01T00:00:00.000Z
dateModified: 2025-03-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-how-to-build-display-ads-in-figma/
markdownUrl: https://www.hypermatic.com/articles/bannerify-how-to-build-display-ads-in-figma.md
---

# How to build display ads in Figma

A practical workflow for building display ads in Figma and exporting real campaign outputs. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for how to build display ads in figma when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Bannerify fits into the process

Bannerify is useful here because it keeps banner production inside Figma instead of pushing the team into a separate build step. For teams creating multiple ad sizes, motion variants, or late campaign revisions, that usually means less repetition and a cleaner review cycle.

With Bannerify, teams can usually:

- turn banner frames into production-ready ad outputs
- keep motion and copy changes inside the same Figma workflow
- export campaign variants faster when the brief changes late

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Bannerify](/bannerify/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If banner production is the real bottleneck, Bannerify is the most direct place to start. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: Figma Banner Plugin
description: Bannerify is the Figma banner plugin I use to design, animate, and export production-ready ad units in minutes.
datePublished: 2025-02-28T00:00:00.000Z
dateModified: 2025-02-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-figma-banner-plugin/
markdownUrl: https://www.hypermatic.com/articles/bannerify-figma-banner-plugin.md
---

# Figma Banner Plugin

Designing banners in Figma is easy; turning them into working ads usually is not. Bannerify closes that gap. It’s the plugin I open whenever we need animated HTML5, GIF, or video banners without involving another toolchain.

### Built for Figma-native workflows
Because Bannerify runs inside Figma, it understands components, text styles, and constraints. I animate directly on the layers my team is already collaborating on, then share previews via Bannerify’s hosted links. Feedback loops stay short, and no one is confused about which file is the latest.

### Export formats for every partner
Need GIFs for CRM, HTML5 for Google Ads, MP4 loops for CTV, or WebM for landing pages? Bannerify handles all of them. You can even generate GSAP-ready code for developers who want to plug into custom frameworks. The exports include clickTag wiring, manifest files, and size-optimized assets.

### Taking a banner from idea to delivery
1. Design your layout in Figma using reusable components.
2. Open Bannerify, set up animations, and preview how each size behaves.
3. Export the required formats and drop them straight into your ad network or send the hosted link for approvals.

If you live in Figma already, Bannerify is the missing piece that turns your banner designs into live creative.

### Built for cross-functional teams
Product marketers, media buyers, and localization partners all interact with the same Bannerify file. Copywriters tweak text directly in Figma or drop updated content via CopyDoc, while media buyers rely on the generated weight reports to ensure each unit passes platform limits. Because Bannerify exports logs, campaign managers can trace exactly which version shipped without digging through email threads.

### Tips for faster iterations
- Store your most-used animations as presets so new banners inherit timing automatically.
- Use Bannerify’s timeline labels to mark important beats like CTA reveals or legal copy fades.
- Pair the plugin with automation (Zapier, Make, custom scripts) to deliver zips to the right folder or Slack channel when exports finish.

Bannerify earns the “Figma banner plugin” title because it keeps every part of production—design, motion, approvals, delivery—in one predictable place.

---

---
type: article
title: Favicon Sizes
description: Cover every favicon size requirement at once by letting Favvy handle the math.
datePublished: 2025-02-27T00:00:00.000Z
dateModified: 2025-02-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-favicon-sizes/
markdownUrl: https://www.hypermatic.com/articles/favvy-favicon-sizes.md
---

# Favicon Sizes

Remembering every favicon size is a losing game. Favvy keeps the list memorized for you—16×16, 32×32, 180×180, 192×192, 512×512, pinned tab SVGs, maskable icons, and more. Drop in a high-resolution design and the plugin handles the rest.

### Avoid guesswork
Favvy applies proper padding and rounding for each size, so the icon never looks squeezed or blurry. If a new platform adds another size, the plugin updates faster than your internal docs.

### Communicate specs clearly
Each export includes a summary of the generated assets. Hand it to developers or include it in your design system documentation so nobody wonders why a specific size exists.

### My approach
1. Maintain one master icon in Figma tied to our brand system.
2. When a request hits, run Favvy and export the entire set.
3. Update the shared documentation with the asset summary so future teams know which sizes to expect.

It’s the easiest way to stay compliant with the ever-changing favicon landscape.

### Reduce support requests
When engineering gets a bug report about missing icons, reference Favvy’s exported size summary to confirm deployment. Because the list is standardized, troubleshooting becomes a quick checklist instead of a research project.

### Tip
Store Favvy’s summary as part of your automated documentation site. Each time you regenerate icons, replace the snippet so the whole org trusts that it’s current.

---

---
type: article
title: Password Protected PDF
description: Export password-protected PDFs from Figma using Crypto so deliverables stay locked down.
datePublished: 2025-02-26T00:00:00.000Z
dateModified: 2025-02-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-password-protected-pdf/
markdownUrl: https://www.hypermatic.com/articles/crypto-password-protected-pdf.md
---

# Password Protected PDF

There are still clients who insist on PDF deliverables. Crypto lets me export those PDFs directly from Figma and wrap them in password protection without juggling Acrobat settings.

### Secure exports in one step
Choose the frames, run Crypto’s PDF export, and set the password, expiration, and watermarking preferences. The plugin encrypts the file and delivers a download link you can monitor.

### Better than emailing attachments
Recipients download through a secure link, not a random email attachment. If you need to revoke access or update the PDF, just toggle the link in Crypto and send the new version.

### Workflow reminder
1. Assemble the pages you want to export in Figma.
2. Use Crypto to generate the password-protected PDF and link.
3. Share the link and track downloads from the dashboard.

It’s a small tweak that makes compliance folks breathe easier.

### Track versions
Label each PDF export with a revision number in Crypto so stakeholders always download the right file. If someone references an older version, you can verify exactly which one they opened and when.

### Combine with approvals
Ask stakeholders to acknowledge receipt or sign off within the Crypto portal before accessing the PDF. That gives you an audit trail tying approvals directly to the secure file, which is useful for regulated projects.

---

---
type: article
title: Figma Website Overlay
description: Pixelay overlays your Figma designs on any website so you can align builds with ease.
datePublished: 2025-02-24T00:00:00.000Z
dateModified: 2025-02-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-figma-website-overlay/
markdownUrl: https://www.hypermatic.com/articles/pixelay-figma-website-overlay.md
---

# Figma Website Overlay

Sometimes you just want to see your design on top of the real thing. Pixelay does exactly that. Pick a frame, overlay it on a site, and adjust opacity to see how well the build matches. It’s indispensable when you have to QA dozens of components quickly.

### Works on staging, QA, or production
Because the overlay runs in your browser, you can point it at any environment—even behind a login or on localhost. That makes Pixelay useful for agencies working across multiple clients and stacks.

### Overlay workflow tip
1. Organize your Figma file with frames named after the pages/routes they represent.
2. In Pixelay, search for that frame name and overlay it instantly.
3. Use keyboard shortcuts to cycle through states and capture what you need.

QA suddenly feels more like a checklist and less like a guessing game.

---

---
type: article
title: PerfectPixel Alternative
description: Why I lean on Pixelay as my PerfectPixel alternative for live design-to-build QA.
datePublished: 2025-02-21T00:00:00.000Z
dateModified: 2025-02-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-perfectpixel-alternative/
markdownUrl: https://www.hypermatic.com/articles/pixelay-perfectpixel-alternative.md
---

# PerfectPixel Alternative

PerfectPixel popularized overlay-based QA, but it’s a solo tool that requires manual screenshot management. Pixelay builds on the same idea with Figma sync, annotations, and shareable links. If you’re deciding between the two, consider how important collaboration and live environments are to your workflow.

### Live overlays vs static workflows
PerfectPixel works best with exported PNGs. Pixelay overlays live sites, including behind-login staging environments. That means you catch responsive bugs, interactive states, and dynamic content issues that static screenshots miss.

### Collaboration tools
Pixelay includes comments, annotations, and shareable links. PerfectPixel is mostly single-player—great for designers auditing solo, less helpful when engineers need context. If an alternative can’t show teams exactly what’s wrong in the browser, it won’t save time.

### Budget and setup
Full-blown visual regression platforms can be powerful but heavy to set up. Pixelay strikes a balance: install the extension, connect Figma, start working. Unless you need enterprise automation across hundreds of pages, Pixelay remains the pragmatic choice.

### Evaluate with real projects
Test alternatives on behind-login environments, authenticated staging servers, and responsive layouts. Pixelay shines because it handles all of those scenarios without extra tooling. If a new tool fails even one of those tests, it’s probably not worth the switch.

---

---
type: article
title: Figma Email Components
description: Build reusable email components in Figma with Emailify so every campaign stays on brand.
datePublished: 2025-02-18T00:00:00.000Z
dateModified: 2025-02-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-figma-email-components/
markdownUrl: https://www.hypermatic.com/articles/emailify-figma-email-components.md
---

# Figma Email Components

Emailify ships with a deep component library, but the magic happens when you customize it. I treat each module like part of our design system—hero, feature grid, testimonial, receipt line item—and store them in a shared page. Emailify plugs into that library so the exports always match the latest brand rules.

### Components that behave like code
Each component includes responsive behavior baked in. Swap content, rename layers, and the underlying HTML adapts. Designers stay in their comfort zone, and developers receive HTML that mirrors the component structure exactly.

### Maintenance is simple
Update a component once (new type scale, refreshed CTA style) and every future email inherits it. You can even version components for different business units while keeping the base layout consistent.

### Steps to set it up
1. Duplicate Emailify’s starter library and adapt it to your brand.
2. Publish those components to a Figma library so every designer can access them.
3. Assemble emails using the shared components and export through Emailify when ready.

It’s the closest thing to a true email design system I’ve used.

### Governance tips
Document component usage (dos/don’ts, accessibility notes) on the same page so new teammates understand how each module should be used. Because Emailify reads directly from your component library, updating guidelines and code happens in one move.

### Scale effortlessly
When new channels appear—transactional flows, lifecycle drips—clone your base components, tweak the tone, and keep the structure. Emailify ensures your HTML remains consistent even as the library grows.

---

---
type: article
title: Resize Images for Social Media
description: Use HyperCrop to resize images for every social media placement without rebuilding your Figma file.
datePublished: 2025-02-15T00:00:00.000Z
dateModified: 2025-02-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-resize-images-for-social-media/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-resize-images-for-social-media.md
---

# Resize Images for Social Media

Social media teams rarely send small requests. They want carousels, Stories, Reels, paid ad formats, and organic posts in one go. HyperCrop lets me say “yes” without duplicating pages or pushing deadlines. The plugin understands the rules for each network and keeps the crops consistent with the campaign design we already approved.

### Translate each network into a preset
I keep presets for Meta, LinkedIn, Twitter/X, TikTok, Snapchat, and Pinterest, all with their exact aspect ratios and safe areas. When a new placement appears, I add it to the preset, rerun HyperCrop on the source frames, and everything updates. There is no separate Photoshop file or random Sketch document to keep in sync.

### Protect key content while resizing
Social platforms love to hide UI on top of creative. HyperCrop's safe-area controls keep logos, faces, and CTAs away from corners where app chrome sits. Smart detection also ensures the subject stays centered even when you go from 4:5 to 16:9.

### Fast path to final exports
1. Select the approved frames or components.
2. Run the relevant preset and preview how each network’s crop lands.
3. Export the lot into folders labeled per platform so the marketing team can upload them immediately.

Resizing images for social media no longer requires overtime. HyperCrop keeps it inside Figma and in sync with everything else you build.

### Track performance
Log which presets correspond to top-performing content. When you analyze reporting later, you’ll know exactly which assets were exported with which settings, making it easier to repeat successes.

### Collaboration idea
Share preset-specific preview sheets with copywriters so they can tailor captions for each placement. Because HyperCrop makes exports predictable, messaging stays aligned with the visuals no matter the platform.

---

---
type: article
title: Figma CSS Export
description: Export clean CSS from Figma by letting Weblify translate your layouts into production-ready styles.
datePublished: 2025-02-13T00:00:00.000Z
dateModified: 2025-02-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-css-export/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-css-export.md
---

# Figma CSS Export

Copying CSS from Figma’s inspect panel only gets you so far. Weblify produces structured CSS that mirrors the hierarchy of your layout, including flexbox, grid, custom properties, and responsive breakpoints. Developers can drop it straight into their codebase without reformatting everything.

### Respecting your tokens
Weblify maps Figma styles to CSS variables, Sass tokens, or utility classes. That keeps brand colors, typography, and spacing consistent between design and code.

### Batch export
Select multiple components or sections and export their CSS in one go. Weblify bundles the styles with HTML markup, making it easy to preview or share via docs.

### How I use it
1. Highlight the area I’m handing off.
2. Run Weblify with our CSS preset.
3. Paste the output into our repo or attach it to the ticket for engineering.

It beats retyping measurements manually and reduces implementation drift.

### Bonus
Include Weblify’s code snippets in your design system site so engineers can copy/paste from a trusted source. Whenever tokens change, rerun Weblify and republish the snippet—no manual updates required.

---

---
type: article
title: HTML5 ad production workflow in Figma
description: How to turn Figma banner work into an HTML5 ad production workflow with less rebuilding.
datePublished: 2025-02-12T00:00:00.000Z
dateModified: 2025-02-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/bannerify-html5-ad-production-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/bannerify-html5-ad-production-workflow-in-figma.md
---

# HTML5 ad production workflow in Figma

How to turn Figma banner work into an HTML5 ad production workflow with less rebuilding. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for html5 ad production workflow in figma when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Bannerify fits into the process

Bannerify is useful here because it keeps banner production inside Figma instead of pushing the team into a separate build step. For teams creating multiple ad sizes, motion variants, or late campaign revisions, that usually means less repetition and a cleaner review cycle.

With Bannerify, teams can usually:

- turn banner frames into production-ready ad outputs
- keep motion and copy changes inside the same Figma workflow
- export campaign variants faster when the brief changes late

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Bannerify](/bannerify/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If banner production is the real bottleneck, Bannerify is the most direct place to start. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: Figma Feedback Plugin
description: Collect structured feedback on Figma files using Commentful’s review boards and task tracking.
datePublished: 2025-02-12T00:00:00.000Z
dateModified: 2025-02-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-figma-feedback-plugin/
markdownUrl: https://www.hypermatic.com/articles/commentful-figma-feedback-plugin.md
---

# Figma Feedback Plugin

Figma needs no introduction, but its feedback workflow gets messy once you invite people outside the core team. Commentful is the feedback plugin that keeps everything tidy. You select the frames, publish them, and invite reviewers with whatever level of access makes sense.

### Organized feedback loops
Comments arrive as cards you can triage. Assign them, set priorities, and drag them through stages just like any other project board. Designers stay in Figma, stakeholders stay informed, and nothing falls through the cracks.

### Shareable without oversharing
Because Commentful sits on top of Figma rather than inside the file, you can expose only the pages you want. That limits scope creep and keeps sensitive explorations private.

### Using the plugin day to day
1. Highlight the latest work and publish it with Commentful.
2. Send the board link to whoever needs to weigh in.
3. Resolve the cards as you ship updates and archive the board when it’s done.

It’s the simplest way I’ve found to keep feedback moving without overwhelming the team.

### Keep feedback measurable
Commentful’s board metrics show how many items each department submitted, which stages take the longest, and whether new work is piling up. Use those insights to adjust staffing or set better expectations. When leadership asks for proof that the team is responding quickly, you have actual data instead of anecdotes.

### Favorite workflows
- Create a “triage” board for PMs to collect internal notes, then graduate items to a “client review” board once they’re ready.
- Invite copywriters or translators as commenters only; they can suggest edits without touching the design file.
- Use Commentful’s API/Zapier hooks to send resolved cards to Slack, so everyone sees progress without digging.

Calling Commentful a Figma feedback plugin captures only half of it; it’s really a mini operating system for your approval cycles.

---

---
type: article
title: Secure Design Approval Tool
description: Commentful keeps sensitive design approvals secure while capturing every decision in one place.
datePublished: 2025-02-11T00:00:00.000Z
dateModified: 2025-02-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-secure-design-approval-tool/
markdownUrl: https://www.hypermatic.com/articles/commentful-secure-design-approval-tool.md
---

# Secure Design Approval Tool

When you are working with NDA-heavy clients or internal initiatives that cannot leak, you need more than a generic share link. Commentful functions as a secure design approval tool by combining access control with detailed logging.

### Locked-down access
Invite-only links, passwords, and expiration dates ensure only the right people can see the work. You can revoke access the moment a review ends or limit views to a single browser session for extra-sensitive projects.

### Compliance-ready records
Every approval is timestamped and associated with an individual reviewer. Export the log for audits, attach it to the project brief, or keep it on hand for legal teams. It beats cobbling together evidence from email chains.

### Approval sequence I follow
1. Publish the frames with the security settings the client requires.
2. Share the link and walk stakeholders through the work (live or async).
3. Capture approvals inside Commentful and keep the board archived once the feature ships.

Security and speed don’t have to be trade-offs. Commentful proves it.

### Integrate with governance
Commentful’s audit exports plug nicely into GRC tools or ticketing systems. Drop the approval PDF into Jira, ServiceNow, or Notion, and compliance teams have instant visibility. If an auditor needs proof six months later, you’re not scrambling through inboxes—everything is stored with the design.

### Tips for secure workflows
- Use separate boards for internal vs. external stakeholders so access rules stay clean.
- Enable watermarking for high-stakes presentations; Commentful overlays reviewer info automatically.
- Rotate passwords or expiration dates between milestones to reduce the risk of link sharing.

Treating Commentful as your secure design approval tool keeps sensitive work moving without sacrificing governance.

---

---
type: article
title: Figma Google Slides Import
description: Pull Google Slides decks into Figma with Convertify to reuse layouts, content, and charts without rebuilding.
datePublished: 2025-02-10T00:00:00.000Z
dateModified: 2025-02-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-figma-google-slides-import/
markdownUrl: https://www.hypermatic.com/articles/convertify-figma-google-slides-import.md
---

# Figma Google Slides Import

Sometimes the source of truth for a project lives in Google Slides—especially when marketing or sales teams own the narrative. Convertify lets me import those decks directly into Figma. Every slide becomes a frame with editable text and vector artwork, so I can modernize the visuals without copying and pasting.

### Keep content aligned
By importing the deck, I retain the actual copy, charts, and imagery the team has already approved. That keeps messaging consistent as we redesign the experience for web, product, or presentation formats.

### Tips for smoother imports
1. Ask the deck owner to consolidate fonts before you import.
2. Clean up master slides in Google Slides to reduce stray elements.
3. After importing, map the content to your Figma components so future edits are effortless.

This workflow saves me from rebuilding a 60-slide deck manually and keeps stakeholders confident that nothing was lost in translation.

### Move faster after import
Once content lives in Figma, you can reuse it across landing pages, case studies, or internal documentation. Convertify keeps text editable, so marketing can suggest updates directly in Figma while designers overhaul the visuals. When the refreshed deck is ready, you can even export it back to Slides or PowerPoint.

### Ideal scenarios
- Transforming webinar decks into microsites
- Refreshing legacy sales enablement materials
- Aligning brand and product teams on shared messaging

Convertify turns Google Slides imports into a starter kit instead of homework.

---

---
type: article
title: Figma Keynote Export
description: Export pixel-perfect Keynote decks from Figma with Pitchdeck’s native .key workflow.
datePublished: 2025-02-08T00:00:00.000Z
dateModified: 2025-02-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-figma-keynote-export/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-figma-keynote-export.md
---

# Figma Keynote Export

Keynote loyalists still exist—especially on executive teams. Pitchdeck respects that by exporting your Figma slides to a .key file while keeping text editable and animations intact. You design once; Keynote gets a true native deck.

### Tailored for macOS
Pitchdeck maps Figma text styles to Keynote text boxes, keeps image fills linked, and even supports build animations for staged reveals. That means execs can tweak copy or rearrange slides minutes before a town hall without wrecking the layout.

### Steps to export
1. Finalize your slides in Figma.
2. Open Pitchdeck, pick Keynote as the destination, and set any font substitutions.
3. Download the .key file and share it via AirDrop, Slack, or whatever your team uses.

It’s the missing link between modern design workflows and the Keynote world many leaders still prefer.

### Keep Keynote decks aligned
When leadership tweaks a slide, update the Figma source and regenerate the Keynote file. Because components stay consistent, changes propagate everywhere with minimal effort. Include a README slide reminding execs to request updates through Figma so the deck stays unified.

---

---
type: article
title: Figma Shortcut for Favicons
description: Create favicon packages in seconds by turning Favvy into your Figma shortcut for icon requests.
datePublished: 2025-02-04T00:00:00.000Z
dateModified: 2025-02-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-figma-shortcut-for-favicons/
markdownUrl: https://www.hypermatic.com/articles/favvy-figma-shortcut-for-favicons.md
---

# Figma Shortcut for Favicons

Whenever someone pings me for favicons, I open Favvy. It’s the shortcut that transforms a tedious chore into a repeatable workflow. No guessing sizes, no exporting slices, no manual zip files—just a quick run of the plugin and the assets are done.

### Batch multiple brands
Working across clients? Favvy lets you store presets with different colors, masks, and naming conventions. Switch presets and rerun the export to deliver brand-specific packages without rebuilding anything.

### Share the shortcut with your team
Document the steps once: “Clone the master icon, run Favvy preset X, upload the zip.” Anyone on the team can follow it, which keeps the burden off whoever usually handles favicons.

### Shortcut steps
1. Keep a master icon library in Figma with variants per brand.
2. Run Favvy with the matching preset whenever a request arrives.
3. Deliver the package and log the export in your release checklist.

Favvy turns favicon production into muscle memory.

### Track requests
Maintain a simple spreadsheet or Notion table listing which teams requested favicons and when. Attach the Favvy export link so anyone can re-download the assets later. Over time you’ll spot trends and can proactively refresh icons before someone asks.

### Bonus automation
Trigger Slack or email notifications when a new Favvy package drops into your repo. Stakeholders get alerted instantly, and you never worry about assets languishing unseen.

---

---
type: article
title: Figma Client Proofing
description: Handle client proofing for Figma work with Commentful’s secure review links and approval tracking.
datePublished: 2025-01-30T00:00:00.000Z
dateModified: 2025-01-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-figma-client-proofing/
markdownUrl: https://www.hypermatic.com/articles/commentful-figma-client-proofing.md
---

# Figma Client Proofing

Client proofing is one of those necessary evils. Commentful turns it into a tangible, trackable process. Instead of emailing PDFs, I send a Commentful link where clients can walk through the latest iteration, annotate specific elements, and sign off with one click.

### Keep proofs centralized
Commentful hosts the frames and keeps them in sync with Figma, so there is no risk of someone reviewing an outdated mockup. When we push a new version, the proof updates automatically, and the audit trail shows what changed between rounds.

### Approvals that hold up under scrutiny
Each approval comes with a timestamp, reviewer name, and optional notes. That history is invaluable when disputes pop up weeks later or when you need to prove compliance for regulated industries.

### Proofing routine
1. Publish the relevant pages to a client-specific Commentful board.
2. Share the link with whatever security level the engagement requires.
3. Collect approvals, address the cards, and archive the board once the project wraps.

Proofing should be boring. Commentful makes it so by eliminating the admin chaos that usually accompanies client reviews.

### Handle multiple workstreams
When clients run parallel tracks—brand, product, lifecycle—you can spin up separate Commentful boards under the same project. That keeps proofs organized and lets different stakeholders focus on their area without being overwhelmed. Each board maintains its own audit trail, so consolidating approvals for billing or compliance is simple.

### Pro tips
- Use naming conventions for boards (Client_Project_Sprint) to keep file structures consistent.
- Schedule automatic reminders for stakeholders who haven’t weighed in; Commentful handles the nudges so you don’t have to.
- Export the final approval log and attach it to your project management tool for airtight documentation.

Client proofing in Figma should feel predictable. With Commentful steering the process, it finally does.

---

---
type: tutorial
title: How to export HTML emails from Figma to Mailmodo using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-01-28T00:00:00.000Z
dateModified: 2025-01-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-mailmodo-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-mailmodo-using-emailify.md
---

# How to export HTML emails from Figma to Mailmodo using Emailify

#### Video Transcript

Today, I'm going to show you a quick tutorial on how to export your HTML emails from Figma into the Mailmodo email marketing platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the little resources icon up here, and search for "Emailify" under the plugins tab. If you click on the Emailify result, you can run that Figma plugin by either clicking on the "Run" button here or, as I'd recommend, clicking on the little save icon here. That will allow us to run the Figma plugin from our plugins list.

I've already clicked on the little save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then to "Saved Plugins," and click on the Emailify item. That will run the Figma plugin we saved a moment ago. If you're new to the Figma plugin, the way it works is that it helps you design HTML emails that you can then automatically export to production-ready code directly from the Figma plugin when you're ready.

For example, if we create a new template, I'm just going to call this "Template Example," click on "Add New Emailify Container," and that will allow us to design our custom HTML email in Figma using the design tools provided in the plugin. I won't be going through all the different ways you can design the email in Figma. If you're new to the Figma plugin and interested in learning more about how to do that, there are a bunch of really good tutorials on the YouTube channel or in our documentation site. That will help you get started quickly with figuring out how to customize some of these details and designs to match your brand.

As a quick overview, you can customize the layers with things like mobile override. If you want to change the font size or padding on mobile for any of these components, you can go through those layers by clicking on them when you've got your settings panel open. That will allow you to customize the design. You can then click on the preview button in the Figma plugin to preview that on desktop and mobile. This is a real HTML preview of the email itself, so we can see here that this is real code, and this is what it's going to look like when we export it to production-ready HTML.

Once you're happy with your design, we can then go ahead and export it from the Figma plugin. It's also worth noting that if you're new to the Figma plugin, if you go back to the new email screen and click on "Browse Emailify Figma Templates," you can also clone a free Figma template directly from the Figma plugin. For example, we've got one over here from the Airbnb template, which is included in the Figma plugin up here. That will allow you to duplicate a production-ready Emailify-designed template that you can then use as a starting point or customize or grab some of the components as well. I just wanted to mention that in case you're new and wanted to get a sense of how the templates can be designed.

With that being said, if we close this off and then click on the "Export HTML" button in the Figma plugin up here, that will allow us to export the code to HTML. What we can do is change the default export option from HTML email, and if we go down to the platform integration section down here and scroll down to the letter "M," we want to click on the Mailmodo option. If you click on Mailmodo, we can then populate the subject line and the preview text. The preview text gets shown underneath or next to the subject line in your email client. If you're in Gmail or Outlook, you'll notice there's usually a bit of text underneath or next to the subject line itself. This is what that populates there. You can paste that in there with the subject line, and that will add it to your title tag in the HTML export. If you're viewing the email in your web browser, for example, that will also populate the title tag. Just a note: we will have to add this subject line manually in Mailmodo in a moment.

I'm just going to export that now. If I click on the "Export for Mailmodo" button, that will generate all the HTML code, automatically upload all the images, and give us this ZIP file to download. Now that that's ready to go, I'm just going to click on the "Download your .zip file" button and save that to my desktop. You can save it wherever you like. Then, if I open up my desktop and unzip that file by double-clicking on it, we can see once we expand the folder that it just unzipped. We've got this folder in here, which is named the same as our Figma frame, and this index.html file is the one we're going to be using in a moment.

What we now want to do is go back to our Mailmodo dashboard. If you log into your Mailmodo account and then go to the templates page, click on "Templates" in the left-hand side column, and under the "Your Templates" tab, go down here where it says "Create New Email Template." Click on the little arrow on the right here and then click on "Upload Template." I'm going to click on the "Upload Template" option, and you can see here it's going to allow us to drag and drop an HTML file. The one we want to be using is the one inside of that folder, not the previews.html file. We want the index.html file, and we're going to drag and drop that index.html file directly into this little drop zone area here in Mailmodo. That will allow us to upload the index.html file.

Once that's finished uploading, go ahead and click on "Add Name and Email Type." You can give this one a name. I'm just going to call this "Example Template," and under "Select Email Type," you can choose whatever you like. I'm just going to use "Promotional" in this case and then click on "Save and Upload." That will save the template and upload it into our Mailmodo account. You can see here on the preview page, this is looking really good. This is exactly what we saw in our Figma preview as well. This is the real HTML, so we can see this on mobile, very similar to what we just saw in the Figma plugin preview.

Once you're happy with that, you can go ahead and use that however you like. For example, you can click on the little more options icon here, click on "Use in a Campaign," and that will allow you to automatically spin up a new campaign with the template pre-selected. For example, I'm just going to click on "Use in Campaign," click on the "Bulk" option, and that will allow us to spin up a brand new campaign directly from the template we just uploaded. You can call this whatever you like. We can call this "Campaign Name." Again, you need to pre-populate the subject line one more time. If we paste that in the subject line here and again, preheader text, you can leave it empty if you've already pre-populated it in the export options. If you've already put in your preheader text in the plugin here, you don't need to populate it again here; otherwise, that will double it up. But again, if you've already populated the subject line in the Figma plugin, you do still need to duplicate that subject line here as well for the reasons I mentioned earlier.

What you can do is send a test yourself. If you want to click on the "From Name" and the "Reply To Address," you can populate those, and what we can then do is just go ahead and click on "Next," select your list, click on "Next," and then you can do things like send a test campaign. If you wanted to send a test to yourself before you actually send out the full campaign to your real list, that's probably a good idea. You can go ahead and click on this "Send Test Campaign" button, and that will allow you to review the email by sending a test email to your own email address first.

That's basically it. I just wanted to run through that really quickly to show you how you can upload a custom HTML email that was exported from Figma using the Emailify Figma plugin into your Mailmodo account using the HTML export option. Unfortunately, they don't have an API option at the moment to automatically upload it, so you do have to manually drag and drop that index.html file as per their documentation site here. You can see in their own documentation, they basically recommend uploading it manually via the HTML file.

The other really weird quirk that they mention is that if you're using a custom HTML template, you can't use a custom unsubscribe link. I thought that was quite strange; usually, you're allowed to use your own unsubscribe link. I actually tried using an unsubscribe link that they recommended, and it basically just gets stripped out. Essentially, at the moment, it seems like if you are using a custom HTML template with Mailmodo, they will automatically inject an unsubscribe link at the very bottom of the email. That's a bit of a shame because you normally would want to add your own unsubscribe link with your own design, but it seems like at the moment, they just strip that out. If you add that in as per their documentation here, the custom unsubscribe link I've tried adding into the custom HTML template links and design, it basically just gets stripped out and doesn't work. It seems to always add its own custom HTML unsubscribe link to the bottom of the email regardless.

I just wanted to flag that in case you're wondering why there's no custom unsubscribe link. It seems like this is just the way they do it at the moment. Hopefully, that'll change in the future, but I just wanted to quickly cover that now in case you're wondering about it. We'll leave it there for today. I just wanted to run through that really quickly, and hopefully, if you're a Mailmodo user, this is a helpful tutorial just to show you the end-to-end process of creating, exporting, and uploading your custom HTML templates from Figma to the Mailmodo platform using the Emailify Figma plugin. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Responsive email design system in Figma
description: How teams build more reusable responsive email systems in Figma.
datePublished: 2025-01-26T00:00:00.000Z
dateModified: 2025-01-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-responsive-email-design-system-in-figma/
markdownUrl: https://www.hypermatic.com/articles/emailify-responsive-email-design-system-in-figma.md
---

# Responsive email design system in Figma

How teams build more reusable responsive email systems in Figma. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for responsive email design system in figma when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Emailify fits into the process

Emailify matters in this workflow because email work often gets rebuilt after design. Keeping layout, content, and export closer together removes a lot of duplicate effort from campaign production.

With Emailify, teams can usually:

- build real email layouts instead of static mockups
- export HTML for the email platforms the team already uses
- keep design and production closer together for campaigns

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Emailify](/emailify/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If email production is the bottleneck, Emailify is usually the cleanest answer. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: Figma to HTML
description: Convert Figma layouts to semantic HTML with Weblify and jumpstart implementation.
datePublished: 2025-01-26T00:00:00.000Z
dateModified: 2025-01-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-to-html/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-to-html.md
---

# Figma to HTML

Weblify generates HTML that respects your design intent. Flexbox, CSS grid, headings, buttons, and lists all map correctly, so engineers can drop the markup into prototypes or production code with minimal refactoring.

### More than screenshots
Unlike static exports, Weblify delivers live markup with classes, IDs, and comments. That means developers can test interactions, layer in data, and ship faster.

### Accessibility in mind
The plugin encourages semantic tags (nav, header, footer) and ARIA attributes. You can adjust them before exporting to match your accessibility standards.

### Process
1. Select the frame you want as HTML.
2. Run Weblify and review the generated markup + CSS.
3. Copy it into your repo or share via your documentation platform.

It’s the direct line from design to HTML we’ve been asking for.

### Best practice
Pair the exported HTML with screenshots in your PR so reviewers can compare quickly. When they see that Weblify created clean markup, code review goes smoother and engineering trusts the process.

---

---
type: article
title: Stakeholder Review Workflow
description: Build a calm stakeholder review workflow by running every round through Commentful.
datePublished: 2025-01-25T00:00:00.000Z
dateModified: 2025-01-25T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-stakeholder-review-workflow/
markdownUrl: https://www.hypermatic.com/articles/commentful-stakeholder-review-workflow.md
---

# Stakeholder Review Workflow

Stakeholder reviews can stall a project faster than any technical blocker. My fix has been to run every round through Commentful. It gives stakeholders a focused environment, keeps the design team in control, and documents every decision so we can move on confidently.

### Stage reviews intentionally
Group frames by milestone—exploration, hi-fi, pre-launch—and publish only what needs attention. Add context notes so stakeholders know what kind of feedback you’re after. Commentful keeps the rest of your Figma file hidden, which reduces distraction.

### Track consensus in real time
As comments come in, drag them through stages on the Commentful board. Stakeholders can see progress live, which reduces “just checking in” messages. When a round ends, export the summary for leadership or future retros.

### Template for success
1. Prep the file and publish the curated set of frames.
2. Invite stakeholders with the right permissions and highlight the deadline.
3. Meet (synchronously or async), resolve everything on the board, then archive the round before moving on.

It’s a lightweight process that brings order to one of the messiest parts of design work.

### Manage expectations
Commentful makes it easy to set review windows and automatically remind stakeholders as deadlines approach. Include a short agenda in the board description so execs know which questions you’re trying to answer. When the round closes, lock the board to signal that the next iteration is underway.

### Lessons learned
- Assign a single owner for each stakeholder group (legal, marketing, product) to avoid conflicting feedback.
- Use color-coded tags to show which requests are blockers versus nice-to-haves.
- Share the exported summary with leadership so they can see progress without attending every meeting.

A thoughtful stakeholder review workflow transforms approvals from chaos into a predictable rhythm. Commentful is the glue that keeps it running.

---

---
type: article
title: Figma Frontend Code Snippets
description: Generate frontend code snippets from Figma with Weblify and keep your UI kits aligned with production.
datePublished: 2025-01-22T00:00:00.000Z
dateModified: 2025-01-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-frontend-code-snippets/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-frontend-code-snippets.md
---

# Figma Frontend Code Snippets

Frontend teams love reusable snippets, but writing them manually eats time. Weblify converts your Figma layouts into ready-to-use fragments: HTML/CSS, Tailwind classes, React components, or Vue templates. Each snippet includes semantic markup and references to your design tokens.

### Share with the whole team
Store snippets in Storybook, Notion, or your design system site. Because Weblify links back to the original Figma frame, anyone can trace updates or request changes.

### Iteration is easy
Update the design, rerun Weblify, and replace the snippet in your docs. No more stale examples or copy-paste errors.

### Snippet workflow
1. Highlight the UI element you want code for.
2. Run Weblify and choose the snippet format.
3. Share it with engineering or drop it into your documentation library.

It keeps design and frontend references synchronized without heroic effort.

### Tip
Set up a recurring reminder to audit snippets each quarter. Make a list of changes (new tokens, spacing rules) and rerun Weblify for the affected components so your documentation remains accurate year-round.

---

---
type: article
title: Convertify vs HTML to Figma Scripts
description: Why I reach for Convertify instead of brittle HTML-to-Figma scripts when moving designs between tools.
datePublished: 2025-01-20T00:00:00.000Z
dateModified: 2025-01-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-convertify-vs-html-to-figma-scripts/
markdownUrl: https://www.hypermatic.com/articles/convertify-convertify-vs-html-to-figma-scripts.md
---

# Convertify vs HTML to Figma Scripts

There are plenty of scripts that promise to convert HTML into Figma layouts. They usually result in tangled groups, inline styles, and a lot of cleanup. Convertify takes a different route: it focuses on high-fidelity conversions between design formats (Sketch, XD, PowerPoint, etc.) so the file you get back is actually usable.

### Structured data beats guesswork
HTML-to-Figma scripts try to infer intent from code meant for browsers. Convertify works with structured design files, which means components, text styles, and layers remain intact. Less guesswork equals less rework.

### Direction goes both ways
Scripts typically go from HTML into Figma only. Convertify handles exports _and_ imports—PDF to Figma, Google Slides to Figma, Figma to After Effects, and more. That matters when you’re collaborating with a broad set of tools.

### When scripts might still help
If you only have access to a live website and need a quick starting point, an HTML import script can be fine. But once a partner shares a real design file, Convertify delivers far better results. It’s the difference between tracing over a screenshot and editing the original layers.

### Collaboration implications
When you rely on scripts, developers and designers end up arguing over layer order and naming because the imported structure is unpredictable. Convertify maintains the hierarchy you built, so teams on both sides can work confidently. That predictability matters when deadlines are tight or when multiple vendors contribute to the same project.

### Recommendation
Use scripts for emergency inspiration; use Convertify for real collaboration. The latter keeps your design system intact, supports round-tripping, and respects privacy requirements—all things scripts usually ignore.

---

---
type: article
title: Bulk Image Resizer
description: Use HyperCrop as a bulk image resizer when production timelines demand dozens of pixel-perfect outputs.
datePublished: 2025-01-18T00:00:00.000Z
dateModified: 2025-01-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-bulk-image-resizer/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-bulk-image-resizer.md
---

# Bulk Image Resizer

Bulk resizing images sounds trivial until there are stakeholders waiting on every version. HyperCrop turns that slog into a five-minute task because it works directly on top of the same components we use for design reviews. I can resize an entire page’s worth of artwork, keep the crops locked to our brand rules, and export final files without ever opening a second app.

### Resizing without duplicating your file
Instead of duplicating pages for every ratio, I select the final frames, run my preset, and HyperCrop produces each variant from the source design. If the creative changes, I just rerun the preset; there is no divergence between the design file everyone is editing and the production outputs I am exporting.

### Making presets do the heavy lifting
HyperCrop’s presets store target widths, heights, aspect ratios, padding, and file formats. I maintain separate presets for ecommerce, lifecycle, and paid social so that each team’s requirements are one click away. When specs change midway through a launch, I update the preset once and regenerate the batch. No Frankenstein file structures, no copy-pasted crops hiding on extra pages.

### Exporting with confidence
1. Group similar assets (product hero, lifestyle, UI screen) so you can review the smart crops quickly.
2. Pick your preset and enable the “keep subject in view” option so HyperCrop respects focal points.
3. Export directly to a shared folder or download the zipped output—everything is labeled with the source layer name for easy versioning.

Designers get to stay creative, developers and marketers get perfectly sized files, and nobody has to pull an all-nighter wrangling a random desktop cropper again.

---

---
type: article
title: Figma PDF Compression
description: Shrink PDF exports from Figma with TinyImage so stakeholders can actually download them.
datePublished: 2025-01-17T00:00:00.000Z
dateModified: 2025-01-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-figma-pdf-compression/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-figma-pdf-compression.md
---

# Figma PDF Compression

Large PDFs clog inboxes and upload portals. TinyImage compresses multi-page PDFs exported from Figma, preserving vector sharpness while slicing megabytes off the file size. Perfect for presentations, QA docs, or legal reviews that prefer PDF attachments.

### One-click optimization
Export the PDF from Figma, run it through TinyImage, and choose your compression level. You can preview the result to ensure text and imagery stay crisp.

### Keep compliance teams happy
Many enterprise portals cap attachments at 10 MB. TinyImage helps you stay under those limits without splitting files or lowering quality manually.

### PDF compression workflow
1. Export your Figma document as a PDF.
2. Drag it into TinyImage and select the desired compression preset.
3. Share the optimized file via email, Slack, or whatever system you use.

It’s a small step that removes a lot of friction during approvals.

### Version control
Store both the original and compressed PDFs in your release folder with clear naming (`-raw`, `-compressed`). TinyImage keeps the metadata, so if someone requests the uncompressed version later, you can provide it without recompressing.

---

---
type: article
title: Figma Newsletter Template
description: Scale your newsletter program by managing templates and exports with Emailify inside Figma.
datePublished: 2025-01-16T00:00:00.000Z
dateModified: 2025-01-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-figma-newsletter-template/
markdownUrl: https://www.hypermatic.com/articles/emailify-figma-newsletter-template.md
---

# Figma Newsletter Template

Newsletters thrive on consistency. Emailify helps me build a template once and keep iterating without touching code. Each issue is just a remix of modular blocks—featured story, quick links, CTA rails—assembled in Figma.

### Keep editorial flowing
Writers can draft copy directly in Figma or sync it via CopyDoc. Emailify’s placeholders make it clear where content goes, so editors can visualize the layout long before we export.

### Mobile-friendliness by default
The templates collapse gracefully on small screens. When I preview in Emailify, I can tweak padding, hide modules, or swap layout variants per breakpoint before exporting.

### Publishing rhythm
1. Duplicate the latest issue, swap in new content, and gather feedback via Figma comments.
2. Run Emailify to export HTML, MJML, or direct-to-ESP packages.
3. Send tests, check analytics, and update the template based on what performed best.

It keeps newsletters feeling polished without adding headcount.

### Keep a backlog
Maintain a “future stories” page where editors drop upcoming content. Designers can slot those modules into the template during quiet periods so you’re never scrambling the night before send day.

### Metrics integration
Log open/click performance next to each issue’s Figma page. When the team revisits a layout months later, you’ll know exactly what resonated and which modules to tweak.

---

---
type: article
title: Convert Figma to XD
description: Use Convertify to turn Figma files into Adobe XD documents without rebuilding components from scratch.
datePublished: 2025-01-15T00:00:00.000Z
dateModified: 2025-01-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-convert-figma-to-xd/
markdownUrl: https://www.hypermatic.com/articles/convertify-convert-figma-to-xd.md
---

# Convert Figma to XD

Every so often, a collaborator still needs an Adobe XD file. Instead of redrawing everything, I use Convertify to export our Figma work into a tidy .xd document. The plugin respects pages, artboards, text styles, and components, so the XD file feels like it was built there to begin with.

### Keep design systems intact
Convertify maps Figma components, colors, and typography to XD equivalents during the export. Symbols stay linked, text remains editable, and vectors keep their fidelity. That means the receiving team can continue iterating in XD without hacks.

### One-click conversion
Select the frames or pages, open Convertify, and choose the Adobe XD option. The plugin bundles the assets, converts them, and downloads the .xd file for you. No cloud rendering, no waiting hours for an email link.

### A few tips
1. Clean up layer names before exporting so the XD file feels well organized.
2. Include shared components on a separate page—Convertify will transfer them all at once.
3. Share the exported file alongside usage notes so the XD team knows how everything was structured in Figma.

It’s the fastest way I’ve found to bridge the gap between the two tools when collaboration depends on it.

### Keep revisions painless
When the Figma file evolves, rerun Convertify on the updated frames. Because the plugin remembers your previous selections, producing a refreshed XD package is trivial. Send the new export with a changelog so partners can diff versions without guessing what changed.

### Use cases beyond handoff
- Agencies collaborating with in-house teams locked into XD
- Vendors producing training materials that rely on Adobe workflows
- QA teams validating behaviors inside the Adobe ecosystem

Convertify makes “convert Figma to XD” feel like a normal part of the process instead of a dreaded chore.

---

---
type: article
title: Figma CSV Import Plugin
description: Import CSV files into Figma with CopyDoc so data teams can update copy without pinging designers.
datePublished: 2025-01-13T00:00:00.000Z
dateModified: 2025-01-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-csv-import-plugin/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-csv-import-plugin.md
---

# Figma CSV Import Plugin

CSV is the lingua franca for content updates. CopyDoc reads those files directly, maps each column to the right layer, and applies changes in seconds. It’s perfect for product strings, pricing tables, or marketing campaigns where data lives in spreadsheets.

### Collaborate with ops teams
Growth, lifecycle, and localization teams can prep CSVs with unique IDs, send them over, and let CopyDoc do the rest. Because CopyDoc previews the changes before applying them, everyone stays confident that the right strings will update.

### Automation-friendly
Tie CopyDoc into a workflow where CSV exports come from Airtable, Google Sheets, or your CMS. Designers simply drag-and-drop the file, review the diff, and apply. No manual copy-pasting required.

### Usage pattern
1. Ask stakeholders to include an “id” column that matches your Figma layer names or plugin-generated IDs.
2. Import the CSV via CopyDoc, adjust mappings if needed, and preview the differences.
3. Apply the batch update and continue designing with the latest content.

This plugin turns spreadsheets into assets instead of chores.

### Tips for reliability
- Validate CSV formatting (UTF-8, comma-separated) before handing it to designers.
- Use CopyDoc’s snapshot feature to roll back if the spreadsheet contains surprises.
- Keep a change log referencing the CSV filename and date so you can trace updates later.

Once data teams realize how easy CSV imports are, they stop flooding Slack with copy requests and start maintaining their own pipelines through CopyDoc.

---

---
type: article
title: DocSend Alternative
description: Why Crypto is my DocSend alternative when I need to secure Figma prototypes, decks, and exports.
datePublished: 2025-01-12T00:00:00.000Z
dateModified: 2025-01-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-docsend-alternative/
markdownUrl: https://www.hypermatic.com/articles/crypto-docsend-alternative.md
---

# DocSend Alternative

DocSend is great for sharing PDFs, but it isn’t built for live Figma prototypes. Crypto bridges that gap. Instead of exporting static decks to DocSend, I publish encrypted, password-protected links directly from Figma and still get the audit logs stakeholders expect.

### Why Crypto remains my pick
Crypto lives inside Figma, so publishing secure links is a two-click process. I can set passwords, restrict downloads, watermark previews, and even record walkthroughs for people who can’t log in. DocSend requires exporting assets first and loses interactivity along the way.

### What to ask any alternative vendor
- Do they encrypt files at rest _and_ in transit?
- Can access be revoked instantly?
- Is there an audit log that stands up to compliance reviews?
- Do they support prototypes, PDFs, and other export formats?

If the answer is “no” for prototypes—as it is with DocSend—Crypto stays in my stack.

### Test with a real workflow
Run your riskiest project through the alternative: NDA-bound mockups, executive decks, prototypes. If reviewers can’t access the work, if the audit trail looks flimsy, or if exporting requires multiple tools, it’s not worth migrating. Crypto handles all of that without leaving Figma.

### Consider stakeholder experience
Clients appreciate Crypto’s branded review portals and simple password prompts. Alternatives that require VPNs or separate accounts often increase friction, which delays approvals. Keeping the process lightweight is just as important as ticking compliance boxes.

---

---
type: article
title: Figma Annotation Plugin
description: Annotate Figma work for clients without cluttering the file by publishing notes through Commentful.
datePublished: 2025-01-11T00:00:00.000Z
dateModified: 2025-01-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-figma-annotation-plugin/
markdownUrl: https://www.hypermatic.com/articles/commentful-figma-annotation-plugin.md
---

# Figma Annotation Plugin

Figma comments are great internally, but they can overwhelm stakeholders who just need direction on what to review. Commentful doubles as an annotation plugin—I can add guidance, context, or open questions alongside each frame and share it with clients in a clean interface.

### Layered annotations
Add callouts, highlight interaction details, or attach video walkthroughs before publishing. Commentful keeps those annotations synced with the specific frame, so reviewers always understand why something behaves a certain way.

### Control the narrative
Because you choose which frames and notes go live, you can guide clients through the experience intentionally. No unfinished explorations, no half-baked experiments. Commentful keeps everything curated.

### Annotation workflow
1. Mark up the frames in Figma with any supporting graphics or text.
2. Publish them to Commentful and add clarifying notes for stakeholders.
3. Share the secure link so reviewers can see both the design and the annotations in one place.

The result is a calm review environment that still gives stakeholders the context they crave.

### Share knowledge with future teammates
Commentful boards become living documentation. When someone new joins mid-project, they can browse past annotations to understand why certain decisions were made. That institutional memory prevents rehashing conversations and keeps projects moving even when team members rotate off.

### Tips for better annotations
- Use screenshots or short Loom clips embedded inside cards to explain complex motion or edge cases.
- Add “Next steps” sections on each board so reviewers know what will happen after they approve.
- Archive older annotations once they’re baked into the design to keep the experience uncluttered.

Commentful turns annotations into a dialogue rather than a static layer of comments. That difference matters when you need clarity at scale.

---

---
type: article
title: PWA Icon Generator
description: Generate Progressive Web App icon sets and manifests from Figma with Favvy.
datePublished: 2025-01-09T00:00:00.000Z
dateModified: 2025-01-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-pwa-icon-generator/
markdownUrl: https://www.hypermatic.com/articles/favvy-pwa-icon-generator.md
---

# PWA Icon Generator

PWAs ask for a laundry list of icons. Favvy bundles them in seconds. Design one master icon, fire up the plugin, and export maskable icons, square icons, splash screens, and the manifest that ties them all together.

### Maskable support included
Chrome and Android expect maskable icons so the OS can clip them gracefully. Favvy exports those variants automatically and flags them appropriately in the manifest.

### Coordinate with engineering
Each package includes a summary of sizes plus implementation instructions, so the handoff to engineering is painless. If the product team changes the app name or theme color, update those fields in Favvy and re-export.

### Generator checklist
1. Keep your icon file big (1024×1024+) for best results.
2. Configure the manifest settings (short name, theme color, start URL) in Favvy.
3. Download the output and drop it straight into your PWA repo.

It’s the generator I rely on for every PWA launch.

### Testing made easy
After exporting, use Favvy’s preview sheet to confirm how icons look on various devices. Share the sheet with QA so they can validate that the right assets shipped without hunting through directories.

### Version control
Commit the manifest and icons with meaningful commit messages (“refresh icon August 2023”). When stakeholders ask when the last update happened, you have an authoritative answer.

---

---
type: article
title: Figma email approval workflow
description: A better approval workflow for email campaigns designed in Figma.
datePublished: 2025-01-09T00:00:00.000Z
dateModified: 2025-01-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/figma-email-approval-workflow/
markdownUrl: https://www.hypermatic.com/articles/figma-email-approval-workflow.md
---

# Figma email approval workflow

A better approval workflow for email campaigns designed in Figma. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Emailify

[Emailify](/emailify/) is one of the more useful tools in this workflow. Emailify matters in this workflow because email work often gets rebuilt after design. Keeping layout, content, and export closer together removes a lot of duplicate effort from campaign production.

### Commentful

[Commentful](/commentful/) is one of the more useful tools in this workflow. Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: tutorial
title: How to use free Figma email templates to design HTML emails using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2025-01-08T00:00:00.000Z
dateModified: 2025-01-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-use-free-figma-email-templates-to-design-html-emails-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-use-free-figma-email-templates-to-design-html-emails-using-emailify.md
---

# How to use free Figma email templates to design HTML emails using Emailify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to use the free included Figma email templates in the Emailify Figma plugin which you can then customize and use as a starting point for your own brand and content designs. To get started all we need to do is go to our Figma file, click on the little resources icon up here, and then you just want to search for Emailify. Under the plugins tab, if you click on the Emailify item you can run that Figma plugin by either clicking on this run button here or I'd recommend clicking on this little save icon to add it to your plugins list for easy access later.

I've already clicked on the save icon, I'm just going to go to my Figma canvas, right-click anywhere, go down to plugins, then go down to saved plugins, and click on Emailify. That's just going to run the Figma plugin that we saved a second ago. If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma which you can then automatically export to production-ready responsive code from the Figma plugin directly. You'll notice that the first thing it shows is adding a new blank Emailify frame.

This is the default option where you can basically create a new template and then add it to your Figma page. We can click on this add new Emailify container, and that then will allow us to start adding components which we can then customize and spin up our own designs with our own content and brand pretty easily, and then preview that as real HTML and work on that responsive version as you'd expect. But if you don't want to start from scratch, or you haven't started building out a component library yet, or you just want some inspiration, or you just want to figure out a bit more detail about how the Figma plugin’s features can potentially create layouts, what we can do as an alternative to starting from scratch is go back to the new email page.

We can click on this little plus icon here, and instead of adding a new blank Emailify frame, what we can do is click on the browse Emailify Figma templates tab. This is going to load up over 100 Emailify-ready free Figma templates that we can duplicate and customize and grab components from to create our own email designs with our own brand as a bit of a head start. Instead of starting from scratch, you can basically just browse through here, find something that you like or would like to emulate, or something you just find interesting. You can click on any of those and duplicate it to your own Figma account for free and start using it straight away.

We can take a look at a couple of these now. For example, if we click on this Netflix template, that's just going to open up a brand new tab in the Figma community page, and we can go ahead and open that in Figma by clicking on this open in Figma button. Go ahead and click on this blue open in Figma button, and that's going to open up a brand new tab and automatically duplicate that Figma file to your drafts. You can see it's got the little Community word in brackets there, just letting you know it's been duplicated from the Figma community.

You'll notice that on the left-hand side here, we've got all of these layers that were originally created using the Emailify Figma plugin. That's the way that it works. The Emailify Figma plugin basically helps you to create these layout components. These have all been added initially either from the layouts tab over here or by using the quick add features down here, and then just customizing the design and content using Figma. We end up with something like this.

You can see here that the layout reflects the Emailify structure that you'd expect. We've got rows, we've got columns inside of those rows, and each of those columns can have a bunch of content stacked. You'll see here that we've got a really condensed layout. It's using components, we've got the same component up here that we've got reused down here. It's a very flexible sort of template in this case.

If we were to edit this font, you can see that that's updating for all of those instances. This is a really nicely designed Emailify-ready template. The good thing about that is if we click on the preview button, you will see the real HTML preview is looking really, really good out of the box. You can see here we've got all of our content. These are all individual images. This is all real HTML text, and these are real HTML buttons that you can then customize and use for your own designs.

What we could do is, if you wanted to reuse some of this content or customize it, we could either customize it in the template itself here and either hide certain sections like this, just removing them or deleting them, or you can actually reuse these components in a new email. For example, if we added a new Emailify frame, I'm just going to call this test template and add that to the page. We can actually move or duplicate those components into this new template as well. If we drag and drop, for example, this row here, we grab that and drag and drop it into the new template, you can see here that it's automatically adding that into the template there.

Same thing for these buttons. If you wanted to add those in there, you just copy and paste them. When you preview that, those will automatically be good to go. You can sort of mix and match as well. If you wanted to grab some components from another template, just spin up that new email panel again, click on browse Emailify Figma templates, and find a different email that you want to grab some components from.

For example, if we scroll down and see some other things that we might like, you could basically grab another template and duplicate those as well. We're just going to grab this one here, and again, that's going to open up the Figma community tab. All we need to do is click on the open in Figma button. I'm going to click that again. Once again, that's going to duplicate it into a brand new tab and add it to our drafts. Again, you can see here all of the layers are good to go. Then it's just a matter of copy-pasting these components into our other frame.

We can just jump back into our other tab here, paste those in, and rearrange them as we need to. You can just drag and drop those around, and if we want to grab the photo, for example, we can do that. We'll just grab this one, and of course, you can customize that. We can change that fill to be darker, or we can just make it black like the other ones, and then click on preview. You'll notice that all of the components that we just put together all kind of mix and match. You don't have to worry about any issues because these were all originally designed using the Emailify Figma plugin.

This can be a really easy way to get started if you're new to the Figma plugin, or even if you're experienced with it and you don't want to go to all the trouble of manually designing all of these components yourself. Using the built-in free Figma templates that the plugin offers is a really good way of automatically grabbing some of those components, which you can then build on and customize to your heart's content.

For example, you can obviously change the fonts, content, and logos. You just swap out these layers, get rid of that image, and drag a new one in there, which would automatically update that. We can basically change all of this to be whatever we want, and that's going to get reflected in the template as you'd expect with the Figma plugin. For example, we could change this, make that red as well, and make the text white to match the other button. When we refresh that, those changes will automatically get included as well.

I'm not going into all of the details about the mobile customizations and things like that, but there's a lot to explore there. If you click on any of these layers and then click on the settings button, either in the preview window or the main window, you can do things like override font sizes, padding, and visibility on mobile or desktop. You can then go through and add all of these mobile overrides. When you open that up on desktop and mobile, you'll be able to see those overrides taking place.

Once you're happy with the email design and you've checked it out in the preview, as we just had a look at a moment ago, you can then export that to production-ready HTML by clicking on the export HTML button in the top right. You can select the emails you want to export. You can do things like add your subject line and preview text as well. Then you can choose what platform, if any, you want to export it for. If you're using something like Klaviyo or MailChimp, you can automatically paste in your API key, and that will upload it to MailChimp or Klaviyo for you.

Today, we're just going to use the simple download-to-your-computer option and export it to an HTML file. I'm just going to click on export to HTML. That will go through and automatically export all of the images, generate all of the HTML code for me, and then allow me to download that as a zip file. It's just finished exporting. I'm going to click on download your zip file and save that to my desktop. If I unzip that file, I can double-click on my zip file and open that up. When I open up my finder and open that folder, I can see we've got our two emails that have been exported.

The index.html file inside of both of those folders is named the same as what we named our Figma frame. We've also got this previews file. We can drag and drop that preview file into our browser, and that's going to give us a nice preview page showing what the design will look like on mobile and desktop. We've got both emails on here, you can see this is real HTML code that we've just exported. You can see it on mobile as well. We can change the width of that mobile device just to make it easier to see what that looks like at different widths.

That's basically it. We've got our nice preview page, and you've got the real emails that these are being loaded from inside both those folders. We can drag and drop that into the browser, and then we've got our full email there. It's looking really good. Again, you can see all of that code just by going to the "View Page Source," and that's all of the HTML code that's automatically been generated by the Figma plugin, ready to go and use in your own email-sending platform of choice.

I just wanted to show you what that looked like as a final step when you're ready to export your HTML. Hopefully, that's been helpful. If you're interested in learning more about the Figma plugin, as I said, you've got a whole bunch of templates. We've got 102 templates in there at the moment, feel free to browse all of those, duplicate them again totally for free, and use them as inspiration or reference. They're also a really quick way of spinning up brand-new components without having to manually design them.

You can basically mix and match those, customize them with your own content, and hopefully, that's going to give you a really quick head start at creating your own email campaign designs for your brand with your own content. We'll leave it there for today. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Figma Export Multiple Sizes
description: Run multi-size exports in Figma with HyperCrop without duplicating artboards or losing track of ratios.
datePublished: 2025-01-04T00:00:00.000Z
dateModified: 2025-01-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-figma-export-multiple-sizes/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-figma-export-multiple-sizes.md
---

# Figma Export Multiple Sizes

Figma’s export panel is great for a handful of assets, but it stops scaling once you need dozens of ratios off the same layout. HyperCrop handles multi-size exports in a way that actually matches how teams brief work: give me the same creative in eight sizes, in two formats, and please don’t crop out the subject. The plugin sits inside the design file, so new sizes stay perfectly in sync with whatever the team reviews next.

### One preset, unlimited sizes
I like to start by translating the spec sheet into a HyperCrop preset. Each row becomes a target width, height, format, and naming convention directly inside the preset builder. That way, “export multiple sizes” becomes one click instead of an exercise in attention to detail. HyperCrop also remembers margins and safe areas, so the focal point never drifts even when your ratios vary wildly.

### Keeping reviews and exports aligned
Because everything happens on the same page in Figma, I can invite stakeholders to check the smart-crop previews before exporting. They see exactly how campaign imagery will adapt to square storefront tiles, app feature cards, or hero banners. If someone spots an issue, we tweak the design or adjust the preset and re-run the batch—no detour through another tool.

### Ship more sizes with less overhead
1. Select the components or frames that need to be repurposed.
2. Run the preset that contains every requested size, and preview the crops from the plugin window.
3. Export the full batch and drop it into the shared drive or straight into HyperCrop’s zipped download.

That’s it. HyperCrop makes exporting multiple sizes in Figma feel as simple as exporting one, which is exactly how it should be.

### Tips for different channels
- Keep separate presets for marketing site, app store, and paid media specs so you don’t mix naming conventions.
- Use HyperCrop’s format toggles to export PNGs for product surfaces and JPGs/WebP for marketing, all in one pass.
- Include reference layers (safe zones, typography guides) in your preset so HyperCrop respects them every export.

### Keep history
Log which preset version shipped with each release. If a new request arrives months later, you can recreate the exact same multi-size pack and avoid pixel drift across campaigns.

---

---
type: article
title: Figma Investor Deck Workflow
description: Run your entire investor deck workflow in Figma using Pitchdeck for exports and live presentations.
datePublished: 2025-01-02T00:00:00.000Z
dateModified: 2025-01-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-figma-investor-deck-workflow/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-figma-investor-deck-workflow.md
---

# Figma Investor Deck Workflow

Investor decks move fast. Numbers change, stories evolve, and you often need multiple versions for different audiences. Pitchdeck keeps that workflow in Figma. Build the deck with your design system, update metrics in seconds, and export polished presentations without touching PowerPoint manually.

### Keep one source of truth
Model all slides in Figma using components for headers, footers, data callouts, and team bios. When something changes—ARR, runway, product roadmap—update the component once. Pitchdeck will carry those updates into every future export.

### Present directly from Pitchdeck
Need to pitch live? Pitchdeck includes a presenter mode with notes, timers, link tracking, and analytics. Share a web link or plug into your video call without switching apps. After the meeting, check the analytics to see which slides investors spent time on.

### Investor deck workflow outline
1. Build the deck in Figma and link data sources (CopyDoc, spreadsheets) if needed.
2. Use Pitchdeck to export versions for Google Slides, PowerPoint, or PDF handouts.
3. Present live or send interactive links, then iterate quickly based on feedback.

It’s the investor deck process I wish I had back when every change meant editing five separate files.

### Track interest with data
Share Pitchdeck’s hosted link with potential investors and monitor which sections grab their attention. If everyone lingers on the product roadmap, you know where to go deeper in the next call. That feedback loop is much harder to capture when you’re emailing PDFs.

### Keep version control sane
Create branches or duplicate pages in Figma for each investor segment (seed, growth, strategic) while keeping shared components in sync. Pitchdeck exports whichever branch you need without duplicating files across your drive. Archive each round’s deck with its analytics so you can analyze what worked later.

---

---
type: article
title: Figma Implementation Checker
description: Pixelay checks how closely your implementation matches the Figma spec without manual diffing.
datePublished: 2025-01-01T00:00:00.000Z
dateModified: 2025-01-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-figma-implementation-checker/
markdownUrl: https://www.hypermatic.com/articles/pixelay-figma-implementation-checker.md
---

# Figma Implementation Checker

Implementation reviews usually rely on good eyesight and patience. Pixelay automates them. Load your Figma frame, overlay it on the build, and switch to diff mode to see exactly where pixels deviate. It’s like git diff, but for UI.

### Beyond simple overlays
Pixelay offers heatmaps, split views, and tolerance controls. You can set an acceptable threshold (e.g., 2px) and quickly find sections that exceed it. This is perfect for teams with strict design systems.

### Integrate with your sprint
Add Pixelay checks to your definition of done. Before shipping, engineers or designers run through the key flows, capture any differences, and fix them before QA signs off.

### Implementation loop
1. Publish the final Figma frames to Pixelay.
2. Compare them to staging or local builds.
3. Log discrepancies with annotated screenshots and assign them to the right owner.

It’s unbelievably satisfying to sign off knowing the shipped UI matches what was approved.

### Make it part of Definition of Done
Add a Pixelay comparison step to every story. Designers or QA can upload annotated diffs into your ticketing system, making acceptance criteria clear. Engineers quickly learn that builds won’t ship until the overlay looks perfect.

---

---
type: article
title: Design email templates in Figma for Klaviyo
description: How to design email templates in Figma for a cleaner Klaviyo production workflow.
datePublished: 2024-12-22T00:00:00.000Z
dateModified: 2024-12-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-design-email-templates-in-figma-for-klaviyo/
markdownUrl: https://www.hypermatic.com/articles/emailify-design-email-templates-in-figma-for-klaviyo.md
---

# Design email templates in Figma for Klaviyo

How to design email templates in Figma for a cleaner Klaviyo production workflow. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for design email templates in figma for klaviyo when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Emailify fits into the process

Emailify matters in this workflow because email work often gets rebuilt after design. Keeping layout, content, and export closer together removes a lot of duplicate effort from campaign production.

With Emailify, teams can usually:

- build real email layouts instead of static mockups
- export HTML for the email platforms the team already uses
- keep design and production closer together for campaigns

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Emailify](/emailify/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If email production is the bottleneck, Emailify is usually the cleanest answer. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: From Four to Five
description: Looking back on 2024 (and towards 2025) as we celebrate Hypermatic's fifth birthday.
datePublished: 2024-12-21T00:00:00.000Z
dateModified: 2024-12-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/from-four-to-five/
markdownUrl: https://www.hypermatic.com/articles/from-four-to-five.md
---

# From Four to Five

>“Keep your head down and work like I do, but understand everybody ain't gon' like you.” 

— [Kendrick Lamar](https://www.youtube.com/watch?v=YwUQ_5iV9pY), wacced out murals

It's been exactly one year since posting an update for Hypermatic's 4th birthday ([From Three to Four](https://www.hypermatic.com/articles/from-three-to-four/)), so here's another annual recap to celebrate Hypermatic turning 5 years old today!

### Some numbers to celebrate from 2024

- **0** investors and **$0** funding (still happily bootstrapped/[default alive](http://www.paulgraham.com/aord.html))
- **72** new free Emailify-ready [Figma templates](https://www.hypermatic.com/templates/emails/) published
- **30** new YouTube [tutorials](https://www.youtube.com/@hypermatic_tutorials) recorded
- **639** new product updates and improvements shipped
- **1,450,000+** users (up from 1,029,000 a year ago)

### Some new feature highlights shipped in the last 6 months (since July 2024)

Besides the usual bug fixes, customer requests, and other smaller enhancements, these were some of the other new features that made their way into the [@hypermatic](https://x.com/hypermatic) feed on X (which is mainly used to keep a record of these changes) over the last 6 months:

- [New Email Templates](https://x.com/hypermatic/status/1873145961398333722) to Emailify
- [Popup Scrollable Text Overlays](https://x.com/hypermatic/status/1869894208464855488) to Bannerify
- [Expandable "Quick Add" Layers](https://x.com/hypermatic/status/1869576569414721830) to Emailify
- [Scrollable Anchor Links](https://x.com/hypermatic/status/1867714732561772957) to Emailify
- [New Google Fonts Support](https://x.com/hypermatic/status/1867365442119233675) to Emailify
- [Custom Crop/Bleed Units](https://x.com/hypermatic/status/1859828445175587306) to TinyImage
- [Sendwithus Integration](https://x.com/hypermatic/status/1859037409771745307) to Emailify
- [Markdown Support for Localizations](https://x.com/hypermatic/status/1846027704237543802) to CopyDoc
- [Resizable Mobile Preview Exports](https://x.com/hypermatic/status/1845643360864026958) to Emailify
- [Smart Localization Styles](https://x.com/hypermatic/status/1843487099099722096) to Emailify
- [PPTX Imports for Figma Slides](https://x.com/hypermatic/status/1843109347146223794) to Pitchdeck
- [Klaviyo Abandoned Cart Components](https://x.com/hypermatic/status/1841355105586819343) to Emailify
- [Auto-Repeat Sync Layer Naming Support](https://x.com/hypermatic/status/1840986309403271407) to CopyDoc
- [HTML Rich Text Support](https://x.com/hypermatic/status/1839189869266149562) to Bannerify
- [Google Slides Imports](https://x.com/hypermatic/status/1835891465849090377) to Pitchdeck
- [Text Outline and Text Opacity Support](https://x.com/hypermatic/status/1834437610351304919) to Pitchdeck
- [PDF Bleed & Crop Marks](https://x.com/hypermatic/status/1832256473474461958) to TinyImage
- [Crowdin Integration](https://x.com/hypermatic/status/1831570135544688866) to Emailify
- [Amazon SES Integration](https://x.com/hypermatic/status/1826128049613713831) to Emailify
- [Editable Text Feedback](https://x.com/hypermatic/status/1823608552726127103) to Commentful
- [Multiple URL Environments Support](https://x.com/hypermatic/status/1819920260369359153) to Pixelay
- [Marketo Integration](https://x.com/hypermatic/status/1818832489730949419) to Emailify
- [PPTX Text Links Support](https://x.com/hypermatic/status/1818065810751111630) to Pitchdeck
- [List Item Spacing Support](https://x.com/hypermatic/status/1816691096464031976) to Emailify

### Learnings from 5 years running a self-funded startup

Hypermatic is my first attempt at running a startup, so there are many things I had to learn along the way. It's easy to read many business books or hear common advice and think you know what to do or expect, but you don't really understand it until you've been through it; "beware of unearned wisdom" comes to mind. I think it's more important to use those resources for learning how to avoid the biggest common mistakes, but [all happy companies are different](https://www.amazon.com.au/Zero-One-Notes-Startups-Future/dp/0804139296), so it's not possible to just run a pre-defined playbook.

Before starting Hypermatic, I worked in digital agencies for a decade as both a designer and developer, so I was mostly shielded from the business side of things and realities of running a company. It's only after you make the jump to the other side that you appreciate that both sides need to work; you can't just focus on the most beautiful product design or cleanest code without at least equal focus on how you're going to distribute, market and iterate on it to find product/market fit and actually become sustainable as a business. From experience, the designers/developers on a team are living in a bit of a bubble, because they are so sheltered from customers, clients and the people who they are actually designing or developing things for.

After 5 years of doing this and learning new insights along the way, these are a few of the things that come to mind, split between maker mode (building products) and manager mode (running a business and working with companies):

#### Maker Mode

- The end user doesn't care what trendy technologies you're using behind the scenes, I think you just use whatever you personally enjoy working with and makes you the most productive and happy over the long term.
- Similarly, whatever the most simple, stable and reliable technology or infrastructure solution you can implement (eg. whatever makes it easiest to sleep well at night) is ideal, even if it's boring or isn't the hottest thing in the wider community.
- It's way easier to iterate and make changes in the very beginning of a product's life than it is once it has a larger base of customers who are already used to it, so it's good to make rapid changes early on when 99.99% of the people who are going to eventually use the product haven't even seen it yet.
- Focus is probably the single most important thing for product development; doing one thing at a time and saying "no" to everything else that's begging for your attention or doesn't align with the product vision.
- It's always a mistake to add a feature that only one or two users are asking for, and doesn't really fit into the vision of the overall product, so you need to push back on these requests even if it means losing a potential large customer (who are the most likely to ask for these bespoke features or updates).
- People are hiring your product to solve a real problem that they have, so it's best to make it exceptionally easy and obvious for them to see their problem solved with a minimal time investment using your product for the first time.
- If you're getting the same question/feedback about the interface or usability of a product over and over again, it's almost always worth just making an update inside the product itself (even if it's in your documentation) to address and resolve it.
- It's good to own as much of your infrastructure as you can, but there is basically always some layer of "platform risk" where you don't have total control; you need to minimize these while also realising there are some really positive trade-offs there between risk and upside.
- Going from working for someone else at an agency/company, where there are a myriad of overheads like recurring meetings, Slack channels, emails, Agile "rituals", Zoom calls, and general disruptions; it's amazing to go from that to removing all of these things and personally getting a 10x productivity boost, where you can literally get more than a normal week's worth of work done in a single undisrupted day of pure productivity. The numbers from [a study by Microsoft](https://www.the-future-of-commerce.com/2023/05/17/microsoft-study-meeting-overload/) seeems to back this up by showing that "57% of the average employee’s time is spent in meetings, email, and chat", "43% is spent creating documents, spreadsheets, and presentations", "The heaviest meeting users spend 7.5 hours a week in meetings" and "The heaviest email users spend 8.8 hours a week on email".

#### Manager Mode

- It can often take 6-18 months for some larger companies to get a new tool approved to trial internally, and then work through all the red tape to actually be able to purchase it. I had a vague sense of this before I started, but I still totally underestimated how hard it can be for some companies to actually trial and (maybe, eventually) purchase software.
- Most people and teams are doing their best to figure out how to get their work done in the best way possible, but there is usually an entrenched bureaucracy that breeds a sense of helplessness and conspires to prevent much from changing.
- Despite many companies claiming to be innovative and forward thinking (even if they truly desire to do things differently), the reality is that most companies still mainly run on an undercurrent of Excel spreadsheets, emails, PowerPoint presentations, PDF files and Word docs; especially because there is a weird lock-in "network effect" here, where each company has to keep using these things because every other company does.
- There isn't a single company that I'm aware of that has everything figured out (even the best ones that we may idolise from the outside), all of them have their own problems, and almost all of the real problems are people problems.
- There are a handful of companies or users who will _never_ be satisfied (and will demand a huge amount of your time), no matter how much you go above and beyond to help them; learning to detect this small group and politely saying "no" early on will save lots of future headaches.
- Many "requirements" that companies have (particularly bigger ones) are very often negotiable, especially when there is an additional cost associated to cover the costs of complying with them.
- It's good to think very carefully before implementing one-way door decisions, like making a non-standard contract with a customer that will require ongoing mind-share and effort.
- Customers have such an extremely low bar for customer service, and are delighted when they actually get timely assistance from a real person to resolve their issue, it's a relatively easy thing to do that makes a big difference (especially as a small startup competing with larger ones that have bad support).

### The UX Bubble Popped

After foreshadowing that [a "vibe shift" was coming](https://trends.uxdesign.cc/2023) at the end of 2023, fast-forwarding one year later to the end of 2024 and it's pretty clear that the bubble has popped. Looking at [the state of UX for 2025](https://trends.uxdesign.cc/2025), it's striking how filled it is with grievances, before throwing in the towel on the whole project, and ends with advocating that the article itself "is the nudge you need to jump ship entirely". In retrospect, the signs were obvious, and I think the bubble peaked somewhere around [the end of 2021](https://trends.uxdesign.cc/2021).

Similar to the [the MBA bubble](https://www.hottakes.space/p/mbas-and-the-death-of-credentialism), it's no secret that the "UX design" space became totally over-saturated, and attracted a flood of people driven by the crazy promises of UX bootcamps that the field was so highly specialised and had an infinite demand that it commanded high salaries, while at the same time claiming that anyone, coming from any background or field (design or otherwise) could also become "job ready" with a 6-week course. The field had the mania of a ponzi-scheme, coupled with a perpetual existential crisis that was more concerned with trying to define and justify itself, rather than a real focus on the underlying discipline.

In terms of what's next, I think that in the same way we saw people pivoting their entire careers into becoming UX Designers within a very short period of time (eg. a 6-week bootcamp) and re-branding themselves as "Senior UX Designers" (weirdly, there's not really such a thing as a "Junior UX Designer"), I think that we're going to start seeing lots of designers who didn't know what "A.I" stood for 2 minutes ago, now rebranding themselves as some kind of expert on the vague notions of "AI Design Ethics" and "Responsible AI", or some variation of this.

### The Post-AGI World

As I mentioned [2 years ago](/articles/from-two-to-three/), I do think AI is going to be a huge forcing function for us to rethink the "best practices" we have clung onto for so long, and I'm very optimistic about the benefits it's going to bring broadly (to research, science and biotech, etc) and to our design/development workflows, but as I also mentioned in my learnings above, I think the culture will always lag behind the technology by many years, so my position remains the same as it did back then; I just want to work on solving _real_ long-time problems that exist for designers, developers and marketers in this space (which I also understand the inefficiencies as deeply as they do) which very few other people or startups seem to be working on. If there are ways that AI can help do that, and it makes sense to add those because it's 5-10x better than without it, then I'll be happy to do that. I also think that it's very important to make sure the relationship between AI and designers/developers is one that's collaborative, where you get the AI to do all the things that it's better at doing (eg. generating code, handling vast amounts of data, etc), and still have the human handle the rest (eg. taste, strategy, specific brand knowledge, etc). 

As we reach AGI in a few thousand days, if [OpenAI's estimates](https://arstechnica.com/information-technology/2024/09/ai-superintelligence-looms-in-sam-altmans-new-essay-on-the-intelligence-age/) are accurate, that list of what humans are uniquely better at is going to shrink dramatically, so I think it's important to focus on what will still be true and valuable in a world where AGI is widely available and work towards creating tools and products that will only benefit even more if you keep adding extra intelligence to them, rather than become obsolete.

This is largely true of all the products that rushed to add AI features into their apps, like text summaries/drafts (via a ChatGPT API call), which is now just a default feature in the browser or easily available via one of the hundreds of tools and APIs that can help do this for you. To this day, I still haven't personally had a single customer say "we just wish there was _AI_ in your products"; they might request features that AI could help with, but they haven't mentioned AI itself and if anything, most companies are very suspicious if you _do_ have some kind of AI features, as they're worried about what data might be collected or if they're accidentally infringing on copyright with the outputs (eg. with image generators, etc).

### Looking ahead to 2025 for Hypermatic

In the last [2024 mid-year update](https://www.hypermatic.com/articles/the-low-end-theory/), I mentioned that I thought the priority should be to stabalise and improve without imposing unnecessary changes in the UI for the sake of adding more features that may or may not need to be there. This is mainly to over-correct for the fact that lots of [software tends to get worse over time](https://www.ft.com/content/6fb1602d-a08b-4a8c-bac0-047b7d64aba5) as the default.

If you look at the list of list of updates posted at the top of this article, you'll notice that many of them make improvements behind the scenes, without jamming a brand new set of UI elements into the user's existing interface that they're used to and trying to shift as much as possible to either the Figma UI itself or just handle behind the scenes with an additional dropdown option (eg. new email platform integrations).

I want to keep doing more of that where it's useful throughout 2025, and also start publishing more free design resources to help add more value to the plugin users as well (similar to shipping 100+ free email templates this year, which work with Emailify out of the box). This will also be coupled with more free video tutorials to try and help existing and new users get even more value from the plugin by doing things they may not have been aware of without diving deeper into the documentation or knowing was possible to achieve.

I'd also like to spend some time migrating this main marketing website to a new framework (as the current one is no longer supported, and may eventually run into deployment issues). Similar to completely re-doing [the docs site](https://docs.hypermatic.com/) in the first half of this year, it was a great chance to audit everything and remove anything that doesn't need to be there any more and add anything extra that should be there, too. There are also a few backend systems and tools behind the scenes that are due for some maintenance and improvements as well.

In terms of new products, the one that I keep coming back to (literally every year) and can't get out of my head is a simple, yet powerful and extensible tool to help designers, developers and marketers create beautiful and customizable marketing/landing pages, portfolios or small websites (and probably basic web apps in the future) that can automatically be exported to production ready code that they own and can deploy on their own platform of choice (which they also own, eg. AWS, Vercel, Netlify, GitHub etc), which the plugin would help them to do as well.

As mentioned above, regarding platform risk, there is always the chance that something native comes along in the future (eg. "Figma Sites") that would wipe out much of the value created by something like this, but I still think it's worth trying to build as something that _I wish that I could have had_ in my previous career, and just assume that there is at least one other team who will resonate with how I'd like to go about solving these problems. As with all the other Figma plugins, the aim is to make something that is _10x better_ than the current manual workflow most teams are dealing with.

I also want to get out of my own comfort zone and focus on using LinkedIn to help market the Figma plugins, as I think there are lots of people in my network who could benefit from them but literally haven't seen or heard of them; I was made acutely aware of this after talking to former co-workers at my previous company who were running into problems generating HTML emails and had never tried using Emailify before. Why LinkedIn? I think it's super underrated and less crowded, where very little people actually post on there, and I might as well take advantage of communicating with the thousands of connections in the design, development and marketing space that I've made over the last decade and see if it resonates with them at all.

That's it for another year! It feels like the last 5 years have been a total blur, I still remember sitting down at my kitchen table on December 21st 2019 as the first day I went all-in to start working on Hypermatic for the first time like it was yesterday. I thought that _maybe_ I would have a bunch of digital/advertising agencies that I talked to (just in Melbourne) be interested in using these Figma plugins, and totally underestimated that teams in almost every country all over the world also wanted these problems solved, and would choose Hypermatic Figma plugins as the way to help them do that. It's pretty unreal to have had over 1.4 million users across all of the 12 Figma plugins in the last 5 years, and I'm looking forward to seeing how that continues over the next 5 years, too.

Finally, I just want to say thank you to everyone who has tried out or purchased any of our Figma plugins. Having you put your trust in Hypermatic to become a part of your workflow is what allows us to be able to continue working on solving these real problems for you every single day here, it's awesome and much appreciated!

---

---
type: tutorial
title: How to add rich text popup overlays to HTML Figma banners using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-12-20T00:00:00.000Z
dateModified: 2024-12-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-rich-text-popup-overlays-to-html-figma-banners-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-rich-text-popup-overlays-to-html-figma-banners-using-bannerify.md
---

# How to add rich text popup overlays to HTML Figma banners using Bannerify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to add interactive popup overlays to your HTML banner exports from Figma using the Bannerify Figma plugin.

To get started, we need to go to our Figma file. Go up to the "Resources" icon here and click on that, then search for "Bannerify." Under the "Plugins" tab, if you click on the Bannerify result, you can run that Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking the "Save" icon to save it to your bookmark plugins for easy access later.

I've already clicked on that "Save" icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved Plugins," and click on the "Bannerify" item. That's going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it takes any Figma frames that you've got on your page and allows you to load those into the Figma plugin as banners. For example, I've got all of these predesigned Figma frames already added to my page. I'm just going to click on "Load Checked Banners," and this is going to import all of the content layers, the direct child layers of your banner, into this timeline that you can then animate using the Figma plugin animation settings.

I'm not going to be covering all of the animation features in this tutorial today. I'm just going to assume you've already checked that out and you've got your banners working the way that you want. What we're going to be focusing on today is adding a popup disclaimer to display some scrollable disclaimer text when we export the HTML.

I'm going to show you how to do that now. First of all, just have a layer in your frames that you want to assign that trigger to. For example, I'm going to use this "Book Now" button, we can use that as our trigger for these particular banners. I'm going to go to my "Quick Select Layers" option in the top left of the Figma plugin here and click on that, then find the buttons that are all named "CTA Button." If I click on that, that's going to automatically select all 11 layers across my banners that are named "CTA Button."

You can see here I've got 11 layers selected. We're not going to be applying any bulk animations or applying any other settings in bulk, we're going to go down to the bottom of the Figma plugin window here where it says "Generate Popup Overlay Disclaimers." You can see here we've got a few options. We can set the transition, by default it's just set to "Instant" but we could change that to "Dissolve" or "Fade" or "Move In," for example.

I'm going to click on "Move In," and then you can set the speed of that animation. This is in milliseconds, you can set that to whatever you like and you've got the easing, by default it's just set to "Ease In" but you can change that as well. Finally for this particular one, because we've got the "Move" animation selected, we can also choose which direction the popup overlay is going to be animated in from. For example, I can change that to "Top to Bottom" or "Bottom to Top," "Left to Right," "Right to Left," etc.

Once you've got all of those settings selected the way that you want, you can then go ahead and click on this "Create Popup Links" button. I'm going to click on that now and that's going to do a couple of things. You can see it's created popup links for 11 layers and what that looks like is you can see now we've got this new layer added to our Figma file. This is a Figma component and if I go to the "Prototype" tab in Figma on the right here, you'll notice that it's automatically linked all of the CTA layers that we just selected and it's automatically gone ahead and applied the Figma Prototype settings to those.

If you look at the interactions over here, you'll notice that it's set to "Open Overlay," it's pointing to this component that was just generated by the Figma plugin, it's setting it to "Move In" with the easing settings and timings as we specified in the Figma plugin. That's automatically all been created for us and we don't need to link up any of these manually.

The next thing we can do is customize this content. You'll notice that the content for this component is very simple, it's just one frame with some text and a "Close" button. We don't really have much flexibility to add or remove content or add or remove elements. This is a really basic component that allows you to display some text. For example, you could basically swap all of this out, add your own content. I'm just going to add some new content and then you can customize that to whatever you need to have in your disclaimers or policy or any kind of overlay content that you need to add into your banners.

Of course you can customize the color scheme. For example, if we go to the "Design" tab and click on our component, we can swap the background color. If we wanted to change this to be something else, we could match this up closer to our original banners. We could set a background color that looks more like this, more like a brown overlay, and then we can change the text and "Close" button to also be different as well. In this case, we can make those white and that's going to give us a bit more of a closer match to our banner design.

As mentioned, you can change this content, you can change the padding. If you want to adjust that padding around the edges or adjust the amount of space between the "Close" button you can do that, but everything else is pretty much as is. Once you've got that customized the way that you want, all we need to do now is click on "Export to HTML" and just select the format that you need. If you're exporting it for Google Ads or a different format you can select that option in here. Today I'm just going to leave it as a non-platform specific basic HTML CSS JavaScript export and I'm just going to leave all the other settings as default. Then what I can do is just go ahead and click on "Export 11 Banners" in this case.

That's going to automatically generate the code, export all the images and zip up all of our banners that we can download in a moment. That's just finished exporting all of our banners, you can see that our HTML Banners are ready to download. I'm just going to click on "Download Your Zip File," save that to my desktop, go to my desktop and just unzip that file. Just double click on that and unzip it, and you'll see here that we've got all of our banners exported. This is all the HTML, the image assets automatically exported as you'd expect, and we can also check all those out in one go by opening up this index.html preview page in the root of that unzip file.

I'm just going to drag and drop that into my browser and you'll notice that all of our banners are now loading up on one page. I'm just going to expand that a little bit so we can see them all a little bit easier. Now if we click on these buttons, we got those CTA links in there, you'll notice that we've now got our Rich Text overlay automatically getting included. This is getting added for all of those banners and this is scrollable, it's real text and you can close that, dismiss it as you need to, and that's automatically getting handled for you by the Figma plugin.

This can be really handy if you need to include popup overlays that include disclaimers or privacy text, things like that. There are certain industries where you need to include this stuff and it can be a bit of a pain to manually code them. This is an easy way to automatically create that in Figma, allow you to swap out your own content, customize the design and animation.

That's basically it, you can also redo the animations. If you wanted to change these prototype links to be something else, you can either do that manually by going to the "Prototype" tab in Figma and changing those on the buttons directly, or I'd recommend going back to the "Quick Select" menu as we did before, clicking on the "CTA Button" or whatever layer you've got as your trigger, and then you can basically change that again down here to whatever you like.

For example, I could change this to "Dissolve," I could change the easing to "Ease In and Out," and because the "Move In" isn't selected in this case that's going to be disabled. We can now click on "Create Prototype Links" again and that's going to relink all of the CTA layers to the same component. It's not going to wipe out the component, it's going to detect that you've still got your original popup overlay there, that's not going to get amended or changed. You can see all of our content and design is still in there, but if we now go to the "Prototype" tab and click on one of these layers and then click on the interaction, you'll notice that the effects have been updated. Instead of it being a "Move In," it's now set to "Dissolve" just as we set in the Figma plugin settings a moment ago, and the easing has been changed to "Ease In and Out" as well.

Now if we reexport that to HTML, I'm just going to go through the exact same process, click on "Export Banners," wait for that to finish exporting, and once that finishes again just download the zip file to your computer. Then you can save that anywhere you like, unzip the file again, we're just going to preview the index page again. I'm going to drag and drop that into my browser, open that up, and if I click on this now you'll see that we've got a nice fade overlay instead. Instead of the "Move In," we've now changed it to a fade and it's looking a little bit smoother for this particular design.

You can customize that in the Figma plugin, you can just change that popup overlay setting to do whatever you like, it's totally up to you. You can change it and update it if you don't like it the first time, feel free to mess around with that.

That's basically it, I just wanted to do a really quick tutorial to show you this brand new feature in the Figma plugin. This has been a really popular request, hopefully that helps alleviate some of the pressure on your design and dev team for creating these bespoke overlay components every time, and this is just a really simple automated way to add them to your exports from Figma using the Bannerify Figma plugin.

'll leave it there for today, thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: HTML email production workflow for marketing teams
description: How marketing teams can turn Figma email designs into production-ready outputs faster.
datePublished: 2024-12-05T00:00:00.000Z
dateModified: 2024-12-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-html-email-production-workflow-for-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/emailify-html-email-production-workflow-for-marketing-teams.md
---

# HTML email production workflow for marketing teams

How marketing teams can turn Figma email designs into production-ready outputs faster. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for html email production workflow for marketing teams when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Emailify fits into the process

Emailify matters in this workflow because email work often gets rebuilt after design. Keeping layout, content, and export closer together removes a lot of duplicate effort from campaign production.

With Emailify, teams can usually:

- build real email layouts instead of static mockups
- export HTML for the email platforms the team already uses
- keep design and production closer together for campaigns

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Emailify](/emailify/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If email production is the bottleneck, Emailify is usually the cleanest answer. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to export HTML emails from Figma to Sendwithus using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-11-20T00:00:00.000Z
dateModified: 2024-11-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-sendwithus-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-sendwithus-using-emailify.md
---

# How to export HTML emails from Figma to Sendwithus using Emailify

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Sendwithus email marketing platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file and click on the little "Resources" icon at the top here. If you search for "Emailify" under the Plugins tab, you can click on the Emailify result to run the Figma plugin by either clicking on this Run button here, or I’d recommend clicking on the Save icon to save it to your plugins list for easy access later.

I’ve already saved my Figma plugin here, so I’m just going to go to my Figma canvas, right-click anywhere, go down to Plugins, then go down to Saved Plugins, and click on the Emailify item. That’s just going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, the way it works is it helps you to design HTML emails, which you can then export to code with one click automatically. This helps you save time on development and eliminates the need to manually code those emails. Instead, you just design them and export them.

Today, I’m going to be creating a really simple template. I’ll just call this Example Template and click on Add New Emailify Container. This allows us to start adding components, designing our email, and customizing it as we like.

I’m not going to go through all the design features in this tutorial today—I’ll assume you’ve already checked out some of the other tutorials on the YouTube channel and in the documentation. But if you design and customize this to your liking, once you’re finished, you can upload it to the Sendwithus platform, which we’re going to do in a moment.

Once you’ve designed your email, the last thing you need to keep in mind is that the Sendwithus platform hooks into your existing email service provider's unsubscribe system. You need to double-check which service you’re integrating with in Sendwithus.

There are a few here, and today, I’m just going to use the SendGrid example. You’ll want to find the platform you’re using under the Footer Tab in Emailify, then scroll down until you find the platform you’re using. In this case, we’ll use SendGrid as an example. I’ll click on the SendGrid Footer, and that will automatically prepopulate this unsubscribe link in the navigation component with the correct SendGrid unsubscribe tag.

Once you’ve done that, you’re ready to upload your email. You can preview the HTML by clicking on the Preview button in the Figma plugin. This will load a real HTML preview you can check before uploading the email, ensuring everything looks good.

You can switch between mobile view and desktop view, and you can also add things like mobile overrides through the settings panel here. But again, I’m not going to cover all the design features today. Please feel free to check out the documentation site and the other YouTube tutorials if you’re new to the Figma plugin.

Now that I’m happy with my HTML template, all we need to do is close the preview and click on the Export HTML button in the Figma plugin. Next, change the HTML Email Option, scroll down under the Platforms group, and find the Sendwithus option.

I’m going to click on Sendwithus, and you can see it’s asking for a Sendwithus API key. If you’re logged into your Sendwithus account, you can click on that API Key link, which will automatically open the API settings page in your Sendwithus dashboard.

From there, all you need to do is click on the Create New API Key button, give it a name (in this case, I’ll call it Emailify), set the key type to Production, and then click on the Create API Key button. That will generate the API key, which you can copy to your clipboard. Make sure to store it somewhere safe, like a password manager, as it will only show you the key once.

Once you’ve copied the API key, go back to your Figma file and paste it into the field here. I’ll just paste that in now.

After pasting in the API key, you can optionally add a subject line. For example, you can add your Subject Line here. If you want, you can also add preheader text, which is the text that shows up next to or underneath the subject line. You can add your Preheader Text here.

Then, click on the Upload Export button in the top-right corner. Once you click on that, it will export the email, upload all the template details and images to the Sendwithus platform, and show you a confirmation message that says your Sendwithus templates have been uploaded.

You can view those templates by going to your account and clicking on the Templates page. You can also click the link in the Figma plugin, which will automatically open the Sendwithus templates page.

Here, you’ll see that our example template has just been uploaded. If we click on that template, it will load the editor, and you’ll see that all the HTML we just exported from Figma via the Emailify Figma plugin has automatically been uploaded into the platform.

You’ll see all the content, the unsubscribe link, and the images are there as expected, and everything looks great. It’s really up to you to decide how you want to use this going forward, but this is the easiest way to get the HTML template directly into the Sendwithus platform automatically via the HTML upload.

You’ll also notice that the subject line has been carried across. The subject line is prepopulated, and the preheader text is included in the HTML. If you inspect the content, you’ll notice the preheader text is already in a hidden div, so you don’t need to add it again in the Sendwithus platform—otherwise, it will double up in your HTML email sends.

That’s basically it. I just wanted to show you a quick tutorial on how to get your HTML email designs created using the Emailify Figma plugin from Figma into the Sendwithus platform using the built-in API integration.

Hopefully, this improves your workflow—rather than manually copying and pasting code every time, you can just click one button and automatically upload the code from Figma directly into your Sendwithus account templates.

So, we’ll leave it there for today. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Email design workflow in Figma
description: A practical email design workflow in Figma when teams want fewer rebuilds between design and production.
datePublished: 2024-11-18T00:00:00.000Z
dateModified: 2024-11-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/emailify-email-design-workflow-in-figma/
markdownUrl: https://www.hypermatic.com/articles/emailify-email-design-workflow-in-figma.md
---

# Email design workflow in Figma

A practical email design workflow in Figma when teams want fewer rebuilds between design and production. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for email design workflow in figma when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Emailify fits into the process

Emailify matters in this workflow because email work often gets rebuilt after design. Keeping layout, content, and export closer together removes a lot of duplicate effort from campaign production.

With Emailify, teams can usually:

- build real email layouts instead of static mockups
- export HTML for the email platforms the team already uses
- keep design and production closer together for campaigns

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Emailify](/emailify/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If email production is the bottleneck, Emailify is usually the cleanest answer. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: Figma presentation workflow for sales teams
description: How sales teams can use Figma-designed decks without creating more presentation maintenance work.
datePublished: 2024-11-01T00:00:00.000Z
dateModified: 2024-11-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-figma-presentation-workflow-for-sales-teams/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-figma-presentation-workflow-for-sales-teams.md
---

# Figma presentation workflow for sales teams

How sales teams can use Figma-designed decks without creating more presentation maintenance work. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for figma presentation workflow for sales teams when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Pitchdeck fits into the process

Pitchdeck is helpful in this workflow because presentation work usually lives between design quality and practical delivery. Designing once in Figma and exporting to familiar deck formats is often the fastest middle ground.

With Pitchdeck, teams can usually:

- keep presentation design in Figma without trapping the output there
- export decks into formats stakeholders already expect
- reduce the need to rebuild polished work in slide software

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Pitchdeck](/pitchdeck/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If decks and presentations are the pain point, Pitchdeck is a strong place to start. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: Share interactive presentations without rebuilding slides
description: How to share polished presentations without rebuilding the same deck in another tool.
datePublished: 2024-10-15T00:00:00.000Z
dateModified: 2024-10-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/share-interactive-presentations-without-rebuilding-slides/
markdownUrl: https://www.hypermatic.com/articles/share-interactive-presentations-without-rebuilding-slides.md
---

# Share interactive presentations without rebuilding slides

How to share polished presentations without rebuilding the same deck in another tool. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Pitchdeck

[Pitchdeck](/pitchdeck/) is one of the more useful tools in this workflow. Pitchdeck is helpful in this workflow because presentation work usually lives between design quality and practical delivery. Designing once in Figma and exporting to familiar deck formats is often the fastest middle ground.

### Crypto

[Crypto](/crypto/) is one of the more useful tools in this workflow. Crypto matters here because design sharing is not always public or lightweight. When security, password protection, or controlled access matters, a normal share link often is not enough.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: tutorial
title: How to create a Klaviyo abandoned cart flow custom HTML email template in Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-10-09T00:00:00.000Z
dateModified: 2024-10-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-create-a-klaviyo-abandoned-cart-flow-custom-html-email-template-in-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-create-a-klaviyo-abandoned-cart-flow-custom-html-email-template-in-figma-using-emailify.md
---

# How to create a Klaviyo abandoned cart flow custom HTML email template in Figma using Emailify

#### Video Transcript

Today, I'm going to be showing you a step-by-step tutorial on how to design and implement custom HTML abandoned cart emails in Klaviyo using the Emailify Figma plugin. 

To get started, all we need to do is go to a new Figma file and open up the resources panel at the top. If you click on the resources icon and search for Emailify, under the plugins tab, if you click on the Emailify item, you can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on the save icon to bookmark it to your plugins list for easy access later.

I've already clicked on the save icon, so I'm just going to go to my Figma canvas, right-click anywhere, go down to plugins, then go down to saved plugins, and click on Emailify. That's just going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma, which you can then automatically export to production-ready code with one click from the Figma plugin.

To get started, I'm just going to give this email a name, and I'm going to call it "Klaviyo Abandoned Cart Email Template." Then, I'm just going to click on the "Add New Emailify Container" button. I'm not going to be going super deep on the design features in the Figma plugin today. If you're interested in designing and customizing HTML emails in Figma using Emailify, there are a couple of other tutorials on the YouTube channel that you can check out, and the documentation site is really good for that as well.

But for today, I'm just going to be creating a really basic email with a little bit of content and, most importantly, the abandoned cart template that we're going to be creating in a moment. What I'm going to do is go over to my "Ecom" tab in the Figma plugin. You can see under the first section here, under the Klaviyo section, we've got a few different templates we can use. These first ones are Klaviyo dynamic product feeds, so we're not going to be using those today. If you scroll down a little bit further, you'll notice that we get to these Klaviyo abandoned cart items templates.

You can see we've got a few in here. We've got one for Shopify, which is probably going to be the most popular one, and then we've got one for WooCommerce, Magento V1, V2, and BigCommerce. You can select which one is relevant to you. For today, I'm going to be using the Shopify one, so I'm just going to click on the Klaviyo Abandoned Cart Items Shopify template. That's just going to add all of these layers to our email automatically.

You can see here that we've got a bunch of code that's been added. This is basically going to check if your abandoned cart has items in it. If it has some items, it's going to show this heading here, and then it's going to try and loop through all those items and display the product information here. But if the cart is empty, you'll get this empty message here. This is all customizable; you can change this. If you want to update the text, you can obviously change that to say, "Did you leave something behind?" or something like that. This is totally up to you, so you can basically customize this content as you would the rest of the email, and that's all going to look just fine.

Again, if you don't even want an empty message, you can just get rid of that entirely, and that’s totally fine. You can basically just remove that, and it won't show up. I'm just going to leave that in there for now to keep things simple. You'll notice that there are a few different bits of copy here. We’ve got the product title, the price that's going to be displayed, the quantity, and also the image. The image is being loaded through the settings panel in the Figma plugin. If you click on that image layer and click on the settings panel, you'll notice that the information, link, and ALT text have been pre-populated with the dynamic tags for Klaviyo.

I'm just going to leave all of that as is. Again, you can customize this if you want to make the image a little bit bigger or a little bit smaller. If you want to customize this text, you can totally do that in Figma, but for today, I'm just going to be keeping it really simple, along with this button down here. I'm not going to customize that either, but if you check out the button settings, that's also going to take you to the checkout URL. Of course, you can customize this as well; you can change the copy on there and obviously change the styles as you like.

The last thing I'm going to do before we connect this to our Klaviyo account is just go to the footer tab and scroll down to the letter K. We're going to find the Klaviyo footer. Go ahead and click on the Klaviyo footer, and again, that's going to pre-populate these links for us. We’ve got our unsubscribe link; you can see here that's pre-populated: manage preferences, view in browser, and the address as well. Again, you can change this design to whatever you like. If you want to update that style or content, you can definitely do that, but again, I'm just going to keep it really simple for today.

You can also preview the HTML just by clicking on the preview button at the top here. You can see this is the mobile preview and the desktop preview. You'll notice that the image isn't being loaded because, again, this is loading in the dynamic image URL. This is going to get swapped out in Klaviyo once we hook this up to our abandoned cart or other type of cart email. Again, same with this product data here. I'm essentially going to leave all that as is, and what we're going to do now is export this HTML into Klaviyo.

I'm going to go ahead and click on the export HTML button. I'm going to change the default HTML email option and scroll down to the Klaviyo option. Just click on Klaviyo. What you want to do then is click on this API key link. If you click on that API key link, that's going to open up your Klaviyo account if you're logged in. What you want to do is click on the "Create Private API Key" button here. Just go ahead and click on that, and once your "Create Private API Key" loads up, you can just give it a name. I'm just going to call this "Emailify Klaviyo Key." You can name it whatever you like.

Then we're going to click on the "Custom Key" radio option down here and just scroll all the way down to "Templates." You want to change that one to have read-write access. All the other ones can have no access. All we want to do is change the read-write access column for templates to be selected at that radio button. Once you've selected templates to have read-write access, go ahead and click on the create button. That's going to automatically create your new Klaviyo private key. You only get one chance to copy this, so I'd save this in a password manager or somewhere secure for future reference as well.

Just go ahead and click on the little copy icon here, and then once it says it's copied to your clipboard, just go back into Figma. We now want to paste that key into this input field here. I'm just going to paste that in, and now you can see that the upload button is available to us. I'm also going to leave the editable content toggle turned off. There are a bunch of reasons for that. If you click on the content link here, you'll get a better understanding as to why you would want to turn that off in this particular case.

But basically, the long story short is the editor will add all this weird extra padding and things like that, so it's just a bit of a headache to tidy up. I would just leave that editable toggle off for our abandoned cart email. Then you can basically give this a subject line and preheader text. I'm just going to leave this blank for now just for simplicity, but you can populate those as you like. Once you've set all that up, just go ahead and click on the "Upload to Klaviyo" button. That's going to automatically generate the HTML, upload all the images, and automatically upload our template to our Klaviyo templates page in our templates account.

If you click on that Klaviyo templates link, you will see all of the templates there, including the one that we just uploaded. If I click on that link now, this is going to open up our Klaviyo templates list. You can see at the very top here we've got our Klaviyo Abandoned Cart Email Template. If we open that up and click on preview, you can see that our HTML has just been automatically uploaded from Figma into Klaviyo. That’s the first step. We've got our abandoned cart email template in the Klaviyo templates now.

The next thing we need to do is set up the flow itself. The abandoned cart flow can be set up under this flows panel on the left-hand side in Klaviyo. If you click on the flows menu item where my mouse is on the left right now, just click on flows. Once that loads up, you just want to go ahead and click on the "Create Flow" button in the top right-hand side. It's going to give you a bunch of presets. There might be a bunch of preset ones. You can see here there are a bunch of Shopify presets. You can search for different presets if you want to use one of those; that’s perfectly fine.

But to keep this really simple, to hopefully make it clear how it works, I'm just going to start from scratch and click on the "Build Your Own" button in the top right here. I'm just going to call this one "Emailify Abandoned Cart Flow," and I'm just going to leave that as the name. Again, I'm going to click on the "Create Manually" one. I'm not going to create it with AI; I'm just going to click "Create Manually" and go to the Builder.

Once the new flow loads up, you'll see something that looks like this, and you've got a bunch of different options. For this tutorial, it can also be used for other types of triggers. If you wanted to do a different one, like added to cart or something like that, you can use a different trigger. But for today, we're just going to be focusing on abandoned carts. With that being said, I'm going to click on the "Checkout Started" one. You can see under "Most Popular" here, we've got the "Checkout Started" trigger. I'm going to click on that, and this is basically going to fire whenever somebody starts a checkout process in Shopify, with some other metrics also included.

We can start stringing these together in a moment. I'm going to use that as the trigger. I’m going to create the trigger of "Checkout Started," and then I'm just going to go down to the bottom here and click on the "Save" button. I'm just going to click "Save," then confirm and save, and that's going to lock in that trigger as the trigger of when someone starts a checkout. That's kind of the beginning of our trigger.

What we want to do now is add a time delay item. If you go on the left-hand side here, go under "Timing," and drag and drop the time delay item underneath there. We're just going to drag and drop that onto the canvas, and then we want to click on that and add a time delay. Normally, what you want to do is either add like a day, so you could do one day or something like a few hours, so you could set a 4-hour delay. I'll put that in there and click on "Save." Once that finishes saving, you can see that it's telling us the changes have been saved.

We've now set up the trigger and set a timer delay for 4 hours. The final step we're going to add in this particular flow is then to trigger an email. We're going to drag and drop this email item in the top left into the bottom of our existing flow down here, underneath the delay, and that's going to add the email step to our flow. Basically, someone's going to start a checkout; if they leave the checkout or don't check out after 4 hours, it's going to send them this email.

We're now going to click on the email flow item, and what we're going to do is give this a name. You can call this "Abandoned Cart Email Number One." If you're going to have multiple triggers or multiple delays, you could name these with numbers at the end; that’s pretty common. Then you can give it a subject line. You might say something like, "Did you leave something behind?" That might be your subject line. You can call it whatever you like.

Then basically, you want to go down here where it says "Template" and click on "Select Template." Once that template page loads up, we want to go to the "Saved Templates" tab. Go ahead and click on "Saved Templates," and underneath this list, you’ll see our brand new one that we created called "Klaviyo Abandoned Cart Email Template" at the very top. We're just going to click on that one, and you can see we've got a preview of the template. This is the same template we just uploaded a moment ago.

I’m going to click on "Use Template," and this is going to load up a new page with the code on it. Once this template view loads up, you can see all of our HTML code that was exported from the Emailify Figma plugin is in here. What we can do is now preview this with real data by going to the "Preview Email" button on the right-hand side here and clicking on that. Then you'll notice at the top here we can select a recent event to preview with.

What that means is we can select a recent event from the real e-commerce site. In this case, this is me doing a checkout a few hours ago. I’ve got this checkout event where I started checking out and then closed the window and didn’t finish my checkout. I've got a couple of items in my cart, and we can use this real data to populate the dynamic content that we created in our template.

What you can do is just click on whichever event you want to preview it with. Then go down here and say how you would like to preview the email. Just click on "Show Directly in Klaviyo." You can also send it as a test email to yourself if you prefer to do that. But for today, I'm just going to click on "Show Directly in Klaviyo." Click on "Preview" now, and that's going to automatically pre-populate that content.

You can see here this is real HTML content, and it's being populated with the real data from that real checkout event. This is really cool because it means we can actually test out if these links are working. We can see that the product names and pricing and the quantity in the cart are correct. We've got our return to cart button, so if we click on that, that'll actually return us to the real cart for this real event. It’s just a really nice way of seeing what the email is going to look like when that abandoned cart trigger really gets fired and what a real customer is going to see.

This is exactly what you want to see and make sure that the data is coming through exactly how you'd expect. Again, this is working with a Shopify store, so if you're using a different platform like WooCommerce, you would use the WooCommerce template in Figma that we saw in our templates over here. You've got the Ecom tab, and down here, you've got the Shopify version, which we've used. But if you're using a different platform like WooCommerce and you're using that with Klaviyo, the variable names here are going to be a bit different. You just want to make sure you've got the correct one.

You can obviously modify these if you want to change it. If you don't have dollars, maybe you want to change this to a pound symbol or something like that, but you can basically change that as needed. That’s looking really good. This is basically the pre-populated real data content being injected into our layers here, which again were just preview placeholders at the time. These fields are now being swapped out with real content based on the real Klaviyo links and data from our checkout event.

I'm just going to close off that preview now that we know it’s looking good, and we're going to click on the save button. It's important to click on the save button again when you're done, so just go ahead and click on that X. Then we're going to click on the "Done" button in the top right-hand corner. That's going to take us back to our flow. You can see we've got the flow here, and essentially what you want to do is make sure that all the conditions are exactly what you want.

If you go back to the trigger up here, you can see that we don’t have any filters applied at the moment. You can add filters to this trigger to say, "Hey, we only want this to fire when a certain category, a certain collection, a certain discount code, or anything is used." You can basically dive really deep into the conditions of when this will fire, or you can just leave it as a very generic thing. When anyone checks out, it will trigger, but you probably want to enhance the trigger filters to make it only fire at certain points.

That's kind of outside of the scope of this tutorial. You should go through and consider what filters you want to be applying for your audience or your products. We just covered how to add a checkout event, how to add the delay, and how to add the email template. That’s the most important part that you need to know. Once you're ready to go, all you need to do to make it live is just click on the "Review" and "Turn On" button in the top right here. You want to change this flow status from draft to live, so just click on "Live."

Once you're happy with that, just go ahead and click on "Save." That’s going to make the flow status live. I'm just going to leave that as draft for now; I don’t want to make this live, so I'm just going to set it back to draft. But that’s basically it. I hope that's helpful. If you've been wondering how to create abandoned cart emails that are custom and design those in Figma to then export into Klaviyo and use in any kind of cart flow or abandoned cart trigger in Klaviyo, you can experiment with the kinds of flows that you want to design.

This is the most basic one you could possibly come up with, but again, I just wanted to simplify it to show you exactly how it works and then how to set that custom HTML template using the template that we just uploaded from Emailify in Figma. We'll leave it there for today. This has been a really highly requested video, so hopefully that's helpful. If you've been wondering how to create custom HTML templates for Klaviyo abandoned carts or other kinds of dynamic cart triggers in your Klaviyo emails, hopefully, this gives you a little bit of a head start.

If you do need more advanced help, I’d highly recommend either getting in touch with your Klaviyo support rep, or if you've got a dedicated developer on your team, hopefully, you can reach out to them if you want to tweak any of this content here to make it a bit more personalized. But this should at least give you the base or starter component for you to work from and customize to get a kind of minimum version working for your abandoned cart flow custom templates in Klaviyo.

We'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to import PowerPoint (.pptx) to Figma Slides using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-10-06T00:00:00.000Z
dateModified: 2024-10-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-import-power-point-pptx-to-figma-slides-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-import-power-point-pptx-to-figma-slides-using-pitchdeck.md
---

# How to import PowerPoint (.pptx) to Figma Slides using Pitchdeck

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to import your presentations from PowerPoint into Figma Slides using the Pitchdeck Figma plugin. 

To get started, all we're going to do is go to our Figma app, and then we're going to switch to a brand new Figma design file. We're going to come back to Figma Slides in a moment, and we're going to go to a regular Figma design file over here.

What you want to do is go to the "Resources" icon and search for Pitchcheck. Under the "Plugins" tab, if you find the Pitchcheck item, you can click on that and then run the Figma plugin by either clicking on this run button here or, I'd recommend clicking on this save icon here to save it to your plugins list for easy access later. I've already saved it to my plugins list, so I'm just going to go to my Figma design file canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on the Pitchcheck item. That’s just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to create presentations from Figma frames in your Figma file. Today, we're going to be using the import PowerPoint feature to automatically import .pptx files into Figma, which we can then import into our Figma Slides file in a moment. All you need to do is have an existing PowerPoint file. I've got a couple here that I'm going to show you as an example. I've got this basic one that just comes with PowerPoint, and then I've got a more visually interesting one over here. We're going to import both of these from PowerPoint into Figma Slides using the Figma plugin.

If you go back to your Figma file, you can see there's this "Import .pptx" button over here. You can either click on that and browse for your file, or if you've got it on your desktop or computer locally, you can just drag and drop that easily into this little drop zone area here. If you drop it into that area, you can see it's going to automatically import those slides from PowerPoint into our Figma file. It just imported those seven slides, and we can see that's all looking really good. These are all editable layers, so you can see if we zoom in here that these are real text layers that we can modify. You can see here that the elements are all individual and can be moved around as you'd expect.

Now that we've got the PowerPoint file imported into Figma, the only step we need to do now is select all those frames. I'm just going to do Command A or Control A if you're on Windows. Once you've selected all of your frames that we just imported from PowerPoint, go ahead and right-click those and then click on the copy button. Just click copy, and then we're going to switch back into the Figma Slides file. I've got a new Figma Slides file open over here, and we're going to click on the start from scratch button. We're not going to load any templates; we're just going to start from scratch and click on that.

Then, you just want to make sure that you're in the list view. There's a list view and a grid view. It should be in list view like this by default, but if it's not, just make sure that's selected. Underneath the first frame down here, we're going to click in the sidebar, right-click, and then click on paste. We're going to click paste, and you can see that's automatically imported our frames that we just imported from PowerPoint and then copied from Figma into the Figma Slides UI. You can see we've got all of the Figma Slides now loading up those frames. Again, these are all editable, so you can edit this content in Figma Slides. All of that is real text and real images. You can move these around; you can replace them. If you want to swap out the images, you can do that over here as you'd expect.

That’s all looking really good. It just means that we can now play around with these PowerPoint slides in the Figma Slides interface without having to worry about all of the annoyances that come with PowerPoint. You get all the benefits of using Figma Slides, all of the nice UI over here that we can play around with and update our slides and content with. Then, you can also present this with Figma Slides or do any other kind of presentation method that you want to use with the Figma Slides UI.

Now that we've got that first one imported, I'll show you one more example just to iterate the point home. You can again use this "Import .pptx" button down here and either click on that or just drag and drop your .pptx file down into that little drop zone area and let go. Once you do that, it's going to open up that PowerPoint file, import those PowerPoint slides into Figma, and let you automatically copy and paste those into a new Figma Slides file. We'll do that in a moment. Again, you can see here it just finished importing all of those new slides from the other PowerPoint file that we just imported into our Figma file.

You can see that these are all editable; we can modify these. This is all rich text and interactive with all of the individual elements. I'm just going to copy all of these, so just select all and then right-click copy. I'm going to create a brand new Figma Slides file. I'm just going to go to my Figma icon, go to file, then click on new slide deck. That's going to open up a brand new Figma Slides file. One more time, I'm just going to click on the start from scratch button to insert a blank slide. Again, just make sure that the list view is selected. Go down into the list on the sidebar here, right-click that, and click on paste. That's going to automatically paste in those slides that we just imported from PowerPoint into Figma, and these are now available in the Figma Slides file instantly.

Again, you can see that these are all editable. We can update this copy, we can move images around, we can replace images if we want to using the image replacement feature over here, and of course, you can rearrange slides as you'd expect. You can view those in the grid view if you want to see them all at one go. You're basically just taking an existing PowerPoint file, importing those slides from PowerPoint into Figma Slides over here, and then it's up to you how you use the Figma Slides UI to improve or keep working on that presentation.

Yeah, that's basically it. I just wanted to show you a really quick Figma tutorial on how to automatically import files from PowerPoint into Figma Slides. If you're using Figma Slides and enjoy the interface but don't like the idea of manually recreating your existing presentations from PowerPoint, which is sadly just a reality that PowerPoint is still a very popular presentation tool that a lot of companies need. If you're forced to work on presentations in PowerPoint, that can then be imported into Figma Slides using the Pitchcheck Figma plugin's PowerPoint import feature. This is going to be a really handy way of automating that process.

You can see it's still in BETA, so there might be some hiccups here and there with layer positioning and small things like that, but those will improve over time. Hopefully, the amount of time it saves already is going to be really big compared to manually importing those PowerPoint files into Figma Slides. We'll leave it there for today. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to import Google Slides to Figma Slides using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-10-05T00:00:00.000Z
dateModified: 2024-10-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-import-google-slides-to-figma-slides-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-import-google-slides-to-figma-slides-using-pitchdeck.md
---

# How to import Google Slides to Figma Slides using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to import your presentations from Google Slides to Figma Slides using the Pitchdeck Figma plugin. 

To get started, all we need to do is go to our Figma app, and we're just going to open up a brand new Figma design file. We're going to come back to the Figma Slides file in a moment, but first, we need to open a new Figma design file—just a regular Figma file.

What we want to do is go to the "Resources" icon and search for Pitchdeck. Under the "Plugins" tab, if you find the Pitchdeck item, just click on that. Then, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here. That will let you save the Figma plugin to your plugins list for easy access later.

I've already bookmarked or saved the Figma plugin, so I'm just going to go to my Figma design file canvas. Just right-click anywhere, then go down to "Plugins," then go down to "Saved plugins," and click on the Pitchdeck item. That’s going to run the Figma plugin that we saved a second ago. If you're new to the Figma plugin, the way that it works is it basically takes any Figma frames on your file and helps you turn those into presentations. For today, we're just going to be focusing on one feature of the Figma plugin, which is importing .pptx files—PowerPoint files that we're going to export from Google Slides and then import into our Figma Slides file. I'll show you how to do that now.

All you need to do is, with the Figma plugin open, go to Google Slides. First of all, export your slides as a .pptx file. You can do that by going to "File" in Google Slides, then going down to "Download," and clicking on the Microsoft PowerPoint .pptx option. Just go ahead and click on that option, and that's going to automatically download your Google Slides file to a .pptx file on your computer, which we can then import into Figma.

I've already downloaded the file to my computer, so all I'm going to do is drag and drop that file. Grab the .pptx file you just downloaded from Google Slides and drag and drop it into this little import .pptx drop zone in the Figma plugin. When you do that, it's going to automatically open up that .pptx file and import all of those slides automatically into our Figma file.

Once that finishes up, you can see here that our images, text, and slides have all been imported from Google Slides. These are all real layers that we can now interact with and edit inside of Figma. Now that we've got our Google Slides imported into Figma, what we want to do is just do one extra small step and highlight all of these frames in our Figma file. I'm just going to push Command A, or you can use Control A if you're on Windows. Once you've got all your Figma frames selected that we just imported from Google Slides, just right-click those frames and then click on the copy button.

Now, we can go back to our Figma Slides file. We're going to switch over to this Figma Slides tab and click on the "Start from scratch" option. Just go ahead and click on "Start from scratch" to add a blank slide. We're going to click on that option now, and you want to make sure that you're in list view. There’s list view and grid view in Figma Slides. To import these Google Slides into Figma Slides, we want to make sure we're on the list view panel here.

In the sidebar on the left-hand side, just right-click anywhere there, and we're going to click on paste. Click on paste, and that's going to automatically paste our Google Slide that we just imported into our Figma Slides file. You can see now that all of these slides that we just imported from Google Slides are now available inside of Figma Slides as editable layers. We can edit these text layers, move these images around, and edit them. On the right-hand side here, we can swap out images if we'd like. You can change things like overlay and things like that, and this is looking really good.

We can also see all those at once just by switching into grid view, which will automatically give you a grid view of the slides that we just imported from Google Slides into Figma Slides. You get the benefit of working in Figma Slides without having the design limitations that come with Google Slides. I’ll do a couple more examples just to show you what this looks like. We'll import two more decks. This one is a bigger slide deck in Google Slides. Again, we're just going to go to "File," then "Download," and select Microsoft PowerPoint. Once that downloads to your computer, just switch back into the Pitchdeck Figma plugin.

You can see down here in the bottom left, we have the import .pptx option that we had before, and we're just going to drag and drop that .pptx file we just saved into that little drop zone in the bottom left. That's going to automatically load up those frames again and import all of the slides from Google Slides into our Figma file. It's going to create a brand new page. You can see on the left-hand side here that each time you import a new .pptx file from Google Slides, it's going to create a new Figma page for that deck just to keep it nice and separated.

Once that finishes loading, we’ve just imported 21 slides. You can see all of those 21 slides have been imported from our Google Slides file over here into our Figma file. Once again, we're just going to select all of those frames. Go ahead and push Command A, or again, Control A if you're on Windows. We’re just going to copy those by right-clicking all those frames, clicking on copy, and we're going to open up a brand new Figma slide file just by going to the Figma menu, going to "File," and then going to "New slide deck." That’s going to open up a brand new Figma Slides file.

Once again, we're going to click on the "Start from scratch" button. Again, make sure that’s in list view. You can see the list on the side here. Just go ahead and click anywhere in that empty side panel and click on paste. Once again, that's going to import all of those Google Slides into our Figma Slides UI. Again, these are all editable layers. You can modify these in the Figma Slides UI. You can edit the copy and change the styling if you want.

So, that’s looking really good. Again, you can get an overview of all the slides we just imported from Google Slides in the Figma Slides grid view as well. That’s just a nice overview and makes it a bit easier to do things like rearrange slides or make any other additions or content changes that you want to make inside of the Figma Slides UI. I’ll do one more final example, and then we’ll finish up. Just to give you one more variant on the design, this one has some more interesting graphics and things like that, so we’ll import that one too.

Finally, we'll just do this last file from Google Slides. Again, go to "File," go down to "Download," and then select .pptx or Microsoft PowerPoint. Once that downloads to your computer, we can import that directly into our Figma plugin again. Just go down here on the left-hand side, drag and drop that exported .pptx file from Google Slides into our Figma plugin. Again, that’s going to load up all of those slides from the Google Slides export into Figma. Once that finishes loading, we’ll be able to copy those into Figma Slides.

You can see it’s just imported those 10 slides. It’s worth noting that this is currently in BETA, so you’ll notice there are very small things that might be off. You can see here in the headline on the first slide that, for some reason, it’s not getting that correct font sizing. For example, that’s one thing that you might just have to manually change in your Figma design before you copy that into Figma Slides. These should be very minor things that you may have to tweak, so just keep an eye out for that. Hopefully, it will import fairly accurately from your Google Slides designs.

Anyway, we'll just copy all of these one more time. Again, just select all of those frames, right-click, go to copy, and then again, we're going to spin up a brand new Figma Slides file. Just go to "File," then "New slide deck," and that’s going to open up a new Figma Slides file. Finally, just click on "Start from scratch" again, make sure you're in list view, and then on the side panel, just right-click anywhere, click on paste. That’s going to drop in all of those slides that we just imported from Google Slides into our Figma Slides file.

That’s basically what that looks like. You can see all of the graphics have been imported, and these are all editable layers. You can change these and move these, so you can change things like color, font styles, and content. This is all editable inside of Figma Slides. That’s basically it. I just wanted to show you a quick rundown of how to automatically import those Google Slides into Figma Slides if you don’t want to manually recreate them using the Figma Slides UI.

The Figma Slides UI is really nice to work with compared to Google Slides, but being mindful that sometimes you just have to work with designs that have already been created in Google Slides, and you want to import those into Figma Slides to have that interoperability where you can kind of go back and forth between them. That’s basically it; we’ll leave it there for today. I hope that’s helpful. If you’ve been wondering how to automatically import your Google Slides into Figma Slides, you can now do that using the Pitchdeck Figma plugin, as we’ve just seen in this video. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export Figma Slides to PowerPoint (.pptx) using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-10-03T00:00:00.000Z
dateModified: 2024-10-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-slides-to-power-point-pptx-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-slides-to-power-point-pptx-using-pitchdeck.md
---

# How to export Figma Slides to PowerPoint (.pptx) using Pitchdeck

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your designs from Figma Slides to PowerPoint using the Pitchdeck Figma plugin. 

To get started, all we need to do is go to our Figma app. What you want to do is open up a brand new Figma design file. Instead of the Figma Slides file, which we're going to look at in a second, open up a normal Figma design file. Then, go to the "Resources" icon and search for Pitchdeck. Under the "Plugins" tab, click on the Pitchdeck item. You can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon. This will allow us to run the Figma plugin from our saved Figma plugins list.

I've already clicked on the "Save" icon, so I'm just going to go to my Figma plugins list by right-clicking anywhere, going down to "Plugins," and then down to "Saved plugins." I'll click on Pitchdeck, and that will run the Figma plugin that we saved a second ago. If you're new to the Figma plugin, the way it works is it helps you turn Figma frames into presentations automatically, including exporting them to PowerPoint, which we're going to do today.

Now that we've got the plugin saved and running, we can go back to our Figma Slides file. We're just going to add a brand new slide deck because I don't have one designed already. You might already have your own, so you can use that one today. I'm just going to use this dark slides template, so I'll click on "View Template" and then "Add All Slides." This will automatically add all of the slides to my Figma Slides file.

By default, you might see the view looking like this, with all the slides listed on the left. For today's purposes, we want to go to the grid view. Go up to the top left and click on "Grid View." This will change the view to allow us to see all of our frames at once.

What you want to do is select all of the frames that you want to export from Figma Slides to PowerPoint, and we're going to copy those to our clipboard. In this case, I'll use the first row as an example; you would obviously use all of the slides you want. If you want all of the slides selected in one go, click on Command + A or highlight all of those slides. You can copy them to your clipboard by right-clicking and then clicking on "Copy." Again, I'm just looking at the first row to simplify it. I'm going to highlight those slides, click on "Copy," and then go back to my Figma design file. I'll paste those slides by right-clicking on my canvas and clicking "Paste" here.

Once you've done that, you can load up those frames by either refreshing the layers with this button here, the refresh layers button, or rerunning the Figma plugin if you've already run it and closed it. I'll click on the refresh layers button now, and that will load up all of my Figma frames from my page into the Pitchdeck Figma plugin. You can see here we've got all of our frames that we just pasted in from Figma Slides into our Figma design file, and those are all looking really good.

What we want to do now is export these to PowerPoint. We'll go to the export button in the top right of the Figma plugin. Go ahead and click on "Export," and then we'll change the presentation export format in this dropdown here to go down to the presentation apps group and just click on the PowerPoint option. You want to make sure that the PowerPoint (.pptx) file is selected, and then you can adjust the settings here as you like. By default, it's going to automatically compress the images, downsize any large image layers, and make the text editable. Those are the default options, but you can change these however you like.

I'll go ahead and click on "Export for PowerPoint." This will begin the export process of taking those slides from Figma Slides that we just imported into this Figma design file. It will automatically run through those and create a PowerPoint file. Once that finishes exporting, you'll get a message saying that your PowerPoint file is ready. When that shows up, you can go ahead and click on the "Download your .pptx file" button. I'm just going to click on that now, and you can save that directly to your computer. Just go ahead and save it anywhere. I'm putting it on my desktop for now.

Once you've saved that to your computer, just double-click on the file, and that will open up the file in PowerPoint. You can see here I've got my Figma Slides exported into a real editable PowerPoint file that I can edit. You can see here that the text looks really good. It's worth being mindful of the fonts. If you've got some Google Fonts that your Figma Slides design is using, in this case, we're using the font "Inter," you want to make sure that the Inter font is installed on your computer. Figma Slides is automatically using the Google Fonts version of Inter inside the app.

If you're sending this to a client or using it on your own computer, ensure that the exact same font name is installed on your computer. That will ensure that the correct font loads up in your PowerPoint file too. But that's looking really good. You can see that we can edit this content. It's a real PowerPoint file created from the design we had in our Figma Slides file.

We're basically exporting these designs from Figma Slides into this real PowerPoint file. This allows you to have a bit more flexibility with how you share your Figma Slides design. If you're working with clients or stakeholders who need it in PowerPoint for any reason, this will give you the flexibility of designing it with the benefits of the Figma Slides interface, and then automatically exporting that through Pitchdeck into an editable PowerPoint file.

You can see here all of the slides have been exported as expected, and you can modify and edit all of this content as needed. I'll show you one more example just to add a bit more flexibility to the designs. If you go back to Figma Slides and create a new file, in this case, I'll go to "File," then "New Slide Deck." This will load up a new Figma Slides file. Again, I'm not going to use a pre-designed template; I'm just going to use one of these built-in templates here. I'll click on "View Template." Once that loads, go ahead and click on "Add All Slides."

I'm clicking on that "Add All Slides" button now, and you can see that's just generated all of the slides from that template. Again, ensure that you're in the grid view so you can see all of the slides that you want to export from Figma Slides into another PowerPoint file. I've got the grid view already selected at the top here instead of the slide view.

You want to make sure you're in Grid View, and that will allow you to quickly select all of those slides. Again, I'm just going to select some of these on the top row to give a quick example. I’ll select the first 12 and click on the copy button by right-clicking and then going to "Copy." Again, we're going back to our Figma design file, jumping out of Figma Slides back into a normal Figma design file. In this case, I'm going to create a brand new page in the same file, and then I'll paste those in by right-clicking anywhere and clicking "Paste" here.

Once you've done that, you can either reload the layers by clicking on the refresh icon or refresh layers button here again, or if you've already closed the Figma plugin, you can simply rerun it. This will automatically load up those frames directly into the Figma plugin. You can see here that it's loaded up those 12 frames, so all of those slides we just copied from Figma Slides into our normal Figma design file are looking really good.

Now that we've got those imported into Figma, all we need to do again is click on the export button up here. You can play around with these settings. If you want things like retina images, you can enable those kinds of settings and play around with all of these options here. I'm going to leave most of these as standard and click on "Export for PowerPoint." One more time, this will run through all of the slides in our Figma design and export them all to a PowerPoint file.

You can see here our PowerPoint file is ready again, so we're going to download your .pptx file. I'm going to save that directly to my desktop and open that one up. I'm just going to double-click on that. The thing I wanted to point out here is that you'll notice that the font up here is a little bit out of alignment with our Figma design over here, and I'll show you why that is.

If we jump into the text area, double-click on that item, you can see that the height of that text area is actually extending outside of its bounds. The height of the layer is about 230, but the text area, or the text kind of highlighting where we've got the little cursor, is extending outside of that. This is pushing the font size down a little bit or the font position down a little bit.

There are a couple of options. You can modify things like the line height to adjust that manually, or you can just edit that in the PowerPoint file itself and shift those down. For example, we could highlight that, shift it into the correct position, and that solves the issue. Again, this is more of an edge case; you're not going to run into this with most fonts, but some typefaces do have that offset that might change some of the positioning.

You can see the other layers are looking quite good. The font is editable. You have to make sure that you've got the actual font installed. In this case, the "Dangrek" font is installed locally on my computer, which is why I'm able to edit this font visually. If you don't have the correct font installed, it will fall back to a different font. If you're wondering why the fonts aren't aligned, ensure you're installing the exact font used in the Figma file from our Figma Slides file, which are typically Google Fonts.

You're pretty much always using Google Fonts unless you've got your own custom font installed that you're using for your Figma Slides. Anyway, that's basically it. I wanted to run through a couple of quick examples of how you can automatically take your designs from a Figma Slides file and get those into a PowerPoint file just by exporting them via the Pitchdeck Figma plugin.

A last note: the reason the slides are imported into a normal design file is that currently, Figma Slides doesn't support Figma plugins. I suspect they might support Figma plugins in the future, but in the meantime, if you're really keen on using the Figma Slides app or the Figma Slides product and still need to get those designs into a PowerPoint file, jumping into a normal Figma file and exporting them via the Pitchdeck Figma plugin is a really simple way to go about it.

With only that minimal step of copying your slides out of Figma Slides and then exporting them to PowerPoint via the Pitchdeck Figma plugin, I’ll leave it there for today. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export Figma Slides to Google Slides using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-10-02T00:00:00.000Z
dateModified: 2024-10-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-slides-to-google-slides-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-slides-to-google-slides-using-pitchdeck.md
---

# How to export Figma Slides to Google Slides using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you a tutorial on how to export your designs from Figma Slides to Google Slides using the Pitchdeck Figma plugin. 

To get started, we're going to switch out from our Figma Slides file here into a regular Figma design file. I'm just going to go to my regular Figma design file over here.

What you want to do is go to the "Resources" icon and search for Pitchdeck. Under the "Plugins" tab, if you click on the Pitchdeck result, you can run that Figma plugin by either clicking on the "Run" button here, or I recommend clicking on this little "Save" icon here to save it to your plugins list for easy access later. I've already clicked on the save icon here, so I'm just going to go to my Figma design file canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on the Pitchdeck item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the plugin, the way that it works is it loads in Figma frames that you can then turn into presentations or export to PowerPoint, Keynote, or Google Slides. What we're going to do now is switch back into our Figma Slides file, and I'm just going to create a Figma Slides deck. I'm going to grab one of these templates, click on "View template," and I'm just going to click on the "Add all slides" button. That's just going to spin up a new Figma design in our Figma Slides file with all of these predefined slide templates.

We want to make sure first that we're on the grid view, which we are at the moment. By default, it'll probably be in this list view, which makes it a bit harder to see all your slides at once. Just make sure you click on this little grid view at the top left here and swap into your grid view like we have on our screen right now.

What you want to do now is select all the slides you want to export from Figma Slides to Google Slides. In this case, I'm just going to grab the first dozen slides as an example. You can select all of those slides if you want to export the entire deck, but for now, I'm just going to do this as a quick demo. I've just selected those dozen slides, and then I'm going to right-click on those slides, click on the copy button, and then swap back over to my Figma designs file.

Back to the normal Figma file over here, and what I'm going to do is just right-click on my Figma design canvas and then click "Paste" here. That's just going to copy and paste all of the slides from our Figma Slides file over here that we selected and paste them into a regular Figma design file. Once we've pasted in those frames, we want to go ahead and click on the refresh layers button in the Pitchdeck Figma plugin. Alternatively, you can just rerun the Figma plugin, and it will automatically detect all of the frames on the page. But that's another quick way you can go about it.

You can see here that we've got all of our slides now loaded into the Pitchdeck Figma plugin that we exported from Figma Slides over here. Now we can go ahead and export these into Google Slides. The way we do that is just by clicking on the export button in the top right of the plugin, and then we want to change the presentation export format option in this dropdown to Google Slides. Go ahead and click on the Google Slides option, and in brackets, it's got the pptx file because we're going to be exporting this to a pptx file and then importing it into Google Slides in a moment.

You can toggle some of these settings if you want to change things like making the retina images. If you want to have really crisp images, you can make those 2x retina. You can toggle the compression settings. You can make sure that the editable text toggle is enabled, which it is by default, if you want to ensure this text is editable in Google Slides. I'm happy with all of those options, so I'm going to click on the export for Google Slides button. This is going to run through all of our slides and create a pptx file that we can then import into Google Slides.

I'm going to click on the download your pptx file button, and that's going to save it directly to your computer. I'm just going to save that to my desktop and click on save. Now that we've saved that file, we can go to our browser and open up a brand new Google Slides presentation. I've just got a brand new Google Slides file, and what I'm going to do now is go to the file button in the top left here. I'm going to click on import slides, then I'm going to click upload.

Make sure the upload tab is selected, and then what we want to do is just drag and drop our pptx file that we just exported from Figma into the Google Slides upload window here. That's just going to upload the file that we exported from Figma Slides into a pptx file and import those slides into Google Slides. Once that loads up, just go ahead and click on select all slides. That will automatically select all the slides in your file, and you can uncheck the keep original theme; we don't really need that checked. Then click on the import slides button. That's basically going to run through all of the slides in the file we just exported from Figma and import those into Google Slides.

You can see here that it's gone through and imported all of those slides directly into Google Slides, and these are editable slides. You can see here that the text can be modified, and all of the font settings have been maintained. We have the Inter font selected, and that's at size 14, which is exactly the same as we had in our Figma Slides design over here. If we jump back into Figma Slides, you can see that if we inspect these elements, you'll notice that we're using the Inter font, and the sizing is exactly the same as what we can see over here in Google Slides.

That's looking really good, and that also means we can move these layers around as well. You can move those around if you need to, same with these image layers; you can move those around as needed and resize them or delete them. But that's basically what that looks like there. That's basically what it looks like to export your layers from Figma Slides into Google Slides.

I'll show you one more quick example just to give you a bit of variety. What we can do is go back to our Figma file, and I'm just going to create a brand new Figma Slides file. Just click on file, then new slide deck, and this is going to open a brand new Figma Slides file again. I'm just going to select another deck here. I'm just going to select this agency Pitchdeck, click on view template, and then I'm just going to click add all slides.

Now that we've added those slides, again we're just going to make sure we're in the grid view, and we're going to copy all of these. I'm just going to do Command A, or you can do Control A if you're on Windows, to select all. You can see all the slides in Figma Slides are selected. I'm just going to right-click those, click on copy, go back to my Figma file, and I'm going to create a brand new page. Just go ahead and click on the new page button.

Again, I'm just going to right-click on my Figma design canvas, click paste here, and that's pasted in all of the slides from our Figma Slides. Again, we're going to refresh those layers, load them up in the Pitchdeck Figma plugin, and now we're going to click on export again. We've already got our settings saved to Google Slides, so go ahead and click on export for Google Slides again. Once again, that's just going to run through all of the slides from your Figma Slides file, and then you can click on the download your pptx file again. Save it to your desktop or wherever you like, and then in Google Slides again, you can just create a new presentation and we're going to import those slides into this new presentation.

Once again, just go to file, import slides, click on the upload tab, then drag and drop the pptx file you just exported from Figma into Google Slides. Once that finishes uploading, you should be greeted with the slide selection frame again. You can see here under import slides, it's loading up previews of all those slides for us to import. One more time, I'm just going to click on select all slides, make sure those are all selected, then I'm just going to uncheck keep original theme and click on import slides.

Again, that's going to run through all of those slides and import them directly into my Google Slides file. You can see that all of the fonts have been taken care of automatically. Because we're using Google Slides in this case, the cool thing about it is that Figma Slides also often uses Google Fonts as its default fonts for a lot of these templates. Any Google Fonts that are being used in Figma Slides are automatically going to get included and loaded up in Google Slides because Google Slides also automatically loads in all of the Google Fonts in the same way that Figma Slides does.

You can see that's looking really good. The fonts have all been swapped in; we can edit that text as you'd expect and move that around if you need to. Again, we can run through all of these and see that all of the content has been imported as we would expect from our original Figma Slides file.

Yeah, that's looking really good. Again, mindful that sometimes designing in Figma Slides is going to be way better than designing it from scratch in Google Slides. But there's also the use case where you just do need the output to be in Google Slides sometimes. This is a really quick and efficient way of taking any slides that you've designed in the new Figma Slides format and dropping those into the Pitchdeck Figma plugin and exporting that out to Google Slides.

You can basically go from Figma Slides to Google Slides in a number of clicks, and hopefully that helps your workflow if you are a Figma Slides user who also likes exporting things to Google Slides for stakeholders or clients that just need it in that format. Hopefully, this removes a bit of that headache of manual work transferring those designs from Figma Slides into Google Slides each time layer by layer.

I'll keep it pretty simple and leave it there for today. I just wanted to show you a couple of examples of how to quickly get your Figma Slides out into Google Slides automatically. As always, thank you for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export Figma Slides to Keynote using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-10-01T00:00:00.000Z
dateModified: 2024-10-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-slides-to-keynote-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-slides-to-keynote-using-pitchdeck.md
---

# How to export Figma Slides to Keynote using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your designs from Figma Slides to Keynote using the Pitchdeck Figma plugin. 

To get started, all we need to do is go to our Figma app and open up a brand new Figma design file. Instead of a Figma Slides file, which we'll come back to in a second, you want to open up a brand new normal Figma file. Then, go to the "Resources" icon and search for Pitchdeck. Under the "Plugins" tab, if you click on the Pitchdeck item, you can run the Figma plugin by either clicking on the "Run" button here or, I'd recommend clicking on the "Save" icon to add it to your bookmarks for easy access later.

I've already clicked on that little save icon, so I'm just going to go to my Figma design file canvas, right-click anywhere, go down to "Plugins," then to "Saved plugins," and click on the Pitchdeck item. That's just going to run the Figma plugin we saved a second ago. Now that we've got that loaded up, we can go back to our Figma Slides file. I have a brand new Figma Slides file open without any design in it already. What I'm going to do is spin up a brand new template by clicking on the View template button for this one here. Then, I'm just going to click on the add all slides button, and that's just going to add all of these slides to a brand new Figma Slides deck or template for me.

By default, it will display all the slides in this kind of list view. However, to make this a bit easier, we want to switch over to the grid view. In the top left of your Figma Slides panel, go ahead and click on the grid view icon. That'll give you a quick overview of all your Figma Slides in one go. In this example, I'm just going to export a handful of these slides to show you how to export them to Keynote. I'm going to grab the top row, but you're welcome to select your entire deck if you want to export all of your slides. I'm just going to select the first dozen or so, and with those highlighted, I'm going to right-click them and then click on the copy button. Just right-click and then click copy.

Now, we want to go back to our normal Figma design file. Just swap back over to the Figma file we created before, and we're going to paste those into the design by right-clicking on the Figma design file canvas and clicking paste here. You can see that's grabbed all of those slides from our Figma Slides file and pasted them into our regular Figma file here with all of those layers intact. Now that we've got those loaded up, you can refresh the frames in your Figma plugin. Just go ahead and click on that refresh frames button, or you can rerun the Figma plugin now that we have those frames in here.

The way that the Figma plugin works is it basically looks for any Figma frames on the current page and treats those as slides in the Figma plugin. Now that we've got all of those loaded up, we can export these Figma Slides to a Keynote file by going to the export button in the Pitchdeck Figma plugin. Click on this blue export button over here, and we want to change the export format drop-down to the presentation apps group. We want to select the Keynote option, so go ahead and click on Keynote, which has "pptx" file in brackets. That's correct.

You can change any of these options down here. If you want to tweak some of these things, like adding Retina images, or turning compression on or off, things like that, and adding editable texts, which is enabled by default, you can change those however you like. Now that I've got all my settings toggled, I can click on the export for Keynote button. I'm just going to click on that now, and that's going to automatically export all of my Figma Slides that we just imported into a Keynote "pptx" file.

Now that I've just finished exporting that, I'm going to click on download your "pptx" file and save that directly to my computer. That's just going to save it to my desktop. I'm going to click on Save, and then what you want to do is go to the file, right-click it, go down to open with, and click on the Keynote option. Just go ahead and click on Keynote, and that's going to open up the "pptx" file with the Keynote app if you're on Mac. You can see here it's just opened up the Keynote app, and we've got all of our slides looking really good.

All of the slides that we designed or had from the template in Figma Slides are visible. We can switch to the list view to make that look a little bit easier. If we go to Keynote, you can see those basically match up as you'd expect. These are basically one-for-one with the original Figma design, but we're now editing these natively in the Apple Keynote presentation app. This is really handy if you need to send a design created in Figma Slides to someone who's using Keynote. If they want to make copy changes or text changes in the Keynote app instead, they can definitely do that.

You can move elements around, so if you need to rearrange things, you can totally do that as you'd expect. This is basically giving you a really quick export from Figma Slides to a native Keynote file or Keynote presentation that you can tweak or present using the Apple Keynote app. That's it! I just wanted to give you a quick tutorial on how to export your designs from Figma Slides to Keynote. This deck here takes those Figma Slides and exports them through the Pitchdeck Figma plugin to be used natively in the Apple Keynote app.

We'll leave it there for today, keeping it really nice and simple. As always, thank you for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Presentation workflow for agencies using Figma
description: A practical presentation workflow for agencies that design in Figma but present elsewhere.
datePublished: 2024-09-27T00:00:00.000Z
dateModified: 2024-09-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-presentation-workflow-for-agencies-using-figma/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-presentation-workflow-for-agencies-using-figma.md
---

# Presentation workflow for agencies using Figma

A practical presentation workflow for agencies that design in Figma but present elsewhere. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for presentation workflow for agencies using figma when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Pitchdeck fits into the process

Pitchdeck is helpful in this workflow because presentation work usually lives between design quality and practical delivery. Designing once in Figma and exporting to familiar deck formats is often the fastest middle ground.

With Pitchdeck, teams can usually:

- keep presentation design in Figma without trapping the output there
- export decks into formats stakeholders already expect
- reduce the need to rebuild polished work in slide software

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Pitchdeck](/pitchdeck/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If decks and presentations are the pain point, Pitchdeck is a strong place to start. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to import Google Slides to Figma with one click using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-09-17T00:00:00.000Z
dateModified: 2024-09-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-import-google-slides-to-figma-with-one-click-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-import-google-slides-to-figma-with-one-click-using-pitchdeck.md
---

# How to import Google Slides to Figma with one click using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to import Google Slides into Figma automatically using the Pitchdeck Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the little resources icon, and search for "Pitchdeck." Under the "Plugins" tab, click on the Pitchdeck item. You can run the Figma plugin by either clicking on the "Run" button or, as I recommend, clicking on the "Save" icon to save it to your Figma plugins list.

I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on the Pitchdeck item. That will run the Figma plugin we saved a second ago. Once the Figma plugin loads up, you'll get this empty state of the Figma plugin because we don't have any slides in our current Figma file, which is fine. Normally, you would probably go ahead and start adding some slides or designing your own frames. Today, however, we're going to import slides we've already designed from Google Slides.

You can see here I have a few different slide decks in my Google Slides account. We’re going to import each of these into Figma automatically using the Figma plugin. The way to do that is by giving it a .pptx file from Google Slides. You can import a .pptx file directly into Figma from your computer. To do that from Google Slides, go to your Google Slides file, go to the "File" tab at the top, then go down to the "Download" menu, and click on the Microsoft PowerPoint (.pptx) link. Click on that, and it will automatically download your Google Slides as a .pptx file.

Now that I have that downloaded on my computer, I'm going to go to my desktop, find the "recipe book.pptx" file that we saved from Google Slides, and drag and drop it into the dropzone over here. I'm going to grab the .pptx file from my computer and drop it directly into the dropzone area here in Figma. It will read the file and start importing the slides into Figma.

As you can see, it's imported all eight slides. If we go to our canvas and zoom in a little, you'll notice it's imported each of those slides from our Google Slides file. You can see that these have been imported into individual layers as well. If we zoom in, you'll notice this is an image layer that we can move around. The same goes for the text layer—this is editable text. You can edit that content in Figma, move it around, or add extra content to it.

This process has taken all of our content from Google Slides, exported it to a PowerPoint file, and imported it into Figma. That's how it works. You'll notice that it's mostly looking really good, although there are a few small quirks. For example, when it comes to text layers with mixed lists, things might look a little wonky. This feature is still in beta, as you can see from the "BETA" label in the import PPTX dropzone, but most of these issues will get ironed out over time.

Now, let’s import another deck. We’ve got this "yearbook" Google Slides template that we can import. I’ve already saved that one to my desktop, so again, I'm going to drag and drop the .pptx file into the dropzone. It will load the file and import that one as well. You’ll see the slides are importing, and we get a little progress indicator. Once that finishes, it automatically switches to a brand new page in our Figma file.

Each time we import a .pptx file from Google Slides, we get a new page in our Figma file. You can see that this one has been imported as well. Again, all of these layers are editable. The text layers are editable, so we can change the content as needed, move the layers around, and adjust things as expected. The images are all individual image layers, and that’s looking great. This process saves a lot of time. Instead of manually recreating a file from Google Slides, we’re able to import it directly into the Figma plugin.

Let’s do one more to show you a larger deck. We have this deck here with a couple of dozen slides. I’m just going to click on the "Import .pptx" button—you can also browse your computer, but I'll drag and drop since I already have the desktop window open. I'm going to drag and drop this last .pptx file from Google Slides, and import that one as well. You’ll see it importing those 21 slides into Figma. Depending on how big your deck is, how many images and layers it has, that will determine how long it takes to import, but overall, it should only take about 30 seconds for most files.

There we go—it’s imported our 21 slides into Figma. Again, all of these are editable. You can edit the text, move the layers around, and everything is now editable Figma layers. This is still in beta, so there may be a few things that aren’t 100% right. However, it's a great head start, allowing you to get all that content and those layers in there. If you need to make any small tweaks, this process will still be much faster than manually recreating every single layer from scratch from your Google Slides in Figma.

This method gives you a lot more flexibility. If you want to re-export this into a PowerPoint file for PowerPoint, Keynote, or Google Slides, you can do that by clicking on the "Export" button, changing the export format to PowerPoint, Keynote, or Google Slides. That will give you a .pptx file from Figma that you can reuse in another application as well.

That's basically it! I just wanted to show you how to import your Google Slides into Figma as individual editable layers automatically. You can now experiment with the "Import .pptx" feature, which is still in beta but improving over time. If you're interested in importing your slides from Google Slides automatically and still need to use that software with your team but prefer editing the content in Figma, this process will hopefully improve your workflow speed by automating part of it.

Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one.

---

---
type: article
title: Is a Figma plugin bundle worth it?
description: When a Figma plugin bundle makes sense, when it doesn't, and how to think about the ROI.
datePublished: 2024-09-15T00:00:00.000Z
dateModified: 2024-09-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/is-a-figma-plugin-bundle-worth-it/
markdownUrl: https://www.hypermatic.com/articles/is-a-figma-plugin-bundle-worth-it.md
---

# Is a Figma plugin bundle worth it?

Buying one Figma plugin is an easy decision. Buying a bundle takes a little more thought.

The right answer depends on whether your team has one recurring workflow problem or several. If all you need is better image compression, a single plugin like [TinyImage](/tinyimage/) might be enough. If your team also builds email campaigns, exports decks, creates banner ads, handles reviews, and manages text updates, the math changes quickly.

That is when a plugin bundle starts to make sense.

### A bundle is worth it when your team touches multiple workflows

The biggest reason to choose the [Hypermatic Pro Bundle](/bundle/) is that creative and product teams rarely have one isolated problem.

A normal week might involve:

- exporting campaign images
- building HTML emails
- resizing assets for social
- creating a client deck
- collecting feedback
- checking the front-end build against the design

If your team is doing all of that with separate manual steps, a bundle is usually easier to justify than buying tools one by one over time.

### A bundle is also worth it when standardization matters

Teams lose a lot of time when everyone has their own workaround.

One person compresses files somewhere else. Another person crops images manually. Someone else rebuilds emails in another tool. A bundle can help standardize those workflows around Figma itself, which means fewer one-off processes and less context switching.

### When a bundle might not be worth it

If your use case is narrow, start narrow.

If you only need email export, [Emailify](/emailify/) is probably the better first purchase. If you only need design QA, [Pixelay](/pixelay/) may be enough. If you only need file conversion, [Convertify](/convertify/) is the obvious place to start.

If presentations are the recurring pain point, [Pitchdeck](/pitchdeck/) is the cleaner place to start. If ad production is the real bottleneck, [Bannerify](/bannerify/) will usually give you more immediate value. If messy reviews are slowing the team down, [Commentful](/commentful/) is a better first purchase than a bigger bundle decision.

If the recurring issue is exporting polished presentations into a format other people can actually use, Pitchdeck solves that job more directly than a bundle decision.

If the real pressure is campaign production across ad sizes and motion variants, Bannerify is the more focused fix.

If your team mostly needs faster content updates across designs, [CopyDoc](/copydoc/) is the better first purchase. If the issue is visual implementation drift between design and the live build, [Pixelay](/pixelay/) may be enough on its own. If you are dealing with format migration and legacy files, [Convertify](/convertify/) is still the obvious starting point.

For text-heavy product or marketing work, CopyDoc is usually the simpler first step because it targets the copy workflow directly.

If the biggest risk is front-end drift, Pixelay is the better narrow solution before expanding into a broader toolkit.

The bundle makes more sense when the friction is spread across multiple jobs instead of one.

### The practical way to think about ROI

The question is not really “how many plugins are included?”

The better question is “how many hours of repetitive production work does this remove every month?”

If the bundle helps your team replace several recurring manual workflows with faster Figma-based ones, it is usually easier to justify than it looks on paper.

### The short version

- If your team has one clear bottleneck, start with one plugin
- If your team jumps between many production workflows, the [bundle](/bundle/) is usually worth it
- If you want one toolkit instead of piecing things together later, the [Pro Bundle](/bundle/) is the cleaner choice

---

---
type: article
title: How to build client presentations in Figma
description: How to build client presentations in Figma and still hand over deck-friendly outputs afterward.
datePublished: 2024-09-10T00:00:00.000Z
dateModified: 2024-09-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-how-to-build-client-presentations-in-figma/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-how-to-build-client-presentations-in-figma.md
---

# How to build client presentations in Figma

How to build client presentations in Figma and still hand over deck-friendly outputs afterward. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for how to build client presentations in figma when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Pitchdeck fits into the process

Pitchdeck is helpful in this workflow because presentation work usually lives between design quality and practical delivery. Designing once in Figma and exporting to familiar deck formats is often the fastest middle ground.

With Pitchdeck, teams can usually:

- keep presentation design in Figma without trapping the output there
- export decks into formats stakeholders already expect
- reduce the need to rebuild polished work in slide software

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Pitchdeck](/pitchdeck/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If decks and presentations are the pain point, Pitchdeck is a strong place to start. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to add bleed and crop marks to PDF exports from Figma using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-09-07T00:00:00.000Z
dateModified: 2024-09-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-bleed-and-crop-marks-to-pdf-exports-from-figma-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-bleed-and-crop-marks-to-pdf-exports-from-figma-using-tiny-image.md
---

# How to add bleed and crop marks to PDF exports from Figma using TinyImage

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to automatically add bleed and crop marks to your PDF exports with one click from Figma using the TinyImage Figma plugin. 

If you're new to this concept, bleed and crop marks are basically used for printing documents. If you're sending a design to a printer, they always require this little bit of extra, a few millimeters on the edges here, and these trim marks to basically add a bit of buffer so that when they cut the design to the correct size, it doesn't leave white space at the edges.

We're basically going to be extending our original design by a few millimeters externally based on the original dimensions and automatically add these trim lines so that the printer knows where to cut it, and you won't end up with these white areas at the edges there. Now that we've finished that quick 20-second primer of what bleed and crop marks are, I'm going to show you a few examples of doing this automatically in Figma.

I've got this business card design here that I want to export to a PDF, and we're going to first open up the TinyImage Figma plugin. All you need to do is go to your Figma file, click on the little resources icon at the top here, and then if you search for TinyImage, under the "Plugins" tab, if you click on the TinyImage result, you can run that Figma plugin by clicking on this "Run" button here. Or you can click on this little bookmark icon to save it to your Figma plugins list for easy access.

I've already clicked on that save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on the TinyImage Figma plugin, and that's just going to run the Figma plugin we saved a second ago.

To export these frames to a PDF, what we can do is click on this little "Create PDF" button in the top of the plugin header, and that's going to automatically fetch all of the frames on our current page. These are all the top-level Figma frames, and you can select which ones you want to include in the PDF. You can rearrange those based on different orders, so you can do it by column, you can do it by rows, you can do it by layer order, or manually rearrange them in the UI as well. But for today, I'm just going to keep it really simple and just do it by rows.

Once you've got that set up, all you need to then do is configure your options down here. You can select the DPI; if you're doing it for print, you probably want to go to 300 DPI, but you can change that to whatever you like and customize anything down here as well. If you like, you can change this to CMYK, for example, so we can do that. And then what you want to do is just enable this toggle down here that says "Add Bleed."

We're going to enable the "Add Bleed" toggle, and by default, that's going to add 3 millimeters of bleed, which we just looked at before. This is this red area here, and that's going to automatically add that 3-millimeter buffer or bleed to our design. You can customize this, so if you need it to be 5 millimeters or 2 millimeters, you can change that, but the typical use case is about 3 millimeters, so we're just going to leave that as three.

And then you've got the option, which is turned on by default, of including the crop marks. Those are these little lines here that kind of intersect at the top of each of the corners, and that will just give the printer the lines for it to use, essentially, a guillotine to slice that to the original document dimensions. That's going to crop off this bleed area and just leave you with this inner area here.

I'll show you what that looks like now. We're going to export that by clicking on the "Export PDF" button in the Figma plugin, and that's just going to go through and export those four Figma frames to a new PDF and automatically add that bleed and crop area to our PDF export. I'm just going to save that to my desktop, and you can open that in whatever PDF reader you like. I'm just going to open this up in the Mac Preview for now, and you can see it's automatically added our crop marks to each of those pages in the PDF.

What that's essentially done is it has stretched the PDF to the original dimensions, which are here, and it's added 3 millimeters around that edge, and it's extended the design outside of that as well by those 3 millimeters. Then, it's included those crop marks so that the printer knows where to crop it. Essentially, this area where these crop marks intersect is the original dimensions of your Figma frame here, and the frame has essentially got an extra 3 millimeters, as you can see in these corners here, added to the outside. So that when it gets cropped off, it will exclude any of that extra content and give you a nice, clean cut.

That's a really simple example. We've got a few other examples we can try as well. You can see here we've got another one, which is a poster. I'm just going to rerun the Figma plugin here, so we're going to open up TinyImage in this new Figma file, and we're going to do the exact same thing. We're going to go to "Create PDF." This time, we've only got one frame, so that's totally fine. It's just going to give us a PDF with one page on it.

Again, we're going to click on the "Add Bleed" toggle, we're going to keep the crop marks on, and then export that to PDF. Once this is done, I'm just going to save that to my desktop again. And one more time, I'm just going to preview that. You can see here we've got our crop marks, and because this is a much bigger frame—it's not a business card—we can zoom in and see those crop marks. That's still a 3-millimeter edge, but because the design is much bigger, obviously, that relative size appears much smaller when we look at it on the computer. But you can see that it's added those crop marks in.

You can also notice that on this particular design, because it's a different color design in each corner, the Figma plugin is automatically making sure that those crop marks are inverted, so they're always visible in the design. You can see here, because we've got a black background in this section and a white background in this other section, that's automatically being accounted for when it gets created, and it's giving those crop marks the correct contrast. That's what that looks like there.

Finally, I'll just show you one more example of those two things put together. If we click on this last Figma file example, again, I'm just going to rerun the TinyImage Figma plugin. This time we've got a few different files, so we've got a few different designs here, and each of them have a different color background, and they're about 1080 x 1080 pixels, which would translate to some size that's larger than these business cards but smaller than this poster.

I'm just going to export that as a last preview of what this can look like. I'm going to again click on the "Create PDF" button, and then I'm just going to make sure that all of my frames are selected. I've got those selected there. Again, you can rearrange these however you like. You can change the DPI as needed, and again we're just going to click on the "Add Bleed" option. We'll set it to CMYK just for print, and this time maybe we want to do a 5-millimeter bleed, so we can just change that to five.

Keep those crop marks on; if you don't need the crop marks and you just need that extra bleed area, you can obviously turn off the crop marks option, and that will exclude those corner crop marks while leaving that extra bleed around the edges. But we're going to leave the crop marks on and click on "Export PDF."

Once this finishes exporting, we should get a new PDF with five pages, all with the bleed of 5 millimeters included and those crop marks as well. This is just optimizing the pages; it's going to save that so we can add that to our desktop. And if we open up that file, we'll just open it up in Preview, and again, you can see here that the crop marks have been added. We've got a 5-millimeter bleed area, and the crop marks are being included.

That's looking really good. And as I said, the contrast will change based on the background color, so if you've got a darker background or a lighter background, the plugin will automatically make sure that those crop marks are visible, and that's going to make sure that you're not getting invisible crop marks. If you're using a dark background or a light background, it's always going to show up as you would expect. That's looking really good. That's basically giving us our extra bleed area with the background included, so we're going to get a nice clean crop once that gets sent off to the printer, and that's going to look really good with those crop marks included.

That's basically it. If you've been wondering how to automatically add bleed and crop marks to your Figma PDF exports, this is a really quick way of going about it, just with that one click of enabling the "Add Bleed" toggle in the TinyImage Figma plugin. You can customize those millimeters here—you can even go down to, you know, half a millimeter if you really wanted to. But again, 3 millimeters (mm) is pretty standard, so I would probably just leave it at that unless your printer specifies otherwise.

You can also add or remove those crop marks along with the bleed, and don't forget you can set the CMYK color profile if needed, which is super useful for print. This setup is going to get you most of the way there for print-ready PDFs. I hope this has been helpful if you've been wondering how to optimize your PDF exports from Figma for print with CMYK, bleed, and crop marks. Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to translate email designs in Figma with the Crowdin API using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-09-05T00:00:00.000Z
dateModified: 2024-09-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-translate-email-designs-in-figma-with-the-crowdin-api-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-translate-email-designs-in-figma-with-the-crowdin-api-using-emailify.md
---

# How to translate email designs in Figma with the Crowdin API using Emailify

#### Video Transcript

Today I'm going to be showing you a tutorial on how to localize your HTML email designs with the Crowdin platform using the Emailify Figma plugin. To get started, all we need to do is go to our Figma file. If you click on the little "Resources" icon up here and then search for Emailify, under the Figma plugins tab, if you click on the Emailify result, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on the "Save" icon, which will save it to your Figma plugins list for easy access later.

I've already clicked on that save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on the Emailify item. That's going to run the Figma plugin we saved a second ago. You can see here that the Figma plugin has just loaded up. If you're new to the Figma plugin, it helps you design HTML emails in Figma, which you can then export to production-ready HTML with one click.

In this case, I just grabbed a template. By default, if you're running an empty Figma file, it'll look like this and ask you to add a new blank Emailify frame. For today's tutorial, I've just gone to the browse Figma templates and grabbed this free Airbnb template, which is Emailify-ready, and duplicated that into my Figma account.

I'm not going to be showing you all of the design features in the Figma plugin today. If you're interested in that, you can check out the documentation site or some of the other YouTube tutorials on the channel. You can go through and add components, which you can totally customize in Figma as you would expect. I'm going to be showing you how to localize this design that already exists, rather than designing it from scratch.

We can see here that we've got our design basically ready to go. If we preview it, we can see the HTML content, and that's all looking really good. Now that we've finished the design, the last step is localizing or translating this text content, and we're going to do that by integrating it with the Crowdin platform.

Crowdin.com is the service we're going to use today. You just need to create an account there. Then, we want to click on the "Create Project" button. If you don't have any projects, just click on "Create Project," or if you want to create a new project, this will take you to the "Create Crowdin Project" screen. I'm going to call this "Airbnb Emailify" and put that in there. We want to make sure this is a private project, and importantly, we want to check the checkbox that says "String-based project." Click that so it's going to work with strings instead of files.

For the source language, our email design is in English, so we're just going to keep that as English. Then in this little list here, you can go through and check your target languages. These are the languages you want to translate your email into. I'm just going to select a couple here for today's example. I'll do Dutch and French. You can add as many as you need. Today, I'll keep it simple and just have these two.

Once you've got that set up, go ahead and click on "Create Project." That's going to create a brand-new Crowdin project under your account. You can see it's created the project successfully. Under the projects list on the left-hand side, you can see we've now got Airbnb Emailify created, and it's ready to go.

Now, we want to go back to the Figma plugin and click on this "Localize" button in the header. Click on "Localize," and we want to change this setting on the left from "Excel" to "Crowdin API." Under the platforms category, just click on the Crowdin API option, and it's going to ask you for your API token. If you click on that API token link, it will bring you to your API token settings page if you're logged into Crowdin.

Under the API heading in the account settings page, we want to go down under "Personal Access Tokens" and click on the "New Token" button. I'm going to call the token "Emailify" so we know what it is. Under Scopes, you basically want to add the permissions that the Figma plugin is going to need to translate and read the content.

We want to go down to the projects section and click on projects. We can just do "Read Only" for that one. Then, go down to translations and set that to "Read and Write," because we want to be able to read and write those from the plugin. For screenshots, set that to "Read and Write" as well, since we're going to upload some screenshots. We want to add the source files and strings with "Read and Write" as well, since these are the main elements we're going to be updating.

Once you've done that, click on the "Create" button. You can see it's generated our new personal access token. You want to save this somewhere safe because you won't be able to see it again under this particular token. Copy that to your clipboard, save it somewhere safe, and paste it into the Figma plugin. I'm just going to paste that into the API token field in the Figma plugin. That's going to automatically authenticate with Crowdin and load up my Crowdin projects.

In the top right of the Figma plugin, there's a select box that allows us to select our project name. If you've got multiple projects, those will all show up, but I've only got one project at the moment, so I'll keep that one selected. It's also worth noting that you should create a new Crowdin project for every new Figma file you create. The key is going to get saved to the current Figma page, so if you create a new page, you'll have to re-paste that key in.

Now that that's all set, we can upload our email. Go ahead and click on the email template. You might have multiple emails, but in this case, I've just got one. Select the emails you want to upload into the Crowdin platform and click on the "Upload" button. This will grab all of the text content from your email design and upload all of these text strings into the Crowdin platform as the source content.

We'll just wait for that to finish. It's also going to upload the screenshot of the email, and you can see it's uploaded text from our Figma email into Crowdin. Now that that's confirmed, go back to the project. The easiest way to do that is to click on the "View Project in Browser" link from the Figma plugin, and that will open up the project directly in your browser.

I've refreshed the strings page, and you can see on the right-hand side that all the strings from our content have been uploaded into the platform. You can see we've got "Level up your checkouts," which is the header, "Checkout instructions," and all the way down to the bottom where we've got our unsubscribe and view-in-browser text as well.

The next step is to translate some of these strings. Go back to the dashboard and click on the localization you want to start translating. I'm going to click on the Dutch one and translate a couple of strings to show you how it works. Find the string you want to translate, go into the translation box, and translate that. You can use Google Translate or a professional translator.

Once you've translated the string, save it. I'll save that one there. Now, I'll go back and do the exact same thing for the French one. I'll grab the "Level up your checkouts" string again, translate it into French, and paste it into Crowdin. I'll do the same for this intro paragraph as well.

Once you've translated the content, go back to the homepage, and now we're going to import that content into Figma. Make sure you're on the original page you exported the design from, and click on the "Import Translations" button.

Once that finishes, you'll see a brand-new page in your Figma file. You can see there's a new translations page with a timestamp, and it's taken a copy of our original frame in English and added two new frames with the French and Dutch translations. Now, you can see the translation of the heading has been imported, and this body copy has also been imported. The same thing has happened for the Dutch one.

If you want to make updates to this content, for example, if we go back to our original page and then jump in here and change this heading, I'm just going to change this content to say "New Heading" instead. Again, if we go back into the localized panel, we've already got our Crowdin details added. All we're going to do is click on the upload button, and this is going to load the text from Figma, upload that into Crowdin.

If the content has been changed, we can see it's just finished uploading that text. Now, if we go back to the strings page in our project, you can see the source string has been updated to "New Heading." That's been changed in here, and it's just updated the content for anyone using the platform. This isn't going to modify anything you've added in your translations. All translations are only ever done in Crowdin. The stuff that we went through in here will never be overridden or uploaded from the plugin itself. The Figma plugin will always just read the translation content that you've made from the platform, but it always goes from Figma into Crowdin and then Crowdin back into Figma. That's the cycle based on the locals that you've added.

That's basically it. I just wanted to run through this tutorial with you. If you're using the Crowdin platform, this is the quickest way you can go about importing the content and exporting the content to and from Figma with Crowdin, automatically automating some of that localization process for multiple emails.

Once you're happy with the emails, to export them, all you need to do is click on this "Export HTML" button. That's going to allow you to export all of your translated emails with one click to HTML. You can select the platform you want to export it for or just export it to an HTML zip package. Click on "Export to HTML," and that's going to automatically generate the code and export all the images for each of those translated emails from your translated email IFFI page that we just imported the content from via Crowdin.

That's basically it. You can see here it's just finishing up that last email, and then we'll get the option to download it. You can take that zip file, do whatever you want with it, or use one of the other platform integration options to upload your emails. We'll leave it there for today. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Google Slides alternative for designers
description: Why design teams look for a better alternative to building polished slides directly in Google Slides.
datePublished: 2024-08-24T00:00:00.000Z
dateModified: 2024-08-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pitchdeck-google-slides-alternative-for-designers/
markdownUrl: https://www.hypermatic.com/articles/pitchdeck-google-slides-alternative-for-designers.md
---

# Google Slides alternative for designers

Why design teams look for a better alternative to building polished slides directly in Google Slides. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for google slides alternative for designers when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Pitchdeck fits into the process

Pitchdeck is helpful in this workflow because presentation work usually lives between design quality and practical delivery. Designing once in Figma and exporting to familiar deck formats is often the fastest middle ground.

With Pitchdeck, teams can usually:

- keep presentation design in Figma without trapping the output there
- export decks into formats stakeholders already expect
- reduce the need to rebuild polished work in slide software

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Pitchdeck](/pitchdeck/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If decks and presentations are the pain point, Pitchdeck is a strong place to start. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to export HTML emails from Figma to Amazon Simple Email Service (SES) using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-08-21T00:00:00.000Z
dateModified: 2024-08-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-amazon-simple-email-service-ses-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-amazon-simple-email-service-ses-using-emailify.md
---

# How to export HTML emails from Figma to Amazon Simple Email Service (SES) using Emailify

#### Video Transcript

Today, I'm going to be showing you a really quick tutorial on how to export your HTML email designs from Figma to the Amazon SES (Simple Email Service) platform. We're going to be doing that using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the "Resources" icon, and then search for Emailify. Under the "Plugins" tab, if you click on the Emailify item, you can run the Figma plugin by either clicking on this little "Run" button, or I'd recommend clicking on this "Save" icon. That will let you save the Figma plugin to your Figma plugins list. I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins", and then click on the "Emailify" Figma plugin. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma, which you can then customize using all of the normal Figma design tools and export to production-ready code automatically. I'm not going to be going through all of the design features today, but if you're interested in those, I'd highly recommend checking out some of the other tutorials on the YouTube channel.

For today, I'm just going to be using a template from one of the Figma templates in the Figma plugin that you can download. You can clone these Figma files, and that will give you these components automatically pre-designed using Emailify. Again, if you want to deep dive into how to design the emails, I'd recommend checking out some of those other tutorials where you can see how to add these components, customize them in Figma, and then also preview them and add mobile overrides and things like that.

Just to give you an example of what the HTML will look like, we can preview the HTML just by clicking on the preview button in the Figma plugin. This is going to load up a real HTML preview of our design. These are all the Emailify components getting loaded into HTML, and we can see exactly what that's going to look like on desktop and mobile. You can see the responsive options there. As I mentioned, you've got control over the mobile design as well. If you click on any of these layers, then click on the settings button, you can basically go through and customize these elements for mobile. You can do things like change the padding, change font sizes, and offsets for mobile.

Again, I'm not going to be going through all of those today, but I just wanted to give you a little preview of what that looks like in the Figma plugin. Once you're happy with your HTML email and it's looking really good in the preview, as I think we are here, you can close off that preview and then we can export this HTML by clicking on the export HTML button in the Figma plugin. I'm going to go ahead and click on that, and once that loads up, you'll see that by default it's going to export it to an HTML email zip package, which would just download the files to your computer. However, we're going to go to this platform integrations group down here, and we're going to scroll all the way down to the letter "S" to find SES (Simple Email Service). We want the SES (Simple Email Service), which is the simple email service option. In brackets, it says AWS, so we know it's the right one.

You want to click on that SES (Simple Email Service) option, and you can see that it will reveal these new fields. We've got a few things here: we need to get our access key, secret key, and also specify the region for our AWS SES instance. We can find that by going to our Amazon account. If you log into your AWS account, you'll notice in the top URL bar, you'll see your region showing up. In this case, mine is us-west-1. You want to find your own region and make sure you add that to the Figma plugin. As you can see, I've already got that selected. I've got us-west-1 selected, which is the right region for me, but yours might be one of these other regions, so just make sure you select the right region.

Next, you need to create an Amazon access key and secret key. You can do that through the IAM menu. Just go into your AWS account, go to the IAM settings, create a new user with a role that matches having permissions to create SES (Simple Email Service) templates, and then click on create new access key. I've already clicked on the create access key button, and I'm going to copy this access key by just clicking on this little copy icon. We'll drop that in the access key input here, which has the little key icon next to it. The secret access key can be revealed by clicking on show, and then click on the little copy icon again. This time, paste that secret access key into the secret key field here.

Once you've done that, you'll see that the upload to SES button becomes active. Before we upload, let's change a couple of other things. The first thing to note is that whatever the email name is in your Figma frame, your Emailify Figma frame, that's going to be used as the name of the template when it gets uploaded into SES (Simple Email Service) from the Figma plugin. For example, you can see here that I uploaded one before called "Emailify Template," and it put a little timestamp on there to avoid duplicating the name. In this case, it's going to create one called "Apple Email Template." That's just something to note if you're wondering where that name is being determined from.

The second thing is you want to set a subject line. When the template gets uploaded, it's automatically going to pass this subject line into the API request when creating the SES (Simple Email Service) template. In this case, I'm just going to use the headline from the email and paste that into my subject line. You can also create preheader text, which is what shows up underneath or next to the subject line when your email gets sent out. I'm just going to paste some text in there as well. I definitely recommend populating the subject line, tweaking the template name, and optionally adding preheader text as well.

Once you've done that and double-checked your region and added your access keys, go ahead and click on the upload to SES (Simple Email Service) button. I'm just going to do that now. This is going to automatically generate the HTML code, upload all of the images, and upload our template to SES (Simple Email Service) using the credentials we just added. You can see here it's just finished uploading those templates. It's saying our AWS templates have been uploaded, and we can view them by clicking on this link. Make sure you're logged into your AWS account, and you should be able to just click on this SES (Simple Email Service) templates link, and that should load up the correct templates page based on your region.

Based on the upload we just did, we can now see we've got three templates. Before, we had two, and now there's a brand new one added at the bottom here, which is our "Apple Email Template." You can see that the email template name has been taken from the Emailify frame in Figma—Apple Email Template—and it's been added here. You might be wondering why the text is being lowercased and the spaces are being replaced with underscores. SES (Simple Email Service) has a strict naming convention policy where you basically can't use any other characters except for alphanumeric and underscores or hyphens. If you've got any special characters or any non-alphanumeric characters, those are all going to get stripped out. This is to ensure that the upload has no issues when it's creating the email. Otherwise, if we left it without the hyphens instead of spaces, it would just error out and wouldn't create the template. That's the reason why that looks a little bit different from the uppercase version here.

That's basically it. You can see that it's now in our templates list. Because Amazon SES (Simple Email Service) is entirely API-driven, what you need to do to use these templates is go to the documentation site. You can see here that in the message, it's saying this page provides a list of all your existing templates. If you want to view the contents of a specific template, you'll need to use the get email template operation in the Amazon SES (Simple Email Service) API. You can see here it links out to the docs for that. Depending on what programming language you're using or what services you're using to consume these templates, you'll need to hit this API and send over the request including the template name, which you can see here. That's why the template name is unique, and you want to pass in that template name into this get templates API request. That will allow you to consume it using whatever APIs or services you're integrating with SES (Simple Email Service) to send out your emails.

That's basically it. This is probably more of a technically focused tutorial. If you're using Amazon SES (Simple Email Service), you're probably a developer or integrating APIs with your application or something like that. Hopefully, SES (Simple Email Service) is quite familiar to you. I just wanted to show you how to get your HTML template out of Figma using the Emailify Figma plugin into the Amazon SES (Simple Email Service) platform and into your templates list without having to manually fire off an API request to do that.

I'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Move legacy design files into Figma
description: How to bring legacy design files into Figma without treating migration like a ground-up redesign.
datePublished: 2024-08-07T00:00:00.000Z
dateModified: 2024-08-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-move-legacy-design-files-into-figma/
markdownUrl: https://www.hypermatic.com/articles/convertify-move-legacy-design-files-into-figma.md
---

# Move legacy design files into Figma

How to bring legacy design files into Figma without treating migration like a ground-up redesign. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for move legacy design files into figma when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Convertify fits into the process

Convertify helps in this workflow because format migration is usually expensive in all the wrong ways. A conversion-focused workflow makes legacy files easier to reuse without rebuilding everything from scratch.

With Convertify, teams can usually:

- reduce manual rebuilding when files come from other tools
- make migration and legacy-file work more practical
- keep format conversion from turning into a full redesign job

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Convertify](/convertify/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If design files need to move between tools, Convertify is the obvious starting point. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to install and uninstall Figma plugins
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-08-03T00:00:00.000Z
dateModified: 2024-08-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-install-and-uninstall-figma-plugins/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-install-and-uninstall-figma-plugins.md
---

# How to install and uninstall Figma plugins

#### Video Transcript

Hey everyone, this is Adam, and today I'm going to be showing you a really quick tutorial on how to install Figma plugins and uninstall Figma plugins in the new Figma UI ("UI3") update that just came out in 2024.

To get started, all we need to do is open up a Figma file. You can do that in the browser or in the Figma desktop app. Then, you want to go down to the bottom toolbar where it says "Actions" and click on that little icon. You might remember this icon used to be at the top in the header. There used to be a header bar up here where the "Actions" button, which looked like this, was called "Resources." Now, this has been renamed to "Actions," but it does the same thing. Click on this little "Actions" button down here, and then at the top, you'll notice that there's a "Plugins & widgets" tab. Click on that "Plugins & widgets" tab.

You can see here I'm starting from scratch, so I don't have any Figma plugins installed at the moment. It's going to give me some suggested Figma plugins instead of showing my Figma plugins list. What I want to do is search for the Figma plugin that I know I want to use. You can search for the Figma plugin name directly in here, and that's going to pop up any results in the Figma Community. Then, you can go ahead and click on the Figma plugin. Down the bottom here, underneath the description, you can see there's a button called "Save." Click on that "Save" button, and that's going to automatically add it to your Figma plugins list.

To run the Figma plugin, go back to your canvas, right-click anywhere, go down to "Plugins," and then under "Saved plugins," you'll see the Figma plugin that we just added. Click on that Figma plugin name to run it, and that's going to automatically fire up the Figma plugin that we just saved.

To remove the Figma plugin, that's really easy as well. Go back to that "Actions" menu, click on the little "Actions" button down there, then switch into the "Plugins & widgets" tab again. Click on the little three dots icon next to the Figma plugin name that you've already saved. Hover over the Figma plugin name, hover over the three dots, and click on that. Then, click on the little "Remove" item. Click on "Remove," and that's going to remove it from our Figma plugin list and our Figma account. You can see there it's been removed. If we go to our right-click menu now, go down to Figma plugins, you can see that the Figma plugin has been removed.

Again, you can click on this little "Manage Figma plugins" link to get that item menu back up. You can search for another Figma plugin and install that. We can go to a different Figma plugin, so let's go to the CopyDoc Figma plugin. Another way you can save this is also from the Figma Community. For example, if we click on this item, you'll notice there's a little icon up here with a little globe icon that says "Open in the Community." Click on that, and that's basically going to open up the Figma Community page for the Figma plugin. This is under the Figma Community URL, and this is where you can browse Figma plugins.

You can see at the top here, you can actually browse the Figma plugins through the Figma Community page. I can also save it directly from this page. For example, if I click on this "Save" icon on the Figma Community page, that's going to automatically install the Figma plugin to my Figma account. If I go back to my Figma file now and close this off, then right-click, go back down to Figma plugins, go down to saved Figma plugins, you can see that the CopyDoc Figma plugin that we just saved from the Community page has now been added to our Figma plugins list in our account.

You can also remove that from the Community page as well. Just click on this little bookmark icon where it says "Remove from saves," click on that, and again, that will remove the Figma plugin from your account. It does exactly the same behavior as we saw from the "Actions" panel, but in this case, you can do it directly from the Community. If you prefer to browse the Community, you can browse through the features up here or search directly through the Community. Just click onto any of these, save it, and then it'll be available in your Figma plugins list. You can see that over here. You can also do that from Community pages.

If we go to the Hypermatic account, you can see we can browse the Figma plugins through here. Click on any of those and install it. Just click on the little bookmark, and that's going to save it instantly to our Figma plugins list. You can see we've got those two there. If we go back into our "Actions" underneath Figma plugins, you'll see a list of all the Figma plugins that we've just saved to our account. You can remove those, view the details of those, and manage them through there.

That's basically it. I just wanted to run through that in case you're wondering where the Figma plugins functionality has gone. The entire UI has been redesigned recently, so a few things have been moved around. I just wanted to cover that really quickly in case you've been wondering how to get your Figma plugins back, remove them, or manage them. Those are the two ways you can go about it. They'll always show up underneath the Figma plugins tab down here, and you'll be able to manage them as expected.

That's basically it. I'll leave it there for today and keep it really simple. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export emails from Figma to MJML code using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-08-01T00:00:00.000Z
dateModified: 2024-08-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-emails-from-figma-to-mjml-code-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-emails-from-figma-to-mjml-code-using-emailify.md
---

# How to export emails from Figma to MJML code using Emailify

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your email designs from Figma to MJML code automatically using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the resources icon at the top here, and search for Emailify. Under the "Plugins" tab, if you click on the Emailify result, you can run the Figma plugin by either clicking on this "Run" button here, or you can click on this little "Save" icon here to add it to your saved Figma plugins list. I've already clicked on that icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," go down to "Saved plugins," and then click on Emailify. That's just going to run the Figma plugin we saved a second ago.

If you're brand new to the Figma plugin, the way that it works is it helps you to design emails in Figma, which you can then automatically export to code or various email marketing platforms automatically using the built-in Figma plugin export features. For today, I'm just going to be creating a really simple example, so I'm just going to call this example "Template Test" and click on "Add New Emailify Container." That's going to add a special frame to our Figma file that we can now add components to. You'll notice that there's a bunch of different starter components in the Figma plugin that you can automatically add. This just helps make it easy to create common blocks, but there are a variety of ways to create new content. You can use some of the other features down here to add rows and columns and things like that. There's also some templates. If you want to check out some of the pre-built templates, just click on the new button again, go to "Browse Figma Email Templates," and you can see there's a whole bunch here that you can duplicate for free from the Figma community. For example, this Airbnb template—we can open that up here and see what that looks like. I'll just bring that over to my Figma file here to show you what that looks like.

The important thing to notice, especially if you're focusing on MJML, is that these layers map one-to-one with the MJML structure. What I mean by that is if we go to the MJML site, go to mjml.io, and then go to the documentation part of the website, and go down to some of the components, you can see that the components in MJML are one-to-one with the components in your Emailify designs. What that means is you can see here we've got rows, we've got columns, we've got elements, we've got button elements. You can see down here we've got a button, we've got a spacer, we've got a divider, we've got a text layer, and all of these are mapping up to the MJML components in here. You can see we've got our columns, we've got our divider, we've got our spacer, we've got our text layer—all of these are basically mapped to MJML. This is really important because it's going to show what that's going to look like when it exports to code in a moment.

As I said, you can see here we've got the same structure. We've got a section, which is basically a row. We've got a column, and then inside that column are our content layers. Same in here; we've got our rows, we've got our columns, and we've got our content layers directly inside the columns. The same thing applies for multiple columns. We've got a row, column, column, and content inside of those columns. You can see here when I click on a column, this gives you the option to add these elements to any of those column layers. I can add these navigation links in here, and that's going to map to these navbar links over here. Again, this is a really direct mapping to MJML, and that's going to be important to know once we export this out.

Now that we've got our template, you can preview it by clicking on the preview button in the Figma plugin at any time. This is going to automatically render a real preview of the code in your plugin window before we export it. You can see what it looks like on desktop, and then we can go down to mobile and check that out as well. You can also override some of the styles on mobile too. If you click on any of your layers and click on the settings button, that's going to automatically give you a bunch of different options to apply mobile overrides. For example, text sizes, overriding image styles, padding, border radius—all these different overrides that you can do. I'd encourage you to check those out.

I'm not going to be going into all of the details about how to design the emails in this video, but if you're interested in that, I'd highly recommend checking out some of the other videos on the YouTube channel or going to our documentation site. If you click on the "Start Here" button, this will let you go through all of the documentation. You can see exactly how to create all of the elements and style them, add things like links, dynamic content—everything you'd basically want to know is all found in the documentation site. Again, I'd highly recommend checking that out and also checking out some of the other video tutorials for more of the design content.

Basically, once you've got your design ready to go in Figma and you're happy with how it looks in the Emailify preview, to export it to MJML, all we need to do is click on the "Export HTML" button in the Figma plugin. I'm going to click on that now. You can see by default it's set to export an HTML email, but we're going to change this to MJML source code. Just go ahead and click on the MJML source code under the "Download To Your Computer" subcategory. Click on that, and you can see the little logos change to be the MJML logo. That's looking really good. We only want to export this one template today, so I'm just going to click on this one here.

The last thing we're going to do is upload the image URLs as well. This means that it's going to automatically host the images, so we can just copy-paste the code, and those images are already going to be hosted for us. I'm going to check that. For this example, I'm just going to turn off the minification of the HTML just to make it a bit more readable. Normally, I would leave that on because I want the code to be as small as possible, but this is basically just going to nest the code in a nicer way, so we can read it more easily. I'm going to turn that off for now. Now, again, I'd normally leave that on, but just to show you what it looks like, I'm going to turn that off and then click on "Export to MJML." I've just clicked that button. That's going to now generate all of the MJML code for us. It's going to export all the images, upload those, and then give us a zip file we can download. The code's now ready. I'm going to click on the "Download your .zip file" button, save that to my computer, and if you unzip your zip file and then open up the folder, you'll see this content here.

You can see that we've got our Emailify template, and that's looking really good. We've got our MJML file, we've got our index.html file, which is the compiled version of that MJML file, and we've got our images folder if we need those later as well. Just to show you what this looks like, if we go to the MJML website and click on the "Try it live" link, that will open up this editor over here. This basically lets us paste in or write MJML code, and that will automatically compile it to HTML. That's what MJML does: it takes this source code, transforms it, and compiles it into this production-ready HTML. We're going to have a look at that now for our own code.

I'm just going to paste this in here. If we go back to our folder, find your MJML file, and just drag and drop that in here, we can copy all of that MJML source code, paste it into the MJML code editor, paste that in, and you can see here on the right we've got our email as we'd expect. That's looking really good. You can see all the codes being rendered as HTML, and you can see on the left-hand side here all of the MJML code has been exported. We've got our sections, we've got our columns, we've got our text, and these are all correlating to what we had a look at in the documentation a moment ago. You can see here we've got our section, column, text, and that's exactly what we can see in our code over here. We've got sections, columns, and text, and all of the properties are automatically being populated from our style that we set in Figma. This is all automatic. You don't need to code anything. It's automatically going to generate the MJML for you, and with that one click, you've basically got all of that code written for you. That's looking really good.

Again, we can check out the compiled HTML. MJML is going to compile all this for us, and again, this is basically just an example of what it looks like. You wouldn't necessarily use this email editor in the MJML website to compile your code. There are a bunch of different ways to do that. If you go to the usage panel in the documentation site, the quickest way is to use the online editor, which we were just in a moment ago over here, but what you really want to do is check out some of these other methods. You might use the Visual Studio Code Figma plugin, one of these other text editor Figma plugins, or using a command line tool like Node.js or just a command line prompt. You can basically create a command line interface that you can run commands in to compile the code.

But again, it's really up to you. There are also some other platforms like Loops. Loops.so uses MJML natively, so if you are creating your emails on Loops, you can just upload your MJML file, and that will automatically work. There are a bunch of other platforms that use MJML too. Really, the point of MJML is it's a developer-friendly markup or syntax that can then be edited really easily, and you can then make those changes without having to tweak all of the actual compiled HTML. For example, if we go into here and we wanted to change this heading up here, where we've got "Level up your checkout", we could easily change that text. We could call this, you know, "New heading here", and that's going to automatically update the compiled HTML.

Again, if you're using MJML, you probably know why you're using it, so I'm not going to go through all of the ins and outs of what MJML is and how to use it. But if you are needing the MJML format for your development team or the platform you're working with, this is a really easy way to export it from Figma if you've designed your emails using the Emailify Figma plugin. Again, this won't work if you've already pre-designed your emails before using the plugin. You will need to use the Figma plugin's design tools to help you create that layout again to match the expected MJML formatting. But once you've done that, you can see here there are a bunch of different options. The design flexibility is really high. You can basically create whatever you want. Whatever you could design with MJML itself, you can create using Emailify, and that's going to generate the production-ready MJML code for you to use however you like.

I hope that's helpful. If you're wanting to generate MJML code from Figma, this is going to be a really easy way to go about it with a one-click export. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Marketo using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-07-31T00:00:00.000Z
dateModified: 2024-07-31T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-marketo-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-marketo-using-emailify.md
---

# How to export HTML emails from Figma to Marketo using Emailify

#### Video Transcript

Today I'm going to be showing you a full tutorial on how to export your HTML emails from Figma to the Adobe Marketo platform using the Emailify Figma plugin. 

To get started, we need to go to our Figma file, click on the little "Resources" icon at the top here, and search for Emailify. Under the "Plugins" tab, if you click on the Emailify item, you can run that Figma plugin by either clicking on this run button here or clicking on this little save icon here. That's going to let you run the Figma plugin from your saved Figma plugins list.

I've already clicked on the little "Save" icon, I'm just going to go to my canvas, right-click anywhere, go down to "Plugins", then go down to "Saved plugins" and click on Emailify. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails that you can then automatically export to code directly from Figma. I'm just going to be creating a really simple blank email template today, but you can also check out some of the templates which will let you clone a Figma file that's Emailify ready if you want to kind of reference the kind of designs you can create. I'd also recommend checking out the documentation site, and that'll have all the resources you need for designing the emails in more detail as well.

I'll let you check those out in your own time, but for today I'm just going to be creating a new Emailify frame. I'm just going to call this example Marketo template and I'm going to click on the add new Emailify container button. That's going to add a special frame to our Figma file which we can then start adding components to from the Emailify Figma plugin. For example, we can start adding some of these blocks in here. I can add some headers, I can add some content blocks. You can add hero blocks, all these kinds of different components are instantly added by the Figma plugin and then you can basically go through and customize those in Figma.

As I said, I'm not going to be going through all of the design features in the Figma plugin today. If you're new to the Figma plugin and you want to learn more about how to actually design the emails, we have a bunch of other tutorials on the YouTube channel that I'd recommend checking out along with the documentation site as I mentioned. This will help you do things like add elements and add links and basically go through all of the different features of the Figma plugin and how to design the emails.

For today, I'm going to be assuming that you've already designed your email and we're just focusing on exporting it to Marketo. Once you've designed your email and you're happy with it, you can basically go to the Footers Tab and the last step is just to make sure you've got a Marketo footer added. If you scroll all the way down under the Footers tab to the Marketo option and click on that, that's going to automatically pre-populate the unsubscribe link required for the Marketo email. You can see here if I click on the link layer and then click on the settings button in the Figma plugin, that's been prepopulated with the correct Marketo unsubscribe link.

Once that's all set up, you can preview your email in the Figma plugin by just clicking on this preview button here. That's going to let you load up a real HTML preview of what the email is going to look like. You can check it out on mobile, you can expand that out to desktop to see how the differences look there. As I mentioned, the design features in the Figma plugin help you to create mobile layouts, it automatically does most of the work for you, but if you want to adjust things like the font size or the padding on mobile, you can just go ahead and click on any of these layers in your email, click on the settings button in the Figma plugin, and that will allow you to do things like add font size overrides or padding overrides, all different kinds of overrides for mobile and HTML settings. Again, check all those out in detail in your own time, but for today I'm going to be assuming that you're happy with your design and now we want to get it into Marketo.

I'm just going to close off my preview. We're now just going to click on the export HTML button. I'm going to click on that now and this is going to open up the HTML export options in Emailify. By default, it's just going to export a zip file with your HTML, but we want to click on this drop down and change it from HTML email and go down to platform Integrations, scroll all the way down to the letter M and you're going to see two Marketo options.

I'm going to show you both of these options in the tutorial today. The first one I'm going to go through is just exporting the zip file locally and manually creating the template in Marketo, and then we're going to come back to the Figma plugin and I'm going to show you how to optionally do this via the Marketo API. We'll be able to automatically upload the templates directly from Figma.

The first one we're just going to go through is the Marketo zip option. Go ahead and click on the Marketo zip item there and what we can then do is also enable this add Marketo editable content tags. That's basically going to populate the template with an editable snippet to make your code editable in the Marketo code editor. I'm just going to click on the export for Marketo button in the Figma plugin and that's going to automatically generate the HTML for me, upload all of the images, and it's going to give me this message saying that my Marketo templates have been exported.

Now that we've got that message, we can go ahead and click on the download your zip file button and just save that to your computer. If you open up that zip file and unzip it, you'll get this folder that looks like this. You can see here we've got our folder which is called example Marketo template and that contains our index.html file. This is the content that we just exported. If we open that up in a web browser and drag that in there, you can see that the content we just exported to HTML from Figma is all in there as expected.

What we want to now do is log into Marketo. Go to your Marketo account and just log in. What you want to do is go to the design studio option. You can either click on the menu item up here or click on this little Design Studio tile in your home screen. Once the design studio page loads, what you want to do is go up to this little new icon up here and just click on that and then click on the new email option. Just click on new email and that's going to open up this new tab here. This is going to allow us to upload our custom HTML email that we just exported.

What you want to do is go to the my templates tab up here, click on that, and then click on the blank template. We're just going to create a blank template and we're going to give this the same name. I'm just going to call this example Marketo template and in the description I'll just say from the zip export option just we know which one it is. Then click on the create button in the top right up here.

Once that loads up, you'll see that we'll be able to open up the code editor. You can click on this edit code button up the top here. I'm going to click on that and then what we want to do is copy all of the HTML that we just exported. Just go to your HTML file and the easiest way to do this is just right click anywhere, go down to view page source and you want to select all of that HTML content, copy it to your clipboard. Just copy that with command C or control C and then jump back into Marketo, delete all of the existing HTML in the blank template code editor. Just clear all that out and then we're just going to paste in all of that code we just copied from our exported Emailify template.

Once you've pasted all that in, you can go ahead and click on the save option up the top here. Just click on Save in the top right and that's going to save our custom HTML template. Once this reloads, you can see that we've got our email in here as we expected. That's looking really good and you'll see up in the top right here there's a little snippet under content that says edit email. This means we can basically jump in and edit that content because we enabled that editable content toggle in Emailify.

If I basically just go ahead and click on this area here and just double click on that, you can see that when we load that up we've got this edit email option which actually allows us to edit the content if we want in Marketo. This can be handy if you want to make some small copy tweaks or swap out some links and things like that. You can basically do that through this editor here and you can see if I highlight my button link, this will basically let me add a new link. I can change that URL, click apply and basically just add that in there and that's going to automatically save that to my HTML. You can see that added in there now.

Once you're happy with that, just go ahead and click on Save if you wanted to make any edits and yeah, that's basically it. Now you can add things like your subject line, you can populate that here and you can obviously populate the rest as you normally would in Marketo, but that's the way you can export your HTML to a zip file and manually create a template.

That's basically method one. As I mentioned, I'm going to go through the API method in a moment, but if you just want to export your HTML from Emailify to a zip file locally and manually copy paste that into your Marketo instance as a new email template, that's a really good option just to do a quick import, copy paste it wherever you need, and that's the way you can do that using the zip export function.
Now I'm going to go back to the Figma plugin and we're going to try the API export method instead. What we can do is go back into our export HTML menu. Just click on export HTML again and this time we're going to change it from the Marketo zip option and we're going to use the other option which is the Marketo API option. Go ahead and click on the Marketo API option and this option you can see reveals a few extra Fields. We've got these three Fields: we've got a Marketo client ID, secret, and the rest API endpoint.

If you're wondering where to find these, I'm going to show you that in a moment, but what you want to do for some reference is click on this little find API Keys link and that's going to open up the documentation site with the Marketo instructions. You can see here it's got the step-by-step screenshots and instructions which we're going to go through in a moment showing you how to get those details and populate the Emailify Figma plugin with those credentials. We're basically just going to follow this now. I'm going to walk you through it step by step.

The first step is you want to go to Marketo and go to the admin page. I'm just going to go through these steps with you just we can follow along in the documentation and you can see what each step looks like in there. Okay, I've just gone back to my Marketo homepage and we're basically going to follow along with this documentation here.

What we're going to do is first click on the admin page. We're going to go up to the top here, click on admin, and then once that page loads, you basically want to go down to the web services navigation item. On the left here, if you scroll down you'll see that there's an option called web services. Go ahead and click on web services and once that loads, what we're looking for is the content underneath this rest API section down here.

You'll see that under the rest API it says the endpoint option. You can see here we've got this endpoint option that ends in SLR. Highlight all of that and copy it to clipboard and then go back to Emailify and we're going to paste that into this rest API endpoint section here. Just go ahead and paste that in there and once you've pasted that in there, we're going to go back to the Marketo instance and now we're going to go to the second section which is how to get our Marketo client ID and client secret details.

If you've already gone through these steps which I'll show you in a second, you might actually just be able to skip down to the section at the bottom. You can skip to step 6 if you've already set up these roles and accounts that I'm going to show you now, but if not I'll run through that with you now.

Okay, next I'm just going to go back to the admin page. I'm in the admin page now and this time we're going to click on the users and roles item. If we click on users and roles over here, you can see in the documentation we're going to go to the roles Tab and click on new role. If you go ahead and click on the new role option up here and what we can do is just call this Emailify role API permissions. You can call that whatever you like, I've just named it that for ease of use.

What we want to do is underneath the access API dropdown item which is this one here, you basically want to open that up and scroll all the way down until you see read write assets. Go ahead and click on read write assets then click on Create and that's going to create the new Role for us. You can see here that we've got this new role called Emailify role API permissions. That's the one we just created a moment ago.
Now that we've got that created, what we want to do is go down to the LaunchPoint nav item. If you go to the left hand side here, go down to LaunchPoint and I'm just going to click on that. Once that loads up, you can see in the documentation over here we want to create a new service underneath this new item under installed services.

Up at the top under installed Services, we want to click on new and then we want to click on new service. Underneath new service, you basically want to give this a name that's related to Emailify. In this case, I'm just going to call this Emailify API my service for Figma. What you want to do is change the service option to just be custom. Go ahead and click on custom and once you've done that, you can just give this a description. We can just say this is a service for Emailify.

What you want to then do is select the API only user. This is going to allow you to select a user in your Marketo instance and you need to make sure that their account is an API only user account. You'll know how to do that if you've got your user permissions set up. I've just selected my user which has API permissions and I'm just now going to click create. That's basically going to assign that user to this new service that we just created and that's going to allow us to get our secret and ID.

Now that we've got that new service set up, you can see in the documentation here under the installed Services we want to click on The View details link. You can see our new service here is the Emailify API service that we just created and you want to go ahead and click on this view details link. Go ahead and click on view details and you can see here that underneath the details tab we've got this client ID and client secret. That's exactly the information that we want.

What you want to do is highlight the client ID and copy that to your clipboard and then go back to Figma, paste that into the Marketo client ID field here and then go back to your Marketo page and do the same thing for the client secret. Just highlight that whole client secret, copy that to your clipboard and we're going to paste that into the Marketo client secret field here. Just hit paste and that's going to automatically authenticate with Marketo and you can see here that it's now connected.

You can see that it's found our upload folder. The templates folder for our emails has been found and this is basically going to automatically upload the HTML into that template folder. If you need to change this at all, if you wanted to switch accounts or you entered something in wrong, you can click on this little disconnect icon here and that'll let you change any of these details. If you want to swap out a different user, you can definitely do that, but for now I'm just going to leave that as is. I'm going to paste in that secret again, reconnect it to Marketo, and that's good to go.

Now that we've finished those steps, as you can see in the rest of the documentation which I'm going to walk through now, we're already at the step where we've added our keys and we've added our Authentication. All we need to do now is basically click on this upload to Marketo button. I'm going to click on upload to Marketo and that's going to automatically do the same thing as before. It's going to generate the HTML code, automatically upload all the images, and this time you can see it's giving us a link to our templates folder. Our templates have been uploaded into the Marketo platform.

Go ahead and click on this little templates folder link and that's going to automatically open up the templates folder where the HTML's just been uploaded to. You can see here at the top of the list of our email templates, the example Marketo template has just been uploaded which is the template we just uploaded from Figma. If you click into that, that should load up our template and you can preview it just by clicking on this little preview draft button here and that should load up the HTML that we just created.

There we go, you can see that all of the HTML has been automatically uploaded from Figma into our Marketo templates and that's basically ready to go. You can use that email template however you like. You've got your email actions up here if you need to approve it. I'm just going to click on this approved draft button and I'm going to approve that marketing template. That's just approved that now.

Now if we go into our emails and click on new email and then swap over to the my template section, you can see under here that we've now got our template added in. That's the template that we just uploaded via the Marketo API. We can basically click on that and we can call this new email test. Then with that selected, the template we just uploaded, you can now click on the create button and that's going to automatically create a new email using that template that we just uploaded through Marketo.

As you can see when we double click on this, same sort of thing, we can edit this content as you'd expect. I can save that content and that's looking really good. Because we've got our toggle enabled here where it's adding the Marketo editable content tags as before, this is an editable template.

You'll notice that this screen is exactly the same screen we've landed on using the previous manual upload option where we copy-pasted the zip file contents into Marketo into this little template area here. You'll remember we went into the edit code section up the top here and pasted that in, but this time it's automatically gone ahead and created all of that HTML based on the Marketo template that we just created. We didn't need to manually copy-paste that in and create a new template, we can just select it from the templates that have been uploaded via the API.

Those are basically the two methods I just wanted to run through both of them with you. Some people might find the API method a bit too cumbersome if you don't have those admin permissions to create those roles and accounts. Maybe the zip file option is going to be more seamless for you. But in this case, I just wanted to go through both options in case you do want to be using the API option to make that a little bit more seamless for subsequent uploads directly from the Figma plugin.

I'll leave it there for today. I hope that's been helpful if you're a user of the Adobe Marketo email marketing platform and you've been wondering how to get your HTML emails out of Figma into the Marketo platform, either through the zip method we went through or the API method. These are both different options you can use.

As I mentioned, if you're new to the Figma plugin, you'll need to design the emails in Emailify first. It won't work if you're already creating your emails outside of Emailify. You will need to design them using the tools in the Figma plugin, which again you can find more video tutorials and documentation for on our website. You can go to the start here page and just start really digging into all the documentation. There's also a few dozen full video walkthroughs like this one for doing all sorts of different design tasks and upload tasks and mobile optimizations and everything like that, please do check that out. I'll leave it there for today. Thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Figma file migration checklist
description: A migration checklist for teams moving design files into or out of Figma.
datePublished: 2024-07-21T00:00:00.000Z
dateModified: 2024-07-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-figma-file-migration-checklist/
markdownUrl: https://www.hypermatic.com/articles/convertify-figma-file-migration-checklist.md
---

# Figma file migration checklist

A migration checklist for teams moving design files into or out of Figma. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for figma file migration checklist when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Convertify fits into the process

Convertify helps in this workflow because format migration is usually expensive in all the wrong ways. A conversion-focused workflow makes legacy files easier to reuse without rebuilding everything from scratch.

With Convertify, teams can usually:

- reduce manual rebuilding when files come from other tools
- make migration and legacy-file work more practical
- keep format conversion from turning into a full redesign job

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Convertify](/convertify/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If design files need to move between tools, Convertify is the obvious starting point. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to export HTML emails from Figma to Mailercloud using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-07-13T00:00:00.000Z
dateModified: 2024-07-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-mailercloud-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-mailercloud-using-emailify.md
---

# How to export HTML emails from Figma to Mailercloud using Emailify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Mailercloud platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top, and search for "Emailify". Under the "Plugins" tab, click on the Emailify result. You can run that Figma plugin by either clicking on the run button here, or I'd recommend clicking on this little "Save" icon. This will let us run the Figma plugin from our saved Figma plugins list.

I've already clicked on that save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on Emailify. That's just going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, it helps you design HTML emails in Figma, which you can then export to production-ready code automatically with one click.

Today I'm just going to be creating a really simple example. I'm going to call this an example template and click on the add new Emailify container button. This will add a special Emailify frame to your page that we can then start inserting components into. I'm not going to be going through all of the design features today in this tutorial. If you're interested in learning more about that, you can check out some of the other video tutorials on the YouTube channel or go to the documentation site, where there's heaps more information. Today I'm just going to be keeping this really simple and creating a template using some of the predefined components without customizing them. If you were adding your own, you would customize the content and design in Figma, but for today I'm keeping it simple.

Once you've got your main template and components set up, go over to the footer tab in the Figma plugin and scroll down to the letter M. Find the Mailercloud option and click on it. This will automatically add the footer component with prepopulated "unsubscribe" and "view in browser" links. We can inspect those by clicking on the link layer, then going to the settings button in the Figma plugin. You can see it's automatically pre-populating the URL to be the "unsubscribe" link for Mailercloud along with the "view in browser" link. These dynamic links will get swapped out automatically when you send this email via the Mailercloud platform.

Once you're happy with that, you can preview the email by clicking on the preview button in the Figma plugin. This loads up a real HTML preview of what the design will look like when exported to code. You can swap between mobile and desktop to see how it looks. That's looking pretty good. Again, I'm not going to go through all of the features today, but if you want to, you can add optional mobile overrides. For example, you could click on a component, click on the settings button, and specify padding, or if you're in a text layer, you can change the font size or line height for your mobile designs. But today I'm leaving this all as default and am happy with the preview.

Once you've finished previewing your email, close out of that, and now click on the export HTML button. Click on export HTML, change this HTML email option, click on that, go down to platform integrations, and scroll down to the letter M. Click on the Mailercloud option, and you can see Mailercloud is now selected. Add your subject line and the preheader text. The preheader shows up next to your subject line when viewing it in Outlook or Gmail. This will automatically get added to your HTML template. We need to read the subject line in Mailercloud in a moment, but also add it into the Emailify Figma plugin as it automatically populates the title tag, visible when someone uses the "view in browser" link. Add that here and into the Mailercloud platform.

Once we've finished with our subject line and preheader text, click on the export for Mailercloud button. This will automatically export all the HTML and images for us and give us the code to download. Click on this download your zip file button, save that anywhere to your computer, and unzip the file. You'll get a new folder, which will look something like this. Inside it, we've got our HTML, a previews page to preview the content, and you can drag and drop that into the browser to see how it looks on desktop and mobile easily. The code we're going to use is inside this nested folder. The example template is named the same as our Figma frame, matching whatever you've called your frame in Figma. When we open that file in our browser, it will open up the HTML design we'll use in the Mailercloud platform.

Down here, it's telling us we can now create a new campaign in Mailercloud and then copy and paste that HTML into the code input. Log into Mailercloud manually or click on this create a new campaign link, opening the correct page automatically. We’re now in the Mailercloud.com site. I'm already logged in, and it’s taken us to the create campaign page automatically. Call this test campaign, and take the subject from the other input. Call this one test subject, which we used in the Emailify Figma plugin. Select your sender ID. Assuming you've already set the sender ID up in Mailercloud before, you won't be able to create a campaign until you've created a sender, so make sure that's set up first.

Click on the choose email template button on the right-hand side, and select the HTML editor option. Avoid the other ones and jump right to this one where we can copy and paste our HTML code. Click on the HTML editor option, and you'll get this HTML code input here. The easiest way to get our HTML in there is to go to the folder we were just looking at, take the index.html file, and drag and drop that over here. This will automatically drop all of that HTML code into our Mailercloud editor. All the code that we exported is in here now. Click on continue, and you can see it’s loaded up our HTML as expected. This looks the same as it did in Figma, which is great. You can see it on mobile and desktop, preview that in here as well if you want, but once that’s set up, click on Save and continue, and that will save your template.

I'm not going through the whole campaign sending method, but you can send this to whatever lists you like. I wanted to take you through the initial step of uploading your HTML template. Now you can send out any custom HTML template designed in Figma with Emailify and quickly drop that into your Mailercloud platform. You'll be able to send that out as a custom designed HTML email to any lists in the Mailercloud platform. 

That's basically it. I hope that's helpful if you use the Mailercloud platform and have been wondering how to make it easier to design totally custom HTML designs. This is a great way to streamline your workflow from Figma directly into the Mailercloud platform. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: The Low End Theory
description: A mid-year, independence day update on what we've been up to in 2024 so far, and what's on the horizon.
datePublished: 2024-07-04T00:00:00.000Z
dateModified: 2024-07-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/the-low-end-theory/
markdownUrl: https://www.hypermatic.com/articles/the-low-end-theory.md
---

# The Low End Theory

As with the last mid-year update, this [Low End Theory](https://www.youtube.com/watch?v=ZWVoht3RZ68) update also falls on July 4th. Even though Hypermatic is based in Australia, and not the United States (or Japan, as some seem to think, based on the design of this website), I do like the idea of doing these mid-year updates on Independence Day, and re-focusing it on continuing to declare our independence from legacy design/development workflows.

### Plugin update highlights in 2024 (so far)

There are multiple updates and small fixes shipped to multiple Figma plugins on a daily basis, but here are some cool highlights from the first half of 2024:

- Added [Superscript & Subscript support](https://x.com/hypermatic/status/1803946175357424068) to Emailify
- Added [Lottie support for Google Ads](https://x.com/hypermatic/status/1803593059596112275) to Bannerify
- Added [Custom Image Hosting](https://x.com/hypermatic/status/1801819774621782238) to Emailify
- Added [Insider integration](https://x.com/hypermatic/status/1796380701425901577) to Emailify
- Added [Blend Modes support](https://x.com/hypermatic/status/1796000421292519466) to Bannerify
- Added [Image → Vector imports](https://x.com/hypermatic/status/1792430203559649358) to Convertify
- Added [Icon Buttons](https://x.com/hypermatic/status/1791674548334821649) to Emailify
- Added [PowerPoint File Importer](https://x.com/hypermatic/status/1791674548334821649) to Pitchdeck
- Added [Markdown support for Content Syncing](https://x.com/hypermatic/status/1784385014970691694) to CopyDoc
- Added [Scale Mode presets](https://x.com/hypermatic/status/1783709452308529609) to Commentful
- Added [Airtable Sync support](https://x.com/hypermatic/status/1781092848257150989) to CopyDoc
- Added [iOS Splash Screens](https://x.com/hypermatic/status/1780850225994928605) to Favvy
- Added [Auto-Repeat for Spreadsheet Syncing](https://x.com/hypermatic/status/1780786741185823177) to CopyDoc
- Added [Transparent GIF Detection](https://x.com/hypermatic/status/1775330871513645327) to Emailify
- Added [Toolbar Toggle](https://x.com/hypermatic/status/1774931764039106869) to Pitchdeck
- Added [GIF support](https://x.com/hypermatic/status/1774649559937065469) to Commentful
- Added [Larger Window Size option](https://x.com/hypermatic/status/1768513248570294550) to Commentful
- Added [improved Image Compression](https://x.com/hypermatic/status/1765933003845583297) to Bannerify
- Added [Outlook support for Gradient Buttons](https://x.com/hypermatic/status/1764493446533005719) to Emailify
- Added [Image Scale Overrides](https://x.com/hypermatic/status/1762344274514026943) to Bannerify
- Added [CSS Drop Shadow support for Buttons](https://x.com/hypermatic/status/1761153482978181429) to Emailify
- Added [CSS Gradient Buttons](https://x.com/hypermatic/status/1760842358617436162) to Emailify
- Added [copy/pasteable Email Signature exports](https://x.com/hypermatic/status/1759375912305561924) to Emailify
- Added [Approval Statuses](https://x.com/hypermatic/status/1758336067714044243) to Commentful
- Added [grouped text Localizations](https://x.com/hypermatic/status/1751079870283887016) to CopyDoc
- Added [HTML size optimizations](https://x.com/hypermatic/status/1750684745535770799) to Emailify
- Added [Auto-Layout linting](https://x.com/hypermatic/status/1748537106165543300) to Emailify
- Added [Plain Text exports](https://x.com/hypermatic/status/1747052614238531864) to Emailify

### Overhauling the Documentation Site

The biggest project for the first half of 2024 was completely updating the Hypermatic [documentation site](https://docs.hypermatic.com/), which had been gradually getting out of date, as it was being updated ad-hoc over time whenever a new feature was introduced into any of the plugins, which meant that all the videos had slightly (or largely) different looking UI in them.

It's always sad and disappointing to me whenever I come across documentation for software that's totally out of date or has been neglected to the point where the content in the documentation doesn't match up with the current reality of the product it's trying to provide context or help around.

To avoid falling into this trap, I decided it would be a good time to completely restructure, refactor and add to the documentation site for all of our products, including re-recording every single video screencap for each page and subheading throughout the docs site; this meant recording and editing hundreds of short forms videos across the 12 different Figma plugins.

The update started with migrating the underlying docs platform from VuePress to Mintlify, which offers a better way to organize content and make it easy to find, and was a great opportunity to re-think how the documentation for each plugin was structured.

The project started at the start of January 2024, and finished up with the last plugin's docs and video screencaps being completed at the end of June 2024. The end of the project was bitter-sweet, as 2 weeks after completing the overhaul and having all of the video screencaps up to date, Figma announced that the app's user interface had just been completely re-designed, and would be rolled out to all users over the coming months.

The good news is that _most_ of the content in the documentation videos are centered around the UI of the Figma plugins, rather than the Figma app UI itself; although, the Figma UI is prominent in all of the videos and does often get referenced as part of the instructions for completing a certain task or using a certain feature. At this point, I think we will leave the new videos "as-is", until the new UI is completely rolled out and finalized in the Figma app, and then we can re-assess and decide if it's worth re-recording some or all the video screencaps again to reflect those changes.

Either way, the documentation content itself and the way it's structured is way better than the previous version, so I think it was great to get it all updated in one big marathon to have a totally up to date and consistent place to find information about any feature in any plugin.

### Avoiding "Enshittification"

There's always a fine line between shipping new features or software updates that deliver real value to customers, and shipping updates that end up making the product overcomplicated or worse over time. One _trendy_ (the American Dialect Society selected "enshittification" as its 2023 Word of the Year) term for this that has been coming up lately is [Enshittification](https://en.wikipedia.org/wiki/Enshittification), and while a lot of the discussion is around products doing what's best for themselves at the expense of their customers, I think similar outcomes can happen just due to a lack of care or intentionality about keeping the software useful for the customers that use it regularly to solve some problem that they find your product useful for.

I've always tried to be vigilant with keeping our Figma plugins as simple as possible and keeping them focused on the core problems it was originally designed to help solve. This has meant saying "no" to a lot of good (and not so good) ideas or suggestions/wishes from customers. It's really easy to say "yes" to everything, but things ends up with software becoming "all things to all people", and loses some of what made it what it was originally.

There's a common saying that "software is never finished", which is true, because the dependencies of that software often have to be updated and maintained in order to continue functioning properly. However, lots of this work usually happens behind the scenes, so from that perspective I do think you can have something closer to "finished software" from a users perspective, in the sense that there aren't many big interface updates that would be noticeable for a regular user of it. 

Maybe these updates happen gradually, or are appended to existing parts of the user interface (for example, adding more "Export" options to an existing drop down selector menu), where the functionality is still being enhanced, but not at the cost of resetting the users muscle memory for using the product by redesigning or cluttering the interface with brand new elements.

There are some examples of software that I use, where I only use the core features that haven't really changed much over the last decade (from a user facing perspective), and I would be fine with them basically staying the same for the next decade, where the functionality remains mostly stable, with most of the work going into the performance behind the scenes:

- Google Docs/Sheets
- Gmail
- Slack
- Git
- Handbrake
- FileZilla

While the examples above can't be considered "done", and have lots of open and closed source designers and developers working on them, I think there is something to be said for products that try to do a couple of things really well, without splitting it off into a bunch of other directions, or adding in new features that maybe 1% of the customer base might find useful for the sake of it.

Another one I came across is [Wordstar](https://josem.co/the-beauty-of-finished-software/), a word processor from the 1980s that George R.R. Martin used to write “A Song of Ice and Fire”:

>It does everything I want a word processing program to do and it doesn't do anything else. I don't want any help. I hate some of these modern systems where you type up a lowercase letter and it becomes a capital. I don't want a capital, if I'd wanted a capital, I would have typed the capital.

_- George R.R. Martin_

The reason I've been thinking about this is partly related to the documentation overhaul I mentioned above, where there were so many interface updates for all of the products over the first 3-4 years (because there was so much to build) that the "real time" documentation led to most videos having a slightly different interface than the ones before it.

Now that I'm really happy with where the Figma plugins are in terms of functionality and usability, I think the instinct needs to shift from shipping new features like crazy (including any UI updates that brings), to trying to be more mindful about how to add value without degrading the consistency of the experience for the thousands of designers who are already used to them. 

To me, this feels like the right balance; for example, our Convertify Figma plugin already has a user interface that allows you to click on drop down selector, choose the import or export format you need, and then click one button to start the conversion process. This interface has already been designed to handle more formats and conversion options, without needing to altar the entire interface to add that value to the user; all of the extra functionality can be shipped behind the scenes, and the only additional visual "clutter" is one more dropdown option inside an interface that the user is already familiar with.

### Platform Risk

There are some great benefits that come with building on top of an existing platform, especially as a small team, but there are also inherent risks that come along for the ride.

Back in the early 2010s, Zynga was a social game developer that was highly dependent on Facebook for its user acquisition and revenue. In 2012, Facebook changed its platform policies, which reduced Zynga's visibility and access to user data. This led to a significant decline in Zynga's user base and revenue, where they lost nearly half of their daily active users in one year.

Another example was TweetDeck, which was a popular social media dashboard application that relied heavily on Twitter's API. When Twitter decided to change its API terms and conditions, limiting third-party clients' capabilities, TweetDeck's functionality was severely impacted (Twitter eventually acquired TweetDeck to control its development and integration).

Closer to home, we built a Figma plugin called Pitchdeck, which helps designers create, export and present slide decks from their Figma designs. Last week, at Config 2024, Figma announced a brand new product called "Figma Slides", which takes some of the additional features that Pitchdeck offered (eg. slide notes, animations, Figma Prototype embeds etc) and delivers them in a really nicely designed new product under the main Figma app (similar to the previous "FigJam" product released a couple of years ago).

While it doesn't mean that Pitchdeck is irrelevant now, there's surely a subset of current and potential Pitchdeck users who will find that Figma Slides has all of the features that they personally need, and will decide to use that instead.

The focus for Pitchdeck (and all of the other plugins), then, is to try and focus on the areas where it's differentiated and continue to deliver the most value to our customers there, as an alternative for anyone who is after features that the Figma plugin offers over the native experience.

### Antifragility

With the topic of platform risk fresh in mind, it has also made me think about Weblify, which is a Figma plugin currently in BETA that I've been working on to become more of a fully fledged website builder. Knowing that Figma's mission is "going from idea to design to production", it seems inevitable that (similar to "Figma Slides"), the future will contain something like "Figma Sites" where you can publish or deploy content designed for the web to a production server somewhere.

Similar to when Adobe XD went into maintenance mode, I don't really want to be caught out trying to develop something that is going to be superseded or made irrelevant on a long enough timeline. 

As I've written about multiple times in previous updates, this is also a key reason why I've actively avoided trying to cram AI features into any of our existing Figma plugins, because if you had worked on these features as part of a Figma plugin any time over the last 18 months, most of [that AI functionality is now going to be native](https://www.figma.com/ai/) in the main Figma app, essentially wiping out the need for those third party plugins.

I don't think it's wrong to add AI features where they make sense, but they should be antifragile, where improvements in intelligence or native AI features should make them even more valuable, rather than redundant.

I think the same is true for creating any of website builder product, where it needs to be designed in a way that's differentiated enough and solves real problems in a way that would still be useful even if Figma made a new baby that morphed it with Framer or Webflow in some way.

### Ensuring sustainability over the long term

Based on the thoughts above on platform risk, AI and the importance of antifragility, I want to take a bit of time to rethink the direction I've been working on for Weblify. If I'm going to be dedicating a large amount of time over the coming years on a new product, I think it's important to make sure the initial compass direction is pointing in the right way before charging full-steam ahead into building product again.

In a similar vein, after essentially working non-stop (not taking a full day off since December 2019) on Hypermatic for almost 5 years, and because I have a strong background in design/development, most of my work time has been super focused on building and shipping new product updates to keep up with the internal roadmap for all of the Figma plugins and solving real recurring problems that come up from talking to users every day.

Maybe it's partly related to the bitter-sweet result of finishing 6 months of documentation videos only to have the user interface in them completely change shortly after (and feeling a bit low about the prospect of re-recording/editing hundreds of video screencaps again), but for the first time, I'm feeling the need to pause and reflect a bit more to gain some perspective on where best to spend my time on the business to ensure we're delivering the most value to our customers over the long term.

Thankfully, I haven't really felt properly burnt-out before, but I've heard enough horror stories from other founders of it creeping up on them to know that working 7 days per week for 5 years straight may not be the best strategy for the next 5 years; so I'm going to experiment with trying to give myself more time away from the screen on weekends (instead of just working both days over the weekends) while our customers are also enjoying their weekends (and don't typically have as much need for support) and use that time to let my mind wander a bit more and provide some mental space for generating new ideas.

Along with this, I also think it's time to adjust the ratio of time spent on development and marketing; like any developer, marketing is often riding along in the backseat compared to writing code and shipping new things, but I'm after working on the plugins for 5 years, I'm really happy with where they're currently at, and I feel much more comfortable with marketing them more, especially talking to so many users who are finding value in for automating their real workflows them each day.

I'm looking forward to trying out some new ideas and marketing channels to see what works; but maybe more importantly, I'm excited to add more balance to my usual mode of being hyper product focused all of the time. Of course, I'll still be coding and shipping new features and improvements to the Figma plugins, but I really want to try at least making this a 50/50 split with marketing.

I'll report back with the results in my next update!

---

---
type: article
title: Convert design files between Figma and Adobe tools
description: A practical way to move design files between Figma and Adobe tools with less rebuilding.
datePublished: 2024-07-03T00:00:00.000Z
dateModified: 2024-07-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-convert-design-files-between-figma-and-adobe-tools/
markdownUrl: https://www.hypermatic.com/articles/convertify-convert-design-files-between-figma-and-adobe-tools.md
---

# Convert design files between Figma and Adobe tools

A practical way to move design files between Figma and Adobe tools with less rebuilding. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for convert design files between figma and adobe tools when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Convertify fits into the process

Convertify helps in this workflow because format migration is usually expensive in all the wrong ways. A conversion-focused workflow makes legacy files easier to reuse without rebuilding everything from scratch.

With Convertify, teams can usually:

- reduce manual rebuilding when files come from other tools
- make migration and legacy-file work more practical
- keep format conversion from turning into a full redesign job

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Convertify](/convertify/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If design files need to move between tools, Convertify is the obvious starting point. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: Figma to Illustrator workflow for marketing teams
description: How marketing teams manage Figma-to-Illustrator workflows when assets have to move between tools.
datePublished: 2024-06-16T00:00:00.000Z
dateModified: 2024-06-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-figma-to-illustrator-workflow-for-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/convertify-figma-to-illustrator-workflow-for-marketing-teams.md
---

# Figma to Illustrator workflow for marketing teams

How marketing teams manage Figma-to-Illustrator workflows when assets have to move between tools. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for figma to illustrator workflow for marketing teams when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Convertify fits into the process

Convertify helps in this workflow because format migration is usually expensive in all the wrong ways. A conversion-focused workflow makes legacy files easier to reuse without rebuilding everything from scratch.

With Convertify, teams can usually:

- reduce manual rebuilding when files come from other tools
- make migration and legacy-file work more practical
- keep format conversion from turning into a full redesign job

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Convertify](/convertify/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If design files need to move between tools, Convertify is the obvious starting point. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to export HTML emails from Figma to Ongage using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-06-08T00:00:00.000Z
dateModified: 2024-06-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-ongage-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-ongage-using-emailify.md
---

# How to export HTML emails from Figma to Ongage using Emailify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Ongage email marketing platform using the Emailify Figma plugin.

To get started, go to our Figma file, click on the resources icon at the top here, and search for Emailify. Under the Figma plugins tab, click on the Emailify result. You can run the Figma plugin by either clicking on this run button up here, or I'd recommend clicking on this little save icon here, which lets you run the plugin from your saved Figma plugins list. I've already clicked on that save icon, so I'll go to my canvas, right-click anywhere, go down to Figma plugins, then saved Figma plugins, and click on Emailify. This will run the Figma plugin we saved a second ago.

If you're new to the plugin, it helps you design HTML emails in Figma, which you can then export to production-ready code automatically. In this case, we're uploading it to the Ongage platform. I'm creating a new email and calling it "example template." Click on the "add new Emailify container" button to start adding components and design elements into the email frame.

I'm not going through all of the design features in the Figma plugin today. If you're new to the plugin and curious to know how to use all the features, I'd recommend checking out a couple of the other videos on the YouTube channel or going through the Emailify documentation site. For today, I'll keep it simple and add a few component blocks, which we can then upload to the Ongage platform.

I'm adding a few bits of content here without customizing any of it today. Once you're happy with your design and you've customized it with your content and branding, click on the footer option. You have this footer tab over here; click on that and scroll down until you reach the letter "O." You'll notice an option for the Ongage platform. Click on the Ongage footer component, which will automatically add a footer with the unsubscribe link and address tag automatically populated.

You can see the address tag here, which will get pre-populated later. Importantly, we also have the navigation unsubscribe link. Click on that link, then click on the settings button in the Figma plugin, and you'll see it's automatically pre-populated with the unsubscribe link for the Ongage platform. You can customize that footer however you like, but it's worth going through that footer option to quickly add those links without finding them each time.

Now that we've got our design in Figma, we need to preview it. Click the preview button in the Figma plugin, which loads a real HTML preview of what the email will look like on mobile and desktop. It's responsive, and if you want to add some overrides to any of these elements, click on the element, go to the settings panel, and you can change things like font size, padding, or other bits and pieces for your mobile style overrides.

I'm not going through all of these in detail today, but they're available for you to customize the design on mobile. Once you're happy with the preview and think it looks good, close that preview window, then click on the export HTML button. Click on export HTML, change the default HTML email option, scroll down to the platform integration section, and find the letter "O." Click on the Ongage option. Now that we've selected the Ongage option, add our subject line. I'm calling this subject "test," and also our preheader. The preheader text gets added after your subject line when your customer or user opens that email in their client, like Gmail or Outlook. Put in whatever preview or preheader text you want to include here, and it gets automatically included in the HTML.

Once you've added those, click on the export for Ongage button. This automatically generates the production-ready HTML, uploads those images, and gives us a zip file to download. Once the confirmation message pops up, click on the download your zip file button, then save it anywhere. I'm saving it to my desktop. If you unzip that file, you'll get a folder with a couple of different files. The preview file is just a preview HTML file that you can use to check out all of your emails in one place. For example, if we open that up, you can see what it looks like. Drag it in here, and you can see it's a nice little preview page showing the desktop and mobile version. This is really good for reviewing the emails.

For actually uploading them, the file we're interested in is inside of this example template folder. You'll notice that it's named the same as what the frame was called in Figma. The frame was called "example template," so your folder will be named whatever you've named the template. The file that contains our HTML template is this index.html file. We can have a look at that by dragging it into the browser. We're going to come back here in a second to copy-paste that HTML into Ongage.

The next step is to log in to your Ongage account. If you've logged into your dashboard, go to the campaigns section. Click on the campaigns menu item, then click on the new campaign button at the top right. Click on the email option. Once the new email screen loads up, give your message a name. I'm calling this one "test email message for today." Populate things like your sender name, addresses, and all that stuff. Fill that out as needed, then click on the next button down here. This brings us to our new email page, where we can add things like the subject line and our HTML.

Copy the subject that you added in the Figma plugin and paste it into Ongage. The reason for that is that it adds it into your title tag, but it's also needed to send that out through Ongage. Just make sure those are the same. If you've already added your preheader text in Emailify, you don't need to add it again in Ongage. If you do add it again, it gets doubled up. I recommend just doing it in the Emailify Figma plugin and not bothering about leaving this field populated.

Now that we've got those filled out, swap this over to HTML. It will be WYSIWYG by default; click on the HTML tab. Now we've got access to the raw HTML content. Going back to the file we opened a moment ago, which was the index.html file, take that index.html file, open it in a code editor or your browser, right-click in your browser, go down to view page source, and click on that. Copy and paste all of that HTML from this file. Select all of it, copy it to your clipboard, then go back into Ongage. Delete all of this HTML content, and paste in our own HTML instead.

I've pasted all of that in, and it looks really good. Importantly, uncheck this "Auto beautify HTML" option. You don't need to turn that on, just in case it messes up any of the HTML code, which we've already gone ahead and minified for file size optimization. Now that we've added our HTML, proceed by either clicking on save or clicking on next. I'm clicking on next, and this saves that template for us. You can see the email was successfully updated, and it also created a text version from the HTML automatically. This looks really good.

The last thing we need to do is give our campaign a name. Call this campaign name whatever you want. I'm calling it "campaign name test." Add all these other fields yourself, then start adding whatever lists you want to include for your campaign. If you're a user of the Ongage platform, you've probably gone through this step before, so I won't run through all of that today. You can also send a test to yourself. This is probably a good idea if you want to check out what the HTML looks like, or use a service like litmus.com, which lets you send a test to Litmus and see how it looks on all the different platforms.

This is basically all good to go. Once you've added your list, go down here and click on schedule. This takes you to the final step, allowing you to schedule the campaign. You can either send it out immediately or schedule it for a future date. That's basically it. I'm not going to send this out for now. I just wanted to run through the design part mostly, to show you how to import your custom HTML that we exported from Figma into the Ongage platform. This is the best way to go about it: copy and paste the source code from the index.html file into the HTML tab in Ongage. This allows you to have a custom HTML email.

You can also click on the WYSIWYG tab, which allows you to change the text. You can change this to something like that, and make small tweaks if needed. For big design changes, I would personally go back to the Figma file, change them there, re-export the HTML, and copy-paste that index.html file into the Ongage HTML tab. For quick text tweaks, you can use the WYSIWYG editor, which should be fine too.

I hope this has been helpful. If you're an Ongage user wanting to create custom HTML emails from Figma and export them for the Ongage platform, hopefully, this will be a workflow improvement. Thank you, as always, for watching. We'll be back soon with more Figma tutorials like this one shortly.

---

---
type: tutorial
title: How to export HTML emails from Figma to SendX using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-06-07T00:00:00.000Z
dateModified: 2024-06-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-sendx-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-sendx-using-emailify.md
---

# How to export HTML emails from Figma to SendX using Emailify

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the SendX email marketing platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top here, and search for Emailify. Under the "Plugins" tab, if you click on the Emailify item, you can run the Figma plugin by either clicking on this "Run" button here or, I'd recommend, clicking on this little "Save" icon here. That's going to let you run the Figma plugin from your Figma plugins list. I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved Plugins," and click on the Emailify item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails that you can then automatically export from Figma to production-ready code. In this case, I'm just going to give this an example of a SendX template, and I'm just going to click the "Add New Emailify Container" button. This is going to allow us to start designing our email. I'm not going to go through all of the design features in the Figma plugin today. If you're new to the Figma plugin and you're interested in learning about those, I'd recommend checking out a couple of the YouTube tutorials on this channel or going to the documentation site. That has steps for all the ways you can customize your designs.

Today, I'm just going to be creating a really simple template without any content or design customization, just to run through what this would look like if you export your template to the SendX platform. I'm just going to add a few components, and once you're happy with your design, the last thing you want to do is make sure you go to the "Footer" tab. If you scroll all the way down to the letter "S," you'll see that there's a SendX option. We've got this SendX footer option here. Go ahead and click on that, and that's going to automatically add this footer component with the unsubscribe link and viewing browser link pre-populated. If I click on the link layer here and then click on the settings button in the Figma plugin, you can see that it's been pre-populated with the unsubscribe link tag and the viewing browser link tag. These are good to go. These are going to get swapped out by SendX once we upload the template in a moment.

You can obviously customize the design of this footer, but that's just a really easy way of getting those links automatically added without having to find them each time in the documentation. Now that we're happy with our design, you can preview the HTML just by clicking on the "Preview" button here. That's going to load up a real HTML preview of what the email is going to look like when it gets sent out. You can toggle between mobile and desktop, so you can see what it looks like on both. There are also some options to customize things like mobile design overrides. If you click on the settings button and then click on any of your layers, you'll get all these different options to override things like padding and font size and showing and hiding elements on mobile and desktop.

I'm not going to go through all of this today. Feel free to check out the documentation if you're interested in playing around with those. Now that we've got our template designed the way that we want, I'm just going to close off this preview and click on the "Export HTML" button in the top right of the Figma plugin. Go ahead and click on "Export HTML," and then what we want to do is change this default HTML option from this one here and scroll down to platform integrations. Again, scroll down to the letter "S" until you find the SendX option. Click on SendX, and once you've got that selected, you can then populate things like your subject line. We can just put in a subject line here and add preheader text. The preheader text is what shows up after the subject line in your email client. When you're opening up the email in Outlook or Gmail, this is the text that shows up underneath or next to the subject. Populate those two fields, and then when you're ready to go, just click on the "Export for SendX" button. When you click on that, it's going to automatically upload all the images, generate the HTML code, and you'll get this message when it's ready to go. It's telling us that the code is ready for SendX, so we can download that here.

Go ahead and click on the "Download Your Zip File" button, and what you want to do is save that to your computer. I'm just going to save it to my desktop, click on "Save," and then if you just unzip that file, you'll get this folder here. This is the inside of the zip file that we just downloaded. There are a couple of different files here. There's a previews page, so if you want to see a preview of all the emails you've exported in one place, you can open up that. But for today, what we're really interested in is the actual index.html file here, which contains the email that we just exported. You can see that it's in a folder with the same name as our Figma frame. Just find whatever the Figma frame you named in your Figma file and match that up with the folder in your zip file. Inside of that, you'll see the index.html file.

Now that we've got that file exported, we're going to go into our browser and load up the SendX dashboard. If you're a SendX user, you want to go to SendX.io and log into your account. You'll be greeted with the dashboard screen here. What we want to do now to upload the template is click on your username in the top right of the page and then go down to "Settings." You'll see this little settings icon, click on that. Once that loads up, you want to change this tab up the top here to "Templates." Click on the "Templates" tab up here, and you'll see a button called "New Email Template." Go ahead and click on that "New Email Template" button. Once that new email template page loads up, you can go ahead and give that a name. I'm just going to call this "SendX Custom Template." You can call it whatever you want, this is just an example. Down here in the email body, what we want to do is delete these predefined rows. Go ahead and click on each of these rows, then click on this delete icon and click on this one again until you can see this "Drop Content Blocks Here" section. That means that the template is now empty, and we can add our own content.

Before we do that, the first thing I want to show you is just how to extend the width of this email. You'll notice that it's actually quite narrow. The reason for that is if you go to this settings tab over here, you'll see that the content area width is set to 500 pixels by default. You'll notice that in our Figma file, our email is actually 600 pixels. What we need to do first before we add our HTML is just to go back into SendX again, click on this settings tab over here, and before we paste our content in, just change this from 500 and drag that all the way up to 600. This is now going to match our Figma design at 600 pixels wide, and in SendX, it's also now 600 pixels wide. That's all good. Now we can go back to the content tab, and under the content tab, if you just scroll down, you'll see this little HTML tile. What we want to do is drag and drop that HTML tile into this content blocks area. Just let go of the block when you're hovering over that, and that's going to add this little content block here.

We want to replace this HTML with the HTML code that we just exported from the plugin, located in this index.html file here. The quickest way to get the source code for that is just to open up a new browser window and drag and drop your HTML file in there. You can see that's loaded up our preview here. All you need to do is right-click anywhere in the body area here, click on "View Page Source," and then you can copy and paste all of this to the clipboard. I'm just going to select all of that and copy it to my clipboard. Then, if you go back to SendX, delete all of this predefined HTML content under the content properties window. Delete that, and you can see that's removed it from there. Now we're going to paste all of the HTML we just copied. Paste that into here, and you can see our HTML has now been added in. That's the way you can paste your HTML into SendX. Unfortunately, there's no easier way to do it. You do have to go through those couple of steps of setting the width and pasting in the HTML content into this block here. Once you've done that, it should basically be good to go.

Now we can go ahead and click on this "Submit Template" button down here, and that's going to save the template for us. Now that we've got that added in, you can see that the content has been added and is letting us preview it here. We can just go ahead and click on the exit button, and then now we can go back to our campaign section. If you go to "Campaign" in the top menu here and click on "Create Newsletter Campaign," you can give that a name. I'm just going to call this "Test Campaign" for today. Once you've added that, go ahead and click on "Next." You can see down here, if we go to the custom template option, you can see that we've got our SendX custom template which we just added a moment ago. To select that, just click on the "Apply Template" button and then click on "Apply Template" again. You'll notice down here that it's got this little check mark, so it's selected our custom template. Then we can go to next, and that's going to take us to the content screen. Again, this is going to load up that editor again, but this time it's going to give us the HTML that we added previously.

You can see we've got this custom HTML block in there, and that already contains our custom template. If we click on that, all of the HTML content is in here, and that's what that's looking like there. Because we've already added this template, we don't need to do anything in here again. If you'll notice, the settings panel is still set to 600 pixels, so just make sure that's still the case, it should be. For the email subject, you just want to add in whatever you added in the Figma plugin. We just added a thing called "Test Subject." You do want to copy-paste that subject line into here. If you've already added your email preview text in the plugin, so we already added preheader text here, you don't want to reuse that in SendX. If you've already added it in the plugin, that's going to add it to your HTML code, and it's already going to work as expected. If you add it again into here, that's going to double up the preview text that we've already added. If you've added it here, you don't have to add it into SendX.

I'm pretty happy with that. I'm just going to save that by clicking on "Next." Again, this is going to take you to all the normal steps you'd be used to if you're a SendX customer. In this case, I'm just going to send it to all email contacts and click on "Next." This would allow me to schedule the email for later or send it out now. Usually, you want to send a test to yourself as well, so go ahead and click on the "Send Test" button down here. I would send a test to myself. In this case, you could add your own email address and send a test. You always want to do that before sending out the full campaign. Again, if you're a SendX user, you're probably already familiar with your own workflow, and I'm not going to have to go through those extra steps today.

That's basically it. I just wanted to show you how to design and export HTML emails from Figma that you can then import as custom HTML templates to the SendX email platform. If you're using the SendX platform and you're interested in creating custom HTML emails from Figma, this is going to be a really easy way to go about doing that. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Moosend using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-06-06T00:00:00.000Z
dateModified: 2024-06-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-moosend-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-moosend-using-emailify.md
---

# How to export HTML emails from Figma to Moosend using Emailify

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Moosend email marketing platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the resources icon at the top here, and then if you search for Emailify under the "Plugins" tab, click on that and then click on the Emailify item. You can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little save icon here. That's going to let you run the Figma plugin from your saved Figma plugins list. I've already clicked on the "Save" icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved Plugins," and click on Emailify. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you design HTML emails in Figma, which you can then export to production-ready code from the Figma plugin. I'm just going to create a brand new email here called Moosend template example, and I'm just going to click on add new email if I container. I'm just going to create a really simple example. I'm not going to go through all of the design tools that the Figma plugin offers today. If you're new to the Figma plugin and you're interested in learning more about that, there's a bunch of other good tutorials on the YouTube channel and documentation that you should check out. For today, I'm just going to be creating a really simple example and not modify any of the design or content. I just want to basically show you how to export this to HTML and then get it into the Moosen platform.

Once you're happy with your design and components, go ahead and click on the footer tab in the Figma plugin, then scroll down to the letter M. Under the letter M, you'll see a Moosend option for a footer, so go ahead and click on that Moosend footer. That's going to automatically pre-populate these links here with the correct tags that Moosend is going to be looking for. For example, if we click on this unsubscribe link and then click on the link settings up in the Figma plugin header, we can see here that the unsubscribe link tag has been pre-populated along with the view and browser link as well. These are automatically going to work once we upload our HTML to Moosend in a minute.

Now that we've got our Moosend footer included in the design, and assuming you're happy with the layout, you can preview the HTML just by clicking on the preview button in the Figma plugin. That's just going to give you a real-time HTML preview of what that code is going to render like in your email client. You can see here that we can switch between mobile and desktop, allowing us to check out the design before we export it for Moosend. If you want to add things like mobile overrides, you can click on the settings button here and then click on any of these layers to add mobile overrides like font size and padding. I'm not going to go into detail on these today, but feel free to check out the documentation and other video tutorials for more on that.

I'm just going to close off the preview now. I'm happy with my HTML template, so I'm going to close that off and then click on the export HTML button in the top right of the Figma plugin here. If you go ahead and click on export HTML, you'll see that the default option selected is the HTML email option. This will let us download the HTML to our computer, but I want to go to the platform integration section here and scroll down to the letter M. You'll see Moosend as one of the options, so just click on that Moosend option. Once you've got that selected, we can now add things like our subject line. I'm just going to add a test subject line here. You can also add preheader text, which shows up next to the subject line. When you open up the email in your email client, you'll have the subject line, and the preheader text shows up underneath or next to that. I'm just going to add some copy here and then export this for Moosend.

I'm going to go ahead and click on this export for Moosend button now, and that's going to export the HTML and images for me. Once it's done, you're going to get this message here that says your email code is ready for importing into Moosend. Click on this download your zip file button, pick anywhere to save it, and I'm just going to save it to my desktop. Once you've saved that, unzip that file. I've just unzipped it on my desktop and opened it up here. Inside the zip file, we've got a previews page which lets us check out the email that we exported in our preview. For example, if we create a new tab in our browser and drag that in, you can load up that preview to see what it looks like in desktop and mobile. The file we are looking for today is inside the email template folder.

You can see we've got our folder name matching the frame. Moosend template email has a folder called Moosend template email, and what we want to get is this index.html file. If we get that index.html file and then go to Moosend, log into your Moosend account, go to campaigns up the top here, and click on regular. Once it loads up, click on this create new campaign button in Moosend, click on regular, and then the create button under that regular heading. Once that loads up, you can do things like give it a name. I'm just going to call this test campaign and subject line. We can use the same subject line that we used in our Figma file. For preheader or preview text, you can leave this blank if you've already added it in your Figma file. Remember, we just added it to this input field here. If you've already added your preheader text here, you don't need to add it again in Moosend or it will double up, but you can add the subject line here and also in Moosend as well. The subject line is going to get rendered in the title tag in the HTML, so if you're using things like viewing the browser links, this text here is going to show up as the name of that tab or browser window. Populate this to be the same as Moosend, but if you've populated the preheader text, just leave that blank and keep the subject line the same.

Now that we've got that populated, click on next. That will bring us to the list. Choose your email list, whichever list you want to send the email to. This will bring us to step three, which is the design step. This is where we can now import our custom HTML design into Moosend. Scroll down to the bottom of this page and go down to this imported campaign template section. Toggle that from off to on. Click on that toggle switch in the bottom right, and that's going to swap that custom design template out for this imported campaign template section. Now, you can see we've got these different fields here, and it's giving us a few ways to import the code.

The method we want to use is importing it via pasting in the HTML code. To import our HTML that we just exported from the Figma plugin, we need to open up that HTML file. I'm going to open up a new browser window, drag and drop that index.html file we exported into this folder here, and drag and drop that into your browser. The quickest way to get the code is by right-clicking anywhere, going down to view page source, and clicking on that. Here you'll see all of the HTML code that was exported for this file. Select all of that content by command A on Mac or control A on Windows, right-click that, and click copy. That's going to copy all of the HTML to your clipboard. Then, go back to Moosend. Where it says import via pasting your HTML code, click on that text area and paste in that code by pressing command V if you're on Mac or control V if you're on Windows. You can see it's pasted in all of that code.

The final thing we need to do is click on this import button. Click on import underneath that text area, and you can see on the right it's loading in that HTML. This is what the campaign is going to look like. This is the real HTML that we exported from Figma for Moosend, and it's being loaded up as we expect based on the preview we saw in Figma. You'll notice down here it's got the unsubscribe link. If you look in the bottom left of the browser window, you can see that it's being populated with a dynamic unsubscribe link and it's also populating the view in browser link. You can see it's adding the Moosend link to view this campaign in the browser once we send it out.

That's basically ready to go. The next thing we need to do is click on the next button again in the bottom right corner. For this step, you can skip it. It's just saying you can add things like dynamic content or unsubscribe links. As we've already added our unsubscribe link, you don't need to do this. Leave that blank and click on next. This will give you the final step to schedule the delivery. If you want to send the campaign now, you can send it right away or schedule it to be sent at a later time. If you're using the Moosend platform, you're probably already used to this step anyway. I'm not going to go through how to send out the campaign and schedule that. You can do that in your own time. Once you're happy with it, you'll get to this final preview step once you populate all this content. You can send out the campaign as you want, but the important thing is it's going to use that HTML code, that HTML template that we just loaded in, and it's going to send that out as a nice custom HTML email directly from the Moosend platform.

That's basically it. I just wanted to run through all of those steps with you, showing you how to create, export, and import the HTML code from Figma into the Moosend platform for custom HTML email sends in Moosend. I hope that's helpful if you're using the Moosend email platform. Thank you, as always, for watching. We'll be back soon with more Figma tutorials like this one shortly.

---

---
type: tutorial
title: How to export HTML emails from Figma to Insider using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-05-31T00:00:00.000Z
dateModified: 2024-05-31T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-insider-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-insider-using-emailify.md
---

# How to export HTML emails from Figma to Insider using Emailify

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Insider email marketing platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top here, and search for Emailify. Under the Figma plugins tab, if you click on the Emailify item, you can then run the Figma plugin by either clicking on this "Run" button here or by clicking on this little "Save" icon here, which will let you run the Figma plugin from your saved Figma plugins list.

I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on Emailify. That's going to run the Figma plugin that we just saved a second ago. If you're new to the Figma plugin, the way it works is it helps you design HTML emails, which you can then automatically export to HTML code using the Figma plugin itself.

Today, I'm just going to be creating a really simple email called "My New Template." I'm going to click on the "Add Emailify Container" button. I won't be going through all of the design features in the Figma plugin today. If you're interested in those and you're new to the Figma plugin, I'd recommend checking out some of the other videos on the YouTube channel or in the documentation. For today, I'm just going to create a really simple design without customizing any of the content, which you can do in Figma. I will leave everything default and just create a simple design.

Once you've created your email design, the last thing you're going to want to do for the Insider platform is to go to the footage tab over in the Figma plugin. Scroll down and find the letter I. You'll see an Insider footer option. Click on that Insider footer component, and it will automatically add this preset footer to your email, pre-populating the unsubscribe link. If you go into the link layer and click on the settings button in the Figma plugin, you can see that the Insider global unsubscribe link tag is automatically being applied to that navigation item. You can customize the look and feel of this as you like and add your own address and other elements if you want to, but adding that Insider footer will automatically populate that unsubscribe link for you.

Once you're happy with that, you can preview the email by clicking on the preview button in the Figma plugin. This will give you a real HTML preview of what the design looks like, showing it as it would appear on mobile and desktop. You can customize these as required by clicking on any of these layers and then clicking on the settings button, which will let you apply things like overrides and links. Again, I won't go into detail about all that; you can check out the documentation or other videos for the design side.

Now that we're happy with our email design, I'm going to close the preview and click the "Export HTML" button. By default, this will automatically select the HTML email option under "Download to your computer." This will download a zip file, but for today, we actually want to upload this automatically to the Insider platform. Scroll down a bit underneath "Platform Integrations," and scroll down to the letter I. You'll see the Insider option. Click on Insider, and it will then ask you for your Insider API key. I'm going to show you how to get that in a second.

Log into your Insider account. Go to the top right corner of the page, click on your username, go down to settings, then click on the "Inone Settings" button. This will load the settings page in Insider. Once it loads, you can see there's a tab called "Integration Settings." Click on "Integration Settings," scroll all the way down, and at the very bottom, you'll see the API key section. Click on the "Generate API Key" button and select the "Email Content" key type. You have a bunch of different options, but the one we want is the email content one. Do not select email template or transactional email. Ensure email content is selected as the API key type, which will highlight in blue. Click on next, and that will generate your API key.

It will say that the API key has been generated successfully. Copy this and store it somewhere because it only shows you this once. Click on the copy button to copy the key to your clipboard. Store it in a password manager or somewhere safe if you want to reuse it later because it will not show you this again. Once you've copied that to your clipboard, go back to the Figma page, go back to the API key input field, and paste it into the input field.

You can now click the "Upload to Insider" button. You can also optionally add a subject line and preheader text. The preheader text appears after the subject line when you're looking at your inbox. Add preview text here as well. This will include it in the HTML file itself. Even though there's a field in Insider to add your own preheader text, this won't populate that because if we populated that as well, it would duplicate the preheader text. Add it here, and it will automatically add it to a template.

Once you've filled out the subject line, click on the "Upload to Insider" button. This will export all of the HTML code, upload all of the images, and upload the template itself to the Insider platform. It will tell you that you've successfully uploaded the Insider template to the platform. Go to your Insider account by clicking on this link, and it will take you to your Insider account in the browser. To get to your emails, go into the menu, go down to the side menu where it says "Experience," and click on "Message." Underneath "Message," you'll see the email item. Click on email, and that will load your emails list.

Once this tab finishes loading, you can see here that it's just created a new template called "My New Template," which is taking the name from your Figma file where we've named the frame "My New Template." It has added a unique timestamp to the front because if you try to upload a template with the exact same name again, it will bounce and won't let you create it. Unfortunately, we have to put in this little random ID here, but you can see when it was created, it will order it based on when it was uploaded, so you know which one was which if you re-upload it. You can see here in the tag section that it's also tagging it with Emailify, so you can clearly see that this has come from the Figma plugin.

Once you've uploaded it, you can view the template by clicking on the template name. When it loads, you'll see the template listing page, which lets you include recipients and other details. You can also go to the design tab. Click on the next step, which is "Design," and it will load the design page. You can see here that it has pre-populated our subject. We put in "My Subject" in the Emailify Figma plugin, and it has automatically populated that here. It won't pre-populate the preheader field because it's automatically adding that preheader content into the HTML. I'll show you what I mean by that by clicking on this edit button. We can open the HTML and see that it's looking great, just as we previewed it in Figma.

Now, this is in the Insider platform, and this is their Insider preview window. We can see what it looks like there, and this lets us view the HTML that was uploaded from the Figma plugin. You can see that it uses the subject line in our title tag, so that will show up if you ever open the email in a web browser. Scroll down a bit, and you'll see that the preview text has automatically been added. This means you don't have to add that into the Insider field; it's automatically adding that tag and styling it to be hidden but visible in your email client.

That's looking really good. You don't need to add any HTML here. I just wanted to show you what that looks like. You can preview it here to get a sense of what it looks like. Once you're finished, you can either click on save or go back. I'm just going to go back, and that's basically it. We have our email design here. You can assign it to a list by adding your list in the recipients section. You can change the name of the template or the campaign. We can call this one "My New Campaign" and save that, which will allow you to save the email details as well.

That's basically it. Once you're ready to send out the template, you can do that as you normally would. I won't go through all those steps here, but importantly, this is a quick way of getting your custom HTML templates out of Figma, as long as they've been designed using the Emailify Figma plugin. The Figma plugin doesn't support templates that have been pre-designed outside of the Figma plugin. As long as you use the design features provided by the Figma plugin, which you can find in the documentation or YouTube tutorials, you'll be able to design anything you want and have it uploaded automatically as production-ready HTML code.

I hope that's helpful. If you are using the Insider platform for your email marketing, this is a quick way of using the API integration with Emailify to get your custom HTML templates out of Figma directly into the Insider platform with one click using that automated feature. We'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Figma to InDesign workflow
description: How to handle a Figma-to-InDesign workflow without rebuilding every layout manually.
datePublished: 2024-05-30T00:00:00.000Z
dateModified: 2024-05-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/convertify-figma-to-indesign-workflow/
markdownUrl: https://www.hypermatic.com/articles/convertify-figma-to-indesign-workflow.md
---

# Figma to InDesign workflow

How to handle a Figma-to-InDesign workflow without rebuilding every layout manually. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for figma to indesign workflow when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Convertify fits into the process

Convertify helps in this workflow because format migration is usually expensive in all the wrong ways. A conversion-focused workflow makes legacy files easier to reuse without rebuilding everything from scratch.

With Convertify, teams can usually:

- reduce manual rebuilding when files come from other tools
- make migration and legacy-file work more practical
- keep format conversion from turning into a full redesign job

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Convertify](/convertify/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If design files need to move between tools, Convertify is the obvious starting point. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to convert an image to vector SVG in Figma with one click using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-05-20T00:00:00.000Z
dateModified: 2024-05-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-convert-an-image-to-vector-svg-in-figma-with-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-convert-an-image-to-vector-svg-in-figma-with-one-click-using-convertify.md
---

# How to convert an image to vector SVG in Figma with one click using Convertify

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to convert images to vectors in Figma using the Convertify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top here, and search for "Convertify" under the "Plugins" tab. If you click on the Convertify item, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here. That's going to let us run the Figma plugin from our saved Figma plugins list. I've already done that, so I'm going to right-click anywhere on my canvas, go down to "Plugins," go down to "Saved plugins," then click on Convertify. That's just going to run the Figma plugin we saved a second ago.

By default, you can see that it's currently set to export Figma to sketch files because the Figma plugin can export Figma to different formats but also import different file formats into Figma. Today, we're just going to be focusing on this import to Figma category down here. If you scroll down, the one we want to select is "Import image as traced SVG to Figma." Go ahead and click on that option, and that's going to change the little context window here to allow us to drag and drop a JPG, PNG, or WebP image file from our computer.

I'm just going to go to my desktop. I've got a few different bitmap images saved. You can see here I've got one that's an anime one, I've got a couple of vectors and some logos, and a couple of other icon layers too. I'm going to go through these really quickly and show you how these work. To do a really quick example, we're just going to import this Pikachu.JPG image. We're going to drag and drop that file directly from our desktop into this little drop zone area in the plugin here. If we let go of that file, you can see here that it's now tracing the JPG image and generating the SVG paths, which it's now done. Once that finishes, you can go ahead and click on the "Insert SVG to Figma" button here, and that's going to import your SVG into the Figma file.

You can see that these are editable layers. We can click on those, select them, and change the color if we wanted to. You can see here the color changer is going to allow us to do that. This is a vector file converted from the bitmap image. If we were to import this image normally, just dragging and dropping that JPG file into Figma, you can see here that when I zoom in, the pixels are going to be pretty obvious. You can see the pixelation occurring around the eyes and the cheeks here. If we scroll over to the version that we just imported, you can see that these are vector layers.

That's a really quick example of what the import function does. It allows you to convert bitmap images into vector layers and have those imported into Figma. You've also got the option to download the SVG file, so if you wanted to download that file to your computer instead of inserting it into Figma, you can do that as well. I'm just going to run through a few more examples of what this looks like.

Another one we've got here is an anime character. Again, this is a bitmap image. Just going to drag and drop that PNG file into the Figma plugin, and that's going to convert this image into an SVG as well. You can see it's generating the SVG path. You can see that happening in real-time over here. Once that's ready to insert, again, we just click on the "Insert SVG to Figma," and you can see that's also imported our vector. Again, these are editable vector layers, and that's going to be imported directly from the image and converted from that PNG into a vector layer.

A couple more that I wanted to show you. The next thing I want to show you is the difference between upscaling an image first. If I show you this original image here, we've got this kind of poster with a dog and some text on it. I'm just going to import that into the Figma plugin, drag and drop it, and you can see once it imports this path, we've got the SVG ready to go. We're just going to insert that. This is kind of the initial example. If you see here, the text is okay. It's kind of imported it fairly well, but there's still a little bit of jaggedness around the edges there. The image isn't too bad either, but we can actually improve this by upscaling the image first. If you go to a website like Upscale Media, there's some other ones like ILoveImage.com, and you can upscale it through there as well. What you want to do is actually upscale the image beforehand. In this case, I've upscaled at 4X using this AI upscale feature. You can see here the text is quite a lot sharper. The vector is quite a lot sharper as well. Now, I'm going to run a comparison by dragging and dropping that 4X upscaled image into the Figma plugin as well. I'm going to drag and drop that JPG, and that's going to convert this JPG image with the upscaling to a vector SVG that we can import as well.

You'll notice that the time it takes to convert larger images or more complex images takes a bit longer than the smaller images or simpler images. That's just something to call out if you notice a speed difference there. Now that it's converted the larger upscaled image, we can insert that one to compare it. I'm going to click on the "Insert SVG to Figma," and you can see here this is four times the size, but you'll notice that the text is sharper. The text is looking a little bit sharper than the original one. The image down here, you can see that there's a little bit more detail around the mouth as well. You can see here with the mouth, it's missing some of those smaller features down here. When we scroll over to the upscaled one, you can see that it's carried those over. You get a little more detail with that image because it's upscaled. That's just something I wanted to call out. If you've got a lower quality image, you can use a service like this to upscale it beforehand. If you do that before importing the image to convert to vector in Figma, that's going to allow you to get a sharper result.

I'll show you another example of that here. I've got the Nike logo that I'm just going to drop in. This is the original one. It's a bit more of a lower resolution one, so that won't take quite as long as the next one we're going to do, but you can see it's generating the paths for this logo. Once it's finished, I'm going to show you a comparison between this one and the larger one. I've got a four-scale, four times upscaled one over here, so we'll import that in a second. You can see this one is a little bit blurrier around the edges. I'm going to show you what that looks like. If we insert that SVG into Figma, you can see here, as I just mentioned, because the original image has a bit of blurriness and compression artifact around it, you can see here all these little artifacts around the logo. That's because of the JPG compression that's getting included, and that basically follows through in the converted vector as well. You can see those artifacts are getting translated into these little paths here. What we want to do is really clean up that original image, and one way of doing that is upscaling it. I did upscale this one as well, and you can see the lines are a little bit sharper there. We'll drag and drop that one in as well, and then we can compare the two in Figma and see what the conversion between the original JPG image was to the vector layer here with this upscaled one, which will also get converted to the vector layer in a minute.

As I said, this is going to take slightly longer because it is upscaled. The larger the image and the more complex the image is, the biggest thing those two factors are going to determine how long the generation of the SVG takes. We're almost done. We're just up to 95%, and once that adds the last bit, as it's just done, we can now insert that SVG to Figma to compare it. I'm just going to click "Insert to SVG," and you can see here this one's upscaled. This one's actually just a 2X upscale, so it's not like the 4X one we did before. Immediately, you can see that the paths are much sharper. We've got fewer artifacts around these letters. If we zoom in here, you can see that there are some of these artifacts showing up in the original one, but just doing a 2X upscale, you can see that it's actually much sharper, and there are many fewer artifacts than the other one had. That's just a quick example of what that looks like, and I would recommend using an upscale feature to do that. Ideally, you want to start off with the sharpest possible input image.

This works really well with things with clean lines or flat style colors. 2D colors work really well. I'll just do a couple more to show you that. We've got a JPG here of this little logo, so we can import that into Figma, just converting that JPG file. This is just a flat JPG of the Microsoft Word icon, but again, this is a very sharp-looking, upscaled original image, which is in bitmap, and that's really what you want to do as your input. You want to have the sharpest possible input. Even though it's not a vector, it's a very high-resolution, sharp, clear image that we can then import into Figma and convert to a vector.

That's ready to go, so I'm going to insert that SVG, and you can see here it's extremely sharp. The lines are extremely clean because the input was so good. We've now got this vector that we can use inside of Figma however we want, and that's going to stay very sharp. Of course, you can also edit the colors of this. I'll just do one more example, and then we'll finish up the tutorial.

I'm just going to import this puppy JPG as well. You can see this one's got quite a few different shades of colors in it. It's more of a detailed vector, whereas this one's much more of a flat vector. I'm just going to drag and drop that puppy JPG file into the Figma plugin and convert that into a vector as well. Once that's done, you can see here it's ready to go. I'm going to click on "Insert SVG to Figma," and that's going to allow us to import that.

The important thing I wanted to show there is that it will try and match up all of the input colors. You can see that the original one had quite a few bits of input of detailed colors, and this is carrying that over fairly well. I just wanted to show you an example of that. Again, it's not going to be 100% perfect. Vectors are much different and much more complicated to get right than the original bitmap because bitmaps are using pixels, whereas SVGs and vectors use paths. It's quite a different way of rendering imagery, but this plugin and this feature, where it allows you to import images as trace SVGs into Figma, will hopefully allow you to save some time instead of having to manually trace all of these things with the pen tool or converting them to vector using some other manual method.

I hope that's given you a good overview of what the plugin can do. This is a new feature that's just been added as an option. You want to go to the "Import to Figma" section, click on "Import images traced SVG", and that's going to allow you to convert images from your computer and convert them into vector layers that will be usable in your Figma file automatically. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Image optimization workflow for designers
description: A cleaner image optimization workflow for design teams producing web and campaign assets.
datePublished: 2024-05-13T00:00:00.000Z
dateModified: 2024-05-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/image-optimization-workflow-for-designers/
markdownUrl: https://www.hypermatic.com/articles/image-optimization-workflow-for-designers.md
---

# Image optimization workflow for designers

A cleaner image optimization workflow for design teams producing web and campaign assets. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### TinyImage

[TinyImage](/tinyimage/) is one of the more useful tools in this workflow. TinyImage matters in this workflow because production does not stop at design quality. Teams still need smaller files, cleaner exports, and faster pages. Keeping compression in Figma removes one more manual handoff.

### HyperCrop

[HyperCrop](/hypercrop/) is one of the more useful tools in this workflow. HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: tutorial
title: How to import slides from PowerPoint to Figma in one click using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-05-13T00:00:00.000Z
dateModified: 2024-05-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-import-slides-from-power-point-to-figma-in-one-click-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-import-slides-from-power-point-to-figma-in-one-click-using-pitchdeck.md
---

# How to import slides from PowerPoint to Figma in one click using Pitchdeck

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to import slides from a PowerPoint presentation file into your Figma file using the Pitchdeck presentation Figma plugin.

To get started all we need to do is go to our Figma file, click on the little "Resources" icon at the top here, and if you search for Pitchdeck then under the Figma plugins tab, if you click on the Pitchdeck item, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here, and that will let you run the Figma plugin from your saved Figma plugins list. So I've already clicked on the save icon so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on the Pitchdeck item, and that's just going to run the Figma plugin we saved a second ago. 

If you're new to the Figma plugin, the way that it works is it takes frames from your Figma page and allows you to turn those into a presentation that you can then export to various formats like a web presentation, PowerPoint file, keynote file, Google Slides, or PDF. However, today I'm not going to be focusing on those features, I'm going to be showing you how to take a PowerPoint file that you've already got and import the slides from that automatically into your Figma file that you can then edit and customize using the tools in Figma.

I'm going to use this example here, it's just a minimalist presentation that I've got set up, and what we're going to do is we're going to import this file into our Figma file. And the other thing I wanted to just add is you can also add slide notes, so I'm just going to add those in here. So add slide notes to the first slide. I just want to show you how those get imported as well. So I'll just save that and I'll add one more on here. So more slide notes on the third slide. And once we import this in a moment, you'll see these get carried over into our Figma file too. So I just wanted to make sure we included those.

Now that we've got our PowerPoint file saved, all we need to do is go to our Pitchdeck Figma plugin and you can click on this little "Import PPTX" drop zone down here or you can just drag and drop a file directly into that. So I'm going to go to my desktop, I'm going to take that PowerPoint file that we just saved which is a PPTX file and I'm just going to drag and drop that from my desktop directly into this little "Import PPTX" drop zone in the Figma plugin and let go. And once you let go of that, you can see that the file's being loaded and it's giving us a little status indicator of which slide it's currently importing into Figma. 

This process is going to depend on how many slides you've got in your file, how many images and layers are in each slide and it's going to give you an update based on that amount of content. So once it gets to the final slide, you'll see it kind of finalize here at 100%. And once it finishes that, you'll be able to see that it gives you a success message saying that we've just imported 21 slides from our PPTX file.

You can see in the Figma plugin it's automatically loaded those slides up. It actually creates a new page for that in our Figma file, just to separate it from any of the other content you've got set up. You can see here in the little brackets, it's telling us that it's been imported from that PowerPoint file. And if we zoom in, we can actually edit and inspect these layers as well. So, for example, we can edit this text. So we can edit that as we would normally in Figma. These are just regular image layers that we can now modify. If you want to shrink those or move those around, those are just editable layers in Figma that we had in PowerPoint before. Same with these ones.

You can see down here in our speaker notes section in the plugin, it's automatically imported those into our speaker note in the Figma plugin. And you'll see that on the first slide as well, just down here where we added those speaker notes a moment ago. So that's looking really good. It doesn't import things like animations. So if you do want to animate certain layers in your presentation for the web presentation format, you can manually go through and add those in. You can just select an animation and add those in yourself if you'd like to. Otherwise, you can just leave them as static as well. But that's just one example of a file that I wanted to show you.

We'll try one more just to give another example here. So we've got this portfolio PPTX file. So I'm going to drag and drop that one into the Figma plugin as well. And while that's loading, you can see it's just adding those slides in the same way. This one's only got 10 slides so it's going to be a little bit quicker. And you can see it's now imported those 10 slides into our Figma file as well. Again, it's creating a brand new page in Figma and automatically loading up those frames into our presentation Figma plugin as well. And of course, we can edit these. So we can zoom in and edit that content.

This is just regular text content automatically applied to the size and font that we had in PowerPoint. I'll show you what that looks like in PowerPoint as well to compare. So you can see here we've got our design and we've got our content that we just imported. So you can see all the different slides that we just imported into Figma. And if we scroll down here, you can see that these are all editable as you'd expect as well. It's worth noting that only certain types of layers or certain types of elements from the PowerPoint files are supported. If you go to "docs.hypermatic.com/pitchdeck" and check out the import PowerPoint file docs on the site here, you'll get a bit of an extra detail of what elements are actually supported.

It'll import slides, it'll import images, text, shapes, tables. Currently just supporting the text content and speaker notes, but it currently doesn't support things like charts or SmartArt, headers and footers, embedded videos. And I would also say layouts in general can be a little bit tricky as well. If you're using a preset layout from a template that PowerPoint creates, those can also have some issues as well. So the best thing to keep in mind is you probably just want to keep these really simple. You want to make them sort of like these ones where it's mostly just text layers and image layers or shape layers, and those are going to work quite well. But once you start getting into these more complex elements, you might run into some issues. So that's just something to call out as well. 

The final thing I wanted to go through is you might notice that some files just don't seem to load. So I've got this other PPTX file here which was downloaded from the internet. So I didn't create it from scratch in PowerPoint, and that may have something to do with it. It might have been created in a different version of PowerPoint or a different tool that exported it to a sort of strange version of PowerPoint.

If I try and drag and drop this file, you'll see here that it's going to tell me that it can't open the file and it's telling me to try resaving it from the PowerPoint app. So we can try that now. So if you open up this file, in this case, that doesn't want to open in the Figma plugin, just double click on that, open it up with the native PowerPoint desktop app. So just make sure you've got Microsoft PowerPoint installed on your computer. And all we're going to do is just save as. So you got to go to File, Save As, and we're just going to save this as a new version.

I'm just going to call this one new and save it to the desktop, same format, so PPTX format, but we're just going to resave this after opening it up in PowerPoint. So once you've saved that, just go ahead and click on Save. And you can see we've got a new PPTX file that we can try. So if we go back to our Figma file, drag and drop that new file that we just resaved from PowerPoint into the little drop zone area in the plugin, and you can see this time it's loading up the slides. So that's just something to call out if you do run into an issue where it's not wanting to open up the file.

This is usually if the file's been exported from a different program or if the file format's just a little bit weird. Opening that up in the most recent version of PowerPoint and resaving it as a new PPTX file, that usually resolves that issue. So you can see here that I've got my slides now imported from that PPTX file. So if we open up that file, you can see that the content is getting brought over. Also just mindful of fonts, so if you've got fonts installed, you want to make sure those are installed on your computer and matching up in Figma.

Sometimes the naming can be a little bit weird as well. So in this case, you can see that the fonts aren't getting applied correctly, but the font sizes and font styles and everything like that colors are all being applied. You may just need to go through and manually reset some of those fonts. So that's just another thing to call out. As you can see, it's not 100% perfect and it is still in BETA so this will improve over time but if you've got a simple enough presentation already designed in PowerPoint that you want to import into Figma to give yourself a little bit of a head start in case you need to redesign some of those slides in Figma from your PowerPoint file this is a really easy way of automatically importing those slides and automatically importing that text and image content from a PowerPoint file directly into your Figma file without having to manually go through and recreate every slide from scratch.

I hope that's helpful if this is one of the use cases you've run into where you do need to get slides from a PowerPoint file into Figma sometimes there's weird requirements at certain companies to do that so hopefully this is going to help your workflow if you are one of those people. So thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Reduce PNG file size without losing quality
description: How to reduce PNG file size without turning sharp design assets into muddy exports.
datePublished: 2024-04-25T00:00:00.000Z
dateModified: 2024-04-25T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-reduce-png-file-size-without-losing-quality/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-reduce-png-file-size-without-losing-quality.md
---

# Reduce PNG file size without losing quality

How to reduce PNG file size without turning sharp design assets into muddy exports. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for reduce png file size without losing quality when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How TinyImage fits into the process

TinyImage matters in this workflow because production does not stop at design quality. Teams still need smaller files, cleaner exports, and faster pages. Keeping compression in Figma removes one more manual handoff.

With TinyImage, teams can usually:

- reduce file size without adding another optimization tool to the workflow
- export lighter assets for web, email, and paid campaigns
- keep performance and handoff cleaner from the first export

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [TinyImage](/tinyimage/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If export weight or delivery speed is the problem, TinyImage usually pays for itself quickly. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: Auto repeat and sync Figma layers from a spreadsheet using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-04-17T00:00:00.000Z
dateModified: 2024-04-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/auto-repeat-and-sync-figma-layers-from-a-spreadsheet-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/auto-repeat-and-sync-figma-layers-from-a-spreadsheet-using-copy-doc.md
---

# Auto repeat and sync Figma layers from a spreadsheet using CopyDoc

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to automatically sync and repeat any Figma layer in your designs with rows from a spreadsheet using the CopyDoc Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the resources icon at the top here. If you search for CopyDoc and then click on the "Plugins" tab, you can then see the copy do result popup. Just go ahead and click on that, and then you can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this little "Save" icon here. That will let you run the Figma plugin from your Figma plugins list later. I've already clicked on the save icon so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins," and then go down to "Saved plugins" and click on the CopyDoc result. That's just going to open the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, it has a bunch of different features, but today I'm just going to be focusing on the sync content feature down here. What you want to do to get started is just click on this little sync content button. So, I'm going to click on that now and that's going to open up this little window here. It's going to give us the option to sync content from either a CSV or Excel file or we can open that up and select a Google sheet URL or an air table URL. To keep things simple, I'm just going to show you a CSV file for now. You can see on the side here that we've got a little link to download some sample data. So, I'm just going to go ahead and click on that content sample data link and that's going to allow me to save this to my desktop. I can save that to the computer and just replace the one I've already got there.

If we open that up, you can see that in the spreadsheet, we've got a few different columns. We've got a column called title genre minutes and poster. If you notice, I've got the layers set up in my Figma file to match those names. You can see here, I've got a couple of frames set up and you can see if I open up those layers you can see that the layer names correspond exactly to the header of the spreadsheet. So, you can see underneath title that's where I've got my title layer, genre is there, and then poster is the name of this blank rectangle layer. So, that's where our image is going to get synced. I'm going to show you a really quick example of what this looks like.

If we want to sync this up to some existing layers that we've already got selected, what we can do is drag and drop our CSV file directly from the computer into this little Drop Zone area in the Figma plugin here and just drop that in. That's going to load up a preview of the data that we just saw in our spreadsheet file. So, in Figma, you can see that it's loading in the header. It's loading in the data for all those rows and you can see image previews as well. By default, this is going to allow you to select multiple frames or multiple layers and it's going to automatically loop through those selected layers and sync the data.

When I click on this sync rows with layers button, that's going to automatically sync up the content with my selected layers. It's syncing those up now and you can see it's automatically replaced those content layers. This is really handy if you've already got your layers duplicated but for today I'm also going to be showing you how to automatically duplicate these if you've only got one layer created. I'm just going to delete those layers and I'm going to come down here and I'm going to show you what this looks like to auto repeat these layers.

I'm going to keep my same data selected here and this time I'm going to enable this auto repeat toggle. So, in the Figma plugin just enable this auto repeat toggle and you can see that the messaging has changed here to ask us to select a single layer that contains our named layers. In this case, I can use this wide card design that I've got. It's just a frame with the exact same layer structure that we saw before. So, we've got our title layer, genre, poster, etc. That means I can now select this single layer and what it's going to do is automatically loop through all of the rows in my spreadsheet and copy this layer and update the content for each row.

I'll show you what that looks like now. I'm just going to click on the sync and repeat selected layer button in the Figma plugin and that's going to automatically copy that layer and duplicate it the number of times that it appears in the spreadsheet. So, we can see we've got four rows in the spreadsheet so it's taken that single layer that we selected over here and it's automatically created an auto layout frame and it's duplicated it four times and swapped in the content each time. That's automatically doing that for us.

What we can also do is we can add these to an auto layout element first. For example, if we wanted to add this wide card into our vertical auto layout container here. What I can do is create this Frame and apply some auto layout to the parent frame. In this case, I'm just going to add some auto layout over here. I'm going to make that vertical. So, what that's going to allow us to do is automatically repeat this layer inside of an existing auto layout frame.

For example, if we now click on this white card layer inside of the vertical auto layout container, I'm just going to sync that up again. So, I'm going to click on the sync and repeat selected layer and that's going to automatically duplicate the layer and you can see here that it's kept it all within the existing auto layout parent container. So, it's kept the original layer intact but it's copied it four times inside of the exact same parent container that the original layer was already in. This is really handy if you've already got a design created and you've got a placeholder layer in there and all you want to do is sync up that data and repeat it the number of times that you've got it in a spreadsheet. That's really handy.

I'll show you what that looks like again just using a different layout. So, I've created this component here. You don't have to use components you can just use a frame if you like but in this case I'll just use a component example. So, what I'm going to do is I'm going to copy that component I'm just going to paste that into this Frame here so I've got this one called a horizontal auto layout container. I can actually make that auto layout container reel by clicking on this auto layout plus button over here. So, I'm just going to turn that into an auto layout container and I'm going to set this one from left to right. This is going to be a horizontal layout.

Now what I can do again is just click on the content layer that contains my content layers that are named. So, in this case, I've got my instance which contains the content layers. I'm going to click on that instance inside of the auto layout container and one more time I'm just going to click on the sync and repeat selected layer button and that's going to automatically again copy that layer and duplicate it those four times based on the rows that we've got in our spreadsheet. That's what that looks like there. Again, you can now either hide or remove that original layer if you want. You can take that out there. The cool thing about using this with components is you can then automatically change the master component and change the styles of that in one place and have those automatically update for all of your synced components or instances as well. That's really handy if you want to use the instances or use the component as the original layer and then copy the instances based on your spreadsheet data that can be really helpful for styling it later.

As I mentioned you can do this with a Google sheet as well. If you wanted to use a Google sheet all you need to do is click on the go back button, come back to this tab over here again make sure the content tab is selected there are some other options that you can sync up but today I'm just going to be showing you the content one. You can change this from CSV and Excel to Google Sheets for example. So, what we can do is change that copy our spreadsheet data from our Excel file and if we go into Google Sheets I'm just going to close this off for a second and go to Google Sheets I've just got a new Google sheet set up. I'm just going to paste my data into the Google sheet and then what you want to do is just go up to the share button in Google Sheets click on that and you want to make sure that the General access setting is changed from restricted to anyone with the link. Once you select anyone with the link you can then go ahead and click on copy link copy it to your clipboard and then go back to the CopyDoc Figma plugin and under the sync from Google Sheets URL option you can then paste in that link into the input here.

I'm going to paste that now that publicly sharable link and you can see it's loaded up our spreadsheet it's saved it in there as an option and if you have multiple tabs you'll see the multiple tabs pop up in here as options today I've only got the one sheet so I've got that selected so then you just have to click on the load content preview button and again this is going to load in the content exactly the same way as the Excel file but this is going to load it remotely from your Google sheet. If you want to keep it up to date somewhere in Google Sheets and then reuse that content over and over in the Figma plugin you can easily do that as well.

Again, we can see what that looks like just by clicking on any of these layers and this time I'm just going to duplicate the component itself. So, go ahead and click on the auto repeat toggle make sure that's turned on and then click on sync and repeat selected layer and again that's going to copy our component duplicate it four times and create those instances and again you'll notice because I didn't have the component inside of a container that already contains auto layout in that case it will always create a new frame which includes auto layout set on it vertically and then you can automatically add those copy layers in there. It'll automatically create those you can do whatever you want with them it's just a way to neatly organize them if you don't already have the element inside of an auto layout frame. So, if you want to do that just make sure it's in an auto layout frame first and that'll always use your own auto layout frame.

That's basically it; I just wanted to run through this new feature of being able to auto repeat layers again you've got the option to turn that off and manually select the layers you can see here when I select the number of layers it's only going to sync with those selected layers it's not going to automatically repeat anything it'll just select the layers that you've already got in Figma and map those to the first number of rows in the spreadsheet. So, you can see here I've got two layers selected so it's showing those two rows. Yeah, feel free to give this a try hopefully it saves you some time from having to manually copy paste a bunch of layers that you know you want to sync up and if you've just got one that you want to automatically repeat from however many rows in your spreadsheet you can now do that automatically just by checking the auto repeat toggle. Thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: Sync chart data to Figma from a spreadsheet using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-04-16T00:00:00.000Z
dateModified: 2024-04-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/sync-chart-data-to-figma-from-a-spreadsheet-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/sync-chart-data-to-figma-from-a-spreadsheet-using-copy-doc.md
---

# Sync chart data to Figma from a spreadsheet using CopyDoc

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to automatically import charts into your Figma files using your own spreadsheet data with the CopyDoc Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon at the top here, and then if you search for "CopyDoc" and under the "Plugins" tab, if you click on the CopyDoc item, you can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this little "Save" icon here, and that'll let you run the Figma plugin from your Figma plugins list.

I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," and then go down to "Saved plugins" and click on the CopyDoc item, and that's just going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, it's got a bunch of different features in it, but today I'm just going to be focusing on this sync content feature which is what's going to help us import our chart data from a spreadsheet into our Figma design.

To get started, just go ahead and click on the sync content button down here, and that's going to bring up this little window here. What you want to do first is change the default "Content" tab and go over here to the "Chart" tab and just click on chart. Once you click on chart, you'll see that tab gets selected, and then we've got the option of selecting what kind of chart we want to import into our Figma file. So, by default, it's just a bar chart, but you can do a column chart, you can do an area chart, you can do donut charts, py graphs, all those sorts of things. So, I'm just going to keep it simple for the time being.

What you can do is select the chart that you want. So, in this case, just a bar chart, and then you can download a sample file with sample data for that chart. So, depending on what chart you've got selected, this will change. So, for example, if we click on bar chart and then click on that link, that's going to let us download a sample CSV file to our computer that we can then open up and edit with our own data.

You can see here I've got the bar chart sample data CSV. And if we open that up, it's a very simple CSV. You've got a header with the category and value which you can obviously rename, and then you've got the values for each of those columns next to each other. So, I've already edited a bar chart over here. So, if we go to our Excel file, you can see here I've got a bar chart that I've updated, and I've called it company and employees. So, the header is companies and employees, so these are going to be the labels for those sets of data. And then every other row underneath each of those columns is what we're going to be using for the data to get imported.

Now that we've got this set up, we've got our CSV file saved with this updated data, we can go back to our Figma plugin, and we can drag and drop that CSV file that we updated a second ago with the employee data into the Figma plugin. So, you can drag and drop that CSV file into this Drop Zone here with the bar chart option selected. And then once you let that go, you'll see a little preview load up in the Figma plugin. So, it's going to be a bit hard to see it at full scale in the Figma plugin because the window's quite small, but it just gives you an overall sense of what kind of data is going to be loaded in here.

Once you're happy with your preview, just go ahead and click on the insert chart to Figma button. And once you click that, it's going to instantly insert a chart based on the data that we just loaded in from our CSV file. So, you can see here that we've got an editable chart. These are all layers that we can open and interact with. You can see if I click on this rectangle vector layer, I can actually change the width and size of that. You can, of course, change things like colors. So, if we go to our Color Picker over here, we can change the color of that graph. We can do things like change the font sizes. So, if you wanted to call out this particular company, so if we wanted to change the Amazon font to bold, you can do that. You can increase the size of that and position it however you like.

You can change that around there. And yeah, this is basically an editable graph that we've imported from our CSV data. Let's try another one. So, if you click on the go-back button, the other one that we saved was this stock price one. So, if I open up that, you can see I've got a similar looking graph. So, I basically used the column chart sample. So, I downloaded the column chart sample data to the computer, and you can see what that looks like here. It's just got the category, another heading, the values, so value one and value two. So, this is going to let us have two sets of values per category. And you can see that I've edited that in my Excel file. So, instead of those default values from the column data, you can see here I've updated it. Instead of category, it's company. So, I've got a list of companies, and then I'm comparing two sets of values.

This is going to add these two sets of values as a column chart. So, I'll show you what that looks like when we import it. So, all you need to do is go back to your Figma file, click on the little chart tab, click on the column chart just to select the kind of chart that you want to create. And again, we've got that updated stock price data in a column chart format that we downloaded before and edited. So, I'm just going to drag and drop that into the Figma plugin with the chart tab selected and drop that in. And again, you can see we've got a nice little preview here of roughly what's going to be imported. So, you can see the company names at the bottom. We've got the stock price Legend up here. So, that's the color-coded legend and the different sets of data.

I'm going to again click on the insert chart to Figma button, and again, that's going to import this chart automatically into my page. So, I'm just going to move that up so we can see it a bit clearer. And if we zoom in again, you can see these are completely editable. We can jump in here and edit those. So, we can make these shorter or taller. And again, you can see all the data is being reflected based on the data that we had in our spreadsheet here. So, that's looking really good.

And as I said, you can use many different types of charts. So, all you need to do is select the chart that you want. You can hover over it for a second if you want to see what kind of chart it is. You'll get a little tooltip popup so you can do that if you're unsure what kind of chart it is. You can see this one's a donut chart. This one's a combo chart. This one is an area chart. And again, just click on that, click on the download sample data CSV link, save that to your computer, edit it in whatever software you prefer, and then drag and drop that back in, and it'll load it up.

The other thing I should mention is using CSVs and Excel files is just one option for data sources. If you want to load it from something like a Google sheet, you can just click on this little select box here and switch that out to Google Sheets. And that will let you paste in a Google Sheets URL. So, you can go in there and paste in your own Google sheet.

I've just opened up a blank Google sheet page in the browser. So, I'm just going to call this one data example, and I'm just going to hit enter on that. And what we can do is save some of this data or copy some of this data into our Google sheet. So, for example, if we were to open up this spreadsheet that we've got here, you can see that we've got the data that we can copy. So, I'm just going to highlight all of that data, bring it into my Google sheet here, and just paste that in. And we can edit this obviously as we like.

If we want to change Amazon to Nvidia or something like that, we'll change another one just to make it clear what's going on. So, we'll make that one Tesla. And then we can now share this spreadsheet URL by clicking on the share link up here. And you'll need to make sure that the general access setting is changed from restricted to anyone with the link. So, once it says anyone with the link, you can then copy that link by clicking the copy link button, going back to your Figma plugin, and making sure that you've got the sync from Google Sheets URL selected. And then you can paste in that URL that we just copied into here. So, paste that in. That's going to load up the tabs in your spreadsheet. So, you can see it's loaded up the name of the spreadsheet which is data example, and we've only got one tab in our spreadsheet, so we're just going to keep that selected at sheet one.

And because we're loading in a column chart in this case based on the original data that we edited, we can just go and click on the column chart tab up here. So, we've got that one selected. So, it knows which chart we want to import. And now that we've got the data example selected with our data for that chart, we can now go ahead and just click on the load chart preview button down here. And that's going to load the data directly from Google Sheets, give you a nice little preview here. So, that is dynamic data. So, for example, if we were to change this value down here, so we'll make this one much lower, we'll just make it basically non-existent and save that. And that's the stock price for the Nvidia one. So, you can see here it's very high at the moment.

If we go back and then we refresh that data, we can then go ahead and click on the load chart preview button again. That's going to get the data fresh. And you can see here that the Nvidia stock price has gone down from that massive line a second ago, as you can see here, down to this smaller line that we just edited.

Using a Google sheet is a very convenient way if you have data that changes a lot and you're going to be reusing the data in your Figma designs, and you want to keep resyncing data using Google Sheets as an interesting example for doing that. Again, same process, just click on insert chart to Figma. That's going to automatically insert the chart from the Figma plugin. And again, you can do with that whatever you like. You can change the colors, you can change the fonts, change the values even if you want to do that, and basically you can edit this as if you've created the layers yourself.

So, a quick way of editing the colors, just a quick tip, if you click on the chart frame itself and just go down to the selection colors section on the right-hand side here, that'll give you easy access to all of those colors that you can then just change in one go. So, for example, you can theme this really easily just by clicking on those selection colors and changing those in the sidebar here. And the same goes for text and backgrounds and all that sort of stuff.

That's pretty much it for today. I just wanted to give you a quick rundown of the fundamentals of using the chart sync feature in the CopyDoc Figma plugin to automatically import your data from a spreadsheet or Google sheet into the Figma plugin and then adding that into your Figma designs as editable layers. Hopefully that helps with your workflow if you're working with charts and spreadsheet data a lot. Hopefully, the CopyDoc Figma plugin can help your workflow and automate this a little bit more. So, thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: Sync Airtable spreadsheet content to Figma using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-04-15T00:00:00.000Z
dateModified: 2024-04-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/sync-airtable-spreadsheet-content-to-figma-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/sync-airtable-spreadsheet-content-to-figma-using-copy-doc.md
---

# Sync Airtable spreadsheet content to Figma using CopyDoc

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to sync your spreadsheet content from Airtable into your Figma layers using the CopyDoc Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top, and if you search for CopyDoc under the "Plugins" tab, if you click on the CopyDoc result, you can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this "Save" icon here. That's going to save it to your Figma plugins list for easy access.

I've already clicked on the save icon, I'm just going to go to my canvas, right click anywhere, go down to Figma plugins, then go down to "Saved plugins", and click on the CopyDoc item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, it has a bunch of different features to help you update text in your Figma designs, but for today I'm just going to be focusing on this sync content feature that we can pull in spreadsheet data from the Airtable platform into your Figma designs and sync up those layers. What we're going to do is just click on the sync content button in the Figma plugin here, and then what we're going to do is make sure the content tab is selected underneath this little tab section here. We want to change the default sync option from CSV Excel file and click on that drop down and change that to sync from Airtable URL.

If you click on sync from Airtable URL, that's going to change the data source to Airtable and it's going to allow us to add a new Airtable into our Figma plugin. What we need to do for this is to get our Airtable URL. In this case, I've already created an Airtable in my browser. You can see here I've got my Airtable set up. All I'm going to do is copy that link. I'm just going to grab that link from the URL bar and paste it into the URL field here in the Figma plugin. I'm pasting that in. You can see it's saying that it's a valid Airtable URL. It's picking up on the URL that we've just pasted.

The next thing we need is the token. If you click on the token link, that's going to open up the browser to your developer Hub page. At the moment, I don't have any personal access tokens created, I'm just going to go ahead and click on the create token button in the Airtable developers page. Click on create token and give this a name. I'm just going to call this CopyDoc Figma plugin integration. For Scopes, you can see in the Figma plugin it's saying that we need to add the data.records.read scope. Make sure that you click on add a scope and select the data.records read scope. I've just selected that in there.

Importantly, you need to Grant the API token access to the base that your table is in in Airtable. Click on add a base. I'm just going to add the CopyDoc base that I've got set up here and just say all current and future bases in this workspace. That'll be different for your end, but just select the place where you know you're going to be reading the spreadsheet data from and add that in. Then you want to go ahead and click on the create token button in the bottom here. Click on create token and then you can copy this to your clipboard by clicking on this little copy icon here.

That's copied the token to our clipboard and it will only show it to you once, if you want to save that somewhere secure, now is your chance to do that. But I'm just going to copy it to my clipboard and paste it into the Figma plugin here where it says personal access token. I'm pasting that in. We've added in our Airtable personal access token, and then now we just want to give this Airtable a label. I'm just going to call this one movies or movie posters. I'm just to say movie poster details and I'm just going to click on save new Airtable.

I'm going to click save new Airtable now and that's going to load in the Airtable data for me. You can see here that it's loaded up the data. Going back to our spreadsheet here, you can see in Airtable it's currently set up with these four columns. We've got title, genre, minutes, and poster. If we go back to the Figma plugin here, you'll see that that content has all been pulled in to this preview down here.

What this is relating to is the Figma layers in our designs. You can see here we've got a few layers already set up with those named layers. If we open up this panel here, you'll see that the layers are named poster. #poster is this little rectangle layer. That's where our image is going to go. We've got #title, #genre, and #minutes. These layer names in Figma all match up to the header names in the spreadsheet. You just have to make sure that the names that you give to each column in your Airtable at the very top are named exactly the same as your Figma layers inside of each frame that you want to sync up.

To show you what this looks like when we now sync those layers, I'm just going to select a few different layers. You can see I'm selecting. The number of layers is getting reflected here. Every layer that you select is going to get looped through and the matching layers inside of each one is going to map to the content for each row.

To give you an example, I'm just going to do these three and I'm just going to click on sync rows with layers. You can see that that's downloaded the content from Airtable and synced it to our Figma layers here. It's basically swapped out the content for the #title, #poster, #genre, and #minutes. That's all been replaced with the real content that we pulled in from our Airtable here.

Now, if you're wondering how to quickly get started with this, you can click on this go back button here. If you want to get a sample CSV, a sample spreadsheet of this data structure to give you a bit of a quick head start, you can actually just click on this content sample data CSV link here and that's going to save it to your computer. You can just click on Save. I'm just going to replace the one I've already got there. If we open that up, you can see that we've got this content sample data CSV file. This is exactly the same data that I've got loaded into Airtable. This is just an example again of an easy way to get a quick overview of what that data structure looks like, the first row being your header.

You just want to give each column the name of the layer that you want to match in Figma. Make sure that's matched up and then you can proceed to add each row with the content for each of those different items per column. You can add as many rows as you want. Importantly, you can also sync these automatically. If you don't want to create all of the rows beforehand and copy paste those, I'm just going to delete those ones now, you can actually automatically sync those and repeat them as well.

Now that we've got our Airtable saved, we can easily go back to that just by selecting it from our list. If you've added more by clicking on this little plus icon, you can add more Airtables if you like, but for now we've just got this one. I'm just going to select that one again, click on the load content preview button here, and that's going to load up our Airtable data again. You can see here we've got this little switch that says auto repeat.

If you want to automatically repeat a single row, you can do that by enabling the auto repeat toggle up here. You can see that the messaging has changed to say select a single Figma layer that contains your named layers. Before it was saying select multiple layers, the example we just did a minute ago, but in this case we're just going to repeat one layer as many times as the rows appear inside of your spreadsheet.

In this case, it's going to loop through 1, 2, 3, 4. We can click on this single card layer here and again, we've got our named layers inside of that layer. Now that we've got the frame selected, we can click on the sync and repeat selected layer button here. That's going to pull in all of the content, but this time it's going to automatically copy that original layer and duplicate it as many times as the content appears in your spreadsheet.

You can see it's taken this original card here, it's copied that layer automatically, pasted it four times, and it's swapped out all of the data for each row from our Airtable. That's a really quick way of automatically looping through your Airtable spreadsheet rows if you don't want to manually copy paste, you know, 100 different layers.

I'll also show you how to add this to an auto layout frame that already exists. For example, if we take this component here and I'm just going to copy that and paste it into this horizontal auto layout container down here. This is a frame that has auto layout applied over here in Figma. You can see the auto layout toggle. That's got it applied and it's going from left to right. It's horizontal layout.

Because we've got this card inside of the layer, I'm just going to actually put in the instance instead of the component. I'll pull out the component. You can see we've got an instance of this original component inside of our auto layout frame. We've got this auto layout frame with horizontal layout applied. What we can do is we can select the card inside of that auto layout frame. Because the parent layer has auto layout already applied, this time when we click on the sync and repeat selected layer, which I'll do now, you'll see that it automatically copy and pastes those layers inside of the existing auto layout frame.

This can be really handy if you've already got a design that has auto layout applied to the parent of the layer that you want to repeat. You can just select that layer as long as it's inside of an existing auto layout frame and that way it will just automatically repeat those layers for you and leave the original one alone. You can either hide that or use it as you like.

These are instances as well. The cool thing about that is we can then edit the main component up here and that's going to automatically edit all of the duplicated instances that we just added via the CopyDoc Figma plugin. That's pretty cool as well. I definitely recommend using a component based original layer up here and then creating an instance of that component to use with the repeat feature. That's going to make it really scalable for you to apply changes in one place.

You can see here I can change text sizes and all different things like that to make it really easy for me to adjust that component with all the synced layers. Yeah, that's basically it. I just wanted to show you this in case you're a fan of the Airtable platform and you want to use this as an alternative to the other options available which are the CSV and Excel file imports or the Google Sheets URL imports. Now we've also got the sync from Airtable URL inputs where you can add your own Airtable spreadsheet data to use with the sync content feature.

You can also use the other tabs. You can use the Airtable URL as a source for your other data. If we switch from content to table, clicking on this tab here, you can see we can now click on the load table preview button. If we load that up, this is going to allow us to import a table directly into our page. If I click on the generate table from rows button, I can also make this zebra striped. I'll just do that for now and click on generate table from row. This is going to create a brand new table inside of your Figma file automatically with auto layout applied.

You can see here I can move that around, scale it up and down as needed. Again, because this is using components automatically, I can do things like scale the poster size. I can just increase that and that's going to look really good when I do change that. Yeah, that's basically it. As I said, feel free to play around with the other options. You can do charts, you can do styles, table, content, and the sample data for each of those is available here. Just click on that little link and click save.

If you need a bit more detail or help, you can click on the docs link for any of these options as well. Just go ahead and click on that docs link for any of these tabs and that'll give you a bit more detail about how to use them. Hopefully this has been a good tutorial if you're using Airtable and you can now use that as a data source for the CopyDoc sync feature. Thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: How to optimize Figma exports for page speed
description: A practical workflow for lighter Figma exports that support better page speed.
datePublished: 2024-04-08T00:00:00.000Z
dateModified: 2024-04-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-how-to-optimize-figma-exports-for-page-speed/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-how-to-optimize-figma-exports-for-page-speed.md
---

# How to optimize Figma exports for page speed

A practical workflow for lighter Figma exports that support better page speed. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for how to optimize figma exports for page speed when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How TinyImage fits into the process

TinyImage matters in this workflow because production does not stop at design quality. Teams still need smaller files, cleaner exports, and faster pages. Keeping compression in Figma removes one more manual handoff.

With TinyImage, teams can usually:

- reduce file size without adding another optimization tool to the workflow
- export lighter assets for web, email, and paid campaigns
- keep performance and handoff cleaner from the first export

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [TinyImage](/tinyimage/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If export weight or delivery speed is the problem, TinyImage usually pays for itself quickly. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: Export PNGs from Figma under file size limits
description: How to export Figma PNGs that stay within file size limits for platforms and campaigns.
datePublished: 2024-03-22T00:00:00.000Z
dateModified: 2024-03-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-export-pngs-from-figma-under-file-size-limits/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-export-pngs-from-figma-under-file-size-limits.md
---

# Export PNGs from Figma under file size limits

How to export Figma PNGs that stay within file size limits for platforms and campaigns. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for export pngs from figma under file size limits when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How TinyImage fits into the process

TinyImage matters in this workflow because production does not stop at design quality. Teams still need smaller files, cleaner exports, and faster pages. Keeping compression in Figma removes one more manual handoff.

With TinyImage, teams can usually:

- reduce file size without adding another optimization tool to the workflow
- export lighter assets for web, email, and paid campaigns
- keep performance and handoff cleaner from the first export

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [TinyImage](/tinyimage/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If export weight or delivery speed is the problem, TinyImage usually pays for itself quickly. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to export HTML emails from Figma to Benchmark Email using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-03-21T00:00:00.000Z
dateModified: 2024-03-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-benchmark-email-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-benchmark-email-using-emailify.md
---

# How to export HTML emails from Figma to Benchmark Email using Emailify

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to The Benchmark email platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top here. If you search for Emailify under the "Plugins" tab, if you click on the Emailify result, you'll be able to run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this "Save" icon here and that will let you run the Figma plugin from your Figma plugins list. So, I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins", then go down to "Saved plugins" and click on Emailify, and that's just going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma which you can then automatically export to production-ready responsive code with one click.

I'm just going to create a really simple template today. So, I'm just going to call this one template Benchmark example and just click on add new Emailify container and that's going to allow us to start adding some preset components that we can then customize with our own content and branding in Figma. So, I'm not going to be running through all of the design features in the tutorial today. If you're interested in that, I'd recommend checking out some of the other tutorials on the YouTube channel or going to the Emailify documentation site and you'll get heaps of resources there to customize the designs to your own brand and content.

Again, today I'm going to be leaving all of these as default just to show you a quick example of a template. And once you're happy with your template that you've designed with Emailify, the last step that you want to do is go to the footer tab in the Figma plugin. So, click on the "Footer" tab here and if you go down to B so the letter B, you'll be able to see there's a Benchmark email footer preset. So, if you click on the Benchmark email footer, that's going to automatically add this footer preset component to your design which pre-populates it with the unsubscribe link and viewing browser link for the Benchmark platform. So, we can double-check that by clicking on the link layer in our little nav component here and then clicking on the settings button in the Figma plugin up here and that will reveal the tag. So, we got our unsubscribe URL tag and also the viewing browser tag. So, these will automatically get populated by Benchmark later and those will work when you send out your email to your audience and they'll be able to click that and unsubscribe from the list or viewing the browser which will open up a web browser tab from the email client.

Now that we've got that set up, we can preview the email by clicking on the preview button in the Figma plugin and that's going to let us see a real-time HTML preview of what the content's going to look like after it gets exported from the Figma plugin. So, we've got the mobile view up at the moment. We can expand that out to desktop to see what it looks like on larger email clients. So, that's all looking really good and you can also customize the responsive design for mobile devices by clicking on the settings button up here and then just going through and clicking on any Emailify layer in your design. So, for example, you can do things like change the font size on mobile, you can change the padding for rows, you can change the visibility to hide things on mobile or hide things on desktop and kind of swap those things around.

I'll leave those for you to explore. Again, check out the documentation or some of the other video tutorials on the channel for some more context around those. But for today, I'm just going to be assuming that you're happy with your design. So, once you're happy, just close off the preview and then we're going to click on the export HTML button in the top right of the Figma plugin here and we're going to change this default HTML email option from HTML email and scroll down to the platforms list and just go ahead and find The Benchmark email item. So, you can see here there's Benchmark email as an option, go ahead and click on that. And then what you want to do is populate your subject line. So, just call this, I'm just going to call this sub subject line test and then you can also add preheader text.

Preheader text is what shows up after the subject line next to the subject line or under it in the email client when it opens up the email in your inbox. So, you can add that text in there and that will automatically show up as expected. The subject line, just be mindful that you will have to read this later when we export the email to Benchmark in a moment. So, it's still worth adding it here because it's going to include it in your title tag and that's going to show up if someone clicks on the viewing browser link and that's what the window or tab title is going to be taken from here. So, populate that and also be mindful that you have to copy-paste that again in a moment. So, once you've got those set up, just go ahead and click on the export for Benchmark email button and that's going to automatically generate all of the HTML and upload any image assets in your design. So, what you want to do is click on the download your zip file button and just save that anywhere on your computer, to your desktop is fine. And then once that saves, just double-click on the zip file and you should get a folder that looks like this. So, you can see here we've got a folder called template Benchmark example which is named the same as our Figma frame was. So, the file that we want is inside of this folder. So, if you open that up, you'll see an index.html file and that is our final HTML email that we're going to use in just a moment.

Once you've got that exported, you can then log into your Benchmark email account. So, I'm logged into the dashboard here and it's very important to note that this is a paid Benchmark email account. There's a free option, but the free tier of Benchmark doesn't allow you to import custom HTML emails. So, just make sure you're on the Pro Plan or you may be on an Enterprise plan but as long as you're not on a free plan, you'll be able to create custom HTML emails in The Benchmark email platform. So, once you've logged in, just go ahead and click on the emails item in the side menu here. And then once that opens up, just click on the other nested emails item. So, click on email emails again and that's going to load up the emails page inside of Benchmark and you'll see a button that says create new email. So, go ahead and click on that create new email button and then just select regular email. So, there's three options here, just select the first one which is regular email and then click next.

Then you want to change this option from the drag and drop editor over to the code editor. Again, this option here will only be available if you're a paid Benchmark email user. If you're on the free tier, it's going to prompt you over in this square to say that you need to upgrade if you want to use this option. Feel free to do that if you do want to use custom HTML inside of Benchmark. I've already done that, so I'm just going to click on the code editor option here and then click on the next button.

Give your email a name. I'm just going to leave that as default. You can call that whatever you want to call your campaign, and I'm just going to click next. This is now going to take us to the Benchmark email editor page. This is going to allow us to drop in custom HTML. You can see that there's a custom HTML source code viewer here and a preview of that email content here. It's just showing that email content.

What we want to do is actually get rid of all of this. We're going to highlight all of that content in the source code editor and just delete it. We want that to be completely empty. Then go back to your folder that we just exported the HTML file from via the Figma plugin. Again, find that index.html file inside of your email folder, and we're going to drag and drop that directly into this source code window here in The Benchmark email editor.

Drag and drop that in, and you can see that's automatically loaded all of the HTML file content into the editor directly, and it's also showing a live preview here, very similar to what we just saw in Figma. We can see that that's all being loaded in and it's all working, which is great.

The other thing that you'll need to do is customize the footer area. You can see here it's quite a mess with all this extra content here. By default, Benchmark will include all of that stuff in your footer. What you need to do is go to this settings button in the bottom left of your Benchmark page, click on that, and then you just need to go through and uncheck some of these things.

You can uncheck the permission reminder. You can uncheck the include web page web version link because we're already including that anyway in our design if you've added the Benchmark footer. So we can uncheck that and that will remove it from down there. Then go over to the footer tab in this same little popup here, and there's a few other things we can get rid of.

If you've already added your address in here, you can delete the address in here so it doesn't double it up. You can also then untick the sent to information, you can untick the verified unsubscribe logo, and you can untick the manage subscription link. For the address field, it's basically saying that it wants to have a valid physical address. I'm just going to add in a little dash because we've already got our address added here.

Alternatively, you could remove it from your design and just add it down here, but it seems silly to double it up. I'm just going to remove that and add a little dash there because it doesn't let me remove the full text. The other thing to note is that there's this massive badge from Benchmark that gets included by default.

If you check out the documentation, they basically say that you can remove this if you're a paid customer, but you have to email them at support@benchmarkemail.com and they will manually, I guess, turn off this feature to remove that branding from your emails. So it seems like that should be removed by default, but unfortunately, it's not, and so you will have to email them to ask them to get rid of that badge being included in your footer.

Same thing with the unsubscribe link. It seems like it just adds that in there even though we've added one here. I'm not sure why it doesn't allow you to remove that one, but worst-case scenario, you're going to have a double unsubscribe link in the footer there, and unfortunately, that seems to be just the way that the platform works.

Now that we've gone through those extra steps around the footer, what you can do is just click on the save and next button once you're happy with this and you don't want to make any more changes. Click on Save and next, and that is going to allow you to then schedule your email and decide which audience you want to send it to, who it's getting sent from, which address, and also adding your subject line.

As I mentioned before, you will have to add that subject line in again down here. Just go ahead and add that same subject line that you added in Emailify here, but you don't need to read the preview text. We've already added the preview text in the Figma plugin. So remember, we added that before. You don't need to add it again in Benchmark.

Otherwise, that's going to double up the previous text that we already added that gets included in the HTML. If you add it here again, it's going to inject the same content again, so it may double it up. Just leave the preview text one blank if you've already filled it out in Emailify, but do populate the subject line field in Benchmark.

That's basically it. You can save this and schedule it and send it whenever you're ready. But that's going to allow you to use a custom HTML email template that you've designed in Figma and have that sent out as your Benchmark email template. Again, feel free to reach out to The Benchmark support team just to ask about tidying up this footer here.

It seems a little bit silly that they add that by default, but it does seem like you can ask them to remove that. So again, email the support@benchmarkemail.com address, and hopefully, they can help you remove that from your designs. That's going to be it for today. I just wanted to show you how to get your HTML email designs out of Figma and into the Benchmark email platform if you happen to be using that for your email sends.

Thank you as always for watching. We'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to SugarCRM using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-03-20T00:00:00.000Z
dateModified: 2024-03-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-sugarcrm-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-sugarcrm-using-emailify.md
---

# How to export HTML emails from Figma to SugarCRM using Emailify

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the SugarCRM platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top, and if you search for Emailify under the "Plugins" tab, if you click on the Emailify result, you can then run the Figma plugin by clicking on this run button here or I'd recommend clicking on this "Save" icon here which will let you run the Figma plugin from your Figma plugins list. I've already clicked the save icons, I'm going to go to my canvas, just right click anywhere, go down to "Plugins", then go down to "Saved plugins" and click on Emailify, and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma which you can then export to production-ready responsive code automatically. So, I'm just going to be creating a really simple email, just going to call it example SugarCRM template, and I'm going to add that as a new Emailify frame to my page, and that's going to allow us to start adding some Emailify components. These are preset components that you can customize with your own content and brand and styles using Figma, but for today, I'm just going to be keeping it really simple and just spinning up a few blocks. I'm not going to be going through all of the design features of the Figma plugin today. If you're new to the Figma plugin and you want to learn more about those, I'd highly recommend checking out some of the other tutorials on our YouTube channel which are longer ones that go into depth about how to design the emails and customize them for your own brand and styles.

Today I'm just going to be keeping it really simple with these few presets and not making any customizations, and assuming that you're happy with your Emailify layout as well. The last step you want to do is go to the footer tab in the Figma plugin and under the platforms category, just scroll down to the letter "S" and find the SugarCRM footer. So you want to click on this SugarCRM footer and that's going to automatically pre-populate this footer component with the correct unsubscribe link and viewing browser link for SugarCRM.

You can see here if I inspect the link layer here and then click on the settings panel in the Figma plugin, that's going to show me the pre-populated link for our unsubscribe link and our viewing browser link. So that's a really easy way to add those in there if you don't want to manually add them yourself. And of course, you can customize the footer colors and the fonts and everything like that as you'd expect as well. So now that we've got our SugarCRM footer added in, we can preview the HTML in the Figma plugin just by clicking on the preview button here, and that's going to load up a real-time HTML preview of what the content's going to look like when it gets exported to code. We're looking at the iPhone size at the moment, we can change that to desktop to see a larger view of what that's going to look like in bigger email clients. And of course, you can also add custom mobile-specific overrides. So if you click on any of your Emailify layers and click on the settings panel button here, that will let you inspect these layers and apply custom mobile responsive overrides to things like font sizes, paddings, spacing, showing and hiding elements, and everything else that you'd expect to be able to do for responsive design.

I'm not going to be applying any of those today. Again, I'm just going to leave this a really simple default design and assuming that I'm happy with my HTML, I'm just going to close off the preview and we're going to jump into the export HTML button up here. So if you click on export HTML and then you just want to go down here and change the default HTML email option, scroll down to the platform section and again, we're going to find the SugarCRM option. So go ahead and change that to SugarCRM and click that. And then you can add your subject line here. So I'm just going to add my subject line and preheader text. So the preheader text will show up after your subject line when your audience is viewing the email in their inbox. So the text that comes straight after or under the subject line in there, that's what this text box here will relate to. And for the subject line, you will have to add this again in SugarCRM in a moment, but it's worth adding it here as well because that will add it to your title tag in the HTML. So if someone does click on the viewing browser link from your email, this line of text here, whatever you add in this input box, is going to show up as their browser window title or their tab title. So just make sure you copy that to be the same thing in SugarCRM later which I'll show you.

Once you're happy with your email and your subject client preheader, just go ahead and click on the export for SugarCRM button, and that's going to generate the HTML automatically and upload any images. So what you want to do is click on the download your zip file and that's going to allow you to save the zip package to your desktop. So I'm just going to save that there, go ahead and double click on the zip file, and if you open up the folder that it unzips, you should see something that looks like this. So it will have your email name, so you've got the Figma frame name, email name, that's going to automatically get populated as the folder. So just go ahead and open up that folder, and the file that we're looking for is the HTML and the file that we're looking for is this index.html file, and that contains your final email code. So we'll be using that in a moment.

Now that we've got that exported, we can now log into our SugarCRM platform, and this is the Sugar Market product in the CRM Suite. So you'll be able to get access to the Sugar Market instance if you're a customer of SugarCRM and you're using that particular product. You'll know what your login is and you can get to this dashboard here. So what you want to do is once you're on the dashboard just go ahead and hover over this little plus icon where it says quick create, and if you click on that quick create icon then go ahead and click on the email option. So go ahead and click on email under quick create.

Once this page loads, you just want to go ahead and select your email type. I'm just going to leave this as regular email for now, give the campaign a name. So let's call this test campaign from Figma, and then you can also add your subject line. So the subject line that you added in the Figma plugin, just copy and paste that here. So we can just call that subject line test, even though we called it something else before, that's okay. And then folder-wise, you just want to select the default folder or whatever folder you want to create to store your campaign in for organizational reasons. And then just update your from name and your address, so those are all sitting under here. I'm just going to update those now.

And once you've populated all of those fields below, just go ahead and click on the next button, and that's going to bring up this page here which allows you to select the email design. And we want to change it from themes, it's currently selecting the themes tab, we want to change that to this code tab here. So go ahead and click on code, and then there's only one option which is the blank option. So go ahead and click on blank, and once you've selected blank, go ahead and click on the next button again. So in the bottom right there, click next, and if it says a warning about templating changes, just say yes, just confirm that, and then it's going to give you this editor view here.

You can see here it's giving us a blank HTML file or blank HTML editor with nothing really in it except this default tag here. So what you want to do is get rid of all that code, so just select that line and delete it, and then go to your folder, find that index.html file we're just looking at, and drag and drop that into this window here. So drag and drop that code file into your editor in SugarCRM, and that's going to automatically populate the code editor with the code that we just exported from Figma. So you can see here in the Sugar Market editor, it's automatically rendering the preview. So this is looking just like we saw in our Figma file a moment ago. So you can see all the contents here, all the images have been uploaded, and everything's looking really good.

Once you get to this view, you can preview that, you can send a test email to yourself just to make sure that you're happy with it. You might also want to do a send to something like Litmus or Email on Acid to test that email out. But this is basically adding in the custom template to SugarCRM which you can do whatever you like with sending it out. So I'm just going to click on save to save that template. So that's just saved the code for us, and then you just go through your regular steps in the SugarCRM email flow.

For example, if you click next that's going to take you to the recipients page, you can assign your audience and things like that from there. So you can assign your lists and then you can click next again and decide when you want to schedule the email. So you could either send the email immediately, schedule it for later or send it in different batches so that's entirely up to you. And I won't be going through how to schedule an email in this particular tutorial. I just really wanted to focus on how to get your custom HTML into this build step here using the custom code option in SugarCRM.

We'll leave it there for today. I hope that's been helpful if you're using the Sugar Market product in the SugarCRM platform and you're also wanting to get custom HTML email designs out of Figma into the SugarCRM platform this is going to be a really easy way to go about it if you just design your emails in the Emailify Figma plugin export those out to the SugarCRM option and then as we just saw download the zip file and drag and drop the index.html file directly into your SugarCRM code editor here. So thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Aweber using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-03-19T00:00:00.000Z
dateModified: 2024-03-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-aweber-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-aweber-using-emailify.md
---

# How to export HTML emails from Figma to Aweber using Emailify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your HTML emails from Figma to the Aweber email marketing platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top here. If you search for Emailify and under the Plugins tab, if you click on the Emailify result, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here. It will allow you to run the Figma plugin from your saved Figma plugins list. So, I've already clicked that save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins", then go down to "Saved plugins" and click on Emailify. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma, which you can then export to production-ready responsive code automatically. So today, I'm going to be creating a really simple template. I'm just going to call this one Aweber template test, and I'm just going to click "Add new Emailify container." This is going to allow me to start adding some components to my email design and customize the content as I need to.

In this Figma tutorial, I'm not going to be going through all of the design features in the Figma plugin. If you're new to the Figma plugin and you're interested in learning more about that, I'd highly recommend checking out some of the other videos on the channel or going through the Emailify documentation site, and that will have heaps of resources and information about how you can customize your design.

As I said today, I'm just going to be keeping it really simple and not customizing things too much. So assuming that you've got your design set up the way that you want and you've customized the content and everything, the last thing you want to do is go to the footer tab in the Figma plugin. So go ahead and click on the footer tab there, and the second result you'll see is the Aweber footer. If you click on the Aweber footer, that will automatically add a footer preset to your design, which includes the unsubscribe link and the viewing browser link for the Aweber platform.

You can inspect that by just clicking on one of these little nav link layers here and clicking the settings button in the Figma plugin. You can see here it's got the unsubscribe link tag and the viewing browser tag already pre-populated for Aweber. So if you're using Aweber, it's probably a good idea to add that to your footer; otherwise, it will add one for you, and it doesn't look as good as the one that you could design in Figma.

Obviously you can customize this in Figma, change the text styles and background color and padding and things like that, but for today, I'm just going to keep it really simple. So once you finish your design, you can preview it in the Email Figma plugin by just clicking on the preview button. And that will give you a real-time HTML preview of what the content's going to look like when it gets exported to HTML. You can check that out on larger screens as well, and of course, you can also add responsive overrides if you want to customize what it looks like on mobile.

You can click on any of your Emailify layers, click on the settings panel in the Figma plugin, and that will allow you to do things like change font sizes, padding, spacing, all kinds of different things, show and hide elements on mobile, desktop, etc. As I said, I'm not going to go through all those today, but do feel free to play around with those and check out some of the other resources I mentioned earlier.

Now that I'm happy with my design, I'm just going to close off the preview here, and we're going to export this to get imported into Aweber now. So I'm going to click on the export HTML button in the Figma plugin, and then I'm just going to change the default export option from HTML email and scroll down to the platforms and find the Aweber option. So I'm going to click on Aweber, and now that I've got that selected, I can add my subject line. Just put your subject line in here, and you can also add preheader text.

The preheader text will automatically get added after your subject line in the email inbox. So sometimes when you see the subject line in your client and then you see some text underneath that or next to that, that's what the preheader text is. So you can add that in there. You will also have to add your subject line again later in Aweber as well, but it's still worth adding in here because that's going to include it in your HTML title tag.

If someone clicks on the viewing browser link in your email when they open up that tab or window in the browser, this line of text here that you add is going to get used for that title tag in the tab. So it's still worth adding there even though you have to add it later for the actual subject line. I'm going to export this to Aweber now just by clicking on the export for Aweber button. I'm going to click on that now, and that's going to automatically generate all of the HTML for my design and upload all the images and give me a zip file that I can download to my computer.

I'm going to do that now by clicking on the "Download your zip file" button. Just save that anywhere to your desktop is fine, then double click on the zip file that it just saved, and you should get a folder that looks like this. So inside the folder, you can see there's a folder inside of that with the same name as your Figma frame. So we've got Aweber template test, and you want to find that folder as well with the same name that you've given it in your own design. And the file that we're interested in is this index.html file.

This contains all of the code for our design that we just exported. So we want to have that one handy in a second when we import that into our Aweber platform. So go ahead and log into your Aweber platform. So it's just a Aweber.com login there, and this will be your home screen. The quickest way to import a custom HTML template to use in your messages is just to go to the messages tab on the left here and then click on the "Create a message" button in the top.

And when it drops down that list, just go ahead and click on the raw HTML editor option. So this is going to allow us to create a message using raw HTML. So that's the one that we want. We're going to click on that one, and this will load up the email editor screen inside of Aweber, but we have one more thing we need to change. There's a little button up here at the top left called "Source". So you want to go ahead and click on that source button to switch it into this code view here.

Clicking on that source button is going to give you access to this HTML editor. So we can now add our own HTML in place of this. So basically select all of that predefined content, just select all and delete it. So we want nothing in this Source window. And then what you can do is just drag and drop your index.html file into this window here, and that will automatically load up all of the content from the HTML that we just exported from Figma and insert that into your Aweber HTML email editor.

Now that we've got that added in there, you can go ahead and click on "Save". Just click on the save button, and that will save your email message. Just to make sure we've got it, and then you can also preview it by clicking on this "Preview and test" button at the top right. So that's just going to load up a very similar preview to the one that we saw in the Figma plugin. So you can see all the content been loaded in, all the images are there.

You'll notice that in my case, I've got the unsubscribed links being added by Aweber. That's just because this is on a free Aweber account. If you're a paid Aweber customer, which you likely are, and you've added your unsubscribe link up here, you won't get those added in automatically. Those should not show up if it detects the unsubscribe link in there. So that's just something I wanted to call out.

Once you're happy with your preview, just click on the "Back to editor" button, and then you can add your subject line in here. So as I said, you have to read add that in. So just add your subject line so you can add that in at the top, and then once you're happy with that, just click on "Save and exit". And that's going to save the message for you with your custom HTML template ready to send.

You can see up here we've got our subject line here, message which is the one that we just added as a custom template. So you can now go ahead and schedule that by either clicking on this little schedule button here or you can click on that to go into more detail. So I'm just going to click on "Schedule", and again, this is going to allow you to set your subject line, schedule it, select your list, do all that stuff that you would be used to if you're already using the Aweber platform.

That's basically it. You can also add them as email templates if you choose to. You can do that through this other option here called "Email template manager". It's basically the same process, but I'll just run you through that as well. You can click on the "Design my own template" button, and then you want to select the "Import a template" option. So click on "Import a template", and that's going to load up this screen here, and again, it's going to give you an option to paste in your HTML.

You can also give the template a name, so you can call this one "template from Figma" just for an example. And then you want to paste in your HTML into this box here. So again, you can drag and drop that index.html file, that will automatically drop in all of the code, you can see all of that in there. And then it's going to give you this button "Pick Drop Zones". So click on this "Pick Drop Zones" button, and you can basically just skip this.

Just go straight to "Template Builder". Just click on this button down here, "Template Builder", you don't need to worry about this "Drop Zone" stuff, just skip that and click "Template Builder". And that's going to save your changes and take you to this screen here. You'll notice that there's a space at the top here, this is just the editor adding some space in if you preview the email. So you click on the "Preview" button up here, you'll notice that the space from the editor disappears, and you can see your email content as you'd expect.

That's just something to call out in case you're wondering about that. And then you can just click on "Save and exit" once you're happy with that, and that should save it as a new template inside of your Aweber account. So you can reuse that template on an ongoing basis. So that's pretty much it. I'll leave it there for today. I just wanted to show you a couple of options of how you can create custom HTML emails in Aweber using the exported code from the Emailify Figma plugin in Figma.

Hopefully, this will give you a little bit more flexibility if you've been wondering how to design HTML emails in Figma that can then be exported automatically out to HTML that will work with your Aweber account. This is going to be a really simple way of going about it. So thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Drip using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-03-18T00:00:00.000Z
dateModified: 2024-03-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-drip-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-drip-using-emailify.md
---

# How to export HTML emails from Figma to Drip using Emailify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to upload your HTML email templates from Figma to the Drip email marketing platform using the Emailify Figma plugin. To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top, and then if you search for Emailify and under the Plugins tab, if you click on the Emailify item, you can run that by clicking on the "Run" button here, or I'd recommend clicking on this little "Save" icon here, and that will allow you to run the Figma plugin from your Figma plugins list later. I've already clicked on the save icon so I'm going to go to my canvas. I'm just going to right-click anywhere, go down to "Plugins", then go down to "Saved plugins" and click on Emailify, and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma which you can then customize to your own brand and then export to production-ready responsive HTML code automatically. So today I'm just going to be a really simple template. I'm just going to call this one template Drip example, and once we add that to our page we will then be able to start adding some preset components.

I'm not going to be going through all of these design features today. If you want to check those out, please feel free to check out some of the other YouTube tutorials on the channel or go to the Emailify documentation site and there'll be heaps of resources there that will show you how to design your emails and customize them and basically do whatever you want to them for your own brand and content. So today I'm just going to be giving it really simple, spinning up a few components without customizing them at all.

Assuming that you've designed your HTML email in Figma using the Emailify Figma plugin, the last thing you want to do before we export this for the Drip platform is to go to the footer tab in the Figma plugin. Then, if you scroll down to the letter "D", you'll find a Drip footer preset. So you want to make sure that you click on the Drip footer there, and that's going to automatically add this footer preset to your Emailify template which automatically prepopulates the required tag.

You've got the unsubscribe link which you can check out by clicking on the settings button in the Figma plugin with that link layer selected. So that will pre-populate the unsubscribed URL. It's going to pre-populate the viewing browser URL, and it's also going to give you the HTML postal address tag, which again, these are required in order for the custom HTML template to be accepted into the Drip platform.

If you don't include this footer, you will get a message later saying that you basically need to have these tags. So it's just easiest to go into the footer tab, click on the Drip item, and then you can add that to your template and customize the colors and styles as you like with those links already added.

Now that we've got our footer added, we can preview the HTML in the Figma plugin just by clicking on the preview button. And that's going to allow us to see a live preview of what the HTML is going to look like when it gets exported. So we can check that out on mobile and desktop. So we can see what that looks like on larger screens. You can also override some of these styles for mobile.

For example, we've got our hero text here. If you click on the settings panel in the Figma plugin and then click on any of the Emailify layers, you can see here that you've got a bunch of options to override these styles for mobile-specific designs. And that's going to allow you to do things like shrink font sizes or change paddings, change spacings, and all different kinds of things show and hide on mobile, etc.

So I'll leave those to you to play around with. Today I'm just going to be leaving everything as default and I'm fairly happy with how it's looking already. Assuming that you're ready to go and you're happy with your HTML preview, you can close that off now.

To get this into the Drip platform, all we need to do is go to our Figma plugin then click on the export HTML button in the top of the Figma plugin window. And then what you want to do is change this HTML email option, which is the default option, and scroll down to the platforms list and then find the Drip item. So you want to go ahead and click on the Drip select item. And that's going to select the Drip platform for exporting.

And then you can go ahead and do things like add your subject line. So I'm just going to add my subject line here and preheader text. So the preheader text is what shows up after the subject line when someone's opening up your email they'll see it next to or under your subject line. So you can add that text in there, and just be mindful that you will need to read this subject line in Drip later.

The one that we're adding in here is going to get automatically added to your HTML template itself. So for example, if you click on the viewing browser Link in the email and that opens up a new browser tab showing the email, it will use this line here, which gets added to your title tag as the title of that tab or the title of that window. So you can mirror the subject line in here but then also be mindful that you'll have to upload that or read that subject line when we upload the template in a moment.

Now that we've got our subject line and preheader added, I'm just going to go ahead and click on the export for Drip button. So click on export for Drip, and this is going to automatically generate the HTML and upload all the images and get all that code packaged up for you in a zip file.

Now that we've finished the export, you can go ahead and click on the download your zip file button in the Figma plugin, and then just save that anywhere to your computer like your desktop. And then just double click on that zip file to unzip it, and then you'll get a folder that looks like this. This folder contains the production-ready HTML code and it's going to be inside of a folder that has the same name as your frame in Figma.

You can see we've called ours template Drip example and inside the zip file we just exported there's a folder called template Drip example. So the file that you want is this index.html file, and this contains all of the code for our email that we can now add to Drip.

What we need to do is log into our Drip account. So I'm logged in over here and depending on what workflow you're using, you can pick any of those today. I'm going to keep it simple and assume you're using a single email campaign. So I'm going to click on the single email campaign item or you can also get to that from the campaigns list over here and clicking on the single email item. So I'm just going to click on that now.

Then just go ahead and click on the create button at the top of the page. And you want to make sure that you select the new text/html campaign option. So we don't want the visual Builder we want the new text HTML Campaign which is going to allow us to add custom HTML. So I'm just going to click on the new text HTML campaign button and then give that a name.

We're just going to call this new campaign Figma upload test and I'm going to create campaign by clicking on the create campaign button. And that's going to spin up a new Drip campaign a blank Drip campaign and what we want to do is click on this switch to custom HTML button over here.

You can see on the right-hand side if I click that it's going to say you know a warning do we want to switch to using custom HTML and we want to say yes I understand so just go ahead and click on I understand and that's going to switch the editor from this wysiwyg style Editor to a proper code editor that we can actually drop proper HTML code into.

Now that we've got that set up, what you want to do is copy the code from this index.html file. In this case, the easiest way to do that would be to open up a new browser tab. Open up a new browser tab or a new window, drag and drop the index.html file in there, and you can see that it loads up the HTML. Then, just go ahead and right-click anywhere, go down to "View Page Source," and you want to copy and paste all of that code to your clipboard. Copy every single thing from that "View Page Source" window that we just got to in our index.html file.

Then, go back into Drip and you want to highlight all of the code that's already in the email editor and delete all of it. We're just going to delete everything, so it's completely blank, and then we're going to paste in our code that we just copied from the index.html file. I'm just copying that in now, and that's been copied in. You can see here that it's now adding all of our content in here. We can switch to the preview tab to verify it. You can see it's all in there now.

We can select all of that HTML. It's looking the same as it did in our Figma preview. Don't worry about this warning in my window over here; there's a thing saying that the link is invalid because I didn't add a link onto this button. I just left it as default. Yours won't have that if you've got the correct links added everywhere. That just currently has a placeholder link, so it's just giving a warning about that. But it recognizes the links down here. You can see that we've got our address, our unsubscribe link, our "viewing browser" link; those are all being recognized and populated by Drip, which is great. So, we've got those in there.

Again, you want to go ahead and change this email subject line to be whatever you want. For example, in our email, we had it as "subject test" or something like that. So, whatever you added in the Emailify subject line field, you basically want to do that in your email subject in Drip as well. You can customize that as you need to. But once you've added in your text, you can go ahead and click on the "save" button. That's just going to save the email template for you. And you'll notice there's also an option here to autogenerate the plain text version. That's on by default, and you're welcome to leave that on if you're happy with that. Alternatively, if you want to add your own, what you can do is go to the "pl text" tab over here. You can see here that we've got our plain text version .txt file over here. This is something that's generated by Emailify automatically, and you'll notice that it's also got the content from our email rendered as plain text. I think Drip does a really good job of adding this automatically, so you probably don't need to use the one exporter from the Figma plugin. But if you do want to customize that plain text, that tab is the way you can do it and feel free to play around with that as you like.

That's basically it. That's how you can get your custom HTML emails from Figma into the Drip email marketing platform and use those for your campaigns. And once you're happy with your campaign setup, you can just go ahead and click on the "done editing" button in the top right, and that will bring you back to the campaigns list where you can then again preview this or add an audience and schedule it, and do everything that you would expect to be able to do with that custom HTML email.

We'll leave it there for today. I hope that's been helpful. If you're a Drip user and you've been wanting to add custom HTML designs from Figma, in this case using the Emailify Figma plugin to design those, this is a really quick way of going about it, and hopefully, it improves your workflow if you are using the Drip campaign manager with Figma as well. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Constant Contact using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-03-17T00:00:00.000Z
dateModified: 2024-03-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-constant-contact-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-constant-contact-using-emailify.md
---

# How to export HTML emails from Figma to Constant Contact using Emailify

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Constant Contact email marketing platform, and we're going to be doing that using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top, and then if you search for Emailify and under the plugins tab, if you click on the Emailify item, you can run the Figma plugin by clicking on this run button here. Or I'd recommend clicking on the little "Save" icon here, and that will let us run the Figma plugin from our saved Figma plugins list. So I've already clicked the save icon, so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins," and then go down to "Saved plugins," and click on the Emailify item, and that's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma, which you can then export automatically to production-ready responsive code automatically. Today, I'm just going to be creating a really simple template example. So, I'm just going to call this one a template example and create a new Emailify frame. And then I'm just going to start adding a few components from the Figma plugin. So, I'm not going to be going through all of the design features in detail today. If you want to check those out, feel free to check out some of the other YouTube Figma tutorials on the channel or check out the Emailify documentation site, which has a lot of information about how you can create and customize the HTML email designs in Figma for your own brand and styles.

Today, I'm just going to be creating a few components with no customizations or anything like that, just to show an example of how to export the HTML to Constant Contact. So once you're happy with your design, the last thing we need to do is click on the footer tab in the Figma plugin. And then you just want to scroll down to the Constant Contact footer option down here and click on that. So if you click on the Constant Contact footer, that's going to add this little footer component, which is prepopulated with an unsubscribed tag. So if you go down to your link layer, you can click on the settings button in the Figma plugin to check that out. And you can see here it's pre-populated with the correct Constant Contact unsubscribe tag. So this is automatically going to get swapped out to the correct link for your audience members when you send out your email via the Constant Contact platform.

Now that we've got that all set up, we can quickly preview the HTML by clicking on the preview button in the Figma plugin. And that's just going to load a real-time real HTML preview that we can inspect. And we can check that out on mobile as well to see how it looks. And you can also go through and apply mobile-specific overrides to any of these layers as well. So if you click on one of your Emailify layers and then click on the settings button, that will let you do things like override font sizes or padding or show and hide things on mobile, add links, all that sort of good stuff. So I'm going to leave this all as default today. I'm not going to customize it any further. I'm basically happy with this. So I'm going to close off my preview. And then we're going to click on the export HTML button in the Figma plugin up here. And I'm going to change this from the default export Port HTML option and scroll down to platforms, and I'm going to select the Constant Contact item instead.

If you click on Constant Contact, then we can do things like populate our subject line. So you can add a subject here and a preheader text. So preheader text will get added automatically after your subject line when someone's opening up your email in their email client. And it's also worth being mindful that you will have to copy this subject line manually into your Constant Contact campaign later as well. But adding it here will just ensure it also gets included in your title tag. So now that we're happy with our subject line and preheader, just go ahead and click on the export for Constant Contact button. And that will automatically generate all of the HTML and upload the images for you and package that up in a zip file. Go ahead and click on the download your zip file button in the Figma plugin and save that to your desktop. And then you can just double-click on that zip file, and that will open up this folder here, which contains your index.html file.

You can get to that by just expanding your template example folder or whatever you've called your Figma frame. So whatever you've named the frame, that's what the folder will be called in here. So just go ahead and open that up. You'll find the index.html file, which is the final HTML that we want. And you can load that up just by opening up a new browser tab and then dragging and dropping that index.html file into the browser. And you can see it all in here. So then you can just right-click anywhere, go down to view page source, and just copy all of that content to your clipboard. So all of the HTML content in the view Source tab, copy that to your clipboard.

And then what we can do is go to Constant Contact and go to the marketing Tab and click on the email item here. And that's going to load up the email campaigns page. Then what you want to do is click on the create an email button up here. And then once that loads up, you want to find the use your own HTML tile down here. So there's this use your own HTML tile. Go ahead and click on that and click on select. And once that loads up, you'll see this screen here. So the other way you can get to this screen directly is if you click on the little link down here where it says create a new email template in Constant Contact, this will actually link you directly to this page provided that you're logged into Constant Contact. But I just wanted to show you how to get to that manually in case you've already closed off that window.

Now that we've got all this placeholder content here, we want to select all of that and delete it. So I'm going to delete all of that content. And then I'm just going to paste in the HTML that we copied to our clipboard. So I've just pasted that in there. You can see that it's adding the pixel tracking code at the bottom automatically. So that's still being retained. And you can see here we've got our unsubscribe link also being added in at the bottom there. So to see a live preview of that, you can toggle on this live preview switch up here. And that will let you inspect the live HTML that's being rendered from the code that we just added. So that's basically looking the same as we just had it in Figma. So I think that's looking really good.

Then what you can do if you want to send this out is you can just go ahead and click on the save button first just so you save the template. And then you can go ahead and click on the continue button. And if you click continue, that will just take you to the campaign steps where you can apply your audience settings. So determine who you want to send it out to and again add things like your subject line and other details like that just for your Constant Contact send. So that's basically it for today. I just want to keep this super short to show you how to export your HTML email designs from Figma created with the Emailify Figma plugin and upload those to the Constant Contact platform if you're using that for your email marketing send. This is going to be a really quick way to go about it and also give you a lot more design flexibility compared to using some of the templated or preset templates in the Constant Contact platform, which are a little bit more limited in terms of having a full brand experience that you'd normally expect from your assets.

I hope that's been helpful if you're using the Constant Contact platform and using Figma, hopefully that helps your workflow a little bit. And thank you as always for watching. We'll be back soon with more Figma tutorials like this one.

---

---
type: tutorial
title: How to export HTML emails from Figma to ConvertKit using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-03-16T00:00:00.000Z
dateModified: 2024-03-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-convertkit-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-convertkit-using-emailify.md
---

# How to export HTML emails from Figma to ConvertKit using Emailify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your HTML email templates from Figma to the ConvertKit email marketing platform. 

We're going to be doing that using the Emailify Figma plugin. To get started, all we need to do is go to our Figma file, click on the "Resources" icon up here, and if you search for Emailify under the Plugins tab, you can then click on the Emailify item. Then we can run the Figma plugin by either clicking on this "Run" button here or I recommend clicking on this little "Save" icon here. That will let us run the Figma plugin from our Figma plugins list. So I've already clicked on that icon, so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins", and then go down to "Saved plugins" and click on Emailify. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma which you can then automatically export to production-ready responsive code. So we're going to create a really simple template today. I'm just going to call this one template example for ConvertKit and just click on the add new Emailify container button.

I'm not going to be running through all of the design features in the Figma plugin today. There's a few other good tutorials on the YouTube channel and in the documentation site for Emailify if you want to really drill down into how to design and customize the emails for your own brand and add content and things like that. Today I'm just going to be using some of the preset components without customizing anything or creating any of my own personalized layouts using some of these quick ad features down here.

Once you've created your email using the Emailify Figma plugin and you've customized it the way you like, the crucial thing you'll need to make sure you add is the ConvertKit footer. So if you go to the footer tab in the Figma plugin and then just scroll down to the letter c down here, you'll see that there's a ConvertKit footer preset that we can click. So I'm just going to click on that ConvertKit footer, and that's going to automatically add this footer component with some prepopulated tags.

We've got our unsubscribe link here and our viewing browser link. And if we click on the little settings button in the Figma plugin to inspect that layer, we can see that it automatically applies the correct ConvertKit tags, which are required for the ConvertKit custom email templates. So you can see we've got our unsubscribe URL and our viewing browser URL. And then you also need to add this little address tag, so this will prepopulate the address based on your ConvertKit account. And this is another required tag that ConvertKit will ask for when you do create your email template in a minute. So make sure you've added the ConvertKit footer from the Footers Tab. And you can, of course, customize the color of these links and backgrounds and things like that, but for today I'm just going to leave that as is.

To preview the HTML, you can click on the preview button in the Figma plugin, and that will load a quick real HTML preview in the Figma plugin that you can inspect. We can see what it looks like on mobile and also change the device to desktop. So this will allow us to see what our design looks like on those different sizes. And you can also customize these layers for mobile by just clicking on any of your Emailify Figma layers, then clicking on the settings button in the Figma plugin. And you can do things like override font sizes or padding or spacing, all different sorts of things depending on which type of layer is selected. So again, feel free to check out the documentation and the other video tutorials that go through the design features of the Figma plugin, but for today I'm just going to be leaving this as is.

Now that I've got my HTML email looking really good in Figma and I'm happy with it, I want to get this into my ConvertKit account. So the way we can do that is just to close off the preview, then click on the export HTML button in the Figma plugin. And we want to change this default HTML email option and scroll down to platforms and click on the ConvertKit option. So click on ConvertKit under the platform options. And then you just want to add your subject line. So subject line can go here, and then you want to add your preheader text here. So the preheader text is what shows up after your subject line when the emails get sent out. But the thing to be mindful of with ConvertKit in particular is you'll need to copy this subject line again into ConvertKit when you do send out your email. So this field here in this case will just add the subject line to your title tag in the HTML, which means that if you click on the viewing browser link later and that opens up a browser tab with your email, it will automatically use whatever you put in this field as the title tag of that tab. So in your web browser when you click on that link, it will have the name of the tab set to whatever you put here. So set that to whatever you like. And then when you're ready, click on the export for ConvertKit button. And that's going to automatically generate the production-ready HTML and also upload all of the images and give you this .zip file that you can download.

Now that the export's complete, we're going to click on the download your .zip file button and just save that anywhere to your computer. I'm just going to save it to the desktop. And if you double click on that .zip file and unzip it, you can open up the folder that it exports which contains these few files here. So what we want to do in this case as you can see in the little description here, we want to find the index.html file which is inside of the folder that our email was named after. So you can see we've called our frame template example kit for ConvertKit and inside the .zip that we exported from the Figma plugin, there's a folder called template example for ConvertKit. So that's the correct one, and this index.html file is the final HTML code that we want to use. So what we're going to do is go into ConvertKit, you can either click on this link here which will take you to the create new email template page directly. So if you're logged into ConvertKit, feel free to just click that and that will open it up. Or you can just go to your ConvertKit dashboard, click on the send item at the top, go to email templates, and then once that loads, click on new email template up the top here. And when that page loads, this navigation on the left doesn't seem to be working for me, but if you click on import code here or just scroll down to the very bottom of the page which is the import code section, just click on the create HTML template button over here. And that's going to take you to the new email template page which is also linked in the Figma plugin from here.

Now that we're at the new email template page in ConvertKit, we want to give this a name. So I'm just going to call this Figma template one. And what you want to do is paste in the contents of the HTML file from that index.html file. So in order to copy the HTML from our file, all we need to do is open up a new browser tab or window, drag and drop or open your index.html file into there. And that will let you view the HTML file in your browser. And the quickest way to get the source code or the raw HTML is just by right-clicking anywhere, going down to view page source and clicking on that. And then just select all by either doing command a on Mac or control a on Windows to select all of the content and then just copy that to your clipboard by right-clicking anywhere and clicking copy. So now that we've copied our HTML that we exported to the clipboard, just go back to ConvertKit and paste that in there. So we're just going to paste that with command V or control V if you're on Windows. And you can see that all of the HTML has been pasted in. So that's looking really good. That's exactly what we want. We can see at the very bottom here that we've got our address tag and our unsubscribe links already included. And you'll also notice that there's a hidden message content tag down here. So this message content tag is also required for ConvertKit emails, but it doesn't really play very nicely with custom HTML emails. So it's added at the bottom automatically when you export the emails from Figma to ConvertKit, and it's going to be hidden in the same way that the preheader text up the top is also hidden. So it's there, but it's not going to be visible to any users. So that's just something to be mindful of as well. You don't have to worry about it; it's added in there automatically, but that's where it is if you're wondering where that message content tag is getting added.

Now that we've added that in, we just go ahead and click on Save, and this will automatically save our new custom HTML template in ConvertKit. So that's basically in there now. We can open that up and edit it later if we want to, but that's basically now ready to go.

Now that you've got your content added as a template, you can then send that out by basically creating a new broadcast. So if you click on the broadcasts tab under the send menu, you will then be able to create a new broadcast, and you'll be able to see that under your templates. So you can see you've got your templates up here as opposed to the starting templates. This is our custom ConvertKit template that we've just added. So you can go ahead and click on that template, and that will automatically now use that as your custom HTML template that you can send out as a ConvertKit broadcast.

That's basically it. I know there's a couple of extra steps there to get it into ConvertKit, but once it's in there, you should be good to go. And as I said, make sure you've got those tags in there from the ConvertKit footer under the Footers tab. You always want to make sure you add that in; otherwise, it's not going to accept your code as a custom template. And you can see here that it's working well. It's prepopulating the address, so we've got the address tag. You'll notice that it's swapped out the address tag down here with a real preview address, and these links will also be viewable as well. You can see in the bottom left of the window there; it's got the archive URL goes here as part of the link. And you can see here that the unsubscribe Link in the bottom left of my browser window is also showing a little preview. ConvertKit unsubscribe link so that means these are working as expected. So that's all really good.

As I said, we'll leave it there. I just wanted to keep that as simple as possible to get the email that you design in Figma with Emailify and Export that out to a .zip file to upload into ConvertKit, and that should hopefully allow you to create really nice and personalized custom HTML emails for your ConvertKit send. So thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to GetResponse using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-03-15T00:00:00.000Z
dateModified: 2024-03-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-getresponse-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-getresponse-using-emailify.md
---

# How to export HTML emails from Figma to GetResponse using Emailify

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to get your HTML email designs from Figma into the GetResponse email marketing platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the resources icon at the top, and if you search for Emailify under the "Plugins" tab, if you click on the Emailify result, you can run the Figma plugin by clicking on this "Run" button here. Or I'd recommend clicking on this little "Save" icon here, and that will let us run the Figma plugin from our Figma plugins list. I've already clicked on the save icon, so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins", and then go down to "Saved plugins" and click on Emailify. And that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma that you can then automatically export to code from the Figma plugin. So, I'm just going to create a new email here and just call it template example for response, and I'm just going to add that to my page. And this allows me to then add these Emailify preset components and also create my own layouts using these quick options here. I'm not going to be going through all of the design features of the Figma plugin today. If you're interested in using those or learning more about them, there's a couple of really good Figma tutorials on the YouTube channel that you can check out. Or you can go to the documentation site, and that has a bunch of resources there to really understand all of the different features in the Figma plugin.

Today, I'm just going to keep it really simple and just add a few components, and I'm not going to be customizing any of the content or design. I just want to show you how to get this into your GetResponse email platform. So, the important thing is that you just need to add a GetResponse footer. So, if you go to the footer tab in the Figma plugin and just scroll down to the letter G, you'll see that there's a GetResponse footer preset. So, if you click on that GetResponse footer, that will automatically pre-populate the correct unsubscribe links and viewing browser links.

We can inspect that by clicking on the link layer here, opening up the settings panel in the Figma plugin, and you can see that the remove tag, which is the unsubscribed tag for GetResponse, is automatically getting included. Same thing with the viewing browser link; you've got that viewing browser link there as well. Now that we've finished creating this simple email, we can preview it in the Figma plugin just by clicking on the preview button, and that will allow us to view what the HTML is going to look like when it gets exported from the Figma plugin. We can check that out on mobile and desktop. You can apply mobile overrides as well if you want to. You can apply those through the settings panel. Again, I'm not going to be going through all these details or customizing them in this tutorial, but do feel free to play around with those and check out the documentation for more on that.

Once we're happy with the HTML, we can then close off the preview and click on the export HTML button in the Figma plugin. If you click on export HTML and then change the default HTML email option that's selected and scroll down to platforms, find the GetResponse option and click on that. Then what you want to do is either pre-populate the subject line and preheader text. So, we can call this test subject and we'll do a test preheader as well. And this will just prepopulate the preheader text that shows up after your subject line in the email clients.

Because we're going to be uploading this into GetResponse manually, this will add the subject line to your title tag. So, that will show up if someone clicks on the viewing browser link. That'll open up a new browser tab, and this subject line will get included in the title of the tab. But we will have to add this again manually in a moment. Now that we're happy with those details, we can keep the GetResponse item checked and click on the export for GetResponse button, and that will automatically generate all of the HTML for us and also download all the images into a zip file that we can then upload.

What you want to do is click on the download your zip file button and just save that anywhere on your computer. I'm just going to save it to my desktop. And you can see here that there's a couple of links, so we've got a link to the instructions to upload the folder or upload the zip file, and we've also got a link to the GetResponse templates page. So, if you click on that GetResponse templates page and you're logged into GetResponse, it should open up this page here, which is the my templates page in the GetResponse platform.

And what we want to do is double click on the zip file that we just exported, which will open up this folder here. So, you can see inside of the zip file that's exported from the Figma plugin, there's a few different files here. There's a previews page which just allows us to get a quick preview of the emails if you want to send that to clients or stakeholders. But importantly, what we want to upload is inside this Zips folder. So, there's a folder called Zips for upload to GetResponse, and you can see we've got our template that was exported in this ZIP file. So, this ZIP basically contains the HTML file and the images folder. It's basically these two files already prepped for you.

And we can now upload that into the platform by clicking on the create template button in GetResponse. Just give that a title, so I'm just going to call this test template from figma and just click on next. And then once that loads, you'll get another page in GetResponse that will ask you for what kind of template you want to create. So once that loads up, you can see there's obviously these predesigned ones which we don't want today. You can see your list of templates if you've already some at the moment. I don't have any in here, so what we really want to do to upload it is go to the HTML editor tab.

Under the designing content page, just go to the HTML editor tab and then click on this upload from zip option. It's important to click on this one. We don't want to paste in the code; we want to upload from zip. So, click on that. And then what you want to do is go back to the folder that you just unzipped from the Emailify export. Go into that zips folder where it says Zips for upload to GetResponse, click on that zip file, and then just drag and drop that zip file inside that zips folder into your GetResponse upload window here.

Once you drop that in, that will upload the zip file into GetResponse. And once it says it's ready for upload, just go ahead and click on the upload button. It's also worth being mindful that GetResponse does have a limit of 10 megabytes. So, if you've got some really large GIF files or image files in your email and that all exceeds 10 megabytes, it's unlikely that it's going to allow you to upload it. So just be mindful of that if you are uploading a very large email.

Once you've uploaded your zip, just click on the upload button, and that will upload your template and all of the images into GetResponse and it will create a brand new custom HTML template for you in your GetResponse account. You can see here that it's uploaded all of the HTML that we exported from the Emailify Figma plugin and you can see the preview on the right-hand side here, which is the same as the preview that we had in our Emailify plugin but this is now loaded into the GetResponse platform.

You can see our links are in there, we've got our unsubscribe tag viewing browser link, we've got this button here which we didn't actually link up but that's all looking really good. Once you're happy with it, you can either test and preview that or you can click on the save and exit button. So, I've just clicked on the save and exit button and you can see here that we've got our email template now under the my templates page. So, that's looking really good there.

Now that you've got that in there, you can basically use this template in your GetResponse emails and that's basically it. I just wanted to run through how to get the HTML email templates that you've designed in Figma using the Emailify plugin exported and uploaded as a zip file into your GetResponse account. So, hopefully, that's helpful if you're a GetResponse user and you're interested in creating some nice looking custom HTML emails. This is a really easy way to go about it if you're preferring to design them in Figma rather than using any of the pre-default kind of emails inside of the GetResponse template list. Thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to EmailOctopus using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-03-09T00:00:00.000Z
dateModified: 2024-03-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-emailoctopus-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-emailoctopus-using-emailify.md
---

# How to export HTML emails from Figma to EmailOctopus using Emailify

#### Video Transcript

Today, I'm going to be showing you a tutorial on how to export your HTML emails from Figma to the EmailOctopus marketing platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top, and if you search for Emailify and under the "Plugins" tab, if you click on the Emailify result, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here, and that will allow you to run the Figma plugin from your Figma plugins list. I've already clicked on the save icon, so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins," and then go down to "Saved plugins" and click on Emailify, and that's going to allow us to run the Figma plugin that we just saved a second AG go.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma, which you can then automatically export to production-ready responsive code, without needing to manually develop anything yourself. Today, I'm just going to keep it simple, and I'm going to create a template, just call it template example. You can also start with some preset templates if you want to get some inspiration on what can be designed with the Figma plugin, but for today, I'm just going to be creating a blank template, clicking on add new Emailify container. And as I mentioned, I'm not going to go through all of the design details today. If you want to check out how to design the emails, probably worth checking out some of the other video tutorials on the YouTube channel or going through the documentation.

Today, I'm just going to keep it really simple, adding a few different components without customizing them or changing any of the content. I just want to show you how to get this HTML template out of Figma and into the EmailOctopus marketing platform. So importantly, if you are designing your emails for EmailOctopus, you want to go down to the footer Tab and then click on the EmailOctopus footer option. So you've got this EmailOctopus footer that you can click, and that will automatically add a footer component to your design that pre-populates the correct unsubscribe links and viewing browser links. So you can see we've got our web version URL tag there, and we've got our unsubscribe URL tag there. There's also the address tag here, which will automatically populate the address details from your sender account. So that will automatically get added as well.

Once you're happy with your design, you can preview it in the Figma plugin by clicking on the preview button here, and that will automatically load up a real HTML preview of what the content's going to look like when it gets exported to production-ready HTML. I'm fairly happy with the design. You can check it out on mobile as well and apply any mobile overrides if you prefer. So you can override things like text sizes or you can override padding on rows and things like that. Again, today I'm just going to keep it really simple and leave everything as default.

Now we can export this by closing off the preview, clicking on the export HTML button in the Figma plugin, changing the default HTML email export option, scrolling down to platforms, and finding the EmailOctopus item. So go ahead and click on the EmailOctopus item, and then we can fill out our subject line. So you can put in your subject here and your preheader text. So the preheader text will come after your subject line when it's opened in Gmail or Outlook or anything like that. You will have to read the subject line in EmailOctopus, but the preheader text will automatically get included in the HTML. So it's still worth adding the subject line because it will add it to your title tag. So if someone opens up the email using the viewing browser link, the tab of the browser will contain whatever subject line you put in this input here in the Figma plugin.

Now that we've got those added, I'm just going to click on the export for EmailOctopus button, and that's going to automatically generate the HTML for us and export and upload all of the image assets. So once that's finished, just go ahead and click on the download your zip file button, save that to anywhere on your computer. I'm just going to save it to my desktop. I'm going to double click on that zip file and open up the folder, and you can see here that we've got a previews HTML file and also this folder here with our index.html file. So the index.html file is actually the one that we want to upload to EmailOctopus. So I'll show you how to do that now.

If you go to your EmailOctopus account, you want to go up to the templates option in the menu. So go to templates and click on that. And then to create a new template, we're going to click on the create button in the top right here. And I'm just going to say skip for now with this brand prompt. So I'm not going to set up my brand. I'm just going to skip because we've already got our brand in the HTML that we exported. And then what you want to do is go over to the left-hand side and click on the code your own option. So click on that code your own menu item on the left there. And then you want to go ahead and click on this little tile here that says code your own. So it's a little thumbnail. Just click on that, and that will open up a brand new fresh template that you can copy your own template code into.

I'm just going to call this custom HTML template from Figma. And then we want to basically go to this editor here, and we want to remove all of the default code that it adds. So we want to get rid of all of that. And we want to go back to our export. So if you open up your folder that you exported it from, go ahead and drag and drop the index.html file inside of your folder. So whatever you called the frame in Figma, that's what the folder will be named. Just go ahead and drag and drop that index.html file into this editor window here, and that will automatically include all of the HTML from the file that we exported from Figma into your EmailOctopus template.

You can see here we've got all of our code, and we've also got the preview, which is reflecting what we saw in our Figma plugin as well. So this is all of the HTML getting rendered. We've got our links here. We've got our CTAs, and everything's looking as we'd expect. So you can preview and test that. If you want to send a test to yourself, you can click on this send as a test, and that will let you send a test from EmailOctopus to your Gmail or your Outlook or whatever you prefer. And this is roughly what it's going to look like. So they're giving you this little preview, and you can check that out on mobile as well, just as we did in the Figma plugin too.

That's basically it; once you're happy, just click on the save button, and that will allow you to save the custom HTML template. It will take you back to your templates page, and you can see here we've got our custom HTML template that we just added ready to go. So you can now use that template in your sends from EmailOctopus, and that will be looking just as good as it did in the preview. 

I just wanted to show you how to export your HTML email designs from Figma created with the Emailify Figma plugin and get those into your EmailOctopus account, which you can then use to send custom HTML responsive emails with your campaigns or any other method that the platform supports. So thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Loops using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-03-09T00:00:00.000Z
dateModified: 2024-03-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-loops-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-loops-using-emailify.md
---

# How to export HTML emails from Figma to Loops using Emailify

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML emails from Figma to the Loops email marketing and transactional email platform with the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up here, and if you search for Emailify and then click on the Emailify Figma plugin under the "Plugins" tab, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here, and that will let you run the Figma plugin from your Figma plugins list later. I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," and then go down to "Saved plugins," and click on Emailify, and that's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it allows you to design HTML emails in Figma and then export those automatically to code without needing to manually develop anything. So I'm not going to be going through all of the design features today, but you can check out some of the other tutorials on our YouTube channel if you'd like to go through those, or you can start with a Figma template which is Emailify ready just to give you an example of the kinds of designs you can create using the Figma plugin.

I'm just going to keep it really simple today. I'm just going to call this example template and click add new Emailify container, and that will allow you to start adding components from the Figma plugin which you can then customize the content and design of for your own brand using the normal Figma tools that you're used to. So again I'm not going to be going through all of the design features today. There's a couple of other good tutorials on the channel or you can go to the documentation site to check those out.

If you are designing an email for the Loops platform, you definitely want to go to the "Footer" tab over here and just scroll down under the platform section to the letter "L" and find the Loops footer and click on that one. So clicking on that option will automatically pre-populate the unsubscribe link for the Loops platform. So this will add the unsubscribe link there, so you definitely want to add that in just as a required tag before uploading the email into Loops.

Now that we've got our email designed, we can preview that in the Figma plugin by clicking on the preview button here, which will automatically load up the real HTML that's going to get exported as a preview. You can test that out on mobile devices and desktop devices, and you can also apply any mobile overrides as well. So if you want to, for example, shrink some text or change the size of text or adjust padding on mobile and things like that, you can do that using the Figma plugin. But again, I'm not going to go into detail about that today. I'm just going to leave all those as the defaults.

Provided that you're happy with your preview and you're happy with your design, you can then click on the export HTML button in the Figma plugin and change this HTML email option and scroll down to platforms and again find the Loops platform. So you want to click on Loops, and you just want to make sure that you select the email you want to export. You can add your subject line here. Please be mindful that you'll also have to read the subject line in Loops later, but adding it here will also add it to your title tag in case anyone opens the email in their browser, and then the browser tab will also get this title tag populated with your subject. And then you can also add preheader text. So this is the text that comes after your subject line when someone's viewing it in Gmail or Outlook. So you can add all of your preheader text in here, and then you won't have to add it later because it will automatically get included in the template.

Now that we've got our subject line and preheader added, we can go ahead and click on the export for Loops button, and this is going to automatically generate the code for the Loops platform and allow us to save that to our computer. So now that it's finished exporting, we can click on the download your zip file button and just save that anywhere to your computer. I'm going to save it to my desktop.

And if you open up that zip file and then open up the folder that it creates, you can see here that we've got a folder called "_zips (For upload to Loops)." You'll notice that when we log into Loops as I'm already logged into, and then go to our templates page. So if you click on the templates page in the navigation and then scroll down to blank campaign. So if you click on blank campaign, create a new campaign from scratch, you can then go to this new campaign page. And what you want to do is click on this little upload a custom email button. So there's a little label that says upload a custom email with the icon with the up arrow. So click on that, and that will bring up this screen here which allows you to drag and drop a zip file, and you can see that it's asking for a zip file with an MJML file inside of it and the images also inside of the zip. So this is automatically being created by Emailify when you export the file. So you can see inside of this Zips folder it's already got the zip file that we're after, and we can just drag and drop that into the Loops upload field here.

We've just dragged our example template. zip into Loops. So now we can click on upload, and this will automatically upload the template along with all of the assets into your Loops campaign. So you can see here all of the HTML's being rendered as we'd expect. You can see all of the links so we got our unsubscribe link that we added for Loops and all of that's looking really good. As I said, you have to add your subject line again here so you've got subject subject line that you can populate which will get included in the send from Loops. And you can give your campaign a name so we can call that campaign name test.

That's basically it; I just wanted to show you how to upload your HTML emails from Figma into the Loops platform. This is going to be a really easy way to go about it just using that prepackaged zip file. For context, the contents of that zip file we can see just by opening up the zip here and what it contains is just a folder of images along with the index. MJML file so not an HTML file. Loops only accepts MJML which is a special type of email syntax that the Figma plugin generates for you automatically. So you don't have to worry about converting anything or doing anything special. You can just drag and drop the zip file inside of the Zips folder, and you'll be ready to go.

I hope that's been helpful if you've been using the Loops platform or you're just starting to use it with your team. It's a really great product, and I think this is a really easy way of getting custom designs in the platform if you want to design them in Figma first and then export them out to HTML for the Loops platform to send out in a campaign.

Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to MailerLite using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-03-08T00:00:00.000Z
dateModified: 2024-03-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-mailerlite-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-mailerlite-using-emailify.md
---

# How to export HTML emails from Figma to MailerLite using Emailify

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export HTML emails from Figma to The MailerLite email marketing platform.

To get started, all we need to do is go to our Figma file. Click on the little "Resources" icon up the top here. And if you search for "Emailify," under the "Plugins" tab, if you click on the Emailify item you can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this little "Save" icon here, and that'll allow us to run it from our Figma plugins list. I've already clicked on the little save icon so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins," and then go down to "Saved plugins" and click on the Emailify item and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma which you can then customize and export to production-ready responsive HTML automatically. So for this example, I'm just going to create a basic frame and I'm not going to go through all the design features in the Figma plugin today. If you're interested in those, there's a couple of other tutorials on the YouTube channel and in the documentation that I'd recommend checking out. But for today, I'm just going to be assuming that you've already added your Emailify components, designed out your emails and you just want to upload this to the MailerLite platform.

So you can see here, I'm just adding a few components. I'm not going to make this a very complicated email. The important thing to note is that you will need to add a MailerLite footer. So if you go to the footer tab in your Figma plugin and scroll down to the letter M, you'll see a MailerLite footer option. So just go ahead and click on that and that will automatically pre-populate these links down here with the MailerLite unsubscribe tag and the MailerLite View and browser tag so that will automatically render the correct links. You can style the footer as you like but those links will automatically be pre-populated. So just make sure you've got that footer added otherwise you may run into some issues later.

Now that we've got our email, we can preview that in the Figma plugin by clicking on the preview button here. So if you click on preview that will give you a quick HTML preview of what the code is going to look like when it's rendered as HTML and you can check that out on mobile and desktop. You can add mobile overrides if you want to add any of those styles. Again, I'm not going to go through all these features today but assuming you've got all these set up the way that you want and you're happy with the preview, you can go ahead and close that off and then click on the export HTML button in the Figma plugin.

And then just change this HTML export option and scroll down to MailerLite. So click on the MailerLite option and just select the email you want to export. You can optionally add a subject line and preheader text. I would add the preheader text here so add the preheader text in the Figma plugin. You can also add your subject line directly in this input here but just be mindful that you will have to add that subject line manually again once it's uploaded into MailerLite in a moment. So I'm going to add this in now just to add it into the plugin version which is still going to populate it in the title tag. So that will show up if you use the viewing browser link down here and you open up a new browser tab this subject line that you add in the plugin will get shown as the title in the tab of the browser tab. So you can still add it in here but you will have to add that subject line in a moment.

Now that we've got those added, we can just go ahead and click on the export for MailerLite button. This is going to automatically export and generate the HTML code automatically from Figma for MailerLite. Now that the export is completed, we can just go ahead and click on the download your zip file button, and we can save that anywhere on our computer. I'm just going to save that to the desktop.

I'm just going to double click on that zip file, open up the folder, and you can see here we've got our exported files. It comes with a previews page, so if you want to add a preview link to share with your stakeholders or clients, you can send them a copy of this and upload it somewhere, and they'll be able to preview that real HTML on mobile and desktop.

But the file that we're really looking for today to upload into MailerLite is this index.html file inside of the folder with whatever you've named your frame. So you'll see a folder in the zip file with an index.html file inside that. What you want to do is open up that HTML file either in a code editor or just in the browser. What you can do is you can copy that code by just right-clicking anywhere, going down to view page source, and then just select all and copy. So, copy all of the content of the HTML file into your clipboard.

Then what you want to do is log into your MailerLite account. So I've just logged into MailerLite.com, and I'm just on the dashboard. What we want to do is click on the campaigns menu item in the left-hand side here, and when that loads, we're going to select create new campaign. So go ahead and click on the create new campaign button there.

Click on the "Regular Campaign" option. Just click on that option there. Once that loads, you can then fill out your content for the campaign. So I'm just going to call this test campaign, and you can add in some subject line here, as I said. You can add in things like Dynamic content as well into the subject. I'm not going to go too crazy with that for now. I'm just going to be showing you what that looks like. The preheader, you can leave blank if you've already added in the Figma plugin. Otherwise, it may double up in the code. And then just select your recipients. So select the list you want to send it to and click on select. Once you've filled out all those details, just go ahead and click on this next button down here.

Then we want to click on the custom HTML editor option. So we don't want any of these first two. We want to go down to the bottom where it says custom HTML editor and click on continue. Once that loads, you will be able to import the HTML that we just copied from our index.html file. You can see down here there's a button that says import HTML. Go ahead and click on import HTML. Then click on the import code from file option. It says here you can import it from URL or paste your HTML. Just go ahead and click on the paste your HTML option. You can see it gives you this code window here that we can paste our code into. So I'm going to paste that in there now. You can see that immediately it loads up the preview based on the HTML that we copied from our index.html file. That's all looking really good. We can see that the HTML is all being loaded. The image content is also being loaded in. That's looking really good now.

You can then preview and test this if you want. You can either send yourself a test email or go into preview mode which will do something similar to the preview we were just looking at a minute ago where you can toggle it between desktop and mobile width to see what that looks like in here. You've got the option to do that as well. Once you're happy with that, you can just close it off and then click on done editing. Click on the done editing button and that will bring you back to your campaign. You can see here that the campaign is now ready to go. We've got our review and schedule page. We've got all our details that we added in the previous pages. All you would have to do now is select when you want to send that campaign based on the list that you selected and based on the other details that you added. That's basically it. If you want to, as a last step, you can also add a plain text version. So if you want to add a plain text version of the email, you've got the option by clicking on this little edit button here.

If you click on that Edit button, it tries to add a plain text version automatically. But if you want to use the one that's exported from the Figma plugin, you can do that by opening up this plain text version.txt file included in the zip file from Emailify. Open that up and just copy-paste all of the content from there into this window here. You can basically paste all that in there, and it will automatically include any links that you've added next to the copy that you've added the links to, and it will do a few more details like that just to make it a bit easier to read if you don't have the full version loaded up. This is the plain text version. If you're happy with that, just go ahead and click on save, and that will save the plain text version of the email as well. 

That's basically it. I just wanted to show you how to get your HTML emails exported from Figma and save those out to be imported into the MailerLite platform if you're using that for your HTML marketing. I'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Stripo using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-03-07T00:00:00.000Z
dateModified: 2024-03-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-stripo-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-stripo-using-emailify.md
---

# How to export HTML emails from Figma to Stripo using Emailify

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML email templates from Figma into the Stripo email platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file. If you click on the little "Resources" icon up here and search for Emailify under the "Plugins" tab, if you click on Emailify, you can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this little "Save" icon here, and that'll allow you to run it from your Figma plugin list. I've already clicked on the save icon so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on Emailify, and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design and export responsive HTML emails directly from Figma without needing to code anything or know anything about email development. So to get started, all we're going to do is just create a brand new email. So I'm just going to call this test template from Figma and click on add new Emailify container.

I'm not going to be going through all the design features of the Figma plugin today. If you are new to the Figma plugin and you want to learn more, there's a bunch of YouTube tutorials on the channel or in the Emailify documentation that you can look into, which will give you a deep dive into the design tools and how to customize emails for your own brand and design. But for today, I'm just going to be sticking with a really basic template that I'm just going to spin up right now. I'm not going to customize it. You can obviously customize this design and content for yourself, but for today, I'm just going to be keeping it really simple to show you how to upload this into the Stripo platform.

We've just got a few different components here, which we can then preview in our preview panel here by clicking on the preview button. And you can see here we've got our HTML as we'd expect, taking from the design. Again, I'm just going to keep this really simple and show you how to get this HTML into the Stripo platform. So all we need to do once you're happy with your email is click on the export HTML button in the Figma plugin.

Then just change this option up here from HTML email and go down to platforms and find Stripo. So click on Stripo. And then once you've added your subject line and preheader text if you'd like, then you can click on the export for Stripo button. I've just clicked on that, which is going to generate all of the HTML code export and upload all the images. And then we can just click on this download your zip file button here. And then we can save that anywhere on our computer. So I'm just going to save it to my desktop.

If you unzip that zip file and then open up the folder, you'll be able to see that we've got a previews page. And so this allows you to view a preview of the email. So you can see the desktop version, the mobile version, and you can send this to clients or stakeholders to approve the email. But for today, what we really want to do is get the index.html file inside of the folder here. So you want to expand your folder that you've named the same as your Figma template. So whatever your Figma template is called in the frame that's what the folder is going to be called here. And the file you want to get is the index.html file. So just go ahead and open up that file. You can open it up in a browser or a code editor. I'm just going to open it up in the browser.

To get the code, you just have to right-click anywhere on the page and click on view page source. And then you can grab the code by selecting all the content. So that's "Command + A" on Mac or "Control + A" on Windows. And then just copy that to your clipboard. So just either right-click and copy that or do a "Command + C" or "Control + C" to copy that to your clipboard.

Then you basically want to go to your Stripo account. So I'm already logged into Stripo. I currently don't have any emails added. So if you've got no emails on yours as well, the button you want to click on is this basic templates button. So in your Stripo doil account, click on basic templates under the email messages tab. So just go ahead and click on basic templates. And then you want to click on the my HTML option here. So you don't want the empty template. You definitely want this my HTML template. Otherwise, you're going to get a bunch of other stuff that we don't want. So go ahead and click on my HTML. And once that loads, you'll get the Stripo editor pop up here with a blank screen.

What we need to do now is click on this little code icon up here. So you can see where I've got my button hovered. So click on that little code button. And that's going to open up this code editor down here. So we don't want any of this code that is being included by default. So you're going to select all of that code, just select everything, and then we're going to paste from our clipboard. So "Command + V" or "Control + V".

Now that we've pasted in the HTML, you can see that it's instantly loaded up the template in our editor here. We can make small tweaks to this content. So if you wanted to remove certain bits of text or expand it, you can add in text there. Or if you want to change any of the images, you can click on an image that'll load it up in here. And you can see currently it's uploaded on the hyper Matic CDN. But you can change that out with your own image if you wanted to replace it. So you can click on replace image and then drag and drop an image from your computer or one that you've got saved in the Stripo platform. And you can automatically override those images if you like.

Alternatively, you can edit those in Figma and re-upload the content. It just depends on what you want your workflow to look like. So I'm going to upload one more Figma template just to show you how to do this if you've already got some messages or templates added to your email messages page here. And what you can do is click on this new message button. So go ahead and click on new message. And you want to click on my HTML again. And one more time, we're just going to click on the code button and select all and paste. And again, we've just added our template as well. So that was just exactly the same steps on that second part. The first part was just showing you the difference between loading the new message template or new template page with no templates added previously. So you get that little set of menu buttons here, which doesn't include this new message button. But once you've added at least one template, you can always add new ones using this new message button. So just make sure you click on that and that will always take you to the new message screen.

Then just click on my HTML. And once again, click on the code button to paste in your template. So whatever template you're exporting, I'll just export one more so you can see what it looks like. We're just going to export this GitHub template, which I've taken from the community. So if you browse some of the Figma templates that are included in the Figma plugin, that's the GitHub one there. So you can grab those for free of the Figma Community. There's an Emailify compatible out of the box, so you can grab that. 

I'm going to export that one, click on export HTML, change this to Stripo once again. So I'm going to click on the Stripo option, click on export for Stripo. And once that finishes exporting, I'm going to save that to my computer again. So this is just finishing uploading the images. I'm going to click download your zip file, save that to my desktop again, open up that new zip file, and open up the folder. And you can see here under the Emailify template, we've got our index.html file. So once more, I'm just going to drag and drop that into my browser. And you can see the content is all there. So we're going to right-click, go to view page source, so we'll copy all of the HTML go back to Stripo, and in our new template that we just selected a second ago, we're going to again paste all of that in over the top of the code there. So we're going to select all, paste. You can see we've got our content in here as we'd expect. So we've got our links. So if you wanted to add a link in here, you can add that in. So you could add that to github.com and that will automatically link that to github.com when it's clicked. So this is a really easy way to make content updates. Or you can just basically leave the content as it is from Figma and then send out the email from Stripo to whatever integration you're using with their platform.

That's pretty much it for today. I just wanted to show you a really quick tutorial on how to get your HTML emails out of Figma into the Stripo platform and into their editor using the Emailify Figma plugin. Thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add Outlook-compatible gradient buttons to HTML emails with Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-03-06T00:00:00.000Z
dateModified: 2024-03-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-outlook-compatible-gradient-buttons-to-html-emails-with-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-outlook-compatible-gradient-buttons-to-html-emails-with-figma-using-emailify.md
---

# How to add Outlook-compatible gradient buttons to HTML emails with Figma using Emailify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to create Outlook compatible gradient buttons for your HTML emails using the Emailify Figma plugin.

To get started, we just have to go to our Figma file, click on the little "Resources" icon up the top here. If you search for Emailify and under the "Plugins" tab, click on the Emailify item. You can run the Figma plugin by clicking on this "Run" button here or I'd recommend clicking on this little save icon here and that'll save it to your Figma plugins list for easy access. So, I've already clicked on the save icon. I'm going to go to my Figma canvas, just right click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on the Emailify item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design and Export HTML emails from Figma automatically. So, I've already got an email designed here that I've taken from the templates. So, there's some templates that you can duplicate for free from the Figma community that are Emailify compatible. So, these are sort of some pre-designed templates to give you some inspiration of what can be created with the Figma plugin. I'm not going to be diving into all of the design features today. I'm going to be assuming that you've already watched some of the other tutorials and read through the documentation to create your own Emailify design and I'm just going to be assuming you've already got that set up and you've got some buttons that are currently solid fills that you want to then convert into gradient buttons instead.

We're going to do that now. I'm just going to close off this little window and again just a really quick refresher if you need to add a button you can do that by clicking on the column layer in your designs then going to the button layer down here clicking on "Add" and that will add an Emailify button that you can then customize in Figma. You can also add a URL to that by clicking on the button layer then clicking on the little settings icon or settings button in the Figma plugin and you can paste in your clickable URL link there and that will automatically link the button to that URL later along with some other responsive features that you can customize to your own liking.

I'm just going to close that off and delete that new button and we're just going to focus on converting this one into a gradient button. So, all we need to do is click on our Emailify button layer, go over to the fills panel here and we're just going to click on that fill and we're going to change it from solid to gradient. So, just go ahead and click on this little gradient icon in the fills panel and automatically converts it into a linear gradient. So, all I'm going to do is change this second color to match this red from this logo here and you can see we've now got a darker red to a lighter red so we can change that however we like we can make that lighter or darker we can also adjust the gradient angle if you want to change that you can obviously change that to be vertical or you can flip it around today I'm just going to be keeping it really simple and making it a linear angle straight through the middle here.

Now that we've got that added in we can also adjust the Border radius I'm just going to make this 60 to make it a really big one you can actually turn that off or you can make it a small one it's totally up to you I just want to do this to show you how the radius is also going to work in Microsoft Outlook so these are Emailify buttons that are going to get exported with some special code to automatically work in Outlook which isn't usually the case so I'm going to show you what that looks like in a moment but first just to make sure we're happy with the design we're just going to click on the preview button in Emailify and this is going to show us what the HTML version looks like so you can see this is a real HTML button we can see what that looks like on desktop as well so that's looking really good.

I'm happy with that so now we can export this to HTML by closing off the preview clicking on the export HTML button in the Figma plugin and then you can export this to any platform you like if you're exporting it to a certain platform like MailChimp or Klaviyo go ahead and select that option option but for today I'm just going to be exporting it directly to my computer using the HTML email export option so I'm going to select that option I'm going to upload the images automatically so I've got that little toggle checked and I'm just going to leave the subject line in preheader blank for now so I'm going to click on the export to HTML button that's going to automatically convert the design into HTML code and upload all of the images and then we're going to be able to download the zip file to our computer once that finishes export in.

It's just finished exporting so I'm going to go ahead and click on the download your zip file button and I'm going to save that to my desktop I'm going to open that up by double clicking on the zip icon and then opening up the folder so you can see here we've got our export and you can see we've got a couple of files we've got the previews HTML file and we've got our index.html file so the previews HTML file is actually a preview file that you can send to clients or stakeholders so that just allow allows you to see what the design looks like on mobile and desktop at the same time on a really easy to browse page that you can share and then the actual HTML is inside of the Emailify template folder which is what we named our frame in Figma so if you open up that folder you've got the real index.html file here and you can see what that looks like by opening up in your browser and this is the HTML email code that we're then going to use for our send.

Just to show you what this looks like in Outlook as I said I've uploaded this HTML into Litmus which allows you to test your HTML emails across all different types of email clients and it's going to render the HTML in the real email client so these are real screenshots of real email clients so you can see here we've got Outlook 2010 running on Windows 10 so if we open up that preview you can see that the HTML that we sent to Litmus has been rendered in the real app so we can see what the HTML is going to look like when it's opened on Outlook 2010 in this case so the important thing to note is that we can see the gradient button is getting rendered as expected so this is a real HTML button this is real Rich text as we could see in the preview and you can see here that it's rendering the corner radius as well so we've got Corner radius and we've got gradients fully supported in the legacy Outlook apps which in notorious for being really bad for rendering things so we can see it's working as expected 2016 2019 20121 all of the clients there as you'd expect and of course the mobile clients as well so we've got outlook on iOS is also going to render that as we' expect so we've got our gradient buttons there and also we've got iPhone mail so Apple Mail as well also going to render that as expected this particular test I moved the button above the copy just to make it easier to see in some of those previews but it's the exact same design that we just created in Figma a moment ago.

I just wanted to show you what that looks like in these devices and as I said Gmail is also going to support these it's going to be pretty much supported across the board with the exception of Yahoo so Yahoo mail does not support this so what Yahoo will do is it will fall back to the solid color that you used in the first color in your gradient so so what I mean by that is you can see this dark red or purple sort of color here is being used in Outlook as a solid color you can see in Figma when we open that up it's actually taking the first color from our gradient so basically whatever we use is that first color in the gradient that will always be used as the fallback solid color if the gradient isn't supported in a certain email client which in this case is the Yahoo male client so that's what that looks like there.

That's basically it; I just want to keep this really short short to show you how to create these gradient buttons HTML gradient buttons that work in Outlook and all of the other modern email clients that you'd expect to support it but most importantly all of the legacy Outlook versions and Outlook apps on windows are going to render this as we expect directly from our Figma designs so I hope this gives you a little bit more flexibility when you're creating your email designs where you can now add gradient buttons and buttons with Corner radiuses which will now get supported automatically for these legacy Outlook clients when you export the HTML from Figma using the Emailify Figma plugin so that's what that looks like there.

I hope that's been helpful if you've been wondering how to create bulletproof gradient buttons that you can use in your HTML email designs and still have them look great in even the worst clients which are obviously the Outlook browsers and Outlook email clients that we've all grown to deal with the problems of so this should make that process a little bit smoother and remove some of the headaches when it comes to troubleshooting and figuring out how to code these buttons to work in Outlook so thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Compress Figma exports for web performance
description: How to keep Figma exports lighter so websites and campaigns load faster.
datePublished: 2024-03-05T00:00:00.000Z
dateModified: 2024-03-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/tinyimage-compress-figma-exports-for-web-performance/
markdownUrl: https://www.hypermatic.com/articles/tinyimage-compress-figma-exports-for-web-performance.md
---

# Compress Figma exports for web performance

How to keep Figma exports lighter so websites and campaigns load faster. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for compress figma exports for web performance when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How TinyImage fits into the process

TinyImage matters in this workflow because production does not stop at design quality. Teams still need smaller files, cleaner exports, and faster pages. Keeping compression in Figma removes one more manual handoff.

With TinyImage, teams can usually:

- reduce file size without adding another optimization tool to the workflow
- export lighter assets for web, email, and paid campaigns
- keep performance and handoff cleaner from the first export

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [TinyImage](/tinyimage/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If export weight or delivery speed is the problem, TinyImage usually pays for itself quickly. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to export HTML emails from Figma to Zoho Campaigns using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-03-05T00:00:00.000Z
dateModified: 2024-03-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-zoho-campaigns-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-zoho-campaigns-using-emailify.md
---

# How to export HTML emails from Figma to Zoho Campaigns using Emailify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export HTML email templates from Figma to the Zoho Campaigns platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up the top here. If you search for Emailify and under the "Plugins" tab, click on the Emailify item. You can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this little "Save" icon here. That will save it to your Figma plugins list for easy access. So, I've already clicked on the save icon. I'm going to go to my canvas, just right click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on the Emailify item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it allows you to design and then export responsive HTML emails from Figma to code automatically. If you're new, you can either start with a blank frame or you can browse some of the templates. So, if you want to start with a template or just see what's possible with the Figma plugin, you can duplicate any of those. Today, I'm just going to keep it really simple and create a new template called Zoho Campaigns and click on add new Emailify container. Then you can basically go through and start designing your email.

I'm not going to be going into detail about how to design the templates themselves. I'm just going to run through that really quickly. I'm just going to assume you've already got that created if you haven't gone through those features before and you want to learn more, there's a few tutorials on our YouTube channel that you're welcome to check out and those will give you a comprehensive overview. Today, I'm just going to be going through some of the basic features of the Figma plugin to design it just to get a quick template spun up.

You can see here, I'm adding a bunch of components. You can obviously customize these content-wise and design-wise in the Figma plugin. But the last thing you just have to make sure of before you upload the template in a moment is go to the footer tab and then scroll all the way down in this platform section to the bottom. You want to find the Zoho Campaigns footer. So, click on Zoho Campaigns and that's automatically going to add a footer pre-populated with the correct unsubscribe and view in browser links. So, if we inspect those in the Figma plugin, just click on the little settings button up here and you can see that we've got our viewing browser tag and our unsubscribe tag added in automatically and also the company address merge tag at the bottom too. So, those are basically good to go.

Now, we can upload this to Zoho. So, what you want to do is go to the export HTML button in the Figma plugin and click on that. Then you want to click on this little HTML email option here and scroll down to the platform integration section. Go all the way down to the bottom to find Zoho Campaigns. Then just click on the export for Zoho Campaigns button. You can also add an optional preheader text. So, this is the text that appears before your subject line in the email client. You can add your preheader text and subject line. So, the subject line will get added to the title tag in your HTML file but you will still need to add it manually in Zoho Campaigns in a moment which I'll show you once we export it. So, go ahead and click on export for Zoho Campaigns and that's going to now export your HTML email from Figma and let you download it to your computer. We're going to click on download your zip file and then just save that anywhere on your computer to your desktop if you prefer and click on Save.

Then just double click on the zip file to unzip that and that's going to open up this folder here. You can see we've got a previews page. So, this is the page that'll let you preview your HTML file. So, if we open that up in the browser and just drag and drop that in, you can see we can get a preview page of what that's going to look like on desktop and mobile. So, you can scroll through that. These are good for sending to clients for approvals as well but the file that we want to use to upload into Zoho Campaigns is actually inside the named folder here. So, this is going to be named the same as whatever you've called it in Figma. So, we've called it Zoho Campaigns. So, you want to go into that folder, go to the index.html file. So, you can see we've got this index.html file and that's actually the one that includes our HTML that we're going to use in a moment.

Now that we've got that open, we want to go to Zoho Campaign. So, just log into your Zoho Campaign account, go to the campaigns tab on the left, click on that and then click on email campaigns. So, we want to go ahead and click on the create campaign button. So, I'm just going to click on that now and then what we want to do is just go to regular email. So, I'm going to click on create new under regular email, give it a name. So, we'll just call it "Test campaign from Emailify" and click save and proceed. This is going to give us a blank campaign that we can now import our content into.

As I said, we still need to populate the subject line manually. So, you can add a subject line here that's going to be used if you've already added the preheader in Emailify, you don't need to add it in here, otherwise, it's going to double up. So, just leave that blank and click save and then you'll need to add your sender details. So, go ahead and do that, add your list. So, go ahead and do that and once you've done that, you want to then go down to here where it says create content. So, click on the create content button and here we basically want to click on the import upload HTML option down here. So, go ahead and click on import upload HTML and then click on upload from computer and then you want to go over to this Le hand option here where it says upload or drag and drop your HTML file.

We're going to do that now by opening up that folder that we just had and you can see here the index.html file inside of our folder. We want to grab that file, drag and drop it into the little window here and that's going to drag and drop the index.html file in as you can see and once you've done that just go ahead and click on the upload button and this is going to upload the HTML file. The HTML file already has the image assets uploaded so you don't need to worry about that. You can just drag and drop that file directly from your folder into Zoho Campaigns. So, you can see now that I've uploaded it, we've got it imported into our campaign. So, if we click on this little magnifying glass you can see that the HTML has been imported that we exported from Figma that's now opening up in Zoho Campaigns as we'd expect.

That's looking really good. We can close that off now and again you can go through all these options yourself there's a few different options that Zoho Campaigns gives you. I wouldn't recommend manually editing the HTML because it's already been pre-optimized but you do have the option to do that if you want to. The other thing worth noting is if you want to add a plain text version. So, you can see here there's this little edit button for the plain text version. If you want to do that you can see here that it's tried to already do it itself. If you want to update that or create a more Advanced version the Emailify exports automatically include a plain text version that you can see here. So, we can actually just copy paste that and drop it into our plain text window here and that's going to automatically include things like links so this button doesn't have a link on it but if it did you would get the actual HTTP link inside of the plain text version as well. So, that's something that you can do if you'd like to. You can just add the plain text version in manually. So, go ahead and click on Save and that's basically it. We've just added our custom HTML template that we exported from Figma using Emailify and we've dragged and dropped that into our Zoho campaign and we can now send this out to any list that we like and that's going to look really good.

That's basically it, I just wanted to keep it really simple for today. If you are using Zoho Campaigns this is a really easy way of getting the HTML out of Figma and into Zoho Campaigns for your email sends. So, thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Best Figma plugins for design QA
description: The best Figma plugins for design QA when you need faster implementation checks and fewer visual regressions.
datePublished: 2024-03-01T00:00:00.000Z
dateModified: 2024-03-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-design-qa/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-design-qa.md
---

# Best Figma plugins for design QA

Design QA is where good intentions go to die.

Everyone agrees the build should match the design. Nobody wants to spend hours manually comparing screens, leaving vague feedback, and arguing about whether something is “close enough”.

The best Figma plugins for design QA are the ones that make those differences easier to see and easier to fix.

### Pixelay

[Pixelay](/pixelay/) is the clearest fit here.

It lets you compare Figma designs against real URLs using overlays, split views, and other comparison modes. That makes it much easier to catch visual regressions, spacing issues, and implementation drift before the work ships.

For design QA specifically, it is hard to beat because it focuses on the exact moment where teams usually lose time.

### Commentful

Once QA issues are found, they need to be communicated clearly. [Commentful](/commentful/) helps organize feedback so the review cycle does not turn into a scattered list of screenshots and disconnected comments.

### Weblify

[Weblify](/weblify/) also helps upstream, because better code-oriented inspection and handoff can reduce QA problems before they happen. If engineers can inspect design output more clearly, fewer details get lost in translation.

### TinyImage

Some QA issues are really export issues: oversized images, poor asset formats, or files that were not optimized correctly for the final environment. [TinyImage](/tinyimage/) helps close that gap from the asset side.

### The best setup for QA-heavy teams

If design QA is a persistent pain point, start with [Pixelay](/pixelay/). Add [Commentful](/commentful/) if the review cycle itself is messy, and [Weblify](/weblify/) if handoff quality is contributing to the problem.

That combination usually gives teams a much cleaner path from Figma to shipped UI.

---

---
type: article
title: Favicon checklist for website launches
description: A favicon checklist for launches so icon assets do not become a last-minute production task.
datePublished: 2024-02-17T00:00:00.000Z
dateModified: 2024-02-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-favicon-checklist-for-website-launches/
markdownUrl: https://www.hypermatic.com/articles/favvy-favicon-checklist-for-website-launches.md
---

# Favicon checklist for website launches

A favicon checklist for launches so icon assets do not become a last-minute production task. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for favicon checklist for website launches when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Favvy fits into the process

Favvy is useful here because favicon work looks tiny until it becomes a launch checklist item with too many formats and sizes. Turning that into a direct Figma workflow saves time and reduces omissions.

With Favvy, teams can usually:

- export favicon sets without piecing together each file manually
- handle launch-ready icon outputs faster
- keep website icon production tied to the source design file

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Favvy](/favvy/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If icon exports are the task, Favvy is the cleanest solution. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to design and export Email Signatures from Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-02-08T00:00:00.000Z
dateModified: 2024-02-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-design-and-export-email-signatures-from-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-design-and-export-email-signatures-from-figma-using-emailify.md
---

# How to design and export Email Signatures from Figma using Emailify

#### Video Transcript

Today, I'm going to be showing you how to design and export HTML email signatures from Figma using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up the top here. Then, if you search for "Emailify" and click on the "Plugins" tab, you can then click on the Emailify result and run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this little "Save" icon here. That's going to let us run the Figma plugin from our right-click menu in a moment. I've already clicked on that save icon, so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins," and then go down to "Saved plugins" and click on the Emailify result. That's going to run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design and export HTML emails from Figma. So, we can get started by just creating a new Emailify frame. We can give this a name of email signature template in this case. Then, I'm just going to click on the add new Emailify container button. That's going to create a new Emailify frame on our page that we can then use to insert components from the Figma plugin.

Today, I'm just going to be skipping over all of these other content components because we're going to be focusing on email signatures specifically. So, these are going to be used more for HTML email marketing templates as opposed to a small email signature. Instead, we're going to go over to the footage tab here and then click on the signatures subcategory. This is going to give us a few preset starter components for creating an HTML email signature really easily. I'm just going to use this simple one at the bottom down here, and I'll show you how we can customize that in Figma.

You can see after I click the layer, it's just basically adding all of the Figma layers and layout to my Emailify frame. We can customize this by using our own content as well. For example, if I want to swap out the logo, I can drag and drop my own logo from my computer into the Figma file and then just drag and drop that directly into the column. You can see here we've got a few different layers in there. I'm just going to get rid of the original image that was in there. So, I'm going to get rid of that one, and we can then obviously customize the text. So, I can put my name in there, I can add my role, customize the phone number, customize the website, all of that sort of stuff.

You can obviously style these as well. So, if we wanted to make these bold, you can do that for some stylistic reasons. You can change the color. So, if you wanted to change the color of that text, you can certainly do that. We could make it Pink in this case if we felt like that. And you've really got creative control over the typography and imagery and layout. So, you can adjust the item spacing, for example, if you wanted to make those narrower or larger, you can adjust the item spacing in the auto layout properties here. If you want to customize this further, you can certainly do that as well.

For example, if we were to click on the column layer inside of our signature row, you can see down here there's some options to add new elements. If you open up that dropdown list, you've got a bunch of options for different elements that we could add in. For example, we could add some social icons. So, if you click on the add social option and then click on the add button, that would automatically give us a social icon link here. So, we can add some spacing above that and customize those icons. So, for example, if we don't want the Facebook icon and we don't want the YouTube icon, you can delete those and then click on the social layer again and then go down here to choose more social icons that you can add in as well. So, we might want to add in a slack link so you could add a slack icon there, you could add a WeChat link, so all of these social icons can be added in there, and you can apply links to those just by clicking on any of those social icon link layers going to the icon layer settings button in the Figma plugin, and then you can just add a clickable URL in there. So, you could add a link to your website or link to your social media page, and that will automatically get included as a link.

The same thing goes for your image. So, if you want to link that image to your website, you can click on the image layer and again paste in your clickable link URL into that link field here. So, for example, we could add a link to the website there, and that would automatically make the link clickable. So, we've just added links to those. We can also preview the signature. So, if we click on the preview button in the Figma plugin, that will give us a little bit of a preview. So, you can see here this is the real HTML version of the content. You can see here it's got a link on the logo, it's got a link on the social icon as well, and you can see this is all rich text that's selectable. So, that's basically what the signature is going to look like. You can disregard this outer email body color that's not going to get included for the email signature export option which I'll show you in a moment. You can go ahead and close off the preview.

Once you're happy with your HTML email signature design in Figma, you can export that to an HTML signature by clicking on the export HTML button in the Figma plugin, and then you just want to change the HTML email option up here to be HTML email signature instead. So, click on the HTML email signature option, and once you've got that selected, you can then go ahead and click on the export to HTML signature button, and that's going to automatically generate the exported HTML and image assets that you can download as a zip file.

You can see here it's telling us that our email signature code is ready to download, so we can go ahead and click on the download your zip file button. If you click on that, you can then save the zip file to your computer. So, I'm just going to save it to my desktop, click on Save, and then if I double click on the zip file to unzip it, you can see the contents of that file is here. So, we've got our HTML email signature template; this includes our images which have automatically been uploaded during the export process. We've also got our index.html file inside of the folder, so that is actually our production-ready code. For example, if we go to our browser and open that up, we can drag and drop that in to have a look at it. So, if you open that up, you can see here that this is our email signature; all the code is there, and you can also see that we've got a preview page as well. So, we've got this that we can open, and that's just going to give us a little preview of what it's going to look like on small screens and and large screens, and importantly it's also got this really useful button that is called copy HTML signature. So, if you click on that button that's automatically going to copy the production-ready HTML from this index.html file to your clipboard. So, you can see if I paste here in this text field all of that HTML has been copied to my clipboard and I can now paste that.

The reason why that's so useful is that we'll see in a moment there's going to be a way to copy and paste that HTML into the email client that you're using. So, what you want to do is click on that copy HTML signature button in the previews HTML page that we just opened and then you want to go to the Emailify documentation page, there'll be a link to that in the video description below as well, and what you want to do is scroll down on the left side panel here all the way down here to the exporting email section and you want to go down to the email signatures option down here. So, you want to expand that out and what you want to do is find your HTML email client platform.

You can see we've got Apple Mail, we've got spark, we've got Gmail yahoo outlook.com, so you want to go through those and find the correct one for you. So, depending on what email client you're using this is going to be different depending on what email client that you need to insert the signature to so you can see here it's got the instructions for how to copy the HTML signature and then it gives you step-by-step instructions on how to get to the place where you need to paste that code in and then it'll give you some step-by-step instructions and tips if there's anything to be mindful of. So, you just want to find your client go through those steps in the documentation and again take that HTML that you've copied from the preview page and paste it in wherever it's required based on the steps here. So, you can see in the airmail example there's a place in the account settings under signature where you'll be able to paste in that HTML.

Again you just want to follow those steps to show the right place to paste in that HTML and then you'll get your email signature looking as expected. So, that's basically it for today. I just wanted to go through that experience of creating the HTML signature in Figma and then exporting it to HTML and pointing you to the documentation for how to actually then add this email signature into your email client to be sent out along with your messages.

So, I hope that's been helpful if you've been wondering how to create HTML email signatures without hand coding them this will hopefully save you a lot of time by being able to design them in Figma and then have the code automatically exported to an HTML email signature package that you can then download and use for you or your team with your custom email signatures. So, thank you as always for watching and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: How to create a complete favicon set from Figma
description: What a full favicon workflow from Figma looks like when you need every required size and format.
datePublished: 2024-01-30T00:00:00.000Z
dateModified: 2024-01-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-how-to-create-a-complete-favicon-set-from-figma/
markdownUrl: https://www.hypermatic.com/articles/favvy-how-to-create-a-complete-favicon-set-from-figma.md
---

# How to create a complete favicon set from Figma

What a full favicon workflow from Figma looks like when you need every required size and format. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for how to create a complete favicon set from figma when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Favvy fits into the process

Favvy is useful here because favicon work looks tiny until it becomes a launch checklist item with too many formats and sizes. Turning that into a direct Figma workflow saves time and reduces omissions.

With Favvy, teams can usually:

- export favicon sets without piecing together each file manually
- handle launch-ready icon outputs faster
- keep website icon production tied to the source design file

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Favvy](/favvy/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If icon exports are the task, Favvy is the cleanest solution. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to export Plain Text emails from Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2024-01-23T00:00:00.000Z
dateModified: 2024-01-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-plain-text-emails-from-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-plain-text-emails-from-figma-using-emailify.md
---

# How to export Plain Text emails from Figma using Emailify

#### Video Transcript

Today, I'm going to be showing you a really quick Figma tutorial on how to export your HTML email designs from Figma to also include plain text versions using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up the top here. If you search for "Emailify" and click on the "Plugins" tab, you'll be able to run the Figma plugin by either clicking on this run button here or I'd recommend clicking on this little save icon here. That'll save it to your Figma plugins list for easy access later.

I've already clicked on the save icon, so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins," then go down to "Saved plugins" and click on the "Emailify" item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma, which can then be automatically exported to code using the Emailify Figma plugin. I'm not going to be going through all of the design features in this tutorial. I'm going to assume you've already followed along with some of the other tutorials and documentation to get your Emailify template ready to go, and I'm going to assume you've already got it ready to export to HTML.

Today, I'm just using one of the templates that you can use from the template Gallery over here. I'm just using the GitHub template as a quick example, and I'm going to export this now to show you what it looks like as a plain text version of that email.

You can see here that I've got a few links in here. I've got a link in the paragraph, I've got a button link down here, which is being set through the settings panel up here, and I've also got my unsubscribe link down here. I'm going to show you what that looks like when we export it.

If you click on export HTML and then click on the HTML option or any other platform integration that you want to select and just click on export to HTML, that's going to export the email design from Figma automatically to a zip file. I'm just going to download the zip file, open that up from my desktop.

If we open up the folder and then open up the Emailify template, which is the frame that we called the design in Figma, you can see here there are two different files. There's an index.html file, so that one is the actual email template in HTML. If I open that up in my browser, you can see here that we've got the HTML version looking really good as we'd expect. So, that's your HTML version.

But now we've also got the option to have a plain text version as well. You can see we've got this plain text version.txt file. If I go ahead and open that up in a text editor, I'm just going to open it up in GitHub Code Studio for now and I'll just wrap the line so you can see that a little bit easier.

You can see here that the plain text version of the email has been automatically included as a text file. So, you can see our content from the HTML is all getting included. This is a plain text file; there's no HTML in here. You can see the headline's been included, but also the links have the HTML URL in brackets next to them. So, you can see next to the signup text, which is a button in our design, we've got the button here that links to github.com. In the plain text version, those links automatically get converted into just plain text with the actual link next to it in brackets.

Anyone who's reading the email in plain text, which some email clients do, then they'll be able to click on that link or view that link without having the HTML version accessible to them. So, I just wanted to show you that really quick tutorial. This is a new feature that's been included in the Figma plugin. This will automatically always get exported alongside your HTML file. So, whenever you export your emails from Emailify to a zip file, you'll always have the plain text version right next to the index file.

This won't affect anything in your index file; it's a completely separate file that you can use. Sometimes you have the option of including a plain text version; some email marketing platforms actually require a plain text version. So, this is a really easy way for you to copy and paste a plain text version of your HTML emails into those platforms.

And just finally touching on the other platforms, as I mentioned, if you do select one of the other platform options, for example, if you're selecting one of these integration options here like Salesforce or Pardot or Klaviyo or something like that, the HTML and the plain text version will automatically be uploaded if that's supported. If the API for the marketing integration supports uploading a plain text version, then the Figma plugin will automatically take the content that we just looked at in this file here, and it will automatically upload that to your email marketing platform.

Again, this is going to depend on which platform you're using, but if it's supported, the Figma plugin will automatically include that. So, you don't really have to worry about it when you're uploading your emails.

As I said, that was a really quick tutorial. I just wanted to show you that feature, which has just been included in the Figma plugin. Please feel free to try it out, and hopefully, that helps your workflow if you are needing to convert your HTML emails into a plain text version to use with your email marketing platform.

Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Website icon pack generator
description: How to generate a complete website icon pack from Figma for launches and redesigns.
datePublished: 2024-01-13T00:00:00.000Z
dateModified: 2024-01-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-website-icon-pack-generator/
markdownUrl: https://www.hypermatic.com/articles/favvy-website-icon-pack-generator.md
---

# Website icon pack generator

How to generate a complete website icon pack from Figma for launches and redesigns. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for website icon pack generator when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Favvy fits into the process

Favvy is useful here because favicon work looks tiny until it becomes a launch checklist item with too many formats and sizes. Turning that into a direct Figma workflow saves time and reduces omissions.

With Favvy, teams can usually:

- export favicon sets without piecing together each file manually
- handle launch-ready icon outputs faster
- keep website icon production tied to the source design file

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Favvy](/favvy/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If icon exports are the task, Favvy is the cleanest solution. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: Favicon generator for Shopify stores
description: How to create favicon assets for Shopify stores from one Figma source file.
datePublished: 2023-12-27T00:00:00.000Z
dateModified: 2023-12-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-favicon-generator-for-shopify-stores/
markdownUrl: https://www.hypermatic.com/articles/favvy-favicon-generator-for-shopify-stores.md
---

# Favicon generator for Shopify stores

How to create favicon assets for Shopify stores from one Figma source file. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for favicon generator for shopify stores when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Favvy fits into the process

Favvy is useful here because favicon work looks tiny until it becomes a launch checklist item with too many formats and sizes. Turning that into a direct Figma workflow saves time and reduces omissions.

With Favvy, teams can usually:

- export favicon sets without piecing together each file manually
- handle launch-ready icon outputs faster
- keep website icon production tied to the source design file

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Favvy](/favvy/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If icon exports are the task, Favvy is the cleanest solution. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: From Three to Four
description: Looking back on 2023 (and towards 2024) as we celebrate Hypermatic's fourth birthday.
datePublished: 2023-12-21T00:00:00.000Z
dateModified: 2023-12-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/from-three-to-four/
markdownUrl: https://www.hypermatic.com/articles/from-three-to-four.md
---

# From Three to Four

>“We run this spot like a Chinese sweatshop. Don't stop, work a worker 'til chest pop.” 

— [Run The Jewels](https://www.youtube.com/watch?v=G-S9mtYowPY), Oh My Darling (Don't Cry)

It's been exactly one year since posting an update for Hypermatic's 3rd birthday ([From Two to Three](https://www.hypermatic.com/articles/from-two-to-three/)), so here's another annual recap to celebrate Hypermatic turning 4 years old today!

### Some numbers to celebrate from 2023

- **0** investors and **$0** funding (still happily bootstrapped/[default alive](http://www.paulgraham.com/aord.html))
- **1** brand new product shipped ([Weblify](https://hypermatic.com/weblify))
- **30** free Emailify-ready [Figma templates](https://www.hypermatic.com/templates/emails/) published
- **97** new YouTube [tutorials](https://www.youtube.com/@hypermatic_tutorials) recorded
- **639** new product updates and improvements shipped
- **1,029,000** users (up from 570,000 a year ago)

### Some new feature highlights shipped in the last 6 months (since July 2023)

Besides the usual bug fixes, customer requests, and other smaller enhancements, these were some of the other new features that made their way into the [@hypermatic](https://x.com/hypermatic) feed on X (which is mainly used to keep a record of these changes) over the last 6 months:

- [Responsive borders](https://x.com/hypermatic/status/1738405967107404069) to Emailify
- [Custom Font settings](https://x.com/hypermatic/status/1733986176657399963?s=20) to Emailify
- [Chart Builder feature](https://x.com/hypermatic/status/1731138686178500899?s=20) to Pitchdeck
- [PDF Image Downscaling](https://x.com/hypermatic/status/1729342584500396303?s=20) to TinyImage
- [Image Fills Downsizer](https://x.com/hypermatic/status/1727158906412249297?s=20) to Pitchdeck
- [GIF Transition Effects](https://x.com/hypermatic/status/1726436972766613511?s=20) to TinyImage
- [Blueshift integration](https://x.com/hypermatic/status/1725631592629248332?s=20) to Emailify
- [Klaviyo Product Feeds](https://x.com/hypermatic/status/1725289149832544505?s=20) to Emailify
- [SVG support for Spreadsheet Syncing](https://x.com/hypermatic/status/1721014540304031968?s=20) to CopyDoc
- [Campaign Monitor integration](https://x.com/hypermatic/status/1720015810188681247?s=20) to Emailify
- [Automatic Slide Tidying](https://x.com/hypermatic/status/1718845872690299299?s=20) to Pitchdeck
- [Slide Layouts](https://x.com/hypermatic/status/1717407340528550398?s=20) to Pitchdeck
- [PowerPoint Master Slides](https://x.com/hypermatic/status/1714153625222864905?s=20) to Pitchdeck
- [Hover Fade Transitions](https://x.com/hypermatic/status/1711963830409216495?s=20) to Bannerify
- [XD Component States](https://x.com/hypermatic/status/1709334281099812970?s=20) to Convertify
- [Spreadsheet Row Sync Overrides](https://x.com/hypermatic/status/1706185566696710632?s=20) to CopyDoc
- [30+ Video Design Tutorials](https://x.com/hypermatic/status/1705061101019484319?s=20) for Emailify
- [Emailify Templates](https://x.com/hypermatic/status/1701415452042555799?s=20) to Emailify
- [Selzy integration](https://x.com/hypermatic/status/1697132693077827740?s=20) to Emailify
- [Wrap and Min/Max Width support](https://x.com/hypermatic/status/1696759403276644841?s=20) to Weblify
- [Localized Frame Layouts](https://x.com/hypermatic/status/1695970823293775908?s=20) to CopyDoc
- [Versioned Review Links](https://x.com/hypermatic/status/1695629937380851902?s=20) to Commentful
- [OneSignal integration](https://x.com/hypermatic/status/1695274773159506348?s=20) to Emailify
- [Feedback Activity Overview](https://x.com/hypermatic/status/1694233057669316985?s=20) to Commentful
- [Slack Integration](https://x.com/hypermatic/status/1691332435836076032?s=20) to Commentful
- [Masked Animations](https://x.com/hypermatic/status/1689881973563801600?s=20) to Bannerify
- [Figma Variables content library integration](https://x.com/hypermatic/status/1688444831067230208?s=20) to CopyDoc
- [Markdown support for Content Snippets](https://x.com/hypermatic/status/1687991011010854913?s=20) to CopyDoc
- [Review Thread Replies](https://x.com/hypermatic/status/1687271382185607168?s=20) to Commentful
- [Custom Downscale sizes](https://x.com/hypermatic/status/1686619309903400960?s=20) to TinyImage
- [Airtable Content Library integration](https://x.com/hypermatic/status/1686159605108523012?s=20) to CopyDoc
- [Google Sheets Content Library integration](https://x.com/hypermatic/status/1685813746093137920?s=20) to CopyDoc
- [CSV Imports/Exports for Content Snippets](https://x.com/hypermatic/status/1683718649851568128?s=20) to CopyDoc
- [Placeholder Content](https://x.com/hypermatic/status/1683292331209031681?s=20) to CopyDoc
- [Text Expander Snippets](https://x.com/hypermatic/status/1682999254963621888?s=20) to CopyDoc
- [SendPulse integration](https://x.com/hypermatic/status/1679268052469432320?s=20) to Emailify
- [Masonry Image Grids](https://x.com/hypermatic/status/1678648196036284417?s=20) to Emailify
- [Tailwind support](https://x.com/hypermatic/status/1678222861440544770?s=20) to Weblify
- [Dev Mode support](https://x.com/hypermatic/status/1676800083940249602?s=20) to Weblify

### New feature videos for all plugin pages

Earlier this month, I wanted to make an effort to replace all of the screenshots of the Figma plugins on this website with short video screencaps instead.

This was partly to do a complete overhaul of all these images, as many of them were visually outdated since the Figma plugins had been updated quite a lot since they were first taken, and also to provide a way to show off each feature with more detail by using video.

The product pages for [all our Figma plugins](https://www.hypermatic.com/#plugins) have been updated with new short feature videos as of today, along with a brand new 60-second overview video with all of our 12 plugins, which you can watch at the top of the home (or [Pro Bundle](https://www.hypermatic.com/bundle)) page of this website now.

### Security docs for all of our plugins

Our Figma plugins have always been designed to do as much as possible inside of the Figma file itself, without needing to upload, process or store anything outside of the plugin; ensuring that as much as possible stays inside your Figma page and any exports are downloaded directly to your local computer. 

To help make this more clear, there are a two additional resources that are now available to reference:

Every Figma plugin has its official [Figma Network Access permissions](https://www.figma.com/plugin-docs/making-network-requests/#specify-network-access) displayed in the [Figma Community](https://www.figma.com/@hypermatic), which shows what domains each plugin can access.

There is also a dedicated [security page](https://docs.hypermatic.com/security) for every Figma plugin, which goes into detail about exactly how they work, and what they can and can't do.

### DesignOps Melbourne talk

In August, I gave my first talk in 3 years at DesignOps Melbourne; the talk was called [Take the Pink Pill (why Best Practices™ are dead ends)](https://www.youtube.com/watch?v=4dXCy3XH6YM), where I was making the case that we've slid way too far into following "best practices" and accepting the dogma of how things have always been done, instead of thinking of more innovative ideas and trying new things. 

I gave some thoughts into why I think this happens, the challenges that make it hard to break out of, and also offer a way forward, where AI and automation will serve as an uncomfortable forcing function to help get us out of this stagnation over the coming years.

I think that many parts of the talk will become more obvious when we look backwards at this very early AI stage in the coming years, as we see more automation and AI become a normal part of our workflows, which is going to raise lots of questions as to what a designer (or developer) really is, if lots of the "pixel pushing" type work is no longer a large part of the role anymore.

### Optimistic (and mindful) about AI for design

The points that I wrote about on AI (for Hypermatic, specifically) in [the July 2023 update](https://www.hypermatic.com/articles/company-flow/#the-ai-elephant-in-the-room) have held up over the last 6 months.

While I remain even more optimistic and excited about the developments (I also think we should be [accelerating](https://www.nytimes.com/2023/12/10/technology/ai-acceleration.html), not [pre-regulating](https://www.wired.com/story/eu-ai-act/) or [stopping](https://futurism.com/ai-expert-bomb-datacenters) it) and future potential of AI for our workflows, based on the reasons I mentioned in that update, I still don't think it's the right time to be jumping head first into prioritizing adding AI into our Figma plugins.

The plan is to continue building all of the plugins in a way that will lend itself to adding AI as a compliment them where it actually makes sense in the future; as impressive as some of the AI services already are, I think the best results will still come from coupling AI to automate _parts_ of different workflows, rather than trying to replace them entirely (eg. just having a ChatGPT-like prompt to create an entire presentation or website design without any human input).

This is the space I have personally been tracking the most closely for the last few years, so I'll continue to watch all of these developments and identify ways that these could be used to add value (not just for the sake of it) in our Figma plugins and products.

In the meantime, with Figma [expanding their own AI team](https://www.figma.com/blog/ai-the-next-chapter-in-design/), I expect that many of the more obvious that ways AI can help with design will be shipped as native features to Figma over the next few years; so again, I don't think it's useful to double up the work on these features here, so I'm happy to wait and add Hypermatic specific AI enhancements when the time feels right.

### <s>Four</s> seven day work weeks

I personally haven't taken a single full day off for working on Hypermatic in the last 4 years, since founding the startup back in December 2019.

Since the lockdowns and surge in work from home (WFH) of 2020-2022, there has been lots of debate over the ideal number of days, hours and locations to work from for the optimal amount of productivity, freedom and happiness. 

I think these are interesting questions that we should be studying the effects of, with all different companies pursuing their own approaches of full time office work, full time remote work, or more commonly some kind of hybrid between the two.

Closer to home here in Melbourne, there are [active trials](https://www.medibank.com.au/livebetter/newsroom/post/four-day-work-week-gains-momentum-medibank-set-to-launch-trial) of 4 day work weeks at some companies, where: 

>Beginning this month, the experiment will be based on the 100:80:100 model, whereby employees maintain 100% of their pay, reduce their working hours to 80%, while maintaining 100% productivity.

I'm still not sure how that formula is supposed to work, and I think a better formula in almost all companies would be to _maintain 100%+ of their pay, reduce their **meeting** hours by 90%+, while boosting 200%+ productivity_, but I am interested to see how these experiments play out.

I can relate to John Carmack (lead programmer on the video game _DOOM_) [talking about work](https://www.youtube.com/watch?v=Cj1q7arJATM), where he mentions the obvious (but somehow controversial) statement that _"working longer gets more done"_, even discounting that you are less effective after working a certain number of hours straight in a day.

I still work on Hypermatic every day (including weekends) because there's nothing else I would rather be doing, and I think having an (admitedly, _extreme_) consistent habit of showing up every single morning (no matter what) helps maintain momentum and compounds into something much bigger after keeping it up for a long time. 

I think that as long as you are doing work that is interesting and enjoyable, while saying "no" to as many things that aren't enjoyable or interesting, you can get a really good days worth of work in and feel totally refreshed and excited each morning, as long as you can also get a solid ~8 hours of sleep each night and still make time for other important (non-work) aspects as life.

Momentum and drive are really hard to get back after you lose it, so I think one way of avoiding that is to default to applying much shorter time frames to tasks than might be estimated in a "normal" company. Not only does this help get things shipped to customers much faster, it also avoids projects or tasks dragging on _way_ longer than they need to, which is a total motivation and momentum killer.

I also think it's good to be overly optimistic and try to overshoot what you can get done in 6-12 months; it's easy to lose momentum and have things that used to take a few days early on in a startup end up taking a few weeks, due to just have less sense of urgency as things become less uncertain and stable over time.

### Looking ahead to 2024 for Hypermatic

The reason I mention the importance of keeping momentum and a strong sense of urgency is that in 2024, I really want to make a huge dent in my plans for developing [Weblify](https://hypermatic.com/weblify) into something really special and useful, while also exploring and developing brand new ideas that I haven't really seen tried or executed well before.

Doing that kind of work is both very exciting and challenging, because nothing is certain and things don't always work the way you think they will; which is to say that some days will feel like nothing is going to work, while other days will feel like you're on top of the world (as Marc Andreessen put perfectly in [Why not to do a startup](https://pmarchive.com/guide_to_startups_part1.html)).

Besides the top priority of delivering [extreme customer service](https://www.hypermatic.com/#testimonials), and improving/maintaining all of our existing Figma plugins, the next year (and beyond) will be very focused on experimenting, designing/building, and iterating with real customers on getting Weblify to become a really valueable product for helping Figma users to design and build useful things for the web, in a way that is at least 10x easier and more compelling than any "best practices" to do that today.

I'm really excited about getting a fresh start on this next month to kick-off 2024, and I'm sure that I'll have lots more to share in the next big mid-year update post in July 2024.

---

---
type: tutorial
title: How to embed custom web fonts in HTML email exports from Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-12-11T00:00:00.000Z
dateModified: 2023-12-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-embed-custom-web-fonts-in-html-email-exports-from-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-embed-custom-web-fonts-in-html-email-exports-from-figma-using-emailify.md
---

# How to embed custom web fonts in HTML email exports from Figma using Emailify

#### Video Transcript

Today I'm going to be showing you how to embed custom web fonts into your HTML emails with custom web-safe fallback fonts using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file. Click on the little "Resources" icon up here, and if you click on that and search for Emailify, then under the "Plugins" tab, click on the Emailify result. You can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here, which will save it to your Figma plugins list for later. I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," and then click on the "Emailify" item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it helps you design HTML emails in Figma, and then you can export those to production-ready HTML with one click later. I'm going to be showing you how to do that. I'm not going to be going through all of the features; there are more in-depth Emailify Figma tutorials on the YouTube channel if you want to get into detail about how to design the emails. Today, I'm really just going to be focusing much more on how to add custom web fonts and font fallbacks to your text layers inside of the email design.

To get started, I'm just going to add a new template. I'm going to call this template example and add that to my Figma file. This is a special type of frame that will allow you to add these Emailify components directly into your template. I'm just going to create a really, really simple template. I'm just going to add some of these predefined components. I'm not going to customize them too much. You can obviously go through and change these to your liking, so you can swap out content, images, colors, styles, everything like that. Today, I'm just going to be focusing mostly on the text and showing you how to embed custom fonts and web-safe fallback fonts as well.

I'm just going to add a few of these components here. I'll just add a couple more just to show you a few different font examples. So there we go. I'll just add those in for now, maybe add one more split block just so we got a bit of variation there, and we can apply some different fonts. Okay, cool. So that's what the template's currently looking like.

If we go to our preview tab, just click on the preview button. This will load up a live HTML preview of your email so you can see it directly in the Figma plugin. There, it's rendering as we'd expect. We've got the font set to the default Figma font, which is just "Inter." So we've got "Inter" set on all of these layers, but we want to add some different fonts.

If we go to our web browser here, I've got this website loaded up called CDNfonts.com, and this has a bunch of different fonts. I think there's like 20,000 fonts on this site. I've already downloaded and installed these two, so I've got this "Echelon" font and this "Spline Sans" font. I'm just going to apply those in Figma by going to my text layer, and if I search for that font, we've got this "Echelon" font there. I can select that one and adjust that size if I want to, so I can bump that up because the font's a little bit smaller. I've also got this other font, "Spline Sans Mono," so this is a monospaced font. I'm going to apply that to this layer here. So if we search for that one, we've got this new font, "Spline Sans Mono." So I'm going to select that and apply that to a couple of these other layers as well. We can apply it to our content layers too. So I'll just apply that one there and show you what that looks like.

The other thing I'm going to do is also apply a web-safe font to show you what that looks like. So, for example, a web-safe font would be something like "Arial." So we'll just select "Arial," and I'll show you why I'm selecting that in a second, just so we can compare these three different types of fonts.

Now that we've got those new fonts added, I'm just going to refresh my preview again, and you can see here, because I've got my custom fonts selected, those are now rendering in the email. So we've got these fonts here, and those are showing up because I've got them installed on my computer. Obviously, because we can select them in Figma, that means these are already installed at a system level. But when we send out the email, the users of our emails aren't going to have that font installed necessarily. It's a very low chance that they would. So what we want to do is embed the font links or custom font URLs into the email so that when we send out the email, the clients that support custom emails will be able to see those fonts.

I'm going to show you how to do that now. So if you go down to this little "Configure Fonts" button at the bottom of the preview window, I'm just going to click on that "Configure Fonts" button now. You can see here that we've got a few different options. We've got a list of our fonts. So you can see we've got our "Echelon" font, the "Inter" font, "Spline Sans Mono," and "Arial." These are all the fonts that are being used in our current email. So those are automatically going to get listed in this little window here.

We can do a couple of different things. The first thing we can do is specify a fallback font. A fallback font is going to appear if the email client that the user is reading your email with doesn't support custom fonts. This is a very important point. There's only a handful of clients that actually support custom web fonts in emails. If you click on this little link here, that will take you to the "Can I email" page here, which will show you the support level for custom fonts.

You can see here it's mostly Apple Mail, so Mac OS, iOS, the Apple Mail app. Gmail doesn't support them at all. Outlook really doesn't support them at all, unless you're on Mac OS, and then they do. But otherwise, it doesn't really support them. And again, other random clients like Samsung Email, Thunderbird, and a few other random email clients down here. But overall, the support is very low. So this is the reason why we want to add fallback fonts.

In this case, we've got this "Echelon" font, and it's kind of a bulky font. So what we want to do is select a web-safe font that is close to that. I know that we can change this to different sans-serif fonts here, but these are all fairly thin. So I'm going to select the "Impact" font, which you can see a preview of here, which is somewhat closer to the custom font that we're using here. So I'm going to leave that one as "Impact."

Then I'm going to go down here, and for our "Inter" font, which is a Google font, I'm just going to set the fallback for that one to "Helvetica." You could also use "Arial"; "Arial" will be the default. So I'm just going to use "Helvetica" in this case. You can see there's a little note here saying that Google font URLs are automatically embedded. So what that means is if you're using a font in Figma that's part of the Google Fonts range, so fonts.google.com are all the Google fonts, those will automatically be detected, and the embed URLs will be included automatically.

For our other custom font up here, we've got this "Echelon" font. What we need to do is actually populate this little input here with a link to the custom font file. As I mentioned before, because the users aren't going to have the font installed, we need to embed that web font directly into the HTML itself. The way we can do that is if we go back to our CDNfonts.com page, and you can see here, it's got some links to the font. So I'm just going to open up those links. You can see I've copied that URL here, and we're not going to be copying this content here.

What we want to do is open up the page that it's linking to, which is this one. And we want to grab a link to the WOFF file. So that's WOFF is the font file. So I'm going to highlight that link. I'm just going to copy it to my clipboard, and I'm going to go back to Figma and paste that in here. So where it's got the little link field, I'm going to paste that in, and you can see we've now pasted in a link directly to the WOFF font file. So this is the custom font file. So you want to make sure that's the correct font for the font that you're loading up here.

And you can see down here we've got another one for "Spline Sans Mono." First of all, I'm just going to set the fallback font to a monospaced fallback font. So we've got some monospaced fonts here. If I select that, you can see that it's changing to a monospaced type font, which is much more similar to the monospaced custom font we're using. You can pick whichever you feel suits best. I'm just going to use "Courier" for this one. And again, we've got two different variants for this font. So we've got "Spline Sans Mono Bold" and "Spline Sans Mono Regular."

If we go back to our link here, we've got our "Spline Sans" page. Just going to copy-paste that link again, open that up here, and what you want to do is copy-paste these fonts again. So I'm just going to copy-paste that into here, and I'm just going to make this one italic. So this one will be italic. And I'm just going to refresh that. So if we go back here and jump back in, I'm just going to refresh this little "Configure Fonts" thing, and that will load up the mono italic font, which is actually the one that I want to embed. So I've got the regular one, which is here, and then I've got the italic one here. So I'm going to copy-paste that into my italic field, and now we're good to go.

You can see here I've got my, again, just a recap, I've got my two custom fonts, which we have to specify the links to the file to. You might have this hosted on your own website. So if you've got a custom font that isn't on a CDN, most of them are, but if you're hosting your own, you'll paste your own WOFF link into here. It might be a WOFF2 file. And then you're obviously going to set those font fallbacks. So you want to do that for all of your custom fonts.

At the bottom here, you'll notice that the Arial font is already a web-safe font. So you'll remember that we set the Arial font on these layers, and because that's already a web-safe font, we don't need to specify a fallback font or a custom embed link for those ones. So those are the three types: web-safe fonts, totally custom fonts, and custom Google fonts.

Now that we've run through those, I'm going to go back to my preview and close that off. This is going to refresh the preview, and you can see here that we've got this other toggle called "Show Fallback Fonts." So I'm going to toggle that "Show Fallback Fonts" on, and what that does is it allows us to preview the email with the fallback fonts only. So you can see here that we've got our "Courier" font, our "Impact" font, and down here, we've also got the "Courier" font set. So what that's doing is essentially taking the fallback fonts that we specified under these dropdowns like these ones and it's previewing the email, showing you what the email is going to look like for an email client that doesn't support custom fonts.

As we showed before, there's only a handful of clients that do support custom fonts. So for the majority of users, people on Gmail, people on most Outlook versions, this "Show Fallback Fonts" toggle enabled is actually what they're going to end up seeing. You want to be really mindful about how the email is going to look to most of those users, most of your users, in fact, depending on what devices they're using, and you want to make sure those fallbacks are set to something that is going to still look nice. So if they don't support the custom monospace font here, it will automatically fall back to "Courier." So that's what that looks like there.

The other thing to note is that if you did want to make sure that the custom font is loaded, you would basically have to embed that into an image. So for example, if we took this text layer here and dropped it into an image layer, so if we drop that inside of an image itself, I'll just bump that down a little bit so we can actually see the content. If you embed text into an image, that will obviously get included inside the image as part of the image. So if we refresh the design here and have a look at that, you can see that the image itself has the custom font in it. So even with the fallback font toggle, obviously that's not going to affect it because it's just purely an image. So if you really do need a custom font guaranteed to render correctly or visually correctly, then you might want to consider using it as part of a design element inside of an image layer. So anyway, that's what that looks like there, and of course, you can configure these to be any kind of fallbacks you want.

If, for some reason, you wanted the monospace font custom font to actually just fall back to a very regular type of font, like a Sans serif font, you can set that to be Sans serif as well. And if we close that off and refresh that, you can see here we've just updated it. So, without the fallback font enabled, if the custom font can be supported, you'll get the custom monospace font. Or if you don't have the support for custom fonts, and we show those fallback fonts again, you can see that now it's reverting to aiel. So, it's totally up to you. I would keep it consistent and try to keep it in the same font family. So, in this case, I would set it to something like Courier, and you can load it up like that. And it'll be fairly close to the original font. So, that's what that looks like. So yeah, that's basically it. I just wanted to run you through the different options that you have for embedding custom fonts, setting fallback fonts, which again are very important, being very, very mindful of the support level being quite low for custom fonts. So, keeping them as more of a progressive enhancement.

And when you're finished with your email design, just as a last step, if you close out of the preview and you want to actually export the email, you can do that instantly by clicking on the export HTML button up here and selecting the platform. So, you can either just download it to your computer as an HTML .zip file, or if you're using a marketing platform, you can select one of those here. If you're using something like Klaviyo, you can drop your API key in there and upload it. In this case, I'm just going to do a really quick export to HTML. You can set your subject line and preator here if you want, and I'm just going to export it to HTML in this case, generate that HTML, export the images, and then download the zip file to your computer. So, if you click on that button and then just save that to your computer.

I'm just going to save it to my desktop, and if I unzip that file, open up the folder, you can see here that the HTML has been exported to this file here. So, we can see what that looks like if we open up the preview HTML file. This will just give us a nice little preview overview. This is good if you want to send it to clients. It'll give you a desktop version and mobile view that you can preview in the browser. And we can see here that our custom fonts are being loaded in as we'd expect. So that's looking really nice. And then the actual email template itself is in this other index file here. So, the real template export is this index.html file inside of the nested folder in your zip file. So, that's the raw HTML that's going to load up your content. So, that's what your exported HTML looks like there. Again, you can't preview the fallback fonts now because we've already got the custom fonts installed on our computer. But if you were to open this email in your email client like Outlook or Gmail, you would see the fallback fonts that we previewed in our HTML preview over here, just with that toggle turned on in Gmail or Outlook, you would see these fonts instead of the custom fonts. So always be sure to test out the emails in those clients before you send it out. But yeah, this is what the fonts are going to look like with the fallbacks enabled.

Thank you for walking through this Figma tutorial. I hope that's been helpful if you've been wondering how custom fonts work inside of HTML. It's a little bit more complicated than a website, for example, because of the support level being so varied as we looked at in the can I email list. But if you do want to use the custom fonts as more of a progressive enhancement for your email designs, then you can now do that using this configure fonts option in the Emailify Figma plugin and set those fallback fonts as well. 

That's going to give you a little bit more design flexibility if you need to use your own custom third-party web fonts for your own brand design guidelines. Just make sure that you have that hosted somewhere and be sure to drop in that link into this field here. Otherwise, the email obviously won't load up that font. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Apple touch icon generator from Figma
description: How to generate Apple touch icons from Figma without assembling every file by hand.
datePublished: 2023-12-10T00:00:00.000Z
dateModified: 2023-12-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/favvy-apple-touch-icon-generator-from-figma/
markdownUrl: https://www.hypermatic.com/articles/favvy-apple-touch-icon-generator-from-figma.md
---

# Apple touch icon generator from Figma

How to generate Apple touch icons from Figma without assembling every file by hand. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for apple touch icon generator from figma when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Favvy fits into the process

Favvy is useful here because favicon work looks tiny until it becomes a launch checklist item with too many formats and sizes. Turning that into a direct Figma workflow saves time and reduces omissions.

With Favvy, teams can usually:

- export favicon sets without piecing together each file manually
- handle launch-ready icon outputs faster
- keep website icon production tied to the source design file

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Favvy](/favvy/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If icon exports are the task, Favvy is the cleanest solution. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to automatically create Charts in Figma from CSV file data using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-12-04T00:00:00.000Z
dateModified: 2023-12-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-automatically-create-charts-in-figma-from-csv-file-data-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-automatically-create-charts-in-figma-from-csv-file-data-using-pitchdeck.md
---

# How to automatically create Charts in Figma from CSV file data using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to automatically make charts in Figma from CSV files using the Pitchdeck Figma plugin. To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up here. If you search for Pitchdeck and click on the "Plugins" tab, then on the Pitchdeck item, you can run the Figma plugin by either clicking on this run button here. Alternatively, I'd recommend clicking on this little save icon here, which will let you run the Figma plugin from your Figma plugins list.

I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on Pitchdeck. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it allows you to take any top-level frames on your Figma page and automatically load those into the Figma plugin to create presentations as slides. Today, I'm not going to be going through all of the features of the Figma plugin. If you're interested in all of the other features that I'm not going to be covering, you can check out the Pitchdeck playlist on the YouTube channel. Today, I'm just going to be focusing on how to add charts from your CSV files.

To get started, all we need to do is go down to our little button down here that says "Add Slides/Charts." If you click on that button, that's going to bring up this window here. By default, it's going to default to the slide layouts panel. We just need to go over and click on the chart Builder tab. If you click on chart Builder up there, you'll get presented with this view here.

You can see that there are basically three steps to automatically making a chart in Figma. First, select the chart type you want. We've got a few different options here. The default is bar chart; the other one is a column chart. We've also got a line chart, an area chart, a combo chart (which lets you do multiple line charts in one), a donut chart, a pie chart, a scatter chart, and a stepped area chart.

So depending on what kind of data you want to present, you can select whichever one of these suits you best. Once you've selected your chart type (for the moment, I'm just going to leave it as the default bar chart), then step two is we need to add some chart data. The way we do this is by loading in a CSV file with your own data. For an example of what the CSV file should look like, all of these different charts come included with a sample data CSV file. Whenever you change the chart type, you'll see that the link here changes as well. If you want a really easy way of knowing how to structure your data, just go ahead and click on that little link.

So if we click on that link now, we can then save that to our desktop. I'm just going to click on Save, and we can see if we open up this file. I'm just going to open that up now in Excel, open up the sample file we just saved, zoom in a little bit so you can see it, and here we go. It basically allows you to quickly download a sample CSV file containing the data structure for the different types of charts.

For example, we can see here we've got the header (values or labels), and then in each column, we've got our side labels and the values for each of those labels. These correlate to the items in here, so you can see that we've got a value label and then all of the side labels and the numbers that we've got added in here. What we want to do is instead of using this sample data, we want to update this to our own data.

I've prepared one earlier, so I'm just going to open that up here so you can see that one as well. You can see here I'm using the exact same format, and I've just changed the labels and some of the labels down here and the values here to reflect some stats for some of these Figma plugins and how many likes they've received. All I've done is just taken that sample data, updated it, and then re-saved that CSV file.

Now that I've got that saved, I'm just going to drag and drop that file into my Figma plugin in this little Drop Zone area here. I've just dragged that from my desktop; I'm going to let go in the drop zone area, and it will instantly load in all of that data from the CSV file. You can see here that the chart has changed; it's updated the chart with all of the labels. It's got the likes label that we added to the header, all of the values are down here, and you can see that the different chart bars have different values and lengths as well.

We can get an overview of what that looks like here, and we are actually able to customize these if you want to make small tweaks in the Figma plugin. For example, we can edit this to be larger or smaller, and that will reflect in the preview over here. You can also change things like the label; if we want to change this to something else, you can add that there, and you'll see it reflect over here in the preview.

But for today, I'm just going to leave that as likes. Once you're happy with the data, you've imported your CSV data, all you need to do is go to the third step, which is to add the chart slide to Figma. Go ahead and click on the add chart slide to Figma button, and that will instantly render your chart that we just designed in the Figma plugin in your Figma file.

You can see here if I drill down into these layers, this is all vector data. For example, we could actually edit this in Figma; we can arrange that line to be smaller or longer, we can edit these text layers (these are all real text layers in Figma), so we can change that to be whatever we want. And of course, the values are also editable as well. If you want to edit that manually in Figma, you can definitely do that.

You can also obviously change things like colors. If you wanted to change the colors, you could just click on that layer, go to your selection colors down here, and you can just change that instantly to any other color that you want. That's a really quick way of styling the graph once you've already added the chart into your Figma page. Of course, you can also do things like change the font sizes and things like that as well. These are just regular Figma text layers; you can bump those up to be really whatever you want, and those will automatically get changed.

It also adds a title onto your slide as well. We could call this Figma like stats, and that would update that there. You can, of course, get rid of that as well if you don't want a title; you can just hide that or delete the layer. And you can obviously move this around or scale it, really do whatever you want with it. So that's what that looks like there, and of course, you can apply this to any other chart type as well.

If we wanted to add a donut chart, you could just drag and drop your CSV file back into the Figma plugin, and that would automatically populate the donut chart as well. So we can again add slide to Figma, and that will add our donut chart as well. Again, these are all totally editable. If you wanted to change any of these colors, you can easily do that just by changing the colors in your Figma selection, and you can really just customize the look and feel to suit your own brand or your own presentation design. So that's what that looks like there.

That's a really quick overview of how you can use this chart Builder feature inside of the Pitchdeck Figma plugin to easily spin up charts in Figma. You can make these totally custom; the data is again all based on whatever you load into it from your CSV file. Just download the sample file, customize the CSV data using Excel or Google Sheets or even a code editor if you wanted to; it's just a plain text CSV file. You'll be able to generate these charts really quickly based on whatever chart type you prefer.

I hope that's helpful for making different types of charts in Figma automatically from your CSV data. Feel free to give it a go for yourself or with your team, and hopefully, it improves your workflow and speed of creating interesting graphs and charts in your Figma presentations. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to reduce large file sizes for heavy PDF exports from Figma using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-11-28T00:00:00.000Z
dateModified: 2023-11-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-reduce-large-file-sizes-for-heavy-pdf-exports-from-figma-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-reduce-large-file-sizes-for-heavy-pdf-exports-from-figma-using-tiny-image.md
---

# How to reduce large file sizes for heavy PDF exports from Figma using TinyImage

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to reduce large file sizes for heavy PDF exports from Figma using the TinyImage Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up here. If you search for TinyImage and then click on the "Plugins" tab, click on the TinyImage result, and then you can run the Figma plugin by either clicking on this run button here. I'd recommend clicking on this little save icon, and that's going to allow you to run the Figma plugin from your saved Figma plugins list later.

So, I've already clicked on the save icon. I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on TinyImage. That's just going to run the Figma plugin we saved a second ago.

The Figma plugin has a bunch of different features that allow you to export and compress images from Figma. But for today, I'm just going to be focusing on creating PDFs that have a much lighter file size than the native Figma exports.

To get started, the first thing I'm going to do is go to my create PDF button. In the Figma plugin, if you click on create PDF and then make sure you've got a couple of parent Figma frames, frames that are directly on your page rather than nested inside of other elements. As long as you've got a couple of those, those should come up here. If you have added them since opening the Figma plugin, just click on this little refresh icon. That's just going to refresh any parent frames that you've got on your page.

This is going to allow us to create a PDF with multiple frames in a single PDF file. You can customize which PDF frames go in there and the order of those layers and things like that. Make sure you have checked this "Downscale large Figma image fills" toggle. Click on that toggle, then change this option over here. What that's going to do is make sure that any image fills on your layers, for example, each of these layers has an image fill applied to them here. A lot of the time, you'll get these images from your computer. They'll be really large, high-resolution images. Those are going to get exported along with your PDF normally and really blow out the file size.

This toggle allows you to automatically downscale those fills in Figma. It'll make sure that they never exceed the multiple scales of whatever you selected for your layer size. For example, if this image fill is 4,000 pixels wide and 4,000 pixels tall, toggling this option on and doing it to 2x the layer size will automatically downscale that image fill to be a maximum of 800 to 900 pixels in width and size. This is really going to shrink down your image fills, as we'll see in a moment.

Now that I've got that "Downscale large Figma image fills" toggle enabled and I've got this set to 2x, which is going to give me a really good file size compression, then I'm just going to click on export PDF. You can see here that it's downsizing the PDF image fills, and you can actually see them getting swapped out in real-time. It's downscaling any images that require downscaling. You only really need to do this once the first time, and then any subsequent ones will be much faster because it's already downsized those images.

Once the PDF compression finishes, go ahead and save that to your computer. I'm just going to save it to my desktop, click on Save, and you can see here it's saved us a total of 22.5 MB. The original export of these two frames from Figma would have been almost 30 MB, and running it through the compressor with the downscale option enabled has saved us 79% of the file size that we would have had originally. Now it's just got it down to 6 MB, which is a great saving, and you can see on the desktop, we've got the PDF there. We can open that up and show you what that looks like, and you've got your two pages automatically exported.

If we go back, I'm also going to show you how to export these as individual PDFs as well. Maybe you don't want to always export your PDFs in one file; you might want to do it in multiple files. The first thing you need to make sure you've got set up is for these parent frames or really any frames you want to export to PDF from your page. Just make sure you've got the export setting applied down here. For example, if I remove that and then refresh the layers in here, it'll say that there are no layers on the page that have any export settings. If you see that, it just means you haven't applied export settings to your layers yet.

I'll just show you what that looks like now. If you click on the frames you want to export to individual PDFs, click on those frames, go down to export down here in the bottom right-hand corner of your column, click on this little export plus icon down in the bottom right, and then change the PNG default option to PDF instead. Once you've got PDF selected, just go back to TinyImage and click refresh exportable layers. That'll automatically pick up on those export settings, as you can see here. It's telling us that we've got our PDF setting applied to that one.

This will allow you to export these two different frames as individual PDF files. If you're coming from this upfront and you're not even going into the PDF menu over here, what you just want to do is go to the settings panel, click on the little settings icon in the left of the header in the Figma plugin, and you'll see the same options down here for the PDF. It'll say PDF image fill Auto downscaling. Just make sure that downscale large Figma image fills is enabled, and then again select this option to be whatever you like. I'm just going to leave that at 2x, close that settings panel off, and now that we've got our PDF export option selected, just go ahead and click on this blue export button in the top right of the Figma plugin.

Once you click that, you can see it's processing each of those PDFs individually. Because we've already downsized and downscaled our PDF fills, you can see it's going through those much quicker this time. It's essentially just checking that they have been downscaled and checking for any new layers that haven't been downscaled yet. The export process is much faster with subsequent runs. I'm just going to save that to my desktop, and because we've exported two, it's going to export them as a zip file. I'm just going to open up the zip file. If we open up that folder, you can see we've got our two individual PDF files exported there — the dark one and the light one. We can preview those as individual files, as you can see here.

The dark one, and you'll notice that the file sizes are also much smaller. You've got 3.3 MB per PDF. If we check out the stats in the compression output here, you can see that it's basically scaled each of them down from about 15 MB down to 3 MB. Very consistent 79% saving compared to the other one that we did as well. So there we go, we've saved about 24 MB there. The other thing that you can play around with is the DPI. You might notice that I've had the DPI set to 300. We've got 300 DPI set here, so we can change that to be 150. You can do that in the create PDF output as well, so you can see the DPI slider here. We can change that, so you can set that to 150, and that's going to basically, again, perform more performance on the compression side.

If you go all the way to 72, the images are going to look not that great. 300 DPI is like print quality, and then 150 DPI is actually more set for screens. You might want to play around with that one. I'll show you what that looks like now. If we re-export this PDF merged PDF at 150 DPI, you'll notice that the, again, the downsizing is much quicker because it's not actually downsizing anything again. Now it's optimizing the pages, and we can save that. If we click on Save and replace the one that we had there already, you can see that this time it's actually increased the file savings even more. It's gone down from 30 MB down to under 3 MB, and it saved us 90% compared to the original large Figma export.

We can open up that merged PDF, and you can see here it's looking really good. We've got a 90% file size saving without really any noticeable quality loss. That's a really good option. I actually do recommend exporting at 150 DPI if you're just using the PDF for screen purposes. If you are sending it to print or you're displaying it at really high resolutions, then 300's probably better. But 150 DPI is what I would typically recommend for the most optimal quality to file size saving ratio coupled with the downsizing toggle, downscaling toggle that we went through before. Those two things are going to make a huge difference to really large file sizes that are normally coming out of the Figma native PDF exports.

That's a fairly comprehensive way of showing you how to get your PDF file sizes down when you're exporting them from Figma. I know that sometimes the file sizes can be really large, way too big for emails and things like that. This is going to allow you to really easily and automatically optimize those PDF file sizes to suit your own needs, depending on if it's print or screen or anything like that.

It's also really handy just to finish up on if you're noticing that your Figma file is crashing when you're trying to export PDFs. Sometimes this happens if you've got PDFs or frames with really high-resolution images. Figma basically has a memory limit that's constricted to about 2 GB because it runs in the browser. If you are noticing that your file is literally crashing or freezing up as you're trying to export PDF files from Figma using this option, the downscale option is going to save you a lot of headaches by automatically doing that and really making the export process much smoother because those large high-res images are really going to be memory-intensive for Figma when you're exporting and can cause it to freeze or crash in some cases.

Hopefully, that's useful if you run into that problem too. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: How to share private design links with clients
description: How to share private design links with clients when password protection and control matter.
datePublished: 2023-11-23T00:00:00.000Z
dateModified: 2023-11-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-how-to-share-private-design-links-with-clients/
markdownUrl: https://www.hypermatic.com/articles/crypto-how-to-share-private-design-links-with-clients.md
---

# How to share private design links with clients

How to share private design links with clients when password protection and control matter. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for how to share private design links with clients when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Crypto fits into the process

Crypto matters here because design sharing is not always public or lightweight. When security, password protection, or controlled access matters, a normal share link often is not enough.

With Crypto, teams can usually:

- share sensitive work without opening up the whole file
- protect client, partner, or NDA review links
- make private design sharing easier for teams outside Figma

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Crypto](/crypto/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If privacy and controlled sharing matter, Crypto is the strongest fit. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to compress large PDF presentation exports from Figma using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-11-23T00:00:00.000Z
dateModified: 2023-11-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-compress-large-pdf-presentation-exports-from-figma-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-compress-large-pdf-presentation-exports-from-figma-using-pitchdeck.md
---

# How to compress large PDF presentation exports from Figma using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to compress and downsize large PDF presentation exports from Figma using the Pitchdeck Figma plugin.

To get started, if you just jump into your Figma file, click on the little "Resources" icon up here. If you search for Pitchdeck, you can run the Figma plugin by clicking on the Pitchdeck item under the "Plugins" tab. Then, just click on this "Run" button here, or you can click on this little "Save" icon, which I'd recommend. That will save it to your Figma plugin list for easy access later. I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on the Pitchdeck item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it allows you to load in frames, components, and instances from your Figma page as slides. Then, you can export those slides to various formats like PowerPoint web presentations and PDF files. Today, I'm going to be focusing on PDF files, specifically for large presentations that contain very high-resolution image assets.

You can see here I've got a couple of assets that I've downloaded from Unsplash, and you can see the size of them max out at the 4,000-pixel size limit for Figma. What I'm going to do is show you what this looks like when I apply those kinds of high-resolution fills to our image frames. I'm going to drag and drop those images into here, swap out these image frames that I've already kind of got added in, and I'm going to do a really quick export without the downsizing feature. Then, I'm going to show you it with the downsizing feature to compare the difference.

If we were just to export this from Figma itself, go to file and then click on export frames to PDF. This will give you a PDF file native exported from Figma. If I click save on that one and then open up the file information on that one, I'm just going to click get info and see what that looks like. We can see that the exported PDF from Figma is about 20 megabytes. That's fairly large for a deck with nine slides in it. I'm just going to close that off.

Now that we've kind of got a baseline for exporting the PDF from Figma and seeing it's about 20 megabytes, what we can do is now go to the export feature in the Figma plugin by clicking on this export button in the top right-hand side. Clicking on that, and by default, it will select the Pitchdeck presentation upload option. So that's the default, but we're actually going to click on that option. We're going to skip the PowerPoint keynote and Google Slides option and just go all the way down to PDF.

For PDF quality, I'm just going to leave that at 300 DPI, which is the maximum best quality for now. You can reduce that if you want to get even further compression for DPI. So you can set it to 150 DPI for screens. 72 DPI is going to look a bit average, so I'd probably just leave it at 300, and you'll get the best quality. I'm just going to do another baseline test without the downsize option enabled. I'm going to go through that in a second.

But just exporting this to PDF with the regular export from the Pitchdeck Figma plugin, this is going to optimize the PDF, as you can see. If I save that to my desktop, I'm just going to click on the get info for that option as well. If we open that up, we can see here that the compressed version is about 5.6 megabytes. But we can actually get it even smaller than that. So, I'll show you how to do that now.

If you go back to your export settings, just click on the export button one more time, and this time, we're going to enable a new feature called downsize large Figma image fills. To explain what this option does, as you can see here, you've got these really big 4,000-pixel image fills or images that have been added to these layers over here. These layers are only 700x700 pixels, but the underlying image fill is much greater. So the underlying image fill is about 4,000 pixels. What that means is that the full-resolution image is still being loaded into the Figma frame here and still being exported to your PDF files. But because all of that extra size doesn't really matter for a smaller layer, what this little toggle here will do is it'll go through any image fills in your slides, and it will check if the image is greater than 2 times the size of the layer itself. Then, it will automatically downsize that to a 2X resolution. This is going to save us a lot of image data.

If we enable the Downsize large image fills option and then re-export that to PDF, I'm just going to click on export to PDF. Once that finishes up in a moment, you can see here it's downsizing the image fills, so it's checking them, and it found that these two are going to be much larger, so it just downsized those. You can't tell the difference in quality. It's still clear. Now, if we download our PDF file one last time, so I'm going to click on download your PDF file, save that to my desktop.

Now that we've saved that to our desktop once again, we can click on that file, get the info of that, and if we open that up, you can see that that's now been shrunk down to 1.8 megabytes. So, we've gone from 20 megabytes with the native Figma export to about 5 megabytes with the PDF export from Pitchdeck without the downsize feature enabled. Then, we've now shrunk that down more than half again to 1.8 megabytes with the downsize toggle enabled.

That downsize toggle really makes a difference if you've got a lot of slides or even just a few slides with really large high-resolution image fields that have been used originally. You don't need all of that image data behind the scenes when the layers are much smaller. So, this feature will automatically go through and do that. It's worth noting that this will only need to be done the first time around. If we were to rerun this now, it's not going to try and re-downsize those images because they've already been downsized. It'll skip over those, which means that the first export with this toggle enabled is always going to be a little bit slower. But every subsequent rerun, this is worth just keeping enabled. So, if you've added any new images that are larger, it'll just check those out before it exports the PDF. You're ensuring that you're always getting the lowest size possible with that toggle enabled.

That's basically it. I just wanted to show you this quick tutorial with that new downsize toggle, which is going to help you shrink or compress all of these really large Figma exports when you are exporting your slides to a PDF file using the Pitchdeck Figma plugin with this downsize feature. As I mentioned as well, you can play around with the DPI in combination with that. So if you were to set that to 150 DPI, that file size would shrink down even further. So, that's probably a pretty good compromise if you want to play around with those settings too.

Thank you as always for watching. I hope that's been helpful for compressing your PDF exports, and we'll be back soon with more Figma tutorials like this one in the weeks and months ahead.

---

---
type: tutorial
title: How to add transition effects to animated GIF exports in Figma using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-11-20T00:00:00.000Z
dateModified: 2023-11-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-transition-effects-to-animated-gif-exports-in-figma-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-transition-effects-to-animated-gif-exports-in-figma-using-tiny-image.md
---

# How to add transition effects to animated GIF exports in Figma using TinyImage

#### Video Transcript

Today, I'm going to be showing you a quick Figma tutorial on how to add transition effects to your animated GIF exports from Figma using the TinyImage Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the little resources icon up the top here, and then search for "TinyImage" under the "Plugins" tab. If you click on the TinyImage item, you can run the Figma plugin by just clicking on this run button here. Alternatively, I'd recommend clicking on this little save icon here, and that'll let you run it from your Figma plugins list later. I've already clicked on the save button, so I'm just going to go to my canvas and right-click anywhere. Then go down to "Plugins", go down to "Saved plugins", and then just click on TinyImage, and that'll run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, it has a bunch of different features, and I'm not going to be going through all of those today. I'm just going to be focusing on the GIF feature and how to add transition effects to those exported GIFs. If you're interested in some of the other compression features and exporting and downsizing features, check out some of the other tutorials on the YouTube channel. But for today, we're just going to be going through how to add transitions to your animated GIF exports.

The way to get started is we just have to go ahead and click on this "Create GIF/MP4" button at the top of the Figma plugin. I'm just going to click on that now, and that's going to prompt you to select any Figma layers in your page or in your file. So, in this case, I've just created four different Figma frames, very simple, just 400 pixels by 400 pixels each, and I've just added some placeholder images from Unsplash there. What you want to do is you want to highlight all the frames you want to animate. So, I'm just going to highlight these four frames and then click on "use selected layers" in the Figma plugin here. If I click on that, that's going to load up a preview of the animation in the Figma plugin.

You can see here that by default, it's basically setting a 500 millisecond per frame time. Each frame is showing up for about half a second, and then it's also set to 400 pixels by 400 pixels. You can obviously scale that up or down if you wanted to double the size during the export or not, but that's pretty much all standard. The thing we're going to be looking at today is at the moment it's set to instant, so you can see the slides are just changing from one to the next without any transitions. So, if we want to change that, we just click on this instant drop-down list down here. This is the effect dropdown list, and we can actually change this to be something else. For example, if we wanted to have a fade effect, we can click on the fade button, and that's going to add a fade effect between each frame. So, you can see now it's not just jumping between one and the next; it's adding a little fade there. We can do the same thing if you want to add a slide animation. So, if you want to slide right, you can add a slide right, and you can see it's now sliding out to the right. We can change that to be sliding to the bottom, so you can do a slide to the bottom like that. We can also do wipe effects as well. So, if you want it to wipe instead of slide, one frame wiping over the next, you can do that as well. We can go wipe left to right or wipe top down.

You've also got full control over the transition speed. By default, it's going to add that transition at about 400 milliseconds, just under half a second. But if you wanted to slow that down, you can do that by just toggling this little slider here, and you can see that the swipe transition or wipe transition in this case is coming in a bit slower now. Same thing with the slide, so if you wanted to make that a 1-second slide, you can actually update that to 1 second, and it'll be much slower. The one thing to be mindful of is the longer the transition speed or the longer it takes for each slide to transition, the bigger the file size is going to be because it's going to require more frames to actually achieve that effect for longer. Whereas if it's a shorter effect, so if you made a really fast transition speed like 250 milliseconds, it only needs a couple of frames because it's only going to be showing for a fraction of a second. So, it's probably better to leave it somewhere in the middle if you do want to enable these effects. But you can totally play around with that and set it for yourself based on the animation style. In this case, I'm just going to set it to a fade.

To export it, all we need to do is click on this "export GIF" button up here, and that's going to allow us to export the GIF and render it out. Once it's finished rendering, it's going to ask you to save it. In this case, I'm just going to save it onto my desktop. Click save, and if I open that up in the preview, you can see here that the fade effect has been added. So, we've got our GIF; it's got an infinite loop on it, so it's fading into each other and just keeps going around and around. So, that's our fade effect, and the same thing will happen if we export that to a slide effect as well. So, if we just want to try a slide effect, we can do a slide-down effect, we can make that a little bit longer, and again, once we're happy with the preview, we just go ahead and click on "export GIF," and that'll do the same thing. Once that's finished rendering, we'll again save it to our desktop. I'm just going to call this one "slide" so it doesn't override the other one. And if we now preview that one, you can see here that it's adding the slide effect onto our slides. Each frame is sliding down and sliding out. So, that's what that looks like there.

You can also export this to MP4, so if you don't want a GIF and you want to actually use a video file itself, you can export it to either a webm video or an MP4 video. In this case, I'm just going to select MP4, and this time, let's do like a wipe effect and make that a little bit longer. So, we can add that in and then just click on "export MP4" instead. So, we're going to click "export MP4"; this is going to again render those frames with the transition effects applied, and it's going to give us an MP4 encoded video file. So, we can save that MP4 to our computer, click save, and now if we open up the MP4, you can see this is a video. We've got full control over the actual playback here, and you could use this on a website; you could use this in a social media campaign. That's what that's going to look like once it's exported to a video.

There we go, we got a couple of different options there depending on what kind of format you want to use, whether it's a GIF or a video, depending on what kind of application the animation is used for. It's totally up to you to pick that format. But yeah, hopefully, this gives you a little bit more flexibility with creativity if you're wanting to export your Figma frames to an animated GIF or an animated MP4 just using the export function in TinyImage. This will give you a little bit more flexibility than just the default instant switching, which was previously there. So, hopefully, that helps if you've been wondering how to add fade, slide, and wipe transitions, which are in there at the moment. There may be more added over time, and keep an eye out for those if they do get added. You can play around with those ones as well. So, thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Omnisend using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-11-17T00:00:00.000Z
dateModified: 2023-11-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-omnisend-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-omnisend-using-emailify.md
---

# How to export HTML emails from Figma to Omnisend using Emailify

#### Video Transcript

Today, I'm going to be showing you how to automatically export your HTML emails from Figma and then upload them to the Omnisend email marketing platform. 

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up here. If you search for "Emailify" under the "Plugins" tab, if you just go ahead and click on the Emailify results, you can run the Figma plugin by either clicking on this run button here. Or I'd recommend clicking on this little "Save" icon here, which will save it to your Figma plugins list for easy access later. I've already clicked that icon, so I'm going to go to my canvas, just going to right-click anywhere and go down to "Plugins," then go down to "Saved plugins" and click on Emailify. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you to design and then export HTML emails from Figma. So, in this case, I'm just going to be creating a really simple template. I'm not going to be going through all of the design features in this tutorial. I'm just going to assume that you've already got your email designed using the Figma plugin. But if you are new to the Figma plugin, I'd recommend going through some of the other video tutorials on the channel just to get familiar with how the Figma plugin works for designing and customizing emails.

As I mentioned today, I'm just going to be keeping it really simple, spinning up a few of the components without any customizations from the Figma plugin. And then we're just going to export this to HTML. And then I'll show you how to import it to the Omnisend platform. So, importantly, before you export the email for Omnisend, you just need to make sure that you've got the unsubscribe link added. So, if you go to the footer tab in the Figma plugin, there's going to be a preset in there for that platform. So, if you scroll down to the letter O, you'll see the Omnisend footer preset. Just go ahead and click on that, and that will automatically add the unsubscribe link for you. And you can check that by clicking on the HTML and mobile settings button in the top of the Figma plugin here. And then if you drill down into your link layer in the navigation component, you can see that the unsubscribe tag for Omnisend has already been pre-populated. So, that's ready to go now. So, you just need to make sure that's in there as it is a required tag.

Of course, you can go ahead and customize this footer. You can customize the email. But again, I'm just going to assume that you've got your email ready to go that you've designed with Emailify, and now we're going to export it to HTML. So, all you need to do is click on the export HTML button in the top of the Figma plugin. Click on that, and you can either host the image assets yourself, or it's probably easier if you just turn on this upload hosted image URLs option and make sure that the HTML email option is selected. So, this is going to allow us to export the HTML email directly to our computer. Unfortunately, there's no API for Omnisend to create templates; otherwise, that would be added to the Figma plugin automatically. So, unfortunately, we do have to export it out to HTML manually. And then I'll show you how to import it into Omnisend in a minute.

I've got my HTML email selected. I've got the upload hosted HTML image URLs selected. So, this is automatically going to host and upload the images for us. And then you just have to click on "Export to HTML." And this is going to export the HTML to your computer. So, now the HTML code is ready. You just go ahead and click on "Download your zip file" and save it to your computer. So, just save it to your desktop. And then if you double-click on the exported zip file, you'll get a folder that looks like this.

Inside of this folder, you've got a previews page. So, this allows you to preview your emails in a nice way. So, if you have a look at that in the browser, you can see here that we've got our desktop preview and mobile preview. So, this is really good for sending to clients for approvals. But that is just a preview page. So, what you want to do is you actually want to open up the folder inside of that, which is named the same as our Figma frame template example. And the index.html file in there is the one that we're going to be using. And because we already selected the option to pre-upload all the images, those image URLs are automatically going to be added. So, you can see here the images have already been uploaded. So, those are ready to go.

Now in Omnisend, if you log into your Omnisend account, and you'll end up on the dashboard here. What you need to do is click on your username in the top right of the Omnisend menu. So, click on that, and then just go down to this option called "Store settings." So, click on the store settings menu item. And once that loads, just scroll down here, and on the left, you'll find an option called "Saved templates." So, go ahead and click on the saved templates item here. And that's going to bring you to this page called "saved templates" under the store settings section. So, this is where you can manage and upload and import your custom HTML email templates.

What you want to do is go down here to where it says "Import template." So, click on the import template button and give that a name. So, we can call that "Emailify template example." And what we want to do is import the HTML. So, you can either paste in the code, or you can just more easily click on the import HTML radio button and click on "Upload file." So, if you click on "Upload file," then go ahead and open up the folder that we just unzipped. Go into the email folder name, and you want to get the index.html file. So, don't upload the previews HTML file. You want to make sure that you're uploading a single index.html file inside of the folder name that matches up with the exported email that you created from Figma. So, click on the index.html file and then click on "Open," and that's going to allow you to upload that HTML file into Omnisend.

Now that we've got that selected, click on the "Import" button, and that's now imported the email template example that we just selected from our computer. So, you can see here now our saved templates have this example that we just uploaded, and we can go ahead and preview that. So, this is going to allow us to preview the HTML that we just imported, and it's all looking really good as we'd expect. We've got our unsubscribe link down here; you can see it's actually populating at the bottom of the window there in the browser. So, the unsubscribe tag is being swapped out with the preview link for unsubscribe, and this is all obviously selectable and ready to go. So, I'm just going to close out of that now.

And now that you've got this saved to your templates, you can then use that for a campaign. So, if you go to your campaign tab and spin that up, I've got a campaign in here already, but I'm just going to create a new one. So, I'm going to click on "New campaign," just going to go down to "Email," and click on "Create email." Then I'm just going to add a subject line. So, I'm just going to use this button here and generate that. So, I'm just going to say "free shipping," whatever. I'll use their AI-generated subject line in this case. So yeah, let's just go with that one. And then I can just add my sender name and email address; you can populate that with your own details. The preheader, I forgot to mention you can actually set this in the export settings in Emailify, so it's probably better to do it there. If you populate the subject line and preheader here, so you can add your preheader text here, and then you might want to also toggle this switch here which adds some preheader text with space. So, sometimes when you see your email inbox and you see the subject line of the pre-edit text, and then there's also some of the body content showing up after the preview text. This will add some padding there to make sure that the body copy doesn't show up right next to your preview text. So, yeah, go ahead and add the preview text or pre-edit text in Emailify before you export the email, and then you won't have to add it in the Omnisend preheader; otherwise, it'll just double it up for you.

Then campaign name, we can just call it "Emailify test" again, and now we're ready to go. So, the next step is to click on this button at the bottom right here called "Choose email template." So, you want to click on "Choose email template," and instead of looking at the templates section, which is all of the pre-populated templates from Omnisend, you want to switch that to "saved templates." So, click on this "saved templates" tab up here, and that will reveal any imported templates that you've created as custom HTML templates in the Omnisend platform. So, go ahead and click on "Use template." We've already previewed it before, so we know it's the one we want. Click on "Use template," and that will now allow you to use that template inside of the Omnisend platform.

That's what that looks like there. The final thing that you're probably going to want to do is for some reason Omnisend is adding this default padding around the content. So, it's setting this 24-pixel padding, which we obviously don't want. So, just go ahead and set those all to zero. You don't want any padding added by Omnisend. This is obviously not part of our original design. So, just reset all of those to zero, and that's going to look much closer to what we had in Figma originally. So, that's what that looks like there. And then this badge down here, I believe that's just because the account that I'm using at the moment is a free account. If you're using a premium account or a proper account, this should hopefully just go away. So, you can see there it says, "Remove the Omnisend badge by switching to a paid plan." So, that's why that's getting added automatically. Otherwise, our template is looking really good, as you can see there.

Then you can go ahead and send yourself a test email or you can preview it. So, we can just click on "Preview" again. And again, this is looking really good besides the footer that we just mentioned. So, that's looking nice. The padding that Omnisend normally adds by default has been removed, which is what we just did a second ago. And you can see it's looking really good on mobile as well. So, I think we're good to go. So, you can close that off now. I'm just going to close that off and click on "Save and choose recipients." And in your case, you would be sending this out to a real list. I'm not going to be sending this out to anyone today, but if you were going to, you can just go ahead and click on "Review campaign," and then you would obviously send that out to your entire list.

That's basically all the steps that you need to follow in order to export your HTML email from Figma for Omnisend and then import that as a custom template into your Omnisend platform and use it for your email campaigns however you need to. So, we'll leave it there for today. I hope that's been useful if you're using the Omnisend platform and were wondering how to export HTML emails from your Figma designs created with Emailify and upload those into the Omnisend platform. This hopefully will show you everything you need to know for that, and you can follow along and hopefully have some success with your own designs and campaigns. So, thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one in the coming weeks and months ahead.

---

---
type: tutorial
title: How to add dynamic Klaviyo product feeds to custom HTML email designs in Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-11-16T00:00:00.000Z
dateModified: 2023-11-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-dynamic-klaviyo-product-feeds-to-custom-html-email-designs-in-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-dynamic-klaviyo-product-feeds-to-custom-html-email-designs-in-figma-using-emailify.md
---

# How to add dynamic Klaviyo product feeds to custom HTML email designs in Figma using Emailify

#### Video Transcript

Today, I'm going to be showing you how to automatically add a dynamic product feed for your Klaviyo HTML email templates using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little resources icon up here. If you search for "Emailify" and click on the "Plugins" tab, select the Emailify result. You can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here. That's going to allow you to run it from your Figma plugins list for easy access later. I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then "Saved plugins," and click on Emailify. That's just going to run the Figma Plugin we saved a second ago.

I'm just going to create a brand new Emailify frame, so I'm just going to call this one "Klaviyo product feed example." So, I'll say Klaviyo product feed example and just click on "Add new Emailify container."

If you're new to the Figma plugin, it basically allows you to design emails in Figma that you can customize and then upload those to production-ready HTML, in this case, to the Klaviyo platform. I'm not going to be going through all of the design features today. I'm just going to be spinning up a quick email template to show you what it looks like. I'm going to add a few components here and make sure I've got my Klaviyo footer added as well. So, if you go to the "Footers" tab, scroll down to the Klaviyo option, click on that, and that will automatically prepopulate these links.

Now that we've got our Klaviyo footer added, I'm going to show you how to add the dynamic product grid that can be used with your Klaviyo templates. What you want to do is click on the "Ecom" tab in the Figma plugin, just click on "Ecom" up here. The first thing you'll see is this Klaviyo components list. We've got a couple of different options—three-column grid, two-column grid, and this one-column block. Today, I'm just going to keep it simple and go with this three-column block here. I'm just going to click on that, and you can see here it's automatically rendered the dynamic product feed to our page. I'm going to rearrange that in my email, just going to make that sit up here.

We've got a few different bits of code here. This has all been prepopulated, and the only thing you need to worry about is changing this feed name here. It says, "item equals feeds doyou Klaviyo product feed name here." What you need to do is basically go through these three things and swap out that name there. I'm going to show you how to do that now. If you go to your Klaviyo account and just go to your products, open up this content panel here, click on "Products," and you've hopefully already got a product source allocated. I've just got some demo products here at the moment. What you want to do once you've got your products linked up is just click on this "Manage product feeds" button up here. So, click on "Manage product feeds" in Klaviyo, and I don't have any available yet because I haven't created any. So, I'm going to create my first one by clicking on this "Create product feed" button up here. I'm just going to give it a name, so I'm going to call it "NEWEST_PRODUCTS." You have to use a combination of underscores, letters, and numbers. You can't use spaces, so just name it to whatever makes sense for you. I'm just going to call this one "new products." I'm going to click on this option down here where it says, what kind of product should the customers view, I'm just going to say "newest products." You can obviously change that to random products. I'm just going to make it newest products. This allows you to add filters if you want to add some filters where the category matches a certain category. I'm just going to leave that as default and click on the "Save product feed" button up here.

You can see here the product feed has been successfully saved in Klaviyo, and you can see my feed is now added over here. So, if I click on that feed, you can see here it's been saved. What we want to do is copy and paste the name that you just gave that product feed. I'm just going to highlight that "NEW_PRODUCTS" name and copy that to my clipboard, go back into Figma, and here, where I've got "item equals feeds.YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE", I'm just going to swap the "YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE" with my actual product name. I've got "NEW_PRODUCTS," which is my feed name. I'm just going to swap that in for all of these items down here. Each of these is now "feeds.NEW_PRODUCTS," which is what we just named the product feed in Klaviyo.

So, that's basically the main thing you need to do. To give you some context of what's happening here, it's saying we're going to look up this product feed, and where it says "index" and then a number, the index is basically the order or the product number in the feed that we're going to be loading up. So, "0" equals the first product, "1" is going to load up the second product, and "2" is going to load up the third product in the feed list of products. That's what that means.

Here we've got our image, so this is a placeholder image obviously. If we open up the HTML and mobile settings panel in Emailify, you can see that this has also been prepopulated. It's got the clickable link URL, which is going to the "item . URL" field. Then we've got the alt text set to the item's title, so that's also dynamic content. For the image source itself, we're overriding the image source. Instead of this placeholder that's going to get exported with the Emailify export, it's actually going to automatically add this "item.image_full_url" into the image source tag of your HTML. Those three things are prepopulated for all of the images here.

Obviously, we've got regular text layers here, which are just using the Figma text as you can see here, prepopulated with those variable names as well. That's going to load in your dynamic item title and your dynamic item price. Finally, we've got a button here, so this is just called "order now." You can obviously change that if you want to. But the important thing to know, again, if we click on the button layer and have a look in the HTML and mobile settings panel here, you can see that the clickable URL is also set to "item.url" It's the same link that we added to our image automatically by creating this component. So, of course, you can change this copy. If we just close off the settings panel here, we can call this something else. So, if you want to say "buy now" or "shop now," you can definitely do that as well. You just change that in your text area in Figma, and that'll automatically upload the button.

That's pretty much it. We're ready to go now. We can upload this to our Klaviyo account. What we need to do is basically go to our export HTML button in the Figma plugin. So, I'm going to click on "Export HTML," and I've already got the Klaviyo option selected. Yours might be automatically set to HTML email, so that's the default option. It's not platform-specific; it'll just download a zip file to your computer. But underneath the platform integrations category down here, we can basically scroll down to the Klaviyo option, click on that, and what you want to do is paste in your API key.

I've already got mine pasted in there; yours may not have an API key pasted in there yet. So, what you want to do is go to your API keys page; there's a link to it over here. Click on the API key link, and that will take you to this page here. If you haven't already done so, just click on the "Create private API key" button, and you want to make a new API key. You can call it "Emailify." Then what you want to do is copy that key to your clipboard. So, just click on this copy button and paste that into this field here. You just want to paste that in like that.

The next thing you want to do is make sure, for this case anyway when you're using the dynamic product grid, you'll need to make sure that the "editable content" toggle is enabled. I'm going to show you why that is in a moment. If you are using this dynamic product feed as of recording this video, it's essential that you've got this editable content field toggled because we need to do a couple more steps in Klaviyo to make this custom product grid actually work in the template itself.

So, go ahead and click on "editable content," and then you also probably want to turn on this "force the padding added by Klaviyo new Editor to be zero." I'll show you what that looks like in a second. Long story short is that the new Klaviyo editor automatically adds a bunch of weird default padding around blocks and text items. So, this kind of helps to mitigate it in any email clients that aren't Outlook, and I'll show you how to do that further in a second as well.

Now that we're all set to go, you can basically add a subject line. This is going to prepopulate the title tag in your HTML. It's not going to prepopulate this in Klaviyo, but it will add it to your title tag. You can also add a preheader text, so you can just call this "preheader text" here and populate that with whatever you want.

Now that we've gone through all those steps, just go ahead and finally click on the "upload to Klaviyo" button. That's going to automatically upload all of your images, generate the production-ready HTML, and upload all of that into Klaviyo.

The template has been uploaded; you can click on the Klaviyo templates link to view that. So, we're going to open that up now. Just click on the Klaviyo templates link, and that's going to open up the list of templates. You can see here that our Klaviyo product feed example, which is what we called our frame in Figma, has been uploaded to the templates list in Klaviyo. So, we can open that up, and you can see here it's added in the template. I'm just going to cancel out of that for a second.

The way we can use this template is just by going to campaigns. Once you've loaded the campaigns page, just go ahead and click on the "create campaign" button up in the top right here. You can call that whatever you like and make sure it's set to the type of email. Then click on "Save and continue." What you want to do is choose your recipients, so choose a segment that you've already got as a list and make sure that's turned on. I'm just going to turn off this option as well; if I want to send myself a test, I can do that in a second. Then just go ahead and click on "continue to content."

Once this page loads, you want to make sure that you add a subject line here because the subject line doesn't get carried in from the API. Once you've set your subject line, just go ahead and click on the drag and drop icon here. So, click on "drag and drop." Once that loads up, it'll show you a template library option. But you actually want to click on this "saved templates" tab. This is going to load up your custom templates, like the one we just uploaded. So, we've got our Klaviyo product feed example template that we just uploaded here. What you want to do is click on that one, and that's going to allow you to load that preview up again. These little lines here are just revealing editable content areas, so don't worry about those if you're wondering why it's looking that way. Just go ahead and click on the "use template" button down here. Once you've done that, you need to do one extra step, which is clicking on this "save" button here. So, before you go back to content, just go ahead and click on this "save" button in the top right, and that will just re-trigger the template to save in Klaviyo. That's actually what's going to make it editable. If you don't click on that "save" button for some reason, it doesn't trigger it as an editable email.

Once you've clicked save, go ahead and click on "back to content." That'll take you back to your campaign page. What you want to do is now click on the "edit email" button. Now you can click on "edit email," and this will load up this page. It always seems to say that something went wrong loading the template the first time. Just go ahead and click on the "reload" button on your browser, as it suggests. Once that loads up, you can see that we've got our template in here. We've got our editable regions; we've got our dynamic product grid down here, and we've got our footer that we added for Klaviyo before as well. If we click on the "preview and test" button up here, you can see that when this loads up, you'll notice that the content itself from the dynamic product feed isn't showing up. That's because Klaviyo requires doing this extra weird couple of steps that we're going to go through right now. I'll show you how to get this data actually rendering into our product grid here.

Just go ahead and click on "Done" for now, and then if you go back to your email editing area here, what you want to do is now go to this product icon down here. So underneath the block section where it says "product," you just want to drag and drop that block into any editable region in your template. So I'm just going to add it to this row here, just as a spot to add it in. And then it's going to load up this "configure product block" option. So what you want to do is make sure that you click on that. And then over here on the left, you want to make sure that the product feed is selected to be the same as what you specified in Figma. So you'll remember that we had our "new_products" product feed in Figma. So you can see here we've got "feeds.do.new_products" as the name. And so you want to make sure that yours is selected to match that in here. So just make sure that's all good to go. And then once you've done that, the next step you just have to do is go over to this "display options" tab. So we don't want this Klaviyo product block to show up, obviously. So what we need to do is go to the "display options" tab here, click on the "create logic" link next to this "show/hide logic" heading. And in the logic input field, you just want to type the word "false", then click on "Save changes" and this will ensure that the conditional logic will always be false, and it will never show this block in your HTML email sends.

The reason we had to do that is because for some reason, using the custom HTML template grid here for our Dynamic product grid, it doesn't allow us to actually access the dynamic data from the feed until we've actually added the Klaviyo version of the product block component first and point that to the product data source that we need to access here. So it's really weird. I wish it wasn't the case, but it seems that you do have to add this product block here first somewhere in your template, preferably above this product grid here, which seems to allow you to access the data in the template first that we can then call down here that we've already got set up in our custom HTML here with these little tags and dynamic content rendering snippets here.

Now that we've got that added in, and we've got the visibility set to have false logic, if we now click on the 'preview and test' button one more time, this time when the template loads up in our preview, you can see here that the dynamic content is actually being loaded in. So, instead of it just being blank as it was a minute ago before we added the Klaviyo block, you can see here that it's now pulling in the dynamic image thumbnails, it's pulling in the dynamic template names, and the products in the template data that I've got, or the product data rather that I've got, don't actually have any prices, so that's why it's rendering as 'none.' Your product data will obviously be much better, hopefully, than mine, which is just placeholder content that I loaded in using the Klaviyo developer tool to load in some placeholder content just to show you this tutorial.

But yours will obviously show up a price there, and the title and the real thumbnail image, and these are clickable because we had those links assigned. You can see that they're clickable, same with the 'shop now' buttons. Those will automatically open the real item URL, same with the images when they're actually loaded in with proper data. But you can see that the content is now being pulled in as we'd expect.

That's really good. So if we close that off and click 'Done,' you can see here that we've got our, obviously, the placeholder content here is different from the real content that's going to get loaded. But clicking on the 'preview' button will allow you to test that out, and you should probably send a test email to yourself to validate that as well.

That's basically it. I just wanted to run you through all of those steps. I'm mindful that it's a really arduous process to actually go through that and set it up just to be able to get this working, but it does seem to be the case that that's required.

The other thing that I mentioned before is that you also will probably need to go through these blocks here with the padding that I mentioned. So for some reason, the new Klaviyo editor automatically adds nine pixels of top and bottom padding and 18 pixels of left and right padding to any editable content blocks, text blocks in your email. So you probably need to go through those and just quickly click on those, set these to zero, so just reset them. I don't know why these are set to 9 and 18 pixels by default. This is just how the Klaviyo editor works when you load in a custom template with editable fields.

Just make sure you go through any of the editable content fields in your design and set those to zero, and that'll revert it back to what you'd expect them to look like from your original template in Figma.

Tthat's basically what it looks like. So I hope that's been helpful if you've been wondering how to add dynamic product feeds from Klaviyo into your custom HTML email templates. I've had a lot of questions about this for a while, so I really wanted to do a detailed tutorial just to show you how to do this and also show how you can get that basic structure set up in Emailify with one click, just rendering out those components. You can obviously customize the design of these. You can change the font size, you can change the colors, you can change the size of these image tags, image blocks, of course, to fit your own aspect ratio, things like that. And if you have additional content, so if you have discounted prices or things like that, you can, of course, add more content as long as you have access to that data. So you might have a different field called 'discount field' or 'discount price' or something like that. These aren't real fields, I'm just making them up, but your product feed may have additional data or different data that you want to display.

It's just a matter of tracking that down, finding it, and applying it to the appropriate layer or the appropriate field. So, of course, most of that can be accessed through the HTML and mobile settings panel. So if you're ever unsure of where some of this data lives, it's probably going to be in there. If you can't see it in your design, so again, just click on your layer, the button, you can add the clickable link there, images, same thing, clickable link URLs, alt text, overwriting the image source, so that's what the actual image is going to be loaded from with this dynamic content, as we can see in our preview a second ago. So that's what that's getting loaded in as, getting called in from this field here.

And the final thing that I'm just going to show you is if you do want to add multiple rows, you can just go ahead and copy and paste your original row and all you need to do is change this index here. So you've obviously got index 0, 1, and 2, so you would go ahead and change that to index 0, 3, 4, and 5. And that would basically load in the fourth, fifth, and sixth products in your product feed data. And that allows you to keep the original row as its own component, which means you can do cool stuff like make changes to multiple rows at once using that instance and having those load in the different product datas from your feed.

We'll leave it there, finally, and thank you as always for watching. We'll be back soon with more Figma tutorials like this one in the weeks and months ahead.

---

---
type: tutorial
title: How to sync SVG icons from a spreadsheet to your Figma layers using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-11-08T00:00:00.000Z
dateModified: 2023-11-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-sync-svg-icons-from-a-spreadsheet-to-your-figma-layers-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-sync-svg-icons-from-a-spreadsheet-to-your-figma-layers-using-copy-doc.md
---

# How to sync SVG icons from a spreadsheet to your Figma layers using CopyDoc

#### Video Transcript

Today, I'm going to be showing you how to automatically sync SVG icons or SVG images from a spreadsheet directly into your Figma layers automatically using the CopyDoc plugin.

So, to get started, all we need to do is go to your Figma file, click on the little "Resources" icon up here, and then just search for "CopyDoc". Under the "Plugins" tab, if you click on the CopyDoc result, you can run the plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here, and that will save it to your Figma plugins list for easy access later. I've already saved it to my Figma plugins list, so I'm just going to right-click on my canvas, go down to "Plugins," then go down to "Saved plugins," and click on CopyDoc. That's just going to run the plugin we saved a second ago.

If you're new to the plugin, it has a bunch of different features, and I'm not going to be going through all of them today. If you're interested in some of the other features, there are more YouTube Figma tutorials on the channel. Just find the CopyDoc playlist, and you can check out videos for those. But for today, I'm just going to be focusing on this sync spreadsheet function down here.

So, what this is going to allow us to do is swap out the content of our layers here automatically from a spreadsheet like this Google sheet here or an Excel file, which I'll show you later as well, and automatically import that content along with these Vector icons into our frames here.

All we need to do to get started is click on this little sync spreadsheet button down here. Then, what we can do is either upload an Excel file or a CSV file or paste in a public Google sheet link. I'll show you the Google sheet link first, and then I'll show you how to do the Excel file as well.

First of all, you just need to make sure that your spreadsheet or Google sheet is structured in this way. The first row is going to contain your header, and the thing you need to be mindful of is just the header names have to match up with the layer names in Figma that you want to sync. For example, we've got this header called "hash title," and you can see in my Figma file here, I've got these three text layers, and they're all named the same. It's got "hash title" as the layer name for all those. Likewise, with my icons, I've just got a few frame layers. These are just Figma frames. You could use rectangles or other shapes as well. I'm just using a frame to keep it simple, and I've named each of those "hash icon" as well, which you can see matches up with "hash icon" in the header over here too.

So, as long as those are matched up in Figma and your spreadsheet, you should be ready to go. The next thing you need to do is just click on the share button up here in Google Sheets and then just make sure the general access setting is set to "anyone with the link can be a viewer" and then just copy the copy link button. Click on "copy link," and that'll copy the link to your clipboard. Then, all you need to do is go back to CopyDoc, paste in the link you just copied to your Google sheet and paste that into this input field here. That will automatically load up your Google sheet tabs. If you've only got one tab, as I do in this case, it'll automatically just load in that first tab. Then, all you need to do is select the layers you want to sync.

I'm just going to select the parent layers, so I've got my top-level frame layers here. What this is going to do is it's going to loop through each of the selected frames, find any layers inside of that frame that match up those names with our header names in the spreadsheet, and automatically sync the content. I'll show you what that looks like here. You can change the order of the sync, so I'm just going to do sort the order vertically from top to bottom and then just click on the sync rows button. That's basically going to download our SVG icons and sync them into the content in our Figma file.

You can see here that the contents from the spreadsheet have automatically been synced. The other thing to note is that you might have noticed the second row here has an SVG tag. So you can either link to an SVG file, so you can see I've got a link to an SVG path here that's hosted on a website. And then the second option is just the pure SVG tag. So what that means is you could copy-paste the source code of an SVG file directly into the cell, and that's automatically going to get rendered as an image as well. So if you don't want to host the SVGs on an actual URL, you do have the option of just embedding the SVG code there as well. You've got the option to either provide a link or the SVG tag.

Our text content under the title heading has automatically been synced to all of our title layers that have been named with that same "hash title" layer naming convention. And then it's also gone ahead and synced our SVG icons directly into these frame layers here. It's important to note that those are getting synced as image fills. You can see here in the layer fill; it's just getting added as a fill in that layer. So it's not actually importing the vector data as a vector layer; it's just importing it as an image, but it's rendering it at obviously a very high resolution converted from that SVG, so they're going to be very sharp.

So, that's how you can do it from Google Sheets. And now that we've looked at that, if you're interested in sticking around to see how to do this from a local zip file so that means you don't have to upload the images if you just want to upload them directly from your computer. So if you don't want to upload the images anywhere, you don't want to use an embed tag, you just have a bunch of SVG files on your computer, you can add those directly into Figma through the Figma plugin as well.

The way we can do that is we basically just create a local Excel file or a CSV file, and you want to do the same naming convention. So we've got the title and the icon exactly the same as we had in our Google sheet, but you can see this time, instead of linking to the SVG files online or the embed tags, the file names themselves are just being included in these paths here.

So, the way this is going to work is we're basically going to zip up these three SVG files, so the files that we referenced in our spreadsheet, and then we're also just going to include the spreadsheet itself. So I've got the spreadsheet file, which we've got open here, and then the three files that we're referencing, and we're just going to select all of those and then right-click and click on compress. If you're on Windows, it might be a different option to add it to a zip file, but you basically just want to zip up those SVG files along with the Excel file, create a new zip file here, you can rename that if you want to. So, we can call it "import-svg-for-copydoc.zip," and that's going to allow us to drag and drop this into our plugin in a second.

I'm just going to close that off. I'm just going to undo those updates from Google Sheets to revert it to what we had before without the content populated. So we've got our layers back to what they were initially. Now I'm just going to go back into the sync spreadsheet function again, and this time instead of using a Google URL, I'm going to drag and drop this ZIP file that we just created into this Drop Zone area here. Drag and drop that, and you can see it's instantly loaded because it doesn't have to download anything from the internet. You can see here it's basically finding the spreadsheet data that we just uploaded from the zip.

Again, I'm going to select these three layers. I'm just going to click on "sync rows," and you can see it's automatically updated those layers from our spreadsheet, but this time it's done it from our local zip file here. So that's pretty cool if you don't want to upload all of your images online, you can just have a folder full of SVG images and zip those up with your Excel file as I just showed you a second ago, and that'll be good to go. You just drag and drop the zip file, and you can automatically upload that.

That's basically it for this Figma tutorial. I just wanted to show you those two different methods of importing the SVG files to your Figma file automatically, either from a Google sheet using hosted SVG links or embedded SVG tags or using your local SVG files and zipping those up into a zip file along with a local Excel file spreadsheet. And of course, if you did want to also save this Google sheet out to a spreadsheet, so you could basically just download that to an Excel file here, you could also just manually drag and drop that Excel file into your Figma plugin Drop Zone area here, and that would be exactly the same as importing the Google sheet as well. So if you want to import a local copy with the hosted links and the embed tag, you can obviously do that as well. All you need to do is create a local copy of that in Excel, and that'll be good to go as well.

I hope that's been helpful if you've been wondering how to sync up SVG icons or SVG Vector layers from a spreadsheet into Figma. This is a really good way of doing it at scale if you've got dozens of frames or dozens of layers that have Vector icons and text copy that you need to update in bulk. This is going to be a really handy way of automating that process and having all the content and SVG assets and SVG icons all kind of stored in the one place in a spreadsheet that you can re-update as needed.

Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Secure review workflow for NDA projects
description: How to structure a secure review workflow for NDA projects without slowing feedback to a crawl.
datePublished: 2023-11-05T00:00:00.000Z
dateModified: 2023-11-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/secure-review-workflow-for-nda-projects/
markdownUrl: https://www.hypermatic.com/articles/secure-review-workflow-for-nda-projects.md
---

# Secure review workflow for NDA projects

How to structure a secure review workflow for NDA projects without slowing feedback to a crawl. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Crypto

[Crypto](/crypto/) is one of the more useful tools in this workflow. Crypto matters here because design sharing is not always public or lightweight. When security, password protection, or controlled access matters, a normal share link often is not enough.

### Commentful

[Commentful](/commentful/) is one of the more useful tools in this workflow. Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: tutorial
title: How to export HTML emails from Figma to Campaign Monitor using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-11-02T00:00:00.000Z
dateModified: 2023-11-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-campaign-monitor-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-campaign-monitor-using-emailify.md
---

# How to export HTML emails from Figma to Campaign Monitor using Emailify

#### Video Transcript

Today, I'm going to be showing you how to automatically upload your HTML email designs from Figma to the Campaign Monitor email marketing platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file. Click on the little "Resources" icon up here. If you just search for Emailify, and under the "Plugins" tab, click on Emailify. You can run it by either clicking on this run button here, or I'd recommend clicking on this little save icon here. That'll save it to your Figma plugins list for easy access. I've already done that, so I'm going to go to my canvas. Just going to right-click anywhere, go down to "Plugins," then go down to "Saved plugins" and click on Emailify. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically allows you to create HTML email designs in Figma and then export them to production-ready HTML with one click. I'm not going to be going through all of the design features today. I'm going to be assuming that you've already got your email designed and customized. If you're new to the Figma plugin, you can watch some of our tutorials on the YouTube channel. Just click on the Emailify playlist, and you can go through those. But for today, I'm just going to be doing a really, really simple template just to show you what this is going to look like once we upload it to the Campaign Monitor platform.

I'm just going to add a couple of components, and importantly, you just have to make sure under the "Footer" tab that you do add the Campaign Monitor footer. So this basically gives you a really easy way of adding a footer with the unsubscribed tag that's required. This will automatically add the unsubscribed tag into your footer, and that will be populated by Campaign Monitor automatically once the template gets uploaded.

Now that we're happy with our design, we can preview it in the Figma plugin just to see what that looks like on mobile and desktop. I'm fairly happy with this, so I'm just going to exit the preview and go to the "Export HTML" button in the top here. What we want to do is change the "HTML Email" option here to the "Campaign Monitor" option. I'm just going to scroll down under the Platform Integrations group and click on the Campaign Monitor option. That's going to ask us for our API key and client ID. You can click on that link to see the documentation for that, but I'm just going to show you now where to find those.

If you go to your Campaign Monitor account and log in, what you want to do is go over to the top right corner where your name and Avatar is. Just click on that dropdown and then click on Account Settings. Then you want to go down here to API keys. Click on API keys, and you can see here we've got our client ID. So you just copy that to your clipboard, paste that into the Campaign Monitor field. So the client ID is the second field, so paste that in there. Then you just want to click on the show API key link here, and that's going to ask you to put in your Campaign Monitor password. Once you've added your password and got that approved, all you need to do is copy-paste this enormous API key. Just grab the entire thing from left to right and copy that to your clipboard. Again, go back to Emailify, paste that into the first field here. It's API key and client ID, so we'll put the API key into the first field, paste that in.

Once that's added, all you need to do is optionally add a subject line. You can put in a subject line here. Importantly, whatever you call the email in your Figma file here is going to be the name of the template that gets uploaded. So we can call this one example CM template, and that's going to automatically use that name when we upload it to Campaign Monitor now. I'm just going to click on the upload to Campaign Monitor button now, and that should automatically export the HTML email from our design here, automatically upload the images, and then upload that as a template to Campaign Monitor.

It's telling us that it's been successful; the Campaign Monitor templates have been uploaded. It's just letting us know that we can find those templates again under that user icon and then clicking on the my templates link. Let's jump in there now. Click on the little user icon, go down to my templates, and once that page loads, we can see here that we've got our template in our preview. So I can basically open that up. I can see that our HTML has been uploaded to Campaign Monitor as we'd expect. Finally, you can see we've got our unsubscribed link down here in the footer that we just added in. So that will automatically get updated with the correct unsubscribe link whenever you send it out to a list. You can basically use this template directly in your campaigns.

You can spin up a new campaign in Campaign Monitor, and that will automatically allow you to use this campaign template. If we go to our campaigns page and click on create a campaign, we can just do my first campaign for now. This will load up the campaign options. We can click on design email, we can say use a template, and then you can see here in our templates, we've got that added in here. So we can just click on that, and that will automatically allow us to use it in our campaign. That's going to allow you to see the preview here and preview it. So you can preview what that looks like then click on Save and next. Now that's basically added it to our campaign. Then it's just a matter of adding your from and to and all that sort of detail which you're probably already aware of if you're using Campaign Monitor. So I won't be going through all of that. This is how you can apply your campaign template into the campaign itself in one click once you've already uploaded it from Figma.

I hope that's been helpful if you've been wondering how to automatically upload your HTML templates from Figma into Campaign Monitor. This should hopefully help speed up that process instead of doing it manually and adding all of the intricacies that come along with manually uploading the images and the unsubscribe tag and all that sort of stuff. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to re-order and tidy Figma slides into a grid with one click using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-10-30T00:00:00.000Z
dateModified: 2023-10-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-re-order-and-tidy-figma-slides-into-a-grid-with-one-click-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-re-order-and-tidy-figma-slides-into-a-grid-with-one-click-using-pitchdeck.md
---

# How to re-order and tidy Figma slides into a grid with one click using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to automatically arrange and tidy up your slides in Figma using the Pitchdeck Figma plugin. 

To get started, all you need to do is go to your Figma file, click on the little "Resources" icon at the top here, and then search for Pitchdeck. Under the "Plugins" tab, click on the Pitchdeck item. You can run the Figma plugin by clicking on this run button here, but I'd recommend clicking on this little save icon here. That'll save it to your Figma plugins list for easy access later. I've already done that, so I'm going to go to my canvas, right-click anywhere, go down to "Plugins," go down to "Saved plugins," and then click on "Pitchdeck." That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it basically allows you to add a bunch of frames or components as slides onto your Figma page and then load those up into the Figma plugin. You can add animations and links and then export them to various formats. I'm not going to be going into detail about that today; instead, I'm just going to be showing you how to use some of the new tidy features and sorting features to help organize your slides in the Figma file.

The first thing you'll notice is that if we move around our slides on the page, it's obviously going to get pretty messy pretty quickly. Having said that, we can use the order that's on the page to sort the slides in the Figma plugin. For example, if you wanted to sort these slides visually, we can do that in the Figma plugin. For example, if I go from right to left, you can see now it's basically taking the last slide in the columns and making that the first slide. The order in the Figma plugin is different to the order in the Figma file, so that's just the first thing to keep in mind.

The second thing is that we can also drag and drop these manually. So, if you wanted to change the order of these in the presentation Figma plugin, you can do that by dragging and dropping. You can also remove slides from the presentation just by unchecking them. These won't get exported in the exported formats like PDF, PowerPoint, or the web presentation. I'm just quickly running you through those basics to show you how this is now going to work with the Sorting feature.

Now, if I go ahead and click on this little page icon up here in the top left of the Figma plugin and open up this panel, you can see that I've got an option for automatically sorting and tidying our Figma slides. We can basically say how many slides we want per row. In this case, I'm just going to say 12. We've also got an option to add a fade effect for any unchecked slides. I'll show you what that looks like in a second. First, I'm just going to tidy these up by clicking on the reorder and tidy Figma slides button. Clicking on that now, you can see it instantly tidies up the slides based on the order that we already had set up in our presentation over here. Slide one and slide two have been added in that order, whereas the other slides at the bottom have been added down here. The same thing would be true if we rearrange these again. For example, if we swap these around and made this slide go down here, then jump back into our page icon, open up that panel, and again click on the reorder and tidy, that's going to automatically rearrange those slides once again.

Basically, the order in the Figma plugin is the source of truth for this new feature. Whatever you set the Figma plugin order to will automatically be tidied up in here. You can change this to be eight slides per row or make it a really long one at 20 slides per row. As I mentioned a second ago, you've also got this toggle over here to add a fade effect for any unchecked slides. If you toggle that on and then reclick on this button here, that's automatically going to fade any of the unchecked layers in your presentation plugin to an opacity of 33%. That kind of just visually knocks them back. So at a glance, you can get a sense of which slides are actually active and which slides aren't active. Of course, if you re-enable those in the Figma plugin, check a couple more back on, and then opened up the panel again, reorder them again with the toggle enabled, that will automatically re-enable the opacity on those. If you want to get rid of that effect entirely, just turn off the toggle and again click on the reorder and tidy button. That will just make sure the opacity gets reset back to 100%.

That's basically a quick overview of how you can use this new feature to really quickly automatically tidy up your slides. If you're moving things around in the plugin over here and rearranging slides, and you don't want to have to manually reorder them on the page, which can get a bit annoying, you can now just do that in one click. Again, you just go to the pages icon, click on the little reorder button, and that will automatically tidy up your slides.

I hope that's helpful if you've been wondering how to quickly tidy up your slides into a grid and reorder them based on your Pitchdeck slide order over here, this is a brand new feature that will help you do that really quickly and hopefully save a lot of manual time dragging and dropping slides around on your page. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add slide layouts to Figma presentations with one click using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-10-26T00:00:00.000Z
dateModified: 2023-10-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-slide-layouts-to-figma-presentations-with-one-click-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-slide-layouts-to-figma-presentations-with-one-click-using-pitchdeck.md
---

# How to add slide layouts to Figma presentations with one click using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you how to quickly add slide layouts to your Figma presentations with just one click, utilizing the Pitchdeck Figma plugin. 

To get started, go to your Figma file, click on the little "Resources" icon up here, and search for "Pitchdeck." You'll see the Pitchdeck item pop up. Click on that under the "Plugins" tab. You can run the Figma plugin by either clicking this run button here or clicking on this little save icon, which will save it to your Figma plugins list for easy access later. I've already done that, so I'm going to go to my Figma file, right-click anywhere, go down to "Plugins," then "Saved plugins," and click on the Pitchdeck item. This action will run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it works by taking any slides that are frames, components, or instances on your Figma page and allowing you to load them in as slides to the plugin. For example, if we add a quick frame, go to the frame section, click on the presentation dropdown, and add a 16x9 frame, then click on refresh layers, you can see here that we've got a frame added to our page. You can add different layers inside of that frame, like headings, images, and all kinds of content to our slides, and that will get loaded into the Figma plugin. You can also add animations, links, and other elements to those layers.

There might be times where you don't want to manually do this yourself, and if you want to quickly spin up some slide layouts, the Figma plugin has a feature to help you do that. Access it by going down to the bottom of the slides list and clicking on this "Add slides" button. This action brings up a panel with a variety of preset layouts, common layouts you might want to use for your slides. You can go through, add the different types of slides that you want to include in your presentation, and you will see them added to your page just as you'd expect.

I'm going to get rid of the original slide that we had, go back to my Figma plugin, and refresh that. Now, we've got all these other slides added to our presentation. This is a really quick way of adding different slides to your presentation without needing to manually go through and create all these different layers. And these are all auto-layout as well.

For example, if we duplicate this text area, you can see that the layout automatically adapts. You have full control over the item spacing and things between those different layers. Additionally, we've got full control over the global text styles and global color styles. Over here, you can see different styles automatically added to the document that we can modify. You can change the font for our heading as well, and you'll notice the font in our design has completely changed across all the slides. You can do the same for colors; change the slide heading colors, the paragraph text, and even add an alternate theme.

If we toggle on the "use alt Figma color styles," any new slides added from the layout creator with that toggle enabled will automatically inherit those styles and colors. The same thing applies when the alt styles are turned off; new slides will inherit the normal colors and font settings.

If you want to use master slides, go to the "Master Slides" tab, refresh it, and you'll see any slide components added to your page loaded up under this panel. Clicking on any of these slides will add them as new slides but as instances of that component. If you change the master component, the instance will inherit those changes.

If you wanted to then export this to a different format, you can do that as well. Click on the export button in the Figma plugin, select your export format, and click on the export button. Wait for it to export those slides, and you'll get your presentation as a PowerPoint file, PDF, or any other format you're interested in. Once that finishes, click on the download button, save the file to your computer, and you can open it in PowerPoint. You'll see our slides exported from Figma, editable and ready to be modified as needed.

That's basically it for today. I just wanted to show you how to quickly use this new layout feature to add layouts, color styles, and text styles that can be easily managed from one place. You can update any of this content as you want, replace images and text, and it will all be ready for you to use. I hope this tutorial was helpful, especially if you've been wondering how to quickly add slide layouts without having to manually design these common layouts every time. I'm sure the options will expand over time with more layout choices. For now, you can jump in and give it a try with the ones that are available. Hopefully, this enhances the workflow for you and your team, making putting together presentations quicker and more efficient.

Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Secure client handoff for Figma files
description: A cleaner secure client handoff workflow for design files, prototypes, and approval links.
datePublished: 2023-10-19T00:00:00.000Z
dateModified: 2023-10-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/secure-client-handoff-for-figma-files/
markdownUrl: https://www.hypermatic.com/articles/secure-client-handoff-for-figma-files.md
---

# Secure client handoff for Figma files

A cleaner secure client handoff workflow for design files, prototypes, and approval links. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Crypto

[Crypto](/crypto/) is one of the more useful tools in this workflow. Crypto matters here because design sharing is not always public or lightweight. When security, password protection, or controlled access matters, a normal share link often is not enough.

### Commentful

[Commentful](/commentful/) is one of the more useful tools in this workflow. Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: tutorial
title: How to add Master Slides to PowerPoint exports from Figma using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-10-17T00:00:00.000Z
dateModified: 2023-10-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-master-slides-to-power-point-exports-from-figma-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-master-slides-to-power-point-exports-from-figma-using-pitchdeck.md
---

# How to add Master Slides to PowerPoint exports from Figma using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you how to automatically include master slide layouts in your PowerPoint file exports from Figma using the Pitchdeck Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up the top here. If you search for "Pitchdeck" under the "Plugins" tab, then click on the Pitchdeck item. You can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here to save it to your Figma plugins list for easy access later.

I've already done that. So, I'm going to go to my canvas, just going to right-click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on the Pitchdeck item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it allows you to take any of the frames, components, or instances directly on your Figma page and load those up into the plugin as slides for a presentation. You can export that presentation to multiple formats, but for today, I'm just going to be focusing on exporting it to PowerPoint and showing you how to create PowerPoint master slides using Figma components to help define those.

To get started, all I'm going to do is convert a couple of these frames that I've got on my page to Figma components. The way that I do that is basically just by clicking on any of those in Figma, right-clicking it, and going down to create component. You can see it changes it from a frame to this purple sort of color here. I can do the same thing for this intro slide as well. So, I can go down to create component, and now we've got two different components as part of our slides.

What we can now do is refresh our slides, and you can see here, while these ones are frames, if we go to our first two now, you can see those have been turned into components. So we can jump to those if we want to as well.

The reason why that's important is defining these slides as components is going to make sure that those get included as master slides when we export the presentation to PowerPoint. I'll show you what that looks like now.

If you go to the export panel just by clicking on the export button in the top right of the Figma plugin and just make sure that the PowerPoint format is selected, click on PowerPoint. Then you want to go down to the PowerPoint settings down here and enable this setting that says create PowerPoint master slides from components. I'm going to toggle that on, and then I'm just going to click on the export for PowerPoint button.

We don't need to compress the images for this Figma tutorial, but you can definitely do that as well. So I'm just going to click on export for PowerPoint, and this is going to export all of our slides to a PowerPoint file that we can download from Figma.

Once that's finished, you just have to go ahead and click on the download your pptx file button. So click on that and just save it to your desktop or wherever you prefer. If you open up that file just by double-clicking on it, you can see here that it opens it up in PowerPoint, and we've got our slides as you'd expect.

These are all editable slides that we can modify in PowerPoint, and it's been exported directly from Figma. So the cool thing is because we enabled the master slide option, if we go up to the new slide panel up here and click on the little arrow where it says insert new slide, if you click on that, you can see here we've got a couple of PowerPoint master slides. So we've got two master slides, which correspond to the two components that we just set up in Figma - the intro and the principal one slides.

You can see here when we go to add a new slide, we can add an intro master slide and also a principal one master slide. So what that allows us to do is it lets us edit that content. This is basically getting added as placeholder content, so these slides are actually empty, and these are just placeholders. So it's got the text style, so we've obviously got the text style that was defined in the actual Figma file, but these are empty placeholders with some example text taken from our Figma content here.

Here and so what that allows us to do is it allows anyone that we've shared the presentation with to add brand new slides based on the Styles and layouts that we've defined in Figma. For example, we can add an image to this placeholder here. So if we click on insert picture from file, that's going to allow us to browse our computer for an image. So, I'm just going to add this image here, and you can see that gets swapped into our PowerPoint master slide, and again, we can update this content here and adjust that as needed. If we want to add different content, we can adjust that width to make that fit, and then, obviously, you've got your body content here as well.

The body content can be added there, and that's basically what that looks like. You can obviously move this around, but what it's doing is it's providing you master frames with predefined content areas and styles for someone to easily add new slides to the presentation.

There are a couple of extra things you can do here. The main one is that you can include these images as static images if you want to do that as well. So, for example, if you wanted this master frame here to always have this image and not make it a placeholder image, what you can do is you can actually lock that layer in Figma. So, for example, if we lock that data photo layer and then we re-export the deck. So I'm just going to click on the export button again. I'm going to export it with the create master slides from components option still enabled, click on export for PowerPoint again. 

This time when we re-export it, this image that we've just locked will be added as a static image. So if we save that now and open up this brand new file and then we add a new PowerPoint master slide. So if we go back to the new slide options, insert a new slide, and click on the intro master slide, you can see here that it's added our text content as placeholders. We've got our placeholder heading area, but you can see that the difference between this one and the other deck that we exported is that the master slide doesn't have a placeholder for the image.

You can see here that the image is just static; it can't be moved, it can't be changed directly from here. You would have to go into the master slide edit area in PowerPoint and edit it from there. But by default, this image is going to be static, so it's not going to be a placeholder. All the text is, but the image won't be.

This can be handy if you've got things like logos or little images that you want to include in your PowerPoint master slides, and you don't want them to be editable. All you need to do if you want to keep those as static is just lock the layer in Figma, so lock that image layer, and that will automatically be flagged to not turn that into a placeholder.

That's basically it. I just wanted to show you the fundamentals of using the Pitchdeck Figma plugin and Figma to define these component slides, which will then be used as master slides for your PowerPoint exports, as long as you've got the create master slides from components toggle enabled. You can also include these in your keynote and Google slide exports, but the important thing to be mindful of is that unfortunately, those ones don't support the editable images at the moment. Hopefully, this will change in a future version, but for now, they seem to use the editable versions as text, even though they're meant to be images.

I would avoid using those ones for the master slides if you need editable image content, but it will definitely work for the text, and it will still include the images as static images. So that's just something to be mindful of, but for this tutorial, just stick with PowerPoint if that's what you're using, and it'll work as expected, just as we looked at in this tutorial together.

Let's leave it there for today. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Password protected design review links
description: How to share design review links more securely when a public Figma link is not enough.
datePublished: 2023-10-02T00:00:00.000Z
dateModified: 2023-10-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-password-protected-design-review-links/
markdownUrl: https://www.hypermatic.com/articles/crypto-password-protected-design-review-links.md
---

# Password protected design review links

How to share design review links more securely when a public Figma link is not enough. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for password protected design review links when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Crypto fits into the process

Crypto matters here because design sharing is not always public or lightweight. When security, password protection, or controlled access matters, a normal share link often is not enough.

With Crypto, teams can usually:

- share sensitive work without opening up the whole file
- protect client, partner, or NDA review links
- make private design sharing easier for teams outside Figma

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Crypto](/crypto/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If privacy and controlled sharing matter, Crypto is the strongest fit. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: Best Figma plugins for client handoff
description: The best Figma plugins for client handoff when you need cleaner reviews, secure sharing, and less revision chaos.
datePublished: 2023-09-15T00:00:00.000Z
dateModified: 2023-09-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-client-handoff/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-client-handoff.md
---

# Best Figma plugins for client handoff

Client handoff sounds simple until you actually do it.

Someone needs a presentation. Someone else wants a review link. Another stakeholder refuses to use Figma. A developer wants cleaner specs. The client wants feedback tracked properly. Suddenly “just send it over” becomes a full-time job.

The best Figma plugins for client handoff are the ones that make that process less fragile.

### Commentful for feedback and approvals

[Commentful](/commentful/) is one of the most practical tools for client handoff because it helps structure the review process itself.

Instead of relying on scattered comments, loose feedback, or screenshots in email threads, Commentful gives teams a cleaner way to gather and action feedback around the work.

### Crypto for secure sharing

If the work is sensitive or under NDA, [Crypto](/crypto/) helps by letting you share password-protected design links or PDFs. That is a much better fit when clients need access to the work but should not have unrestricted visibility into the entire source file.

### Pitchdeck for presentation-friendly deliverables

Many client handoff moments are really presentation moments. [Pitchdeck](/pitchdeck/) helps teams turn Figma designs into decks that can be exported as PowerPoint, Keynote, Google Slides, or PDF when the client expects a more traditional file.

### Pixelay for implementation reviews

Client handoff does not always end at “approved design”. Sometimes the next step is reviewing the built work. [Pixelay](/pixelay/) helps compare live or staged URLs to the original Figma designs, which makes implementation review much easier.

### What usually works best

For most teams, the best client handoff stack looks like this:

- [Commentful](/commentful/) for review and feedback
- [Crypto](/crypto/) for secure sharing
- [Pitchdeck](/pitchdeck/) for deck exports
- [Pixelay](/pixelay/) for post-build review

That combination covers most of the awkward gaps where client handoff usually breaks down.

---

---
type: article
title: Secure file sharing for designers
description: A practical secure file sharing workflow for design teams handling sensitive work.
datePublished: 2023-09-15T00:00:00.000Z
dateModified: 2023-09-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crypto-secure-file-sharing-for-designers/
markdownUrl: https://www.hypermatic.com/articles/crypto-secure-file-sharing-for-designers.md
---

# Secure file sharing for designers

A practical secure file sharing workflow for design teams handling sensitive work. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for secure file sharing for designers when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Crypto fits into the process

Crypto matters here because design sharing is not always public or lightweight. When security, password protection, or controlled access matters, a normal share link often is not enough.

With Crypto, teams can usually:

- share sensitive work without opening up the whole file
- protect client, partner, or NDA review links
- make private design sharing easier for teams outside Figma

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Crypto](/crypto/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If privacy and controlled sharing matter, Crypto is the strongest fit. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to export HTML emails from Figma to Braze using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-09-11T00:00:00.000Z
dateModified: 2023-09-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-braze-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-braze-using-emailify.md
---

# How to export HTML emails from Figma to Braze using Emailify

#### Video Transcript

Today, I'm going to be showing you how to automatically upload your HTML email designs from Figma to the Braze email marketing platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file. Click on the "Resources" icon at the top here, and if you search for Emailify, and if you click on the Emailify results under the "Plugins" tab, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here, which will save it to your Figma plugins list for easy access.

I've already done that, so I'm going to go to my canvas. I'm just going to right-click anywhere, go down to "Plugins," go down to "Saved plugins," and then click on the "Emailify" item, and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you to design HTML emails directly in Figma, which you can then export to production-ready HTML code with one click when you're finished.

I'm not going to go through all of the design features of the Figma plugin today. I'm just going to be assuming that you've already familiarized yourself with that with some of the other Figma tutorials on the YouTube channel for Emailify, and I'm just going to assume you've got your template ready to go.

The last thing I'm going to add to mine here is just go to the footer tab. I'm just going to click on the Braze footer, and that's just going to make sure that the unsubscribe link is included automatically. So we've got our little navigation component, the link setting. If you click on the HTML and mobile settings, you can see that the clickable link is set to the Braze unsubscribe URL.

Now we're ready to go. Once we're ready to export it to HTML, you can just click on this little export HTML button up here, and we're going to change the platform from just HTML email, which just downloads it to your computer, to the "Platform Integrations" section.

And then we're just going to click on Braze. So click on the Braze item, and then it's going to ask for your Braze API key and your Braze endpoint. So you can click on this link to find out some more details about that. But basically, if you're already logged into Braze, the way you can find these is if you just go to your dashboard, you can see down here that you've got your API endpoint. So the endpoint region is what we're after. So you can see ours is fra-02.

In our Figma plugin, we're just going to change this little endpoint selector and go down to fra-02. And then we're going to go to our manage API Keys section. So if you click on manage API keys in Braze, that's going to take you to a new page to create a new API key. So we don't have any set up yet, so we're going to click on the create new API key button over here.

And then all you need to do is give it a name. So in the API key name field in Braze, just put in Emailify or whatever label you want to give it. And for the permissions or scopes, we're just going to scroll all the way down to templates and click on "templates.email.create". So this is going to allow the API key to create a new template on your Braze dashboard. So we're going to keep that one checked, and that's all we need to select for now. So we're going to go ahead and click on Save API key.

Once that creates your API key, you can see that it's given the new listing with the Emailify name, and we've got our API key here. So all you need to do is click on this little copy button. So I'm just going to click copy. That's going to copy it to my clipboard. And I'm also just going to preemptively go to our templates page. So if you go to templates, email templates, we're going to leave that page open for when we come back in a second to check on it.

You can see here at the moment, I don't have anything uploaded. So if I click on my HTML editor button up here, I've got no saved templates. So we'll refresh that in a second. So with our copied API key, we're just going to go to this little rest API key field in the Figma plugin, paste in your key there, and then you can either give the email a subject line. So we can give this a test subject. And then once you're happy with that, just click on the upload to Braze button.

Once you click upload to Braze, this is going to automatically generate all of the HTML. It's going to upload all of the images, and it's going to now tell us that our Braze templates have been uploaded. So we can access them by going to our Braze account, going to this template sidebar item, which we just did, and click on email templates. So this is the page we're on now, the email templates page, and then you just want to click on the HTML editor tab up here. So where it says select your editing experience, make sure you've got the HTML editor tab selected.

And you can see when we click that, it's refreshing our saved HTML templates, and you can see that our test template, which is what we called it in Figma, the frame over here, has been uploaded. So if we click on that, that will load up the template. So you can see we've got our test template up here, and we've got our test subject. So that's the subject line we added a minute ago in the Figma plugin. So it's included the subject line, and of course, it's also included the email body. So you can see here that it's uploaded the email. We've got a bit of a screenshot of it, and now you can go ahead if you wanted to. You can preview and test that. So if you click on preview and test, that'll let you preview it.

You can see this is all inline HTML, real HTML. It's been uploaded, and you're able to now test that to yourself or send a test to somebody else with pre-populated information from a certain user if you had any placeholder fields and stuff like that. So this is basically what it looks like. And yeah, if you click on the HTML mobile one, that'll show you what it looks like on HTML on the mobile version, which matches up with the Figma plugin preview as well.

We didn't go through that, but you can click on preview, and you can see here it's matching up with the Braze preview. So yeah, that's basically it for today. I just wanted to keep this really short. If you're using the Braze email marketing platform, this is a really quick way of getting your HTML email templates from Figma into Braze using the Emailify Figma plugin with one click. So thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Selzy using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-09-01T00:00:00.000Z
dateModified: 2023-09-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-selzy-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-selzy-using-emailify.md
---

# How to export HTML emails from Figma to Selzy using Emailify

#### Video Transcript

Today, I'm going to be showing you how to automatically upload your HTML emails from Figma to the Selzy email marketing platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file. Click on the little "Resources" icon up here. If you search for Emailify and under the "Plugins" tab, click on "Emailify". You can either run the Figma plugin by clicking on this run button here or, I'd recommend clicking on this "Save" icon here to access it from your Figma plugins list later.

I've already done that. I'm going to go to my canvas, just right-click anywhere, go down to "Plugins", click on "Emailify". And that's just going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, the way that it works is it provides you some tools to help you easily design emails in Figma, which can then be exported to production-ready HTML automatically.

Today, I'm not going to be going through all of the design features in the Figma plugin. There are a few other tutorials on the YouTube channel that you can look at if you are interested in that. Today, I'm just going to be assuming you've already got your email designed using Emailify and you're ready to export it to the Selzy platform automatically.

The last thing I'm going to do with this template is just go to the footer tab in the Figma plugin and make sure I've got the correct unsubscribe link. So I'm just going to scroll down to the "Selzy" item down here, the footer, and click on that. That's automatically going to make sure that you've got your unsubscribe link correct. If you look into the link layer and go to the HTML settings button up here, you can see that it's got the unsubscribe URL tag on there that will automatically get swapped out later.

Now that we've got our email ready to go, all we need to do is click on the export HTML button up here. By default, that's going to be set to HTML email. We're just going to change that from HTML email and scroll down to platform Integrations. Find the "Selzy" option, click on that, and then what you can do is click on this little link here. That's going to take you to your API key page if you're already logged into Selzy. It's going to open up the browser to this page over here and it's going to take you to the integration and API Tab.

What you want to do is click on this little show full icon here, and that's going to prompt you for your password. It's going to ask you to enter your password and then you'll be able to copy your API key from here and paste it directly into the Figma plugin here. Once you've pasted your API key in from Selzy, all you need to do is just add a subject line. You can add a subject line here. The name of the frame over here will be used as the template name in the platform.

You can change that if you want to rename it. I'm just going to leave it as this for now. Once you've done that, just click on the upload to Selzy button and that's going to automatically export the HTML, upload all the images, and upload our template. So, it's uploaded our template to the Selzy platform. If you click on the my templates link here, that will automatically open your browser to your my templates page which I've already got open.

I'm just going to refresh that and if we refresh that page you can see here that our Selzy template example which is what we named it in Figma has just been uploaded a second ago. So we can essentially jump into that and view it. If we open up that template, you can see that our subject line has been included, the name of the template's been included.

If we go back, we can also preview it. So if you click on this little preview link that will open up an HTML preview and you can see here that it's uploaded all the images uploaded all the content we've got our unsubscribe link down here and everything's basically ready to go. So, we're just going to close that off and now you can essentially use that to do whatever you want with.

You can create a campaign, you can create a copy of that template, you can share the template. You can really do whatever you want. This is just an automatic way of getting the HTML from Figma into the Selzy templates without you having to manually create the email template, manually uploaded images, paste in the images URLs, and yeah update all that HTML manually.

This is a really quick way of doing it if you want to automatically get it out of there from Figma. So, I think we'll leave it there today. I just wanted to keep this really quick. If you are a user of the Selzy platform and you're interested in automatically exporting your HTML from Figma using the Emailify integration, it's going to be a really quick way of doing that for you or your team.

Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Async design review process for remote teams
description: How remote teams can run async design reviews without losing context or momentum.
datePublished: 2023-08-28T00:00:00.000Z
dateModified: 2023-08-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-async-design-review-process-for-remote-teams/
markdownUrl: https://www.hypermatic.com/articles/commentful-async-design-review-process-for-remote-teams.md
---

# Async design review process for remote teams

How remote teams can run async design reviews without losing context or momentum. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for async design review process for remote teams when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Commentful fits into the process

Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

With Commentful, teams can usually:

- bring stakeholder feedback into a clearer review loop
- reduce messy approval threads and scattered comments
- make async review easier for non-design teammates

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Commentful](/commentful/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If review chaos is slowing the team down, Commentful is the obvious first lever. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to export HTML emails from Figma to OneSignal using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-08-27T00:00:00.000Z
dateModified: 2023-08-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-one-signal-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-one-signal-using-emailify.md
---

# How to export HTML emails from Figma to OneSignal using Emailify

#### Video Transcript

Today, I'm going to show you how to automatically upload your HTML email designs from Figma to the OneSignal email marketing platform using the Emailify Figma plugin. So, to get started, all we need to do is go to our Figma file, click on the little "Resources" icon up here.

If you search for "Emailify" and under the "Plugins" tab, if you just click on the Emailify result, you can run the Figma plugin by either clicking this "Run" button here. Alternatively, I'd recommend clicking on this "Save" icon here. That will save it to your Figma plugins list for easy access. I've already done that, so I'm going to my canvas. I'm just going to right-click anywhere, go down to "Plugins," and then click on the "Emailify" item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it helps you design HTML emails in Figma, which you can then export to production-ready HTML automatically. I'm not going to be going through all of the design details in this tutorial. If you're interested in that, there's a bunch of other tutorials on the YouTube channel. Just check out the Emailify playlist for those.

In this Figma tutorial, I'm going to assume you've already got your design looking the way you want, the HTML is rendering the way you want, and now you just want to upload it into the OneSignal email platform.

The way we do that is we basically go to our "Export HTML" button up here and click on that. Then we want to change the "HTML Email" option up here and scroll down to the "Platform Integrations" group. You just want to go down and scroll until you find OneSignal, and click on the "OneSignal" option.

Then, it's going to ask you for your app ID and API key from OneSignal. You can click on this link here to figure out where to find those. But I'll show you what that looks like in OneSignal.

If you're logged in and you go to your apps page, which is just the default dashboard page, find the app you're going to be sending the email from. Go to this little hamburger menu down here and click on "Open Dashboard." Then click on the settings icon over here in the menu. Go to the Keys and IDs submenu over here.

Once you've clicked on that, you'll see here it's got this OneSignal Keys section. What you want to do is copy the app ID. So, we're just going to click on this little copy icon. That's going to copy it to our clipboard. We just copied the app ID, so we're going to paste that into the ID input over here in Emailify.

Then go back to OneSignal. We're going to copy our REST API key. I'm going to copy that to our clipboard as well. I'm going to go back to Emailify and paste that into the key field here. You just want to make sure you've got a subject line set. You can optionally add some pre-header text as well.

But once you're ready to go, you can just click on the upload to OneSignal button here in Emailify. That's just going to automatically export our email to HTML. It's going to upload all of our images, and then it's going to upload it to OneSignal.

You can see here we've got a successful message telling us that our OneSignal templates have been uploaded. We can find it by going to our OneSignal dashboard and then going to our app, which we're in at the moment. Then you just want to click on the "Messages" tab up here in the menu.

Click on "Messages" and then click on the "Templates" submenu over here. You can see here that our email has been uploaded. The name of the email is matching the name that we set in Figma on our Emailify frame. If we click on that, it's going to load up the email template that we just uploaded.

So, if we just make this window a little bit bigger, you can see down here that all of our code has been uploaded automatically. Our subject line that we added in Emailify has been included. You can see we've got our HTML over here. This is all real HTML that was just uploaded from Figma, and it's been automatically added to our OneSignal templates.

That's basically ready to go. Now you can use that email template to send out emails. It was automatically uploaded to OneSignal from Figma, so you didn't have to manually copy and paste or make any manual updates to your images and things like that. It's all production-ready, and the emails are all ready to go with all of the images included.

So, yeah, that's basically it. I just wanted to keep this a really short tutorial. If you're using the OneSignal email marketing platform and you're interested in getting your emails from Figma into production-ready HTML in your email templates in OneSignal, this is going to be a quick way of doing it with essentially one click, and you're ready to go.

Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add masked animations to Figma banners using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-08-12T00:00:00.000Z
dateModified: 2023-08-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-masked-animations-to-figma-banners-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-masked-animations-to-figma-banners-using-bannerify.md
---

# How to add masked animations to Figma banners using Bannerify

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to add mask animations to your Figma banner timelines using the Bannerify Figma plugin. So, to get started, all we need to do is go to the little "Resources" icon at the top of your Figma file. If you click on that and search for "Bannerify," and if you click on Bannerify, you can run the Figma plugin by either clicking on this "Run" button here. Or, I'd recommend clicking on this "Save" icon here, and that'll save it to your Figma plugins list for easy access later. I've already done that, so I'm going to go to my canvas. I'm just going to right-click anywhere, go down to "Plugins," and then click on the "Bannerify" item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically treats every parent frame or artboard on your Figma canvas as a potential banner. So, you can select which banners you want to load into the Figma plugin and click on load checked banners. Then, it's going to treat every layer inside of that frame as an element in your animation timeline to create and export that banner as an animated HTML banner or a GIF or a video.

I'm not going to go through all of the features in the Figma plugin today. There's a bunch of other tutorials on the YouTube channel if you want to go into detail. Today, I'm just going to be focusing on some new animation features which allow you to add mask animations that look like this. You can see on the right-hand side here in the little preview that we've got some masking effects going on, which are new to the Figma plugin.

I'm going to run through how those work now. So basically, what we can do is we can go to our exit and entry animations, these two here for each layer. And we've now got a new category called entrances that are masked. So, we've got mask entrances, and we've got masked exits. If we scroll down here, you can see we've got two different categories for those. I can basically go through and change those depending on what kind of effect I want.

So, if I wanted to do a square effect, if I change that to a square effect for the exit animation, you can see here that it's basically going square out to the top left. So when I play that through, that's how it kind of vanishes. We can slow that down, so if we wanted to make that more drawn out, we can do it like that. Or we can change it to a wipe animation. So if we want it to wipe out right, we can do that as well. So if I click play, that's going to wipe it out from the right. Same thing with the entrance. So, I can add y-pin effects, so I can do more of a wipe in from the top to the bottom. Or I can do wipe in left, and that'll apply a different position as well.

You can basically go through all of your layers now and apply these wipe animations to get that masking effect. So you can see on my text layers, I'm doing a little bit of a delayed effect here. So, I've got these three here, and I'm slightly delaying them, so that's 0.3, 0.4, 0.6. You can basically spread those out a bit if you want to get a bit more of a delayed effect, and we can see what that looks like here. So those are going to come in kind of one after the other, and we're also wiping those out at the end. That's basically how you can add the mask animations to your layers in Bannerify.

To export these out, you can either click on the "Export to HTML" button, which will allow you to export the code to just HTML and JavaScript. Alternatively, you can export it to GreenSock or GSAP. If you're using a specific ad platform, you can select that as well. So, for example, we could do Google ads. Click on that and click on "Export Banner." This will generate all of the code, all of the images that we need.

If we download that to our desktop, open up that zip file, you can then open up this preview in the browser. So, if we go to our browser and just drag that in, you can see here that we've got our animation exported as we'd expect. So, this is just pure HTML that you'd be able to upload to Google ads. We can also upload this or export this to a video. So, if you want to export it to a video, you can go to this button here, just click on "Export to GIF or video," click on the video or GIF format you want to export, and this will export it to a video for you. So, these can be useful for social media posts or for your website. 

We can do a GIF as well. So, I'll just export the GIF while we're opening up the video. And if we open up the video, we can see that dragging that into the browser as well, we'll play that back. And finally, we've got our GIF as well. So, if we save that to our desktop, open that one up, and again, drag that into the browser, we'll be able to preview that in here. And we can see this one is now a GIF. 

That's basically it. Those are the different formats you can export it to. So, yeah, I just want to keep this really short. This was a really frequently requested feature to have masking animations. So, this has just been added to the Figma plugin now. You can try this out in your own banners and hopefully, it adds some more creativity and flexibility to the types of animation styles you want to use in your Figma banners for HTML or video or GIFs. As always, thank you for watching and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: Figma review tool for non-designers
description: What makes a Figma review workflow easier for non-design teammates and outside stakeholders.
datePublished: 2023-08-11T00:00:00.000Z
dateModified: 2023-08-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/commentful-figma-review-tool-for-non-designers/
markdownUrl: https://www.hypermatic.com/articles/commentful-figma-review-tool-for-non-designers.md
---

# Figma review tool for non-designers

What makes a Figma review workflow easier for non-design teammates and outside stakeholders. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for figma review tool for non-designers when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Commentful fits into the process

Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

With Commentful, teams can usually:

- bring stakeholder feedback into a clearer review loop
- reduce messy approval threads and scattered comments
- make async review easier for non-design teammates

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Commentful](/commentful/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If review chaos is slowing the team down, Commentful is the obvious first lever. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to add realistic placeholder text content in Figma using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-08-08T00:00:00.000Z
dateModified: 2023-08-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-realistic-placeholder-text-content-in-figma-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-realistic-placeholder-text-content-in-figma-using-copy-doc.md
---

# How to add realistic placeholder text content in Figma using CopyDoc

#### Video Transcript

Today, I'm going to be showing you how to use realistic placeholder content in your Figma designs using the CopyDoc Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the little resources icon up here, and search for CopyDoc. Under the "Plugins" tab, if you just go ahead and click on "CopyDoc," you can either run the Figma plugin by clicking this "Run" button here, or I'd recommend clicking on this "Save" button here. Then, go to your canvas, right-click anywhere, go down to "Plugins," and then click on the "CopyDoc" item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, it has a bunch of different features to help you update, export, and import text content. But for today, I'm just going to be focusing on the Content Library feature. Feel free to check out the YouTube channel for other tutorials, but for today, we're just going to be focusing on the Content Library to add some placeholder content to our designs.

To get started, all we need to do is go ahead and click on the Content Library button, and then just go ahead and click on the placeholders tab. Click on placeholders, and you'll see here that immediately we've got a category selected called "person" with a bunch of different placeholder content. What we can do with this content is use it to populate layers in our design just by clicking on them. For example, if we go ahead and click on this text layer here and we wanted to add a name to that layer, what we can do is click on this full name button. That will automatically populate the layout with a fake but realistic-looking name. We can do first name, full name, last name, middle name, and go through all of these different items and apply them as needed.

Besides just people, we've also got a bunch of other categories. If you click on this category drop-down here, we've got a bunch of different ones for animals. So, if you wanted to add maybe a dog or a horse, you can add different types of these animals with just one click. You can also add a bunch of other categories. Our internet, for example, maybe you want to add an email address. You can add fake email addresses that look realistic but not quite realistic. You can do these email ones, which are more realistic with Hotmail, Yahoo, or Gmail addresses, and a bunch of other ones as well.

I'm not going to go through all of these categories. You can go through these yourself and figure out what kind of content you actually need. You can do fake words, you can do Lorem Ipsum if you want to. You can do paragraphs worth of Lorem Ipsum or just a sentence or just one line and all these different options.

Besides just using it like this, we can also use shortcuts or Snippets. For example, if we use this copy icon over here – I'm just going to click on that – this will allow us to copy this trigger to our clipboard. Then we can basically just paste it into a layer that already exists. For example, if I wanted to go into here and I paste in that trigger, that'll automatically fill out that trigger into the full text.

If you're new to the Figma plugin, it has a bunch of different features to help you update, export, and import text content. But for today, I'm just going to be focusing on the Content Library feature. Feel free to check out the YouTube channel for other tutorials, but for today, we're just going to be focusing on the Content Library to add some placeholder content to our designs.

To get started, all we need to do is go ahead and click on the Content Library button, and then just go ahead and click on the placeholders tab. Click on placeholders, and you'll see here that immediately we've got a category selected called "person" with a bunch of different placeholder content. What we can do with this content is use it to populate layers in our design just by clicking on them. For example, if we go ahead and click on this text layer here and we wanted to add a name to that layer, what we can do is click on this full name button. That will automatically populate the layout with a fake but realistic-looking name. We can do first name, full name, last name, middle name, and go through all of these different items and apply them as needed.

Besides just people, we've also got a bunch of other categories. If you click on this category drop-down here, we've got a bunch of different ones for animals. So, if you wanted to add maybe a dog or a horse, you can add different types of these animals with just one click. You can also add a bunch of other categories. Our internet, for example, maybe you want to add an email address. You can add fake email addresses that look realistic but not quite realistic. You can do these email ones, which are more realistic with Hotmail, Yahoo, or Gmail addresses, and a bunch of other ones as well.

I'm not going to go through all of these categories. You can go through these yourself and figure out what kind of content you actually need. You can do fake words, you can do Lorem Ipsum if you want to. You can do paragraphs worth of Lorem Ipsum or just a sentence or just one line and all these different options.

Besides just using it like this, we can also use shortcuts or Snippets. For example, if we use this copy icon over here – I'm just going to click on that – this will allow us to copy this trigger to our clipboard. Then we can basically just paste it into a layer that already exists. For example, if I wanted to go into here and I paste in that trigger, that'll automatically fill out that trigger into the full text.

If I manually type that out – if I do slash slash fake dot Lorem dot lines – that'll automatically expand that based on the content that it's using. There are a few different ways you can do that. The other thing we can do is also use placeholders as part of our custom content Snippets.

If we go to the collections tab over here and we create a new snippet by clicking on the "Add New Snippet" button over here, I'm just going to give this a name. I'm going to call this subheading. Then, I'm just going to select a collection. Let's call this one "titles," just make a collection for it. That's just basically a category. Down here, we can now start using placeholders mixed in with our custom text content.

If you toggle on this "Show Placeholder Shortcuts" button, that's going to allow you to use those same categories down here and splice them with custom text content. For example, you might do something like "Hello," and then select a name. If we go back to our people, our person, and then go back to our full name, click on full name or you can just do first name if that makes more sense, and then just click on the little plus icon down here. You can see here it's basically populating that with the shortcut that we saw before in double curly brackets. This is a special type of placeholder that's going to get automatically replaced later.

I'll show you a couple more examples of this. If we were to do again, go back to the animals. So, we go back to animals and then we can say, "In this picture, shows a," and then just add a placeholder and add that there. Then we can do "bear" at the end. We basically splice that in the middle of that sentence. Just for now, I'm going to save that. I'm going to click "Save New Snippet," and you can see here we've got our new snippet added in our collection. This is just a way where we can basically create custom text Snippets.

Again, we can apply this either by clicking on the text layer and clicking "Apply." If you click "Apply," that's going to automatically apply that randomly to the text layer. Or, again, we can use the shortcut. If you wanted to copy that to a clipboard and you wanted to add it somewhere in this layer, maybe we wanted to add it in the middle here, you can just paste that in, and that will automatically populate that. You can see here it's automatically populating it. It'll do the same thing if we type it. If I type that in manually, so slash slash subheading, that's automatically going to populate that with a text snippet.

The cool thing is you can see here it's basically replacing the placeholder each time the text snippet gets rendered. In this one, we've got "Hello, Logan," and in this one, we've got "Hello, Kobe." If we were to change that or add that again, we can actually expand this and just add the "Hello, first name" snippet. That's just going to keep randomizing every single time. You really get a nice way of adding these placeholders interspersed with your own custom content.

The cool thing is you can apply this to multiple layers at once. If you wanted to add this to multiple layers, let's say we've got these four layers selected, and then we wanted to add the "Hello" snippet to those, click on that now. Each time you click that again, it's going to randomize that placeholder snippet for each of the selected items. This can be a powerful way of generating fake placeholder content for multiple items using your own content mixed with fake content.

If you want to edit these as well, you can totally do that. Just click on the edit icon down here. In this case, we don't want to have "bear" at the end because it seems to be automatically adding the bear into the sentence. I'm just going to remove that, and we can add some other content in here as well. Let's say we want to do a location. You could create a location for a country. You could say, "I'm from country," and then plus, and then you could add another area down here. You could say, "country," and then you could do "building number," so we go "building number" and there. Then we'll do, "I live at building number," and then we can do maybe an address, so we'll do a street address, add that in, and then we can also do maybe a postcode at the end. Let's add a postcode or country code, one or the other, and then just add that in there. We'll update that snippet, and you can see here it's added that as a new snippet for us.

Now, if we were to apply that, you can see here it's going to populate that automatically. This is a really easy way of creating interspersed fake text content between custom text content that you can automatically apply with one click. Again, you can copy that as a trigger. You can add that to the end, so you could keep adding that trigger and just keep going to keep populating it. We can also do, as I mentioned before, just applying it directly. There we go. You can see we've removed "bear," so it's adding the bear automatically now. That's a cool way of adding the dynamic animal into your sentence.

Yeah, as I said, I'm not going to go through every single category. There are tons of different categories and placeholders in here. The last thing I want to go through is localization. Let's say you wanted to do a localized site or a localized bit of content and you wanted to use names or addresses from a different country. By default, it's just going to do English American, but if we open up this localization drop-down here, you can actually customize that to a different Locale. If we were to do Japanese and change that down here, you can see that the examples have basically been updated to use Japanese characters and Japanese names.

If we were to replace this text layer here with a full name, you can see that it's basically populating it with the Japanese characters now. The same sort of thing with Korean. We can do a Korean name, and that's automatically going to populate that. The same thing for Italian. We can do Italian, and that's basically going to populate it with Italian names.

The cool thing is when you've got this Locale selected, that's also going to get applied to your existing collections as well. If we were to reuse the first name, so we'll apply the first name, you can see here that it's using the Italian names in our first name here. If we change this back again, so we'll go back to Japanese just to make it obvious that it's changing, and go back to here, go back to our collections, and now if we replace that name, it's going to be in Japanese. That's a really easy way of localizing your placeholders as well if you do need to do a completely different language or a different set of locations or names. All the content that can be localized will be automatically localized when you apply the placeholders.

Yeah, I hope that's been helpful if you've been wondering how to use more realistic placeholder content. If you're kind of overusing Lorem Ipsum and you actually want to use something that's going to be much closer to the real content that you're going to be using but you're still waiting on the final copy to be approved, using some of these placeholders is going to be a really easy way to automatically populate your designs with realistic placeholder fake content.

We'll leave it there for today. I just wanted to show you some of the fundamentals of how you can use placeholder content in CopyDoc on its own and also splice in some of those placeholders dynamically into your custom content text Snippets using the Content Library feature in CopyDoc. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to use Figma Variables as a re-useable text content library using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-08-07T00:00:00.000Z
dateModified: 2023-08-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-use-figma-variables-as-a-re-useable-text-content-library-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-use-figma-variables-as-a-re-useable-text-content-library-using-copy-doc.md
---

# How to use Figma Variables as a re-useable text content library using CopyDoc

#### Video Transcript

Today, I'm going to be showing you how to use your Figma variables as a text component library in Figma using the CopyDoc Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up here. If you search for "CopyDoc" under the "Plugins" tab, click on the CopyDoc result. You can either run the Figma plugin by clicking the "Run" button here, or you can click on the "Save" icon for easy access later. I've already clicked the save icon, so I'm going to go to my canvas. Just right-click anywhere, go down to "Plugins," and then click on the "CopyDoc" item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way it works is it provides you with a set of tools to update Figma copy and Export copy, and make all different changes to text in a variety of ways. Today, I'm just going to be focusing on the Content Library feature. If you want to know how the other ones work, check out the CopyDot playlist on the YouTube channel. But for today, I'm just going to be going through how to use Figma variables as a Content Library.

To get started, all we need to do is go to the Content Library button and click on that. If you go over to the Integrations tab—click on Integrations—then down here, you basically want to select the Figma option. By default, it'll select the Google Sheets integration, but for today, we're going to be focusing on the Figma variables integration. So just make sure you've got Figma string variables selected, and then we're ready to go.

The way this feature works is it allows you to take your Figma variables. So, if you go over to your Figma right-hand side column and click on the local variables option—this local variables option over here—click on that. This will allow you to create some variables in your Figma file that will be accessible inside of the Figma plugin in a moment. The way that it works is you click on the create variable button over here, and you want to click on the string option. Click on the string option with the little text icon. Then, what we can do is start creating some text variables that we'll be able to use in our Content Library.

For example, I'm just going to call one "headings." So, I'm going to create one called "headings," and I've already got some copy that I want to use. I'm just going to copy-paste that into the value field. I'm going to paste that into value. You can see now, if we go back to our Figma plugin and click on the little refresh icon in the bottom right here, you can see that it immediately loads up our Figma variable as a text component Library option. Basically, if we expand that, we can see that we've got all these different text options. We can now apply those to our Figma layers with one click.

For example, if I click on this text layer here, I can basically click on the supply button, and that will automatically apply a random bit of text from our little variable here into the text layer in Figma. We can also select individual strings. So, you can select which one you want to use there, and that will also apply it. You might also notice that there are multiple strings in this options area here, yet we only pasted one value into here.

The reason for that is the Figma plugin automatically determines if there are multiple strings by detecting the double pipe symbol. You can see here I've got the pipe symbol. You can add that on your keyboard if you just do shift forward slash. That'll add the pipe symbol. So, you can see here, I could basically add more pipe symbols, double pipe symbols, to split up these strings. Those will automatically get imported as different strings in here. We can also add individual ones.

For example, if you just wanted to create a string called "CTA" for a CTA button and we want that to be "learn more," you could add that as a single string. If we refresh the copy here, that's just going to add it as a single string. So, if you were to apply that, that would only ever apply that one string, and you just have that as a single item. Totally fine. You probably want that in a lot of cases, but I just wanted to show you how to add multiple strings.

In this example, we could do multiple CTAs. We could do "try it now" and add that with the double pipe symbol and refresh that. In here, we'll now get two of them. So, we've got our "learn more" CTA and our "try it now" CTA. This is a really easy way of splitting up the string into multiple variants in case you want to have multiple options for different bits of copy. We can also do that for our projects.

I've got a bunch of different projects in this string here. I'm just going to add a new variable called "projects." So, if I add "projects" as the name and paste in the value with those pipe symbols again, just to split up some of those project names, I can get rid of these text layers now. If we refresh the variables again, you can see we've now got a little "projects" item in here. The cool thing is we can also apply this to multiple layers at once.

For example, if I were to select all of these titles—so I'm just going to open up these groups—and if I go ahead and select the project name for all of these tiles, I can select all of those six layers. Then what I can do is I can open up this little panel here, and I can apply those in order. I can do an ordered version, which is going to go Nike, Adidas, Apple in order, the way that we added it in the Figma variables value. Or we can do random, so we can randomly roll out those copy updates to the selected layers. We can do it alphabetically, so that's just going to go from A to Z based on the variables that we added, or we can do Z to A. We can do reverse alphabetical as well.

Of course, we can just click on the supply button, and that will automatically do a random application. Or we can apply the same value to multiple selections. So, if you wanted to apply the same string to multiple text layers, you can definitely do that as well. But in this case, I'm just going to do an ordered version based on my original Figma variable order. So yeah, that's basically it. I just wanted to run through that really quickly in case you've been playing around with the new Figma variables feature. I wanted to know how to use this more seamlessly with your text layers.

It's worth mentioning that this is not going to apply the variables to the text layers themselves. So, you'll notice here if we go to this text layer, you've got the option in Figma to apply a variable to that text layer. You can basically apply one of these variables to the text layer, and if that gets updated in here, so if we were to add, you know, a "buy now" CTA onto that text, that would automatically update that variable in here. That's not what this feature is doing. This feature is basically just making it easier to consume these variables as an on-demand text Library. It's not going to sync up your variables over time.

That's just something to be mindful of if you are going to be using this feature. It's really just an on-demand apply-once and use-it-as-is sort of thing. But it's going to give you a really easy way to keep these bits of text in your official Figma variables panel and then just sync those up in here when you actually need them. So yeah, we'll leave it there for today. Hopefully, that's helpful if you've been wanting to use the Figma text variables in a different way, to use it as a bit more of a text Library, searchable text Library. You can do that here as well. You can search the copy, make it a bit easier. 

Hopefully, that's going to be handy for you if you're using the variables feature with your team. Feel free to give this new integration option a try in CopyDoc. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add text expander content snippet shortcuts in Figma using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-08-06T00:00:00.000Z
dateModified: 2023-08-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-text-expander-content-snippet-shortcuts-in-figma-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-text-expander-content-snippet-shortcuts-in-figma-using-copy-doc.md
---

# How to add text expander content snippet shortcuts in Figma using CopyDoc

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to use text expander shortcuts in Figma using the CopyDoc Figma plugin. 

To get started, all we need to do is go to your Figma file, click on the little "Resources" icon up here. If you search for "CopyDoc" under the "Plugins" tab, if you just click the CopyDoc result, you can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this "Save" icon here. That'll let you run it from your saved Figma plugins list later.

I've already gone ahead and clicked the save icon. I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," and then click on "CopyDoc." That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it's got a bunch of different features that help you to update, export, and import all of your text content. But for today, we're just going to be focusing on this Content Library feature to create reusable text expander snippets.

I'll show you what that looks like. Now, if you go ahead and click on the CopyDoc Content Library button in the Figma plugin, that's going to bring up this little panel here. Just to show you what I mean by text expander, what it actually means is we can basically take these trigger shortcut names. For example, button or CTA, and we can type those directly into a text layer and expand that shortcut into one of these text variants.

For example, if I do forward slash, forward slash, CTA, you can see that immediately after I finish typing in the trigger, it expands that trigger into the full text from our snippet. So, if I do the same thing over here, I'll do slash, slash, heading, and that automatically populates that heading with one of the text variants that I've added here.

I'll show you how to add those in your own Content Library. You can click on this "Add New Snippet" button over here, and you can create a text trigger. So, for example, we could do one called "nav." So, if we wanted to make some navigation items that we can reuse, we can call this one "nav." We can basically categorize this into a section. In this case, we might call this category "menus." We want to add the "nav" trigger to this menu. The "nav" trigger is going to be your shortcut, so it'll be slash, slash, "nav."

Under the text content snippet, you can start adding some text content variants here. You can just do one variant if you don't need multiple variants. But in this case, we might want to add a few different menu items. So, we might call this one "features." We might call this one "about us." We might do "story," "social media," and maybe we'll add one more for "FAQ."

We're going to create this as a text snippet. Click on "Save New Snippet," and you can see here it's added it right at the top. So, what we can do is we can basically now use this snippet in our content just by using that shortcut. If I go to slash, slash, "nav," that's automatically going to give me a menu item from my approved menu items trigger.

Again, I can do "nav" as a trigger. I can copy-paste that to my clipboard, paste that in. I can actually keep pasting it if I want to keep doing that. So, you can add multiple triggers into one text area. You could add that to in between this text here, and that will automatically expand it.

That's basically the fundamentals of using the text expander feature in CopyDoc. As I mentioned, you can go ahead and create as many of these triggers as you want, just to basically have an approved copy library that's going to be really handy for you to use to populate text content for pieces of your design that need approved snippets.

Instead of just using "Lorem Ipsum", instead of actually manually typing out if you're creating a new button, instead of thinking of a name or thinking of a, you know, Lorem Ipsum or something like that, if you've got the CopyDoc Figma plugin open and you've got your shortcuts on hand, you've either got it memorized or just using the copy icon over here, instead of typing out Lorem Ipsum or whatever, if you just know that it's going to be a button and you've got CTAs, you can just type in CTA and automatically expand that text out into an approved bit of copy.

That's basically what it looks like. As I mentioned, you can go ahead and create your own content snippets. There's also a feature to import and export CSVs. So, if you wanted to do this in bulk, you can actually just import and export these snippets in a bulk export and import.

Feel free to go ahead and try that out as well. But for today, I'm just going to leave it there and keep it really simple, just to show you how to use the text expander feature in the Content Library section of CopyDoc. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to use Airtable as a Figma text content library using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-08-06T00:00:00.000Z
dateModified: 2023-08-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-use-airtable-as-a-figma-text-content-library-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-use-airtable-as-a-figma-text-content-library-using-copy-doc.md
---

# How to use Airtable as a Figma text content library using CopyDoc

#### Video Transcript

Today, I'm going to be showing you how to use an Airtable spreadsheet as a custom content library in Figma with the CopyDoc Figma plugin.

So, to get started, all we need to do is go to your Figma file, click on the little "Resources" icon up here, and if you search for "CopyDoc" under the "Plugins" tab, you'll see CopyDoc pop-up. You can run the Figma plugin by either just clicking on the "Run" button or you can click on this little "Save" icon to save it to your Figma plugins list for easy access later.

I've already gone ahead and saved mine, so I'm going to go to my canvas. I'm just going to right-click anywhere, go down to "Plugins", then find the "CopyDoc" item, and click on that. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it has a few different features to help you update text content. Today, I'm just going to be focusing on the Content Library feature, which is going to allow us to sync up an Airtable spreadsheet and use the content from that spreadsheet in our Figma designs and apply those Snippets automatically.

To get started, all you need to do is go to your Content Library feature. Click on the Content Library button in CopyDoc, and you'll see here by default it's going to go to the "Collections" tab. There's another tutorial on the YouTube channel if you want to go through doing that, but for today, we're just going to be focusing on the "Integrations" tab.

I'm going to go ahead and click on Integrations, and by default, it's going to select the Google Sheets integration. Instead of using Google Sheets, I'm going to click on that option and change that to "Airtable". So, I'm going to click on Airtable, and you'll notice that we haven't set up any Airtable libraries yet or spreadsheets yet. All you need to do is fill out these details below.

You can see underneath "Add new Airtable", there's a prompt asking us to add our Airtable URL and also our personal access token from Airtable. You can click on this little Airtable details link to get some links where to find those, and I'll show you what that looks like in Airtable now as well.

If we go to our browser, first thing I'm going to do is just create a new personal access token in Airtable. If you go to Airtable.com/create/tokens, you'll get sent to this page here, and what you want to do is go ahead and click on "Create token". I'm going to click "Create token", and I'm just going to call this "CopyDoc Figma plugin" just so I know what the token is being used for.

The other important thing you want to do is add a scope. Scopes are going to tell the token what it has access to in your Airtable account. So, I'm going to click on "Add a scope", and I'm just going to select one scope, which is this "data records read" scope. This is going to allow us to read the content from our spreadsheet. You don't need to add any other ones, just that "data records read" scope.

Then, you also have to make sure to add your base. So, if you click on "Add a base", that's basically going to tell the token what kind of areas in your Airtable account this token will have access to. So, I've already created a separate Base called "CopyDoc" where I'm just going to keep my copy content libraries. You can choose another one, or you can choose all workspaces. I'm just going to scope it to this one, and then I'm going to hit go ahead and click on "Create token".

Once you've created the token, it's going to give you the token that you can copy to your clipboard. You want to make sure to keep this somewhere to reuse it later if you want to because they're only going to show it to you once. I'm just going to copy that to my clipboard, go back to Figma, and paste that into the personal access token input down here. So, I've pasted that in, and then the next thing we need to do is just grab our Airtable URL.

What that means is if we go to our Airtable account (this is just the home page once you log into Airtable), what you want to do is have a base created. So, go ahead and click on "Create a base", and you can save this to your workspace. I'm just going to use the "CopyDoc" workspace that I already set up. Click on "Create".

I've actually already created a spreadsheet in Excel, but I want to use this in Airtable. So what I've done is I've saved this spreadsheet here, and I've saved it as a CSV file that I'm now going to import into Airtable.

I'm going to click on this CSV "Other" button over here, and then that's going to allow me to basically import a CSV file. So, I'm just going to drag and drop that into here and click on "Upload", and that's just going to import the CSV.

Again, you can basically do this manually. You don't need to import a CSV; you can totally just enter this in directly to Airtable, and that will work as well. But in this case, it's just easier for me to do it that way.

I've got my spreadsheet set up now, and you can see here I've basically got my "Projects" and "Headings" columns. So, the projects tag and the headings tag is what's going to be used as our label for these content Snippets, and then each row of these columns is going to be used as a variant that we can use for Content.

If that's not making sense right now, I'll show you exactly what that looks like in a second. So again, I'm just going to copy the URL, so I'm going to paste that into my URL down here, and then I'm just going to click on "ADD". That's basically going to load up our Airtable sheet.

You can see here it's found the sheet, it's loaded that up, and now we've got our content loaded directly into Figma. So, you can see here I've got my projects and I've got my headings as we just saw in the Airtable data over here. These are basically being used as separate Snippets that we can now apply to our text layers.

For example, if I were to click on this text layer here, and I wanted to give it a project name, I can either click on the "Apply" button here, and that's going to randomly select one of the text Snippets from our content that we just loaded from Airtable, or I can open up this panel, and I can manually select a snippet as well.

I can pick exactly which text variant I want to use, and that will automatically apply it to our text layers here. The other cool thing you can do is apply multiple variants at once. So, for example, if I've got these project names, and I know that I want to basically populate them with some real content or content from my Airtable spreadsheet, what I can do is I can go in here and select all of these text layers at once. So if I just select all six of these, so I'll just do that now, I'll go through and select all the project name layers.

With those six layers selected, now I can basically go through and apply these variants in either alphabetical order like that, or I can do it randomly. So, this is going to randomize the order, as you can see here when I click on that, or we can do it in the original order as well.

The original order will take whatever order that we've added in our original Airtable spreadsheet. So, Adidas, Apple, Uber, Airbnb, Disney. If we want to apply those in order, we just have to click on this "Order" button, and that's automatically going to apply those in the original order that we had in our Airtable data.

The other thing we can do is we've got a headings item. So if you click on this headings item, you can see here that we can apply that in the exact same way. We can just use the "Apply" button to randomly do one, or we can select one individually instead.

And because this is now synced up to Airtable, we can also update this on the fly and refresh new content as it's available in the spreadsheet. So, for example, if we wanted to add a new field name called "subheading", so if we added a subheading field, I'm just going to add that in, and basically, we're just going to populate this with some test content.

I'm just going to do this as "testing subheading" and "another subheading", and that's just going to be a quick test to show you what I mean when we need to sync it back in.

If we go back to Airtable, you can load that back up by just clicking on this little refresh icon down here. So with the saved spreadsheet already selected from Airtable, just click on the refresh icon, and it'll load that right in. So, you can see we've got our new subheading trigger, and if we click on our subheading down here, we can apply this subheading snippet directly to that text area.

Same thing with here, so if you selected both of these layers, that would allow us to apply those in order. So, we could do it in order or alphabetical reversed just as we saw with the other options as well.

I just wanted to keep this really simple for today, just to show you how to link up your Airtable as a custom content library in Figma through the CopyDoc Figma plugin. And also to show you how to apply the variants, how to create those variants, and also how to resync the content from your Airtable spreadsheet once you've already got it loaded in.

We'll leave it there for today, and I hope that's been helpful. If you're an Airtable user or you want to collaborate with your copywriters who are using Airtable or your team and always have an up-to-date Content Library that's available to everyone in Figma, this is going to be a really easy way of keeping those updates in sync and also a really easy way to automatically apply those to any text layers in your Figma designs.

Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to use Google Sheets as a Figma text content library using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-08-02T00:00:00.000Z
dateModified: 2023-08-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-use-google-sheets-as-a-figma-text-content-library-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-use-google-sheets-as-a-figma-text-content-library-using-copy-doc.md
---

# How to use Google Sheets as a Figma text content library using CopyDoc

#### Video Transcript

Today, I'm going to be showing you how to link a Google sheet to Figma to use it as a Content Library using the CopyDoc Figma plugin. 

To get started, all we need to do is go to your Figma file, click on the little "Resources" icon up here. If you just search for "CopyDoc" and under the "Plugins" tab, if you click on CopyDoc, you can run the Figma plugin by either clicking on this "Run" button here. Alternatively, I'd recommend clicking on this more options icon here and clicking save. That's just going to save it to your Figma plugins list for easy access.

I've already done that, so I'm going to go to my Figma canvas, just right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on CopyDoc. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it has a bunch of different features to help you manipulate and export and import text. Today, we're just going to be focusing on this Content Library feature. So if you click on the "Content Library" button here, that's basically going to open up this Content Library panel. I've done another Figma tutorial showing you what this Collection tab does, but for today, we're going to be focusing on the Integrations tab.

If you go ahead and click on the Integrations tab, you'll basically see that it defaults to the Google Sheets option. If you've got Google Sheets selected, you're basically ready to go. What we can do now is we can actually link up a Google sheet.

I've got a Google sheet set up over here with a couple of bits of content, and I'm going to copy this URL into the CopyDoc Figma plugin by going to the share button over here in the top right, clicking on that, and just making sure that the general access setting is set to "Anyone with the link can be a viewer." You want that to be "Anyone with the link" is set to a viewer. Once you've set that, go ahead and click on the "Copy link" button to copy that to your clipboard. Then, if you go back to Figma, you can now paste that into this input field where it says "Add new Google sheet." I'm just going to paste that in there, and that's basically going to fetch the Google sheet URL.

Once it's found the tabs, it's going to load up the content and populate the Content Library here with your text. That should finish loading, and you'll see that we've got our Snippets in here that we imported from Google Sheets. This is getting imported directly from this URL, so this is basically live data that's getting pulled in from Google Sheets into your Figma Content Library panel.

What this allows us to do is use that content in our designs. So I'll show you what that means. We've got this headings snippet here with a bunch of different variants. If we go ahead and select a Figma text layer, we can apply any of these variants to that text layer. For example, I can apply a random one just by clicking on the apply button here, and if I keep clicking it, it'll just keep doing random text replacement. Alternatively, we can select one directly, so we can select one of these Snippets, and that will automatically replace the text here.

Likewise with these projects down here, so if we wanted to replace some of these projects with updated project names, all we can do is select all of those text layers, and then in our projects snippet over here, again, we can hit apply, and that's automatically going to apply those to our text layers. We can also have more control over the way those are ordered. If you're doing multiple applications of text, you can do it in order. So that'll basically follow the original order. Nike website added at Spanish ads Apple ad campaign, so those are in order.

Or you can do it randomly. That'll randomize the way that the text gets rolled out if you wanted to do a more random version. Or you can do alphabetical reverse or otherwise, so you can go A to Z or Z to A. That's just a really quick way of having a bit more control over applying those text layers. Likewise, we can apply these to single layers as well. Of course, we can click on this project name here and populate it with one of our campaigns or one of our titles. That's a really quick way of doing that.

And then, of course, if we wanted to update these in Google and reload them in the Figma plugin, we can definitely do that as well. Maybe we want to add a new item over here, so we could do you know Disney campaign and add that in there as another one. We could maybe delete some of this content. I'm just going to delete this cell here. We can add another variant, so we can call this one taglines. We can basically add more text in here, so I'm just going to do test content here and another tagline here. You can obviously populate these with much better content than that.

Now if we go back to our Figma plugin and click on the little refresh icon down here, that's just going to fetch the Google sheet again, reload the content, and you can see we've now got our new taglines item. So if we drop that into here, we can apply that as test content or this other tagline here. I'll randomize that, and again if we open up the headings, you can see one of them has been removed, and in projects, we've got our Disney campaign as well, so we could easily use that right there. That's a really quick way of syncing up data from a Google sheet.

This is a really cool way to keep your Content Library in sync. You can add as many of these columns as you like, you can just keep adding multiple columns, and those will automatically get added into the Google sheet sync feature over here. I'll basically leave it there for today. I just want to give you a really quick fundamental overview of how this feature works and how you can sync up your Google Sheets to use them as a library with multiple Snippets, multiple variants, as you saw. You can basically just add as many rows as you want, so you can just populate these and create as many text variants as you want for these different types of text Snippets.

That's going to give you a really easy way of loading in realistic content into your designs that's basically been approved or is ready to use instead of just using lorem ipsum or copying or anything like that. So I hope that's helpful if you've been wondering how to use your Google Sheets as a bit of a Content Library in Figma. The new Content Library feature in CopyDoc is going to be a really helpful way of doing that.

Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to create a re-useable text content library in Figma using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-08-01T00:00:00.000Z
dateModified: 2023-08-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-create-a-re-useable-text-content-library-in-figma-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-create-a-re-useable-text-content-library-in-figma-using-copy-doc.md
---

# How to create a re-useable text content library in Figma using CopyDoc

#### Video Transcript

Today, I'm going to be showing you how to create a reusable text content library in Figma using the CopyDoc Figma plugin.

To get started, all we need to do is go to our Figma file and click on the little "Resources" icon at the top here. If you search for CopyDoc and under the "Plugins" tab, click on the CopyDoc results. You can run the Figma plugin by either clicking on this run button here, or I'd recommend clicking on this more options icon here and clicking save. That's just going to save it to your Figma plugins list for easy access later. So, I've already done that, and I'm going to go to my canvas and right-click anywhere, go down to "plugins," go down to "saved plugins," and then click on "CopyDoc." That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it has a bunch of different features to help you with updating text and exporting text. Today, I'm just going to be focusing on the content library feature. If you're interested in the other features, feel free to check out those in the CopyDoc playlist on the YouTube channel. But for today, we're just going to be focusing on the content library.

To get started, all we need to do is go ahead and click on this content library button here. That's just going to bring up the content library feature that I can run you through right now. Basically, this allows you to create reusable text Snippets that can include variants. You've got a bunch of different variants here, and these ones that have already been added. It just allows you to create a reusable content library that you can share with your team. So everyone's basically on the same page with the type of content and copy that has been approved to use in your designs.

I'll show you what that looks like to add a new text snippet. So, if you go ahead and click on "add new snippet" up here, that's basically going to bring up this little creation panel, and I'll run you through how it works now. The first thing you need to do is add a trigger shortcut. This is basically going to be the shortcut that'll automatically trigger the text to expand if you type it into a text layer. So what I mean by that, for example, is if we go back here and check out this heading one, if I basically take that snippet, so if I were to type in slash slash heading, that's automatically going to expand into that snippet or one of those snippets. I can also copy it to my clipboard and just paste it. That's also going to do that. But the snippet is basically going to be the shortcut that comes after the slash slash that'll trigger that snippet.

Again, if we go back to our add new snippet panel and I wanted to call this one tagline, for example, I can call it tagline, and the snippet will be slash tagline. You can also add dot characters if you wanted to do something like marketing dot tagline, you could do that just to make it more namespaced. But today, I'm just going to keep it simple and call it tagline. Then what you can do is add it to a collection, so you can store your snippets in different collections to make them more easily identifiable. I've already got a couple of these set up, so I'm going to put this under the marketing copy category. But you can go ahead and click on "add new collection" if you want and create a brand new collection. I'm just going to use marketing copy for now.

The interesting part down here is that we can then add our text content snippet. So, if you just wanted to add one tagline, for example, we can grab this tagline here and drop that into here. So, you could basically just include that as the one approved bit of copy. If you just wanted to add that one line, you could definitely do that. So, we could hit "save new snippet." When we open up our collections tab here, you can see we've got a new item called tagline. What this does is it allows us to reuse that snippet. So, if we went down here and clicked on one of these categories, we can basically just click on this text layer, click on the button, and that will automatically apply the text.

This content here hasn't quite been styled very well, so we can do a fixed width and then bring that in. So if you wanted to apply that, you can apply that there. It looks a little bit better. So, this will basically allow you to apply that snippet. But you'll normally want to have more than one snippet for a certain type of content snippet. So what you can do is we can now edit that. I'm going to click on the little pencil icon. If you want to add multiple taglines, so for example, if we want to split this into two, you'd basically just add the double pipe symbol characters. So on the keyboard, just push on the pipe symbol, so hold down shift and push on the forward slash or pipe symbol button, and just do a double one. So you want to do two, and then you can add more categories of text in there.

We can create text variants. I'm going to call this text variant example. So, we can add another one and then we can do another one here and so on. So, you can basically create as many as you want for these little snippets. When we hit "update snippet," you can see here that the content has been updated for that tagline trigger. So what that means is if we were to basically now go into here and use that trigger, so if we did slash slash tagline, that's automatically going to expand into one of those random variants. So, we can add it again, do tagline, and again, it's going to be random, so it's going to change every time, or again, you can just use the direct snippets down here and pick which variant you want. Or again, we can do multiple selections. So if we wanted to select multiple layers, we can definitely do that. So we can do all three of these, and that'll allow us to create an ordered or random application of those snippets. So we could do ordered, we could do random, so those are just going to bounce around, or we can do alphabetical as well. So that's just a really quick way of applying multiple snippets to multiple text layers at once.

You've got the option of applying them with the buttons, or you've got the option of applying them with the expander. So that's all well and good, but maybe you're thinking, I've got a bunch of text that I want to add, and I don't want to go through and manually add them one by one. Well, the good news is you can also do a CSV import. So if you click on this import CSV button, that's going to bring up this little drag and drop area here, and what you can do is you can download an example CSV. I'm just going to download that to my computer. I'm going to click on the little link, save that to my desktop. So I'm just going to open that up now. I'm going to open that up with Microsoft Excel. You can use any spreadsheet software that you prefer, Google Sheets, or numbers, or anything like that. Today, I'm just going to be using Excel to keep it very generic.

You can see here that the example file basically contains the header row. The header row is where you're going to add your triggers or your shortcuts for the text expander. And then each row underneath that per column is going to be the text variants that you want to use. So these are basically just two different text variants that will get added. We can obviously add more. So, we could do content copy, and just add some random text. We could do "Random text," "Another bit of text." And if we were to basically now hit "Save," so I'm just going to save that CSV. And now what we can do is drag and drop that updated CSV file into our little drop zone area here. So, I'm just going to drag and drop that in.

You can see that it's loaded up our snippets. It's got three new snippets detected, and we can go ahead and select a new collection for those snippets. So, I'm just going to go ahead and create a new collection. So, I'm going to click "Add new collection." I'm going to call this one "CSV Imports", so you can call this whatever you want, and CSV imported snippets. Then just go ahead and click on "Import Snippets," and that's going to bulk import those new text snippets into your collections tab. You can see here, if we go down to our CSV imported snippets collection and filter those down, the three new text snippets that we just imported by CSV are now available. So, we can basically go ahead and use those. You can see here, if I apply those text snippets, or if I jump into this one, that's basically going to include the text that we just imported from our CSV file. So that's a really quick way of doing that.

The other thing that you can do is then re-export these to CSV if you wanted to. So, what we could do in this case is basically select the snippets that we want to export, just check those, click on "Export to CSV" up here, and then save that to your computer. It's basically going to save that into categories. So if you've got multiple collections selected, it's going to export each of those collections to a separate CSV. But in this case, I'm just going to be doing the one we just imported. You can see here that it's basically exported the two snippets that we selected to be exported from the Figma plugin. What we can do now is basically update these. So, instead of calling this one "Random text," we can call this one "Ordered text" and change "Text" to "Content." We can change these things here, so we can add some extra names, and maybe we want to delete some as well. So delete this row here, and again, hit "Save" on that CSV, jump back into our selection. I'm just going to uncheck those, click on "Import CSV," and drag and drop that new updated file that we just exported and re-saved. I'm going to drop that in there.

This time it's basically saying we've got some existing snippets that we want to update. It's detected two new updates. We've got this snippet updated, and it's showing you exactly what's going to change. Go ahead and click on "import snippets," and that's going to update those text snippets for us. You can see here that the names have been updated, and the copy here has also been updated. So that's just a really quick way of bulk importing or updating existing snippets if you want to export those to CSV, make some updates, and then re-import them. That's a really quick way of doing that.

The other thing you can do in bulk is move these into different categories. So let's say we wanted to move these into a couple of different categories. We can basically select the snippets that we want to move, go down here to "Select Snippet Collection," and we can basically rearrange those collections in bulk. So I might want to move those into the buttons category. I can just select "Buttons" and click "move," and that will automatically move those snippets into the collection that you specified. Likewise, you can also bulk delete things. So, if you wanted to bulk delete these two snippets, you can basically just select those two, go down here, and click on "delete," and that will instantly delete those text snippets. So, you've just removed those.

That's a really easy way of bulk managing or updating and exporting and importing snippets via CSVs or via the selection in the Figma plugin. So yeah, that's basically it. I just want to go through the basics of how you can use CopyDoc to create a reusable text content library. You can imagine using this for all sorts of different copy. If you've got different types of components or different kinds of content categories in your app or on your website that you need to reuse copy for, you can go ahead and do that. So for example, CTAs, we've got some calls to action buttons here, we've got some calls to action text, and basically, you can apply these automatically from our little copy library down here and drill down into those and have some copy available whenever you need to populate some of these different text snippets down here.

We'll leave it there for today. I just wanted to run through the basics of creating a reusable text content library using this new content library feature in CopyDoc. Hopefully, that's helpful if you've been wondering how to create a reusable set of text snippets that are really easy to roll out into parts of your designs. This is one option that's hopefully going to make that a bit more manageable and scalable for you and your team. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Get design signoff without Figma seats
description: How to gather design signoff from stakeholders who do not need full Figma access.
datePublished: 2023-07-25T00:00:00.000Z
dateModified: 2023-07-25T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/get-design-signoff-without-figma-seats/
markdownUrl: https://www.hypermatic.com/articles/get-design-signoff-without-figma-seats.md
---

# Get design signoff without Figma seats

How to gather design signoff from stakeholders who do not need full Figma access. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Commentful

[Commentful](/commentful/) is one of the more useful tools in this workflow. Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

### Crypto

[Crypto](/crypto/) is one of the more useful tools in this workflow. Crypto matters here because design sharing is not always public or lightweight. When security, password protection, or controlled access matters, a normal share link often is not enough.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: tutorial
title: How to export HTML emails from Figma to Brevo using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-07-20T00:00:00.000Z
dateModified: 2023-07-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-brevo-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-brevo-using-emailify.md
---

# How to export HTML emails from Figma to Brevo using Emailify

#### Video Transcript

Today, I'm going to be showing you how to automatically upload your HTML email designs from Figma to the Brevo email marketing platform using the Emailify Figma plugin. 

To get started, all we need to do is go to your Figma file and click on the little "Resources" icon up here. If you just search for "Emailify" and click on the "Plugins" tab, then click on the Emailify result that pops up, you'll be able to run the Figma plugin by either clicking on this run button here. Alternatively, I'd recommend clicking on this more options icon here and clicking on Save. That's just going to save it to your Figma plugins list for easy access later.

I've already gone ahead and done that. Now, I'm going to go to my canvas, right-click anywhere, go down to "Plugins", then go to saved plugins, and click on Emailify. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, it allows you to design HTML emails in Figma and then export those to production-ready code directly from the Figma plugin. You just add a new frame and start populating that frame with a bunch of preset components. You can then customize and tweak the content and styles according to your brand or the content you need to include.

I won't be going through a detailed tutorial on that today. If you're interested in how to design the emails, there are a bunch of other tutorials on the YouTube channel that you can check out. Today, I'm really just going to be focusing on uploading some HTML emails that you've already designed in Emailify and getting those into the Brevo platform using the Brevo API.

To do that, we can basically finalize our email. I'm going to add a little footer down here. Then, we can get started to upload this to Brevo using the Emailify option for that platform.

First, we click on the export HTML button in the Figma plugin. Instead of the HTML email option, which is the default, we're going to open the platform Integrations. Find the Brevo option (previously Sendinblue, recently rebranded). Click on the "Brevo" option, and then we've got a couple of new options down here. Now, we basically need to get our API key from Brevo and our sender email as well.

Clicking on these two links will open up some browser tabs with the account pages of where to find those details. As long as you're logged into your Brevo account, clicking on the API Keys link will take you to this page. Click on the generate a new API key button. In this case, I'm just going to give it a name like "Emailify Figma plugin" and hit generate. That's going to create a brand new Brevo API key for us. We only get to copy this once, so make sure you copy that to your clipboard by clicking on this little copy icon here and then pasting it in the Figma plugin API key field.

The other tab that opens is the senders tab. The senders tab is where you've got your approved email addresses to send emails from. In this case, I'm just going to use my sender that I've got in the account and paste that into the sender input field.

Now that we've got those two details in there, all we need to do is select the emails that we want. I've only got one in this case, so I'll give it a subject line like "test subject" and add some pre-headed text as well if I want to. Once I'm ready to go, I can click on the upload to Brevo button here.

That's basically going to start exporting the production-ready HTML, upload any images, and then upload that entire template to your Brevo templates automatically. In a second, once it finishes, we can see that it's saying that our Brevo templates have been uploaded. If we go to our program marketing templates page after logging in, we'll be able to see them.

If we click on that link, it's going to open up this templates page here. I'm just going to refresh that because I already had it open. Now that we're refreshing the Brevo templates list, we can see here that we've got our example template. "Example" is coming from the frame name; our Figma frame is called "example" that we named it before in Emailify, and so the email template itself is also getting the example name.

What we can do is click on that now and if we open up that template, we should see a little preview. You can see here that our HTML exported from Figma is showing up as we'd expect. All of this is Rich Text, which is exactly what we want. We can see the mobile view, so this is the responsive version. I didn't go through how to customize the mobile design in Emailify, but by default, it kind of works itself out anyway. You can add other overrides if you need to. Check out one of the other video tutorials for a good way of learning how to do that.

This is a really quick way of seeing what our template looks like in Brevo after we've uploaded it from Emailify. The other thing that we can do is now assign this to a marketing campaign. For example, if we go to the campaigns page in Brevo and open that up, I've got this draft campaign down here, which doesn't yet have a design associated with it. What I can do is click on that test campaign, jump into the edit page, go down to the design step, click on this little three dots icon, and go to reset design. Just going to click yes to confirm that I want to get rid of whatever design was there, then I'm going to click on start designing.

This is what will usually come up the first time you create the campaign. Just click on start designing, go to my templates, and then go down to the template that you want to use. In this case, I'm just going to click use template on the example template that we just uploaded. That's going to select that template as my campaign template.

The cool thing about that is we can then preview it. If you want to click on preview and test, you can send a test email to your own email address or a recipient on your mailing list. You'll have a mailing list that you've selected, and you can select a recipient and send them a test. That can be really helpful as well if you want to see what the dynamic content looks like, if you've added any Dynamic tags like a hello tag that populates someone's first name. You'll be able to see what that looks like when you send out a test as well.

That's basically what it looks like. That's the quickest way to get your email from Figma into the Brevo platform if you're using that to send out your HTML emails. This is going to be a really quick way of uploading your templates directly from Figma into Brevo. I'll leave it there for today. I just wanted to keep that really quick to show you what that new integration looks like if you're a Brevo user. Hopefully, that helps you and your team's workflow. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to SendPulse using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-07-12T00:00:00.000Z
dateModified: 2023-07-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-send-pulse-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-send-pulse-using-emailify.md
---

# How to export HTML emails from Figma to SendPulse using Emailify

#### Video Transcript

Today, I'm going to be showing you how to automatically upload your HTML email designs from Figma into the SendPulse platform using the Emailify Figma plugin. 

To get started, all we need to do is go to your Figma file. If you click on the little "Resources" icon and search for "Emailify" under the "Plugins" tab, if you just click on the Emailify item, you'll be able to run the Figma plugin by either clicking on this run button here. Or, I'd recommend clicking on this little more options icon here and clicking save. That's just going to save it to your Figma plugins list for easy access later. So, I've already done that.

Now, I'm going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on "Emailify." That's just going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, the way that it works is it basically helps you design emails in Figma that you can then export to HTML automatically without having to do any coding or anything like that.

I'm just going to create a really quick email container. I'm just going to add that to my page, and I'm just going to add a couple of components just to really quickly spin up a new email. I'm not going to be going through all of the design features and all of the ways you can customize the emails in this Figma tutorial. If you want to get a bit more of a deep dive into that, you can follow along with some other Figma tutorials on the YouTube channel. But for today, I'm just going to keep it really simple and assume you've already got your template designed for uploading into SendPulse.

The last thing I'm going to do with this really quick template is just go to the "Footage" tab, and I'm just going to find the SendPulse item. So, there's a "SendPulse" item down here. If you click on that, that will basically add a predefined footer that you can obviously customize, but it comes with the unsubscribe link already pre-filled. So, if we go to the link here, you can see that it's got the unsubscribe tag. This is going to automatically populate that unsubscribe link in your email, which you're going to want to have in there just to make it a valid email that can be sent out with the unsubscribe link.

Now that we've got our email designed, we can quickly preview that using the preview button here. That's just going to give us a real HTML preview of what that's going to look like. As I said, you can customize this further for mobile and desktop, but I won't be covering that in this Figma tutorial.

Now that we've got our email the way that we want in HTML, we can now upload this automatically into SendPulse by clicking on the "Export HTML" button here and then changing the option here from HTML email and scrolling down to the platform Integrations grouping and finding the SendPulse option. So, I can see I've got SendPulse here. When you click on that, it changes some of the options down here. It's basically asking for the API ID and secret from SendPulse.

If you just go ahead and click on that link there, if you're already logged into your account, which I am, it's going to open up this page here, which is the account settings page, and you'll automatically be directed to this API tab. So, what you want to do is you want to click on the little copy icon here for the ID first. We'll grab the ID from SendPulse and paste it into the ID field here in Emailify. Then, we're going to do the same thing for the secret. I'm going to grab the secret, just click on the copy button, and jump back into Emailify and paste that in there as well. Once you've got those two pasted in there, you'll see that the button becomes available to upload to SendPulse.

It's also worth adding a subject line. So, you might want to add a new subject here. I'll just do a new feature announcement as my subject. I'm just going to basically click on the "Upload to SendPulse" button now. If I go ahead and click on that, that's going to generate all the HTML automatically for me. It's going to upload the images, and then it's going to upload that template automatically into my SendPulse templates.

Once it finishes, you can see that it's saying that our SendPulse templates have been uploaded, and we can view them by going to this email templates page in our SendPulse account, provided that we're logged in under the personal tab. I've already got that link open here, so I'm just going to refresh that page, and hopefully, we'll see our template show up. So, there we go. We can see the template that we just uploaded. If we open that up a bit, you can see here the "Welcome to Jiro Hero" there, as we'd expect. That's just been uploaded a moment ago from Figma directly into SendPulse in our email templates.

Now that you've got that HTML template automatically uploaded into your SendPulse account, you can basically use that however you want. So, you can go down here, you can do things like create a campaign from that template. That's probably the most common thing you're going to do. If you need to, you can also edit the template, make a copy of it, put it into a different folder. So, if we click on "Edit Template," this should bring up an editor if you wanted to check out what the HTML actually looks like in here. So, you could do that. If you wanted to edit the content in line, you could obviously do that as well. You could change this to be "Welcome to our restaurant" instead or you could change any of this content here or any of these links and things like that. You can see here we've got our link unsubscribe URLs in there, as we'd expect. That's basically what all of that looks like there.

That's if you did want to make any changes in the template here. I'd recommend doing it in Figma ideally and then re-uploading the template if you need to make content or graphic changes, just so it's a bit more reliable in case the SendPulse editor does something weird with the HTML. But that option is there if you wanted to edit the template after it's sent to SendPulse.

That's basically it; I just want to keep this really simple. If you are using the SendPulse email marketing platform and wanted to automatically get your HTML emails out of Figma that you've designed with Emailify up into your templates list and SendPulse, this is going to be a really quick way of going about it, just using the SendPulse API and the Emailify-SendPulse integration.

Yeah, I think we'll leave it there for today and keep it a really short one. Hopefully, that helps you or your team. If you're SendPulse users, feel free to give this new Emailify upload option a try. And as always, thank you for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Design approval workflow for agencies
description: How agencies can structure design approvals so reviews move faster without losing control.
datePublished: 2023-07-08T00:00:00.000Z
dateModified: 2023-07-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/design-approval-workflow-for-agencies/
markdownUrl: https://www.hypermatic.com/articles/design-approval-workflow-for-agencies.md
---

# Design approval workflow for agencies

How agencies can structure design approvals so reviews move faster without losing control. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Commentful

[Commentful](/commentful/) is one of the more useful tools in this workflow. Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

### Crypto

[Crypto](/crypto/) is one of the more useful tools in this workflow. Crypto matters here because design sharing is not always public or lightweight. When security, password protection, or controlled access matters, a normal share link often is not enough.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Company Flow
description: A mid-year, independence day update on what we've been up to in 2023 so far, and what's on the horizon.
datePublished: 2023-07-04T00:00:00.000Z
dateModified: 2023-07-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/company-flow/
markdownUrl: https://www.hypermatic.com/articles/company-flow.md
---

# Company Flow

As with the last mid-year update, this [Company Flow](https://www.youtube.com/watch?v=53DcVyXe5lFKpc) update also falls on July 4th. Even though Hypermatic is based in Australia, and not the United States (or Japan, as some seem to think, based on the design of this website), I do like the idea of doing these mid-year updates on Independence Day, and re-focusing it on continuing to declare our independence from legacy design/development workflows.

### First half of 2023 — tl;dr

The start of the year was kicked off with soft-launching (this is the first time it has actually been posted about at all so far) a brand new Figma plugin called [Weblify](/weblify), which has been in development for quite a while, and it seemed like it would just be better to ship a very stripped down version of what the plugin will eventually become, and launch it with the most basic functionality of allowing anyone to inspect their Figma layers as code (HTML, React, Vue etc).

Compared with the more chaotic and uncertain [first half of 2022](/articles/strictly-business), the first 6 months of 2023 have been far more focused, with the main goal of just increasing the throughput of shipping as many useful product features, updates and fixes as possible; lots of customer requests or things that have been on the todo list for a while have now been shipped.

The momentum that gets generated by shipping lots of stuff tends to build on itself and lead to even more velocity. I think that momentum is one of the more underrated things when working on anything, and once you've lost it, it can be very difficult to get back; knowing that, I think being extra vigilant of ensuring momentum stays high should always be an important focus.

It's also important to balance high throughput of small to medium sized tasks with longer-term projects that can't be completed within a few days or a week, so the second half of 2023 will be less focused on raw throughput of shipping things, and more concentrated on tackling a smaller number of larger, significant features or updates that will create much higher value to every customer using them.

### Plugin update highlights in 2023 (so far)

There are multiple updates and small fixes shipped to multiple Figma plugins on a daily basis, but here are some cool highlights from the first half of 2023:

- Added [Word Doc support](https://x.com/hypermatic/status/1670239945146134528) to CopyDoc
- Added [layer Styles support](https://x.com/hypermatic/status/1667743541676867584) to CopyDoc
- Added [layer Renaming support](https://x.com/hypermatic/status/1666328486662000640) to CopyDoc 
- Added [markdown support](https://x.com/hypermatic/status/1665877105354342400) to CopyDoc
- Added [Jivox export option](https://x.com/hypermatic/status/1664071346475892736?s=20) to Bannerify
- Added [presentation analytics](https://x.com/hypermatic/status/1662985798646665218?s=20) to Pitchdeck
- Added [original image fill exports](https://x.com/hypermatic/status/1659398348460429314?s=20) to TinyImage
- Added [Pardot integration](https://x.com/hypermatic/status/1657910446777839618?s=20) to Emailify
- Added [dark mode previews](https://x.com/hypermatic/status/1657576673347518470?s=20) to Emailify
- Added [Salesforce Marketing Cloud integration](https://x.com/hypermatic/status/1656858913604767746?s=20) to Emailify
- Added [text link hovers](https://x.com/hypermatic/status/1656132235094016001?s=20) to Emailify
- Added [Canva embeds](https://x.com/hypermatic/status/1655716295235760130?s=20) to Pitchdeck
- Added [button hovers](https://x.com/hypermatic/status/1655344806875512832?s=20) to Emailify
- Added [iFrame website embeds](https://x.com/hypermatic/status/1655043724064464896?s=20) to Pitchdeck
- Added [custom component categories](https://x.com/hypermatic/status/1654701661900935170?s=20) to Emailify
- Added [2-way hover effect transitions](https://x.com/hypermatic/status/1653900828821032960?s=20) to Bannerify
- Added [custom component libraries](https://x.com/hypermatic/status/1651120706929983488?s=20) to Emailify
- Added [wireframe mode previews](https://x.com/hypermatic/status/1647795287552053248?s=20) to Emailify
- Added [cubic-bezier easing](https://x.com/hypermatic/status/1646378828158357504?s=20) to Bannerify
- Added [responsive display ad exports](https://x.com/hypermatic/status/1645201713715113984?s=20) to Bannerify
- Added [PDF preview exports](https://x.com/hypermatic/status/1644829932797988864?s=20) to Emailify
- Added [Netlify preview links](https://x.com/hypermatic/status/1644102084667777024?s=20) to Emailify
- Added [automatic page numbering](https://x.com/hypermatic/status/1643144168083161088?s=20) to Pitchdeck
- Added [Netlify preview links](https://x.com/hypermatic/status/1642039025996554241?s=20) to Bannerify
- Added [text bullet lists for PPTX exports](https://x.com/hypermatic/status/1640919022861701121?s=20) to Pitchdeck
- Added [custom code block injection](https://x.com/hypermatic/status/1640512181996511232?s=20) to Bannerify
- Added [Mailgun integration](https://x.com/hypermatic/status/1639798909932568577?s=20) to Emailify
- Added [optimized SVG imports](https://x.com/hypermatic/status/1638318891196891137?s=20) to Convertify
- Added [Adobe Illustrator to Figma imports](https://x.com/hypermatic/status/1636148924082950146?s=20) to Convertify
- Added [scrollable slides](https://x.com/hypermatic/status/1635859043318390785?s=20) to Pitchdeck
- Added [PDF to Figma imports](https://x.com/hypermatic/status/1635509998028722176?s=20) to Convertify
- Added [Figma prototype embeds](https://x.com/hypermatic/status/1632582192089157632?s=20) to Pitchdeck
- Added [mobile hamburger menus](https://x.com/hypermatic/status/1629954010680823809?s=20) to Emailify
- Added [video sync from spreadsheets](https://x.com/hypermatic/status/1628979004807204864?s=20) to CopyDoc
- Added [custom webhook exports](https://x.com/hypermatic/status/1626018328044277760?s=20) to Emailify
- Added [Figma prototype links in PDF exports](https://x.com/hypermatic/status/1623871454742982660?s=20) to Pitchdeck 
- Added [custom icon bullet lists](https://x.com/hypermatic/status/1623530710601695232?s=20) to Emailify
- Added [local image file sync from spreadsheet](https://x.com/hypermatic/status/1623131791027744769?s=20) to CopyDoc
- Added [link outlines toggle for PDF exports](https://x.com/hypermatic/status/1622381632866095104?s=20) to TinyImage
- Added [SVG favicons](https://x.com/hypermatic/status/1618483155060817920?s=20) to Favvy
- Added [custom color profiles](https://x.com/hypermatic/status/1616938031340216321?s=20) to TinyImage
- Added [dark mode support for Figma plugin UI](https://x.com/hypermatic/status/1615187068069777408?s=20) to All Plugins

### The (AI) elephant in the room

Since writing that "<s>software</s> AI is eating <s>the world</s> design" in [the last 2022 end of year update](/articles/from-two-to-three), seemingly every established company and startup are rushing to either pivot to AI or add-on AI in some form, often just as an API call to OpenAI to have ChatGPT sit behind their own product UI.

> “Whenever you find yourself on the side of the majority, it is time to pause and reflect.” - Mark Twain.

I'm a huge believer in this breakthrough technology, but at the same time, I don't think that it's the correct time for Hypermatic to drop everything to join the mad rush into mashing "AI" into every product; and there are a few reasons why:

First of all, Hypermatic is a private, self-funded startup, without any investors or other stakeholders; this means that's there is zero pressure or incentive to try and artificially (or actually) increase the valuation by mentioning "AI" as many times as possible in investor updates, pitches for new rounds of funding, or public product announcements.

Second, and more importantly, is that it's still _super_ early. If the strategy a year ago had been to drop everything and start training bespoke models for design, or content, or anything like that, it's likely that any innovation or moat would have already been wiped out 12 months later by what's available as open-source or consumable APIs (ChatGPT, etc).

Third, I believe that the cost and barrier to leveraging this technology is trending down to zero, and will also be broadly available in almost every application that we use today as native functionality (where "AI" is never mentioned or thought of when using it). If lots of this is going native, then doubling up on that work prematurely seems like it could come back to bite later down the track.

By designing certain features or products in a way that sees all of these benefits coming down the track, and lays the groundwork to benefit from them, without going all-in right away, I think that over the long-term, it will lead to better products that are more efficient to build out and operate in the medium-term just by stepping back and waiting for the dust to settle.

So much venture capital is being poured into any startup with "AI" in their deck, so with all these smart teams working in that space, I'm very optimistic that this technology is going to get way better, more accessible and more cost effective over time; and that seems like a better time to start thoughtfully adopting things that can solve real problems in a new way, rather than just bolting on a ChatGPT API because it's possible (but not super useful or the right solution).

### Looking ahead

As mentioned above, using the ([Rocks, Pebbles and Sand](https://longform.asmartbear.com/rocks-pebbles-sand/)) analogy for work, if the first half of 2023 was focused on "sand", then the second half of the year will be much more focused on "rocks" and "pebbles".

Half way through the 3rd year into this mission, it feels like a really good foundation is there across the board for all the products now, but it's always day zero and there's still so much more to be done; it's definitely still a marathon and the focus is firmly on the long term, while also keeping the momentum at a pace where it always feels like sprinting day-to-day.

After planning out the next 3-6 months recently, I'm excited for Hypermatic to drop some really cool and useful bigger updates for some of the most popular products between now and the end of the year, while also doubling down on the long road ahead of taking [Weblify](/weblify) to its final vision (as a worthy cousin to [Emailify](/emailify)) for easily designing and building things for the web.

Anyway... back to work! See you in 6 months (for the end of year update).

---

---
type: tutorial
title: How to send yourself tests of HTML emails from Figma with PutsMail using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-07-04T00:00:00.000Z
dateModified: 2023-07-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-send-yourself-tests-of-html-emails-from-figma-with-puts-mail-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-send-yourself-tests-of-html-emails-from-figma-with-puts-mail-using-emailify.md
---

# How to send yourself tests of HTML emails from Figma with PutsMail using Emailify

#### Video Transcript

Today, I'm going to be showing you how to send yourself HTML email tests to your own email address using the Emailify Figma plugin and the PutsMail.com service.

To get started, all we need to do is go to your Figma file. If you click on the little resources icon up here and search for "Emailify," and if you go to the "Plugins" tab and click on the Emailify item, you can run the Figma plugin by clicking on this "Run" button here.

Or, I'd recommend clicking on this little "More options" icon here and clicking save. That's just going to make it really easy to run the Figma plugin from your saved Figma plugins list later. I've already done that, so I'm going to go to my Figma campus and right-click anywhere, just go down to "Plugins," and then go down to "Saved plugins." If you click on the Emailify item, that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you design HTML emails in Figma, which you can then customize and change the content styles of before exporting it to production-ready HTML automatically.

I'm not going to be going through all of the design features today. I'm going to be assuming that you've already gotten yourself familiar with those, and you've got the email design the way that you want.

If you're new to the Figma plugin, you can check out some other Figma tutorials on the YouTube channel, which will go into depth about how to use the design tools and create and customize your emails the way that you want to.

For today, let's just assume that you've already got your email designed, and now you want to send a test email to yourself of the exported HTML. So, let's go ahead and do that, and we'll start by exporting the email from Figma to HTML.

I've got my email here. I'm just going to click on the export HTML button in the Figma plugin. And once you've clicked on that, just make sure the upload hosted images URL option is selected, and then click on the export to HTML button here. And once that finishes generating, we can download that to our computer.

Once it finishes uploading the images, you'll get a little button down here that says download your zip file. So, I'm going to click on that now. And if you save that to your desktop and just unzip that file, and then if you open up that folder, you'll see that you've got a folder called the same name as your Figma frame here. And inside of that folder, there'll be an index.html file, which is your HTML email.

I'm going to open that up in my code editor. I'm just going to drag and drop that into here. And this is basically all the exported, automatically generated HTML from our email. And I'm going to copy that to my clipboard for now. So, I'm just going to select all of that and copy it.

And then what I'm going to do is go to my browser, and I'm just going to go to PutsMail.com. So that's p u t s m a i l.com. And this is a service that's free. It allows you to send tests of your HTML emails to yourself so you can see what they look like in your own email inbox or on your mobile or on your desktop email client.

To get started, you just have to create a new account. It's totally free. You can just sign up for a PutsMail account. And once you've done that and you've signed in, you can then click on this create a new test email button. So, I'm going to click on that now.

And then once that page loads, you're going to be able to drop in your HTML, add a subject line, and select the email addresses or input the email addresses that you want to send the HTML test to.

First of all, I'm just going to drop in my HTML. So, I've just pasted that into the body there. I'm just going to make that subject line be "test" for my email. I'm just going to paste in my own email. So in this case, I'm just going to do one address. You can actually add more addresses if you want to send it to multiple people or multiple inboxes of your own. You can totally do that by clicking on this button here. But for today, I'm just going to be sending one HTML email to myself, which is going to be going to a Gmail account.

And then when you scroll down here, you want to make sure to not check this checkbox that says "move my CSS inline." Emailify automatically inlines all of the content. And what that means is that you can see down here that the table cells and the HTML elements themselves already have inline styles applied to them. So, you don't need to check that box. In fact, it'll probably cause issues if you do. So just leave that as is. And what that means is it's going to take exactly what's in our email here and it's going to send that directly to our email address without modifying it at all.

This is really helpful for troubleshooting, especially if you're using another email platform like MailChimp or Klaviyo or something like that. And if you're seeing issues with that platform, it's always good to run it through PutsMail.com as more of a double-check, just to make sure that it's not the email platform itself messing about with your HTML. PutsMail is going to make sure that your HTML is unmodified, so you get a really accurate view of how it should look.

Once you've done all that, just go ahead and click on the "I'm not a robot" thing just to make sure that it sends. And then once that's selected, just click on "send email," and it's going to shoot off that email, that HTML, to the address that you specified or addresses that you specified. And once it finishes, it'll give you a little success message, and it's saying your test is on its way.

Now what you want to do is just go back to your inbox. So log into your email client and switch into that. So, I've just switched into my Gmail inbox, and I can see that the test that we just sent ourselves is right here. You can see there's a test from Litmus PutsMail. So, if I click on that result, we can see here that it's basically loaded up the HTML as we'd expect.

This is all of the real HTML that we exported from Figma, and we're able to test this directly in our Gmail inbox using the Gmail web app. You could obviously test this in the Gmail mobile app as well if you're using that. Or if you're sending this to a totally different email service, you would obviously log into that platform. Or if it's the Outlook client or something like that, you could see exactly what this looks like. You can click on any of the buttons, make sure everything's working as you'd expect. And that's going to be a really nice way of just testing the email to make sure that it's looking good on your own client before you start testing around other clients as well, maybe using the Litmus.com platform to do some more robust testing.

This is a really, really easy way that I always do personally when I'm trying to test an email from Figma. So, if I'm exporting my emails from Figma to HTML using Emailify, I will send a test to myself sometimes for troubleshooting reasons, just using PutsMail, just to rule out any issues with email clients that might be mangling the code. So just using that as a really reliable way of sending unmodified HTML, I think, is a really good practice to get into if you are troubleshooting some weird issues with email platforms, just to rule out that the email platform isn't the cause of the problem to begin with. This is a really good way of validating that.

We'll leave it there for today. I just wanted to keep this really short and simple. If you've been wondering how to send yourself HTML email tests, using PutsMail is a really good way of doing that, a really quick way of getting your emails out of Figma into HTML and doing a really quick test just as a double-check to see what it looks like right out of the gate.

Hopefully, that's going to be helpful for your own workflows and also if you're troubleshooting, as I mentioned before. So yeah, we'll leave it there for today. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to test HTML emails in Outlook with exports from Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-07-03T00:00:00.000Z
dateModified: 2023-07-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-test-html-emails-in-outlook-with-exports-from-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-test-html-emails-in-outlook-with-exports-from-figma-using-emailify.md
---

# How to test HTML emails in Outlook with exports from Figma using Emailify

#### Video Transcript

Today, I'm going to be showing you how to automatically test your HTML email exports from Figma in different versions of Microsoft Outlook using the Emailify Figma plugin and the Litmus.com platform.

The first thing we have to do is just go to your Figma file and click on the little "Resources" icon at the top. If you search for "Emailify" and under the "Plugins" tab, click on the Emailify item. You can run the Figma plugin by either clicking on the "Run" button here, or I'd recommend clicking on this little "More options" icon here and clicking save. That'll save it to your Figma plugins list for easy access later.

I've already gone ahead and done that, so I'm going to go to my canvas, right-click anywhere, and go down to "Plugins". Then, I'm going to go down to "Saved plugins" and click on the Emailify item. That's just going to run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you to design HTML emails in Figma that you can customize and then export to production-ready HTML directly from the Figma plugin.

I'm just going to assume you've already got your design set up as you want. I'm not going to be going through that in this tutorial. But if you're new to the Figma plugin, you might want to check out some other tutorials on the channel to go through all the design steps and customizations. I'm just going to assume you've already got the email ready to go and you just want to test the HTML in different versions of Microsoft Outlook.

Let's go ahead and do that now. I'm just going to click on the export HTML button in the Figma plugin. I'm going to click on the export HTML button again, making sure that I've got the upload host image URLs selected. That's just going to allow us to automatically have those images included in the HTML. So, I'm going to click on export to HTML.

Once this finishes exporting, I'm going to save this to my desktop. So, I'm going to click on the "Download your zip file" button, save it to my desktop. And if I now unzip that folder, we can see here that our email is inside this folder here with the same name as our frame.

Basically, I'm going to take this HTML file, which is our HTML email, and just drop it into a code editor. So, I'm just going to drop it into here. And that's going to allow us to copy-paste the HTML into Litmus.

I'm just going to copy all of the content from my HTML file. And then I'm going to go to my browser. And I'm already logged into Litmus.com. And I'm basically going to click on the "Create new" button up here under the test tab.

Under the test tab, I'm going to click on "Create new". And then, I'm just going to call this Outlook tests and click on the test selection here. Where it says "Build or test", we want to click on "Test". Then I'm going to click "Bring in your email".

There's a couple of ways to do this. Today, we're just going to be pasting in the HTML. But you can also send an email to this special address if you're sending it from an email service provider like MailChimp or something like that. If you want to send it from there, you definitely can. But for today, I'm just going to be doing a raw test just with the HTML that we exported from Figma by pasting it in.

I'm going to go down here and click on "View more ways to create an email". And if you click on that, it's going to give you this text area here that you can paste your code into. So, I'm going to paste that code that we copied from our clipboard. And here, I'm just going to call this test as the subject line. And then I'm going to click "Done".

Once you click "Done", it's going to upload this HTML into Litmus.com. And it's going to run your email through a bunch of different email clients to show you how it's actually going to render on those email clients once that gets sent out.

These aren't emulated previews. These are totally real previews that are being run on the Litmus.com servers behind the scenes. And they're going to give you screenshots of what that actually looks like on all these different operating systems and on all these different versions of Microsoft Outlook.

You can see here it's basically loading up a bunch of previews for different versions of Microsoft Outlook. We've got really old ones like 2007 and 2010, and also ones like 2016 on Mac and on Windows. And we're also getting the dark mode version on 2021 and Outlook 2019. So, you can see that we've got a whole bunch of different versions here, but we've also got access to view more as well.

If you want to test this on more specific Outlook versions, you can basically click on this "Choose email clients" button up here. And that will bring up a bunch of options that you can choose under the Outlook category. So, let's say we only want to test this on Outlook. We can basically clear all of the desktop clients. And just under the Outlook section here, we can either click this "Select all" button. And that'll select literally every version of Outlook that's available on Litmus. So, we can definitely do that. Or you can also go down here and select some web-based ones. So, if you want to test this on web-based versions of Outlook, you can do that as well. You can test it on Office 365. You can test it on Outlook.com. So, we can select those. And then, we can also test the mobile version. So, if you want to do mobile versions of Outlook, you can select those in here. You can do Outlook on iOS. We can unselect the Apple Mail ones in this case. And that'll basically give us a full suite of Outlook clients on desktop and mobile that we can check.

Now we can click on "Run previews". And this is going to take the HTML that we already uploaded a minute ago. And it's going to rerun that through the additional Outlook clients that we just selected in Litmus. This might take a little while just because there are quite a lot of clients, and the rendering process can take some time for all of these different clients on Outlook using Litmus. But you're basically going to get a full test suite of how your HTML that was exported from Figma is going to look across every version of Outlook that you can imagine or every version that's supported in the Litmus platform.

You can see here we've got the Outlook.com and Office 365 web-based previews. So, these are the web client ones we can see what they look like. You can see here that the preview is loaded up, and we've got all of our content in here. We've got rounded corners, which are going to be a bit different from the older versions of Outlook, as we'll see up here. You can see that these ones basically just have square corners because the Border radius property isn't supported in older versions of Outlook. So, if we load up this preview here, you can see that the corner radius is just square because that's what it falls back to. But the rest of the content is looking nice. So, you're going to get that a few times if you're wondering why the Border radius isn't supported in Outlook and maybe a few other small things. That's going to be why.

We can also see dark mode previews. We've got a bunch of different clients that do support dark mode on Outlook, so you can preview those as well. But yeah, this is basically the fundamental idea. You just take your HTML that was exported from Figma. You just open that up in either a code editor, or you can open it in the browser and just view source and copy that into the Litmus platform directly. And then, it's basically up to you to pick which email clients for Microsoft Outlook you're supporting or you're interested in seeing how they render. And Litmus will take care of all of the heavy lifting and let you preview that HTML in Outlook, any version that you want.

I'll leave it there for today. I hope that's been helpful if you've been wondering how to test your HTML emails in different versions of Microsoft Outlook. Litmus is a really, really robust way of doing that. So, I hope it helps with your testing workflow and QA workflow for your HTML emails. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to test HTML emails in dark mode with exports from Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-07-02T00:00:00.000Z
dateModified: 2023-07-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-test-html-emails-in-dark-mode-with-exports-from-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-test-html-emails-in-dark-mode-with-exports-from-figma-using-emailify.md
---

# How to test HTML emails in dark mode with exports from Figma using Emailify

#### Video Transcript

Today, I'm going to be showing you how to automatically test your HTML emails exported from Figma in dark mode using the Emailify Figma plugin and the Litmus.com platform.

To get started, all we need to do is go to our Figma file. If you click on the little "Resources" icon up here, you can search for the word "Emailify". Under the "Plugins" tab, you'll see the Emailify item pop-up. All you need to do to run it is just click on that item and either click on this "run" button down here or you can click on this "more options" icon here, which I'd recommend. Just click on the save icon here, and that'll allow you to save it to your Figma plugins list for easy access later.

I've already done that. I'm going to go to my canvas and just right-click anywhere. Go down to plugins, then go down to saved plugins, and click on the Emailify item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you to design HTML emails inside of Figma that you can then customize the content and design of in Figma using the normal Figma styling tools you're used to.

Once you've done that, you can then export that to production-ready HTML from the Figma plugin, which we'll do in a second. We'll be able to test what that looks like in dark mode on some different email clients.

I'm going to assume that you've already got your design set up as you want. I'm not going to go through all the design tools in this tutorial. If you want to go through those or if you're new to the Figma plugin, I'd recommend checking out some of the tutorials on the YouTube channel.

But for today, we're just going to be exporting this HTML email from Figma and testing it out in dark mode using Litmus. So, I'm going to do that now. I'm just going to click on this export HTML button up here. Then I'm just going to make sure the upload hosted image URLs toggle is enabled here, and then I'm going to click on export to HTML.

Once that finishes generating the HTML for us, we're going to be able to download that to our desktop. We can do that by clicking on the little "download your zip file" button. So, I'm going to click that now and I'm going to download that to my desktop.

I'm going to open up the zip file. If you open up that folder, you'll see you've got this little test email folder. That's just exported the email from here. So, we can see the test email frame that we've got in Figma. That's created this folder here.

What we want to do is take this index.html file inside that folder, and we basically want to open that up inside of a code editor. So, I'm just going to drag this into VS Code. You can also open that up in the browser and view source that way, but for today, I'm just going to be copying the code straight from this editor here.

I'm going to copy-paste all of that HTML code. Then I'm going to go to my browser and I'm going to go to Litmus.com. I'm going to use that service to test out this HTML in dark mode.

What I can do is I can go down here under the test tab. If you click on "test" in Litmus, and then click on the "create new" button down here. You basically just want to give this a name. So, I'm just going to call it "dark mode test". Make sure you've got the test option selected down here. Instead of build, you want to click on test. Then click on "bring in your email".

Once that loads up, there's a couple of different ways it's going to allow us to bring in our HTML. We can either send the HTML from a different platform to this special address here, and that will get loaded into Litmus. But for today, we're also just going to be focusing on pasting in the HTML instead.

What you need to do is go down here where it says "view more ways to create an email". You want to click on that little link. That's going to let us paste our email that we just copied from our code editor into this little box down here. Click on that input and click paste. That's going to paste in the HTML that we just copied. Then you can just put in whatever you want for the subject line and click on "done".

Once you click "done", it's going to take all of that HTML that we just pasted in. It's going to upload it to Litmus, and it's going to allow us to run that HTML email against different email clients to show how it's really going to render the HTML email once it lands in people's inboxes.

By default, it's going to pick a bunch of different email clients for you that it broadly selects. You're going to get a bunch of different Outlook clients. You're going to get some mobile clients and some web-based clients. But for today, we're mostly interested in dark mode.

What we can actually do is customize the clients by clicking on this little "choose email clients" button. If you click on that, you can now go in and manually select all of these different items. We can select Apple Mail on dark mode and light mode. We can go down to Outlook and we can select the document options there too. We can do Outlook 2021 or Office 365. We can do those in dark mode, and you can select that on Mac and Windows. You can pick a bunch of different options there.

We can also go down to our mobile and tablet options. So, we might want to do Gmail. We'll do the Gmail app on Android in light and dark mode just to compare them. Then we can also go down to our iOS options. We can do Gmail in dark mode and light mode, and also iOS mail. We can do iOS mail on iPhone 14. We'll do it in dark mode and light mode.

I think that's pretty good for now. It's a pretty broad selection. So, let's go ahead and run that. We can click on "run previews". That's basically going to take the HTML that we just uploaded and rerun those previews.

As I mentioned, these are real virtual machines or real computers that are being rendered. These aren't emulated. So, you're going to get a really accurate look at what these would look like if they're going to be sent to somebody's inbox that's running these particular clients.

In this case, it's going to be really handy for testing our HTML emails in dark mode. Dark mode is extremely difficult to design for based on the fact that these email clients all have their own way of handling it. They'll basically inject their own CSS styles on top of your HTML, overriding anything that you've designed. They basically go and apply whatever styles they think are the best for your design, even if that's often not necessarily the case.

Testing your HTML email in dark mode is really crucial if you want to understand how your HTML emails are going to get rendered in different email clients when they enable dark mode.

We can see here on the Gmail app, we'll just open up that one on iOS. And you can see here that it's looking good. They've changed the header, obviously, so it's a slightly darker header with lighter links. But the text is looking good. They've just swapped that out to be lighter text on a darker background. So overall, this isn't looking too bad.

If you have more complicated blocks with different color backgrounds and things like that, this can get really out there sometimes. These applications can really go to town on the styles that they inject. But because this is quite a simple design, it's actually looking really good.

And I think that's one of the key tips for designing with dark mode. You really want to kind of lean into the changes that these clients are going to make rather than trying to fight them. So, if you try to basically make it look exactly like this and keep those backgrounds and keep those text colors, it's going to be extremely difficult because so few email clients actually support doing dark mode overrides. You can do those using Emailify. So, for example, if you click on one of these elements and click on the HTML and mobile settings button up here, you can actually drop in background colors and text colors to override those.

But it's really important to know that only is supported in a handful of clients. So basically just Apple iOS mail on mobile and also the Mac OS mail app. They're really the two big ones that'll support these properties. But for the other clients, you're pretty much going to be stuck with whatever they decide to do.

As I said, it's really important to go through and see actually how these are going to get rendered. So, you can see down here we've got our Outlook one as well. So, we've got Outlook 2021 in dark mode, and that's basically going to render it on the desktop version. Again, we can see it's fairly similar to the Gmail version. It's kind of knocked out this color at the back. It's inverted this to a darker gray. So not as dark as the Gmail one, but it's inverted the text here as well. Very similar to what Gmail did overall. We can also see what that looks like across other versions as well.

But if we also then go into the Office 365 dark mode, you can see that that's also looking a little bit different too. If we load that up, you can see that the header is actually much darker. There's barely any background color difference there at all. The background of the overall email is essentially the same as the body. So before, in the other preview that we just looked at, it was actually quite different between the two. But in this case, Office 365 is just basically taking all of that color out and making it all the same. And it's changing this footer and header area down here to be a very, very slightly different color than the background.

Again, it can be very unpredictable to know what these clients are going to do. But again, all the more reason to test it in something like Litmus, as we're doing now, just to see how that is actually going to look once it gets into some of these clients and see how they handle them.

I'll leave it there for today. I just wanted to keep that really simple. You're welcome to go through each of these in more detail in your own tests. I don't think you'll be too interested in me going through every single client. But this is a really good way of testing your emails from Figma or testing any HTML emails in dark mode using the Litmus.com platform and getting a really accurate look at how this is going to render across different clients when they're in dark mode.

We'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to test HTML emails in different clients with exports from Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-07-02T00:00:00.000Z
dateModified: 2023-07-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-test-html-emails-in-different-clients-with-exports-from-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-test-html-emails-in-different-clients-with-exports-from-figma-using-emailify.md
---

# How to test HTML emails in different clients with exports from Figma using Emailify

#### Video Transcript

Today, I'm going to be showing you how to automatically test your HTML emails across different email clients using the Emailify Figma plugin and the Litmus platform.

To get started, all we need to do is go to your Figma file and click on the little "Resources" icon at the top here. If you click on that and search for "Emailify" under the "Plugins" tab, just click on the Emailify result. You can run the Figma plugin by either clicking this run button here, or I'd recommend clicking on this little more options icon here and clicking save. That's going to save it to your Figma plugins list for easy access later.

I've already gone ahead and done that, so I'm going to go to my canvas, right-click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on the Emailify item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to this Figma plugin, the way that it works is it basically helps you design HTML emails directly in Figma, which you can then export out to production-ready HTML automatically. That's what we're going to be focusing on today. I'm going to assume that you've already got your email designed using the Figma plugin and customized it in Figma. If you are new to the Figma plugin, you might want to check out a couple of other tutorials first. But for today, I'm just going to be assuming that you've already got your email set up the way that you want.

For example, you might have some more content, so I'm just going to throw this little image block in there. Now, we can basically export this to HTML to test in Litmus. I'm just going to click on the "Export HTML" button up in the Figma plugin. Then, I'm just going to make sure that "Upload hosted image URLs" is enabled. That's going to automatically upload the images for me. Then, I'm just going to click on "Export to HTML," and that's going to automatically generate the HTML from our design and export it into an HTML email that we're going to be able to test.

I'm just going to click on "Download your zip file." Then, I'm going to click on "Save" to save that to my desktop. If I open up that zip file, you can see here that I've got my HTML email in this folder here.

What I basically want to do is take that HTML, and I'm going to be pasting that into the Litmus platform. Litmus.com is a platform that allows you to automatically test your HTML emails across different email clients and see how they render in different clients like Outlook, Gmail, and other mobile devices.

All I need to do is basically go to my folder, take my HTML file, and get the HTML out of there. I'm just going to open up my code editor and drag and drop that HTML file in there. Then, I'm going to select all and copy that to my clipboard. In Litmus, I'm just going to click on this "Create New" button. I'm going to call this test email from Figma. Then, I'm going to select this "Tests" option up here and click on the "Bring in your email" button.

There are a couple of ways that you can bring in the email. As I mentioned, we're going to be doing it by pasting in the HTML. But the other way you can do it, if you're sending this test from an email service provider, is they give you an email address that you can send an email to with your HTML email in it, and this will automatically get captured here. But for today, we're just going to do it a simpler way and click on this "More ways to create an email" button.

At the very bottom, just click on that, and that will allow you to paste in your HTML. I'm just going to paste in my HTML to the code block here. I'm just going to paste that, and you can see all of our code that we just copied is now in here. Then, you can also just put in a subject line. We're just going to call this one "Test." Click on "Done."

After you click "Done," it's basically going to upload the HTML email that we just exported from Figma into Litmus as a brand new test. It's going to go to this "Previews and QA" tab, and this is going to allow you to view the HTML email in a bunch of different email clients and test how they render across all these different clients.

You can see here it's slowly loading in all the previews. These are real previews of the emails rendering in real email clients. So, it gives you an accurate view of what this is actually going to look like on certain applications that you might not have on your computer.

We've got things like Outlook 2016 on Mac, Outlook 2016 on Windows, Office 365, dark mode Outlook, and also some mobile clients as well. We've got Outlook on iOS, the iOS mail apps, and then also some web-based apps as well. If we click on any of these previews, we can get a larger version of that screenshot. Again, these are being rendered in the real email clients, so these aren't emulated. These are actually tests that Litmus does behind the scenes to a real machine or a real computer using some of these apps or web platforms. It basically gives you a really accurate way of seeing how the email is going to look in all of these platforms.

It does sometimes take a little while to load up because it is quite intensive. I think to run all these tests, but if we open up one of these tasks and load up the full version, we should be able to see what they look like. So, in this case, we're just looking at a full screenshot of Outlook 2016 on macOS. We can scroll down here, see the whole email, everything that we designed in Figma over here has now been rendered, and we can see that it looks the same as it did in Figma on macOS in Outlook 2016, which is really good.

If we go back, we might want to open up that same email on Outlook 2016 for Windows. So, we can do that if you just click on the result, it's going to load up the screenshot again. In this case, we're looking at the full screenshot of Outlook 2016 on Windows 10. You'll notice it still looks really good, but there are obviously a few small differences. For example, Outlook doesn't support border radius, so you can see that the border radius on the button, which was working on the Mac Outlook version, isn't going to be rendered on the Outlook version for Windows. That's just one thing to keep in mind. Of course, there'll be a few other minor things that Outlook doesn't support. Obviously, Outlook is notoriously bad for emails in general. But this is at least going to give you a bit of an idea of what it's going to look like, and you can make any enhancements or changes based on that.

Again, we can see Office 365 in Chrome. If we scroll down on this screenshot, we can see that Office 365 is rendering it a bit better. We've got our border radius included this time, I guess because this is a browser-based application rather than the older sort of desktop application from 2016. So, it's going to support a few more of those more modern things.

This is basically what you want to be doing. You just want to go through these and check out what's looking good, what's not looking good. By default, all of the components that are designed from Emailify, all of these components here that are available, have been tested in Outlook and the other email clients in Litmus already. So, those should all be looking really good anyway. But it's always worth testing it in Litmus or a platform like Litmus anyway just to be 100% sure of what it's going to look like when it does get delivered. I'd always recommend running through that as well.

You can also change the email clients that you use. So, if you wanted to choose different email clients, you can select different specific versions of Outlook. You can break this down into other categories and select very specific versions of these different clients as well. Then, you just select those and click "Run Previews" again, and that will automatically rerun the HTML previews for those clients that you've selected.

That's basically it. I'll leave it there for today. I just wanted to show you a quick tutorial of how to get your HTML from Figma into Litmus to test your HTML emails on a bunch of different email clients automatically in a way that's going to be very accurate to see how they're going to render. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to test HTML emails in Gmail with exports from Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-07-02T00:00:00.000Z
dateModified: 2023-07-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-test-html-emails-in-gmail-with-exports-from-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-test-html-emails-in-gmail-with-exports-from-figma-using-emailify.md
---

# How to test HTML emails in Gmail with exports from Figma using Emailify

#### Video Transcript

Today, I'm going to be showing you how to automatically test your HTML emails exported from Figma in Gmail on desktop and mobile using the Emailify Figma plugin and the Litmus.com platform. 

All we need to do to get started is just go to your Figma file and click on the little "Resources" icon up here. If you search for "Emailify" under the "Plugins" tab, click on the Emailify item. You can run the Figma plugin by either clicking on this "run" button here, or I'd recommend clicking on this little "more options" icon here and clicking save. That's going to let you run the Figma plugin easily from your Figma plugins list later. I've already gone ahead and done that, so I'm going to go to my canvas and just right-click anywhere, go down to "Plugins", go down to "Saved plugins", and then just click on the Emailify item. That's just going to run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you design HTML emails in Figma that you can customize and style however you like. It provides a bunch of different design tools and starter components that you can use to do that. I'm not going to be going through all of those things in this tutorial. If you're new to the Figma plugin and want to get familiar with all the design tools and things like that, I'd recommend checking out the other videos on the YouTube channel.

For today, I'm just going to be assuming you've already got your design ready to go the way that you want, and now you just want to test that HTML in Gmail. So, we're going to do that now, and I'm going to start by exporting this email I've got designed to HTML. I'm going to click on "Export HTML" in the Figma plugin, then I'm just going to make sure that the "upload hosted images" option is selected, and then I'm going to click on the "export HTML" button up here. That's just going to generate this design into HTML that we can download.

I'm just going to click on the "download JavaScript file" button down here and download that to my desktop. If you open up this file and open up the folder, you'll see here that we've got our test email folder, which is the same name as our frame in Figma, and we've got our HTML file here, which is the one we're going to be testing in Gmail.

To open that up, you can just go to your code editor or you can open up that file in a browser and view the source. But either way, you basically want to copy all of the HTML in that exported file, and you want to put it into Litmus.com.

Litmus.com is a platform that allows you to test your HTML emails in all different kinds of email clients, including Gmail, which is what we're going to be focusing on today. So, in Litmus.com, if you go to the "test" tab up here and then click on the "create new" button over here, you can click on "create new." I'm just going to call this one "test Gmail example," and make sure that you click on this "test" button here. So, you've got an option of either "build" or "test." We're going to click on "test," and then we're going to click on "bring in your email," and that's going to allow us to enter our HTML that we just copied from the code editor.

You can basically go down here and click on "view more ways to create an email," and that's going to give you this text box here to paste your HTML. So, paste your HTML in this bottom text box here, and then you can just give it a subject line. So, I'm just going to say "test" again.

You do also have the option of sending the HTML to Litmus. So, if you've already got your HTML template from Figma in MailChimp or a platform like that, you can actually copy this email address here and send a test email to Litmus from your platform. But for today, I'm just going to be keeping it really simple and assume that you're basically going to be testing the email directly from the Figma export.

Now I've got our HTML pasted in there, I'm just going to click on "done," and that's going to upload this HTML block into Litmus. It's going to allow us to view that HTML on all different email clients to see how it renders. In particular, I'm going to be focusing on Gmail for today.

You can see here it's starting to load up some of the previews. By default, Litmus pre-selects a bunch of different popular email clients or a broad range of email clients that it recommends testing on. So, you're basically going to get this set of default clients the first time you run the test.

But we can go ahead and actually customize that for our use case today, which is really doubling down on testing it in Gmail. If you go ahead and click on this "choose email clients" button up here, what we're going to do is basically clear all these. So, I'm just going to click "clear all." I'm going to collapse these and just click "clear all" on all of them. That's just going to reset all of the selected email clients.

Now we can go through and actually pick which ones we want to test it on. So, in this case, I'm really just interested in testing our HTML in Gmail. So, what we can do is just select the Gmail option. I can do the Gmail app. I can do Gmail with IMAP. I can do Gmail on Android 8. I can do Gmail on Android 10. I can also do dark mode. So, we can basically select all the Gmail options that we want to use. In this case, I'm just going to select those ones for Android on mobile.

Then you can also go down to the iOS options. So, iOS, you can also do Gmail. So, I'm just going to do Gmail app on light and dark. So, I've got those two selected. And then what you can do finally is go down to web-based clients. If you click on "web-based" and then scroll down to Gmail and G Suite, so we can select Gmail in Chrome. We can select it on Edge, Firefox. We can do the same thing for G Suite. So, we can select those.

Once you've got those selected, you can basically click on the "run previews" button down here. That's going to take the HTML that we already uploaded, and it's going to rerun that HTML through all of those Gmail options that we just selected. It's going to render the real Gmail apps and the real Gmail web clients as they are. So, these aren't emulations. These are real computers that are running these behind the scenes on the Litmus.com servers. And it's going to give us an accurate look at what our HTML that we exported from Figma is going to look like when it actually gets sent to a Gmail device or a Gmail application.

You can see it's basically loading up all of these now. It can take a little while just to load them all because it is quite an intensive process behind the scenes. But once it loads, it's going to give you the option of viewing these in a larger modal. So, if we click on one of these options, so I'm just going to click this IMAP option down here, or maybe we can go to dark mode one first. If we click on Gmail for dark mode, so this is just running on Android 10, and you can see now that the preview is loaded, we can basically go through and scroll through this.

This is running on, as I said, Android 10 in the Gmail app with the system in dark mode. This is going to give you an accurate preview of what the content is actually going to look like when it's rendered on dark mode. So, you can get a sense of what that looks like here. And then if we go back, we can also see what it looks like in the web clients. So, we can basically go down to Gmail for web. So, we can run it in Chrome, and we can see here what that now looks like. This is just running in Gmail on a Chrome device or a Chrome browser, rather. And you can see here it's rendering the content as we'd expect. So, we've got our nice border radii there, all the text is looking really good, images looking good. So, that's overall looking really good in Gmail.

Again, you can go through G Suite, you can go through all the different browsers, you can go through all the different mobile apps. So, we can see what it looks like on iOS, on Android, in light and dark mode, etc. So, yeah, we can just open up the iOS one, see how that looks. So, we can see on iOS, it's looking quite good as well. It's just stacking all the content as we'd expect. And you'll notice that the fonts are rendering on iOS Gmail. So, they're looking really good. I think we've got Inter selected in that case. Some clients won't support that. So, ironically, the Gmail web version doesn't actually support Google fonts, but the Gmail app on iOS does actually support Google fonts, custom Google fonts. So, make of that what you will. But the fonts are looking really nice on iOS.

That's basically it. I'm not going to go through every single Gmail app instance and Gmail web client in the Litmus results. You can feel free to do that yourself in your own time. But I really just wanted to give you an example of how you can customize the Litmus test to just focus on Gmail if you're testing for Gmail, which is obviously a very popular email client. So, you really want to know what your HTML emails are going to look like across all of the Gmail clients on desktop and mobile. Then this is going to be a really easy way of doing it, just narrowing down all the Litmus clients as we went through before. And you'll be able to see what your HTML emails that were exported from Figma are going to look like on all of those different Gmail clients when the HTML finally ends up in their inbox.

We'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to test HTML emails on mobile with exports from Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-07-02T00:00:00.000Z
dateModified: 2023-07-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-test-html-emails-on-mobile-with-exports-from-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-test-html-emails-on-mobile-with-exports-from-figma-using-emailify.md
---

# How to test HTML emails on mobile with exports from Figma using Emailify

#### Video Transcript

Today, I'm going to be showing you how to automatically test your HTML emails exported from Figma in different mobile devices on different mobile email clients using the Emailify Figma plugin and the Litmus.com platform. 

To get started, all we need to do is go to our Figma file. If you click on the little "Resources" icon up here and just search for "Emailify," and if you click on the "Plugins" tab, and then click on the Emailify item, you'll be able to run the Figma plugin by either clicking on this "run" button here. Or I'd recommend clicking on this little "more options" icon here and clicking save. And that's just going to save it to your Figma plugins list for easy access later.

I've already done that. So, I'm going to go to my Figma canvas and just right-click anywhere, go down to "Plugins," and then go down to "Saved plugins." And then, I'm just going to click on the Emailify item, and that's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically allows you to design HTML emails in Figma and then customize the content and styles of those using the Figma app. And then, you're basically able to export that to production-ready HTML directly from the Figma plugin. So, I'm not going to go through how to design the emails in this tutorial. If you're interested in that or if you're new to the Figma plugin, you can basically find a bunch of tutorials on the YouTube channel.

For today, I'm just going to be focusing on testing these emails in HTML in different mobile clients. So, see how they render on different email clients. So, to do that, we just need to export the email from Figma to HTML. So, I'm going to do that by clicking on the export HTML button in the Figma plugin. Then, I'm just going to make sure that the upload hosted image URLs option is selected. And then, I'm going to click on the export to HTML button here. And that's going to generate the HTML from our design in a few seconds.

Once you've done that, you can just click on the download your zip file. And if you save that to your desktop, you can basically unzip that file, open up the folder, and inside the folder, you'll see we've got our test email, which is the frame that we exported from Figma. And we've got our index.html file inside that folder.

What you want to do is you want to open up that index.html file. And you want to basically open that up in either a code editor or you can open it up in the browser and view source and copy-paste the HTML that way. I'm just going to open it up in my code editor. I'm just going to select all and copy all of that HTML to my clipboard.

Then, what I want to do is I want to go to my browser and go to Litmus.com. So, I'm going to go to Litmus.com and basically create a new email under the test tab. So, if you've got tests selected up here, you can then go down to the create new button down here. And then, you just want to put in a title. So, I'm just going to call this one "mobile email tests." And then, I'm going to click on the test button down here.

Where it says, "Would you like to start with build or test?" Just click on test. And then, click bring in your email. So, there's a couple of ways of doing this. One way you can get the HTML into Litmus is by sending the HTML to Litmus. So, it gives you this special email address here that you can copy. So, if you're using MailChimp or something and you've already uploaded your template there, you can actually send it from MailChimp to Litmus. But for today, I'm just going to be using the raw HTML method.

I'm going to go down here and click on "view more ways to create an email". And then, that's going to allow us to paste in the HTML that we just copied a second ago from our code editor. So, I'm going to paste it in this bottom area here. And I'm just going to call this test. And then, I'm going to click done. And that's going to take this HTML, upload it into Litmus, and Litmus is then going to run that HTML email across a bunch of different email clients to show you how it's going to render when it actually lands in those inboxes.

These are real tests, these aren't emulations or anything like that. These are running on real devices or real virtual machines on the Litmus servers. And it will allow you to see what the email is going to look like on a bunch of different email clients and mobile devices.

By default, it's going to pick out a few that it thinks you're going to be interested in. But we really want to drill down on testing the HTML on mobile devices and mobile clients today. So, I'm actually going to go up to the top here and click on choose email clients. And I'm going to basically clear all of the desktop ones. So, we don't want any desktop ones. We don't want any web-based ones. And I'm going to expand out this mobile and tablet section. And that's going to allow us to break it down by different types of mobile devices and clients.

You can see we've got a category for Android phones. We've got a category for iOS devices that we can select. So, you can basically just go through and pick up the devices that are relevant to you. So, you can check it on iPads. You can check it on iPhones, different versions. You can do it in dark mode. You can do iPhone Pro or iPhone regular.

I'm basically just going to select all of the latest version of iPhone or iOS. So, iOS 16. And I'm going to preview that on regular iPhone 14s. And the iPhone 14 Pro Max. And I'm going to preview that in those different clients in a second.

Once you've selected all of the mobile clients that you want to preview it on, so we might add a couple of Android ones as well. So, let's just do the Gmail app as well for Android 11. And once you've selected all the mobile devices and mobile email clients you want to test on, just go ahead and click on this run previews button. And that's going to take the HTML that we just uploaded a second ago, and it's going to rerun those previews on those different mobile devices.

We're going to be able to see how our HTML that we exported from Figma is going to look on the different iOS and Android devices that we just selected a minute ago. You can see here that it's starting to render some of those previews. So, we've got our iPhone 14 preview. We've got the Outlook iOS version also on iOS 14.

We can go ahead and blow some of these up to a larger size. So, if you click on any of them, just click on that link. And this is basically going to load up a preview. So, you can see here, in this case, we're looking at the Outlook iOS app on iOS 14. And we can scroll through it, and we can see that it's looking really good. It's basically looking how we designed it in our Figma file. And we can jump back and see what it also looks like on Apple Mail.

We'll do Apple Mail on an iPhone 14 Pro Max. So, if we open that up, you can see here, this is also looking really good. We've also got our custom Google fonts rendering nicely. Some of the email clients actually don't support Google fonts, so it'll fall back to a different font. But in this case, it's supporting the Inter font that we're using. So, we're using Inter, which is a custom Google font. Ironically, the Gmail app actually doesn't support Google fonts, which is strange. But if you're running an iOS mail client, so iOS Apple Mail, it's going to look really nice. And you're going to get those custom Google fonts rendering as you'd expect.

That's basically what it looks like there. As I said, we can also open it on Gmail for Android. So, if we open up the Gmail Android mobile app, we can see here that it's going to load up that preview as well. Some of these previews can be a little bit slow to load in Litmus sometimes. I think that's just because it's quite intensive in the background to actually render these previews on a real device or a virtual machine. But that's basically what it's going to look like.

Aagain, we can see that our HTML that we exported from Figma is also looking quite good in the Gmail app on Android. So, this is Android 11. As I mentioned, it's going to fall back to a different font. You can see this is looking slightly different to the Inter font that we selected, the Google font in Figma. So, I think it's falling back to—I believe it's Roboto, or Roboto, however you pronounce it—on the Gmail app for Android. I think that's what it'll fall back to if it doesn't support the Google fonts that we're using. But it's still looking good overall, and the layout's looking nice, and everything is there that we'd expect.

That's basically an overview of how you can use Litmus.com to test out your HTML emails from Figma in all of these different mobile clients. So, you can do, as I said, Android, iOS, check it out on Outlook and Gmail. Those are going to be your main ones. And of course, Apple Mail, which is the default app for iOS as well. You can basically just go through and pick those out as you need.

As I mentioned, there's a bunch of other runs that we didn't look at, but you can go through those individually. There's 47 of them. So, if you're really diligent, you can inspect all of those manually. But I think if you select the more popular ones, you're going to cover most of your bases for testing how those HTML emails are going to render across all those different mobile devices and applications.

We'll leave it there for today. I just wanted to show you how to test your HTML emails on these mobile applications and mobile devices. So, hopefully, that's been helpful if you've been wanting to incorporate this kind of QA process into your workflow. So, feel free to give it a try, and I hope it helps you on your team. Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: Client review workflow for Figma
description: A better client review workflow for Figma when comments, approvals, and handoff need to stay organized.
datePublished: 2023-06-21T00:00:00.000Z
dateModified: 2023-06-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/client-review-workflow-for-figma/
markdownUrl: https://www.hypermatic.com/articles/client-review-workflow-for-figma.md
---

# Client review workflow for Figma

A better client review workflow for Figma when comments, approvals, and handoff need to stay organized. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Commentful

[Commentful](/commentful/) is one of the more useful tools in this workflow. Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

### Crypto

[Crypto](/crypto/) is one of the more useful tools in this workflow. Crypto matters here because design sharing is not always public or lightweight. When security, password protection, or controlled access matters, a normal share link often is not enough.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: tutorial
title: How to update Figma text from Microsoft Word with DOCX files using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-06-19T00:00:00.000Z
dateModified: 2023-06-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-update-figma-text-from-microsoft-word-with-docx-files-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-update-figma-text-from-microsoft-word-with-docx-files-using-copy-doc.md
---

# How to update Figma text from Microsoft Word with DOCX files using CopyDoc

#### Video Transcript

Today, I'm going to be showing you how to automatically update your Figma text content from Microsoft Word using the CopyDoc Figma plugin. 

To get started, all we need to do is go up to your little "Resources" icon at the top of the Figma file here. If you click on that and search for "CopyDoc", and under the "Plugins" tab, if you just go ahead and click on the CopyDoc item, that'll allow you to run the Figma plugin by either clicking this "Run" button here or I'd recommend clicking on this little "More options" icon here and clicking save Figma plugin. That'll allow you to open it from your saved Figma plugins list later.

I've already gone ahead and done that. So, I'm going to go to my canvas and right-click anywhere, go down to "Plugins", and then click on "CopyDoc" under "Saved Plugins". So, I'm going to go to saved plugins, click on CopyDoc, and that's just going to run the Figma plugin we saved a second ago.

This Figma plugin has a bunch of different features, but for today, I'm just going to be focusing on these two, which are the export text layers feature and the import text layers feature. So, what we can do first is export our text layers to a Word document. We can do that by clicking on export text layers here, and then we can go ahead and change this export format up here. So, if you go ahead and click on DOCX, which is the Word document format that we're going to be using. I'm going to select that, and then you can basically just check whichever frames you want to include in the export. So, in this case, I've only got one, so I'm just going to leave that one checked. And then it's up to you to change any of these options down here as well. I'm just going to leave these as default for now. You can also do things like change the order that the text shows up, and you can group duplicate layers and things like that. But for today, I'm just going to leave it default and click on the export DOCX button. So, I'm going to do that now, and that's just going to export our content to a DOCX file, which is a Word document file. So, I'm going to click on download DOCX export, save that to my desktop, and then I'm just going to unzip that file and open that up.

If we have a look at the folder, you can see we've got a design reference here, just so you've got an external reference of what the copy looks like. And then we can go ahead and open up our DOCX file that we just exported from Figma. So, I'm going to double-click on that DOCX file. That's opened up Microsoft Word. So, we've got Microsoft Word running, and this will basically allow us to edit the content in Microsoft Word, and then in a minute, we'll re-import it back into Figma.

I'm just going to make a few different changes here. So, if we change the name, we can change the work title to be something like experience. Maybe we can change this to be my bio or something like that. And maybe we want to change some of these company names to some different ones. We could change some of these tags, so you've got these little tags down here that's being exported. So, maybe we could change that to development or we could do this as art direction or something like that. Just a few different examples to show you what this is going to look like. There are some other things we can do as well. So, you can see we've got some links in here that have been included. So, those are links that have been added in Figma. You can also change those as well. So, if you wanted to change the text or change the domain, we could definitely do that. So, you could do a link edit link and then change that in here. So, maybe we just want to change that to something else. So, in this case, I'll just make that hypermatic.com. And then we'll be able to see what that looks like in Figma in a second. So, I'm just going to change that now, save it, also make that the text up here. So, I'm just going to change that, get rid of the www, and just make that a bit simpler. And we can also do things like formatting. So, if you wanted to add bold or italics to some of the content, you could do that. So, you can just highlight the text, make it bold, make it italic, and that'll get imported in a second as well. So, I'm just going to bold and italicize those. And I think that's probably good enough for now just to show you what it looks like. So, I'm going to click save on my Word document in Microsoft Word. Then I'm just going to minimize that and go back into Figma.

Back in Figma, I'm just going to close off this little export confirmation. And this time, we're now going to click on the import text layers button. So, I'm going to click on import text layers, which is going to allow us to re-import text updates back into Figma. So, I'm going to click on that now, and you can see here it's got a little drop zone that we can either drag and drop or click on a file and upload that. So, we're going to upload this directly from our computer. This doesn't get uploaded anywhere. It just goes straight into the Figma plugin. So, I'm just going to drag and drop that DOCX file, drop that into here. And once that loads up, it's going to give us some previews of the content that's been changed. So, you can see here that it's basically showing us some of the changes we made. So, you'll remember we changed these different text items, and it's just giving us a bit of a visual confirmation of what's changed. If you want to exclude any of these, you can basically just uncheck those. And they won't get included. For today, I'm just going to leave them all checked. And now that we can see that we're basically happy with the updates that we've added, I'm just going to go ahead and click on the update Figma text layers button up here. So, I'm going to click that now. And that's basically going to apply those updates. So, we can see that nine Figma text layers have been updated. And we can see that the copy in the file has been updated as well. So, you can see here we change the name, we change the subheadings, we changed the company names, we added some extra tags or some different tags. So, you can see Art Direction's been updated. That was changed from concept art to Art Directions. All the tags have been updated. We added some formatting. So, we've got some formatting up here that we added. And we've also got, yeah, as I mentioned, the company name as well.

That's basically just a really quick example of how you can do that. As you can see down here, we've got our updated link. So, because the text is a bit longer than it was previously, that text may have to change position. So, maybe we have to move some of these text layers over. This is much easier if you're using Auto layout. So, if you're automatically setting your frames to position the contents, you're using Auto layout on your Figma frames. That's going to make this way more flexible. If you've got manually positioned texts like this case has, then if you're adjusting the lengths and size of those text layers, that's going to probably require some tweaks if the text layers are going to have longer content than what's currently there. But you can see that it's basically updating the content as we expected from the Word document.

Yeah, that's basically just a really quick overview of how you can use Microsoft Word and DOCX files to update your Figma content with the CopyDoc Figma plugin. This is pretty useful if you want to be making bulk updates to your artboards or to your designs outside of Figma. If you've got a copy team or a team of people who aren't in Figma and they need to make copy updates, this is a really quick way of allowing them to make updates in their preferred app like Microsoft Word in this case. And then you can then re-update your Figma file based on importing that updated file as well.

We'll leave it there for today. I just want to keep that really short, just to give you a quick overview of how you can use DOCX files to update your Figma content from Microsoft Word. I hope it helps you or your team if you've been wondering how to do this. So, thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to update Figma text from Google Docs with DOCX files using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-06-18T00:00:00.000Z
dateModified: 2023-06-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-update-figma-text-from-google-docs-with-docx-files-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-update-figma-text-from-google-docs-with-docx-files-using-copy-doc.md
---

# How to update Figma text from Google Docs with DOCX files using CopyDoc

#### Video Transcript

Today, I'm going to be showing you how to automatically update your Figma text layers from Google Docs using the CopyDoc Figma plugin. 

To get started, all we need to do is click on the little "Resources" icon here at the top of your Figma file. If you click on that and search for "CopyDoc" under the plugins tab, and click on the CopyDoc item. You can run the Figma plugin by either clicking this "Run" button here, or I'd recommend clicking on this little "More options" icon and clicking "Save Figma plugin." That's just going to allow you to run the Figma plugin from your Figma plugins list later.

I've already gone ahead and done that. Now I'm going to go to my canvas and just right-click anywhere, go down to "Plugins", then go down to "Saved Plugins," and click on CopyDoc. That's going to run the Figma plugin we saved a second ago. The Figma plugin has a bunch of different features, but for today, I'm just going to be going through two of them. I'll be going through the export text layers feature and the import text layers feature.

The first thing we're going to do is export our text layers out to a Google Doc. We can do that by clicking on "Export text layers" and then making sure that this little select box up here is set to a DOCX format. So, DOCX is a Word document format. We're going to click on DOCX and make sure that's selected. Then you can go through and select any frames you want to export or not export. In this case, I've just got one frame, so I'm going to keep that selected here. Feel free to play around with any of these extra settings down here or do things like change the order if you want to do that. Feel free to change that or group duplicate layers and things like that. Today, I'm just going to leave this pretty standard. Now I'm going to click on the "Export DOCX" file. So, I'm going to click on "Export.x," and that's just going to export all of our Figma text to a DOCX file. I'm going to click on the "Download DOCX" export and save that to my desktop.

If we open up that zip file and open up the folder, you'll see here that we've got a "designs" folder, which just contains a static design as a bit of a visual reference of the DOCX file. What we want to do is basically open up this file using Google Docs. So, I've already got Google Docs open in my browser. I'm going to go to my browser, I've just created a brand new blank Google Docs document. Then, what you want to do is go up to the "File" item up here and click on that, then click on the "Open" option. Click on "File" and "Open." Then, you want to make sure the "Upload" tab is selected. Just click on that "Upload" tab. Then, what you can do is basically just drag and drop the DOCX file that we just exported from Figma into your Google Docs window. So, I'm going to do that now. I'm just uploading that document into Google Docs, and that's going to open it up for me to start editing.

You can see here that I've got all my content from Figma. This is all in Google Docs. So, we can now start to edit this content in Google Docs directly. I'm going to do some things just to show you what it looks like. I'm going to change some of the names and roles and subheadings. So, I might call this "Experience." I might call this "Bio." Maybe we want to change some of these companies. So, I'm going to change some of these company names. I'm going to change some of these tags. Maybe we want to change "Visual Effects" to "Visual Design." Maybe we want to change "Design" to "Code". Maybe we want to just change this to be "Art Direction." Just a handful of different changes to show you what it looks like.

We can also do things like change links, change formatting. For example, if we wanted to change some of the formatting in this lime Epsom, we could do things like add some bold formatting or italics formatting just to show you what that looks like. So, that's a pretty good overview of a few different changes that we can make. Now, just to show you what it looks like to re-import that content, what I'm going to do is now download this file from Google Docs back into a Word document. So, I'm going to click on "File," go down to "Download," and then I'm going to click on "Microsoft Word" or DOCX in brackets. If you click on the Microsoft Word option, that's just going to download the file to your downloads folder or wherever you've got your default downloads saved to. So, basically just open that up. You can see here on my desktop, I've got the saved file from Google Docs that we just edited. If I preview that, you can see that the changes are in that file. We've got the changed names, changed subheadings, company name formatting. So, that's definitely the updated file from Google Docs.

Now, what we want to do is go back into Figma. I'm just going to minimize Google Docs. I'm going to go back into Figma, close off this little window, and jump into the "Import text layers" feature. If you click on the "Import text layers" button, this is going to allow us to re-import text updates to Figma. I'm going to click on "Import text layers." Then, I'm basically just going to drag and drop the file that we just saved from Google Docs, the updated file, just drag and drop that back into Figma, in this little drop zone here. What that's going to do is load up some previews of the content that was changed. So, you can see if we scroll through these, it's just showing some of the updates that are going to be made. These haven't been made in the file yet. It's just more of a review phase so you can see what's been updated in the file before you approve them or update them in Figma.

I'm pretty happy with these changes. If you didn't want to include any, you can basically just uncheck those, and those won't get included. But for today, I'm just going to accept everything and click on the "Update Figma text layers" button to update all of my Figma text layers in this preview. So, I'm going to click that now. I'm going to click "Update Figma text layers." That's just going to update all of the text layers that we changed in the Google Doc. You can see it's updated 10 Figma text layers. If we zoom in a bit, you'll see that all the changes we made in the document have been applied. The names have been changed, the subheadings have been changed, the experience has been changed from Google to Airbnb in this case, and also the tags that we changed have been made. You can see here it used to be called "Concept Art and Design," and that's been changed to "Art Direction and Code." So, those have been updated there. The formatting we added has been applied, so we've got the bold text and the italicized text here. It also changed some of these links. Because the link wasn't properly formatted before, it's just gone ahead and formatted that. You could basically just remove that if you didn't want to include that. So, I've just left that as is. But you could move that around.

The other thing to note is if you're changing some of the text content and the layers don't have Auto Layout, you might have to manually move some of those around if the content's been exaggerated or extended. Sometimes you're going to get longer content or shorter content, and that might require some layout changes. Again, if you don't have Auto Layout applied. So, it's always good to apply Auto Layout as much as possible beforehand. But if you don't, you may have to tweak some of those positions around. But the main thing is you can update that content directly from Google Docs. So, if you're working with someone who doesn't have Figma access or if you're working with copywriters who prefer to do their copywriting in Microsoft Word or in Google Docs or using a DOCX file, this is going to be a nice way for them to edit the content without having to deal with Figma or deal with any of the design challenges that might pop up when they're editing text.

We'll leave it there for today. I just wanted to keep this really short and simple, just to show you how you can use Google Docs as an option for updating content in Figma using the CopyDoc export and import features. It's going to be a really quick way of going about it. Feel free to give it a try with your team, and hopefully, that helps if you've got some people on the team who are into using Google Docs instead of Figma to make updates in the designs. We'll leave it there. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to update Figma text from Office 365 with DOCX files using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-06-17T00:00:00.000Z
dateModified: 2023-06-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-update-figma-text-from-office-365-with-docx-files-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-update-figma-text-from-office-365-with-docx-files-using-copy-doc.md
---

# How to update Figma text from Office 365 with DOCX files using CopyDoc

#### Video Transcript

Today, I'm going to be showing you how to automatically update your Figma text content from Office 365 Word using the CopyDoc Figma plugin. 

To get started, all we need to do is go to the little "Resources" icon at the top of your file. If you click on that and search for "CopyDoc," click on "plugins," and then click on the CopyDoc item, it'll let you run the Figma plugin. You can either click on the little "Run" button here or click on the "More options" icon and click "Save Figma plugin." That will save it to your Figma plugins list for easy access later. I've already gone ahead and done that.

Now, I'm going to go to my Figma canvas, right-click anywhere, go down to "Plugins," and then go down to "Saved Plugins." I'll click on the CopyDoc item, and that's going to run the Figma plugin we saved a second ago. The Figma plugin has a bunch of different features, but for today, I'm just going to be focusing on the export text layer feature and import text layer feature.

The first thing we're going to do is export our content out to a Word document, which will let us open it up in Office 365 and make some changes. To do that, I need to click on the export text layers button and make sure that the export format up here is selected as DOCX. DOCX is the word document format we're going to be using. Then, I'll go ahead and make sure that the frames I want are selected. I've only got one in this case, but you might have some other ones in here as well. You can change the other options to your own liking, but I'm just going to leave all of these as default and then click on the export DOCX button.

That will export all of our Figma content to a Microsoft Word DOCX file that we can open up in Office 365. Now, I'll show you how to do that. If you click on the download DOCX export button and save that to your computer, then open up the zip file and open up the folder, you'll see that you've got a designs folder, which is just a static JPEG of the content that we just exported for reference. Then, you've got your DOCX file.

We're now going to open up this DOCX file in Office 365 using Word. So, I'm going to go back to my browser and just go to OneDrive in Office 365. You can upload your DOCX file to OneDrive by dragging and dropping the file into OneDrive. So, I'm just going to drag and drop that now, and that's going to upload it into OneDrive so we can then open it using Office 365 Word.

I've got that uploaded into OneDrive, and you can open that up in Word by clicking on the DOCX file here. So, I'm going to click on that, and that's going to open up Word in Office 365 in our browser. Now, we can basically edit the content in Word using Office 365 online. We have all of our content in here that we just exported from Figma. Now, you can go through and make any changes you want in Office 365.

I'm just going to change some of these items here to show you an example of how we can update this content in Office 365 and then re-import it back into Figma in a moment. I'll make a few basic changes just to demonstrate how it works. We can do things like simple formatting, text updates, and update some of these little tags here. For example, I'll change "visual effects" to "visual design," "design" to "development," and "ux" to "copywriting." I'll also make one more change here and change that to "Amazon." Additionally, I'll change one more company to "Microsoft" since we're using Microsoft right now. That's about it.

To get this content back into Figma, all we need to do now is export this as a Word document from Office 365. We can do that by clicking on "File," then "Save As," and then "Download a copy." So, I'll click on the download a copy button, and that will save the Word document to a local file on your computer.

Once it's finished saving, you'll get a prompt asking if you want to save it or download it. We want to download it directly to our computer, so we'll click on the download a copy button. That will download it to your computer.

Now, I'm going to open up my download folder and see that the updated DOCX file has been downloaded. I'll just minimize Office 365 for now and drag this folder over a bit so we can see our Figma plugin. Now, we want to go back to our CopyDoc Figma plugin in Figma, close off this confirmation screen, and re-import the text updates to Figma. This will allow us to update the text content from our updated Word doc file that we just saved.

I'll click on the import text layers button here, and then I'll go to the folder where I downloaded the updated DOCX file from Office 365. I'll drag and drop that DOCX file back into Figma, specifically into the CopyDoc Figma plugin's drop zone. Now, it's going to load up any content previews for the changes we made in the file. If we scroll down, we'll see a preview of what content has been changed. We can select which changes we want to make in the Figma file. If you want to uncheck any content, you can do that. For today, I'll leave most of these selected and click on the update Figma text layers button up here. This will apply all the changes we previewed. I'll click that now, and it will update all of our text layers.

As you can see, it has updated 11 Figma text layers in our designs. If we have a look, we can see that the content has been updated, including the company names and the little tags we changed to copywriting, visual design, and development. We also added some basic formatting and changed the heading and subheadings as expected.

That's it for the tutorial. I just wanted to show you a quick overview of how you can make content updates from Office 365 using a Word document and the CopyDoc Figma plugin. If you're using Office 365 to edit your Word documents, this is a quick way to update your Figma text content. Just be mindful that if you're updating content that is longer than the current text content and you're not using Auto Layout, you may have to manually adjust some layers in your design if they've been updated as well. If the imported content is longer, it may overlap with existing elements, so you'll need to reposition it manually. Auto Layout can make this process easier.

That's all for today. Thank you for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to style Figma layers from a spreadsheet with CSS style sync using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-06-11T00:00:00.000Z
dateModified: 2023-06-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-style-figma-layers-from-a-spreadsheet-with-css-style-sync-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-style-figma-layers-from-a-spreadsheet-with-css-style-sync-using-copy-doc.md
---

# How to style Figma layers from a spreadsheet with CSS style sync using CopyDoc

#### Video Transcript

Today, I'm going to be showing you how to automatically style your Figma layers from a spreadsheet using the CopyDoc Figma plugin.

To get started, all we need to do is go to the little "Resources" icon up here in your Figma file. If you click on that and search for "CopyDoc", you can run the Figma plugin by either clicking this "Run" button here, or I'd recommend clicking on this "More options" icon here and just clicking on the "Save" button. That'll save it to your Figma plugins list for easy access later.

I've already gone ahead and done that. Now, I'm going to go to my canvas and right-click anywhere. I'm just going to go down to "Plugins" and then go down to "Saved plugins". Then, I'm just going to click on the CopyDoc item to run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, it has a bunch of different features that help you to update content in Figma. But for today, I'm just going to be focusing on the Sync Spreadsheet feature down here. If you're interested in the other ones, I'd recommend checking out the other videos in the CopyDoc playlist on the YouTube channel. But for today, I'm just going to be going through how to use CSS in a spreadsheet to automatically style your Figma layers in your design.

To get started, all we need to do is open up a new spreadsheet. You can use either Google Sheets or open up something like Excel. We're basically going to structure our spreadsheet to match the Figma layers in our design. For example, I've got this Frame here that I want to style. I want to change the background color of this Frame, and I want to change the font size of this heading here, and I want to do that from a spreadsheet.

What I need to do is basically name my Figma layers with a certain convention. In this case, I've chosen to use "heading," and I've chosen to use "home," and I put a little hash (#) in front of it just to make it really clear that that's what I'm using it for. Then, in my spreadsheet, I'm basically putting those layer names in the top row, which is the header row, and these are going to be the labels that will match up our Figma designs with our spreadsheet.

Once you've done that, then you can go ahead and start writing CSS inside of the content underneath those columns. So, what I mean by that is, for example, if you wanted to change the background color of this Frame, you can basically put in a CSS rule of "background-color" with a little colon, and then a hash (#) followed by the hex value. So, I'll show you what that actually looks like now.

If we import this into Figma, you can do that by clicking on the share button up here if you're using Google Sheets. Just make sure that the general access setting is set to "anyone with the link." Then, click on "copy link." Once you've copied that, go back into CopyDoc in the Figma plugin and click on the Sync Spreadsheet button down here. Then, you can paste in your Google Sheets link down here and wait for that to load up. That's going to let you select the tab in your spreadsheet that you want to use. In this case, I'm just going to be using the "home" screen tab. I'm going to click on "Use Selected Sheet," and then I'm going to click on the artboard over here, the "home" layer that we named. Then, I'm going to click on the "Sync Rows" button here.

You can see that it's updated our layers from the spreadsheet. It has gone ahead and changed that background color for us, and it's changed the font size over here based on the values that we had in our spreadsheet. So, you can see we had a background color of "#818af9," and that's now been added to the spreadsheet over here. So, that's the value we used. And over here, we set the font size using CSS to 28 pixels, and you can see here it's updated the font size to 28 pixels.

That's just a really quick example of what you can do with the Figma plugin. I'm going to show you a few more examples now if you want to have a look at those.

I'll go to my app screen now. I've got this app screen that I want to make a few changes on. I've set up another tab in my Google Sheet, and this one I've just called "app screen" so I know what it is. I've gone through and basically named the layers that I want to change. For example, I've got this hero block, so I've called that "#heroBlock" in my Figma design. That's just a Figma frame that's got a background color on it. In my spreadsheet, I've added "heroBlock" to the row up here, and I've just set a few properties that I want to change. I want to change the background color, so I want to change that to a different background color to match this one, and I want to change the text to be white.

You can do this two ways. You can either change the individual text layer names. So, for example, I've done that over here with the staff name. In this little card component, I've got a layer called "staff name," and I'm going to be changing that color to this other color over here. You can do it individually per text layer. But if you want to change all of the text layer styling in a single frame, you can actually just target the frame.

In this case, I've got the hero block, and all I'm doing in that hero block is I'm saying that I basically want the color to be white. So, "color" is going to apply to the text color. I could also do things like change the font size. I could actually change that font size to be something else, so I could make that 14 pixels, and that'll basically change it. Actually, it's already at 14, so I'll just change that to be 16 pixels, and that will change it in a second as well. That's basically how you can apply multiple text layer changes at once.

I've also done things like change the menu. I've got the menu down here, and I'm basically going to make that menu, which I've named "#menu," have an opacity of 0.3, and I'm going to change the background color. Same thing over here, so I'm basically going to change the font size of these card frames, and there are a couple of them in here. I've named both of them "card frame," so it's going to find both of those when we select the frame in a second, and it's going to change all the fonts in there to be 10 pixels. So, I'll show you what that's going to look like now.

Again, I'm going to grab the share link and just copy that, jump back into Figma. I'm going to close off this window and open it back up, and drop in my spreadsheet link. So, I can select a new tab. This time, I want to work with the "app screen" tab, so I'm going to click on that and use the selected sheet. Once again, you'll get a little preview of what the column names are just that it's going to load up. All you need to do again is just select the element or elements, as we'll go through in a minute, that you want to select. And again, click on "Sync Rows."

You can see here again, it's updated the layers from the spreadsheet. So, in this case, we can just briefly go through the changes that it made. As we saw before, we set the hero block to have a background color of purple, and we also set the color, which applies to text. So, that's not a background color. "Color" always means text color. So, we've got the color set to white, so it's changed that for us. We also increased the font size to 16. In retrospect, that was a bit too big. So, we could always just go back and change that again. And then we also set a border radius of 20. So, before, that didn't have a border radius at all, that frame. So, now we've got the border radius there. 

You can see up here, as I briefly went through, we've also changed the font size of the card frames to 10 pixels. So, those have been set to 10 pixels. But then we've also got a bigger size up here. And the reason for that is because after we set the card frame size of 10 pixels, after that, we've got a staff name attribute layer. And that one's being set to 22 pixels. So, the spreadsheet's basically looping through these columns, getting to this one, applying 10 pixels to all of the text inside that frame. And then it's getting to this one, and then it's overriding that again to be 22 pixels instead, with a font weight of bold. So, you can see here that it's set to bold at 22 pixels. That's basically what that looks like there, to apply a bunch of different changes with nested text changes as well. That's another cool example that is a nice way to change a bunch of different layers in a single frame.

But if you want to make this change to multiple frames and have different styles per frame, you can do that as well. So, I'll show you what I mean by that. I'm going to go back to my spreadsheet, jump over to this "card Styles" tab that I've got set up. And what I basically want to do here is apply a couple of different styles depending on what order the selected row is in my selection.

Here, I've got two card frames. I've got a card frame here, and I've got a card frame here. They're both called "#cardFrame," and they're basically the same component with the same type of content. But what I want to do is apply different styles to both of these in this little block here.

What I've done is, in my spreadsheet, you'll notice that I've got two rows set up underneath my headings. So, I've got the card frame here, I've got the staff name layer, which is just a text layer, I've got the staff role layer as well, which we're going to change some styles on, and then I've also got this star photo. So, this is an image layer just with a photo, and I've also called that "staffPhoto."

What I'm going to do is I'm basically going to apply a different color background to the first card and the second card, so they'll be different colors. And then I'm just going to basically go through and apply the same styles for everything else. So, I'll show you what that looks like now.

We can basically go through and apply this by doing the same process. I'm going to click on "share," I'm going to click on "copy link," and copy that one. And just to demonstrate this even further, I'm just going to change this one to be a bit different as well on the top. And same thing for the bottom here, I'm going to make this one a little bit smaller so just so we can really see what's going on here.

Now, if I again go back to my CopyDoc Figma plugin, click on "Sync Spreadsheet", drop in that sheet again, and this time I'm going to select the "Card Styles" tab, the one that we're just looking at. Click on "Use Selected Sheet." And this time, what we're going to do is we're not going to select the parent frame. We're going to actually select these nested frames. So, we're going to click on both of these. So, we've got two layers selected, as we can see down here. And because we've got two rows also in our sheet, what it's going to do is it's basically going to loop through the selection. It's going to go one, two, and it's going to map those up to row one and two in here. So, I'll show you what that looks like now.

We can go ahead and click on "Sync Rows." And you can see here again, it's updated the layers from the spreadsheet. But this time, it's used the different rows to apply different styling to our selection. So, we've only got two layers selected here, but you can imagine having a dozen layers or two dozen layers selected like that, with a dozen or two dozen variants in your spreadsheet rows down here. And you can basically just change those as you need to. So, you can have a different style per selection in those repeatable rows.

As we just looked at, you can basically see that the heading up here is set to be a little bit bigger, at 24 pixels. And the one down here, we set to 18 pixels. So, those two are getting mapped a little bit differently. And we also change the background color to be white on the top one and slightly off-white on the bottom one. So, you can see that's been applied here as well, with that hex value.

The other cool thing you can do is you can actually change the order. So, if you don't want to sync it from top to bottom, you can actually change the order that it gets synced at. So, we could change it so it sorts the Figma selection from bottom to top. That would basically reverse the application of these. So, if we selected those and clicked on "synced rows," that would basically reverse it.

I'll just do that again and undo the changes first, just so it's kind of back to what we originally had it. So again, I'm going to show you that. I'm going to select both of those layers. This time, I'm going to go from bottom to top instead of top to bottom. And that's basically going to apply the first row from the bottom up. So, if I select that, "bottom to top," click "Sync Rows," and this time, it's basically used the second row, which is the first row of changes, and it's applied that to the bottom. And then the next one is applying it to the one up here. That's just a really quick way of reversing the layer order. And you can also do that based on a bunch of other properties as well. So, I'll leave you to play around with that in your own time.

The last one I wanted to do is just show you how to use this in combination with content. So, if you wanted to change the content of these cards as well. So, what you need to do is basically just make another tab or another spreadsheet with those same names. And instead of using CSS rules this time, so these ones are all using CSS rules, this time you're just going to use plain text content. No CSS, nothing like that. It's just plain text content with either text or image links. So, if you use an image link on a layer that accepts images in Figma, it'll automatically download those images and swap them out.

I'll show you what that looks like now. So, I'm just going to go to my "share" button, grab that, and copy the link one more time. And if I just jump back into my Sync Spreadsheet item over here, paste that in. And for the final example, we're just going to select the "cards content" tab. And again, click on "Use Selected Sheet." And if we now again click on these two rows, so this is the same method that we just used in the "card Styles" one, but this time we're going to be using it for content. Just regular content, just to show you what that looks like.

I'm basically going to finalize that as my last example. So again, you can see we've got a bit of a preview. And this time, you'll notice that it's not showing the little "theme" icon. It's showing that this is actually being detected as normal text content and an image replacement here. So, these columns, it's understanding what kind of content that is, and it's telling us that it's going to map it to those layers that we've got selected.

Again, I'm just going to select both of those card frame layers as the parent layers and loop through those. This time, I'm just going to go top to bottom and click on "Sync Rows." And that's basically going to sync up the content.

You can see here, it's updated the layers from the spreadsheet. And this time, it hasn't done style updates because we didn't use any CSS. This is just a regular old content update, just the way that you would usually do this with the CopyDoc Figma plugin, the main kind of content sync feature. So, this is basically just showing you how to do content changes inside of the spreadsheet. And you can actually do a mixture. So, if you wanted to do style changes and content changes in the same tab, you can definitely do that. The only thing to be mindful of is you can't repeat the label. So, if you had two things of staff name and one was color and one was text, that's probably not going to work. That's just going to double up and get a bit confused. But if you wanted to basically do staff role style, so if you wanted to do staff role change that to black text or something like that, and then you didn't repeat that for content, you could basically have that like this. And that would automatically apply the styles for the staff role layer and it would apply content for these other layers here. You can kind of mix and match. You just can't do a style and content for the same layer at the same time. That's the only thing to be mindful of.

The easiest way to do it is just to try and keep your tabs or spreadsheets separate. It's probably a good idea just to do styles in one and then split out the content in another one, as we just did a second ago.

That's basically it. As I mentioned, you can do this with an Excel file as well. So, if you don't want to use the spreadsheet from Google Sheets, you can basically just do this with a regular Excel file as well. You can structure it in the exact same way. And I'll show you what that looks like.

If we open up the spreadsheet, you can basically just either download your sheet from Google Sheets, just download it as an Excel file, or you can just create a new Excel file in Excel and create tabs or create the same layout. And then you'll be able to drag and drop that into the Figma plugin. So, if you click on "Sync Spreadsheet" and then if you drag and drop your Excel file into this little drop zone, it's going to do the same thing. It's going to give you the options for your tabs. So, for example, we could do the app screen design again. I'm going to click on "app screen," Use Selected Sheet, and then click on "app" and click on "Sync Rows." So, I'm going to click "Sync Rows." And again, you can see we've done the exact same process as we just went through with the Google Sheets version, this time just using a regular Excel file instead.

That's just an alternative if you prefer to use a local file. You can basically go ahead and do that. And that's just going to import it much more quickly because it doesn't have to request the Google Sheets link every time. Using a local Microsoft Excel file is also a great alternative if you prefer to do it that way. It's going to work exactly the same. You just have to structure the spreadsheet the same way that we've just gone through. And you're welcome to use Microsoft Excel instead of Google Sheets if you prefer to do that.

The last thing that I just wanted to really briefly mention is you can find a reference of the supported CSS properties by clicking on the "Sync Spreadsheet" icon down here. And if you go ahead and click on the "CSS docs" link. So, there's a little link here that says "CSS docs." You can click on either of those, and that'll basically take you to the Hypermatic CopyDoc documentation site. That's just a quick overview there.

Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one.

---

---
type: tutorial
title: How to rename Figma layers in bulk from a spreadsheet using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-06-08T00:00:00.000Z
dateModified: 2023-06-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-rename-figma-layers-in-bulk-from-a-spreadsheet-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-rename-figma-layers-in-bulk-from-a-spreadsheet-using-copy-doc.md
---

# How to rename Figma layers in bulk from a spreadsheet using CopyDoc

#### Video Transcript

Today I'm going to be showing you how to automatically rename your Figma layers from a spreadsheet using the CopyDoc Figma plugin.

To get started, all we need to do is go to your Figma file, click on the little "Resources" icon here, and search for "CopyDoc", and Under the "Plugins" tab, you'll see the CopyDoc Figma plugin pop-up. All you need to do to run it is just click on this "Run" button here. Or, I'd recommend clicking on this more options icon here and clicking "Save Figma plugin." That's just going to save it to your Figma plugins list for later. I've already gone ahead and done that, so I'm just going to right-click anywhere, go down to plugins, then go down to saved plugins, and click on the CopyDoc Figma plugin. And that's just going to run the Figma plugin that we just saved a second ago.

We're going to be focusing on this sync spreadsheet content feature down here. There's a bunch of other options in the Figma plugin that I'm not going to go through. You can check out the playlist on YouTube for CopyDoc if you want to check out those other features. But today, I'm just going to be focusing on how to actually rename your Figma layers, like these, from a spreadsheet in Google Sheets or an Excel file using this sync content feature. So, I'll show you how to do that now.

Let's say we want to rename these three frames. So, we've got these three Figma frames that are all named "my frame." So, I want to change the names of those automatically. So, what I can do is I can go to my spreadsheet. So, I'm just going to open up a new Google Sheet, and you can see here I've basically added the name of those layers as the top item, so row number one, and that's going to be my column header. So, the column header name basically just has to match whatever the name of your Figma layer is in the file. And then, what you want to do is add the names that you want to rename the layers to underneath that column title. So, what you basically want to do is go through and add the names that you want the Figma layers to be called underneath that column. And then, that's going to automatically sync up in Figma. So, I'll show you what that looks like now.

If you set up your file like this and then click on the share button up here, so just click on "share," and then just make sure that this General access setting is set to "anyone with the link," and then just click on "copy link." And once you've copied it, you can go back to your Figma plugin, click on the sync content feature in the Figma plugin, and then what you want to do is just paste in your public Google sheet link here. So, paste that in, and that's going to load up the Google Sheets tabs. And I've got two tabs in my Google sheet, so it's going to give me two different options. I'm just going to select the Figma frame names tab that I've got set up, which is coming from down here, and I'm just going to go ahead and click on "use selected sheet." And that's going to load up the rows that we just added from the spreadsheet.

Once that finishes loading, it'll give you an option to sync those layers up with your Figma layers. So, what you basically want to do is select the three layers that we just wanted to sync up. So, I'm going to select those three frames that are all called "my frame," just to match up with the column name here. And then, what I'm going to do is just click on the "Sync Rows" button here. So, I'm going to click on "Sync Rows," and you can see that it's updated content for three layers. And we can see now that the layers that we just had in Figma have been renamed. So, we've basically renamed the three layers that we selected to be the same as what we had in our spreadsheet. So, you can see that those have been synced up nicely. So, that's basically what it looks like. We can also do that for inner content. So, we don't just have to do it for frames; we can do it for individual layers as well.

I've got a second tab set up on the spreadsheet here, and I basically want to rename these images. So, I've got these images in these frames, and at the moment, they're just all named "Avatar." So, I've got a little hash called "hash Avatar," and all of them are named the same. But I want them to be different based on the content of the photo. So, what I can do in this case is the same process. I can basically add "Avatar" as my column name, and then I can just add in the target Figma layer names that I want them to become when I import that into Figma. And at the same time, I'm also going to update some text layers. So, the text layers are all called "username," and I've also added the hash "username" as my second column here. And I've done the same thing. I've added the content that I want that text to be changed to. And the important thing to note here is basically, if you're naming the text layers the same as what you've got in your column, it's automatically going to update the text content. And if you're naming it the same as the layer in Figma, if it's not a text layer, so for example, the frame that we just did or the image layers that we're going to be doing in a minute, that's automatically going to rename the layer. So, the general rule is that if the layer is not a text layer and you've added it into your spreadsheet's link, it's just automatically going to change the name of that layer. Obviously, because it doesn't have any text content, it's not going to do that. But if it's a text layer, it will update the text content.

Now that we've got that set up, I'm going to do the exact same thing. I'm just going to go back to my Figma plugin, reopen the sync content feature, and drop in my spreadsheet URL. So, I'm just going to copy that again, copy the link, paste that in. And this time, I'm just going to select the "user card details" tab. So, I'm going to select that and use that as my selected sheet. Click on the "use selected sheet" button. And this time, I'm just going to highlight all of my frames. So, I'm just going to highlight all these frames. And what that's going to do is it's going to loop through each of those frames and match any layers that have the same name inside of them with the content that we just added in the spreadsheet. So, I'll show you what that looks like. If we now click on the "Sync Rows" button, we can do that now. So, click on "Sync Rows," and you can see here that it's gone through and updated six Figma layers. So, we've got our images. The layer names have all been updated. These are now saying "Avatar" with the person's name in them rather than just "hash Avatar." And it's also gone through and changed the text content for each of those layers. So, you can see what that looks like there.

The other thing that you can do that's probably worth mentioning, as I mentioned at the start of the Figma tutorial, is that you can also use an Excel spreadsheet, just a normal Excel spreadsheet file. So, if I undo those text updates and layer name updates that we just did from Google Sheets, I'm just going to undo those now. I'm going to open up the Excel file. So, if I basically save my Google Sheet to an Excel file, if I download that to Excel, and if I open up that file in Excel, so if I open up Excel now and just open up that spreadsheet, we can see here that the contents are formatted exactly the same. So, we've got the exact same content. It's just in an Excel spreadsheet file. And so, what we can do is we can actually go back into the sync content feature, and instead of pasting in the public Google sheet, we can actually just drag and drop that Excel file. So, we can drag and drop the Excel file directly from our computer into this little Drop Zone area. So, I'm going to do that now. And because it's local, it's very quick. It just loads it directly from your computer. It doesn't need to go to the internet to fetch that information. So, we can see here the tabs have loaded up really quickly. And again, we can just select our "user card details" tab, click on "use selected sheet," and then we can basically just highlight those layers again. And you can also select the order that you want to import the content. So, by default, it will just do it from top left to bottom right. So, for example, it'll just go one, two, three, four, five, six in rows. But you can also change that if you needed to, to be sorted visually in columns or by the layer order or by the Figma layer age or layer name. So, you've got a bunch of different options there with the sync order. So, I can just do this as an example to sync it by reverse. In this case, I'm just going to reverse the row order. And I'm just going to click on "Sync Rows" again. And you can see this time, it's again updated the six Figma layers from the spreadsheet, but this time it's done it from Excel, just an Excel file. And you can see, because I changed the order, the order is now reversed. So, you can see that at the bottom right, we've got Albert, and then Michael, then Adam. So, it's going in reverse order of the spreadsheet. And this is in contrast to what we did before, which was just going by order from top left to bottom right, which was going through all of these in order like that.

That's basically what it looks like. I just want to show you that you can use a Microsoft Excel file if you don't want to use Google Sheets. But you've got the option there regardless of which platform you prefer. So, that's basically it for today. I'll leave it there and keep it pretty simple. Feel free to experiment with this in your own workflow. I'm sure you can come up with some more complicated versions of this, where you can rename, you know, hundreds or thousands of layers in one go and hopefully save yourself a lot of time with your team. So, thank you as always for watching, and we'll be back soon with more Figma tutorials like this one soon.

---

---
type: tutorial
title: How to update Figma text layer content with Markdown files using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-06-06T00:00:00.000Z
dateModified: 2023-06-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-update-figma-text-layer-content-with-markdown-files-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-update-figma-text-layer-content-with-markdown-files-using-copy-doc.md
---

# How to update Figma text layer content with Markdown files using CopyDoc

#### Video Transcript

Today I'm going to be showing you how to easily make lots of text updates in your Figma designs with markdown files using the CopyDoc Figma plugin.

So, to get started, all we need to do is go to the little 
"Resources" icon at the top of your Figma file. If you click on that and search for "CopyDoc", under the Figma "Plugins" tab you'll see CopyDoc pop up. All you need to do to run it is just click on that item, and then you can click on the "Run" button down here, or I'd recommend clicking on this little "More options" icon and just clicking on the "Save Figma plugin" link down here. 

I've already gone ahead and done that. I'm going to go to my canvas and just right-click anywhere, go down to plugins, go down to saved plugins, and then click on the CopyDoc item. That's just going to run the Figma plugin we saved a second ago.

CopyDoc has a bunch of different features that you can explore. I'm not going to be going through all of them today. If you want to check out those ones, you can go on the YouTube channel and just check out the CopyDoc playlist. But today, I'm just going to be focusing on exporting and importing markdown files to make text updates in your designs.

To get started, all we need to do is click on this little export text layers button, and this is going to bring up any frames that are currently in your Figma file. So today, I've only got one, so I'm just going to keep that one selected and then click on the drop-down here and make sure that markdown is selected. You can export it to different formats, but for today, we're just going to be looking at markdown. So, I'm just going to click on "Markdown" and then export the markdown by clicking on the "Export Markdown" button.

If you click on that, that will basically export the text to a markdown file that you can download. So, I'm going to click on the download markdown export button, download that to my desktop, and then if you unzip the file, you'll open up the folder, and you'll be able to see that we've got a markdown file and also a designs file, just as a bit of a visual reference if you're translating this or updating the content in your text editor.

To open up the file, you can basically use a code editor or a markdown editor. Today, I'm just going to be using this markdown editor and opening that up. So, you can see here that I've basically got my Figma file exported, and it's including all of our different text layers with the content in between each of the IDs. So basically, you want to leave these ID layers or ID lines alone because they're going to map the text back into Figma later, but you can start making text content updates just by editing the content here.

So, for example, we could change "hello" to "welcome." We can change this body copy here, so we can say "this is portfolio," and you can make updates to longer bits of copy as well. So maybe we want to just change around this copy a little bit, add some line breaks in there. Maybe you want to add some formatting as well, so you can add formatting in markdown just by adding in these little star icons. So, that'll do bold. If you want to do italic, you can basically add a single star on each side, and that will make the text italic. And you can see here that any bold text is also automatically been included with the markdown formatting. So, that's bold text there. And you can see here, there are a few different other options we can have a look at. Today, I'm just going to be keeping it really simple.

Maybe we can unbold one of these items as well. So, I'll unbold the home link here, and maybe I want to bold the "about us" link instead. So, we'll just make those changes. For now, I'm just going to save the markdown file again, and if we now minimize that and go back to CopyDoc, if you now click on the import text layers button. So, we clicked export before, now we're going to click on import text layers, and what we're going to do is drag and drop our saved markdown file into the little drop zone here.

I'm going to open my folder again, just going to grab that markdown file we just saved, drag that into the little drop zone here, and you should see the updates that we just made show up. So, you can see we've got a list of all the changes that have been made. So, we can preview those. We can select or deselect changes that we want to apply or not apply, but you can basically see here that we've got our updates that we made in the markdown file applying in the Figma plugin now as a preview.

Now we want to actually update those text changes in the file. So, I'm going to click on the "update Figma text layers" button here, and that's basically going to go through and automatically update that content. So, you can see here the changes that we made are the heading, so we've got this "welcome" text instead of "hello." We've got our subtitle of the portfolio that we added, and we've got our home link, which is now not bold, and the "about us" link is bold instead. So, we've changed the formatting of that content there, and we've also just changed the line break of the main text here.

It's just a handful of changes but quite effective at making updates to the body copy with formatting changes just in one drag and drop. So, the other thing we can do is export this with grouped layers as well. So, for example, if we go to the export text layers button again and this time I'm just going to also change some of this copy to be the same, so I'm just going to make this one "welcome" as well, and I'm also just going to change these ones down here so that's the same, and if we make this one the same as the other one at the top. So, I'm just going to make these two the same, and that should be enough for now just to show you what this looks like.

If we re-export the text layers, so I'm just going to click on export text layers, and this time, if you click on the group duplicate text layers toggle. So, I'm just going to click on that now and then click on the export markdown button again, and that's going to allow us to download a new markdown export. So, I'm just going to save that, unzip it, and just rename that, so I'm just going to call it "new," and then go back to my editor. So, if I just close off that, go to my editor down here, and go back to desktop and go to my new folder, and you can see here that we've got a new export.

And you'll notice that this time, it's a little bit different. So, we've got some IDs getting extra IDs in here with one set of texts. So, you can see for this "welcome" text, for example, we can see that it's got two Figma layer IDs automatically added. And so, that means we can basically make this text update in one spot and anywhere that that text has been exported from originally. So, for example, "welcome" and "welcome" down here, if we were to change that in here, so I'm just going to change that back to "hello" again and save that.

And we can also change these menu items here, so we've got these ones. I'm just going to change that to "mobile design," and I'm also just going to change the company slogan to something new. So, that's a pretty good overview of changing these little details. So now, if we save that again, exact same process. I'm going to go back to Figma, click on the import text layers button again, and this time I'm just going to drag and drop my new markdown file, which I just updated, drag and drop that into the Figma plugin.

And this time, you'll see that we've got those changes, but it's also changing the multiple text layers. So, because we made a change for the "welcome" layer in our file, we've got two different "welcome" layers in the actual design. So, it's going to automatically pick up on that change and allow us to apply it to multiple layers at the same time, same with our company slogan. We can check out where these text layers are as well just by clicking on this little text icon.

If you want to figure out which layer relates to what, you can just go ahead and click on that, and that's just a really easy way of jumping to that layer that's going to get updated when you do click that button. So, this is just a nice little preview. If you don't want to update any of them, you just uncheck them. For now, I'm just going to update them all. So, I'm going to click on "update Figma text layers" again, and that's going to go through and update six layers.

We can see here that "mobile design" has been updated in both of our layers here because we updated it in our group export. And you can see up here we've now got "hello" again in both these fields down here, and the company slogan that's been updated here and also in the footer. So, that's just a really easy way if you've got a lot of duplicate texts. So, for example, a lot of times you'll have buttons with the same label. If you just want to update them in one spot using the grouped export feature that we just went through here, grouping duplicate text layers is going to be really seamless way of updating the text in one place in your markdown file and then re-importing it back into Figma.

That's basically it for the Figma tutorial today. The last thing that you can do if you want to, as well, if you don't want to export entire frames, is you can just use this little quick export option down here. So, if you click on the quick export button with some layers selected, that will automatically just export certain text layers. So, you can just get a much smaller export if you just want to export certain layers instead of the entire Figma frame. You can go ahead and do that, export to markdown, and then re-import that using the import text layers button again.

Thank you as always for watching. I hope that's been helpful if you've been wondering how to use markdown files to update your Figma content easily. This is going to be a really quick way of going about it using the CopyDoc export and import feature. And we'll see you in the next Figma tutorial video very soon.

---

---
type: article
title: Design QA workflow before launch
description: A pre-launch design QA workflow for teams that want clearer reviews and fewer last-minute regressions.
datePublished: 2023-06-03T00:00:00.000Z
dateModified: 2023-06-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/design-qa-workflow-before-launch/
markdownUrl: https://www.hypermatic.com/articles/design-qa-workflow-before-launch.md
---

# Design QA workflow before launch

A pre-launch design QA workflow for teams that want clearer reviews and fewer last-minute regressions. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Pixelay

[Pixelay](/pixelay/) is one of the more useful tools in this workflow. Pixelay matters in this workflow because QA breaks down when teams are comparing design and implementation manually. Overlay-based review makes front-end drift easier to spot and easier to discuss.

### Commentful

[Commentful](/commentful/) is one of the more useful tools in this workflow. Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: tutorial
title: How to export HTML emails from Figma to Pardot (Marketing Cloud Account Engagement) using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-05-31T00:00:00.000Z
dateModified: 2023-05-31T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-pardot-marketing-cloud-account-engagement-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-pardot-marketing-cloud-account-engagement-using-emailify.md
---

# How to export HTML emails from Figma to Pardot (Marketing Cloud Account Engagement) using Emailify

#### Video Transcript

Today I'm going to be showing you how to automatically upload HTML email templates from Figma into the Salesforce Pardot platform using the Emailify Figma plugin.

To get started, all we need to do is go to your Figma file and click on the "Resources" icon at the top. If you search for "Emailify", under the "Plugins" tab click on the Emailify item, you'll see this little window pop up. To run the Figma plugin, all you need to do is click on the "Run" button here, or you can click on this "More options" icon and click "Save Figma plugin." That will save it to your Figma plugins list for easy access later. I've already done that, so I'm going to my canvas, right-click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on Emailify. That's just going to run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, the way it works is it basically helps you design emails in Figma that can then be exported automatically to production-ready HTML from the Figma plugin. Let me show you an example. I'm just going to create a new frame called "Test Pardot Template" and click on "Add new Emailify container." I'm not going to go through all the design features of the Figma plugin in this tutorial. I'll just create a really simple template just so we can get a sense of how it looks in Pardot. I'm going to add a Pardot footer as well. If you go to the Footers tab in the Figma plugin and scroll down, you'll see the Pardot icon. Just go ahead and click on that, and that will automatically populate things like the unsubscribe link and the view in browser link. So you can see here I've got my unsubscribe link and view in browser link pre-populated. You can obviously style all these components to be on brand. As I mentioned, there are some other tutorials on the channel that go into way more detail about how to do that. But for today, I'm just going to be assuming that you've already got your template designed and customized the way that you want in Figma, and you now just want to upload it to the Pardot platform automatically.

Before you upload it, you can preview it by clicking on this little preview icon here. That's just going to preview the email in Figma so you can see what it's going to look like. If you're happy with the design, you can basically start the process of uploading it into Pardot by clicking on this "Export HTML" button in the Figma plugin. So click on "Export HTML." By default, it will automatically export it to a zip file on your computer, but we can change that by clicking on this little drop-down here. If you scroll down the list to the platform integration section, you'll see the Pardot option pop up. You'll notice that there are two Pardot options. The first one is the API upload, which is the one we're going to be focusing on for now. But there's also an option with a local zip export. If you just wanted to download the template directly to your computer and manually upload it, you can definitely do that as well. Just select the local zip export option, and it will export the template for Pardot with all of the template tags and things like that included. But for today, we're going to be using the API upload. So I'm just going to click on "Pardot API upload." This is going to prompt us to put in a few details.

I'll walk you through where to find these details in Pardot and how we can then upload this automatically to our Pardot account. So the other thing I should just briefly mention is that Pardot was actually renamed, so Pardot is now technically called  "Marketing Cloud Account Engagement" in Salesforce. I think most people still just call it Pardot, so that's the reason why that's the label in the Figma plugin. But I just want to clarify in case you're wondering why "Pardot" and "Marketing Cloud Account Engagement" basically the same thing, they just got different names in Salesforce; I just wanted to really quickly touch on that before we moved on.

The first thing we need to get is our Business Unit ID. So let's go ahead and find that Business Unit ID by going into our Pardot account. If you log into Pardot and open that up in the browser, you can basically find this page called the business unit setup page by going into your settings icon. So in the top right of Pardot, click on this little settings icon, then click on "Marketing setup," and that should take you to this page here where you can then click on this "Business Unit Setup" item on the left-hand side. So I've just clicked on "Business Unit Setup," and it should let you find this Business Unit ID. So it should start with "0uv" and have a bunch of other letters and numbers there. So I'm just going to copy that Business Unit ID to the clipboard. I'm going to highlight it, copy it, and paste that into Emailify. I'm going to paste that into the Business Unit ID field.

The other thing we need is our email address and password that we use to actually log into Pardot. So I'm just going to paste those in now. I'm going to copy and paste the email address, paste that in there, and then I'm also going to paste the password. I'm just going to paste the password in the password field and drop those in there.

And then we just need two more bits of information. So we basically need a "Consumer Key" and a "Consumer Secret". So I'll show you where to find those now. And to get those, we just need to go to a different page in Pardot called the App Manager. So you can get to the App Manager by going to the setup page. So you can get to the setup page by clicking on the little settings icon here, clicking on "Setup," and that should bring you to this setup page here. And then what you need to do in the left-hand column is scroll down to the platform tools section, expand the apps accordion, and then click on the "App Manager" menu item. So on the left-hand side, click on "App Manager," and that should bring up this lightning experience App Manager page that you can see here.

Assuming that you've already got an app, a connected app created, it should show up in this list down here. If you don't, you can go ahead and click on the "New Connected app" button and just set up a new connected app that you want to use with Emailify and fill in all the details and make sure that it can generate a Consumer Key and secret. So I've already gone ahead and done that, so I'm going to go down to my Pardot tests integration down here, and I'm just going to click on this little arrow on the right-hand side. So click on that little arrow, and that should let you click on the "View" item. So click on "View." And once you click on "View," that should bring you to another page just showing you the connected app that you've just clicked on. So you can see here I've got my Pardot test connected app. And what you want to do is basically go down here where it says "API Enabled OAuth Settings," and you want to click on the "Manage Consumer Details" button. So this should reveal your Consumer Key and secret, and you'll be able to copy-paste those to the clipboard.

I've already got those saved in a separate file, so I'm just going to grab them now and copy and paste them into my Emailify plugin. So first of all, I'm going to grab the Consumer Key. So I'm going to copy and paste that into the Consumer Key field, paste that in. Then I'm going to grab the Consumer Secret and paste that into the Consumer Secret field. And once we paste that in, it should automatically load the Pardot API, and it'll tell you that it's connected with Pardot if you entered the details successfully. So that's how you can connect to Pardot. So those details are now added and saved, so they'll automatically connect to this screen that you can see.

You can see that now that we're authenticated, it's basically showing us some different fields that we can now select for uploading our HTML to Pardot. So I'm mindful that there are a few steps here just due to how complicated the Pardot API process is, but we've only got a few more things to get through, and then we'll be able to upload these to Pardot from Figma.

You can see here that we've basically got a few different fields. So we've got this dropdown over here, and this dropdown allows us to select the campaign that we want to add the email to. So you can basically scroll down and pick the campaign that you want to select. So I'm just going to select this "Email Figma Plugin" campaign that I've got in Pardot.

Then in the middle column here, this will allow you to select the folder name that you want to save the email into. So I'm just going to select the "Email Templates" folder.

Then you want to select the tracking ID. So you want to select the tracker domain. So you'll have a bunch of different options here. Just select the one that you want, and that'll be the tracking domain that any links and all that sort of stuff gets tracked against.

The last thing we need to populate is just the sender name and email. This isn't going to send out any emails at the moment, but it just needs to pre-populate those fields. So I'm just going to add my name and email into there. And then we should be ready to go.

Once you've populated those, the button should become available to upload this to Pardot. You also have the option of making the template editable. So if you want to add the Pardot editable region tags and things like that, you can select that option. Today, I'm just going to leave that turned off. And then I'm just going to click on the "Upload to Pardot" button.

We can also add the subject line. So I'm just going to do "Test Subject" and "Test Pre-header." And then I'm going to click on the "Upload to Pardot" button to upload the template. So I'm just going to click "Upload to Pardot." This will automatically generate the HTML, upload any images, and then upload the template to Pardot.

You can see that it's telling us that the Pardot templates have been uploaded, and we can view them in our email accounts under the Pardot account. So to view the Pardot template that's been uploaded, you can go back to your browser and find this page here, which is the email templates page. A quick way to get there that I've found is to go to the top left corner here and click on this little menu icon, and that'll allow you to search for things in Pardot. So if you search for "Engagement" and go down to the items down here and click on "In-account Engagement Email," and if you click on "Account Engagement Email," that'll bring up this email templates page.

Under your email templates list, under the published templates, you basically want to find the name of the email that you just uploaded. So in this case, I'm just going to click on the "Test Pardot Template," and that should load up the template that we just set up a second ago.

You can see here that we've got our content, we've got our HTML that we just uploaded from Figma, and we can see that it's added the tracker domain that we specified and the test subject that we specified, including the sender as well. So it's got our general sender that we added, which is currently just my email address, and it's been uploaded to the folder that we selected in the Figma plugin, the "Email Templates" folder, along with the name of the template, which is just being taken from the Figma frame name. So if you want to change the name of the template, you can basically just update the name of the frame here in Figma, and that will automatically change the name when it gets uploaded into Pardot, as we just saw.

That's basically it. As I mentioned, there are a few different steps involved in getting those initial details, but once you've got those added into the Figma plugin, you can basically just keep uploading templates from this Figma file. If you start up a new Figma file with new templates, you'll just have to drop in those credentials again. But that should hopefully be in there for this particular file. So you can continue uploading templates into your Pardot account from Figma.

Thanks for following along with this Figma tutorial, and I hope that's helpful if you've been wondering how to automate uploading HTML emails from Figma into your Pardot account. This should hopefully make that process a little less painful. So thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Salesforce Marketing Cloud using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-05-30T00:00:00.000Z
dateModified: 2023-05-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-salesforce-marketing-cloud-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-salesforce-marketing-cloud-using-emailify.md
---

# How to export HTML emails from Figma to Salesforce Marketing Cloud using Emailify

#### Video Transcript

Today I'm going to be showing you how to automatically upload HTML emails from Figma to the Salesforce Marketing Cloud (SFMC) platform using the Emailify Figma plugin.

All we need to do to get started is go to the little "Resources" icon at the top of your Figma file. If you click on that and search for "Emailify", and under the "Plugins" tab, you'll see Emailify pop up. To run the Figma plugin, you can just click on the "Run" button here. Or, I'd recommend clicking on this "More options" icon and just clicking "Save Figma plugin". That's going to save it to your Figma plugins list for easy access later.

I've already gone ahead and done that. I'm going to go to my canvas, just right-click anywhere, go down to plugins, then go down to saved plugins, and click on Emailify. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you design emails in Figma that can then be exported to production-ready HTML automatically. So, just for example, I'm just going to create a new email here. I'm just going to call it "new MC email," with "MC" being Marketing Cloud. I'm just going to be populating a few different fields here just to make a really quick design.

I'm not going to be going through all of the design elements and how to actually customize the designs. There are some other videos on the YouTube channel if you want to go through those. Today, I'm just going to be focusing on how to get the email up into Salesforce Marketing Cloud (SFMC) from Figma automatically, assuming that you've already finished your design.

The one thing I will show you is under the "Footers" tab. It's easy to add a Salesforce Marketing Cloud (SFMC) footer just under the platform section here. If you click on the little "Salesforce Marketing Cloud" footer item, that's basically going to automatically populate the required fields needed for your Salesforce Marketing Cloud (SFMC) template.

If we have a look at the settings here, you can see the unsubscribe links already in there, and we've got the automated address and view email URL link. You can obviously customize the design of this, but for today, we're just going to be focusing on adding a really basic design to show you how the upload works. So, I'll just add one more image, and then we'll be ready to go.

I'm happy enough with that email for now. So, to export this to HTML and upload it to Salesforce Marketing Cloud (SFMC) automatically, all we need to do is click on the "Export HTML" button in the Figma plugin. Then, you can just change this HTML email option and scroll down to the platform integrations and just select the "Marketing Cloud" item. So, click on "Marketing Cloud," and you'll see the little Salesforce icon.

If you need help finding the keys, you click on this little link here, but I'll show you how to do that in Salesforce Marketing Cloud (SFMC) as well. So, we need three things. We need a base URL, a client ID, and a client secret. The way that we can get those details is if you go to your Salesforce Marketing Cloud (SFMC) instance and just log in. Then, if you go to the setup page, if you click on your account name and go to setup as a menu option, you'll see the setup page in your browser.

Then, what you want to do is go down to platform tools and expand the apps dropdown, and then just click on "Installed Packages." Then, you should see a menu item or a button rather called "New." So, if you click on the "New" button, it should give you this modal here which asks for your new package details. You can give that a name. So, in this case, I'm just going to give it a name of "Emailify" and pop in "Figma integration" into the description, just so we know what it is.

Then, you can go ahead and click on "Save," and you'll see that it'll create a new package called "Emailify." So, once it's done that, you basically want to go down to this "Components" section here, click on "Add Component." So, I'm going to click on the "Add Component" button. Then, we want to select the API integration option and click "Next."

Then, we want to change this one to "Server to Server." So, we're going to change it from web app to server to server. And once you've got that selected, go ahead and click on "Next" again. And then, finally, we want to set the permissions for the component. So, what we need to do here is basically add some permissions.

Under channels, under the email channel, you just want to select "Read" and "Write," so those two are selected. And then, the other ones you want to select are under this "Assets" heading here. So, we can just select "Read" and "Write" for the documents and images and saved content subsection. And that should be all that you need to give the API enough permission to add email templates automatically from Figma.

So, once you've got those permissions selected like this, go ahead and click on "Save." And that should add the component to your package. So, now that we've got that saved, we want to now copy these details down here. So, we're going to grab the "REST Base URL". So, I'm going to click on this little copy icon, go back to Figma, and paste that into the REST Base URL field here.

Then, I'm going to grab the "Client ID". So, I'm just going to copy the Client ID from Salesforce Marketing Cloud (SFMC), paste that into Figma, and do the same thing for the "Client Secret". So, I'm going to grab that, copy that Client Secret into here, and then we're basically ready to go.

You can add a subject line if you want. So, we can call this "test subject" and "test pre-header" to put something in there. And now, when you're ready, just go ahead and click on the "Upload to Marketing Cloud" button. And that's just going to export the HTML and images from Figma, and it's going to automatically upload them into your Salesforce Marketing Cloud (SFMC) templates.

So, you can see here that it's been successfully uploaded. So, we can view these by going to the Content Builder page once we've logged into the Salesforce Marketing Cloud (SFMC) account. So, I'm already logged into the Salesforce Marketing Cloud (SFMC) account. So, I'm just going to go ahead and click on this "Content Builder" page link. And that's going to open up the Salesforce Marketing Cloud (SFMC) Content Builder link.

So, this is going to give us access to view the email template that we just uploaded from Figma into the Salesforce Marketing Cloud (SFMC) account. Now, we can see we've got our new MC email here. That's the one we just uploaded from Figma. And you can see that if we click on it, we can now see exactly what was uploaded from Figma.

So, we've got our test subject and test pre-header, which we just added through the Figma plugin. And you can see that we've got our Emailify app user as the owner. So, it's been uploaded via the API using the package that we just created. And you can see here, this is real HTML. This is exactly what you expect from the template from the design in Figma. And this is now ready to use as an email template in Salesforce Marketing Cloud (SFMC).

So, we've got our footer links in there. We've got our text, and we've got our content as we'd expect. So, you can now basically use this however you want in Salesforce Marketing Cloud (SFMC), and that'll be your email template going forward for whatever you want to use it for.

So yeah, that's basically it. And there were a few steps to get through for the first time. But now that you've created that package in the setup area under "Installed Packages," you can basically now reuse these details in Emailify. So, if you spin up a new Figma file and you need to paste in credentials again, you can basically just copy and paste them again from this same page.

And you can reuse them as many times as you need from this API installed packages page in Salesforce. So yeah, I hope that's helpful. And if you're using Salesforce Marketing Cloud (SFMC), please feel free to give this integration a try from the Emailify Figma plugin. And hopefully, it'll make your life a little bit easier, not having to manually create the templates in Salesforce each time.

So, we'll leave it there for today. Thank you, as always, for watching. And we'll be back soon with more Figma tutorials like this one.

---

---
type: tutorial
title: How to use the analytics dashboard and link tracking for Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-05-29T00:00:00.000Z
dateModified: 2023-05-29T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-use-the-analytics-dashboard-and-link-tracking-for-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-use-the-analytics-dashboard-and-link-tracking-for-figma-presentations-using-pitchdeck.md
---

# How to use the analytics dashboard and link tracking for Figma presentations using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to view analytics for your presentations created in Figma using the Pitchdeck Presentation Studio Figma plugin. 

To get started, all we need to do is go to your Figma file and click on the little "Resources" icon at the top. If you search for "Pitchdeck" and then click on the "Plugins" tab, you'll see the Pitchdeck Figma plugin pop up. All you need to do to run it is click on the result and then click on the "Run" button down here. Or, I'd recommend clicking on this more options icon here and clicking "Save Figma plugin." That's just going to save it to your Figma plugins list for easy access later.

So, I've already gone ahead and saved my Figma plugin to my list. I'm going to go to my canvas, right-click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on the Pitchdeck item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way it works is it basically allows you to take any of your frames that you've designed in Figma, and each of those frames gets treated as a slide in the Figma plugin. So, you can go ahead and create these slides in 16x9 ratios, typically 1920 by 1080, and you can start constructing your slide deck in the Figma plugin, which can then be exported to various formats.

Today, I'm not going to be going into details about how to design the slides or how to add animations and things like that. There are some other videos on the channel if you want to check those out. Today, I'm just going to be assuming you've already got your presentation ready to go, and you want to upload it to the Pitchdeck presentation web app and then look at some analytics based on who's viewing those slides.

So, let's get started by first uploading the presentation. You can see here, if we go to the analytics button, now it's going to tell us that we need to upload the presentation to the Pitchdeck web app first. So, we can do that through the export panel. If you close that off and just go straight to the export panel, you can click on this export button in the top menu here. Then, you just want to make sure that the Pitchdeck presentation option is selected as the format. There are some other options you can export to, like PowerPoint and PDF, but the analytics feature only works for the web presentation. So, I'm just going to make sure Pitchdeck presentation is selected as the format, and then I'm going to click on "Upload web presentation." This is just going to export the slides and create a link that you'll be able to use to view the presentation in the browser using the Pitchdeck presentation web app.

You can see here we've got our presentation uploaded. So, we can see what that looks like just by copying the link, clicking on the little copy icon, and then pasting that into the browser. I'm just going to paste that in there now, and this is going to load up the presentation that we just uploaded from Figma. You can see here we've got our slides, we've got our first slide, second slide, and all of the other slides as you'd expect. So, you can go through these and view the presentation directly in the browser. You can basically share this with someone, or you can present the deck yourself using the Pitchdeck web app.

Now that we've got this loaded and now that we've had a look at it in the browser, what we can do is actually now close off this presentation. If I go back into my Figma file, because I've now uploaded the presentation, if I go back into the Figma plugin main screen and just click on the analytics button, this time, because we've got a link created, you can now see that the analytics panel loads up with some statistics based on what kind of activity the link has had.

If we click on this activity tab up here, you can basically see the session that we just had in the browser. So, the one we just opened up a minute ago, this is a record of that session. If we expand this out, we can basically see all the slides that we looked at, what time the presentation was opened, when it was closed, and if we click on any of these slides, this will basically jump to those slides in the Figma file. So, you can see exactly which slide was which. We can also see a graph of views, showing which slides have actually been viewed and for how long each slide was viewed for. You can see here, this is a total duration of each slide. We can see here that the third slide was the one that had the most time spent on it, and the same with views. You can see these are basically all even because there was only one slide viewed.

Going back to the overview, the other cool thing we can do is create custom links. Instead of just having the default link which we got from the export panel over here, you can also create custom URLs. You can get to that either by clicking on this link here or just clicking on the analytics button. What that allows us to do is basically create custom URLs that we can attribute later. So, what I mean by that is if we create one for me, I'm just going to put my name in there and click on "Create new custom share URL." That's going to give us a brand new custom URL over here.

If we open up this settings panel, you can see here that we've got a brand new link that is specific to this link. If we click on the copy button down here and open that up in the browser, I'm just going to paste that in and load that up. You can see here the presentation is the same, so it looks exactly the same. The one thing you'll notice is that the controls at the bottom have been simplified. It only gives you access to the thumbnails for jumping around. If you did want to enable those controls and have more of those advanced features available for the person viewing, you can do that by toggling this "Enable all toolbar buttons" switch on. But by default, that's turned off. The other thing you can do is turn off activity tracking. So, for whatever reason, if you didn't want any activity to be logged on this particular URL, you can turn off activity tracking. By default, it's turned on. You can also disable the link entirely. If you wanted to decommission the link just for this person or just for this group, you can toggle that on, and that will disable the link. We can basically see what that looks like in a second if we just go through a few of these different slides, just to get some analytics data in there that we can look at in a second.

If we now go back into the Figma plugin and we decide to disable that link, we can check "Disable link", if we now try to visit that link again, I'm just going to reload the page, it's going to tell us that the presentation wasn't found. That just means that the person who has the link isn't going to be able to view the presentation with that setting turned off. So, if you basically want to archive a link for a certain person or a certain group that you've shared a custom URL with, you can do that just by disabling the link, and that will put it out of commission. You can re-enable that at any time as well, just uncheck that link, and then if you go back to your browser, paste that link in again and refresh, you can see that it's active once again. That's just a really quick way of decommissioning links if you wanted to archive them or turn them off for someone that you sent it to who you no longer want them to have access to.

That's basically what it looks like there. The cool thing is, because we've got this new custom link created, what we can do is basically filter by that person. If we close off our presentation here and go back to our Figma file, what we can do is refresh the data just by clicking on this little refresh icon up here. Click on refresh, and it's just going to refresh our analytics. We can see now that we've got three link opens, still one unique visitor because it's just me, and we've got a 48% completion right now and one minute 10 seconds of total time viewed, and all that sort of good stuff. But what we can do is, if we just want to narrow that down to that custom link, we can go up here to this dropdown box and instead of saying "Show all presentation data," we can say "Only show data for Adam." I'm going to click on that option now, and that's basically just going to filter it down to any activity that was specific to that custom link that we just created. It's going to exclude all the other activity. It's only going to include any activity that was created under that particular link. We can see here we can show all of the data, and then we can show just that link. You can see that it's quite different down here.

This also applies to all the other tabs. If you go to the activity tab, you can see here that if we only show data for me, it's going to show those two entries, or we can show all presentation data and get that third entry in there with the default link as well. You can also just filter by non-custom links. So, if you've got a bunch of custom links but you only want to see the data for the default link, which the Figma plugin creates automatically, you can filter down by that as well. So, you've got a few different options for filtering out the data, and you can see here that we've got our data basically tracking what kind of journey that user went on in the slide deck. You can see here they open the presentation at this time and then basically went through a bunch of these different slides, clicked around a little bit, viewed different slides for different durations, and then closed out the presentation. That's basically what it looks like there.

The other cool thing you can do is download this data to a CSV. You can click on this "Download CSV" button. I'm just going to do that now, save that to my desktop, and if I open up that CSV as a preview, you can see here that the CSV file we just saved to the desktop basically contains an export of all the data that's in the activity Figma plugin. You can see here we've got the open time, the location, how many interactions, total duration, and this is filtered by whatever options you put in the top here. So, we can export it with all of the data. We can do that again, download the CSV again, save that to the desktop. I'm just going to replace that and open that up again, and you can see this time it's included the default share link as well. So, we've got all the data in there.

The other thing you can do is filter by time. So, if you wanted to only show activity from the last 24 hours, you can do that, or the last week, the last two weeks, the last three months. You can basically specify time, but by default, it's going to do from all time, from whenever the presentation was first created or whenever the first person viewed it, which is in this case today. Finally, the other thing you can do is exclude yourself from the data. Basically, if you are creating these links or viewing the presentation on your own computer, in this case, we're doing all of this on the same computer, and we're basically including our own views by default. Even though I've created the share link here and maybe I want to send that to someone else, because I've already looked at that, this data is coming from me. If you want to exclude that, you can click on this "Exclude your views" toggle up here, and that will basically exclude any activity that has happened on your own machine, whatever you're currently using on your computer to use Figma. You can exclude your own views from the data, which might be helpful if you just want to tidy up the data by excluding your own views.

You can see here there's basically no data at the moment because we're the only one who's looked at it, but if we include our own views again, you can see it's going to give us all the data there as well.

That's basically what it looks like, and yeah, that's basically it. You can create as many of these share links as you want. So, if you want to share them around with different stakeholders, different investors, different clients, you can create an individual link for each of them, and that will be their own special link that you'll be able to see exactly what kind of activity that link is getting based on who you've shared it with. You'll get a nice breakdown in here over time when all of that data kind of starts to make more sense when you've had more than a couple of views on it. It'll start to be more meaningful over time.

We'll leave it there for today. I'm sure the feature is going to be improving over time, but this is kind of the first initial version of it just with some basic analytics at a high level, and then, of course, the detailed views that you can go into as well, as we just looked at.

So, yeah, we'll leave it there for today. I hope that's been helpful if you've been curious about how your presentations are performing once you do share them around. This is going to be a really easy way to get a quick overview of what slides are most popular, who's looking at what, and yeah, hopefully give you a bit more of an idea of what's working and what you might need to tweak.

Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to bulk export original image files from any Figma layer fills from Figma using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-05-19T00:00:00.000Z
dateModified: 2023-05-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-bulk-export-original-image-files-from-any-figma-layer-fills-from-figma-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-bulk-export-original-image-files-from-any-figma-layer-fills-from-figma-using-tiny-image.md
---

# How to bulk export original image files from any Figma layer fills from Figma using TinyImage

#### Video Transcript

Today, I'm going to be showing you how to automatically download the original image files that are being used in your Figma image fills using the TinyImage Figma plugin. 

To get started, all we need to do is go to the little "Resources" icon at the top of your Figma file. If you click on that and search for "TinyImage", you'll see TinyImage pop up under the "Plugins" tab. 

If you go ahead and click on that, you can then run the Figma plugin by either clicking on this run button here, or, I'd recommend, clicking on this little more options icon here and just clicking "Save plugin". That's just going to save it to your Figma plugins list for easy access later. I've already gone ahead and done that. I'm just going to go to my canvas, I'm just going to right-click anywhere and go down to "Plugins", and then I'm going to go down to the "Saved Plugins" item. Then I'm just going to go down to the TinyImage option and that's just going to run the Figma plugin we saved a second ago.

For today's Figma tutorial, I really want to show you how to export the original images that are being used in your Figma file. I've just got this Figma file from the Figma Community which is a mock-up of the Spotify app, and you'll notice here that we've got an image fill on each of these layers. 

Unfortunately, we can't extract that original image easily from here. Sometimes there's a way to do it through the inspect panel, usually there'll be a little link down here where it says background and then the jpeg file, usually you can click on that and it'll let you download it individually, but it's quite time-consuming to go through all of the layers and do it manually. 

So, I'm going to be showing you how to extract all of the original image fields that are being used on your layers automatically in one go. The way we can do that is by going to the downsizer function in the TinyImage Figma plugin. If you click on this little "Downsizer" button here, that's basically going to open up a new panel which shows all of the image fills on your page. 

We can narrow this down by frame. If you just wanted to find them all for this Frame one, we can just click on that frame, click on the refresh icon, and that will just find all of the image fills in this particular frame. If we were to rename that, you can see we'll change that one to album cover and just refresh the selection. 

Now we've got those selected, and I want to export all these image fills. All I need to do is go down here to the bottom of the Figma plugin and click on this button that says "Export Figma Image Fills". I'm going to click on that now, and that's basically going to export all of the fills to a zip file. 

I'm going to save that zip file onto my desktop. I'm just going to open up the zip file now, and if I open up the folder you can see here that I've got all of my image fills exported. 

We can do the same thing over here. If we wanted to export this Frame, we can just jump back in to the downsizer feature, click on the "Export Figma Image Fills" button again, and that's just going to export that next batch of images. 

For example, this top image here, which is quite a large image. If we actually track that down in the design, you can see here that it's quite small, the image layer itself is actually very tiny. But because we're exporting the original image that was used, that was dragged into the design from somebody's computer, it's exporting that original image. The original image is much larger in this case and that's why it's getting exported. 

That's basically it. If you want to do it for the whole file, you can definitely do that as well. Just click on the "Downsizer" button again, and if you don't have any layers selected, click on the refresh icon, it'll say refresh all of the fills on the page. 

I'm just going to click that, and then you can either export everything or just check the ones you want to export. In this case, I can show you what it looks like to export them all. I'm just going to click on "Export Figma Image Fills" again, and this is basically going to go through and automatically export 76 images. 

These are all the image fills from the entire Figma file, and we can basically go through those and use them or reuse them. You can do whatever you want, but this is going to be the quickest way to get all of those original image fills out of the file if you do need to use them. 

Then, if you want to avoid doing it manually, or as I showed you before, sometimes it just doesn't show up in the inspect panel, that is another way you can do it, normally manually, but in this case, it doesn't seem to be wanting to give those up. 

Hopefully, this helps if you've been wondering how to export the original images or the original image files from your Figma file, they're definitely in there, it's just a bit tricky to get them out. Hopefully, this will help you get them out much easier with one click using the TinyImage Figma plugin. 

We'll leave it there for today, thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Figma overlay tool for browser testing
description: How overlay-based browser testing helps teams compare Figma designs against live pages faster.
datePublished: 2023-05-17T00:00:00.000Z
dateModified: 2023-05-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-figma-overlay-tool-for-browser-testing/
markdownUrl: https://www.hypermatic.com/articles/pixelay-figma-overlay-tool-for-browser-testing.md
---

# Figma overlay tool for browser testing

How overlay-based browser testing helps teams compare Figma designs against live pages faster. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for figma overlay tool for browser testing when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Pixelay fits into the process

Pixelay matters in this workflow because QA breaks down when teams are comparing design and implementation manually. Overlay-based review makes front-end drift easier to spot and easier to discuss.

With Pixelay, teams can usually:

- catch visual drift before it ships
- make front-end QA more visual and less subjective
- turn design review into a clearer implementation check

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Pixelay](/pixelay/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If design QA is the recurring bottleneck, Pixelay is usually the best first move. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to embed Canva designs in Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-05-10T00:00:00.000Z
dateModified: 2023-05-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-embed-canva-designs-in-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-embed-canva-designs-in-figma-presentations-using-pitchdeck.md
---

# How to embed Canva designs in Figma presentations using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you how to embed designs from Canva directly into your Figma presentations using the Pitchdeck Figma plugin. 

To get started, all we need to do is go to your Figma file, click on the little "Resources" icon at the top, and if you search for "Pitchdeck" and click on the "Plugins" tab, you'll see Pitchdeck pop up. Just go ahead and click on that item, and you can then run the Figma plugin by either clicking this run button here or, I'd recommend, clicking on this more options icon over here and clicking "Save Figma Plugin." That's just going to save it to your Figma plugins list for easy access later. I've already gone ahead and done that.

I'm going to go back to my Figma canvas and right-click anywhere. I'm just going to go down to "Plugins" and go down to "Saved Plugins" and then click on the Pitchdeck item to run the Figma plugin that we just saved a second ago. If you're new to the Figma plugin, the way that it works is it basically treats any frames that are directly on your Figma page as slides. You can create these frames at 16x9 ratios normally – these ones are at 1920 by 1080 – and then you can just go ahead and put in any content layers that you want. I've got text layers in mind; I've got some images in mind, and then in the Figma plugin, it'll load those frames up as slides, as you can see here, and then you can do things like add animations and embeds and links and things like that onto the slide layers too.

For today, I'm just going to be focusing on how to embed a design from Canva. Canva.com is basically a popular design platform that allows you to design things like websites, documents, and graphics using their own platform interface. It's separate from Figma, but you might want to design some assets or websites in Canva and then embed those into your Figma presentation. That's what we're going to be doing today. I've basically got a design here, which is just a little portfolio site created in Canva. If we open that up, you'll obviously have a different type of design, but the interface should look very similar.

The way that we can embed this into our Figma presentation is we need to go up to the right-hand side here in the top and click on this share icon. If you click on share in Canva and then go down here, you'll see that there's this little "more" option at the bottom of the share pop-up. If you click on more, that will give you a range of extra options for publishing or sharing the embed, and the one we want to go to is this one down here called "Embed" with the little code icon. If you click on embed, it's going to ask you if you'd like to enable the embeds. This is a really important step; this is going to tell Canva that you want this design to be embeddable on other websites. We're going to go ahead and do that. I'm going to click on this embed button, and this is going to make the design public. You can read a bit more about that if you want, but we need to click on this embed button here. I've just clicked on that now, and it's telling us that our embed links have been created.

We basically created the embed; it's now live, and now what we need to do is go down to this second link here called "Smart Embed Link." That's the one that we want, and it's going to look like this, as you can see here. Just go ahead and click on the copy button. I'm going to click "copy"; that's just going to copy the Smart Embed Link from Canva to my clipboard. Now, I'm going to go back to Figma, and I've got a slide set up over here in my designs in Figma. I've got a placeholder, which is basically this gray rectangle frame here; it's just a normal rectangle frame, and that's just a placeholder frame that I'm going to add my embed into.

If you select that slide in Pitchdeck and then click on the Embeds tab (by default, it's on animations), find that slide, and I've just got the slide here, I'm going to click on that input and paste it. I'm just going to click "paste," and you can see here when I paste the Canva embed link that we copied into the input field for that embed layer, it's basically gone ahead and embedded that Canva design directly into my slides. That's pretty cool; that means we can now interact with this directly in the presentation. I can skip through these frames from Canva and have that show up in my presentation.

You might want to adjust the aspect ratio of that as well. If you've noticed that there are these lines on the side, that's because the aspect ratio is probably a little bit off. You could tweak that. If you just tweak the width of that and refresh, you'll be able to get that looking much better. It's really up to you what kind of size you create the embed; it's just going to be based on whatever the Figma layer size is, and you can basically just embed that as you like.

We've also got a little bit of a fade on there, so that's just going to fade in from the bottom when it gets introduced. We can extend that if we want to and see what that looks like. That's just going to add a little fade, and you've got all your Canva controls down here as well.

Now, if we actually want to present this to somebody, what we can do is go ahead and click on the Export button in the Figma plugin. If you click on Export in the top right corner of Pitchdeck and then want to make sure that the "Pitchdeck Presentation Web URL" option is selected. There are a few different options; you can export to PowerPoint or PDF, but the Canva embeds are only going to work in the Pitchdeck web presentation URL. I'm going to select that, and I'm just going to go down here, and I've already created one; it'll say "Upload Presentation" if you haven't created it already. I'm just going to click on "Update Web Presentation," and that's going to export all the slides for me and upload those to the Pitchdeck web presentation format.

This is going to give us a link, so it's going to give us either a URL with a separate password that you can send to the person you want to share the deck with, or you can click on this "Passwordless URL," which will automatically log them in without needing a password. I'm just going to use the passwordless URL option for today. You can just go ahead and click on this Passwordless URL link or copy it to your clipboard. I'm just going to click on the link for now and open that up in the browser, and you can see once it loads the presentation, you'll have all your slides in there, as you'd expect.

We've got a few different slides here with normal content, and then our fourth slide is our Canva slide. If we click on slide four, you can see that it's now loading up our Canva portfolio site that we included as an embed. This is inside of our presentation, and we can click through that now as if it was a native embed of that Canva presentation, which it is. We can basically treat this as if it was a normal Canva link that's been embedded in the presentation. You can do everything that you'd normally be able to do with the live embed link, but you can do that all inside of the presentation itself.

This is a really nice way of embedding things like portfolios, websites, documents, or anything that you've created in Canva. You can embed it into your Figma presentation that you give using the Pitchdeck Presentation Figma plugin and web app. That's basically what it looks like; you can apply this to any of your Canva designs, as I mentioned. You just have to go through the same process: click on the Share icon, go down to "More," then click on the "Embed" button, and just make sure the embeds are enabled. If you do want to unpublish that, you can click on "Unpublish this design," and that's basically going to unpublish the embeds. If we now refresh this presentation, that's not going to load up the embed that we created. You can see here it says it's forbidden because we basically disabled embeds.

You've got control over that; if you want it to show up, you obviously have to click "Embed" and publish that as a live embed, and then that will work when you copy that embed URL. You can see here it's back because we just enabled it again, and that's what that looks like there.

In summary, you just have to enable the embeds, copy the Smart Embed Link, and paste that into Figma into the Pitchdeck Presentation Studio Figma plugin, and you'll be good to go. We'll leave it there for today. I just wanted to give you a quick run-through of how Canva embeds can work in the Pitchdeck Figma plugin. If you've been wondering how to automatically embed live Canva designs into your Figma presentations, this is a really quick way of going about it.

I hope that helps if you've been wondering how to use Figma with Canva in your presentations. Feel free to give Pitchdeck a try, and I hope that it works well for you. We'll leave it there for today; thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add hover colors to text links in HTML emails from Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-05-09T00:00:00.000Z
dateModified: 2023-05-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-hover-colors-to-text-links-in-html-emails-from-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-hover-colors-to-text-links-in-html-emails-from-figma-using-emailify.md
---

# How to add hover colors to text links in HTML emails from Figma using Emailify

#### Video Transcript

Today, I'm going to be showing you a Figma tutorial on how to add hover states to text links inside of your HTML email designs in Figma using the Emailify Figma plugin. 

To get started, go to your "Resources" icon at the top of your Figma file and click on that. Search for "Emailify," and under the "Plugins" tab, you'll see Emailify pop up. Click on the Emailify results and run the Figma plugin by clicking on the run button, or I'd recommend clicking on the small options icon and saving it to your Figma plugins list for later.

I've already done that, so I'll go to my canvas. Right-click anywhere, go down to "Plugins", then go down to saved plugins and click on Emailify. That's going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, it allows you to design HTML emails in Figma and then export them automatically to HTML. I won't be going through the design process or the other components in the Figma plugin today. You can find detailed tutorials on the channel if you check out the Emailify playlist. Today, I'm going to assume that you've already got your design ready, and you want to style inline links and their hover states. I'll show you how to change the color of the links on hover.

First, to add links to a text layer, select your Emailify text layer and highlight the part of the text you want to link. For example, if I wanted to link this highlighted text, I can highlight it and click on the create link icon in Figma. That will give me an input to paste or type in a URL. I'll type in google.com, and you can see it adds a link to your Figma layer. You can add links wherever you want, to different text layers or multiple links per text layer.

Now we've got two different links, and you can see when I preview the HTML in the Figma plugin by clicking on the preview icon, we've got our links in their default state. To add a hover state to those links, click on the text layer you want to add hover styles to, and in our Figma plugin, we've got this HTML and mobile settings button. Click on that, and at the bottom, there's a box called "Links Hover State" with an input field to paste in a text links hover color. Whatever we put in there will become the hover color when we hover over it in the HTML.

I want to make this orange, so I'll click on this layer with a saved color and copy the hex value to my clipboard. With the text layer selected, paste that into the input field and add a hash. Now preview that again, and you can see when we hover over it this time, we've got an orange hover color being applied. We can also add a slight fade transition. Check the "Fade Transition" checkbox in the settings panel, and refresh the preview. You'll notice the hover effect has a slight fade transition, which is optional.

The other type of layer we can apply these to is navigation layers. With Emailify, you can add navigation components, which are rows of link layers. You can add different links with URLs on them. If we open up the settings panel with one of these link layers selected, you can see we've got a clickable link URL property. We can paste in links into each of those layers to make them clickable links in a row navigation style.

If we want to do the same thing for these types of links, which are different from the Figma links, click on the navigation layer, the parent layer for these link components. With the navigation layer selected, click on the "Links Hover State" input again, paste in the hex value, and put that in there. Refresh the preview, and you'll see that all of these links now have that hover color. We've got them all changing color at once, even though we only applied it to one layer. This is a nice way of applying hover styles to the navigation component if you're using that in your email.

Again, you can use the same fade transition on that one too. You'll notice that with the other text layer, because we haven't added any hover styles, those are just defaults. It's clickable, but it doesn't include the hover style. One small caveat to understand is that there's a link that will take you to a webpage with a list of supported email clients. Click on that link, and it will open up a new page in your browser, giving you a breakdown of which email clients and devices support these hover styles.

You'll notice that some clients will support it, like Apple Mail and Gmail on desktop. However, mobile devices generally won't support it because there's no hover state on mobile. Also, with Outlook on desktop, you're going to get little to no support on Windows. You might get some support on macOS, but as far as Windows goes, you're probably going to have a rough time getting hover effects to work. It's worth being mindful of and thinking of it as a progressive enhancement rather than something that's being relied on. Include it as a nice-to-have feature if the email client supports it.

That's it for today. I covered button hover effects in a different tutorial, so if you're interested in applying similar hover effects on button components, you can check out the other tutorial. For now, I'll leave it there. If you wanted to know how to add hover states or change the color of your links and inline links on text layers, this is an easy way to do it using the Emailify Figma plugin. Feel free to try it with your team.

As always, thank you for watching. We'll be back soon with more Figma tutorials like this one.

---

---
type: tutorial
title: How to embed website iFrames in Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-05-08T00:00:00.000Z
dateModified: 2023-05-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-embed-website-i-frames-in-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-embed-website-i-frames-in-figma-presentations-using-pitchdeck.md
---

# How to embed website iFrames in Figma presentations using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you how to embed websites as iframes in your Figma presentations using the Pitchdeck Figma plugin. 

To get started, all you need to do is go to your Figma file and click on this little "Resources" icon at the top of the file. If you search for Pitchdeck under the "Plugins" tab, you'll see Pitchdeck pop up. If you just go ahead and click on that item, you can run the Figma plugin by either clicking on this run button here or, I'd recommend, clicking on this more options icon over here and clicking "Save Figma plugin." That's just going to save it to your Figma plugins list for easy access later. I've already gone ahead and done that.

I'm going to go to my canvas and right-click anywhere, just go down to "Plugins", then go down to "Plugins" and click on the Pitchdeck item. That's just going to run the Figma plugin that we saved a second ago. If you're new to the Figma plugin, the way that it works is it basically allows you to add different frames to your Figma file, and those get treated as slides. You can see here I've got a bunch of different frames; these have all got different content layers in them. Inside of the Figma plugin, you've basically got those slide layers show up on the right-hand side here, where you can add things like animations, embeds, links, and all those good things that we'd want to add into our presentations.

For today, I'm just going to be focusing on how to add websites as iframe embeds into any of your slides. We're going to do that by creating a slide with a couple of placeholder layers. You can see here I've got two placeholder layers; I've got a placeholder layout rectangle for a small screen and a large screen. I'm going to embed a website URL into both of them. The way we can do that is we just go to our embeds tab. With the slide selected, go to the embeds tab over here in the Figma plugin, and that's going to allow you to paste in a URL to embed into those different layers.

For today, I'm just going to be using Wikipedia as an example. If I wanted to add a Wikipedia article about data Rams, I can do that by copying the URL from my browser, and then in each of these placeholder frames, I'm just going to paste in that URL. That's basically going to embed the link as an iframe. Don't be too worried about the overflow that's happening here; the reason for that is because the Figma plugin window is quite small, and it's loading in this iframe in the small preview. It's going to look a bit funny, or it might load up the mobile version, but we can see what that looks like on the large screen if we now export this presentation and present it in the browser.

The way we can do that is just by going into the Figma plugin header and clicking on the export button. Then, if you just make sure that the Pitchdeck presentation web URL format is selected, there's a few formats you can select for exporting. The embeds are not going to work for things like PowerPoint files or PDFs, so if you want to use these website embeds, you've just got to make sure the Pitchdeck presentation option is selected. Then, you can click on the "Upload Web Presentation" or "Update Web Presentation" button here, and that's just going to export all of the slides in your presentation to the Pitchdeck web app. We're going to be opening up that URL in a second, and I'll show you what that looks like now.

We've got our presentation ready, and you can either copy the URL down here, so this one doesn't need a password, or you can share the password separately with the URL. Today, I'm just going to be clicking on the passwordless URL and opening that in the browser. Once that loads, you'll be able to see that we've got our presentation here, as we expect. We've got a few different slides, but we've got our fourth slide, which is the website embed slide. If I click on that now, you can see that we've got our Wikipedia article embedded directly into the page. We're able to basically interact with this website as if we were browsing through it on a different tab, but we've got it added directly into our Figma presentation. I've got two on mine; I've got a desktop and mobile version, so you can see here the mobile version of the site and the desktop version side by side.

This could be really handy if you're presenting a website that's in progress. Let's say you're an agency and you're presenting work in progress or final live versions of a website that you've developed for your clients; you could compare a website for mobile and desktop next to each other in a slide and go through different pages of that website dynamically in your presentation to them. The one caveat with this is that it will only work if the website doesn't have a cross-origin policy on it that blocks the website from being embedded in other URLs or other websites. For Wikipedia, it's fine; for some other websites, that'll be fine, probably for your own websites as well, it'll be fine. But if you try to embed sites like Google, for example, that's probably not going to work.

We can just try that now. If we try to add google.com, you can see here that it's basically just giving us a white frame, and the reason for that is that there's a cross-origin policy on a site like Google which basically tells other websites that if you try to load their website in through an iframe on a different domain other than Google, then it's going to not let you do that. It might be for security reasons or privacy reasons, but in this case, Google is not going to be embeddable into your presentation, and there's going to be quite a few websites that have that policy because they don't want their content or their service or site embedded on different domains, so they'll block it. If that's the case, there's nothing you can really do about it, unfortunately.

For your own websites or websites that you're developing or want to share with clients that you own, this is going to be pretty simple. You just make sure that there's no cross-origin policy that's blocking iframe embeds, and you'll be able to embed your links directly in there and view those websites directly in the file. As I mentioned, you can basically change this around as well. If we didn't want a mobile version, we just wanted a larger desktop one, you can just resize your Figma frame, and now you've got a full-width embed. The embed is basically just the same size as whatever you decide to include your Figma file or Figma layer as, and you can now update that.

If we want to update this in our presentation, you can basically just re-upload the presentation through the Figma plugin, and once that's done, we can just go back to our presentation and refresh it. If we jump back to our tab, refresh that, and once it loads, we can click back into our frame, and you can see down here that it's been updated, and now we've just got the larger width version of the website embed
. That's looking really good. If you wanted to just do a full screen one, you could even make it the entire size of the frame, so you could make it full screen, and that would also be totally fine. I'll just do that as a last example, and once that updates, I'll just refresh it again. We'll update that again, refresh it, and now we should have a full screen embed.

You can see here that the embed is totally full screen now, so that's basically just taking up the entire size of the slide, and you can navigate that however you want. You can obviously interact with this embed as well, so we could go to different pages in the embed and click around, and that's going to function the same way as a normal website.

So, yeah, that's basically it. I just wanted to show you a really quick example of how to use Pitchdeck for embedding website URLs. Ideally, website URLs that you own or presenting to clients is probably the best way to go. And there's also a whole bunch of other supported embed formats as well. There's a bunch of official embed formats that are supported, so if you click on this little "More embeds" link in the Figma plugin, it's going to open up the Pitchdeck documentation page, and you'll be able to see all these different platforms that are essentially supported. You can embed things like Figma designs, Canva designs, Loom, Lottie files, Google Docs – these are all official embeds that you can add as well. Feel free to go through that list as well if you want to embed other kinds of content besides websites, as we've just had a look at today.

As always, thank you for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add hover effects to buttons in HTML emails from Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-05-07T00:00:00.000Z
dateModified: 2023-05-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-hover-effects-to-buttons-in-html-emails-from-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-hover-effects-to-buttons-in-html-emails-from-figma-using-emailify.md
---

# How to add hover effects to buttons in HTML emails from Figma using Emailify

#### Video Transcript

Today, I'm going to be showing you how to add interactive hover states to your HTML email designs in Figma using the Emailify Figma plugin.

To get started, all we need to do is go to the little "Resources" icon at the top of your Figma file. If you click on that and search for Emailify, under the "Plugins" tab, you'll see the Emailify Figma plugin pop-up. All you need to do to run the Figma plugin is either click on this "Run" button here, or you can click on this little "More options" icon here and click on the "Save Figma plugin" link, and that's just going to save it to your Figma plugins list for later. I'd recommend doing that, and I've already gone ahead and done that myself.

I'm going to go to the canvas, right-click anywhere, and go down to "Plugins", then go down to Saved Plugins and click on the Emailify item. That's just going to run the Figma plugin that we saved a second ago. If you're new to the Figma plugin, the way that it works is it basically allows you to design emails in Figma that can then be automatically exported to production-ready HTML. I'm just going to give you a really quick example of how to do that. We can just add an email here; I'm going to call it "My Email with Hovers" and add the new email iframe container. Then I'm just going to go through and add a handful of components to the email.

I'm going to click on this one, add in a logo component, then go to the CTAs and add a CTA component. We can update our buttons and maybe just add another button component as well. If we scroll down and add another component with a button down here and I'll just drop in a footer as well. We've got that in there.

Okay, that's basically the most simple example I can show you. If you want to go into detail of how to actually design the email components and design the emails, there's a couple of other really detailed tutorials on the YouTube channel. Just find the Emailify playlist and jump into those. But today, I'm just going to assume that you've already designed your email, and all we're going to be doing is adding some hover states to these button components here.

Let's go ahead and do that now. Basically, if we preview this at the moment and generate an HTML preview, you can see here that the buttons are clickable, we've got the little cursor there, but they're just static, they don't have any hover effects on them. To add some hover effects, what we can do is basically go to the HTML and mobile settings button. If you click on HTML and mobile settings in the header of the Figma plugin, that's going to open up this little panel here, and basically, that changes depending on what layer you've got selected. You can see here the context is changing based on the layer that we select.

In this case, we want to make sure that we've got a button component selected. This button component has to have been added through Emailify; it's not going to work if you've just manually created a button. You need to add this button through Emailify, so you can either do that, as I mentioned, by clicking on one of these components or you can use the quick add options at the bottom of the Figma plugin. If you've got a layer selected that lets you add some elements, you can add a button layer through that, so you could add a button like that and drop in a button and that will add an Emailify button component.

I'm just going to assume you've already got that figured out, and to add a hover state to that component, all you need to do, as I said, is click on the HTML and mobile settings, and you'll see down here we've got this button hover state section added. What that lets us do is change the background color and text color of the button in a hover state and also add an optional transition, so we can add transition animations as well. I'll show you what that looks like right now.

If we know we want to change the hover state of this button to be matching this little sushi icon here, what we could do is find out what color that is. I'm just going to quickly grab a color picker and find the hex value of that color. I'm just going to click on my icon, grab that hex color, and copy it to my clipboard. If I now click back into my button layer, what I can do is paste that directly into the hover input here. I'm going to paste that into the background hover and add a little hash in front of it, and then I'm going to add a hex value to the text color as well, so I'm just going to make that white, so that's hash FFF to make it white.

Now if we close off that settings panel and jump back into our preview and hover over that button, you can see here that we've now got a hover state added. When we hover over that button, it's using the hex value for the background and the text that we added into the Figma plugin settings, and it's using that for the hover state, so that's pretty cool.

The other thing we can do, as I briefly touched on, is go back into the settings panel. You can access it through this little settings icon if you've got the preview open. I'm going to click on it again, and this time I'm going to also add a transition. We can change it from none to fade, for example. If we click on fade and load that up, if we now hover over the layout, you can see here that it's doing a fade effect on the background color and the text color. Instead of just an instant jump, it's letting us fade between those colors.

We've got some other options as well. If we want to do some motion, we can add something like a grow animation. If we click on grow and refresh the preview and then hover over it, you can see that we've now got a grow effect along with the color effect that we added in those inputs. That's what that looks like, and you can go through these and experiment with them. There's a whole bunch of them, so there's a bounce one, so you could add a more of a bouncy effect if it's a really important CTA. You can make it a bit more impactful with an animation like that, but it's really up to you to go through those.

You can go through those individually. We've got another one down here, obviously, that's a little bit different. We've got our button with the black background and white text, so we could make that inverted, so we could make that go to white background with black text, for example, and add a fade onto that. If we now refresh the preview, you can see that when we hover over this, it's basically just going to change that to be inverted.

A cool thing that you can also do is add a stroke to that. If we wanted to make sure that the background automatically had a stroke around it when we invert it on hover, you can add a stroke to your button layer in Figma. If we add a stroke layer, I'm just going to make that two pixels and have it as black, and then now, if we refresh this preview and go down to our button, you can see here that when we hover over it, the stroke stays the same, and the background is getting knocked out to white. That's a nice way of adding a stroke into the mix if you wanted to make sure that it kind of knocks out the background but keeps an outline. You can just add a stroke there, and that's going to look pretty good as well. That's a nice little trick if you want to make it into more of a ghost button type style. You can play around with the stroke settings in Figma and see what that looks like when you swap out the hover backgrounds as well.

Yeah, that's basically it. I was just going to keep it really simple today just to show you the basics of how to add hover effects onto your buttons. This is a really easy way to go about it. You can play around with the effects, as I mentioned, there's a whole bunch of different ones that you can play with. This is more of a rotation one, but yeah, those are the three different options you've got. You've got the transition, text color, and background that you can play with, as I mentioned, just for the button components. This won't work for other components; you just have to make sure that you're using a button component for these options to show up.

The other important caveat is that the hover effects are only supported in certain email clients. So if you want to get a list of those, you can click on this "supported email clients" link here. If you click on that, that's just going to open up a link in your browser, and it's going to give you a detailed overview of where the hover effects are supported. For example, it's totally supported in Apple Mail on macOS and iOS; it's supported in Gmail on desktop, but it's not supported in Gmail on iOS or Android. You'd expect mobile devices not to support hover anyway, but yeah, there are a few little caveats down here that you can look at.

Outlook, obviously notoriously bad at supporting anything, so on Windows Outlook, it's not going to work, but on macOS, it will. You can just go through these and figure out where the hover effects are going to work and where they're not going to work. That's just a little caveat to show how you can use the hover effects as more of a progressive enhancement rather than a critical piece of the style. It's more of just a progressive enhancement where it's supported. If it's not supported, it's just going to work normally; anyway, you're not going to get any hover effects, but you can still click on the button as you'd expect.

We'll leave it there for today. I just wanted to run through that really quickly with you. If you've been wondering how to add hover effects onto your HTML emails from Figma, this is going to be a really easy way to go about it. And finally, just briefly, if you did want to export this to HTML from the Figma plugin, you just have to click on this "export HTML" button here. If you just click on the HTML email option or any of the platform integrations you want to use, you can basically just pick whichever one suits and click on "export to HTML." That's just going to generate the HTML for your email. You can download that to your computer as a zip file. I'm just going to click "download zip file," save that to my desktop, unzip that file, and now if we open up the folder, you can see here we've got our export here.

We've got a previous file and the HTML file. If we just drop that previous file into our browser, I'm just going to drop that into here and load that up, and you can see here that the hover states are showing up in the preview as well. We can open up the email itself just by going into the folder with the same name, dropping the index.html file in there. This is basically the final HTML with the hover effects that we added in the Figma plugin, and they're working really nicely as we'd expect. You could now go ahead and send out that email and have those show up in the clients that we looked at a minute ago over here.

So, we'll leave it there for today. I just wanted to run through how to add those hover effects to your HTML emails from Figma using Emailify. If you're using Emailify and have been wanting a bit more creative freedom on your CTAs or CTA buttons, you can now add these hover effects as we just went through in the Figma plugin. I hope that adds a little bit more flexibility and creativity to your HTML email designs. Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add UTM tracking code to HTML email links from Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-05-06T00:00:00.000Z
dateModified: 2023-05-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-utm-tracking-code-to-html-email-links-from-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-utm-tracking-code-to-html-email-links-from-figma-using-emailify.md
---

# How to add UTM tracking code to HTML email links from Figma using Emailify

#### Video Transcript

Today, I'm going to be showing you how to add UTM codes to any links in your emails that are exported from Figma using the Emailify Figma plugin. 

To get started, all we need to do is click on this little "Resources" icon at the top of your Figma file. If you click on that and search for Emailify, and under the "Plugins" tab, you'll see Emailify pop up. If you just go ahead and click on that result, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this "More options" icon here and clicking "Save Figma Plugin." That's just going to save it to your Figma plugins list for easy access later.

I've already gone ahead and done that, so I'm going to go to my canvas, right-click anywhere, and go down to "Plugins", then I'm going to go down to "Saved Plugins" and click on the "Emailify" Figma plugin. That's just going to run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically allows you to design and customize emails in Figma that can then be exported out to HTML automatically. I'm not going to go through the whole process of how to design and customize the emails in this tutorial. If you want to jump into that, I'd recommend checking out a couple of other in-depth tutorials on the YouTube channel. If you just go to the Emailify playlist, you'll be able to find those pretty easily.

Today, I'm just going to be assuming that you've already got the email design the way that you want and you just want to add some UTM parameters to your links throughout the email. I'm just going to go through a handful of different scenarios that you might use to add some UTM parameters to your links in your email, and I'm just going to run through those with you now.

For example, if you know that you want to add a certain UTM code (a UTM code basically looks like this: it's a little question mark with a bunch of parameters that you can add to a link), let's take this one from this campaign monitor vehicle as an example and add that to one of our CTAs. Let's just click on this button layer here, and we can add a link to that by clicking on the HTML and mobile settings button in the Figma plugin. I'm going to click on that, and with my button layer selected, I'm just going to paste that into the clickable link URL field here. That's basically just going to automatically add the UTM parameters to my button.

So if I were to click on this here and click on my button URL, it's going to open up a link in the browser. You can see here that we've got this UTM parameter up in our link here. That's automatically added. That's the simplest way of adding UTM links into your links in your HTML emails from Figma. You can basically just include it in your link and paste it into the clickable URL field here, and that's going to be a really simple way of going about it.

But the trouble comes if you've got a dozen or more links that you want to add these parameters to, and you don't want to go through everyone separately and add those in. What you can do is also add this as a global tag. So, if we take out that UTM parameter here, I'm just going to remove that, leave the link in there, and close that for a second. I'm also just going to add a link to this other CTA here, so I'm just going to add another link here. We'll do another example link, so we'll just do example.com and drop that in there. In this case, I basically want to make sure that both of those links automatically contain a UTM query parameter string. In that case, what I can do is go back to my HTML and mobile settings. I'm just going to click on this little settings icon here and select my Emailify frame, which is the email frame layer at the very top of the file. That's where the Emailify components get added. If you click on that with the HTML and mobile settings panel open, you can see that we've got this option called "Append global URL query string." You can see here that it's got a little example showing a UTM parameter that looks very similar to the one that we just copied.

What we can do is paste in a global string or a global query string that we can paste in here, and that's basically going to automatically append this to any links that are detected in the email. We can have this in one place, so we can just add it to this global query string input here with our Emailify frame selected, and that's automatically going to add whatever's in this query string to every link.

Now, if we close off that settings panel and go back to our links, if we now click on the "learn more" link here, for example, you can see that it's automatically including that query string into that button, even though we didn't include it to the button itself. We can confirm that by just jumping back to this button layer, and you can see it's still set to example.com without a query string or the UTM parameters, but when we preview it and click on it, it's automatically getting that global UTM string added in.

That's pretty cool because it saves us a bit of work applying that to every single button in our design. We can set that from here. The other cool thing we can do is actually add overrides to each of those buttons. For example, if we want to get the item Source, or the UTM content, we can take out the UTM content from the global string. We'll remove that, take that out of the global setting, and instead, we're going to apply that to the other CTAs.

If we click on this button here, open up the settings panel, and add that back onto this clickable link URL, I'm just going to add a question mark, paste in my UTM parameter, and change the UTM content value to "hero" because it's in our hero block. I'm going to copy that again and add it to my other button down here. In this case, I'm going to paste that in there and change the UTM content value to "split" because it's in this split block component and close that off.

Now, if we go ahead and click on that button again and open it up in the browser, you can see that we've got all of the global UTM parameters, along with our UTM content override, which is this UTM content equals "split" and also the UTM content equals "hero" automatically getting added into the string along with all of the other ones.

That's a really nice way of pre-populating globally all of these UTM parameters, but then, if you know that you need to add a UTM content parameter per block, you can add that in there per link, and that's automatically going to get included along with the global one. You can have the overriding ones globally, which you can easily do over here, as we just saw, and then if you need to change those at any time, you can do so.

That's a really easy way of managing your UTM parameters in your email links. You can basically just go ahead and set that globally, override them locally if you need to, and that's going to be a really quick way of managing them for your different emails.

The other thing you can do is also just add normal links. If you wanted to add a link to some text, we can grab, for example, one of the links that we just added. I'm just going to grab this one here and add this to my link text. If we highlight some text layer content and then click on the little link icon in Figma and click "create link," we can then paste that in there and again change this to be "paragraph," for example. We'll just change the UTM content at the end of that to "paragraph," and now you can see here that we've got a link added to that text layer. If we refresh the preview, you can see that it's now converted into a link, and again, if we click on that now, it opens up with the parameters included.

This applies to any links that are inside your content; it's automatically going to append that into the URL. I just wanted to cover that use case as well in case you're wondering if it worked for normal Figma links – it'll do that as well.

So, we'll leave it there for today. I just wanted to go through that really quickly to show you how to add UTM parameters into links using Emailify. This is a really quick way of going about it, especially using that Global setting. That's going to be very helpful if you need to do that for different newsletters or different campaigns. You can basically just add that one time, and it's going to automatically populate those links in one go to all the links in your email.

And of course, if you need to then export that out to HTML when you're done, you can just click on this "export HTML" button here, export that out to HTML or whatever platform you need to integrate it with. You can jump into those options, export it to HTML, and then, in this case, I'm just exporting it to an HTML zip file. I'm going to download the zip file to my computer, save that to my desktop, and open up the zip file. If we open up that folder now, you can see that we've got our email with all of our images and HTML.

If we drop that into our browser, you can open up the preview, and that's what it's going to look like there, with our links included and our UTM tags working as expected. So that's basically just the final step if you do want to export it to HTML – you can do that really easily.

Let's leave it there for today, and I hope that helps if you've been wondering how to add UTM parameters or query strings into your HTML emails from Figma. This is a really nice way of going about it. Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add custom categories for Figma email components using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-05-05T00:00:00.000Z
dateModified: 2023-05-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-custom-categories-for-figma-email-components-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-custom-categories-for-figma-email-components-using-emailify.md
---

# How to add custom categories for Figma email components using Emailify

#### Video Transcript

Today I'm going to be showing you a Figma tutorial on how to create custom categories to organize your email components in Figma using the Emailify Figma plugin.

To get started, if you just click on the little "Resources" icon at the top of your Figma file and search for Emailify, and under the "Plugins" tab, you'll see Emailify pop up. All you need to do to run it is click on the Emailify item, and you can either click on the "Run" button here, or I'd recommend clicking on this "More options" icon here and just clicking "Save Figma Plugin." That's just going to save it to your Figma plugins list for easy access later.

So, I've already gone ahead and saved that Figma plugin. I'm just going to go to my canvas, I'm going to right-click anywhere and go down to "Plugins," then I'm just going to go down to "Saved Plugins" and click on the Emailify item, and that's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way it basically works is it allows you to design emails in Figma and then export those out to HTML automatically. So, you can do this by using some of these starter components, or there are some other tools that you can use in the Figma plugin to help design. I'm not going to be going through all of those features today; there are a couple of other detailed tutorials on the YouTube channel if you want to check those out. Today, I'm just going to be assuming that you've already gone through those and understand how it works, and we're just going to be organizing some of these components into custom categories inside the Figma plugin today.

To get started, all we need to do is go over to the right-hand side here of the Figma plugin and click on this little Library icon. That's just going to load up the Emailify component Library tab, and what this tab does is it basically goes through your Figma file and looks for any Emailify components that already exist. So, in this case, I've already added a few components from the starter categories over here. So, for example, we can add any of these categories by just clicking on them. So, if you wanted to add a split block, for example, you could just add that, and that would add it to the page.

So, you can see here it's just added this little component here, and we can customize that and then drag it out of the email into its own little component library and start adding those to our page. To see those in the Figma plugin, you just again go to this little Library icon and click on the "Load all Emailify components" button, and that's just going to go through and load up any of the Emailify components that it finds in your current Figma file. So, if you want to use these, you can basically now add those to an Emailify frame. So, you can just click on your Emailify frame and add any of these components with one click just like that.

So, to categorize these to make it a little bit easier to sort them out in your interface, what we can do is click on this little edit icon. So, this little pencil icon here, I'm just going to click on that and I'm going to create a new category. In this case, I'm going to create a category called "Footers." So, we can add a "Footers" category, create that as a new category, and you can see when I add that new category, we've now got this interface popping up here where we can actually move some of our components into different categories. So, we can see we've got all of our components listed here, and we've got the categories that we can move them into. So, I can add a couple more. I'm just going to add a "Headers" category and another category for "Hero Blocks," so I'm going to call that one "Hero." Again, just click on "Create new category," and now we can start moving some of these components into our new custom categories.

For example, we want to move this footer component into the "Footers" category, so I'm just going to click on that category there and click on "Move components," and that's just going to move the component into that category. So, you can see here, the "Footers" category now has our component in there, and we can go ahead and do that for our other components too.

If we click on our "Uncategorized" tab just to see which ones don't have a category yet, we can now move some of these out as well. So, we can move our hero blocks into the "Heroes" category, so I'm just going to click on "Hero" and click "Move components," and you can see those have now been added into the "Hero" category, and the other uncategorized ones are in here. So, we could add the logo to our "Headers" category, going to click on that and click "Move components," and that's basically added that there.

Now, if we go back into our listing, I'm just going to close out of this little pop-up, and you can see here at the top, we've now got multiple category tabs that we can tab through. So, I can add the hero block, I can go to "Headers," I can go to "Footers," and this is basically now categorizing all of the components that we had listed here into subcategories to make it easier to find things. So, we can see we've still got one that's uncategorized, which is just this one here. So, we could go back into our categorization panel, click on the little pencil icon, and create a new category for that one. So, we could call that one "Content" and just add that as a new category, and then we can move that one into our new "Content" category like that. And that's basically going to remove the "Uncategorized" category because there are no other components that haven't been categorized, and now we can just see we've got our categories that we've added as custom categories here, and you can see all those in there.

So, that's a really quick way of sorting your components that you've created in Emailify into custom subcategories just to make it a bit easier to find things in the Figma plugin. And you can also delete these categories as well. So, let's say we wanted to delete a category. You can just go down here to "Remove category," select a category to remove. So, in this case, I'm just going to remove the "Hero" category and click that, and it's just letting us know that this isn't going to delete the components. It's just going to delete the category. So, if we now remove this "Hero" category, you can see here that our hero components are now uncategorized, and the "Hero" category has been removed. It hasn't removed our actual components; it's just moved them into the "Uncategorized" category again. And so now we can basically recategorize those if we wanted to. So, we can select those hero components and drop them in the "Content" category and click on "Move," and that'll pop those in there, and you can see they're now in the "Content" column or "Content" tab instead of the "Hero" tab. So, yeah, that's basically what that looks like.

You can customize these to be whatever you want. You can have as many tabs as you need and move all those around. So, it's really up to you how to organize that with you and your team. And the other cool thing you can do is also tag these with extra descriptions and documentation links. So, for example, if we wanted to add some documentation to this particular hero component, you can basically click on the component layer in Figma and then click over here on the right-hand side, click on this little component configuration icon. And when you click on that, it's basically going to open up this little pop-up here in Figma. And so, you can now write a description of how to use this component. So, you could say, "Use this component for any CTA blocks at the top of an email design." So, we can add that in there. And we can also add a link to any documentation. So, if we've got an external documentation site, we could add a link to that in here. So, we could do, you know, docs.emailify.com, which isn't a real domain, but we could add something like that. And then you could have a hero page or something like that.

Once you've added that in there, and then if you go back to the Figma plugin and click "Refresh" on this little icon here, what that's going to do is it's going to automatically take that link. So, we've got our documentation link that we added, and it's going to add that over here onto the label for the component. So, if you were to click that link, that'll open up the web browser to the documentation page that you've set up here. And if you hover over the thumbnail, you can also see the description. So, we've got the name of the component, and then it's also giving us the description of how to use that component in the tooltip that automatically pops up when you've got the hover state added on the thumbnail. So, this one here doesn't have one, so you can see it's just got the name. But over here, we've got our description. So, that's just a really easy way to add a bit of context to your components to help further organize them as well.

So, yeah, that's basically it for today. As I mentioned, this tutorial is just a really quick one to go through the categorization. If you want to go through how to actually set up this component library and design it, there's another very detailed tutorial on the website on the YouTube channel. So, you can go ahead and find that one in the Emailify playlist. But for today, we're just going to leave it there and keep it pretty simple. And as I mentioned, if you do want to export these, you can basically just click on the "Export HTML" button and export those to HTML. But again, if you want to check out what that looks like, I'd recommend going through the other component library tutorial, and that's going to give you a much better description of how to go through those steps. So, we'll leave it there for today. Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: Pixel perfect QA process for websites
description: A practical website QA process for catching implementation drift before it reaches production.
datePublished: 2023-04-30T00:00:00.000Z
dateModified: 2023-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-pixel-perfect-qa-process-for-websites/
markdownUrl: https://www.hypermatic.com/articles/pixelay-pixel-perfect-qa-process-for-websites.md
---

# Pixel perfect QA process for websites

A practical website QA process for catching implementation drift before it reaches production. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for pixel perfect qa process for websites when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Pixelay fits into the process

Pixelay matters in this workflow because QA breaks down when teams are comparing design and implementation manually. Overlay-based review makes front-end drift easier to spot and easier to discuss.

With Pixelay, teams can usually:

- catch visual drift before it ships
- make front-end QA more visual and less subjective
- turn design review into a clearer implementation check

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Pixelay](/pixelay/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If design QA is the recurring bottleneck, Pixelay is usually the best first move. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to design a Figma component library for HTML emails using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-04-26T00:00:00.000Z
dateModified: 2023-04-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-design-a-figma-component-library-for-html-emails-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-design-a-figma-component-library-for-html-emails-using-emailify.md
---

# How to design a Figma component library for HTML emails using Emailify

#### Video Transcript

Today, I'm going to be showing you how to create a reusable Figma component library for your HTML emails in Figma using the Emailify Figma plugin. To get started, all we need to do is go to your Figma file, click on the little resources icon at the top here, and then if you just search for Emailify, you can either run the Figma plugin by clicking on this run button here, or I'd recommend clicking on this more options icon here and clicking save Figma plugin. That's just going to save it to your Figma plugins list for easy access later.

I've already gone ahead and done that. I'm just going to go to my canvas, right click anywhere, go down to "Plugins", go down to Saved Plugins, and then I'm just going to click on the Emailify item. That's just going to run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you to design emails that can be exported to production-ready HTML directly from Figma. So you don't need to do any coding. You can just design the email in Figma, and the Figma plugin will automatically take care of the code and export it to HTML for you.

The first thing that we'll need to do is just create a new Emailify frame. We can do that by clicking on this little input here and just giving it a name. So we can just call it "my email design" and click on the add new Emailify container button. That's just going to add a brand new Figma frame to your canvas.

It's worth noting that this is a special type of frame that will allow you to add different components and create custom components that you can then design out your email with. So, I just want to really stress that this Figma component library is only going to work if you design the components using the tools included in the Emailify Figma plugin. If you bring in components or designs or emails that you've designed separately, so if you've designed them prior or design them outside of the Figma plugin that you've just created in Figma, it's not really going to work. It's just going to get rendered as a flat image. It's not going to load in the rich content or the HTML that you'd expect. 

I just want to really stress that starting out, just in case you thought that you could bring in an email from the outside and render it as HTML. That's not really what this Figma plugin is designed for. But I'm going to go through how to design the components in here using the tool, so you can hopefully follow along and create your own Figma component library that's going to look really good when you export it to HTML. With that disclaimer out of the way, let's get started. We can get started by clicking on any of these tabs here. This is going to give us a bunch of different starter components, a lot of common layouts, and a lot of common components that we can use that will then be able to customize into our own library in a moment.

For example, you might want to add things like a logo and you might want to add things like a CTA. So we've got a little hero component here. Let's just keep it really simple for starting off with and customize these two components first.

To customize a component, we can just go in here and basically drop in our own content. So if we go to our images folder on our computer that we want to reference, we can do things like drag our own images into Figma and use those. For example, I might want to swap out this logo with my own. If I just scale down that image and drop it into my layer, I've basically got my component here.

It's really important to note the structure of these components. So, basically, you've got things like rows. Rows allow you to have multiple columns, and then each column can have its own stack of layout contents. For example, we've got an image here, so I'm just going to drag my image layer into the column, and that's going to allow us to remove the old image. Now, we've basically got our own image in here, and you can see when I preview the email in HTML, this is going to render this image here as a little image, and the rest of the content is in HTML as you'd expect. So, we can switch between phone view and desktop view, so we can get a sense of what that's going to look like. 

We continue customizing this now by doing things like swapping out images. So, we can swap out this hero background image with our own. We can jump in here, choose a new image, for example, so I might just want to drop in this background here. And of course, we can customize the content of this text layer, so we could remove what's already in there and just change it to something else. The same thing goes for this button, so we could say "try now". We can also, of course, change the font styles as well. You might want to change that to be medium, or you might want to change that to be medium italic or something like that.

It is worth noting that because these are HTML emails, the range of fonts that are supported on different email clients will vary. So it's best to try and stick to web-safe fonts where possible. But for today, I'm just going to be keeping it pretty simple and just keeping it as bold for now.

Now that we've got these two components set up, basically what we can do now is start expanding our Figma component library that can be used directly in the Figma plugin. What I mean by that is because we've got these two components in our design, we can basically now break these out into their own area. So, if we move these components up into here and just split those out from the actual Emailify frame, we can now basically load these in as a custom Figma component library in the Figma plugin.

To do this, click on the little component icon here, the little Figma component library icon on the right side of the Figma plugin. Click on that and then click on this "load all Emailify components" button. I'm just going to click on that now, and that's basically going to load up any Emailify components that are found in this Figma file directly into the Figma plugin. This allows us to use this as a custom Figma component library tab, similar to how we've got our different icons in here in these preset tabs.

We've now got a custom Figma component library icon over here that we can use to automatically load up any components that we've already added and customized in our Figma file. You can jump to the components by clicking on this little icon, and that'll let you easily see which component is where. But more importantly, we can now use these to populate any Emailify designs in our design.

If we go to our frame over here and click on this hero component, I'm going to click on that, and that's basically added it as a new instance of the component that we've got over here. For example, you can see that if we changed any of the styles in the original component, like changing the font size, that automatically gets inherited by the instance over here that we've used from the Figma component library.

The same thing goes for the logo. We can add our logo into the mix by clicking on the icon, and we can rearrange that. Because it's auto-layout, we can just drag and drop these around, and you can see how we can start building out our own totally custom Figma component library using the Emailify components.

Just to add a few more to help you see what kind of components you can add, we'll go to our images tab over here. Let's start adding a new component. I'm just going to add a new starter component here and drop that in. In this case, I might want to create a split image text block with my own content. So, I'm going to swap out this image over here. I'm going to go to the image, and I'm just going to go to my assets folder. I'm just going to drop in this character. I've got a character that I want to add; it's just a transparent PNG, so I can basically drop that into my Figma file. Again, I can drag and drop that layer directly into the column. We'll make sure that it's going directly into the column, and now we can basically resize that to be the size that we want.

I'm just going to put that in there. I'm going to change the alignment to center, and I'm just going to remove the other image layer that we had in there. Now, we can basically do things like adding a custom background image. So, if I don't want a solid fill, I can change that to be an image and drop that in there. And now, if we add another background, we could add this background image here, drop that in, and now you can see we're starting to get a bit of a background image with a foreground image layout happening. I can also rearrange this content, so I can drag and drop the columns around to swap those around if I want to. I can change the font style, so we can make that white, giving it a bit more contrast. And I can also do things like adding a transparent overlay onto the background. I can basically click on my row, go to the fills, add a new fill, and you can basically add a transparent overlay there to increase the contrast.

And now, if we load that up in our preview, you can see here, once it loads up, we've got our image text column, and if we look at that on desktop, that's what that looks like there as well. So, I'm pretty happy with that new component. We can go ahead and extract that component into our components over here. I've just broken out that component that we designed up here along with our other components. And again, if we go to the library tab and just hit refresh, so this little refresh icon here, that's going to load up the new component that we just designed and added to our components list as well.

I'm not going to build out dozens or hundreds of components with you today, but you can imagine what kind of other components you'd want to add. Maybe you want to add a footer component, a standardized footer component that you then customize. We could customize that to be the same color as our logo, so if we want to make that pink and then change some of the content colors down here, we could definitely do that and swap those in. So, we could make those darker, and that would be your custom footer component that you could then use for all your other emails as well. So again, I'll just break that down to here, and you can see we're starting to build out this Figma component library that can be reused across all of our emails.

For example, if we were to add a new email, just click on this little plus icon and create a new email. We'll call it "new email" and add that container. It's basically going to add a new Emailify container, and again, we can start adding our instances in here as well. We can add our logo, our content block, our footer, and another content block. I'll show you how to customize these as well. Now that we've got these added as instances, you can basically override the content of them in your different emails. For example, if I want to change out this character, I can just go into my image layer in the instance, click on the fill, and override that fill with a different image. I can just drag and drop a new image into here, and that's just going to swap out the image that we've got in our layer. I can change the fit of that, so if I want to make sure the image fits, I can just click on "fit," and that will scale it up.

I might want to add a bit more padding in my original design, so if we want to go back to our original component and click on the column, the best way to adjust spacing or heights or things like that is always to use the padding and item spacing. In the auto layout panel over here, you basically want to use the padding settings. We've got horizontal padding and vertical padding, so for example, if we want to add a bit of vertical padding to the top, we could add 20 pixels to the top of that column, and that will automatically add that spacing to any instances of that component as well. That's the way you really want to tweak it.

For example, over here, we've already got some vertical padding set on the logo component, so we could tweak that by just changing that in the settings in Auto layout. The same thing goes for item spacing. In our hero component, we've got some item spacing set, so we've got 16 pixels of vertical space between our items. We might want to increase that, which you can do by changing the value over here, and that's just going to increase or decrease the item spacing. You can also do this for columns as well. If you've got a column, you can change the item spacing between those elements and adjust it that way. You always want to rely on the auto layout settings as much as possible.

Doing things like setting heights, for example, won't work when it gets exported to HTML. It'll visually look like this in Figma, but if you preview that, you'll notice that the HTML content itself is what drives the height. So even though we've got this height set here, because the content of that column exceeds the height of that column, it's going to push that out anyway. What you want to do is always make sure that things like columns and rows are set to "hug contents" for their height. Click on "hug contents" and then use the padding to set the height of that element as you'd expect. Always rely on the padding and auto layout settings as much as possible. These auto layout properties are set by default when you create elements from the Figma plugin, but in case you've got some set heights as fixed accidentally, you can change those to "hug contents" and set them back to normal.

Now that we've got a few different components set up, I'm going to go through other ways that you can customize these. As I mentioned, you can do things like change the fills, swap backgrounds, and this is a quick way of customizing your instances that you've already got set up. The other thing you can do is add things like links. If we want to add links to buttons, you can do that by clicking on the HTML and mobile settings button, clicking on a button layer, and then you can paste in your clickable link URL here or adjust things like font size, alignments, padding, and other settings. You can hide things on mobile or show them on mobile, and these will depend on whatever context you've got selected.

In this case, I'm looking at a button layer. I might be clicking on a row layer, and that's going to give me a different set of options. I might be clicking on a text layer, which will give me another set of options again. So you really just want to go through and customize these layers one by one based on the HTML and mobile settings context.

So you can basically go through and customize these things on mobile. For example, you can add image alt text, so if you wanted to make this image have some different alt text, you can just paste that in there. Or you can do things like add a clickable URL to images as well. So I'd highly recommend exploring all of these different HTML and mobile settings properties just by clicking around on the different layer types that Emailify generates.

The other cool thing that we can do now that we've got our component libraries starting to be expanded a little bit is we can search. So if you wanted to just find all the Footers in your Figma component Library, you could search for a footer and it would bring up any results that match. Of course, you can also rename these layers, so if you wanted to rename a component, you can just go into your original component which you can easily jump to through the Figma plugin and rename it. So you could just do a rename to this layer, for example, and call it a standard primary footer. And if you now refresh your components, you'll notice that the result is updated to standard primary footer in here as well.

You can also sort your components. So by default, it's just sorted to the newest one added to Figma. So you can sort those from oldest to newest or newest to oldest. You can sort them by Figma layer name, so if you wanted to sort them alphabetically, you can do that. You can also sort them visually, so if you wanted to arrange the components on your page visually, you can do that. So we can just arrange these and then match that in the Figma plugin.

There's also a couple more ways of adding custom components to your Emailify designs. So the first one is to click on your Emailify layer, and you'll notice that there's a little pop-up called "quick add selected layer". You can just go ahead and click on this "choose element" option, and in this case, I'm just going to add a new content row. And then click on the "add" button, and that's going to add a brand new Figma component to my email. And you can customize the content of that by clicking on the column. So it's already pre-selected that for me, and then you can basically choose what kind of content elements you want to populate that with.

You can quickly add different content elements in there. So you can add things like buttons and images and all that sort of good stuff that you'd expect. You can also use this on any existing components that have been added through the Figma plugin too. So for example, if we want to add a button to our split component here, we could just jump out to our component, click on that column, and you'll notice that the same selection is available there. So we can actually add new elements to here. So we could add a social icons component, for example. Add that in, and that just needs to be changed color, so we can change the color of that. And you can see there that we've added a new social component just by using the quick add options there.

And the same sort of thing, it depends on the context. So now that we've got our social component that we've just added selected, we've got a brand new context of adding social elements. So we can actually add new social icons automatically. So if we click on the "add SoundCloud" option, add that in, again it's just going to add it as a black icon, so we'll just have to change that color in this case. And you can basically add that in like that. So that's a really quick way of adding new content into any existing components, giving you the flexibility to customize your designs as needed.

As I said, this is a really nice way of building out custom layouts. So you can add multiple columns. So you could add another column to this particular row, add that in, and now you can start building out a split column layout for this particular component. So you can just go through and basically add whatever you want there. And once you've got that sorted out, you can then rename it. So we can call this a different name. So we can call this one "split block". And we can just customize this a little bit more, so maybe we just want to have it as a two-column split component.

And then, again, we can just break that out into our components. So we'll just break that out up here. And of course, if we go to our Figma component Library, refresh that again, you can now see that we've got our split block component there, which we can obviously customize. So we could customize these starting contents. So we can go to our fills, we could swap out these images. So I'm just going to swap in some different images, drop those in, and populate that to be a little bit more on-brand for the starting component. So there we go, that's what that looks like there. And if we refresh, you can see that's been added here. And of course, we can now add that into any of our email designs by clicking on that icon, and there we go, you've got that customized block that we just added.

The other way that you can do that, if you want a more visual way of building out a custom component, is you can go over to the custom tab over here. So if you click on "custom", you'll notice that there's a button called "build new custom component". So we're going to click on that. That's going to pop out this little Builder interface, and it basically allows us to easily build out different content types. So we can build out double columns, single columns, we can do Heroes (background images), and start building this app visually.

If we know we want to add a title and body content on the left and an image on the right, along with maybe a button, we can basically visually build that out. Call this whatever we want, so again, I'm just going to call this "split CTA". "Create and insert new component", I'm going to click that button, and that's going to scaffold out a brand new component that we can again customize. So it's more of a visual way of building out what we just did with the quick add options. And of course, you can combine these two things as well.

Now that we've got our scaffold row column layout set up, you can again just use the quick add option, add some new content in there, and that's just going to automatically add those in as you'd expect. So the quick add selection is a really good way of quickly adding new content to a layer selection based on whatever that layer type automatically supports. It's just a really quick way of adding in new content layers like that.

The other cool thing about this custom builder is you've now got this saved as kind of a little template. So even though we've got it over here in our icons, you can go back to that custom tab and edit that layout. So you can go to the edit button, and if we wanted to make sure that this always had a social component, you can drop that in there and update the saved component. And that will allow you to update that component and add it as a new component to your page just like that. And it's going to allow you to leave the one that we've already got there as its own previous component. But because we've created a new version, this spins up a new component. So if we go to our Figma component Library, refresh that, you can see we've got now both of our components in there that we can customize however we like. So we could split those out and move them over here and start designing customizations.

You can also just delete components entirely. So, for example, if you're going to delete these two, I don't want them anymore, delete those components from my Figma file, refresh, and those will be gone from your Figma component Library as well. The other cool thing you can do, which might be handy if you're really building out dozens or hundreds of these components, is to basically just split them out into their own page. So you might want to split these out into a new page. So if we cut those out, create a new page in Figma. So I'm just going to name this page "Emailify components" and just paste those into here.

And now if we swap back to our designs page, so I'll just rearrange these pages and refresh that. So if we actually just close off the whole Figma plugin, rerun the Figma plugin, you'll be able to see that when we re-run the Figma plugin and refresh the Figma component Library again from our designs page, even though there's no components on this page whatsoever, we've got them all stored over here in our different Emailify components page. We can still access them from this other Page by clicking on the "load Emailify components" button again, and that's basically going to find those components that are on this page and automatically load them up in our designs page over here. And we can still jump to those components from this page. So you can click on the component icon, click on that, and that will jump you to the other page. The reason this is popping up is because it doesn't have an Emailify frame on this page yet, so you can either ignore that or just add a placeholder. So I'm just going to add a placeholder for now, just so it doesn't ask me to create one. Just put this over here; we don't really need to use it. But yeah, you can basically store all these components on a separate page and really build out its own Figma component library page separately from your campaigns.

You can imagine when you need to create a new campaign, you can just create a new page, call this, you know, "new campaign - campaign April 2023," and again, start adding a new component. So you can say "April email," add that as a new email frame, and again, because we've got our components in here, we can just start building out our new email based on these components that we've already designed and customize them as we need to. So we've got our new content for this campaign, we can override the images. So again, we've got our images folder, we can just drop in a new image and start customizing this content with our components that we've already got added from over here.

Finally, I'm just going to show you how to then export these emails to HTML. So, as we've been seeing, we've designed all these emails using the Figma plugin, so that means after we've previewed it, after we've tweaked any settings that we need to. As I mentioned, you can really drill down and explore the HTML and mobile settings, so if you want to change some of these font sizes on mobile, if you want to change the padding on mobile, you want to change the visibility of things, you can really dive deep and customize the mobile options and things like links, as I mentioned. So definitely explore that in your own time.

But for now, I'm happy with my emails that are showing up in the preview here. So, I might just want to add another footer, so I'm just going to do that. But otherwise, I'm happy, so I'm going to export these emails to production-ready HTML by clicking on this "export HTML" button in the Figma plugin. And I'm just going to select both of these emails, so you can select which emails you want to export. I'm going to export both of them. You can add subject lines here, so if you want to add subject lines and pre-header text, you can do that here. You just have to populate those, and then you can basically select the export option from this dropdown.

By default, it just exports to an HTML email package that'll get downloaded to your computer as a zip file. But if you're using a different platform, you might want to upload to that platform automatically. So if you're using MailChimp, you can just drop in your MailChimp API key, same with Klaviyo, drop in your API key for Klaviyo, and that will automatically upload these templates to your platform. But for today, I'm just going to be keeping it really simple and exporting the HTML to my computer. You also have the option of uploading the images to our CDN, so this will automatically upload the images online, and you don't have to manually upload them yourself. Today, I'm just going to be leaving that off, just so it's a quicker export. I'm going to click on "export to HTML," and this is now going to take our HTML email designs that we just created in Figma using our Figma component library, and it's going to export them and all of the images, all of the HTML code to HTML, and it's going to give us a zip file.

If we click on this "Download your zip file" button, I'm just going to click on that, save that to my desktop, and if I now unzip that zip file, so I'm just going to unzip that by double-clicking it, opening up my folder, and you can see here we've got our emails exported to HTML. So I can preview those in the browser by opening up this previews.html file. So I'm just going to drop that into my browser, and you can see here that we've got our HTML emails as we designed them in Figma. So this is our second email, we've got both of them on the same page as a preview. You can see the mobile version as you'd expect. So these are all HTML, you can see those are images, I've got the contents here, these are all links, so it's exporting exactly how we expected.

This is the preview page, and then we've also got our individual email exports here. So each of the folders is its own export, so you can just drop those into your browser, and you can basically use those however you want. This is production-ready code, so you can take these HTML emails and use them however you want to, and you've got your images here as well.

I just wanted to show you that final step in case you're wondering how to actually export the designs that we've just created in Figma to HTML. It's really easy, as we just saw; you just click on the HTML export button, and you're ready to go. I think we'll leave it there for today. I just wanted to go through some of the fundamentals of creating an Emailify-based Figma component library in your Figma file. This is going to be a reusable Figma component library that you can keep and maintain to then reuse across any new emails that you design and have them all in a centralized place in your Figma file. But more importantly, have them easily accessible through this Emailify Figma component Library tab that you can access via the Figma plugin and automatically insert these components that you've designed to your Emailify frames directly from the Figma plugin.

I hope that's been helpful if you've been wondering how to think about creating an email Figma component library in Figma. This is a really good way of doing it, especially because you get the added benefit of exporting the designs out to HTML through Emailify. So I'd highly recommend checking it out if you want to attempt creating your own email Figma component library in Figma. I hope that's been helpful for you to get started. So, thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Customer.io using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-04-20T00:00:00.000Z
dateModified: 2023-04-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-customer-io-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-customer-io-using-emailify.md
---

# How to export HTML emails from Figma to Customer.io using Emailify

#### Video Transcript

Today I'm going to be showing you how to automatically export HTML emails from Figma and then take those HTML emails and upload them into the Customer.io marketing platform to use as custom email layouts.

To get started, all we need to do is go to Figma, and in your Figma file, if you click on the little "Resources" icon at the top here and just search for "Emailify", under the "Plugins" tab, you'll see "Emailify" pop up. If you just go ahead and click on that result, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this "More options" icon here and clicking "Save Plugin", and that's just going to save it to your Figma plugins list for easy access later. I've already gone ahead and done that; I'm just going to right-click on my Figma canvas, I'm just going to go down to "Plugins", I'm going to go down to "Saved Plugins", and then just click on the "Emailify" item, and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is you can basically use it to help you design HTML marketing emails in Figma. For example, if we create a new email called "My Email" and add a new Emailify frame, this will basically allow us to start designing an email using some of the tools in the Figma plugin. We can do things like add headers, we can add CTAs, we can add content, and all this is totally customizable in Figma as you'd expect. I won't go into detail about how to design the emails in this Figma tutorial. There's another Figma tutorial on our YouTube channel if you want to check that out. Today, I'm just going to be showing you how to export this to HTML for the Customer.io platform; we'll go ahead and do that now.

What I'm going to do first is just make sure I've got the Customer.io footer included. If you go to the "Footer" tab in the Figma plugin, you'll see there's a bunch of different platforms here, and these contain some of the required links and tags for the platform to use when it gets uploaded. For example, we've got Customer.io down here; I'm just going to click on that one, and that's automatically going to add this footer component to my email. 

If I drill down into this layer here and go into the "Navigation" component, you can see if I click on the "HTML and Mobile Settings" button in the Figma plugin, you can see that the "Unsubscribe" link is pre-populated in the URL field along with the "View in the web browser" link. This is going to allow you to view the email in the browser if you've received it as an email. That's going to get automatically populated by Customer.io; a Customer.io template does need to have an unsubscribe link, so you can add this on your own, but the easiest way to do it is just to click on the footer component, and you'll get that added automatically in there as you need.

Now that that's been added, the other thing that Customer.io templates require is a "Content" tag; anywhere in the email, you basically have to include a "Content" tag that looks like this. So, it's double curly bracket and then close double curly bracket with the word "content" in the middle. What this does is it basically creates a placeholder area for your content when you're uploading into Customer.io, and you'll be able to fill this out dynamically later if you want to do that. 

Basically, just go ahead and pick a place in your template that you want to create custom content in. As far as I know, you can only create one of these areas, so just pick whichever area you want, and that'll automatically get added into the HTML later. If the templates are missing this tag, just because it does require it, Emailify will automatically add this content tag just to the very bottom of the email, just so that it's in there so that the editor in Customer.io doesn't complain. We'll see what that looks like in a minute.

I'm just going to leave that off for now just so we can see what that does. I'm just going to remove the content tag and just undo some of that content that we just added; if we just create the default one and then export it, now that we've got our design, all we need to do is export it to HTML. If we click on the "Export HTML" button in the Figma plugin, and by default, it's just this default "HTML Export" which you can download to the computer. We're going to go down here to the platform integration section and just click on "Customer.io".

And once you've got Customer.io selected, you'll see that it's got a button that says "Export for Customer.io". You can add your subject line and pre-header, and this will get included in the HTML file. But for today, I'm just going to leave those blank and export it. I'm just going to click on "Export for Customer.io", and this is going to export our email to HTML. Once it's finished exporting, you just have to click on this "Download your zip file" button; I'm going to click on that now and just save it to my desktop. 

If we unzip that file, I'll open up the folder so you can see what it looks like. And we've just got a few different files here. We've got our "previews.html", so the previews.html is basically a file that allows you to preview the desktop and mobile version of the email, so it's good for sending to clients when they need to review them. And we've also got our email here, the email folder has got our HTML in it, which is just the pure email template. 

For today, we're just going to be looking at this index.html file, and you can see here that it's inserted the content area at the bottom here because we didn't include it in our template anywhere. I'm just going to go ahead and move that into my code editor; I've just got my code editor up in here, I'm going to open up the folder again and just drag and drop the index.html file in there, and I'm just going to select all of that code and copy it. So, you can just do "Command + C" or right-click and copy all of that.

If we go into Customer.io now, I'm just signed into my Customer.io account, and all you need to do is go into the left-hand side here, scroll down to "Content", and expand content, and then go to "Email Layouts". If you click on email layouts, and then in here, you just want to click on the "Create Layout" button; in the top right here, "Create Layout". Then you want to click on 
"Start from scratch"; we don't want to use any pre-existing templates, we want to create our own. We're going to click on start from scratch, and we can just call this whatever we want; we'll call it "Emailify Template", click "Create Layout", and you can see here we've got this code editor that we can now paste our custom HTML in.

If we now get rid of all of this pre-existing content and just select all; "Command + A", or "Control + A" if you're on Windows, and delete all that. We've still got our code copied from our code editor over here, which we grabbed. We've copied that, and in our Customer.io editor, we're going to paste that in, just "Command + V", or "Control + V" if you're on Windows, paste that in; and you can see all of the HTML is now pasted in there. What we can do now is click on "Save changes"; I'm going to click "Save changes", and there we go, it's basically saved our layout as we'd expect. 

We've got our HTML in there, we've got our unsubscribe link, view in the browser link, and we've also got our content variable that was added automatically down here. Ideally, you don't want to have that down there. Ideally, you would populate that, as I mentioned before, somewhere in the content area so you could swap that out with content and do that. For example, I'll just show you what that looks like. If you add content like that, and if we now re-export this template; I'm just going to click on "Export for Customer.io" again, re-export that, download the zip file again, unzip that new zip file, and if we open up that folder, we can see here that if we open up the index file, I'm just going to drag that into my code editor again, copy that; and if we go back to our browser, if we now go "Edit Layout", I'm just going to click "Edit Layout", and again, I'm going to remove the last template, paste that in, and click "Save changes", and I'm just going to say "Done Editing". 

There we go; we've got our content tag in there, and because we've included our own content tag, it's not going to automatically add it to the bottom of the email. It's just going to leave it where it is, because the Figma plugin detected that you've already added your content tag, so it's just going to keep it there and not add its own one. The reason it adds its own one is just to make sure that that tag is in there somewhere. Otherwise, the template basically just won't get saved; you can either remove that or do something with it, or ideally, just add it to your design beforehand.

That's basically it, we've got our email template in here now; that's what it looks like. It's looking really good, and if we go to our content section again and go back to email layouts, we can now see that we've got our "Emailify Template" in there, which is available to use in campaigns or sends later. We'll leave it there for today. I just wanted to keep this quite simple just to show you the basics of exporting HTML from Emailify for Customer.io and uploading that as a new email layout in the Customer.io platform when you're logged into your Customer.io account.

You might be wondering why this can't be done automatically; you might have noticed there's a few other platforms that are in here; there's MailChimp, Klaviyo, Mailgun, all these different platforms, which allow you to add an API key and automatically upload these things. Unfortunately, Customer.io, the platform, doesn't have an endpoint or an API that allows us to automatically upload the templates into the platform, which would be really handy, but unfortunately, it doesn't have that. We do have to do this extra step of manually copying and pasting it into your template section, but once it's in there, you've basically got it in there forever, and you can just create new campaigns from the template or reference that layout however you need to. 

I just wanted to add that context just in case you're wondering why it can't be done via an API; that's sadly the case at the moment, but hopefully, they'll have that in the future, and then the Figma plugin I'm sure will be updated to do that automatically as well. Thanks for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export emails from Figma to grayscale wireframe previews using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-04-17T00:00:00.000Z
dateModified: 2023-04-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-emails-from-figma-to-grayscale-wireframe-previews-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-emails-from-figma-to-grayscale-wireframe-previews-using-emailify.md
---

# How to export emails from Figma to grayscale wireframe previews using Emailify

#### Video Transcript

Today I'm going to be showing you how to automatically export grayscale wireframe previews of your HTML email designs from Figma using the Emailify Figma plugin.

To get started, all we need to do is go to the little "Resources" icon at the top of your Figma file, if you click on that and search for "Emailify", if you click on the Emailify result under the "Plugins" tab, you'll see Emailify pop up. All you need to do to run it is either click on this "Run" button here, or I'd recommend clicking on this "More options" icon here and just clicking "Save Figma plugin", and that's just going to save it to your plugins list for easy access later. I've already gone ahead and done that, so I'm going to go to my Figma canvas, I'm going to right click anywhere, I'm going to go down to "Plugins", then go down to "Saved plugins" and then just click on the "Emailify" Figma plugin we just saved a second ago, and that's just going to run the Figma plugin as we'd expect.

If you're new to the Figma plugin, the way that it works is it basically helps you design and export HTML emails from Figma, and the way it does that is using built-in tools to design components and layouts, and customize the content using the Figma plugin. If you're new to the Figma plugin, I'd recommend checking out another Figma tutorial on our YouTube channel to help with going into the details of actually designing the emails. In this Figma tutorial I'm just going to assume that you've already got your Emailify designs ready to export, and all we're going to be focusing on today is exporting those as wireframe style PDFs that you can then send to your clients for early previews.

To get started, all we need to do is click on the "Export HTML" button in the Figma plugin, and then we just want to change this export setting here from "HTML Email" and instead scroll down to "PDF Previews"; we're going to select "PDF Previews" and that's just going to change the export option to export PDF previews of our HTML instead of just the raw HTML files. Now that we've got that selected, we've got a new toggle here called "Enable Wireframe Mode", if you make sure that's turned on; it might be turned off by default, so if you do want to use wireframe mode, you'll just need to opt into that. If you click on "Enable Wireframe Mode", that's basically going to automatically take our designs here and export them as a grayscale wireframe PDF. 

I'll show you what that looks like now; if you click on the "Export to PDF" button, that's going to go through your emails, it's going to go through the selected emails that we've got here and it's going to automatically export them as grayscale PDFs. Once it's finished converting, we'll just click on the "Download your zip file" button and save that anywhere to computer, and if we now open up that zip file and then open up the folder, you'll see here that we've got a bunch of different files. The first one we can see is this PDF file with the same name as our Figma file; if we open up that in our preview, we can see when the PDF has been opened up we've got a grayscale version of the email that we designed here. It's also making all of the text "Lorem Ipsum", it's putting all dummy text in there. It's also swapping out any images; you can see here the background image the logo image the inline image here, those are all being swapped out with gray blanked out images, you can still see that they're images, but they're just grayscaled out. 

That's also going to be happening down here; if we've got our second email, you can see the second one, the text is matching up with the length; the length is automatically taking into account, how much length of the text there is and turning that into "Lorem Ipsum" automatically. Then any elements with color are just getting gray scaled out as well; you can see the button which was orange, it's still got that tint to it, but it's just in gray, it's been grayed out; again, the button text has been replaced as well.

That's basically what it looks like; this is an automated way to export your HTML email designs from Figma to a more grayscale, out blanked out version. This can be handy if you're in the early stages of a design process and you don't have all the final content or any real content yet, and you just want to give the clients or stakeholder a way to visualize what the layout or structure is going to look like without necessarily having the content ready to go yet; more of a stripped down version that you can send them in those early stages.

The other files that we have in here are basically just variants on that initial PDF; if you want to send a PDF just of each email, you can go into the email folder of each email and use this PDF instead, and that will just give you the desktop and mobile versions of each of those designs just in its own file. If you want to also have individual pages, you can get the mobile and desktop PDFs here as well. If you just want to send a PDF with the mobile design or the desktop design you can send those PDF files that are included as well. Finally, we've got some JPG folders; if you wanted to use the JPG images of these exports, you can open up these files here and these are actually just JPG image files that you can use however you want. For example, we could move those into Figma; if we drop those in you can see here these are just regular images, and we can now use them in our Figma file as well if we really wanted to. These are just images of the exported grayscale wireframes, so we could add a little nice mock-up around them, or we could export these to a different format, or really whatever you want to do you can do that with these JPGs as well. That's just another option you can use if you wanted to take those wireframe exports and do something else with them without them having to be sent in a PDF.

That's basically it; if you want to try out this feature, you can use it now in the Emailify Figma plugin. As I said, this is just for the PDF previews feature at the moment; if you want to include the wireframe mode toggle you can just turn that on and you'll automatically get these outputs. Of course, by default, that's just turned off; if you have that turned off and export the PDF it's just going to export the original designs as they were, it's not going to make any changes to the design at all, it's just going to export them as HTML and render the HTML in your PDF previews.

We'll leave it there for today; I just wanted to do a quick run through of this new feature to optionally export wireframe grayscale PDF previews from Emailify. Hopefully this is helpful if you've been wanting to create more stripped back wireframe style with grayscale images or grayscale previews of your email designs without necessarily having to send the final version to your clients straight away. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: Visual QA checklist for front-end teams
description: A visual QA checklist for front-end teams that want fewer design regressions before launch.
datePublished: 2023-04-13T00:00:00.000Z
dateModified: 2023-04-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-visual-qa-checklist-for-front-end-teams/
markdownUrl: https://www.hypermatic.com/articles/pixelay-visual-qa-checklist-for-front-end-teams.md
---

# Visual QA checklist for front-end teams

A visual QA checklist for front-end teams that want fewer design regressions before launch. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for visual qa checklist for front-end teams when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Pixelay fits into the process

Pixelay matters in this workflow because QA breaks down when teams are comparing design and implementation manually. Overlay-based review makes front-end drift easier to spot and easier to discuss.

With Pixelay, teams can usually:

- catch visual drift before it ships
- make front-end QA more visual and less subjective
- turn design review into a clearer implementation check

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Pixelay](/pixelay/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If design QA is the recurring bottleneck, Pixelay is usually the best first move. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to add cubic bezier easing to banner animations in Figma using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-04-13T00:00:00.000Z
dateModified: 2023-04-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-cubic-bezier-easing-to-banner-animations-in-figma-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-cubic-bezier-easing-to-banner-animations-in-figma-using-bannerify.md
---

# How to add cubic bezier easing to banner animations in Figma using Bannerify

#### Video Transcript

Today I'm going to be showing you how to add custom cubic bezier easing curves to your custom animations for banner exports from Figma using the Bannerify Figma plugin.

To get started, all we need to do is go up to the "Resources" icon here, and if you click on that and search for "Bannerify", and if you click on the Bannerify result, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this "More options" icon and clicking "Save Figma plugin", and that's just going to save the Figma plugin to your list for easy access later. I've already gone ahead and done that, so I'm going to go to my Figma canvas, I'm just going to right click anywhere, I'm going to go down to "Plugins", then I'm going to go down to "Saved Plugins", and just click on the Bannerify item, and that's just going to run the Figma plugin that we just saved a second ago.

The way that Bannerify works is it basically treats any Figma frames that are on your current Figma page as banners. I've got a bunch of different Figma frames here, and each of those just have a few text and image layers, and then these basically get treated as banners in the Figma plugin. You can choose which banners to load up, I'm just going to load up a few of them; I'm just going to load up these three for today, and load those in. Once it loads, you can see that all of the layers from each of these Figma frames basically get inserted into your timeline in the Figma plugin, where you can then apply animations, and we'll be able to then export those to either HTML, or GIF, or video files.

For this particular Figma tutorial, I'm not going to be going through all the different details of the Figma plugin, but I am going to be going through how to add custom easing to your custom animations. To do that we just click on the "Custom Animations" button in the header, and that basically brings open this keyframe editor that we can use to build our own totally custom animations. For example, if I wanted to make my keyframe animation go from left to the center; in this case, I'm just going 100 pixels from the left to the center, that's basically how you do that. Then that's the first keyframe, the second keyframe we can make that go even further to the right; if we wanted to do something like that, we could do that we can also add new keyframes. We can insert another keyframe at 50% or anywhere, and then we can make that keyframe do something totally different in the middle as well; we could make it kind of bounce or do any kind of keyframe. I'm just going to remove that one from now and I'm just going to keep this really simple for today.

In this particular case, I'm just going to add an animation that rotates from the left over to the right. In our first keyframe, I'm just going to set a bit of a rotation value on the keyframe, the first keyframe, and then you can see here on the right hand side it's just getting basically back to normal rotation, it's just going from negative 185 degrees to zero. We can see here that we've got a normal easing applied to it, in the animation easing drop down here we've got "Ease" selected, which is just the default easing. We can also change that to things like "Linear" which doesn't add any sort of jump or kind of effect to it, it's just a very linear path to path animation. Then there's also some other presets like "Ease In", "Ease Out" and "Ease In Out". But for today, we really want to add a new custom easing; if we can click on this 
"Cubic Bezier" option, and what that does is it allows us to paste in a custom CSS bezier. 

If we click on this link here, it'll basically take us to this website where we can generate custom cubic bezier rules, and you can see here there's a few presets. If we click on these it'll show you what that transition is going to look like, what that easing looks like; we can change the category here, so if we want to do ease out, we can do ease out, we can do ease in, all different types of easings. In this particular case, I'm just going to stick with "Ease In Out", and I'm just going to set it to this easing over here, and we've got this easing that I kind of like. To copy it, we can just click on this little button down here and copy that, and if we go back to our animation, paste it into this input here, that will basically apply the cubic bezier curve that we've just added to the Figma plugin.

You can see here that the easing is much much different in the preview than it was with the typical default easing. If we switch that back to the normal easing, you can see here that it's basically very smooth, it's not 100 linear, but it's quite linear; not as linear as the normal 
"Linear" option, but if we then switch that back to our custom one to preview that, click on "Custom Bezier", and we've still got our rule in there. We've got our custom ease here, and you can see that it starts off very slow and then dashes much faster towards the end; this is how you can use custom cubic bezier easing curves to totally customize the easing in your animations.

To save the animation, all we need to do is give it a name; we can say "Cubic Ease", and we're just going to add that as a new animation by clicking "Add new animation". Now that we've got that added to our animations, we can now apply that to any of our layers just by changing the setting of that layer; for example, if we wanted to animate this button in like that, we could just go to the button, change the intro animation to "Cubic Ease" under the "Custom" group, click on "Cubic Ease", and now if we play that back again you can see here that it's basically doing the rotate animation that we added. If we play that in, that's just getting added in like a crazy animation now; probably not the best fit for this particular layer, but you can see what that looks like when we do add it in.

You can of course go back and edit that; if we decide it's a bit too crazy, we can go back in click on the "Saved animations" drop down, go back down to our "Cubic Ease" one that we saved, and then we can change this to be a little bit more reasonable. If we jumped back into the 100% frame and just made it end up at zero; instead of going to 100 we'll just go to zero, so it's just going to end up where it started. Then maybe we can add a bit of opacity change as well; on the first frame, I'm just going to make the opacity start at zero, and I'm going to make it fade up to one which is 100% on the second frame. To update the animation, we can save that update, so we can just click on "Update saved animation". If you wanted to save it as a new animation, you can do that as well, you could do "Cubic Ease New" and that would allow you to save it as a new one, if you click on "Add new animation", that'll basically create a fork or a copy as a new animation. In this case, I'm just going to click "Update saved animation" and update our existing one. 

I've just updated the "Cubic Ease" animation, and if I go back to my timeline, you can see here that the update has automatically been applied to the existing selected custom animation that we had. If I click on play, you can see here that this time it's fading in and rotating in into the spot that it's originally appearing in in Figma, because we changed the 100 keyframe to be zero as far as the X translation goes. You can see that the cubic bezier easing is being applied as we'd expect; that's just getting thrown out now. 

We can also export this as a GIF, or a video, or an HTML banner. I'm just going to copy this animation from my button; I'm just going to click on "Copy", and I'm going to apply that to all of the CTA buttons in my banner set. I'm just going to click on the quick select button, that's going to select all of the CTA buttons automatically, then I'm just going to click "Paste", and that's going to apply it, then I can just click "Apply" and that's going to apply my animation to all of the CTA buttons. If we now go to the top one, you'll see here that the rotation animations also now being applied to this button as well. Then we can export that out just by clicking on "Export to GIF/Video"; in this case, I'm just going to click "Export to GIF/Video", and today I'm just going to be rendering out to a WebM, just to do a quick video export. This will basically go through and export all of your banners in the timeline out to a video, and you can see here that it's rendering out all the frames from our timeline, including the cubic easing custom ease that we just added to the CTA button. 

I'm going to click on "Download your zip file", I'm going to save that to my desktop, I'm going to open up the zip file, and if we open up that folder you can see here that we've got our videos exported, and we've just got this index.html file that we can use as a bit of a preview. If we drop that into the browser, I'm just going to drop that file in, and you can see here that it's playing back our videos as we'd expect; that's just going to keep looping because it's a preview page, and you can see here that the "Book Now" button is flying in from the left with our custom animation and custom cubic bezier easing that we created in Bannerify.

That's a pretty basic run through of how cubic bezier easing works, how it can be used in the Bannerify Figma plugin using a site like this or generating your own custom cubic bezier CSS easing curve, and then just copying that CSS cubic bezier path from here or whatever other site you want to use to generate it, and just dropping it into your custom animations easing panel whenever; you've got the "Cubic Bezier" easing option selected, that will let you paste that right in.

We'll leave it there for today; I just wanted to go through this new feature in Bannerify, so you can add custom cubic bezier easing curves now. This should make it much more flexible to customize the type of animation style that you want to use when you're creating custom animations for your Figma banners in Bannerify; hopefully this will free up your creativity a bit more, and allow you to create some really neat custom animations to export from Figma. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to PDF previews using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-04-10T00:00:00.000Z
dateModified: 2023-04-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-pdf-previews-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-pdf-previews-using-emailify.md
---

# How to export HTML emails from Figma to PDF previews using Emailify

#### Video Transcript

Today I'm going to be showing you how to automatically export PDF previews of your HTML email designs from Figma using the Emailify Figma plugin.

To get started all, we need to do is go up to the "Resources" icon at the top of your Figma file, if you click on that and search for "Emailify", and under the "Plugins" tab you'll see Emailify pop up. If you go ahead and click on that, you can run the Figma plugin by clicking on this "Run" button here, or I'd recommend clicking on the "More options" icon, and then clicking on "Save Figma plugin", and that'll just save it to your Figma plugins list for later. I've already gone ahead and done that, so I'm going to right click on my Figma canvas, just going to go down to "Plugins", I'm going to go into "Saved Plugins", and then click on the "Emailify" item, and that's just going to run the Figma plugin we just saved a second ago.

If you're new to the Figma plugin, the way it works is it basically allows you to design emails in Figma with some help from some of the built-in components from Emailify, and also some of the quick add options, so you can build out your own layouts and contents here. I'm not going to be going into detail about that today; if you want to run down of that, there's a couple of really good Figma tutorials on the YouTube channel if you just search for the Emailify playlist, you'll be able to see those pop up and get those sorted out before you continue with this Figma tutorial

Today, I'm just going to assume that you've already got your designs set up the way that you want, and you've got them rendering the way you want, and all you want to do now is export them to a PDF that you can send to your clients or stakeholders, and send that around for approval, if you don't want to send an HTML version. What this is going to do is it's basically going to take the real HTML, we can see here in the preview we've got real HTML from our design that's automatically getting converted to HTML through the Figma plugin, and it's going to take the mobile and desktop designs from HTML, this real HTML render, and it's going to basically export those out to a PDF. 

We're going to do that now; if we close off the preview, and I'm just going to go to the "Export HTML" button, I'm going to click on "Export HTML" and by default it's going to be set to the "HTML Email" option, we're just going to click on that drop down now, and under the "Download To Ccmputer" group, we can see at the bottom here we've got a new option called "PDF Previews". I'm going to click on "PDF Previews", and that's all you need to do, you don't need to change anything else. All you need to do is select the emails on your page that you want to include in the export; I'm just going to export both of these emails today, and I'm just going to now click on the "Export to PDF" button. 

I'm going to click on "Export to PDF", and this is basically going to generate the HTML for our emails and then also generate the PDF previews based on that HTML. It's just going to give us some PDF files and also some JPEG files, some static image files that we're going to be able to use or look at in a moment; once it finishes generating the PDF previews, it's going to zip that up for us and it's going to allow us to download that zip file to our computer. in a moment we'll get a confirmation screen telling us that our PDF previews are ready to download. We can now download our zip file; I'm just going to click "Download .zip file" and save that to my desktop, and if I unzip that file I'll show you what's in that folder.

We've got the unzipped folder here, and you can see that there's a few different files in here. The first one is just the PDF file that contains all of our emails with the mobile and desktop view for each of them; I'm just going to open that up now to preview it, and we can see here that we've got our first email, this is our desktop view, and as we scroll down on the second page you'll see the mobile view. We've got our mobile view, and then the third page will be the desktop view for the second email, and then the final page is the mobile view for that second email as well. All of those mock-ups desktop and mobile HTML based, these are not being rendered from the Figma images, these are actually being rendered based on the real HTML that's getting generated. As you can see, we've got the way that the mobile version renders in HTML the way that the desktop version renders in HTML, and that's getting exported to a single PDF file.

That's probably the main PDF that you're going to be using if you just want to send around a PDF of all of the previews in one file, you can definitely do that, and there's also some other options. We can see here we've got our emails that we've exported in two separate folders as well; if we open up one of those folders, if we now open up the PDF in that folder, this particular PDF will just include the desktop view and mobile view of that one email, if you just wanted to send PDFs of each of those emails. If you you wanted to send those two separately, you could send these two files to your stakeholder or client to review, and those would be each design in separate PDFs with the mobile and desktop version in each of those. Even more granularly, if you wanted to just send a PDF of the mobile or desktop version on its own, you can do that as well. If you open up this PDFs folder inside of the email, you can basically get a one-page PDF for the mobile version; this is just a one-page document here it doesn't have any more pages, or, you've got the desktop one as well, this is just the desktop PDF if you just wanted to send one of them. 

Furthermore, you can also break it down into JPEG; if you wanted to use these JPEGs for any reason, you've got access to those as well. If you wanted to include them in your own personalized mock-up, or something like that for example, you could drop these into your Figma file. I can drop those JPEGs in there and that will basically allow me to use these exports as images. I can actually take those JPEGs include them into Figma, or drop them into a different application, or just send them as static images; if you didn't want to send a PDF, you could just send them as images or upload them to a different preview application, or just as an email or Slack attachment, or something like that. 

You've got a few options herem depending on what kind of preview workflow you have internally; if it's PDF based, if you want to include them all in the one document you've got that one up here, if you want to include them as separate documents with mobile and desktop you can do that here, and then finally if you wanted to really get granular you can send them as individual PDFs with a PDF per view of mobile and desktop in here as well. As we just went through, the JPEGs as well, we've got our JPEGs for each of these mock-ups; this is version two, you can see we've got our JPEGs there. 

That's a really easy way of exporting the HTML files to PDF if you want to use that as an alternative way to send preview links. The other option is just to export the HTML normally; if you export it to HTML normally, it will also include a preview link that you can use as well, or you can actually upload it to Netlify and get a hosted URL as well. I covered that in another YouTube Figma tutorial, but for today we're just going to leave it with the PDF previews to keep it simple.

That's basically it; I just wanted to run through this new feature with you because I know that some people still prefer to send PDF previews rather than live HTML previews. This is going to be a really good balance, where you can automatically export the PDF previews from Figma from Emailify based on the HTML, but still get the PDF document that you can just send as a document file via email or whatever platform you're using with your stakeholders and clients, and they can review that and mark it up, or do whatever you usually do with your PDF review processes.

We'll leave it there for today, and I hope that's been helpful if you've been wondering how to export your HTML emails from Emailify out to a PDF, you can easily do it now using this new "PDF Previews" option. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export responsive HTML banners from Figma using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-04-09T00:00:00.000Z
dateModified: 2023-04-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-responsive-html-banners-from-figma-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-responsive-html-banners-from-figma-using-bannerify.md
---

# How to export responsive HTML banners from Figma using Bannerify

#### Video Transcript

Today I'm going to be showing you how to automatically export responsive HTML banner ads from Figma using the Bannerify Figma plugin.

To get started, all we need to do is go up to the "Resources" icon at the top of your Figma file, click on that, then search for "Bannerify" and under the "Plugins" tab you'll see Bannerify pop up; if you go ahead and click on that icon, you'll get this result here. To run the Figma plugin, all you need to do is either click on the "Run" button here, or I'd recommend clicking on the "More options" icon here and clicking "Save Figma plugin" and that'll just save it to your Figma plugins list for easy access later. I've already gone ahead and done that, so I'm going to right click on my Figma canvas, I'm going to go down to "Plugins" I'm going to go down to "Saved plugins", then I'm just going to go to "Bannerify" and click on that, and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically treats any frames on your current page as banners. I've got a bunch of different frames here at all different sizes, and in each of those frames I've just got some text layers and image layers that I'm using as the banner elements. I'm just going to go ahead and load all of those in; I'm just going to load all the banners, and that's just going to load them all into the timeline in the Bannerify Figma plugin. I've already got some animations applied to these, you can see here it's just some basic fade and slide animations. I'm not going to go into detail about how to animate the banners and design them, there's a couple of other Figma video tutorials on our YouTube channel if you want to check out the Bannerify playlist, that's a good place to start, but for today I'm just going to assume that you've already got your banners set up in Bannerify, and animated and designed the way that you want; and what you want to be doing is just exporting them out to a responsive HTML banner format.

We're going to do that now; I'm just going to start by clicking on the "Export to HTML" button in the Figma plugin, I'm going to click on "Export HTML" and then down here in the code output settings we just want to change this drop down here from "HTML/CSS", which is kind of the "Non-Platform Specific" options at the top here, and then if we go down to the "Platforms" category, if you scroll down and get to the letter "R", you'll see "Responsive Display Ad" pop up as the format. We want to click on this Responsive Display Ad format, I'm going to click on that, and that's just going to allow us to add a click tag if we want to do that; assuming we're going to be uploading this to Google Ads or Google Ad product, there's a few of them, you can add your own click tag. It'll add the "clickTag" variable with the URL that you want to add, or you can just leave that blank and you can set that after you've uploaded the responsive display ad as well. 

The other thing we can do is include a zip file inside of the zip, and this is going to allow us to have the files automatically zipped up when we export them; you can export that zip file straight up to your Google Ads platform. Then the other option we have here is just to either minify or unminify the code; minified will basically just put all of the HTML, CSS and JavaScript into one HTML file, and if you uncheck that it'll give you a separate CSS and JavaScript file to export into your package as well. I'm just going to leave that as minified, and I'm just going to leave all the other options as is; now I'm just going to go ahead and click on "Export Banners", this is going to generate all the HTML, CSS and JavaScript for our responsive banner automatically, and then it's just going to export all of the images as well.

Once it's done that, we'll get this confirmation screen which is going to tell us that our banners are ready to download. I'm going to click on "Download your .zip file", I'm just going to save that to my desktop and unzip the file, and I'll show you what's inside of that folder. Inside the unzipped folder, we've got a few different things; we've got our "backups" folder because we've got some backup jpegs, we've got all the backup jpegs in there, so you've got your backups files. Then you've got the "zip" folder which is the zip option that we selected; this is basically a zip file that automatically zips up the contents of this folder here, this zip file contains this index.html file and this images folder, and inside of those are your actual banners.

This other index file here that's actually just the preview file of your banners; if we drag that into the browser, you can see here that this is the preview that's loading up the banners, but the interesting thing is that all of these banners are the same file. If we jump into this folder here, we can see here that this index.html file is actually what's being linked to on this page; this HTML file is being linked to in all of these different iFrames on this page, so if we were to open up this file here you would basically see nothing because the media queries for that page are not actually visible. 

For example, if we were to open up this file in a code editor, if I just drag and drop the index file into here, you'll be able to see that there's a bunch of media queries; these media queries are essentially acting as the way to trigger the responsive banners. For example, certain banners will only show up if certain viewport sizes are being met; for example, 600 by 300, 280 by 336, these banners will only render those certain sizes when the viewport is the correct size. We can see here because all these viewports all these iFrames are being rendered at the exact size of the banner, that's what's allowing them to be swapped out in real time as a responsive Banner using one file. 

That's what that looks like when you actually open up the code and that's why the file here will appear to be empty, but actually, is not rendering because it's not at the right size. When you upload the banners and they get rendered in the correct size, the responsive code will kick in and automatically pick up on which banner to display based on the size of the viewport. 

That's basically what that looks like; this is the responsive banner, as I said, it's all coming from this one index file and all of our images are in here and it's just going to display whichever banner is the correct one based on the current viewport size. This is opposed to needing a bunch of different banners; for example, if we would export this normally, I'll just do one really quick example of this. If we export for "Google Ads" and export those banners, this is basically just going to export all of the same banners, but it's going to export them as separate HTML files. We'll see what that looks like in a second, I'll just quickly download this to my desktop and show you the difference. 

If we open up this folder, you can see here that this is our responsive one and then if we compare that to the other one that we just downloaded, I'll just compare those two; in in the responsive one we've just got one file, we've got one index file, one banner, and in the one we just exported through Google Ads, you can see that every banner has its own HTML file. It looks the same when you preview it, these are all going to look exactly the same, but they're all being pointed to individual banners they're being pointed to each of these individual banners; instead of uploading 12 banners, or 11 banners in this case, individually, you can basically just upload one and be done with it; that's the advantage of using responsive banners in certain cases. 

I hope that's been helpful if you've been wondering how to export responsive banners from Bannerify; this is going to be the easiest way to do it you just click on the code output settings, change it to "Responsive Display Ad" and you'll basically be good to go. Just click on the "Export Banners" button and you'll have those responsive HTML banners in a few seconds. We'll leave it there for today; I just wanted to go through this new option with you if you've been wondering how to export responsive HTML banners from Figma, this is going to be the quickest way to do it, using the Bannerify Figma plugin. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to upload preview links for HTML emails from Figma to Netlify using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-04-07T00:00:00.000Z
dateModified: 2023-04-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-upload-preview-links-for-html-emails-from-figma-to-netlify-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-upload-preview-links-for-html-emails-from-figma-to-netlify-using-emailify.md
---

# How to upload preview links for HTML emails from Figma to Netlify using Emailify

#### Video Transcript

Today I'm going to be showing you how to automatically create preview links for your HTML emails in Netlify using the Emailify Figma plugin; this is going to allow you to share preview Links of your email designs exported to HTML with stakeholders or clients or anyone on your team.

To get started, all we need to do is go to the "Resources" icon at the top of your Figma file, and if you click on that, and then search for "Emailify", under the "Plugins" tab you'll see Emailify pop up. If you just go ahead and click on that result, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on the "More options" icon here and clicking "Save Figma plugin" and that's going to save it to your Figma plugins list for easy access later. I've already gone ahead and done that, so I'm going to right click on my Figma canvas, I'm going to go down to "Plugins", I'm going to go down to "Saved Plugins" and then I'm just going to click on "Emailify", and that's going to run the Figma plugin that we just saved a second ago.

In this Figma tutorial, I'm not going to be going through details of how to design the emails, there's some other Figma tutorials on our YouTube channel that you can find in the Emailify playlist if you want to jump into that, but for today I'm just going to be assuming that you've already got your emails designed using the Emailify components that you've customized, and basically the email is ready to go and you just want to now upload it to Netlify to create a preview link to share that design exported as HTML with stakeholders for approval. 

All we need to do is click on the "Export HTML" button and once we've done that we can see here that by default it's going to export the HTML email to download to the computer, but in this case we want to export it to Netlify. I'm going to scroll all the way down and find the "Upload Preview Link" group, and I'm going to click on the "Netlify" option. Netlify is a platform that hosts static websites or static HTML, so this is going to allow us to automatically upload our HTML email from Figma up to a Netlify preview link. All you need to do is click on this "Personal Access Token" link here, and if you're logged into Netlify, which I am; if you don't have a Netlify account you can create a free one, if you're a Netlify user, you can just sign in and if you click on that link you'll be taken to the applications page in your settings panel.

What you need to do is go down to "Personal access tokens" and click on "New access token", I'm going to click that, and then add a description; in this case, I'm just going to say "Emailify" and click on "Generate token" and that's just going to give me a new personal access token that I can copy. I can copy that to my clipboard by clicking on this little copy icon here, and it's worth storing that somewhere safe in a password manager or something like that to reuse again later, if you like, because once you leave this page it's not going to be able to show you that token again; just something to keep in mind.

After you copy it to your clipboard, go back to Figma, go back into the Emailify Figma plugin, and in this input field here with the key icon, just click on that, and then paste in that token that we just copied. I'm going to paste that in and that's just going to connect to Netlify and automatically generate a new Netlify site; what that does is it basically just creates a brand new site in your Netlify account and it gives it this random name that comes from Netlify. You can obviously go ahead and change that site name as well, if you click on the "Change site name" link; I'm going to click on that now and that's basically just going to take you directly to the new site that was just created by the Figma plugin using the API. You can see here it's currently called "Majestic Dolphin", and we probably aren't going to be sending a link called Majestic Dolphin to our clients. In order to change that, all we need to do is click on the "Change site name" button in Netlify and if we change that now to be something more relevant, we'll just say email "Jiro Sushi Preview" and I'm just going to call it that, and click "Save". Just something to keep in mind is that the site name does have to be unique; it can't be the same subdomain as any other subdomain on Netlify, so you just want to make it something unique. 

Once you've changed that in Netlify, you can just jump back into Figma, click on this little "refresh" icon, that's just going to reload the Netlify site, and you can see here that it's picked up on the fact that we've just changed the site name to "Email Jiro Sushi Preview", and this is now going to be our new domain. It's worth noting that the Site ID here stays the same, so we could basically change that once again; if I changed it to "preview link", for example, we could click click "Save", and if we jump back again refresh that, it's going to automatically change that again to the same Site ID; that's just a really easy way to rename the site.

All you need to do is just put in all your details as usual, subject line, pre-header text, all that sort of stuff; and now all we need to do is click on "Upload to Netlify"; I'm going to click on "Upload to Netlify", that's just going to generate the HTML and upload the images that it normally does, and then it's going to upload it to Netlify. It's pretty quick, we can see here that it's telling us that our Netlify preview link has been uploaded, and if we click on the "Netlify Preview URL", I'm going to click on that link, that's going to open up the URL that we just created.

You can see here that we've got our HTML preview ready to go, this is the HTML that was just exported from Figma, we can see that it's looking exactly the way we wanted based on the preview in Figma. We can now send this link around to team members, or stakeholders, or anyone who needs to approve the design, you can basically just share that link now without having to manually upload it yourself. 

You can also download the zip file, if you wanted to have a copy of the files that were uploaded to Netlify, all you need to do is click on "Download your zip file", click on "Save", and that's just going to create a zip file on your desktop or wherever you save it. If we open up that folder after unzipping it, we can see here that these are the files that were uploaded; the index.html file, which is the preview file that was what was uploaded to Netlify, which is pointing to our email here; this is the email contents and the images and everything like that.

That's basically what it looks like there. I hope that's helpful if you've been wondering how to generate preview links automatically, if you're sending around HTML email exports from Figma to clients or stakeholders, this is going to be a lot easier than manually downloading the preview files and uploading them to an S3 bucket or a Netlify site yourself. This is just a really quick way of automating that process to upload the preview links to Netlify, which is a really good platform for hosting static sites. That's going to be it for today, I just want to keep it really simple to show you this new export feature from Emailify; I hope you find it useful for you and your team, and I hope that improves your workflow for sharing around HTML email preview links with stakeholders. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add page numbers to Figma slides automatically using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-04-04T00:00:00.000Z
dateModified: 2023-04-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-page-numbers-to-figma-slides-automatically-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-page-numbers-to-figma-slides-automatically-using-pitchdeck.md
---

# How to add page numbers to Figma slides automatically using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to automatically add page numbers to your slides in Figma using the Pitchdeck Figma plugin.

To get started. al, we need to do is go to the "Resources" icon at the top of your Figma file, click on that, and then search for "Pitchdeck"; under the "Plugins" tab you'll see Pitchdeck pop up. All you need to do is click on the "Run" button here, or I'd recommend clicking on the "More options" icon and then clicking "Save Figma plugin" and that will save it to your Figma plugins list for later.

I've already gone ahead and done that, so I'm going to go to my Figma canvas, just going to right click anywhere, go down to "Plugins", go down to "Saved Plugins" and then click on the "Pitchdeck" item that we just saved, and that'll run the Figma plugin that we just saved a second ago. 

To get started, all you need to know if you're new to the Figma plugin, is that the Figma plugin basically works by treating any frames on your current Figma page as slides. In this case, we've got a bunch of slides and each of them are just being set to 1920x1080, and then all we're doing is basically including text layers and image layers inside of each frame and those get treated as the contents of each slide in the Figma plugin, where you can add animations, and embeds, and things like that. For this Figma tutorial, I'm not going to go through all those things in detail; if you want to check that out there's some other Figma tutorials on the YouTube channel that you can look at. In this case, I'm just going to assume that you've already got your presentation and design set up the way you want and all you want to do now is add some page numbers automatically, which we can do using a new feature in the Figma plugin.

To open up that feature, you just click on the little "Page" icon in the top left of your Figma plugin; we can click on this icon here, and that's going to add a new modal or a new pop-up window with some options here for our page numbers. What this does is it essentially creates a slide number Figma component and then it automatically updates the slide numbers whenever those are rearranged or added or removed in the Figma plugin. I'll show you what that looks like now, if you go ahead and click on the "Enable Auto Slide Numbers" toggle, I'm going to click on that, and you can see here when I enable that it actually creates a brand new layer in our Figma file which we can jump to easily by clicking on this little component icon here.

When we click on that, it'll automatically jump to that component in our Figma file, and you can see here that it's got three text layers inside of it; it's got a dark text layer, a light text layer, and a custom text layer, and what those do is it basically allows you to style and customize the page numbers depending on what kind of style you want to use for them. For example, you can see in this case it's automatically gone through and created instances of each of those components; we can see here we've got automatic page numbers on the bottom right of our frames, and we can customize the position of that. For example, if we wanted to change that to be the top right, we can just change that, and it'll automatically move that. We can make it top left, we can do center, all different positions depending on where we want to style those. 

You can also do things like add leading zeros; if you want to add zero, for example, zero one, zero two, zero three; you can toggle that as well and that'll automatically do that for you. 

Then in terms of the colors, as I mentioned, by default it will set it to this "Auto Text Color" setting, which essentially takes the background color of the frame; in this case, we've got a black background color, which is just a solid fill, and then in this one we've got a solid white, and so what it's doing is it's calculating whether this text layer should be dark or light based on the solid background color of each frame, then what we can do is we can actually customize the light and dark colors.

If we go to our component and then we go to the "Dark Text Color", for example, you can see by default it's set to black with a 75 percent opacity, but of course we can change that if we wanted to make it a different color; we could make that a more purple color and we can change that, and that'll automatically change it for all of our instances here. The same thing goes for the "Light Text Color"; by default, that's just set to white with a 75 opacity, we can obviously go ahead and change that if we wanted to. In this case, we could make it green and change that there, and that will automatically update anywhere that the dark or light versions are being used in the instances. 

We can also change it from "Auto Text Color" to just using the "Dark Text Color" if you wanted to only make it use the dark text color for everything, you can do that; same thing with light, you can make it always use the "Light Text Color", or you can go with the third option and make it use a "Custom Text Color" if you want to just have a totally different color in its own kind of category, there's a third option which is the custom text color, and you can go ahead and just change that to whatever you want as well, and that will be applied to everything.

On top of just colors, you can of course style the text. For example, if we change this to top left, and then change the size, you can see when we increase that it's automatically anchored to the top left. The same thing would happen if we changed it to bottom right; if we go to the bottom right, and then we increase or decrease that font size, the instances are automatically constrained to the bottom right. That always allows you to scale the font up or down and keep the anchor position wherever the corner or the edges are in that instance, so that's really handy for doing that.

You can also change the font; we can change that to be bold, we can change it to be a totally different font if we wanted to, we can change that in here and you can basically just customize this however you want. Keeping in mind I'm doing all of this from the master component; we've got the component up here with our three text layers and these are always going to get injected into the instances automatically. You can basically style it in one place and have that style apply to every frame in your file automatically without having to go one by one, you can just style it centrally and that makes it really easy for doing that.

I'm just going to set that back to "Auto", and just use our other components that we had set up, and you can see if we change the ordering of these slides in our Figma plugin, for example, at the moment we've just got it set to sort visually, so we're doing it from top to bottom visually. If we were to reverse that, for example, and sort it from bottom to top, you can see here that the slide numbers changed automatically; we've now got 01, 02, 03, and we're ending at 09 up here because we reversed that order. You can also do this by manually dragging and dropping; if we made "Principle Six" slide one, you can see if we now go to Principle Six, it's made that as the first slide in the ordering of the numbers. Again, if we move that down, changed it to two, it automatically changes it to two. This is a really easy way of keeping all the slide numbers in sync depending on what they're set at in the Pitchdeck Figma plugin.

The same thing applies if you decide to remove some slides from the export; for example, if we didn't want slide six in there at all, we can just remove that and it removes the page number, and it will automatically recalculate all the other numbers based on that. You can see here, the last frame in this case is set to 08; if we start removing more, that'll just keep going down because the total number of slides is being decreased; those slide numbers take into account which slides and how many slides are active in the presentation itself through the Figma plugin. That's a really easy way to keep all of your page numbers in sync without having to manually recalibrate them or update them manually every single time you rearrange them.

That's essentially it; I just wanted to run through all the different ways that you can use this new feature to customize the slide numbers. You can see if the setting is active by seeing this little blue dot next the icon, next to that "Page" icon; that'll just let you know if the "Auto" slide setting is active. You can go in there, and if you want to turn it off, you can just go ahead and click on the "Enable Auto Slide Numbers" toggle again and disable it, and what that'll do is it'll just remove all of the instances that were being added automatically to all of your slides; those go away completely, but it will keep the component hidden, so it won't delete it entirely. The reason for that is just in case you've spent some time styling some of those page numbers, then when you re-enable it, it'll just resume those styles that you've already got set up in there, so you don't have to restyle them if you decide to temporarily disable the slide numbers from showing up. If you did want to remove it entirely from your file, all you need to do is disable this, and then you can go ahead and manually just delete the component; remove it entirely, and then if you then re-enable the "Enable Auto Slide Numbers" toggle, that'll just reset the component back to where we had it at the start, with the default styles and default values.

That's essentially what that looks like there, and of course these will get included with any exports. If you would now export this deck to any of the export options; if you click on the "Export" button, we can either export it to the Pitchdeck web application, which will let you present the slides in the browser and you can share that link with people, or you can export it to PowerPoint, or Google Slides, or Keynote, or we can also just export it to a PDF deck. If we export it to PDF, we can essentially just export that out as a static PDF file, and once that's done we can download it to our computer, and if I open that up now we can see the page numbers will be in there as expected; those are in there, each slide has its own page number just as we designed it in Figma, with the Figma plugin automatically adding those in to each of the slides.

That's what that looks like there; I think we'll leave it there for today I just wanted to run through this new feature with you in case you've been wondering how to automatically add slide numbers to your Figma pages or Figma slides this is a really easy way to go about doing it without having to manually manage a deck especially if you've got dozens of pages that are constantly getting added and removed and rearranged this is a really easy way of kind of putting that on autopilot and allowing you to style them centrally from this slide number component that the Figma plugin helps automatically generate um; yeah thank you as always for watching and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to upload preview links for HTML banners from Figma to Netlify using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-04-01T00:00:00.000Z
dateModified: 2023-04-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-upload-preview-links-for-html-banners-from-figma-to-netlify-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-upload-preview-links-for-html-banners-from-figma-to-netlify-using-bannerify.md
---

# How to upload preview links for HTML banners from Figma to Netlify using Bannerify

#### Video Transcript

Today I'm going to be showing you how to automatically create a preview link of your HTML banners exported from the Bannerify Figma plugin on the Netlify platform, which will let you host it as a URL that you can share around to clients or stakeholders or anyone that you want to share a preview link of your banners with.

To get started, all we need to do is click on the little "Resources" icon in your Figma file, and if you search for "Bannerify", under the "Plugins" tab you'll see Bannerify pop-up. If you go ahead and click on that result, you can run the Figma plugin by either clicking on this "Run" button here or you can click on this little "More options" icon, which I'd recommend, and click on "Save Figma plugin" and that will save it to your Figma plugins list for easy access.

If we go to the Figma page, right click anywhere, go down to "Plugins", then go down to "Saved plugins", you can then click on the "Bannerify" item and that'll run the Figma plugin that we just set up a second ago. With this Figma tutorial I'm not going to be going through the details of how to create the banners and design them and animate them, there's a separate YouTube Figma tutorial on the channel if you wanted to search for that one; today I'm just going to be assuming that you've already got some banners set up. 

I've already got a bunch of banners set up, each of them just have a few layers of content on them; I'm just going to load those into the Figma plugin by clicking on this button here and that's going to load in the banners that we've got from Figma. You can see here that I've already got some basic animations applied; you can see here there's some animations on each of the layers and these are all ready to go; I'm just going to assume that you've already got your banners ready to export from Figma into HTML. 

What we need to do now is follow the steps that you'd usually take; in this case, we'll click on the "Export to HTML" button and that's going to open up the normal export panel that you'd see. In this case, we've got our code export settings, so we can decide what platform to export it to; today, I'm just going to do HTML/CSS, you can choose different ad platforms like Google Ads, but that's up to you. I'm just going to make this retina images and leave everything else as is just to keep it really simple. 

The thing I'm going to be focusing on today is showing you how to upload the preview page, that always gets included in the Bannerify exports, up to Netlify. If we click on this little checkbox here, "Upload Preview Page URL to Netlify", if you click on that toggle, that's going to enable this new section that we can paste a Netlify personal access token into. What you need to do is. if you have an Netlify account, just sign into your Netlify account; if you go to netlify.com and sign into your Netlify account, or you can create a free account if you don't have one; in this case, I'm just going to use my own one. 

I've got my Netlify account logged in and if you click on this link here, the "personal access token" link, it'll take you to this page. What you need to do is create a new access token; I'm going to click on "New access token" and I'm just going to call it "Bannerify", I'm just going to add that in there so I know what this token's being used for. Then I'm going to click "Generate token" and that's going to generate this token here; you can copy that to your clipboard by clicking this icon, and you can also store it somewhere for later, you can store it in a password manager or something like that, somewhere safe to reuse later if you want, because you won't be able to see this code again after you close off this window.

I'm just going to click on "Copy" and then go back to my Bannerify Figma plugin. I'm back in my Figma plugin, and I'm just going to paste in that token that we just copied into this "personal access token" box here. I'm going to paste that in and that's going to load up the Netlify site; because it's the first time I pasted that in for this Figma page, it's created a Netlify domain for me which I can now change in Netlify if I want to; by default, this will be the domain name that will be used for your preview page, but if you don't want the one that's automatically generated by Netlify, you can just click on this "change site name" link here. If I click on that, that's just going to open up the Netlify tab for that site; you can see here this is the site that we just created via the Figma plugin, and now if we go to the "Domain settings", you can see down here that we've got our site information, and I can click on "Change site name". I can click on that and update this, so I'm going to call it "Bannerify Preview Page Demo" and click on "Save", and you can see here that's just changed the name of our site.

If we want to see that reflected in the Figma plugin, we can just go into the Figma plugin and click on this little "refresh" icon, and that's just going to refresh the Netlify site. You can see here that the page URL has been updated to the one we just changed; that's all we need to do to set that up. Now, because we've still got our "Upload Preview Page" toggle enabled, when I click on the "Export Banners" button, which I'll do now, this is going to export all of our banners to HTML, CSS, and JavaScript, export all the images automatically, everything like that; and once it's finished, it's also going to upload the preview to Netlify; that's what it's doing right now, and you can see here it's now completed. 

This is the normal option that we have whenever we export banners from Bannerify; we can either download our zip file, I can click on that, download that to my desktop for example, and if we open up that zip file you can see we've got this folder here and we've got this index.html page which is actually the preview page that we normally get. If I drop that index.html file into the browser, you can see here that this is the local copy of our preview page that we normally get, but because we enabled the preview toggle to also upload this to Netlify, you can see here that we've got our Netlify preview URL showing up as well. It's telling us that we can check out those on the Netlify preview URL, if we click on that link, this is going to automatically load up the URL that we just set up in Netlify. You can see here the custom page name that we gave it, and you can see here that all of our banners are being loaded in to the preview page. You could send this link to a client, or a stakeholder, someone inside your company, or outside, and they can view that link without having to manually open that zip file and load in the preview page by dragging the HTML file in, it'll just do it all on this page here as a hosted link. 

There's also a link here to manage the site settings, if you click on the "site settings" link, that will automatically open the Netlify panel for that site. You can see here we've got the deploy that was just made, that's all the details about the deployment that was deployed from the Figma upload, and then you can also do things like change the domain settings, you can change site settings and change a whole bunch of different things in here. You can get pretty advanced with it depending on what you want do, but for the most part you probably just want to change the site name, as we did before, and you can change that again if you need to, because the site ID itself will stay the same. Even if you change the name of this, it'll basically still link up with the site in Figma; you can change that name and that will get reflected in Figma, but the link itself will upload re-upload when you change it from Figma; that's just something to keep in mind.

That's basically it; I just wanted to run through that really quickly with you if you've been wondering how to automatically create these preview pages that are live rather than having to manually upload the exported HTML preview page somewhere, this is an easier way to go about it if you just want to automate it and use Netlify as the platform to host the preview pages on, which is a really good platform.

One thing to be really mindful of is, if you're not seeing some of the images show up, if you're not seeing any images or any elements aren't showing up in the banners on the preview link, it's potentially because you've got an ad blocker turned on. Sometimes with these banner ads when they're being viewed online, the ad blockers can block some of the images or block some of the scripts and cause it not to display. If you are running into any issues with banners not showing up completely, you might just have to disable the ad blocker that you've got turned on for this URL and then it should be all good to go if you just click "refresh" after that.

We'll leave it there for today; I hope that's been helpful if you've been wondering how to create preview pages for your Figma banners HTML banners that you can share around if you're using Netlify, or want to start using Netlify, it's free to sign up just for an account, and you can basically drop in that key or that token and start creating preview pages directly from Bannerify in Figma. Thank you as always for watching and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add custom HTML, CSS and Javascript to Figma banner exports using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-03-28T00:00:00.000Z
dateModified: 2023-03-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-custom-html-css-and-javascript-to-figma-banner-exports-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-custom-html-css-and-javascript-to-figma-banner-exports-using-bannerify.md
---

# How to add custom HTML, CSS and Javascript to Figma banner exports using Bannerify

#### Video Transcript

Today I'm going to be showing you how to add custom HTML CSS and Javascript to your HTML banner exports from Figma using the Bannerify Figma plugin.

To get started, all we need to do is go to the "Resources" icon at the top of your Figma file, and if you click on that and search for the word "Bannerify", then under the "Plugins" tab you'll see Bannerify pop-up. If you just go ahead and click on that result, you'll be able to run the Figma plugin by either clicking on this "Run" button here, or I would suggest clicking on this little "More options" icon and clicking "Save Figma plugin", and that's going to save it to your Figma plugins list for easy access later.

I've already gone ahead and done that, so I'm going to go back to my canvas, I'm just going to right-click anywhere, I'm going to go down to "Plugins" then I'm going to go down to "Saved Plugins" and then click on the "Bannerify" item, and that's just going to run the Figma plugin we just saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically looks at your Figma page and it treats any Figma frame as a banner. If you've got a bunch of frames added, you can use those as your banners to load up. I'm just going to load up a few now, and it will automatically take the contents of each of those frames and load them up into a timeline in the Figma plugin that you can then animate and create banners with. For today, I'm just going to be assuming that you've already got that sorted; if you want a Figma tutorial about that, you can get more detail from our YouTube channel, there's a Figma tutorial video for designing the banners and animating them, so I'll leave that out of this Figma tutorial for today and just assume that you've already got your banners ready to export.

Today, we're just going to be focusing on exporting HTML banners, we're not going to be looking at the GIF or video option, we're just going to be exporting to HTML. For example, if we click on this "Export to HTML" button, you can see here that we've got our standard export settings; this is basically a bunch of export settings that you can use to customize how you want the banners to be exported to HTML. There's a bunch of different platforms you can export it to; Google Ads and different platforms like that, or just plain HTML and CSS. You can also add a bunch of other toggles and configurations up here as well, and also customizing the preview page, but for today we're going to be looking at a new feature which is this toggle down here.

If you click on the "Inject Custom Code" toggle and turn that on; I've just turned on that option down here, and what this does is it basically gives you a whole new panel that you can use to add custom content or custom code into the banners that you're going to be exporting from the Figma plugin. For example, if we go through the list of options here, we can add custom HTML to the body tag; we'd use that if we want to add custom content inside of each banner. We can also add custom HTML to the head tag; if you need to inject some special meta tags or some special script tags into the head tag of your HTML, you can add that into here. If you need to add any custom CSS styles to style the elements that you've added in your HTML content, you can add them in here. Finally, if you want to add some functionality some interactivity using Javascript, you can write Javascript in here and that will also automatically get added in.

I'm going to go through an example of how this can be useful for you; of course, this is infinitely applicable to anything you really want to do, but for today I'm just going to be using a few of these different options to create something that looks like this. I've got another HTML file that I've already created, and it's just got this little toggle button at the bottom which basically shows and hides some text. It's a really simple little toggle, I've got the code for it over here which we'll go through in a second; this was actually mostly written by ChatGPT, so if you want to use something like ChatGTP to create some of this functionality it can be very helpful for helping with that, and then you can kind of just tweak it to what you need, or if you have a developer, or if you're a developer, you would obviously be okay with writing this on your own as well.

To get started, what we're going to do is start porting some of this functionality over. The first thing we'll do is we'll add the custom HTML to the body tag, which is going to be our content that's going to get added to all of our banners. For example, we can see in the file that we've got here, the HTML file, if we go to our body tag, we can see that the content we're going to need is this button and this div. We're going to grab both of those elements and we're just going to copy those to the clipboard, jump back into the Figma plugin, and just paste those in. We can see here that we've just pasted in the button and we've pasted in the div; you can format those whoever you want, I'm just going to leave them pretty simple in this case, and of course you can customize this text as well; you can edit that directly in this little editor here. 

We've copied our HTML in, and the next thing we're going to do is copy in some CSS styles. I'm going to go to my CSS styles option and just change that, and if we jump back to our HTML file, what we're going to do is we're going to pull out these CSS styles that we've got added to the style tag in our page here, and we're going to bring those over to the Figma plugin and paste those in the same way. We've just pasted in that CSS, and finally we need some Javascript; we're going to go to the Javascript code option and we're going to grab any Javascript that we need. In this case, I've just got a function that we're going to copy; we're going to get the "toggle diff" function, copy that out of the file, paste that into this Javascript code box, and there we go you can see that we've got our Javascript in there as well. It's got some indentation; you can obviously customize that if you wanted to, but I'm just going to leave that for now, as I'm not going to be too worried about how it's formatted, I'm just going to render that out however it comes out. 

That's it; we've got our Javascript, we've got our CSS, and we've got our HTML content that's now going to be included into our banner exports. To show you what that looks like if we now click on the "Export Banners" button down here. I'm going to click on "Export Banners", and that's going to generate all of the HTML CSS and Javascript, along with any images for our banners, as it normally does. If we now download the zip file, I'm just going to save that to my desktop I'm just going to unzip that and open up the folder. We can see here that we've got a little preview page; we can open up that preview page in the browser, if we just drop that into here, we can see here that we've now got some custom HTML. We've got our little arrow button, obviously it's not 100 styled as well as it could be, but if we click on that now we can see that the little text field that we included is popping up; if we expand that out, it shows, and if we collapse it, it goes away. This is selectable text you can highlight, and these are all toggleable per banner. As I said, the design is obviously not great, this is just a very simple example of one thing you could do; you would obviously customize the button to look much better and position the elements to obviously not be overlapping with the toggle, but of course this is just one example of what you could do.

You could also just add static text; you wouldn't have to make it toggleable if you didn't want to, this is just an example to show you how the Javascript could work, but if you needed to add some legal disclaimer text as rich text, for example, you could design these banners in a way where there's some space down the bottom or it has like a nice background fade off at the bottom, and then you could add this custom HTML and CSS for all of the rich text directly into the custom HTML field in the Figma plugin, as we just saw.

That can be really handy, and as I mentioned this is basically as customizable as you want it to be. You could pretty much do anything you want; it's a free form HTML, CSS and Javascript field, so you could load in different file types, you could load in videos, you could load in anything really, and position it and style it however you want based on the functionality that you need. That's just a really basic example of one thing you could do using this new feature, but as I mentioned the possibilities are fairly endless; you can work with a developer, or as I said, potentially work with ChatGTP to create some functionality that you're looking for and then add it into your Bannerify custom code injection setting that's just been added.

Of course, if you did not want to have this code included, you can simply just toggle that off again, and if we re-explored those banners as we'll do now, just to show you what this looks like. If we now re-save that zip file and open that up; I'm just going to go back to my desktop unzip this new file, and if we load up this HTML file, you can see that the custom code's been totally removed, so there's no custom code in that one because we went in here and we turned off the "Inject Custom Code" option. If you turn that back on, all of your code that was included in the last export, whatever that was, will automatically be saved and you can just retrieve that here and use it again; you can just turn that on and off, basically to use it when you need it, and turn it off if you don't need it, but always come back to edit it if you did need to make any changes and reuse it later.

The only one I didn't go into is the custom HTML to head tag; as I mentioned, this is a fairly generic option. All this does is it basically adds custom HTML before the closing head tag; to give you an example of that, if we were to go into one of these banners and load that up in our editor, basically the head tag ends here. We can see down here we've got the closing head tag, so we'll just add that to a new line to see what that looks like, and basically anything inside of this head tag here is usually related to stuff like title tags, we've got meta tags that are automatically adding the viewport, automatically adding the ad size meta property which is required for various bannerad platforms, and we've got our CSS style tag in there as well.

What that setting does is it basically injects, just as we saw with the other options, this HTML head tag setting will basically take whatever you put into this box here; for example, if we were to add, we wouldn't do another title tag, but you could addsomething like a title tag or a custom meta tag. For example, you can add that in there, script tags, sometimes different banner platforms will want you to add different script tags; you can add script tags in there. Anything like that; whatever you put in here will essentially just be rendered just before this closing head tag here, and that's where that's going to go. It's not going to appear as content, it's purely just for linking assets or adding meta tags and things like that, anything that normally goes into the head tag of an HTML document, you can add in there.

Okay, I hope that's been a helpful starter of how you can potentially use this new custom code injection feature; this is going to make it really easy to add extra functionality, and add extra totally custom HTML, CSS and Javascript content into every banner that you export from the Figma plugin, if you require it. As I said, it's a optional feature, it's off by default; but if you're more of a power user or advanced user and you want to play around with adding custom code into your banner exports from Bannerify, this is going to be a really nice way of going about it. We'll leave it there for today; thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: Compare staging sites to Figma designs
description: How to compare staging builds against Figma designs without relying on subjective visual checks.
datePublished: 2023-03-27T00:00:00.000Z
dateModified: 2023-03-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/pixelay-compare-staging-sites-to-figma-designs/
markdownUrl: https://www.hypermatic.com/articles/pixelay-compare-staging-sites-to-figma-designs.md
---

# Compare staging sites to Figma designs

How to compare staging builds against Figma designs without relying on subjective visual checks. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for compare staging sites to figma designs when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Pixelay fits into the process

Pixelay matters in this workflow because QA breaks down when teams are comparing design and implementation manually. Overlay-based review makes front-end drift easier to spot and easier to discuss.

With Pixelay, teams can usually:

- catch visual drift before it ships
- make front-end QA more visual and less subjective
- turn design review into a clearer implementation check

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Pixelay](/pixelay/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If design QA is the recurring bottleneck, Pixelay is usually the best first move. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to export HTML emails from Figma to Mailgun using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-03-27T00:00:00.000Z
dateModified: 2023-03-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-mailgun-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-mailgun-using-emailify.md
---

# How to export HTML emails from Figma to Mailgun using Emailify

#### Video Transcript

Today I'm going to be showing you how to automatically upload HTML emails from Figma into your Mailgun account using the Emailify Figma plugin. 

To get started all you need to do is go up to the "Resources" icon at the top of your Figma file here, click on that, and then search for the word "Emailify", and under the "Plugins" tab you'll see Emailify pop up. If you just go ahead and click on that result, you can either run the Figma plugin by clicking on this "Run" button here or I'd recommend clicking on this "More options" icon here and clicking "Save to Figma plugins" and that will automatically save the Figma plugin to your list for later.

I've already gone ahead and done that, so I'm going to go back to my Figma canvas, I'm going to right click anywhere, I'm going to go down to "Plugins" I'm going to go down to "Saved plugins", and then I'm just going to click on the Emailify Figma plugin and that's just going to run the Figma plugin we just saved a second ago. 

If you're new to the Figma plugin, the way it works is that the Figma plugin helps you design emails in Figma that can then be exported out to HTML to various platforms. For example, I've just got this really simple email that I generated using some of the components in the Figma plugin, so you can go ahead and add those and customize them; we've got another tutorial on our YouTube channel that goes into depth on how to actually do that, so I'd recommend checking that out, but I'm going to assume that you've already got your email designed using the Emailify Figma plugin and now you just want to upload it to your Mailgun account.

To upload the HTML email from Figma to Mailgun, all you need to do is click on the "Export HTML" button in the Figma plugin and then you'll notice here that it's currently set to "HTML Email", which is the default export, this will export it to a zip file on your computer, but today we obviously want to export it to Mailgun. We're going to click on this little select box and we're going to change it from "HTML Email" and scroll down to this "Platform Integrations" group and we're just going to scroll down to the letter "M" and find "Mailgun". 

I'm going to go ahead and click on the Mailgun select item and that's going to change the context down here to ask for two bits of information; it's going to want our domain name and our private API key from Mailgun. There's two links here that you can click if you're already logged into Mailgun, as I am over here, you can go ahead and click on these two links. We can click on the domain link and this will load up the page in Mailgun with your domain names, at the moment I've just got this sandbox domain set up, but you might have a different one; I'm just going to click on that and highlight the domain and I'm just going to copy that to my clipboard and go back to Figma and paste that into the domain input field here.

I'm going to paste that in, and then I'm going to also click on this private API key link and click on that and that's going to open up the window for the private API key in Mailgun. All you need to do is click on this little "eye" icon here to reveal the key, so I'm going to click on that now and I'm just going to copy my private API key, I'm going to copy that to my clipboard as well, and I'm just going to paste that into the key field inside of Emailify as well.

I've pasted that in and now you can see here that we've got the "Upload to Mailgun" button ready to go; I'm going to click on that now, I'm going to click on "Upload to Mailgun" and that's basically going to generate the HTML automatically, it's going to upload any images that are in the email and it's going to send those templates to Mailgun; it's telling us that we've got our Mailgun templates uploaded, so you can click on the Mailgun account link and then it says to go to the "Sending" menu link followed by the "Templates" link. If we look for that now, we can find that in the left hand column, we can see here we've got the "Sending" link here; click "Sending" and then once that's expanded we can see the "Templates" link as well. We can now go ahead and click on "Templates".

We've got our domain selected, you might have more domains that you've selected to upload to, but in this case I've just got this one; you can change it in here, and we can see here that the email we just uploaded from Emailify is now in here and we've got a little description letting us know that it is from Emailify. If we click into that, we can see here that it's an HTML email, I've got the template name with a timestamp, this template name needs to be unique, so that's why it has a timestamp built into it.

We can see down here that we've got some code snippets; we can see we've got Python, Java, Ruby, PHP, C#, Node; depending on your environment that you're going to be sending the email from, you can basically go ahead and copy this code and that will be ready to go to send that email to whoever you're going to be sending it to. With Mailgun, you're obviously going to be integrating this into some sort of application, so you've obviously got some sort of custom application flow; maybe you're sending a "thank you" email or sending a "welcome" email or something like that, that you've designed, and this code is now going to help you send out that HTML to whoever you want to send it to. You can see here we've got two address, you can obviously swap that out in your code you can change the subject line, but the important thing here is that the template is what's going to be sent out. If you were to run this code, you would basically get the template that we just uploaded, the HTML template, sent to that address with whatever subject you want provided that the template is matching, the one that we just uploaded. 

That's basically it; that's a really easy way of getting HTML templates from Figma directly into your Mailgun account automatically using the Mailgun API via the Emailify plugin. That's basically the example, so I'll leave it there for today, I just wanted to run through that with you really quickly, as this is a new integration with Mailgun in Emailify. I thought it'd be worth just recording a short video demonstrating how you can actually integrate your Mailgun account with Figma in that way.

I hope that's been helpful if you're a Mailgun user and a Figma user; this is going to be a really easy way to get your HTML emails out of Figma and into your Mailgun account without doing any copy and pasting or anything like that. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to import optimized SVG files to Figma with one click using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-03-22T00:00:00.000Z
dateModified: 2023-03-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-import-optimized-svg-files-to-figma-with-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-import-optimized-svg-files-to-figma-with-one-click-using-convertify.md
---

# How to import optimized SVG files to Figma with one click using Convertify

#### Video Transcript

Today I'm going to be showing you how to import pre-optimized SVGs into your Figma files using the Convertify Figma plugin.

To get started, all we need to do is go up to the "Resources" tab in your Figma file and if you search for the word "Convertify", under the "Plugins" tab you'll see Convertify pop-up. If you click on that, you'll be able to run the Figma plugin by either clicking on this "Run" button here or you can go to the "More options" icon, which I'd recommend, and click on the "Save to Figma plugins" item and that will just save it to your Figma plugins list for easy access later.

I've already gone ahead and done that, so I'm going to go to my canvas I'm just going to right-click anywhere, I'm going to go down to "Plugins", and I'm going to click on the "Saved Plugins" item, then click on "Convertify", and that's going to run the Figma plugin that we just saved a second ago. You'll notice here that the Figma plugin by default automatically sets itself to export Figma of Sketch, but if we open up this drop down, we'll see some different options here, and today we're going to be going down to the "Import to Figma" section and we're going to click on the "Import Optimized SVG to Figma" option; this is going to change the Figma plugin's context to accept SVG files.

Just to show you the difference between importing them normally and importing them through the Figma plugin, I'm just going to drop a couple of SVGs onto the Figma canvas. I've just got these two SVG files that I'll drop into Figma, and if we zoom in here you can see that these two SVGs are basically vector based SVGs; one is this bear vector and one is just this sort of flat illustration; if we open up the layers you can see here that we've basically got a bunch of vector layers, a bunch of groups, you can expand these out, and that's what the vectors and SVGs are made of. It's the same thing for this bear SVG, if we open up the bear SVG, you can see that we've got a bunch of groups, we've got a bunch of vector layers, and inside of the groups are even more vector layers; quite a lot of layers in there, and you can just keep going and see what that looks like.

That's just kind of a base reference of what we're working with here, what we're going to be doing now is importing these SVGs to Figma again, but we're going to be doing it through the Convertify Figma plugin. All you need to do to import an optimized SVG via the Figma plugin is to drag and drop the SVG file into the Figma plugin here, and that will automatically add an optimized SVG to your Figma page and it's going to add this little optimized flag at the end just so you can easily see the difference on your canvas. If we compare these two, you can see that this SVG is much simpler than the one that we imported a second ago; the first thing you'll notice is there's basically no grouping, so the groups have been removed and there are far less vector layers as well. 

The vector layers have kind of been simplified to reduce the number of them and merge them together when they are appropriate to do that, and we can see this in an even more striking difference when we import the bear SVG. I'm just going to drag and drop that SVG into the Figma plugin and that's going to import the optimized bear SVG as well. Visually, you can see these are identical, they look exactly the same, but if we open up the group here you can see that there's quite a lot less vector layers than the previous version. If we open up the original one that we imported, there's many more vector layers in here than we've got in our imported one here, and the reason for that is the Figma plugin is basically tidying up all of these vector paths, it's merging them, so you can see this is all of the vector layers in this in this particular SVG, whereas if we go into the original one you can see that there's many, many more vector layers, many more groups nested groups, nested layers, and in our other one for comparison, much more simplified much more optimized for Figma.

You can actually just work with these paths much more easily rather than having them all kind of split up into many, many more layers and nested groups; this is just a really easy way to pre-optimize your SVGs before they get added to Figma, this is going to help simplify the paths, it's going to simplify the vector shapes, and again, it's going to look the same but much more easy to work with when you're actually drilling down into these vector layers and needing to modify things. I just want to keep that really quick for today, just to show you how to pre-optimize your SVGs easily if you want to be adding simplified SVGs into Figma; of course, you can do it natively, but now you also have the option of importing them via Convertify if you want to pre-optimize and simplify those SVG paths.

I'll leave it there for today, and I hope that this Figma plugin is useful if you've been wondering how to import simplified optimized SVGs, feel free to give this a try with your team and I hope it helps with your workflow. That's going to be all for today; thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add scrollable slides to Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-03-16T00:00:00.000Z
dateModified: 2023-03-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-scrollable-slides-to-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-scrollable-slides-to-figma-presentations-using-pitchdeck.md
---

# How to add scrollable slides to Figma presentations using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to easily add scrollable mockups to any presentation from Figma using the Pitchdeck Figma plugin.

This can be really handy for presenting website mockups or just longer pages that aren't going to fit into the normal size of a monitor or a TV or whatever you're presenting the presentation on. To get started, all we need to do is install the Pitchdeck Figma plugin by going to the "Resources" icon at the top of your Figma file, searching for the word "Pitchdeck", and and under the "Plugins" tab you'll see Pitchdeck pop up. To run the Figma plugin, all you need to do is either click on this "Run" button here, or I'd recommend clicking on the "More options" button here and clicking on the "Save Figma plugin" link, which will automatically save it to your Figma plugins list for easy access later. 

I've already gone ahead and saved it to my Figma plugins, so I'm just going to go to my canvas now, I'm going to right-click anywhere, I'm going to go down to "Plugins" and then I'm just going to go down to "Saved Plugins", click on "Pitchdeck", and that's just going to run the Figma plugin that we just installed a moment ago. As you can see here, what the Figma plugin basically does, if you're new to it, is it takes any Figma frames that are on your current page, and it basically treats them as slides. For example, we've got a bunch of simple slides here each of them have a few different elements; we've got some text layers and some images and things like that and those each get treated as a different layer inside of each slide, but for today we're just going to be mainly focusing on how to add scrollable slides into your presentations using the Pitchdeck Figma plugin.

For example, this is an example of a normal sized frame, this is just a 1920 by 1080 frame, and as you can see it fits nicely into what would normally be a regular screen size, but for this presentation we actually want to present a few website mockups and those are much much longer. These are like, you know, 5,000 pixels long; in this case, what we can do is we can add these longer frames to our page and Pitchdeck will now automatically detect if they're scrollable. If we go through these frames, you can see here that because these ones are longer, it will automatically make them scrollable inside of our presentation. We can go through them in more detail rather than having them squished all the way into fitting into this frame, making them really short and narrow, this allows us to automatically scroll through those longer frames inside of our presentations that are exported from the Figma plugin.

I'll show you what that looks like now; all we need to do is go to the export panel up here, so we're just going to click on the "Export" button and make sure that the "Pitchdeck Presentation" option is selected. Please keep in mind that this isn't going to work for any PowerPoint exports, for example; PowerPoint files need to have all of the frames be the same size, but for our Pitchdeck presentation, which is going to be available in the browser, we can upload that and have these scrollable. I've already created this URL before, but if you haven't, there'll be a button that says "Upload Presentation", I'm going to click on "Update Presentation", I'm just going to click on that now, and this is going to upload the slides that we've added to Figma from the design. You can see here it's basically going through each of the frames uploading any images for each slide, and it's creating those as a URL that will be able to view in the browser.

It's just finished uploading those images, so I've got a couple of options here; I can either send a URL with a separate password, or I can copy this passwordless URL to automatically log in in the browser. I'm just going to do that quickly now, I've just clicked on the little "Copy" icon, I'm going to go to my browser, I'm going to go to the address bar and just paste that in, and once that loads you'll see here that we've got our slide that we loaded in from the Figma plugin. We've got all of our usual slides here which are all animated and fixed size as you'd expect, but the ones that we uploaded that are scrollable we can also select and now scroll within the browser, and we get a little notification here as well. 

We can scroll through this and present it to clients, or for clients looking at this link on their own, they can go through and take their time and scroll through the whole slide, and you don't have to worry about the content being squashed down to fit into the height of the slide, you can just slide through those and scroll down the content. We can see that for the other ones as well, we've got this other one; again, it lets you know briefly that it's scrollable just to avoid any confusion. This one's just a Museum website design that I got off the Figma Community, and finally we've got a third one here which is another website mockup also scrollable that we can now scroll through and check out as well. 

That's basically it; this is a new addition to Pitchdeck, it just came out this week. If you've been wondering how to automatically add scrollable slides, this is now an automatic option that gets added into the web presentations that you upload from the Figma plugin, and the thing that triggers it is basically if any slide is longer than it is wide, it will automatically create a scrollable selection. For example, the cutoff would basically be a square frame, so if you had a frame that's exactly square, like 1920 by 1920, in that case it would still just be fit into the the presentation slide, and it wouldn't scroll at all. As soon as you get taller, if it's 1920 by 2000, it will automatically convert that into a scrollable one and allow you to scroll through any of those extra bits of pixels at the bottom of the frame.

I just wanted to keep it really quick for today, and show you this new feature in case you've been wondering how to add scrollable website mockups or scrollable pages into your Pitchdeck presentation, this is a really quick way of going about it, and hopefully it gives you a little bit more flexibility with the types of content that you can present when you're using the Figma plugin and the web app to present things to clients and stakeholders. We'll leave it there for today; thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to import PDF files to Figma with one click using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-03-15T00:00:00.000Z
dateModified: 2023-03-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-import-pdf-files-to-figma-with-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-import-pdf-files-to-figma-with-one-click-using-convertify.md
---

# How to import PDF files to Figma with one click using Convertify

#### Video Transcript

Today I'm going to be showing you how to automatically import PDF files directly into Figma using the Convertify Figma plugin.

To get started, we just need to go to the "Resources" icon at the top of your Figma file, and if you click on that and search for "Convertify", under the "Plugins" tab you'll see Convertify pop-up. If you just go ahead and click on that, you can run the Figma plugin by either clicking on this "Run" button here or I would suggest clicking on this little "More options" icon and adding it to your Saved Plugins. I've already clicked on that; I've got it in my Saved Plugins, which I can access by right clicking anywhere going down to "Plugins", going down to "Saved Plugins" and then clicking on the "Convertify" item, and that's just going to run the Figma plugin we just set up a second ago.

When we open up the Figma plugin, by default it will be set to "Export Figma to Sketch" but you want to change this in this case to import PDF files, so you can just click on that drop down, go down to the "Import to Figma" section and then just click on the "Import PDF to Figma" item and that'll just change the context of the Figma plugin to accept PDF files that you can drag and drop from your computer. By default, it's going to import these as bitmaps or JPG images, we also have the option to import the pages as vector layers, but this feature is currently in BETA; I'll show you what that looks like in a moment, and we can compare the two. I've just got a few different PDF files here, I've just got three that I'm going to try importing from PDF to Figma today. The first one I'm going to import is just this really simple portfolio PDF; I'm going to drag and drop that into the import PDF drop box in the Convertify Figma plugin, if I drag and drop that, that's basically going to import the pages from our PDF directly into Figma as images. We can see here that if I zoom in, we've got some pixelation because they're just normal images instead of vectors, but this is basically the most visually accurate way to import your PDF pages into Figma; they'll just get imported as images rather than vectors or editable layers.

The other alternative, as I mentioned, is we can check this toggle here to import the pages as vector layers; if I re-import the same file, so I'm just going to drag and drop that PDF into Figma, let go, and that's now going to import the PDF pages into Figma as vectors. When we zoom in this time we'll be able to see that the vector shapes are obviously much sharper, we don't have that same pixelation that we saw a second ago; we can basically zoom in and all this will be very sharp. The only downside to this is that the accuracy may not be as good, as I said, it's still in BETA, but the other thing is if you're using text layers in your design or in the PDF file these basically just get imported as vectors. As you can see here, this is a vector path of that text; unfortunately this isn't actually editable text; in terms of if you're in Figma and you create a text layer you can obviously edit this text in a text box but because we're importing these PDFs as vectors basically the text layers get imported as paths. You can edit these, you can move them around, you can change the colors, all that sort of stuff, but you just can't edit it. We can obviously layer in text layers into the design, so we could overlay text layers and remove text layers and things like that, but it's just worth noting that this is not going to be native Figma text, so that's just something to be mindful of.

The other thing we can do is we can import designs that maybe don't have any text at all; for example, we've got some illustrations here that are in PDF, so we can go ahead and import those into Figma just by dragging and dropping that PDF file into Figma as well. Again, I'm going to do the JPG version first just to show you what that looks like, this option is always a bit quicker, and as I mentioned, always gets a bit more visual accuracy because we are just importing them as JPG rather than vectors, but once again we can import these with the vector layers turned on. I'll re-import that file, drag and drop the PDF into Figma, and that will automatically import the PDF file as vector layers into your Figma canvas. As I mentioned, and as you can see here, it's always going to be a bit slower to import the vector option rather than the JPG one, but once that finishes we should see these in our Figma file. As you can see, as I mentioned, there's some cases where it's going to be a bit buggy and you're not going to be able to see some of the imported stuff, this might be just due to some clipping masks. We've got some clipping in here which is probably going to be hiding some of that content; you can probably edit this manually to get the actual content out; there's going to be some content in there, as you can see in this case, it was just an image that was being masked. You can usually get the content out, but sometimes the clipping's a bit off, but obviously this will be fixed up in future versions of Convertify as well. As I mentioned, it's currently just in BETA, but you can see here that we've got vector layers; these are looking much sharper than the JPG one that we had before. That's another option you can use if you wanted to import those PDFs into Figma.

The last file I'll import is just a portfolio PDF; again, I'm going to do this as JPG first just to show you what that looks like, so I'm going to drop that PDF into Figma, this is going to be importing five pages. You can see here it's imported those five pages from our PDF; we've got a few different portfolio pages, different lengths, and that just instantly imported them into Figma. These are again just images, so we can show and hide those, we can move them around as images, obviously. If we change the background, you can see where those are coming in, but as I mentioned these are just images; they're not editable as far as any content goes. Once again, we'll try it with the vector layers turned on, so I'm just going to drag and drop that PDF into Figma again, and this time it's going to import it with all of that content as vector instead of just a flat image based import. That's just inserting the PDF pages now, and we can see here again I'll just change the background; we can see what's actually being imported and if I zoom in we can see here that this is all vector based content. We've got our vector-based text layers here, so you can see here these are much sharper than before.

As I mentioned, the only downside is that you've basically got the text exported as paths. This is not editable text as far as text layers goes, these are just vector paths, so it's going to be visually accurate. The reason why this usually happens in PDFs is the text basically gets outlined as vectors, and that's to avoid any issues with fonts that may not be included on the computer of the user viewing the PDF, it's trying to increase the visual accuracy of the document without relying on fonts. That's usually why PDFs are more geared towards this kind of text content, but as I said, there's going to be a couple of issues with things like clipping occasionally, so you may have to jump in there and extract some of those layers. You can see here that the rectangle is basically being hidden, so we can bring that out and you might have to sort of manually clip that as well, which you can do by changing this to fill and then you can do things like resize that to clip it again. As I said, there might be a little bit of manual updates that will be required for some of these layers in the meantime, but this is going to get you a pretty good import of PDFs in both either bitmap or vector based quality. As I mentioned, you're probably not going to be wanting to use these if you need to edit the actual text, this is more so if you need to get some content from a PDF directly into Figma automatically, that you can then use for some purpose that may not require actually editing the text, but more so just getting a vector copy of the design from your PDFs into Figma, this is going to be a really quick way of going about it.

I'll leave it there for today, I just wanted to show you a few examples of how you can import PDF files into Figma either as flat images or vector-based layers, as we just saw in this example. I hope that's helpful if you've been wondering how to import content from PDF files into Figma without going through other kind of hacky workarounds like opening up in a different tool and copying pasting the layers out and things like that can only be a little bit tricky, but I hope this has been helpful if you've been wanting to automate this process, feel free to give Convertify a try and hopefully you can import your own PDFs into Figma in a way that's going to be helpful. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: Developer handoff workflow for Figma teams
description: A cleaner developer handoff workflow for teams that need inspect output, content clarity, and QA before launch.
datePublished: 2023-03-09T00:00:00.000Z
dateModified: 2023-03-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/developer-handoff-workflow-for-figma-teams/
markdownUrl: https://www.hypermatic.com/articles/developer-handoff-workflow-for-figma-teams.md
---

# Developer handoff workflow for Figma teams

A cleaner developer handoff workflow for teams that need inspect output, content clarity, and QA before launch. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Weblify

[Weblify](/weblify/) is one of the more useful tools in this workflow. Weblify is helpful in this workflow because the biggest gap is often between a finished design and usable code output. Cleaner snippets and inspect-friendly output help teams move from mockup to implementation with less rework.

### Pixelay

[Pixelay](/pixelay/) is one of the more useful tools in this workflow. Pixelay matters in this workflow because QA breaks down when teams are comparing design and implementation manually. Overlay-based review makes front-end drift easier to spot and easier to discuss.

### CopyDoc

[CopyDoc](/copydoc/) is one of the more useful tools in this workflow. CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: tutorial
title: How to embed Figma Prototypes in Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-03-06T00:00:00.000Z
dateModified: 2023-03-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-embed-figma-prototypes-in-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-embed-figma-prototypes-in-figma-presentations-using-pitchdeck.md
---

# How to embed Figma Prototypes in Figma presentations using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to embed a live Figma prototype into any element of your slides in a Figma presentation using the Pitchdeck Figma plugin.

To get started all we need to do is open up a Figma file, click on the little "Resources" icon at the top here, and if you search for the word "Pitchdeck", you'll see Pitchdeck pop up. All you need to do is click on the Pitchdeck result, and then you can run the Figma plugin by either clicking on this "Run" button here or you can click on the little "More options" icon and click on "Save Figma plugin" and that'll just make it easier to access it later. I've already saved it to my Figma plugins list, so to run the Figma plugin I'm just going to go to my Figma canvas, right click, go down to "Plugins" go down to "Saved Plugins", click on the "Pitchdeck" item, and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically treats any frames on your page as a slide. I've got a bunch of different slides here and in each of those frames I've just got a bunch of text layers and content layers, and those will get treated as individual layers in your slides that you can add things like animations and links and inputs to; for today's Figma tutorial, I'm going to be focusing on how to embed a live Figma prototype. To do that, all I've done is just set up a brand new frame called "prototype Embed" (you can call it whatever you want), and inside of that frame I've just got one layer, it's just a rectangle layer called "Embed", and this is basically just going to be a placeholder layer for where we want our Figma prototype embed to go.

In this case I'm going to be embedding a different Figma file; I've got this other landing page design that I grabbed from the Figma Community and I'm going to be embedding this as a live Figma prototype in our Pitchdeck presentation. The first thing I'm going to do is just change the Figma prototype background and I'm going to change it to the same color as my presentation slides. In this case it's going to have a white background, so what I want to do is in my design or the embed that I want to include I'm just going to click on the "Prototype" tab here, then I'm going to go down to the "Background" option and I'm going to change that to white. You can just change that to whatever background color you want; in this case I'm just going to leave it to white, which matches the slide background as you can see here, the outer background border that I've got set is white, so I'm going to set the prototype background to white as well.  

Then, to get the Figma prototype link all you need to do is click on the little play button here to go into present mode and this is going to load up the Figma prototype window; what we want to do is we want to click on the "Share Prototype" button, and then we want to make sure that the settings are set to "Anyone with the link", so "Anyone with the link" is selected instead of "Only people invited". I've got "Anyone with the link" and then "Can view"; I want to set that to "Can view" instead of "Can edit", as it doesn't need to have an edit permission, just "Can view". Once those two options are set, you can click on the "Copy link" icon here; click on "Copy link", that's going to copy it to our clipboard, and then we're basically ready to go.

Now I'm going to go back to my presentation design, I'm going to go to my "Prototype Embed" slide and instead of applying an animation, I'm going to go to the "Embeds" tab; I'm going to click on "Embeds" here, and that's going to give us a text area to paste an embed link. In this case I'm going to be pasting it onto this rectangle layer embed layer here that we set up, I'm going to click on the input field and paste that Figma prototype Link in that we just copied from the Figma file, and you can see here it instantly loads up the Figma prototype. We can scroll through this, we can interact with it if it has any interactivity, we can do that as we'd expect, but for today I'm just going to be mainly using it as a way to present a live Figma file inside of our presentation.

Now that we've got that set up, I'll just mention that you can use this on any layer; if you did want to apply it to a different slide you could apply it to, for example, this little rectangle layer. We've got our little image layer, you could paste it in there, and that would replace that layer with the Figma prototype as well. Obviously, that's going to be a bit smaller and it's got this overlay on it, so maybe this isn't the best slide for it, but I just wanted to show you that you can basically embed different things onto different layers in any slide, and that will work as expected; I'm just going to remove that.

Now that we've got our embed set up, all I'm going to do is now export this so we can actually present it in the browser. What we need to do is click on the "Export" button in the Figma plugin; I'm going to click "Export" make sure the format is set to "Pitchdeck Presentation (Web URL)"; I've got that selected, and then all I need to do is click on "Update Web Presentation" or "Upload Web Presentation" if you've not already uploaded one yet. I'm going to click on "Update Web Presentation", this is basically just going to quickly upload all of the images and slide data and we're going to get this message here that lets us know the presentation is ready to go. 

You can either send this to your end user or customer as a separate password and URL, but in this case I'm just going to make it quick and copy the "Passwordless URL", which will automatically log into the presentation for me. I've copied that to my clipboard just by clicking this little "Copy" icon, and if I go to my browser and paste that in; I'm just going to hit "Paste" and then "Enter", and this is going to load up the presentation that we just uploaded from Figma. We can jump around here, we can load up our different slides that we created, we've got all of our animations and things like that, but of course we want to actually check out slide two in this case. I'm going to click on slide two, and this is going to now load up the live Figma prototype that we just embedded using the Figma plugin.

You can see here this is the live Figma prototype added exactly where we wanted; you can see we've got our outer kind of padding that we kept on the slide to make sure that we've got a bit of a buffer, we've set the background to the prototype as white as well which means we can basically now scale this up and down, and we can scale it without having any issues with background colors or anything coming through from the Figma prototype. That's really nice if you want to make it bigger or smaller or go full screen, the prototype is going to scale up and down with that as well. 

That's basically what it looks like there, and I don't think this really has any interactivity, but this is a live Figma designl, so what we can do is if we go to our Figma landing page in the design, and we want it to change some of this content. For example, if we just jump in here and change this to; I'll just quickly change the font, so we'll just make this "Arial" for now and replace that; we can basically change this content here to be 
"Presentation Live Updates" here, and if we go back to our presentation you can see here that it's basically updating in real time. If I just move that over a little bit for you to see, we can see here that this is basically going to change in real time; this is 100 live from Figma embedded in your presentation. You can basically make changes to that presentation even after the link has been shared or while the presentation is happening; maybe you want to present something and make changes in Figma while you're presenting, that could be a interesting use case as well for showing off work to clients that's in progress.

That's basically it, I just wanted to show you the basics of how to embed a live Figma prototype into your presentations that are viewed in the Pitchdeck web application; this is a really easy way of going about it and it gives you a lot more flexibility to enhance what kind of content you can show in a presentation that you're sharing with clients or teammates or stakeholders as well. Let's leave it there for today, I hope that's been interesting for you if you've been wondering how to include live Figma prototypes inside your presentations this is a really, really easy way to go, especially if you're already using the Pitchdeck Figma plugin, this is just a new embed that's been added. 

If you want to see what other embeds are available, you can click on this little "Supported Embeds" link in the Figma plugin, and that's just going to open up a link to the documentation and give you a whole list of examples of other services that are supported to embed into your slides as well. As I said, you can kind of jump in here and this will load up a bunch of different examples; we can see we've got Figma designs, Figma prototypes, Loom, Lottie files, Google Docs, GIFs, MP4s, SoundCloud; all these different platforms you can embed directly into the Figma plugin for your presentations.

Let's leave it there; thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: Figma design token export
description: A practical approach to exporting design tokens from Figma into more usable implementation output.
datePublished: 2023-02-20T00:00:00.000Z
dateModified: 2023-02-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-design-token-export/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-design-token-export.md
---

# Figma design token export

A practical approach to exporting design tokens from Figma into more usable implementation output. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for figma design token export when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Weblify fits into the process

Weblify is helpful in this workflow because the biggest gap is often between a finished design and usable code output. Cleaner snippets and inspect-friendly output help teams move from mockup to implementation with less rework.

With Weblify, teams can usually:

- turn designs into code-friendly output faster
- reduce repetitive translation from Figma to front-end code
- make developer handoff more practical for real production work

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Weblify](/weblify/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If code generation or developer handoff is the recurring pain point, Weblify is a strong fit. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: Best Figma plugins for localization workflows
description: The best Figma plugins for localization workflows when you need faster content updates and fewer manual design edits.
datePublished: 2023-02-15T00:00:00.000Z
dateModified: 2023-02-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-localization-workflows/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-localization-workflows.md
---

# Best Figma plugins for localization workflows

Localization work falls apart fast when every text change has to be made manually in every mockup.

The best Figma plugins for localization workflows are the ones that separate content management from repetitive design editing. If your team handles translated copy, spreadsheet-driven content, or recurring text updates across many frames, these are the plugins that matter most.

### CopyDoc

[CopyDoc](/copydoc/) is the obvious first choice here.

It is built for exporting, importing, localizing, and updating text in Figma designs. That makes it useful when content lives in spreadsheets, when translators need to work outside Figma, or when approved copy has to be rolled back into a design file quickly.

For localization-heavy teams, that is much better than editing every string by hand.

### Emailify

If your localization workflow includes HTML emails, [Emailify](/emailify/) is especially useful. It helps teams keep the email design in Figma while handling export and downstream HTML output more cleanly.

That matters when localized campaigns need to go out quickly across multiple languages and regions.

### Pitchdeck

Presentations also become painful when localized versions are needed. [Pitchdeck](/pitchdeck/) helps teams keep slide design in Figma, then export finished decks for stakeholders who need PowerPoint, Keynote, Google Slides, or PDF.

### Why this matters

Localization is rarely just a translation problem. It is an operations problem.

The bottleneck is usually not “how do we translate this sentence?” It is “how do we update all of these designs safely, accurately, and without wasting two days on tedious edits?”

That is why [CopyDoc](/copydoc/) is the anchor tool here, with [Emailify](/emailify/) and [Pitchdeck](/pitchdeck/) supporting the channels where localized content actually ships.

---

---
type: tutorial
title: How to sync a folder of images to Figma layers with a spreadsheet using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-02-06T00:00:00.000Z
dateModified: 2023-02-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-sync-a-folder-of-images-to-figma-layers-with-a-spreadsheet-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-sync-a-folder-of-images-to-figma-layers-with-a-spreadsheet-using-copy-doc.md
---

# How to sync a folder of images to Figma layers with a spreadsheet using CopyDoc

#### Video Transcript

Today I'm going to be showing you how to easily import a bunch of image files from your computer directly into your repeatable Figma layers in your design in Figma, along with any text content that you also want to add.

We're going to be able to do this without having to first upload those images to a server somewhere, and you'll be able to import those image files directly from your computer using the CopyDoc Figma plugin. To get started we just need to install the Figma plugin by going to the "Resources" icon at the top of your Figma file, if you click on that and then search for "CopyDoc", under the "Plugins" tab you'll see CopyDoc pop-up, and all you need to do to run it is either click on this "Run" button here or you can click on this little "More options" icon and just hit "Save plugin" and that will save it to your Figma plugins list for easy access later. I've already gone ahead and done that; I'm going to right click on my canvas, I'm just going to go down to "Plugins", then I'm going to go down to "Saved "Plugins", click on the "CopyDoc" option and that should just open up the Figma plugin we just saved a second ago.

To get started, all we need to do is first make sure that we've got our component or our rows in our Figma file that we want to sync content to. In this case, I've got this little movie card and this is going to correspond to a spreadsheet that I've got set up in Excel. You can see here I've got three columns, I've got an "#Image" column, I've got a "#Title" column and a "#Genre" column; and you can see on the first row of the file these are my headings or my row label for those different content pieces, and these correspond with my Figma file. If we go to our Figma file we've got this little simple component and you can see here that we've got three layers: we've got an "#Image", layer, a "#Title" layer and a "#Genre" layer; these two are text layers and this one is just a rectangle layer. You'll notice that the layer names are identical to the names of our header in the spreadsheet file, and this is important, because it's going to tell the Figma plugin which bits of content we want to sync to what layer. In this case you can see that the image layer is matching up with this column, our title layer is matching up with this text layer, and the genre column is matching up with this text layer here. 

In this case, I'm going to be syncing up these bits of content with these designs here, and let's just add one more so I can show you how I got that image Link in there as well. I'm just going to copy this layer here, and it's kept our name, so we've got the same layer names in our instance here, and what I'm going to do is add one more movie to sync up in this file. What I'm going to do is I'm going to go to Google, I'm going to go to Google Images, and I'm going to search for another movie; let's do "The Menu" movie and we'll just search for the poster. You can click on any of these results, and what you want to do is basically find the image that you want to use, and in this case we're going to save it to our computer; we're going to right click on the image, we're going to click on 
"Save image as" and then we're just going to save it to a folder that we've got our images in. You can name the image if that's easier, so we can do "the-menu-poster.jpg", and I've just saved that to my images folder that I've got set up on my desktop, and you can see here that we've just saved it as this image here. If we open that up, you can see that's now on our computer.

What we want to do is we want to take that image name and we want to copy it into our spreadsheet. I'm going to copy it under my "#Image" row and just paste it into the fifth row there, and then I'm going to give the title a name; I'm going to give it a name of "The Menu" and then I'm just going to categorize it as a "Comedy". That's basically now pointing to this image file that we've saved in our "images" folder here. You'll notice that the spreadsheet file is saved here, so we've got our "movies.xlsx" spreadsheet file and then I've created a second folder next to it called "images", and I've put all of the images that I'm referencing in my spreadsheet into that folder now. You don't have to put them into a subfolder, you can just have them sitting alongside the spreadsheet, but just to keep things easier and neater if you just organize them into a folder, that's going to be easier to manage.

Now that we've got our "images" folder and we've got our spreadsheet completed, what we're going to do is we're now going to create a zip file containing all of these files. What we need to do is select our "images" folder and our "movies.xlsx" spreadsheet file, and then you just want to right click on both of those files and click on "Compress"; that's going to create a new zip file, and inside of that zip file contains the spreadsheet and this folder full of images. You can call that zip file whatever you want, it's just called "Archive.zip" in this case, but it doesn't really matter what you call the zip file.

Now what we can do is we can go back into Figma, and we're going to click on this little button here called "Sync Content"; next to the sync spreadsheet content option, just click on "Sync Content" and that's going to bring up this little pop-up window in the Figma plugin here. It's going to tell you to either drag and drop an Excel (.xlsx) file or a CSV (.csv) file, or a zip file containing either a CSV (.csv) file or an Excel (.xlsx) file along with any images that you might reference in that spreadsheet. In this case we can drop in the zip file that we just created, so I'm going to drag and drop that "Archive.zip" file from our folder and I'm going to drag and drop that directly into this little drop zone in the CopyDoc Figma plugin. You can see here it's automatically opened up the zip file in our Figma plugin and it's got a preview of the spreadsheet columns that we've used. You can see that we've got our image, title, and genre; and you can see down here that if we select the Figma layers we want to sync, I'm just selecting the top level Figma layers here that we want to sync, and what that's going to do is it's going to repeat through those four different Figma layers. 

You can see here it's got four layers selected, and it's going to sync the content once we click this button. You can choose the order that you sync it, and this will change the order based on different properties in your Figma layer names or position; in this case, I'm just going to keep it really simple and go "Top to bottom" as far as the rows go, and then all you need to do is click on the "Sync Rows" button; I'm going to click on that now and you can see it's updated content for 12 different Figma layers. 

Just to go over what that's done, is has basically gone through each of these spreadsheet rows, it's gone through two, three, four and five, using the first row as the label. It's basically looking for any Figma layer names that match this spreadsheet heading label, and as we had a look at before this "#Title" layer has been replaced with the content from this cell here, and then we've got "Comedy" which is being swapped into the "#Genre" layer, and importantly we've got our image which we've labeled as "#Image" and that's now using the image name, and that image name matches the image file that we included in our zip file, and that's how it was able to read those images and automatically paste them or create them in these different Figma layers that we had.

That's what that looks like there; the other cool thing you can do if you don't want to sync a bunch of existing Figma layers is, the alternate thing you can do is also generate a table with the data that you've already uploaded. If you instead wanted to create a brand new table for example, you can do that by clicking on this "Generate Table" button and that will also just generate a Figma table for you as well. That's just a new separate Figma layer you can modify that however you want, and it basically just takes whatever layout you've got in your spreadsheet here and it automatically pops it into here in Figma. For example, you can see here we've got our image row, and if you need to change the dimensions of that you can just change the component level one up here; we've got our "Header" component, and then these are just rows which are instances as well. You can actually just go ahead and hide that row if you want as well.

That's basically it, I just wanted to give you a really stripped down simple example of how to sync image layers directly from your computer into Figma layers, and this is really handy if you don't want to go through the trouble of uploading your images somewhere first; if you've watched a previous Figma tutorial, you know that you can also include URL image links. If you wanted to paste in an image URL of an image that's already online somewhere, you can definitely do that; you can actually paste in that whole URL, so instead of saving the image, you could just copy the URL of that image, paste that in here and that would automatically download the image through the Figma plugin. In this case, we're just using local images that we've already got, so this is going to be much faster, as it doesn't have to download all the image content each time; you've already got it in your zip file, and it also just makes it easier taking out that middle middle step of uploading your images somewhere else first.

I think we'll leave it there for today; I hope that's been helpful if you've been wondering how to sync local images really easily with your content in Figma, then using this CopyDoc Figma plugin is going to be a really easy way to do it. Feel free to have a go yourself and I hope it works out for you or your team if you are automating your content process using local images like this. As always, thank you for watching and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: Figma to CSS variables
description: How to move design decisions from Figma into a cleaner CSS variables workflow.
datePublished: 2023-02-03T00:00:00.000Z
dateModified: 2023-02-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-to-css-variables/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-to-css-variables.md
---

# Figma to CSS variables

How to move design decisions from Figma into a cleaner CSS variables workflow. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for figma to css variables when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Weblify fits into the process

Weblify is helpful in this workflow because the biggest gap is often between a finished design and usable code output. Cleaner snippets and inspect-friendly output help teams move from mockup to implementation with less rework.

With Weblify, teams can usually:

- turn designs into code-friendly output faster
- reduce repetitive translation from Figma to front-end code
- make developer handoff more practical for real production work

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Weblify](/weblify/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If code generation or developer handoff is the recurring pain point, Weblify is a strong fit. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to remove black borders from links in Figma PDF exports using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-01-30T00:00:00.000Z
dateModified: 2023-01-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-remove-black-borders-from-links-in-figma-pdf-exports-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-remove-black-borders-from-links-in-figma-pdf-exports-using-tiny-image.md
---

# How to remove black borders from links in Figma PDF exports using TinyImage

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to get rid of these black border outlines around your links in PDF exports from Figma.

We're going to be doing this by using the TinyImage Figma plugin, and I'll show you how to do that now; if you go to your Figma file that you want to export the PDF from and go to the top icon bar here and just click on the "Resources" icon and then search for "TinyImage", and under the "Plugins" tab you'll see TinyImage pop up. Just go ahead and click on that result, and then you can run the Figma plugin by either clicking on the "Run" button here or you can save it to your Figma plugins list for later by clicking on the "More options" icon and then clicking on the "Save Figma plugin" icon here. I've already saved it to my list, so I'm going to go to my Figma canvas, I'm going to right click, I'm going to go down to "Plugins", then I'm going to go down to "Saved plugins" and click on "TinyImage"; and that's just going to load up the Figma plugin that we just saved a second ago.

In this example I've just got a few different frames here, and this frame in particular as we saw in the Figma PDF native export over here that I exported natively from Figma, it includes this black line around the links. I've got a link here, and I've got a link here on my text, and I basically want to get rid of that link border from my export. The way you can do that in the TinyImage Figma plugin is just by clicking on the "Create PDF" button in the top header. if you click on that it'll give you a list of all the frames in your current page, and you can deselect those or select them as you need to and sort them by whatever order you want; you can manually sort them or just sort them visually by where they appear on the canvas. 

I'm going to leave all that alone for today, and the setting that you want to make sure is turned off in this case is the "Outline Links" toggle. If you turn on that setting in the Figma plugin, it's going to automatically include those default black borders that Figma includes. By default, this setting is turned off, which means that it's not going to include those black border Lines around your links in the PDF exports, but if you do want to keep them on for whatever reason, you can do that by enabling the "Outline Links" option, but again for today I'm just going to be turning that setting off.

Now I'm just going to click on the "Export PDF" button to export a compressed PDF with those borders removed. I'm just going to save that to my desktop, and now if I open up the new PDF that we just exported and go to that slide, you can see here that the links are still intact, so it's going to Google for these two links, but as you can see the links are actually clean; they don't have that black border around them as you can see in the default Figma PDF export. I've just switched back to that one you can see here that the links automatically get that black one pixel black border outline box around the PDF links, and in the TinyImage export with the "Outline Link" setting turned off, you can see that the links are still there, but they're not getting that black border box outline added onto them. The design matches what you've actually got in Figma with the underline, but not with that border box outline that you didn't add in the Figma file. 

If you want to try that out, you can try it out now; I'm just going to show you another example if you're interested on how to export single frames into individual PDFs as well. If you want to know how to do that, I'll quickly go through that now, otherwise feel free to stop watching now; but I'm just going to go through that for you now so you can see what that looks like as well, and show you where the setting is for individual PDF exports, too. What I mean by that is the option we just used a second ago to create a single PDF basically merges a bunch of frames into one PDF file, but let's say you wanted to actually export these frames into individual PDF files, so you can do that as well. The way you do that is just by selecting the frames that you want to export into individual PDF files, I'm just going to select all of them in this case, and then in the right hand side column just click on the "plus" button next to the "Export" label; click on that, and then by default it's going to select "PNG", we're going to click on that "PNG" option and change it to "PDF". 

I'm going to click on "PDF" now and you can see when I click on any of these frames we've now got the PDF export setting added; now all we need to do is refresh the exportable layers in the TinyImage Figma plugin. You can do that by clicking this button down here, or clicking on this little "Refresh" icon here, and that's just going to load up the new export settings for each of those layers. Now we can see in our default TinyImage view that we've got all of these PDF settings and those are on each of our frames. We can select which frames we want to export, so I'm just going to export the first few, and what we need to do is again go to the general "Settings" icon; I'm just going to click on the settings icon up here in the Figma plugin, and again, we're just going to make sure that the "Outline Link" setting is turned off, which it is by default, but if you've turned that on before, just turn that off if you don't want to include those. That's all you need to do; we've got that turned off, I'm going to click out of that, and this time I'm not going to click on the "Create PDF" button, I'm just going to click on the regular "Export" button and what that's going to do is go through the four different PDF exports that we just specified, and instead of combining the frames into one PDF file, it's going to export that into a zip. 

You can unzip the file, open up the folder, go to your PDFs, and now you can see we've got four different PDF files here. I can now open up that individual file, and again, we can see that the link has got the border removed; it's just the plain link which still links out, but it doesn't have that one pixel solid black border outline around the links that Figma usually exports with default PDF exports natively. Of course, we can open up any of these frames as single PDF files and that's what that looks like there. You've really got two options there; you can export the frames as individual PDFs, or you can use the "Create PDF" button to merge a bunch of frames into one PDF file, but the common thread amongst all of these exports is just to make sure that the "Outline Links" toggle in the TinyImage settings for PDFs is turned off if you don't want to include that PDF border box link outline that Figma adds in automatically. 

As long as you've got "Outline Links" turned off, the one pixel black border box outline that normally gets included around your PDF links from Figma will be removed; and again, if you did want to include that for any reason at all, you can just enable that setting again and that will export it the same way that it normally does with the default Figma exports. That's going to be all for today, I really just wanted to cover that one thing because I know that some of you out there have been asking for a way to remove those default borders that come with the PDF exports from Figma natively; this is now going to do that for you automatically by default, as long as that toggle is off, which it is by default. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: Figma to responsive HTML
description: How to turn Figma designs into cleaner responsive HTML output for faster front-end production.
datePublished: 2023-01-17T00:00:00.000Z
dateModified: 2023-01-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-to-responsive-html/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-to-responsive-html.md
---

# Figma to responsive HTML

How to turn Figma designs into cleaner responsive HTML output for faster front-end production. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for figma to responsive html when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Weblify fits into the process

Weblify is helpful in this workflow because the biggest gap is often between a finished design and usable code output. Cleaner snippets and inspect-friendly output help teams move from mockup to implementation with less rework.

With Weblify, teams can usually:

- turn designs into code-friendly output faster
- reduce repetitive translation from Figma to front-end code
- make developer handoff more practical for real production work

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Weblify](/weblify/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If code generation or developer handoff is the recurring pain point, Weblify is a strong fit. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to export PNGs with custom color space profiles from Figma using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-01-17T00:00:00.000Z
dateModified: 2023-01-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-pn-gs-with-custom-color-space-profiles-from-figma-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-pn-gs-with-custom-color-space-profiles-from-figma-using-tiny-image.md
---

# How to export PNGs with custom color space profiles from Figma using TinyImage

#### Video Transcript

Today I'm going to be showing you how to export PNG images from Figma with an embedded custom ICC color space profile, which is going to allow you to export your images in a certain color space; for example, P3, CMYK or RGB.

We'll get started now, and all I'm going to do is go up to the "Resources" icon in the top of my Figma header, I'm going to click on that and search for the word "TinyImage", and under the "Plugins" tab you'll see the TinyImage Figma plugin pop up. All you need to do to run it is either click on this "Run" button here, or if you want to save it to your Figma plugins list for later, you can click on this little "More options" icon and click on "Save plugin", and that'll save it to your Figma plugins list for later.

I've already gone ahead and done that, so I'm going to right click on my Figma canvas, I'm going to go down to "Plugins", I'm just going to go down to "Saved Plugins" and under "Saved Plugins" you'll see the TinyImage menu item pop-up. I'm just going to click on that, and that's going to run the Figma plugin we just installed a second ago.

You'll notice here that we don't have any export settings on any of our Figma images at the moment, so the first thing you'll need to do is just make sure that the images you want to export to PNG with a custom color space profile already have the "PNG" settings you need on them in the Figma export settings. To do that, you just select the Figma layers you want to export, and then go over to the right hand side here, click on the little "Export" plus button and then you'll be able to change your options here. 

By default, it's already on PNG, and you can change the resolution of that, you can make it 2x, but I'm just going to leave it at 1x for now; and if you need to add more resolutions, you can also add them as extra layers or extra export settings as well. I'm just going to keep it really simple for today and leave it as "PNG" at "1x" just for these two images. Now that we've updated that, we just click on the "Refresh" button in TinyImage, and that's just going to load up the export settings that we just specified in Figma a second ago. 
 
 By default, this is going to export your PNGs in the normal Figma default color space, which is basically un-managed; you'll just get a regular export if you go ahead and export that now, but if you want to change the color space profile settings for your PNG exports, just click on the little "Settings" icon in TinyImage, and you'll notice down here there's an option called "PNG Color Profile". As I mentioned, it's set to Figma by default, but we can click on that select box and change it to any of these different options; we've got some different categories, we've got "Display P3", we've got "Adobe Compatible Color Spaces", "CMYK", "sRGB" and things like that. 
 
 If we wanted to change this to be "P3", we can do that just by clicking on any of these items here, you can either check the one with maximum compatibility or maximum correctness, I'm just going to go for compatibility at the moment and select that. Then you've also got a toggle over here; by default, this toggle is set to use ICC version 4, but if you uncheck that, it's going to use ICC version 2. Version 4 is mostly supported and probably best to use, but if you do need Version 2, you can just uncheck that and that will use Version 2 instead. I'm going to leave that on Version 4, and that's all you need to do; you just can close off this settings panel now, so I'm going to click "Close".
 
All we need to do now is click on "Export"; I'm going to click this "Export" button, and that is going to set our PNGs with that ICC profile included in the Figma PNG exports. If we save that now, I'm just going to close off the Figma plugin and also re-export these just as regular Figma layers just so we can compare them. I'm going to export those two layers to the desktop, and I'm just going to name these; we've got "Kyoto Figma" and "Shop Figma", and now if we open up our zip file, and I'm just going to drag those two files in there and open up the folder; we can now compare these two different color space profiles by opening up the preview.

I'm just going to open up the Figma one first, and I'll just move that over here, and then if we go down to the "Shop" one you can see, it depends on where you're looking, but for example, if you notice down here where we've got these crates in front of the doorway; if you keep an eye on that you can see here, this is the Figma version and now I'm going to go down to the color managed version. You can see that the red is quite different, the color space is quite different there, you can notice that also on this pole over here if you see this one's quite dull, and this one has a lot a lot of a different color space. The same thing up here, there's all different parts of the image that have basically been modified to that color space.

We can do the same thing if we open up the "Kyoto Figma" one, we've got this one which was exported from Figma normally, and then if we go down, you can see that there's quite a difference between the two color space profiles. We've got this one from Figma, that's the standard one, and then we've got the "P3" color space profile, which again you can tell the difference in all of these reds, it's quite striking when you compare them. That's Figma, that's the P3, and you can see this one's quite different in terms of color space.

That's a really quick example of how you can do this, as I mentioned, there's a bunch of different other color space options that you might want to explore; it all depends on what your use case is, where you're going to be actually using that PNG, and you'll know if you need a color space setting or an ICC profile based on your use case. You'll probably get that as a specification from whoever's requiring that file, and you can just find that ICC profile in your TinyImage settings and Export the PNG with that ICC color space profile embedded really easily, just as we've looked at today.

I'll leave it there, I just want to keep it really simple and show you how to customize your PNG ICC color space profiles in Figma; this is a really quick way of going about it. I hope you find it useful if you or your team has been wondering how to use color space profiles in your image exports from Figma, so thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to compare websites behind a login with Figma designs using Pixelay
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-01-04T00:00:00.000Z
dateModified: 2023-01-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-compare-websites-behind-a-login-with-figma-designs-using-pixelay/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-compare-websites-behind-a-login-with-figma-designs-using-pixelay.md
---

# How to compare websites behind a login with Figma designs using Pixelay

#### Video Transcript

Today I'm going to be showing you how to really easily visually compare your designs that you've created in Figma against a real website that requires authentication or is sitting behind a login screen, you'll be able to visually compare the accuracy of your designs versus the implementation of that design in code.

To get started, all we need to do is click on the little "Resources" icon in the header of your Figma toolbar and just search for the word "Pixelay", and under the "Plugins" tab you'll see the Pixelay Figma plugin pop up. To run the Figma plugin, all you need to do is either click on this "Run" button here or you can click on this three dots "More options" icon, click on "Save" and that'll save it to your Figma plugins list to use it again later. I've already saved it to my Figma plugins list, so to run the Figma plugin, we can just go to our Figma canvas, right click anywhere, go down to "Plugins", go down to "Saved Plugins" and then click on the "Pixelay" item, and that's just going to run the Pixelay Figma plugin that we set up a moment ago.

Once you've got that set up, you'll see here that the first thing that loads is all of the artboards that you've got on your canvas. Artboards are really just the parent frames; any Figma frames that you've got directly on the page will be treated as screens or artboards in the Pixelay options here, and what you can do is basically go through and select the frames that you want to add to your comparison. In this case, I'm just going to add all of the frames, you might only want to add a couple depending on your use case, and once you've selected the frames that you want to compare what you need to do is put in the URLs or the website links for each of these comparisons depending on what website they're going to actually be sitting on in the browser. 

For example, we're going to be comparing these designs for Github with the real Github page when we're logged in; these are just the Figma designs and what I can do is I can grab that Github URL, I'm going to paste that in as my base you URL; this is the default or domain level URL, and by default you can see here that every page is just going to get marked with that default URL. That's fine in the case of the desktop and mobile designs for the home page of the logged in screen, but we can see here that these frames over here are for different pages. We've got one for code spaces, so if we click on code spaces, we can see here that this one is not just Github.com, it's got a forward slash, so what we can do is specifically paste in the URLs for those ones. In this case we've got "code spaces" and we've also got "issues"; we can paste in "forward slash issues" into these two, so the mobile and the desktop one for issues.

Now we've got everything set up, we've got our default domain, which is going to be used for these first two, and we've also got our other domains for those extra two pages. Once you've got those ready to go, all you need to do is click on the "Compare Designs" button, so I'm going to click on that now, and because this is the first time we're using the Figma plugin in this file what we're going to do is click on the "Upload Designs" button. I'm going to click on "Upload Designs" and what that's going to do is it's going to take these six frames from Figma and it's going to upload them online and give you a very special link that you can use in a moment, and we'll be able to compare these designs with the live website directly in the browser; I'll show you what that looks like in a minute.

Okay, it's finished uploading our frames, and the important thing to note is before you open up the URL that it gives you, you do have to make sure that you've got the Pixelay Chrome extension also installed. If you click on the link here, that'll take you to the Chrome extension page; you can see we've got it here, the Pixelay for Figma Chrome extension. All you need to do is click on "Add to Chrome" and that's going to add the extension, click on "Add Extension" and that'll install the extension. You don't have to do anything with the extension, it's just going to live in your extensions panel and what it's going to do is it's going to kick in whenever it detects a Pixelay URL which we've got down here. 

You can see here that it's generated of comparison URL and it's taking the base domain or the base URL that we gave the Figma plugin a minute ago and it's adding in this Pixelay ID query string, that's automatically getting added, and what you can do is you can copy that URL to your clipboard or you can click on this link here, and if you then go ahead and paste it into the browser; I'm I'm already logged into Github, so if you're using a site that needs authentication, just make sure that you're already logged in and that'll make sure that the cookies or the authentication is saved in the browser. Now when we open up our Pixelay link, if we paste that in and load that up, you can see here that the browser extension is now picking up on that link and loading up a brand new page. It's still on the Github domain but the Chrome extension is kicking in and loading up all of our frames in iFrames and then loading in the designs over the top, and I'll show you what that looks like.

By default, it's just set to 50% opacity, but if we change that you can see here that as we change the opacity we can see that the designs versus the build is all kicking in, and that's basically what it looks like there. You've got all your different frames that we uploaded from Figma, we can see here we've got all the different frames, and we've got our Figma designs, and our Figma builds overlaid on top of each other. We can really easily see where the differences are in this design and there's a few different ways to compare the designs; we can look at a split screen, so if you wanted to use a split screen comparison you can really easily kind of go over each part of your design and just see exactly what differences you can notice and here we can see that the fonts are a little bit different, that will be something that you'd want to correct. 

We've also got another way of doing it which is this diff checker; this basically picks up on any visual differences, and you can see the color kind of goes off if it's not matching up, for example, the logo is perfectly matched but as we can see hear some of this text is obviously not matched because we've got some differences in color that's highlighting those offsets in position, and you can basically just go through all of your different frames and navigate through them. You can switch between design and build, we've got our design and build if you just want to swap between them, the cool thing about switching between the build is you can also then interact with the with the website; you can actually interact with these pages here, and that's basically what it looks like.

The other thing you can do is you can pop out any of these pages, if you wanted to pop them out into their own window, you can do that; just click on these little pop-out icons and that's going to specifically load just the one frame in its own window. That just gives you a really easy way to view the design in one window if you wanted to do that, and this also gets around the issue of if you're using vertical height units or rem unitsm sometimes the relative nature of those units might get a bit weird if you've got a really long page for example, and because these are being loaded into longer iFrames, in some cases, some of that vertical height might be a little bit offset, and popping it out into its own window can sometimes help with that comparison as well.

That's basically what it looks like, we can see here that there's quite a few differences on this this Frame here, we can see that this whole block has basically not been included in the design; that's obviously a difference that you'd pick up on, but this is a really easy way of comparing sites if they require authentication. This obviously works for sites that don't require authentication as well, so if you've just got a regular website that you're building, or if you've got a site that's on a local development environment, you can use the Pixelay extension for that as well; but this is a really cool example of a site that does require a login portion of the the build.

If you wanted to re-upload those designs to look at them again, what you can do is you can go back to Figma, make the changes that you want to make; whether it's positioning or text or images or whatever. You can do a new headingm and we can move some of this around, not that it's going to be more accurate in this case, but we can change that, and if you just open up the Figma plugin again jump into the "Compare Designs" button, click on "Compare Designs" again, you can see here that this time it's showing our link immediately because we've already created the URL once. 

To update those designs, just click on the "Update Designs" button and that's going to upload the images once again, and whatever changes were made in those frames in the meantime are automatically going to get uploaded. You can also deselect frames, so if you wanted to create an updated link without as many frames or add new frames you can do that as well. We've got our link updated, that's been confirmed; if we jump back to the browser and refresh we should see our new heading. We've got our new heading here, if we have a look at that we can see the new heading and the positioning has been changed; obviously this is for the worse, the comparison is not looking as accurate as it should, but that's just an example of how you can update the design as well.

Of course, the cool thing is this is also going to stay in sync with the URL. Whatever URLs you're comparing, every time you reload the page you're going to get the latest version of the development URLs, or the website URLs, so those will always be up to date. It's pretty handy if you want to do a handoff process with your developer, you can basically create a Pixelay link for them and put their URLs that you know they're going to be using, whether there's a local, or production, or an internal Network URL, and you don't have to do anything after that; they can just keep making changes if they're using hot reload or live reload, the website portion of the comparison is going to keep updating on the fly, and the designs are just going to stay as is until you decide to update them Figma.

That's basically it for today, I'll leave it there and keep it pretty simple; I just wanted to run through how to do this if you've been wondering how to use Pixelay, or how to use a service to compare your designs in Figma with production builds or builds that require authentication or login screens, this is a really easy way that you can do that in your own workflow. As always, thank you for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add dynamic personalized content to HTML emails in Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2023-01-03T00:00:00.000Z
dateModified: 2023-01-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-dynamic-personalized-content-to-html-emails-in-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-dynamic-personalized-content-to-html-emails-in-figma-using-emailify.md
---

# How to add dynamic personalized content to HTML emails in Figma using Emailify

#### Video Transcript

Today I'm going to be showing you how to add personalized content or dynamic content into your HTML emails using the Emailify Figma plugin.

To get started, all you need to do is click on the little "Resources" icon up here, click on that and search for "Emailify", and under the "Plugins" tab you'll see Emailify pop up. All you need to do to run it is either click on this "Run" button here, or you can click on the "More options" icon here and click on "Save to Figma plugins". I've already saved the Figma plugin to my list, so I'm just going to go to my Figma file, right-click anywhere, go down to "Plugins", then go down to "Figma Plugins" and click on the Emailify item and that's just going to run the Figma plugin we installed a second ago.

If you're new to the Figma plugin, all you need to do is basically create a new email. I'm just going to create a blank email, add that to the page, and then all you need to do is basically go through and add the content that you want. You can do this by either adding content via the components up here, so you can click on these and add them in, or you can actually just click on the email itself and start adding layers using this little quick add feature. You can add content rows, you can add elements to those rows; so you can add text layers, image layers, things like that. 

For today I'm just going to keep it really simple; if you want to deep dive into how to design and customize your designs in Figma using Emailify, there's a separate Figma tutorial on the YouTube channel, just go to the playlist for Emailify and you'll see a really detailed video about designing emails there. For today, I'm just going to keep it really simple because I want to show you how to make some of this text content dynamic depending on what email platform you're using; you might be using MailChimp, or Klaviyo, or a different provider. 

If you go to the documentation for Emailify, and if you go down to this section called "Adding Platform Specific Personalization Content", this is what we're going to be going through today. There's a list of different platforms in here with direct links to the cheat sheets or the documentation for each of the platforms in terms of what their own specific personalization tags or syntax looks like. For example, if we go to the MailChimp one that's going to open up the MailChimp documentation and it's going to give us a list of all the merge tags or personalization tags that you can add to your email. For example, first name, last name, things like that. 

The same goes for Klaviyo, so if you want to use Klaviyo, they've also got personalization variables that look a little bit different. For today, we're going to be focusing on Klaviyo just to keep it simple. We'll be using the variables for Klaviyo, but bear in mind the process is exactly the same for any of these other email marketing platforms or whatever email marketing platform you're using, as long as they support personalization tags. 

Let's get started, we're going to keep this really simple today; I'm just going to add a Klaviyo footer, just so we've got that in there. I'm also just going to include an image, just so we've got an image block in there as well. I'm just going to include that and I'm going to drag that up here. What we want to do is basically personalize this welcome message here, so instead of just saying "Welcome to Jiro", we want to actually change that to be personalized to the recipient of the email. As we saw if we go to the Klaviyo documentation, you can find that by Googling it or clicking on the link in the docs here, and if you go down to here, you can see that we've got a bunch of personalization variables. 

All these are really just platform specific template tags that you can use to personalize your content, so this can be pasted anywhere; I'm just going to copy paste this first name tag for Klaviyo, I'm going to jump back into my Figma file and it's basically as simple as pasting it into your text layer wherever you want to use it. I'm just going to add that here, and I'm going to add a little exclaimation mark, and basically what's going to happen is this tag here, the curly brackets and the variable inside of it, that's going to get replaced in Klaviyo with the first name of the person who's on that list.

We'll see what that looks like in a moment; I'm just going to keep it really simple for now and upload that to Klaviyo. To upload the email from Figma to Klaviyo or whatever email marketing platform you're using, just click on the "Export HTML" button, and I've already got Klaviyo selected, yours might be selected to "HTML Email", but you can just change the platform to whatever platform you're using. I've got Klaviyo in there, I've already got my API key in there; if you don't have it, you just click on this little link and copy your API key from Klaviyo. 

I'm going to upload that now, I'm going to click on "Upload to Klaviyo" and upload that, it's going to generate all the HTML for me, upload all the images for me and it's telling me that the template has been uploaded. If we open up the Klaviyo templates link, that will take us to our email templates list. You can see here we've got our sushi email uploaded that was created just now. 

To actually use that template, you can go to "Campaigns", then go to "Create Campaign", make it an "Email Campaign", and we're just going to leave that as "Default". You can change what list you want to send it to, I've just got a test list for today. I'm just going to check that, check the preview list that I've got set up and then go to "Continue to Content". I'm going to click on the 
"Drag and Drop" option here and go to my templates, and then click on the "Sushi Email" template. You can see here, this is our HTML that we just designed in Figma and uploaded to Klaviyo. What I'm going to do is I'm going to click on "Use Template", so I've just clicked that and that's going to use this template for our current campaign. 

You can see it's got all the HTML there, you don't need to worry about that; all you need to do is basically preview this email and we're going to do that by clicking on the "Preview Email" button, and and then we're going to click "Show directly in Klaviyo". We're going to preview the email in Klaviyo and click "Preview Now", and you can see that it's previewing the template as "Adam", which is me, that's taking it from my list or taking it from my account. I'm going to click on "Preview Now", and you can see here that when we preview the email using that feature and loading in the data, or the customer attributes, or user attributes from that list or that account, you can see that the template we added in Figma; so we've got this first name variable here, and all we did was add that as a bit of text to our Figma text layer. Because that's getting exported as HTML using the Emailify Figma plugin in Klaviyo, we can see here that it's being dynamically swapped out with the name of that person, which in this case, is me.

There we go, we've basically got our name swapped out dynamically, so it's loading in my name instead of the template tag that we added in Figma. That dynamic tag is being swapped out in Klaviyo. Again, you have to use whatever the variable or whatever the personalization tag is per platform; so if we wanted to do this for MailChimp, we would copy in this tag instead of the Klaviyo tag. It would look like that for MailChimp, but in this case for Klaviyo it looks like this. That's basically what it looks like. 

As I said, you've got the HTML exported as we'd expect from Figma, and you've got the template tag swapped out. And of course you can do more than just add names. If you wanted to add email address, phone number, organization; you can also add defaults, so if there's no name, you can actually just change this to have a fallback. For example, we could do this, we could add this tag and instead of saying the first name, we can basically say if we change that to hello and instead of the first name, if the first name doesn't exist, this default will basically change it to fallback to the word there. Instead of saying "Hello Adam", it would say "Hello There". So that's an option you can do, and It's probably a good idea to do that in case the customer or the user data isn't complete and doesn'thave their first name, you can add things like fallbacks. 

Again, you just need to go through the documentation and see what is supported, there's all different custom properties. You can add account variables, you've got event variables which can be really handy if you want to do things like dynamic shopping carts, for example, you can do that. You can create these events in Klaviyo specifically, and I believe this works with Shopify, so you can basically create things like abandoned carts. If there's an abandoned cart event, you can actually create these variables inside of your email to swap out with those abandoned cart items or product items. 

You can also use these variables in images as well, for example, if we swap in, let's go to the ecom one, and swap in an ecom example. We just added a really basic ecom example here, and if you wanted to make this image variable dynamic,you can click on the Figma image layer here, you can see we clicked on the image layer, go to "HTML & Mobile Settings" in the Figma plugin; click on that button, and what you cando is you can basically paste in your variable into this "Override Image Source" field. What this is going to do is instead of linking to the image in Figma, you can make it override that image source with a static URL, or you can use variables in that URL.

For example, it might be something like this, it's not going to be this but a Shopify assets URL and then you might have something like "Item.Image_Name" or something like that. Obviously this is a fake example, but the point is that we're mixing in a dynamic tag into the URL and it might actually even just be a variable on its own, the platform might just inject that variable. Again, you have to look up whatthese variables are, but that's the way that you can override the image source if you want to do dynamic images, you can do that.

The same thing goes for links, if you wanted to add a clickable link with some dynamic content, you can definitely do that as well. We might do an example URL and maybe you want to pass a variable to that. so you could do "name equals" and then add in something like "First Name" and this will allow you to have a clickable link where the variable also gets included into the link. If you were to click on that image, it would go to "example, query string, name equals Adam" in this case. That's a way that you can do dynamic link URLs and dynamic image sources. You could also do it for image alt text, if you wanted to put the product name in there; again, I don't know what the variable would be, but it would be something like "Item.Product_Name" and that would make a dynamic alt text as well. 

You can really use these dynamic tags anywhere that text is available, so you could do this on buttons, you could make a dynamic button again, you could add the name into there. We could do "First Name" and that would basically populate my name into the button, and that's roughly what it would look like. Again, we can get rid of these because they're not going to do anything, but if we re-upload this email, I'm just going to upload that to Klaviyo again. We'll jump back into Klaviyo knowing that it's going to be finished in a second and we'll go back to "Content" and we're going to do "Change Template", I'm just going to use the new template that we're uploading now. 

That's finished uploading and I'm going to go to "Drag and Drop", I'm going to go to "My Templates" and I'm going to click on this "New Template". As you can see, we've got our tags as we would expect, in the button and in the title. Now I'm going to click on "Use Template" and go to "Preview" and "Preview Email", then "Show in Klaviyo" and "Preview Now", and there we go; you can see now that the button also has a dynamic variable in it as well as in the title. 

As I said, basically anywhere where there's a text layer, or a link, or alt text, or a custom property, like on the images, you can use these variables based on the platform that you're using to populate this data. It can be really powerful if you really get fancy with it. You can do other things like include conditional statements, this allows you to do things like "if else" blocks. You can do some crazy stuff like copy these "if else" statements. If you click on your email, the Emailify frame, and then click on the "Quick add" option and click on "Custom Code", and add custom code.

That's going to add this special "Custom Code" layer here where you can actually drop in custom code. I'm going to paste in this conditional statement and I'm just going to drag that up to here and then I'm going to add another one; I'm just going to add another custom code layer and if we go back to here we can do an "end if". Again, this is going to vary depending on what platform you're using; the Templating language will be different, but if you dig into the documentation you'll be able to find out what this looks like per platform.

This is a custom code wrapper, and what this does is it injects raw template code or custom code in between the rows, so this allows you to basically create dynamic rows. In this case, this row will only show up if the person is interested in dogs and not interested in cats. This is a very specific example, obviously they're just giving you a potential use case, but you could change this logic to be whatever you want; you could change it to be location based, you could change it to be name based, organization based, or tier based depending on what kind of customer they are. 

You can basically use these tags to dynamically inject or swap out content, so you could do "end if", you could also do "else", so if we do "else" you could basically add that in there and we could create a different block. If we just duplicate this block and pop it between those tags, we could do "else", so it's a terrible name for a product but you can see what I mean. In this case if the person is interested in dogs, then this block would show up, else if they're not interested in dogs, then everyone else will get this block here, and then "end if" kind of closes off that wrapper. 

If we just close up these Figma layers on the left here it gives us a really quick look at what that looks like. You've got a custom code block here, that's the "if", so that's the condition, then you're going to inject this block if that condition matches, "else" if it doesn't match, show everyone else this block here and then end that condition; so this area now is now conditional. Again, you can explore this in detail, I'm not covering this in detail at all.It's basically up to you what you use those conditions for, and this is going to differ depending on what platform you're using. If you're using MailChimp, it's going to look quite different. You basically want to dig into the documentation based on the platform you're using. 

Okay, I think that's a pretty good overview of conditional tags, how they work and specifically how they work with emails that are designed in Figma using the Emailify Figma plugin again. It's really simple, all you have to do is find the conditional tags or the merge tags that you want to use, and if they're text based, like a name or something like that, you can just drop them into a text layer in your Emailify layers. Again, you can use them for button labels and you can use them for links, you can use them for dynamic image tags; anywhere where you can use text, you can use these dynamic tags. 

Then of course, as we just wentthrough, these special tags here, dynamic tags;you can use these tags for code blocks, but you can also use them for just regular text layers as well. You can actually just drop these in here if you don't want to do a section based or a block based approach, if you just actually want to do conditional text. If we do conditional text and then "end if", that's what it looks like. Again, this would be conditional inside of that text layer, so you could do if interested in dogs or cats and then you could do dogs and else cats; that would basically mean that inside of this text layer, if that condition is met, it will show the word "dogs", else it will show the word "cats". That's another way you can do it if you want to do it inside of a Figma text layer, that's possible as well. If you want to use it in a block layer context, swapping out entire rows, then using that code snippet or code block that we went through before is still going to be the way to go.

Okay, I think we'll leave it there, I don't want to go too deep into it. I just wanted to go over the general principles and general fundamentals of how dynamic text and content works in email marketing platforms, in this case, specifically for Klaviyo; but as I said, check out the documentation on the Emailify documnetation page and you'll get alist of all the different templating links per platform; whatever marketing platform you're using, you really just need to dive deep into those documentation pages and figure out how to use those to the best of your ability to customize the content in your own designs for whatever email marketing platform you're using.

I hope that's been helpful, I've had quite a lot of questions about dynamic personlized content tags and dynamic content in general as it pertains to email marketing platforms, so I hope this is a bit ofa good 101 introduction into customizable email content in email platforms using the Emailify Figma plugin. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: Figma to Next.js code export
description: How teams use Figma-to-code export workflows to speed up implementation in Next.js projects.
datePublished: 2022-12-30T00:00:00.000Z
dateModified: 2022-12-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/weblify-figma-to-nextjs-code-export/
markdownUrl: https://www.hypermatic.com/articles/weblify-figma-to-nextjs-code-export.md
---

# Figma to Next.js code export

How teams use Figma-to-code export workflows to speed up implementation in Next.js projects. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for figma to next.js code export when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How Weblify fits into the process

Weblify is helpful in this workflow because the biggest gap is often between a finished design and usable code output. Cleaner snippets and inspect-friendly output help teams move from mockup to implementation with less rework.

With Weblify, teams can usually:

- turn designs into code-friendly output faster
- reduce repetitive translation from Figma to front-end code
- make developer handoff more practical for real production work

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [Weblify](/weblify/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If code generation or developer handoff is the recurring pain point, Weblify is a strong fit. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: From Two to Three
description: Looking back on the hits and misses of 2022 (and towards 2023) as we celebrate Hypermatic's third birthday.
datePublished: 2022-12-21T00:00:00.000Z
dateModified: 2022-12-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/from-two-to-three/
markdownUrl: https://www.hypermatic.com/articles/from-two-to-three.md
---

# From Two to Three

>“The mic still smokin', I ain't once go hoarse” 

— [Nas](https://www.youtube.com/watch?v=oIYywqRwda4), WTF SMH

It's been exactly one year since posting an update for Hypermatic's 2nd birthday ([From One to Two](/articles/from-one-to-two/)), so here's another annual recap to celebrate Hypermatic turning 3 years old today!

### Some hits to celebrate from 2022 (tl;dr)

- **0** investors and **$0** funding (still happily bootstrapped/[default alive](http://www.paulgraham.com/aord.html))
- **1** brand new product shipped ([Commentful](https://hypermatic.com/commentful))
- **1** full [rebrand](/articles/the-startup-formerly-known-as-figmatic/) rolled out
- **39** new YouTube [tutorials](https://www.youtube.com/@hypermatic_tutorials) recorded
- **562** new product updates and improvements shipped
- **1,298** total followers on our Figma Community [profile](https://figma.com/@hypermatic) (up from 690 a year ago)
- **570,000+** users (up from 290,000 a year ago)

### Some new feature highlights shipped in the last 6 months (since July 2022)

Besides the usual bug fixes, customer requests, and other smaller enhancements, these were some of the other new features that made their way into the [Hypermatic Twitter feed](https://x.com/hypermatic?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor) (which is mainly used to keep a record of these changes) over the last 6 months:

- Layer selection-based filtering to Bannerify
- Image carousels to Emailify
- Spreadsheet → Table imports to CopyDoc
- Support for full-width sections to Emailify
- Layer selection exports to Convertify
- Lossless GIF compression to Bannerify!
- Auto-layout support to HyperCrop
- Spreadsheet → Table imports to Emailify
- Editable content areas for Mailchimp templates to Emailify
- Retina GIFs support to Emailify
- Editable content areas for Klaviyo templates to Emailify
- Conditional tags for Localization imports to Emailify
- Layout Validation to Emailify
- EPS (PostScript) exports to Convertify
- New accessibility updates to Emailify
- Lokalise API integration feature to Emailify
- Intercom support to Emailify
- HTML email signature support to Emailify
- 3 new Adobe XD/AE export options to Convertify
- Mailjet integration to Emailify
- Adobe XD → Figma importer to Convertify
- Animated WebP image support to TinyImage
- Social Cards to Emailify
- Suto-scaling for After Effects comps to Convertify
- Animated WebP image exports to Bannerify
- Sendinblue integration to Emailify
- Audio support for MP4 video exports to Bannerify
- Google Sheets → Figma importer to Convertify
- RTL (right-to-left) text support to Emailify
- Animated MP4 video exports to TinyImage
- Google Docs → Figma importer to Convertify
- Rich text support for Localizations to Emailify
- Support for Spreadsheet Tabs in content imports to CopyDoc
- Loom video embeds to Pitchdeck
- Lottie animation embeds to Pitchdeck
- Google Form embeds to Pitchdeck
- Support for Password-Protected Websites to Pixelay

### Some misses from 2022 (_The world ain't all sunshine and rainbows_)

While lots of great features and improvements were released this year, and the number of people using Hypermatic to automate their workflows has doubled in the last 12 months (which is awesome!), there were also a bunch of misses or unexpected events that threw off previous plans.

>“It ain't about how hard you hit, it's about how hard you can get hit and keep moving forward, how much can you take and keep moving forward.” 

— [Rocky Balboa](https://www.youtube.com/watch?v=_J0Ahh3UxbM)

As I covered in the [July 2022 update](/articles/strictly-business), the first half of was quite full on and delivered a bunch of curve balls: 

- Finally getting Commentful shipped
- Doing a rebrand for the business to avoid copyright issues
- Russia/Ukraine war causing the loss of many customers
- Figma bugs causing some issues in our products for 4-6 weeks
- Figma update causing a significant decrease in new installs

By the time July rolled around, it felt like a great time to pause and reset for the rest of the year to catch up on any time lost from the events above; however, as is the rule with business, there was another big surprise around the corner.

In September 2022, [Adobe aquired Figma](https://techcrunch.com/2022/09/15/adobe-is-buying-figma-for-20b-taking-out-one-of-its-biggest-rivals-in-digital-design/), which was the biggest news and gave rise to the most fervor I can recall seeing in the design community. In the context of Hypermatic, we had been working on an XD to Figma importer for Convertify for months prior to the acquisition, which we ended up releasing a week or so after the news. Based on some interviews and tweets I've seen with people from Adobe, the acquisition news means that Adobe XD is effectively dead and will likely be discontinued in the future.

Now that the acquisition has already happened, and that all development of XD itself has been stopped, that also means that any upcoming integrations Hypermatic was going to ship for XD have now met the same fate. Any time spent on these so far is a sunk-cost, and further time invested into them would become an opportunity cost; there's no reason to waste time building something for a platform that is destined to wither away.

On the topic of products, while we launched Commentful earlier this year, and I'm happy with how it turned out and how the feedback from customers, I do think that the initial version took too long to ship, and in hindsight I would have learned my own lesson from previous products and got it out there sooner, rather than working on it for a few more months behind the scenes to try and anticipate every possible customer request.

### 2x is the new 3x

While some VCs have called Hypermatic a "lifestyle business" (which is true, in the same way that [The Sopranos](https://www.rottentomatoes.com/tv/the_sopranos) is a "lifestyle series"), I have always prioritized making this startup profitable and sustainable over the long-term, without taking on any investment or having any outside influence that would compromise the future vision for it.

During 2020-2021, it felt like things were pretty crazy with the amount of capital being invested in all these different startups, at _way_ higher valuations their current earnings (if they had any at all). For some, it was probably a good idea to take advantage of this, but I think it also resulted in a huge excess in hiring and waste in terms of how that capital was spent based on overestimating some of the apparent trends we were seeing during that time of abundance.

Now that valuations have plummeted, and the environment for raising more capital is nothing like the previous couple of years, I think lots of companies (and especially startups) are going to have to pivot to a similar focus on becoming profitable and sustainable by delivering real value to their customers.

>“2x is the new 3x. Meaning that: Given economic headwinds, 2x YoY growth over the next year will be as impressive (or more) as growing 3x last year, assuming a reasonable burn multiple.” 

— [David Sacks](https://x.com/davidsacks/status/1598363968547876864), Craft Ventures

With this "new normal" hitting home, and 2023-2025 all but certain to be much harder to grow than 2020-2022, the priority should be to focus and double-down on delivering real value to customers, and cut burn-rate enough to stay alive and come out the other end even stronger.

As mentioned in the [previous mid-year update](/articles/strictly-business) from 2022, this was (and remains) the outlook for Hypermatic, too:

>“Hypermatic is proudly self-funded, default alive and default investible, with high enough free cash flow and a low enough burn-rate to allow the business to continue indefinitely creating value for all of our customers over the long term.”

There is no expectation or extra efforts being put towards trying to grow 3x, or even 2x; even a steady plateau for the next couple of years is totally fine. As long as we're still alive, it allows for more product development with a focus on the long term, and by creating more value now, we can offset and capture more of that value in the future.

### A <s>recession</s> “vibe shift” is coming

Not to pick on one publication, but to use as a consistent benchmark for the tone of the UX and design space over the last couple of years, it's interesting to look back and see how different the [The State of UX in 2021](https://trends.uxdesign.cc/2021) is compared to [The State of UX in 2023](https://trends.uxdesign.cc/2023).

By its own admission, the 2021 report had nothing to do with trends (or much about design) at all. When times were good, and companies were hiring like maniacs to fill design roles, it was easy to think things were on cruise-control, and designers could (and "should") expand their focus "beyond" their role:

>“Not trends, but lessons. Lessons on how to make an impact beyond our products, how to collaborate beyond Zoom calls, how to organize ourselves beyond our bubbles, and how to improve our craft beyond artboards. Lessons from voices we still don’t hear as often in the design mainstream — but we should.”

Compare this with the 2023 report, titled *A Vibe Shift Is Coming*, which seems to make a hairpin turn away from the dogmatic list of 100 lessons in 2021, which were sometimes related to design, such as "Empathy is not enough", "It’s ok to slow down." and "Wash your hands", to now touting the need for designers to focus on adding value, and to make the case for why companies should invest in design:

>“Companies cannot afford leaders who are only good at talking and not as good at delivering... when budgets are tight, the case for investing in design needs to be even tighter.”

In the same way that investors are shifting their portfolios to be more weighted towards value than growth stocks, what this "vibe shift" feeling that the UX report seems to reflect is the fact that the underlying excesses of the 0% interest-rate era is over. The party that culminated in the bubble during 2020-2021 (peaking in January 2022) has now come to an end.

The reality is that we will be in recession and an environment where rates and inflation will both remain higher for longer, which is why there have been ~[152,542 layoffs](https://layoffs.fyi/) at ~993 tech companies this year, because these companies know that things have changed and they need to prepare to stay alive through at least the next 2 years. 

### <s>Software</s> AI is eating <s>the world</s> design

Speaking of "vibe shifts" — back in 2018, I gave a talk at the DesignOps Melbourne meetup called _Insanely Inevitable_ where I was talking about how automating and AI is super underestimated in design:

>“I think that machine learning AI and automation are very underestimated in the design space. There's there's not really a whole bunch of chatter around it... but in general, I think that these are very, very underestimated for the future of design; and I'm not talking about the next decade I'm talking about the next few years.”

— Adam Brock, [Insanely Inevitable](https://youtu.be/pb1uvaYGx_k?t=1129)

I remember talking to some designers in the audience afterward, where this notion was largely seen as a joke, or at least too far into the future to be seriously thinking about at the time, yet here we are, _just 4 years later_, and we have seen amazing breakthroughs in the space (such as [ChatGPT](https://openai.com/blog/chatgpt/), [DALLE-2](https://openai.com/dall-e-2/) and [StableDiffusion](https://stability.ai/blog/stable-diffusion-public-release)).

As I (half) joked in the talk, where I showed [a tweet](https://x.com/jongold/status/694591217523363840) from Jon Gold asking "which one of the two possible websites are you currently designing?", accompanied by a image of two very common website landing page designs; which to me, just made it super obvious that it was inevitable that there would eventually be an AI model trained to understand UI design and be able to create mockups (or even better, code) that was comparable to what a designer would come up with.

As we intuitively know, and as ["science confirms"](https://www.fastcompany.com/90501691/science-confirms-it-web-sites-really-do-all-look-the-same), many websites do look the same, which seems like it will only increase how rapidly this AI revolution will start to touch of almost every aspect of how we currently go about designing and building things for the web. 

It will seem obvious when we look back that the processes we clung on to for so many years were inefficient and didn't make much sense, but rather than replacing designers or developers, I think that these new breakthroughs will compliment our workflows instead.

These breakthroughs and tools are also going to get commoditised pretty quickly and the cost will be driven down to zero, so I think this will help drive innovation around how to utilize it best to create value.

If [Github Copilot](https://github.com/features/copilot) makes someone 20% more efficient as a a developer, but everyone is using Copilot (or something similar), then the productivity gains are evenly distributed and normalized, so you'll need to provide specific value some other way.

Eventually, I think there will be "Copilot" for everything, and it will just become totally normal and invisible, and it's already harder to imagine areas of design and development that _won't_ be impacted or enhanced by these advancements in the AI space.

### Looking ahead to 2023 for Hypermatic

As I mentioned in the [July 2022 update](/articles/strictly-business), I really wanted to double down on all of our existing products and get them into a great spot by the end of the year, by focusing on a bunch of features and updates that have been on the todo list for a while and would deliver the most value to our customers. 

By making sure all the existing products are stable and have a straong foundation to build upon where needed, this will also free up more time in 2023 to start shifting more focus into a releasing brand new product (as well as shipping some cool new planned features across the board for the existing products). The "one thing" for the next year is to ship the first version of this brand new product that has been in development for a couple of years now. 

It's really easy to get swept up or distracted by these genuinely exciting advancements in AI, this new product _won't_ be "AI first". However, this is definitely something I'm very mindful of planning for in the future, and making sure the technical groundwork is built in a way that will lend itself to enhancing the value of the product using AI in the future. I think that the developments I wrote about in the section above are going to be extremely useful to augment many (if not all) of the Hypermatic products.

The big lesson for me from 2022 is that [Only The Paranoid Survive](https://www.amazon.com.au/Only-Paranoid-Survive-Strategic-Inflection/dp/0385483821), so as much as I'd like to think that nothing will come up to interfere with these goals for 2023, I'm sure there will be a bunch of unknown unknowns to deal with, and that's okay, too. I'm ready to take on whatever 2023 has to throw, and as always, firmly focused on the long-term; always moving step by step, focused on doing one thing at a time, on a path that's directionally correct.

---

---
type: article
title: Resize Instagram Story and feed assets in Figma
description: How to resize one Figma design for Stories, feeds, and other social placements with less manual work.
datePublished: 2022-12-13T00:00:00.000Z
dateModified: 2022-12-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-resize-instagram-story-and-feed-assets-in-figma/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-resize-instagram-story-and-feed-assets-in-figma.md
---

# Resize Instagram Story and feed assets in Figma

How to resize one Figma design for Stories, feeds, and other social placements with less manual work. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for resize instagram story and feed assets in figma when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How HyperCrop fits into the process

HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

With HyperCrop, teams can usually:

- generate multiple crops without rebuilding each frame by hand
- reuse presets for repeated channel and campaign work
- speed up image-heavy production for social, ecommerce, and ads

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [HyperCrop](/hypercrop/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If your team keeps producing the same image in multiple sizes, HyperCrop is the direct fix. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to add a countdown timer to HTML emails in Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-12-07T00:00:00.000Z
dateModified: 2022-12-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-a-countdown-timer-to-html-emails-in-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-a-countdown-timer-to-html-emails-in-figma-using-emailify.md
---

# How to add a countdown timer to HTML emails in Figma using Emailify

#### Video Transcript

Today I'm going to be showing you how to add a countdown timer to your email designs that can then be exported to HTML directly from Figma.

To get started, all we need to do is open up a new Figma file, go to the "Resources" icon in the top header here, then if you search for "Emailify" under the "Plugins" tab you'll see the Emailify result pop up. If you click on that, you can run the Figma plugin by either clicking the "Run" button here or you can click on this little "More options" icon and save that to your Figma plugins list, and that's just going to let you access it again later really easily. I've already added it to my Figma plugins list, so I'm going to right click on my canvas, go down to "Plugins" go down to "Saved plugins", then just click on the Emailify menu item and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is you basically add a special email frame using the Figma plugin, so I'm just going to add a new frame, I'm just going to call it "Email Countdown", add that container, and then what you can do is you can basically go through and add customizable Figma content. If we go through and add some of these modules, it just instantly adds a whole bunch of content that you can customize in Figma, as you'd expect; changing the content, changing the styles, changing the colors, all of that sort of stuff to suit your needs. I'm going to keep the design really simple today, if you want to deep dive into how to actually design these using the Figma plugin for desktop and mobile, and do a whole bunch of fancy stuff, there's a whole bunch of other tutorials on the channel that you can check out if you find the Emailify playlist on our YouTube channel.

For today, as I said, I'm just going to be showing you how to add a countdown timer, one that looks like this, directly into your HTML emails in Figma. There's a few different services that offer this, I don't have a particular one that I recommend, there's a whole bunch, most of them have free options; there's mailtimers.com, motionmailapp.com, mailtimer.io, promofeatures.com, there's a whole bunch of them. Today I'm just going to be using this one called sendtric.com, and the reason I'm using this is just because it's a really simple generator, and you don't have to go through a lengthy sign up process to generate one of these countdown timers; you can basically just pop in the details. If you just search for your time zone, and pop in the time that you want to change the time to end, I'm just going to say end this on Saturday, and then you can customize the design of the timer. In this case I'm going to match the background color to the email background color, and then I'm just going to change the label colors a little bit as well, I'm just going to make these a bit darker, and then once I'm happy with that I'm just going to generate the countdown timer. I've just hit "Generate", and you can see here it's given me this countdown timer that I can now use inside of our email. 

Basically, if you look down here, you'll see this special image link that's in this source tag; don't worry about all of the other code, all we're going to be focusing on for today is this link in between the "src" attribute here. Where I'm highlighting that, if you just copy that to your clipboard and then open up a new tab; I've just opened that up in a new tab in the browser, and what we're going to do is we're going to drag and drop this image, we have to actually copy it, so if we do "Copy image", and then do paste with "Command + V", or "Control + V" if you're on Windows, and now we've got our image layer. This is a static image layer, this is not a GIF, but the way we're going to be using this is to swap out the image URL with the live one in a second. Keep this tab open, because we're going to be using it again in a second. I'm going to be taking this Figma image layer and I'm going to be moving it inside of my existing content layer, I want to include the countdown timer in this content here, so I'm actually going to drag and drop that image directly into that "Column" layer. That's in there now, and I can center that by going to the column layer, clicking on the center icon in the Figma auto-layout settings; that's now centered this image layer. Now what we want to do is we can either leave it at that size, so this is the 1x size, but I actually want to make this a little bit smaller. I'm going to go into my width properties and I'm just going to go divide by two; I've just divided that by two, and that's basically going to make it look a little bit sharper once we now export this into HTML. 

To make this dynamic, the way that we can do it is if you click on the image layer; once you've clicked on the image layer, you want to go into the Figma plugin and click on the "HTML & Mobile Settings" button. As you can see, once you click that, it loads up a whole bunch of options that you can apply to this image. The one that we're interested in today is the "Override image source" option; what this allows us to do is paste in a custom image URL and when this email gets exported to HTML in a moment, this value here is going to be automatically swapped in place of whatever image we've got in Figma. I'll show you what that looks like, if we go back to our browser tab and just copy that URL; copy that whole dynamic countdown timer link that we generated, go back to your Figma plugin, and paste it inside of that "Override image source" attribute, and close off the settings panel. Then we can now preview that by clicking on the "Preview" button up here, and this is going to generate a HTML preview; this is a real HTML preview of the HTML email. We can expand that out to go to a wider size, so we can see what it looks like on desktop, and you can see here this is a dynamic GIF; this is now pointing to the dynamic link that we got from our browser that we generated, this is now the exact same URL that is now being loaded in to this image tag here dynamically. It's overriding whatever image is in Figma, and it's swapping it out with that URL pointing directly to the countdown timer, and this is how we can include a dynamic countdown timer in our HTML email.

I'm now going to export that to HTML, and the way we do that is just by closing off the preview, and clicking on the "Export HTML" button. I'm going to do that, and then I'm going to hit the "HTML Email" option, there's a whole bunch of other platforms, if you're using a certain platform like MailChimp or Klaviyo you can upload this directly into your platform; today I'm going to keep it really simple and just download it to the computer. I'm just going to click "Export to HTML", and this is going to generate the HTML for us. I'm just going to save that, I'm going to download the zip file, I'm just going to pop it on my desktop and hit "Save", and then if I open up Finder and just go to the desktop, double-click on the zip file, open up the folder. Now if we open up the preview HTML, I'm just going to drag that into my browser, and you can see here that we've now got our exported HTML ready to go. It's got our countdown timer, we can see what it looks like on mobile, we can see what it looks like on desktop in this preview. If you want the actual HTML file that's exported, just go into the folder, name grab the "index.html" file and drop that in, and now you can see the full HTML. If we go to "View Source", you can see if we explore the image source and then we go to our image tag; I'm just going to search for the "img" tag, and you can see here that in the image tag, it's actually pulling in the same countdown image that we generated before. 

As I mentioned before, I went to the trouble of halving the size of that countdown; if you want to leave it at the regular size, you can totally do that. Just put it back up to the normal size, preview that again, and you'll see that it's now much bigger; you can you can make it whatever size you want, I just didn't want it to be too pixelated if it got too big, that's why I'm at it a little bit smaller before. Bear in mind, if you do make it bigger, it will automatically resize down on mobile as well. If you do have a smaller mobile screen, that'll responsively shrink the image width based on the width of the mobile width as well, so you don't need to worry too much about that.

I think we'll leave it there for today, I hope that's been helpful, as some of you have been asking for how to do this; how to insert a dynamic countdown timer into your HTML emails using the Emailify plugin in Figma, this is the best way to do it. As I mentioned, explore some of these options, we've only gone through one of these services today, and some of the other services are going to allow you to create more customizable countdown timers. Do check out a whole bunch of different options and find the right one for you, as you can see here, some of these are much more advanced, and you can customize the design a lot more. This one is always going to be a basic one if you just want a really easy option, but if you're wanting something that's more engaging, you might want to check out some of these other services, such as this one, mailtimer.io, or some of the other ones that are available.

We'll leave it there for today, I just wanted to focus on the countdown timer for this Figma tutorial and keep it fairly straightforward; I hope that's been helpful, as I said, and please feel free to give it a try in Figma with you or your team. Thank you as always for watching we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Figma designs in Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-12-06T00:00:00.000Z
dateModified: 2022-12-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-embed-figma-designs-in-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-embed-figma-designs-in-figma-presentations-using-pitchdeck.md
---

# How to embed Figma designs in Figma presentations using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to embed live Figma designs into your Figma presentations using the Pitchdeck Figma plugin.

All we need to do to get started is just open up your Figma file go to the "Resources" icon in the top here and then just search for the word "Pitchdeck" and click on the results, and you'll be able to run the Figma plugin by either clicking on this "Run" button here, or you can click on the "More options" icon and save that to your Figma plugins by clicking on the link down here.

I've already done that, so I'm just going to right click on my page, I'm going to go down to "Plugins", I'm going to go down to "Saved plugins" and then click on the Pitchdeck Figma plugin, and that's just going to load up the Figma plugin we just set up a second ago.

If you're new to the Figma plugin, the way it works is it basically treats each Figma frame on your page as an individual slide in your presentation, and each of the layers inside of those slides are basically treated as the individual layers for each slide as you can see here. These kind of map up one to one with your slide layers here, and that's basically the way to set up your slides. I've just set up an extra slide over here where I want to have my Figma file or Figma design embedded inside of my presentation; you can see this layer here I've got set up I basically want to insert a live Figma design that I can browse around and demonstrate inside of the deck using a live embed.

It's really easy to do this all we need to do is click on the "GIFs/Videos/Embeds" tab over here in the right hand side of the Figma plugin, and that's just going to switch the context from animations over to this input field here. If you click on the "Supported Embeds" link over in the side of the Figma plugin that's going to open up the documentation for the Figma plugin, and it's going to give you all the different examples of embed links that you can actually paste into that field. There's quite a few, but for today we're just going to be focusing on embedding Figma designs.

The way we do that is just by going over to our Figma file and we're going to get a bit meta today and embed the live Figma design link for the file that we're actually in, and the file that the presentation is being created from. All I'm going to do is I'm going to go ahead and click on the "Share" button in the top right hand corner of the Figma file, click on that, and then I'm going to click on the "Copy link" button here copy that to my clipboard. Just make sure that the "Anyone with the link" setting is set to "Can view"; make sure that's set, and then now that we've got our link copied by clicking on the "Copy link" button, we can go back to our Figma plugin, go to the embed input field here for the layer that we want to embed it to, and then just paste that in there.

If you paste in that link, you'll see that our Figma file or Figma embed has now been loaded up inside of the presentation; we can actually Zoom around and present the design from our Figma file inside of our presentation that we're creating from Figma. In this case we're getting a little bit meta because it's exactly the same file, but you can imagine that this Figma file is a totally different file that's related to the presentation that you're giving, and you might want to present that in a live way inside of your presentation without having to create multiple Figma files to then create separate presentation.

The way that we can now present this in the browser is we just click on the "Export Presentation" button in the top right hand side of the Figma plugin, and I've already created a link, so if you haven't done that it will say "Upload Presentation"; I'm just going to click on "Update Presentation"; I'm going to click on that and that's going to upload our slides from Figma up to the web presentation link, including our live Figma design embed that we just added to the presentation.This is going to give you two different options, you can either share the link with a separate password, or you can copy this passwordless URL which basically creates a URL that automatically logs in without a password.

I've already got that loaded up in my browser, so I'm going to go ahead and click on that and I'll just refresh the page. You can see here that we've got our normal slides; we've got our slides with the images from Figma, the content from Figma, all added in there, but if we go to our second slide the one we added the Figma live design embed to, you can see here that our whole Figma file Figma design is available to navigate the same way that we would do in Figma; you can zoom in, you can zoom out you can move around, you can even go full screen if you want to. If you want to go to the actual Figma file you can click on that link at the bottom and that will open up your Figma file in the browser as well.

This is just a really cool way of embedding a live Figma design, so if we make updates in Figma, for example, we might change this to "Nine"; we'll update that, and you can see here that it's actually automatically updating the content on the fly; this is a live embed of your design. Once again, we'll just change that back and that will automatically update it here. That's pretty cool if you want to include a live Figma design embed into your presentations; you can actually present work in progress or different Figma file content that's live inside the browser without having to create multiple Figma URLs, you can do it from the Pitchdeck presentation Figma plugin web app.

That's what it looks like there, and I hope that's been helpful if you've been wondering how to embed live Figma designs into your Figma presentations, as a bit of a meta presentation, this is going to be a really easy way to do it using the Pitchdeck Figma plugin. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Google Docs in Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-12-06T00:00:00.000Z
dateModified: 2022-12-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-embed-google-docs-in-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-embed-google-docs-in-figma-presentations-using-pitchdeck.md
---

# How to embed Google Docs in Figma presentations using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to embed a Google Doc directly into your Figma presentations using the Pitchdeck presentation Figma plugin.

To get started, if you just go to your Figma file, click on the little "Resources" icon at the top and search for "Pitchdeck", and if you click on the result you can run that Figma plugin by either clicking on the "Run" button or clicking on the "More options" icon over here and saving it to your Figma plugins list by clicking on the button below. I've already done that, so I'm going to go to my canvas, I'm going to right-click anywhere, go down to "Plugins" then go down to "Saved plugins", click on the Pitchdeck option, and that's just going to run the Figma plugin we just set up a second ago.

If you haven't used this Figma plugin before, the way it works is it basically takes any Figma frames that you've added to your page and it treats those as slides and loads them into a presentation that you can then export. I've got a bunch of slides, I've just got these set up as 1920x1080 Figma frames, and those are being used as my slides, then each of those basically have some content inside of them; just text layers, image layers, things like that. You can then add animations and links and embeds and things on them, as we'll see in a second.

In this Figma tutorial I'm just going to be focusing on how to embed a Google Doc into one of these Figma slides or more of the slides if you want to add more, and we can do that pretty easily just by going to the slide that we want to include the Google Doc on, and then if you just create a layer, if you create like a rectangle layer or an image layer, any of those kind of shape layers, you can then replace that with a embed using the option in the "GIFs/Videos/Embeds" tab over here. If you click on that tab and then you can see that we can highlight over our layers, so we can highlight over our image layer here, and if you click on the "Supported Embeds" link, that's going to open up the Pitchdeck documentation, and you'll get a list of all the different link types that you can embed into your slides. For today, I'm just going to be focusing on how to embed a Google Docs URL into your presentation in Figma using this embed function. 

I'm going to go over to Google Docs and I've just got a really basic template that I've pulled from the Google Docs template library, and I've just left that as all the blank content that it comes with, but I basically want to include this document inside of my Figma presentation that I'm designing. The way that we do that is by clicking on the little "Share" icon up here, and just making sure this is open to "Anyone with the link"; click on that and then what we need to do is go to the "File" option up in the top here, and then go down to "Share" and then if you click on the "Publish to Web" icon; click on "Publish to Web" and what this is going to allow you to do is basically publish this document to be public. That'll allow the document to be embedded outside of Google, so if you go to the publish to web option, and then click on the "Publish" button, it's going to ask you "Are you sure you want to publish?" it, just click "Ok".

I'm going to click "Ok" and it's going to give you an embed link that you can use here; this special embed link, you can click on that and then copy it with "Command + C" or "Control + C" if you're on Windows. Copy that embed link, then go back to Figma, and as we just saw a second ago, if you go under this "Embeds" tab, go to the layer you want to embed the Google Doc in; I'm just going to embed it on this image layer here. I'm going to paste that into this field, and you'll see here that we've basically got our Google Doc loaded up, and what we can do is we can now adjust this. Because we've got some extra content here, I'm just going to get rid of that, extend this out to be a little bit wider, and then I'm just going to reload that frame and you can see here that's just going to make it look a little bit nicer with the embed width that we're using with the document.

Now I've basically turned this entire Figma frame or this entire Figma slide inside of my presentation into a Google Doc. This is all the content from my Google Doc being loaded in, as you'd expect. To actually present this and share that Figma presentation or present that presentation with your Google Doc embed working, what you can do is you can click on the "Export Presentation" button in the top right hand side of the Figma plugin, and then you want to click on the "Upload Web Presentation" button or "Update Web Presentation" button if you've already created a link, as I have. I'm going to click on that now, and this is just going to upload all of the slides from Figma into the Pitchdeck web application that you can then present.

It's just finished; we can see we've got our link here, you can either share the link with a separate password or you can copy this link at the bottom which basically logs into the link automatically. I've just copied that, I'm going to go back to my browser, I'm going to paste that in and hit "Enter", and now the presentation is loaded. You can see that all of the content that we designed in Figma has been added, all the animations are in there as we'd expect, but if we go to our second slide which is where we added the embed, we should now see our Google Doc load up. You can see here that the Google Doc has been included, we can see all the text is selectable. 

This is just a really easy way of getting your Google Doc content directly inside of your presentation that we've exported from Figma, and having that as an embed that you can then share around without having to duplicate all that content back into your Figma file; you can just link directly to your Google Doc embed. I think we'll leave it there for today, I just wanted to give you a really quick Figma tutorial about how to do this if you've been wanting to embed content from a Google Doc into your Figma presentation using the Pitchdeck Figma plugin, this is going to be the easiest way to do it. 

The one thing you might notice as well is that the scaling of the Google Doc embed is going to be different compared to the Figma preview; in the Figma preview window here, as we saw before when we scaled that up, the preview of this content is a little bit different because the size of this window here is actually much smaller. The embed itself basically stays the same size, so it's basically much narrower in this little embed here than it would be if we're viewing it in the browser over here, so that's just something to keep in mind you can see here that the scale doesn't go down; it just kind of clips the side. If you are embedding this and you're viewing it in a larger screen, it's basically going to match the original size of your Google Doc, but because we're viewing it in our little preview window in the Figma plugin here and it's basically cutting down the width, this is giving you a accurate preview of the size of the content, but the width of the content is going to be a little bit look a little bit different when you get it into the browser later, as we just saw.

I hope that's been helpful again if you've been wanting to embed Google Docs content into a Figma presentation or a presentation that you've designed in Figma and then uploaded to the Pitchdeck app I hope this is helpful for you or your team thank you as always for watching and we'll be back soon with more Figma tutorials like this one very soon

---

---
type: tutorial
title: How to embed Google Forms in Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-12-06T00:00:00.000Z
dateModified: 2022-12-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-embed-google-forms-in-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-embed-google-forms-in-figma-presentations-using-pitchdeck.md
---

# How to embed Google Forms in Figma presentations using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to embed a Google Form into your Figma presentations using the Pitchdeck presentation Figma plugin.

To get started, if you just go to your Figma file, click on the little "Resources" icon in the header, search for the word "Pitchdeck", and if you click on the results you'll be able to run that Figma plugin by either clicking on the "Run" button here or you can click on the "More options" icon and click on the "Save Figma plugin" option to save it to your plugins list for later. I've already saved mine to my plugins list,; I'm going to go to my canvas, I'm going to right click go down to "Plugins", go down to "Saved plugins" and then I'm going to click on the Pitchdeck option; and that's just going to run the Figma plugin that we just set up.

If you haven't used the Figma plugin before, what it allows you to do is take the Figma frames on your page and it basically loads those in as slides into the Figma plugin. It treats every Figma frame on your page as a slide and then you can basically put layers inside of those frames and those will get treated as the individual layers for each of those slides. You can add animations, links, videos and things like that, but today we're just going to be focusing on adding a Google Form. 

If you want to include a Google Form into your presentation that you can capture information from people either viewing the presentation, or if you send them the link that they look at it themselves, they'll be able to fill in that form and send you some responses from the presentation directly. The way that we can do this is pretty simple; if you just go to the frame or slide that you want to include the form on, you can add a layer. I've just got a simple rectangle layer here and I'm going to embed that by going to the "GIFs/Videos/Embeds" tab over on the right hand side here, and if you click on the "Supported Embeds" link, that's going to take you to the documentation page for the Pitchdeck Figma plugin. You can see all the different supported embed links, and we can see here that we've got one for Google Forms, and that's just an example of what the form link is going to look like. 

I've got a Google Form set up over here, I've just got a simple RSVP form set up in Google Forms, and I basically want to embed this form into my Figma presentation that I'm going to be presenting. The way that we do this is just by going to the "Settings" panel first in the Google Forms tabs, go down to "Responses" and just make sure that the required sign in options are turned off, we don't want it to be limited to our own organization, we want this to be accessible by anyone because we want to accept responses from people viewing the actual Google Form. I'm just going to turn those settings off and then what you can do is you can just go to your link and if you go to the "Send" option, click on "Send" and then click on the link over here, and if you click on the "Link" field and just copy that; just do a copy and then go back to Figma. 

Now you can paste that link from the Google Form into the actual embed field here. I'm going to paste that in, and there we go, you can see that we've got our form added to the layer, and we can actually click on these and input answers and do all that sort of stuff. If you wanted to, you could also make this flush with the frame itself; if we increase the size of this image we could basically just make it the same size as the slide and then that way it would just be purely flush with the actual image. I'm going to refresh and there we go, you can see that we've got the top and the bottom both flush with the Google Form, so the form just scrolls entirely inside of the actual Figma frame.

I'm just going to leave it there, and we're going to upload this to the presentation URL. We can do that by exporting the presentation using the "Export Presentation" button, so I'm going to click on that, and then I've already created the link. Normally this would say "Upload Web Presentation", but I'm just going to update mine, so I'm going to click on "Update Web Presentation", and this is going to automatically upload all of the Figma slides to the Pitchdeck web app. We're going to get a link in a second that we can copy, so I'm going to copy the passwordless version, but you can also copy one with a separate password if you want to keep the link more secure; I'm just going to copy this one for now and paste it into my browser, and just hit "Enter". 

Now you'll see that our presentation is going to load up; we can see all of the content that we brought in from our Figma design has been included, which is looking really good, and then we've basically got our embed slide over here. If we click on slide two, you can see here that we've basically got our Google Form embedded and we can go ahead and fill that out. I can just put my name in there, I can add these radio buttons, and then I can just hit 
"Submit" and that's going to automatically submit the response. That's pretty cool, because it means we can send around a presentation link and we can basically get people who are viewing the link to fill out a survey or fill out a form during their presentation, or at the end of the presentation. You can collect those responses, and you can see here that the response that I just sent directly from the presentation that we uploaded from Figma, that's gone straight from the Google Form directly into our backend. I can see the response from my presentation,so you can send this out and capture a whole bunch of data or responses from people that you want to send a presentation to, and it's just a really easy way to capture information directly from a Google Form that you've included in your presentation from Figma.

We'll leave it there for today, I just wanted to give you a really quick example of how you can embed a Google Form into your Figma presentations that are uploaded to the Pitchdeck web app. This is going to be a really easy way to do that and collect data or collect answers from the people you're sending your Figma presentations to. I hope if you've been wondering how to do this, if you've been wondering how to include forms, or Google Forms specifically, into your Figma presentations then I hope that you give this a try and I hope it's useful for you or your team. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Google Sheets in Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-12-06T00:00:00.000Z
dateModified: 2022-12-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-embed-google-sheets-in-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-embed-google-sheets-in-figma-presentations-using-pitchdeck.md
---

# How to embed Google Sheets in Figma presentations using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to embed a Google Sheet directly into your Figma presentations using the Pitchdeck presentation Figma plugin.

To get started. if you just open up your Figma file, go up to the little "Resources" icon up here and click on that, then search for the term "Pitchdeck" and under the "Plugins" tab, and you'll see Pitchdeck pop up. Just go ahead and click on that, and then to run the Figma plugin you can either just click on the "Run" button here or you can click on the little "More options" icon and click "Save Figma plugin" to save it to your Figma plugins list for later. I've already done that, so I'm going to go to my canvas, right-click anywhere, go down to "Plugins", go down to "Saved plugins" and then click on the Pitchdeck icon; that's just going to run the Figma plugin we set up a second ago.

If you're new to the Figma plugin, the way that it works is it basically takes all of the Figma frames on your page and loads them into the Figma plugin as slides, and then it uses the content layers inside of each frame as the content layers that you can add animations, links and GIFs/videos/embeds to; I'm going to show you what that looks like in a moment. I'm basically going to be adding a Google Sheet embed into this second Figma frame here, and the way I'm going to do that is pretty simple, I'm basically going to define where I want that Google Sheet embed to go. For example, in this case, I've got a little photo layer; you could use a rectangle layer, you could use a image layer, but we're basically going to be swapping out this Figma layer over here with a Google Sheets embed. 

I'll show you what that looks like; if you go to the "GIFs/Videos/Embeds" tab, you'll see this little input box here that we can paste an embed URL in. If you go click on the "Supported Embeds" link, that's basically going to open up the Pitchdeck documentation in your browser and you'll get a bit of a list of all the supported types of embed links you can add, but for today I'm just going to be focusing on embedding a Google Sheets URL into the Figma presentation.

I'm going to jump into Google Sheets, I've just got a really simple spreadsheet that I got from the template section in Google Sheets, and the way we can embed this is by basically going to "File", then going down to "Share", and then clicking on the "Publish to Web" option; I'm going to click on "Publish to Web", and then you basically want to click on this "Publish" button here, and it's going to prompt you to save or publish this selection. I'm going to click "Ok" and now it's published. What this does is it basically makes your Google Sheet visible to other people on the web if you share this link, but it also allows you to copy that Google Sheet link as an embed. Under the "Link" tab, if you just click on this little input field here, and then copy that link by doing a "Command + C", or "Control + C" if you're on Windows, and then jump back into Figma. 

Then all we're going to do is paste that link we just copied from Google Sheets into the Figma plugin, into this little input box here, paste that, and you can see here that it's automatically loaded in our Google Sheet that we just had in our Google Sheets browser over to the Figma plugin, and it's embedded it into our slide. Now we've basically got the whole slide as a Google Sheets embed and we can actually select this text, we can click on things, we can switch tabs and scroll around in the sheet as you'd expect. Now that we've got that embedded into our layer, to export the presentation so that we can actually present it in the browser, you just go ahead and click on the "Export Presentation" button in the top right hand side of the Figma plugin, and then click on the "Upload Web Presentation" or "Update Web Presentation" button at the bottom of the Figma plugin, click on that, and then that will upload the slides. All of the content from your Figma design is going to get uploaded, and you're going to get this link that you can use to present the presentation. 

I'm going to click on this link here, you can also click on this one which is a separate URL and password, if you want the password protected link; I'm just going to grab this bottom link now which will log in automatically. I'm going to grab that, I'm going to paste it into my browser, hit "Enter", and you can see here that the presentation is loaded up. We've got all of our Figma content as we'd expect, and then on the second slide we should have our Google Sheets embed. You can see here we've got our Google Sheets embed, it's all of the content from our Google Sheet, so we've got our "timesheet", all the spreadsheet details down here. We can also click on the tabs, so if we want to load up a different tab in the Google Sheet, we can click on that and scroll through this one. This one's got some charts, if we hover over the charts you can see that we've got all the data in there, just as you would expect. 

There we go; it's basically embedded the entire Google Sheet directly into our presentation that we've exported from Figma. We didn't need to import all this data into our Figma layers, we can just import the data directly from the Google Sheet link as we looked at a moment ago. That's basically it, I'll keep it pretty simple today; I just wanted to show you how to embed the Google Sheets data or Google Sheets file directly into your Figma presentations and then upload them to the Pitchdeck web app so that you can actually present them to anyone you want to show this data to. 

I hope that's helpful if you've been wondering how to import or embed Google Sheets content into your Pitchdeck presentations using the Figma plugin; this is going to be a really easy way to do it, just by pasting that link in. I hope it helps you and your team if you're using spreadsheets or wanting to use Google Sheets in your Figma presentations. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Google Slides in Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-12-06T00:00:00.000Z
dateModified: 2022-12-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-embed-google-slides-in-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-embed-google-slides-in-figma-presentations-using-pitchdeck.md
---

# How to embed Google Slides in Figma presentations using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to embed Google Slides directly into your Figma presentations using the Pitchdeck Figma plugin.

To get started, if you just go to your Figma file, click on the little "Resources" icon at the top and just search for the word "Pitchdeck", and if you click on the Pitchdeck result you can run the Figma plugin by either clicking on this "Run" button, or you can click on this little three dots "More options" icon and click on "Save Figma plugin"; that will automatically save it to your Figma plugins list for later. I've already done that, so I'm going to go to my canvas, right-click anywhere, go down to "Plugins", go down to "Saved plugins", then click on the Pitchdeck icon, and that's going to run the Figma plugin we just set up a second ago.

If you're new to the Figma plugin, the way it works is you can basically add frames to your Figma page, and each of those frames will get treated as a slide in your slide deck using the Pitchdeck Figma plugin. I'm just setting these at 1920 by 1080 pixels, and that's going to give you a full HD slide when you go to use them. Inside each of these Figma frames is just basically a bunch of content layers; you can see here that I've got a bunch of content layers inside of this Figma frame, and those can be used for adding animations, links or embeds, as we'll see in a second.

To add a Google slide deck or Google Slides into your presentation, which is a little bit meta, a presentation within a presentation, which you may want to do. You can just basically create a Figma frame with a Figma layer, and in this case I've got a rectangle layer; and I want to replace or embed my Google Slides presentation into that rectangle layer. I'll show you what I mean by that; if we click on the "GIFs/Videos/Embeds" tab over here, you can see here that we've got a couple of options and this little input field. If you click on the "Supported Embeds" link, that'll basically take you to the Pitchdeck documentation, and you can see a list of all different embed URLs that are supported in the Figma plugin. Today we're just going to be focusing on adding a Google Slides URL to your Figma presentation, and the way that we do that is basically by going to a Google Slides document that you've created; in this case, I'm just using one of the templates.

The way that we can use it in our presentation in Figma is by going to "File" in your Google Sheets file, click on "File, then go down to "Share", and now you have to just click on this "Publish to Web" option. If you click "Publish to Web", then you've got a couple of different options here; you can tell it to start the slideshow as soon as the player loads, restart after the last slide, you can change how frequently the slide automatically transitions, you can change all these different settings. Then basically you just want to click on this "Publish" button, so I'm going to click "Publish" now, and it's going to ask you "Are you sure you want to publish this selection?", and I'm going to say "Ok". 

Now this is published to the web, what we can do is basically grab the publish to web link that it generates down here; this is a special link that allows you to embed Google presentations. I'm going to click on that, then I'm just going to copy it by doing a "Command + C", or "Control + C" on Windows, and then go back to my Figma file. Then in the little input field here under my "Embeds" tab, I'm just going to paste that in, and you can see here that it's automatically embedded my Google Slides presentation into my Figma presentation. It's a little bit meta, but you can see all the content is in here, you can see that we've got our little options; we can do things like turn on the laser pointer if we wanted to do that, all these kinds of neat features that are offered by Google Slides.

We want to present this to our audience, along with all of our other slides that we've designed in Figma. The way that we can do that is basically by clicking on the "Export Presentation" button; I'm going to click on that, and then what you can do is click on the "Update Web Presentation", yours might say "Upload Web Presentation" if it's the first time you're creating a presentation. I'm going to click that button now, and this is going to automatically upload all of the content from our slide deck that we've designed in Figma, including the embed of the Google Slides document that we've just added, and then it's going to give you a link that you can use.

I'm just going to copy and paste the passwordless URL; I'm going to grab that link, pop it into my browser, hit "Enter", and there we go; you can see that we've got our Figma slides added as we expect, and then we've also got our second slide here which contains our Google Slides embed, and this allows us to basically view a Google Slides document inside of our presentation that we've uploaded from Figma. We've got all of our Figma slides, but on this particular slide, we've also got our embedded Google Slides document. That allows us to go through the document inside of our presentation, so it's basically a Google Slides presentation within a Figam presentation that you can load up and automatically embed.

That's basically it, I'll leave it there. I hope this has been helpful if you've been wondering how to embed Google Slides into your Figma presentations that are exported to the Pitchdeck web application, this is a really simple way of doing it. You just follow the instructions that we just went through to make that Google Slides document public by publishing it to the web, and bringing in that Google Slides embed link directly into your Figma file; then you can upload it to the Pitchdeck web application. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Loom videos in Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-12-06T00:00:00.000Z
dateModified: 2022-12-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-embed-loom-videos-in-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-embed-loom-videos-in-figma-presentations-using-pitchdeck.md
---

# How to embed Loom videos in Figma presentations using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to embed Loom videos into your Figma presentations using the Pitchdeck presentation Figma plugin.

The first thing to do to get started is just go up to the "Resources" icon in your Figma file, then click on that and search for the word "Pitchdeck", click on the Pitchdeck result, and to run the Figma plugin you can just click on the "Run" button here or you can click on this three dots "More options" icon and click "Save Figma plugin" and that will automatically add it to your Saved plugins list. I've already done that, so I'm just going to right-click anywhere on my page, go down to "Plugins", go down to "Saved plugins", and then just click on the "Pitchdeck Presentation Studio" Figma plugin link; that's just going to run the Figma plugin we just set up a second ago.

If you haven't used the Figma plugin before, the way it works is it basically looks at your Figma page and it treats every Figma frame as a different slide. I've got a bunch of different frames on the page all set to 1920 by 1080 pixels, and inside of those Figma frames I've got a few different Figma layers set up. We've basically got a few different layers; we've got text layers, image layers, all that sort of stuff, and then basically it treats each of those Figma layers as a layer in your in your slides; we can add animations to these slides, we can do all sorts of things in there. I'm just going to show you today how to add a Loom embed into any of these Figma slide layers, and it's really easy; we're just going to go to the Figma slide that we want to add the Loom embed to, and you basically want to have a layer that you want to insert that Loom video into, where you want to embed it.

I want to embed the Loom video into this Figma frame in this layer, and all we need to do is click on the "GIFs/Videos/Embeds" tab over on the right hand side of the Figma plugin, and you'll see that it will basically show you some input fields. You've got some input fields here that you can paste a link into, and if you click on this "Supported Embeds" link, it takes you to the Pitchdeck documentation page and just gives you a bit of an overview of some example embed links that it supports. Today we're going to be embedding a Loom video, and all we need to do is basically copy a Loom video link into the Figma plugin. I've got a Loom video over here that has a share link, someone has shared this; if you've got a Loom video that you've created or someone sent to you, you can grab that share link from Loom, copy that to your clipboard and then go back to Figma and paste that Loom embed link or Loom share link into the input field just like this.

We're just going to paste that in, and you can see that it automatically loads up the Loom embed player. If we were to click on that play button, that's going to play, and you can skip through that as you'd expect. That's basically a Loom embed that's live, and you can actually use that however you normally would use a Loom video in the browser. That's all you need to do you, just paste in the Loom link into your Figma embed input here, and then to export the presentation to actually present it, all you need to do is click on the "Export Presentation" button over here. I'm going to click on that and I've already set up the link previously, but if you're doing it for the first time, you'll see an "Upload" button. Now I'm just going to click on the "Update" button, so I'm going to click on that "Update" button and that's going to export the Figma slides to a special URL that I can use. It's password protected by default; you can either send a URL and a password separately, or if you just want it to load up straight away, you can copy this passwordless URL and that will automatically log in.

I'm going to copy that one, I'm going to go back to my browser, paste in that link and load it up. Once the presentation loadsm you'll see here that we've got our Figma slides, and if I go to the second slide you'll be able to see that we've got our Loom embed loading up. Again, I can click on that play button in the Loom embed, and you can see now I can skip through this Loom video as you'd expect. That's just a really simple way of embedding a Loom video or Loom embed into your Figma presentations that you can then present using the Pitchdeck presentation Figma plugin. You can add as many Loom videos as you want, if you want to have different ones on different slides, it's just a matter of copying and pasting your Loom share embeds or Loom share links into the Pitchdeck Figma plugin's input fields just over here, and that'll basically load up any Loom presentation or any Loom video that you want to include inside of your presentation Figma frames.

I'll leave it there for today, I just wanted to keep it really simple just to show you how to embed those Loom links into your Figma presentation layers using the Pitchdeck Figma plugin; that's going to be a really easy way to automatically include Loom videos into those Figma presentations. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Lottie animations in Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-12-06T00:00:00.000Z
dateModified: 2022-12-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-embed-lottie-animations-in-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-embed-lottie-animations-in-figma-presentations-using-pitchdeck.md
---

# How to embed Lottie animations in Figma presentations using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to embed Lottie animations into your presentations in Figma using the Pitchdeck presentation plugin.

The first thing we need to do is just go into your Figma file, go up to the top here where it says the "Resources" icon, then just search for the word "Pitchdeck", and you'll see Pitchdeck pop up; Just go ahead and click on that, and you'll be able to run the Figma plugin by either clicking on this "Run"
 button here, or you can click on these little three icons where it says "More options" and hit "Save to plugins". I've already saved it to my Figma plugins, so I'm just going to right-click on my canvas, go down to "Plugins", go down to "Saved plugins" and then I'm just going to click on the Pitchdeck Figma plugin that we just set up. This is going to run the Figma plugin that we just set up a second ago, and you can see here that I've already got a little simple design for my presentation setup.
 
 If you haven't used the Figma plugin before, the way it works is it treats every Figma frame on the page as a slide. If you create a new Figma file and then start adding these frames. I've just set them to 1920 by 1080 pixels, that's full HD resolution, and you can just populate those frames with Figma content layers. You can see here I've got some content layers, text layers, image layers, things like that; and these will all pop up in your presentation here. I'm just going to go through a few of these Figma layers and add Lottie file animations to them. The way we can do that is by clicking on this little tab up here which is says "GIFs/Videos/Embedds"; I'm going to click on that, and you can see here that the content changes from animations to adding some input fields that we can paste links into. You can see here that there's a couple built in; there's GIPHY and Pixabay integrations built in, but if you click on this little link here, it's going to take you to the docs page of the Figma plugin site, and you'll get a list of all the supported embeds that you can actually add into these input fields.
 
 Today we're going to be focusing on Lottie files; Lottie files, if you haven't used them before are a special type of animation format for the web. You can go to lottiefiles.com and you can browse a bunch of preset animations that you can use in your projects. For example, if we wanted to use this animation, all we need to do is click on the animation, and make sure you're signed into your LottieFiles account now, it's free to set up an account; and then what you're going to be looking for is this "Lottie animation URL", down here where it's got this little URL, you want to click on the little "Copy" icon and copy that to your clipboard.
 
 Then if you go back to your Figma file, and find the Figma layer that you want to add a Lottie animation to; in this case, I want to add it to my image here. I'm just going to paste in that Lottie animation link and that will automatically load in the Lottie animation to our Figma presentation. You can see here that we've pasted that Lottie link into the embed field and that's automatically loading up the Lottie animation into our Figma slides. We can do that again, we can add another one. If we want to add another Lottie animation, we can just click on any of these again, click on the "Copy" link where it says "Lottie animation URL" and copy that Lottie link back into Figma. If we want to add that to another Figma frame, just go to the other Figma frame and then click on the input that you want to add it to, paste that in there, and you'll see again this will automatically load up the Lottie animation.
 
 Now that we've got that in there, we want to export this to a presentable slide URL, and the way we do that is just by clicking on the "Export Presentation" button in the Figma plugin, click on that, and I've already created a presentation; if you haven't created one yet, it'll say "Upload Presentation". I'm just going to update my link, so I'm going to click on the "Update Web Presentation" button, and this is automatically going to export the slides to a special link that we can now use to present this presentation. What you can do is you can either get the link and password, or just get a passwordless link; I'm just going to click on that and copy it and in my browser, I'm just going to paste that link, hit "Enter", and this is going to load up the presentation that we just uploaded from Figma.
 
 You can see here we've got our first Figma slide with the normal image, but if we go to the next slide you can see here that the Lottie animation that we added to our Figma file has automatically been embedded into that Figma frame's image. Then if we go to the next one, you'll see again our other Lottie animation that we added to the presentation has also been added here; this this is a really nice way of adding more advanced animations into your presentations that have been exported from Figma. You can see here it's just those those two layers, the rest are all the same; they're just normal images from the Figma layers, but again if we go back to the other layers we can see here that our Lottie animations have been embedded; same with this one as well.
 
 That's basically it; you can also upload your own Lottie animations, so there's a way to drop your Lottie animations that you've exported from After Effects or created in a different tool, you can also just upload those JSON files. That's all the Lottie files are, they're just basically a JSON file, and if you upload the JSON file to either your own web hosting link, or own server, or Lottie files itself actually has a way where you can do this. If you sign into your Lottie files account and just look for a place to upload the Lottie file, the JSON file, you'll actually be able to get your own lottiefiles.com link, so you can actually upload your own Lottie animation files if you know how to do that. That's just one other thing I wanted to call out before we wrap up the Figma tutorial.
 
I'll leave it there for today, I just want to keep it really simple to show you how to embed Lottie animations into your Figma slides if you're designing your slide decks in Figma and using the Pitchdeck Figma plugin, this is going to be a really easy way to include those Lottie animations into your Figma presentations that you can present with the Pitchdeck presentation web app. Thank you as always for watching, and we'll be back with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to embed SoundCloud audio in Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-12-06T00:00:00.000Z
dateModified: 2022-12-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-embed-sound-cloud-audio-in-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-embed-sound-cloud-audio-in-figma-presentations-using-pitchdeck.md
---

# How to embed SoundCloud audio in Figma presentations using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to embed audio or songs from SoundCloud directly into your presentations in Figma using the Pitchdeck presentation plugin.

To get started, if you just open up your Figma file, go up to the top here where it says "Resources", click on that icon, and if you search for "Pitchdeck", under the "Plugins" tab if you click on the Pitchdeck Figma plugin, you'll be able to run the Figma plugin by either clicking on this "Run" button here, or you can click on the "More options" icon here and click "Save to Figma plugins" and that's just going to add it to your Figma plugins list to use later. I've already added it to my Figma plugins list, so I'm just going to go to my canvas, I'm going to right-click anywhere, go down to "Plugins", go down to "Saved plugins", and then just click on the Pitchdeck icon that we just installed a second ago. Once the Figma plugin loads you'll see that we've got a bunch of slides here.

If you haven't used the Figma plugin before, the way it works is it basically loads in any Figma frames that are on your page and treats those as slides. I've just got a bunch of Figma frames set to 1920 by 1080 pixels, and each of those has some Figma content layers inside them. We've got images, we've got text, and we can then add animations to those, we can add links to those, video embeds, and other embeds like that. Today we're just going to be focusing on adding a SoundCloud embed. This is going to allow us to embed an audio player for any tracks or any audio that you've got on SoundCloud; I'm going to show you how to do that now.

I've got this "Embed" Figma slide that I've got set up, and basically the way it's going to work is we're going to embed the SoundCloud player directly into this Figma layer here. I'm going to replace this Figma image with a SoundCloud player embed; to do that, you just have to switch into the "GIFs/Videos/Embeds" tab on the right hand side here, and that's going to switch this context here to allow you to paste in an embed link. You can see what those look like by clicking on the "Supported Embeds" link here, and that's going to take you to the Pitchdeck documentation page, and you'll get some examples of the different kinds of embeds that you can add to your presentation slides, but as I said, today we're just going to be focusing on SoundCloud.

All you need to do is go to soundcloud.com, and you'll be able to search or browse for any music. If you want to search for music, or they have podcasts, they have all different kinds of audio; you can basically go there and find a track that you like, or some audio that you like that you want to then embed into your Figma presentation. I've just got a SoundCloud song that I'm going to embed into the Figma presentation, and once you've found the track that you like just make sure you're on the actual track page, not a playlist page; I'm on a single track page. I'm going to grab the SoundCloud URL, you can either grab that from the web browser header, or you can click on the "Copy link" icon down here; you can copy that to your clipboard, and then if you go back to Figma you can then paste that link into this input field on the Figma layer that you want to embed the SoundCloud player into.

I'm just going to go ahead and paste that now, and you can see here that it immediately loads up the SoundCloud embed into the Figma layer; you could just see that it started playing the track immediately, and that means that as soon as you go from one side to the next, it's going to start playing that audio as you'd expect. Now that we've got that embedded, what I want to do is basically export this Figma presentation to present it in the web browser; and we can do that by clicking on the "Export Presentation" button in the top right hand side of the Figma plugin. I'm going to click that, and then if you haven't uploaded a presentation yet you'll see a button that says "Upload Web Presentation", but I've already created a previous presentation link, so I'm going to update mine by clicking on the "Update Web Presentation" button. I'm going to click that now, and that's just going to export all of our slides that we've designed in Figma, including this new SoundCloud embed that we've just added to our second Figma slide here.

It's just finished updating that link, and you'll get two different options; you can either share a link with a separate password, or you can use this bottom link down here which is a passwordless URL, and that will automatically load up in the browser. I'm just going to grab that one, I'm going to copy it to my clipboard, I'm going to paste that into my web browser, hit "Enter" and this is going to load up the presentation that we just uploaded from Figma a second ago. You can see we've got our presentation slides, these are being loaded in as we'd expect from our Figma designs. Then if we go to slide two, we're going to get that auto playing SoundCloud embed pop-up. I'm just going to click on that now; you can see that our SoundCloud embed has been added to our Figma slides. We can present this in the browser, we can interact with the player, and we can even do things like open up the link in a new tab if we want to open that in the SoundCloud player, and do all that sort of stuff. 

That's basically what it looks like; you can obviously resize this depending on your screen size and the embed will automatically scale, that'll just keep getting resized as you scale the browser. This is going to work on different sized screens and it's still going to look really good. I've just got mine as a square, I think that's probably the best format for the embed player; you can make it a landscape or portrait, but you might get a little bit of cropping on the background image from SoundCloud. I'm going to leave it there for today, I just want to do a really simple overview of how to specifically add SoundCloud embeds. If you've got some SoundCloud hosted on the platform, some audio tracks, some podcasts, anything that you've got hosted on SoundCloud or if you want to embed another artist's SoundCloud player into your Figma presentation, you can definitely do that, as I said, by just grabbing that SoundCloud URL and simply pasting it into the Figma embed input in the Pitchdeck Figma plugin.

I think that's going to leave it there for today; I hope you found that useful if you're wondering how to embed SoundCloud audio into Figma presentations, this is a really quick way of doing it using the Pitchdeck Figma plugin. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Spotify audio in Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-12-06T00:00:00.000Z
dateModified: 2022-12-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-embed-spotify-audio-in-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-embed-spotify-audio-in-figma-presentations-using-pitchdeck.md
---

# How to embed Spotify audio in Figma presentations using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to embed audio from Spotify directly into your Figma presentations using the Pitchdeck presentation Figma plugin.

To get started, if you just go to your Figma file, click on the little "Resources" icon at the top here, search for "Pitchdeck", click on the "Plugins" tab, and you'll see the Pitchdeck Figma plugin pop up. If you click on that result, you can run the Figma plugin by either clicking on the "Run" button here, or you can click on the three dots "More options" icon, then click on the "Save Figma plugin" option to save it for later. I've already done that, so I'm going to go to my canvas, I'm going to right-click anywhere, go down to "Plugins", go down to "Saved plugins", then go down to the Pitchdeck option and click on that; and this is going to run the Figma plugin that we just set up a second ago.

If you're new to the Figma plugin, the way that it works is it basically takes all of the Figma frames that are on your current Figma page and it treats each of those Figma frames as a slide in your presentation, then you've got content layers inside; you've got text layers, image layers, and these basically make up the individual Figma layers that you can apply animations, links and embeds to. Today we're just going to be focusing on embedding Spotify content, embedding audio from Spotify; that includes playlists, podcasts, or audio tracks. The way we do this is just by basically adding a couple of placeholder layers in Figma. For this example, I've got a couple of rectangle layers; I've got a rectangle layer here, and also an image layer. If we click on the "GIFs/Videos/Embeds" tab in the Figma plugin over here, that basically changes these options to give us an input field that we can paste and embed link into; all we need to do is basically click on this "Supported Embeds" link and that's going to open up the Pitchdeck documentation and give you some examples of what those URLs can look like.

As I said, today we're just going to be focusing on the Spotify embeds, and as you can see you can embed tracks, playlists or podcast episodes. I've got a couple ready to go over here; we've got this one, and this one, and this is an example of a playlist. If you just copy the Spotify playlist link from your browser, or if you've copied it from the "Share" function, you can just copy that to your clipboard, go back to Figma, and then if you find the Figma layer that you want to paste that embed into, then just paste it into the embed field. I'm going to do that now, and you'll see here that the layer automatically gets swapped out to the Spotify embed; in this case we've pasted in a Spotify playlist, and that means we can basically have an interactive playlist with a bunch of different songs that you can change between. This is totally interactive, you can scroll around, you can change songs, and do everything you'd expect with the Spotify player, and if we again go back to our Spotify links, this time I'm just going to do a single song. I'm just going to copy another Spotify song URL from the browser, jump back into Figma, I'll get rid of the Spotify playlist for now, and instead I'm just going to add a single Spotify track onto this rectangle layer at the bottom. I'm going to paste my Spotify embed link into that Figma rectangle layer and that's just loaded in a Spotify player that we can now use interactively in Figma. 

I can click on the play button, and if we want to we can also resize that Spotify player a little bit; if we make this Figma rectangle layer a little bit larger, or if we want to move it around, we can definitely do that as well. We can extend that out a little bit, we can make that kind of go a bit more close to the edge, and then if you refresh the slides just by clicking on the little "Refresh" icon, you can see that kind of stretched out the player a little bit more as well. You could even make that go full width if you wanted to; we can make that full width in Figma, and that'll extend out. It just really depends on the design of your slides in Figma.

I'm going to leave that there, and then to actually export this Figma presentation to present in the browser, all we need to do is basically click on this "Export Presentation" button in the top right hand side. I'm going to click on that now, and if you're uploading it for the first time, you'll see a button that says "Upload Web Presentation", I've already created a link, so I'm just going to update mine by clicking on the "Update Web Presentation" button; I'm going to click that now, that's going to upload and export the slides that you've designed in Figma up to the Pitchdeck presentation web app, and it's going to give you a link to that app. You can either clicking on this "Copy" button here; this is going to copy a URL with a password that protects the link, or you can use this bottom link here, which just signs in automatically without you needing a password. 

Just to make it easy, I'm going to grab that one, I'm going to go back to my browser and I'm just going to paste that in, hit "Enter", and this is going to load up our presentation as we've designed it in Figma. You can actually present this in the browser using all of the content that you uploaded from Figma, and if we go to our second Figma frame we'll see our Spotify embed player automatically included. This has been brought in based on the link that we included in Figma; if you click on "Play", that's playing as we'd expect as well. If you have a Spotify account that's actually signed in and is a proper account paid account, you'll be able to listen to the full track; this is currently just a preview, that's why it's showing up that message but you can embed that full track if you've got your Spotify account signed in while you're presenting. That's basically what it looks like; as you'd expect, the player will automatically scale based on the size of the window. If the window resizes, the player is also going to resize; it's totally responsive to the presentation window that the Figma plugin web app is using.

That's pretty much it for today; I just wanted to cover this specific use case of embedding audio or songs from Spotify into your presentations that you create in Figma, and then upload to the Pitchdeck Presentation Studio web app that you can then present and play some of that audio in your presentation. If you're doing a presentation that involves some music or you just want to add a little bit of extra richness or audio into your Figma presentations, than embedding a Spotify song, or embedding a Spotify playlist, or even a Spotify podcast preview might be something that you'd be interested in adding. I hope that's been helpful if you've been wondering how to add audio from Spotify into your Figma presentations, this is a really quick way of doing it just using the embed function in the Pitchdeck Figma plugin and then presenting it with the web app. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Vimeo videos in Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-12-06T00:00:00.000Z
dateModified: 2022-12-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-embed-vimeo-videos-in-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-embed-vimeo-videos-in-figma-presentations-using-pitchdeck.md
---

# How to embed Vimeo videos in Figma presentations using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to embed Vimeo videos into your Figma presentations using the Pitchdeck Figma plugin.

To get started, if you just go to your Figma file, click on the little "Resources" icon at the top here, search for the word "Pitchdeck", and if you click on the "Plugins" tab, you'll see the Pitchdeck Figma plugin pop up. To run that Figma plugin, all you need to do is click on either the "Run" button here, or you can click on this little "More options" icon and then click on "Save Figma plugin" and that'll save it to your Figma plugins list for later. I've already done that second step, so I'm going to right-click on my canvas, go down to "Plugins", go down to "Saved plugins", and then click on the Pitchdeck option; that's just going to run the Figma plugin we set up a second ago.

If you're new to the Figma plugin, the way that it works is you can basically create multiple Figam frames on your Figma page and those will get treated as slides in your presentation over here. Then you can add Figma content layers such as text or images, and those will also get treated as individual layers in the Figma plugin that you can add animations, links and embeds to. I'm just using 1920 by 1080 pixel full HD slides, but you can use any size that you want. 

To get started all we need to do is find the Figma layer or find the Figma slide that we want to add our video to. In this case, I'm just going to add it to this first Figma slide here; it's the "10 Principles of Good Design" slide, and instead of having this static image over here, I basically want to use a video of the "Dieter Rams" documentary trailer. If you click on the little icon over here, or the little tab that says "GIFs/Videos/Embeds", if you click on that, that'll basically change the context to allow you to paste in embed links. To see a list of the supported embed links you can go to the "Supported Embeds" link here, and that will just take you to this page over here which is the Pitchdeck documentation, and it'll give you a bit of a list of some of the supported URLs you can use; but for today, as I mentioned, we're just going to be focusing on how to embed videos from the Vimeo platform, and embed those into your Figma slides that you can then present after you've uploaded them from Figma. 

I've got a little trailer here on Vimeo, and this is just the trailer for the "Dieter Rams" documentary. All you need to do is find the video on Vimeo that you want to embed into your Figma presentation, then copy the link from your browser and paste that into your Figma plugin. If we go to our Dieter Rams slide image here and just paste that into the embed field, we can see there that the video is being embedded, it's automatically playing, we've got the controls turned on as well, so we can actually flick through those if we want to, change where the video plays at. You can turn that off if you want to hide them, so you can see there that we hid those controls, you get really clean playback without the controls ever popping up, but in my case I'm just going to leave the controls on to make it a bit easier to control once we upload the presentation from Figma.

Now that we've got our Vimeo from video embedded to our Figma layer, all we need to do to actually present it in the browser is click on the "Export Presentation" button in the top right hand side of the Figma plugin, go down to "Upload Web Presentation", or "Update Web Presentation" in this case, because I've already created this link before. I'm just going to hit "Update Web Presentation" now, and this will basically automatically upload all of our slides and images from Figma, including the Vimeo embed, up to the Pitchdeck presentation web app. 

It's going to give you a link that you can use with a password, or if you don't want to use the password, you can just use this passwordless URL here. I'm going to copy that, I'm going to go back to my browser, I'm just going to paste that in, and if we hit "Enter", that will load up our presentation. There we go, that's what it looks like; it's looking really nice in our presentation, and we do have the overlapping text which works some of the time, in this case it's probably not a good idea because there's so much text inside of the trailer as well, but that's more of this design decision. All of the other slides are showing up as expected; these are just static slides, they just have Figma images and Figma text content that's being animated, but as we know our first slide has that Vimeo video embed. 

That's basically what it looks like; we can switch back into Figma now and close this off, and that's it. All you need to do is paste in your Vimeo video link into this little embed input field in the Figma plugin, and you'll automatically be able to include any Vimeo video that you want and have that automatically embedded into your Figma presentations that you upload to the Pitchdeck presentation app. I hope that's been helpful if you've been wondering how to embed your videos from Vimeo into your presentations from Figma, this is a really quick way of doing it. As always, thank you for watching and we'll be back soon with more Figma tutorials like this very soon.

---

---
type: tutorial
title: How to embed YouTube videos in Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-12-06T00:00:00.000Z
dateModified: 2022-12-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-embed-you-tube-videos-in-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-embed-you-tube-videos-in-figma-presentations-using-pitchdeck.md
---

# How to embed YouTube videos in Figma presentations using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to embed YouTube videos into your Figma presentations using the Pitchdeck presentation Figma plugin.

To get started you just have to go to your Figma file, click on the "Resources" icon at the top here and then search for "Pitchdeck", and under the "Plugins" tab you'll see Pitchdeck pop up. Just go ahead and click on that, and then you can run the Figma plugin by either clicking on the "Run" button here or you can click on this little "More options" icon here and click on "Save Figma plugin" to keep it in your Saved plugins list for later.

I've already added it to my Figma plugins list, so I'm going to right-click on my canvas, I'm going to go down to "Plugins", I'm going to go down to "Saved plugins", then click on the "Pitchdeck" option, and that's just going to run the Figma plugin that we just saved a second ago.

If you haven't used the Figma plugin before, the way that it works is you basically create frames on your page and each of those Figma frames will get treated as a slide in your presentation. I'm just using 1920x1080 frames, and then I'm just adding some text layers and image layers directly inside those frames, and those get used for animations links and embeds.

Today I'm just going to be focusing on how to add YouTube embeds into your Figma presentations that you can then present using the Pitchdeck app, and I'll show you how to do that now. All you need to do is click on the "GIFs/Videos/Embeds" tab in the right hand side on the right hand of the Figma plugin, and you just need to find the layer that you want to replace the static image with your playable YouTube video embed. In this case I'm just going to use this layer here, and if you click on the "Supported Embeds" link, that'll just take you to the documentation page for Pitchdeck and you can see some examples of the different kinds of embed that it supports; but for today I'm just going to be focused on YouTube videos.

You can embed either YouTube shorts or just regular YouTube videos, today I'm just going to be doing a regular YouTube video, but if you want to embed a YouTube short you can do that as well. I'm just going to grab a trailer for the Dieter Rams documentary and I'm going to include that in my presentation by copying the URL, so I'm just going to grab the link straight from the browser, and I'm going to grab that and go back to Figma, and inside of this little input field I'm just going to paste that, and you'll see that it starts playing.

I've just toggled the controls on just so I can pause it for a moment, but you can basically leave this to auto play and loop, and if you don't want to have the controls, so you just want to have them fade away, you can turn that off as well. I'm just going to leave them on for the time being, and now that we've got our video set up all we need to do to actually present this in our presentation is to click on the "Export Presentation" button and then click on the "Upload Web Presentation", or in my case I'm going to click "Update Web Presentation" because I've already created this Pitchdeck URL. I'm going to click "Update Web Presentation", that's just going to upload all of the slides that I've designed in Figma up to the Pitchdeck application and it's going to include our YouTube embed as we'll see in a second.

You can either copy the URL with a password if you want to send those separately, or you can copy the passwordless URL, which just lets you load up the link without needing to enter a password; I'm going to grab that one, I'm going to go back to my browser, I'm going to paste in the URL and hit enter. You can see we've got our YouTube video playing in the presentation, as we expect; you can skip through this if you want, because I've got the controls turned on, you can just bounce around for the video. Because we've got our text overlaying on top of the video, that's also sitting on top; we've got two different text layers there, and obviously the YouTube video that just plays underneath it as you would expect.

Now we can switch back to Figma, and that's basically it. I just want to keep it really short today just to show you an example of embedding a YouTube video directly into your slides using the Pitchdeck Figma plugin and being able to present those slides with the playable YouTube video directly from your Figma export when you upload it to the Pitchdeck web application. I hope that's helpful if you've been wanting to know how to embed YouTube videos into your presentations using Figma, this is a really quick and easy way of doing that to present them. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: Figma asset workflow for social media teams
description: A practical Figma workflow for social teams producing resized, compressed, and campaign-ready assets.
datePublished: 2022-11-26T00:00:00.000Z
dateModified: 2022-11-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/figma-asset-workflow-for-social-media-teams/
markdownUrl: https://www.hypermatic.com/articles/figma-asset-workflow-for-social-media-teams.md
---

# Figma asset workflow for social media teams

A practical Figma workflow for social teams producing resized, compressed, and campaign-ready assets. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### HyperCrop

[HyperCrop](/hypercrop/) is one of the more useful tools in this workflow. HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

### TinyImage

[TinyImage](/tinyimage/) is one of the more useful tools in this workflow. TinyImage matters in this workflow because production does not stop at design quality. Teams still need smaller files, cleaner exports, and faster pages. Keeping compression in Figma removes one more manual handoff.

### Bannerify

[Bannerify](/bannerify/) is one of the more useful tools in this workflow. Bannerify is useful here because it keeps banner production inside Figma instead of pushing the team into a separate build step. For teams creating multiple ad sizes, motion variants, or late campaign revisions, that usually means less repetition and a cleaner review cycle.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: tutorial
title: How to localize HTML email designs with Markdown text formatting in Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-11-22T00:00:00.000Z
dateModified: 2022-11-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-localize-html-email-designs-with-markdown-text-formatting-in-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-localize-html-email-designs-with-markdown-text-formatting-in-figma-using-emailify.md
---

# How to localize HTML email designs with Markdown text formatting in Figma using Emailify

#### Video Transcript

Today I'm going to be showing you how to easily translate your email designs using markdown formatting in an Excel spreadsheet via the Emailify Figma plugin.

To get started all we need to do is set up the Emailify Figma plugin by going to the "Resources" icon in your Figma toolbar and click on that, and if you search for the word "Emailify" and click on the "Plugins" tab and you should see Emailify pop up. If you click on that and then either click on the "Run" button here or you can click on this "More options" icon to save the plugin to your Figma plugins list for later, that will allow you to run it from your Figma file. I've already saved it to my Figma plugins list, so I'm going to click on the canvas, right click, go down to "Plugins", go down to "Saved plugins" and then I'm just going to click on the 
"Emailify" option, and that's going to run the Figma plugin that we just set up a second ago.

I've already got an email design set up, and I'm not going to be going through too much of the design process in this Figma tutorial; if you are new to the Figma plugin and are wondering how to design these emails using Emailify, there's a bunch of other YouTube tutorials on our channel, just search for the Emailify playlist and you'll be able to find a bunch of those. Basically, you can add these components via the tabs up here and customize the design and content here. I've just created a really simple one for today because we're going to localize this content into different languages with markdown formatting, so that we can actually format the text.

To get started, I'm just going to create a few pieces of formatting in this existing content, just so we can see what it looks like when we export it in a second. I'm just going to change a couple of things to bold, maybe we'll do some italics, and the other thing we can also do is links. If we want to add some links into here, if we wanted to highlight this content and create a link, you just highlight it, go up to the "link" icon in the top click on "Create Link" and then you can basically just add a link in there. I'm just going to add a link and that's going to create the link in here. Now that we've got a few different things set up in the content, all we need to do is go back to the Figma plugin, click on the "Localize" button and then we can select the "Excel" option which is selected by default, and select the email that you want to export. 

This is the default way of exporting it and you just have to include what locales you want to translate this into; for example, we could do French, we could do German, we could do Australian, not that it's really different, but we'll do that anyway. Then this time we're also going to toggle a brand new option called 
"Add Markdown", and what this option does if we enable it is if you click on that link, it'll take you to the documentation page for Emailify and just gives you a bit of an explanation about what this is going to do. I'll go through this with you once we've exported it, so let's go ahead and click on the "Export XLSX" button; I'm going to click on that here, and that's just going to go ahead and export all of our content from this email into a spreadsheet.

Once it saves, you just double click on the zip file and you'll get an Excel file; we can open this up in Excel just by double clicking it. You can use another tool if you want to use Google Docs or a different spreadsheet tool, you can definitely use that as well, but for today we're just going to be using Microsoft Excel. We can see here that we've got our content that's been exported; we've got our Figma text, which is all the text that's been exported from the content, and you'll notice that we've got some formatting included in the spreadsheet. What this means is it's basically using markdown, which is a certain type of text formatting syntax that allows you to have things like double asterisks or underscores to specify if a text is bold or if the text is italic, these are the different syntaxes you can use to specify that in markdown. 

Now that we've got the markdown option enabled, this is also getting exported into our content. For example we can see here that the link that we added in Figma is now being rendered as a markdown link in the spreadsheet. In between these square brackets you can see what the text for the link is, and immediately next to it in the regular brackets you can see what the URL is, or the website link is; that means we can basically now customize these things per locale. If we wanted to make a copy of these for the French one, let's say we wanted to actually change this in the French translation and we just open that up; we can make that link different, so we can do "/french" for the link, maybe we want to actually remove the bold formatting for this particular part, and we want to bold a different part. Maybe we want to bolt the word "Japan", so we can add the markdown syntax for the bold text around "Japan" instead.

We can do this for all of the different locales; for example, if we want to remove the bold heading for this translation, we can basically just change that, let's make it italics instead. We can also change just normal text as well, so if we wanted to remove the "Inc" from "Jiro Sushi", we can remove that, and let's do that for the Australian one. Any fields that you leave blank it will automatically just keep whatever's in the original design, they won't get overridden, but any that you populate per language will basically get overwritten from the other original text.

The other quick thing to note is as well, if you've already set up a preheader and subject line in your Emailify options, you can do that via the either the settings, if you click on the email you can put in some different settings, or if you go to the export, you can add a subject line and preheader in the export settings. If you were to click on "Export HTML" you can actually add this subject line and preheader here. I haven't done that yet, so that's why these fields are blank, but if you did that you would see the subject line and preheader here and you can actually create different languages for those subject lines and preheaders too. If we, for example, did a French subject line and a French preheader, we'll see in a second that this will also get imported into the Figma designs. I'm just going to keep it really simple for now, and I'm just going to save that.

I'm going to go back into my Figma design and click on the "Localize" button once again, and because I've now translated or added some translations to the Excel file I'm going to make sure that the "Import Markdown Formatting" toggle is set, because we exported the Excel spreadsheet using the markdown option, you definitely want to have the "Import Markdown Formatting" enabled as well, otherwise it's just going to import the text with the markdown formatting included, so it's going to include the asterisks and underlines and things like that instead of turning them into their markdown formatting visually. Let's do that now; all we need to do is drag in the Excel file into this little drop zone area with our "Import Markdown Formatting" toggling enabled, just let go of that, and you can see here that it's found three locales in the email that we want to import the content from.

I'm just going to click on the "Localize Selected Frames" button and we'll see that it's created a brand new page in our Figma file called "Email Translations" with a little time stamp. You can see here that we've got a copy of our original Figma frame, this is a copy of the frame that we originally exported, so that's just a reference left as is. Then it's created a locale for every translation that we added as well, we've got our Australian, German, French; and the cool thing is, as we saw before, we've actually changed some of this formatting. Instead of having this text here bold, we've moved that bold text and removed it from the "including" word and put it on "Japan". You'll remember that we also changed the hyperlink; you can see if I hover over this that the hyperlink has actually been modified to be "/french", so that's been changed. Then if we go over to this one, you'll remember that we changed the bold text to italics; that automatically made the text italic, and down here you'll remember that we removed the suffix from this little footer heading, so you can see over here it's got the "Inc" at the end, and this one has nothing at the end.

That's what that looks like there, and this is just a really easy way of using markdown to translate these emails with formatting. You can easily change the hyperlinks, you can easily change the formatting per translation, or you can just do it for the original translation as well. The other quick thing I'm just going to show you is how we also imported the subject line and preheader, so if you go to the "Export HTML" button and click on that, scroll down, and you can see here that even though we didn't have a subject line set originally, we did include it in our Excel spreadsheet just for the French translation. You can see here that the French subject line and French preheader text have also been imported; you can set that for all of your different emails if you want to translate the subject lines and preheader text as well, this can be a really easy way of doing it.

Once you're ready to go, you can export all of these emails at once from Figma to HTML. If we click on the "Export HTML" button, that's going to export our emails for us; give it one second, and now we can download as it file. I'm just going to save that to my desktop, double click on that, and if we open it up and drop the preview HTML into our browser, there we go; we've got our original email, we've got our French email, you can see here the different previews. We've got our link that we imported, you can see in the bottom left of the browser it's got the "/french" at the bottom, and then we've got our German version with the italic text, and finally this one with the text removed at the bottom. Of course, all of these are just inside of these folders, so these are all the actual individual emails. If you want to grab one to actually use, you can grab that file, the previous file is basically just loading in iFrames, or pointing to all these individual index files, but those are the ones you want to use when you go and send out the email.

I think we're going to leave it there for today; I hope this has been helpful if you've been wondering how to format your text using the Emailify localize feature. Now you can basically change your links per translation, translate your subject lines, preheaders, change any formatting that you need to change in a much more seamless way than having to manually do that when you re-import the content. Thank you for watching, I hope it improves your workflow if you're using the localization workflow in Emailify; thank you as always for watching, we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add audio to Figma animated MP4 video exports using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-11-21T00:00:00.000Z
dateModified: 2022-11-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-audio-to-figma-animated-m-p4-video-exports-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-audio-to-figma-animated-m-p4-video-exports-using-tiny-image.md
---

# How to add audio to Figma animated MP4 video exports using TinyImage

#### Video Transcript

Today I'm going to be showing you how to add audio to your MP4 video exports from any Figma layers using the TinyImage Figma plugin.

To get started we just need to go to the "Resources" icon in the top of your Figma file and search for the word "TinyImage", and under the "Plugins" tab you'll see the TinyImage Figma plugin pop up. To run it, all you need to do is either click on this "Run" button here or you can save the plugin to your Figma plugins list for later by clicking on the "More options" icon here and clicking on the "Save Figma plugin" icon that pops up. I've already got it saved to my Figma plugins list, so I'm going to go to my canvas, just right click anywhere, go down to "Plugins" go down to "Saved plugins", and then just click on the TinyImage link; that's going to run the Figma plugin that we just set up a second ago.

You can see here that we've got a really simple Figma file, I've got a bunch of images that I want to export into an MP4 video from Figma, and I want to add some audio sound to that video as well. I could use this for a social media post or share it around as a video on any kind of service that supports video, and to do that we just need to start by selecting the Figma layers that we want to include in this video. I'm just going to select all of these Figma layers, I've got seven layers selected, and then in the TinyImage Figma plugin you just want to click on the top button here that says "Create GIF/MP4", so we're going to click on that button now, and because we've got those layers selected when we click the button it's going to automatically load those seven layers into this little timeline.

By default, it's going to arrange the images just by the order that they're laid out on the canvas, but you can change that automatically by changing this option here. If you want to sort the images from right to left, for example, visually you can do that and it'll automatically rearrange it. If you've got the layers organized in a different way on the page you can sort them by rows, if you've named them in order you can sort them by their layer name, if you've numbered them it'll automatically sort them by layer name, or you can just use the layer order as well, or if you want to use the order that they appear on the layer sidebar, you can do that; for today, I'm just going to be using the left to right sorting.

It's also worth mentioning that you can also customize that manually, if you want to drag any of these frames into a custom order, just click on the little thumbnail and drag and drop those into a different order; but again, I'm just going to rearrange those to be left to right.

You can see here we've got a little preview of what the video is going to look like once we export it. You can change the delay per frame, this little slider will basically change the duration of how long each image shows up in your video. We can extend that out to seconds or we can make it really short so it goes much faster. I'm just going to leave it at the one second mark for now and you can also override the delay for any particular frame; if you wanted one to go faster or to go slower you can actually change that directly in these little inputs and that will automatically change the duration of the frame when it gets exported in the playback.

The next thing we need to do now that we've got our ordering set up and delay setup is just click on this little "Animated GIF" option and that's going to open up the select box that will let us change the format to MP4. I'm going to change the format to "MP4 Video" and select that, and you can see down here that after we've selected it, it's giving us a new option to add an MP3 audio track to the Figma MP4 video export. If you don't already have an MP3 audio sound track you can get this pretty much anywhere on the internet by going to a site like Pixabay, which gives you access to a bunch of royalty-free MP3s; you can use these songs in commercial or non-commercial applications.

You can basically just filter the kind of music that you want and preview it; if we were to preview some of these tracks, I'll just go through a couple really quickly for now. You can basically just go through them and preview them and if you want to download one to use as sound in this MP4 video export from Figma, you can just click that "Download" button and save it to your computer. I've already done that; I've got this "Jazzy Abstract Beat" saved to my desktop, you can see it up here. Now that I've got that saved to my computer, I'm basically going to go back into Figma and I'm going to take that sound file that we downloaded and I'm going to drag and drop that MP3 directly into this little footer area here, then I'm going to let go of that and you can see that it's changed to showing the little file name and a little tick to say that it's been dragged In successfully.

This audio is now going to be added to our video export when we export it from Figma, so let's do that right now. I'm going to click on the "Export MP4" button and that's going to take the Figma frames that we just set up, take all the timings we just set up, and it's going to include the MP3 audio sound that we just included by dragging and dropping it. I'm going to click on "Save" and save that video to my desktop, you can see here that it's saved a new MP4 file and I'm just going to open that right now.

I'm going to double click on that MP4 video with audio exported from Figma, and if we move that over here and click "Play" this should include the audio as sound that we just included in the Figma MP4 video export. I'm going to play that now, so that's basically what it looks like we've got our audio sound included over the top of the MP4 video that we exported from Figma using all the images that we already had in Figma. You can imagine this basically being a enhanced version of a GIF, and you can obviously export this to a GIF as well if you wanted to, but using the MP4 option does give you the option of having the MP3 included as sound for the MP4 video from Figma as well, which is pretty cool.

These can be really handy, as I said, for social media posts if you need to include a really simple social media post just going through a bunch of images. You can obviously add text to these frames, you can add anything you want that you can normally do in Figma to each of these frames; the way you would do that is just by adding these into frames themselves and then adding some text layers onto the top. You could just basically include all of the text that you need, if we were to put that text in there, let's make that a little bit bigger and then if you would now to select the frame layer as well. I'm just going to do a few layers, click on the little "Refresh" button and you'll see here that we've got our text inside of the image. That's just a really easy way of customizing your frames if you wanted to add different text or different things into those frames, you don't have to just use single images, you can also just create frame lockups as well.

That's basically it for today, I just wanted to show you a really quick tutorial of how to create and export MP4 videos from Figma with audio sound included; MP3 music, or you could do narration as well if you wanted to do voice-overs, or a combination of the two. As long as you've saved that MP3 file to your computer you can basically use whatever you want and drag that into the Figma plugin to include that audio in your MP4 video exports from Figma. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails with RTL (right-to-left) text from Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-11-20T00:00:00.000Z
dateModified: 2022-11-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-with-rtl-right-to-left-text-from-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-with-rtl-right-to-left-text-from-figma-using-emailify.md
---

# How to export HTML emails with RTL (right-to-left) text from Figma using Emailify

#### Video Transcript

Today I'm going to be showing you how to export HTML emails from Figma with right to left RTL text formatting.

To get started we just need to install or run the Emailify Figma plugin, and you can do that by clicking on the "Resources" icon at the top of your Figma file searching for the word "Emailify" and if you click on the "Plugins" tab you'll see Emailify pop up. All you need to do is either click on the "Run" button here or you can save the plugin to your Figma plugins list for later by clicking on the "More options" icon here and then clicking on the "Save Figma plugin" link that pops up.

I've already done that, so I'm going to go to my Figma canvas I'm just going to right click anywhere, go down to "Plugins" go down to "Saved plugins" and then I'm just going to click on the Emailify Figma plugin that we just saved. Once that runs you'll see that we've got a bunch of different options here; I'm not going to be going through how to design emails in this Figma tutorial we've got some other Figma tutorials on the YouTube channel if you're new to the Figma plugin and want to know how to actually design the emails. I'm just going to assume that you've already got an email set up and you need to export that email with RTL text formatting right to left and I'm going to show you how to do that in a second.

Just to make sure you've got it set up in your Figma file first; the RTL formatting options are just under the "Figma" icon in the top left here and then if you go to the "Text" option and then down here there's an option called "Text Direction"; by default, this is always set to "Left to Right", if I click on "Left to Right", for example, you can see here that the text has been reversed. This is the default way that it's aligned, but for any text layers that need the RTL or right to left text formatting you can change that as I just showed you; just go to the Figma icon go down to the "Text" option and go to "Text Direction" and just change that to be "Right to Left" instead of "Left to Right". I'm going to switch that back and you can see here that the text has been reversed.

We've already got an email designed just using the components from the Figma plugin; as I said, I'm not going to go through that today but you can basically just click on any of these and automatically add these components and that will help you design the email. I'm going to be exporting this to HTML now, so if we preview this email just by clicking on the "Preview" button in the Figma plugin you'll see that by default the text is the wrong way around, it's actually exporting it with the default order, so the the order in the Figma file doesn't actually get applied automatically to the Figma plugin and we need to change an option to make that work. To make that work, we just go to the export HTML options, so if you click on the "Export HTML" button in the Figma plugin you'll notice that there's a setting down here called "RTL Text" and that's turned off by default, but you can turn that on just by clicking on this toggle switch here.

If we toggle that on and then go back to our preview options and click on the "Preview" button, you can see here that the text is now rendering the way that we expect. The reason for that is it's automatically injecting some RTL text formatting, so there's some special HTML that needs to be added to make sure that the text direction gets applied with RTL or right to left attributes and styles; that "RTL Text" option is going to enable that for you.

That's all you need to do; if you now want to export that RTL HTML email from Figma to your computer or export it from Figma to any of these platforms, for example: MailChimp, Klavio, or any of the email platforms that you might be using. Today, I'm just going to be exporting it from Figam to a simple HTML email that we can download to our computer. The way we do that is just by selecting the emails that we want to export, so I'm just going to select this one and then click on the "Export to HTML" button with my "RTL Text" option enabled. I'm going to click that now, and that's going to upload our images, upload our assets and automatically generate production-ready HTML from Figma for us. I'm going to click on the "Download your zip file" button and I'm going to save that to my desktop.

If you double click on the zip file and open up the folder, you'll see here that we've got a couple of files; our HTML has been exported from Figma into this folder here, so this is the actual HTML that we can view. If we drag that into the browser you can see that we've got our email here, or you can use the "preview" HTML file as well and that will just give you a nice preview page that you can use and see what it looks like on desktop and mobile. As I said before, if we inspect that email, if we go back to the email and click "View Source", we'll be able to see that the content basically has "direction" properties. If we look down here we can see that the text direction is set to "rtl"; that HTML attribute is basically getting automatically added, based on the "RTL Text" setting that we enabled in the Figma plugin.

I just want to keep that really short for today, as I said, if you want to get a more detailed idea of how to actually go about designing these emails in Figma there's plenty of other Figma tutorials on the YouTube channel; just check out the Emailify playlist and you'll be able to find quite a few in there. For today, I really just wanted to go through that really simple new RTL right to left text formatting option that you now have available if you need to export your emails from Figma to HTML in that kind of text formatting.

We'll leave it there for today and keep it a short one. I hope that helps you if you've been wondering how to export your HTML emails from Figma with RTL right to left text formatting, this is going to be the easiest way to go if you're designing your emails in Figma and need to export them out to HTML. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to import Google Docs to Figma with one click using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-11-20T00:00:00.000Z
dateModified: 2022-11-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-import-google-docs-to-figma-with-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-import-google-docs-to-figma-with-one-click-using-convertify.md
---

# How to import Google Docs to Figma with one click using Convertify

#### Video Transcript

Today I'm going to be showing you how to automatically import any documents from Google Docs directly into your Figma files using the Convertify Figma plugin.

To get started, we're just going to go into Figma and open up a new Figma file and then go up to the top toolbar here and click on the "Resources" icon, and if you go to the "Plugins" tab and search for the word "Convertify", you'll see the Convertify Figma plugin pop-up. Just go ahead and click on that, and then you can run the Figma plugin by either clicking on this "Run" button here or you can install the Figma plugin or save it for later by clicking on this little "More options" icon and clicking on the "Save Figma plugin" button that shows up. If you've already installed it we can get to it by right clicking anywhere, going down to "Plugins", going to "Saved plugins" and then clicking on the "Convertify" Figma plugin that we just set up a second ago.

Once that loads you'll be able to see that we've got a little interface here that's quite simple. The main thing we're going to be doing is changing this default option which is to export Figma to Sketch, we don't want to do that today; today we're just going to be focusing on importing Google Docs into Figma. We're going to click on this options selector, click on that, and scroll down to the "Import to Figma" category and we're going to click on the "Import Google Docs to Figma" option; go ahead and click on that, and now you can see we've got the "Import Google Doc to Figma" option selected. We've got a few options that we can check here, we'll go through these in more detail in a second, but for now I'm just going to show you how to actually get your Google Docs link set up to be able to use with the Figma plugin.

I'm going to jump back into Google Docs in my browser and I've just got a really simple resume template that I grabbed from the Google templates that comes with Google Docs. To be able to use this Google Doc with the Figma plugin to s totally fine.

Once you've changed those options so it says "Anyone with the link", you can then click on the "Copy link" button directly under that. I'm going to click that now; you can see the link has been copied, and now I'm just going to go back into Figma, and inside of the Convertify Figma plugin I'm just going to click on this input field down here where, you can see it's expecting a Google Docs link. I'm going to paste in the link that we just copied from our Google Docs window, and you can see here it's saying that it's a valid Google Doc URL; and because we've made it public, that's going to allow us to load it from Google Docs into Figma in a second.

I'm just going to leave all the options as default, but the only one I'm going to change is to "Hide Table Borders" and what that means is by default it'll automatically include borders for any tables that get imported which is really handy if you're going to be importing data tables and things like that inside of a Google Doc, but at the same time in this particular document the table is being used to lay out the columns here. If we enable those borders I'll show you what that looks like; I'm just going to click on the "Import Google Doc" button and give you a quick example of what it looks like by default, and then we can go through some of those other options that I just mentioned.

Okay, it's finished importing our Google Doc into Figma, and as you can see here it's gone ahead and imported all of the content from the Google Doc. As I mentioned, the table that was imported is being used for layout and that's why it's got these borders automatically set. You can either hide those just by clicking on the "Hide" toggle in your Figma designs, that will just hide the borders, or if you know that you want to get rid of those in the first place, we can actually just re-import that document with the borders automatically hidden. I'm just going to check the "Hide Table Borders" option and click on the "Import Google Doc" again, and this time it's finished importing our Google Doc to Figma without any of those table borders added in, it's just left it just with the table layout and without those border strokes.

We can see here these are all the text layers, so we can actually edit this. I can put my name up here, I can change the details of this resume, as you'd expect. The size of the document matches the size of the document in Google Docs as well, it's a one for one match as far as size goes. You can see we've got all the formatting, fonts and everything like that set up as we expect from Google Docs in Figma. It also includes spaces, so between all of these paragraphs in Google Docs there's a certain space that's being used, and that space is also being carried over, so you get that really precise spacing. That's roughly what it looks like there.

I'm going to run through one other example just to show you what this will look like in a normal document, one that's not split up into these columns. I'm just going to go to another template from the Google Docs templates list, and I'm going to do the exact same thing; I'm going to click on the "Share" button, I'm going to make sure that the "General access" setting is set to "Anyone with the link", which it already is. Then I'm just going to click on the "Copy link" button and jump back into Figma, go back into my input here and get rid of the old URL, and I'm going to paste in that new Google Doc URL that we just copied. This time I'm just going to leave the table borders off, even though I don't think this document has any borders in it, and I'm just going to import that with the default settings again. I'm going to click on "Import Google Doc" and that's going to import the Google Doc from the new link directly into Figma automatically.

You can see here that it's gone ahead and imported that document. Just a bit of a side by side; you can see that we've got the content, we've got the background color, we've got the formatting of the fonts and everything else that you'd expect. Because this is a multi-page document it will automatically split up the content across multiple pages; we've got two pages in this case, and it's gone ahead and split up that content based on the size of that content per frame. Each Figma frame is basically a Google Doc page in Figma, so when it imports the Google Doc from or the document from Google Docs to Figma, each of those pages get imported as a different Figma frame. You can see here that we've got page one and page two on those two Figma frames, but if you wanted to merge those into a single Figma frame you can also do that as well,

There's an option here if you toggle the "Merge pages into single frame" option and you enable that, and then we re-import the document, click on the "Import Google Doc" button; that's just going to import the document from Google Docs into Figma, but this time it's going to only import it into one Figma frame. We can see here that instead of splitting up the pages it's actually just imported all of the content onto one Figma frame. That can actually be handy if you want to just drop all of the content into a single frame rather than a page based structure in Figma, if it's actually easier for you just have one massive frame where whether you're going to use it as a mock-up or that you're going to use it as more of just a content import rather than an exact design, as a page based design, then maybe this option is going to be more useful for you in that case.

On that topic, the other thing we can do is we can also click on this second option which is an option to remove styles and formatting. I'll show you what that looks like; if you if you enable the "Remove Styles and Formatting" option and again click on the "Import Google Doc" button that's going to re-import the document from Google Docs into Figma, but this time you'll notice that it looks quite different. The reason for that is this option to remove styles and formatting basically just standardizes the styles of the document rather than using the exact styles that you specified in Google Docs. For example, we've got the colors, the font sizes, the font settings, spacing all that sort of stuff that's been defined in this Google Doc, and it's basically being been ignored in favor of the formatting of the document. What I mean by that is you can see here when I highlight these bits of text, it's using formatting that's predefined into these categories of "title", "heading", different level headings, paragraphs; and you can see that the document structure is really based around these headings and formatting options.

What this option does in the Figma plugin is it removes all of the styling that's been applied to these, and it just uses those semantic headings to then pre-define its own styles; it really just simplifies the document if you've got a really crazy document, or it's just a very complicated with lots of styling, and you just want to simplify it and just really just import the content from Google Docs to Figma without worrying too much about the exact design, then this is going to be a good option for you to do that. The other cool thing is because there's no exact spaces and all that sort of stuff, you can then really easily also just format the document yourself. If you wanted to change the spacing between those paragraphs and headings, you can do that just by tweaking the item spacing in Figma, and that's going to give you a really easy way of changing the spacing and stuff like that.

You can also go ahead and of course format these text fields in another way if you don't like the color, or you don't like the styles, you can always just go ahead and change those yourself. You can obviously change the colors of things in Figma and style text in Figma as you'd expect; we can obviously change the fonts and and make that look a little bit different as well, that's all obviously doable. As I said, this might be an option if you just want to really get a simplified version of a document from Google Docs into Figma without worrying about the exact styling working.

The only downside to this approach is if you're using a file or Google Doc like this one, which does have a table layout, it will basically import all of that content as a table and it won't really work as well if it's more of a designed layout, so I wouldn't recommend using that option here. I'll show you what that looks like just as an example; it's not really going to be that good or that useful because these are really table cells, it's still importing all the content, but it's importing them into a table as if it was a data table inside of a page. As I said, I probably would avoid using that option if you're using a complex layout like this, but for a regular single column document, which most column documents are just really a single column with content in it, you can definitely use that "Remove Styles and Formatting" option.

Just one more thing before I finish up the Figma tutorial; if you're wondering where all those pages are getting created, if you expand your "Pages" option up in the top left here in Figma, you'll be able to see that we've got a history of all of the Google Docs that we imported to Figma. Every time you click the "Import Google Doc" button and import a document from Google Docs into your Figma file, it will automatically create a new page with a timestamp to let you know when that was imported. You can see here we've got the different time stamps, and it will automatically use the title of the Google Docs document, so we've got "Essay" and "Resume", and we'll automatically name the pages with the title of the Google Doc as well.

I'll leave this Figma tutorial there for today, I just wanted to run through the different options in the Figma plugin to go through what all of those do. There will be more options coming to the Figma plugin in the future, being able to support things like custom headers and Footers, all of that sort of good stuff will be included in a future version of the Figma plugin, but for now this is in BETA; there's going to be a couple things that you know may not look exactly right, but this will be improved over time and resolved over time, so just be bear with us on that one.

We'll leave the Figma tutorial there for today, and if you want to have a bit of a play around with this you can use the Figma plugin right now. As I said, this has been shipped to the Figma plugin you can just select that option to import Google Docs to Figma; give it a try while it's still in BETA, and as I said it'll be improving over time, but I hope that helps your workflow if you're using Google Docs at work or in your personal usage, and you want to get that content into Figma really easily, then using the import Google Docs to Figma feature in Convertify is going to be the fastest way to go about it, rather than re-importing all of that content manually yourself. As always, thank you for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to import Google Sheets to Figma with one click using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-11-20T00:00:00.000Z
dateModified: 2022-11-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-import-google-sheets-to-figma-with-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-import-google-sheets-to-figma-with-one-click-using-convertify.md
---

# How to import Google Sheets to Figma with one click using Convertify

#### Video Transcript

Today I'm going to be showing you how to automatically import a table from a Google Sheet directly into Figma using the Convertify Figma plugin.

The first thing we need to do to get started is just click on the little "Resources" icon in the top of your Figma file and in the search box just type the word "Convertify", and under the "Plugins" tab you'll see Convertify pop up. All you need to do is either click on this "Run" button or you can save the Figma plugin for using again later by clicking on the "More options" icon here and clicking on the "Save Figma plugin" menu item. You can either click the "Run" button, as I said, or if you've saved it to your list you can right click anywhere on your page, go down to "Plugins" and then click on the "Convertify" option, and that's going to run the Figma plugin that we just set up a second ago.

Instead of using the default option, which is exporting Figma to a Sketch file, which you can also do, you can open up that little options list and instead of exporting from Figma we're going to go down to the "Import to Figma" category and we're going to click on this bottom option here, which is "Import Google Sheet Table to Figma". I'm going to click on that, and that's just selected this import Google Sheet table to Figma option, and now you can see that it's bringing up a new input field here, and it's expecting a Google Sheets link. 

What we want to do is basically go to our browser and we want to find any Google Sheet that we've got a table set up for already. I've got a really simple movie app table, I've just got a list of rows and columns and these are just for different movies. You can see here this is my header, so I've got my header labels. This is the poster label and underneath that I've got got a bunch of image links, and these are all going to images; if I click on one of these you can see that it's loading up an image a poster. I've just got four different images under there, and then all the rest are just text.

I want to import this table from Google Sheets directly into Figma and I can do that by clicking on this little "Share" button up here; I'm going to click on "Share" and once that loads up I'm just going to make sure that this "General access" setting is set to "Anyone with the link". By default, it's set to "Restricted", but for now we want to actually change this to "Anyone with the link", and then on the right hand side you can leave this setting as "Viewer"' you don't need to change it to "Editor" or anything like that, 
"View" is perfectly fine.

Once you've set up those two options in the share modal, just click on the "Copy link" button underneath; click on that button, and it's going to copy the link to your clipboard. Then once you've done that, you can just go back into Figma and in our input field here where it's asking for the Google Sheets URL, I'm going to paste that link that we just copied, and I'm just going to click on the "Import Google Sheet" button. Once that's loading you'll notice that it's loading up the Google Sheets images; it's downloading any of those images, if you've got images in your spreadsheet, and then after that's finished you're going to see a new table created in your Figma file using all of the data or table items from your Google Sheet.

You can see here that we've got our header, we've got our rows, and because this is a component we can actually change the width of these columns as well; I can adjust this and it will adjust all of the child instances. We've got our header up here and these are all children of that header; any widths that are set in the table header component will be inherited by the instances as well. That also goes for the styling; if we wanted to change the styling of this text, for example, we can change that in here and that's going to update the styling of all of the children as well. Of course you can override those in the instances as well; you can re-set that, so we can set it to "Light" and that'll override it at the instance level, but you can do that if you want to.

The same thing goes for the images; because we've got this particular column set up for an image based column, you'll notice here that we've actually got our images, but they're just currently a square. Because our ratio of the images are different, what we can do is we can go up to the component level and in the table header cell, I'm just going to unhide the image. There's a hidden image shape layer there and that's just the component layer for our posters or for our images. What we can do if we want to change the image size for all of our rows is we can just adjust this layer in the component, so I can make that taller and just change the ratio of that. Now we can see it's looking much more like a movie poster, and once you're happy with that you can then just hide that image layer again because it's a component layer and we only want to use the header for the labels; we don't want to have the image layer in the actual heading, but you can obviously just turn that on and off when you need to adjust it.

That's what that looks like there and we can also adjust the width of the table itself. You can see here it's quite responsive as far as the widths go, and again, if you want to then re-adjust these you can just go into the header component and you can adjust each column's width as well. You've got the option of adjusting it at the column level and also adjusting the width at the parent level, and you can change that width yourself.

It also automatically includes strokes; because it's got a table row set up it automatically includes a stroke option turned on by default. You can change the color of that here if you want to make those lines darker or lighter, you can do that. If you want to hide them entirely, just click on the little "Hide" icon, and again, I'm just doing this this on the table header component. If you click on the table header component you'll see the stroke properties on the right hand side, you can just turn those on and off, or you can change the styling, and you can increase that or decrease it as well; for now I'm just going to leave it invisible.

That's basically it; you can use this to import any tables from your Google Sheets to Figma. It's always going to work much better if you're just using a simple table like this, if you start getting fancy with other kinds of layouts in your template, it's probably not going to work as well. I'd recommend just keeping it very simple, this is a standard spreadsheet table using the first row as your header, so you want to put all the all of your labels into there and then just using the other row elements as your content. If you do need images, as I said, just paste in an image URL or an image link and that will automatically be downloaded and imported into your Figma table as well from the Google Sheet.

I think we'll leave it there for today, I don't want to make it too complicated. It's a pretty simple Figma tutorial, I just wanted to show you how to automatically get any table content from a Google Sheet that you might have set up and automatically import that into a Figma file, which can be handy if you're working with large data tables and collaborating in Google Docs or Google Sheets, but you also need that content synced up with Figma as a responsive table, this is going to be the quickest way to go about it. We'll leave it there for today; thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export animated MP4 videos from Figma using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-11-19T00:00:00.000Z
dateModified: 2022-11-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-m-p4-videos-from-figma-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-m-p4-videos-from-figma-using-tiny-image.md
---

# How to export animated MP4 videos from Figma using TinyImage

#### Video Transcript

Today I'm going to be showing you how to export animated MP4 videos from any Figma layers in your designs using the TinyImage Figma plugin.

To get started we just need to install the Figma plugin or run it by going to your header bar in Figma, then click on the little icon that says "Resources" and if you go to the "Plugins" tab and search for the word "TinyImage" and you'll see the TinyImage Figma plugin pop up. If you click on that you'll be able to run that Figma plugin by either clicking on the "Run" button here or you can save the Figma plugin for later by clicking on this "More options" icon and clicking on the "Save Figma plugin" button that's underneath that; once you've already installed the Figma plugin you can run it as I said by clicking on the "Run" button or you can just right click anywhere, go down to "Plugins" and then go to "Saved plugins" and click on the TinyImage Figma plugin, and that's just going to run the Figma plugin that we just set up a second ago.

You can see here in my design I've got a really simple design with a handful of different images in it, and I basically want to create a animated MP4 video from these images and export that from Figma. I'm going to do that by selecting all of the image layers that I want to include; I'm just going to select all of those, and you can see they've been selected on the canvas, and then in our Figma plugin we're going to click on the "Create GIF/MP4" button in the header here. I'm going to click on that button with these layers selected and that's just going to load up a little preview of what this animated export is going to look like.

You can see by default it's setting a 500 millisecond delay between each of these frames, and you can see we've got all the frames here each of them is going for half a second we can actually change that; if you wanted to make that a bit slower we can change it to be one second per frame or you can even override each frame with its own special override. If we wanted to just make a couple of them quicker we can easily just add those overrides in here and when it gets to those frames it'll skip over those quicker because we've specified that to be a bit shorter. I'm just going to leave a couple of those like that, and I'm going to leave the other ones at just one second because I think that's a pretty good speed for the animation we want to export today.

The other thing you can do is you can also set if you want the images to cover or contain the size of the image; for example, this is currently set to "Cover" if we change that to "Contain" it will automatically fit the entirety of the image into the frame and basically it uses the first frame in our selection here as the default width and height, but you can go ahead and change that if you wanted to, or you can scale that up or down proportionally. If you wanted to make that double the size you can see that it's going to export it at a much higher resolution, but for today I'm just going to leave it at "1x" and I'm going to set that to "Cover" because I want the images to fill up all the available space and not have any empty space or black lines or anything around the image.

Once you're happy with your animation, all you need to do is change it from the default export format of a "GIF" and you want to click on that little select icon and instead click on the "MP4 Video" option; I'm going to click on "MP4 Video" and we've got our animation set up the way we like it. If we wanted to we could also rearrange these frames; if you wanted to sort the frames in a different order you can sort them visually we could change it so the frames are automatically ordered from right to left, for example, that would reverse the order. You can also drag and drop these around if you want to manually change the order of some of these frames, you can totally do that as well, but for today I'm just going to leave it as sorting it by the default order of left to right, so it matches what's on our canvas already.

Okay, I'm all done and I'm ready to export the frames from Figma to MP4 video; now all I have to do is click on the "Export MP4" button and that's going to take those Figma frames and generate an MP4 video from Figma and allow me to save it anywhere on my computer. I'm just going to save it on my desktop, and you can see it's just saved, and now if I click on that video on my desktop and double click it, it's going to open up the MP4 video file. You can see we've got the ".mp4" extension and now I'm just going to hit "play" and you can see here it's exported our animated MP4 video from Figma the same way that we designed it in the Figma plugin.

If we replay that one more time you'll be able to see that most of these frames go for a second and then we've got those two frames that also go for half a second; this one and this one are a little bit quicker, but that's basically what it looks like. It's exactly what we exported, and exactly what we designed in Figma has now been exported as an animated MP4 video really quickly, so you don't have to use any other video editing tools or any complex software just to get these images from Figma into an animated MP4 video; you can just click one button once you've designed it in the TinyImage Figma plugin and export it instantly to a usable MP4 video. You can post it on social media or anything you want really, you can just share that video file around that's now on your computer.

That's basically it for today, I just want to keep it really simple to show you how to take any layers in your Figma file and turn those into an animated MP4 video from Figma; this is the way to do it, if you want to do it really quickly. Feel free to give the TinyImage Figma plugin a go and hopefully it improves your workflow. I'm going to leave it there for today; thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add audio to Figma video banner exports using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-11-17T00:00:00.000Z
dateModified: 2022-11-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-audio-to-figma-video-banner-exports-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-audio-to-figma-video-banner-exports-using-bannerify.md
---

# How to add audio to Figma video banner exports using Bannerify

#### Video Transcript

Today I'm going to be showing you how to add audio or music to your animated banners that are exported from Figma as MP4 video files.

To get started all we need to do is install or run the Bannerify Figma plugin; and you can find that by going up to the top of your Figma file where it says "Resources", click on that little icon and then you just want to search for the word "Bannerify" and you'll see Bannerify pop up under the "Plugins", tab all you need to do is click on that result, and you'll see this little window pop up. If you haven't already done so, you can install or save the Figma plugin by clicking on this little three dots "options" icon then clicking on the "Save Figma plugin" menu item that you'll see. If you've already saved it, we can run the Figma plugin by either clicking on this "Run" button in the Figma plugin window, or you can just right click anywhere on your Figma page, go down to "Plugins", go to "Saved plugins" and then click on "Bannerify", and that's just going to run the Figma plugin that we just saved a moment ago.

I've already got a bunch of banners designed, and each banner is treated as a Figma frame; every Figma frame you can see on the left here is an individual banner and each of those banners have layers in them which make up the banner timeline. I'm just going to select a couple of these banners that I've already designed, I've got a half page skyscraper and I'm also just going to select the medium rectangle and load those two banners by clicking this button here. That's going to load up the timeline that I've already created and you can see here if I just click the "play" button, that gives you an example of what the animation looks like, it's just a really simple four second timeline and that's what it looks like.

In this video I'm not going to be going through how to actually design the banners and how to add the animations, if you're interested in that and you're new to the Figma plugin you can find some other Figma tutorials on the YouTube channel; just search for the "Bannerify" playlist and you'll be able to find a bunch of those; today I'm just going to be assuming that you've already designed your banners and you've already animated them in a way that you are happy with, and all you want to do is now export those to MP4 with an audio track included.

This is a new feature, and to use it all we need to do is click on the "Export to GIF/Video" button up here in the header of the Figma plugin; I'm going to click on that and you'll see down the bottom here we've got a bunch of export options. If you've used this Figma plugin before you can see that you can export it to a range of different formats and the one we're going to be looking at today is the MP4 export. If you just click on the "Export MP4" button that's going to render out the banners that you've animated in Figma to an MP4 video file, but it's not going to have any sound whatsoever; these are just muted or banners with no audio on them, which can be handy for different applications, but if you want to add some audio or some music this new feature is going to allow you to do that.

It's fairly straightforward, all you need to do is find an MP3 file that you want to use; I'd recommend just searching online, and there's a link in the Figma plugin to a website where you can find free audio files. If you click on that link it'll open up this website, the Pixabay website, where you can search for music and these are free to use for commercial use. You can find any of these songs or any of this audio and you can use this for commercial use for free, so we can browse the tracks and we can find one that we like; for example, I might click on the "Alternative Hip-Hop" filter and you can basically go down and preview different tracks. If you click on the play button that's just going to give you a little preview, and once you find one that you like; for example this "Chill Hip-Hop" one, we might want that; all you need to do is either click on the
"Download" button or just right click that link and click "Save link as", and you can save that to your computer.

If you save the MP3 file to your computer, now we can jump back into Figma and in our Bannerify Figma plugin you'll see down here that there's an export setting for MP4 to click or drag and drop an MP3 audio file. I'm going to grab the one that we just downloaded a moment ago, so I've got the "Chill Hip-Hop" one here; I'm going to grab that from my desktop where I saved it and just drag and drop that MP3 file into this little drop zone area in the Bannerify export options. I've just let go and you can see there that it's added the MP3 file from our computer into the Figma plugin, and that's basically ready to go.

Now all we need to do is click on the "Export MP4" button and that's going to render out our banners that we've already selected in the Figma plugin and it's going to encode them to MP4 video files. but this time it's going to be exporting them with that MP3 music track automatically inside of the MP4 videos, so these videos are going to have sound in them. Once the banners have finished exporting to MP4 all you need to do is click on the "Download your zip" file button and save that to your computer; then I'm just going to unzip the file by double clicking on it, and you can see here it's going to give us a folder, and we can see in the folder we've got our videos folder which contains the MP4 files.

I'm just going to load up that HTML file in the browser just to give us a really quick preview of what's actually in those video files. I've just dropped that into my browser and you can see here that the videos aren't auto-playing, and the reason for that is because they have audio on them; you can't force it to automatically play in the preview. All we need to do is click on the little "play" icon for the video and you can see there that we've got our video playing back with the audio track that we added to Figma automatically included in that MP4 video. The same goes for the other banner that we exported, it's just playing the small one but the audio track will automatically get added to every banner that you export. For example if we play this larger banner, I'll play that one now, and that has the exact same audio track, too.

You only need to drag in the file once and when you export the banners from Figma MP4 video, the audio is automatically again be included in all of them; you don't need to do it one by one, you can just apply it to all of them in one go, so hopefully that speeds up the process a little bit.

That's basically it; it's fairly straightforward, it's just a brand new field in the export settings that you're already used to if you've been using the Bannerify Figma plugin before, this just gives you a little bit of extra flexibility to include audio to your Figma banners that are exported to MP4 videos. This can be really handy if you want to create more engaging social posts, for example, if you're posting these on platforms like Instagram or other social platforms, adding a audio track whether that's some music or if you've created a narration track, or mixed some music with your voice and you want to create a bit of a narration for your video. this is a really easy way to now include audio to your animated banner video exports from Figma.

That's it; I'm going to leave it there for today, and I hope you have fun playing around with this new audio feature for your Figma exports to MP4 videos, and until the next time, thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: article
title: Export multiple aspect ratios from Figma
description: How to export multiple aspect ratios from a single Figma source without rebuilding every variation.
datePublished: 2022-11-09T00:00:00.000Z
dateModified: 2022-11-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-export-multiple-aspect-ratios-from-figma/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-export-multiple-aspect-ratios-from-figma.md
---

# Export multiple aspect ratios from Figma

How to export multiple aspect ratios from a single Figma source without rebuilding every variation. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for export multiple aspect ratios from figma when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How HyperCrop fits into the process

HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

With HyperCrop, teams can usually:

- generate multiple crops without rebuilding each frame by hand
- reuse presets for repeated channel and campaign work
- speed up image-heavy production for social, ecommerce, and ads

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [HyperCrop](/hypercrop/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If your team keeps producing the same image in multiple sizes, HyperCrop is the direct fix. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: How to create reusable crop presets in Figma
description: How reusable crop presets speed up repeat image production work in Figma.
datePublished: 2022-10-23T00:00:00.000Z
dateModified: 2022-10-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-how-to-create-reusable-crop-presets-in-figma/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-how-to-create-reusable-crop-presets-in-figma.md
---

# How to create reusable crop presets in Figma

How reusable crop presets speed up repeat image production work in Figma. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for how to create reusable crop presets in figma when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How HyperCrop fits into the process

HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

With HyperCrop, teams can usually:

- generate multiple crops without rebuilding each frame by hand
- reuse presets for repeated channel and campaign work
- speed up image-heavy production for social, ecommerce, and ads

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [HyperCrop](/hypercrop/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If your team keeps producing the same image in multiple sizes, HyperCrop is the direct fix. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to export HTML emails from Figma to Sendinblue using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-10-19T00:00:00.000Z
dateModified: 2022-10-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-sendinblue-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-sendinblue-using-emailify.md
---

# How to export HTML emails from Figma to Sendinblue using Emailify

#### Video Transcript

Today I'm going to be showing you how to automatically upload your HTML email designs directly from Figma into the Sendinblue email platform. If you're a user of the Sendinblue platform and you'd like to design your emails in Figma and automatically upload them as HTML into the Sendinblue platform, this Figma tutorial is going to show you how.

The first thing we need to do is just go to Figma and open up a brand new Figma file, and if you go up to the "Resources" icon up in the top header here and just search for the word "Emailify", and you'll see the Emailify Figma plugin pop up. If you just click on that result you can then run the Figma plugin by either clicking on this "Run" button here or if you want to save it for later you can click on the "More options" icon here and click on "Save Figma plugin", and that will automatically save it into your Figma plugins list.

I've already done that, so I'm just going to right click anywhere, go down to "Plugins", go down to "Saved plugins" and then click on the Emailify Figma plugin that we just set up a second ago. I'm just going to create a brand new blank email; I'm going to call it "Template Sendinblue test" and I'm just going to add that to my page. Bear in mind, this Figma tutorial is not going to go into a lot of detail about actually designing the email; if you want to have a look at the details for that, there's a bunch of other videos on the YouTube channel just search for Emailify and you'll be able to find those. Today, I'm just going to be really quickly spinning up a really basic email just to show you roughly what this looks like as it gets uploaded from Figma to the Sendinblue email platform.

I'm just going to add a few little bits and pieces here, and I think that'll do it for today. I've got my email, you can preview the email by clicking on the "Preview" button; you can see here this is HTML. I can widen that out to the desktop size, so you can kind of preview what it's going to look like at those different sizes, and as I mentioned I'm not going to go into heaps of detail, but you can also customize things like mobile font sizes and mobile spacing and things like that as well.

I'm just going to assume that you've got an email design that you're happy with and all you want to do now is upload it from Figma to Sendinblue. I'm just going to click on the "Export HTML" button up here, and you can see that this opens up the export options panel. By default, it's going to export it to an HTML email that you can download to your computer, but in this case I'm going to actually change that option and go down to the "Platform Integration" section and select "Sendinblue"; that's just going to change the options that we've got down here.

There's two different links that we need to have a look at; the first one is the API key, so you need to paste in your Sendinblue API key. You can click on that link which will take you to your API keys page if you're logged in to your Sendinblue account, and all you need to do is either grab the API key that you've already got, or you just click on this "Create new API key" button, you can name the key "Emailify" and then just click "Generate", and then it'll give you this key that you can copy into your Figma account. I can just do that now, I can name it "Emailify", click "Generate", and then I'm just going to click the "Copy" button and jump back into Figma, and I'm going to paste that into my Sendinblue API key field.

Then the second thing we need to add is our sender email; the sender email is basically the email address that the email is going to be sent from. You need to make sure that you've got one set up in your Sendinblue account; the way you can do that is you can create a new sender, so in the Sendinblue platform, go to the "Senders" page; you can go there by either going to the menu, or click on that link, and this is the place where you'll be able to see which email addresses have been approved for sending emails from your Sendinblue account. In my case I'm just going to use my email address, so I'm going to copy that email which has been verified for this account, so I can send emails from Sendinblue using that account. It's very important that the email you grab is actually verified and under this list, otherwise it's going to return an error. I'm just going to grab that email, paste it into the email field, and now I've got my API key and my sender email, so I'm ready to go.

The last thing you can do is add a subject line; if you want to add "new feature update", this will just add the subject line as well, so that'll automatically get included. Now that's all done, all I need to do is click on the "Upload to Sendinblue" button, so I'm going to click that now. This is going to automatically generate the HTML for me, upload all my images, and it's going to upload that directly into my Sendinblue account automatically, so I don't actually have to manually copy paste HTML code.

You can see here it's been uploaded successfully; we can now go to the Sendinblue marketing templates page. If you click on that link, that's just going to take you to your Sendinblue templates page here. I'll just refresh that because I've already got it open, and you can see here the template that we just uploaded from Figma to Sendinblue has been created in the email templates list. We can jump in there and you can see that it's got our sender address that we added, it's got our subject line that we added, that's pre-populated, and the HTML that we included has also been added in there. You can see what that looks like there, and you can shrink that down as well if you want to look at the mobile view, but that's basically it. We can quit that now; you can use that template uploaded from Figma to Sendinblue in your campaigns, you can send that out from Sendinblue; and you can send a preview to
yourself if you want to do that as well.

That's basically it; I just wanted to keep this really short and concise for anyone who's wondering how to export HTML emails from Figma to Sendinblue, this is the fastest way to do it if you don't want to go about manually coding HTML, or manually uploading HTML into the Sendinblue platform. If you're already a Figma user and you want to design your emails in Figma, and you're also wanting to use them with Sendinblue, then the Emailify integration is going to be something that I think you'll be very interested in trying out. If you do try it, out I hope it all goes well; thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: article
title: Best Figma plugins for creative operations
description: The best Figma plugins for creative operations teams that need repeatable production workflows at scale.
datePublished: 2022-10-15T00:00:00.000Z
dateModified: 2022-10-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-creative-operations/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-creative-operations.md
---

# Best Figma plugins for creative operations

Creative operations teams usually inherit the work nobody else wants to own forever: production, coordination, exports, asset wrangling, revisions, handoff, and launch prep.

That is exactly why the best Figma plugins for creative operations are the ones that make workflows repeatable. Not glamorous. Repeatable.

### Bannerify for campaign volume

[Bannerify](/bannerify/) is a strong creative ops tool because it helps turn a high-volume banner workflow into something much less manual. If your team is constantly shipping campaign variants, format updates, and deadline-driven ad creative, Bannerify helps remove a lot of repetitive export and rebuild work.

### HyperCrop for multi-size image production

[HyperCrop](/hypercrop/) is ideal when creative ops teams are responsible for repackaging the same image across many channels. Instead of manually cropping one version at a time, it helps batch crop and resize assets into multiple aspect ratios far faster.

### TinyImage for performance-friendly exports

[TinyImage](/tinyimage/) helps teams export lighter assets from Figma without the usual detour into separate compression tools. For creative ops, that means faster preparation of assets for web, email, presentations, and PDFs.

### CopyDoc for content management inside design workflows

When campaign content changes constantly, [CopyDoc](/copydoc/) helps teams sync text updates, re-import approved content, and avoid the manual copy-and-paste grind that slows everything down.

### Pitchdeck for shareable internal and external decks

Creative ops teams also end up supporting presentations more often than they want to. [Pitchdeck](/pitchdeck/) helps keep decks in Figma while still exporting the formats stakeholders expect.

### The creative ops stack

The strongest combination for many creative ops teams is:

- [Bannerify](/bannerify/) for ad production
- [HyperCrop](/hypercrop/) for resizing and crop workflows
- [TinyImage](/tinyimage/) for export optimization
- [CopyDoc](/copydoc/) for content updates
- [Pitchdeck](/pitchdeck/) for decks and presentations

If your team touches all of those jobs, the [Pro Bundle](/bundle/) is usually the simplest way to standardize the workflow.

---

---
type: tutorial
title: How to export banners from Figma to animated WebP images using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-10-06T00:00:00.000Z
dateModified: 2022-10-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-banners-from-figma-to-animated-web-p-images-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-banners-from-figma-to-animated-web-p-images-using-bannerify.md
---

# How to export banners from Figma to animated WebP images using Bannerify

#### Video Transcript

Today I'm going to be showing you how to export your animated banners that you've designed in Figma to animated WebP image files, directly from Figma, using the Bannerify Figma plugin.

To get started all you need to do is just jump into Figma and click on the "Resources" icon in your file up at the top here; click on "Resources" and then just search for the word "Bannerify", and if you click on the Bannerify result, you'll be able to then run the Figma plugin by either clicking this "Run" button here; if you click run that will open up the Figma Plugin, or I'd also recommend clicking on the "More options" button and then clicking on "Save Figma plugin" and that's just going to save the Bannerify Figma plugin to your plugins list so you can access it again easily later.

I've already added it to mine, so I'm just going to go to my Figma file and I'm going to right click, I'm going to go down to "Plugins" and then go to "Saved plugins" and then I'm just going to click on "Bannerify", and that's just going to run the Figma plugin that we just installed a minute ago.

To get started, all you need to do is click on any frames that you've got on your page; if you've got a bunch of frames in different sizes for different size banners and each of those banners will have layers in them, which are just the content layers of each banner, all you need to do is select the banners that you want to export or animate, and then in the Figma plugin just go down here and click on "Load checked banners". I'm just going to load up a few to get started, and that's just going to load in the banners that we just selected. 

If you're new to the Bannerify Figma plugin, I'm not going to be going through in detail how to actually use all the animation features and how to do all these other kind of fancy things. If you're interested in that, there's a whole bunch of other more detailed tutorials on that on the YouTube channel if you just go to the Bannerify playlist, you'll be able to find a whole bunch of those. Today I'm really just going to be assuming that you've already got the animations set up for your banners the way that you want, and we're just going to take those banners that you've already designed and export them out from Figma to animated WebP image format. 

In this example I've just got a few banners with some very simple animation on them; we can preview what that looks like here, and instead of exporting it to HTML or a GIF today I'm just going to be exporting it from Figma to animated WebP. If you go ahead and click on the "Export to GIF/Video" button up here in the Figma plugin header; I'm going to click on that, and then you'll see down here that there's a few different export options. There's a new one that's now called "Export WebP" and that's exporting it at 2x retina. The benefit of this is you can export this from Figma to an animated WebP image as opposed to a GIF file for example. With a GIF, you're going to be exporting it out at 1x, and with GIFs there's also the limitation of only being able to include 256 colors, so you always notice that the color palette of a GIF is a little bit washed out and lower kind of resolution or sharpness compared to let's say a PNG file. 

The benefit of animated WebP is it allows you to keep that quality keep that color range and also export it out in a file format that's much sharper. To show you what that looks like, all you need to do is click on this "Export WebP" button, so I'm going to click on that now, and this is going to go through and export the three banners that I've selected and it's basically going to convert each frame from Figma to a WebP file; and once it's done that for every frame, it's then going to take those WebP files and essentially merge them into one animated WebP image file from Figma. You can think of this as kind of like an alternate GIF format; a GIF is just a collection of frames rendered out into a single GIF file, and the same will happen with these animated WebP banners. It's going to basically create a single animated WebP image file but inside of that animated WebP file there will be many WebP image frames that work in a similar way to a GIF file. 

As I mentioned, it's going to allow us to export it from Figma to animated WebP with much better quality, and it's going to allow us to export it in a way that's still fairly optimized, but also at 2x resolution. If you want to use this for your website or if you want to use this for a banner campaign and you want to keep those images looking really sharp, as opposed to using a GIF, exporting your banners to animated WebP from Figma is definitely an alternate format that you can use to do that. We're just on the last one now, it'll take a little while to convert some of these if they're much bigger; I'm using a 24 frames a second animation as well, so it's going to include a few more frames, but we're on the last one now. 

Once this is done, you'll get a prompt to say that the banners are ready, and then all you need to do is click on the "Download your zip file" button and that's just going to bring up the save prompt. In this example, I'm just going to save it to my desktop, click "Save", and then you can see here I've got the zip file. I'm just going to double click that to unzip it, and then if we open up the zip file you can see here that we've got a new folder called "webp"; that's where our animated WebP image files have been exported, and we've also got this index file. The index file is just a preview page, so I can drag that into my browser and you can see here that I've got the preview page with all of my animated WebP images that we just exported from Figma showing up. As you can see, they look really sharp and if we open up that in a new tab, you can see here they've been exported at 2x resolution, that's retina resolution.

Just to give you a really quick comparison of what that looks like compared to a GIF, I'm just going to run this export function again, and this time I'm going to click on 
"Export GIF". While that's exporting, I'm just going to go through the support for the animated WebP image format as well. We're just on "Can I Use" here, we're looking at the "WebP" page, and this is just going to give us an overview of what kind of support the animated WebP image format does have; and as you can see it's actually got very good support, basically all the major browsers support this format, with the exception of IE, which is now basically dead and isn't supported anymore anyway. Apart from IE, you've got very good support across across the the board. WebP has actually been around for quite a while, it's still not used as often as, let's say, JPG, but WebP is actually a very good format for compressing images and having animated WebP images is even kind of a more new idea that hasn't really been done as much compared to GIFs.

This is a pretty good format if you're looking for an alternative to GIFs, and we'll show you what that looks like compared to those GIFs right now. I'm just going to download my zip file once again, and I'm going to put that on my desktop, double click the zip file to open it, and this time I'm going to load up the GIFs page. I'm just going to jump into here and drag that onto my browser, and you can see here it's exported the GIFs pretty much looking the same as what the WebP looks like, but if you actually compare these two; I don't know how obvious it'll be on the video, but if you compare these two, there's a noticeable difference in quality. The colors don't look as washed out, there's way more sharpness in some of the details of the image, and if we compare those two in the isolated view as well, you can see here this is just a 1x GIF, and there's a little bit of kind of washed out coloring that you can see compared to the animated WebP image, the animated WebP exported from Figma just looks a little bit more vibrant, and you've got that higher resolution as well. 

As I said this is a really good alternative if you are looking for a different option to GIFs, and if we look at the file sizes, you can see that they're actually quite comparable. This leaderboard is 2.1 megabytes for the GIF, and if we go to the animated WebP, that's 3.6 megabytes;you're getting double the resolution, you're getting a much sharper image, and the file size difference is actually pretty negligible. That's a really good option if you're looking for a GIF alternative.

That's basically it, I just wanted to run through a quick example of how to use this new export Figma to animated WebP feature in Bannerify. If you've been wanting to export your banners from Figma animated WebP images then this is the easiest way to do it in Bannerify, and if you are looking to do that, please feel free to try out the Bannerify Figma plugin. You can, as I said, go to the resources panel in Figma, or you can click on the link in the description below and that will allow you to get started and start designing banners to then export from Figma to animated WebP files. I hope that's been helpful, and thank you as always for watching; we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: Resize ecommerce images from Figma
description: A cleaner way to resize ecommerce images from Figma for different storefront and campaign needs.
datePublished: 2022-10-05T00:00:00.000Z
dateModified: 2022-10-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-resize-ecommerce-images-from-figma/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-resize-ecommerce-images-from-figma.md
---

# Resize ecommerce images from Figma

A cleaner way to resize ecommerce images from Figma for different storefront and campaign needs. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for resize ecommerce images from figma when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How HyperCrop fits into the process

HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

With HyperCrop, teams can usually:

- generate multiple crops without rebuilding each frame by hand
- reuse presets for repeated channel and campaign work
- speed up image-heavy production for social, ecommerce, and ads

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [HyperCrop](/hypercrop/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If your team keeps producing the same image in multiple sizes, HyperCrop is the direct fix. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to export animated WebP images from Figma using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-10-04T00:00:00.000Z
dateModified: 2022-10-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-web-p-images-from-figma-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-web-p-images-from-figma-using-tiny-image.md
---

# How to export animated WebP images from Figma using TinyImage

#### Video Transcript

Today I'm going to be showing you how to export animated WebP images directly from Figma using the TinyImage Figma plugin.

The first thing we need to do to get started is just go up to the "Resources" icon in the Figma header toolbar up here and click on that, and if you search for the word "TinyImage" you'll see TinyImage compressor pop up and all you need to do is click on that result and then click on either the "Run" button here to run the Figma plugin, or you can go over to this "More options" icon and click on that, and you'll be able to add that to your Saved plugins to make it a bit easier to access again later.

Because I've already got the TinyImage Figma plugin saved, I'm just going to right click on my Figma canvas, I'm going to go down to "Plugins" and then just go down to "Saved plugins" and click on TinyImage and that's just going to open up the Figma plugin that we just saved a second ago; for today's example I'm just going to create a really simple WebP animation from Figma using these three images, and all I need to do to get started while the Figma plugin is open is just click on the images you want to include in your animation; I've just clicked on those three layers, and now I'm going to go ahead and click on this button in the TinyImage Figma plugin called "Create GIF".

If I click on that button, that's going to allow us to load up the three images that we just selected in Figma, and you can see here that we've got all these other options as well. This allows you to sort the frames by their order on the page; if you wanted to change the order based on how they're ordered on your page you can easily do that, but I'm just going to leave it as the default for now. You can also do things like change the duration, so the default duration between the frames you can change down here, or you can actually override these per frame.

For example, if you wanted this middle frame to only flash up for 200 milliseconds, you can override that in the Figma plugin settings per image or per frame as well; that's something you can do there. I'm just going to leave that at 500 and I'm just going to change the default delay to one second, and I've got that set to infinite and I've just got it set to the default size, but you can also scale that up or down based on these settings as well. If you wanted to do it at half size, you can scale that down, I'm just going to leave that at 1x for today. Then I'm just going to set the quality a bit higher; I'm just going to pop it at the default which is about 90, and that's pretty much it.

I'm fairly happy with how the playback's looking. You can pause this and jump between your frames if you wanted to get a bit of a more detail on how that animation is looking, but I'm pretty happy with that for now. To export this from Figma to animated WebP image, all we need to do is change the default export format from GIF; instead of doing "Animated GIF", I'm actually going to change that to the "Animated WebP" option and I'm going to click on that and then click on the "Export WebP" button. If I go ahead and click on "Export WebP" that's going to add my frames from Figma to the WebP image and render it out as a special animated WebP image file from Figma.

I've just got this prompt to save my file, I'm going to click on "Save" and just pop that on my desktop. Then to view the file, the easiest way to do it is just to open up your browser and drag the image file in to the browser, so I'm just going to do that now. You can see here that our WebP image is animated, so this is just one file containing our animated frames and it's allowing us to use this in the browser as a much more optimized file size compared to a GIF. If you're tossing up between GIFs or WebP, WebP may actually be better in some cases depending on what compatibility you're looking for.

If we jump over to the "Can I Use" website we can get a bit of a sense of what support the WebP image format does have. As you can see, it's fairly well supported across most browsers these days, which is great, and there's some partial support here for not supporting two animated WebP images. As you can see, those are actually pretty much just all the versions of Chrome and older versions of Opera, so if you don't need to support those older versions then WebP actually might be a really good option for you to be able to get that better image quality compared to GIFs. GIFs only have 256 colors in the image, so that's why they tend to look a bit washed out sometimes, whereas with WebP you get that PNG level looking image with all of the compression savings of WebP as well.

WebP is a very good format for compressing the file size down, so if you're comparing a WebP image versus a GIF image, just from the file size alone you're always going to get a better quality and better optimized file size from a WebP file. In terms of the use cases for WebP animated images this is perfect for adding to your website; if you wanted to share this on your website or add an animated image into your social media, then WebP is probably going to be a really good way of doing that. As I said, you just got to weigh up the pros and cons of WebP versus GIF, for example.

Anyway, that's a pretty quick Figma tutorial for today. As I mentioned, there's some extra settings you can play around with in the GIF creation settings, but I'm not going to go through all of those today, so you can have a play around with them yourself. For example, if you wanted to change the way that the image fit works, you could make a image fit instead of fill; containing the images, instead of automatically covering the entire size of the the GIF; you can totally do that. You can change the dimensions to be different from what the first image is, which is what the default image size is, and you can also obviously change the delay and all that sort of stuff down here; that's what that looks like in the Figma plugin.

I think we'll keep it there for today, and I hope if you've been wondering how to export animated WebP images from Figma, as far as I know this is the easiest way to do it. If you're interested in trying it, I hope that you give it a go and best of luck with creating your animated WebP images from Figma. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to convert and import Adobe XD to Figma in seconds using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-10-02T00:00:00.000Z
dateModified: 2022-10-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-convert-and-import-adobe-xd-to-figma-in-seconds-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-convert-and-import-adobe-xd-to-figma-in-seconds-using-convertify.md
---

# How to convert and import Adobe XD to Figma in seconds using Convertify

#### Video Transcript

Today I'm going to be showing you how to automatically import your designs from Adobe XD to Figma using the Convertify Figma plugin.

To get started, all we need to do is open up a brand new Figma file, go up to the top here and click on this "Resources" icon, then just search for the word "Convertify", and you'll see Convertify pop up. If you click on that Figma plugin you'll be able to click on this "Run" button here which will run the Figma plugin, or if you want to save it to your Figma plugins list for later, you can click on this little "More options" icon and click on the "Save Figma plugin" link and that'll automatically save it into your Figma plugins list for easy access later. I've already done that, so to actually run the Figma plugin you can just right click anywhere on your page, go down to "Plugins", go down to "Saved plugins" and then you can just click on the "Convertify" Figma plugin in your list and that's just going to open up the Figma plugin that we just installed a second ago.

I'm going to keep this Figma tutorial fairly short at first, so if you just want to know how to do this for your own Adobe XD files you can stay tuned for the next minute or so, and then I'm going to go into a bit more detail about some specifics. Just to give you a really quick example of how to do this for your Adobe XD files, now that we've got the Figma plugin loaded up you just have to make sure that you click on the select box here which will allow you to select what conversion you want to perform; and just go ahead and click on the "Import Adobe XD to Figma" option. Once you've selected that, you'll see this little dropzone area pop up down here; you can either click on that or you can just drag and drop an Adobe XD file there. I'm going to go ahead and do that now, and I've got a little design file that I've grabbed from the internet. I'll show you what that looks like, I'm just going to open that up in Adobe XD, and this is the design we're going to be importing from Adobe XD to Figma.

To import that design into Figma from Adobe XD, all we need to do is grab that file from wherever you've got it saved on your computer, drag and drop that Adobe XD file and drop it into this little dropzone area in the Convertify Figma plugin. I'm going to do that now, and just let go, and there we go; it has imported our Adobe XD file automatically into Figma. We can have a look at the layer breakdown here just to confirm that it's pulled in everything as we'd expect; you can see if we compare the original design in Adobe XD you can see here that these are the layers that it originally had, and if I jump over to my Figma file you can see that those same layers have been imported. These are all individual layers you can move them around as you would expect, the same way that you can in Adobe XD, and it's basically imported the entire design in a matter of seconds. As you as you could see, it only took about two seconds or three seconds to import hundreds or thousands of layers that are in this Adobe XD file, including all of the images, all of the text, all the styles and everything else that you'd expect.

That's basically the entire thing; if you want to stop watching now, please feel free to do that. you can click on the link in the description to quickly jump to the Figma plugin page or you can access it through the resources icon as I mentioned before. If you want to tune out now and not go into any of the details regarding styles and prototypes and all that sort of stuff, please feel free to stop here, otherwise stay tuned and we'll keep going through a few more of the features that you can use in the Figma plugin to import your designs from Adobe XD to Figma.

As I mentioned, that's just like the most basic example of what you can import; I'll give you another example just so we can see how it'll work across different designs. If I open up this other Adobe XD file you can see that we've got this landing page design, it's got a bunch of vector layers, a bunch of image layers, and a bunch of text layers. Just to show you what that looks like, we can do another example and drop that one in, so I'm going to again drag and drop that Adobe XD file from my desktop directly into the Convertify Figma plugin, and I'm going to let go on that dropzone, and once again it's going to create a new page in my Figma file. Every time you do this it'll create a brand new page under your Figma file that you're already in and just add a little time stamp there, so you can see when it was imported and it just gives you this little "XD Import" label as well, so you can know at a glance which of these pages have been imported from Adobe XD to Figma and which ones are just the ones you've created separately.

Again, as you can see, all of the layers have been imported from Adobe XD to Figma as you'd expect. We've got all of our content here, we've got all of our images, and again you can move all these around these are individual layers as you can see on the left here and all of the groups have been maintained. If we go to our layers panel here we can open that up and see that we've got our layers as we'd expect, and those are in the correct order and the correct nesting. It's really a one for one as far as the layer structure and file tree goes, so you don't have to worry about manually updating any of those layer structures or anything like that; that's all converted for you. If we zoom in here you can see that down to the layer it's being imported; we've got all of our vector fills over here which we've got from Adobe XD straight into Figma, so that's what that looks like there.

Just a couple things to be mindful of if you do have fonts that are being used in Adobe XD that aren't installed on your computer and you're importing your file from Adobe XD to Figma; you just want to make sure that you've got those fonts installed, otherwise it's going to fall back to the fallback font which is "Inter", the default Figma font is Inter, so if you're noticing some differences between those; for example, this original design has a font called "Gilroy Bold" and I don't actually have that installed on my computer, and in order for a font to be applied in Figma, via a Figma plugin or just using the tool, you do need to have that font installed on your computer. If you're noticing some differences between the fonts being imported, just double check that you do have that original font installed; in my case, I don't have that font installed and that's why it's looking the same, because it's basically loading a fallback font here as well, but if you are noticing that the fonts are a little bit off, it's likely that you need to install the original font first and then re-import the file from Adobe XD into Figma to get that looking a bit better.

The other thing around fonts and text to be mindful of is that the way Figma and the way that Adobe XD interpret fonts and font properties is a bit different; for example, if you're setting the font size or the text size using these options down here, so the "auto width", "auto height" and "fixed size" options, this can cause some issues. For example, if you've got like a massive text area in Adobe XD sometimes that gets carried over to Figma in a weird way, so there might be a bit of vertical offset; if you do notice that, the best thing to do is just to set the text as "auto height", if you notice any issues with the text importing just try and make as many of these text layers as set to "auto height" as possible in Adobe XD before converting that Adobe XD file into Figma; that's just a small tip there regarding text layers.

The other thing that I said I'd go through is prototypes and styles, so I'm just going to create a brand new Adobe XD file, and I'm just going to show you how a few of these things work. The conversion import process does support styles, so that's text styles and fill styles, and it also supports prototyping properties. If we go to Adobe XD here and just create a really simple frame; I'm just going to create an artboard with a rectangle on it, and I'm just going to fill that rectangle. I'm also going to create a text layer; I'm just going to create this text layer here, and I'm just going to call it "text layer" and just leave that as Helvetica. That's fine, but now if I select that and make it "bold" or "medium italic", and then if I basically set that as a text style; I go over here to my styles or library icon in Adobe XD, and then just click on the "plus" icon in the "Character Styles", I've just added this as a character style. Then I'm also going to add this blue color as a color style; again, I'm going to click on the rectangle with our blue fill and click on the "plus" icon here, and that's just going to add the colors to the library in Adobe XD. I can also do things like change just one word to be a specific fill; if I want to change this to match this libary color, I can do that as well, and that's what that looks like there. If I now save this file; I'm just going to save that to my desktop, I'm going to override the file that's already there.

Then now if we import that file into Figma using the Convertify Figma plugin, I'm just opening it up again, and I'm going to drag that design file from Adobe XD into Figma, drop that in, and you can see here it's converted our layers as we'd expect; but the difference this time is that we now have these styles in our Figma document, and because we've got this toggle selected here, which is the toggle to import color and text styles from Adobe XD into Figma, because I've got that checked and because my design file from Adobe XD has these color libraries and character style libraries included when it gets imported into Figma, that's automatically going to also import those text styles and color styles here. Now if we actually click on our rectangle, we can see that that's linked to acolor style in Figma; we can see what that color style looks like and we can change it, so we've also got the gray color style and we can switch between those as you normally would in Figma, but those have automatically been imported from Adobe XD to Figma. The same goes for our text Styles; if we highlight this layer style here we can see that that is actually linked up to our font style. We can see that the Helvetica style in "medium italic", size 50, which is exactly what we set in Adobe XD, and that's what's being imported as a style into Figma. It's just a quick demo to show you how the styles work if you've got them set up in Adobe XD.

The other thing I just wanted to show you was the prototyping. Let's say we've got two different artboards or frames in our Adobe XD file and we want to prototype these frames together somehow, all you need to do is if you've already got this set up, you don't need to do this; but if you're using Adobe XD to do prototyping, you just switch to the prototyping tab up the top and click on "Prototype", and then you click on the element you want to link to a specific frame or artboard, and you just drag that little arrow onto the artboard you want to link to. In this case, I'm just going to keep it really simple, I'm just going to do a tap and transition to this other artboard and then I'm just going to link this other rectangle back to the previous artboard, and just going to auto-animate that as well.

I'm just going to save that to my desktop and override the existing one I already had, I'm just going to replace that, and once again I'm just going to drag and drop that Adobe XD file into Figma, let go, and you can see it's imported the file as we'd expect, but now we'll do the same thing in Figma. If we click on the "Prototype" tab, you can see that the prototype links that we just set up in Adobe XD have also been carried over to our Figma file. Not only has it imported the layers, not only is it imported the colors and text styles, it's also imported the prototype links; and again, that's just because we've got this "Import prototype links" toggle turned on. If you turn that off, it won't import those prototype links, so if you just wanted to import the flat design without any prototypes, you can do that by just toggling off this thing before you import; but by default it will always import prototypes if they exist.

That's basically what it looks like, you can see here that we've got those two links set up, and it's carried over the animation styles as well. I'll just close off the Figma plugin for now, and you can see here if we actually go into the details, the "dissolve" transition has been preserved and the "auto-animate" transition has also been preserved using the smart animate feature. If I click on "Play", that's just going to open up the Figma prototype, and we should be able to click on this rectangle and dissolve it to there; that's now on our second artboard, and if we click on this rectangle it should jump back to the first one with the auto-animate property carried over.

That's what it looks like, and the only thing I haven't covered is components and instances, but if you do have components set up as well; for example, if we were to create a component in this file. Let's just go ahead and do that now really quickly; if I go back to my "Design" tab and just open up my layers and click on this rectangle, I'll make a terrible button component here. If I just create that rectangle and add some text, I'll just do that on top and I'm just going to really quickly set that to white, and as I said this is the worst button component you've ever seen, but if we select those two layers and create a component by clicking "Make component" and then we go to our library here, drag that component onto the page and just set that as "New", because we're going to override the text, and we're going to override the button color as well.

I'm going to save that one more time, and I'm going to put that on my desktop and replace it, and one more time, I'm just going to re-run the Convertify Figma plugin, and one last time, let's drag and drop that Adobe XD file into Figma and import it. There we go, you can see this time because I've made those components and instances, we've got our component on the left here; we've got "Component 1", which is our button component and we've also got our instance of the component. You can see here that the instance has been replaced with the new text that we set, and the different color that we set, but these are still components and instances; if we change the styles of that particular button, for example,if we just change the position, you can see here that the position of the button in the component and the position of the button in the instance are both still linked because they are instance and component. The same goes for the rectangle; we can change the size of the button and that will be rolled out to the instance as well, and of course you can access those from your "Assets" panel, if you go to your assets panel in Figma, you can see that the component has been imported just the way you'd expect, and you can drag that in and have another instance as well. Of course, you can override that too, and that's what that looks like there.

Okay, I think that basically covers everything I wanted to talk about regarding importing your designs from Adobe XD into Figma automatically. Obviously this is a massive pain if you need to do it manually, and a lot of people do unfortunately have to do it manually and use very strange workarounds involving SVGs and other things. Half of which I believe don't even work anymore for whatever reason; that might be a change from the Adobe side or Figma side, unintentionally or otherwise, but yes, this seems to be a pretty common request for converting files. If you do need to import your Adobe XD files or Adobe XD designs, including styles, including components, including prototyping, all that good stuff, then please feel free to give Convertify a try. This might be helpful for you if you want to automate that process, especially if you have much larger files than this; this is a fairly small example, but some of the other examples, the landing pages that we converted from Adobe XD to Figma earlier in the video, and files that are much bigger than those, this is really going to save you a lot of time if you can just automatically convert a lot of those layers.

As I mentioned before, this is currently a brand new feature; it is currently in BETA. As you can see it works very well, but as I mentioned, specifically around text, there will be some differences and this is something that will be improved over time. If you do notice a couple of issues with your text layers or other types of issues relating to vectors, these are already known and currently being worked on; hang in there. If you do notice any issues, feel free to get in touch or leave a question, and I'm sure that we can get the Figma plugin updated as quickly as possible for you to help mitigate some of those issues. If you've made it this far, thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: article
title: Crop product photos for multiple channels
description: How to crop product photos in Figma for every channel without repeating the same work manually.
datePublished: 2022-09-18T00:00:00.000Z
dateModified: 2022-09-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-crop-product-photos-for-multiple-channels/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-crop-product-photos-for-multiple-channels.md
---

# Crop product photos for multiple channels

How to crop product photos in Figma for every channel without repeating the same work manually. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for crop product photos for multiple channels when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How HyperCrop fits into the process

HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

With HyperCrop, teams can usually:

- generate multiple crops without rebuilding each frame by hand
- reuse presets for repeated channel and campaign work
- speed up image-heavy production for social, ecommerce, and ads

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [HyperCrop](/hypercrop/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If your team keeps producing the same image in multiple sizes, HyperCrop is the direct fix. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: Batch resize images for paid ads
description: How to batch resize campaign images in Figma for paid ads across multiple placements.
datePublished: 2022-09-01T00:00:00.000Z
dateModified: 2022-09-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-batch-resize-images-for-paid-ads/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-batch-resize-images-for-paid-ads.md
---

# Batch resize images for paid ads

How to batch resize campaign images in Figma for paid ads across multiple placements. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for batch resize images for paid ads when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How HyperCrop fits into the process

HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

With HyperCrop, teams can usually:

- generate multiple crops without rebuilding each frame by hand
- reuse presets for repeated channel and campaign work
- speed up image-heavy production for social, ecommerce, and ads

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [HyperCrop](/hypercrop/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If your team keeps producing the same image in multiple sizes, HyperCrop is the direct fix. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to translate email designs in Figma with the Lokalise API using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-09-01T00:00:00.000Z
dateModified: 2022-09-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-translate-email-designs-in-figma-with-the-lokalise-api-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-translate-email-designs-in-figma-with-the-lokalise-api-using-emailify.md
---

# How to translate email designs in Figma with the Lokalise API using Emailify

#### Video Transcript

Today I'm going to be showing you how to translate your email designs using the Lokalise platform in combination with Figma. I'm going to go through this step by step with you, and if you follow along we'll get there in the end, as there's a few things to go through, so let's get started.

The first thing we need to do is go to Figma and just open up a brand new Figma file and then go to the "Resources" icon up the top in the header here and just search for the word "Emailify", and you'll see the Emailify Figma plugin pop-up. All you need to do is either click on the "Run" button here or you can save the Figma plugin to your Figma plugins list by clicking on this little three dots "More options" icon and you can click on "Save Figma plugin" and that's just going to save the Figma plugin for easy access later. If you have already installed that or you just want to run it you can either click that "Run" button or if you've saved it, you can right click anywhere on the page go down to "Plugins" go to "Saved plugins" and then just click on the "Emailify" Figma plugin; and that's just going to start up the Figma plugin that we just saved a second ago.

If you haven't used this Figma plugin before, there's some other Figma tutorials on the YouTube channel with how to design the emails, but for today I'm just going to do a really simple example. I'm just going to call this one "Jiro eDM" and I'm going to call that just as a temporary name. I'm going to click on the 
"Add new Emailify container" button; this is basically just going to add a new Emailify frame and this just allows us to add content to the email. I can add things like these components and I can add pretty much anything I want from this list, or I can add custom elements down here. For today, we're just going to keep it really, really simple just to show you how to actually translate these designs in a moment. I'm just going to leave it there, I'm going to keep it really simple and what we want to do today is translate this design into a few different languages; and the way we can do that is by clicking on the "Localize" button in the Emailify Figma plugin header. 

If you go ahead and click on "Localize" now, the default option is to localize the file via an Excel spreadsheet; there's another video on the YouTube channel that goes through that process, but for today I'm actually going to be focusing on the Lokalise API; this is the API for this service that we're just looking at a moment ago, this Lokalise platform. Instead of using Excel I'm going to click on the "Lokalise API" option and that's going to bring up a couple of different fields for me; to get these fields we just need to have a Lokalise account. If you haven't already done so, you can click on this "Try it free" button on the Lokalise website and sign up for a free account; that's a 14 day trial. 

I've already signed up for Lokalise, so if you've signed up and you've logged in you should come to a screen that looks like this, and it'll ask you to create your first project. We can create our project by clicking on the get started link and you'll see this add project screen come up. What we want to do is just give it a name, so we can say "Email translations for Jiro eDM" and you can choose a base language; it just defaults to "English", so I'm just going to leave it as that, and then you can select the target languages that you want. For example, if you want to translate it into French, you want to translate it into Dutch, and let's say Korean; we can add those as our target languages, so these are languages we're going to translate the original language into. Whatever design you're using, whatever language you're using in your designs, select that as the base language and then any extra ones just put them in there and then we basically want to leave it as "Software Localization", and click "Proceed".

Once that loads up, you'll see this brand new screen which is now your project. You've got the project loaded up and what we can do now is it's giving us the option to add content via all these different methods, but we don't actually want to do any of these, we want Figma to create this content for us because we've already got it in our design, we've already got this text. What we're going to do is get this text into Lokalise automatically, and the way we do that is by using the Lokalise API. As you noticed in the Figma plugin there's two fields it's asking us for the "Project ID"; to get the Project ID, we actually just copy that from the URL; on our project page up here just grab that whole ID after the "/project/", you want to grab that ID, copy it and then paste that into the "Project ID" field in your Figma plugin.

I've just pasted that in there, and then we also need the "API Token"; you can click on that link and that'll bring you into the settings page for your profile, and you'll see this "API Tokens" option on the left, and all you need to do is go ahead and click on this "Generate a token" link; if you click on 
"Generate a token" and select the token type as "Read and write access to your projects" and then we're going to click on "Generate" and that's going to give us a brand new API key that we can also copy. I'm going to copy this token, I'm going to highlight that, I'm going to copy it, and I'm going to copy that token again into the "API Token" field in the Figma plugin Lokalise options; I'm going to paste that in and that should automatically load up our project.

You can see here it's loaded up the Lokalise project, we can see the project name over here; "Email translations for Jiro eDM", which is exactly what we called it in our project over here and so this by itself this doesn't do anything, it's just connected us to the project. We've got that loaded up now and you can see down here it's loaded in all of our languages that's associated with the project; what we want to do is we want to actually upload this email into Lokalise, and we do that by clicking on the email frame, so if you've got multiple emails you'll see multiple items here we've just got one for today. I've just checked that email, and then I'm going to go ahead and click on this "Upload" button; and it's got English as the base language because that's our base language that we set in the project. I'm just going to go ahead and click on "Upload" and that's basically going to upload all of the text content and screenshots of any emails that you've selected over on the left hand side here.

It's just telling us that it's uploaded the text from one email until into Lokalise; that should be done now. Now if we switch back into our browser, or you can click on this link here which will open up the project link in your browser. I've already got it open, so I'm just going to refresh that page now and you can see here after I've refreshed it, we've gone from having no content in Lokalise to having all of our text content from Figma now in Lokalise. Just to go through what happened there, we've uploaded the design from Figma; this is the design we had and so basically any text layers have been exported as individual text keys, as they call them in Lokalise, directly from the Figma plugin. We haven't had to manually add this, it has just synced it directly from Figma into Lokalise, and you can also see here we've got screenshots. If you click on the screenshots menu item, you'll actually be able to check out what the screenshot is. If you've got someone translating this on your behalf, it'll be a bit easier for them to actually see what each bit of text relates to; they can compare the screenshots with the actual text.

For now we're just going to stay on the "Editor" screen, and what we can do is now we can actually start translating this content in Lokalise. The way we do that is just by editing these fields; if you click on the "Dutch" field which is currently empty what we can do is we can take that initial bit of text, so I'm going to copy the English one and I'm going to put that into Google Translate. If we do Google Translate, I'll just do it to French first; if we copy that translation and click on the French field paste that in and do the same thing for Dutch; if we change this now to Dutch and copy that; we can copy that one and paste that in and finally we'll just do the Korean translation as well; if we do Korean, pop that in and copy that, and that'll be the last one that we'll add in. This is just one text layer in Figma, you can obviously go through and translate all of them; I'm not going to do them all today, I'm just going to show you an example of doing one.

Once we're happy with that, and we know that we actually want to now import that back into Figma, all we need to do is jump back into the Figma plugin; we've already got our page set up with the Lokalise API Token and the Lokalise Project ID. Instead of clicking "Upload", this time we're actually just going to click on the "Import Translations" button; I'm going to click on that button now and you'll see what happens. If I click "Import Translations", that's going to load up any translations that exist and import them into our Figma file. To go through again what just happened there, we were on page one; page one is where our original Emailify design is, and we clicked on "Import Translations", and now if we jump to this second page, the Figma plugin has basically gone ahead and created a brand new page with a little timestamp so you can see when it was imported. It's got a little "Translations" flag so you know that this page has been translated, and you can see here on the left we've got a copy of our original frame; this is the original frame in Figma just as a reference, and then we've basically got every locale or every language that we have in Lokalise over here is now also being imported as a frame itself. 

Each frame is its own frame per language and that's been pulled in; you can see the translations that we just added from Google Translate and added into the Lokalise platform are all being pulled in. Those are all being replaced in Figma automatically, so we didn't have to do any work there it just automatically imported them which is really cool, and of course now that we've actually got these in here you can see that if we go to the "Preview" button in the Figma plugin, these are now fully ready to go, HTML exportable emails. We can actually export all of these emails at once; if we wanted to export all of these languages in one go, you can easily do that just by using the "Export HTML" button and clicking on "Export", and that's basically what it looks like. You can see all the different languages looking really good and if we had actually translated all of the text, these would all be fully localized HTML emails that you'd now be able to send out. 

That's basically what that looks like there, and as I said, you can go through and update this. If you wanted to actually update these these bits of text again, just go back to your original design and if we wanted to change this "Book Now" label, so we can say "Contact Us" and you want to upload that again, you just click on the "Upload" button and wait for that to finish uploading. Once it says it's finished we can jump back into the browser in just a moment, it's just uploading the screenshot again as well, which we'll see in a second. If you refresh that page in a second, you should see this update; now you can see "Book Now" has been changed to "Contact Us" and that's just exactly what we wanted. If we go back to screenshots now, you can see that the screenshot has been updated, too. That's exactly as you'd expect, and if we jump back into the editor you can see what that looks like there.

If we now import that translation one more time; for example, if we decided we don't like that particular phrasing, we can change it to "Get In Touch" for example, this is the English variant, and you'll see here if we now import that translation again, it's going to import it to a brand new page once again, as you're basically versioning these as you go in Figma. If we just close off the Figma plugin for a moment and zoom in, you can see that over here where the original one had "Contact Us" because that's what we exported from Figma, the English one's actually been updated with "Get In Touch"; it's just kept the copy of the original one in Figma, but you can also see what the updated copy for the original language looks like next to it as well.

That's basically what it looks like; it's a very, very simple process. If you're already using Lokalise, this is a really handy integration that you can go ahead and use, or if you're interested in translating your email designs in Figma, perhaps this is another option if you don't want to use the Excel spreadsheet method, and you want to have a bit more of a web-based platform, this is definitely a cool option that a bunch of people have been requesting have been asking for an integration. This has just come out today, so it's very new; everything should be working as expected, but if you have any requests or any questions, please get in touch, and more than happy to help, as always. 

That's going to do it for today; I'll keep it pretty simple, as I said, if you want to get more detail about how to actually design these emails and customize them, there's a whole bunch of other videos on the YouTube channel if you just go to the "Emailify" playlist, there'll be a bunch of other Figma tutorials that you can look through on YouTube, but that's going to be it for today. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to export Figma to EPS files in one click using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-08-29T00:00:00.000Z
dateModified: 2022-08-29T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-eps-files-in-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-eps-files-in-one-click-using-convertify.md
---

# How to export Figma to EPS files in one click using Convertify

#### Video Transcript

Today I'm going to be showing you how to export your designs from Figma to EPS, or Figma to PostScript with one click, using the Convertify Figma plugin.

To get started, if you just go to the file that you want to export from Figma to EPS and then click on this "Resources" icon up in the top header of the Figma toolbar, and then just search for the Figma plugin called "Convertify", you'll see Convertify pop-up. You can go ahead and click on either the "Run" button or click on these three dots on the side where it says "More options and click "Save plugin", and that'll save it to your Figma plugins list.

Once you've got it saved, you can either run the Figma plugin by just clicking the "Run" button here, or you can right click anywhere on your page, go down to "Plugins" and then under "Saved plugins" you'll see Convertify pop up. I've already got it in my recent Figma plugins list, I'm just going to click on the "Convertify" Figma plugin from there and that's going to run the Figma plugin that we just looked at a second ago. When the Figma plugin runs for the first time, all you need to do is make sure that you're on the right page; for this example I'm just going to convert this CV from Figma to an EPS file. All we need to do is make sure we're on this page and it's going to convert every single artboard or frame on the Figma page, and it's going to convert each of those into its own EPS file. All we need to do is click on "Convert to EPS" and that's going to start the conversion process of taking that frame and exporting it to an EPS file from Figma.

It was really quick, as this is a pretty small design. The EPS file is ready, so I'm just going to click on the "Download .eps", button save that to my desktop, and if I open up my finder you'll see that we've now got the EPS file there. I can preview that by just by double clicking on it, and I'm just on Mac, so it's going to actually convert that into a PDF so that you can preview it, but you can actually send that EPS file or open that EPS file with other programs as well. Typically, if you're going to be printing your designs or you're going to send your designs to a professional printer, usually they'll ask for an EPS PostScript file; this can be handy for that.

That was an example of how to convert one page or one frame to an EPS file, but if you've got multiple frames; for example this presentation here, I might want to export a bunch of these frames out from Figma to EPS. Again, I can just run the Figma plugin by right-clicking anywhere, going down to "Plugins" and clicking on the "Convertify" Figma plugin, and that's just going to open up the Figma plugin that we just looked at in the other file a second ago. I've got it saved to my Figma plugins list, so I can quickly access it again. To convert these frames from Figma to EPS, we have a couple of options; we can do the same option as before, so if we click on this "Convert to EPS" button again, it's going to take each of these frames, parent level frames or "artboards", it's going to take each of those, and export them out to an individual EPS file.

If we only want a few of these, what we can do is actually click on the artboards that we want to export from Figma to EPS, and you can see here at the bottom of the Figma plugin it comes up with this little pop-up menu, and it's going to say only "Convert the selected top level parent frames"; you can see if you open up this we've got our three frames or artboards selected here, and then all you need to do is click on this drop down list here and just change that to "EPS". I'm going to click on "EPS" and then I'm going to click on "Convert layers to EPS" and what that's going to do is it's going to take just those three artboards, the "Intro", "Principle 1" and "Principle 2"; it's going to take those three artboards only, and it's going to process each of those into their own EPS file and then zip them up for us so we can download them.

It's just finishing up frame number three now; in a second once that completes, we should get a button to download this EPS package; the converted files are ready all we need to do is click on the download EPS button again; I'm going to click on that button save this to my desktop and this time because we converted more than one it's gone ahead and zipped up those EPS files for us. I'm just going to unzip the zip file and double click on the folder, and you can see here we've got our three EPS files this time. That's just a really quick way of only exporting the artboards that you actually want from Figma out to an EPS file, instead of converting the entire page each time. If again if we did click on this "Convert to EPS" button, it would convert this entire page; each of these artboards on the page would get exported from Figma to their own EPS file, but if you only need a couple, then just select those ones that you need, and then you can click on this little drop down at the bottom to make sure "EPS" is selected; then click on "Convert layers to EPS" and that'll do it for you.

I hope that's helpful; that's a really quick Figma tutorial just to show you this new option in the Convertify Figma plugin, and that will allow you to convert any artboards that you need directly from Figma to EPS, or Figma to PostScript, if you happen to need that file format, this is a really quick way of doing it. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: Figma image resizer for social media
description: How to turn one Figma image into multiple social-ready sizes without rebuilding each asset.
datePublished: 2022-08-15T00:00:00.000Z
dateModified: 2022-08-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/hypercrop-figma-image-resizer-for-social-media/
markdownUrl: https://www.hypermatic.com/articles/hypercrop-figma-image-resizer-for-social-media.md
---

# Figma image resizer for social media

How to turn one Figma image into multiple social-ready sizes without rebuilding each asset. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for figma image resizer for social media when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How HyperCrop fits into the process

HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

With HyperCrop, teams can usually:

- generate multiple crops without rebuilding each frame by hand
- reuse presets for repeated channel and campaign work
- speed up image-heavy production for social, ecommerce, and ads

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [HyperCrop](/hypercrop/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If your team keeps producing the same image in multiple sizes, HyperCrop is the direct fix. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to export HTML emails from Figma to Mailjet using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-07-30T00:00:00.000Z
dateModified: 2022-07-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-mailjet-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-mailjet-using-emailify.md
---

# How to export HTML emails from Figma to Mailjet using Emailify

#### Video Transcript

Today I'm going to be showing you how to export your HTML email designs directly up into the Mailjet email platform. If you're a user of Mailjet and you want to automatically upload your HTML templates into Mailjet directly from Figma, this Figma tutorial is going to go through that right now.

The first thing we need to do to get started is if you go to the "Resources" icon in your Figma header toolbar and click on that, and if you search in the search bar for the word "Emailify", you'll see Emailify pop up. If you haven't already done so, you can install the Figma plugin by clicking on this little icon here with the three dots which says "More options", and if you click on that, and click on "Install", that's going to install the Figma plugin to make it easy to access again later.

If you've already installed the Figma plugin you can run the plugin by clicking on "Run", or if you've already run the Figma plugin once in the file, you'll see a little shortcut pop up on the right hand side here. I'm just going to run the Figma plugin by clicking on that, and that's just going to run the Emailify Figma plugin we just installed a second ago.

If you're new to the Figma plugin, we have some other Figma tutorials on the YouTube channel to show how to actually go about designing these emails. I've already got a really basic one designed just using some of the pre-built components in the Figma plugin, but you can customize these and build these out any way you want to get the design right before you export it; in this case we're just going to be focusing on exporting an existing Figma email design to Mailjet.

To export a Figma email design that you've already got created to Mailjet, you can first verify the HTML output by clicking on the "Preview" button; click on "Preview" and that's just going to load up a really quick HTML email preview that gives you a real sense of what the email is going to look like when it is uploaded into Mailjet from Figma. I'm quite happy with that the HTML looks good it's matching up with my Figma design.

I'm going to go ahead and export this to Mailjet now, and we do that by clicking on the "Export HTML" button; I'm going to click on that now, and by default it'll select the "HTML Email" export option, which basically just downloads the HTML email to a zip file, but for today we want to export this directly to our Mailjet account. I'm going to scroll down the export options and click on the "Mailjet" option and this is going to change these inputs below to input our API key. There's a link here in the description of the Figma plugin where it will ask you to import your key and secret from Mailjet, and that's just going to take you to a page in your Mailjet account where you can get these details. For example, in my version, I've got my "API Key Management" screen up which is from the link that was in the Figma plugin, and what you want to do is basically go down here to the "Primary API Key" and you want to click on this little toggle visibility icon to get your API key. You can copy that, and when you generate your API key originally it'll give you a secret key that you should have copied somewhere else; hopefully you've got that handy. If you've forgotten it, or if you need to reset it, you can do that by clicking on the little settings icon over here and resetting that secret key, but if you do have it stored somewhere just get that file out or get that document open, and we'll copy that secret key as well.

Once you've done that, you can paste the API key and the secret into these two text fields here, and once you've done that all you need to do is select the emails that you want to upload to Mailjet. In this case, I've just got one selected, and then click on the "Upload to Mailjet" button; this is now generating the production ready HTML from your Figma designs and uploading the template into Mailjet. It's quite quick, it's already been uploaded, and you can see here it's telling us that our Mailjet templates have been uploaded. We can view them in the Mailjet marketing templates page once we've logged into Mailjet. 

I'm already logged into my Mailjet account, so I'm going to go back to the browser and open up the link that was just in the confirmation message in the Figma plugin. This is going to basically take us to the template section and the marketing templates; you can see up here it's in the "Marketing" tab and you can see here that this was updated half a minute ago, so this is definitely the email that we just uploaded from Figma into Mailjet, and we can view it just by clicking on the "Preview" link on the thumbnail and that will take us to the preview page for the email.

You can see here that it has uploaded the HTML exactly the way that we saw it in our Figma preview, which is really good, but we can also go ahead and edit that as well if we need to. If you click on the little settings icon and click on "Edit", that's going to also take us into the Mailjet code editor as well. If you did need to make any code changes, ideally you would have done it beforehand in Figma because it's just much easier to do that without kind of rummaging through the code, but if you do need to do that, you can jump in here and actually edit the template in the Mailjet HTML editor as well. Once again, you can preview that or send a test email to yourself, too.

That's it, that's basically the whole process; as I said, this video is not going to cover the design process or how to use components, or customize those. If you're interested in that part of the Figma plugin, please feel free to check out some of the other videos on the YouTube channel, there's a few in the Emailify playlist that goes into quite a lot of detail about how to actually design these emails before you upload them or export them to HTML; those would be worth checking out, but if you're already using Emailify or you were just interested to see how to automate getting an HTML template out of Figma into your Mailjet account automatically, this is definitely going to be the quickest way to go about it.

I hope you found that useful if you are a Mailjet user and a Figma user; feel free to try it with your team, and hopefully it improves your workflow not having to manually upload these templates every single time, so it should be much quicker this way. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: article
title: Sync product copy to Figma mockups
description: How to keep product copy and Figma mockups aligned when the source content changes constantly.
datePublished: 2022-07-29T00:00:00.000Z
dateModified: 2022-07-29T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-sync-product-copy-to-figma-mockups/
markdownUrl: https://www.hypermatic.com/articles/copydoc-sync-product-copy-to-figma-mockups.md
---

# Sync product copy to Figma mockups

How to keep product copy and Figma mockups aligned when the source content changes constantly. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for sync product copy to figma mockups when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How CopyDoc fits into the process

CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

With CopyDoc, teams can usually:

- move text in and out of designs without manual copying
- handle localization and content updates with less risk
- keep content operations closer to the source design files

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [CopyDoc](/copydoc/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If copy updates, localization, or spreadsheet-driven content are the pain points, CopyDoc is the best place to begin. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to import spreadsheets to tables for HTML emails in Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-07-18T00:00:00.000Z
dateModified: 2022-07-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-import-spreadsheets-to-tables-for-html-emails-in-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-import-spreadsheets-to-tables-for-html-emails-in-figma-using-emailify.md
---

# How to import spreadsheets to tables for HTML emails in Figma using Emailify

#### Video Transcript

Today I'm going to be showing you how to automatically import a spreadsheet into a table component for your email designs which you can then export out to HTML.

To get started, we can just jump into a new Figma file and go to the "Resources" icon in the top header menu here. I'm just going to click on that, click on the "Plugins" tab and then we're just going to search for the word "Emailify", and you'll see Emailify pop up as a result. Just go ahead and click on that, and then to install the Figma plugin, we just click on this little three dots icon where it says "More options", click on that, then click on "Install" and that's just going to install the Emailify Figma plugin that we're going to use for this Figma tutorial.

To run the Figma plugin, we just right click anywhere on your Figma page, go down to "Plugins", go to "Installed Figma Plugins", click on "Emailify" and that will run the Figma plugin that we just installed a minute ago. The first time you run the Figma plugin it's going to ask you to create a new email frame, so I'm just going to call this one "Table Test" for today just to show you an example of the table component. Once you've done that, just click on the "Add new Emailify container" button and that's just going to add a blank email frame onto the page. This is going to allow us to do different things like add pre-built components from the components menu here, you can click on any of these, you can change the category and pick different ones, but for today we're actually going to be creating a custom table component from a spreadsheet automatically.

To do that we just need to use this little "Quick add element to selected layer" function at the bottom of the Figma plugin. The way this works is when you select a different type of element or a different type of layer in your email it's going to give you different options that you can add to that layer. For example, if we click on the email frame, you can see here we've got the email layer selected it's going to allow us to add a few different content types. I'm going to add the "Content row" and click on the "Add" button and that's just going to add a brand new content row that we can now use in our email to add more components. I'm just going to click on the "Column" element inside of the row and this is where our content layers are going to be added. For today, I'm going to be focusing on importing a spreadsheet to a table into this content component, but you can add a bunch of different elements as well; there's text layers, image layers, button layers, you can kind of build all of this out. 

Today we're just going to be adding a spreadsheet, so go ahead and click on the "Add spreadsheed" option in the select menu, and again, I've just got the "Column" layer selected and that's why I've been able to select this particular option. Once you've selected the "Add spreadsheet" option, it's going to reveal a couple of new fields that we can use; the first one is it's going to let us import a table from an Excel spreadsheet file or a CSV file, or alternatively we can import a table from a public Google Sheet. I'll show you what both of those look like. 

I'm just going to switch into my browser where I've got Google Sheets open, and I'm just going to go through a rough idea of what the table structure or the spreadsheet structure should look like. The first row is always the "header" and the header is basically just containing your labels that you want for each column. For example, this is a movie app, so I've got a poster, I've got a title, I've got reviews. Underneath the poster column I've also got a bunch of image links; if we open one of these up you'll see that this is actually an image, and if you add a link to an image in your spreadsheet columns that'll get automatically loaded as an image file into Figma as well; I'll show you what that looks like in a moment. The rest of these fields are just purely text, so we can just leave them as is and that's totally fine. You can customize the spreadsheet to have as many columns as you like and as many rows as you like and this will get imported in a moment.

The two ways to import this is you can either download the spreadsheet as a Excel spreadsheet or a CSV file. Excel is probably better, and you can also edit this spreadsheet in Microsoft Excel and save it as an Excel (XLSX) file. You don't have to use Google Sheets, but for today I'm just using Google Sheets, as I said you, can save that out as an Excel file such as the one I've got up here and that'll be usable so we can drag it into the Figma plugin. I'll show you what that looks like; we've got our Excel file, and I'm just going to drag and drop that Excel file into the Figma plugin, into this little drop zone here. It's loaded up four rows that it's going to import, so once it's ready you can go ahead and click on the "Add" button and it's going to go ahead and download those images that we included in our spreadsheet data, and then once that's done, it's going to automatically import all of that data from the spreadsheet into Figma as a table. 

You can see here it's added this table into Figma, we can see it's got all the layers in there and it's also gone ahead and created a brand new page with that table component. I'll show you what that looks like as well; if we switch onto the table component page which is just by clicking on this little left hand side, I'll just move the Figma plugin over for a second, and you can see here that we've got a couple of different components. We've got our table header row component, and what this does is it allows us to actually adjust the width of those columns if we wanted some to be narrower or some to be wider, we can quite easily do that. We can also change the image size, if we just unhide this poster layer, the image layer, and if we wanted to change that we can edit what that looks like. We're just going to change the aspect ratio of that and then hide that; if we go back into our email you'll basically see that we've now got the changes we've made to the width and the changes we made to the poster all coming through in the different sizes. I'm going to remove that for now, and I'm going to get rid of that page. 

Now I'm going to show you what it looks like to add that table, or add that spreadsheet, from a Google Sheets URL as well; all I'm going to do is click on my "Column" layer again, I'm going to click on the "Choose element to add" option menu, I'm going to click on "Add spreadsheet" again and this time instead of dropping in an Excel spreadsheet file, I'm going to go back to my Google Sheet link and I'm going to click on this little "Share" button in the top right hand corner. Once I click on that, what I want to do is I'm going to change this "General Access" setting from "Restricted" to "Anyone with the link"; when I click on "Anyone with the link" that basically means that anyone I share this link with will have public access to it, including the Figma plugin. 

I've just clicked on that "Copy link" button to copy the share link for the spreadsheet, I'm going to minimize my browser, jump back into the Emailify plugin and instead of dropping that file in, I'm going to go down here where it says "Import table from public Google Sheet", paste that in, that's going to load up the Google Sheet, and it's saying that it's ready to go. We can click on the "Add" button again; I'm going to click on that "Add" button up here again, that's going to download the images that we set for our poster column, and once it finishes doing that, it's going to import that data into Emailify. Again, you can see we've got the exact same data that we had from our Excel file, but this time we've loaded it in from the public Google Sheet URL. 

If we jump back again to our component, we can make those changes; I can go to my poster, I can change the width and height of that image to match the aspect ratio if I need to. I can also change some of these things up here, so if I wanted to hide certain columns, I can just click on the the header row component and I can just hide certain columns if I want to do that; I can hide the reviews column, and that's just a really easy way for me to customize the width and customize the display of a lot of these different things. We can really fine tune what that looks like and we can reduce that width as well. 

If we switch back into Emailify, you'll see here that we've now got a customized table that we can actually now render out to HTML, and the way we can do that as a preview is just by clicking on this little "Preview" button in the Figma plugin; I'm going to click on "Preview" it's going to generate an HTML preview. You can see here this is HTML, I can select and move around, I can see what it looks like on mobile; this is the mobile width, I can shrink that down and see what it looks like, and of course, you can customize all of this as well as you'd expect in Figma.

If you want to do things like adjust the vertical alignment, you can just change the auto layout properties either in the instances here or you can do that in the actual component page as well; if I go back to the component page and I go to the header component, I'm going to go there I'm going to change the vertical alignment to the top, and that will automatically update the vertical alignment to the top in my instances as well. Then if I click on the "refresh" icon button in the Figma plugin you can see here that that change has been reflected as well. Same thing with the border stroke; for example, I've got this border stroke set on the bottom of the row; if I change that color to black, that's going to change the color to black here. If I get rid of that entirely, I can just refresh that, and now I've got no dividers; it's just a nice way to customize it really easily. If you just jump back into the component page, go to the data table header row component and if you customize that, that's going to roll out all the changes to your instances as well. You can basically make the design change in one place and see those changes get rolled out across the board automatically, and that's just a really fast way of making changes to your table or changes to data; that's roughly what it looks like.

As I said, you can export this out to HTML as well. If you want to export the email from Figma to HTML, just click on the "Export HTML" button and select your platform; you can either export to an HTML package, or you can export it to a specific platform. If you're a MailChimp user, you can paste in your key, or if you're a Klaviyo user, you can paste in your key, or any of these other platforms, but for today I'm just going to be exporting to HTML. I'm going to click on the "HTML" option, click the "Export to HTML" button, and you can add a subject line if you need to; I'm not going to add one for today, I'm just going to export that. Once it's ready just click on the "Download your zip file" button, and that'll allow you to save it to wherever you want. I'm just going to save it to my desktop, I'm going to unzip that by double clicking the zip file, and then I'm going to open up the folder. There's a preview HTML file that we can use, so I'm just going to double click that and that's basically going to give us a preview of what it looks like on large screens and also on mobile as well. If you need the actual email files, they're just inside of this folder; you can see inside here we've got our HTML file and that's what it looks like. All the images are in there and this is all the HTML, that's production ready HTML, that's ready to go.

I think that's going to be it for today, I really just wanted to focus on the custom table or create Figma tables from spreadsheets or Google Sheets, or Excel (XLSX) files, or CSV files; whichever spreadsheet format you prefer, and just show you how easy it is to really quickly import those spreadsheets into a Figma table that will then be rendered out as HTML from your Figma email designs. I hope you found that helpful if you've been wondering how to automate your Figma table creation process, specifically for HTML emails in Figma; this is going to be the quickest way to do it, and allow you to customize it really quickly by using the component based structure that gets created on this other page over here. I'm going to leave it there for today; thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: article
title: How to manage translations in Figma
description: How to manage translations in Figma without duplicating design work for every language.
datePublished: 2022-07-11T00:00:00.000Z
dateModified: 2022-07-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-how-to-manage-translations-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-how-to-manage-translations-in-figma.md
---

# How to manage translations in Figma

How to manage translations in Figma without duplicating design work for every language. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for how to manage translations in figma when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How CopyDoc fits into the process

CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

With CopyDoc, teams can usually:

- move text in and out of designs without manual copying
- handle localization and content updates with less risk
- keep content operations closer to the source design files

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [CopyDoc](/copydoc/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If copy updates, localization, or spreadsheet-driven content are the pain points, CopyDoc is the best place to begin. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: Strictly Business
description: A mid-year, independence day update on what we've been up to in 2022 so far, and what's on the horizon.
datePublished: 2022-07-04T00:00:00.000Z
dateModified: 2022-07-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/strictly-business/
markdownUrl: https://www.hypermatic.com/articles/strictly-business.md
---

# Strictly Business

As with the last mid-year update, this [strictly business](https://www.youtube.com/watch?v=z26QCzYZH4w) update also falls on July 4th. Even though Hypermatic is based in Australia, and not the United States (or Japan, as some seem to think, based on the design of this website), I do like the idea of doing these mid-year updates on Independence Day, and re-focusing it on continuing to declare our independence from legacy design/development workflows.

### First half of 2022 — tl;dr

The first half of the year has been pretty full on, starting with the first couple of months being very focused on shipping our brand new [Commentful](/commentful) Figma plugin.

Just weeks later after the new plugin was released, we were taken by surprise and went through a very rapid and intensive [full rebrand](/articles/the-startup-formerly-known-as-figmatic/) across every aspect of the business and codebase from Figmatic to _Hypermatic_.

After that, we had to deal with the fallout of the sanctions put on Russia, which meant that all of our Russian customers were cut off from using our products overnight, due to their credit card payments being blocked and cancelled. It also meant that many of our customers from Ukraine were also wanting to pause their use of the products while things were so uncertain.

Shortly after taking care of those customers, we faced a new Figma bug related to image loading that caused some major speed issues for many of our plugins for over a month, and worked with customers to support them and help with workarounds, while manage expectations around when to expect a proper resolution for the core issue.

After these first 6 months of hard work shipping plugin updates and dealing with a the curveballs mentioned above, it feels like things are in a great place right now to get [back at it like a crack addict](https://www.youtube.com/watch?v=_DFypFVnSS0w) and really double down and focus on building and shipping all of the other exciting updates planned for our Figma plugins for the second half of 2022.

### Plugin update highlights in 2022 (so far)

There are multiple updates and small fixes shipped to multiple Figma plugins on a daily basis, but here are some cool highlights from the first half of 2022:

- Added new [e-commerce](https://x.com/hypermatic/status/1482116618415411201), [table](https://x.com/hypermatic/status/1481743788121157632) and [social](https://x.com/hypermatic/status/1483543333045940224) components for Emailify
- Shipped [localization](https://x.com/hypermatic/status/1508539037828927488) to Emailify and CopyDoc
- Rebuilt the Bannerify [animation timeline](https://x.com/hypermatic/status/1523557031680311296) to be scrubbable
- Shipped [LottieFile](https://x.com/hypermatic/status/1523832623428411392) animations support to Bannerify 
- Added [SendGrid](https://x.com/hypermatic/status/1524199850631626752) integration to Emailify
- Added support for [embedding videos](https://x.com/hypermatic/status/1526353953159774208) into Bannerify banners 
- Shipped [hover state](https://x.com/hypermatic/status/1531064573398482944) support for Bannerify animations
- Added [microphone](https://x.com/hypermatic/status/1531794938207547393) support to Crypto video recordings
- Added a way to [ignore Lorem Ipsum](https://x.com/hypermatic/status/1532208678405050368) from CopyDoc spellcheck
- Added support for [YouTube Shorts](https://x.com/hypermatic/status/1534783946613223424) to Pitchdeck presentations 
- Shipped a feature to add elements via [context selections](https://x.com/hypermatic/status/1535146201368383488) to Emailify 
- Added support for [background images/gradients](https://x.com/hypermatic/status/1540219612935372801) to Emailify
- Added custom [PDF metadata](https://x.com/hypermatic/status/1542397824671031296) to Pitchdeck exports 
- Added support for [individual borders](https://x.com/hypermatic/status/1540584084619272192) to Emailify elements
- Added [image carousel](https://x.com/hypermatic/status/1543427068951937024) components to Emailify

### Changes to how Figma plugins are installed

Over the last week, there has also been a new fundamental change to the way Figma plugins are installed, which has (so far) led to an 80-90% decrease in the number of installs for our plugins compared to pre-Figma update installations. These stats seem consistent with [global stats](https://figmastats.com/), which shows ~120,000 new plugin installs on June 25th, which dropped to ~6,700 new installs across all plugins on July 4th (today), almost a week after the new Figma Community update was launched.

Figma plugins can now be "Run" without being installed, so it's possible this will offset that net loss of "Installs", but it remains to be seen what positive or negative effects this update will have from here on in, once the initial confusion and muscle memory around how Figma users are used to working with plugins until now. Putting together a [video](https://www.youtube.com/watch?v=0bEnR3cpXI8) walkthrough on how to install plugins in 2022, and communicating directly with our own customers who have some confusion around this have been the main focus to help them adjust to this transition in the meantime.

### Removing live chat from the site

After having live chat as a support feature for the last 2.5 years, it has been removed from the Hypermatic site as of a few weeks ago, and has been replaced by email-only support instead.

The main reason for this is related to time zones; being based down here in Australia means that most of our customers are awake while we're asleep, which means that "live chat" messages aren't as live as they should be for much of the time. Live chat has been wonderful when it happens to sync up directly with other timezones, but other times these messages can be difficult to follow up the next day if the customer hasn't also left their email address in the prompt to receive any notifications.

Weirdly, switching to a purely asynchronous way of doing support (purely via email) has been working out well so far. The async nature of email itself sets an expectation that it won't be replied to right away, yet it is still treated as if it's live chat here either way, which leads to us having very fast response and resolution times compared with what would usually be anticipated for email support.

As with anything, there are always trade offs, but I believe that consolidating all support into one method is the right way to go ahead, and reduce any confusion and potential lost messages that can occur with the live chat approach.

Emails are all promptly replied to during the day, and processed first thing in the morning the following day, which means that the response/resolution time still ranges from a few minutes (during the day here) to a maximum of ~12-15 hours (if the email is processed in the morning here).

### Building a startup (in a recession)

In April 2020, 3 months after quitting my job and starting this company as a self-funded founder, I gave a talk called [Building a startup (in a pandemic)](https://www.youtube.com/watch?v=wOs8jgkzWQg). 

I gave the talk remotely via video during the second week of our "2 weeks to flatten the curve" [263 day](https://lockdownstats.melbourne/) Melbourne lockdown, and one of the main themes of the talk was my strategy for how to start a startup that would be profitable by relentlessly focusing on customers and building products to help them become more successful.

I think that many of things I talked about in that talk relating to running a startup during a downturn are also very relevant to the weakened economic climate we are in right now, which will be realised more broadly over the coming months. In that way, the approach of relentlessly focusing on delivering real value to customers and generating profit to have enough runway to continue the company over the long term has not changed.

To the surprise of everyone who seemed to love [MMT](https://www.businessinsider.com/personal-finance/modern-monetary-theory) (and total lack of surprise to everyone else), "2 weeks to flatten the curve" turned into "2 years to flatten the economy"; with <s>"transitory"</s> inflation caused by rates artificially kept at zero and inflating the [money supply](https://fred.stlouisfed.org/series/M2SL) by printing a tonne of it. 

Just like "transitory inflation" was always a lie, I think this is also true of "peak inflation" and any talk of a "soft landing". I believe that we are (officially) about to recognise that we've been in a recession since January 2022, so I thought it would be worth very briefly reflecting on the sustainability of Hypermatic and re-assure anyone who cares (probably nobody) that we are in an excellent position to weather any storm that lays ahead of us over the next 12-24 months, and beyond.

Hypermatic is proudly self-funded, [default alive](http://www.paulgraham.com/aord.html) and [default investible](https://x.com/davidsacks/status/1528102541723979776) (however, there are still no plans to take any funding), with high enough free cash flow and a low enough burn-rate to allow the business to continue indefinitely creating value for all of our customers over the long term.

We have never taken any funding, have never spent outside of our means, and as a result have often been dismissed by some VCs as being little more than a "lifestyle business". However, with the "everything bubble" and irrational inflated startup valuations of the last 2 years in the rear view mirror, the party is now coming to an end; and I am more confident than ever that the decision to remain self-funded and focus on creating real value for our customers and being profitable remains the correct one.

Some would say that this means that we've sacrificed speed, but I don't agree with that at all; having more funding or throwing more people at a business does not automatically guarantee velocity, and in many cases can lead to complacency, lack of focus or productive pursuits being traded for more bureaucratic things like meetings or slower decision making and action. 

### Looking ahead

I'm writing this update at the end of a dedicated 2 day business "retreat" to take a more focused pause from the day-to-day activities of running Hypermatic, which I personally still work on every single day as a "7 days per week" or "~70 hours per week" startup.

Amongst other things, one of the super helpful activities was going through and answering all of the excellent questions from Jason Cohen's excellent long form post about asking [extreme questions](https://longform.asmartbear.com/posts/extreme-questions/) to trigger new, better ideas, which really did clarify some of the shorter-term (next 6 months) and longer-term (next few years) decisions and product directions for Hypermatic. It was also very generative for other aspects of the business that aren't directly related to the products themselves, so I'm excited to experiment with some of those ideas in the future, too.

The next 6 months will be focused on shipping the most impactful updates/features to our existing Figma plugins, and get them all in an ever more solid spot than they are right now, while also continuing R&D work on the next brand new Figma plugin that will ship in 2023. The groundwork for other more future-focused ideas that will come later (post-2023) is also being laid down now to ensure that future vision for some of our products can be properly realised over time, too.

As I've said from day one, the focus always remains on creating value over the long-term, and that can only be done if we're able to survive and thrive during any downturns or uncertainty that comes along (as it is right now). and the long-term trajectory remains strong, hyper focused and most importantly, still around to see our mission through to the end (which we will be).

I'm still as excited about the business and future of it as I was on day one of starting it, back in 2019, and also having just as much fun working on it as ever. Momentum still feels super strong, which I think is really important, and I have a renewed sense of optimism about the months and years ahead, as we continue with the overarching mission of reducing the distance between design and production to zero.

---

---
type: tutorial
title: How to install Figma plugins in 2022
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-07-01T00:00:00.000Z
dateModified: 2022-07-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-install-figma-plugins-in-2022/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-install-figma-plugins-in-2022.md
---

# How to install Figma plugins in 2022

#### Video Transcript

Today I'm going to be showing you the new way to install, and also uninstall, Figma plugins based on the latest Figma update that changes the way this works from the way that you're probably used to doing it.

To get started we just go to the Figma Community, and you can get there by just clicking on this little "Community" icon or text at the top, and that's going to bring you to the page that we're looking at now. Then, to find a Figma plugin you can either use the search box if you know what Figma plugin you want to install, or to browse Figma plugins, you can just go to the "Plugins" tab up the top here, click on that and that's going to bring up a list of all the available Figma plugins that you can install into Figma.

Today I'm just going to be using the Bannerify Figma plugin as an example to show you how to install a Figma plugin with this latest 2022 update. knowing that I want to install this Bannerify Figma plugin, all I need to do is click on the Figma plugin, go over to the detail page here and then you just need to click on this new "Try it out" button; this is where the "Install" button used to be, so you used to be able to just click on this button that said "Install" and that would just immediately install it to your Figma account and you could just start using it right away. They've just swapped this out for every Figma plugin, so every Figma plugin you want to install or use is now this "Try it out" button instead. 

It's a little bit of a funny wording, but I'll walk you through how it actually works. All you need to do is click on this new "Try it out" button; I'm going to click on that, and that's going to bring up a prompt for you to select the Figma account or the Figma team that you want to install the Figma plugin to. I'm just going to select my account that I'm already logged into, which is where I want it to be installed; I'm going to click on that, and what this does is it actually creates a brand new totally blank Figma file, and it names it what to be the same as whatever the Figma plugin you just clicked is. 

It'll create this brand new empty Figma file, so that'll be in your Figma drafts if you want to delete that later if you don't need it, and it automatically opens up this new "Resources" panel, which is located in the top of the Figma toolbar; this resource panel contains links to different Figma plugins and things like that. What you want to do is go down to this little three dot icon which says "More options", so if you hover over it, click on that, and to install the Figma plugin you just have to click on this little "Install" link here; and if we click on that, you'll see it's giving us a notification that it's installed the Bannerify Figma plugin.

Do make sure that you click on that little three dot icon if you want to install the Figma plugin properly. The alternative, as you can see here, is this new default action of "Run"; the "Run" button basically allows you to run the Figma plugin in your file without installing it, but that means it's not going to be there in your installed Figma plugins list the next time you want to use it again. You kind of have to go back and find it each time, which I think is a little bit more inconvenient than just having it installed if you know that you're going to be using on a regular basis.

Once you've already got a Figma plugin installed and you want to also uninstall that later down the track, or right away, you can uninstall it by doing the same thing. To uninstall a Figma plugin that you've already installed, you just need to find it under this "Resources" tab that we're already in, find the Figma plugin that you want to uninstall; it'll bring up this prompt when you click on it, and it'll look exactly the same, just click on that three dot icon again, and click on the "Uninstall" link this time. That's just now uninstalled the Figma plugin, but for now I'm just going to leave that Figma plugin installed. Again, I'm going to install the Figma plugin by clicking on the three dot icon, clicking on "Install", and that will install the Figma plugin for me.

As you can see here it's just a blank Figma file; for this particular Figma plugin it's probably not that useful to run it in a blank Figma file. If you do have another Figma file that you want to actually run the Figma plugin in, all you need to do is close off that new Figma file and delete it if you don't want it, jump back into a Figma file that you do want to run the Figma plugin in, and you'll be able to do that normally from then on. You can basically just right click anywhere, go down to "Plugins", then go down to "Installed Figma plugins", and then you can then go over to your Figma plugin that you just installed. Just click on the Figma plugin and that will load it up as you'd expect. 

That's what that looks like there; as I said, it's a little bit of a extra step in order to install the Figma plugin, but once you've got it installed it should be basically installed and accessible the way that you've already been used to running the Figma plugins. If the Figma plugin automatically adds itself to the column on the right hand side, you'll still be able to access it from there as well; that's just another way you can open up the Figma plugins if you do want to do that as well. 

As I mentioned, if you do want to access the Figma plugins from this new "Resources" menu, you can go ahead and click on that up here, and that's going to open up a list of all the recently installed or used Figma plugins. You can do that, and you can also change this "Recents" option to "Installed", so you can get a list of the installed Figma plugins that you've actually got installed on your Figma account, and that way it's going to be an easier overview of actually auditing what Figma plugins you've got installed, and giving you a much easier way to then jump into that Figma plugin and once again uninstall it if that's something you'd like to do. To uninstall the Figma plugin, you can just click on that "More options" icon, click on "Uninstall", or if you've already uninstalled it and you want to install it again, you can do the same thing; you just have to click on that icon, and then click on "Install". I'm just going to leave that installed, and we don't have to touch that again.
 
Okay, so that's basically the new process for how to install and uninstall Figma plugins based on this new mid-year 2022 update of the Figma app. This will work in the browser or in the Figma desktop app, which I'm using at the moment. It's really up to you, but once you do have the Figma plugin installed you'll be able to access that Figma plugin under your installed Figma plugins list regardless of where you login. That'll carry over wherever your Figma accounts being logged into and you don't have to worry about reinstalling the Figma plugins each time. Make sure you do install the Figma plugin if it's something you want to use, because just clicking on the "Run" button each time is going to kind of be a little bit annoying if you know that you actually want to keep that closely accessible in your installed Figma plugins list. That's how to install Figma plugins in 2022, if you're wondering what the new changes were and how to navigate them that's a basic overview of what it looks like.

I'll keep this Figma tutorial pretty short today. I hope that you've learned something if you're wondering how to install Figma plugins in 2022 with this new Figma update; this is currently how it works. It may change again in the future, and if it does I'm happy to record another video to go through it so you can see any other updates that are made at that point; but thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: Figma content ops workflow
description: A practical content operations workflow in Figma for teams managing repeated updates at scale.
datePublished: 2022-06-24T00:00:00.000Z
dateModified: 2022-06-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-content-ops-workflow/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-content-ops-workflow.md
---

# Figma content ops workflow

A practical content operations workflow in Figma for teams managing repeated updates at scale. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for figma content ops workflow when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How CopyDoc fits into the process

CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

With CopyDoc, teams can usually:

- move text in and out of designs without manual copying
- handle localization and content updates with less risk
- keep content operations closer to the source design files

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [CopyDoc](/copydoc/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If copy updates, localization, or spreadsheet-driven content are the pain points, CopyDoc is the best place to begin. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to easily add elements to HTML email designs in Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-06-10T00:00:00.000Z
dateModified: 2022-06-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-easily-add-elements-to-html-email-designs-in-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-easily-add-elements-to-html-email-designs-in-figma-using-emailify.md
---

# How to easily add elements to HTML email designs in Figma using Emailify

#### Video Transcript

Today I'm going to be showing you a brand new way to really easily build out your HTML email designs in Figma using the Emailify Figma plugin.

To do that, we just go to the Figma Community and if you haven't already done so, we're going to install the Emailify Figma plugin by searching for the word "Emailify", and under the "Plugins" tab you'll see Emailify pop up. If you haven't already installed it, just go ahead and click on the "Install" button on the right hand side and then you can switch back into your Figma file to get started.

Once you've gone back into your Figma file, just right click anywhere, go down to "Plugins" and then click on "Emailify", and that's just going to start up the Figma plugin we just installed a moment ago. You'll notice here that I've already got an email in my file, but if you're just getting started with the Figma plugin you can click on this little "plus" icon to create a new email. You can just create a new email frame here, and this is going to allow you to add either custom preset elements or preset modules from these menus, or for today we're actually going to be focusing on a brand new feature that doesn't rely on this either. Jjust for a quick refresher, you can add content components by clicking on any of these categories, clicking on any of these components and that will automatically add them into your Figma designs, just like that. 

For today, I'm going to be showing you a different way of going about this, and also a way to customize these that you've already added. For example, if we just add a few in here and let's say that we want to add some more columns into this particular component, we can now do that by just selecting our element; if we click on the row in Figma, I've got the row selected, and you'll notice down here there's a new option called "Quick add element to selected layer", and it's telling me that I've got a "row" selected. What that allows me to do is now add a new content column into that row just by clicking on this option, and then clicking on the "add" button. You can see here it's added a brand new content column, which we've now got selected as well, which gives us a whole set of different options. 

Now we can go into those options, and if we know that we need to add some text, we can add text to that column, we can add images, we can add a button, we can add all different things, spacers, data tables, social icons; all the stuff that you've come to expect from the other categories. Now you can basically add them yourself really easily without copying and pasting existing elements or trying to design your own, this is going to be a really quick and reliable way of doing that. As I mentioned you can also do this for existing components; let's say there's a common use case of wanting to add your own social icons or different social networks; if you double click on to the social layer that's already been created by a component, or created by yourself by adding a new social layer, you'll notice down here that once the social layer is selected we now have a whole bunch of different social networks that we can add in. If you just click on the one you want and then click on the "Add" button, that's going to automatically add that layer into your social component. We can go ahead and add a whole bunch in there, and again, you can add these yourself manually, but this is just a really quick way of adding some of the most popular social platforms into the component. 

If you need to link those up all you need to do is click on the "social icon" layer itself, then just click on the "HTML and Mobile Settings" button in the Figma plugin, and then you'll be able to go ahead and paste in your links to those particular social networks. If you have a Spotify account or a Spotify page, you could just paste that link into the clickable link URL field. This also applies to things like things like buttons, where you can paste in a clickable link and also images; if you need to link one of the images that you've just created, you can totally just paste in your clickball link URL. I won't be going through the entire design process for this particular Figma tutorial, I just wanted to go through some of these new context options; if you do need to get a more comprehensive overview, we have some other YouTube videos on the channel thatI'd recommend checking out; but for today if you're just checking out this new feature, this is basically how it works.

I'll show you a few more examples; if we click on the actual email frame itself, we can do a few new things like adding in a hero background area. If we click on "hero background" and add that in, we now have this brand new hero section which we can also add text to, we can add buttons to, we can totally customize that as you would expect. If we wanted to change the font, or change the alignment, or change the size, you can basically just customize this in Figma as if you were designing anything else, and you can just design it to the way that you want, essentially. We can increase the radius on these buttons, we can change those button colors if we need to, we can do all that kind of stuff. The same thing with the hero, you can change the background image if you want to drop a new image in there that's definitely something you should do, or if you want to change the overlay opacity, or add more overlays or less overlays you can do that, too.

You can also rearrange these components as you would expect; if we click on our new hero, and we actually want to bring it up to the top, we just drag that layer up to the top and that that's where it'll show up in our new ordering. You can also get rid of the columns if you don't want to keep some of those layers you've created, just go ahead and delete those, and that'll just remove them. Because all the elements are using auto layout by default, this is going to make it really easy to do that. If you decide that you actually don't want any of those old social icons, just delete them, or if you want to reorder some, you can do that too; just reorder it in Figma and that'll automatically reflect in there. 

Probably the most common one you're going to be using is if you click on the email frame itself and then click on the "Content Row", the content row is basically the most standard section in the email. If you click on that to add a content row, that's going to give you a new row with with a single column, and you can just go ahead and start adding your content into that column just as you'd expect; that's a really good one to add. 

The other thing that you can actually do is wrap multiple rows as well; if you know that you've got a couple of different rows and you want to actually group them together in a container, what you can do is you can click on the email, you can add a row wrapper. If we click on the add row wrapper option, click on "Add", and you'll see down here that it's added this brand new row, or brand new wrapper, I should say. If we know that we've got these two rows up here and we want to bring them into our wrapper, we just select those, drop them into the new wrapper frame, and I'm just going to get rid of the blank one, and what that allows us to do is actually wrap multiple rows and give those rows some padding and a background color around the rows itself. This is a very special layer that allows you to do that; normally you can't do that, but this allows you to do that, so that's what that looks like there. You can also add spacing between those if you need to as well by increasing the item spacing in Figma, that'll increase the space between the rows, but by default it'll just keep it flush just like that. That's basically it, you can have a bit of a play with all of these new elements, there's a whole bunch in there; there's navigation links that you can add, so you can basically create menus, and if you click on the navigation layer you can add more links, and again, you can customize those just by clicking on the layer just as we did with the social icons. If you double click on the link layer, click on the "HTML and Mobile Settings" button, and you just paste in your link into this box here, and that'll turn that into a link, and you can just customize the text as well like that. 

As I mentioned before, we can then export this out to HTML; and if you want to get a preview of what that's going to look like, just go ahead and click on the "Preview" button in the Figma plugin, and this is basically going to load up a real preview of the HTML inside the Figma plugin before you go ahead and export it. You can see here that it's looking really good, it's mirroring what we've designed in Figma. If we want to change it from the desktop view to a smaller device we can do that, we can bring it down to a really small one, and if we notice that something in here doesn't quite look good on mobile you can actually override those as well. If you click on the text layer, click on the settings icon, then you can actually override these settings just for mobile. If we say we want to make this a font size of 28 instead and then refresh it, that allows us to actually override that, and it will always keep the original design in Figma as the desktop one; you can just override them for mobile and it'll keep the desktop ones by default. 

Okay, that's basically it; I'm just going to export that out to HTML just so we complete the whole process. All you need to do is click on the "Export HTML" button, make sure you've got your email selected; I'm just going to export one today, so if I just export my new email, you can add a subject line and preview text as well, but for today I'm just going to leave those empty. There's an option to also upload the image URLs if you want to have them hosted by the Figma plugin, you can do that, but for today I'm just going to click on the "Export to HTML" button; that's going to render out all of the images and generate all of the HTML for us.

I'm going to click on "Download your .zip file", save that to my desktop, and if I double click on that zip file, it's going to open up the folder. I'm just going to open up that folder that it's unzipped, and if we open that up, you can see here that we've got our email inside. These are all the images as we'd expect, and also the HTML file here. It also generates a previews page, so you can use this to preview all the emails that you export at once; I'll show you what that looks like just by opening up in the browser, and there we go, this is the rendered HTML, the desktop version that we can see here. You can see all the links and those have got the links set to them we've got these different social icons that can be linked, and then you've got the mobile preview as well. You can get a really easy overview of your mobile and desktop designs, and this can be really handy for sending to clients or stakeholders, you can upload this file somewhere and send them a preview link, and that's going to be a really easy way for them to review the designs that you've done. Hopefully they'll look much better than these ones, these are not good designs, but in the interest of showing you how this feature worked, I just wanted to make it really simple and clear to just to show you the functionality of this new feature.

Okay, I think that's going to do it for today. I hope if you've been looking for an easier way of customizing your emails just by adding individual elements instead of having to use the preset components and customizing those to your heart's content, or using the custom HTML builder, which I haven't got into in this Figma tutorial, there's another YouTube tutorial about this custom component builder, you can use that as an alternative to what we've just gone through as well. For today, I really just wanted to hammer home how easy it is to now select these elements and contextually add brand new elements into them really quickly. I hope that helps increase your efficiency with designing HTML emails in Figma, and I hope you give it a go with you or your team and improve your email workflows in Figma. Thank you as always for watching and we'll be back soon with more Figma tutorials just like this one.

---

---
type: article
title: Figma to Excel text export
description: How to export copy from Figma into a spreadsheet workflow for review, updates, and handoff.
datePublished: 2022-06-07T00:00:00.000Z
dateModified: 2022-06-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-to-excel-text-export/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-to-excel-text-export.md
---

# Figma to Excel text export

How to export copy from Figma into a spreadsheet workflow for review, updates, and handoff. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for figma to excel text export when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How CopyDoc fits into the process

CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

With CopyDoc, teams can usually:

- move text in and out of designs without manual copying
- handle localization and content updates with less risk
- keep content operations closer to the source design files

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [CopyDoc](/copydoc/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If copy updates, localization, or spreadsheet-driven content are the pain points, CopyDoc is the best place to begin. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to add hover animations to HTML banners in Figma using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-05-30T00:00:00.000Z
dateModified: 2022-05-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-hover-animations-to-html-banners-in-figma-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-hover-animations-to-html-banners-in-figma-using-bannerify.md
---

# How to add hover animations to HTML banners in Figma using Bannerify

#### Video Transcript

Today I'm going to be showing you how to add animated hover states to your Figma banner designs, and then export those out to production ready HTML automatically.

To do this, we're just going to go to the Figma Community and search for the term "Bannerify" and under the plugins tab you'll see Bannerify pop up. All you need to do is click on the "Install" button on the right-hand side and then you'll be ready to go.

Once you've installed the Figma plugin, just jump back into your Figma file, and the Figma file should have a bunch of frames in it; and each frame should contain the layers that you want to include as the elements in your timeline. To start up the Figma plugin we just right click anywhere, go down to "Plugins" and then click on "Bannerify", and that's just going to open up the Figma plugin that we just installed a minute ago.

When the Figma plugin loads, it will ask you to select which frames in your file you want to load in to be banners. Today I'm just going to be using the "MREC" banner, and you can use as many as you want but I'm just going to use one for today, and then click on the "Load selected banners" button. You can see that's just loaded up my "MREC" sized banner and it's included all of the layers from our Figma designs. 

If we go through the timeline you can see I've already added some animations to it, and I'm not going to be showing you how to do that in this particular Figma tutorial, there's some other YouTube Figma tutorials on our channel if you want to go through those; today I'm just going to be focusing on how to add another state, which will be the hover state to any of our elements here. To do that, all we need to do is select the Figma layer that we want to add a hover state to; for example, if I want to add a hover animation to my button, my "CTA", I just click on the "Add Hover" toggle in my Figma layer, and that's just going to toggle on a brand new animation setting down here. You can see we've got our entry animation and our exit animation by default, but checking this "Add Hover" toggle now reveals a new animation selector for hover animations. 

By default it won't have any animation set on it, but we can open up this select box and start browsing some of the hover animations that are included; for example, if you wanted to add a simple "Grow" animation, if we click on "Grow" you can see here that it has revealed the timeline speed. We can change the speed of the hover effect; if I increase that to one second, for example, and then over in my preview I can actually now preview that hover animation in real time. If I hover over the "Apply" button you can see that it's actually applying that grow animation, and if I reduce the speed, we can speed up that hover animation considerably; that's now 0.3 seconds, but I can go through all of these and basically see what one is going to suit this creative. 

I can do a rotation which will rotate the CTA slightly, I can do a bunch of more fancy ones; we can do bounce-in. I can also set it to loop, if I want it to continue to play while I'm hovering over it, I can check this "Loop" toggle and now if I hover over it, you can see that it's going to continually play that animation, whereas if I turn the loop off the hover animation only goes in and it doesn't keep repeating, it'll just do a half a state and won't keep looping, but if I turn that on it'll keep looping. Again, I can change the speed of that one, too; if I want to slow it down just extend the timeline and now it's a one second play through, so that animation is going to take a second. That's basically what it looks like to add the hover effects.

Wwe can add this to as many layers as we like; if we wanted to add one to the logo we do the exact same thing, go to the "Logo" layer, click on the 
"Add Hover" toggle, and that's just going to reveal the hover animation selector, and again you can select any of these, there's a whole bunch in here; you can do a skew animation if you want to skew the logo, we can change it to be a wobble, we can wobble the animation and have that just a little one one time play through. Again, we can repeat that by clicking the "Loop" button and just having it continually wobble or we can slow that down, as we said before. 

I'm just going to leave it with those two for now, and then to get this out to HTML all we need to do is click on the "Export to HTML" button, go down to our code output settings; we can just select if we want to export it to HTML/CSS, GreenSock (GSAP) animation or most likely an ad platform; if you're exporting to Google Ads or DoubleClick, you'll likely want to click on one of these. For today I'm just going to be keeping it simple and exporting to HTML and CSS. You can add your CTA down here; if you do want to include a click tag you can pre-populate that down here, so I can add in the "Hypermatic" domain. I can pop that in there and then all I need to do is click on the "Export Banner" button; i'll click that now that's going to generate all of the HTML and CSS for us.

I'm going to click on the "Download your .zip file" button, save that to the desktop, double-click on the zip file that it's just saved to, unzip that, and then I'm going to open up the folder that it's unzipped and go to the index.html file. I'm going to drag that into my browser just so we can see what it looks like, and you can see here we've got our banner animating in as we expected, and then now because we've added our hover effects you can see here when I hover over the CTA, it's playing a looped animation that we set. I can also hover over the logo as well, so if I hover over the logo section, that will also animate in as we'd expect. 

This is the preview page, so if you've got a bunch of banners they'll all show up here. If you need the actual individual banner, it's just inside of this "banners" folder here, so if we drag that into the browser, there we go; that's the hover animation set on both those layers. Okay, that's going to do it for today, as I said this is a really short Figma tutorial just to specifically go through how to add the hover animation states onto any Figma layers into your banner timeline. 

The other thing I should have mentioned is you can do this in bulk as well. If you need to apply a hover animation to multiple layers, you can just click on multiple layers in the timeline, and then in the add in the "Add Hover" checkbox down here, just select that and that will reveal the hover animation in the bulk application panel as well. You just click on "Add Hover", click on the animation you want to apply to multiple layers, so in this case I'm going to use the "Grow" animation and loop it, and then just click on the "Apply animations to selected layers" button, and that will apply the animation that you want to set; and this will also apply the entry, exit and hover animations, so make sure you've got them all set up the way that you actually want, and then just click on the "Apply animations to selected layers"; once you do that you'll see that the animations get applied in the timeline in bulk. Both these layers are now the same and if we hover over these, you can see now this one's playing the grow animation and this one is also playing the grow animation in the exact same way.

The other way you can do this really quickly is you can just use the copy and paste setting as well; if you click on "Copy" and then you click on "Paste" in another Figma layer, that's going to copy and paste all of the animation attributes from the layer you copied it from over to the layer that you quickly pasted it to; this is just a really quick way if you just need to do a couple of layers and copy some animation settings that you've already created. Here was as well we can see that it's copy and pasted that hover effect, so now all three of our layers actually have that exact same hover effect on it. That's what that looks like there; thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: article
title: Figma variables vs spreadsheets for content management
description: When to use Figma variables, when to use spreadsheets, and how teams manage larger content workflows.
datePublished: 2022-05-21T00:00:00.000Z
dateModified: 2022-05-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-variables-vs-spreadsheets-for-content-management/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-variables-vs-spreadsheets-for-content-management.md
---

# Figma variables vs spreadsheets for content management

When to use Figma variables, when to use spreadsheets, and how teams manage larger content workflows. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for figma variables vs spreadsheets for content management when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How CopyDoc fits into the process

CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

With CopyDoc, teams can usually:

- move text in and out of designs without manual copying
- handle localization and content updates with less risk
- keep content operations closer to the source design files

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [CopyDoc](/copydoc/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If copy updates, localization, or spreadsheet-driven content are the pain points, CopyDoc is the best place to begin. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: tutorial
title: How to add video embeds to Figma banner exports using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-05-17T00:00:00.000Z
dateModified: 2022-05-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-video-embeds-to-figma-banner-exports-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-video-embeds-to-figma-banner-exports-using-bannerify.md
---

# How to add video embeds to Figma banner exports using Bannerify

#### Video Transcript

Today I'm going to be showing you how to add videos to your Figma banner designs and then export those out to HTML, GIF, or MP4 videos.

To get started we're just going to go to the Figma Community and we're going to search for "Bannerify", and under the "Plugins" tab you'll see "Bannerify" pop up. Just go ahead and click on the "Install" button on the right hand side and then you'll be ready to go.

I'm just going to jump back into my Figma file now, and I've just got two frames set up and these just contain a bunch of layers that I want to use in my banners. To run the Figma plugin that we just installed I'm going to right click anywhere, go down to "Plugins" and then click on "Bannerify" and that's just going to run the Figma plugin we just installed a minute ago. As I mentioned it's going to pick up on those two frames because that's what it counts as banners; we've got a portrait and landscape, and I'm just going to load both of them in by clicking on the "Load Selected Banners" button. 

That's just loaded up our banners and you can see here that it's reflecting all the layers in our banner frames in Figma. This Figma tutorial won't be going through how to design and animate all these layers, this Figma tutorial is really just going to be focusing on how to then enhance those banners by embedding videos into any of the layers, then they can be included in the banner exports. As I mentioned, we've got a really simple animation which you can play through just by clicking on the play button, and I've got that mirrored in both of my banners. I've gone ahead and added these simple animations beforehand just to give us a starting point; now that we've got this static background I actually want to make that into a video background to make this banner a little bit more dynamic. 

To do that we can just go to our web browser, and for this example I'm just going to be using a video from this testvideos.co.uk website, but you can also go to other websites like pixabay.com, which have a whole bunch of free stock videos that you'll be able to use as well; I can show you what that looks like in a moment. For example, if we wanted to just drop in our first test video, all we need to do is go down to whichever resolution you're after, I've already picked one out, so I'm just going to use this one. You can see here this is what the video looks like in its full form; I'm just going to grab that URL and I'm going to copy and paste it into Figma. I've just highlighted that URL for the MP4, and it's important that the URL is actually an .mp4 video or a .webm video; make sure that it's an .mp4 and then jump back into Figma, having copied that link, and then just go to your video placeholder layer or any layer you want to add a video on, and click on the settings icon. Once you've clicked on the settings icon, just down here at the bottom you'll see a little embed icon, all you need to do is click on the text box and then just paste in the link that we just copied.

I've just pasted that in and now I'm just going to close off the settings panel and you'll see here that our placeholder image has now been swapped out with the video that we just copied. If I play through the timeline you can see that the video is actually syncing up with wherever I jump to; we can get a real-time preview of what that looks like alongside all of our other animations, and if I just hit play, you'll see that the animation, or the video rather, is playing back in our timeline along with our other animations. 

I can also apply this to my other banner just by doing the same thing. Another easy way to do this for multiple banners, for multiple layers in multiple banners, is just to click on the banners that you want to add the video to; for example, if I click on the placeholder one and then click on the other placeholder, and then all I need to do is go down to here in this little media embed column and just click on the input again and paste that in there and click on the "Apply Embed" button, and you can see that's applied the video to the two layers that we just selected. That's just a really quick way of doing it if you've got a bunch of layers you want to apply videos to. Another way that you can select those really quickly is just going to the "Quick Select" menu up here and just clicking on the layer that you want to add the video to; click on that, and that will automatically select those two layers for you. That can be really helpful if you've got a bunch of banners with the same name layer that you want to apply the video to. 

As I mentioned, you can use this with any video files, any .mp4 files; for example, if we go back to our stock video website, et's grab this one, just click on that and you want to click on "Free Download", just select a lower resolution and click on "View" and that's going to open up the .mp4 URL in our browser. I'm going to copy that link the same way I just did with our other one, jump back into Figma, and I'm just going to go down to my settings again; you can just click on the import logo or on this settings icon, either will work, and for this case I'm just going to replace it as a bit of a test. I'm just going to paste in our new stock video, close off the settings, and again you can see it's swapped in the Figma video background embed as we'd expect. That's what it looks like, I'm just going to swap back to our other video just for the purposes of this Figma tutorial and give you a little bit of a preview of how that looks when we export it; I'm just going to drop that back in there. 

Now we've got them both synced up and I'm actually going to get rid of the fade-in animation; I'm just going to remove the animation on those videos just so it doesn't have to fade in each time. That's what that looks like, and now if we want to export those out we can do it to multiple formats. The first format I'm going to do is just Figma to HTML; I'm going to click on "Export to HTML" and I'm just going to leave all these settings default, you can go ahead and change these if you need to, but I'm just going to leave them as defaults, and I'm going to click "Export Banners" and this is just going to export those banners out to HTML for me. I'm going to save them to my desktop, I'm going to open up the zip file by double double clicking on it, opening up the folder, and now if I go to my index.html page, which is just a preview page, I'm going to go ahead and open that up in my browser and you can see here that the videos are playing back as a video background as we'd expect. Those are looking pretty good. Again, I can just replay that and you can see the animations are coming in over the top; that's looking really nice. 

Then the other thing that we've got in our banner folder, if we just open it up is you'll see here that there's also a .jpg included, which is our fallback placeholder image; the placeholder image automatically gets exported. In the HTML, you'll see that if you open up that HTML file, you can just do that here, and then we can just view the source; we'll click "View Source" and if we search for our video, you'll see here that the "poster" attribute is actually being set to the .jpg; if for whatever reason the video doesn't load in the browser, it will fall back to whatever you set the poster as in Figma. That just relates to the video placeholder layers that we've got in here which are these ones; that's just worth noting in case you're wondering what that file's doing in there.

Now that we've exported HTML, I'm going to do one last export and to show you what it looks like to export this out from Figma to a video file. Again, I'm going to click on the "Export to GIF/Video" button instead, and this time I'm just going to click on "Export to WebM"; this is going to export our banners from Figma to video instead of Figma to HTML, and this is really handy for things like social media ads, or any format where an HTML banner just isn't going to work and you want to use a video, or if a certain platform requires video, this is probably the better way to export it. You can also export to GIF, and you can also export to MP4 video as well, but in this case I'm just going to show you what it looks like with a WebM video. 

It's just finished zipping up our banners; I'm going to click on that "Download" button again, I'm going to save that to my desktop, double click on the zip file, double click on the folder, and if I drag that index file into my browser this is just going to load up a preview page of my banners. You can see here that instead of them being exported as HTML banners, these are now video files; these are being played back just on the HTML page, they've been embedded as videos, so these are ready to go if you want to upload them to a social platform, or convert them to a different video format, you can do that as well; you just have to open up the videos folder. If we jump back to our desktop open up the videos folder you can see here that these two here are the actual video files; if we were to drop that into the browser, too, you can see that this is a proper video that we can skip through, and that's what it looks like. 

That's that's basically the whole Figma tutorial; these are the formats you can export to, and as I mentioned, you can also export these banners from Figma to GIF or Figma MP4, but for today I just wanted to keep it really simple and just show you the example of exporting from Figma to HTML, and Figma to video in WebM. I think that'll do it for today, I hope you found this useful if you've been wondering how to add video embeds into your Figma banners using the Bannerify Figma plugin; this has been requested for a little while, so I'm glad to finally be able to reveal this and show off how it works. I hope you can unlock some more creativity that you weren't able to access before with this new video feature, so I hope you and your team have fun playing around with it. Until next time, thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: article
title: Best Figma plugins for front-end developers
description: The best Figma plugins for front-end developers who need faster handoff, better QA, and cleaner exports.
datePublished: 2022-05-15T00:00:00.000Z
dateModified: 2022-05-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-front-end-developers/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-front-end-developers.md
---

# Best Figma plugins for front-end developers

Front-end developers are often the ones absorbing the messiest part of the workflow. By the time design reaches implementation, there are already deadlines, revisions, missing details, bloated assets, and a strong chance someone still expects it to be pixel perfect by tomorrow morning.

The best Figma plugins for front-end developers are the ones that reduce that pain instead of adding more process around it.

### Pixelay

If I had to recommend one plugin for front-end developers first, it would probably be [Pixelay](/pixelay/).

It lets you compare real URLs against the original Figma designs with overlays and diff modes, which is exactly the kind of thing that makes visual QA faster and more objective. Instead of guessing whether the spacing feels off, you can actually see the mismatch.

### Weblify

[Weblify](/weblify/) is useful when developers want faster access to implementation-friendly output from Figma layers.

It can inspect designs as HTML, CSS, Tailwind, React, or Vue, which helps shorten the jump from design to working code. It will not replace engineering work, but it can absolutely remove repetitive translation work.

### TinyImage

Developers also end up owning performance. [TinyImage](/tinyimage/) helps by exporting compressed images, SVGs, PDFs, GIFs, and modern formats directly from Figma so you are not constantly cleaning up oversized assets after the fact.

### Favvy

Favicons are one of those tiny jobs that somehow still waste too much time. [Favvy](/favvy/) generates the favicon files, metadata, and head-tag code a website or PWA actually needs from a single Figma frame.

That is much better than piecing it all together manually the night before launch.

### CopyDoc

If your team needs content exports, JSON-friendly text workflows, or spreadsheet-based content changes, [CopyDoc](/copydoc/) is useful for front-end developers as well. It helps bridge design content and implementation content without endless copy-paste work.

### What to install first

- For build-vs-design QA: [Pixelay](/pixelay/)
- For code-oriented handoff: [Weblify](/weblify/)
- For image and PDF optimization: [TinyImage](/tinyimage/)
- For favicon packaging: [Favvy](/favvy/)
- For text and content workflows: [CopyDoc](/copydoc/)

If your front-end team keeps hitting all of those jobs every week, the [bundle](/bundle/) is the cleaner setup.

---

---
type: tutorial
title: How to export HTML emails from Figma to SendGrid using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-05-14T00:00:00.000Z
dateModified: 2022-05-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-send-grid-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-send-grid-using-emailify.md
---

# How to export HTML emails from Figma to SendGrid using Emailify

#### Video Transcript

Today I'm going to be showing you how to export your email designs from Figma out to HTML templates that will automatically be uploaded into your SendGrid account.

The first thing we need to do to get started is just go to the Figma Community and search for "Emailify", and under the "Plugins" tab you'll see Emailify pop up. All you need to do is click on the "Install" button on the right-hand side here and then you'll be ready to go.

Once you've installed the Figma plugin, just go back to your Figma file and right click anywhere, go down to "Plugins", click on "Emailify" and that's just going to run the Figma plugin that we just installed a moment ago. You'll notice that I've already got a design in my Figma file and that's because I've pre-designed it using some of the components from the Emailify Figma plugin categories; if you haven't already done that and you're new to the Figma plugin, we have another tutorial on the YouTube channel that goes into detail about how to actually design the emails and customize them, but in this Figma tutorial I'm just going to be focusing on how to actually upload it from Figma into our SendGrid account.

I'm going to do that now and I'm first just going to add a footer that's specific to SendGrid; if you go to the "Footer" category and click on this "SendGrid" option, that's just going to add in a SendGrid footer with a pre-filled unsubscribe link. You don't have to worry about finding the correct link for that unsubscribe link because it's already been pre-populated and that'll be exported with our HTML template. Now we've got that in there we can start exporting it by clicking the "Export HTML" button and then down here under the select box, we're going to change it from "HTML" and we're going to change that to "SendGrid" under the "Upload to Platform" category; we're going to click on "SendGrid" and now it's going to ask for our SendGrid API key.

You can get this API key by logging into your SendGrid account, going down to the "Settings" sidebar, expanding that, and then clicking on the "API Keys" page, and you'll land on this page here. All you need to do is click on the "Create API Key" button, and you want to give this a name; you can name it "Emailify", and make sure you click on the "Full Access" radio button, and then just click "Create and View" down here, this button; I've just clicked that, and it's generated a new API key that we can use/ All you need to do is click on the API key that it generated, which will copy it to your clipboard, and then go back to Figma. In the Figma plugin you just want to paste that API key into the input field here, and now that we've pasted that in, the "Upload to SendGrid" button is now enabled, and we've got our email selected, so we're ready to go. 

We can click on the "Upload to SendGrid" button and this is going to export the design to HTML and automatically upload it to our SendGrid design templates, because we put that API key in there. Now it's just finished, it's told us that our SendGrid template has been uploaded and we can view it by navigating to the design library page in our SendGrid account. You can also optionally download the zip file of the template that was uploaded if you just want a local reference for it as well, but that should be uploaded into our SendGrid email templates area now. 

If we jump back into SendGrid in our browser and we go on the left hand side here, down to "Design Library", this is going to open up our email template designs, and we should see the email that we just uploaded from Emailify. Here it is, we can see it here, it's just been uploaded. We can click on that, we can go to "Edit", and you can see here the email has been imported, and we can preview that to see what it looks like. This is all HTML, we've got our buttons, images, footer and everything in there as we'd expect. Here's the mobile view, and that's what it looks like. 

It's been successfully uploaded directly from Figma into our SendGrid account, and now we can go ahead and use this email or tweak it if need be in SendGrid, if you want to add some test data, you can do that and customize it a little bit more; but for now I'm just happy with the email being uploaded as it is. I'm just going to save that, and that's it; you've got your email design uploaded directly from Figma into your SendGrid account without having to go to the trouble of doing any weird image uploading or HTML editing or anything like that, it's just all taken care of automatically.

That's it, that's the whole process; if you do want to export multiple emails you can do that as well. If you've got multiple designs, just make sure you select multiple designs when you go to upload it, and it will upload all of those into SendGrid, it just depends on how many you have and which ones you want to upload.

That'll do it for today; I hope you found this Figma tutorial helpful if you haven't if you've been wondering how to get your email designs outside of Figma and upload it into SendGrid this is going to be the quickest way; thank you as always for watching and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add Lottie animations to Figma banner exports using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-05-09T00:00:00.000Z
dateModified: 2022-05-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-lottie-animations-to-figma-banner-exports-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-lottie-animations-to-figma-banner-exports-using-bannerify.md
---

# How to add Lottie animations to Figma banner exports using Bannerify

#### Video Transcript

Today I'm going to be showing you how to add Lottie file animations into your Figma banner designs and then export those out to HTML, GIF and video banners, directly from Figma. 

To get started, we're just going to install a Figma plugin called Bannerify. If you search in the Figma Community for "Bannerify", and under the "Plugins" tab you'll see Bannerify pop up. All you need to do is click on the "Install" button on the right-hand side and then you'll be ready to go. 

I'm just going to jump back into my Figma file, and I've gone a bit meta today and I've designed a really simple "Lottie Files" banner; we're going to be adding Lottie file animations into this banner and we're going to be advertising the Lottie files brand or service in our banner design as well. This is really simple, I've just got two frames set up each with four different layers, I've got a logo layer, text layer, a placeholder layer, and a button layer. All we need to do is right-click anywhere, go down to "Plugins", and click on "Bannerify" and that's going to load up the Figma plugin that we just installed a moment ago. Once it loads up, you just select which frames you want to load in; I've only got two parent level frames, those are the ones that are coming up, and I'm just going to go ahead and load both of those in. I'm going to click on "Load Selected Banners" and that's just going to load up all the layers that we can see on the left hand side here.

If you go through the animation you can see that I've already got a few really simple fade in animations set on those four layers, and they're just slightly staggered, and they've got a speed of one second each. You can see them coming in pretty smoothly just like that; we can play through that and you can see how that works. If you're new to the Bannerify Figma plugin, there's a separate YouTube tutorial on how to animate and design your banners, but today I'm really just going to be focusing on adding the new Lottie file integration into your banners as well; with that said, let's get started.

To add a Lottie file animation to any of your Figma layers all you need to do is basically add a placeholder layer where you want a lot of animation to go; in my case I've just added these two rectangle layers, that's why they're gray and boring, and I've just labeled each as "Lottie Animation Placeholder" so I know what they are. Then all we need to do is just go to the settings icon; you can see there's a settings cog icon on that layer, so I'm going to click on the "Lottie Animation Placeholder" layer settings icon. I'm going to click on that, and you can see down here at the bottom we've got a little embed logo or import logo and a text area; this text area is where we're going to paste our Lottie file animation link; this is going to be a link to a Lottie JSON file. This can either be on your own server or your own location, but more commonly you're probably going to be uploading it to the Lottie Files website, or getting a pre-existing animation from there. 

To do that we just need to go to lottiefiles.com, and if you just make a free account, you can do that really quickly, that will allow you to browse their animations. If we just go to "Discover" and go to "Free Animations" and you can search by different categories and things like that, or just search for a specific animation. This is just the list of featured animations that you'll see; we've got all these available to us, and to insert one of these into Bannerify in Figma, we just click on the animation that we want to add, and then you'll see there's a little box down here called "Lottie Animation URL"; we want to grab that by clicking on this little copy icon. That's going to copy the URL, and then I'm going to jump back into Figma and in our text box here, I'm now just going to paste that URL that we copied from the Lottie Files website. I'm going to paste that in, you can see there it's got a JSON file at the end, you definitely want to make sure it's got that, and then I'm going to set it to loop. By default it just will loop the animation, you can turn that off if you want, but I'm just going to loop it for now. 

I'm just going to click back into my timeline, and you can see here we've now got a Lottie animation in our layers. If we play that, we'll play that from the start, and you can see there it's playing the Lottie file animation the same way that we had seen it on the website from Lottie Files as well. That's what that looks like, as I said, you can scroll through that and see what the animation is going to look like, but you can notice as well it's also applying the Bannerify animation to that layer. For example, if we were to change the "fade in" animation to a "scale in" animation, and we changed that and then we scaled that down, you can see here that it's not only playing the Lottie animation as an embed, but it's also applying our Bannerify transitions. We can transition in and transition out different Lottie files, and that'll apply the animation to the actual layer as well; that's scaling it in. We can also apply an exit animation, if we want to scale it out we can do that too; we can just drag that up there and this will scale it out as well. If we now play that, it's going to go away. 

We can also add more Lottie animations as well; if we wanted to have multiple steps in this banner all we need to do is just create a new placeholder frame. For example, I'm just going to add another one I'll pop that into our original banner, the one that we're just working on. I'm just going to drop that in there; we can call this one "Lottie Animation Placeholder 2" and I'm just going to drop that into my banner there and then we can just now grab another random Lottie animation to show off. We can do a silly one; we've got this bodybuilding dancer, so we'll grab that, copy the URL again, and I'm just going to refresh my layers just by clicking on this little "refresh" button in the timeline. Under my "Lottie Animation Placeholder 2" layer I'm going to click on the settings icon for that, and I'm just going to paste that Lottie file JSON in there and load that up, and I'm just going to make this come in after our other animations already gone out. If I just position that over here, and we'll scale that in, we may as well do the same animation; we'll scale that one in, and if we play that now, we'll play it through you can see the first slide animation scales in and out and they are the second one's in there as well. That's looking really good, I think that would make for a very nice animation advertising the Lottie files service, using Lottie file animations, I think that's cool. 

That's basically what it looks like, and then if we want to go ahead and export that, we just do it the same way that you always do in the Bannerify Figma plugin, and that's by going to the "Export to HTML" button. I'm not going to export the second one because I haven't really done much work on that, that's just a smaller version that I had set up, but I'm just going to export this one for now. I'm going to click on "Export to HTML", I'm going to infinitely loop all the banners, and I'm just going to save it as "HTML/CSS", you can obviously save it to other platforms; you've got "DoubleClick Studio", "Google Ads" and all that good stuff if you're using a certain platform, but today I'm just going to be doing HTML/CSS, very standard. I'm just going to click that "Export Banner" button and that's just exported our banner to HTML. I'm going to click "Download the .zip file", I'm just going to save that to my desktop, and if I go ahead and unzip that. I'm just going to double click on the zip file, double click on the exported folder, and then if I grab this index file and drop it into my browser, this is the HTML export. This is basically the production ready code that you want to add to your website or up upload to a different platform like a Google Ads if you exported it for that, but that's what it looks like. It's really nice, really smooth as you'd expect, and that's what that looks like there.

The other thing we can do is also export it out to other formats, too. If we wanted to export it from Figma to a GIF, WebM or MP4 video file we can do that as well. We just click on the "Export to GIF/Video" button, then we can click on the format that we want, and again this will export it out to that format, too. We're exporting the banner with our Lottie animations out from Figma to a video now, and I'm just going to do the same thing, I'm going to click on "Download your .zip file", save it to the desktop, I'm going to unzip that file, and then if we open that back up; I'm just going to click on the HTML file, and there we go. we've got our video. You can see if I show the controls, that's just a video playing now; we can go through that as you expect, and these can be really handy if you're creating ads for social media. If you're creating Facebook ads or Instagram ads, these video exports can be really handy as well. The Lottie files are supported in that; the only thing to note is that in the video exports at the moment, some of the different masking effects that some of the more advanced Lottie files use have some problems in the video side of things, so hopefully that gets resolved in a future version of the Lottie player, but at the moment sometimes you will get some issues if it's a really complex masking situation or things like that can sometimes be a bit strange in the video exports; just something to keep in mind for now, but the HTML exports will always look really nice just like this.

That's basically it, the other thing you can do if you want to apply a lot of Lottie animations to multiple layers; if you've got multiple Lottie animations that you want to add to different banners, you can do that in one go just by clicking on the layers that you want to apply the Lottie animation to. If we click on "Lottie Animation Placeholder 2" and the other "Lottie Animation Placeholder 2" layer, if you want to apply the same Lottie animation to those two in one go, all you need to do is go down to the "Media Embed" section down here, paste in a Lottie file URL. I'm just going to grab the one that we had up here and I'm going to apply that by pasting it down here, and you can select again if you want it to loop or not; I'm just going to leave it to loop, and then I'm just going to click on the "Apply Embed" button and that's basically going to apply that Lottie animation into the layers that you've selected. For example, this one here doesn't actually have one yet on the Lottie animation placeholder layer, so I can grab the other one from there that I had before; I'm going to copy that one and paste that onto the layer, and then I can basically copy and paste the animations as well. 

If I want to copy and paste my animation from the first Lottie file down to here I can do that just by clicking "copy" and "paste" and same thing for this layer, too. I'm going to copy that one and I'm going to paste it on the "Lottie Animation Placeholder" layer, too. Now if I play that back, you can see that we've got our animations the same from the first banner with the exact same timings, and that's just taken away a whole bunch of effort to duplicate those animations. Again, you can just go through if you've got a bunch of banners and you want to do this really quickly, you can actually just go up to here to the "Quick Select Layer" selection, click on the layer name that you want; as long as the layer names are named the same you can quickly do it from here, just click on the layer that you want, and it will select that layer across all of your banners, and then you can again apply that Lottie animation or animations in bulk or batches in one go.

That's basically it, as I said, it's very simple, you just jump into your settings panel, paste in the Lottie animation URL, as long as it's a valid Lottie animation. Again, you can upload these yourself if you create your own animation with After Effects for example, you can just go to the lottiefiles.com preview URL, which gets linked to from the banner Bannerify Figma plugin, and if you've got a local Lottie file that you already want to use, you can just browse for that upload it to here and then you'll get the URL that you can copy directly into the Bannerify Figma plugin and use your own Lottie animations as well. 

That'll do it for today; I hope you've enjoyed this Figma tutorial, if you've been wondering how to add Lottie animations into Figma or into your Figma banners and then export those out to production ready HTML or production ready MP4 videos and GIFs, this is probably the quickest way to do it, using the Bannerify Figma plugin. I hope that you have a good time with it if you want to do a bit of an experimentation with your team or with your own banner sets, now you've got this added flexibility for more complex animations, hopefully it's going to unlock a lot of creativity for you and your team going forward. As always, thank you for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: article
title: Figma content QA checklist
description: A content QA checklist for Figma files before copy goes live across product or marketing work.
datePublished: 2022-05-03T00:00:00.000Z
dateModified: 2022-05-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/figma-content-qa-checklist/
markdownUrl: https://www.hypermatic.com/articles/figma-content-qa-checklist.md
---

# Figma content QA checklist

A content QA checklist for Figma files before copy goes live across product or marketing work. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### CopyDoc

[CopyDoc](/copydoc/) is one of the more useful tools in this workflow. CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

### Commentful

[Commentful](/commentful/) is one of the more useful tools in this workflow. Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Bulk find and replace text in Figma
description: How to handle large-scale text changes in Figma without editing each frame one by one.
datePublished: 2022-04-16T00:00:00.000Z
dateModified: 2022-04-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-bulk-find-and-replace-text-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-bulk-find-and-replace-text-in-figma.md
---

# Bulk find and replace text in Figma

How to handle large-scale text changes in Figma without editing each frame one by one. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for bulk find and replace text in figma when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How CopyDoc fits into the process

CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

With CopyDoc, teams can usually:

- move text in and out of designs without manual copying
- handle localization and content updates with less risk
- keep content operations closer to the source design files

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [CopyDoc](/copydoc/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If copy updates, localization, or spreadsheet-driven content are the pain points, CopyDoc is the best place to begin. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: Manage UX writing in Figma
description: How to manage UX writing in Figma without turning every text update into manual design work.
datePublished: 2022-03-30T00:00:00.000Z
dateModified: 2022-03-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-manage-ux-writing-in-figma/
markdownUrl: https://www.hypermatic.com/articles/copydoc-manage-ux-writing-in-figma.md
---

# Manage UX writing in Figma

How to manage UX writing in Figma without turning every text update into manual design work. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for manage ux writing in figma when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How CopyDoc fits into the process

CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

With CopyDoc, teams can usually:

- move text in and out of designs without manual copying
- handle localization and content updates with less risk
- keep content operations closer to the source design files

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [CopyDoc](/copydoc/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If copy updates, localization, or spreadsheet-driven content are the pain points, CopyDoc is the best place to begin. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: The Startup Formerly Known as Figmatic
description: tl;dr — Figmatic has just rebranded to “Hypermatic” — everything else is still the same.
datePublished: 2022-03-27T00:00:00.000Z
dateModified: 2022-03-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/the-startup-formerly-known-as-figmatic/
markdownUrl: https://www.hypermatic.com/articles/the-startup-formerly-known-as-figmatic.md
---

# The Startup Formerly Known as Figmatic

>“Yo, last year was 'bout brandin', this one about <s>expandin'</s> re-brandin'” 

— <s>[Benny The Butcher](https://www.youtube.com/watch?v=ucMkV5ndFek), Burden of Proof</s>
— **Me**, for the last week

### tl;dr

After over 2 years of being known as “Figmatic”, we've just finished rebranding to <i>“Hypermatic”</i> (a caffeinated form of “automatic”) in 5 days.

It's a pretty boring story... we were nicely asked by Figma (the design tool that our plugins can be used with) to change our name to avoid any branding conflicts; which is all good, and makes sense to avoid any potential confusion.

<b>Nothing else has changed on our end</b> besides our name, domain, logo and a bit of an aesthetic website refresh. The sole mission to reduce the distance between design and production closer to zero remains unchanged.

If you'd like to torture yourself and learn more about how the rebrand actually came about from zero to finished in 5 days, feel free to read on below.

### Figmatic origin story

"Figmatic" was born as a play on words with the 1994 Nas album "[Illmatic](https://www.youtube.com/watch?v=oqVD2yQqH7M)", which my friends Scott and Marty came up with for their article "[Figmatic: Why Figma will be remembered as a genre-defining classic](https://medium.com/mass-thinks/figmatic-why-figma-will-be-remembered-as-a-genre-defining-classic-c6763cae7888)", which was based on an [underrated talk](https://www.youtube.com/watch?v=rokAQA5Takg) with the same name that they both gave at the DesignOps Melbourne meetup back in 2018.

When I decided to quit my full-time job back in 2019 and take the chance of going all-in on building Figma plugins, "Figmatic" was the obvious choice to me to describe what I wanted to work on, making certain workflows more automatic.

### Being kindly asked to rebrand

I was made aware via email that our "Figmatic" name and domain was in breach of Figma's own [brand guidelines](https://www.figma.com/using-the-figma-brand/), and we were kindly asked to change the business name and domain.

My initial reaction was surprise, as we've been publishing Figma plugins as "Figmatic" for over 2 years without any issues, and of course, didn't intend to cause any conflicts; but I very quickly realised that the only option was to change the name and domain of the business as soon as possible.

To give me some context, my friend Scott recommended season 2 of the [What Had Happened Was](https://podcasts.apple.com/au/podcast/what-had-happened-was/id1520209791) podcast, which covers the story of [El-P](https://www.youtube.com/watch?v=2Zn5o-gxtFA) (one half of the [Run The Jewels](https://www.youtube.com/watch?v=G-S9mtYowPY) hip-hop duo, along with [Killer Mike](https://www.youtube.com/watch?v=lNsAfGDkUtk)), where El-P also had some issues with his music label name.

This podcast was kind of a consistent backdrop during the course of the week whenever working on the rebrand (which I instantly became obsessed with taking care of as quickly as possible) took a backseat to minor inconveniences (eg. eating dinner) between work hours.

### Rebranding in 5 days

Knowing that I needed to act fairly quickly on this, I read a couple of books about coming up with new brand names, and they basically said that if you have a _really_ good team, the renaming process could even be as quick as 5 weeks. 

5 _weeks_ clearly wasn't an option. I'm a big fan of the book [Zero to One](https://www.amazon.com/Zero-One-Notes-Startups-Future/dp/0804139296) by Peter Thiel, and one of the many great questions asked in that book is:

>If you have a 10-year plan and know how to get there, you have to ask why can't you do this in 6 months?

I thought that if it was supposed to take 5 weeks just to come up with a new business name, why couldn't you not only pick a new name, but _also_ rebrand the visuals and update everything everything else that comes along with it in 5 _days_ (instead of 5 _weeks_)?

So that's how long it ended up taking, and it looked something like this:

#### Day 1

- Have a brief existential crisis, then decide to take action.
- Read a couple of books about coming up with new brand names
- Create a creative brief (taken from [Hello, My Name Is Awesome](https://www.amazon.com.au/Hello-My-Name-Awesome-Create/dp/1523099984/)). 
- Stay up until midnight coming up with some initial ideas.

#### Day 2

- Continue coming up with more more ideas for the new name based on the creative brief.
- Write a few Node scripts to mash a bunch of words together into a massive list with different combinations.
- Run that massive list through a bulk domain lookup tool to figure out which .com domains on the list other people had listed for sale. 
- Narrow the list down to "Hypermatic" as the new business name later that night.
- Purchase the .com domain from someone who already owned it.
- Reserve some social/website "@" handles were available for the new name.

#### Day 3

- Start designing a new logo, aesthetics, copy, colours, assets etc.
- Work until later that night, lots of creative exploration while playing random mix of Japanese [City Pop](https://www.youtube.com/watch?v=7aoCRCr7q3M) songs, [BABYMETAL](https://www.youtube.com/watch?v=cK3NMZAUKGw) albums, and some other old school [90s hip-hop](https://www.youtube.com/watch?v=q_cJ43-StJ0) sets in the background. 

#### Day 4

- Finalize the new logo and visual branding.
- Start refactoring code.

#### Day 5

- Redesign/refresh the website in the browser using HTML/CSS.
- Swap in any updated brand, colours, logos, type, copy changes.
- Prepare as much as technically possible for the migration.

### Flicking the (many) switches today

After everything above had been prepared, the bottleneck was waiting for the new domain to be transferred over, and then propagated to the new DNS.

Once everything had been propegated and was ready to roll, all of Sunday March 27th, 2022 was spent flicking many switches that needed to be pulled to migrate over this website, the documentation site, email accounts, Figma account, Twitter account (etc) to the new name.

### Figmatic is dead, long live Hypermatic

Now that Figmatic is ether and the rebrand to Hypermatic is finished, it's time to get back to work on getting back to future.

>“Ayo, the brother's Stillmatic. I crawled up out of that grave, wiping the dirt, cleaning my shirt. They thought I'll make another Illmatic, but it's always forward I'm moving never backwards stupid, here's another classic.”

— [Stillmatic (The Intro)](https://www.youtube.com/watch?v=oeQzYpxcrR4), Nas

Please feel free to send an email to my new address at [adam@hypermatic.com](mailto:adam@hypermatic.com) if you have any questions about the rebrand.

---

---
type: tutorial
title: How to easily localize and translate any Figma designs using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-03-26T00:00:00.000Z
dateModified: 2022-03-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-easily-localize-and-translate-any-figma-designs-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-easily-localize-and-translate-any-figma-designs-using-copy-doc.md
---

# How to easily localize and translate any Figma designs using CopyDoc

#### Video Transcript

Today I'm going to be showing you how to easily localize your Figma designs and translate them into multiple languages just using a simple spreadsheet.

To get started we're just going to jump into the Figma Community and search for a Figma plugin called CopyDoc and if you go to the "Plugins" tab you'll see "CopyDoc" pop up; just go ahead and click on the "Install" button on the right hand side, and then you'll be ready to go.

I'm just jumping back into my Figma file now, and today I'm just going to be translating a single Figma frame. I just want to translate this screen of my "Movies" app design. To run the Figma plugin, we just right click anywhere, go down to "Plugins" and then click on the "CopyDoc" Figma plugin, and that's just going to fire up the Figma plugin that we just installed a moment ago. Once that runs, all we need to do is head down to this option called "Localize Figma Frames", and this is going to allow us to export and import translations from an Excel spreadsheet file.

To get started, all we have to do is click on this "Localize Frames" button, and that's going to load up all of the frames on your current Figma page. As I said, I only have one frame on this page, if you had more you would see more pop-up; and you could select which frames you want to export for localization, but today I'm just going to be exporting one. Now that we've opened up this feature, all we need to do is select the frame we want and add some locales to. I'm just going to add a few, you can just start typing the locale into the search field here, so I might do French, Japanese and German, for example; and then all you need to do is click on the "Export to Excel Spreadsheet" button. I'm going to click on that, and that's going to export my frame with placeholders for these locales. I'm just going to save that to my desktop, click "Save" and then what I can do is just jump back to my desktop, open up the zip file and then open up the exported Excel spreadsheet file in Excel or another spreadsheet tool that you prefer. 

Today I'm just going to be using Microsoft Excel. I'll just zoom in a little bit so you can see what that looks like, and you can see here that the Excel file that's been exported from Figma contains all of the text that's in our Figma design. It's being sorted visually by where it appears in the design; if we jump back into our Figma file and then compare it to the spreadsheet, you can see "Melbourne, Australia" is at the top, then "Coming Soon", then "13", "14", "Action", "Sci-Fi Action", these are the labels, here the reviews; it's basically going from top left to bottom right, so that's how the text is being ordered. 

In order to translate this into multiple languages, you can see that we've got our placeholder translations here; we've got French, Japanese and German. These are the placeholder locales that we included in the Figma plugin earlier, and all you need to do now is basically go through those rows and those columns and add the translations for each of those languages. I've prepared a spreadsheet earlier just to speed up the process for this video; you can see here in the exact same spreadsheet that I exported earlier with those same locales I've gone through and I've translated all of the text from the original design into these three different locales. You'll notice that some of these are missing, so I've got a few different fields in different languages that haven't been translated; the reason for that is that the translation version and the original version are basically the same, so that's just something worth worth noting if you do leave any of the column items blank those will essentially just be unchanged in the design. We'll see what that looks like in just a moment.

Now that I've got my finalized translation file; once you've gone through yours and translated all these different columns, to then import that back into Figma, all we need to do is jump back into our Figma plugin, and if you if you've already closed it just jump back into the "Localize Frames" option and down here you'll see a little drag and drop area for your Excel file. All I'm going to do is I'm going to jump back to my desktop, I'm going to grab the pre-translated file that I completed earlier, and I'm going to drag and drop that Excel file directly into the Figma plugin down here; I'm going to let go of that now, and that's going to load in the spreadsheet. You can see here that it's found three different locales for this "Movies" frame; if you had more frames, again, you could select which ones you want to import, but today I've only got one. I'm going to leave that checked, and I'm just going to click on the "Localize Selected Frames" button; I'm going to click that now, and what this is going to do is it's actually going to load in those translations from the spreadsheet directly into Figma. 

It's telling me that it has just imported one translation, so I'm going to go ahead and close off the Figma plugin now because we don't really need it, and I'm just going to show you what that's actually gone ahead and done. The easiest overview here is you can see that it's imported or created four different Figma frames, and these frames have been created on a totally new page. What it's done is it's found the translated frame which was called "Movies", it's created a brand new Figma page for that frame, and you can see here it's called the "Translations" frame and got a timestamp of when that was created. What it's done is it's copied or cloned this original frame into a brand new page; you can see here this is the copy of the original frame, so that's our original language and then next to that we've got all of the locales that we imported from the spreadsheet. You can see we've got our French one, we've got our Japanese one, and we've got our German one. If I zoom in a bit more, you can see that these have all been translated based on what we imported in the spreadsheet; you can see down here the menu items have been renamed, you can see that we've got different titles with different names, and that's basically all been translated as you'd expect. That's what it looks like, it's essentially a one-click process to import those translations and localizations in Figma. 

It's worth noting sometimes with the Japanese characters the font for some reason doesn't load straight away in Figma; if you double click on the layers where it's not showing up, that will fix it. Usually it doesn't happen, but that's just something to keep in mind with that specific language, it seems to be an issue with Figma. That's fine, but you can see here that the German translation and French translation are all looking really good. That's a really quick way of translating your FIgma app design or your Figma website designs or any Figma designs really; any copy that you have in Figma into multiple localizations and language translations. That way you don't have to go through and manually copy/paste all these frames, copy/paste all the text into the frames and worry about all the positioning and things like that, you can just import it into Figma directly from the spreadsheet. 

You can use this for anything really, as I mentioned, you could use it for a banner campaign, social media campaigns, emails, websites; anything really that requires localization, which is many things when it comes to design. The CopyDoc plugin is very agnostic to the type of design. you can essentially just export any Figma frames that you like to the spreadsheet, translate them, import them back into Figma and keep going like that.

The other thing I should mention is if we just re-run the Figma plugin again and jump back to our app, if you did want to make changes to that spreadsheet and re-import it, you can totally do that. You just click on the "Localize Frames" option again, if we pretend that this Excel sheet has been updated since with new translations, and we drag that into the Figma plugin once more; again, what it's going to do is load that up, just click on "Localize Selected Frames", and you'll see here on the left hand side that it's created a brand new page. Again, it hasn't messed around with your existing page that it created earlier, it creates a brand new one, and that way it doesn't overwrite any work that you might have done in the translation before. If this one is more up to date, you can just get rid of the old one if you want, or keep it there as an archive; it's totally up to you.

That's it, that's the whole process; you can apply this localization process to your own Figma designs and translations, or anything that you've been wanting to localize in Figma. This Figma plugin is going to hopefully make that a whole bunch easier for you and save a heap of time and effort. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to export and re-import selected text layers in Figma using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-03-25T00:00:00.000Z
dateModified: 2022-03-25T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-and-re-import-selected-text-layers-in-figma-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-and-re-import-selected-text-layers-in-figma-using-copy-doc.md
---

# How to export and re-import selected text layers in Figma using CopyDoc

#### Video Transcript

Today I'm going to be showing you how to easily export any selected text layers from Figma out to a spreadsheet file, which we can then edit and re-import back into Figma to make a whole bunch of text changes really easily and automatically.

To get started we're just going to jump into the Figma Community and search for the word "CopyDoc" and under the "Plugins" tab you'll see CopyDoc come up, and all you need to do is click on the "Install" button on the right-hand side and we'll be ready to go.

You can swap back into your Figma file at this point, and it can be any Figma file with any content in it. I'm just going to go ahead and run the Figma plugin that we just installed by right clicking anywhere, going down to "Plugins, clicking on "CopyDoc", and that's just going to fire up the Figma plugin we just installed a moment ago.

For today's Figma tutorial I'm only going to be focusing on this bottom feature called "Quick Export Selected Text Layers", and this feature differs from another feature that I've covered in other Figma tutorials which is this feature up here called "Export Figma Text Layers", and this feature is different because it centers around entire Figma frames; if you want to export a whole bunch of Figma frames out to a file and make changes to them and re-import them in bulk, that's a really good option, but if you only need to export certain parts of a design or certain parts of a single frame, then this option that we're covering today is going to be an option that's much more suited to what you're after.

To get started, all we need to do is find the part of the design that we want to export, so in this case I'm going to export this "Cast" frame. This frame contains, as we can see on the left here a bunch of text layers, I've got a heading layer, this other layer here, and then a bunch of nested text layers, too. By clicking on the frame that wraps around all those FIgma layers, what the Figma plugin is doing is it's showing us that we've got six text layers found, so we can see one, two, three, four, five, six. 

What we can do is export those specific text layers quite easily just by clicking on this "Quick Export" button. I'm going to do that now, and you can see here it's given us a list of the text phrase text layers that have been selected, and the only thing you need to do is select what format you want to export it to. We've got CSV, JSON, XLIFF, and you can go into some more advanced options here too, but I'm just going to keep it simple with CSV today. Then I'm just going to select the ordering option; this is the order of the text that gets exported to the CSV. At the moment, I'm just keeping it as sorting the text visually based on where it is in the design. For example, it'll sort it from top left to bottom right; we should see "Cast", "See all", "Robert Downey Jr." and so on. I'm just going to leave it as that, and then I'm going to click on the "Quick Export CSV" button.

Okay, it's generated the CSV. I'm just going to click on "Download CSV Export", it's very quick, as you can see. I'm just going to save it to my desktop and then I'm going to jump into my desktop and open up this file. I'm just going to use the default "Numbers" app that comes with Mac. You can use Excel, you can use Google Sheets, anything that you like you can use, but I'm just going to keep it really simple today just so you can see what I'm doing here. As we saw in the design, it's exported it in the order that we expected; that's exactly how we expected the order to come out. You can see we've got a few different columns here; the "id" column you don't want to touch, that's what's going to map these layers back into Figma in a moment when we re-import it. The "frame" is just telling us which Figma frame that it's been exported from; in this case it's the "Movie Details" frame. The "layer_name" is the layer name of the text layer, you can change that layer name if you like, and that will get updated also in the Figma text layers or Figma layers panel. Finally, we have the "figma_text" column; this is the actual text content in each of these layers, so that's the one we're going to be focusing on today. All I'm going to do is I'm going to update this; I'm going to say "Actors Featured", so I'm going to change that "Cast" one to "Actors Featured". I can change "See all" to "See more", and I think all of these names are correct, so I'm going to leave those as is. Then all I'm going to do is I'm going to click on file export to CSV I'm going to select CSV select unicode utf-8 and go next and then I'm just going to save it as updated on my desktop.

I'm going to close that "Numbers" app off now. I'm going to jump back into my CopyDoc Figma plugin, I'm going to close off that download panel, and this time I'm going to click on the "Import Text Layers" option; I'm going to click on that little button here and this is giving us the chance to drag in a file that we've updated that was originally exported from the CopyDoc Figma plugin. What I'm going to do is I'm going to grab that updated CSV that we just changed, I'm going to drag that in to the Figma plugin into this little drag and drop window, and you can see here that it's loaded up the CSV file and it's telling us that it's detected two text changes since we exported the file. You can see that it's detected we've changed "Cast" to "Actors Featured" and "See all" to "See more". I'm happy with both of those, but if you only want to import certain ones you just uncheck any of the ones you don't want to update. If you're unsure of where the text is being changed, all you need to do is click on this little text icon, and that will immediately select it and zoom into it on the Figma canvas; if you're a bit unsure, that's just a really good way to double check.

In my case, I'm happy with these changes, so I'm just going to go ahead and click on this "Update Figma Text Layers" button here. I'm going to click that now, and you can see here that it says it's updated two Figma text layers, and as we'd expect, it's made those two changes that we made in our spreadsheet just a minute ago. As you can see, none of the other text has been updated, that's all been left alone; just these two changes have been made. That's a really nice way of updating certain components or certain layers within a larger frame or within a larger context, and this can be really useful for things like microcopy or for example these buttons, you could export those or if there's just a list within a frame like these cinemas for example, exporting that selection is a really quick way to send that to your copywriter, or update it yourself, or update or send it to someone who doesn't have a Figma account, and then they can basically send it back to you once they're happy with the text changes while you continue working on the design, and then you can just re-import that spreadsheet file directly into Figma via the CopyDoc Figma plugin.

That's basically it for today; you can you can use this example in your own designs, you can select multiple layers, so if you wanted to select both of these layers we can we can easily do that. I'll just quickly show you what that looks like; you can see here that we've got both of these selected, and now "Storyline" is also showing up. I forgot to mention that this preview here will also reflect your option, so if you change the ordering option of the text, for example, if we changed it to "Alphabetical", so we'll go from "A to Z", and you can see here as a preview it's showing you what that's going to look like in the spreadsheet. I forgot to mention that before, but that's a bit of a preview of how it's going to look when it actually gets exported. If we quickly export that CSV again, download the export to our desktop, save that, and once again open that with the "Numbers" app, or whatever spreadsheet software you want to use, you can see here this time it's exported those two extra layers; the "Storyline" layer and the "Description", and because we selected the "Alphabetical" option, it's now sorting the Figma text content from "A to Z" in alphabetical order. That's just an example of how you can easily change that text order when you do export the spreadsheet.

Alright, I think we'll leave it there for today; I just wanted to give you a really quick example of this new quick export option. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to translate HTML email designs with localization in Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-03-14T00:00:00.000Z
dateModified: 2022-03-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-translate-html-email-designs-with-localization-in-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-translate-html-email-designs-with-localization-in-figma-using-emailify.md
---

# How to translate HTML email designs with localization in Figma using Emailify

#### Video Transcript

Today I'm going to be showing you how to translate and localize your email designs from Figma into HTML emails using the Emailify Figma plugin.

The first thing we need to do is just go to the Figma Community and search for the term "Emailify", and under the "Plugins" tab you'll see Emailify pop up; just go ahead and click on the "Install" button and then you'll be ready to go. I'm just going to jump back into my Figma file, I'm going to right click anywhere, go down to "Plugins" and click on "Emailify", and that's just going to run the Figma plugin that we just installed. 

I've already got an email designed using Emailify; I've used all these components here just to create this simple email design. I'm not going to be going through how to design the emails in this Figma tutorial, if you're interested in that we have another Figma tutorial on our YouTube channel that I'd recommend checking out first, but otherwise I'm just going to assume that you've already got an email design ready to go. 

In my case, this is my original email that I designed using the components from the Emailify Figma plugin, and what I've done is I've just copied this entire frame onto a brand new page just called "Copied". You can see here that it's pasted the frame and all of the children are now instances; these are instances of the original Figma components, and that's going to come in handy later, because it means if we translate this frame here, which we're going to do in a moment, it means we can go back to our original frame with these components and we can actually change the styles of all these different components and have those changes roll out across all of our translated emails as well. 

To get started with the translation and localization process of the email designs, all we need to do is click on this "Localize" button in the Figma plugin header; I've just clicked on that, and you can see here I've got a few locales that I've already saved from the last time that I ran the Figma plugin. You can go ahead and add your own, so you can autocomplete this list if you wanted to add a "English (Australia)" version for some slang translations you could do that, you can add basically any translation that you want that comes in this pre pre-filled list. You can also add your own custom ones, so you can say "Custom Locale", or if you have like a specific variant, you can say "Variant 2", or something like that; and these will all get included in an Excel spreadsheet that we're going to export in a moment. 

Today, I'm just going to leave it as those original 4, and I'm going to make sure that my email is selected; if you have multiple emails on your page you can export multiple into multiple locales, but for today I'm just going to be exporting this one to these four locales. All you need to do is click on the "Export to Excel Spreadsheet" button, so I'm going to do that now and this is going to export all of the text content from our design in Figma out to an Excel spreadsheet file. I've just exported that to my desktop, and I'm going to click on that zip file and unzip it, and you can see here it's exported a Excel spreadsheet with the name of my frame. 

I'm just going to go ahead and open that up with Excel; you could open this up in Google Sheets or a different program if you wanted to as well, but for today I'm just going to be using Excel, and that's just opening up now. I also have a pre-translated file, so we can compare the two and if we have a look here at the pre-translated one, basically what I've done is I've gone through and I've translated all of these locales. When the locals get exported, you can basically check what those look like here, so if we go back to our original one this is what the original export looks like; the original export contains all of the text layers from our email and that's under the "figma_text" column, and then it also exports blank columns for any locales that you've selected; in this case it's "French", "German", "Japanese" and "Spanish". These are all empty, so it's up to you to basically go through and translate those into these different columns. You can just leave those first two columns alone, don't change anything in there, don't delete them, as we'll need these in there when we re-import these translations back into Figma in a moment.

I'm just going to close off the original one and open up my pre-translated one; this is the Excel file that I went through earlier, exactly the same export process, except I've now gone ahead and translated all of these columns into the different languages. They're all pre-populated now based on some work I've done earlier, you'll notice I've also left the bottom two rows empty, and that's because I don't want this address to be translated, I just want to leave it as it is. Basically, any rows that you leave empty in any of these locale translation columns, those will just automatically be left alone as the original Figma text here, so you can just fall back to those if you don't want to translate any layers. 

Okay, now that I've translated my email text in the Excel spreadsheet here, what I'm going to do is I'm going to jump back into Figma and you'll notice down here in the bottom section of the "Localize" feature, there's a "click or drag and drop" box; you can go ahead and drop in your updated Excel spreadsheet file. I'm just going to grab that file, drag and drop it from my desktop into the Figma plugin, that's going to load up the spreadsheet and it's going to let if it finds any emails that have been translated, and how many locales have been found. In our case, we only we only exported one email; it's found one email in the spreadsheet with four different translations, and so what we can do is we can just confirm we want to import that by keeping it checked, and then all you need to do is click on this "Localize Selected Frames" button. I'm going to do that now, and that's just loaded up all of the translations from our Excel spreadsheet back into Figma. 

Let's run through what that's just done together; if you remember, we had our instance that we exported to the spreadsheet, we opened that spreadsheet, we edited it and added some translations in there. What the Figma plugin has done is it's read that Excel spreadsheet, and it's automatically duplicated those frames into translated versions localized versions with the text layers that we specified in that spreadsheet. You can see here what it's done is it's created a brand new page, it hasn't modified the original design, it's just created a copy of the frame and then created another copy of each frame with those translations that you specified in the spreadsheet. It's got this little translations box in the page name, and then it's adding in a timestamp to tell you when that page was imported. 

Then we've got our designs right here; those are automatically added for us, and you can see that all of the text has been translated directly as we specified in the Excel spreadsheet. Because we're using auto layout on basically all these design elements, the button widths and the text widths and heights and things like that automatically fit to re-adjust with that updated copy. The other neat thing is that you'll notice inside of this layer here, which is actually an image layer, because we originally added a text layer inside of the image; if we jump back to our original component you can see in here we've got a text layer that's just kind of floating around inside of that frame. We can move that around, and that will update in the components over here as well because they're instances, but those also get updated because they're just text layers, so that even though they get exported as images, the text inside of the images also get updated, which is really cool. 

As I mentioned, because these are instances of that original component, so if we go back to our original design with the component layers; if I wanted to change these buttons, for example, I can do that. I can just select that fill, select a new fill, I can change the text color, and if I now swap back into my translations, you'll see here that all of the translations have also been reflected with that design update, because these are instances of that component. It's a really cool way to roll out not only translation changes, but design changes to a bunch of translations after you've already imported the localizations into Figma. 

If you decide you want to update those translations again, you can go ahead and export that page again or you can just update the file you originally exported and just drag that back in. If we drag it back in, I'm just going to drag the same file back in, and basically that's found the same frame. I'm just going to click "Localize" again, and you can see here what it's done is it hasn't modified our original translation page, it's just created a brand new page with a new timestamp with brand new instances, too. You could either delete that page if you don't need it anymore or you can just keep them both, and keep them as versioned translations if you prefer to do that as well. The cool thing about doing it this way is you can actually then tweak the design if you need to in Figma; so we can basically override these per translation if we wanted to. You could have different color buttons for different translations or different things like that, you could totally do as instance overrides. 

The best part of this process really, at the end of the day, is now that we've translated these into multiple localized Emailify frames, these are basically production ready because they're based off of our original Emailify design. What we can do is we can now export these localized Figma designs into real HTML, production ready HTML, and all we need to do to make that happen is just click on the "Export HTML" button in the Emailify header, and then just select all of the emails that you want to export. I'm just going to export all of them, and then what I'm going to do is just select the "HTML" option. If you're using Klaviyo or MailChimp, you can select a different platform, but I'm just going to keep it simple today and keep it on "HTML". Then I'm going to click on the "Export to HTML" button; I've just clicked that and this is now going to go through and export those five emails. There are four translated emails and the copy of the original language email that was also automatically copied into the new page when we imported that spreadsheet.

That's just finished up, I'm just going to click on the "Download your .zip file" button and save that to my desktop, jump back to my desktop and unzip that exported file, and inside of this folder you'll see that we've got our translated emails along with all of their images. We can see these all at once just by opening up a browser and dropping in the "previews.html" file, and that basically lets us scroll through all of the emails that we just exported. You can see we've got all of our locales, we've got our specific colors for those different instance overrides that we added. You can see that the images also have the translated text baked into them, even though this is still real text, and again different variant, different translation; that's the German localization with the different color button, and then the rest are just the original style, but still in rich text, and the image baked in as well. 

Finally, you'll notice that because we left the bottom two rows out of the spreadsheet and didn't update those in any of the locale columns, that's just left it as the original text. We just got our address left in there as per the original version, so that's just worth noting as well if you want to exclude any text content, just leave it blank and that will automatically fall back when it translates the text layers. That's basically it, you could now take these emails, these are production ready translations, ready to go. You can individually see them all here and do whatever you need to with them, basically these are all ready to go.

Now we're done with the HTML previews I'll just close that off, jump back into Figma, and the last thing I was just going to mention is if you need to re-export them just click on this "Go back" button and that will bring up the email frames option again, where you can select different frames and export those into different locales as many times as you want. That's basically it; I just wanted to run through the whole process end to end, so there wasn't any confusion with how it works and just give you a real good demo of how you can use this in combination with the instances and the original component to create a really nice localization process directly in Figma, or translation process, if you're exporting HTML emails and need to do so in multiple languages, multiple translations; the "Localize" feature that's just dropped in the Emailify Figma plugin is probably going to be your best bet for a really seamless localization process inside of Figma before you export your emails from Figma to HTML.
 
Once again, thank you as always for watching, and I hope if you've been trying to streamline your localization process with your email designs, as I know a lot of you have, I hope that this new feature really helps out with your localization/translation workflow in Figma, and removes some of those barriers that I know a lot of people have been running into with trying to manage those different localized versions of the emails. Until next time, thank you once again for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: article
title: Figma copy review workflow
description: A practical copy review workflow in Figma for teams that need faster feedback and cleaner text updates.
datePublished: 2022-03-13T00:00:00.000Z
dateModified: 2022-03-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/figma-copy-review-workflow/
markdownUrl: https://www.hypermatic.com/articles/figma-copy-review-workflow.md
---

# Figma copy review workflow

A practical copy review workflow in Figma for teams that need faster feedback and cleaner text updates. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### CopyDoc

[CopyDoc](/copydoc/) is one of the more useful tools in this workflow. CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

### Commentful

[Commentful](/commentful/) is one of the more useful tools in this workflow. Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: tutorial
title: How to get comments and feedback without a Figma account using Commentful
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-03-08T00:00:00.000Z
dateModified: 2022-03-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-get-comments-and-feedback-without-a-figma-account-using-commentful/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-get-comments-and-feedback-without-a-figma-account-using-commentful.md
---

# How to get comments and feedback without a Figma account using Commentful

#### Video Transcript

Today I'm going to be showing you how to gather external comments and feedback from clients and stakeholders without them needing a Figma account, directly into your Figma designs.

We're going to be doing this by using a new Figma plugin called Commentful. To get started, we'll just go to the Figma Community, search for the word "Commentful" and then under the "Plugins" tab you'll see Commentful pop-up. Just go ahead and click on the "Install" button and then you'll be ready to go.

I'm just jumping back into my designs now and to run the Figma plugin we just right click anywhere, go down to "Plugins", click on "Commentful" and that'll fire up the Figma plugin that we just installed a moment ago. 

If it's the first time you're running the Figma plugin in the file you'll just need to click on this "Connect To Figma File" button and jump into there; you'll get a couple of instructions on how to get your Figma API token. Just go to your settings page in Figma, go down to the API tokens, paste that in there and click on "Save Token". Then in your current file you just want to go up to the "Share" button in the header, click on that, then click on "Copy link" and paste that into the text box and click "Save URL" and that's just going to connect up your Figma file to the Commentful Figma plugin. 

I've got another Figma tutorial on our YouTube channel which goes through all of the ways that you can organize your native Figma comments, this is more for internal Figma feedback with you and your team, but for today we're going to be looking at a different feature, which is under the "Reviews" tab. If you click on the "Reviews" tab in the Commentful Figma plugin; you basically want to jump into that and under the "Reviews" tab, this is where you're going to be able to create review links that you can send to your customers or stakeholders and they'll be able to leave you Figma comments, text feedback, and image feedback without them needing to have a Figma account. Then you can basically see all the feedback coming straight through into the Figma plugin and action that automatically in Figma.

To get started, all we need to do is click on the "Create New Review" button and that's just going to open up this little panel which will reveal all of the frames that are on your current Figma page. You can order these by either dragging and dropping them in the list or you can just quickly order them by column or row or layer name; in this case I'm going to sort by left to right in columns, so that's just going to sort it by the way we see it on the Figma page. Then you just select the frames that you want to include in the review, so I'm just going to include these three to start with, and I'm going to say let's review the "App Profile Screens", I'm going to call it that and click the "Create New Review URL" button and this is going to go ahead and up upload the three frames that we just selected in the order that we selected them, and then it's going to give us a link that we can share with our clients and stakeholders to review.

That's finished now, and we can optionally personalize the URL if we know the name of the person that we want to be reviewing the link. In this case I'll just put my name in there, and I'm going to click on the "Passwordless URL", so this link doesn't need a password but you can also send a URL with a password if you want to do that instead. I've just copied that URL and I'm going to paste it into my browser and you'll see it load up with the designs that we just selected in Figma. I've got my three frames here and they're basically just a snapshot of the Figma frames from that moment in time. If you were to update your Figma file at the moment, like if you just change some of these text layers or images or moved anything around, that would not affect the uploaded images on this link. The review is looking at the link at the time that you uploaded it rather than a live Figma version that's a work in progress.

There's a few ways that a stakeholder can leave feedback; the first is just generic feedback, exactly the same as you would see in the native Figma comments. If they click anywhere, they can click on this logo and say they want to "make that bigger", they can do that, they can add formatting, they can add emojis, they can add links all that good stuff, and then they can just submit those comments. You can see here that's been left by me and it's been created at this time, and that's what the comment looks like. 

More importantly, we can actually now jump back into our Figma file and you'll see the new review pop up there. If we click on the review, I can see that the comment that I just left has automatically come through to the Commentful Figma plugin itself, and I can jump to that comment location just by clicking on the pin here, and you can see it's referring to this logo on the "Detail Current Bid" frame. That's just a really easy way to jump to it, so I could action that feedback in the file and then I could check it off in the feedback reviews page, and then I would know that's basically done, so you can close that off and you can see what the progress is for any given review.

We're going to go ahead and leave some more review feedback, and this time instead of leaving comments, we're going to click on this "Request Text Updates" button in the top of the page in the review link. What this does is it switches it into a mode where the reviewer can actually leave specific text feedback on real Figma text layers that correspond to your Figma file. For example, I could give some feedback on this follow count, so I could change that from "150" to "2000" or something like that, change that, I can change this one to "9000", and you can just leave any feedback that you want. If this needs to have an "http" prefix, I can do that, I can add some exclamation points, I can remove text if I need to and submit that as a change request. I can see what that looks like in here, so I get a clear difference of what the original content was and what the requested change looks like, so I can check all those out inside of the app.

More importantly, I get all of that content fed directly back into my Figma file instantly; I don't need to wait for them to finish all their feedback to be able to see it, I get all of this coming into my Figma file in real-time, and I can jump around and see exactly where that content has been left, where the feedback's been left. The coolest part is I don't even need to manually update this, I can just click on this button that says "Update in Figma"; if I click on that, that will automatically make the text changes that have been requested for me. You can see here I'm just clicking on these buttons and it's automatically checking off the task for me at the same time. I'm just going to do the last one now, so I'm going to click "Update in Figma" and you can see here it's made that change. You can see before it used to have that suffix on the end, it didn't used to have the "https", that's now been added in, so all of this feedback's just been actioned within a few seconds basically without me having to manually figure out where the text changes were and manually update them on my Figma layers, so you can see all the feedback's been completed there. 

Along with text changes your reviewers can also leave image update feedback. If you click on the "Request Image Updates" tab at the top this will also highlight any layers that contain images, so that's bitmap images in your Figma fills, Figma image fills and that means that they can actually leave specific image feedback on certain Figma layers. If I knew that this image here needed to be updated, I can just click on that, and from my computer I can just drag and drop an image. I'm just going to drag this image, because I want to update the avatar, and that's just going to upload the image to the review link. It's telling me that it's been uploaded, and once again I can see here if I click on this feedback pin that the new feedback or the image requested change has been set to this.

Again, in my Figma file I can see that pop up instantly as well. I can jump to that see exactly where the image change was and once again, more importantly, I can just update that instantly in Figma. If I click on "Update in Figma", that's going to download the image and automatically swap it out for me, I didn't need to save it to my desktop, I didn't need to do anything like that; I didn't need to manually drag it into my Figma image layers, I just automatically click "Update in Figma" and that feedback will come through into the design. It adds the image as an extra layer fill, so if you were worried that it was replacing the original image, don't worry it's still there; if you wanted to see that you can just hide that top image and the original layer is still underneath, and it just adds it at the top.

You can basically do whatever you want with that image now, so if you do need to move it around or change the way that it feels you can do that. You could change it if you need to. That's what that looks like there, and again, you can just you can just go through and do this for for any image you need to; you can add more feedback. I can drop some more images in there for this other little avatar here, and once again, we see it instantly come through into Figma. If I know that I want to update that, I can check out where that's been left, and I can decide if I want to accept it. In this case I'm just going to update in Figma againm and there we go, we've got our brand new image that's been requested.

That's what that looks like, and that's basically it. You can send these around as many times as you want; you can also hide the completed feedback, so if you've already checked off these and you want to tidy up this list, you can check the "Hide Completed Feedback" toggle and that will basically just hide all of the client feedback that's already been done, and if any new Figma comments or feedback comes through, so if we get some button feedback that's not been completed yet, all of our hidden feedback is hidden, but all of the new feedback will still show up. It just tidies up that list a little bit more in a way that you don't have to sort through it visually.

The other thing that you can do is export the Figma comments and Figma feedback to a CSV file. If you want to export this to a different program, or just look at it all in a spreadsheet, or print it out even for some reason, you can do that. You just click on the "Export Feedback" button and that will automatically generate a CSV for you, so if we save that to our desktop and open that up that, we'll automatically have basically all the feedback that we've just been collecting from our stakeholder or from our client that we could see in here. I'll just open that CSV, and I'll just show all the completed ones again, just so we can compare, and you can see here it's basically got all of our feedback the same as what we can see in the Figma plugin, but it's just in a spreadsheet. We can see what the feedback type is, if it's a comment, an image change or a text change, what the pin number was, what the comment was, what that feedback was, what the requested image looks like, and what the text changes look like.

It's got the previous text and what that text was requested to be updated to, and then you can see the completed status. when it was created. when it was last updated. and also a link to the pin itself in the web app, so you can you can jump in there as well. That's what the CSV export looks like with your feedback comments from stakeholders, so that might be useful if you're wanting it in that format as well.

In terms of the web link you can delete feedback, too, if you accidentally made a mistake or the feedback no longer applies. You can remove that just by clicking on the "Delete Feedback" button and then clicking "Ok" to confirm, and that will basically remove that feedback from not only the web link, but also from your plugin Figma comment list as well; that's just if you need to delete any feedback. Alright, so that's currently all the ways you can leave client feedback and Figma comments without a Figma account using the "Reviews" web link for Commentful. You've got the native Figma-like comments, text update change requests and image update requests. there will probably be more added over time, but at the moment that's what it looks like.

Hopefully that's a really good start if you've been wanting to gather client feedback or Figma comments without inviting them into the Figma file or making them sign up for a Figma account, or using a completely different third-party service that you need to manually export your Figma designs from and into, and manage those links and then somehow get that feedback back into Figma; this is just a much tighter feedback loop that integrates directly with the Figma layers themselves and directly with your Figma file itself, which is where all the feedback is going to be actioned. To me, it makes sense that you would try and get that as close as possible to the layers.

If you've been wanting to streamline your feedback process, your external feedback process or internal feedback process, feel free to give the Commentful Figma plugin a try and hopefully it improves your workflow and just really streamlines things with you and your customers, or clients, or internal stakeholders and gives them an easy way to leave feedback or Figma comments in your Figma designs without a Figma account, or without them having to see your real-time Figma designs if you don't want them to. That's going to be all for today; I hope you enjoyed the tutorial, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to supercharge and organize your Figma comments using Commentful
description: Follow along with this step by step Figma tutorial video
datePublished: 2022-03-06T00:00:00.000Z
dateModified: 2022-03-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-supercharge-and-organize-your-figma-comments-using-commentful/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-supercharge-and-organize-your-figma-comments-using-commentful.md
---

# How to supercharge and organize your Figma comments using Commentful

#### Video Transcript

Today I'm going to be showing you how to level up your Figma comments by organizing them and being able to filter them add todo items add tags a whole bunch of stuff. We're going to be doing this using a brand new Figma plugin called Commentful.

Let's get started by going to the Figma Community and searching for the term "Commentful", and under the "Plugins" tab you'll see Commentful pop-up. Just go ahead and click on the "Install" button on the right hand side, and then you can switch back into your Figma file. 

You can see here I've already got a few Figma comments in here, just native Figma comments, nothing nothing too crazy. We're basically going to organize these Figma comments in a way that's a bit easier to look through rather than just using the native Figma comments panel, which can be a bit tricky if you've got a bunch of Figma comments and you're trying to keep track of them. 

To get started we're just going to right click anywhere, go down to "Plugins" click on "Commentful" and that's just going to load up the Figma plugin we just installed a moment ago. The first time you run the Figma plugin you'll just need to connect it to your Figma file. You can do that by clicking "Connect This Figma File" and it's going to give you some steps just to get your Figma API token; if you go to your settings page in your Figma profile and go down to personal access tokens, just name it "Commentful" or something like that and hit enter, and you'll receive a token that you can copy and you want to go ahead and paste that in this input field here. I've already got one saved in here, so I'm just going to use that one and click "Save Token". 

Then what you want todo is grab your current Figma filem, click on the "Share" button in the toolbar click on "Copy link" and you can close that off and then just go ahead and paste that Figma file link into the input here and click on "Save URL". This is now going to connect the Figma plugin to your Figma file and sync up all of your Figma comments into the Figma plugin so we can actually see them and start organizing them. 

By default, all the Figma comments that you've got already in your file or any new Figma comments that you add to the file will get automatically put into the "Backlog"; these are all the Figma comments that haven't been assigned a different category yet and they're basically just where all of the new Figma comments go. 

To create a category, we just go over to the right hand side here click on any of these status icons, click on a color, and then give it a label; I'm going to call this one "Completed", then I'm going to click on "Add New Custom Status", and you can see here it's added a brand new column to our board here. What we can do is we can actually filter these by resolved status; I'm just going to click on the filters button, and go down to "Show resolved and unresolved Figma comments", and then in here if I go to my comment and resolve that in Figma. 

I'll resolve a couple of those ones, and we can actually jump to these Figma comments easily just by clicking on these pins here. If I click on any of the pins it'll automatically jump to that comment on the page, so I'm just going to mark a couple of these as resolved; and it's worth noting that the Figma plugin refreshes your Figma comments about every 20 seconds, so you might notice that it took took a little bit to update the statuses here, but every 20 seconds or so it'll refresh these based on any Figma comments or updates that have been made in your Figma file using the native Figma comments feature.

Now we can see here we've got our two resolved Figma comments that we just added and what I'm going todo is I'm going to move these into our new category; I'm just going to click on both of those, go down to here in the footer, click on the "Completed" category and then click the "Move" button. You can see here we've just moved those two Figma comments into our "Completed" category, so those are out of the way now and you don't have to worry about those, we know where they're at status-wise, and we can go ahead and create more statuses for more use cases as well. 

I'm going to create one called "In Progress", then "Create a new custom status" and we've just added "In Progress". I do want this to be in the middle, I don't want it to be at the end, so I'm going to click and drag that title and just drop that over to the left here; now we've got our column in the middle so we can actually start moving these into that category now, and those are more organized as well. These are two that I've got "In Progress", we can edit these labels as well; if I wanted to call this doing I just change the label and update that and that's been saved there, we can also jump into any of these cards. These are just comment threads from Figma I can click on those get a really nice overview of when it was created, what frame it's attached, to how many Figma comments exist, and things like that. 

The cool thing is I can also give these custom titles; for example this one's telling me that the social stats are up outdated, so I might call this one "Social Stats Updates" and that's just going to get pulled through into our cards here. That gives me a way to give it a custom title without just relying on the comment itself, so it's a nice way of keeping the titles organized as well. 

The other cool thing we can do is set a due date, so if I know this needs to be done by the middle of the week, I can set a due date for Wednesday and that's going to tell me that it's now due in three days. In our overview I can also get a really clear sense that this card needs to be done in three days, I can set that so if that was already set to last week, it'll tell me that it was due five days ago, and again you get a really clear indication that this comment needs to be taken care of and and put to the completed column; that's what that looks like there. \

The other neat thing that we can do is actually tag these Figma comments as well. For example, this one's telling us in the Figma comment that we need the thumbnails to be bigger; that's probably a design task, so I'm going to tag that as "Design" and I'm going to tag this one also as "Design" and you can see here now it's got these tags in our cards that we can actually see as an overview level, but the other cool thing is we can actually now filter by those tags, too. If we decide we only want to see Figma comment threads that are tagged as "Design" we just jump back into our Figma filters, jump into the "Filter threads by tags" input, and if you just start typing the tag it'll autocomplete it, so we can select "Design" and now. If we close that off, you can see here that those other threads have disappeared and we're only seeing any Figma comments that have been tagged with the tag "Design".

I'm just going to clear those again, and we can do the exact same thing with users. If you want to filter by user you can do that, so if I type in one of the usernames, it's going to autocomplete and I'll just click on that one, and this is only going to show me threads that were created by "Figmatic". I can also "Show resolved and unresolved" so we get a few more results in there; you can see these ones have been created by "Figmatic", but I can change that to "Adam" so I can see all of Adam's Figma comments, and you can see those are in there as well. We can clear those just by clicking on that, but that's a really nice way of actually seeing which which tags are attached to which comment and you can just narrow that down really quickly.

The other neat thing you can do is filter by date, so if that you only want to see Figma comments that have been added today, or yesterday, or in the last week, you just click on one of these presets and that'll automatically select "today", so these Figma comments were all created today, but we could also say we want todo the last seven days, or we want to just do yesterday, or you can just pick your own date range. You can just jump through these if you want to see everything from January, just jump to there, select all of January, and that would show you everything that's been in January. I don't have any in January, so you can see here it's just showing nothing, but I'll just clear that.

The other cool thing we can do is filter by comment location, so if you've got a bunch of Figma comments in your file and you only want to see Figma comments on a certain frame or a certain place, for example, on the "Notification" frame here, I can see that we've got one comment on there; I'm just going to unselect all of the other locations and only show any Figma comments that are attached to the "Notification" frame here. I'm going to close off my filters and you can see here it's just showing this one comment which is attached to the "Notification" frame on page one; that's what that looks like there. That gives you a bit of an overview of what the filtering system looks like.

The other neat thing that we can do is automatically search all of our Figma comments instantly. If I start typing a keyword, you can see here it's going to pre-fill those results and show me where the highlight is in the in the keyword. This is just a really quick way of searching all of your Figma comments for a specific keyword instantly and you don't have to filter around if that you've got a keyword you want to look for, you can just do that and then all you need todo is click on one of these results, or use the keyboard, and that will jump you straight to the comment and open up the thread overview as well. That's a really quick way of finding Figma comments if what you want to look for in the actual message content or in the title field here.

We can also reply to Figma comments. You can see here it's just loaded up this comment here, that's on Figma Comment Thread #1, and I've decided I want to reply to that comment, so I'm just going to have a quick look at what that actually looks like. If I find my #1 comment, which I think is actually resolved; that one's already been resolved, so let's leave a comment on #2; we've got our number two comment here. I'm just going to open up the card and this is talking about "notification thumbnails", so we'll just say "No worries, I'll update this straight away"; and the cool thing is we can actually use markdown formatting to make these Figma comments a little bit more clear and concise. I can add bold, italic, strikethroughs, ordered lists, unordered bullet lists; I could write a list of file names or something just by clicking on that unordered list, and then I could say "image.jpg", "image2.jpg", and just add a little label I'm "uploading to". 

Okay, that's what that looks like and you can also add emojis of course, so we can just drop in a emoji and links as well. We can actually insert links if we wanted todo that, so we could add a link to "uploading" and put that as "figma.com" or something like that, and that's what it looks like in the preview here. If we want to reply to that thread just hit "Reply To The Figma Thread" button, and that's going to post the reply and refresh our Figma comments. You can see there it is right in our thread that we already had open. 

The neat thing is if we actually go to Figma now, and jump to that comment you can see here we've got one reply; and there we go, that's the reply that we just added through the Figma plugin and it's posting it to Figma because we're connected to Figma using the Figma comments API; all of the Figma comments that you leave through the Figma plugin will automatically get fed into Figma as well. 

Even if you're not using the Commentful Figma plugin, that content is still available to anyone looking at the native Figma comments as well; the only difference is in here we've got the markdown formatting, it's raw text; it's still readable, it's still meaningful, but when you do read that in the Commentful Figma plugin, that's when you're really going to get the benefit of having the actual formatted lists, having the actual formatted markdown, and things like that, so that's what that looks like. 

The other cool thing we can do is create todo lists. We can create todo lists in two different ways; we can either assign todos to a certain Figma comment, in this case I'm going todo that; I'm going to say jump to the "My Todos" tab, and I'm just going to insert a todo here. I'm going to say "Upload image.jpg from Dropbox", or something like that, and I'm just going to click "Add Todo" and you can see here it's added todo to our items for that Figma comment. I can add another one, so I'll say "Upload second image from Dropbox", add that as a todo as well and then we can actually start checking these off. We can check those off and see what the completed checklist looks like, we can also hide those, but the neat thing is we can actually see an overview of that from our Figma comment thread cards as well. We can see here that we've got 50 todos completed on this specific Figma comment card. 

Even more useful is jumping to our "My Todos" tab; up in the header here if you click on the "My Todos" tab and then go to the selector up here, and we're going to change this from "Private Todos" to "Assigned Todos". Basically, what this tab allows you to do is see an overview of every todo item that's been assigned to you on different Figma comments. We can see for example the ones we just added to this Figma comments thread, here those two we just added in those have automatically fed through to our personal todo list, so if someone else is assigned these to us, or if we assign them to ourselves through the Figma comments, we get that all in the one place and we don't have to go looking around for what we're meant to be working on, it's all in a single place where you can just go through and check these off. 

I can just go ahead and check those off like any normal todo list, and I can hide the completed lists if I don't want to see them anymore, and I can also leave them on unhidden or just hide the todo items as well. The other cool thing is I don't need to go back to the thread every time if I know I want to add another item here, I can just do that, I can say "Another todo here" and add that todo as well, and that's automatically going to add it to our own list but also add it back to the todos list on the Figma comment thread; everyone's going to be able to see that at the same time, and you don't have to go digging around for those those Figma comments there. 

The other way we can add todos is by going back to the Private Todos; if we just change this filter up here to say "Private Todos", what we can do is create our own private todo lists. If I say "My Design Tasks" and create that as a new list, this is going to add a list that only we can see, no one else can see this list, this is just for us, just looking at this page. We can create a "My Design Tasks" list and start adding our own todos, so we can say "Update the the assets" and add that as a todo, we can say "Do a copy review before sending out", add that as a todo; so this really becomes your own private todo list. If you have multiple categories of lists, you can just create new lists as well, so we can say "Design Review Feedback", add that as a new list, and now you can add new items under that list as well. You can say "Fix typos in text layers", and anything like that, you can just add your own todos in there and that'll just give you your own private todo list that sits separate from any other todos that are shared on those Figma comment threads. 

That's what that looks like there, and as I said you can see these on the actual Figma comment thread cards, just to get a really clear overview of what's been completed what hasn't; you'll be able to see those get completed and that's just an easy trigger to say "Okay, this is probably finished, so we can move that to a different category that resolves the thread". These are multiple ways of keeping track of tasks, keeping track of Figma comments, organizing them by statuses, tags users, adding todos, all those sorts of neat things; you're really supercharging your Figma comments, your native Figma comments abilities to organize them in a much more straightforward way that you can't do normally.

That's that's basically what it looks like, that's all the filtering, that's all the searching, you've also got an alerts panel; if you click on this little "alerts" icon, that's basically just going to show you a stream of all of the Figma comments in this file in reverse chronological order, so everything that's at the top is is the newest. If you open that up and you just want to see a really quick overview of what's been happening in the file in the Figma comments, you just click on that little icon and you'll get an instant readout of all the Figma comments that have been left, and you can jump into those really easily. That can be really handy, too. 

The other cool thing you can do if you want is export these Figma comments to a CSV spreadsheet. Let's say you've got all these Figma comments and someone else wants to have a look at them, or you will need to send them to a stakeholder, or you just want to export them for your own purpose, you can do that in one click just by clicking on the "Export Figma Comments button. If you click on that that's now exported the Figma comments, so I'm just going to click "Save", that's going to save it to my desktop, and if I now open that with my spreadsheet app; in this case I'm just going to use the "Numbers" app that comes with the Mac. If I open up that one this is going to open up the CSV file, so this gets saved out as a CSV, just a standard CSV spreadsheet, and we can see here that all of the Figma comments from our Figma file have been exported into a nice looking CSV file. 

This includes pretty much everything you'd want to know; you've got your pin number, that's where the the number of the pin what page it's on what frame it's attached to, who posted the comment, what the comment message was, and then you've also got your custom statuses; these are the statuses that we added through the Figma plugin; we've got our "Doing" status our "Completed" status, that's what comes up therem we've also got tags, so if we've added any tags to a comment we can see those in here as well, if we've set a due date that'll pop up in there, created at, resolved at; that's if it's been resolved in Figma you can you can get that date in there, and then also we've got our link which is basically a direct link to the Figma comment pin itself; if you click on that that would open up your browser, and if you've got permission to look at the Figma file that would just jump you straight to the Figma pin and the location of the comment as well; that can be handy if you're fumbling around in the dark in the spreadsheet and you want to know where the actual comment was on the file, you can just click on that and jump straight to it.

That's basically a good overview of of what this Figma plugin can do, and I think if you're interested in filtering your Figma comments in a better way, searching your Figma comments in a better way, or just having a way more organized Figma feedback and approval workflow to be able to track your Figma comments, where they're at, and who's who's meant to be doing what, and what you're meant to be doingm then I think the Commentful Figma plugin is a really nice way of doing that in a way that really augments the native Figma comments, and keeps them super useful, but just basically augments them with all this extra detail and extra ways of filtering things down. I think that's really neat, especially with bigger Figma teams where you've got a lot of different Figma comments that you need to filter and sort through, this basically allows you to turn your native Figma comments into essentially a Trello style board that's just way easier to keep track of visually and keep everyone on the same page.

The one last thing I'll say is if you do need to duplicate your Figma file, it will automatically save your Figma file ID that you set originally to the Figma file in the Figma plugin, so if you duplicate it you'll just need to re-import or re-link the Figma file. If you were to duplicate this file, for example, you'd want to re-run the Figma plugin click on the "Settings" icon and just click on "Re-link Your Figma File" and that will allow you to re-link the Figma URL with the new Figma file URL, because it's going to be a different URL, and if you don't do that it's just going to keep looking at your old Figma file and using the Figma comments from there. You definitely don't want that, so just in case you get caught out that's all you need to do, just click on the "Re-link Your Figma File" button and you'll be good to go. 

You might have noticed there's another "Reviews" tab up here; I'm going to go through that in a separate Figma tutorial because I think it warrants its own video, but this is basically a way to gather external stakeholder feedback. By using this feature, you can create a review link which lets you basically upload these these frames to a URL and you can send this to any stakeholder or client and get Figma comments, text feedback and image feedback on the frames that you select without them needing to have a Figma account. They can just jump into that URL and open their browser, leave all that feedback for you and that's all going to get fed back into your Commentful Figma plugin and you'll be able to go through that check it off; and also automatically make any image and text changes from the customer or from the client or stakeholder. As I said, I'll go through that in in proper detail in another Figma tutorial because it is its own thing, but I just wanted to briefly touch on that in case you were wondering what that "Reviews" panel was for.

That's that's going to be it for today; I hope you've enjoyed watching this tutorial if you've been wondering how to organize your Figma comments in a more seamless way. This is going to be a really big improvement on the native Figma comments flow if you've been dealing with the carnage and chaos of keeping track of them using the native feature over here.

One other thing I should probably mention is you can also create new Figma comments through the Figma plugin. If you go to any of your statuses, you just click on the little "plus" icon and put in a comment title; I'll say "Make the logo bigger", and then you just basically want to click on a layer to tag it to, and click on what status you want, in this case it's already pre-filled to "Doing", and then you can assign it some tasks. You could say "Review design", and then you just want to leave a comment, which will be the initial message, so "Please action this as soon as possible", and we can just bold that to make it a little bit more a little bit more aggressive, because we really want it done immediately. 

I'm just going to click on "Post New Figma Comment" and that's basically created a brand new thread. Before, we did a reply to an existing thread, for example, under the "Figma Comments" tab, in any thread you can reply to Figma comments and keep that thread going, but what we've just done is we've created a brand new Figma comment thread. If we click on the little pin here, you can see that it's just dropped it on our frame, and we can see the comment that we just left has been added as well. That's just a really easy way of adding a brand new Figma thread or brand new Figma comment thread to Figma through the Commentful Figma plugin, pre-filling it to a specific category with a comment title and tags already added right out of the gate. That can be a way to streamline that process instead of leaving the comment directly in Figma, dropping a new comment in there and then basically waiting for it to load up into the Commentful Figma plugin; this basically just gets around that, so you can just add it directly through the Figma plugin, but that choice is totally up to you, so see how you go there.

Thank you as always for watching and we'll be back soon with more Figma tutorials just like this one, so please stay tuned.

---

---
type: article
title: Figma content design workflow
description: How to run a cleaner content design workflow in Figma when copy changes are constant.
datePublished: 2022-02-24T00:00:00.000Z
dateModified: 2022-02-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/copydoc-figma-content-design-workflow/
markdownUrl: https://www.hypermatic.com/articles/copydoc-figma-content-design-workflow.md
---

# Figma content design workflow

How to run a cleaner content design workflow in Figma when copy changes are constant. In practice, the goal is to make the production step repeatable instead of treating every export, update, or handoff as a separate task.

### Why this workflow matters

Teams usually start searching for figma content design workflow when the same task keeps coming back. It might be repeated copy edits, legacy-file handoff, email production, asset resizing, or export cleanup. Whatever the exact use case, the pattern is the same: the design is already done, but the production work keeps stretching the timeline.

### How CopyDoc fits into the process

CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

With CopyDoc, teams can usually:

- move text in and out of designs without manual copying
- handle localization and content updates with less risk
- keep content operations closer to the source design files

### A practical way to use it

The simplest approach is to keep the source work in Figma, make the production step part of the design workflow, and avoid exporting into a different tool unless you actually need to. That is where [CopyDoc](/copydoc/) tends to help most. Instead of treating production as a second project, it keeps more of the work close to the file the team is already maintaining.

### The short version

If copy updates, localization, or spreadsheet-driven content are the pain points, CopyDoc is the best place to begin. For teams that repeat this task every week, the biggest gain is not just speed. It is consistency. A cleaner workflow means fewer manual fixes, fewer missed details, and less time spent rebuilding work that was already designed once.

---

---
type: article
title: Best Figma plugins for marketing asset production
description: The best Figma plugins for marketing asset production when teams need faster exports, variants, and launch-ready files.
datePublished: 2022-02-06T00:00:00.000Z
dateModified: 2022-02-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-marketing-asset-production/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-marketing-asset-production.md
---

# Best Figma plugins for marketing asset production

The best Figma plugins for marketing asset production when teams need faster exports, variants, and launch-ready files. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Bannerify

[Bannerify](/bannerify/) is one of the more useful tools in this workflow. Bannerify is useful here because it keeps banner production inside Figma instead of pushing the team into a separate build step. For teams creating multiple ad sizes, motion variants, or late campaign revisions, that usually means less repetition and a cleaner review cycle.

### HyperCrop

[HyperCrop](/hypercrop/) is one of the more useful tools in this workflow. HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

### TinyImage

[TinyImage](/tinyimage/) is one of the more useful tools in this workflow. TinyImage matters in this workflow because production does not stop at design quality. Teams still need smaller files, cleaner exports, and faster pages. Keeping compression in Figma removes one more manual handoff.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: How to make Figma work better for cross-functional teams
description: A practical guide to making Figma easier for marketing, content, engineering, and stakeholder collaboration.
datePublished: 2022-01-20T00:00:00.000Z
dateModified: 2022-01-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/how-to-make-figma-work-better-for-cross-functional-teams/
markdownUrl: https://www.hypermatic.com/articles/how-to-make-figma-work-better-for-cross-functional-teams.md
---

# How to make Figma work better for cross-functional teams

A practical guide to making Figma easier for marketing, content, engineering, and stakeholder collaboration. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Commentful

[Commentful](/commentful/) is one of the more useful tools in this workflow. Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

### CopyDoc

[CopyDoc](/copydoc/) is one of the more useful tools in this workflow. CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

### Weblify

[Weblify](/weblify/) is one of the more useful tools in this workflow. Weblify is helpful in this workflow because the biggest gap is often between a finished design and usable code output. Cleaner snippets and inspect-friendly output help teams move from mockup to implementation with less rework.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Best Figma plugins for design systems teams
description: The best Figma plugins for design systems teams that need stronger handoff, content consistency, and implementation QA.
datePublished: 2022-01-15T00:00:00.000Z
dateModified: 2022-01-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-design-systems-teams/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-design-systems-teams.md
---

# Best Figma plugins for design systems teams

Design systems teams are not just designing components. They are maintaining consistency across design, content, and implementation at scale.

That means the best Figma plugins for design systems teams are the ones that help reduce drift. Not just inside Figma, but between Figma and the actual shipped product.

### Weblify for code-oriented inspection

[Weblify](/weblify/) is one of the more useful plugins for design systems work because it pushes handoff closer to real implementation output.

If your team wants to inspect layers as HTML, CSS, Tailwind, React, or Vue, Weblify gives engineers and design systems folks a much more practical starting point than a screenshot or a redline.

### Pixelay for system-level QA

Once a component library is in production, the real job becomes keeping it aligned. [Pixelay](/pixelay/) helps by comparing real URLs to the original Figma designs so teams can catch visual regressions, spacing drift, or styling mismatches.

For design systems teams supporting many squads, this kind of QA matters far more than another static spec page.

### CopyDoc for content consistency

Component libraries often include placeholder content, but real systems work needs realistic copy and consistent text patterns. [CopyDoc](/copydoc/) helps teams update text in bulk, sync spreadsheet-driven content, and handle localization workflows without manual edits across dozens of components.

### TinyImage for optimized shared assets

If your design system includes illustrations, icons, or image assets that need to be reused across products, [TinyImage](/tinyimage/) helps export those assets in smaller, more practical formats straight from Figma.

That keeps the source of truth inside the design workflow while reducing the amount of asset cleanup downstream.

### Convertify for legacy migrations

Some design systems teams inherit a mess of old Sketch, XD, Illustrator, or PDF source material. [Convertify](/convertify/) helps bring those formats into Figma or export Figma work back out when needed, which is useful during long migrations and consolidation projects.

### The best stack for systems work

Design systems teams usually care about three things:

- cleaner handoff
- less drift
- more consistency

That is why the strongest stack is usually [Weblify](/weblify/), [Pixelay](/pixelay/), and [CopyDoc](/copydoc/), with [TinyImage](/tinyimage/) and [Convertify](/convertify/) supporting the edge cases around assets and migration.

---

---
type: article
title: The hidden cost of manual export work in Figma
description: Why manual exports quietly slow teams down, and what a cleaner Figma production process looks like instead.
datePublished: 2022-01-03T00:00:00.000Z
dateModified: 2022-01-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/the-hidden-cost-of-manual-export-work-in-figma/
markdownUrl: https://www.hypermatic.com/articles/the-hidden-cost-of-manual-export-work-in-figma.md
---

# The hidden cost of manual export work in Figma

Why manual exports quietly slow teams down, and what a cleaner Figma production process looks like instead. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### TinyImage

[TinyImage](/tinyimage/) is one of the more useful tools in this workflow. TinyImage matters in this workflow because production does not stop at design quality. Teams still need smaller files, cleaner exports, and faster pages. Keeping compression in Figma removes one more manual handoff.

### HyperCrop

[HyperCrop](/hypercrop/) is one of the more useful tools in this workflow. HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

### Weblify

[Weblify](/weblify/) is one of the more useful tools in this workflow. Weblify is helpful in this workflow because the biggest gap is often between a finished design and usable code output. Cleaner snippets and inspect-friendly output help teams move from mockup to implementation with less rework.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: From One to Two
description: Looking back on the hits and misses of 2021 (and towards 2022) as we celebrate Figmatic's second birthday.
datePublished: 2021-12-21T00:00:00.000Z
dateModified: 2021-12-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/from-one-to-two/
markdownUrl: https://www.hypermatic.com/articles/from-one-to-two.md
---

# From One to Two

>“Yo, last year was 'bout brandin', this one about expandin'” 

— [Benny The Butcher](https://www.youtube.com/watch?v=ucMkV5ndFek), Burden of Proof

It's been exactly one year since posting the [From Zero to One](/articles/from-zero-to-one/) post on Figmatic's 1st birthday, so I'd like to continue these annual posts to do the same again today, to celebrate Figmatic turning 2 years old!

I thought it would be interesting to condense many of the awesome stats and achievements to look back on and celebrate for 2021 into a bullet list, and then jump into writing an incoherent essay about missing some other goals further down below, and then finally look ahead to 2022 at the end.

### Things to celebrate from 2021 (tl;dr)

- **0** investors and **$0** funding (still happily bootstrapped/[default alive](http://www.paulgraham.com/aord.html))
- **1** brand new Figma plugin shipped ([Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder))
- **2** other new Figma plugins (still) under development
- **6** hours spent in meetings for the year
- **12** free Figma [templates](https://www.hypermatic.com/templates/) released
- **24** new YouTube [tutorials](https://www.youtube.com/c/Figmatic) recorded
- **36** styles of danger
- **66** new [tweets](https://x.com/hypermatic) on our Twitter
- **402** new plugin updates and improvements shipped
- **690** total followers on our Figma Community [profile](https://figma.com/@figmatic)
- **~1,000** new customer conversations via chat/email
- **290,000+** active plugin installs (up from 61,000 a year ago)
- Launched our [Pro Bundle](https://www.hypermatic.com/bundle/) plans
- Added anime characters to our plugins for fun
- Shipped our [Pixelay](https://www.figma.com/community/plugin/816424186244407164/Pixelay-Compare-Design-to-Web) Chrome plugin
- Released our Enterprise admin dashboard

### The latter half of 2021

While I am happy with the amount of updates and important improvements that were made across the board for our customers this year (above), the latter half of this year didn't quite go according to plan (and that's okay, for the most part).

It's been about 6 months since the last [Long mission, short hype](https://www.hypermatic.com/articles/long-mission-short-hype/) update, and in the last section talking about "the next 6 months", I mentioned that we would hopefully have another brand new Figma out by the end of the year; but this didn't happen for a few reasons:

- Underestimating the scope of the new Figma plugin
- Prioritizing improving our existing plugins
- Hitting breaking point during our sixth lockdown
- Working on developing a second new Figma plugin

I'll go more into detail for these below:

#### Underestimating the scope of the new Figma plugin

I knew from the outset that the path for starting Figmatic and developing plugins was going to lead to building solutions to more complex problems. This was pretty clear from building our Emailify plugin, which was re-built from scratch 3 different times before it finally shipped earlier this year. Like with that plugin and also our Convertify plugin, I underestimated the scope of the project before starting it. 

One would assume that I would have deeply interalised this lesson by now, but when you're building products, the endpoint usually isn't totally clear from the outset. You can see a general shape of what you think it's going to be, but it's only by showing up each day and doing the work that you actually figure out all of this along the way. The magic of discovering what a product is going to become is all in the process of creating it. However, this also leads to "unknown unknowns", where there are certain things you don't even know that you don't know until you discover them along the way.

Normally, I like to ship the first version of things as quickly as possible, then talk with real users and customers to continually iterate on it from there based on their own problems that need to be solved. This approach has worked well, but depending on the plugin, there's varying degrees of what can pass for an initial version. For example, shipping a Figma to Sketch plugin that converts 50% of the layers in your design is more useful that nothing, but not useful enough to really solve the problem.

This is also true for the Emailify plugin; the first version of the plugin was missing a bunch of things that it now has today: a live preview, dark mode styles, animated GIF support, Google font support, automatic platform integrations etc. These are fine to leave out, because the problem of exporting HTML emails can still be solved without them, but the first version also had to do what it said on the box: _export HTML emails from Figma_. Shipping an initial version that didn't support text, or didn't support images wouldn't have worked, because you can't solve the core problem without those.

I suppose this is what's truly meant when people talk about MVP (minimum viable product), the minimum that you can ship to your users and still offer value for solving their problem.

Similar to Convertify and Emailify, the "minimum" bar is much higher for it to be valuable. Even with removing a bunch of "wishlist" items that are on the future roadmap, solving the core problem is important to get right, and shipping a half-baked version (which is neither "minimum" or "viable") seems like it would just be more annoying than if it didn't exist at all.

#### Prioritizing improving our existing plugins

On top of underestimating the scope of the new plugin above, I also underestimated how passionate our customers are with helping us make our Figma plugins as good as they can be. Looking back, this ended up being the major theme of 2021; taking all of the work that was done to ship these 10 Figma plugins and work with our users and customers to _really_ refine and improve them this year. It feels like they're all in such a better spot than they were at the beginning of the year.

This is an incredible position to be in, where it truly feels like our customers are super invested in us and the success of our products; because they _actually are_, especially when they adopt them in their company as the way to solve a certain problem (like HTML banners or emails) across all of their teams. Having customers who want to use our products because they love what we're building is awesome, and it allows us to continue building them.

Whether they're super small quality of life improvements, or larger features and updates, this forces you on an almost daily basis to assess these requests against any previous or current priorities and weigh them up against each other to determine which is the most important for that day, week or month; and more crucially, which are compatible or incompatible with the overall vision for the product.

I think it's important to keep our Figma plugins super simple and easy to use, only shipping things that align with the clearly defined limits of what each plugin should be (and do) and what it should not. That means they're not going to be for everybody, and that's okay. I'd rather have a smaller number of customers who absolutely love one of our plugins and really resonate with our approach to solving these problems, than having a tonne of customers who "sort of like" the plugins if we tried to make them all things to all people.

#### Hitting breaking point during our sixth lockdown

It's probably no secret that we've had the [longest](https://lockdownstats.melbourne/) COVID-19 lockdown down here in Melbourne, clocking in at 263 days in total; and since our last mid-year update, we entered our sixth (78 day long) COVID-19 lockdown here in Melbourne at the start of August.

These lockdown measures here in the state of Victoria mean you can't leave your home or see friends, family, workmates. You're allowed to leave your home once per day a total of 1 hour within a 5 kilometer radius to either get essential groceries and/or go for a walk, but otherwise you're just isolating home alone, along with 6.5 million other people in our state. The kicker is that you have no idea when it's going to end, as they're always advertised as a "short sharp 2 week circuit breaker", but are then extended at random intervals for months at a time.

I very purposefully developed a set of daily routines and habits at the start of 2020, to essentially make each day seem as close to Groundhog Day as possible. This worked incredibly well to maintain a sense or normalcy and allow me to focus 100% on building Figmatic as a bootstrapped company, and served as a much needed distraction from the pandemic at large. This consistent routine and hyper-focus is what helped to ship 9 Figma plugins in 2020.

I think most people you'll talk to in Melbourne had their own personal breaking point in terms of lockdowns, and for me personally, that was about a month or so into our sixth lockdown. Along with my mental state, those routines and habits also began to fall apart. I started to feel anxious and depressed, I wasn't sleeping properly, I was waking up with recurring nightmares, I didn't feel like eating as much, and was generally just having a hard time dealing with things that were going on with all this stuff at the time.

Unsurprisingly, this did carry over to my work. Even though things were still getting done, I felt my own productivity really slow down and wasn't able to do things at the pace that I had become so accustom to, which also added to my own frustrations (as I am totally my own worst critic) and led to me beating myself up a bit. I was also knocked about for about 8-10 days after receiving each dose of the Pfizer vaccine; I felt super fatigued and was only doing a couple of hours per day of decent work during those blocks of time.

Since our lockdown restrictions were eased recently and don't appear to be returning again, I've been making an effort to return to the routine and habits that I started in 2020 and hopefully put this all behind me.

#### Working on developing a second new Figma plugin

In parallel to the development of the new plugin I wrote about above, I saw a bunch of people (including our own customers) facing a set of recurring problems that I had also experienced in my previous life working in digital agencies. This became more evident when I started talking to customers about it and they were following up with me to know when we might have a product published that could help with it.

It's always hard to know if you're making the right call on prioritizing these things, but I do think certain products are more time sensitive than others, so I was comfortable with starting to design and develop another new plugin with a much shorter time horizon that could be released sooner, and solve these problems for our customers before shipping our other new plugin, which was always going to have a longer time horizon, either way.

By choosing to spend more time on this new (new) plugin, it means spending less time on other things. So much of this is just trying to use your best judgement make sure you're working on the most important thing at the right time, with all of the trade-offs and opportunity costs of all the other things you're saying "no" to taken into account.

After releasing 10 Figma plugins so far with Figmatic, I've learned that it's difficult to know beforehand which products are going to be received well, relative to the others. I've been really surprised with a few, and less surprised with others. This will be another one of those bets, which will be released into the wild fairly soon, and (as always) iterated on with real users and customers until we have a product that solves these problems for them.

### 2022

>“Today’s "best practices" lead to dead ends; the best paths are new and untried.”

— Peter Thiel, Zero to One

As I wrote 2 years ago when we first started, I want Figmatic to be focused on building Figma plugins that solve important problems that very few other people seem to be interested in working on. I believe that we've made some great progress in doing this so far.

The feedback we receive on a daily basis from our users and customers makes this more concrete. Whenever I hear that a company is changing their design/development/copy/marketing process to be centered around our one or more of our Figma plugins because it allows them to 10x, 100x or 1000x their workflows, it lets me know that our mission of reducing the distance between design and production to zero is still on track.

It's obvious from the entire section above that there's still lots of work to be done, but Figmatic is in such a great place right now, and I couldn't be happier with how the company and our super cool users and customers have grown over the last 2 years.

As I mentioned above, the focus will be to double down on getting these 2 new Figma plugins that are currently in development out into the wild for everyone to try. I think there's so much potential for both of them to really help with automating and improving some of our existing workflows, and I'm really looking forward to finally sharing them with the Figma Community in 2022.

---

---
type: article
title: How agencies standardize Figma production workflows
description: How agencies turn scattered Figma production into repeatable systems for reviews, exports, and delivery.
datePublished: 2021-12-17T00:00:00.000Z
dateModified: 2021-12-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/how-agencies-standardize-figma-production-workflows/
markdownUrl: https://www.hypermatic.com/articles/how-agencies-standardize-figma-production-workflows.md
---

# How agencies standardize Figma production workflows

How agencies turn scattered Figma production into repeatable systems for reviews, exports, and delivery. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Commentful

[Commentful](/commentful/) is one of the more useful tools in this workflow. Commentful helps when the friction is not design itself, but the back-and-forth around it. Clearer review loops usually mean fewer missed comments, fewer duplicate requests, and faster signoff.

### Crypto

[Crypto](/crypto/) is one of the more useful tools in this workflow. Crypto matters here because design sharing is not always public or lightweight. When security, password protection, or controlled access matters, a normal share link often is not enough.

### Pitchdeck

[Pitchdeck](/pitchdeck/) is one of the more useful tools in this workflow. Pitchdeck is helpful in this workflow because presentation work usually lives between design quality and practical delivery. Designing once in Figma and exporting to familiar deck formats is often the fastest middle ground.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Figma automation ideas that save hours every week
description: Automation ideas for design and marketing teams that keep Figma work moving with less manual effort.
datePublished: 2021-11-30T00:00:00.000Z
dateModified: 2021-11-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/figma-automation-ideas-that-save-hours-every-week/
markdownUrl: https://www.hypermatic.com/articles/figma-automation-ideas-that-save-hours-every-week.md
---

# Figma automation ideas that save hours every week

Automation ideas for design and marketing teams that keep Figma work moving with less manual effort. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Bannerify

[Bannerify](/bannerify/) is one of the more useful tools in this workflow. Bannerify is useful here because it keeps banner production inside Figma instead of pushing the team into a separate build step. For teams creating multiple ad sizes, motion variants, or late campaign revisions, that usually means less repetition and a cleaner review cycle.

### Emailify

[Emailify](/emailify/) is one of the more useful tools in this workflow. Emailify matters in this workflow because email work often gets rebuilt after design. Keeping layout, content, and export closer together removes a lot of duplicate effort from campaign production.

### Pixelay

[Pixelay](/pixelay/) is one of the more useful tools in this workflow. Pixelay matters in this workflow because QA breaks down when teams are comparing design and implementation manually. Overlay-based review makes front-end drift easier to spot and easier to discuss.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: tutorial
title: How to export HTML emails from Figma to ActiveCampaign using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-11-23T00:00:00.000Z
dateModified: 2021-11-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-active-campaign-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-active-campaign-using-emailify.md
---

# How to export HTML emails from Figma to ActiveCampaign using Emailify

#### Video Transcript

Today I'm going to be showing you how to upload your HTML emails out of Figma into your ActiveCampaign account.

The first thing we need to do to get started is jump into Figma and go to the Figma Community, search for the word "Emailify", and under the "Plugins" tab you'll see "Emailify" pop-up. All you need to do is click on this "Install" button on the right-hand side, and you'll be ready to go. Now we can jump back into our Figma file, right click anywhere, go down to "Plugins" and then click on the Emailify Figma plugin, and that's just going to run the Figma plugin that we just installed in this tutorial. 

I've already created an email design using the Emailify Figma plugin; if you haven't already done that you might want to check out one of our other YouTube videos which goes through this in detail, but for today's Figma tutorial I'm just going to assume you've already got your email designed using the Emailify Figma plugin, and we're just going to be exporting that out into our ActiveCampaign account.

To get started doing that, we just click on the "Export" button in the Figma plugin header. and by default it's going to download a package of HTML files to your computer, but for today we want to upload this to ActiveCampaign, which is an email service provider. Instead of doing HTML, I'm going to click on the drop down, scroll down to the "Upload To Platform" group, and today I'm going to click on the "ActiveCampaign" option. I've just clicked on "ActiveCampaign" and you can see down here it's just changed to show these two input fields. There's a little link over here that takes you to the page on how to get your ActiveCampaign URL and API key, but I'll show you how to do that in this video now as well. 

All I've done is I've gone to my browser and logged into my ActiveCampaign account; you can log into your account and once you are logged in all you need to do is click on the "Settings" button down here, and then after you've clicked settings, you want to scroll down to this "Developer" menu item on the left hand side here and click on that. When that page loads you'll see this "Developer" page with a box called "API Access". These are the two fields that we need to copy; I'm going to grab my URL, so I'm going to highlight that ActiveCampaign URL which has my account name, and I'm copying that going back to my Figma plugin and pasting that on the left hand side here in the URL input. 

Jump back into ActiveCampaign, and I'm also going to grab my API key. I'm going to highlight that entire API key, copy that, jump back into Figma, and I'm going to paste that one into the right hand side, which is the API key input. I'm going to paste that, and now we're good to go. We've got our ActiveCampaign URL and we've got our ActiveCampaign API key, and these are going to be unique to your account, so just make sure you grab them from your "Developer" page under the "Settings" menu item.

Okay, we've got those two things in there now, and all we need to do is make sure we're happy with our email. I've just got the one email for today I'm happy with my subject line and the design, so I'm ready to go; all I need to do is click on this "Upload to ActiveCampaign" button. I'm going to click that now; this is now exporting the HTML, it's generating all the HTML automatically, it's exporting all of the images from the email, it's going to upload all of those, and then when it's done it's going to send that email up to our ActiveCampaign account.

It's done now, it's telling us that our ActiveCampaign templates have been uploaded and we can look at them by logging into our ActiveCampaign account, clicking on "Campaigns" and then clicking on "Manage Templates". Let's do that now; I'm just going to swap back into my ActiveCampaign account, on the left hand side here I'm going to go all the way down to "Campaigns", this little menu icon with the envelope on it. I've clicked on "Campaigns" and now I'm going to go to the left hand side and click on "Manage Templates", and I'm just waiting for the page to refresh again; there we go. 

I'm under "Campaigns" now; and now I just want to click on the "Manage Templates" menu item on the left hand side here. I'm going to click on that, and once that loads we should see our email. There we go, this is the email that we just uploaded a moment ago from Figma. I can actually go ahead and click on that, I just click on this little "Edit" button, and that should take me to my email that's just been uploaded. 

We should have a look at it in the preview; it's just loading up, and there we go, we can see on the left hand side, here is all of our HTML. This is what was generated and then uploaded via the Emailify Figma plugin; we sent it directly from Figma over to ActiveCampaign and this is all the code on the left here. Then on the right hand side, we've also got our preview; this is all the rendered HTML from the left hand side getting rendered. It's looking great, it's looking as we'd expect, and all of our images are there, all of our links, all of our rich text and everything's looking really good. You can make changes to that if you wanted to on the left hand side here, but for today I'm just going to leave it because it's looking exactly how I wanted it from my original Figma design over here.

That's basically it; you can you can either save that if you've made changes or just jump back to the the the "Campaign" panel. I'm just going to click on "Previous" there, and that's just one template; if you have more in your design or in your Figma file, you can select multiple designs and upload them, and that will actually upload multiple custom templates as well. It gives them a little time stamp, just so you can see which which email template was uploaded when. If you want to create multiple versions, or if you want to update them, this will just let you know which one was uploaded at what time and what date. 

You can get rid of those by clicking on the little "Settings" icon here and clicking on the "Delete" button if you want to remove one. You can just delete that template if you want to, and there we go; but as I said, you can basically keep exporting these emails as many times as you want with the Figma plugin, and it'll just upload them one after the other, as you'd expect.

That's it for today; that's the entire Figma tutorial of how to get your HTML emails out of Figma to ActiveCampaign directly, if you're using ActiveCampaign as your email service provider. This should just make it a lot easier to streamline  that template creation process rather than having to manually copy and paste things, upload images, swap out image URLs, and import the template manually; you can do it all with one click directly from Figma to ActiveCampaign. Thank you as always for watching. and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export HTML emails from Figma to HubSpot using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-11-16T00:00:00.000Z
dateModified: 2021-11-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-hub-spot-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-hub-spot-using-emailify.md
---

# How to export HTML emails from Figma to HubSpot using Emailify

#### Video Transcript

Today I'm going to be showing you how to export your HTML emails directly from Figma into your HubSpot account and we're going to be doing this by installing a Figma plugin called Emailify.

If you haven't already done so, you can go to the Figma Community, search for the word "Emailify"; and under the "Plugins" tab you'll see "Emailify" pop-up. You just need to click on the "Install" button on the right-hand side, and then we can jump back into our Figma file. 

To run the Figma plugin you just right-click anywhere, go down to "Plugins" and then click on "Emailify", and that'll run the Figma plugin that we just installed. I've already got a design that I came up with using the Emailify Figma plugin, so if you haven't already done that we have another Figma tutorial on our YouTube channel that will show you how to design the email using the Emailify Figma plugin, but for this Figma tutorial I'm just going to assume that you've already designed your email and just want to go ahead and export it from Figma to HubSpot.

I'm going to do that now by starting to click on the "Export" button; I'm just going to click on the "Export" button in the Figma plugin header, and by default it's going to try to export the emails as an HTML package that are going to get downloaded to your computer; that's normally fine, but today we want to get them into HubSpot automatically. What we have to do is click on this select box, and instead of downloading to our computer, we want to upload it to a platform; and for today's Figma tutorial we're going to use HubSpot. I'm just going to click on the "HubSpot Marketing Hub" option, and you can see here it's just changed this little drop down here to say that it needs the HubSpot API key. 

If you click on that link it'll show you how to get that key, but I'm already logged into HubSpot, so I'll show you how to get to it from HubSpot in the browser. If you login to HubSpot and go to your settings page just by clicking the little "Settings" icon up here, and you want to go down to "Integrations"; this little drop down you want to expand "Integrations", and click on "API Key" and that will load up the HubSpot API key page. I've already got a API key active, so if you can see that in yours you just want to click on the "Show" link here, and then prove that you're not a robot, which I'm not, not as far as I know. 

That will show the API key for HubSpot, and now that that's revealed, you just want to go ahead and click on the "Copy" link which will copy it to our clipboard. Okay, that's just copied our HubSpot API key to the clipboard; now we can jump back into Figma and in the API key input we're just going to paste that by pushing Command + V on the keyboard (or Control + V if you're using windows). I've just pasted in my HubSpot API key down there.

The other important thing to know is that for the footer we basically need to include a HubSpot footer for this to be considered a valid email. If you haven't already done so, I'll just close this off for one second, and under the "Footer" category for the components, you'll see that we've got a HubSpot specific footer template. If you don't already have one of those, and you want to make sure that you've got all the right links and all the right tags in there that HubSpot wants, just go ahead and select your email, go to the "Footer" tab and then click on the HubSpot platform specific footer. That's just going to add that in there; if we just really quickly open that up we can see here if we open up the Figma plugin settings, it's automatically added the HubSpot unsubscribe and web links, and it's got our company tags which HubSpot also wants when you create emails in HubSpot.  That's just a really quick but important note just to make sure you do have those tags in there, otherwise HubSpot may not show your template when you go to upload it.
 
Okay, now that we've got our HubSpot footer in there we just want to go back to the export panel by clicking on export again and it's kept my API key in there that we just pasted in we've got HubSpot marketing hub selected; everything's perfect ready to go, so all we need to do now is click on the "Upload to HubSpot" button. I'm going to click that now, this is going to generate all of the HTML for my email automatically, it's going to export all of the image content, it's going to upload those, and then once that's done it's going to send that template automatically into HubSpot. 

It's confirming that our HubSpot template's been uploaded and to view it we just need to log into our HubSpot account and then it's telling us to click on the "Marketing" menu item and we'll do that now; we'll click on "Marketing", go down to "Email", and then it's saying to go to the "Create email" button and then click on the "Regular" email type; I'm just going to do that now, and then if we click on the "Custom" tab up here you'll see that our email that we just uploaded is now in HubSpot. We can preview that by clicking on the "Preview" button, and this is just loading up a HTML preview of the email that we just uploaded; all the image contents in there, all of the images that we added and that's looking good, we can see our view view in the browser links in there, we've got everything that we wanted set up. 

That's in there now, and that's pretty much good to go. You can now use that as a email, so if I want to call this "Sushi Email" for the "Jiro Sushi Restaurant" that we've made up, and now there we go, you can see that we've got our brand new email campaign with the custom template that we just uploaded from Figma into HubSpot, and that's looking really good. You can send yourself a test email, you can schedule that send, assign it to a list, and things like that, but basically that's gonna take the template that we just uploaded from Figma and send that out when you're ready to save it. I'm just going to save that; I'm not going to send it out for now, I just wanted to show you how to upload it.

Just as a further step to see where that's actually coming from, what you can do is go down to the "Marketing" menu again, go down to "Files and templates", and then click on the "Design Tools" link; I'm going to do that now, and you can see here on the left hand side, this is our files and folders for the design tools files and folders. You can see that there's a new folder in here called "emailify", that automatically gets created when you upload the template from Figma into HubSpot, and we can see here that there's an HTML file in there; that's actually the HTML file that was just uploaded from Figma into HubSpot just a few moments ago; that's actually where the file's coming from. 

You can see in here it's got a template type of "email"; because it's got that tag in the HTML, which the Emailify Figma plugin automatically adds in, that's why it's showing up in your email templates; because it's got that little tag in there and it's sitting in this files panel, the emails page basically just automatically picks that up as a custom template and that's how it's getting added. 

You can actually go ahead and make changes to this file if you wanted to if you really wanted to do it in HubSpot, you can edit the HTML in here after it's been uploaded, and that's totally fine if you want to do that. I just thought I'd mention where those files are actually getting sent to in case you wanted to either remove them, or clone them, or rename them, or do anything; create a new email from them, all that sort of good stuff. 

That's that's really it; that's the whole process of exporting the email templates from your Figma designs into HubSpot. It's much quicker than manually uploading all the images, manually modifying all the HTML to make sure it's compliant with HubSpot's templating language; they have some strict requirements with the way the template needs to be structured and all that sort of stuff, so the Figma plugin the Emailify Figma plugin basically injects a bunch of those required tags in automatically. 

Then as I said, you basically want to go ahead and add the HubSpot template, the HubSpot footer template that's underneath the "Footer" category in the email components, and that's going to automatically inject those links that we really want. If those aren't in there, HubSpot will get a bit angry, and it won't actually let you view or send the template; it definitely needs the "unsubscribe" link and it needs these "company" details as well; like your company address and all that sort of stuff. These will actually get dynamically swapped out in HubSpot based on the information that you've got in your HubSpot accounts profile, so that's just something to be mindful of. 

If you are seeing a blank template page, where there's nothing on the template, it's possible that you haven't included the HubSpot footer. Just go ahead and click on that and that will just add that in there; but other than that, that's pretty much all you need to know. You've got that integration built in now, so as long as you've got your HubSpot API key, that's all you need; you just paste the API key in, select the "HubSpot" item and then click "Upload To HubSpot", and you can upload as many templates as you need to. If you have multiple frames, this will automatically upload multiple frames as well, so it just speeds up the whole workflow if you are a HubSpot user and want to be integrating this with Figma.

We'll leave it there for today, it's a fairly brief Figma tutorial just so you can go through those steps visually, as I know it's a bit tricky to figure out where the API keys are and where the files are getting sent to. I just wanted to cover that in detail, and that's all there is to know. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to export HTML email tests from Figma to Email on Acid using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-11-15T00:00:00.000Z
dateModified: 2021-11-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-email-tests-from-figma-to-email-on-acid-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-email-tests-from-figma-to-email-on-acid-using-emailify.md
---

# How to export HTML email tests from Figma to Email on Acid using Emailify

#### Video Transcript

Today I'm going to be showing you how to upload your HTML emails from Figma into the Email on Acid platform, and this is going to allow you to test out your HTML emails on a bunch of different devices and email clients to see how they look across all those mobile and desktop clients.

The first thing we need to do is just install the Emailify Figma plugin by going to the Figma Community, searching for the word "Emailify", and under the "Plugins" tab you'll see "Emailify" pop-up, and all you need to do is click on the "Install" button and you'll be ready to go.

If you jump back into your Figma canvas and just right-click anywhere, go down to "Plugins" and then go to Emailify that's just going to open up the Figma plugin that we just installed a moment ago. You'll notice that I've already got an email that I've designed using the Emailify Figma plugin, so if you haven't already done that, we have another Figma tutorial on our YouTube channel that goes through that in detail; it might be worth checking that out first. For this Figma tutorial I'm going to assume that you've already designed an email using the Figma plugin and we just want to export it into our Email on Acid account to do some testing.

To do that, we just click on the "Export" button in the Figma plugin, and by default it's going to come up with the "HTML" option, which is going to download the HTML to our computer, but for today we want to actually change that. I'm going to click on that select box, scroll down to the bottom where it says 
"Upload For Testing", and just click on the "Email on Acid" option, and you can see here that it's just changed so these two input boxes to come up. 

That's asking for our API key and our password. The "password" is actually the password that you use to log in to your Email on Acid account, and I've already got that copied, so I'm gonna paste that in there, but that's the password you basically log into your Email on Acid account in the browser with. Then for the API key, if you click on this link here it will take you to your account page, which is this one, as long as you're logged in and if you're logged in and you click on that link you'll see a label called API key; next to that label we've got our API key. I'm going to highlight that, I'm going to copy it to my clipboard by doing Command + C (or that's Control + C if you're on windows).

Once you've copied that API key from Email on Acid, just jump back into the Figma plugin and paste that key into the API key field. I've just pasted that in there and I've done that using Command + V (or you can use Control + V if you're on windows), but that's all good to go now. I've got my Email on Acid API key and my Email on Acid password; that's all set up. I've got one email that I'm going to send, I'm happy with it, so all I need to do now is just click on the "Send To Email on Acid" button; I've clicked that, now it's exporting and generating all the HTML for my email, it's exporting all the images, and it's going to upload them; then once that's all done, it's going to send it into our Email on Acid account. 

It's just finished, it's telling us that our Email on Acid tests have been uploaded and we can view the tests by clicking on this link, as long as we're logged into our account. If we jump back to that link, that's going to take us to our "Projects" page. I'm just going to refresh that, and we can see now that it's just popped up with our test. We can see that we've got our "Welcome to Jiro Sushi" email which we just sent from our Figma design, and I can click on that and get a bit of a sense of what it looks like in all different devices and email clients. 

We've got our mobile devices here; we've got iPad Pro, iPhone, iPhone SE, iPhone 11; all these different devices, we've got our Gmail on mobile, and then we've got a whole bunch of desktop clients as well. We can just see a bunch of different Outlook clients which are usually notoriously strange, you can see there's the the border radius doesn't show up on Outlook; that's one little thing we've seen, unfortunately that's just the way it is; that's fine. Then a bunch of web clients as well; we've got a bunch of web clients like Gmail, and you can see that on Chrome, on Edge, on Firefox etc. If you're already using Email on Acid you probably already know all this, but for anyone who's new to testing emails, this is what it looks like. 

The cool part is we didn't have to go through any extra steps in the web interface to get this test in there, this was sent directly from our Figma designs with one click straight into our Email on Acid account. As long as you've got your API key in there and as long as you've got your password in there, you can just keep sending tests over and over into Email on Acid from Figma; that's just going to cut down the time to get your tests into Email on Acid rather than having to do it manually each time. It should be a fairly big boost to your workflow, it should help speed that up a little bit more and take a lot of that manual work out each time. 

Then the neat thing is you can then re-export the email if you're happy with your tests; it's just as easy as changing the export platform from Email on Acid to your ideal email platform; if you're uploading it to Klaviyo or MailChimp Postmark or HubSpot etc, you can just instantly change that, and then just straightaway upload it into MailChimp, or download it to your computer, or do whatever you want with it. It's super easy just to switch between testing and rendering out the the version that you actually want to send.That should be that should be much easier, and take a lot of the manual effort out. 

Okay, that's the whole Figma tutorial; it's not too complicated once you've got your keys sorted out. That's that's pretty much it, so thank you as always for watching, and I hope it's helpful if you're an Email on Acid user and you've been wanting to have an integration with Figma set up through the Emailify plugin. I'm been happy to let you know that that's all shipped and available today, so I hope you enjoy using it, and as always, we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Postmark using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-11-15T00:00:00.000Z
dateModified: 2021-11-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-postmark-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-postmark-using-emailify.md
---

# How to export HTML emails from Figma to Postmark using Emailify

#### Video Transcript

Today I'm going to be showing you how to upload your HTML emails out of Figma into Postmark automatically using the Emailify Figma plugin.

To get started, we can just jump into Figma, and we'll just need to install the Emailify Figma plugin by going to the Figma Community, searching for the word "Emailify", and if you click on the "Plugins" tab you'll see Emailify pop up; and all you need to do is click on the "Install" button on the right hand side here and then you'll be ready to go. 

To run the Figma plugin we just right-click anywhere on our Figma file, go down to "Plugins", click on "Emailify", and that will run the Figma plugin we just installed. I've already designed an email using the Emailify Figma plugin; if you haven't already done that you might want to check out one of our other YouTube videos which covers this in detail, and it'll show you how to design your own emails using the Emailify Figma plugin. For today, I'm just going to be assuming that you've already designed your email and you just want to get it out of Figma and into Postmark. 

To do that we just go ahead and click on the "Export" button in the header of the Figma plugin, and by default you'll notice that it's set to "HTML" as an export option. We basically want to change that option by clicking on the drop down and instead of downloading it to our computer as an HTML package, we actually want to click on one of these "Upload to platform" options, and for today's Figma tutorial we're just going to be uploading into Postmark. If you go ahead and click on the "Postmark" option and you'll notice that reveals a new input field down here, and that's basically asking for your Postmark API key. 

If you click on that link, that will show you how to get to that page, but I've already logged in to Postmark. In the browser, after you log into Postmark and just click on your "Servers" tab, and you've probably got a few servers or maybe just one; I'll just click on mine which is just one. I'll click on my server and then that's going to bring me to my Postmark server page, the individual server, and all you need to do is click on the "API Tokens" tab up here; click on that, and you should already have an API token in there. You can just click on that token and that will copy it to your clipboard. You can also generate a new one if you need to, but today I'm just going to be using the one that's already there and copying that. 

I've definitely copied that, and now I'm jumping back into my Figma file, going back to the Emailify Figma plugin clicking on this input field, and just pasting that in there using Command + V (but you can use Control + V if you're on windows). I've just pasted in my Postmark API key into the API key field in the Figma plugin and that's ready to go now. That's all you need to do to authenticate it. 

Now I've got my emails ready to go, I'm happy with my subject line and all that sort of stuff, so I'm just going to be uploading one and now that I've got my API key in there, all I need to do is click on this "Upload to Postmark" button. I'll go ahead and click on that now, and this is going to generate all of the HTML for me automatically, it's going to export the image assets and upload them, and then it's going to automatically send that HTML directly to my Postmark account. 

It's just finished, it's telling us that our Postmark template has been uploaded and we can view that by logging into our Postmark account, clicking on "Server" then clicking on the "Templates" tab. I'm already logged in, soI'm just going to jump back into my browser, go back to my Postmark account, it told us we have to click on our "Server" tab, click on the server that we got the API key from, and then it said to click on the "Templates" tab; I'm going to go ahead and do that, and there we go. You can see that's our template; that's just been uploaded from the Figma plugin, it's just been uploaded into our Postmark templates list. 

If I go ahead and click on that template, you can see here that it's got our subject line that we included, it's got all of our HTML; this is all been inlined you don't need to worry about running it through any extra CSS processor or inliner or anything like that, all the code is there, ready to go. Then we can click on the "Preview" tab to get an actual HTML preview up, and we can see here it's exported everything the way that we designed it in Figma; this is all real HTML text and the images which have been uploaded and all of that sort of stuff.

That's basically it; that's how you can really easily upload your HTML email templates from Figma into Postmark using the Emailify plugin, and if you have multiple emails in your design, it'll upload any of the emails that you check; you can you can upload a few at a time if you've got some different email designs that you want to get into Postmark, they'll just show up in your templates list.

The other thing worth noting is that if I do upload the email again, it's just going to create a new version of it. You'll see a new version pop-up and it'll probably have a "dash 1" at the end of this little url name down here; and the reason for that is it doesn't actually override the template each time because you can actually make changes if you wanted to make some manual edits in the HTML here and save that. We don't want to override that by accident by re-uploading the the template, so basically it will create a new version. If you've got multiple versions in there, you can remove them just by clicking on the "Delete" button if you don't want to keep them all in there, or you can just leave them, but you can go ahead and delete those as well if you just want to tidy it up.

That's basically it; it's very simple, much easier than manually going through that process of uploading your HTML emails from Figma to Postmark after they've been exported. If you're a Postmark user, definitely check out this Figma integration, it should hopefully save you a bunch of time if you're in the habit of uploading emails regularly; I hope you get some benefit from it with you or your team using Figma and Postmark. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Klaviyo using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-11-14T00:00:00.000Z
dateModified: 2021-11-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-klaviyo-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-klaviyo-using-emailify.md
---

# How to export HTML emails from Figma to Klaviyo using Emailify

#### Video Transcript

Today I'm going to be showing you how to export your HTML emails directly from Figma into your Klaviyo email templates directory.

We're going to be doing this by using a Figma plugin called Emailify. You can install that by just going to the Figma Community, searching for the word "Emailify" and under the "Plugins" tab you'll see "Emailify" pop-up; all you need to do is click on the "Install" button on the right-hand side, and then you can jump back into your Figma file.

To run the Figma plugin, you can just right-click anywhere, go down to "Plugins", then click on "Emailify", and that will run the Figma plugin that we just installed. This Figma tutorial assumes that you've already designed an email using the Emailify Figma plugin; if you haven't done that before, we have another tutorial on that on our YouTube channel that's worth checking out, so if you want to do that first and then come back, that's one option, but this video just assumes you've already got one ready to go that we can export.

To export this email we're just going to go ahead and click on the "Export" button in the Figma plugin's header, so go ahead and click on "Export" and that's just going to bring up the list of our emails and the Figma plugin's export options. By default, it'll set it to HTML; this will basically download a package of HTML files and assets directly to your computer, but for today we want to actually export it out to Klaviyo automatically.

To do that, we just click on this little drop down, and instead of downloading to our computer, we want to actually go to the upload to a platform grouping down here. Today we're going to be using Klaviyo, so I'm just going to click on the "Klaviyo" option, and you'll notice that's just changed the options down here; it's giving us a little link to get our Klaviyo private API key. If we go ahead and click on that link it'll open up our API key page in the browser. If you're not already logged into your Klaviyo account you'll have to do that, but once you're logged in and you go to this page you'll be able to generate your API key that we're going to be using. 

Once you're on this page, on your Klaviyo API key page, all you need to do is go ahead and click on the "Create private API key" button down here in the bottom right, so I'm going to click on that, and that's just created a brand new private key for me. I can label that, so I'm just going to say "Emailify Figma Plugin" just so we can reference what it is at a later date. Save that label, and then the private API key is just sitting behind this little icon here; if you click on that icon it'll reveal your private key. All you need to do go is go ahead and copy that, so just highlight the private key and copy it with Command + C (or Control + C if you're on windows) and then now that you've got the key copied, you can jump back into Figma, and click on this private key API input box here in the Figma plugin. I've clicked on that, and now I'm just going to paste it with Command + V (or Control + V if you're on windows), and you can see here it's just pasted in our brand new Klaviyo API key. 

That's perfect, that's exactly what we we need to authenticate the the upload, and then you just want to make sure you've got your subject line filled out and your pre-header text if you want to include that as well. In my case, I'm happy with all this, my email is ready to go; now all we need to do is click on the "Upload to Klaviyo" button; I'm going to go ahead and do that now, and this is just going to generate all the HTML automatically for us, it's going to export all of our image assets, upload them online so they're all hosted, and then it's going to send that template directly into Klaviyo.

It's just told us that our Klaviyo template has been uploaded, so we can jump into this Klaviyo templates page. If we click on that and open up another browser window that's going to link us to this page here which is the Klaviyo email templates list. I'm just going to refresh that page, and you can see here it's just now created a brand new template with the email that we just uploaded. You can see here we've got our preview, I can jump into that by clicking on the title and that's going to load up our template. You can see here it's automatically uploaded all of the HTML, this is production ready HTML that's been uploaded and generated from the Emailify Figma plugin that we just uploaded a moment ago. That's all in there, it's all been inlined so you don't have to worry about running it through any CSS pre-processors or anything like that to get your CSS in there, it takes care of all of that for you. 

You can preview it visually just by clicking on the "Preview" tab up here and that's going to let you actually scroll through the email visually and see what it looks like when it when it's rendered. You can see here this is all HTML, this is all of our content as we'd expect, and that's everything we we designed and uploaded in Figma all looking really nice. You can go ahead and preview that email, so if you wanted to send a test email to yourself you can go ahead and do that, and that'll work just fine. If you've already used Klaviyo before you're probably aware of all the other things you can do now that you do have the email template set up.

This this is really taking care of that extra step that you normally have to go through, which is manually creating templates, which can be a little bit annoying. For example, you'd normally click on the "Create Template" button here, go through this kind of process and then you have to manually zip up your images, and make sure they're all zipped up, then you have to manually upload your HTML file and make sure that's kind of pointing to all the right places, and it's just a bit of a headache. This Figma plugin integration will make it much easier if you're a regular Klaviyo user and you want to get those emails out of Figma out of the Emailify plugin as quickly as possible directly into your Klaviyo templates list. This integration lets you do that really easily, and I know we only did one email in this case, but if you have multiple emails you can use the same feature and it will loop through those and upload them one by one and you can you can upload a bunch of them at the same time if you need to do that as well. That should save even more time if you've got a bunch more HTML emails that you need to upload from Figma to Klaviyo. 

The other thing worth being mindful of is each time you do this, it will create a new email template; it won't override the existing templates in your Klaviyo templates page, and that's just because you can actually edit the templates inside of Klaviyo. If someone has gone ahead and edited that template and then you've re-exported it or re-uploaded it from the Figma plugin, that's going to wipe out all of your edits and override it. By default, the Figma plugin just creates a new version in your email templates each time, so you can kind of keep track of those versions and delete these ones if you don't need them anymore or whatever. 

That's just something to be mindful of, but hopefully if you're a Klaviyo user and you've been wanting to make this process uploading your HTML emails from Figma into Klaviyo email templates a bit more seamless, as I know a lot of you have been requesting and asking for in the comments on the previous video, then this is probably the easiest way to do it. This is pretty much as direct as you can get directly from the plugin Figma plugin straight into Klaviyo, so that should help speed up your workflow a little bit.

That's the whole Figma tutorial; it's fairly straightforward, all you really need is your private key from your Klaviyo account and you're ready to go. Just make sure you've got that Klaviyo option selected, and you can just upload as many emails as you want. That's pretty much it, that's the whole Figma tutorial; and thank you as always for watching. We'll be back soon with some more Figma tutorials just like this one, and we'll catch you then; stay tuned.

---

---
type: tutorial
title: How to export HTML emails from Figma to MailChimp using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-11-13T00:00:00.000Z
dateModified: 2021-11-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-mail-chimp-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-mail-chimp-using-emailify.md
---

# How to export HTML emails from Figma to MailChimp using Emailify

#### Video Transcript

Today I'm going to be showing you how to export your HTML emails directly from Figma into your MailChimp email templates page under your MailChimp account.

The way we're going to be doing this is using the Emailify Figma plugin, and to install that you can just go to the Figma Community, search for the word "Emailify" and under the "Plugins" tab you'll see Emailify pop-up. If you just click on the "Install" button then you'll be ready to go.

I'm just going to jump into my Figma file and run the Figma plugin by right-clicking anywhere, going down to "Plugins", clicking on "Emailify" and that's just going to open the Figma plugin we just installed.

It's worth noting that I've already designed my email using the Emailify Figma plugin, so if you haven't done this before and you're interested to know how to do that, there's another video on our YouTube channel that will help you do that; it's a really in-depth tutorial, so check that one out first if you haven't. If you've already got a design and you just want to export it, that's what this tutorial is going to be going through today. 

To export our email from Figma into MailChimp, we just get started by clicking on the "Export" button in the Figma plugin, and that's just going to bring up the export options. By default, it will export an HTML package, or HTML packages to your desktop or your download folder, and instead of downloading it to our computer today, we actually want to be uploading it to a platform; and in this case we want to be doing it to MailChimp. We just click on the export options drop down, go down to "MailChimp" and select that, and that's just going to change the options down here to ask for your MailChimp API key. You can get the API key by clicking on the "MailChimp API Key" link, and then going into your browser which will open up. 

As long as you're already logged in you'll see your API keys page load up; once the page loads up you just have to go down to the bottom and click on the "Create a key" button. I'm going to click on that now, that's just going to refresh the page and tell me that I've got a new API key that I can use. If I scroll down you can see down here that it's just created a brand new one; I'm just going to label that "Emailify" just so I know what it is in the future. Over in the "API key" column you're just going to click on that input box which will select the text from the API key that it's just generated, and you just want to copy that; either Command + C (or Control + C if you're on a Windows machine). 

Once you've copied the MailChimp API key, jump back into Figma, jump back into the Figma plugin, and in the input field next to the "MailChimp API key" label you just want to go ahead and paste that key in, and that's just going to paste that straight into there. You can see that's that's worked really well, and once that's done just make sure that you've selected the emails you want to upload and make sure they've got a subject line and pre-header, because that will also get included. You can change that, so I can just remove that and just change that subject line and then once that's ready to go all you need to do now is click on the "Upload to MailChimp" button, click on that now, and now that's going to actually generate our HTML automatically, it's going to export all the images, upload all of those images, and then upload the template itself into MailChimp.

That's all done now; you can see we've got a confirmation saying that our MailChimp template has been uploaded, and if we go ahead and click on the "MailChimp templates" link, so I'm going to do that now which is going to open up that page again, you can see here it's changed from being a blank screen with no templates to this template that's just been uploaded directly from the Figma plugin. We can open that up just by clicking on the title, and I'll just move this over so we can see what's going on here, and there's our email. That's all HTML you can see, the actual code has been uploaded directly into MailChimp here, so that's all of the HTML and CSS, and it's all inlined; you don't have to do any crazy inlining with the CSS or anything like that, it's automatically taken care of. 

This is our preview over here, and you can see it's looking really nice; the images are all loaded, all the contents are loaded, and we can actually preview that in different devices. We can change it from desktop to mobile and see what it looks like, it's looking pretty good on there as well. That's our email, all uploaded into MailChimp, we didn't have to go through the somewhat painful process of uploading the template manually by zipping up the images folder, zipping up the HTML, dragging that in, creating the new template; especially if you've got multiple ones, that can take a little while. The good thing about this is if you have multiple emails, it'll also export those multiple emails all at the same time as new templates in your MailChimp templates from the Figma plugin.

One thing to be mindful of is if you're re-uploading this template and you've made some changes and you want to re-upload it; by default, it will just create a new template in your MailChimp templates page, so it's not going to override the template that's already been uploaded. The reason for that is because you can actually go ahead and make manual changes in MailChimp; you can actually edit the HTML in MailChimp, so if you've made a bunch of changes manually and we're happy with those in MailChimp, we don't want to go ahead and override those automatically and assume that we want to override that. It'll just create a brand new version and that way you can get rid of any other versions or go back to other versions in your templates list if you want to do that. Otherwise you can just manually update it and don't worry about re-uploading from Figma if that's the last version you're going to use. That's what that looks like there.

That's basically it; this is just a much more streamlined way of getting your HTML out of Figma into MailChimp automatically without having to manually copy and paste that HTML and zip up images and things like that. Hopefully that's helpful if you're a MailChimp user and you're an Emailify user; I know a lot of you have been wondering when these integrations might be shipping, so we're just starting to ship them out now and there will be some more platforms coming soon. Thank you as always for watching, and as I said, we'll be back very soon with some more Figma tutorials just like this one in the near future, so stay tuned.

---

---
type: article
title: Figma workflows that save designers time every week
description: The recurring Figma workflows that eliminate repeated edits, exports, and delivery work.
datePublished: 2021-11-12T00:00:00.000Z
dateModified: 2021-11-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/figma-workflows-that-save-designers-time-every-week/
markdownUrl: https://www.hypermatic.com/articles/figma-workflows-that-save-designers-time-every-week.md
---

# Figma workflows that save designers time every week

The recurring Figma workflows that eliminate repeated edits, exports, and delivery work. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### CopyDoc

[CopyDoc](/copydoc/) is one of the more useful tools in this workflow. CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

### Weblify

[Weblify](/weblify/) is one of the more useful tools in this workflow. Weblify is helpful in this workflow because the biggest gap is often between a finished design and usable code output. Cleaner snippets and inspect-friendly output help teams move from mockup to implementation with less rework.

### HyperCrop

[HyperCrop](/hypercrop/) is one of the more useful tools in this workflow. HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: tutorial
title: How to count words and characters in Figma text layers using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-11-10T00:00:00.000Z
dateModified: 2021-11-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-count-words-and-characters-in-figma-text-layers-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-count-words-and-characters-in-figma-text-layers-using-copy-doc.md
---

# How to count words and characters in Figma text layers using CopyDoc

#### Video Transcript

Today I'm going to be doing a really quick Figma tutorial to show you how to count the number of words, characters, sentences and paragraphs in any of your Figma text layers inside of your designs.

The first thing we need to do is just jump into the Figma Community search for the word "CopyDoc", and under the "Plugins" tab you'll see a result called CopyDoc pop up; all you need to do is click on the "Install" button on the right hand side and you'll be good to go.

Now we've done that, we can jump back into our designs and just run the Figma plugin by right clicking anywhere, going down to "Plugins" and clicking on the "CopyDoc" Figma plugin, and that's just going to open up the Figma plugin we just installed a minute ago. 

So, this is really simple, I'm not going to be covering any of the other features of the Figma plugin today, I'm just going to be showing you how to count your Figma text layers. It's really simple, all you have to do is while the Figma plugin is open, just go ahead and click on any of your Figma text layers; for example, I've clicked on this one, and you can see down here at the bottom of the Figma plugin, it's automatically giving us a count of that Figma layer. We can see this layer that we selected, the "Avengers: Endgame" layer has 19 characters, three words, 1 sentence and 1 paragraph. 

We can choose a different one, so if we go to a bigger paragraph or a bigger set of text, we can see this one's a little bit longer; it's telling us we've got the 2 paragraphs, there's 10 different sentences in that block of text, 125 words and 741. 

We can also do multiple layers; if you wanted to check it out with the title or the subtitle here, you can select both layers and you can see here the count automatically updates. 

We could add this other layer as well; I've got the 3 layers as you can see here in the brackets, so that's just a really simple way of counting up all those bits of text by selecting multiple layers, and you can select as many Figma text layers as you want. If you want to do it in the Figma layers panel on the left hand side here, that's another way you can go about it, if you want to select those different layers, otherwise feel free to just double click on your layers in your design, and that's just going to swap that out there.

As I said, this is a really, really quick Figma tutorial; I just wanted to show you this new feature of the CopyDoc Figma plugin, and if you've been wanting to count the number of words, characters, sentences or paragraphs in your Figma text layers, single Figma text layers or multiple Figma text layers, this is a really, really quick way of doing it. You don't have to go into any of these features, you can just immediately see it here anytime that you've got the Figma plugin open, and just click on those FIgma text layers to get that information out really quickly.

I hope that helps you if you've been wanting to do this, and as always, thank you for watching. We'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: article
title: Best Figma plugins for product teams
description: The best Figma plugins for product teams that need smoother design review, handoff, QA, and content workflows.
datePublished: 2021-11-01T00:00:00.000Z
dateModified: 2021-11-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-product-teams/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-product-teams.md
---

# Best Figma plugins for product teams

Product teams rarely struggle because they do not have enough ideas. They struggle because the work between design and shipping is full of friction.

There is feedback to collect, copy to update, builds to QA, prototypes to share, and implementation details to hand off. The best Figma plugins for product teams are the ones that make those handoffs less fragile and less manual.

### Commentful for structured feedback

[Commentful](/commentful/) is a strong fit for product teams because it helps separate “we need feedback” from “we need more chaos”.

If your workflow involves PMs, designers, engineers, and stakeholders all weighing in on the same work, Commentful makes it easier to keep those comments organized and actionable instead of scattered across random channels.

### Pixelay for design QA

Once something is built, the argument usually shifts from “what should this look like?” to “why does this feel off?” [Pixelay](/pixelay/) helps answer that fast by comparing real URLs to the original Figma designs.

That makes it easier for product designers and engineers to spot spacing issues, visual regressions, responsive mismatches, and implementation drift before a release goes out.

### Weblify for developer handoff

[Weblify](/weblify/) is useful when the team wants to reduce the gap between a Figma design and implementation-ready output.

It can inspect layers as HTML, CSS, React, Tailwind, or Vue-friendly code, which gives developers a stronger starting point than a static mock and a vague spec. It is not a replacement for engineering judgement, but it can absolutely shorten the boring parts of handoff.

### CopyDoc for product copy changes

Product work is full of copy changes: onboarding text, empty states, upsell screens, form labels, validation messages, localization updates. [CopyDoc](/copydoc/) helps teams export, review, and re-import text updates without editing every string manually inside Figma.

That becomes even more valuable when PMs, content designers, or localization teams are involved.

### Crypto for private sharing

Some product work is fine to share broadly. Some of it should stay locked down until launch. [Crypto](/crypto/) helps teams share protected design links or PDFs when privacy matters more than open collaboration.

### What most product teams actually need

The best single plugin depends on the bottleneck.

- If reviews are messy, start with [Commentful](/commentful/)
- If QA is slow, start with [Pixelay](/pixelay/)
- If handoff drags, start with [Weblify](/weblify/)
- If copy keeps changing, start with [CopyDoc](/copydoc/)
- If sharing is sensitive, start with [Crypto](/crypto/)

For teams that feel friction across all of those stages, a broader stack or the [Pro Bundle](/bundle/) is usually the better long-term answer.

---

---
type: article
title: Figma production checklist for marketing teams
description: A marketing-team checklist for turning Figma work into launch-ready emails, ads, decks, and assets.
datePublished: 2021-10-26T00:00:00.000Z
dateModified: 2021-10-26T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/figma-production-checklist-for-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/figma-production-checklist-for-marketing-teams.md
---

# Figma production checklist for marketing teams

A marketing-team checklist for turning Figma work into launch-ready emails, ads, decks, and assets. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Emailify

[Emailify](/emailify/) is one of the more useful tools in this workflow. Emailify matters in this workflow because email work often gets rebuilt after design. Keeping layout, content, and export closer together removes a lot of duplicate effort from campaign production.

### Bannerify

[Bannerify](/bannerify/) is one of the more useful tools in this workflow. Bannerify is useful here because it keeps banner production inside Figma instead of pushing the team into a separate build step. For teams creating multiple ad sizes, motion variants, or late campaign revisions, that usually means less repetition and a cleaner review cycle.

### Pitchdeck

[Pitchdeck](/pitchdeck/) is one of the more useful tools in this workflow. Pitchdeck is helpful in this workflow because presentation work usually lives between design quality and practical delivery. Designing once in Figma and exporting to familiar deck formats is often the fastest middle ground.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: How to reduce manual work in Figma
description: The clearest ways to remove repetitive edits, exports, and handoffs from your Figma workflow.
datePublished: 2021-10-09T00:00:00.000Z
dateModified: 2021-10-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/how-to-reduce-manual-work-in-figma/
markdownUrl: https://www.hypermatic.com/articles/how-to-reduce-manual-work-in-figma.md
---

# How to reduce manual work in Figma

The clearest ways to remove repetitive edits, exports, and handoffs from your Figma workflow. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### CopyDoc

[CopyDoc](/copydoc/) is one of the more useful tools in this workflow. CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

### HyperCrop

[HyperCrop](/hypercrop/) is one of the more useful tools in this workflow. HyperCrop is useful here because image production usually means one source asset becoming many output sizes. Presets, batch workflows, and faster resizing keep that work from turning into repetitive frame maintenance.

### TinyImage

[TinyImage](/tinyimage/) is one of the more useful tools in this workflow. TinyImage matters in this workflow because production does not stop at design quality. Teams still need smaller files, cleaner exports, and faster pages. Keeping compression in Figma removes one more manual handoff.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: tutorial
title: Sync Google Sheets spreadsheet content to Figma using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-10-08T00:00:00.000Z
dateModified: 2021-10-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/sync-google-sheets-spreadsheet-content-to-figma-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/sync-google-sheets-spreadsheet-content-to-figma-using-copy-doc.md
---

# Sync Google Sheets spreadsheet content to Figma using CopyDoc

#### Video Transcript

Today I'm going to be showing you how to sync content from a Google Sheet directly into your Figma designs using the CopyDoc Figma plugin.

The first thing we need to do just to get started is jump into the Figma Community and search for the term "CopyDoc" and under the "Plugins" tab you'll see the result "CopyDoc" pop up; all you need to do is click on the "Install" button on the right hand side and then you'll be ready to go.

I'm just going to be using a really simple example of a movie app, and I'm going to be syncing up some content from a Google Sheet that I've prepared, so I'm going to show you how this works and how to structure the file for your own content. The first thing to note is that in your Google Sheets, if you've got a new Google Sheet set up, a new spreadsheet, the first row of that spreadsheet is basically your header row. The header row contains all of the labels for each of your columns, and each of the rows and the columns are going to be used to populate our Figma layers in just a minute. 

The reason these are important because they basically link up the content of your spreadsheet with the content of your Figma file; what I mean by that is you can see here we've got one column called "#Title", we've got "#Title" and if we look in our Figma file and look at our little movie poster here you can see that this layer name is also named "#Title". Same thing here, we've got "#Min" for the minutes, and we've also got an image layer of a poster and that's been named "#Poster". If we jump back into our spreadsheet in Google Sheets you can see here we've got a poster column, and each of those rows in the poster column are linking to an image online; what this means is it's going to basically map those layers together once we sync up the content in just a minute. 

If you do want to know how I got those images in there as well, you'll basically need to get your own images online or you can do something like a simple Google search; for example, if I wanted to add a new record or new row for the "Suicide Squad" movie, I would just Google that poster, right click on the image, go down to "Copy image address" in my right click menu, click on that, and back in your spreadsheet you basically want to paste that in there, and that's going to paste the image URL. As long as it's a image URL, and as long as the layer in Figma is also an image layer, or a frame layer, or anything that can have an image fill, the Figma plugin in a minute will automatically sync that together, which we'll go through shortly. 

Then you can just fill out the rest of your row as you as you normally would. We can just populate these other ones really quickly as well; we can do a review layer, just put the genre in there, and then we'll do a rating as well, okay; this spreadsheet is perfect now, it's ready to go. This is the exact same structure you'll need to use for yours. 

Now what we need to do is basically get this data into Figma, and the way we do that is just by clicking on the "Share" button in Google Sheets, and at the moment it's set to "Restricted", but for this to work we basically need to change this permission under the "Get link" heading; just click on that, and that's going to bring up this little drop down here. You want to change the "Restricted" option to "Anyone with the link", so click on "Anyone with the link"; that's just going to update the permissions, and now you can go ahead and click on the "Copy link" button. I'm going to click on that now, it's copied this share link for me, so I can close that off, and now we can go back into Figma plugin and finally run the Figma plugin.

If we just right click anywhere on the Figma canvas, go down to "Plugins", click on "CopyDoc", that's going to run the Figma plugin that we just installed a minute ago. In this tutorial I'm not going to be covering any of the other features of the Figma plugin, I'm just going to be looking at this new "Sync Spreadsheet Content" feature; we can open that up by clicking on the "Sync Content" button here. I'm going to do that now, and we're not going to be looking at the CSV or XLSX file upload today, we're just going to be looking at the "Sync Public Google Sheet" feature. Down here we've just copied our Google Sheets link; in our Figma plugin I'm just going to click on this input, paste the Google Sheet URL that I just shared or copied, and you can see here it's loaded in our spreadsheet columns from the Google Sheet. That's pasted it in, it's saying that it's a valid Google Sheet URL; that's all good to go, and we can see a preview right here. 

The next thing we need to do is just make sure that we've created enough of these posters that we want to actually populate. I've got my component here, again, you don't have to use a component, you can use a Figma frame or a Figma group or any any kind of layer like that; in my case, I'm just going to create three instances of the component, and I'm going to copy and paste those on my canvas and just move them around. Because they're instances, the layer names in those instances are also matching the headers from the Google Sheet as well. That's perfect, that's exactly what we want it to do. Now all we need to do is click on those four layers; I've got the component selected, and the three instances, and now that I've got those selected I can go back to my Figma plugin and I can click on this button called "Sync Spreadsheet Rows with Figma Layers", and it's telling me I've got four layers selected, so I'm going to click on that now. 

This is basically going to start mapping our content together; it's downloading the images that we specified in our Google Sheet, it's going through and downloading each of those in high resolution, and now it's going to sync up the content text-wise and image-wise with those Figma layers. You can see it's finished, it's updated 24 layers automatically, and that's pulled in all of the content from our Google Sheet directly into our Figma layers. We didn't have to do any manual copy pasting, we didn't have to do any manual dragging and dropping of images, it automatically populated that for us based on whatever we had put in our Google Sheet. 

Just to double check that, we can go back into our Google Sheet and you can see here it's gone row by row; we've got two, three, four, five and basically for each of the layers that we had selected, it'll loop through those selected layers and and just swap out any layers that it finds with those matching Figma layer names. That's exactly what it's done, you can see it swapped out the tags, it swapped out the titles, it swapped out the reviews and we've got all of our posters downloaded looking extremely sharp and swapped out without us having to do anything. 

That's how it works; that's the basic concept, so you could use this to populate lists to populate grids, you can use it for small screens, large screens, or you could run it on a whole file if you felt like it. It's a really powerful tool for automatically populating Figma content directly from a Google Sheet, or Google spreadsheet; and you can just basically use this format to populate any kind of content that you want, depending on what your use case is, for many rows as you want to put in, and as many rows as you want to copy and paste in your Figma file. It's really up to you to decide how you go about using it, so that's pretty much it for today. This is a brand new feature, something that we've been wanting to ship for a little while; very happy to get it out there and available for you to use in your own projects.

That's pretty much it, if you've been wondering how to sync up content from a Google Sheet, this is this is a really easy way to go about it. Feel free to give it a go with your own team or in your own projects, and thank you as always for watching; we'll be back soon with more Figma tutorials just like this one very shortly.

---

---
type: tutorial
title: Sync CSV spreadsheet content to Figma using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-10-07T00:00:00.000Z
dateModified: 2021-10-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/sync-csv-spreadsheet-content-to-figma-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/sync-csv-spreadsheet-content-to-figma-using-copy-doc.md
---

# Sync CSV spreadsheet content to Figma using CopyDoc

#### Video Transcript

Today I'm going to be showing you how to populate your Figma designs from content in a CSV spreadsheet file using the CopyDoc Figma plugin.

The first thing we need to do is just jump into the Figma Community and search for "CopyDoc", and when the first result pops up under the "Plugins" tab you can just go ahead and click on the "Install" button on the right hand side and that will install the Figma plugin and you'll be ready to go.

I'm just going to jump back into my Figma design and today I'm going to be using a movie application just to demonstrate how we can dynamically populate this movie poster block using content that we've populated in a CSV spreadsheet file. Before we open up the Figma plugin that we just installed, I'm going to jump into my Microsoft Excel spreadsheet; you can use other applications for this, if you want to use Google Sheets and save that as a CSV you could totally do that, or using the Mac "Numbers" app as another spreadsheet app and save it as a CSV, that's fine as well; for today I'm just going to be showing you how to do it in Excel, but the format will be the same regardless. 

The format we do need to use is fairly simple and it's going to be the same for your own content as well; the main thing to know is that the first row of your spreadsheet is effectively your header, and the header is going to be used to name your columns, and that's going to be used to map that content back into your Figma file; what I mean by that is you can see here for example this column header is named "#Title" and in my Figma design if I switch back into that, you can see here in my little movie poster component I also have a text layer with the same name. I've got "#Title" in my Figma layout, so that's the Figma text layer and I've also got my column name the same, so it's "#Title". 

The same thing is true for the reviews; in here I can see I've got a text layer with "#Reviews" and also in this image layer. I've got a poster, this movie poster layer which is an image in Figma and I've named that image layer also "#Poster" which matches up with the "#Poster" column in my CSV spreadsheet. What that means is we're going to actually automatically swap out that image dynamically in a minute when we run the Figma plugin, and it's going to automatically swap in this image content into our Figma design. 

To show you what that looks like if you do want to add your own images, it's fairly straightforward, you can either upload the images somewhere online on your own website and get your own link for your own images, or if you just want to grab something like a movie poster for example, you can just go to Google images, search for the image you want, open it up, and then in the image preview, just go ahead and right click on that, and then click on "Copy image address" and then back in your spreadsheet under your image column, whatever that happens to be, you can just paste that in there and that will paste in a URL to the JPEG image. The Figma plugin will automatically pick up on the link and if it's an image layer, it'll automatically swap that into Figma later. You can go ahead and just populate the rest of these; for example, I'm going to use the "Suicide Squad" movie for this latest row and I can just populate that the same way and now we're ready to go; our spreadsheet is all done now, this is the format that you can use for your own content. 

I've got four different movies that I want to add into my app, so now that we've got our CSV spreadsheet structured correctly, just make sure that you are saving it as a CSV, if you go to "File", "Save as", and then under the "File Format", you just want to make sure in whatever app you're using that ".csv" is selected; and you can just go ahead and save that to your desktop or wherever else is easiest. If it gives you this little warning, that's fine, it's just trying to get you to save it as a Microsoft Excel file; I do have another YouTube tutorial using that file format, but for now we're just going to ignore that and use the CSV file. 

I'm going to jump back into Figma now and I'm going to run the Figma plugin that we just installed a minute ago by right clicking anywhere on the page, going down to "Plugins" and then clicking on "CopyDoc", and that's going to fire up the Figma plugin that we just installed. I'm not going to be going through any of the other features in this Figma plugin today, you can check out our other YouTube tutorials for those; today I'm just going to be focusing on this brand new feature called "Sync Spreadsheet Content".

You can open that up by clicking on the "Sync Content" button in the Figma plugin, so I'm going to click on that now, and you can see here it's got an option to sync a CSV file. What we're going to do is we're going to grab the CSV file that we just saved to our desktop over here, and I'm just going to drag and drop that file directly into this little drop zone in the CopyDoc Figma plugin. I'm going to let go of the mouse now, drop that in, and you can see it's instantly loaded up my spreadsheet columns from the CSV file, and it's giving me a preview of the headers; the headers of these little bold tags that it's pulling in the first row from our spreadsheet, and then it's also pulling in the second row from the spreadsheet content to give you a little preview of what each content might look like just to sort of show you what each of these relates to. 

Okay, now that we've done that, the last thing we need to do is just duplicate our original Figma layer. I'm using a component but you can use other groups as well; you could use a frame or a Figma group today I'm just going to be copy pasting this component into three new instances of the component; I'm just copy pasting those normally and moving them around and because these are copied instances, just to confirm you can see here the naming of those text layers and image layers are importantly still named the same as our spreadsheet headers over here. 

Now that we've copied those, that was kind of the last step, and all you need to do is now select those Figma layers; you can see in my left hand side here I've got all four of those layers selected and now in our Figma plugin you can see it's telling us we've got the four selected layers. What I'm going to do now is just click on the "Sync Spreadsheet Rows with Figma Layers" button; I'm going to click that, and what that's going to do is it's going to go through and download all of those high resolution movie posters, it's going to swap that in to all of our Figma layers and also update all the text. That's done now, you can see it's told us that it's updated the content for 24 different layers in Figma, and it's looking really good. We've got our dynamic posters, so instead of just having it all the same, it swapped it out without content from the CSV spreadsheet. 

We can verify that just by having a quick look, and basically the way it works is it loops through each of those selected Figma layers and then also loops through at the same time each of these rows; for each selected layer, it will use the data from one row and it will automatically swap out any matching layers it finds with these header labels, and that's exactly what it's done. You can see we've got the "No Time To Die", "Dune", "Black Widow" and "Suicide Squad" all swapped out, all the minutes are swapped out, all the reviews are swapped out, the tags are all swapped out, and of course the images have all been replaced.

That's basically it; it's fairly simple once you figure out the structure, once you get an idea of how the spreadsheet's meant to be set up just like this. You can use this format in your own CSV spreadsheets to sync with Figma as well, but once you've once you've mastered that, it's a really simple process. You can use this feature as much as you want to update any kind of grids, lists or any sort of repeatable content; it's very, very useful for that. 

If you've been wondering how to sync repeatable content from a CSV spreadsheet into your Figma design designs this is a really, really simple way of going about it; and unlike another tutorial with the Google Sheets, this is all local to your computer as well. If you work at a company that doesn't let you use Google Sheets or something like that, which is this other feature down here, then maybe the CSV option is going to be more to your liking.

That's it for today; I just wanted to keep it simple as possible and as short as possible. Feel free to use this CSV spreadsheet sync feature in your own Figma workflow, or with your own team, if you've got a bunch of copywriters on your team and and need to do some efficient content updates, then this might be an option for you to try out. Thank you as always for watching, and we'll be back back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: Sync XLSX Excel spreadsheet content to Figma using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-10-06T00:00:00.000Z
dateModified: 2021-10-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/sync-xlsx-excel-spreadsheet-content-to-figma-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/sync-xlsx-excel-spreadsheet-content-to-figma-using-copy-doc.md
---

# Sync XLSX Excel spreadsheet content to Figma using CopyDoc

#### Video Transcript

Today I'm going to be showing you how to sync content from an Excel spreadsheet dynamically into your Figma designs to populate multiple blocks of content.

The first thing we need to do is just install a Figma plugin called CopyDoc; if you go to the Figma Community and search for the word "CopyDoc", and with the first result that pops up just go ahead and click on the "Install" button on the right-hand side, and once you've done that you'll be ready to go.

Today I'm just going to be using a really simple example of a movie app, and what I'm going to be doing is syncing up our content from an Excel spreadsheet and dynamically populating these movie posters inside the app. The first thing we need to do is open up Microsoft Excel, or you could use a different spreadsheet software like Google sheets or something like that, but today I'm just going to be using Excel. 

It's important to understand how the spreadsheet needs to be formatted in order for this feature to work; it's pretty straightforward, the first row of the spreadsheet is basically the headers that are going to be used to label the different bits of content in your design. For example, in my case with the movie app, we've got things like a "tag", we've got "reviews", we've got a "title", we've got "minutes", we've got a "poster". Basically what I'm doing here is I'm labeling these headers with the name that I'm going to be naming my Figma layers. 

If we jump back into Figma and jump into our design over here, you can see that I've already named these layers to match the headers from the spreadsheet. For example, with the "comedy" tag I've named that "#Tag" and you can see in my spreadsheet I've also got that named as "#Tag" as well; I know that's a bit confusing hashtag and #Tag, but for example, we've got title as well. We can go down to here and you can see under the title; the title text layer has been named "#Title" with a hash in front of it and it's exactly the same in my spreadsheet; that's kind of cool because it means we can map these bits of content from our spreadsheet directly into our layers in Figma just by naming them the same, and then anything underneath that first row in your spreadsheet is going to be used as a content row that's going to be populated into Figma. 

If that doesn't make sense, I'll show you exactly what that means in just a moment. What I'm going to do is I'm actually going to duplicate this block or this component now that the layers have actually been named to match the spreadsheet, and I've also done that for the image; because I want this image to also be be dynamic I've named the image layer "#Poster", and I've done the same thing in my spreadsheet as well; that's going to allow us to not only do text layers but also do images. 

I'm going to duplicate this component; I'm just going to copy that normally, paste it, and I'm just going to do a little grid layout here. I'm just going to do four blocks for now; all I've done is just copy that original component, and it doesn't have to be a component, but in this case it's just a component, and I've created three more instances and they also have those same named layers. You can see here they're all named. Okay, that's all set up now, and we have our content in here and I just want to really quickly show you how to get these images in there as well.

If we do another example I'm just going to do another movie; let's do let's do "Suicide Squad". I'm going to put "Suicide Squad" in there and I'm just going to grab the image online and then I'm going to show you how to paste it in there. If we want a poster for our "Suicide Squad" movie, all you need to do is go to something like Google images, or you can go to another website, click on any of the image results and when you right click on the image after you've expanded it, just right click on that image and "click on the "copy image address" item in the in the right click menu. I'm going to click on that and then in your spreadsheet just hit paste, and that's going to paste in the actual image URL. You basically want to add a direct link to the image and that's going to get downloaded into Figma in a moment.

I'm just going to save that Excel file now, close off the browser, close off Excel, and now what we want to do now that we've got our spreadsheet set up and our Figma file set up is we want to right click anywhere on the page, go down to "Plugins" and click on "CopyDoc", and that's going to open the Figma plugin that we just installed at the start of the Figma tutorial. I'm not going to be going through any of these other features, I'm just going to be focusing on the "Sync Spreadsheet Content" feature for today; you can open that up by clicking on the "Sync Content Button"; it's been opened up now and you can see here we've got an option to click or drag and drop an Excel file. I'm going to do that now, I've got my Excel file just sitting on my desktop that we just saved; what I'm going to do is I'm going to drag and drop that straight from my desktop directly into the Figma plugin in this little drop zone area, and I'm going to click on that or let go of the mouse and that's just dropped the file in there. 

You can see it's giving us a little preview of what spreadsheet columns it's detected in the spreadsheet; you can see all of our headers have popped up, and then it's also showing the first row of content as a bit of a preview of what each of those looks like. That's working perfectly, that's exactly what we want to see, and then all we need to do is just click on the component and the instances of the component that we copied and pasted earlier. We've got all four layers selected here, and again, those don't have to be components, they can just be groups or frames, but in this case we're going to do components and instances. 

I've got those four layers selected, and you can see in the plugin it actually doesn't let you click the button unless you have at least one selected. I'm just going to click on all those four, and all I'm going to do is click on the "Sync Spreadsheet Rows with Figma Layers" button; I'm going to click on that now, and what this is going to do is it's going to load in those images, it's downloading those images that we specified in the spreadsheet, it's going to render those into the file, and it's going to update all the text. There we go, it's just updated 24 Figma layers because we had four different blocks selected there. We had a few different things updating, and you can see here it's swapped out all of our static "Avengers" blocks of content and it's populated it exactly with what we'd expect to see from our spreadsheet. 

You can see here row by row, it's looping through the selected layers and it's saying: "okay, for each layer that you've selected, I'm going to use one row from the spreadsheet, and I'm going to swap out anything you've named with the same layer name in Figma with these tags in the spreadsheet". We can see that exactly happened here; we've got "No Time To Die", "Dune", "Black Widow", "Suicide Squad"; it's just going through each of those and swapping out those layers. For example, in our minutes layer you can see here it's swapped out the minutes because our layout was named "#Min", and same thing for the reviews and the posters.

It's as simple as that; you can use this for populating lists, grids or any repeatable content it's perfect for. It just saves you having to manually go through each layer time after time to copy and paste content over and over again. If you can get away with filling out a spreadsheet first, this tends to be much easier to maintain for large sets of content or repeatable content. That's basically what it looks like to swap out the dynamic content from an Excel spreadsheet into Figma.

If you've been wondering how to do this, or been struggling with handling large sets of repeatable content, this might be one option for you. If you've been interested in something like this, I hope the Figma plugin can help. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: article
title: How to build a Figma-to-production workflow
description: A practical way to turn Figma from a design tool into a production workflow for real team output.
datePublished: 2021-09-22T00:00:00.000Z
dateModified: 2021-09-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/how-to-build-a-figma-to-production-workflow/
markdownUrl: https://www.hypermatic.com/articles/how-to-build-a-figma-to-production-workflow.md
---

# How to build a Figma-to-production workflow

A practical way to turn Figma from a design tool into a production workflow for real team output. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### Weblify

[Weblify](/weblify/) is one of the more useful tools in this workflow. Weblify is helpful in this workflow because the biggest gap is often between a finished design and usable code output. Cleaner snippets and inspect-friendly output help teams move from mockup to implementation with less rework.

### Emailify

[Emailify](/emailify/) is one of the more useful tools in this workflow. Emailify matters in this workflow because email work often gets rebuilt after design. Keeping layout, content, and export closer together removes a lot of duplicate effort from campaign production.

### Bannerify

[Bannerify](/bannerify/) is one of the more useful tools in this workflow. Bannerify is useful here because it keeps banner production inside Figma instead of pushing the team into a separate build step. For teams creating multiple ad sizes, motion variants, or late campaign revisions, that usually means less repetition and a cleaner review cycle.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: article
title: Best Figma plugins for agencies
description: The best Figma plugins for agencies that need faster production, cleaner reviews, and fewer repetitive tasks.
datePublished: 2021-09-15T00:00:00.000Z
dateModified: 2021-09-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-agencies/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-agencies.md
---

# Best Figma plugins for agencies

Agencies do not just design. They also export, resize, QA, present, localize, annotate, hand off, and revise the same work again and again under deadline pressure.

That is why the best Figma plugins for agencies are not just “nice to have” design add-ons. They are the plugins that remove recurring production work, help clients review faster, and reduce the amount of manual cleanup your team has to do every week.

Here are the ones I would prioritize.

### Commentful for review and client feedback

[Commentful](/commentful/) is one of the most useful Figma plugins for agencies because client feedback is usually where the process gets messy.

Instead of relying on scattered comments, screenshots, Slack messages, or people who do not even have a Figma account, Commentful gives you a cleaner approval workflow. It is much easier to collect, organize, and action feedback when the review process has some structure around it.

### Crypto for secure stakeholder sharing

Some agency work is public-facing. Some of it is highly sensitive and definitely not ready to be left wide open. [Crypto](/crypto/) helps with that gap by letting you share designs and prototypes through password-protected links or protected PDFs.

If your agency handles NDA work, private client initiatives, or early-stage concepts, Crypto is a much better fit than awkward workarounds.

### Bannerify for ad production

For agencies doing campaign work, [Bannerify](/bannerify/) can save an absurd amount of time. It turns Figma banner designs into production-ready HTML5, GIF, and video exports without forcing someone to rebuild every variation by hand.

That matters even more when the tenth round of feedback arrives and all the sizes need updating again.

### Pitchdeck for polished presentations

Agencies constantly present work: strategy decks, creative concepts, campaign recaps, sales pitches, internal reviews. [Pitchdeck](/pitchdeck/) makes that easier by letting the team stay in Figma while still exporting to PowerPoint, Keynote, Google Slides, or PDF when the client expects one of those formats.

### CopyDoc for content-heavy projects

When an agency project involves lots of copy changes, localization work, spreadsheet-managed content, or text reviews across many screens, [CopyDoc](/copydoc/) becomes incredibly useful.

It helps teams export text, re-import approved copy, sync spreadsheet changes, and avoid the slow copy-paste cycle that usually drags content revisions out for days.

### Pixelay for implementation QA

Agencies often own the painful moment where a beautiful Figma design becomes a not-quite-right front-end build. [Pixelay](/pixelay/) helps by comparing real URLs against the original Figma designs with overlays and diff views.

That shortens QA cycles and makes feedback much easier to communicate to developers.

### The agency stack that usually makes sense

Most agencies do not need one perfect plugin. They need a stack.

- For client reviews: [Commentful](/commentful/)
- For secure sharing: [Crypto](/crypto/)
- For ads: [Bannerify](/bannerify/)
- For presentations: [Pitchdeck](/pitchdeck/)
- For content updates: [CopyDoc](/copydoc/)
- For implementation QA: [Pixelay](/pixelay/)

If your team bounces between all of those jobs every month, the [Pro Bundle](/bundle/) usually makes more sense than trying to standardize on a single workflow tool.

---

---
type: tutorial
title: How to convert Figma Components to Sketch Symbols using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-09-14T00:00:00.000Z
dateModified: 2021-09-14T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-convert-figma-components-to-sketch-symbols-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-convert-figma-components-to-sketch-symbols-using-convertify.md
---

# How to convert Figma Components to Sketch Symbols using Convertify

#### Video Transcript

Today I'm going to be showing you how to export your designs from Figma to Sketch, including all of your Figma components, which will be converted to Sketch symbols.

To get started, we just have to go to the Figma Community and install a Figma plugin called Convertify. If you just search for the word "Convertify", and under the "Plugins" tab you'll see Convertify pop-up; if you just click on the "Install" button on the right-hand side, you'll be ready to go. 

I'm just using a simple design that I've duplicated from the Figma Community; it's got a bunch of components in it, a bunch of text styles, a bunch of color styles, and we're going to see what this looks like when we convert it from Figma to Sketch with those components. To run the Figma plugin you just right-click anywhere, go down to "Plugins" and click on "Convertify". That's just going to open up the Figma plugin we just installed.

By default, the design won't get converted with all of the pigment components as Sketch symbols, it will convert them as regular groups and frames. To enable this feature you just have to click on the little settings icon next to the Sketch button and open that up; and you'll see at the top there's a toggle called "Convert Figma components to Sketch symbols", and it's currently in BETA. If you enable that toggle, that's going to make sure that your Figma components actually get converted into Sketch symbols rather than just plain grouped layers and things like that. It's worth noting that while this is still a BETA feature some of the instance overrides might actually mean it's less visually accurate, but for almost all cases it's going to work really well. 

I'm just going to close that off now that I've enabled that setting. I'm going to close it, then all we need to do is click on the button that says "Convert to Sketch"; I've just clicked on that and it's running through all of my pages now and converting all of those pages from Figma into a Sketch file, it's going through layer by layer and doing that. This of course depends on how many layers your Figma file has or each page has; for example, this one's taking a bit longer than the first two because it's got almost 3,000 layers. You can see here it's processing each layer fairly quickly, and once that finishes up we'll be able to download this file to our computer open it up in Sketch, and then we can take a look at what it looks like with all those components converted. It's just finishing up the final page now, and the final thing it's going to do, considering we toggled the option, is now it's just going through and converting all of the Figma components to Sketch symbols; those Figma components, that's the last step that it does. 

Now it's just packaging up the Sketch file with all of our assets, and it's ready to download. All we need to do is click on the "Download Sketch File" button and save that to your computer. I'm just going to save it to my desktop and click "Save", and if I double click on that Sketch file on my desktop, that's going to open up Sketch and hopefully load up our file that we just converted. There we go, I'll just resize the Sketch window so we can see what's going on. This is our converted Sketch file that we just exported from Figma, and you can see all of our layers are here, all of our pages are here, we've got our assets page, UI design page, all looking really good.

Because we enabled the "Covert Figma components to Sketch symbols" option, we also have a brand new page which wasn't in the Figma file called "Symbols". If you go on the symbols page, you'll see here that it's actually exported every single Figma component from the Figma file into the Sketch symbols page, and each of those are there. If we zoom out, we'll be able to see quite a lot of symbols on the page. That's quite a lot there, so that's all the components and their variants. The cool thing about this is we can now use these, or they are already being used in our designs. If we jump into one of these frames; for example, if we check out some of these buttons, I'm just going to open up this frame, and you can see on the left here this is actually a symbol. These buttons are symbols that are being used, as opposed to regular groups; the cool thing about that is we can actually change these styles globally and actually update them across the board. 

We can go to our symbols panel here, and you can see all the symbols that are looking good; we can also go to things like colors and text styles. For example, I could change something like this default green and I could make it pink, for example. I'm going to change a few of these so it'll be a lighter one. I'll just change that; I've just changed those primary colors, and if we jump back to our design you can see here that the colors that were being used on those components have now all been updated across the board. We're able to update that in one spot and because these are all components using the global colors, we're able to change those very easily. 

The other thing that we could do is we can actually change the button designs themselves. If we go to these buttons; we've got a few different styles here, but what I can do is I can actually open up these and I can do something like remove that border radius. We can open up these, remove the border radius again, and I'm just going to do this is an example so you can see what it looks like. There we go, you can see here the buttons now don't have a border radius because we just changed the border radius in the Sketch symbols page. That's just an example of one way you can actually edit the symbols now that they've been exported from Figma components into Sketch symbols, and you can update your design in one go. 

That should make it a lot easier for maintaining a larger design or just more design system based design; if you do need to do, that feel free to use that feature that we just went through in the Figma plugin and this should make it a little bit easier, as I said, for those much bigger files. Please know, this is a BETA feature, so if you are experiencing some issues, feel free to get in touch. The Figma plugin is being updated to to iron out some of those issues, but if you are noticing that it's just for whatever reason not looking as accurate as it needs to be, feel free to either manually update the those discrepancies in Sketch, or you can actually just uncheck the "Convert Figma components to Sketch symbols" toggle, and that will export the file in the default way, without actually including the native components.

That's the whole Figma tutorial for today, I just wanted to run through this brand new feature with you and show you how to convert those Figma components into Sketch files when you export your designs. Thank you for watching, and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to compare live website builds with Figma designs using Pixelay
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-09-13T00:00:00.000Z
dateModified: 2021-09-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-compare-live-website-builds-with-figma-designs-using-pixelay/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-compare-live-website-builds-with-figma-designs-using-pixelay.md
---

# How to compare live website builds with Figma designs using Pixelay

#### Video Transcript

Today I'm going to be showing you how to compare your Figma designs with live website URLs using the Pixelay Figma plugin.

The first thing we need to do, if you just jump into the Figma Community search for the word "Pixelay", and under the "Plugins" tab, you'll see Pixelay pop up. If you just click on the "Install" button, you'll be ready to go.

I'm just going to jump back into my file, and I'm just using a portfolio website today to compare. I'm just going to right click anywhere, go down to "Plugins", click on "Pixelay" and that's just going to open up the Figma plugin we just installed a moment ago. It's a fairly simple interface, all we need to do is put in our website that we want to compare our designs with. In this case, I'm going to be comparing this portfolio site, so I'm just going to copy the URL from the website and paste it into the top bar over here, and what that's going to do is it's going to set that as the base default URL to compare. In my case, I actually don't want to compare the homepage, I want to compare the about page and the projects page. What I can do is I can actually override these URLs per page or per frame, and I can just do that by going to the URL clicking on that, copy/pasting it, pasting it into the input fields here in the Figma plugin and if I grab the projects page, I'm going to copy/paste that URL into the input as well. Now you can see it's going to compare the about page for these two, because you've got the mobile and the desktop, and then the projects page just on the desktop for this one. 

That's the way that you put in the URLs, and all you have to do is just select the ones that you want, I'm just going to leave all of them checked, as I've only got a few. After you've selected them, just click on the "Compare Designs" button in the Figma plugin; if you click on that, it's going to prompt you to create a new URL, which will be a Pixelay URL. You just have to click on the "Upload Designs" button, this will just show it the first time it loads the Figma plugin, once you've uploaded it as we'll see in a minute you can actually re-upload them, so if you make changes to your Figma designs and you want to re-upload them or you want to change the URLs or add more or remove frames, you can actually do that and re-upload these designs to the same URL and you'll be able to refresh that. We'll have a look at what that looks like in a second, but for now it's just going to be doing the initial upload of the designs and also create your own Pixelay URL, which is going to open up a web app in a minute once the upload finishes. In a second, once it finishes we're going to see a couple of different things; this is different to the last Figma tutorial which is mostly just comparing local development website builds, this one's going to be for production builds. 

As you can see here, it's now ready, it's created the URL that we can use. We've got two options here; we can either compare local development URLs, so that's things like localhost or local web development on your machine, or you can compare live URLs, which is what we we want to do today. These are two different web app URLs that you can use, and because we're going to be comparing live website URLs, we also need to make sure that we've installed the Pixelay browser extension. You can do that just by clicking on the link here, and that will take you to the Chrome store; I'm using the Brave browser which is very similar to the Chrome browser, and so your button might say "Install in Chrome" or "Instal in Brave", and if you just click on that button up here, it should look like mine where, it then says "Remove", because it's now been installed. I've already installed it, but if you haven't, just click on that link in the Figma plugin, open up the extensions page, and click on "Install", and then you'll be ready to go.

Once you've installed the Chrome extension or the browser extension, you can now go to the Pixelay web app URL, and you can do that by just copy pasting the link. You can click on the little copy icon here, copy it to your clipboard, and then we can open up that URL in our browser and that's just going to load up the Pixelay web app to your unique URL that you've just created from the Figma plugin. You can see here, it's loaded up our designs, and we can actually scroll across left to right. You'll notice here that our Figma designs have been uploaded, but there's also some other other designs going on which are actually from the live website. The easiest way to see this is we can either change the opacity, so this changes the opacity of the overlay, or we can actually switch directly into the Figma design or the live website itself. That is the live website there, you can see if I hover over these items that's all live, this is all HTML, and the Figma version is just the design, there's nothing going on here, it's just the design. 

The comparison modes actually let you compare the two, so we can see here we can actually compare the design and the build by changing the opacity; we can look at the split version, we can actually use a split screen to compare them, so that's another way we can do it; we can also use the diff mode which can be helpful for finding really subtle differences, this helps you sort of find those; if we need to we can actually move the overlays around to change the offset just in case the offset in the website has some weird stuff going on, you can change that a little bit there too; and of course we can also do measurement, so if you're in development mode and you want to figure out how how off these these things are, you can click anywhere and measure them to get the difference in pixels. 

That's that's the way you can do that, you can also jump to frames; this is handy if you've got a bunch of different frames, we've only got three, but you can actually skip directly to those frames as well and just use that menu there and that will jump straight to them, so you don't have to scroll a whole bunch to get there. You can see here it's the entire page; we're comparing multiple viewports at the exact same time, we don't need to switch between pages, we can just scroll left and right very easily, up and down, you'll get the entire viewport and these viewports are being matched to your Figma designs. The size of the viewports, the width and the height, are exactly whatever your frames are in Figma. You're really getting a truly responsive comparison, because it's changing the viewport to match the width of the Figma frame; you can really see what the responsive version actually looks like compared to the original Figma design. 

That's that's what that looks like there. It's really simple, you can just keep comparing these as much as you want. The idea here would be if you've got a live website you can do QA on it, quality assurance, and check that everything's actually looking the way that it should. These designs are a bit outdated, that's why the the copy looks different but you can see already like you could tweak the the menu margins just to make sure those are all lining up exactly if you wanted to really tweak them, same with the columns, the columns are a little bit too wide, or not wide enough in this case. The idea here is you would go back to your website development, update these visual changes in your code and push it up to the live site, and then hopefully you'd have something that's much much closer to the original Figma designs. 

That's how you can compare those, and as I mentioned you can also re-upload these. If you wanted to re-upload these, for example, in the case of the projects page; if I just jump back into the development mode, I'm just going to copy that new text and I'm going to put that into the projects area, whoops; actually, I don't have that font. I can't do that, but if I could do that, I would; in this case, I'm just going to move these around a little bit just to show you that it is going to get updated. What I can do is I can actually rerun the Figma plugin; I'm just going to click on the Pixelay Figma plugin again, and I'm just going to re-upload just the one page this time. This time I'm just going to do the projects page, and you can see here this time when I click on the "Compare Designs" button it's already showing me the link. I can get that back again, I don't have to re-upload it to get that link again, I can just jump in here, copy that link again if I needed it for quick reference. 

I can also click the "Update Designs" button, which I'll do now. This is going to update the existing link with your Figma designs re-uploaded to the same link. If you just wanted to narrow it down, or add more frames, or change the URLs, you can use the re-upload function to update the link without having to create a whole new link and share it around, and do all that sort of thing; you can just re-upload them and do that really quickly. It's just confirmed it, so it's re-uploaded now, and if I just jump back to my existing URL, I'm just going to hit refresh. This time we should only see the one frame because we've just re-uploaded it; we can see here it's only got one frame now, we've just updated the link that we were already using, and this time you can see the design's been updated; you can see the the columns are even more out of whack now because I just wanted to show you what that looks like when you do update it.It's the development mode and then the comparison mode, so you can just keep doing that, you can just keep changing either your Figma designs or the build, and hopefully you'll be able to do much more accurate QA on your websites rather than having to manually figure out where all the differences are; this is a much quicker way of figuring out how accurate the build is compared to your original Figma designs.

Okay, that's pretty much it for today; I just wanted to show you how to compare your Figma designs with the live website URLs instead of the local development URLs which were covered in a different YouTube Figma tutorial. If you've been looking for an easier way to do QA or quality assurance on your Figma designs compared to the website build, then consider using the Pixelay Figma plugin as a part of your toolkit for for doing that. As always, thank you for watching, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export Figma to Microsoft Excel .xlsx files using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-09-09T00:00:00.000Z
dateModified: 2021-09-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-microsoft-excel-xlsx-files-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-microsoft-excel-xlsx-files-using-copy-doc.md
---

# How to export Figma to Microsoft Excel .xlsx files using CopyDoc

#### Video Transcript

Today I'm going to be showing you how to export your text content from Figma into a Microsoft Excel document; we're going to be doing this by using a Figma plugin called CopyDoc. 

If you haven't already done so, if you just jump into the Figma Community and search for the word "CopyDoc", and under the "Plugins" tab you'll see a result called "CopyDoc" pop-up. If you go ahead and click on the "Install" button on the right-hand side, you'll be ready to go.

You can use any Figma file that you like; at the moment, I'm just using this movie app. The only thing to bear in mind is you will need at least one frame, one Figma frame, with some text content in it for this to work. The first thing we need to do is just right-click anywhere, go down to "Plugins" and click on "CopyDoc"; that's just going to fire up the Figma plugin we just installed a second ago. I'm not going to go through any of these other features, there's other tutorials on our channel for all of these; today we're just going to be looking at exporting this Figma content into an Excel file. 

To do that, we just have to click on the "Export Frames" button under the "Export Figma Frames" menu item; that's a menu item to export your Figma designs to popular document formats, including Microsoft Excel. I'm just going to click on "Export Frames", and under the drop down you can see we've got a whole bunch of different options here, and if you just click on the "Microsoft Excel (.xlxs)" option and select that, that's going to select the Microsoft Excel format for you. 

There's really only a couple of options here; one option is just to include design references, that basically means that all of these frames that you select to export will also just get a little JPG file exported, just as a bit of a design reference so you can see what relates to what in the Excel file. The other option we have is to export a single Excel spreadsheet file per frame; if we leave this option unchecked, which which it is by default, this is basically going to export your Microsoft Excel file with each frame from Figma in a separate tab at the bottom of the file, and I'll show you what that looks like in just a second. 

The other thing we can do is just select what frames we actually want to include in the Excel file. You can do that by either clicking on the frames in Figma and sort of filtering down that list, or you can just uncheck and check these layers manually as well. We'll just check a few in here, you can sort the frames if you wanted to sort them into a different order, you can definitely do that, you can do custom sorting, so you can actually drag drag these frames manually, but for now I'm just going to kind of leave them in a default order and do it visually by columns. 

Once you've selected your frames and the ordering all you need to do is click on the "Export XLSX" button, and that's going to go ahead and export the selected frames to an Excel file. It's very quick, the export is already finished, so now we just have to click on the "Download XLSX Export" button, and I'm just going to save that to my desktop. If I now go to my desktop, you can see the zip file has popped up; I'm just going to double click on the zip file to unzip it, and we've got two different files in here; we've got a designs folder, so that was the folder I mentioned with all of our designs. These are really just JPG references that you can open up, and this is really just purely for if you're looking at the Excel file and you're not in Figma, this is just a quick way to see roughly which text relates to what frame and where it might be located on the frame; that's your design references folder. 

Now we have our XLSX file as well, so I'm just going to double-click on that and that's going to open up Microsoft Excel. Just click on "Yes" for this if it pops up with this alert, it does that sometimes; you can just click "Yes" and that will open it. Just click on "View"; it does this sometimes if your Figma file has weird line breaks and different characters in it that Excel usually doesn't like, but you can just click on "View" and it'll be totally fine. 

I'm just going to resize the file window so you can actually see what's going on here. You can see at the bottom here we've got all these different tabs; these are the tabs that relate to your Figma frames. The frames that we selected in the menu have all been exported and you can see here I can switch between all of them and look through all the content. These are in alphabetical order as well, so the numbers will be at the top, and it'll sort it by alphabetical order. You can very easily kind of audit the text in your frames, and if there's any duplicate text layers, if there's any text layers in your Figma file that are identical, it will automatically group those into a single layer. If your Figma frame had 20 different layers that all said "Movies", it's going to merge those into a single layer in your Excel spreadsheet, and that's just so you don't have 50 layers of the same text in there, which is which is kind of not that useful. 

That's what that looks like, and I'll just show you what it looks like if we just rerun that as well in the Figma plugin. I'm just going to click on "Export Frames", and I'm just going to re-run it with the "Excel File Per Frame" option set, and just re-run the export by clicking on "Export XLSX", and that's just going to export the frame again. This time instead of exporting it to a single Excel file, if we jump back onto our desktop and open up the new zip file, you can see this time we actually have a whole bunch of different Excel files. It has split out each frame from Figma into its own Microsoft Excel file instead of merging them all into the single Excel file using the tabs at the bottom to navigate them. 
 
Now we can open up these individually by just double clicking on them, and I'll just resize the window again, I'm not sure why it keeps going full screen, and you can see here this time we only have one tab which is just called "Figma Text", and we've got all the same text layers that we saw in our tabbed version, the original version, but this is in a single Microsoft Excel file instead. That's just an alternative option if you did need to actually split the frames out into multiple Excel files instead of just having it in the one file with the tab navigation at the bottom; there's some use cases where you would you'd probably prefer it like this, but for most of the time I'd imagine you'd probably want them all easily navigatable and searchable in a single Excel file. 
 
Those are basically the two options that you have for exporting your text from Figma to Microsoft Excel. That's that's pretty much it; it's a very quick tutorial today just covering this one feature in the CopyDoc Figma plugin. There's obviously other formats you can export, too, which will be covered in other Figma tutorials, but today I just wanted to really quickly run through the process of exporting your content from Figma to Microsoft Excel or XLSX documents. 
 
It's just worth being mindful of the fact that this is just using the "Export Frames" feature, and it's not actually using the "Export Text Layers" feature. Just really briefly, the difference between those two is if you do export your frames using the "Export Frames" feature to this Microsoft Excel file from Figma, you won't be able to re-import the Excel export from Figma back into Figma using the CopyDoc import feature. That's just a really important distinction between these two features; the "Export Figma Text Layers" feature, which I've covered in other tutorials on our channel, does allow you to export your text layers to CSV, JSON pr XLIFF files, and then you can actually edit those files outside of Figma and re-import them, and it will update the Figma text layers automatically. That totally works for CSV, JSON and XLIFF files, but it does not work for Excel files.
 
The Figma to Microsoft Excel feature is really just for using for other purposes that don't involve re-importing the text later back into Figma from Microsoft Excel. I just wanted to flag that in case you're wondering why it's not allowing you to drag and drop your Excel file back into Figma; that's the reason. If you do need to do that, I'd recommend using the other "Export Figma Text Layers" feature, and then re-importing the CSV file, for example, back in if you do need to update it. Otherwise, feel free to use the export Microsoft Excel feature if you do just need to get all of your Figma text out into a massive Excel file, and you just want to audit it, or you want to send it around for approval or something like that, then the Figma to XLSX option might actually be the one that you're looking for.

I hope that's clear; if you have any questions, please let me know in the comments and I can get back to you, but thank you for watching and I hope you enjoyed this Figma tutorial if you've been wondering how to export your designs from Figma to Excel, this is a really quick way to go about it, and hopefully you can get some benefit from it in your own workflows and projects. As always, thank you for watching, and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export Figma to After Effects in one click using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-09-07T00:00:00.000Z
dateModified: 2021-09-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-after-effects-in-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-after-effects-in-one-click-using-convertify.md
---

# How to export Figma to After Effects in one click using Convertify

#### Video Transcript

Today I'm going to be showing you how to export your Figma designs to Adobe After Effects using the Convertify Figma plugin.

The first thing we need to do really quickly is just jump into the Figma Community, search for the word "Convertify", and you'll see Convertify pop-up under the "Plugins" tab. If you go ahead and click on the "Install" button on the right-hand side, that'll be installed, and then we can get started.

I'm just going to jump into my Figma file which I've grabbed from the Figma Community, it's just a handful of vector character illustrations and what I want to do is basically get these out of Figma and I want to get them into Adobe After Effects, so that I can animate them or do some motion design with them. I want to do that without having to manually recreate these elements or copy/paste them and kind of nudge them around, I want this all to be automatic. We're going to do that today, and if you follow along, I'll show you how it's done. 

If you just right-click anywhere and go down to "Plugins", click on the "Convertify" Figma plugin, which is the one we just installed, that's just going to open up the Figma plugin. The first thing to note is that the Adobe export options in the Convertify Figma plugin only support single pages; unlike the Sketch exports which I've covered in other tutorials, Adobe only supports one page, so you can change the page that you're converting by just switching in the pages panel on the left, and you can see here it's going to change in brackets the page that it's going to export. 

The way that this is going to work is we're going to actually export this Figma design to first an XD file, we're going to open up that XD file, and then we're going to convert that from XD into After Effects; this is a really simple process, and I'm just going to walk you through step by step right now. The first thing to do is just click on the "Convert to After Effects" button in the Convertify Figma plugin, so I'm going to click on that now and that's going to convert all the layers on our Figma page. It has just finished, this is a really simple Figma file, so it only takes a couple of seconds. 

As I mentioned, we're just going to download the file now open it up in XD, export an artboard to After Effects, and I'm going to show you how that works. If you go ahead and click on the "Download XD file (for exporting to After Effects)" button, so click on that button, and I'm just going to save it to my desktop by clicking "Save"; and on my desktop I'm just going to double click on that file, which is going to open it first in Adobe XD. You can see here Adobe XD has just fired up and loaded in our exported file that we just exported from Figma, and you can see here it's carried over all of our vector layers, all of our Figma layers have been exported over, but of course we don't want to use it in XD; in this case, we do want to get all of these layers into an After Effects file so that we can actually animate them. 

The way that we can do that, is just by clicking on the artboard that you want to export into After Effects, so you could either click on this one which would export all of these layers, but for today I'm just going to do a single character. I'm going to click on the character frame or artboard, and I'm going to click on the "File" menu in the top menu up here in XD, and I'm going to go all the way down to "Export", and under the "Export" menu, you'll see this item at the bottom that just says "After Effects"; go ahead and click on "After Effects", and this is going to instantly export your artboard into After Effects. 

It's just automatically opened up After Effects for us and we can see here that the artboard that we just exported from XD has been carried over to our Adobe After Effects file. All of our Figma layers are here, you can see them in the timeline, we've got all of our vector layers our groups, and of course these can be moved, and you can transform them. I'm not going to embarrass myself by trying to animate these layers, as I'm not not an After Effects expert, but of course if you are, this would be super handy, as you don't have to recreate all those layers from Figma. Effectively, all of your Figma layers have been converted from Figma to Adobe After Effects using the native XD export feature. That's what it looks like, it's a really simple process as I said, and this is this is everything you basically want. Of course, this was a really simple file, so if you do have a much larger file or have a lot of bitmap images or lots of different layers on your artboard, this might take a little bit longer, especially if you're using a an older computer; but if you're already doing motion design, you've probably got a pretty specced out computer or PC anyway, and if you're going to the trouble of exporting your Figma files to use in After Effects, then I'm sure you probably won't run into too many performance issues based on that.

That's the whole process, you can you can do this for as many artboards as you want, we could do it for this one as well if we wanted to try that out; just again click on the artboard, go down to "File", then "Export", click on "After Effects", and once again this will open up the file in After Effects. There we go, we've got the other layers imported into Adobe XD, and then exported from XD to After Effects. Again, this was much quicker because it's just a bunch of vector layers, but as I mentioned, if you do have larger files it might take a little bit longer, but this should be essentially everything you need to animate those vector layers, those individual layers from Figma in After Effects, as I said, without having to manually recreate them, which is a big pain, if you've ever tried doing it before.

That's basically it; you can apply this process to any of your Figma files that you want to use in Adobe After Effects, it works perfectly for vector files, as I mentioned, and it'll work just as well with with other types of files, too. Vectors are always really nice for exporting from Figma to Adobe After Effects, especially if you're going to be using them to then export to something like a Lottie file or a Lottie format ,then this is usually the style that you would do that in After Effects for. 

That's it, that's the whole tutorial, it's a reasonably short one today; just wanted to run through this new feature that we've shipped into the Convertify Figma plugin and walk through the steps on how to do it. If you've been wanting to export your Figma designs from Figma to After Effects, this is as far as I know the easiest way to do it without having to manually recreate all those layers, especially for complex designs. To the the people out there have requested this, I'm glad to say that it's all working now, and you can go ahead and try this in your own projects and workflows. As always, thank you for tuning in and watching this video, and we'll be back very soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to find and replace Figma text content using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-09-06T00:00:00.000Z
dateModified: 2021-09-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-find-and-replace-figma-text-content-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-find-and-replace-figma-text-content-using-copy-doc.md
---

# How to find and replace Figma text content using CopyDoc

#### Video Transcript

Today I'm going to be showing you how to find and replace text content in your Figma designs using the CopyDoc Figma plugin.

The first thing we need to do just really quickly if you haven't already done so, is go to the Figma Community search for the term "CopyDoc", and you should see the result pop-up under the "Plugins" tab. If you click on the "Install" button on the right hand side you should be good to go.

Now we can jump back into our Figma file, and to run the Figma plugin we can just right-click anywhere, go down to "Plugins" and click on "CopyDoc" and that's just going to load up the Figma plugin we just installed. This is going to be a pretty short Figma tutorial, it's just going to be covering the find and replace text feature in this Figma plugin. If you go ahead and click on the "Find and Replace" button, that's just going to bring up a modal with a familiar looking interface where you've got your "find" input and you've got your "replace" input.

The "find" input is where you put in your search term with the text you want to replace; for example, if I put in "avengers", which is the name of the movie in a couple of these screens, and if I just change that to be all caps, I can find those matches and preview the updates. If I click on that "Find Matches and Preview Updates" button, that's actually going to load up all of the instances where it's found the word "avengers" in my current file on my current page, and it's just going to preview what it looks like with the text that I've put in in the "replacement" input as well. 

You can see it's found a few different instances of this, and we can get a sense of exactly where it's appearing in the file, and what it's going to look like when it gets changed. If you're unsure where these are being changed or where they're going to be changed, you can just click on the little text icon button in any of these results; if I click on this one, that immediately jumps to the layer that it has found and instantly selects it. You get a really clear idea of where all these results are showing up, and the cool thing about that is you can actually uncheck those from being included; let's say I didn't want to include this particular change, I can just uncheck that input and this won't be included in rolling out those Figma text updates. 

If I'm happy with all the other ones, all I need to do to find and replace those in my Figma file is click on the "Uupdate Figma Text Layers" button; I'm going to click that now, and that's just gone ahead and updated seven text layers. We can see it's got a check mark against all the layers that it's updated, and we can see the preview of what it's updated, and now that it has been carried out, we can actually check that out. You can see here it's changed all of those lines of text to all caps as we put in, but it's also excluded the layer that we unselected here. 

If you do want to undo that you can just either "Command + Z" on Mac or "Control + Z" on Windows to just use the normal Figma "Undo" feature, and that's just instantly undone all of those text changes. If you did make a mistake you can quite easily undo those text changes in Figma from your "find and replace" replacements. 

We can do this as many times as we want; I'm just going to close the window again and load up another find and replace, but you can actually just keep finding and replacing as well. For example, I could search for "action" and find all those matches; you can see here we've got a bunch of those matches. I could search for "adventure", I could find those, and you can just keep searching in the same modal over and over again if you want to keep looking for different layers. Of course, you can make these changes; I can change "adventure" to "comedy" for example, and find and replace those changes in my Figma text. That has just found all the matches for "adventure" and is showing me what it's going to look like when it gets changed to "comedy". Again, I'm just going to quickly update all of those text layers to show you how that looks; I'll update those, so it's just updated all those four layers, and you can see it's changed over here all of them have been changed to "comedy" from "adventure". 

The other thing that's probably just worth touching on as well is the "Match Case" feature. We'll use "avengers" for example again, so let's say I search for "avengers" in lowercase; I'm just going to do "avengers", so if we search for that, it's going to come up, and it's going to get shown in our search results. We can see here it's included "avengers" because we searched for "avengers", but you'll notice in the design that "avengers" is actually capitalized in all the places where it's got the "Avengers: Endgame" title. If we wanted to actually specifically match that case to make sure that it's only matching the exact uppercase and lowercase in our search term, we can click on the "Match Case" toggle. If I toggle that on, and now I'll try and find those matches again, you can see this time it's actually returned no results; and the reason for that is because all of these are capitalized. This basically makes it case sensitive, so this can actually be helpful if you're replacing things like names or things of parts of words that might actually not be capitalized that you don't want to replace. 

This is just a nice way of doing that, and to show you how that does work with the capitalization; if I put "Avengers" into the search input again now I've capitalized the "A", and I'm going to leave the "Match Case" setting on, and if I find those matches again, this time it has included the capital "A" because we did we did add the capital "A" into our search term. That's just a really quick note there as well. 

That's essentially it; it's a really quick Figma tutorial, I just wanted to go through it and show you how it actually works, and show you how to find and replace Figma text really easily and preview the final replacements before you update them in Figma. If you've been looking for a feature like this, this is a fairly new feature in the CopyDoc Figma plugin; it's designed to be very similar to a typical find and replace feature in something like a code editor, and now you have the added benefit of really easily being able to preview those changes beforehand. There's just no way you're ever going to accidentally find and replace a whole bunch of text without knowing what it's going to look like first. 

As always with this Figma plugin and with updating any kind of text using Figma plugins, please just be sure that you do have the fonts installed; if you don't have the font installed, the Figma plugin will let you know that it won't be able to replace the Figma text without the font installed. If you are going to be doing some find and replace in Figma and you're wondering why it's not actually letting you do it, it's almost definitely because the font needs to be installed, and if it's not installed you won't be able to update it; that's just the way that that Figma handles fonts.

That's basically it, I'll leave it there, and I hope if you've been wanting some find and replace functionality in your Figma file, then this Figma plugin should hopefully help you out. Thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: article
title: Figma workflow automation tools
description: The Figma workflow automation tools that remove repetitive production work across content, handoff, QA, and exports.
datePublished: 2021-09-05T00:00:00.000Z
dateModified: 2021-09-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/figma-workflow-automation-tools/
markdownUrl: https://www.hypermatic.com/articles/figma-workflow-automation-tools.md
---

# Figma workflow automation tools

The Figma workflow automation tools that remove repetitive production work across content, handoff, QA, and exports. In practice, the strongest setup is usually a small set of tools that removes repeated production work without pushing the team into extra manual handoffs.

Most teams do not need more tools for the sake of it. They need fewer repeated steps, fewer rebuilds, and a cleaner path from design to the final output. That is why the right combination depends on where the friction actually shows up.

### CopyDoc

[CopyDoc](/copydoc/) is one of the more useful tools in this workflow. CopyDoc is useful here because text changes are often the least glamorous part of production and the easiest place for teams to waste hours. A stronger content workflow in Figma means fewer manual edits and fewer inconsistencies across screens.

### Weblify

[Weblify](/weblify/) is one of the more useful tools in this workflow. Weblify is helpful in this workflow because the biggest gap is often between a finished design and usable code output. Cleaner snippets and inspect-friendly output help teams move from mockup to implementation with less rework.

### Pixelay

[Pixelay](/pixelay/) is one of the more useful tools in this workflow. Pixelay matters in this workflow because QA breaks down when teams are comparing design and implementation manually. Overlay-based review makes front-end drift easier to spot and easier to discuss.

### Putting the workflow together

The goal is not to force every job through one plugin. It is to keep each repetitive step closer to the original Figma file so the team does not keep recreating work in other tools. Once review, export, resizing, code handoff, or delivery are handled in a more direct way, the whole production process tends to feel a lot lighter.

### The short version

Start with the plugin that removes the biggest recurring bottleneck first. Then add a second or third tool only when the workflow genuinely spreads across more than one kind of production work.

---

---
type: tutorial
title: How to compress Figma images to file size targets using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-09-03T00:00:00.000Z
dateModified: 2021-09-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-compress-figma-images-to-file-size-targets-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-compress-figma-images-to-file-size-targets-using-tiny-image.md
---

# How to compress Figma images to file size targets using TinyImage

#### Video Transcript

Today I'm going to be showing you how to compress your images to a certain file size target using the TinyImage Figma plugin.

The first thing we need to do, if you haven't already done so, is just go to the Figma Community and search for the word "TinyImage" and you'll see the result "TinyImage Compressor" pop up, then if you just click on the "Install" button on the right-hand side you'll be ready to go. Once we've done that we can jump back into our Figma file.

I've just got a handful of images in here that I'm going to show you what this looks like; if you just right-click anywhere, go down to "Plugins" and click on "TinyImage", that's just going to fire up the Figma plugin we just installed a minute ago. Okay, I'm not going to go through all the other features of this Figma plugin, I've got a few other video tutorials on our channel if you want to go through some other features. Today, we're just going to be focusing on file size targets. By default, the compression is based on percentages or a percentage based quality, but there's going to be times where you actually want to reach a certain file size target, a maximum file size for your image compressions. We can enable this feature by just clicking on the toggle called "Size target", so I've enabled that, and you can see here that it's changed the settings; instead of the quality based percentage slider, we now have an input field for a kilobyte value. You can toggle between these two, but for today we're going to be actually turning that on and seeing what that looks like.

The way it works is you essentially put in the file size target that you want the compression to reach, so if we just export these and get a bit of a baseline, I'm just going to actually turn that off for a second and I'm just going to export a few images and compress them to see what that file size looks like normally. We're going to compress these at 90% quality and see what that comes out as. The first one we've got us 700 kilobytes, 270 kilobtes, these will probably be similar; these are at 2x and this is at 1x. I'm just going to save those, and now we've got the baseline of our compression we might realize that we actually want these to be much lower or under a certain threshold that this quality isn't going to get us. 

If we just re-run the Figma plugin, we can either do that from the sidebar over here or by right-clicking as we did before, and this time I'm going to change the quality slider back to the size targets, and I'm just going to compare what these image file image file sizes are now. For example we've got the cherry blossom, and cherry blossom at 2x; that's 277 kilobytes, 745 kilobytes, 693 kilobytes and 2 megabytes; what I might do is I'm actually going to set a global size target for all these, I'm going to make it 500 kilobytes. This is going to set the default maximum file size target to 500 kilobytes, but what I can also do is I might want one of these images to actually be smaller than that, so I can say for this cherry blossom regular version; it's currently at 277 kilobytes, but I actually want that to go down to 200 kilobytes. I'm going to override the default and make that one 200 kilobytes, and the rest I'm going to max out at 500 kilboytes, roughly.

Now that we've set our default file size at 500 kilobytes and we've overridden this one image at 200 kilobytes, we can now click the "Export" button once again, and this time it's going to compress the images not using the quality, now you can see they're trying to hit these file size targets. This one's 500 kilobytes, which is the maximum target, and then the next one's 200 kilobytes. You might have noticed in the label in brackets it did say that this method is actually a bit slower than the regular quality method, and the reason for that is it has to do multiple passes of the compression in order to get the file size down to the optimal size. You'll notice this more with larger images; 2x retina ones with large dimensions, and these are fairly large, so that's 1700 pixels by 1100 pixels, and the version at 1x should be a little bit faster, but it's going to it's going to do multiple passes to get the exact optimal compression level in order for you to reach the maximum quality, but also get just under the ideal target. You're really getting pretty much the exact maximum you can get without losing quality, but still getting as close as possible to that target.

We'll just wait for these two to finish up and then we can have a look what they look like once we actually export the zip file and have a look at that. Again, the 2x ones are taking a little bit longer just because they are a bit larger, but the 1x one should be much better, and bearing in mind these are also taking longer because we're setting a much lower threshold as well. These are originally three megabytes and we're getting them down to 493 kilobytes in this case. Just a little bit longer there; I've just saved that zip file, so I'm going to open that one up, and if we jump into the folder you can see here if we actually compare the two exports. This was our previous export that we did a minute ago; those are the bigger ones bigger file sizes, but in here you can see it's actually hit that threshold of exactly 500 kilobytes for these ones, bearing in mind this this file size is slightly different to the one we we put in there, but it's trying to get there as as close as possible. These kilobytes here is actually slightly different from the kilobytes that are in the Figma plugin; we've got 201 kilobytes, there's a 500 kilobytes, and then we've got the bottom random one as well which has come out at 489 kilobytes. That's what that looks like there, so I'm just going to close those ones off. 

I just want to also note that the kilobyte compression only works for any image formats that are not PDFs; if you're trying to compress PDFs and wondering why you can't compress the PDFs to a kilobyte size, that's the reason. The kilobyte size is only for JPG, PNG, SVG, AVIF, WebP and that sort of thing; the PDFs unfortunately are only based on DPI, so if you do have a PDF export such as this one, you'll be able to choose between 72 DPI, 150 DPI and 300 DPI, and that will change the the quality as well, but you can use the size targets for any of the other file formats.

That's pretty much it. It's pretty simple, it's just a single toggle, the 
"Size Target" toggle, and again, you you might not need to use this all the time; this is really if you have a very specific use case where there's certain requirements for a project or file type that really do need to get under an exact kilobyte number, then you can use this feature, but otherwise feel free to continue using the quality slider, which is more just based on a quality ratio. You'll still get really good compression, you just won't get the exact numbers that you would with this brand new feature. 

I hope that's helpful, I know a few of you have been requesting this feature for a little while, so thankfully it's shipped now and you can use it as of today. I hope that it helps with some of your projects and some of your exports that you've needed this feature for, and until next time, thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to add dark mode styles to HTML email designs using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-09-02T00:00:00.000Z
dateModified: 2021-09-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-dark-mode-styles-to-html-email-designs-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-dark-mode-styles-to-html-email-designs-using-emailify.md
---

# How to add dark mode styles to HTML email designs using Emailify

#### Video Transcript

Today I'm going to be showing you how to add dark mode style overrides to your HTML email designs in Figma using the Emailify Figma plugin. 

The first thing we need to do if you haven't already done so, is go to the Figma Community and search for the word "Emailify", and if you hit enter that will pop right up. If you click on the "Install" button on the right-hand side, once it says "Installed", you'll be ready to go.

I'm just going to jump back into my Figma file, and if you haven't already looked at the other Emailify Figma tutorials that we have on YouTube, we've got another tutorial that shows you how to actually design these HTML emails in Figma and export them. This Figma tutorial won't be going over all those details again, and I'm assuming that you've already figured out how to design and export these HTML emails from Figma. This Figma tutorial is just going to be showing you how to add additional dark mode specific style overrides to that email design. 

To get started, we just have to right-click anywhere, go down to "Plugins" and click on "Emailify", and this is going to open up the Figma plugin that we just installed. As I said, I've already designed this email in Figma, but if you do want to add more components, or different components, or build your own; again, we do have other tutorials which go through that process. Okay, today we're just going to be looking at dark mode overrides; and what that means is we can actually specifically or choose different colors and overrides or settings for each of these layers and design elements, which will only kick in if the user is using a device to read their emails that's in dark mode. 

For example, if I wanted to ensure that this block here didn't come up as this color on dark mode, what I can do is just click on that layer, open up my "Settings" panel and down here at the bottom you'll notice a new section called "Dark Mode Overrides", and this is available on a bunch of different layer types you can apply this to: sections, columns, text layers, button layers, image layers; and you'll see they all have different types of overrides on them. For example, I'll show you what this looks like if we go to this block here and go to this column, we can actually apply a text color override to that column. Instead of being this sort of dark text, I can make it white text. I can put in the hashed HEX value for white text, and to give some contrast I'm going to also override the background color of the row by clicking on the row layer, and putting in a darker background color here; that's in the "Override Background Color" input. 

If I close that off and open up the preview by clicking the "Preview" button in the header, that's loaded up an HTML preview of our email, and you can see here that nothing has changed yet; the reason for that is we've got this new toggle up here which is called "Show Dark Mode Overrides", and if I click on that, you can see here it's now triggered that dark mode preview to kick in. Instead of the white background with dark text we've now got a dark background with white text. 

What we can do if we want to really tweak this is we can get down into the individual text layers as well, and we can actually override those individual layers on top of the block layer level. If I click on the "Settings" panel while I click on this description text, you can see here I can override that text color even further at that granular level. I'll click on the input and I might make this text just a little bit darker, so I'll make it it's a light gray, and it's going to reload the preview, and now you can see here instead of being white, which is a little bit too much contrast, I've just knocked that back a little bit to make it more of a light gray. 

We can go ahead and do this to all of our different elements here, and you'll notice that the image here isn't set up; the reason why that's not showing up is because I'm actually going to show you how to also swap out images. What we can do is if we click on any of our image layers, we can actually hide and show those image layers depending on if they're in dark mode. For example, I've got these two images here that I've created and they're versions of the same image, but one's knocked back a little bit in how bright it is, and the other one's just the regular brightness. What I'm going to do is I'm going to click on the regular brightness image layer, and I've got the toggle set to only hide this layer when dark mode is enabled, so the "Only Hide on Dark Mode" toggle is enabled on the regular brightness layer, and on the paired back brightness layer I've checked the "Only Show in Dark Mode" checkbox.

By default, both of these are turned off, but if I wanted to show both of these at different times, I can do that by toggling these. I'll show you what it looks like without the toggles first, and you can see what it looks like when we turn them back on. I've just turned off those "show" and "hide" toggles, and you can see here it's rendering both the images in dark mode and in non-dark mode, but if I click on the "Settings" panel and only hide the brighter one on dark mode, and only show the darker one on dark mode, if I refresh that preview you'll be able to see that in the regular email mode the brighter version of the image is showing, but if I toggle on dark mode it's overriding that image, so it's swapping out those images. This can be really handy if you're using images, or transparent images which blend into the background. For example, a logo; you could swap out a logo for a dark version or a light version on the different dark and light modes, and that's something that can be really helpful with your designs when you are thinking about dark mode in mind. 

Of course, we can go through all of these and change the background colors for all of them; I won't go through every single one, but just to give you a bit more of a feel of what this can look like, I've just swapped out the background color and text color for that section there. Of course, again, we can go down to a granular level and apply those at a per text layer basis, so I might make that description text a little bit duller, and that's going to kick in and just be a little bit less contrast. That's roughly what it looks like to enable the email dark mode style overrides in Figma, and you can apply this to all your different layers, and you can see what that looks like just by toggling it on and off and then tweaking it a little bit more as you go along.

The other thing that's worth noting is that these dark mode overrides will only apply to email clients that support it, so if we look at the caninemail.com website, which is a really good one to check out for what features are supported on different email clients, we can see here at the moment it's supported in across about 25% of all email clients. It's a relatively new feature, and at the moment you've got full support on MacOS and iOS in Apple Mail, you've got some support in different versions of Outlook on MacOS, Outlook.com, and iOS it's all supported. You've got some support with "Hey", the email client from Basecamp, and a couple of other random browsers as well. Be mindful that this is not supported across things like Gmail at the moment; hopefully that gets supported in the future, but for now I would really consider this to be more of a progressive enhancement. I would still try and design the emails to work well under normal dark mode circumstances but this just gives you a little bit of extra design control for those email clients that do support these dark mode specific theme overrides. 

That's what that looks like there; you can go through and change every element really if you wanted to in your Figma email design to optimize it for dark mode. It's worth being mindful of the fact that the dark mode preview is only showing you your dark mode overrides that you've added personally via the Figma plugin as well. What that means is this is not an accurate representation of the automatic dark mode styles that different email clients will include; email clients like Apple Mail or Outlook will actually automatically inject their own dark dark mode style sheet. That will automatically do things like invert the colors of the background and text, and try and do its job automatically to some extent, but these additional overrides that you add in the Figma plugin will basically override their dark mode overrides where it's supported. That's just something to be really mindful of in case you're wondering why the preview here is looking one way, but when you actually go to preview it in something like Apple Mail or iOS it's looking a bit different, so I hope that makes sense.

If you've been wanting to optimize your designs a little bit further, I know a lot of you have been wondering how to do this by adding dark mode to your HTML emails from Figma. Currently, this is the best option that we have to do those specific dark mode overrides, and as the support increases over time this will hopefully become more and more useful in the future to really making sure our email designs come out exactly the way that we want under dark mode and regular mode in all these different email clients in the future. 

Thank you for watching, I hope it's been helpful, and if you've been wondering about dark mode with your email designs and if you've been following along with the other Emailify Figma tutorials, I hope that if you've been wanting this dark mode feature you can now go ahead and try it. I'm really looking forward to seeing what everyone comes up with, and we'll be back very soon with more of these Figma tutorials. As always, thank you for watching, and we'll catch you in the next one.

---

---
type: tutorial
title: How to downsize Figma image fills to their layer size using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-08-22T00:00:00.000Z
dateModified: 2021-08-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-downsize-figma-image-fills-to-their-layer-size-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-downsize-figma-image-fills-to-their-layer-size-using-tiny-image.md
---

# How to downsize Figma image fills to their layer size using TinyImage

#### Video Transcript

Today I'm going to be showing you how to downsize your Figma image fills in order to fit the content layer that they're actually being used on. This is going to optimize your image sizes, it's going to speed up your Figma file performance, and it's just going to save you a whole bunch of extra megabytes and image size that would otherwise be taken up unnecessarily.

The first thing we need to do to get started is just go to the Figma Community and search for the word "TinyImage", as we're going to be installing a Figma plugin to do this. If you type "TinyImage" into the Figma Community search, go to the "Plugins" tab and you'll see "TinyImage Compressor" pop-up. All you need to do is click on the "Install" button on the right-hand side over here and then you're good to go. 

I'm going to jump back into my Figma file here, I've just taken a handful of images using the Unplash Figma plugin; that's just a Figma plugin that allows you to grab stock images directly into Figma, you can just add them like this, and these are typically very high resolution images. You can see this one's 1280 by 1920 which is great if you actually want those images to be at that size, but very often you'll drag these images into your design and you'll actually end up rescaling them to be much smaller. 

For example, if we scale all of these down instead of being at 1200 or 1900 pixels, if we scale them all down a little bit to a smaller size, let's say in our design we actually only need them to be three or four hundred pixels wide because we're designing a mobile screen or something like that, the problem is it looks really good, it visually looks correct; we've got these 400 pixel width images, but behind the scenes the Figma image fill that we got from Unplash, the super large high res one, which is four or five times the resolution of this, is still actually being stored and loaded every single time in Figma. 

If you've got a lot of these, it can tend to slow the file down and you're just using up a whole bunch of space that you don't actually need. The way we can solve this is just by right-clicking anywhere, going down to "Plugins" and clicking on "TinyImage Compressor", the Figma plugin that we just installed, and to solve this problem we're going to be using a brand new feature called "Downsizer". I've got another tutorial on all the other features in this Figma plugin, but for today I'm just going to be focusing on the new feature of the Figma image downsizer. To get started, we just click on the "Downsizer" button in the header of the Figma plugin, and this is going to load up all of the Figma image fills in your Figma page. You can see in mine I've only got a few layers, and each of those layers only has one Figma image fill; if you have multiple Figma image fills it'll load those in, too. We can select them by either just un-checking the ones we don't want, or you can actually filter this really quickly just by clicking on multiple layers, and if they contain Figma image fills they'll get filtered down here, and that's just an easy way of filtering a couple of images if you don't want to do the whole batch. 

For today, I'm just going to make it really simple and do them all at once. Just to explain what's going on here, this interface basically just gives us one option; we can downsize Figma images to match two times the layer size; what that means is if our layer is 427 by 640, but the original image is five or six times that. What it's going to do is it's going to scale down the original Figma image fill to be two times the size of this content layer and it's going to proportionately shrink that down to make sure it's only a maximum of two times this size. It's going to keep that retina 2x sharpness, but it's not going to be the original image which is just way, way too big.

For this case I'm just going to leave it at that, you can actually uncheck that and that will downsize Figma images to 1x of the layer size, so it would downsize Figma images to exactly match the 427 by 640 proportionally, but it's not going to look as sharp. For now, I'm just going to leave it checked at 2x, and I'm going to click on the "Downsize Figma Fills" button; I'm just going to do all the images and click on "Downsize Figma Fills @2x", so you can see here it's now going through and downsizing all of these six images, and we can see here, what's going on is we've got the original file size, so that's the original file size from Unplash, and then we've got the a list of optimized file sizes. You can see that it's gone ahead and it's downscaled all of those images; it's replaced the Figma image fills, so these are brand new downsized Figma image fills that have been replaced behind the scenes. 

You probably didn't notice them briefly flashing, but they were flashing and getting replaced; and if we zoom in, so if we zoom to 100 percent, they're still retina sharp; they're still very, very sharp. The reason for that is it's scaled proportionally to be exactly two times the size of the content layer. Even if we zoom in to 200 percent, it's still extremely sharp at 200 percent as well because of that 2x retina scaling. There's also a little bit of compression going on as well behind the scenes, so not only does it downscale the Figma image, it also does compress the Figma images very slightly; just enough to save a bit of image data without being a noticeable quality difference. You're really getting two sides of optimization there; the Figma downsize itself of the image dimensions, and also a bit of image compression going on behind the scenes, too. We can see here just from running that on these six images that we've saved a total of four megabytes. You can see all the originals here; for example, this one was one and a half megabytes, now down to 433 kilobytes, this one we saved 80 percent; so at least 70 percent saved for all six of these Figma images. You can imagine what kind of savings you get at a much bigger scale.

If I jump into a different Figma file, I'm just going to use this other design that I duplicated from the Figma Community. I'm just going to run the TinyImage Figma plugin on here as well, and I'm going to do exactly the same thing; I'm going to click on that "Downsizer" button once again, and that's going to load up all of the Figma image fills that are found on the page. Some of these might actually have multiple Figma image fills behind the scenes, too. If you're struggling to see what image actually relates to, or what part of the design, you can really quickly jump to any of them as a preview just by clicking on the little image icon here. You can see here that this image relates to that Figma fill, and I can keep jumping around if I want to preview what all these different fills relate to; that's just a quick way of doing that.

I'm just going to leave it at 2x, and I'm going to click on "Downsize Figma Fills" at 2x, and once again it's going to go one by one through every single one of our Figma image fills because I've left them all selected, and you're going to see all of the savings for all of these images. In particular you can see that these layers here are actually very small; the size of these layers compared to the original image is quite different; this is 164 pixels by 164 pixels, but the original image behind the scenes there is much, much larger, as we can see by looking at the statistics over here; this Figma image has been downsized to be 200 kilobytes, but that's from an original file size of three megabytes, so that's a 93 percent saving just from that one layer alone. 

Again, the more of these larger scale images you've got in your design, and the more that they're actually being shrunk down, the more you're going to save; as a concrete example of that, you can see just from this one page alone, which actually isn't a super large page, that's actually relatively small, there's only a handful of frames here; but just from optimizing and downsizing this one page alone, we've saved 44 megabytes in total. There's not even that many Figma images on here, it's barely even scrolling further down the list, but again we can see that we've saved a minimum of 90 percent on all of these images, because they're more vector based, and they're much more optimizable. 

Just as another example, I'm just going to do one more landing page and I'm going to re-run the Figma plugin by right-clicking, going down to "TinyImage Compressor" again, and this time I'm just going to show you what it looks like with the 1x option. If I click on "Downsizer" and load up all the Figma image fills, this time you can see that we've got some very large target sizes, and I'm assuming the images behind the scenes are actually even bigger, but this time instead of doing 2x, I'm going to do 1x just show you what that looks like, too. I'm going to un-check that click on "Downsize Figma Fills" at 1x, and this is going to downsize all the Figma image fills on the page to be 1x of their of their size. You can see here it's just going through and doing all those, and because these are already quite large already, these are fairly large frames, the 1x option in this case is probably going to be fine because the images are so big. Usually, if you've got smaller images you want to keep the 2x option turned on for sure, but sometimes if you've got a really big image and the image is slightly bigger than this one, but it's not 2x bigger the original image, then maybe the 1x option is actually going to be better for those sorts of scenarios. You can see here they're still looking quite good even with the 1x option, but typically you'd basically want to keep the 2x option turned on anyway, but again, this is just showing you that you do have that option if you did want to use it. 

That's essentially the overview of how to downsize and optimize images in Figma on your canvas. You can use the TinyImage Figma plugin's downsizer function to do this, it's brand new plugin featur,  and I think it's going to make a huge difference to performance, and a huge difference to file sizes in your Figma files. If you're using a whole bunch of images, it's going to mean your Figma files are going to open up faster, they're going to be smoother to zoom around in, and also when you're doing exports sometimes, if you've got really big images, the exports take a while to load; and if they haven't loaded completely when you do go to export a PDF or export certain images, sometimes you can actually catch them still trying to load in the background, and you'll get a low resolution image. I'm not sure if you've ever come across that, but it actually happens more often than you would imagine, especially in files with lots and lots of Figma images, hundreds of megabytes worth of images trying to load up in the background; this can unfortunately happen more than you would want in bigger Figma files.

As always, thank you for watching, and I hope it's been helpful if you've been trying to optimize your Figma files for speed or performance, or downsize your Figma images in the way that we've seen in this Figma tutorial today. We'll be back soon with more Figma tutorials just like this one, and thank you again for watching.

---

---
type: article
title: Best Figma plugins for marketing teams
description: The best Figma plugins for marketing teams that need to ship emails, ads, decks, and assets faster.
datePublished: 2021-08-01T00:00:00.000Z
dateModified: 2021-08-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-marketing-teams/
markdownUrl: https://www.hypermatic.com/articles/best-figma-plugins-for-marketing-teams.md
---

# Best Figma plugins for marketing teams

Marketing teams love Figma right up until the moment the real production work starts. Designing the campaign is the fun part. Rebuilding HTML emails, resizing social assets, exporting banner variants, compressing images, and turning slides into a shareable deck is where the hours disappear.

The best Figma plugins for marketing teams are the ones that remove those repetitive steps without forcing everyone into a different tool. If your team lives in Figma already, these are the plugins worth looking at.

### Emailify

If your team designs email campaigns in Figma and then hands them off to someone else to code, [Emailify](/emailify/) is the first plugin I’d install.

It lets marketers and designers build real email layouts directly in Figma, then export production-ready HTML for platforms like Klaviyo, Mailchimp, Braze, and more. That means less time rebuilding the same design twice, and fewer late-stage surprises when the email needs to go live.

Emailify is especially useful when your team needs to move quickly on:

- campaign emails
- newsletters
- lifecycle emails
- product launch emails

### Bannerify

If you make paid ads, [Bannerify](/bannerify/) solves one of the worst recurring jobs in marketing production: turning a pile of Figma frames into real banner deliverables.

Instead of manually rebuilding ads in code or exporting endless static files, Bannerify lets your team animate and export HTML5 banners, GIFs, and video files directly from Figma. That makes it much easier to handle campaign revisions, platform variants, and last-minute copy or design changes.

### Pitchdeck

Most marketing teams also need slides, whether that means campaign reviews, internal planning decks, client presentations, or launch pitches. [Pitchdeck](/pitchdeck/) turns Figma into a much more practical presentation workflow.

You can design the deck the way you want in Figma, then export it to PowerPoint, Keynote, Google Slides, or PDF when other people need a more familiar format. It is a strong fit for teams that care about design quality but still need something flexible enough to circulate beyond the design team.

### TinyImage

Asset performance matters just as much as asset quality. [TinyImage](/tinyimage/) helps marketing teams export compressed images, PDFs, GIFs, and modern formats like WebP or AVIF straight from Figma.

That matters when you are trying to keep landing pages fast, email assets lightweight, PDFs easy to send, and social content sharp without bloated file sizes. Instead of exporting from Figma and then compressing everything somewhere else, TinyImage keeps the workflow in one place.

### HyperCrop

If your team regularly needs the same image in five different sizes for paid social, organic social, email, and display ads, [HyperCrop](/hypercrop/) saves a lot of pain.

It helps you batch crop and resize images into multiple aspect ratios without manually rebuilding each version. For campaign teams dealing with constant asset requests, that kind of speed adds up fast.

### So which plugin is best?

If your marketing team mostly works on email, start with [Emailify](/emailify/). If ads are the bigger headache, start with [Bannerify](/bannerify/). If presentations and exports keep slowing everyone down, use [Pitchdeck](/pitchdeck/). For image-heavy campaign work, pair [TinyImage](/tinyimage/) with [HyperCrop](/hypercrop/).

If your team touches all of those workflows, the better answer is usually the [Hypermatic Pro Bundle](/bundle/). It gives you a practical toolkit instead of forcing one plugin to solve every problem.

---

---
type: tutorial
title: How to add animated GIFs from Figma to HTML email exports using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-07-12T00:00:00.000Z
dateModified: 2021-07-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-animated-gi-fs-from-figma-to-html-email-exports-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-animated-gi-fs-from-figma-to-html-email-exports-using-emailify.md
---

# How to add animated GIFs from Figma to HTML email exports using Emailify

#### Video Transcript

Today I'm going to be showing you how to include animated GIFs into your HTML emails from your Figma designs using the Emailify Figma plugin.

The first thing you need to do is just go to the Figma Community, search for "Emailify", and if you click on the "Install" button next to the result under the "Plugins" tab that'll install the Emailify Figma plugin, and then we can get started.

I'm just opening up a new Figma file, and I can run the Figma plugin just by right-clicking anywhere, going down to "Plugins" and clicking on the "Emailify" item, and that's just going to run the Figma plugin that we just installed. The first thing we need to do is just create a new frame, so I'm just going to call this one "GIF Email "Test" so we can do a test, and I'm going to click on "Add New Emailify Container"; this is going to add a new frame to your Figma canvas and that's going to allow us to include these content modules which I've covered in some other tutorials, if you want a deep dive on those, and you can also include custom modules as well. 

What we can do to add GIFs is, I'm going to run through the few different ways that you can include GIFs in your Figma email design. The first one I'm going to do is the hero background; you can use a GIF as a hero background, so if you find one of the content modules which are a "Hero Background" type; for example, this "Full Width Background Image" is one, there's also other ones like the "Hero CTAs", these will also work. What you can do to include GIFs on those is just click on the frame; it'll add this brand new component, and you just want to click on that component, and where you've got the "fills" on the right hand side, you want to click on the image fill, and you can see here it's got the default one, but we want to actually put our own one in there. 

I'm just going to grab a GIF that I downloaded from the internet and drag that into the Figma fill, and that's going to include that as the background fill. That allows us to keep all of the text as rich text, and it allows us to have the GIF as an actual background image. This background is a little bit lighter, so what we can do is we've already got a fill on there, a transparent fill that we can increase that value. It's a bit darker if you want the contrast to be a bit better, so you can include that just make it however you want, and that's going to include the fill on top of the GIF when it gets exported. That's the first way you can use GIFs. 

The second way is just by using them as inline images. For example, if you get any of these image components; I might just add this one, and what you can do is the exact same thing. You want to drill down into the Figma image layer inside of the column, you've got the image frame, and again we've already got an image fill set, but we obviously want to replace that and add our own one. I'm going to do that, and I'm going to add this other GIF; I can add that GIF in there and I can do another one. I'll just add another frame, do the exact same thing; I'm going to click on the image fill, and I'm going to drag a GIF in there, and that's adding another GIF. 

The third thing I can do is I can actually create content modules or inline content images, which allow us to just drag and drop the image onto the content as well. Let's say I've already got a text component for example, so I can click on that, and while this doesn't have any any images yet, what I can do is actually drop an image on there. If I want to make this a little bit narrower and drop a brand new GIF in there, I can just drag that GIF straight into the frame, and if you have a look on the left hand side you'll see that inside of the content column the GIF has been added as just an inline GIF. It's not set as a frame background, it's not set as a component background, it's just a layer in and of itself. That's the other way that you can add GIFs in there, and we can move that around.

There's there's benefits to doing each of these, so I'll run through those really quickly. The first thing to know is that you can apply any additional fills on top of any of these; for example, if I wanted to add an overlay to this GIF image, I can click on the "plus" icon next to the Figma fills click on that. I can do things like add opacity color with some opacity, I can create a gradient, I could do a colored gradient, so we could do something like that and that would allow a static gradient on top; you can do that, and when the GIF gets exported the gradient will actually be included in the GIF. That's one thing that you can do with any of these GIF images. 

The advantage to having a frame, so for example, these ones are actually frames rather than an image layer, and the advantage to having a frame is you can do things like add other layers inside of the frame. I'll show you what I mean by that; if I click on this image layer I'm going to add a fill just to make it a little bit more contrast. I'm going to add a fill on top of that, but then now that this is a frame I can actually add layers within that frame. That allows me to add things like text, so I can add text, I can say "Sushi Sleeping"; I can put a little text overlay on there. You could include other static images on top of that, and that'll all get included in the export. 

The other thing that you can do with something like the hero; we've got this hero background, the other thing that we can do there is also add static images to that, too. What I can do is I can maybe copy this as a PNG, so I'm just going to copy that layer and I'm going to jump into my hero, and I'm going to paste that. I'm just going to scale that down and move that to the top, and maybe I'll put some border radius on there. What that's going to do is, it's going to include this as an image layer inside of the hero background; what that means is it's going to leave the background image as an animated GIF, but you can also include this image as its own image element. The difference between this method and the frame method is that it will still get exported as a single image, whereas these two will get exported as two different images; the background image on the hero will be exported as a GIF, and the image here will be exported as its own image on top of that. 

If that doesn't make any sense, I'll do an export now just to show you what I mean by that, and you'll actually get a sense of what this all looks like when it gets exported. The other thing to quickly note is that this will not show up in the preview; if you click on the "Preview" button in the header, you'll notice that the GIFs don't actually get rendered. We've got all of our images as we expected, but they're all static and that's expected; you basically have to render out the GIFs from Figma, and this takes a little bit of time. The preview at the moment doesn't actually do this automatically, but the way that we can see it in the export is just by clicking on the "Export" button, and I'm just going to click on the "Export to Code" button and that's going to now export our email from Figma to HTML and it's also going to go through and export any GIFs that it picks up on that we just added. We've added four separate GIFs, so it's going to go through detect all those GIFs render them out. 

That's just finished, so what we need to do is just click on "Download your .zip file"; if we click on that, I'm just going to save it to my desktop, and once that saves,we can actually go ahead and open that in our browser. I'm just going to double click on the zip file, open up the folder, and I'm just going to drag the preview onto my browser. There we go now, you can see the GIFs actually being rendered out from Figma to HTML. 

We've got our background GIF with the opacity layer included on the top, and we've got our rich text over the top, which is real selectable text; it hasn't been included in the GIF. We also have our image; this image is its own image that's been exported to sit on the top of the hero, and the hero is a very special kind of element because it does allow that real background image; most of the other normal rows don't allow that, but the heroes do. Then we've got our other GIF here; this is the GIF that we included the overlay fill on, and the embedded text; this text is embedded in the GIF, it's not sitting on top, it's not like this rich text that's all embedded in that GIF image. This is the GIF that we left as is, so this was just completely untouched, we didn't add any fills, we didn't have any text layers, anything like that. Finally, we have our inline image; this was the image that we dragged and dropped directly onto the folder onto the Figma file, and that's included the gradient on top as well; we've got the gradient, we've got the normal one, we've got the opacity and we've got the hero. 

We can also do things like scale this image down; by default, it will just go to 100% width. I've covered this in some other Figma tutorials, but just really quickly, what you can do is you can click on that image, click on the "settings" icon and you can actually override those widths and heights. That's what that looks like there; you could put in something like 44 by 44 pixels maybe, and that would export it as 44 by 44; or if you want to do 103 by 103, as it is now, you can do that; you can also just uncheck the "100% Fluid Width" toggle and that will work as well. 

That's basically what it looks like. The GIFs all get included, and these are directly from Figma. You don't have to do any extra work to upload them anywhere else to get them exported from Figma to HTML emails, but of course, you will have to upload these as images online somewhere if you're sending them via an email; you'll want to use something like a MailChimp, Klaviyo or Campaign Monitor email service provider. However, this tutorial is just basically just going through including the GIF from Figma to HTML, how they work, what the different types of GIFs are, and just running through that specifically. This has been a highly requested feature, and we just shipped this recently, so I hope that you enjoy it. If you've been wanting to include Figma GIFs into your HTML emails and not need to manually replace it in the HTML, as I know has previously been the only way to do it, then this should save you a lot of time including those Figma GIFs. As always, thank you for watching, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to create custom components for HTML email exports in Figma using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-07-11T00:00:00.000Z
dateModified: 2021-07-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-create-custom-components-for-html-email-exports-in-figma-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-create-custom-components-for-html-email-exports-in-figma-using-emailify.md
---

# How to create custom components for HTML email exports in Figma using Emailify

#### Video Transcript

Today I'm going to be showing you how to create custom HTML email components in Figma using the Emailify Figma plugin.

The first thing we need to do if you haven't already done so, is just go to the Figma Community and search for the word "Emailify", and if you pop that in and click on the "Plugins" tab you'll see this result pop-up. All you need to do is click on the "Install" button on the right-hand side, and once it says "Installed", we're ready to get started.

What you can do is just open up a brand new Figma file, and to run the Figma plugin you just right-click anywhere, go down to "Plugins" and click on "Emailify HTML Builder", and this is going to open up the Figma plugin that we just installed. 

The first thing we need to do is just give the email a name; I'm just going to call it "C"omponent Test", just for this tutorial, and I'm going to click on "Add new Emailify Container", and that's just going to add a brand new empty frame to our page. It's a special kind of frame that allows us to add these components from the Figma plugin, and then we're also going to be able to add our own custom Figma components which I'll show you in a moment. 

If you've already seen this tutorial in another video, you'll know that you can basically just click on any of these components, you can go to different categories and immediately create those components; these are totally customizable these are native Figma components. You can customize them, and then you can reuse them as instances, which means that you can change anything in there; if you wanted to change the font size of the body, you could do that, and it would update across all of your instances. That's how you can do it, but if any of these components that you've got in the pre-built component section aren't what you're looking for, we can actually create a custom one by clicking on the "Custom" tab in the menu up here.

If you click on "Custom", you'll see it comes up with this little call out saying that we don't have any custom components yet, but what we can do is click on this "Create New Component" button, so I'm going to do that now and that's going to bring up the custom component builder. This is a brand new feature in the Emailify Figma plugin, and what it allows us to do is customize our custom Figma components using this interface. What I can do is essentially grab any of these elements; if I wanted to grab a title tag element, I can drop that in there, I can drop in some body copy, I can add a button. You can see up here we've got some layout options; at the moment it's just defaulting just a single column, but if I want to make that into a double column I can just click on double column, and that will add a brand new column here. I can do things like add an image to that second column, and you'll get a sense of what this looks like if I just create this component now. I'm just going to call this one "Split Image Component", and I'm going to click "Create & Insert New Component", and you can see there it just created a brand new Figma component under the custom components category, and it's also automatically added into our Figma design. 

This is completely customizable, as the other ones were; it's a native Figma component, so you can modify that content, you can go ahead and still change things around in here, you can add images, and update padding, all that sort of stuff. We can update that, and that will be reflected in there, and again, you can duplicate that and create an instance and that will allow you to easily keep those changes in sync across your design or in other emails as well. 

There's a few other things we can do here, we can edit the component; we can click on this little "settings" button and that's just going to bring up the component that we just added. What I can do is I can move that around a little bit, add new things to it, so I could add some social icons down here and then if I go ahead and update that by clicking on "Update Saved Component", you can see here that it's updated the component. It's worth noting that that will not impact anything you've already added to the Figma page, it's just going to update the saved custom Figma component for you to add in the future again. If you click on that image that little icon, you'll see that it's added our brand new updated component.

The alternative way of doing this if you don't want to override the original component, but you want to use it as a base for a new component, is you can click on that "settings" button again, and in this case I'm going to do a triple layout just to show you a bit of a different example. In this one, we'll do a triple layout; I'm going to move this over there, I'm going to do it kind of like a right aligned one and basically just flip a few things around. In this case, I'm just going to add another bit of content in the middle, and to the left, and I'm just going to make that centered and that right aligned, so you can change the alignment of each column down here as well, and the vertical alignment of the row up here you can change. In this case, instead of clicking on "Update Saved Component", what I'm going to do is instead create a new name; I'm going to call this "Triple Component", and I'm going to click on "Create & Insert New Component" (instead of "Update Saved Component"). If I click on that, you'll see here that it's created a brand new component; it hasn't updated our original one, it's left that intact, but we were able to use that as a base to create a brand new "forked" Figma component, I guess. 

That's added it to the page down here as a brand new Figma component, and it's left the other ones untouched. Again, you can go in there and edit that one, too. For example, if I wanted to make that, let's say, bottom aligned (as far as the row goes), I can do that. If I click on "Update Saved Component", you can see here it's updated the saved component, it hasn't modified the one we've already added to Figma, but I can now add that as a brand new Figma component by clicking on it. Now it's bottom aligned, and of course, you can update these things inside the component itself. If you wanted to do a different alignment, you can change it in here just by clicking on the column; you can see you've got the columns here and I can change that in my Figma settings, and update that manually, too. That's all all possible in there, and these are totally customizable; it's just to serve as a bit of a base for brand new Figma content components.

If we add another one, I'll just show you a few different alternatives. We can do things like add a "hero" component; this allows you to have a real background image with rich text content, or rich text elements over the top of it. If we click on that one for example, and then we add a title, and a body, and maybe a button, just to keep it simple; I'm going to center align that, I'm going to call it "Custom Hero", and I'm going to click on "Create & Insert New Component", and you can see here it's created a special "hero" Figma component; you can see a little hero emoji, and what that means is it's effectively going to let you add a real background image. If we open up that fill, you can see here that is an image fill, so you could drag a brand new image onto that fill and that would allow you to have a different background image, and of course you can customize this text, and the colors, and spacing, and fonts and everything that you need to in there. 

We can actually see what this looks like just by opening up the preview feature of the Figma plugin. I'm just going to move this up to the top just to give a bit more of a preview. What we can do is click on the "Preview" button in the email if I header, so if I click on "Preview", that's going to generate a real HTML preview in real time inside the Figma plugin. This is just before we export the final HTML, so you can get a sense of what it's actually going to look like. I can update that to desktop sizing, and you can see what that's going to kind of look like. You can see there it's basically matching up as you'd expect, but this is the real HTML that's going to get exported, these are real buttons, real icons, and you can customize these on the page and then refresh the design by clicking the "refresh" icon. You can go ahead and also add mobile updates, so if you click on the little "settings" icon after clicking on any layer, you get a whole bunch of different options. If I wanted to optimize this for "iPhone 12" and I noticed that something needed to be adjusted, I can open up the settings, I can click on either a row, or I can click on a column, I can click on a text layer; and that allows me to do things like override the font size on a mobile device, update the line height, override the letter spacing, update the alignment; I can do all these things. I can hide it just on mobile or desktop; so you can basically click on any of these elements, and depending on what the element type is, it'll automatically bring up these options for you. You can add things like the link, so this Facebook icon you would want to paste in your Facebook url there and that would automatically include it in the HTML export. Those are just normal features, they apply to the regular content components as well, so you can click on those and you get the same options, but you'll also get them with your custom Figma components that you've added in, too. That's what that looks like there, just in the live HTML preview. 

The other thing you can do is, there's another special type of component we can create; there's two ways of doing this, but you can basically add custom HTML or custom code into your components as well. I'll show you the first version of that just up front; the first way we can do that for example is if we open up, let's say, our existing Figma component and we want to add some code into that component, what we can do is we can drag this code element, drop it into here and I'm just going to click on "Update Saved Component", and if I click on that component to load it in what you'll notice here is you've got a new special text field with a little programmer emoji, and this is actually going to allow us to create custom HTML. What I can do is I can either paste or type custom HTML, and for example I'm just going to add the most basic example of this just to show you how it works. I've just put in a really basic table, so I'm going to click on "Preview", and what this is going to do is it's going to render that HTML for me in here. That is custom HTML being rendered from the Figma text layer; that's pretty cool, because it means you can completely customize the HTML that gets injected into any content block or any column. Of course, this is a very lame example, it's just a "hello" but you could add effectively anything you wanted onto there.

What you can also do, if you click on the email frame itself; if you click on click on that top level frame and click on the "settings" icon, what you can do is you can actually inject CSS rules in here as well. I'll just make that a little bit bigger so we can we can see what that looks like. Let's say I wanted to add some CSS to any element that has a class name of "blue"; let's say I've got "blue" and I wanted that to be have a color of blue; I can do that quite easily, and this is just a very basic example. I also might want the font size to be a bit bigger, and I might want to also set the font family; I could set that to "Arial" and have a fallback of "sans-serif"; this is just a very basic example, but what this is going to do is it's going to inject these CSS rules onto any element, inline element, that you've added in an HTML tag. I'm going to grab that class, and I'm going to get the "blue" class and down here. I'm just going to clean up these other Figma components for a second so we can clearly see what's going on, and I'm just going to jump into my code block again, and this time I'm going to add a class name to my "td" tag and it's going to be a class of "blue", and I'm just going to refresh that, and you can see there it's actually injected that class onto the element; it's rendered the class name, and it's injected the styles that we added in our settings panel on here. That's that's pretty neat; what we can also do is inject mobile CSS rules as well. This might seem counter-intuitive, but if you wanted to do the "blue" class and actually override that to be "red" on mobile you can do that; these mobile rules will only be applied on mobile, you just have to remember to add the "!important" flag to mobile because it needs to be overridden. Now I've added, that I'm just going to refresh, and you can see it's now red, but it's only going to be red on mobile; on desktop it's still blue, sp you can add different rules for your CSS classes using that settings panel, you can also just directly inline those class those styles onto the element, too. 

If you wanted to just jump in here and do some inline styles, you can totally do that as well; you could put those styles on there and that would also work. You could do something like letter spacing, and you could set that to 10 pixels or something like that, and if you refresh that, you'll see the letter spacing pop up. You can actually include those styles directly on that component, so that's quite handy; you can also do things like if you're using MailChimp, or Campaign Monitor, or an email service provider (ESP), what you can do is you can add merge tags. You could do custom text or custom messaging, which means you could do things like placeholder tags. I can't remember the exact syntax, but it's something like "FNAME" or something like that in MailChimp, it looks something like that. What that will do when you send the email is it will swap out that "FNAME" with any placeholder; having said that, you could also use that on your normal text layers. You can do something like that and MailChimp will also swap out that for the real first name in your list. The other thing you can do is templating tags; if you're using a templating language in your email system you could do things like "if" statements. If "something" equals to "something", that would also let you let you do something render some different content in there depending on those conditions. This is totally fake syntax, but this is just an example of what you could do. 

The other neat thing at a much larger scale that you can do with this code feature, which I'll show you now, is let's say you've got a few different components; let's say we've got a hero, and let's say we've got two different heroes, and maybe some extra content. What I can do is I can actually have two different heroes, I could have first hero which, is the primary one, and then I would override maybe the second one the instance, but what I can actually do is create custom code wrappers as well. If I jump back in to my new component builder, and this time I'm going to select a brand new layout that we haven't seen yet; that's the custom HTML block. This is different from the HTML element; the HTML element will allow you to add code inside of a content column; the one we're going to add now is actually adding a content code block in between rows. This will allow you to do things like wrap rows with code, or actually write complete blocks of code that kind of sit in between rows that aren't contained within the structure of the content. I'll show you what I mean by that.

Again, I'm just going to do some fake syntax, but it would be something like if let's say "points"; let's say you have a points system or something for your e-commerce store. Points is greater than 30; let's say that's a tag, so I'm going to do points open; I'll do points open, it's created that as a custom Figma component, and you can see down here it's added as a custom HTML component. What I can do is I can wrap that here; I can do if points equals to 30, I can add a new one; I can do, let's say, an end statement. I'll do "end if" or something like that, and "end points". I'm going to put that at the bottom, and then maybe I'd my syntax language also has like an "else"; I might do "else" here and I could drop that in between those two, and what that would do is it would render these little things of code as raw text or raw code. If we open up our preview, you can see here that we've got raw text. We've got "if points is greater than that 30", load this one, "else" load that one; then "end" the conditional down here. Again, these are totally fake conditionals but your email service provider would have conditional logic that you can paste in as HTML, and you could create these kind of dynamic blocks using that method.

Finally, the other thing you could do, as I mentioned a minute ago, is you could have something like this inside of the rows, in between the rows. If we do a brand new component, and we'll say "Custom Table Block" or something like that; paste that in there, you can see the code getting highlighted in there as well. You could basically paste an entire table layout, and that would get injected in between any of these rows. You would have to probably also add a wrapper just to constrain the width of that table, because by default it'll basically just be sitting full width, so you could add some widths and stuff like that but if you really wanted to add a full block of HTML anywhere in your email, you could totally do that. That's kind of the different options you've got with the custom code block. Of course, these are reusable, so I could just click on "else end if", and easily get those code blocks added back in as reusable pieces of code. That's really easy if you need to create a bit of a library of templating language blocks, you can certainly do that and have them saved in here. You can edit them as well, just like the other ones, too. 

That's basically a rundown of this brand new feature, the custom component builder feature, which allows you to create custom email components in Figma, which will then be rendered out in HTML email format. Of course, when you do want to export this to a real HTML email, all you have to do is click on the "Export" button, you can change this just to "HTML" if you don't need "MJML", that's a different kind of templating language, and you can put in your subject line, you can put in some custom pre-header text, and all you have to do is click on "Export to Code". I'm just going to click on "Export to Code", and this is going to export my email design from Figma to production ready HTML. All I need to do is click on "Download your zip file", and I'm going to save that to my desktop, unzip the zip file, and in my folder you can see here we've got a preview, and inside the "component test" folder, which is the name of our email we've got our images and we've got our HTML. I can basically just open up the preview page first, and that's going to give us a preview of both sides at the same time; that's just a really nice way of getting an overview. We've got our terrible looking code custom code, styled code, down here; but you can see everything's been rendered from Figma to HTML as you'd expect. We've got the HTML, all of our buttons, everything like that, and the mobile view is looking pretty good as well.

I think that's basically all you need to know to get started with this. Feel free to run wild with this custom Figma component builder; I just showed you a really basic example, but you can basically go as far as you want with it. You can you can add as much or as little to each of these code blocks as you want, you could create a huge massive long single column, or double columns, or you could just create multiple columns that you use kind of in between other predefined columns or components. I think this is going to be a really nice feature to build out custom Figma component libraries that you can use ongoing. If you design these custom components, you can kind of store them in your Figma component library, and they'll also appear appear as assets over here. You can actually drag those from the Figma assets panel directly into your Figma email designs as well, so that's just another way of accessing those if you're using them in new Figma files.

I hope that's been helpful. This was a big feature request from a lot of you, and we're more than happy to ship it, because I think it's going to be really useful. I hope you enjoyed this Figma tutorial, and I'm really looking forward to seeing what you build and design with this new feature. Until next time, thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: article
title: Long mission, short hype
description: An update on what we've been up to in 2021 so far, and where we're heading in the future.
datePublished: 2021-07-04T00:00:00.000Z
dateModified: 2021-07-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/long-mission-short-hype/
markdownUrl: https://www.hypermatic.com/articles/long-mission-short-hype.md
---

# Long mission, short hype

>“Y'all know me, still the same ol' G<br/> But I been low key.” 

— [Dr. Dre](https://www.youtube.com/watch?v=QFcv5Ma8u8k), Forgot About Dre

Besides posting new feature updates on our <a href="https://x.com/hypermatic" target="_blank">Twitter profile</a>, announcing brand new plugins via our email newsletter, and writing articles on this website, we haven't really posted much about what's been going on here at Figmatic since our <a href="/articles/from-zero-to-one/">2020 end of year update</a> back in December.

 Now that we've just hit the half way point of 2021, today seems like a good time to write a bit of an update here.

### 3 years ago (July 4th, 2018)

Before talking about 2021, I thought it was worth taking a pause and looking back to keep things in perspective. Exactly 3 years ago, the DesignOps Melbourne meetup that I used to co-run with my homie Ch'an Armstrong hosted a  [design-ops-melbourne-v0.0.5_figma](https://www.meetup.com/en-AU/DesignOps/events/251847136/) July 4th Independence Day themed event, with special guests: cardboard cutouts of Will Smith and Jeff Goldblum. 

We had many of the 100 attendees at the meetup bring their laptops and do a live "swarm" in Figma as part of the main talk called [Why Figma will be remembered as a genre defining classic](https://www.youtube.com/watch?v=rokAQA5Takg) given by my friends Scott Moselen and Marty Coghlan. 

I also gave a lightning talk called [Life After Sketch – Featuring The Notorious F.I.G.](https://www.youtube.com/watch?v=7s5ZRYfI2X0). In the talk, I touched on a few trends that I saw continuing into the future, and why adopting Figma was the best bet for that future, and how you could make this happen at your company.

It's easy to forget, but back in 2018, using or advocating for adopting Figma was still somewhat of a fringe view in most companies; at least down here in Melbourne. It was a time when many companies had only just finally made the switch from Photoshop to Sketch, and the idea of doing that all again to another relatively new/"unproven" design tool was not something that was welcomed with arms wide open.

One only needs talk to any designer today in 2021, or keep track of the annual [Design Tools Survey](https://uxtools.co/survey-2020/) to see how radical and enthusiastic the shift to Figma has been in the years since then; especially with COVID-19 accelerating the trend of remote work and collaboration inside teams.

### The last 6 months

The reason for looking back to 2018 is because it's always important to ask yourself if you're correct and just too early, or if you're actually just wrong. 

When Figmatic was founded in 2019, the idea of building a startup based around Figma plugins had not been tried or validated yet. It was a pretty slow start, but after the first year, we had 60,000+ active plugin installs; today, we have 160,000+ active plugin installs. Even though this total number of installs is spread over 10 different Figma plugins, it has been very encouraging to see that people seem to be into the products that we're building.

We are a 100% self-funded company, which I still believe is an approach that will be sustainable for the long term in our case. I understand that this isn't a super popular decision in the startup space, where raising venture capital is almost a "todo" item on the founder's checklist, where it's not an "if", but "how much and how often?" to raise capital. I'm certainly not against venture capital, and I think it does make sense for many companies; especially where scaling fast or having network effects is critical to the make the business work.

While it might not sound as as cool as saying you've just raised $X million from firms "A, B and C", this was a very deliberate and important decision for me personally, because it means there are zero external pressures from investors or third parties. Essentially, it allows us to take risks and make decisions that are all about creating value over the long term. We never want to be in a position where we have to compromise on our integrity in order to pursue short-term growth for investors, at the expense of the things that matter most: our customers, products and mission.

This is partly why you don't hear much from us very often. We are not "out there" constantly demanding valueable time and attention from you by hosting webinars, having endless meetings, attending conferences, releasing free e-books, chasing "growth hacks", being on Twitter 24/7 or doing anything else to try and hype up what we're building. First of all, we're too busy actually working for any of that, but more importantly; none of that has anything to do with our mission, which is to reduce the distance between design and production closer to zero. 

I believe that focusing on building great products that save hours or days worth of time for our customers, coupled with making it really easy for anyone to discover and use them, is the best shot we have at making a real change in some of these legacy workflows. So, it's no surprise that the last 6 months here have been laser-focused on building the best Figma plugins, and consistently shipping things that add _real_ value to our amazing customers. While it sounds boring, I believe this is the best way for us to generate long term growth and value, both for Figmatic and our customers.

Since the last update in December 2020, we've released a brand new Figma plugin called <a href="/emailify/">Emailify</a>, launched our <a href="/bundle/">Pro Bundle</a>, published a collection of free <a href="/templates/">Figma templates</a>, had hundreds of conversations with our customers, and shipped dozens of new features and updates  across all of our Figma plugins.

Figmatic is still a 7 day a week, ~12 hour per day startup. As I mentioned in the previous update, I personally don't subscribe to the idea that you can get away with working for a few hours per day if you just really only focus on the important things. Instead, I believe by having hyper-focus on the important things _and_ spending more hours on it, you get a way better outcome than the approach with less absolute hours.

Working harder and/or longer hours has got a bad wrap in recent times. While it's certainly important to stay healthy, get good sleep and spend time with people you care about or with your hobbies, there is certainly something to be said for working hard on something that you truly enjoy. 

>“But you see," said Roark quietly, "I have, let’s say, sixty years to live. Most of that time will be spent working. I’ve chosen the work I want to do. If I find no joy in it, then I’m only condemning myself to sixty years of torture. And I can find the joy only if I do my work in the best way possible to me. But the best is a matter of standards — and I set my own standards.”

When you have a clear view of the future and what you know needs to be built, then the most important thing is getting there as quickly as possible. By removing everything that's unnecessary (meetings, distractions, focusing on vanity metrics etc) to stay focused and work more hours than you would in a "normal" workday (provided you're still actually productive), theoretically, one can move twice as fast towards that future.

### The next 6 months

The list of upcoming features and updates for all of our Figma plugins is exciting. Every single day here is spent focused on building more of what both we and our customers believe are the highest priority on any given week for our plugins. Just in this last week alone, we've built a browser extension for our Pixelay plugin, shipped a couple of dozen features to our Bannerify plugin, and published a bunch of updates to a few of our other plugins.

In addition to these daily and weekly updates to our existing plugins, we're also focused on developing brand new products in parallel, which will be released in the future and improved over the long term. 

So, looking towards the future, I'm happy to confirm that we've had another brand new Figma plugin under development since last year, and it's shaping up to be one of the coolest we've released so far. As with our other plugins, it fits firmly with our sole mission of bringing the distance between design and production closer to zero.

Lots of the learnings that have come from building all of our other plugins have helped direct this new plugin. There was also a bunch of time dedicated early on (before writing code) to think deeply through the philosophy behind how this new plugin will go about tackling some of these problems that it's being designed to solve.

Outside of continuing to update our existing Figma plugins and help our customers improve their effectiveness every day, the big focus for the rest of this year will be this brand new plugin. If it's half as good as I think it can be, then you're really going enjoy using it as part of your workflow.

So just chill, 'til the next episode.

---

---
type: tutorial
title: How to export clickable interactive PDFs from Figma using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-05-09T00:00:00.000Z
dateModified: 2021-05-09T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-clickable-interactive-pd-fs-from-figma-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-clickable-interactive-pd-fs-from-figma-using-pitchdeck.md
---

# How to export clickable interactive PDFs from Figma using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you how to export a clickable interactive PDF directly from Figma using the Pitchdeck Figma plugin. 

The first thing we need to do, if you haven't already done so, is jump into the Figma Community, search for "pitchdeck", and you'll see a result called "Pitchdeck Presentation Studio" pop-up. If you haven't already installed it, on the right hand side over here, there'll be a button that says "Install"; if you click on that, you'll see it change to say "Installed", and once you see that you can jump back into your project and we can get started. 

I'm just using a simple presentation deck design I've taken this from the Figmatic templates website, if you go [https://www.hypermatic.com/templates/](https://www.hypermatic.com/templates/) you'll be able to grab some free Figma presentation templates from there. I'm just using the "Wellness" template, which you can duplicate from the website if you want to follow along with this tutorial, or you can use your own deck and do it that way, of course.

The first thing we're going to do is just right-click anywhere, go down to "Plugins" and click on "Pitchdeck Presentation Studio"; that's just going to open up the Figma plugin that we just installed a moment ago. Now, if you if you're new to the Pitchdeck Figma plugin, there's some other tutorials on our YouTube channel that you can follow along with, but today we're just going to be focusing on the URL and slide links tab in the right hand column of the Figma plugin.

The first thing to note is you can apply a link a slide link or URL link to any child of a layer of your frames. If you open up your frames panel, you can see here we've got all these different frames and they have different children; for example if we go down to frame six or slide six, you can see we've got two different elements in here; we've got an image and we've got a text panel, so what we can do if we wanted to is add a link to any of these elements through the Figma plugin. For example, if I wanted to link this image to a different slide, I can click on this drop-down list I can see a list of all of my slides in my presentation or my Figma file, and I can click on any of those to link to it. If I wanted to link to slide 13, I would just click on this option, and now that image has a link to slide 13 on it. Likewise, if I wanted to link this other panel to a website for example, I could grab the templates page that we just grabbed this file from, so I could copy that URL and I could paste it onto this frame and that would now add a link onto that frame which links off to the website we were just looking at. 

You can go ahead and do this to any elements any child element of any frame that you've got in your file or your presentation. For example, you could link the welcome message to a different frame; we could just link that directly to the next slide, so we're on slide two currently, which is why we can't link to it, and we can just link that over to slide three. This would be an easy way to add calls to action or links inside of a presentation deck or an interactive PDF deck that you want to link to other frames from. For example, this little app mock up here which has got the "start" button on it, perhaps you'd like to link that to a different frame that actually has the next part of that design that you could look at. That might be on slide 14, for example, so I'm just going to click on that and I think that's enough links to get started. 

We can see what that actually looks like in a clickable interactive PDF export now. Once you've set up all of the links that you want to add onto your frames for your interactive PDF, you can go ahead and export it by clicking on the "Export Presentation" button in the top right hand corner of the Figma plugin, and we want to change the presentation export format by clicking on this drop-down list here and going all the way down to the bottom to the "PDF deck" option here. I'm just going to leave it as "150 dpi" quality; you can go up to "300 dpi" if you want a print resolution deck, but "150 dpi" is really good for screen. I'm just going to leave that there, you can add a password to the deck if you wanted to, but I'm just going to leave it as is for now. This vector path option you can just leave disabled for now, too. I'm going to click on "Export to PDF" and this is going to go through all the frames in my Figma slide deck and it's going to generate a compressed clickable interactive PDF file for me, and once it's done it's going to ask me to download it to my computer.

It has just finished exporting the interactive PDF from Figma for me, so I can now download it by clicking on the "Download your .pdf file" button, and that's just going to let me download it to my desktop. I'm going to click "Save", and you can see up here we've actually got the file on our desktop now. I'm just going to just going to double click on that to open it up in the regular "Preview" app on Mac. I'll just scale that down a bit so we can get a good look at it; okay, we can see here it's exported our entire deck from Figma as a clickable interactive PDF. If I scroll down, you'll notice that if I hover over this area here you'll see there's a little tool tip that says "Go to page 3"; if I click on that link, it immediately jumps me over to page three. We haven't added any links to page three, so we can select the text and and that's all fine, but there's no link on this page. If you remember, we did add a couple more links; down on this frame here we added two links, so if we again hover over them you can see on the right here we've got a tooltip that says "Go to page 13"; I can click on that, and that immediately jumps me down to the page 13 that we linked to. 

We also added another link to a website as well, so I'm just going to scroll back up to there, and if I hover over the left hand side you can see that the tooltip is different it's saying that it's going to link me "hypermatic.com/templates", so I'm going to click on that and you can see there it's opened up my browser for me from the PDF, and it's gone to the URL that I added in the Figma plugin. I'm going to scroll down again, and I think we added one more link to the app home screen. Again, you can see here it doesn't link outside of the app home screen design, it only links on that square or that rectangle area that we specified in the Figma plugin. If I click on the "start" button or just this entire anywhere in this image, click on that, and again it links me to that same slide in the deck with the the next screen of the app. This is a fully clickable interactive PDF; you can send this to anyone, it doesn't really matter what software they're opening it with, these links will be contained and they'll be they'll be clickable. This can be really handy if you're putting together a presentation deck in Figma that contains a mock-up or it contains some sort of flow that people can actually click through, it can be really handy or if you just want to include links to URLs or external URLs if you've got some references or something in there that people can look at, that can be really handy as well. 

I'm just going to close that off now, and go back to the Figma plugin. Of course, you can you can edit these links; if you reopen the Pitchdeck Figma plugin and you want to export another clickable interactive PDF from Figma, you can do that as many times as you want. All of your links will be saved, so if you click back on any of those frames, jump back to the "URL/Slide Links" tab, and you can see here those links have been carried over from the last export. We can go ahead and change those if we want, and it's worth noting if you do want to remove any of those you can just click on the top option, which is "Link to an external URL", and then just just make sure the the input is actually clear. If I wanted to remove the link there, I'm just going to select that text and remove it, and now that will have no link on either of those parts of the frame when you go to export your next clickable interactive PDF from Figma again. That's just the way you can clear those links if you decide you don't need one, or you just want to get rid of it, that's all good as well. 

The other thing I wanted to just quickly note, too, is if you do link to another slide; for example, here we've linked to slide 13, which is the next slide. If I go ahead and remove that slide from the deck; for example, if I uncheck that, you can see here it's automatically removed that link from from the actual element. However, if I enable that again, it has saved it behind the scenes, but it just won't be included. If I do strip that out now, so I'm just going to uncheck that from the entire deck, I'm going to leave that as is, and then I'm going to export another clickable interactive PDF from Figma by again clicking on the "Export Presentation" button, going down to "PDF deck", exporting the interactive PDF, and this time it should export the PDF without that frame, and it should also not include the link on that element. 

I'm just going to reopen the new clickable interactive PDF that we just exported from Figma, scroll down, and you can see down here this element which we did have a link on before is now completely static; it doesn't have any interactivity or any links, and you can see here it has skipped over the frame that we excluded. This time it didn't include the app mock-up that we saw last time because we unchecked it in the Pitchdeck Figma plugin; it has completely removed that from the exported interactive PDF deck, and therefore removed the link from this element because there's nothing to link to. That's just something worth keeping in mind if you are doing that, and just the very last thing I'll show you, somewhat related to that as well, is the way that the the links work, too.

If you if you go back to the "URL/Slide Links" tab, and in this last example I'll just show you show you what I mean here. For example, if you link to let's say slide 7, so we've linked to slide 7 which we can see is the number there, and we've also got the frame title, which is important to note, in brackets. If I go ahead and now change the order of this slide, so if I make slide 7 into slide 9, for example, you can see here that it actually changes it changes the number of the slide that it's linked to, but the name of the slide is actually kept the same. It's just a little bit of a note in case you are moving those things around, it's totally fine, it'll keep those those links, but it'll keep the link to the frame itself that you originally linked, to not the number. It's just a small thing to note, it's a good thing; it means it's going to always keep those links to the actual content that you linked to, even if you go ahead and change the order of them; the content that you originally wanted to link to itself will be maintained. If you are including those frames in your into your interactive PDF export from Figma, those will be kept even if you move around the order or remove those references, they'll all be worked out by the Pitchdeck Figma plugin.

I just wanted to do a quick Figma tutorial on this, as it's a brand new feature that was highly requested. This has just been added to the Pitchdeck Figma plugin just this week, so I hope if you've been wanting to export clickable interactive PDFs from Figma or add links between slides to your to your decks and export them as clickable interactive PDFs, then you can now do it using the the Pitchdeck Figma plugin. I hope if you've been wanting to do this, or if you've been waiting for this feature to drop in the Pitchdeck Figma plugin, I'm happy to say that it's finally here. If you do use it, I hope you have some success with it, and please stay tuned for more, because we'll have more tutorials just like this one coming very soon. As always, thank you for watching and we'll see you in the next one.

---

---
type: tutorial
title: How to translate Figma text layers with XLIFF files using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-04-28T00:00:00.000Z
dateModified: 2021-04-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-translate-figma-text-layers-with-xliff-files-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-translate-figma-text-layers-with-xliff-files-using-copy-doc.md
---

# How to translate Figma text layers with XLIFF files using CopyDoc

#### Video Transcript

Today I'm going to be showing you how to localize or translate your Figma designs with XLIFF files using the CopyDoc Figma plugin.

The first thing we need to do, if you haven't already done so, is just jump into the Figma community and search for the word "CopyDoc" and you'll see the CopyDoc Figma plugin pop up. If you haven't already installed it, you can just click on the "Install" button on the right hand side here, and once it says "Installed", you're ready to go and we can jump back into our Figma file.

I'm just using a really simple banners template in Figma, and I basically want to translate this into a different language. The way I'm going to do that is just by firing up the Figma plugin by right clicking anywhere going down to "Plugins" and clicking on "CopyDoc Text Kit", and this is going to open up the Figma plugin that we just installed a minute ago.

I'm going to be ignoring these first options; I've got other videos that cover those features, but today we're just going to be looking at a brand new feature called "Localize Figma Text", and this is going to allow us to export and import XLIFF translation files to and from Figma. I'm just going to click on the "Export/Import XLIFF" button over here, and it's going to give me an option to select the source language; this is the language that's already inside of our Figma file. I'm just going to select "English" and I'm going to do the "Australia" variant, and for the target language, you can select the language that you want to translate the design to. In my case, I'm just going to select... let's go with Dutch. I'm going to do Dutch "NL" version and I'm going to translate the "English Australia" version currently to a new version in a moment for the "Dutch" language.

I'm going to keep the design references, this little check box just flags if you want to export images of all the frames just as a reference for your translator to see actually what they're translating alongside the file, and the second option we have is just choosing what XLIFF format you want. XLIFF is a standardized file format for specifically translating strings or translating words from a Figma design or a application to a different language. There's different variants of it; 2.0 is more modern, but not as supported in a lot of different translation tools. At the moment, I'm just going to stick with XLIFF 1.2, and once you've selected that you can go ahead and click on "Export XLIFF", and that's just going to export every single text layer in our file to an XLIFF file.

I'm going to click on "Download XLIFF Text", export and save that to my desktop, and I've just got a little zip file now that it's exported. I'm going to double click on the zip file, and I'm going to open that up just so we can see what's inside. You can see here we've got two different files, or two; one directory and one file. The first file is just the XLIFF file; that's the translation file with all of our text in it. Then we also have this "\_frames" folder, which contains PNG images of all of our frames from the design, as a reference for the translator.

There's different software you can use to translate XLIFF files, but the simplest way would just be to open it up in a text editor or a code editor. I'm going to open it up in Visual Studio Code, just to show you what it looks like, and edit the translations in here. This is how we're going to localize and translate our Figma text to a different language using the XLIFF file in this case. You can see here, just to go through what's happening, each of these little `<file>` sections represent a different frame in your Figma design. You can see here each of them has an id; we've got 1:2, 1:6, 1:10, and these correlate directly with these frame ids here; they're in order of the frames, so you can basically match those up if you needed to see, for example, "1:14", you can go into your frames reference, go to 1:14, and that's visually representing all of the content inside of that frame.

Inside of each frame, or `<file>`, as it's called in an XLIFF file, you've got a translation unit for every bit of text; for example, in this particular use case we only have two bits of text per banner; we can see here we've got "Lotus Yoga Pants" and "Shop now", and we've got the same text here. In each translation unit there's two tags; there's a `<source>` tag and a `<target>` tag; the source tag has already been populated by the text from Figma that's automatically been populated. What you need to do in your translation from Figma is copy this text, or get your translator to translate that text into this `<target>` field, and again you can do this using different software, but for today I'm just going to use Visual Studio Code along with Google Translate. I'm just going to translate that from English to Dutch, so I'm going to jump back into my code and I'm just going to really quickly select all of those, and pop that into the `<target>` field, and then I'm also just going to translate the second bit of text we've got here; that's "Shop now"; I'm going to copy that, I'm going to highlight all of my "Shop now" text and just pop that into the translation `<target>` and hit save.

I've just saved that, I've translated all of the Figma frames, all of the Figma text inside of each frame to Dutch, and now I'm going to actually re-import that back into Figma. We can do that really quickly by jumping back into our Figma file and closing off this little pop-up clicking on the "Localize Figma Text" option again, and just clicking on the "Export/Import XLIFF" button, and this time instead of exporting the translation, we're going to import a translation. Underneath the text heading "Import translated text from XLIFF to Figma", I'm just going to click on my folder, jump down to the file I just saved, and I'm going to drag and drop that from finder on my desktop into this little box here, the drag and drop box. That's just loaded the XLIFF translation file into Figma, and Figma has read the file, and it's picked up on what translations are in there. You can see here, it's defaulted to the translated language of "Dutch", but we've also got access to our "Australian English" source translation there, too. If I want to translate this instantly, all I need to do is just confirm that all of the text layers are in there; it has picked up on 22 different text layers, and now I've got this button that I can click. I'm just going to click on the "Update Figma text layers translation" button; I'm going to click on that, and that has gone ahead and imported all of the text.

You can see here in our Figma design that all of those text layers have been updated with the translation, and it looks like it's translated all the Figma text layers you can see here. Obviously the text length wasn't quite right in this one, so I've just had to adjust that, but the rest are looking good; and if you've got the text set to auto height or auto width, that should translate a lot better; if you've got fixed width or fixed height Figma text layers, you're probably going to run into some issues with sizing, because different languages will be different lengths; but in this case it's not looking too bad.

We've just gone ahead and translated the text in this entire Figma design with one click, but the other thing I can do is just translate that straight back into English. I can click on the drop down again, and instead of loading in the "Dutch" text, I can load in the "English" text, and then I can click on the "Update Figma text layers to English translation" button and click on that, and you can see here it's just updated those 22 text layers back into English. It's it's really quick, it's very very efficient.

You can do this with as many files as you want, you could save out multiple translation files or localization XLIFF files from Figma; I could export another one another brand new one to "Danish" for example, I can click on that and just re-export it from Figma, and that will re-export all the text I can translate. I can save that into my desktop, and then I would go ahead and translate that Figma text into "Danish" and then I could again re-import that into the Figma file here using this little and drop area.

That's the the basic tutorial for how you can actually go ahead and localize and translate your text layers in Figma really easily using the CopyDoc Figma plugin, with this standardized XLIFF localization format or translation format. There's just a few caveats; as with any text layers in Figma, if you're using text layers that have a font that isn't installed on the user's machine, those text layers won't be able to be updated using the Figma plugin. For example, if this "Shop now" button or any of these text layers were in a font that wasn't installed, just like when you've got that font missing normally when you go to edit the text layer, you'll you'll get that little exclamation mark with a warning saying that the font needs to be installed or substituted, and you won't be able to edit it. Figma plugins also can't edit that font magically either, so the font does need to be installed. If you are importing translated text back into Figma and you're wondering why some of the layers aren't updating, there's a very good chance that the the text layer has a font that isn't installed on that machine; you can either send it to somebody who has the font installed and get them to run the Figma plugin, or you can get the font and install it and then re-run the Figma plugin yourself, and that will also finish the translation for you. That's just a really small gotcha that you might come across if you're using the plugin to translate your Figma text layers.

Aas I said, this is a standardized translation format, so you don't have to use something like a Visual Studio Code, or a code editor, or a text editor, in fact this is probably one of the slowest methods that you could do; but this is the method that I was just using just to show you actually what's inside of the XLIFF translation file, and just breaking down how it actually all works.

That's a rough tutorial of how you can go ahead and translate text in Figma, or localize your text in Figma in one click, essentially, once you've got the the text from Figma translated. If you want to localize or translate your website Figma designs, translate your application Figma designs, just localize or translate a banner set in Figma, or something really simple like this, and you have a team of translators, or you just want to translate it yourself like I was doing using Google Translate and then re-importing that into Figma, this is probably the most efficient way that you can go about it. You don't need a any web application, you don't need to integrate it with any other software, it's really as simple as importing and exporting XLIFF files via the Figma plugin. For those of you who prefer a simpler approach, rather than syncing up things and having API keys to deal with, this is an alternative method that might fit your workflow a bit better for localizing Figma text, or translating Figma text.

I hope you have some success with it, if you've been looking to translate your FIgma designs or work with translation software and have that play nicely with your Figma designs; then give this a go, give the CopyDoc Figma plugin a go, and I hope you and your team have some success with it. That's all from me today, and I'll be back very soon with more Figma tutorials just like this one; stay tuned for those, and thanks again for watching.

---

---
type: article
title: Professionally designed free Figma templates
description: Introducing our professionally designed Figma templates, 100% free for personal and commercial use.
datePublished: 2021-04-02T00:00:00.000Z
dateModified: 2021-04-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/professionally-designed-free-figma-templates/
markdownUrl: https://www.hypermatic.com/articles/professionally-designed-free-figma-templates.md
---

# Professionally designed free Figma templates

Today, we're launching our <a href="/templates/">free Figma templates</a> to help kick-start your own projects without needing to design everything from scratch; they've been professionally designed to look amazing and automatically work well with our Figma plugins.

All of our professionally designed Figma templates are 100% free for personal and commercial use, so you can customise them to your hearts content for client work or your own projects.

To start with, we've created free Figma templates for you to use across three different categories: presentations, emails and banners:

### Free Figma Presentation Templates

The first category is our <a href="/templates/presentations">free Figma presentation templates</a>, which contains pre-designed slide decks that you can use for your own pitch decks or presentations.

These free Figma presentation templates are designed to work with our <a href="/pitchdeck">Pitchdeck Figma plugin</a>, allowing you to export your slide deck design from Figma to either a web-based presentable deck, a PDF file, or .pptx file that you can present in Microsoft PowerPoint, Apple Keynote or Google Slides.

### Free Figma Email Templates

The second category is our <a href="/templates/emails">free Figma email templates</a>, which contains pre-designed emails (eDMs) that you can use for your own email marketing sends.

These free Figma email templates are designed to work with our <a href="/emailify">Emailify Figma plugin</a>, allowing you to export your email design from Figma to a production ready HTML email that you can send using your preferred email service provider (ESP), or to the developer-friendly MJML format.

### Free Figma Banner Templates

The third category is our <a href="/templates/banners">free Figma banner templates</a>, which contains pre-designed banner sets that you can use for your own banner ad campaigns.

These free Figma templates are designed to work with our <a href="/bannerify">Bannerify Figma plugin</a>, allowing you to export your banners to production ready HTML for multiple ad platforms, or to a GIF, WebM or MP4 video file.

### Upcoming Free Figma Templates in 2021

We've launched with 16 free Figma templates across these 3 categories for now; however, we'll be expanding these categories in the future, as well as continuing to add more professionally designed templates to each of these categories over time.

As always, stay tuned for more!

---

---
type: article
title: No code Figma plugins
description: Spend more time focusing on your designs, and automate exporting code using these no code Figma plugins.
datePublished: 2021-03-17T00:00:00.000Z
dateModified: 2021-03-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/no-code-figma-plugins/
markdownUrl: https://www.hypermatic.com/articles/no-code-figma-plugins.md
---

# No code Figma plugins

No code tools have grown in popularity over the last few years. These tools are perfect for anyone who doesn't know how to code and doesn't really want to know how things work under the hood, and prefer to focus on the design, content and interactions themselves.

For Figma users, this no code concept is also carried over to the Figma plugins space, where common design tasks can be augmented with computer automation to take care of the code, and allow the design process to take priority.

Some of the best no code plugins for Figma help automate the most common, frustrating and manual development tasks; from emails to banners, and favicons to content. Here are a few no code Figma plugins that you can get started with today:

### Emailify for Figma

>Easily design and export responsive, production ready HTML emails (eDMs) using Figma.

One of the more painful experiences for developers is building HTML emails with  messy tables and code and that looks like it has travelled through time from 1997. 

The [Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder) Figma plugin lets you design and export responsive, production ready HTML emails automatically from Figma.

#### Dozens of modules with one click

[Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder) lets you quickly build out a design by instantly adding modules to your email with one click, then add your own styles and content using Figma.

#### Override responsive design styles for mobile

Easily add mobile overrides and HTML properties (links, alt text etc) to a selected layer to avoid manually adding CSS and HTML in code.

#### Automatically export responsive HTML emails from Figma

No coding required. Export your email designs from Figma to production ready, responsive HTML email code in seconds using [Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder), with one click.

#### Includes developer friendly MJML source code files

If your developers easily want to make their own updates to the exported code, the [Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder) plugin also exports MJML files for total code customisation.

### Bannerify for Figma

>Animate and export production ready banners from Figma to HTML, GIFs and Videos, in seconds.

One of the most dreaded tasks for any developer is taking a Figma file containing dozens of banner designs and having to painstakingly build HTML banners from them. If you hate manually creating banners and want to feel like Keanu Reeves in The Matrix; this Figma plugin is for you.

The [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) Figma plugin automatically exports animated banners from Figma to production ready HTML, GIFs or MP4/WebM video files from Figma designs with one click. The real-time preview in the Figma plugin allows you to instantly 

#### Easily add animations to Figma layers

[Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) comes with a bunch of animation presets for the most common enter/exit keyframe transitions that you can apply to the layers in your banner designs. Everything from fades, slides, rotations, transforms and more advanced animations are included to use without any manual keyframe creation required.

#### Export Figma designs to production ready HTML

Once you've animated all of your banners, you can easily export them to HTML with one click. [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) supports exporting to HTML/CSS, GSAP, HTML Canvas, DoubleClick, Google Ads and many other ad servers. All of the clicktags and scripts are automatically included, so you don't need to write any code at all.

#### Export Figma designs to production ready GIF or MP4/WebM video

If you're going to be using your banners on a social platform or somewhere else that doesn't require HTML banners, you can also export your animated banners from Figma to GIF or MP4/WebM video with one click using the [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) Figma plugin.

#### Automatic preview pages with all of your exported banners

If you want to review all of your exported banners at once, [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) automatically includes a preview HTML page that you can open or share with your clients/stakeholders. You can also optionally add your own HTML/CSS to inject your own branding or colour scheme, directly from the plugin.

### Favvy for Figma

>Export production ready favicons (with code) for your website or PWA from Figma in seconds.

Usually forgotten about until the last minute before going live, creating favicons has always been a really weird and annoying process for developers.

The [Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) Figma plugin automatically exports production ready favicons from Figma for your website or PWA (progressive web app) in seconds, with one click.

#### Preview your favicons in Figma

Favvy works by using any square "frame" layer that you select in Figma and turning it into a production ready favicon package. You can easily preview what the favicon will look like in multiple sizes by clicking on the layer in Figma, and seeing the preview instantly update in the [Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) Figma plugin.

#### Automatically generate production ready favicons

[Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) gives you all of the files that you need to deploy your favicon to a production website, including all of the `.png` and `.ico` image files, plus a `.browserconfig` and `site.webmanifest` for progressive web apps (PWA).

#### Exports HTML snippets for the head tag

[Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) also generates all of the HTML code for your `<head>` tag, which is automatically pre-populated to link to all of the other files in your favicon package.

### CopyDoc for Figma

>Update Figma text via CSV/JSON, download Figma comments, and export Microsoft Word docs.

The [CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) Figma plugin allows you to import and export text content from your Figma designs. If you're a developer who needs to extract text content or comments to JSON files; this Figma plugin is for you.

#### Export your Figma text layers to JSON

As a developer, manually extracting text content from a Figma design can be pretty painful.

[CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) allows you to export every text layer in your frames to a JSON file, which gives you a complete overview of your content, and allows you to write scripts that can make use of the JSON data for your websites or other applications.

#### Re-import Figma text updates from JSON

You can also re-import the JSON file back into Figma if needed. This means you can run a script or manually update the text in your JSON file, and re-import and update those text layers back into your Figma design using the [CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) plugin.

CopyDoc will find any text updates by comparing your JSON file and the text layers in the Figma design, then show you all of the differences for review and approval before any text updates are made. Once you've selected the updates you want to import, you can update the selected text layers in Figma with a single click.

#### Export Figma comments to JSON

If you're collaborating with a design team, and comments are being left inside the Figma file, sometimes it can be difficult to keep track of all the feedback being left on each frame.

[CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) has a feature that lets you to quickly export every comment from your Figma file into a JSON with one click; this lets you easily use that JSON data containing all the comments for your own applications or scripts.

---

---
type: tutorial
title: How to design and export Emails from Figma to HTML using Emailify
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-02-02T00:00:00.000Z
dateModified: 2021-02-02T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-design-and-export-emails-from-figma-to-html-using-emailify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-design-and-export-emails-from-figma-to-html-using-emailify.md
---

# How to design and export Emails from Figma to HTML using Emailify

#### Video Transcript

Today I'm going to be showing you how to create and export HTML emails directly from Figma, using a Figma plugin called Emailify.

This tutorial is going to be split up into three different parts: the first part is just going to be installing the Figma plugin, the second part will be designing our email and the third part will be exporting the email from Figma to HTML. If you want to skip through anything at any point, please feel free to do so; and with that we'll get started.

The first thing we need to do is just install the Emailify Figma plugin. If you haven't already done that, you can go to the Figma Community and search for the term "Emailify", and you'll see a result called "Emailify HTML Email builder" pop up, and all you want to do is just click on the "Install" button on the right hand side until it says "Installed", and then you can switch back into your Figma file.

I'm just starting with a completely blank Figma file in this case, and because I've just installed the Figma plugin, I'm going to run it by right clicking anywhere, going down to "Plugins", and clicking on "Emailify HTML Email Builder", and that's just going to run the Figma plugin that we just installed a moment ago. You can see here because I've run the Figma plugin for the very first time in my page, it's prompting me to add an Emailify container; an Emailify container will allow me to start adding some modules to it. All you need to do is give it a name; in this case I'm just going to call it "Marketing Email" and I'm going to click on the "Add New Email Container" button.

Okay, so it's just added a brand new blank Emailify email frame to our Figma file, and you can see here now that I've actually added that frame, we've got all of these modules available to us in the Emailify plugin; you've got categories up the top that you can click through, so for example we've just gone from "Header" to "Images" to "Content", "CTAs" (or "calls to action") and "Footer". These are all the different categories you can browse through; there's many many different content modules and these are all available to you to add to your design with one click.

Just to give you a demo of how this works, we can go to any module in the list that we like, and just give it a click and that will instantly add it to our Emailify frame in Figma. We can add as many of these as we want, in this case I might just add a few different types just so we can get a good mix of components going, and you can see here it's just instantly adding those components with one click. I'm just going to go through and add a few more, I'll add these cards, I'll add some content, we can add maybe a testimonial, we might want to add some stats, we can do that and maybe just a footer as well.

That's roughly what it looks like to design an email; you can you can spin one up really, really quickly using these modules, and these are totally customizable. All it's doing is adding, you can see on the left here, it's adding real Figma layers to your Figma canvas and you can open those up and explore them, but they work just like any other component that you designed yourself. Because they're all using Figma auto-layout, you can actually re-arrange these just by dragging and dropping the components or the modules up and down on the page; you can just do that as much as you want, and rearrange those. You can also do that within components, so if you wanted to rearrange the text, you can just drag those up and down and that will automatically rearrange the elements inside of a module.

The other cool thing you can do is change the content, so we've obviously got this dummy content that's coming straight from the modules in the Figma plugin, but we can change this to whatever we want. I might change that to "Premium Sushi" as a heading, and I can customize that in the Figma styles over here on the right hand side. If I want to reduce some of that character spacing I can do that, I can make the font size bigger or smaller, just as you would normally in Figma. I can change the button, so if I wanted to change this button to more of a "stroke" button, I might knock out the fill, and I'll change the stroke and just add that onto there. Then I'll just also change the text color, so I'm just going to change that to white; you can get a sense of how easily you can start customizing these components. You might also want to change the background; for in this case you've got a call to action hero, and it's actually got a background image, so we can actually change that background image just by opening up the image fill Figma layer and either choosing an image by clicking on that image, or I can just drag and drop one from my desktop, and that will replace it over here.

It's really easy to change the content and the imagery in the backgrounds, but you can also change the layouts or order layout properties. In this case we've got some padding and we've got some item spacing in our hero component here. If I wanted to change that, I can just drag this little slider up and down and that will change the spacing between the elements inside of this module; I can change that as much as I want to get it looking exactly the way that I like. I might just change that to "8" and I can also change the padding; if I wanted to change the padding, I can just open up the padding block, and I might change that to "32" just to add a little bit of padding on there, and that's what that looks like.

You can go ahead and do that to all of your elements, you can change the logo you can change the text, and the links up here, you can change the avatar and the quote. We can drag a new avatar in if we want to do that, and that changes it there; we can change the role of the person, so we can say just "Critic", and this is all easily changeable. Inside of components, we can we can swap these around, too. We might want to change the column order, so I'm just going to grab the column and you can see there you can just switch it around like that. That's a rough idea of how it looks to create re-ordered customized components; you can basically just go go nuts and change all of the content and the styles, you can add backgrounds, you can add different background colors and things like that; so, you get a bit of a sense of what that looks like.

The next step we can do to customize our HTML emails from Figma even further is we can actually start adding responsive overrides. The way we can do that is just by clicking on the little "Settings" icon in the top left corner of the Figma plugin; this icon that I'm clicking on now, and when you open that you can see here that whatever selected layer we've got in our Figma canvas, it's going to give us some settings that we can customize inside of the Figma plugin itself.

For this example, you can see here I've got the "Call To Action Hero" that we were just working on already selected, and over here it's got some mobile hero overrides for us. If we wanted to, we can actually tell the Emailify Figma plugin what overrides we want specifically on mobile, and that could be item spacing; so, if we wanted the item spacing to be different on mobile than it is on desktop after we export it to responsive HTML, which we're looking at now, we can just check that little toggle and put in a brand new value over here. I could put in "12" for example, I can also customize the padding; by default it automatically adds some responsive padding, but I could change that, so I could make the top and bottom padding even higher.

I can also click into the module itself and start editing the responsive properties for things like text. In this case, I'm just clicking on the title that we just changed a minute ago, and it's got some mobile text overrides here too; it's automatically overriding the font size and the line height to "32" and "37". I can obviously customize that, and I can change that to be higher; I can change that to be "40". I can even change the letter spacing, so if I think that the negative three letter spacing on desktop is actually too big, I can change that to be slightly less intense; I could make that negative one on mobile, and you can see here we've also got the option to add padding; we could change the padding specifically on mobile, and that would be applied only on mobile. We can also change the alignment of the text, so if we wanted it to not be centered on mobile, we could click on "Override Alignment" and just click on the option here to change it, and we could align it "Left" or "Right" or just leave it as "Center"; in this case I'll just leave it as "Center".

The other neat thing we can do is actually just hide elements entirely. Let's say, for some reason, I actually didn't want this description to show up on mobile, I just click on the text layer and right down the bottom you'll see a check called "Hide On Mobile", and if you were to click on that, that would actually remove this text from showing up specifically on mobile; that's something you can apply to any element, if you click on any of these layers, you'll see that option show up right there. I'll do one example of the alignment just so you can see what that looks like, too.

The other neat thing we can do for rows in particular; you can see here it's got in brackets what layer type it is, so in this case we've got a "Row", this "Image Text Split" row, and a neat thing we can do in rows is we can actually reverse the column display order. I'm just going to copy this module, so I'm going to make three of these and I'm going to make it so these have a couple of different images just so we can tell the difference. I'll just drag drag these images in here, and you'll be able to see in a second that we can actually change the order of this on desktop. If we wanted to have this column sitting on the left, but on the middle one we actually want the image to go to the right on desktop, we can do that by clicking on the row, and then clicking on this check box that says "Reverse column display order (on desktop)"; I'm just going to click on that, and it's worth noting that isn't going to change it visually in your Figma design, this is only going to get applied in the responsive HTML code that we'll export shortly. Again, I'll just quickly update this image as well just so you can see the difference when we do export it. That's all good to go; you can see here we've got the bottom and the top both don't have that checked, but the middle one we've just checked.

That's all looking really good; I'm fairly happy with the email at the moment and I think it's about time we added a couple of links. If I wanted to add a link to a button or a link element, you can do it the exact same way; you just drill down into it in your layers, and you can see down here if I expand the layers, we've got this navigation module in our header, and we've got a link layer here. The link layer is sitting inside of the navigation, and you can see here it's got a placeholder for us which is just telling us to insert a URL link and so I'm just going to insert my own. I'm going to do just a link to a fake sushi restaurant, and I've just added that in there; that means that whenever someone clicks on this link up the top, that's actually going to take us to this URL that we've just specified here.

It works the exact same way for buttons; if you are using a button element inside one of your inside one of your modules, you just click on the button and same thing; you've got a clickable link URL, you just put in the URL and that will automatically take you to wherever you put put the link in. I can just do a "book now" link and that will become a clickable link.

We can also do the same thing for images; if you wanted to link an image, you can easily do that just by again clicking down to the image layer and adding your clickable URL there; I'm just going to click that, and I might add a link to a menu. The other cool thing for images is you can add alt text. Alt text is what shows up in your email client when the image hasn't quite loaded yet, so you can add a description of the image just in case it doesn't load for some reason. In this case, you can just add a photo of some sushi, and that's what that looks like.

The other neat thing we can do for images is we can actually override the width and height. Let's say for example you didn't want this image to actually be full width when it goes down to mobile, but for some reason you wanted it to be a very specific set of dimensions; you might want to do 150 by 100 or something like that. You could set that there and that will automatically override the width when it comes down to mobile. I might just leave that there and you'll be able to see what that looks like and if we actually uncheck the fluid with option, we can override the alignment of the image, too. If I click on the override alignment, and I change that to be let's say on the right that's just going to override the alignment of the image over to the right once it gets down to mobile width, but for the other ones we're just going to leave them as 100% fluid width, and what that means is it's going to actually stretch out the image width to 100 of the screen width and automatically figure out its height; that's usually what you would want to do.

The other option that you can do for the columns is you can actually make them not stack if you don't want them to stack. By default, you would pretty much want to always stack your columns on mobile, so for example having the text over here or the column over here sit underneath the image there might be some cases where you actually don't want to do that. In the case of the header for example; in our header, you can see if we click on this the option to stack the columns in this section is actually disabled, and what that means is it's not going to try and put the view in the browser link underneath the logo, it's actually going to keep those in the same row and just shrink the width of those, so they're always left and right of each other; that's what that looks like there.

The other thing we can do, if we really wanted to, is render content as an image. If you want to render a certain block as an image instead of HTML, you can do that just by clicking on this little toggle here, and that will automatically make sure that this row here that we've just selected gets exported as an image block a 100% width image block, and that will just get scaled down on mobile. The reason you might want to do that is if you've got a whole bunch of sort of weird fonts, or weird things going on in the image that aren't really going to translate well to responsive HTML, and you just want to bake all of that into an image, you can do that.

The alternative way of doing that is if you go to your images tab, and you just add a regular full width image to your email; we'll just add that at the bottom here. The other thing you can do is literally just add content into that layer, so if we expand out our image layer here, it's just a frame, and what we can do is just start adding content to that image. If we wanted to add a caption; if we added "Sushi Chef" as a caption or an overlay to the image, I'll just make that a little bit bigger make that white and bold, let's say you wanted to place this somewhere in the the corner or something like that, something that just wouldn't really lend itself to responsive HTML, you might want to just place that somewhere like this and in the corner. Maybe you want to add some shapes or something for some reason, so we might add some shapes to our lockup; I'll just make that a different color, and let's just give him a few stars, I think he's worth about four stars. Let's go do a four-star review of the sushi chef; you can see here on the left inside of my image frame I've got my four star layers and a text layer, and what that means is all of that content is going to get baked into the image, it won't be exported as responsive HTML and that's just a really nice way of being able to create custom lockups inside of your images without having to rely on annoying HTML layouts that just really aren't going to work for this scenario. You'll be able to see what that looks like in a second.

Now that we've designed our email in Figma, it's about time that we exported it from Figma to HTML, because that's really what we want to be doing. The very last thing I'll show you just before we move on is the "Favorites" category; I haven't shown you that one yet, but the favorites category is a special category that automatically keeps track of all of the modules you've already used, and it's just a really easy way to going back to finding modules that you've used often, or modules that you really like, and you don't have to filter through categories every time just to get back at to. If we wanted this full image one to be used a bunch of different times, I wouldn't have to keep going back to images, I could just check in on my favorites and just reuse that; it works the exact same way, you just click on one of the modules in the favorites category and it will automatically add it to your Figma canvas as well. I'll just add that one onto here and I might keep this one as a responsive HTML block, just because we made the other one as an image; you can see the difference. If you want to tidy this category up at any time, you can just remove some of those by clicking on the little "Trash" icon, and that will remove them from the favorites, but it will keep them in the original category.

Okay, I'm fairly happy with my email we've just designed, and I think we're going to export it from Figma to HTML now; the way we can do that is just by clicking on the "Export" button in the top right hand side of the Figma plugin, and this is just going to bring up the "Export to Code" option. By default, it will automatically select the "HTML" option but you've also got a second option which is "HTML and MJML"; I'm going to select that one, and I'll show you what that does shortly, but in summary MJML is the source code for the compiled, production ready HTML; if you have a team of developers or if you're a developer yourself and you really want to customize the email even further once it gets exported from Figma into code, the MJML option is going to make that really easy for you.

The second thing we've got is just to tell it which emails we want to actually export, and the reason that's there is because you can have multiple emails in a page. If we created a bunch of different emails on our page; for example, if I created a new one just by clicking on the little "Plus" icon and did a new email container, that's just going to add a new email container over here, which I can also add modules to. I can just start building out a whole new email over here, and you can see here that we've got a new option in our list; to change those I can just click on the little select box, and that will change which email I'm editing. The other way you can do that is just by clicking on the email itself, and you can see up here it's changing which email is actually active.

I'm just going to add a couple more modules, just to give you a sense of some of the different ones that you can actually add, and we're actually going to export both of these emails from Figma to HTML at the same time, just to show you what that looks like. I'll add a couple more, just to make it a bit more interesting, and I think that's probably enough for now. I might just add a little footer as well, maybe some navigation, okay; I'm pretty happy with that, so I'm just going to leave that as it is.

Now I'm going to show you how to export both of these emails from Figma to HTML; once again, we're just going to open up our "Export To Code" panel, so we'll click on the "Export" button, and we're going to put in a subject line; we can do "New marketing announcements", not that this would be your subject, but just as a bit of a test; and this one's just an "experimental email". You can also add preheader text, too. If you wanted to add some preheader text, I'm just going to grab this text for now and drop that in there. By default, it will automatically check both of the emails, or any emails that you've added to make sure both of those emails get exported from Figma to HTML. If you did only want to export one, you can check the one that you want and leave the other one unchecked, or if you've got many emails you can obviously uncheck and check which ones you want, but in this case I'm going to export both.

Now we've selected those, the very last step is just to click on the "Export To Code" button; I'm going to click on that now, and what this is doing right now is it's taking all of our Figma design that we've just done for both of the emails, and it's automatically generating responsive, production-ready HTML emails from Figma with all of the image assets. That's all finished now, and it's just telling us that our HTML code is ready to download and it's going to give us a zip file; if we click on the
"Download your zip file" button, I've just clicked on that now, and I'm just going to save this to my desktop. I'll click on "Save", and you can see up here it's just saved it to my desktop.

I'm going to double click on the zip icon, and that's just unzipped it to a folder for me. I'll open up the folder, and you can see here we've got a few different files. We've got two folders; the two folders are named after our email frames from Figma, and if I open those up you can see inside of those two folders we've got an image folder for each; we've got images that I can have a look at, and you can see over here that these are all the Figma image assets from our actual HTML email all saved, and those are all in retina resolution. Then we've got an index.html file and an index.mjml file; I'll go through those in a second, but the first thing I want to show you is the index.html file that gets exported in the root of the directory; if I click on that and open it up in my browser, you can see here that this is just loading up a preview page. This preview page gets automatically generated by the Emailify Figma plugin; you don't have to do any work to set this up. What it does is it just gives you a really nice quick overview of the HTML emails that it's exported from Figma; we'll go through this now.

You can see here this is real HTML; you've got all of the text, you've got your buttons, you can see the link for the button in the bottom corner. You can see on the right hand side we've got a small preview as well; the small preview is just a 320 pixel width preview, just to give you a sense of what this is going to look like on a mobile device.

I'll take you through some of these things now, because I just want to remind you of what we did in our design to make some of these things happen. The first thing is we've got our responsive text; if you'll recall we actually added a different type of letter spacing on mobile and a different font size; you can see here that that's taken effect and it's slightly smaller, and the letter spacing is not as big. We also decided to left align this bit of text just because we wanted to; that's kicked in, we didn't touch anything on there.

For our image, remember when we changed it; it was going to be the smaller version, we've changed that there and you can see over here the section alignment that we did has kicked in, too. You've got the image over to the right, but the text over to the left on desktop, but on mobile it's kept the same ordering; you've got the image on the top and the text on the bottom still; that's that's exactly what we wanted. We also created this image; this single image that was all baked in to that image. The one underneath it we also decided to create an image just from that layer; that doesn't have any text in it compared to the one up here, which is completely editable. You can see over here the difference you've got; the stacked HTML version versus the one we converted to an image down here, and that's just kept it as a full width image.

That's a bit of a rough look at what that looks like; we've also got our second email down here. I didn't really do too much extra work to this onem so it looks pretty standard to what you would expect, and that's what that's currently looking like in there.

Now that we've had a look at our email preview, we can open up our folders and just have a look at what's actually in here as well. If I just grab my code editor and I drag in one of these files, I'm just going to drag in the MJML file, and you can see here that this is the source code for the email that we just exported; this is really good for a developer if they want to make some changes to the code, this is the best place to do it because the compiled HTML code, or the production ready HTML code looks something more like this, and you can see that it's a lot more complicated to work with, just because it's been rendered out to a whole bunch of tables and table cells and and things like that; it's not very pleasant to work with and that's why we have included the MJML source file which makes it much easier to work with, which you can then recompile back into HTML, something that looks like this, when you're ready and happy with it.

That's a rough idea of what it looks like to design emails and export them from Figma to HTML; as you can see it's relatively painless compared to the regular process of building and designing HTML emails, and being able to use Figma as the design tool is really nice compared to using an online tool that's slightly more restrictive. Being able to use the design tool that you already know and love to design the actual content and template, then automatically export that from Figma to HTML, I think that's that's the the main benefit over doing it manually, or using a different tool that doesn't involve Figma.

I hope you've enjoyed this Figma tutorial and if you've been looking for a way to design and export HTML emails from Figma with a lot less pain, then I hope this tutorial has been helpful for you. Best of luck if you decide to give it a go, and I hope it helps you and your team with designing and exporting HTML emails from Figma. Until next time, thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: article
title: Building HTML emails 1000x faster with Figma
description: Spending over a year building our new HTML email Figma plugin, based on a decade of experience with eDMs.
datePublished: 2021-01-31T00:00:00.000Z
dateModified: 2021-01-31T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/building-html-emails-1000x-faster-with-figma/
markdownUrl: https://www.hypermatic.com/articles/building-html-emails-1000x-faster-with-figma.md
---

# Building HTML emails 1000x faster with Figma

Ever since Dr. Dre dropped "2001" in 1999, designing and building HTML emails (or "eDMs") has been a reliably painful recurring task for both designers and developers.

Spending days writing HTML that's straight outta 1995 and fighting with Outlook bugs, all while the original "approved" design simultaneously going through countless rounds of reviews and visual/content changes that then need to be manually updated again in the HTML — it's enough to make any designer or developer slowly lose their mind.

That's why today, after over a year under development and throwing out our first two approaches to solving the problem, we're excited to release our brand new Figma plugin — [Emailify](/emailify) — which helps you design and automatically export responsive, production-ready HTML emails (in seconds) without leaving Figma.

To accompany the release, I'd like to go through some observations, thoughts and insights into some (personal) history of "the email problem" and how we went about building a Figma plugin to help solve it for both designers and developers.

### Designers use Figma, not MailChimp

Working in digital agencies for a decade, and being involved in (literally) hundreds of email marketing projects, and without exception, designers used their usual software of choice (Photoshop, Sketch, Figma etc) to design the email; which means they were not using the "email designer" tools provided by email service providers like MailChimp, Campaign Monitor etc. 

This observation is not a slant against those great companies or the tool they provide, but an underlying truth about how designers actually design marketing  emails for their brand (or their client's brand) in reality.

Despite the reality of designers using Figma to design their emails, and developers working outside Figma to build them, little progress has been made to connect popular design tools and production-ready HTML.

If designers are using the design tools that they use for designing everything else (websites, banners, apps, presentations etc) to design emails, then it's worth thinking about how these designs are then make the leap from screen design tool (pixels) to code (HTML). 

Considering how regularly these kinds of projects are being done by design and development teams, it's surprising that these two halves of designing and building HTML emails couldn't be more disconnected.

### Removing the designer/developer "hand-off" feedback loop

One of the key problems to solve with the HTML email problem is the completely disconnected nature of designing and building emails, where the pain is felt more intensely with increasing rounds of changes after the development has already been given the go ahead to start. 

Trying to keep the development side in sync with design (even while working in an awesome collaborative tool like Figma) is extremely difficult, as it's not only hard enough to keep track of what changes have actually happened, but actioning those changes can totally change how you originally structured the original code. 

Co-ordination problems aside, once a developer knows what parts of the design need to be updated in code, it still involves them manually re-exporting images, extracting HEX codes for colour updates, copying and formatting text and content; this is all the easy stuff, that doesn't involve changing the actual layout itself. 

Once you understand that each round of changes not only takes a bunch of time doing very manually copy/pasting type work, it also increases the chance of re-introding brand new visual bugs (in email clients) that may have just been resolved after the last round of updates.

Emailify solves this problem by adhering to one of our core principles:

>The distance between design and production should be zero.

The shortest distance between design and production is not "bridging the gap"; the gap has already been "bridged" to some extent, but it still largely involves all of the overhead and headaches described above. By allowing _anybody_ (designers, developers, copywriters, project managers etc) to export an Emailify email design in Figma to HTML with one click, all of the concerns above disappear.

### Attempting to build an HTML email Figma plugin (3 different times...)

It was almost 18 months between starting to work on the idea of building a Figma plugin to help with HTML emails and actually shipping the first release. It's not that the actual build took over a year, but the direction and core approach of the plugin changed a bunch over the course of that time; resulting in 2 totally scrapped plugins, and eventually leading to the 3rd attempt that was published as the first public version.  

#### Attempt #1: Computer Driven

Back in September 2019, the very first version (of what would eventually become Emailify) was a somewhat naive attempt at creating a totally magical plugin where you could literally click a single "Export HTML email from Figma design" button, and the plugin would somehow take care of the rest. Believing this was very possible, I spent a couple of months working on a plugin that would do this. The plugin kind of worked, and included on early (and obvious in retrospect) learnings like correctly ordering the elements in the design by their position instead of relying purely on layer order, but working out basic things like this was only the tip of the iceberg.

As soon as basic layout is working fairly well, you quickly run into questions of "intent" on the part of the designer. When you're working in code for a Figma plugin, knowing about a series of rectangles places in different positions on a page doesn't really provide you with much information about what the designer intends those rectangles to be. For example, is a rectangle with some text on top of it intended to be the visual representation of a row, a column, a hero banner, a lockup that should be "merged" into a single image or something entirely different?

This gets way more complicated when it comes to responsive design. Typically (partly because there's no really good alternative) to do this, designers tend to design a "desktop" and "mobile" version of an email by creating two totally different frames which share the same (hopefully) content, just resized to fit the narrower frame size. From the perspective of a plugin, now looking at 2 totally seperate frames with somewhat similar content, which may or may not be in a similar order or contain similar layer names, it becomes even harder to reconcile these two things.

Do you reference one as the source of truth, and try to match up layers to parse the "responsive intent" of a designer? Do you force the designer to name layers exactly the same thing to make it more reliable? These are all really bad options, and the benefits of what the plugin was meant to offer start breaking down really quickly.

This attempt was essentially scrapped, as attempt #2 would soon take its place.

#### Attempt #2: Human Driven

With attempt #1 hitting a dead end, a few months later led to attempt #2. Based on some of the learnings from the first attempt, I went the other extreme and decided to try and approach where the plugin would actually come with "intent" out of the box.

Not wanting to leave anything in the hands of the computer, this approach was very much a human-driven plugin. Designers would have to select from a handful of super primitive layout and content objects (rows, columns, text, image, button) and then put all of these pieces together in their own fashion to try creating something that then looked like an email.

While it probably would have "worked", it felt way too restrictive, abstract, unnatural, and maybe most importantly _not_ fun or very enjoyable to use. Once again, this attempt was scrapped; until attempt #3 would see Emailify actually see the light of day...

#### Attempt #3: Human-Computer Hybrid

With these first 2 approaches, I had tried 2 different extremes: total computer automation and total human creation. Neither of these approaches make sense. 

For attempt #3, I went back to our own vision of what we're trying to do:

> Our premium Figma plugins **complement** your human creativity with computer automation to 1000x your workflows

We want to empower designers and developers to be creative in ways that are best done by humans (design), and then complement that with automation with the parts that make more sense to be handled by a computer (generating code). This hybrid model drives most of our other Figma plugins, and I believe it's the key to furthering real productivity gains for designers and developers.

Learning from the first 2 attempts, it seemed like the best way to divide the tasks between humans and computers would be to give the computer the parts that could be totally automated: creating the basic structure, layout and content modules on the Figma canvas, and exporting a design to HTML. The human side would involve things that humans are better than computers at: making design decisions and crafting an email that meets their creative brief. 

These two skill-sets are almost perfectly complementary: it allows a designer to maximise their creative time without having to manually draw and configure  basic modules before they can actually bring them to life with content, and it allows anybody to export that design to HTML with one-click; completely saving a developer's time (who really does _not_ want to be writing HTML tables from 1995 and wrestling with Outlook bugs) and allowing them to also have their own time given back to them for working on more interesting pursuits.

Of course, this is just one approach to solving the problem, but after exploring these different ideas, the human-computer hybrid approach is the one we believe to be the best for this type of work.

### What's next from here?

Now that the third approach to building the plugin has been shipped, it serves as a great foundation to be able to continue adding more value and efficiency benefits to designers and developers using it to design and build HTML emails with Figma.

The way the plugin works and how it was built means that we can continue adding more common modules to help speed up the initial layout design process, and reduce the amount of guessing work for constructing common email components. 

At a layer above the modules, this means that fully Emailify compatible templates can be designed and shared at companies internally, but also shared with the Figma Community at large. This would be a massive timer saver in both cases, and it's easy to imagine how these templates would play nicely with other Figma plugins that could provide a way to easily roll out multiple variations of a single email template within seconds - then exported from Figma to HTML within seconds after that.

It's still super early, but we're really excited to continue improving Emailify and the ecosystem around it, with the mission of evaporating the familiar pains of designing and building HTML emails into a distant memory.

---

---
type: tutorial
title: How to add custom animations to your Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2021-01-12T00:00:00.000Z
dateModified: 2021-01-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-custom-animations-to-your-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-custom-animations-to-your-figma-presentations-using-pitchdeck.md
---

# How to add custom animations to your Figma presentations using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you how to add custom animations to your presentations in Figma using the Pitchdeck Figma plugin.

The first thing we need to do is quickly install the Figma plugin by going up to the top left, going to the Figma Community, searching for the term "Pitchdeck", and you'll see a result called "Pitchdeck Presentation Studio" pop-up. All you need to do is click on the "Install" button on the right hand side, and once it says "Installed", and looks like this one, you can jump back into your project and we can get started.

To run the Figma plugin, you just right click anywhere, go down to "Plugins", and then click on "Pitchdeck Presentation Studio", and that's just going to open up the Figma plugin that we just installed a minute ago. In this tutorial, I'm not going to be running through all of the features of this Figma plugin, we do have some other tutorials which go into depth on how to use it; today I'm just going to be showing you a brand new feature called "Custom Animations" that lets you add custom animations to your slide elements Previously, you've been able to add lots of different preset animations; different fade-ins different scale-ins, all that sort of stuff, all preset; but today we're going to be creating our own animations that you can then add as custom animations.

To get started, we're just going to click on the "Custom Animations" button in the header of the Figma plugin. You can see here this has opened up a new interface that allows us to create custom keyframe animations using this little Figma plugin interface. The first thing we need to see is the animation timeline; the animation timeline works the same way as a regular CSS animation timeline; you've got zero percent and a hundred percent of the starting and end points of the timeline, and you can switch between those just by clicking on the timeline elements.

You can also add new keyframe to your timeline; if you want to add a keyframe at half, at 50, you put in "50" and click on "Insert New Keyframe", and that will insert a brand new keyframe into the middle.

To edit the properties of any keyframe, you just select the keyframe that you want to edit and then you go down here to the edit keyframe properties section and start changing some values. You can see here if I start changing the values the autoplay is actually going to update over here and give me a live preview. I'll just delete the "50" keyframe for the time being, and you can delete keyframes just by clicking on the keyframe and then clicking "Delete Keyframe" down here, and that will remove it from the animation.

We can see here that on the zero percent we're currently starting the animation at 170 pixels below; we've got a Y value of 170 pixels, and I'm just going to change the opacity down to zero; so what that's going to do is it's going to fade in from below, and it's just going to come up to the 100 keyframe which is where the Y position is at just a zero and the opacity is at 100. We're basically going from zero percent with an opacity of zero and a Y position of 170 pixels, and then we're ending on opacity at 100 and the Y position at 0, which is just the exact spot where it is in your Figma canvas; that's just a really simple fade in up animation.

The other thing we can do before we save this is just change the easing; if you do want to change the easing to something like "linear", to not have any easing, you can do that or you can use the other options like "ease in", "ease out", or "ease in and out"; these are just different options you have for adjusting the easing, and you can see what that looks like in real time at different speeds just by adjusting the live preview speed slider down here. This is a seven second version of the animation, or we can see what it looks like really fast and do half a second; that's just a really quick preview of what it's going to look like at that speed in your animation layers.

At the moment, I'm just going to save this as it is because I'm happy with the fade in up animation. I can also add stuff like scale and rotation, so if you wanted to add scale you can do that, you can make it scale in. You can add some rotation; it also rotates in as well; you've got these five properties to play with. I'm just going to name this "Fade Rotate In", and that's just underneath the "New Custom Animation Name"; I've called it "Fade Rotate In", and now I'm just going to add that new animation to my options by going down here in the bottom right and clicking "Add New Animation"; you can see here it's just telling us that we've added the fade rotate in to our animations.

Now if we go to our layers and open up the animation select box again, we can see down here underneath custom animations that we have our fade rotating option that we just added. To select that, we just click on "Fade Rotate In", and you can see there it's adding the animation that we've just created in our custom animations panel. As I've shown you before with the speed, we can actually slow this right down; if we want to do a super slow in animation in, I can actually add a delay on that so it comes in after a second, and that's what it looks like.

We can also update this animation if we decide that actually we want to change it a little bit. We can go back into "Custom Animations", open it back up, and to load an animation that you've already saved. You can just go up here to the "Saved Animations" drop down, click on that, and then go down to the animation you want to update; click on "Fade Rotate In", and you can see here it's just loaded up our saved properties once again. In this case, I might want to add a new keyframe in the middle of the animation where I add it at 50 percent. I've just clicked it at "50", and what I can actually do is I can copy/paste properties from different keyframes as well. If I want the properties from my "100" keyframe to be copied over to "50", I just click on the 100 keyframe then click on "Copy Properties", that's now copied it to the clipboard. If I click back on to "50", and then click on "Paste Properties", you can see here it's actually pasted those properties from 100 onto the 50.

What that means is I can now modify this to be different to 100 and have it as a middle frame in my animation. For example, I could do something a bit weird, like make it scale up really big and then come back in; this is adding a middle step at the 50 mark of the timeline, so I can make that I can make that go up to 2x or 2.5x, really whatever I want to do; in this case, I'm just going to add that scale keyframe and I'm going to click "Update Saved Animation". It has updated the animation for us, and because we've already got this applied, all we need to do to preview it is just click on the "Play" button up here. We can see here the updated scale keyframe has been added in and that's been added into our animation that we can see; I've just sped that up a bit, so you can see it again, and that's how you can go about updating the animations.

You can also fork the animation if you want to create a new animation but also keep the original one. You can go back into "Custom Animations", load up your animation again, and in this case maybe you want to add some more crazy rotation for some reason; you could then re-save that up here in the "New Custom Animation Name" box, so we're going to do "Fade Rotate In Big"; I'm going to enter that name in there, and instead of clicking "Update Saved Animation", I'm actually going to click on "Add New Animation" again. That's added "Fade Rotate In Big" to our animations, and now you can see here I've still got my "Fade Rotate In", but I've also now got another option "Fade Rotate In Big", which has our variant that we just added a minute ago. That's a way that you can really easily fork or change animations based off an existing animation, and also update existing animations, too.

If you do want to delete an animation, you can do that as well. Just click back into "Custom Animations", select the animation that we just added, and down here we're going to click on "Delete Saved Animation", and deleting that saved animation removes it and automatically sets the animation back to nothing. This is now not animated, because the animation has been deleted; but of course, we can go back in and re-add another animation and that will add it back onto the element.

That's that's a rough overview of what it looks like to create custom animations in the Figma plugin for your presentation. You can create as many animations as you like, you can update them, save them, delete them; really do anything you want, the creativity is really up to you. You can add as many keyframes as you like, make the animation as complex or as basic as you want; I created another one earlier which is just a basic scale up and right one; I'll give you a preview of that, and that's just a really subtle animation to add in that little photo. If we wanted to see how that looks, I can open up my animations panel, click on "Scale Up Right", and you can see here it's a really simple animation. All I'm doing is I'm starting it off at 200 pixels down, the Y position is 200 pixels, starting at with an opacity zero, adding a little bit of negative rotation on there, I'm starting the scale at about half, and then I'm scaling it up to 1.3x, reducing the amount of the rotation to zero so it just rotates back to its original rotation, scaling up the opacity, and then I'm making it the X value go a bit to the left; and finally it just goes back to its initial position at the 100 mark. You end up where it actually is in the Figma canvas; that's what it looks like, that's how you can go about adding completely custom animation timelines to your Figma presentations.

It's worth noting that these animations will only be visible when you use the "Pitchdeck Web URL" export setting. I've got another tutorial on all the export settings, but just briefly, if you click on "Export Presentation", all of the animations that you've just added will be usable in the web Pitchdeck Web Presentation, but they won't get carried over to any of the other export options; for example, a PDF deck won't have any animations, neither will any PowerPoint or Keynote or Google Slides files that you export from the Figma plugin. The animations are just for the presentation that you run in the Pitchdeck Web App, but the other ones won't have any animations at all; it's just worth keeping that in mind if you are using the animation feature in the Figma plugin.

I think that's a good overview of creating the custom animations in Figma; really, it's up to you to go ahead and unleash your own creativity and build out your animation timelines as you see fit for your own decks. I hope you have fun with it, and until next time, thank you again for watching; we'll be back soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export WebM videos from your Figma layers using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-12-30T00:00:00.000Z
dateModified: 2020-12-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-web-m-videos-from-your-figma-layers-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-web-m-videos-from-your-figma-layers-using-tiny-image.md
---

# How to export WebM videos from your Figma layers using TinyImage

#### Video Transcript

Today, I'm going to be showing you how to create and export animated WebM videos from Figma using the TinyImage Figma plugin.

The first thing you'll need to do is install the Figma plugin by going to the Figma Community, searching for the word "TinyImage", and under the "Plugins" tab you'll see a result called "TinyImage Compressor" come up. If you haven't already installed it, there'll be an "Install" button on the right hand side, just click on that and you'll be ready to go.

I'm just going to switch back into my project and run the Figma plugin we just installed by right-clicking anywhere on the page, going to "Plugins", and then going down to "TinyImage Compressor" and clicking on that; that's just going to open up the Figma plugin that we just installed.

The first thing we need to do is click on this "Create a GIF" button; this is going to open up a little dialog down here, and it's going to prompt us to select some layers that we'd like to use as the frames for our GIF. Obviously we're clicking the GIF button, but we are going to be exporting a WebM video file, so just keep that in mind.

Okay, all we need to do is select the layers that we want to use for our animation, and I'm just going to select all of mine. You can see down here that it's changing how many layers it's picking up on; you can pick less or morem it's really up to you, but you can use any Figma layer in your designs for this process. I'm just going to use those six and then click on "Use Selected Layers" and you can see here it's loaded up all of those frames we've just selected from Figma into the TinyImage Figma plugin.

It's giving us a little playback preview directly in the plugin window. You can see here I've got all of my frames, all six, and there's a few things I can do here. I can re-arrange them either by manually dragging the frames around, so I can click and drag those frames to drop them into different spots; I can do that manually or I can actually go up to this little drop down here and I can click on that to get some pre-defined sorting options. What I can do is I can actually sort those visually, so if I want to sort them by left to right visually, that's going to correlate to what we see over here on the Figma canvas. I can also sort them from bottom to top, so if I want to do bottom right to the top left I can do that, or I can just sort them by their layer name; so if I've named them in a certain way in my Figma layers panel and I want to arrange them in that way, I can just use the sorting option there to arrange them as well. I'm just going to use the visual option for now.

Now we've got our layers visually ordered the way that we want, we can we can play back the frames a little bit differently if we want to. If you want to actually go through them manually, I've just clicked on the "Pause" button, and now I can actually go through them one by one and just make sure that they're in the order that I wanted, and click this button here just to go right back to the start, and that's just going to do that. I can also click that button while it's playing, so I can click on the "Replay" button, and that's just going to keep taking me back to the start every time; that's the way you can control the preview there.

The other thing that we have access to is changing the delay between the frames. At the moment, it's half a second between each frame, I can decrease that to make it faster, so I can change that to be 200 milliseconds or 150 milliseconds, and you can see it's going much faster now. I can also slow that down, if I wanted to bring that all the way down to a one second or two seconds, that's something that I can do as well; it really just depends on what you want to be doing in your GIF. The other option you do have as well is changing it manually per frame, so if I want this second frame to go by really quickly and this fourth frame to go really quickly, I can do that, I can make it even quicker if I want; and now that's basically going to change those two specific frames to be played back a bit quicker. You can see there, it's just jumping past the second and fourth frame much faster than every other frame, which is inheriting the one second delay that we've got over here. These are in milliseconds as well, so that's 200 milliseconds, and that's 1000 milliseconds, which equals to one second.

Then we can see here we've got a couple of other options; we can we can replay the animation infinitely, so that's just going to infinitely loop it and or we can actually uncheck that and say exactly how many times we want the animation to loop; we can do loop three times, or loop twice in this case, and I'm just going to set it to "Infinite".

Down here we've got the size of the exported image, or exported video; this just takes on the first frame that you've included in your frame selection, so if we have a look over here you can see that it's 1711 pixels by 1142 pixels, and that's just getting automatically pre-filled there; a really quick way to scale that if you want to export the frames at a different size is you can either manually change it there, or I like to use the scale option. You can actually just say I want that at half the scale, or twice the scale, and that's just going to show you what size is actually going to get exported at. In this case, I might just do it at half the scale.

The last options down here that we have are the background options. If we wanted to change the background color, this is only useful if we're using an option where the images are different sizes, and we're using the "Contain" option, and that's going to make sure that any different sized or ratio sized images are going to get "contained"; which means that you'll end up with some different solid colors on either the left and the right, or the top and the bottom, depending on how it's going to fit that frame size. If you do want to change that, you can change it down here, so if you wanted to do a a white background you could put in the hex code for white, but in this case we don't have any of that that background color, so this is not going to make any difference in our case.

Same thing goes for transparent background; if you're using frames that have transparency or PNG icons, or PNG icons, or something like that, you probably want to enable the "Transparent Background" option, but if you're just using photos or using images that take up the entire frame, you can leave that transparent background option completely turned off.

As I mentioned before, this option here will determine whether the images cover the frame, so whatever size frame you're sitting here if you check the "Cover" option, the images in your frames will always be made to cover or fill that frame, and you won't have any blank spots in the in the sides or the tops on the bottom. If you decide to go with "Contain", contain is going to make sure that it always contains all of the image content even if that means squishing it down a little bit and then adding in those solid colors that I mentioned a minute ago; those are the options that you have there for fitting the images.

Finally, we've just got the image quality; you can change this up or down, you can tend to leave it up pretty high unless you really need to squash the image size down, or the compression down, but typically it's fine to leave it around 80 or 90. Finally, we have dithering; by default there's no dithering included, but if you know what these options do, then feel free to have a play around with them, otherwise it's pretty safe just to leave it with "No Dithering".

As I mentioned, we're going to be exporting to WebM today; this is a brand new feature in the TinyImage Figma plugin, and instead of exporting to GIF, which we could also do, I'm going to show you what it looks like to export a WebM video. I'm going to click on "Export WebM" now, and this is just generating a WebM video with all of those frames. You can see here it's finished and prompting me to save the file, so I'm just going to save that to my desktop; I'm going to click on "Save".

Probably the easiest way to open it is just open up in your web browser; I'm just going to open up this file in the browser now, and you can see here that we've got our WebM video playing back nicely. This is just in the browser, and WebM is a is a web video format, so you can include this on your web pages, you can send it around, and it's typically a really good way to share video via the web. That's what it looks like, you can see there, it's skipping over those frames much quicker the two frames that we added the higher speeds on; they're getting skipped over a bit quicker, but the rest are getting played back at the speed that we expected.

Cool, so that's what it looks like to export the WebM file directly from Figma, and you can play around with this yourself. There's many use cases for it, of course, but it all depends on what you want to be doing with it, and what kind of content you want to include in your WebM video export from Figma. I hope that's been helpful for you if you've been wondering how to export WebM files from Figma, you can do it using the TinyImage Figma plugin. If you give it a go, I hope you have good results; thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to add custom animations to your Figma banner designs using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-12-28T00:00:00.000Z
dateModified: 2020-12-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-custom-animations-to-your-figma-banner-designs-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-custom-animations-to-your-figma-banner-designs-using-bannerify.md
---

# How to add custom animations to your Figma banner designs using Bannerify

#### Video Transcript

Today, I'm going to be showing you how to add custom keyframe animations to your HTML and GIF/MP4 banners.

The first thing we need to do is just go to the Figma Community and install the Bannerify Figma plugin. If you haven't already done so, we can go to the top left corner, go to the search bar under Figma Community and just search for "Bannerify". You'll see a result called "Bannerify Banner Studio"
pop-up, and if you haven't already installed it, you'll see an "Install" button on the right-hand side; you can go ahead and click on that, and once it's installed we can jump back into our project.

Now we're back in our project, we can right click anywhere, go down to "Plugins" and just click on "Bannerify Banner Studio", and that's going to open up the Figma plugin that we just installed. What it's doing is it's actually loading in all of our frames as banners; each of these frames is treated as a banner in Bannerify, and each child layer in those frames is treated as an element inside of the banner. If you've seen tutorials on this before, or even if you're just new to the Figma plugin, you see pretty quickly that we've got a whole bunch of different animation options here. These presets come shipped with Bannerify; we've got a bunch of entrances and exits you can change these to do different animations really quickly they're just really common presets, so you can use those as much as you want.

However, we've just shipped a brand new feature which allows you to create your own completely custom CSS based timeline animations. The way you can do that is just by clicking on this button called "Animations" in the header, and clicking on that will give you this brand new interface which allows you to create custom animations, and I'll just take you through that now.

The first thing you can see is we've got a place to give our animation a name; this is a required field, but you can leave that to last if you don't know what kind of animation you're actually going to create yet. We've got our saved animations over here, so if you haven't saved any animations at the moment this will be blank but I've already saved one, so that's just sitting under there as a saved animation. I can actually load that in if I want to click on that, and that will automatically load in an animation that I've created before. However, I don't want to use that one just now, so I'm just going to actually get out of that and jump back in and that's just going to start a brand new animation timeline for me.

Speaking of the animation timeline, we've got that just sitting right here. By default, it will always create two frames, the first frame at 0 percent and the last frame of the animation at 100 percent, and you can click through those animations just by clicking on either of those. You can also add new keyframes as well; you can see this little "Insert New Kyframe" button over here, and that will let you insert a keyframe at any point in the timeline; we'll have a look at that in a second.

Then the most interesting part is the keyframe properties settings; these five properties are what you can actually change to get the keyframe animations looking like they're moving, so we've got our X-axis; it's left to right, I can move that from left to right, or right to left. We've got our Y-axis; that'll go up and down. We've got our opacity; I can fade the element. Then rotation; if I want to rotate the element. Then finally, scale; if I want to scale that element up or down, I can do that by dragging on these.

You can see here that it's updating the live preview in real time, so whatever animation properties you change on any keyframe that will automatically get reflected over in the live preview over here. You can see exactly what the animation is going to look like.

Finally we've got our little animation easing options here; you can go through and change it, so if you need to be a linear animation you can select that option, that will remove any easing, or you can add easing in and out, or just in or out; and that's just going to change the way that the animation comes in and out of the of the frame. I'm just going to leave it on ease for now.

What we can do is we can create a simple animation just by changing these properties. What I can do is just put these at the defaults for now and then we'll go through and change it based on what we actually want the animation to do. In my case I'm just going to have it roll in from the right hand side, so what I want to do is I want to start the animation from the right. For example, I might do 100 pixels from the center, and then I want the animation to also fade in when it rolls in. I'm just going to change the opacity down to zero for the first frame, and the rotation I'm just going to change it now to be let's say 200 degrees. It's going to roll in 200 degrees from the right hand side, and I also want it to scale in; I'm just going to remove the scale or make that about half; that's going to scale in from half size and rotate in from the right and the 100 keyframe is still set on all the defaults; what that means is at a hundred percent it's going to end up exactly where it where it's positioned in your Figma design. It's going to be exactly from the left and the top, it's going to be a 100 opacity, no rotation and just the regular size.

That's actually what I do want, but I might also want to add more keyframes in between; maybe I want to do something once it gets to the middle of the timeline, so what I can do in that case is just change the the keyframe. I can change it to let's say "60" and click on "Insert New Keyframe", and what that does is it copies whatever frame I was already selected, it'll copy all those properties into a brand new keyframe and it will adjust it to wherever you've set it to at the percentage; in this case it's at 60 percent. What that means is it's actually not even starting the animation really until it gets to 60 percent of the way in. We don't actually want that to be the case, we want to actually change this so it's a little bit different; what I'm going to do is I'm going to copy the properties from 100 percent; copy that, and that will copy all of these properties, and now I can paste that onto my new timeline keyframe that I've just added. I'm going to click "Paste", and you can see there it has actually changed it; now 60 has inherited the properties from 100.

What I can do now is I can actually change that to be a different animation once it gets to 60 percent. I can have it go down; I can animate it in, so it ends up 100 and something pixels down. It's actually bouncing in from the right, but also bouncing down and then it's bouncing up once it gets to 100 percent. I can even change that a little bit; I could make it go scale up once it gets to 100 as well; if I wanted to scale that to 1.5x, I could do that, and now you can see we've just created this little timeline where it's going from the right hand side with rotation, half scale, opacity zero, and it's fading all the way in to the default but we've just set the Y position to be down; it's coming in from the right, and then on the final frame that's where all the defaults come back and the scale gets put up to 1.5x.

That's a nice little timeline, it's a interesting keyframe animation that you wouldn't be able to get from the presets. I'm just going to change that to a custom animation that we can use in our banners now. All we need to do is actually name this animation, so I'm going to call it "Bounce In Right", so that's the name that's going to come up in our options in a moment. All I'm going to do is click on "Add New Animation", so it's telling us that we've added "Bounce In Right" to our animations. What I can do now is I can actually use that by just clicking on any of the animation select boxes, and you'll see under a brand new heading called "Custom Animations", you can see that where we've just added our "Bounce In Right" animation; I'm going to click on that now and you can see it's loaded that in.

You can play that replay that here just by clicking on the "play" button, and you can see it's bouncing in from the right and bouncing up; I can actually change the speed of that just by moving this timeline over here and now it's actually slowed it right down. I can add a delay, so it only comes in after one second, and that comes in like that. I can shorten that, or make it coming straight away; but let's say that I'm not happy with that scale because it's just too big; I can actually still change that by just going back into the "Animations" panel. As I showed you before, we can go to the "Saved Animations" drop down, so I'm just going to click on that, and if we select the animation we've just added; the "Bounce In Right" animation, that's just going to immediately load that animation back up once again.

Okay, we've decided that we don't like that ending scale, so I'm just going to remove that and get it back to 1x, just at the default size, and we can see here that it's now not scaling up at the end. We're just going to get it looking exactly like it does in the Figma design, and we can actually preview the speed in here as well. If you want to slow that animation down just to see exactly what it's doing or preview it at the speed that you think you're going to use it at, you can use this little speed slider down here where you can change the speed from less than a second to make it really quick, or all the way up to 15 seconds to make it really slow. I'm just going to leave it at two seconds for now, and now that we've just changed the ending option we have two different ways to go about this now.

The first way we can go about it is by updating the saved animation, so clicking "Update Saved Animation" will override the animation that we've just added and that will update any layers that you've already applied the animation to in your timeline over in the the other window we're just looking at; that will override it the other option you do have is to create a new animation based on that edit; what we can do is we could do "Bounce Right", let's say v2; we can call it "v2" and we can click on "Add New Animation" and now it's added a v2 to our animation. You can see here this one is still the "Bounce Right" animation; we've still got that applied, but now we've got this brand new one which is basically forked from the "Bounce In Right" one, so if I click on that, you can see there it's ending on the the new scale that we set up.

We can do that, but I'll just show you what it looks like to override that as well. If we re-click on the "Animations" button, load up the saved new animation, the "Bounce Right v2"; okay, we've got that one there and what we can do is we can change this, so maybe we want the rotation to be like that; maybe it rotates up as well; I've just changed that on the 60 frame and instead of creating a new animation. I'm just going to click on "Update Saved animation", so now that's updated our "Bounce Right" animation, and because we've already got that applied, I don't need to reset it. If I just click on "play", you can see now it's loading in that brand new rotation part of the animation, so I didn't need to update it. That's that's pretty neat, because if you've already gone through and applied that animation to all of your banners or different places in the banners it will automatically update all of those for you.

There's a couple more little things that we can do if we re-click on "Animations", and load up the one that we just created. The other thing that you might have noticed is we can delete keyframes. Let's say we actually don't want this 60 percent keyframe anymore, we can go ahead and delete that just by clicking on the "Delete Keyframe" button here; you can see that's just removed the 60 percent keyframe entirely and left us with just the 0 and 100 again. In this case, it's really not adding that middle step of bouncing all the way down when it comes in, it's just going completely from the right straight over to the center or the original position; that's the the way you can go about deleting keyframes. It's worth noting that you can't delete the 100 or the 0 percent keyframes; those are those are blocked out purely because an animation just has to have at least a starting point and an ending point, and then it's up to you if you want to add any in between points or not.

We can do the same thing for animations. If we want to delete an animation; first of all I'm just going to update this saved animation, so that one's now updated, and we can see here that's just coming in from the right now. Let's say I want to delete one of my other animations, so I can delete an animation just by selecting it clicking on "Delete Saved Animation" down here, and now that's deleted the "Bounce In Right" animation. If I click on this, you can see here under "Custom animations", "Bounce In Right" is now deleted. If we were to delete the "Bounce In Right v2" when it's already selected, I can show you what that looks like deleting; that will remove it from the list, but also revert the animation to be "No Animation". That will just remove any animation on that layer, so that's worth being mindful of in case you've set that animation and now you need to add a new one, you can just go down and just change it to a preset or a different custom animation.

That's basically what it looks like to create custom animations for your banners in Figma using the Bannerify Figma plugin. Of course, these animations will get included with any export that you do, so if you're exporting this to a GIF or an MP4 video using the "Export to GIF/Video" feature here, those animations will get included; or you can export those to HTML, so you can you can export that to an HTML banner set, or a set of banners for different advertising platforms that you can select down here. Either way, you get all of those custom animations that you create using the Bannerify animation tool that we've just been looking at; those will automatically get included, so you don't need to code them, you don't need to use any video software or anything like that, all of those custom animations will automatically get included in your renders.

That's basically it; I hope it's been helpful if you've been wondering how to break out of the animation presets in Bannerify and create your own, now you can you can go crazy and go about creating whatever interesting keyframe animations that you want and use them in your own banners. I hope it's a useful feature for you, and best of luck if you do try it out; and if you have any feedback or questions, please let us know. Thanks again for watching.

---

---
type: tutorial
title: How to spell check Figma presentation slides using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-12-28T00:00:00.000Z
dateModified: 2020-12-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-spell-check-figma-presentation-slides-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-spell-check-figma-presentation-slides-using-pitchdeck.md
---

# How to spell check Figma presentation slides using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to spell check your slides in a Figma presentation using the Pitchdeck Figma plugin.

The first thing we need to do, if you haven't already done so, is just go to the Figma Community by going to the top left, and searching for the word "Pitchdeck"; and under the "Plugins" tab you'll see a result called "Pitchdeck Presentation Studio" pop-up. If you haven't already installed it, you'll see an "Install" button on the right hand side; you can go ahead and click that, and then we can jump back into our project.

Now that we're back, I'm just going to launch the Figma plugin by right-clicking anywhere, going down to "Plugins" and clicking on the "Pitchdeck Presentation Studio" item. That's going to load up the Figma plugin that we just installed, and you can see here we've got all of our slides. I'm not going to cover all of this detail, as I've covered a lot of this stuff in other YouTube videos; if you want to have a look at how to animate things or actually export these presentations, I do have a number of other videos on the YouTube channel for that, but today we're just going to be looking at spell checking our slides.

This is a new feature in the Figma plugin, and we can access it by clicking on this little "check" icon in the top header here; if I click on that, you'll see a little panel slide out and this is going to let us spell check our Figma slides for spelling errors. By default, it selects "English (United States)" as the language, but if we click on that select box, you can see we've got a whole bunch of different language options here that we can choose from. You might have your designs in a completely different language, and if that's the case, you can just click on any of those and that would select that language. Today, I'm just going to be using the "English (Australia)" version, so I'm going to click on that, and then once you've selected your language all you need to do is click on the "Find Spelling Mistakes" button and that's just going to spell check our Figma design.

It's just checked it and found six different spelling errors in our Figma slides. We can take a look at those now, so we've got "design" which is spelled incorrectly with two e's, we've got "good" with too many o's, "innovative" is spelled incorrectly, "principles" is spelt incorrectly, we've got this spelling mistake here and this one here. We can go through these pretty quickly and individually, so the first thing we can do is just we can see here that the spelling error is showing up here. I'm just going to correct that by clicking on the correct option, so in this case I'm going to click on "design", and you can see there it's just instantly corrected the word "design" to the correct spelling.

I can also undo that if I made a mistake; if I picked the wrong one I can click on the "Undo" button that just undoes the spelling error correction; then you can pick a brand new one if you want, and you can undo that; it's really quick just to change it and then undo it. This one underneath is a little bit different, because it has three different places in the design where the spelling is different; what I can do is I can actually inspect where all those are located. I can open this up and if I click on the little "search" icon, that's just going to instantly jump to the place where the spelling errors occurred. You can see here we've got one here, we've got another one down here, and we've got another one down here in slide 10.

The cool thing is I can correct all of these at the same time by just doing the same thing as before and clicking on the correct spelling. I'm just going to click on "good" and you can see here it's changed it, but it's actually changed all three. If we go back to the other two, you can see those have been changed as well and just like before we can undo those, and that will undo all of them. Then we can change it back to the correct one if we want as well, and then it's really easy just go through all of them just click on the right spelling. I'll just change this one, I'll just change this one and "useful".

Then again for this one, this is a little bit ambiguous, we don't know what the context is. I'm just going to open up the spelling flag again and click on this little "search" icon and jump to that. In the context of this sentence, it's actually meant to be "thorough", so "good design is thorough down to the last detail". The first suggestion is "throughout", but that's actually wrong, so you want to always check the context and make sure that it's the right spelling. I'm just going to change that to "thorough" and click on that, and that will correct the spelling in Figma.

That's really all there is to it; it's a brand new feature in the Pitchdeck presentation Figma plugin which lets you design and animate and export presentations from Figma to a web-based presentation tool, or you can export it to PowerPoint files, Keynote files Google Slides, or just a PDF file. This is a brand new feature that lets you just double check all of your spelling before you actually export the frames from Figma to a slide deck, and I hope you find it useful in your own workflow. Until next time, we'll see you then.

---

---
type: article
title: From Zero to One
description: Looking back on the first year of Figmatic (and towards building the future), as we celebrate our 1st Birthday
datePublished: 2020-12-21T00:00:00.000Z
dateModified: 2020-12-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/from-zero-to-one/
markdownUrl: https://www.hypermatic.com/articles/from-zero-to-one.md
---

# From Zero to One

One year ago today, Figmatic launched with little more than an article announcing that [it's time to get back to the future](/articles/it-s-time-to-get-back-to-the-future/). The general theme of the article is that our workflows in general, and design/development in particular, are broken. Not only that, they have remained largely stagnant for the better part of two decades.

Since we launched 12 months ago (with zero Figma plugins, zero users and zero revenue), we have built and released 9 premium Figma plugins; which as of posting this article, have 61,000+ active installs.

### Starting a startup in a pandemic

Within a couple of months of starting Figmatic, like many places in the world, we entered a strict lockdown here in Melbourne, and were unable to leave our homes much for the next 7 months. I mentioned [at the time](/articles/building-a-startup-in-a-pandemic/) that I had tried to ask myself if there were any _benefits_ to starting a startup under those circumstances, and I came up with a few:

1. There would likely be less competition, as fewer people will be interested in starting companies at the beginning of a pandemic.
2. The shift to remote work would potentially lead to more adoption of Figma inside companies as a design tool.
3. Less tolerance for wasted time/resources inside companies, where hopefully more design automation would be welcomed.
4. Forcing function to focus solely on Figmatic while locked inside for 23 hours per day. 

I was also struck by a Tweet from Paul Graham, which I really resonated with:

>Any startup that gets started during the next few months is disproportionately likely to succeed. Success depends most of all on determination, and imagine how determined you have to be to start a startup in the middle of a global pandemic.

— Paul Graham, _Y Combinator_

I knew that if we could build a startup during a pandmic while remaining determined and focused on doing the right things, then we could not only manage to avoid death, but emerge stronger on the other side. 

### Hyperbolic Time Chamber (work every waking hour)

In the anime series, Dragonball Z, there's a structure you can enter called the "Hyperbolic Time Chamber", where one year inside the chamber is the equivalent to one day on the outside. 

From March onwards, this is how I personally visualised and thought about building Figmatic during the pandemic lockdown. I knew that it would be this weird period, where days often felt like weeks, and if that could be leveraged to actually 10x the amount of work that would normally get done in a typical office environment, then it could end up being a positive for us.

Many people will argue that it's not healthy or beneficial to be working crazy 80+ hour weeks, as it destroys any sense of "work/life balance" or is just plain ineffective, and they will say that perhaps a better approach is to work many fewer hours per week, and just focus on the things that actually matter instead.

However, to my way of thinking, the best approach would be to do _both_. If you can remain hyper focused, continually choosing the single most important thing to focus your attention on _and_ work like crazy at it, it seems like that has to be better than only doing one or the other.

Either way, this is how I personally spent almost all of my time during 2020. I worked ~12 hour days, every day, for the entire year; choosing the single most important thing to focus on each day and just working super intensely on it. I've found that this combination of focus and working hard has been a massive part of building/shipping/updating 9 Figma plugins in the first year of Figmatic.

### Figma Plugins we shipped in 2020

Our plugins are always designed and built to solve important problems that very few people seem to be working on. Here are the Figma plugins we built and published this year (in order of date published).

#### Favvy

Favvy automates creating production ready favicon packages for your website or progressive web app with one-click.

#### TinyImage

TinyImage automates image compression directly in Figma, allowing you to save up to 95% on your image sizes, as well as create custom PDFs, custom GIF animations and convert images to newer formats unsupported natively in Figma (like WebP and AVIF).

#### Bannerify

Bannerify automates exporting dozens of banners from Figma to production ready HTML, GIFs or videos in seconds; completely eliminating the "handoff" process and reducing the distance from design to development to zero.

#### Crypto

Crypto allows you to add password protection to your Figma designs and prototypes, creating a unique URL that you can share with clients/stakeholders without them requiring a Figma account.

#### Pixelay

Pixelay syncs Figma designs and overlays them with your web development build, providing multiple ways to easily compare the design and build by using a real local development environment to easily spot the differences.

#### Pitchdeck

Pitchdeck helps you turn your Figma designs into a real, professional grade presentation, complete with animations, videos/GIFs, URL links and speaker notes. You can present the deck via the Pitchdeck web app, or export it to PDF or a PPTX file to use in PowerPoint, Keynote or Google Slides.

#### Convertify

Convertify automatically exports Figma files to Sketch and Adobe XD files with one click, converting your entire design layer-by-layer into real Sketch/XD files; saving days of manually recreating Figma designs in other design tools.

#### HyperCrop

HyperCrop brings batch cropping/resizing to Figma, allowing you to automatically crop/resize multiple images into multiple sizes; complete with smart cropping, dozens of common size presets for popular platforms and a high precision manually cropping tool.

#### CopyDoc

CopyDoc lets you import and export text content from your Figma designs to CSV, JSON and Microsoft Word. Copywriters and UX writers can easily make their edits externally, then seamlessly re-import the text updates into Figma; export frames to DOCX files for Microsoft Word; export all of the comments in a Figma file; spell check Figma designs (in dozens of languages).

### Building the future

While I'm super proud of what Figmatic has accomplished so far, there's still so much more to be done. 

Our accepted/existing workflows are still largely broken, but I know that they can be fixed by continuing to augment human creativity with software that can help automate the less creative parts, which computers are far better and faster at handling for us. 

I really believe that this hybrid approach is the key to bringing the distance between design and production closer to zero.

All of the Figma plugins that we've released so far tend to contain this approach to varying extents at their core — allow human creativity flourish, then use computer automation to take that work and export/convert/generate it into something that a human either simply couldn't do themselves, or would need to waste hours/days/weeks of time doing it manually.

### Adam Shrugged

As we leave 2020 behind and remain hyper focused on building our definite optimistic view of the future in 2021 (and beyond), I know that the problems we're interested in trying to solve are only going to become more challenging over time.

We have always been explicitly focused on choosing important problems to solve that very few other people are working on. If we do this correctly, then by definition, we must forge our own path and figure out things our own way. While this is exciting, there will inevitably be many more moments where the technical path ahead is covered in fog and it seems like there's no end in sight. This was certainly the case with our "Convertify" plugin, which as I wrote after it launched, felt like "a thousand mini mountains that you need to climb and then go back to basecamp and do it again". 

However, giving up was never an option, and we were able to figure out each problem we faced along the way; continuing showing up day after day, no matter what.

Knowing this, I'm reminded of a quote from Atlas Shrugged, which I think is a perfect one to always keep firmly in mind as we enter the second year of working on Figmatic and remain focused on our mission.

> “Do not let your fire go out, spark by irreplaceable spark in the hopeless swamps of the not-quite, the not-yet, and the not-at-all. Do not let the hero in your soul perish in lonely frustration for the life you deserved and have never been able to reach. The world you desire can be won. It exists... it is real... it is possible... it's yours.”

— Ayn Rand, _Atlas Shrugged_

We won't be saving anything for [the swim back](https://www.youtube.com/watch?v=GM-znjDGubE).

---

---
type: article
title: The UX Bubble
description: I believe that we are in the middle of a massive bubble in UX
datePublished: 2020-12-18T00:00:00.000Z
dateModified: 2020-12-18T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/the-ux-bubble/
markdownUrl: https://www.hypermatic.com/articles/the-ux-bubble.md
---

# The UX Bubble

First things first; I believe that we are in the middle of a massive bubble in UX. In this article, I'd like to try and explain my thinking on this, what I've observed, the problems around it and what I think happens next.

This is not a negative reflection on anyone currently working as a UX designer, or anyone who is interested in pursuing a career in UX design.

Last night, I had dinner with two of my UX designer friends whom I hadn't seen all year due to the COVID pandemic lockdown restrictions and stay-at-home directives. It came up pretty quickly in our conversation that all three of us had been independently thinking more about the "UX bubble" problem over the course of the year. This is something I first started observing and thinking about around 2015, but I would argue that it has only continued to increase since then, to the point where it has been extra hard to ignore over the last couple of years in particular.

### UX is talked about as if it's _Bitcoin_

"Is it too late to get into UX?"

At least every second person I speak to or read about who has recently become interested in pursuing "UX Design" is changing their career from a completely unrelated field to that of design, or "technology" more broadly. Previous careers for these pivots might include fields like: journalism, finance, marketing, hospitality, nursing etc.

The questions I see repeatedly:

> Just finished my Graphic Design studies, now I would like to switch/specialize my career path into UX

> I just finished architectural school and graduated with a bachelor's degree, however I want to move into UX/UI design instead.

This brings us to an important characteristic of bubbles: they require the wider public to get involved. And that's exactly what we're seeing in UX right now.

### The Paradoxes of UX

There are a number of paradoxes that sit at the heart of the UX bubble; these paradoxes are contradictory narratives that are always independently talked about as if they are somehow both true, but when viewed together, seem to cancel each other out.

#### The Bootcamp Paradox

**Narrative #1:** _The constellation of UX is so vast, complex and specialised that no one could ever hope to understand even a small fraction of everything it encompasses._

**Narrative #2:** _You can learn everything about UX in a 12 week bootcamp, then immediately join any company as a Mid-Senior UX Designer at a high base salary._

Inwardly, the message of bootcamps and UX courses tells us that "everything can be learned in 3 months", yet outwardly, the message is often "UX is so huge that no single person could ever fully understand everything".

#### The Demand Paradox

**Narrative #1:** _There is a seemingly infinite demand for UX Designers, therefore, transitioning into a UX role is a guaranteed one way ticket to the job of your dreams._

**Narrative #2:** _Companies have bottomless demand and not enough candidates to fill UX roles._

One narrative I've heard is that there's an unprecedented amount of demand for UX designers, therefore, we're seeing more people getting into UX design to help fill that demand. I don't think this is true.

While there are certainly a bunch of UX design roles at many companies, I do think that the demand is slightly skewed. After talking to dozens of UX designers, managers and recruiters over the last few years, the truth is that the demand for "good" UX designers is very high, specifically because they are so hard to find.

If you talk to anyone trying to hire a UX designer, you will hear some variation of the same anecdote:

"We've had so many applications from recent bootcamp graduates, all with the same skillsets, resumes, portfolios and mock projects. The applications we bring in for an interview all say the right things in the interview, but the moment we ask them to explain further, they aren't able to do so."

#### The Salary Paradox

**Narrative #1:** _UX is so easy that anyone can transition from a career with zero design experience and become a fully qualified UX designer in a matter of weeks._

**Narrative #2:** _UX designers possess an incredible skillset that commands $100,000+ salaries right out of bootcamp._

If UX is so easy that anyone can transition from a career with zero design experience and become a fully qualified UX designer in a matter of weeks, then at face value, it would seem that being a UX designer requires little to no specific knowledge, and almost anyone could become a UX designer with nothing more than a bootcamp certificate.

On the other hand, I've personally interviewed bootcamp graduates who were told by their teachers and classmates that asking for a $100,000+ salary right out of the gate was not only reasonable, but that's what they were entitled to, as someone who has this incredible skillset that companies have bottomless demand for, and not enough candidates to fill UX seats faster than they're popping up.

### Great Expectations of Bootcamp Graduates

Partly due to the bootcamp mantra of being "industry ready", many Junior UX Designers emerge from these short courses with unrealistic expectations.

I'd like to recount a personal example of this that really stuck with me to explain the vibe of what I mean; and while this is just one particular example, it is very similar to many other experiences I have had with recent bootcamp graduates, and very similar to other stories I have heard from other friends of mine who have interviewed UX and front-end developer graduates looking for their first role.

In 2019, I interviewed a front-end development bootcamp graduate, who had just transitioned from a career in marketing to development via a 12 week bootcamp course and was interested in joining the company I was working at as a full time junior front-end developer. They were also keen to work out a way to work "full time", but only do a 4 day work week (which is something we had historically been able to facilitate for other employees).

The interview went okay, until towards the end, when they asked how much money the role would be paying; I said that it was something to be discussed with my boss, but I asked if they had a number in mind. They quickly responded with "120", as my eyes popped out of my head with genuine confusion. I had to clarify by asking "wait, do you mean $120 per hour... or $120,000 per year?", to which they replied "per year".

I explained how $120,000 per year was not a realistic expectation for a junior developer role, to which they quickly replied "Oh... but that's because I'm after 4 days, right? What if I did do a full 5 day week?". Again, I was taken aback, and had to clarify that $120,000 is a senior developer salary, and they should expect that it will take a number of years of experience to get there.

They listened to what I had said, then told me that the reason they asked for $120,000 per year is that one of their friends from the bootcamp had just got a job somewhere else as a "React Developer" and was being paid that amount. I said that sounded really unusual, and it's not a realistic expectation to take to your future interviews for junior roles.

My final shock from the interview was that after we had gone over all of this, with my recommendation being to find a cool place that will mentor them as a junior developer and help them gain some real world experience so they could move closer to the "senior" role over time, their ultimate take away from this interview was "Okay, well, it sounds like I just need to apply for 'React Developer' roles then, in that case".

### The Market is Flooded with UX Designer Clones

Bootcamps are producing clones. In fact, I've heard that some bootcamp teachers are now advising students not to display the bootcamp on their CV/resume, precisely because hiring managers have become wary of the identical portfolios and skill sets.

With so many UX designers coming into the field with no prior experience in design at all, many companies and UX designers both seem puzzled when either side has seemingly unreasonable expectations. Companies are under the impression that a UX Designer would understand most fundamentals of design, and UX Designers are under the impression that they were not hired to have any such understanding. This has led many to hedge their bets by also learning UI design.

### The UX around UX Kind of Sucks

Why does everything related to UX make everything feel way more complicated than it should? For people who focus on user experience as a career, almost all of the UX related diagrams, graphs, videos and educational material looks like it was designed by the same people running Agile workshops.

One bias that most fields have is to overrate their own importance and progress, and I don't think UX is any exception to this. There are clear incentives to inflate the importance and complexity of UX.

### UX is Out of New Ideas

In the annual ["State of UX" in 2021](https://trends.uxdesign.cc/), instead of the usual "trends" related to design, we're gifted with 100 "lessons" on almost everything besides design for the year to come. The field is even encouraging us to [stop using certain words](https://www.selfdefined.app/) altogether; when did we give "UX" permission to become the ministry of language?

Back in 2016, Fast Company published an article called ["5 Design Jobs That Won't Exist In The Future"](https://www.fastcompany.com/3063318/5-design-jobs-that-wont-exist-in-the-future):

> User experience designers are among the most in-demand designers working today. So how could their jobs disappear? According to Teague designers Clint Rule, Eric Lawrence, Matt McElvogue, "UX design" has become too broad and muddled. "The design community has played fast and loose with the title 'UX designer,'" they write in an email. "From job posting to job posting and year to year, it jumps between disparate responsibilities, tools, and disciplines. Presently it seems to have settled on the title representing democratized design skills that produce friendly GUIs." In the future, they predict that UX design will divide into more specialized fields. "The expanding domain of user experience and its myriad disciplines will push the title 'UX designer' to a breaking point, unbundling its responsibilities to the appropriate specialists," they say.

The hyper-specialisation problem seems to have only gotten worse. UX has become progressively less and less about UX over time.

Even the most commonly recommended book for UX design was written in 1988, where abstractions are used to describe things related to modern software design. We're seeing a bombardment of UX articles with abstract titles like "What Star Wars can teach us about UX" which create an infinite series of fictional parallels that can be passed off as something new, distracting us from the fact that the real springs of knowledge and ideas have likely dried up long ago.

We may have reached [the point of diminishing returns](https://www.nngroup.com/articles/ux-gains-shrinking/).

### When the Bubble Pops

So what happens when this bubble inevitably pops?

I think we're already starting to see the early signs. Every hiring manager I talk to has the same story about sorting through dozens of nearly identical bootcamp portfolios. Companies that went on UX hiring sprees a few years ago are quietly wondering if they actually needed all those positions. The signal-to-noise ratio has gotten so bad that I know recruiters who now specifically filter out candidates based on certain bootcamp names.

Here's what I think the collapse looks like:

The first thing that will happen is companies will realise they don't actually need a dedicated UX team of 10 people who all do roughly the same thing. The role will either get absorbed back into product design, development, and product management, or it will hyper-specialise into specific disciplines like research, interaction design, or information architecture. I suspect the generic "UX Designer" title will go the way of "webmaster" - a relic of a time when we hadn't quite figured out how to divide up responsibilities yet.

The bootcamps will follow. When their graduates can't find jobs anymore, enrollment will tank. Some will quietly rebrand into something else, others will just shut down. The ones that survive will probably be forced to get honest about what they're actually selling: an introduction to design thinking, not a complete education that makes you "industry ready" in 12 weeks.

Salary expectations will come back down to earth pretty quickly. When you have thousands of people competing for the same junior roles, wages fall. That's just how it works. The bootcamp graduate who was told to expect $100,000+ out of the gate will find themselves competing for positions that pay what junior roles have always paid.

For a while, I think "UX Designer" on a resume might actually hurt you rather than help you. Hiring managers who have been burned one too many times by disappointing interviews will start filtering these candidates out. The people with genuine skills will probably rebrand themselves with more specific titles that actually signal what they're good at.

And those paradoxes I mentioned earlier? They'll resolve themselves in the least comfortable way possible. You can't simultaneously claim that UX is impossibly vast while also saying anyone can learn it in 12 weeks. You can't have bottomless demand while thousands of UX designers can't find work. You can't command high salaries for skills that supposedly take three months to acquire. Eventually, reality wins.

The actual practice of creating good user experiences will survive all of this, because it has to. But I think it'll be done by product designers, researchers, developers, and product managers who actually understand their specific craft. The people who genuinely care about users and have spent years developing real expertise will be fine. They'll just stop calling themselves "UX Designers."

The part that bothers me most is thinking about all the people who made career changes in good faith, who were told that UX was their ticket to a better life. They paid tens of thousands of dollars to bootcamps that promised them the world. They trusted that the narratives they were being sold were true. When this all comes crashing down, it's going to be really painful for a lot of well-meaning people who just wanted a better career.

But I've never seen a bubble that didn't eventually pop. The only real question is when.

---

---
type: article
title: Figma plugins for developers
description: Reduce the distance between design and development closer to zero with these Figma plugins.
datePublished: 2020-12-08T00:00:00.000Z
dateModified: 2020-12-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/figma-plugins-for-developers/
markdownUrl: https://www.hypermatic.com/articles/figma-plugins-for-developers.md
---

# Figma plugins for developers

Always the last in line on projects, developers are often given extra short amounts of time to get their work complete, due to those common crazy deadlines that don't leave much time or breathing room when it comes to implementation of a design.

Fortunately, Figma plugins have opened the door to more design automation, and can help reduce the distance between design and development much closer to zero. Here are some Figma plugins that help automate common tasks and help any developer ship production ready code and assets from Figma with a few clicks.

### Bannerify for Figma

>Animate and export production ready banners from Figma to HTML, GIFs and Videos, in seconds.

One of the most dreaded tasks for any developer is taking a Figma file containing dozens of banner designs and having to painstakingly build HTML banners from them. If you hate manually creating banners and want to feel like Keanu Reeves in The Matrix; this Figma plugin is for you.

The [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) Figma plugin automatically exports animated banners from Figma to production ready HTML, GIFs or MP4/WebM video files from Figma designs with one click. The real-time preview in the Figma plugin allows you to instantly 

#### Easily add animations to Figma layers

[Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) comes with a bunch of animation presets for the most common enter/exit keyframe transitions that you can apply to the layers in your banner designs. Everything from fades, slides, rotations, transforms and more advanced animations are included to use without any manual keyframe creation required.

#### Export Figma designs to production ready HTML

Once you've animated all of your banners, you can easily export them to HTML with one click. [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) supports exporting to HTML/CSS, GSAP, HTML Canvas, DoubleClick, Google Ads and many other ad servers. All of the clicktags and scripts are automatically included, so you don't need to write any code at all.

#### Export Figma designs to production ready GIF or MP4/WebM video

If you're going to be using your banners on a social platform or somewhere else that doesn't require HTML banners, you can also export your animated banners from Figma to GIF or MP4/WebM video with one click using the [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) Figma plugin.

#### Automatic preview pages with all of your exported banners

If you want to review all of your exported banners at once, [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) automatically includes a preview HTML page that you can open or share with your clients/stakeholders. You can also optionally add your own HTML/CSS to inject your own branding or colour scheme, directly from the plugin.

### Emailify for Figma

>Easily design and export responsive, production ready HTML emails (eDMs) using Figma.

One of the more painful experiences for developers is building HTML emails with  messy tables and code and that looks like it has travelled through time from 1997. 

The [Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder) Figma plugin lets you design and export responsive, production ready HTML emails automatically from Figma.

#### Dozens of modules with one click

[Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder) lets you quickly build out a design by instantly adding modules to your email with one click, then add your own styles and content using Figma.

#### Override responsive design styles for mobile

Easily add mobile overrides and HTML properties (links, alt text etc) to a selected layer to avoid manually adding CSS and HTML in code.

#### Automatically export responsive HTML emails from Figma

No coding required. Export your email designs from Figma to production ready, responsive HTML email code in seconds using [Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder), with one click.

#### Includes developer friendly MJML source code files

If your developers easily want to make their own updates to the exported code, the [Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder) plugin also exports MJML files for total code customisation.

### Favvy for Figma

>Export production ready favicons (with code) for your website or PWA from Figma in seconds.

Usually forgotten about until the last minute before going live, creating favicons has always been a really weird and annoying process for developers.

The [Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) Figma plugin automatically exports production ready favicons from Figma for your website or PWA (progressive web app) in seconds, with one click.

#### Preview your favicons in Figma

Favvy works by using any square "frame" layer that you select in Figma and turning it into a production ready favicon package. You can easily preview what the favicon will look like in multiple sizes by clicking on the layer in Figma, and seeing the preview instantly update in the [Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) Figma plugin.

#### Automatically generate production ready favicons

[Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) gives you all of the files that you need to deploy your favicon to a production website, including all of the `.png` and `.ico` image files, plus a `.browserconfig` and `site.webmanifest` for progressive web apps (PWA).

#### Exports HTML snippets for the head tag

[Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) also generates all of the HTML code for your `<head>` tag, which is automatically pre-populated to link to all of the other files in your favicon package.

### TinyImage for Figma

>Export compressed JPG, PNG, SVG, WebP, AVIF, GIF and PDF files from Figma, reducing sizes by up to 95%.

As a developer, you're responsible for the speed and performance of your websites and web applications; unfortunately, exporting large images directly from Figma while you're implementing a design can have a massive hit to your load times. 

The [TinyImage](https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor) Figma plugin helps by sitting in the middle and compressing all of the Figma layers you want to export for your website or web application. 

#### Export images up to 95% smaller than Figma

[TinyImage](https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor) supports exporting compressed files in JPG, PNG, SVG, PDF, GIF, AVIF and WebP formats; everything you need to deliver great looking images at super small file sizes. Even with non-aggressive compression levels, you can save up to 95% of the original image sizes exported from Figma.

#### Advanced settings for total customisation

Using the [TinyImage](https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor) settings panel, you can convert your images into different formats, add password protection to your PDF files, and specify custom/dynamic file/folder path naming conventions to suit your own project folder structure or naming conventions.

#### Create and export animated GIFs

If you need to create an animated GIF in Figma, [TinyImage](https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor) allows you to create GIFs directly from any layers in your design. You can control every aspect of the GIF, from its speed, to the frame ordering, and easy scaling. The real-time preview in the Figma plugin lets you see your GIF update while you're tweaking any of the options on the fly.

#### Create custom, compressed PDF files from your frames

[TinyImage](https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor) allows you to compress your PDF exports, often with up to 95% savings from the original exported Figma file size. You can eiter export individual frames as PDFs or you can merge them into a single PDF, with options to select and re-order your frames. For advanced options, you can also export your PDF in RGB, CMYK or greyscale, and even protect the PDF files with custom passwords directly from the Figma plugin.

### CopyDoc for Figma

>Update Figma text via CSV/JSON, download Figma comments, and export Microsoft Word docs.

The [CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) Figma plugin allows you to import and export text content from your Figma designs. If you're a developer who needs to extract text content or comments to JSON files; this Figma plugin is for you.

#### Export your Figma text layers to JSON

As a developer, manually extracting text content from a Figma design can be pretty painful.

[CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) allows you to export every text layer in your frames to a JSON file, which gives you a complete overview of your content, and allows you to write scripts that can make use of the JSON data for your websites or other applications.

#### Re-import Figma text updates from JSON

You can also re-import the JSON file back into Figma if needed. This means you can run a script or manually update the text in your JSON file, and re-import and update those text layers back into your Figma design using the [CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) plugin.

CopyDoc will find any text updates by comparing your JSON file and the text layers in the Figma design, then show you all of the differences for review and approval before any text updates are made. Once you've selected the updates you want to import, you can update the selected text layers in Figma with a single click.

#### Export Figma comments to JSON

If you're collaborating with a design team, and comments are being left inside the Figma file, sometimes it can be difficult to keep track of all the feedback being left on each frame.

[CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) has a feature that lets you to quickly export every comment from your Figma file into a JSON with one click; this lets you easily use that JSON data containing all the comments for your own applications or scripts.

### Pixelay for Figma

>Compare Figma designs with your local website development builds using smart browser overlays.

If you've been given the task of implementing a design, you'll know how "the last 10%" can be really painful, especially when you need to have your creative director sitting next to you showing all the visual differences between your build and the original Figma design.

The [Pixelay](https://www.figma.com/community/plugin/816424186244407164/Pixelay-Development-Comparison) Figma plugin allows you to easily compare all of your designs (for any size frame) from Figma with your development build, so you can see exactly what's visually different between the two and make fixes in real-time. 

#### Sync your local development build and designs from Figma

[Pixelay](https://www.figma.com/community/plugin/816424186244407164/Pixelay-Development-Comparison) grabs the designs from Figma and generates a URL that you can view in the browser; the designs are automatically placed over your real local development URLs, letting you truly compare your designs with the real build.

#### Easily compare multiple pages and screen sizes

You probably want to be able compare multiple pages (and devices/screen sizes for each of those) at the same time, rather than manually flicking through them one-by-one, right? [Pixelay](https://www.figma.com/community/plugin/816424186244407164/Pixelay-Development-Comparison) has you covered. Compare as many designs and website URLs as you want at the same time.

#### Change comparison modes on the fly

[Pixelay](https://www.figma.com/community/plugin/816424186244407164/Pixelay-Development-Comparison) gives you a bunch of modes to help you compare Figma designs with your website. One-click toggle between: the original Figma design, your website build, transparent overlay, split screen overlay, blended diffing, draggable transparent overlay and pixel guides/rulers.

#### Measure pixels between elements

You can't be expected to make something pixel-perfect if you can't tell how many pixels you need to change. [Pixelay](https://www.figma.com/community/plugin/816424186244407164/Pixelay-Development-Comparison) has a built-in measurement mode, where you can just drag anywhere on the screen to use the pixel ruler.

---

---
type: article
title: Figma plugins for copywriters
description: Turn Figma into the ultimate design tool for copywriters and UX writers by using these Figma plugins.
datePublished: 2020-11-20T00:00:00.000Z
dateModified: 2020-11-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/figma-plugins-for-copywriters/
markdownUrl: https://www.hypermatic.com/articles/figma-plugins-for-copywriters.md
---

# Figma plugins for copywriters

It's time to give some love to our copywriters and UX writers. Unfortunately, they're often left out of the design process, and are expected to magically replace all the 'Lorem Ipsum' with real content approximately 4 minutes before the project deadline.

While Figma is an amazing collaboration design tool on its own, copywriters or  and UX writers using Figma can benefit from using plugins to help with the copywriting process during the design process, and export their work to other formats.

### CopyDoc for Figma

>Update Figma text via CSV/JSON, download Figma comments, and export Microsoft Word docs.

The [CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) Figma plugin allows you to import and export text content from your Figma designs. If you're a copywriter or UX writer who needs to manage text via CSV/JSON, download comments, spell check your text layers or export Microsoft Word (.docx) documents; this Figma plugin is for you.

#### Spell check your text layers

Without a native spell check feature, it can be difficult to keep track of hundreds (or thousands) of text layers.

[CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) contains a spell check feature that checks every text layers in your page for spelling mistakes in dozens of languages. It provides multiple suggestions for each word, with single click corrections, and an "undo" feature in case you made a mistake and need to revert the spelling again.

#### Export your Figma frames to Microsoft Word (.docx) documents

If you're designing and doing copywriting for any kind of documents in Figma, sometimes exporting to a static JPG, PNG or PDF file isn't going to be the right solution for the deliverable.

[CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) contains a feature that allows you to export your Figma frames to a Microsoft Word (.docx) document. This allows anyone without a Figma account to open the document in Microsoft Word, with all of the text remaining selectable and editable.

#### Export your Figma text layers to CSV

As a copywriter or UX writer, it can be difficult to edit copy in Figma by manually scanning dozens of frames for text content and individually editing each one in isolation from the rest of the content available at a glance.

[CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) allows you to export every text layer in your frames to a CSV file, which gives you a complete overview of your content, and allows you to make updates to each layer by editing the CSV in one place using your spreadsheet app of choice (eg. Microsoft Excel, Google Sheets or Apple Numbers).

This also opens the door to using tools like "find and replace" to easily roll out text updates across your entire design in the CSV file.

#### Re-import Figma text updates from CSV

After you've edited the exported CSV file from Figma, you can re-import and update those text layers back into your Figma design using the [CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) plugin.

CopyDoc will find any text updates by comparing your CSV file and the text layers in the Figma design, then show you all of the differences for review and approval before any text updates are made. Once you've selected the updates you want to import, you can update the selected text layers in Figma with a single click.

#### Export Figma comments to CSV

If you're collaborating with a design team, and comments are being left inside the Figma file, sometimes it can be difficult to keep track of all the feedback being left on each frame.

[CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) has a feature that lets you to quickly export every comment from your Figma file into a CSV with one click; this allows you to easily review every frame and comment thread in one place, and mark off any rows in your spreadsheet app of choice (eg. Microsoft Excel, Google Sheets or Apple Numbers).

### Pitchdeck for Figma

>Magically turn your Figma designs into animated presentable slide decks, or export them to PowerPoint.

The [Pitchdeck](https://www.figma.com/community/plugin/838925615018625519/Pitchdeck-Presentation-Studio) Figma plugin allows you to magically create and present stunning slide decks from your Figma designs. If you're a copywriter or UX writer, and you want to turn your designs into a presentable slide deck, or export them to PowerPoint; this Figma plugin is for you.

#### Export your speaker notes from Figma to text (.txt)

While the visible content in a presentation is very important, the invisible content (the presenter's speaker notes) are equally vital to get right.

[Pitchdeck](https://www.figma.com/community/plugin/838925615018625519/Pitchdeck-Presentation-Studio) allows you to include speaker notes for every slide by using the Figma plugin, and also includes an "export speaker notes" feature that will instantly export all of your speaker notes to a plain text (.txt) file that you can review and edit outside of Figma. This can be handy for writing speaker notes for each slide in one place, then copy/pasting the speaker note updates back into the Figma plugin when they're ready.

#### Export your slides from Figma to PDF

If you need to quickly send a presentation deck around for internal review, or to someone who doesn't have access to Figma, [Pitchdeck](https://www.figma.com/community/plugin/838925615018625519/Pitchdeck-Presentation-Studio) lets you easily export your presentation to a PDF file; perfect for sending via email or Slack.

#### Export your slides from Figma to PowerPoint

While it's not everyone's favourite app, Microsoft PowerPoint is likely here to stay for a while longer. Thankfully, [Pitchdeck](https://www.figma.com/community/plugin/838925615018625519/Pitchdeck-Presentation-Studio) gives you the option to export your Figma design to a .pptx file that can be opened with the Microsoft PowerPoint desktop app, complete with editable text and image layers that can be moved around if needed.

#### Export your slides from Figma to Google Slides

While it's awesome to collaborate on slides in Figma, sometimes other people on your team aren't Figma users, but prefer to work collaboratively in Google Slides together. If your presentation needs to be done in Google Slides, [Pitchdeck](https://www.figma.com/community/plugin/838925615018625519/Pitchdeck-Presentation-Studio) gives you the option to export your Figma design to a .pptx file that can be opened and edited with Google Slides, allowing your team to collaboratively edit text and move images around.

#### Export your slides from Figma to Keynote

The go-to presentation app for Mac users is the preferred PowerPoint alternative in many digital agencies and design shops. If your presentation needs to be done in Apple Keynote, [Pitchdeck](https://www.figma.com/community/plugin/838925615018625519/Pitchdeck-Presentation-Studio) gives you the option to export your Figma design to a .pptx file that can be opened and edited with the Keynote desktop app.

---

---
type: article
title: Figma plugins for beginners
description: An easy to understand overview of what you need to know if you're new to Figma plugins (or just need a refresher).
datePublished: 2020-11-17T00:00:00.000Z
dateModified: 2020-11-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/figma-plugins-for-beginners/
markdownUrl: https://www.hypermatic.com/articles/figma-plugins-for-beginners.md
---

# Figma plugins for beginners

Figma plugins were officially launched in August 2019, going public with 40 plugins available to the Figma community. Since then, hundreds of Figma plugins have been published to help automate and streamline your workflows. Here are a few useful things to know about Figma plugins if you're coming in as a beginner, or if you just want to refresh your memory.

### How Figma plugins work

Before we get into how to install Figma plugins and use them in your designs, there are a few basic (but often missed) principles about how Figma plugins work. It's worth covering those first, in case you have any of these questions while you're getting started.

#### Who can use Figma plugins?

If you already have a Figma account, you can install Figma plugins via the browser or the Figma desktop app. If you don't already have a Figma account, you can sign up for free via the [Figma website](https://figma.com/).

#### Edit access is required to run Figma plugins

While anyone can _install_ a Figma plugin, it's worth noting that you can only _run_ Figma plugins in a file that you have **Edit** access to. If you're inside a Figma file that you only have **View** access to, you won't be able to run any plugins inside that file. The reason for this is that using Figma plugins very often leads to modifying the contents inside of the design, so it makes sense that you can't do this until you've been given **Edit** access.

#### "Why can't I install this Figma plugin?"

Sometimes we'll get asked a variation on the question: "Why can't I install Figma plugins?" The most common reason for not being able to install a Figma plugin is due to being a member of a Figma Organization; sometimes there are restrictions setup by the organization that may only allow you install Figma plugins from an approved list. If this is the case, and you really want to try out a restricted Figma plugin, you should reach out to the person in your company that manages the Figma Organization permissions.

#### You can only run one Figma plugin at a time inside a document

Unlike some other software you may be used to, plugins in Figma are not designed to run in the background, or be used over long lengths of time. Typically, a Figma plugin will be built around an idea of automating, enhancing or augmenting a single task or series of tasks that either would simply not be possible without a Figma plugin (eg. the [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) Figma plugin), or would usually be done manually through a series of painful, manual extra steps (eg. the [HyperCrop](https://www.figma.com/community/plugin/818960915730257192/HyperCrop-Batch-Image-Resizer) Figma plugin).

As mentioned previously, Figma plugins can be run in any Figma document that you have **Edit** access to; with a key point being that you must be inside the editor itself to run a Figma plugin. For example, you can't run a Figma plugin from your Figma drafts page, or search page.

### How Figma plugins are built

The great thing about Figma plugins is that everyone has access to build and publish their own plugins in the vibrant Figma Community ecosystem.

#### What are Figma plugins written in?

As Figma itself is built on web technologies (which is awesome), the plugin ecosystem for Figma is also run entirely on web technologies. This means that under the hood, every Figma plugin is comprised of HTML, CSS and Javascript.

As the plugins announcement post from Figma put perfectly:

>We wanted our plugins to be secure, stable, and performant, of course. But we also wanted Figma plugin programming to feel like web programming. Our internal motto is: “If you can code a webpage with basic HTML and JavaScript, you can build a Figma plugin.”

This is a really neat innovation in the world of design tools, as it lowers the barrier of entry for aspiring Figma plugin developers who are already familiar with writing HTML, CSS and Javascript.

Of course, while there are varying levels of plugin scope and complexity, every Figma plugin developer has access to the same APIs and technologies at their disposal to turn their Figma plugins ideas into reality.

#### Using private Figma plugins internally at your company

If you have a very specific automation task at your company that you could solve by building a Figma plugin, but you don't necessarily want to make it public, or know that it wouldn't be useful in a broad context, you can use Figma plugins privately amongst your own team without needing to publish it in public to the rest of the world.

This can be done even without having a Figma Organization plan, simply by zipping up your plugin development build folder and sharing it with members on your team. They can manually install your plugin by navigating to their Figma user page, clicking the **Plugins** tab, and then clicking the **Create new plugin** button. After the **Create a plugin** modal loads, you can click the **Click to choose a manifest.json file** box to browse for the "manifest.json" file that was included in the Figma plugin zip file to install it locally.

### How to find Figma plugins in Figma Community

The Figma Community is a place where Figma users can publish their Figma files and Figma plugins for other Figma users to duplicate and install. Once you're in the Figma community, you'll be able to browse, search and filter all of the available Figma plugins to install.

#### Navigating to the Figma Community

If you navigate to your Figma file browser page, then click on the **Community** page in the left sidebar, you'll be taken to the Community section of Figma. If you click on the **Plugins** tab (the tab defaults to **Files**), you'll be able to see a list of all the Figma plugins available to install. 

#### Find Figma plugins using a search keyword

If you know the name of the plugin you're looking for (eg. "pitchdeck" would find the [Pitchdeck](https://www.figma.com/community/plugin/838925615018625519/Pitchdeck-Presentation-Studio) Figma plugin), or just want to search for a keyword (eg. "sketch" would find the [Convertify](https://www.figma.com/community/plugin/849159306117999028/Convertify-Figma-to-Sketch%2FXD)  Figma plugin), you can use the search field at the top of the Community page to search for a keyword. After the results are shown, you'll need to click on the **Plugins** tab to only show the Figma plugin results (by default it will show Figma files).

#### Finding top Figma plugins by install count

On the Figma community page, you can click the **Explore** button near the top of the page, and then click on the **Plugins** tab, which will display a list of all the Figma plugins available to install. 

If you click on the **Installs** text at the top of the list, this will sort the Figma plugins by the highest number of installs to the lowest number of installs per Figma plugin. Clicking on **Installs** again will flip the order to the least amount of installs to greatest amount of installs per plugin.

#### Following plugin creators to discover Figma plugins

You can also discover Figma plugins by following creators in the Figma Community that you think is cool. You can click on the **Explore Creators** button on the Figma Community home page to show a list of trending creators. 

You can also visit a creators page directly if they share their Figma handle anywhere online; for example, you can follow Hyperamtic by checking out [@hypermatic](https://figma.com/@hypermatic) on the Figma Community and keep an eye on all of the new Figma plugins that we publish.

#### Finding recently updated Figma plugins

On the Figma community page, you can click the **Explore** button near the top of the page, and then click on the **Plugins** tab, which will display a list of all the Figma plugins available to install.

If you click on the **Last Updated** text at the top of the list, this will sort the Figma plugins by how recently the plugin creator has updated them. Clicking on **Last Updated** again will flip the order to show the plugins that have not been updated recently.

#### Finding Figma plugins from website links

Because the Figma and the Figma Community is built on the web, you can find URLs pointing to many Figma plugins in blog posts, lists, YouTube videos or online discussion forums. For example, linking to the [CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) Figma plugin here will allow you to land directly on the plugin installation page in Figma by clicking on it.

### How to install Figma plugins

Once you've found the that you want to install, you can either install it from the Figma plugins list, by clicking the **Install** button on the right hand side.

You can also do this directly from a Figma plugin detail page (eg. the [Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) Figma plugin detail page) and clicking on the **Install** button in the top right. 
 
Once the button text changes to say **Installed**, you'll be able to switch back into your designs and use the Figma plugin straight away.

#### How to uninstall Figma plugins

If you decide to uninstall a Figma plugin, The other method to uninstall a Figma plugin involves returning to the plugin page (or the Figma plugins list) and clicking on the **Uninstall** button there. Once the button text reverts back to **Install**, your Figma plugin has been successfully uninstalled.

### How to run Figma plugins

After you've installed your Figma plugin, you can switch back to a Figma file that you have _edit_ access to. If you right-click anywhere in your Figma design editor canvas, hover your mouse over **Plugins**, then find the name of the Figma you just installed and left-click on that once, this will run Figma plugin.

#### How to easily re-run Figma plugins

To re-run the last Figma plugin you ran, you can use the keyboard combo of "Option + Command + P" on Mac, or "Ctrl + Alt + P on Windows. This will automatically run the last Figma plugin without needing to use your mouse to navigate through the plugin menu again.

Some plugins also contain a feature which allows them to be re-run directly from the right hand side column in Figma. This functionality depends entirely on if a plugin creator has decided to include it, and how to include it. 

For example, in the [TinyImage](https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor), if you use the Figma plugin to export compressed images for a certain Figma layer, after you close the plugin, you'll be able to click on that layer and see a new clickable "TinyImage" menu item under the **Plugins** subheading in the right hand side column in Figma, which will re-run the plugin and allow you to easily re-compress that image again.

Some plugins will also allow you to re-run the plugin from the right-hand Figam column button without having any layers selected at all. For example, the [Crypto](https://www.figma.com/community/plugin/819688895973707151/Crypto-Password-Protection) and [Pixelay](https://www.figma.com/community/plugin/816424186244407164/Pixelay-Development-Comparison) Figma plugins will show up as a button after the plugin has been run at least once on the current Figma page, allowing you to quickly re-run the Figma plugin at any time on that page.

### Start using Figma plugins to automate your design workflows today!

Those are most of the useful basics to help with understanding Figma plugins for beginners, and hopefully it shows that anyone can create, install and use Figma plugins to help automate workflows for themselves, their team or their company. Once you've discovered the power of using Figma plugins, you'll leap from beginner to superhuman in no time at all.

---

---
type: tutorial
title: How to import/export Figma text layers with CSV files using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-11-17T00:00:00.000Z
dateModified: 2020-11-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-import-export-figma-text-layers-with-csv-files-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-import-export-figma-text-layers-with-csv-files-using-copy-doc.md
---

# How to import/export Figma text layers with CSV files using CopyDoc

#### Video Transcript

Today, I'm going to be showing you how to import and export text content from your Figma designs using CSV files.

We're going to do this by installing a Figma plugin called CopyDoc. If you haven't already installed it, you can jump into the Figma Community and search for the term "CopyDoc", and under the "Plugins" tab, you'll see a result come up called "CopyDoc", and if you go over to the right-hand side you'll be able to click on the "Install" button, and once it says "Installed", then you're ready to go and we can jump back into our Figma design.

I'm just going to be using this Figma file to give you an example of what it looks like to import and export text content from Figma using CSV files. The first thing we need to do is just right click anywhere, go down to "Plugins" and then click on "CopyDoc", and that's just going to fire up the Figma plugin that we just installed a moment ago. You'll notice that there's a few different settings here, but for today we're just going to be focusing on importing and exporting CSV, just using these two options.

The first thing we need to do in order to edit the content is to export all of our Figma text layers to CSV; and the way we can do that is just by clicking on this button over here which says "Export CSV". Once that loads, it's going to load in all of the different Figma frames that you've got at a parent level; all of your top level frames on the current page will get loaded into this window, and this essentially just allows you to select which frames you want to export the Figma text layers from.

By default, it will select every single frame in your Figma document, but if you want to narrow that down, there's a couple of different ways to do it. The first way is just to uncheck all the layers, or check and uncheck individual layers, and you'll see that you'll be selecting a subset of those layers; for example, if I only wanted these seven, I could do that another easier way if you know which frames you want to export is you can just click on those frames in your design, and you can select multiple ones and that will automatically filter down those those frames in the Figma plugin itself. If we only wanted to export these three we could quite easily just click on those and you'd see those three filter. You can unselect all the frames just to get the whole list back, and for the purposes of this tutorial I'm just going to export all of these frames in one go from Figma to CSV.

Let's go ahead and do that now. We can just click on this "Export CSV" button up here; I'll click on that, and this is going through and exporting every single Figam text layer in our frames to a zip file. It's telling us that the Figma text layers are ready to download, so I'm going to click on the "Download Text" button and just save that to my desktop, and if I double click on that zip file you'll see we get a folder which contains my CSV file, and it contains a folder called "frames"; and that "frames" folder is there because I selected the "Include Designs Option", and what that means is it's going to include references to all of your frames in the zip file. You can see here if I navigate through those, it's including a file for every single frame that I chose to export, and that's just a nice touch to be able to reference the designs from the CSV even if you're not accessing the Figma file directly.

To give you an example of what the CSV looks like, I'm just going to double click on the CSV file and this is going to open up Apple Numbers, that's my default app on this computer, yours might be Microsoft Excel, or you could open it in Google Sheets, and that would be another option, but for today I'm just going to be showing you the Apple Numbers app.

We can see here it's loaded up the CSV file that we exported from Figma, and if you have a look closely you can see that we've got a few columns here; we've got the "id" column, this is a column that you don't want to be editing, this is what's going to map the text layers back into Figma when we re-import them; you can just not worry about that "id" column. The "frame" column is a reference to what frame the text is being included on; for example we've got the "Intro" frame here, and you can see that on the "Intro" frame we've got three layers of text; we've got "Dieter Rams ten principles of good design" and then this little snapshot here as well; we've got those three little lines and the same thing goes for all of the other frames. You can see all the frame references, and that just makes it really easy to visually verify what's going on.

The other thing to note is that it will essentially go from top to bottom, so the text layers will be ordered from top to bottom, and you can see here in this intro frame we've got "Dieter Rams ten principles for good design", and then this little tag line at the bottom, and that's because the order of those top to bottom in the design itself, it also takes into account left to right as well; for example we've got "good design is innovative", "the possibilities for innovation" is the second one, and then we've got this little footer down here as well; those are a little bit of an example of what they look like. You can see over here we've actually got these numbers which are getting aligned to the right, I believe that's just because they're being recognized as numbers by the program, but if you're wondering where those were they're just sitting over the right hand side; that's probably more of an Apple Numbers specific thing.

Now that we've got our CSV file with all of the text from Figma, we can actually go and edit that text content right now. For example, if we wanted to change this this title frame here; instead of "Ten principles", maybe you want to say "Two principles" for some reason; and instead of "Dieter Rams", I'm just going to put my own name there, and I'll put my last name in there as well.

The other cool thing we can do is actually just find and replace, so you can do this in any spreadsheet software, but if you actually just do a find, so if you wanted to do "good design", if you wanted to find that sentence and for some reason you wanted to replace that with "bad design", you can do that and you can click "Replace All", and you can see here it's changed all of those references in our document. If that was the change I wanted to make and I wanted to re-import these text changes back into Figma from the CSV, what I can do is I can save the file as a CSV. I'm just going to "Export to CSV", I'm going to click "Next" and I'm just going to save that onto my desktop. I'm just going to say "Updated", so I know which one.

I've just updated the CSV with all of my Figma text, and now we're going to actually re-import that text back into Figma. All we need to do is close off this little success message here in the Figma plugin, and this time instead of clicking on "Export", we're going to look at the "Import Text Updates from Figma" feature, so this is going to update the Figma text layers from the CSV. If you go ahead and click on the "Import CSV" button, you'll see this little prompt to either click or drag and drop a CSV file, and it's just letting us know that we should ensure that the CSV was originally exported from the CopyDoc Figma plugin, otherwise it's probably not going to work.

If I go back to my desktop, we can see here we've got the new updated CSV file that we just edited. All I'm going to do is I'm going to click and drag that into the Figma plugin, and I'm going to drop it into that little drop zone. It has just loaded in the CSV file, so it has read through all of our rows in the updated CSV that we exported from Figma and it's actually giving us a list of all the differences it has detected. It's gone ahead and verified every single row in the CSV file, and it's comparing those rows with the text that's currently in Figma based on the IDs that we exported from in the first place and it's actually giving us diffs, visual diffs, of what's going to change were we to update these layers. It doesn't update them immediately, it'll always let you verify the updates that you want to make from the file just so you know exactly what's going to be changed, and you can opt-out of any changes that you actually don't want to approve.

In this case, it has detected 13 changes that we made, so you'll recall that we changed "Dieter Rams" to my name, and then we also did a big find and replace where we changed every reference of "good design" to "bad design", and so you can see here all of the diffs are showing that difference; it's keeping the "d" at the end of "good", but it's changing the first letters to now be "bad", so you can visually see in the red on the left of the original text and what it's going to look like when that text gets updated. In this case, I want to keep all of the changes except for the "Ten principles of good design" getting changed to "Two principles", I'm going to leave that one out.

To verify where these text layers are in the design, you can easily do that by clicking on the little magnifying glass icon or the search icon next to any of these layers. As you can see here, it actually zooms in automatically to where that change is going to be made, were you to accept it. You can go through all of the layers to verify where all these changes are actually happening, and that's just a really quick and easy way to verify any text changes that are going to be made without you realizing where they might be. That's just a really neat feature that you can use before you actually go ahead and click the "update" button.

Having said that, I'm pretty happy with all of these updates that we're going to be making. As I said, I'm selecting 12 out of the 13 layers, so now that I'm happy with all of those, I'm going to go ahead and click on "Update Figma Text Layers"; this is now updating, or has already just updated 12 Figma text layers. It's told us that 12 figure layers have just been updated, and if we actually go through we can see in the list here that all of them except for this bottom layer, which we didn't want to update, has been updated. You've got this little confirmation icon, the little check mark, and in brackets at the end of each string it's got "Updated" in brackets. It has confirmed that it has updated all the layers, and again, you can still use these magnifying glasses and we can actually cruise around the file and see exactly what was changed; it's just a really easy way to verify what actually happened, and you can see here we've changed every single layer within a matter of a couple of seconds, so that's pretty neat.

If we wanted to undo that, the quickest way to do that would just be to do a "CMD + Z" or a "CTRL + Z" on Windows. For example, I can do "CMD + Z", and it immediately undoes all of those text changes, which is great if you if you accidentally did the update and you didn't really mean to, then a "CTRL + Z" or a "CMD + Z" will get get you back there pretty easily.

Again, now that we've reversed those, we can easily re-import them just as easily as we did. I'm just going to drag that back in, and this time I'll accept all the changes, including the bottom one, and once again I'll just click "Update Figma Text Layers". It's going to replace all of the text layers from the CSV file that we modified into Figma. I'll show you that one more time, and click on "Update Figma Text Layers", and there we go; two seconds later, we've got 13 text layers updated super easily.

This is a really nice way of bulk updating content in a design just by editing a CSV file that you've exported from Figma, so if you have a copywriting team or if you have some external stakeholders that need to review copy, exporting the content or the text from Figma to CSV can be a really convenient way to get a quick overview of every single bit of text that's being used in your Figma design, or just on specific frames that you need to run past your legal department or run past a client for approval.

If you're a copywriter, oftentimes it's a lot easier to actually edit that copy in an isolated fashion in a spreadsheet or a Google Sheet and being able to export all of your text from Figma to that CSV file that they can edit on their own without disrupting the design process, that's actually a preferable way to go a lot of the time. As a designer or as a copywriter, you can quite easily just jump back here as we've just seen and re-import all those copy updates from CSV to Figma and review them before they actually go into the design, just in case there's any crazy huge amounts of text that are going to break the design; you'll be able to verify that before you actually go ahead and re-import it.

That's basically everything you need to know about exporting and importing CSV text content in Figma using the CopyDoc Figma plugin. If you've got a copywriting team, or if you're having issues with managing your text in Figma, then exporting and importing text with CSV files in Figma might be something that you can try. If you do, I hope you have some success with it, and we'll be back soon with more Figma tutorials just like this one. Thank you again for watching, and we'll see you soon.

---

---
type: tutorial
title: How to import/export Figma text layers with JSON files using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-11-17T00:00:00.000Z
dateModified: 2020-11-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-import-export-figma-text-layers-with-json-files-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-import-export-figma-text-layers-with-json-files-using-copy-doc.md
---

# How to import/export Figma text layers with JSON files using CopyDoc

#### Video Transcript

Today I'm going to be showing you how to import and export text content from Figma using JSON files, and we're going to do this by installing a Figma plugin called "CopyDoc".

If you haven't already done so, you can go to the Figma Community and search for the term "CopyDoc", and you'll see a result called "CopyDoc" come up under the "Plugins" tab and if you go to the right hand side, you'll be able to click on the "Install" button, and once it says "Installed", you can jump back into your Figma file and we can get started.

The first thing we need to do is just right click anywhere, go down to "Plugins", and then click on "CopyDoc", and that's just going to open the Figma plugin that we just installed. You'll notice that there's a few different options here, but today we're just going to be looking at the options which export Figma text layers to JSON and then import the text updates to Figma from that modified JSON file. In order to edit the content, we first need to export the JSON file from Figma, and we can do that by clicking on the "Export JSON" button on the right hand side here. Once that loads up, you'll see that all of our parent frames, all of the frames at the top level of the page will be loaded into the Figma plugin as an option to choose which frames you actually want to export the Figma text content from.

By default, it will automatically pre-select all of the frames, but you can easily change that by either deselecting the frames that you don't want, or deselecting all the frames and checking a couple. The other way that you can do it really easily is just by selecting all the frames, and then clicking on the frames individually; by highlighting those frames, the Figma plugin will automatically filter down just the frames that you've selected on the Figma canvas, so that's just another really quick way if you know which frames you want to export and not have to go through the list and find the check boxes.

For today's example, I'm just going to export every single frame and this is just to show you what it looks like with a medium sized JSON file from Figma. To export our Figma text content to JSON, we can just click on this top right button over here, which is "Export JSON"; I'm going to click that now and this is going to export all of the text content currently on our page to a JSON file. Now that the Figma text layers are ready to download, I'm going to click on the "Download Text" button, and I'm going to save the zip file to my desktop.

If I double click on the zip file and open up the folder, you'll see that we've got our JSON file that's been saved out, and we also have a folder called "frames", and that "frames" folder has been included because I opted-in to the
"Include Design References" checkbox that was in the Figma plugin a moment ago. If I look at those images, the Figma plugin is basically saved out PNG files of every single frame that I decided to export, and this is just a really nice way to have a visual reference of the text content in the JSON file that we've just exported, even if you don't directly have access to the Figma file at the time. These are just a really nice little bundle of exports that you can reference while you're making copy updates.

Now that we've got our JSON file, let's go ahead and open it up in our code editor. I'm going to use Visual Studio Code and open that up now; I'm just going to drag the JSON file into the Visual Studio Code editor, and you can see here we've just loaded in our JSON file. This is the Dieter Rams presentation page JSON file; this is all of the text content that's currently in our Figma file that we've exported to JSON using the Figma plugin. You can see here we've got an array of JSON objects, and each object has an "id", the "frame" name, and also the "text" string.

The "id" is a field that you definitely don't want to touch, that's what helps map the content back into Figma when we re-import the JSON file in a moment; I'll show you what that looks like very shortly. The "frame" is just a reference to the frame that's being included for each of those different text layers; that's essentially the parent frame for all of these little text strings, you can see here it changes as we go along, and the frame can also be used as the reference as I showed you a minute ago in the frames folder. If you really wanted to visually reference what was in "Frame 4" or "Principle 3", you could just go into the "frames" folder, find number "4" and open that up, and we can see here that the text content will match up with that, so that's what that looks like there.

Okay, so now that we've got our JSON file with all of our Figma text content, I'm just going to make a few updates to show you what it looks like to then re-import the JSON file to Figma. For example, if I were to change "Dieter Rams" to my own name in this instance, and then I changed "Ten principles" to "Two principles" for some reason, and then if I decided to do a bit of a bulk replace as well I could do that, too. If I did a search for "good design", and I did a find and replace, I can replace "good design" with "bad design". That's just a bit of an update across the board, so if I click on "Replace All", that has now changed every reference of "good design" to now be "bad design".

That's all I'm going to do for now, and I'm just going to save that JSON file again. Now that I've saved the JSON file, we can go ahead and re-import that text content back into Figma from JSON. I'm just going to minimize the file, and in my Figma plugin, I'm just going to close off the success message; and this time instead of clicking on the "Export Figma text layers to JSON" I'm going to use the "Import text updates to Figma from JSON" option.

If you go ahead and click on the "Import JSON", button that's going to bring up this little prompt with a box that you can either click or drag and drop a JSON file inside. In my case, I'm just going to drag and drop the updated JSON file that we just edited directly into that little box, and drop it; and there we go, it has just read all of the text content from that JSON file, and you can see here it's detected 13 Figma text layers that contain text updates. On the left hand side, we've got all of the current Figma text that's in the document, so you can see here "Dieter Rams" crossed out and then it's going to replace it with my name, and it's worth noting that none of these text updates have been applied yet; the Figma plugin will always allow you to review and approve any of the text changes that are going to be included and, so you can actually opt-out of any that you don't like. For example, if I uncheck the bottom layer and I don't include that one, it's only going to actually include 12 out of those 13 changes.

If you want to verify where those are actually coming from, you can easily click on this little magnifying glass icon and that will instantly zoom in to exactly where that text located on your Figma page. That's just a really easy way to validate where the text is going to be updated before you decide to approve it, and you'll see here as well there's a visual diff checker at every stage. For each row that's been detected in the JSON file, you can see here exactly what's going to change, so instead of the word "good", the "d" is being kept, but the first letters are being replaced with "b" and "a" to make it into "bad design". That's a really easy visual cue to get a sense of exactly what's going to change again before you decide to override those text layers in your Figma document.

Now that I'm happy with all those, I'm going to click on the "Update Figma Text Layers" button, and I'm just going to zoom out so you can see it happen in in one go. If I zoom out, and I tell CopyDoc that I want to update those layers, all I need to do now is click on the "Update Figma Text Layers" button. I'm going to do that now, and you'll see here that it's just updated 12 Figma text layers with the content from our JSON file. If you have a look on the actual Figma canvas itself, you can see that we've got "good design" being replaced with "bad design" all over the place. Even though we've updated the content as you can see here, it's changed the icons to show little check marks, and it's got a little
"Updated" in brackets on the side here. You'll notice that the one that we didn't select is now disabled, and it hasn't been updated; this is just confirming that those layers have been updated, and you can still click on these icons if you want to manually verify what has been changed and what it looks like.

It's very simple, and if you accidentally made a mistake, you don't have to worry; you can just use the shortcut for the undo button, so if you're on Mac you can use "CMD + Z" or Windows you can use "CTRL + Z", and if I do that now you can see that all of those text changes have just been undone. That's just a really quick way of undoing all the changes if you accidentally approve something by mistake.

If you want to re-import it, you can just click on the "Import JSON" button one more time, and I'm just going to drag that JSON file right back in and load those Figma text layers up again, and you can see this time again it's just coming up with 13 out of 13. I'm just going to approve all of them this time, and I'm going to click on the "Update Figma Text Layers" button one more time. You can see what it looks like, so if I click that, it's just updated 13 Figma text layers in about one second. You can see all of the changes have been made as we'd expect, so that's just an example of how you can really quickly export all of your Figma text content to a JSON file, edit it using a text editor or a code editor, and then re-import all of that updated text content back into your Figma designs in a matter of seconds.

It's a very quick way of updating content in bulk, and if you're if you're working with a team of developers who prefer to use a JSON format, there's some really neat things that they can do with JSON data. If you are working with the development team just get in touch with them and see what they might be able to do with making really quick edits to those JSON files; they may be able to pull content down from an API or do something really interesting to update that content, or even just use the JSON content for a completely different purpose; they may be able to integrate that content with a Content Management System (CMS), they may be able to integrate that Figma text into a third-party API or something like that; there's a whole bunch of neat things that you could do with a JSON file after you've exported it from Figma.

For the purposes of managing copy or managing text from Figma using a JSON file, you've just seen the simplest version of it; you can simply just open up the JSON file that the Figma plugin exports, update all the text layers that you need using your code editor or text editor, and save that for re-importing into Figma from that updated JSON file. If you've been wondering how to use JSON files to manage your Figma text content, then I hope this Figma tutorial has been helpful for you. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to export Figma to Microsoft Word .docx files using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-11-16T00:00:00.000Z
dateModified: 2020-11-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-microsoft-word-docx-files-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-microsoft-word-docx-files-using-copy-doc.md
---

# How to export Figma to Microsoft Word .docx files using CopyDoc

#### Video Transcript

Today I'm going to be showing you how to export your Figma designs to Microsoft Word .docx files.

To do this, we're going to be using a Figma plugin called CopyDoc. If you haven't already installed it you can do so by going up to the Figma icon in the top left of the app, going down to "Community", and then searching for "CopyDoc",and you'll see "CopyDoc" come up in the Figma plugins list under the "Plugins" tab. If you haven't already done so, you can click on the "Install" button on the right hand side, and that will install the Figma plugin. Once you've done that, you can switch back into your Figma file and we'll be ready to go.

I'm going to be showing you how to export this Resume or CV from Figma to a Microsoft Word document, and to do that I'm just going to open up the Figma plugin we just installed. I'm going to right click, go down to "Plugins", then go down to "CopyDoc", and I'm going to click on that, and that's just going to open up the Figma plugin that we just installed a moment ago. Once it loads you'll see that we've got a few different options, but today we're just going to be focusing on the top option, which is to "Export frames to Microsoft Word". This is going to export your Figma frames to a .docx file, and considering we've only got one frame, I just thought this would be a simple tutorial to show you just to get started.

I've got my frame, it's a A4 size frame, so this has been resized in Figma when the frame was created using "Paper" and then A4. You can set this to whatever size you want, but at the moment this is for the purposes of having a resume document, it's just an A4 paper size. To load up the frame we can just click on "Export Frames" and this is just going to load all of the frames inside of your Figma design. In this case, I've only got one frame, so you can see it's got one out of one frame selected, and just to give you a simple example of how this works, we'll just keep that frame selected, and click "Export to DOCX".

That's just generated a .docx file for us and it's telling us our Microsoft Word document is ready to download. We can click on the download button below to save the exported file, so I'm going to do that now and just click on the "Download Word Doc" button, and I'm just going to save that to my desktop. If I open up that file now, I'll just double click on the .docx file that is exported; you can see there it's got the page name with the file name in it, and then today's date and you can see there it's a .docx file.

I'm just going to double click on the .docx file, and that's just opened it up for me in Microsoft Word. We can see here, all of the text that we had in Figma has been carried across, the image that we've got there has been carried across. and it's it's carried everything over as we'd expect. The neat thing is this is editable as well, so if we wanted to change this we could quite easily update that; if we wanted to change that text we can do that, all of the styles have been carried across; this has been carried over with all the caps and the spacing, and we've got the colors the slightly off of black color here and you can see everything that was in Figma has been carried across as we'd expect. That's really neat, that's exactly what we wanted and you can update that text in Microsoft Word, or you can update it in Figma again and just rerun the Figma plugin to export those frames to Microsoft Word one more time.

To show you another example, I'm just going to open up a separate document and I'll show you what it looks like to export a multi-page document as well, and we can run through that in just a second. I've just switched into a new Figma file and this one has a bunch of different frames, so I'm going to show you an example of what it looks like to export a page or a set of frames that isn't just one frame, and I'm going to show you how to export that in custom order and show you what that looks like. Once again, we can open up the CopyDoc extension by right clicking anywhere, going down to "Plugins", clicking on "CopyDoc", and that will just re-run the Figma plugin. Once again, we're just going to click on the "Export Frames to Microsoft Word" option or "Export Figma frames to .docx" is the subtitle. If you just click on the button "Export Frames", you can see here it's loaded up all of the frames in our page.

We've got all of the frames in the order that they are loaded up in in the left-hand side Figma panel, however, in our case we actually want to change that order because we can see here that "Principle 10" which is down here is actually the last frame in our in our design. We have a few options here, we can use the quick ordering, so if you click on this drop down here, you will be able to sort the frames by layer order, you can sort them visually in their columns, or their rows, or by layer name, so in this case I might just use the "rows" option, and you can see when I clicked on that it's actually loading in the rows one by one; it's going from top left, all the way across and then go into the next one going to the next one. I could also use the column option, which would look like that, and in that case you can see it's going from top to bottom left to right. In my case, I just want to keep it as rows.

The other thing you can do if you wanted to manually override the order is just click on one of these little handles over here, click and drag, and if you drag and drop those you can actually customize the order that way, too; it's just a little bit more customization. Of course, if you do need to change which frames are included, you can use the check boxes on the left hand side and that will only include the frames into the Microsoft Word document that you actually want. In this case, I just want to keep all of them there, and now that I'm happy with all the frames and the ordering I can just click on the "Export to .DOCX" button one more time, and that's going to convert my Figma document over to a Microsoft Word doc. This one has a few more images in it, so it's going to take slightly longer, but it should only still take a few seconds to export that .docx file for us.

The Microsoft Word document is ready to download, and just like before we're going to click on "Download Word Doc", and save it to the desktop. If I open up that, you can see here the .docx file has been saved, and if I double click on the .docx file you can see here that it's created another Microsoft Word document for us with all of our frames from Figma. Those are looking really good as well, and once again I can change that text, so if I wanted to update this text I can do that, and I can move it around. If I need to move that up, that's totally fine, and that's exactly as we expected. We've got all of our frames from the design in Figma exported to Microsoft Word, so this can be really handy if you need to put together a portfolio resume, or if you need to put together a deck, or a set of documents for a client or internally and you want to be able to share that in a document form or a Microsoft Word document, then exporting it from Figma to Microsoft Word doc or a .docx file is sometimes a really good way to go if somebody doesn't have access to Figma, or you need to send this via an email or via Slack or something like that.

That's what that looks like there, and as I said a minute ago if we only wanted to export a subset of those frames I can just re-run the Figma plugin again by going over to the right hand side and clicking on the CopyDoc icon, and if we only want to export some of the Figma frames to Microsoft Word, we can go in here on the left hand side and just select which of those frames we actually want. In this case, we might just want the "Intro", we might want "Principle 5" and "Principle 7"; and I might want "Principle 7" to come before "Principle 5" for some reason, so this is just an example of what that can look like. Finally, I'm just going to click "Export to DOCX" one more time, and it's going to convert our Figma design to Microsoft Word again. It's telling us the Microsoft Word documents ready, and I'm just going to click "Download Word Doc" and save it to the desktop. One more time, I'll open up this one and you can see here it's only exported the three frames that we that we specified in the Figma plugin, and it's adhering to the order that we just selected using the drag and drop ordering, too. We've got number five at the end, and then number seven, just like we did in the Figma plugin.

You can use this Figma plugin on any of your Figma designs, it doesn't really matter what the size of the frames are, you can have mixed size frames and it will still be able to export that to a single document if you wanted to do that. It does tend to work better if if all of the frames you're exporting to a Microsoft Word document are all fairly uniform, so whatever you want the design to be in Figma you can just design it the way that you want, all you need to know is that each frame is going to be treated as a page in the Microsoft Word document, so whatever Figma frames you design, those will what will be available to you when you want to export them to a word doc. As long as you do that, you can basically design anything you want inside of the Figma file.

The last thing I would note is just to say that if you're using a font in Figma that you don't have installed on your system, then it's going to look a little bit different because the font really needs to be installed for the visual side of it to look perfect. The text will still be there, it'll still be editable but it'll look a little bit different to how it does in the Figma design, so just make sure that whatever fonts you're using in your Figma file, be sure to install those before you open up the document in Microsoft Word after you've exported it from Figma to the .docx file.

Thank you for watching, and I hope if you've been trying to export Figma files to Microsoft Word documents or .docx files, hopefully this tutorial has been helpful for you. I hope that if you give it a go with your own designs you have some success, and we'll see you very soon with more Figma tutorials just like this one. Thanks again for watching.

---

---
type: tutorial
title: How to spell check Figma text layers in your designs using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-11-16T00:00:00.000Z
dateModified: 2020-11-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-spell-check-figma-text-layers-in-your-designs-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-spell-check-figma-text-layers-in-your-designs-using-copy-doc.md
---

# How to spell check Figma text layers in your designs using CopyDoc

#### Video Transcript

Today I'm going to be showing you how to spell check your text layers in Figma using a Figma plugin called CopyDoc.

The first thing you'll need to do if you haven't already installed it, is jump to the Figma Community and search for the term "CopyDoc"; and if you hit enter you'll see a result pop-up called "CopyDoc", and you'll see the "Install" button on the right-hand side. If you haven't clicked "Install", just go ahead and click "Install" and you'll see it change to say "Installed", and once it looks like that, you'll be able to jump back into your project and we can get started.

The first thing we need to do is just right-click anywhere, go down to "Plugins" and click on "CopyDoc", and that will fire up the Figma plugin that we just installed a moment ago. You'll notice there's a bunch of different options here, but today we're just going to be focused on the option which is about spell checking Figma text. This is going to allow us to find and correct spelling mistakes across our entire page in Figma, and we can get started by just clicking on "Spell Check Layers"; that's the button next to this item.

After clicking on the button, you'll get an option to say which language you want to spell check your Figma page in; by default, it just changes to "English (United States), but if you click on the drop down, you'll be able to see dozens of different languages; you've got "German", you've got "English", different variations of "English" for Australia, Canada, United Kingdom, you've got "French" you've got all these different languages; depending on where in the world you're designing the page, you'll want to change this to match whatever language the text in your file is. In my case, I'm in Australia, so I'm just going to use "English (Australia)" option.

Once you've selected the language, all you need to do is click on the button that says "Find Spelling Mistakes", so I'm going to click on that, and this is now going through my entire Figma page and searching every single layer for spelling mistakes. You can see this is a fairly small file, so it only took a couple of seconds; if you've got a really massive Figma file that you're spell checking, it might take a little bit longer, but it should be pretty quick.

Okay, you can see that the spell checking feature has found a whole bunch of spelling errors in our Figma text. It has found 21 spelling mistakes all up, and some of these are going to be actionable and some of them are not going to be actionable, as there'll be a few that potentially are in a different language or potentially abbreviations which we actually don't want to correct. For example, "Braun" is a brand which isn't in the dictionary, so even though it says it's a spelling mistake, we know that that's actually not a spelling mistake; in that instance I'm just going to leave that one. But we can see here that there's another error which is should be actually "designed" but it's been picked up because it's missing the "e", and in brackets you can see the number of times that it's been found in your Figma file.

Any errors that the spell checker has found it will automatically group them, so if you click on one of these little titles, what that does is it reveals all the places that the spelling error has been found inside of your Figma file, and what you can do if you want to actually inspect them is just click on any of these little "search" icons next to the frame name. In this case I'm going to click on "Principle 3" and I can see there it's immediately zoomed in to where the actual error is happening, and I can change that to go to the top one. I'll go to the "Intro", and that's going to jump to the text layer on the "Intro" frame and again you can see here it's zoomed right into where the spelling mistake has been found in Figma.

What we can do now because we know we've got these five different spelling errors for the word "design", and we know we want to correct it you can see all of the suggestions underneath; we've got four different suggestions we know that we actually want it to be "designed" not "sign". I'm going to go ahead and click on the "design" button and you can see after I click that it immediately updated those five different text layers all in one go. I didn't need to do them individually, it just does them all in one go, and it's telling me that it's corrected "dsign" to "design"; you can see the the option that we picked has been displayed just in case you forgot what you clicked. If you still want to zoom into those layers to confirm that it's all good you can still open up that little icon and jump around to your different frames and just verify that the changes as you'd expect.

The other thing you can do if you did it by mistake or if you actually just wanted to see what the options were again while you've still got this window open you can click on the "Undo" button, next to the correction you can click on "Undo" and it's got a little five in there to indicate that it's going to undo five layers. If we click "Undo", that will revert it back to the original spelling and we could go ahead and change that to a different suggestion if we wanted. I can click on "sign" instead you can see it's updated in those places and then I can undo that again and then put it back to the correct one which I know is "design".

We've got that there, and for the other ones you can see here this one has only found one mistake which we can zoom in here. In this case, it's the word "life cycle" and it's suggesting that it should be two words or hyphenated, so if I want to hyphenate it I can just click that middle option there we go; it's been updated. Same with "multi press"; I can check out where that is, in this case, I might want to hyphenate that as well. "Product" has two d's in this case, so I'm going to change that, and let's just change it up here. "Thorough" has also been detected, so if I change that I can check out where that was, so that's updated there. We can see that I can change it to a different option, and again it's really about whatever suggestion you want to put in there is really up to you based on the context of the the copy.

That's basically how it works, it'll search all of your your Figma design for text layers with spelling errors and offer you spell checking suggestions. Just keep in mind that this is just a spell checker, and it doesn't take into account grammar or sentences or context or anything like that. It really is just a spell check feature for correcting individual words in your Figma text, so that's just something to be mindful of in case it doesn't pick up something which in the context of the sentence is wrong but in terms of the spelling it might still be right. Just be mindful of that, and other than that you can basically use it to correct a lot of spelling mistakes in Figma at scale, and you can see how quick it can be and how quick it works and because we've corrected these ones.

Now if I was to jump out of that and then spell check my Figma text layers again by clicking on the "Spell Check Layers", if I re-run that search, so I'm just going to click "Find Spelling Mistakes" one more time; this is going to spell check all the layers in Figma again, and you can see this time it's only found 16 mistakes, and that and that's because we already changed the errors in the previous round. Once you do that, as soon as you leave this modal, or as soon as you close the Figma plugin after you've made those corrections, the very next time you run the Figma plugin to spell check your Figma text, it will it will not take those into account anymore.

You'll lose the ability to undo those through the Figma plugin, but if you do want to undo them regardless you can just use the native undo functionality. If you do "CMD + Z" on the keyboard, or "CTRL + Z" if you're using Windows, you can still just undo those changes as you'd expect. For example, if I use the "Undo" button now, I'm just going to hit that a few times, and you can see there it has already updated all of our copy back to the incorrect spelling. Again, if I rerun the spell checker for the Figma text again, I'll spell check those layers now that I've undone the action, and click "Find Spelling Mistakes", you can see just like before it's found 21 mistakes again, and the previous correction that I just undid using the the native undo functionality is now back. We've got design back as an incorrect spelling, and once again I can just jump in and correct that to the other thing.

It's worth noting is I'm able to do this because I have the fonts installed. If you're a user of Figma, you'll know that the way that fonts work, if you don't have the fonts installed on your machine and you try to edit a text layer that's already been created, Figma won't let you do it; it'll tell you that you need to install the font. The same thing is true of the spell check feature in CopyDoc as well; if it does find a spelling error and you can see it show up on the list, if you don't have the font installed, CopyDoc will automatically flag that in the Figma plugin. You'll see a little message saying that the font isn't installed and it's going to prompt you to install that font, and the suggestion buttons will be disabled until you've actually installed that font. If you do run into that, it's completely normal, and that's that's how it's supposed to work. The Figma plugin will absolutely let you know if there's any text that is missing the font, so that's just something to be mindful of, too.

That's basically it; it's very simple, it's an extremely quick way of scanning your spelling errors in Figma and offering you suggestions for all those different words and bulk updating all those spelling errors across all of your Figma layers in one go. I hope that's been helpful for you if you've been wondering how to do spell checking in Figma, or if you've tried other spell check plugins and and they haven't quite been what you're looking for, then this is just a another option that you can try for for doing spell checking in Figma. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export comments from Figma files using CopyDoc
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-11-15T00:00:00.000Z
dateModified: 2020-11-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-comments-from-figma-files-using-copy-doc/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-comments-from-figma-files-using-copy-doc.md
---

# How to export comments from Figma files using CopyDoc

#### Video Transcript

Today I'm going to be showing you how to export your Figma comments to CSV and JSON files with image references that you can share with your team.

The first thing we need to do is go to the Figma Community, and if you just search for the word "CopyDoc", and under the "Plugins" tab you'll see a result called "CopyDoc" pop-up. If you haven't already installed it, you can click on the "Install" button on the right-hand side, and that will install it in Figma for you. Once it says "Installed", you can jump back into your project and we can get started.

Now that we've installed the Figma plugin, if you just right click anywhere on your page go down to "Plugins" and then click on "CopyDoc", that's just going to open the Figma plugin that we just installed. You can see there's a number of options here, but today in this tutorial we're just going to be focusing on the "Export Figma Comments" option, and as the subtitle says this is going to export all of your comments to CSV and JSON.

I've already got some comments set up in this file, I've just added a few as a bit of an example. You can see I've got one thread on the first frame and then I've got a second thread on one of the other frames here. On this frame there's a second thread which I've marked as resolved, so we're going to be exporting these comments out of Figma. Anyone else who doesn't have Figma is still able to look at them, or you can mark them off in a spreadsheet, or really do whatever you want with them outside of Figma.

To export these comments from Figma, all we need to do is jump back to that "Export Figma Comments" option and click on the button just next to it that says "Export Comments"; this will open up the "Export Figma Comments" panel, and there's a couple of fields in here that we'll have to fill out.

The very first one is just filling out the Figma page URL; this is a required field, but it's really easy to get. All you need to do is go up to the top toolbar in Figma where it's got the blue "Share" button and click on that, and you'll see here there's a shortcut that says "Copy link"; click on that "Copy link" shortcut, and it's telling us that the link's been copied to the clipboard. You can close off that settings panel now, and in the "Export Figma Comment" settings under "Figma Page URL" we're just going to paste that in, and you can see there it's copy pasted the file URL for this Figma project from the clipboard, and it's been put into the settings there. That's just going to tell the Figma plugin that this is the file that we want to use to export the comments from.

The second thing we'll need is your Figma personal access token. This is another required field, but again, it's very easy to generate. There's some instructions here but I'll show you how to do it just so you can visually see it. What we need to do, is go to our Figma profile "Settings" page, so I'll go to that now. I've just clicked on my Figma username, and then I've gone to the "Settings" tab, and underneath the "Settings" tab, if you scroll down you'll see a section called "Personal Access Tokens". What you want to do, is click on this link here that says "Create a new personal access token", so just click on that once and you'll be asked to enter a description; in this case, you can just put in the Figma plugin name, but you can make this whatever you want as long as you know what it's referencing, and just hit enter. Once you do that, you'll be shown this little notification which is telling us that we need to copy this token because the only chance we're going to be able to do that. If you just highlight that text, that whole token, and copy that to your clipboard; now if we go back to our page and in the "Figma Personal Access Token" field, I'm just going to click on that, and paste in that token. You can see there it has validated the button now, because the token has been pasted in.

The last option we have here is, it's automatically set to true, which is "Include Design References"; having this option selected will automatically generate references of the frames that contain comments, and it's going to include little pin markers that you can reference with your spreadsheet file; I'll show you what that looks like in just a second.

Now that we've got everything set up, all we need to do is finally click on the "Export Comments to CSV/JSON" button, so I'm going to do that now, and this is going to search our whole page for any comments and generate a CSV file and JSON file from those Figma comments. You can see here, it was very quick and it's telling us that our Figma comments are ready to download, so we can now click on the "Download Comments" button here I'm just going to save that to my desktop. You can see up here I've got a zip file which I can open up by double clicking, and if I open up the folder that's just been unzipped you can see here that we've got a few different files; we've got our CSV file, we've got our JSON file, and we've also got a folder called "frames".

If I open up the "frames" folder, and if I close off the Figma plugin, now you can see here that if I open up one of those images we've got one of our frames that has been exported with comments. That would be "Principle One" the "Principle One" frame, and you can see here there's a little pin that is showing up with the number two on it, and in our export here, we've also got a little number two pin on our export. If I go up to the other design, you can see we've got another pin with the number one which correlates to the pin in Figma also with a number one. This is exactly marking where those threads are showing up in Figma, just so you can actually have a visual reference of the comments in the CSV and JSON files without needing to be in the Figma file. This can be really handy for sending to clients or just referencing feedback without being in the Figma file.

To give you an idea of what these two files look like, I'm just going to double click on the CSV file, and in my case it's just going to open up the "Apple Numbers" program, it might open up "Microsoft Excel", or you could drag this into Google Sheets; it's really up to you. You can see here it's displaying all of my comments that we just saw from Figma. If I open up the Figma comments again you can see in our CSV file that we've got a few things. I might just zoom in, so you can see it a bit more clearly. It's telling us what frame the comment is on; for example we've got the "Intro" frame over here, so we've got "Intro" frame and then it's telling us what number the comment thread is. We've got comment thread number one, and then we've got the different comments and when they were created, so you can see here this one was created at 47 seconds after that time, and then we've got 54 seconds, this one was created just after. It's in the order of of those comments, and the other thread that we've got is the number two thread.

If I jump back to that one over here as I said this one's actually been marked as resolved and you can see here that it's telling me what time that thread was actually marked resolved. You can see not only was it resolved, but you can tell what time it was actually resolved, and on what day. Once again, we've got our messages from the thread and the comment thread pointing to number two, so for example, if I opened up the image that we had from the frames; we've got the frames here, so I could open up the corresponding frame. For example, "Principle One", I can open that up and I can see here comment thread number two is here; I know exactly what part of the files being referenced from the CSV just by correlating the comment thread number with the frame and the comment thread number and the frame. These these two things will always match up, so that's just a really nice visual reference for showing you your Figma comments that were exported to the CSV.

The other file that we have is the JSON file. I'll just open that one up, too; this is our JSON file, and it has the exact same data as the CSV file except we're using an array of JSON objects. This can be helpful if you're a developer, if you're working with developers it's most likely that they'll prefer to have data exported in a JSON format because it's much easier for them to work with as opposed to a CSV. CSV files can be really good for sending around to internal stakeholders, or sending to clients, or just exporting it for yourself to sort of check off to-do lists; that can be really handy, but for developers and people who want something a little bit more technical, a JSON file might be exactly what you're looking for. Once again, this is going to export all of the comments all of the dates, the messages, the usernames, the comment threads, the frame, all of that data is being exported from Figma into the JSON file.

Those are the two files that you're going to get along with the images. That's basically it; it will automatically export every single frame, so you don't have to worry about checking which frames and and which pieces of the design need to be exported, it will just grab every single comment whether it's resolved or not, and you can basically just filter down that information however you choose in the CSV itself. You'll basically be able to export all the comments in bulk and and that should be way easier than having to sort of manage each individual comment or each individual frame.

I hope that's been helpful if you've been looking for a way to export Figma comments to CSV or export Figma comments to JSON, this is the the easiest way and the quickest way to do it. I hope you have some success in your team if you decide to give it a go, and we'll be back very soon with more Figma tutorials just like this one. Thanks again for watching.

---

---
type: tutorial
title: How to password protect Figma prototypes using Crypto
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-11-13T00:00:00.000Z
dateModified: 2020-11-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-password-protect-figma-prototypes-using-crypto/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-password-protect-figma-prototypes-using-crypto.md
---

# How to password protect Figma prototypes using Crypto

#### Video Transcript

Today, I'm going to be showing you how to generate password protected embeds for your Figma prototypes using the Crypto Figma plugin.

To do that, we first need to install the Figma plugin by going up to the top left hand corner, clicking on the Figma icon, and heading over to the Community. In the search bar, if you type the keyword "Crypto", and under the "Plugins" tab you'll see "Crypto Password Protection" come up; and all you need to do is click on the "Install" button on the right hand side and you'll be ready to go.

Once you've done that, you can jump back into your Figma project. Mine already has some prototyping links; if yours doesn't have prototyping links, you might want to go ahead and do that first and create some prototyping in your design.

Then we can go ahead and open up the Crypto Figma plugin we just installed; if you right-click anywhere, go down to "Plugins" and then go down to "Crypto Password Protection", if you click on that it will load up the Figma plugin that we just installed a moment ago. You can see up here we've got a little drop down box which is currently set to "Figma Prototype"; if you open up this Figma plugin for the very first time it might default to "Figma Designs" as the option; this option allows you to upload static frames or static designs to the Crypto web app (which I covered in another Figma tutorial), but today I'm going to be focusing on the other option, which is for password protecting Figma prototype embeds.

If you click on the select box and click on "Figma Prototype (Live Embed)", that option will switch the Figma plugin to show you all of the frames that have prototype interactions on them and gives you a bit of an idea of what's going to be uploaded to the password protected URL. The first thing we need to do is click on the "Share Prototype URL" button, and that's going to bring up some settings down here.

The first thing you'll need to do here is get this URL for your project and by default this URL is empty, so there's there's nothing in there when you open up this file for the first time. You can see here it's got some instructions on how to get that URL, so all we need to do is click on the "Share" button in the Figma toolbar up on the right hand side here, this little blue "Share" button; if you click on that, that will bring up this little pop-up modal. What you need to do is change this little setting where it says "Only people invited to this file" to "Anyone with the link"; if you click on "Anyone with the link", that will change it to show that anyone with the link to the Figma file can view it.

Then we want to click on "Copy link"; there's this little icon down here, "Copy link" and that will copy the link to the clipboard, which we can then paste into our Crypto Figma plugin. I've just clicked that, copied the link, and now I'm going back into the Figma plugin settings and pasting it; you can see here I've just pasted the Figma file URL. This file URL links to the project that we're currently in and the page that we're currently on, I've just pasted that in there and now we've got a couple of options down here.

These settings will set the Figma prototype options, so we can change the scaling of the prototype; we can do "100% Full Size", "Fit", "Fill" and "Scale Down". I'm just going to use "Scale Down", and you'll see we'll be able to change this in the prototype later anyway, but this is just setting the default. The other option that we have is to "Show the hotspot hints on click"; if you turn this off or disable it, it won't show any of the hints if a user clicks their mouse on any of the screens in your Figma prototype, so I'm just going to leave that turned on, because I do want to show hotspot hints when someone clicks on the designs.

The last thing we need to do is click on this button, but it's just giving us a little warning letting us know that clicking the button is going to embed our live Figma prototype on a password protected URL, however the embed behind this link is technically still viewable by anyone who happens to have that link, so if you've shared that link with someone and you've set it to "Anyone can view", they will be able to view that link. but if you're sharing the Crypto URL that's going to be generated, then they'll require a password to view that URL. It's just a bit of a flag, and if you need more help with this we have a documentation link here which will go into a bit more detail about what this means.

Now that we're done we can click on the "Create Prototype URL" button; I'm just going to click on that, and this is now generating a secure prototype URL for us which we're going to get now. We've got this confirmation screen telling us that the secure link is ready, and we can copy this secure prototype URL and the password that it generated for us. I'm just going to copy the password first; so if I copy that, that will copy the password to my clipboard and then I can go ahead and click on the secure URL and open up my browser.

Now that the page is loaded, I can go down to the password field and paste in the password that I just copied from the Figma plugin and click "Login". Once this loads, we'll see our Figma prototype embed show up behind this password protected link. You can see here I've got my Figma prototype, and because we enabled the hotspots option, if I click somewhere I can actually see that show up and navigate through my design. We've got all our interactions showing up as you'd expect and it's looking really good.

As I mentioned before, there's a way to change the zoom setting, so if you hover up on this little keyboard icon up here it will reveal the Figma embed shortcuts for viewing the Figma prototype. We've got "change size", so you can use the "Z" key on your keyboard to change the scale, so if I click on the "Z" key you can see that the zoom is going to change based on whatever I set that to. That's that's how that works, and the other shortcuts we have are resetting the Figma prototype, so I can push the "R" key to reset the Figma prototype if I want to bring that back to the start, and then I can navigate between screens by using the "Left" and "Right" keys as well. If I just want to use keyboard navigation to jump through screens I can do that, too.

That's how that works there, and the last thing we can do is toggle full screen, so if we push the "F" key, that's going to bring us into full screen and we can use the Figma prototype in full screen mode; and then clicking the "Esc" key on your keyboard, we'll scale that back down to the windowed view.

Finally, if you want to get rid of this little toolbar, you can click on the little "hide" icon in the top right, and that will remove that toolbar entirely. You can get that back just by going back up to the right hand corner and clicking on that little "Eye" button just like that, so that's how that works.

We've got our Figma prototype in this little embed window and that's all well and good, but if we want to delete that URL now there's a couple of ways we can do that. If we jump back into Figma and exit the Crypto Figma plugin, and then let's just re-run the Crypto Figma plugin; I can just go to "Plugins", go back down to "Crypto" and open that back up if we re-run the Figma plugin, and then click on the "Share Prototype URL" button again, you can see here that it has now remembered our URL and our password that we just uploaded; if you want to grab those details again without re-uploading the whole Figma prototype link, you can just jump back in here and copy those to clipboard and share them with anyone who you want to be using that URL.

If you no longer want that URL, you can click on this little toggle here and that just is going to tell the Figma plugin that you'd like to go about deleting that prototype URL, and again it's just flagging this little message to let you know that while it will delete the product the prototype password protected URL on the Crypto domain, it's not going to affect the Figma file itself; because we already clicked "Share" and changed this setting over here to say that "anyone with the Figma link" can use the file, if we want to remove that functionality in Figma itself we can actually change that to "only people invited to this file", and if I click on that and then jump back to my web page, you can see here that it's telling us that the Figma prototype is not found; it's saying that if the file doesn't exist or we don't have permission to view it, and that's because we just changed this little setting in Figma back to saying that only people invited to this file can view it. Again, that's just a reminder to say that this this URL here is password protected, but it's password protecting the embed that's sitting behind it from Figma; as long as this is not set to "anyone with the link" and it's set to "only people invited to the file", then you know no one's going to be able to actually look at that link. That's one way of removing access, but we can also just completely remove that link entirely, and I can do that by clicking on the "Delete Prototype URL" in the Figma plugin, so I'll do that now, it's deleting the URL and now the URL has been successfully deleted.

If I jump back into the browser, I'm just going to refresh the page, and you can see here it's telling us that that design actually wasn't found, and the URL might be wrong or it's been deleted by the owner; we know that we've just deleted it, which means that anyone who had that URL and password before will no longer be able to look at that link and will no longer be able to look at your Figma prototype.

That's really all you need to know for creating and deleting a password protected URL for Figma prototype embeds; and again I would urge you to read through the documentation if you're unsure of anything; you'll be able to get to it just by clicking on the link in the upload screen over here, and that should clarify any questions you might have around Figma permissions, and it's just a bit of an overview of how that actually works behind the scenes.

I hope that's been helpful if you've been wondering how to password protect your Figma prototype URLs, and you can do it using the Crypto Password Protection Figma plugin right now; so feel free to install it in Figma to give it a try and see if it works for your workflow and your team. Until next time, thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to record your Figma prototype to a video file using Crypto
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-11-12T00:00:00.000Z
dateModified: 2020-11-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-record-your-figma-prototype-to-a-video-file-using-crypto/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-record-your-figma-prototype-to-a-video-file-using-crypto.md
---

# How to record your Figma prototype to a video file using Crypto

#### Video Transcript

Today, I'm going to be showing you how to record video files of your Figma prototype interactions using the Crypto Figma plugin.

The first thing you need to do is jump into the Figma "Community" page by going to the top left corner of Figma, clicking on the Figma icon, and just searching for the word "crypto" under the community "Plugins" search and you'll see "Crypto Password Protection" pop up as a result. If you haven't already done so, you can just click on the "Install" button on the right hand side, and then you'll be ready to go. Once you've done that you can jump back into your project.

If you if you haven't already used the Crypto Figma plugin before, you can use it by right-clicking anywhere, going down to "Plugins", and then clicking on "Crypto Password Protection", and that will open up the Figma plugin that we just installed. I've made a separate Figma tutorial video showing you how to upload, manage and delete your prototyping URL, so I'm not going to cover that in this Figma tutorial, I'm just going to be showing you how to record a video of the Figma prototype itself. Because I've already used the Crypto Figma plugin before in this file, I've already got the "Figma Prototype (Live Embed)" option selected I can click on "Share Prototype URL", and I've already got a URL set up.

As I said, if you need to figure out how to do this, we do have another Figma tutorial on this exact step which will show you how to get that URL and create this secure password for your Figma prototype, but because I've already generated this I'm just going to click on the "copy password" button; this will copy the password for my URL to the clipboard and then I can just click on the secure URL to open that up in a web browser, so I'll do that now.

I'm just going to paste my password into the password text field and then click on "Login", and this is going to load up the Figma prototype embed that I've already set up using the Crypto Figma plugin. Now our Figma prototype is loaded up in the browser under the Figmatic domain, and we can see here that the Figma prototype is working as we'd expect; we can interact with it and do everything that we had linked up in our Figma design.

To take a recording of this for playing back later, we can just go up to the right hand side and you'll see up in the toolbar there's a little video camera icon; if you click on that video camera icon you'll get a prompt from your web browser to give permission to capture the contents of your screen. Typically what you would do is go over to the "Tab" option, you could technically record the whole screen, but in this case we just want to record the Figma prototype itself, so I'm going to go over to the Chrome tab, click on "Design Prototype", which is the Crypto URL and I'm just going to click "Share" and that has now given permission for the browser to record this this window. You can see up here it's got a little red recording icon that's telling you that it has permission to record the screen, and it is currently recording the screen now.

We've got a little "Stop" button here, which we can click when we want to stop it, but as of now it's recording the screen; everything that I'm doing right now and interacting with, including the audio, it's capturing the audio as well, in case I'm narrating what I'm doing, or if I'm a confused during a user testing session or something like that, the audio can be handy. It's basically recording all my interactions right now, and whenever I'm finished I can just go ahead and click on the "Stop" button up here. If I click "Stop", you can see here it has automatically downloaded a video file in my browser and that video file contains all the interactions we were just doing on the page.]

I can go ahead and open that up. The quickest way to preview that video file is just to drag and drop the file into the browser window itself, so I'm just going to do that now; I'm going to drag it into the toolbar or the URL bar in Chrome and I'm just going to hit "Enter". That has loaded up the Figma prototype video file, and if I just click on the "Play" button, you can see here my mouse is independent of the mouse in the video; we've got this mouse this cursor kind of rolling around in the video there, that was me interacting with the screen while I was recording, and you can see now it's playing back the recording of me running through my Figma prototype on the web page. You can see my mouse here, and you can see the mouse in the video, so that's just playing back the video recording that we just took a moment ago; and you can re-watch that based on a user testing session or if you just want to record a Figma prototype to share with your team or share a video file over Slack, this is the way that you can do it.

You can see there, it has just finished the playback; it was just a 45 second recording and that's that's all yours now. You've got the video file that's automatically downloaded, and you can go ahead and convert that to a different format if you want.

At the moment, it's saved as a WebM file, and WebM is a video format that allows you to view video files on the web; it's a web specific format but if you needed to convert it to a different file type you can use some software video conversion software; if you just google "WebM to MP4" or "WebM to" whatever other video format you need, you'll be able to find that pretty easily; so that that's something that you can do if you do need a different format.

The other thing to note is that while you're recording the page; if we go back to our Figma prototype embed, if you are recording the video and you forget to click the "Stop" button or you accidentally close the tab, it will automatically save the video file for you; it's just a little bit of a check, so if I click on the video share my tab and click "Share", if I actually forget to click "Stop" and accidentally close that page, it will still download the video file for me, so you don't have to worry about losing that; it will automatically save it for you in case you forgot to stop the video for whatever reason.

That's all I have for you today; it's a pretty quick tutorial just to show you how to record your Figma prototypes to a video file using the Crypto Figma plugin. You could do this with screen capture software, but if you're already using the Crypto Figma plugin or if you just want a a really seamless way that doesn't require any additional software, this is a really simple way to go about recording your Figma prototype interactions to a video file that you can share.

I hope you've learned something from this Figma tutorial, and you can give it a go in your own workflow with your own user testing sessions and all that sort of thing. I hope you've enjoyed watching, and best of luck using the Figma plugin; stay tuned for more Figma tutorials just like this one, as we'll be dropping a few more very shortly. Stay tuned, and thanks again.

---

---
type: tutorial
title: How to export AVIF images from Figma using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-09-06T00:00:00.000Z
dateModified: 2020-09-06T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-avif-images-from-figma-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-avif-images-from-figma-using-tiny-image.md
---

# How to export AVIF images from Figma using TinyImage

#### Video Transcript

Today I'm going to be showing you how to export AVIF images from Figma using the TinyImage Figma plugin.

The first thing we need to do, if you haven't already done so, is just go up to the top left corner of your Figma application and click on the little Figma icon; and if you go down to "Community" and just type in the search word "tinyimage", you'll see a Figma plugin called "TinyImage Compressor" pop right up. If you haven't already clicked it, there'll be an "Install" button over here on the right hand side, just click on that and it'll change to look like mine with a little checkbox; once you see that you're ready to go.

Now we can jump back into our Figma file; I'm just using a few images that I took from Unsplash, but you can use any layers in your file for this Figma to AVIF example. If you right click anywhere, go down to "Plugins", and then just click on "TinyImage Compressor", that will fire up the Figma plugin that we just installed a moment ago. The first thing to note is this Figma plugin will basically look for any images or layers in your Figma file with export settings, and what I mean by that is if you click on a layer and go over to the right hand side of the Figma layout, you'll see a little column called "Export", and you can see on mine I've got a couple of export settings already set on this image. If you don't have an export setting set on your layer, the TinyImage Figma plugin won't pick it up, so just be sure to add any export settings to your layers and that's what TinyImage is going to use to determine what formats and what sizes you want to export per image. If I just deselect that image, you can see all of these other layers in my file have export settings on them. I've already gone through and added those but you can do that yourself depending on what images you want to export.

Now that I've got that set up, I'm just going to deselect all of my images because I don't want to export any SVGs today, I just want to export my photos in Figma from JPG to AVIF. To do that, we just have to click on this little settings icon, you'll see it in the little toolbar here, if you click on that, there's an option at the top called "Image Conversion". At the moment we don't have any image conversion selected, but if you click on that drop down you'll see a few options: we've got "Convert JPG and PNG to WebP", "Convert JPG to AVIF" and "Cconvert JPG to Progressive JPEG". Today we're just going to be looking at this middle option, which is "Convert JPG to AVIF". I'm going to click on that, and now that has selected the image conversion option to "Convert JPG to AVIF" from Figma.

If I just close off the settings panel now, you can see here if I enable a couple of images that I want to compress you can see that the JPG setting has now changed, and it has brackets next to it saying "AVIF", so that's just going to indicate to me that I've selected the AVIF conversion option and any JPG layers or any layers that you've got export settings with the JPG format set are now going to be converted from JPG to the AVIF image format. I'm just going to show you what that looks like by converting the three images I've got set up here. Of course, you can change the quality, so you can change the quality slider to be whatever you want, and you can also of course add in overrides here, so if you wanted this to have much more compression; if we wanted this one to be at "30" quality and leave the other ones at "75", then we can just put that in there and that will override that particular image.

Now that I've got everything set up to export AVIF from Figma, I'm just going to click on the "Compress Selected" button in the top toolbar of TinyImage, and this is going to go through my three images that I've selected and convert or compress our images from Figma to AVIF. The AVIF image format is a very new format, it's actually only supported by Chrome and Firefox I believe at the moment, but this is a format that is really, really good as far as image compression goes, and really good at maintaining quality for lower file sizes; I believe it's about 50% smaller than JPG, and roughly 20% smaller than WebP.

Okay, it has finished converting all of our images in Figma from JPG to AVIF for us and compressing them. I'm just going to save it to my desktop as a zip file, and just briefly I'll go over the savings that we've got here; you can see that the two images that we set at "75" quality, we've saved 39% on those and the one that we put down all the way down to "30", we've actually saved 96% file size savings on that one, so that's a total of 54% savings across the board.

Now I'm just going to go to my desktop, I'm going to unzip the file that we just exported, and you can see here we've got our AVIF files. Now, Mac doesn't have a in-built AVIF viewer, so if you do want to see what this looks like, the quickest way is probably just to drag it into your web browser, or if you're building a website or using this in production, you could just drop this into your code base and hook them up to an image tag, but in my case I'm just going to preview it in Chrome; I'll do that now. I've just dragged that image into Chrome, so that's the first image that we exported, that's the "Kyoto" AVIF image from Figma, I've also got the "Matcha" AVIF image from Figma, which has also been exported, and then we've got the "Mount Fuji" AVIF image as well; that was the one that we exported at quality "30".

So, you can see there it's just reduced that file size like crazy; that's a 69 kilobyte file, and as you can see here the image quality is actually still relatively good; you can't really tell any pixelation or blurriness, just at a glance anyway. That is a really good looking image for something that is 69 kilobytes; the same with these ones, these look really good considering that they've been compressed down to 1.4 megabytes. Okay, so that's what they all look like, and if we go back to Figma, we can just close our Figma plugin now, and that's all there is to it; you just have to run the TinyImage Figma plugin, make sure you've got that conversion setting selected in the Figma plugin settings to "Convert JPG to AVIF" image files from Figma, and you'll be ready to go.

You can use these AVIF images exported from Figma on your website, you can use them for your web applications, or anything like that. I hope this has been a helpful tutorial if you've been wondering how to export your images from Figma to AVIF, or if you've only just discovered the AVIF image format in this Figma tutorial, then I hope you can go ahead and try it out in your own projects and on your own production sites. Hopefully it all works out for you, and thank you again as always for watching. We'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export animated banners from Figma to MP4 Videos using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-08-29T00:00:00.000Z
dateModified: 2020-08-29T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-banners-from-figma-to-m-p4-videos-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-banners-from-figma-to-m-p4-videos-using-bannerify.md
---

# How to export animated banners from Figma to MP4 Videos using Bannerify

#### Video Transcript

Today I'm going to be showing you how to export animated banners from Figma to MP4 video files automatically with one click.

We're going to be doing that by using a Figma plugin called Bannerify. If you haven't already done so, you can install this Figma plugin by going to the top left hand side of the app, clicking on the little Figma icon, and if you go down to "Community" and search for "Bannerify"; if you click on the "Plugins" tab you'll see a result called "Bannerify Banner Ad Studio" pop-up; then you just want to go over to the right hand side click on the little "Install" button, and once it looks like mine, with the little check mark, then you're ready to go, and we can jump back into our Figma file.

I'm just going to be using this banner set as an example to show you what it looks like. The first step is just to right click anywhere on the page, go down to "Plugins" and click on "Bannerify Banner Ad Studio", and that's just going to fire up the Figma plugin we just installed. What this does is it processes every parent level frame as a banner and it interprets those into the user interface, so every layer inside of the frame becomes an element in the banner and those can be animated individually, and looped, and have timings put on them. Today I'm not going to be showing you how to go into the animation settings and apply animations and things like that. I do have another tutorial that covers that in depth; if you check out that video on our YouTube channel you'll be able to find it, and it goes into depth about how to apply animations and do all that sort of stuff, but today I'm just going to assume that you've already got your animations set up the way you want, as I do in my file here; and all I'm going to be doing today is showing you how to export these animated banners from Figma to MP4 video files from our designs.

This is a brand new feature and this is the first tutorial that I've made about it, and I just want to show you how to use it. If you've got your animation set up the way you want, all you need to do is click on "Export to GIF/Video" up in the top header panel of the Bannerify Figma plugin here. If you click on that, you'll get a little panel pop out with a few options; and the first one we can ignore because it's related to GIFs, I have a separate tutorial on GIFs if you're interested in seeing what that looks like to export, but then these two sections down here are what we're interested in; the first option is the "Frames Per Second", so we can actually control how many frames per second our MP4 video exports are going to be exported at. By default, that's just set to 24 frames a second, that's like a fairly smooth animation. but if you really want an ultra smooth animation you can go up to 30, or if you want to have less frames and have a less smooth animations, you can do 18, 12, or 6 as well; the higher the frame rate the smoother the animation will be, but it will also take longer to export, and the file sizes will be higher with more frames per second. Having said that, I'm still going to use 24 frames per second, which is a fairly smooth option and it's just letting us know that our timeline is 5 seconds long, so exporting it at 24 frames a second will render it out at 120 frames per banner in this case; it's just a heads up of how many frames you're going to be exporting per banner.

Then finally, we've got an image compression setting; if we do want to change the quality of the images or the the MP4 videos that are being exported from Figma, we can just drag that up and down; and the higher the number the better the quality will be, but also the larger the file size will be. The very last option we have is just to enable a "Dark Mode" option for the HTML preview page that gets exported; when you do export your MP4 video files from Figma, this automatically generates a preview page which which contains all the videos on a preview page that you can send to clients, and we'll see what that looks like in a second. In this case I'm just going to leave the dark mode option turned off, but you can use that if you if you want to.

At the bottom here we've just got three options; we've got "Export to WebM", which is another video format, we've got "Export to GIF", and finally we've got "Export to MP4", which is the one we want to look at today. All I need to do is click on the "Export to MP4" button, and what this is going to do is it's going to go through every single banner in our banner set, and it's going to essentially render those images or those frames for each animation into video files, and then it's going to encode them on the fly to MP4 videos, and in this case the MP4 video files that are going to be generated from Figma are encoded with the h.264 codec; if that's of interest to you that is the codec that's being used, and that's a really good compression algorithm; the MP4 files that you're going to get from Bannerify are going to be really size efficient, they're going to be a really good file size, certainly compared to GIFs, which can be huge, because GIFs just don't compress very well, and even compared to WebM videos which Bannerify also supports; WebM videos tend to be much larger in file size, too. So, MP4 videos can be a really good option if you do want really good compression but also while maintaining really good video quality.

I'm just going to let this continue to export all of our banners and I might just fast forward this bit, so you don't have to watch it all; but we're just going to let it go through all of the 11 banners, and once we're done it's going to give us a zip file with all our videos.

Okay, it's just finished exporting all of our MP4 video files from Figma and it has given us a little download prompt, and I'm just going to save this to my desktop with the default file name and click "Save". If I jump to my desktop I can now unzip this file, it's a 1.3 megabyte file, I'll unzip that, and we can see here it's exported all of our MP4 video files; we've got all the MP4 files, we can we can preview those individually, so that's looking really good, but rather than doing it one at a time I can actually just open this up in Chrome using this "index.html" file and look at them all at once. I'll just do that now; okay, so that's all of our banners playing at the exact same time, it's just going to keep looping those, they're just videos, so if I enable the controls here you can see that it's playing back in the browser and the preview page has a loop setting on the video tag. You can you can use these videos on your own website, or upload them to Instagram, or upload them to whatever you need to upload them for in your particular case; but these are just plain MP4 video files using a video tag on this particular page. This is a page that you could send to your clients or sent to your team members to give them a really quick and easy overview of all of your different banner sizes at the exact same time, previewing those MP4 video files that we've just exported from our Figma banner designs.

That's what it looks like. It's really simple, it's a completely automated process; you don't need to do any manual video editing, any manual video encoding, Bannerify will take care of all of that for you, and export those MP4 files from Figma really quickly and easily just as we've had a look at now in this Figma tutorial. I'm just going to close that off, and close off the Figma plugin.That's all I wanted to show you today; it's a brand new feature in Bannerify that has been highly requested, so I'm really glad that it could be added to the Figma plugin, and if you've had a look at our other tutorials, you know that you can export to HTML as well; there's a whole bunch of formats that Bannerify supports, whether that be banner ad networks, or HTML/CSS or Bannerify to HTML Canvas or Bannerify to GSAP; it supports a whole bunch of different formats. You can dig into our other Figma tutorials, or better yet just download the Bannerify Figma plugin and install it, and you can have a go yourself; whether you want to export your banners to MP4, GIF or WebM; whatever you need to export, Bannerify will have you covered.

I hope you enjoyed that Figma tutorial, and if you've been looking for a way to export Figma to MP4 videos from your banner designs, or banner animations that you've got setup in Figma using Bannerify, you can now export those to MP4 videos directly from Figma with one click. Until next time, thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to batch crop and resize images from Figma using HyperCrop
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-08-28T00:00:00.000Z
dateModified: 2020-08-28T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-batch-crop-and-resize-images-from-figma-using-hyper-crop/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-batch-crop-and-resize-images-from-figma-using-hyper-crop.md
---

# How to batch crop and resize images from Figma using HyperCrop

#### Video Transcript

Today I'm going to be showing you how to batch crop and resize your images from Figma out to multiple different sizes, based on whatever dimensions you need.

To do this, we're going to install a Figma plugin called "HyperCrop". If you haven't already done that, you can go to the top left corner of the Figma app, click on the little Figma icon, and just in the search bar, if you go down to "Community", type in the word "HyperCrop", and if you put that in the search bar you'll see a result pop-up called "HyperCrop Batch Image Resizer", and if you haven't already installed it there'll be a little "Install" button on the right-hand side over here you just click on "Install", and it'll change to look like mine with the little check mark, and once it looks like that, then you're ready to go.

Now I'm just going to jump back into my project, I've just got a bunch of different images here, and I'm going to be using these as an example to show you what HyperCrop can do. If you just right click anywhere on your page, go down to "Plugins", and then go down to "HyperCrop Batch Image Resizer" and click on that, this is going to load up the Figma plugin that we just installed. The first thing to know is just to go over the interface. What we can see on the right hand side here is a list of all of the images in our Figma file that have export settings, and what I mean by that is if I click on any of these images, you can see over in the right hand side under the "Export" column heading, you can see that I've got a JPG export setting applied to this image, and all of my other images also have at least one export setting on them too, and if I were to remove that, so if I remove that export setting and then refresh my layers, you'll see here that I'll get a message saying that I don't have any selected layers which contain export settings; and it's just telling me if I want this image to be exported, I have to add at least one export setting. You can see here now I've only got nine images selected because I've just removed that export setting, but if I just add that back again; just click on the "Plus" icon, and this can be set to anything, it's just to tell HyperCrop that the images that you want to export have some sort of export setting on them, because if you didn't have that, it would basically try and export every single image in your document and that would just be kind of crazy, so that's the way that you can tell HyperCrop which images you want to actually be cropping, it's just by clicking on them and clicking on the little export setting "Plus" button; and if you click refresh in the Figma plugin, that'll make all of the images you've selected pop right up.

Now we've got all of our images in here, you can see that I can select these based on the check boxes. If I want to just target a few of them I can uncheck them, I can use this little title up here to bulk select and unselect them, if you've got a lot of images that can be really helpful, but essentially the whole right hand side here of the HyperCrop Figma plugin is really just an overview of all the images that you're going to be cropping. We'll get into these settings in a moment, but I'm just going to go through the left hand side as well. On the left hand side, that is just dedicated to sizes; if you think of the right hand side as being the images that you're going to crop, the left hand side is dedicated to all of the sizes that you want to crop each of those images to. You can see over here on the left we've got this little "Presets" panel, and if I scroll down you can see that there's quite a lot of presets in here, we've got a lot of popular social networks like: YouTube, Twitter, Twitch, we've got Tablets, we've got Snapchat, Screens, Pinterest, Phones, Paper, LinkedIn, Instagram, Google Ads and Facebook; these are all baked into the Figma plugin to give you really quick presets for very popular sizes and very popular platforms. For example, if I wanted to add this little Facebook "Carousel Ad" size and the Facebook "Profile" size, I can just click on those check boxes and you can see here it's actually just populated those into this column; this column in the middle of the two left and right sides, this column here is going to show you all of the sizes that HyperCrop is going to batch export your images to.

If I just uncheck those again, you can see here when it's empty it's telling us that we need to add our first crop size either from the presets on the left as we just did, or we also have the option to create a new custom size using the inputs above; if you see in the top left header of the HyperCrop Figma plugin, here we've got two text fields; we've got a "Crop Width" and a "Crop Height" text field. If I wanted to add a custom size that doesn't fit into any of these presets, I can do that easily just by typing in values up here, so if I type in "400" and then I can do "400" again, and then click on "Add Custom Crop Size", that now adds a custom crop size to my presets panel and also automatically adds it to my output sizes. If I uncheck that, that'll remove it, if I check it that'll leave it in there, and I can also remove it from my list entirely if I don't want it anymore; I can just click on the little "Trashcan" icon and that will remove it.

The other thing I can do is add auto sizes. If I wanted to have "400" as the crop width, if I don't populate the crop height, you can see here it says "Auto", if I click on that, it's saying it's going to do "400" width by "Automatic" height, so whatever the size of the images are, it's going to automatically determine what the height should be, but it's always going to crop the width to be "400", so I can do that in reverse too; if I just fill out the height; if I do "460" height and then click on "Add Custom Crop Size" without any width, the same thing happens; it's going to give me the automatic value to the opposite one that I that I put in there. I can also add just both of the sizes of course, as I did before, and that will that will work as well. Now we've got a few different custom sizes, so you can uncheck all of these and check them and combine them and do whatever you want; you can add as many sizes as you like. I'm just going to leave a couple of those checked for now, I might also add something from Facebook; if I add a "Carousel Ad" and then if I scroll down a bit, maybe I also want something from Twitter; maybe I want to have a Twitter "Profile Picture", and maybe I also want to have a "Website Card" from Twitter. Now I've just checked a few different options, so these are the sizes that are going to be output in this little column here, and if I go back to my right hand side, as I said before, this is going to select all of the images that we now want to resize to those sizes, so it's going to crop and resize multiple images to multiple sizes at once. This isn't kind of like Photoshop where you set up batch actions to do a whole bunch of images to one size, this does multiples, so it does multiple images to multiple sizes at the same time.

To just give you an idea of what that looks like, I'll just uncheck all of the images and if I select a few; if I select the little ice cream image, I'll select the the guy with sunglasses, and maybe just this kind of backdrop scenic sort of looking photo. Now you can see up here as I check those, the number in the top right is incrementing; it's multiplying the number of images by the number of sizes, and just to give you a sense of what that looks like I'm just going to do an example with these. You can see here the images have these little options on them, so I can determine where the crop anchor is going to happen, I can do a top left anchor so it'll crop it and make sure it's keeping the top left in check; I can also just center crop that; you can play around with those. The other cool thing is we have these other options down here, so for each image there's also a checkbox called "Content Aware", and content aware will essentially use a smart cropping algorithm to determine where the most interesting parts of the images are and it'll crop it to that area. Once you've enabled content aware, there's also a secondary option to detect faces; in this instance I do have a face in my photo, so I'm going to check that option, and again, that's going to add a secondary algorithm to determine where the faces are in that photo, and it's going to do some smart cropping to make sure the face is always prioritized. For this particular image I'm not going to turn any content aware on because it's a very simple center sort of crop, one but this one I'll add content aware to as well, just so it has a nice little cropping background and I don't need faces, because it doesn't have any people in it.

Now that we've set all that up, all we need to do is click on this little "Batch Crop" button in the top right hand corner. When I open that up there's only a few options to choose from; we can either export JPGs, or PNGs if you need transparency; I'm just going to use JPGs. We can choose what the image quality is going to be like; by default it's just set to 80. I can obviously drag that up and down; in this case I might do it to 90. Then there's one last option for image fills, which means if you select "Contain", it's going to not cut off any of the image, it'll just put a black background basically wherever the crop doesn't fit; but in my case I'm going to use "Cover", which just makes sure the image always fills up the the size.

Then down here, we've got the "File Name Format", and by default this will automatically export into folders, and it's going to do the folder name, so it might be "Facebook" or "Custom" or "Instagram"; whatever the collection is, it'll do that as the parent folder, and then it will put the file name as well as the width and height of the image into the file name. You can see an example of what that looks like down here, but you can completely customize that, too. If you wanted to add a folder, let's say "collection" and then you add a slash to make a subfolder, you could then do the "name"; then you could have the name and then do another slash and then that would make another subfolder, and then you could do the "width" and "height". You could do "width" and then "x" and then "height", and that would basically give you that custom folder structure, but you can you can name that however you want; you can put normal text in there, so you could do "crop" as a prefix, and you can really customize that to whatever you need. For today, I'm just going to leave it as the default, so we'll see what that looks like in a second, but just be mindful that you can customize that as you need to.

At last, we can click on the button "Crop and Export Images", so I'm going to click on that now, and this is basically going to go through all of the images that we selected. We selected three images, and we've selected five different sizes, so it's going to resize each of those images into five different sizes, and you can see it down here that it's processing them, going through each of those images, cropping them, resizing them and you can see here it's detecting faces for the last image that we selected, and it's telling us that it's smart cropping and resizing that one as well. We're almost done, it's just doing the last couple of images now, and once it's finished it's going to give us a prompt to save our zip file, so I'm just going to save that to my desktop, click "Save", and if we unzip that, you can see here we've got a folder structure that we expected, and if I open that up you can see that I've got my cropped images resized. Those are the those are the ones we did for Facebook, we only selected one size from Facebook, the "Carousel Ad", if we go to Twitter, we selected two different sizes, we did "Profile" and "Website Card" for each, so that's the profile and website card, and then if we go back to "Custom", these are the ones that I set up myself; it was "400" by "auto", that was "auto" by "460", and then we've got "400" by "auto", "auto" by "460"; so, those have been cropped based on my custom sizes, too. That's an example of what a batch crop process looks like. I'm just going to restart the Figma plugin, so if you close off the Figma plugin and on the right hand side under the "Plugin" heading, if you just click on the "HyperCrop" icon, that will reopen the Figma plugin really quickly, so you don't have to right click and go into all that stuff.

I just want to show you a few other things that we can do as well. You'll notice over here we've got this secondary button called "Crop Manually", and I didn't go into that before, but I can show you what that looks like now. If I just click on "Crop Manually" to any of my images, what this does is it brings up a manual cropping interface, and you can see here that it's got all of the controls that you'd expect. I can move that around, I can change the aspect ratio really easily, I can change it to a portrait aspect ratio, I can change it to landscape, I can change it to square, or I can just make it freeform. I can also zoom in and out with my mouse my scroll wheel, that will zoom in and out really easily down here. I can rotate the image, if I need to rotate it, I can do that, I can also reset the rotation just by clicking on this little icon here that rotates it. I can flip it, if I need to flip the image vertically, I can also rotate it if I needed to do that, and I can reset the whole process just by clicking on this little "Undo" button up here; that just brings it all back to the start. That's kind of what that looks like, and this is really handy if you just need to crop something really quickly, or if you need to have complete control over what the crop looks like, you can use this manual cropping tool really easily and get the exact crop to the exact dimensions that you want; you can see the dimensions down here, and the second thing you can do is also set up a resize; if you do need to resize this, you can just do that by typing in a number, so I can do "800" wide and it will automatically fill in the height for me, or I can also unconstrain that; if I just click on the little "Padlock", I can change this to be whatever I want, and that will also update it to be a forced crop size, but in this case I'll just leave it to "800" by "1200" and click the check mark, and that basically resizes it for me. You can see here it's now at 63 percent of what it originally was, and now the crop has been set to that that bounds, so that's what that looks like, and once you're happy with the crop you can save it just by clicking on the "Crop and Download" button in the top right here. If I click on that, that will save the image for me, and I can just save that to my desktop, it's just a JPG file because it's just one file, and if I open that up, that's the crop that we just saved out from the Figma plugin. So, that's just a really nice way of getting a high precision manual crop if you really need to just do one-off sizes, or if you just really need to have full control over what that crop looks like.

That's essentially what we can do with the HyperCrop Figma plugin, and as you'd expect, we can roll this out to multiple images; if we wanted to have many more sizes to to all these images, we can totally do that; you can just keep adding as many as you want and and pile them up. Of course, it's going to take longer the more images you add and the more sizes you add, but if you just leave it, it will compress them all and resize them all for you. I can show you what that looks like now; if I go through these and just update the positioning a little bit and make sure that set to to what we need; I'm just going to turn on facial detection for the ones that need it, all the ones with people in them, and for the other ones I can just just leave them. We can set these to be different crops, I'll do that to the left this one, I'll just turn "content aware" off for now. This is basically going to crop and resize our images from Figma to 180 different images, so I'm just going to click that "Batch Crop" button now, and we'll wait for it to go through them all and finish, and then I can open it up for you and show you what that looks like as an output. I might just fast forward this for you at home watching this, so you don't have to go through the whole process, but once it's done I'll open up the folder and we can go through all the images together. Okay, it's just finished zipping up all of our files that it's just finished cropping; I'm just going to click "Save" to my desktop again, and it's just worth noting that these are really high resolution images as well, these are 4000 by 2500 pixels, so these are huge; the images that you're working with may not be as big, but just be mindful that the bigger the images are and the bigger the crops are, that's going to take a lot longer than smaller ones; just something to be mindful of.

I'm just going to unzip this now. You can see here that we've got a 32 megabyte zip file; I'm going to unzip it and here's all of our folders. If you remember, these are all the crops that we had, so I can go through and I can open those up, and you can see all of the images that we added have been exported, and they're looking really good; all the custom sizes we added, we did some Twitter ones, these are our Twitter images also looking really cool, and if we go back, we had a whole bunch of Facebook ones, too; you can see here this is a huge folder of images, and all of our Facebook crops have been included. You can see here with the facial detection, it's picking up the faces, making sure those faces get included in all the crops. Just a whole bunch of crops into different sizes, but those were all automatic and we didn't have to do anything, we just hit the "Batch Crop" button and it just ripped through all of them for us. I won't go through all of the folders, but you can see here they've just been exported to all of the different sizes that we we asked for, so all the files are there and it's just super easy, super automatic, and you're basically putting your cropping and resizing on autopilot.

That's that's all I'm going to show you today; I just wanted to run through a few different use cases, show you all the features, explain how the HyperCrop Figma plugin works, and just go through each detail to make sure that you're across what you can do, how it works, and what it looks like when you export your images. Thank you for tuning in, and I hope it's been a useful tutorial for you if you've been wondering how to batch crop and resize your images from Figma; this is the the fastest way to do it if you don't want to manually crop and resize them individually, or use some third-party tool like Photoshop and do it one by one, then this is the quickest way to do it from Figma. I hope you enjoyed this video, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to convert Figma to Adobe XD files in one click using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-08-16T00:00:00.000Z
dateModified: 2020-08-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-convert-figma-to-adobe-xd-files-in-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-convert-figma-to-adobe-xd-files-in-one-click-using-convertify.md
---

# How to convert Figma to Adobe XD files in one click using Convertify

#### Video Transcript

Today I'm going to be showing you how to convert and export your designs from Figma to Adobe XD automatically using a Figma plugin called Convertify.

The first thing we need to do if you haven't already done so, is just go to the top left corner of your Figma app and click on the little Figma button, and if you go down to "Community" or "Plugins" and search for the word "Convertify", you'll see a result called "Convertify" pop right up. The first thing you need to do is just jump over to the right hand side, and if yours says "Install", you just need to click that "Install" button and it'll change to look like mine where it says "Installed" and has a sort of check mark, and once you see it looking like that then you're ready to go and we can jump back into our project.

I'm just going to be running through a few different designs to show you what it looks like to convert these from Figma to Adobe XD, so the first thing we need to do is just right click anywhere, go down to "Plugins", and then click on "Convertify", and that's just going to run the Figma plugin that we've just installed. It'll pop right up just in this little window and you can see here that it's pretty simple, there's only a couple of options that we can actually look at. You can see a couple of things: the first thing is just letting us know what page it's going to convert, in this case I've only actually got one page, so it's letting me know it's going to convert "Page One", it's giving me a little time estimate down here; it's telling me it's going to take roughly two seconds to convert the 65 layers that I've got in my file in my Figma design. Then here you can see there's only two options at the moment; there's "Convert to Sketch" and then there's "Convert to XD", which is the feature I'm going to be showing you today. It's worth noting that at this stage the Figma to Adobe XD feature is currently in BETA, which means that there's a couple of things that aren't going to be 100 percent right, but for simple designs like this one, you're going to find that it's going to do a really good job. I'll show you what that looks like now; I'm not going to cover the "Convert to Sketch" option at all in this video, but if you're interested in seeing what that looks like, we do have another video tutorial that goes into detail and covers a whole bunch of use cases with the convert Figma to Sketch option, but for today I'm just going to be showing you the convert Figma to Adobe XD option.

With that said, I'm going to go ahead and click on this "Convert to XD" button now and that's just going to convert our page. It took took about two seconds to convert from Figma to Adobe XD, and now it's letting us save it to our desktop; I just need to pick the file name that I want. In this case I'm just going to leave it the default and click "Save", and that's saved to my desktop. You can see here the message just lets us know that the converted XD file is ready and we can go ahead and open it right now. I'm going to do that by just going back to my desktop and you can see here, it has generated the Adobe XD file for me and just to confirm this is a Adobe XD document; it's a real XD file that the Figma plugin has just generated from my Figma design for me. I'm just going to go ahead and double click that file to launch Adobe XD and see what our converted Figma design looks like. That should only take a second, Adobe XD can take a couple of seconds to load up on my side, but there we go; we've got our file.

I'm just going to put these next to each other; we can actually see what the differences are and what that looks like. You can see here that it has carried over all of our Figma artboards or all of our frames, and if we look at the layers on the left hand side in Figma and then we look at the layers on the left hand side in Adobe XD, you can see that they've all been carried over, and not only that all of the layers inside of each one have also been carried over. We can see here that these are matching up one for one with the layers panel; that's really cool, as it's actually carrying over all of the layers, and as you can see over here in XD, I can edit this text. This is "real text from Figma that's editable", I'm just narrating what I'm typing right now, and that's that's pretty neat, that's exactly what we want. All of the font sizes, all of the typography settings have been carried over, all of the sizes of the bounding boxes have been carried over. If I zoom in on the Figma design you can see that the size is exactly the same, it's 630 by 183, which we've got here, and then 175 is the position, the x offset is 175 in both cases, that's really cool. Then we've got all of our images; these are all carried over one-for-one, the quality is exactly the same, there's no quality loss involved, you retain all of your image settings if you've got export settings on them, it'll mark them as "marked for export" over here in XD. This is really a one-to-one conversion from Figma to Adobe XD with that one-click process that we just saw.

I just wanted to start off with a really simple file and show you what the conversion process looks like, to show you it carrying over all of those different layers from Figma to Adobe XD and giving you an idea of what that looks like. To just ramp things up a little bit, I'm going to export a more detailed file, so this time I'm just going to open this "Apple Widgets UI Kit" page and I'm going to re-run the Figma plugin just by going to the right-hand side and clicking on the "Convertify" icon, and that will just fire up the Figma plugin again for me without having to open up the right click menu. Once again, I can see here that it's going to convert the "Cover Page", as I mentioned before if you have more than one page you can click through your pages and the Convertify Figma plugin will automatically update the page name, but also update the time estimate for how long it's going to take to export or convert that design from Figma to Adobe XD. You can see it changing here, in this case, this particular page will take about 50 seconds to convert over 2,000 layers; whereas the one down here will take one second to convert zero layers, and in that case it won't even let you convert, it as you can see here; or in this case one layer will take about one second. The page we're going to look at exporting is going to take 14 seconds because it's got about 500 layers.

Once again, I'm just going to click on the "Convert to XD" button, and you can see here it's just letting us know that Figma is going to freeze while this happens; don't be alarmed about that, it just needs to do that to divert all resources to exporting all those layers and doing quite a lot of hard work behind the scenes to make this this export conversion process happen from Figma to Adobe XD, but once that's done, as you can see here, now it's at the stage where it's just bundling up our XD file and then the Figma plugin UI is usable again.

Okay, it's finished bundling our XD file from the Figma design, once again I'm just going to click "Save" and send that to my desktop. I'll close out the Figma plugin just so we've got a good view of the design to compare, and this time I'm just going to open up my new XD file. Now that Adobe XD already is running, it opens up a little bit quicker. I'll put that side by side once again just to compare what we're going to be looking at from Figma. Just as a brief overview you can see that it's generally looking really good; we've got our artboards saved over; we can see here that we've got this little widgets group and that has a whole bunch of layers in it; we can open these up and see that the layers have actually been carried over; if I open those up you can see the layers compare directly with what we can see over here in Figma. When we open it up in XD and just to zoom in a little bit more so we can have a look at the details. Once again, this text is editable; we can jump in there and edit that text without any issues, and of course we could change all these properties now that they're in there. If I wanted to make that font size smaller I can certainly do that, and that would be just fine. Everything's positioned as we'd expect, everything's been saved out, all of the images have been saved out I can move all these around these are groups; I can move those I can dive into the group and move things like this image, I can scale that up or down of course. That's that's all looking really nice.

There are a couple of things that didn't quite get converted the way that we want; the first obvious one is this little widget down here. The reason why Figma has these little arc circles working and XD doesn't, is because the feature that has been used in this particular case to generate those which is the "arc" feature does not have any support in Adobe XD. Unfortunately that particular feature doesn't get carried across, and it kind of falls back to this progressively enhanced, well the Figma version you can consider a progressively enhanced version of what we're looking at here. That's one thing, the other thing that didn't quite get carried over would be this nested mask; I don't know why this particular file has it, but in this particular file there's a nested mask layer and for some reason that is rendered out like this in Figma. We've got this little union boolean operation with another mask on top of it; XD does not support nested masks, so if that mask was just removed which it actually just could be in Figma anyway, I'm not too sure why this particular community file has two masks on it, but that could be resolved just by removing the mask to look like what it looks like in Figma that we'd expect; but besides that, it's done a really good job of exporting the the file over. All of our little vectors and all of our little icons have all been converted, the typography has all been converted, the images have all been converted; overall it's looking quite good.

Now, the third example I'm just going to run through is a much larger file and a much larger set of components. Once again, I'm just going to rerun the Convertify Figma plugin and just click on the the Figma plugin icon down here, and you can see that we're on the "Mobile UI Kit" page, which is what we're after. I'll just click on the "Convert to XD" button again, and this one's going to take about 54 seconds, as this particular file has over 2,000 layers; it's a little bit of a bigger file than we've been used to in the last couple of exports, but as long as you just let it finish it'll do its thing in the background. As I did mention, it will freeze during this particular phase of the conversion from Figma to XD, but once it's finished actually converting the layers, as it's done now, then the bundling process actually takes very few seconds to complete, as long as you don't have tons of huge images, that's what takes the longest for the the bundling part.

Okay, I've just saved that to my desktop, and if I open that up in XD, we can go through and have a look at this file as well. It's just opened up our file once again in Adobe XD, and just as a general overview it looks like it's done a really decent job of converting everything over. I'll just zoom in; we can take a better look at some of the quirks that might be expected; the first thing to call out again like the previous example the first thing you might notice in this example is the stars in the Figma design did not match up with the stars in Adobe XD. The reason for that is simply again that Adobe XD just doesn't have a star shape; you can see on the left hand side here there's a bunch of shape options, and a star is not one of them. It has a polygon option, which is what it's being converted to, so if we drill down into this little layer, you can see that the polygon has been used with five sides, which is what the star shape has, but the star shape is fundamentally different in Figma, where where it sort of inverts the the points; it makes a star shape whereas the polygon is facing outwards and makes it look like a polygon which is what you'd expect. Figma has a polygon option as we can see up here, but it also has a star option, which in this case has been used to create this little star chart and that's perfectly fine, but it's just worth knowing that Adobe XD will not be able to interpret it. The best work workaround I would suggest for that is just to use a vector star, or convert this into a vector layer and then it'll be able to get converted over from Figma to Adobe XD as a star; that would be my first caveat. It's just to say as a global rule: anything that Adobe XD doesn't have as a feature which which Figma does have, broadly, that's not going to get converted over; purely because the feature just doesn't exist in Adobe XD; just be mindful of that if you're wondering why some of the features aren't quite looking the same.

To that point, the other obvious thing that you might have noticed is this little notch the notch for the iPhone that's been put into these mock-ups; this notch that's being used that's actually a vector layer; it's a vector shape, but the vector shape itself has got corner radiuses applied to each of the points in the bottom left and right hand corner; once again Adobe XD just doesn't have this feature. You can't drill into a into a vector layer and apply a corner radius to each point, it just does not support it. If you look in the Figma interface, you'll see a corner radius option, but again the things up here, the little settings up here, they just don't support it and that's why it's being exported as a shape a vector shape that's exactly the same dimensions but unfortunately it does not have those curves. That would just be one caveat; again, to work around that I would just have that as an actual path not as a point with a border radius on it, and just actually draw a curved path and that would once again solve the issue. Exactly the same thing here, you can see that we've got curved buttons in this instance, but square buttons in this instance. Once again for this this sort of simple use case I would suggest not using those curved vector shapes in Figma and I would just use a normal rectangle shape and I would apply corner radius to that instead of using a vector shape and applying corner radius to the vector shape, because Adobe XD does support rectangles with corner radiuses; that would work perfectly fine, but I just want to be really comprehensive and go through all of the things that are currently not going to get 100 percent carried over because of that missing feature set in Adobe XD compared to Figma.

Outside of that, it's done a really good job. As I mentioned, the glyphs or the vector icons all get carried over really nicely. You can see here that all of the icons themselves are intact; those are real boolean operation layers or union layers in Adobe XD's language, and those have all been carried over. You've got your vector paths; if I just zoom in here for a moment you can see that the vector paths have all been carried over which is really nice, and if I open that up, those layers are working really well. All your vectors are going to look really nice.

Typography looks really nice, but the one thing that I would caveat with typography is that, you're probably noticing a theme here, but the theme is that Adobe XD just does not support vertical text alignment. This is a real pain; it's a real pain to convert and it's a real pain to try and visually emulate when possible. You can see here in Figma that it's vertically aligned, but in Adobe XD the vertical alignment option just doesn't exist. For example if I create a text layer in Figma and I want to call it "vertical text layer", if I put that into my box and then I click on this little vertically aligned or "align middle" option, it immediately just vertically aligns the text and that's a pretty common use case in a Figma design that you'll use, whether it's in a button or some other shape that you want vertical alignment; but if we jump over to our XD file, and I zoom in on this text, if I highlight this text which is also in a taller bounding box; if you go over to the right hand side there's just no vertical alignment options whatsoever. There's this horizontal alignment, you can align it left right and center, but unlike Figma which does have this secondary box of options, I just can't vertically align it without positioning it manually; I have to go in and actually manually position the text that I've already got.

That's just one thing worth noting if you are converting your Figma files to XD, and I'm hoping I'm really hoping that Adobe XD ships this feature because then then I could immediately use the the vertical alignment setting in Adobe XD and just mirror that from Figma for the conversion process, but I just wanted to bring that up because it's worth touching on. In some cases where that just isn't an issue; in this case you can see the text in Figma is is a fixed size it's got a fixed bounding box and it's just being positioned wherever that text needs to be; in those cases, the conversion process is is totally fine, you can see here if I zoom in the the button has been rendered as you'd expect and you've got the little text in there and it's been positioned correctly, but of course, that's just not going to work if you're using the vertical alignment option.

Okay, those are the examples I just wanted to run through just to give you a varying degree of what a smaller file looks like what a more complex file looks like in terms of the output but also in terms of the speed that it takes to convert your Figma design to Adobe XD files. I'm fairly happy with those three; again, with those caveats that you can either manually tweak the design in Figma or manually tweak it in Adobe XD; I would be more inclined to try and tweak them in Figma if you are going to be re-exporting this file regularly to an XD file, I would try and solve the issue in Figma. That way if you do need to keep re-exporting it from Figma to Adobe XD, then every time you rerun the Convertify Figma plugin those changes are going to get solidified in the export, rather than manually editing the exporter file and then needing to re-export it later and manually updating that in your Adobe XD design; that's the way I would approach it. Again, this this should improve with time, as long as the Adobe XD team starts shipping some more features that Figma has. As soon as they do that, the Convertify Figma plugin will be updated to try and squash some of these little annoying bugs; but until then that's unfortunately just the case.

I hope that that's been interesting for you if you've been looking for a way to try and streamline the conversion process, or the recreation process from a design in Figma to Adobe XD; this is the the quicker way of doing it instead of actually manually recreating the file. Even if it only gets you to 90 to 95 percent of what you need, as it does in this case, it's still going to be much more effective and much more efficient than having a designer spend the better part of a week manually recreating a design like this, or an even bigger design like this from Figma to an XD file.

That's all I have for you today; it's not a super long tutorial just because it's such a simple user interface and this is such a simple process to convert those designs from Figma to Adobe XD with that one click process using Convertify. I hope that you've walked away with something you can use and potentially try out with your team if this is a use case that you you have internally, or if you're working with a third party, or another agency, or another company that does need need files in Adobe XD but you're all in on Figma; then this might be helpful for you. I hope that you found it valuable, and I just want to say thank you as always for watching; and we're going to be back very soon with more Figma tutorials just like this one, so stay tuned for those.

---

---
type: tutorial
title: How to export animated banners from Figma to GIFs using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-08-16T00:00:00.000Z
dateModified: 2020-08-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-banners-from-figma-to-gi-fs-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-banners-from-figma-to-gi-fs-using-bannerify.md
---

# How to export animated banners from Figma to GIFs using Bannerify

#### Video Transcript

Today I'm going to be showing you how to export your animated banner designs from Figma to GIF files that you can use online for any ad network, or if you just want to use them on your website, or anything like that.

The first thing we need to do is install a Figma plugin called "Bannerify", and if you haven't already done so, you can jump into the Figma menu in the top left hand corner, if you click on the little Figma icon, and if you just go down to "Community" or "Plugins", and in the search bar just type in the keyword "Bannerify"; if you click on the "Plugins" tab you'll see a result called "Bannerify" pop right up. The next thing you want to do is go over to the right hand side and you'll see an "Install" button; if you click on that "Install" button it'll change to look like mine where it says "Installed" and has a little check mark. Once you see that check mark it means that you're ready to go and you can jump back into your Figma project.

I'm just going to be using a banner set that I designed as a bit of an example; we're going to export all of these banners into a GIF file which is animated, based on the animations that are being set up in the Bannerify Figma plugin. The first thing we need to do now that we've installed the Figma plugin is right click anywhere on the page go down to "Plugins", and then the top result in my menu is "Bannerify"; you just want to click on that Bannerify plugin and this will load up the Figma plugin that we've just installed.

What it's going to do is just load up all of our parent frames in the left hand side here and it's going to parse those as banners; each of those frames is one banner, and then each of those sub-layers inside of each frame becomes a layer inside of the banner for each one. Those can have animations applied to them, as you can see here I've already got some animations set up, I can preview that in the window here. It has just got some very simple animations set up on all of these, and I'm not going to be showing you how to use all the animation features in this tutorial, but I do have another tutorial on the YouTube channel that you can find which goes in depth into how to use all of the animation tools, how to set up easy delays and bulk apply animations to different layers, but in this tutorial I'm just going to assume that you've already set up your animations the way you want, and you just want to export these banners from Figma to GIF files.

I'm happy with my animations, I'm pretty pleased with the way that they look, and all I want to do is just export them. All we need to do is click on this button in the top menu bar, which is called "Export to GIF/Video"; if I click on that button that brings up the settings panel for this feature; it's telling us that this is going to let us export our banners to either a GIF or a WebM video and it's just letting us know that the banners are going to be played through in real time and rendered out, and we're going to get a zip file when it's complete. We've got a couple of options here; the first one is in regards to looping the GIF, if we want our GIFs that are exported to infinitely loop then we can check this box, which is enabled by default. If you don't want your GIFs to loop and you just want them to play through once and then stop at its final frame, you can uncheck that option and that will remove that ability from the exported GIFs from Figma; in this case I'm going to leave mine to loop. Then the other option we've got is output quality; this slider here you can slide up and down and that will change the compression or the file size and quality that the GIF is going to be exported at from Figma. You can you can slide that up and down, I'm just going to leave it at let's say 65 in this case. The final export option we've got here is the preview page option; this little checkbox is just letting you set dark mode for the HTML preview page that it's going to generate. Once the GIFs are all exported you will get a little "index.html" file which you'll be able to open in your browser, as we'll see in a minute, and that will serve as a way to preview all of the GIFs at once; and it's just a really nice thing that you can upload onto a server somewhere and send it around to your clients or send it around to your team for an approval stage. This little check box just turns on dark mode for that page, if you turn it off it's just going to render it out with a light gray background the same as the Figma background; I'll just leave that off for now.

So, now that we've set those settings up the way that we want, we simply just click on the "Export to GIF" button, and that will start the process. I've got 11 banners in this design and what the Figma plugin is doing right now is, it's first of all playing through the banner; you saw a second ago, it's just playing through all of the keyframes and that's essentially capturing the animation in real time, and then once it's finished capturing it the second phase of the export process per banner is to then render those frames into a GIF; that's what you can see it doing right now, and you've got a little progress indicator per GIF whenever that happens. Depending on how many banners you have and depending on how long each banner plays for, that will roughly determine how long the export process will take; effectively you'll need to let it play through all of your banners, and as I said in this case I've got 11; you might have less or you might have more, but if you just let it keep going it will eventually export all of these into a zip file and you'll be able to open them up. We're going to have a look at that in just a second; I'm just going to speed this video up in a moment just so it finishes up at the 11 mark, and just so you don't have to sit and watch the whole thing, but this is the process that you will you'll go through.

Okay; that's just finished up and now it's at the final stage of just zipping the GIF files into a zip file; this typically doesn't take too long, as it's basically just going through all of the GIFs that just generated and it's zipping them up into a single file; you'll be able to save this and then double click to open it in just a moment. We'll see that show up in just a second; okay, that's just finished and once it completes you'll get a prompt to download this to your desktop or download it to your computer. By default, it will just use the the date and the time, and you can obviously change that file name if you'd like, but I'm just going to leave it as the default and click "Save" to send it to my desktop. So, that's the process; the banners are now ready, it's telling us that we can unzip the contents of the file to the computer. I'll open up my desktop and I can see here I've got my zip file which I can now open, and there we go, we've got our entire folder of GIF files from Figma. I can either open these up with preview, or I can preview them on my file system just using Mac finder, and that will just play through; or, as I mentioned before it comes with this little "index.html" file, and I can actually open that up just by double clicking it, and that will open it up in Chrome.

That's what our preview page looks like; you can see now, it's just generated all of the banners that we exported in one place, and it's just going to play through them on a loop because we set that infinite loop option in our Figma plugin settings earlier. It's worth noting this page is also fluid and responsive, so if you do want to view this on different monitors or you're sending it to a client, it will automatically rearrange the banners so it fits to their screen. You can you can resize that as as much as you want and it will always look nice with a grid of different export banners; that's what it looks like, that's all of our GIFs from Figma playing at the same time. If we just want an overview of of all of them you can see here they're looking really nice, they're looking very smooth, the frame rate should be about 30 frames a second and you're really getting very, very smooth animations. There'll probably be an export option in the future where you'll be able to specify the frame rate, which I think will be useful, but at the moment it'll just export it by with this default option set.

That's our whole folder you can see here, all of them are individual files, too. These are all being loaded into that "index.html" file as a preview, but of course these are the real files that you can actually use and and send around or upload onto your website, or upload to your banner network or your ad platform, and you'll be able to use that to advertise your products or services for you or your clients or whatever use case that you have.

So there we go; it's really simple, as you saw, just a one-click process once you've set up all your animations in the Bannerify Figma plugin. As I said, if you're interested in seeing what that looks like, we do have another video on that which goes really in depth into how to structure the animations and set those up really easily, but this was a highly requested feature for the Bannerify Figma plugin; being able to export animated GIFs from Figma from your animated banner designs that you were already exporting to HTML in most cases.

I just wanted to give this quick tutorial today to show you what that new feature looks like and what the output looks like. Hopefully you'll find it useful in your own process with your own team, or your own agency, and if you have any feedback please let us know, as we're always trying to make this Figma plugin as good as it can be. That's all I have for you today, and I'm sure there'll be more improvements in the future that I can go through in another video, but thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export animated banners from Figma to WebM Videos using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-08-16T00:00:00.000Z
dateModified: 2020-08-16T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-banners-from-figma-to-web-m-videos-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-banners-from-figma-to-web-m-videos-using-bannerify.md
---

# How to export animated banners from Figma to WebM Videos using Bannerify

#### Video Transcript

Today I'm going to be showing you how to export animated banners from Figma to WebM video files in one click using the Bannerify Figma plugin.

If you haven't already done so, you'll need to install the Bannerify Figma plugin by going up to the top left hand corner of the Figma app and clicking on the little Figma icon, and if you go down to "Community" or "Plugins" and then if you search for the keyword "Bannerify", then just click on the "Plugins" tab and you'll see a result called "Bannerify" pop right up, and if you haven't already done so, you can go over to the right hand side here and there'll be an "Install" button, if you just click on that "Install" button, it'll change it to look like mine where it says "Installed" and has a little check mark on it and when you see it change to look like mine, that means you're ready to go and you can jump back into your Figma project.

I'm just going to be using a banner set that I designed as a bit of an example to use with this Figma plugin, and the first thing we need to do is just right click anywhere, go down to "Plugins" and click on "Bannerify" in your plugin list and that will start up the Bannerify Figma plugin that we just installed. What this is going to do is it's going to look through all of our layers on the left hand side here, and it's going to treat every parent frame as its own banner. Each each of these frames is treated as its own banner and then if you open up the layers list you'll see that those correlate to the layers in all of our banners inside of the Figma plugin; each of those layers can be animated and as you can see here, I've already got some animations set up. If I just click on the little preview you can see it animating over here. I've set these up before, but you can set up the animations any way you want, I'm not going to go into detail about setting up animations in this video, but I do have another in-depth video on it on the YouTube channel; if you just browse for the animation video on Bannerify, you'll be able to get a full deep dive into how to set up the animations and the most efficient way to do that, but today I'm just going to be assuming that you've already set up the animations in Bannerify the way that you want, and now you just want to export them to some WebM video files from Figma.

We can do that really easily just by clicking on this button up here in the top header called "Export to GIF/Video"; if you click on that button you'll see this little module pop out, this little feature which is letting us export our banners to a GIF or WebM video from Figma using the Bannerify plugin. It's just letting us know that these banners are going to be played through in real time and rendered out, so you're going to get a zip file once it's complete. There's a couple of options here that we can set up: the first one is related to GIFs only; I'm not going to be covering GIFs in this video, but I do have another video showing examples of that if you do want to see that on the YouTube channel, so I'm going to leave that option off for now because it won't impact what we're doing today. The next option is just output quality; this little slider will change the quality and the file size of your export, if you set it to a lower number a lower setting it's going to mean that the quality is lower, but it's also going to mean that the file size is lower, and conversely if you set it up higher it's going to mean that the quality of the video is better, but again the file size is just going to be a bit larger. I'm just going to leave it around 90 which is the default, and just set it to that and then the final option is just around the preview page; basically when you export from Bannerify you always get a little preview page which is just an "index.html" file containing all of the exported banners, and it's just a really easy way to upload that to a server or send that to a team member or a client and they can approve your banners based on this little overview of all the exports. This setting basically just turns on dark mode for that export, so if you have a set of banners that are going to look better with a dark background or a dark theme you can enable that otherwise it's going to look like basically what it looks like in the Figma file, the background color is the same as whatever it is in in Figma right now which is this sort of light gray. I'm just going to leave that setting turned off in this instance, but you can experiment with that if you'd like to.

Okay, now that we've set up our settings the way that we want, all we need to do is click on this button called "Export to WebM", so I'm going to click on that now, and what this is doing is it's actually going through and playing each banner. It's playing all of the animations for every banner; I've got 11 banners in my case and it's playing through them in order to capture frame-by-frame the animations and the playback for all of them, and once it finishes capturing the frames for each banner it's actually then using those frames to create a video file for each one. When it finishes up in a moment it's going to render these out into video files and it's going to package them up into a single zip file that you're going to get as a download in just a moment, and then we can open that up and have a look at what's actually exported for us. It's fairly quick, it just depends on how many banners you do have and how long the timeline for each of those banners is, and that's a rough indication of how long this export process will take. Now it's zipping up our WebM files as we can see down here, and very shortly it's just going to pop up and tell us it's done which it has just done now; and you'll get a little download prompt which will let you rename the file if you want to, I'm just going to leave it with the default, which is just today's date the export format and just letting us know it's come from Bannerify. I'm going to click on "Save" and send that to my desktop, and that's the whole process. It's let us know that the banners are ready and we can unzip those banners and basically use them however we want.

If I go down to my desktop now, you can see that I've got this zip file that has just saved out for me; all I need to do is double click on that and you'll get a little folder. If you open up the folder you can see here it's got all of our layers, or all of our banners, that we that we set up and export from Figma to videos. If I open up the "index.html" file; that just opens up the preview page in Chrome; that's essentially playing all of our banners in the browser in this little neat grid, and these are all videos. You can see here if I actually enable the controls, these are these are videos that I can actually control the playback for, and it's worth noting that this preview page I mentioned is fluid and responsive; if you do change the screen size or if somebody's viewing it on a different screen size, it will automatically adjust the layout of the banners in order to be optimal for that screen size, so that's really neat. We can see all of our banners basically exported as we wanted, and if you do want to look at them individually you can simply just drag any of those into the browser and that will actually load up the video itself that you can just have a look at; and obviously you can playback that video however you like, there's a little control bar here that pops up because I'm just viewing the video itself now. The videos files we exported from Figma are looking really smooth; this is a 30 frames per second video, so you should notice it's very smooth, very seamless and it has exported it just as you would expect.

We can have a look at any of those it'll it'll play through all of those. Depending on your implementation of it when you upload this to your website or when you upload this to your advertising network/platform, if you're using it on a website you'll be able to loop that playback just by adding some inline playback settings. If you use an HTML video tag and you put the "autoplay" attribute or if you put the the "loop" attributes in there; you can you can look up what those are like. I actually do have them in the preview file, so if you open up that "index.html" file in a code editor or a text editor you can actually see the HTML video tags in there, and you can just copy paste those, and it'll be really simple. I can actually show you what that looks like now; if we drag that index file into the code editor, I'm just using VSCode at the moment; you can see here that it's injected all the video tags for us and I've got the "autoplay" and "loop" properties set on that; that actually just causes the video to loop over and over on an infinite timeline for as long as we need it to and that's why it's looping on that preview page which we just looked at a moment ago. It's really up to you what you do with the video, it's totally your implementation of it, there's no loop settings on the video themselves, so you can basically do whatever you want with it.

You'll notice that these files are in WebM; WebM is a video format for the web, but if you do need this video in a different format, you could use another tool like an exporter tool or a converter tool that does convert video formats into different formats. If you need this as an MP4, or if you need this as a different different file type for some reason, there are third-party tools that you'll be able to drag these files into and convert those into other formats, but these are WebM files and they'll work on the web. If you do need it just for your website or if you do need it just for advertising banners, then WebM should be fine, but if you want to use it for something that's not on the web or something that just needs a different file type, you'll be able to find a converter to convert these WebM files, just Google "WebM to" whatever format that you need, and I'm sure something will pop right up.

Okay, that's the entire tutorial; as I mentioned, it's really simple, it's just a one-click process from Bannerify to export these video files from Figma, and again, assuming that you've already got those animations set up, you can just keep exporting these as much as you want. If you need to do some animation changes and you want to export it again, or if you need to make some design updates or positioning updates in the banner, you can just simply rerun the Figma plugin, click that "Export to GIF/Video" button again, and the process that we just watched will get executed again. You can just keep doing that as many times as you want without needing any video software or exporting those frames manually, and then somehow exporting into a video, Bannerify will do all of that for you.

If you've been looking for a way to export banners for your website or banners for your advertising platforms from Figma to video, or to WebM in this case, then Bannerify now supports this along with lots of other HTML export format options, and also now it supports exporting banners from Figma to GIFs; which as I mentioned is in another tutorial, and we also have a bunch of other tutorials on every other export setting that it supports: HTML, GSAP, HTML Canvas, DoubleClick, Adwords; all of these different platforms and more; you'll be able to find each of those tutorials on our YouTube channel if you'd like to view those as well.

That's all I have for you today; I hope that you've enjoyed this Figma tutorial and I hope you've got something out of it, if you want to take this back to your team or to your agency and give it a trym you can install the Bannerify Figma plugin and run it the way that we just looked at, and hopefully you have some success with it. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to export a PowerPoint file with editable text from Figma using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-08-12T00:00:00.000Z
dateModified: 2020-08-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-a-power-point-file-with-editable-text-from-figma-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-a-power-point-file-with-editable-text-from-figma-using-pitchdeck.md
---

# How to export a PowerPoint file with editable text from Figma using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to export your slide deck presentation designs from Figma to PowerPoint files, containing editable text layers. This will also work for Keynote and Google Slides as well; but I am going to be showing you how to make it editable, so you've got text that comes from Figma and gets carried over to PowerPoint, and you'll be able to hand that file over to somebody and allow them to edit the content in their tool of choice.

To get started, the first thing we need to do, if you haven't already done so, is install a Figma plugin called "Pitchdeck". The way you can do that is just by going up to the top left hand corner of your Figma app, clicking on the little Figma icon, and if you go down to "Community" or "Plugins", and you go to the search bar and type in the term "pitchdeck" then if you go to the "Plugins" tab, you'll see a result pop up called "Pitchdeck Presentation Studio", and on the right hand side you'll see a button that says "Install", if you click on that "Install" button, it should change to look like mine, where it's got a little check mark and says the word "Installed" next to it. Once it looks like that and it's been installed, you're ready to go, and you can jump back into your Figma project.

I'm just using a fairly simple deck design with 11 slides, and it's just based on Dieter Ram's 10 Principles for Good Design. This is just an example of what a slide deck could look like, and I'm going to use this as an example to show you how to export this from Figma over to PowerPoint with editable text. The first thing we need to do is just right click anywhere on the page, go down to "Plugins" and if you click on the plugin called "Pitchdeck Presentation Studio", you'll see the Figma plugin load up. This is currently loading up all of our frames from the left hand side here and it's turning those into slides; we can see all of the slides I've correlated to all the layers in the Figma layers panel. In this Figma tutorial, I'm not going to be going into detail about animations, I'm not going to be going into detail about speaker notes and how to present a web presentation and things like that; today, I'm just going to be focused on showing you how to export this Figma slide deck design to PowerPoint or Keynote or Google Slides and keep all of the text editable; that's really what I want to show you today. If you do want to see a video tutorial about how to add these animations, how to add slides slide notes, how to actually present the presentation, you can go to our other YouTube Figma tutorials, and we've got a couple on there that'll go into way more detail about all those bits and pieces.

Okay, I've basically got my slides the way that I want them, so I'm ready to export this slide deck design to PowerPoint from Figma. All I need to do now is just go to the top right of the Figma plugin and click on "Export Presentation", and you can see here it's just pulling out a little export settings panel and there's a few little sections in here; the first one would be the "Select Presentation Format" option; this is just a drop down that you can click on and it reveals a few different export formats; the first one is the "Pitchdeck Presentation URL"; this will actually create a web based presentation, and then we've got at the bottom a "Static Deck" option, this will export your deck to a PDF, but the ones we're interested in today are the "Presentation App" options; that's "PowerPoint", "Keynote" and "Google Slides"; today, I'm just going to be looking at how to export to these particular formats and how to make the text editable once you do export it.

In this case, I'm just going to use Keynote as an example and I'm going to show you what it looks like normally to export this for Keynote or for PowerPoint from Figma, so I'm just going to select that "Keynote" format, I'm going to click on "Export for Keynote" and click that, and what this is doing is it's just exporting these slides into a Keynote file that we can open in a moment. This isn't going to be an editable, it'll be editable as far as the images and layers go, but the text layers in this example will not be editable they'll be rendered as images; we can just open that up now that we've exported it to our desktop from Figma, and once it loads we'll be able to see what's going on here. As you can see all of the layers have been kept intact, we've got all of the layers as we'd expect, which is great, the only thing is these layers have all been exported as images; even the text layers are images, I can't edit them, I can't double click on them because they are in fact images. That's great in some cases when you don't need to have editable text, when you just want to export this from Figma to PowerPoint and be able to present it in PowerPoint, then that's perfectly fine and rendering it as images is going to make sure that it's you know pixel perfect to the original typography that you get.

The next thing I'm going to show you is how to actually export this with a different option, and that's going to allow us to edit this text once we do export it from either Figma to PowerPoint, Figma to Keynote or Figma to Google Slides. I'm just going to close that off I'm going to restart the Figma plugin, you can do that by just going over to the right hand side, clicking on the little "Pitchdeck" icon and that will just loaded up the Figma plugin. Once again, it's just loading up the slides there we go it's been been loaded up. Again, I'm not going to change anything here, I'm just going to re-export this presentation; I'm going to go back to the top right hand side and click on the "Export Presentation" button and it has recalled our presentation format from the last export; it's still set to "Keynote", I could obviously change that to PowerPoint, or I could change it to Google Slides, but i'll just stick with Keynote for now. The option that we're interested in is this new option that's been shipped in the Pitchdeck Figma plugin; at the bottom here you can see a label called "Editable Text in Keynote", and it's currently in "BETA" status. What we can do is we can actually enable this checkbox or this little toggle; this says "Use Editable Text (instead of images)", and what this is going to do is contrary to the last file that we just exported with this setting disabled, enabling the setting is now going to export it using this editable text feature, and it's going to allow us to edit that text in our presentation app; be that Keynote, PowerPoint or Google Slides; it's going to keep all of that text from Figma and bring it all over. I've enabled that feature and I'm just going to click "Export for Keynote" once again, and this time it's going to use a slightly different export method, it's going to retain all of that text so that we can actually edit it.

Okay, it's finished exporting. I'm just going to click "Save", and put that on my desktop, and you can see here that we've got our new file once again. I'm just going to open that up with Keynote, and at first glance it looks the same but if I click on these layers, you can see that it's a little bit different this time these are not images these are actually text layers; instead of rendering out an image it's actually rendered out text from Figma; this "text is from Figma" sentence obviously makes no sense, but I'm just editing editing the text. You could give this file to somebody else who's not a designer who doesn't use Figma and is much more comfortable in PowerPoint, Keynote or even Google Slides, and they can edit this; this this text is all editable, you can change the text style if you wanted to for some reason, that would be that would be fine, and then you've got all of your settings here; you can change the font size if you wanted to do that; I can make that smaller and that changes the font size I can change the color; if I wanted to change the text color just for this word I could definitely do that and just a bunch of different options; I can change the alignments; all of the options you'd be used to if you were just creating this from scratch in PowerPoint or Keynote, but obviously the benefit here is that we were able to design it in Figma and then bring it over to PowerPoint or Keynote and either continue editing it there, or you know letting somebody else take over and maybe just update the copy or something like that if they really wanted to do that.

Those are the two different options; there's different use cases for both, where clearly sometimes you you may not actually need to have the text editable and sometimes you might just want to retain the sort of pixel perfect nature of some of the typography; Figma does have more fine grained control over typography, even with the spacing here, there's only limited options for line spacing and things like that, with Figma you obviously have much tighter control over a lot of the typography; you're going to lose out on a little bit of that by exporting it to text from Figma to Keynote or PowerPoint, there's definitely going to be use cases where you've got somebody on the team who just prefers to work in PowerPoint, Keynote or Google Slides instead of Figma, or maybe they just aren't invited to Figma for some reason, then this is the way that you can go about doing it if you need to get them involved and export the presentation for them to be able to edit.

That's all I have to show you today; it's just this new feature in the Pitchdeck Figma plugin that I wanted to to reveal and and give a bit of a sense of what it looks like and how it works, because in the previous Figma tutorials you could only export these slides to images; all the text was just images, and at the time there was no option to be able to export it with editable text. That feature has just just come out recently, and that's why I wanted to make this tutorial to show you how you can use it in your own projects. Thank you as always for watching, and we'll be back very soon with more Figma tutorials.

---

---
type: tutorial
title: How to merge frames to a compressed PDF from Figma using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-08-12T00:00:00.000Z
dateModified: 2020-08-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-merge-frames-to-a-compressed-pdf-from-figma-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-merge-frames-to-a-compressed-pdf-from-figma-using-tiny-image.md
---

# How to merge frames to a compressed PDF from Figma using TinyImage

#### Video Transcript

Today I'm going to be showing you how to export merged PDF files with compression from Figma using a Figma plugin called TinyImage.

If you haven't already done so, the first thing we need to do is install the TinyImage Figma plugin from the Figma plugins directory. The quickest way to do that is just by going up to the top left of your Figma application, clicking on the little Figma icon, and if you go down to "Community" and click on "Plugins" you'll be able to search for a Figma plugin called "TinyImage", and you can just put in the keyword "TinyImage" and if you click on the "Plugins" tab you'll see a result pop-up called "TinyImage Compressor", and over on the right hand side over here you'll see the "Install" button. If you haven't installed it you'll see a button that just says "Install" and once you click on "Install", it'll take a couple of seconds and then it should change to look like mine where it says "Installed" and it has a little checkbox next to it. Once it does say "Installed", then you can jump back into your project and we can get started.

The first file I'm going to look at is just this design with a bunch of frames; it's a presentation for Dieter Rams "10 Principles for Good Design", and today I want to export this as a PDF file from Figma, but I want it to be a compressed PDF file and I don't want it to be the regular PDF that Figma exports natively, because it's really large, and it's just way too big for sending people over email or Slack and things like that. I want to be able to compress this file into a single PDF and have a couple of options around that.

The first thing we need to do is just right click anywhere, go to "Plugins" and then go down to "TinyImage Compressor" and click on that; that's going to launch the Figma plugin we just installed. You can see here that the first thing we can see is this little empty state, this little warning message just letting us know that none of the layers in our file have any export settings on them; that would normally mean if I click on this image for example, an export setting is something that you can add in Figma in the right hand column; you can see over here on the right hand side I've got this little export section, if you click on that it'll allow you to add export settings for each layer or each image in your Figma file. Normally this would be the way that we would compress images with TinyImage; for example if I just refresh this you can see that it's picked up on the three export settings that I've just added to that image, but for today, because we're actually going to be using a different feature in the Figma plugin, I don't actually need to have these image settings added at all; I'm just going to remove those three refresh the Figma plugin and so this message is actually fine for our use case, because the second part of the message lets us know that if we just want to export all of the visible frames on this page to a single compressed PDF then we can use the the button above.

I'm going to do that now, I'm going to click on this "Create a PDF" button up here; you can see once I've clicked that it's brought up a little panel for me, this little export panel, and this is allowing us to create a PDF from frames inside of our Figma file; when I say frames I mean top level frames. You can see in the left hand side of our Figma design over here we've got all of these frames at the top level of the page and these are all being picked up on by the Figma plugin; we can see here it's picking up on each of those layers if I bring this over here you can compare it directly; starting from "Principle 10" all the way down to "Intro", it's bringing all of those layers in in or in the order that they appear in the layers panel in Figma. In our case, the order of the Figma layer panel is actually the exact opposite of what we want; by default it will load them in that order, but we obviously want them to be in a different order. There's a few ways to approach this: the default option is to sort these frames by drag and drop; you can see over here we've got this little grab icon, when you hover over this little icon over here, and if you click and hold that and drag it you are actually able just to reorder those frames in any order you like by clicking and dragging them and you can put them into any custom order that you want and when you've when you've finished with that it will render out that PDF file in this particular order; but clearly if you've got a dozen, or more than a dozen in other cases, frames just like this one manually going through and rearranging every single frame back to front, it's actually kind of time consuming.

That's why I wanted to make this tutorial about a brand new feature that's just been shipped in the TinyImage Figma plugin, and that is the quick sort option. As I just showed you, the default is actually set to sort by drag and drop, and by default that will load in the the normal ordering, but if we click on this little drop down here where it says "Sort by Drag & Drop", if I open up that select box you can see there's actually a bunch of options in here, and of course the default one is just custom ordering via drag and drop, but there are some other options, too. I've got "Figma layer ordering", so if I click on "Sort by layer order", that's just reverted it back to the layer order that we saw in here, but if I go one more down, we've also got "Sort by layer order in reverse", so if I click on that one, that's actually exactly what we want; we want it to be the the reverse of what it is in the Figma layers panel. So, just with one click I'm able to change it from the default ordering to reversing that layer order. Now we've got "Intro" at the top and "Principle 10" at the bottom, it's literally reversed that order that we can see in the Figma layers panel here, and it's done so without interfering with our Figma design or Figma file at all; all of these layers are still in the same order, it's not altering those, it's just scoping that to the Figma plugin options themselves.

There's a few other options we've got in here as well; let's say you wanted to export this, and for some reason the design has been a bit frantic and they weren't able to keep all the layers in the same order as the designers appeared visually; in that case we could do another option which is visual position ordering, so instead of sorting by the layer order in Figma or reversing the layer order in Figma or using drag and drop, we can also arrange these frames by where they're positioned visually on the canvas. For example, if I click on "Sort by left to right", you can see here that it's actually sorting from the top left to the bottom right, and what that means is it's actually going through and it's going from "Intro" to "Principle Three" to "six" to "nine", then it's going all the way back up to one to "four" to "seven"; you can see that ordering popping up there in the Figma plugin and that's really neat, if you have ordered it in more of a column setting where you need to order it by columns, basically from column one all the rows in column 1 to column 2 to column 3, that ordering would be perfect for that setting.

There is also a second setting if you need to go from top to bottom, or top left to bottom, you can also use "Sort by top to bottom", if you click on "Sort by top to bottom", that will actually then do the opposite basically, or it will do an alternative of that where you go row by row; you're going row by row from the top, starting at "Intro", it's going to go from "Intro" to "Principle One" to "Principle Two", and then it's going to go to the next row "Principle Three", "Principle Four", "Principle Five", and that's going to keep going on until it gets to the end. In that sense, you're going from the top over here to the bottom, row by row, instead of column by column; that's the difference between left and right, left to right, and top to bottom and then there's the opposite of both of those options, too. You can also go from bottom to top, which would exactly reverse that ordering; you're getting 10 to 9, and then it's going up another row to 8, 7 and 6 and the same thing if I go from right to left; in this case it's actually going from the the opposite way that we that we saw before; it's actually starting at "Principal 8" this time, so it's starting at the last column. It's important to know this particular option is column, and the other one is row, from left to right; this is actually going from 8 to 5 to 2 and then it's going back down to the bottom to 10, to 7, to 4, to 1, and so on; these are the different options that you have; they can be handy depending on how your design's been organized, how it's visually organized, how it's organized by layer, and of course if worse comes to worse, you can always pick one of them so if you do "left to right" and let's say you still need to fine tune it, you can still go ahead and just override that ordering with drag and drop. Even if you get 90-95 percent of the way with your visual sorting, maybe there's something that's a couple of pixels off, you know up or down, or left or right, than the other frames for some reason, you can still go in there and manually tweak that if you really wanted to. Those are the sorting options that we can use for all of our layers.

We can also select layers that we want or we don't want; for example if I actually just want to get rid of the "Intro" frame, I can just click on that, and now you can see that 10 of the 11 frames have been selected. I've got rid of the "Intro" frame, of course I can get rid of any of these frames, I can get rid of them all, and then obviously I can't export it until I select one. You can just toggle those to create the PDF that you really want, it's not just going to go ahead and export all of those frames if you don't want them to; you have full control over which frames and what order they're in to be exported from Figma. There's a couple of other options as well; I've covered these in other tutorials, so I won't go into full detail of them, but you can also select the color profile and if you need to, and you can also add an optional password to protect the PDF file.

Having said that, I'm just going to export this. Let's just go with the default layer order for now; it's backwards, just to show you what it looks like normally. If I click on this "Export Frames to Merged PDF" button, that will start the merge process of going through each of these 11 frames and compressing them to a PDF. That's going to go through all of them, and once it finishes we should see some really good file size savings and expect the PDF exactly as we ordered it. That's finished converting, and you can see here the original PDF size was 6 megabytes, so we've had that taken down now to 1.3 megabytes; that's a 77 percent saving from the original PDF file size, and it's worth noting that was a 300 dpi PDF, which is the highest quality dpi for exporting compressed PDFs from Figma. If I go to my desktop now and just open up this PDF file we just exported, you can see here it's exported the PDF in the reverse order that we just set up in the Figma plugin, just to show you what that looks like. It has exported perfectly, and it looks great; I can't tell that the compression has been applied at all, it looks just super, sharp and exactly what we expected.

If we run that again; we can do that just by closing the Figma plugin and going over to the right hand side column, and if you click on the "TinyImage" icon, it'll reload the Figma plugin for you really quickly. Now that we've exported a PDF file just to experiment with, the second thing I wanted to show you is just changing the quality on that as well. We had that set to the best quality, and you can see up here the button changes its context based on what quality you're setting it at; there's three levels of quality for PDF exports: there's 300 dpi which is basically print quality, if you slide it down you can get to 150 dpi, which is more like a screen based quality (high quality for screens), and then you've got 72 dpi, which is the lowest quality, but it's going to give you the highest file size savings. Let's just try exporting it at 72 dpi, and I'm just going to leave that slider set to 72 dpi, and if I click on the button again, the "Create a PDF" button, this time I'm going to export it in the correct order. I'm just going to click on "Order by layer order (reversed)", and that's just going to take the Figma layer order and reverse it for me. Now I've got it in the order that I actually want it, and I'm going to go ahead and unselect the second half of this presentation, because for some reason in this case I'm just going to export the first four principles; let's let's see what that looks like. Once again I'm just going to click on "Export Frames to Merged PDF", and actually that's not going to work... I'm going to reselect all of those, because I do want to compare the file size and if I remove those frames, it's going to make the file size smaller, of course; but I want it to be accurate to what we just exported. So, I am going to leave all 11 frames selected, and all I'm going to do is just reverse the order, that's it; that won't change the file size at all. We're just going to see what it looks like with 72 dpi.

Again, I'm going to click on "Export Frames to Merged PDF", and once again, this is just going to merge those 11 frames to the PDF. It has converted it really quickly from Figma to a compressed PDF, and this time we've saved 86 percent. We've actually got it down underneath a megabyte now; it's come down from the original six megabytes that would have been exported from Figma, and it's brought it down to 873 kilobytes; that's just a perfect size if you need to send it to somebody on your team or a client via email, or an attachment on Slack, or something like that; under a megabyte is is ideal. Now if we open up that new PDF, let's do that; this time you'll notice immediately that the order has been reversed, the order's now much better, we can see that we've got our "Intro" frame, and then going from 1 to 2 to 3 and so on, and even though we used 72 dpi, it's really difficult to tell how much compression has been applied to these images. At a glance, you just really can't even notice I'd say if you zoomed in or if you were really having a look at it on a on a really good screen and looking at it up close you'd be able to tell that there's some compression applied to these images, but again, it's very hard to tell and we've got a really good file size for very little image quality loss.

Okay, the last thing I'm going to do is just show you an example where I take some frames out. I'm going to relaunch the Figma plugin just by clicking on the right hand side once again, and this time I'm just going to change it to 150 dpi, just to just to get all three in the tutorial. Once again, I just want to create a compressed PDF, but this time I only want a few frames just to show you what that's going to look like. If I actually deselect all of them to start with, and let's say I just want the "Intro" and I want "Principle 8" and I want "Principle 10", but I actually want "Principle 10" to go before "Principle 8", and I'm also going to throw "Principle 4" in there, but I want that to go at the very end; now I've got this really weird ordering for some reason, and I've unselected or deselected a whole bunch of frames. Now I've only got 4 out of my 11 frames selected because in this particular case I don't want any of those other frames and I just want to tailor this PDF for this use case where I only want the four frames in this custom order. Now I've got custom ordering going, I've got the frame selected that I want and I've got it set to 150 dpi, and once again, I'm going to compress this PDF from Figma by clicking on the "Export Frames to Merged PDF" button, and once again, this should be pretty quick. There we go, so let's just save that out for us, and this time you can see that it's actually saved us 85 percent because we took out some of those frames; the original size has also come down, it would have been exported at about 2 megabytes, but because we've saved it out at 150 dpi, which is sort of the middle setting, we've actually got it down to 295 kilobytes; we've almost saved 90 percent, and that's a total absolute saving of 1.7 megabytes, which is really good. If I go back to my desktop and one last time, I'm just going to open up my PDF, and you can see here immediately we've got only four frames this time as we expect. It's just those four, and as we saw from the custom ordering in Figma before we exported the compressed PDF, you've got the frames in a really strange order; we've got frame 10 and then number 8, and then number 4 and none of the other frames have been included; we didn't bloat it up with unnecessary frames and we've got custom ordering at our custom compression level.

Okay, so that is three different examples of how you can go about exporting those those compressed PDFs from Figma. Finally, I'm going to run this on one more file just to show you what it looks like. I've got this second file here which I used in a previous tutorial where we were covering the initial PDF compression functionality, that didn't have the sorting function. I'm just going to relaunch the TinyImage Figma plugin once again, and you can see here we've got some selection settings already saved for exporting these as individual PDFs; these frames have PDF settings already on them, but again, I'm not too concerned about that today, I just want to click on the "Create a PDF" option. I'm going to click on "Create a PDF" once again, and as we saw in the last example it's exactly the same setup; in this case we've already got custom ordering saved from previous export. The red frame has been brought into the middle, whereas normally it would be brought down to the end. If we wanted in the correct order, once again, we can we can order this visually; if we throw these completely out of order just to set it up that way, those are completely out of order now, and again, if I wanted to arrange this visually from left to right, I can just click on my order options as we did before, click on that, and I know that I want to click "Order from left to right", so I'm going to click that now, and you can see here it's ordered it visually from left to right. Yellow is now first, gray is second, and red is third. That that's really handy, because as I mentioned before, sometimes the layers just don't correlate to the ordering of the visual design, so you can see here that our first layer in Figma is actually the "Approachable" layer, then it's the "Thoughtful" layer, then it's the "Professional" layer; that ordering is just totally out of whack and this is just a small file as well. It's not too bad if you did have to manually order it but again it's just; much easier; that the default layer order would look like this but it's just; much easier to sort it visually. Now we can do that with this new feature; "Order by left to right", I could also "Order by right to left", so we get the backwards, the red one first and then yellow at the end, but in this case I'll just do the correct order and go left to right.

One last time, I'll export the frames to a merged compressed PDF from Figma, and it's going to merge those three frames for us, and this is set to 150 dpi as well, so this should be some decent compression. In this case, we've actually got a really, really good result; it's gone down from 12.6 megabytes to 500 kilobytes, that's a massive 96 percent saving, or a 12.19 megabyte saving on our PDF, and that wasn't even at the lowest setting. If we tried it at 72 dpi, it'd actually probably go even lower; well, it definitely would go lower, but in this case, I'm very pleased with with the 96 percent saving, and finally I'll just open up the merged PDF we exported from from Figma so you can see what it looks like. There we go, we've got all of our frames as we'd expect in the correct order that we that we set before in the Figma plugin; it's yellow, gray and red. Okay, that's looking really good, and we've saved quite a lot of megabytes and kilobytes from all of our exports combined there. So, I think that's been a really good run through of what the differences can look like, and also tailoring the ordering based on visual order, or reverse layer order, depending on your use case. I just wanted to show you all of those different cases so you could get a get a good idea of what that would all look like, and really understand how it's working in the Figma plugin.

I think that's all for today. I just wanted to run you through that brand new feature in TinyImage; it's something that a lot of you have been requesting and it's something that I've actually wanted in my own use cases as well. I'm glad that we were able to ship that for you this week and I hope that it comes in handy when you are exporting compressed PDF files from Figma on a daily basis, or a weekly basis, or however often you need to do it; I hope this just helps out with your workflow a little bit more and saves you some time instead of you manually reordering those frames as you had to do before.

Thank you as always for watching, and I hope this comes in handy for you or your team if you do need to export compressed PDF files from Figma, specifically merged PDF files and being able to have all that control over the ordering and the export settings. Until next time, thank you, and we'll be back very soon with more Figma tutorials just like this.

---

---
type: tutorial
title: How to export a compressed PowerPoint file from Figma using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-08-11T00:00:00.000Z
dateModified: 2020-08-11T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-a-compressed-powerpoint-file-from-figma-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-a-compressed-powerpoint-file-from-figma-using-pitchdeck.md
---

# How to export a compressed PowerPoint file from Figma using Pitchdeck

#### Video Transcript

Today I'm going to be showing you how to export compressed PowerPoint files from Figma using a Figma plugin called Pitchdeck.

The first thing to do if you haven't already done so, is go to the Figma plugins directory in Figma; you can do that by going to the top left corner clicking on the little Figma icon going down to "Community", and then in the search bar if you type in the word "Pitchdeck" and click on the "Plugins" tab you'll see a result pop up called "Pitchdeck Presentation Studio", and on the right hand side you'll see a button that says either "Install" or "Installed"; I've already clicked in the install button, that's why mine says "Installed" with a little checkbox, but if yours just says "Install", if you click on that button it'll change to look like mine and once it says "Installed" with a little check mark on it then you're ready to go.

Once you've installed the Pitchdeck Figma plugin, you can jump back into your project. In my case, I'm just using a very simple presentation deck design based on Dieter Rams 10 Principles for Good Design. The first thing we need to do is just right click anywhere on the page, go down to "Plugins", and then go down to "Pitchdeck Presentation Studio" and click on that; and once you click on that you'll see the Pitchdeck Figma plugin loading up your slides. What this is doing is it's just going through all the slides on the left hand side that we can see all of our top level parent frames, and it's treating each of those parent frames as a slide.

Now that it's loaded, we can see if we go down the list, all of these slides here are matching up with the frames that we've got on the left side here; you can see "Principle 7", "Principle 6", "Intro", those are all correlating to our layers on the left hand side here; in this video I'm not going to be showing you how to animate the slides or add speaker notes or do anything of that nature, I have some other videos on this YouTube channel if you'd like to see an in-depth Figma tutorial on how to do that, but for this Figma tutorial I'm just going to show you a new feature which is compression, and specifically image compression for exporting these slides as a PowerPoint file that's going to be slightly smaller (or a lot smaller, hopefully) than what we'd usually see without any compression.

To export this presentation that we've already got set up, I'm already happy with all the layers, I'm happy with all of the ordering, I'm happy with the speaker notes that I've already got in place; all I want to do is just export this presentation to a file that I can use in PowerPoint Keynote or Google Slides, and the way I can do that is just by going up to the top right hand corner of the Figma plugin here and you can see a button called "Export Presentation", I'm just going to click on that and what that does is it just brings out a little export panel that will let us export this presentation from Figma to a variety of formats. In the top of the presentation Figma plugin settings panel you can see that we've got this little option called "Select Presentation Format", and if I click on that, you can see that there's a few formats that I can choose from; the first one is the "Animated Web Presentation", if you click on that, you'll see that it's the "Pitchdeck Presentation URL" format; this option will essentially upload this presentation to a web application, the Pitchdeck web application, and you'll be able to present this presentation from your browser. Then we've got some "Presentation Apps" options; we've got PowerPoint, Keynote and Google Slides. Then there's also a final one at the bottom just for a static export to a PDF file, but today we're not going to be focusing on that one, we're just going to be having a look at these middle ones here.

To export this presentation to PowerPoint, we just click on the "PowerPoint" option in the drop down, and you can see that changes here' of course we could change that to "Keynote" or "Google Slides", but in this case I'm just going to set it to "PowerPoint". Okay, there's a few options once we've selected "PowerPoint"; you can see here that we've got an "Image Quality" section; that's the one we're going to be focused on now and there's a couple of settings here: the first one is an option to use the retina images; checking this option will export all of the images in your presentation at 2x, they'll effectively be double the size but they'll remain the same dimensions; you'll get really sharp, really crisp images at the expense of the speed of the export, this does take a little bit longer to export because there's twice as much image data that needs to be exported from Figma and included into PowerPoint, but you are going to get much sharper images at that slower speed. The other thing is the file size will be larger as well; because we're exporting that at double the size the file size will be roughly double the size two, so for now I'm just going to turn that off.

The one I'm interested in for today is the second option which has just been added to the Figma plugin; this is a brand new feature which allows you to compress the images before you package up the PowerPoint file. If I click on that option, the "Compress Images" option, you can see here again it's just indicating that this is going to be slightly slower to export, because normally with you with you exporting uncompressed images that's just going straight from Figma into the PowerPoint file, this will add a middle step where it'll export the image data from Figma but it'll put it through a compression algorithm before it actually packages up your PowerPoint file; that's why it's going to be a little bit slower. Now that we've enabled that, it has enabled this slider as well; you can basically grab this little slider notch and drag that up and down, and you can see here it's changing the quality number at the end of the little label there and it's telling us that the highest setting is "Best Quality" and then it goes down all the way down to "Low Quality", and then there's sort of a middle ground here, too. What I'm just going to do is show you the difference between compression and and no compression with this export.

If I turn off the compression, I'm going to uncheck "Compress Images", I'm going to click on "Export for PowerPoint", and this is going to export my slides my presentation to PowerPoint without any image compression. You'll get a sense of what that file size is going to be initially and then we'll get a sense of how much we'll save via image compression. That's generated the PowerPoint file for me, so I can go ahead and click "Save", and that's just saved it to my desktop. I can close off the Figma plugin and jump to my desktop and you can see here it's saved the file the PowerPoint file, and it's 3.8 megabytes. I can open that up just to make sure that it's that it's all working well; that's going to be opened up in Keynote now just to preview it, and you can see here it's exported it as we'd expect we've got our images which have been exported to; that was saved at 3.8 megabytes.

Now let's re-run the Figma plugin, and this time I'm going to enable image compression and we can see what kind of file size we get once we compress those images; again I'm going to click on "Export Presentation", it's remembered my settings from before; I've still got my PowerPoint option selected; I'll leave that and this time I'm going to enable the "Image Compression" setting, and I can drag that up and down, of course, but in this case I'm just going to set it to about 70, which is sort of a middle ground for quality, and I'm going to click "Export to PowerPoint". Once again, it's doing the same thing, however this time as I mentioned before, we're going to see it compress those images instead of just saving them directly to PowerPoint. That's doing it right now, it's compressing all the images... and now it's finished. It doesn't take too much longer, it really does depend on how many images you have, it also depends on if you've got a lot of transparent images, a lot of PNGs to compress, as that does take longer than JPGs as well, these are mostly JPG, so that's why it's quite quick, and there weren't as many images as you might have in your presentation as well.

Now that we've we've exported that, you can see here that immediately there's a file size difference; we've gone from 3.8 megabytes down to 2.4 megabytes, and again I can just open that up; I'll open it up in Keynote just to preview it, and you can see here that the images are all there as would expect, and if you look really closely you can tell that there has been some compression applied, but again, it's very difficult to tell. If you were viewing this on a projector or a huge screen for presenting this to people, you would not be able to tell the difference in quality.

I'm just going to do one more export and just reduce the quality again, and let's have a look at what kind of file size we can get if we bring that quality slider down even further. So, one last time I'm just going to click the "Export" button, and I'm just going to drag this down to about 40, which is low but it's not as low as it could be; maybe I'll just go to 35 just to make it even lower, and once again I'm just going to click "Export for PowerPoint" to export our Figma slides into PowerPoint, and once again you'll see it start to compress these images in a moment, and it shouldn't take too much longer, it may actually even be quicker than last time. There we go, it's just finished saving it; I'm going to save that to my desktop once again, and if I inspect that this time we've made it down to 2.3mb; it's kind of a bit of diminishing returns with the lower quality, and that may be based on the kinds of images that I'm using as well, they're fairly simple. I can tell a little bit more that these have been compressed, but they're actually not too bad considering how low the compression quality was set.

That's a rough idea of what the compression settings can do for your PowerPoint files; again, this is a very simple file and there's really not heaps going on as far as images go, the images aren't all that large, they're not all that detailed, so if you're using photos more similar to this one then you're probably going to notice even more savings. This can be really handy if you need to send your PowerPoint files or your Keynote files via Slack or via email or something with sensitive file size limits, so adding compression can be a nice way of getting those file sizes down if you are dealing with larger decks or if you're dealing with using the retina image option and enabling that.

That was just a quick Figma tutorial on how to add image compression to your PowerPoint files, or Keynote files, or Google Slides files from your Figma slides and that's all I wanted to show you today; it's just a quick one, but I hope that you get some benefit from it in your own workflow; give it a go and see what it's like. Thank you, as always, for watching and we'll be back soon with more Figma tutorials just like this.

---

---
type: article
title: Building a Figma converter plugin
description: After months (of 10 hour days) in development, our new Figma plugin converts designs from Figma to Sketch in one click.
datePublished: 2020-08-10T00:00:00.000Z
dateModified: 2020-08-10T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/building-a-figma-converter-plugin/
markdownUrl: https://www.hypermatic.com/articles/building-a-figma-converter-plugin.md
---

# Building a Figma converter plugin

Like most of the world, we've been trapped inside our homes for the better part of 6 months now. Early on during the lockdown, I asked "how could this time be used effectively so we build something that we're proud of by the time we're nearing the tail end?"

Building a "Figma to (insert design tool here)" converter had been on my mind for a little while, but I left it to one side, as I knew it would be a tremendous amount of work, and I wanted to give priority to working on our existing Figma plugins before considering embarking on a new mission.

The idea was very stubborn in my mind and was the one that kept coming back to me by the time it was time to start working on a new plugin. In the same way that Figma natively imports Sketch files, I really like the idea of being able to export Figma designs to other tools, and building a plugin seemed like a great way to build "the missing export options" for Figma.

Shortly after releasing our <a href="/pitchdeck">Pitchdeck</a> plugin and publishing some early customer feedback requests back in May, work began on a brand new Figma plugin (called "Magic" at the time), which would go on to become <a href="/convertify">Convertify</a>, released a few days ago.

### Crossing the Chasm ("why build this?")

The first question you might ask is "why build this?", it's is a reasonable question to ask - you probably love Figma, we certainly love Figma - why would anyone want something that converts designs from Figma to Sketch, or another design tool? While it's easy to be in the Figma bubble, the truth is that not _everyone_ is on board the Figma train just yet. When you're working at a company that does use Figma, often you'll also be working with _other_ companies who do not use Figma. Different companies move at very different speeds; for example, when I helped move my last agency to Figma from Sketch in early 2018, other agencies I talked to were in the final stages of moving away from Photoshop to Sketch.

Due to this inconsistency between companies (and even teams within the same company), there often is a real need to send designs between collaborating teams or companies in the format that _they_ use internally. It's not enough to say "we use Figma and everything's in Figma, so you'll just have to use Figma, too"; unfortunately, it's not so simple. Some companies have really strict policies in place about what software they're allowed to use and what software isn't allowed. Especially with Figma being cloud based (which is obviously a huge plus!), some companies are really conservative about switching to new software like this.

That's all cool... as per Geoffrey Moore's book "Crossing the Chasm", the adoption curve doesn't consists entirely of "early adopters", it's expected to see a whole bunch of companies take years longer than the "innovators" (like you early Figma users).

### Flying Blind

The first thing you quickly realise when starting a project like this is that you're essentially working with nothing. There isn't really a handbook or a "how-to" guide for building a Figma converter plugin; what this means is that you basically have to "reverse engineer" (to make it sound cool) these files for yourself, and work backwards.

Unfortunately, there's no single "magic" moment or discovery that made this an easy undertaking, by any stretch. The way I would describe it as something like a thousand mini mountains that you need to climb and then go back to basecamp and do it again.

To give one concrete example, I believe it took 3-4 days straight just to convert an image crop from Figma over to Sketch, which evidently does not actually support non-destructive image crops, so it had to be "visually emulated" by creating a mask layer and retaining the original Figma image inside of it with the correct crop offset.

If you take the crop example and apply it to every "minor" detail of a design, you start to have some picture of what it's like to work through hundreds of these seemingly trivial things.

### The Road Ahead

We deliberately only launched with Sketch support, as it seemed like the obvious choice to get into the hands of designers first, being the most widespread tool besides Figma. We wanted to get this into the hands of designers as soon as possible and learn about what new features would be most important and valuable to those facing this problem on a regular basis.

Having said that, work is also currently underway for supporting other popular design tools, so please stay tuned for more updates soon!

---

---
type: tutorial
title: How to convert Figma to Sketch files in one click using Convertify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-08-08T00:00:00.000Z
dateModified: 2020-08-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-convert-figma-to-sketch-files-in-one-click-using-convertify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-convert-figma-to-sketch-files-in-one-click-using-convertify.md
---

# How to convert Figma to Sketch files in one click using Convertify

#### Video Transcript

Today I'm going to be showing you how to convert your designs from Figma to Sketch files using a Figma plugin called Convertify.

To use Convertify, we just need to install it from the Figma plugin directory. If you haven't already done so, to do that we can just go up to our little Figma icon in the top left of the app and click on that, and then if you go down to "Community" or "Plugins", it's probably just easiest to search for the word "Convertify". If you search for that you'll see a result pop-up called "Convertify Figma to Sketch". I've already got it installed, that's why I've got a little checkbox here with the word "installed" next to it, but yours might just say "install" and in that case you want to go ahead and click on the button on the right hand side and wait for it to say "installed", then you'll be ready to go. Now that we've got the Convertify Figma plugin installed, I can switch back into my Figma project.

I've got a few projects that I'm going to go through just to show you what it looks like to convert different types of files; for now I'm just going to use this "Apple UI Kit" design; and the first thing we need to do is just right click anywhere go down to "Plugins" and then click on "Convertify Figma to Sketch", and that's going to fire up the Figma plugin we just installed a moment ago. Once it loads you'll see that the interface is very simple, there's only a few things going on here, the first one is the page name; you can see at the top it's got the word
"Cover Page" which correlates to the page that I'm currently on, if I were to change the page that I'm on, you'll notice that the page name changes in the Figma plugin as well; it responds to whatever the page is currently being selected. The second thing you'll notice is that we've got a little time estimate here; it's estimating that on this page it's going to take roughly 14 seconds to convert 557 layers, and that estimate will change again dynamically based on what page you select; if there's more layers typically it'll take longer to convert and if there's less it'll be much quicker; in this case I'm just going to use the cover page and it's telling us it should take roughly 14 seconds.

The only thing to do here is click on the button that says "Convert to Sketch", and as you can see with the icon it's telling us that it's going to convert our design from Figma to a Sketch file for us. I'm going to go ahead and click on that "Convert to Sketch" button now, and you can see here it's telling us that it's converting, we can see the little animation happening implying that the layers are currently being processed, and now it's bundling our Sketch file, packaging that up for us, and there we go. It's giving us a little download prompt, and by default it will name it whatever your Figma file is called and then in brackets it will add the page name that you've selected and today's date as well; you can of course rename this if you want to, but in my case I'm just going to leave it as the default and save it to my desktop. Just click "Save", and once again we can see the confirmation message is just telling us that the Sketch file is ready and telling us that we can download it. Now that I've downloaded it, I'm just going to go to my desktop and I can see here that it has indeed saved it to my desktop with the file name. We can also see here that there's a file type of a "Sketch drawing"; which is a dot Sketch file.

Now that I've got that saved, I can just double click on that and that will open it up for me in Sketch. Here we go, I've got Sketch open, and you can see it's converted our design from Figma as we'd expect. If I put those side by side just to make it a little bit easier for you to see, I'll close off the Figma plugin and you can see if we line these up, it has converted them just as we'd expect from Figma. This is all editable text, so if we wanted to edit this layer, you can edit that text and that is all as you'd expect. It's now saying "Sketch from Figma", and I'm just going to update that.

You can see down here we've got these these little groups, these are being saved as Sketch groups, so I can drag those around and that'll all move together. If I expand my layers you can see if we compare it to Figma, all the layers have been carried over; we can see "22nd of June" and "22nd of June", and all the layers are in order and all as you'd expect. Same thing with images, layers have all been exported with images; we've got images, we've got an image fill over here, we've got shadows, we can turn those on and off just as you'd expect, and it's really carrying over every layer one for one from Figma itself. That's really cool! That was a one-click process; very, very quick, as you saw. This file only has about 500 layers, so that's why it was it was fairly quick, but now I'm just going to go through a couple of other file types to show you what they look like as well. I'll close off this file for the time being and just make Figma a little bit bigger once again, and I'm going to switch over to a much simpler file; this one is just a three frame file, it's three very simple frames and I just want to show you the speed of of it converting a very simple file.

I'm just going to click on the "Convertify" icon, now that we've already run it once in this file, you'll see it pop up on the right hand side in Figma; you can just click on the little "Convertify" icon and you'll see the little subtitle that says "Convert page to Sketch", just telling you what it's going to be doing. That's just a really quick way of firing up the Figma plugin again. Once again, it's just giving us the page name; we can confirm that it's going to convert the "Master Page" and because this file only has 57 layers, it's telling us it's going to take about one second. We can try that out once again just by clicking on the "Convert to Sketch" button, and it's fairly accurate, as it took literally one second to convert that Figma design. That's just an idea of how fast it can actually export files if you if you have a really small file; it's very quick.

I can open that one up just to see what it looks like, and that's opened it up for us in Sketch. The thing I wanted to call out in this file is that because I didn't have the font installed on my computer, Sketch is telling me up in the top right hand corner here that it's got missing fonts; if I click on that little "Missing Fonts" button, it's just going to come up with a little drop down saying these three fonts couldn't be found on the system. We can manually replace them, I can do that now, and I think that the ones used in the design were slightly different versions from the one that I had on my computer; if that happens to you, this is all you have to do, you just have to go through the missing fonts by clicking on that button in the top right and then once you've selected the replacements, just click on the "Confirm" button in the Sketch dialog, and you can see here it's swapped those fonts out and now we're looking very similar (or exactly the same, rather) to what we can see in our Figma file and once again these are now editable; I can update that textto say "Figma to Sketch" and that will update for me; I'll just bring that out a little bit more, there we go. As before, all of the layers have been carried over, we've got our vector layers; these are these are fully carried over from Figma and I can move those around, obviously. I just wanted to show you what the font the missing fonts prompt would look like and show you how to replace those fonts if you do run into that issue, and also just show you the speed at which it can convert files with less layers.

Okay, now that we've done Figma file number two, I just wanted to show you another file; this is a little bit of a different type of file, this is one with multiple frames, multiple layers, multiple components being used and I just wanted to show you what it looks like to convert a file like this. Once again, we can go to the right hand column click on Convertify; I'll fire that up once again and the thing that I wanted to demo in this file is if you are working in a much larger file with heaps of screens and heaps of things going on and you want to send this to somebody; it's got an exact replica of what they would normally see when they open it up in Figma. I've just purposefully zoomed in on this exact spot here, I can even zoom in a little bit more if I wanted to or I could just zoom to fit and I just wanted to show you what it looks like when it replicates the zoom level over.

If we click on "Convert to Sketch", I'll just leave this running in the background, this one has over 2,000 layers; it's going to take more like 54 seconds and the little note here just says it may actually be faster or slower depending on the number of nested layers or large images that the file has. You can see here it's actually taken less than 54 seconds in this case but if you do have really big images that can slow down the conversion a little bit; I'm just going to save that and I'm not going to move the zoom level or the the bounds scroll level in Figma, and I'm just going to show you what that looks like when I open up the Sketch file for the very first time. If I double click on this and open it up you can see here that it's exactly mirrored the zoom level and it's exactly mirrored the positioning of where I had the the Figma view when I when I converted it; you can see here if we compare them we've got 22 zoom in Sketch and we've got a 22 zoom in Figma. Converting it from Figma to Sketch with that zoom level and with that positioning; in my my case I clicked on the "zoom to fit" function which centered everything; that means that when I send this file to another designer they're going to have exactly the same overview exactly the same positioning and zoom that I wanted to have in Figma. Obviously because Figma is a multiplayer app where you can have different designers at the same time this this isn't an issue in Figma, but I just wanted to show you how it does actually carry over that zoom. I if I were to do another example, and if I was working on this particular part of the the app or the design if I run the Convertify Figma plugin once more, and now I've got it zoomed in at 100, and I've got it focused on this little profile mockup with this little modal that should open it up in Sketch zoomed in at 100 and focus on this exact same artboard.

The other thing to note is it tells you down here that Figma will freeze up during this phase of the conversion where it's going through all of the layers; I just want to point that out as well in case you're wondering why the UI is unresponsive while the the Figma plugin is converting; that's totally normal. I've just re-exported this one, and again if I double click on this and open it in Sketch, we should see a different zoom level and a different scroll level; we can see here if I put those side by side it has replicated that zoom level and it's replicated the exact point where I scrolled to in the Figma design. That's just a neat feature that the Figma plugin offers and it's just a nice way of being able to zoom to fit everything or zoom in on a particular part in your Figma design before you actually package it up for another designer. In my case, I really like using the "zoom to fit" function and just making it show everything, just so whoever's receiving that Sketch file will get a clear overview of what the file contains, but again, that choice is is totally up to you.

The next thing I want to show is a much larger file; this is a design system and this is one of the biggest ones that I'm aware of. This is the "Ant Design System", it's an open source design system and I'm just going to show you what it looks like to convert a file of this this size, because there's quite a lot going on here; there's quite a lot of components, there's quite a lot of layers and I just wanted to show you what that looks like in terms of speed, but also what that looked like in terms of detail. I'm just going to convert it now because it's going to take about three to four minutes, but this one has almost 10,000 layers, so this is a fairly large file. I'm just going to start converting this from Figma to Sketch now by clicking on the "Convert to Sketch" button, and once again you'll see down here it's telling us that it's being converted, it's converting the page. I just touched on this a moment ago, but it does let you know that Figma will freeze and that's totally normal; for example if I try and click on anything Figma, is completely unresponsive and just while this is converting, I'll touch on why that is happening. The reason why I can't move the Figma plugin around and I can't keep working while the Figma plugin is running is because the functions that the plugin is doing behind the scenes, using the Figma Plugin API, by necessity calling these Figma Plugin APIs basically hijacks the main thread of Figma; while the Figma plugin is doing intensive querying and intensive work behind the scenes, querying your Figma design data, Figma basically diverts all of the processing power to that that plugin process; that's the reason why the UI completely locks up; it basically doesn't do both things at the same time. Normally, this would be fine because a lot of Figma plugin functions are very quick or don't do very much, but because this Figma plugin literally trawls through every single layer, in this case almost 10,000 layers, and is querying image data it's manipulating data behind the scenes, it's doing a lot of intensive work in order to generate these Sketch files from Figma and translate all those Figma layers into Sketch layers, converting all those layers, so that's why it freezes the IU, basically. That's a long a long way to say: it's totally normal and you don't have to panic or wonder if it's broken; that's also the reason why it's giving you a time estimate there, because if you're just seeing that kind of spinning around in circles you're wondering "it is it actually going to finish or not?", and as we saw in the last two, this isn't really an issue when you have smaller files, but again that's why I wanted to show you in real time what it looks like to convert a file with 10,000 layers.

Okay, now that the conversion process is done, you can see that it's now up to the step of bundling the Sketch file, which means that the UI is responsive once again because the processing part is finished. It's literally now just packaging up a Sketch file with all of the image assets, all of the layer assets, and all of the files for us. It's just finished that, and you can see here it's giving us the choice to save it with the project name and the page name; again I'm just going to opt-in for the default file name and save that to my desktop. I'll close off the Figma plugin, and I'll just make the window a little bit smaller so we can compare that. If I jump back to my desktop, you can see here it's converted the Ant Design System; I'm going to double click on that file let Sketch open it up for us, and there we go. If I put those side by side once again, you can see that the positioning has stayed the same as we saw in the last segment and it's basically converted all of our artboards with all the names that we'd expect, "Navigation", "Data Entry" and I'll give you a quick overview of the full file, because it's quite large; but you can see that it has basically gone through and converted all of those. If I just zoom in a little bit, you can see what that looks like; if we jump to same one in Figma and try to compare those a little bit, now we're basically looking at the same sections and you can see that it's gone ahead and converted all those layers. Once again, I can jump in here and edit these files, edit these layers, that's my Figma to Sketch text layer; I can edit that of course and these groups I can move them around as you'd expect. So, that's what it looks like to convert a Figma file with 10,000 layers over to Sketch in a few minutes. Once again, doing this manually would be a project that would take days of time ,if not longer in this case, to convert all of these files and designs from Figma to Sketch manually. I've seen it happen before with designers I used to work with, where they had to do this for certain clients and it took days, if not weeks of time to get it done if you do it manually. So, that's what it looks like to convert a really big file from Figma to Sketch..

The final one I want to show you is just another sort of wireframing kit, or design system kit; the reason I want to show this one is because there's quite a lot of vectors in there, and I just wanted to emphasize what that looks like when they get carried over, too. If I just click on the "Convertify" icon again, I'll close off my Sketch file and make Figma a little bit bigger. Okay, again,this one has about 7,000 layers, so I'm just going to convert that from Figma to Sketch now, as it's going to take roughly three minutes. Again, it depends on how many nested layers there are and how many large images there are, I don't think this one has heaps of large images, so the bundling time should be a little bit faster, but the number of layers and the number of nested layers is really what determines this particular phase of the conversion from Figma to Sketch, when it's going through all of the Figma layers and extracting the data from them translating that into the Sketch format; that's really where the intensive stuff happens and that's where it's trawling through all of those layers and sub layers in order to to get all those Sketch layers the way that they should be. Once again, this is just going to freeze up the UI for a little bit, it's nothing to to worry about or panic about, it will eventually finish, so you can just leave it for for a couple of minutes and that'll work. Once this converts, I'm going to show you a couple of things; the one thing that Sketch doesn't support is colored backgrounds, so in our case here we've got a green background on the the canvas, but unfortunately Sketch does not support that. We'll see in a minute that it looks a little bit different just because of that, but besides that it should convert everything else. There's also a few other things that Sketch doesn't support which Convertify kind of emulates and makes up for; things like frames, where you can clip frame content, that's not actually supported in Sketch groups, so Convertify does some things behind the scenes to emulate that visually and make sure that it still looks the same.

Okay, we've just finished converting this wireframe kit, so if I close off my Figma plugin again, jump to my desktop and open up the wireframe kit file we just exported from Figma to Sketch, we can see that the Sketch file as I mentioned does not have a green canvas background because that's not a supported feature in Sketch, but everything else has been carried over. Again, just before I converted, I just wanted to call out the vectors; all of the vector all of the vector assets or parts of the design have been carried over; things like these characters over here, we can see that they're quite trendy at the moment, you've probably seen them in a bunch of places; if we just zoom in on those you can see here once again I've got missing fonts, and I'm not I'm not going to replace those this time, but if you do need to you can just click on the top right hand corner, and these particular fonts that were installed by the designer who did this design, I don't have this font on my computer, that's why it's asking me to to replace them now that I actually want to be able to edit them, but I just did want to call out the the vectors mainly, rather than the typography anyway. You can see here that it's converted those vectors, and they're looking as we'd expect from Figma, they've all been carried over to Sketch, and that's really nice. That was the the example for showing off some of the vector conversion; you can see here, it's quite a big file as well, if we zoom out. All of the artboards have been converted from Figma to Sketch, and once again we haven't had to recreate all of these layers' you can see just how many layers there are by going through the number of artboards and the number of layers; it's just crazy. Basically, we've just saved potentially days or weeks worth of work if we did need to convert this Figma design over to Sketch manually.

Okay, we've converted a number of files now, and I think that's a really good glimpse at what the Figma plugin does, what it looks like to convert your designs from Figma to Sketch files, and also to show you the the variance in speed, the variance in performance and show you what those different types of layers look like; text layers, group layers, vector layers all those sorts of things getting carried over from your designs from Figma to Sketch. I hope that that's been a valuable Figma tutorial for anyone who's been trying to convert their files from Figma to Sketch without using those weird workarounds where you have to "copy as SVG" over to Sketch and end up with this really awkward, non-editable, version of your design in Sketch. Well, you don't have to do any of that here; as we've just seen we can get all of that benefit with real layers from Figma to Sketch automatically, so you don't have to manually get your designers to do this, you can just run the Convertify Figma plugin let it do all of the work for you to get those real Sketch files that don't have any weird SVG hacks or anything like that, and just get those real layers converted from Figma to Sketch.

Thank you as always for tuning in! I hope you found this Figma tutorial valuable and I hope that it's something you'll be able to take back to your team or try in your workplace if you're needing to convert your designs from Figma to Sketch for some reason; Covertify is the only Figma coverter plugin that you can currently get to convert your designs from Figma to Sketch. Feel free to give it a try! You can install it today and give it a go on your own designs and see how it goes. Thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: article
title: Figma vs Adobe XD
description: My comparisons as someone who has used both Adobe XD and Figma (in 2020).
datePublished: 2020-07-15T00:00:00.000Z
dateModified: 2020-07-15T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/figma-vs-adobe-xd/
markdownUrl: https://www.hypermatic.com/articles/figma-vs-adobe-xd.md
---

# Figma vs Adobe XD

After a few years under development (as a response to Sketch quickly leaving Photoshop in the dust as the UI design tool of choice in the early 2010s'), Adobe XD was first released (out of BETA) in October 2017.

I've kept an eye on Adobe XD since it was released; in its earlier stages, I felt like it really couldn't compete with Sketch, and felt it was kind of "too little, too late" from Adobe. However, since then, XD has shipped a bunch of new features that have helped bring it into the "top 3" UI design apps, alongside Figma and Sketch to be a real competitor.

At this stage, I think the gap has narrowed, and might still make sense if you're trapped in the Adobe Creative Cloud. As we'll see later in the article, there are places where XD has an advantage over Sketch or Figma.

### How designers work with developers in Figma vs Adobe XD

Adobe XD has a feature that lets you "publish design specs" and share a link that you can give to developers. This URL essentially loads up the designs in a web browser, and shows you a summary of all the colours and fonts used in the design, as well as letting you click on individual elements and seeing some of the sizing values associated with them.

In this scenario, I think Figma is still ahead. In Figma, you'll be able to invite developers directly into the Figma file, so they can view it in real-time and jump straight into the "code" panel, where they can view any element's properties broken down into "CSS", "iOS" and "Android" options.

These are awesome, as you can literally copy/paste _real_ code directly from Figma into your codebase, without having to translate all the random properties into their respective styles (depending on your codebase).

This is such a crucial feature that Figma offers, as it means you really don't need to leave the one app and use other 3rd party services.

If you are using XD, then 3rd party "handoff" services like Zeplin, Avocode or Sympli are likely going to be required, as I don't think the Adobe XD feature is quite streamlined or detailed enough for a developer's normal workflow.

However, this does come with a downside, as you'll need to continue making sure the designs are in sync with those 3rd party services, so you add the risk of a developer working off old designs. Again, with Figma, this is not an issue, and the developers are always going to be on the same page (literally) as the designers.

### Performance of Figma vs Adobe XD

While Figma can be run in either the desktop or in the browser, Adobe still requires you to have Adobe Creative Cloud installed and also a Adobe XD desktop app in order to use the software. This might not be an issue if you're already using the Creative Cloud suite, but it does feel less "portable" than Figma, which can be spun up on any computer in the web browser (with no other dependencies).

In terms of actual performance, Figma uses WebGL under the hood and can handle very large design files without seeing much slowdown at all; it's notably extremely smooth.

Adobe XD generally performs fairly well, but there are lots of reports from people online who are experiencing slowdowns with larger files or working from the "cloud" (instead of local files).

I still believe being built on web technologies is a very underrated aspect of Figma, and I would speculate that they will be in a much better spot in the future when rolling out bigger product updates.

### Figma plugins vs Adobe XD plugins

There was a time when Adobe XD users might have shunned Figma for not having plugins, but that ended in August 2019, when Figma opened its own plugin directory. Just like Figma (but unlike Sketch), Adobe XD has a plugin directly built into their app, which is great.

At the time of writing Adobe has _256 plugins_ in its directory available to install. Despite being around for longer than Figma's plugins, Figma has more than _triple_ that amount currently live in its native plugin directory.

There is some cross-over between the plugins that Figma has and the plugins that Adobe XD has; but it does seem that Figma has the upper hand on plugins, if not for sheer amount of choice and variety.

### Collaborating with the rest of your team in Figma vs Adobe XD

While Figma has had collaboration (or "multiplayer mode") since its inception, which was a core difference to any other design tool at the time, Adobe XD did not launch with real-time collaboration.

It was until November 2019, when Adobe XD introduced a BETA with support for the same feature that Figma had become so loved for. This has helped bridge the fundamental divide between Adobe XD and Figma.

This is now an advantage that Figma and Adobe XD both have over Sketch, which announced real-time collaboration about a year ago, but hasn't started shipping it yet. In this respect, Adobe XD and Figma are relatively similar (and ahead of Sketch) as of 2020.

### Learning Figma if you're coming from Adobe XD

If you've been an Adobe XD user, but you're thinking of making the switch to Figma, the good news is that the learning curve will be very low.

Figma has all of the features you've come to expect in Adobe XD, with a bunch more that will serve as nice little surprises as you explore the feature set over time.

Unfortunately, Figma doesn't support importing your Adobe XD files (as it does with the native Sketch file importer, which works well), so you'll likely need to move any legacy designs over manually or use a third party service to help with this.

### Some advantages that using Adobe XD might have over using Figma

#### Adobe XD plays nice with other Adobe software

If you or your company are already signed up to Adobe Create Cloud and use their suite of other products, then Adobe XD might make sense to adopt as your primary UI design tool, especially if you need some level of interplay with Photoshop, Illustrator or After Effects.

Figma (and Sketch) have not taken to supporting the Adobe ecosystem, opening their files or exporting files out to those formats so far. This may change in the future (it seems unlikely), but for now, if you do need to work with those other Adobe products, then XD might be a good choice for now.

#### Adobe XD supports prototyping voice interactions

The one area I have to give Adobe credit for is their initiative to focus on an area of design that seems fairly neglected industry-wide, so I would say that it's fairly underrated at this stage.

With Adobe XD, you can use your voice as a "trigger" to initiate an interaction in your design prototype.

While this is a nice bonus that you get in Adobe XD, I can't imagine that it would be a huge undertaking for Figma to expand its own prototyping feature set and include "voice" at some stage in the future; once again reducing the distance between Adobe XD and Figma's differences.

### Figma is the future; but if you can't escape the the Adobe ecosytem, XD might still be your best bet

While I believe Figma is still the best overall UI design tool, Adobe XD is a decent alternative if you can't leave the Adobe Creative Cloud in your own company. They are comparable enough that you're not going to be suffering as you might if you were still forced to used Photoshop for some reason.

It's my hope that Figma and Adobe XD could continue to innovate in parallel, and cross-pollinate the best of each other; for example, Adobe XD adding "multiplayer", in the same way that Figma could add "voice" into their prototyping features. Having the two exist is a net positive, so I don't think we need to say one is "bad" and another is "good"; they can both co-exist just fine.

---

---
type: tutorial
title: How to export compressed PDFs in CMYK from Figma
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-07-08T00:00:00.000Z
dateModified: 2020-07-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-compressed-pd-fs-in-cmyk-from-figma/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-compressed-pd-fs-in-cmyk-from-figma.md
---

# How to export compressed PDFs in CMYK from Figma

#### Video Transcript

Today, I'm going to be showing you how to export PDF files from Figma with CMYK export settings, which you would typically use if you wanted to use the PDF for print purposes. At the moment Figma does not let you export PDF files with any sort of color profile settings, so that's what we're going to be looking at today.

The first step is installing a Figma plugin called TinyImage. If you haven't already done that, you can go to the top left corner up here with a little Figma icon and if you click on that you'll see a little search bar up here, you may have to click on "Community" or "Plugins" first, but once you do type in the search bar the word "TinyImage", underneath "plugins" you'll see a result called "TinyImage Compressor" pop-up. If you haven't already installed it, you'll see a button on the right hand side that says "install"; and if you click on that it'll change to say "installed" with this little check mark, and once you've got that checkmark, you're ready to ready to roll and you can jump back into your Figma design project.

I'm just going to be using this simple three frame design, which are Figma's design principles as a bit of an example. The first thing we need to do is just right click anywhere on the page, go down to plugins, and then go down to "TinyImage Compressor" and click on that. That's just going to run the Figma plugin we just installed a moment ago, and you can see here that I've got my three frames listed, and the reason that they're being listed is because I've already listed all of them as PDFs; and what I mean by that is if you click on any of your frames, and in the right-hand side you'll see a little title called }"Export"; if you click on the plus symbol it'll let you add export settings.

At the moment I've got a PDF setting, and I just added a PNG setting; if I refresh my TinyImage interface you can see that PNG has just been picked up, but for this case I just want PDF; I'm going to remove that and refresh, and you can see PDFs back again. If I just select my frames once again, it's just going to list all of the detected export settings in my file; all I've done is just applied a PDF export to all three frames. By default, Figma when it exports PDF files it will always export them in RGB, which is basically the color profile that you would typically want to use if you are viewing PDF files on a computer screen or on a TV or on a monitor, it's typically not the format that you would choose if you were going to be using a PDF file for print; when you're using a PDF file for print ideally you're probably going to be asked to provide something that's been exported in CMYK; this is a different color profile to RGB, but as I said the default and the only option for exporting PDFs natively from Figma is an RGB export. I'm just going to be showing you how to use TinyImage to export these PDF files in the CMYK format that we want to use.

What we need to do, is click on the little "settings" icon that you can see my mouse over now just on the right hand side here, if you click on that icon it's going to bring up a whole list of settings for us. You can see here it's got JPEG settings, PDF color profile settings, PDF password projection settings, custom image file name format settings, all that good stuff; for today I'm not going to be requiring the password protection, I've got another Figma tutorial on that if you're interested in password protecting your PDF files, you can check that out on the YouTube channel.

Today, I'm only going to be focusing on the second setting here, which is the "PDF color profile" setting; you can see here that if you hover over the the drop-down, the default is being set to "RGB", which is the color profile that Figma normally exports as; that's the default, and then the second option we've got here is "CMYK" and in brackets "for print", and there's also a third option which is the "Grayscale" option. The RGB option, I'm just going to select that for now, and show you what that looks like just; you've got an idea as a baseline. I might just uncheck those I'll just do one for now if you want to change the DPI; you can see over here it's got the DPI it's going to get saved at, and all you need to do is change this slider up here and that's going to change the dpi; the lowest quality correlates to 72 dpi, the good quality on medium is 150 dpi, and 300 dpi is the maximum setting; this will give you the best quality but also at the highest file size and at the opposite end you get the best possible file size savings but the quality won't be as good; I tend to just keep it around the middle and go with 150 dpi. Now that I've got my frame selected all I'm going to do is export the RGB version first and just click "Compress Selected" to show you what that looks like; it'll be very quick.

It's already done, and I'm just going to save that as my first one, and I'm just going to put "RGB" in the file name and click "Save" and save that to my desktop; and there we go we've got our PDF file as we'd expect, and you can see here due to the nature of the Figma plugin being a compression plugin, the original file size that Figma saves PDFs out that would have resulted in a 6 megabyte file and because we're running it through TinyImage that's come out at 166 kilobytes giving us a saving of 97%, which is which is really good.

So, that's the RGB one, and I'm just going to restart the Figma plugin; you can click close, and if you want to restart it really quickly, all you need to do is go over to the right-hand side here once you've run the Figma plugin once in a page you'll see this little option on the right-hand side under the title "Plugin", and you'll see the little milk bottle icon with TinyImage there if you click on that that will save you from having to right-click on the page go down to plugins go down to the Figma plugin name this is just a one-click way of relaunching.

Now that we've just given the RGB version a go, I'm just going to go back into the settings option; if I click on that "settings" icon once again and underneath "PDF color profile", this time I'm going to click on that again, and this time I'm going to select "CMYK "(For Print)". I've selected that now; I don't have to click save, I can just get out of that and this is now going to export it to CMYK. Once again I'm going to click "Compress Selected", and in a moment we should get the CMYK version. Now I'm just going to tag that "CMYK"; there we go, I've got my CMYK one and you can see here it's exported it just as it would expect as well.

At first glance while they look exactly the same; this is the RGB one and then if I open up the CMYK one right alongside it, it might not be super obvious to tell from where you're looking, but on my screen I can clearly see a difference between the left and the right; on the right hand side we've got our CMYK; that's the one we just exported and then on the left hand side we've got our original one which was the RGB and if you if you can tell just by looking at your screen right now as I can on the left the red is much more vibrant it's much more illuminated and on the right hand side it's much more muted and it just has a very different sort of tone to it. That's the result that we actually want, we want them to be different, they're two different color profiles; the one on the right we would be using in a print scenario most likely and the one on the left the RGB one this is what we would be using whenever we want to send a PDF that's intended to be viewed on a computer screen and intended to be viewed on an ipad something like; that anything that's not print you would want to use RGB. That's great; that's working just as would expect the CMYK is turned out well.

There's one more color profile we can use which is grayscale. To show you what that looks like to just out of interest; this time I'm just going to use this exact same PDF file and I'm going to go to my settings and once again you can see it's previously been set to "CMYK" but once again I'm going to change that to a new setting; the last setting is "Grayscale", and if I click on that and just select it again and once again, just click on "Compress Selected", this time instead of getting a CMYK PDF from Figma we're going to get a grayscale PDF. This is something that I personally don't don't use, I haven't had to use grayscalel but it could be handy in in some scenarios. The grayscale one if I open that up you can see here it's it does what it says on the box, it will give you a grayscale PDF. Everything's grayscale, everything's black and white and that's in stark contrast to the RGB and the CMYK one.

Those are basically the three color profiles that TinyImage gives you as options for exporting; that's all three of them now you can see there's a little bit of a file difference between them, nothing too crazy the RGB one is 171 kilobytes, the CMYK PDF that we exported from Figma is 202 kilobytes, and finally the one we just exported is 167 kilobytes. The grayscale one is marginally smaller, CMYK is marginally larger, but overall it's still a 97 to 98 percent saving from whatever you would get originally from native Figma PDF exports.

The last thing I'm going to show you is slightly unrelated to the color profile itself, but if you wanted to export a merged copy of these PDFs, you can do that by clicking on the button I just clicked on; if you didn't catch that that was me clicking on this button up the top here; in the top left I've got this button called "Create a PDF". If I click on that, this setting is different from the default one; this setting essentially looks at all of the top-level frames inside of your Figma file; if we look at the left hand side right now underneath the layers you can see I've got three parent frames: "approachable", "thoughtful" and "professional"; those are being loaded in over here; it's not relying on the export settings as our main panel was when we just want to export different formats to individual files; the purpose of this function is to merge multiple parent level frames sort of larger frames into a single PDF file; instead of doing three different ones with the regular exports, this is going to actually merge the three into one.

You can see here we've got the exact same options as we did before; I've got "RGB", "CMYK" and "Grayscale", as I said before "password projection", I've got another video on that if you're interested in that but you can you can enable that down here too and these are actually rearranged; you can rearrange the order of those frames and you don't have to touch your frame order in your Figma layers; these are independent they'll be saved in the plugin between uses; you can go back and re-export files in the order that you set them set them in here and of course you can you can deselect or select whichever ones you you like; in this case I'm just going to do "RGB"... actually, I'll do "CMYK".

The last little edge case that I'll touch on is: you might have noticed there's a little toggle underneath the color profile options; I've got the CMYK PDF, RGB PDF and grayscale PDF; those are all fine, but there is an edge case if you're exporting vector paths. If you're drawing a blob or something with the pen tool and you give it a vector background or a vector fill, the RGB compression by default will ignore the gradient fill on that particular vector path, that vector style, and it'll use just a solid color. If you do come across that, it's not all that common, but if you do come across it there's an additional option here which is "enable gradient fills for vector paths"; it will take slightly longer, but that just resolves that little that little issue with the exports of vector paths that have gradients; in my case I don't have any gradients, I don't have any any blobs or any paths like that really, so I don't need that option; but if you do encounter that, that's the option you can use and it'll fix it right up.

Okay, I'm going to select CMYK once again; this is going to give me a merged CMYK color profile for my pdfs from my figured in Figma designs; I'm just going to select all three I'm going to arrange it; yellow's first, red is second, and the gray is last; and all I need to do is click on "Export to Merged PDF", and once again it's just going to compress those three files. As I mentioned, this time around because we're using the create a PDF button, it's going to give us a single PDF file, whereas before it would have given us multiple if we exported them all at the same time. I'm just going to save that as the default filename, savings wise, as you can see once again we're up at the 96% mark, and it's down from what would have been 12 megabytes to 500 kilobytes, which is a very good saving.

I just opened that file, and you can see here, we've got yellow, red and gray; just as we'd expect. Once again, we might be able to tell just by comparing it with the Figma design, because we are exporting it as CMYK, the color difference is fairly noticeable; you can see on the right here again we've got the very vibrant red, the RGB sort of red, same with the yellow, you can see on the left or right here the yellow on the left in our Figma file is very different from the CMYK PDF that we just exported from Figma. That's worked; that's good news, and that's exactly what we want. So, that's the merged version; those are the two options: you can either export a merged version, which is a single PDF made up of your Figma parent frames, or of course you can export all three of these as individual PDF files based on the export settings in the bottom right column over here.

That's everything you need to know about exporting PDF files in CMYK from Figma. As I mentioned before, this isn't something that Figma currently offers natively. If you do want to do this, I think TinyImage is the only way to do it right now; I'm sure that there's a way to export your PDF files from Figma natively and somehow load them up into a separate tool or other software and convert it to CMYK, but if you if you want the CMYK PDF directly from Figma and you also want the benefit of compression at the same time, then TinyImage is a really good option for doing that.

I hope if you've been looking for a way to export CMYK PDFs from Figma that this video has been really helpful and I hope that you've learned something that you can take away back to your team or back to your own projects and get some benefit from it. Thank you as always for watching, and we'll be back very soon with even more Figma tutorials just like this one.

---

---
type: tutorial
title: How to password protect PDF exports from Figma
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-07-08T00:00:00.000Z
dateModified: 2020-07-08T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-password-protect-pdf-exports-from-figma/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-password-protect-pdf-exports-from-figma.md
---

# How to password protect PDF exports from Figma

#### Video Transcript

Today, I'm going to be showing you how to export PDFs with password protection directly from a Figma.

So, I've got this three frame design, which are the principles of design that Figma adheres to, and this is just an example file that I'm going to use to show you how we can export it as a PDF and add password protection on it; in order; anybody I send that PDF to will only be able to open it if they've input the right password that I've set before exporting.

The first step is installing a Figma plugin called TinyImage. If you haven't already done that, you can go to the top left corner up here with a little Figma icon and if you click on that you'll see a little search bar up here, you may have to click on "Community" or "Plugins" first, but once you do type in the search bar the word "TinyImage", underneath "plugins" you'll see a result called "TinyImage Compressor" pop-up. If you haven't already installed it, you'll see a button on the right hand side that says "install"; and if you click on that it'll change to say "installed" with this little check mark, and once you see that checkmark that means the Figma plugin is installed and you can switch back into your Figma project or Figma file and we can get started.

To run the Figma plugin, you can just right click anywhere and go down to "plugins", and then go down to "TinyImage Compressor" and click on that, and that's just going to load up the plugin that we just installed, and the default view is going to show you a list of all of the elements in your design that contain export settings that you've added in Figma; for example if I click on this frame over here you can see in the right-hand column that we've got one export setting of "PDF", of course I can add more if I wanted to, and if I refreshed the TinyImage layers you'll see that PNG with a 2x retina setting will pop up in the list; that's what it does, it just looks through any layer in your file that contains the export settings on a layer it's set in Figma over here and it will list out those as some of the images that you can compress that you select; for today we're just going to be looking at PDFs.

I'm just going to leave the PDF settings on there as is, and up here we've got our quality slider; you can see it's changing 150 dpi up to 300 dpi, and then at the lowest you've got 72 dpi, but 150 dpi is a good mix between compression size and quality, so I tend to leave it at 150; but you can change it depending on new use case. Today I'm just going to show you what it looks like to export a PDF without a password first, and then I'm going to show you how to add a password on to your PDF exports too. If I just click "Compress Selected", I'll just do one; it's just an example I'm going to click "Compress Selected", and this is just going to do a regular TinyImage PDF compression without any password protection.

If I save that and open it up, you can see here that it's exported it as we'd expect, and we've saved 98% of the original file size that would have been exported from Figma normally. It's taken it down from 5.83 megabytes down to 144 kilobytes; we've saved quite a lot there. That's just the regular PDF export from TinyImage compression, but if we rerun the Figma plugin, which you can do easily by going over to the right hand side and clicking on the little TinyImage icon; if you click on that it means you won't have to right-click go down to "plugins" and find the Figma plugin every time; it's a quick way of doing it.

Now that we've had a look at what it looks like without the password, I actually want to export this PDF from Figma with a password. I'm going to do all three this time, and I'm going to go to the "settings" icon up here, in the top right you'll see this little "settings" icon, and if you click on that that will load up all of the TinyImage Figma plugin settings. There's one about halfway down which is called "PDF password protection", and you'll see here that we've got a little checkbox which says "Require a password to open exported PDF files", and if I just click on that, that will toggle it on, and you can see here the text box underneath has been made available to us. If I turn that off, this is disabled, if I turn it on, it's now editable; that text field is going to allow me to specify a password. There's an example of what that could look like here, but of course you can use whatever you want; in this case I'm just going to use the password "figmatic" and that's going to become the password that is required whenever one of these PDF files is opened.

Now that I've set that, that'll save automatically as soon as you click out of it; if you go back into settings you can see it's still got "figmatic" set there, and now what I'm going to do is I'm just going to export or compress these three frames again... actually, I'll just do one just; it's the same example and I'm just going to click "Compress Selected", exactly the same as before, but this time of course we've just got our password protection setting enabled. In this case I'm just going to rename this one to say "password" so I can tell the difference, then save that to my desktop, and you'll notice the file size is exactly the same; the PDF password protection doesn't impact the file size at all.

If I go back to my finder, you can see here the one we just exported was down here which I could open freely, however, when I go to "approachable password", which is the one I just exported with the password on it; if I try and preview that one, you can see here that it's telling me this document is password protected and it wants me to enter a password to view it. If I type in that password which was "figmatic", and hit enter, that's now let me view the PDF. You can see here at the top it's got "approachable password.pdf"; that was the password protected one.

If I close that off again and then try and reopen it, you can see once again it's asking me for the password; the same thing will happen if I double-click it and try and open it with the preview app, exactly the same thing; it's going to ask me for that password which I just copy/pasted. If I enter that once again, it's allowing me access to that, and if I use the wrong password, if I just put in a couple of letters; it'll tell me that it's an invalid password. That's what it looks like to export the PDF files from Figma with a password.

There's another way with that we can do this as well; if I just close this and restart it from the right-hand side; I'm just going to load up the Figma plugin once more and this time instead of exporting; obviously you could select as many PDF files as you want and these will all get exported as individual PDF files each of which will have the password protection on them; you'll get three files all password-protected separately, but of course there's going to be some cases where you want to export these files as a single PDF and password protect that. TinyImage lets you do this as well by clicking on the top left button called "Create a PDF".

If you click on "Create a PDF", that's going to bring up this interface here, and you can see down here it's inherited the setting from the settings icon that we clicked before, it's inheriting that setting because it's assuming that the password protection that we wanted for the single exports we also want for the merged ones. Of course, we can toggle that on and off as we could before; it's remembered the password that I want to use, and now that I've got it checked, it's going to make sure that this export is also password protected. Now I've got two out of my three frames selected, I actually want all three selected in this case and I can rearrange these if I need to change the order of them; I don't have to go over into the Figma side panel over here; and this is a new feature, you can rearrange the frames independently of the main Figma design; you don't have to reorder those you can just do it interface.

Let's say I want the red one to go first, and then the yellow one, then the gray one, that's all good; then I'm just going to make sure the color profile is "RGB", which is the default, and now that I've got those three selected and ordered, and I've got my password protection setting for the PDF Figma export enabled, all I need to do is click on "Export to Merged PDF"; and after you click on that, it's basically going to merge those three frames into a single PDF. It's just finished, and I'm going to save that to my desktop. So, if I open that up, once again, if I preview that; as expected, it's got a password prompt. I'm going to put in my password again and hit enter, and there we go, we've got our merged PDF. We've got the three frames in the one PDF now, we don't have three separate PDF files, they've all been merged into a single password protected compressed PDF directly from Figma. That's roughly what it looks like.

The compression ratio is very similar, we've got a 97% saving; however, because we've tripled the amount of frames, it's gone down from 12.5 megabytes to 436 kilobytes; as an absolute saving, that's that's quite high, and as you can tell the quality of the file is still very good; it's very sharp and the images look great. That saving is super nice, and the cool thing is I can now send this PDF file securely via email or via Slack as a password protected PDF, and anybody on the other end of that message is going to have to know what the password is before they can look at the contents of that PDF. This is now a secure password protected PDF from your Figma design, and you can feel safe sending that to anyone, as long as you also kind of securely send them the password somehow, ideally not in the same message as the the PDF, but either way it's up to you.

That's roughly it; password protection as you probably know, isn't something that's native to Figma for PDFs. As far as I know, TinyImage is the only way to add password protection to your PDF exports directly from Figma. I'm sure that there's some sort of tooling in the open, maybe that's Adobe Acrobat professional or something like that, where you could theoretically export a PDF from Figma and somehow add a password to it, I'm not too sure how to do that; but if you do want to do it directly from Figma, this is the way that I would add a password to my PDF exports.

I hope if you've been looking for a way to add password protection to your Figma PDF exports, or if you were just curious of what it looks like in the TinyImage Figma plugin, I hope that you've learned something from this video; and I would encourage you to try it out, and use it for yourself to see how it goes. Thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this.

---

---
type: article
title: The best Figma plugins for high performing design teams
description: An overview of the best premium Figma plugins (so far).
datePublished: 2020-06-20T00:00:00.000Z
dateModified: 2020-06-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/the-best-figma-plugins-for-high-performing-design-teams/
markdownUrl: https://www.hypermatic.com/articles/the-best-figma-plugins-for-high-performing-design-teams.md
---

# The best Figma plugins for high performing design teams

"Do things that don't scale" is great (even if seemingly counterintuitive) advice often given by Paul Graham/Y Combinator. This is something that I have taken on board here as the founder; one of those being the number of products we release. As of today, we've just turned 6 months old, which means we've released one Figma plugin per month on average since we began.

While this may not be something that's scalable, it was very important to solve some of the most urgent and solvable problems that I personally faced on a weekly or daily basis over the last 10 years working in digital agencies.

There is a list of about a dozen problems we need to solve (and _will_ solve with enough time) first before we start focusing on much bigger and fundamental problems to the way we think about design and development. Our end game from day one has always been that the distance between design and production should be _zero_; so every decision we make is designed to take a step closer to that reality, never further away.

With that being said, I thought it would be nice moment to take a snapshot of the best Figma plugins we've released so far. While the title of the article may be slightly delusional, I'm really proud of what has been accomplished so far, and we're really only just getting warmed up.

### TinyImage

#### Export compressed JPG, PNG, SVG, WebP, GIF and PDF files from Figma, reducing files sizes by up to 95%.

Every day in my previous agency, me and my fellow designers/developers would need to export images from Figma and then figure out the least painful way to compress them afterwards. This could involve opening Photoshop, going onto a shady looking website or trying a command line tool. Regardless of which method we used, the fundamental problem remained the same: assets change all the time (due to design revisions or other creative/content reasons) and we would inevitably need to re-export _and_ re-commpress dozens of assets per day.

<a href="/tinyimage/">TinyImage</a> was designed to remove this middle step entirely and shift all of the compression into middle of Figma's own export functions. What started out as simple JPG/PNG compression back in January has evolved to include support for: JPG, PNG, WebP, SVG, PDF and GIFs - each format with their own unique settings and features in the Figma plugin.

Thanks partly to the awesome feedback and support from early adopters, I've been able to prioritize and ship the features that were clearly going to solve the biggest pain points in there workflows. This conversation does not stop, and it's been great to continually optimise and find ways to improve the Figma plugin to solve these daily problems for some of the top design teams in the world, and there's still more to be done to make this the best Figma plugin it can be.

### Bannerify

#### Animate and export production ready banners from Figma to HTML for different platforms in seconds.

I would say this is the most personal Figma plugin so far; I used to dread getting caught up in the banner feedback loop for large campaigns. Don't get me wrong, designing and working with banners in Figma as a developer was a big step up from the Photoshop days (_shudder_), but once again, the only thing you can count on is a dozen revisions of the banners. Just when you thought you were done (and free), there would always be yet another round of client or internal feedback that meant re-exporting hundreds of assets and updating all of the HTML and CSS for dozens of banners to "roll out" the brand new design updates.

This was soul crushing; and eventually all you can do is laugh, if only to stop yourself from crying in the corner instead.

I had been working on the <a href="/bannerify/">Bannerify</a> Figma plugin since I was invited into the Figma Plugins BETA program back in August 2019. It was an extension of another tool I had built previously (weirdly enough, called "Figmatic") that used the Figma API to convert a Figma of banner designs file into HTML/CSS. It was very crude, but it proved to me that the idea worked. Once Figma plugins came along, I realised that all the questions I wanted to answer around "how do we add animations" could be solved by building out a real animation timeline interface within Figma itself.

Releasing it earlier this year was a great feeling; and I've had awesome feedback from many teams who suffered the same problems I did in my previous banner projects. Now, the entire process of exporting banners from Figma to production ready HTML/CSS has been automated, and building another "revision" is literally a one-click process. To me, purely in terms of the amount of pain and time that this Bannerify removes, this is still the best Figma plugin we've released for heavy automation so far.

### Favvy

#### Export production ready favicons (with code) for your website or PWA from Figma in seconds.

Creating favicons for websites has always been a bit of a dark art, as the "documentation" on the subject is thin (at best). Over the years, there's been a bunch of different requirements for different devices, but along the way, few people have dropped the excesses of favicon images and files in favor of a more optimal set of icons needed for a website in 2020.

<a href="/favvy/">Favvy</a> is a Figma plugin that automates this entire process with one-click, by using a single square Figma frame as the source of truth. It generates all of the images, code and files required that you can just "drop in" straight to your website or PWA (progressive web app), with no other configuration or manual work required to make your favicons work as expected.

You won't have to manually look up the latest articles on favicons or create them with a combination of design tools or web apps, now you can keep a single version/size of it in Figma as your source of truth, and update/re-export it as needed for the lifetime of your project or website/PWA.

The simplicity and speed of favvy makes it the best Figma plugin for exporting production ready favicon packages directly from Figma.

### Pitchdeck

#### Create and present slide decks with animations, videos and links from your Figma designs.

Starting back in 2018 when I was co-running the DesignOps Melbourne meetup down here, we were already seeing some of the presentations being done entirely in Figma.

More designers are using Figma to collaboratively create presentations, which is awesome. However, using Figma for presentations still lacks some of the familiar interface and features expected from Keynote, PowerPoint or Google Slides. More importantly, none of those other apps allow you to use Nicolas Cage as your laser pointer cursor; the <a href="/pitchdeck/">Pitchdeck</a> Figma plugin was built to start solving these problems and more.

Pitchdeck comes with have all the familiar tools you need to make a great from a web-based presentation out of the box — speaker notes, timer, laser pointer, and slide navigation (which can be controlled from your phone).

I'm very mindful that working inside of teams means that sometimes other team members or stakeholders will prefer to have a presentation in a format that is more at home in their daily workflow. That's why Pitchdeck also includes the option to export your presentation from Figma to a file that can be opened in Keynote, PowerPoint or Google Slides (or just trusty PDF deck).

The feedback from our customers has been incredibly helpful and encouraging; the problem of slide decks is well and truly alive, and I think there's much more that can be done to rethink how we go about designing and presenting them. This is the best Figma plugin for magically turning your Figma designs into stunning presentations.

### Pixelay

#### Compare Figma designs with your local website development builds using smart browser overlays.

One of the most common sources of disappointment in the design and development process, is the _result_ of the design and development process. Almost every time a design goes through the "handoff" process (which I argued in another article is fundamentally broken), there will be a disparity between the intended design and the development implementation. This generally isn't the fault of either party, but a large chasm that exists by nature of adopting this "throw over the fence" approach to having designers and developers working together.

While the fundamental problem is sadly going to take much longer (technically and culturally) to become mainstream, our <a href="/pixelay/">Pixelay</a> Figma plugin meets each party where they're currently most comfortable, and help push the process in the direction of "code" as the end game, rather than simply looking towards some static frames of designs instead.

This is a problem that takes up hours of both designers and developers time, with designers knowing that there are issues with the build, and often needing to sit down and visually point out every single difference one by one. Pixelay takes the approach of overlaying any frames from Figma where the original designs live with the developer's local environment, automatically loading the frames to the same widths as the original designs to ensure the correct CSS has been written for the series of "breakpoints" that were initially designed.

This is the best Figma plugin to take a step in the right direction, where we treat code and design as the same thing; when code is the "source of truth" for design in your production environment, it's really important to ensure that as much attention is given to that instead of only focusing 100% on the static designs in Figma.

### Crypto

#### Securely share static Figma designs with stakeholders as password protected links.

The noticeable theme with all of our Figma plugins is "recurring"; these are problems (at least in an design team or agency environment) that are constant and painful. When my previous agency switched from Sketch to Figma, we were able to give up everything in our old workflow... well, _except_ for "InVision". As much as "open design" is core to Figma's mission and belief that helps drive the direction of the product, old habits die hard and there was an uneasy feeling about inviting clients or other teams into Figma files where they could see _everything_ (even the stuff that "wasn't ready" or "in progress").

To "solve" this issue, we continued to use InVision, which all the designers hated using, due to it being a slow and clunky process to constantly upload and update designs from Figma every day. When I asked one of the designers how much time this was wasting for them, replacing the time they should otherwise be spending _designing_ instead; they estimated that it was at least a few hours each week. This might not sound like much, but when you consider the countless other meetings, distractions and commitments that distract designers away from actually doing their work, those few hours per week of lost time are precious.

To start solving this problem, the <a href="/crypto/">Crypto</a> Figma plugin was designed to remove the need for those extra steps in order to simply get a selection of "final" frames onto a password protected preview link, where a client/reviewer wouldn't need a Figma account and could feel safe knowing that their work (which may be under NDA, as it often is) would be shielded from prying eyes.

The obvious question would be "but does it support Figma prototypes?", to which the simple answer is: "not yet, but it's something we're working on adding support for, and has been on the roadmap since day one". It seemed more important to build a working version that solves the core problem first, get a sense of if that's actually solving the problem, and then work on the much bigger project of replicating Figma prototype support into Crypto.

As of today, if all you want is a way to share password protected designs of the frames you've selected from your Figma project, then Crypto is the best Figma plugin as an alternative to InVision as your only option.

---

---
type: article
title: Nobody knows what DesignOps is
description: How the term “DesignOps” got corrupted and lost its way, and why it eventually won't matter anyway.
datePublished: 2020-05-27T00:00:00.000Z
dateModified: 2020-05-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/nobody-knows-what-design-ops-is/
markdownUrl: https://www.hypermatic.com/articles/nobody-knows-what-design-ops-is.md
---

# Nobody knows what DesignOps is

When I co-founded the DesignOps meetup here in Melbourne, back in 2017, the term "DesignOps" was brand new to us. However, for 2-3 years prior, we would meet for dinner (always Korean food at the same place) every month or so to talk about our ideas on design and development, which would later become the basis for the DesignOps meetup.

Once we heard the term "DesignOps", we knew that the culmination of everything we had been talking about for the last few years together was on the tip of our tongues - we just gave it name.

Back then, at the end of 2017, I vividly recall trying to find other people we could talk about these ideas with, trying to find people who had already discovered "DesignOps" or at least had heard of it. To my surprise, I did a search on LinkedIn, and I'll never forget seeing that there were ~15 people on _all of LinkedIn_ that had any mention of "DesignOps" in their profile or content; 2 of them were my co-founder (Ch'an) and myself.

The public ongoing joke with our meetup was that "We don't know what DesignOps is", and it was true, because nobody did. Our idea was to take this fresh term, and merge the ideas we had been talking about for the last few years into it, in order to propagate these ideas out to design/development teams everywhere by giving them a name.

### The sad hijacking of “DesignOps”

**DesignOps was supposed to be about design and code being the same thing.**

In our vision, DesignOps was destined to become _the_ way to describe design and development becoming the same thing. Frankly, the term itself sounded pretty cool to us, and some of the early descriptions from other companies like Airbnb aligned closely enough with this for us to jump on it and create a meetup around it.

After DesignOps started getting a bit more buzz online, we started to see some (very vague) articles come out about it, not really demonstrating much idea about what it means. In hindsight, that was fairly harmless, because the wave that came afterwards was somehow much worse.

Suddenly, a bunch of content started flooding the internet about how DesignOps and ResearchOps are essentially go hand-in-hand (what the heck is ResearchOps, we first thought), and then gradually started nudging DesignOps into a role that _barely_ focused on technology or code at all, and started becoming _way_ more focused on essentially being a glorified manager for design teams.

This was incredibly disappointing to see, partly because (ironically) **the role that other people were talking about should not even need to _exist_ if our original vision of DesignOps was being successfully achieved**.

When design and code become interoperable, you no longer _need_ a "manager" to oversee design and development teams; this crazy "gap" that everyone wants to bridge disappears, so it's no longer a problem to solve with someone like the alternative DesignOps role describes.

### It's a red flag when even people _in_ DesignOps roles are confused

There is _so_ much misinformation and confusion out there about DesignOps that the term has essentially become meaningless; it means nothing and everything at the same time.

One way we could measure this confusion is by looking at people employed to be DesignOps Managers.

In an article called [Defining DesignOps — my first 6 months as a DesignOps Manager](https://uxdesign.cc/defining-designops-my-first-6-months-as-a-designops-manager-921285cc75c9), recalling the week before starting his new role as a DesignOps Manager, the author writes:

> A week before my new venture into the mysterious new world of DesignOps. I sat Googling “What is DesignOps?”.

First of all, the point out the first red flag; If you replaced "DesignOps Manager" in this case with an role like "Chief Medical Officer" in the paragraphs above, it would seem crazy. For example, where it turns into:

> "A week before my new venture into the mysterious new world of medical advisory. I sat Googling “What is a Chief Medical Officer?”.

The author then continues with an honest reflection of his confusion around the term:

> The more I read (and I read a lot), the **increasingly confused I became**. Is DesignOps a design managers role? The efficiency of design? Perhaps evangelising design? Or recruitment and teams skills? Career progression? On boarding and people stuff? Software and tools? Or was it all of these things or something else?

Pointing this out is in _no way_ a dig at the author; on the contrary, clearly the fault does not lie with him. When you've got experienced designers like this feeling lost about a term that describes the job they've just accepted, it's another a red flag that something has broken down elsewhere. Such confusion should be cause to take a step back and look at why this is the case.

### The goal was never “bridging the gap”, it was about removing it entirely

As Sam Neil says in the 1997 major motion picture "Event Horizon" describing a wormhole in space:

> “The shortest distance between two points is _zero_, and that's what the gateway does, it folds space so that point “A” and point “B” coexist in the same space and time. When the spacecraft passes through the gateway, space returns to normal.”

This is exactly the image that comes to mind when I talk about DesignOps, and indeed, our tagline ("the distance between design and development should be _zero_") for the meetup itself was inspired by this visual.

### The future of design is based in code

I am more alarmed that other people are not more alarmed, but I do think that's partly due to telling ourselves two different stories:

The first is a story of pessimism, where there are just way too many problems, but we've clearly reached the limit of of how we can solve these problems, so we might as well just accept it and add more "layers" to try and manage it best we can (eg. DesignOps Managers).

The second is a story of optimism, where things are better than ever, and are getting better all the time. We have more tools than ever, the biggest companies in the world have massive design teams all approaching things in roughly the same way, so we've probably reach "absolute truths" with how to solve these problems, and everything is going to be fine if we just follow along and adopt "best practices".

Both of these stories that you could tell are dangerous in the same, because if believe nothing more can (or should) be done, the result is that they both lead to the same outcome: _doing nothing_.

As you might be able to sense; from my perspective, seeing the world this way is pretty lonely, and causes constant cognitive dissonance. I am so convinced that the future of design is based in code, that seeing the current state of things feels like I'm constantly looking back on the past every day.

I find it odd that most of my peers do not see the problem the same way that I do, and I often wonder if it's simply due to not following the current mainstream path for a long enough period to see all the inevitable problems in their future; or i they can see these problems, but choose to ignore them; or maybe they see them, but have no idea what to do about it and are waiting for "the industry" to also sound the alarm and tell them what to do next.

### DesignOps Managers are currently modern day Switchboard Operators

One reason I am less worried about the corruption of the term "DesignOps" (than maybe I should be after it being so personal to me for years) is that I believe we are living through a very awkward transition period between the source of truth for design being "pixels" to the source of truth for design becoming "code".

I have believed this for the better part of a decade, and continue to hold this view, because I still believe that I'm right, but probably still just a bit too early. That's why I am so insistent that we need to move faster, because even when we get the technology right to start solving this, the culture is going to take even longer to "cross the chasm" of how we're going to design and build things in the future.

When you remove the layer of abstraction (hand drawing pixels to "emulate" a foreign production environment) when designing digital products, apps and websites, you remove the cause for so many other unnecessary problems and roles/processes that are thrown on top of these problems to try and "manage" them, instead of making them obsolete.

Once that _does_ eventually happen, we won't be talking about "DesignOps" or "bridging the gap" anymore; and that's as it should be.

---

---
type: tutorial
title: How to add clickable URL links to Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-24T00:00:00.000Z
dateModified: 2020-05-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-add-clickable-url-links-to-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-add-clickable-url-links-to-figma-presentations-using-pitchdeck.md
---

# How to add clickable URL links to Figma presentations using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you how to add clickable links to your collaborative presentations that you've designed in Figma. These will be links that you can click while you're presenting, which will take you to external web pages, or any URLs (or links) that you want to include in your presentation.

Tto do that, we need to install a Figma plugin called "Pitchdeck". If you haven't already done that, you can go to the top left of the Figma toolbar and click on the little Figma icon, and if you go to "community" and then go to search; the search term that you want to use is "Pitchdeck", and under the plugins tab you will see a result called "Pitchdeck Presentation Studio", and if you haven't already installed it you'll see an "install" button on the right hand side that you can click, and when you click on that it'll change to look like mine, where it says "installed", and it's got a little checkmark on it; once it says "installed" you can jump back into your Figma file with a collaborative presentation slide deck design, and we can get started.

I'm just using a design that I came up with based on Dieter Rams "10 Principles for Good Design", and this is just a slide deck that I came up with and designed in Figma. The idea is that I want to take this slide deck, turn it into a real presentation and include some links in the presentation that I can click out to while I'm presenting. The first thing we need to do is start the Figma plugin that we just installed, and we can do that by right-clicking anywhere, going down to "Plugins", and then finding the "Pitchdeck Presentation Studio" name and clicking on that, and that's just going to fire up the Figma plugin that we just installed, the Pitchdeck Figma plugin. What it's going to do is, it's going to check all of our frames in the top level of our page and it's going to treat every single frame as an individual slide as part of this presentation, and it's also going to load in all of the elements from each frame and those are going to make up all the bits and pieces in each slide.

Now that that's loaded, you can see here that we've got all of our slides coming from Figma, the presentation designs look exactly the same as you would expect from the the original, and you'll also notice that these elements are coming in one after the other, and that's because Pitchdeck has loaded them up as individual parts of each slide. if you go through and and click through them, you'll see on my screen that I've got some animations applied to these elements, too. I'm not going to cover that in this Figma tutorial, but if you're interested in seeing how all the animations work that are sitting on the right hand side here, you can find another Figma tutorial on our YouTube channel, which goes for about 30 minutes and does a really deep dive on adding animations and presenting this, and showing you how it all works in depth; but for today I'm just going to be showing you how to add clickable links to your collaborative presentations in Figma, and then we can have a look at what that looks like in a browser.

To start with, I guess the first thing we need to do is get the the slide ready that we want to add a link to. Once we've done that, I'm just going to use the "intro" slide for now and the first thing you want to do is go up here on the top right hand side of the Figma plugin where it says "animations", and that's actually a select box; you can click on that, and when you click on it you'll see a few different options here; it's currently under "animations", but we want to go down to the option that says "Clickable URL links", and if you click on thatl you'll see here that the context changes from some animations and a timeline, over to some inputs. These inputs just text fields; you can you can paste text in there, and as you can see from the placeholder it's saying that it wants a URL or a website link inside of those text fields. Each of these text fields is attached to an element inside of the frame; you can see when we hover over it, this one's hovering over the photo, this one's hovering over the subtitle, and; we can attach different links to different parts of our frames. The first thing I'm going to do is just grab a link to try it out with.

If I go to Chrome, I've already actually got a link saved; this is the "10 Principles of Good Design" link where I got the images from, and I'm just going to go to my URL bar in Chrome and copy/paste this little URL; and now that I've copied that what I want to do is, I want to attach it to the photo of Dieter Rams in my presentation; now that I've got the layer selected or hovered in my Pitchdeck Figma plugin I'm just going to click on the text input, and now that's active I can paste it by using Command + V (or Control + V if you're on Windows); I'll just paste it in, and you can see there, it's pasted in the link as you'd expect. If I hover over it now, the cursor has changed to a pointer which indicates that there's a link on there; that's now on there, you don't have to click a "save" button or anything, it just attaches itself to that element.

We could also apply it to another element if we wanted to; if we wanted to add the same link to the "subtitle" or the "caption", I can paste that on there as well, and now that also is a link. If I grab another link just to add to another frame, if I switch to my next tab, I've just got a link to the Dieter Rams documentary website; this is the "Rams" documentary. Again, I'll copy that URL and jump back into Figma, and maybe this time I want to add it to my next frame; in this case I'm going to add it to the image of the radio here; again, I'm going to click on the element that I want to add a link to, click on the text input, paste it, and now that's pasted in, you can see that we've got a link there that will actually open if I click on that, but I've already got it open in my browser; I know where it goes, but if you click on that, it'll open if you just want to confirm; but it will definitely open this link here.

Now that we've got that added again, we can add this to our little caption down here as well; I'll paste that in, and now that's on the caption, we can see right there and that's really all I want to do at the moment. I mean, you could add URLs to any of these elements on any of the frames, but for now, just to show you how it works, I'm just going to leave it fairly simple with the first two, and and we can have a look at what that looks like.

To actually make this work, what we need to do is in the top right here, you'll see we've got this little select box that says "Pitchdeck URL" and that's selected by default. There's some other export formats here which are under the "static" label, such as "PDF", "PowerPoint", "Keynote" and Google Slides; this will export our collaborative presentation from Figma to those to static formats, and will not include any clickable links at the moment (in this version of the Pitchdeck Figma plugin, at least).

What you want to do is, select the top option of "Pitchdeck URL" and make sure that's selected, and then if you haven't uploaded a presentation yet, this button will say "Upload Presentation"; but because I've already done it before, it's telling me that I can update this presentation, and that will update the link for me. If I click on "Update Presentation" now, what this is going to do is, it's going to generate all of these frames for me and turn them into a slide deck and then upload all of the images all of the thumbnails, and all of the assets that I need to create a presentation for me. Once that finishes it's going to give me a URL that I can use, and then it's also going to generate a password for me to protect that URL, so it's only me who can who can access it.

We'll just wait for that to finish now. It's just going to upload all those images. I'm on Australian internet, which is slightly slower than you should expect in pretty much any other country, but it won't be won't be too much longer, and then we can jump into the browser and I'll show you exactly what it looks like once we get those animations in there; but more importantly, in this Figma tutorial you're going to see exactly what it looks like with the links functioning as well; those will work as you'd expect very shortly.

It's almost finished now, and once it wraps up you'll get a confirmation message which looks like this. It will tell you that you're secure presentation link is ready and it'll give you a link to that presentation here; you can click on that blue link or alternatively you can copy/paste the URL by clicking on this little "copy" icon. Then the password down here; I've just copied the URL, I've already got my browser open; I'm just going to jump back in there and in a new tab I'll just paste the URL and hit enter. Then in Figma, again, I'm just going to copy the password; now the password is copied to my clipboard and now I can jump back in to our collaborative presentation where it's asking for my password; I'll paste the password in that is copied from Figma from the Pitchdeck Figma plugin, and now I can click login. I'll do that now, and once you've been authenticated, it will now load in the presentation with all of the images and the animations and everything else.

There we go, we've got our presentation. If I just briefly click through it, you can see here that it's looking really good; all of the animations, all of the elements are there as expected, and it's looking really nice. We can jump around to those frames, but more importantly what we have now is, you can see when I hover over these elements where we put our links, the cursor changes to the little hand, which indicates that there's a link there. I can see in the bottom left of the window, the URL that we added into our Pitchdeck Figma plugin; if I click on that, you'll see that it opens up the link that we added; this is the link that we attached.

If I go to my second frame; again, it switches the cursor to the pointer, and now I can see in the bottom left it's going to open up the Rams documentary link. I'll click on this link now, and there we go, we've got our Rams documentary website. That's super cool, that means we can now embed clickable links on literally any element that we like inside of our collaborative presentation designed in Figma; and as long as we point it to the right place, then we can basically go to any URL that we need to from within our presentation; that's pretty cool.

There's a whole bunch of other little features down here that you've probably noticed; and I'm not going to go through them in this particular Figma tutorial, as I covered that in the other Figma tutorial I mentioned before; if you go to our YouTube channel, you'll be able to find a 30 minute Figma tutorial about creating and presenting animated pitch decks using the Pitchdeck Figma plugin, and that will go through the remote control, it will go through the cursor, it will go through fullscreen mode, and all that cool stuff. There's a new feature with numbers; which I can just show you now just toggles indicator down here in the bottom right, you can toggle that on and off and that will give you a number notification while you're actually presenting as well; that's really neat. If I leave my mouse a little bit above, you can see that the toolbar vanishes, so that's worth noting, too.

That's pretty much it; it's really simple to get these links into our collaborative presentation, all from the Figma plugin. Now that I'm pretty much done with my presentation, I'm going to exit the Pitchdeck Figma plugin. If you want to update the links, or if you want to add new links to different elements, you can simply rerun the Figma plugin by going to the right hand side of your Figma page, and in the right hand column here, underneath "Plugin" you'll see a little pancake icon with the word Pitchdeck next to it; if you click on that, that will relaunch the Pitchdeck Figma plugin without you having to go through the right-click menu, and going into "Plugins" and then finding the Pitchdeck Figma plugin, which can be annoying if you've got heaps of plugins installed; this is just a really quick way of reopening it.

I'll leave it there for today; I hope that you've been informed on how to do this now, as I know it has been a common request about how to attach links to your Figma designs for collaborative presentations; this is a feature that I think is really cool in the Pitchdeck Figma plugin. Give it a try if you've been trying to do this, and I hope it works out for you or your team. Stay tuned for our next videos, as we'll be producing many more of these Figma tutorials with tips and tricks on how to do different things in Figma. Until then; thank you, as always, for watching.

---

---
type: tutorial
title: How to embed videos and GIFs in Figma presentations using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-24T00:00:00.000Z
dateModified: 2020-05-24T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-embed-videos-and-gi-fs-in-figma-presentations-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-embed-videos-and-gi-fs-in-figma-presentations-using-pitchdeck.md
---

# How to embed videos and GIFs in Figma presentations using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you how to embed videos and animated GIFs inside of your collaborative presentation slide deck designs in Figma, and then use those as a real presentation that you can take straight out of Figma and actually present to people with those GIFs and videos in your presentation.

To see how to do this, we need to install a Figma plugin called "Pitchdeck". If you haven't already done that, you can do it by clicking on the Figma icon in the top left, and then going to "community" or "plugins" and in search bar if you type in the term "Pitchdeck"; underneath the plugins tab, you'll see a result called "Pitchdeck Presentation Studio", and if you haven't already installed it, you'll see a button on the right hand side that says "install" and after you've clicked that, it'll look similar to mine where it's got this little check mark, and it'll say the word installed" next to it. Once it looks like that, you're ready to go and you can switch back to your Figma project file.

I'm going to be using a pitch deck (or a slide deck) that I designed in Figma based on Dieter Rams' "Ten Principles for Good Design", and the goal for today is to turn this collaborative presentation slide deck design from Figma into a real presentation; and not only a real presentation, but a real presentation that contains GIFs (embedded GIFs) and embedded videos from YouTube and Vimeo.

To get started, we need to run the Figma plugin we just installed; if you right-click anywhere and go down to "plugins", and then just go down to "Pitchdeck Presentation Studio" and click on that; that is going to fire up the Figma plugin that we just installed, the Pitchdeck Figma plugin. What it's doing right now is, it's looking through all of our frames in the left-hand side here and it's treating each frame as an individual slide; every parent level frame will be loaded into Pitchdeck as a slide and then all of the elements inside of each frame at the top level inside of each frame will be treated as the elements inside of each slide as well.

Now that it's loaded, you can you can see what I mean. You can notice that we've got our slides all loaded in as expected, they're identical to what we have in our Figma design. You've probably noticed that there's a couple of things that are different; the first thing that is different is the order of these frames; in Figma the order of these frames go from intro at the bottom to principle 10 at the top; it's fundamentally in reverse to what we're seeing in Pitchdeck. The reason for that is Pitchdeck automatically reverses the order of the frames because when you're designing things in Figma typically, if you're copy-pasting the frames, Figma will will put it next to the frame that you just copied, but in the slide order (or the frame order), it will actually insert the layer above the frame every single time. You end up with something like this where the latest frame or the last frame as at the top and the first frame is at the bottom; Pitchdeck automatically reverses it by default, just to save you the trouble of reordering the frames in Figma

Having said that, if you do need to change the order of the frames, you can do that very easily in the Pitchdeck Figma plugin just by clicking into any frame, or you don't even have to click you can just hover over any of the drag handles to the left of any slide, click and hold that with your mous, and then just drag it up and down; and you can see there that it just reorders it. Now we can move three after four I can move that back you can move any slide around in any order and it's worth noting that this will not affect the ordering of your Figma file, it's just telling Pitchdeck what order you want these slides to be in when it exports a presentation deck from the Figma plugin.

Now that we've got that sorted out, we've got our order that we're all happy with from 1 to 10 and the intro frame; you probably also notice that there's some animations going on and these aren't coming from your Figma design, again, these are coming from the Pitchdeck Figma plugin. The Pitchdeck Figma plugin allows you to apply animations to any of your layers on any frame, and because I've already designed this and I've run this Figma plugin before, I've already gone through and added all my animations to each of these elements. By default, they'll be turned off when you first open the Figma plugin in a project, for the first time everything will be set to "no animation"; that just looks like that, nothing moves, but you can of course change that and add your own timings and your own speeds.

You can also copy paste those animations really easily just by clicking on the "copy" button and then pasting it on any of the other layers on any other frame or any other slide. The other thing that you might notice is the speaker notes section down here; I've covered this in another video which goes over how to do all the animations how to set up the speaker notes, but this is just a free text field and you can write anything you want here; I can write "intro to the presentation" and there may be a note to myself to "talk about Dieter Rams history" or something like that; that's that's really all that does, it's just a way for you to add notes that can be used later, which aren't audience facing, these will be used when you go to present; you'll be able to see them as the presenter but the audience won't. That's available on every frame every slide, you can customize those per slide and get them later when you go to present it.

Now that we've covered the slide order the speaker notes, and briefly touched on the animations, what I want to talk about today is showing you how to embed GIFs and also embed videos from YouTube and Vimeo into your collaborative presentation design in Figma, that we can actually present with to an audience. To do this, we need to take our mouse over to this heading here where it says "animations", and you can see this is actually not a heading, it's a select box. With this select box, we can put our cursor over and this is now clickable; if I click on "animations", we get a few more options; the default is "animations", which is showing us all these animation settings, but the next the next option is to "Embed GIFs and YouTube or Vimeo URLs"; if I click on that one, you can see the the options here have changed; the layers are all still the same, we can still see all of our layers that we had in the animations, but the timings and animation names have been replaced with an input box for each each element. This box here as you can see by the placeholder indicating it, these are for pasting in links, and as the title says, we can paste in URLs for Vimeo, YouTube or just a GIF. I'm going to show you all three of those just to show you what they look like and how they work.

I'm just going to open up the browser and load up a few pages that I've already set up beforehand. These are three links that I've set up related to my presentation; I've got a YouTube video from the Dieter Rams documentary, I've got a Vimeo video showing the "Ten principles of good design" clip, and then I've also gone to Giphy and I have loaded up a a looping GIF of Dieter Rams getting angry at his engineering team. I'm going to show you how to use all of these in your presentation.

The first thing we need to do, is pick which element we want these these videos of GIFs to show up. For now, I'm just going to load it onto the Dieter Rams photo on the intro slide; if I jump to my website again; the first thing I'll do is just copy the GIF and show you what that looks like. If I copy the GIF, you can see here this is just a link to the GIF file; that's one we want, you want to link that links to a "dot GIF" file in the URL. If I go back to my file I've just copied that that URL, and if I hover over my layer which has Dieter Rams photo, click on the input and then press Command + V (or Control + V, if you're on Windows) and if you paste that in there, you'll see immediately the GIF has appeared; it's embedded that GIF in place of whatever image was there before. The image from our slide up here will not be rendered, it's just going to show this GIF; you could put a placeholder image there if you want; if you want to swap out a video or swap out a GIF later, that might be a good way to do it; you can easily easily swap that out. So, that's the GIF, and now we can try out the other ones as well.

If I jump back to my browser, this time I'm going to use Vimeo. If I just copy this URL, and notice that I've just copied the URL itself, I haven't had to go down to "share" and then go to this embed code and figure out what's going on there; I don't need to touch any of that, I can simply just go up here to the main URL of the video, copy that, jump back into Figma; and this time I'm going to delete the GIF. You can see when I remove it, it goes back to the usual image; I'm just going to paste in the Vimeo link that we just copied using Command + V, and you can see here I've got my Vimeo embed ready to go. It's worth noting that this will play on its own once it gets into the presentation that we upload in a minute, but in the preview it's set to just set to to do nothing, essentially, to not start. It doesn't keep loading in and over and over and over again because every time you make a change it'll keep trying to load it in.

The next thing we can try is the the YouTube video. After we do that, I'll show you what it looks like once we actually export this thing. I've just copied again the the YouTube URL from up here, and I haven't gone to "share" and clicked on the the embed or gone to any of this iFrame code; I don't need that, all I need to do is simply copy this link up at the top, and I can get rid of the Vimeo link, delete that; and this time I'm going to paste in the YouTube link. Now I have the YouTube embed there, you can see that it's loaded in and it's matching up with the video that we expected. The other thing you can do is, it also supports short links; if you did want to grab the short link like this, you can grab that and then I'll load that one in; that will that will work as well, if you want to use a short link or if somebody sent it to you you can paste it in. Really, whatever link from YouTube or Vimeo you find, you'll be able to just paste that raw one in there and Pitchdeck will figure out the rest, it'll embed it for you.

Now that we've got that set up, what I can do is, I can actually now export this to a presentation. I might do a couple more, just so we can see what they all look like. I'm just going to grab that GIF, and I'm just going to swap out this image with the GIF of Dieter Rams, and you can see that it's kept the aspect ratio, it hasn't stretched it, it's just vertically centered it; and of course the way you could go about making sure that's positioned the way you want it would be to create a proper placeholder. For example, I'm using square images here, and obviously this GIF is not square; what you would do if you wanted to position this more accurately is you would get the dimensions or the size roughly of this embed here, and create a placeholder frame or a placeholder rectangle in your designs, and then all you'd have to do is find that placeholder in your list of layers paste in your GIF or paste in your YouTube video or Vimeo video, and that will just work as you'd expect.

I'll add one more; we've got our Vimeo link as well, so we can try all three. Again, I'm just going to copy the the Vimeo link from the URL, and I'm going to swap out this image and again you can see here that it's just taking over. Let me just see if I might try it on this one; as you can see, you can't actually click on it in Figma to start playing it, but once you'll see in a second when we export it which I'll do in a moment, you'll be able to actually play this and it will play automatically in your presentation and then you'll be able to control it with your mouse if you really want to.

Okay, I'm fairly happy with those three for now; what we can do is export this to a real presentation, and I'll show you what that looks like. To do that, you just need to make sure that your export setting is set to "Pitchdeck URL"; that's sitting underneath the "animated" group, and there's some "static" options as well, which I won't cover in this Figma tutorial, but if you're interested in these these ones, I've created some other YouTube Figma tutorials on our YouTube channel. and if you just go to the channel you'll be able to easily find how to export your collaborative presentations from Figma to PDF, Figma to PowerPoint, Figma to Keynote, and there's also a Figma to Google Slides one in there as well.

For today, we're just going to be looking at the Pitchdeck URL; so, I've just selected that, and because I've already uploaded this before, mine says "Update Presentation", but if you haven't uploaded one before, it'll say "Upload Presentation". I'm just going to click "Update Presentation" and that will update the presentation for me; what it's doing now is it's going through each of these frames that we've set up as slides, and then it's also going through every single layer of the of the the children of those slides and it's creating the slides for us and generating the images, generating the SVGs, creating these slide thumbnails, and then it's basically going to upload it for us. Then it will give us a link a URL with a password that we can then use to view and present this this deck.

Now that that's done, we can see that it's telling us that our secure presentation link is ready, which means that we can copy or click on this secure link and also copy the password down here to get access to present the deck. I'm just going to copy the URL and take it into my Chrome window that I've already got open and just paste that in there, and if we jump back and grab the password I can just click on this little icon to copy the password and jump back, and then if we paste that in there the login button will become available, so I'll click on that to login and once this loads you will see our deck as we expected it.

We've got the nice YouTube video that we just added into our Figma file, that's in there now; I've just left the mouse untouched for a little bit and that's why the toolbar is disappeared now, but the video is really clear, it's I think it's in HD video and it autoplayed straight away which is really neat. I don't have sound on, but if you turn your volume up or if you're using speakers for your presentation you'll be able to hear all the audio as well, I've just got my computer muted at the moment. If you really need to, you can also access the timeline; you can click around and jump through the video while you're presenting, you can pause it, you can play it, you can mute it and do all that cool stuff.

Then if I jump to my next frame; I can either do that by clicking on the little next button in my my slide controls down here, or I can simply just press the right arrow key; I'm going to do that now and it's still focused on my on my video. If I jump back down here and click next, now we're on slide 2, and we've got our GIF this is the GIF that we found on Giphy of Dieter Rams going crazy at his engineering team, and that's just autoplaying obviously and repeating an infinite amount of times, depending on what give you're using if your GIF is set not to repeat it won't repeat, but obviously most GIFs tend to repeat; so, that will just keep going for as long as as long as the GIFs there.

The other thing to know is if I go backwards any video that I have embedded, it will get restarted whenever the frame changes or whenever the slide changes; if you go forward and then if you go back, that will restart the video; it won't pause at all and just loudly start in the middle again, it'll do that if you did need to go backwards. That's the GIF loading in nicely, and as I was saying before the animations still gets applied to the video and the GIF, which is really nice; it's a smooth transition in for those embedded GIFs and YouTube or Vimeo videos. The next one we just left blank, this was the the second principle of design, and we've just left it with the Braun juicer there, but if we go to the next frame, that's where we've added our Vimeo embed.

I'm just going to go to the next frame, and there we go, it's auto-playing our Vimeo embed; it's really, really sharp I think this is another full HD video, and again, I'm not using my speakers; you can't hear the audio, but this is just an embedded video with audio if you have speakers on. If you need the audio, just unmute your your television screen, or your computer, or whatever you're presenting on, and you've got to hear that, but that just that just plays automatically; you don't have to interact with it again, if you wanted to, the controls are there; if you want to engage with the mouse you can do that of course, but in this case I just want to let it run and just play in the background.

Then after that, we've just got our regular slides; these are all just as we expected. I'm just going through those pretty easily. I won't deep dive into the other features of the controls down, here I've done a separate video on that that you can find on our YouTube channel, on our YouTube channel; if you go there and look for a 30 minute video which goes into depth about how to apply animations, and how to use the remote control, and the pointer and all that sort of stuff. That's just a quick demo of the pointer, which does a few different little things that you can do for fun.

That's roughly it; it's really easy, you don't have to do any crazy uploads with your videos, you don't have to scour your local hard drive or anything and drag and drop images in to Figma, you can purely just link to them online and Pitchdeck will take care of the rest and embed those YouTube videos, Vimeo videos and GIFs into your presentations. I hope that's been helpful. I don't think that Figma natively has support for video yet; they do support GIFs, I believe, in the prototypes; but for me personally and for a lot of people I know, video is super important for doing presentations; so that's why I wanted to add support for some video formats. There will probably be more video formats supported by the Pitchdeck Figma plugin in the future, so stay tuned to these Figma tutorials and our website for more updates. For now, these are the these are the three embeds that you can add into your Pitchdecks or your presentations that you've designed in Figma. I'll close that off now and jump back into Figma.

So that's it; that's all you need to do. You can you can play around with this yourself, as I said before, if you want to add in some placeholders; rectangle placeholders or whatever shape you want those embeds, that's just a really easy way of positioning and resizing them over your frame. If you want to put them in the corner or if you want to do a fullscreen one, you can just make the whole screen a rectangle inside of your slide and then when you rerun the Pitchdeck Figma plugin again, which you can do just by clicking on the right-hand side here this little pancake icon and relaunch it; you could turn that whole rectangle into a fullscreen video embed, and that would totally be cool as well.

I'll leave you there, and until the next time, thank you as always for watching; we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to create and present animated presentations from Figma using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-23T00:00:00.000Z
dateModified: 2020-05-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-create-and-present-animated-presentations-from-figma-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-create-and-present-animated-presentations-from-figma-using-pitchdeck.md
---

# How to create and present animated presentations from Figma using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you how to export your collaborative presentation slide deck designs from Figma into a real animated presentation that you can actually present.

To do that, we just need to install a Figma plugin called "Pitchdeck" and if you haven't already done that, you can go to the top left of your Figma app and click on the little Figma icon, and if you go to "Community" or "plugins and search for the term "Pitchdeck"; underneath the plugins tab you'll see a result pop-up that is called "Pitchdeck Presentation Studio". If you haven't already installed it, you can go over to the right hand side where you'll see an "install" button, and if you click on that install button it'll change to look something like mine, where it's got a little checkmark and says "installed" next to it; once it looks like that, then we're ready to go back to our project and export these collaborative presentation designs from Figma to an animated presentation.

Now that we've got that installed, we can jump back into our Figma design file, and in this case I'm just going to use this Dieter Rams "Ten Principles for Good Design" collaborative presentation pitch deck that I designed in Figma; and this is just a really nice demo to see how it all works because it's quite simple and we'll be able to clearly have a look at how to present this directly from Figma. So, the first thing we need to do is open up the plugin by right-clicking anywhere, going down to plugins and then clicking on "Pitchdeck Presentation Studio"; this is just going to run the plugin that we just installed the Pitchdeck plugin and what it's doing right now is it's looking through all of these frames on the left hand side, and it's interpreting each frame at the parent level of the the root level of the page as an individual slide; each each frame is treated as a slide and then it's going through all of the layers in each of those frames and it's interpreting them as individual layers that can be used as elements inside each slide for animations and things like that.

Now that the Pitchdeck Figma plugin has finished loading, you can see here that it's interpreted all of our frames. If we have a look behind here you can see that all these frames have been added into the plugin and each frame is being treated as a slide; you can see up here we've got 11 slides.

The first thing to note is that while it is mirroring the frames from the side here, you might notice that the ordering is a little bit different; in fact, it's exactly reversed. The reason for that is because typically when you're designing in Figma, you'll tend to design one frame and then reuse that frame for the next frame and just change the content; when you copy/paste things in Figma it will copy paste it next to the the frame right next to it, but in the layers panel here it'll actually add it above the current frame; you end up with this strange sort of reversed layer order and that's the reason why the Pitchdeck Figma plugin automatically reverses the slide order by default, because it assumes that you've been copy pasting this whole time and your first frame is at the bottom and your latest frame (or last frame) is at the top.

What it does is it just completely reverses that; straight away you get the correct order that you'd expect for your slides, but having said that if you've done it a different way or you just want to update the order, you don't have to touch any of the frames in Figma, you can leave those as they are; you'll see over here in the Figma plugin when we hover over this little "drag" icon in our layers, if you click and hold that and then drag it you can actually move these layers around freely in the Figma plugin itself, and these are independent of the layers over here; if you update the layer order in here your original Figma file as will not be modified it just is kept in the Figma plugin itself; if you want to move those around you can just drag them and drop them and that will reorder these frames super easily; now this one's frame one and this one's frame for but we do want the "intro" at the top; I'll just put that back up, but you can see there how quickly you can reorder all those frames or create a custom order or just mess about with them just by dragging and dropping them there.

The other thing to note is that if you delete some frames in Figma or if you change something around, you can just click on this little refresh icon here and what that will do is it will just load in a fresh set of frames from Figma; these are kind of already loaded in now, so if you make any changes they won't show up straight away in the Figma plugin but if you do need to make some changes or add new slides or delete slides, the way you can do that is just by changing them in your Figma design clicking on the "Refresh" icon and that will once again load all of those frames and and reinterpret them as fresh slides; but for now we're we're happy with our design we just want to animate it and export it as a presentation we can actually use.

Okay, so the first thing to note is that obviously this is our preview area; whenever we change a slide here, this will change the title and the preview of the slide; this is exactly what's going to show up in our presentation once we export it shortly. There's another section underneath that preview which you can see here; the label says "Speaker Notes" and speaker notes is just a text area where you can add any text that you like; you could put bullet points in here, you can add a paragraph, you can add a few words; anything that you like really. The purpose of the speaker notes is (later on we'll see it shortly), but when we export this collaborative presentation, these speaker notes will get carried over; so if you're presenting this to an audience you can basically leave these notes here and get them later when you're presenting and they'll be stored against these frames. That's just a really nice way of adding some extra context that you don't want the audience to see, and it's just for your personal use down here; you simply just type in some text, you don't have to hit save or anything, it'll just be stored there and that's pretty neat.

The other thing you've probably already noticed is that these layers are not static. Obviously in Figma they're just static, they're just some pixels on a frame, but Pitchdeck allows you to animate these frames. By default, they don't have any animations applied to them, but I've already animated these frames and those animations get saved when you close and reopen the plugin, and that's why you can see that these frames I've already got some nice animations on them.

If you do want to animate some of your slides, for all of the elements of your slides you can choose which ones you do (and don't) want animations on. You can see here when I hover over these layers in the right-hand side, this is basically representing the layers from our Figma file; you can see here it's a it's a one-to-one match with all these layer names; at the top here we've got this this image, we've got text, all these layers of text, and there's a drop-down box here (a select box) where we can click on that, and you'll get a whole suite of animations that you can apply. These are predefined animations, you can just pick one and they will they'll work; what we can do is change that to "scale", you can "rotate" it if you wanted to for some reason; it's a bit extreme, but why not do something crazy like "jello" or something like that where it just kind of comes out; these are a little bit attention-grabbing. The more conservative ones would be at the top where just a very smooth sort of "fade in" and "fade out" and you can change the timing as well; if you want that to come in last you simply drag the timeline over to the right here, and that'll come in after two seconds; you can change that to be however you want, you can also make that go for three seconds and have a really smooth and slow.

The other neat thing you can do is if you've already setup your animations on one frame or you've set up a certain animation let's say on this image that you really like, you don't have to manually recreate that on every single other layer if you don't want to; a quick way of copying those layer styles over to other layers it's just by highlighting the layer that you want the animation for and you'll see this button pop up, if you hover over it only, you'll see a pop-up that says "Copy"; if you click on that copy button it says "the animations have been copied", and what you can do is go to any other frame or any other slide and any other layer and you just hover over that and you'll see that the "Paste" button is now enabled. All you have to do is click on paste, and that will get carried over from whatever you just copied; you can see here now the image animation is exactly the same as the one we just copied, and you can do that from any layer to any other layer and it's just a really nice way of being able to store an animation and distribute it across other layers without having to go into the select box and manually select that animation every time and then drag the timeline if you already know what animation you want; that's just a really simple way of doing that, if you want to go about doing it that way.

Of course, the animation styles are completely up to you; there's there's a lot of options, and if you don't want an animation you can simply set it back to the default and just click on "no animation", that will just disable it; you can see here that just never animates at all, and that's kind of neat. I'll just copy that back again; if I copy that from a different slide I can re-enable that back on here just by copy pasting it, or I can just go to "no animation" and then change it back and it will keep the timeline; it won't remove that if I decide to just turn off the animation to see what it looks like, you can do it that way.

I didn't already say; obviously it changes the preview on the fly, so whenever you change an animation like this as we were just doing, it changes it on the fly but if you've already changed it and you just want to kind of keep looking at it or playing it, this little "Play" icon on the right-hand side of the animations toolbar, if you click on that that will just keep replaying it and you can do that as many times as you want just to see that animation continue. That's roughly it; the animations are designed to be very, very, simple; very straightforward and very easy to replicate across different frames, and that's what they look like. You can have fun with that you can make it adapt to any certain design aesthetic or branding that you that you have, if you have sort of an animation guideline or if you want something a bit more crazy or a bit more fun compared to the more sort of smooth and conservative animations at the top, that's completely up to you.

Now that we've set up our frames, we've ordered them the way we want, we've added our speaker notes, we've added all of animations that we want, we're happy with it; what we can do next is we can export or update this this presentation. I've already created a link before, but if you haven't this will say "Upload Presentation" and if we click on this little select box here you can see that if there's a few formats, and there's two groups as "animated" exports and "static" exports; static exports are things like PDF files PowerPoint files Keynote files; these are things that can get saved onto your computer, and I'll go over them in a separate Figma tutorial, but for today we're going to be looking at the animated one, because we want all these animations to actually do something.

What we can do is, we can (we've already got it selected), but if you select the "Pitchdeck URL" export format and yours might say "Upload Presentation" if you haven't done it before, but mine says "Update Presentation" because I've already created one. I'm just going to click on "Update Presentation" and what this is going to do is, it's going to generate frames or slides from all of this data that we've just put in, all of our image data, all of our speaker notes, all of our animations, all of our layers and it's going to create a presentation URL that we can use and present from anywhere; we'll see what that looks like in a second, at the moment it's just uploading all of the image assets, all of the animation data online, and in a minute you'll get a URL a password-protected URL; you'll only be able to use it if you have the password, and we'll see what that looks like in a second. It'll depend on how many images you have and how fast your internet connection is; I'm in Australia, so my internet connection is horrible (amongst many of the worst ones probably in the world), but we'll wait for this to finish uploading and then I'll show you what it looks like; hopefully it won't take too much longer.

The other thing to know is that if you've already uploaded this and you just want to get the details out (I'll show you in a second), but this little "padlock" icon up here, if you click on that, which you can (I'll show you in a minute), you'll be able to get this URL and password that you're going to see in a second straight away; you don't have to re-upload it every single time to get this link that we're about to see, you can simply get it just by clicking on that icon.

Alright, we're finally done! The Australian internet has worked, and we've got our link. You can see here that it says are a secure presentation link is ready we can copy the secure link below which is this one and the password and this is going to let us present our deck; what I'm going to do is I'm going to copy this password and then I'm going to open up this secure link and you can either do that by copy pasting this link by copy that copying that button, clicking that copy button, or you can click on this secure link icon; that's what I'm going to do.

Okay; I've got my URL here and this has just opened up the URL that we've just clicked on, and you can see that we've got a prompt to login to this deck, and because I've already copied the password, all I need to do is paste that here; I'm going to just paste it and you can see the "Login" button is now available; if I click on that (I'm just going to minimize my Figma window for the time being), I'm just in Chrome at the moment, and you can see here that it's loaded up our presentation after it's authenticated with our password. This is neat, this is exactly what we just exported from Figma; and you can see that we've got this little control panel down here in the bottom left, and there's a few things to go through; I'm going to go through all these with you just so you can see how it all works.

The first thing to know we've got simple controls; if you click on next that brings in our our next slide with all the animations that we set in Figma there's also a slide selector; if you do want to jump to a certain slide straight away you can see all of our frame names have been turned into slide selections; if I want to jump to number six or number nine, I can quite easily do that using this selector and I can use previous and next buttons as you would expect, you might not be able to see this but if I also use my keyboard; if I go "left arrow" on the keyboard and "right arrow" on the keyboard, I can navigate through those frames; if I push the "spacebar", that will also advance the frames as you would expect from something like Keynote or another presentation platform; that's a really easy way to present as well.

The other thing you may have noticed is that our toolbar just disappeared, and the reason for that is it's set to automatically disappear once it's inactive for a few seconds; if you just don't move your mouse, the mouse cursor disappears and the controls disappear; but to get them back, all you have to do is just move the mouse again and they'll pop right up. It will also not hide it while you're using the toolbar, so if you've got your mouse over the toolbar section and you're actually doing stuff, it knows not to to get rid of that; if you've got your mouse down here and you're wondering why it's not going away, you just have to move your mouse away from that toolbar and then it'll disappear and get out of your way; once you've done that, you can navigate with the keyboard once you've actually closed that off and don't want to show it to anyone, that's a really nice way of doing that.

We can also go into full-screen mode; if you click on this little full screen icon on the top the bottom right where it says "fullscreen", if you click on that that will actually take us into the proper "HTML fullscreen" mode; I have no browser window now; end-to-end the screen is just purely my presentation right now. This is perfect if you're presenting on a TV, or presenting on a projector to an audience, you want to go into full-screen mode and make it really seamless. Again, I'm just controlling this right now with my keyboard, using the "left and right arrows" and the "spacebar" if I want to just jump to the next frame. If you're in full-screen mode and you push the "Esc" key you can close it, which I've just done, or you can also click on (you can't see it in this recording maybe), but at the bottom it says "windowed", and if you click on the "windowed" button, which is exactly where the full-screen button was, it just changes to say windowed; if you click on that that'll bring it back to this windowed sort of version; that's really neat. The full-screen mode is awesome for presenting to an audience if you don't have all this desktop stuff or or Chrome window anywhere, that's really nice.

The other thing that we can do is enable the pointer; if you've if you've used laser pointers in real life you will have an idea of what this is; if you click on pointer you can see here that we now have this this red laser beam virtual laser beam that I can use to to point at things; that's really nice, I'm just using my mouse right now to move that around it just follows your mouse and if I again go back down here down to the bottom toolbar you'll see that it's selected the red laser pointer by default but you can scroll left and right with this using your mouse and you'll notice that there's a bunch of different options If we want to use, let's say the "nyan cat", we can select "nyan cat" and that will let me use nyan cat as my cursor. This is kind of just for fun; obviously, if you want to be super professional you can use the the red laser pointer, but if you're like me and you want to use Nicolas Cage's face to sort of highlight things, that option is available.

There's there's a whole bunch of them; we've got Xzibit, Fry from Futurama, there's this funny dog/curious dog, we've got Carlton from The Fresh Prince, you can make him dance on things; there's this there's quite a lot of them; Dodge, Keanu Reeves; just many, many. This one is very funny, I don't know what you would ever use this for, but it made me laugh and I thought it would be quite funny; so that's in there as well. You can play around with those if you want to just have fun with the pointers, that's how you do it. If you want to turn the pointer off you simply just click on pointer again, and that will be toggled off, and once again you've got no pointer.

The next thing I want to cover is the notes section; if you click on "notes", this will open up another window; you can see here I'm just dragging this over here, and you can see on the right-hand side now we've got this this whole new panel that we didn't have before. If I go down here, you can see that at the bottom of my controls it's telling me that we're now "connected to the remote control" and on the remote control it's telling me that we're "connected to the presentation"; these two things are now linked they can talk to each other, so if we click on next in the controls, it will change the slide in the main window. These are two totally separate windows, but they can interact with each other; I can jump around here, I can go to different frames, and the cool thing is you can see up here it's telling me what slide I'm currently on, what slide I just came from, and what the next slide is going to be.

This little navigation bar up here will tell me that above that I've got a slide timer; this is just keeping track of the entire presentation I can pause that and reset it I can start it again pause it and start it this allows me to keep track of how long I've been speaking and it's just a really nice way of keeping track that you're not going over time if your presentation has a time limit and of course you'll notice the speaker notes the speaking it's that we added in Figma and now showing up per frame or per slide whenever we select a new one; you can see here that the notes just keep changing and those are specific to each each frame these never get shown to the audience these are only shown to wherever you've got this; the cool thing you could do is you could have this presentation window over here on one monitor and then you could put your control panel or speaking that's frame on another monitor and control that from a laptop or control that from a secondary screen and that way you can just have all these displayed to yourself including the timer; that's really neat.

The other cool thing which ties into what we were just looking at is the pointer; if you click on this pointer icon in the remote control you can see it brings up this little interface and it's enabled the the remote control on the right hand side and if we drag this little icon around just by using the mouse; if you click and drag on that icon again you can completely remote control that that laser pointer from a separate screen and again you can obviously change those cursors, and this is two way binded as well; for some reason you changed in the presentation mode you can see in the other window it's getting changed and the same thing obviously happens the other way; you can see here and same if we enable and disable the pointer you can see if I enable it from one it also enables it in the other and disables it from the other as well; that's pretty neat that you can do that.

You can change that as much as you want control it from the secondary window and that just completely correlates to the main presentation; you've got a you've got an idea of where that's going to be if you're not actually looking at it the whole time; I can just turn that off again and if we close this off now if we happen to close that window you can see down here it immediately tells us that we're now not connected to the remote control if you want to recon you simply just click on the notes button again and wait for that to open and you can see it's now changed to connect it again and now we're connected; if you do accidentally close it or it drops out you can you can totally just just close it reopen it from here and it'll reconnect itself automatically and now you can see that we've gotten control over it again just by reopening it.

The other thing that you can do which I think I'll have to cover in a separate video (because I don't have a video set up at the moment), but what you can actually do is instead of just using this notes window on your computer and control it from a different screen, the alternative thing you can actually do is control it from your phone. You'll notice next to the "notes" button there's another button called "remote"; if you click on "remote", this will bring up a QR code, and if you've got your iPhone or your Android phone or your smart phone with you, what you can do is open up the camera, hover it over or point it at this QR code that we're looking at now, and if you open up the link that it prompts you with, that'll take you to the browser and on your phone what you're actually going to get is exactly the same interfaces we just looked at in this window here.

This interface is going to load up on your phone, and you're going to be able to do everything that you just did in this remote control from your phone, including the laser pointer you can touch on the touch screen and drag that laser pointer around you; can touch these buttons and and change the slides; you can make these selections; you can do your timer you can read your speaker notes, all from your phone; that's a really cool feature if you prefer to walk around while you're talking or you're not close to the laptop that you're actually presenting from you can do it all remotely just by opening up that opening up that QR code on your phone.

I'd recommend testing that out I can't show you that on my phone right now because I'm not recording my video on the phone but that's how you do it you just open up the remote button scan this QR code and you'll be ready to go exactly the same thing you'll see once you connect to it on your phone this will change to say you're connected to the remote and your phone will also tell you you're connected to the presentation; it works exactly the same way as the notes window but the remote just lets you go mobile and actually take it with you on your phone via the internet; that's super fun.

That's essentially what it looks like; you can obviously customize this presentation back in Figma or if you want to change it, but once it's on this link, you're you're pretty much good to go you can present this from anywhere you as long as you have a browser; that's all you need, it's just a cloud-based presentation and you just take that URL and password that we looked at before with you. As I said before, we'll go back into Figma and I'll show you how to re-access that password if you do need it.

So, I'll jump back into Figma; you can see here this is what we got once we uploaded or updated the presentation to the link we're just looking at. If I close off that Figma plugin and reopen it; and the way you can reopen it quite easily if you've already run the Figma plugin once is, you can go over to the right-hand side here and under "Plugin", you'll see the little pancake icon with "Pitchdeck" next to it; if you click on that icon, what that's going to do is it's just going to relaunch the Figma plugin without you having a right-click, go down to plugins and go down to the "Pitchdeck Presentation Studio" Figma plugin again; that's just a really nice way of launching it back up; once again it's just loading up the frames from our Figma file.

The neat thing about this is it's all collaborative; the the cool thing is because everything is in Figma, and you're already using Figma for all your designs and component libraries and brand and all that sort of stuff, and you've probably got multiple designers or content authors, or production people, all using Figma to generate a presentation like this; whether it's to present to a client or present to another stakeholder or somebody internally because you're using Figma, you get the collaborative design features for free Basically any presentation becomes a collaborative presentation; you're just making these collaborative presentations, and then get all the benefits of being able to export it directly from Figma using this plugin.

Again to get that URL and password back you don't have to re-upload the presentation again if you haven't stored it somewhere if you didn't email it to somebody and just want to really quickly access it; all you need to do is click on this little "padlock" and that'll bring up this little panel here and give you the same URL and password that you you got when you confirm the upload; again you can copy/paste those the password and the URL if you want to send it to somebody, or if you just want to open it really quick, you can just click on that link again where it says "secure link", you just click on that and that'll open up your browser and just use the password again to to get back into it and you can close that off just by clicking on this or clicking anywhere else.

That's pretty much it you can see how everything kind of came together at the end there all of our speaker notes which we saw all of our animations that ended up being in the presentation the order of the slides all worked out the way that we expected it all kind of comes come straight from Figma and I think that's really cool because again if you're doing everything in Figma already and you're already kind of collaboratively creating presentations in Figma you don't need to use a tool like PowerPoint or use a tool like Keynote where everything is disconnected from Figma and you kind of just want to use Figma as your source of truth for creating pictures or presentations and this lets you do that just by translating all that that good Figma design work into of course animations and things that are more specifically designed for a presentation like speaking notes and remote controls and things like that.

Okay, I'll leave it there; I think that was a fairly comprehensive overview of what you can do with the Pitchdeck Figma plugin in terms of generating presentations. In another Figma tutorial, I'll go over these other export functions that I mentioned, which would be exporting your collaborative presentations from Figma to PDFs, exporting presentations from Figma to PowerPoint files, exporting presentations from Figma to Keynote files and exporting presentations from Figma to Google Slides. We can do all of that as well, but for day today I just really wanted to go over the fundamental concepts of Pitchdeck and explain how it works demonstrate all of the the features that are currently offers, and show you how to take your collaborative presentations from Figma into a real platform that you can present with, and get all those cool things like animations for free.

Thank you as always for watching, and I hope that you've learned something from this Figma tutorial that's relevant to what you want to be using Figma for. Of course, if you have any feedback, please let me know, as I'm always trying to make these plugins the best that they can be. Thank you again, and we'll speak to you again very soon.

---

---
type: tutorial
title: How to export presentations from Figma to Google Slides using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-21T00:00:00.000Z
dateModified: 2020-05-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-presentations-from-figma-to-google-slides-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-presentations-from-figma-to-google-slides-using-pitchdeck.md
---

# How to export presentations from Figma to Google Slides using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you how to export your collaborative presentation designs from Figma into Google Slides.

To do that, we need to install a Figma plugin called "Pitchdeck". If you haven't already done that, you can do it by clicking on the top left Figma icon in the toolbar up here, and if you go to community or plugins and search for the term "pitchdeck", you'll see a result called "Pitchdeck Presentation Studio" pop-up. I've already got it installed and that's why I've got this little check mark here and it says "installed", but if you don't, this button on the right hand side will say "install", and if you click on that it'll change to look like mine, and once it does you'll be ready to go.

Now, I'm just using a Figma file that I that I designed myself, which covers Dieter Rams "10 principles for good design", and this is just a simple deck design that I came up with in order to show you roughly what it looks like to export it and; to export this to Google Slides all we need to do is right click, go to "plugins", and click on "Pitchdeck Presentation Studio". This is going to fire up the Figma plugin that we just installed a moment ago, the Pitchdeck Figma plugin, and once that loads, it's basically just going through all of our frames here on the left hand side in our Figma design, and it's treating all of the top level frames as as slides; each frame is considered a slide to the Pitchdeck Figma plugin; that's what it's doing now, it's just going through all those slides, loading in all the layers and rendering all the images.

Now that that's loaded up, we can see here that all of our slides have been added from our design, and as you can see here, we've got all of our layers from Figma loaded up into Pitchdeck. The thing you might notice is that the layer order is the opposite of what you see in Figma; in Figma we've got "intro" at the bottom and "principle 10" at the top, but in our Pitchdeck Figma plugin we can see "intro" at the top and the last slide is at the bottom. The reason for that is when you copy paste frames in Figma, as I was doing when I was making this collaborative presentation slide deck design, every time you copy one, it will add it next to the original frame which is good, but weirdly it kind of adds each layer on top of each other in this layer panel here; it's basically getting loaded in reverse in some sense; Pitchdeck automatically flips that order in the Figma plugin because it assumes that you've been designing it that way, and it will automatically reverse that order; the top one becomes your first frame, hopefully.

If that's not the case, what you can do is reorder these yourself and it's it's really easy; all you need to do (if you do need to change the order of these slides for any reason) is, if you hover over the little hover "drag" icon you'll see a grabbing cursor appear, and if you click and hold your mouse and drag that slide up or down, you'll be able to very easily reorder it in the list of slides; I've just re-ordered this one to number five, I can reorder it back to the top, and that's just a really easy way to reorder your slides without having to touch Figma the design file in Figma. You can see here when I move these, it doesn't impact my ordering or anything to do with the slides or the frames in Figma; the ordering is just meant for Pitchdeck to know what order you want the slides to be in. That's just a really, really quick and simple way to to reorder your frames.

The other thing that you'll notice underneath the slide preview is that we've got some "speaker notes"; speaker notes are added to every single slide as a text box or a textarea, and it's just a free text space for you to type whatever you want, or paste whatever you want, and these won't be shown to the audience or anyone that you're presenting to, these are purely used for adding some little notes or talking points to each of your slides; you can put different notes in each slide, and we'll be able to see those later when we export this collaborative presentation from Figma into Google Slides.

The other thing that you've probably noticed is that these slides are being animated, and that's being done over here on the right hand side using these animation tools. Something worth noting is that because we're going to be exporting our collaborative presentation from Figma to Google Slides, these animations unfortunately won't be carried across to the Google Slides. These animations are just designed to be used for the "Pitchdeck URL", which is the default export format, and we won't go into that format in this particular Figma tutorial.

I do have another Figma tutorial on that on our YouTube channel; if you're interested in how that works, you can check out that video, it goes for about 30 minutes and it'll give you a complete overview of how all the animations work and what it looks like to present an animated version of your Pitchdeck using things like a remote control, controlling the deck from your phone, having laser pointers and all this kind of cool stuff; but today we're just going to be looking at how to export our collaborative presentation slide deck design from Figma to Google Slides; which again, won't carry over these animations, so please don't spend too much time on the animations if you're only going to be exporting to Google Slides from Figma, because they unfortunately won't get carried across; but you will be able to add animations if you want to in Google Slides itself, once we make that jump from Figma to Google Slides, which I'll show you in just a moment.

Now that we've got all that covered, I'm happy with the ordering, I'm happy with my speaker notes, I'm happy with the slide deck presentation designs; they're all completely matching up with with the designs that I've got in Figma, and now I want to export the presentation from Figma to use it in Google Slides. What we need to do is click on the export format drop down here, and we're just going to go down to the "PowerPoint file" option; if you click on "PowerPoint file" and then you'll see the button has changed to say "Export PowerPoint", and that's what we want to do (this will make sense in a moment).

If you click on "Export PowerPoint", what that's going to do is, it's going to go through all of our frames and convert them into slides, and more specifically convert them into a PowerPoint file with all of our slides from our collaborative presentation design. Now the PowerPoint file is ready, and it's going to give us the option to save it to our desktop; I'm just going to do that now, and you can rename this if you like; I'm just going to rename it to "Dieter Rams Slide Example" and save it to my desktop.

Now that's on my desktop, what I'm going to do is I'm going to minimize Figma and I've actually already got a blank Google Slides document ready in the browser; all I did was, I'm signed into my Google account, I've got Google Slides open. If you just search for "Google Slides" or however you usually get to Google Slides and open up a blank template; once you've done that, you can go to "File", and then go to "Open", and then under "Upload", what you want to do is you want to grab your file that we just exported; in my case I've already got this file on my desktop now called "Dieter Rams Slide Example", I'm going to drag and drop that into this little window here; you can see I've got it ready to drop I'm just going to let go and that's going to upload the PowerPoint file that we just exported from Figma, and it's going to upload it into google Google Slides.

It's just finishing uploading now, and once that finishes processing you'll see here that it's actually opened it up already for us, and there we go. You can see that we've got all the slides that we just had from Figma; everything from Figma is now in Google Slides and it's looking really, really nice.

You'll notice a few things here, I'll just run through a few things that I think is pretty neat; if we go from go from the start we've got each element is individual; I can actually move these around if I want to, which is really cool, and I change those. The other thing you'll notice is down at the bottom here, I've got all my speaker notes; the speaker notes that we just had a look at in Figma, they've all been pulled across into Google Slides, and I can make that bigger if I want, I can edit these and add more notes, or get rid of some notes if there's if there's too many (or if I don't want them anymore). I can just get rid of those; that's all completely editable, it's been carried over, and that's pretty cool.

The other thing that we can do is, as I mentioned, none of the animations that we set in Figma get pulled through into this this Google Slides document, but we can animate these elements now that they're in Google Slides. If you click on anything you want to animate, in this case I'm just going to use this image of the radio, and if you click on the "animate" button up here, that's just going to reveal the animations settings for your Google Slides. I've got the image selected and now I can basically just click on any of these animations and play them; and you'll see here if I advance the slide that that comes in as you'd expect, I can stop that, I can change it, I can make that fly in from the right, and then play that again. That's pretty fast, but you can see we can essentially animate it the way that we'd like in Google Slides; all these elements are individual, they can be manipulated on their own, and you can pretty much go to town on your animations however you like in Google Slides; and that's pretty cool, that means we can we can pretty much move all this stuff around and add animations where needed.

The one thing to know is that the text layers are not editable; and the reason for that is they're being exported as SVG images, and that just means that you don't need to install fonts; fonts that are missing your slides are not going to look really wonky and totally swap to "Times New Roman" or whatever the fallback font might be, the the idea is to make them as close as possible to the original collaborative presentation designs from Figma; and of course that's just not going to work in some cases when you don't have certain fonts installed. If you're loading this up on a different computer, it's just not going to really work; for now, at least in this version of Pitchdeck, it will export these as images which are totally independent of each other, but unfortunately they can't be edited in Google Slides if you do need to change the text, but having said that if you do need to change the text, all you need to do is go back to Figma and re-run the Pitchdeck Figma plugin; re-export the PowerPoint file and and open it in Google Slides and you'll you'll have a brand new file with with all your updated text.

While it's unfortunate it's not able to be edit it in Google Slides at the moment, it's currently that way because the design is kind of taking precedence; making sure it renders exactly the same way as you intended from your Figma design once it gets into Google Slides is the top priority at the moment. That's basically what you can do there, everything else is as usual, you can basically use Google Slides as you already know how to or if you've used it before, all this is doing is essentially giving you the starting point of whatever you designed in Figma with your speaker notes is now in Google Slides automatically; you don't have to create all this or copy paste it from Figma or if you can or whatever, export your images and import them; none of that crazy stuff. You could have a few dozen slides and it'll import them all straight away, and and that's going to be really a huge time saver if you do want to use Google Slides to present something you've designed in Figma.

That's pretty much it; I'm going to jump out of Google Slides now. I think we've covered all the basics of what you can do in there, and you can obviously look up Google Slides tutorials if you want to get more into the animation side of things, but I won't be covering that in this Figma tutorial.

Back in Figma; as you can see here, it's just notifying us that the PowerPoint file was exported correctly. I can basically close out of that now, as I don't need to to run it again at the moment, but if I do need to reopen it later and export another PowerPoint file to open in Google Slides, all I need to do is go back over here on the right hand side column in Figma and you'll see a little pancake icon with the word "Pitchdeck" next to it; if you click on that, it will relaunch the Pitchdeck Figma plugin for you, and that just means you don't have to go to the right right click menu go to "plugins", go to "Pitchdeck Presentation Studio" and find it; you can just quickly relaunch it from the sidebar.

That's everything for today I hope this has been a valuable Figma tutorial if you've been wondering how to get your Figma collaborative presentation slide deck designs exported from Figma to Google Slides; this is the easiest way to do it, using the Pitchdeck Figma plugin. There'll be more Figma tutorials if you're interested in other Pitchdeck formats; if you go to our YouTube channel, you'll be able to follow along with other Figma tutorials, but for now this one is a complete guide to exporting your collaborative presentation slide deck designs from Figma to Google Slides with just a few clicks, as we just saw. Thank you as always for watching, and I'll be back very soon with even more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export presentations from Figma to Keynote using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-21T00:00:00.000Z
dateModified: 2020-05-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-presentations-from-figma-to-keynote-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-presentations-from-figma-to-keynote-using-pitchdeck.md
---

# How to export presentations from Figma to Keynote using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you how to export your collaborative presentation designs from Figma to Keynote (or Keynote file), that you'll be able to open on your computer and present as a real presentation outside of Figma based on your own slide deck designs.

To do that, we need to install a Figma plugin called "Pitchdeck". If you haven't already done that, you can do it by clicking on the top left Figma icon in the toolbar up here, and if you go to community or plugins and search for the term "pitchdeck", you'll see a result called "Pitchdeck Presentation Studio" pop-up. I've already got it installed and that's why I've got this little check mark here and it says "installed", but if you don't, this button on the right hand side will say "install", and if you click on that it'll change to look like mine, and once it does you'll be ready to go.

I've just jumped back into my Figma design, and this is just a collaborative presentation slide deck that I designed in Figma based on Dieter Rams' "10 principles for good design"; it's just 11 slides, and what I want to do today is take get slides outside of Figma to Keynote and make this into a real presentation that I can use. To do that we need to run the Figma plugin we just installed by right clicking anywhere, going to "plugins", and then clicking on "Pitchdeck Presentation Studio", and once you do that it's going to fire up the Figma plugin that we just installed, and it's going to look through all of your frames on the left hand side here, and it's going to treat each of those frames as an individual slide in your slide deck.

Make sure you're running this in a file that just contains the slides or the frames that you want in your deck; if you do have other frames in there, it's going to treat them as slides, too. Okay, it's gone through and it's looked at all of our frames, and you can see here that we've got a list of 11 frames from our collaborative presentation slide deck design, and they all look as you'd expect them to look.

The one thing to note is that the ordering is exactly reversed from the ordering that we see over here in the left-hand side in Figma; we can see at the bottom of this list we've got "intro" and then gradually working its way up from "principle one" to "ten", but in Figma, in the Pitchdeck Figma plugin here, you can see "intro" is actually coming first, and then it goes from "one" to "ten" after that; and the reason it does that is because typically when you're designing something like a pitch deck or a slide deck as a collaborative presentation in Figma, usually you'll create a slide and you'll be happy with that layout, and you might want to copy paste it and when you copy paste it, Figma will paste it next to the slide that you already had (which is great), but it also adds the new layer on top of any of the old layers that you already had; it effectively keeps layering upwards instead of in in the reverse.

So, Pitchdeck kind of accounts for this by default and assumes that you've done your design that way, and it'll order it in reverse to correct the order from start to finish; but having said that, if if you do need to re-order the slides or if you've done it a different way, you can very easily re-order them just by hovering on any of these "drag" icons in the slide panel on the left here in the Figma plugin, and if you click and drag you can simply just re-order those frames or those slides; you can see here we've just moved number one down to number four, I can move that back; you can move any of these around in any order and these are completely disconnected from your Figma design order. If you do want to re-order these slides just for your presentation export from Figma, you can feel free to do that and it won't mess around with your actual layer order in your original presentation design, that'll all be left alone, but the Pitchdeck Figma plugin will look at this order as the source of truth.

Now that we've got our slides, as I said, you've got a preview here with with all of the content of each of them. The thing that you want to have a look at underneath that preview is this little section called "speaker notes"; speaker notes is just a little area with a text box or a text area where you can actually write notes per slide which can be used when you're actually giving your presentation and these won't be shown to the audience at all; these are just used for your own use, if you're presenting on a second screen or you're using Keynote to present and you want to use the slides speaker notes feature, this will automatically be put into the speaker notes that you'll be able to see once you export our collaborative presentation from Figma to Keynote.

The other thing that you've probably noticed is that we have some animations on all of our layers here, and these are being controlled by this panel over here; however, it is worth noting that because we're exporting from Figma to Keynote in this Figma tutorial those animations won't be won't be seen in the in the Keynote presentation; if we open up our export formats here you can see that we've got two groups, we've got an "animated" group which just has the "Pitchdeck URL" export format, and we've got a "static" group which has things like "PDF", "PowerPoint" and "Keynote"; the animations will only be applied to this first format, which is the "Pitchdeck URL"; that is the default format for creating presentations, if you upload a presentation to that, it will give you a URL where you can actually present this deck, and you'll get all the animations, you'll get the slide notes, you'll get a remote control to control the slides from your phone if you want to; there's all these different features it offers. If you do want to know how that works, there's a separate Figma tutorial on our YouTube channel; you can check that out, it goes for about half an hour and it'll give you a deep dive and a full demo of how that works and what you can do with it.

For today, because we're going to be exporting our presentation design from Figma to Keynote, just be mindful that any animations you do apply here will not get carried across, and the reason for that is these are very specific web-based animations that don't have any relationship to Keynote; Keynote has very different animation styles that that don't map to these animations; they're just static when you export it, but you can apply animations once the deck is in Keynote if you'd like to, and I can show you how to do that in a second after we export this collaborative presentation design from Figma to Keynote; let's go ahead and do that now.

I'm happy with the ordering, I'm happy with the design, I've got all my speaker notes set; so, to export this presentation from Figma to Keynote, all we need to do is click on this little drop down up here; this is our export format selection, and if you go down to the bottom of the list where it says "Keynote file", click on that, and you'll see here that it's just changed the button to "Export Keynote". All we need to do is click on that button now, so I'll click on that, and what this is doing is it's generating an actual file that can be opened in Keynote natively outside of Figma. It's taking all your presentation designs and turning them into slides.

Okay, it's telling us our presentation Keynote is ready, it's letting us save it, and by default it just uses the the document title from your Figma file; I'm just going to leave that as is and click "Save" to my desktop. It's telling me that I can save the the Keynote file to a computer and open it in Keynote or I can share it via email or Slack or anything else I prefer; in this case I am going to open it on my on my computer. To do this, you can just double click on the file that you just exported, or you could open up Keynote and open it manually if you wanted to, just by going to "File", "Open", and then double clicking on the file we just exported.

Now I'm in Keynote after double clicking on the file that we just exported from Figma; this is a slide deck presentation that we just we just designed in Figma, and as you can see, all of the slides are there, the order is the same as we expected, and all of these elements are real elements that we can click on and move around, they all change, the background property has already been set to white, but we can change that if we wanted to, and that will show through with all of the the other layers that we've got.

As I mentioned before with the with the speaker notes, if you go to "view" and then click on "show presenter notes", you can see here, it's just revealedthe presenter notes or speaker notes that we added in Figma, and those have been carried across to our Keynote presentation; whenever I change a slide you can see down here that those are being pulled in, and I can edit those of course, or change them, now that we're in Keynote; and that's what it looks like.

If you do need to apply animations; as I said, they don't get carried across from Figma into Keynote, they only get carried across into the Pitchdeck web URL format in the other tutorial; but if you do want to add animations to these slides, now that you've got them in Keynote, you can totally do that as well. The way you can do that is by going to "animate", just in the top right here, clicking on a layer that you want to apply an animation to, clicking on "add an effect" and then you get this drop down here where you can add different effects. If I do a blur effect that's going to blur that in for me; I can choose this other one; that's that's quite a crazy animation but you can totally do that as well, and you can keep changing those of course. I don't know what that one does; oh yeah, it's a lens flare; you can play around with these of course, but the neat thing is that all of your assets from Figma have now been migrated into Keynote, and you can play around with these, you can move them, you can scale them of course, and pretty much do whatever you want. Of course, you can present that as well by clicking on the "play" icon and doing it that way.

That's essentially it; it's really simple and really quick to do this, and I think the cool thing is if you're designing these presentations collaboratively in Figma, you get all the benefits of being able to design collaborative presentations in a tool that you really like, without having to just jump straight into Keynote in an isolated way; you can keep Figma as your source of truth for your collaborative presentation slide deck designs and whenever you do need to export your presentation from Figma to Keynote, you can simply re-run the Pitchdeck plugin as many times as you want, keep Figma as a source of truth; and keep re-exporting to Keynote whenever you need to.

You can relaunch the Pitchdeck Figma plugin really quickly by just going over to the right hand side, and you'll see the little pancake icon with "Pitchdeck" next to it; if you click on that, that will relaunch the Figma plugin straight away; and that way you don't have to go to right click, go to "plugins", and find it in there, you can just do it with one click on the right hand side there.

I hope that's been helpful for anybody who's been wondering if they can export their collaborative presentation designs from Figma to Keynote; and the answer is you can, but at the moment the only way you can do it is by using the Pitchdeck Figma plugin that we just went through. I hope that helps you or your team with anything you're working on, or if you're just trying to solve the Figma to Keynote problem that you've been having, this is definitely the way to go about it. Thank you again for watching, as always, and I'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export presentations from Figma to PDF using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-21T00:00:00.000Z
dateModified: 2020-05-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-presentations-from-figma-to-pdf-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-presentations-from-figma-to-pdf-using-pitchdeck.md
---

# How to export presentations from Figma to PDF using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you how to export your collaborative presentation slide designs from Figma into a PDF pitch deck or slide deck.

To do that, we just need to install a Figma plugin called "Pitchdeck" and if you haven't already done that, you can go to the top left of your Figma app and click on the little Figma icon, and if you go to "Community" or "plugins and search for the term "Pitchdeck"; underneath the plugins tab you'll see a result pop-up that is called "Pitchdeck Presentation Studio". If you haven't already installed it, you can go over to the right hand side where you'll see an "install" button, and if you click on that install button it'll change to look something like mine, where it's got a little checkmark and says "installed" next to it; once it looks like that, then we're ready to go back to our project and export these collaborative presentation designs from Figma to PDF.

Okay, I'm just using a design that I made up for Dieter Rams' "Ten principles for good design". All I've done here is create a whole bunch of frames, currently at 1920 by 1080 resolution, but you can make those whatever you want; and what I'm just going to do is run the Figma plugin that we just installed. If you go to right click and then go to "plugins" and then just go down to "Pitchdeck Presentation Studio" and click on that, that's just going to fire up the Figma plugin that we just installed a moment ago, and what it's doing now is; it's looking through all of our frames and it's essentially converting those into our slides; Pitchdeck is going to interpret each frame as a single slide; whatever you've got at your top level of the page in terms of frames, that is what Pitchdeck is going to be looking for and treating each of those frames as a single slide.

Now that we've got it loaded up, you can see on the left here that we've got 11 slides loaded in that matches up exactly with what we would expect to see in our design; we've got the "ten principles" plus the intro, and the first thing you might notice is these frames are actually in a different order; the ones that we can see in the plugin and the reason for that is when you copy and paste frames in Figma when you're designing something, like when I was designing this deck, whenever I was happy with the first frame what I would do is I get the layout right, and then I would copy and paste the frame, and it would put it next to the existing frame (which is what I wanted), but what it also does is every time I paste a frame in, it incrementally adds a new frame above the one that I just created; and instead of going from top to bottom, Figma orders the frames from bottom to top.

Knowing that's probably going to be the case for you as well, I made sure that the Pitchdeck plugin by default will simply reverse the frame order as the initial load order, hopefully just to make it a bit easier for you designing your deck. However, if you haven't done it that way or if you just simply want to reorder the deck, you can do that by clicking and dragging on any of these little handles on the left here next to any of these slides, and you can see there I've just dragged that up to the top and then I let go, and that'll reorder the frame for me.

I'll give you an example of exporting from Figma to PDF and then I'll reorder the frames and show you what that looks like if I want to save it out again. Just so you can get a bit of an idea of what that looks like; to export this slide deck from Figma to a PDF file, all we need to do is go over to the top here where we've got our formats and where it says "Pitchdeck URL", I'm just going to click on that and you can see we've got a few different formats here we've got a "Pitchdeck URL", which is the default format, and then underneath the static group we've got "PDF file", "PowerPoint file", "Keynote file", and of course for this presentation of this tutorial we just want to select "PDF file".

I think it's just worth touching on, you've probably noticed that these slides are animating, and the reason for that is over here in the right-hand side we do have access to all the elements inside of our frames inside of our slides and we can actually apply animations to each of those; I've already done that and Pitchdeck has saved those animation settings for me. However, because we're exporting to a PDF file, PDF does not support any sort of animation; it's totally flat. Exporting this deck to a PDF just means we probably want to send it to either a stakeholder or email it to somebody, or maybe get somebody to review the deck content itself.

There's a variety of reasons why you might want a PDF deck, or just ease of use, but it's worth noting that these animations only get applied to the "Pitchdeck URL" export format; and I won't be covering that in this Figma tutorial, but if you are interested in that, I've got another Figma tutorial up on our YouTube channel which goes for about half an hour and it does a really deep dive into exactly how those all this animation stuff works; and then it shows you how to export that to a presentation URL and then it gives you a complete demo of what that actually looks like when you export it; you can do all sorts of cool things, like use your phone as a remote control, you can use laser pointers, you get your your slide notes in there, it's pretty neat; but for this tutorial I'm just going to show you how to export your slide deck from Figma to PDF; so let's do that now.

I've selected the "PDF file" format and the buttons change to say "Export PDF"; I'm going to click on that. Now, what that is going to do is it's going to take all these frames, it's going to look at the order that we put them in, and it's going to convert all of those into a single merged PDF deck with all of these frames in it, and this deck is going to be compressed as well; whereas a typical PDF from Figma can be quite large, we're going to be exporting it through Pitchdeck which actually shrinks the size and keeps the quality.

We've we've got it ready now, it's telling us that our PDF file is ready, we can save the generated PDF to the computer now; we've got a save dialog that's just popped up, and by default it uses the document name; whatever you've called your Figma project, that will get auto populated in the save field with today's date as well (date and time), just in case you're exporting a bunch of these and need to timestamp them, of course you can remove that; if you wanted to remove that you can simply do that there. I'm just going to export that and I'll just do "original" at the end just add a little bit of a version to it and then when you're ready with that you can click on "Save". I'm just going to save it to my desktop, if I go to my desktop now in the finder window, you can see here that it's saved to my desktop as "Dieter Rams Slides Example Original dot PDF" and in this case I'm just going to use the spacebar to open that up, and that will open up the Mac preview for this PDF.

You can see here, it's rendered it out beautifully, this is all vector text, we've got our image looking very nice, and I can click through that or slide through it and all of our slides are here as you'd expect. It's looking really, really nice; we can of course also open that up in "preview" the full one, but for now I'm just going to use the kind of miniature iOS preview to navigate through; you can go up and down on that but of course you could also open this up full screen and use it as an actual presentation, too, which would be pretty neat.

I'm just going to minimize that again, and as mentioned, I'm going to relaunch the Pitchdeck Figma plugin and reorder those frames to see what that looks like. To relaunch the plugin you don't need to right-click and go to "plugins" again; once you've run it once in a project, if you go to the right-hand side of the Figma window you'll see a little column with a title called "Plugin", and if you look for the little pancake icon with the word "Pitchdeck" next to it, and click on that; clicking on that will immediately re-run the Figma plugin without you having to go into the right-click menu again and browsing for that plugin, especially if you have a lot of Figma plugins that can take some time; that's the easiest way to relaunch it is just on the side there.

Okay, it's opened it back up. It's currently reloading the frames, and it's doing this because you may have made some changes to to your frames. If you have made changes to the frames while the plugin is already open, this little "refresh" icon here will actually also refresh these these frames and refresh the slides, and get a fresh copy of all the positioning, and all the images and text, but while it's running, it'll keep a sort of a cached version of it; so you don't have to keep going back and forth and refreshing it every time just to make usual changes.

Now that we've tried exporting the deck with the default ordering, I'm just going to quickly show you how to change that ordering and get a different export order for your PDF deck in Figma. I'm going to leave the intro the same, this is a bit of a weird deck to reorder because the slides already have numbers on them, but let's just say for argument's sake that number two should actually be much further down and actually number nine or principle 9, you want to actually bring up to the top for some reason. We also want to bring principle 10 up to the top and and maybe even move the intro underneath that; now we've got some very strange ordering where seemingly the last slide is the first one followed by the intro and then kind of just goes a bit all over the place, but that's the ordering that we want, maybe we've got a crazy art director who wants to go a bit a bit Pulp Fiction with it and rearrange all the slides. We can do that and you can see there it's just really, really smooth and easy to reorder those frames, and as I said before that will not impact the ordering of your Figma file; that will remain intact, this is purely just to tell Pitchdeck what ordering you want these slides to be in, and that will get saved between the plugin running as well; if you set this order now and close the Figma plugin when you reopen it this order will stay the same; you don't have to keep reordering it, it will remember that for you.

As before, to export this collaborative presentation from Figma to PDF we just need to go to the export format go down to "PDF file" click on that and "Export PDF" has been updated in the button; if we click on that button now, exactly the same as last time it's going to go through those frames, convert them into slides merge them into a PDF, compress the PDF, and give you a really nice output file. Once it's exports we can also have a look at that file size to compare that as well; I'm just going to leave the file name default this time to show you what that looks like; I'm just going to click "Save", go back to finder and now you can see here we've got our new PDF file; where slide 10 for some reason is the first one because that's the way we wanted it, followed by the intro and followed by 9, followed by 1, 3, 4, 5, 6, 7, 8 and then the very last one is 2 as we specified before.

That's looking really good. As I mentioned briefly, the file size is 876 kilobytes; it's less than less than a megabyte, and that is perfect for sending via an email or sending over Slack; it's just a really lightweight PDF. As I mentioned, if you export that directly from Figma as a single PDF the file size will be much, much, much bigger; it's just the way that Figma saves PDFs by default but they've been optimized in Pitchdeck to make it optimized for portability. Essentially, being able to send it using a very small file size of email or yes Slack or whatever you want to use, cloud storage to transfer that PDF. That's our two PDFs, look at the original one with the original order and the modified order to show you how that works; but both looking really, really crisp and and really nice each time. I think if you need PDFs of your collaborative presentation deck then you'd be very happy with those.

This is just confirming that the PDF was saved we don't need that anymore; so, we can close the plugin and that's all there is to it; we we don't need to do anything else, those PDFs are ready to go, and as seen before, the original Figma file is completely unchanged, it's still the source of truth; the ordering is still the same, but we can of course rerun that plugin and see that ordering that we just saved. I'll just do that now is kind of a last example and then we can we can part ways; you can try this yourself, once again it's just loading those frames and turning them into slides inside of Pitchdeck, and once that loads we should see all of the layers that we just had in the ordering that we just specified before closing the Figma plugin. You can see here now, it's defaulted to 10 being the first slide followed by 2 and 9; it's kept our ordering from before, and again if we wanted to rearrange that, it's very simple; just slide click and drag and slide and those will be rearranged for you; and there we go, that's back to the original order. You could obviously export that again, but I've already got two copies of the PDF and and I'm very happy with them.

That's it for today; if you are interested in exporting to these other formats that I mentioned before, or interested in the animations and how to create a an animated collaborative presentation from your deck, maybe after you've done the PDF version and you want to do a bit of a fancier one. please check out the other Figma tutorials that are on our YouTube channel and you'll be able to find very in-depth Pitchdeck Figma plugin tutorials on how to do any of these other formats as well.

Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one. I hope this has helped you with any problems that you've been having in your team, or if you've just been wondering how to export your slide decks from Figma to PDF; then I hope this has helped and and as always, working with Figma and being able to use it as a tool where everyone can use it, as opposed to other tools where it's very siloed; it's just awesome that you can create these collaborative presentations in Figma and export them to all these different presentation formats; you basically get that collaboration baked in by defaults and then the Pitchdeck Figma plugin will really help augment that collaborative presentation design work, and and serve as a way to get it out into multiple formats, like the PDF file we just we just had a look at.

I'll leave you with that; until the next, time thank you again for watching, and we'll speak to you again soon.

---

---
type: tutorial
title: How to export presentations from Figma to PowerPoint using Pitchdeck
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-21T00:00:00.000Z
dateModified: 2020-05-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-presentations-from-figma-to-power-point-using-pitchdeck/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-presentations-from-figma-to-power-point-using-pitchdeck.md
---

# How to export presentations from Figma to PowerPoint using Pitchdeck

#### Video Transcript

Today, I'm going to be showing you how to export your collaborative presentation slide designs from Figma to PowerPoint; or to a PowerPoint file, I should say.

To do that, we need to install a Figma plugin called Pitchdeck. If you haven't already done that, you can do it by clicking on the top left Figma icon in the toolbar up here, and if you go to community or plugins and search for the term "pitchdeck", you'll see a result called "Pitchdeck Presentation Studio" pop-up. I've already got it installed and that's why I've got this little check mark here and it says "installed", but if you don't, this button on the right hand side will say "install", and if you click on that it'll change to look like mine, and once it does you'll be ready to go.

Now we can switch back into our Figma project today I'm just using Figma file that I designed as a slide deck for Dieter Rams "Ten principles for good design" to a deck with eleven designs, and essentially I want to take these slides out of Figma and I want to create a PowerPoint presentation that I can use in Microsoft PowerPoint.

To do that, we can run the Figma plugin we just installed. If you right-click anywhere and go to "plugins" and then go down to "Pitchdeck Presentation Studio" and click on that, that is just going to fire up the Figma plugin we just installed the, Pitchdeck Figma plugin; and once it loads, you'll be able to see all of the frames from your Figma file. All of these frames on the left here will get translated into slides inside of the Pitchdeck Figma plugin; it's currently looking through all the frames, looking through all the layers, the text layers, and image layers, and it's constructing them into slides that we'll be able to use in just a moment.

Now that it's loaded all of our slides, you can see here that the slides have been mirrored to our designs. If we click through here, you can see we've got all of our slides as we would expect from our designs above. In the left hand side, you can see that we've got a list of all of our layers and those are being mirrored from the Figma layers in the Figma layers panel on the left here; you can see here we've got "intro", "principle one", "principle two", and that's "intro", "principle one", principle two; but you'll notice that the layer order has been exactly reversed, and the reason for that is (maybe this is just me), but when I'm designing things in Figma and when I was designing this collaborative presentation, I would design this slide for example, and when I was happy with that, I would copy/paste that slide or that frame, and Figma would put it right next to it and then I could just edit the content and keep the the layer pretty much as it is; but in Figma, when you paste, essentially the layers each layer on top of each other in a reverse order; whenever you paste something, the layer will be moved to the top of the layer's order in the left-hand side here.

What Pitchdeck does is, it automatically reverses those layers by default and assumes that you've been copy pasting your frames; that means that the order is actually going from bottom to top in terms of this layer order here, and that's why we've got the correct order that would expect here, however if that doesn't suit you, what you can do is you can reorder these frames by clicking and dragging on the little "drag" icons next to any of the slides in the Pitchdeck Figma plugin. All I did there was just hover over the icon and then I'll get a little grabbing icon, if I click that, holding the mouse, and then move it up or down I can rearrange these frames super easily and that does not impact anything that's going on in the Figma file; this is just related to the plugin. Editing this layer order here won't mess up your designs or change anything in the original design, it'll just tell Pitchdeck that this is the order that you want these frames in; for now I'm just going to leave it as is, and keep the intro where it should be.

The other thing you'll notice is this little preview section here; this is an exact one-for-one with our slides, and what it's going to look like when it gets exported. The titles are up here; and the other thing to note is underneath the preview we've got this "speaker notes" section and this is just a text field, a text area and you can type in any content that you want there; you can put bullet points in there, you can put a little paragraph like this one, you can just put a little sentence, or just a note for yourself; and these are the notes that will not be shown to the audience and won't be shown inside of the presentation content, these are just for you as a speaker or whoever is presenting this presentation; if you need to add them you can add different notes to every slide and those will be available to you once we export our collaborative presentation very shortly.

Now that I'm pretty happy with the speaker notes, I'm happy with the ordering, you'll notice here that we've got these animations set on all of the layers; by default those set to "no animation"; you can see here we've got this "no animation" setting, those are all defaulted to no animation, but I've already applied some animations which get saved between opening the plugin; however for this particular Figma tutorial, because we're going to be exporting to a PowerPoint file, these animations unfortunately don't get brought across into PowerPoint. These are primarily used for if you're uploading the presentation to the Pitchdeck URL; we can see here if we open up the export formats just in the top menu bar here by clicking on the select box we've got two groups we've got "animated" and underneath that is the Pitchdeck URL option, which we've got selected by default, and then we've got "static" format, we've got "PDF file", "PowerPoint file" and "Keynote file"; that means that because it's static, all of these animation settings do not get carried over to any of these static formats, they'll only be carried over to the Pitchdeck URL format.

That's just worth keeping in mind in case you're wondering why you've animated these things but you're not getting animations in your PDF file, PowerPoint or Keynote; these are just not supported in those formats because we're using very specific and custom animations that will only work in a web-based environment, like the Pitchdeck one.

If you do want to see how that works, I've got another Figma tutorial up on our YouTube channel, and you can get a really deep dive; it goes for about 30 minutes and goes through all of the details you need to know about animations and takes you through the upload process and shows you what a presentation actually looks like when you do that option, but for today we just want to go from Figma to PowerPoint.

In this case, I'm just going to open up that options panel go down to the "PowerPoint file" option and click on that, and when I select that you'll see that it's changed up here, and it's also changed my button to say "Export PowerPoint"; because I'm ready to go and the design from Figma is looking really good, I want to get it out of Figma to PowerPoint; I'm just going to go ahead and click on "Export PowerPoint", and what this is going to do is it's going to generate slides for a PowerPoint file; that's a native PowerPoint file that's going to come out of Figma in just a moment. It's going to take all of our Figma designs and put them into a PowerPoint presentation.

You can see here it's just prompted me to save a file; so I'm just going to save that to the desktop. By default it just names it whatever your Figma file Figma document is called, but you can obviously change that if you want to; I can just rename that and you can see here it's just changed it for me to look like the way I want. I'm just going to click "Save", and as you can see here it's just confirming that our PowerPoint file is ready and we're able to open this in either PowerPoint and Google Slides or Apple Keynote, or just share it with somebody.

Now that that's been saved I can open up finder and go to my desktop and you can see right here I've got my PowerPoint file which I can double click; I don't have Microsoft PowerPoint on my computer but I do have Apple Keynote and this PowerPoint file will open up in that just fine as well. There we go; that's Apple Keynote running now, and you can see here we've got all of our slides directly from Figma, and that's all of them as would expect; we've got background colors set to white, we could obviously change that in here if we want to, and you can see all of the other elements still say the same; I'll set that back to white now. We can move around our layers if we'd like to, and the other neat thing is if we go to open up our presentation notes, if you just go to "view" and then go to "show presenter notes" (this might be different in PowerPoint), but if I click on that, you can see here that the text that we added in Figma has been carried over into our speaker notes, and I can edit those if I want to, or I can get rid of some of them and remove those, but that's all been loaded in; that's really neat.

The other thing we can do is, because these are just images, we can add effects to them if we like, we can change opacities, and do all the normal stuff you'd want, like add animations. We could add a "blur" effect there and that would work; all of the layers from Figma have essentially been imported one-for-one into a PowerPoint file; you could open this up in Microsoft PowerPoint (as I said I'm just using Apple Keynote at the moment to give you an idea of it), but this is a PowerPoint file that will open in PowerPoint, Keynote or Google Slides, if you prefer.

That's that's all there is to. It's very straightforward as you saw; it only took you know maybe five to ten seconds to export our collaborative presentation from Figma to PowerPoint; it's very very quick.

I'm just going to close it off now, but if you need to make changes to it, you can you can either make those changes in PowerPoint, or if you prefer to leave Figma as your source of truth, you can just make your updates in the Figma project file and rerun the Pitchdeck Figma plugin, which you can do just by going over to the right hand side here, under "plugin", and clicking on the "Pitchdeck" little pancake icon, and that will rerun the Figma plugin. You can just keep exporting your collaborative presentation designs from Figma to PowerPoint from as many times as you want, and it's just going to keep doing it as many times as you need to; that way you can keep your collaborative presentation design in Figma as your source of truth for your slides, along with your design elements and your components, and just keep exporting it from Figma to PowerPoint as needed.

I hope that's been helpful, if you've been wondering how to get your slides out of Figma into PowerPoint, this is the way that you can you can go about doing that. I hope that it helps you or your team with something that you're working on or if you've been trying to solve this problem for yourself. Thank you as always for watching, and we'll be back very soon with more Figma tutorials for you to check out.

---

---
type: article
title: Agile is for losers
description: My decade long frustrations with seeing the destructive cult of Agile™ infiltrate digital agency environments
datePublished: 2020-05-07T00:00:00.000Z
dateModified: 2020-05-07T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/agile-is-for-losers/
markdownUrl: https://www.hypermatic.com/articles/agile-is-for-losers.md
---

# Agile is for losers

### On (Agency) Agile™

In the same way that smashed avocado on toast is Australia's biggest innovation in the last decade, the biggest "innovation" in digital agencies in that the same time period has been stealing and bastardizing Agile, mashing it's incompatible principles into the old school agency model. Like the quote from Tyler Durden in Fight Club, "Sticking feathers up your butt, does not make you a chicken." or, in other words, "Running waterfall projects with standups does not make you _Agile_".

While Agile itself isn't new, the way agencies typically discover and implement it is analogous to other industries attempting decade long "digital transformation" projects without really knowing what they're talking about or why they're doing it.

### First contact (2011)

My very first exposure to the existence of Agile was back in 2011, when I started receiving spam emails at work, which offered 3 day courses to learn about something called "Scrum", that would apparently solve every problem known to man. I recall this because my co-workers received the same emails, and we would joke about who would fall for this nonsense.

Fast forward about a year, and one of those co-workers who was formerly a backend developer, who literally transitioned overnight to be a project manager. Their first order of business as the newly appointed project manager was to implement Agile/Scrum into the agency (the entire company consisted of less than 6 people at the time, including the owner and myself).

I thought it was a joke, so I asked:

> "Is this a joke?"

To which they replied:

> "No, it's not a joke. I read some articles online about it last night and this is what we're going to be doing now."

I've since come to learn that it still doesn't take much more than this level of research or training to proclaim that you're some kind of Scrum master, or project manager who knows "Agile".

This began to plant the seeds of what I would personally see to evolve into one of the most destructive and misguided trends that the agency landscape has adopted since it tried (and failed, miserably) to "do SEO".

### The messy middle (2014)

After the somewhat harmless attempts I saw at my first agency, I finally joined my first real Agile project team in 2014, while working as a frontend developer on the rebuild of a large website for a well known brand. Unlike my previous exposure to Agile, this was a sizeable team of supposed expert consultants who would work on-site with us every day for 4 months. We had: 1 project manager, 2 scrum masters, 2 full-time producers, 3 account mangers and half a dozen backend developers (also consultants).

On the flip side, to handle the entire design and front end: it was just 2 frontend developers (including myself), 1 tech lead and _1_ designer!

This project was a fixed cost, fixed scope with a fixed deadline - and not one of those "fake deadlines" - if we didn't launch this new site in 4 months, the current live site was going to be taken offline by the previous agency, due to their contract and hosting ending.

We worked in 2 week sprints, did all the typical "ceremonies", and had 360 degrees of our project room covered in a post-it note kanban matrix, which for some reason needed to physically mirror what we already had in 2 different web based project management tools (JIRA _and_ Asana). I guess that's why we needed 2 scrum masters, one to continually keep the physical post-it notes in sync with digital ones in JIRA and Asana.

However, it wasn't long before I started to see some major red flags; namely, that any failure in meeting the amount of work the developers on the project were meant to finish was received with positivity and an "Okay, no worries, we'll just push that over into the next sprint".

When it came time for the retrospective at the end of every fortnight, we brought up all the issues we faced. Ever time it was the same issues, with zero change observed or implemented by anyone leading the team. It got to the point when we started filling the "What worked?" column of the retro whiteboard with post-it notes simply saying: "Literally nothing." and under the "What didn't work?" column saying: "Literally everything." The entire thing really felt like a twisted inside joke, except for the fact that clearly nobody running the show was actually in on it.

This trend continued for months into the project, until it got to the point where we had pushed so much out into future sprints and had been _so_ forgivingly slow, that the (fixed) deadline of getting the site live was now a couple of weeks away and the entire project was _nowhere near_ being completed.

The project manager's answer to this, in the few remaining weeks of the project was getting all the developers to just work late every night, typically until around midnight, but sometimes until 5:00am. I personally slept at the office a few times in this period. We were brought energy drinks, candy and other trash to fuel us through this trek into the the failed Agile abyss. When this still wasn't getting us far enough, all of us coming in and working on the remaining weekends was when we _really_ hit rock bottom.

At this point, anything related to "Agile" had long since deserted us and now we were truly in the thick of it. When the scrum masters and project managers finally just got out of the way, and literally stopped coming in (allowing the people actually _doing_ the work to figure it out), we were able to do more work in the final 3 weeks than we did in the first 3 months.

We ended up getting the site live by the skin of our teeth, but the development team or the site was certainly not in the best shape after that final ordeal, and because it had to be rushed, the next _3 years_ were spent cleaning up the mess that was caused in that initial 3 months of carnage.

In Scrum, no one can hear you scream...

### Today (2020)

Since then, I have been involved in many, many other Agile projects/teams and talked to countless developer/designer friends and acquaintances at other agencies and companies that also try to use "Agile" as the magic bullet for their projects.

Without fail, every _single_ story I have seen and heard about these projects has resulted in a disaster; to the point where I will accurately guess exactly how a new story ends before they've even finished telling it.

In agencies specifically, it's often a predictable and totally preventable recipe for disaster.

The _reality_ is that agency projects tend to have 3 immutable properties:

1. A fixed deadline
2. (which results in) a fixed scope
3. (which results in) a fixed budget

Yet, in _practice_, because they decide to subscribe to Agile propaganda without giving it more than 3 seconds of critical thought, they end up running the project in a way that is totally incompatible with the 3 truths above.

There seems to be a conscious delusion to ignore some things, and still adopt Agile principles. For example, "welcome changing requirements, even late in development" is incompatible with every single one of the truths above. If you were to do this, it means that the original fixed deadline now needs to be flexible and extended, the fixed scope now needs to change and increase, and the fixed budget will not magically cover the additional time required to implement and test all these changes.

This seems so obvious at face value, yet the narrative I see and hear over and over again says otherwise. Typically, changing requirements (even late in development) _will_ be welcomed, but none of the truths above are changed. This results in that perfect storm, where before you know it, the project has either reached its deadline, budget (or both) and the scope, which has gradually become much bigger in that fantastic place known as the "backlog" can not be fulfilled.

### The people who came up with it don't like it

In his 2014 article, [Agile is Dead (Long Live Agility)](https://pragdave.me/blog/2014/03/04/time-to-kill-agile.html), Dave Thomas wrote an article about how off-track the initial idea had become.

> The word “agile” has been subverted to the point where it is effectively meaningless, and what passes for an agile community seems to be largely an arena for consultants and vendors to hawk services and products.

He gave basic instructions to do something in an "agile fashion":

1. Find out where you are
2. Take a small step towards your goal
3. Adjust your understanding based on what you learned
4. Repeat

Also including a single line on "how to do it":

"When faced with two or more alternatives that deliver roughly the same value, take the path that makes future change easier."

> And that’s it. Those four lines and one practice encompass everything there is to know about effective software development.

Likewise, Martin Fowler wrote an article called [The State of Agile Software in 2018](https://martinfowler.com/articles/agile-aus-2018.html), where he also called out the sad truth that while people think they're "Agile", it's actually a cartoon version of it that actually goes _against_ the original values and principles.

> On the surface, the world of agile software development is bright, since it is now mainstream. But the reality is troubling, because much of what is done is faux-agile, disregarding agile's values and principles.

Others involved in coming up with "The Manifesto for Agile Software Development" (the original title, which was subverted to "The Agile Manifesto" and shoehorned this approach for developing software into doing _everything_) have also come out to disapprove of what it has become.

### The people doing the work don't like it

There are some principles of Agile that I think do make sense; one of them being "Build projects around motivated individuals. Give them the environment and support they need, and trust them to get the job done.". Ironically, this is the first principle to get thrown out the window when an agency Agile project begins, when the project managers dictate exactly how things are going to go down, and do not trust anyone to do anything without them setting up how it's to be done.

For some reason "Agile" automatically invokes "Scrum"; in other words, if you're going to be "Agile", your team is definitely going to adopt "Scrum" as the way to implement the principles of Agile - this happens so reliably that I truly believe most people (those running the projects _and_ those actually doing the work) don't even understand the difference between these two terms, because they have become one and the same, when in reality, they are mutually exclusive.

There is simply no quicker way to de-motivate and kill the soul of an already great project team (ie. designers, developers, creatives) than trying and impose top-down micromanagement garbage like "one-size-fits-all" approaches to implementing Agile principles with a pre-defined framework like Scrum.

The best people are self-managing, they don't need or want their tasks broken down into epics, stories, tasks, sub-tasks. That's not how the creative process operates, and by thinking it is, you're removing the magic of actually doing the work.

When I observe that my co-workers are spending more than 50% of their time in meetings or Agile ceremonies instead of actually doing their work, that's a huge red flag.

### The "Spotify Model" trap

After the initial Agile fever dream started to wear off, it was interesting to see a bunch of agencies start talking about adopting "The Spotify Model", which is essentially an overly complex approach of structuring team that was tried at Spotify. The ironic part is that it _didn't work_ at Spotify; something they've tried to tell the world multiple times since then, but it was too late. Everyone hears about "The Spotify Model" and probably know it's something vaguely related to "tribes", and if Spotify is doing it, then it _must_ be the answer to all their problems, too.

Unfortunately, this doesn't work. Even if the "The Spotify Model" worked amazingly for Spotify (which it did not in reality), the chances of being able to copy that 1:1 into an agency environment (which is fundamentally different from a company like Spotify in terms of size, function and customer base) are so low, that it's not worth upending everything to do so.

### What's "the answer", then?

"The answer" implies that there's a single way of structuring teams or working together that will fix all your problems overnight; that is the promise of these crazy Agile/Scrum bootcamps that will make you an "expert" on this over a weekend retreat, and be able to force a foreign predefined set of rules into a local team, and just assume the patient won't reject the transplant.

Yes, I've been railing on Agile like there's no tomorrow, so what's the alternative? I would say it's probably thinking for yourself instead of looking around at what everyone else is doing is the "boring" but more true approach to answering this question.

Companies like Basecamp have come up with their own ways of working internally (which they released as the free book called [Shape Up](https://basecamp.com/shapeup)). They reject things like the 2 week sprint in favour of a 6 week development cycle, punctuated with a 2 week period at the end of that cycle to do whatever you want. Again, this is not going to work 100% for a digital agency, for example; but you could cherry pick one or more of the ideas they have that _would_ make sense to try out.

### The "South Park model" works, but you shouldn't copy it

On the other end of the scale; if you look at the production process that goes into creating an episode of South Park; where they go from having a blank piece of paper, to _airing_ an episode in 6 days... do you think they're using "Agile" or "Scrum"? 2 week sprints? No, of course not. They don't even have enough time for a _single_ 2 week sprint when the entire episode needs to be written, animated, voiced and shipped in 6 days straight.

Just because it works for Matt and Trey and their small-ish team, does not mean that this will automatically translate over to software development. Again, there are _lessons_ you could cherry pick from their approach (eg. "done is better than perfect"), but adopting a "6 days to production" for your web projects is going to have some fairly predictable downsides.

### Death to Agile™

Every developer (and now that they've been roped in; designer) I know is waiting patiently for everyone else to realise that trying to blindly force Agile™ into an agency environment doesn't work, and how much they hate it.

I believe that on a long enough timeline, the wake of destruction that has come out the other end of large Agile projects will eventually render blindly subscribing to the cult of Agile unsustainable; in terms of financial losses, trust from clients, morale or teams and the predictable track record of failed projects.

Most of these failures never see the light of day in the public eye, usually restricted to private conversations with fellow designers/developers in the agency world where "war stories" are shared; however, I'll leave you with a recent public failure, where an Agile website project that cost _tens of millions_ of dollars went so sideways that the agency responsible for delivering the site [is now being sued](https://www.henricodolfing.com/2019/10/case-study-hertz-accenture-website.html) by their client. These stories happen all the time, but don't get made public, for obvious reasons.

So, before adopting "Agile" or predefined methodoligies like Scrum or the "The [insert X company here] method", it's worth being a bit more introspective and actually look at your own team/company and figure out what will work best for _you_ (not another company you're trying to emulate).

---

---
type: tutorial
title: How to compare Webflow builds with Figma designs using Pixelay
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-05T00:00:00.000Z
dateModified: 2020-05-05T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-compare-webflow-builds-with-figma-designs-using-pixelay/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-compare-webflow-builds-with-figma-designs-using-pixelay.md
---

# How to compare Webflow builds with Figma designs using Pixelay

#### Video Transcript

Today, I'm going to be showing you how to compare your designs in Figma with a web build implementation that you've created in the Webflow service.

The first thing we need to do is install a Figma plugin called Pixelay. If you haven't already done so, you can go to the top toolbar and click on the little Figma icon, go down to "Community", then click on the search bar and type in the word "pixelay"; and you'll see a result come up saying "Pixelay Development Comparison", and what you want to do is click on the "install" button on the right hand side and then just click "install plugin", and that will change it to say "installed" with a little check box. Once you've done that, you're ready to go. You can swap back into your Figma file with your own designs in it, and we can get started.

In this case I'm just using an existing design from the Webflow website, and to compare this with the development build inside of Webflow we need to run the Pixelay Figma plugin first; what we can do is we can right click anywhere go down to plugins and then go down to Pixelay development comparison and click on that and that's just going to fire up the Figma plugin we just installed.

Once that loads you'll see that we've got a few things; a text input up the top, these two frames here, which are mirroring the two frames that I've got in my Figma design; I've got the "small" frame and the "large" frame; and you can also see that the button is grayed out, and it's grayed out because we need to put in a URL for this to point to; and the URL that we put in here will be the the URL that the designs get compared to, where we can check if the original designs are matching up with the development implementation. Typically, that would be a "localhost" URL, Pixelay is designed to b really good with local hosts or local development environments, but if we do try and do Webflow URL for now; I've just put in a demo Webflow URL in there, and then I'm just selecting both of my frames to be compared and then I click on "Compare to designs". What this is doing is it's just taking these two frames, uploading them, and it's going to give me a URL in a moment that I can use.

The Pixelay comparison page is ready; and to compare these designs we need to open this link in our browser; I can either click on this to copy the URL, or I can just click on the open a link. This is loading up the Pixelay web app, and you can see here immediately that something has gone wrong; you can see that we've got our Figma design, we can see the Figma design just just fine, but we can't see our web build that we were after. If I just move these controls up a little bit; if I click on the Figma mode which reveals the original Figma files that we're comparing, then if I click on the development mode, you can see we've got this very unhappy face here; the reason for that is we're basically loading these URLs in iFrames, and because we're trying to load it in from a the Webflow domain, Webflow has a security policy set which does not allow you to embed their iFrames on external websites. They have a number of reasons for doing this, I believe one of them is they just don't want people to embed iFrames on a custom domain without paying for a plan, that's potentially one, and there might be some other reasons as well. The bottom line is, we unfortunately can't load in URLs directly from Webflow, but there is a workaround that I'm going to show you right now.

I'm just going to close out of this, and close out of Pixelay. I'm going to go to the the Webflow site; underneath Webflow, in the Webflow University section, which is like their tutorials; there's a tutorial called "Code export"; if you search for that, it's going to take you to a page which will explain how you can export the HTML, CSS, images and JavaScript from your Webflow project. Just be mindful that this is only available as a feature on paid Webflow plans, so if you don't have a paid web the Webflow plan and want to do this you, will have to upgrade before you can do it.

What this is going to do is, it's going to let you export your code from Webflow and it's going to let you download it all to your computer. The steps for that are that you basically just open up your Webflow project, there's an export button in the top right corner and; in this little video here it's got the the export button; you click on "Export Code" and then in the bottom right there's a button that says "Prepare Zip", and if you click on that, it will download a zip file to your computer with all of the code up for your Webflow website. I've got one on my desktop that I've downloaded from Webflow as a sample; it'll look something like this; it'll just be a zip file, and I'm going to double click on the zip file, and that's going to give me this file here. I can see I've got my CSS, I've got my images, I've got my HTML and I've got my JavaScript. That's great, that's exactly what we want.

What we're going to do now is, if you open up a code editor, I'm just opening Visual Studio Code, and I'm going to drag the folder that we just unzipped into Visual Studio and that's going to give me a list of all the files that we've got here; the CSS, images, JavaScript and index file. What we want to do is, we want to start a BrowserSync server; and BrowserSync is a tool that allows you to synchronize your browser across multiple pages from some source code that you've got; in this case if we run BrowserSync, we'll be able to run a little local server, and any changes that we make to our CSS, our HTML, or our images, they will all be reflected in the browser across multiple pages at the same time.

To do this, we can just click on the "Get started" button on the BrowserSync home page. If you click on "get started", it'll just give you the three points that you need; it's a very simple installation. The first thing you'll need is to have Node.js installed, which you may or may not already have, they've got a link here for the installers if you do need to install Node first.

After you've done that you can copy the command from the second point, which is to install BrowserSync; if you copy that command and go back to your your Visual Studio Code editor, if you haven't already got a terminal open, you can open it by going to the top toolbar and clicking on "Terminal", and then clicking on "New Terminal". In our terminal we just want to paste in the command we copied, and this is going to install BrowserSync globally; it means we can run it on any of our projects now and in the future. We'll just wait for that to finish up; and BrowserSync is finished installing now.

To start BrowserSync, we can use the command from point 3, which is the final point. This command here is going to start a mini server and provide a local URL to view our website. I'm just going to paste that in to my terminal here and hit enter, and you can see it has really quickly spun up a server for us. In the terminal it's telling us what the URL is; we can access that here, but it has also just spun it up and opened it up in the browser for me immediately anyway. We can definitely see that it's working, and this is all the content or HTML that we'd expect.

Now, you can see in the URL bar we've got this little URL called "localhost" running on port "3000", and that means that it's running on our machine; it's running on our computer, and it's completely outside of Webflow, but we have access to this. The other cool thing is now that we've got this running, we can actually go into our CSS, and we can start changing things if we need to in here; we can change the font size, and immediately you can see that bump up. If I make something ridiculous that will bump up there, I'm not having to refresh the browser, it's just instantly doing that for me, and that's that's really neat. That's cool, and I'll show you what that means in a moment, because we're going to go back into Figma now.

What you want to do is, you want to get this URL here; just select that or copy it and paste it from your terminal. If we jump back into Figma we'll close off Pixelay and give it a restart. The easiest way to restart it once you've already run it once in your page is just to go to the right hand column here, click on the "Pixelay" icon, and that will fire up the Figma plugin again without having to open up the menu.

Once this loads up we're just going to change the URL that it saved in there for us; I'm going to get rid of that and instead I'm going to paste in the URL that I just copied from the terminal. These two have already inherited it, so you don't have to override it. If you have multiple pages, in this case I'm just doing the one page, but if you do have an "about" page and a "projects" page and a "contact" page, what you can do is you can paste in the the main URL, and then add in your extra details at the end; if this is a "contact" page I could do "/contact.html", if this one was "about", I could do "about.html"; you can you can figure out what those URLs are if you do have more URLs; but in this case I'm just going to leave it as the default and inherit the global URL, because we're just comparing the one page for now.

Now that I've got that in there, I can click on my "Compare Designs" button once again. This is just going to quickly upload those images and generate a URL for us, which is actually the same URL as before, but it's just been updated with those new URLs. I'm just going to click and open the link again, and this time it's loading up the web app, it's going to be looking for different URLs; you can see here it's pointing to localhost port 3000 instead of pointing to the the other URL that we had before from Webflow. You can see here, if I change the opacity, you can see that the the heading size is different from the one in the design.We've got the Figma design and then we've got the build; and you can see some differences there and in terms of the the dev build and the design for the smaller screen; the heading is quite different.

What we can do is now that we've got localhost running, we can jump into Visual Studio Code, and we can start playing around with with some of these things. As we had in here before, this font size issue, we can tweak that and you'll see it immediately change on the left here. We can play around with that until it's closer to what we actually expected it to be, and that's going to let us do it really quickly; that's that's exactly the the font size; we can see that it's matching up now, there's no difference at all there, and it's fixed it on the mobile one too; that's pretty cool. If we made that huge again, you can see it updates straight away, and we can see there's something clearly off there.

Of course, you can use different methods to compare these two as well; this is the split screen method; we've got the contrast diff method, which can be good for really small differences as well; then we've also got the overlay mode; if that there's something off, you can line up the designs to line up the parts that work, and then that'll help you get an idea of where things are getting messed up; in this case it's obviously that heading again that we want to we want to fix, and you can just move that around; you can also use the pixel measuring tool, which will give you an idea of if you've got spacing differences; you can get an idea of how big those differences are, which can be really handy, especially for things with crazy margins or really specific sizing, and all that sort of stuff; and then the opacity one is probably the most common, where you can just go back and forth on the opacity and play around with that; I'm just going to reset that back, and that's the perfect version that we're after, at size "58";

So, that's the way that you can get your Webflow builds inside of Pixelay. I know it's a little bit of a workaround, unfortunately there's just there's just no way to get around the iFrame content blocking issue, and the ideal scenario is really to somehow get your your web builds into a local environment, because it just makes the iteration speed so much quicker, as you can see here. I hope that that's been helpful for anyone who's wondering how to compare their Figma designs with a Webflow implementation. I know that it can be tricky to do it across multiple pages; so I hope that this minor inconvenience of needing to export the site locally can help you at least get to the point where you can start making these changes like this, and then once you've made those changes, you should be able to then put those back into Webflow as well, if you need to deploy it there, or if you're deploying this code to a separate service like Netlify or S3, then you can just deploy this folder straight to those, and that'll work just fine.

That's it. If you need to revisit this link, you can keep going back to it once you've uploaded the designs once, and point to the right URLs, link is reusable. You can just go back into the browser and use that again if you need to, but feel free to experiment with it, and I hope that it works out for you.

Until the next time with some more Figma tutorials, that's going to be it for today. I hope you've learnt something that you can take away for your team, or to help out with your own workflows with comparing your Figma designs to Webflow builds. Thank you as always for watching, and we'll speak to you soon.

---

---
type: tutorial
title: How to export Figma to HTML Canvas using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-04T00:00:00.000Z
dateModified: 2020-05-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-canvas-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-canvas-using-bannerify.md
---

# How to export Figma to HTML Canvas using Bannerify

#### Video Transcript

Today, I'm going be showing you how to export banners that you've animated in Figma to the HTML Canvas format.

To do that, we need to install a Figma plugin called Bannerify. If you haven't already done so; you can go to the top left corner of the Figma toolbar and click on the Figma icon, and then if you go to "Search" or "Community", whichever one you prefer and go to the search bar and type in the word "Bannerify"; if you go to the "plugins" tab you'll see a Figma plugin called "Bannerify HTML Exporter". If you haven't installed it, you want to go over to the right and click on the "install" button; I've already got it installed, that's why mine has the little check, but if your says "install", you can click on that and that'll change it to say "installed".

Once you've done that, you can jump back over to your Figma file. I'm currently using the example that is available through the Bannerify description; if you go to the Bannerify plugin and click on it to see the descriptionm there is a link in the description under "additional notes" which will give you access to the file that we're going to be using in this Figma tutorial; if you do need to use that just jump into the description and and paste that link into your browser and you'll have access to to duplicate this file that we're using in the Figma tutorial.

To start up Bannerify, just right click anywhere in the project, go down to "plugins", and then go to "Bannerify HTML Exporter" and click on that; and this will load up the Figma plugin that we've just installed. Because we're using a design that already exists, this particular design has already been configured to have some animations preset, if you're doing this on your own banners, you'll have to just select all these animations yourself; we've got another Figma tutorial, a very in-depth tutorial about how to actually configure animations and all the neat things you can do to make it really easy; you can check out our YouTube channel that you're looking at this video on for that extended Figma tutorial; but in this case I'm going to assume that you've already setup your animations or you're using this example file.

You can see here we've already got some animations set, you can you can change those of course to be whatever you want. We've got a bunch of banners in here they've all got the same animation settings and what we want to do is export this to HTML Canvas. Where we can do that is by clicking on the "Export Banners to HTML" button up in the top right, and this reveals the export settings panel; there's a number of options that we can configure in here, we won't go through all of them today because they're not all relevant to what we're trying to do, but the one that we do want to have a look at is down here underneath "Code output settings", and then under "Export format/platform", it's currently set to "Vanilla HTML/CSS"; that will export HTML from Figma with CSS animations, that's typically the the most common format that you'll export, but there are going to be some circumstances where you need to export to HTML Canvas.

I've just clicked on the drop-down and instead of selecting "Vanilla HTML/CSS", which is the default, we're just going to go down to "Vanilla HTML/JS", "JS" which is "JavaScript", and then in brackets it says "HTML Canvas", and then canvas has got the little HTML tag around it. If we click that, what this is going to do is instead of generating HTML and CSS, it's going to convert or export all of your banners to HTML and JavaScript, and instead of using image tags, it's just going to use a single canvas tag.

Let's just have a look at what that looks like by exporting it; if we click on "Export Banners" at the bottom, this little button; I'm clicking on that, this is generating HTML for me and then it will start going through all the images and and saving those; and we're done; it's extremely quick. You'll get a little save dialog prompt up here; by default, the file name will just be matching with your document title; in this case it's "Bannerify Sado Banners Demo", and then use get a little suffix with the date and the platform that we're exporting to (HTML Canvas) up here. Of course, you can change that, but for now I'm just going to click "Save".

That's saved to our desktop, so all you have to do is double click on the zip file, and that will give us a look at all of the code and images is just exported for us. You can see here it's a "one for one" with all the banners in our project. It's just got all the dimensions as the prefix and then the name of the frames that comes after that, and what we can do to have a look at them all at the same time is just double click on this "index.html" file and open that up in Chrome. That's opened it up in Chrome for us, and if I just click on the play button again in the top right, you can see that they're all basically in sync and and all animating in.

To get an idea of what code that's generating, I'm just going to open up my code editor and I'll just drag in the medium rectangle and open that up. This is the code that Bannerify has generated for us, this is the banner that I'm looking at here in the in the left hand side and then I've got my code on the right. You can see that we've got an HTML Canvas tag; it's just a single "canvas" tag with the dimensions that you'd expect from our banner; it's got a JavaScript file that's being included; a CSS file is being included; a couple of bits of metadata up here; the GSAP animation library; and then we've got our images folder; this is all of the images that our banner is comprised of, and the SVG's for the text layers.

Then in the JavaScript file this, is basically our timeline; we've got our timeline for all of the animations that are happening here, and and instead of using CSS it's using JavaScript to dictate those timelines. This is all being generated automatically, you don't have to know code or write any code, Bannerify will generate all of this for you, and you get that animation that you can see here on the left hand side.

That's essentially how you go about exporting banners from Figma to HTML Canvas and JavaScript based animations. It really is just just a one-click process of selecting the format in the in the export settings and clicking "export", and you'll basically be able to go straight from Figma to HTML without having t to worry about coding up anything, the Bannerify Figma plugin will just handle it all for you.

That's basically it; if you need anything else, you can check out one of our other Figma tutorials that cover other formats that can be exported, but if you're looking for a way to convert your Figma designs into HTML, or "HTML Canvas" specifically, then this is the best way to go about it. We're always trying to improve this Figma plugin; if you have any questions or suggestions, we always love to hear anything that you might want or find valuable in Bannerify, so please let me know. Until next time, thank you as always for watching.

---

---
type: tutorial
title: How to export Figma to HTML for DoubleClick Studio using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-04T00:00:00.000Z
dateModified: 2020-05-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-for-doubleclick-studio-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-for-doubleclick-studio-using-bannerify.md
---

# How to export Figma to HTML for DoubleClick Studio using Bannerify

#### Video Transcript

Today, I'm going to be showing you how to export animated banners from Figma to HTML for DoubleClick Studio.

To do this we just need to install a Figma plugin called Bannerify. You can do that by going up to the top toolbar and clicking on the little Figma icon, once you've done that you, you'll be able to go to the "Community" tab and go to the search bar and if you search for the term "bannerify" and then click on the "plugins" tab you'll see "Bannerify HTML Exporter" pop up. If you haven't got it installed, you'll be able to go to the right-hand side here and click on the "install" button and that'll make it appear the way that mine does with the little check box.

If you're using this for the first time or if you just want to follow along, if you click into the plugin and go down in the Figma plugin description to the "additional notes" section, the first bullet point contains a URL which is this one; if you copy paste that into your browser, you'll be able to open up the Figma file that we're going to be using in this tutorial which has a pre-designed set of banners and some preset animations that we're going to use, just to show you how to export these banners from Figma to HTML for to DoubleClick Studio.

Once you've done that, you can open up the Figma file that you've just duplicated. To open up the Bannerify Figma plugin, we can just right click anywhere, go down to "plugins" and then click on "Bannerify HTML Exporter" and that's going to fire up the Figma plugin that we just installed. Once that opens up, we get a full list of all the frames from our designs, and you can see here these are all coming in from the left hand side here; they've already got animations on them because we've opened up the file that has been pre-designed.

I'm not going to be showing you how to do any animation or any timeline settings or anything like that in this tutorial; if you are interested in that, there's another video on our YouTube channel which goes for about 40 minutes, and it's a real in-depth deep dive into how to structure your animations and adjust the timelines; it has a whole bunch of neat tricks that lets you apply these animations really quickly in your own designs; you can check that out on our YouTube channel if you like, but for now we're happy with these designs and all we want to do is export them from Figma to HTML for DoubleClick Studio.

The way we export our banners is just by clicking on this button in the top right here, which is called "Export banners to HTML"; if we click on that, we'll get a whole bunch of options here, and the one we're focusing on today is just going to be the "code output settings"; at the moment it's set to "Vanilla HTML/JavaScript", but if we click on that drop down you can see that that's categorized in this top area here called "standard" (which means that these are all vanilla exports they don't have any third-party code for any other third party platforms or any third party advertising networks); if we go down to the second category called "advertising platforms", you can see there's a bunch more options down here, and today the only one we're looking at is the "DoubleClick Studio" option which is the one down in the list.

If you click on "DoubleClick Studio" and select that, you'll notice that the URL bar has disappeared from the option that we had selected before; when we were selecting the "vanilla" option, there was a banner link URL field here and that will let you put in your website or your landing page that you want the banner to click through to; now we're using DoubleClick Studio, we don't have to include that URL here, because when we upload the banners into DoubleClick Studio, it will provide the option in the DoubleClick Studio UI to add a URL or exit event that will point to a URL or a campaign page that you're after for your particular ad campaign; so that's why that's left off there.

Now that we've got DoubleClick Studio selected, all we need to do is click on the "Export banners" button in the bottom right; this will generate all of the code for us, it'll also export all the images for us, and give us a little zip file. It's just finished doing that, it only takes a couple of seconds; and if I click "save" and jump to our desktop; if we double click on the zip file, that will open up the banners that we've just exported. You can see we've got all the folders here that represent all the frames that are coming in from our Figma design. To get a sense of what they all look likem the easiest way to do that is just to double click on this "index.html", file which will open it up in the browser; I'll just do that now. You can see here we've got our banners exported from Figma to HTML, this is in the browser now; we can play back that animation by using this little play icon in the corner we don't have it set to loop; that's why I'm doing it manually, and you can see here it's coming in exactly the way that we would expect all the animations have been automatically generated for us. This preview page will adapt; it can be really nice if you're presenting to clients or sharing it around internally.

To get a bit of a look at what's going on under the hood, we can open up our code editor and actually see what's going on. I'm just going to open up my my files that were just exported from Figma; if we open up the "MREC", the medium rectangle, that will give us a little bit of a look into what's going on. I'm just going to open up this individual banner by going into the folder and opening the index file; and you can see it over here, if I open up the index file, you'll notice a couple of things in here. We've got all of our HTML images, all of our elements to make up the banner, we've also got our JavaScript, and we've got our CSS.

The JavaScript contains some code that automatically makes this compatible with DoubleClick Studio. It's got a few event listeners going on and what we can actually do to test that in the browser is, if we go to dev tools "inspect", and then switch into "console", and I'm just going to refresh the page. You can see here in the console that there's a few things going on; "Studio SDK", that's the DoubleClick Studio library which is being loaded from the index file, it's including this script here which is the "Enabler.js" file, and that's specifically being loaded in for DoubleClick Studio. You can see that script being initialized here, it knows that we're in a test environment while running it locally; that's why it's saying it's "simulating local events".

If we go ahead and click on this little banner anywhere, you can see it's firing off the "background exit" event which is being invoked; that's how we can tell that it's registering the click event, and that it's a successful click event. Once that goes into DoubleClick Studio, and once you've associated a background exit event with a URL or an action clicking on the banner to fire that event successfully; that's how we can tell that it's working. Everything's looking really good there. We've also got our CSS, which is handling all the animation and positioning for us; this is all getting generated automatically, as are the images. We've got SVGs for all the text, to keep them really crisp and small; and then we've got some PNGs and JPGs for some of the other assets in there.

That's that's a rough look at what the Bannerify Figma plugin is exporting for all of the banners, and these are designed to be production ready; you don't need to know any code, you don't need to have any developers on standby to manually convert them from Figma to HTML; Bannerify will automatically generate all the necessary code from Figma to HTML for DoubleClick Studio,.

If you zip up each of those banners now, or just drag the folders into DoubleClick Studio, you should be good to go for your campaign, and all you'll have to do is associate those exit URLs with the URLs for your campaign or your landing page. That's pretty much it. As I said, this is just a tutorial on exporting to the DoubleClick Studio format, just the process of going from Figma to HTML; so if you do want to have a look at our other Figma tutorials we have, as I mentioned before, we have a really in-depth one on actually adding the animations and messing around with the timelines and doing all sorts of neat tricks with delays and speeds and selections and all that sort of stuff; and you can find that video on our YouTube channel.

Until the next time, I hope this has been a valuable Figma tutorial for you if you were trying to figure out how to export your banner designs from Figma to HTML for DoubleClick Studio; now you know the Bannerify Figma plugin will do it really quickly and automatically for you. Thank you as always for watching, and we'll be releasing more Figma tutorials very soon.

---

---
type: tutorial
title: How to export Figma to HTML/GreenSock (GSAP) using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-04T00:00:00.000Z
dateModified: 2020-05-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-green-sock-gsap-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-green-sock-gsap-using-bannerify.md
---

# How to export Figma to HTML/GreenSock (GSAP) using Bannerify

#### Video Transcript

Today, I'm going to be showing you how to export animated banners from Figma directly to HTML and JavaScript, specifically the GreenSock or GSAP animation timeline format.

To do this, we need to install a Figma plugin called "Bannerify". If you haven't done; already, you can do that by clicking on the top left icon in the header with the little Figma symbol, and going to either search or community and go into the search box there and typing in the keyword Bannerify and then clicking on the plugins tab and you'll see this little bear icon with the plugin title "Bannerify HTML Exporter"; if you've not installed it yet, you'll see a little install button on the right hand side over here. I've already got it installed and that's why I've got that little checkbox; if you haven't got that and it just says install you can just click on install and it'll instantly change it to say installed and then you're ready to go; once you've done that, we can click back into our project which I just had open.

If you don't have a set of banners yet and just want to follow along; if you go into the the plugin description by clicking on the plugin; underneath the "additional notes" section, under the first point, there is a link here which will take you to the file that we're actually working with at the moment. You'll be able to open that up in Figmam, duplicate it to your own Figma account, and you'll be able to follow along with the exact same example that I'm showing you in this video.

I'll switch into that now, and it'll look something like this. To run the Figma plugin, we just right click anywhere on the page go to "Plugins", then click on "Bannerify HTML Exporter" and that's just going to fire up the Figma plugin that we just installed. This is going to give us a representation of all the banners that we have in our Figma file; because we're using a pre-designed file you'll see a list of all of them in here, and they've already got preset animations on them.

If you haven't done this before there's actually another Figma tutorial on this same YouTube channel which goes for about 40-45 minutes, it's very in-depth, and it covers exactly how to go about adding animations and designing banners and really easily creating animations within Bannerify; I'd recommend that if you haven't looked at that one already or are just just getting started with the Bannerify Figma plugin; but in this case we're more focused on exporting some banners that we've already animated to the GreenSock or GSAP format; basically going outside of this file here in Figma to HTML and GreenSock (GSAP) or JavaScript.

We're already happy with all of our animations, as I said, we've already designed the file, we just want to export it for production now. To do that, we just click on the "Export Banners to HTML" button in the top right of the Bannerify Figma plugin, and click on that, and this will open up the export settings from Bannerify. There's a number of different settings in here which we won't go through today, because all we're really focused on is getting Figma to HTML GSAP (or GreenSock) format, the area we're focused on is "Code output settings" down here. You'll see we've got a little label that says "Export format/platform", we've currently got it set to HTML Canvas, it defaults to HTML and CSS, but in our case we're going to go ahead and click on this one. If you've already clicked on the drop down, this will show you all the options and then underneath the "standard" group we want to go to "Vanilla HTML/JS", "JS" meaning "JavaScript", and then in brackets the option we want is "GreenSock (GSAP)"; that's the GreenSock animation library that will get exported in JavaScript; let's click on that option.

Now we've got "Vanilla HTML/JavaScript GreenSock (GSAP)" selected, all we have to do is click on the "Export banners" button in the bottom right. I'm just going to click on that, and this will this will generate all the HTML and JavaScript for us, export all of the images; it's already done, it only takes a few seconds, and then we'll get the file save dialog up here. By default that file name will match whatever your Figma project name is, but you can change that if you'd like, I'm just going to leave it like that for now and click on "Save" and then I'm going to go to my desktop. If you double click on the zip file that it generated, that will unzip the folder and we'll be able to get a list of all the different banners that we've just exported, all of the code, all of the files are there.

The easiest way to preview them all is just by clicking on this "index.HTML" file; that will open up the browser and let you view all of the banners at once. You can make that a bit wider if you need to, and we can we can replay that just by clicking on the button in the top right. You can see here that all of our animations have been perfectly replicated from what we expected from the Bannerify Figma plugin; they're they're super smooth, super seamless and we don't have it set to loop, that's why it's going back to the start.

If we want to have a look at the code, we can do that by opening up a code editor; in this case I'll just use Visual Studio. Let's just use the medium rectangle example; I'll drag that in we can see we've got our HTML, and the HTML is generating all of the images; we've got all the image tags that we'd expect, and they're pointing to the images inside of our "images" folder, which are getting automatically exported from Figma, including all the SVGs for text layers, just to keep them really crisp. In our index file, we've also got the GSAP animation library included automatically, and then we've got the JavaScript file down here; if we open up the JavaScript file you can see in here that it's has automatically generated the entire GSAP or GreenSock timeline in JavaScript. This will get kicked off when all of the images have loaded; it will automatically detect that, and then play through all the the GSAP timelines automatically, and that's how we get our animation over here in the in the browser.

You don't need to know any code to be able to do this, Bannerify will automatically export all of your animations and all of your images into HTML and JavaScript; it's currently GreenSock (GSAP) format, but as you saw before there's a number of other formats that are available, but in this case we just wanted to have a look at the the GreenSock or GSAP format.

That's essentially it; that's all you need to know to be able to export banners from Figma to HTML and JavaScript/GreenSock (GSAP). If you need to, have a look at other formats, you can either play around with them yourself or you can find more Figma tutorials on this YouTube channel and and get stuck into those.

If you need any other formats that aren't currently supported please just let us know and we can add them in to Bannerify,; you don't have to worry about hacking them together yourself; we can we can easily just add them in for you. We always love to hear feedback and feature requests for Bannerify,; if you do have any please let us know and we'd be happy to to add them in. I hope you've learned something here, and we will be back with more Figma tutorials very soon. Until then, thank you for watching as always.

---

---
type: tutorial
title: How to export Figma to HTML for AdForm using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-03T00:00:00.000Z
dateModified: 2020-05-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-for-ad-form-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-for-ad-form-using-bannerify.md
---

# How to export Figma to HTML for AdForm using Bannerify

#### Video Transcript

Today, I'm going to be showing you how to export animated banners from Figma to HTML for the AdForm platform.

The first thing we need to do is goto the Figma icon in the top left, because we want to install a Figma plugin called Bannerify; if we click on this little Figma icon, and if you go to "Community" and then click on the search field and type in the term "bannerify"; then click on the "plugins" tab and you'll see a result come up that says "Bannerify HTML Exporter" and on the right-hand side you'll see a button that says "install" or it will say "installed" if you've already got it installed like mine does; but if you just see a button that says "install" over here you can click on that, and then it'll look like mine with the little checkmark on it.

Once that's ready to go, if you click into the plugin name just to jump into the description, we can see down here in the "additional notes" section once we scroll down, that we've got this little URL here; and if you copy paste that URL into your web browser you'll be able to duplicate the file that we're going to be using for this Figma tutorial; and that's just going to make it a bit easier to follow along if you don't already have a set of banners designed, but feel free to use your own if you do.

Now that we've installed the Figma plugin we can go back to our project and we're just going to run the plugin by right-clicking anywhere going down to "Plugins" and then clicking on "Bannerify HTML Exporter", and this is just going to open up the Figma plugin that we just installed. You can see that it's loaded in all of our banners from the Figma file and you'll notice that they've also got these little animations applied to them already when I click this little play button; this Figma tutorial is not going to cover how to add these animations or how to control the timelines, if you're interested in that we do have another Figma tutorial on our YouTube channel that you can check out, it goes for about 40 minutes and it covers all of those things in depth; but for today we're just going to be looking at how to export banners that you've already got designed and already got animated; we're just going to see how to export those from Figma to HTML for AdForm.

To start off with, we just need to click on the "Export banners to HTML" button in the top right; I'm just going to click on that now and you can see we've got a few different export options, but for today I'm just going to be focused on the "code output settings"; underneath where it says "export format/platform" you can click on that drop-down, and that's going to open up a list of options for us. In the second section down here that's called "advertising platforms", we can see there's a whole bunch of options, but the one that we want to select is closer to the bottom and it's the "AdForm" option; if we click on "AdForm" that's now selected the platform for us, which means that we're ready to go with exporting. To export these banners from Figma to HTML for AdForm, all you need to do is click on the "Export banners" button in the bottom right down here; I'm just going to do that now, and this is going to generate all of the code that we need, and all of the images that we need in to a zip file with all of our banners.

I'm just going to use the default naming convention in our save dialog here and click on "save", then I'm going to go to my desktop and double click on the zip file; once that unzips, we can click on the folder and you'll see here that it's exported all of our banners from Figma to HTML, and to get a sense of what that looks like all in one snapshot, we can double-click on the index.html file that comes with the folder in the root here; I'm just going to double click on that to open up in the browser. I've just loaded that up in the browser and you can see here that all of the banners have been exported as would expect they've all got the animations on them, I can replay those animations with this little play button if I want to do that, but everything's looking really good and as I would expect.

To get an idea of what was actually exported by Bannerify from Figma to HTML for AdForm, we can open up one of these banners in our code editor; I'm going to do that now, I'm just going to drag the medium rectangle into Visual Studio Code (you can use whatever code editor you like; in this case, I'm just going to use Visual Studio) and I'm also going to open up the "MREC" medium rectangle banner in the browser so we can have a look at which one we're looking at; you can see here these are all the files that can exported from Bannerify when we export from Figma to HTML, and in this case we're doing it for AdForm.

You can see right up the top its including the script file from the AdForm domain; we've got a script file from "adform.net" and it's the "AdFormDHTML.js" file, and that's a required file that any banners being uploaded for AdForm needs, that gets included automatically; we've also got our metadata up here, that gets automatically included; these are all of the images that we need to render out the HTML for our banner; and we've also got a little JavaScript file down here and we can open these up.

We've got the JavaScript file, you can see down here that there's some specific code for AdForm; we've got this little "clicktag" variable, it's the "htmlGetVar" function; that's coming coming from the AdForm library, and don't worry too much about this "example" URL, when you upload these banners to AdForm it's going to give you the option to specify where you want the click tag to go; this is purely just a placeholder that'll get swapped out in real time when you do upload these banners into AdForm. Then we've just got a little click tag event that that's gonna open up the the the click tag when you click on the banner inside of the browser for AdForm; all of the JavaScript is written for you, so you don't have to worry about any of that, that's all taken care of.

We've also got this little file that AdForm requires as well, which is the "manifest.json"; Bannerify is automatically exporting this from Figma into the AdForm banners; we've got this "manifest.json" and when you upload this banner into AdForm, it's going to read the contents of this file, and that's going to give it some information that it requires; things like the width and the height, the title and where the entry point for the banner is, and all that sort of stuff; that all gets included for you, so you don't have to worry about that.

Then of course we've got the "images" folder as well; this includes SVGs for the text layers to keep them nice and sharp; the PNG for the button; and the JPG for the background; that's all of the files you need, you get you get all those files for each of your banners, all the HTML is generated from the Figma plugin, and you don't need to be a developer or even jump into the code editor; I just wanted to show you what Bannerify was generating in case that was of interest.

If we jump back into Figma, as you can see the message is telling us it's all done it's ready to be uploaded; there's there's no more steps. That's all you have to do, as you can see it only took a few seconds to export from Figma to HTML for AdForm; it's extremely quick, and that just means you can keep re-exporting these banners if you have changes, or if you want to try out different versions, or have different campaigns; you can just export it really quickly from Bannerify and it'll be ready to export from Figma to HTML in a few seconds.

I hope this has been helpful for anyone wondering how to export banners from Figma for AdForm; this is the way you can do it, using the Bannerify Figma plugin. As always, thank you for watching, and we'll be back with more Figma tutorials just like this very soon.

---

---
type: tutorial
title: How to export Figma to HTML for AppNexus using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-03T00:00:00.000Z
dateModified: 2020-05-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-for-app-nexus-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-for-app-nexus-using-bannerify.md
---

# How to export Figma to HTML for AppNexus using Bannerify

#### Video Transcript

Today, I'm going to be showing you how to export banners from Figma to HTML for the AppNexus platform.

To do this, we're going to install a Figma plugin called Bannerify. If you haven't already done that, you can go to the Figma icon in the top left, click on that, and then go to "Community", and then in the search bar if you type "bannerify", and then click on the "plugins" tab, you'll see the result "Bannerify HTML Exporter" pop-up. I've already got mine installed, that's why it's got the little checkmark next to it, but if you don't have it installed, you can click on the "install" button that will be on the right-hand side, and then it will change to look like this.

If you're following along or if you don't have a set of banners to work with already, you can go into the plugin description just by clicking on the Bannerify Figma plugin, going down to "additional notes" and the first bullet point contains a URL; if you copy that URL into your browser, you'll be able to duplicate a copy of the animation template that were going to be using for these banners in this Figma tutorial over to your own Figma account.

I'm just going to switch into that file now, and what we need to do is just right click anywhere, go down to "plugins" and click on "Bannerify HTML Exporter", and that's just going to fire up the Figma plugin that we just installed. We can see here that it's loaded up all of the banners that we've got designed in our Figma file and you can see that if I click on play, they've already got some animations attributed to them. This Figma tutorial won't be covering how to set up those animations or how to do your timelines and all that sort of thing; if you do need to figure out how to do that and want to watch a tutorial on that, we do have another Figma tutorial on our YouTube channel that will go into a really comprehensive breakdown of how you can apply these animations and set up all the timings really easily, but for this tutorial we're just going to be showing you how to export these animated banners from Figma to HTML for AppNexus.

To do that, we just need to click on the "Export banners to HTML" button in the top right hand side, and you can see we've got quite a few options here but for this Figma tutorial we're just going to be focusing on the "code output settings" in the bottom right side down here; currently it's set to at the export platform of Vanilla HTML and JavaScript, but if we click into that select box, underneath "standard" (that's the the vanilla options that don't contain any third-party code for different platforms), but because we want to export this to a AppNexus, we can go down to the "advertising platforms" group and the fourth result down is AppNexus; if you click on "AppNexus", that will select it. You might notice that it's removed the the need for the the URL bar that was there a moment ago when we were selecting the the vanilla one; and the reason for that is with the vanilla ones, there's no third party platform involved; you have to add that URL in there which will get added to the code when it exports. Because we're using AppNexus, you can assign the clicktag URL inside of the AppNexus UI once you upload these banners; so that's why that doesn't show up.

Now that we've got AppNexus selected as our export format, we can click on this button in the bottom right which is "Export banners"; click on that, and this is going to generate all the code for us, export all the images for us, and give us a zip file. It has just finished, it only takes a few seconds; and I'm just going to click "Save" and then I'm going to go to my desktop and double click on the zip file, and inside of this folder you'll be able to see all of the banners that we've just exported from Figma to HTML; all of these match up with the file names and the folder names that we've got in here.

The easiest way to get a sense of what's been exported is just to double click on the "index.html" file; I'm just going to do that now. It's just loaded up our banners, and you can see here all of them have been exported as you'd expect; all the animations are included and everything is looking looking really good. To get a bit of a sense of what's being exported in these banners, now let's open up one of these folders in our code editor and have a look what's going on in there.

I've just opened up Visual Studio Code and I'm going to drag in the medium rectangle panel, and we can see here it's got a bit of a breakdown of the files inside of this folder. If we open that up in here, that's just matching these files; we've got our HTML and this contains all of the elements that we need for our banner; all of the images they're automatically included; the JavaScript and the CSS; and you'll notice up here as well as an extra bit of JavaScript that is including the AppNexus HTML5 library; this is what's required for banners that are being uploaded to a AppNexus, that gets included automatically because we've selected the AppNexus platform.

In our CSS we've got all the positioning all the animations automatically generated. In the JavaScript, you can see here that we've got a special click handler which fires off an AppNexus click tag function, and this is going to hook into your AppNexus UI in the web browser, and that's going to pull in that URL and make sure it gets directed to the right place. Of course, we've got all of our images SVG's and JPGs for for all the images that we need for these banners; they get exported automatically; so that's roughly what gets exported, all of the banners are there as you'd expect and that's really all there is to export your banners from Figma to HTML for the AppNexus platform.

If you've been looking for a way to do this, or we're just wondering if you could even get your banner designs from Figma to HTML for platforms like AppNexus, then I hope this has been an interesting Figma tutorial for you. If you need more platforms or more Figma tutorials on this, there's a bunch more on our YouTube channel, so you can check them out on there. Until next time, I hope you've learned something that you can use in your own projects or share with your own team, and I'm looking forward to coming back shortly with even more Figma tutorials for you; thanks again for watching.

---

---
type: tutorial
title: How to export Figma to HTML for DoubleClick Campaign Manager (DCM) using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-03T00:00:00.000Z
dateModified: 2020-05-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-for-double-click-campaign-manager-dcm-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-for-double-click-campaign-manager-dcm-using-bannerify.md
---

# How to export Figma to HTML for DoubleClick Campaign Manager (DCM) using Bannerify

#### Video Transcript

Today, I'm going to be showing you how to export animated banners from Figma to HTML for DoubleClick Campaign Manager (or "DCM").

To do that, we need to install a Figma plugin called "Bannerify". If you haven't already done so, you can go to the top toolbar and click on the little Figma icon and then go down to "Community" and search for "bannerify", click on the "plugins" tab and you'll see "Bannerify HTML Exporter" pop right up. Because I've already got it installed mine has this little check mark and tells me that it's installed, but if you don't have it installed, you'll see a button here that will say "install", and if you click on "install", that'll change it just to look just like mine and you'll be ready to go.

For this example I'm going to be using the file that you can clone or duplicate to your own Figma project; to do that, you just click on the Figma plugin itself, and underneath the "additional notes", section the first bullet point contains a URL, and if you go to that URL, it'll load up the Figma project that we're going to be looking at in a second which has pre-designed banners with some animations set on them; you can just get started really quickly or follow along with this Figma tutorial.

I'm going to go back to that file right now, and to start up the Figma plugin, we can just click right click anywhere on the page, go down to "plugins", click on "Bannerify HTML Exporter", and that's going to open up the Figma plugin that we just installed. Once that loads, you can see that we've got all of the banners that are in the Figma file are being represented in the Bannerify Figma plugin, and I'm not going to be showing you how to apply all these animations or kind of adjust the timings or anything like that; if you're interested in that and this is your first time using it, I've got another Figma tutorial on our YouTube channel which goes into a lot of detail about how to do this, and it goes for about 40 minutes; it's very detailed and it shows you all the different ways you can apply animations and do all kind of neat things, but today we're just going to be playing with the pre-designed banners that already have these animations set, and all we want to do is just export them from Figma to HTML for DoubleClick Campaign Manager.

To do that, we can simply click on the "Export banners to HTML" button in the top right of the Figma plugin, and when we click on that we'll see a whole range of different options, but for now all I'm really focused on is this bottom right section called "code output settings"; at the moment I've got it set to "Vanilla HTML/JavaScript" (that's categorized under the standard category, and these formats don't include any additional third-party code or any platform specific code); but because we want to export these banners from Figma to HTML for DoubleClick Campaign Manager, we can go to the second grouping called "advertising platforms" and there's a whole bunch of options in here, but for this platform we just want to click on this second option called "DoubleClick Campaign Manager (DCM)", and if we click on that, that will select the platform for us.

You might notice that the option that we had a second ago has disappeared; if I quickly switch back, you can see when we use the "vanilla" options there's an input box here for the URL where the banners link to; putting a URL in there will link the banner to that particular URL, but because we're using DoubleClick Campaign Manager, DoubleClick works a little bit differently; we don't need to manually specify any URL here, but what it's going to do is it's going to add a click tag or some code that's going to be recognized by DoubleClick Campaign Manager (DCM); and when you upload these banners into DoubleClick Campaign Manager (DCM) you'll have the opportunity to associate a URL in the DoubleClick Campaign Manager (DCM) user interface; we don't need to worry about that.

Now that we've got "DoubleClick Campaign Manager (DCM)" selected, we can go ahead and click on the "Export banners" button in the bottom right, and this is going to generate all the code for us. It's also going to export all the images that we need for our banners; it's already finished, it does it in only a couple of seconds, it's very quick. All I'm going to do now is just save it with the default file name that matches my Figma project, I'm going to save that to my desktop just by clicking "save" and then if I jump to my desktop, all I need to do is double click on the file zip file that was exported. If I open up that folder, you can see that we've got all of our all of our banners that match up with the files or the frames that we have in our Figma file.

To get a quick look at what that's done, the easiest way is just to open up the "index.html" file that comes inside the folder, I'll open that up now; you can see here it's exported our banners from Figma to HTML, we can view it in the browser; if we click on this little play button again, you can see it play the animation one more time; it's all looking really good. To have a look at what's going on behind the scenes here, I'm just going to open up my code editor and if we drag the "MREC", or medium rectangle, into the Visual Studio Code editor (you can use any code editor for this), we've got a few files here; we've got our HTML file and you can see in here that there's a few things going on; one is that its output all of the images and the HTML that we need for our banner; it's also included our CSS file which contains all the positioning of the animations, all of the the nice things that we need for these banners to to be animated.

Then in the JavaScript file we've got a few things going on, and the one that's key to the DoubleClick Campaign Manager (DCM) format is this little snippet down here; this is basically adding a click handler on the banner, which means that when you click on it, it's going to fire off this little window, that open function, and it's going to use the click tag variable that the Bannerify Figma plugin is automatically adding in. If you look up here, you'll see this little script that says the click tag equals to "Google", and you don't have to worry about that being being put in, as Google; it's purely just a placeholder and this will be swapped out when the banner gets uploaded to to DoubleClick Campaign Manager.

Jjust to show you what I mean by that, we can verify this code by going to a service called "HTML5 Validator". You can get to this by just Googling "HTML5 Validator DCM"; and if we want to test out one of our banners, all we need to do is go into one of them, highlight all the files, right click, then click on "Compress", and that'll give us a little .zip file. Now that we've got a zip file, all we need to do is click on this "Upload" button and upload it into the HTML5 validator. I'm just going to double click on my zip file. For some reason, this service can be a little bit slow; so if it's taking a little while just be patient, it'll work.

There we go, it has picked up on our banner, and as you can see here we've got all of our items checked off and everything is in place. The way we can test if the click event is working is just by clicking anywhere on the banner, and you can see here we've got a "click was successful and it will track correctly" message, and as I said before, with the the Google domain, you don't have to worry about that; that will get replaced once it gets put into DoubleClick Campaign Manager, and you'll be able to point that to a landing page that you own, or the campaign page that you want to point everyone to for the ad.

That's all accounted for; you don't need to do this test for all of the other banners; all of the code gets exported to be identical, as far as the click tag code goes, and everything that comes out of Bannerify has has already been run through this validator previously.

Whatever you getting from Bannerify will be production ready, and of course you can make manual code changes if you wanted to do that; you can edit the HTML or the CSS or add some custom JavaScript, or whatever you need to do; but the main thing is you've got all the images, you've got all the assets, all the code for this to be production ready if you don't have any in-house developers, or if you don't know code; that's that's totally fine, the Bannerify Figma plugin this will automatically do it for you.

That's essentially how you can export animated banners from Figma to HTML for DoubleClick Campaign Manager (or "DCM") and I hope that's been helpful for you if you've been wondering how to do this; you can you can quite easily do it with the Bannerify Figma plugin. There's a bunch of other formats supported as well, which we'll cover in future Figma tutorials that you'll be able to find on our YouTube channel, if you're interested in those. Thank you as always for watching, and we'll be back with more Figma tutorials very shortly.

---

---
type: tutorial
title: How to export Figma to HTML for Flashtalking using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-03T00:00:00.000Z
dateModified: 2020-05-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-for-flashtalking-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-for-flashtalking-using-bannerify.md
---

# How to export Figma to HTML for Flashtalking using Bannerify

#### Video Transcript

Today, I'm going to be showing you how to export animated banners from Figma to HTML for the Flashtalking ad platform.

To do that, we can install a Figma plugin called Bannerify. If you haven't already installed it, you can go to the top left corner of the Figma toolbar and click on the Figma icon, and then if you go down to "Community" and click on the search bar, you can type in the keyword "bannerify"; then if you click on the "plugins" tab, you'll see a result that says "Bannerify HTML Exporter". If you haven't already installed it, you can click on the little "install" button on the right hand side and then once you've clicked it, it will change to look like mine to say "installed" with a little checkmark, and that's how you know it's ready.

The second thing we'll do, just to get started, is to click into the "Bannerify" plugin title, and when we do that it'll open up the Figma plugin description. If you scroll down a little bit to the section that's called "additional notes", the first bullet point in there contains a URL, and if you copy that URL on the second line and paste it into your web browser, that's going to let you duplicate a copy of the project that we're going to be using in this tutorial; that's just going to give you a really easy way to have a pre-designed set of banners with some animations on it to try this out, but of course if you have your own design, feel free to use that one instead.

Now that we've cloned that project and installed the Bannerify Figma plugin, once you've opened the file, just right click anywhere on the page and go down to "plugins", and then go to "Bannerify HTML Exporter" and click on that. That's just going to fire up the Bannerify Figma plugin that we just installed, and once that loads you be able to see that it's loaded in all of the banners from our Figma file into the Figma plugin. If we click on this little play icon you can see that we've already got some preset animations that have come with the file.

This Figma tutorial will not be covering how to add those animations in or go through all the timeline sort of tutorial, but if you do need to watch a video on that and get up to speed for your own banners or just to understand how it works, we do have another Figma tutorial on our YouTube channel, and you can watch that one; it goes through our 40 minutes and it's a really comprehensive guide to creating and animating these banners using the Bannerify Figma plugin; but today because we've already got this set up and we're happy with all of our animations, all we want to do is export them from Figma to HTML for Flashtalking.

The first thing we need to do is just click on the top right corner of the Figma plugin, there's a button called "Export banners to HTML"; I'm going to click on that, and you'll see we've got a few different settings here, but the one that we're interested in today it's just in the bottom right called "code output settings". Underneath the "export format" label you'll see a drop-down list, and if you click on that drop-down, it's going to reveal a whole bunch of different platforms. Today, the one that we're interested in is the "Flashtalking" platform; that's the one near the bottom, I'm just highlighting that now; if you click on "Flashtalking", that will change the export format option to be Flashtalking and that's going to tell Bannerify that's the format that we want to export to.

To export our banners from Figma to HTML for Flashtalking, all we need to do now is click on the "Export banners" button in the bottom right; I'm just going to click on that now, and this is going to generate all of the code that we need, and all of the images that we need from Figma into a little zip file for us that we can use. I'm just going to save that, and if I go to my desktop and open up the zip file, you'll see that we get a folder full of all of the banners that we just exported from Figma. You can see the names are all matching up with the frames and it's got all the dimensions in here as well.

The easiest way to see what that's just output for us is by clicking on the "index.html" file; if you double click on that, that's just loaded up the banners index file, and you can see all of the banners in here loading up is expected with all the animations; and we can play them again just by clicking on this little play button in the top right and make sure everything's looking good, which it is; everything's coming in as we expect.

To get an idea of what has actually been exported by Bannerify, what we can do is open up our code editor; in this case I'm just using Visual Studio Code, but you can use anything you like. I'm just going to drag in the medium rectangle folder as an example, and also just to open up the index file in the browser so we can see what banner we're looking at. In Visual Studio Code you can see on the left hand side here we've got all of our files and folders, and just clicking on the "index.html" file we can see that we've got all of our image elements here, we've got a CSS file, a JavaScript file, which is all looking good.

The CSS contains all the positioning and all of the animations that we need; that all gets generated for us automatically, and then the JavaScript file contains some code that's specific to the Flashtalking the ad platform. This is including some code that's going to fire and apply a click tag to our banner; this has already been generated, you don't have to modify it; this is just to show you what's being included, and just to make sure that we have selected the right platform, which we have.

The last file that it includes for us is specific to the Flashtalking platform; it's this "manifest.js" file; When we upload this banner into Flashtalking, it's going to get picked up by the platform and it's going to understand some of these things that we're telling it here. It's telling us it's going to tell Flashtalking where to look for the banner file (in the index.html), what the width and height is, how many click tags that contains, and things like that; so that all gets generated for you, you don't have to worry about that at all; you don't need to modify this, but of course you can if you wanted to, but this is just an example of what is getting exported by the Bannerify Figma plugin.

That's everything that you need to do to export animated banners from Figma to HTML for Flashtalking. You don't need to have any developers to do this, you don't need to know code to do this, you can just use the Bannerify Figma plugin and that's going to give you everything that you need to export those banners from Figma to HTML in just a few seconds, like we just saw.

I hope that's been helpful if you've been looking for a way to do this directly from Figma to HTML for Flashtalking. This is one of many formats that Bannerify supports; so if you do need to use it for another platform, we have some other Figma tutorials on our Figmatic YouTube channel that you can check out and see how they work as well. Until next time, thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export Figma to HTML for Google Ads using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-03T00:00:00.000Z
dateModified: 2020-05-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-for-google-ads-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-for-google-ads-using-bannerify.md
---

# How to export Figma to HTML for Google Ads using Bannerify

#### Video Transcript

Today, I'm going to be showing you how to export animated HTML banners from Figma to Google Ads.

The way we're going to do this is by installing a Figma plugin called Bannerify. If you haven't already got it installed, we can go to the top toolbar and click on the Figma icon, and if you go to the "community" area and use the search bar to type in "bannerify", and then click on the "plugins" tab, you'll see this result an "Bannerify HTML Exporter" pop right up. If you haven't already installed it, you can click on the "install" button; mine is already installed and that's why it's got this little checkmark, but if yours just says "install", you'll be able to click on "install" and that will change it to look like mine.

Once you've installed it, you can jump back into your project in my case I'm using the sample file that can be found in the additional notes section down here; if you go to the Bannerify plugin details area, and go to "additional notes", there's a link here that you can use; if you put this into your web browser it will open up the Figma file that I'm going to be using in the Figma tutorial and you can duplicate that file to your own Figma account, and you can use that to follow along.

Back in our project, what we want to do is right click anywhere on the page go down to "plugins" and then click on "Bannerify HTML Exporter", and that's going to fire up the Figma plugin that we just installed. You can see here that it's loaded up some banners that we've already got in our project here, and because we're using the project that's already been set up, we've already got some animations attributed to each of the layers on each frame. I'm not going to show you how to do all that in this Figma tutorial; I've got another Figma tutorial on our YouTube channel which goes for about 40 minutes; you can check that out if you want to have a in-depth breakdown of how to go through and apply all these animations really easily; I'm not going to cover that here, but you can see here we've got some animations set up and all we want to do is export them. We can get them into a format that we need, which in this case is going to be Google Ads.

To export these banners, we can click on the "Export banners to HTML" button in the top right hand side of the Figma plugin; I'll click on that, and you can see we've got a bunch of options here. We can do a whole bunch of things, but as with the other point on the animations, I'm just going to focus on this area down here which is "code output settings". At the moment, we've got it set to "Vanilla HTML and JavaScript", however because we want to export this from Figma to HTML for Google Ads, we're going to click on the drop down here and instead of selecting one from the "standard" group at the top (which are all the vanilla options that don't come with any additional code), we're going to scroll down and there's a second section called "advertising platforms", and you've got a list of a whole bunch of platforms here but the one we're after is right up on top which is "Google Ads"; if we click on "Google Ads", you can see here that it's selected that for us.

You might have noticed that one of the other fields is disappeared; if we click on the selection we had a second ago, you can see we've got the banner link URL here; if you put a link in there that'll that'll open up the the link whenever you click on the banner, but you might notice that when we click on "Google Ads", that option disappears; and the reason for that is you actually associate the URL for the Google Ad inside the Google Ads interface, you don't have to preset it in the code itself, but it's going to include some click tags that are going to allow the Google Ads UI to actually hook into that, which we'll see in a second.

Now that we've selected "Google Ads" from the advertising platforms this is going to export from Figma to HTML for Google Ads the way we we need; all we need to do is click on "Export banners" in the bottom right here; I'm going to click on that and it's generating all the code for us, exporting all the images for us automatically, and and that's all done; it's very quick, it only takes a couple of seconds. If I open up the zip file just by double clicking on it, that's going to reveal all of the banners that we've got here; you can see that these all match up with the banners that we've got on the left hand side in Figma, and it automatically prepends the dimensions and then it uses the frame name to also give a bit of a label to each folder.

The easiest way to see an overview of all of our banners to make sure that they're all looking the way we want is just by clicking on the "index.html" file; that's loaded up the index.html file, and you can see here we've got all of our banners from Figma; you can click this little play button in the top right to replay them if you want to keep having a look at them and this is also responsive; if you need to use this on different screen sizes the banners will automatically readjust, if you're sending this to a client or just reviewing it internally.

Now that we've got all of our banners that the way that we want them, let's just take a look at the code that is generated for us as well. I'm just going to open up my code editor, in this case which is Visual Studio Code, but you can use whatever you like. I'm just going to open up the "MREC" medium rectangle, and I'll open that up in the browser as well, and you can see here it's opened up the single banner. If I inspect the code in my code editor, you can see here that it's automatically generated all the code for me. It's got the the metadata for the banner, it's got all of the HTML for the banner, all the images with the alt text, and the CSS which handles all of the animation and positioning; it's automatically been generated for us. The other neat thing is that we've got a JavaScript file which automatically includes all of the stuff to detect when the images are loaded; it will only show them when they're actually loaded in.

That includes everything that we need to upload this banner to Google Ads. We can actually validate that by going to the Google Ads validator, so I'll go to that now. I'm in the HTML5 validator, which is a tool that Google offers which allows you to validate your ads or your creatives before they actually go into production, just to make sure the code and the structure is all valid. What I need to do to zip that up is just highlight all of the files, click on "Compress", and after I've done that I can click on "Upload", click on the zip file that we just made, and this is going to upload all the files to this validation service. It does tend to be a little bit slow I've noticed; so we'll just wait for that to finish. If you do need to get to this page by the way you can just search for "HTML5 validator for Google Ads" and then that will show up.

It's finished uploading, and you can see here, it's provided this long checklist of all the different things that it's checking for. It looks really nice, because we've got green check boxes from from zero to the end, which is really cool. Then here we can just click on this little icon, which will load in a preview if we want to have a look at that as well; that shows us the preview which will load in a second. If we click on that, you can see here that it says "your click was successful and should track correctly"; all you need to do is include a click tag or a click URL on that once you've uploaded it, and that should should work just fine. That's all validated and all working as expected; and we've got all of our banner sets, so we don't have to test all of them; all of the code gets exported in the exact same way; if one works, they all work. This is all built into Bannerify; you don't actually have to worry about this, but I just wanted to show you that it is actually all validated for Google Ads.

That's essentially it; you don't need to do anything else, those are production-ready. Of course, you've got all the code there if you do want to make any changes or manually tweak anything yourself in code, but the idea is that you can export production-ready banners from Figma to HTML for Google Ads and that'll just work straight away. You don't have to do any extra steps, you don't even need to know how to code, you don't need any developers on the team, you can just do it all directly from Figma to HTML and Google Ads will pick up on all of that, with everything all be valid.

I hope that's been a helpful Figma tutorial for anyone who's searching for how to do this, and was wondering if you could do this from Figma; the answer is "yes", but you just need to install the Bannerify Figma plugin to make it happen. That'll get your banners from Figma to HTML for Google Ads with no issues. Thank you as always for watching, and until the next one, I hope you can use this in your own projects or share it with your team; we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export Figma to HTML for IAB using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-03T00:00:00.000Z
dateModified: 2020-05-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-for-iab-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-for-iab-using-bannerify.md
---

# How to export Figma to HTML for IAB using Bannerify

#### Video Transcript

Today, I'm going to be showing you how to export animated banners from Figma to HTML for IAB (or the Interactive Advertising Bureau).

To do this, we need to install a Figma plugin called Bannerify; to do that, we can go to the top toolbar in Figma and click on the little Figma icon and if you go to "Community" and then click on the search bar at the top you can type in the term "Bannerify", and then click on the "plugins" tab and you'll see a result come up called "Bannerify HTML Exporter". If you don't already have it installed you'll see an "install" button on the right-hand side, once you click "install" you get this little checkmark like mine has; it'll say "installed".

Once you've installed it, the next thing we're going to do is just click on the description or the title of the Figma plugin, and this is going to load up the description of the plugin. If you scroll down to the "additional notes" section, the first bullet point contains a URL, and that URL will take you to the Figma design that we're going to be using for this Figma tutorial; that's just an easy way to follow along if you want to use a pre-designed set of animations on some banners, or feel free to use your own if you have your own banner design that you want to use.

Let's jump back into our project and we can just right click anywhere and go down to "plugins" then click on "Bannerify HTML Exporter" and this is just going to fire up the Figma plugin that we just installed. Once it loads, you'll be able to see that we've got all of our banners from Figma represented in the Bannerify Figma plugin, and if we click on the little play icon you can see that they've already got an animation timeline applied. This Figma tutorial isn't going to show you how to apply animations or update timelines or do anything like that; there's a separate tutorial on our YouTube channel if you do want to go through the 40 minute Figma tutorial, it's very in-depth and it'll take you through everything you need to know to set all this up for yourself; it's very comprehensive, but in this tutorial we're just going to be covering exporting an already animated banner set to HTML, going from Figma to HTML for IAB, in this case.

The first thing we need to do is just click on the "Export banners to HTML" button in the top right hand side of the Figma plugin, and once we do that we'll get a variety of different settings; the one we're going to focus on today is just in the bottom right here called "code output settings" and under the "export format" label, we've got a little select drop-down box; if we click on that and scroll down a little bit, you'll see there's a group called "advertising platforms" and all the way down the bottom we've got one that is called "IAB", and that is the one that we want to select for today's Figma tutorial. If you click on "IAB", it'll show you that that's selected underneath the export format and that's going to let Figma and Bannerify know that this is the format we want to export to.

To export these banners from Figma to HTML for IAB, all we need to do is click on the "Export banners" button in the bottom right here; I'm just going to click on that, and this is going to generate all of the code that we need for these banners, and all of the images and zip them up for us. Now that we've got the save prompt, I'm just going to use the default file name and click on "save". If I go to my desktop I can double click on the zip file that I just saved, and inside of that folder you'll see that Bannerify has exported all of our banners into separate folders with the names from the Figma frames and prefixed them with the image dimensions or the banner dimensions.

The quickest way and easiest way to get a look at what we've just exported is to open up the "index.html" file that comes with the banner folder; I'm just going to do that now. That has opened up the browser and it's showing us all of the banners that have just been exported. These are all being previewed at the same time, we can make that a bit bigger if we want to see them all, and to replay the animations you can just click on this little play button. This is just loading in all of the banners at the same time to let you easily see what's been exported, but if we want to drill down into some of the other code that's being generated behind the scenes, what we can do is just go back to our folder.

I'm just going to open up Visual Studio Code, and I'm going to drag in the medium rectangle folder, and also just drag this medium rectangle index file into the browser, just to see what we're looking at. We've got our medium rectangle banner here in the browser and in Visual Studio, we've got our folder loaded in to have a look at what's being generated. You can see here it's generating all of the HTML that we need, with all of the images which are being pulled in from the "images" folder; you can see we've got SVG's for the text layers, PNG for the button and this JPG file for the background; and then we got our CSS file which is going to generate all of the positioning and all of the animations that we specified in Bannerify while we're in Figma.

Finally, we've got our JavaScript file; and this essentially just includes some code that IAB is going to be lookiung for. It's doing some some fancy things here to get the query string in order to obtain the click tag that it's going to want, and then that's being assigned to the banner itself; whenever someone clicks on your banner, it's going to trigger the window to open up the click tag, and the click tag is going to be included once you get these banners into IAB and the click tags going to be pulled in from from that parameter. That's everything that we need. Bannerify generated it all for us, so you don't need any developers, you don't need to know any code. That's pretty much all you need to know to get get these banners out of Figma to HTML, in this case for "IAB".

If we jump back into Figma, that's all done now, it's telling us that we can upload these to either our own server, if you want to put them somewhere to preview for your clients or stakeholders, or of course you can just individually upload those banners to your advertising platform. I hope that's been helpful if you were looking for a way to export banners from Figma to HTML for IAB. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this for other Figmatic Figma plugins, or more ways to use Bannerify in the future.

---

---
type: tutorial
title: How to export Figma to HTML for Sizmek using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-05-03T00:00:00.000Z
dateModified: 2020-05-03T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-for-sizmek-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-figma-to-html-for-sizmek-using-bannerify.md
---

# How to export Figma to HTML for Sizmek using Bannerify

#### Video Transcript

Today, I'm going to be showing you how to export animated banners from Figma to HTML for the Sizmek ad platform.

To do this, we need to install a Figma plugin called Bannerify. If you haven't done that already, you can go to the top toolbar and click on the Figma icon and then you want to go to "Community" and in the search box type in the word "Bannerify", then click on the "Plugins" tab and you'll see a result that says "Bannerify HTML Exporter"; I've already got this installed, but if you don't you'll see a button on the right-hand side that says "install", and if you click on that, yours will change to look like mine does with this little checkmark on it.

The next thing we're going to do, so you can follow on with the Figma tutorial is click on the plugin description by clicking on the plugin, and once that loads you'll see in the second section under "additional notes". If you scroll down and go to the additional notes section, the first bullet point has a URL in it, and this URL here on the second line if you copy and paste that into your web browser, that will load up a copy of the pre-designed banners that we're going to be using in this tutorial. That's just going to be a much easier way for you to follow along, otherwise you can use your own banners as well.

Let's jump back into our project and you can see we've got these banners designed already; I'm just going to right click, go down to "plugin" and then go to "Bannerify HTML Exporter", then click on that. This is going to start up the Figma plugin that we just installed and once that loads you'll see that we've got all of our all of our banners loaded in from the designs, and you'll notice that they've already got some animations on them; we can click on the little play button to preview them. This Figma tutorial won't be covering how to add animations or how to configure your timeline, if you do want to get a sense of how to do that, we have another Figma tutorial on our YouTube channel which goes into depth on all of those things regarding animation selections and timelines. That tutorial goes for about 40 minutes and it's very comprehensive; I'd recommend checking that one out if you do need a bit of background on how to set up the animations, but in this case we're just going to export the current animations and designs that have been set up to HTML for the Sizmek platform.

Now we're going to export Figma to HTML for Sizmek, and to do that we just have to click on the top right button in the Figma plugin, which is "Export banners to HTML; I'll click on that, and there's a number of options here, but the one that we're focused on today is under the "code output settings" area here in this bottom right corner and underneath the "export format" we just want to click on that drop-down and underneath the "advertising platforms" group, you'll see about fifth down we've got the "Sizmek" platform. There's a number of them, but in this case we just want to export to Sizmek; I'm going to click on that, and now it's indicating that Sizmek been selected. All we need to do now to export this to HTML is to click on the "export banners" button in the bottom right; I'm just going to click on that now, and this is going to generate all of the code and all of the image files that we need for our HTML banners.

It's going to pop up the save dialog; I'm just going to keep the default file name and click on "save" then I'm going to go to my desktop and double click on that zip file that Bannerify just created once that unzips, you can go into the folder and you'll see that it's exported all of the frames from Figma to HTML. The easiest way to get a look at what's been exported is just to double click on the "index.html" file that comes in the the root of the folder; I'm just going to click on that now. That has loaded up our banners now and we can see that all of the banners that we exported are available; we can click on this little play icon to repeat the animations if we want to, there's some more down here as well; all of them have been exported as we expected.

To get a sense of what has been exported, I'm just going to open up my code editor and show you what's inside one of these folders; if I open up Visual Studio Code and drag in this folder, just the medium rectangle, I'll open up that that file as well in my browser. Inside a Visual Studio we can see that we've got an HTML file and all of the images that we need have been included automatically, we've got our JavaScript, we've got our CSS.

You'll also notice we've got an extra script tag which is pointing to this file called "EBLoader.js" and it's getting served from a content delivery network URL; this is the file that's required to to use the Sizmek ad platform. That gets included automatically, and inside of the JavaScript file that gets included, we've also got these little functions down here which is a click through; this is getting called on the click handler for the banner; whenever you click on this banner you'll be able to fire off that that call and that's going to trigger the URL to open in Sizmek once it gets loaded in. That's all good, we don't need to do any extra work to make that work it's just going to get triggered whenever these banners get uploaded into Sizmek, and you'll be able to add the URL once you're in the Sizmek UI in the browser; we don't need to do any extra work there.

We also have a images folder; this is just where all the images are stored; all the SVG's, all the PNGs and JPGs. The PNGs and JPGs for the the images, and then we've got SVGs that are being rendered out for the text to keep them nice and smooth and crisp. That's essentially all the files that we have.

If we jump back into Figma, we can we can pretty much just close this off now; if we just click on the "X". That's actually all you need to do to get these banners out of Figma to HTML for Sizmek. I hope if you've been searching for a solution to this, then this Figma tutorial has been helpful for you. If you and your team are using Sizmek and also using Figma, and just want a really easy way to get your designs out of Figma into HTML for Sizmek then this is definitely the easiest way to do that, using the Bannerify Figma plugin. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one for Bannerify and some of the other Figma  plugins as well.

---

---
type: article
title: The need for “state driven design”
description: The narrow focus on “creating” design systems has largely distracted us from studying the endgame.
datePublished: 2020-05-01T00:00:00.000Z
dateModified: 2020-05-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/the-need-for-state-driven-design/
markdownUrl: https://www.hypermatic.com/articles/the-need-for-state-driven-design.md
---

# The need for “state driven design”

After many years mostly on the fringes, "design systems" (which were more commonly known as "living style guides" for a while, until "design systems" made them sound much cooler and legit) started really gaining more mainstream popularity and traction over the last 24 months. Many companies have made public announcements and displays of their internal design systems; sometimes based in code, sometimes not.

However, while there are elements of this that are really positive (encouraging re-useability and modularity for design), in some ways, the "design systems" marching band has been something of a big distraction. With the conversation so narrowly focused on climbing the mountain of creating a design system as a goal in and of itself, far less thought has been given to the endgame.

### Your design file is not a design system.

First - for some much needed context to what I'm going to talk about next - just to address the elephant in the room, there still seems to be a wide misconception that a design file that contains some hand drawn (literally) pieces of a website or application - no matter _how_ neatly or _organised_ they might be - constitutes a design system. I don't agree with this idea, because at _best_, it's still just an emulation of the real medium (code running in a browser or native app) that your customers and users are actually looking at and using.

It's disheartening to see companies spending many months or even _years_ all working towards meticulously creating really big component libraries in screen design tools, only to realise later that this big design system project becomes very unstable alongside a "mirrored" development environment which will always be ahead of it. It is difficult to maintain at a small scale with few people, and near impossible to maintain at scale with many people. Indeed, if your company has multiple brands or products that all branch off the same underlying design system, this problem continues to compound with every additional property.

I personally know companies and teams who tried doing this approach back in 2013-2014, and less than a year after "completing" the design system creation (in design tools), the problems of how that relationship with front-end development (and the production environment) might work together begins to rapidly break down.

If you haven't seen this happen before, it's understandable for it to be a blind spot - especially as many design/development teams are disturbingly disconnected from each other - but on a long enough timeline, anyone who embarks on this approach to the "design system project" will ultimately realise that we can (and must) do better.

### Design has not reacted to "React"

As I've written and talked about a number of times before: after 20 years, the way we design things still has much more in common with front end development in 1999 than it does with the front end development in 2020.

Despite being more than half a decade old and forcing us to completely re-think and change the way we think about front end development, designers and design tools have yet to catch up with the ideas that "React" (the JavaScript library for building user interfaces) and those like it (Vue, Svelte etc) have brought to the table.

Before we had the "React" way of thinking about working with "state" and events in development for the front end, we were living in a much different "jQuery" reality that makes little sense with the benefit of hindsight (which is likely how we will view design today when we look back on it with similar hindsight in the future).

The three key concepts featured on React's website are:

#### Declarative

React makes it painless to create interactive UIs. Design simple views for each state in your application, and **React will efficiently update and render just the right components _when your data changes_**. Declarative views make your code more predictable, simpler to understand, and easier to debug.

#### Component-Based

Build encapsulated **components that manage their own state**, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily **pass rich data through your app and keep state out of the DOM**.

#### Learn Once, Write Anywhere

We **don't make assumptions about the rest of your technology stack**, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.

### All we have are static components with no ~~souls~~ states.

If we use the React concepts and try to pair them up with the way we currently approach design, we would (in the best case) score ~0.5/3 - we have something resembling components, but they don't really _do_ anything. Our front end environments are operating on a totally different paradigm to the way that design is still generally being approached; the two are completely incompatible. There is no sane way to approach state driven design in our current design tools.

Having personally worked on projects that have hundreds of possible "states" within a single view - it doesn't matter how good or well organized/named your components are inside of a design tool - you cannot possibly create robust designs that account for the interplay of all these possible combinations of future states by approaching it the way we have for the last 20 years.

This is a _huge_ deal, because (again, as I've experienced on many, many projects), if you are not considering the "states" of an application, you're going to have blind spots as a designer, which might not be front of mind while trying to design a handful of "pages" that give an example of some states which might be encountered.

When you compound this problem with the fact that many designers are not even using real data or content from the production environment (often favouring "fake real content" or just using lorem ipsum for imaginary content), you end up in a weird place where you are literally designing based on delusion rather than data or anything based on reality.

If you're designing fake static "pages", with fake content, using fake components and creating fake "states" by stringing a dozen static "pages" (modified versions of the same view) together in order to emulate something comparable to the production environment, you're flirting with a time bomb that will eventually explode once this design makes its way to development and nothing makes sense.

### Extrapolating the “hover states on buttons” problem

It's very telling when a common request for prototypes is being able to show "hover states" on buttons. This might sound funny, especially since the joke that "all conversations about design systems eventually just lead to talking about buttons" (somewhat true, as this paragraph confirms), but this concern is basically "patient zero" for the massive amounts of headaches it will cause going beyond just wondering about the state of a single button.

The "button component" is often used because it's an example of one of the most atomic things you could design - you can't break a button up into anything smaller than itself. If that's true for the component itself, then the same is true for the "states" of the button - a button can have visual interaction states (hover, focus, active, disabled, loading etc) and it can have different text, but it doesn't really many other properties that change.

If we can't even do something like change the "state" of a button under certain conditions without duplicating that button 5 times for the interaction states, then duplicating all those 3 more times for "primary/secondary/tertiary" variants, then duplicating those 3 more times for "dark mode versions", to give us 45 instances of a button, then I don't even want to imagine what designing anything even slightly more complicated would be like.

The question remains, even after you've got these 45 button instances in a design tool, what can you _do_ with them? You cannot make the text on any button(s) "react" to use someone's name when the state of the application changes to "logged in", this needs to be compounded by designing that possible state of those buttons, with the 5 other possible states of that view - because there are dozens of other components that might also do something different when somebody is logged in, or if that customer has new "notifications", or dozens of other combinations that come along for the ride... who knows what might be happening in the state of your application at any given time.

### Design in the “Abstract”

If we are to look at Silicon Valley as the epicenter of the bleeding edge, as many designers tend to (eg. blindly adopting "underlined text inputs" from "Material Design", only to find out 2 years later from the Material Design team's data that they aren't actually very good), then one could imagine that the problems I'm describing would be coming ever closer to being solved in these bigger tech companies with huge design teams.

However, in season 2 of the Netflix design series, “Abstract”, there is an episode that looks at a design team inside of the company "Instagram". There is one short part of the episode where one of the designers is showing off a prototype on the screen which looks like the visual source code for The Matrix or something - it seemed crazy to me, but then I realized that this is "the best of the best", and I felt very sad and confused.

On a more personal version of this: one of the lead design system designers/developers that I know (who works at a well known startup here in Melbourne), recently went to Silicon Valley and had a tour of some very well known tech companies to see how their design teams were doing things. After they returned back home to Melbourne, I somewhat excitedly asked: “So, tell me... what are they doing that we don't know about?” and the answer was disturbingly: “Well... nothing. They're not really doing anything different than most of the bigger design teams at the design-driven companies around here.”

It became clear that nobody has figured it out; and while everyone claims they have _some_ answers (or even _the_ answer), we are still all essentially operating within a very similar set of mostly accepted parameters, mainstream tooling and narrow ranges of thinking about these problems related to problems such as (but certainly not limited to) the need for state driven design.

### “You must study the endgame before everything else”

With such a heavy and narrow focus on just _creating_ design systems, it seems like many have lost sight of _why_ they are doing so in the first place. The moment you have completed your design system project (knowing it is never "done" in some sense, let's define "completed" as something that can be 10x more materially useful to the way you design products), the question becomes something like: "what can we do now that we couldn't before?", with all eyes on your brand new design system, the promised savior to all your problems.

If we take a quote from world chess champion José Raúl Capablanca:

> “In order to improve your game, you must study the endgame before everything else, for whereas the endings can be studied and mastered by themselves, the middle game and the opening must be studied in relation to the endgame.”

To me, it seems like we are spending more time distracted by studying everyone's "opening move" (of creating a design system), that we haven't given enough thought to the rest of the game.

Weirdly, I do get the sense that everyone is almost kind of "happy" being distracted with the project of "creating design systems" as the goal itself, because it means we don't have to think about what comes next; and maybe if nobody talks about it too much, then nobody will get in too much trouble because "we were just copying each other, after all".

If the poorly defined endgame on our current trajectory is simply having a neatly organized and shared set of hand drawn pictures that look like components (from a real website or app) in a design file that makes it _easier_ (but not fundamentally _different_) to continue designing very complicated things that aren't interoperable with front end development and the production environment; I would be very pessimistic about that future.

However, to me, it seems that we both acknowledge _and_ ignore our "secret" endgame; the way we are acting indicates that we _are_ trying to emulate the front-end environment in design tools on some level (albeit one very slow and incremental step at a time), but seemingly without ever considering that we could just going "all-in" on actually _using_ the front-end code itself to accomplish the same outcome instead.

I sort of understand why this isn't a very popular idea (even today, after talking about it for half a decade, most people I talk to _still_ disagree with me on it), especially since the tooling has not caught up to this idea, but if we really don't want to use code, then we _still_ need to come up with a sane way to design things without pixel pushing 100+ possible "fraudulent states" (using fake data) of an application manually across artboards (just the name "artboard" is a tell that something has gone a bit wrong) and dragging arrows between them to create some crazy prototype that has no value beyond an artifact sitting somewhere in the cloud (once it has served its limited purpose).

On a long enough timeline (which is still _far too long_) of trying to trudge our way through this current paradigm (which has _already_ run out of track), I'm still optimistic that enough people will start recognizing the way we're thinking about design systems, prototyping and the _far_ bigger fundamental problem of design and development not being interoperable are things that we really need to think about seriously and solve with greater urgency.

The future is not set - new ideas ("state driven design" is only one of _many_ that we need now and in the future), positive progress and innovation are not automatic - it's up to us to change it; no one is going to save you.

---

---
type: tutorial
title: How to compress SVG images in Figma using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-04-30T00:00:00.000Z
dateModified: 2020-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-compress-svg-images-in-figma-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-compress-svg-images-in-figma-using-tiny-image.md
---

# How to compress SVG images in Figma using TinyImage

#### Video Transcript

Today, I'm going to be showing you how to export compressed SVG files directly from Figma.

We're going to do this by installing a Figma plugin called TinyImage; if you haven't already installed it, you can go to the top left, click on the Figma icon in the toolbar and you just want to search for the term "TinyImage" in the search bar. You'll see "TinyImage Compressor" pop right up. If you haven't actually installed it, you'll see a button that says "install" over here; I've already installed it and that's why mine says "installed", but if you haven't installed it you can just click "install" and when it says "installed" and you're ready to go. Once you've installed TinyImage, click back into your project.

These are the three images that we want to export to SVG. Now, the normal way we would do this is by clicking on the export settings in Figma down here, if I don't have any on that, I would click on the image or the frame, go over to the right hand side, and click on "export" and then I would change the export format to "SVG"; then if I click on "export" that'll export it straight to my desktop, or wherever I want it, as an SVG. If I save that and then open it, you can see there that Figma exported it; that's the original one that we were exporting, I'll just name that this "original".

We want to export a smaller version of that; the way you can do that is by running TinyImage. If you right-click, go down to plugins go down to "TinyImage Compressor" and click on that; that's going to run the Figma plugin that we just installed, and once that loads you'll see that it will load in all of the images that contain export settings already. If the images don't contain export settings, for example if I remove this export setting of SVG and then refresh in TinyImage, you can see that it's saying we don't have any export settings on this particular frame. If I click off that frame and go back to the full list, you'll see that this particular frame has been removed from the list and that's because it doesn't have export settings, whereas these two still have SVG as export settings.

So, we want to re-add the export setting of SVG; that TinyImage can pick it up. I'll click on "export", change that to SVG, click "refresh" and we can see it's popped back up into the list. To export a compressed version, what we have to do is select the layers that we want to export from TinyImage; in this case I'm just going to export the one layer that we just exported using Figma's native export settings and I'm going to use this quality slider to determine how much compression or what quality I want the image to be saved at us. Lower quality will result in smaller file sizes but potentially lower image quality and all the way up the other end you have larger file sizes but better image quality; it's up to you to figure out what that balance should be.

In this case, I'm going to make it fairly low quality because these are SVG images and the quality differences compared to something like a JPEG or a PNG is very different and usually you can get away with pretty aggressive compression in SVG images and not really have any detrimental effects on the quality. I'm going to actually put it down to "20" and click on "Compress".

It's it's extremely quick; in this case it's just done it instantly, and it's saving it out as this file name here, and that's because I've configured it to use the image dimensions in the file name which I can show you in a second. I'll click on "Save", that's just saved it to my desktop, and you can see there it's just exactly as you'd expect. The difference between the two is very slight, but the file size as you can see here in the summary the file size has been reduced by 74%. I know that we're dealing with very tiny file sizes, we started off with 5.6 kilobytes and we've reduced it down to one point four nine kilobytes 74%, it's understandable why that doesn't seem like much, but these are very small simple icons. If you're dealing with SVG images that are much bigger and the original file sizes are much bigger, that seventy four percent increase is going to mean much bigger absolute file size savings for your SVG files from Figma.

I'm just going to re-run TinyImage, and the way we can do that more easily, because we've already run it through right clicking, once we've run it once in a page it'll show up in the right-hand side under the Figma plugin column, and you can see here I've got the little TinyImage icon with the milk bottle icon; I'll click on that and that will relaunch the plugin for me immediately. I don't have to kind of go through the few steps of right clicking this will just do it really quickly from the sidebar.

This time I'm just going to show you why the file name came out the way that it did. The reason is, if I click on this little "Settings" icon you can see here that I've got a custom image file name format setup to follow the convention of the layer name and the width and the height; you can see here when I update that it gives you an example of what that file names going to look like. I could remove all these things here and and and just update that, I'll do that now I'll just leave it as the name; I can actually just remove that and it'll it'll default to that if I remove it, click out of that.

This time I want to export all three of my icons. The way I do that is just by selecting them in the list here, I'm just clicking on them to make sure they're all checked and when they're all checked, you can again pick the quality; I could do something like leave the default quality at 20 but maybe for this third icon I want the quality to be like really low; I'm just going to make that one 5 and then a sushi one for some reason I want it to be 35; you can actually override the quality settings, and any that you don't override with these text boxes will inherit the global compression quality up here; because we've only got one with no value over here you can see on the right the placeholder is defaulting to whatever the global compression value is for those for those SVG images.

I'll leave that as 20 and then I can click on "Compress" again. It's extremely quick with SVG images in particularm it's just basically instant. I'll click on "Save" and this time you'll see that we've saved 64 percent in total, which is almost 14 kilobytes, and it's showing us here that we've been using different qualities per frame or per SVG, because we added an overwrite to this one and this one; that one was at 35, this one was at 5 and that one was at 20; you can see that the percentages are a little bit off; because this one was set to 35, the quality might be better but the file size reduction is also less, but that's okay, we still saved 64 percent which is great.

You'll get a zip file if you compress multiple images at the same time, and it just names that by defaults as whatever the project name is in your Figma; we've got "TinyImage Compression" and that's reflected in the the project title and then today's date. If I double click on the zip file, it'll give me this folder containing all three SVG images and because I updated the file naming convention, we no longer have the "512 by 512" suffix, it's just the layer name as you'd expect from the native Figma exports for SVGs.

They all look really, really good; the quality is great, you can't tell that that we've used more aggressive compression on this one. This one was set to quality 5 out of 100, and you wouldn't be able to tell that there's any loss; the paths are potentially slightly different, but at a glance it's it's very difficult to tell and it looks really good.

That's a fairly good summary of how you can compress SVG files directly from Figma using TinyImage; as I said this is this is a really basic example of just using small icons, which is really handy, but you're going to see huge savings if you're exporting much more complex SVG images like illustrations, much bigger sorts of images or more detailed paths; TinyImage is really good at doing that. If you do need to export SVGs from Figma and you don't want to manually re-run them through some third-party service or command-line tool or website, you can just use the TinyImage Figma plugin, and as you've seen here it just immediately does it directly from a Figma and gives you those nice compressed SVG images.

We'll leave it there; I think this is a really short and sharp use case for using TinyImage, and I just wanted to give you all the different ways you could actually use it for compressing SVG images in Figma.I hope it's been really helpful if you've come here looking for a Figma tutorial for this, an I hope that you get some benefit from it and can use it in your own projects. Thank you, as always, for watching and we'll see you soon for more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export WebP images from Figma using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-04-30T00:00:00.000Z
dateModified: 2020-04-30T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-web-p-images-from-figma-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-web-p-images-from-figma-using-tiny-image.md
---

# How to export WebP images from Figma using TinyImage

#### Video Transcript

Today, I'm going to be showing you how to export Google's WebP image format directly from Figma.

We're going to be taking these images here and exporting them; instead of exporting them to JPG and PNG, we're going to export them to Google's WebP image format, which Figma doesn't natively support, but we're going to use a Figma plugin to help us out with that.

The first thing you want to do is go up to the main menu and click on the Figma icon in the top left here, and you want to go to a search or community, either one, and in the search bar we just want to type in the word "TinyImage", that's just one word; and when you do that and go to the plugins tab, you'll see this Figma plugin called TinyImage Compressor" pop right up. Because I've already got it installed, my button on the right here looks like this, and it's got this little check mark with "installed" on it, but yours might just say "install" if you haven't already installed it; if you click on "install" it'll install it straight away, and you'll see it changed to say "installed" like mine does.

Once you've installed it, you can jump back to your project in Figma, then to run the Figma plugin that we've just installed, you can just right click anywhere, go down to "plugins", and then go down to "TinyImage Compressor"; that will run the Figma plugin that we've just installed.

The first thing to know, is that TinyImage bases the images that it exports from the native Figma export settings on any of your frames or any of your layers. What I mean by that, is if we click on - let's just click on this this matcha photo here - you'll see in the right hand side, we've got this this little section called export, and at the moment I've got two export settings, I've got two different JPG exports. If I remove those, and then click on the "refresh" icon in TinyImage, you can see that it'll warn us, saying that we don't have any export settings on this layer. If you're running the Figma plugin and you're not seeing any images pop up, it's because you need to apply export settings from this little sidebar in Figma, and that way TinyImage will understand what exports you want to be making for all of these different images.

To do that, you can just click on an image layer, go to the "export" tab over here in the right hand Figma colum, click on that and then it's really up to you to set the formats. By default, it's PNG, but I want to use JPG because these are more photo based, there's no transparency, there's really no need for me to use PNG for these ones. On the other hand, these little icons here do contain transparency; I do want to export those as PNGs; at the moment they're set to SVG, what I can do is I can just go down here to my export setting, click on where it says SVG and change that to PNG in my case. I can do that to multiple images at the same time just by holding down shift and clicking on more than one, and then changing that down here to add to PNG; now if I refresh you can see there it's changed to PNG. That's just a brief intro to how these little images pop up in the TinyImage plugin, they're directly correlated to the export settings that you put in to the Figma column.

Now that we've got those set up, we've got JPGs and we've got PNG setup, if we do this normally what's going to happen is it's going to export them just as those formats, it's going to export PNG's and export JPGs. Just to show you what that looks like, I will click on the "Compress" button up here and TinyImage is going to run through all the selected images that we just told to compress, and it's going to compress all of them to JPG and PNG, depending on which layer had which setting attributed.

If I'll double click on that and then open it up, you can see that it's exported exactly what we've asked for, it has given us PNGs and has given us JPGs, and because we've got the quality moderately aggressively set to 50, we've saved 93 percent, but in my case that's too low quality; I want higher quality images, but I also want really small file sizes. If we just keep in mind what the total output is at the moment; we've got 7.6 megabytes for these images and quality 50, but to get better file size savings but also better quality at the same time, what we can do is export these images to a totally different format called WebP.

I'm just going to click out of the plugin and rerun it; I can rerun the TinyImage Figma plugin from the sidebar now that I've already run it once. If you go over to the right hand side and click on the TinyImage icon, that will fire up the plugin again without you needing to right-click anything.

To enable WebP - Figma does not support Google's WebP image format natively - so what we need to do is enable it via the TinyImage plugin. To do that, we can click on the little "Settings" icon up in the the Figma plugin toolbar up here, when you click on that, you'll notice this option here that says "Convert all JPG and PNG images to WebP"; by default that is turned off, but in our case. because we want the WebP image format, Google's WebP image format, to be exported from Figma, we can click on this little toggle and that will enable it.

If we just click out of the settings again, you can see here that it's actually flagged a little update in our list that says in brackets: "WebP". So, WebP is in brackets next to it, we can still see the original format, we've got PNG exports here, but in brackets it's telling us that the WebP setting has been enabled in our settings here; that's why why that looks like that, if we turn that off you can see that that removes it, but when it's on it's telling us that the export setting is for PNG, but that's going to get converted into WebP.

To see what that looks like, we can for example, bump up this this quality slider; let's make it 75 and we're just going to leave all the checked images to the ones that we just did a moment ago. We can compare the outputs, now we've got all these selected to export WebP from Figma instead of JPG and PNG, and I've got the quality selected as 75, we could override these but for now let's just make them all 75. Then we jt simply click on "Compress" once again with that WebP setting checked, and this time it's not going to give us JPG and PNG, it's going to give us WebP.

Now, I'm going to save this zip file and you can see here that even though we increased the quality to 75, from 50 to 75, the savings are still in a really high range. We've just saved 90 percent, 7.43 megabytes in total have been saved from the exact same image set.

If we go to our desktop where the images was saved and then open that up, we can see here that if I just open up that in a new tab compare that, we've got our new exports here which are all the WebP image files; you can see here it's got "Google's WebP" as the format compared to the export that we just did a moment ago, which just exported the original PNG and JPGs.

If we compare the sizes, even though we've increased the quality to 75 from 50, the image sizes are still quite good even though we've bumped up that quality. If we open those up here you can see that we've got these reasonably good looking images, but the file sizes are still really really low, and that's the whole idea behind Google's WebP image format; it's a brand new format and there's not a lot of people using it yet, but I know that if you're a website that gets heaps of traffic and you want to really save on the amount of data that people are consuming, and the amount of traffic that's going through your server, but still have really good quality images, WebP is just a really good alternative to the original PNG and JPG.

The thing you'll notice as well is that TinyImage supports transparency. We've got these little icons here that have transparency, and you don't have to worry about whether you you can't do it, because you need a PNG or an SVG because you have transparency; this exports transparency just fine, as long as you've set the original format for those images as as PNG. For example, we've got this one set to PNG because it has transparency, as long as you've got that selected as PNG. the transparency is going to get picked up in the WebP compression and the WebP file is going to automatically get that transparency. That won't happen for a JPG; JPGs will never have that transparency, but JPG is perfect for photos just like this.

That's how you can export WebP image files directly from Figma. As I said, WebP from Figma is not supported natively, but using the TinyImage Figma plugin and enabling this option that we enabled before to convert all PNG and PNG images to WebP from the Figma exports that will enable you to do it, even though it's not natively supported. And finally; to turn it off, you just simply click on the "Convert all JPG and PNG images to WebP" toggle in the TinyImage Figma plugin settings once again.

I hope that has been interesting for anyone who's trying to figure out how to get this WebP image format out of Figma directly, without having to export JPG and PNG files first, then find an online converter or find some command line tool to do this for you every time. If you do need to export a bunch of WebP image files directly from your Figma project, then at the moment TinyImage is the the only way to do it; but as you can see, it does it really quickly and efficiently, and you don't need to worry about any other terminals or scripts that need to be run after exporting other files from Figma. I hope that you have some success with it, and as always, thank you for watching the Figma tutorial; I hope you learned something from it, and thank you again for watching!

---

---
type: tutorial
title: How to export Progressive JPEG images from Figma using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-04-29T00:00:00.000Z
dateModified: 2020-04-29T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-progressive-jpeg-images-from-figma-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-progressive-jpeg-images-from-figma-using-tiny-image.md
---

# How to export Progressive JPEG images from Figma using TinyImage

#### Video Transcript

Today, I'm going to be showing you how to export progressive JPEGs directly from Figma.

To do this, we need to install a Figma plugin called TinyImage if you go to the toolbar in Figma and click on the Figma icon in the top left and then go to your search and search for the word TinyImage which is just one word you'll see a plugin called "TinyImage Compressor" popup on to the "Plugins" tab you'll see this little icon here that'll be quite recognizable instantly, and then if you haven't already installed it you'll see a button over here that says "install", I've already got it installed and that's why mine says "installed" with the little check box, but if yours just says "install", click on that button and then it will change to say "installed" like mine does.

Once you've installed it you can jump back into your project and to open the Figma plugin just right click anywhere go down to plugins then go down to "TinyImage compressor" and click on that and that will run the Figma plugin that we just installed. Because we want to export progressive JPEGs, we're not going to probably do that for these these icons, these are probably more suited to PNG because they've got transparency. You could export them as JPG, but in this case I'm much more interested in these photos that are that are going to be much better for our progressive JPEG output.

The first thing you need to do is make sure that you have export settings on your layers. I've already got them set up but if you don't, I'll just show you what that looks like. I've just removed the export settings on this image over here; if I click on "refresh" in the TinyImage Figma plugin, you can see I got this little warning just letting me know that none of the selected layers, in this case the one I'm selecting now, none of those layers have any export settings on them.

We need to add one at least one to let TinyImage know what image we want to export. In this case I'm just going to click on my image over here and go over to the right-hand column, click on "export", and then that will give me the default option of PNG; but in this case because I want to export progressive JPEGs from Figma, I need to click on this SVG drop-down and change that to JPG; now that's set to JPG I can also add another one; I can add another export setting at 2x and change that also to be JPG.

If I click on this little "refresh" button in TinyImage, that's detected these new export settings that I've added to my image. If your images aren't showing up, it just means that you need to to add those export settings in Figma and tell TinyImage what you intend to export from Figma.

Now that we've got our JPG export settings set up on all of our images here, we've got 1x and 2x JPG on all of them. we can start to export them and see what that looks like. Because we want to export progressive JPEGs. which is a specific format that allows you to load in the images a little bit differently than they usually get loaded in; normal JPGs when you put them on a website and look at them in a browser, they'll be loaded from top to bottom; you'll notice when you see images loading sometimes it starts loading at the top; the strips of the image the top come in from top to bottom, but progressive JPEGs are exported in a slightly different way. Instead of getting loaded in from top to bottom, it loads in progressively sharper versions of the the entire image itself; the first pass will be you'll see all of the image but it'll be not quite super clear what what it is and then it progressively loads in the image detail, but loads it all in one go. Rather than top to bottom line by line it'll load in the full image, but just a lower quality version of it first and then progressively load in a sharper version. It's it's just a different way of using JPGs on a website that might be more suited for your particular use case.

Describing progressive JPEGs aside, now we want to actually create them; in this case I'm going to use the image that we've got over here as a test case. In TinyImage, to enable progressive JPEG exports from Figma, we need to click on this little "Settings" button here in this TinyImage toolbar. If I click on that icon you'll see a couple of options pop up; we're not interested in the bottom options at the moment, but we are interested in this little toggle switch that says "Use Progressive JPEG Compression"; by default that's turned off, but I'm going to click on that toggle and enable it.

Now that we've got "Use Progressive JPEG Compression" enabled; we can close that off and get out of the settings. Now, that's enabled progressive JPEGs; you can see here the format's still set to JPG, but because we've got our compression setting turned to progressive JPEG, that's going to use the progressive JPEG option when we export. Let's click on "Compress" and let TinyImage do its thing, by compressing just the two images to start with.

Once that's done, it's going to save them as a zip file for us. We can just go ahead and click on "Save", and before we open that up, you can see here I had the quality set very aggressively at 20; the quality savings are ludicrous, we've got 96 percent savings on both of those JPGs. The images aren't going to look amazing, but that's just an idea of how far you can actually push it; it's not the full extent, but "20" quality out of 100 is pretty low. You can see here we've dropped from a 5 megabytes to 220 kilobytes and 1.74 megabytes down to 78 kilobytes; we've just saved a total of 6.4 3 megabytes just on those two images alone.

If I double click on the zip file that it has exported for me, I'll open up that folder and you'll see here we've got our two images that we just expected to see. That's the 2x version that we can see here, and it's not horrible; it's certainly got some artifacts here if you look at the these banners in the photo, but if that was half size down to 1x, that actually looks really good you would not be able to tell at a glance that we've compressed it down so far. Comparing that to something that's the original size, where we haven't saved the 96%, I think that 96% saving is a really good trade-off for that.

How do we actually tell that this is a progressive JPEG? I'm going to show you how to do that now. If I close this off, I'm just going to open up my web browser and point you to a page that we can actually have a look at. You can see I'm just using this basic website that I found on Google by searching for "progressive JPEG test". What this lets us do is we can upload an image, if I click on "choose file", open "TinyImage Compression", the one we just did, I'm just going to upload one of those images, and you can see here it's flagged it as "progressive".

It's giving us an example of what a progressive JPEG might look like as well; I'll click into that and just show you; you can see here, I don't know if you could you could see that very clearly, if I refresh that that's probably cached, but it it loaded it in at a slightly lower quality and then and blurred it up. That's roughly what what the idea is behind it. That's cool, that means we've confirmed that the the export worked and we now have progressive JPEGs, which is which is awesome.

If we want to do that again, we can just rerun TinyImage from the Figma plugins sidebar; because we've already launched it, you can just click on this little icon in the sidebar under "plugin" and click on TinyImage, you'll see the little milk bottle icon, and that'll rerun it for you without having to open up your right-click menu. I'm going to re-run this experiment and do all of these images, now I'm going to set it to 50 instead of 20, just to get a slightly more a reasonable output. If I compress that again, this is going to go through eight different images, because we've got retina and non-retina export settings on on all of them, and I just want to give you an idea of roughly what quality you can expect to get across the board if we if we export them all at 50 percent quality.

That's all done now; we can save that, and if we look at the numbers again, it's just super good compression. We've got 92% saved from 8 images, we've just saved an absolute number of 29.5 megabytes. which is which is massive. If you're putting these up on a website and exporting these progressive JPEGs from Figma just to put on your website, then 29 megabytes is massive for your users. You can see the numbers speak for themselves.

We can go ahead and unzip that and jump in there. As you would expect, you've got all the images that we that we wanted, 1x and 2x for all of them, obviously the 2x ones turned out a bit better, but the idea would be just to play around the quality slider and keep doing that until you're satisfied with the output quality versus size, and just keep doing that.

That's the entire process of exporting progressive JPEG files directly from Figma; as always, thank you for tuning in and watching, I hope you've learned something and I hope that it helps you out with your own projects or websites that you've got going on at the moment. Until next time, thanks again!

---

---
type: article
title: Password protection for Figma designs under NDA
description: Introducing an InVision alternative for securely sharing confidential designs with stakeholders in Figma.
datePublished: 2020-04-19T00:00:00.000Z
dateModified: 2020-04-19T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/password-protection-for-figma-designs-under-nda/
markdownUrl: https://www.hypermatic.com/articles/password-protection-for-figma-designs-under-nda.md
---

# Password protection for Figma designs under NDA

Working in agencies for the last decade, I've had lots of exposure to the dynamics of agency/client relationships, processes and workflows.

This very often includes working on confidential projects which sometimes require all the team members on the agency side to sign a NDA (non disclosure agreement) that prevents them from talking about or sharing any details of the project to anybody outside of the project, including friends, family or even other people within the agency.

Roughly 30% of all the work I've ever done inside of an agency has been done under an NDA, which means I wasn't able to add any of that work to my portfolio or talk about it with anybody else.

### Working on designs and digital products with Nike under NDA

At my last agency, I spent the majority of my time working on the Nike account; who I would personally consider in the top 5 brands in the world. As I mentioned already, this work was essentially always completed by my team under one massive NDA, because we were working on digital products and experiences that would often accompany a brand new top secret product launch only hitting stores up to 6 months in the future.

In order to work on these projects and collaborate with the digital team at Nike, we had to ensure that we adhered to a number of really strict security protocols. I won't go into all those here, because most aren't relevant, but needless to say that security and privacy are big concerns when dealing with any account that has private or confidential projects.

### Sharing designs under NDA

The human aspect of this is fairly straight forward; simply don't mention what you're working on to anybody not involved in the project. However, we would often be collaborating with not only Nike but a number of other agencies or teams in order to execute an overarching campaign.

In order to share design concepts with Nike, we would _always_ have to send some form of password protected link. Back in 2015 when we were still using Photoshop, this meant getting designs uploaded to InVision and using their password protection feature to send this link around. After switching to Sketch in 2016, this... still meant getting those designs uploaded to InVision and using their password protection feature. _Then_, after finally switching to Figma in early 2018, this now meant that... we were _still_ uploading our designs to InVision and using their password protection feature.

You're probably thinking (or shouting, as I basically was): "We're using Figma now, and they have an awesome 'share' feature built in! Why can't we just send clients an invite to make a Figma account and view the design directly in there?"

Right; so, why can't we?

### Why agencies (unfortunately) aren't ready to adopt Figma's share feature

The main problem for our agency/client relationship and adopting the built-in Figma sharing method was that sharing a Figma design meant sharing the _entire_ design with client, not just the "latest" or not just "frame 1 and 2". Inviting them to the Figma meant that they could see all the previous versions, all the work in progress, all the (for lack of a better term), _mess_.

To be clear, I was and _am_ all for this level of transparency with clients. This is probably crossing into another topic, but do I think the agency model of working away in the dark for weeks on end and doing a "grand reveal" only when everything is _perfect_ has proven to fail 100% of time. However, this is still the way that both agencies and clients still seem to prefer working, a strange, ironic mutual agreement not to collaborate on anything until everything is "done".

The joke I usually make with designers is when I'll ask how a design is going and they say it's 90% done, I'll usually reply by saying "Cool, that's good; so we're half way there".

Acknowledging this is important, because it explains a big part of why InVision seems to be so ingrained in the design workflow in agencies. It offers a really simple way for clients to review designs: "Click this link and enter a password".

### Don't make me (the client) think

In my experience, clients love having password protection over any other method of sharing digital work securely. Asking them to sign up for something like a Figma account just to look at the designs (while it seems like a relatively simple ask) is not something they will often feel comfortable with or happy about.

Working with clients who are digitally drowning in emails, meetings, chats and deadlines makes you realise that they truly don't have the head space to be worrying about "yet another" account or program they need to use.

Very often a client just needs to ensure that a design is on-brand and there aren't any words or images used that fall outside of the campaign. Getting "sign-off" is the common term for it. When you're working to _extremely_ tight deadlines, speed and time saving is everything, clients and agencies do not have the luxury of time to leisurely be manually creating preview links (on the agency side) or creating accounts (client side) just to look at some images and give a thumbs up or down.

If you can save your design team (and clients) these wasted hours every week, you're really at an advantage to give your own design team more breathing room to actually focus on actually _designing_ (not worrying about the additional burdensome process of uploading the designs to a preview link) and speed up approvals with clients.

### The elephant in the room: Designers do _not_ enjoy using InVision with Figma

Because we as an agency had become so reliant on InVision for sharing designs while we were still using Photoshop and Sketch, when we finally switched to Figma in early 2018, InVision naturally came along for the ride.

While clients and management might think InVision is okay, the designers were already wasting _hours_ of time getting designs from Sketch into InVision, because the official "Craft" plugin seemed to be broken half the time.

After switching to Figma, it seemed like the promise of all its amazing collaboration features would save their souls from this crazy InVision process, but unfortunately it was still considered the "best" option of the few InVision alternatives for Figma.

While we InVision accounts for our entire team, literally all we used InVision for was uploading these JPG images to a password protected preview page; and even _that_ only feature being used was wasting hours of time every week for our design team.

### Introducing an alternative to InVision for password protection in Figma

I hated seeing my design team getting frustrated with this process, and it had always been in the back of my mind that we could do better.

After leaving my agency at the end of 2019 to start Figmatic; a couple of months ago, I decided to started working on a brand new plugin called <a href="/crypto">Crypto</a> to start solving these problems and provide an InVision alternative.

Crypto allows you to share password protected Figma designs directly from your design without manually exporting frames and uploading them to other platforms like InVision. The first version has just been released, which solves a few of the issues I've just described, namely:

1. Remove the need for clients to create any accounts
2. Share simple URLs with password protection
3. Choose which specific frames to share (and not share)
4. Integrate _directly_ and seamlessly into Figma as a plugin
5. Designer curated versioning to document progress

With Crypto, you can click the frames you want to share, hit "Securely Share Designs" and moments later you'll have a unique and securely preview URL with an automatically generated password. The designs are stored as encrypted images on Google Cloud, and are automatically deleted after 30 days of not being accessed.

### There's more to be done

The first version of Crypto solves these initial problems that I was personally seeing daily at my previous agency, but there's still lots more to be done. For starters, static designs aren't the only thing being shared from Figma, there's also interactive prototypes. The next step will be adding support for Figma prototypes and running them entirely in the browser behind the same password protection and encryption the current version has already provided.

In the meantime, if any of these problems resonate with your own team, I would love to hear your feedback on the <a href="/crypto">Crypto</a> Figma plugin, so I help make your own workflows less painful.

---

---
type: tutorial
title: How to compare local website builds with Figma designs using Pixelay
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-04-17T00:00:00.000Z
dateModified: 2020-04-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-compare-local-website-builds-with-figma-designs-using-pixelay/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-compare-local-website-builds-with-figma-designs-using-pixelay.md
---

# How to compare local website builds with Figma designs using Pixelay

#### Video Transcript

Today, I'm going to be showing you how to compare your designs from Figma with a real website implementation that's based on those designs.

To do this we're going to be using a Figma plugin called Pixelay, and if you haven't already installed it, I'll show you how to do it. You can go to the top left and click on the Figma icon in the toolbar go down to community click on "plugins" and then in the search bar at the top if you just type in the word "pixelay", hit enter, and you'll see it pop right up as the the only result; as you can see here I've already got it installed, but if you haven't installed it yet, you can click on the "install" button on the right hand side and it'll change to look like mine where it says "installed".

Once you've gone ahead and done that, you can jump back to your Figma file. In this case, I'm using my friend's website design, which is in development, and we can actually compare what's in the Figma file with the development build. The development build is currently running locally in my browser, this is the development version that's in progress and I can click through it this is the real website. I basically want to compare this website build with the original Figma designs and see how how close they are.

Now that we've got Pixelay installed in the right-hand side of the menu, if you just right click anywhere on the screen, go to "plugins" and then go down to "Pixelay Development Comparison" and click on that. You'll see this is the initial screen that comes up; because I've used the Figma plugin before, I have a few things already selected, but if you're running it for the first time none of the frames will be selected.

To run you through what's happening, essentially all of the frames that you're seeing in the listing inside of the Pixelay Figma plugin is mirroring all the frames that we can see on the left hand side here. I'm in a page called "New Designs", and this "New Designs" page has all these frames in it; you can see that there's quite a few and they're all being mirrored in the Pixelay app plugin screen.

I've already put in my URL, but you can see here, if I actually remove the URL from the text box, we've got some text here that is asking for a development URL; then it's got an example of a URL that we could use, which is localhost port 8080. The way you can get that URL is by going to your web development build and clicking in the URL bar and seeing what that URL is; in my case it's actually localhost on port 3000. I'm going to copy that URL and I'm going to paste it into Pixelay, and you can see here it's populated it, and all of the frames down here have also been pre-populated with localhost 3000.

You'll also notice there's a few frames here that have been overridden with different URLs, and the reason is because Pixelay supports comparing multiple designs against multiple URLs at the exact same time. If you're only comparing one page and you just want to compare the home page or just one sub page against a couple of frames or a couple of sizes, a larger width and a shorter width for example, you can just put in this top one here, and by default everything you select will inherit that 3000 port.

In my case, I want to compare a couple at the same time, so what I can do is I can check and uncheck what I do and don't want; in this case I can uncheck the "writing" pages and I can just select the "home" page and the "home" page for mobile; those correlate to this page here, this frame here, and then we've got some mobile designs over here. In this case, I've got the mobile "about" page and the "home" page on mobile as well; I've got those four frames selected and I've got my URL for the local development environment put in there and then the overriding pages here, "/about" which correlates to this "about" page here; that's where I got that URL from.

Now that we've got all those ready, I can click on this "Compare Designs" button; it's going to compare those 4 frames we just selected; if I click on that, what that's doing now is it's actually going through those frames in Figma, getting all the image data and it's uploading it to a private storage bucket and creating a unique URL which is actually going load in these designs over the top of your development builds in the browser. We'll see what that looks like in just a moment once it's finished uploading.

Okay, it's telling us that the comparison page is now ready, and in order to compare our designs we can open the link in our browser. There's two ways of doing that; one would be to click on this little "copy" icon and that will copy the URL to my clipboard and then I can just paste it, but the easier way is to just click on this "open link" link here and that will open up a browser tab with the URL that's just been generated.

you can see here we're running on Pixelay on the Figmatic app domain, it's just loading in our designs now and this is essentially going to sync up the designs that we just had in Figma and our development build. The images are loaded and you can you can get a sense of what's happening already. We're currently in the Chrome web browser at the URL that was just generated, and if I scroll across you'll see here that the 4 frames we selected have all been loaded into the browser.

If you've already spotted it, you can see that there's these overlays that are that are visible; what's going on there is we've got this little toolbox in the bottom right hand corner and we've got this whole suite of overlays available to us, and tools available to us. By default Pixelay uses a mode called "transparent overlay", and what that does is it overlays the Figma designs that we just selected onto your live development build and lets you use this little slider here to actually move that up and down; you can change the opacity from 0 to 100. If it's at a hundred percent that means that we're looking at the Figma design and all the way down to zero percent reveals the live development build, and anything in the middle gets you some level between that lets you compare them.

That's one way of doing it; there's a few other modes as well. If you just want to do a really quick toggle between Figma and the development build, these two first options switch between those; this is the original Figma design mode this is the web development build mode. If you just want to toggle completely between those two we can do that and that all that will come through. That's roughly what those look like. The third mode is the one we just looked at, that's the opacity opacity mode.

The fourth mode is one that's called split screen; split screen will let you have the Figma design and the build up at the exact same time at at full opacity, but you can actually swipe between the two and that's a really cool way just to get a quick sense of what's different or what's the same. We can see here for example, this is obviously looking a bit off. There'll be some that are less off and some that are more off. This text look like it looks like it's completely wrong and this one's not looking too great either.

The other option we have is the fifth one; that's blended diff overlays, and this one essentially does a diff on the foreground and background overlay; you can see up here there's a really clear sense that things aren't aligned. If everything is looking perfect and aligned, you won't see any overlap and any of this jagged or offset text, it should just line up exactly if it's correct, but we can see here there's clearly some things that are going wrong. You can slide that up and down as well if you want to get a bit more of a sense of what's happening underneath the scenes, you can change that opacity in this mode as well.

The other mode that we have available to us is mode six, which is the draggable overlay. You can see here in these particular mockups, because we're using this pseudo mobile Chrome browser or Safari browser at the top, that's automatically going to throw our designs off as well. What we can do is we can reduce the overlay a little bit; we can see what's going on and if we need to we can re-adjust our designs just by clicking and dragging them and that'll let us move that that Chrome window up and out of the way, and give us a more accurate picture of what's going on. This can be really handy if that it's looking good but there's something that's pushing the the site down artificially, or you just want to line up the main thing and see what else is out of whack. The draggable overlay is a really good way to correct any mishaps in the browser that might be throwing off the original design positioning. That's a really cool way of doing that, and this will this will move them all at the same time, that's really handy if they've all got the same error if they've all got this bar at the top or something like that, you don't have to manually drag each single frame exactly, you can get it right once and then they'll all inherit it as well. That's a really cool way of just realigning it.

The last tool that we have in the toolbox is this pixel measurement device. We can see here that there's a few things that have gone wrong. For example, this text here is clearly sitting way too low; what we can do is, you can just click and drag and this will automatically give you on-screen pixel measurements. You can measure the distance between certain discrepancies, so we can see here that if we measure between these two elements that we've got roughly 70 pixels of extra margin that shouldn't be there that we can bring up. That's just a really quick way of getting the distance between two elementsl left or right, up or down, you can go either way and that's a really nice way of getting measurements to actually put back into your codebase.

You can see on the corners here as well we've got a ruler; that ruler is accurate to pixels. For example, if I measure between this and this, it's exactly 100 pixels. If you just need a really quick way of lining up measurements, you just overlay these two corners here and get a rough sense of how wide that is, or how tall something is if we're using the side one. That's pretty quick.

Tto show you practically how you can make changes on the fly, what I'm going to do is I'm going to split the screen up and open up my development build at the same time. If I just bring this down a bit and put them side by side. I'm only using one monitor, and this would be much easier with having two monitors set up, but that's okay. As I mentioned before, this copy here is clearly incorrect but because we're running a development build at port 3000, it's actually showing us what page each one is getting pulled in from up here; you can you can click on those links and that'll open it up in a new tab and show you exactly what URL is being used per preview.

In this case, we can see here the home preview is just purely on the home page. I have access to that in my code, this is my code over here, which is being run in the browser. I can see that the copy isn't right, it just says "designer in London", but it's really meant to say "experience and interaction designer in London". We've also got some italics here which aren't showing up in the design. To fix that, I can change it in my code base here. If I change that to "experience and interaction designer" and just save that, because we have live reload going in the background, you can see here it's immediately updated my build in the preview; I didn't even have to refresh the page, as soon as I hit "save", it's pushing that update into the to the browser window and I can immediately see the change here.

The other thing is that we don't want are these italics, so I'm going to remove those hit "save" again and you'll see here, it's reloaded the page. The reason it's taking a second to come in is because there's some entry animations going on, which is cool that you can see all those anyway. Here we can see that the line break should actually be after the word designer, so I'm adding that in. Okay, and I've capitalized "designer" even though it's not meant to be capitalized, so I'm just going to remove that capitalization, re-save that, and there we go. That's looking a little bit better, if we toggle between the two now we can see that the copy is correct. That's really cool that we can see all that being updated. The other thing is we've got this menu overlap here, that's another thing that we could tweak if we if we wanted to do that as well.

That's a super easy and fast way of doing this if you've got a development version running. I should point out that you could run this against live URLs too, and I can give you a really quick example of that if we jump back into Figma now. I'm just going to close the Pixelay plugin and restart it. Because we've already run the Figma plugin once, if you go over to the right-hand side you'll see this little "plugin" section in the column, and you'll see a little icon with the Pixelay icon; if you click on that, it'll re-run the Figma plugin without you having to right-click and find the plugin in the in the context menu.

Okay, this is refreshing the page, and just to give you a quick demo of how this can work against live pages as well, I'm just going to use the Figmatic website. If I do "hypermatic.com", and it doesn't have a port. Obviously this is a completely different website to the one that we have in the design, but this is more of just an example to show you how it can work on a live website as well. I've just replaced the "about" page with the "Figmatic about" page and the desktop version as well, and then for the home screen I've just left a blank because it's inheriting the Figmatic URL from up here. If I click on "Compare Designs" again, it's going to re-run what we just saw the very first time.

Just while this is loading, I wanted to mention one important caveat to to using live URLs as opposed to development/localhost URLs, which is really what Pixelay is built for. It's built for being able to make quick changes in development before the site's gone live, before you've sent it out to everybody on your team and telling them it's perfect, when there might be some things that are wrong with it; that's that's really what it was purpose-built for. However, if you have already pushed something live, this is a way that you can validate what you've actually put live to the designs as well.

Okay, the comparison page is ready, we can click on the link once again. I'll actually just show you how to copy paste it; if you want to do the copy/paste method, you just click on this little "copy" icon here, that'll copy it to my clipboard, then I just go back to Chrome, paste it in and hit "enter".

That's going to load my images now, it's just downloading those and syncing them up against the web URLs. This is going to look pretty funny, but it's just more of an example to show you what it does look like against a live site. Okay, we've got our "about" page on the Figmatic web site, and it's being overlaid against our Figma designs that we just just had a look at. You can see here clearly, they're two completely different designs, but the main thing to note is that up here we can click on that URL preview and it is in fact loading it from the live domain.

You can use this to compare live websites (obviously they would need to be relevant URLs for it to be useful), but you can use this as a method to compare with a live site as well. You're not going to be able to make those quick development changes the same way that you you can with a live development version running, but again,it can just be a nice way to revalidate a design that's already been shipped or published to your live web site, that can be quite quite handy.

I do have to say the important caveat is, the reason this is working against something like "hypermatic.com" is that "hypermatic.com" doesn't have any any code that's blocking it from being used in an external service. If I rerun this example for you to show it show you what I mean. I'll just rerun Pixelay now, and I'm just going to give you a really quick example of the edge case where this this isn't going to quite work. If I just do one page this time, and this time I'm not going to use my own website, I'm going to use "google.com", and I'm just going to compare one, just so you can see how it doesn't actually work.

The reason it's not going to work is because for security reasons and other reasons in general, a lot of websites will add protection on it to make sure that they can't be loaded into other web pages, and and that's not every web site, but certainly a lot of the bigger ones who have a lot more issues with people trying to pretend to be them or things like that. They'll tend to have some code on the server that'll block you from using a service like this against their website.

You can see here that the design has loaded in perfectly, but if we go to the development build, you can see that it's blank and we've got this little sad face here, and that means that the page couldn't be loaded because there's there's an error going on behind the scenes. If I "inspect" the page and go to "console", you'll see here that it refused to display Google because "The X-Frame option is set to same-origin"; if you if you see that error come up when you go to "inspect" or go to your dev tools. you'll know that you can't be loading it in from something like Google.

Having said that, this isn't an issue for any website that you own and and have control over. If you are doing this against a a development build locally, a "localhost" build like the one we were just doing here on our own local development environment, that works perfectly. and in fact that's really the way you you should be doing it most of the time. However, if you're uploading your builds to a staging URL or an internal preview URL, as long as you're not actively putting that code to block frames being loaded on cross-origin domains on to your own servers, then Pixelay is going to work perfectly fine for those development preview URLs, too.

Anyway, I just wanted to give you a little bit of a heads up on that in case you run into that error, but as long as you're sticking to local development and sticking to websites that you're building, you really shouldn't run into any issues at all.

I hope that's been a valuable Figma tutorial for you, if you've been wondering how you can get your developers to be more aligned with with the original design, or if you're a creative director or a lead designer who really doesn't want to spend all of their time figuring out what's what's not right in the design what's clearly not working and then drawing lines on a piece of paper to tell the development team what they need to fix; this is a really good way of getting the distance between design and development down to pretty much zero. You want the design from Figma and the development environment to be one and the same; you should be able to see them in tandem, and that's exactly the problem that Pixelay has been built to solve.

I think that's a great place to end. It if you have any questions, as always please just let me know; or any suggestions that you think that the plugin would be better with, I'm always happy to to listen to those suggestions and and get them added into the plugin. Thank you very much for watching, as always, and stay tuned for more Figma tutorials very soon.

---

---
type: tutorial
title: How to password protect Figma designs using Crypto
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-04-13T00:00:00.000Z
dateModified: 2020-04-13T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-password-protect-figma-designs-using-crypto/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-password-protect-figma-designs-using-crypto.md
---

# How to password protect Figma designs using Crypto

#### Video Transcript

Today, I'm going to be showing you how to password protect your designs in Figma using a Figma plugin called Crypto.

The first thing we want to do is install the Crypto Figma plugin. To install it, go to the Figma icon in the top toolbar, click on that, and then go down to "community", clicking on "plugins", go to the search bar and type the word "Crypto", and you'll see it pop right up. I've already got it installed on my computer, so if you haven't installed it yet, you'll be able to click on that little button there and it'll change the state to say "installed".

Now that we've got the Crypto Figma plugin installed, we can jump back to our Figma file. I'm using a freelance website design from one of my friends, and I basically want to share this design with other stakeholders securely; and I want to be able to do that by adding a password. The people I want to share it with might not actually have a Figma account and they might just want to look at it really quickly using a link and not have to sign up to Figma and create a whole account.

If you just right-click and go to "plugins" and go down to "Crypto Password Protection" and click on that, this will fire up the Figma plugin that we just installed. The first thing to note is that we haven't run this plugin before, so the first thing that's going to show up is a representation of all of our frames in our design. They all pop up to mirror the layers that you already have in your Figma design and so what this lets us do is we can select all the designs that we want to put into our password protected Figma preview link. In this case we can select as many as we want, but to give you a bit of a demo I'm just going to select the first frame which is the "projects" frame and I'm just going to click the "Securely Share Designs" button.

What this is doing is it's basically creating retina images of all of your designs that you've selected and it's creating an encrypted password protected link and securely uploading these images to very secure Google Cloud Storage.

Once it's finished uploading we're going to see a link and we're going to see a password pop up. Let's just give it a second, this will vary depending on how big your designs are but it's finished uploading now, so you can see that the secure link is now ready. What we can do is we can either copy this link here or click on it, so if we click on that link it'll open up in the browser or we can go down here and click on this little icon to copy the secure link and that will copy it to my clipboard. We can also do the same thing for the password field, so this is really handy for easily getting these details to share over email or Slack or any other method that you want to use to share these details with stakeholders. We can copy the password here, I usually click on that icon just to get the password and then I just jump up there and click on this link here, which will open it up in the browser immediately.

This is what the login screen looks like, this is the screen that you'll be presented with when you share this link or if you open that link yourself. We're just going to paste our password in that we just copied using CMD+V (or CTRL+V if you're using Windows) and now that we pasted that in we can click on the "login" button. If we click that, that's going to authenticate us... and we're logged in. You can see that the design we were just looking at in Figma has been securely uploaded to this password protected link. We can scroll up and down the entire page, and a couple things to note is we've got a timestamp, so that's going to show us how long ago the design was uploaded, this title here is getting pulled in from Figma, so that's the actual page name or the project title or document title. This little text down here where it says "projects", that's just getting pulled in from the name of your frame, so whatever you name the frame in Figma, that text is going to show up as down there.

This is the most basic example of using Crypto but if we jump back to Figma let's just close Crypto and we can rerun it. We can relaunch it from the sidebar over here because we've actually already opened it using the right-click menu before, so you can use this little shortcut over here to open it directly.

Okay, so this is the second time that we've run Crypto. You'll notice things look a little bit different; first of all it has remembered our selection from the last time and the buttons have changed or have been added, so instead of just saying "Securely Share Designs" we now have "Upload New Version" and "Update Last Uploaded Version". The primary button is to upload a new version and the secondary action is to update the last uploaded version. The last updated version will essentially update what we just uploaded the previous time we ran Crypto, so you can essentially override your design that you just uploaded whatever you just uploaded to that first version this will override that; the link will stay the same but the design contents will get updated. I'm actually going to do that now, just so you can see what it looks like. I've just added the "about" page and clicked the "Update Last Uploaded Version". So, what this is going to do is create retina images from the two frames that we just selected, securely upload them and encrypt them, but that link is not going to change; the link will stay the same and the designs will be updated. This process is very similar to what you might have used with a tool like InVision or something like that, but this is a really good InVision alternative because it works directly with Figma and it's a much lighter way of password protecting Figma designs; you don't have to opt-in to the whole InVision ecosystem just to use it with Figma; Crypto has been built from the ground up just to securely share password protected designs directly from Figma.

Almost there, it's just uploading the retina version of the about page. Once this is done the link will look exactly the same as the one that we just had before. You can copy the password again if you need to but we've got our link here and you'll be able to see in a second that we can compare this link and it'll look exactly the same as the one we've got before. I'm just going to jump back into the browser because we already have the page open where it's still authenticated; I can just refresh it and because we've updated that design refreshing it reloads that URL and you can see here that even though the URL is is the same the designs have been updated; it remains unchanged compared to before but there's a few things that are different since the last time we looked at it one is that the timestamp has been updated saying that we uploaded it two minutes ago and down here we have this brand new navigation bar which we didn't have before and it's got one out of two; it shows us that we've got projects and the about page now and we can click on those thumbnails as I've just done to navigate through the two pages that we've uploaded; that was a really easy way just to quickly update the last uploaded version of the design you might have already shared it with somebody and just wanted to quickly update it; yeah clicking on these arrows will also switch between the frames if you don't want to use the the little nav bar at the bottom and the keyboard left and right keys will also do that or you can click and drag as I've just done; as you can see we can just jump between those really really easily using the navigation bar will give you a really nice overview of all the frames you've added; if you've got a lot more you can get a really quick sense of every that's in the project and quickly jump between them without clicking left and right a hundred times.

Back in Figma, I just want to show you a couple more things. Let's relaunch Crypto from the sidebar, and now that we've done that experiment, I just want to explain a couple more things. The first one is this little icon up here; this little padlock which wasn't there the first time but it's there now, if we click on it we're going to get a little pop-up that looks similar to the confirmation message that you had after uploading. It just gives you an easy way to copy the password and copy the link without having to get to the end of the process every time. If you've forgotten the link or you just want to quickly copy it to send to a co-worker or a stakeholder, jump in here and click that button for password or the URL, and that's just a really quick way of jumping back to your preview.

Now that we've got those details we can jump back in to our main window here and these little icons that I'm looking at now they haven't been used before but they essentially allow you to drag and drop the reordering of the frames; if you want to have the the about mobile page added in; we've got three now but let's say that this new mobile design is much more important than the project's page for this new version we want to upload what I can do is drag that projects file down and this is going to actually push the projects page down to the bottom and we can elevate the mobile about page to the very top because that's what we want to highlight in the new version that we're gonna add; it's really easy to reorder these layers they're super easy and smooth just to reorder and you just click and drag click and hold the mouse to her and set that order; now we've set this order we're not going to click the "Update Last Uploaded Version", this time we're actually going to click this other button which is "Upload New version"; clicking on that now.

Just to explain what this does, it's essentially going to create a brand new version, as Crypto supports versioning instead of just having one link that gets over in every single time, which we can do (as we just saw) but I know from experience, working yet certain companies and design teams that you want to have multiple versions of the same file. The reason for that is if you make substantial changes you want to go back and easily swap between them to compare the differences, Crypto will actually create a brand new secondary URL which means that people who already had the last URL that we just generated they'll still be able to see that design without without any problems. We'll also be able to send this new link around which will link to the new version directly but both of those links will let you switch between the versions on the fly; you're essentially getting versioned links that are super helpful to deal with multiple stakeholders, that that comes in really handy.

I'm going to show you what that looks like in a second, the designs have finished uploading and you can see here that the URL is slightly different the the characters in the last URL extension was slightly different, this one has generated a brand new subpath in the URL. If I just copy that URL and jump back to our browser, and because I'm still authenticated, I can actually just paste that in over the top of our old URL here. I'll paste that in, jump to that; we're still authenticated and we can we can still see it. If we were to close that tab and reopen it in a new tab, we'd have to login again; and that's just a way to force security, so it doesn't make people logout manually, it'll just keep the authenticated session isolated to each tab which is really neat.

As you can see, it's slightly different with our new link in here. First of all, you can see that we've got version 2 added into our little heading bar and the timestamps have been updated as well. You can see this is a new version and the title is now a clickable title, because we've got this little arrow and little hand cursor; we can click on it switch between versions. Version 2 is the current one we're looking at, but we can go back to version 1 and that's going to load up the version that we were looking at a few minutes back; it's telling us that it was uploaded 9 minutes ago, which was the one that we just uploaded a minute ago, and we can immediately just switch back to version 2 with one click; you can see the mobile feature that we've got at the first frame, flick through the other reordered pages and we can see our entire mobile design as you'd expect, the larger design works perfectly, and down here now we can we can see we've got 3 items instead of the 2 from before, and and they've been reordered to the order that we set back in our Figma plugin in the Crypto plugin.

If you wanted to you could re update the order again. If we wanted to update that version that we just uploaded once again, because we made a mistake or something, and "projects" was actually meant to be at the top and we didn't realize, then you don't have to create a new link every time if you've already just shared that link before you realize you made a mistake, then you want to make a design update you don't have to give them a whole new link. You can just let them keep that link and click this "Update Last Uploaded Version" button and then that will basically update version 2 to reflect all those changes, but you can obviously use the "Upload New Version" button as well. That will give you a new version which will have version 3 in there, but for now we've just got the two versions.

That's essentially what using Crypto is like in Figma at the moment. I've shown you how to use it for creating static designs or static previews of frames but this interface will evolve in the next version of Crypto to support prototypes as well. Instead of swiping from left to right between frames, it's actually going to support clickable hotspots and transitions from Figma and create secure password-protected Figma prototypes that you'll be able to interact with directly in the web browser and share that around securely as a password protected link. For now, we're just supporting the static designs, very similar to what you would see in a standard InVision share link, but I think this is just a really lightweight great integrated alternative to using InVision with Figma. Figma doesn't really play nicely with InVision, so Crypto is a great option if you're looking for an InVision alternative or just want some simple password protection in Figma, because that just doesn't come with the native Figma experience.

I hope this has been a helpful tutorial for you if you've been trying to figure out how to password protect your Figma designs and get away from the InVision workflow or the standard Figma sharing workflow. I'm looking forward to doing the next tutorial with prototyping once that's ready to go, but until then, as always, thank you for watching.

---

---
type: tutorial
title: How to compress PDF files in Figma using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-04-12T00:00:00.000Z
dateModified: 2020-04-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-compress-pdf-files-in-figma-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-compress-pdf-files-in-figma-using-tiny-image.md
---

# How to compress PDF files in Figma using TinyImage

#### Video Transcript

Today, I'm going to be showing you how to export compressed PDF files directly from Figma.

To do this, we're going to be using the TinyImage plugin, so if you haven't already done so, you can go to the Figma icon up the top here; click on "Community"; click on "Plugins"; and then up the top here, if you just search for "TinyImage" and hit enter, you can see here I've already got it installed on my computer. If you don't have it installed, you'll be able to click on the "Install" button over here and then you'll be able to use the Figma plugin in your designs.

Now that we've got that installed, you can jump back over to your project. In my case, I'm going to be using this "Figma Design Principles" file to demonstrate how to export to PDF. The first thing to do is open up the Figma plugin that you've installed. If you right click anywhere, go to "Plugins" and then just jump down to "TinyImage Compressor" and click on that; that's going to run the TinyImage plugin.

The first thing that you'll notice is it's giving us this little message saying that none of the selected or visible layers contain any export settings. Export settings are something that is native to Figma, so if you click on any of your layers you'll see down here there's this little export block in the right hand side column. If you click on that "plus" symbol, you can see it's giving you the option to add these export settings, so you can choose from PNG, JPG, SVG and PDF. In this case, we're going to select PDF and we're going to do that on this layer. You'll notice that nothing has changed up here, so what we need to do is click this little "Refresh" icon in the TinyImage toolbar. If we click on that, you can see now it's just detected our new export setting on the layer, so we can see here this frame, the "Approachable" frame, it's got an export setting of PDF and the other two still don't; so I'm going to add PDF export settings to the other ones as well just so they're all consistent. Again, I'm just clicking on the frame, going over to export, adding a PDF setting. I'll go to this one I'll do the exact same thing, go down to export down here and change that to PDF, and then again I'm going to click on the "Refresh" button. It's only popping up with that one now because I've got that layer selected, if I deselect all of the layers and just click anywhere you'll see all three pop right up.

So, now we've got all three of our frames with PDF settings and so I guess the key thing is we want our PDFs to be much smaller than the the exports coming out of Figma. To do a little bit of a baseline, what I'm going to do is export these frames normally from Figma and then we can compare what the file size differences are. So, if you go up the top to file and then click on export you'll see the little Figma export module come up here, and I'm just going to export all three of these, so I'm just going to click export it's going to tell me to save it; so I'm just going to save it in a folder I've created called "Figma", and if I open that up you'll see here that I've got the three files that we just exported. So, I can see see those three and you'll notice the file sizes 6.1 megabtes, 6.3 megabytes and 876 kilobytes, so those are slightly too big for what we want.

So, because we're using TinyImage, what we can do is we can actually tell TinyImage what quality we want these PDFs to be saved at. There's three different settings for PDFs, there's the lower setting which is 72dpi, 150dpi is the sort of middle ground and then the maximum setting is 300dpi, which is kind of print quality dpi; so just as a bit of a test we'll keep it at 300dpi, which is the highest. We've got all three frames selected and we can actually change that if we want to but in this case I want all three so once you've selected all three pick two the quality you can just click on this "Compress" button up here, and what that's doing now is it's analyzing those 3 PDF files, applying some compression and then it'll let us save them save them out.

You can see here it's just automatically given us a save prompt, it's named the zip file that it's going to save with the current document title plus the date and time so I'm just going to leave that for now and click Save you can change that if you want and just before I open that you can see here it's actually told us how much it's saved PDF export so this one's gone down from 6 kilobytes down to 421 kilobytes or 6 megabytes sound 421 kilobytes this one's gone from 846 kilobytes to 176 kilobytes and this one's down from 5.83 megabytes to 356 megabytes so overall we've actually saved 93% compared to the original file sizes which is roughly 12 megabytes and saved and that's that's on the highest setting so to take a look at our exports from TinyImage the folder that I just saved them out at is here so all I have to do is double click on the zip file and that's just going to unzip them into a folder for me and you can see here the file names are exactly as you'd expect and I can open those up no problem and we've got our PDF files compressed so yeah the file size difference is is massive even at the highest quality as we saw a second ago you know six megabytes for the other ones and those have come down to 365 kilobytes 400-year so we've saved literally 90% with with no quality difference at all, which is great.

You might even think that these these sizes are too big, so what we can do is we can rerun TinyImage and because we've already opened it using the context menu the right-click menu, TinyImage automatically adds itself as a shortcut into the Figma plugin sidebar here, so what you'll have to do is just click on the TinyImage logo. You'll notice I've got two because one is a development version and one is the production version that you'll be looking at so just click on the little milk bottle icon and click on TinyImage and that will rerun the plugin for you without having to go into the plugins menu.

This time around, let's try lowering the quality down to 150 dpi and let's see what that comes out at, actually, let's just go down all the way down to 72dpi and click
"Compress". So, you can see it's set to 72dpi I'm going to click "Compress", so once again it's just compressing those PDFs, and you can see here once I save it, I'll just save that again, we can see here at this time at 72dpi it's actually saved us 98% on these to an overall saving of 97%, which is which is massive.

If I open that up, we can see the the only difference that I can see is a slightly lower image quality, but all of the vectors, all of the text is looking super sharp as you'd expect. That's a larger view and if I zoom in, that's totally sharp. If I like those results, then I'll probably keep this lower sized version, it's really good for if you have to email something the lower file size can often be really ideal and if you're doing something more that's more detailed that you need higher quality images for then you know 150dpi or 300dpi is probably the way to go.

This is the way to actually export individual PDFs, but there's definitely going to be a time when you want to export all three of these in one PDF, so Figma does offer this feature; again, if you go to the top menu and click on file you'll see down here there's a there's a feature that they offer called export frames to PDF so if I click on that it'll give me the option to save this so I'm just gonna save that into the the folder so Figma has created this PDF file for me which has the 3 frames however it's 13 megabytes which 13 megabytes is way too big for my use cases where I probably want to send this over email or send it and in a much smaller file size.

TinyImage supports this as well, so if we re-run the Figma plugin just by clicking on the sidebar over here so you'll notice that we actually have three buttons up here and the one on the left is titled all frames to single PDF which does exactly what you'd expect it replicates the same native functionalities Figma but it adds a layer of compression into the mix so we can actually export immerged single PDF from these frames but we can control the size of it a little bit more so in this case I'm going to try the the middle option which is 150 dpi, and what that's going to do is going to export all of the frames in your sidebar, not necessarily what's down here, it's going to just look at the sidebar on the left here and every top-level frame it's going to use that as a page so each frame becomes a page in the PDF file that we're going to save.

As you can see, I've changed the quality to the middle over here so now it's set to 150 dpi, so if I just click on this this all frames to single PDF file so it's analyzing those frames it's merging them into a single PDF, and it's already done. It's just asked me to save the file so just going to hit save and already from the the notification we can see that it's taken that 12.68 megabyte file and it's actually brought it down to 436 kilobytes. so we've saved 97% compared to what we just exported directly from Figma natively.

If I open that up, this is our compressed file, as before, there's no discernible difference in quality, so for 97% savings that's a really that's a really huge difference compared to what we can see right here. I'll just get rid of these ones so we can you can see it a little bit better. So, our original one from Figma was 13.3 megabytes and a new one is 447 kilobytes, so that's a huge saving and if we wanted that even lower, I could bring that down to 72 dpi but I personally use 150 dpi for most of my exports because it serves as a really good balance between quality and file size optimisation.

That's roughly what it looks like to merge those those files and if you want to re-order them, the way you can go about doing that is just by reordering the layers in the left sidebar here. Essentially whatever's at the top, so in this case we had "professional", "approachable" and "thoughtful" if I want approachable to actually be the first one all I have to do is drag click and drag this frame up to the very top to be there and then if I want approachable to be last I'll just click and drag that down to the very bottom and then if I rerun TinyImage, TinyImage is going to look at this order of the frames on the left here and it'll take that into account. So, let's actually just make this 72 dpi to see what that comes out as as well, so it's merging these three frames in the order that we just were just specified. So, if I click "save" and open that up, you can see before that 150 dpi version was 447 kilobytes and the 72 dpi is brought down to 390 kilobytes. This doesn't have too many photos in it so the differences in size aren't going to be as noticeable, but we'll cover that in a second. If I double click that you can see here it's it's exported the file as you'd expect and you can see the difference here is the order so "professional" is now last as we specified in the frames "thoughtful" is in the middle and "approachable" is last. That's compared to our original order which was "professional", "approachable" and "thoughtful" so that's how you reorder the frames or the pages in a PDF, you just change it in the layers panel on the frames panel on the left and TinyImage will do the rest for you, you don't have to manually do any weird stuff after you've exported the file at all, I'll do it by itself.

That's a an example of what it looks like, however I thought it'd be worth showing you what it can do for photos or images as well. So, if we click out of this I'm just going to jump over to my other project I've got open which is some some photos of Japan from Unsplash so again we can see here I've already run the plugin before, so I'm going to click on the TinyImage plugin in the right-hand side and open that back up okay so you can see here we've got quite a lot of export settings already in the mix so some of the export settings are JPEGs so we could actually export those JPEGs and then all of the frames also have a PDF export on them so the PDF here PDF here PDF here PDF here so that is worth noting you can export multiple formats in one go it doesn't always have to be just one file format so I can show you what that looks like if you like.

In this case, I'm just going to set the the quality down, so let's do 70 maybe, as I said I've already got PDF settings on on all these frames which you can see over here. I've got PDF set on there, so what I'm going to do is, I'm just going to export the PDF and JPEG version of each of these photos so I've set the quality to 70 and I'm just going to click "Compress". This is analyzing all the photos, compressing them, the JPEGs and the PDFs kind of in the same batch, you can interchange these formats however you like for the individual kind of exports and already we can see that the savings are really good. Overall, we've just saved 94% or 40 megabytes, so 40 megabytes is is massive regardless of if you're using this on a website or if you're emailing something, having that that amount of image data saved is is really cool.

I'm just going to open up this zip file that we saved and you can see here we've got the two formats all saved out so we've got the frames exported to PDFs, so we can see those and then we've also got our JPEGs that we exported to so that's all there as you'd expect. We can do exactly the same thing if we want to export these PDFs as a single PDF compressed PDF and we can do that by maybe it's maybe it's worth also doing the experiment with exporting the Figma ones natively.

If I export the frames to PDF from Figma natively so file export frames to PDF I'm just going to click that and we'll just get a bit of a baseline of what the original file size was compared to our compressed one so from Figma just these four images has created a merged PDF of 36 megabytes so that's that's without any compression it's just coming directly from Figma so I think TinyImage will be able to do much better than that so if we rerun the TinyImage Figma plugin as we did before and in this case we're not going to click the compress button as we did in the last project we're going to use this all frames to single PDF setting up here and again I think 150 dpi is always a nice medium setting so I'm just going to click on that and again that's going to take this order from the left hand side all the frames in that order so we've got frame to frame for frame 3 and frame run so that'll be the March it'll be Mount Fuji it'll be the Kyoto photo and this shopfront photo that'll be the order so if we click on all frames to single PDF that's going to look at our frames and merge them into a single file for us.

So, we'll just save that, and it's given us the report that we've saved 94%. The original PDF merge PDF file size was 34.34 megabytes and TinyImage has brought that down to under 2 megabytes (1.95 megabytes) so we've actually saved 94% there. If we jump back into our PDF file, this is the one that we just exported so that's the order that we expected the images look great so that's at 150 dpi they're still looking very crisp and you know we that really says it all right there we can see we've got 36 megabytes with the with the original PDF export from Figma and then the TinyImage compressed PDF version from Figma has come all the way down to 2 megabytes so again you know there's just no comparison between these these two exports.

That's what it looks like; and that's everything you need to know about exporting compressed PDFs directly from Figma. This was a hugely requested feature, so I'm really glad that it was able to be supported in the TinyImage plugin, adding PDF compression for Figma is something that's that's come up quite a lot in the community and and also from previous users of TinyImage; they were they were wondering if PDF compression in Figma was ever going to be supported and and now it's finally here. As you can see it's it's working really well, and I think whether you're actually exporting documents for presentations client presentations internal documentation maybe or even just kind of stitching together some some renders or some mock-ups into a single PDF or individual PDFs, TinyImage is a much better alternative to the native Figma exports; those file sizes are just way too big to kind of be shareable and practical so that was really the problem that that I wanted to solve with with TinyImage.

If you find it useful, let me know! If you have any other requests for image compression in Figma or different features, definitely let me know, because I'm constantly making updates and improvements to the Figma plugin to make it even better for everyone.

As always, thank you for watching; and I hope that I can do more of these in the short term, and keep getting these Figma tutorials out for anyone who's interested in this kind of more advanced usage of Figma when it comes to image compression and other kinds of design automation. Until the next time, thank you for watching and we'll see you soon!

---

---
type: tutorial
title: How to create animated GIF files in Figma using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-04-12T00:00:00.000Z
dateModified: 2020-04-12T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-create-animated-gif-files-in-figma-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-create-animated-gif-files-in-figma-using-tiny-image.md
---

# How to create animated GIF files in Figma using TinyImage

#### Video Transcript

Today, we're going to be looking at how to create and export animated GIFs from Figma using the TinyImage Figma plugin. This functionality is not built into Figma, so we're going to use a plugin called TinyImage to make this happen for us.

If you haven't already installed it, you can go to the Figma icon in the top menu bar and go down to "community"; then click on "plugins"; then what you want to do is search for "tinyimage" up in the search bar up hereand just hit the "enter" key and you'll see it pop right up. This is the TinyImage compressor plugin, I already have it installed but if you don't have it installed, you'll be able to click the "install" button over here on the right, and once you've clicked "install: it'll look like that, and it'll say that it's installed and then you're good to go back to your Figma file.

Back in our Figma file, we've just got a few very simple layers here so we've got four image layers and three frames and three SVG frames. The first thing we're going to do is run the Figma plugin, so you can right-click anywhere, go down to "plugins" and then go to "TinyImage Compressor" and left click on that. As soon as it loads, you should see some images. If you don't see any images, it means that you haven't added any image exports onto your layers. If I click on any of my layers here and then go over to the right hand side, you'll see under the "export settings" that I've added a few export settings already, so if you haven't done that, you can click on your layers that you want to include into this animated GIF that we're going to make, and just make sure they've got at least one export setting on those layers; JPG is fine, PNG is fine, or SVG - anything you want to add really, just to make them show up in this list here.

I've already done this, and you can see here I've got a bunch of exports that I can that I can see and use. What I'm going to do, is I'm going to select a few of these photos; I'm going to select four, and it doesn't really matter which export setting you select, all that matters is these are the frames that we're going to add into our animated GIF. Once you've selected the images that you want to create an animated GIF from, you can go up here, and instead of clicking the normal "Compress" button that you might use quite a lot for other formats, we're going to use this middle button called "Create GIF". You can you can set the quality beforehand if you want to do that, so I'm just going to bump this up to 95. Once you're happy with that you can click on this "Create GIF" button and what that's going to do is it's going to take the selected images that you've just specified in the select panel before we clicked the button, and it's going to add those into this little preview here. This preview is just looking through the four frames that we've already selected before clicking the button and it's giving us a real-time preview of that what that will look like if we were to export this to an animated GIF.

Let's dive into a few of the settings that we have some control over. The first one would be the "time per frame"; this is a slider that we can move up and down at the moment it's set on 0.5 seconds, which means that each of your four frames are going to show for half a second before it moves on to the next one. If we want to increase that and slow it down a little bit, we can set the time per frame to be something more like 1 second. If you want to see that change reflected you can click on this "Update Preview" button down here, and what that's going to do is just refresh that preview with our settings that we've just changed. Now you can see it has slowed down the animation instead of going and from 0.5 seconds per frame, we're now doing 1 second per frame; so every 1 second it's going to switch through these four, and you can see here it's set to playback as "infinite" which means that that will just keep going on forever, it's never going to stop. If we did want to change that, we can uncheck this "infinite" check box and we now have access to this input number here. We can actually change this to say loop it one time, if I set it to "1" and then click "Update Preview", let's just let it play through. That's done one play through, and you can see it stopped on our last frame here; so it's gone through these stops. We can change that we can make it make it play through 3 times, so that's basically going through these four frames, it's going to do that, and it's going to repeat it 3 times, so we can change that.

The other thing that we can do is (we'll get to this in a second), but at the moment it's being set to have a transparent background, so that's why we can see this little gap at the top and the bottom here, because we've got the size set to be square; it's set to 512x512, and that means that we've got this little bit of space up here, and that's why the transparency is showing through. There's a couple of things we can do here, we can either change the image fit. At the moment, it's set to "contain", which means that it's actually not going to crop any of the image data at all, it's just going to center position the image and shrink it down far enough so that none of the image gets cut, and anything that it doesn't fill up it's just going to be left kind of blank. We can actually change that, and make it go to "cover"; and if we change it to "cover", you'll see that it'll still be square, but the images will be automatically made to fit. That's that's how it works, and you can see some artifacts popping up here; the reason for that is, we do not need transparency for this particular GIF, so I'm going to turn transparency off and update that; now you can see those artifacts have disappeared, so it's just left with the images without any transparency.

If we do switch it back to contain for a moment, I'm just going to show you one more thing you can do. Because we've turned the transparency off, you can see that the the gaps here which are showing because we've changed it back to "contain", they're set to white, and that's because down here we're setting the background color to be white for anything that shows through. If we wanted to change that, we can actually do that by just changing the HEX value down here ,so if I change it to black and update the preview, those gaps there are now going to be black. You can change that to any HEX value that you like, and anything that's showing through because you've set it to contain will automatically be made to be the same color as the the preference you've set down here.

We can also change the image size as well, so if we did want to kind of shrink down that height a little bit, we can change that from 500 down to 400, and you'll see it's shrunk that down here. If we go down further and make it 300, you can see what's happened here is now that the width is actually greater than the the height, you've got bars on the side now, so that's what it does, because we've got it set to "contain", it's just going to keep containing the image based on whatever dimensions you specifified. If we want to change that again to "cover", we can do that, and this time it fills up those gaps.

The other thing that we haven't looked at yet is image dithering; "dithering" is essentially a way to smooth out the colors inside of a GIF. By default, it's set to "None", but we have a bunch of options here which we can change to make the dithering a bit different. This is going to be a little bit of trial and error, as certain dithering works better for different types of images. You can really just play around with it and see which one makes the most sense for the images that you're using; in this case I'm going to use the "Atkinson" dithering and just save that.

When you're happy with this preview, you can go ahead and click on this "Export to GIF" button in the bottom right down here. If I click on that, it's going to grab those frames and turn them into an animated GIF. If I save this and open it, you can see here that it's exported it exactly the way that we we saw it in the preview; so we've got these four frames looping at one frame per second, the dimensions are 512 by 300, and because it's being set to "cover", there's no gaps whatsoever and and the dithering option that we selected looks really nice, it's very smooth, we can't see any artifacts, can't see any nasty pixel blurring, and overall it's just looking really good. Even at quality 95, it's actually saved out at a reasonable file size, we've got 488 kilobytes for this animated GIF, and I'd say it's it's actually turned out quite well.

If we want to create another one, I'm going to open up TinyImage once more; and because we've already run the Figma plugin, if you want to access it really quickly, you can get to it from this shortcut in the right-hand column. Underneath the "plugin" heading, you'll see "TinyImage" pop-up and it's a little milk bottle icon. The reason I have two is because one of them is my development version, but your one will look like this. Okay, in this case I'm going to do something a little bit different, and instead of selecting these photos, I'm going to select these little SVGs, all these transparent ones. If I select these, I'll just do three of them, I'll just bump the quality up for the sake of it, and I'm going click on "Create GIF" one more time. This is loading up a new preview, and again it's inheriting the settings that we saved before; so you can see here we've got the "cover" setting selected, the image dithering from before is selected, the background color we selected and the timings that we selected are all in there, and the playback count. The size is updated every time, as it basically takes the dimensions of the first layer that you've selected and it'll pre-populate those inputs down here, and that's just to make it easier to have a bit of a baseline size so you don't have to click back and forth and figure out roughly what those image dimensions are going to be. That's how it sets it up.

There's a few things we can do here, because we're using layers that have no background or have transparent backgrounds, it's immediately filling in that transparency area with our background color down here. Again, we can change that if we wanted to, make it a white background; we just changed the HEX value and now it's a white background; so that would be perfect if you're using this GIF on a website or something that already has a white background and you do will get a great result there. I'm actually going to going to do that now, if I just update this a little bit, I'll set it to playback "infinite" and if I "Export to GIF"; we've got that setup now. If I open that up, you can see there it's just it's really crisp, there's no artifacts, no blurring, no anything at all; and that one's come out at 89 kilobytes. Bear in mind, this is at 100 percent quality, so even at 100 percent, the file sizes are very reasonable.

I'm going to get out of that and relaunch TinyImage again, because I'm going to show you how to do a transparent export. Once again, we'll keep our 3 layers selected and click "Create GIF". This time, instead of having the white background, let's say for some reason the background on my website might need transparency, so I'm going to make the image transparent. I'm going to update the preview, and what you'll notice is the background is gone, but there's these weird artifacts around the image; the reason for that is because we still have the image dithering set to this "Atkinson" setting. That setting is really good for if we were using photos like in the last example, they looked really smooth with that particular setting, but in this case we don't want to be doing that, as there's nothing really to blend into. In this case, I'm actually going to turn dithering off and I'm going to refresh the preview and you'll see now that blac outline and artifact has completely disappeared, and we're left with just the smooth image outlines in the transparent GIF, and I'm fairly happy with that. We can actually change the size down here if we'd like, so we can make this 1000x1000 and I can set that to "contain". I think they're all square anyway, but that's all good; in this case, I'm going to make this one a little bit faster and see what that looks like. Okay, I'm quite happy with this, so we've got a fairly fast animation happening, it's going on forever (set to "infinite"), I've got a transparent background set at 1000x1000 pixels with no image dithering because that's working really well for the transparency; and we've set it to "contain", so we know that all the pixels are going to be added to the square no matter what.

Once again, I'm just going to click "Export to GIF", and it's going to merge those for me into an animated GIF. It may take a little bit longer because it's a bit bigger 1000x1000 pixels, but still pretty quick. I'm just going to save that and open that up; and there we go so, you can see it saved it out at 1000x1000. Because these are vector layers the quality is really sharp, really nice and if we would just do this in a retina fashion on our website, we could actually shrink that down to 500x500, so that would that would basically make it an @2x kind of animated GIF and that just looks incredibly sharp when you when you kind of have the dimensions as well. That's a really good trick if you want extra sharp animated GIFs, you can export them at double the size that you actually want to use them at, and then have that size on your website using CSS and you'll get really crisp GIFs and GIF animations. That's actually come out really small, too. The last one that we did we had the white background and saved out at 500x500, but the transparent version at 1000x1000 has actually come out much smaller, so it's quite interesting to note as well if you are wondering why those two have come out differently, it's because of the transparency.

So, that's that's a pretty good overview of how to export compressed animated GIFs from Figma using TinyImage. You can actually play around with this slider a little bit more; you're not going to see huge amounts of differences between these different qualities for GIFs in particular, but you will get a little bit of difference. If you do want to play around with file sizes, I would encourage you just to mess about with some of these maybe at the extremes to get a bit of an idea of what those size difference is going to be, but for the most part you can you can still get away with fairly high settings and and have fairly small file sizes as well.

That's a fairly comprehensive overview of all the different settings you can use, and the different ways you can go about creating GIFs directly from Figma or compressing GIFs using TinyImage. Thank you again for watching; if you've been following along with these Figma tutorials, I hope they've been helpful. If you have any requests or questions please just reach out to me directly, I'm always trying to make these plugins (like this GIF Figma plugin) better, and feedback from people like you definitely makes it improve a lot faster when I know what kind of things and workflow issues that people are having. Until next time, I hope that you've enjoyed the video and we'll see you soon!

---

---
type: article
title: Building a startup (in a pandemic)
description: Short summary of the lead up to starting my own company and the last 3 months since I founded Figmatic.
datePublished: 2020-04-04T00:00:00.000Z
dateModified: 2020-04-04T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/building-a-startup-in-a-pandemic/
markdownUrl: https://www.hypermatic.com/articles/building-a-startup-in-a-pandemic.md
---

# Building a startup (in a pandemic)

This article is titled "building a startup", but I've added "in a pandemic" in brackets based on the few weeks with COVID-19.

For the last decade, I worked in digital agencies as both a designer and a developer. I started out as a designer/developer and then I doubled down on development once I realized I was actually spending more time designing things in code and inside the browser; so that that's what led to that change. However, for the last three months I've been building a startup called Figmatic full time, which builds premium Figma plugins that are designed to turn designers into superhumans.

### First things's first.

The first things to note from these first few months are all the cool things that come along with that:

1. No managers
2. No meetings
3. No "Agile"

Somewhat magically, just _removing_ these three things has made work fun and productive once again, which has been really neat.

### Let's rewind 12 months.

Before I get too ahead of myself, I'm going to rewind by 12 months really briefly. Twelve months ago, I discovered "life after the red pill". I co-founded and co-ran the DesignOps Melbourne meetup for the first year of its existence, after which I decided to leave and focus on other things; but there was certainly a void left there after I after I walked away. This opened me up to a 4-6 week period of shutting myself off from everybody, being very introspective and just thinking about what I wanted to do next. The question that I have come back to very often over the last 5-6 years is from a book called "Zero to One", and the question is:

> "What important truth do very few people agree with you on?"

I have a few answers to this question, but the one I'm going to touch on at the moment is that

> "I believe that we've been living through design and development workflow stagnation for roughly the last 20 years"

### The great (20+ year) stagnation.

I'll give a little bit of context around my thinking on this and hopefully not go too deep with it, but I think you'll start to see where I'm coming from at least, and by definition, you should probably disagree with me on this important truth that I believe.

First of all, it wouldn't be a real article unless I quoted something from "The Fountainhead":

> "The the hardest thing to explain is the glaringly evident which everybody has decided not to see"

This is exactly the way my mind feels when I'm talking about this topic because it just seems like everyone's got blinders on, and no one really wants to think about the hard questions, or really look at where we are now compared to where we've come from.

To start off from 20 years ago, this is a quote taken from an article written by John Allsop (the founder of Web Directions) called the "The Dao of Web Design"; which was published almost exactly 20 years ago to the day. John writes:

> "... It is time to move on, to embrace the web as its own medium. It’s time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature."

John wrote this _20 years ago_, and if you told me it was written last week, I would I would believe you and think that it's a brand new article; and that just signals that we really haven't got past this "print" idea.

Yet 10 years later (and 10 years ago; almost 10 years ago to the day), the famous "Responsive Web Design" article came out, where Ethan Marcotte wrote:

> "This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience."

That was from 10 years ago.

### “Tells” that things have gone wrong.

So, we had these quotes from twenty years ago and ten years ago, but _today_, 10 years since the "Responsive Web Design" article, we still use the term "responsive web design", instead of it just becoming absorbed into the the term "web design". To me, this makes it seem like we still talk about it as if it were both _new_ and _optional_; neither of which are true.

Also, somewhat hypocritically, at the exact same time, we use these other terms for arbitrary _fixed_ sizes (which aren't responsive) like "desktop", "tablet" and "mobile". If you've looked in a design file within the last year, you've probably seen layers and frames named with these terms.

The language that we use around design and development is also very telling - we've got term like "handing off" designs, "slicing up" designs, "inspecting" designs and "bridging the gap" between design and development - and these are all kind of tells that that something is a little bit off.

If we keep going down the rabbit hole a little bit, you've got terms like "Design Thinking", which in and of itself is fine, but these terms kind of distract us from the need to actually think about design at all.

Then you've got the sheer speed of new articles and tweets that we see published each day, which also fool us into believing the propaganda that things are "just moving so quickly that we can't really even keep up with all the radical progress" or "it's so hard to even keep up to date" and the idea that things are just progressing at this rapid rate that our heads can barely stay on straight.

Not having a go at this specific trend, but new UI trends like "Neomorphism" give the _illusion_ that there is a new future on the horizon, simply by covering our dated present with a fresh coat of paint.

At this stage, many people still believe that a "design system" essentially just means a well organised Sketch file (which is by definition always outdated) containing pictures that attempts to emulate pieces of a website.

The reality is that our designs are made with tools that have no relationship at all to the medium that they're actually being used in by real people.

With all that aside, perhaps the _most_ telling fact demonstrating the complete breakdown of our design and development workflow is that every design portfolio that I looked at while I was at my last agency never included the links of the websites that they actually designed, and that means that something has _really_ gone wrong. If nobody wants to show the URL of the the thing that they've actually designed then something has really gone wrong along the way. That's sort of like a "tell" that we've _really_ messed up.

### The hijacking of the term “DesignOps”.

If you've ever attended a DesignOps Melbourne meetup before, you'll know that the tagline and the mission of it is that "We believe that the distance between design and development should be zero". With Figmatic, I take a slightly different direction on this, which I sum up by saying:

> “I believe that anything that exists inside of a screen design tool is always more valuable outside of it.”

You could take the next step and and then say:

> “Production code and data are actually the source of truth for your designs”

Never in history will a user of your website be looking inside of your Sketch file or your your Photoshop document; there's just no relationship between the customer.

This is really what DesignOps was meant to be. The the term kind of got hijacked along the way, if you if you search for "what is DesignOps?" there's a lot of propaganda out there how it's more about "management" and overseeing design and development teams to make sure that the information flow and the "handoff" processes are all going according to plan. However, in the DesignOps future that that Ch'an and I originally defined this role as, that role description is irrelevant because that job is actually removed completely when the distance between design and development is zero; there is no longer anything _to_ manage. So, that role would become non-existent in a true DesignOps future, and in fact, the commonly accepted definition is actually the opposite of what we defined it to be originally.

### The tipping point.

I'm going to briefly touch on the tipping point for me personally. So, a few months after I finished co-running DesignOps, at work in my agency, I was working on a design system for the better part of a year for a big e-commerce website, and I had done the entire thing in code. I had built everything in code: all the low-level stuff, right up to the full views and states and everything.

I held on to this approach for that whole time, I pushed back against any attempts to derail it for many months. People were trying to start hijacking the ideas and all that sort of stuff, and I got to about a month before the project ended and for some reason we had to send the client static JPGs, and I said: "That's ridiculous we've got this live link here, where they can look at it on any device and see the real thing."

The response was "no... we just _have to_ do it this way..." So, long story shor, one afternoon I spent four hours screenshotting every page in every state in Chrome and and put these JPGs into an InVision link to share with the client.

We went in there the next week to meet with them and present these designs, and they said: "Alright, these are looking really good, but we would love to get the Sketch files so we can 'hand-off' the designs to our developers in the Philippines and get them to build it".

I said: "Oh, no, you don't understand; yes, these are _these are_ JPGs, but I actually took them as screenshots from the HTML that I've already built". And the client just brushes it off and says "Yeah... it's just that we need the Sketch files..."

So, at this point, I was like: "Oh my god.", and it just turned into a big mess. Again, long story short: tragically, none of the HTML or code I spent the better part of a year working on was used. Thankfully, as part of my design system setup, I had already set up a script to generate Sketch files directly from the real codebase (HTML/CSS), so I rendered all the components out to sketch files and we ended up just sending them that.

This was really the tipping point for me, where I realized I had lost the DesignOps war in my own workplace.

### Taking the leap.

You can probably tell by now that I believe it's time to really start getting back to the future so the question that I asked myself was again from the book “Zero to One”:

> “How can you achieve your 10 you plan in the next six months?”

I like these kinds of questions because they force you to reframe it in a completely different way than you would usually answer it.

What do I want to be doing? I want to be building design automation tools full-time, and be profitable doing it.

My answer to that question was: I really needed to put some skin in the game; quit my job and self on my own company. This was the only answer I could I could come up with to at least have a shot of getting to where I wanted to be.

In reality, that looks like going from a lead developer salary back down to zero.

I did a few things to kind of counterbalance this after I decided to do this:

- I gave four months notice at work, because I wanted to have a really smooth transition between me and my replacement and sort of leave the agency in a better place than I found it, but also to build up some more savings, so I saved up for those four months.

- I moved apartment to a less expensive one.

- I sold my car, because I realized I wouldn't be leaving the house for the foreseeable future. Anyone who has been quarantined for COVID-19 for the last two weeks, I've been self quarantined for the last three months (of my own choice).

- I also sold my a lot of my childhood Nintendo 64 and Super Nintendo games, and my Nikes.

- Finally, just cut down expenses everywhere else.

### Having a plan is better than no plan at all.

I've never started a company before, but I do know that having any plan is probably better than having no plan at all. Here's a rough outline of what I kind of planned out, the five things I thought I was going to do:

1. Do not compete.
2. Charge from day one.
3. Ship fast and often.
4. Talk to customers.
5. Do things that don't scale.

All this this advice is probably common, but I decided to _actually_ do them.

### Going from zero to one

Going from zero to one really just means that I'm not going to be building the tenth "Lorem ipsum generator" plugin or the fifth "Spellchecker" plugin; I only want to build things that currently don't exist that would be valuable to exist in the future. I've built 5 plugins so far:

1. Favvy; which exports production-ready favicon packages for progressive web apps and websites from Figma.
2. TinyImage; which handles image compression for JPG, PNG, SVG, WebP, PDF and GIFs.
3. Bannerify; enables you to animate and export production-ready banners directly from Figma to HTML.
4. Pixelay; this lets you overlay your Figma designs on top of your real development build.
5. Crypto; provides secure password protection for sharing designs from Figma

### Plans to make C.R.E.A.M

You can validate _real_ value quickly by charging for products. It's common advice to say "release everything for free" to build up "recognition" and you can always charge later, but I decided to do the opposite and charge from day one. Because I'm 100% bootstrapped and not venture backed, I _don't_ have really long periods to remain unprofitable an focus purely on "growth". I've found that charging from the start is actually a great way of figuring out how valuable something I'm building _really_ is.

### Move fast ~~and break things~~ with stable infrastructure

The other thing I really wanted to do was not fall into the trap of just building things for months on end, hiding away in the corner not showing anybody anything, not knowing if anyone _actually_ wants the thing I think is going solve a problem; I just get it out there while I'm still embarrassed with the product.

I've been building very, very quickly. The way I've been able to do that it's by using components. I use them on a product level when I design my plugins and at a website level; it's all component based. I ship code probably at least a couple times a day either to my website or to my plugins.

The somewhat weird thing is that despite building plugins for Figma, I actually don't _use_ Figma for _designing_ my websites or plugins at all. I've never designed anything in Figma; I design everything in code. Everything design related that's in my plugins or website is all based in code, it's all with components, and it's extremely quick. I've actually redesigned this website three times since December, and it took me a couple of hours each time to completely redesign it, because it's fundamentally built to be very very adaptable.

That's a "PROTIP" for anyone else: designing with code _works_, and not only does it work, but it's actually faster than drawing pictures of websites inside different design tools. You also get the benefit of having _real content_ build-in to the design process, which is such a big advantage over other methods.

### Talking to customers

I've been talking to customers (existing and potential customers), and that's been really great, because I get super good feedback, and and they actually help me develop new ideas, I can build relationships with them and I can go back to them to check in and and get a better idea of what's broken at their company.

### Do things that don't scale.

I've just got five things in here that I'm doing which (most likely) don't scale.

#### 1. Extreme customer service and feature request turnarounds.

If someone messages me on chat or email, I'll reply to them within a minute and they'll usually have a feature request or a question. My reply to their feature request will be: "the feature request has been deployed". Then I'll get feedback like: "Whoa! Your team is so amazing!", and then I'll go back and forth on the answer of either telling them it's just me in my kitchen, or leaving them to think that we have some sort of massive enterprise running down here.

#### 2. Cold emailing and offering to pay people to talk with me.

The second thing would be manually cold emailing over a hundred agencies and offering them to pay them to talk with me. This doesn't really scale over time, but upfront, it's a good way to to actually talk to people who might want your product. I've actually met and talked to a bunch of people so far, and none of them have actually wanted me to them, because they usually learn a bunch just from chatting with me, too. It's a win-win, and we're respectful of each other's time.

#### 3. Manually posting everywhere.

Number three would be just manually posting, linking, and commenting everywhere that's relevant online to blitzscale these initial product launches. and kind of get a little bit of a growth curve starting at the beginning and then and then building that up over time the other thing that doesn't probably doesn't scale is at the moment

#### 4. Building 1-2 new plugins per month.

I've been averaging about one to two new plugins per month. Developing new plugins over time willprobably slow down because I'm going to be working on more complex products over time.

#### 5. Working 10-12 hours per day (every day).

The last one would be working 10 to 12 hours a day every day on this business. That may or may not scale; we'll see how the the mental breakdown situation goes later, but for now it's going well.

### Are there any advantages to building a startup right now?

To make this somewhat relevant to the title, I should answer the question: "are there actually any advantages to building a start-up during a pandemic and impending recession?"

I came up with a few:

1.  There's definitely less competition. Less people will be inclined to start new companies and old companies will not survive, so overall there is actually less competition.
2.  In the case of COVID-19, there'll be more remote work happening, which means an uptick in Figma usage, considering the options for collaborative design tools are very very slim (and Figma is by far the best one). This may or may not lead to more Figmatic plugin use.

3.  In these times, less "waste" inside of companies will be tolerated, so businesses will be looking for ways to save time save, money and improve efficiencies inside the workplace. That's what Figmatic plugins are all about.

4.  On more of a personal note, an advantage would be that having a startup is just a great outlet for me to focus my attention. It's been great to not get distracted by all the the news over the last few weeks. I just keep my daily work routine going and keep the blindness on with working on building Figma plugins.

To sum up, if you're thinking "well you're talking about all these futuristic things but at the moment you're you're not doing anything too crazy"; the reason for that is I have a list of things that I want to automate from my time working in digital agencies, so I have a list of those things which I'm about halfway through. I want to automate all those things first then focus on some other new tools that we need today.

_(This article was adapted from a talk I gave at DesignOps Melbourne back on April 1st 2020 called [Building a startup (in a pandemic)](https://www.youtube.com/watch?v=wOs8jgkzWQg))_

---

---
type: article
title: Crossing the design “handoff” chasm
description: The design “handoff” process to developers is a widely accepted practice, but I think it's fundamentally broken.
datePublished: 2020-03-21T00:00:00.000Z
dateModified: 2020-03-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/crossing-the-design-handoff-chasm/
markdownUrl: https://www.hypermatic.com/articles/crossing-the-design-handoff-chasm.md
---

# Crossing the design “handoff” chasm

If you've seen me give a talk or ever worked in a design/development team alongside me, you'll know that I really don't subscribe to the “handoff” when it comes to designing and building things for the web.

Using a term like “handoff” implies that one person or team is throwing something over a fence to another person or team. This image is sadly not too far from the truth in the majority of teams like this.

Typically, a designer or team of designers will work away in isolating, using their design tool of choice for days, weeks or months at a time. Once they're _done_ (what they believe to be done, not actually done), they will “handoff” these designs to a developer and move on.

It's actually far worse than that, and the tooling that we believe is helping us is actually leading to worse results.

### Where we are today

It's now the year 2020, and I personally know web designers and developers who still refer to the process of design to development as doing a "cut up", stemming from the "slice tool" that was bundled with Photoshop as a way for designers to draw rectangles around areas of their image that would be automatically exported out as lots of image "slices" for a developer to use in their HTML and CSS build.

While my friend's company is (hopefully) an outlier, and the idea of using the slice tool in the current day as a means of development handoff from a designer probably makes you say "Oh man, I remember when we used to that, back in the day... thankfully we're past those dark times now" — I would argue that the reality is we haven't had much tremendous amounts of innovation on this process.

Taking a look at the current crop of design handoff tools, the fundamental thing they all share is translating layers from a design tool into rectangles that you can click on, which can then either be exported as assets (“slices”?), or inspected to get some idea of what the CSS would look like to create this layer in a web browser.

Thankfully, Figma has all of this functionality built in and doesn't require another handoff tool to be able to see these CSS properties or save out assets, which is great; but it's not enough.

### Designer's gone wild (No restraints + “handoff” = chaos)

One of the reasons that this process is fundamentally broken is that our design tools — as good as they are in what they do — are still essentially open canvases that have little relationship to a production codebase (or code at all, for that matter).

No matter what tool you are using to design, you can grab any element and do almost anything to it:

- Change the colour
- Change the font size or line height
- Change the position or alignment
- Change the context where it's being used

There are dozens more, but the point is that there are truly no restrictions.

That can be seen as either a bug or a feature. It's a feature when you're designing something that sits outside of an established design system or codebase that ships the a product to lots of people, and in the same way, it's a bug when you're designing something that sits _within_ an established design system or codebase.

Once you have a designer moving things around, changing sizes of things, colours, alignments, grids, layouts, components etc, working on this for days or weeks at a time, getting everything ready for that perfectly crafted final version to “handoff” to a developer (using whatever tool that involves), you end up with chaos.

If the developer takes the design at face value, starts copying CSS code from the handover tools and blindly implementing whatever they see in the design, there's a good chance that things are going to go haywire pretty fast.

Sadly, these handoff tools have really become an excuse for not needing to talk to each other at all. Instead of fostering designer/developer collaboration, they serve as a wall (or chasm) between them.

When a developer receives a design that contains a form with labels aligned to the right (instead of the left, as it is in their design system), without proper context, the developer might go ahead and do one of three things:

1. Assume that the designer must want to change this core component, make a global change to the form/label component, so every label in the codebase is now aligned to the right (instead of the left).
2. Hack together a very special bit of HTML and CSS that becomes super `!important` to the codebase, just for this _once off_ thing.
3. Build it as a brand new component or variant, and publish it to the codebase for other developers to use in the future.

You're probably thinking "well, obviously none of this would happen, because the developer would have _asked_ the designer anyway once they knew it was a new design...".

Sadly not. This is a real example that happened at a real (very large) company, and they decided to choose what was behind "Door #1" and roll out this change to the global codebase, until someone discovered what had happened and reverted it.

### Where we need to go

To briefly jump back to the DesignOps meetup that I used to co-run; our singular focus, believe and mission was that:

> “The distance between design and development should be zero.”

This can never be true when there is a wall between the design teams and the development teams who have no real relationship together, beyond the fact that they may (or may not) sit in proximity to each other.

As I mentioned, there are companies who still literally "slice" up web designs from static Photoshop or InDesign files and use this as a way of handing over something to a developer to build.

This is a process that most companies have become comfortable with, despite the downsides of widening the distance between designers and developers instead of the intended goal of reducing it.

As I've written and spoken about before, I absolutely believe that the future of the design and development will look very different from this process (and the other things that come along for the ride with it).

At the time of writing this, Figmatic is still a company of one. I am founder, designer, developer, marketer, copywriter etc. All I have are ideas and time, which are both somewhat constrained by each other. Even with spending almost every waking hour working each day, there are still only a finite number of things that I can work on and accomplish on my own right now.

There are much bigger, venture backed teams already working on solutions to much bigger tooling problem of making the codebase the source of truth of design, and I know they will be able to solve this problem based on their visions are trajectory. There is really nothing substantial for me to bring to that party right on my own right now.

So, as a bootstrapped solo founder, I decided to focus on what I can do right now, while still pushing things ahead in the right direction (_reducing the distance between design and production to zero_).

### What we can do right now

With all that in mind, I recently built a Figma plugin called <a href="/pixelay">Pixelay</a>, which takes your designs from Figma and streams them into the browser, overlaying them on top of your _real_ website.

The reason I built it is because I've seen people go to great lengths to provide feedback on developer implementations _after_ this (clearly, truly, wonderfully effective) “handoff” process we've just been discussing, including:

- Designers printing out screenshots of the build and writing pixel measurements on them with red sharpie.
- Creative director's sitting with a developer for _hours_, pointing out pixel by pixel what is different from the original design.
- Having a meeting with 5-10 people to all review the design and build together, pointing out the differences for the developer's benefit.

This is madness _and_ this is normal at the same time. I think it's killing the souls of both designers and developers, and it has to end.

<a href="/pixelay">Pixelay</a> helps avoid these maniacal measures and literally brings the design and development environments together, where any differences between the design and build are immediately visible.

This is not intended to turn developers into mindless code puppets, where they blindly just make the design and build match no matter what. That _may_ be the right answer sometimes, but other times, the developer might be using a pre-existing component that is out of sync with the one the designer has used from their Figma components.

The distance between design and production will eventually be reduced to zero, but until then, this feels like a step in the right direction to get away from thinking of design and development as two sides of a chasm that requires one to “handoff” something to another, instead of treating them as the same thing.

---

---
type: article
title: Figma vs Sketch (2020)
description: My personal comparisons as someone who used both Sketch and Figma for mutliple years.
datePublished: 2020-03-20T00:00:00.000Z
dateModified: 2020-03-20T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/figma-vs-sketch-2020/
markdownUrl: https://www.hypermatic.com/articles/figma-vs-sketch-2020.md
---

# Figma vs Sketch (2020)

Back in 2013, the agency I was working for at the time was still using Adobe Photoshop to design all our websites and UI. It wasn't until about a year later that rumblings of Sketch started to become popular amongst the designers I knew. One of the main draws seemed to be that big companies in Silicon Valley were using it for _their_ UI design, so therefore, if it's good enough for Facebook, it must be good enough for everyone else.

Around 2015-2016, I saw lots of my designer friends starting to make the jump to Sketch. It was the cool thing to do, and you were seen as falling behind if you didn't get on the Sketch train. My last agency made the jump from Photoshop to Sketch in 2016. Ironically, I have seen almost the same shift (down here in Melbourne, at least), since mid-2018, gathering with more steam each month since then.

After being on Sketch for 2 years, we decided to make the full switch from Sketch to Figma in early 2018, and we never looked back. Going from using multiple tools like Sketch, Zeplin, InVision and others, we were able to have everything in Figma instead, leading to happier designers, developers and far more efficiency.

As someone who experienced the transition from (many years of) Photoshop to Sketch (for 2 years), then Sketch to Figma (for another 2 years), I'd like to share some of the observations I've personally made on the topic of Figma vs Sketch, which are up to date (as of March 2020). I've broken them down into categories that made sense to me, and contrasted Figma with Sketch at each step. I hope this is a useful summary of why Figma is the best choice as an alternative to Sketch.

### How designers work with developers in Figma compared to Sketch

One of the annoying parts of using Sketch was the limitations of designers being able to work with developers. Designers would typically create pixel perfect artboards in Sketch, but when it came time for a developer to actually build it, no one really knew the best way to go about it.

This led to us reaching for 3rd party tools such as Zeplin, which allowed designers to upload their designs and have it translated into a web app that developers could login to and click on elements from the original design. While this was a step up from getting developers to install Sketch on their machine (provided they weren't using Windows or Linux), it still felt really hacky and totally disconnected from the original designs.

Every time the design was updated, they would need to be re-uploaded to Zeplin, where the developer may have already built all the screens from the previous design (while the designer was busy crafting the new version inside Sketch).

You can see how this would get frustrating, with designers and developers never truly on the same page.

However, when using Figma, These problems are mostly eliminated using Figma. First of all, because Figma is built with web technologies, it's platform agnostic, so developers using OS X, Windows or Linux can all access the designs. Because it's real-time, the issue of being "out of sync" with designers also disappears.

### Performance of the Figma web app to the Sketch native app

Some of the early propaganda around switching from Sketch to Figma was around Sketch being a native app exclusive to OS X, where as Figma is written in web technologies that can be run inside a web browser on any operating system. Early skeptics didn't see how Figma could possibly outperform something written as a native app.

Figma uses a 2D WebGL rendering engine that can handle large design files. They've written extensively about how they've gone about getting amazing performance inside a web app, leveraging the magic of WebAssembly, which allows you to run binary code (similar to a native app has) directly inside the browser. This is something that wasn't possible even a few years ago.

Being built in web technologies is the most underrated "feature" of Figma, by a long shot. Not only does it allow real-time collaboration, cloud based storage and more transparency, but it also allows developers to actually read and the underlying design data inside a Figma file and use it for their own automation or development build steps.

Which naturally brings us to plugins...

### Figma plugins vs Sketch Plugins

The last big battle cry from die-hard Sketch users was that Figma didn't have plugins. I personally talked to people who literally weren't switching purely because they needed (or wanted) to keep using the "Craft" plugin for Sketch, which allowed them to load in fake data to populate their designs. That's all they wanted... even in the face of all the other benefits that Figma offered, this was a big enough deal for them not to switch.

That all changed on August 1st 2019, when Figma announced it was officially opening its own native plugin ecosystem and directly, built directly into Figma itself.

On launch day, there were multiple plugins for Figma that not only replicated what was available in the dynamic content plugin for Sketch, but far exceeded it.

At the time of writing Figma has almost _500 plugins_ live in its native plugin directory. For something that has only been live for 6 months, that is a crazy amount of development work by the dedicated community of Figma plugin developers.

Unlike Figma, Sketch does not have a plugin directly built directly into their app. These mostly need to be downloaded as zip files from GitHub repos and installed manually. For some designers this might be intimidating.

Worse still, if Sketch releases an update, it's very common for plugins to break completely or have negative effects inside of Sketch. With Figma, this isn't a problem as plugins are versioned to a certain version of the plugin API, so even if Figma releases updates, plugins will not break.

With Figma, plugins automatically update for everyone instantly when a plugin developer publishes an update. This all happens behind the scenes and doesn't require any interaction from designers. Uninstalling a plugin is also a 1-click, 1 second process of clicking a button.

### Collaborating with the rest of your team in Figma vs Sketch

When Figma was first announced on DesignerNews back in 2016, the top rated comment mentions:

> "Design needs to be presented and sold and having stakeholders and even other designers poking around work at various stages of completion feels like a recipe for creative stifling."

Fast forward to today, and every design tool (including Sketch) is racing to add the same live-collaboration features that Figma launched with in version 1.0.

Another more optimistic version of this comes in a quote from the creative director at Unfold:

> "Comparing Sketch and Figma is like comparing Notepad and Google Docs."

I think this is probably more accurate, as Google Docs was such a game changer for how we think about collaborating on writing and editing word documents, spreadsheets and presentations; Figma has owned this paradigm shift and run with it for the digital design industry when everyone else was betting on things staying the same in the future.

There is a reason why the road map of competing design tools all essentially describe achieving the functionality of Figma 1.0. I've publicly said before that I believe Figma is 2-3 years ahead of any other tool, and I think they continue to prove that this is true.

### Learning Figma if you're coming from Sketch

Figma was really thoughtful on behalf of anyone thinking about switching from Figma to Sketch for a few reasons.

The first reason is that they designed the UI and shortcuts to be very similar to Sketch, so designers can retain their muscle memory and not get too confused with learning new commands or shortcuts. This is comparable to a developer switching their code editor; if the shortcuts are totally different, they feel lost and end up switching back to the old editor they were comfortable with - even if the new one might be "better" in other ways.

The second reason is that Figma built functionality that allows you to import .sketch files directly into Figma, complete with all their layers as you would expect to see (not just a flat image). This is such a huge feature for anyone hesitant about losing their previous work that was done in Sketch, because it means they don't need to spend time re-creating designs again in Figma.

### Design Systems in Figma vs Sketch

This is an topic that most people don't agree with me on (yet), but I believe that design systems should exist in the codebase as the source of truth for design. This means that tools like Figma or Sketch should serve as a UI to consume and manipulate design elements that are rendered from the codebase being used in a customer/user facing app or website.

While Sketch does have symbols and Figma does have components to make it easier for designers to create organised UI inside of the design tools, I believe that this is a spectre of what design systems will really look like in the future.

Once again, because Figma is built using web technologies, I believe they are positioned far better than Sketch to leverage this future (which is not a mainstream idea yet).

Even today, there are plugins like "Interplay" for Figma which allows you to link your Figma file with a production codebase of components, and render them inside your project for designing with.

### An unfair fight

I'm not going to pretend that this is a fair fight, and that there was any chance I would recommend Sketch over Figma, because the truth is Figma is a clear winner in essentially every category when analyzing the "Figma vs Sketch" question objectively.

As I said, I used Sketch for over 2 years and then Figma for over 2 years, and the difference was like night and day (for me and our agency). If Sketch served our needs, we wouldn't have even considered Figma, but the pain points were far too many and far too limiting for the ways that we knew we needed to work - at that time, and (more importantly) in the future.

I believe in Figma so much that I quit my job to start Figmatic and build premium Figma plugins. To me, this is my way of putting "skin in the game", and showing that I'm not just casually saying Figma is "kind of better" than Sketch; I fundamentally believe it is more prepared for the future of working as designers and developers than Sketch is.

If you've already switched to Figma, welcome aboard. If you're still considering it, now is a good a time as any to give it a shot. Based on my experience and every designer I've talked to, within 5 days, they won't want to go back to Sketch.

---

---
type: article
title: The great stagnation of design and development workflows
description: The propaganda of "rapid progress" of design/development workflows inside companies.
datePublished: 2020-03-01T00:00:00.000Z
dateModified: 2020-03-01T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/the-great-stagnation-of-design-and-development-workflows/
markdownUrl: https://www.hypermatic.com/articles/the-great-stagnation-of-design-and-development-workflows.md
---

# The great stagnation of design and development workflows

_(This article was adapted from a talk I gave at DesignOps Melbourne back in 2018 called [Insanely Inevitable](https://www.youtube.com/watch?v=pb1uvaYGx_k))_

### Digital Agencies

I'm primarily going to be focusing on digital agencies because that's where I've been born and bred. However, I've heard enough stories from my friends who don't work at agencies (and those who do work at agencies) to know that there will be enough overlap for the two, but anything I'm writing about here will mostly be specific to agencies. I'm going to address the typical agency model that still is very much rooted in this "Mad Men"/1950s idea; it's very much still stuck in that way, and even though we don't dress as cool anymore and we don't smoke and drink whiskey in the morning (well, some agencies still do).

### Avocado and Agile

Before I can continue, I need to mention avocado and Agile. These two things may have no overlap whatsoever in your head (rightly so), but in fact, they do have a bit of overlap, and they're also the exact opposite of each other in other ways. Effectively, the way I see it, the biggest widespread innovation in Australia in the last decade has basically been smashed avocado; and the biggest widespread innovation in digital agencies in the same period has been stealing Agile from "product" in a very ill-conceived manner. I actually really like smashed avocado, but on the other hand, I do _not_ care for "Agile" at all. The form it has taken in agencies (sometimes called "Agency Agile") is obscene.

The recipe that agencies follow to delude themselves into thinking they are "Agile" can be summed up as: Fixed budget, fixed timeline, flexible scope.

### Inverse Innovation

What I'm getting at can be summed up in this quote from Peter Thiel:

> "We were promised flying cars, and instead we got 140 characters."

There seems to be this "inverse innovation" that's happening; certainly in agencies and perhaps even in other companies as well. I really just want to address this up front before I continue.

These are just a couple of examples that have I've seen myself from other companies when I say about "inverse innovation":

One company (who will remain nameless) will talk very confidently about design systems and all this trendy new stuff, but in reality, all the designers working there still need to tether their own mobile phones in order to upload their static mockups to InVision (to get around the draconian I.T department).

Another company (who will also remain nameless) will talk about "innovating" with AR/VR, chatbots, but in reality, ths company's file hosting service has a file size limit of 10mb (the same as email it's meant to replace).

It's very much this weird internal vs external thing. Externally, everything is great, there's so many innovations going on, but internally, people can barely understand how to do their regular day job, so in reality there's actually not much innovation happening at all.

As a side note: if your marketing team is talking about things that are "innovative", they are almost definitely not innovative, and you should run away from anything they try to drag you into "exploring" (copying examples of other companies they've already seen do something) for them.

There are a whole bunch reasons for this kind of odd behavior, and this isn't an exhaustive list here, but these are just some sort of top-level points that I'll go through:

#### Everyone is too focused on "busy work"

Everyone is too focused on "busy work". This is a trend you'll just see basically everywhere you look, where you can observe people running very fast, but staying in the exact same place, towards no particular direction and mistaking it for work. Unfortunately for these people, the truth is that doing unimportant things very efficiently doesn't actually make them any more important.

#### Decisions are made by comittee/groupthink

Decisions are often a made by committee or groupthink and there's usually a lot of really good ideas from people at companies and they present them to the higher-ups or the group and then they basically get watered down and you they become the average opinion of the average person and end up being average (at best).

#### Assumption that hard problems will get solved automatically.

There's an assumption that the hard problems will just automatically get solved this is something we're used to so we don't actually spend a lot of time thinking about the hard problems just assuming they'll get solved

#### Fear of being wrong, held accountable or having risk aversion.

There's a fear of being wrong or having a risk aversion this is very common people try to like spread the blame and don't to be responsible for anything going wrong (or right). No skin in the game.

#### Short sighted vanity metrics instead of long term thinking.

It's a trend of short-sighted vanity metrics over the long term so focusing on things that day to day might seem very important but really have no effect in the long term .

#### Incompetence overrides reason.

Incompetence that overrides reason; people who are very reasonable actually doing the work they'll often get overridden by incompetent people above them who have no idea about what they're actually facing or what decisions are right.

#### Process trumps substance.

Process seems to trump substance so kind of just falling back to the process and not focusing on producing anything who value. This quote, also from Peter Thiel in "Zero To One", sums it up best:

> "In the most dysfunctional organizations, signaling that work is being done becomes a better strategy for career advancement than actually doing work (if this describes your company, you should quit)"

#### No definite optimistic view of the future.

This last one sums up the whole thing; there's really just no definite optimistic view of the future; It's very much an undefined optimistic version of the future, where things are _probably_ going to get a better, but we don't actually know how or or why, they're just somehow going to get better.

### Everyone ends up copying each other.

That's why we're in the state that we're in now: everybody is sort of doing the same thing, working with the same tooling, using the same processes and they're doing it because they're simply looking at other agencies and how they're doing it. This can become really dangerous, and can lead to some very weird behavior, like companies rushing to become "Agile", but they're not really sure why or what it really means.

So, there's just this really incremental back-and-forth of copying between companies, or copying things they read on the blog of a big unrelated company like Spotify, and (at best) they're incrementally improving things. Maybe it's not even improving anything at all, maybe it's actually getting worse, but the commonality is that everyone's just copying each other there's not really much original thought going on at these companies.

### The distance between between design and production should be zero

Seeing all these companies mindlessly copying each other, mindlessly adopting new trends or not thinking for themselves makes me very concerned for the people working in them.

This is a quote from Dagny Taggart in Atlas Shrugged, she said:

> "The hardest thing to explain is the glaringly evident which everybody had decided not to see."

This is basically how I feel most of the time when I talk about new ideas related to design and development. As I mentioned earlier, I think the distance between between design and production should actually be zero.

This is not a popular view in agencies and perhaps in other companies as well. When you start talking about this stuff to people and they only take what you're saying at face value (not spending the time to understand why this is important), you basically just get a bit ridiculed and not taken very seriously. Everyone is happy to go back to their _comfortable_ (and horribly time-wasting) workflows that are 20+ years old.

I think we really need to be focusing on what will have value in the future, and this is opposite to the trend that we currently see, which is trying to retro-fit today's ever-changing problems into these traditions of the past.

As I said before, the "Mad Man" model is how agencies looked 70 years ago, but we we haven't really stopped blindly chasing that. We try to cling on to all these existing ways of doing things. Instead of inventing new ways to solve _new_ problems, we just kind of kind of mash them into the old ways we've already been doing things, and it _barely_ works.

Woody Allen kind of sums it up much better with:

> "Tradition is the illusion of permanence"

We can't just cling on to tradition and expect that to remain true for decades, because it's absolutely not true.

### Some more concrete examples of stagnation in agencies (taken from a single month)

Just to really make this concrete, these are some examples of things that I personally saw in a single month (October 2018) in agency/client work. I assure you, these are all from 2018, not from 2008 (as you might think) - which is over a decade ago, and all these examples could easily have been from a decade ago, but they weren't, sadly.

- Static web designs that were created in InDesign, this was the the "handover" format that was provided from the design team for development.

- To receive feedback from a client on a staging site URL, they printed off screenshots of the website, wrote over it in red sharpie, scanned it back in, and then put into a PDF file as an email attachment for us to review and action in design/code.

- A leading agency who gets their designers to take Photoshop (yes, still on Photoshop) files of their designs and export every screen to a JPG file, and then work with the team to put these JPG files into a PowerPoint presentation, which can then be used to present designs to the client.

- Clients "signing off" (to start web development) on a very large website design that had no genuine content in it _at all_, so it's just "designing delusion" (as I like to call it).

- Designs for a web app development handover which was provided in something that looked like it was designed for a print magazine, supplied in low resolution JPG files. There were text inputs _all over the place_, this was very much at the extreme degree of an "unconstrained design". This was just inputs literally put in different areas all over the screen in absolute position... how does the tab index even work on this matrix of inputs? It was outrageous.

- Multiple times in the same month, I had to defend "components" against this idea of "unique pages". I was more than happy to do this, but just the level push back I was getting on just this idea of even _considering_ component based design was nuts.

- No design thought given to any sized screens below 27 inches - this is almost a constant theme.

- Mobile mockups with _totally_ different content to the "desktop" version of the exact same pages. I received two completely different sets of content, or at least the contents were in like a totally different order on both mockups. This is a decade since "responsive web design" became a term, and we still seem to have no idea what it means.

- Finally, some app designs for a very large company that I received for "handover" weren't even using their design system (which they do have). They were literally doing stuff like changing the global font weights and just designing completely new inputs... it's out of control.

### Existing tooling has run out of track.

Traditional design tools and workflows have basically run out of track. There's almost nowhere else we can go with with these current workflows and tooling; instead, we need to jump the curve and actually think about approaching this in totally different ways.

This isn't just my opinion, it's slightly re-assuring to know that other people in the community have a similar view to me on this.

John Gold from Airbnb said:

> "Looking at the current crop of design tools after taking a glimpse of the future is frustrating."

Daniel Eden from Facebook said:

> "Even the most advanced design tools are based on workflows for drawing mere pictures of interfaces"

These quotes are both very relatable to my mind, and I think they're both correct. Once you've crossed the event horizon and truly seen that the way we're doing things now is extremely stagnant and doesn't have much track left in its path; you can see how one might become obsessed with the idea that a future exists where things _can_ actually be better and get us past what we've been doing so far.

### A New Hope?

I believe that design and development type work should actually get way faster and cheaper over time, _especially_ the "simple" tasks that we still seem to struggle so much with. However, I've noticed the exact opposite trend in our industry, where we're actually getting slow and more expensive over time. Even things like websites (we should be _really_ good designing/building at websites by now!), they tend to get much _more_ expensive over time and take much longer to complete, rather than the opposite that one would expect to see.

I really like this quote from Ricardo Semler, taken from his book “Maverick”, he said:

> “We've all learned how to go on a Sunday night to our email and work from home, yet very few of us have learned how to go to the movies on a Monday afternoon.”

This was one of my goals for the team I used to work in. I wanted us to be so good, that we would literally be able to go to the movies during the week if we felt like it, because so many of our the tasks we used to do so poorly would be automated if we worked hard enough to make that happen.

I'm still very optimistic these (already dated) tools and workflows will become a distant memory, once everyone realizes how poor they truly are (after the things that will replace them become widely adopted enough).

Identifying these problems is a positive first step, but after that, the thing that really matters is working very hard towards a definite optimistic future where things look very different from the way they do today. I will personally be working towards bringing about this future, and I won't be giving up until we get there.

I will leave you with this one last quote (also from Atlas Shrugged):

> “Do not let your fire go out, spark by irreplaceable spark in the hopeless swamps of the not-quite, the not-yet, and the not-at-all. Do not let the hero in your soul perish in lonely frustration for the life you deserved and have never been able to reach. The world you desire can be won. It exists... it is real... it is possible... it's yours.”

---

---
type: article
title: How and why our team switched from Sketch to Figma
description: The blueprint I've successfully used to change things inside of a company.
datePublished: 2020-02-27T00:00:00.000Z
dateModified: 2020-02-27T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/how-and-why-our-team-switched-from-sketch-to-figma/
markdownUrl: https://www.hypermatic.com/articles/how-and-why-our-team-switched-from-sketch-to-figma.md
---

# How and why our team switched from Sketch to Figma

This is not a tutorial on Figma, it's not a "Figma 101" listing out its features or anything like that; it's a story about my previous digital agency, Tundra, and how I came to introduce Figma as a tool that we could use at our agency. This article also has a "Notorious B.I.G" themed structure, so each section will just riff off a Biggie Smalls track title.

For those who don't know me, I was "officially" the Lead Front End Developer at Tundra, but I changed my title all the time on Slack. At one point I was "Editor In Chimp", so you can see we didn't take job titles too seriously. Even our Technical Director of the agency had his client-facing role as "Junior Front End Developer". We really didn't take them too seriously and I think that just made it easier for us to be more adaptive to work on things outside of our disciplines and actually take on parts of the job that may not be in the official job description.

### Kick in the door

> My workplace is shit... how do I change things?

This is the question that I received quite a lot at the DesignOps Melbourne meetup I used to co-run. I was getting people from big companies, big agencies, product companies and so on; and it was effectively a version of this: "Things aren't that great in my workplace, but I don't even know where to _start_ to change them".

This is seems to be a _really_ common problem, and I want to try and hopefully address that a little. I don't have all the answers, but I'm going to be talking about a period of a few months (back in early 2018) from my perspective, where I made it my mission to introduce Figma into our agency.

### Everyday struggle

The design workflow is broken in most workplaces, almost in every workplace actually, it's broken in one way or another. Even in workplaces that seem to have a pretty good workflow, there are probably one or two areas it's not totally perfect and it will probably never be perfect; but there's degrees of that, and a lot of companies are more perfect than others, and some are just on the other extreme and are truly awful, too.

I think we do have this everyday struggle as designers and developers, and it's when both are combined or overlap where it's the most obvious that it's totally broken, but it's not as obvious how we get past those things that are broken. The most common outcome is that people get complacent and start learning to live with those imperfections, like the "20 folder deep" manual versioning of project folders and files on a crappy server. There does seem to be more of a tendency to get comfortable with these problems rather than putting things in place to try and leap over them, and I think that's a huge problem.

### Things done changed

We are in a spot now where things have slowly started changing for designers and developers. There are a few trends that have been happening for a little while, and they will continue to happen. Some of these are pretty obvious to me; the first one is quite a big one: collaboration. If you look at the tooling that is coming out, they're building in collaboration to many of our tools, so this is something that is being more widely used and more widely requested for on projects. This is getting built in now across the board, everything from other tools like Google Docs to Slack is very collaborative, and Figma is clearly very collaborative, too.

There is a trend where things are getting more collaborative rather than this "siloed" workflow that a lot of people are used to, so decentralization is another important trend. Lots of us don't work next to the developers or designers on our projects, so we have to be able to work in decentralized way, whether developer is in Canada or Australia, and still be able to have a really good workflow. So, decentralization is another really important one.

The third one would be: iteration. We _need_ to be able to make iterations quickly that don't go through this crazy process of generating those designs with 40 pages, getting those to "95% done" and then presenting it to the client as a finished product, then being so _shocked_ when they don't like some of it. You thought you've perfected this design, but you're actually back to square one now. I had this joke where I would ask a designer how the design was going, and they would say "it's 90 percent done", to which I would say "cool, so about halfway then?" - because you know like it's going to come back - it's not done. Whether it's from client feedback or internal feedback, it just doesn't really work that way, so the fundamental way of how we need to work needs to change. It has already been changing and it will continue to change. This is not something that's just a little "blip" and we kind of like this idea of collaborating and being able to make fast iterations, this is something that will only increase with time, so I think acknowledging that is quite important.

### Somebody's got to die

With that being said - somebody's got to die. In our case, we were big fans of Sketch, we had been using it for a couple years full time after we got off Photoshop quite a while ago (back in 2016).

Ironically, that the switch from Photoshop to Sketch was fairly similar to what I'm going to be writing about now, so I could basically take this process and apply it to how we did it back then.

I vividly remember a walk like back from a local cafe with one of our designers back in 2016, and he said "Man, I can't wait until we can use Sketch...", and I stopped him and said "What are you waiting for? You're probably the most senior designer here". Even these designers who are very senior and very knowledgeable still feel like they're being held back or they don't feel like _they're_ the ones who can make that decision, and I just think that's _so_ sad, because it's holding back very smart people who have really good ideas or want to change things.

### Going back to Cali

So, I looked into a new tool called "Figma" that could clearly resolve a lot of these problems that I think everyone's familiar with. I'm not going to go down the laundry list of all the problems that we had with something like Sketch or Adobe products, but Figma immediately just jumped out to me.

At first glance, it's effectively a "Google Docs" version of a design tool. It's really based on this collaborative idea that's that's built-in to the product, it it's not like an "add-on" you need to install; they've built it from the ground up that way.

For me, the most important feature of Figma is that it is built using web technologies. Unlike Sketch or Adobe products, it's not a native Mac or Windows app. With Sketch, you can't install it on Windows or Linux, so the fact that they've built Figma from the ground up in the web,using web technologies, it seems like not many people acknowledge that as being such a huge deal. I believe Figma is two to three years ahead of any other design tool just based on that fact alone. It's such a big deal.

At the DesignOps Melbourne meetup, our mission was to "reduce the distance between design and development to zero", and I truly believe Figma (and how it's built) will be pivotal in helping us do that.

### Ready to die

You have to be ready to die for this stuff.

If you truly believe in something, let's say you're still on Photoshop and if you know that Figma is better alternative to Photoshop, it may or may not be an "easy sell", but if you _really_ believe that it is the better alternative, and you _know_ you're ready to die for that idea, I think that's a really good place to start.

You have to be willing to stand up for what you think.

> "To sell your soul is the easiest thing in the world. That's what everybody does every hour of his life. If I asked you to keep your soul - would you understand why that's much harder?"

I really like this quote from a book called "The Fountainhead". This is said by the main character, Howard Roark. He maintains this extreme level of integrity, because he knows that on a long enough timeline you're going regret it if you if you just sell out every single time and don't stand up for what you think is the right thing to do.

### Notorious thugs

You can get some help so you don't have to do this on your own. There are other smart people in your company or your agency who probably has similar thoughts. They might not be obvious at first, but you can find them just by talking to them.

You want to find a few smart "mavericks" who are willing to put themselves out there a little bit and help you with this mission of implementing change. I had this at my agency, where I reached out to a few designers who I knew would be interested in making a change to our design tooling. They were really supportive of helping me try out Figma as a design tool.

I wasn't a designer at work anymore (I used to be a designer), I was not on the design tools, but these guys were, and I really valued their opinion of Figma as a design tool; so I wanted to work with them as a developer to see how that integrated into my workflow as well.

It was really a bit of a back-and-forth to see how we both could work together with this new software.

### Just playing

To get this to work out, you really have to build in a "20% expected failure rate" from the start, and by "failure", I don't mean this in a bad sense at all.

I think there's a level of fear, where designer will say (or think to themselves) "if I do this, am I going to lose my job? Am I going to get in trouble?", so I think you need to build that expected failure rate in from the very start, because switching to _any_ new tool is going have some speed bumps, whether it's from the software itself or the onboarding process, or maybe you're not as fast with it straight away; and that's okay.

So, I think building in that failure right from the start and letting people know that it's truly safe to try these things, and re-assure them that they're not going to get in "trouble" for it; and in fact maybe a better company-wide message is that they're more likely to get in trouble for _not_ trying new things.

### Hypnotize

I can't emphasize this enough: talk with your team.

I think a lot of people just internalize this stuff, and have self-talk where it's like: "oh boy, I _wish_ I could use Figma... when will _someone_ change things here so we can use it?" They start getting really worked up internally, but it helps to just talk to your team about and see if they've been thinking about the same things; there's a good chance that they probably have. Not even just the designers or the "discipline specific" person, talk to the producers, the copywriters, the account managers, leadership etc.

Every _single_ day I was posting something about Figma in our agency Slack channel. I was doing this for about two months so they were consistently aware of it and thinking about it, and we had really good discussions about it. I think it's often about educating people in your team/company as often as possible and really just keeping that communication going every single day. When I was in the kitchen downstairs making breakfast at work, I would talk to the designers and we would have like a ten minute chat right there, and I think that was really critical.

### Big Poppa

When it comes to management, leaders or "senior" people in the team or agency, this of course becomes a very easy excuse to make: "oh, you know, _my boss won't let me_...", but it's really self-defeating and again, you're internalizing all this and chances are you probably haven't even _talked to them_ about it (if you're being honest with yourself).

My approach to this (affecting change or bringing in things that you believe into a team), which doesn't have a hundred percent success rate, but it has proven to be the most effective way I've found to convey value is something like this: you really want to make whatever you're doing or whatever you're proposing **ten times better** ( not _ten percent_ better, ten times better), and a 10x improvement of _anything_, any metric, is very, very hard to argue with, or ignore completely.

You might get some push back, which is great, that means you're having a conversation about it, but if you can put that initial work in yourself, and you've shown that you've taken the initiative to go above and beyond in your own time or at work, or researching at home and actually demonstrated it to someone, and showed that it is ten times better (in whatever metric you're measuring), I think that's going to give you a really really good shot at at least getting approval for that initial trial with the "built-in failure rate" from your design manager or your your "higher-ups" as well, so I really recommend this approach.

### Suicidal thoughts

This has come out of my own discussions with designers from lots of different companies and agencies that I've talked to. It's a really common theme where there's a very self-defeating attitude, that feeling like "nothing is ever going to change" or you're _waiting_ for **something** to happen or you're waiting for someone else to make that change. I just never really understood that, because no one else is going to do it.

_No one is going to save you_, and as soon as you realize that, and you realize it's actually up to _you_, then that's probably a good frame of mind to have. And to anyone who's "stopping" these things from happening, or stopping all these discussions from happening; that the sad truth is the best people in your company or agency will quit. The best people won't put it up with it for too long, they'll quit and they'll find somewhere else that that _will_ offer what they're after. I know a bunch of people who have literally quit their job in the last six months because their company was a still on Photoshop, or maybe it was just something that they couldn't see changing in the near future. So, the best will quit, but what's even worse is that the rest will stay and they'll be _dead inside_.

The people who _really_ don't feel like they have any power to change anything will be the ones who stay at the agency, and they'll be learning to live with those subpar processes or subpar tools, and they'll just be dead inside and won't actually say anything. Because of that, all of their work is going to suffer, their creative souls are going to suffer and their integrity goes at the window. The real-life implications of not being able to have these discussions, or not being able to try new tools actually has way bigger impact than just "this little tool is something one of our designers wants to try but we're not gonna let them and they'll get over it" - it's mostly fatal in the long term.

**tl;dr - Try Figma and save your designers souls.**

(_This article was adapted from a talk I gave at DesignOps Melbourne back in 2018 called [Life After Sketch – Featuring The Notorious F.I.G.](https://www.youtube.com/watch?v=7s5ZRYfI2X0)._)

---

---
type: tutorial
title: How to export animated banners from Figma to HTML using Bannerify
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-02-17T00:00:00.000Z
dateModified: 2020-02-17T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-banners-from-figma-to-html-using-bannerify/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-animated-banners-from-figma-to-html-using-bannerify.md
---

# How to export animated banners from Figma to HTML using Bannerify

#### Video Transcript

Today we're going to be looking at how to design, animate and finally export banner designs from Figma directly to HTML (including a number of advertising platforms).

The first thing we're going to do if you haven't already done so, is install a Figma plugin called Bannerify. You can do that by going to the Figma icon up in the top left, clicking on "Community" and searching for "Bannerify". You can see it's popped up with two different results, so we've got our "Plugins" tab, which is the Figma plugin itself; so I've already got this installed but if you don't have it installed, you can just click on the "Install" button and that will install it for you.

The other result which we'll come back to in a second is under the "Files" tab. This is a example design that I've published on the Figma Community files area, and what you can do is you can actually click on this and duplicate it to your own Figma files, and what that's going to do is give you a really easy quick start just to play around with the Figma plugin and see how it works without actually spending some time designing some banners for yourselves. I've got that duplicated over here and you can see we've got a bunch of banners already set up. So, if I right-click and go to "Plugins" you'll see I've got "Bannerify" just here. I'm going to click on that and once that loads you're going to see a few different things on your screen; so I'll just go through each part of the UI one by one.

The first thing you'll probably notice is if you scroll through, you can see previews on the right-hand side of all of the banners that we can actually see in a Figma file, so what Bannerify is doing is it's actually going through every frame in your project or in your page and it's treating every top-level frame as a new banner design. So, on the left here you can see if I expand out a couple of these frames I've named them to represent some of the commonly used sizes for banner ads and you can see each one's just a regular frame in Figma, and inside of that frame you've got just regular layers as well; so we've got some text layers, we've got an image layer and we've got a another frame which has auto-layout on it to do our buttons. So that's just a frame with some text in it and then it's got auto-layout applied onto it. You can see that here it's got auto-layout on there so if you want to remove that you could, but for now I've just left that on to make it easier to update.

You can see here in every group or in every frame this is a list of all the layers inside of each frame so these are these are representing exactly what we can see over here in our Figma layers so anything that's added inside these frames will show up in the timeline here and you can see the layer names over here. The large rectangle layer over here that represents this layer in our file over here this slide rectangle so that's that's kind of a visual breakdown of of how all the layers look when they get loaded into Bannerify automatically. The second thing you'll notice is the animation timeline here, so because I've duplicated this from another project I've already set some animation styles on it so Bannerify will remember animations that you've applied to your layers in Figma; so when you relaunch it, all of these animation styles will actually be saved and you can you can rerun it again.

These timelines actually affect how fast and how long the animations will wait to actually start playing, and you can preview what they look like by just clicking on the "play" button over here so if you click on the play button for any of the banners, you'll get a real-time preview of what that animation actually looks like when it gets played back. The other cool thing is it'll automatically update the animation on the fly as you change certain timings, so if I increase this you can see it's reflecting the change immediately in the preview and likewise if I click on this "loop" toggle; enabling that will ensure that the animation just keeps going over and over and over again even after the timeline's finished.

The other thing you'll notice is on the left-hand side just next to the layer name is a drop down for animation styles. At the moment this one has a fade-in-left on it, but I can quite easily change that to coming from the bottom; so if I click on that you can see here it's coming up from the bottom instead. I can move that back here so I can make both those things happen at the same time I can fade-in from the right I can do a rotation if I wanted to; that's out of control, but you might want something like that. There are many, many animations that are already configured for you and they categorized by the type of animation; these are all "entrances" so these are all animations that will help an element to enter into the frame, and if you wanted to do an exit you can also do that too. I can apply an exit onto this onto this element here and that will actually take it out of the frame in an animated way and then there are a few other ones as well. We can do a scale-up, so this will kind of scale-up an element, and then we've got another category for attention-seekers; so you might want to draw some attention to one of your elements in the in the creative. For example, this heartbeat animation I can kind of click that on and now that element is just going to do a little bit of a pulsing animation on a loop because I've just set it to "loop"; but there are many many different animations that you can try out. This one's kind of a jello sort of one, I can increase the speed to make it a little bit more impactful, slow it down a bit; so there's many different animations and it really just depends on your creative and and what kind of feel you're going for with the animation style.

You might be thinking it's pretty annoying to go through and and change a select box every single time when you want to change an animation, and I completely agree, so there's a few things that we can do to make the the selection and updating process of animations much easier so the first one would be just by simply doing a multi-select. I can actually click on any layers from any of the frames and you can see down here it's it's selecting all those layers for me and I can do a bulk animation and apply to all the layers I've just selected. For example, I can also de-select them, so I'm just going to get rid of some of these layers now. For example, if I wanted to change the first two layers of this frame to have a certain animation or the first three I can just select those three layers and then down here I've got the same animation options; in this case I'm just going to do this flip-in animation and I'm just going to change that actually to be a rotation so you get a little bit of a preview down here of that, and you can adjust the speed beforehand and when you're happy with it you can just click on "apply animation" to (in this case) three layers.

So, I'm going to click that button and what that's doing is: it's applying our animation that we just set to those three layers, so you can see here it has applied the rotation animation to those three layers, but also the timings that we set for those animations as well. So now all these are the same timing and the same animation, and if we play that back you can see they're all coming in at the same time another way we can go about doing this which can be helpful if you want to do it for an entire banner would be just to click on the select box at the top of the banner and that will select the layers that are inside of that particular banner so you could do this for multiple and and do that quite easily and just apply one style to every single thing every single banner if you wanted to; but in this case I don't want to do that, but that is an option.

Another way that you can target layers is by using this drop-down in the top. This "quick select layer names" drop-down if you open that up we can see that we can actually select layers based on their type and name so it categorizes a by the type so got frames rectangles and text and then each layer name will be grouped based on that naming being similar. In this case, if I wanted to select all of the background images, I can simply click on this match a background rectangle, click on that and you can see here it's pre-selected all of those layers based on that name. What that now means is I can apply an animation specifically just to that type of layer or that layer name, so in this case I might change it to a fade-in and you can see down here I've just kind of configured that and get a bit of a preview of what it's going to look like, and when I'm happy with that I'm just going to click "Apply to 11 layers". I'm going to do that now and you'll see it update in real-time, so it's just shifted it to be a delay of 0.6 seconds as a fade-in and you can see all of the layers have just been updated. If we replay that now, I've got our animations and now we've got to fade-in instead of the scale-up animation that we had previously, so that's a really easy way to target specific layers as long as you've named them to be the same and as long as they're the right group that you want you can very easily switch between those and target them so it's a really quick way of making updates and a really nice way to apply a bunch of animations after you've sort of played around with it in the preview window in real time, so I really like doing it that way.

There's also another feature that we haven't covered yet, which is these two magic settings: so we've got "magic delay" and we've got "magic speed". The other way you could think about this is by calling it something like "lazy mode", so if you're if you've been handed a design or you've been tasked with doing a design of a bunch of banners and you're on a crazy deadline and you don't have time to really finesse all the animations the way that you would usually really like to, this is a nice way to create some animation offset without having to manually go through and do it yourself. What I mean by that; it's probably easier if I just show you; so if you click on the "magic delay" select box, you'll get a bunch of options for offsets so in this case I'm going to click on 0.4 seconds magic delay and you'll see what happens when I click that now. I'm just going to click that and you can see the whole timeline has just completely shifted as far as the delays go, so we selected 0.4 seconds and so what that's done is it's actually added 0.4 seconds to every layer in a cascading manner, so you can see on the right-hand side all those animations are now cascading in terms of when they start the playback and this gets applied to every single banner in your creative.

That's a really easy way to make updates to all of your banners at the same time without having to manually add all those different offsets if all you really want is a simple cascade so that's back down to a little bit less and we can just keep changing and do a happy with it so this is a slightly quicker one okay we can even quicker so we might be happy with that and then the other side is kind of what you would expect as well. In this case the magic speed will change all of the layers to have exactly the same speed, so what I'm going to do is I want to change it to make everything have 0.7 second speed, so I'm going to click that and you can see all the layers are now have exactly the same speed so that's that's a pretty nice way of easily creating cascading animations without very much effort at all. These kind of work independently of each other, so if you did want to have different delays over here, just some sort of crazy delays with different speeds, so if I wanted to set this if I want to set the same speed on all of these layers but keep all the offsets that I've already manually set I can still change the speed and the offsets won't be affected. So, if I change that to 0.5 you can see it's pulled back to where all my offsets already were so it's not going to mess those up unless I specifically override the delay, so it can be pretty nice if you just want to play around with speeds or play around with delays, but you've already kind of got your speeds or delays sorted and you just want to kind of automate the other one so that's a really nice way of doing that.

What I'm going to do is I'm just going to change all of these to be similar, so I'm going to quickly go through and show you how I can just quickly make all these banners look good with that much effort. In this case, I'm going to use a fade-in-bottom for all of my brand names and I really want that to come in first, so I'm just going to change that and apply it so all my brand names are now fade in bottom I can see that over here that's pretty nice and then if I go to the brand characters that's going to let me pick another animation so in this case I'm going to do the same thing and do a fade-in-bottom, and I'm not going to be too worried about the delay because I think I'm going to cascade those up myself in a second using the magic delays, then I'll do the tagline and again we'll do a fade-in-bottom. What I'm going to do, is I'm going to set all of these to a 0.4 second delay let's see how that looks; so, it's probably slightly too slow, so I'm just going to speed it up a little bit. I'm fairly happy with that, but the one thing I'm not happy with is the background, so I'm going to just change the background to take much longer to fade-in completely. I'm just going do a fade-in and I'll see what that looks like. Okay, so that's just been applied you can just see it applying the timeline and I think that's better now that we've slowed down the fade-in a little bit.

So, now that I've shown you how to do the animation there's probably one more thing I'll show you before we export the banners. You can see over here; I'll use a bigger one actually so you can see; over here we've got all of our layout from Figma and so this one is for the square layer, so if I jump to that here and you'll notice if I make a change in my Figma frame you're probably wondering why is it still looking like that in the preview, and that's a good question to ask; and the answer is you have to refresh the data if you want to get that position updated in here; or add any layers or change any layers in Figma after you've opened Bannerify. So it's very simple, you just click on this little "refresh" button up here and you'll see in a second the new preview is loaded with the text in the brand new spot that's coming from over here, and we can see it here just in the corner where it should be. So that's perfectly perfectly normal to do that if you do need to make a bunch of changes and see those reflected in the Bannerify preview you can simply click on that "refresh" icon and you will see those pop right up.

I'm actually just going to leave that there for now just to kind of demo of what that's going to look like in a second, so once you're happy with your banners and the animations in them you can click on this big blue button up here which says "Export Banners to HTML"; so I'm just going to click on that and you'll see this panel pop out up the top here. We've got a little bit of a pseudo preview of roughly how the banners going to be exported or the preview page. Bannerify creates a custom preview page which basically loads in all of the exported banners to a single page that you can review and play all the animations on at once. This is really helpful if you're sharing a link around internally or sharing a link with one of your clients or you just want to get someone else's eyes over it for approval and so Bannerify will generate this automatically.

We get a few options here: one of the options is to use "dark mode", so this will change the background of the page to be in a dark mode setting, by default it's just the same gray as the Figma background. The other option we have which is sometimes the requirement for banners is just adding a black border to all of the banners so this is something that you can do if the creative or the brief requires you to add a black border, which is sometimes does. The other thing you can do is add a little preloader animation, so you can see these little animating spinners here, this is an optional setting which will show that spinner in place of just a blank square if you want to have a little pre-loading state while all the images are loading.

Finally, there's a setting for compressing your images, so depending on the use case for your banners, sometimes certain advertising providers have a certain limit that they impose on file sizes so if you do need to get your image sizes down to get under that limit you can play around with the image compression, which is built into Bannerify, and this will really help to reduce the image sizes that you would usually get directly from Figma. It will take slightly longer not much longer but it will take a little bit longer if you do decide to compress them so I'm just going to leave that off for now and I'm just going to leave all the other settings as default.

The second thing that you probably noticed is this export format select box. By defaultd this is set to "Vanilla HTML/CSS" and what that means is it's not loading in any code for a third-party advertising platform like these options here, so this can be really useful if you just want to put a banner up on your your own website or one of your clients websites but not necessarily link them to an advertising campaign or advertising platform it can also just be useful if you want to prototype an animation or interaction and display it as a banner and sort of send that around up with that in one of your prototypes or something like that; so the Vanilla HTML/CSS option is really good if you just want to get a bunch of code and use it however you want without any extra code specifically for advertising platforms. In this case, I'm just going to use HTML. The other option that you get with that is to put a URL in there; so if you don't put your role in there the banner won't have any links, it won't have any redirect on it, it'll just be a plain "div
and if you do put a link in there, that div will be rendered as an "anchor" tag with an "href" in it, so if someone clicks on it, it'll take them to whatever website or URL you wanted to put in here. In this case, I'm just gonna leave that off as well.

When you've configured all these settings, the final step is just to click on this blue button down here, which says "Export 11 banners". So I'm going to click that now; so now it's doing its thing behind the scenes, and in about one second you'll see a .zip file pop-up which you can save. So that's up here, and by default it's just the the format that you've exported and then today's date with the timestamp, and you can change that name if you want, to but for now I'm just going to leave that as as is. I'll just hit "Save", and if I jump to my desktop you can see this is a .zip file it has just generated for me. I'm going to double click on that, open up that folder and the first thing you'll notice is there's all these different folders which have the same layer names as we can see over here in Figma in the left hand side. The other thing it has done is prefix all of those layer names with the dimensions from each of those frames, so if we jump into one of these you can see there's a few files in here they all look like that so all the structures are exactly the same.

If we just go through these files really quickly: so it automatically generates a backup JPG for all of your banners, so this can be very handy especially for the advertising platforms, but you may just want that JPG export as well for other reasons. Then the "images" folder; this is providing us with all of the individual layers and images that we'll need. Text is rendered as SVG, so that's to keep the file size down to a really low number, so it's like two kilobytes for this one, and also have super super sharp quality regardless of what kind of screen you're rendering it on compared to PNG, but the PNG looks looks pretty good as well and the file size is pretty low if you're just using it for things like buttons.

But the key thing that we want to look at at the moment is just a quick snapshot of how everything kind of turned out in the render so I'm just going to click on this "index.html" file that was in the root of the folder we just unzipped. If I click on that you can see here this is all of the banners that we just exported from Figma, so if I resize, you'll see that this page is completely responsive; it will automatically figure out the best place to put the banners, so you have a really nice preview page and I can keep keep dragging that out. The other neat thing is this little "play" button up here, so if you wanted to replay those animations over and over again you can just keep clicking that button and you'll see those all play in sync, which can be really nice if you just want to get a overall view of how everything looks and interacts together this can also be handy if you know that there are certain banners that are going to sort of interact with each other in some way from an animation standpoint, sometimes you might have multiple placements on the same page and they kind of play off each other or something like that depending on your creative.

So you can just keep replaying it, and of course if you're not happy with any of the animations you can just jump back into Figma update the animations or the positioning and re-export it just as we did a second ago. You can see here in this square frame up here (the 250x250), it has reflected the change that we just made while Bannerify was running, so that's this change down here that you can see just in that top right position. So that's the other really neat thing, is that typically if you're not doing this automatically when there are these positioning or sizing or animation changes usually you know a developer or somebody building the banners will have to re-save all of these assets from Figma and re-calculate all the positioning by going to the code tab over here and kind of figuring out all the different offsets manually and then updating the code once again, with Bannerify, that's no longer an issue. It's really nice to just be able to reduce that feedback loop to zero and just keep iterating on creative and iterating on animation really easily.

There are a few small things I just wanted to point out as well before I move on to a fresh canvas to show you what that looks like. So, if we rerun Bannerify for a second, there's a couple of things to note. The first thing is that all of the export settings are kind of preset if you don't certain the export settings on your layers so what I mean by that is if I click on the "Book Now" button or any of the the "Book Now" buttons, you can see down here I've got a an export setting of "PNG" at "2x". Because this frame has a transparent background on it, I really do want that as a PNG, but by default the Bannerify is set to basically fall back to saving things out as a 2x JPG if any layer doesn't have an export setting on it, and that's more just to be on the safe side if if everything was made to be a 2x PNG or a PNG, the image sizes would get very big very quickly and oftentimes there's no transparency or there's no reason to need that PNG; so that's the reason why it defaults to a JPG. It is worth noting if you do have any transparency on any of your layers image layers, you just want to go ahead and set the export setting to PNG at whatever resolution you require and then you text layers as I mentioned before will automatically get saved out as SVGs, so you don't have to worry too much about that.

So I'll quickly re-export these in dark mode with image compression as well just to show you a little bit of a different setting. What I might do is just set that to like 75 or 85 and I'm actually just going to leave the rest the same just so we can compare sizes. I'm just going to export that again and we should be able to save this zip in a second; as I mentioned before the compression setting will take slightly longer because it has to go through every single image and compress them, but you can see it's already finished and the image savings that you get is definitely worth the extra time. I'm just going to open up the brand new .zip, and before I do that, the thing you'll notice here is how the .zip archive size has gone down from 3.2 megabytes to 831 kilobytes and that's completely due to the fact that we just enabled image compression and set it at level 85 in this case. If you need to get that down even more you could add even more aggressive compression, but even compression at a higher level like an 85 to 95 will really get that image size down for all of your banners, so I think it's definitely worthwhile.

If you open this up, I'm just going to re-open the "index.html" preview page and now you can see we've got dark mode enabled as well, and because we're running this locally you might not be able to see the image loader for very long, but you sort of get a glimpse of it in the background there as well. Once again the play button can just be clicked infinitely, and you can just keep watching those animations. So that's what dark mode looks like, I think it looks pretty cool depending on your creative, and also helps to simulate if your target website is darker or lighter, but also depending on what kind of creative you're using the dark mode can look kind of nice as well; compared to the the light one this kind of looks much nicer I would say, so that's that's what dark mode looks like that's what the loading looks like. That's just the infinite kind of refreshing that you can see, and the positioning update I made on the square has been rendered now, so in the first one we moved the text up here but in the second one I reverted the text to be back down here and you can see straight away it's it's moved without me having to rewrite any code which is super nice and that'll of course apply to animations as well it'll just keep updating it depending on whatever you've updated into Figma.

That's that's roughly what that looks like, so I'll just close that off so this was obviously using the the file that I already designed as an example which you're more than welcome to use and grab from the Figma Community files if you just want to have a bit of a play around with it as I have just been doing, but the most likely outcome is you're going to want to do this from scratch so I'm just going to give you a quick demo of what that looks like if you're running the Figma plugin from scratch. This is a completely blank Figma page and I'm just going to re-run Bannerify here, and you can see this is a completely different state to what we're used to seeing from the last couple of times we run it. The reason this is showing up is that document is completely blank, we have no frames so far, so it gives us a couple of options: one is to look at the example file that we were just looking at, so if you click on that it'll link you straight to opening that Figma file that we were just working in.

The other option is it'll quickly scaffold out a bunch of the most popular sort of sizes for banner ads and you can pick and choose which of these you actually would like to use, so you can turn them on and off. In this case I might just get rid of the smaller ones in my case so now I'm left with nine, so you can see here it's kind of telling you how many it's going to create and when you're happy with that you can just click on "Create nine empty frames" and it's immediately added those to our Figma file. You can see down here it just created all these brand new fresh frames for us to design things in and it's named them set all the correct dimensions and they're ready to go, and the Figma UI the Bannerify UI has changed to reflect that as well, so it's loaded in all of the blank previews these are all have nothing in them at the moment and the kind of prompt here as well is now asking you to add some layers to to these different frames, so we can we can totally do that and now.

You can basically just design it as if you were designing anything, so you design your normal layers; we'll do a text layer and I'll just put put a little bit of a "hello world" in there (way too big), so we can throw them in there, I might design an image, so just using the Unsplash plugin; I don't know what this is, but I'll just use it anyway. I'll just drop that in there; okay, so this is a very meaningless banner, but I'm just going to re-run Bannerify with that and you can see it in here; it has picked up on my brand new creative (which I'm very proud of) and what it's done is by default it applies a simple fade-in animation and cascades that to 0.3 seconds with the speed of 0.5, so that's basically mimicking what we were looking at before with the magic speeds. It essentially defaults to a few magic speeds for any new creative that you want to roll out, so that's just a really nice way to have some animation to serve as a starting point, but of course that can be that can be changed, so we might want to do something a little bit different. We could do a puff-in, so we might want to make that a little bit longer, and this is working exactly the same way as we were just playing around with the other other banner campaign.

You can just keep messing about with these and it really just depends on the creative and the brand or the style that you're trying to go for, so we could do something a bit wacky here; maybe the jello one again; well this one that's a bit crazy; you can loop that; we probably don't want to do that version, but that's a rough idea of how it could look. Same thing if I need to update the layer position, I can just update it here, "refresh", and you can see that come in there now. In this case, I'm actually just gonna get rid of all the other frames; oops, wrong way; so, I've just got rid of all the other frames and I'm going to refresh this one. I've decided all I want is the medium rectangle, so I'm just going to hit "Export" and it's exactly the same process; I'm going to compress the image, Vanilla HTML/CSS and actually I'm going to make this one a DoubleClick one I'm going to save that.

So, it's very quick, with just one banner, it takes less than a second. Once again, I can click on that to see my preview pop right up. It's probably worth noting as well you can of course open up the "index.html" file for each banner, so if I open up that one, you can see that come in quite nicely just on its own.

You might also notice this tab that we've just opened with the preview page, you'll notice it says "Page 1" compared to our other one, which had this other title much more relevant to our campaign. If you do want to change that title, all you need to do is go to your page up here in Figma, double click on that and change the page name. I've just re-run that for you to show you what that's going to look like, so I'm just going to export that, save it and there we go; you can see it's got "Hello World" there instead of "Page 1", so that's what that looks like.

The other thing you can do to relaunch Bannerify if you don't want to continually go to "Plugins" is this new feature that Figma has just released, which Bannerify has included. So, it's clicking on this little bear icon over here (the Bannerify icon); just click on that and it will relaunch Bannerify for you, so you don't have to keep opening the Figma plugin. That will only show up after you've already manually run the Figma plugin once, but once you've already used it in your file or in your Figma page, this will be available to you to keep re-running the Bannerify Figma plugin very easily.

So, that's an overview of pretty much everything you need to know to animate and export production ready HTML banners directly from Figma. If this is something that you do very often, I hope that having the ability to re-generate HTML and CSS within a couple of seconds is going to be really helpful to your workflow; that's the reason that it exists, to solve that problem, so I hope that you enjoy using it and I look forward to doing another Figma tutorial once I have more to share about Bannerify and other Figma plugins.

---

---
type: tutorial
title: How to compresss images in Figma using TinyImage
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-01-23T00:00:00.000Z
dateModified: 2020-01-23T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-compresss-images-in-figma-using-tiny-image/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-compresss-images-in-figma-using-tiny-image.md
---

# How to compresss images in Figma using TinyImage

#### Video Transcript

Today we're going to see how to export compressed images directly in Figma using a Figma plugin called TinyImage. To get started, if you haven't already downloaded it, you want to go to the Figma plugin directory; just click on the Figma icon in the header, then click on "Plugins" in the left, then click on "Browse all plugins". Then in the search bar, if you just type in "TinyImage" (one word) you'll see it pop right up. I've already got it installed, so that's why mine has an "installed" status, but if you haven't installed it, just click on the "Install" button there and you'll be able to use it straight away.

Once you've installed it, you can jump back to your project and you should see it in the Figma plugins panel. To access the Figma plugin panel, you can right-click anywhere on your page and go to "Plugins" and then "TinyImage JPG/PNG Compressor". I'll click on that and that's loaded the Figma plugin for us, and it's automatically retrieved all of the layers that have any export settings on the images; what I mean by that, is if we click into any of the images here you'll see on the right-hand side (outside of the plugin area) that we've got some export settings attributed to all of these images.

All of these have different export settings and you will notice that the PNGs just have one and the JPG photos all have two, so that's being reflected in the list of images in the plugin. We can see the description of the settings on the right hand side, so we've got 1x JPG, 2x JPG, 1x JPG 2x JPG for all of the photos and then for all of the PNGs we can see they're all 1x PNG, so what that means is we get a complete overview of all of the exportable images in the file, so only images that have export settings will be included in the options a list of images for exporting from TinyImage.

We can see that by jumping into all of these images here, so if you don't necessarily want all of them you can go through and uncheck any that you don't actually want to compress or export. You can either do that one-by-one just by flicking through them or you can unselect all of them; so you can click on this top checkbox right at the top of the list, if you click on that it'll unselect all of them. The same thing happens if you've already selected some of them; to select them all you can click on the top checkbox again and it will reselect all of them. You might also want to unselect by image, so if you click on any of the images, you'll see that it'll only select the exports for that particular image.

So that's a really quick way of either unselecting images. If you just wanted to quickly unselect these three images you could click on each of them, or click on the top checkbox and unselect them, and then when we unselect our images you'll see they've been unselected from the whole list; that can be a nice way of doing it. The other thing you might want to do is just include one image or one frame, or two frames. For example, I might just want the Mt. Fuji photo and the matcha photo, so I can multiple select those and in the Figma plugin it will just pick up on those four, and only those will be selected (provided that I've kept these checkboxes checked). So that's how you can go about selecting the images.

Let's just do a test so we can actually see it in action, so I'm going to convert compress a few images here. I've got two icons, so I'm just going to do the 1x, and we've also got this photo up here which I'll do as 2x. The default compression level is 85, but you can move this up and down to your liking; it goes all the way down to "ludicrous mode", which I don't recommend for most images, but it can be handy if you really need to get crazy image savings. However, the default is is 85, so we might just try that for now and see how that goes. So just click "Compress", and then now it's compressing the four images that we selected for exporting. You can see it has already finished the PNG and the JPG and now it's doing the 2x photo of the shop that we also exported.

You'll see up here it's actually popped down a little window for me to save it. The default file name is just "tinyimage" with the date and time, so it doesn't conflict with anything else you've saved, but I'm going to just rename it to "saved-compressed-1" so we can find it easily. If we go back to my desktop, you can see it has saved our image as a zip, and this zip contains all of the image files we've just compressed. If I open up that file, you can see we've got our four images in here, so there's all the four we just exported they're looking pretty good.

If we go back to Figma it's nice to see this breakdown of all of the compression that was done, so we can go through each line and actually check how much was saved per image. In the case of the 2x JPG of that shop photo, it's gone down from 6 megabytes to 1 megabyte so it's an 83 percent saving. The icons or the PNGs have gone down; this one has gone down from 16 kilobytes to 4 kilobytes, so it's a 75% saving. The next one is 75% and the matcha image has gone down from 3.2 megabytes to roughly 500 KB, which is 84%. Then the notification bar will also tell you a total of how much was saved overall; so overall, between these four we've saved 83%, which is roughly 7.5 megabytes, which is quite good. Those savings obviously compound the more images that you you actually compress, so that's pretty neat.

Once it's done you can just go ahead and click the close button in the plugin, that'll just get rid of the plugin. If you do want to export other sizes, you can do that as well. As I showed you before, if you need to change these around, so let's just say with these icons we actually want multiple resolutions. I might want a 2x and a 3x PNG, so if I add a couple more layers to those, I can do that with these ones. I might just want to get rid of some of the export settings or I might want to include extra settings, but I'll show you what that actually does. If I add another one back onto here; so I've just added another export setting; a 2x JPEG setting, just on the Mt. Fuji photo. I've removed them all from the other ones, and all of these also have 2x now, so what I'm going to do is rerun the Figma plugin, which you can do by the right-clicking and going back to "Plugins" and then clicking "TinyImage JPG/PNG Compressor" or you can just click
Run last plugin" (and there's a keyboard shortcut there as well), so I'm just going to click "Run last plugin", so you can see this time our list is looking slightly different, and that's because I just changed those export settings before I ran TinyImage again. If I click on the sushi icon, you can see over here in the official Figma interface (outside of the Figma plugin) all of the export settings that we just updated have been reflected in the plugin. So, we've got 1x, 2x and 3x for this particular PNG, and again, I can choose which ones I actually want to compress. From there I can do none, or I can do just one or two; and if I click out of that again, you'll see down here that some of the 2x ones have been removed and a couple that we just wanted back in there have been added. So it's just the Mt. Fuji one now that's got 2x and the other ones don't have 2x anymore.

All of the settings and images in TinyImage come from the Figma settings, and and that's the same way that the the native image exporting works as well. If I open up that so you can see on the right here I've just opened up the official native Figma export feature so this works the same way, so if I don't select anything and then open it, you can see it's doing a very similar listing of the images, and again, you can you can re-select them, change the selection, click on the selection (actually it does close it whenever I change the selection so I have to keep reopening it), but fundamentally it's very similar and and that's to remove the learning curve being totally different from the native export. It's kind of just the Figma exports with "ludicrous mode" built-in (quite literally).

So what we might do is run it again with these new exports. In this case I'm just going to do it for the sushi; and I'm going to select all of them; and I'm going to put this quality down quite a bit. I'm going to put it into "aggressive mode"... actually, I'm going to put it in "ludicrous mode" just for fun. I'm going to set it to "ludicrous mode" and I'm going to click "Compress". So I've just got these three selected, now I'm going to click "Compress" and it's going to compress those icons for me using different settings. So now we're in the "ludicrous mode" setting and if I save that; I go back to my desktop; you can see I didn't rename it this time, so it's just saved as "tinyimage" and I'll open up that. You can see it has saved out my three three images, so that's in 1x, 2x and 3x. If we jump back here, you'll see the savings on those images have gone to 79%, 81%, and 79%, so a total of 80 percent saved. All those are PNGs, and because the PNG icon is quite smooth and the lines are quite quite simple, the compression isn't as noticeable (even at that extreme), so it's a good way to save file size without actually losing much quality. you probably wouldn't want to do ludicrous mode for high quality image or images like, this I can show you what that looks like, but you're probably not going to want to do that. What I'm going to do is I'll I'll export this one and a re-run TinyImage, and and you'll notice that if I open TinyImage with a layer selected it'll automatically just load up that layer, where as if I load it up without any layers selected, it'll just default to showing all of the layers with export settings on them in Figma. If you do really want to do a quick export of an image, the way I usually do it is just right-click it and click on "Run last plugin" or "TinyImage JPG/PNG Compressor" (or use that shortcut for running the last plugin) and just open it up with the layer selected and you'll see it pre-selects that particular image with those export settings. So that's a really quick way of doing it if you just want to export one or two layers, you can do that really easily and pre-select them. So I'll export these ones at a lower quality, so I'm just gonna move this down, so I might do like "55" or something and see what that looks like. I'm going to compress this at "55" and see what happens; I'll actually get rid of the matcha and I'll just do the Mt. Fuji. So at "55" and click "Compress"; it's compressing those two now, it has finished the 2x, and finished the 1x.

I'm just going to save that and rename it. I'm going to save that to my desktop I'm gonna check that out. I'll just unzip that .zip file, and I can see it's got my two images; Mt. Fuji at 1x and 2x. That was set at "55" quality, and it's actually pretty good; you can notice a little bit of artifacts around the mountain in the 1x, but the 2x one is actually quite good, I'm not noticing many artifacts at, all which is cool. Then if we go back to the the output, so at quality "55" you can see we've saved 93% exactly on both sizes. This was just for 2 images, so we've gone down from 2 megabytes to 138 kilobytes, and we've gone from 5.5 megabytes or 5.6 megabytes down to 383 kilobytes; so in total just off those two sizes of that image we've saved 7 megabytes. So, that's 7 megabytes that won't have to go down the wire to any anyone using our website or on our on our blog, or loading it on an email or banner, or whatever it's being used for, on an e-commerce page.

So that's just an example of how you can save quite a bit of data for users using TinyImage, and and you can experiment with this, as I'm just showing you with the slider. You can experiment with this so if you if you find that "55" is too aggressive in that case, you know you could try "65" or you could just kind of bump it up in increments of 10 and and compare the outputs to see which one suits the kinds of images that you're using. It all depends on how detailed the images are how big they are in terms of resolution or dimensions, and same for PNG's; PNGs work really well for transparency, so these icons for example are perfect for PNG, however, if you were going to set these kinds of photos as PNG, it'll still compress them, but you won't get nearly as good as saving as you would if you are setting them to JPG; and the PNG compression is just going to take a bit longer as well with the the photos. So, typically I would use JPG for the photo style ones, and use PNGs for anything that you need transparency for.

So, I hope this has been a helpful intro to compressing images in Figma, and if you have any questions please reach out, but until then I hope you've enjoyed it and I look forward to giving more Figma tutorials like this in the future!

---

---
type: tutorial
title: How to export favicons from Figma using Favvy
description: Follow along with this step by step Figma tutorial video
datePublished: 2020-01-22T00:00:00.000Z
dateModified: 2020-01-22T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/tutorials/how-to-export-favicons-from-figma-using-favvy/
markdownUrl: https://www.hypermatic.com/tutorials/how-to-export-favicons-from-figma-using-favvy.md
---

# How to export favicons from Figma using Favvy

#### Video Transcript

Today I'm going to show you how to create favicons for your website directly from a figma project. The first step if you haven't already installed it, we're going to download a Figma plugin called "Favvy".

If you click on the Figma logo up the top here, and then click on "Plugins" and then go to "Browse all plugins", you'll see the search bar up the top. Search for "Favvy", and if you haven't installed it, you'll see a button that says "Install". I've already installed it, so that's why mine looks like that, but once you've clicked "Install", you can jump back to your project and you'll immediately have access to Favvy in your Figma plugins panel. To access that, you just right-click anywhere on the page, go to "Plugins", hover over that, and then you'll see "Favvy Favicon Exporter", so that's what we're going to click on.

You can see here that there's only a few things we need to pay attention to; there's the empty placeholder state, which is telling us to select a single square layer, and it's recommending that that should be at least 512 by 512 pixels in dimension, and then there's a couple of fields over here; one is for website name and the other one is for theme color. Perhaps if we just select one of the frames that we've got set up here, so for example we can select this the Favvy icon, and by clicking that you can see it's immediately giving us a bit of a preview of how that icon might look at different icon sizes (different favicon sizes) that different websites and different apps will actually use. For example, this one at the top is the 16 by 16, so that's one that you might see in a Chrome tab or Chrome toolbar; this is the 32 by 32, this one 64 by 64, and 150 by 150, which is used for things like iOS devices and things like that.

So it just gives a little bit of a snapshot upfront of how that might actually look and scale across different sizes. If we change the layer, you can see here, it immediately reflects that change in the preview panel in Favvy. We can we can switch between these and it will just keep switching the preview as well.

Let's try exporting this one just as a test. So the website name field is actually where you can put the name of your site; this will show up in certain certain applications, for example if you're building a progressive web app and somebody saves the the website or they app to their desktop, sometimes this is used as a name reference, so I'd keep this pretty short and I would just give it the name of the website without any extra title or anything like that.

Then the theme color; this is also something that's used by certain browsers, so if you've noticed if you use Chrome for example on your mobile device, on Android, you'll notice that sometimes the chrome area of where the URL bar is and where all the controls are at the top of the the browser, sometimes when you visit certain websites you'll notice that that color changes; so setting this HEX value here is going to influence what that looks like. By default, we can just leave it as "white", so if we pop in the white HEX value (#ffffff), which it will default to anyway if you actually don't include a value, so you can leave that out; likewise with the website name, these are both optional, but for now I'm just going to export them with the two fields filled out.

Using the Doge icon, I'm just going to click "Export Favicons"; and you can see it's already finished! It's ultra quick, it takes less than a second to do all of the work. Up here you can see we're being prompted to save a zip file, so by default this is named as "favvy" with today's date and the time, just so it doesn't conflict if you're exporting a few different ones to try a different designs out. You can rename that, so I might actually just rename that one, and I'll just call it "Doge". I'll save that to the desktop.

Then the other thing that we've got is a little snippet of HTML, which we can use in our own website. There's a little button here to "Copy HTML" if we like, so I'm going to copy that HTML by clicking the button. Now it's telling us that the HTML has been copied to the clipboard, so what we can do is to now have a look at what that actually generated.

You can see here we've got a zip file that we just saved, so I'm just going to double click on that and I'm just going to open this folder and you can see here we've got a whole bunch of files. I'm just going to go through them. So we've got the Android Chrome 192 by 192, Android Chrome 512, the Apple touch icon, we've got a browser config file (which is used for Microsoft), and this is the 16 by 16 PNG, 32 by 32 PNG, this is the sort of old school (but still necessary) favicon.ico; so this is kind of the default favicon that a web server will look for, and there's multiple image sizes embedded in this .ico file actually, so that's a really good one to have. The ms-tile is again used for certain Microsoft applications, and finally we've got the site.webmanifest file which is used for progressive web apps or "PWA"s, as I mentioned before.

So what we can do is we can actually take these files and we can use them in a website that I've kind of just thrown together; it's just a very simple HTML file. What I'm going to do is, I'm going to go into my website folder, so this is the example I've created and I've already got an index.html file in there. I'll open up my editor as well just so you can see that so what I'm going to do. I've just copied all those files and now I'm going to paste them into this folder, so all of them go into the root of the project folder. So what I can do is, I've already copied this HTML to my clipboard (if you haven't, that's totally fine, as the zip also includes a file called head.html, which has exactly the same content but sometimes it's easier just to click that button to copy it straight away which I've just done), so I'm going to drop that in there. I've just pasted all of the stuff that I got from the clipboard in Figma, I've just dropped that directly in my head tag in my sample index.html file, and what I'm gonna do is open up this file locally just to show you what it looks like.

You can see here I've got my favicon example page which I've just loaded up, which is the one we're looking at in the editor window here, and you can notice up the top there's a favicon and it's our little Doge that we exported a second ago. That's all working as expected, and so we can see in here it's linking to all of our all of our icons. Our webmanifest here; and to see what's inside of that, I'll open it up in in my code editor so this is the site.webmanifest file, you can see here it has taken what we put in from the Figma input in Favvy and our color scheme. So we just put the HEX code for white, so let's put that in as the theme color and the other file is generated is the browser config file which is pointing to the ms-tile file, which we've also generated here and it's also taken that color value and set it as the tile color.

The plugin has done all this work for us, we didn't have to generate any image sizes, we didn't have to export any images manually, and all of the code has been generated for us, all of the files have been generated for us; so it really is as simple as dropping off the generated files into the root of your project directory.

You can actually delete this head.html file if you're finished with it, that's more of just a thing in case you forgot to copy it from Figma when it generated, so you can you can actually delete that if you like; it doesn't really matter if it's there but I'll just delete that.

That's as simple as it is to generate these files. There's a couple of other things we can do, so if we close this off again. This one that we've just done is a a transparent frame, so this is just an SVG file that I've dropped in, but sometimes you might want to have a background and you might want to have something that's not totally transparent. So what I'm going to do is I've just grabbed a frame, just a regular frame in Figma, and I'm just going to draw that out. I might as well just set it as 512 by 512, so this is my new icon, and what I can do is I'll grab this other icon and I'll pop it in there. If we want to have a background on this icon or even have some padding on this icon, what we can do is we can select the icon inside of the frame, so that's nested inside of the parent frame, now I'm just going to give it 24 pixels of padding around the edges, just so it's not completely flush with the sides because I'm going to add a background color and it might look a little bit weird if it has no space around it.

What I can do is I can click on the frame I can go to the fill over here, so I've got the fill property currently it's just set to white ,I'm gonna grab the color picker and I'm actually going to grab this pink color and I'm just going to shift that a little bit to be a slightly different shade. If I set it like that, so now the frame that the icon is sitting in has a background color and now what we can do instead of clicking on the the SVG of the icon itself, I'm just going to click on the frame and re-run the Figma plugin, so "Plugins", then "Favvy Favicon Exporter" and you can see here, it has taken our selection of the parent frame, and now it's showing us a preview of what it's going to look like with that background color. I'm actually going to grab this background color, so I'm going to grab the fill, get a copy of that HEX value, and I'm going to drop it into here; nd so now this is going to be used as our theme color in the progressive web app (PWA) file and that other file that it's generating.

I'm just going to re-export that now; click the "Export Favicons" button. This is a new one, this is the "favvy" icon so I'll export him to desktop and once again it gives us the option to copy the HTML, however, because I've already got the HTML in here I don't need to re-copy and paste that; all the filenames are exactly the same, so it makes it really easy just to find and replace those files every time. What I can do is check out my new zip file that I just saved, so this is the favicon, I can grab all of these files. I'm not going to include the head file this time because I don't really need it, I've already got that content. I'll copy these files, go back to my web site, paste, and then I'm just going to replace all of those. So, they've all just been replaced, now if I go back to my browser, I'm just gonna hit refresh and you can see it has immediately updated my favicon to use the new one that we've just exported.

This is just a really easy way to create and export favicons directly from Figma. As you saw, it takes less than a second every time, so the cost of re-trying is very low, and hopefully seeing that preview in Favvy (in the Figma plugin itself) is a really good way to save time without needing to re-export and constantly check what it's going to look like at different sizes.

So that's that's roughly the Figma tutorial for Favvy. Of course, this is going to differ depending on what kind of website you're using, in terms of what templating language you might be using, so you might want to create a different file just for your favicon code, but really, it's pretty much the same for any website as long as this code here is getting rendered in your head tag, and as long as these paths are referencing the files that you've generated, then that's all you really need to worry about; and you should be good to go.

I hope this has been a valuable Figma tutorial for anyone who is wondering how you can design an export favicons from Figma. I guess the answer is you haven't been able to (without using this Figma plugin), so if this is something that you need to do at your agency or need to do just for your own side projects, I would say this is (by far) the quickest and easiest way to get favicons exported directly from Figma.

If you have any questions please reach out to me, but until then I hope you enjoy the Favvy Figma plugin and I'm looking forward to giving more of these Figma tutorials in the future. Thanks for watching!

---

---
type: article
title: It’s time to get back to the future
description: Why I quit my full time job as a lead developer to start Figmatic and build a new future for design and development.
datePublished: 2019-12-21T00:00:00.000Z
dateModified: 2019-12-21T00:00:00.000Z
canonicalUrl: https://www.hypermatic.com/articles/it-s-time-to-get-back-to-the-future/
markdownUrl: https://www.hypermatic.com/articles/it-s-time-to-get-back-to-the-future.md
---

# It’s time to get back to the future

After working as both a designer and developer in digital agencies
over the last 10 years for world class brands like Nike and Honda,
I've seen the massive amounts of wasted time and inefficiencies caused
by doing things a certain way, just because that’s the way we did them
yesterday.

If the endless meetings, stand-ups, retros, Slack channels, emails and
everything else in between that distract us from doing what we were
hired for wasn't enough; our workflows in general, and how we think
about design and development specifically, are not working properly.
Even if you can't really explain why, just like being in The Matrix or
The Truman Show, you've probably felt that something isn't quite
right, just as I have.

We are constantly bombarded with the propaganda that “things are
moving so fast” and “we can't even keep up with all the rapid
technological progress”, but this is actually a lie that we tell
ourselves, because it’s simply not true. Certainly, when it comes to
the design and development process, things have actually not changed
very much at all. Stemming from using photo editing software to design
things for the web, the “handover” process between designers and
developers has remained largely unchanged for over 20 years. We
desperately need to get back to the future, but I think things are
moving way too slowly. Worse still, very few people seem to mind or
even be thinking about it.

When I co-founded the <a href="https://designops.lol" target="_blank">DesignOps Melbourne meetup</a> in 2018, I wanted
to find more people who shared my belief that we are not at the end of
history, despite evidence to the contrary, demonstrated by how
comfortable most people have become with the way we do things today.
The widely accepted way of designing and building things still
revolves around nudging static pixels and fake content around an
arbitrarily fixed size “art board” to try and emulate a totally
different medium/production environment that is dynamic and fluid by
its very nature.

Because of this status quo, where the source of truth for designers is
pixels and the source of truth for developers is code, most people
believe that we need to “bridge the gap” between design and
development; but I believe that the distance between design and
development should be zero.

Adding to that, there’s also a strange paradox where the people who
can help solve these problems (developers/engineers) are almost always
not interested in the problems to be solved, and if they are, they
usually don't have any free time to work on them; this is certainly
the case in a normal (chaotic) agency environment. The truth is that
many designers don't want to think about code, and many developers
don't want to think about design; so you end up with a Reservoir Dogs
type stand-off where nobody does anything and not much actually gets
solved.

Almost 2 years ago, I found out about a design tool called “Figma”.
While its multiplayer mode and everything else about it was very
impressive and clearly ahead of the competition, the thing that really
stood out to me was the fact that it had been built with web
technologies; unlike Photoshop, Sketch or any other desktop software
common in teams for doing design work. This is (by far) the most underrated
“feature” of Figma.

My interest was elevated when I tried the Figma API in 2018. It was
the first time I was able to read all of the design data from a
project immediately, just by using code to request it. I started to
build some software on my weekends at home to start automating common
tasks in my agency, like building production ready eDMs and HTML
banners from Figma designs with a single click. What used to take
hours, now took seconds. It literally made our old workflow 1000x
faster, and it instantly became unimaginable to go back to how we
thought about doing things before.

When I was invited to the Figma Plugins BETA in 2019, it planted the
seed in my thoughts of going “all-in” on Figma as the platform I
wanted to built on, in order to start solving some of the perennial
issues faced in all other design teams. I started to port what I
built with the Figma API over to native Figma Plugins, which could be
run inside any Figma design project. Being able to distribute these
outside of my own agency for the first time, I saw the potential to
bring my own 1000x workflow gains to other people working in design teams
suffering from the same problems &mdash; at scale.

Based on everything they have consistently promised (and delivered on)
so far, I believe that Figma is committed to building a new future
where the design and development process will look radically different
than it has for the last 20 years; combined with my belief that we are
not at the end of history and that there’s far more we could be doing
to start doing things better, I want to be a part of building that
future.

On December 20th, 2019, I ended my decade long career in digital
agencies and left my day job as a lead front end developer behind to
focus all of my time on solving these problems. With that, “Figmatic”
was born as a bootstrapped startup focused on building premium
plugins exclusively for Figma.

As Peter Thiel wrote in his brilliant
book, “Zero To One” &mdash; “Positively defined, a startup is the
largest group of people you can convince of a plan to build a
different future.” &mdash; Currently, that group consists of one
person (myself), but I'm optimistic that over time, I will be able to
convince more people of my plan to build a different future for doing
things in design teams (and beyond).

Figmatic will start off by releasing automation plugins which solve
some common time wasting tasks faced inside any design team,
followed by solving much bigger and more complex problems beyond
those. I am very optimistic that a much needed new future can be
achieved, and I'm excited about the years ahead as we work towards the
mission of getting the distance between design and production to
zero.

In the end, I hope we can help to free up more of people’s time for
much greater achievements, instead of it being wasted on doing the
tasks in a way that we assume are “necessary” today, only because
that may (or may not) have been true yesterday.

I won't be saving anything for <a href="https://www.youtube.com/watch?v=GM-znjDGubE" target="_blank">the swim back</a>.