# Event Speaker Image Workflow from Figma

> Prepare consistent, lightweight speaker headshots and session graphics in Figma for event websites, agendas, email, and partner promotion.

- Canonical page: https://www.hypermatic.com/articles/tinyimage-event-speaker-image-workflow-from-figma/
- Published: 2026-08-07T00:00:00.000Z
- Updated: 2026-08-07T00:00:00.000Z

An event team rarely needs one speaker image. It needs a headshot for the agenda, a wider session card, a social graphic, an email thumbnail, and sometimes a partner-ready file with a strict size limit. Multiply that by 40 speakers and a late replacement, and a simple image request becomes an export-control problem.

The useful goal is not “make every headshot look identical.” It is to create a repeatable system that protects faces, names, sponsors, and page speed while letting the event team replace one speaker without rebuilding the whole asset pack.

## Start with an asset map, not an export queue

Before touching the source photos, list every destination and the constraint that actually matters there. A practical conference might need:

| Destination | Typical composition | Main risk |
| --- | --- | --- |
| Speaker directory | Square or portrait headshot | Heavy pages with dozens of images |
| Session agenda | Small headshot plus title | Faces becoming unreadable at card size |
| Session detail page | Wider speaker or session graphic | Inconsistent crops between sessions |
| Email | Compact thumbnail | Large downloads on mobile connections |
| Social and partners | Branded landscape or square card | Text or logos entering unsafe crop areas |

Do not assume the largest canvas should become the universal source export. A square directory image and a landscape social card make different cropping decisions. Build named Figma frames for each destination, then use shared components for the photo, speaker name, role, session title, and sponsor treatment.

## Normalize source photos without erasing the person

Speaker submissions will range from studio portraits to phone photos pulled from LinkedIn. Create a short intake check before placing them:

- Confirm the organizer has permission to use the image.
- Keep the highest-resolution original rather than a screenshot of a profile page.
- Check whether the crop can leave comfortable space above the head and around shoulders.
- Flag images with baked-in logos, text, or another person in frame.
- Record any requested credit or usage limitation outside the visual layer name.

Use one focal-point rule, such as aligning eyes to the same horizontal guide, but allow exceptions for hats, hair, mobility devices, signed interpretation, or environmental portraits. Consistency should make the directory easier to scan; it should not turn every speaker into an awkward crop.

If large originals are making the working file sluggish, [TinyImage](/tinyimage/) can downsize oversized image fills to the dimensions they actually need in the layout. Keep an untouched source archive elsewhere so reducing a Figma fill does not become accidental destruction of the only master.

## Build the Figma file for replacement

The real test of the system is whether a coordinator can replace one speaker at 4 p.m. without breaking six outputs.

Create a speaker component with stable fields and image containers. Use variants only for meaningful differences, such as keynote, panelist, moderator, or sponsor. Avoid a separate component for every destination if the same nested speaker content can feed multiple cards.

Name export frames so filenames remain useful after download. A pattern such as `event-speaker-firstname-lastname-destination` is easier to traffic than `Frame 184`. If files are grouped by channel, custom folder paths can keep website, email, social, and partner exports separated without manual sorting. The [custom folder path tutorial](/tutorials/how-to-export-images-with-custom-folder-paths-from-figma-using-tinyimage/) shows the underlying export workflow.

## Choose formats by destination

Headshots are photographic, so JPG, WebP, or AVIF will usually be more efficient than PNG. PNG still makes sense when transparency is genuinely required. Do not export a portrait as SVG just because logos elsewhere in the card use vectors.

For the website, agree with the developer or CMS owner on what the production stack accepts. A modern format is not useful if the CMS silently converts it to a larger file or the image pipeline already creates its own derivatives. The [WebP versus AVIF guide](/articles/tinyimage-webp-vs-avif-for-figma-exported-images/) helps frame that decision.

For email, prioritize broad compatibility and a modest pixel width. For social and partner packs, use the platform’s requested dimensions and file-size ceiling. When a destination specifies a maximum number of kilobytes, set that as the target instead of repeatedly guessing at quality percentages. Review the result visually: a technically compliant face with smeared eyes is not a successful export.

## Run a representative quality pass

Do not inspect only the best studio headshot. Test the system with difficult examples:

1. A dark photo with fine hair against a dark background.
2. A low-resolution submission that is already close to its display size.
3. Glasses, patterned clothing, or facial hair where compression artifacts show quickly.
4. A sponsor logo with small lettering.
5. The longest speaker name and session title.

View website assets at actual rendered size, then zoom in only to diagnose a visible issue. A compressed image may look imperfect at 400% while looking completely clean in its real card. Also load a representative directory page rather than judging files one by one; 60 “reasonable” images can still create an unreasonable page.

## Plan the change process before launch week

Maintain a small delivery sheet with speaker ID, approval status, source-photo link, export destinations, and last export date. When a title or headshot changes, update the source component and re-export only that speaker’s destinations. Do not ask partners to replace an entire ZIP archive for one correction without clearly identifying the changed files.

For localized events, keep translated session copy separate from the image treatment where possible. If words must be embedded, verify every language frame for wrapping and crop safety before compression. This differs from a general [localized product screenshot workflow](/articles/tinyimage-localized-product-screenshot-workflow-for-global-landing-pages/): speaker assets also involve identity, credits, and last-minute roster changes.

## Final handoff checklist

- Every speaker has approved spelling, role, organization, and photo usage.
- Crops follow a shared focal-point rule with documented exceptions.
- Export frames are named by speaker and destination.
- Photographic files use an appropriate raster format; transparency is intentional.
- File-size targets match the actual CMS, email, social, or partner constraint.
- Difficult headshots and long names have been reviewed at real size.
- The directory has been tested as a complete page, not just isolated cards.
- A replacement can be traced and re-exported without rebuilding the whole pack.

That workflow gives the event team something more useful than a folder of images: a controlled source they can update throughout announcements, agenda changes, and launch week without sacrificing visual quality or loading performance.