📌 [Roadmap] Figma to Web - Missing features

[You-J]

Css properties to support

(update 21.10.06)

Global

1. • opacity
2. • visible
3. • rotation ⚠

Fills

1. • solid fill
2. • image fill as background or background-image
3. • width, height (only has group wrapper)

<GroupWrapper>
  // has size // has not size
  <Rectangle1 />
  <Rectangle2 />
</GroupWrapper>

4. • linear gradient
5. • solid color opacity
6. • gradient opacity
7. • fill (without stroke) opacity 100%
8. • has multi color linear gradient
9. • gradient degree
10. • gradient stops
11. • gradient alpha
12. • radial gradient
    • gradient center
    • gradient radius
13. • angular gradient
14. • multiple fills

box-shadow: -7px -9px 3px rgba(98, 71, 20, 0.25), inset 9px 9px 12px rgba(40, 22, 4, 0.25);

15. • border-radius (all)
16. • border-radius (one)
17. • opacity zero fill
18. • layer (mix-blend-mode)

mix-blend-mode: color-dodge;

stroke

1. • single solid border
2. • stroke dash (in advanced stroke)
3. • stroke dash cap (in advanced stroke)
4. • stroke gap (in advanced stroke)
5. • stroke end points cap (in advanced stroke)
6. • stroke join (in advanced stroke)

boolean operation

1. • responsive position (constraint)

masking

1. • vector mask
2. • rect mas
3. • rrect mask
4. • ⚠ ellipse mask
5. • ⚠ image mask
6. • ⚠ text mask
7. • fallbacks

vector

1. • Responsive position (constraint) (viewbox?)
2. • ⚠ Vector on plugin version
3. • ⚠ curvy lines

image fill

1. • image fill (cover)
2. • image opacity fill
3. • image fit
4. • image crop
5. • image tile

ellipse

1. • stroke
2. • long width oval (shapes/ellipse/Ellipse 11)
3. • long height oval (shapes/ellipse/Ellipse 15)
4. • deformed ellipse (shapes/ellipse/Ellipse 16)

text

47. • align-items
48. • frame path
49. • letter spacing
50. • font family
51. • font size
52. • font-weight
53. • precise font-weight - (e.g. currently ExtraBold gets converted to 700 instead on 800 & so on..)
54. • position
55. • h1-6 & p tag support
56. • fill gradient - #84
57. • mixed text style
58. • text shadow
59. • line-height undefined when auto (don't 100%)
60. • automatize - width
61. • line-height percentage calculation error
62. • proper text formatting for raw html (vanilla) #72

Line ⚠

1. • native line support - no fallback
2. • rotation 0 / 180 / 360 line as divider
3. • rotation n line as vector

<hr />

or

width: 837px;
height: 0px;

border: 1px solid #000000;

Autolayout Frame

1. • fixed size
2. • #112

effects

2. • background blur
3. • layer blur
4. • shadow + spread
5. • shadow + offset
6. • shadow + spread + offset
7. • multi-shadow
8. • shadow (flutter)

box-shadow: 0px 4px 24px rgba(255, 0, 0, 0.25), 0px 4px 4px rgba(255, 153, 0, 0.25);

9. • inner-shadow (no text)
10. • inner + outer-shadow (no text)
11. • inner-shadow (text)
12. • inner + outer-shadow (text)

Polygon

1. • polygon

star

1. • star