CodeTea.io
Use the CodeTea Figma plugin

Use the CodeTea Figma plugin

The CodeTea Figma plugin converts selected Figma frames to code: select the screens, open the CodeTea plugin from Manage plugins, choose a framework, click View Full Source, then edit the result in the workspace and export.

1. Select list screens on project figma

Use the CodeTea Figma plugin – Select list screens on project figma: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Select list screens

2. Find and choose plugin CodeTea

Use the CodeTea Figma plugin – Find and choose plugin CodeTea: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Click right mouse => select plugins => and click Manage plugins...

3. Choose plugin CodeTea

Use the CodeTea Figma plugin – Choose plugin CodeTea: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Input key word "CodeTea"
  2. Choose plugin CodeTea

4. View full source

Use the CodeTea Figma plugin – View full source: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Choose list screens
  2. Choose framework
  3. Click View Full Source

5. Result list screens after use plugin CodeTea

Use the CodeTea Figma plugin – Result list screens after use plugin CodeTea: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Click screen to edit layout

6. Edit layout

Use the CodeTea Figma plugin – Edit layout: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Click component that need edit
  2. Edit properties of component

7. Export code

Use the CodeTea Figma plugin – Export code: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Click button source code
  2. Click download all source
  3. Or copy file