https://react-figma.vercel.app/docs/API

1<!doctype html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1">
6<meta name="generator" content="Docusaurus v2.0.0-alpha.65">

7<script src="https://buttons.github.io/buttons.js"></script>

7<title data-react-helmet="true">API Overview | React Figma</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="API Overview | React Figma"><meta data-react-helmet="true" name="description" content="API divided into two main parts:"><meta data-react-helmet="true" property="og:description" content="API divided into two main parts:"><meta data-react-helmet="true" property="og:url" content="https://react-figma.dev//docs/API"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://react-figma.dev//docs/API"><link rel="stylesheet" href="/styles.24a5b8aa.css">
8<link rel="preload" href="/styles.20f7b43f.js" as="script">
9<link rel="preload" href="/runtime~main.d4aa3d7e.js" as="script">
10<link rel="preload" href="/main.93155dba.js" as="script">
11<link rel="preload" href="/1.1f0d2342.js" as="script">
12<link rel="preload" href="/2.d71bbf9e.js" as="script">
13<link rel="preload" href="/3.62ffb4aa.js" as="script">
14<link rel="preload" href="/1be78505.d463db6e.js" as="script">
15<link rel="preload" href="/55.9482aa74.js" as="script">
16<link rel="preload" href="/935f2afb.a31f3ad8.js" as="script">
17<link rel="preload" href="/17896441.7232c6ab.js" as="script">
18<link rel="preload" href="/fc1f0afe.93449805.js" as="script">
19</head>
20<body>

21<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script>

21<div id="__docusaurus">
22<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/react-figma-logo.svg" alt="React Figma Logo"><strong class="navbar__title">React Figma</strong></a></div><div class="navbar__items navbar__items--right"><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/API">Docs</a><a href="https://github.com/react-figma/react-figma" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><a class="navbar__item navbar__link" href="/blog">Blog</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/react-figma-logo.svg" alt="React Figma Logo"><strong class="navbar__title">React Figma</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/docs/API">Docs</a></li><li class="menu__list-item"><a href="https://github.com/react-figma/react-figma" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/configure">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/running">Running</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/hmr">HMR</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/devtools">React DevTools</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Docs</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/API">API Overview</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/ecosystem">Ecosystem</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/roadmap">Roadmap</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/render">render(element)</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/styling">Styling</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/colors">Colors</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/local-styles">Local Styles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/data-fetching">Data Fetching</a></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!" tabindex="-1">UI Primitives</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/view">View</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/text">Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/StyleSheet">StyleSheet</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/Platform">Platform</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!" tabindex="-1">Figma components</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/page">Page</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/component">Component, Instance, createComponent</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/svg">Svg</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/ellipse">Ellipse</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/group">Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/line">Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/rectangle">Rectangle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/star">Star</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/vector">Vector</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/slice">Slice</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!" tabindex="-1">React Native compatibility</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/Dimensions">Dimensions</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/Easing">Easing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/useWindowDimensions">useWindowDimensions</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/api/StatusBar">StatusBar</a></li></ul></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">API Overview</h1></header><div class="markdown"><p>API divided into two main parts:</p><ul><li><a href="#ui-primitives">UI Primitives</a>: Components/modules that represent compatibility layer with react-native.</li><li><a href="#figma-components">Figma components</a>: Components that match some of Figma node types or API methods.</li></ul><p>Also, there is <a href="/docs/api/render"><code>render</code></a> function - entry point for React App.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="ui-primitives"></a>

22UI Primitives<a aria-hidden="true" tabindex="-1" class="hash-link" href="#ui-primitives" title="Direct link to heading">#</a></h2><p>Components that compatible with react-native API.</p><ul><li><a href="/docs/api/view">View</a> — The most fundamental component for building a UI.</li><li><a href="/docs/api/text">Text</a> - A React component for displaying text.</li><li><a href="/docs/api/image">Image</a> - A React component for displaying different types of images.</li><li><a href="/docs/api/StyleSheet">StyleSheet</a> — A StyleSheet is an abstraction similar to CSS StyleSheets.</li><li><a href="/docs/api/Platform">Platform</a> — A module that detects the platform in which the app is running.</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="figma-components"></a>Figma components<a aria-hidden="true" tabindex="-1" class="hash-link" href="#figma-components" title="Direct link to heading">#</a></h2><ul><li><a href="/docs/api/page">Page</a> — A React component for displaying Figma page.</li><li><a href="/docs/api/frame">Frame</a> — A React component for displaying Figma frame.</li><li><a href="/docs/api/component">Component</a> — A React component that wrap nodes to Figma component.</li><li><a href="/docs/api/svg">Svg</a> — A React component that transform SVG source to Figma nodes.</li><li><a href="/docs/api/ellipse">Ellipse</a> — A React component for displaying Figma ellipse.</li><li><a href="/docs/api/group">Group</a> — A React component for grouping Figma nodes.</li><li><a href="/docs/api/line">Line</a> — A React component for displaying Figma line.</li><li><a href="/docs/api/rectangle">Rectangle</a> — A React component for displaying Figma rectangle.</li><li><a href="/docs/api/star">Star</a> — A React component for displaying Figma star.</li><li><a href="/docs/api/vector">Vector</a> — A React component for displaying Figma vector.</li><li><a href="/docs/api/slice">Slice</a> — A React component for displaying Figma slice.</li></ul></div></article><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/devtools"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« React DevTools</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/architecture"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Architecture »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#ui-primitives" class="table-of-contents__link">UI Primitives</a></li><li><a href="#figma-components" class="table-of-contents__link">Figma components</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/configure">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/API">API</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/styling">Styling</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/ecosystem">Ecosystem</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Social</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/react-figma/react-figma/discussions" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub Discussions</a></li><li class="footer__item"><a href="https://twitter.com/react_figma" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://www.linkedin.com/company/reactfigma" target="_blank" rel="noopener noreferrer" class="footer__link-item">LinkedIn</a></li></ul></div></div><div class="text--center"><div class="margin-bottom--sm"><img class="footer__logo" alt="React Figma Logo" src="/img/react-figma-logo-white.svg"></div><div>Copyright © 2025 Ilya Lesik</div></div></div></footer></div>

23<script src="/styles.20f7b43f.js"></script>

23

24<script src="/runtime~main.d4aa3d7e.js"></script>

24

25<script src="/main.93155dba.js"></script>

25

26<script src="/1.1f0d2342.js"></script>

26

27<script src="/2.d71bbf9e.js"></script>

27

28<script src="/3.62ffb4aa.js"></script>

28

29<script src="/1be78505.d463db6e.js"></script>

29

30<script src="/55.9482aa74.js"></script>

30

31<script src="/935f2afb.a31f3ad8.js"></script>

31

32<script src="/17896441.7232c6ab.js"></script>

32

33<script src="/fc1f0afe.93449805.js"></script>

33
34</body>
35</html>