Export UI design interfaces from Figma to Xcode iOS

That is, we receive data in the form of a hierarchy of ui elements similar to UIKit.
Which we parse and convert into UIKit elements.

For example: 1 Figma element type
– Text is the text of UILabel in UIKit iOS
– Document, Canvas, Group, Frame, Rectangle is a UIView or CALayer rectangle
– Fill Image is UIImageView
– There are types of vectors (Ellipse, Star, RegularPolygon – circle, triangle, star – which can be implemented using IB Designables in UIKit
– And types vector, line – which cannot be converted because point location data is not transmitted.

Fill array (Layer fills)

In Figma, each element contains an array Fill layer coloring placeholders.
It could be (regular color/gradient/or image).
Or maybe an array Fill of 1 color, and 2 gradients.
Therefore, considering 1 Figma element, as well as 1 UIKit element, sometimes does not work.
For example, if an array Fill consists of 1 element (normal color), then you can simply implement it by adding the color as a property to the 1 UIKit backgroundColor element if the test is textColor.
– But if there are many of them, then for implementation in UIKit, you will have to create many subviews of placeholder layers in one.

IB Designables ⚡️ (Expansion to Figma level)

Xcode InterfaceBuilder is limited in features.
And can’t add to layer 🙁shadow, border thickness, gradient, shape),
so that you can see a perfectly copied result.
But thanks to IB Designables It can be done.
Therefore, several views with extended properties were created
_{-DesignFigure
-DesignButton
-Design Label
-DesignInnerShadow}

Vector and Line types are not passed ❗️

Therefore, I wrote at the beginning with exported with an accuracy of 90%.
Because the remaining 10% is (vectors, curved lines, simple lines, and arrows)
Drawn by the designer.
But in most cases they are not used.
It is better to negotiate with the designer
– Use instead of a line – a rectangle
– Instead of an oval vector – a rectangle with rounded edges cornerRadius
– And in general, if possible, do not use these types.

But what if Vector icon 🏞
And what about exporting icons and images

To export vector objects and icons.

You need to choose
vector layers and click create component top center.
He will make a note, to the whole group, that this is a component.

That is, when exporting a group of vectors – will be considered as one single image, and the layers inside will be ignored. But for editing in Figma will be available.

Inquiry Figma API will return this element not as a vector, but as an image.

Obviously, if you try to transfer the vector type and all its coordinates of points in the request, then the request and the answer will be very long.

Therefore, I think they did not bother with it, and offered such an alternative.

Installation

Basic parameters
At each generation stage, the following basic parameters are used:

• accessToken: The access token string required to make requests to the Figma API (see below). Figma access token ).

• project id: The URL of the Figma file whose data will be used to generate the code (see below). Figma file ).

Figma access token

Authorization is required to receive Figma files. Authorization is carried out by transferring a personal access token. This token can be created in a few simple steps:

1. Open your account settings in Figma.

2. Click the Generate New Personal Access Token button in the Personal Access Tokens section.

3. Enter a description for the token (for example, “FigmaConvertXib”).

4. Copy the generated token to the clipboard.

Then Compile/Run project FigmaConvertXib.xcodeproj and insert the received access token into the accessToken field. It is sufficient to define it only in the base section if this token allows access to all Figma files that appear in the configuration.

Add Figma Project ID

Open the figma project URL and copy its project ID. Then open the app, click the plus button, and paste the resulting project ID.

Completing xib/xml for ios/android projects

All images download here

xcode ... / Figma / Xib / images.xcasset
Android ... / app / res / drawable

Conversion result

xcode FigmaConvertXib.xcodeproj
... / Figma / Xib / result_ios.xib

android-studio FigmaConvertAndroidXml
... / app / res / layout / result_android.xml