Prepare your design

Name your layers

Layer names are not only useful to keep your design file clean, but can provide valuable context to an AI model on how you intended your components’ layouts to be built.

A layer unnamed-5029 might not say much about what the context is, while a layer named profile-card might give it some more meaning.

Stick to a structure to be consistent

You can use a lot of different naming conventions, and while it might not matter for AI which one you choose, using it consistently throughout your file will make it easier to maintain it. For example, pricing-card-container or PricingCardContainer could both work and convey the meaning well.

If you don't like naming your layers, use Figma's "Rename Layers" features to automatically let it rename everything for you. It might not be a 100% correct match, but you can always tweak it afterwards. You might only need to change a small portion, which is a big win over having to do it manually for each layer.

Using components is already a good way to reduce the work of renaming layers as they will already be named every time you use that component. So set and forget, easy as that.

Create components

Components will in general make your design files cleaner and make it easier to use clean layer names without having to set them every single time. It also provides scalability in design so you don’t have to update every single screen. The same is true in development; define a component once and it will be a lot less work to use it in different contexts. So make sure your components are clean, well structured, and reusable.

Figma MCP will be able to reuse those components that could contain a lot of information like auto layout, variables, annotations, and clean layer names. If you link it up with Code Connect, so it uses your actual code, it becomes even more powerful as Figma MCP will be able to use context from both your design file and code base without you having to prompt it every single time.

Use Auto Layout

While Auto Layout might help you design cleaner and make your components or screens more flexible. It also tells an AI model how your design should behave on different sizes. Figma already has a responsive preview in Dev Mode where you can preview your design on different sizes, so engineers can quickly see how everything should scale or shrink down. With MCP, you can provide all that information up front by using Auto Layout, and it will automatically be implemented in the code. Even better, use variables to set paddings and spacings to get even better results.

Apply Variables

When you use variables for colors, spacing, typography size, border widths, … you will not only end up with more consistent designs that can easily support theming or different break points. You also avoid having to define everything multiple times. If you don’t have variables, an AI will just use static values across your whole project, making it harder to change later on.

Add annotations

Annotations can be used to provide more context when sharing designs via Figma MCP. They can be used for various different use cases like interactions, accessibility, content, …

For example, you could add an annotation for accessibility on an image saying: “ALT = A dog sitting on a ball with a little cowboy hat on its head” or “role: button”. For data, you could use “Today’s temperature” or for interactions “Change the color to bg-primaryButtonHover on hover”.

This is a great way as a designer or PM to bring more context into the design process. Even as humans, it’s great, but your MCP results will be so much better because there is just more information you don’t have to add in a prompt.