Information Density: Figma – Signal Evidence & AI Readability

[H1] Make anything possible, all in Figma
Make anything possible, all in FigmaMake anything possible, all in FigmaMake anything possible, all in Figma​ Get startedSlide 1 of 81 of 8Figma lets you turn big ideas into real products. Brainstorm, design, and build with your team.
[IMG: AirBnb]
[IMG: Atlassian]
[IMG: Dropbox]
[IMG: Duolingo]
[IMG: GitHub]
[IMG: Microsoft]
[IMG: Netflix]
[IMG: The New York Times]
[IMG: Pentagram]
[IMG: Slack]
[IMG: Stripe]
[IMG: Zoom]
[IMG: AirBnb]
[IMG: Atlassian]
[IMG: Dropbox]
[IMG: Duolingo]
[IMG: GitHub]
[IMG: Microsoft]
[IMG: Netflix]
[IMG: The New York Times]
[IMG: Pentagram]
[IMG: Slack]
[IMG: Stripe]
[IMG: Zoom]
[IMG: AirBnb]
[IMG: Atlassian]
[IMG: Dropbox]
[IMG: Duolingo]
[IMG: GitHub]
[IMG: Microsoft]
[IMG: Netflix]
[IMG: The New York Times]
[IMG: Pentagram]
[IMG: Slack]
[IMG: Stripe]
[IMG: Zoom]
[IMG: AirBnb]
[IMG: Atlassian]
[IMG: Dropbox]
[IMG: Duolingo]
[IMG: GitHub]
[IMG: Microsoft]
[IMG: Netflix]
[IMG: The New York Times]
[IMG: Pentagram]
[IMG: Slack]
[IMG: Stripe]
[IMG: Zoom]
[H2] Prompt, code, and design from first idea to final product
PromptDesignDrawBuildPublishPromoteJamPresentPrompt to code anything you can imagine with AI.Explore Figma MakePrompt to code anything you can imagine with AI.Explore Figma MakePrompt to code anything you can imagine with AI.Explore Figma MakePrompt to code anything you can imagine with AI.Explore Figma MakePrompt to code anything you can imagine with AI.Explore Figma MakePrompt to code anything you can imagine with AI.Explore Figma MakePrompt to code anything you can imagine with AI.Explore Figma MakePrompt to code anything you can imagine with AI.Explore Figma MakeFigma helps us paint the north star for the whole company. It keeps everyone aligned and excited.
[IMG: Perplexity logo]
Henry ModisettHead of Design
[H2] Bring everyone together with systems that scale
[IMG: A UI design interface showing card components for a travel app. The left side displays icon sets and two card templates: a]
[IMG: A UI design interface showing card components for a travel app. The left side displays icon sets and two card templates: a]
[H3] Share libraries and design systems across teams.
Create reusable components, variables, and brand assets to keep your entire organization building with the same visual language.Explore design systems
[IMG: Multiple assets surrounding button to]
[IMG: Multiple assets surrounding button to]
[H3] Unlock your team with on-brand templates.
Share templates with your organization so anyone can quickly create social media assets, display ads, one-pagers, and more.Explore Figma Buzz
[IMG: Screenshot of a web design interface showing a museum website with artwork displays on the left and a CSS development panel on the right. Pink cursors labeled]
[IMG: Screenshot of a web design interface showing a museum website with artwork displays on the left and a CSS development panel on the right. Pink cursors labeled]
[H3] Create one source of truth for devs and designers.
Get specs, annotations, and code snippets in one dedicated space with Dev Mode.Explore Dev Mode
[H2] Ship products, any way you want
[H3] Turn Figma context into code
Our Figma MCP server lets you bring Figma context directly into your agentic coding tools.Explore Figma MCP
[IMG: Screenshot of a design-to-code interface showing completed API calls on the left and a user profile page for Julia Simmons on the right, displaying her location, membership details, and recent research activity.]
[IMG: Screenshot of a design-to-code interface showing completed API calls on the left and a user profile page for Julia Simmons on the right, displaying her location, membership details, and recent research activity.]
[H3] Publish custom websites—with or without code
Design responsive websites in Figma Sites, then tweak with code or AI until everything is just right.Explore Figma Sites
[IMG: Screenshot of a web design tool showing the Collectiv Gallery website interface with navigation sidebar on left and homepage preview featuring gallery description and artistic background image on right.]
[IMG: Screenshot of a web design tool showing the Collectiv Gallery website interface with navigation sidebar on left and homepage preview featuring gallery description and artistic background image on right.]
[H3] Ship products faster with AI
Drop a design file into Figma Make and chat with AI to quickly create a live, functional app. Explore Figma Make
[IMG: Screenshot showing two card designs - a colorful tarot-style illustration and a]
[IMG: Screenshot showing two card designs - a colorful tarot-style illustration and a]
Nearly everything that designers and developers need is available in Figma.
[IMG: GitHub]
Diana MounterHead of Design
[H2] Explore what people are making
[IMG: Interface for a]
[IMG: Interface for a]
[H3] Virtual Teleportation Portal App
Masaya Takizawa
[IMG: Website homepage for Bubbles Design System showing dark teal interface with navigation menu, project title, description of the experimental Figma-based design system, and decorative outlined bubble graphics in the background.]
[IMG: Website homepage for Bubbles Design System showing dark teal interface with navigation menu, project title, description of the experimental Figma-based design system, and decorative outlined bubble graphics in the background.]
[H3] Bubbles Design System
Raul Marin Calleja
[IMG: Digital graffiti application interface showing a black spray-painted signature on a white brick wall background, with control sliders for spray size and density, and a palette of colored spray paint cans at the bottom.]
[IMG: Digital graffiti application interface showing a black spray-painted signature on a white brick wall background, with control sliders for spray size and density, and a palette of colored spray paint cans at the bottom.]
[H3] Virtual Graffiti Wall
Seungmee Lee
[IMG: pixel interface with a colorpicker and a pixelated flower shape]
[IMG: pixel interface with a colorpicker and a pixelated flower shape]
[H3] Pixel Editor
Ayaneshu Bhardwaj
[IMG: four overlapping images of a person next to a car, a motorcycle, a person wearing a vr headset, and a drone]
[IMG: four overlapping images of a person next to a car, a motorcycle, a person wearing a vr headset, and a drone]
[H3] Cursor Images
Gui Seiz
[IMG: a pattern generator with sliders and toggles to adjust the preview of the pattern]
[IMG: a pattern generator with sliders and toggles to adjust the preview of the pattern]
[H3] Pattern Generator
Benjamin Leonard
[IMG: a basket catching flowers at the bottom with time and score]
[IMG: a basket catching flowers at the bottom with time and score]
[H3] Flower Catcher
Nayli C. Naza
[IMG: Screenshot of Earworm Studio drum machine interface with dark theme. Shows instrument tabs at top (Synth selected in green), volume/duration controls, a 6x16 step sequencer grid with several green activated steps forming a beat pattern, and playback controls with 120 BPM tempo setting.]
[IMG: Screenshot of Earworm Studio drum machine interface with dark theme. Shows instrument tabs at top (Synth selected in green), volume/duration controls, a 6x16 step sequencer grid with several green activated steps forming a beat pattern, and playback controls with 120 BPM tempo setting.]
[H3] Earworm Studio
Holly Li Explore more
[H2] Start with a template. Make just about anything.
Explore all templatesSlide 1 of 101 of 10
[H3] Websites
[IMG: Responsive web design mockup for Etran money transfer service showing mobile and desktop versions with green branding,]
[IMG: Responsive web design mockup for Etran money transfer service showing mobile and desktop versions with green branding,]
[H3] Social media
[IMG: Collection of event poster designs featuring various layouts and styles, including art exhibition announcements, dance performances, design conferences, and product keynotes with diverse color schemes and typography treatments.]
[IMG: Collection of event poster designs featuring various layouts and styles, including art exhibition announcements, dance performances, design conferences, and product keynotes with diverse color schemes and typography treatments.]
[H3] Mobile apps
[IMG: Two smartphones displaying app interfaces - left shows a meditation app with]
[IMG: Two smartphones displaying app interfaces - left shows a meditation app with]
[H3] Presentations
[IMG: Collection of presentation slide templates showing agenda items, pitch deck cover with orange design, blue slide with bullet points about team specialties, and principles section with numbered colorful cards.]
[IMG: Collection of presentation slide templates showing agenda items, pitch deck cover with orange design, blue slide with bullet points about team specialties, and principles section with numbered colorful cards.]
[H3] Invitations
[IMG: Two overlapping invitation designs - a purple "LANDMARKS" event invitation for Studio Latitude LA and a green "BDAY BASH" party invitation for Olivia]
[IMG: Two overlapping invitation designs - a purple "LANDMARKS" event invitation for Studio Latitude LA and a green "BDAY BASH" party invitation for Olivia]
[H3] Illustrations
[IMG: Simple black line drawing of a rabbit riding a skateboard with arms outstretched for balance.]
[IMG: Simple black line drawing of a rabbit riding a skateboard with arms outstretched for balance.]
[H3] Portfolio templates
[IMG: Responsive website design for F&F digital agency showing mobile and desktop versions with minimalist black and white layout, featuring their tagline about crafting visual language for digital brands and portfolio samples.]
[IMG: Responsive website design for F&F digital agency showing mobile and desktop versions with minimalist black and white layout, featuring their tagline about crafting visual language for digital brands and portfolio samples.]
[H3] Plugins
[IMG: Grid of colorful app icons including productivity tools, design software, and utilities with various geometric shapes, symbols, and branding elements in bright colors like yellow, green, blue, and gradients.]
[IMG: Grid of colorful app icons including productivity tools, design software, and utilities with various geometric shapes, symbols, and branding elements in bright colors like yellow, green, blue, and gradients.]
[H3] Web ads
[IMG: Two advertising designs - left shows a skincare product ad for Noire Élan with]
[IMG: Two advertising designs - left shows a skincare product ad for Noire Élan with]
[H3] Icons
[IMG: Grid of gray outlined UI icons including arrows, play buttons, search, settings, share, star, thumbs up, shopping bag, user profiles, cloud upload, lock, clock, and other common interface symbols.]
[IMG: Grid of gray outlined UI icons including arrows, play buttons, search, settings, share, star, thumbs up, shopping bag, user profiles, cloud upload, lock, clock, and other common interface symbols.]

