Figmatic

A Real Time Figma to Flutter UI Tool

Project Overview(todo)

Relavent Resources

• Figma Plugin Docs

• Figma API Docs

• Awesome Figma

• Figma API Demo https://github.com/thomas-lowry/figma-plugins-on-github#plugins Related Software

• figma to flutter by aloisdeniel. This is the closest project to mine. The main difference is that it is just a code generator, I plan to extend my project to include more organizational and prototyping features. He does into detail about it here Here is a demo of the tool

• html-to-figma plugin

• flutter path draw package for svg rendering

  Existing Products Here are a few existing products that build on top of Figma or Sketch

  • flinto

Getting Started

This site is written in Flutter, a cross-platform UI toolkit from google that uses the Dart programming language.

It allows for a flexible way to organize, view, and build upon Figma projects.

To get an introduction to Flutter, check out Google's Codelabs that enable you to learn the fundamentals online without downloading anything.

• For a comparison between flutter and other platforms check out these articles:
  • Introduction to Flutter for Web Developers
  • Introduction to Flutter for React Native Developers
  • Introduction to Flutter for IOS Developers -Introduction to Flutter for Android Developers
• To understand how flutter web works check out this Web Support for Flutter article

Required Software
If you are interested in contributing, you'll need to download the following software

• Flutter Web Install SDK - Windows Install Instructions
  - MacOS Install Instructions
  - Linux Install Instructions
  - ChromeOS Install Instructions
• Chrome
• Visual Studio Code
• Git

Flutter Environment Set Up

For this project, we only use Flutter Web, so to get that running on your computer, follow the instructions on Flutter Web Install SDK.

The first step is to download the Flutter SDK, no need to set up the Android or IOS development environments. Once you install the SDK, run the command:

flutter doctor

You should see something similar to what's shown below:

[todo]

Once Flutter is successfully installed, you will need to install Chrome(if it's not already installed) so that you can run your code in the browser during development

Lastly, you will likely want to use Visual Studio Code as your code editor. Go to Visual Studio Code to download the software. Then go to the "extensions" tab on the side and add the flutter extension and dart extension.

[picture below]

Testing Flutter Install
Before you try running this project, make sure flutter is working properly by creating a new project. /* Todo */

Setting Project Up Locally

Once you clone this go to

Project Overview

Setting Up Project Locally

Dependencies