Get Code from Figma Design

FingerPrint
2 min readOct 26, 2023

--

How to get flutter, React , Html , Css code from Figma

For getting flutter , react or html , css code we have 2 methods:

methods :

  • developer mode(for HTML + CSS)
  • Plugin (React + Flutter)

Method 1: Developer Mode(HTML + CSS)

Turn on the developer mode by clicking button shown in image

this is default look for developer option:

for getting code for css click on any frame that you want code for

How to get Android and Ios code from Figma

click on the css and from drop down select ios or android that you want code for

Method 2: Plugin For Figma to FLutter React Code

Turn on developer mode as shown in method 1

click on plugin and select anima plugin

Press inspect to get code

Here You go

Photo by Matt Jones on Unsplash

01110100 01101000 01100001 01101110 01101011 00100000 01111001 01101111 01110101 dmnwnccknvnnvkkmkddknv 01110100 01101000 01100001 01101110 01101011 00100000 01111001 01101111 01110101

--

--

FingerPrint

I am an IT Student and tech enthusiast , I write blog based on what i have learned to help community to make development easy