Convert a PDF brand guide to Figma
Turn the brand guidelines PDF you already have into Figma variables, text styles and components.
The short version
Upload the PDF. Kitform reads the colours (hex, RGB and CMYK values printed in the guide, plus the colours used on the pages), the fonts and type sizes, and the logos. You check anything it flagged, then build it in Figma in one step: variable collections, text styles, components and a gap report page.
What Kitform reads from a PDF
- Colours: values written in the guide (hex, RGB, CMYK, Pantone references) and the colours the artwork actually uses, matched up and named.
- Typography: font families, weights and sizes from the text on the pages, grouped into a type scale.
- Logos: vector or image logos, placed in a logo component.
- Gaps: everything the guide doesn't define, such as missing hex values, no spacing scale or licensed fonts, listed with what Kitform used instead.
Doing it by hand, for comparison
Most teams copy hex codes into Figma one by one, rebuild the type scale by eye, and only discover the gaps when a developer asks "what's the hover colour?". A typical guide takes a designer a day or two. Kitform does the extraction in under a minute and shows its working, so the day goes on the decisions, not the copying.
Tips for better results
- Use the PDF exported from InDesign, not a scan. Text must be selectable.
- If you have the InDesign file, export IDML too: it carries exact swatches and paragraph styles. See InDesign to Figma.
- Files over 100 MB: export with "smallest file size", or import from a Dropbox or Google Drive link.