Import from Figma to FlutterFlow
You are in the design system section and see import from Figma, you think this is heaven-sent! Expecting that all you have to do is press a button and all your pages will be ready to go. That is not entirely true, here is what happens.
That feature allows you to import the design elements from Figma, which means the colors, the fonts, and whatnot. To do this correctly, you must have saved these elements to coincide with the setup in FlutterFlow. You can check that out here.
However, you will have to do the building yourself, that is good news though because FlutterFlow has made it very easy and a lot of fun. I recreated the Figma designs below into pages in Flutterfow and found it very impressive.
Here is how the design looked in Flutterflow.
Identical right?
So here are some tips to make this work easier and faster for you:
1. Make use of templates.
If you have a design that you keep on using on every other page, save this as a template. You can make it once and reuse it every other time. The coolest fact is that you can save complex widget trees.
2. Theme widgets
Theme widgets are also important in making the design work flawless. The best part about using theme widgets is that when you want to change something in a certain widget, it applies to all relevant pages saving you a lot of time. The only drawback is that by the time I was penning this, there was no way of making complex theme widgets (A design with multiple widgets).
3. Rows, columns, and containers
These are the major widgets used in every other page during design in FlutterFlow. All you need to know here is how to combine these three to make your design come true. Incorporate this with padding and you will be creating magic.
4. The stack widget
The stack widget is interesting. At first, I struggled with it but then recalled my cartesian plane fundamentals and everything made sense. For context, I was aiming at recreating the design shown below.
To do this, you will have to set the alignment of the stack widget to be at the center as shown below
Then since these images are spread out on the x-axis, you will set each image with a certain displacement from the center to bring out the above design. (The first image can be -0.5 from the center on the X-axis, the middle one remains in the center and the last image is 0.5 from the center on the X-axis).
5. The floating button
You will need a floating button on some of your pages and a quick hack to create this is wrapping the main column of the page inside another column (Make sure this new column non-scrollable). This way the button that you insert in this column will always remain in place no matter what.
I could go on and on, but these were the most notable features and to retain the readability of this article let me stop there.
If you have a pressing design question, drop me a line (waruikiondo@gmail.com).
Happy designing, let's go and create!
