Locofy Home
(opens in a new tab)
  • Introduction
    • Installation
    • Create New Locofy Account
    • Plugin Overview
    • Collaborate with Team
    • Manage Teams & Projects
    • Dev Mode
  • Lightning
    • Tagging
    • Design Optimiser
    • Code Components and Props
    • Layer Names
    • Actions / Interactions
    • Styling & Responsiveness
    • Custom Fonts
    • Smart Regenerate & Automatic Connected Frames Detection
    • Sync to GitHub
  • Classic
      • Design Optimiser
        • Groups, Frames, and Background Images
        • Structuring Frames
        • Applying Auto Layout
        • Applying Responsive Constraints
        • Define Layout on Different Screen Sizes
        • Auto Layout
        • Locofy.ai's Approach
        • Styling & Layout
      • Instant Live Previews
        • Background Image Tips for Better Code
        • Better Layering Name
        • Building a Responsive 2-Column Layout
        • Building a Responsive Header Navbar
        • Building a Responsive Card
        • Creating a 3-Column Section using Grid
        • Adding Borders
        • Adding Scrolling to Web
        • Child Layers
      • Basics
      • Auto-Tagging with AI
      • Auto-Tagging by Naming Layers
      • Generating Code with Semantic Tags
        • Tagging elements on your React Native Project
        • Tagging your React Native button
        • Tagging your React Native Input
        • Tagging your React Native Bottom Tab
        • Tagging your React Native Drawer Menu
        • Tagging your React Native Top Tab
        • Tagging your React Native Scroll View
        • Tagging your React Native Status Bar
        • Tagging Your React Native Carousel
        • Tagging Your React Native Form Input
        • Tagging your Animations
        • Working with CSS Grids
        • Working with Tables
        • Tagging a Drawer
        • Creating a Radio Button Group
        • Creating an Input with Label
        • Custom Button
        • Custom Input
        • Menu with Submenu
        • Tagging a Popup
        • Tagging Images
    • Actions
    • Routing
      • Drag and Drop Basics
      • Locofy Components
      • Bring your own Storybook components
      • Tagging UI Library components
      • Working with React Native UI Libraries
      • Tagging Material UI components
      • Tagging Bootstrap Components
      • Tagging Ant design components
      • Tagging Chakra UI design components
      • Tagging Vuetify UI design components
      • Adding your custom Material UI theme
      • Adding your own custom font
    • Figma Components
    • Figma Variants
    • View Only My Work
    • Overview
    • Structuring Components
    • Locofy Config File
    • Import using CLI
    • Import from Github
    • Import from Storybook
    • Wrapper Component
    • Manual Prop Mapping
    • Error Handling
    • Angular UI Libraries
    • Locofy Builder Tour
    • Auto Components and Props
    • Adding Dynamic Props to Components
    • Scripts, Meta Tags, and Favicons
    • Live Responsive Prototypes
    • View code in Locofy Builder
    • Locofy Components
      • Enabling CSS Variables for code export
      • Export Next.js, Gatsby code
      • Export React Native code
      • Using Expo for React Native Projects
      • Configuring different CSS styling options
      • Import Custom Tailwind Config
    • Data Binding
    • Download Code
    • Deploy your App
    • Sync with GitHub
    • VS Code Extension
    • Exporting & Syncing Components
      • Adding a Content Section to Your App
      • Conditionally Rendering Components
      • Exporting a Responsive Navbar
      • Exporting Custom Form
      • Integrating New Screen into Existing Code Base
  • Troubleshooting
    • Full Build tutorials
    • Locofy tips and tricks
    • Design best practices
  • Join us on Discord (opens in a new tab)

On This Page

  • Real Estate Landing Page
(opens in a new tab)
Video Tutorials
Full Build tutorials

Full Build Tutorials

These vidoes are longer, and will dive deeper into the complete conversion of a design to a working website. For the most up to date content, check out our Tutorial Playlist (opens in a new tab) and subscribe to our YouTube Channel (opens in a new tab)

Real Estate Landing Page

Build a real estate app from a Figma design using Locofy Lightning in under 20 minutes.

TroubleshootingLocofy tips and tricks