Стили CSS/Android/iOS в Figma
Эта версия не актуальна
Это руководство безнадежно устарело. Читайте новое здесь.
Figma формирует стили элементов для разработки в web, а также для приложений под Android и iOS.
Найти готовые стили можно во вкладке Code в правой верхней части панели с параметрами.
В этом разделе доступны три варианта: CSS, Andoid и iOS.
Стиль CSS, сформированный для серого квадрата:
/* Rectangle 1 */
position: absolute;
width: 440px;
height: 320px;
left: 79px;
top: 53px;
background: linear-gradient(0deg, #E5E5E5, #E5E5E5), url(.jpg), #D1615A;
Тот же код для Android:
<!— Rectangle 1 —>
<View
android:id=»@+id/rectangle_1″
android:layout_width=»440dp»
android:layout_height=»320dp»
android:layout_alignParentLeft=»true»
android:layout_marginLeft=»79dp»
android:layout_alignParentTop=»true»
android:layout_marginTop=»29dp»
android:background=»@drawable/rectangle_1″
/>
<!— drawable/rectangle_1.xml —>
<vector
xmlns:android=»http://schemas.android.com/apk/res/android»
xmlns:aapt=»http://schemas.android.com/aapt»
android:width=»440dp»
android:height=»320dp»
android:viewportWidth=»440″
android:viewportHeight=»320″
>
<group>
<clip-path
android:pathData=»M0 0H440V320H0V0Z»
/>
<path
android:pathData=»M0 0V320H440V0″
android:fillColor=»#D1615A»
/>
<path
android:pathData=»M0 0V320H440V0″
android:fillColor=»#E5E5E5″
/>
</group>
</vector>
И iOS:
// Rectangle 1
var view = UILabel()
view.frame = CGRect(x: 0, y: 0, width: 440, height: 320)
view.backgroundColor = .white
let layer0 = CALayer()
layer0.backgroundColor = UIColor(red: 0.82, green: 0.38, blue: 0.353, alpha: 1).cgColor
layer0.bounds = view.bounds
layer0.position = view.center
view.layer.addSublayer(layer0)
let image1 = UIImage(named: «.jpg»)?.cgImage
let layer1 = CALayer()
layer1.contents = image1
layer1.transform = CATransform3DMakeAffineTransform(CGAffineTransform(a: 1.09, b: 0, c: 0, d: 1, tx: -0.05, ty: 0))
layer1.bounds = view.bounds
layer1.position = view.center
view.layer.addSublayer(layer1)
let layer2 = CALayer()
layer2.backgroundColor = UIColor(red: 0.898, green: 0.898, blue: 0.898, alpha: 1).cgColor
layer2.bounds = view.bounds
layer2.position = view.center
view.layer.addSublayer(layer2)
var parent = self.view!
parent.addSubview(view)
view.translatesAutoresizingMaskIntoConstraints = false
view.widthAnchor.constraint(equalToConstant: 440).isActive = true
view.heightAnchor.constraint(equalToConstant: 320).isActive = true
view.leadingAnchor.constraint(equalTo: parent.leadingAnchor, constant: 79).isActive = true
view.topAnchor.constraint(equalTo: parent.topAnchor, constant: 53).isActive = true
Странным образом фигма всё время ставит позиционирование как Absolute. Как с этим можно бороться?