Export UI design interfaces from Figma to Xcode iOS
FigmaConvertXib is a tool for exporting design elements from a Figma project,
into the development environment, with 90% accuracy. As a result of the conversion, files will be created xib/xml, and already using the Xcode / Android Studio editor interface, you can manipulate all the elements in your code. If your project is being designed in Figma and you are not implementing the design programmatically, then this is for you.
In order not to spend a lot of time on the implementation of all UI elements.
https://github.com/mrustaa/FigmaConvertXib
▶️ Adding a Figma Project to the Converter
▶️ Changing pages (each page has different types)
Figma API, you can pull data about all elements of the project with one request. Each element has – size / name / element type / background color, text color, fill gradient / if it is text, then its value / fonts styles / array of elements that are inside (this layer) subviews children / border thickness strokes border / shadow effects blur shadow blur / rounding edges cornerRadius / etc.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:
Open your account settings in Figma.
Click the Generate New Personal Access Token button in the Personal Access Tokens section.
Enter a description for the token (for example, “FigmaConvertXib”).
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
