What to do with your Flutter code after using FlutLab Figma to Flutter Converter(F2F)
A good team is people working in harmony. When everyone does their job in good faith. A designer thinks of a developer while creating a design. A developer thinks about the user.
In this article, we’ll consider two parts:
1. How to prepare a Figma Project before using F2F
2. How to make a Flutter Code more functional after using F2F
So, are you ready? We are going to create the “Like Counter App”
Part 1. How to prepare a Figma Project before using F2F
1. Open your Figma Project
2. Yes, your project is already perfect ;). But you could help developer to quickly understand which parts of a design have to be changed. To do this you need:
- call all elements in proper names
- place tags to elements developer should work with
3. A number in the center of the screen (10) has to increment (+1) when user clicks a “Like” button. Therefore, I call used elements like this:
tag:Counter: Text
tag:Like:Button
Part 2. How to make the Flutter Code more functional after using Figma to Flutter Converter
- Go to FlutLab.io and use Figma to Flutter Converter
- After converting you should work with files inside the ./lib folder
- All components from Figma will be placed in the general folder ./generated. But the components which were labeled with tags(tag:ClassName:Action) will be placed in separate folders.
4. Let’s start changing ./textcounter/TextCounter.dart file
5. We need to add a “like counter” to the TextCounter Class.
6. It’s time to change the ./GeneratedScreenWidget.dart file now
7. Change StatelessWidget to StatefulWidget, add “_counter” and put it to 0
8. Now, we need to add GestureDetector for ButtonLike and change TextCounter parameter
9. Press a “Build project” button and enjoy the “Like Counter App”
P.S. Figma to Flutter (F2F) will convert any of your designs. Those steps have to be done if you want to make developers’ life a little bit easier :)
How it works: https://youtu.be/4BhW4CNQBrw