[H2] Make your ideas real with Figma Make
Onboarding flowData dashboardGradient galleryMake your ideas real with AI. Start with a design and prompt your way to a functional prototype, fast.
[H2] Explore what our community is building with Figma Make
[IMG: Abstract watercolor artwork with soft purple, pink, and cream tones displayed in a digital interface with]
[IMG: Abstract watercolor artwork with soft purple, pink, and cream tones displayed in a digital interface with]
[H3] Keyboard Canvas
Bryce Lewis
[IMG: Interface for a]
[IMG: Interface for a]
[H3] Virtual Teleportation Portal App
Masaya Takizawa
[IMG: pixel interface with a colorpicker and a pixelated flower shape]
[IMG: pixel interface with a colorpicker and a pixelated flower shape]
[H3] Pixel Editor
Ayaneshu Bhardwaj
[IMG: Weather app icon design interface with Japanese animation settings panel, featuring controls for sun/moon orbit parameters, cloud movement, and star brightness animations.]
[IMG: Weather app icon design interface with Japanese animation settings panel, featuring controls for sun/moon orbit parameters, cloud movement, and star brightness animations.]
[H3] Sunrise-Sunset Animation
Shingo SuzukiSee more
[H2] Your playground for new ideas
Explore every big, wild, wacky, and teeny-tiny idea to find the best ones to run with. Create high-fidelity prototypes to help everyone see your vision.
[IMG: a prompt box covered by a library modal with foundations and a ui library]
[IMG: a prompt box covered by a library modal with foundations and a ui library]
[H3] Keep everything looking and feeling like your product
Add styling context from your Figma library to stay visually consistent with your design system. From there, you can set custom rules or paste in a frame to guide Figma Make as it brings your idea to life.Learn more
[IMG: Design interface showing an animated counter component with yellow background displaying]
[IMG: Design interface showing an animated counter component with yellow background displaying]
[H3] Prompt your way to a polished design
Select the part of the design you want to continue refining and prompt AI to change the appearance. Even if you aren’t sure how to design or code the outcomes yourself, AI can help you get there.Learn more
[IMG: Design interface showing content categorization with]
[IMG: Design interface showing content categorization with]
[H3] Edit and fine-tune AI outputs
Collaborate with AI. You can directly edit what Figma makes—whether that means rewriting copy, replacing images, or changing padding and margins. Or, copy your preview as design layers to continue iterating in Figma Design.Learn more
[IMG: a figma make icon next to a supabase icon with a prompt box under]
[IMG: a figma make icon next to a supabase icon with a prompt box under]
[H3] Build apps with real data
Connect Figma Make to Supabase to turn your idea into a web app that’s ready to ship—no coding required. Access everything you need to add user authentication, store user data, connect private APIs, and more.Learn more
[H3] Figma Make works seamlessly with other Figma products
Bring the power of Figma Make into Figma Sites to easily customize your website, test interactions, and publish. Select any frame in Figma Sites and prompt it to life with Figma Make.Learn more

