FigmaConvertXib is a tool for exporting design elements from Figma and generating file to a projects
.Xib iOS Xcode
/ .Xml Android-Studio
.
- Watch video with examples
- Installation
- Complection Generation Xib Xml to projects Xcode Android
- Currently supports the following entities
- Export vector icons
- Author
- License
Each step of generation is using the following base parameters:
accessToken
: an access token string that is needed to execute Figma API requests (see Figma access token).project id
: URL of a Figma file, which data will be used to generate code (see Figma file).
Authorization is required to receive Figma files. The authorization is implemented by transferring a personal access token. This token could be created in a few simple steps:
- Open account settings in Figma.
- Press "Create a new personal access token" button in the "Personal Access Tokens" section.
- Enter a description for the token (for instance, "FigmaConvertXib").
- Copy the created token to the clipboard.
Then Compile / Run
the project FigmaConvertXib.xcodeproj
and paste the received access Token in the accessToken field. It is enough to define it only in the base section if this token allows access to all Figma files, which appear in the configuration.
Open the URL figma project, and copy its project-id Then open the application, click button-plus, and paste the received project-id
- Open project
FigmaConvertXib.xcodeproj
- And go to folder
/ Figma / Xib / result_ios.xib
- Open project
FigmaConvertAndroidXml
- And go to folder
/ app / res / layout / result_android.xml
- β
iOS (View / Layer) | Android (ConstraintLayout)
- Rectangle
- Frame
- Page
- Group
- β
iOS | Android (ImageView)
- Image Fill
- Component
- β
iOS (Label) | Android (TextView)
- Text
- β
Vector
- Ellipse
- Polygone
- Star
- β Vector
- Line
- Line Arrow
- Curves
- β
Solid
- Images
- Gradient Linear
- Gradient Radial
- β Gradient Angular
- Gradient Diamond
- β
(Only in iOS)
- Shadow Inner
- Shadow Drop
- Blur Layer
- β Blur Background
In order to export vector-icons in Figma, Ρou need to select vector layers
and click create component
.
Will begin downloading images.
/ Figma / Xib / images.xcassets
/ app / res / drawable
In .xib .xml it will be generated into an ImageView
[email protected] π©| mrustaa FEBRUARY 2021
FigmaConvertXib is available under the MIT license. See the LICENSE file for more info.