# Docs - [Locofy Documentation](/) - Plugin - [Quickstart](/plugin/quickstart): Go from signup to exported code: account, plugin, design selection, Locofy Lightning, and export options. - [Optimizing your designs for better code output](/plugin/optimising-designs) - [Agent Mode Overview](/plugin/agent-mode) - [Locofy Builder Tour ](/plugin/builder-tour) - Design system - [Figma Components](/plugin/design-system/figma-components) - [Custom Components](/plugin/design-system/overview) - [Wrapper Components](/plugin/design-system/wrapper-component) - [Manual Prop Mapping](/plugin/design-system/manual-prop-mapping) - [Complex prop mapping with mapFn](/plugin/design-system/mapfn-custom-prop-mapping) - Examples - Agent prebuilt prompts - [Theming](/plugin/examples/agent-prebuilt-prompts/theming) - [Angular Material UI Kit](/plugin/examples/agent-prebuilt-prompts/angular-material-ui-kit) - [Bootstrap](/plugin/examples/agent-prebuilt-prompts/bootstrap) - [Internationalisation](/plugin/examples/agent-prebuilt-prompts/internationalisation) - [Form Validation](/plugin/examples/agent-prebuilt-prompts/validation) - [Accessibility](/plugin/examples/agent-prebuilt-prompts/accessibility) - [Animations](/plugin/examples/agent-prebuilt-prompts/animations) - [Hover Effects](/plugin/examples/agent-prebuilt-prompts/hover-effects) - [Filter and Search](/plugin/examples/agent-prebuilt-prompts/filter-and-search) - [Table Responsiveness](/plugin/examples/agent-prebuilt-prompts/table-responsiveness) - [Interactive Carousel](/plugin/examples/agent-prebuilt-prompts/interactive-carousel) - [Interactive Popups](/plugin/examples/agent-prebuilt-prompts/interactive-popups) - [Interactive Side Drawers](/plugin/examples/agent-prebuilt-prompts/interactive-side-drawers) - [Code Quality](/plugin/examples/agent-prebuilt-prompts/code-quality) - [Adapt Menu for Mobile](/plugin/examples/agent-prebuilt-prompts/mobile-menu) - [Tabs with States](/plugin/examples/agent-prebuilt-prompts/tabs-states) - [Accordion](/plugin/examples/agent-prebuilt-prompts/accordion) - [Notification Dropdown](/plugin/examples/agent-prebuilt-prompts/notification-dropdown) - [Scale and Enhance Images](/plugin/examples/agent-prebuilt-prompts/scale-and-enhance-images) - Project settings - [Enabling CSS Variables for your code export](/plugin/examples/project-settings/enabling-css-variables) - [Configuring Next.js Router](/plugin/examples/project-settings/configuring-nextjs) - [Exporting Next.js or Gatsby code](/plugin/examples/project-settings/export-next-and-gatsby) - [Exporting React Native code](/plugin/examples/project-settings/export-react-native) - [Using Expo for React Native Projects](/plugin/examples/project-settings/using-expo) - [Configuring different CSS styling options](/plugin/examples/project-settings/using-styling-css) - [Importing Custom Tailwind Config](/plugin/examples/project-settings/importing-tailwind-config) - [Importing Custom SASS Config](/plugin/examples/project-settings/importing-sass-config) - Tutorials - [Full Build Tutorials](/plugin/examples/tutorials/full-build-tutorials) - [Locofy Tips and Tricks](/plugin/examples/tutorials/locofy-tips-and-tricks) - [Design best practices](/plugin/examples/tutorials/design-best-practices) - [Troubleshooting Issues](/plugin/troubleshooting) - Legacy (Classic) - Design structure - Design optimiser - [Design Optimiser for Groups, Frames, and Background Images](/plugin/classic/design-structure/design-optimiser/groups-frames-images) - [Structure Your Frames Better](/plugin/classic/design-structure/design-optimiser/structuring-frames) - [Design Optimiser: Applying Auto layout](/plugin/classic/design-structure/design-optimiser/applying-auto-layout) - [Applying Responsive Constraints](/plugin/classic/design-structure/design-optimiser/applying-responsive-constraints) - [Define layout on different screen sizes](/plugin/classic/design-structure/design-optimiser/define-layout) - Responsiveness - [Auto Layout to Build Responsive Code](/plugin/classic/design-structure/responsiveness/auto-layout) - [Generating Responsive Code](/plugin/classic/design-structure/responsiveness/locofys-approach) - [Introduction to the Behavior and Responsiveness Widget](/plugin/classic/design-structure/responsiveness/styling) - [Instant Live Previews in Plugin](/plugin/classic/design-structure/instant-live-previews) - Example - [Working with background images](/plugin/classic/design-structure/example/background-image-tips) - [Layer Naming for better code](/plugin/classic/design-structure/example/better-layering-name) - [Building a responsive 2-column layout](/plugin/classic/design-structure/example/responsive-two-column-layout) - [Building a responsive header navbar](/plugin/classic/design-structure/example/responsive-header-navbar) - [Building a responsive card](/plugin/classic/design-structure/example/responsive-card) - [Creating a 3-Column Section Using Grid Layout in Locofy.ai](/plugin/classic/design-structure/example/create-three-column-grid) - [RTL (Right-to-Left) Support for React Native](/plugin/classic/design-structure/example/rtl-support) - Tagging - [Tagging Basics](/plugin/classic/tagging/basics) - [Introducing LocoAI](/plugin/classic/tagging/auto-tagging) - [Auto-Tagging By Layer Name](/plugin/classic/tagging/auto-tagging-by-layer-name) - [Generating code with Semantic Tags ](/plugin/classic/tagging/code-with-semantic-tags) - React native - [Tagging elements on your React Native Project](/plugin/classic/tagging/react-native/tagging-elements-for-react-native) - [Tagging your React Native button](/plugin/classic/tagging/react-native/tagging-button) - [Tagging a Material design React Native Input](/plugin/classic/tagging/react-native/tagging-input) - [Tagging your React Native Bottom Tabs](/plugin/classic/tagging/react-native/tagging-bottom-tab) - [Tagging your React Native Drawer Menu](/plugin/classic/tagging/react-native/tagging-drawer-menu) - [Tagging your React Native Top Tab](/plugin/classic/tagging/react-native/tagging-top-tab) - [Tagging your React Native Scroll View](/plugin/classic/tagging/react-native/tagging-scroll-view) - [Tagging your React Native Status Bars](/plugin/classic/tagging/react-native/tagging-status-bar) - Animations - [Tagging your animations](/plugin/classic/tagging/animations/tagging-animations) - Examples - [Working with CSS Grids](/plugin/classic/tagging/examples/working-with-grids) - [Working with Tables](/plugin/classic/tagging/examples/working-with-tables) - [Tagging a drawer](/plugin/classic/tagging/examples/tagging-a-drawer) - [Introduction to the Add Action widget](/plugin/classic/actions) - [Navigating between Pages](/plugin/classic/routing) - Ui libraries design systems - [Drag and Drop basics](/plugin/classic/ui-libraries-design-systems/drag-and-drop) - [Locofy Components](/plugin/classic/ui-libraries-design-systems/locofy-components) - [Bring your Storybook components to Locofy](/plugin/classic/ui-libraries-design-systems/your-storybook-components) - [Working with UI Libraries](/plugin/classic/ui-libraries-design-systems/tagging-ui-library) - [Working with React Native UI Libraries](/plugin/classic/ui-libraries-design-systems/react-native-ui-libraries) - [Working with Material UI](/plugin/classic/ui-libraries-design-systems/tagging-material-ui-components) - [Working with Boostrap](/plugin/classic/ui-libraries-design-systems/tagging-bootstrap-components) - [Working with Ant Design](/plugin/classic/ui-libraries-design-systems/tagging-ant-design-components) - [Working with Chakra UI](/plugin/classic/ui-libraries-design-systems/tagging-chakra-ui-components) - [Working with Vuetify Components](/plugin/classic/ui-libraries-design-systems/tagging-vuetify-ui-components) - [Adding Your Custom Material UI Theme](/plugin/classic/ui-libraries-design-systems/custom-mui-theme) - [A Comprehensive Guide to Using Custom Fonts in Locofy.ai](/plugin/classic/ui-libraries-design-systems/custom-font) - Import from URL - [Quickstart](/url/quickstart): Convert a Figma design to frontend code in minutes—paste a URL, generate code, refine in Builder, and export. - Editing Code - [Visual Mode](/url/editing-code/visual-mode): Review and configure your generated code in Locofy Builder using Visual Mode. - [Agent Mode](/url/editing-code/agent-mode): Refine and improve your generated code using natural language prompts in Locofy Builder. - Code Export and Deployment - [Download Code](/url/export-and-deployment/download-code): Export your generated code as a ZIP file or copy snippets directly from Locofy Builder. - [Locofy CLI — Pull & Merge Code](/url/export-and-deployment/cli-pull): Pull generated code into your local codebase with intelligent merge support. - [Locofy MCP — for Cursor, Claude Desktop, Copilot & more](/url/export-and-deployment/locofy-mcp): Integrate Locofy-generated code with AI-native editors and agents. - [Sync with GitHub](/url/export-and-deployment/sync-with-github): Push generated code—including Agent Mode changes—to your GitHub repository. - [VS Code Extension](/url/export-and-deployment/vs-code-extension): Fetch projects, components, and styles from Locofy directly inside VS Code. - MCP - [Quickstart](/mcp/quickstart): Generate frontend code from Figma inside Cursor, Claude Code, Windsurf, and other MCP-compatible AI tools. - [Installing MCP in Different IDEs](/mcp/installing-mcp): Connect Figma, create a project, and configure Locofy MCP in Claude Code, Cursor, GitHub Copilot, or Windsurf. - [Iterative Development](/mcp/iterative-development): Bring updated Figma designs into an existing codebase with Locofy MCP—update a section or an entire screen without regenerating from scratch. - Using Design System - [Figma Components](/mcp/design-system/figma-components): What your design team needs to structure in Figma for optimal code conversion with Locofy MCP. - [Using Custom Code Components](/mcp/design-system/overview): Connect your custom component library to Locofy MCP for design-aware code generation. - [Manual Prop Mapping](/mcp/design-system/manual-prop-mapping): Map Figma component properties to your code component props for Locofy MCP. - [Complex Prop Mapping (mapFn)](/mcp/design-system/mapfn-custom-prop-mapping): Use mapFn for advanced prop mapping when Figma properties alone are not enough. - CLI - [Quickstart](/cli/quickstart): Convert a Figma design to frontend code from the terminal—install the CLI, generate code, refine in interactive mode, and continue development. - [Editing Code](/cli/editing-code): Refine and improve generated code using natural language prompts directly from the Locofy CLI. - Skills - [Using Skills](/cli/skills/using-skills): How Locofy CLI skills work and how to use them during Interactive Mode. - [Creating Custom Skills](/cli/skills/custom-skills): Define project-specific skills for Locofy CLI with SKILL.md files. - Using Design System - [Figma Components](/cli/design-system/figma-components): What your design team needs to structure in Figma for optimal code conversion with Locofy CLI. - [Using Custom Code Components](/cli/design-system/overview): Connect your custom component library to Locofy CLI before generating code. - [Manual Prop Mapping](/cli/design-system/manual-prop-mapping): Map Figma component properties to your code component props using the CLI and locofy.config.json. - [Complex Prop Mapping (mapFn)](/cli/design-system/mapfn-custom-prop-mapping): Use mapFn for advanced prop mapping when Figma properties alone are not enough.