[H1] Dev Mode
Built for developers, Dev Mode gives you the power to easily inspect designs and translate them into code—without changing the design file. Dev Mode is included in the Full and Dev seats on all paid plans.Get startedContact sales
[H2] Trusted by teams at
[IMG: atlassian logo]
[IMG: decathlon logo]
[IMG: github logo]
[IMG: kayak logo]
[IMG: razorpay logo]
[IMG: volkswagen logo]
[IMG: atlassian logo]
[IMG: decathlon logo]
[IMG: github logo]
[IMG: kayak logo]
[IMG: razorpay logo]
[IMG: volkswagen logo]
[IMG: atlassian logo]
[IMG: decathlon logo]
[IMG: github logo]
[IMG: kayak logo]
[IMG: razorpay logo]
[IMG: volkswagen logo]
[IMG: atlassian logo]
[IMG: decathlon logo]
[IMG: github logo]
[IMG: kayak logo]
[IMG: razorpay logo]
[IMG: volkswagen logo]
[IMG: atlassian logo]
[IMG: decathlon logo]
[IMG: github logo]
[IMG: kayak logo]
[IMG: razorpay logo]
[IMG: volkswagen logo]
[IMG: atlassian logo]
[IMG: decathlon logo]
[IMG: github logo]
[IMG: kayak logo]
[IMG: razorpay logo]
[IMG: volkswagen logo]
[IMG: atlassian logo]
[IMG: decathlon logo]
[IMG: github logo]
[IMG: kayak logo]
[IMG: razorpay logo]
[IMG: volkswagen logo]
[IMG: atlassian logo]
[IMG: decathlon logo]
[IMG: github logo]
[IMG: kayak logo]
[IMG: razorpay logo]
[IMG: volkswagen logo]
[H3] Generate better code using Figma context
Turn Figma designs into accurate code with the Figma MCP server. It brings Figma context directly into agentic coding tools, like VS Code, Cursor, Windsurf, and Claude, for a more efficient workflow.Get the Figma MCP guide
[H2] Find the information you need to start building, fast
With features designed to simplify code inspection and highlight what’s ready for development, your workflow will be smoother than ever.
[IMG: Two mobile screens with compare versions next to each other]
[IMG: Two mobile screens with compare versions next to each other]
[H3] Compare design changes
See when a frame or component was last edited, or open version history to compare design changes side-by-side.Learn more
[IMG: Inspect mode on design showing classes and padding sizes]
[IMG: Inspect mode on design showing classes and padding sizes]
[H3] Dive into design specifications
Inspect component properties like color codes and token values, check spacing, and copy and paste code to speed up your development process.Learn more
[IMG: Ready for dev mode turned on to show changes and updates to the design]
[IMG: Ready for dev mode turned on to show changes and updates to the design]
[H3] Change the view for more clarity
Click into the Ready for dev view to see designs that are marked as ready for development. You can also click on specific components to isolate them in Focus view.Learn more
[IMG: vs code interface with figma file and comments]
[IMG: vs code interface with figma file and comments]
[H3] Build with VS Code extension
Work in an environment you already know and love with the VS Code extension—less screen switching and more coding.Learn moreFigma’s Dev Mode facilitates a streamlined collaboration between developers and designers, reducing the friction between the two — and we love it.Sandra Schaus Lead UX Expert, Business Development Services, Volkswagen Group Services
[IMG: volkswagen logo]
[H2] Connect your design system and code base for consistent builds
Dev Mode gives you the power to build consistent, reusable designs and seamlessly link them to your codebase using Code Connect.
[H3] Link your codebase with Code Connect
Code Connect lets you instantly generate ready-to-use snippets by linking your codebase with your existing design system in Figma.Learn more
[IMG: add to cart button with style adjustments and variable modes on right hand panel interface]
[IMG: add to cart button with style adjustments and variable modes on right hand panel interface]
[H3] See all component options
The Component playground lets you view all possible component variations, see how they behave, and even gives you the code to implement. All you have to do is choose the best option.Learn more
[IMG: various icons with color libraries in right hand panel]
[IMG: various icons with color libraries in right hand panel]
[H3] Access system-wide design variables
Stay on-brand and save time by using existing variables—or token values—with corresponding code syntaxes in Figma. This makes it easy to keep things consistent across your applications.Learn moreWhat we love about Code Connect is that it reduces so much of the context switching that developers had to do before.Gilson Hoffmeister Design Systems Strategist, HP
[IMG: hp logo]
[H2] Streamline the back and forth with design partners
Features like status updates, comments, and annotations keep you on the same page with designers throughout your build.
[H3] Cut down on repeat work with better communication
Get notified of design changes in real-time so you’re never building based on outdated information. The Ready for dev view provides a clear summary of what’s ready to build, what’s changed, and what’s done.Learn more
[IMG: annotations added to image with alt text and additional height and width properties]
[IMG: annotations added to image with alt text and additional height and width properties]
[H3] Code with context
Scan through annotations and comments from designers to get a clear understanding of what you need to build.Learn more
[IMG: spacing and padding measurements displayed on top of recipe design]
[IMG: spacing and padding measurements displayed on top of recipe design]
[H3] Check your measurements
Designers can add measurements to help you quickly visualize spacing and sizing, so nothing gets lost in translation as you go from design to code.Learn more
[H2] Dig into more design and development resources
[H3] Everything You Need to Know About Dev Mode
We built Dev Mode to make product development more efficient, from idea to code. Learn about our product philosophy and what’s next.Read the article
[H3] 5 things designers need to know for a smooth handoff
Handoff is a process, not a moment. So how do you streamline handoff when it’s a constant stream of WIP designs, communication, and collaboration? Designer Advocate Lauren Andres shares her tips.Read the article
[IMG: plugin selections of github jira and storybook]
[IMG: plugin selections of github jira and storybook]
[H3] Explore community plugins for developers
Explore thousands of plugins built by the Figma community that can expand how you work in Figma.Explore plugins