Short answer: To dictate in Framer, install a system-wide dictation tool on your Mac, click into the text layer or CMS field you want to fill, hold your hotkey and speak. Nothing is installed inside Framer. Speak the prose and keep slugs, links and numeric values on the keyboard.
Open almost any half-finished Framer project and you will find the same thing: the layout is beautiful, the spacing is considered, the interactions are tuned, and the words say "Headline goes here." Design moves at the speed of dragging. Writing moves at the speed of typing, and typing is slow.
That gap is not a discipline problem. The average adult types somewhere around 40 words per minute. The same person speaks at 130 to 150. When you are three sections into a landing page and each section needs a heading, a subheading and a paragraph, the cost of producing that text at typing speed is what pushes people into placeholder copy, then into shipping the placeholder copy, then into a site that looks finished and reads like a template.
This guide covers how to dictate directly into Framer on a Mac and an iPhone, which surfaces are worth dictating, which ones you should never dictate, and the two traps that make design-tool dictation fail on the first try.
What dictating in Framer actually means
There is no plugin here. No extension, no integration, no permission to grant inside Framer itself, and nothing that changes how your project builds or publishes.
System-wide dictation works one level below the app. You put your cursor in a text field, hold a key, speak, and the text is inserted at the cursor as if you had typed it. Framer does not know the difference. That matters for a design tool, because designers are rightly nervous about anything that installs itself into a working environment they have spent months tuning.
It also means the same setup works everywhere else you write during a build: the browser tab where you are checking a competitor's site, the client email, the handoff doc, the Slack message asking whether the pricing tier is still called Starter. Voice Keyboard Pro runs from the Mac menu bar, and the flow is identical in every app: hold the hotkey, speak, release, text appears at the cursor.
Setup, and the hotkey collision that breaks it
The first thing to get right is the hotkey, because design tools are the single most likely place for a dictation shortcut to conflict with something.
Framer, like every other design tool, binds a lot of the keyboard. Single letters select tools. Modifier combinations move layers, toggle panels, insert components and switch between design and preview. If you pick a common combination as your dictation trigger, you will eventually hold it while a layer is selected and watch something in your canvas jump.
The fix takes thirty seconds:
- Set your dictation hotkey to one of the function keys in the F13 to F19 range. They exist in macOS, almost nothing claims them by default, and no design tool ships a default binding on them.
- If your keyboard has no F13 through F19, use a modifier combination that includes at least two modifiers and is not a standard system shortcut.
- Test it once with a layer selected and nothing in text-edit mode. If nothing in your canvas reacts, you are clear.
- Use the same hotkey across every app. The point of system-wide dictation is that the gesture never changes.
The second thing to get right is where the cursor is, which sounds obvious and is the single most common reason people conclude that "dictation does not work in Framer." Dictation inserts text at a text cursor. If you have a text layer selected rather than open for editing, there is no cursor. Double-click into the layer until you see the caret blinking inside the text, then dictate. In a CMS field, click into the field first. This is the same rule that applies in every canvas-based tool, and it is worth internalizing once: selection is not the same as insertion.
The rule: speak the prose, type the identifiers
Before the surfaces, the boundary. Everything in a Framer project falls into one of two categories, and the split is not about difficulty. It is about how errors behave.
Speak: headings, subheadings, body copy, feature descriptions, testimonial framing, CMS article bodies, meta descriptions, alt text, comments to teammates, client updates.
Type: page slugs, URLs, redirect paths, CSS values, breakpoint numbers, hex codes, font sizes, CMS field names, component and variant names, anything that goes into a code component, and any string that another system will read.
The reason is that prose defends itself and identifiers do not. If dictation mangles a sentence, you see a bad sentence and you fix it. If dictation writes /pricing-page where you said /pricing, you get a perfectly plausible-looking string that is silently wrong, and you find out weeks later when a link 404s or an analytics report has two entries where it should have one. The same logic applies to a spacing value of 24 that arrives as 240. It looks like a number. Numbers look correct even when they are not.
This is the same discipline that applies to dictating in Webflow and to voice typing in WordPress: the content layer is voice territory, the structural layer is keyboard territory, and mixing them is where people get burned.
Five surfaces in Framer worth dictating
1. Page copy on the canvas
This is the obvious one and still the biggest win. A landing page section is usually a heading of eight words, a subheading of twenty, and a paragraph of sixty. Typed, that is a couple of minutes of work per section plus the stalling that happens when you are staring at an empty text layer inside a beautiful layout and cannot think of anything good enough to put in it.
Dictated, the workflow changes shape. Double-click into the text layer, say the paragraph the way you would explain that section to a person sitting next to you, and let it land. It will be too long and too loose. That is fine and in fact useful. Editing down from something real is a far easier task than generating from nothing, and the long version tells you what you actually think the section is about.
Then cut. The cut is a keyboard job, and it is fast, because you are deleting rather than inventing.
2. CMS entries
If your site has a blog, a case study collection, a changelog, a job board or a docs section, the CMS is where the real word count lives, and it is where dictation compounds hardest. A landing page is written once. A collection is written every week for as long as the site exists.
Long-form CMS fields behave like ordinary text fields, which means dictation works in them the same way it works in a note app. Click in, speak a paragraph at a time, keep the structural work on the keyboard.
One habit is worth building here: dictate one field at a time and click deliberately into the next. CMS forms are dense, and fields sit close together. A single dictation that starts in the wrong field is not a disaster, but a routine of click-then-speak-then-verify prevents the version where you notice half a paragraph sitting in the excerpt field two days after publishing.
3. SEO titles and meta descriptions
Meta descriptions are the most reliably neglected text on any site, and the reason is entirely mechanical. They arrive at the end of the job, when the page is done and you are ready to publish, and they require you to summarize the whole page in a couple of sentences from a standing start. So people paste the first paragraph in, or leave it empty.
Spoken, a meta description takes about fifteen seconds: say what the page is for and who should click it, then trim to length. Do this for every page in a session rather than one page at a time, because the context is already loaded in your head and the marginal cost of the next one is almost nothing.
Type the slug. Always. See the rule above.
4. Alt text
Alt text is the clearest example of a task where the quality is limited by input cost rather than by knowledge. You know exactly what the image shows. Describing it out loud takes five seconds. Typing it takes thirty, which is why so many production sites ship with alt text that says "image" or nothing at all.
Click into the alt text field, say what is in the image and why it is on the page, move on. Across a media-heavy Framer site this is the difference between an accessibility pass that happens and one that stays on the list forever. The same argument holds in Figma for annotations and layer documentation, where the note that never gets written is the one that would have saved the handoff.
5. Everything around the build
The site is a fraction of the writing. There are canvas comments to a teammate explaining why a section was restructured. There is the client update at the end of the week. There is the note to yourself about which breakpoint still needs attention. There is the handoff message that lists what changed since the last review.
None of this is site content, all of it is text, and it is usually the writing that gets compressed into three words because it is the fourth thing you have typed in ten minutes. Dictating it costs almost nothing and the version you speak is consistently more useful than the version you type, because you say the reason as well as the change.
Smart Vocabulary: the step that stops people quitting
The most common reason people abandon dictation in a design or marketing context is not accuracy on ordinary English. It is that the twenty words they say most often are proper nouns: the client's company, the product name, the internal name of the design system, the three competitors referenced in every strategy doc, teammates' names.
Transcription of general speech is strong. Transcription of a made-up product name it has never encountered is a coin flip, and correcting the same word fifteen times a day is exactly the kind of friction that makes a tool feel not worth it.
Voice Keyboard Pro's Smart Vocabulary is a personal dictionary with replacement rules. You add the terms you actually use and they come out right from then on. Build it after two days of real use rather than in advance, so the list is drawn from your actual corrections instead of your guesses. For an agency running several clients, this is the difference between dictation being a novelty and being infrastructure.
On iPhone
Framer work happens on a Mac, but a surprising amount of thinking about a site happens away from one. You look at the staging URL on your phone, notice the hero reads badly on a small screen, and then either type a fix with your thumbs or forget it.
Voice Keyboard Pro on iPhone is a keyboard with a mic button built in, so it works inside whatever app you are already in: the note where you keep the copy fixes, the email to the client, the message to your teammate. Voice Edit lets you speak a change to text you have already dictated, which is genuinely faster than thumb-editing a paragraph you want to shorten.
Two-way translation while dictating covers 24 languages, which is useful if you are building a multilingual site and want a fast first pass at a section. Treat it as a first draft. Published marketing copy in a language you do not read should be reviewed by someone who does, every time.
Troubleshooting
- Nothing appears when I speak. Almost always no text cursor. A selected text layer is not an open text layer. Double-click in until the caret blinks, then dictate.
- My canvas jumps when I hold the hotkey. Hotkey collision. Move to F13 through F19.
- Single letters are triggering tools instead of typing. You are on the canvas, not in a text field. Same fix as the first item.
- Text is landing in the wrong CMS field. Click into each field before speaking, and treat one field as one dictation.
- Escape or Return is committing before I finish. In dense form UI, Return can close the field. Finish the dictation, review, then commit deliberately.
- It works in the browser but not the desktop app, or vice versa. Both are ordinary Mac text-input contexts. If one behaves differently, check that no other app is holding the microphone and that the same hotkey is not claimed in that context.
- Punctuation is not landing as expected. Speak in complete sentences with natural pauses rather than dictating fragments. Our accuracy guide covers the habits that make the biggest difference.
Honest limits
Voice Keyboard Pro types text at your cursor. It does not design anything, does not control Framer, does not create layers or components, and has no spoken commands for the canvas. There is deliberately no "select the hero section" voice command, because voice control of a design tool is a different product with a much higher error cost.
It needs a connection, so an offline session is out of scope. It runs on macOS and iOS. And voice is audible, which matters in a shared studio: dictating client copy in an open room means the room hears the client copy.
On privacy, our server stores only operational pings. No audio and no transcript content is stored server-side. If you are working under an NDA that is specific about where text may be processed, read the policy yourself and make your own call rather than taking a blog post's word for it.
A realistic first week
Do not try to convert the whole workflow at once. Start with the two surfaces where the payoff is immediate and the risk is zero: alt text and meta descriptions. They are short, they are pure prose, they are currently being skipped, and dictating them takes seconds.
In week two, move to CMS bodies and first-draft page copy, using the speak-badly-then-cut method. By then the hotkey is muscle memory and Smart Vocabulary has your product names in it, which is the point at which people stop thinking about the tool and just use it.
A site does not ship with placeholder copy because the writer was lazy. It ships that way because producing the real words cost more than the deadline allowed.
The design work in Framer is already fast. Making the words as fast as the layout is the part most projects never get around to. Voice Keyboard Pro has a free tier with daily limits, and Pro is $4.99 a month or $34.99 a year. Try it on the next section you were about to fill with a placeholder.
FAQ
Do I need to install anything inside Framer?
No. There is no plugin or extension. Dictation runs at the system level on your Mac and inserts text wherever your cursor already is, including Framer text layers, CMS fields and comment boxes.
Does it work in the Framer web editor as well as the desktop app?
Both are standard Mac text-input contexts, so the same hold-and-speak flow applies. The requirement is the same in either case: an active text cursor in an editable field.
Can I dictate CSS values or code component content?
You can, but you should not. Values, hex codes, class names and code are exactly the strings where a plausible-sounding transcription error survives review. Type those. Speak the prose around them.
Will it get my product name right?
Not at first, if the name is invented or unusually spelled. Add it to Smart Vocabulary once and it will be correct from then on, along with client names, competitor names and any internal jargon you repeat.
Can I write site copy on my iPhone?
You can draft it anywhere with the iPhone keyboard and paste it into Framer at your desk. Editing a live design file on a phone is rarely a good idea, but capturing the sentence while you are looking at the staging site on your phone is exactly the moment the sentence exists.
Is this useful if I am a designer who does not write?
Especially then. The designers who end up writing site copy are usually the ones who did not plan to, and the friction is highest for exactly that group. Speaking a rough paragraph and cutting it is a much smaller ask than composing one in a text layer.