Стили CSS/Android/iOS в Figma


Figma формирует стили элементов для разработки в web, а также для приложений под Android и iOS. 

Найти готовые стили можно во вкладке Code в правой верхней части панели с параметрами. 

CSS в Figma
CSS в Figma

В этом разделе доступны три варианта: CSS, Andoid и iOS. 

Стиль CSS, сформированный для серого квадрата:

CSS

/* Rectangle 1 */

position: absolute;

width: 440px;

height: 320px;

left: 79px;

top: 53px;

background: linear-gradient(0deg, #E5E5E5, #E5E5E5), url(.jpg), #D1615A;

Тот же код для Android:

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:

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

Комментариев: 1
  1. Василий

    Странным образом фигма всё время ставит позиционирование как Absolute. Как с этим можно бороться?

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


👋 Курс дизайнера за полцены: сформируйте портфолио и найдите высокооплачиваемую работу. Помощь с трудоустройством!

По теме:

None found


<