What you are about to do

You will draw one screen, pick a target, and get source code that places every element at the coordinates you drew. No import step, no Figma file, no tagging pass. The canvas is the input.

1. Start a project and pick a device

Every screen belongs to a device. The device sets the canvas size, the corner radius drawn around the preview, and the safe areas at the top and bottom.

The device also decides which languages you can export. A screen on an iPhone preset can export React Native, SwiftUI, Flutter, or HTML and CSS. A screen on an Android preset drops SwiftUI, because SwiftUI does not run there. A watchOS screen offers SwiftUI only. If you want a plain artboard with no platform assumptions, pick a generic device and every target stays available.

This is worth knowing early, because it means the device you choose is a real decision, not a preview backdrop.

2. Draw something

Drag a shape onto the canvas and set its fill, corner radius, and size in the inspector. Everything you set is a number on that shape, and every one of those numbers survives into the export.

3. Watch the code

Open the code panel and switch targets. The same screen is regenerated per language, from one shared description of your design. Switching targets does not re-interpret anything, it re-renders the same numbers into different syntax.

One rectangle, drawn once, exported four ways. Same 100x100 box at (20, 20) on a 200x200 artboard, no controls, no scrolling, nothing to grow, just the coordinates in four languages.

React Native

import React from 'react';
import { View, StyleSheet } from 'react-native';

export default function Box() {
  return (
    <View style={styles.screen}>
      <View style={styles.box} />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  box: {
    position: 'absolute',
    left: 20,
    top: 20,
    width: 100,
    height: 100,
    borderRadius: 0,
    backgroundColor: '#2A50D8',
  },
});

SwiftUI

import SwiftUI

struct Box: View {
  var body: some View {
    ZStack(alignment: .topLeading) {
      Color(red: 1, green: 1, blue: 1)
        .frame(width: 200, height: 200)
      RoundedRectangle(cornerRadius: 0)
        .fill(Color(red: 0.16, green: 0.31, blue: 0.85))
        .frame(width: 100, height: 100)
        .position(x: 70, y: 70)
    }
    .frame(width: 200, height: 200)
  }
}

Flutter

import 'package:flutter/material.dart';

class Box extends StatelessWidget {
  const Box({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: 200,
      child: Stack(
        children: [
          Positioned.fill(child: Container(color: Color(0xFFFFFFFF))),
          Positioned(
            left: 20,
            top: 20,
            child: Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(color: Color(0xFF2A50D8)),
            ),
          ),
        ],
      ),
    );
  }
}

HTML and CSS

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Box</title>
<style>
html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
}
.screen {
  position: relative;
  width: 200px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  background: #ffffff;
}
.screen::-webkit-scrollbar {
  display: none;
}
.box {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 100px;
  height: 100px;
  background: #2A50D8;
}
</style>
</head>
<body>
  <div class="screen">
    <div class="box"></div>
  </div>
</body>
</html>

4. Export

Copy the code straight out of the panel, or export the project. See Exporting for what you get in each case.

One thing to know before you build something big

A screen is authored at one device size. It does not reflow. If you need a phone layout and a tablet layout, you draw two screens. This is the direct consequence of how the fidelity works, and the next guide explains why.

Getting started